@clarify-labs/renderer 0.9.1 → 0.9.2

package/output/{ClarifyShell-291_IXxJ.js → ClarifyShell-C38EkErX.js}

@@ -1,4 +1,4 @@
-import { A as LocaleContext, C as themeCookieName, D as copyTextToClipboard, M as useConfig, N as useLocale, O as useBuiltInText, T as localizeHref, _ as getStoredLocalePreference, a as safeDecodeURIComponent, d as isSameRoutePath, f as normalizeRoutePath, g as useTheme, h as ThemeProvider, i as Navigation, j as OpenApisContext, k as ConfigContext, o as SectionProvider, p as resolveLocalizedText, r as Header, t as PageActionsProvider, w as isExternalHref, x as storeLocalePreference } from "./PageActions-DaXQgMYP.js";
+import { A as LocaleContext, C as themeCookieName, D as copyTextToClipboard, M as useConfig, N as useLocale, O as useBuiltInText, T as localizeHref, _ as getStoredLocalePreference, a as safeDecodeURIComponent, d as isSameRoutePath, f as normalizeRoutePath, g as useTheme, h as ThemeProvider, i as Navigation, j as OpenApisContext, k as ConfigContext, o as SectionProvider, p as resolveLocalizedText, r as Header, t as PageActionsProvider, w as isExternalHref, x as storeLocalePreference } from "./PageActions-tmnpzi23.js";
 import clsx from "clsx";
 import { Component, Suspense, createContext, lazy, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Link, Route, Routes, useLocation, useNavigate } from "react-router-dom";
@@ -713,7 +713,7 @@ function emptySubscribe() {
 	return () => {};
 }
 function useStoredBannerDismissed(storageKey) {
-	return useSyncExternalStore(emptySubscribe, () => Boolean(storageKey && window.localStorage.getItem(storageKey) === "1"), () => false);
+	return useSyncExternalStore(emptySubscribe, () => Boolean(storageKey && window.localStorage.getItem(storageKey) === "1"), () => true);
 }
 function useBannerState(config, currentLocale) {
 	const banner = config.banner;
@@ -730,13 +730,11 @@ function useBannerState(config, currentLocale) {
 		dismissBanner: () => setDismissedBannerKey(activeBannerKey)
 	};
 }
