@clarify-labs/renderer 0.9.0 → 0.9.2

package/output/{ClarifyShell-BPv2bxI4.js → ClarifyShell-C38EkErX.js}

@@ -1,6 +1,6 @@
-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-BwY7ierv.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, useState } from "react";
+import { Component, Suspense, createContext, lazy, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Link, Route, Routes, useLocation, useNavigate } from "react-router-dom";
 import { ChevronDown, ChevronLeft, ChevronRight, Settings, WandSparkles, X } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -580,9 +580,9 @@ function PageSkeleton() {
 //#endregion
 //#region source/app/AppShell.tsx
 function BannerSlot(props) {
-	const { activeBannerKey, dismissedBannerKey, onDismiss, config, locale } = props;
+	const { activeBannerKey, dismissedBannerKey, bannerResolved, onDismiss, config, locale } = props;
 	function DefaultBannerComponent() {
-		if (!(Boolean(config.banner) && dismissedBannerKey !== activeBannerKey)) return null;
+		if (!(bannerResolved && Boolean(config.banner) && dismissedBannerKey !== activeBannerKey)) return null;
 		return /* @__PURE__ */ jsx(PageBanner, {
 			currentLocale: locale,
 			onDismiss
@@ -683,6 +683,130 @@ function applyDocumentMetadata(config, route) {
 	setNamedMeta("description", route?.description ?? config.description);
 	setNamedMeta("keywords", route?.keywords?.join(", "));
 }
+function useRouteState(config, routes, navigation, pathname) {
+	const currentRoute = routeForPath(routes, pathname);
+	const explicitLocale = explicitLocaleForPath(config, pathname);
+	const storedLocale = storedLocaleForConfig(config);
+	const currentLocale = explicitLocale ?? storedLocale ?? fallbackLocale(config);
+	return {
+		currentRoute,
+		explicitLocale,
+		storedLocale,
+		currentLocale,
+		currentLocaleConfig: config.i18n?.locales.find((locale) => locale.code === currentLocale),
+		notFoundRoute: currentRoute ? void 0 : notFoundRouteForPath(routes, pathname, currentLocale),
+		currentNavigation: navigationForLocale(navigation, currentLocale, pathname),
+		sections: sectionsForRoute(currentRoute)
+	};
+}
+function useRenderedRoutes(routes, notFoundRoute) {
+	const renderRoutes = useMemo(() => routes.map((route) => ({
+		...route,
+		component: resolveRouteComponent(route)
+	})), [routes]);
+	return {
+		renderRoutes,
+		NotFoundRouteComponent: notFoundRoute ? renderRoutes.find((route) => isSameRoutePath(route.path, notFoundRoute.path))?.component : void 0
+	};
+}
+function emptySubscribe() {
+	return () => {};
+}
+function useStoredBannerDismissed(storageKey) {
+	return useSyncExternalStore(emptySubscribe, () => Boolean(storageKey && window.localStorage.getItem(storageKey) === "1"), () => true);
+}
+function useBannerState(config, currentLocale) {
+	const banner = config.banner;
+	const bannerContent = banner ? resolveLocalizedText(banner.content, currentLocale, config.i18n?.defaultLocale) : "";
+	const bannerStorageKey = banner && bannerContent ? `clarify:banner:dismissed:${config.title}:${bannerContent}` : void 0;
+	const storedBannerDismissed = useStoredBannerDismissed(banner?.dismissible ? bannerStorageKey : void 0);
+	const [dismissedBannerKey, setDismissedBannerKey] = useState();
+	const activeBannerKey = banner ? JSON.stringify(banner) : void 0;
+	return {
+		activeBannerKey,
+		bannerResolved: !banner?.dismissible || !storedBannerDismissed,
+		dismissedBannerKey,
+		hasBanner: Boolean(banner && bannerContent) && !storedBannerDismissed && dismissedBannerKey !== activeBannerKey,
+		dismissBanner: () => setDismissedBannerKey(activeBannerKey)
+	};
+}
+function useAppShellNavigationEffects(arg0) {
+	const { config, currentRoute, explicitLocale, location, navigate, pathname, storedLocale } = arg0;
+	useEffect(() => {
+		if (explicitLocale) storeLocalePreference(explicitLocale);
+	}, [explicitLocale]);
+	useEffect(() => {
+		if (explicitLocale || !storedLocale || isDefaultLocale(config, storedLocale)) return;
+		const localizedPath = currentRoute?.alternates?.[storedLocale];
+		if (!localizedPath || isSameRoutePath(localizedPath, pathname)) return;
+		navigate(`${localizedPath}${location.search}${location.hash}`, { replace: true });
+	}, [
+		config,
+		currentRoute,
+		explicitLocale,
+		location.hash,
+		location.search,
+		navigate,
+		pathname,
+		storedLocale
+	]);
+	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]);
+}
+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]);
+	useEffect(() => {
+		applyDocumentMetadata(config, route);
+	}, [config, route]);
+}
+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();
 	return /* @__PURE__ */ jsxs("section", {
@@ -723,68 +847,133 @@ function AppShell(arg0) {
 	const location = useLocation();
 	const navigate = useNavigate();
 	const pathname = normalizeRoutePath(location.pathname);
-	const currentRoute = routeForPath(routes, pathname);
-	const explicitLocale = explicitLocaleForPath(config, pathname);
-	const storedLocale = storedLocaleForConfig(config);
-	const currentLocale = explicitLocale ?? storedLocale ?? fallbackLocale(config);
-	const currentLocaleConfig = config.i18n?.locales.find((locale) => locale.code === currentLocale);
-	const notFoundRoute = currentRoute ? void 0 : notFoundRouteForPath(routes, pathname, currentLocale);
+	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 currentNavigation = navigationForLocale(navigation, currentLocale, pathname);
-	const sections = sectionsForRoute(currentRoute);
-	const [dismissedBannerKey, setDismissedBannerKey] = useState();
-	const activeBannerKey = config.banner ? JSON.stringify(config.banner) : void 0;
-	const hasBanner = Boolean(config.banner) && dismissedBannerKey !== activeBannerKey;
-	const hasTabs = Boolean(currentNavigation.tabs?.length);
-	const renderRoutes = useMemo(() => routes.map((route) => ({
-		...route,
-		component: resolveRouteComponent(route)
-	})), [routes]);
-	const NotFoundRouteComponent = notFoundRoute ? renderRoutes.find((route) => isSameRoutePath(route.path, notFoundRoute.path))?.component : void 0;
-	useEffect(() => {
-		if (explicitLocale) storeLocalePreference(explicitLocale);
-	}, [explicitLocale]);
-	useEffect(() => {
-		if (explicitLocale || !storedLocale || isDefaultLocale(config, storedLocale)) return;
-		const localizedPath = currentRoute?.alternates?.[storedLocale];
-		if (!localizedPath || isSameRoutePath(localizedPath, pathname)) return;
-		navigate(`${localizedPath}${location.search}${location.hash}`, { replace: true });
-	}, [
+	const { activeBannerKey, bannerResolved, dismissedBannerKey, hasBanner, dismissBanner } = useBannerState(config, currentLocale);
+	const layoutConfig = getAppShellLayoutConfig(Boolean(currentNavigation.tabs?.length), hasBanner);
+	const { renderRoutes, NotFoundRouteComponent } = useRenderedRoutes(routes, notFoundRoute);
+	useAppShellNavigationEffects({
 		config,
 		currentRoute,
 		explicitLocale,
-		location.hash,
-		location.search,
+		location,
 		navigate,
 		pathname,
 		storedLocale
-	]);
-	useEffect(() => {
-		if (location.hash) {
-			scrollToHash(location.hash);
-			return;
-		}
-		window.scrollTo({
-			top: 0,
-			left: 0
+	});
+	useAppShellDocumentEffects({
+		currentLocale,
+		currentLocaleConfig,
+		config,
+		route: currentRoute ?? notFoundRoute
+	});
+	const layoutStyle = { "--clarify-header-offset": layoutConfig.headerOffset };
+	function renderBannerSlot() {
+		return /* @__PURE__ */ jsx(BannerSlot, {
+			activeBannerKey,
+			dismissedBannerKey,
+			bannerResolved,
+			onDismiss: dismissBanner,
+			config,
+			locale: currentLocale
 		});
-		window.requestAnimationFrame(() => {
-			window.dispatchEvent(new Event("scroll"));
+	}
+	function renderHeader() {
+		return /* @__PURE__ */ jsx(Header, {
+			ref: headerRef,
+			topAreaRef: headerTopAreaRef,
+			config,
+			navigation: currentNavigation.items,
+			tabs: currentNavigation.tabs,
+			routes,
+			currentLocale,
+			currentRoute,
+			banner: renderBannerSlot()
 		});
-	}, [location.hash, location.pathname]);
-	useEffect(() => {
-		if (!currentLocale) return;
-		document.documentElement.lang = currentLocale;
-		if (currentLocaleConfig?.dir) document.documentElement.dir = currentLocaleConfig.dir;
-		else document.documentElement.removeAttribute("dir");
-	}, [currentLocale, currentLocaleConfig?.dir]);
-	useEffect(() => {
-		applyDocumentMetadata(config, currentRoute ?? notFoundRoute);
-	}, [
-		config,
-		currentRoute,
-		notFoundRoute
-	]);
+	}
+	function renderSidebar() {
+		return /* @__PURE__ */ jsx("aside", {
+			"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: 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 })
+			})
+		});
+	}
+	function renderRouteElements() {
+		return /* @__PURE__ */ jsxs(Routes, { children: [renderRoutes.map((route) => /* @__PURE__ */ jsx(Route, {
+			path: route.path,
+			element: /* @__PURE__ */ jsx(route.component, {})
+		}, route.path)), /* @__PURE__ */ jsx(Route, {
+			path: "*",
+			element: /* @__PURE__ */ jsx(NotFoundRouteElement, { component: NotFoundRouteComponent })
+		})] });
+	}
+	function renderMain() {
+		return /* @__PURE__ */ jsx("main", {
+			className: "clarify-main min-w-0 flex-auto",
+			"data-pagefind-body": true,
+			children: /* @__PURE__ */ 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__ */ jsx(Suspense, {
+					fallback: /* @__PURE__ */ jsx(PageSkeleton, {}),
+					children: renderRouteElements()
+				})
+			}, pathname)
+		});
+	}
+	function renderFooter() {
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(RuntimeSlot, { name: "page.footer.before" }),
+			/* @__PURE__ */ jsx(RuntimeSlot, {
+				name: "page.footer.replace",
+				default: DefaultFooterComponent
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex justify-end",
+				children: /* @__PURE__ */ jsx(BuiltWithClarify, {})
+			})
+		] });
+	}
+	function renderContent() {
+		return /* @__PURE__ */ jsx("div", {
+			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,
+				children: [
+					renderMain(),
+					/* @__PURE__ */ jsx(PageNavigation, {
+						navigation: currentNavigation.items,
+						currentRoute
+					}),
+					renderFooter()
+				]
+			})
+		});
+	}
+	function renderLayout() {
+		return /* @__PURE__ */ jsxs("div", {
+			className: "clarify-layout 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)",
+			style: layoutStyle,
+			children: [renderSidebar(), renderContent()]
+		});
+	}
 	return /* @__PURE__ */ jsx(LocaleContext.Provider, {
 		value: currentLocale,
 		children: /* @__PURE__ */ jsx(RuntimeSlotsProvider, {
@@ -792,82 +981,8 @@ function AppShell(arg0) {
 			route: currentRoute,
 			children: /* @__PURE__ */ jsxs(SectionProvider, {
 				sections,
-				children: [/* @__PURE__ */ jsx(Header, {
-					config,
-					navigation: currentNavigation.items,
-					tabs: currentNavigation.tabs,
-					routes,
-					currentLocale,
-					currentRoute,
-					banner: /* @__PURE__ */ jsx(BannerSlot, {
-						activeBannerKey,
-						dismissedBannerKey,
-						onDismiss: () => setDismissedBannerKey(activeBannerKey),
-						config,
-						locale: currentLocale
-					})
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "clarify-layout 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)",
-					style: { "--clarify-header-offset": hasTabs && hasBanner ? "10rem" : hasTabs && !hasBanner ? "7rem" : !hasTabs && hasBanner ? "6.5rem" : "3.5rem" },
-					children: [/* @__PURE__ */ jsx("aside", {
-						"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: clsx("clarify-sidebar-scroll lg:sticky lg:z-30 lg:overflow-y-auto lg:pb-8", hasTabs && hasBanner && "lg:top-40 lg:h-(--clarify-sidebar-height-with-tabs-and-banner) lg:pt-10", hasTabs && !hasBanner && "lg:top-28 lg:h-(--clarify-sidebar-height-with-tabs) lg:pt-10", !hasTabs && hasBanner && "lg:top-26 lg:h-(--clarify-sidebar-height-with-banner) lg:pt-10", !hasTabs && !hasBanner && "lg:top-14 lg:h-(--clarify-sidebar-height) lg:pt-10"),
-							children: /* @__PURE__ */ jsx(Navigation, { navigation: currentNavigation.items })
-						})
-					}), /* @__PURE__ */ jsx("div", {
-						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", hasTabs && hasBanner && "pt-26 lg:pt-40", hasTabs && !hasBanner && "pt-14 lg:pt-28", !hasTabs && hasBanner && "pt-26", !hasTabs && !hasBanner && "pt-14"),
-						children: /* @__PURE__ */ jsxs(PageActionsProvider, {
-							route: currentRoute,
-							routePrefix: config.routePrefix,
-							children: [
-								/* @__PURE__ */ jsx("main", {
-									className: "clarify-main min-w-0 flex-auto",
-									"data-pagefind-body": true,
-									children: /* @__PURE__ */ 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__ */ jsx(Suspense, {
-											fallback: /* @__PURE__ */ jsx(PageSkeleton, {}),
-											children: /* @__PURE__ */ jsxs(Routes, { children: [renderRoutes.map((route) => /* @__PURE__ */ jsx(Route, {
-												path: route.path,
-												element: /* @__PURE__ */ jsx(route.component, {})
-											}, route.path)), /* @__PURE__ */ jsx(Route, {
-												path: "*",
-												element: /* @__PURE__ */ jsx(NotFoundRouteElement, { component: NotFoundRouteComponent })
-											})] })
-										})
-									}, pathname)
-								}),
-								/* @__PURE__ */ jsx(PageNavigation, {
-									navigation: currentNavigation.items,
-									currentRoute
-								}),
-								/* @__PURE__ */ jsx(RuntimeSlot, { name: "page.footer.before" }),
-								/* @__PURE__ */ jsx(RuntimeSlot, {
-									name: "page.footer.replace",
-									default: DefaultFooterComponent
-								}),
-								/* @__PURE__ */ jsx("div", {
-									className: "flex justify-end",
-									children: /* @__PURE__ */ jsx(BuiltWithClarify, {})
-								})
-							]
-						})
-					})]
-				})]
+				headerTopAreaRef,
+				children: [renderHeader(), renderLayout()]
 			})
 		})
 	});
@@ -1923,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]);
@@ -1985,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",
@@ -2155,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-BPv2bxI4.js.map
+//# sourceMappingURL=ClarifyShell-C38EkErX.js.map