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

package/browser/esm/index.mjs

@@ -1,6 +1,6 @@
 (function(){try{if(typeof document<`u`){var e=document.createElement(`style`);e.appendChild(document.createTextNode(`._grid-stage_rzp9d_1{width:100%;height:100%;position:absolute;top:0;left:0}._grid-stage_rzp9d_1>*{pointer-events:none;position:absolute;inset:0}._grid-stage_rzp9d_1>*>*{pointer-events:auto}._sheetxl-grid_5yo0n_7{box-sizing:border-box;user-select:none;contain:strict;width:100%;height:100%;position:relative}._sheetxl-grid_5yo0n_7 *{box-sizing:border-box!important}._sheetxl-grid_5yo0n_7 :focus{outline:none}._sheetxl-grid_5yo0n_7>*{contain:size layout style}._virtual-div_16eab_1{position:absolute}._tiles_ikr1b_7{will-change:transform}._tiles_ikr1b_7 .tile{white-space:pre;position:absolute}._tiles_ikr1b_7 .tile>*{contain:strict;position:absolute}._gridlines_ikr1b_26,._gridlines_ikr1b_26 *{pointer-events:none;position:absolute;overflow:visible}.cell{letter-spacing:-.25px;padding:2px 4px;font-family:Calibri;line-height:1.2}._search_b1nag_5{box-sizing:border-box;width:100%;min-width:0;font:inherit;color:inherit;background:light-dark(#fff,#2b2b2b);border:1px solid light-dark(#c4c4c4,#5a5a5a);border-radius:2px;outline:none;margin:0;padding:3px 8px}._search_b1nag_5:focus{border-color:var(--sxl-color-primary,#0078d7)}._search_b1nag_5::placeholder{opacity:.6}/*$vite$:1*/`)),document.head.appendChild(e)}}catch(e){console.error(`vite-plugin-css-injected-by-js`,e)}})();
 /**
-* @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.
@@ -9,10 +9,10 @@ import * as e from "react";
 import t, { cloneElement as n, createContext as r, createElement as i, forwardRef as a, isValidElement as o, memo as s, useCallback as c, useContext as l, useEffect as u, useId as d, useLayoutEffect as f, useMemo as p, useReducer as m, useRef as h, useState as g, useSyncExternalStore as _, version as v } from "react";
 import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
 import { FloatPanelSurface as S, KeyCodes as C, KeyModifiers as w, ReactUtils as T, SERIES_COUNT as E, ScrollPane as D, THEME_MODE_ATTR as O, THEME_SURFACE_ATTR as k, Viewport as A, buildThemeCSS as j, defaultTheme as M, themeVars as N, useBoundSyncExternalStore as P, useCallbackRef as F, useFloatSurface as I, useFullscreenPortal as L, useImperativeElement as R, useOptionalBoundSyncExternalStore as z, useSynchronizedPointerHandler as ee, useTokenThemeContext as B } from "@sheetxl/utils-react";
-import { AnchorLocation as V, CommonUtils as te, CoordUtils as H, DOMUtils as ne, Direction as U, RangeAxis as W, SelectionTraversalUtils as re } from "@sheetxl/utils";
-import * as ie from "react-dom";
-import { createPortal as ae } from "react-dom";
-var G = (e, t) => {
+import { AnchorLocation as V, CommonUtils as te, CoordUtils as H, DOMUtils as ne, Direction as U, RangeAxis as W, SelectionTraversalUtils as G } from "@sheetxl/utils";
+import * as re from "react-dom";
+import { createPortal as ie } from "react-dom";
+var K = (e, t) => {
 	if (typeof t == "number") {
 		let n = t;
 		return {
@@ -46,11 +46,11 @@ var G = (e, t) => {
 			return o(Math.floor(s / 2), Math.min(s, e - 1), t);
 		}
 	};
-}, oe = (e) => {
+}, ae = (e) => {
 	let t = e != null, n = e?.rowCount ?? 0, r = e?.columnCount ?? 0, i = e?.getRowHeight, a = e?.getColumnWidth;
 	return p(() => {
 		if (!t) return null;
-		let e = G(n, i ?? 20), o = G(r, a ?? 75);
+		let e = K(n, i ?? 20), o = K(r, a ?? 75);
 		return {
 			getColOffset: o.getOffset,
 			getColIndex: o.getIndex,
@@ -64,7 +64,7 @@ var G = (e, t) => {
 		i,
 		a
 	]);
-}, se = r(null), ce = () => l(se), le = (e) => {
+}, oe = r(null), se = () => l(oe), ce = (e) => {
 	let { linePoints: t, bounds: n, propsPath: r, style: i, ...a } = e;
 	return n ? b("svg", {
 		width: `${n.width}`,
@@ -92,10 +92,10 @@ var G = (e, t) => {
 			...r
 		})
 	}) : null;
-}, ue = s((e) => {
-	let { bounds: t, fill: n, stroke: r, alignWidth: i = 1, disableAlign: a = !1, disableEdgeAware: o = !1, inset: s = 0, hole: c, animatedStroke: l, animatedTransition: d, strokeDasharray: f, strokeDashoffset: p, propsFillPath: m, propsStrokePath: h, className: g, style: _, propsRoot: v } = e, S = ce(), C = t ?? S;
+}, le = s((e) => {
+	let { bounds: t, fill: n, stroke: r, alignWidth: i = 1, disableAlign: a = !1, disableEdgeAware: o = !1, inset: s = 0, hole: c, animatedStroke: l, animatedTransition: d, strokeDasharray: f, strokeDashoffset: p, propsFillPath: m, propsStrokePath: h, className: g, style: _, propsRoot: v } = e, S = se(), C = t ?? S;
 	if (u(() => {
-		l && me();
+		l && pe();
 	}, [l]), !C) return null;
 	let w = T.getDevicePixelRatio(), E = a ? i : i / w, D, O, k, A, j, M, N;
 	if (a) D = C.x, O = C.y, k = C.x + C.width, A = C.y + C.height;
@@ -124,19 +124,19 @@ var G = (e, t) => {
 		M = {
 			strokeDasharray: `${e.dashLength}px ${e.dashGap}px`,
 			strokeDashoffset: `${t}px`,
-			animation: `${fe} ${e.speed * t}ms linear infinite`,
+			animation: `${de} ${e.speed * t}ms linear infinite`,
 			willChange: "stroke-dashoffset"
 		}, N = e.gapColor;
 	}
 	let P = d ? "d 60ms ease-in-out" : "none", F = null;
 	if (n) {
-		let e = de({
+		let e = ue({
 			top: O,
 			left: D,
 			bottom: A,
 			right: k
 		});
-		j && (e += " " + de({
+		j && (e += " " + ue({
 			top: j.y,
 			left: j.x,
 			bottom: j.y + j.height,
@@ -154,7 +154,7 @@ var G = (e, t) => {
 	}
 	let I = null;
 	if (r && i) {
-		let e = de({
+		let e = ue({
 			top: O,
 			left: D,
 			right: k,
@@ -202,38 +202,38 @@ var G = (e, t) => {
 		children: [F, I]
 	});
 });
-ue.displayName = "RectangleSVG";
-var de = (e, t = !0) => `M ${e.left} ${e.top} L ${e.right} ${e.top} L ${e.right} ${e.bottom} L ${e.left} ${e.bottom} L ${e.left} ${e.top} ${t ? "Z" : ""}`, fe = "sxl-marching-ants", pe = !1, me = () => {
-	if (pe || typeof document > "u") return;
-	pe = !0;
+le.displayName = "RectangleSVG";
+var ue = (e, t = !0) => `M ${e.left} ${e.top} L ${e.right} ${e.top} L ${e.right} ${e.bottom} L ${e.left} ${e.bottom} L ${e.left} ${e.top} ${t ? "Z" : ""}`, de = "sxl-marching-ants", fe = !1, pe = () => {
+	if (fe || typeof document > "u") return;
+	fe = !0;
 	let e = document.createElement("style");
-	e.appendChild(document.createTextNode(`@keyframes ${fe} { to { stroke-dashoffset: 0; } }`)), document.head.appendChild(e);
+	e.appendChild(document.createTextNode(`@keyframes ${de} { to { stroke-dashoffset: 0; } }`)), document.head.appendChild(e);
 };
-function he(e) {
+function me(e) {
 	var t, n, r = "";
 	if (typeof e == "string" || typeof e == "number") r += e;
 	else if (typeof e == "object") if (Array.isArray(e)) {
 		var i = e.length;
-		for (t = 0; t < i; t++) e[t] && (n = he(e[t])) && (r && (r += " "), r += n);
+		for (t = 0; t < i; t++) e[t] && (n = me(e[t])) && (r && (r += " "), r += n);
 	} else for (n in e) e[n] && (r && (r += " "), r += n);
 	return r;
 }
-function K() {
-	for (var e, t, n = 0, r = "", i = arguments.length; n < i; n++) (e = arguments[n]) && (t = he(e)) && (r && (r += " "), r += t);
+function q() {
+	for (var e, t, n = 0, r = "", i = arguments.length; n < i; n++) (e = arguments[n]) && (t = me(e)) && (r && (r += " "), r += t);
 	return r;
 }
-var q = (e, t, n) => Math.min(n, Math.max(t, e)), ge = (e, t, n) => {
+var J = (e, t, n) => Math.min(n, Math.max(t, e)), he = (e, t, n) => {
 	let r = [], i = t;
 	for (; i <= n;) {
 		let t = e ? Math.max(0, e(i)) : 0;
 		t === 0 ? (r.push(i), i++) : i += t;
 	}
 	return r;
-}, _e = (e, t, n, r, i, a) => {
+}, ge = (e, t, n, r, i, a) => {
 	if (n - t >= i - r) return r;
 	let o = r;
 	return e === "nearest" && (r - t > 0 ? e = "start" : n - i > 0 && (e = "end")), e === "start" ? o = t : e === "end" ? o = n - (i - r) : e === "center" && (o = t + (n - t) / 2 - (i - r) / 2), o < r ? Math.max(0, o) : o > r ? Math.min(o, a - (i - r)) : void 0;
-}, J = (e, t = !1, n, r) => {
+}, _e = (e, t = !1, n, r) => {
 	if (!n) return 0;
 	let i = !t, a = i ? 1 : -1, o = n(i ? e : e + 1), s = n(i ? e + 1 : e), c = e + (i ? 2 : -1), l = 0;
 	for (; (s - o) * a <= 0;) {
@@ -241,13 +241,13 @@ var q = (e, t, n) => Math.min(n, Math.max(t, e)), ge = (e, t, n) => {
 		o = s, s = n(c), c += a, l++;
 	}
 	return l;
-}, ve = (e, t, n) => {
+}, Y = (e, t, n) => {
 	if (!n) return !1;
 	let r = n.x;
 	if (e < r || e > r + n.width) return !1;
 	let i = n.y;
 	return !(t < i || t > i + n.height);
-}, Y = "_grid-stage_rzp9d_1", ye = {
+}, ve = "_grid-stage_rzp9d_1", ye = {
 	pointerdown: "onPointerDown",
 	pointermove: "onPointerMove",
 	pointerup: "onPointerUp",
@@ -423,7 +423,7 @@ var q = (e, t, n) => Math.min(n, Math.max(t, e)), ge = (e, t, n) => {
 		registerLayer: _
 	}), []);
 	return u(() => _({ getElement: () => U.current }), [_]), b("div", {
-		className: K(n, "stage", Y),
+		className: q(n, "stage", ve),
 		ref: U,
 		tabIndex: 0,
 		...o,
@@ -657,7 +657,7 @@ var Te = Object.freeze([]), X = (e, t) => {
 			let r = g();
 			for (let e = 0; e < Ae.length; e++) {
 				let t = r[Ae[e]];
-				if (t && ve(n.x, n.y, t.getPaneBounds())) return t;
+				if (t && Y(n.x, n.y, t.getPaneBounds())) return t;
 			}
 			return null;
 		},
@@ -743,7 +743,7 @@ var Te = Object.freeze([]), X = (e, t) => {
 		children: t
 	});
 }, Re = { "sheetxl-grid": "_sheetxl-grid_5yo0n_7" }, ze = s(a((e, t) => {
-	let { rowCount: r = 1, columnCount: a = 1, viewport: s, metrics: l, getRangeFromCell: d = H.cellToRange, hiddenRowsAt: f, hiddenColumnsAt: _, freezeLeft: v = 0, freezeTop: S = 0, propsFreezeLeft: C, propsFreezeTop: w, onFirstRender: T, children: E, wrapPane: D, onFocus: O, onBlur: k, className: j, style: M, ...N } = e, P = F(O, [O]), I = F(k, [k]), L = F(T, [T]), [z, ee] = g(V.Center), [B, te] = m((e) => e + 1, 0), U = p(() => new A({}), []), W = s ?? U, [re, ie] = g(() => {
+	let { rowCount: r = 1, columnCount: a = 1, viewport: s, metrics: l, getRangeFromCell: d = H.cellToRange, hiddenRowsAt: f, hiddenColumnsAt: _, freezeLeft: v = 0, freezeTop: S = 0, propsFreezeLeft: C, propsFreezeTop: w, onFirstRender: T, children: E, wrapPane: D, onFocus: O, onBlur: k, className: j, style: M, ...N } = e, P = F(O, [O]), I = F(k, [k]), L = F(T, [T]), [z, ee] = g(V.Center), [B, te] = m((e) => e + 1, 0), U = p(() => new A({}), []), W = s ?? U, [G, re] = g(() => {
 		let e = W.getClient();
 		return {
 			zoom: W.getZoom(),
@@ -753,7 +753,7 @@ var Te = Object.freeze([]), X = (e, t) => {
 		};
 	});
 	u(() => {
-		let e = () => ie((e) => {
+		let e = () => re((e) => {
 			let t = W.getClient(), n = {
 				zoom: W.getZoom(),
 				w: t.width,
@@ -764,35 +764,35 @@ var Te = Object.freeze([]), X = (e, t) => {
 		});
 		return e(), W.subscribe(e);
 	}, [W]);
-	let ae = re.zoom, G = p(() => {
+	let ie = G.zoom, K = p(() => {
 		let e = l ?? Be;
 		return {
-			getColOffset: (t) => e.getColOffset(t) * ae,
-			getColIndex: (t) => e.getColIndex(t / ae),
-			getRowOffset: (t) => e.getRowOffset(t) * ae,
-			getRowIndex: (t) => e.getRowIndex(t / ae)
+			getColOffset: (t) => e.getColOffset(t) * ie,
+			getColIndex: (t) => e.getColIndex(t / ie),
+			getRowOffset: (t) => e.getRowOffset(t) * ie,
+			getRowIndex: (t) => e.getRowIndex(t / ie)
 		};
-	}, [l, ae]), oe = F((e, t = !1) => J(e, t, G.getRowOffset, t ? 0 : r), [r, G?.getRowOffset]), se = F(f ?? oe, [f]), ce = F((e, t = !1) => J(e, t, G.getColOffset, t ? a : 0), [a, G?.getColOffset]), ue = F(_ ?? ce, [_]), de = c(() => {
+	}, [l, ie]), ae = F((e, t = !1) => _e(e, t, K.getRowOffset, t ? 0 : r), [r, K?.getRowOffset]), oe = F(f ?? ae, [f]), se = F((e, t = !1) => _e(e, t, K.getColOffset, t ? a : 0), [a, K?.getColOffset]), le = F(_ ?? se, [_]), ue = c(() => {
 		te();
-	}, []), fe = p(() => Math.min(re.w, G.getColOffset(a)), [
+	}, []), de = p(() => Math.min(G.w, K.getColOffset(a)), [
 		B,
-		G.getColOffset,
+		K.getColOffset,
 		a,
-		re.w
-	]), pe = p(() => Math.min(re.h, G.getRowOffset(r)), [
+		G.w
+	]), fe = p(() => Math.min(G.h, K.getRowOffset(r)), [
 		B,
-		G.getRowOffset,
+		K.getRowOffset,
 		r,
-		re.h
-	]), me = p(() => {
+		G.h
+	]), pe = p(() => {
 		let e = NaN, t = null;
 		return (n) => (n === e && t || (e = n, t = ((e) => {
-			if (pe === 0) return Me;
+			if (fe === 0) return Me;
 			let t = [], n = 0, i = 0;
-			typeof S == "number" ? n = S : (n = S.index ?? 0, i = (S.offset ?? 0) * ae);
-			let a = i, o = G.getRowOffset(n), s = o - a;
+			typeof S == "number" ? n = S : (n = S.index ?? 0, i = (S.offset ?? 0) * ie);
+			let a = i, o = K.getRowOffset(n), s = o - a;
 			if (n > 0) {
-				let e = je(G, { top: i + G.getRowOffset(0) }), r = G.getRowIndex(a), c = G.getRowIndex(o - 1), l;
+				let e = je(K, { top: i + K.getRowOffset(0) }), r = K.getRowIndex(a), c = K.getRowIndex(o - 1), l;
 				t[1] = {
 					minIndex: r,
 					maxIndex: c,
@@ -800,14 +800,14 @@ var Te = Object.freeze([]), X = (e, t) => {
 					maxCoord: n - 1,
 					minBounds: 0,
 					maxBounds: s,
-					visibleIndices: (e, t) => e !== void 0 && t !== void 0 ? ge(se, e, t) : l || (l = Object.freeze(ge(se, r, c)), l),
+					visibleIndices: (e, t) => e !== void 0 && t !== void 0 ? he(oe, e, t) : l || (l = Object.freeze(he(oe, r, c)), l),
 					metrics: e,
 					maxVirtualBounds: o,
 					scrollOffset: i,
 					freezeOffset: i
 				};
 			}
-			let c = Math.max(0, pe - s), l = je(G, { top: e + s }), u = l.getRowIndex(0), d = l.getRowIndex(c - 1), f;
+			let c = Math.max(0, fe - s), l = je(K, { top: e + s }), u = l.getRowIndex(0), d = l.getRowIndex(c - 1), f;
 			return t[0] = {
 				minIndex: u,
 				maxIndex: d,
@@ -815,31 +815,31 @@ var Te = Object.freeze([]), X = (e, t) => {
 				maxCoord: r - 1,
 				minBounds: s,
 				maxBounds: c,
-				visibleIndices: (e, t) => e !== void 0 && t !== void 0 ? ge(se, e, t) : f || (f = Object.freeze(ge(se, u, d)), f),
+				visibleIndices: (e, t) => e !== void 0 && t !== void 0 ? he(oe, e, t) : f || (f = Object.freeze(he(oe, u, d)), f),
 				metrics: l,
-				maxVirtualBounds: G.getRowOffset(r),
+				maxVirtualBounds: K.getRowOffset(r),
 				scrollOffset: e,
-				freezeOffset: (n > 0 ? G.getRowOffset(n) : 0) - i
+				freezeOffset: (n > 0 ? K.getRowOffset(n) : 0) - i
 			}, t;
 		})(n)), t);
 	}, [
 		B,
-		G.getRowIndex,
-		G.getRowOffset,
-		se,
-		pe,
+		K.getRowIndex,
+		K.getRowOffset,
+		oe,
+		fe,
 		r,
 		S,
-		ae
-	]), he = p(() => me(0), [me]), q = p(() => {
+		ie
+	]), me = p(() => pe(0), [pe]), J = p(() => {
 		let e = NaN, t = null;
 		return (n) => (n === e && t || (e = n, t = ((e) => {
-			if (fe === 0) return Me;
+			if (de === 0) return Me;
 			let t = [], n = 0, r = 0;
-			typeof v == "number" ? n = v : (n = v.index ?? 0, r = (v.offset ?? 0) * ae);
-			let i = r, o = G.getColOffset(n), s = o - i;
+			typeof v == "number" ? n = v : (n = v.index ?? 0, r = (v.offset ?? 0) * ie);
+			let i = r, o = K.getColOffset(n), s = o - i;
 			if (n > 0) {
-				let e = je(G, { left: r + G.getColOffset(0) }), a = G.getColIndex(i), c = G.getColIndex(o - 1), l;
+				let e = je(K, { left: r + K.getColOffset(0) }), a = K.getColIndex(i), c = K.getColIndex(o - 1), l;
 				t[1] = {
 					minIndex: a,
 					maxIndex: c,
@@ -847,14 +847,14 @@ var Te = Object.freeze([]), X = (e, t) => {
 					maxCoord: n - 1,
 					minBounds: 0,
 					maxBounds: s,
-					visibleIndices: (e, t) => e !== void 0 && t !== void 0 ? ge(ue, e, t) : l || (l = Object.freeze(ge(ue, a, c)), l),
+					visibleIndices: (e, t) => e !== void 0 && t !== void 0 ? he(le, e, t) : l || (l = Object.freeze(he(le, a, c)), l),
 					metrics: e,
 					maxVirtualBounds: o,
 					scrollOffset: r,
 					freezeOffset: r
 				};
 			}
-			let c = Math.max(0, fe - s), l = je(G, { left: e + s }), u = l.getColIndex(0), d = l.getColIndex(c - 1), f;
+			let c = Math.max(0, de - s), l = je(K, { left: e + s }), u = l.getColIndex(0), d = l.getColIndex(c - 1), f;
 			return t[0] = {
 				minIndex: u,
 				maxIndex: d,
@@ -862,23 +862,23 @@ var Te = Object.freeze([]), X = (e, t) => {
 				maxCoord: a - 1,
 				minBounds: s,
 				maxBounds: c,
-				visibleIndices: (e, t) => e !== void 0 && t !== void 0 ? ge(ue, e, t) : f || (f = Object.freeze(ge(ue, u, d)), f),
+				visibleIndices: (e, t) => e !== void 0 && t !== void 0 ? he(le, e, t) : f || (f = Object.freeze(he(le, u, d)), f),
 				metrics: l,
-				maxVirtualBounds: G.getColOffset(a),
+				maxVirtualBounds: K.getColOffset(a),
 				scrollOffset: e,
-				freezeOffset: (n > 0 ? G.getColOffset(n) : 0) - r
+				freezeOffset: (n > 0 ? K.getColOffset(n) : 0) - r
 			}, t;
 		})(n)), t);
 	}, [
 		B,
-		G.getColIndex,
-		G.getColOffset,
-		ue,
-		fe,
+		K.getColIndex,
+		K.getColOffset,
+		le,
+		de,
 		a,
 		v,
-		ae
-	]), Y = p(() => q(0), [q]), ye = h([]), [be, xe] = m((e) => e + 1, 0), Se = he.length, Ce = Y.length, Te = p(() => {
+		ie
+	]), ve = p(() => J(0), [J]), ye = h([]), [be, xe] = m((e) => e + 1, 0), Se = me.length, Ce = ve.length, Te = p(() => {
 		let e = [], t = (t, n, r, i, a) => {
 			if (t >= Ce || n >= Se) return null;
 			let o = {
@@ -919,16 +919,16 @@ var Te = Object.freeze([]), X = (e, t) => {
 			colEnd: a - 1,
 			rowEnd: r - 1
 		}, n = (n) => ke(n, {
-			rowDims: he,
-			columnDims: Y,
-			computeRowDims: me,
-			computeColumnDims: q,
+			rowDims: me,
+			columnDims: ve,
+			computeRowDims: pe,
+			computeColumnDims: J,
 			viewport: W,
-			zoom: ae,
-			containerWidth: fe,
-			containerHeight: pe,
+			zoom: ie,
+			containerWidth: de,
+			containerHeight: fe,
 			getRangeFromCell: d,
-			invalidate: de,
+			invalidate: ue,
 			totalRange: t,
 			getSurfacePointFromPointer: (e, t) => ze(e, t),
 			scrollTo: (e) => Q(e),
@@ -942,20 +942,20 @@ var Te = Object.freeze([]), X = (e, t) => {
 		return e = Object.freeze(e), e;
 	}, [
 		Te,
-		he,
-		Y,
 		me,
-		q,
+		ve,
+		pe,
+		J,
 		W,
 		d,
 		be
-	]), Ee = Y[0]?.maxVirtualBounds ?? 0, Ae = he[0]?.maxVirtualBounds ?? 0, Ne = re.ready, Fe = p(() => {
-		let e = Y[1], t = he[1];
+	]), Ee = ve[0]?.maxVirtualBounds ?? 0, Ae = me[0]?.maxVirtualBounds ?? 0, Ne = G.ready, Fe = p(() => {
+		let e = ve[1], t = me[1];
 		return {
 			left: e ? e.metrics.getColOffset(e.maxIndex + 1) : 0,
 			top: t ? t.metrics.getRowOffset(t.maxIndex + 1) : 0
 		};
-	}, [he, Y]), Ie = F((e) => {
+	}, [me, ve]), Ie = F((e) => {
 		ne.canUseDOM && setTimeout(() => {
 			(X[z]?.getElement() ?? X[V.Center]?.getElement())?.focus({
 				preventScroll: !0,
@@ -989,19 +989,19 @@ var Te = Object.freeze([]), X = (e, t) => {
 		let { x: r, y: i } = n, a = null, o = Ye, s = o.length;
 		for (let e = 0; !a && e < s; e++) {
 			let t = X[o[e]];
-			t && ve(r, i, t.getPaneBounds()) && (a = t);
+			t && Y(r, i, t.getPaneBounds()) && (a = t);
 		}
 		return a ||= X[V.Center], a;
 	}, [X, d]);
 	u(() => {
-		let e = Y?.[1]?.scrollOffset ?? 0, t = he?.[1]?.scrollOffset ?? 0;
+		let e = ve?.[1]?.scrollOffset ?? 0, t = me?.[1]?.scrollOffset ?? 0;
 		W.setContent(Ee, Ae, e, t);
 	}, [
 		W,
 		Ee,
 		Ae,
-		Y,
-		he
+		ve,
+		me
 	]);
 	let Xe = F((e) => {
 		let t = e?.left ?? e?.[0], n = e?.top ?? e?.[1];
@@ -1016,7 +1016,7 @@ var Te = Object.freeze([]), X = (e, t) => {
 		let t = X[z];
 		if (!t) return X[V.Center];
 		let n = t.getScrollOrientation(), r = { ...t.getVisibleRange() };
-		return n.vertical && (r.rowStart = he[0].minCoord, r.rowEnd = he[0].maxCoord), n.horizontal && (r.colStart = Y[0].minCoord, r.colEnd = Y[0].maxCoord), n && H.isCellWithinRange(e, r) ? t : X[V.Center];
+		return n.vertical && (r.rowStart = me[0].minCoord, r.rowEnd = me[0].maxCoord), n.horizontal && (r.colStart = ve[0].minCoord, r.colEnd = ve[0].maxCoord), n && H.isCellWithinRange(e, r) ? t : X[V.Center];
 	}, [X, z]), $e = F((e, t = {
 		inline: "nearest",
 		block: "nearest"
@@ -1043,7 +1043,7 @@ var Te = Object.freeze([]), X = (e, t) => {
 				inline: "end",
 				...n
 			};
-			let r = _e(n.inline ?? "end", e.x, e.x + e.width, t.left, t.left + t.width, t.totalWidth), i = _e(n.block ?? "end", e.y, e.y + e.height, t.top, t.top + t.height, t.totalHeight);
+			let r = ge(n.inline ?? "end", e.x, e.x + e.width, t.left, t.left + t.width, t.totalWidth), i = ge(n.block ?? "end", e.y, e.y + e.height, t.top, t.top + t.height, t.totalHeight);
 			if (r !== void 0 || i !== void 0) return {
 				left: r ?? t.left,
 				top: i ?? t.top
@@ -1087,7 +1087,7 @@ var Te = Object.freeze([]), X = (e, t) => {
 		W.setTarget(i, a, o);
 	}, []), et = R(t, () => ({
 		focus: Ie,
-		invalidate: de,
+		invalidate: ue,
 		scrollTo: Q,
 		scrollBy: Xe,
 		scrollCellCoordsIntoView: $e,
@@ -1131,43 +1131,43 @@ var Te = Object.freeze([]), X = (e, t) => {
 		D,
 		r,
 		a
-	]), rt = p(() => Fe.left === 0 ? null : b(le, {
+	]), rt = p(() => Fe.left === 0 ? null : b(ce, {
 		linePoints: [
 			0,
 			0,
 			0,
-			pe + 1
+			fe + 1
 		],
 		bounds: {
 			x: Fe.left,
 			y: 0,
 			width: 1,
-			height: pe + 1
+			height: fe + 1
 		},
 		...C
 	}), [
 		B,
 		Fe.left,
-		pe,
+		fe,
 		C
-	]), it = p(() => Fe.top === 0 ? null : b(le, {
+	]), it = p(() => Fe.top === 0 ? null : b(ce, {
 		linePoints: [
 			0,
 			0,
-			fe + 1,
+			de + 1,
 			0
 		],
 		bounds: {
 			x: 0,
 			y: Fe.top,
-			width: fe + 1,
+			width: de + 1,
 			height: 1
 		},
 		...w
 	}), [
 		B,
 		Fe.top,
-		fe,
+		de,
 		w
 	]), at = h(!1), ot = p(() => {
 		if (!Ne) return null;
@@ -1199,8 +1199,8 @@ var Te = Object.freeze([]), X = (e, t) => {
 		X,
 		Te,
 		nt,
+		de,
 		fe,
-		pe,
 		Ne,
 		Fe
 	]);
@@ -1208,7 +1208,7 @@ var Te = Object.freeze([]), X = (e, t) => {
 		!at.current && ot && Ne && (at.current = !0, L?.(et.current));
 	}, [ot, Ne]), b("div", {
 		ref: et,
-		className: K(j, "grid-surface", Re["sheetxl-grid"]),
+		className: q(j, "grid-surface", Re["sheetxl-grid"]),
 		style: {
 			overflow: "hidden",
 			...M
@@ -1412,7 +1412,7 @@ var Q = (e) => e ? (t) => e(t) : void 0, et = !1, tt = !1, nt = "_virtual-div_16
 		height: S.height
 	};
 	return b("div", {
-		className: K(p, nt),
+		className: q(p, nt),
 		style: {
 			width: `${A}px`,
 			height: `${j}px`,
@@ -1426,7 +1426,7 @@ var Q = (e) => e ? (t) => e(t) : void 0, et = !1, tt = !1, nt = "_virtual-div_16
 		},
 		..._,
 		ref: y,
-		children: g == null ? null : b(se.Provider, {
+		children: g == null ? null : b(oe.Provider, {
 			value: P,
 			children: g
 		})
@@ -2560,7 +2560,7 @@ function Gn(t) {
 				...e,
 				isPositioned: !1 !== k.current
 			};
-			j.current && !Vn(T.current, t) && (T.current = t, ie.flushSync(() => {
+			j.current && !Vn(T.current, t) && (T.current = t, re.flushSync(() => {
 				f(t);
 			}));
 		});
@@ -2660,12 +2660,20 @@ var Kn = (e, t) => {
 		options: [e, t]
 	};
 }, Yn = (e) => {
-	let t = I(), n = B(), r = e?.getElement(), i = {}, a = r?.closest(`[${O}]`)?.getAttribute(O), o = r?.closest(`[${k}]`)?.getAttribute(k);
-	a && (i[O] = a), o && (i[k] = o);
-	let s = [...t?.themeScope?.classes ?? [], n?.scopeClass].filter(Boolean);
+	let t = I(), n = B(), r = e?.getElement(), i = r?.ownerDocument, a = c((e) => {
+		if (!i || typeof MutationObserver > "u") return () => {};
+		let t = new MutationObserver(e);
+		return t.observe(i.documentElement, {
+			attributes: !0,
+			subtree: !0,
+			attributeFilter: [O, k]
+		}), () => t.disconnect();
+	}, [i]), o = () => `${r?.closest(`[${O}]`)?.getAttribute(O) ?? ""}\n${r?.closest(`[${k}]`)?.getAttribute(k) ?? ""}`, [s, l] = _(a, o, o).split("\n"), u = {};
+	s && (u[O] = s), l && (u[k] = l);
+	let d = [...t?.themeScope?.classes ?? [], n?.scopeClass].filter(Boolean);
 	return {
-		className: s.length ? s.join(" ") : void 0,
-		attrs: i
+		className: d.length ? d.join(" ") : void 0,
+		attrs: u
 	};
 }, Xn = (e) => {
 	let { side: t, align: n = "center" } = e;
@@ -2696,7 +2704,7 @@ var Kn = (e, t) => {
 		y();
 	}, [t, y]), !i) return null;
 	let x = typeof l == "function" ? l(t) : l;
-	return ae(b("div", {
+	return ie(b("div", {
 		ref: _.setFloating,
 		className: [o, d].filter(Boolean).join(" ") || void 0,
 		...m,
@@ -2839,7 +2847,8 @@ var nr = ({ outOfView: e, close: t }) => (u(() => {
 	key: e.key ?? Ee(e.range),
 	range: e.range,
 	data: e.data,
-	placement: e.placement
+	placement: e.placement,
+	alignOffset: e.alignOffset
 }), lr = (e, t) => Array.isArray(e) ? e.includes(t) : e === t, ur = (e) => {
 	let t = e.getCoords();
 	return t ? `${t.rowIndex},${t.colIndex}` : null;
@@ -2882,14 +2891,14 @@ var nr = ({ outOfView: e, close: t }) => (u(() => {
 	}
 	let R = C ? A.target : null, ee = E && R !== null, B = T ? a === null ? null : cr(a) : ee ? R : L ?? R, V = T ? B !== null : ee || L !== null;
 	return b($e, {
-		className: K(v, "range-float"),
+		className: q(v, "range-float"),
 		onPointerMove: C ? N : void 0,
 		onPointerLeave: C ? M : void 0,
 		children: B && b(Qn, {
 			anchor: { range: B.range },
 			placement: B.placement ?? s,
 			offset: c,
-			alignOffset: d,
+			alignOffset: B.alignOffset ?? d,
 			boundary: h,
 			zIndex: g,
 			open: V,
@@ -2910,7 +2919,7 @@ var fr = (e) => {
 	return b(dr, {
 		...r,
 		activateOn: "hover",
-		className: K(n, "hover-tip"),
+		className: q(n, "hover-tip"),
 		children: ({ range: e, data: n, floatProps: r, state: i }) => t({
 			range: e,
 			data: n,
@@ -3062,11 +3071,11 @@ var xr = {
 		height: y.height
 	} : void 0;
 	return b(rt, {
-		className: K(o),
+		className: q(o),
 		bounds: h ?? void 0,
 		clipInsets: u,
 		style: { pointerEvents: "none" },
-		children: b(ue, {
+		children: b(le, {
 			bounds: v,
 			alignWidth: i,
 			hole: x,
@@ -3124,7 +3133,7 @@ var Cr = s((e) => {
 			["insert-bar-cap-end", h(r.end) ? r.end : null]
 		];
 	})(e).map(([t, i]) => i && b(rt, {
-		className: K(t, e ? "row" : "column"),
+		className: q(t, e ? "row" : "column"),
 		bounds: i,
 		style: {
 			pointerEvents: "none",
@@ -3354,7 +3363,7 @@ var Pr = (e) => {
 			willChange: "transform"
 		} : void 0
 	}, R = {
-		className: K("drag-handle", v),
+		className: q("drag-handle", v),
 		onPointerDown: (e) => {
 			k(e) ? d(e) : A(e);
 		},
@@ -3445,7 +3454,7 @@ var Rr = () => {
 		}
 	};
 }, Wr = (e, t) => e === t || !!e && !!t && e.axis === t.axis && H.isEqualCells(e.origin, t.origin), Gr = (e, t, n) => {
-	let r = e.rowEnd - e.rowStart, i = e.colEnd - e.colStart, a = q(t.origin.rowIndex, n.rowStart, n.rowEnd - r), o = q(t.origin.colIndex, n.colStart, n.colEnd - i);
+	let r = e.rowEnd - e.rowStart, i = e.colEnd - e.colStart, a = J(t.origin.rowIndex, n.rowStart, n.rowEnd - r), o = J(t.origin.colIndex, n.colStart, n.colEnd - i);
 	return {
 		...e,
 		rowStart: a,
@@ -3527,14 +3536,14 @@ var Rr = () => {
 	return x(y, { children: [
 		b(rt, r === "entire" ? {
 			ref: v,
-			className: K("drag-grip", m),
+			className: q("drag-grip", m),
 			...N ? { bounds: N } : { range: t },
 			style: { cursor: O },
 			...k,
 			...A
 		} : {
 			ref: v,
-			className: K("drag-grip", m),
+			className: q("drag-grip", m),
 			range: t,
 			clipInsets: -j / 2,
 			style: {
@@ -3542,7 +3551,7 @@ var Rr = () => {
 				cursor: O
 			},
 			...k,
-			children: b(ue, {
+			children: b(le, {
 				stroke: "transparent",
 				alignWidth: i,
 				propsStrokePath: {
@@ -3558,7 +3567,7 @@ var Rr = () => {
 };
 Kr.displayName = "Draggable";
 var qr = (e, t, n, r) => {
-	let i = e.rowEnd - e.rowStart, a = e.colEnd - e.colStart, o = q(e.rowStart + t, r.rowStart, r.rowEnd - i), s = q(e.colStart + n, r.colStart, r.colEnd - a);
+	let i = e.rowEnd - e.rowStart, a = e.colEnd - e.colStart, o = J(e.rowStart + t, r.rowStart, r.rowEnd - i), s = J(e.colStart + n, r.colStart, r.colEnd - a);
 	return {
 		rowStart: o,
 		colStart: s,
@@ -3625,7 +3634,7 @@ var qr = (e, t, n, r) => {
 Xr.displayName = "RangeResizer";
 var Zr = (e, t, n, r) => {
 	let { rowStart: i, colStart: a, rowEnd: o, colEnd: s } = e;
-	return t.includes("t") && (i = q(n.rowIndex, r.rowStart, r.rowEnd)), t.includes("b") && (o = q(n.rowIndex, r.rowStart, r.rowEnd)), t.includes("l") && (a = q(n.colIndex, r.colStart, r.colEnd)), t.includes("r") && (s = q(n.colIndex, r.colStart, r.colEnd)), {
+	return t.includes("t") && (i = J(n.rowIndex, r.rowStart, r.rowEnd)), t.includes("b") && (o = J(n.rowIndex, r.rowStart, r.rowEnd)), t.includes("l") && (a = J(n.colIndex, r.colStart, r.colEnd)), t.includes("r") && (s = J(n.colIndex, r.colStart, r.colEnd)), {
 		rowStart: Math.min(i, o),
 		colStart: Math.min(a, s),
 		rowEnd: Math.max(i, o),
@@ -3737,7 +3746,7 @@ ei.displayName = "FillHandle";
 var ti = s((e) => {
 	let { value: t, zoom: n, bounds: r, cell: i, range: a, children: o, className: s, ...c } = e;
 	return b("div", {
-		className: K(s, "cell"),
+		className: q(s, "cell"),
 		...c,
 		children: t
 	});
@@ -3986,7 +3995,7 @@ var ti = s((e) => {
 	]);
 	return x(y, { children: [b(rt, {
 		fill: !0,
-		className: K("tiles", ui.tiles, f, o),
+		className: q("tiles", ui.tiles, f, o),
 		style: {
 			pointerEvents: "none",
 			...s,
@@ -4000,7 +4009,7 @@ di.displayName = "CellTileDiv";
 var fi = s((e) => {
 	let { renderCell: t, cacheToken: n, getVisibleCells: r, hiddenCellAt: i, suppressCell: a, className: o, style: s, ...c } = e;
 	return b($e, {
-		className: K(o, "cells"),
+		className: q(o, "cells"),
 		...c,
 		children: b(di, {
 			renderCell: t,
@@ -4092,7 +4101,7 @@ var $ = 8, pi = 1 << 19, mi = 1, hi = 512, gi = !1, _i = (e, t, n) => {
 	if (!n) return null;
 	let a = e.getPaneBounds(), o = Math.ceil(a.width), s = Math.ceil(a.height), c = String(xi / T.getDevicePixelRatio());
 	return b("svg", {
-		className: K(t ? "horizontal" : "vertical"),
+		className: q(t ? "horizontal" : "vertical"),
 		width: `${o}`,
 		height: `${s}`,
 		viewBox: `0 0 ${o} ${s}`,
@@ -4121,10 +4130,10 @@ var $ = 8, pi = 1 << 19, mi = 1, hi = 512, gi = !1, _i = (e, t, n) => {
 	]);
 	return h || g ? b($e, {
 		...d,
-		className: K(l, "gridlines"),
+		className: q(l, "gridlines"),
 		children: x(rt, {
 			fill: !0,
-			className: K("gridlines-box", ui.gridlines),
+			className: q("gridlines-box", ui.gridlines),
 			style: {
 				pointerEvents: "none",
 				...u
@@ -4152,7 +4161,7 @@ var xi = 1, Si = -10, Ci = class {
 		H.isEqualSelectionCoords(this._coords, e) || (this._coords = e, this.listeners.forEach((e) => e()));
 	}
 	navigate(e, t = !1, n = !1, r = 1) {
-		let i = this._getBounds(), { cell: a } = this._coords, o = e === U.Down ? 1 : e === U.Up ? -1 : 0, s = e === U.Right ? 1 : e === U.Left ? -1 : 0, c = (e) => e === 0 ? 0 : n ? e > 0 ? Infinity : -Infinity : e * Math.max(1, r), l = this._activeRange(), u = t ? a.rowIndex === l.rowStart ? l.rowEnd : l.rowStart : a.rowIndex, d = t ? a.colIndex === l.colStart ? l.colEnd : l.colStart : a.colIndex, f = q(u + c(o), i.rowStart, i.rowEnd), p = q(d + c(s), i.colStart, i.colEnd);
+		let i = this._getBounds(), { cell: a } = this._coords, o = e === U.Down ? 1 : e === U.Up ? -1 : 0, s = e === U.Right ? 1 : e === U.Left ? -1 : 0, c = (e) => e === 0 ? 0 : n ? e > 0 ? Infinity : -Infinity : e * Math.max(1, r), l = this._activeRange(), u = t ? a.rowIndex === l.rowStart ? l.rowEnd : l.rowStart : a.rowIndex, d = t ? a.colIndex === l.colStart ? l.colEnd : l.colStart : a.colIndex, f = J(u + c(o), i.rowStart, i.rowEnd), p = J(d + c(s), i.colStart, i.colEnd);
 		if (!t) return void this.setSelection({
 			cell: {
 				rowIndex: f,
@@ -4177,7 +4186,7 @@ var xi = 1, Si = -10, Ci = class {
 		let r = e === W.Row ? t ? U.Left : U.Right : t ? U.Up : U.Down, i = this._coords;
 		if (!(i.ranges && i.ranges.length > 0) || H.isEqualRangesArrays([H.cellToRange(i.cell)], i.ranges)) {
 			if (n && !H.isSingleCell(n)) {
-				let e = re.findNextCellWithinSelection({
+				let e = G.findNextCellWithinSelection({
 					ranges: [n],
 					cell: i.cell,
 					rangeIndex: 0
@@ -4192,7 +4201,7 @@ var xi = 1, Si = -10, Ci = class {
 			this.navigate(r);
 			return;
 		}
-		let a = re.findNextCellWithinSelection(i, r, (e) => H.cellToRange(e));
+		let a = G.findNextCellWithinSelection(i, r, (e) => H.cellToRange(e));
 		this.setSelection(a);
 	}
 	_activeIndex() {
@@ -4293,13 +4302,13 @@ var xi = 1, Si = -10, Ci = class {
 		};
 	}
 }, wi = (e, t) => ({
-	rowStart: q(e.rowStart, t.rowStart, t.rowEnd),
-	colStart: q(e.colStart, t.colStart, t.colEnd),
-	rowEnd: q(e.rowEnd, t.rowStart, t.rowEnd),
-	colEnd: q(e.colEnd, t.colStart, t.colEnd)
+	rowStart: J(e.rowStart, t.rowStart, t.rowEnd),
+	colStart: J(e.colStart, t.colStart, t.colEnd),
+	rowEnd: J(e.rowEnd, t.rowStart, t.rowEnd),
+	colEnd: J(e.colEnd, t.colStart, t.colEnd)
 }), Ti = (e, t) => ({
-	rowIndex: q(e.rowIndex, t.rowStart, t.rowEnd),
-	colIndex: q(e.colIndex, t.colStart, t.colEnd)
+	rowIndex: J(e.rowIndex, t.rowStart, t.rowEnd),
+	colIndex: J(e.colIndex, t.colStart, t.colEnd)
 }), Ei = {
 	rowStart: 0,
 	colStart: 0,
@@ -4623,7 +4632,7 @@ var zi = (e) => {
 	});
 	return f(() => {
 		v();
-	}, [t, v]), ae(b("div", {
+	}, [t, v]), ie(b("div", {
 		ref: g.setFloating,
 		className: ["touch-select-grip", c].filter(Boolean).join(" "),
 		...l,
@@ -4679,21 +4688,21 @@ var zi = (e) => {
 	side: "b",
 	align: "end"
 }, Ji = t.forwardRef((e, n) => {
-	let { selection: r, getContentBounds: i, getRegionBounds: a, scrollIntoView: o, singleStyle: s, multiStyle: c, multiAnchorStyle: l, singleAnchorStyle: u, removePreviewStyle: d, insertBarStyle: f, isDropRefused: p, moveSourceStyle: m, singleLayer: h, multiLayer: g, enabledMove: _, onMove: v, onMoveStart: S, onMoveUpdate: C, onMoveEnd: T, moveCursor: E, enableFill: D, snapFillDestination: O, onFill: k, onFillStart: A, onFillPreview: j, onFillEnd: M, onFillMenu: N, resolveFillExtent: F, onEdgeDoubleClick: I, onSelectionEnd: L, onDragModeChange: R, renderTip: z, tipPlacement: ee, disableKeyboard: B, anchorHole: V = !0, ...ne } = e, re = P(r, (e) => e.getSelection()), ie = Li(r, { onSelectionEnd: L }), ae = t.useRef(R);
-	ae.current = R, t.useEffect(() => {
-		ae.current?.(ie.dragMode);
-	}, [ie.dragMode]);
-	let [G, oe] = t.useState(null), se = Z(), ce = t.useRef(r);
-	ce.current = r;
-	let le = t.useRef(se);
-	le.current = se;
-	let ue = t.useRef(i);
-	ue.current = i;
-	let de = t.useRef(a);
-	de.current = a;
-	let fe = t.useRef(o);
-	fe.current = o;
-	let pe = t.useMemo(() => function(e) {
+	let { selection: r, getContentBounds: i, getRegionBounds: a, scrollIntoView: o, singleStyle: s, multiStyle: c, multiAnchorStyle: l, singleAnchorStyle: u, removePreviewStyle: d, insertBarStyle: f, isDropRefused: p, moveSourceStyle: m, singleLayer: h, multiLayer: g, enabledMove: _, onMove: v, onMoveStart: S, onMoveUpdate: C, onMoveEnd: T, moveCursor: E, enableFill: D, snapFillDestination: O, onFill: k, onFillStart: A, onFillPreview: j, onFillEnd: M, onFillMenu: N, resolveFillExtent: F, onEdgeDoubleClick: I, onSelectionEnd: L, onDragModeChange: R, renderTip: z, tipPlacement: ee, disableKeyboard: B, anchorHole: V = !0, ...ne } = e, G = P(r, (e) => e.getSelection()), re = Li(r, { onSelectionEnd: L }), ie = t.useRef(R);
+	ie.current = R, t.useEffect(() => {
+		ie.current?.(re.dragMode);
+	}, [re.dragMode]);
+	let [K, ae] = t.useState(null), oe = Z(), se = t.useRef(r);
+	se.current = r;
+	let ce = t.useRef(oe);
+	ce.current = oe;
+	let le = t.useRef(i);
+	le.current = i;
+	let ue = t.useRef(a);
+	ue.current = a;
+	let de = t.useRef(o);
+	de.current = o;
+	let fe = t.useMemo(() => function(e) {
 		let { getSelection: t, getPane: n, getContentBounds: r, getScrollIntoView: i = () => {}, getRegionBounds: a = () => null } = e, o = () => t(), s = () => n(), c = () => s().getTotalRange(), l = r ?? c, u = (e) => a(e), d = (e) => {
 			let t = i();
 			t ? t(e) : s().scrollCellCoordsIntoView(e);
@@ -4902,27 +4911,27 @@ var zi = (e) => {
 			}
 		};
 	}({
-		getSelection: () => ce.current,
-		getPane: () => le.current,
-		getContentBounds: () => ue.current?.() ?? le.current.getTotalRange(),
-		getScrollIntoView: () => fe.current,
-		getRegionBounds: (e) => de.current?.(e) ?? null
+		getSelection: () => se.current,
+		getPane: () => ce.current,
+		getContentBounds: () => le.current?.() ?? ce.current.getTotalRange(),
+		getScrollIntoView: () => de.current,
+		getRegionBounds: (e) => ue.current?.(e) ?? null
 	}), []);
-	t.useImperativeHandle(n, () => pe, [pe]);
-	let me = !!re.ranges && re.ranges.length > 0, he = me ? [...re.ranges] : [H.cellToRange(re.cell)], K = he.length > 1, q = re.rangeIndex ?? -1, ge = me ? q >= 0 ? q : he.length - 1 : 0, _e = se.getRangeFromCell(re.cell), J = H.unionRanges(he[ge] ?? H.cellToRange(re.cell), _e), ve = he.filter((e, t) => t !== ge), Y = K ? Ki(Mi, c) : Ki(ji, s), ye = {
+	t.useImperativeHandle(n, () => fe, [fe]);
+	let pe = !!G.ranges && G.ranges.length > 0, me = pe ? [...G.ranges] : [H.cellToRange(G.cell)], q = me.length > 1, J = G.rangeIndex ?? -1, he = pe ? J >= 0 ? J : me.length - 1 : 0, ge = oe.getRangeFromCell(G.cell), _e = me[he] ?? H.cellToRange(G.cell), Y = ge && H.isRangeWithinRange(_e, ge) ? ge : _e, ve = H.intersectRanges(ge, Y) ?? H.cellToRange(G.cell), ye = me.filter((e, t) => t !== he), be = q ? Ki(Mi, c) : Ki(ji, s), xe = {
 		...Ni,
 		...l
-	}, be = Ki(Pi, d), { refusedColor: xe, ...Se } = {
+	}, Se = Ki(Pi, d), { refusedColor: Ce, ...we } = {
 		...Fi,
 		...f
-	}, Ce = m === null ? null : Ki(Ii, m), we = (e, t) => {
-		let n = t.mods.shiftKey ? t.insert : null, r = t.mods.ctrlKey || t.mods.metaKey, i = n ? Gr(e, n, se.getTotalRange()) : e, a = {
+	}, Te = m === null ? null : Ki(Ii, m), X = (e, t) => {
+		let n = t.mods.shiftKey ? t.insert : null, r = t.mods.ctrlKey || t.mods.metaKey, i = n ? Gr(e, n, oe.getTotalRange()) : e, a = {
 			to: i,
 			copy: r,
 			insert: n?.axis
 		};
-		return a.refused = !!n && !r && (p ? p(J, a) : H.isRefusedInsertCut(H.classifyInsertCut(J, i, n.axis))), a;
-	}, Te = (e) => {
+		return a.refused = !!n && !r && (p ? p(Y, a) : H.isRefusedInsertCut(H.classifyInsertCut(Y, i, n.axis))), a;
+	}, Ee = (e) => {
 		let t = r.getSelection(), n = t.ranges, i = !!n && n.length > 0, a = i ? t.rangeIndex !== void 0 && t.rangeIndex >= 0 && t.rangeIndex < n.length ? t.rangeIndex : n.length - 1 : 0, o = i ? n.map((t, n) => n === a ? e : t) : [e], s = H.isCellWithinRange(t.cell, e) ? t.cell : {
 			rowIndex: e.rowStart,
 			colIndex: e.colStart
@@ -4932,66 +4941,66 @@ var zi = (e) => {
 			ranges: o,
 			rangeIndex: a
 		});
-	}, X = G ?? (ie.dragMode === "extend" ? {
+	}, De = K ?? (re.dragMode === "extend" ? {
 		kind: "select",
-		range: J
-	} : null), Ee = X && z ? z(X) : null, De = t.Children.map(K ? g : h, (e) => {
+		range: Y
+	} : null), Oe = De && z ? z(De) : null, ke = t.Children.map(q ? g : h, (e) => {
 		if (!t.isValidElement(e)) return e;
 		let n = e.props;
 		return t.cloneElement(e, {
-			range: J,
+			range: Y,
 			onDragEnd: (e, t) => {
-				n.onDragEnd?.(e, t), Te(e);
+				n.onDragEnd?.(e, t), Ee(e);
 			}
 		});
 	});
 	return x($e, {
 		...ne,
-		onPointerDown: ie.onPointerDown,
-		onPointerMove: ie.onPointerMove,
-		onPointerUp: ie.onPointerUp,
+		onPointerDown: re.onPointerDown,
+		onPointerMove: re.onPointerMove,
+		onPointerUp: re.onPointerUp,
 		onKeyDown: B ? void 0 : (e) => {
-			pe.handleKey(e) && (e.preventDefault(), e.stopPropagation());
+			fe.handleKey(e) && (e.preventDefault(), e.stopPropagation());
 		},
 		children: [
-			G?.kind === "move" && !G.drop.copy && Ce && !H.isEqualRanges(G.to, G.from) && Yi(Ce, G.from, void 0, !1, "move-source"),
-			x(y, K ? { children: [
-				ve.map((e, n) => b(t.Fragment, { children: Yi(Y, e) }, `other-${n}`)),
-				Yi(Y, J, V ? _e : void 0),
+			K?.kind === "move" && !K.drop.copy && Te && !H.isEqualRanges(K.to, K.from) && Yi(Te, K.from, void 0, !1, "move-source"),
+			x(y, q ? { children: [
+				ye.map((e, n) => b(t.Fragment, { children: Yi(be, e) }, `other-${n}`)),
+				Yi(be, Y, V ? ve : void 0),
 				b(Sr, {
 					className: "anchor",
-					range: _e,
-					...ye
+					range: ve,
+					...xe
 				})
-			] } : { children: [Yi(Y, J, V ? _e : void 0), u && b(Sr, {
+			] } : { children: [Yi(be, Y, V ? ve : void 0), u && b(Sr, {
 				className: "anchor",
-				range: _e,
+				range: ve,
 				...u
 			})] }),
-			!K && _ && b(Kr, {
+			!q && _ && b(Kr, {
 				className: "move-grip",
-				range: J,
+				range: Y,
 				grip: "edges",
 				dragCursor: E,
 				renderMove: (e, t) => {
-					let n = we(e, t);
+					let n = X(e, t);
 					return n.insert ? b(Cr, {
 						range: n.to,
 						axis: n.insert,
-						...Se,
-						color: (n.refused ? xe : void 0) ?? Se.color
-					}) : Y.border && b(Sr, {
+						...we,
+						color: (n.refused ? Ce : void 0) ?? we.color
+					}) : be.border && b(Sr, {
 						className: "move-ghost",
 						range: n.to,
-						...Y.border,
+						...be.border,
 						animatedTransition: !0,
 						style: { opacity: .6 }
 					});
 				},
 				onEdgeDoubleClick: I,
 				onDragStart: (e, t, n) => {
-					let r = we(e, n);
-					S?.(e, t, r), oe({
+					let r = X(e, n);
+					S?.(e, t, r), ae({
 						kind: "move",
 						from: e,
 						to: r.to,
@@ -4999,20 +5008,20 @@ var zi = (e) => {
 					});
 				},
 				onDragMove: (e, t, n) => {
-					let r = we(e, n);
-					C?.(J, r.to, t, r), oe({
+					let r = X(e, n);
+					C?.(Y, r.to, t, r), ae({
 						kind: "move",
-						from: J,
+						from: Y,
 						to: r.to,
 						drop: r
 					});
 				},
 				onDragStateChange: (e) => {
-					e || (T?.(), oe(null));
+					e || (T?.(), ae(null));
 				},
 				onDragEnd: (e, t, n) => {
-					let i = we(e, n);
-					i.refused || (v?.(J, i.to, t, i), r.modify({
+					let i = X(e, n);
+					i.refused || (v?.(Y, i.to, t, i), r.modify({
 						rowIndex: i.to.rowEnd,
 						colIndex: i.to.colEnd
 					}, {
@@ -5021,53 +5030,53 @@ var zi = (e) => {
 					}));
 				}
 			}),
-			!K && D && b(ei, {
-				range: J,
+			!q && D && b(ei, {
+				range: Y,
 				snapDestination: O,
-				...Y.border,
+				...be.border,
 				onDragStart: (e, t) => {
-					A?.(e, t), oe({
+					A?.(e, t), ae({
 						kind: "fill",
 						template: e,
 						destination: e
 					});
 				},
 				onDragMove: (e, t) => {
-					j?.(J, e, t), oe({
+					j?.(Y, e, t), ae({
 						kind: "fill",
-						template: J,
+						template: Y,
 						destination: e
 					});
 				},
 				onDragEnd: (e, t) => {
-					k?.(J, e, t), Te(e);
+					k?.(Y, e, t), Ee(e);
 				},
 				onMenu: N ? (e, t, n) => {
-					N(J, e, t, n);
+					N(Y, e, t, n);
 				} : void 0,
 				onDragDone: () => {
-					M?.(), oe(null);
+					M?.(), ae(null);
 				},
 				onDoubleClick: F ? (e, t) => {
 					let n = F(e);
-					n && !H.isEqualRanges(n, e) && (k?.(e, n, t), Te(n));
+					n && !H.isEqualRanges(n, e) && (k?.(e, n, t), Ee(n));
 				} : void 0
 			}),
-			ie.removePreview && Yi(be, ie.removePreview, void 0, !1, "remove-preview"),
-			De,
-			Ee != null && X && b(Qn, {
+			re.removePreview && Yi(Se, re.removePreview, void 0, !1, "remove-preview"),
+			ke,
+			Oe != null && De && b(Qn, {
 				className: "gesture-tip",
-				anchor: { range: (Oe = X, Oe.kind === "move" ? Oe.to : Oe.kind === "fill" ? Oe.destination : Oe.range) },
+				anchor: { range: (Ae = De, Ae.kind === "move" ? Ae.to : Ae.kind === "fill" ? Ae.destination : Ae.range) },
 				placement: ee ?? qi,
 				offset: 8,
 				whenOff: "clamp",
 				open: !0,
 				style: { pointerEvents: "none" },
-				children: Ee
+				children: Oe
 			})
 		]
 	});
-	var Oe;
+	var Ae;
 });
 Ji.displayName = "SelectionLayer";
 var Yi = (e, t, n, r = !1, i = "range") => x(y, { children: [
@@ -5157,7 +5166,7 @@ var Yi = (e, t, n, r = !1, i = "range") => x(y, { children: [
 		children: [
 			(!a || O) && b(rt, {
 				fill: !0,
-				className: K(m, "ranges-picker-draw"),
+				className: q(m, "ranges-picker-draw"),
 				onPointerDown: (e) => {
 					e.stopPropagation(), d && e.preventDefault(), L.onPointerDown(e);
 				},
@@ -5538,86 +5547,92 @@ function pa(e) {
 	let { editable: t, renderEditor: n, alignment: r = "left", background: i = "var(--sxl-color-base-100, rgb(255, 255, 255))", borderColor: a = "var(--sxl-color-primary, rgb(33, 115, 70))", borderWidth: o = 2, zIndex: s, className: c, style: l, ...d } = e, f = Xe(), p = P(t, (e) => e.getSession()), m = z(p, (e) => e.getState()), [h, _] = g(null), v = F((e) => {
 		_((t) => t && t.width === e.width && t.height === e.height ? t : e);
 	}, []), y = F((e) => {
-		if (t.getSession()) return;
-		let n = t.getAnchor().getCoords();
-		if (!n) return;
-		let r = ia(e.nativeEvent);
-		r && (e.nativeEvent.key !== "Process" && e.nativeEvent.keyCode !== 229 && e.preventDefault(), e.stopPropagation(), t.startEdit(n, r));
-	}, [t]), x = F((e) => {
-		if (t.getSession()) return;
-		let n = f?.getCellFromPointer(e.clientX, e.clientY) ?? t.getAnchor().getCoords();
-		n && t.startEdit(n, { mode: "edit" });
-	}, [f, t]), S = F((e) => {
 		let n = t.commit(e);
 		return n && f?.focus(), n;
-	}, [t, f]), C = F(() => {
+	}, [t, f]), x = F(() => {
 		t.cancel(), f?.focus();
 	}, [t, f]);
 	u(() => {
 		m && f && f.scrollCellCoordsIntoView(m.coords);
 	}, [m?.token]);
-	let w = m ? m.coords : t.getAnchor().getCoords(), T = null, E = !1, D = !1;
-	if (f && w) {
-		let e = f.getRangeFromCell(w);
-		if (D = f.toClipBounds(f.getBoundsFromRange({
+	let S = m ? m.coords : t.getAnchor().getCoords(), C = null, w = !1, T = !1;
+	if (f && S) {
+		let e = f.getRangeFromCell(S);
+		if (T = f.toClipBounds(f.getBoundsFromRange({
 			rowStart: e.rowStart,
 			colStart: e.colStart,
 			rowEnd: e.rowStart,
 			colEnd: e.colStart
 		})) !== null, m) {
-			let e = la(f, w, h, r, o);
-			T = e?.bounds ?? null, E = e?.inView ?? !1;
-		} else T = f.getBoundsFromRange(e);
+			let e = la(f, S, h, r, o);
+			C = e?.bounds ?? null, w = e?.inView ?? !1;
+		} else C = f.getBoundsFromRange(e);
 	}
-	let O = null;
-	if (f && w) {
-		let e = f.getBoundsFromRange(f.getRangeFromCell(w)), t = f.getZoom() || 1;
-		e && (O = {
+	let E = null;
+	if (f && S) {
+		let e = f.getBoundsFromRange(f.getRangeFromCell(S)), t = f.getZoom() || 1;
+		e && (E = {
 			width: e.width / t,
 			height: e.height / t
 		});
 	}
-	let k = !!m && !!T && E, A = {
+	let D = !!m && !!C && w, O = {
 		open: !!m,
 		mode: m?.mode ?? "enter",
 		coords: m?.coords ?? null,
 		clean: m?.clean ?? null,
 		dirty: m?.dirty,
 		token: m?.token ?? 0,
-		autoFocus: (m?.autoFocus ?? !0) && k && D,
+		autoFocus: (m?.autoFocus ?? !0) && D && T,
 		initialSelection: m?.initialSelection,
 		zoom: f?.getZoom() ?? 1,
-		cellSize: O,
+		cellSize: E,
 		onDirtyChange: (e) => p?.setDirty(e),
 		onModeChange: (e) => p?.setMode(e),
-		onCommit: S,
-		onCancel: C,
+		onCommit: y,
+		onCancel: x,
 		onNaturalSize: v
-	}, j = typeof i == "function" ? (w ? i(w) : void 0) ?? "transparent" : i;
+	}, k = typeof i == "function" ? (S ? i(S) : void 0) ?? "transparent" : i;
+	return b($e, { children: C ? b(rt, {
+		...d,
+		className: q(c, "editor"),
+		bounds: C,
+		alignWidth: o,
+		keepMounted: !0,
+		style: {
+			...l,
+			display: "flex",
+			overflow: "hidden",
+			background: k,
+			borderColor: a,
+			boxShadow: D ? "rgba(60,64,67,.35) 2px 2px 6px 3px" : "none",
+			opacity: +!!D,
+			pointerEvents: D ? "auto" : "none"
+		},
+		children: n ? n(O) : b(fa, { ...O })
+	}) : null });
+}
+function ma(e) {
+	let { editable: t } = e, n = Xe();
 	return b($e, {
-		onKeyDown: y,
-		onDoubleClick: x,
-		children: T ? b(rt, {
-			...d,
-			className: K(c, "editor"),
-			bounds: T,
-			alignWidth: o,
-			keepMounted: !0,
-			style: {
-				...l,
-				display: "flex",
-				overflow: "hidden",
-				background: j,
-				borderColor: a,
-				boxShadow: k ? "rgba(60,64,67,.35) 2px 2px 6px 3px" : "none",
-				opacity: +!!k,
-				pointerEvents: k ? "auto" : "none"
-			},
-			children: n ? n(A) : b(fa, { ...A })
-		}) : null
+		className: "editor-start",
+		onKeyDown: F((e) => {
+			if (t.getSession()) return;
+			let r = n?.getElement();
+			if (r && e.target !== r) return;
+			let i = t.getAnchor().getCoords();
+			if (!i) return;
+			let a = ia(e.nativeEvent);
+			a && (e.nativeEvent.key !== "Process" && e.nativeEvent.keyCode !== 229 && e.preventDefault(), e.stopPropagation(), t.startEdit(i, a));
+		}, [t, n]),
+		onDoubleClick: F((e) => {
+			if (t.getSession()) return;
+			let r = n?.getCellFromPointer(e.clientX, e.clientY) ?? t.getAnchor().getCoords();
+			r && t.startEdit(r, { mode: "edit" });
+		}, [n, t])
 	});
 }
-function ma(e) {
+function ha(e) {
 	let { editable: t, renderEditor: n, idleClean: r = null, mapClean: i, editorId: a, readOnly: o, className: s, style: c } = e, l = P(t, (e) => e.getSession()), u = z(l, (e) => e.getState()), d = u?.clean ?? r, f = i ? i(d) : d, p = F((e) => t.commit(e), [t]), m = F(() => t.cancel(), [t]), h = F(() => {
 		o || (t.getSession() || t.startEdit(t.getAnchor().getCoords(), {
 			mode: "edit",
@@ -5650,15 +5665,15 @@ function ma(e) {
 		children: n ? n(g) : b(fa, { ...g })
 	});
 }
-fa.displayName = "DefaultEditorInput", ma.displayName = "EditorDiv";
-var ha = "ew-resize", ga = "ns-resize", _a = s(a((e, t) => {
+fa.displayName = "DefaultEditorInput", ha.displayName = "EditorDiv";
+var ga = "ew-resize", _a = "ns-resize", va = s(a((e, t) => {
 	let { axis: n, index: r, className: i, style: a, disabled: o = !1, disabledResize: s = !1, isNextHidden: c, isHidden: l, isSelected: u, isSelectedAll: d, showTouchDivider: f, bounds: p, onPointerDown: m, onAutoFit: h, ...g } = e, _ = Z(), v = n === W.Column, y = 1 / T.getDevicePixelRatio(), S = u || d, C = 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))", w = "var(--sxl-color-base-100, #f5f5f5)", E = T.detectIt().primaryInput === "touch", D = v ? 14 : 8, O = _.getZoom();
 	O < 1 && (D = Math.max(2, D * O * .8));
 	let k = D / 2, A = 0;
 	c && (A = -2), l && (A = 2), l && (D = D / 2 + A, k = 2 * A);
 	let j = C;
 	return S || A !== 0 || (j = `linear-gradient(${v ? 180 : 90}deg, ${w}, ${C} 55%, ${C} 100%)`), x("div", {
-		className: K("header-divider", { disabled: o }, i, `index-${r}`),
+		className: q("header-divider", { disabled: o }, i, `index-${r}`),
 		ref: t,
 		onPointerDown: E ? void 0 : m,
 		onDoubleClick: E ? void 0 : () => h?.(),
@@ -5670,7 +5685,7 @@ var ha = "ew-resize", ga = "ns-resize", _a = s(a((e, t) => {
 			position: "absolute",
 			overflow: "visible",
 			pointerEvents: "auto",
-			cursor: o || s || E ? void 0 : v ? ha : ga,
+			cursor: o || s || E ? void 0 : v ? ga : _a,
 			...a
 		},
 		...g,
@@ -5714,8 +5729,8 @@ var ha = "ew-resize", ga = "ns-resize", _a = s(a((e, t) => {
 			} })
 		}) : null]
 	});
-})), va = (e) => b(_a, { ...e }), ya = s(a((e, t) => {
-	let { axis: n, index: r, disabled: i = !1, disabledResize: a = !1, resizeThreshold: o = 1, renderDivider: s = va, onDividerMouseDown: c, onDividerResizeStart: l, onDividerResize: u, onDividerResizeEnd: d, onDividerMouseUp: f, onDividerAutoFit: p, onPointerDown: m, ..._ } = e, v = Z(), S = F(m, [m]), C = F(p, [p]), w = n === W.Column, E = w ? v.getVisibleColumns() : v.getVisibleRows(), D = null;
+})), ya = (e) => b(va, { ...e }), ba = s(a((e, t) => {
+	let { axis: n, index: r, disabled: i = !1, disabledResize: a = !1, resizeThreshold: o = 1, renderDivider: s = ya, onDividerMouseDown: c, onDividerResizeStart: l, onDividerResize: u, onDividerResizeEnd: d, onDividerMouseUp: f, onDividerAutoFit: p, onPointerDown: m, ..._ } = e, v = Z(), S = F(m, [m]), C = F(p, [p]), w = n === W.Column, E = w ? v.getVisibleColumns() : v.getVisibleRows(), D = null;
 	E.length > 0 && (D = w ? v.getBoundsFromRange({
 		rowStart: 0,
 		rowEnd: 0,
@@ -5778,15 +5793,15 @@ var ha = "ew-resize", ga = "ns-resize", _a = s(a((e, t) => {
 	}, v);
 	if (!te) return;
 	let H = null;
-	return k && k.isResizing && k.index === r && (H = ae(b("div", { style: {
+	return k && k.isResizing && k.index === r && (H = ie(b("div", { style: {
 		position: "absolute",
-		cursor: w ? ha : ga,
+		cursor: w ? ga : _a,
 		left: 0,
 		top: 0,
 		width: "100%",
 		height: "100%"
 	} }), V(), "divider:" + r)), x(y, { children: [H, b("div", {
-		className: K("header-divider-anchor"),
+		className: q("header-divider-anchor"),
 		style: {
 			position: "absolute",
 			pointerEvents: "auto",
@@ -5800,26 +5815,26 @@ var ha = "ew-resize", ga = "ns-resize", _a = s(a((e, t) => {
 		children: te
 	})] });
 }));
-ya.displayName = "HeaderDividerAnchor";
-var ba = (e, t, n) => t === W.Column ? {
+ba.displayName = "HeaderDividerAnchor";
+var xa = (e, t, n) => t === W.Column ? {
 	rowIndex: n.rowStart,
 	colIndex: e.colIndex
 } : {
 	rowIndex: e.rowIndex,
 	colIndex: n.colStart
-}, xa = (e, t, n) => t === W.Column ? {
+}, Sa = (e, t, n) => t === W.Column ? {
 	rowIndex: n.rowEnd,
 	colIndex: e.colIndex
 } : {
 	rowIndex: e.rowIndex,
 	colIndex: n.colEnd
-}, Sa = (e, t, n) => t === W.Column ? {
+}, Ca = (e, t, n) => t === W.Column ? {
 	rowIndex: n.rowStart,
 	colIndex: e.colIndex
 } : {
 	rowIndex: e.rowIndex,
 	colIndex: n.colStart
-}, Ca = (e, t, n, r) => n === W.Column ? {
+}, wa = (e, t, n, r) => n === W.Column ? {
 	rowStart: r.rowStart,
 	rowEnd: r.rowEnd,
 	colStart: Math.min(e.colIndex, t.colIndex),
@@ -5829,7 +5844,7 @@ var ba = (e, t, n) => t === W.Column ? {
 	colEnd: r.colEnd,
 	rowStart: Math.min(e.rowIndex, t.rowIndex),
 	rowEnd: Math.max(e.rowIndex, t.rowIndex)
-}, wa = (e, t, n) => {
+}, Ta = (e, t, n) => {
 	let r = null, i = null, a = 0, o = () => t.getAllPanes()[V.Center] ?? t, s = (t, n, r) => {
 		if (!e) return;
 		let i = e.getSelection(), a = !!i.ranges && i.ranges.length > 0;
@@ -5870,7 +5885,7 @@ var ba = (e, t, n) => t === W.Column ? {
 		let a = o().getVisibleRange(), s = null;
 		return t === W.Column ? e.x >= i.right - 24 && a.colEnd < r.colEnd ? s = { colIndex: a.colEnd + 1 } : e.x <= i.left + 24 && a.colStart > r.colStart && (s = { colIndex: a.colStart - 1 }) : e.y >= i.bottom - 24 && a.rowEnd < r.rowEnd ? s = { rowIndex: a.rowEnd + 1 } : e.y <= i.top + 24 && a.rowStart > r.rowStart && (s = { rowIndex: a.rowStart - 1 }), !!s && (l(s), !0);
 	}, d = (e) => {
-		let { axis: t, entireRange: l, replaceActive: u = !1 } = n(), d = Ca(r ?? e, e, t, l), f = i ?? Sa(e, t, o().getVisibleRange());
+		let { axis: t, entireRange: l, replaceActive: u = !1 } = n(), d = wa(r ?? e, e, t, l), f = i ?? Ca(e, t, o().getVisibleRange());
 		u ? c(a, d, f) : s(d, f, "replace");
 	};
 	return Mr(t, (t, f) => {
@@ -5880,11 +5895,11 @@ var ba = (e, t, n) => t === W.Column ? {
 		let { axis: h, entireRange: g, allowMulti: _ = !0, replaceActive: v = !1, preserveFocus: y = !1, onPointerDownInterceptor: b, onDragStart: x, onDragEnd: S, onPointerUp: C } = n();
 		if (!1 === b?.(f, t)) return null;
 		v && f.stopPropagation(), y && p && f.preventDefault(), x?.();
-		let w = Sa(t, h, o().getVisibleRange()), T = f.shiftKey, E = (f.ctrlKey || f.metaKey) && _;
+		let w = Ca(t, h, o().getVisibleRange()), T = f.shiftKey, E = (f.ctrlKey || f.metaKey) && _;
 		if (v) {
 			let n = e.getSelection(), o = n.ranges ?? [], s = n.rangeIndex ?? -1;
-			T && r ? (a = s >= 0 ? s : Math.max(0, o.length - 1), c(a, Ca(r, t, h, g), i ?? w)) : (r = t, i = w, a = E || s < 0 ? o.length : s, c(a, Ca(t, t, h, g), w));
-		} else T && r ? s(Ca(r, t, h, g), i ?? w, "replace") : E ? (r = t, i = w, s(Ca(t, t, h, g), w, "append")) : (r = t, i = w, s(Ca(t, t, h, g), w, "clear"));
+			T && r ? (a = s >= 0 ? s : Math.max(0, o.length - 1), c(a, wa(r, t, h, g), i ?? w)) : (r = t, i = w, a = E || s < 0 ? o.length : s, c(a, wa(t, t, h, g), w));
+		} else T && r ? s(wa(r, t, h, g), i ?? w, "replace") : E ? (r = t, i = w, s(wa(t, t, h, g), w, "append")) : (r = t, i = w, s(wa(t, t, h, g), w, "clear"));
 		return ((e) => {
 			l(n().axis === W.Column ? { colIndex: e.colIndex } : { rowIndex: e.rowIndex });
 		})(t), {
@@ -5900,17 +5915,17 @@ var ba = (e, t, n) => t === W.Column ? {
 			captureEvents: v
 		};
 	});
-}, Ta = (e, t) => {
+}, Ea = (e, t) => {
 	let n = Z(), r = h(t);
 	r.current = t;
-	let i = p(() => wa(e, n, () => r.current), [e, n]);
+	let i = p(() => Ta(e, n, () => r.current), [e, n]);
 	return u(() => () => i.dispose(), [i]), {
 		onPointerDown: i.onPointerDown,
 		onPointerMove: i.onPointerMove,
 		onPointerUp: i.onPointerUp
 	};
-}, Ea = (e) => e == null ? [] : Array.isArray(e) ? e : [e], Da = s(a((e, t) => {
-	let { rowCount: n = 1, columnCount: r = 1, getRowHeight: i, getColumnWidth: a, metrics: o, renderCells: s, renderBorders: l, showGridLines: u = !0, gridLineColor: d, propsGridLineRows: f, propsGridLineColumns: h, getVisibleCells: g, hiddenCellAt: _, renderBelow: v, children: y, ...x } = e, S = oe({
+}, Da = (e) => e == null ? [] : Array.isArray(e) ? e : [e], Oa = s(a((e, t) => {
+	let { rowCount: n = 1, columnCount: r = 1, getRowHeight: i, getColumnWidth: a, metrics: o, renderCells: s, renderBorders: l, showGridLines: u = !0, gridLineColor: d, propsGridLineRows: f, propsGridLineColumns: h, getVisibleCells: g, hiddenCellAt: _, renderBelow: v, children: y, ...x } = e, S = ae({
 		rowCount: n,
 		columnCount: r,
 		getRowHeight: i,
@@ -5926,12 +5941,12 @@ var ba = (e, t, n) => t === W.Column ? {
 			propsColumns: h,
 			getVisibleCells: g,
 			hiddenCellAt: _
-		}, "__gridlines")), e.push(...Ea(v)), e.push(...Ea(l)), s && e.push(b(fi, {
+		}, "__gridlines")), e.push(...Da(v)), e.push(...Da(l)), s && e.push(b(fi, {
 			renderCell: s,
 			getVisibleCells: g,
 			hiddenCellAt: _,
 			cacheToken: E
-		}, "__cells")), e.push(...Ea(y)), e;
+		}, "__cells")), e.push(...Da(y)), e;
 	}, [
 		u,
 		d,
@@ -5954,8 +5969,8 @@ var ba = (e, t, n) => t === W.Column ? {
 		children: k
 	});
 }));
-Da.displayName = "Grid";
-var Oa = function() {}, ka = typeof window < "u", Aa = ka ? f : u, ja = {
+Oa.displayName = "Grid";
+var ka = function() {}, Aa = typeof window < "u", ja = Aa ? f : u, Ma = {
 	x: 0,
 	y: 0,
 	width: 0,
@@ -5964,8 +5979,8 @@ var Oa = function() {}, ka = typeof window < "u", Aa = ka ? f : u, ja = {
 	left: 0,
 	bottom: 0,
 	right: 0
-}, Ma = ka && window.ResizeObserver !== void 0 ? function() {
-	var e = g(null), t = e[0], n = e[1], r = g(ja), i = r[0], a = r[1], o = p(function() {
+}, Na = Aa && window.ResizeObserver !== void 0 ? function() {
+	var e = g(null), t = e[0], n = e[1], r = g(Ma), i = r[0], a = r[1], o = p(function() {
 		return new window.ResizeObserver(function(e) {
 			if (e[0]) {
 				var t = e[0].contentRect, n = t.x, r = t.y, i = t.width, o = t.height, s = t.top, c = t.left, l = t.bottom, u = t.right;
@@ -5982,24 +5997,24 @@ var Oa = function() {}, ka = typeof window < "u", Aa = ka ? f : u, ja = {
 			}
 		});
 	}, []);
-	return Aa(function() {
+	return ja(function() {
 		if (t) return o.observe(t), function() {
 			o.disconnect();
 		};
 	}, [t]), [n, i];
 } : function() {
-	return [Oa, ja];
+	return [ka, Ma];
 };
-function Na(e, t) {
+function Pa(e, t) {
 	if (typeof e == "function") return e(t);
 	e && (e.current = t);
 }
-var Pa, Fa = parseInt(v.split(".")[0], 10) >= 19 ? function(e) {
+var Fa, Ia = parseInt(v.split(".")[0], 10) >= 19 ? function(e) {
 	return (t) => {
 		let n = [];
 		for (let r of e) {
-			let e = Na(r, t), i = typeof e == "function";
-			n.push(i ? e : () => Na(r, null));
+			let e = Pa(r, t), i = typeof e == "function";
+			n.push(i ? e : () => Pa(r, null));
 		}
 		return () => {
 			for (let e of n) e();
@@ -6007,17 +6022,17 @@ var Pa, Fa = parseInt(v.split(".")[0], 10) >= 19 ? function(e) {
 	};
 } : function(e) {
 	return (t) => {
-		for (let n of e) Na(n, t);
+		for (let n of e) Pa(n, t);
 	};
-}, Ia = {
+}, La = {
 	fill: { fill: "color-mix(in srgb, var(--sxl-color-primary, rgb(0, 120, 215)) 14%, transparent)" },
 	border: null,
 	inner: null
-}, La = {
+}, Ra = {
 	stroke: "var(--sxl-color-primary, rgb(0, 120, 215))",
 	alignWidth: 1,
 	inset: 1
-}, Ra = a(function(e, t) {
+}, za = a(function(e, t) {
 	let { itemCount: n, renderCell: r, getVisibleCells: i, itemHeight: a = 24, contentWidth: o, selection: s, propsLayer: c, autoFocus: l, showScrollbar: d = "auto", scrollTo: f, viewport: m, cacheToken: g, className: _, style: v, children: y, ...S } = e, C = p(() => new A(), []), w = m ?? C, T = P(w, (e) => e.getMetrics()), E = d === "auto" ? T.totalHeight > T.height : d, O = h(null);
 	u(() => {
 		l && O.current?.focus();
@@ -6039,7 +6054,7 @@ var Pa, Fa = parseInt(v.split(".")[0], 10) >= 19 ? function(e) {
 		colStart: 0,
 		rowEnd: Math.max(0, n - 1),
 		colEnd: 0
-	}) }), [n]), j = s ?? k, [M, { width: N }] = Ma(), [F, { width: I }] = Ma(), L = I > 0 && N > 0 ? Math.max(0, I - N) : 0, R = p(() => Fa([F, t]), [F, t]), z = oe({
+	}) }), [n]), j = s ?? k, [M, { width: N }] = Na(), [F, { width: I }] = Na(), L = I > 0 && N > 0 ? Math.max(0, I - N) : 0, R = p(() => Ia([F, t]), [F, t]), z = ae({
 		rowCount: n,
 		columnCount: 1,
 		getRowHeight: a,
@@ -6047,7 +6062,7 @@ var Pa, Fa = parseInt(v.split(".")[0], 10) >= 19 ? function(e) {
 	});
 	return b("div", {
 		ref: R,
-		className: K("list-surface", _),
+		className: q("list-surface", _),
 		style: {
 			position: "relative",
 			overflow: "hidden",
@@ -6086,9 +6101,9 @@ var Pa, Fa = parseInt(v.split(".")[0], 10) >= 19 ? function(e) {
 						b(Ji, {
 							selection: j,
 							anchorHole: !1,
-							singleStyle: Ia,
-							singleAnchorStyle: La,
-							multiAnchorStyle: La
+							singleStyle: La,
+							singleAnchorStyle: Ra,
+							multiAnchorStyle: Ra
 						}, "__selection"),
 						b(fi, {
 							renderCell: r,
@@ -6101,7 +6116,7 @@ var Pa, Fa = parseInt(v.split(".")[0], 10) >= 19 ? function(e) {
 			})
 		})
 	});
-}), za = a(function(e, t) {
+}), Ba = a(function(e, t) {
 	let { itemCount: n, renderItem: r, itemHeight: i, selection: a, onKeyDown: o, cacheToken: s, scrollTo: l, autoFocus: u, viewport: d, className: f, style: m, children: h, ...g } = e, _ = R(t, () => ({ isList: () => !0 }), []), v = c((e) => {
 		let { key: t, style: n, range: i, cell: a } = e, o = i?.rowStart ?? a.rowIndex;
 		return b("div", {
@@ -6121,9 +6136,9 @@ var Pa, Fa = parseInt(v.split(".")[0], 10) >= 19 ? function(e) {
 			children: r(o)
 		}, t);
 	}, [r]), y = p(() => o ? { onKeyDown: o } : void 0, [o]);
-	return b(Ra, {
+	return b(za, {
 		ref: _,
-		className: K("list", f),
+		className: q("list", f),
 		style: m,
 		itemCount: n,
 		itemHeight: i,
@@ -6136,7 +6151,7 @@ var Pa, Fa = parseInt(v.split(".")[0], 10) >= 19 ? function(e) {
 		viewport: d,
 		...g
 	});
-}), Ba = (e, t) => b("input", {
+}), Va = (e, t) => b("input", {
 	type: "checkbox",
 	checked: e,
 	ref: (e) => {
@@ -6145,8 +6160,8 @@ var Pa, Fa = parseInt(v.split(".")[0], 10) >= 19 ? function(e) {
 	readOnly: !0,
 	tabIndex: -1,
 	style: { margin: 0 }
-}), Va = a(function(e, t) {
-	let { itemCount: n, isChecked: r, onCheckedChange: i, renderValue: a, renderCheckbox: o = Ba, renderDivider: s, selectAllLabel: l, itemHeight: u, selection: d, cacheToken: f, autoFocus: g, viewport: _, className: v, style: S, children: C, ...w } = e, T = p(() => new Ci({ getBounds: () => ({
+}), Ha = a(function(e, t) {
+	let { itemCount: n, isChecked: r, onCheckedChange: i, renderValue: a, renderCheckbox: o = Va, renderDivider: s, selectAllLabel: l, itemHeight: u, selection: d, cacheToken: f, autoFocus: g, viewport: _, className: v, style: S, children: C, ...w } = e, T = p(() => new Ci({ getBounds: () => ({
 		rowStart: 0,
 		colStart: 0,
 		rowEnd: Math.max(0, n - 1),
@@ -6231,7 +6246,7 @@ var Pa, Fa = parseInt(v.split(".")[0], 10) >= 19 ? function(e) {
 	]);
 	return x("div", {
 		ref: M,
-		className: K("checkbox-list", v),
+		className: q("checkbox-list", v),
 		style: {
 			display: "flex",
 			flexDirection: "column",
@@ -6258,7 +6273,7 @@ var Pa, Fa = parseInt(v.split(".")[0], 10) >= 19 ? function(e) {
 				},
 				children: o(I, L)
 			}), l]
-		}), s?.()] }), b(za, {
+		}), s?.()] }), b(Ba, {
 			itemCount: n,
 			itemHeight: u,
 			selection: E,
@@ -6274,21 +6289,21 @@ var Pa, Fa = parseInt(v.split(".")[0], 10) >= 19 ? function(e) {
 			}
 		})]
 	});
-}), Ha = (e, t) => {
+}), Ua = (e, t) => {
 	let n = (() => {
-		if (Pa !== void 0) return Pa;
+		if (Fa !== void 0) return Fa;
 		try {
-			Pa = (typeof document < "u" ? document.createElement("canvas").getContext("2d") : null) ?? null;
+			Fa = (typeof document < "u" ? document.createElement("canvas").getContext("2d") : null) ?? null;
 		} catch {
-			Pa = null;
+			Fa = null;
 		}
-		return Pa;
+		return Fa;
 	})();
 	if (n) return n.font = t, n.measureText(e).width;
 	let r = Number.parseFloat((/(\d+(?:\.\d+)?)px/.exec(t) ?? [])[1] ?? "16") || 16;
 	return e.length * r * .55;
-}, Ua = (e, t) => t <= 0 ? -1 : Math.min(Math.max(0, e), t - 1), Wa = a(function(e, t) {
-	let { items: n, onChoose: r, highlightIndex: i, itemHeight: a = 24, visibleRows: o = 8, contentWidth: s, measureText: l, renderItem: u, autoFocus: d, viewport: f, className: g, style: _, children: v, ...y } = e, x = n.length, S = Ua(i ?? 0, x), w = p(() => new Ci({
+}, Wa = (e, t) => t <= 0 ? -1 : Math.min(Math.max(0, e), t - 1), Ga = a(function(e, t) {
+	let { items: n, onChoose: r, highlightIndex: i, itemHeight: a = 24, visibleRows: o = 8, contentWidth: s, measureText: l, renderItem: u, autoFocus: d, viewport: f, className: g, style: _, children: v, ...y } = e, x = n.length, S = Wa(i ?? 0, x), w = p(() => new Ci({
 		initial: { cell: {
 			rowIndex: Math.max(0, S),
 			colIndex: 0
@@ -6309,7 +6324,7 @@ var Pa, Fa = parseInt(v.split(".")[0], 10) >= 19 ? function(e) {
 		x
 	]), A = F(() => x === 0 ? -1 : w.getSelection().cell.rowIndex, [w, x]), j = F((e) => {
 		if (x === 0) return;
-		let t = Ua(w.getSelection().cell.rowIndex + e, x);
+		let t = Wa(w.getSelection().cell.rowIndex + e, x);
 		w.setSelection({ cell: {
 			rowIndex: t,
 			colIndex: 0
@@ -6329,7 +6344,7 @@ var Pa, Fa = parseInt(v.split(".")[0], 10) >= 19 ? function(e) {
 			let t = e?.fontSize, n = e?.fontFamily, r = typeof t == "number" ? `${t}px` : t ?? "16px", i = [];
 			return e?.fontStyle && e.fontStyle !== "normal" && i.push(String(e.fontStyle)), e?.fontWeight && e.fontWeight !== "normal" && i.push(String(e.fontWeight)), i.push(r, n ? String(n) : "sans-serif"), i.join(" ");
 		})(_);
-		return (t) => Ha(t, e);
+		return (t) => Ua(t, e);
 	}, [l, _]), P = p(() => {
 		if (s != null) return s;
 		let e = 0;
@@ -6373,9 +6388,9 @@ var Pa, Fa = parseInt(v.split(".")[0], 10) >= 19 ? function(e) {
 			e.which !== C.Enter && e.which !== C.Space || (e.preventDefault(), e.stopPropagation(), k(A()));
 		}
 	}), [k, A]);
-	return b(Ra, {
+	return b(za, {
 		ref: M,
-		className: K("pick-list", g),
+		className: q("pick-list", g),
 		role: "listbox",
 		style: {
 			maxHeight: o * a,
@@ -6393,10 +6408,10 @@ var Pa, Fa = parseInt(v.split(".")[0], 10) >= 19 ? function(e) {
 		cacheToken: n,
 		...y
 	});
-}), Ga = "_search_b1nag_5", Ka = (e, t) => {
+}), Ka = "_search_b1nag_5", qa = (e, t) => {
 	let n = t.trim().toLowerCase();
 	return n ? e.filter((e) => e.text.toLowerCase().includes(n)) : e;
-}, qa = a(function(e, t) {
+}, Ja = a(function(e, t) {
 	let { value: n, onChange: r, onClose: i, onKeyDown: a, className: o, ...s } = e, l = c((e) => {
 		if (e.which === C.Escape) return e.preventDefault(), e.stopPropagation(), void (n ? r("") : i?.());
 		a?.(e);
@@ -6412,19 +6427,19 @@ var Pa, Fa = parseInt(v.split(".")[0], 10) >= 19 ? function(e) {
 		role: "searchbox",
 		autoComplete: "off",
 		spellCheck: !1,
-		className: K(Ga, "list-search", o),
+		className: q(Ka, "list-search", o),
 		value: n,
 		onChange: (e) => r(e.target.value),
 		onKeyDown: l,
 		...s
 	});
-}), Ja = {
+}), Ya = {
 	light: {},
 	dark: {
 		"color-base-100": "#1e1e1e",
 		"color-base-300": "#3a3a3a"
 	}
-}, Ya = {
+}, Xa = {
 	light: {
 		"color-base-100": "#f2f2f2",
 		"color-base-hover": "#ececec",
@@ -6435,7 +6450,7 @@ var Pa, Fa = parseInt(v.split(".")[0], 10) >= 19 ? function(e) {
 		"color-base-hover": "#2e2e2e",
 		"color-base-300": "#4a4a4a"
 	}
-}, Xa = (e, ...t) => N(e, Ja[e], ...t), Za = (e, ...t) => N(e, Ya[e], ...t), Qa = ({ app: e, grid: t = Ja, header: n = Ya, layer: r = "sxl-defaults", scope: i } = {}) => {
+}, Za = (e, ...t) => N(e, Ya[e], ...t), Qa = (e, ...t) => N(e, Xa[e], ...t), $a = ({ app: e, grid: t = Ya, header: n = Xa, layer: r = "sxl-defaults", scope: i } = {}) => {
 	let a = e ?? M, o = Object.fromEntries(Object.keys(n).map((e) => [e, {
 		"color-base-100": a[e]?.["color-base-200"],
 		...n[e]
@@ -6450,4 +6465,4 @@ var Pa, Fa = parseInt(v.split(".")[0], 10) >= 19 ? function(e) {
 		scope: i
 	});
 };
-export { Tr as AUTO_SCROLL_INTERVAL_MS, fi as CellLayer, di as CellTileDiv, Va as CheckboxList, Ni as DEFAULT_ANCHOR_STYLE, xr as DEFAULT_HANDLE_STYLE, Fi as DEFAULT_INSERT_BAR_STYLE, Ii as DEFAULT_MOVE_SOURCE_STYLE, Mi as DEFAULT_MULTI_STYLE, Pi as DEFAULT_REMOVE_PREVIEW_STYLE, ji as DEFAULT_SINGLE_STYLE, ti as DefaultCellRenderer, ca as DefaultEditable, fa as DefaultEditorInput, _a as DefaultHeaderDivider, Ci as DefaultSelection, Lr as DragHandle, Kr as Draggable, Er as EDGE_AUTO_SCROLL_MARGIN_PX, ra as EditSession, ma as EditorDiv, pa as EditorLayer, ei as FillHandle, Ja as GRID_SURFACE, Da as Grid, tr as GridFloatPanel, ze as GridSurface, bi as GridlineLayer, Ya as HEADER_SURFACE, ya as HeaderDividerAnchor, fr as HoverTipLayer, $e as Layer, le as LineSVG, za as List, qa as ListSearch, Ra as ListSurface, Or as NO_DRAG_MODIFIERS, Zi as PICKER_COLORS, Wa as PickList, Jr as RESIZE_ANCHORS_4, Yr as RESIZE_ANCHORS_8, dr as RangeFloatLayer, Cr as RangeInsertBar, br as RangePrompt, Sr as RangeRect, Xr as RangeResizer, ta as RangesPickerLayer, ue as RectangleSVG, Si as SELECTION_CLIP_INSETS, Ji as SelectionLayer, Ri as SelectionTouchGrips, se as ShapeBoundsContext, xt as StickyAnchor, Qn as StickyFloat, Ie as SurfaceStateContext, Le as SurfaceStateProvider, rt as VirtualDiv, Qa as buildGridThemeCSS, oa as commitArgsFromKey, G as createAxis, Mr as createDragCells, wa as createHeaderSelectionPointer, Fe as createSurfaceStateStore, Nr as createWindowDragCells, ea as defaultRangeStyle, Dr as edgeScrollPane, la as expandEditorBounds, Ka as filterByText, Xa as gridThemeVars, Sa as headerAnchorCell, xa as headerEntireEnd, ba as headerEntireStart, Ca as headerRange, Za as headerThemeVars, Ur as insertAt, Gr as insertRange, Ar as isSameDragModifiers, kr as readDragModifiers, rr as renderGridFloatPanel, Qr as resolveFillDestination, ia as startEventFromKey, Ir as useDoubleClick, Pr as useDragCells, sa as useEditorKeymap, Yn as useGridFloatTheme, oe as useGridMetrics, Z as useGridPane, Xe as useGridPaneOptional, Ta as useHeaderSelectionPointer, ar as useHoverIntent, Qe as useLayer, aa as usePendingCaret, or as useRangeHover, Li as useSelectionPointer, ce as useShapeBounds, yt as useSticky, bt as useStickyOptional, Ze as useSurfaceState, Fr as useWindowDragCells, $r as vacatedByFill };
+export { Tr as AUTO_SCROLL_INTERVAL_MS, fi as CellLayer, di as CellTileDiv, Ha as CheckboxList, Ni as DEFAULT_ANCHOR_STYLE, xr as DEFAULT_HANDLE_STYLE, Fi as DEFAULT_INSERT_BAR_STYLE, Ii as DEFAULT_MOVE_SOURCE_STYLE, Mi as DEFAULT_MULTI_STYLE, Pi as DEFAULT_REMOVE_PREVIEW_STYLE, ji as DEFAULT_SINGLE_STYLE, ti as DefaultCellRenderer, ca as DefaultEditable, fa as DefaultEditorInput, va as DefaultHeaderDivider, Ci as DefaultSelection, Lr as DragHandle, Kr as Draggable, Er as EDGE_AUTO_SCROLL_MARGIN_PX, ra as EditSession, ha as EditorDiv, pa as EditorLayer, ma as EditorStartLayer, ei as FillHandle, Ya as GRID_SURFACE, Oa as Grid, tr as GridFloatPanel, ze as GridSurface, bi as GridlineLayer, Xa as HEADER_SURFACE, ba as HeaderDividerAnchor, fr as HoverTipLayer, $e as Layer, ce as LineSVG, Ba as List, Ja as ListSearch, za as ListSurface, Or as NO_DRAG_MODIFIERS, Zi as PICKER_COLORS, Ga as PickList, Jr as RESIZE_ANCHORS_4, Yr as RESIZE_ANCHORS_8, dr as RangeFloatLayer, Cr as RangeInsertBar, br as RangePrompt, Sr as RangeRect, Xr as RangeResizer, ta as RangesPickerLayer, le as RectangleSVG, Si as SELECTION_CLIP_INSETS, Ji as SelectionLayer, Ri as SelectionTouchGrips, oe as ShapeBoundsContext, xt as StickyAnchor, Qn as StickyFloat, Ie as SurfaceStateContext, Le as SurfaceStateProvider, rt as VirtualDiv, $a as buildGridThemeCSS, oa as commitArgsFromKey, K as createAxis, Mr as createDragCells, Ta as createHeaderSelectionPointer, Fe as createSurfaceStateStore, Nr as createWindowDragCells, ea as defaultRangeStyle, Dr as edgeScrollPane, la as expandEditorBounds, qa as filterByText, Za as gridThemeVars, Ca as headerAnchorCell, Sa as headerEntireEnd, xa as headerEntireStart, wa as headerRange, Qa as headerThemeVars, Ur as insertAt, Gr as insertRange, Ar as isSameDragModifiers, kr as readDragModifiers, rr as renderGridFloatPanel, Qr as resolveFillDestination, ia as startEventFromKey, Ir as useDoubleClick, Pr as useDragCells, sa as useEditorKeymap, Yn as useGridFloatTheme, ae as useGridMetrics, Z as useGridPane, Xe as useGridPaneOptional, Ea as useHeaderSelectionPointer, ar as useHoverIntent, Qe as useLayer, aa as usePendingCaret, or as useRangeHover, Li as useSelectionPointer, se as useShapeBounds, yt as useSticky, bt as useStickyOptional, Ze as useSurfaceState, Fr as useWindowDragCells, $r as vacatedByFill };