@clarify-labs/renderer 0.9.0 → 0.9.2

package/output/{ClarifyShell-B74Fq4UU.cjs → ClarifyShell-DdYRgrfY.cjs}

@@ -1,5 +1,5 @@
 const require_chunk = require("./chunk-DakpK96I.cjs");
-const require_PageActions = require("./PageActions-DOKkt2zo.cjs");
+const require_PageActions = require("./PageActions-B08cDCzq.cjs");
 let clsx = require("clsx");
 clsx = require_chunk.__toESM(clsx, 1);
 let react = require("react");
@@ -582,9 +582,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__ */ (0, react_jsx_runtime.jsx)(PageBanner, {
 			currentLocale: locale,
 			onDismiss
@@ -685,6 +685,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 = (0, react.useMemo)(() => routes.map((route) => ({
+		...route,
+		component: resolveRouteComponent(route)
+	})), [routes]);
+	return {
+		renderRoutes,
+		NotFoundRouteComponent: notFoundRoute ? renderRoutes.find((route) => require_PageActions.isSameRoutePath(route.path, notFoundRoute.path))?.component : void 0
+	};
+}
+function emptySubscribe() {
+	return () => {};
+}
+function useStoredBannerDismissed(storageKey) {
+	return (0, react.useSyncExternalStore)(emptySubscribe, () => Boolean(storageKey && window.localStorage.getItem(storageKey) === "1"), () => true);
+}
+function useBannerState(config, currentLocale) {
+	const banner = config.banner;
+	const bannerContent = banner ? require_PageActions.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] = (0, react.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;
+	(0, react.useEffect)(() => {
+		if (explicitLocale) require_PageActions.storeLocalePreference(explicitLocale);
+	}, [explicitLocale]);
+	(0, react.useEffect)(() => {
+		if (explicitLocale || !storedLocale || isDefaultLocale(config, storedLocale)) return;
+		const localizedPath = currentRoute?.alternates?.[storedLocale];
+		if (!localizedPath || require_PageActions.isSameRoutePath(localizedPath, pathname)) return;
+		navigate(`${localizedPath}${location.search}${location.hash}`, { replace: true });
+	}, [
+		config,
+		currentRoute,
+		explicitLocale,
+		location.hash,
+		location.search,
+		navigate,
+		pathname,
+		storedLocale
+	]);
+	(0, react.useEffect)(() => {
+		if (location.hash) {
+			scrollToHash(location.hash);
+			return;
+		}
+		window.scrollTo({
+			top: 0,
+			left: 0
+		});
+		window.requestAnimationFrame(() => {
+			window.dispatchEvent(new Event("scroll"));
+		});
+	}, [location.hash, location.pathname]);
+}
+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]);
+	(0, react.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 = require_PageActions.useBuiltInText();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
@@ -725,68 +849,133 @@ function AppShell(arg0) {
 	const location = (0, react_router_dom.useLocation)();
 	const navigate = (0, react_router_dom.useNavigate)();
 	const pathname = require_PageActions.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 = (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 currentNavigation = navigationForLocale(navigation, currentLocale, pathname);
-	const sections = sectionsForRoute(currentRoute);
-	const [dismissedBannerKey, setDismissedBannerKey] = (0, react.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 = (0, react.useMemo)(() => routes.map((route) => ({
-		...route,
-		component: resolveRouteComponent(route)
-	})), [routes]);
-	const NotFoundRouteComponent = notFoundRoute ? renderRoutes.find((route) => require_PageActions.isSameRoutePath(route.path, notFoundRoute.path))?.component : void 0;
-	(0, react.useEffect)(() => {
-		if (explicitLocale) require_PageActions.storeLocalePreference(explicitLocale);
-	}, [explicitLocale]);
-	(0, react.useEffect)(() => {
-		if (explicitLocale || !storedLocale || isDefaultLocale(config, storedLocale)) return;
-		const localizedPath = currentRoute?.alternates?.[storedLocale];
-		if (!localizedPath || require_PageActions.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
-	]);
-	(0, react.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__ */ (0, react_jsx_runtime.jsx)(BannerSlot, {
+			activeBannerKey,
+			dismissedBannerKey,
+			bannerResolved,
+			onDismiss: dismissBanner,
+			config,
+			locale: currentLocale
 		});
-		window.requestAnimationFrame(() => {
-			window.dispatchEvent(new Event("scroll"));
+	}
+	function renderHeader() {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PageActions.Header, {
+			ref: headerRef,
+			topAreaRef: headerTopAreaRef,
+			config,
+			navigation: currentNavigation.items,
+			tabs: currentNavigation.tabs,
+			routes,
+			currentLocale,
+			currentRoute,
+			banner: renderBannerSlot()
 		});
-	}, [location.hash, location.pathname]);
-	(0, react.useEffect)(() => {
-		if (!currentLocale) return;
-		document.documentElement.lang = currentLocale;
-		if (currentLocaleConfig?.dir) document.documentElement.dir = currentLocaleConfig.dir;
-		else document.documentElement.removeAttribute("dir");
-	}, [currentLocale, currentLocaleConfig?.dir]);
-	(0, react.useEffect)(() => {
-		applyDocumentMetadata(config, currentRoute ?? notFoundRoute);
-	}, [
-		config,
-		currentRoute,
-		notFoundRoute
-	]);
+	}
+	function renderSidebar() {
+		return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+				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 })
+			})
+		});
+	}
+	function renderRouteElements() {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_router_dom.Routes, { children: [renderRoutes.map((route) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Route, {
+			path: route.path,
+			element: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(route.component, {})
+		}, route.path)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Route, {
+			path: "*",
+			element: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NotFoundRouteElement, { component: NotFoundRouteComponent })
+		})] });
+	}
+	function renderMain() {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("main", {
+			className: "clarify-main min-w-0 flex-auto",
+			"data-pagefind-body": true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageErrorBoundary, {
+				title: text("renderError.title"),
+				description: text("renderError.description"),
+				reloadLabel: text("renderError.reload"),
+				detailsLabel: text("renderError.details"),
+				pathLabel: text("renderError.path"),
+				typeLabel: text("renderError.type"),
+				messageLabel: text("renderError.message"),
+				stackLabel: text("renderError.stack"),
+				componentStackLabel: text("renderError.componentStack"),
+				timestampLabel: text("renderError.timestamp"),
+				copyLabel: text("actions.copy"),
+				copiedLabel: text("actions.copied"),
+				path: pathname,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, {
+					fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageSkeleton, {}),
+					children: renderRouteElements()
+				})
+			}, pathname)
+		});
+	}
+	function renderFooter() {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RuntimeSlot, { name: "page.footer.before" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RuntimeSlot, {
+				name: "page.footer.replace",
+				default: DefaultFooterComponent
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex justify-end",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BuiltWithClarify, {})
+			})
+		] });
+	}
+	function renderContent() {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			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,
+				children: [
+					renderMain(),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageNavigation, {
+						navigation: currentNavigation.items,
+						currentRoute
+					}),
+					renderFooter()
+				]
+			})
+		});
+	}
+	function renderLayout() {
+		return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(require_PageActions.LocaleContext.Provider, {
 		value: currentLocale,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RuntimeSlotsProvider, {
@@ -794,82 +983,8 @@ function AppShell(arg0) {
 			route: currentRoute,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_PageActions.SectionProvider, {
 				sections,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PageActions.Header, {
-					config,
-					navigation: currentNavigation.items,
-					tabs: currentNavigation.tabs,
-					routes,
-					currentLocale,
-					currentRoute,
-					banner: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BannerSlot, {
-						activeBannerKey,
-						dismissedBannerKey,
-						onDismiss: () => setDismissedBannerKey(activeBannerKey),
-						config,
-						locale: currentLocale
-					})
-				}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsx)(require_PageActions.Navigation, { navigation: currentNavigation.items })
-						})
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						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", hasTabs && hasBanner && "pt-26 lg:pt-40", hasTabs && !hasBanner && "pt-14 lg:pt-28", !hasTabs && hasBanner && "pt-26", !hasTabs && !hasBanner && "pt-14"),
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_PageActions.PageActionsProvider, {
-							route: currentRoute,
-							routePrefix: config.routePrefix,
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("main", {
-									className: "clarify-main min-w-0 flex-auto",
-									"data-pagefind-body": true,
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageErrorBoundary, {
-										title: text("renderError.title"),
-										description: text("renderError.description"),
-										reloadLabel: text("renderError.reload"),
-										detailsLabel: text("renderError.details"),
-										pathLabel: text("renderError.path"),
-										typeLabel: text("renderError.type"),
-										messageLabel: text("renderError.message"),
-										stackLabel: text("renderError.stack"),
-										componentStackLabel: text("renderError.componentStack"),
-										timestampLabel: text("renderError.timestamp"),
-										copyLabel: text("actions.copy"),
-										copiedLabel: text("actions.copied"),
-										path: pathname,
-										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, {
-											fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageSkeleton, {}),
-											children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_router_dom.Routes, { children: [renderRoutes.map((route) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Route, {
-												path: route.path,
-												element: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(route.component, {})
-											}, route.path)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Route, {
-												path: "*",
-												element: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NotFoundRouteElement, { component: NotFoundRouteComponent })
-											})] })
-										})
-									}, pathname)
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageNavigation, {
-									navigation: currentNavigation.items,
-									currentRoute
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RuntimeSlot, { name: "page.footer.before" }),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RuntimeSlot, {
-									name: "page.footer.replace",
-									default: DefaultFooterComponent
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									className: "flex justify-end",
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BuiltWithClarify, {})
-								})
-							]
-						})
-					})]
-				})]
+				headerTopAreaRef,
+				children: [renderHeader(), renderLayout()]
 			})
 		})
 	});
@@ -1925,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]);
@@ -1987,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",
@@ -2246,4 +2393,4 @@ Object.defineProperty(exports, "useSlot", {
 	}
 });
 
-//# sourceMappingURL=ClarifyShell-B74Fq4UU.cjs.map
+//# sourceMappingURL=ClarifyShell-DdYRgrfY.cjs.map