@sheetxl/utils-react
Version:
Utils React - Utilities for React capabilities needed for all SheetXL components.
604 lines • 72 kB
JavaScript
/**
* @license @sheetxl/utils-react - Utils React - Utilities for React capabilities needed for all SheetXL components. - v0.6.5
*
* (C) 2025-present SheetXL Inc. & Michael T. Ford
* License: The license can be found at https://www.sheetxl.com/license.
*/
import { jsx as t, jsxs as e, Fragment as n } from "react/jsx-runtime";
import o, { useCallback as i, useRef as r, memo as s, forwardRef as l, useState as a, useEffect as c, useMemo as h, useImperativeHandle as u, useLayoutEffect as d, createElement as _, useReducer as p } from "react";
import m from "clsx";
import { useMeasure as f } from "react-use";
import { CommonUtils as g, InternalClipboard as y, ClipboardUtils as v, MimeType as x } from "@sheetxl/utils";
import * as b from "detect-it";
import { mergeRefs as w } from "react-merge-refs";
import { createRoot as S } from "react-dom/client";
import { unstable_batchedUpdates as L } from "react-dom";
const E = { General: "general", Left: "left", Right: "right", Center: "center", Justify: "justify", Fill: "fill", Distributed: "distributed", CenterContinuous: "centerContinuous" }, C = { Shift: "shift", Alt: "alt", Ctrl: "ctrl", Meta: "meta" }, T = { BackSpace: 8, Tab: 9, Clear: 12, Enter: 13, Shift: 16, Control: 17, Alt: 18, Pause: 19, CapsLock: 20, Escape: 27, Space: 32, PageUp: 33, PageDown: 34, End: 35, Home: 36, Left: 37, Up: 38, Right: 39, Down: 40, Insert: 45, Delete: 46, Digit_8: 56, Y: 89, Z: 90, Meta: 91, F1: 112, F2: 113, F3: 114, F4: 115, F5: 116, F6: 117, F7: 118, F8: 119, F9: 120, F10: 121, F11: 122, F12: 123, NumLock: 144, ScrollLock: 145, BackSlash: 220, Slash: 191, BracketRight: 221, BracketLeft: 219 }, M = { Left: 1, Middle: 2, Right: 3 }, D = { Horizontal: "horizontal", Vertical: "vertical" }, P = (t2, e2) => {
const n2 = i((...e3) => t2?.(...e3), e2), o2 = r(null);
o2.current = n2;
const s2 = i((...t3) => o2.current?.(...t3), []);
if (o2.current) return s2;
}, z = (e2) => {
const { style: n2, orientation: o2 = D.Vertical, ...i2 } = e2, r2 = o2 === D.Vertical;
return t("div", { style: { paddingBottom: "0px", paddingRight: "0px", paddingLeft: r2 ? "0px" : "3px", paddingTop: r2 ? "3px" : "0px", display: "flex", alignItems: "center", justifyContent: "center", ...n2 }, ...i2, children: t("button", { style: { padding: "0", display: "flex", alignItems: "center", justifyContent: "center", border: "none" }, className: `scrollbar-button ${r2 ? "vertical" : "horizontal"} single-button start`, children: t("svg", { width: "9", height: "9", viewBox: "0 0 6 6", style: { opacity: "inherit" }, children: t("path", { d: r2 ? "m 3.7274761,0.68060577 1.11969,1.93863003 1.12075,1.93912 c 0.0895,0.155 0.12152,0.33658 0.0904,0.51283 -0.0311,0.17625 -0.12336,0.33591 -0.26054,0.45091 -0.13715,0.11495 -0.31044,0.17793 -0.4894,0.17781 H 0.83095614 c -0.20186,0 -0.39542,-0.0802 -0.53814,-0.2229 -0.14272,-0.14272 -0.22291,-0.33629 -0.22291,-0.53814 -3e-4,-0.13308 0.0347,-0.26385 0.10147,-0.379 l 1.11872996,-1.94066 1.11921,-1.93864003 c 0.13594,-0.23541 0.38717,-0.38047 0.65905,-0.38047 0.27188,0 0.52311,0.14506 0.65905,0.38047 z" : "m 0.75051,2.3424298 1.93863,-1.11969 1.93912,-1.12075 c 0.155,-0.0895 0.33658,-0.12152 0.51283,-0.0904 0.17625,0.0311 0.33591,0.12336 0.45091,0.26054 0.11495,0.13715 0.17793,0.31044 0.17781,0.4894 v 4.47742 c 0,0.20186 -0.0802,0.39542 -0.2229,0.53814 -0.14272,0.14272 -0.33629,0.22291 -0.53814,0.22291 -0.13308,3e-4 -0.26385,-0.0347 -0.379,-0.10147 L 2.68911,4.7797998 0.75047,3.6605898 C 0.51506,3.5246498 0.37,3.2734198 0.37,3.0015398 c 0,-0.27188 0.14506,-0.52311 0.38047,-0.65905 z" }) }) }) });
}, k = (e2) => {
const { style: n2, orientation: o2 = D.Vertical, ...i2 } = e2, r2 = o2 === D.Vertical;
return t("div", { style: { paddingLeft: "0px", paddingTop: "0px", paddingRight: r2 ? "0px" : "3px", paddingBottom: r2 ? "3px" : "0px", display: "flex", alignItems: "center", justifyContent: "center", ...n2 }, ...i2, children: t("button", { style: { padding: "0", display: "flex", alignItems: "center", justifyContent: "center", border: "none" }, className: `scrollbar-button ${r2 ? "vertical" : "horizontal"} single-button end`, children: t("svg", { width: "9", height: "9", viewBox: "0 0 6 6", style: { opacity: "inherit" }, children: t("path", { d: r2 ? "M 2.412334,5.319396 1.292644,3.3807659 0.17189405,1.4416459 c -0.0895,-0.155 -0.12152,-0.33658 -0.0904,-0.51282998 0.0311,-0.17625 0.12336,-0.33591 0.26054,-0.45091 0.13715,-0.11495 0.31044,-0.17793 0.4894,-0.17781 H 5.308854 c 0.20186,0 0.39542,0.0802 0.53814,0.2229 0.14272,0.14272 0.22291,0.33629 0.22291,0.53813998 3e-4,0.13308 -0.0347,0.26385 -0.10147,0.379 l -1.11873,1.94066 -1.11921,1.9386401 c -0.13594,0.23541 -0.38717,0.38047 -0.65905,0.38047 -0.27188,0 -0.52311,-0.14506 -0.65905,-0.38047 z" : "m 5.3893002,3.6575719 -1.9386301,1.11969 -1.93912,1.12075 c -0.155,0.0895 -0.33658,0.12152 -0.51282997,0.0904 -0.17625,-0.0311 -0.33591,-0.12336 -0.45091,-0.26054 -0.11495,-0.13715 -0.17793,-0.31044 -0.17781,-0.4894 V 0.76105195 c 0,-0.20186 0.0802,-0.39542 0.2229,-0.53814 C 0.73562013,0.08019195 0.92919013,1.9467784e-6 1.1310401,1.9467784e-6 1.2641201,-2.9805322e-4 1.3948901,0.03470195 1.5100401,0.10147195 l 1.94066,1.11872995 1.9386401,1.11921 c 0.23541,0.13594 0.38047,0.38717 0.38047,0.65905 0,0.27188 -0.14506,0.52311 -0.38047,0.65905 z" }) }) }) });
}, A = (e2) => {
const { style: n2, orientation: o2 = D.Vertical, ...i2 } = e2, r2 = o2 === D.Vertical;
return t("div", { style: { display: "flex", justifyContent: "center", alignItems: "end", transition: "fill-opacity 1s", zIndex: 1, width: "24px", height: "24px", ...n2 }, className: `scrollbar-button ${r2 ? "vertical" : "horizontal"} edge`, ...i2, children: t("svg", { width: "24", height: "24", viewBox: "0 0 24 24", transform: r2 ? "rotate(90) " : "", children: t("path", { style: { transition: "opacity 240ms ease 0s", opacity: e2.disabled ? 0 : 1 }, d: "M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2" }) }) });
}, B = (t2, e2, n2, o2, i2 = 0) => {
for (let i3 = 0; i3 < n2.length; i3++) {
const r2 = n2[i3].getBoundingClientRect();
let s2 = r2.left - e2, l2 = s2 + r2.width;
if (o2) {
if (s2 < t2 && l2 >= t2) return s2;
} else if (Math.ceil(l2) > Math.ceil(t2) + 2) return l2;
}
return i2;
}, $ = Object.freeze(Object.defineProperty({ __proto__: null, getScrollTo: B }, Symbol.toStringTag, { value: "Module" })), K = "_sheetxl-scrollbar_eblx4_6", O = s(l((n2, o2) => {
const { offset: s2 = 0, totalSize: l2 = 0, viewportSize: u2 = 0, style: d2, className: _2, orientation: p2 = D.Vertical, onScrollOffset: g2, onScroll: y2, showCustomScrollButtons: v2 = false, scrollButtonIncrement: x2 = 200, scrollButtonInitialRepeatDelay: b2 = 260, scrollButtonAdditionalRepeatDelay: w2 = 120, createScrollStartButton: S2 = z, createScrollEndButton: L2 = k, ...E2 } = n2, C2 = P(y2, [y2]), T2 = r(null), [M2, { width: A2, height: $2 }] = f(), [O2, { width: V2, height: H2 }] = f(), W2 = p2 === D.Vertical, N2 = W2 ? "top" : "left", F2 = W2 ? "scrollTop" : "scrollLeft", R2 = W2 ? $2 : A2, I2 = W2 ? H2 : V2, [Y2, X2] = a(null);
c(() => {
null !== Y2 && T2.current && T2.current.scrollTo({ behavior: "smooth", [N2]: Y2 });
}, [Y2, W2]);
const j2 = i((t2, e2 = false) => {
if (!T2.current) return 0;
const n3 = T2.current.querySelector(".scrollbar-viewport"), o3 = n3.getBoundingClientRect(), i2 = n3.children, r2 = e2 ? 0 : B(t2, o3[N2], i2, true, Math.max(0, t2 - x2));
return X2(r2), Math.max(0, r2);
}, []), U2 = i((t2, e2 = false) => {
if (!T2.current) return 0;
const n3 = T2.current.querySelector(".scrollbar-viewport"), o3 = n3.getBoundingClientRect(), i2 = n3.children, r2 = Math.ceil(I2 - R2), s3 = e2 ? r2 : B(t2, o3[N2], i2, false, Math.max(0, t2 + x2));
return X2(s3), Math.min(r2, s3);
}, [I2, R2]), Z2 = r(null), G2 = i((t2) => {
Z2.current = s2;
const e2 = t2.target[F2];
g2(e2, u2, l2), C2?.(t2);
}, [g2, u2, l2, s2]);
c(() => {
const t2 = Z2.current;
Z2.current = null, s2 !== t2 && (T2.current[F2] = s2);
}, [s2, F2]);
const q2 = r(null), J2 = r(null), Q2 = i(() => {
q2.current && (clearTimeout(q2.current), q2.current = null, J2.current = null);
}, []), tt2 = i((t2, e2, n3, o3 = b2) => {
J2.current = t2, q2.current = setTimeout(() => {
const e3 = n3 ? j2(J2.current || t2) : U2(J2.current || t2);
e3 !== J2.current ? tt2(e3, false, n3, w2) : Q2();
}, e2 ? 0 : o3);
}, [j2, U2, Q2]);
c(() => () => Q2(), [Q2]);
const et2 = s2, nt2 = h(() => {
if (!v2) return null;
const t2 = { orientation: p2, disabled: Math.floor(et2) <= 0 || 0 === Math.floor(I2 - R2), onMouseUp: Q2, onMouseLeave: Q2, onMouseDown: () => tt2(et2, true, true) };
return S2?.(t2);
}, [v2, p2, et2, Y2, I2, R2]), ot2 = h(() => {
if (!v2) return null;
const t2 = { orientation: p2, disabled: Math.floor(I2 - R2) <= Math.ceil(et2), onMouseUp: Q2, onMouseLeave: Q2, onMouseDown: () => tt2(et2, true, false) };
return L2?.(t2);
}, [v2, p2, et2, Y2, I2, R2]);
return e("div", { ref: o2, style: { display: "flex", flex: "1", flexDirection: W2 ? "column" : "row", padding: "0", ...d2 }, className: m(K, _2), ...E2, children: [nt2, t("div", { className: "pseudo-scrollbar", style: { flex: "1 1 100%", display: "flex", boxSizing: "content-box", flexDirection: W2 ? "column" : "row", justifyContent: "center", alignItems: "center" }, ref: M2, children: t("div", { tabIndex: -1, style: { flex: "1 1 100%", overflowY: W2 ? "scroll" : "hidden", overflowX: W2 ? "hidden" : "scroll", position: "relative", willChange: "transform" }, onScroll: G2, ref: T2, children: t("div", { ref: O2, style: { position: "absolute", height: W2 ? l2 - u2 + ($2 ?? 0) : 1, width: W2 ? 1 : l2 - u2 + (A2 ?? 0) }, className: "scrollbar-viewport" }) }) }), ot2] });
}));
O.displayName = "Scrollbar";
let V = Date.now, H = 1e3, W = {}, N = 1;
const F = (t2) => {
let e2 = null !== W[t2];
return e2 && (W[t2] = null), e2;
}, R = (t2, e2, n2, o2 = 0, i2) => {
let r2 = V(), s2 = r2, l2 = 0, a2 = 0, c2 = 0, h2 = N++;
if (h2 % 20 == 0) {
const t3 = {};
for (let e3 in W) t3[e3] = true;
W = t3;
}
const u2 = function(d2) {
let _2 = true !== d2, p2 = V(), m2 = true;
try {
m2 = (!e2 || e2(h2)) ?? true;
} catch (t3) {
m2 = false;
}
if (!W[h2] || !m2) return W[h2] = null, void n2?.(60 - a2 / ((p2 - r2) / H), h2, false);
if (_2) {
c2 = Math.round((p2 - s2) / 16.666666666666668) - 1;
for (let t3 = 0; t3 < Math.min(c2, 4); t3++) u2(true), a2++;
}
o2 && (l2 = (p2 - r2) / o2, l2 > 1 && (l2 = 1));
let f2 = i2 ? i2(l2) : l2, g2 = false;
try {
g2 = t2(f2, p2, _2);
} catch (t3) {
g2 = false;
}
false !== g2 && 1 !== l2 || !_2 ? _2 && (s2 = p2, requestAnimationFrame(u2)) : (W[h2] = null, n2?.(60 - a2 / ((p2 - r2) / H), h2, 1 === l2 || null == o2));
};
return W[h2] = true, requestAnimationFrame(u2), h2;
}, I = function(t2) {
return Math.pow(t2 - 1, 3) + 1;
}, Y = function(t2) {
return (t2 /= 0.5) < 1 ? 0.5 * Math.pow(t2, 3) : 0.5 * (Math.pow(t2 - 2, 3) + 2);
};
class X {
constructor(t2, e2) {
this.__isSingleTouch = false, this.__isTracking = false, this.__didDecelerationComplete = false, this.__isGesturing = false, this.__isDragging = false, this.__isDecelerating = 0, this.__isAnimating = 0, this.__interruptedAnimation = false, this.__lastScale = 1, this.__enableScrollX = true, this.__enableScrollY = true, this.__clientLeft = 0, this.__clientTop = 0, this.__clientWidth = 0, this.__clientHeight = 0, this.__contentWidth = 0, this.__contentHeight = 0, this.__snapWidth = 100, this.__snapHeight = 100, this.__zoomLevel = 1, this.__scrollLeft = 0, this.__scrollTop = 0, this.__maxScrollLeft = 0, this.__maxScrollTop = 0, this.__scheduledLeft = 0, this.__scheduledTop = 0, this.__scheduledZoom = 0, this.__lastTouchLeft = 0, this.__lastTouchTop = 0, this.__lastTouchMove = 0, this.__positions = [], this.__initialTouchLeft = 0, this.__initialTouchTop = 0, this.__zoomLevelStart = 1, this.__minDecelerationScrollLeft = null, this.__minDecelerationScrollTop = null, this.__maxDecelerationScrollLeft = null, this.__maxDecelerationScrollTop = null, this.__decelerationVelocityX = null, this.__decelerationVelocityY = 0, this.__callback = t2, this.options = { scrollingX: true, scrollingY: true, animating: true, animationDuration: 250, bouncing: true, locking: true, paging: false, snapping: false, zooming: false, minZoom: 0.5, maxZoom: 3, speedMultiplier: 1, scrollingComplete: void 0, penetrationDeceleration: 0.03, penetrationAcceleration: 0.08, ...e2 };
}
setDimensions(t2, e2, n2, o2) {
null !== t2 && (this.__clientWidth = t2), null !== e2 && (this.__clientHeight = e2), null !== n2 && (this.__contentWidth = n2), null !== o2 && (this.__contentHeight = o2), this.__computeScrollMax(), this.scrollTo(this.__scrollLeft, this.__scrollTop, true);
}
setPosition(t2, e2) {
this.__clientLeft = t2 || 0, this.__clientTop = e2 || 0;
}
setSnapSize(t2, e2) {
this.__snapWidth = t2, this.__snapHeight = e2;
}
getValues() {
return { left: this.__scrollLeft, top: this.__scrollTop, right: this.__scrollLeft + this.__clientWidth / this.__zoomLevel, bottom: this.__scrollTop + this.__clientHeight / this.__zoomLevel, zoom: this.__zoomLevel };
}
getPoint(t2, e2) {
const n2 = this.getValues();
return { left: t2 / n2.zoom, top: e2 / n2.zoom };
}
getScrollMax() {
return { left: this.__maxScrollLeft, top: this.__maxScrollTop };
}
zoomTo(t2, e2 = false, n2, o2, i2) {
if (!this.options.zooming) throw new Error("Zooming is not enabled!");
i2 && (this.__zoomComplete = i2), this.__isDecelerating && (F(this.__isDecelerating), this.__isDecelerating = 0);
const r2 = this.__zoomLevel;
void 0 === n2 && (n2 = this.__clientWidth / 2), void 0 === o2 && (o2 = this.__clientHeight / 2), t2 = Math.max(Math.min(t2, this.options.maxZoom), this.options.minZoom), this.__computeScrollMax(t2);
const s2 = t2 / r2;
let l2 = s2 * (this.__scrollLeft + n2) - n2, a2 = s2 * (this.__scrollTop + o2) - o2;
l2 > this.__maxScrollLeft ? l2 = this.__maxScrollLeft : l2 < 0 && (l2 = 0), a2 > this.__maxScrollTop ? a2 = this.__maxScrollTop : a2 < 0 && (a2 = 0), this.__publish(l2, a2, t2, e2);
}
zoomBy(t2, e2 = false, n2 = 0, o2 = 0, i2) {
this.zoomTo(this.__zoomLevel * t2, e2, n2, o2, i2);
}
scrollTo(t2, e2, n2 = false, o2 = 1) {
if (this.__isDecelerating && (F(this.__isDecelerating), this.__isDecelerating = 0), void 0 !== o2 && o2 !== this.__zoomLevel) {
if (!this.options.zooming) throw new Error("Zooming is not enabled!");
t2 *= o2, e2 *= o2, this.__computeScrollMax(o2);
} else o2 = this.__zoomLevel;
this.options.scrollingX ? this.options.paging ? t2 = Math.round(t2 / this.__clientWidth) * this.__clientWidth : this.options.snapping && (t2 = Math.round(t2 / this.__snapWidth) * this.__snapWidth) : t2 = this.__scrollLeft, this.options.scrollingY ? this.options.paging ? e2 = Math.round(e2 / this.__clientHeight) * this.__clientHeight : this.options.snapping && (e2 = Math.round(e2 / this.__snapHeight) * this.__snapHeight) : e2 = this.__scrollTop, t2 = Math.max(Math.min(this.__maxScrollLeft, t2), 0), e2 = Math.max(Math.min(this.__maxScrollTop, e2), 0), t2 === this.__scrollLeft && e2 === this.__scrollTop && (n2 = false), this.__publish(t2, e2, o2, n2);
}
scrollBy(t2 = 0, e2 = 0, n2 = false) {
const o2 = this.__isAnimating ? this.__scheduledLeft : this.__scrollLeft, i2 = this.__isAnimating ? this.__scheduledTop : this.__scrollTop;
this.scrollTo(o2 + (t2 || 0), i2 + (e2 || 0), n2);
}
doMouseZoom(t2, e2, n2, o2) {
const i2 = t2 > 0 ? 0.97 : 1.03;
return this.zoomTo(this.__zoomLevel * i2, false, n2 - this.__clientLeft, o2 - this.__clientTop);
}
doTouchStart(t2, e2) {
if (void 0 === t2.length) throw new Error("Invalid touch list: " + t2);
if (e2 instanceof Date && (e2 = e2.valueOf()), "number" != typeof e2) throw new Error("Invalid timestamp value: " + e2);
let n2, o2;
this.__interruptedAnimation = true, this.__isDecelerating && (F(this.__isDecelerating), this.__isDecelerating = 0, this.__interruptedAnimation = true), this.__isAnimating && (F(this.__isAnimating), this.__isAnimating = 0, this.__interruptedAnimation = true);
let i2 = 1 === t2.length;
i2 ? (n2 = t2[0].pageX, o2 = t2[0].pageY) : (n2 = Math.abs(t2[0].pageX + t2[1].pageX) / 2, o2 = Math.abs(t2[0].pageY + t2[1].pageY) / 2), this.__initialTouchLeft = n2, this.__initialTouchTop = o2, this.__zoomLevelStart = this.__zoomLevel, this.__lastTouchLeft = n2, this.__lastTouchTop = o2, this.__lastTouchMove = e2, this.__lastScale = 1, this.__enableScrollX = !i2 && this.options.scrollingX, this.__enableScrollY = !i2 && this.options.scrollingY, this.__isTracking = true, this.__didDecelerationComplete = false, this.__isDragging = !i2, this.__isSingleTouch = i2, this.__positions = [];
}
doTouchMove(t2, e2, n2 = 1) {
if (void 0 === t2.length) throw new Error("Invalid touch list: " + t2);
if (e2 instanceof Date && (e2 = e2.valueOf()), "number" != typeof e2) throw new Error("Invalid timestamp value: " + e2);
if (!this.__isTracking) return;
let o2, i2;
2 === t2.length ? (o2 = Math.abs(t2[0].pageX + t2[1].pageX) / 2, i2 = Math.abs(t2[0].pageY + t2[1].pageY) / 2) : (o2 = t2[0].pageX, i2 = t2[0].pageY);
let r2 = this.__positions;
if (this.__isDragging) {
let t3 = o2 - this.__lastTouchLeft, s2 = i2 - this.__lastTouchTop, l2 = this.__scrollLeft, a2 = this.__scrollTop, c2 = this.__zoomLevel;
if (void 0 !== n2 && this.options.zooming) {
let t4 = c2;
if (c2 = c2 / this.__lastScale * n2, c2 = Math.max(Math.min(c2, this.options.maxZoom), this.options.minZoom), t4 !== c2) {
let e3 = o2 - this.__clientLeft, n3 = i2 - this.__clientTop;
l2 = (e3 + l2) * c2 / t4 - e3, a2 = (n3 + a2) * c2 / t4 - n3, this.__computeScrollMax(c2);
}
}
if (this.__enableScrollX) {
l2 -= t3 * this.options.speedMultiplier;
let e3 = this.__maxScrollLeft;
(l2 > e3 || l2 < 0) && (this.options.bouncing ? l2 += t3 / 2 * this.options.speedMultiplier : l2 = l2 > e3 ? e3 : 0);
}
if (this.__enableScrollY) {
a2 -= s2 * this.options.speedMultiplier;
const t4 = this.__maxScrollTop;
(a2 > t4 || a2 < 0) && (this.options.bouncing ? a2 += s2 / 2 * this.options.speedMultiplier : a2 = a2 > t4 ? t4 : 0);
}
r2.length > 60 && r2.splice(0, 30), r2.push(l2, a2, e2), this.__publish(l2, a2, c2);
} else {
let t3 = this.options.locking ? 3 : 0, n3 = 5, s2 = Math.abs(o2 - this.__initialTouchLeft), l2 = Math.abs(i2 - this.__initialTouchTop);
this.__enableScrollX = this.options.scrollingX && s2 >= t3, this.__enableScrollY = this.options.scrollingY && l2 >= t3, r2.push(this.__scrollLeft, this.__scrollTop, e2), this.__isDragging = (this.__enableScrollX || this.__enableScrollY) && (s2 >= n3 || l2 >= n3), this.__isDragging && (this.__interruptedAnimation = false);
}
this.__lastTouchLeft = o2, this.__lastTouchTop = i2, this.__lastTouchMove = e2, this.__lastScale = n2;
}
doTouchEnd(t2) {
if (t2 instanceof Date && (t2 = t2.valueOf()), "number" != typeof t2) throw new Error("Invalid timestamp value: " + t2);
if (this.__isTracking) {
if (this.__isTracking = false, this.__isDragging) if (this.__isDragging = false, this.__isSingleTouch && this.options.animating && t2 - this.__lastTouchMove <= 100) {
let e2 = this.__positions, n2 = e2.length - 1, o2 = n2;
for (let t3 = n2; t3 > 0 && e2[t3] > this.__lastTouchMove - 100; t3 -= 3) o2 = t3;
if (o2 !== n2) {
const i2 = e2[n2] - e2[o2], r2 = this.__scrollLeft - e2[o2 - 2], s2 = this.__scrollTop - e2[o2 - 1];
this.__decelerationVelocityX = r2 / i2 * (1e3 / 60), this.__decelerationVelocityY = s2 / i2 * (1e3 / 60);
const l2 = this.options.paging || this.options.snapping ? 4 : 1;
(Math.abs(this.__decelerationVelocityX) > l2 || Math.abs(this.__decelerationVelocityY) > l2) && this.__startDeceleration(t2);
} else this.options.scrollingComplete?.();
} else t2 - this.__lastTouchMove > 100 && this.options.scrollingComplete?.();
this.__isDecelerating || ((this.__interruptedAnimation || this.__isDragging) && this.options.scrollingComplete?.(), this.scrollTo(this.__scrollLeft, this.__scrollTop, true, this.__zoomLevel)), this.__positions.length = 0;
}
}
__publish(t2, e2, n2, o2 = false) {
const i2 = this.__isAnimating;
if (i2 && (F(i2), this.__isAnimating = 0), o2 && this.options.animating) {
this.__scheduledLeft = t2, this.__scheduledTop = e2, this.__scheduledZoom = n2;
const o3 = this.__scrollLeft, r2 = this.__scrollTop, s2 = this.__zoomLevel, l2 = t2 - o3, a2 = e2 - r2, c2 = n2 - s2, h2 = function(t3, e3, n3) {
n3 && (this.__scrollLeft = o3 + l2 * t3, this.__scrollTop = r2 + a2 * t3, this.__zoomLevel = s2 + c2 * t3, this.__callback && this.__callback(this.__scrollLeft, this.__scrollTop, this.__zoomLevel));
}.bind(this), u2 = function(t3) {
return this.__isAnimating === t3;
}.bind(this), d2 = function(t3, e3, n3) {
e3 === this.__isAnimating && (this.__isAnimating = false), (this.__didDecelerationComplete || n3) && this.options.scrollingComplete?.(), this.options.zooming && (this.__computeScrollMax(), this.__zoomComplete && (this.__zoomComplete(), this.__zoomComplete = null));
}.bind(this);
this.__isAnimating = R(h2, u2, d2, this.options.animationDuration, i2 ? I : Y);
} else this.__scheduledLeft = this.__scrollLeft = t2, this.__scheduledTop = this.__scrollTop = e2, this.__scheduledZoom = this.__zoomLevel = n2, this.__callback && this.__callback(t2, e2, n2), this.options.zooming && (this.__computeScrollMax(), this.__zoomComplete && (this.__zoomComplete(), this.__zoomComplete = null));
}
__computeScrollMax(t2 = this.__zoomLevel) {
this.__maxScrollLeft = Math.max(this.__contentWidth * t2 - this.__clientWidth, 0), this.__maxScrollTop = Math.max(this.__contentHeight * t2 - this.__clientHeight, 0);
}
__startDeceleration(t2) {
if (this.options.paging) {
const t3 = Math.max(Math.min(this.__scrollLeft, this.__maxScrollLeft), 0), e3 = Math.max(Math.min(this.__scrollTop, this.__maxScrollTop), 0), n3 = this.__clientWidth, o3 = this.__clientHeight;
this.__minDecelerationScrollLeft = Math.floor(t3 / n3) * n3, this.__minDecelerationScrollTop = Math.floor(e3 / o3) * o3, this.__maxDecelerationScrollLeft = Math.ceil(t3 / n3) * n3, this.__maxDecelerationScrollTop = Math.ceil(e3 / o3) * o3;
} else this.__minDecelerationScrollLeft = 0, this.__minDecelerationScrollTop = 0, this.__maxDecelerationScrollLeft = this.__maxScrollLeft, this.__maxDecelerationScrollTop = this.__maxScrollTop;
const e2 = function(t3, e3, n3) {
this.__stepThroughDeceleration(n3);
}.bind(this), n2 = this.options.snapping ? 4 : 0.1, o2 = function() {
const t3 = Math.abs(this.__decelerationVelocityX) >= n2 || Math.abs(this.__decelerationVelocityY) >= n2;
return t3 || (this.__didDecelerationComplete = true), t3;
}.bind(this), i2 = function(t3, e3, n3) {
this.__isDecelerating = 0, this.__didDecelerationComplete && this.options.scrollingComplete?.(), this.scrollTo(this.__scrollLeft, this.__scrollTop, this.options.snapping);
}.bind(this);
this.__isDecelerating = R(e2, o2, i2);
}
__stepThroughDeceleration(t2) {
let e2 = this.__scrollLeft + this.__decelerationVelocityX, n2 = this.__scrollTop + this.__decelerationVelocityY;
if (!this.options.bouncing) {
const t3 = Math.max(Math.min(this.__maxDecelerationScrollLeft, e2), this.__minDecelerationScrollLeft);
t3 !== e2 && (e2 = t3, this.__decelerationVelocityX = 0);
const o2 = Math.max(Math.min(this.__maxDecelerationScrollTop, n2), this.__minDecelerationScrollTop);
o2 !== n2 && (n2 = o2, this.__decelerationVelocityY = 0);
}
if (t2 ? this.__publish(e2, n2, this.__zoomLevel) : (this.__scrollLeft = e2, this.__scrollTop = n2), !this.options.paging) {
const t3 = 0.95;
this.__decelerationVelocityX *= t3, this.__decelerationVelocityY *= t3;
}
if (this.options.bouncing) {
let t3 = 0, o2 = 0, i2 = this.options.penetrationDeceleration, r2 = this.options.penetrationAcceleration;
e2 < this.__minDecelerationScrollLeft ? t3 = this.__minDecelerationScrollLeft - e2 : e2 > this.__maxDecelerationScrollLeft && (t3 = this.__maxDecelerationScrollLeft - e2), n2 < this.__minDecelerationScrollTop ? o2 = this.__minDecelerationScrollTop - n2 : n2 > this.__maxDecelerationScrollTop && (o2 = this.__maxDecelerationScrollTop - n2), 0 !== t3 && (t3 * this.__decelerationVelocityX <= 0 ? this.__decelerationVelocityX += t3 * i2 : this.__decelerationVelocityX = t3 * r2), 0 !== o2 && (o2 * this.__decelerationVelocityY <= 0 ? this.__decelerationVelocityY += o2 * i2 : this.__decelerationVelocityY = o2 * r2);
}
}
}
const j = /* @__PURE__ */ new Set(["INPUT", "TEXTAREA", "SELECT"]), U = {};
function Z() {
return b;
}
const G = (t2) => "BracketLeft" === t2 ? "[" : "BracketRight" === t2 ? "]" : g.camelToPrettyCase(t2), q = Object.freeze(Object.defineProperty({ __proto__: null, EmptyCssProperties: U, boundPixel: function(t2, e2 = false, n2 = 0) {
return t2;
}, createSyntheticEvent: (t2) => {
let e2 = false, n2 = false;
return { nativeEvent: t2, currentTarget: t2.currentTarget, target: t2.target, bubbles: t2.bubbles, cancelable: t2.cancelable, defaultPrevented: t2.defaultPrevented, eventPhase: t2.eventPhase, isTrusted: t2.isTrusted, preventDefault: () => {
e2 = true, t2.preventDefault();
}, isDefaultPrevented: () => e2, stopPropagation: () => {
n2 = true, t2.stopPropagation();
}, isPropagationStopped: () => n2, persist: () => {
}, timeStamp: t2.timeStamp, type: t2.type };
}, detectIt: Z, focusableNodeNames: j, toPrettyKeyCode: G }, Symbol.toStringTag, { value: "Module" })), J = [];
function Q(t2, e2, n2 = J) {
const o2 = r(null);
return u(t2, () => {
if (!o2.current) return;
const t3 = o2.current, n3 = e2?.();
if (!n3 || "object" != typeof n3) throw new Error("attributes must return a plain object of values");
const i2 = Object.keys(n3), r2 = i2.length;
for (let e3 = 0; e3 < r2; e3++) {
const o3 = i2[e3], r3 = n3[o3];
Object.defineProperty(t3, o3, { value: r3, writable: true, configurable: true, enumerable: true });
}
return t3;
}, n2), o2;
}
const tt = (e2) => t(O, { ...e2 }), et = ({ width: e2, height: n2 }) => t("div", { className: "corner", style: { minWidth: `${e2}px`, width: `${e2}px`, minHeight: `${n2}px`, height: `${n2}px` } }), nt = s(l((o2, s2) => {
const { children: l2, viewport: a2, onScrollViewport: u2, showHorizontalScrollbar: d2 = true, showVerticalScrollbar: _2 = true, createScrollCorner: p2 = et, createHorizontalScrollbar: m2 = tt, createVerticalScrollbar: g2 = tt, style: y2, touchElement: v2, disableTouch: x2, ...b2 } = o2, w2 = P(u2, [u2]), S2 = Q(s2, () => ({ isScrollPane: () => true }), []), L2 = r(null);
c(() => {
L2.current && (L2.current.__scrollTop === a2?.top && L2.current.__scrollLeft === a2?.left || L2.current.__isDecelerating || L2.current?.scrollTo(a2?.left, a2?.top, false));
}, [a2?.left, a2?.top, v2]);
const E2 = i((t2, e2) => {
w2?.({ left: t2, top: e2 });
}, []), C2 = i((t2) => {
L2.current?.doTouchStart(t2.touches, t2.timeStamp);
}, []), T2 = i((t2) => {
t2.preventDefault(), L2.current?.doTouchMove(t2.touches, t2.timeStamp);
}, []), M2 = i((t2) => {
L2.current?.doTouchEnd(t2.timeStamp);
}, []), z2 = i(({ containerWidth: t2, containerHeight: e2, totalWidth: n2, totalHeight: o3 }) => {
L2.current.setDimensions(t2, e2, n2, o3);
}, []);
c(() => {
const t2 = v2 ?? S2.current;
if (!x2 && Z().supportsTouchEvents && t2 && a2) {
if (!L2.current) {
const t3 = { scrollingX: true, scrollingY: true, decelerationRate: 0.95, penetrationAcceleration: 0.08 };
L2.current = new X(E2, t3);
}
Z().supportsTouchEvents && (t2.addEventListener("touchstart", C2), t2.addEventListener("touchend", M2), t2.addEventListener("touchmove", T2)), z2({ containerWidth: a2?.width, containerHeight: a2?.height, totalWidth: a2?.totalWidth, totalHeight: a2?.totalHeight });
}
return () => {
t2?.removeEventListener("touchstart", C2), t2?.removeEventListener("touchend", M2), t2?.removeEventListener("touchmove", T2);
};
}, [a2?.width, a2?.height, a2?.totalWidth, a2?.totalHeight, x2, v2]);
const [k2, { width: A2 }] = f(), [B2, { height: $2 }] = f(), K2 = h(() => {
const e2 = g2({ orientation: D.Vertical, offset: a2?.top, viewportSize: a2?.height, totalSize: a2?.totalHeight, onScrollOffset: (t2) => {
w2?.({ top: t2 });
} });
return t("div", { style: { display: "flex", flex: "0" }, ref: k2, children: e2 });
}, [g2, a2?.top, a2?.height, a2?.totalHeight]), O2 = h(() => {
const o3 = m2({ orientation: D.Horizontal, offset: a2?.left, viewportSize: a2?.width, totalSize: a2?.totalWidth, onScrollOffset: (t2) => w2?.({ left: t2 }) });
return e("div", { style: { display: "flex", flex: "none", flexDirection: "row", alignItems: "stretch", justifyContent: "center" }, children: [t("div", { style: { display: "flex", flex: "1 1 100%", flexDirection: "column", width: `calc(100% - ${A2}px)` }, children: t("div", { ref: B2, className: "sizer", children: o3 }) }), _2 ? p2({ width: A2, height: $2 }) : t(n, {})] });
}, [m2, a2?.left, a2?.width, a2?.totalWidth, _2, p2, A2, $2]);
return t("div", { style: { position: "relative", display: "flex", minWidth: _2 ? `${A2}px` : void 0, minHeight: d2 ? `${$2}px` : void 0, ...y2 }, ...b2, ref: S2, children: e("div", { style: { position: "relative", width: "100%", flex: "1 1 100%", display: "flex", flexDirection: "column", boxSizing: "border-box" }, children: [e("div", { style: { display: "flex", flex: "1 1 100%", overflow: "hidden" }, children: [t("div", { style: { display: "flex", flex: "1 1 100%", overflow: "hidden" }, children: l2 }), _2 ? K2 : t(n, {})] }), d2 ? O2 : t(n, {})] }) });
}));
nt.displayName = "ScrollPane";
const ot = { Default: "default", Error: "error", Success: "success", Warning: "warning", Info: "info" }, it = /* @__PURE__ */ new Set(), rt = { showMessage: (t2, e2) => {
if (e2?.onceKey) {
if (it.has(e2.onceKey)) return;
it.add(e2.onceKey);
}
let n2 = console.log;
e2?.type !== ot.Warning && e2?.type !== ot.Error || (n2 = console.warn), n2(t2);
}, showBusy: (t2, e2) => new Promise((t3) => {
t3(() => {
});
}), showError: (t2) => {
console.error(t2);
} };
let st = 0;
function lt() {
const [t2, e2] = a(!!document.fullscreenElement), n2 = i(() => {
const t3 = document.fullscreenElement;
return t3 ? t3.querySelector(".fullscreen-portal-root") || t3 : document.body;
}, []);
return c(() => {
function t3() {
const t4 = document.fullscreenElement;
if (e2(!!t4), !t4) return;
let n3 = t4.querySelector(".fullscreen-portal-root");
n3 || (n3 = document.createElement("div"), n3.className = "fullscreen-portal-root _fullscreen-portal-root_1mjsr_4", t4.appendChild(n3));
}
return st++, t3(), document.addEventListener("fullscreenchange", t3), () => {
document.removeEventListener("fullscreenchange", t3), st--, st <= 0 && (document.querySelectorAll(".fullscreen-portal-root").forEach((t4) => {
t4.parentNode && t4.parentNode.removeChild(t4);
}), st = 0);
};
}, []), { getPortalContainer: n2, isFullscreen: t2 };
}
const at = 100, ct = 100, ht = 1e6, ut = 100, dt = 50, _t = s(l((e2, n2) => {
const { offset: o2 = 0, viewportSize: s2 = 0, totalSize: l2 = 0, minSize: c2 = 0, endGap: h2 = at, endScrollIncrement: u2 = ct, style: _2 = U, onMouseDown: p2, onScrollOffset: m2, onScroll: f2, scaleLimit: g2 = ht, scaleFactor: y2 = ut, precisionFactor: v2 = dt, ...x2 } = e2;
f2 && console.warn("onScroll not supported for VirtualScrollbar. Use onScrollOffset instead");
const b2 = P(p2, [p2]), w2 = () => ({ offset: o2, totalSize: 0 === g2 ? l2 : Math.min(l2 ?? 0, Math.max(c2 ?? 0, (o2 ?? 0) + (s2 ?? 0)) + (h2 ?? 0)) }), [S2, L2] = a(w2), E2 = 0 !== g2 && S2.totalSize > g2 ? y2 : 1, C2 = E2 / v2, T2 = Math.ceil(S2.totalSize / E2), M2 = Math.ceil(S2.offset / E2), D2 = Math.ceil(s2 / E2), z2 = i((t2) => {
}, []), [k2, A2] = a(false), B2 = r(null);
d(() => {
if (!k2) {
B2.current = { propTotalSize: l2, propViewportSize: s2, propOffset: o2 };
const t2 = w2();
L2(t2);
}
}, [l2, s2, o2, k2, c2, h2, u2]);
const $2 = P((t2, e3, n3) => {
const i2 = B2.current;
B2.current = null, i2 && i2.propTotalSize === l2 && i2.propViewportSize === s2 && i2.propOffset === o2 || (Math.abs(t2 - M2) < C2 && (t2 = M2), m2?.(t2 * E2, M2, D2));
}, [m2, E2, C2, M2, D2]), K2 = i((t2) => {
document.removeEventListener("mousemove", z2), document.removeEventListener("mouseup", K2), A2(false);
}, []), V2 = i((t2) => {
b2?.(t2), A2(true), document.addEventListener("mousemove", z2, { passive: true }), document.addEventListener("mouseup", K2, { passive: true });
}, [z2, K2]);
return t(O, { ref: n2, style: { ..._2 }, ...x2, offset: M2, totalSize: T2, viewportSize: D2, onMouseDown: V2, onScrollOffset: $2 });
}));
_t.displayName = "VirtualScrollbar";
const pt = { BottomEnd: "bottom-end", BottomStart: "bottom-start", Bottom: "bottom", LeftEnd: "left-end", LeftStart: "left-start", Left: "left", RightEnd: "right-end", RightStart: "right-start", Right: "right", TopEnd: "top-end", TopStart: "top-start", Top: "top" }, mt = s(l((e2, n2) => {
const { refFocusStart: o2, ...s2 } = e2, l2 = r(null), a2 = i(() => {
if (o2) return void o2?.current?.focus();
const t2 = l2.current.parentElement.children;
let e3 = [];
for (let n3 = 0; n3 < t2.length && t2[n3] !== l2.current; n3++) {
const o3 = t2[n3].getAttribute("tabindex");
if (null == o3 || "-1" === o3) continue;
if ("true" === t2[n3].getAttribute("disabled")) continue;
const i2 = t2[n3];
i2.focus && e3.push({ tabindex: parseInt(o3), child: i2 });
}
0 !== e3.length && (e3.sort(function(t3, e4) {
return t3.tabindex - e4.tabindex;
}), e3[0].child.focus());
}, [o2]);
return t("div", { tabIndex: 0, ref: w([l2, n2]), onFocus: a2, ...s2 });
}));
const ft = s(l((i2, s2) => {
const { className: l2, style: a2, children: c2, radius: u2 = 4, strokeWidth: d2 = 1, strokeColor: _2 = "grey", ...p2 } = i2, [m2, { width: g2, height: y2 }] = f(), v2 = r(null), x2 = (t2, e2 = 0) => {
const n2 = t2 / 2, o2 = y2 - n2 + e2;
return function(t3, e3, n3 = false) {
if (0 === e3) return t3;
function o3(t4, e4, n4) {
let o4 = e4.x - t4.x, r3 = e4.y - t4.y, s4 = Math.sqrt(o4 * o4 + r3 * r3);
return i3(t4, e4, Math.min(1, n4 / s4));
}
function i3(t4, e4, n4) {
return { x: t4.x + (e4.x - t4.x) * n4, y: t4.y + (e4.y - t4.y) * n4 };
}
function r2(t4, e4) {
t4.length > 2 && (t4[t4.length - 2] = e4.x, t4[t4.length - 1] = e4.y);
}
function s3(t4) {
return { x: parseFloat(t4[t4.length - 2]), y: parseFloat(t4[t4.length - 1]) };
}
let l3 = t3.split(/[,\s]/).reduce(function(t4, e4) {
let n4 = e4.match("([a-zA-Z])(.+)");
return n4 ? (t4.push(n4[1]), t4.push(n4[2])) : t4.push(e4), t4;
}, []).reduce(function(t4, e4) {
return parseFloat(e4) == e4 && t4.length ? t4[t4.length - 1].push(e4) : t4.push([e4]), t4;
}, []), a3 = [];
if (l3.length > 1) {
let t4 = s3(l3[0]), c3 = null;
"Z" === l3[l3.length - 1][0] && l3[0].length > 2 && (c3 = ["L", t4.x, t4.y], l3[l3.length - 1] = c3), a3.push(l3[0]);
for (let t5 = 1; t5 < l3.length; t5++) {
let h2 = a3[a3.length - 1], u3 = l3[t5], d3 = u3 === c3 ? l3[1] : l3[t5 + 1];
if (d3 && h2 && h2.length > 2 && "L" === u3[0] && d3.length > 2 && "L" === d3[0]) {
let t6, l4, c4 = s3(h2), _3 = s3(u3), p3 = s3(d3);
n3 ? (t6 = i3(_3, h2.origPoint || c4, e3), l4 = i3(_3, d3.origPoint || p3, e3)) : (t6 = o3(_3, c4, e3), l4 = o3(_3, p3, e3)), r2(u3, t6), u3.origPoint = _3, a3.push(u3);
let m3 = i3(t6, _3, 0.5), f2 = i3(_3, l4, 0.5), g3 = ["C", m3.x, m3.y, f2.x, f2.y, l4.x, l4.y];
g3.origPoint = _3, a3.push(g3);
} else a3.push(u3);
}
if (c3) {
let t5 = s3(a3[a3.length - 1]);
a3.push(["Z"]), r2(a3[0], t5);
}
} else a3 = l3;
return a3.reduce(function(t4, e4) {
return t4 + e4.join(" ") + " ";
}, "");
}(`${`M 0 ${n2} L ${u2 - 0.5} ${n2} L ${u2 - 0.5} ${o2} L ${2 * u2} ${o2}`} ${`L ${g2 - 2 * u2} ${o2}`} ${`M ${g2 - 2 * u2} ${o2} L ${g2 - u2} ${o2} L ${g2 - u2} ${n2} L ${g2} ${n2}`}`, u2);
}, b2 = h(() => x2(d2), [g2, y2, u2, d2]), S2 = h(() => {
if (0 === u2) return;
const t2 = u2 / 2;
return x2(u2) + `L ${g2} 0 L 0 0 L 0 ${t2}`;
}, [b2, u2, d2]), L2 = h(() => ({ style: { clipPath: `path('${S2}')` } }), [S2]);
return e("div", { className: l2, style: { display: "flex", flexDirection: "row", ...a2 }, ...p2, ref: w([v2, m2, s2]), children: [o.isValidElement(c2) ? o.cloneElement(c2, L2) : t(n, {}), t("svg", { style: { position: "absolute", top: 0, left: 0, pointerEvents: "none" }, width: g2, height: y2, viewBox: `0 0 ${g2} ${y2}`, children: t("path", { d: b2, stroke: _2, fill: "none", vectorEffect: "non-scaling-stroke", strokeWidth: d2 }) })] });
})), gt = {}, yt = (e2) => {
const { onPointerDown: n2, style: o2, splitDirection: i2, paddingBefore: r2 = 0, paddingAfter: s2 = 0, disabled: l2, key: a2, hitAreaProps: c2 = gt, ...h2 } = e2, u2 = "row" === i2, { style: d2, className: _2, ...p2 } = c2;
return t("div", { style: { ...o2, position: "relative" }, ...h2, children: t("div", { className: m("hit-box", _2), style: { left: (u2 ? -r2 : 0) + "px", width: `calc(100% + ${u2 ? r2 + s2 : 0}px)`, top: (u2 ? 0 : -r2) + "px", height: `calc(100% + ${u2 ? 0 : r2 + s2}px)`, position: "absolute", ...d2 }, onPointerDown: l2 ? void 0 : n2, ...p2 }) }, a2);
}, vt = {}, xt = (t2, e2, n2 = true) => null === t2 ? null : null !== t2.pixels ? n2 ? t2.pixels : e2 - t2.pixels : (n2 ? t2.percent : 100 - t2.percent) / 100 * e2, bt = (t2, e2 = true) => t2?.percent ? `${e2 ? t2.percent : 100 - t2.percent}%` : t2?.pixels ? `${t2.pixels}px` : void 0, wt = (t2, e2) => {
if (null == t2) return null;
const n2 = { percent: null, pixels: null };
let o2 = e2;
return "string" == typeof t2 && ((t2 = t2.trim().toLowerCase()).endsWith("px") ? (t2 = t2.substring(0, t2.length - 2), o2 = false) : t2.endsWith("%") && (t2 = t2.substring(0, t2.length - 1), o2 = true), t2 = parseFloat(t2)), o2 ? n2.percent = t2 : n2.pixels = t2, Object.freeze(n2);
}, St = s(l((n2, i2) => {
const { elementBefore: s2, elementAfter: l2, splitDirection: u2 = "row", fixedPane: d2 = null, position: _2, onPositionChange: p2, minBefore: g2, maxBefore: y2, minAfter: v2, maxAfter: x2, children: b2, className: S2, style: L2, disabled: E2 = false, onDragStart: C2, onDragResize: T2, onDragFinish: M2, resizerProps: D2 = vt, paneProps: z2 = vt, paneBeforeProps: k2 = vt, paneAfterProps: A2 = vt, createResizer: B2 = yt } = n2;
if (b2) throw new Error("Use elementBefore and elementAfter instead of children.");
const $2 = h(() => o.isValidElement(l2) && o.isValidElement(s2), [l2, s2]), K2 = h(() => {
let t2 = null;
d2 && ("before" === d2 ? t2 = 0 : "after" === d2 && (t2 = 1));
const e2 = null === t2;
return { fixedPaneOffset: t2, isPercent: e2, minBefore: wt(g2, e2), maxBefore: wt(y2, e2), minAfter: wt(v2, e2), maxAfter: wt(x2, e2) };
}, [g2, y2, v2, x2]), O2 = P(p2, [p2]), [V2, H2] = a(() => wt(_2, null === d2));
c(() => {
H2(wt(_2, null === d2));
}, [_2, d2]);
const [W2, { width: N2, height: F2 }] = f(), [R2, { width: I2, height: Y2 }] = f(), X2 = "row" === u2 ? I2 : Y2, j2 = "row" === u2 ? N2 : F2, U2 = h(() => ((t2, e2, n3, o2) => {
const i3 = [null, null], r2 = [null, null];
if (t2 || (t2 = { percent: null === o2.fixedPaneOffset ? 50 : null, pixels: null === o2.fixedPaneOffset ? null : 0 }), 0 === e2) return null != t2?.pixels ? 1 !== o2.fixedPaneOffset ? (i3[0] = t2?.pixels, r2[1] = 100) : (i3[1] = t2?.pixels - n3, r2[0] = 100) : null != t2?.percent && (1 !== o2.fixedPaneOffset ? (r2[0] = t2?.percent, r2[1] = 100 - t2?.percent) : (r2[1] = t2?.percent, r2[0] = 100 - t2?.percent)), { percents: r2, pixels: i3, minBefore: bt(o2.minBefore, true), maxBefore: bt(o2.maxBefore, true), minAfter: bt(o2.minAfter), maxAfter: bt(o2.maxAfter) };
let s3 = xt(t2, e2, 1 !== o2.fixedPaneOffset), l3 = e2 - n3, a2 = xt(o2.minBefore, l3, true) ?? 0, c2 = xt(o2.maxBefore, l3, true) ?? l3, h2 = 0, u3 = 0, d3 = 0, _3 = l3;
h2 = (xt(o2.maxAfter, e2, false) ?? n3) - n3, u3 = xt(o2.minAfter, e2, false) ?? e2, d3 = Math.max(a2, h2), _3 = Math.min(c2, u3), s3 = Math.max(d3, Math.min(s3, _3)), u3 = Math.min(l3 - s3, xt(o2.maxAfter, l3 - s3, true) ?? l3), h2 = Math.min(l3 - s3, xt(o2.minAfter, l3 - s3, true) ?? l3), i3[0] = s3, i3[1] = l3 - i3[0];
const p3 = Math.max(0, Math.min(100, s3 / l3 * 100));
return r2[0] = p3, r2[1] = 100 - r2[0], { percents: r2, pixels: i3, minBefore: `${a2}px`, minAfter: `${h2}px`, maxBefore: `${i3[0]}px`, maxAfter: `${i3[1]}px` };
})(V2, j2, X2, K2), [K2, V2, j2, X2, u2]), [Z2, G2] = a(false), q2 = P(C2, [C2]), J2 = P(T2, [T2]), tt2 = P(M2, [M2]), et2 = r(null), nt2 = r(null), ot2 = r(null), { style: it2, className: rt2, ...st2 } = z2, lt2 = { minWidth: 0, minHeight: 0, maxWidth: "100%", maxHeight: "100%", display: "flex", overflow: "hidden", ...it2 }, { className: at2, style: ct2, ...ht2 } = k2, { className: ut2, style: dt2, ..._t2 } = A2, pt2 = { flex: "1 1 100%", width: "100%", ...L2, flexDirection: u2, display: "flex" }, { className: mt2, style: ft2, onPointerDown: gt2, ...St2 } = D2, Lt2 = P((t2) => {
const e2 = wt(t2, null === d2);
H2(e2);
}, [d2]), Et2 = P((t2) => {
if (E2 || !Z2) return;
const e2 = Mt2.current?.getBoundingClientRect();
let n3 = 0;
n3 = "row" === u2 ? (t2.clientX ?? t2.touches?.[0]?.clientX) - e2.x : (t2.clientY ?? t2.touches?.[0]?.clientY) - e2.y, n3 = Math.max(0, Math.min(j2, n3)), 1 === K2.fixedPaneOffset && (n3 = j2 - n3), _2 && V2.pixels === n3 || H2({ pixels: n3, percent: null }), J2?.(n3), t2.stopPropagation(), t2.preventDefault();
}, [K2, u2, E2, Z2, V2, j2]), Ct2 = P((t2) => {
if (document.removeEventListener("pointermove", Et2), document.removeEventListener("touchmove", Et2), document.removeEventListener("pointerup", Ct2), !Z2) return;
if (G2(false), !V2) return;
tt2(V2.pixels);
if (!wt(_2, null === d2) || V2.pixels !== _2) {
const t3 = { ...V2 };
null === t3.percent && (t3.percent = t3.pixels / j2 * 100), O2(t3);
}
t2.stopPropagation(), t2.preventDefault();
}, [V2, Z2, _2, d2, j2]), Tt2 = P((t2) => {
gt2?.(t2), t2.defaultPrevented || E2 || Z2 || (G2(true), q2(), document.addEventListener("pointermove", Et2, { passive: false }), document.addEventListener("touchmove", Et2, { passive: false }), document.addEventListener("pointerup", Ct2, { passive: false }));
}, [gt2]), Mt2 = Q(i2, () => ({ setPosition: Lt2, isSplitPane: () => true }), []), Dt2 = h(() => $2 ? B2?.({ key: "resizer", ref: w([R2, nt2]), className: m("resizer", mt2), onPointerDownCapture: Tt2, style: { cursor: E2 ? void 0 : "row" === u2 ? "ew-resize" : "ns-resize", minWidth: "row" === u2 ? "2px" : void 0, minHeight: "row" !== u2 ? "2px" : void 0, boxSizing: "border-box", pointerEvents: "all", zIndex: 1, ...ft2 }, splitDirection: u2, disabled: E2, ...St2 }) : null, [$2, mt2, St2, u2, ft2, E2]), Pt2 = "row" === u2 ? "Width" : "Height", zt2 = { ...lt2, ...ct2, flex: 0 === K2.fixedPaneOffset && null !== U2?.pixels[0] ? `0 0 ${Math.round(U2?.pixels[0])}px` : `1 1 ${Math.round(U2?.percents[0] ?? 100)}%`, [`min${Pt2}`]: U2?.minBefore, [`max${Pt2}`]: l2 ? U2?.maxBefore : "100%" }, kt2 = { ...lt2, ...dt2, flex: 1 === K2.fixedPaneOffset && null !== U2?.pixels[1] ? `0 0 ${Math.round(U2?.pixels[1])}px` : `1 1 ${Math.round(U2?.percents[1] ?? 100)}%`, [`min${Pt2}`]: U2?.minAfter, [`max${Pt2}`]: s2 ? U2?.maxAfter : "100%" }, At2 = h(() => s2 ? t("div", { ref: et2, className: m("before", rt2, at2), style: zt2, ...st2, ...ht2, children: s2 }, "before") : null, [s2, z2, k2, K2, U2]), Bt2 = h(() => l2 ? t("div", { ref: ot2, className: m("after", rt2, ut2), style: kt2, ...st2, ..._t2, children: l2 }, "after") : null, [l2, z2, A2, K2, U2]);
return e("div", { ref: w([W2, Mt2]), className: m("splitPane", "row" === u2 ? "vertical" : "horizontal", { dragging: Z2 }, S2), style: pt2, children: [At2, Dt2, Bt2] });
}));
function Lt(t2) {
const [e2, n2] = a("undefined" != typeof window ? window.devicePixelRatio : 1), o2 = r(null);
return c(() => {
if (!("undefined" != typeof window && "matchMedia" in window)) return;
const t3 = () => {
const e3 = window.matchMedia(`screen and (resolution: ${window.devicePixelRatio}dppx)`);
e3.addEventListener("change", t3, { once: true, passive: true }), n2(window.devicePixelRatio), o2.current = { mediaMatcher: e3, listener: t3 };
};
return t3(), () => {
o2.current && o2.current.mediaMatcher.removeEventListener("change", o2.current.listener);
};
}, [t2]), e2;
}
function Et(t2) {
if ("undefined" == typeof window) return 1;
const { defaultDpr: e2 = 1, maxDpr: n2 = 3, round: o2 = true } = t2 || {}, i2 = "undefined" != typeof window && "number" == typeof window.devicePixelRatio ? window.devicePixelRatio : e2;
return Math.min(Math.max(1, o2 ? Math.floor(i2) : i2), n2);
}
function Ct(t2, e2, n2) {
const o2 = P(e2, [e2]);
c(() => {
const e3 = (e4) => {
t2.current && !t2.current.contains(e4.target) && o2(e4);
};
return n2 && false === n2.mouseEvents || (document.addEventListener("mousedown", e3), document.addEventListener("touchstart", e3)), n2 && false === n2.focusEvents || document.addEventListener("focus", e3), () => {
document.removeEventListener("mousedown", e3), document.removeEventListener("touchstart", e3), document.removeEventListener("focus", e3);
};
}, [t2]);
}
function Tt(t2) {
if (!t2) throw new Error("must have a PointerHandlerOptions");
const { onPointerDown: e2, onPointerUp: n2, onPointerMoveOrWait: o2, processTouch: s2 = false, consumeTouch: l2 = true } = t2, a2 = P(e2, [e2]), h2 = P(n2, [n2]), u2 = P(o2, [o2]), d2 = r(false), _2 = t2?.timerInitial ?? 230, p2 = t2?.timerContinuous ?? _2 / 2, m2 = r(null), f2 = r(null), g2 = r(null), y2 = r(null), v2 = i(() => {
y2.current && (clearTimeout(y2.current), y2.current = null);
}, []), x2 = i((t3) => {
y2.current = setTimeout(() => {
window.requestAnimationFrame(() => {
false !== d2.current && u2?.(f2.current, g2.current, m2.current);
}), x2(p2);
}, t3 ?? _2);
}, []);
c(() => () => v2(), []);
const b2 = s2 ? "pointer" : "mouse", w2 = i((t3) => {
t3.stopPropagation(), t3.stopImmediatePropagation(), t3.preventDefault();
}, []), S2 = P((t3) => {
document.removeEventListener(`${b2}move`, C2), document.removeEventListener(`${b2}up`, S2), document.removeEventListener("keydown", T2), document.removeEventListener("keyup", M2), document.removeEventListener("touchstart", w2, { capture: true }), document.removeEventListener("touchmove", w2, { capture: true }), window.removeEventListener("blur", L2), v2(), window.requestAnimationFrame(() => {
false !== d2.current && (d2.current = false, h2?.(t3, g2.current, m2.current), g2.current = null);
});
}, []), L2 = i(() => {
false !== d2.current && (d2.current = false, S2(f2.current));
}, []), E2 = P(() => {
v2(), x2(p2), window.requestAnimationFrame(() => {
false !== d2.current && u2?.(f2.current, g2.current, m2.current);
});
}, [p2]), C2 = P((t3) => {
f2.current = t3, E2();
}, []), T2 = P((t3) => {
g2.current = { ctrlKey: t3.ctrlKey, shiftKey: t3.shiftKey, altKey: t3.altKey, metaKey: t3.metaKey }, E2();
}, []), M2 = P((t3) => {
g2.current = { ctrlKey: t3.ctrlKey, shiftKey: t3.shiftKey, altKey: t3.altKey, metaKey: t3.metaKey }, E2();
}, [p2]);
return P((t3) => {
if (t3.isDefaultPrevented()) return;
g2.current = { ctrlKey: t3.ctrlKey, shiftKey: t3.shiftKey, altKey: t3.altKey, metaKey: t3.metaKey };
false !== a2(t3, g2.current) && (m2.current = t3, f2.current = t3.nativeEvent, document.addEventListener(`${b2}up`, S2, { passive: false }), document.addEventListener(`${b2}move`, C2, { passive: false }), document.addEventListener("keydown", T2, { passive: false }), document.addEventListener("keyup", M2, { passive: false }), window.addEventListener("blur", L2, { passive: true }), s2 && l2 && (document.addEventListener("touchstart", w2, { passive: false, capture: true }), document.addEventListener("touchmove", w2, { passive: false, capture: true })), d2.current = true, x2(_2));
}, [_2, s2]);
}
function Mt(t2, e2) {
return Tt({ onPointerDown: t2, onPointerMoveOrWait: (e3, n2, o2) => {
t2?.(o2);
}, ...e2 });
}
const Dt = ({ initValue: t2, useHookBody: e2, applyStateChange: n2 }) => {
const o2 = r(t2);
if ("function" != typeof e2) throw new Error("function expected as hook body parameter. got " + typeof e2);
const i2 = e2();
return d(() => {
o2.current !== i2 && (o2.current = i2, n2(i2));
}, [n2, i2]), null;
}, Pt = (t2) => {
console && console.warn && console.warn(t2);
}, zt = "object" == typeof self && self.self === self && self || "object" == typeof global && global.global === global && global || void 0;
let kt = 1, At = false, Bt = false;
const $t = [], Kt = [], Ot = () => {
Kt.f