@clarify-labs/renderer 0.7.0 → 0.7.2

package/output/{ThemeRoot-CEvwrGp5.cjs → ThemeRoot-UWj0iK1X.cjs}

@@ -1,5 +1,5 @@
 const require_chunk = require("./chunk-DakpK96I.cjs");
-const require_shell = require("./shell-xxhV0p7k.cjs");
+const require_PageActions = require("./PageActions-1RDCHcUY.cjs");
 let clsx = require("clsx");
 clsx = require_chunk.__toESM(clsx, 1);
 let react = require("react");
@@ -15,7 +15,7 @@ function PageErrorPanel(props) {
 	const stackText = componentStack ? `${stack}\n\n${componentStackLabel}\n${componentStack}` : stack;
 	const capturedAt = occurredAt ?? (/* @__PURE__ */ new Date()).toISOString();
 	async function copyStack() {
-		if (!await require_shell.copyTextToClipboard(stackText)) return;
+		if (!await require_PageActions.copyTextToClipboard(stackText)) return;
 		setCopiedStack(true);
 		window.setTimeout(() => setCopiedStack(false), 1600);
 	}
@@ -149,12 +149,92 @@ var PageErrorBoundary = class extends react.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 ?? require_PageActions.isExternalHref(href);
+	const resolvedHref = external ? href : require_PageActions.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__ */ (0, react_jsx_runtime.jsx)("a", {
+		href: resolvedHref,
+		target: "_blank",
+		rel: "noreferrer",
+		className,
+		children: label
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Link, {
+		to: resolvedHref,
+		className,
+		children: label
+	});
+}
+function PageBanner(props) {
+	const { component: CustomBanner, currentLocale, onDismiss } = props;
+	const config = require_PageActions.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 = (0, react.useMemo)(() => content ? bannerStorageKey(config, content) : "", [config, content]);
+	const [dismissed, setDismissed] = (0, react.useState)(() => {
+		if (!storageKey || !builtInBanner?.dismissible || typeof window === "undefined") return false;
+		return window.localStorage.getItem(storageKey) === "1";
+	});
+	(0, react.useEffect)(() => {
+		if (dismissed) onDismiss?.();
+	}, [dismissed, onDismiss]);
+	if (CustomBanner) return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "mx-auto w-full max-w-(--clarify-theme-layout-max-width)",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomBanner, {})
+		})
+	});
+	if (!builtInBanner || !content || dismissed) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "clarify-banner-content m-0 text-center font-medium",
+				children: content
+			}), link ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageBannerLink, {
+				href: link.href,
+				label: linkLabel,
+				external: link.external,
+				config,
+				locale: currentLocale
+			}) : null]
+		}), builtInBanner.dismissible ? /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(lucide_react.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
 //#region source/app/BuiltWithClarify.tsx
 function BuiltWithClarify() {
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
 		href: "https://clarify.pub",
 		target: "_blank",
@@ -181,7 +261,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];
@@ -189,8 +269,8 @@ function localeForPath$1(config, pathname) {
 }
 function FooterLink(arg0) {
 	const { link, locale, config } = arg0;
-	const external = link.external ?? require_shell.isExternalHref(link.href);
-	const href = external ? link.href : require_shell.localizeHref(link.href, config, locale);
+	const external = link.external ?? require_PageActions.isExternalHref(link.href);
+	const href = external ? link.href : require_PageActions.localizeHref(link.href, config, locale);
 	const className = "clarify-footer-link no-underline transition";
 	const label = resolveLocalizedText(link.label, locale, config.i18n?.defaultLocale);
 	if (external) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
@@ -217,8 +297,8 @@ function SocialLink(arg0) {
 	});
 }
 function PageFooter(props = {}) {
-	const config = require_shell.useClarifyConfig();
-	const locale = localeForPath$1(config, (0, react_router_dom.useLocation)().pathname);
+	const config = require_PageActions.useConfig();
+	const locale = localeForPath(config, (0, react_router_dom.useLocation)().pathname);
 	const footer = config.footer;
 	const builtInFooter = footer && typeof footer === "object" ? footer : void 0;
 	const CustomFooter = props.component;
@@ -227,7 +307,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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "clarify-footer-custom w-full",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomFooter, {})
@@ -260,10 +340,10 @@ function flattenNavigation(nodes) {
 }
 function PageNavigation(arg0) {
 	const { navigation, currentRoute } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	if (!currentRoute) return null;
 	const pageRoutes = flattenNavigation(navigation);
-	const currentIndex = pageRoutes.findIndex((route) => require_shell.isSameRoutePath(route.path, currentRoute.path));
+	const currentIndex = pageRoutes.findIndex((route) => require_PageActions.isSameRoutePath(route.path, currentRoute.path));
 	if (currentIndex === -1) return null;
 	const previous = pageRoutes[currentIndex - 1];
 	const next = pageRoutes[currentIndex + 1];
@@ -282,11 +362,11 @@ function PageNavigation(arg0) {
 }
 function PageNavigationLink(arg0) {
 	const { direction, route } = arg0;
-	const t = require_shell.useBuiltInText();
+	const t = require_PageActions.useBuiltInText();
 	if (!route) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "hidden @3xl:block" });
 	const isNext = direction === "next";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_router_dom.Link, {
-		to: require_shell.normalizeRoutePath(route.path),
+		to: require_PageActions.normalizeRoutePath(route.path),
 		className: (0, clsx.default)("group flex min-w-0 items-center gap-3 rounded-lg border border-(--clarify-theme-tokens-colors-border) px-4 py-3 no-underline transition hover:border-(--clarify-theme-tokens-colors-primary) hover:bg-(--clarify-ui-hover-background)", isNext && "@3xl:justify-end @3xl:text-right"),
 		children: [
 			!isNext ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeft, { className: "h-3.5 w-3.5 shrink-0 text-(--clarify-theme-tokens-colors-muted) transition group-hover:text-(--clarify-theme-tokens-colors-primary)" }) : null,
@@ -410,17 +490,18 @@ function PageSkeleton() {
 //#endregion
 //#region source/app/AppShell.tsx
 function routeForPath(routes, pathname) {
-	return routes.find((route) => require_shell.isSameRoutePath(route.path, pathname));
+	return routes.find((route) => require_PageActions.isSameRoutePath(route.path, pathname));
 }
 function notFoundRouteForPath(routes, pathname, currentLocale) {
 	const localePrefix = currentLocale ? `/${currentLocale}` : void 0;
 	if (localePrefix && pathname.startsWith(`${localePrefix}/`)) return routeForPath(routes, `${localePrefix}/404`);
-	return routeForPath(routes, "/404") ?? routes.find((route) => require_shell.isSameRoutePath(route.basePath, "/404"));
+	return routeForPath(routes, "/404") ?? routes.find((route) => require_PageActions.isSameRoutePath(route.basePath, "/404"));
 }
 function sectionsForRoute(route) {
 	return route?.sections?.map((section) => ({
 		id: section.id,
 		title: section.title,
+		level: section.level,
 		badge: section.badge,
 		tags: section.tags
 	})) ?? [];
@@ -431,7 +512,7 @@ function resolveRouteComponent(route) {
 }
 function scrollToHash(hash) {
 	if (!hash) return;
-	const targetId = require_shell.safeDecodeURIComponent(hash.slice(1));
+	const targetId = require_PageActions.safeDecodeURIComponent(hash.slice(1));
 	window.requestAnimationFrame(() => {
 		document.getElementById(targetId)?.scrollIntoView();
 		window.requestAnimationFrame(() => {
@@ -439,22 +520,30 @@ 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 require_PageActions.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;
 }
 function hasPath(nodes, pathname) {
-	return nodes.some((node) => require_shell.isSameRoutePath(node.path, pathname) || hasPath(node.children ?? [], pathname));
+	return nodes.some((node) => require_PageActions.isSameRoutePath(node.path, pathname) || hasPath(node.children ?? [], pathname));
 }
 function navigationFromTabs(navigation, pathname) {
 	return {
-		items: navigation.tabs.find((tab) => require_shell.isSameRoutePath(tab.path, pathname) || hasPath(tab.children, pathname))?.children ?? navigation.tabs[0]?.children ?? [],
+		items: navigation.tabs.find((tab) => require_PageActions.isSameRoutePath(tab.path, pathname) || hasPath(tab.children, pathname))?.children ?? navigation.tabs[0]?.children ?? [],
 		tabs: navigation.tabs
 	};
 }
@@ -488,7 +577,7 @@ function applyDocumentMetadata(config, route) {
 	setNamedMeta("keywords", route?.keywords?.join(", "));
 }
 function BuiltInNotFoundPage() {
-	const text = require_shell.useBuiltInText();
+	const text = require_PageActions.useBuiltInText();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 		className: "mx-auto flex min-h-(--clarify-error-page-min-height) max-w-2xl flex-col justify-center py-16 text-(--clarify-theme-tokens-colors-foreground)",
 		"aria-labelledby": "clarify-not-found-title",
@@ -523,22 +612,46 @@ function NotFoundRouteElement(props) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RouteComponent, {});
 }
 function AppShell(arg0) {
-	const { config, routes, navigation, footerComponent } = arg0;
+	const { config, routes, navigation, bannerComponent, footerComponent } = arg0;
 	const location = (0, react_router_dom.useLocation)();
-	const pathname = require_shell.normalizeRoutePath(location.pathname);
+	const navigate = (0, react_router_dom.useNavigate)();
+	const pathname = require_PageActions.normalizeRoutePath(location.pathname);
 	const currentRoute = routeForPath(routes, pathname);
-	const currentLocale = localeForPath(config, pathname, currentRoute);
+	const explicitLocale = explicitLocaleForPath(config, pathname);
+	const [storedLocale] = (0, react.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 = require_shell.useBuiltInText(currentLocale);
+	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_shell.isSameRoutePath(route.path, notFoundRoute.path))?.component : void 0;
+	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 });
+	}, [
+		config,
+		currentRoute,
+		explicitLocale,
+		location.hash,
+		location.search,
+		navigate,
+		pathname,
+		storedLocale
+	]);
 	(0, react.useEffect)(() => {
 		if (location.hash) {
 			scrollToHash(location.hash);
@@ -565,33 +678,38 @@ function AppShell(arg0) {
 		currentRoute,
 		notFoundRoute
 	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_shell.ClarifyLocaleContext.Provider, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PageActions.LocaleContext.Provider, {
 		value: currentLocale,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_shell.SectionProvider, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_PageActions.SectionProvider, {
 			sections,
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_shell.Header, {
-					config,
-					navigation: currentNavigation.items,
-					tabs: currentNavigation.tabs,
-					routes,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PageActions.Header, {
+				config,
+				navigation: currentNavigation.items,
+				tabs: currentNavigation.tabs,
+				routes,
+				currentLocale,
+				currentRoute,
+				banner: hasBanner ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageBanner, {
+					component: bannerComponent,
 					currentLocale,
-					currentRoute
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("aside", {
-						"data-pagefind-ignore": true,
-						className: (0, clsx.default)("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"),
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_shell.Navigation, { navigation: currentNavigation.items })
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: (0, clsx.default)("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"),
+					onDismiss: () => setDismissedBannerKey(activeBannerKey)
+				}) : void 0
+			}), /* @__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-[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__ */ (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-[6.5rem] lg:pt-40", hasTabs && !hasBanner && "pt-14 lg:pt-28", !hasTabs && hasBanner && "pt-[6.5rem]", !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)(require_shell.ContentActions, {
-								hasTabs,
-								route: currentRoute,
-								routePrefix: config.routePrefix
-							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("main", {
 								className: "clarify-main min-w-0 flex-auto",
 								"data-pagefind-body": true,
@@ -624,12 +742,12 @@ function AppShell(arg0) {
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageNavigation, {
 								navigation: currentNavigation.items,
 								currentRoute
-							})
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageFooter, { component: footerComponent })
 						]
-					})]
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageFooter, { component: footerComponent })
-			]
+					})
+				})]
+			})]
 		})
 	});
 }
