@sheetxl/utils-react
Version:
Utils React - Utilities for React capabilities needed for all SheetXL components.
1,026 lines • 97.8 kB
JavaScript
/**
* @license @sheetxl/utils-react - Utils React - Utilities for React capabilities needed for all SheetXL components. - v0.7.27
*
* (C) 2025-present SheetXL Inc. & Michael T. Ford
* License: The license can be found at https://www.sheetxl.com/license.
*/
import t, { useRef as e, useReducer as n, useMemo as o, useEffect as r, useState as i, memo as s, forwardRef as l, useCallback as a, createContext as c, useContext as h, useLayoutEffect as u, createElement as d, useImperativeHandle as p, Component as m } from "react";
import { CommonUtils as f, DefaultNotifier as _, Notifier as g, InternalClipboard as y, ClipboardUtils as v, MimeType as w } from "@sheetxl/utils";
import * as b from "detect-it";
import { jsx as x, jsxs as S, Fragment as E } from "react/jsx-runtime";
import { mergeRefs as L } from "react-merge-refs";
import { useMeasure as M } from "react-use";
import T from "clsx";
import { createRoot as C } from "react-dom/client";
import { unstable_batchedUpdates as k, createPortal as D } from "react-dom";
const P = { General: "general", Left: "left", Right: "right", Center: "center", Justify: "justify", Fill: "fill", Distributed: "distributed", CenterContinuous: "centerContinuous" }, z = { Shift: "shift", Alt: "alt", Ctrl: "ctrl", Meta: "meta" }, A = { 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, Composition: 229 }, B = { Left: 1, Middle: 2, Right: 3 };
class $ {
constructor(t2, e2, n2, o2) {
this._listenersProperties = /* @__PURE__ */ new Set(), this._listenersExecute = /* @__PURE__ */ new Set(), this._key = t2, this._target = e2, this._applyProps(n2 || {}), this._callback = o2, void 0 === o2 && (this._callback = () => {
console.log(`implement: ${this.getLabel()} : ${this.getDescription()}`);
});
}
getKey() {
return this._key;
}
_resolve(t2, e2) {
if ("function" == typeof t2) {
const n2 = e2 ?? this._context;
return t2("function" == typeof n2 ? n2() : n2);
}
return t2;
}
getTarget() {
return "function" == typeof this._target ? this._target() : this._target;
}
getLabel(t2, e2) {
const n2 = this._scopedLabels?.[t2] || this._label;
let o2 = null;
if ("function" == typeof n2) {
const t3 = e2 ?? this._context;
o2 = n2("function" == typeof t3 ? t3() : t3);
} else o2 = n2;
return o2;
}
getDescription(t2) {
return this._resolve(this._description, t2);
}
getTags(t2) {
return this._resolve(this._tags, t2);
}
getIcon(t2) {
return this._resolve(this._icon, t2);
}
getShortcut() {
return this._resolve(this._shortcut);
}
disabled() {
return this._resolve(this._disabled) || !this._callback;
}
getState() {
return this._resolve(this._state);
}
getContext() {
return "function" == typeof this._context ? this._context() : this._context;
}
async execute(t2, e2) {
if (!this.disabled() && this._callback) {
try {
let n2 = true;
e2?.beforeExecute && (n2 = e2?.beforeExecute(this, t2));
if (false === await Promise.resolve(n2)) return false;
const o2 = this._callback.bind(this)(t2, this);
if (false === await Promise.resolve(o2)) return false;
e2?.onExecute?.(this, t2), this._notifyExecute(t2);
} catch (n2) {
return console.warn(n2), e2?.onError(this, n2, t2), this._notifyError(t2, n2), false;
}
return true;
}
}
addPropertyListener(t2, e2 = false) {
if (!t2) throw new Error("listener must be specified");
const n2 = this._listenersProperties;
return n2.add(t2), e2 && t2({}, this), () => {
n2.delete(t2);
};
}
addExecuteListener(t2) {
if (!t2) throw new Error("listener must be specified");
const e2 = this._listenersExecute;
return e2.add(t2), function() {
e2.delete(t2);
};
}
_notifyExecute(t2) {
const e2 = this;
this._listenersExecute.forEach((n2) => {
n2.onExecute(e2, t2);
});
}
_notifyError(t2, e2) {
const n2 = this;
this._listenersExecute.forEach((o2) => {
o2.onError?.(n2, t2, e2);
});
}
updateCallback(t2) {
return this._callback = t2 || null, this;
}
update(t2) {
if (!t2) return;
const e2 = this._applyProps(t2);
return Object.keys(e2).length > 0 && this._notifyPropertyChange(e2), this;
}
_notifyPropertyChange(t2) {
const e2 = this;
this._listenersProperties.forEach((n2) => {
n2(t2, e2);
});
}
_applyProps(t2) {
let e2 = {}, n2 = this;
return Object.keys(t2).forEach((o2) => {
let r2 = t2[o2];
n2["_" + o2] !== r2 && (n2["_" + o2] = e2[o2] = r2);
}), e2;
}
}
class K extends $ {
}
function I(t2, i2 = null) {
const s2 = e(i2);
s2.current = i2;
const [l2, a2] = n((t3) => t3 + 1, 0), c2 = o(() => Array.isArray(t2) ? t2 : [t2], [t2]);
return r(() => {
const t3 = c2 ? c2.length : 0;
if (0 === t3) return;
const e2 = (t4, e3) => {
s2.current?.onChange?.(e3), a2();
};
let n2 = null;
i2 && (n2 = { onExecute(t4, e3) {
s2.current?.onExecute?.(t4, e3);
}, onError(t4, e3, n3) {
s2.current?.onError?.(t4, e3, n3);
} });
const o2 = /* @__PURE__ */ new Set();
for (let r2 = 0; r2 < t3; r2++) {
const t4 = c2[r2];
t4 && (o2.add(t4.addPropertyListener(f.debounce(e2, 0), true)), i2 && o2.add(t4.addExecuteListener(n2)));
}
return () => {
o2.forEach((t4) => {
t4?.();
});
};
}, [t2]), l2;
}
const O = /* @__PURE__ */ new Set(["INPUT", "TEXTAREA", "SELECT"]), N = {};
function H() {
return b;
}
const R = (t2) => "BracketLeft" === t2 ? "[" : "BracketRight" === t2 ? "]" : f.camelToPrettyCase(t2), W = (t2, e2) => {
let n2 = false, o2 = false;
const r2 = { nativeEvent: t2, currentTarget: e2 || t2.currentTarget, target: t2.target, bubbles: t2.bubbles, cancelable: t2.cancelable, defaultPrevented: t2.defaultPrevented, eventPhase: t2.eventPhase, isTrusted: t2.isTrusted, preventDefault: () => {
n2 = true, t2.preventDefault();
}, isDefaultPrevented: () => n2, stopPropagation: () => {
o2 = true, t2.stopPropagation();
}, isPropagationStopped: () => o2, persist: () => {
}, timeStamp: t2.timeStamp, type: t2.type };
for (const e3 in t2) e3 in r2 || "function" == typeof t2[e3] || (r2[e3] = t2[e3]);
return r2;
}, V = Object.freeze(Object.defineProperty({ __proto__: null, EmptyCssProperties: N, boundPixel: function(t2, e2 = false, n2 = 0) {
return t2;
}, createSyntheticEvent: W, detectIt: H, focusableNodeNames: O, toPrettyKeyCode: R }, Symbol.toStringTag, { value: "Module" }));
class F {
constructor(t2, e2) {
this._target = null, this._groupKey = null, this._root = null, this._parent = null, this._uuid = f.uuidV4(), this._target = t2, this._groupKey = e2 ?? null, this._root = this, this._nodes = /* @__PURE__ */ new Map(), this._nodes.set(e2, this), this._children = /* @__PURE__ */ new Map(), this._listeners = /* @__PURE__ */ new Set(), this._commandsByKey = /* @__PURE__ */ new Map(), this._commandsByShortcut = /* @__PURE__ */ new Map();
const n2 = this;
this._unListenersByCommand = /* @__PURE__ */ new Map(), this._listenersByKey = /* @__PURE__ */ new Map(), this._commandsPropertyListener = (t3, e3) => {
const o2 = n2._root._listenersByKey, r2 = e3.getKey(), i2 = o2.get(r2);
i2 && n2._notifyCommands(i2, "onCommandChange", e3);
};
}
_getCommand(t2) {
const e2 = this._commandsByKey.get(t2);
return e2 || (this._parent?._getCommand(t2) ?? null);
}
getCommand(t2, e2 = false) {
const n2 = this._root._focused;
let o2 = n2, r2 = n2 === this;
for (; !r2 && o2; ) o2 === this && (r2 = true), o2 = o2._parent;
return (r2 ? n2 : this)._getCommand(t2);
}
createChildGroup(t2, e2, n2) {
let o2;
if (!n2) {
let t3 = this;
for (; t3 && !o2; ) {
let n3 = t3._nodes.get(e2);
n3 && (o2 = n3), t3 = t3._parent;
}
}
o2 || (o2 = new F(t2, e2), o2._parent = this, o2._root = this._root, o2._unListenersByCommand = null, o2._listenersByKey = null, o2._commandsPropertyListener = null);
const r2 = (t3, o3) => {
!t3.has(e2) || n2 ? t3.set(e2, o3) : void 0 === n2 && console.warn("commandGroup already registered", e2);
};
r2(this._root._nodes, o2);
let i2 = this._parent;
for (; i2; ) r2(this._nodes, o2), i2 = i2._parent;
return this._children.set(e2, o2), this._notify("onGroupChange"), o2;
}
getKey() {
return this._groupKey;
}
getGroup(t2) {
return this._nodes.get(t2);
}
_addCommands(t2, e2 = void 0) {
const n2 = this._commandsByKey, o2 = this._commandsByShortcut, r2 = this._root._commandsPropertyListener, i2 = this._root._unListenersByCommand, s2 = t2.length;
for (let l2 = 0; l2 < s2; l2++) {
const s3 = t2[l2], a2 = s3.getKey();
if (n2.has(a2) && !e2) {
void 0 === e2 && console.warn("command already registered", a2);
continue;
}
n2.set(a2, s3);
let c2 = i2.get(s3);
c2 && (c2(), i2.delete(s3));
const h2 = s3.addPropertyListener(r2);
i2.set(s3, h2);
const u2 = s3.getShortcut();
if (!u2) continue;
const d2 = Array.isArray(u2) ? u2 : [u2], p2 = d2.length;
for (let t3 = 0; t3 < p2; t3++) {
const n3 = Y(d2[t3]), r3 = o2.get(n3);
r3 && !e2 && void 0 === e2 && console.warn(`Shortcut already registered: ${n3}, ${a2}, ${r3}.`), o2.set(n3, a2);
}
}
}
removeFromParent() {
if (!this._parent) return;
let t2 = this._parent, e2 = [];
const n2 = this._groupKey;
for (; t2; ) e2.push(t2._nodes), t2._nodes.delete(n2), t2 = t2._parent;
t2 = this._parent;
const o2 = (t3) => {
t3._children.forEach((t4) => {
const n3 = e2.length, r2 = t4._nodes;
for (let t5 = 0; t5 < n3; t5++) r2.delete(e2[t5]);
o2(t4);
});
};
o2(this), this._parent = null, this._notify("onGroupChange");
}
addCommands(t2, e2) {
this._addCommands(t2, e2), this._notify("onGroupChange");
}
getActive() {
return this._root._focused ?? this._root;
}
activate(t2) {
let e2 = this;
if (t2 && (e2 = this._nodes.get(t2), !e2)) return void console.warn("group not found", t2);
let n2 = this._root._focused ?? this._root;
for (; n2; ) n2 = n2._parent;
this._root._focused !== e2 && (this._root._focused = e2, this._notify("onGroupChange"), this._notify("onActiveChange"));
}
findCommandByEvent(t2) {
const e2 = [];
t2.altKey && e2.push(z.Alt), t2.shiftKey && e2.push(z.Shift), t2.ctrlKey && e2.push(z.Ctrl), t2.metaKey && e2.push(z.Meta);
let n2 = Y({ key: t2.code, modifiers: e2 });
const o2 = this._commandsByShortcut;
let r2 = o2.get(n2);
r2 || (n2 = Y({ key: t2.key, modifiers: e2 }), r2 = o2.get(n2)), !r2 && t2.code.startsWith("Digit") && (n2 = Y({ key: t2.code.substring(5, t2.code.length), modifiers: e2 }), r2 = this._commandsByShortcut.get(n2)), !r2 && t2.code.startsWith("Key") && (r2 = Y({ key: t2.code.substring(3, t2.code.length), modifiers: e2 }), r2 = o2.get(n2));
let i2 = null;
return r2 && (i2 = this._commandsByKey.get(r2), i2 && i2.disabled() && (i2 = null), !i2 || i2.getTarget() && i2.getTarget().contains(t2.target) || (i2 = null)), i2 || (this._parent?.findCommandByEvent(t2) ?? null);
}
dispatchToFocusedCommand(t2) {
const e2 = this.getActive();
if (!e2) return false;
if (t2.isDefaultPrevented()) return false;
const n2 = e2.findCommandByEvent?.(t2);
return !!n2 && (n2.execute(), t2.preventDefault(), true);
}
getRoot() {
return this._parent ? this._parent.getRoot() : this;
}
getParent() {
return this._parent;
}
addListener(t2, e2) {
const n2 = this._listeners, o2 = e2?.keys, r2 = this._root._listenersByKey;
if (o2 && !t2.onCommandChange) throw new Error("keys were provided but the listener does not contain 'onCommandChange'.");
let i2 = null;
if (o2) {
const e3 = o2.length;
for (let n3 = 0; n3 < e3; n3++) {
const e4 = o2[n3];
if (!e4) continue;
let s2 = r2.get(e4);
s2 || (s2 = /* @__PURE__ */ new Set(), r2.set(e4, s2)), i2 || (i2 = []), i2.push(s2), s2.add(t2);
}
}
return n2.add(t2), () => {
if (i2) {
const e3 = i2.length;
for (let n3 = 0; n3 < e3; n3++) {
i2[n3].delete(t2);
}
}
n2.delete(t2);
};
}
_notifyCommands(t2, e2, n2) {
const o2 = this;
setTimeout(() => {
t2.forEach((t3) => {
t3[e2]?.(o2, n2);
});
}, 0);
}
_notify(t2, e2) {
const n2 = this;
setTimeout(() => {
n2._listeners.forEach((o2) => {
o2[t2]?.(n2, e2);
}), n2._parent && n2._parent._notify(t2, e2);
}, 0);
}
getAllCommands() {
const t2 = [], e2 = this._groupKey;
return this._commandsByKey.forEach((n2) => {
t2.push({ command: n2, groupKey: e2 });
}), this._children.forEach((e3) => {
t2.push(...e3.getAllCommands());
}), t2;
}
}
const j = f.getOS() === f.OSType.MacOS || f.getOS() === f.OSType.IOS ? "Cmd" : "Ctrl", X = f.getOS() === f.OSType.MacOS || f.getOS() === f.OSType.IOS ? "⌘" : "^", Y = (t2, e2 = false) => {
const n2 = {};
for (let e3 = 0; t2.modifiers && e3 < t2.modifiers.length; e3++) n2[t2.modifiers[e3]] = true;
let o2 = "";
return (n2?.[z.Ctrl] || n2?.[z.Meta]) && (o2 += (o2.length > 0 ? "+" : "") + (e2 ? X : j)), n2?.[z.Alt] && (o2 += e2 ? "⌥" : "Alt"), n2?.[z.Shift] && (o2 += (o2.length > 0 ? "+" : "") + (e2 ? "⇧" : "Shift")), o2 += (o2.length > 0 ? "+" : "") + R(t2.key), o2;
}, U = (t2, e2) => {
if (!e2 || !t2 || 0 === e2.length) return f.EmptyArray;
const n2 = e2.length, o2 = new Array(n2);
for (let r2 = 0; r2 < n2; r2++) {
const n3 = e2[r2], i2 = n3 ? t2.getCommand(n3) : null;
o2[r2] = i2;
}
return o2;
};
function G(t2, n2 = null, o2 = null, s2) {
const l2 = e(o2);
l2.current = o2, n2 && !Array.isArray(n2) && (n2 = [n2]);
const [a2, c2] = i(U(t2, n2)), h2 = s2 ? [...s2, t2] : [t2];
return r(() => {
const e2 = { onGroupChange: () => {
const e3 = U(t2, n2);
c2(e3), l2.current?.onChange?.(this);
} };
let o3;
n2 && n2.length > 0 && (o3 = { keys: n2 }, e2.onCommandChange = (e3, o4) => {
l2.current?.onChange?.(t2), c2(U(t2, n2));
});
const r2 = t2?.addListener(e2, o3), i2 = U(t2, n2);
return c2(i2), l2.current?.onChange && l2.current?.onChange(t2), () => {
r2?.();
};
}, h2), a2;
}
const q = { Toolbar: "toolbar", Menuitem: "menuitem" }, Z = { 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" }, J = s(l((t2, n2) => {
const { refFocusStart: o2, ...r2 } = t2, i2 = e(null), s2 = a(() => {
if (o2) return void o2?.current?.focus();
const t3 = i2.current.parentElement.children;
let e2 = [];
const n3 = t3.length;
for (let o3 = 0; o3 < n3 && t3[o3] !== i2.current; o3++) {
const n4 = t3[o3], r3 = n4.getAttribute("tabindex");
if (null == r3 || "-1" === r3) continue;
"true" !== n4.getAttribute("disabled") && (n4.focus && e2.push({ tabindex: parseInt(r3), child: n4 }));
}
0 !== e2.length && (e2.sort(function(t4, e3) {
return t4.tabindex - e3.tabindex;
}), e2[0].child.focus());
}, [o2]);
return x("div", { tabIndex: 0, ref: L([i2, n2]), onFocus: s2, ...r2 });
}));
const Q = s(l((n2, r2) => {
const { className: i2, style: s2, children: l2, radius: a2 = 4, strokeWidth: c2 = 1, strokeColor: h2 = "grey", ...u2 } = n2, [d2, { width: p2, height: m2 }] = M(), f2 = e(null), _2 = (t2, e2 = 0) => {
const n3 = t2 / 2, o2 = m2 - n3 + e2;
return (function(t3, e3, n4 = false) {
if (0 === e3) return t3;
function o3(t4, e4, n5) {
let o4 = e4.x - t4.x, i4 = e4.y - t4.y, s4 = Math.sqrt(o4 * o4 + i4 * i4);
return r3(t4, e4, Math.min(1, n5 / s4));
}
function r3(t4, e4, n5) {
return { x: t4.x + (e4.x - t4.x) * n5, y: t4.y + (e4.y - t4.y) * n5 };
}
function i3(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 n5 = e4.match("([a-zA-Z])(.+)");
return n5 ? (t4.push(n5[1]), t4.push(n5[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 h3 = a3[a3.length - 1], u3 = l3[t5], d3 = u3 === c3 ? l3[1] : l3[t5 + 1];
if (d3 && h3 && h3.length > 2 && "L" === u3[0] && d3.length > 2 && "L" === d3[0]) {
let t6, l4, c4 = s3(h3), p3 = s3(u3), m3 = s3(d3);
n4 ? (t6 = r3(p3, h3.origPoint || c4, e3), l4 = r3(p3, d3.origPoint || m3, e3)) : (t6 = o3(p3, c4, e3), l4 = o3(p3, m3, e3)), i3(u3, t6), u3.origPoint = p3, a3.push(u3);
let f3 = r3(t6, p3, 0.5), _3 = r3(p3, l4, 0.5), g3 = ["C", f3.x, f3.y, _3.x, _3.y, l4.x, l4.y];
g3.origPoint = p3, a3.push(g3);
} else a3.push(u3);
}
if (c3) {
let t5 = s3(a3[a3.length - 1]);
a3.push(["Z"]), i3(a3[0], t5);
}
} else a3 = l3;
return a3.reduce(function(t4, e4) {
return t4 + e4.join(" ") + " ";
}, "");
})(`${`M 0 ${n3} L ${a2 - 0.5} ${n3} L ${a2 - 0.5} ${o2} L ${2 * a2} ${o2}`} ${`L ${p2 - 2 * a2} ${o2}`} ${`M ${p2 - 2 * a2} ${o2} L ${p2 - a2} ${o2} L ${p2 - a2} ${n3} L ${p2} ${n3}`}`, a2);
}, g2 = o(() => _2(c2), [p2, m2, a2, c2]), y2 = o(() => {
if (0 === a2) return;
const t2 = a2 / 2;
return _2(a2) + `L ${p2} 0 L 0 0 L 0 ${t2}`;
}, [g2, a2, c2]), v2 = o(() => ({ style: { clipPath: `path('${y2}')` } }), [y2]);
return S("div", { className: i2, style: { display: "flex", flexDirection: "row", ...s2 }, ...u2, ref: L([f2, d2, r2]), children: [t.isValidElement(l2) ? t.cloneElement(l2, v2) : x(E, {}), x("svg", { style: { position: "absolute", top: 0, left: 0, pointerEvents: "none" }, width: p2, height: m2, viewBox: `0 0 ${p2} ${m2}`, children: x("path", { d: g2, stroke: h2, fill: "none", vectorEffect: "non-scaling-stroke", strokeWidth: c2 }) })] });
})), tt = { Default: "default", Error: "error", Success: "success", Warning: "warning", Info: "info" };
class et extends _ {
setOverrides(t2) {
super.setOverrides(t2);
}
getDelegate() {
return this._overrides;
}
showMessage(t2, e2) {
const n2 = this.getDelegate();
if (n2?.showMessage) return n2.showMessage(t2, e2);
e2?.type !== tt.Warning ? e2?.type !== tt.Error ? g.log(t2) : g.error(t2) : g.warn(t2);
}
showBusy(t2, e2) {
const n2 = this.getDelegate();
return n2?.showBusy ? n2.showBusy(t2, e2) : new Promise((t3) => {
t3(() => {
});
});
}
showWindow(t2, e2) {
const n2 = this.getDelegate();
if (n2?.showWindow) return n2.showWindow(t2, e2);
}
showError(t2) {
const e2 = this.getDelegate();
e2?.showError ? e2.showError(t2) : g.error(t2);
}
showOptions(t2) {
const e2 = this.getDelegate();
return e2?.showOptions ? e2.showOptions(t2) : Promise.resolve("");
}
showInput(t2) {
const e2 = this.getDelegate();
return e2?.showInput ? e2.showInput(t2) : Promise.resolve({ input: "", option: "" });
}
}
const nt = c(new et()), ot = ({ children: e2, notifier: n2 }) => (t.useEffect(() => {
const t2 = g.getOverrides();
return g.setOverrides(n2), () => {
g.setOverrides(t2);
};
}, [n2]), t.createElement(nt.Provider, { value: n2 }, e2)), rt = () => h(nt), it = 3, st = 0.5, lt = 50, at = (t2) => ({ x: t2.x, y: t2.y, width: t2.width, height: t2.height, top: t2.top, left: t2.left, right: t2.right, bottom: t2.bottom });
function ct(t2 = {}) {
const { threshold: o2 = st, stillnessThreshold: s2 = it, maxHierarchyDepth: l2 = lt } = t2, [c2, h2] = M(), u2 = e(null), [d2, p2] = n((t3) => t3 + 1, 0), m2 = e(void 0), f2 = e({ x: 0, y: 0, width: 0, height: 0, top: 0, left: 0, right: 0, bottom: 0 }), _2 = a((t3) => {
u2.current = t3, "function" == typeof c2 && c2(t3);
}, [c2]), [g2, y2] = i(h2);
return r(() => {
h2 && !g2 && y2(h2);
}, [h2, g2]), r(() => {
const t3 = u2.current;
if (!t3) return;
let e2 = false, n2 = 0;
const r2 = () => {
if (!t3) return;
const i3 = t3.getBoundingClientRect(), l3 = f2.current;
Math.abs(i3.x - l3.x) > o2 || Math.abs(i3.y - l3.y) > o2 || Math.abs(i3.width - l3.width) > o2 || Math.abs(i3.height - l3.height) > o2 ? (e2 || (e2 = true, y2(at(i3)), p2()), n2 = 0) : n2++, e2 && n2 >= s2 && (e2 = false, y2(at(i3)), p2()), f2.current = at(i3), m2.current = requestAnimationFrame(r2);
};
m2.current = requestAnimationFrame(r2);
const i2 = (t4) => {
e2 = true, p2();
}, a2 = (t4) => {
e2 = false, n2 = s2, p2();
};
let c3 = t3;
const h3 = [];
for (; c3 && c3 !== document.documentElement && (c3.addEventListener("animationstart", i2, true), c3.addEventListener("animationend", a2, true), c3.addEventListener("transitionstart", i2, true), c3.addEventListener("transitionend", a2, true), h3.push(c3), c3 = c3.parentElement, !(h3.length > l2)); ) ;
return () => {
m2.current && cancelAnimationFrame(m2.current), h3.forEach((t4) => {
t4.removeEventListener("animationstart", i2, true), t4.removeEventListener("animationend", a2, true), t4.removeEventListener("transitionstart", i2, true), t4.removeEventListener("transitionend", a2, true);
});
};
}, [d2, h2, o2, s2, l2]), [_2, g2];
}
const ht = (t2, n2) => {
const o2 = a((...e2) => t2?.(...e2), n2), r2 = e(null);
r2.current = o2;
const i2 = a((...t3) => r2.current?.(...t3), []);
if (r2.current) return i2;
};
function ut(t2) {
const [n2, o2] = i("undefined" != typeof window ? window.devicePixelRatio : 1), s2 = e(null);
return r(() => {
if (!("undefined" != typeof window && "matchMedia" in window)) return;
const t3 = () => {
const e2 = window.matchMedia(`screen and (resolution: ${window.devicePixelRatio}dppx)`);
e2.addEventListener("change", t3, { once: true, passive: true }), o2(window.devicePixelRatio), s2.current = { mediaMatcher: e2, listener: t3 };
};
return t3(), () => {
s2.current && s2.current.mediaMatcher.removeEventListener("change", s2.current.listener);
};
}, [t2]), n2;
}
function dt(t2) {
if ("undefined" == typeof window) return 1;
const { defaultDpr: e2 = 1, maxDpr: n2 = 3, round: o2 = true } = t2 || {}, r2 = "undefined" != typeof window && "number" == typeof window.devicePixelRatio ? window.devicePixelRatio : e2;
return Math.min(Math.max(1, o2 ? Math.floor(r2) : r2), n2);
}
function pt(t2, e2, n2) {
const o2 = ht(e2, [e2]);
r(() => {
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]);
}
let mt = 0;
function ft() {
const [t2, e2] = i(!!document.fullscreenElement), n2 = a(() => {
const t3 = document.fullscreenElement;
return t3 ? t3.querySelector(".fullscreen-portal-root") || t3 : document.body;
}, []);
return r(() => {
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 mt++, t3(), document.addEventListener("fullscreenchange", t3), () => {
document.removeEventListener("fullscreenchange", t3), mt--, mt <= 0 && (document.querySelectorAll(".fullscreen-portal-root").forEach((t4) => {
t4.parentNode && t4.parentNode.removeChild(t4);
}), mt = 0);
};
}, []), { getPortalContainer: n2, isFullscreen: t2 };
}
function _t(t2) {
if (!t2) throw new Error("must have a PointerHandlerOptions");
const { onPointerDown: n2, onPointerUp: o2, onPointerMoveOrWait: i2, processTouch: s2 = false, consumeTouch: l2 = true } = t2, c2 = ht(n2, [n2]), h2 = ht(o2, [o2]), u2 = ht(i2, [i2]), d2 = e(false), p2 = t2?.timerInitial ?? 230, m2 = t2?.timerContinuous ?? p2 / 2, f2 = e(null), _2 = e(null), g2 = e(null), y2 = e(null), v2 = a(() => {
y2.current && (clearTimeout(y2.current), y2.current = null);
}, []), w2 = a((t3) => {
y2.current = setTimeout(() => {
window.requestAnimationFrame(() => {
if (false === d2.current) return;
const t4 = _2.current, e2 = f2.current, n3 = W(t4, e2.currentTarget);
u2?.(n3, g2.current, e2);
}), w2(m2);
}, t3 ?? p2);
}, []);
r(() => () => v2(), []);
const b2 = s2 ? "pointer" : "mouse", x2 = a((t3) => {
t3.stopPropagation(), t3.stopImmediatePropagation(), t3.preventDefault();
}, []), S2 = ht((t3) => {
document.removeEventListener(`${b2}move`, M2), document.removeEventListener(`${b2}up`, S2), document.removeEventListener("keydown", T2), document.removeEventListener("keyup", C2), document.removeEventListener("touchstart", x2, { capture: true }), document.removeEventListener("touchmove", x2, { capture: true }), window.removeEventListener("blur", E2), v2(), window.requestAnimationFrame(() => {
if (false === d2.current) return;
d2.current = false;
const e2 = t3, n3 = f2.current, o3 = W(e2, n3.currentTarget);
h2?.(o3, g2.current, n3), g2.current = null;
});
}, []), E2 = a(() => {
false !== d2.current && (d2.current = false, S2(_2.current));
}, []), L2 = ht(() => {
v2(), w2(m2), window.requestAnimationFrame(() => {
if (false === d2.current) return;
const t3 = _2.current, e2 = f2.current, n3 = W(t3, e2.currentTarget);
u2?.(n3, g2.current, e2);
});
}, [m2]), M2 = ht((t3) => {
_2.current = t3, L2();
}, []), T2 = ht((t3) => {
g2.current = { ctrlKey: t3.ctrlKey, shiftKey: t3.shiftKey, altKey: t3.altKey, metaKey: t3.metaKey }, L2();
}, []), C2 = ht((t3) => {
g2.current = { ctrlKey: t3.ctrlKey, shiftKey: t3.shiftKey, altKey: t3.altKey, metaKey: t3.metaKey }, L2();
}, [m2]);
return ht((t3) => {
if (t3.isDefaultPrevented()) return;
g2.current = { ctrlKey: t3.ctrlKey, shiftKey: t3.shiftKey, altKey: t3.altKey, metaKey: t3.metaKey };
false !== c2(t3, g2.current) && (f2.current = t3, _2.current = t3.nativeEvent, document.addEventListener(`${b2}up`, S2, { passive: false }), document.addEventListener(`${b2}move`, M2, { passive: false }), document.addEventListener("keydown", T2, { passive: false }), document.addEventListener("keyup", C2, { passive: false }), window.addEventListener("blur", E2, { passive: true }), s2 && l2 && (document.addEventListener("touchstart", x2, { passive: false, capture: true }), document.addEventListener("touchmove", x2, { passive: false, capture: true })), d2.current = true, w2(p2));
}, [p2, s2]);
}
function gt(t2, e2) {
return _t({ onPointerDown: t2, onPointerMoveOrWait: (e3, n2, o2) => {
t2?.(o2);
}, ...e2 });
}
const yt = ({ initValue: t2, useHookBody: n2, applyStateChange: o2 }) => {
const r2 = e(t2);
if ("function" != typeof n2) throw new Error("function expected as hook body parameter. got " + typeof n2);
const i2 = n2();
return u(() => {
r2.current !== i2 && (r2.current = i2, o2(i2));
}, [o2, i2]), null;
}, vt = (t2) => {
console && console.warn && console.warn(t2);
}, wt = "object" == typeof self && self.self === self && self || "object" == typeof global && global.global === global && global || void 0;
let bt = 1, xt = false, St = false;
const Et = [], Lt = [], Mt = () => {
Lt.forEach((t2) => t2());
}, Tt = ({ automaticContainerInternalUseOnly: t2 }) => {
const [n2, o2] = i([]), s2 = e([]);
return s2.current = n2, t2 || false !== xt || (St = true), r(() => {
let e2 = true;
function n3() {
if (e2) return Lt[0] !== n3 ? (t2 || true !== xt || vt("SingletonHooksContainer is mounted after some singleton hook has been used.Your SingletonHooksContainer will not be used in favor of internal one."), void o2((t3) => [])) : void o2([...Et]);
}
return Lt.push(n3), Mt(), () => {
e2 = false, s2.current?.length > 0 && vt("SingletonHooksContainer is unmounted, but it has active singleton hooks. They will be reevaluated once SingletonHooksContainer is mounted again"), Lt.splice(Lt.indexOf(n3), 1), Mt();
};
}, [t2]), x(E, { children: n2.map(({ hook: t3, key: e2 }) => d(yt, { ...t3, key: e2 })) });
}, Ct = (t2) => {
const e2 = bt++;
return Et.push({ hook: t2, key: e2 }), 0 === Lt.length && false === St && (xt = true, ((t3) => {
if (wt.document && wt.document.createElement) {
const e3 = wt.document.createElement("div");
C(e3).render(x(t3, { automaticContainerInternalUseOnly: true }));
} else vt("Can not mount SingletonHooksContainer on server side. Did you manage to run useEffect on server? Please mount SingletonHooksContainer into your components tree manually.");
})(Tt)), Mt(), () => {
Et.splice(Et.findIndex((t3) => t3.key === e2), 1), Mt();
};
};
let kt = null;
kt || (kt = (t2, e2, n2 = {}) => {
let o2, s2, l2 = false, a2 = false, c2 = [], { unmountIfNoConsumers: h2 = false } = n2;
const u2 = (t3) => {
s2 = t3, k(() => c2.forEach((e3) => e3(t3)));
}, d2 = () => (a2 || (s2 = "function" == typeof t2 ? t2() : t2, a2 = true), s2);
return () => {
const [n3, a3] = i(d2);
return r(() => (l2 || (l2 = true, o2 = Ct({ initValue: t2, useHookBody: e2, applyStateChange: u2 })), c2.push(a3), s2 !== n3 && a3(s2), () => {
c2.splice(c2.indexOf(a3), 1), 0 === c2.length && h2 && (o2(), l2 = false);
}), []), n3;
};
});
const Dt = kt;
let Pt = () => {
console.warn("You must call useEditMode before setting its state.");
};
const zt = Dt(null, () => {
const [t2, e2] = i(null);
return Pt = e2, t2;
}), At = () => {
const t2 = zt();
return o(() => ({ setMode: (t3) => {
Pt((e2) => ("function" == typeof t3 && (t3 = t3(e2)), t3?.onModeChange?.(t3 ?? null), t3));
}, getMode: () => t2 }), [t2]);
}, Bt = Dt({ setClipboard: (t2) => {
throw new Error("This is only available via the useClipboard.");
}, getClipboard: () => y.Global, refNativeCopy: { current: null }, refNativeLastKey: { current: null } }, () => {
const [t2, n2] = i(y.Global);
return { setClipboard: (t3) => n2(t3), getClipboard: () => t2, refNativeCopy: e(null), refNativeLastKey: e(null) };
}), $t = (t2) => {
const { source: e2, target: n2, onPaste: i2, onClipboardUpdate: s2, commands: l2 } = t2, c2 = rt(), h2 = ht(s2, [s2]), u2 = ht(i2, [i2]), { getClipboard: d2, refNativeCopy: p2 } = Bt(), m2 = d2();
o(() => {
const t3 = e2?.element, o2 = n2?.element ?? e2?.element;
if (!l2) return;
const r2 = [new K("cut", t3, { label: "Cut", description: "Remove the selection and put it on the clipboard so you can paste it somewhere else.", icon: "cut", shortcut: { key: "X", modifiers: [z.Ctrl] } }), new K("copy", t3, { label: "Copy", description: "Put a copy of the selection on the clipboard so you can paste it somewhere else.", icon: "copy", shortcut: { key: "C", modifiers: [z.Ctrl] } }), new K("paste", o2, { label: "Paste", description: "Add content on the clipboard to your document.", icon: "paste.yellow", shortcut: [{ key: "V", modifiers: [z.Ctrl] }, { key: "F8", modifiers: [z.Ctrl] }] })];
l2?.addCommands(r2, true);
}, [l2]);
const _2 = ht(async (t3) => {
if (!e2?.element) return;
let n3 = null;
try {
n3 = e2.doCopy?.(t3), "string" == typeof n3 ? await m2.writeText(n3) : await m2.writeReference(n3);
} catch (t4) {
throw t4;
}
}, [e2, c2]), g2 = ht(async (t3) => {
const n3 = e2?.element?.();
if (n3) {
p2.current = { sourceElement: n3, args: t3 };
try {
await _2(t3);
} catch (t4) {
c2.showError?.(t4);
}
}
}, [e2?.element, c2]), b2 = a(() => {
g2({ isCut: true });
}, []), x2 = ht(async (t3, e3, n3) => {
try {
if (false === await t3.doPaste(e3, n3)) return;
u2?.(e3, n3);
} catch (t4) {
c2.showError?.(t4);
}
}, [u2]), S2 = ht(async (t3, e3, o2) => {
const r2 = n2?.element?.();
if (r2 && await f.whenFocus(r2), !t3 && !e3) return;
const i3 = await c2.showBusy?.("Pasting...");
if (e3) try {
return await x2(n2, e3, o2), void i3?.();
} catch (t4) {
i3?.(), c2.showError?.(t4);
}
let s3, l3 = n2.importFromExternal;
l3 || (l3 = (e4, n3) => ({ getItemType: () => "text", toText: () => t3.text, isClipboardItem: true }));
try {
s3 = await l3(t3, { isCut: false });
} catch (t4) {
i3?.(), c2.showError?.(t4);
}
if (s3) try {
const t4 = await Promise.resolve(s3);
await x2(n2, t4, o2), i3?.();
} catch (t4) {
i3?.(), c2.showError?.(t4);
}
else i3?.();
}, [x2, n2, c2]), E2 = ht(async (t3) => {
if (n2?.element) try {
const e3 = await m2.readReference();
if (e3) return void await S2(null, e3, t3);
const n3 = [];
n3[0] = await v.readStringFromClipboard(m2, w.plain), n3[1] = await v.readHTMLFromClipboard(m2, w.html), n3[2] = await v.readBlobFromClipboard(m2, w.png);
const o2 = { text: n3[0] ?? null, html: n3[1] ?? null, image: n3[2] ?? null };
await S2(o2, null, t3);
} catch (t4) {
if ("Document is not focused." === t4?.message) return;
c2.showError?.(t4);
}
}, [S2, n2?.element, c2]);
return ht(async (t3) => {
}, [e2?.element]), ht(async (t3) => {
}, [n2?.element, S2, c2]), r(() => {
if (!m2) return;
const t3 = async (t4) => {
const e4 = await m2.readReference();
h2?.(e4);
}, e3 = (t4) => {
c2.showMessage?.(y.ErrorMessages.PermsRead, { onceKey: "clipboard.features" });
}, n3 = (t4) => {
c2.showMessage?.(y.ErrorMessages.PermsWrite, { onceKey: "clipboard.features" });
};
return m2.addEventListener("clipboardchange", t3), m2.addEventListener("clipboarderrorread", e3), m2.addEventListener("clipboarderrorwrite", n3), () => {
m2.removeEventListener("clipboardchange", t3), m2.removeEventListener("clipboarderrorread", e3), m2.removeEventListener("clipboarderrorwrite", n3);
};
}, [m2, c2]), r(() => {
}, [_2, S2, e2, n2]), r(() => {
l2?.getCommand("cut")?.updateCallback(b2).update({ disabled: !e2 || !n2 }), l2?.getCommand("copy")?.updateCallback(g2).update({ disabled: !e2 }), l2?.getCommand("paste")?.updateCallback(E2).update({ disabled: !n2 });
}, [e2, n2, l2]), { paste: E2, copy: g2, clipboard: m2 };
};
function Kt(t2, n2 = true) {
const o2 = e(t2);
r(() => {
if (n2) {
const e2 = Object.entries(t2).reduce((t3, [e3, n3]) => (o2.current[e3] !== n3 && (t3[e3] = [o2.current[e3], n3]), t3), {});
Object.keys(e2).length > 0 && console.log("Changed props:", e2);
}
o2.current = t2;
});
}
let It = false, Ot = 0;
var Nt = "undefined" != typeof document ? u : r;
const Ht = () => "sheetxl-ui-" + Ot++;
const Rt = t["useId".toString()], Wt = null != Rt ? Rt : function() {
const [e2, n2] = t.useState(() => It ? Ht() : void 0);
return Nt(() => {
null == e2 && n2(Ht());
}, []), t.useEffect(() => {
It || (It = true);
}, []), e2;
}, Vt = [];
function Ft(t2, n2, o2 = Vt) {
const r2 = e(null);
return p(t2, () => {
if (!r2.current) return;
const t3 = r2.current, e2 = n2?.();
if (!e2 || "object" != typeof e2) throw new Error("attributes must return a plain object of values");
const o3 = Object.keys(e2), i2 = o3.length;
for (let n3 = 0; n3 < i2; n3++) {
const r3 = o3[n3], i3 = e2[r3];
Object.defineProperty(t3, r3, { value: i3, writable: true, configurable: true, enumerable: true });
}
return t3;
}, o2), r2;
}
const jt = "Undo the last action.", Xt = "Repeat the last action or undo the redo.", Yt = (t2) => `Redo ${t2}`, Ut = ({ manager: t2, commands: e2, disabled: n2 }) => {
const i2 = rt(), s2 = ht((e3) => {
try {
t2?.undo(e3);
} catch (t3) {
i2.error(t3);
}
}, [t2]), l2 = ht((e3) => {
try {
t2?.redo(e3);
} catch (t3) {
i2.error(t3);
}
}, [t2]);
return o(() => {
if (!e2) return;
const t3 = { contains: (t4) => true, focus() {
} }, n3 = [new $("undo", t3, { label: "Undo", description: jt, shortcut: { key: "z", modifiers: [z.Ctrl] }, disabled: true }, s2), new $("redo", t3, { label: "Redo", description: Xt, shortcut: [{ key: "y", modifiers: [z.Ctrl] }, { key: "F4" }, { key: "Enter", modifiers: [z.Alt] }], disabled: true }, l2)];
e2?.addCommands(n3, true);
}, [e2]), r(() => {
if (!e2) return;
const o2 = () => {
const o3 = t2?.getTopUndoDescription(), r3 = {};
var i3;
e2.getCommand("undo").update({ disabled: n2 || !t2 || !t2.hasUndo(), description: o3 ? (i3 = o3, `Undo ${i3}`) : jt, state: r3, context: { undoManager: t2 } });
const s3 = t2?.getTopRedoDescription();
e2.getCommand("redo").update({ disabled: n2 || !t2 || !t2.hasRedo(), description: s3 ? Yt(s3) : Xt, state: r3, context: { undoManager: t2 } });
};
if (o2(), !t2) return;
const r2 = t2.addListener({ onStackChange() {
o2();
} });
return () => r2?.();
}, [t2, e2, n2]), { undo: s2, redo: l2 };
};
class Gt extends m {
static getDerivedStateFromError() {
return { hasError: true };
}
componentDidCatch(t2) {
this.props.onError?.(t2);
}
render() {
return this.props.children;
}
}
const qt = ({ children: t2 }) => {
const e2 = rt(), n2 = a((t3) => {
e2.showError(t3);
}, [e2]);
return x(Gt, { onError: n2, children: t2 });
};
class Zt {
constructor(t2) {
this.notifier = t2, this.handleUnhandledRejection = (t3) => {
const e2 = t3.reason;
e2 instanceof DOMException && "AbortError" === e2.name || this.notifier.showError(e2);
}, this.handleGlobalError = (t3) => {
this.notifier.showError(t3.error);
}, this.setupGlobalHandlers();
}
setupGlobalHandlers() {
window.addEventListener("unhandledrejection", this.handleUnhandledRejection), window.addEventListener("error", this.handleGlobalError);
}
cleanup() {
window.removeEventListener("unhandledrejection", this.handleUnhandledRejection), window.removeEventListener("error", this.handleGlobalError);
}
}
const Jt = ({ children: t2 }) => {
const e2 = rt();
return r(() => {
const t3 = new Zt(e2);
return () => {
t3.cleanup();
};
}, [e2]), x(E, { children: t2 });
}, Qt = () => null, te = {}, ee = (t2) => {
const { onPointerDown: e2, style: n2, splitDirection: o2, paddingBefore: r2 = 0, paddingAfter: i2 = 0, disabled: s2, key: l2, propsHitArea: a2 = te, ...c2 } = t2, h2 = "row" === o2, { style: u2, className: d2, ...p2 } = a2;
return x("div", { style: { ...n2, position: "relative" }, ...c2, children: x("div", { className: T("hit-box", d2), style: { left: (h2 ? -r2 : 0) + "px", width: `calc(100% + ${h2 ? r2 + i2 : 0}px)`, top: (h2 ? 0 : -r2) + "px", height: `calc(100% + ${h2 ? 0 : r2 + i2}px)`, position: "absolute", ...u2 }, onPointerDown: s2 ? void 0 : e2, ...p2 }) }, l2);
}, ne = {}, oe = (t2, e2, n2 = true) => null === t2 ? null : null !== t2.pixels ? n2 ? t2.pixels : e2 - t2.pixels : (n2 ? t2.percent : 100 - t2.percent) / 100 * e2, re = (t2, e2 = true) => t2?.percent ? `${e2 ? t2.percent : 100 - t2.percent}%` : t2?.pixels ? `${t2.pixels}px` : void 0, ie = (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);
}, se = s(l((n2, s2) => {
const { elementBefore: l2, elementAfter: a2, splitDirection: c2 = "row", fixedPane: h2 = null, position: u2, onPositionChange: d2, minBefore: p2, maxBefore: m2, minAfter: f2, maxAfter: _2, children: g2, className: y2, style: v2, disabled: w2 = false, onDragStart: b2, onDragResize: E2, onDragFinish: C2, propsResizer: k2 = ne, propsPane: D2 = ne, propsPaneBefore: P2 = ne, propsPaneAfter: z2 = ne, renderResizer: A2 = ee } = n2;
if (g2) throw new Error("Use elementBefore and elementAfter instead of children.");
const B2 = o(() => t.isValidElement(a2) && t.isValidElement(l2), [a2, l2]), $2 = o(() => {
let t2 = null;
h2 && ("before" === h2 ? t2 = 0 : "after" === h2 && (t2 = 1));
const e2 = null === t2;
return { fixedPaneOffset: t2, isPercent: e2, minBefore: ie(p2, e2), maxBefore: ie(m2, e2), minAfter: ie(f2, e2), maxAfter: ie(_2, e2) };
}, [p2, m2, f2, _2]), K2 = ht(d2, [d2]), [I2, O2] = i(() => ie(u2, null === h2));
r(() => {
O2(ie(u2, null === h2));
}, [u2, h2]);
const [N2, { width: H2, height: R2 }] = M(), [W2, { width: V2, height: F2 }] = M(), j2 = "row" === c2 ? V2 : F2, X2 = "row" === c2 ? H2 : R2, Y2 = o(() => ((t2, e2, n3, o2) => {
const r2 = [null, null], i2 = [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 ? (r2[0] = t2?.pixels, i2[1] = 100) : (r2[1] = t2?.pixels - n3, i2[0] = 100) : null != t2?.percent && (1 !== o2.fixedPaneOffset ? (i2[0] = t2?.percent, i2[1] = 100 - t2?.percent) : (i2[1] = t2?.percent, i2[0] = 100 - t2?.percent)), { percents: i2, pixels: r2, minBefore: re(o2.minBefore, true), maxBefore: re(o2.maxBefore, true), minAfter: re(o2.minAfter), maxAfter: re(o2.maxAfter) };
let s3 = oe(t2, e2, 1 !== o2.fixedPaneOffset), l3 = e2 - n3, a3 = oe(o2.minBefore, l3, true) ?? 0, c3 = oe(o2.maxBefore, l3, true) ?? l3, h3 = 0, u3 = 0, d3 = 0, p3 = l3;
h3 = (oe(o2.maxAfter, e2, false) ?? n3) - n3, u3 = oe(o2.minAfter, e2, false) ?? e2, d3 = Math.max(a3, h3), p3 = Math.min(c3, u3), s3 = Math.max(d3, Math.min(s3, p3)), u3 = Math.min(l3 - s3, oe(o2.maxAfter, l3 - s3, true) ?? l3), h3 = Math.min(l3 - s3, oe(o2.minAfter, l3 - s3, true) ?? l3), r2[0] = s3, r2[1] = l3 - r2[0];
const m3 = Math.max(0, Math.min(100, s3 / l3 * 100));
return i2[0] = m3, i2[1] = 100 - i2[0], { percents: i2, pixels: r2, minBefore: `${a3}px`, minAfter: `${h3}px`, maxBefore: `${r2[0]}px`, maxAfter: `${r2[1]}px` };
})(I2, X2, j2, $2), [$2, I2, X2, j2, c2]), [U2, G2] = i(false), q2 = ht(b2, [b2]), Z2 = ht(E2, [E2]), J2 = ht(C2, [C2]), Q2 = e(null), tt2 = e(null), et2 = e(null), { style: nt2, className: ot2, ...rt2 } = D2, it2 = { minWidth: 0, minHeight: 0, maxWidth: "100%", maxHeight: "100%", height: "100%", widthResizer: "100%", display: "flex", overflow: "hidden", position: "relative", ...nt2 }, { className: st2, style: lt2, ...at2 } = P2, { className: ct2, style: ut2, ...dt2 } = z2, pt2 = { flex: "1 1 100%", width: "100%", ...v2, flexDirection: c2, display: "flex" }, { className: mt2, style: ft2, onPointerDown: _t2, ...gt2 } = k2, yt2 = ht((t2) => {
const e2 = ie(t2, null === h2);
O2(e2);
}, [h2]), vt2 = ht((t2) => {
if (w2 || !U2) return;
const e2 = xt2.current?.getBoundingClientRect();
let n3 = 0;
n3 = "row" === c2 ? (t2.clientX ?? t2.touches?.[0]?.clientX) - e2.x : (t2.clientY ?? t2.touches?.[0]?.clientY) - e2.y, n3 = Math.max(0, Math.min(X2, n3)), 1 === $2.fixedPaneOffset && (n3 = X2 - n3), u2 && I2.pixels === n3 || O2({ pixels: n3, percent: null }), Z2?.(n3), t2.stopPropagation(), t2.preventDefault();
}, [$2, c2, w2, U2, I2, X2]), wt2 = ht((t2) => {
if (document.removeEventListener("pointermove", vt2), document.removeEventListener("touchmove", vt2), document.removeEventListener("pointerup", wt2), !U2) return;
if (G2(false), !I2) return;
J2(I2.pixels);
if (!ie(u2, null === h2) || I2.pixels !== u2) {
const t3 = { ...I2 };
null === t3.percent && (t3.percent = t3.pixels / X2 * 100), K2(t3);
}
t2.stopPropagation(), t2.preventDefault();
}, [I2, U2, u2, h2, X2]), bt2 = ht((t2) => {
_t2?.(t2), t2.defaultPrevented || w2 || U2 || (G2(true), q2(), document.addEventListener("pointermove", vt2, { passive: false }), document.addEventListener("touchmove", vt2, { passive: false }), document.addEventListener("pointerup", wt2, { passive: false }));
}, [_t2]), xt2 = Ft(s2, () => ({ setPosition: yt2, isSplitPane: () => true }), []), St2 = o(() => B2 ? A2?.({ key: "resizer", ref: L([W2, tt2]), className: T("resizer", mt2), onPointerDownCapture: bt2, style: { cursor: w2 ? void 0 : "row" === c2 ? "ew-resize" : "ns-resize", minWidth: "row" === c2 ? "2px" : void 0, minHeight: "row" !== c2 ? "2px" : void 0, boxSizing: "border-box", pointerEvents: "all", zIndex: 1, ...ft2 }, splitDirection: c2, disabled: w2, ...gt2 }) : null, [B2, mt2, gt2, c2, ft2, w2]), Et2 = "row" === c2 ? "Width" : "Height", Lt2 = o(() => {
if (!l2) return null;
const t2 = { ...it2, ...lt2, flex: 0 === $2.fixedPaneOffset && null !== Y2?.pixels[0] ? `0 0 ${Math.round(Y2?.pixels[0])}px` : `1 1 ${Math.round(Y2?.percents[0] ?? 100)}%`, [`min${Et2}`]: Y2?.minBefore, [`max${Et2}`]: a2 ? Y2?.maxBefore : "100%" };
return x("div", { ref: Q2, className: T("before", ot2, st2), style: t2, ...rt2, ...at2, children: l2 }, "before");
}, [l2, D2, P2, $2, Y2]), Mt2 = o(() => {
if (!a2) return null;
const t2 = { ...it2, ...ut2, flex: 1 === $2.fixedPaneOffset && null !== Y2?.pixels[1] ? `0 0 ${Math.round(Y2?.pixels[1])}px` : `1 1 ${Math.round(Y2?.percents[1] ?? 100)}%`, [`min${Et2}`]: Y2?.minAfter, [`max${Et2}`]: l2 ? Y2?.maxAfter : "100%" };
return x("div", { ref: et2, className: T("after", ot2, ct2), style: t2, ...rt2, ...dt2, children: a2 }, "after");
}, [a2, D2, z2, $2, Y2]);
return S("div", { ref: L([N2, xt2]), className: T("splitPane", "row" === c2 ? "vertical" : "horizontal", { dragging: U2 }, y2), style: pt2, children: [Lt2, St2, Mt2] });
}));
function le(t2) {
if ("function" == typeof t2) return t2;
if ("string" == typeof t2) {
const e2 = t2.trim();
if (e2.startsWith("data:image/svg+xml")) {
const t3 = (function(t4) {
const e3 = /^data:image\/svg\+xml(;[^,]*)?,(.*)$/i.exec(t4.trim());
if (!e3) return null;
const n2 = e3[1] || "", o2 = e3[2] || "";
try {
if (/;base64/i.test(n2)) {
if ("undefined" != typeof atob) {
const t5 = atob(o2), e4 = t5.length;
if ("undefined" != typeof TextDecoder) {
const n4 = new Uint8Array(e4);
for (let o3 = 0; o3 < e4; o3++) n4[o3] = t5.charCodeAt(o3);
return new TextDecoder("utf-8").decode(n4);
}
let n3 = "";
for (let o3 = 0; o3 < e4; o3++) {
n3 += `%${t5.charCodeAt(o3).toString(16).padStart(2, "0")}`;
}
return decodeURIComponent(n3);
}
return (globalThis.Buffer ? globalThis.Buffer.from(o2, "base64") : require("buffer").Buffer.from(o2, "base64")).toString("utf-8");
}
try {
return decodeURIComponent(o2);
} catch {
return o2;
}
} catch {
return null;
}
})(e2);
if (t3) return he(t3);
}
if (e2.startsWith("<")) {
if (/^<\s*svg\b/i.test(e2)) return he(e2);
if (/^<\s*path\b/i.test(e2)) {
const t3 = ae(e2);
if (t3) return { paths: [{ d: t3 }] };
}
return { paths: [{ d: e2 }] };
}
return { paths: [{ d: e2 }] };
}
if (Array.isArray(t2)) {
const e2 = [];
for (const n2 of t2) if ("string" == typeof n2) {
const t3 = String(n2).trim();
if (t3.startsWith("<path")) {
const n3 = ae(t3);
n3 && e2.push({ d: n3 });
} else e2.push({ d: t3 });
} else n2 && "object" == typeof n2 && "d" in n2 && "string" == typeof n2.d && e2.push({ ...n2 });
return { paths: e2 };
}
return t2;
}
function ae(t2) {
const e2 = /\bd\s*=\s*(?:"([^"]+)"|'([^']+)')/i.exec(t2);
return e2 ? e2[1] ?? e2[2] ?? null : null;
}
function ce(t2) {
if ("svg" in t2) return { ...t2, svg: le(t2.svg) };
if ("url" in t2) {
const e2 = "string" == typeof t2.url ? { src: t2.url } : t2.url;
return { ...t2, url: e2 };
}
if ("emoji" in t2) {
const e2 = "string" == typeof t2.emoji ? t2.emoji : t2.emoji.text;
return { ...t2, emoji: e2 };
}
return t2;
}
function he(t2) {
try {
if ("undefined" != typeof DOMParser) {
const e3 = new DOMParser().parseFromString(t2, "image/svg+xml"), n3 = e3.querySelector("svg"), o3 = n3?.getAttribute("viewBox") ?? void 0, r3 = [];
return e3.querySelectorAll("path").forEach((t3) => {
const e4 = t3.getAttribute("d");
if (!e4) return;
const n4 = { d: e4 }, o4