@sheetxl/grid-react 0.8.0-beta.5 → 0.8.0-beta.7

package/node/esm/index.mjs

@@ -1,12 +1,12 @@
 /**
-* @license @sheetxl/grid-react - Grid React - Advanced grid component for React - v0.8.0-beta.5
+* @license @sheetxl/grid-react - Grid React - Advanced grid component for React - v0.8.0-beta.7
 *
 * (C) 2026-present SheetXL Inc. & Michael T. Ford
 * License: The license can be found at https://www.sheetxl.com/license.
 */
 import e, { cloneElement as t, createContext as n, createElement as o, forwardRef as r, isValidElement as l, memo as i, useCallback as s, useContext as a, useEffect as c, useId as d, useLayoutEffect as u, useMemo as g, useReducer as h, useRef as f, useState as p, useSyncExternalStore as m } from "react";
 import { Fragment as w, jsx as x, jsxs as v } from "react/jsx-runtime";
-import { FloatPanelSurface as y, KeyCodes as b, KeyModifiers as S, ReactUtils as E, SERIES_COUNT as I, ScrollPane as C, THEME_MODE_ATTR as R, THEME_SURFACE_ATTR as M, Viewport as P, buildThemeCSS as k, defaultTheme as D, themeVars as T, useBoundSyncExternalStore as $, useCallbackRef as z, useFloatSurface as O, useFullscreenPortal as L, useImperativeElement as N, useOptionalBoundSyncExternalStore as B, useSynchronizedPointerHandler as F, useTokenThemeContext as A } from "@sheetxl/utils-react";
+import { FloatPanelSurface as y, KeyCodes as b, KeyModifiers as S, ReactUtils as E, SERIES_COUNT as I, ScrollPane as C, THEME_MODE_ATTR as R, THEME_SURFACE_ATTR as M, Viewport as P, buildThemeCSS as k, defaultTheme as D, themeVars as T, useBoundSyncExternalStore as O, useCallbackRef as $, useFloatSurface as z, useFullscreenPortal as L, useImperativeElement as N, useOptionalBoundSyncExternalStore as F, useSynchronizedPointerHandler as B, useTokenThemeContext as A } from "@sheetxl/utils-react";
 import V from "tiny-invariant";
 import H, { clsx as K } from "clsx";
 import { AnchorLocation as _, CommonUtils as W, CoordUtils as U, DOMUtils as j, Direction as G, RangeAxis as X, SelectionTraversalUtils as Y } from "@sheetxl/utils";
@@ -102,7 +102,7 @@ var re = (e, t) => {
 		d && he();
 	}, [d]), !I) return null;
 	const C = E.getDevicePixelRatio(), R = l ? r : r / C;
-	let M, P, k, D, T, $, z;
+	let M, P, k, D, T, O, $;
 	if (l) M = I.x, P = I.y, k = I.x + I.width, D = I.y + I.height;
 	else {
 		const e = (e) => i ? E.snapLineCenter(e, R, C) : E.edgeCenter(e, "leading", r, C), t = (e) => i ? E.snapLineCenter(e, R, C) : E.edgeCenter(e, "trailing", r, C), n = s / C;
@@ -126,14 +126,14 @@ var re = (e, t) => {
 			gapColor: "var(--sxl-color-base-100, #fff)",
 			..."object" == typeof d ? d : void 0
 		}, t = e.dashGap + e.dashLength;
-		$ = {
+		O = {
 			strokeDasharray: `${e.dashLength}px ${e.dashGap}px`,
 			strokeDashoffset: `${t}px`,
 			animation: `${ue} ${e.speed * t}ms linear infinite`,
 			willChange: "stroke-dashoffset"
-		}, z = e.gapColor;
+		}, $ = e.gapColor;
 	}