@@ -1286,6 +1404,183 @@ function createRandomTheme() {
 	};
 }
 //#endregion
+//#region source/theme/variables.ts
+var themeStorageKey = require_PageActions.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(require_PageActions.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 = [
 	{
@@ -1343,18 +1638,24 @@ var layoutFields = [{
 	key: "maxWidth",
 	label: "Max width"
 }];
-var clarifyThemeEditorPresets = require_shell.clarifyThemePresets;
-function applyClarifyThemeVariables(theme, target) {
-	return require_shell.applyThemeCssVariables(require_shell.themeToCssVariables(theme), require_shell.resolveThemeVariableTargets(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) {
@@ -1387,6 +1688,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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "grid min-w-0 gap-1.5",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "text-xs/5 font-medium text-(--clarify-ui-text)",
+			children: label
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "grid grid-cols-2 gap-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorModeInput, {
+				id: `${id}-light`,
+				mode: "light",
+				value: lightValue,
+				onChange: (v) => onChange("light", v)
+			}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("label", {
+		htmlFor: id,
+		className: "grid min-w-0 gap-1 text-[11px]/4 font-medium text-(--clarify-ui-text-faint)",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "flex min-w-0 items-center justify-between gap-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "uppercase tracking-wide",
+				children: mode
+			}), canUseColorInput ? /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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,12 +1752,12 @@ function themeToConfigSource(theme) {
 }
 function ThemeEditor(props) {
 	const { initialTheme, onChange, target, defaultOpen = false, className } = props;
-	const { resolvedTheme } = require_shell.useTheme();
+	const { resolvedTheme } = require_PageActions.useTheme();
 	const [isOpen, setIsOpen] = (0, react.useState)(defaultOpen);
-	const [theme, setTheme] = (0, react.useState)(() => require_shell.cloneTheme(initialTheme ?? clarifyThemeEditorPresets.default));
+	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]);
-	(0, react.useEffect)(() => require_shell.applyThemeCssVariables(require_shell.themeToCssVariables(theme, resolvedTheme), require_shell.resolveThemeVariableTargets(target)), [
+	(0, react.useEffect)(() => applyThemeCssVariables(themeToCssVariables(theme, resolvedTheme), resolveThemeVariableTargets(target)), [
 		resolvedTheme,
 		target,
 		theme
@@ -1411,16 +1767,16 @@ function ThemeEditor(props) {
 		onChange?.(nextTheme);
 	}
 	function updatePreset(nextPreset) {
-		commit(require_shell.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)
 				}
 			}
 		});
@@ -1510,12 +1866,11 @@ function ThemeEditor(props) {
 									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)(TextField, {
+									children: colorTokenFields.map((field) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorField, {
 										id: `clarify-theme-editor-color-${field.key}`,
 										label: field.label,
-										value: require_shell.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))
 								})]
 							}),
@@ -1586,13 +1941,12 @@ function ThemeEditor(props) {
 //#region source/theme/ThemeRoot.tsx
 function ThemeRoot(props) {
 	const { children, theme, themeEditor = false } = props;
-	const { resolvedTheme } = require_shell.useTheme();
-	const themeVariables = (0, react.useMemo)(() => require_shell.themeToCssVariables(theme, resolvedTheme), [resolvedTheme, theme]);
-	(0, react.useEffect)(() => require_shell.applyThemeCssVariables(themeVariables, require_shell.resolveThemeVariableTargets(":root")), [themeVariables]);
+	const { resolvedTheme } = require_PageActions.useTheme();
+	const themeVariables = (0, react.useMemo)(() => themeToCssVariables(theme, resolvedTheme), [resolvedTheme, theme]);
+	(0, react.useEffect)(() => applyThemeCssVariables(themeVariables, resolveThemeVariableTargets(":root")), [themeVariables]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(ThemeEditor, { initialTheme: theme }) : null]
 	});
 }
@@ -1609,6 +1963,12 @@ Object.defineProperty(exports, "BuiltWithClarify", {
 		return BuiltWithClarify;
 	}
 });
