@clarify-labs/renderer 0.7.0 → 0.7.2

package/output/{shell-xxhV0p7k.cjs → PageActions-1RDCHcUY.cjs}

@@ -10,16 +10,16 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let framer_motion = require("framer-motion");
 let zustand = require("zustand");
 //#region source/core/context.tsx
-var ClarifyConfigContext = (0, react.createContext)(null);
-var ClarifyLocaleContext = (0, react.createContext)(void 0);
+var ConfigContext = (0, react.createContext)(null);
+var LocaleContext = (0, react.createContext)(void 0);
 var OpenApisContext = (0, react.createContext)({});
-function useClarifyConfig() {
-	const config = (0, react.useContext)(ClarifyConfigContext);
-	if (!config) throw new Error("[clarify] useClarifyConfig must be used within a ClarifyConfigContext.Provider");
+function useConfig() {
+	const config = (0, react.useContext)(ConfigContext);
+	if (!config) throw new Error("[clarify] useConfig must be used within a ConfigContext.Provider");
 	return config;
 }
-function useClarifyLocale() {
-	return (0, react.useContext)(ClarifyLocaleContext);
+function useLocale() {
+	return (0, react.useContext)(LocaleContext);
 }
 function useOpenApis() {
 	return (0, react.useContext)(OpenApisContext);
@@ -219,8 +219,8 @@ function translateBuiltInText(locale, key, replacements = {}) {
 	return value;
 }
 function useBuiltInText(locale) {
-	const config = (0, react.useContext)(ClarifyConfigContext);
-	const currentLocale = (0, react.useContext)(ClarifyLocaleContext);
+	const config = (0, react.useContext)(ConfigContext);
+	const currentLocale = (0, react.useContext)(LocaleContext);
 	const resolvedLocale = locale ?? currentLocale ?? config?.i18n?.defaultLocale;
 	return (key, replacements) => translateBuiltInText(resolvedLocale, key, replacements);
 }
@@ -282,7 +282,7 @@ function getAbsoluteUrl(path) {
 	return new URL(path, window.location.href).href;
 }
 function ContentActions(arg0) {
-	const { hasTabs = false, route, routePrefix } = arg0;
+	const { route, routePrefix } = arg0;
 	const t = useBuiltInText();
 	const [copied, setCopied] = (0, react.useState)("idle");
 	if (!route?.contentArtifactUrl && !route?.sourceUrl) return null;
@@ -333,29 +333,36 @@ function ContentActions(arg0) {
 	const primaryAction = actions[0];
 	const PrimaryIcon = primaryAction && copied === primaryAction.key ? lucide_react.Check : primaryAction?.icon ?? lucide_react.PencilLine;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: `clarify-content-actions pointer-events-none sticky z-20 flex justify-end py-4 ${hasTabs ? "top-16 lg:top-30" : "top-16"}`,
+		className: "clarify-content-actions not-prose flex shrink-0 justify-start sm:justify-end",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.Menu, {
 			as: "div",
-			className: "clarify-content-actions-menu pointer-events-auto relative inline-flex text-sm font-medium",
+			className: "clarify-content-actions-menu relative inline-flex min-w-0 text-sm font-medium",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "clarify-content-actions-group inline-flex overflow-hidden rounded-full border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface)/90 shadow-sm shadow-zinc-900/5 backdrop-blur",
+				className: "clarify-content-actions-group inline-flex min-w-0 overflow-hidden rounded-full border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) shadow-sm shadow-zinc-900/5",
 				children: [primaryAction ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 					type: "button",
 					onClick: primaryAction.run,
-					className: "clarify-content-actions-primary clarify-ui-control inline-flex h-8 items-center gap-1.5 px-3 transition",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PrimaryIcon, { className: "h-3.5 w-3.5" }), copied === primaryAction.key ? t("actions.copied") : primaryAction.label]
+					className: "clarify-content-actions-primary clarify-ui-control inline-flex h-8 min-w-0 items-center gap-1.5 px-2.5 transition sm:px-3",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PrimaryIcon, { className: "h-3.5 w-3.5 shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "truncate",
+						children: copied === primaryAction.key ? t("actions.copied") : primaryAction.label
+					})]
 				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
 					href: route.sourceUrl,
 					target: "_blank",
 					rel: "noreferrer",
-					className: "clarify-content-actions-primary clarify-ui-control inline-flex h-8 items-center gap-1.5 px-3 no-underline transition",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PrimaryIcon, { className: "h-3.5 w-3.5" }), t("contentActions.editPage")]
+					className: "clarify-content-actions-primary clarify-ui-control inline-flex h-8 min-w-0 items-center gap-1.5 px-2.5 no-underline transition sm:px-3",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PrimaryIcon, { className: "h-3.5 w-3.5 shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "truncate",
+						children: t("contentActions.editPage")
+					})]
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuButton, {
 					className: "clarify-content-actions-trigger clarify-ui-control inline-flex h-8 w-8 items-center justify-center border-l border-(--clarify-theme-tokens-colors-border) transition",
 					"aria-label": t("contentActions.copyOptions"),
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: "h-3.5 w-3.5" })
 				})]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.MenuItems, {
+				modal: false,
 				anchor: "bottom end",
 				className: "clarify-content-actions-list clarify-ui-menu z-30 mt-2 w-(--clarify-ui-action-menu-width) origin-top-right rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) p-1.5 shadow-xl shadow-zinc-900/5 transition [--anchor-gap:--spacing(2)] focus:outline-none data-closed:scale-95 data-closed:opacity-0",
 				children: [
@@ -485,174 +492,102 @@ function ContentActions(arg0) {
 	});
 }
 //#endregion
