@clarify-labs/renderer 0.9.1 → 0.9.3

package/output/{ClarifyShell-DJ4fOVOd.cjs → ClarifyShell-Dm--LZco.cjs}

@@ -1,5 +1,5 @@
 const require_chunk = require("./chunk-DakpK96I.cjs");
-const require_PageActions = require("./PageActions-GI1t-JrR.cjs");
+const require_PageActions = require("./PageActions-DEuFHgyB.cjs");
 let clsx = require("clsx");
 clsx = require_chunk.__toESM(clsx, 1);
 let react = require("react");
@@ -110,6 +110,15 @@ function LazySlotComponent(props) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {});
 }
 //#endregion
+//#region source/utils/hash.ts
+function safeDecodeURIComponent(value) {
+	try {
+		return decodeURIComponent(value);
+	} catch {
+		return value;
+	}
+}
+//#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
@@ -621,12 +630,25 @@ function resolveRouteComponent(route) {
 }
 function scrollToHash(hash) {
 	if (!hash) return;
-	const targetId = require_PageActions.safeDecodeURIComponent(hash.slice(1));
-	window.requestAnimationFrame(() => {
-		document.getElementById(targetId)?.scrollIntoView();
+	const targetId = safeDecodeURIComponent(hash.slice(1));
+	const tryScrollToTarget = (attempt = 0) => {
+		const target = document.getElementById(targetId);
+		if (!target) {
+			if (attempt < 12) window.requestAnimationFrame(() => {
+				tryScrollToTarget(attempt + 1);
+			});
+			return;
+		}
+		target.scrollIntoView({
+			behavior: "smooth",
+			block: "start"
+		});
 		window.requestAnimationFrame(() => {
 			window.dispatchEvent(new Event("scroll"));
 		});
+	};
+	window.requestAnimationFrame(() => {
+		tryScrollToTarget();
 	});
 }
 function explicitLocaleForPath(config, pathname) {
@@ -715,7 +737,7 @@ function emptySubscribe() {
 	return () => {};
 }
 function useStoredBannerDismissed(storageKey) {
-	return (0, react.useSyncExternalStore)(emptySubscribe, () => Boolean(storageKey && window.localStorage.getItem(storageKey) === "1"), () => false);
+	return (0, react.useSyncExternalStore)(emptySubscribe, () => Boolean(storageKey && window.localStorage.getItem(storageKey) === "1"), () => true);
 }
 function useBannerState(config, currentLocale) {
 	const banner = config.banner;
@@ -732,13 +754,11 @@ function useBannerState(config, currentLocale) {
 		dismissBanner: () => setDismissedBannerKey(activeBannerKey)
 	};
 }
-function useStoredLocalePreference(explicitLocale) {
+function useAppShellNavigationEffects(arg0) {
+	const { config, currentRoute, explicitLocale, location, navigate, pathname, storedLocale } = arg0;
 	(0, react.useEffect)(() => {
 		if (explicitLocale) require_PageActions.storeLocalePreference(explicitLocale);
 	}, [explicitLocale]);
-}
-function useStoredLocaleRedirect(arg0) {
-	const { config, currentRoute, explicitLocale, location, navigate, pathname, storedLocale } = arg0;
 	(0, react.useEffect)(() => {
 		if (explicitLocale || !storedLocale || isDefaultLocale(config, storedLocale)) return;
 		const localizedPath = currentRoute?.alternates?.[storedLocale];
@@ -754,8 +774,6 @@ function useStoredLocaleRedirect(arg0) {
 		pathname,
 		storedLocale
 	]);
-}
-function useRouteScroll(location) {
 	(0, react.useEffect)(() => {
 		if (location.hash) {
 			scrollToHash(location.hash);
@@ -770,40 +788,48 @@ function useRouteScroll(location) {
 		});
 	}, [location.hash, location.pathname]);
 }
-function useDocumentLanguage(currentLocale, currentLocaleConfig) {
+function useAppShellDocumentEffects(arg0) {
+	const { currentLocale, currentLocaleConfig, config, route } = arg0;
 	(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]);
-}
-function useDocumentMetadata(config, route) {
 	(0, react.useEffect)(() => {
 		applyDocumentMetadata(config, route);
 	}, [config, route]);
 }
-function headerOffsetForLayout(hasTabs, hasBanner) {
-	if (hasTabs && hasBanner) return "10rem";
-	if (hasTabs) return "7rem";
-	if (hasBanner) return "6.5rem";
-	return "3.5rem";
-}
-function sidebarScrollClassName(hasTabs, hasBanner) {
-	const classNames = ["clarify-sidebar-scroll lg:sticky lg:z-30 lg:overflow-y-auto lg:pb-8"];
-	if (hasTabs && hasBanner) classNames.push("lg:top-40 lg:h-(--clarify-sidebar-height-with-tabs-and-banner) lg:pt-10");
-	else if (hasTabs) classNames.push("lg:top-28 lg:h-(--clarify-sidebar-height-with-tabs) lg:pt-10");
-	else if (hasBanner) classNames.push("lg:top-26 lg:h-(--clarify-sidebar-height-with-banner) lg:pt-10");
-	else classNames.push("lg:top-14 lg:h-(--clarify-sidebar-height) lg:pt-10");
-	return (0, clsx.default)(classNames);
-}
-function contentClassName(hasTabs, hasBanner) {
-	const classNames = ["clarify-content @container relative flex min-h-screen min-w-0 flex-col px-4 pb-12 sm:px-6 lg:px-8 xl:px-10"];
-	if (hasTabs && hasBanner) classNames.push("pt-26 lg:pt-40");
-	else if (hasTabs) classNames.push("pt-14 lg:pt-28");
-	else if (hasBanner) classNames.push("pt-26");
-	else classNames.push("pt-14");
-	return (0, clsx.default)(classNames);
+var appShellLayoutConfig = {
+	base: {
+		headerOffset: "3.5rem",
+		sidebarScrollClassName: "lg:top-14 lg:h-(--clarify-sidebar-height) lg:pt-10",
+		contentClassName: "pt-14"
+	},
+	banner: {
+		headerOffset: "6.5rem",
+		sidebarScrollClassName: "lg:top-26 lg:h-(--clarify-sidebar-height-with-banner) lg:pt-10",
+		contentClassName: "pt-26"
+	},
+	tabs: {
+		headerOffset: "7rem",
+		sidebarScrollClassName: "lg:top-28 lg:h-(--clarify-sidebar-height-with-tabs) lg:pt-10",
+		contentClassName: "pt-14 lg:pt-28"
+	},
+	"tabs-banner": {
+		headerOffset: "10rem",
+		sidebarScrollClassName: "lg:top-40 lg:h-(--clarify-sidebar-height-with-tabs-and-banner) lg:pt-10",
+		contentClassName: "pt-26 lg:pt-40"
+	}
+};
+function getLayoutVariant(hasTabs, hasBanner) {
+	if (hasTabs && hasBanner) return "tabs-banner";
+	if (hasTabs) return "tabs";
+	if (hasBanner) return "banner";
+	return "base";
+}
+function getAppShellLayoutConfig(hasTabs, hasBanner) {
+	return appShellLayoutConfig[getLayoutVariant(hasTabs, hasBanner)];
 }
 function BuiltInNotFoundPage() {
 	const text = require_PageActions.useBuiltInText();
@@ -846,13 +872,13 @@ function AppShell(arg0) {
 	const navigate = (0, react_router_dom.useNavigate)();
 	const pathname = require_PageActions.normalizeRoutePath(location.pathname);
 	const headerRef = (0, react.useRef)(null);
+	const headerTopAreaRef = (0, react.useRef)(null);
 	const { currentRoute, explicitLocale, storedLocale, currentLocale, currentLocaleConfig, notFoundRoute, currentNavigation, sections } = useRouteState(config, routes, navigation, pathname);
 	const text = require_PageActions.useBuiltInText(currentLocale);
 	const { activeBannerKey, bannerResolved, dismissedBannerKey, hasBanner, dismissBanner } = useBannerState(config, currentLocale);
-	const hasTabs = Boolean(currentNavigation.tabs?.length);
+	const layoutConfig = getAppShellLayoutConfig(Boolean(currentNavigation.tabs?.length), hasBanner);
 	const { renderRoutes, NotFoundRouteComponent } = useRenderedRoutes(routes, notFoundRoute);
-	useStoredLocalePreference(explicitLocale);
-	useStoredLocaleRedirect({
+	useAppShellNavigationEffects({
 		config,
 		currentRoute,
 		explicitLocale,
@@ -861,10 +887,13 @@ function AppShell(arg0) {
 		pathname,
 		storedLocale
 	});
-	useRouteScroll(location);
-	useDocumentLanguage(currentLocale, currentLocaleConfig);
-	useDocumentMetadata(config, currentRoute ?? notFoundRoute);
-	const layoutStyle = { "--clarify-header-offset": headerOffsetForLayout(hasTabs, hasBanner) };
+	useAppShellDocumentEffects({
+		currentLocale,
+		currentLocaleConfig,
+		config,
+		route: currentRoute ?? notFoundRoute
+	});
+	const layoutStyle = { "--clarify-header-offset": layoutConfig.headerOffset };
 	function renderBannerSlot() {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BannerSlot, {
 			activeBannerKey,
@@ -878,6 +907,7 @@ function AppShell(arg0) {
 	function renderHeader() {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PageActions.Header, {
 			ref: headerRef,
+			topAreaRef: headerTopAreaRef,
 			config,
 			navigation: currentNavigation.items,
 			tabs: currentNavigation.tabs,
@@ -892,7 +922,7 @@ function AppShell(arg0) {
 			"data-pagefind-ignore": true,
 			className: "clarify-sidebar hidden lg:block lg:self-stretch lg:bg-(--clarify-theme-tokens-colors-background) lg:px-5 xl:px-6",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: sidebarScrollClassName(hasTabs, hasBanner),
+				className: (0, clsx.default)("clarify-sidebar-scroll lg:sticky lg:z-30 lg:overflow-y-auto lg:pb-8", layoutConfig.sidebarScrollClassName),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PageActions.Navigation, { navigation: currentNavigation.items })
 			})
 		});
@@ -946,7 +976,7 @@ function AppShell(arg0) {
 	}
 	function renderContent() {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: contentClassName(hasTabs, hasBanner),
+			className: (0, clsx.default)("clarify-content @container relative flex min-h-screen min-w-0 flex-col px-4 pb-12 sm:px-6 lg:px-8 xl:px-10", layoutConfig.contentClassName),
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_PageActions.PageActionsProvider, {
 				route: currentRoute,
 				routePrefix: config.routePrefix,
@@ -975,7 +1005,7 @@ function AppShell(arg0) {
 			route: currentRoute,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_PageActions.SectionProvider, {
 				sections,
-				headerRef,
+				headerTopAreaRef,
 				children: [renderHeader(), renderLayout()]
 			})
 		})
@@ -2032,10 +2062,8 @@ function themeToConfigSource(theme) {
 		layout: theme.layout
 	} }, null, 2);
 }
-function ThemeEditor(props) {
-	const { initialTheme, onChange, target, defaultOpen = false, className } = props;
-	const { resolvedTheme } = require_PageActions.useTheme();
-	const [isOpen, setIsOpen] = (0, react.useState)(defaultOpen);
+function useThemeEditorState(arg0) {
+	const { initialTheme, onChange, target, resolvedTheme } = arg0;
 	const [theme, setTheme] = (0, react.useState)(() => cloneTheme(initialTheme ?? themeEditorPresets.default));
 	const [copyState, setCopyState] = (0, react.useState)("idle");
 	const configSource = (0, react.useMemo)(() => themeToConfigSource(theme), [theme]);
@@ -2094,122 +2122,156 @@ function ThemeEditor(props) {
 			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", {
+	return {
+		theme,
+		copyState,
+		commit,
+		updatePreset,
+		updateColorToken,
+		updateRadiusToken,
+		updateLayoutToken,
+		copyConfig
+	};
+}
+function ThemeEditor(props) {
+	const { initialTheme, onChange, target, defaultOpen = false, className } = props;
+	const { resolvedTheme } = require_PageActions.useTheme();
+	const [isOpen, setIsOpen] = (0, react.useState)(defaultOpen);
+	const { theme, copyState, commit, updatePreset, updateColorToken, updateRadiusToken, updateLayoutToken, copyConfig } = useThemeEditorState({
+		initialTheme,
+		onChange,
+		target,
+		resolvedTheme
+	});
+	function renderPanelHeader() {
+		return /* @__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" })
+			})]
+		});
+	}
+	function renderPanelBody() {
+		return /* @__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)(ColorField, {
+								id: `clarify-theme-editor-color-${field.key}`,
+								label: field.label,
+								value: theme.tokens.colors[field.key],
+								onChange: (mode, value) => updateColorToken(field.key, mode, 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))]
+					})
+				]
+			})
+		});
+	}
+	function renderPanelFooter() {
+		return /* @__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"
+			})]
+		});
+	}
+	function renderEditorPanel() {
+		if (!isOpen) return null;
+		return /* @__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)(ColorField, {
-										id: `clarify-theme-editor-color-${field.key}`,
-										label: field.label,
-										value: theme.tokens.colors[field.key],
-										onChange: (mode, value) => updateColorToken(field.key, mode, 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"
-					})]
-				})
+				renderPanelHeader(),
+				renderPanelBody(),
+				renderPanelFooter()
 			]
-		}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		});
+	}
+	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: [renderEditorPanel(), /* @__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",
@@ -2353,4 +2415,4 @@ Object.defineProperty(exports, "useSlot", {
 	}
 });
 
-//# sourceMappingURL=ClarifyShell-DJ4fOVOd.cjs.map
+//# sourceMappingURL=ClarifyShell-Dm--LZco.cjs.map