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

package/browser/esm/XB269tVMhdRHj10G.mjs

@@ -0,0 +1,674 @@
+/**
+* @license @sheetxl/studio-vanilla - SheetXL Studio - Vanilla entry point for integrating SheetXL UI. - v0.8.0-beta.2
+*
+* (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 "./nBZATD4yR1W5D4Fi.mjs";
+import { i as t, r as n } from "./C3M_lKSZ_Fq1SQOn.mjs";
+import { r } from "./Cvw3poNlUmn3qAh0.mjs";
+import { en as i, h as a, m as o, p as s, qt as c, t as l } from "./BcHN_VMA7bLNKKMO.mjs";
+import { t as u } from "./B0FNPu0uhX_WW-aJ.mjs";
+import { ot as d } from "./j-9DpYsIlTN1mwql.mjs";
+import { D as f, Dt as p, Et as m, L as h, N as g, _t as _, ct as v, et as y, lt as b, ut as x } from "./C1EvC_qPiGiVMrkF.mjs";
+import { t as S } from "./DeSDYBzD8e5XXnvq.mjs";
+import { T as C } from "./CYU_-DiQXjh1SEU1.mjs";
+import { t as w } from "./DyPe20tPiPVm1PLe.mjs";
+var T = e(t(), 1);
+function E(e) {
+	return o("MuiSkeleton", e);
+}
+s("MuiSkeleton", [
+	"root",
+	"text",
+	"rectangular",
+	"rounded",
+	"circular",
+	"pulse",
+	"wave",
+	"withChildren",
+	"fitContent",
+	"heightAuto"
+]);
+var D = e(n(), 1), O = p`
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.4;
+  }
+
+  100% {
+    opacity: 1;
+  }
+`, k = p`
+  0% {
+    transform: translateX(-100%);
+  }
+
+  50% {
+    /* +0.5s of delay between each loop */
+    transform: translateX(100%);
+  }
+
+  100% {
+    transform: translateX(100%);
+  }
+`, A = typeof O == "string" ? null : m`
+        animation: ${O} 2s ease-in-out 0.5s infinite;
+      `, j = typeof k == "string" ? null : m`
+        &::after {
+          animation: ${k} 2s linear 0.5s infinite;
+        }
+      `, ee = x("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
+		];
+	}
+})(b(({ 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 = y(e, { animation: "none" }), o = y(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: A || { animation: `${O} 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: j || { "&::after": { animation: `${k} 2s linear 0.5s infinite` } }
+			},
+			...o ? [{
+				props: { animation: "wave" },
+				style: o
+			}] : []
+		]
+	};
+})), M = T.forwardRef(function(e, t) {
+	let n = v({
+		props: e,
+		name: "MuiSkeleton"
+	}), { animation: r = "pulse", className: i, component: o = "span", height: s, style: c, variant: l = "text", width: u, ...d } = n, f = {
+		...n,
+		animation: r,
+		component: o,
+		variant: l,
+		hasChildren: !!d.children
+	}, p = ((e) => {
+		let { classes: t, variant: n, animation: r, hasChildren: i, width: a, height: o } = e;
+		return _({ root: [
+			"root",
+			n,
+			r,
+			i && "withChildren",
+			i && !a && "fitContent",
+			i && !o && "heightAuto"
+		] }, E, t);
+	})(f);
+	return (0, D.jsx)(ee, {
+		as: o,
+		ref: t,
+		className: a(p.root, i),
+		ownerState: f,
+		...d,
+		style: {
+			width: u,
+			height: s,
+			...c
+		}
+	});
+}), N = "contents.json", P = new TextDecoder(), F = /* @__PURE__ */ new Map();
+function I(e) {
+	let t = F.get(e);
+	return t || (t = (async () => {
+		let t, n;
+		try {
+			t = await fetch(`${e}${e.endsWith("/") ? "" : "/"}${N}`);
+		} catch {
+			return null;
+		}
+		if (!t.ok || (t.headers.get("content-type") ?? "").includes("text/html")) return null;
+		try {
+			n = JSON.parse(await t.text());
+		} catch {
+			return null;
+		}
+		if (!Array.isArray(n?.entries)) return null;
+		let r = /* @__PURE__ */ new Set(), i = new Set(Array.isArray(n.folders) ? n.folders : []);
+		for (let e of n.entries) {
+			let t = e?.path;
+			if (typeof t != "string") continue;
+			r.add(t);
+			let n = t.split("/");
+			for (let e = 1; e < n.length; e++) i.add(n.slice(0, e).join("/"));
+		}
+		return {
+			files: r,
+			folders: i
+		};
+	})(), F.set(e, t)), t;
+}
+function L(e, t) {
+	let n = (n, r, i) => `${e}${e.endsWith("/") ? "" : "/"}${[...t(n, r), i].join("/")}`;
+	return {
+		id: e,
+		describe: n,
+		async read(e, t, r) {
+			let i;
+			try {
+				i = await fetch(n(e, t, r));
+			} catch {
+				return null;
+			}
+			return i.ok ? (i.headers.get("content-type") ?? "").includes("text/html") ? null : new Uint8Array(await i.arrayBuffer()) : null;
+		},
+		async has(n, r, i) {
+			let a = await I(e);
+			if (!a) return null;
+			let o = t(n, r).join("/");
+			return i == null ? a.folders.has(o) : a.files.has(`${o}/${i}`);
+		},
+		async list(n, r) {
+			let i = await I(e);
+			if (!i) return null;
+			let a = `${t(n, r).join("/")}/`;
+			return [...i.files].filter((e) => e.startsWith(a)).map((e) => e.slice(a.length));
+		}
+	};
+}
+var R = [];
+async function z(e, t, n, r) {
+	return async function(e, t, n) {
+		let r = [];
+		for (let i of e) if (!1 !== (i.has ? await i.has(t, n) : null)) {
+			if (!1 !== (i.has ? await i.has(t, n, "contents.json") : null)) try {
+				let e = await i.read(t, n, N);
+				if (e) {
+					r.push(JSON.parse(P.decode(e)));
+					continue;
+				}
+			} catch {}
+			if (i.list) try {
+				let e = (await i.list(t, n))?.filter((e) => e !== N);
+				e?.length && r.push({
+					kind: t,
+					package: n,
+					entries: e.map((e) => ({ path: e }))
+				});
+			} catch {}
+		}
+		return r;
+	}(function(e) {
+		let t = [...R];
+		return e && t.push(L(e, (e, t) => [t])), t.push(L("/resources", (e, t) => [e, t])), t;
+	}(n), e, t);
+}
+var B = "8 / 5", V = (e) => {
+	let { entry: t } = e, n = (d() === "dark" ? t.thumbnailDarkUrl : void 0) ?? t.thumbnailUrl;
+	return (0, D.jsx)(H, { src: n }, n);
+}, H = (e) => {
+	let { src: t } = e, [n, i] = (0, T.useState)(t ? "loading" : "failed");
+	return (0, D.jsx)(l, {
+		className: "template-thumbnail",
+		sx: {
+			position: "relative",
+			width: "100%",
+			aspectRatio: B,
+			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, D.jsx)(r, {
+			iconKey: "FileNew",
+			style: {
+				fontSize: "2.5rem",
+				opacity: .4
+			}
+		}) : (0, D.jsx)("img", {
+			src: t,
+			alt: "",
+			loading: "lazy",
+			draggable: !1,
+			onLoad: () => i("loaded"),
+			onError: () => i("failed"),
+			style: {
+				width: "100%",
+				height: "100%",
+				objectFit: "cover",
+				objectPosition: "top left",
+				opacity: +(n === "loaded"),
+				transition: "opacity 150ms ease-out"
+			}
+		})
+	});
+}, U = (e) => {
+	let { entry: t, category: n, onSelect: r } = e;
+	return (0, D.jsxs)(h, {
+		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, D.jsx)(V, { entry: t }), (0, D.jsxs)(l, {
+			sx: { minWidth: 0 },
+			children: [(0, D.jsx)(g, {
+				variant: "subtitle2",
+				component: "div",
+				noWrap: !0,
+				children: t.title
+			}), n ? (0, D.jsx)(g, {
+				variant: "caption",
+				component: "div",
+				noWrap: !0,
+				sx: { color: "text.secondary" },
+				children: n.title
+			}) : null]
+		})]
+	});
+}, W = () => (0, D.jsxs)(l, {
+	sx: {
+		padding: 1,
+		display: "flex",
+		flexDirection: "column",
+		gap: .75
+	},
+	children: [
+		(0, D.jsx)(M, {
+			variant: "rectangular",
+			sx: {
+				width: "100%",
+				height: "auto",
+				aspectRatio: B,
+				borderRadius: 1
+			}
+		}),
+		(0, D.jsx)(M, {
+			variant: "text",
+			width: "60%"
+		}),
+		(0, D.jsx)(M, {
+			variant: "text",
+			width: "35%"
+		})
+	]
+}), G = (0, T.memo)((0, T.forwardRef)((e, t) => {
+	let { catalog: n, onSelect: r, filter: a, groupBy: o, renderTile: s, tileMinWidth: d = 180, emptyLabel: p, visibleRows: m, sx: h = c.EmptyCssProperties, style: _, className: v, onKeyDown: y, ...b } = e, x = i(), S = (0, T.useRef)(null), [C, w] = (0, T.useState)(0), E = (0, T.useRef)(null);
+	E.current = () => {
+		let e = S.current?.querySelector(".template-grid")?.firstElementChild, t = (e?.offsetHeight ? e : e?.firstElementChild)?.getBoundingClientRect().height;
+		t && w(t);
+	}, (0, T.useLayoutEffect)(() => {
+		m && E.current?.();
+	}), (0, T.useEffect)(() => {
+		let e = S.current;
+		if (!m || !e) return;
+		let t = new ResizeObserver(() => E.current?.());
+		return t.observe(e), () => t.disconnect();
+	}, [m]);
+	let O, k = (0, T.useMemo)(() => new Map(n.categories.map((e) => [e.id, e])), [n.categories]), A = (0, T.useMemo)(() => {
+		let e = a ? n.entries.filter(a) : 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,
+		a,
+		o
+	]), j = {
+		display: "grid",
+		gridTemplateColumns: `repeat(auto-fill, minmax(${d}px, 1fr))`,
+		gap: "8px"
+	};
+	return O = n.status === "loading" ? (0, D.jsx)(l, {
+		className: "template-grid",
+		sx: j,
+		"aria-busy": "true",
+		"aria-label": x("template.loading"),
+		children: Array.from({ length: 6 }, (e, t) => (0, D.jsx)(W, {}, t))
+	}) : n.status === "error" ? (0, D.jsxs)(l, {
+		sx: {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			gap: 1,
+			padding: 4,
+			textAlign: "center"
+		},
+		children: [(0, D.jsx)(g, {
+			variant: "body2",
+			sx: { color: "text.secondary" },
+			children: x("template.loadFailed")
+		}), (0, D.jsx)(f, {
+			variant: "outlined",
+			size: "small",
+			onClick: n.retry,
+			children: x("template.retry")
+		})]
+	}) : A.every((e) => e.entries.length === 0) ? (0, D.jsx)(g, {
+		variant: "body2",
+		sx: {
+			color: "text.secondary",
+			padding: 4,
+			textAlign: "center"
+		},
+		children: p ?? x("template.empty")
+	}) : A.map((e) => (0, D.jsxs)(l, {
+		role: "group",
+		"aria-label": e.title,
+		children: [e.title ? (0, D.jsx)(g, {
+			variant: "overline",
+			component: "div",
+			sx: {
+				color: "text.secondary",
+				paddingX: 1
+			},
+			children: e.title
+		}) : null, (0, D.jsx)(l, {
+			className: "template-grid",
+			sx: j,
+			children: e.entries.map((e) => {
+				let t = {
+					category: k.get(e.category),
+					onSelect: () => r?.(e)
+				};
+				return s ? (0, D.jsx)(l, {
+					sx: { display: "contents" },
+					children: s(e, t)
+				}, e.id) : (0, D.jsx)(U, {
+					entry: e,
+					...t
+				}, e.id);
+			})
+		})]
+	}, e.key ?? "")), (0, D.jsx)(l, {
+		ref: t,
+		className: u(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`,
+			..._
+		} : _,
+		...b,
+		children: (0, D.jsx)(l, {
+			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: O
+		})
+	});
+}));
+G.displayName = "TemplatePanel";
+var K = (e, t, n) => {
+	let r = t.trim().toLowerCase();
+	return !r || [
+		e.title,
+		e.description,
+		n?.title,
+		...e.tags ?? []
+	].some((e) => e?.toLowerCase().includes(r));
+}, te = (e) => {
+	let { value: t, onChange: n, sx: a } = e, o = i();
+	return (0, D.jsx)(S, {
+		size: "small",
+		value: t,
+		placeholder: o("template.search"),
+		onChange: (e) => n(e.target.value),
+		onKeyDown: (e) => {
+			e.key === "Escape" && t && (e.stopPropagation(), n(""));
+		},
+		sx: a,
+		slotProps: {
+			input: {
+				sx: { backgroundColor: "background.paper" },
+				startAdornment: (0, D.jsx)(w, {
+					position: "start",
+					children: (0, D.jsx)(r, { iconKey: "Find" })
+				}),
+				endAdornment: t ? (0, D.jsx)(w, {
+					position: "end",
+					children: (0, D.jsx)(C, {
+						"aria-label": o("template.clearSearch"),
+						propsTooltip: { label: o("template.clearSearch") },
+						onMouseDown: (e) => {
+							e.button === 0 && e.preventDefault();
+						},
+						onClick: () => n(""),
+						icon: (0, D.jsx)(r, { iconKey: "Close" }),
+						size: "small"
+					})
+				}) : void 0
+			},
+			htmlInput: {
+				spellCheck: !1,
+				autoComplete: "off",
+				"aria-label": o("template.search")
+			}
+		}
+	});
+}, q = "https://unpkg.com/@sheetxl/workbook-templates/dist", J = "workbook-templates", Y = (e) => e.replace(/\.[^/.]+$/, "").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[-_]+/g, " ").trim().replace(/\b\w/g, (e) => e.toUpperCase()), X = (e, t) => {
+	let n = `${e}${e.endsWith("/") ? "" : "/"}${J}/${t}`;
+	return typeof document > "u" ? n : new URL(n, document.baseURI).href;
+}, Z = (e) => typeof e == "string" && e ? e : void 0, Q = /* @__PURE__ */ new Map(), $ = (e = q) => {
+	let t = Q.get(e);
+	return t || (t = (async () => {
+		let t = (await z("templates", J, 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 = Z(e?.id);
+				t && !i.has(t) && (i.add(t), r.push({
+					id: t,
+					title: Z(e.title) ?? Y(t),
+					description: Z(e.description),
+					icon: Z(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 = Z(n.category) ?? o[0];
+				i.has(s) || (i.add(s), r.push({
+					id: s,
+					title: Y(s)
+				}));
+				let c = Z(n.thumbnail), l = Z(n.thumbnailDark);
+				a.push({
+					id: e,
+					title: Z(n.title) ?? Y(o[1]),
+					category: s,
+					description: Z(n.description),
+					tags: Array.isArray(n.tags) ? n.tags.filter((e) => typeof e == "string") : void 0,
+					thumbnailUrl: c ? X(t, c) : void 0,
+					thumbnailDarkUrl: l ? X(t, l) : void 0,
+					sourceUrl: X(t, e)
+				});
+			}
+			return {
+				categories: r,
+				entries: a
+			};
+		})(t, e) : (console.warn(`Template catalog at '${e}' has schema ${t.meta?.schema}; expected 1.`), {
+			categories: [],
+			entries: []
+		});
+	})(), Q.set(e, t), t.catch(() => {
+		Q.delete(e);
+	})), t;
+}, ne = (e = {}) => {
+	let { path: t = q } = e, [n, r] = (0, T.useState)(0), [i, a] = (0, T.useState)({
+		status: "loading",
+		categories: [],
+		entries: []
+	});
+	return (0, T.useEffect)(() => {
+		let e = !1;
+		return a((e) => e.status === "loading" ? e : {
+			status: "loading",
+			categories: [],
+			entries: []
+		}), $(t).then((t) => {
+			e || a({
+				status: "ready",
+				...t
+			});
+		}, (t) => {
+			e || a({
+				status: "error",
+				categories: [],
+				entries: [],
+				error: t
+			});
+		}), () => {
+			e = !0;
+		};
+	}, [t, n]), {
+		...i,
+		retry: (0, T.useCallback)(() => {
+			r((e) => e + 1);
+		}, [])
+	};
+};
+export { ne as a, G as i, $ as n, te as r, K as t };