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

package/browser/esm/{9_bymSfTn_rR_v6W.mjs → DlHJ7zkV6AMCtYPP.mjs}

@@ -1,12 +1,12 @@
 /**
-* @license @sheetxl/studio-vanilla - SheetXL Studio - Vanilla entry point for integrating SheetXL UI. - v0.8.0-beta.1
+* @license @sheetxl/studio-vanilla - SheetXL Studio - Vanilla entry point for integrating SheetXL UI. - v0.8.0-beta.3
 *
 * (C) 2026-present SheetXL Inc. & Michael T. Ford
 * License: The license can be found at https://www.sheetxl.com/license.
 */
-import { r as e } from "./D9-wpGVbTS9rRpxx.mjs";
-import { i as t, r as n } from "./BjTf3XA9Swj0ngpH.mjs";
-import { A as r } from "./CEN8dYSpN2oew8HH.mjs";
+import { r as e } from "./CVbPAnmNN3TxMkq4.mjs";
+import { i as t, r as n } from "./DRRx9F2h6V-Q957j.mjs";
+import { z as r } from "./DB_I2ygTnDxYiYyc.mjs";
 var i = e(t(), 1), a = e(n(), 1);
 function o(e) {
 	if (typeof e == "function") return e;
@@ -277,7 +277,7 @@ var d = function() {
 		}
 	};
 }();
-d.register("base", () => import("./DVZ_UnchuMRveDG32.mjs")), d.register("cf", () => import("./DQ-0yyFAwoWtxmhV2.mjs"));
+d.register("base", () => import("./Bq7qy-C7tVkiIaDE2.mjs")), d.register("cf", () => import("./C5Oex2msskTvaCQ92.mjs"));
 var f = (e) => (0, a.jsx)("svg", {
 	...e,
 	children: (0, a.jsx)("path", {})
@@ -303,7 +303,7 @@ var f = (e) => (0, a.jsx)("svg", {
 		}
 		return d.resolve(a, { packKey: i }).then((t) => {
 			e && y(t);
-		}), () => {
+		}).catch(() => {}), () => {
 			e = !1;
 		};
 	}, [t, n]);

package/browser/esm/{B1NoGosH2YQh01g7.mjs → DnLi57ylUOd3DUek.mjs}

@@ -1,14 +1,14 @@
 /**
-* @license @sheetxl/studio-vanilla - SheetXL Studio - Vanilla entry point for integrating SheetXL UI. - v0.8.0-beta.1
+* @license @sheetxl/studio-vanilla - SheetXL Studio - Vanilla entry point for integrating SheetXL UI. - v0.8.0-beta.3
 *
 * (C) 2026-present SheetXL Inc. & Michael T. Ford
 * License: The license can be found at https://www.sheetxl.com/license.
 */