-function useStoredLocalePreference(explicitLocale) {
+function useAppShellNavigationEffects(arg0) {
+	const { config, currentRoute, explicitLocale, location, navigate, pathname, storedLocale } = arg0;
 	useEffect(() => {
 		if (explicitLocale) storeLocalePreference(explicitLocale);
 	}, [explicitLocale]);
-}
-function useStoredLocaleRedirect(arg0) {
-	const { config, currentRoute, explicitLocale, location, navigate, pathname, storedLocale } = arg0;
 	useEffect(() => {
 		if (explicitLocale || !storedLocale || isDefaultLocale(config, storedLocale)) return;
 		const localizedPath = currentRoute?.alternates?.[storedLocale];
@@ -752,8 +750,6 @@ function useStoredLocaleRedirect(arg0) {
 		pathname,
 		storedLocale
 	]);
-}
-function useRouteScroll(location) {
 	useEffect(() => {
 		if (location.hash) {
 			scrollToHash(location.hash);
@@ -768,40 +764,48 @@ function useRouteScroll(location) {
 		});
 	}, [location.hash, location.pathname]);
 }
-function useDocumentLanguage(currentLocale, currentLocaleConfig) {
+function useAppShellDocumentEffects(arg0) {
+	const { currentLocale, currentLocaleConfig, config, route } = arg0;
 	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) {
 	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 clsx(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 clsx(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 = useBuiltInText();
@@ -844,13 +848,13 @@ function AppShell(arg0) {
 	const navigate = useNavigate();
 	const pathname = normalizeRoutePath(location.pathname);
 	const headerRef = useRef(null);
+	const headerTopAreaRef = useRef(null);
 	const { currentRoute, explicitLocale, storedLocale, currentLocale, currentLocaleConfig, notFoundRoute, currentNavigation, sections } = useRouteState(config, routes, navigation, pathname);
 	const text = 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,
@@ -859,10 +863,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__ */ jsx(BannerSlot, {
 			activeBannerKey,
@@ -876,6 +883,7 @@ function AppShell(arg0) {
 	function renderHeader() {
 		return /* @__PURE__ */ jsx(Header, {
 			ref: headerRef,
+			topAreaRef: headerTopAreaRef,
 			config,
 			navigation: currentNavigation.items,
 			tabs: currentNavigation.tabs,
@@ -890,7 +898,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__ */ jsx("div", {
-				className: sidebarScrollClassName(hasTabs, hasBanner),
+				className: clsx("clarify-sidebar-scroll lg:sticky lg:z-30 lg:overflow-y-auto lg:pb-8", layoutConfig.sidebarScrollClassName),
 				children: /* @__PURE__ */ jsx(Navigation, { navigation: currentNavigation.items })
 			})
 		});
@@ -944,7 +952,7 @@ function AppShell(arg0) {
 	}
 	function renderContent() {
 		return /* @__PURE__ */ jsx("div", {
-			className: contentClassName(hasTabs, hasBanner),
+			className: clsx("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__ */ jsxs(PageActionsProvider, {
 				route: currentRoute,
 				routePrefix: config.routePrefix,
@@ -973,7 +981,7 @@ function AppShell(arg0) {
 			route: currentRoute,
 			children: /* @__PURE__ */ jsxs(SectionProvider, {
 				sections,
-				headerRef,
+				headerTopAreaRef,
 				children: [renderHeader(), renderLayout()]
 			})
 		})
@@ -2030,10 +2038,8 @@ function themeToConfigSource(theme) {
 		layout: theme.layout
 	} }, null, 2);
 }
-function ThemeEditor(props) {
-	const { initialTheme, onChange, target, defaultOpen = false, className } = props;
-	const { resolvedTheme } = useTheme();
-	const [isOpen, setIsOpen] = useState(defaultOpen);
+function useThemeEditorState(arg0) {
+	const { initialTheme, onChange, target, resolvedTheme } = arg0;
 	const [theme, setTheme] = useState(() => cloneTheme(initialTheme ?? themeEditorPresets.default));
 	const [copyState, setCopyState] = useState("idle");
 	const configSource = useMemo(() => themeToConfigSource(theme), [theme]);
@@ -2092,122 +2098,156 @@ function ThemeEditor(props) {
 			window.setTimeout(() => setCopyState("idle"), 1400);
 		}
 	}
-	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("clarify-theme-editor fixed right-4 bottom-4 z-50 text-(--clarify-theme-tokens-colors-foreground)", className),
-		children: [isOpen ? /* @__PURE__ */ jsxs("section", {
+	return {
+		theme,
+		copyState,
+		commit,
+		updatePreset,
+		updateColorToken,
+		updateRadiusToken,
+		updateLayoutToken,
+		copyConfig
+	};
+}
+function ThemeEditor(props) {
+	const { initialTheme, onChange, target, defaultOpen = false, className } = props;
+	const { resolvedTheme } = useTheme();
+	const [isOpen, setIsOpen] = useState(defaultOpen);
+	const { theme, copyState, commit, updatePreset, updateColorToken, updateRadiusToken, updateLayoutToken, copyConfig } = useThemeEditorState({
+		initialTheme,
+		onChange,
+		target,
+		resolvedTheme
+	});
+	function renderPanelHeader() {
+		return /* @__PURE__ */ 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__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h2", {
+				className: "text-sm/6 font-semibold text-(--clarify-theme-tokens-colors-foreground)",
+				children: "Theme editor"
+			}), /* @__PURE__ */ jsx("p", {
+				className: "mt-0.5 text-xs/5 text-(--clarify-ui-text-soft)",
+				children: "Live CSS variable preview for Clarify theme tokens."
+			})] }), /* @__PURE__ */ 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__ */ jsx(X, { className: "size-4 stroke-current stroke-2" })
+			})]
+		});
+	}
+	function renderPanelBody() {
+		return /* @__PURE__ */ jsx("div", {
+			className: "min-h-0 flex-1 overflow-y-auto px-4 py-4",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "grid gap-5",
+				children: [
+					/* @__PURE__ */ jsxs("label", {
+						htmlFor: "clarify-theme-editor-preset",
+						className: "grid gap-1.5 text-xs/5 font-medium text-(--clarify-ui-text)",
+						children: ["Preset", /* @__PURE__ */ jsxs("span", {
+							className: "relative block",
+							children: [/* @__PURE__ */ 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__ */ jsx("option", {
+									value: "default",
+									children: "default"
+								}), /* @__PURE__ */ jsx("option", {
+									value: "base",
+									children: "base"
+								})]
+							}), /* @__PURE__ */ jsx(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__ */ jsxs("fieldset", {
+						className: "grid gap-3",
+						children: [/* @__PURE__ */ jsx("legend", {
+							className: "mb-2 text-xs/5 font-semibold uppercase tracking-wide text-(--clarify-ui-text-faint)",
+							children: "Colors"
+						}), /* @__PURE__ */ jsx("div", {
+							className: "grid grid-cols-1 gap-3",
+							children: colorTokenFields.map((field) => /* @__PURE__ */ 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__ */ jsxs("fieldset", {
+						className: "grid gap-3",
+						children: [/* @__PURE__ */ jsx("legend", {
+							className: "mb-2 text-xs/5 font-semibold uppercase tracking-wide text-(--clarify-ui-text-faint)",
+							children: "Radius"
+						}), /* @__PURE__ */ jsx("div", {
+							className: "grid grid-cols-2 gap-3",
+							children: radiusTokenFields.map((field) => /* @__PURE__ */ 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__ */ jsxs("fieldset", {
+						className: "grid gap-3",
+						children: [/* @__PURE__ */ jsx("legend", {
+							className: "mb-2 text-xs/5 font-semibold uppercase tracking-wide text-(--clarify-ui-text-faint)",
+							children: "Layout"
+						}), layoutFields.map((field) => /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", {
+				className: "flex items-center gap-1.5",
+				children: [/* @__PURE__ */ 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__ */ 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__ */ jsx(WandSparkles, { className: "size-3.5 stroke-current stroke-2" }), "Random"]
+				})]
+			}), /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h2", {
-						className: "text-sm/6 font-semibold text-(--clarify-theme-tokens-colors-foreground)",
-						children: "Theme editor"
-					}), /* @__PURE__ */ jsx("p", {
-						className: "mt-0.5 text-xs/5 text-(--clarify-ui-text-soft)",
-						children: "Live CSS variable preview for Clarify theme tokens."
-					})] }), /* @__PURE__ */ 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__ */ jsx(X, { className: "size-4 stroke-current stroke-2" })
-					})]
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: "min-h-0 flex-1 overflow-y-auto px-4 py-4",
-					children: /* @__PURE__ */ jsxs("div", {
-						className: "grid gap-5",
-						children: [
-							/* @__PURE__ */ jsxs("label", {
-								htmlFor: "clarify-theme-editor-preset",
-								className: "grid gap-1.5 text-xs/5 font-medium text-(--clarify-ui-text)",
-								children: ["Preset", /* @__PURE__ */ jsxs("span", {
-									className: "relative block",
-									children: [/* @__PURE__ */ 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__ */ jsx("option", {
-											value: "default",
-											children: "default"
-										}), /* @__PURE__ */ jsx("option", {
-											value: "base",
-											children: "base"
-										})]
-									}), /* @__PURE__ */ jsx(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__ */ jsxs("fieldset", {
-								className: "grid gap-3",
-								children: [/* @__PURE__ */ jsx("legend", {
-									className: "mb-2 text-xs/5 font-semibold uppercase tracking-wide text-(--clarify-ui-text-faint)",
-									children: "Colors"
-								}), /* @__PURE__ */ jsx("div", {
-									className: "grid grid-cols-1 gap-3",
-									children: colorTokenFields.map((field) => /* @__PURE__ */ 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__ */ jsxs("fieldset", {
-								className: "grid gap-3",
-								children: [/* @__PURE__ */ jsx("legend", {
-									className: "mb-2 text-xs/5 font-semibold uppercase tracking-wide text-(--clarify-ui-text-faint)",
-									children: "Radius"
-								}), /* @__PURE__ */ jsx("div", {
-									className: "grid grid-cols-2 gap-3",
-									children: radiusTokenFields.map((field) => /* @__PURE__ */ 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__ */ jsxs("fieldset", {
-								className: "grid gap-3",
-								children: [/* @__PURE__ */ jsx("legend", {
-									className: "mb-2 text-xs/5 font-semibold uppercase tracking-wide text-(--clarify-ui-text-faint)",
-									children: "Layout"
-								}), layoutFields.map((field) => /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", {
-						className: "flex items-center gap-1.5",
-						children: [/* @__PURE__ */ 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__ */ 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__ */ jsx(WandSparkles, { className: "size-3.5 stroke-current stroke-2" }), "Random"]
-						})]
-					}), /* @__PURE__ */ 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__ */ jsx("button", {
+		});
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("clarify-theme-editor fixed right-4 bottom-4 z-50 text-(--clarify-theme-tokens-colors-foreground)", className),
+		children: [renderEditorPanel(), /* @__PURE__ */ 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",
@@ -2262,4 +2302,4 @@ function ClarifyShell(props) {
 //#endregion
 export { themeBootstrapScript as a, AppShell as c, BuiltWithClarify as d, RuntimeSlot as f, useSlot as h, themeEditorPresets as i, PageFooter as l, SlotProvider as m, ThemeEditor as n, themePresets as o, RuntimeSlotsProvider as p, applyThemeVariables as r, themeStorageKey as s, ClarifyShell as t, PageBanner as u };
 
-//# sourceMappingURL=ClarifyShell-291_IXxJ.js.map
+//# sourceMappingURL=ClarifyShell-C38EkErX.js.map