-//#region source/theme/variables.ts
-var themeStorageKey = "clarify:theme";
-var clarifyThemePresets = {
-	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"
-			},
-			radius: {
-				sm: "6px",
-				md: "10px",
-				lg: "14px",
-				xl: "18px"
-			}
-		},
-		layout: { maxWidth: "82rem" },
-		editor: false
-	},
-	base: {
-		preset: "base",
-		tokens: {
-			colors: {
-				primary: "#18181b",
-				accent: "#52525b",
-				background: "#ffffff",
-				foreground: "#18181b",
-				surface: "#ffffff",
-				muted: "#71717a",
-				border: "rgb(24 24 27 / 0.12)",
-				codeBackground: "#f4f4f5"
-			},
-			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 ?? "";
+//#region source/theme/cookies.ts
+var themeCookieName = "clarify-theme";
+var localeCookieName = "clarify-locale";
+var preferenceCookieMaxAge = 3600 * 24 * 365;
+var cookiePath = "/";
+function isThemePreference(value) {
+	return value === "light" || value === "dark" || value === "system";
+}
+function readThemeCookie() {
+	if (typeof document === "undefined") return null;
+	const value = readCookieValue(themeCookieName);
+	return isThemePreference(value) ? value : null;
+}
+function getStoredThemePreference() {
+	return readThemeCookie() ?? "system";
+}
+function storeThemePreference(theme) {
+	storeSharedPreferenceCookie(themeCookieName, theme);
+}
+function readLocaleCookie() {
+	if (typeof document === "undefined") return null;
+	return readCookieValue(localeCookieName);
+}
+function getStoredLocalePreference(locales) {
+	const locale = readLocaleCookie();
+	if (!locale) return null;
+	return locales && !locales.includes(locale) ? null : locale;
+}
+function storeLocalePreference(locale) {
+	storeSharedPreferenceCookie(localeCookieName, locale);
+}
+function storeSharedPreferenceCookie(name, value) {
+	if (typeof document === "undefined") return;
+	const domains = resolveSharedCookieDomains();
+	const domain = resolveWritableSharedCookieDomain(domains, name);
+	deleteCookie(name);
+	for (const candidateDomain of domains) deleteCookie(name, { domain: candidateDomain });
+	writeCookie(name, value, {
+		domain: domain ?? void 0,
+		maxAge: preferenceCookieMaxAge
+	});
 }
-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 resolveSharedCookieDomains(hostname = typeof window !== "undefined" ? window.location.hostname : "") {
+	const normalizedHostname = hostname.toLowerCase().replace(/\.$/, "");
+	if (!normalizedHostname || normalizedHostname === "localhost" || normalizedHostname.endsWith(".localhost") || isIpAddress(normalizedHostname)) return [];
+	const parts = normalizedHostname.split(".");
+	if (parts.length < 2) return [];
+	const domains = [];
+	for (let index = parts.length - 2; index >= 0; index -= 1) domains.push(parts.slice(index).join("."));
+	return domains;
+}
+function resolveWritableSharedCookieDomain(domains, probePrefix = themeCookieName) {
+	for (const domain of domains) {
+		const probeName = `${probePrefix}-probe-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+		const probeValue = "1";
+		writeCookie(probeName, probeValue, {
+			domain,
+			maxAge: 60
+		});
+		const isWritable = readCookieValue(probeName) === probeValue;
+		deleteCookie(probeName, { domain });
+		if (isWritable) return domain;
+	}
+	return null;
+}
+function readCookieValue(cookieName) {
+	const cookies = document.cookie ? document.cookie.split("; ") : [];
+	for (const cookie of cookies) {
+		const separatorIndex = cookie.indexOf("=");
+		const name = separatorIndex === -1 ? cookie : cookie.slice(0, separatorIndex);
+		if (decodeURIComponent(name) !== cookieName) continue;
+		return separatorIndex === -1 ? "" : decodeURIComponent(cookie.slice(separatorIndex + 1));
+	}
+	return null;
 }
-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 deleteCookie(name, options = {}) {
+	writeCookie(name, "", {
+		domain: options.domain,
+		maxAge: 0
 	});
 }
-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;
-	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": resolved.layout.maxWidth
-	};
+function writeCookie(name, value, options) {
+	const attributes = [
+		`${encodeURIComponent(name)}=${encodeURIComponent(value)}`,
+		`Path=${cookiePath}`,
+		`Max-Age=${options.maxAge}`,
+		"SameSite=Lax"
+	];
+	if (options.domain) attributes.push(`Domain=.${options.domain}`);
+	if (typeof window !== "undefined" && window.location.protocol === "https:") attributes.push("Secure");
+	try {
+		document.cookie = attributes.join("; ");
+	} catch {}
 }
-function themeBootstrapScript(theme = clarifyThemePresets.default) {
-	const darkVariables = themeToCssVariables(theme, "dark");
-	const lightVariables = themeToCssVariables(theme, "light");
-	return `(function(){try{var e=localStorage.getItem(${JSON.stringify(themeStorageKey)});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);
-	};
+function isIpAddress(hostname) {
+	return /^\d{1,3}(?:\.\d{1,3}){3}$/.test(hostname) || hostname.includes(":");
 }
 //#endregion
 //#region source/theme/ThemeProvider.tsx
@@ -663,18 +598,10 @@ function getSystemTheme() {
 }
 function getStoredTheme() {
 	if (typeof window === "undefined") return "system";
-	try {
-		const storedTheme = window.localStorage.getItem(themeStorageKey);
-		return storedTheme === "light" || storedTheme === "dark" || storedTheme === "system" ? storedTheme : "system";
-	} catch {
-		return "system";
-	}
+	return getStoredThemePreference();
 }
 function storeTheme(theme) {
-	if (typeof window === "undefined") return;
-	try {
-		window.localStorage.setItem(themeStorageKey, theme);
-	} catch {}
+	storeThemePreference(theme);
 }
 function applyTheme(resolvedTheme) {
 	if (typeof document === "undefined") return;
@@ -911,7 +838,7 @@ function SectionBadge(arg0) {
 	});
 }
 function NavLink(arg0) {
-	const { href, children, badge, icon, active = false, isAnchorLink = false } = arg0;
+	const { href, children, badge, icon, active = false, isAnchorLink = false, level } = arg0;
 	function handleClick() {
 		if (!isAnchorLink) return;
 		const hashIndex = href.indexOf("#");
@@ -929,7 +856,8 @@ function NavLink(arg0) {
 		to: href,
 		"aria-current": active ? "page" : void 0,
 		onClick: handleClick,
-		className: (0, clsx.default)("clarify-navigation-link flex h-8 items-center justify-between gap-2 pr-3 transition", isAnchorLink ? "clarify-navigation-anchor-link pl-7" : "pl-4"),
+		className: (0, clsx.default)("clarify-navigation-link flex h-8 items-center justify-between gap-2 pr-3 transition", isAnchorLink ? "clarify-navigation-anchor-link" : "pl-4"),
+		style: isAnchorLink ? { paddingLeft: `${1.75 + Math.max(0, (level ?? 2) - 2) * .75}rem` } : void 0,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 			className: "flex min-w-0 flex-1 items-center gap-2",
 			children: [
@@ -1073,6 +1001,7 @@ function NavigationGroup(arg0) {
 										badge: section.badge,
 										tags: section.tags,
 										isAnchorLink: true,
+										level: section.level,
 										children: section.title
 									}) }, section.id))
 								}) : null
@@ -1807,6 +1736,7 @@ function LanguageSwitcher(arg0) {
 				const selected = locale.code === selectedLocale;
 				return [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuItem, { children: ({ focus }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_router_dom.Link, {
 					to: `${localizedPath}${suffix}`,
+					onClick: () => storeLocalePreference(locale.code),
 					className: (0, clsx.default)("clarify-language-switcher-item clarify-ui-menu-item flex items-center justify-between rounded-(--clarify-theme-tokens-radius-lg) px-3 py-2 no-underline transition", focus && "clarify-ui-menu-item-focus", selected && "clarify-ui-menu-item-active"),
 					"aria-current": selected ? "true" : void 0,
 					lang: locale.code,
@@ -1835,6 +1765,10 @@ function TopLevelNavItem(arg0) {
 		children
 	}) });
 }
+function resolveHomeHref(config, currentLocale) {
+	const homeUrl = config.homeUrl ?? "/";
+	return isExternalHref(homeUrl) ? homeUrl : localizeHref(homeUrl, config, currentLocale);
+}
 function MobileNavbarMenu(arg0) {
 	const { links, config, currentLocale } = arg0;
 	const t = useBuiltInText();
@@ -1916,10 +1850,12 @@ function ProductTabs(arg0) {
 	});
 }
 var Header = (0, react.forwardRef)(function Header(arg0, ref) {
-	const { config, navigation, tabs, routes, currentLocale, currentRoute, className, ...props } = arg0;
+	const { config, navigation, tabs, routes, currentLocale, currentRoute, banner, className, ...props } = arg0;
 	const t = useBuiltInText();
 	const { isOpen: mobileNavIsOpen } = useMobileNavigationStore();
 	const isInsideMobileNavigation = useIsInsideMobileNavigation();
+	const homeHref = resolveHomeHref(config, currentLocale);
+	const homeExternal = isExternalHref(homeHref);
 	const { scrollY } = (0, framer_motion.useScroll)();
 	const bgOpacityLight = (0, framer_motion.useTransform)(scrollY, [0, 72], ["70%", "95%"]);
 	const bgOpacityDark = (0, framer_motion.useTransform)(scrollY, [0, 72], ["60%", "92%"]);
@@ -1932,105 +1868,135 @@ var Header = (0, react.forwardRef)(function Header(arg0, ref) {
 			"--bg-opacity-light": bgOpacityLight,
 			"--bg-opacity-dark": bgOpacityDark
 		},
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: (0, clsx.default)("clarify-header-main relative mx-auto flex h-14 w-full max-w-(--clarify-theme-layout-max-width) items-center justify-between gap-6 px-4 sm:px-6 lg:px-5", (isInsideMobileNavigation || !mobileNavIsOpen) && "shadow-none"),
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "clarify-header-left flex min-w-0 items-center gap-5",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "clarify-mobile-brand flex items-center gap-5 lg:hidden",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileNavigation, {
-							config,
-							navigation,
-							tabs,
-							routes,
-							currentLocale,
-							currentRoute
-						})
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.CloseButton, {
-						as: react_router_dom.Link,
-						to: localizeHref("/", config, currentLocale),
-						"aria-label": t("navbar.home"),
-						className: "clarify-brand flex min-w-0 items-center gap-2 no-underline",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SiteLogo, {
-							logo: config.logo,
-							className: "h-6 w-auto shrink-0 object-contain"
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "clarify-brand-title truncate font-semibold",
-							children: config.title
-						})]
-					})]
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "clarify-header-center absolute left-1/2 hidden -translate-x-1/2 lg:block",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Search, {
-						routes,
-						navigation,
-						routePrefix: config.routePrefix,
-						currentLocale
-					})
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "clarify-header-actions flex shrink-0 items-center gap-5",
-					children: [
-						config.navbar?.links?.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
-							className: "clarify-top-nav hidden md:block",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-								role: "list",
-								className: "flex items-center gap-8",
-								children: config.navbar.links.map((link) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TopLevelNavItem, {
-									href: localizeHref(link.href, config, currentLocale),
-									children: resolveLocalizedText(link.label, currentLocale, config.i18n?.defaultLocale)
-								}, link.href))
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: (0, clsx.default)("clarify-header-main relative mx-auto flex h-14 w-full max-w-(--clarify-theme-layout-max-width) items-center justify-between gap-6 px-4 sm:px-6 lg:px-5", (isInsideMobileNavigation || !mobileNavIsOpen) && "shadow-none"),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "clarify-header-left flex min-w-0 items-center gap-5",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "clarify-mobile-brand flex items-center gap-5 lg:hidden",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileNavigation, {
+								config,
+								navigation,
+								tabs,
+								routes,
+								currentLocale,
+								currentRoute
 							})
