@clarify-labs/renderer 0.6.4 → 0.6.6

package/output/ThemeRoot-BhP5M3Hd.cjs

@@ -0,0 +1,1800 @@
+const require_chunk = require("./chunk-DakpK96I.cjs");
+const require_shell = require("./shell-D4tS8Jts.cjs");
+let clsx = require("clsx");
+clsx = require_chunk.__toESM(clsx, 1);
+let react = require("react");
+let react_router_dom = require("react-router-dom");
+let lucide_react = require("lucide-react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region source/app/ErrorBoundary.tsx
+function PageErrorPanel(props) {
+	const { title, description, reloadLabel, detailsLabel, pathLabel, typeLabel, messageLabel, stackLabel, componentStackLabel, timestampLabel, copyLabel, copiedLabel, path, error, errorInfo, occurredAt } = props;
+	const [copiedStack, setCopiedStack] = (0, react.useState)(false);
+	const stack = error.stack ?? error.message;
+	const componentStack = errorInfo?.componentStack?.trim();
+	const stackText = componentStack ? `${stack}\n\n${componentStackLabel}\n${componentStack}` : stack;
+	const capturedAt = occurredAt ?? (/* @__PURE__ */ new Date()).toISOString();
+	async function copyStack() {
+		if (!await require_shell.copyTextToClipboard(stackText)) return;
+		setCopiedStack(true);
+		window.setTimeout(() => setCopiedStack(false), 1600);
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+		className: "mx-auto flex min-h-(--clarify-error-page-min-height) w-full max-w-4xl flex-col justify-center py-16 text-(--clarify-theme-tokens-colors-foreground)",
+		"aria-labelledby": "clarify-render-error-title",
+		role: "alert",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "border-t-2 border-(--clarify-error-accent-text) pt-8",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex flex-col gap-6 sm:flex-row sm:items-start sm:justify-between",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "font-mono text-xs/5 font-semibold uppercase tracking-wide text-(--clarify-error-accent-text)",
+							children: "Render error"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+							id: "clarify-render-error-title",
+							className: "mt-3 text-3xl/9 font-semibold tracking-tight text-(--clarify-theme-tokens-colors-foreground)",
+							children: title
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "mt-4 max-w-2xl text-sm/6 text-(--clarify-theme-tokens-colors-muted)",
+							children: description
+						})
+					] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "inline-flex shrink-0 items-center rounded-(--clarify-theme-tokens-radius-md) bg-(--clarify-theme-tokens-colors-primary) px-4 py-2 text-sm/5 font-semibold text-white shadow-xs transition hover:opacity-90",
+						onClick: () => window.location.reload(),
+						children: reloadLabel
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dl", {
+					className: "mt-8 grid gap-px overflow-hidden rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-border) sm:grid-cols-3",
+					children: [
+						[pathLabel, path],
+						[typeLabel, error.name],
+						[timestampLabel, capturedAt]
+					].map(([label, value]) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "min-w-0 bg-(--clarify-theme-tokens-colors-surface) px-4 py-3",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", {
+							className: "text-xs/5 font-semibold uppercase tracking-wide text-(--clarify-ui-text-faint)",
+							children: label
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", {
+							className: "mt-1 truncate font-mono text-sm/6 text-(--clarify-ui-text-strong)",
+							title: value,
+							children: value
+						})]
+					}, label))
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "mt-6 overflow-hidden rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-code-background)",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex items-center justify-between gap-3 border-b border-(--clarify-theme-tokens-colors-border) px-4 py-3",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "text-sm/6 font-semibold text-(--clarify-ui-text-strong)",
+							children: detailsLabel
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "rounded-(--clarify-theme-tokens-radius-sm) px-2 py-1 text-xs/5 font-semibold text-(--clarify-ui-text-soft) ring-1 ring-(--clarify-theme-tokens-colors-border) transition hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-ui-text-strong)",
+							onClick: copyStack,
+							children: copiedStack ? copiedLabel : copyLabel
+						})]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "px-4 py-4 text-xs/5 text-(--clarify-ui-text)",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "font-semibold uppercase tracking-wide text-(--clarify-ui-text-faint)",
+								children: messageLabel
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "mt-2 break-words font-mono text-sm/6 font-semibold text-(--clarify-theme-tokens-colors-foreground)",
+								children: error.message
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "mt-6 font-semibold uppercase tracking-wide text-(--clarify-ui-text-faint)",
+								children: stackLabel
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+								className: "mt-2 max-h-(--clarify-error-details-max-height) overflow-auto whitespace-pre-wrap break-words font-mono",
+								children: stack
+							}),
+							componentStack ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "mt-6 font-semibold uppercase tracking-wide text-(--clarify-ui-text-faint)",
+								children: componentStackLabel
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+								className: "mt-2 max-h-(--clarify-error-component-stack-max-height) overflow-auto whitespace-pre-wrap break-words font-mono",
+								children: componentStack
+							})] }) : null
+						]
+					})]
+				})
+			]
+		})
+	});
+}
+var PageErrorBoundary = class extends react.Component {
+	state = {};
+	static getDerivedStateFromError(error) {
+		return {
+			error,
+			occurredAt: (/* @__PURE__ */ new Date()).toISOString()
+		};
+	}
+	componentDidCatch(error, errorInfo) {
+		console.error("[clarify] Failed to render page:", error, errorInfo);
+		this.setState({ errorInfo });
+	}
+	render() {
+		const { error, errorInfo, occurredAt } = this.state;
+		if (!error) return this.props.children;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageErrorPanel, {
+			title: this.props.title,
+			description: this.props.description,
+			reloadLabel: this.props.reloadLabel,
+			detailsLabel: this.props.detailsLabel,
+			pathLabel: this.props.pathLabel,
+			typeLabel: this.props.typeLabel,
+			messageLabel: this.props.messageLabel,
+			stackLabel: this.props.stackLabel,
+			componentStackLabel: this.props.componentStackLabel,
+			timestampLabel: this.props.timestampLabel,
+			copyLabel: this.props.copyLabel,
+			copiedLabel: this.props.copiedLabel,
+			path: this.props.path,
+			error,
+			errorInfo,
+			occurredAt
+		});
+	}
+};
+//#endregion
+//#region source/assets/clarify.svg?url
+var clarify_default = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='279px'%20height='200px'%20viewBox='0%200%20279%20200'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3eclarify%3c/title%3e%3cg%20id='页面-1'%20stroke='none'%20stroke-width='1'%20fill='none'%20fill-rule='evenodd'%3e%3cg%20id='clarify'%20transform='translate(-0,%200.0054)'%3e%3cpath%20d='M44.867217,0.0054376148%20C130.715579,1.00591567%20200,70.9091172%20200,156.994562%20L199.986321,155.127494%20C199.384888,180.009127%20179.026368,199.994562%20154,199.994562%20L46,199.994562%20C20.5949015,199.994562%200,179.399661%200,153.994562%20L0,45.9945624%20C0,21.0975659%2019.7793434,0.820282524%2044.4815926,0.0191499894%20Z'%20fill='%2300D492'%3e%3c/path%3e%3cpath%20d='M123.867217,0.0054376148%20C209.715579,1.00591567%20279,70.9091172%20279,156.994562%20L278.986321,155.127494%20C278.384888,180.009127%20258.026368,199.994562%20233,199.994562%20L125,199.994562%20C99.5949015,199.994562%2079,179.399661%2079,153.994562%20L79,45.9945624%20C79,21.0975659%2098.7793434,0.820282524%20123.481593,0.0191499894%20Z'%20id='clarify-right'%20fill-opacity='0.6'%20fill='%2300F6C9'%20transform='translate(179,%20100)%20rotate(-90)%20translate(-179,%20-100)'%3e%3c/path%3e%3cpath%20d='M199.979267,154.416906%20L199.984438,155.157125%20L199.962366,155.872459%20C198.977251,180.406837%20178.776104,199.994562%20154,199.994562%20L124.372438,199.994125%20L124.249053,199.994081%20C99.6939678,199.603921%2079.8122712,179.973634%2079.01915,155.518407%20L79.0054376,155.132783%20C79.5830823,105.566626%20103.129768,61.5221348%20139.498462,33.1463428%20C175.69419,61.3871018%20199.186123,105.143863%20199.979267,154.416906%20Z'%20id='形状结合'%20fill='%2300F692'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
+//#endregion
+//#region source/app/BuiltWithClarify.tsx
+function BuiltWithClarify() {
+	const t = require_shell.useBuiltInText();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+		href: "https://clarify.pub",
+		target: "_blank",
+		rel: "noreferrer",
+		"aria-label": t("builtWith.label"),
+		className: "clarify-built-with inline-flex items-center gap-1.5 rounded-full px-2 py-1 font-medium no-underline transition",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("builtWith.prefix") }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+				src: clarify_default,
+				alt: "",
+				className: "clarify-built-with-logo h-3.5 w-5 flex-none"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "clarify-built-with-brand font-semibold",
+				children: "Clarify"
+			})
+		]
+	});
+}
+//#endregion
+//#region source/app/PageFooter.tsx
+function resolveLocalizedText(text, locale, fallbackLocale) {
+	if (typeof text === "string") return text;
+	return (locale ? text[locale] : void 0) ?? (fallbackLocale ? text[fallbackLocale] : void 0) ?? Object.values(text)[0] ?? "";
+}
+function localeForPath$1(config, pathname) {
+	const i18n = config.i18n;
+	if (!i18n) return void 0;
+	const firstSegment = pathname.split("/").filter(Boolean)[0];
+	return i18n.locales.find((locale) => locale.code === firstSegment)?.code ?? i18n.defaultLocale;
+}
+function FooterLink(arg0) {
+	const { link, locale, config } = arg0;
+	const external = link.external ?? require_shell.isExternalHref(link.href);
+	const href = external ? link.href : require_shell.localizeHref(link.href, config, locale);
+	const className = "clarify-footer-link no-underline transition";
+	const label = resolveLocalizedText(link.label, locale, config.i18n?.defaultLocale);
+	if (external) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+		href,
+		target: "_blank",
+		rel: "noreferrer",
+		className,
+		children: label
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Link, {
+		to: href,
+		className,
+		children: label
+	});
+}
+function SocialLink(arg0) {
+	const { name, href } = arg0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+		href,
+		target: "_blank",
+		rel: "noreferrer",
+		className: "clarify-footer-social capitalize no-underline transition",
+		children: name
+	});
+}
+function PageFooter() {
+	const config = require_shell.useClarifyConfig();
+	const locale = localeForPath$1(config, (0, react_router_dom.useLocation)().pathname);
+	const footer = config.footer;
+	const links = footer?.links ?? [];
+	const socials = Object.entries(footer?.socials ?? {});
+	const copyright = footer?.copyright ? resolveLocalizedText(footer.copyright, locale, config.i18n?.defaultLocale) : void 0;
+	const hasCustomFooter = Boolean(copyright || links.length > 0 || socials.length > 0);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("footer", {
+		className: (0, clsx.default)("clarify-page-footer mx-auto flex w-full max-w-(--clarify-theme-layout-max-width) flex-col items-end gap-4 border-t border-(--clarify-theme-tokens-colors-border) px-4 py-8 sm:px-6 lg:mt-24 lg:px-5", hasCustomFooter && "sm:flex-row sm:items-center sm:justify-between"),
+		children: [hasCustomFooter ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "clarify-footer-content flex flex-col gap-3 text-right sm:text-left",
+			children: [copyright ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "clarify-footer-copyright m-0",
+				children: copyright
+			}) : null, links.length > 0 || socials.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "clarify-footer-links flex flex-wrap justify-end gap-x-4 gap-y-2 sm:justify-start",
+				children: [links.map((link) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FooterLink, {
+					link,
+					locale,
+					config
+				}, `${link.href}-${resolveLocalizedText(link.label, locale, config.i18n?.defaultLocale)}`)), socials.map(([name, href]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SocialLink, {
+					name,
+					href
+				}, name))]
+			}) : null]
+		}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "clarify-footer-brand flex justify-end",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BuiltWithClarify, {})
+		})]
+	});
+}
+//#endregion
+//#region source/app/PageNavigation.tsx
+function flattenNavigation(nodes) {
+	return nodes.flatMap((node) => node.children?.length ? flattenNavigation(node.children) : [node]);
+}
+function PageNavigation(arg0) {
+	const { navigation, currentRoute } = arg0;
+	const t = require_shell.useBuiltInText();
+	if (!currentRoute) return null;
+	const pageRoutes = flattenNavigation(navigation);
+	const currentIndex = pageRoutes.findIndex((route) => require_shell.isSameRoutePath(route.path, currentRoute.path));
+	if (currentIndex === -1) return null;
+	const previous = pageRoutes[currentIndex - 1];
+	const next = pageRoutes[currentIndex + 1];
+	if (!previous && !next) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("nav", {
+		className: "clarify-page-navigation mt-6 grid gap-3 @3xl:grid-cols-2",
+		"aria-label": t("navigation.previousNext"),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageNavigationLink, {
+			direction: "previous",
+			route: previous
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageNavigationLink, {
+			direction: "next",
+			route: next
+		})]
+	});
+}
+function PageNavigationLink(arg0) {
+	const { direction, route } = arg0;
+	const t = require_shell.useBuiltInText();
+	if (!route) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "hidden @3xl:block" });
+	const isNext = direction === "next";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_router_dom.Link, {
+		to: require_shell.normalizeRoutePath(route.path),
+		className: (0, clsx.default)("group flex min-w-0 items-center gap-3 rounded-lg border border-(--clarify-theme-tokens-colors-border) px-4 py-3 no-underline transition hover:border-(--clarify-theme-tokens-colors-primary) hover:bg-(--clarify-ui-hover-background)", isNext && "@3xl:justify-end @3xl:text-right"),
+		children: [
+			!isNext ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeft, { className: "h-3.5 w-3.5 shrink-0 text-(--clarify-theme-tokens-colors-muted) transition group-hover:text-(--clarify-theme-tokens-colors-primary)" }) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "clarify-page-navigation-label block font-medium uppercase tracking-wide text-(--clarify-theme-tokens-colors-muted)",
+					children: isNext ? t("navigation.next") : t("navigation.previous")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "clarify-page-navigation-title mt-0.5 block truncate font-semibold text-(--clarify-theme-tokens-colors-foreground)",
+					children: route.title
+				})]
+			}),
+			isNext ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, { className: "h-3.5 w-3.5 shrink-0 text-(--clarify-theme-tokens-colors-muted) transition group-hover:text-(--clarify-theme-tokens-colors-primary)" }) : null
+		]
+	});
+}
+//#endregion
+//#region source/app/PageSkeleton.tsx
+var paragraphLines = [
+	"w-full",
+	"w-11/12",
+	"w-4/5"
+];
+var codeLines = [
+	"w-5/6",
+	"w-2/3",
+	"w-3/4",
+	"w-1/2"
+];
+function SkeletonBlock(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"aria-hidden": "true",
+		className: (0, clsx.default)("rounded-(--clarify-skeleton-radius) bg-(--clarify-skeleton-background)", props.className)
+	});
+}
+function SkeletonParagraph() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "space-y-3",
+		children: paragraphLines.map((width) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonBlock, { className: (0, clsx.default)("h-3", width) }, width))
+	});
+}
+function PageSkeleton() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: "clarify-page-skeleton animate-pulse space-y-10 py-8",
+		"aria-label": "Loading page",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "space-y-5",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonBlock, { className: "h-3 w-24 rounded-full bg-(--clarify-skeleton-accent-background)" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonBlock, { className: "h-11 w-full max-w-(--clarify-skeleton-title-width) rounded-3xl" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "max-w-3xl space-y-3",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonBlock, { className: "h-4 w-full" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonBlock, { className: "h-4 w-5/6" })]
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "grid gap-4 xl:grid-cols-2",
+				children: [0, 1].map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "rounded-(--clarify-skeleton-card-radius) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) p-5 shadow-sm shadow-zinc-900/5",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex items-start gap-4",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonBlock, { className: "h-10 w-10 shrink-0 bg-(--clarify-skeleton-accent-background)" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "min-w-0 flex-1 space-y-4",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonBlock, { className: "h-5 w-2/3" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonParagraph, {})]
+						})]
+					})
+				}, item))
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "space-y-8",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("article", {
+						className: "space-y-5",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonBlock, { className: "h-7 w-full max-w-(--clarify-skeleton-heading-width) rounded-2xl" }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonParagraph, {}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-ui-accent-border) bg-(--clarify-ui-accent-background) p-4",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonBlock, { className: "h-4 w-full max-w-(--clarify-skeleton-line-width) bg-(--clarify-skeleton-accent-background)" })
+							})
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "overflow-hidden rounded-(--clarify-skeleton-block-radius) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-code-background)",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex items-center gap-2 border-b border-(--clarify-theme-tokens-colors-border) px-4 py-3",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonBlock, { className: "h-3 w-3 rounded-full" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonBlock, { className: "h-3 w-3 rounded-full" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonBlock, { className: "h-3 w-3 rounded-full" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonBlock, { className: "ml-3 h-3 w-32" })
+							]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "space-y-3 p-4",
+							children: codeLines.map((width) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonBlock, { className: (0, clsx.default)("h-3", width) }, width))
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("article", {
+						className: "space-y-5",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonBlock, { className: "h-7 w-full max-w-(--clarify-skeleton-heading-short-width) rounded-2xl" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "grid gap-3 sm:grid-cols-2",
+							children: [
+								0,
+								1,
+								2,
+								3
+							].map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "rounded-(--clarify-theme-tokens-radius-lg) border border-(--clarify-theme-tokens-colors-border) p-4",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonBlock, { className: "mb-3 h-4 w-1/2" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonBlock, { className: "h-3 w-4/5" })]
+							}, item))
+						})]
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+//#region source/app/AppShell.tsx
+function routeForPath(routes, pathname) {
+	return routes.find((route) => require_shell.isSameRoutePath(route.path, pathname));
+}
+function notFoundRouteForPath(routes, pathname, currentLocale) {
+	const localePrefix = currentLocale ? `/${currentLocale}` : void 0;
+	if (localePrefix && pathname.startsWith(`${localePrefix}/`)) return routeForPath(routes, `${localePrefix}/404`);
+	return routeForPath(routes, "/404") ?? routes.find((route) => require_shell.isSameRoutePath(route.basePath, "/404"));
+}
+function sectionsForRoute(route) {
+	return route?.sections?.map((section) => ({
+		id: section.id,
+		title: section.title,
+		badge: section.badge,
+		tags: section.tags
+	})) ?? [];
+}
+function resolveRouteComponent(route) {
+	if (route.lazy) return (0, react.lazy)(route.component);
+	return route.component;
+}
+function scrollToHash(hash) {
+	if (!hash) return;
+	const targetId = require_shell.safeDecodeURIComponent(hash.slice(1));
+	window.requestAnimationFrame(() => {
+		document.getElementById(targetId)?.scrollIntoView();
+		window.requestAnimationFrame(() => {
+			window.dispatchEvent(new Event("scroll"));
+		});
+	});
+}
+function localeForPath(config, pathname, route) {
+	if (route?.locale) return route.locale;
+	const i18n = config.i18n;
+	if (!i18n) return void 0;
+	const firstSegment = pathname.split("/").filter(Boolean)[0];
+	return i18n.locales.find((locale) => locale.code === firstSegment)?.code ?? i18n.defaultLocale;
+}
+function isTabbedNavigation(navigation) {
+	return !Array.isArray(navigation) && "tabs" in navigation;
+}
+function hasPath(nodes, pathname) {
+	return nodes.some((node) => require_shell.isSameRoutePath(node.path, pathname) || hasPath(node.children ?? [], pathname));
+}
+function navigationFromTabs(navigation, pathname) {
+	return {
+		items: navigation.tabs.find((tab) => require_shell.isSameRoutePath(tab.path, pathname) || hasPath(tab.children, pathname))?.children ?? navigation.tabs[0]?.children ?? [],
+		tabs: navigation.tabs
+	};
+}
+function navigationForLocale(navigation, locale, pathname) {
+	if (Array.isArray(navigation)) return { items: navigation };
+	if (isTabbedNavigation(navigation)) return navigationFromTabs(navigation, pathname);
+	if (!locale) return { items: [] };
+	const localizedNavigation = navigation[locale];
+	if (!localizedNavigation) return { items: [] };
+	return Array.isArray(localizedNavigation) ? { items: localizedNavigation } : navigationFromTabs(localizedNavigation, pathname);
+}
+function pageTitle(config, route) {
+	const routeTitle = route?.title?.trim();
+	if (!routeTitle || routeTitle === config.title) return config.title;
+	return `${routeTitle} - ${config.title}`;
+}
+function setNamedMeta(name, content) {
+	const existing = document.head.querySelector(`meta[name="${name}"]`);
+	if (!content) {
+		existing?.remove();
+		return;
+	}
+	const meta = existing ?? document.createElement("meta");
+	meta.name = name;
+	meta.content = content;
+	if (!existing) document.head.appendChild(meta);
+}
+function applyDocumentMetadata(config, route) {
+	document.title = pageTitle(config, route);
+	setNamedMeta("description", route?.description ?? config.description);
+	setNamedMeta("keywords", route?.keywords?.join(", "));
+}
+function BuiltInNotFoundPage() {
+	const text = require_shell.useBuiltInText();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: "mx-auto flex min-h-(--clarify-error-page-min-height) max-w-2xl flex-col justify-center py-16 text-(--clarify-theme-tokens-colors-foreground)",
+		"aria-labelledby": "clarify-not-found-title",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-sm/6 font-semibold text-(--clarify-theme-tokens-colors-primary)",
+				children: text("notFound.label")
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+				id: "clarify-not-found-title",
+				className: "mt-3 text-3xl/9 font-semibold tracking-tight text-(--clarify-theme-tokens-colors-foreground)",
+				children: text("notFound.title")
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "mt-4 text-sm/6 text-(--clarify-theme-tokens-colors-muted)",
+				children: text("notFound.description")
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "mt-8",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Link, {
+					className: "inline-flex items-center rounded-(--clarify-theme-tokens-radius-md) bg-(--clarify-theme-tokens-colors-primary) px-3 py-2 text-sm/5 font-semibold text-white shadow-xs transition hover:opacity-90",
+					to: "/",
+					children: text("notFound.home")
+				})
+			})
+		]
+	});
+}
+function NotFoundRouteElement(props) {
+	const { component: RouteComponent } = props;
+	if (!RouteComponent) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BuiltInNotFoundPage, {});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RouteComponent, {});
+}
+function AppShell(arg0) {
+	const { config, routes, navigation } = arg0;
+	const location = (0, react_router_dom.useLocation)();
+	const pathname = require_shell.normalizeRoutePath(location.pathname);
+	const currentRoute = routeForPath(routes, pathname);
+	const currentLocale = localeForPath(config, pathname, currentRoute);
+	const currentLocaleConfig = config.i18n?.locales.find((locale) => locale.code === currentLocale);
+	const notFoundRoute = currentRoute ? void 0 : notFoundRouteForPath(routes, pathname, currentLocale);
+	const text = require_shell.useBuiltInText(currentLocale);
+	const currentNavigation = navigationForLocale(navigation, currentLocale, pathname);
+	const sections = sectionsForRoute(currentRoute);
+	const hasTabs = Boolean(currentNavigation.tabs?.length);
+	const renderRoutes = (0, react.useMemo)(() => routes.map((route) => ({
+		...route,
+		component: resolveRouteComponent(route)
+	})), [routes]);
+	const NotFoundRouteComponent = notFoundRoute ? renderRoutes.find((route) => require_shell.isSameRoutePath(route.path, notFoundRoute.path))?.component : void 0;
+	(0, react.useEffect)(() => {
+		if (location.hash) {
+			scrollToHash(location.hash);
+			return;
+		}
+		window.scrollTo({
+			top: 0,
+			left: 0
+		});
+		window.requestAnimationFrame(() => {
+			window.dispatchEvent(new Event("scroll"));
+		});
+	}, [location.hash, location.pathname]);
+	(0, react.useEffect)(() => {
+		if (!currentLocale) return;
+		document.documentElement.lang = currentLocale;
+		if (currentLocaleConfig?.dir) document.documentElement.dir = currentLocaleConfig.dir;
+		else document.documentElement.removeAttribute("dir");
+	}, [currentLocale, currentLocaleConfig?.dir]);
+	(0, react.useEffect)(() => {
+		applyDocumentMetadata(config, currentRoute ?? notFoundRoute);
+	}, [
+		config,
+		currentRoute,
+		notFoundRoute
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_shell.ClarifyLocaleContext.Provider, {
+		value: currentLocale,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_shell.SectionProvider, {
+			sections,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_shell.Header, {
+					config,
+					navigation: currentNavigation.items,
+					tabs: currentNavigation.tabs,
+					routes,
+					currentLocale,
+					currentRoute
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "clarify-layout pb-12 mx-auto grid w-full max-w-(--clarify-theme-layout-max-width) grid-cols-1 lg:grid-cols-(--clarify-layout-sidebar-grid) xl:grid-cols-(--clarify-layout-sidebar-grid-wide)",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
+						className: (0, clsx.default)("clarify-sidebar hidden lg:sticky lg:z-30 lg:block lg:h-(--clarify-sidebar-height) lg:self-start lg:overflow-y-auto lg:bg-(--clarify-theme-tokens-colors-background) lg:px-5 lg:pb-8 xl:px-6", hasTabs ? "lg:top-28 lg:h-(--clarify-sidebar-height-with-tabs) lg:pt-6" : "lg:top-14 lg:pt-6"),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_shell.Navigation, { navigation: currentNavigation.items })
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: (0, clsx.default)("clarify-content @container relative flex min-h-screen min-w-0 flex-col px-4 sm:px-6 lg:px-8 xl:px-10", hasTabs ? "pt-14 lg:pt-28" : "pt-14"),
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_shell.ContentActions, {
+								hasTabs,
+								route: currentRoute,
+								routePrefix: config.routePrefix
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("main", {
+								className: "clarify-main min-w-0 flex-auto",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageErrorBoundary, {
+									title: text("renderError.title"),
+									description: text("renderError.description"),
+									reloadLabel: text("renderError.reload"),
+									detailsLabel: text("renderError.details"),
+									pathLabel: text("renderError.path"),
+									typeLabel: text("renderError.type"),
+									messageLabel: text("renderError.message"),
+									stackLabel: text("renderError.stack"),
+									componentStackLabel: text("renderError.componentStack"),
+									timestampLabel: text("renderError.timestamp"),
+									copyLabel: text("actions.copy"),
+									copiedLabel: text("actions.copied"),
+									path: pathname,
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, {
+										fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageSkeleton, {}),
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_router_dom.Routes, { children: [renderRoutes.map((route) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Route, {
+											path: route.path,
+											element: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(route.component, {})
+										}, route.path)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Route, {
+											path: "*",
+											element: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NotFoundRouteElement, { component: NotFoundRouteComponent })
+										})] })
+									})
+								}, pathname)
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageNavigation, {
+								navigation: currentNavigation.items,
+								currentRoute
+							})
+						]
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageFooter, {})
+			]
+		})
+	});
+}
+//#endregion
+//#region source/theme/randomTheme.ts
+var randomThemePalettes = [
+	{
+		primary: "#047857",
+		accent: "#0D9488",
+		background: "#ffffff",
+		foreground: "#111827",
+		surface: "#ffffff",
+		muted: "#64748b",
+		borderMix: .12,
+		codeMix: .04
+	},
+	{
+		primary: "#2563eb",
+		accent: "#7c3aed",
+		background: "#f8fafc",
+		foreground: "#0f172a",
+		surface: "#ffffff",
+		muted: "#64748b",
+		borderMix: .12,
+		codeMix: .05
+	},
+	{
+		primary: "#9333ea",
+		accent: "#db2777",
+		background: "#fdf4ff",
+		foreground: "#2e1065",
+		surface: "#ffffff",
+		muted: "#7e22ce",
+		borderMix: .14,
+		codeMix: .06
+	},
+	{
+		primary: "#ea580c",
+		accent: "#ca8a04",
+		background: "#fff7ed",
+		foreground: "#431407",
+		surface: "#fffbeb",
+		muted: "#9a3412",
+		borderMix: .14,
+		codeMix: .06
+	},
+	{
+		primary: "#0f766e",
+		accent: "#0891b2",
+		background: "#f0fdfa",
+		foreground: "#042f2e",
+		surface: "#ffffff",
+		muted: "#0f766e",
+		borderMix: .13,
+		codeMix: .05
+	},
+	{
+		primary: "#be123c",
+		accent: "#f97316",
+		background: "#fff1f2",
+		foreground: "#4c0519",
+		surface: "#ffffff",
+		muted: "#9f1239",
+		borderMix: .13,
+		codeMix: .06
+	},
+	{
+		primary: "#4f46e5",
+		accent: "#06b6d4",
+		background: "#eef2ff",
+		foreground: "#1e1b4b",
+		surface: "#ffffff",
+		muted: "#4338ca",
+		borderMix: .12,
+		codeMix: .05
+	},
+	{
+		primary: "#0e7490",
+		accent: "#22c55e",
+		background: "#ecfeff",
+		foreground: "#083344",
+		surface: "#ffffff",
+		muted: "#155e75",
+		borderMix: .13,
+		codeMix: .05
+	},
+	{
+		primary: "#7c2d12",
+		accent: "#dc2626",
+		background: "#fef2f2",
+		foreground: "#450a0a",
+		surface: "#fff7ed",
+		muted: "#991b1b",
+		borderMix: .14,
+		codeMix: .06
+	},
+	{
+		primary: "#365314",
+		accent: "#84cc16",
+		background: "#f7fee7",
+		foreground: "#1a2e05",
+		surface: "#ffffff",
+		muted: "#4d7c0f",
+		borderMix: .13,
+		codeMix: .05
+	},
+	{
+		primary: "#0369a1",
+		accent: "#14b8a6",
+		background: "#f0f9ff",
+		foreground: "#082f49",
+		surface: "#ffffff",
+		muted: "#075985",
+		borderMix: .12,
+		codeMix: .05
+	},
+	{
+		primary: "#a21caf",
+		accent: "#e879f9",
+		background: "#fdf4ff",
+		foreground: "#4a044e",
+		surface: "#ffffff",
+		muted: "#86198f",
+		borderMix: .14,
+		codeMix: .06
+	},
+	{
+		primary: "#c2410c",
+		accent: "#fb7185",
+		background: "#fff7ed",
+		foreground: "#431407",
+		surface: "#ffffff",
+		muted: "#9a3412",
+		borderMix: .13,
+		codeMix: .05
+	},
+	{
+		primary: "#1d4ed8",
+		accent: "#f59e0b",
+		background: "#eff6ff",
+		foreground: "#172554",
+		surface: "#ffffff",
+		muted: "#1e40af",
+		borderMix: .12,
+		codeMix: .05
+	},
+	{
+		primary: "#6d28d9",
+		accent: "#10b981",
+		background: "#faf5ff",
+		foreground: "#2e1065",
+		surface: "#ffffff",
+		muted: "#6b21a8",
+		borderMix: .13,
+		codeMix: .05
+	},
+	{
+		primary: "#0f172a",
+		accent: "#64748b",
+		background: "#f8fafc",
+		foreground: "#0f172a",
+		surface: "#ffffff",
+		muted: "#475569",
+		borderMix: .12,
+		codeMix: .04
+	},
+	{
+		primary: "#18181b",
+		accent: "#71717a",
+		background: "#fafafa",
+		foreground: "#18181b",
+		surface: "#ffffff",
+		muted: "#52525b",
+		borderMix: .12,
+		codeMix: .04
+	},
+	{
+		primary: "#166534",
+		accent: "#06b6d4",
+		background: "#f0fdf4",
+		foreground: "#052e16",
+		surface: "#ffffff",
+		muted: "#15803d",
+		borderMix: .13,
+		codeMix: .05
+	},
+	{
+		primary: "#9d174d",
+		accent: "#8b5cf6",
+		background: "#fdf2f8",
+		foreground: "#500724",
+		surface: "#ffffff",
+		muted: "#be185d",
+		borderMix: .14,
+		codeMix: .06
+	},
+	{
+		primary: "#4338ca",
+		accent: "#ec4899",
+		background: "#f5f3ff",
+		foreground: "#312e81",
+		surface: "#ffffff",
+		muted: "#4f46e5",
+		borderMix: .13,
+		codeMix: .05
+	},
+	{
+		primary: "#92400e",
+		accent: "#65a30d",
+		background: "#fffbeb",
+		foreground: "#451a03",
+		surface: "#ffffff",
+		muted: "#a16207",
+		borderMix: .13,
+		codeMix: .05
+	},
+	{
+		primary: "#0f766e",
+		accent: "#f43f5e",
+		background: "#f8fafc",
+		foreground: "#134e4a",
+		surface: "#ffffff",
+		muted: "#0f766e",
+		borderMix: .12,
+		codeMix: .05
+	},
+	{
+		primary: "#1e3a8a",
+		accent: "#0ea5e9",
+		background: "#f8fafc",
+		foreground: "#0f172a",
+		surface: "#ffffff",
+		muted: "#475569",
+		borderMix: .12,
+		codeMix: .04
+	},
+	{
+		primary: "#581c87",
+		accent: "#f97316",
+		background: "#faf5ff",
+		foreground: "#3b0764",
+		surface: "#ffffff",
+		muted: "#7e22ce",
+		borderMix: .14,
+		codeMix: .06
+	},
+	{
+		primary: "#991b1b",
+		accent: "#facc15",
+		background: "#fef2f2",
+		foreground: "#450a0a",
+		surface: "#ffffff",
+		muted: "#b91c1c",
+		borderMix: .14,
+		codeMix: .06
+	},
+	{
+		primary: "#115e59",
+		accent: "#a3e635",
+		background: "#f0fdfa",
+		foreground: "#042f2e",
+		surface: "#ffffff",
+		muted: "#0f766e",
+		borderMix: .13,
+		codeMix: .05
+	},
+	{
+		primary: "#075985",
+		accent: "#38bdf8",
+		background: "#f0f9ff",
+		foreground: "#082f49",
+		surface: "#ffffff",
+		muted: "#0369a1",
+		borderMix: .12,
+		codeMix: .05
+	},
+	{
+		primary: "#7e22ce",
+		accent: "#f472b6",
+		background: "#faf5ff",
+		foreground: "#3b0764",
+		surface: "#ffffff",
+		muted: "#9333ea",
+		borderMix: .14,
+		codeMix: .06
+	},
+	{
+		primary: "#b45309",
+		accent: "#ef4444",
+		background: "#fffbeb",
+		foreground: "#451a03",
+		surface: "#ffffff",
+		muted: "#92400e",
+		borderMix: .13,
+		codeMix: .05
+	},
+	{
+		primary: "#065f46",
+		accent: "#2dd4bf",
+		background: "#ecfdf5",
+		foreground: "#022c22",
+		surface: "#ffffff",
+		muted: "#047857",
+		borderMix: .13,
+		codeMix: .05
+	},
+	{
+		primary: "#312e81",
+		accent: "#22d3ee",
+		background: "#eef2ff",
+		foreground: "#1e1b4b",
+		surface: "#ffffff",
+		muted: "#4338ca",
+		borderMix: .13,
+		codeMix: .05
+	},
+	{
+		primary: "#831843",
+		accent: "#fb923c",
+		background: "#fdf2f8",
+		foreground: "#500724",
+		surface: "#ffffff",
+		muted: "#be185d",
+		borderMix: .14,
+		codeMix: .06
+	},
+	{
+		primary: "#164e63",
+		accent: "#818cf8",
+		background: "#ecfeff",
+		foreground: "#083344",
+		surface: "#ffffff",
+		muted: "#155e75",
+		borderMix: .13,
+		codeMix: .05
+	},
+	{
+		primary: "#3f6212",
+		accent: "#f97316",
+		background: "#f7fee7",
+		foreground: "#1a2e05",
+		surface: "#ffffff",
+		muted: "#4d7c0f",
+		borderMix: .13,
+		codeMix: .05
+	},
+	{
+		primary: "#1e40af",
+		accent: "#fb7185",
+		background: "#eff6ff",
+		foreground: "#172554",
+		surface: "#ffffff",
+		muted: "#2563eb",
+		borderMix: .12,
+		codeMix: .05
+	},
+	{
+		primary: "#701a75",
+		accent: "#14b8a6",
+		background: "#fdf4ff",
+		foreground: "#4a044e",
+		surface: "#ffffff",
+		muted: "#a21caf",
+		borderMix: .14,
+		codeMix: .06
+	},
+	{
+		primary: "#713f12",
+		accent: "#eab308",
+		background: "#fefce8",
+		foreground: "#422006",
+		surface: "#ffffff",
+		muted: "#a16207",
+		borderMix: .13,
+		codeMix: .05
+	},
+	{
+		primary: "#1f2937",
+		accent: "#0ea5e9",
+		background: "#f9fafb",
+		foreground: "#111827",
+		surface: "#ffffff",
+		muted: "#4b5563",
+		borderMix: .12,
+		codeMix: .04
+	},
+	{
+		primary: "#27272a",
+		accent: "#a855f7",
+		background: "#fafafa",
+		foreground: "#18181b",
+		surface: "#ffffff",
+		muted: "#52525b",
+		borderMix: .12,
+		codeMix: .04
+	},
+	{
+		primary: "#374151",
+		accent: "#10b981",
+		background: "#f3f4f6",
+		foreground: "#111827",
+		surface: "#ffffff",
+		muted: "#4b5563",
+		borderMix: .12,
+		codeMix: .04
+	},
+	{
+		primary: "#064e3b",
+		accent: "#f59e0b",
+		background: "#f8fafc",
+		foreground: "#022c22",
+		surface: "#ffffff",
+		muted: "#047857",
+		borderMix: .12,
+		codeMix: .05
+	},
+	{
+		primary: "#7f1d1d",
+		accent: "#60a5fa",
+		background: "#fff7ed",
+		foreground: "#450a0a",
+		surface: "#ffffff",
+		muted: "#991b1b",
+		borderMix: .14,
+		codeMix: .06
+	},
+	{
+		primary: "#3730a3",
+		accent: "#34d399",
+		background: "#f8fafc",
+		foreground: "#1e1b4b",
+		surface: "#ffffff",
+		muted: "#4f46e5",
+		borderMix: .12,
+		codeMix: .05
+	},
+	{
+		primary: "#9f1239",
+		accent: "#22c55e",
+		background: "#fff1f2",
+		foreground: "#4c0519",
+		surface: "#ffffff",
+		muted: "#be123c",
+		borderMix: .14,
+		codeMix: .06
+	},
+	{
+		primary: "#134e4a",
+		accent: "#8b5cf6",
+		background: "#f0fdfa",
+		foreground: "#042f2e",
+		surface: "#ffffff",
+		muted: "#0f766e",
+		borderMix: .13,
+		codeMix: .05
+	},
+	{
+		primary: "#1d4ed8",
+		accent: "#dc2626",
+		background: "#f8fafc",
+		foreground: "#0f172a",
+		surface: "#ffffff",
+		muted: "#475569",
+		borderMix: .12,
+		codeMix: .05
+	},
+	{
+		primary: "#6b21a8",
+		accent: "#fbbf24",
+		background: "#faf5ff",
+		foreground: "#2e1065",
+		surface: "#ffffff",
+		muted: "#7e22ce",
+		borderMix: .14,
+		codeMix: .06
+	},
+	{
+		primary: "#155e75",
+		accent: "#84cc16",
+		background: "#f0f9ff",
+		foreground: "#083344",
+		surface: "#ffffff",
+		muted: "#0369a1",
+		borderMix: .13,
+		codeMix: .05
+	},
+	{
+		primary: "#854d0e",
+		accent: "#06b6d4",
+		background: "#fefce8",
+		foreground: "#422006",
+		surface: "#ffffff",
+		muted: "#a16207",
+		borderMix: .13,
+		codeMix: .05
+	},
+	{
+		primary: "#14532d",
+		accent: "#f43f5e",
+		background: "#f0fdf4",
+		foreground: "#052e16",
+		surface: "#ffffff",
+		muted: "#166534",
+		borderMix: .13,
+		codeMix: .05
+	},
+	{
+		primary: "#4c1d95",
+		accent: "#2dd4bf",
+		background: "#f5f3ff",
+		foreground: "#2e1065",
+		surface: "#ffffff",
+		muted: "#6d28d9",
+		borderMix: .14,
+		codeMix: .06
+	},
+	{
+		primary: "#9a3412",
+		accent: "#c084fc",
+		background: "#fff7ed",
+		foreground: "#431407",
+		surface: "#ffffff",
+		muted: "#c2410c",
+		borderMix: .13,
+		codeMix: .05
+	},
+	{
+		primary: "#0c4a6e",
+		accent: "#f472b6",
+		background: "#f0f9ff",
+		foreground: "#082f49",
+		surface: "#ffffff",
+		muted: "#075985",
+		borderMix: .13,
+		codeMix: .05
+	},
+	{
+		primary: "#166534",
+		accent: "#facc15",
+		background: "#f7fee7",
+		foreground: "#052e16",
+		surface: "#ffffff",
+		muted: "#15803d",
+		borderMix: .13,
+		codeMix: .05
+	},
+	{
+		primary: "#be185d",
+		accent: "#38bdf8",
+		background: "#fdf2f8",
+		foreground: "#500724",
+		surface: "#ffffff",
+		muted: "#9d174d",
+		borderMix: .14,
+		codeMix: .06
+	},
+	{
+		primary: "#5b21b6",
+		accent: "#ef4444",
+		background: "#f5f3ff",
+		foreground: "#2e1065",
+		surface: "#ffffff",
+		muted: "#6d28d9",
+		borderMix: .14,
+		codeMix: .06
+	}
+];
+var randomRadiusSets = [
+	{
+		sm: "2px",
+		md: "6px",
+		lg: "10px",
+		xl: "14px"
+	},
+	{
+		sm: "4px",
+		md: "8px",
+		lg: "12px",
+		xl: "16px"
+	},
+	{
+		sm: "6px",
+		md: "10px",
+		lg: "14px",
+		xl: "18px"
+	},
+	{
+		sm: "8px",
+		md: "12px",
+		lg: "18px",
+		xl: "24px"
+	},
+	{
+		sm: "10px",
+		md: "14px",
+		lg: "20px",
+		xl: "28px"
+	},
+	{
+		sm: "12px",
+		md: "16px",
+		lg: "24px",
+		xl: "32px"
+	}
+];
+var randomLayoutWidths = [
+	"72rem",
+	"76rem",
+	"78rem",
+	"80rem",
+	"82rem",
+	"86rem",
+	"90rem",
+	"96rem",
+	"104rem",
+	"112rem",
+	"120rem",
+	"128rem",
+	"144rem"
+];
+function randomItem(items) {
+	return items[Math.floor(Math.random() * items.length)];
+}
+function randomRgbMix(color, alpha) {
+	return `color-mix(in srgb, ${color} ${Math.round(alpha * 100)}%, transparent)`;
+}
+function modeColor(light, dark) {
+	return {
+		light,
+		dark
+	};
+}
+function createRandomTheme() {
+	const palette = randomItem(randomThemePalettes);
+	const radius = randomItem(randomRadiusSets);
+	const maxWidth = randomItem(randomLayoutWidths);
+	return {
+		preset: "default",
+		tokens: {
+			colors: {
+				primary: modeColor(palette.primary, palette.accent),
+				accent: modeColor(palette.accent, palette.primary),
+				background: modeColor(palette.background, "#09090b"),
+				foreground: modeColor(palette.foreground, "#f8fafc"),
+				surface: modeColor(palette.surface, "#18181b"),
+				muted: modeColor(palette.muted, "#a1a1aa"),
+				border: modeColor(randomRgbMix(palette.foreground, palette.borderMix), "rgb(255 255 255 / 0.1)"),
+				codeBackground: modeColor(randomRgbMix(palette.primary, palette.codeMix), "#18181b")
+			},
+			radius: { ...radius }
+		},
+		layout: { maxWidth },
+		editor: false
+	};
+}
+//#endregion
+//#region source/theme/variables.ts
+var clarifyThemePresets = {
+	default: {
+		preset: "default",
+		tokens: {
+			colors: {
+				primary: "#047857",
+				accent: "#0D9488",
+				background: "#ffffff",
+				foreground: "#111827",
+				surface: "#ffffff",
+				muted: "#64748b",
+				border: "rgb(15 23 42 / 0.12)",
+				codeBackground: "#f6fbf8"
+			},
+			radius: {
+				sm: "6px",
+				md: "10px",
+				lg: "14px",
+				xl: "18px"
+			}
+		},
+		layout: { maxWidth: "82rem" },
+		editor: false
+	},
+	base: {
+		preset: "base",
+		tokens: {
+			colors: {
+				primary: "#18181b",
+				accent: "#52525b",
+				background: "#ffffff",
+				foreground: "#18181b",
+				surface: "#ffffff",
+				muted: "#71717a",
+				border: "rgb(24 24 27 / 0.12)",
+				codeBackground: "#f4f4f5"
+			},
+			radius: {
+				sm: "6px",
+				md: "8px",
+				lg: "12px",
+				xl: "16px"
+			}
+		},
+		layout: { maxWidth: "80rem" },
+		editor: false
+	}
+};
+function cloneThemeColorValue(value) {
+	return typeof value === "string" ? value : { ...value };
+}
+function cloneTheme(theme) {
+	return {
+		preset: theme.preset,
+		tokens: {
+			colors: {
+				primary: cloneThemeColorValue(theme.tokens.colors.primary),
+				accent: cloneThemeColorValue(theme.tokens.colors.accent),
+				background: cloneThemeColorValue(theme.tokens.colors.background),
+				foreground: cloneThemeColorValue(theme.tokens.colors.foreground),
+				surface: cloneThemeColorValue(theme.tokens.colors.surface),
+				muted: cloneThemeColorValue(theme.tokens.colors.muted),
+				border: cloneThemeColorValue(theme.tokens.colors.border),
+				codeBackground: cloneThemeColorValue(theme.tokens.colors.codeBackground)
+			},
+			radius: { ...theme.tokens.radius }
+		},
+		layout: { ...theme.layout },
+		editor: theme.editor
+	};
+}
+function isModeColorValue(value) {
+	return typeof value === "object" && value !== null;
+}
+function resolveThemeColorValue(value, resolvedTheme = "light") {
+	if (!isModeColorValue(value)) return value;
+	return value[resolvedTheme] ?? value.light ?? value.dark ?? "";
+}
+function resolveThemeColors(colors, resolvedTheme = "light") {
+	return {
+		primary: resolveThemeColorValue(colors.primary, resolvedTheme),
+		accent: resolveThemeColorValue(colors.accent, resolvedTheme),
+		background: resolveThemeColorValue(colors.background, resolvedTheme),
+		foreground: resolveThemeColorValue(colors.foreground, resolvedTheme),
+		surface: resolveThemeColorValue(colors.surface, resolvedTheme),
+		muted: resolveThemeColorValue(colors.muted, resolvedTheme),
+		border: resolveThemeColorValue(colors.border, resolvedTheme),
+		codeBackground: resolveThemeColorValue(colors.codeBackground, resolvedTheme)
+	};
+}
+function matchesPresetTheme(theme) {
+	const preset = clarifyThemePresets[theme.preset];
+	return JSON.stringify({
+		tokens: theme.tokens,
+		layout: theme.layout
+	}) === JSON.stringify({
+		tokens: preset.tokens,
+		layout: preset.layout
+	});
+}
+function effectiveTheme(theme, resolvedTheme) {
+	if (resolvedTheme !== "dark" || !matchesPresetTheme(theme)) return theme;
+	return {
+		...theme,
+		tokens: {
+			...theme.tokens,
+			colors: {
+				...theme.tokens.colors,
+				background: "#09090b",
+				foreground: "#ffffff",
+				surface: "#18181b",
+				muted: "#a1a1aa",
+				border: "rgb(255 255 255 / 0.1)",
+				codeBackground: "#18181b"
+			}
+		}
+	};
+}
+function themeToCssVariables(theme, resolvedTheme) {
+	const resolved = effectiveTheme(theme, resolvedTheme);
+	const colors = resolveThemeColors(resolved.tokens.colors, resolvedTheme);
+	const { radius } = resolved.tokens;
+	return {
+		"--clarify-theme-tokens-colors-primary": colors.primary,
+		"--clarify-theme-tokens-colors-accent": colors.accent,
+		"--clarify-theme-tokens-colors-background": colors.background,
+		"--clarify-theme-tokens-colors-foreground": colors.foreground,
+		"--clarify-theme-tokens-colors-surface": colors.surface,
+		"--clarify-theme-tokens-colors-muted": colors.muted,
+		"--clarify-theme-tokens-colors-border": colors.border,
+		"--clarify-theme-tokens-colors-code-background": colors.codeBackground,
+		"--clarify-theme-tokens-radius-sm": radius.sm,
+		"--clarify-theme-tokens-radius-md": radius.md,
+		"--clarify-theme-tokens-radius-lg": radius.lg,
+		"--clarify-theme-tokens-radius-xl": radius.xl,
+		"--clarify-theme-layout-max-width": resolved.layout.maxWidth
+	};
+}
+function uniqueElements(elements) {
+	return Array.from(new Set(elements));
+}
+function resolveThemeVariableTargets(target) {
+	if (typeof document === "undefined") return [];
+	if (target instanceof HTMLElement) return [target];
+	if (typeof target === "string") return Array.from(document.querySelectorAll(target));
+	return uniqueElements([document.documentElement, ...Array.from(document.querySelectorAll(".clarify-app"))]);
+}
+function applyThemeCssVariables(variables, targets) {
+	const previousValues = /* @__PURE__ */ new Map();
+	for (const element of targets) {
+		const elementPreviousValues = /* @__PURE__ */ new Map();
+		for (const [property, value] of Object.entries(variables)) {
+			elementPreviousValues.set(property, element.style.getPropertyValue(property));
+			element.style.setProperty(property, value);
+		}
+		previousValues.set(element, elementPreviousValues);
+	}
+	return () => {
+		for (const [element, elementPreviousValues] of previousValues) for (const [property, previousValue] of elementPreviousValues) if (previousValue) element.style.setProperty(property, previousValue);
+		else element.style.removeProperty(property);
+	};
+}
+//#endregion
+//#region source/theme/ThemeEditor.tsx
+var colorTokenFields = [
+	{
+		key: "primary",
+		label: "Primary"
+	},
+	{
+		key: "accent",
+		label: "Accent"
+	},
+	{
+		key: "background",
+		label: "Background"
+	},
+	{
+		key: "foreground",
+		label: "Foreground"
+	},
+	{
+		key: "surface",
+		label: "Surface"
+	},
+	{
+		key: "muted",
+		label: "Muted"
+	},
+	{
+		key: "border",
+		label: "Border"
+	},
+	{
+		key: "codeBackground",
+		label: "Code background"
+	}
+];
+var radiusTokenFields = [
+	{
+		key: "sm",
+		label: "Small"
+	},
+	{
+		key: "md",
+		label: "Medium"
+	},
+	{
+		key: "lg",
+		label: "Large"
+	},
+	{
+		key: "xl",
+		label: "Extra large"
+	}
+];
+var layoutFields = [{
+	key: "maxWidth",
+	label: "Max width"
+}];
+var clarifyThemeEditorPresets = clarifyThemePresets;
+function applyClarifyThemeVariables(theme, target) {
+	return applyThemeCssVariables(themeToCssVariables(theme), resolveThemeVariableTargets(target));
+}
+function isHexColor(value) {
+	return /^#[0-9a-f]{6}$/i.test(value);
+}
+function updateThemeModeColorValue(value, resolvedTheme, nextValue) {
+	if (typeof value === "string") return nextValue;
+	return {
+		...value,
+		[resolvedTheme]: nextValue
+	};
+}
+function TextField(props) {
+	const { id, label, value, onChange, withColorInput = false } = props;
+	const canUseColorInput = withColorInput && isHexColor(value);
+	function handleTextChange(event) {
+		onChange(event.target.value);
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+		htmlFor: id,
+		className: "grid min-w-0 gap-1.5 text-xs/5 font-medium text-(--clarify-ui-text)",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "flex min-w-0 items-center justify-between gap-3",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "truncate",
+				children: label
+			}), canUseColorInput ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				type: "color",
+				value,
+				"aria-label": `${label} color`,
+				className: "h-5 w-8 shrink-0 cursor-pointer rounded border border-(--clarify-theme-tokens-colors-border) bg-transparent p-0",
+				onChange: handleTextChange
+			}) : null]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			id,
+			value,
+			spellCheck: false,
+			className: "h-9 w-full min-w-0 rounded-(--clarify-theme-tokens-radius-md) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-background) px-2.5 font-mono text-xs text-(--clarify-theme-tokens-colors-foreground) shadow-xs outline-none transition focus:border-(--clarify-theme-tokens-colors-primary) focus:ring-2 focus:ring-(--clarify-ui-accent-border)",
+			onChange: handleTextChange
+		})]
+	});
+}
+function themeToConfigSource(theme) {
+	return JSON.stringify({ theme: {
+		preset: theme.preset,
+		tokens: theme.tokens,
+		layout: theme.layout
+	} }, null, 2);
+}
+function ThemeEditor(props) {
+	const { initialTheme, onChange, target, defaultOpen = false, className } = props;
+	const { resolvedTheme } = require_shell.useTheme();
+	const [isOpen, setIsOpen] = (0, react.useState)(defaultOpen);
+	const [theme, setTheme] = (0, react.useState)(() => cloneTheme(initialTheme ?? clarifyThemeEditorPresets.default));
+	const [copyState, setCopyState] = (0, react.useState)("idle");
+	const configSource = (0, react.useMemo)(() => themeToConfigSource(theme), [theme]);
+	(0, react.useEffect)(() => applyThemeCssVariables(themeToCssVariables(theme, resolvedTheme), resolveThemeVariableTargets(target)), [
+		resolvedTheme,
+		target,
+		theme
+	]);
+	function commit(nextTheme) {
+		setTheme(nextTheme);
+		onChange?.(nextTheme);
+	}
+	function updatePreset(nextPreset) {
+		commit(cloneTheme(clarifyThemeEditorPresets[nextPreset]));
+	}
+	function updateColorToken(key, value) {
+		commit({
+			...theme,
+			tokens: {
+				...theme.tokens,
+				colors: {
+					...theme.tokens.colors,
+					[key]: updateThemeModeColorValue(theme.tokens.colors[key], resolvedTheme, value)
+				}
+			}
+		});
+	}
+	function updateRadiusToken(key, value) {
+		commit({
+			...theme,
+			tokens: {
+				...theme.tokens,
+				radius: {
+					...theme.tokens.radius,
+					[key]: value
+				}
+			}
+		});
+	}
+	function updateLayoutToken(key, value) {
+		commit({
+			...theme,
+			layout: {
+				...theme.layout,
+				[key]: value
+			}
+		});
+	}
+	async function copyConfig() {
+		try {
+			await navigator.clipboard.writeText(configSource);
+			setCopyState("copied");
+			window.setTimeout(() => setCopyState("idle"), 1400);
+		} catch {
+			setCopyState("failed");
+			window.setTimeout(() => setCopyState("idle"), 1400);
+		}
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, clsx.default)("clarify-theme-editor fixed right-4 bottom-4 z-50 text-(--clarify-theme-tokens-colors-foreground)", className),
+		children: [isOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+			className: "mb-3 flex max-h-(--clarify-theme-editor-panel-max-height) w-(--clarify-theme-editor-width) flex-col overflow-hidden rounded-md border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface)/95 shadow-2xl shadow-zinc-900/15 backdrop-blur",
+			"aria-label": "Clarify theme editor",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
+					className: "shrink-0 flex items-start justify-between gap-4 border-b border-(--clarify-theme-tokens-colors-border) px-4 py-3",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+						className: "text-sm/6 font-semibold text-(--clarify-theme-tokens-colors-foreground)",
+						children: "Theme editor"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "mt-0.5 text-xs/5 text-(--clarify-ui-text-soft)",
+						children: "Live CSS variable preview for Clarify theme tokens."
+					})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "-mr-1 flex size-8 items-center justify-center rounded-(--clarify-theme-tokens-radius-md) text-(--clarify-ui-text-soft) transition hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-ui-text-strong)",
+						"aria-label": "Close theme editor",
+						onClick: () => setIsOpen(false),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { className: "size-4 stroke-current stroke-2" })
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "min-h-0 flex-1 overflow-y-auto px-4 py-4",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "grid gap-5",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+								htmlFor: "clarify-theme-editor-preset",
+								className: "grid gap-1.5 text-xs/5 font-medium text-(--clarify-ui-text)",
+								children: ["Preset", /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: "relative block",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+										id: "clarify-theme-editor-preset",
+										value: theme.preset,
+										className: "h-9 w-full appearance-none rounded-(--clarify-theme-tokens-radius-md) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-background) px-2.5 pr-9 text-sm text-(--clarify-theme-tokens-colors-foreground) shadow-xs outline-none transition focus:border-(--clarify-theme-tokens-colors-primary) focus:ring-2 focus:ring-(--clarify-ui-accent-border)",
+										onChange: (event) => updatePreset(event.target.value),
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+											value: "default",
+											children: "default"
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+											value: "base",
+											children: "base"
+										})]
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: "pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2 stroke-current stroke-2 text-(--clarify-ui-text-faint)" })]
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("fieldset", {
+								className: "grid gap-3",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("legend", {
+									className: "mb-2 text-xs/5 font-semibold uppercase tracking-wide text-(--clarify-ui-text-faint)",
+									children: "Colors"
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "grid grid-cols-1 gap-3",
+									children: colorTokenFields.map((field) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextField, {
+										id: `clarify-theme-editor-color-${field.key}`,
+										label: field.label,
+										value: resolveThemeColorValue(theme.tokens.colors[field.key], resolvedTheme),
+										withColorInput: true,
+										onChange: (value) => updateColorToken(field.key, value)
+									}, field.key))
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("fieldset", {
+								className: "grid gap-3",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("legend", {
+									className: "mb-2 text-xs/5 font-semibold uppercase tracking-wide text-(--clarify-ui-text-faint)",
+									children: "Radius"
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "grid grid-cols-2 gap-3",
+									children: radiusTokenFields.map((field) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextField, {
+										id: `clarify-theme-editor-radius-${field.key}`,
+										label: field.label,
+										value: theme.tokens.radius[field.key],
+										onChange: (value) => updateRadiusToken(field.key, value)
+									}, field.key))
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("fieldset", {
+								className: "grid gap-3",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("legend", {
+									className: "mb-2 text-xs/5 font-semibold uppercase tracking-wide text-(--clarify-ui-text-faint)",
+									children: "Layout"
+								}), layoutFields.map((field) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextField, {
+									id: `clarify-theme-editor-layout-${field.key}`,
+									label: field.label,
+									value: theme.layout[field.key],
+									onChange: (value) => updateLayoutToken(field.key, value)
+								}, field.key))]
+							})
+						]
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("footer", {
+					className: "shrink-0 flex items-center justify-between gap-3 border-t border-(--clarify-theme-tokens-colors-border) bg-(--clarify-ui-subtle-background) px-4 py-3",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex items-center gap-1.5",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "rounded-(--clarify-theme-tokens-radius-md) px-2.5 py-1.5 text-xs/5 font-semibold text-(--clarify-ui-text) transition hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-ui-text-strong)",
+							onClick: () => updatePreset(theme.preset),
+							children: "Reset preset"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+							type: "button",
+							className: "inline-flex items-center gap-1.5 rounded-(--clarify-theme-tokens-radius-md) px-2.5 py-1.5 text-xs/5 font-semibold text-(--clarify-ui-text) transition hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-ui-text-strong)",
+							onClick: () => commit(createRandomTheme()),
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.WandSparkles, { className: "size-3.5 stroke-current stroke-2" }), "Random"]
+						})]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "rounded-(--clarify-theme-tokens-radius-md) bg-(--clarify-theme-tokens-colors-primary) px-3 py-1.5 text-xs/5 font-semibold text-white shadow-xs transition hover:opacity-90",
+						onClick: copyConfig,
+						children: copyState === "copied" ? "Copied" : copyState === "failed" ? "Copy failed" : "Copy config"
+					})]
+				})
+			]
+		}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			className: "ml-auto flex size-12 items-center justify-center rounded-full border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface)/95 text-(--clarify-theme-tokens-colors-primary) shadow-xl shadow-zinc-900/15 backdrop-blur transition hover:scale-105 hover:bg-(--clarify-ui-accent-background) focus:outline-none focus:ring-2 focus:ring-(--clarify-ui-accent-border)",
+			"aria-label": isOpen ? "Close Clarify theme editor" : "Open Clarify theme editor",
+			"aria-expanded": isOpen,
+			onClick: () => setIsOpen((value) => !value),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Settings, { className: "size-5 stroke-current stroke-2" })
+		})]
+	});
+}
+//#endregion
+//#region source/theme/ThemeRoot.tsx
+function ThemeRoot(props) {
+	const { children, theme, themeEditor = false } = props;
+	const { resolvedTheme } = require_shell.useTheme();
+	const themeVariables = (0, react.useMemo)(() => themeToCssVariables(theme, resolvedTheme), [resolvedTheme, theme]);
+	(0, react.useEffect)(() => applyThemeCssVariables(themeVariables, resolveThemeVariableTargets(":root")), [themeVariables]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "clarify-app h-full min-h-screen bg-(--clarify-theme-tokens-colors-background) text-(--clarify-theme-tokens-colors-foreground)",
+		"data-theme-preset": theme.preset,
+		style: themeVariables,
+		children: [children, themeEditor ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThemeEditor, { initialTheme: theme }) : null]
+	});
+}
+//#endregion
+Object.defineProperty(exports, "AppShell", {
+	enumerable: true,
+	get: function() {
+		return AppShell;
+	}
+});
+Object.defineProperty(exports, "BuiltWithClarify", {
+	enumerable: true,
+	get: function() {
+		return BuiltWithClarify;
+	}
+});
+Object.defineProperty(exports, "PageFooter", {
+	enumerable: true,
+	get: function() {
+		return PageFooter;
+	}
+});
+Object.defineProperty(exports, "ThemeEditor", {
+	enumerable: true,
+	get: function() {
+		return ThemeEditor;
+	}
+});
+Object.defineProperty(exports, "ThemeRoot", {
+	enumerable: true,
+	get: function() {
+		return ThemeRoot;
+	}
+});
+Object.defineProperty(exports, "applyClarifyThemeVariables", {
+	enumerable: true,
+	get: function() {
+		return applyClarifyThemeVariables;
+	}
+});
+Object.defineProperty(exports, "clarifyThemeEditorPresets", {
+	enumerable: true,
+	get: function() {
+		return clarifyThemeEditorPresets;
+	}
+});
+
+//# sourceMappingURL=ThemeRoot-BhP5M3Hd.cjs.map