@sheetxl/grid-react 0.8.0-beta.6 → 0.8.0-beta.9

package/node/esm/index.mjs

@@ -1,12 +1,12 @@
 /**
-* @license @sheetxl/grid-react - Grid React - Advanced grid component for React - v0.8.0-beta.6
+* @license @sheetxl/grid-react - Grid React - Advanced grid component for React - v0.8.0-beta.9
 *
 * (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);
@@ -4199,7 +4208,7 @@ var Mo = (e, t) => void 0 === t ? e : null === t ? null : {
 					}));
 				}
 			}),
-			!ae && M && x(On, {
+			!ae && M && x(zn, {
 				range: he,
 				snapDestination: P,
 				...me.border,
@@ -4220,11 +4229,11 @@ var Mo = (e, t) => void 0 === t ? e : null === t ? null : {
 				onDragEnd: (e, t) => {
 					k?.(he, e, t), Ee(e);
 				},
-				onMenu: O ? (e, t, n) => {
-					O(he, 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);
@@ -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,12 +4729,12 @@ 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) => {
+	}, []), y = $((e) => {
 		const n = t.commit(e);
 		return n && g?.focus(), n;
-	}, [t, g]), b = z(() => {
+	}, [t, g]), b = $(() => {
 		t.cancel(), g?.focus();
 	}, [t, g]);
 	c(() => {
@@ -4793,7 +4802,7 @@ function qo(e) {
 	const { editable: t } = e, n = Qe();
 	return x(nt, {
 		className: "editor-start",
-		onKeyDown: z((e) => {
+		onKeyDown: $((e) => {
 			if (t.getSession()) return;
 			const o = n?.getElement();
 			if (o && e.target !== o) return;
@@ -4802,7 +4811,7 @@ function qo(e) {
 			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: z((e) => {
+		onDoubleClick: $((e) => {
 			if (t.getSession()) return;
 			const o = n?.getCellFromPointer(e.clientX, e.clientY) ?? t.getAnchor().getCoords();
 			o && t.startEdit(o, { mode: "edit" });
@@ -4810,7 +4819,7 @@ function qo(e) {
 	});
 }
 function Zo(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(() => {
+	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
@@ -4909,7 +4918,7 @@ var Jo = "ew-resize", Qo = "ns-resize", er = i(r((e, t) => {
 		}) : null]
 	});
 })), 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 = z(m, [m]), I = z(h, [h]), C = n === X.Column;
+	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,
@@ -4922,11 +4931,11 @@ var Jo = "ew-resize", Qo = "ns-resize", er = 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,
@@ -4956,7 +4965,7 @@ var Jo = "ew-resize", Qo = "ns-resize", er = 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;
@@ -5161,7 +5170,7 @@ var ur, gr = {
 	alignWidth: 1,
 	inset: 1
 }, 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 = $(I, (e) => e.getMetrics()), M = "auto" === u ? R.totalHeight > R.height : u, k = f(null);
+	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(() => {
@@ -5183,14 +5192,14 @@ var ur, gr = {
 		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",
@@ -5199,7 +5208,7 @@ var ur, gr = {
 			maxWidth: "100%",
 			maxHeight: "100%",
 			...y,
-			...null != i ? { width: i + B } : null
+			...null != i ? { width: i + F } : null
 		},
 		...S,
 		children: x(C, {
@@ -5211,7 +5220,7 @@ var ur, gr = {
 				height: "100%"
 			},
 			children: x("div", {
-				ref: z,
+				ref: $,
 				style: {
 					width: "100%",
 					height: "100%"
@@ -5290,40 +5299,49 @@ var ur, gr = {
 	tabIndex: -1,
 	style: { margin: 0 }
 }), 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: () => ({
+	const { itemCount: n, isChecked: o, isIndeterminate: r, onCheckedChange: l, renderValue: i, renderCheckbox: a = mr, renderDivider: d, selectAllLabel: u, itemHeight: p, selection: m, cacheToken: y, autoFocus: b, viewport: S, className: E, style: I, children: C, ...R } = e, M = f(n);
+	M.current = n;
+	const P = g(() => new ro({ getBounds: () => ({
 		rowStart: 0,
 		colStart: 0,
-		rowEnd: Math.max(0, n - 1),
+		rowEnd: Math.max(0, M.current - 1),
 		colEnd: 0
-	}) }), [n]), R = u ?? C, M = z(() => {
+	}) }), []), k = m ?? P;
+	c(() => {
+		0 !== n && k.getSelection().cell.rowIndex >= n && k.setSelection({ cell: {
+			rowIndex: n - 1,
+			colIndex: 0
+		} });
+	}, [k, n]);
+	const D = $(() => {
 		if (0 === n) return;
-		const e = !o(R.getSelection().cell.rowIndex);
-		r(((e) => {
+		const e = !o(k.getSelection().cell.rowIndex);
+		l(((e) => {
 			const t = e.getSelection();
 			return t.ranges && t.ranges.length ? t.ranges.flatMap((e) => Array.from({ length: e.rowEnd - e.rowStart + 1 }, (t, n) => e.rowStart + n)) : [t.cell.rowIndex];
-		})(R), e);
+		})(k), e);
 	}, [
-		R,
+		k,
 		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) => {
+		l
+	]), T = f(null), [, O] = h((e) => e + 1, 0), z = $(() => 0 === n ? -1 : k.getSelection().cell.rowIndex, [k, n]), L = $((e) => {
 		if (0 === n) return;
-		const t = Math.min(Math.max(0, R.getSelection().cell.rowIndex + e), n - 1);
-		R.setSelection({ cell: {
+		const t = Math.min(Math.max(0, k.getSelection().cell.rowIndex + e), n - 1);
+		k.setSelection({ cell: {
 			rowIndex: t,
 			colIndex: 0
-		} }), P.current = { row: t }, k();
-	}, [R, n]), $ = N(t, () => ({
+		} }), T.current = { row: t }, O();
+	}, [k, n]), F = N(t, () => ({
 		isCheckboxList: () => !0,
-		getHighlightIndex: D,
-		moveHighlight: T,
-		toggleHighlighted: M
+		getHighlightIndex: z,
+		moveHighlight: L,
+		toggleHighlighted: D
 	}), [
-		D,
-		T,
-		M
-	]), O = s((e) => v("div", {
+		z,
+		L,
+		D
+	]), B = s((e) => v("div", {
 		style: {
 			display: "flex",
 			alignItems: "center",
@@ -5334,30 +5352,31 @@ var ur, gr = {
 			cursor: "pointer"
 		},
 		onMouseDown: (t) => {
-			t.preventDefault(), r([e], !o(e));
+			t.preventDefault(), l([e], !o(e));
 		},
 		children: [x("div", {
 			style: {
 				display: "inline-flex",
 				pointerEvents: "none"
 			},
-			children: i(o(e))
+			children: a(o(e), r?.(e))
 		}), x("div", {
 			style: {
 				overflow: "hidden",
 				textOverflow: "ellipsis"
 			},
-			children: l(e)
+			children: i(e)
 		})]
 	}), [
 		o,
 		r,
 		l,
-		i
-	]), L = s((e) => {
-		" " !== e.key && "Enter" !== e.key || (e.preventDefault(), e.stopPropagation(), M());
-	}, [M]), { allChecked: B, someChecked: F } = g(() => {
-		if (null == c || 0 === n) return {
+		i,
+		a
+	]), A = s((e) => {
+		" " !== e.key && "Enter" !== e.key || (e.preventDefault(), e.stopPropagation(), D());
+	}, [D]), { allChecked: V, someChecked: K } = g(() => {
+		if (null == u || 0 === n) return {
 			allChecked: !1,
 			someChecked: !1
 		};
@@ -5368,22 +5387,22 @@ var ur, gr = {
 			someChecked: t && !e
 		};
 	}, [
-		c,
+		u,
 		n,
 		o,
-		p
+		y
 	]);
 	return v("div", {
-		ref: $,
-		className: H("checkbox-list", b),
+		ref: F,
+		className: H("checkbox-list", E),
 		style: {
 			display: "flex",
 			flexDirection: "column",
 			minHeight: 0,
-			...S
+			...I
 		},
-		...I,
-		children: [null != c && v(w, { children: [v("div", {
+		...R,
+		children: [null != u && v(w, { children: [v("div", {
 			style: {
 				display: "flex",
 				alignItems: "center",
@@ -5393,25 +5412,25 @@ var ur, gr = {
 				cursor: "pointer"
 			},
 			onMouseDown: (e) => {
-				e.preventDefault(), r(Array.from({ length: n }, (e, t) => t), !B);
+				e.preventDefault(), l(Array.from({ length: n }, (e, t) => t), !V);
 			},
 			children: [x("div", {
 				style: {
 					display: "inline-flex",
 					pointerEvents: "none"
 				},
-				children: i(B, F)
-			}), c]
-		}), a?.()] }), x(pr, {
+				children: a(V, K)
+			}), u]
+		}), d?.()] }), x(pr, {
 			itemCount: n,
-			itemHeight: d,
-			selection: R,
-			renderItem: O,
-			onKeyDown: L,
-			cacheToken: p,
-			scrollTo: P.current,
-			autoFocus: m,
-			viewport: y,
+			itemHeight: p,
+			selection: k,
+			renderItem: B,
+			onKeyDown: A,
+			cacheToken: y,
+			scrollTo: T.current,
+			autoFocus: b,
+			viewport: S,
 			style: {
 				flex: "1 1 100%",
 				minHeight: 0
@@ -5447,18 +5466,18 @@ var ur, gr = {
 		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 = 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,
@@ -5467,7 +5486,7 @@ var ur, gr = {
 		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 = [];
@@ -5477,14 +5496,14 @@ var ur, gr = {
 	}, [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",
@@ -5509,7 +5528,7 @@ var ur, gr = {
 				children: s.text || "\xA0"
 			})
 		}, t) : null;
-	}, [n, d]), F = g(() => ({
+	}, [n, d]), B = g(() => ({
 		onPointerUp: (e) => {
 			0 === e.button && k(D());
 		},
@@ -5518,7 +5537,7 @@ var ur, gr = {
 		}
 	}), [k, D]);
 	return x(fr, {
-		ref: $,
+		ref: O,
 		className: H("pick-list", m),
 		role: "listbox",
 		style: {
@@ -5529,8 +5548,8 @@ var ur, gr = {
 		itemHeight: l,
 		contentWidth: L,
 		selection: I,
-		renderCell: B,
-		propsLayer: F,
+		renderCell: F,
+		propsLayer: B,
 		scrollTo: P,
 		viewport: p,
 		autoFocus: u,
@@ -5594,4 +5613,4 @@ var ur, gr = {
 		scope: r
 	});
 };
-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, On as FillHandle, Ir as GRID_SURFACE, dr as Grid, Ot 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, zo 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, 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, Pr as buildGridThemeCSS, Ko as commitArgsFromKey, re as createAxis, gn as createDragCells, sr as createHeaderSelectionPointer, Be 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, $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, ar 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 };