@clarify-labs/renderer 0.6.7 → 0.7.1

package/output/{ThemeRoot-DErmHskn.js → ThemeRoot-CLa0yvRQ.js}

@@ -1,7 +1,7 @@
-import { C as useClarifyConfig, g as localizeHref, h as isExternalHref, i as SectionProvider, l as isSameRoutePath, m as ContentActions, n as Navigation, p as useTheme, r as safeDecodeURIComponent, t as Header, u as normalizeRoutePath, v as copyTextToClipboard, x as ClarifyLocaleContext, y as useBuiltInText } from "./shell-DvTfFx6M.js";
+import { C as isExternalHref, D as useBuiltInText, E as copyTextToClipboard, S as themeCookieName, a as safeDecodeURIComponent, b as storeLocalePreference, d as isSameRoutePath, f as normalizeRoutePath, g as getStoredLocalePreference, h as useTheme, i as Navigation, j as useConfig, k as LocaleContext, o as SectionProvider, r as Header, t as PageActionsProvider, w as localizeHref } from "./PageActions-yoDRjkq8.js";
 import clsx from "clsx";
 import { Component, Suspense, lazy, useEffect, useMemo, useState } from "react";
-import { Link, Route, Routes, useLocation } from "react-router-dom";
+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";
 //#region source/app/ErrorBoundary.tsx
@@ -147,6 +147,86 @@ var PageErrorBoundary = class extends Component {
 	}
 };
 //#endregion
