@sheetxl/grid-react 0.7.28-beta.1 → 0.7.28-beta.3

package/node/esm/index.mjs

@@ -1,5 +1,5 @@
 /**
-* @license @sheetxl/grid-react - Grid React - Advanced grid component for React - v0.7.28-beta.1
+* @license @sheetxl/grid-react - Grid React - Advanced grid component for React - v0.7.28-beta.3
 *
 * (C) 2026-present SheetXL Inc. & Michael T. Ford
 * License: The license can be found at https://www.sheetxl.com/license.
@@ -2256,9 +2256,27 @@ var Zt = (e) => {
 		dragMode: n
 	};
 }, Qt = (e) => {
-	const { range: t, anchor: n, size: o = 8, cursor: r, dragCursor: l, background: i = "var(--sxl-color-primary, rgb(33, 115, 70))", onDragStart: s, onDragMove: a, onDragEnd: c, onDragCancel: d, onHoverChange: u, hoverStyle: g, animatedTransition: h, renderHandle: f, children: m, className: v, style: y, preserveFocus: b, clampToView: E } = e, I = qe(), [C, R] = p(!1), { start: M, dragMode: P } = Jt((e, t) => {
+	const t = f(null), n = f(!1);
+	return c(() => {
+		const e = (e) => {
+			n.current && (n.current = !1, e.stopPropagation(), e.preventDefault());
+		};
+		return window.addEventListener("dblclick", e, !0), () => window.removeEventListener("dblclick", e, !0);
+	}, []), (o) => {
+		if (!e || 0 !== o.button) return !1;
+		const r = t.current, l = !!r && o.timeStamp - r.time <= 500 && Math.abs(o.clientX - r.x) <= 4 && Math.abs(o.clientY - r.y) <= 4;
+		return t.current = l ? null : {
+			time: o.timeStamp,
+			x: o.clientX,
+			y: o.clientY
+		}, !!l && (o.stopPropagation(), n.current = !0, window.setTimeout(() => {
+			n.current = !1;
+		}, 500), !0);
+	};
+}, en = (e) => {
+	const { range: t, anchor: n, size: o = 8, cursor: r, dragCursor: l, background: i = "var(--sxl-color-primary, rgb(33, 115, 70))", onDragStart: s, onDragMove: a, onDragEnd: c, onDragCancel: d, onDoubleClick: u, onHoverChange: g, hoverStyle: h, animatedTransition: f, renderHandle: m, children: v, className: y, style: b, preserveFocus: E, clampToView: I } = e, C = qe(), [R, M] = p(!1), P = Qt(!!u), { start: k, dragMode: D } = Jt((e, t) => {
 		if (0 !== t.button) return null;
-		t.stopPropagation(), b && t.preventDefault();
+		t.stopPropagation(), E && t.preventDefault();
 		const n = e;
 		let o = e;
 		return s?.(n, t), {
@@ -2273,64 +2291,67 @@ var Zt = (e) => {
 				d?.();
 			}
 		};
-	}), k = null !== P && l ? l : r ?? on[n], D = I.getBoundsFromRange(t);
-	if (!D) return null;
-	const T = S.getDevicePixelRatio();
-	let z = nn(D.x, D.x + D.width, en[n], T), O = nn(D.y, D.y + D.height, tn[n], T);
-	if (E) {
-		if (!I.toClipBounds(I.getBoundsFromRange(t))) return null;
-		const e = I.getPaneBounds(), n = o / 2 + 1;
-		!0 !== E && "x" !== E || (z = Math.max(n, Math.min(e.width - n, z))), !0 !== E && "y" !== E || (O = Math.max(n, Math.min(e.height - n, O)));
+	}), T = null !== D && l ? l : r ?? rn[n], z = C.getBoundsFromRange(t);
+	if (!z) return null;
+	const O = S.getDevicePixelRatio();
+	let $ = on(z.x, z.x + z.width, tn[n], O), L = on(z.y, z.y + z.height, nn[n], O);
+	if (I) {
+		if (!C.toClipBounds(C.getBoundsFromRange(t))) return null;
+		const e = C.getPaneBounds(), n = o / 2 + 1;
+		!0 !== I && "x" !== I || ($ = Math.max(n, Math.min(e.width - n, $))), !0 !== I && "y" !== I || (L = Math.max(n, Math.min(e.height - n, L)));
 	}
-	const $ = {
+	const B = {
 		position: "absolute",
-		cursor: k,
+		cursor: T,
 		pointerEvents: "all",
 		left: 0,
 		top: 0,
-		transform: `translate(${z}px, ${O}px) translate(-50%, -50%)`,
-		...h ? {
+		transform: `translate(${$}px, ${L}px) translate(-50%, -50%)`,
+		...f ? {
 			transition: "transform 60ms ease-in-out",
 			willChange: "transform"
 		} : void 0
-	}, L = {
-		onPointerDown: (e) => M(e),
+	}, A = {
+		onPointerDown: (e) => {
+			P(e) ? u(e) : k(e);
+		},
+		onDoubleClick: u ? (e) => e.stopPropagation() : void 0,
 		onPointerEnter: () => {
-			R(!0), u?.(!0);
+			M(!0), g?.(!0);
 		},
 		onPointerLeave: () => {
-			R(!1), u?.(!1);
+			M(!1), g?.(!1);
 		}
 	};
-	return f ? x(w, { children: f({
+	return m ? x(w, { children: m({
 		anchor: n,
 		size: o,
-		cursor: k,
+		cursor: T,
 		background: i,
-		hovered: C,
+		hovered: R,
 		handleProps: {
-			...L,
-			style: $
+			...A,
+			style: B
 		}
 	}) }) : x("div", {
-		className: v,
-		...L,
+		className: y,
+		...A,
 		style: {
-			...$,
+			...B,
 			width: o,
 			height: o,
-			background: null == m ? i : void 0,
-			border: null == m ? "1px solid var(--sxl-color-base-100, white)" : void 0,
+			background: null == v ? i : void 0,
+			border: null == v ? "1px solid var(--sxl-color-base-100, white)" : void 0,
 			borderRadius: 1,
 			boxSizing: "border-box",
-			...y,
-			...C ? g : void 0
+			...b,
+			...R ? h : void 0
 		},
-		children: m
+		children: v
 	});
 };
-Qt.displayName = "DragHandle";
-var en = {
+en.displayName = "DragHandle";
+var tn = {
 	tl: "leading",
 	l: "leading",
 	bl: "leading",
@@ -2339,7 +2360,7 @@ var en = {
 	tr: "trailing",
 	r: "trailing",
 	br: "trailing"
-}, tn = {
+}, nn = {
 	tl: "leading",
 	t: "leading",
 	tr: "leading",
@@ -2348,7 +2369,7 @@ var en = {
 	bl: "trailing",
 	b: "trailing",
 	br: "trailing"
-}, nn = (e, t, n, o) => "center" === n ? S.snapDeviceEdge((e + t) / 2, o) : S.edgeCenter("leading" === n ? e : t, n, 2, o), on = {
+}, on = (e, t, n, o) => "center" === n ? S.snapDeviceEdge((e + t) / 2, o) : S.edgeCenter("leading" === n ? e : t, n, 2, o), rn = {
 	tl: "nwse-resize",
 	br: "nwse-resize",
 	tr: "nesw-resize",
@@ -2357,8 +2378,8 @@ var en = {
 	b: "ns-resize",
 	l: "ew-resize",
 	r: "ew-resize"
-}, rn = (e) => {
-	const { range: t, children: n, grip: o = "entire", hitSize: r = 10, onHoverChange: l, onDragStateChange: i, onDragStart: s, onDragMove: a, onDragEnd: c, renderMove: d, preserveFocus: u } = e, g = qe(), h = t ? `range-move:${t.rowStart}:${t.colStart}:${t.rowEnd}:${t.colEnd}` : "range-move", p = f(null), [m, y] = Je(h, null), { start: b, dragMode: E } = Jt((e, n) => {
+}, ln = (e) => {
+	const { range: t, children: n, grip: o = "entire", hitSize: r = 10, onHoverChange: l, onDragStateChange: i, onDragStart: s, onDragMove: a, onDragEnd: c, renderMove: d, preserveFocus: u, onEdgeDoubleClick: g } = e, h = qe(), p = t ? `range-move:${t.rowStart}:${t.colStart}:${t.rowEnd}:${t.colEnd}` : "range-move", m = f(null), [y, b] = Je(p, null), { start: E, dragMode: I } = Jt((e, n) => {
 		if (0 !== n.button) return null;
 		if (!t) return null;
 		n.stopPropagation(), u && n.preventDefault();
@@ -2368,58 +2389,70 @@ var en = {
 		return {
 			dragMode: "move",
 			drag: (e, t) => {
-				l = ((e) => ln(r, e.rowIndex - o.rowIndex, e.colIndex - o.colIndex, g.getTotalRange()))(e), d && y(l), a?.(l, t ?? n);
+				l = ((e) => sn(r, e.rowIndex - o.rowIndex, e.colIndex - o.colIndex, h.getTotalRange()))(e), d && b(l), a?.(l, t ?? n);
 			},
 			end: (e) => {
-				i?.(!1), d && y(null), U.isEqualRanges(l, r) || c?.(l, e);
+				i?.(!1), d && b(null), U.isEqualRanges(l, r) || c?.(l, e);
 			},
 			cancel: () => {
-				i?.(!1), d && y(null);
+				i?.(!1), d && b(null);
 			}
 		};
-	}), I = null !== E ? "grabbing" : "move";
+	}), C = Qt(!!g), R = null !== I ? "grabbing" : "move";
 	if (!t) return null;
-	const C = { onPointerDown: (e) => b(e, p.current) }, R = l ? {
+	const M = { onPointerDown: (e) => {
+		if (C(e)) {
+			const n = ((e) => {
+				const n = h?.getPanePointFromPointer(e.clientX, e.clientY), o = h?.getBoundsFromRange(t);
+				if (!n || !o) return null;
+				const r = Math.abs(n.y - o.y), l = Math.abs(n.y - (o.y + o.height)), i = Math.abs(n.x - o.x), s = Math.abs(n.x - (o.x + o.width)), a = Math.min(r, l, i, s);
+				return a === r ? "top" : a === l ? "bottom" : a === i ? "left" : "right";
+			})(e);
+			n && g(t, n, e);
+			return;
+		}
+		E(e, m.current);
+	} }, P = l ? {
 		onPointerEnter: () => l(!0),
 		onPointerLeave: () => l(!1)
-	} : void 0, M = r / S.getDevicePixelRatio(), P = g?.getBoundsFromRange(t), k = P ? {
-		x: P.x - M,
-		y: P.y - M,
-		width: P.width + 2 * M,
-		height: P.height + 2 * M
+	} : void 0, k = r / S.getDevicePixelRatio(), D = h?.getBoundsFromRange(t), T = D ? {
+		x: D.x - k,
+		y: D.y - k,
+		width: D.width + 2 * k,
+		height: D.height + 2 * k
 	} : void 0;
 	return v(w, { children: [
 		x(lt, "entire" === o ? {
-			ref: p,
-			...k ? { bounds: k } : { range: t },
-			style: { cursor: I },
-			...C,
-			...R
+			ref: m,
+			...T ? { bounds: T } : { range: t },
+			style: { cursor: R },
+			...M,
+			...P
 		} : {
-			ref: p,
+			ref: m,
 			range: t,
-			clipInsets: -M / 2,
+			clipInsets: -k / 2,
 			style: {
 				pointerEvents: "none",
-				cursor: I
+				cursor: R
 			},
-			...C,
+			...M,
 			children: x(se, {
 				stroke: "transparent",
 				alignWidth: r,
 				propsStrokePath: {
 					cursor: "move",
 					pointerEvents: "stroke",
-					...R
+					...P
 				}
 			})
 		}),
 		n,
-		m && d?.(m)
+		y && d?.(y)
 	] });
 };
-rn.displayName = "Draggable";
-var ln = (e, t, n, o) => {
+ln.displayName = "Draggable";
+var sn = (e, t, n, o) => {
 	const r = e.rowEnd - e.rowStart, l = e.colEnd - e.colStart, i = ge(e.rowStart + t, o.rowStart, o.rowEnd - r), s = ge(e.colStart + n, o.colStart, o.colEnd - l);
 	return {
 		rowStart: i,
@@ -2427,12 +2460,12 @@ var ln = (e, t, n, o) => {
 		rowEnd: i + r,
 		colEnd: s + l
 	};
-}, sn = [
+}, an = [
 	"tl",
 	"tr",
 	"br",
 	"bl"
-], an = [
+], cn = [
 	"tl",
 	"t",
 	"tr",
@@ -2441,8 +2474,8 @@ var ln = (e, t, n, o) => {
 	"b",
 	"bl",
 	"l"
-], cn = (e) => {
-	const { range: t, anchors: n = an, onDragStart: o, onDragMove: r, onDragEnd: l, onDragCancel: i, onHandleHoverChange: s, size: a = 8, renderHandle: c, preserveFocus: d, ...u } = e, g = {
+], dn = (e) => {
+	const { range: t, anchors: n = cn, onDragStart: o, onDragMove: r, onDragEnd: l, onDragCancel: i, onHandleHoverChange: s, size: a = 8, renderHandle: c, preserveFocus: d, ...u } = e, g = {
 		..._t,
 		...u
 	}, h = g.stroke ?? "rgb(33, 115, 70)", m = qe(), [y, b] = p(null), S = f(null);
@@ -2451,7 +2484,7 @@ var ln = (e, t, n, o) => {
 	return v(w, { children: [x(Wt, {
 		range: E,
 		...g
-	}), n.map((e) => x(Qt, {
+	}), n.map((e) => x(en, {
 		range: E,
 		anchor: e,
 		size: a,
@@ -2470,11 +2503,11 @@ var ln = (e, t, n, o) => {
 			S.current = t, o?.(t, n);
 		},
 		onDragMove: (n, o, l) => {
-			const i = dn(S.current ?? t, e, o, m.getTotalRange());
+			const i = un(S.current ?? t, e, o, m.getTotalRange());
 			b(i), r?.(i, l);
 		},
 		onDragEnd: (n, o, r) => {
-			const i = dn(S.current ?? t, e, o, m.getTotalRange());
+			const i = un(S.current ?? t, e, o, m.getTotalRange());
 			S.current = null, b(null), l?.(i, r);
 		},
 		onDragCancel: () => {
@@ -2482,8 +2515,8 @@ var ln = (e, t, n, o) => {
 		}
 	}, e))] });
 };
-cn.displayName = "RangeResizer";
-var dn = (e, t, n, o) => {
+dn.displayName = "RangeResizer";
+var un = (e, t, n, o) => {
 	let { rowStart: r, colStart: l, rowEnd: i, colEnd: s } = e;
 	return t.includes("t") && (r = ge(n.rowIndex, o.rowStart, o.rowEnd)), t.includes("b") && (i = ge(n.rowIndex, o.rowStart, o.rowEnd)), t.includes("l") && (l = ge(n.colIndex, o.colStart, o.colEnd)), t.includes("r") && (s = ge(n.colIndex, o.colStart, o.colEnd)), {
 		rowStart: Math.min(r, i),
@@ -2491,20 +2524,20 @@ var dn = (e, t, n, o) => {
 		rowEnd: Math.max(r, i),
 		colEnd: Math.max(l, s)
 	};
-}, un = (e) => {
-	const { range: t, snapDestination: n, onDragStart: o, onDragMove: r, onDragEnd: l, onDragDone: i, renderHandle: s, ...a } = e, c = {
+}, gn = (e) => {
+	const { range: t, snapDestination: n, onDragStart: o, onDragMove: r, onDragEnd: l, onDragDone: i, onDoubleClick: s, renderHandle: a, ...c } = e, d = {
 		..._t,
 		fill: void 0,
-		...a
-	}, d = c.stroke, u = {
-		...c,
+		...c
+	}, u = d.stroke, g = {
+		...d,
 		strokeDasharray: "3 2"
-	}, g = qe(), h = f(null), [p, m] = Je("range-fill", null);
+	}, h = qe(), p = f(null), [m, y] = Je("range-fill", null);
 	if (!t) return null;
-	const y = g.getTotalRange(), b = t.rowStart === y.rowStart && t.rowEnd === y.rowEnd, S = t.colStart === y.colStart && t.colEnd === y.colEnd;
-	if (b && S) return null;
-	const E = Object.keys(g.getAllPanes()).length <= 1, I = g.getBoundsFromRange(t), C = g.getPaneBounds(), R = E && I.y >= 0 && I.y + I.height <= C.height, M = E && I.x >= 0 && I.x + I.width <= C.width, P = b && !R ? "tr" : S && !M ? "bl" : "br", k = "tr" === P ? "y" : "bl" === P && "x";
-	return k && !((e, t, n, o) => {
+	const b = h.getTotalRange(), S = t.rowStart === b.rowStart && t.rowEnd === b.rowEnd, E = t.colStart === b.colStart && t.colEnd === b.colEnd;
+	if (S && E) return null;
+	const I = Object.keys(h.getAllPanes()).length <= 1, C = h.getBoundsFromRange(t), R = h.getPaneBounds(), M = I && C.y >= 0 && C.y + C.height <= R.height, P = I && C.x >= 0 && C.x + C.width <= R.width, k = S && !M ? "tr" : E && !P ? "bl" : "br", D = "tr" === k ? "y" : "bl" === k && "x";
+	return D && !((e, t, n, o) => {
 		const r = e.getAllPanes();
 		if (Object.keys(r).length <= 1) return !0;
 		const l = e.getAnchor(), i = !!r[_.TopLeft], s = !!r[_.Top], a = !!r[_.Left], c = e.getVisibleRange();
@@ -2524,15 +2557,16 @@ var dn = (e, t, n, o) => {
 			rowIndex: t.rowStart
 		}, c))) return !1;
 		return !0;
-	})(g, t, b, S) ? null : v(w, { children: [x(Qt, {
+	})(h, t, S, E) ? null : v(w, { children: [x(en, {
 		range: t,
-		anchor: P,
-		clampToView: k,
+		anchor: k,
+		clampToView: D,
 		cursor: "crosshair",
-		background: d,
-		renderHandle: s,
+		background: u,
+		renderHandle: a,
+		onDoubleClick: s ? (e) => s(t, e) : void 0,
 		onDragStart: (e, n) => {
-			h.current = null, m(null), o?.(t, n);
+			p.current = null, y(null), o?.(t, n);
 		},
 		onDragMove: (e, o, l) => {
 			let i = ((e, t, n) => {
@@ -2550,35 +2584,35 @@ var dn = (e, t, n, o) => {
 					...e,
 					colStart: Math.max(n.colStart, t.colIndex)
 				};
-			})(t, o, g.getTotalRange());
-			i && n && (i = n(t, i)), h.current = i, m(i), i && r?.(i, l);
+			})(t, o, h.getTotalRange());
+			i && n && (i = n(t, i)), p.current = i, y(i), i && r?.(i, l);
 		},
 		onDragEnd: (e, t, n) => {
-			const o = h.current;
-			h.current = null, m(null), o && l?.(o, n), i?.(n);
+			const o = p.current;
+			p.current = null, y(null), o && l?.(o, n), i?.(n);
 		},
 		onDragCancel: () => {
-			h.current = null, m(null), i?.();
+			p.current = null, y(null), i?.();
 		}
-	}), p && x(Wt, {
-		range: p,
-		...u
+	}), m && x(Wt, {
+		range: m,
+		...g
 	})] });
 };
-un.displayName = "FillHandle";
-var gn = i((e) => {
+gn.displayName = "FillHandle";
+var hn = i((e) => {
 	const { value: t, pane: n, bounds: o, cell: r, range: l, children: i, className: s, ...a } = e;
 	return x("div", {
 		className: V(s, "cell"),
 		...a,
 		children: t
 	});
-}), hn = Object.freeze({
+}), fn = Object.freeze({
 	cells: [],
 	rangesH: [],
 	rangesV: []
-}), fn = !1, pn = /* @__PURE__ */ new WeakMap(), mn = (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 = pn.get(e);
+}), pn = !1, mn = /* @__PURE__ */ new WeakMap(), wn = (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 = mn.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 ? {
@@ -2587,7 +2621,7 @@ var gn = i((e) => {
 			colStart: Math.max(r.colStart, l.colStart),
 			colEnd: Math.min(r.colEnd, l.colEnd)
 		} : null, s = i ? e.getVisibleColumns(i.colStart, i.colEnd) : e.getVisibleColumns(), a = i ? e.getVisibleRows(i.rowStart, i.rowEnd) : e.getVisibleRows();
-		if (0 === s.length || 0 === a.length) return hn;
+		if (0 === s.length || 0 === a.length) return fn;
 		const c = (t) => e.getRangeFromCell(t);
 		let d;
 		if (n) d = n(e, r);
@@ -2609,7 +2643,7 @@ var gn = i((e) => {
 			}
 		}
 		const u = d ? d.length : 0;
-		if (0 === u) return hn;
+		if (0 === u) return fn;
 		const g = e.getVisibleRange(), h = r ?? g, f = [], p = [], m = [], w = /* @__PURE__ */ new Set();
 		for (let t = 0; t < u; t++) {
 			const n = d[t];
@@ -2631,7 +2665,7 @@ var gn = i((e) => {
 					rowIndex: t.rowStart,
 					colIndex: t.colStart
 				});
-				const n = yn(l.rowStart, l.colStart);
+				const n = bn(l.rowStart, l.colStart);
 				if (w.has(n)) continue;
 				w.add(n), l.rowEnd - l.rowStart > 0 && p.push(l), l.colEnd - l.colStart > 0 && m.push(l), s = e.getBoundsFromRange(l);
 			} else {
@@ -2648,7 +2682,7 @@ var gn = i((e) => {
 				range: l,
 				bounds: s,
 				value: n?.value
-			}) : fn || (fn = !0, console.warn("grid-react: no bounds for cell", yn(l.rowStart, l.colStart)));
+			}) : pn || (pn = !0, console.warn("grid-react: no bounds for cell", bn(l.rowStart, l.colStart)));
 		}
 		return {
 			cells: f,
@@ -2656,7 +2690,7 @@ var gn = i((e) => {
 			rangesV: m
 		};
 	})(e, t);
-	return pn.set(e, {
+	return mn.set(e, {
 		rowStart: n.rowStart,
 		colStart: n.colStart,
 		rowEnd: n.rowEnd,
@@ -2671,17 +2705,17 @@ var gn = i((e) => {
 		options: t,
 		model: u
 	}), u;
-}, wn = Object.freeze({
+}, xn = Object.freeze({
 	rangesH: [],
 	rangesV: []
-}), xn = /* @__PURE__ */ new WeakMap(), vn = (e, t = {}) => {
-	const n = e.getVisibleRange(), o = xn.get(e);
+}), vn = /* @__PURE__ */ new WeakMap(), yn = (e, t = {}) => {
+	const n = e.getVisibleRange(), o = vn.get(e);
 	if (o && o.rowStart === n.rowStart && o.colStart === n.colStart && o.rowEnd === n.rowEnd && o.colEnd === n.colEnd && o.cacheToken === t.cacheToken && o.getVisibleCells === t.getVisibleCells) return o.ranges;
 	const r = ((e, t = {}) => {
 		const { getVisibleCells: n } = t, o = e.getVisibleRange(), r = [], l = [], i = /* @__PURE__ */ new Set(), s = (e) => {
 			if (U.isSingleCell(e)) return;
 			if (!U.isRangesIntersect(e, o) && !U.isRangeWithinRange(e, o)) return;
-			const t = yn(e.rowStart, e.colStart);
+			const t = bn(e.rowStart, e.colStart);
 			i.has(t) || (i.add(t), e.rowEnd - e.rowStart > 0 && r.push(e), e.colEnd - e.colStart > 0 && l.push(e));
 		};
 		if (n) {
@@ -2700,12 +2734,12 @@ var gn = i((e) => {
 				}));
 			}
 		}
-		return 0 === r.length && 0 === l.length ? wn : {
+		return 0 === r.length && 0 === l.length ? xn : {
 			rangesH: r,
 			rangesV: l
 		};
 	})(e, t);
-	return xn.set(e, {
+	return vn.set(e, {
 		rowStart: n.rowStart,
 		colStart: n.colStart,
 		rowEnd: n.rowEnd,
@@ -2714,10 +2748,10 @@ var gn = i((e) => {
 		cacheToken: t.cacheToken,
 		ranges: r
 	}), r;
-}, yn = (e, t) => `${e}:${t}`, bn = {
+}, bn = (e, t) => `${e}:${t}`, Sn = {
 	tiles: "_tiles_ikr1b_7",
 	gridlines: "_gridlines_ikr1b_26"
-}, Sn = i((e) => {
+}, En = i((e) => {
 	const { renderCell: t, cacheToken: n, getVisibleCells: o, hiddenCellAt: r, suppressCell: l, className: i, style: s } = e, a = qe(), c = a.getAnchor(), u = d(), h = g(() => `sxl-cl-${u.replace(/[^a-zA-Z0-9_-]/g, "")}`, [u]), p = f({
 		token: void 0,
 		renderCell: void 0,
@@ -2727,43 +2761,43 @@ var gn = i((e) => {
 		rebaseLeft: 0,
 		rebaseTop: 0,
 		map: /* @__PURE__ */ new Map()
-	}), m = a.getScrollTopLeft(), y = a.getFreezeTopLeft(), b = m.left + y.left, S = m.top + y.top, E = Math.floor(b / Cn) * Cn, I = Math.floor(S / Cn) * Cn, C = a.getVisibleRange();
+	}), m = a.getScrollTopLeft(), y = a.getFreezeTopLeft(), b = m.left + y.left, S = m.top + y.top, E = Math.floor(b / Rn) * Rn, I = Math.floor(S / Rn) * Rn, C = a.getVisibleRange();
 	let R = 0, M = -1, P = 0, k = -1;
-	C && (R = Math.max(0, Math.floor(C.rowStart / In) - Rn), M = Math.floor(C.rowEnd / In) + Rn, P = Math.max(0, Math.floor(C.colStart / In) - Rn), k = Math.floor(C.colEnd / In) + Rn);
+	C && (R = Math.max(0, Math.floor(C.rowStart / Cn) - Mn), M = Math.floor(C.rowEnd / Cn) + Mn, P = Math.max(0, Math.floor(C.colStart / Cn) - Mn), k = Math.floor(C.colEnd / Cn) + Mn);
 	const D = g(() => {
 		if (!C || M < R) return null;
 		const e = p.current;
 		e.token === n && e.pane === a && e.renderCell === t && e.getVisibleCells === o && e.hiddenCellAt === r && e.rebaseLeft === E && e.rebaseTop === I || (e.map = /* @__PURE__ */ new Map(), e.token = n, e.pane = a, e.renderCell = t, e.getVisibleCells = o, e.hiddenCellAt = r, e.rebaseLeft = E, e.rebaseTop = I);
 		const l = e.map, i = a.getTotalRange(), s = {
-			rowStart: Math.max(i.rowStart, R * In),
-			colStart: Math.max(i.colStart, P * In),
-			rowEnd: Math.min(i.rowEnd, (M + 1) * In - 1),
-			colEnd: Math.min(i.colEnd, (k + 1) * In - 1)
-		}, { cells: d } = mn(a, {
+			rowStart: Math.max(i.rowStart, R * Cn),
+			colStart: Math.max(i.colStart, P * Cn),
+			rowEnd: Math.min(i.rowEnd, (M + 1) * Cn - 1),
+			colEnd: Math.min(i.colEnd, (k + 1) * Cn - 1)
+		}, { cells: d } = wn(a, {
 			getVisibleCells: o,
 			hiddenCellAt: r,
 			bufferRange: s,
 			cacheToken: n
 		}), u = /* @__PURE__ */ new Map();
 		for (let e = 0; e < d.length; e++) {
-			const t = d[e], n = `${Math.floor(t.cell.rowIndex / In)}:${Math.floor(t.cell.colIndex / In)}`;
+			const t = d[e], n = `${Math.floor(t.cell.rowIndex / Cn)}:${Math.floor(t.cell.colIndex / Cn)}`;
 			let o = u.get(n);
 			o || (o = [], u.set(n, o)), o.push(t);
 		}
 		const g = [], h = (e, n) => {
-			if (e * In > i.rowEnd || n * In > i.colEnd) return;
+			if (e * Cn > i.rowEnd || n * Cn > i.colEnd) return;
 			const o = e >= R && e <= M && n >= P && n <= k, r = `${e}:${n}`;
 			let s = l.get(r);
 			if (void 0 === s) {
 				const d = u.get(r);
-				if (!d && !Pn) return;
+				if (!d && !kn) return;
 				const g = a.getBoundsFromRange({
-					rowStart: e * In,
-					colStart: n * In,
-					rowEnd: Math.min(i.rowEnd, e * In + In - 1),
-					colEnd: Math.min(i.colEnd, n * In + In - 1)
+					rowStart: e * Cn,
+					colStart: n * Cn,
+					rowEnd: Math.min(i.rowEnd, e * Cn + Cn - 1),
+					colEnd: Math.min(i.colEnd, n * Cn + Cn - 1)
 				}), h = b + g.x - E, f = S + g.y - I, p = [];
-				if (Pn && p.push(x("div", { style: {
+				if (kn && p.push(x("div", { style: {
 					position: "absolute",
 					left: 0,
 					top: 0,
@@ -2774,13 +2808,13 @@ var gn = i((e) => {
 				} }, "__bg")), d) for (let e = 0; e < d.length; e++) {
 					const { cell: n, range: o, bounds: r, value: l } = d[e];
 					r && p.push(t({
-						key: `pane:${c}:cell:${yn(n.rowIndex, n.colIndex)}`,
+						key: `pane:${c}:cell:${bn(n.rowIndex, n.colIndex)}`,
 						cell: n,
 						bounds: r,
 						range: o,
 						pane: a,
 						value: l,
-						"data-rc": yn(n.rowIndex, n.colIndex),
+						"data-rc": bn(n.rowIndex, n.colIndex),
 						style: {
 							left: r.x - g.x,
 							top: r.y - g.y,
@@ -2793,15 +2827,15 @@ var gn = i((e) => {
 					className: "tile",
 					style: { transform: `translate(${h}px, ${f}px)` },
 					children: p
-				}, `pane:${c}:tile:${e}:${n}`), o && (l.set(r, s), l.size > Mn)) {
+				}, `pane:${c}:tile:${e}:${n}`), o && (l.set(r, s), l.size > Pn)) {
 					const e = l.keys().next().value;
 					void 0 !== e && l.delete(e);
 				}
 			}
 			s && g.push(s);
 		};
-		if (Pn) {
-			for (let e = R; e <= M && !(e * In > i.rowEnd); e++) for (let t = P; t <= k && !(t * In > i.colEnd); t++) h(e, t);
+		if (kn) {
+			for (let e = R; e <= M && !(e * Cn > i.rowEnd); e++) for (let t = P; t <= k && !(t * Cn > i.colEnd); t++) h(e, t);
 			for (const e of u.keys()) {
 				const t = e.indexOf(":"), n = Number(e.slice(0, t)), o = Number(e.slice(t + 1));
 				(n < R || n > M || o < P || o > k) && h(n, o);
@@ -2824,7 +2858,7 @@ var gn = i((e) => {
 	]);
 	return v(w, { children: [x(lt, {
 		fill: !0,
-		className: V(bn.tiles, h, i),
+		className: V(Sn.tiles, h, i),
 		style: {
 			pointerEvents: "none",
 			...s,
@@ -2832,15 +2866,15 @@ var gn = i((e) => {
 			willChange: "transform"
 		},
 		children: D
-	}), l ? x("style", { children: `.${h} [data-rc="${yn(l.rowIndex, l.colIndex)}"]{visibility:hidden !important;}` }) : null] });
+	}), l ? x("style", { children: `.${h} [data-rc="${bn(l.rowIndex, l.colIndex)}"]{visibility:hidden !important;}` }) : null] });
 });
-Sn.displayName = "CellTileDiv";
-var En = i((e) => {
+En.displayName = "CellTileDiv";
+var In = i((e) => {
 	const { renderCell: t, cacheToken: n, getVisibleCells: o, hiddenCellAt: r, suppressCell: l, className: i, style: s, ...a } = e;
 	return x(et, {
 		className: V(i, "tiles"),
 		...a,
-		children: x(Sn, {
+		children: x(En, {
 			renderCell: t,
 			cacheToken: n,
 			getVisibleCells: o,
@@ -2850,9 +2884,9 @@ var En = i((e) => {
 		})
 	});
 });
-En.displayName = "CellLayer";
-var In = 8, Cn = 1 << 19, Rn = 1, Mn = 512, Pn = !1, kn = (e, t, n) => {
-	const o = S.getDevicePixelRatio(), r = On / o, l = e.getVisibleRange(), i = (t) => e.getColumnSize(t).offset, s = (t) => {
+In.displayName = "CellLayer";
+var Cn = 8, Rn = 1 << 19, Mn = 1, Pn = 512, kn = !1, Dn = (e, t, n) => {
+	const o = S.getDevicePixelRatio(), r = $n / o, l = e.getVisibleRange(), i = (t) => e.getColumnSize(t).offset, s = (t) => {
 		const n = e.getColumnSize(t);
 		return n.offset + n.size;
 	}, a = (t) => e.getRowSize(t).offset, c = (t) => {
@@ -2924,16 +2958,16 @@ var In = 8, Cn = 1 << 19, Rn = 1, Mn = 512, Pn = !1, kn = (e, t, n) => {
 		}
 	}
 	return h;
-}, Dn = (e) => {
+}, Tn = (e) => {
 	let t = "";
 	for (let n = 0; n < e.length; n++) {
 		const o = e[n];
 		t += `${o.rowStart},${o.colStart},${o.rowEnd},${o.colEnd};`;
 	}
 	return t;
-}, Tn = (e, t, n, o, r) => {
+}, zn = (e, t, n, o, r) => {
 	if (!n) return null;
-	const l = e.getPaneBounds(), i = Math.ceil(l.width), s = Math.ceil(l.height), a = String(On / S.getDevicePixelRatio());
+	const l = e.getPaneBounds(), i = Math.ceil(l.width), s = Math.ceil(l.height), a = String($n / S.getDevicePixelRatio());
 	return x("svg", {
 		className: V(t ? "horizontal" : "vertical"),
 		width: `${i}`,
@@ -2949,15 +2983,15 @@ var In = 8, Cn = 1 << 19, Rn = 1, Mn = 512, Pn = !1, kn = (e, t, n) => {
 			...r
 		})
 	});
-}, zn = i((e) => {
-	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 = qe(), f = t, p = !0 === t || !0 === f?.horizontal, m = !0 === t || !0 === f?.vertical, { rangesH: w, rangesV: y } = vn(h, {
+}, On = i((e) => {
+	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 = qe(), f = t, p = !0 === t || !0 === f?.horizontal, m = !0 === t || !0 === f?.vertical, { rangesH: w, rangesV: y } = yn(h, {
 		getVisibleCells: l,
 		cacheToken: s
-	}), b = S.getDevicePixelRatio(), { top: E, 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 ? `${E}|${k}|${b}` : `${E}|${I}|${k}|${b}|${Dn(w)}`, z = 0 === y.length ? `${I}|${D}|${b}` : `${I}|${E}|${D}|${b}|${Dn(y)}`, O = g(() => p ? kn(h, !0, w) : null, [
+	}), b = S.getDevicePixelRatio(), { top: E, 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 ? `${E}|${k}|${b}` : `${E}|${I}|${k}|${b}|${Tn(w)}`, z = 0 === y.length ? `${I}|${D}|${b}` : `${I}|${E}|${D}|${b}|${Tn(y)}`, O = g(() => p ? Dn(h, !0, w) : null, [
 		h,
 		p,
 		T
-	]), $ = g(() => m ? kn(h, !1, y) : null, [
+	]), $ = g(() => m ? Dn(h, !1, y) : null, [
 		h,
 		m,
 		z
@@ -2967,17 +3001,17 @@ var In = 8, Cn = 1 << 19, Rn = 1, Mn = 512, Pn = !1, kn = (e, t, n) => {
 		className: V(c, "gridlines"),
 		children: v(lt, {
 			fill: !0,
-			className: bn.gridlines,
+			className: Sn.gridlines,
 			style: {
 				pointerEvents: "none",
 				...d
 			},
-			children: [p && O ? Tn(h, !0, O, n, o) : null, m && $ ? Tn(h, !1, $, n, r) : null]
+			children: [p && O ? zn(h, !0, O, n, o) : null, m && $ ? zn(h, !1, $, n, r) : null]
 		})
 	}) : null;
 });
-zn.displayName = "GridlineLayer";
-var On = 1, $n = -10, Ln = class {
+On.displayName = "GridlineLayer";
+var $n = 1, Ln = -10, Bn = class {
 	constructor(e = {}) {
 		this.listeners = /* @__PURE__ */ new Set(), this._coords = e.initial ?? {
 			cell: {
@@ -2986,7 +3020,7 @@ var On = 1, $n = -10, Ln = class {
 			},
 			ranges: U.EmptyRanges,
 			rangeIndex: -1
-		}, this._getBounds = e.getBounds ?? (() => Nn);
+		}, this._getBounds = e.getBounds ?? (() => Fn);
 	}
 	getSelection() {
 		return this._coords;
@@ -3047,12 +3081,12 @@ var On = 1, $n = -10, Ln = class {
 		return e >= 0 ? this._coords.ranges[e] : U.cellToRange(this._coords.cell);
 	}
 	modify(e, t = this._coords.cell) {
-		const n = this._activeRange(), r = Bn({
+		const n = this._activeRange(), r = An({
 			rowStart: Math.min(e.rowIndex ?? n.rowStart, t.rowIndex ?? n.rowStart),
 			colStart: Math.min(e.colIndex ?? n.colStart, t.colIndex ?? n.colStart),
 			rowEnd: Math.max(e.rowIndex ?? n.rowEnd, t.rowIndex ?? n.rowEnd),
 			colEnd: Math.max(e.colIndex ?? n.colEnd, t.colIndex ?? n.colEnd)
-		}, this._getBounds()), l = this._coords, i = this._activeIndex(), s = i >= 0 ? l.ranges.map((e, t) => t === i ? r : e) : [r], a = An(l.cell, r);
+		}, this._getBounds()), l = this._coords, i = this._activeIndex(), s = i >= 0 ? l.ranges.map((e, t) => t === i ? r : e) : [r], a = Nn(l.cell, r);
 		this.setSelection({
 			cell: a,
 			ranges: s,
@@ -3060,7 +3094,7 @@ var On = 1, $n = -10, Ln = class {
 		});
 	}
 	append(e, t = e) {
-		const n = Bn({
+		const n = An({
 			rowStart: Math.min(e.rowIndex, t.rowIndex),
 			colStart: Math.min(e.colIndex, t.colIndex),
 			rowEnd: Math.max(e.rowIndex, t.rowIndex),
@@ -3136,53 +3170,53 @@ var On = 1, $n = -10, Ln = class {
 			this.listeners.delete(e);
 		};
 	}
-}, Bn = (e, t) => ({
+}, An = (e, t) => ({
 	rowStart: ge(e.rowStart, t.rowStart, t.rowEnd),
 	colStart: ge(e.colStart, t.colStart, t.colEnd),
 	rowEnd: ge(e.rowEnd, t.rowStart, t.rowEnd),
 	colEnd: ge(e.colEnd, t.colStart, t.colEnd)
-}), An = (e, t) => ({
+}), Nn = (e, t) => ({
 	rowIndex: ge(e.rowIndex, t.rowStart, t.rowEnd),
 	colIndex: ge(e.colIndex, t.colStart, t.colEnd)
-}), Nn = {
+}), Fn = {
 	rowStart: 0,
 	colStart: 0,
 	rowEnd: Number.MAX_SAFE_INTEGER,
 	colEnd: Number.MAX_SAFE_INTEGER
-}, Fn = "var(--sxl-color-primary, rgb(33, 115, 70))", Vn = "var(--sxl-color-base-100, rgb(255, 255, 255))", Hn = "var(--sxl-color-warning, rgb(255, 0, 0))", _n = (e) => `color-mix(in srgb, var(--sxl-color-primary, rgb(33, 115, 70)) ${e}%, transparent)`, Wn = {
-	fill: { fill: _n(10) },
+}, Vn = "var(--sxl-color-primary, rgb(33, 115, 70))", Hn = "var(--sxl-color-base-100, rgb(255, 255, 255))", _n = "var(--sxl-color-warning, rgb(255, 0, 0))", Wn = (e) => `color-mix(in srgb, var(--sxl-color-primary, rgb(33, 115, 70)) ${e}%, transparent)`, Un = {
+	fill: { fill: Wn(10) },
 	border: {
-		stroke: Fn,
+		stroke: Vn,
 		alignWidth: 2,
 		style: { filter: "drop-shadow(1px 1px 0.3px var(--sxl-color-shadow, rgba(0, 0, 0, 0.24)))" }
 	},
 	inner: {
-		stroke: Vn,
+		stroke: Hn,
 		alignWidth: 2,
 		inset: 1
 	}
-}, Un = {
-	fill: { fill: _n(6) },
+}, Kn = {
+	fill: { fill: Wn(6) },
 	border: {
-		stroke: Fn,
+		stroke: Vn,
 		alignWidth: 1
 	},
 	inner: {
-		stroke: Vn,
+		stroke: Hn,
 		alignWidth: 1,
 		inset: 1
 	}
-}, Kn = {
-	stroke: Fn,
+}, jn = {
+	stroke: Vn,
 	alignWidth: 1,
 	inset: 2
-}, jn = {
-	fill: { fill: `color-mix(in srgb, ${Hn} 10%, transparent)` },
+}, Gn = {
+	fill: { fill: `color-mix(in srgb, ${_n} 10%, transparent)` },
 	border: {
-		stroke: Hn,
+		stroke: _n,
 		alignWidth: 2
 	}
-}, Gn = (e, t) => {
+}, Xn = (e, t) => {
 	const n = qe(), o = t?.allowDeselect ?? !0, r = t?.allowMulti ?? !0, l = f(null), [i, s] = p(null), a = f(t?.onSelectionEnd);
 	a.current = t?.onSelectionEnd;
 	const c = Zt((t, i) => {
@@ -3272,8 +3306,8 @@ var On = 1, $n = -10, Ln = class {
 		removePreview: i,
 		dragMode: c.dragMode
 	};
-}, Xn = (e) => {
-	const { selection: t, color: n = "var(--sxl-color-primary, rgb(33, 115, 70))", size: o = 22 } = e, r = Ze(), i = Zn(T(t, (e) => e.getSelection())), s = r ? r.getAllPanes()[_.Center] ?? r : void 0, a = ((e, t, n) => {
+}, Yn = (e) => {
+	const { selection: t, color: n = "var(--sxl-color-primary, rgb(33, 115, 70))", size: o = 22 } = e, r = Ze(), i = Jn(T(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) {
@@ -3394,7 +3428,7 @@ var On = 1, $n = -10, Ln = class {
 		}), void 0, (t, n) => (e.getPaneFromPointer(t, n) ?? e).getCellFromPointer(t, n));
 		g.current = s, s.start(r, r.currentTarget);
 	};
-	return x(w, { children: a.map((e) => x(Yn, {
+	return x(w, { children: a.map((e) => x(qn, {
 		spec: e,
 		size: o,
 		color: n,
@@ -3402,14 +3436,14 @@ var On = 1, $n = -10, Ln = class {
 		onBeginDrag: h
 	}, e.key)) });
 };
-Xn.displayName = "SelectionTouchGrips";
-var Yn = (e) => {
+Yn.displayName = "SelectionTouchGrips";
+var qn = (e) => {
 	const { spec: t, size: n, color: o, dragging: r, onBeginDrag: l } = e;
 	return x(Et, {
 		anchor: { cell: t.cell },
 		placement: t.placement,
 		whenOff: "hide",
-		children: (e) => e.slid ? null : x(qn, {
+		children: (e) => e.slid ? null : x(Zn, {
 			state: e,
 			size: n,
 			color: o,
@@ -3420,7 +3454,7 @@ var Yn = (e) => {
 			}
 		})
 	});
-}, qn = (e) => {
+}, Zn = (e) => {
 	const { state: t, size: n, color: o, dragging: r, pin: l, onBeginDrag: i } = e, { getPortalContainer: s } = $(), { className: a, attrs: c } = Rt(t.pane);
 	let { x: d, y: u } = t.anchorPoint;
 	if (l) {
@@ -3452,51 +3486,51 @@ var Yn = (e) => {
 			0 !== e.button && "touch" !== e.pointerType || t.pane && (e.preventDefault(), e.stopPropagation(), i(e));
 		}
 	}), s());
-}, Zn = (e) => {
+}, Jn = (e) => {
 	const { ranges: t, rangeIndex: n, cell: o } = e;
 	if (t && t.length > 0) {
 		const e = n ?? -1;
 		return t[e >= 0 ? e : t.length - 1];
 	}
 	return U.cellToRange(o);
-}, Jn = [
+}, Qn = [
 	j.Left,
 	j.Right,
 	j.Up,
 	j.Down
-], Qn = {
+], eo = {
 	[j.Left]: "ArrowLeft",
 	[j.Right]: "ArrowRight",
 	[j.Up]: "ArrowUp",
 	[j.Down]: "ArrowDown"
-}, eo = {
+}, to = {
 	[j.Left]: "Left",
 	[j.Right]: "Right",
 	[j.Up]: "Up",
 	[j.Down]: "Down"
 };
-var to = (e, t) => void 0 === t ? e : null === t ? null : {
+var no = (e, t) => void 0 === t ? e : null === t ? null : {
 	...e,
 	...t
-}, no = (e, t) => t ? {
-	fill: to(e.fill, t.fill),
-	border: to(e.border, t.border),
-	inner: to(e.inner, t.inner)
-} : e, oo = {
+}, oo = (e, t) => t ? {
+	fill: no(e.fill, t.fill),
+	border: no(e.border, t.border),
+	inner: no(e.inner, t.inner)
+} : e, ro = {
 	side: "b",
 	align: "end"
-}, ro = e.forwardRef((t, n) => {
-	const { selection: o, getContentBounds: r, getRegionBounds: l, scrollIntoView: i, singleStyle: s, multiStyle: a, multiAnchorStyle: c, singleAnchorStyle: d, removePreviewStyle: u, singleLayer: g, multiLayer: h, enabledMove: f, onMove: p, onMoveStart: m, onMoveUpdate: y, onMoveEnd: S, enableFill: E, snapFillDestination: I, onFill: C, onFillStart: R, onFillPreview: M, onFillEnd: P, onSelectionEnd: k, renderTip: D, tipPlacement: z, disableKeyboard: O, anchorHole: $ = !0, ...L } = t, B = T(o, (e) => e.getSelection()), A = Gn(o, { onSelectionEnd: k }), [N, F] = e.useState(null), V = qe(), H = e.useRef(o);
-	H.current = o;
-	const _ = e.useRef(V);
-	_.current = V;
-	const K = e.useRef(r);
-	K.current = r;
-	const X = e.useRef(l);
-	X.current = l;
-	const Y = e.useRef(i);
-	Y.current = i;
-	const q = e.useMemo(() => function(e) {
+}, lo = e.forwardRef((t, n) => {
+	const { selection: o, getContentBounds: r, getRegionBounds: l, scrollIntoView: i, singleStyle: s, multiStyle: a, multiAnchorStyle: c, singleAnchorStyle: d, removePreviewStyle: u, singleLayer: g, multiLayer: h, enabledMove: f, onMove: p, onMoveStart: m, onMoveUpdate: y, onMoveEnd: S, enableFill: E, snapFillDestination: I, onFill: C, onFillStart: R, onFillPreview: M, onFillEnd: P, resolveFillExtent: k, onEdgeDoubleClick: D, onSelectionEnd: z, renderTip: O, tipPlacement: $, disableKeyboard: L, anchorHole: B = !0, ...A } = t, N = T(o, (e) => e.getSelection()), F = Xn(o, { onSelectionEnd: z }), [V, H] = e.useState(null), _ = qe(), K = e.useRef(o);
+	K.current = o;
+	const X = e.useRef(_);
+	X.current = _;
+	const Y = e.useRef(r);
+	Y.current = r;
+	const q = e.useRef(l);
+	q.current = l;
+	const Z = e.useRef(i);
+	Z.current = i;
+	const J = e.useMemo(() => function(e) {
 		const { getSelection: t, getPane: n, getContentBounds: o, getScrollIntoView: r = () => {}, getRegionBounds: l = () => null } = e, i = () => t(), s = () => n(), a = () => s().getTotalRange(), c = o ?? a, d = (e) => l(e), u = (e) => {
 			const t = r();
 			t ? t(e) : s().scrollCellCoordsIntoView(e);
@@ -3587,8 +3621,8 @@ var to = (e, t) => void 0 === t ? e : null === t ? null : {
 				run: n
 			});
 		}, S = b.Shift, E = b.Ctrl, I = b.Alt;
-		for (const e of Jn) {
-			const t = eo[e], n = Qn[e];
+		for (const e of Qn) {
+			const t = to[e], n = eo[e];
 			y(`move${t}`, { key: n }, () => f(e, !1)), y(`select${t}`, {
 				key: n,
 				modifiers: [S]
@@ -3706,17 +3740,17 @@ var to = (e, t) => void 0 === t ? e : null === t ? null : {
 			}
 		};
 	}({
-		getSelection: () => H.current,
-		getPane: () => _.current,
-		getContentBounds: () => K.current?.() ?? _.current.getTotalRange(),
-		getScrollIntoView: () => Y.current,
-		getRegionBounds: (e) => X.current?.(e) ?? null
+		getSelection: () => K.current,
+		getPane: () => X.current,
+		getContentBounds: () => Y.current?.() ?? X.current.getTotalRange(),
+		getScrollIntoView: () => Z.current,
+		getRegionBounds: (e) => q.current?.(e) ?? null
 	}), []);
-	e.useImperativeHandle(n, () => q, [q]);
-	const Z = !!B.ranges && B.ranges.length > 0, J = Z ? [...B.ranges] : [U.cellToRange(B.cell)], Q = J.length > 1, ee = B.rangeIndex ?? -1, te = Z ? ee >= 0 ? ee : J.length - 1 : 0, ne = V.getRangeFromCell(B.cell), oe = U.unionRanges(J[te] ?? U.cellToRange(B.cell), ne), re = J.filter((e, t) => t !== te), le = Q ? no(Un, a) : no(Wn, s), ie = {
-		...Kn,
+	e.useImperativeHandle(n, () => J, [J]);
+	const Q = !!N.ranges && N.ranges.length > 0, ee = Q ? [...N.ranges] : [U.cellToRange(N.cell)], te = ee.length > 1, ne = N.rangeIndex ?? -1, oe = Q ? ne >= 0 ? ne : ee.length - 1 : 0, re = _.getRangeFromCell(N.cell), le = U.unionRanges(ee[oe] ?? U.cellToRange(N.cell), re), ie = ee.filter((e, t) => t !== oe), se = te ? oo(Kn, a) : oo(Un, s), ae = {
+		...jn,
 		...c
-	}, se = no(jn, u), ae = (e) => {
+	}, ce = oo(Gn, u), de = (e) => {
 		const t = o.getSelection(), n = t.ranges, r = !!n && n.length > 0, l = r ? void 0 !== t.rangeIndex && t.rangeIndex >= 0 && t.rangeIndex < n.length ? t.rangeIndex : n.length - 1 : 0, i = r ? n.map((t, n) => n === l ? e : t) : [e], s = U.isCellWithinRange(t.cell, e) ? t.cell : {
 			rowIndex: e.rowStart,
 			colIndex: e.colStart
@@ -3726,67 +3760,68 @@ var to = (e, t) => void 0 === t ? e : null === t ? null : {
 			ranges: i,
 			rangeIndex: l
 		});
-	}, ce = N ?? ("extend" === A.dragMode ? {
+	}, ue = V ?? ("extend" === F.dragMode ? {
 		kind: "select",
-		range: oe
-	} : null), de = ce && D ? D(ce) : null, ue = e.Children.map(Q ? h : g, (t) => {
+		range: le
+	} : null), ge = ue && O ? O(ue) : null, he = e.Children.map(te ? h : g, (t) => {
 		if (!e.isValidElement(t)) return t;
 		const n = t.props;
 		return e.cloneElement(t, {
-			range: oe,
+			range: le,
 			onDragEnd: (e, t) => {
-				n.onDragEnd?.(e, t), ae(e);
+				n.onDragEnd?.(e, t), de(e);
 			}
 		});
 	});
 	return v(et, {
-		...L,
-		onPointerDown: A.onPointerDown,
-		onPointerMove: A.onPointerMove,
-		onPointerUp: A.onPointerUp,
-		onKeyDown: O ? void 0 : (e) => {
-			q.handleKey(e) && (e.preventDefault(), e.stopPropagation());
+		...A,
+		onPointerDown: F.onPointerDown,
+		onPointerMove: F.onPointerMove,
+		onPointerUp: F.onPointerUp,
+		onKeyDown: L ? void 0 : (e) => {
+			J.handleKey(e) && (e.preventDefault(), e.stopPropagation());
 		},
 		children: [
-			v(w, Q ? { children: [
-				re.map((t, n) => x(e.Fragment, { children: lo(le, t) }, `other-${n}`)),
-				lo(le, oe, $ ? ne : void 0),
+			v(w, te ? { children: [
+				ie.map((t, n) => x(e.Fragment, { children: io(se, t) }, `other-${n}`)),
+				io(se, le, B ? re : void 0),
 				x(Wt, {
-					range: ne,
-					...ie
+					range: re,
+					...ae
 				})
-			] } : { children: [lo(le, oe, $ ? ne : void 0), d && x(Wt, {
-				range: ne,
+			] } : { children: [io(se, le, B ? re : void 0), d && x(Wt, {
+				range: re,
 				...d
 			})] }),
-			!Q && f && x(rn, {
-				range: oe,
+			!te && f && x(ln, {
+				range: le,
 				grip: "edges",
-				renderMove: (e) => le.border && x(Wt, {
+				renderMove: (e) => se.border && x(Wt, {
 					range: e,
-					...le.border,
+					...se.border,
 					animatedTransition: !0,
 					style: { opacity: .6 }
 				}),
+				onEdgeDoubleClick: D,
 				onDragStart: (e, t) => {
-					m?.(e, t), F({
+					m?.(e, t), H({
 						kind: "move",
 						from: e,
 						to: e
 					});
 				},
 				onDragMove: (e, t) => {
-					y?.(oe, e, t), F({
+					y?.(le, e, t), H({
 						kind: "move",
-						from: oe,
+						from: le,
 						to: e
 					});
 				},
 				onDragStateChange: (e) => {
-					e || (S?.(), F(null));
+					e || (S?.(), H(null));
 				},
 				onDragEnd: (e, t) => {
-					p?.(oe, e, t), o.modify({
+					p?.(le, e, t), o.modify({
 						rowIndex: e.rowEnd,
 						colIndex: e.colEnd
 					}, {
@@ -3795,48 +3830,52 @@ var to = (e, t) => void 0 === t ? e : null === t ? null : {
 					});
 				}
 			}),
-			!Q && E && x(un, {
-				range: oe,
+			!te && E && x(gn, {
+				range: le,
 				snapDestination: I,
-				...le.border,
+				...se.border,
 				onDragStart: (e, t) => {
-					R?.(e, t), F({
+					R?.(e, t), H({
 						kind: "fill",
 						template: e,
 						destination: e
 					});
 				},
 				onDragMove: (e, t) => {
-					M?.(oe, e, t), F({
+					M?.(le, e, t), H({
 						kind: "fill",
-						template: oe,
+						template: le,
 						destination: e
 					});
 				},
 				onDragEnd: (e, t) => {
-					C?.(oe, e, t), ae(e);
+					C?.(le, e, t), de(e);
 				},
 				onDragDone: () => {
-					P?.(), F(null);
-				}
+					P?.(), H(null);
+				},
+				onDoubleClick: k ? (e, t) => {
+					const n = k(e);
+					n && !U.isEqualRanges(n, e) && (C?.(e, n, t), de(n));
+				} : void 0
 			}),
-			A.removePreview && lo(se, A.removePreview),
-			ue,
-			null != de && ce && x(kt, {
-				anchor: { range: (ge = ce, "move" === ge.kind ? ge.to : "fill" === ge.kind ? ge.destination : ge.range) },
-				placement: z ?? oo,
+			F.removePreview && io(ce, F.removePreview),
+			he,
+			null != ge && ue && x(kt, {
+				anchor: { range: (fe = ue, "move" === fe.kind ? fe.to : "fill" === fe.kind ? fe.destination : fe.range) },
+				placement: $ ?? ro,
 				offset: 8,
 				whenOff: "clamp",
 				open: !0,
 				style: { pointerEvents: "none" },
-				children: de
+				children: ge
 			})
 		]
 	});
-	var ge;
+	var fe;
 });
-ro.displayName = "SelectionLayer";
-var lo = (e, t, n, o = !1) => v(w, { children: [
+lo.displayName = "SelectionLayer";
+var io = (e, t, n, o = !1) => v(w, { children: [
 	e.fill && x(Wt, {
 		className: "fill",
 		animatedTransition: o,
@@ -3856,7 +3895,7 @@ var lo = (e, t, n, o = !1) => v(w, { children: [
 		range: t,
 		...e.border
 	})
-] }), io = [
+] }), so = [
 	"#1a73e8",
 	"#d93025",
 	"#1e8e3e",
@@ -3864,13 +3903,13 @@ var lo = (e, t, n, o = !1) => v(w, { children: [
 	"#e37400",
 	"#12a4af",
 	"#d01884"
-], so = Array.from({ length: E }, (e, t) => `var(--sxl-color-series-${t + 1}, ${io[t]})`), ao = "var(--sxl-color-primary, rgb(0, 120, 215))", co = (e, t, n) => ({
+], ao = Array.from({ length: E }, (e, t) => `var(--sxl-color-series-${t + 1}, ${so[t]})`), co = "var(--sxl-color-primary, rgb(0, 120, 215))", uo = (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))
-}), uo = (e) => ({ stroke: so.length ? so[e % so.length] : ao }), go = (e) => {
-	const { selection: t, getRangeStyle: n = uo, anchors: o = sn, 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 = qe(), b = T(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, z = f(g);
+}), go = (e) => ({ stroke: ao.length ? ao[e % ao.length] : co }), ho = (e) => {
+	const { selection: t, getRangeStyle: n = go, anchors: o = an, 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 = qe(), b = T(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, z = f(g);
 	z.current = g, c(() => {
 		z.current?.(D, R);
 	}, [D, R]), c(() => () => {
@@ -3904,15 +3943,15 @@ var lo = (e, t, n, o = !1) => v(w, { children: [
 				rowIndex: S[n].rowStart,
 				colIndex: S[n].colStart
 			};
-			return k(!0), L(n, co(t, e, y.getTotalRange())), {
-				drag: (e) => L(n, co(t, e, y.getTotalRange())),
+			return k(!0), L(n, uo(t, e, y.getTotalRange())), {
+				drag: (e) => L(n, uo(t, e, y.getTotalRange())),
 				end: () => k(!1),
 				captureEvents: !1
 			};
 		}
 		const o = (!t.ctrlKey && !t.metaKey || !i) && n >= 0 ? n : S.length;
 		return k(!0), L(o, U.cellToRange(e)), {
-			drag: (t) => L(o, co(e, t, y.getTotalRange())),
+			drag: (t) => L(o, uo(e, t, y.getTotalRange())),
 			end: () => k(!1),
 			captureEvents: !1
 		};
@@ -3932,7 +3971,7 @@ var lo = (e, t, n, o = !1) => v(w, { children: [
 					e.stopPropagation(), A.onPointerUp(e);
 				}
 			}),
-			r && F.map((e) => x(rn, {
+			r && F.map((e) => x(ln, {
 				range: S[e],
 				grip: "edges",
 				preserveFocus: u,
@@ -3945,7 +3984,7 @@ var lo = (e, t, n, o = !1) => v(w, { children: [
 			}, `move-${e}`)),
 			F.map((e) => {
 				const t = e === E, n = e === O, r = ((e, t, n) => {
-					const o = e.stroke ?? h.stroke ?? ao;
+					const o = e.stroke ?? h.stroke ?? co;
 					return {
 						...h,
 						...e,
@@ -3955,7 +3994,7 @@ var lo = (e, t, n, o = !1) => v(w, { children: [
 						...a && t ? { animatedStroke: !0 } : void 0
 					};
 				})(N[e], t, n);
-				return x(cn, {
+				return x(dn, {
 					range: S[e],
 					anchors: o,
 					size: s,
@@ -3975,8 +4014,8 @@ var lo = (e, t, n, o = !1) => v(w, { children: [
 		]
 	});
 };
-go.displayName = "RangesPickerLayer";
-var ho = 0, fo = class {
+ho.displayName = "RangesPickerLayer";
+var fo = 0, po = 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.state = {
 			mode: t.mode ?? "enter",
@@ -3985,7 +4024,7 @@ var ho = 0, fo = class {
 			dirty: t.dirty,
 			initialSelection: t.initialSelection ?? null,
 			autoFocus: t.autoFocus ?? !0,
-			token: ++ho
+			token: ++fo
 		};
 	}
 	getState() {
@@ -4090,7 +4129,7 @@ var ho = 0, fo = class {
 	notify() {
 		this.listeners.forEach((e) => e());
 	}
-}, po = (e) => e.ctrlKey || e.metaKey || e.altKey || e.isComposing ? null : "Process" === e.key || 229 === e.keyCode ? {
+}, mo = (e) => e.ctrlKey || e.metaKey || e.altKey || e.isComposing ? null : "Process" === e.key || 229 === e.keyCode ? {
 	mode: "enter",
 	dirty: ""
 } : 1 === e.key.length ? " " === e.key && e.shiftKey ? null : {
@@ -4099,7 +4138,7 @@ var ho = 0, fo = class {
 } : e.shiftKey ? null : "F2" === e.key ? { mode: "edit" } : "Backspace" === e.key ? {
 	mode: "enter",
 	dirty: ""
-} : null, mo = (e, t) => {
+} : null, wo = (e, t) => {
 	const n = f(null);
 	return u(() => {
 		const t = n.current;
@@ -4107,7 +4146,7 @@ var ho = 0, fo = class {
 	}, [t]), z((e) => {
 		n.current = e;
 	}, []);
-}, wo = (e) => {
+}, xo = (e) => {
 	const { mode: t, value: n, onDirtyChange: o, onModeChange: r, onCommit: l, onCancel: i, onNavigate: s, onTraverse: a, setCaret: c } = e;
 	return z((e) => {
 		const d = e.nativeEvent;
@@ -4153,7 +4192,7 @@ var ho = 0, fo = class {
 		a,
 		c
 	]);
-}, xo = class {
+}, vo = class {
 	constructor(e, t, n) {
 		this.current = null, this.listeners = /* @__PURE__ */ new Set(), this.anchor = e, this.createEdit = t, this.revertAnchor = n?.revertAnchor, this.unsubscribeAnchor = e.subscribe(() => this.onAnchorChange());
 	}
@@ -4175,7 +4214,7 @@ var ho = 0, fo = class {
 	}
 	startEdit(e, t = {}) {
 		const n = this.createEdit(e);
-		return !!n && (this.current = new fo({
+		return !!n && (this.current = new po({
 			coords: e,
 			...n
 		}, t), this.notify(), !0);
@@ -4194,7 +4233,7 @@ var ho = 0, fo = class {
 	notify() {
 		this.listeners.forEach((e) => e());
 	}
-}, vo = (e, t, n, o = "left", r = 0) => {
+}, yo = (e, t, n, o = "left", r = 0) => {
 	if (!t) return null;
 	const l = e.getRangeFromCell(t), i = e.getBoundsFromRange(l);
 	if (!i) return null;
@@ -4216,7 +4255,7 @@ var ho = 0, fo = class {
 		},
 		inView: s
 	};
-}, yo = 96 / 72 * 11, bo = "Calibri, sans-serif", So = (e) => {
+}, bo = 96 / 72 * 11, So = "Calibri, sans-serif", Eo = (e) => {
 	const { open: t, mode: n, clean: o, dirty: r, token: l, autoFocus: i, initialSelection: s, zoom: a, readOnly: c, onDirtyChange: d, onModeChange: g, onCommit: h, onCancel: p, onNaturalSize: m } = e, y = r ?? o ?? "", b = f(null), S = f(null), E = f(0);
 	u(() => {
 		if (!t || !i) return;
@@ -4241,14 +4280,14 @@ var ho = 0, fo = class {
 			height: e.offsetHeight
 		});
 	}, [y, m]);
-	const I = wo({
+	const I = xo({
 		mode: n,
 		value: y,
 		onDirtyChange: d,
 		onModeChange: g,
 		onCommit: h,
 		onCancel: p,
-		setCaret: mo(b, y)
+		setCaret: wo(b, y)
 	});
 	return v(w, { children: [x("textarea", {
 		ref: b,
@@ -4268,8 +4307,8 @@ var ho = 0, fo = class {
 			resize: "none",
 			overflow: "hidden",
 			background: "transparent",
-			fontFamily: bo,
-			fontSize: yo * a + "px",
+			fontFamily: So,
+			fontSize: bo * a + "px",
 			lineHeight: 1.2,
 			whiteSpace: "pre",
 			userSelect: "text"
@@ -4289,21 +4328,21 @@ var ho = 0, fo = class {
 			visibility: "hidden",
 			pointerEvents: "none",
 			whiteSpace: "pre",
-			fontFamily: bo,
-			fontSize: `${yo}px`,
+			fontFamily: So,
+			fontSize: `${bo}px`,
 			lineHeight: 1.2
 		},
 		children: 0 === y.length ? " " : y
 	})] });
 };
-function Eo(e) {
+function Io(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 = Ze(), h = T(t, (e) => e.getSession()), f = B(h, (e) => e.getState()), [m, w] = p(null), v = z((e) => {
 		w((t) => t && t.width === e.width && t.height === e.height ? t : e);
 	}, []), y = z((e) => {
 		if (t.getSession()) return;
 		const n = t.getAnchor().getCoords();
 		if (!n) return;
-		const o = po(e.nativeEvent);
+		const o = mo(e.nativeEvent);
 		o && ("Process" !== e.nativeEvent.key && 229 !== e.nativeEvent.keyCode && e.preventDefault(), e.stopPropagation(), t.startEdit(n, o));
 	}, [t]), b = z((e) => {
 		if (t.getSession()) return;
@@ -4328,7 +4367,7 @@ function Eo(e) {
 			rowEnd: e.rowStart,
 			colEnd: e.colStart
 		})), f) {
-			const e = vo(g, I, m, o, i);
+			const e = yo(g, I, m, o, i);
 			C = e?.bounds ?? null, R = e?.inView ?? !1;
 		} else C = g.getBoundsFromRange(e);
 	}
@@ -4376,11 +4415,11 @@ function Eo(e) {
 				opacity: k ? 1 : 0,
 				pointerEvents: k ? "auto" : "none"
 			},
-			children: n ? n(D) : x(So, { ...D })
+			children: n ? n(D) : x(Eo, { ...D })
 		}) : null
 	});
 }
-function Io(e) {
+function Co(e) {
 	const { editable: t, renderEditor: n, idleClean: o = null, mapClean: r, editorId: l, readOnly: i, className: s, style: a } = e, c = T(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(() => {
 		i || (t.getSession() || t.startEdit(t.getAnchor().getCoords(), {
 			mode: "edit",
@@ -4410,11 +4449,11 @@ function Io(e) {
 		className: s,
 		style: a,
 		onFocus: p,
-		children: n ? n(m) : x(So, { ...m })
+		children: n ? n(m) : x(Eo, { ...m })
 	});
 }
-So.displayName = "DefaultEditorInput", Io.displayName = "EditorDiv";
-var Co = "ew-resize", Ro = "ns-resize", Mo = i(r((e, t) => {
+Eo.displayName = "DefaultEditorInput", Co.displayName = "EditorDiv";
+var Ro = "ew-resize", Mo = "ns-resize", Po = i(r((e, t) => {
 	const { axis: n, index: o, className: r, style: l, disabled: i = !1, disabledResize: s = !1, isNextHidden: a, isHidden: c, isSelected: d, isSelectedAll: u, showTouchDivider: g, bounds: h, onPointerDown: f, onAutoFit: p, ...m } = e, w = qe(), y = n === G.Column, b = 1 / S.getDevicePixelRatio(), E = d || u, I = E ? "color-mix(in srgb, var(--sxl-color-primary, rgb(33, 115, 70)) 35%, var(--sxl-color-base-300, rgb(171, 171, 171)))" : "var(--sxl-color-base-300, rgb(171, 171, 171))", C = "var(--sxl-color-base-100, #f5f5f5)", R = "touch" === S.detectIt().primaryInput;
 	let M = y ? 14 : 8;
 	const P = w.getZoom();
@@ -4435,7 +4474,7 @@ var Co = "ew-resize", Ro = "ns-resize", Mo = i(r((e, t) => {
 			position: "absolute",
 			overflow: "visible",
 			pointerEvents: "auto",
-			cursor: i || s || R ? void 0 : y ? Co : Ro,
+			cursor: i || s || R ? void 0 : y ? Ro : Mo,
 			...l
 		},
 		...m,
@@ -4479,8 +4518,8 @@ var Co = "ew-resize", Ro = "ns-resize", Mo = i(r((e, t) => {
 			} })
 		}) : null]
 	});
-})), Po = (e) => x(Mo, { ...e }), ko = i(r((e, t) => {
-	const { axis: n, index: o, disabled: r = !1, disabledResize: l = !1, resizeThreshold: i = 1, renderDivider: s = Po, onDividerMouseDown: a, onDividerResizeStart: c, onDividerResize: d, onDividerResizeEnd: u, onDividerMouseUp: g, onDividerAutoFit: h, onPointerDown: m, ...y } = e, b = qe(), E = z(m, [m]), I = z(h, [h]), C = n === G.Column;
+})), ko = (e) => x(Po, { ...e }), Do = i(r((e, t) => {
+	const { axis: n, index: o, disabled: r = !1, disabledResize: l = !1, resizeThreshold: i = 1, renderDivider: s = ko, onDividerMouseDown: a, onDividerResizeStart: c, onDividerResize: d, onDividerResizeEnd: u, onDividerMouseUp: g, onDividerAutoFit: h, onPointerDown: m, ...y } = e, b = qe(), E = z(m, [m]), I = z(h, [h]), C = n === G.Column;
 	let R = C ? b.getVisibleColumns() : b.getVisibleRows(), M = null;
 	R.length > 0 && (M = C ? b.getBoundsFromRange({
 		rowStart: 0,
@@ -4546,7 +4585,7 @@ var Co = "ew-resize", Ro = "ns-resize", Mo = i(r((e, t) => {
 	let K = null;
 	return k && k.isResizing && k.index === o && (K = Y(x("div", { style: {
 		position: "absolute",
-		cursor: C ? Co : Ro,
+		cursor: C ? Ro : Mo,
 		left: 0,
 		top: 0,
 		width: "100%",
@@ -4566,26 +4605,26 @@ var Co = "ew-resize", Ro = "ns-resize", Mo = i(r((e, t) => {
 		children: U
 	})] });
 }));
-ko.displayName = "HeaderDividerAnchor";
-var Do = (e, t, n) => t === G.Column ? {
+Do.displayName = "HeaderDividerAnchor";
+var To = (e, t, n) => t === G.Column ? {
 	rowIndex: n.rowStart,
 	colIndex: e.colIndex
 } : {
 	rowIndex: e.rowIndex,
 	colIndex: n.colStart
-}, To = (e, t, n) => t === G.Column ? {
+}, zo = (e, t, n) => t === G.Column ? {
 	rowIndex: n.rowEnd,
 	colIndex: e.colIndex
 } : {
 	rowIndex: e.rowIndex,
 	colIndex: n.colEnd
-}, zo = (e, t, n) => t === G.Column ? {
+}, Oo = (e, t, n) => t === G.Column ? {
 	rowIndex: n.rowStart,
 	colIndex: e.colIndex
 } : {
 	rowIndex: e.rowIndex,
 	colIndex: n.colStart
-}, Oo = (e, t, n, o) => n === G.Column ? {
+}, $o = (e, t, n, o) => n === G.Column ? {
 	rowStart: o.rowStart,
 	rowEnd: o.rowEnd,
 	colStart: Math.min(e.colIndex, t.colIndex),
@@ -4595,7 +4634,7 @@ var Do = (e, t, n) => t === G.Column ? {
 	colEnd: o.colEnd,
 	rowStart: Math.min(e.rowIndex, t.rowIndex),
 	rowEnd: Math.max(e.rowIndex, t.rowIndex)
-}, $o = (e, t, n) => {
+}, Lo = (e, t, n) => {
 	let o = null, r = null, l = 0;
 	const i = () => t.getAllPanes()[_.Center] ?? t, s = (t, n, o) => {
 		if (!e) return;
@@ -4638,7 +4677,7 @@ var Do = (e, t, n) => t === G.Column ? {
 		let s = null;
 		return t === G.Column ? e.x >= r.right - 24 && l.colEnd < o.colEnd ? s = { colIndex: l.colEnd + 1 } : e.x <= r.left + 24 && l.colStart > o.colStart && (s = { colIndex: l.colStart - 1 }) : e.y >= r.bottom - 24 && l.rowEnd < o.rowEnd ? s = { rowIndex: l.rowEnd + 1 } : e.y <= r.top + 24 && l.rowStart > o.rowStart && (s = { rowIndex: l.rowStart - 1 }), !!s && (c(s), !0);
 	}, u = (e) => {
-		const { axis: t, entireRange: c, replaceActive: d = !1 } = n(), u = Oo(o ?? e, e, t, c), g = r ?? zo(e, t, i().getVisibleRange());
+		const { axis: t, entireRange: c, replaceActive: d = !1 } = n(), u = $o(o ?? e, e, t, c), g = r ?? Oo(e, t, i().getVisibleRange());
 		d ? a(l, u, g) : s(u, g, "replace");
 	};
 	return Yt(t, (t, g) => {
@@ -4648,11 +4687,11 @@ var Do = (e, t, n) => t === G.Column ? {
 		const { axis: p, entireRange: m, allowMulti: w = !0, replaceActive: x = !1, preserveFocus: v = !1, onPointerDownInterceptor: y, onDragStart: b, onDragEnd: S, onPointerUp: E } = n();
 		if (!1 === y?.(g, t)) return null;
 		x && g.stopPropagation(), v && h && g.preventDefault(), b?.();
-		const I = zo(t, p, i().getVisibleRange()), C = g.shiftKey, R = (g.ctrlKey || g.metaKey) && w;
+		const I = Oo(t, p, i().getVisibleRange()), C = g.shiftKey, R = (g.ctrlKey || g.metaKey) && w;
 		if (x) {
 			const n = e.getSelection(), i = n.ranges ?? [], s = n.rangeIndex ?? -1;
-			C && o ? (l = s >= 0 ? s : Math.max(0, i.length - 1), a(l, Oo(o, t, p, m), r ?? I)) : (o = t, r = I, l = R || s < 0 ? i.length : s, a(l, Oo(t, t, p, m), I));
-		} else C && o ? s(Oo(o, t, p, m), r ?? I, "replace") : R ? (o = t, r = I, s(Oo(t, t, p, m), I, "append")) : (o = t, r = I, s(Oo(t, t, p, m), I, "clear"));
+			C && o ? (l = s >= 0 ? s : Math.max(0, i.length - 1), a(l, $o(o, t, p, m), r ?? I)) : (o = t, r = I, l = R || s < 0 ? i.length : s, a(l, $o(t, t, p, m), I));
+		} else C && o ? s($o(o, t, p, m), r ?? I, "replace") : R ? (o = t, r = I, s($o(t, t, p, m), I, "append")) : (o = t, r = I, s($o(t, t, p, m), I, "clear"));
 		return ((e) => {
 			c(n().axis === G.Column ? { colIndex: e.colIndex } : { rowIndex: e.rowIndex });
 		})(t), {
@@ -4665,16 +4704,16 @@ var Do = (e, t, n) => t === G.Column ? {
 			captureEvents: x
 		};
 	});
-}, Lo = (e, t) => {
+}, Bo = (e, t) => {
 	const n = qe(), o = f(t);
 	o.current = t;
-	const r = g(() => $o(e, n, () => o.current), [e, n]);
+	const r = g(() => Lo(e, n, () => o.current), [e, n]);
 	return c(() => () => r.dispose(), [r]), {
 		onPointerDown: r.onPointerDown,
 		onPointerMove: r.onPointerMove,
 		onPointerUp: r.onPointerUp
 	};
-}, Bo = (e) => null == e ? [] : Array.isArray(e) ? e : [e], Ao = i(r((e, t) => {
+}, Ao = (e) => null == e ? [] : Array.isArray(e) ? e : [e], No = i(r((e, t) => {
 	const { rowCount: n = 1, columnCount: o = 1, getRowHeight: r, getColumnWidth: l, metrics: i, renderCells: a, renderBorders: c, showGridLines: d = !0, gridLineColor: u, propsGridLineRows: f, propsGridLineColumns: p, getVisibleCells: m, hiddenCellAt: w, renderBelow: v, children: y, ...b } = e, S = oe({
 		rowCount: n,
 		columnCount: o,
@@ -4684,19 +4723,19 @@ var Do = (e, t, n) => t === G.Column ? {
 		C();
 	}, []), P = L(t, () => ({ invalidate: M }), [M]), k = g(() => {
 		const e = [];
-		return !1 !== d && e.push(x(zn, {
+		return !1 !== d && e.push(x(On, {
 			showGridLines: d,
 			gridLineColor: u,
 			propsRows: f,
 			propsColumns: p,
 			getVisibleCells: m,
 			hiddenCellAt: w
-		}, "__gridlines")), e.push(...Bo(v)), e.push(...Bo(c)), a && e.push(x(En, {
+		}, "__gridlines")), e.push(...Ao(v)), e.push(...Ao(c)), a && e.push(x(In, {
 			renderCell: a,
 			getVisibleCells: m,
 			hiddenCellAt: w,
 			cacheToken: R
-		}, "__cells")), e.push(...Bo(y)), e;
+		}, "__cells")), e.push(...Ao(y)), e;
 	}, [
 		d,
 		u,
@@ -4719,17 +4758,17 @@ var Do = (e, t, n) => t === G.Column ? {
 		children: k
 	});
 }));
-Ao.displayName = "Grid";
-var No = {
+No.displayName = "Grid";
+var Fo = {
 	fill: { fill: "color-mix(in srgb, var(--sxl-color-primary, rgb(0, 120, 215)) 14%, transparent)" },
 	border: null,
 	inner: null
-}, Fo = {
+}, Vo = {
 	stroke: "var(--sxl-color-primary, rgb(0, 120, 215))",
 	alignWidth: 1,
 	inset: 1
-}, Vo = r(function(e, t) {
-	const { itemCount: n, renderItem: o, itemHeight: r = 24, selection: l, onKeyDown: i, cacheToken: a, className: c, style: d, children: u, ...h } = e, f = L(t, () => ({ isList: () => !0 }), []), p = g(() => new M(), []), m = g(() => new Ln({ getBounds: () => ({
+}, Ho = r(function(e, t) {
+	const { itemCount: n, renderItem: o, itemHeight: r = 24, selection: l, onKeyDown: i, cacheToken: a, className: c, style: d, children: u, ...h } = e, f = L(t, () => ({ isList: () => !0 }), []), p = g(() => new M(), []), m = g(() => new Bn({ getBounds: () => ({
 		rowStart: 0,
 		colStart: 0,
 		rowEnd: Math.max(0, n - 1),
@@ -4791,14 +4830,14 @@ var No = {
 					columnCount: 1,
 					metrics: S,
 					children: [
-						x(ro, {
+						x(lo, {
 							selection: w,
 							anchorHole: !1,
-							singleStyle: No,
-							singleAnchorStyle: Fo,
-							multiAnchorStyle: Fo
+							singleStyle: Fo,
+							singleAnchorStyle: Vo,
+							multiAnchorStyle: Vo
 						}, "__selection"),
-						x(En, {
+						x(In, {
 							renderCell: E,
 							cacheToken: a
 						}, "__cells"),
@@ -4808,7 +4847,7 @@ var No = {
 			})
 		})
 	});
-}), Ho = (e, t) => x("input", {
+}), _o = (e, t) => x("input", {
 	type: "checkbox",
 	checked: e,
 	ref: (e) => {
@@ -4817,8 +4856,8 @@ var No = {
 	readOnly: !0,
 	tabIndex: -1,
 	style: { margin: 0 }
-}), _o = r(function(e, t) {
-	const { itemCount: n, isChecked: o, onCheckedChange: r, renderValue: l, renderCheckbox: i = Ho, renderDivider: a, selectAllLabel: c, itemHeight: d, selection: u, cacheToken: h, className: f, style: p, children: m, ...y } = e, b = L(t, () => ({ isCheckboxList: () => !0 }), []), S = g(() => new Ln({ getBounds: () => ({
+}), Wo = r(function(e, t) {
+	const { itemCount: n, isChecked: o, onCheckedChange: r, renderValue: l, renderCheckbox: i = _o, renderDivider: a, selectAllLabel: c, itemHeight: d, selection: u, cacheToken: h, className: f, style: p, children: m, ...y } = e, b = L(t, () => ({ isCheckboxList: () => !0 }), []), S = g(() => new Bn({ getBounds: () => ({
 		rowStart: 0,
 		colStart: 0,
 		rowEnd: Math.max(0, n - 1),
@@ -4912,7 +4951,7 @@ var No = {
 				},
 				children: i(R, M)
 			}), c]
-		}), a?.()] }), x(Vo, {
+		}), a?.()] }), x(Ho, {
 			itemCount: n,
 			itemHeight: d,
 			selection: E,
@@ -4925,13 +4964,13 @@ var No = {
 			}
 		})]
 	});
-}), Wo = {
+}), Uo = {
 	light: {},
 	dark: {
 		"color-base-100": "#1e1e1e",
 		"color-base-300": "#3a3a3a"
 	}
-}, Uo = {
+}, Ko = {
 	light: {
 		"color-base-100": "#f2f2f2",
 		"color-base-hover": "#ececec",
@@ -4942,7 +4981,7 @@ var No = {
 		"color-base-hover": "#2e2e2e",
 		"color-base-300": "#4a4a4a"
 	}
-}, Ko = (e, ...t) => D(e, Wo[e], ...t), jo = (e, ...t) => D(e, Uo[e], ...t), Go = ({ app: e, grid: t = Wo, header: n = Uo, layer: o = "sxl-defaults", scope: r } = {}) => {
+}, jo = (e, ...t) => D(e, Uo[e], ...t), Go = (e, ...t) => D(e, Ko[e], ...t), Xo = ({ app: e, grid: t = Uo, header: n = Ko, layer: o = "sxl-defaults", scope: r } = {}) => {
 	const l = e ?? k, i = Object.fromEntries(Object.keys(n).map((e) => [e, {
 		"color-base-100": l[e]?.["color-base-200"],
 		...n[e]
@@ -4957,4 +4996,4 @@ var No = {
 		scope: r
 	});
 };
-export { Kt as AUTO_SCROLL_INTERVAL_MS, En as CellLayer, Sn as CellTileDiv, _o as CheckboxList, Kn as DEFAULT_ANCHOR_STYLE, _t as DEFAULT_HANDLE_STYLE, Un as DEFAULT_MULTI_STYLE, jn as DEFAULT_REMOVE_PREVIEW_STYLE, Wn as DEFAULT_SINGLE_STYLE, gn as DefaultCellRenderer, xo as DefaultEditable, So as DefaultEditorInput, Mo as DefaultHeaderDivider, Ln as DefaultSelection, Qt as DragHandle, rn as Draggable, jt as EDGE_AUTO_SCROLL_MARGIN_PX, fo as EditSession, Io as EditorDiv, Eo as EditorLayer, un as FillHandle, Wo as GRID_SURFACE, Ao as Grid, Fe as GridSurface, zn as GridlineLayer, Uo as HEADER_SURFACE, ko as HeaderDividerAnchor, Ot as HoverTipLayer, et as Layer, ie as LineSVG, Vo as List, so as PICKER_COLORS, sn as RESIZE_ANCHORS_4, an as RESIZE_ANCHORS_8, Ht as RangePrompt, Wt as RangeRect, cn as RangeResizer, go as RangesPickerLayer, se as RectangleSVG, $n as SELECTION_CLIP_INSETS, ro as SelectionLayer, Xn as SelectionTouchGrips, re as ShapeBoundsContext, Et as StickyAnchor, kt as StickyFloat, Be as SurfaceStateContext, Ae as SurfaceStateProvider, lt as VirtualDiv, Go as buildGridThemeCSS, ne as createAxis, Yt as createDragCells, $o as createHeaderSelectionPointer, Le as createSurfaceStateStore, qt as createWindowDragCells, uo as defaultRangeStyle, Gt as edgeScrollPane, vo as expandEditorBounds, Ko as gridThemeVars, zo as headerAnchorCell, To as headerEntireEnd, Do as headerEntireStart, Oo as headerRange, jo as headerThemeVars, po as startEventFromKey, Zt as useDragCells, wo as useEditorKeymap, Rt as useGridFloatTheme, oe as useGridMetrics, qe as useGridPane, Ze as useGridPaneOptional, Lo as useHeaderSelectionPointer, Tt as useHoverIntent, Qe as useLayer, mo as usePendingCaret, zt as useRangeHover, Gn as useSelectionPointer, le as useShapeBounds, bt as useSticky, St as useStickyOptional, Je as useSurfaceState, Jt as useWindowDragCells };
+export { Kt as AUTO_SCROLL_INTERVAL_MS, In as CellLayer, En as CellTileDiv, Wo as CheckboxList, jn as DEFAULT_ANCHOR_STYLE, _t as DEFAULT_HANDLE_STYLE, Kn as DEFAULT_MULTI_STYLE, Gn as DEFAULT_REMOVE_PREVIEW_STYLE, Un as DEFAULT_SINGLE_STYLE, hn as DefaultCellRenderer, vo as DefaultEditable, Eo as DefaultEditorInput, Po as DefaultHeaderDivider, Bn as DefaultSelection, en as DragHandle, ln as Draggable, jt as EDGE_AUTO_SCROLL_MARGIN_PX, po as EditSession, Co as EditorDiv, Io as EditorLayer, gn as FillHandle, Uo as GRID_SURFACE, No as Grid, Fe as GridSurface, On as GridlineLayer, Ko as HEADER_SURFACE, Do as HeaderDividerAnchor, Ot as HoverTipLayer, et as Layer, ie as LineSVG, Ho as List, ao as PICKER_COLORS, an as RESIZE_ANCHORS_4, cn as RESIZE_ANCHORS_8, Ht as RangePrompt, Wt as RangeRect, dn as RangeResizer, ho as RangesPickerLayer, se as RectangleSVG, Ln as SELECTION_CLIP_INSETS, lo as SelectionLayer, Yn as SelectionTouchGrips, re as ShapeBoundsContext, Et as StickyAnchor, kt as StickyFloat, Be as SurfaceStateContext, Ae as SurfaceStateProvider, lt as VirtualDiv, Xo as buildGridThemeCSS, ne as createAxis, Yt as createDragCells, Lo as createHeaderSelectionPointer, Le as createSurfaceStateStore, qt as createWindowDragCells, go as defaultRangeStyle, Gt as edgeScrollPane, yo as expandEditorBounds, jo as gridThemeVars, Oo as headerAnchorCell, zo as headerEntireEnd, To as headerEntireStart, $o as headerRange, Go as headerThemeVars, mo as startEventFromKey, Zt as useDragCells, xo as useEditorKeymap, Rt as useGridFloatTheme, oe as useGridMetrics, qe as useGridPane, Ze as useGridPaneOptional, Bo as useHeaderSelectionPointer, Tt as useHoverIntent, Qe as useLayer, wo as usePendingCaret, zt as useRangeHover, Xn as useSelectionPointer, le as useShapeBounds, bt as useSticky, St as useStickyOptional, Je as useSurfaceState, Jt as useWindowDragCells };