@clarify-labs/renderer 0.7.0 → 0.7.2

package/output/{shell-CumiARRe.js → PageActions-yoDRjkq8.js}

@@ -8,16 +8,16 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { AnimatePresence, motion, useIsPresent, useScroll, useTransform } from "framer-motion";
 import { create, createStore, useStore } from "zustand";
 //#region source/core/context.tsx
-var ClarifyConfigContext = createContext(null);
-var ClarifyLocaleContext = createContext(void 0);
+var ConfigContext = createContext(null);
+var LocaleContext = createContext(void 0);
 var OpenApisContext = createContext({});
-function useClarifyConfig() {
-	const config = useContext(ClarifyConfigContext);
-	if (!config) throw new Error("[clarify] useClarifyConfig must be used within a ClarifyConfigContext.Provider");
+function useConfig() {
+	const config = useContext(ConfigContext);
+	if (!config) throw new Error("[clarify] useConfig must be used within a ConfigContext.Provider");
 	return config;
 }
-function useClarifyLocale() {
-	return useContext(ClarifyLocaleContext);
+function useLocale() {
+	return useContext(LocaleContext);
 }
 function useOpenApis() {
 	return useContext(OpenApisContext);
@@ -217,8 +217,8 @@ function translateBuiltInText(locale, key, replacements = {}) {
 	return value;
 }
 function useBuiltInText(locale) {
-	const config = useContext(ClarifyConfigContext);
-	const currentLocale = useContext(ClarifyLocaleContext);
+	const config = useContext(ConfigContext);
+	const currentLocale = useContext(LocaleContext);
 	const resolvedLocale = locale ?? currentLocale ?? config?.i18n?.defaultLocale;
 	return (key, replacements) => translateBuiltInText(resolvedLocale, key, replacements);
 }
@@ -280,7 +280,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] = useState("idle");
 	if (!route?.contentArtifactUrl && !route?.sourceUrl) return null;
@@ -331,29 +331,36 @@ function ContentActions(arg0) {
 	const primaryAction = actions[0];
 	const PrimaryIcon = primaryAction && copied === primaryAction.key ? Check : primaryAction?.icon ?? PencilLine;
 	return /* @__PURE__ */ 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__ */ jsxs(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__ */ 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__ */ 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__ */ 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__ */ jsx(PrimaryIcon, { className: "h-3.5 w-3.5 shrink-0" }), /* @__PURE__ */ jsx("span", {
+						className: "truncate",
+						children: copied === primaryAction.key ? t("actions.copied") : primaryAction.label
+					})]
 				}) : /* @__PURE__ */ 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__ */ 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__ */ jsx(PrimaryIcon, { className: "h-3.5 w-3.5 shrink-0" }), /* @__PURE__ */ jsx("span", {
+						className: "truncate",
+						children: t("contentActions.editPage")
+					})]
 				}), /* @__PURE__ */ jsx(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__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5" })
 				})]
 			}), /* @__PURE__ */ jsxs(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: [
@@ -483,174 +490,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
@@ -661,18 +596,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;
@@ -909,7 +836,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("#");
@@ -927,7 +854,8 @@ function NavLink(arg0) {
 		to: href,
 		"aria-current": active ? "page" : void 0,
 		onClick: handleClick,
-		className: clsx("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: clsx("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__ */ jsxs("span", {
 			className: "flex min-w-0 flex-1 items-center gap-2",
 			children: [
@@ -1071,6 +999,7 @@ function NavigationGroup(arg0) {
 										badge: section.badge,
 										tags: section.tags,
 										isAnchorLink: true,
+										level: section.level,
 										children: section.title
 									}) }, section.id))
 								}) : null
@@ -1805,6 +1734,7 @@ function LanguageSwitcher(arg0) {
 				const selected = locale.code === selectedLocale;
 				return [/* @__PURE__ */ jsx(MenuItem, { children: ({ focus }) => /* @__PURE__ */ jsxs(Link, {
 					to: `${localizedPath}${suffix}`,
+					onClick: () => storeLocalePreference(locale.code),
 					className: clsx("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,
@@ -1833,6 +1763,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();
@@ -1914,10 +1848,12 @@ function ProductTabs(arg0) {
 	});
 }
 var Header = 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 } = useScroll();
 	const bgOpacityLight = useTransform(scrollY, [0, 72], ["70%", "95%"]);
 	const bgOpacityDark = useTransform(scrollY, [0, 72], ["60%", "92%"]);
@@ -1930,83 +1866,119 @@ var Header = forwardRef(function Header(arg0, ref) {
 			"--bg-opacity-light": bgOpacityLight,
 			"--bg-opacity-dark": bgOpacityDark
 		},
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: clsx("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__ */ jsxs("div", {
-					className: "clarify-header-left flex min-w-0 items-center gap-5",
-					children: [/* @__PURE__ */ jsx("div", {
-						className: "clarify-mobile-brand flex items-center gap-5 lg:hidden",
-						children: /* @__PURE__ */ jsx(MobileNavigation, {
-							config,
-							navigation,
-							tabs,
-							routes,
-							currentLocale,
-							currentRoute
-						})
-					}), /* @__PURE__ */ jsxs(CloseButton, {
-						as: 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__ */ jsx(SiteLogo, {
-							logo: config.logo,
-							className: "h-6 w-auto shrink-0 object-contain"
-						}), /* @__PURE__ */ jsx("span", {
-							className: "clarify-brand-title truncate font-semibold",
-							children: config.title
-						})]
-					})]
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: "clarify-header-center absolute left-1/2 hidden -translate-x-1/2 lg:block",
-					children: /* @__PURE__ */ jsx(Search$1, {
-						routes,
-						navigation,
-						routePrefix: config.routePrefix,
-						currentLocale
-					})
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "clarify-header-actions flex shrink-0 items-center gap-5",
-					children: [
-						config.navbar?.links?.length ? /* @__PURE__ */ jsx("nav", {
-							className: "clarify-top-nav hidden md:block",
-							children: /* @__PURE__ */ jsx("ul", {
-								role: "list",
-								className: "flex items-center gap-8",
-								children: config.navbar.links.map((link) => /* @__PURE__ */ jsx(TopLevelNavItem, {
-									href: localizeHref(link.href, config, currentLocale),
-									children: resolveLocalizedText(link.label, currentLocale, config.i18n?.defaultLocale)
-								}, link.href))
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: clsx("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__ */ jsxs("div", {
+						className: "clarify-header-left flex min-w-0 items-center gap-5",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "clarify-mobile-brand flex items-center gap-5 lg:hidden",
+							children: /* @__PURE__ */ jsx(MobileNavigation, {
+								config,
+								navigation,
+								tabs,
+								routes,
+								currentLocale,
+								currentRoute
 							})
-						}) : null,
-						config.navbar?.links?.length ? /* @__PURE__ */ 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__ */ jsx(MobileSearch, {
+						}), homeExternal ? /* @__PURE__ */ jsxs(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__ */ jsx(SiteLogo, {
+								logo: config.logo,
+								className: "h-6 w-auto shrink-0 object-contain"
+							}), /* @__PURE__ */ jsx("span", {
+								className: "clarify-brand-title truncate font-semibold",
+								children: config.title
+							})]
+						}) : /* @__PURE__ */ jsxs(CloseButton, {
+							as: Link,
+							to: homeHref,
+							"aria-label": t("navbar.home"),
+							className: "clarify-brand flex min-w-0 items-center gap-2 no-underline",
+							children: [/* @__PURE__ */ jsx(SiteLogo, {
+								logo: config.logo,
+								className: "h-6 w-auto shrink-0 object-contain"
+							}), /* @__PURE__ */ jsx("span", {
+								className: "clarify-brand-title truncate font-semibold",
+								children: config.title
+							})]
+						})]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "clarify-header-center absolute left-1/2 hidden -translate-x-1/2 lg:block",
+						children: /* @__PURE__ */ jsx(Search$1, {
 							routes,
 							navigation,
 							routePrefix: config.routePrefix,
 							currentLocale
-						}),
-						/* @__PURE__ */ jsx(LanguageSwitcher, {
-							config,
-							currentLocale,
-							currentRoute
-						}),
-						/* @__PURE__ */ jsx(ThemeToggle, {}),
-						/* @__PURE__ */ jsx(MobileNavbarMenu, {
-							links: config.navbar?.links,
-							config,
-							currentLocale
 						})
-					]
-				})
-			]
-		}), /* @__PURE__ */ jsx(ProductTabs, { tabs })]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "clarify-header-actions flex shrink-0 items-center gap-5",
+						children: [
+							config.navbar?.links?.length ? /* @__PURE__ */ jsx("nav", {
+								className: "clarify-top-nav hidden md:block",
+								children: /* @__PURE__ */ jsx("ul", {
+									role: "list",
+									className: "flex items-center gap-8",
+									children: config.navbar.links.map((link) => /* @__PURE__ */ jsx(TopLevelNavItem, {
+										href: localizeHref(link.href, config, currentLocale),
+										children: resolveLocalizedText(link.label, currentLocale, config.i18n?.defaultLocale)
+									}, link.href))
+								})
+							}) : null,
+							config.navbar?.links?.length ? /* @__PURE__ */ 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__ */ jsx(MobileSearch, {
+								routes,
+								navigation,
+								routePrefix: config.routePrefix,
+								currentLocale
+							}),
+							/* @__PURE__ */ jsx(LanguageSwitcher, {
+								config,
+								currentLocale,
+								currentRoute
+							}),
+							/* @__PURE__ */ jsx(ThemeToggle, {}),
+							/* @__PURE__ */ jsx(MobileNavbarMenu, {
+								links: config.navbar?.links,
+								config,
+								currentLocale
+							})
+						]
+					})
+				]
+			}),
+			banner,
+			/* @__PURE__ */ jsx(ProductTabs, { tabs })
+		]
 	});
 });
 //#endregion