+//#region source/app/PageBanner.tsx
+function resolveLocalizedText$1(text, locale, fallbackLocale) {
+	if (typeof text === "string") return text;
+	return (locale ? text[locale] : void 0) ?? (fallbackLocale ? text[fallbackLocale] : void 0) ?? Object.values(text)[0] ?? "";
+}
+function bannerStorageKey(config, content) {
+	return `clarify:banner:dismissed:${config.title}:${content}`;
+}
+function PageBannerLink(props) {
+	const { href, label, external: externalProp, config, locale } = props;
+	const external = externalProp ?? isExternalHref(href);
+	const resolvedHref = external ? href : localizeHref(href, config, locale);
+	const className = "clarify-banner-link shrink-0 rounded-full bg-(--clarify-theme-tokens-colors-primary) px-3 py-1 text-xs/5 font-semibold text-white no-underline transition hover:opacity-90";
+	if (external) return /* @__PURE__ */ jsx("a", {
+		href: resolvedHref,
+		target: "_blank",
+		rel: "noreferrer",
+		className,
+		children: label
+	});
+	return /* @__PURE__ */ jsx(Link, {
+		to: resolvedHref,
+		className,
+		children: label
+	});
+}
+function PageBanner(props) {
+	const { component: CustomBanner, currentLocale, onDismiss } = props;
+	const config = useConfig();
+	const banner = config.banner;
+	const builtInBanner = banner && typeof banner === "object" ? banner : void 0;
+	const content = builtInBanner ? resolveLocalizedText$1(builtInBanner.content, currentLocale, config.i18n?.defaultLocale) : "";
+	const link = builtInBanner?.link;
+	const linkLabel = link ? resolveLocalizedText$1(link.label, currentLocale, config.i18n?.defaultLocale) : "";
+	const storageKey = useMemo(() => content ? bannerStorageKey(config, content) : "", [config, content]);
+	const [dismissed, setDismissed] = useState(() => {
+		if (!storageKey || !builtInBanner?.dismissible || typeof window === "undefined") return false;
+		return window.localStorage.getItem(storageKey) === "1";
+	});
+	useEffect(() => {
+		if (dismissed) onDismiss?.();
+	}, [dismissed, onDismiss]);
+	if (CustomBanner) return /* @__PURE__ */ jsx("div", {
+		className: "clarify-banner clarify-banner-custom flex min-h-12 items-center border-b border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-background) px-4 text-sm text-(--clarify-theme-tokens-colors-foreground) dark:border-white/10 dark:bg-zinc-950",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "mx-auto w-full max-w-(--clarify-theme-layout-max-width)",
+			children: /* @__PURE__ */ jsx(CustomBanner, {})
+		})
+	});
+	if (!builtInBanner || !content || dismissed) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "clarify-banner relative flex min-h-12 items-center border-b border-(--clarify-ui-accent-border) bg-(--clarify-ui-accent-background) px-4 text-sm text-(--clarify-ui-text) dark:border-white/10",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "mx-auto flex w-full max-w-(--clarify-theme-layout-max-width) items-center justify-center gap-3 pr-8 sm:pr-0",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "clarify-banner-content m-0 text-center font-medium",
+				children: content
+			}), link ? /* @__PURE__ */ jsx(PageBannerLink, {
+				href: link.href,
+				label: linkLabel,
+				external: link.external,
+				config,
+				locale: currentLocale
+			}) : null]
+		}), builtInBanner.dismissible ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "clarify-banner-dismiss absolute right-3 inline-flex size-8 items-center justify-center rounded-full text-(--clarify-ui-text-soft) transition hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-ui-text-strong)",
+			"aria-label": "Dismiss announcement",
+			onClick: () => {
+				if (storageKey) window.localStorage.setItem(storageKey, "1");
+				setDismissed(true);
+			},
+			children: /* @__PURE__ */ jsx(X, {
+				className: "size-4",
+				"aria-hidden": "true"
+			})
+		}) : null]
+	});
+}
+//#endregion
 //#region source/assets/clarify.svg?url
 var clarify_default = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='279px'%20height='200px'%20viewBox='0%200%20279%20200'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3eclarify%3c/title%3e%3cg%20id='页面-1'%20stroke='none'%20stroke-width='1'%20fill='none'%20fill-rule='evenodd'%3e%3cg%20id='clarify'%20transform='translate(-0,%200.0054)'%3e%3cpath%20d='M44.867217,0.0054376148%20C130.715579,1.00591567%20200,70.9091172%20200,156.994562%20L199.986321,155.127494%20C199.384888,180.009127%20179.026368,199.994562%20154,199.994562%20L46,199.994562%20C20.5949015,199.994562%200,179.399661%200,153.994562%20L0,45.9945624%20C0,21.0975659%2019.7793434,0.820282524%2044.4815926,0.0191499894%20Z'%20fill='%2300D492'%3e%3c/path%3e%3cpath%20d='M123.867217,0.0054376148%20C209.715579,1.00591567%20279,70.9091172%20279,156.994562%20L278.986321,155.127494%20C278.384888,180.009127%20258.026368,199.994562%20233,199.994562%20L125,199.994562%20C99.5949015,199.994562%2079,179.399661%2079,153.994562%20L79,45.9945624%20C79,21.0975659%2098.7793434,0.820282524%20123.481593,0.0191499894%20Z'%20id='clarify-right'%20fill-opacity='0.6'%20fill='%2300F6C9'%20transform='translate(179,%20100)%20rotate(-90)%20translate(-179,%20-100)'%3e%3c/path%3e%3cpath%20d='M199.979267,154.416906%20L199.984438,155.157125%20L199.962366,155.872459%20C198.977251,180.406837%20178.776104,199.994562%20154,199.994562%20L124.372438,199.994125%20L124.249053,199.994081%20C99.6939678,199.603921%2079.8122712,179.973634%2079.01915,155.518407%20L79.0054376,155.132783%20C79.5830823,105.566626%20103.129768,61.5221348%20139.498462,33.1463428%20C175.69419,61.3871018%20199.186123,105.143863%20199.979267,154.416906%20Z'%20id='形状结合'%20fill='%2300F692'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
 //#endregion
