@clarify-labs/renderer 0.9.1 → 0.9.2

package/output/{ClarifyShell-DJ4fOVOd.cjs → ClarifyShell-DdYRgrfY.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-B08cDCzq.cjs");
 let clsx = require("clsx");
 clsx = require_chunk.__toESM(clsx, 1);
 let react = require("react");
@@ -715,7 +715,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 +732,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 +752,6 @@ function useStoredLocaleRedirect(arg0) {
 		pathname,
 		storedLocale
 	]);
-}
-function useRouteScroll(location) {
 	(0, react.useEffect)(() => {
 		if (location.hash) {
 			scrollToHash(location.hash);
@@ -770,40 +766,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 +850,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 +865,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 +885,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 +900,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 +954,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 +983,7 @@ function AppShell(arg0) {
 			route: currentRoute,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_PageActions.SectionProvider, {
 				sections,
-				headerRef,
+				headerTopAreaRef,
 				children: [renderHeader(), renderLayout()]
 			})
 		})
@@ -2032,10 +2040,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 +2100,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 +2393,4 @@ Object.defineProperty(exports, "useSlot", {
 	}
 });
 
-//# sourceMappingURL=ClarifyShell-DJ4fOVOd.cjs.map
+//# sourceMappingURL=ClarifyShell-DdYRgrfY.cjs.map