-	const O = u ? "d 60ms ease-in-out" : "none";
+	const z = u ? "d 60ms ease-in-out" : "none";
 	let L = null;
 	if (n) {
 		let e = de({
@@ -150,7 +150,7 @@ var re = (e, t) => {
 		})), L = x("path", {
 			style: {
 				d: `path("${e}")`,
-				transition: O,
+				transition: z,
 				fill: n,
 				...f?.style
 			},
@@ -166,14 +166,14 @@ var re = (e, t) => {
 			right: k,
 			bottom: D
 		});
-		N = v(w, { children: [z && x("path", {
+		N = v(w, { children: [$ && x("path", {
 			fill: "none",
 			vectorEffect: "non-scaling-stroke",
 			strokeWidth: R,
 			style: {
 				d: `path("${e}")`,
-				transition: O,
-				stroke: z
+				transition: z,
+				stroke: $
 			}
 		}, "stroke-under"), x("path", {
 			fill: "none",
@@ -184,9 +184,9 @@ var re = (e, t) => {
 			...p,
 			style: {
 				d: `path("${e}")`,
-				transition: O,
+				transition: z,
 				stroke: o,
-				...$,
+				...O,
 				...p?.style
 			}
 		}, "stroke")] });
@@ -376,41 +376,41 @@ var de = (e, t = !0) => `M ${e.left} ${e.top} L ${e.right} ${e.top} L ${e.right}
 			for (let n = 0; n < Se.length; n++) e.removeEventListener(Se[n], t, !0);
 		};
 	}, [E]);
-	const R = z((e) => {
+	const R = $((e) => {
 		C("pointerdown", e, d.current);
-	}, []), M = z((e) => {
+	}, []), M = $((e) => {
 		C("pointermove", e, d.current);
-	}, []), P = z((e) => {
+	}, []), P = $((e) => {
 		C("pointerup", e, d.current);
-	}, []), k = z((e) => {
+	}, []), k = $((e) => {
 		C("pointerleave", e, d.current);
-	}, []), D = z((e) => {
+	}, []), D = $((e) => {
 		C("mousedown", e, d.current);
-	}, []), T = z((e) => {
+	}, []), T = $((e) => {
 		C("mouseenter", e, d.current);
-	}, []), $ = z((e) => {
+	}, []), O = $((e) => {
 		C("mouseleave", e, d.current);
-	}, []), O = z((e) => {
+	}, []), z = $((e) => {
 		C("mousemove", e, d.current);
-	}, []), L = z((e) => {
+	}, []), L = $((e) => {
 		C("mouseout", e, d.current);
-	}, []), B = z((e) => {
+	}, []), F = $((e) => {
 		C("mouseover", e, d.current);
-	}, []), F = z((e) => {
+	}, []), B = $((e) => {
 		C("mouseup", e, d.current);
-	}, []), A = z((e) => {
+	}, []), A = $((e) => {
 		C("dblclick", e, d.current);
-	}, []), V = z((e) => {
+	}, []), V = $((e) => {
 		C("keydown", e, d.current);
-	}, []), K = z((e) => {
+	}, []), K = $((e) => {
 		C("keypress", e, d.current);
-	}, []), _ = z((e) => {
+	}, []), _ = $((e) => {
 		C("keyup", e, d.current);
-	}, []), W = z((e) => {
+	}, []), W = $((e) => {
 		o?.(e), C("focus", e, d.current);
-	}, [o]), U = z((e) => {
+	}, [o]), U = $((e) => {
 		r?.(e), C("blur", e, d.current);
-	}, [r]), j = z((e) => {
+	}, [r]), j = $((e) => {
 		C("contextmenu", e, d.current);
 	}, []), G = N(t, () => ({
 		isStage: () => !0,
@@ -429,11 +429,11 @@ var de = (e, t = !0) => `M ${e.left} ${e.top} L ${e.right} ${e.top} L ${e.right}
 		onPointerLeave: k,
 		onMouseDown: D,
 		onMouseEnter: T,
-		onMouseLeave: $,
-		onMouseMove: O,
+		onMouseLeave: O,
+		onMouseMove: z,
 		onMouseOut: L,
-		onMouseOver: B,
-		onMouseUp: F,
+		onMouseOver: F,
+		onMouseUp: B,
 		onDoubleClick: A,
 		onKeyDown: V,
 		onKeyUp: _,
@@ -543,7 +543,7 @@ var Re = Object.freeze([]), Me = (e, t) => {
 			offset: n,
 			size: t.getRowOffset(e + 1) - n
 		};
-	}, $ = (e, t) => {
+	}, O = (e, t) => {
 		const n = new Array(e.length);
 		for (let o = 0; o < e.length; o++) n[o] = t(e[o]);
 		return n;
@@ -629,8 +629,8 @@ var Re = Object.freeze([]), Me = (e, t) => {
 		},
 		getMetrics: () => P().metrics,
 		getRangeFromCell: d,
-		getVisibleColumns: (e, t) => $(P().colDims.visibleIndices(e, t), D),
-		getVisibleRows: (e, t) => $(P().rowDims.visibleIndices(e, t), T),
+		getVisibleColumns: (e, t) => O(P().colDims.visibleIndices(e, t), D),
+		getVisibleRows: (e, t) => O(P().rowDims.visibleIndices(e, t), T),
 		getColumnSize: D,
 		getRowSize: T,
 		getTotalRange: () => g,
@@ -653,8 +653,8 @@ var Re = Object.freeze([]), Me = (e, t) => {
 			const n = h(e, t);
 			if (!n) return null;
 			const o = m();
-			for (let e = 0; e < $e.length; e++) {
-				const t = o[$e[e]];
+			for (let e = 0; e < Oe.length; e++) {
+				const t = o[Oe[e]];
 				if (t && xe(n.x, n.y, t.getPaneBounds())) return t;
 			}
 			return null;
@@ -680,12 +680,12 @@ var Re = Object.freeze([]), Me = (e, t) => {
 		scrollTo: (e) => f(e),
 		getAllPanes: m
 	};
-}, $e = [
+}, Oe = [
 	_.TopLeft,
 	_.Top,
 	_.Left,
 	_.Center
-], ze = (e, t, n) => {
+], $e = (e, t, n) => {
 	const o = (t?.left ?? 0) + (n?.x ?? 0), r = (t?.top ?? 0) + (n?.y ?? 0);
 	return {
 		getColOffset: (t) => e.getColOffset(t) - o,
@@ -693,7 +693,7 @@ var Re = Object.freeze([]), Me = (e, t) => {
 		getRowOffset: (t) => e.getRowOffset(t) - r,
 		getRowIndex: (t) => e.getRowIndex(t + r)
 	};
-}, Oe = Object.freeze([{
+}, ze = Object.freeze([{
 	minIndex: 0,
 	maxIndex: 0,
 	minCoord: 0,
@@ -711,12 +711,12 @@ var Re = Object.freeze([]), Me = (e, t) => {
 	scrollOffset: 0,
 	freezeOffset: 0
 }]), Le = n(null), Ne = ({ pane: e, viewport: t, children: n }) => {
-	const o = g(() => ({ pane: e }), [e, B(t, (e) => e.getSnapshot())]);
+	const o = g(() => ({ pane: e }), [e, F(t, (e) => e.getSnapshot())]);
 	return x(Le.Provider, {
 		value: o,
 		children: n
 	});
-}, Be = () => {
+}, Fe = () => {
 	const e = /* @__PURE__ */ new Map(), t = /* @__PURE__ */ new Map();
 	return {
 		has: (t) => e.has(t),
@@ -734,15 +734,15 @@ var Re = Object.freeze([]), Me = (e, t) => {
 			};
 		}
 	};
-}, Fe = n(null), Ae = ({ store: e, children: t }) => {
-	const n = a(Fe), o = f(null);
+}, Be = n(null), Ae = ({ store: e, children: t }) => {
+	const n = a(Be), o = f(null);
 	let r = e ?? n;
-	return r || (o.current || (o.current = Be()), r = o.current), x(Fe.Provider, {
+	return r || (o.current || (o.current = Fe()), r = o.current), x(Be.Provider, {
 		value: r,
 		children: t
 	});
 }, Ve = { "sheetxl-grid": "_sheetxl-grid_5yo0n_7" }, He = i(r((e, n) => {
-	const { rowCount: r = 1, columnCount: i = 1, viewport: a, metrics: d, getRangeFromCell: u = U.cellToRange, hiddenRowsAt: m, hiddenColumnsAt: y, freezeLeft: b = 0, freezeTop: S = 0, propsFreezeLeft: E, propsFreezeTop: I, onFirstRender: C, children: R, wrapPane: M, onFocus: k, onBlur: D, className: T, style: $, ...O } = e, L = z(k, [k]), B = z(D, [D]), F = z(C, [C]), [A, K] = p(_.Center), [W, G] = h((e) => e + 1, 0), X = g(() => new P({}), []), Y = a ?? X, [q, Z] = p(() => {
+	const { rowCount: r = 1, columnCount: i = 1, viewport: a, metrics: d, getRangeFromCell: u = U.cellToRange, hiddenRowsAt: m, hiddenColumnsAt: y, freezeLeft: b = 0, freezeTop: S = 0, propsFreezeLeft: E, propsFreezeTop: I, onFirstRender: C, children: R, wrapPane: M, onFocus: k, onBlur: D, className: T, style: O, ...z } = e, L = $(k, [k]), F = $(D, [D]), B = $(C, [C]), [A, K] = p(_.Center), [W, G] = h((e) => e + 1, 0), X = g(() => new P({}), []), Y = a ?? X, [q, Z] = p(() => {
 		const e = Y.getClient();
 		return {
 			zoom: Y.getZoom(),
@@ -771,7 +771,7 @@ var Re = Object.freeze([]), Me = (e, t) => {
 			getRowOffset: (t) => e.getRowOffset(t) * J,
 			getRowIndex: (t) => e.getRowIndex(t / J)
 		};
-	}, [d, J]), ee = z((e, t = !1) => we(e, t, Q.getRowOffset, t ? 0 : r), [r, Q?.getRowOffset]), te = z(m ?? ee, [m]), ne = z((e, t = !1) => we(e, t, Q.getColOffset, t ? i : 0), [i, Q?.getColOffset]), oe = z(y ?? ne, [y]), re = s(() => {
+	}, [d, J]), ee = $((e, t = !1) => we(e, t, Q.getRowOffset, t ? 0 : r), [r, Q?.getRowOffset]), te = $(m ?? ee, [m]), ne = $((e, t = !1) => we(e, t, Q.getColOffset, t ? i : 0), [i, Q?.getColOffset]), oe = $(y ?? ne, [y]), re = s(() => {
 		G();
 	}, []), le = g(() => Math.min(q.w, Q.getColOffset(i)), [
 		W,
@@ -786,13 +786,13 @@ var Re = Object.freeze([]), Me = (e, t) => {
 	]), se = g(() => {
 		let e = NaN, t = null;
 		return (n) => (n === e && t || (e = n, t = ((e) => {
-			if (0 === ie) return Oe;
+			if (0 === ie) return ze;
 			const t = [];
 			let n = 0, o = 0;
 			"number" == typeof S ? n = S : (n = S.index ?? 0, o = (S.offset ?? 0) * J);
 			const l = o, i = Q.getRowOffset(n), s = i - l;
 			if (n > 0) {
-				const e = ze(Q, { top: o + Q.getRowOffset(0) }), r = Q.getRowIndex(l), a = Q.getRowIndex(i - 1);
+				const e = $e(Q, { top: o + Q.getRowOffset(0) }), r = Q.getRowIndex(l), a = Q.getRowIndex(i - 1);
 				let c;
 				t[1] = {
 					minIndex: r,
@@ -808,7 +808,7 @@ var Re = Object.freeze([]), Me = (e, t) => {
 					freezeOffset: o
 				};
 			}
-			const a = Math.max(0, ie - s), c = ze(Q, { top: e + s }), d = c.getRowIndex(0), u = c.getRowIndex(a - 1);
+			const a = Math.max(0, ie - s), c = $e(Q, { top: e + s }), d = c.getRowIndex(0), u = c.getRowIndex(a - 1);
 			let g;
 			return t[0] = {
 				minIndex: d,
@@ -836,13 +836,13 @@ var Re = Object.freeze([]), Me = (e, t) => {
 	]), ce = g(() => se(0), [se]), de = g(() => {
 		let e = NaN, t = null;
 		return (n) => (n === e && t || (e = n, t = ((e) => {
-			if (0 === le) return Oe;
+			if (0 === le) return ze;
 			const t = [];
 			let n = 0, o = 0;
 			"number" == typeof b ? n = b : (n = b.index ?? 0, o = (b.offset ?? 0) * J);
 			const r = o, l = Q.getColOffset(n), s = l - r;
 			if (n > 0) {
-				const e = ze(Q, { left: o + Q.getColOffset(0) }), i = Q.getColIndex(r), a = Q.getColIndex(l - 1);
+				const e = $e(Q, { left: o + Q.getColOffset(0) }), i = Q.getColIndex(r), a = Q.getColIndex(l - 1);
 				let c;
 				t[1] = {
 					minIndex: i,
@@ -858,7 +858,7 @@ var Re = Object.freeze([]), Me = (e, t) => {
 					freezeOffset: o
 				};
 			}
-			const a = Math.max(0, le - s), c = ze(Q, { left: e + s }), d = c.getColIndex(0), u = c.getColIndex(a - 1);
+			const a = Math.max(0, le - s), c = $e(Q, { left: e + s }), d = c.getColIndex(0), u = c.getColIndex(a - 1);
 			let g;
 			return t[0] = {
 				minIndex: d,
@@ -912,7 +912,7 @@ var Re = Object.freeze([]), Me = (e, t) => {
 					K(o), L(e);
 				},
 				onBlur: (e) => {
-					B(e);
+					F(e);
 				}
 			}), e.push(i);
 		};
@@ -936,7 +936,7 @@ var Re = Object.freeze([]), Me = (e, t) => {
 			getRangeFromCell: u,
 			invalidate: re,
 			totalRange: t,
-			getSurfacePointFromPointer: (e, t) => $e(e, t),
+			getSurfacePointFromPointer: (e, t) => Oe(e, t),
 			scrollTo: (e) => Qe(e),
 			scrollCellCoordsIntoView: (e, t, n) => Je(e, t, n),
 			getAllPanes: () => e
@@ -961,7 +961,7 @@ var Re = Object.freeze([]), Me = (e, t) => {
 			left: e ? e.metrics.getColOffset(e.maxIndex + 1) : 0,
 			top: t ? t.metrics.getRowOffset(t.maxIndex + 1) : 0
 		};
-	}, [ce, ue]), Pe = z((e) => {
+	}, [ce, ue]), Pe = $((e) => {
 		j.canUseDOM && setTimeout(() => {
 			(Se[A]?.getElement() ?? Se[_.Center]?.getElement())?.focus({
 				preventScroll: !0,
@@ -976,7 +976,7 @@ var Re = Object.freeze([]), Me = (e, t) => {
 			ge.current = [];
 		}
 	}, [Se]);
-	const $e = s((e, t) => {
+	const Oe = s((e, t) => {
 		V("number" == typeof e && "number" == typeof t, "Top and left should be a number.");
 		const n = et.current?.getBoundingClientRect();
 		return n ? {
@@ -986,9 +986,9 @@ var Re = Object.freeze([]), Me = (e, t) => {
 			x: e,
 			y: t
 		};
-	}, []), Le = z((e, t) => {
+	}, []), Le = $((e, t) => {
 		if (1 === Object.keys(Se).length) return Se[_.Center];
-		const n = $e(e, t);
+		const n = Oe(e, t);
 		if (!n) return Se[_.Center];
 		const { x: o, y: r } = n;
 		let l = null;
@@ -1009,7 +1009,7 @@ var Re = Object.freeze([]), Me = (e, t) => {
 		ue,
 		ce
 	]);
-	const Be = z((e) => {
+	const Fe = $((e) => {
 		let t = e?.left ?? e?.[0], n = e?.top ?? e?.[1];
 		if (void 0 === t && void 0 === n) return;
 		const o = e?.behavior ?? "auto", r = Y.getTarget();
@@ -1018,12 +1018,12 @@ var Re = Object.freeze([]), Me = (e, t) => {
 			top: n,
 			behavior: o
 		});
-	}, []), Fe = z((e) => void 0 !== e ? Se[e] ?? null : Se[A] ?? Se[_.Center] ?? null, [Se, A]), He = z((e) => {
+	}, []), Be = $((e) => void 0 !== e ? Se[e] ?? null : Se[A] ?? Se[_.Center] ?? null, [Se, A]), He = $((e) => {
 		const t = Se[A];
 		if (!t) return Se[_.Center];
 		const n = t.getScrollOrientation(), o = { ...t.getVisibleRange() };
 		return n.vertical && (o.rowStart = ce[0].minCoord, o.rowEnd = ce[0].maxCoord), n.horizontal && (o.colStart = ue[0].minCoord, o.colEnd = ue[0].maxCoord), n && U.isCellWithinRange(e, o) ? t : Se[_.Center];
-	}, [Se, A]), Je = z((e, t = {
+	}, [Se, A]), Je = $((e, t = {
 		inline: "nearest",
 		block: "nearest"
 	}, n = null) => {
@@ -1089,18 +1089,18 @@ var Re = Object.freeze([]), Me = (e, t) => {
 		Ie,
 		Se,
 		u
-	]), Qe = z((e) => {
+	]), Qe = $((e) => {
 		const t = e?.left ?? e?.[0], n = e?.top ?? e?.[1], o = Y.getTarget(), r = t ?? o.left, l = n ?? o.top, i = "smooth" === e?.behavior;
 		Y.setTarget(r, l, i);
 	}, []), et = N(n, () => ({
 		focus: Pe,
 		invalidate: re,
 		scrollTo: Qe,
-		scrollBy: Be,
+		scrollBy: Fe,
 		scrollCellCoordsIntoView: Je,
 		getPaneFromClient: Le,
 		getPaneFromCell: He,
-		getPane: Fe,
+		getPane: Be,
 		onPaneChangeOnce: (e) => {
 			ge.current.push(e);
 		}
@@ -1212,15 +1212,15 @@ var Re = Object.freeze([]), Me = (e, t) => {
 		Me
 	]);
 	return c(() => {
-		!lt.current && it && Re && (lt.current = !0, F?.(et.current));
+		!lt.current && it && Re && (lt.current = !0, B?.(et.current));
 	}, [it, Re]), x("div", {
 		ref: et,
 		className: H(T, "grid-surface", Ve["sheetxl-grid"]),
 		style: {
 			overflow: "hidden",
-			...$
+			...O
 		},
-		...O,
+		...z,
 		children: x(Ae, { children: it })
 	});
 }));
@@ -1260,8 +1260,8 @@ function Qe() {
 	return a(Le)?.pane ?? null;
 }
 function et(e, t) {
-	const n = a(Fe), o = f(null);
-	o.current || (o.current = Be());
+	const n = a(Be), o = f(null);
+	o.current || (o.current = Fe());
 	const r = n ?? o.current, l = `k:${e}`, i = f(null);
 	null === i.current && (i.current = { v: "function" == typeof t ? t() : t });
 	const c = s(() => r.has(l) ? r.get(l) : i.current.v, [r, l]);
@@ -1414,7 +1414,7 @@ var ot = (e) => e ? (t) => e(t) : void 0, rt = !1, lt = !1, it = "_virtual-div_1
 		const e = d ? 1 / C : 0;
 		P = E.snapDeviceEdge(S.x, C), k = E.snapDeviceEdge(S.y, C), D = E.snapDeviceEdge(S.x + S.width, C) + e - P, T = E.snapDeviceEdge(S.y + S.height, C) + e - k;
 	}
-	const { transform: $, ...z } = p ?? {}, O = {
+	const { transform: O, ...$ } = p ?? {}, z = {
 		x: S.x - P,
 		y: S.y - k,
 		width: S.width,
@@ -1430,13 +1430,13 @@ var ot = (e) => e ? (t) => e(t) : void 0, rt = !1, lt = !1, it = "_virtual-div_1
 				borderWidth: `${M}px`,
 				borderStyle: "solid"
 			} : void 0,
-			...z,
-			transform: `translate(${P}px, ${k}px)${$ ? ` ${$}` : ""}`
+			...$,
+			transform: `translate(${P}px, ${k}px)${O ? ` ${O}` : ""}`
 		},
 		...w,
 		ref: y,
 		children: null == m ? null : x(ie.Provider, {
-			value: O,
+			value: z,
 			children: m
 		})
 	});
@@ -1627,14 +1627,14 @@ var at = !1, ct = (e, t, n, o) => ({
 	const E = gt(m), I = gt(p), C = (e) => Math.max(E.left, Math.min(E.right, e)), R = (e) => Math.max(I.top, Math.min(I.bottom, e)), M = C(b), P = R(S), k = {
 		x: M,
 		y: P
-	}, D = C(x.left), T = R(w.top), $ = ct(D, T, C(x.right) - D, R(w.bottom) - T), z = M - b, O = P - S, L = Math.abs(O) >= Math.abs(z) ? O < 0 ? "b" : O > 0 ? "t" : z < 0 ? "r" : z > 0 ? "l" : null : z < 0 ? "r" : z > 0 ? "l" : O < 0 ? "b" : O > 0 ? "t" : null, N = z || O ? {
-		dx: z,
-		dy: O,
-		distance: Math.hypot(z, O),
+	}, D = C(x.left), T = R(w.top), O = ct(D, T, C(x.right) - D, R(w.bottom) - T), $ = M - b, z = P - S, L = Math.abs(z) >= Math.abs($) ? z < 0 ? "b" : z > 0 ? "t" : $ < 0 ? "r" : $ > 0 ? "l" : null : $ < 0 ? "r" : $ > 0 ? "l" : z < 0 ? "b" : z > 0 ? "t" : null, N = $ || z ? {
+		dx: $,
+		dy: z,
+		distance: Math.hypot($, z),
 		direction: L ?? "t"
 	} : null;
 	return f || "hide" !== l ? {
-		rect: $,
+		rect: O,
 		clipped: !1,
 		boundaryRect: i,
 		clampedTo: L,
@@ -1643,7 +1643,7 @@ var at = !1, ct = (e, t, n, o) => ({
 		slid: N,
 		outOfView: !f
 	} : {
-		rect: $,
+		rect: O,
 		clipped: !0,
 		boundaryRect: i,
 		clampedTo: L,
@@ -1805,12 +1805,20 @@ var at = !1, ct = (e, t, n, o) => ({
 };
 Ct.displayName = "StickyAnchor";
 var Pt = (e) => {
-	const t = O(), n = A(), o = e?.getElement(), r = {}, l = o?.closest(`[${R}]`)?.getAttribute(R), i = o?.closest(`[${M}]`)?.getAttribute(M);
-	l && (r[R] = l), i && (r[M] = i);
-	const s = [...t?.themeScope?.classes ?? [], n?.scopeClass].filter(Boolean);
+	const t = z(), n = A(), o = e?.getElement(), r = o?.ownerDocument, l = s((e) => {
+		if (!r || "undefined" == typeof MutationObserver) return () => {};
+		const t = new MutationObserver(e);
+		return t.observe(r.documentElement, {
+			attributes: !0,
+			subtree: !0,
+			attributeFilter: [R, M]
+		}), () => t.disconnect();
+	}, [r]), i = () => `${o?.closest(`[${R}]`)?.getAttribute(R) ?? ""}\n${o?.closest(`[${M}]`)?.getAttribute(M) ?? ""}`, [a, c] = m(l, i, i).split("\n"), d = {};
+	a && (d[R] = a), c && (d[M] = c);
+	const u = [...t?.themeScope?.classes ?? [], n?.scopeClass].filter(Boolean);
 	return {
-		className: s.length ? s.join(" ") : void 0,
-		attrs: r
+		className: u.length ? u.join(" ") : void 0,
+		attrs: d
 	};
 }, kt = (e) => {
 	const { side: t, align: n = "center" } = e;
@@ -1874,29 +1882,29 @@ var Pt = (e) => {
 	});
 };
 Tt.displayName = "StickyFloat";
-var $t = (e) => {
+var Ot = (e) => {
 	const [t, n] = (e ?? "bottom-start").split("-");
 	return {
 		side: "top" === t ? "t" : "left" === t ? "l" : "right" === t ? "r" : "b",
 		align: "start" === n ? "start" : "end" === n ? "end" : "center"
 	};
-}, zt = { update: () => {} }, Ot = (e) => {
-	const { open: t, anchorEl: n, floatReference: o, createPopupPanel: r, propsPopper: l, onMount: i, onOpening: s, onOpen: a, onClosing: d, onClose: u, children: g, className: h, label: m, anchorPosition: w, ...b } = e, S = f(null), [E, I] = p(), C = z(i ?? (() => {}), [i]), R = z(s ?? (() => {}), [s]), M = z(a ?? (() => {}), [a]), P = z(d ?? (() => {}), [d]), k = z(u ?? (() => {}), [u]);
+}, $t = { update: () => {} }, zt = (e) => {
+	const { open: t, anchorEl: n, floatReference: o, createPopupPanel: r, propsPopper: l, onMount: i, onOpening: s, onOpen: a, onClosing: d, onClose: u, children: g, className: h, label: m, anchorPosition: w, ...b } = e, S = f(null), [E, I] = p(), C = $(i ?? (() => {}), [i]), R = $(s ?? (() => {}), [s]), M = $(a ?? (() => {}), [a]), P = $(d ?? (() => {}), [d]), k = $(u ?? (() => {}), [u]);
 	c(() => {
 		if (t) {
 			const e = S.current;
 			if (!e) return;
-			I(e), C(e, zt), R(), M();
+			I(e), C(e, $t), R(), M();
 			return;
 		}
 		P(), k();
 	}, [t]);
-	const D = z(() => {
+	const D = $(() => {
 		o?.close(0);
 	}, [o]), T = l?.offsets;
 	return x(Tt, {
 		anchor: n,
-		placement: $t(l?.placement),
+		placement: Ot(l?.placement),
 		offset: T?.[1] ?? 2,
 		alignOffset: T?.[0] ?? 0,
 		zIndex: 1300,
@@ -1918,10 +1926,10 @@ var $t = (e) => {
 		})
 	});
 };
-Ot.displayName = "GridFloatPanel";
+zt.displayName = "GridFloatPanel";
 var Lt = ({ outOfView: e, close: t }) => (c(() => {
 	e && t();
-}, [e]), null), Nt = (e) => x(Ot, { ...e }), Bt = { pointerEvents: "auto" }, Ft = (e = {}) => {
+}, [e]), null), Nt = (e) => x(zt, { ...e }), Ft = { pointerEvents: "auto" }, Bt = (e = {}) => {
 	const { openDelay: t = 300, closeDelay: n = 150 } = e, [o, r] = p(!1), l = f(!1), i = f(null), a = f(!1), d = f(null), u = f(null), h = (e) => {
 		l.current = e, r(e);
 	}, m = () => {
@@ -1948,7 +1956,7 @@ var Lt = ({ outOfView: e, close: t }) => (c(() => {
 		onPointerLeave: () => {
 			a.current = !1, x();
 		},
-		style: Bt
+		style: Ft
 	}), [x]);
 	return c(() => () => {
 		m(), w();
@@ -1959,7 +1967,7 @@ var Lt = ({ outOfView: e, close: t }) => (c(() => {
 		close: y
 	};
 }, At = (e, t = {}) => {
-	const { open: n, setTarget: o, tipProps: r } = Ft(t), l = Qe(), i = Ie(l), s = a(ke), d = Pe(e), [u, g] = et(`range-hover:${s}:${d}`, null), h = f({});
+	const { open: n, setTarget: o, tipProps: r } = Bt(t), l = Qe(), i = Ie(l), s = a(ke), d = Pe(e), [u, g] = et(`range-hover:${s}:${d}`, null), h = f({});
 	return h.current = {
 		pointermove: (t, n) => {
 			const o = t, r = (n ?? l)?.getCellFromPointer(o.clientX, o.clientY);
@@ -1984,22 +1992,23 @@ var Lt = ({ outOfView: e, close: t }) => (c(() => {
 	key: e.key ?? Pe(e.range),
 	range: e.range,
 	data: e.data,
-	placement: e.placement
+	placement: e.placement,
+	alignOffset: e.alignOffset
 }), Kt = (e, t) => Array.isArray(e) ? e.includes(t) : e === t, _t = (e) => {
 	const t = e.getCoords();
 	return t ? `${t.rowIndex},${t.colIndex}` : null;
 }, Wt = (e) => {
-	const { activateOn: t, name: n, probe: o, selection: r, target: l, dismiss: i, placement: s, offset: d = 6, alignOffset: u = 0, openDelay: g = 300, closeDelay: h = 150, whenOff: f = "hide", boundary: p, zIndex: m, children: w, className: v, style: y } = e, b = Je(), S = a(ke), E = Kt(t, "hover"), I = Kt(t, "selection"), C = void 0 !== l, { open: R, setTarget: M, tipProps: P, close: k } = Ft({
+	const { activateOn: t, name: n, probe: o, selection: r, target: l, dismiss: i, placement: s, offset: d = 6, alignOffset: u = 0, openDelay: g = 300, closeDelay: h = 150, whenOff: f = "hide", boundary: p, zIndex: m, children: w, className: v, style: y } = e, b = Je(), S = a(ke), E = Kt(t, "hover"), I = Kt(t, "selection"), C = void 0 !== l, { open: R, setTarget: M, tipProps: P, close: k } = Bt({
 		openDelay: g,
 		closeDelay: h
-	}), [D, T] = et(`range-float:${n ?? S}`, Vt), $ = z(() => {
+	}), [D, T] = et(`range-float:${n ?? S}`, Vt), O = $(() => {
 		T((e) => null === e.aimed ? e : {
 			target: e.target,
 			aimed: null
 		});
-	}, [T]), O = z((e) => {
+	}, [T]), z = $((e) => {
 		const t = b.getCellFromPointer(e.clientX, e.clientY), n = t ? o?.(t, b) : null;
-		if (!n?.range) return void $();
+		if (!n?.range) return void O();
 		const r = Ht(n);
 		T((e) => e.aimed === r.key && e.target?.key === r.key ? e : {
 			target: r,
@@ -2009,7 +2018,7 @@ var Lt = ({ outOfView: e, close: t }) => (c(() => {
 		b,
 		o,
 		T,
-		$
+		O
 	]), L = E ? D.aimed : null;
 	c(() => {
 		M(L);
@@ -2020,22 +2029,22 @@ var Lt = ({ outOfView: e, close: t }) => (c(() => {
 		k,
 		T
 	]);
-	const N = B(I ? r : void 0, _t);
-	let F = null;
+	const N = F(I ? r : void 0, _t);
+	let B = null;
 	if (I && !i && r && null !== N) {
 		const e = o?.(r.getCoords(), b);
-		e && e.range && (F = Ht(e));
+		e && e.range && (B = Ht(e));
 	}
-	const A = E ? D.target : null, V = R && null !== A, K = C ? null === l ? null : Ht(l) : V ? A : F ?? A, _ = C ? null !== K : V || null !== F;
+	const A = E ? D.target : null, V = R && null !== A, K = C ? null === l ? null : Ht(l) : V ? A : B ?? A, _ = C ? null !== K : V || null !== B;
 	return x(nt, {
 		className: H(v, "range-float"),
-		onPointerMove: E ? O : void 0,
-		onPointerLeave: E ? $ : void 0,
+		onPointerMove: E ? z : void 0,
+		onPointerLeave: E ? O : void 0,
 		children: K && x(Tt, {
 			anchor: { range: K.range },
 			placement: K.placement ?? s,
 			offset: d,
-			alignOffset: u,
+			alignOffset: K.alignOffset ?? u,
 			boundary: p,
 			zIndex: m,
 			open: _,
@@ -2490,18 +2499,18 @@ var fn = (e) => {
 				o?.(), d?.();
 			}
 		};
-	}), $ = null !== T && l ? l : r ?? Sn[n], z = R.getBoundsFromRange(t);
-	if (!z) return null;
-	const O = E.getDevicePixelRatio();
-	let L = bn(z.x, z.x + z.width, vn[n], O), N = bn(z.y, z.y + z.height, yn[n], O);
+	}), O = null !== T && l ? l : r ?? Sn[n], $ = R.getBoundsFromRange(t);
+	if (!$) return null;
+	const z = E.getDevicePixelRatio();
+	let L = bn($.x, $.x + $.width, vn[n], z), N = bn($.y, $.y + $.height, yn[n], z);
 	if (I) {
 		if (!R.toClipBounds(R.getBoundsFromRange(t))) return null;
 		const e = R.getPaneBounds(), n = o / 2 + 1;
 		!0 !== I && "x" !== I || (L = Math.max(n, Math.min(e.width - n, L))), !0 !== I && "y" !== I || (N = Math.max(n, Math.min(e.height - n, N)));
 	}
-	const B = {
+	const F = {
 		position: "absolute",
-		cursor: $,
+		cursor: O,
 		pointerEvents: "all",
 		left: 0,
 		top: 0,
@@ -2510,7 +2519,7 @@ var fn = (e) => {
 			transition: "transform 60ms ease-in-out",
 			willChange: "transform"
 		} : void 0
-	}, F = {
+	}, B = {
 		className: H("drag-handle", y),
 		onPointerDown: (e) => {
 			k(e) ? u(e) : D(e);
@@ -2526,17 +2535,17 @@ var fn = (e) => {
 	return m ? x(w, { children: m({
 		anchor: n,
 		size: o,
-		cursor: $,
+		cursor: O,
 		background: i,
 		hovered: M,
 		handleProps: {
-			...F,
-			style: B
+			...B,
+			style: F
 		}
 	}) }) : x("div", {
-		...F,
+		...B,
 		style: {
-			...B,
+			...F,
 			width: o,
 			height: o,
 			background: null == v ? i : void 0,
@@ -2681,17 +2690,17 @@ var xn = () => {
 	} }, D = l ? {
 		onPointerEnter: () => l(!0),
 		onPointerLeave: () => l(!1)
-	} : void 0, T = r / E.getDevicePixelRatio(), $ = m?.getBoundsFromRange(t), z = $ ? {
-		x: $.x - T,
-		y: $.y - T,
-		width: $.width + 2 * T,
-		height: $.height + 2 * T
+	} : void 0, T = r / E.getDevicePixelRatio(), O = m?.getBoundsFromRange(t), $ = O ? {
+		x: O.x - T,
+		y: O.y - T,
+		width: O.width + 2 * T,
+		height: O.height + 2 * T
 	} : void 0;
 	return v(w, { children: [
 		x(st, "entire" === o ? {
 			ref: b,
 			className: H("drag-grip", p),
-			...z ? { bounds: z } : { range: t },
+			...$ ? { bounds: $ } : { range: t },
 			style: { cursor: P },
 			...k,
 			...D
@@ -2794,7 +2803,7 @@ var Tn = (e, t, n, o) => {
 		rowEnd: Math.max(r, i),
 		colEnd: Math.max(l, s)
 	};
-}, $n = (e, t, n) => {
+}, On = (e, t, n) => {
 	const o = t.rowIndex - e.rowEnd, r = e.rowStart - t.rowIndex, l = t.colIndex - e.colEnd, i = e.colStart - t.colIndex, s = Math.max(o, r, 0), a = Math.max(l, i, 0);
 	if (s > 0 || a > 0) return s >= a ? o > 0 ? {
 		...e,
@@ -2817,13 +2826,13 @@ var Tn = (e, t, n, o) => {
 		...e,
 		colEnd: t.colIndex
 	};
-}, zn = (e, t) => t.rowEnd < e.rowEnd ? {
+}, $n = (e, t) => t.rowEnd < e.rowEnd ? {
 	...e,
 	rowStart: t.rowEnd + 1
 } : t.colEnd < e.colEnd ? {
 	...e,
 	colStart: t.colEnd + 1
-} : null, On = (e) => {
+} : null, zn = (e) => {
 	const { range: t, snapDestination: n, onDragStart: o, onDragMove: r, onDragEnd: l, onMenu: i, onDragDone: s, onDoubleClick: a, renderHandle: c, ...d } = e, u = {
 		...en,
 		fill: void 0,
@@ -2857,7 +2866,7 @@ var Tn = (e, t, n, o) => {
 		}, c))) return !1;
 		return !0;
 	})(p, t, E, I)) return null;
-	const $ = y ? zn(t, y) : null;
+	const O = y ? $n(t, y) : null;
 	return v(w, { children: [
 		x(wn, {
 			className: "fill-handle",
@@ -2873,7 +2882,7 @@ var Tn = (e, t, n, o) => {
 				m.current = null, b(null), o?.(t, n);
 			},
 			onDragMove: (e, o, l) => {
-				let i = $n(t, o, p.getTotalRange());
+				let i = On(t, o, p.getTotalRange());
 				i && n && (i = n(t, i)), m.current = i, b(i), i && r?.(i, l);
 			},
 			onDragEnd: (e, t, n) => {
@@ -2889,14 +2898,14 @@ var Tn = (e, t, n, o) => {
 			range: y,
 			...h
 		}),
-		$ && x(tn, {
+		O && x(tn, {
 			className: "fill-vacated",
-			range: $,
+			range: O,
 			fill: "rgba(128, 128, 128, 0.28)"
 		})
 	] });
 };
-On.displayName = "FillHandle";
+zn.displayName = "FillHandle";
 var Ln = i((e) => {
 	const { value: t, zoom: n, bounds: o, cell: r, range: l, children: i, className: s, ...a } = e;
 	return x("div", {
@@ -2908,8 +2917,8 @@ var Ln = i((e) => {
 	cells: [],
 	rangesH: [],
 	rangesV: []
-}), Bn = !1, Fn = /* @__PURE__ */ new WeakMap(), An = (e, t = {}) => {
-	const n = e.getVisibleRange(), o = e.getScrollTopLeft(), r = t.bufferRange, l = !!r, i = r ? r.rowStart : 0, s = r ? r.colStart : 0, a = r ? r.rowEnd : 0, c = r ? r.colEnd : 0, d = Fn.get(e);
+}), Fn = !1, Bn = /* @__PURE__ */ new WeakMap(), An = (e, t = {}) => {
+	const n = e.getVisibleRange(), o = e.getScrollTopLeft(), r = t.bufferRange, l = !!r, i = r ? r.rowStart : 0, s = r ? r.colStart : 0, a = r ? r.rowEnd : 0, c = r ? r.colEnd : 0, d = Bn.get(e);
 	if (d && d.rowStart === n.rowStart && d.colStart === n.colStart && d.rowEnd === n.rowEnd && d.colEnd === n.colEnd && d.scrollLeft === o.left && d.scrollTop === o.top && d.hasBuffer === l && d.bRowStart === i && d.bColStart === s && d.bRowEnd === a && d.bColEnd === c && d.options.cacheToken === t.cacheToken && d.options.getVisibleCells === t.getVisibleCells && d.options.hiddenCellAt === t.hiddenCellAt) return d.model;
 	const u = ((e, t = {}) => {
 		const { getVisibleCells: n, hiddenCellAt: o, bufferRange: r } = t, l = e.getTotalRange(), i = r ? {
@@ -2979,7 +2988,7 @@ var Ln = i((e) => {
 				range: l,
 				bounds: s,
 				value: n?.value
-			}) : Bn || (Bn = !0, console.warn("grid-react: no bounds for cell", _n(l.rowStart, l.colStart)));
+			}) : Fn || (Fn = !0, console.warn("grid-react: no bounds for cell", _n(l.rowStart, l.colStart)));
 		}
 		return {
 			cells: f,
@@ -2987,7 +2996,7 @@ var Ln = i((e) => {
 			rangesV: m
 		};
 	})(e, t);
-	return Fn.set(e, {
+	return Bn.set(e, {
 		rowStart: n.rowStart,
 		colStart: n.colStart,
 		rowEnd: n.rowEnd,
@@ -3284,14 +3293,14 @@ var Gn = 8, Xn = 1 << 19, Yn = 1, qn = 512, Zn = !1, Jn = (e, t, n) => {
 	const { showGridLines: t = !0, gridLineColor: n = "var(--sxl-color-base-300, rgb(224, 224, 224))", propsRows: o, propsColumns: r, getVisibleCells: l, hiddenCellAt: i, cacheToken: s, bufferRange: a, className: c, style: d, ...u } = e, h = Je(), f = t, p = !0 === t || !0 === f?.horizontal, m = !0 === t || !0 === f?.vertical, { rangesH: w, rangesV: y } = Kn(h, {
 		getVisibleCells: l,
 		cacheToken: s
-	}), b = E.getDevicePixelRatio(), { top: S, left: I } = h.getScrollTopLeft(), C = h.getPaneBounds(), R = h.getVisibleRange(), M = h.getColumnSize(R.colEnd), P = h.getRowSize(R.rowEnd), k = Math.min(C.width, M ? M.offset + M.size : C.width), D = Math.min(C.height, P ? P.offset + P.size : C.height), T = 0 === w.length ? `${S}|${k}|${b}` : `${S}|${I}|${k}|${b}|${Qn(w)}`, $ = 0 === y.length ? `${I}|${D}|${b}` : `${I}|${S}|${D}|${b}|${Qn(y)}`, z = g(() => p ? Jn(h, !0, w) : null, [
+	}), b = E.getDevicePixelRatio(), { top: S, left: I } = h.getScrollTopLeft(), C = h.getPaneBounds(), R = h.getVisibleRange(), M = h.getColumnSize(R.colEnd), P = h.getRowSize(R.rowEnd), k = Math.min(C.width, M ? M.offset + M.size : C.width), D = Math.min(C.height, P ? P.offset + P.size : C.height), T = 0 === w.length ? `${S}|${k}|${b}` : `${S}|${I}|${k}|${b}|${Qn(w)}`, O = 0 === y.length ? `${I}|${D}|${b}` : `${I}|${S}|${D}|${b}|${Qn(y)}`, $ = g(() => p ? Jn(h, !0, w) : null, [
 		h,
 		p,
 		T
-	]), O = g(() => m ? Jn(h, !1, y) : null, [
+	]), z = g(() => m ? Jn(h, !1, y) : null, [
 		h,
 		m,
-		$
+		O
 	]);
 	return p || m ? x(nt, {
 		...u,
@@ -3303,7 +3312,7 @@ var Gn = 8, Xn = 1 << 19, Yn = 1, qn = 512, Zn = !1, Jn = (e, t, n) => {
 				pointerEvents: "none",
 				...d
 			},
-			children: [p && z ? eo(h, !0, z, n, o) : null, m && O ? eo(h, !1, O, n, r) : null]
+			children: [p && $ ? eo(h, !0, $, n, o) : null, m && z ? eo(h, !1, z, n, r) : null]
 		})
 	}) : null;
 });
@@ -3612,7 +3621,7 @@ var no = 1, oo = -10, ro = class {
 		dragMode: c.dragMode
 	};
 }, yo = (e) => {
-	const { selection: t, color: n = "var(--sxl-color-primary, rgb(33, 115, 70))", size: o = 22 } = e, r = Qe(), i = Eo($(t, (e) => e.getSelection())), s = r ? r.getAllPanes()[_.Center] ?? r : void 0, a = ((e, t, n) => {
+	const { selection: t, color: n = "var(--sxl-color-primary, rgb(33, 115, 70))", size: o = 22 } = e, r = Qe(), i = Eo(O(t, (e) => e.getSelection())), s = r ? r.getAllPanes()[_.Center] ?? r : void 0, a = ((e, t, n) => {
 		const o = !!t && e.rowStart === t.rowStart && e.rowEnd === t.rowEnd, r = !!t && e.colStart === t.colStart && e.colEnd === t.colEnd;
 		if (o && r) return [];
 		if (o) {
@@ -3856,8 +3865,8 @@ var Mo = (e, t) => void 0 === t ? e : null === t ? null : {
 	side: "b",
 	align: "end"
 }, Do = e.forwardRef((t, n) => {
-	const { selection: o, getContentBounds: r, getRegionBounds: l, scrollIntoView: i, singleStyle: s, multiStyle: a, multiAnchorStyle: c, singleAnchorStyle: d, removePreviewStyle: u, insertBarStyle: g, isDropRefused: h, moveSourceStyle: f, singleLayer: p, multiLayer: m, enabledMove: y, onMove: b, onMoveStart: E, onMoveUpdate: I, onMoveEnd: C, moveCursor: R, enableFill: M, snapFillDestination: P, onFill: k, onFillStart: D, onFillPreview: T, onFillEnd: z, onFillMenu: O, resolveFillExtent: L, onEdgeDoubleClick: N, onSelectionEnd: B, onDragModeChange: F, renderTip: A, tipPlacement: V, disableKeyboard: H, anchorHole: K = !0, ..._ } = t, j = $(o, (e) => e.getSelection()), Y = vo(o, { onSelectionEnd: B }), q = e.useRef(F);
-	q.current = F, e.useEffect(() => {
+	const { selection: o, getContentBounds: r, getRegionBounds: l, scrollIntoView: i, singleStyle: s, multiStyle: a, multiAnchorStyle: c, singleAnchorStyle: d, removePreviewStyle: u, insertBarStyle: g, isDropRefused: h, moveSourceStyle: f, singleLayer: p, multiLayer: m, enabledMove: y, onMove: b, onMoveStart: E, onMoveUpdate: I, onMoveEnd: C, moveCursor: R, enableFill: M, snapFillDestination: P, onFill: k, onFillStart: D, onFillPreview: T, onFillEnd: $, onFillMenu: z, resolveFillExtent: L, onEdgeDoubleClick: N, onSelectionEnd: F, onDragModeChange: B, renderTip: A, tipPlacement: V, disableKeyboard: H, anchorHole: K = !0, ..._ } = t, j = O(o, (e) => e.getSelection()), Y = vo(o, { onSelectionEnd: F }), q = e.useRef(B);
+	q.current = B, e.useEffect(() => {
 		q.current?.(Y.dragMode);
 	}, [Y.dragMode]);
 	const [Z, J] = e.useState(null), Q = Je(), ee = e.useRef(o);
@@ -4087,20 +4096,20 @@ var Mo = (e, t) => void 0 === t ? e : null === t ? null : {
 		getRegionBounds: (e) => oe.current?.(e) ?? null
 	}), []);
 	e.useImperativeHandle(n, () => le, [le]);
-	const ie = !!j.ranges && j.ranges.length > 0, se = ie ? [...j.ranges] : [U.cellToRange(j.cell)], ae = se.length > 1, ce = j.rangeIndex ?? -1, de = ie ? ce >= 0 ? ce : se.length - 1 : 0, ue = Q.getRangeFromCell(j.cell), ge = U.unionRanges(se[de] ?? U.cellToRange(j.cell), ue), he = se.filter((e, t) => t !== de), fe = ae ? Po(fo, a) : Po(ho, s), pe = {
+	const ie = !!j.ranges && j.ranges.length > 0, se = ie ? [...j.ranges] : [U.cellToRange(j.cell)], ae = se.length > 1, ce = j.rangeIndex ?? -1, de = ie ? ce >= 0 ? ce : se.length - 1 : 0, ue = Q.getRangeFromCell(j.cell), ge = se[de] ?? U.cellToRange(j.cell), he = ue && U.isRangeWithinRange(ge, ue) ? ue : ge, fe = U.intersectRanges(ue, he) ?? U.cellToRange(j.cell), pe = se.filter((e, t) => t !== de), me = ae ? Po(fo, a) : Po(ho, s), we = {
 		...po,
 		...c
-	}, me = Po(mo, u), { refusedColor: we, ...xe } = {
+	}, xe = Po(mo, u), { refusedColor: ve, ...ye } = {
 		...wo,
 		...g
-	}, ve = null === f ? null : Po(xo, f), ye = (e, t) => {
+	}, be = null === f ? null : Po(xo, f), Se = (e, t) => {
 		const n = t.mods.shiftKey ? t.insert : null, o = t.mods.ctrlKey || t.mods.metaKey, r = n ? Cn(e, n, Q.getTotalRange()) : e, l = {
 			to: r,
 			copy: o,
 			insert: n?.axis
 		};
-		return l.refused = !!n && !o && (h ? h(ge, l) : U.isRefusedInsertCut(U.classifyInsertCut(ge, r, n.axis))), l;
-	}, be = (e) => {
+		return l.refused = !!n && !o && (h ? h(he, l) : U.isRefusedInsertCut(U.classifyInsertCut(he, r, n.axis))), l;
+	}, Ee = (e) => {
 		const t = o.getSelection(), n = t.ranges, r = !!n && n.length > 0, l = r ? void 0 !== t.rangeIndex && t.rangeIndex >= 0 && t.rangeIndex < n.length ? t.rangeIndex : n.length - 1 : 0, i = r ? n.map((t, n) => n === l ? e : t) : [e], s = U.isCellWithinRange(t.cell, e) ? t.cell : {
 			rowIndex: e.rowStart,
 			colIndex: e.colStart
@@ -4110,16 +4119,16 @@ var Mo = (e, t) => void 0 === t ? e : null === t ? null : {
 			ranges: i,
 			rangeIndex: l
 		});
-	}, Se = Z ?? ("extend" === Y.dragMode ? {
+	}, Ie = Z ?? ("extend" === Y.dragMode ? {
 		kind: "select",
-		range: ge
-	} : null), Ee = Se && A ? A(Se) : null, Ie = e.Children.map(ae ? m : p, (t) => {
+		range: he
+	} : null), Ce = Ie && A ? A(Ie) : null, Re = e.Children.map(ae ? m : p, (t) => {
 		if (!e.isValidElement(t)) return t;
 		const n = t.props;
 		return e.cloneElement(t, {
-			range: ge,
+			range: he,
 			onDragEnd: (e, t) => {
-				n.onDragEnd?.(e, t), be(e);
+				n.onDragEnd?.(e, t), Ee(e);
 			}
 		});
 	});
@@ -4132,43 +4141,43 @@ var Mo = (e, t) => void 0 === t ? e : null === t ? null : {
 			le.handleKey(e) && (e.preventDefault(), e.stopPropagation());
 		},
 		children: [
-			"move" === Z?.kind && !Z.drop.copy && ve && !U.isEqualRanges(Z.to, Z.from) && To(ve, Z.from, void 0, !1, "move-source"),
+			"move" === Z?.kind && !Z.drop.copy && be && !U.isEqualRanges(Z.to, Z.from) && To(be, Z.from, void 0, !1, "move-source"),
 			v(w, ae ? { children: [
-				he.map((t, n) => x(e.Fragment, { children: To(fe, t) }, `other-${n}`)),
-				To(fe, ge, K ? ue : void 0),
+				pe.map((t, n) => x(e.Fragment, { children: To(me, t) }, `other-${n}`)),
+				To(me, he, K ? fe : void 0),
 				x(tn, {
 					className: "anchor",
-					range: ue,
-					...pe
+					range: fe,
+					...we
 				})
-			] } : { children: [To(fe, ge, K ? ue : void 0), d && x(tn, {
+			] } : { children: [To(me, he, K ? fe : void 0), d && x(tn, {
 				className: "anchor",
-				range: ue,
+				range: fe,
 				...d
 			})] }),
 			!ae && y && x(Rn, {
 				className: "move-grip",
-				range: ge,
+				range: he,
 				grip: "edges",
 				dragCursor: R,
 				renderMove: (e, t) => {
-					const n = ye(e, t);
+					const n = Se(e, t);
 					return n.insert ? x(nn, {
 						range: n.to,
 						axis: n.insert,
-						...xe,
-						color: (n.refused ? we : void 0) ?? xe.color
-					}) : fe.border && x(tn, {
+						...ye,
+						color: (n.refused ? ve : void 0) ?? ye.color
+					}) : me.border && x(tn, {
 						className: "move-ghost",
 						range: n.to,
-						...fe.border,
+						...me.border,
 						animatedTransition: !0,
 						style: { opacity: .6 }
 					});
 				},
 				onEdgeDoubleClick: N,
 				onDragStart: (e, t, n) => {
-					const o = ye(e, n);
+					const o = Se(e, n);
 					E?.(e, t, o), J({
 						kind: "move",
 						from: e,
@@ -4177,10 +4186,10 @@ var Mo = (e, t) => void 0 === t ? e : null === t ? null : {
 					});
 				},
 				onDragMove: (e, t, n) => {
-					const o = ye(e, n);
-					I?.(ge, o.to, t, o), J({
+					const o = Se(e, n);
+					I?.(he, o.to, t, o), J({
 						kind: "move",
-						from: ge,
+						from: he,
 						to: o.to,
 						drop: o
 					});
@@ -4189,8 +4198,8 @@ var Mo = (e, t) => void 0 === t ? e : null === t ? null : {
 					e || (C?.(), J(null));
 				},
 				onDragEnd: (e, t, n) => {
-					const r = ye(e, n);
-					r.refused || (b?.(ge, r.to, t, r), o.modify({
+					const r = Se(e, n);
+					r.refused || (b?.(he, r.to, t, r), o.modify({
 						rowIndex: r.to.rowEnd,
 						colIndex: r.to.colEnd
 					}, {
@@ -4199,10 +4208,10 @@ var Mo = (e, t) => void 0 === t ? e : null === t ? null : {
 					}));
 				}
 			}),
-			!ae && M && x(On, {
-				range: ge,
+			!ae && M && x(zn, {
+				range: he,
 				snapDestination: P,
-				...fe.border,
+				...me.border,
 				onDragStart: (e, t) => {
 					D?.(e, t), J({
 						kind: "fill",
@@ -4211,41 +4220,41 @@ var Mo = (e, t) => void 0 === t ? e : null === t ? null : {
 					});
 				},
 				onDragMove: (e, t) => {
-					T?.(ge, e, t), J({
+					T?.(he, e, t), J({
 						kind: "fill",
-						template: ge,
+						template: he,
 						destination: e
 					});
 				},
 				onDragEnd: (e, t) => {
-					k?.(ge, e, t), be(e);
+					k?.(he, e, t), Ee(e);
 				},
-				onMenu: O ? (e, t, n) => {
-					O(ge, e, t, n);
+				onMenu: z ? (e, t, n) => {
+					z(he, e, t, n);
 				} : void 0,
 				onDragDone: () => {
-					z?.(), J(null);
+					$?.(), J(null);
 				},
 				onDoubleClick: L ? (e, t) => {
 					const n = L(e);
-					n && !U.isEqualRanges(n, e) && (k?.(e, n, t), be(n));
+					n && !U.isEqualRanges(n, e) && (k?.(e, n, t), Ee(n));
 				} : void 0
 			}),
-			Y.removePreview && To(me, Y.removePreview, void 0, !1, "remove-preview"),
-			Ie,
-			null != Ee && Se && x(Tt, {
+			Y.removePreview && To(xe, Y.removePreview, void 0, !1, "remove-preview"),
+			Re,
+			null != Ce && Ie && x(Tt, {
 				className: "gesture-tip",
-				anchor: { range: (Ce = Se, "move" === Ce.kind ? Ce.to : "fill" === Ce.kind ? Ce.destination : Ce.range) },
+				anchor: { range: (Me = Ie, "move" === Me.kind ? Me.to : "fill" === Me.kind ? Me.destination : Me.range) },
 				placement: V ?? ko,
 				offset: 8,
 				whenOff: "clamp",
 				open: !0,
 				style: { pointerEvents: "none" },
-				children: Ee
+				children: Ce
 			})
 		]
 	});
-	var Ce;
+	var Me;
 });
 Do.displayName = "SelectionLayer";
 var To = (e, t, n, o = !1, r = "range") => v(w, { children: [
@@ -4268,7 +4277,7 @@ var To = (e, t, n, o = !1, r = "range") => v(w, { children: [
 		range: t,
 		...e.border
 	})
-] }), $o = [
+] }), Oo = [
 	"#1a73e8",
 	"#d93025",
 	"#1e8e3e",
@@ -4276,19 +4285,19 @@ var To = (e, t, n, o = !1, r = "range") => v(w, { children: [
 	"#e37400",
 	"#12a4af",
 	"#d01884"
-], zo = Array.from({ length: I }, (e, t) => `var(--sxl-color-series-${t + 1}, ${$o[t]})`), Oo = "var(--sxl-color-primary, rgb(0, 120, 215))", Lo = (e, t, n) => ({
+], $o = Array.from({ length: I }, (e, t) => `var(--sxl-color-series-${t + 1}, ${Oo[t]})`), zo = "var(--sxl-color-primary, rgb(0, 120, 215))", Lo = (e, t, n) => ({
 	rowStart: Math.max(n.rowStart, Math.min(e.rowIndex, t.rowIndex)),
 	colStart: Math.max(n.colStart, Math.min(e.colIndex, t.colIndex)),
 	rowEnd: Math.min(n.rowEnd, Math.max(e.rowIndex, t.rowIndex)),
 	colEnd: Math.min(n.colEnd, Math.max(e.colIndex, t.colIndex))
-}), No = (e) => ({ stroke: zo.length ? zo[e % zo.length] : Oo }), Bo = (e) => {
-	const { selection: t, getRangeStyle: n = No, anchors: o = Pn, enabledMove: r, disableDraw: l, allowMulti: i = !0, size: s, animated: a, renderHandle: d, preserveFocus: u = !0, onDragActiveChange: g, rangeStyle: h = W.EmptyObject, className: m, ...w } = e, y = Je(), b = $(t, (e) => e.getSelection()), S = b.ranges ?? U.EmptyRanges, E = Math.min(Math.max(0, b.rangeIndex ?? S.length - 1), Math.max(0, S.length - 1)), [I, C] = p(null), [R, M] = p(null), [P, k] = p(!1), D = null !== R || P, T = f(g);
+}), No = (e) => ({ stroke: $o.length ? $o[e % $o.length] : zo }), Fo = (e) => {
+	const { selection: t, getRangeStyle: n = No, anchors: o = Pn, enabledMove: r, disableDraw: l, allowMulti: i = !0, size: s, animated: a, renderHandle: d, preserveFocus: u = !0, onDragActiveChange: g, rangeStyle: h = W.EmptyObject, className: m, ...w } = e, y = Je(), b = O(t, (e) => e.getSelection()), S = b.ranges ?? U.EmptyRanges, E = Math.min(Math.max(0, b.rangeIndex ?? S.length - 1), Math.max(0, S.length - 1)), [I, C] = p(null), [R, M] = p(null), [P, k] = p(!1), D = null !== R || P, T = f(g);
 	T.current = g, c(() => {
 		T.current?.(D, R);
 	}, [D, R]), c(() => () => {
 		T.current?.(!1, null);
 	}, []);
-	const z = R ?? I, O = (e, t) => C((n) => t ? e : n === e ? null : n), L = (e, n) => {
+	const $ = R ?? I, z = (e, t) => C((n) => t ? e : n === e ? null : n), L = (e, n) => {
 		const o = t.getSelection(), r = o.ranges ?? U.EmptyRanges, l = e < r.length ? r.map((t, o) => o === e ? {
 			...t,
 			...n
@@ -4308,7 +4317,7 @@ var To = (e, t, n, o = !1, r = "range") => v(w, { children: [
 			...n,
 			rangeIndex: e
 		});
-	}, B = fn((e, t) => {
+	}, F = fn((e, t) => {
 		if (0 !== t.button) return null;
 		const n = (b.rangeIndex ?? -1) >= 0 ? b.rangeIndex : -1;
 		if (t.shiftKey && n >= 0 && S[n]) {
@@ -4328,8 +4337,8 @@ var To = (e, t, n, o = !1, r = "range") => v(w, { children: [
 			end: () => k(!1),
 			captureEvents: !1
 		};
-	}), F = S.map((e, t) => n(t, t === E)), A = [];
-	for (let e = 0; e < F.length; e++) F[e] && A.push(e);
+	}), B = S.map((e, t) => n(t, t === E)), A = [];
+	for (let e = 0; e < B.length; e++) B[e] && A.push(e);
 	return v(nt, {
 		...w,
 		children: [
@@ -4337,18 +4346,18 @@ var To = (e, t, n, o = !1, r = "range") => v(w, { children: [
 				fill: !0,
 				className: H(m, "ranges-picker-draw"),
 				onPointerDown: (e) => {
-					e.stopPropagation(), u && e.preventDefault(), B.onPointerDown(e);
+					e.stopPropagation(), u && e.preventDefault(), F.onPointerDown(e);
 				},
-				onPointerMove: B.onPointerMove,
+				onPointerMove: F.onPointerMove,
 				onPointerUp: (e) => {
-					e.stopPropagation(), B.onPointerUp(e);
+					e.stopPropagation(), F.onPointerUp(e);
 				}
 			}),
 			r && A.map((e) => x(Rn, {
 				range: S[e],
 				grip: "edges",
 				preserveFocus: u,
-				onHoverChange: (t) => O(e, t),
+				onHoverChange: (t) => z(e, t),
 				onDragStateChange: (t) => {
 					t && N(e), M(t ? e : null);
 				},
@@ -4356,8 +4365,8 @@ var To = (e, t, n, o = !1, r = "range") => v(w, { children: [
 				onDragEnd: (t) => L(e, t)
 			}, `move-${e}`)),
 			A.map((e) => {
-				const t = e === E, n = e === z, r = ((e, t, n) => {
-					const o = e.stroke ?? h.stroke ?? Oo;
+				const t = e === E, n = e === $, r = ((e, t, n) => {
+					const o = e.stroke ?? h.stroke ?? zo;
 					return {
 						...h,
 						...e,
@@ -4366,7 +4375,7 @@ var To = (e, t, n, o = !1, r = "range") => v(w, { children: [
 						alignWidth: n ? 3 : e.alignWidth ?? h.alignWidth ?? 2,
 						...a && t ? { animatedStroke: !0 } : void 0
 					};
-				})(F[e], t, n);
+				})(B[e], t, n);
 				return x(Dn, {
 					range: S[e],
 					anchors: o,
@@ -4374,7 +4383,7 @@ var To = (e, t, n, o = !1, r = "range") => v(w, { children: [
 					...r,
 					renderHandle: d,
 					preserveFocus: u,
-					onHandleHoverChange: (t) => O(e, t),
+					onHandleHoverChange: (t) => z(e, t),
 					onDragMove: (t) => L(e, t),
 					onDragStart: () => {
 						N(e), M(e);
@@ -4387,8 +4396,8 @@ var To = (e, t, n, o = !1, r = "range") => v(w, { children: [
 		]
 	});
 };
-Bo.displayName = "RangesPickerLayer";
-var Fo = 0, Ao = class {
+Fo.displayName = "RangesPickerLayer";
+var Bo = 0, Ao = class {
 	constructor(e, t = {}) {
 		this.listeners = /* @__PURE__ */ new Set(), this.commitListeners = /* @__PURE__ */ new Set(), this.cancelListeners = /* @__PURE__ */ new Set(), this.editors = /* @__PURE__ */ new Set(), this.activeEditor = null, this.activeEditorId = null, this.auxState = null, this.commitFn = e.commit, this.onCommitError = e.onCommitError, this.state = {
 			mode: t.mode ?? "enter",
@@ -4397,7 +4406,7 @@ var Fo = 0, Ao = class {
 			dirty: t.dirty,
 			initialSelection: t.initialSelection ?? null,
 			autoFocus: t.autoFocus ?? !0,
-			token: ++Fo
+			token: ++Bo
 		};
 	}
 	getState() {
@@ -4516,14 +4525,14 @@ var Fo = 0, Ao = class {
 	return u(() => {
 		const t = n.current;
 		null !== t && (n.current = null, e.current?.setSelectionRange(t, t));
-	}, [t]), z((e) => {
+	}, [t]), $((e) => {
 		n.current = e;
 	}, []);
 }, Ko = (e, t) => {
 	if (e.which === b.Enter && t.ctrlKey) return t.shiftKey ? { arrayFixed: !0 } : { broadcast: !0 };
 }, _o = (e) => {
 	const { mode: t, value: n, onDirtyChange: o, onModeChange: r, onCommit: l, onCancel: i, onNavigate: s, onTraverse: a, setCaret: c } = e;
-	return z((e) => {
+	return $((e) => {
 		const d = e.nativeEvent;
 		if (d.isComposing) return void e.stopPropagation();
 		if (e.which === b.Escape) return e.preventDefault(), e.stopPropagation(), void i();
@@ -4720,91 +4729,97 @@ var Fo = 0, Ao = class {
 	})] });
 };
 function Yo(e) {
-	const { editable: t, renderEditor: n, alignment: o = "left", background: r = "var(--sxl-color-base-100, rgb(255, 255, 255))", borderColor: l = "var(--sxl-color-primary, rgb(33, 115, 70))", borderWidth: i = 2, zIndex: s, className: a, style: d, ...u } = e, g = Qe(), h = $(t, (e) => e.getSession()), f = B(h, (e) => e.getState()), [m, w] = p(null), v = z((e) => {
+	const { editable: t, renderEditor: n, alignment: o = "left", background: r = "var(--sxl-color-base-100, rgb(255, 255, 255))", borderColor: l = "var(--sxl-color-primary, rgb(33, 115, 70))", borderWidth: i = 2, zIndex: s, className: a, style: d, ...u } = e, g = Qe(), h = O(t, (e) => e.getSession()), f = F(h, (e) => e.getState()), [m, w] = p(null), v = $((e) => {
 		w((t) => t && t.width === e.width && t.height === e.height ? t : e);
-	}, []), y = z((e) => {
-		if (t.getSession()) return;
-		const n = t.getAnchor().getCoords();
-		if (!n) return;
-		const o = Vo(e.nativeEvent);
-		o && ("Process" !== e.nativeEvent.key && 229 !== e.nativeEvent.keyCode && e.preventDefault(), e.stopPropagation(), t.startEdit(n, o));
-	}, [t]), b = z((e) => {
-		if (t.getSession()) return;
-		const n = g?.getCellFromPointer(e.clientX, e.clientY) ?? t.getAnchor().getCoords();
-		n && t.startEdit(n, { mode: "edit" });
-	}, [g, t]), S = z((e) => {
+	}, []), y = $((e) => {
 		const n = t.commit(e);
 		return n && g?.focus(), n;
-	}, [t, g]), E = z(() => {
+	}, [t, g]), b = $(() => {
 		t.cancel(), g?.focus();
 	}, [t, g]);
 	c(() => {
 		f && g && g.scrollCellCoordsIntoView(f.coords);
 	}, [f?.token]);
-	const I = f ? f.coords : t.getAnchor().getCoords();
-	let C = null, R = !1, M = !1;
-	if (g && I) {
-		const e = g.getRangeFromCell(I);
-		if (M = null !== g.toClipBounds(g.getBoundsFromRange({
+	const S = f ? f.coords : t.getAnchor().getCoords();
+	let E = null, I = !1, C = !1;
+	if (g && S) {
+		const e = g.getRangeFromCell(S);
+		if (C = null !== g.toClipBounds(g.getBoundsFromRange({
 			rowStart: e.rowStart,
 			colStart: e.colStart,
 			rowEnd: e.rowStart,
 			colEnd: e.colStart
 		})), f) {
-			const e = Uo(g, I, m, o, i);
-			C = e?.bounds ?? null, R = e?.inView ?? !1;
-		} else C = g.getBoundsFromRange(e);
+			const e = Uo(g, S, m, o, i);
+			E = e?.bounds ?? null, I = e?.inView ?? !1;
+		} else E = g.getBoundsFromRange(e);
 	}
-	let P = null;
-	if (g && I) {
-		const e = g.getBoundsFromRange(g.getRangeFromCell(I)), t = g.getZoom() || 1;
-		e && (P = {
+	let R = null;
+	if (g && S) {
+		const e = g.getBoundsFromRange(g.getRangeFromCell(S)), t = g.getZoom() || 1;
+		e && (R = {
 			width: e.width / t,
 			height: e.height / t
 		});
 	}
-	const k = !!f && !!C && R, D = {
+	const M = !!f && !!E && I, P = {
 		open: !!f,
 		mode: f?.mode ?? "enter",
 		coords: f?.coords ?? null,
 		clean: f?.clean ?? null,
 		dirty: f?.dirty,
 		token: f?.token ?? 0,
-		autoFocus: (f?.autoFocus ?? !0) && k && M,
+		autoFocus: (f?.autoFocus ?? !0) && M && C,
 		initialSelection: f?.initialSelection,
 		zoom: g?.getZoom() ?? 1,
-		cellSize: P,
+		cellSize: R,
 		onDirtyChange: (e) => h?.setDirty(e),
 		onModeChange: (e) => h?.setMode(e),
-		onCommit: S,
-		onCancel: E,
+		onCommit: y,
+		onCancel: b,
 		onNaturalSize: v
-	}, T = "function" == typeof r ? (I ? r(I) : void 0) ?? "transparent" : r;
+	}, k = "function" == typeof r ? (S ? r(S) : void 0) ?? "transparent" : r;
+	return x(nt, { children: E ? x(st, {
+		...u,
+		className: H(a, "editor"),
+		bounds: E,
+		alignWidth: i,
+		keepMounted: !0,
+		style: {
+			...d,
+			display: "flex",
+			overflow: "hidden",
+			background: k,
+			borderColor: l,
+			boxShadow: M ? "rgba(60,64,67,.35) 2px 2px 6px 3px" : "none",
+			opacity: M ? 1 : 0,
+			pointerEvents: M ? "auto" : "none"
+		},
+		children: n ? n(P) : x(Xo, { ...P })
+	}) : null });
+}
+function qo(e) {
+	const { editable: t } = e, n = Qe();
 	return x(nt, {
-		onKeyDown: y,
-		onDoubleClick: b,
-		children: C ? x(st, {
-			...u,
-			className: H(a, "editor"),
-			bounds: C,
-			alignWidth: i,
-			keepMounted: !0,
-			style: {
-				...d,
-				display: "flex",
-				overflow: "hidden",
-				background: T,
-				borderColor: l,
-				boxShadow: k ? "rgba(60,64,67,.35) 2px 2px 6px 3px" : "none",
-				opacity: k ? 1 : 0,
-				pointerEvents: k ? "auto" : "none"
-			},
-			children: n ? n(D) : x(Xo, { ...D })
-		}) : null
+		className: "editor-start",
+		onKeyDown: $((e) => {
+			if (t.getSession()) return;
+			const o = n?.getElement();
+			if (o && e.target !== o) return;
+			const r = t.getAnchor().getCoords();
+			if (!r) return;
+			const l = Vo(e.nativeEvent);
+			l && ("Process" !== e.nativeEvent.key && 229 !== e.nativeEvent.keyCode && e.preventDefault(), e.stopPropagation(), t.startEdit(r, l));
+		}, [t, n]),
+		onDoubleClick: $((e) => {
+			if (t.getSession()) return;
+			const o = n?.getCellFromPointer(e.clientX, e.clientY) ?? t.getAnchor().getCoords();
+			o && t.startEdit(o, { mode: "edit" });
+		}, [n, t])
 	});
 }
-function qo(e) {
-	const { editable: t, renderEditor: n, idleClean: o = null, mapClean: r, editorId: l, readOnly: i, className: s, style: a } = e, c = $(t, (e) => e.getSession()), d = B(c, (e) => e.getState()), u = d?.clean ?? o, g = r ? r(u) : u, h = z((e) => t.commit(e), [t]), f = z(() => t.cancel(), [t]), p = z(() => {
+function Zo(e) {
+	const { editable: t, renderEditor: n, idleClean: o = null, mapClean: r, editorId: l, readOnly: i, className: s, style: a } = e, c = O(t, (e) => e.getSession()), d = F(c, (e) => e.getState()), u = d?.clean ?? o, g = r ? r(u) : u, h = $((e) => t.commit(e), [t]), f = $(() => t.cancel(), [t]), p = $(() => {
 		i || (t.getSession() || t.startEdit(t.getAnchor().getCoords(), {
 			mode: "edit",
 			autoFocus: !1
@@ -4836,8 +4851,8 @@ function qo(e) {
 		children: n ? n(m) : x(Xo, { ...m })
 	});
 }
-Xo.displayName = "DefaultEditorInput", qo.displayName = "EditorDiv";
-var Zo = "ew-resize", Jo = "ns-resize", Qo = i(r((e, t) => {
+Xo.displayName = "DefaultEditorInput", Zo.displayName = "EditorDiv";
+var Jo = "ew-resize", Qo = "ns-resize", er = i(r((e, t) => {
 	const { axis: n, index: o, className: r, style: l, disabled: i = !1, disabledResize: s = !1, isNextHidden: a, isHidden: c, isSelected: d, isSelectedAll: u, showTouchDivider: g, bounds: h, onPointerDown: f, onAutoFit: p, ...m } = e, w = Je(), y = n === X.Column, b = 1 / E.getDevicePixelRatio(), S = d || u, I = S ? "color-mix(in srgb, var(--sxl-color-primary, rgb(33, 115, 70)) 35%, var(--sxl-color-base-300, rgb(171, 171, 171)))" : "var(--sxl-color-base-300, rgb(171, 171, 171))", C = "var(--sxl-color-base-100, #f5f5f5)", R = "touch" === E.detectIt().primaryInput;
 	let M = y ? 14 : 8;
 	const P = w.getZoom();
@@ -4858,7 +4873,7 @@ var Zo = "ew-resize", Jo = "ns-resize", Qo = i(r((e, t) => {
 			position: "absolute",
 			overflow: "visible",
 			pointerEvents: "auto",
-			cursor: i || s || R ? void 0 : y ? Zo : Jo,
+			cursor: i || s || R ? void 0 : y ? Jo : Qo,
 			...l
 		},
 		...m,
@@ -4902,8 +4917,8 @@ var Zo = "ew-resize", Jo = "ns-resize", Qo = i(r((e, t) => {
 			} })
 		}) : null]
 	});
-})), er = (e) => x(Qo, { ...e }), tr = i(r((e, t) => {
-	const { axis: n, index: o, disabled: r = !1, disabledResize: l = !1, resizeThreshold: i = 1, renderDivider: s = er, onDividerMouseDown: a, onDividerResizeStart: c, onDividerResize: d, onDividerResizeEnd: u, onDividerMouseUp: g, onDividerAutoFit: h, onPointerDown: m, ...y } = e, b = Je(), S = z(m, [m]), I = z(h, [h]), C = n === X.Column;
+})), tr = (e) => x(er, { ...e }), nr = i(r((e, t) => {
+	const { axis: n, index: o, disabled: r = !1, disabledResize: l = !1, resizeThreshold: i = 1, renderDivider: s = tr, onDividerMouseDown: a, onDividerResizeStart: c, onDividerResize: d, onDividerResizeEnd: u, onDividerMouseUp: g, onDividerAutoFit: h, onPointerDown: m, ...y } = e, b = Je(), S = $(m, [m]), I = $(h, [h]), C = n === X.Column;
 	let R = C ? b.getVisibleColumns() : b.getVisibleRows(), M = null;
 	R.length > 0 && (M = C ? b.getBoundsFromRange({
 		rowStart: 0,
@@ -4916,11 +4931,11 @@ var Zo = "ew-resize", Jo = "ns-resize", Qo = i(r((e, t) => {
 		colStart: 0,
 		colEnd: 0
 	}), M = b.toClipBounds(M, -10));
-	const P = f(null), [k, D] = p(null), T = (e, t) => C ? e.clientX - t.clientX : e.clientY - t.clientY, $ = b.getMetrics(), O = C ? $.getColOffset(o + 1) : $.getRowOffset(o + 1), N = E.getDevicePixelRatio(), B = 1 / N, A = E.snapLineCenter(O, B, N) - B / 2, V = F({
+	const P = f(null), [k, D] = p(null), T = (e, t) => C ? e.clientX - t.clientX : e.clientY - t.clientY, O = b.getMetrics(), z = C ? O.getColOffset(o + 1) : O.getRowOffset(o + 1), N = E.getDevicePixelRatio(), F = 1 / N, A = E.snapLineCenter(z, F, N) - F / 2, V = B({
 		processTouch: !0,
 		onPointerDown: (e) => {
 			if (S?.(e), !r && !l) {
-				const e = C ? $.getColOffset(o) : $.getRowOffset(o), t = O - e;
+				const e = C ? O.getColOffset(o) : O.getRowOffset(o), t = z - e;
 				P.current = {
 					isResizing: !1,
 					startSize: t,
@@ -4950,7 +4965,7 @@ var Zo = "ew-resize", Jo = "ns-resize", Qo = i(r((e, t) => {
 				isResizing: !0
 			}, D(P.current), P.current.onDividerResizeStart?.(P.current.index, Math.max(0, P.current.startSize + o))), e.stopPropagation(), e.preventDefault();
 		}
-	}), K = z(() => {
+	}), K = $(() => {
 		I?.(o);
 	}, [o]), { getPortalContainer: _ } = L();
 	if (!M) return;
@@ -4969,7 +4984,7 @@ var Zo = "ew-resize", Jo = "ns-resize", Qo = i(r((e, t) => {
 	let U = null;
 	return k && k.isResizing && k.index === o && (U = q(x("div", { style: {
 		position: "absolute",
-		cursor: C ? Zo : Jo,
+		cursor: C ? Jo : Qo,
 		left: 0,
 		top: 0,
 		width: "100%",
@@ -4989,26 +5004,26 @@ var Zo = "ew-resize", Jo = "ns-resize", Qo = i(r((e, t) => {
 		children: W
 	})] });
 }));
-tr.displayName = "HeaderDividerAnchor";
-var nr = (e, t, n) => t === X.Column ? {
+nr.displayName = "HeaderDividerAnchor";
+var or = (e, t, n) => t === X.Column ? {
 	rowIndex: n.rowStart,
 	colIndex: e.colIndex
 } : {
 	rowIndex: e.rowIndex,
 	colIndex: n.colStart
-}, or = (e, t, n) => t === X.Column ? {
+}, rr = (e, t, n) => t === X.Column ? {
 	rowIndex: n.rowEnd,
 	colIndex: e.colIndex
 } : {
 	rowIndex: e.rowIndex,
 	colIndex: n.colEnd
-}, rr = (e, t, n) => t === X.Column ? {
+}, lr = (e, t, n) => t === X.Column ? {
 	rowIndex: n.rowStart,
 	colIndex: e.colIndex
 } : {
 	rowIndex: e.rowIndex,
 	colIndex: n.colStart
-}, lr = (e, t, n, o) => n === X.Column ? {
+}, ir = (e, t, n, o) => n === X.Column ? {
 	rowStart: o.rowStart,
 	rowEnd: o.rowEnd,
 	colStart: Math.min(e.colIndex, t.colIndex),
@@ -5018,7 +5033,7 @@ var nr = (e, t, n) => t === X.Column ? {
 	colEnd: o.colEnd,
 	rowStart: Math.min(e.rowIndex, t.rowIndex),
 	rowEnd: Math.max(e.rowIndex, t.rowIndex)
-}, ir = (e, t, n) => {
+}, sr = (e, t, n) => {
 	let o = null, r = null, l = 0;
 	const i = () => t.getAllPanes()[_.Center] ?? t, s = (t, n, o) => {
 		if (!e) return;
@@ -5061,7 +5076,7 @@ var nr = (e, t, n) => t === X.Column ? {
 		let s = null;
 		return t === X.Column ? e.x >= r.right - 24 && l.colEnd < o.colEnd ? s = { colIndex: l.colEnd + 1 } : e.x <= r.left + 24 && l.colStart > o.colStart && (s = { colIndex: l.colStart - 1 }) : e.y >= r.bottom - 24 && l.rowEnd < o.rowEnd ? s = { rowIndex: l.rowEnd + 1 } : e.y <= r.top + 24 && l.rowStart > o.rowStart && (s = { rowIndex: l.rowStart - 1 }), !!s && (c(s), !0);
 	}, u = (e) => {
-		const { axis: t, entireRange: c, replaceActive: d = !1 } = n(), u = lr(o ?? e, e, t, c), g = r ?? rr(e, t, i().getVisibleRange());
+		const { axis: t, entireRange: c, replaceActive: d = !1 } = n(), u = ir(o ?? e, e, t, c), g = r ?? lr(e, t, i().getVisibleRange());
 		d ? a(l, u, g) : s(u, g, "replace");
 	};
 	return gn(t, (t, g) => {
@@ -5071,11 +5086,11 @@ var nr = (e, t, n) => t === X.Column ? {
 		const { axis: p, entireRange: m, allowMulti: w = !0, replaceActive: x = !1, preserveFocus: v = !1, onPointerDownInterceptor: y, onDragStart: b, onDragEnd: S, onPointerUp: E } = n();
 		if (!1 === y?.(g, t)) return null;
 		x && g.stopPropagation(), v && h && g.preventDefault(), b?.();
-		const I = rr(t, p, i().getVisibleRange()), C = g.shiftKey, R = (g.ctrlKey || g.metaKey) && w;
+		const I = lr(t, p, i().getVisibleRange()), C = g.shiftKey, R = (g.ctrlKey || g.metaKey) && w;
 		if (x) {
 			const n = e.getSelection(), i = n.ranges ?? [], s = n.rangeIndex ?? -1;
-			C && o ? (l = s >= 0 ? s : Math.max(0, i.length - 1), a(l, lr(o, t, p, m), r ?? I)) : (o = t, r = I, l = R || s < 0 ? i.length : s, a(l, lr(t, t, p, m), I));
-		} else C && o ? s(lr(o, t, p, m), r ?? I, "replace") : R ? (o = t, r = I, s(lr(t, t, p, m), I, "append")) : (o = t, r = I, s(lr(t, t, p, m), I, "clear"));
+			C && o ? (l = s >= 0 ? s : Math.max(0, i.length - 1), a(l, ir(o, t, p, m), r ?? I)) : (o = t, r = I, l = R || s < 0 ? i.length : s, a(l, ir(t, t, p, m), I));
+		} else C && o ? s(ir(o, t, p, m), r ?? I, "replace") : R ? (o = t, r = I, s(ir(t, t, p, m), I, "append")) : (o = t, r = I, s(ir(t, t, p, m), I, "clear"));
 		return ((e) => {
 			c(n().axis === X.Column ? { colIndex: e.colIndex } : { rowIndex: e.rowIndex });
 		})(t), {
@@ -5091,16 +5106,16 @@ var nr = (e, t, n) => t === X.Column ? {
 			captureEvents: x
 		};
 	});
-}, sr = (e, t) => {
+}, ar = (e, t) => {
 	const n = Je(), o = f(t);
 	o.current = t;
-	const r = g(() => ir(e, n, () => o.current), [e, n]);
+	const r = g(() => sr(e, n, () => o.current), [e, n]);
 	return c(() => () => r.dispose(), [r]), {
 		onPointerDown: r.onPointerDown,
 		onPointerMove: r.onPointerMove,
 		onPointerUp: r.onPointerUp
 	};
-}, ar = (e) => null == e ? [] : Array.isArray(e) ? e : [e], cr = i(r((e, t) => {
+}, cr = (e) => null == e ? [] : Array.isArray(e) ? e : [e], dr = i(r((e, t) => {
 	const { rowCount: n = 1, columnCount: o = 1, getRowHeight: r, getColumnWidth: l, metrics: i, renderCells: a, renderBorders: c, showGridLines: d = !0, gridLineColor: u, propsGridLineRows: f, propsGridLineColumns: p, getVisibleCells: m, hiddenCellAt: w, renderBelow: v, children: y, ...b } = e, S = le({
 		rowCount: n,
 		columnCount: o,
@@ -5117,12 +5132,12 @@ var nr = (e, t, n) => t === X.Column ? {
 			propsColumns: p,
 			getVisibleCells: m,
 			hiddenCellAt: w
-		}, "__gridlines")), e.push(...ar(v)), e.push(...ar(c)), a && e.push(x(jn, {
+		}, "__gridlines")), e.push(...cr(v)), e.push(...cr(c)), a && e.push(x(jn, {
 			renderCell: a,
 			getVisibleCells: m,
 			hiddenCellAt: w,
 			cacheToken: R
-		}, "__cells")), e.push(...ar(y)), e;
+		}, "__cells")), e.push(...cr(y)), e;
 	}, [
 		d,
 		u,
@@ -5145,17 +5160,17 @@ var nr = (e, t, n) => t === X.Column ? {
 		children: k
 	});
 }));
-cr.displayName = "Grid";
-var dr, ur = {
+dr.displayName = "Grid";
+var ur, gr = {
 	fill: { fill: "color-mix(in srgb, var(--sxl-color-primary, rgb(0, 120, 215)) 14%, transparent)" },
 	border: null,
 	inner: null
-}, gr = {
+}, hr = {
 	stroke: "var(--sxl-color-primary, rgb(0, 120, 215))",
 	alignWidth: 1,
 	inset: 1
-}, hr = r(function(e, t) {
-	const { itemCount: n, renderCell: o, getVisibleCells: r, itemHeight: l = 24, contentWidth: i, selection: s, propsLayer: a, autoFocus: d, showScrollbar: u = "auto", scrollTo: h, viewport: p, cacheToken: m, className: w, style: y, children: b, ...S } = e, E = g(() => new P(), []), I = p ?? E, R = $(I, (e) => e.getMetrics()), M = "auto" === u ? R.totalHeight > R.height : u, k = f(null);
+}, fr = r(function(e, t) {
+	const { itemCount: n, renderCell: o, getVisibleCells: r, itemHeight: l = 24, contentWidth: i, selection: s, propsLayer: a, autoFocus: d, showScrollbar: u = "auto", scrollTo: h, viewport: p, cacheToken: m, className: w, style: y, children: b, ...S } = e, E = g(() => new P(), []), I = p ?? E, R = O(I, (e) => e.getMetrics()), M = "auto" === u ? R.totalHeight > R.height : u, k = f(null);
 	c(() => {
 		d && k.current?.focus();
 	}, [d]), c(() => {
@@ -5177,14 +5192,14 @@ var dr, ur = {
 		colStart: 0,
 		rowEnd: Math.max(0, n - 1),
 		colEnd: 0
-	}) }), [n]), T = s ?? D, [z, { width: O }] = ne(), [L, { width: N }] = ne(), B = N > 0 && O > 0 ? Math.max(0, N - O) : 0, F = g(() => oe([L, t]), [L, t]), A = le({
+	}) }), [n]), T = s ?? D, [$, { width: z }] = ne(), [L, { width: N }] = ne(), F = N > 0 && z > 0 ? Math.max(0, N - z) : 0, B = g(() => oe([L, t]), [L, t]), A = le({
 		rowCount: n,
 		columnCount: 1,
 		getRowHeight: l,
-		getColumnWidth: O || i || R.width || 0
+		getColumnWidth: z || i || R.width || 0
 	});
 	return x("div", {
-		ref: F,
+		ref: B,
 		className: H("list-surface", w),
 		style: {
 			position: "relative",
@@ -5193,7 +5208,7 @@ var dr, ur = {
 			maxWidth: "100%",
 			maxHeight: "100%",
 			...y,
-			...null != i ? { width: i + B } : null
+			...null != i ? { width: i + F } : null
 		},
 		...S,
 		children: x(C, {
@@ -5205,7 +5220,7 @@ var dr, ur = {
 				height: "100%"
 			},
 			children: x("div", {
-				ref: z,
+				ref: $,
 				style: {
 					width: "100%",
 					height: "100%"
@@ -5224,9 +5239,9 @@ var dr, ur = {
 						x(Do, {
 							selection: T,
 							anchorHole: !1,
-							singleStyle: ur,
-							singleAnchorStyle: gr,
-							multiAnchorStyle: gr
+							singleStyle: gr,
+							singleAnchorStyle: hr,
+							multiAnchorStyle: hr
 						}, "__selection"),
 						x(jn, {
 							renderCell: o,
@@ -5239,7 +5254,7 @@ var dr, ur = {
 			})
 		})
 	});
-}), fr = r(function(e, t) {
+}), pr = r(function(e, t) {
 	const { itemCount: n, renderItem: o, itemHeight: r, selection: l, onKeyDown: i, cacheToken: a, scrollTo: c, autoFocus: d, viewport: u, className: h, style: f, children: p, ...m } = e, w = N(t, () => ({ isList: () => !0 }), []), v = s((e) => {
 		const { key: t, style: n, range: r, cell: l } = e, i = r?.rowStart ?? l.rowIndex;
 		return x("div", {
@@ -5259,7 +5274,7 @@ var dr, ur = {
 			children: o(i)
 		}, t);
 	}, [o]), y = g(() => i ? { onKeyDown: i } : void 0, [i]);
-	return x(hr, {
+	return x(fr, {
 		ref: w,
 		className: H("list", h),
 		style: f,
@@ -5274,7 +5289,7 @@ var dr, ur = {
 		viewport: u,
 		...m
 	});
-}), pr = (e, t) => x("input", {
+}), mr = (e, t) => x("input", {
 	type: "checkbox",
 	checked: e,
 	ref: (e) => {
@@ -5283,13 +5298,13 @@ var dr, ur = {
 	readOnly: !0,
 	tabIndex: -1,
 	style: { margin: 0 }
-}), mr = r(function(e, t) {
-	const { itemCount: n, isChecked: o, onCheckedChange: r, renderValue: l, renderCheckbox: i = pr, renderDivider: a, selectAllLabel: c, itemHeight: d, selection: u, cacheToken: p, autoFocus: m, viewport: y, className: b, style: S, children: E, ...I } = e, C = g(() => new ro({ getBounds: () => ({
+}), wr = r(function(e, t) {
+	const { itemCount: n, isChecked: o, onCheckedChange: r, renderValue: l, renderCheckbox: i = mr, renderDivider: a, selectAllLabel: c, itemHeight: d, selection: u, cacheToken: p, autoFocus: m, viewport: y, className: b, style: S, children: E, ...I } = e, C = g(() => new ro({ getBounds: () => ({
 		rowStart: 0,
 		colStart: 0,
 		rowEnd: Math.max(0, n - 1),
 		colEnd: 0
-	}) }), [n]), R = u ?? C, M = z(() => {
+	}) }), [n]), R = u ?? C, M = $(() => {
 		if (0 === n) return;
 		const e = !o(R.getSelection().cell.rowIndex);
 		r(((e) => {
@@ -5301,14 +5316,14 @@ var dr, ur = {
 		n,
 		o,
 		r
-	]), P = f(null), [, k] = h((e) => e + 1, 0), D = z(() => 0 === n ? -1 : R.getSelection().cell.rowIndex, [R, n]), T = z((e) => {
+	]), P = f(null), [, k] = h((e) => e + 1, 0), D = $(() => 0 === n ? -1 : R.getSelection().cell.rowIndex, [R, n]), T = $((e) => {
 		if (0 === n) return;
 		const t = Math.min(Math.max(0, R.getSelection().cell.rowIndex + e), n - 1);
 		R.setSelection({ cell: {
 			rowIndex: t,
 			colIndex: 0
 		} }), P.current = { row: t }, k();
-	}, [R, n]), $ = N(t, () => ({
+	}, [R, n]), O = N(t, () => ({
 		isCheckboxList: () => !0,
 		getHighlightIndex: D,
 		moveHighlight: T,
@@ -5317,7 +5332,7 @@ var dr, ur = {
 		D,
 		T,
 		M
-	]), O = s((e) => v("div", {
+	]), z = s((e) => v("div", {
 		style: {
 			display: "flex",
 			alignItems: "center",
@@ -5350,7 +5365,7 @@ var dr, ur = {
 		i
 	]), L = s((e) => {
 		" " !== e.key && "Enter" !== e.key || (e.preventDefault(), e.stopPropagation(), M());
-	}, [M]), { allChecked: B, someChecked: F } = g(() => {
+	}, [M]), { allChecked: F, someChecked: B } = g(() => {
 		if (null == c || 0 === n) return {
 			allChecked: !1,
 			someChecked: !1
@@ -5368,7 +5383,7 @@ var dr, ur = {
 		p
 	]);
 	return v("div", {
-		ref: $,
+		ref: O,
 		className: H("checkbox-list", b),
 		style: {
 			display: "flex",
@@ -5387,20 +5402,20 @@ var dr, ur = {
 				cursor: "pointer"
 			},
 			onMouseDown: (e) => {
-				e.preventDefault(), r(Array.from({ length: n }, (e, t) => t), !B);
+				e.preventDefault(), r(Array.from({ length: n }, (e, t) => t), !F);
 			},
 			children: [x("div", {
 				style: {
 					display: "inline-flex",
 					pointerEvents: "none"
 				},
-				children: i(B, F)
+				children: i(F, B)
 			}), c]
-		}), a?.()] }), x(fr, {
+		}), a?.()] }), x(pr, {
 			itemCount: n,
 			itemHeight: d,
 			selection: R,
-			renderItem: O,
+			renderItem: z,
 			onKeyDown: L,
 			cacheToken: p,
 			scrollTo: P.current,
@@ -5412,21 +5427,21 @@ var dr, ur = {
 			}
 		})]
 	});
-}), wr = (e, t) => {
+}), xr = (e, t) => {
 	const n = (() => {
-		if (void 0 !== dr) return dr;
+		if (void 0 !== ur) return ur;
 		try {
-			dr = ("undefined" != typeof document ? document.createElement("canvas").getContext("2d") : null) ?? null;
+			ur = ("undefined" != typeof document ? document.createElement("canvas").getContext("2d") : null) ?? null;
 		} catch {
-			dr = null;
+			ur = null;
 		}
-		return dr;
+		return ur;
 	})();
 	if (n) return n.font = t, n.measureText(e).width;
 	const o = Number.parseFloat((/(\d+(?:\.\d+)?)px/.exec(t) ?? [])[1] ?? "16") || 16;
 	return e.length * o * .55;
-}, xr = (e, t) => t <= 0 ? -1 : Math.min(Math.max(0, e), t - 1), vr = r(function(e, t) {
-	const { items: n, onChoose: o, highlightIndex: r, itemHeight: l = 24, visibleRows: i = 8, contentWidth: a, measureText: c, renderItem: d, autoFocus: u, viewport: p, className: m, style: w, children: v, ...y } = e, S = n.length, E = xr(r ?? 0, S), I = g(() => new ro({
+}, vr = (e, t) => t <= 0 ? -1 : Math.min(Math.max(0, e), t - 1), yr = r(function(e, t) {
+	const { items: n, onChoose: o, highlightIndex: r, itemHeight: l = 24, visibleRows: i = 8, contentWidth: a, measureText: c, renderItem: d, autoFocus: u, viewport: p, className: m, style: w, children: v, ...y } = e, S = n.length, E = vr(r ?? 0, S), I = g(() => new ro({
 		initial: { cell: {
 			rowIndex: Math.max(0, E),
 			colIndex: 0
@@ -5441,18 +5456,18 @@ var dr, ur = {
 		n,
 		E,
 		S
-	]), C = f(null), [, R] = h((e) => e + 1, 0), M = g(() => (C.current = null, E >= 0 ? { row: E } : null), [n, E]), P = C.current ?? M, k = z((e) => !(e < 0 || e >= S) && (o?.(e, n[e]), !0), [
+	]), C = f(null), [, R] = h((e) => e + 1, 0), M = g(() => (C.current = null, E >= 0 ? { row: E } : null), [n, E]), P = C.current ?? M, k = $((e) => !(e < 0 || e >= S) && (o?.(e, n[e]), !0), [
 		o,
 		n,
 		S
-	]), D = z(() => 0 === S ? -1 : I.getSelection().cell.rowIndex, [I, S]), T = z((e) => {
+	]), D = $(() => 0 === S ? -1 : I.getSelection().cell.rowIndex, [I, S]), T = $((e) => {
 		if (0 === S) return;
-		const t = xr(I.getSelection().cell.rowIndex + e, S);
+		const t = vr(I.getSelection().cell.rowIndex + e, S);
 		I.setSelection({ cell: {
 			rowIndex: t,
 			colIndex: 0
 		} }), C.current = { row: t }, R();
-	}, [I, S]), $ = N(t, () => ({
+	}, [I, S]), O = N(t, () => ({
 		isPickList: () => !0,
 		getHighlightIndex: D,
 		moveHighlight: T,
@@ -5461,24 +5476,24 @@ var dr, ur = {
 		D,
 		T,
 		k
-	]), O = g(() => {
+	]), z = g(() => {
 		if (c) return c;
 		const e = ((e) => {
 			const t = e?.fontSize, n = e?.fontFamily, o = "number" == typeof t ? `${t}px` : t ?? "16px", r = [];
 			return e?.fontStyle && "normal" !== e.fontStyle && r.push(String(e.fontStyle)), e?.fontWeight && "normal" !== e.fontWeight && r.push(String(e.fontWeight)), r.push(o, n ? String(n) : "sans-serif"), r.join(" ");
 		})(w);
-		return (t) => wr(t, e);
+		return (t) => xr(t, e);
 	}, [c, w]), L = g(() => {
 		if (null != a) return a;
 		let e = 0;
-		for (let t = 0; t < S; t++) e = Math.max(e, O(n[t].text));
+		for (let t = 0; t < S; t++) e = Math.max(e, z(n[t].text));
 		return Math.ceil(e) + 16;
 	}, [
 		a,
 		n,
 		S,
-		O
-	]), B = s((e) => {
+		z
+	]), F = s((e) => {
 		const { key: t, style: o, range: r, cell: l } = e, i = r?.rowStart ?? l.rowIndex, s = n[i];
 		return s ? x("div", {
 			role: "option",
@@ -5503,7 +5518,7 @@ var dr, ur = {
 				children: s.text || "\xA0"
 			})
 		}, t) : null;
-	}, [n, d]), F = g(() => ({
+	}, [n, d]), B = g(() => ({
 		onPointerUp: (e) => {
 			0 === e.button && k(D());
 		},
@@ -5511,8 +5526,8 @@ var dr, ur = {
 			e.which !== b.Enter && e.which !== b.Space || (e.preventDefault(), e.stopPropagation(), k(D()));
 		}
 	}), [k, D]);
-	return x(hr, {
-		ref: $,
+	return x(fr, {
+		ref: O,
 		className: H("pick-list", m),
 		role: "listbox",
 		style: {
@@ -5523,18 +5538,18 @@ var dr, ur = {
 		itemHeight: l,
 		contentWidth: L,
 		selection: I,
-		renderCell: B,
-		propsLayer: F,
+		renderCell: F,
+		propsLayer: B,
 		scrollTo: P,
 		viewport: p,
 		autoFocus: u,
 		cacheToken: n,
 		...y
 	});
-}), yr = "_search_b1nag_5", br = (e, t) => {
+}), br = "_search_b1nag_5", Sr = (e, t) => {
 	const n = t.trim().toLowerCase();
 	return n ? e.filter((e) => e.text.toLowerCase().includes(n)) : e;
-}, Sr = r(function(e, t) {
+}, Er = r(function(e, t) {
 	const { value: n, onChange: o, onClose: r, onKeyDown: l, className: i, ...a } = e, c = s((e) => {
 		if (e.which === b.Escape) return e.preventDefault(), e.stopPropagation(), void (n ? o("") : r?.());
 		l?.(e);
@@ -5550,19 +5565,19 @@ var dr, ur = {
 		role: "searchbox",
 		autoComplete: "off",
 		spellCheck: !1,
-		className: H(yr, "list-search", i),
+		className: H(br, "list-search", i),
 		value: n,
 		onChange: (e) => o(e.target.value),
 		onKeyDown: c,
 		...a
 	});
-}), Er = {
+}), Ir = {
 	light: {},
 	dark: {
 		"color-base-100": "#1e1e1e",
 		"color-base-300": "#3a3a3a"
 	}
-}, Ir = {
+}, Cr = {
 	light: {
 		"color-base-100": "#f2f2f2",
 		"color-base-hover": "#ececec",
@@ -5573,7 +5588,7 @@ var dr, ur = {
 		"color-base-hover": "#2e2e2e",
 		"color-base-300": "#4a4a4a"
 	}
-}, Cr = (e, ...t) => T(e, Er[e], ...t), Rr = (e, ...t) => T(e, Ir[e], ...t), Mr = ({ app: e, grid: t = Er, header: n = Ir, layer: o = "sxl-defaults", scope: r } = {}) => {
+}, Rr = (e, ...t) => T(e, Ir[e], ...t), Mr = (e, ...t) => T(e, Cr[e], ...t), Pr = ({ app: e, grid: t = Ir, header: n = Cr, layer: o = "sxl-defaults", scope: r } = {}) => {
 	const l = e ?? D, i = Object.fromEntries(Object.keys(n).map((e) => [e, {
 		"color-base-100": l[e]?.["color-base-200"],
 		...n[e]
@@ -5588,4 +5603,4 @@ var dr, ur = {
 		scope: r
 	});
 };
-export { rn as AUTO_SCROLL_INTERVAL_MS, jn as CellLayer, Un as CellTileDiv, mr as CheckboxList, po as DEFAULT_ANCHOR_STYLE, en as DEFAULT_HANDLE_STYLE, wo as DEFAULT_INSERT_BAR_STYLE, xo as DEFAULT_MOVE_SOURCE_STYLE, fo as DEFAULT_MULTI_STYLE, mo as DEFAULT_REMOVE_PREVIEW_STYLE, ho as DEFAULT_SINGLE_STYLE, Ln as DefaultCellRenderer, Wo as DefaultEditable, Xo as DefaultEditorInput, Qo as DefaultHeaderDivider, ro as DefaultSelection, wn as DragHandle, Rn as Draggable, ln as EDGE_AUTO_SCROLL_MARGIN_PX, Ao as EditSession, qo as EditorDiv, Yo as EditorLayer, On as FillHandle, Er as GRID_SURFACE, cr as Grid, Ot as GridFloatPanel, He as GridSurface, to as GridlineLayer, Ir as HEADER_SURFACE, tr as HeaderDividerAnchor, Ut as HoverTipLayer, nt as Layer, ae as LineSVG, fr as List, Sr as ListSearch, hr as ListSurface, an as NO_DRAG_MODIFIERS, zo as PICKER_COLORS, vr as PickList, Pn as RESIZE_ANCHORS_4, kn as RESIZE_ANCHORS_8, Wt as RangeFloatLayer, nn as RangeInsertBar, Qt as RangePrompt, tn as RangeRect, Dn as RangeResizer, Bo as RangesPickerLayer, ce as RectangleSVG, oo as SELECTION_CLIP_INSETS, Do as SelectionLayer, yo as SelectionTouchGrips, ie as ShapeBoundsContext, Ct as StickyAnchor, Tt as StickyFloat, Fe as SurfaceStateContext, Ae as SurfaceStateProvider, st as VirtualDiv, Mr as buildGridThemeCSS, Ko as commitArgsFromKey, re as createAxis, gn as createDragCells, ir as createHeaderSelectionPointer, Be as createSurfaceStateStore, hn as createWindowDragCells, No as defaultRangeStyle, sn as edgeScrollPane, Uo as expandEditorBounds, br as filterByText, Cr as gridThemeVars, rr as headerAnchorCell, or as headerEntireEnd, nr as headerEntireStart, lr as headerRange, Rr as headerThemeVars, En as insertAt, Cn as insertRange, dn as isSameDragModifiers, cn as readDragModifiers, Nt as renderGridFloatPanel, $n as resolveFillDestination, Vo as startEventFromKey, mn as useDoubleClick, fn as useDragCells, _o as useEditorKeymap, Pt as useGridFloatTheme, le as useGridMetrics, Je as useGridPane, Qe as useGridPaneOptional, sr as useHeaderSelectionPointer, Ft as useHoverIntent, tt as useLayer, Ho as usePendingCaret, At as useRangeHover, vo as useSelectionPointer, se as useShapeBounds, Et as useSticky, It as useStickyOptional, et as useSurfaceState, pn as useWindowDragCells, zn as vacatedByFill };
+export { rn as AUTO_SCROLL_INTERVAL_MS, jn as CellLayer, Un as CellTileDiv, wr as CheckboxList, po as DEFAULT_ANCHOR_STYLE, en as DEFAULT_HANDLE_STYLE, wo as DEFAULT_INSERT_BAR_STYLE, xo as DEFAULT_MOVE_SOURCE_STYLE, fo as DEFAULT_MULTI_STYLE, mo as DEFAULT_REMOVE_PREVIEW_STYLE, ho as DEFAULT_SINGLE_STYLE, Ln as DefaultCellRenderer, Wo as DefaultEditable, Xo as DefaultEditorInput, er as DefaultHeaderDivider, ro as DefaultSelection, wn as DragHandle, Rn as Draggable, ln as EDGE_AUTO_SCROLL_MARGIN_PX, Ao as EditSession, Zo as EditorDiv, Yo as EditorLayer, qo as EditorStartLayer, zn as FillHandle, Ir as GRID_SURFACE, dr as Grid, zt as GridFloatPanel, He as GridSurface, to as GridlineLayer, Cr as HEADER_SURFACE, nr as HeaderDividerAnchor, Ut as HoverTipLayer, nt as Layer, ae as LineSVG, pr as List, Er as ListSearch, fr as ListSurface, an as NO_DRAG_MODIFIERS, $o as PICKER_COLORS, yr as PickList, Pn as RESIZE_ANCHORS_4, kn as RESIZE_ANCHORS_8, Wt as RangeFloatLayer, nn as RangeInsertBar, Qt as RangePrompt, tn as RangeRect, Dn as RangeResizer, Fo as RangesPickerLayer, ce as RectangleSVG, oo as SELECTION_CLIP_INSETS, Do as SelectionLayer, yo as SelectionTouchGrips, ie as ShapeBoundsContext, Ct as StickyAnchor, Tt as StickyFloat, Be as SurfaceStateContext, Ae as SurfaceStateProvider, st as VirtualDiv, Pr as buildGridThemeCSS, Ko as commitArgsFromKey, re as createAxis, gn as createDragCells, sr as createHeaderSelectionPointer, Fe as createSurfaceStateStore, hn as createWindowDragCells, No as defaultRangeStyle, sn as edgeScrollPane, Uo as expandEditorBounds, Sr as filterByText, Rr as gridThemeVars, lr as headerAnchorCell, rr as headerEntireEnd, or as headerEntireStart, ir as headerRange, Mr as headerThemeVars, En as insertAt, Cn as insertRange, dn as isSameDragModifiers, cn as readDragModifiers, Nt as renderGridFloatPanel, On as resolveFillDestination, Vo as startEventFromKey, mn as useDoubleClick, fn as useDragCells, _o as useEditorKeymap, Pt as useGridFloatTheme, le as useGridMetrics, Je as useGridPane, Qe as useGridPaneOptional, ar as useHeaderSelectionPointer, Bt as useHoverIntent, tt as useLayer, Ho as usePendingCaret, At as useRangeHover, vo as useSelectionPointer, se as useShapeBounds, Et as useSticky, It as useStickyOptional, et as useSurfaceState, pn as useWindowDragCells, $n as vacatedByFill };