@@ -164,7 +244,7 @@ function BuiltWithClarify() {
 			/* @__PURE__ */ jsx("img", {
 				src: clarify_default,
 				alt: "",
-				className: "clarify-built-with-logo h-3.5 w-5 flex-none"
+				className: "clarify-built-with-logo h-3.5 w-auto flex-none object-contain"
 			}),
 			/* @__PURE__ */ jsx("span", {
 				className: "clarify-built-with-brand font-semibold",
@@ -179,7 +259,7 @@ function resolveLocalizedText(text, locale, fallbackLocale) {
 	if (typeof text === "string") return text;
 	return (locale ? text[locale] : void 0) ?? (fallbackLocale ? text[fallbackLocale] : void 0) ?? Object.values(text)[0] ?? "";
 }
-function localeForPath$1(config, pathname) {
+function localeForPath(config, pathname) {
 	const i18n = config.i18n;
 	if (!i18n) return void 0;
 	const firstSegment = pathname.split("/").filter(Boolean)[0];
@@ -214,18 +294,23 @@ function SocialLink(arg0) {
 		children: name
 	});
 }
-function PageFooter() {
-	const config = useClarifyConfig();
-	const locale = localeForPath$1(config, useLocation().pathname);
+function PageFooter(props = {}) {
+	const config = useConfig();
+	const locale = localeForPath(config, useLocation().pathname);
 	const footer = config.footer;
-	const links = footer?.links ?? [];
-	const socials = Object.entries(footer?.socials ?? {});
-	const copyright = footer?.copyright ? resolveLocalizedText(footer.copyright, locale, config.i18n?.defaultLocale) : void 0;
-	const hasCustomFooter = Boolean(copyright || links.length > 0 || socials.length > 0);
+	const builtInFooter = footer && typeof footer === "object" ? footer : void 0;
+	const CustomFooter = props.component;
+	const links = builtInFooter?.links ?? [];
+	const socials = Object.entries(builtInFooter?.socials ?? {});
+	const copyright = builtInFooter?.copyright ? resolveLocalizedText(builtInFooter.copyright, locale, config.i18n?.defaultLocale) : void 0;
+	const hasBuiltInFooter = Boolean(copyright || links.length > 0 || socials.length > 0);
 	return /* @__PURE__ */ jsxs("footer", {
-		className: clsx("clarify-page-footer mx-auto flex w-full max-w-(--clarify-theme-layout-max-width) flex-col items-end gap-4 border-t border-(--clarify-theme-tokens-colors-border) px-4 py-8 sm:px-6 lg:mt-24 lg:px-5", hasCustomFooter && "sm:flex-row sm:items-center sm:justify-between"),
-		children: [hasCustomFooter ? /* @__PURE__ */ jsxs("div", {
-			className: "clarify-footer-content flex flex-col gap-3 text-right sm:text-left",
+		className: "clarify-page-footer mt-16 flex w-full flex-col gap-4 border-t border-(--clarify-theme-tokens-colors-border) py-8 lg:mt-24",
+		children: [CustomFooter ? /* @__PURE__ */ jsx("div", {
+			className: "clarify-footer-custom w-full",
+			children: /* @__PURE__ */ jsx(CustomFooter, {})
+		}) : hasBuiltInFooter ? /* @__PURE__ */ jsxs("div", {
+			className: clsx("clarify-footer-content flex flex-col items-end gap-3 text-right", hasBuiltInFooter && "sm:items-start sm:text-left"),
 			children: [copyright ? /* @__PURE__ */ jsx("p", {
 				className: "clarify-footer-copyright m-0",
 				children: copyright
@@ -241,7 +326,7 @@ function PageFooter() {
 				}, name))]
 			}) : null]
 		}) : null, /* @__PURE__ */ jsx("div", {
-			className: "clarify-footer-brand flex justify-end",
+			className: "clarify-footer-brand flex justify-end self-end",
 			children: /* @__PURE__ */ jsx(BuiltWithClarify, {})
 		})]
 	});
@@ -414,6 +499,7 @@ function sectionsForRoute(route) {
 	return route?.sections?.map((section) => ({
 		id: section.id,
 		title: section.title,
+		level: section.level,
 		badge: section.badge,
 		tags: section.tags
 	})) ?? [];
@@ -432,12 +518,20 @@ function scrollToHash(hash) {
 		});
 	});
 }
-function localeForPath(config, pathname, route) {
-	if (route?.locale) return route.locale;
+function explicitLocaleForPath(config, pathname) {
 	const i18n = config.i18n;
 	if (!i18n) return void 0;
 	const firstSegment = pathname.split("/").filter(Boolean)[0];
-	return i18n.locales.find((locale) => locale.code === firstSegment)?.code ?? i18n.defaultLocale;
+	return i18n.locales.find((locale) => locale.code === firstSegment)?.code;
+}
+function fallbackLocale(config) {
+	return config.i18n?.defaultLocale;
+}
+function storedLocaleForConfig(config) {
+	return getStoredLocalePreference(config.i18n?.locales.map((locale) => locale.code));
+}
+function isDefaultLocale(config, locale) {
+	return Boolean(locale && config.i18n?.defaultLocale === locale);
 }
 function isTabbedNavigation(navigation) {
 	return !Array.isArray(navigation) && "tabs" in navigation;
@@ -516,22 +610,46 @@ function NotFoundRouteElement(props) {
 	return /* @__PURE__ */ jsx(RouteComponent, {});
 }
 function AppShell(arg0) {
-	const { config, routes, navigation } = arg0;
+	const { config, routes, navigation, bannerComponent, footerComponent } = arg0;
 	const location = useLocation();
+	const navigate = useNavigate();
 	const pathname = normalizeRoutePath(location.pathname);
 	const currentRoute = routeForPath(routes, pathname);
-	const currentLocale = localeForPath(config, pathname, currentRoute);
+	const explicitLocale = explicitLocaleForPath(config, pathname);
+	const [storedLocale] = useState(() => 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 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 });
+	}, [
+		config,
+		currentRoute,
+		explicitLocale,
+		location.hash,
+		location.search,
+		navigate,
+		pathname,
+		storedLocale
+	]);
 	useEffect(() => {
 		if (location.hash) {
 			scrollToHash(location.hash);
@@ -558,34 +676,40 @@ function AppShell(arg0) {
 		currentRoute,
 		notFoundRoute
 	]);
-	return /* @__PURE__ */ jsx(ClarifyLocaleContext.Provider, {
+	return /* @__PURE__ */ jsx(LocaleContext.Provider, {
 		value: currentLocale,
 		children: /* @__PURE__ */ jsxs(SectionProvider, {
 			sections,
-			children: [
-				/* @__PURE__ */ jsx(Header, {
-					config,
-					navigation: currentNavigation.items,
-					tabs: currentNavigation.tabs,
-					routes,
+			children: [/* @__PURE__ */ jsx(Header, {
+				config,
+				navigation: currentNavigation.items,
+				tabs: currentNavigation.tabs,
+				routes,
+				currentLocale,
+				currentRoute,
+				banner: hasBanner ? /* @__PURE__ */ jsx(PageBanner, {
+					component: bannerComponent,
 					currentLocale,
-					currentRoute
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "clarify-layout pb-12 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)",
-					children: [/* @__PURE__ */ jsx("aside", {
-						className: clsx("clarify-sidebar hidden lg:sticky lg:z-30 lg:block lg:h-(--clarify-sidebar-height) lg:self-start lg:overflow-y-auto lg:bg-(--clarify-theme-tokens-colors-background) lg:px-5 lg:pb-8 xl:px-6", hasTabs ? "lg:top-28 lg:h-(--clarify-sidebar-height-with-tabs) lg:pt-6" : "lg:top-14 lg:pt-6"),
+					onDismiss: () => setDismissedBannerKey(activeBannerKey)
+				}) : void 0
+			}), /* @__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)",
+				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-[6.5rem] 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__ */ jsxs("div", {
-						className: clsx("clarify-content @container relative flex min-h-screen min-w-0 flex-col px-4 sm:px-6 lg:px-8 xl:px-10", hasTabs ? "pt-14 lg:pt-28" : "pt-14"),
+					})
+				}), /* @__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-[6.5rem] lg:pt-40", hasTabs && !hasBanner && "pt-14 lg:pt-28", !hasTabs && hasBanner && "pt-[6.5rem]", !hasTabs && !hasBanner && "pt-14"),
+					children: /* @__PURE__ */ jsxs(PageActionsProvider, {
+						route: currentRoute,
+						routePrefix: config.routePrefix,
 						children: [
-							/* @__PURE__ */ jsx(ContentActions, {
-								hasTabs,
-								route: currentRoute,
-								routePrefix: config.routePrefix
-							}),
 							/* @__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"),
@@ -615,12 +739,12 @@ function AppShell(arg0) {
 							/* @__PURE__ */ jsx(PageNavigation, {
 								navigation: currentNavigation.items,
 								currentRoute
-							})
+							}),
+							/* @__PURE__ */ jsx(PageFooter, { component: footerComponent })
 						]
-					})]
-				}),
-				/* @__PURE__ */ jsx(PageFooter, {})
-			]
+					})
+				})]
+			})]
 		})
 	});
 }