+Object.defineProperty(exports, "PageBanner", {
+	enumerable: true,
+	get: function() {
+		return PageBanner;
+	}
+});
 Object.defineProperty(exports, "PageFooter", {
 	enumerable: true,
 	get: function() {
@@ -1627,17 +1987,35 @@ Object.defineProperty(exports, "ThemeRoot", {
 		return ThemeRoot;
 	}
 });
-Object.defineProperty(exports, "applyClarifyThemeVariables", {
+Object.defineProperty(exports, "applyThemeVariables", {
+	enumerable: true,
+	get: function() {
+		return applyThemeVariables;
+	}
+});
+Object.defineProperty(exports, "themeBootstrapScript", {
+	enumerable: true,
+	get: function() {
+		return themeBootstrapScript;
+	}
+});
+Object.defineProperty(exports, "themeEditorPresets", {
+	enumerable: true,
+	get: function() {
+		return themeEditorPresets;
+	}
+});
+Object.defineProperty(exports, "themePresets", {
 	enumerable: true,
 	get: function() {
-		return applyClarifyThemeVariables;
+		return themePresets;
 	}
 });
-Object.defineProperty(exports, "clarifyThemeEditorPresets", {
+Object.defineProperty(exports, "themeStorageKey", {
 	enumerable: true,
 	get: function() {
-		return clarifyThemeEditorPresets;
+		return themeStorageKey;
 	}
 });
 
-//# sourceMappingURL=ThemeRoot-CEvwrGp5.cjs.map
+//# sourceMappingURL=ThemeRoot-UWj0iK1X.cjs.map