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

package/node/esm/index.mjs

@@ -1,5 +1,5 @@
 /**
-* @license @sheetxl/grid-react - Grid React - Advanced grid component for React - v0.8.0-beta.4
+* @license @sheetxl/grid-react - Grid React - Advanced grid component for React - v0.8.0-beta.6
 *
 * (C) 2026-present SheetXL Inc. & Michael T. Ford
 * License: The license can be found at https://www.sheetxl.com/license.
@@ -4087,20 +4087,20 @@ var Mo = (e, t) => void 0 === t ? e : null === t ? null : {
 		getRegionBounds: (e) => oe.current?.(e) ?? null
 	}), []);
 	e.useImperativeHandle(n, () => le, [le]);
-	const ie = !!j.ranges && j.ranges.length > 0, se = ie ? [...j.ranges] : [U.cellToRange(j.cell)], ae = se.length > 1, ce = j.rangeIndex ?? -1, de = ie ? ce >= 0 ? ce : se.length - 1 : 0, ue = Q.getRangeFromCell(j.cell), ge = U.unionRanges(se[de] ?? U.cellToRange(j.cell), ue), he = se.filter((e, t) => t !== de), fe = ae ? Po(fo, a) : Po(ho, s), pe = {
+	const ie = !!j.ranges && j.ranges.length > 0, se = ie ? [...j.ranges] : [U.cellToRange(j.cell)], ae = se.length > 1, ce = j.rangeIndex ?? -1, de = ie ? ce >= 0 ? ce : se.length - 1 : 0, ue = Q.getRangeFromCell(j.cell), ge = se[de] ?? U.cellToRange(j.cell), he = ue && U.isRangeWithinRange(ge, ue) ? ue : ge, fe = U.intersectRanges(ue, he) ?? U.cellToRange(j.cell), pe = se.filter((e, t) => t !== de), me = ae ? Po(fo, a) : Po(ho, s), we = {
 		...po,
 		...c
-	}, me = Po(mo, u), { refusedColor: we, ...xe } = {
+	}, xe = Po(mo, u), { refusedColor: ve, ...ye } = {
 		...wo,
 		...g
-	}, ve = null === f ? null : Po(xo, f), ye = (e, t) => {
+	}, be = null === f ? null : Po(xo, f), Se = (e, t) => {
 		const n = t.mods.shiftKey ? t.insert : null, o = t.mods.ctrlKey || t.mods.metaKey, r = n ? Cn(e, n, Q.getTotalRange()) : e, l = {
 			to: r,
 			copy: o,
 			insert: n?.axis
 		};
-		return l.refused = !!n && !o && (h ? h(ge, l) : U.isRefusedInsertCut(U.classifyInsertCut(ge, r, n.axis))), l;
-	}, be = (e) => {
+		return l.refused = !!n && !o && (h ? h(he, l) : U.isRefusedInsertCut(U.classifyInsertCut(he, r, n.axis))), l;
+	}, Ee = (e) => {
 		const t = o.getSelection(), n = t.ranges, r = !!n && n.length > 0, l = r ? void 0 !== t.rangeIndex && t.rangeIndex >= 0 && t.rangeIndex < n.length ? t.rangeIndex : n.length - 1 : 0, i = r ? n.map((t, n) => n === l ? e : t) : [e], s = U.isCellWithinRange(t.cell, e) ? t.cell : {
 			rowIndex: e.rowStart,
 			colIndex: e.colStart
@@ -4110,16 +4110,16 @@ var Mo = (e, t) => void 0 === t ? e : null === t ? null : {
 			ranges: i,
 			rangeIndex: l
 		});
-	}, Se = Z ?? ("extend" === Y.dragMode ? {
+	}, Ie = Z ?? ("extend" === Y.dragMode ? {
 		kind: "select",
-		range: ge
-	} : null), Ee = Se && A ? A(Se) : null, Ie = e.Children.map(ae ? m : p, (t) => {
+		range: he
+	} : null), Ce = Ie && A ? A(Ie) : null, Re = e.Children.map(ae ? m : p, (t) => {
 		if (!e.isValidElement(t)) return t;
 		const n = t.props;
 		return e.cloneElement(t, {
-			range: ge,
+			range: he,
 			onDragEnd: (e, t) => {
-				n.onDragEnd?.(e, t), be(e);
+				n.onDragEnd?.(e, t), Ee(e);
 			}
 		});
 	});
@@ -4132,43 +4132,43 @@ var Mo = (e, t) => void 0 === t ? e : null === t ? null : {
 			le.handleKey(e) && (e.preventDefault(), e.stopPropagation());
 		},
 		children: [
-			"move" === Z?.kind && !Z.drop.copy && ve && !U.isEqualRanges(Z.to, Z.from) && To(ve, Z.from, void 0, !1, "move-source"),
+			"move" === Z?.kind && !Z.drop.copy && be && !U.isEqualRanges(Z.to, Z.from) && To(be, Z.from, void 0, !1, "move-source"),
 			v(w, ae ? { children: [
-				he.map((t, n) => x(e.Fragment, { children: To(fe, t) }, `other-${n}`)),
-				To(fe, ge, K ? ue : void 0),
+				pe.map((t, n) => x(e.Fragment, { children: To(me, t) }, `other-${n}`)),
+				To(me, he, K ? fe : void 0),
 				x(tn, {
 					className: "anchor",
-					range: ue,
-					...pe
+					range: fe,
+					...we
 				})
-			] } : { children: [To(fe, ge, K ? ue : void 0), d && x(tn, {
+			] } : { children: [To(me, he, K ? fe : void 0), d && x(tn, {
 				className: "anchor",
-				range: ue,
+				range: fe,
 				...d
 			})] }),
 			!ae && y && x(Rn, {
 				className: "move-grip",
-				range: ge,
+				range: he,
 				grip: "edges",
 				dragCursor: R,
 				renderMove: (e, t) => {
-					const n = ye(e, t);
+					const n = Se(e, t);
 					return n.insert ? x(nn, {
 						range: n.to,
 						axis: n.insert,
-						...xe,
-						color: (n.refused ? we : void 0) ?? xe.color
-					}) : fe.border && x(tn, {
+						...ye,
+						color: (n.refused ? ve : void 0) ?? ye.color
+					}) : me.border && x(tn, {
 						className: "move-ghost",
 						range: n.to,
-						...fe.border,
+						...me.border,
 						animatedTransition: !0,
 						style: { opacity: .6 }
 					});
 				},
 				onEdgeDoubleClick: N,
 				onDragStart: (e, t, n) => {
-					const o = ye(e, n);
+					const o = Se(e, n);
 					E?.(e, t, o), J({
 						kind: "move",
 						from: e,
@@ -4177,10 +4177,10 @@ var Mo = (e, t) => void 0 === t ? e : null === t ? null : {
 					});
 				},
 				onDragMove: (e, t, n) => {
-					const o = ye(e, n);
-					I?.(ge, o.to, t, o), J({
+					const o = Se(e, n);
+					I?.(he, o.to, t, o), J({
 						kind: "move",
-						from: ge,
+						from: he,
 						to: o.to,
 						drop: o
 					});
@@ -4189,8 +4189,8 @@ var Mo = (e, t) => void 0 === t ? e : null === t ? null : {
 					e || (C?.(), J(null));
 				},
 				onDragEnd: (e, t, n) => {
-					const r = ye(e, n);
-					r.refused || (b?.(ge, r.to, t, r), o.modify({
+					const r = Se(e, n);
+					r.refused || (b?.(he, r.to, t, r), o.modify({
 						rowIndex: r.to.rowEnd,
 						colIndex: r.to.colEnd
 					}, {
@@ -4200,9 +4200,9 @@ var Mo = (e, t) => void 0 === t ? e : null === t ? null : {
 				}
 			}),
 			!ae && M && x(On, {
-				range: ge,
+				range: he,
 				snapDestination: P,
-				...fe.border,
+				...me.border,
 				onDragStart: (e, t) => {
 					D?.(e, t), J({
 						kind: "fill",
@@ -4211,41 +4211,41 @@ var Mo = (e, t) => void 0 === t ? e : null === t ? null : {
 					});
 				},
 				onDragMove: (e, t) => {
-					T?.(ge, e, t), J({
+					T?.(he, e, t), J({
 						kind: "fill",
-						template: ge,
+						template: he,
 						destination: e
 					});
 				},
 				onDragEnd: (e, t) => {
-					k?.(ge, e, t), be(e);
+					k?.(he, e, t), Ee(e);
 				},
 				onMenu: O ? (e, t, n) => {
-					O(ge, e, t, n);
+					O(he, e, t, n);
 				} : void 0,
 				onDragDone: () => {
 					z?.(), J(null);
 				},
 				onDoubleClick: L ? (e, t) => {
 					const n = L(e);
-					n && !U.isEqualRanges(n, e) && (k?.(e, n, t), be(n));
+					n && !U.isEqualRanges(n, e) && (k?.(e, n, t), Ee(n));
 				} : void 0
 			}),
-			Y.removePreview && To(me, Y.removePreview, void 0, !1, "remove-preview"),
-			Ie,
-			null != Ee && Se && x(Tt, {
+			Y.removePreview && To(xe, Y.removePreview, void 0, !1, "remove-preview"),
+			Re,
+			null != Ce && Ie && x(Tt, {
 				className: "gesture-tip",
-				anchor: { range: (Ce = Se, "move" === Ce.kind ? Ce.to : "fill" === Ce.kind ? Ce.destination : Ce.range) },
+				anchor: { range: (Me = Ie, "move" === Me.kind ? Me.to : "fill" === Me.kind ? Me.destination : Me.range) },
 				placement: V ?? ko,
 				offset: 8,
 				whenOff: "clamp",
 				open: !0,
 				style: { pointerEvents: "none" },
-				children: Ee
+				children: Ce
 			})
 		]
 	});
-	var Ce;
+	var Me;
 });
 Do.displayName = "SelectionLayer";
 var To = (e, t, n, o = !1, r = "range") => v(w, { children: [
@@ -4723,87 +4723,93 @@ function Yo(e) {
 	const { editable: t, renderEditor: n, alignment: o = "left", background: r = "var(--sxl-color-base-100, rgb(255, 255, 255))", borderColor: l = "var(--sxl-color-primary, rgb(33, 115, 70))", borderWidth: i = 2, zIndex: s, className: a, style: d, ...u } = e, g = Qe(), h = $(t, (e) => e.getSession()), f = B(h, (e) => e.getState()), [m, w] = p(null), v = z((e) => {
 		w((t) => t && t.width === e.width && t.height === e.height ? t : e);
 	}, []), y = z((e) => {
-		if (t.getSession()) return;
-		const n = t.getAnchor().getCoords();
-		if (!n) return;
-		const o = Vo(e.nativeEvent);
-		o && ("Process" !== e.nativeEvent.key && 229 !== e.nativeEvent.keyCode && e.preventDefault(), e.stopPropagation(), t.startEdit(n, o));
-	}, [t]), b = z((e) => {
-		if (t.getSession()) return;
-		const n = g?.getCellFromPointer(e.clientX, e.clientY) ?? t.getAnchor().getCoords();
-		n && t.startEdit(n, { mode: "edit" });
-	}, [g, t]), S = z((e) => {
 		const n = t.commit(e);
 		return n && g?.focus(), n;
-	}, [t, g]), E = z(() => {
+	}, [t, g]), b = z(() => {
 		t.cancel(), g?.focus();
 	}, [t, g]);
 	c(() => {
 		f && g && g.scrollCellCoordsIntoView(f.coords);
 	}, [f?.token]);
-	const I = f ? f.coords : t.getAnchor().getCoords();
-	let C = null, R = !1, M = !1;
-	if (g && I) {
-		const e = g.getRangeFromCell(I);
-		if (M = null !== g.toClipBounds(g.getBoundsFromRange({
+	const S = f ? f.coords : t.getAnchor().getCoords();
+	let E = null, I = !1, C = !1;
+	if (g && S) {
+		const e = g.getRangeFromCell(S);
+		if (C = null !== g.toClipBounds(g.getBoundsFromRange({
 			rowStart: e.rowStart,
 			colStart: e.colStart,
 			rowEnd: e.rowStart,
 			colEnd: e.colStart
 		})), f) {
-			const e = Uo(g, I, m, o, i);
-			C = e?.bounds ?? null, R = e?.inView ?? !1;
-		} else C = g.getBoundsFromRange(e);
+			const e = Uo(g, S, m, o, i);
+			E = e?.bounds ?? null, I = e?.inView ?? !1;
+		} else E = g.getBoundsFromRange(e);
 	}
-	let P = null;
-	if (g && I) {
-		const e = g.getBoundsFromRange(g.getRangeFromCell(I)), t = g.getZoom() || 1;
-		e && (P = {
+	let R = null;
+	if (g && S) {
+		const e = g.getBoundsFromRange(g.getRangeFromCell(S)), t = g.getZoom() || 1;
+		e && (R = {
 			width: e.width / t,
 			height: e.height / t
 		});
 	}
-	const k = !!f && !!C && R, D = {
+	const M = !!f && !!E && I, P = {
 		open: !!f,
 		mode: f?.mode ?? "enter",
 		coords: f?.coords ?? null,
 		clean: f?.clean ?? null,
 		dirty: f?.dirty,
 		token: f?.token ?? 0,
-		autoFocus: (f?.autoFocus ?? !0) && k && M,
+		autoFocus: (f?.autoFocus ?? !0) && M && C,
 		initialSelection: f?.initialSelection,
 		zoom: g?.getZoom() ?? 1,
-		cellSize: P,
+		cellSize: R,
 		onDirtyChange: (e) => h?.setDirty(e),
 		onModeChange: (e) => h?.setMode(e),
-		onCommit: S,
-		onCancel: E,
+		onCommit: y,
+		onCancel: b,
 		onNaturalSize: v
-	}, T = "function" == typeof r ? (I ? r(I) : void 0) ?? "transparent" : r;
+	}, k = "function" == typeof r ? (S ? r(S) : void 0) ?? "transparent" : r;
+	return x(nt, { children: E ? x(st, {
+		...u,
+		className: H(a, "editor"),
+		bounds: E,
+		alignWidth: i,
+		keepMounted: !0,
+		style: {
+			...d,
+			display: "flex",
+			overflow: "hidden",
+			background: k,
+			borderColor: l,
+			boxShadow: M ? "rgba(60,64,67,.35) 2px 2px 6px 3px" : "none",
+			opacity: M ? 1 : 0,
+			pointerEvents: M ? "auto" : "none"
+		},
+		children: n ? n(P) : x(Xo, { ...P })
+	}) : null });
+}
+function qo(e) {
+	const { editable: t } = e, n = Qe();
 	return x(nt, {
-		onKeyDown: y,
-		onDoubleClick: b,
-		children: C ? x(st, {
-			...u,
-			className: H(a, "editor"),
-			bounds: C,
-			alignWidth: i,
-			keepMounted: !0,
-			style: {
-				...d,
-				display: "flex",
-				overflow: "hidden",
-				background: T,
-				borderColor: l,
-				boxShadow: k ? "rgba(60,64,67,.35) 2px 2px 6px 3px" : "none",
-				opacity: k ? 1 : 0,
-				pointerEvents: k ? "auto" : "none"
-			},
-			children: n ? n(D) : x(Xo, { ...D })
-		}) : null
+		className: "editor-start",
+		onKeyDown: z((e) => {
+			if (t.getSession()) return;
+			const o = n?.getElement();
+			if (o && e.target !== o) return;
+			const r = t.getAnchor().getCoords();
+			if (!r) return;
+			const l = Vo(e.nativeEvent);
+			l && ("Process" !== e.nativeEvent.key && 229 !== e.nativeEvent.keyCode && e.preventDefault(), e.stopPropagation(), t.startEdit(r, l));
+		}, [t, n]),
+		onDoubleClick: z((e) => {
+			if (t.getSession()) return;
+			const o = n?.getCellFromPointer(e.clientX, e.clientY) ?? t.getAnchor().getCoords();
+			o && t.startEdit(o, { mode: "edit" });
+		}, [n, t])
 	});
 }
-function qo(e) {
+function Zo(e) {
 	const { editable: t, renderEditor: n, idleClean: o = null, mapClean: r, editorId: l, readOnly: i, className: s, style: a } = e, c = $(t, (e) => e.getSession()), d = B(c, (e) => e.getState()), u = d?.clean ?? o, g = r ? r(u) : u, h = z((e) => t.commit(e), [t]), f = z(() => t.cancel(), [t]), p = z(() => {
 		i || (t.getSession() || t.startEdit(t.getAnchor().getCoords(), {
 			mode: "edit",
@@ -4836,8 +4842,8 @@ function qo(e) {
 		children: n ? n(m) : x(Xo, { ...m })
 	});
 }
-Xo.displayName = "DefaultEditorInput", qo.displayName = "EditorDiv";
-var Zo = "ew-resize", Jo = "ns-resize", Qo = i(r((e, t) => {
+Xo.displayName = "DefaultEditorInput", Zo.displayName = "EditorDiv";
+var Jo = "ew-resize", Qo = "ns-resize", er = i(r((e, t) => {
 	const { axis: n, index: o, className: r, style: l, disabled: i = !1, disabledResize: s = !1, isNextHidden: a, isHidden: c, isSelected: d, isSelectedAll: u, showTouchDivider: g, bounds: h, onPointerDown: f, onAutoFit: p, ...m } = e, w = Je(), y = n === X.Column, b = 1 / E.getDevicePixelRatio(), S = d || u, I = S ? "color-mix(in srgb, var(--sxl-color-primary, rgb(33, 115, 70)) 35%, var(--sxl-color-base-300, rgb(171, 171, 171)))" : "var(--sxl-color-base-300, rgb(171, 171, 171))", C = "var(--sxl-color-base-100, #f5f5f5)", R = "touch" === E.detectIt().primaryInput;
 	let M = y ? 14 : 8;
 	const P = w.getZoom();
@@ -4858,7 +4864,7 @@ var Zo = "ew-resize", Jo = "ns-resize", Qo = i(r((e, t) => {
 			position: "absolute",
 			overflow: "visible",
 			pointerEvents: "auto",
-			cursor: i || s || R ? void 0 : y ? Zo : Jo,
+			cursor: i || s || R ? void 0 : y ? Jo : Qo,
 			...l
 		},
 		...m,
@@ -4902,8 +4908,8 @@ var Zo = "ew-resize", Jo = "ns-resize", Qo = i(r((e, t) => {
 			} })
 		}) : null]
 	});
-})), er = (e) => x(Qo, { ...e }), tr = i(r((e, t) => {
-	const { axis: n, index: o, disabled: r = !1, disabledResize: l = !1, resizeThreshold: i = 1, renderDivider: s = er, onDividerMouseDown: a, onDividerResizeStart: c, onDividerResize: d, onDividerResizeEnd: u, onDividerMouseUp: g, onDividerAutoFit: h, onPointerDown: m, ...y } = e, b = Je(), S = z(m, [m]), I = z(h, [h]), C = n === X.Column;
+})), tr = (e) => x(er, { ...e }), nr = i(r((e, t) => {
+	const { axis: n, index: o, disabled: r = !1, disabledResize: l = !1, resizeThreshold: i = 1, renderDivider: s = tr, onDividerMouseDown: a, onDividerResizeStart: c, onDividerResize: d, onDividerResizeEnd: u, onDividerMouseUp: g, onDividerAutoFit: h, onPointerDown: m, ...y } = e, b = Je(), S = z(m, [m]), I = z(h, [h]), C = n === X.Column;
 	let R = C ? b.getVisibleColumns() : b.getVisibleRows(), M = null;
 	R.length > 0 && (M = C ? b.getBoundsFromRange({
 		rowStart: 0,
@@ -4969,7 +4975,7 @@ var Zo = "ew-resize", Jo = "ns-resize", Qo = i(r((e, t) => {
 	let U = null;
 	return k && k.isResizing && k.index === o && (U = q(x("div", { style: {
 		position: "absolute",
-		cursor: C ? Zo : Jo,
+		cursor: C ? Jo : Qo,
 		left: 0,
 		top: 0,
 		width: "100%",
@@ -4989,26 +4995,26 @@ var Zo = "ew-resize", Jo = "ns-resize", Qo = i(r((e, t) => {
 		children: W
 	})] });
 }));
-tr.displayName = "HeaderDividerAnchor";
-var nr = (e, t, n) => t === X.Column ? {
+nr.displayName = "HeaderDividerAnchor";
+var or = (e, t, n) => t === X.Column ? {
 	rowIndex: n.rowStart,
 	colIndex: e.colIndex
 } : {
 	rowIndex: e.rowIndex,
 	colIndex: n.colStart
-}, or = (e, t, n) => t === X.Column ? {
+}, rr = (e, t, n) => t === X.Column ? {
 	rowIndex: n.rowEnd,
 	colIndex: e.colIndex
 } : {
 	rowIndex: e.rowIndex,
 	colIndex: n.colEnd
-}, rr = (e, t, n) => t === X.Column ? {
+}, lr = (e, t, n) => t === X.Column ? {
 	rowIndex: n.rowStart,
 	colIndex: e.colIndex
 } : {
 	rowIndex: e.rowIndex,
 	colIndex: n.colStart
-}, lr = (e, t, n, o) => n === X.Column ? {
+}, ir = (e, t, n, o) => n === X.Column ? {
 	rowStart: o.rowStart,
 	rowEnd: o.rowEnd,
 	colStart: Math.min(e.colIndex, t.colIndex),
@@ -5018,7 +5024,7 @@ var nr = (e, t, n) => t === X.Column ? {
 	colEnd: o.colEnd,
 	rowStart: Math.min(e.rowIndex, t.rowIndex),
 	rowEnd: Math.max(e.rowIndex, t.rowIndex)
-}, ir = (e, t, n) => {
+}, sr = (e, t, n) => {
 	let o = null, r = null, l = 0;
 	const i = () => t.getAllPanes()[_.Center] ?? t, s = (t, n, o) => {
 		if (!e) return;
@@ -5061,7 +5067,7 @@ var nr = (e, t, n) => t === X.Column ? {
 		let s = null;
 		return t === X.Column ? e.x >= r.right - 24 && l.colEnd < o.colEnd ? s = { colIndex: l.colEnd + 1 } : e.x <= r.left + 24 && l.colStart > o.colStart && (s = { colIndex: l.colStart - 1 }) : e.y >= r.bottom - 24 && l.rowEnd < o.rowEnd ? s = { rowIndex: l.rowEnd + 1 } : e.y <= r.top + 24 && l.rowStart > o.rowStart && (s = { rowIndex: l.rowStart - 1 }), !!s && (c(s), !0);
 	}, u = (e) => {
-		const { axis: t, entireRange: c, replaceActive: d = !1 } = n(), u = lr(o ?? e, e, t, c), g = r ?? rr(e, t, i().getVisibleRange());
+		const { axis: t, entireRange: c, replaceActive: d = !1 } = n(), u = ir(o ?? e, e, t, c), g = r ?? lr(e, t, i().getVisibleRange());
 		d ? a(l, u, g) : s(u, g, "replace");
 	};
 	return gn(t, (t, g) => {
@@ -5071,11 +5077,11 @@ var nr = (e, t, n) => t === X.Column ? {
 		const { axis: p, entireRange: m, allowMulti: w = !0, replaceActive: x = !1, preserveFocus: v = !1, onPointerDownInterceptor: y, onDragStart: b, onDragEnd: S, onPointerUp: E } = n();
 		if (!1 === y?.(g, t)) return null;
 		x && g.stopPropagation(), v && h && g.preventDefault(), b?.();
-		const I = rr(t, p, i().getVisibleRange()), C = g.shiftKey, R = (g.ctrlKey || g.metaKey) && w;
+		const I = lr(t, p, i().getVisibleRange()), C = g.shiftKey, R = (g.ctrlKey || g.metaKey) && w;
 		if (x) {
 			const n = e.getSelection(), i = n.ranges ?? [], s = n.rangeIndex ?? -1;
-			C && o ? (l = s >= 0 ? s : Math.max(0, i.length - 1), a(l, lr(o, t, p, m), r ?? I)) : (o = t, r = I, l = R || s < 0 ? i.length : s, a(l, lr(t, t, p, m), I));
-		} else C && o ? s(lr(o, t, p, m), r ?? I, "replace") : R ? (o = t, r = I, s(lr(t, t, p, m), I, "append")) : (o = t, r = I, s(lr(t, t, p, m), I, "clear"));
+			C && o ? (l = s >= 0 ? s : Math.max(0, i.length - 1), a(l, ir(o, t, p, m), r ?? I)) : (o = t, r = I, l = R || s < 0 ? i.length : s, a(l, ir(t, t, p, m), I));
+		} else C && o ? s(ir(o, t, p, m), r ?? I, "replace") : R ? (o = t, r = I, s(ir(t, t, p, m), I, "append")) : (o = t, r = I, s(ir(t, t, p, m), I, "clear"));
 		return ((e) => {
 			c(n().axis === X.Column ? { colIndex: e.colIndex } : { rowIndex: e.rowIndex });
 		})(t), {
@@ -5091,16 +5097,16 @@ var nr = (e, t, n) => t === X.Column ? {
 			captureEvents: x
 		};
 	});
-}, sr = (e, t) => {
+}, ar = (e, t) => {
 	const n = Je(), o = f(t);
 	o.current = t;
-	const r = g(() => ir(e, n, () => o.current), [e, n]);
+	const r = g(() => sr(e, n, () => o.current), [e, n]);
 	return c(() => () => r.dispose(), [r]), {
 		onPointerDown: r.onPointerDown,
 		onPointerMove: r.onPointerMove,
 		onPointerUp: r.onPointerUp
 	};
-}, ar = (e) => null == e ? [] : Array.isArray(e) ? e : [e], cr = i(r((e, t) => {
+}, cr = (e) => null == e ? [] : Array.isArray(e) ? e : [e], dr = i(r((e, t) => {
 	const { rowCount: n = 1, columnCount: o = 1, getRowHeight: r, getColumnWidth: l, metrics: i, renderCells: a, renderBorders: c, showGridLines: d = !0, gridLineColor: u, propsGridLineRows: f, propsGridLineColumns: p, getVisibleCells: m, hiddenCellAt: w, renderBelow: v, children: y, ...b } = e, S = le({
 		rowCount: n,
 		columnCount: o,
@@ -5117,12 +5123,12 @@ var nr = (e, t, n) => t === X.Column ? {
 			propsColumns: p,
 			getVisibleCells: m,
 			hiddenCellAt: w
-		}, "__gridlines")), e.push(...ar(v)), e.push(...ar(c)), a && e.push(x(jn, {
+		}, "__gridlines")), e.push(...cr(v)), e.push(...cr(c)), a && e.push(x(jn, {
 			renderCell: a,
 			getVisibleCells: m,
 			hiddenCellAt: w,
 			cacheToken: R
-		}, "__cells")), e.push(...ar(y)), e;
+		}, "__cells")), e.push(...cr(y)), e;
 	}, [
 		d,
 		u,
@@ -5145,16 +5151,16 @@ var nr = (e, t, n) => t === X.Column ? {
 		children: k
 	});
 }));
-cr.displayName = "Grid";
-var dr, ur = {
+dr.displayName = "Grid";
+var ur, gr = {
 	fill: { fill: "color-mix(in srgb, var(--sxl-color-primary, rgb(0, 120, 215)) 14%, transparent)" },
 	border: null,
 	inner: null
-}, gr = {
+}, hr = {
 	stroke: "var(--sxl-color-primary, rgb(0, 120, 215))",
 	alignWidth: 1,
 	inset: 1
-}, hr = r(function(e, t) {
+}, fr = r(function(e, t) {
 	const { itemCount: n, renderCell: o, getVisibleCells: r, itemHeight: l = 24, contentWidth: i, selection: s, propsLayer: a, autoFocus: d, showScrollbar: u = "auto", scrollTo: h, viewport: p, cacheToken: m, className: w, style: y, children: b, ...S } = e, E = g(() => new P(), []), I = p ?? E, R = $(I, (e) => e.getMetrics()), M = "auto" === u ? R.totalHeight > R.height : u, k = f(null);
 	c(() => {
 		d && k.current?.focus();
@@ -5224,9 +5230,9 @@ var dr, ur = {
 						x(Do, {
 							selection: T,
 							anchorHole: !1,
-							singleStyle: ur,
-							singleAnchorStyle: gr,
-							multiAnchorStyle: gr
+							singleStyle: gr,
+							singleAnchorStyle: hr,
+							multiAnchorStyle: hr
 						}, "__selection"),
 						x(jn, {
 							renderCell: o,
@@ -5239,7 +5245,7 @@ var dr, ur = {
 			})
 		})
 	});
-}), fr = r(function(e, t) {
+}), pr = r(function(e, t) {
 	const { itemCount: n, renderItem: o, itemHeight: r, selection: l, onKeyDown: i, cacheToken: a, scrollTo: c, autoFocus: d, viewport: u, className: h, style: f, children: p, ...m } = e, w = N(t, () => ({ isList: () => !0 }), []), v = s((e) => {
 		const { key: t, style: n, range: r, cell: l } = e, i = r?.rowStart ?? l.rowIndex;
 		return x("div", {
@@ -5259,7 +5265,7 @@ var dr, ur = {
 			children: o(i)
 		}, t);
 	}, [o]), y = g(() => i ? { onKeyDown: i } : void 0, [i]);
-	return x(hr, {
+	return x(fr, {
 		ref: w,
 		className: H("list", h),
 		style: f,
@@ -5274,7 +5280,7 @@ var dr, ur = {
 		viewport: u,
 		...m
 	});
-}), pr = (e, t) => x("input", {
+}), mr = (e, t) => x("input", {
 	type: "checkbox",
 	checked: e,
 	ref: (e) => {
@@ -5283,8 +5289,8 @@ var dr, ur = {
 	readOnly: !0,
 	tabIndex: -1,
 	style: { margin: 0 }
-}), mr = r(function(e, t) {
-	const { itemCount: n, isChecked: o, onCheckedChange: r, renderValue: l, renderCheckbox: i = pr, renderDivider: a, selectAllLabel: c, itemHeight: d, selection: u, cacheToken: p, autoFocus: m, viewport: y, className: b, style: S, children: E, ...I } = e, C = g(() => new ro({ getBounds: () => ({
+}), wr = r(function(e, t) {
+	const { itemCount: n, isChecked: o, onCheckedChange: r, renderValue: l, renderCheckbox: i = mr, renderDivider: a, selectAllLabel: c, itemHeight: d, selection: u, cacheToken: p, autoFocus: m, viewport: y, className: b, style: S, children: E, ...I } = e, C = g(() => new ro({ getBounds: () => ({
 		rowStart: 0,
 		colStart: 0,
 		rowEnd: Math.max(0, n - 1),
@@ -5396,7 +5402,7 @@ var dr, ur = {
 				},
 				children: i(B, F)
 			}), c]
-		}), a?.()] }), x(fr, {
+		}), a?.()] }), x(pr, {
 			itemCount: n,
 			itemHeight: d,
 			selection: R,
@@ -5412,21 +5418,21 @@ var dr, ur = {
 			}
 		})]
 	});
-}), wr = (e, t) => {
+}), xr = (e, t) => {
 	const n = (() => {
-		if (void 0 !== dr) return dr;
+		if (void 0 !== ur) return ur;
 		try {
-			dr = ("undefined" != typeof document ? document.createElement("canvas").getContext("2d") : null) ?? null;
+			ur = ("undefined" != typeof document ? document.createElement("canvas").getContext("2d") : null) ?? null;
 		} catch {
-			dr = null;
+			ur = null;
 		}
-		return dr;
+		return ur;
 	})();
 	if (n) return n.font = t, n.measureText(e).width;
 	const o = Number.parseFloat((/(\d+(?:\.\d+)?)px/.exec(t) ?? [])[1] ?? "16") || 16;
 	return e.length * o * .55;
-}, xr = (e, t) => t <= 0 ? -1 : Math.min(Math.max(0, e), t - 1), vr = r(function(e, t) {
-	const { items: n, onChoose: o, highlightIndex: r, itemHeight: l = 24, visibleRows: i = 8, contentWidth: a, measureText: c, renderItem: d, autoFocus: u, viewport: p, className: m, style: w, children: v, ...y } = e, S = n.length, E = xr(r ?? 0, S), I = g(() => new ro({
+}, vr = (e, t) => t <= 0 ? -1 : Math.min(Math.max(0, e), t - 1), yr = r(function(e, t) {
+	const { items: n, onChoose: o, highlightIndex: r, itemHeight: l = 24, visibleRows: i = 8, contentWidth: a, measureText: c, renderItem: d, autoFocus: u, viewport: p, className: m, style: w, children: v, ...y } = e, S = n.length, E = vr(r ?? 0, S), I = g(() => new ro({
 		initial: { cell: {
 			rowIndex: Math.max(0, E),
 			colIndex: 0
@@ -5447,7 +5453,7 @@ var dr, ur = {
 		S
 	]), D = z(() => 0 === S ? -1 : I.getSelection().cell.rowIndex, [I, S]), T = z((e) => {
 		if (0 === S) return;
-		const t = xr(I.getSelection().cell.rowIndex + e, S);
+		const t = vr(I.getSelection().cell.rowIndex + e, S);
 		I.setSelection({ cell: {
 			rowIndex: t,
 			colIndex: 0
@@ -5467,7 +5473,7 @@ var dr, ur = {
 			const t = e?.fontSize, n = e?.fontFamily, o = "number" == typeof t ? `${t}px` : t ?? "16px", r = [];
 			return e?.fontStyle && "normal" !== e.fontStyle && r.push(String(e.fontStyle)), e?.fontWeight && "normal" !== e.fontWeight && r.push(String(e.fontWeight)), r.push(o, n ? String(n) : "sans-serif"), r.join(" ");
 		})(w);
-		return (t) => wr(t, e);
+		return (t) => xr(t, e);
 	}, [c, w]), L = g(() => {
 		if (null != a) return a;
 		let e = 0;
@@ -5511,7 +5517,7 @@ var dr, ur = {
 			e.which !== b.Enter && e.which !== b.Space || (e.preventDefault(), e.stopPropagation(), k(D()));
 		}
 	}), [k, D]);
-	return x(hr, {
+	return x(fr, {
 		ref: $,
 		className: H("pick-list", m),
 		role: "listbox",
@@ -5531,10 +5537,10 @@ var dr, ur = {
 		cacheToken: n,
 		...y
 	});
-}), yr = "_search_b1nag_5", br = (e, t) => {
+}), br = "_search_b1nag_5", Sr = (e, t) => {
 	const n = t.trim().toLowerCase();
 	return n ? e.filter((e) => e.text.toLowerCase().includes(n)) : e;
-}, Sr = r(function(e, t) {
+}, Er = r(function(e, t) {
 	const { value: n, onChange: o, onClose: r, onKeyDown: l, className: i, ...a } = e, c = s((e) => {
 		if (e.which === b.Escape) return e.preventDefault(), e.stopPropagation(), void (n ? o("") : r?.());
 		l?.(e);
@@ -5550,19 +5556,19 @@ var dr, ur = {
 		role: "searchbox",
 		autoComplete: "off",
 		spellCheck: !1,
-		className: H(yr, "list-search", i),
+		className: H(br, "list-search", i),
 		value: n,
 		onChange: (e) => o(e.target.value),
 		onKeyDown: c,
 		...a
 	});
-}), Er = {
+}), Ir = {
 	light: {},
 	dark: {
 		"color-base-100": "#1e1e1e",
 		"color-base-300": "#3a3a3a"
 	}
-}, Ir = {
+}, Cr = {
 	light: {
 		"color-base-100": "#f2f2f2",
 		"color-base-hover": "#ececec",
@@ -5573,7 +5579,7 @@ var dr, ur = {
 		"color-base-hover": "#2e2e2e",
 		"color-base-300": "#4a4a4a"
 	}
-}, Cr = (e, ...t) => T(e, Er[e], ...t), Rr = (e, ...t) => T(e, Ir[e], ...t), Mr = ({ app: e, grid: t = Er, header: n = Ir, layer: o = "sxl-defaults", scope: r } = {}) => {
+}, Rr = (e, ...t) => T(e, Ir[e], ...t), Mr = (e, ...t) => T(e, Cr[e], ...t), Pr = ({ app: e, grid: t = Ir, header: n = Cr, layer: o = "sxl-defaults", scope: r } = {}) => {
 	const l = e ?? D, i = Object.fromEntries(Object.keys(n).map((e) => [e, {
 		"color-base-100": l[e]?.["color-base-200"],
 		...n[e]
@@ -5588,4 +5594,4 @@ var dr, ur = {
 		scope: r
 	});
 };
-export { rn as AUTO_SCROLL_INTERVAL_MS, jn as CellLayer, Un as CellTileDiv, mr as CheckboxList, po as DEFAULT_ANCHOR_STYLE, en as DEFAULT_HANDLE_STYLE, wo as DEFAULT_INSERT_BAR_STYLE, xo as DEFAULT_MOVE_SOURCE_STYLE, fo as DEFAULT_MULTI_STYLE, mo as DEFAULT_REMOVE_PREVIEW_STYLE, ho as DEFAULT_SINGLE_STYLE, Ln as DefaultCellRenderer, Wo as DefaultEditable, Xo as DefaultEditorInput, Qo as DefaultHeaderDivider, ro as DefaultSelection, wn as DragHandle, Rn as Draggable, ln as EDGE_AUTO_SCROLL_MARGIN_PX, Ao as EditSession, qo as EditorDiv, Yo as EditorLayer, On as FillHandle, Er as GRID_SURFACE, cr as Grid, Ot as GridFloatPanel, He as GridSurface, to as GridlineLayer, Ir as HEADER_SURFACE, tr as HeaderDividerAnchor, Ut as HoverTipLayer, nt as Layer, ae as LineSVG, fr as List, Sr as ListSearch, hr as ListSurface, an as NO_DRAG_MODIFIERS, zo as PICKER_COLORS, vr as PickList, Pn as RESIZE_ANCHORS_4, kn as RESIZE_ANCHORS_8, Wt as RangeFloatLayer, nn as RangeInsertBar, Qt as RangePrompt, tn as RangeRect, Dn as RangeResizer, Bo as RangesPickerLayer, ce as RectangleSVG, oo as SELECTION_CLIP_INSETS, Do as SelectionLayer, yo as SelectionTouchGrips, ie as ShapeBoundsContext, Ct as StickyAnchor, Tt as StickyFloat, Fe as SurfaceStateContext, Ae as SurfaceStateProvider, st as VirtualDiv, Mr as buildGridThemeCSS, Ko as commitArgsFromKey, re as createAxis, gn as createDragCells, ir as createHeaderSelectionPointer, Be as createSurfaceStateStore, hn as createWindowDragCells, No as defaultRangeStyle, sn as edgeScrollPane, Uo as expandEditorBounds, br as filterByText, Cr as gridThemeVars, rr as headerAnchorCell, or as headerEntireEnd, nr as headerEntireStart, lr as headerRange, Rr as headerThemeVars, En as insertAt, Cn as insertRange, dn as isSameDragModifiers, cn as readDragModifiers, Nt as renderGridFloatPanel, $n as resolveFillDestination, Vo as startEventFromKey, mn as useDoubleClick, fn as useDragCells, _o as useEditorKeymap, Pt as useGridFloatTheme, le as useGridMetrics, Je as useGridPane, Qe as useGridPaneOptional, sr as useHeaderSelectionPointer, Ft as useHoverIntent, tt as useLayer, Ho as usePendingCaret, At as useRangeHover, vo as useSelectionPointer, se as useShapeBounds, Et as useSticky, It as useStickyOptional, et as useSurfaceState, pn as useWindowDragCells, zn as vacatedByFill };
+export { rn as AUTO_SCROLL_INTERVAL_MS, jn as CellLayer, Un as CellTileDiv, wr as CheckboxList, po as DEFAULT_ANCHOR_STYLE, en as DEFAULT_HANDLE_STYLE, wo as DEFAULT_INSERT_BAR_STYLE, xo as DEFAULT_MOVE_SOURCE_STYLE, fo as DEFAULT_MULTI_STYLE, mo as DEFAULT_REMOVE_PREVIEW_STYLE, ho as DEFAULT_SINGLE_STYLE, Ln as DefaultCellRenderer, Wo as DefaultEditable, Xo as DefaultEditorInput, er as DefaultHeaderDivider, ro as DefaultSelection, wn as DragHandle, Rn as Draggable, ln as EDGE_AUTO_SCROLL_MARGIN_PX, Ao as EditSession, Zo as EditorDiv, Yo as EditorLayer, qo as EditorStartLayer, On as FillHandle, Ir as GRID_SURFACE, dr as Grid, Ot as GridFloatPanel, He as GridSurface, to as GridlineLayer, Cr as HEADER_SURFACE, nr as HeaderDividerAnchor, Ut as HoverTipLayer, nt as Layer, ae as LineSVG, pr as List, Er as ListSearch, fr as ListSurface, an as NO_DRAG_MODIFIERS, zo as PICKER_COLORS, yr as PickList, Pn as RESIZE_ANCHORS_4, kn as RESIZE_ANCHORS_8, Wt as RangeFloatLayer, nn as RangeInsertBar, Qt as RangePrompt, tn as RangeRect, Dn as RangeResizer, Bo as RangesPickerLayer, ce as RectangleSVG, oo as SELECTION_CLIP_INSETS, Do as SelectionLayer, yo as SelectionTouchGrips, ie as ShapeBoundsContext, Ct as StickyAnchor, Tt as StickyFloat, Fe as SurfaceStateContext, Ae as SurfaceStateProvider, st as VirtualDiv, Pr as buildGridThemeCSS, Ko as commitArgsFromKey, re as createAxis, gn as createDragCells, sr as createHeaderSelectionPointer, Be as createSurfaceStateStore, hn as createWindowDragCells, No as defaultRangeStyle, sn as edgeScrollPane, Uo as expandEditorBounds, Sr as filterByText, Rr as gridThemeVars, lr as headerAnchorCell, rr as headerEntireEnd, or as headerEntireStart, ir as headerRange, Mr as headerThemeVars, En as insertAt, Cn as insertRange, dn as isSameDragModifiers, cn as readDragModifiers, Nt as renderGridFloatPanel, $n as resolveFillDestination, Vo as startEventFromKey, mn as useDoubleClick, fn as useDragCells, _o as useEditorKeymap, Pt as useGridFloatTheme, le as useGridMetrics, Je as useGridPane, Qe as useGridPaneOptional, ar as useHeaderSelectionPointer, Ft as useHoverIntent, tt as useLayer, Ho as usePendingCaret, At as useRangeHover, vo as useSelectionPointer, se as useShapeBounds, Et as useSticky, It as useStickyOptional, et as useSurfaceState, pn as useWindowDragCells, zn as vacatedByFill };