-import { r as e } from "./D9-wpGVbTS9rRpxx.mjs";
-import { i as t, r as n } from "./BjTf3XA9Swj0ngpH.mjs";
-import { h as r, m as i, p as a } from "./DFdU1DsC1lXOrejZ.mjs";
-import { N as o, _t as s, ct as c, lt as l, st as u, ut as d } from "./Bl6bX86tSq8hfyb2.mjs";
-import { C as f, T as p } from "./DzDwSOBdJh_lx_NM.mjs";
+import { r as e } from "./CVbPAnmNN3TxMkq4.mjs";
+import { i as t, r as n } from "./DRRx9F2h6V-Q957j.mjs";
+import { h as r, m as i, p as a } from "./Dcpd3kkjvidrDQuN.mjs";
+import { N as o, _t as s, ct as c, lt as l, st as u, ut as d } from "./CDxmuF7Iay8T4cnU.mjs";
+import { E as f, O as p } from "./53nnk5W22gJW7Ddx.mjs";
 var m = e(t(), 1);
 function h(e) {
 	return i("MuiInputAdornment", e);

package/{cdn/assets/BVjXdv_wkL1x_8ZJ2.js → browser/esm/DoAKAH3cmECZGboo2.mjs}

@@ -1,5 +1,5 @@
 /**
-* @license @sheetxl/studio-vanilla - SheetXL Studio - Vanilla entry point for integrating SheetXL UI. - v0.8.0-beta.1
+* @license @sheetxl/studio-vanilla - SheetXL Studio - Vanilla entry point for integrating SheetXL UI. - v0.8.0-beta.3
 *
 * (C) 2026-present SheetXL Inc. & Michael T. Ford
 * License: The license can be found at https://www.sheetxl.com/license.

package/browser/esm/Dok4MRpMgkcsNzp4.mjs

@@ -0,0 +1,589 @@
+/**
+* @license @sheetxl/studio-vanilla - SheetXL Studio - Vanilla entry point for integrating SheetXL UI. - v0.8.0-beta.3
+*
+* (C) 2026-present SheetXL Inc. & Michael T. Ford
+* License: The license can be found at https://www.sheetxl.com/license.
+*/
+import { r as e } from "./CVbPAnmNN3TxMkq4.mjs";
+import { i as t, r as n } from "./DRRx9F2h6V-Q957j.mjs";
+import { t as r } from "./DB_I2ygTnDxYiYyc.mjs";
+import { r as i } from "./DlHJ7zkV6AMCtYPP.mjs";
+import { en as a, h as o, m as s, p as c, qt as l, t as u } from "./Dcpd3kkjvidrDQuN.mjs";
+import { t as d } from "./B45vVm2Ma1i2b6_F.mjs";
+import { ot as f } from "./74Ynqpv5NPbb_8vB.mjs";
+import { D as p, Dt as m, Et as h, L as g, N as _, _t as v, ct as y, et as b, lt as x, ut as S } from "./CDxmuF7Iay8T4cnU.mjs";
+import { t as C } from "./2eBMkUK0-HxaCmDY.mjs";
+import { T as w } from "./B-VKr_KwiWjDeAP5.mjs";
+import { t as T } from "./DnLi57ylUOd3DUek.mjs";
+var E = e(t(), 1);
+function D(e) {
+	return s("MuiSkeleton", e);
+}
+c("MuiSkeleton", [
+	"root",
+	"text",
+	"rectangular",
+	"rounded",
+	"circular",
+	"pulse",
+	"wave",
+	"withChildren",
+	"fitContent",
+	"heightAuto"
+]);
+var O = e(n(), 1), k = m`
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.4;
+  }
+
+  100% {
+    opacity: 1;
+  }
+`, A = m`
+  0% {
+    transform: translateX(-100%);
+  }
+
+  50% {
+    /* +0.5s of delay between each loop */
+    transform: translateX(100%);
+  }
+
+  100% {
+    transform: translateX(100%);
+  }
+`, j = typeof k == "string" ? null : h`
+        animation: ${k} 2s ease-in-out 0.5s infinite;
+      `, M = typeof A == "string" ? null : h`
+        &::after {
+          animation: ${A} 2s linear 0.5s infinite;
+        }
+      `, N = S("span", {
+	name: "MuiSkeleton",
+	slot: "Root",
+	overridesResolver: (e, t) => {
+		let { ownerState: n } = e;
+		return [
+			t.root,
+			t[n.variant],
+			!1 !== n.animation && t[n.animation],
+			n.hasChildren && t.withChildren,
+			n.hasChildren && !n.width && t.fitContent,
+			n.hasChildren && !n.height && t.heightAuto
+		];
+	}
+})(x(({ theme: e }) => {
+	let t = (n = e.shape.borderRadius, String(n).match(/[\d.\-+]*\s*(.*)/)[1] || "px");
+	var n;
+	let r = (i = e.shape.borderRadius, parseFloat(i));
+	var i;
+	let a = b(e, { animation: "none" }), o = b(e, { "&::after": {
+		animation: "none",
+		display: "none"
+	} });
+	return {
+		display: "block",
+		backgroundColor: e.vars ? e.vars.palette.Skeleton.bg : e.alpha(e.palette.text.primary, e.palette.mode === "light" ? .11 : .13),
+		height: "1.2em",
+		variants: [
+			{
+				props: { variant: "text" },
+				style: {
+					marginTop: 0,
+					marginBottom: 0,
+					height: "auto",
+					transformOrigin: "0 55%",
+					transform: "scale(1, 0.60)",
+					borderRadius: `${r}${t}/${Math.round(r / .6 * 10) / 10}${t}`,
+					"&:empty:before": { content: "\"\\00a0\"" }
+				}
+			},
+			{
+				props: { variant: "circular" },
+				style: { borderRadius: "50%" }
+			},
+			{
+				props: { variant: "rounded" },
+				style: { borderRadius: (e.vars || e).shape.borderRadius }
+			},
+			{
+				props: ({ ownerState: e }) => e.hasChildren,
+				style: { "& > *": { visibility: "hidden" } }
+			},
+			{
+				props: ({ ownerState: e }) => e.hasChildren && !e.width,
+				style: { maxWidth: "fit-content" }
+			},
+			{
+				props: ({ ownerState: e }) => e.hasChildren && !e.height,
+				style: { height: "auto" }
+			},
+			{
+				props: { animation: "pulse" },
+				style: j || { animation: `${k} 2s ease-in-out 0.5s infinite` }
+			},
+			...a ? [{
+				props: { animation: "pulse" },
+				style: a
+			}] : [],
+			{
+				props: { animation: "wave" },
+				style: {
+					position: "relative",
+					overflow: "hidden",
+					WebkitMaskImage: "-webkit-radial-gradient(white, black)",
+					"&::after": {
+						background: `linear-gradient(\n                90deg,\n                transparent,\n                ${(e.vars || e).palette.action.hover},\n                transparent\n              )`,
+						content: "\"\"",
+						position: "absolute",
+						transform: "translateX(-100%)",
+						bottom: 0,
+						left: 0,
+						right: 0,
+						top: 0
+					}
+				}
+			},
+			{
+				props: { animation: "wave" },
+				style: M || { "&::after": { animation: `${A} 2s linear 0.5s infinite` } }
+			},
+			...o ? [{
+				props: { animation: "wave" },
+				style: o
+			}] : []
+		]
+	};
+})), P = E.forwardRef(function(e, t) {
+	let n = y({
+		props: e,
+		name: "MuiSkeleton"
+	}), { animation: r = "pulse", className: i, component: a = "span", height: s, style: c, variant: l = "text", width: u, ...d } = n, f = {
+		...n,
+		animation: r,
+		component: a,
+		variant: l,
+		hasChildren: !!d.children
+	}, p = ((e) => {
+		let { classes: t, variant: n, animation: r, hasChildren: i, width: a, height: o } = e;
+		return v({ root: [
+			"root",
+			n,
+			r,
+			i && "withChildren",
+			i && !a && "fitContent",
+			i && !o && "heightAuto"
+		] }, D, t);
+	})(f);
+	return (0, O.jsx)(N, {
+		as: a,
+		ref: t,
+		className: o(p.root, i),
+		ownerState: f,
+		...d,
+		style: {
+			width: u,
+			height: s,
+			...c
+		}
+	});
+}), F = "8 / 5", I = (e) => {
+	let { entry: t } = e, n = (f() === "dark" ? t.thumbnailDarkUrl : void 0) ?? t.thumbnailUrl;
+	return (0, O.jsx)(L, { src: n }, n);
+}, L = (e) => {
+	let { src: t } = e, [n, r] = (0, E.useState)(t ? "loading" : "failed");
+	return (0, O.jsx)(u, {
+		className: "template-thumbnail",
+		sx: {
+			position: "relative",
+			width: "100%",
+			aspectRatio: F,
+			overflow: "hidden",
+			borderRadius: 1,
+			border: (e) => `1px solid ${e.palette.divider}`,
+			background: (e) => e.palette.background.paper,
+			transition: "border-color 150ms, box-shadow 150ms",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center"
+		},
+		children: n === "failed" ? (0, O.jsx)(i, {
+			iconKey: "FileNew",
+			style: {
+				fontSize: "2.5rem",
+				opacity: .4
+			}
+		}) : (0, O.jsx)("img", {
+			src: t,
+			alt: "",
+			loading: "lazy",
+			draggable: !1,
+			onLoad: () => r("loaded"),
+			onError: () => r("failed"),
+			style: {
+				width: "100%",
+				height: "100%",
+				objectFit: "cover",
+				objectPosition: "top left",
+				opacity: +(n === "loaded"),
+				transition: "opacity 150ms ease-out"
+			}
+		})
+	});
+}, R = (e) => {
+	let { entry: t, category: n, onSelect: r } = e;
+	return (0, O.jsxs)(g, {
+		className: "template-tile",
+		disableRipple: !0,
+		onClick: r,
+		"aria-label": n ? `${t.title}, ${n.title}` : t.title,
+		title: t.description,
+		sx: {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "stretch",
+			textAlign: "left",
+			gap: .75,
+			padding: 1,
+			borderRadius: 1,
+			"&:hover .template-thumbnail, &.Mui-focusVisible .template-thumbnail": {
+				borderColor: (e) => e.palette.primary.main,
+				boxShadow: 3
+			},
+			"&.Mui-focusVisible": {
+				outline: (e) => `2px solid ${e.palette.primary.main}`,
+				outlineOffset: "-2px"
+			}
+		},
+		children: [(0, O.jsx)(I, { entry: t }), (0, O.jsxs)(u, {
+			sx: { minWidth: 0 },
+			children: [(0, O.jsx)(_, {
+				variant: "subtitle2",
+				component: "div",
+				noWrap: !0,
+				children: t.title
+			}), n ? (0, O.jsx)(_, {
+				variant: "caption",
+				component: "div",
+				noWrap: !0,
+				sx: { color: "text.secondary" },
+				children: n.title
+			}) : null]
+		})]
+	});
+}, z = () => (0, O.jsxs)(u, {
+	sx: {
+		padding: 1,
+		display: "flex",
+		flexDirection: "column",
+		gap: .75
+	},
+	children: [
+		(0, O.jsx)(P, {
+			variant: "rectangular",
+			sx: {
+				width: "100%",
+				height: "auto",
+				aspectRatio: F,
+				borderRadius: 1
+			}
+		}),
+		(0, O.jsx)(P, {
+			variant: "text",
+			width: "60%"
+		}),
+		(0, O.jsx)(P, {
+			variant: "text",
+			width: "35%"
+		})
+	]
+}), B = (0, E.memo)((0, E.forwardRef)((e, t) => {
+	let { catalog: n, onSelect: r, filter: i, groupBy: o, renderTile: s, tileMinWidth: c = 180, emptyLabel: f, visibleRows: m, sx: h = l.EmptyCssProperties, style: g, className: v, onKeyDown: y, ...b } = e, x = a(), S = (0, E.useRef)(null), [C, w] = (0, E.useState)(0), T = (0, E.useRef)(null);
+	T.current = () => {
+		let e = S.current?.querySelector(".template-grid")?.firstElementChild, t = (e?.offsetHeight ? e : e?.firstElementChild)?.getBoundingClientRect().height;
+		t && w(t);
+	}, (0, E.useLayoutEffect)(() => {
+		m && T.current?.();
+	}), (0, E.useEffect)(() => {
+		let e = S.current;
+		if (!m || !e) return;
+		let t = new ResizeObserver(() => T.current?.());
+		return t.observe(e), () => t.disconnect();
+	}, [m]);
+	let D, k = (0, E.useMemo)(() => new Map(n.categories.map((e) => [e.id, e])), [n.categories]), A = (0, E.useMemo)(() => {
+		let e = i ? n.entries.filter(i) : n.entries;
+		if (!o) return [{
+			key: null,
+			entries: e
+		}];
+		let t = /* @__PURE__ */ new Map();
+		for (let e of n.categories) t.set(e.id, []);
+		for (let n of e) {
+			let e = o(n), r = t.get(e);
+			r || t.set(e, r = []), r.push(n);
+		}
+		return [...t].filter(([, e]) => e.length > 0).map(([e, t]) => ({
+			key: e,
+			title: k.get(e)?.title ?? e,
+			entries: t
+		}));
+	}, [
+		n.entries,
+		n.categories,
+		k,
+		i,
+		o
+	]), j = {
+		display: "grid",
+		gridTemplateColumns: `repeat(auto-fill, minmax(${c}px, 1fr))`,
+		gap: "8px"
+	};
+	return D = n.status === "loading" ? (0, O.jsx)(u, {
+		className: "template-grid",
+		sx: j,
+		"aria-busy": "true",
+		"aria-label": x("template.loading"),
+		children: Array.from({ length: 6 }, (e, t) => (0, O.jsx)(z, {}, t))
+	}) : n.status === "error" ? (0, O.jsxs)(u, {
+		sx: {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			gap: 1,
+			padding: 4,
+			textAlign: "center"
+		},
+		children: [(0, O.jsx)(_, {
+			variant: "body2",
+			sx: { color: "text.secondary" },
+			children: x("template.loadFailed")
+		}), (0, O.jsx)(p, {
+			variant: "outlined",
+			size: "small",
+			onClick: n.retry,
+			children: x("template.retry")
+		})]
+	}) : A.every((e) => e.entries.length === 0) ? (0, O.jsx)(_, {
+		variant: "body2",
+		sx: {
+			color: "text.secondary",
+			padding: 4,
+			textAlign: "center"
+		},
+		children: f ?? x("template.empty")
+	}) : A.map((e) => (0, O.jsxs)(u, {
+		role: "group",
+		"aria-label": e.title,
+		children: [e.title ? (0, O.jsx)(_, {
+			variant: "overline",
+			component: "div",
+			sx: {
+				color: "text.secondary",
+				paddingX: 1
+			},
+			children: e.title
+		}) : null, (0, O.jsx)(u, {
+			className: "template-grid",
+			sx: j,
+			children: e.entries.map((e) => {
+				let t = {
+					category: k.get(e.category),
+					onSelect: () => r?.(e)
+				};
+				return s ? (0, O.jsx)(u, {
+					sx: { display: "contents" },
+					children: s(e, t)
+				}, e.id) : (0, O.jsx)(R, {
+					entry: e,
+					...t
+				}, e.id);
+			})
+		})]
+	}, e.key ?? "")), (0, O.jsx)(u, {
+		ref: t,
+		className: d(v, "template-panel"),
+		sx: h,
+		style: m && C ? {
+			boxSizing: "content-box",
+			scrollbarGutter: "stable",
+			height: `${Math.ceil(m * C + 8 * (m - 1))}px`,
+			minHeight: `${Math.ceil(C)}px`,
+			...g
+		} : g,
+		...b,
+		children: (0, O.jsx)(u, {
+			ref: S,
+			onKeyDown: (e) => {
+				if (y?.(e), e.defaultPrevented) return;
+				let t = S.current;
+				if (!t) return;
+				let n = Array.from(t.querySelectorAll(".template-tile")), r = n.indexOf(document.activeElement);
+				if (r < 0) return;
+				let i = n[r].offsetTop, a = n.findIndex((e) => e.offsetTop === i && e.parentElement === n[r].parentElement), o = 0;
+				for (; n[a + o]?.offsetTop === i;) o++;
+				let s = r;
+				switch (e.key) {
+					case "ArrowRight":
+						s = r + 1;
+						break;
+					case "ArrowLeft":
+						s = r - 1;
+						break;
+					case "ArrowDown":
+						s = r + Math.max(1, o);
+						break;
+					case "ArrowUp":
+						s = r - Math.max(1, o);
+						break;
+					case "Home":
+						s = 0;
+						break;
+					case "End":
+						s = n.length - 1;
+						break;
+					default: return;
+				}
+				s = Math.max(0, Math.min(n.length - 1, s)), e.preventDefault(), n[s].focus();
+			},
+			children: D
+		})
+	});
+}));
+B.displayName = "TemplatePanel";
+var V = (e, t, n) => {
+	let r = t.trim().toLowerCase();
+	return !r || [
+		e.title,
+		e.description,
+		n?.title,
+		...e.tags ?? []
+	].some((e) => e?.toLowerCase().includes(r));
+}, H = (e) => {
+	let { value: t, onChange: n, sx: r } = e, o = a();
+	return (0, O.jsx)(C, {
+		size: "small",
+		value: t,
+		placeholder: o("template.search"),
+		onChange: (e) => n(e.target.value),
+		onKeyDown: (e) => {
+			e.key === "Escape" && t && (e.stopPropagation(), n(""));
+		},
+		sx: r,
+		slotProps: {
+			input: {
+				sx: { backgroundColor: "background.paper" },
+				startAdornment: (0, O.jsx)(T, {
+					position: "start",
+					children: (0, O.jsx)(i, { iconKey: "Find" })
+				}),
+				endAdornment: t ? (0, O.jsx)(T, {
+					position: "end",
+					children: (0, O.jsx)(w, {
+						"aria-label": o("template.clearSearch"),
+						propsTooltip: { label: o("template.clearSearch") },
+						onMouseDown: (e) => {
+							e.button === 0 && e.preventDefault();
+						},
+						onClick: () => n(""),
+						icon: (0, O.jsx)(i, { iconKey: "Close" }),
+						size: "small"
+					})
+				}) : void 0
+			},
+			htmlInput: {
+				spellCheck: !1,
+				autoComplete: "off",
+				"aria-label": o("template.search")
+			}
+		}
+	});
+}, U = "https://unpkg.com/@sheetxl/workbook-templates/dist", W = "workbook-templates", G = (e) => e.replace(/\.[^/.]+$/, "").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[-_]+/g, " ").trim().replace(/\b\w/g, (e) => e.toUpperCase()), K = (e, t) => {
+	let n = `${e}${e.endsWith("/") ? "" : "/"}${W}/${t}`;
+	return typeof document > "u" ? n : new URL(n, document.baseURI).href;
+}, q = (e) => typeof e == "string" && e ? e : void 0, J = /* @__PURE__ */ new Map(), Y = (e = U) => {
+	let t = J.get(e);
+	return t || (t = (async () => {
+		let t = (await r("templates", W, e)).find((e) => e.meta?.schema !== void 0);
+		if (!t) throw Error(`No template catalog found at '${e}'.`);
+		return Math.floor(Number(t.meta?.schema)) === 1 ? ((e, t) => {
+			let n = Array.isArray(e.meta?.categories) ? e.meta.categories : [], r = [], i = /* @__PURE__ */ new Set();
+			for (let e of n) {
+				let t = q(e?.id);
+				t && !i.has(t) && (i.add(t), r.push({
+					id: t,
+					title: q(e.title) ?? G(t),
+					description: q(e.description),
+					icon: q(e.icon)
+				}));
+			}
+			let a = [];
+			for (let n of e.entries) {
+				let e = n.path, o = e.split("/");
+				if (o.length !== 2 || !/\.(?:xlsx|sxl|csv)$/i.test(e)) continue;
+				let s = q(n.category) ?? o[0];
+				i.has(s) || (i.add(s), r.push({
+					id: s,
+					title: G(s)
+				}));
+				let c = q(n.thumbnail), l = q(n.thumbnailDark);
+				a.push({
+					id: e,
+					title: q(n.title) ?? G(o[1]),
+					category: s,
+					description: q(n.description),
+					tags: Array.isArray(n.tags) ? n.tags.filter((e) => typeof e == "string") : void 0,
+					thumbnailUrl: c ? K(t, c) : void 0,
+					thumbnailDarkUrl: l ? K(t, l) : void 0,
+					sourceUrl: K(t, e)
+				});
+			}
+			return {
+				categories: r,
+				entries: a
+			};
+		})(t, e) : (console.warn(`Template catalog at '${e}' has schema ${t.meta?.schema}; expected 1.`), {
+			categories: [],
+			entries: []
+		});
+	})(), J.set(e, t), t.catch(() => {
+		J.delete(e);
+	})), t;
+}, X = (e = {}) => {
+	let { path: t = U } = e, [n, r] = (0, E.useState)(0), [i, a] = (0, E.useState)({
+		status: "loading",
+		categories: [],
+		entries: []
+	});
+	return (0, E.useEffect)(() => {
+		let e = !1;
+		return a((e) => e.status === "loading" ? e : {
+			status: "loading",
+			categories: [],
+			entries: []
+		}), Y(t).then((t) => {
+			e || a({
+				status: "ready",
+				...t
+			});
+		}, (t) => {
+			e || a({
+				status: "error",
+				categories: [],
+				entries: [],
+				error: t
+			});
+		}), () => {
+			e = !0;
+		};
+	}, [t, n]), {
+		...i,
+		retry: (0, E.useCallback)(() => {
+			r((e) => e + 1);
+		}, [])
+	};
+};
+export { X as a, B as i, Y as n, H as r, V as t };