@sheetxl/studio-vanilla 0.8.0-beta.1 → 0.8.0-beta.10

package/cdn/assets/0vqRTRN0wEzWao1c.js

@@ -0,0 +1,522 @@
+/**
+* @license @sheetxl/studio-vanilla - SheetXL Studio - Vanilla entry point for integrating SheetXL UI. - v0.8.0-beta.10
+*
+* (C) 2026-present SheetXL Inc. & Michael T. Ford
+* License: The license can be found at https://www.sheetxl.com/license.
+*/
+import { t as e } from "./CIyaijfp6itgRpFM.js";
+import { t } from "./BeQ95CzwR65il0CK.js";
+import { P as n, _ as r } from "./CMxbiQ5J79M3n1tk.js";
+import { r as i } from "./hg8WYI0Yy4WPPPoP.js";
+import { Q as a, b as o, d as s, mt as c, tt as l, z as u } from "./Cw7AJWd0S2sjRmr6.js";
+import { p as d, t as f } from "./mK8HcIZyXkOTvL6E.js";
+import { D as p, N as m, j as h, l as g, v as _, x as v } from "./CbTN0q6XnYGJqyEp.js";
+import { n as ee, t as y } from "./CRXSrbGNABtzf532.js";
+import { t as b } from "./CTvPIYWTcjwlJeEA.js";
+import { t as x } from "./B3NWCYKXucbHhOix.js";
+import { r as S } from "./DCnWyVXikb_8Dat3.js";
+var C = S(e(), 1), w = t(), T = /* @__PURE__ */ new Set([
+	"a",
+	"e",
+	"i",
+	"o",
+	"u",
+	"y"
+]), E = (e) => e ? e.replace(/(\p{Ll})(\p{Lu})/gu, "$1 $2").toLowerCase().split(/[^\p{L}\p{N}]+/u).filter((e) => e.length > 0) : [], D = (e, t) => {
+	let n = e.length + 1, r = t.length + 1, i = [];
+	for (let e = 0; e < n; e++) i.push(Array(r).fill(0)), i[e][0] = e;
+	for (let e = 0; e < r; e++) i[0][e] = e;
+	for (let a = 1; a < n; a++) for (let n = 1; n < r; n++) {
+		let r = e[a - 1] === t[n - 1] ? 0 : 1, o = Math.min(i[a - 1][n] + 1, i[a][n - 1] + 1, i[a - 1][n - 1] + r);
+		a > 1 && n > 1 && e[a - 1] === t[n - 2] && e[a - 2] === t[n - 1] && (o = Math.min(o, i[a - 2][n - 2] + 1)), i[a][n] = o;
+	}
+	return i[n - 1][r - 1];
+}, O = (e, t) => {
+	let n = e.length;
+	if (n < 4 || t.length < n - 1) return -1;
+	let r = e[n - 1];
+	if (!T.has(r) && !t.includes(r)) return -1;
+	let i = n >= 8 ? 2 : 1, a = -1;
+	for (let r = n - 1; r <= Math.min(n + 1, t.length); r++) {
+		let n = D(e, t.slice(0, r));
+		n <= i && (a === -1 || n < a) && (a = n);
+	}
+	return a;
+}, te = (e, t) => {
+	let n = (t) => t.some((t) => t.startsWith(e));
+	return n(t.label) ? 3 : n(t.scope) ? 2 : +!!n(t.description);
+}, ne = (e, t) => {
+	let n = (t, n) => {
+		let r = 0;
+		for (let i of t) {
+			let t = O(e, i);
+			t >= 0 && (r = Math.max(r, n / (1 + t)));
+		}
+		return r;
+	};
+	return Math.max(n(t.label, 3), n(t.scope, 2));
+}, re = (e) => e.replace(/\n\n+/g, "\n").trim(), ie = /* @__PURE__ */ new Set([
+	"Control",
+	"Shift",
+	"Alt",
+	"Meta"
+]), k = (e) => {
+	let t = e, n = /* @__PURE__ */ new Set();
+	for (let e of [
+		"mod",
+		"alt",
+		"shift"
+	]) t.startsWith(`${e}+`) && (n.add(e), t = t.slice(e.length + 1));
+	return {
+		key: t,
+		mods: n
+	};
+}, A = n.getPlatform() === n.OSType.MacOS || n.getPlatform() === n.OSType.IOS, j = [
+	a.Ctrl,
+	a.Alt,
+	a.Shift,
+	a.Meta
+], M = (e) => {
+	switch (e) {
+		case a.Ctrl: return A ? "Cmd" : "Ctrl";
+		case a.Alt: return "Alt";
+		case a.Shift: return "Shift";
+		case a.Meta: return "Meta";
+		default: return e;
+	}
+}, N = (e) => {
+	let t = new Set(e);
+	return j.filter((e) => t.has(e));
+}, P = (e) => {
+	let t = [];
+	return e.ctrlKey && t.push(a.Ctrl), e.altKey && t.push(a.Alt), e.shiftKey && t.push(a.Shift), e.metaKey && t.push(a.Meta), t;
+}, F = ({ children: e }) => (0, w.jsx)(f, {
+	component: "kbd",
+	sx: {
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		minWidth: "20px",
+		height: "20px",
+		paddingX: "5px",
+		boxSizing: "border-box",
+		fontFamily: "inherit",
+		fontSize: "0.7rem",
+		fontWeight: 600,
+		lineHeight: 1,
+		whiteSpace: "nowrap",
+		borderRadius: "5px",
+		color: (e) => e.palette.text.secondary,
+		backgroundColor: (e) => d(e.palette.background.paper, .07),
+		border: (e) => `solid 1px ${e.palette.divider}`,
+		borderBottomWidth: "2px"
+	},
+	children: e
+}), I = () => (0, w.jsx)(f, {
+	component: "span",
+	sx: {
+		fontSize: "0.7rem",
+		color: (e) => e.palette.text.disabled
+	},
+	children: "+"
+}), L = ({ labels: e, dangling: t = !1 }) => (0, w.jsxs)(f, {
+	sx: {
+		display: "flex",
+		alignItems: "center",
+		gap: "1px"
+	},
+	children: [e.map((e, t) => (0, w.jsxs)(C.Fragment, { children: [t > 0 && (0, w.jsx)(I, {}), (0, w.jsx)(F, { children: e })] }, t)), t && (0, w.jsx)(I, {})]
+}), R = ({ stroke: e }) => {
+	if (!e?.key) return null;
+	let t = N(e.modifiers ?? []).map(M);
+	return t.push(u.toPrettyKeyCode(e.key)), (0, w.jsx)(L, { labels: t });
+};
+function z(e) {
+	let { commands: t, sx: n, ...a } = e, u = l(), [g, v] = (0, C.useState)(!1), [S, T] = (0, C.useState)(""), [D, O] = (0, C.useState)(null), [j, F] = (0, C.useState)(!1), [I, z] = (0, C.useState)(null), [B, V] = (0, C.useState)(null), [H, U] = (0, C.useState)(null), W = (0, C.useRef)(null), G = (0, C.useMemo)(() => {
+		let e = t.getAllCommands();
+		g && (e = e.filter((e) => e.command.getShortcut())), e = [...e].sort((e, t) => {
+			let n = e.command.getScope?.() ?? e.groupKey, r = t.command.getScope?.() ?? t.groupKey, i = n.localeCompare(r);
+			return i === 0 ? e.command.getLabel().localeCompare(t.command.getLabel()) : i;
+		});
+		let n = [], r = /* @__PURE__ */ new Set();
+		for (let t of e) {
+			let e = t.command, i = e.getScope?.() ?? t.groupKey, a = {
+				label: e.getLabel(),
+				icon: e.getIcon(),
+				scope: i,
+				scopeLabel: e.getScopeLabel?.() ?? i,
+				description: re(e.getDescription())
+			}, o = e.getShortcut(), c = Array.isArray(o) ? o.length ? o : [null] : [o ?? null];
+			for (let e of c) {
+				let t = e ? s(e) : null, o = `${i}\0${a.label}\0${t ?? ""}`;
+				r.has(o) || (r.add(o), n.push({
+					...a,
+					id: o,
+					shortcut: e,
+					canonical: t
+				}));
+			}
+		}
+		return n;
+	}, [g, t]), K = (0, C.useMemo)(() => D ? G.filter((e) => e.scope === D) : G, [G, D]), q = (0, C.useMemo)(() => ((e) => {
+		let t = e.map((e) => ({
+			item: e,
+			label: E(e.label),
+			scope: [...E(e.scope), ...E(e.scopeLabel)],
+			description: E(e.description)
+		})), n = (e, n) => {
+			let r = [];
+			return t.forEach((t, i) => {
+				let a = 0;
+				for (let r of e) {
+					let e = te(r, t);
+					if (e === 0 && n && (e = ne(r, t)), e === 0) return;
+					a += e;
+				}
+				r.push({
+					item: t.item,
+					score: a,
+					order: i
+				});
+			}), r.sort((e, t) => t.score - e.score || e.order - t.order), r.map((e) => e.item);
+		};
+		return (t) => {
+			let r = E(t);
+			if (r.length === 0) return [...e];
+			let i = n(r, !1);
+			return i.length > 0 ? i : n(r, !0);
+		};
+	})(K), [K]), [J, Y] = (0, C.useState)(G);
+	(0, C.useEffect)(() => {
+		if (j) return B ? void Y(K.filter((e) => {
+			if (!e.canonical) return !1;
+			let t = k(e.canonical);
+			if (!B.keys.has(t.key)) return !1;
+			for (let e of B.mods) if (!t.mods.has(e)) return !1;
+			return !0;
+		})) : void Y(K);
+		r.debounce(() => {
+			Y(q(S));
+		}, 90)();
+	}, [
+		j,
+		B,
+		q,
+		S,
+		K
+	]);
+	let X = (0, C.useMemo)(() => {
+		let e = /* @__PURE__ */ new Map();
+		for (let t of J) {
+			let n = e.get(t.scope);
+			n || (n = [], e.set(t.scope, n)), n.push(t);
+		}
+		return Array.from(e, ([e, t]) => ({
+			scope: e,
+			scopeLabel: t[0].scopeLabel,
+			rows: t
+		}));
+	}, [J]), ae = (0, C.useMemo)(() => G.find((e) => e.scope === D)?.scopeLabel ?? D, [G, D]), Z = j ? !!I : S.length > 0, Q = Z && J.length === 0;
+	(0, C.useEffect)(() => {
+		W.current?.focus();
+	}, [j]);
+	let $ = (0, C.useCallback)((e) => {
+		F(e), T(""), z(null), V(null), U(null);
+	}, []), oe = (0, C.useCallback)((e) => {
+		if (e.key === "Tab") return;
+		if (e.which === c.Escape) return I || H ? (z(null), V(null), U(null)) : $(!1), e.stopPropagation(), void e.preventDefault();
+		if (e.preventDefault(), e.stopPropagation(), e.key === "Backspace") return z(null), V(null), void U(null);
+		let t = e.nativeEvent;
+		if (ie.has(e.key)) return z(null), V(null), void U(P(t));
+		U(null), z(((e) => {
+			let t = [];
+			e.ctrlKey && t.push("ctrl"), e.altKey && t.push("alt"), e.shiftKey && t.push("shift"), e.metaKey && t.push("meta");
+			let n = e.code, r = e.key;
+			return n && (r = n.startsWith("Key") && n.length > 3 ? n.slice(3) : n.startsWith("Digit") && n.length > 5 ? n.slice(5) : n), {
+				key: r,
+				modifiers: t
+			};
+		})(t)), V(((e) => {
+			let t = [...o(e)].map(k);
+			return {
+				keys: new Set(t.map((e) => e.key)),
+				mods: t[0]?.mods ?? /* @__PURE__ */ new Set()
+			};
+		})(t));
+	}, [
+		I,
+		H,
+		$
+	]), se = (0, C.useCallback)((e) => {
+		if (I) return;
+		let t = P(e.nativeEvent);
+		U(t.length ? t : null);
+	}, [I]), ce = (0, C.useCallback)((e) => {
+		O((t) => t === e ? null : e);
+	}, []), le = (0, C.useCallback)(() => {
+		j ? (z(null), V(null), U(null)) : T(""), W.current?.focus();
+	}, [j]), ue = j ? !!(I || H && H.length > 0) : S.length > 0, de = (0, w.jsx)(_, {
+		title: j ? "Search by name (ESC)" : `Search by shortcut (${A ? "Cmd" : "Ctrl"}+K)`,
+		children: (0, w.jsx)(m, {
+			"aria-label": "toggle shortcut capture",
+			color: j ? "primary" : "default",
+			onClick: () => $(!j),
+			sx: {
+				flexShrink: 0,
+				border: (e) => `solid 1px ${j ? e.palette.primary.main : e.palette.divider}`,
+				borderRadius: (e) => `${e.shape.borderRadius}px`
+			},
+			children: (0, w.jsx)(i, { iconKey: "Keyboard" })
+		})
+	});
+	return (0, w.jsxs)(f, {
+		style: {
+			height: 460,
+			width: "100%",
+			display: "flex",
+			flexDirection: "column"
+		},
+		sx: [{ fontFamily: (e) => e.typography.fontFamily }, ...Array.isArray(n) ? n : [n]],
+		...a,
+		children: [
+			(0, w.jsxs)(f, {
+				sx: {
+					display: "flex",
+					alignItems: "center",
+					gap: 1,
+					marginBottom: (e) => e.spacing(1.5)
+				},
+				children: [
+					(0, w.jsx)(b, {
+						inputRef: W,
+						slotProps: {
+							input: {
+								sx: { backgroundColor: (e) => e.palette.action.hover },
+								startAdornment: j && (I || H && H.length > 0) ? (0, w.jsx)(x, {
+									position: "start",
+									sx: { marginRight: "6px" },
+									children: I ? (0, w.jsx)(R, { stroke: I }) : (0, w.jsx)(L, {
+										labels: N(H).map(M),
+										dangling: !0
+									})
+								}) : void 0,
+								endAdornment: ue ? (0, w.jsx)(x, {
+									position: "end",
+									children: (0, w.jsx)(m, {
+										"aria-label": j ? "clear shortcut" : "clear search",
+										onClick: le,
+										edge: "end",
+										size: "small",
+										children: (0, w.jsx)(i, { iconKey: "Close" })
+									})
+								}) : void 0
+							},
+							htmlInput: {
+								className: "input",
+								autoFocus: !0,
+								spellCheck: !1,
+								placeholder: j ? I || H && H.length > 0 ? "" : "Press a shortcut… (Esc to exit)" : "Type to search commands, scopes, or descriptions",
+								autoComplete: "off",
+								"aria-label": j ? "Press a shortcut to find its command" : "Search commands",
+								sx: {
+									paddingTop: (e) => e.spacing(1),
+									paddingBottom: (e) => e.spacing(1),
+									caretColor: (e) => j ? e.palette.primary.main : void 0
+								}
+							}
+						},
+						sx: {
+							flex: "1 1 auto",
+							"& .MuiOutlinedInput-notchedOutline": { borderColor: (e) => Q ? `${e.palette.error.main} !important` : j ? `${e.palette.primary.main} !important` : void 0 }
+						},
+						value: j ? "" : S,
+						onChange: (e) => {
+							j || T(e.target.value);
+						},
+						onKeyDown: j ? oe : (e) => {
+							if ((e.ctrlKey || e.metaKey) && (e.key === "k" || e.key === "K")) return $(!0), e.stopPropagation(), void e.preventDefault();
+							e.which === c.Escape && S.length > 0 && (T(""), e.stopPropagation(), e.preventDefault());
+						},
+						onKeyUp: j ? se : void 0,
+						onContextMenu: (e) => e.stopPropagation()
+					}),
+					de,
+					(0, w.jsx)(y, {
+						sx: {
+							flexShrink: 0,
+							marginRight: 0
+						},
+						control: (0, w.jsx)(ee, {
+							checked: g,
+							onChange: () => v(!g)
+						}),
+						label: u("shortcutKeys.onlyKeyBindings"),
+						labelPlacement: "start"
+					})
+				]
+			}),
+			D && (0, w.jsx)(f, {
+				sx: {
+					display: "flex",
+					marginBottom: 1
+				},
+				children: (0, w.jsx)(p, {
+					size: "small",
+					label: u("shortcutKeys.scopeFilter", { scope: ae }),
+					onDelete: () => O(null)
+				})
+			}),
+			(0, w.jsx)(f, {
+				sx: {
+					flex: "1 1 100%",
+					minHeight: 0,
+					borderRadius: (e) => `${e.shape.borderRadius}px`,
+					border: (e) => `solid ${e.palette.divider} 1px`,
+					overflow: "visible"
+				},
+				children: (0, w.jsx)(f, {
+					sx: {
+						height: "100%",
+						overflow: "auto"
+					},
+					children: X.length === 0 ? (0, w.jsx)(f, {
+						sx: {
+							padding: 3,
+							textAlign: "center",
+							color: (e) => Q ? e.palette.error.main : e.palette.text.secondary
+						},
+						children: u(Z ? "shortcutKeys.noMatches" : "shortcutKeys.none")
+					}) : X.map((e) => (0, w.jsxs)(f, { children: [(0, w.jsxs)(f, {
+						onClick: () => ce(e.scope),
+						sx: {
+							position: "sticky",
+							top: "-1px",
+							zIndex: 2,
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "space-between",
+							gap: 1,
+							paddingX: 1.5,
+							paddingTop: "5px",
+							paddingBottom: "4px",
+							cursor: "pointer",
+							userSelect: "none",
+							fontSize: "0.7rem",
+							fontWeight: 600,
+							letterSpacing: "0.04em",
+							textTransform: "uppercase",
+							backgroundColor: (e) => d(e.palette.background.paper, .04),
+							boxShadow: (e) => `0 -2px 0 0 ${d(e.palette.background.paper, .04)}`,
+							borderBottom: (e) => `solid 1px ${e.palette.divider}`,
+							color: (t) => D === e.scope ? t.palette.primary.main : t.palette.text.secondary,
+							"&:hover": {
+								color: (e) => e.palette.text.primary,
+								backgroundColor: (e) => d(e.palette.background.paper, .09)
+							}
+						},
+						children: [(0, w.jsx)("span", { children: e.scopeLabel }), (0, w.jsx)(h, {
+							component: "span",
+							sx: {
+								fontSize: "inherit",
+								opacity: .7
+							},
+							children: e.rows.length
+						})]
+					}), e.rows.map((e) => {
+						return (0, w.jsxs)(f, {
+							sx: {
+								paddingX: 1.5,
+								paddingY: .75,
+								borderBottom: (e) => `solid 1px ${e.palette.divider}`,
+								"&:hover": { backgroundColor: (e) => e.palette.action.hover }
+							},
+							children: [(0, w.jsxs)(f, {
+								sx: {
+									display: "flex",
+									alignItems: "center",
+									gap: 1
+								},
+								children: [
+									(0, w.jsx)(f, {
+										sx: {
+											flexShrink: 0,
+											display: "flex",
+											alignItems: "center",
+											width: "var(--icon-size, 20px)",
+											height: "var(--icon-size, 20px)",
+											color: (e) => e.palette.text.icon ?? e.palette.action.active
+										},
+										children: (t = e.icon, t && typeof t != "string" ? t : (0, w.jsx)(i, { iconKey: t }))
+									}),
+									(0, w.jsx)(h, {
+										sx: {
+											flex: "1 1 auto",
+											fontWeight: 500
+										},
+										children: e.label
+									}),
+									e.shortcut && (0, w.jsx)(f, {
+										sx: { flexShrink: 0 },
+										children: (0, w.jsx)(R, { stroke: e.shortcut })
+									})
+								]
+							}), e.description && (0, w.jsx)(h, {
+								component: "div",
+								sx: {
+									marginTop: "2px",
+									marginLeft: "calc(var(--icon-size, 20px) + 8px)",
+									fontSize: "0.75rem",
+									whiteSpace: "pre-line",
+									color: (e) => e.palette.text.secondary
+								},
+								children: e.description
+							})]
+						}, e.id);
+						var t;
+					})] }, e.scope))
+				})
+			}),
+			(0, w.jsx)(f, {
+				sx: {
+					display: "flex",
+					flexShrink: 0,
+					paddingLeft: (e) => e.spacing(1),
+					paddingTop: (e) => e.spacing(1),
+					paddingRight: (e) => e.spacing(1),
+					userSelect: "none",
+					justifyContent: "flex-end"
+				},
+				children: (0, w.jsx)(h, {
+					noWrap: !0,
+					component: "div",
+					sx: { color: (e) => Q ? e.palette.error.main : e.palette.text.secondary },
+					children: u(Z ? "shortcutKeys.countFound" : "shortcutKeys.count", { count: J.length })
+				})
+			})
+		]
+	});
+}
+var B = (e) => {
+	let { title: t = "Shortcut Keys", commands: n, sx: r, ...i } = e;
+	return (0, w.jsx)(g, {
+		isModal: !0,
+		onKeyDown: (e) => {
+			e.keyCode === c.F1 && e.preventDefault();
+		},
+		sx: {
+			width: "780px",
+			...r
+		},
+		title: t,
+		autoFocusSel: ".input",
+		...i,
+		children: (0, w.jsx)(v, {
+			dividers: !0,
+			children: (0, w.jsx)(z, {
+				commands: n,
+				sx: { marginBottom: "8px" }
+			})
+		})
+	});
+};
+export { B as default };