-export { OpenApisContext as A, isExternalHref as C, useBuiltInText as D, copyTextToClipboard as E, useClarifyLocale as M, useOpenApis as N, ClarifyConfigContext as O, ContentActions as S, prefixHref as T, resolveThemeColorValue as _, useSectionStore as a, themeStorageKey as b, resolveLucideIconName as c, ThemeToggle as d, ThemeProvider as f, cloneTheme as g, clarifyThemePresets as h, SectionProvider as i, useClarifyConfig as j, ClarifyLocaleContext as k, isSameRoutePath as l, applyThemeCssVariables as m, Navigation as n, remToPx as o, useTheme as p, safeDecodeURIComponent as r, lucideIconRegistry as s, Header as t, normalizeRoutePath as u, resolveThemeVariableTargets as v, localizeHref as w, themeToCssVariables as x, themeBootstrapScript as y };
+//#region source/app/PageActions.tsx
+var PageActionsContext = createContext({});
+function PageActionsProvider(props) {
+	const { children, route, routePrefix } = props;
+	return /* @__PURE__ */ jsx(PageActionsContext.Provider, {
+		value: {
+			route,
+			routePrefix
+		},
+		children
+	});
+}
+function PageTitleActions() {
+	const { route, routePrefix } = useContext(PageActionsContext);
+	return /* @__PURE__ */ jsx(ContentActions, {
+		route,
+		routePrefix
+	});
+}
+//#endregion
+export { OpenApisContext as A, isExternalHref as C, useBuiltInText as D, copyTextToClipboard as E, useLocale as M, useOpenApis as N, ConfigContext as O, themeCookieName as S, prefixHref as T, getStoredThemePreference as _, safeDecodeURIComponent as a, storeLocalePreference as b, remToPx as c, isSameRoutePath as d, normalizeRoutePath as f, getStoredLocalePreference as g, useTheme as h, Navigation as i, useConfig as j, LocaleContext as k, lucideIconRegistry as l, ThemeProvider as m, PageTitleActions as n, SectionProvider as o, ThemeToggle as p, Header as r, useSectionStore as s, PageActionsProvider as t, resolveLucideIconName as u, localeCookieName as v, localizeHref as w, storeThemePreference as x, readLocaleCookie as y };
 
-//# sourceMappingURL=shell-CumiARRe.js.map
+//# sourceMappingURL=PageActions-yoDRjkq8.js.map