@@ -1278,19 +1402,38 @@ function createRandomTheme() {
 }
 //#endregion
 //#region source/theme/variables.ts
-var clarifyThemePresets = {
+var themeStorageKey = themeCookieName;
+var themePresets = {
 	default: {
 		preset: "default",
 		tokens: {
 			colors: {
 				primary: "#047857",
 				accent: "#0D9488",
-				background: "#ffffff",
-				foreground: "#111827",
-				surface: "#ffffff",
-				muted: "#64748b",
-				border: "rgb(15 23 42 / 0.12)",
-				codeBackground: "#f6fbf8"
+				background: {
+					light: "#ffffff",
+					dark: "#09090b"
+				},
+				foreground: {
+					light: "#111827",
+					dark: "#ffffff"
+				},
+				surface: {
+					light: "#ffffff",
+					dark: "#18181b"
+				},
+				muted: {
+					light: "#64748b",
+					dark: "#a1a1aa"
+				},
+				border: {
+					light: "rgb(15 23 42 / 0.12)",
+					dark: "rgb(255 255 255 / 0.1)"
+				},
+				codeBackground: {
+					light: "#f6fbf8",
+					dark: "#18181b"
+				}
 			},
 			radius: {
 				sm: "6px",
@@ -1308,12 +1451,30 @@ var clarifyThemePresets = {
 			colors: {
 				primary: "#18181b",
 				accent: "#52525b",
-				background: "#ffffff",
-				foreground: "#18181b",
-				surface: "#ffffff",
-				muted: "#71717a",
-				border: "rgb(24 24 27 / 0.12)",
-				codeBackground: "#f4f4f5"
+				background: {
+					light: "#ffffff",
+					dark: "#09090b"
+				},
+				foreground: {
+					light: "#18181b",
+					dark: "#ffffff"
+				},
+				surface: {
+					light: "#ffffff",
+					dark: "#18181b"
+				},
+				muted: {
+					light: "#71717a",
+					dark: "#a1a1aa"
+				},
+				border: {
+					light: "rgb(24 24 27 / 0.12)",
+					dark: "rgb(255 255 255 / 0.1)"
+				},
+				codeBackground: {
+					light: "#f4f4f5",
+					dark: "#18181b"
+				}
 			},
 			radius: {
 				sm: "6px",
@@ -1368,38 +1529,9 @@ function resolveThemeColors(colors, resolvedTheme = "light") {
 		codeBackground: resolveThemeColorValue(colors.codeBackground, resolvedTheme)
 	};
 }
-function matchesPresetTheme(theme) {
-	const preset = clarifyThemePresets[theme.preset];
-	return JSON.stringify({
-		tokens: theme.tokens,
-		layout: theme.layout
-	}) === JSON.stringify({
-		tokens: preset.tokens,
-		layout: preset.layout
-	});
-}
-function effectiveTheme(theme, resolvedTheme) {
-	if (resolvedTheme !== "dark" || !matchesPresetTheme(theme)) return theme;
-	return {
-		...theme,
-		tokens: {
-			...theme.tokens,
-			colors: {
-				...theme.tokens.colors,
-				background: "#09090b",
-				foreground: "#ffffff",
-				surface: "#18181b",
-				muted: "#a1a1aa",
-				border: "rgb(255 255 255 / 0.1)",
-				codeBackground: "#18181b"
-			}
-		}
-	};
-}
 function themeToCssVariables(theme, resolvedTheme) {
-	const resolved = effectiveTheme(theme, resolvedTheme);
-	const colors = resolveThemeColors(resolved.tokens.colors, resolvedTheme);
-	const { radius } = resolved.tokens;
+	const colors = resolveThemeColors(theme.tokens.colors, resolvedTheme);
+	const { radius } = theme.tokens;
 	return {
 		"--clarify-theme-tokens-colors-primary": colors.primary,
 		"--clarify-theme-tokens-colors-accent": colors.accent,
@@ -1413,9 +1545,14 @@ function themeToCssVariables(theme, resolvedTheme) {
 		"--clarify-theme-tokens-radius-md": radius.md,
 		"--clarify-theme-tokens-radius-lg": radius.lg,
 		"--clarify-theme-tokens-radius-xl": radius.xl,
-		"--clarify-theme-layout-max-width": resolved.layout.maxWidth
+		"--clarify-theme-layout-max-width": theme.layout.maxWidth
 	};
 }
+function themeBootstrapScript(theme = themePresets.default) {
+	const darkVariables = themeToCssVariables(theme, "dark");
+	const lightVariables = themeToCssVariables(theme, "light");
+	return `(function(){try{var c=${JSON.stringify(themeCookieName)};var m=document.cookie?document.cookie.split('; '):[];var e=null;for(var i=0;i<m.length;i++){var p=m[i].indexOf('=');var n=p===-1?m[i]:m[i].slice(0,p);if(decodeURIComponent(n)===c){e=p===-1?'':decodeURIComponent(m[i].slice(p+1));break}}var t=e==='dark'||e==='light'||e==='system'?e:'system';var r=t==='system'?window.matchMedia('(prefers-color-scheme: dark)').matches:t==='dark';var v=r?${JSON.stringify(darkVariables)}:${JSON.stringify(lightVariables)};var s=document.documentElement.style;for(var k in v)s.setProperty(k,v[k]);document.documentElement.classList.toggle('dark',r);document.documentElement.style.colorScheme=r?'dark':'light'}catch(e){}})();`;
+}
 function uniqueElements(elements) {
 	return Array.from(new Set(elements));
 }
@@ -1498,18 +1635,24 @@ var layoutFields = [{
 	key: "maxWidth",
 	label: "Max width"
 }];
-var clarifyThemeEditorPresets = clarifyThemePresets;
-function applyClarifyThemeVariables(theme, target) {
+var themeEditorPresets = themePresets;
+function applyThemeVariables(theme, target) {
 	return applyThemeCssVariables(themeToCssVariables(theme), resolveThemeVariableTargets(target));
 }
 function isHexColor(value) {
 	return /^#[0-9a-f]{6}$/i.test(value);
 }
-function updateThemeModeColorValue(value, resolvedTheme, nextValue) {
-	if (typeof value === "string") return nextValue;
+function updateThemeModeColorValue(value, mode, nextValue) {
+	if (typeof value === "string") return mode === "light" ? {
+		light: nextValue,
+		dark: value
+	} : {
+		light: value,
+		dark: nextValue
+	};
 	return {
 		...value,
-		[resolvedTheme]: nextValue
+		[mode]: nextValue
 	};
 }
 function TextField(props) {
@@ -1542,6 +1685,61 @@ function TextField(props) {
 		})]
 	});
 }
+function ColorField(props) {
+	const { id, label, value, onChange } = props;
+	const lightValue = resolveThemeColorValue(value, "light");
+	const darkValue = resolveThemeColorValue(value, "dark");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "grid min-w-0 gap-1.5",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-xs/5 font-medium text-(--clarify-ui-text)",
+			children: label
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "grid grid-cols-2 gap-2",
+			children: [/* @__PURE__ */ jsx(ColorModeInput, {
+				id: `${id}-light`,
+				mode: "light",
+				value: lightValue,
+				onChange: (v) => onChange("light", v)
+			}), /* @__PURE__ */ jsx(ColorModeInput, {
+				id: `${id}-dark`,
+				mode: "dark",
+				value: darkValue,
+				onChange: (v) => onChange("dark", v)
+			})]
+		})]
+	});
+}
+function ColorModeInput(props) {
+	const { id, mode, value, onChange } = props;
+	const canUseColorInput = isHexColor(value);
+	function handleTextChange(event) {
+		onChange(event.target.value);
+	}
+	return /* @__PURE__ */ jsxs("label", {
+		htmlFor: id,
+		className: "grid min-w-0 gap-1 text-[11px]/4 font-medium text-(--clarify-ui-text-faint)",
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "flex min-w-0 items-center justify-between gap-2",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "uppercase tracking-wide",
+				children: mode
+			}), canUseColorInput ? /* @__PURE__ */ jsx("input", {
+				type: "color",
+				value,
+				"aria-label": `${id} color`,
+				className: "h-4 w-6 shrink-0 cursor-pointer rounded border border-(--clarify-theme-tokens-colors-border) bg-transparent p-0",
+				onChange: handleTextChange
+			}) : null]
+		}), /* @__PURE__ */ jsx("input", {
+			id,
+			value,
+			spellCheck: false,
+			className: "h-8 w-full min-w-0 rounded-(--clarify-theme-tokens-radius-sm) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-background) px-2 font-mono text-xs 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: handleTextChange
+		})]
+	});
+}
 function themeToConfigSource(theme) {
 	return JSON.stringify({ theme: {
 		preset: theme.preset,
@@ -1553,7 +1751,7 @@ function ThemeEditor(props) {
 	const { initialTheme, onChange, target, defaultOpen = false, className } = props;
 	const { resolvedTheme } = useTheme();
 	const [isOpen, setIsOpen] = useState(defaultOpen);
-	const [theme, setTheme] = useState(() => cloneTheme(initialTheme ?? clarifyThemeEditorPresets.default));
+	const [theme, setTheme] = useState(() => cloneTheme(initialTheme ?? themeEditorPresets.default));
 	const [copyState, setCopyState] = useState("idle");
 	const configSource = useMemo(() => themeToConfigSource(theme), [theme]);
 	useEffect(() => applyThemeCssVariables(themeToCssVariables(theme, resolvedTheme), resolveThemeVariableTargets(target)), [
@@ -1566,16 +1764,16 @@ function ThemeEditor(props) {
 		onChange?.(nextTheme);
 	}
 	function updatePreset(nextPreset) {
-		commit(cloneTheme(clarifyThemeEditorPresets[nextPreset]));
+		commit(cloneTheme(themeEditorPresets[nextPreset]));
 	}
-	function updateColorToken(key, value) {
+	function updateColorToken(key, mode, value) {
 		commit({
 			...theme,
 			tokens: {
 				...theme.tokens,
 				colors: {
 					...theme.tokens.colors,
-					[key]: updateThemeModeColorValue(theme.tokens.colors[key], resolvedTheme, value)
+					[key]: updateThemeModeColorValue(theme.tokens.colors[key], mode, value)
 				}
 			}
 		});
@@ -1665,12 +1863,11 @@ function ThemeEditor(props) {
 									children: "Colors"
 								}), /* @__PURE__ */ jsx("div", {
 									className: "grid grid-cols-1 gap-3",
-									children: colorTokenFields.map((field) => /* @__PURE__ */ jsx(TextField, {
+									children: colorTokenFields.map((field) => /* @__PURE__ */ jsx(ColorField, {
 										id: `clarify-theme-editor-color-${field.key}`,
 										label: field.label,
-										value: resolveThemeColorValue(theme.tokens.colors[field.key], resolvedTheme),
-										withColorInput: true,
-										onChange: (value) => updateColorToken(field.key, value)
+										value: theme.tokens.colors[field.key],
+										onChange: (mode, value) => updateColorToken(field.key, mode, value)
 									}, field.key))
 								})]
 							}),
@@ -1747,11 +1944,10 @@ function ThemeRoot(props) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "clarify-app h-full min-h-screen bg-(--clarify-theme-tokens-colors-background) text-(--clarify-theme-tokens-colors-foreground)",
 		"data-theme-preset": theme.preset,
-		style: themeVariables,
 		children: [children, themeEditor ? /* @__PURE__ */ jsx(ThemeEditor, { initialTheme: theme }) : null]
 	});
 }
 //#endregion
-export { AppShell as a, clarifyThemeEditorPresets as i, ThemeEditor as n, PageFooter as o, applyClarifyThemeVariables as r, BuiltWithClarify as s, ThemeRoot as t };
+export { themeBootstrapScript as a, AppShell as c, PageBanner as d, themeEditorPresets as i, PageFooter as l, ThemeEditor as n, themePresets as o, applyThemeVariables as r, themeStorageKey as s, ThemeRoot as t, BuiltWithClarify as u };
 
-//# sourceMappingURL=ThemeRoot-DErmHskn.js.map
+//# sourceMappingURL=ThemeRoot-CLa0yvRQ.js.map