-						}) : null,
-						config.navbar?.links?.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "hidden md:block md:h-5 md:w-px md:bg-(--clarify-theme-tokens-colors-border) md:dark:bg-white/15" }) : null,
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileSearch, {
+						}), homeExternal ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.CloseButton, {
+							as: "a",
+							href: homeHref,
+							"aria-label": t("navbar.home"),
+							className: "clarify-brand flex min-w-0 items-center gap-2 no-underline",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SiteLogo, {
+								logo: config.logo,
+								className: "h-6 w-auto shrink-0 object-contain"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "clarify-brand-title truncate font-semibold",
+								children: config.title
+							})]
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.CloseButton, {
+							as: react_router_dom.Link,
+							to: homeHref,
+							"aria-label": t("navbar.home"),
+							className: "clarify-brand flex min-w-0 items-center gap-2 no-underline",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SiteLogo, {
+								logo: config.logo,
+								className: "h-6 w-auto shrink-0 object-contain"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "clarify-brand-title truncate font-semibold",
+								children: config.title
+							})]
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "clarify-header-center absolute left-1/2 hidden -translate-x-1/2 lg:block",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Search, {
 							routes,
 							navigation,
 							routePrefix: config.routePrefix,
 							currentLocale
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LanguageSwitcher, {
-							config,
-							currentLocale,
-							currentRoute
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThemeToggle, {}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileNavbarMenu, {
-							links: config.navbar?.links,
-							config,
-							currentLocale
 						})
-					]
-				})
-			]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProductTabs, { tabs })]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "clarify-header-actions flex shrink-0 items-center gap-5",
+						children: [
+							config.navbar?.links?.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+								className: "clarify-top-nav hidden md:block",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+									role: "list",
+									className: "flex items-center gap-8",
+									children: config.navbar.links.map((link) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TopLevelNavItem, {
+										href: localizeHref(link.href, config, currentLocale),
+										children: resolveLocalizedText(link.label, currentLocale, config.i18n?.defaultLocale)
+									}, link.href))
+								})
+							}) : null,
+							config.navbar?.links?.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "hidden md:block md:h-5 md:w-px md:bg-(--clarify-theme-tokens-colors-border) md:dark:bg-white/15" }) : null,
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileSearch, {
+								routes,
+								navigation,
+								routePrefix: config.routePrefix,
+								currentLocale
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LanguageSwitcher, {
+								config,
+								currentLocale,
+								currentRoute
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThemeToggle, {}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileNavbarMenu, {
+								links: config.navbar?.links,
+								config,
+								currentLocale
+							})
+						]
+					})
+				]
+			}),
+			banner,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProductTabs, { tabs })
+		]
 	});
 });
 //#endregion
