@clarify-labs/renderer 0.7.0 → 0.7.2

package/output/{ThemeRoot-C_ZdzSMu.js → ThemeRoot-QULrwQf6.js}

@@ -1,7 +1,7 @@
-import { C as isExternalHref, D as useBuiltInText, E as copyTextToClipboard, S as ContentActions, _ as resolveThemeColorValue, g as cloneTheme, h as clarifyThemePresets, i as SectionProvider, j as useClarifyConfig, k as ClarifyLocaleContext, l as isSameRoutePath, m as applyThemeCssVariables, n as Navigation, p as useTheme, r as safeDecodeURIComponent, t as Header, u as normalizeRoutePath, v as resolveThemeVariableTargets, w as localizeHref, x as themeToCssVariables } from "./shell-CumiARRe.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
@@ -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];
@@ -215,8 +295,8 @@ function SocialLink(arg0) {
 	});
 }
 function PageFooter(props = {}) {
-	const config = useClarifyConfig();
-	const locale = localeForPath$1(config, useLocation().pathname);
+	const config = useConfig();
+	const locale = localeForPath(config, useLocation().pathname);
 	const footer = config.footer;
 	const builtInFooter = footer && typeof footer === "object" ? footer : void 0;
 	const CustomFooter = props.component;
@@ -225,7 +305,7 @@ function PageFooter(props = {}) {
 	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: "clarify-page-footer mx-auto flex w-full max-w-(--clarify-theme-layout-max-width) flex-col gap-4 border-t border-(--clarify-theme-tokens-colors-border) px-4 py-8 sm:px-6 lg:mt-24 lg:px-5",
+		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, {})
@@ -419,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
 	})) ?? [];
@@ -437,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;
@@ -521,22 +610,46 @@ function NotFoundRouteElement(props) {
 	return /* @__PURE__ */ jsx(RouteComponent, {});
 }
 function AppShell(arg0) {
-	const { config, routes, navigation, footerComponent } = 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);
@@ -563,33 +676,38 @@ 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", {
-						"data-pagefind-ignore": true,
-						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)",
+				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-[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,
@@ -622,12 +740,12 @@ function AppShell(arg0) {
 							/* @__PURE__ */ jsx(PageNavigation, {
 								navigation: currentNavigation.items,
 								currentRoute
-							})
+							}),
+							/* @__PURE__ */ jsx(PageFooter, { component: footerComponent })
 						]
-					})]
-				}),
-				/* @__PURE__ */ jsx(PageFooter, { component: footerComponent })
-			]
+					})
+				})]
+			})]
 		})
 	});
 }
@@ -1284,6 +1402,183 @@ function createRandomTheme() {
 	};
 }
 //#endregion
+//#region source/theme/variables.ts
+var themeStorageKey = themeCookieName;
+var themePresets = {
+	default: {
+		preset: "default",
+		tokens: {
+			colors: {
+				primary: "#047857",
+				accent: "#0D9488",
+				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",
+				md: "10px",
+				lg: "14px",
+				xl: "18px"
+			}
+		},
+		layout: { maxWidth: "82rem" },
+		editor: false
+	},
+	base: {
+		preset: "base",
+		tokens: {
+			colors: {
+				primary: "#18181b",
+				accent: "#52525b",
+				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",
+				md: "8px",
+				lg: "12px",
+				xl: "16px"
+			}
+		},
+		layout: { maxWidth: "80rem" },
+		editor: false
+	}
+};
+function cloneThemeColorValue(value) {
+	return typeof value === "string" ? value : { ...value };
+}
+function cloneTheme(theme) {
+	return {
+		preset: theme.preset,
+		tokens: {
+			colors: {
+				primary: cloneThemeColorValue(theme.tokens.colors.primary),
+				accent: cloneThemeColorValue(theme.tokens.colors.accent),
+				background: cloneThemeColorValue(theme.tokens.colors.background),
+				foreground: cloneThemeColorValue(theme.tokens.colors.foreground),
+				surface: cloneThemeColorValue(theme.tokens.colors.surface),
+				muted: cloneThemeColorValue(theme.tokens.colors.muted),
+				border: cloneThemeColorValue(theme.tokens.colors.border),
+				codeBackground: cloneThemeColorValue(theme.tokens.colors.codeBackground)
+			},
+			radius: { ...theme.tokens.radius }
+		},
+		layout: { ...theme.layout },
+		editor: theme.editor
+	};
+}
+function isModeColorValue(value) {
+	return typeof value === "object" && value !== null;
+}
+function resolveThemeColorValue(value, resolvedTheme = "light") {
+	if (!isModeColorValue(value)) return value;
+	return value[resolvedTheme] ?? value.light ?? value.dark ?? "";
+}
+function resolveThemeColors(colors, resolvedTheme = "light") {
+	return {
+		primary: resolveThemeColorValue(colors.primary, resolvedTheme),
+		accent: resolveThemeColorValue(colors.accent, resolvedTheme),
+		background: resolveThemeColorValue(colors.background, resolvedTheme),
+		foreground: resolveThemeColorValue(colors.foreground, resolvedTheme),
+		surface: resolveThemeColorValue(colors.surface, resolvedTheme),
+		muted: resolveThemeColorValue(colors.muted, resolvedTheme),
+		border: resolveThemeColorValue(colors.border, resolvedTheme),
+		codeBackground: resolveThemeColorValue(colors.codeBackground, resolvedTheme)
+	};
+}
+function themeToCssVariables(theme, resolvedTheme) {
+	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,
+		"--clarify-theme-tokens-colors-background": colors.background,
+		"--clarify-theme-tokens-colors-foreground": colors.foreground,
+		"--clarify-theme-tokens-colors-surface": colors.surface,
+		"--clarify-theme-tokens-colors-muted": colors.muted,
+		"--clarify-theme-tokens-colors-border": colors.border,
+		"--clarify-theme-tokens-colors-code-background": colors.codeBackground,
+		"--clarify-theme-tokens-radius-sm": radius.sm,
+		"--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": 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));
+}
+function resolveThemeVariableTargets(target) {
+	if (typeof document === "undefined") return [];
+	if (target instanceof HTMLElement) return [target];
+	if (typeof target === "string") return Array.from(document.querySelectorAll(target));
+	return uniqueElements([document.documentElement, ...Array.from(document.querySelectorAll(".clarify-app"))]);
+}
+function applyThemeCssVariables(variables, targets) {
+	const previousValues = /* @__PURE__ */ new Map();
+	for (const element of targets) {
+		const elementPreviousValues = /* @__PURE__ */ new Map();
+		for (const [property, value] of Object.entries(variables)) {
+			elementPreviousValues.set(property, element.style.getPropertyValue(property));
+			element.style.setProperty(property, value);
+		}
+		previousValues.set(element, elementPreviousValues);
+	}
+	return () => {
+		for (const [element, elementPreviousValues] of previousValues) for (const [property, previousValue] of elementPreviousValues) if (previousValue) element.style.setProperty(property, previousValue);
+		else element.style.removeProperty(property);
+	};
+}
+//#endregion
 //#region source/theme/ThemeEditor.tsx
 var colorTokenFields = [
 	{
@@ -1341,18 +1636,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) {
@@ -1385,6 +1686,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,
@@ -1396,7 +1752,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)), [
@@ -1409,16 +1765,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)
 				}
 			}
 		});
@@ -1508,12 +1864,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))
 								})]
 							}),
@@ -1590,11 +1945,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-C_ZdzSMu.js.map
+//# sourceMappingURL=ThemeRoot-QULrwQf6.js.map