-Object.defineProperty(exports, "ClarifyConfigContext", {
-	enumerable: true,
-	get: function() {
-		return ClarifyConfigContext;
-	}
-});
-Object.defineProperty(exports, "ClarifyLocaleContext", {
+//#region source/app/PageActions.tsx
+var PageActionsContext = (0, react.createContext)({});
+function PageActionsProvider(props) {
+	const { children, route, routePrefix } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageActionsContext.Provider, {
+		value: {
+			route,
+			routePrefix
+		},
+		children
+	});
+}
+function PageTitleActions() {
+	const { route, routePrefix } = (0, react.useContext)(PageActionsContext);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContentActions, {
+		route,
+		routePrefix
+	});
+}
+//#endregion
+Object.defineProperty(exports, "ConfigContext", {
 	enumerable: true,
 	get: function() {
-		return ClarifyLocaleContext;
+		return ConfigContext;
 	}
 });
-Object.defineProperty(exports, "ContentActions", {
+Object.defineProperty(exports, "Header", {
 	enumerable: true,
 	get: function() {
-		return ContentActions;
+		return Header;
 	}
 });
-Object.defineProperty(exports, "Header", {
+Object.defineProperty(exports, "LocaleContext", {
 	enumerable: true,
 	get: function() {
-		return Header;
+		return LocaleContext;
 	}
 });
 Object.defineProperty(exports, "Navigation", {
@@ -2045,6 +2011,18 @@ Object.defineProperty(exports, "OpenApisContext", {
 		return OpenApisContext;
 	}
 });
+Object.defineProperty(exports, "PageActionsProvider", {
+	enumerable: true,
+	get: function() {
+		return PageActionsProvider;
+	}
+});
+Object.defineProperty(exports, "PageTitleActions", {
+	enumerable: true,
+	get: function() {
+		return PageTitleActions;
+	}
+});
 Object.defineProperty(exports, "SectionProvider", {
 	enumerable: true,
 	get: function() {
@@ -2063,28 +2041,22 @@ Object.defineProperty(exports, "ThemeToggle", {
 		return ThemeToggle;
 	}
 });
-Object.defineProperty(exports, "applyThemeCssVariables", {
-	enumerable: true,
-	get: function() {
-		return applyThemeCssVariables;
-	}
-});
-Object.defineProperty(exports, "clarifyThemePresets", {
+Object.defineProperty(exports, "copyTextToClipboard", {
 	enumerable: true,
 	get: function() {
-		return clarifyThemePresets;
+		return copyTextToClipboard;
 	}
 });
-Object.defineProperty(exports, "cloneTheme", {
+Object.defineProperty(exports, "getStoredLocalePreference", {
 	enumerable: true,
 	get: function() {
-		return cloneTheme;
+		return getStoredLocalePreference;
 	}
 });
-Object.defineProperty(exports, "copyTextToClipboard", {
+Object.defineProperty(exports, "getStoredThemePreference", {
 	enumerable: true,
 	get: function() {
-		return copyTextToClipboard;
+		return getStoredThemePreference;
 	}
 });
 Object.defineProperty(exports, "isExternalHref", {
@@ -2099,6 +2071,12 @@ Object.defineProperty(exports, "isSameRoutePath", {
 		return isSameRoutePath;
 	}
 });
+Object.defineProperty(exports, "localeCookieName", {
+	enumerable: true,
+	get: function() {
+		return localeCookieName;
+	}
+});
 Object.defineProperty(exports, "localizeHref", {
 	enumerable: true,
 	get: function() {
@@ -2123,28 +2101,22 @@ Object.defineProperty(exports, "prefixHref", {
 		return prefixHref;
 	}
 });
-Object.defineProperty(exports, "remToPx", {
+Object.defineProperty(exports, "readLocaleCookie", {
 	enumerable: true,
 	get: function() {
-		return remToPx;
+		return readLocaleCookie;
 	}
 });
-Object.defineProperty(exports, "resolveLucideIconName", {
-	enumerable: true,
-	get: function() {
-		return resolveLucideIconName;
-	}
-});
-Object.defineProperty(exports, "resolveThemeColorValue", {
+Object.defineProperty(exports, "remToPx", {
 	enumerable: true,
 	get: function() {
-		return resolveThemeColorValue;
+		return remToPx;
 	}
 });
-Object.defineProperty(exports, "resolveThemeVariableTargets", {
+Object.defineProperty(exports, "resolveLucideIconName", {
 	enumerable: true,
 	get: function() {
-		return resolveThemeVariableTargets;
+		return resolveLucideIconName;
 	}
 });
 Object.defineProperty(exports, "safeDecodeURIComponent", {
@@ -2153,22 +2125,22 @@ Object.defineProperty(exports, "safeDecodeURIComponent", {
 		return safeDecodeURIComponent;
 	}
 });
-Object.defineProperty(exports, "themeBootstrapScript", {
+Object.defineProperty(exports, "storeLocalePreference", {
 	enumerable: true,
 	get: function() {
-		return themeBootstrapScript;
+		return storeLocalePreference;
 	}
 });
-Object.defineProperty(exports, "themeStorageKey", {
+Object.defineProperty(exports, "storeThemePreference", {
 	enumerable: true,
 	get: function() {
-		return themeStorageKey;
+		return storeThemePreference;
 	}
 });
-Object.defineProperty(exports, "themeToCssVariables", {
+Object.defineProperty(exports, "themeCookieName", {
 	enumerable: true,
 	get: function() {
-		return themeToCssVariables;
+		return themeCookieName;
 	}
 });
 Object.defineProperty(exports, "useBuiltInText", {
@@ -2177,16 +2149,16 @@ Object.defineProperty(exports, "useBuiltInText", {
 		return useBuiltInText;
 	}
 });
-Object.defineProperty(exports, "useClarifyConfig", {
+Object.defineProperty(exports, "useConfig", {
 	enumerable: true,
 	get: function() {
-		return useClarifyConfig;
+		return useConfig;
 	}
 });
-Object.defineProperty(exports, "useClarifyLocale", {
+Object.defineProperty(exports, "useLocale", {
 	enumerable: true,
 	get: function() {
-		return useClarifyLocale;
+		return useLocale;
 	}
 });
 Object.defineProperty(exports, "useOpenApis", {
@@ -2208,4 +2180,4 @@ Object.defineProperty(exports, "useTheme", {
 	}
 });
 
-//# sourceMappingURL=shell-xxhV0p7k.cjs.map
+//# sourceMappingURL=PageActions-1RDCHcUY.cjs.map