@clarify-labs/renderer 0.9.1 → 0.9.3

package/output/{PageActions-GI1t-JrR.cjs → PageActions-DEuFHgyB.cjs}

@@ -81,6 +81,7 @@ var builtInText = {
 		"openapi.language": "Language",
 		"openapi.client": "Client",
 		"openapi.mediaType": "Media type",
+		"openapi.none": "None",
 		"openapi.openApiReference": "OpenAPI Reference",
 		"openapi.operationParameter": "Operation parameter.",
 		"openapi.optional": "Optional.",
@@ -89,6 +90,7 @@ var builtInText = {
 		"openapi.queryParameters": "Query parameters",
 		"openapi.request": "Request",
 		"openapi.requestBody": "Request body",
+		"openapi.responseBodyProperties": "Response body properties",
 		"openapi.required": "Required.",
 		"openapi.requiredBadge": "required",
 		"openapi.response": "Response",
@@ -178,6 +180,7 @@ var builtInText = {
 		"openapi.language": "语言",
 		"openapi.client": "客户端",
 		"openapi.mediaType": "媒体类型",
+		"openapi.none": "无",
 		"openapi.openApiReference": "OpenAPI 参考",
 		"openapi.operationParameter": "操作参数。",
 		"openapi.optional": "可选。",
@@ -186,6 +189,7 @@ var builtInText = {
 		"openapi.queryParameters": "查询参数",
 		"openapi.request": "请求",
 		"openapi.requestBody": "请求体",
+		"openapi.responseBodyProperties": "响应体属性",
 		"openapi.required": "必填。",
 		"openapi.requiredBadge": "必填",
 		"openapi.response": "响应",
@@ -767,49 +771,93 @@ function createSectionStore(sections) {
 		} : section) }))
 	}));
 }
-function getVisibleViewportTop(scrollY, headerRef) {
-	const headerBottom = headerRef?.current?.getBoundingClientRect().bottom ?? 0;
-	return scrollY + Math.max(0, headerBottom);
+function getHeaderBlockedTop(innerHeight, headerTopAreaRef) {
+	const blockedTop = headerTopAreaRef?.current?.offsetHeight ?? 0;
+	return Math.max(0, Math.min(innerHeight, blockedTop));
+}
+function getVisibleViewportTop(scrollY, innerHeight, headerTopAreaRef) {
+	return scrollY + getHeaderBlockedTop(innerHeight, headerTopAreaRef);
+}
+function getVisibleViewportBottom(scrollY, innerHeight, headerTopAreaRef) {
+	const blockedTop = getHeaderBlockedTop(innerHeight, headerTopAreaRef);
+	return scrollY + Math.max(0, innerHeight - blockedTop);
+}
+function computeVisibleSections(sections, scrollY, viewportTop, viewportBottom) {
+	const visibleSections = [];
+	for (let sectionIndex = 0; sectionIndex < sections.length; sectionIndex += 1) {
+		const { id, headingRef, offsetRem = 0 } = sections[sectionIndex];
+		if (!headingRef?.current) continue;
+		const offset = remToPx(offsetRem);
+		const sectionTop = headingRef.current.getBoundingClientRect().top + scrollY - offset;
+		if (sectionIndex === 0 && sectionTop > viewportTop) visibleSections.push("_top");
+		const nextSection = sections[sectionIndex + 1];
+		const nextOffset = remToPx(nextSection?.offsetRem ?? offsetRem);
+		if ((nextSection?.headingRef?.current?.getBoundingClientRect().top ?? Infinity) + scrollY - nextOffset > viewportTop && sectionTop < viewportBottom) visibleSections.push(id);
+	}
+	return visibleSections;
+}
+function useSectionVisibilityDebug(headerTopAreaRef) {
+	const lastDebugSignatureRef = (0, react.useRef)("");
+	return (snapshot) => {
+		const { scrollY, innerHeight, blockedTop, visibleSections } = snapshot;
+		const debugSignature = [
+			Math.round(scrollY),
+			innerHeight,
+			Math.round(blockedTop),
+			visibleSections.join(",")
+		].join("|");
+		if (lastDebugSignatureRef.current === debugSignature) return;
+		lastDebugSignatureRef.current = debugSignature;
+		console.info("[clarify][section-visibility]", {
+			...snapshot,
+			topAreaHeight: headerTopAreaRef?.current?.offsetHeight ?? 0
+		});
+	};
 }
-function useVisibleSections(sectionStore, headerRef) {
-	const setVisibleSections = (0, zustand.useStore)(sectionStore, (state) => state.setVisibleSections);
-	const sections = (0, zustand.useStore)(sectionStore, (state) => state.sections);
+function useSectionVisibilityObserver(checkVisibleSections, headerTopAreaRef) {
 	(0, react.useEffect)(() => {
-		function checkVisibleSections() {
-			const { innerHeight, scrollY } = window;
-			const viewportTop = getVisibleViewportTop(scrollY, headerRef);
-			const viewportBottom = scrollY + innerHeight;
-			const newVisibleSections = [];
-			for (let sectionIndex = 0; sectionIndex < sections.length; sectionIndex += 1) {
-				const { id, headingRef, offsetRem = 0 } = sections[sectionIndex];
-				if (!headingRef?.current) continue;
-				const offset = remToPx(offsetRem);
-				const top = headingRef.current.getBoundingClientRect().top + scrollY;
-				if (sectionIndex === 0 && top - offset > viewportTop) newVisibleSections.push("_top");
-				if ((sections[sectionIndex + 1]?.headingRef?.current?.getBoundingClientRect().top ?? Infinity) + scrollY > viewportTop && top < viewportBottom) newVisibleSections.push(id);
-			}
-			setVisibleSections(newVisibleSections);
-		}
 		const raf = window.requestAnimationFrame(() => checkVisibleSections());
 		window.addEventListener("scroll", checkVisibleSections, { passive: true });
 		window.addEventListener("resize", checkVisibleSections);
+		const resizeObserver = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(() => {
+			checkVisibleSections();
+		});
+		if (resizeObserver && headerTopAreaRef?.current) resizeObserver.observe(headerTopAreaRef.current);
 		return () => {
 			window.cancelAnimationFrame(raf);
 			window.removeEventListener("scroll", checkVisibleSections);
 			window.removeEventListener("resize", checkVisibleSections);
+			resizeObserver?.disconnect();
 		};
+	}, [checkVisibleSections, headerTopAreaRef]);
+}
+function useVisibleSections(sectionStore, headerTopAreaRef) {
+	const setVisibleSections = (0, zustand.useStore)(sectionStore, (state) => state.setVisibleSections);
+	const sections = (0, zustand.useStore)(sectionStore, (state) => state.sections);
+	const emitVisibilityDebug = useSectionVisibilityDebug(headerTopAreaRef);
+	useSectionVisibilityObserver((0, react.useCallback)(() => {
+		const { innerHeight, scrollY } = window;
+		const viewportTop = getVisibleViewportTop(scrollY, innerHeight, headerTopAreaRef);
+		const viewportBottom = getVisibleViewportBottom(scrollY, innerHeight, headerTopAreaRef);
+		const blockedTop = getHeaderBlockedTop(innerHeight, headerTopAreaRef);
+		const newVisibleSections = computeVisibleSections(sections, scrollY, viewportTop, viewportBottom);
+		emitVisibilityDebug({
+			scrollY,
+			innerHeight,
+			blockedTop,
+			viewportTop,
+			viewportBottom,
+			visibleSections: newVisibleSections
+		});
+		setVisibleSections(newVisibleSections);
 	}, [
-		headerRef,
-		setVisibleSections,
-		sections
-	]);
+		emitVisibilityDebug,
+		headerTopAreaRef,
+		sections,
+		setVisibleSections
+	]), headerTopAreaRef);
 }
-var SectionStoreContext = (0, react.createContext)(null);
-var useIsomorphicLayoutEffect = typeof window === "undefined" ? react.useEffect : react.useLayoutEffect;
-function SectionProvider(arg0) {
-	const { sections, headerRef, children } = arg0;
-	const [sectionStore] = (0, react.useState)(() => createSectionStore(sections));
-	useVisibleSections(sectionStore, headerRef);
+function useSyncSections(sectionStore, sections) {
 	useIsomorphicLayoutEffect(() => {
 		sectionStore.setState((state) => ({
 			sections: sections.map((section) => {
@@ -823,6 +871,14 @@ function SectionProvider(arg0) {
 			visibleSections: []
 		}));
 	}, [sectionStore, sections]);
+}
+var SectionStoreContext = (0, react.createContext)(null);
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? react.useEffect : react.useLayoutEffect;
+function SectionProvider(arg0) {
+	const { sections, headerTopAreaRef, children } = arg0;
+	const [sectionStore] = (0, react.useState)(() => createSectionStore(sections));
+	useVisibleSections(sectionStore, headerTopAreaRef);
+	useSyncSections(sectionStore, sections);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionStoreContext.Provider, {
 		value: sectionStore,
 		children
@@ -834,15 +890,6 @@ function useSectionStore(selector) {
 	return (0, zustand.useStore)(store, selector);
 }
 //#endregion
-//#region source/utils/hash.ts
-function safeDecodeURIComponent(value) {
-	try {
-		return decodeURIComponent(value);
-	} catch {
-		return value;
-	}
-}
-//#endregion
 //#region source/shell/Navigation.tsx
 function useInitialValue(value, condition = true) {
 	const [initialValue] = (0, react.useState)(value);
@@ -884,23 +931,10 @@ function SectionBadge(arg0) {
 }
 function NavLink(arg0) {
 	const { href, children, badge, icon, active = false, isAnchorLink = false, level } = arg0;
-	function handleClick() {
-		if (!isAnchorLink) return;
-		const hashIndex = href.indexOf("#");
-		if (hashIndex === -1) return;
-		const targetId = safeDecodeURIComponent(href.slice(hashIndex + 1));
-		window.requestAnimationFrame(() => {
-			document.getElementById(targetId)?.scrollIntoView();
-			window.requestAnimationFrame(() => {
-				window.dispatchEvent(new Event("scroll"));
-			});
-		});
-	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.CloseButton, {
 		as: react_router_dom.Link,
 		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-4"),
 		style: isAnchorLink ? { paddingLeft: `${1.75 + Math.max(0, (level ?? 2) - 2) * .75}rem` } : void 0,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
@@ -1199,6 +1233,7 @@ function routeGroupTitles(navigation) {
 function buildSearchItems(routes, navigation) {
 	const groupTitles = routeGroupTitles(navigation);
 	return routes.flatMap((route) => {
+		if (route.isBareAlias) return [];
 		const groupTitle = groupTitles.get(route.path);
 		return [{
 			title: route.title,
@@ -1385,17 +1420,33 @@ function SearchResult(arg0) {
 }
 //#endregion
 //#region source/shell/search/SearchDialog.tsx
-function SearchDialog(arg0) {
-	const { open, setOpen, routes, navigation, routePrefix = "/", currentLocale, className, onNavigate = () => {} } = arg0;
-	const t = useBuiltInText();
-	const navigate = (0, react_router_dom.useNavigate)();
+function useSearchDialogLifecycle(arg0) {
+	const { open, setOpen } = arg0;
 	const location = (0, react_router_dom.useLocation)();
-	const inputRef = (0, react.useRef)(null);
-	const [query, setQuery] = (0, react.useState)("");
-	const [activeIndex, setActiveIndex] = (0, react.useState)(0);
+	(0, react.useEffect)(() => {
+		setOpen(false);
+	}, [
+		location.pathname,
+		location.search,
+		location.hash,
+		setOpen
+	]);
+	(0, react.useEffect)(() => {
+		if (open) return void 0;
+		function onKeyDown(event) {
+			if (event.key === "k" && (event.metaKey || event.ctrlKey)) {
+				event.preventDefault();
+				setOpen(true);
+			}
+		}
+		window.addEventListener("keydown", onKeyDown);
+		return () => window.removeEventListener("keydown", onKeyDown);
+	}, [open, setOpen]);
+}
+function useSearchData(arg0) {
+	const { query, searchItems, routePrefix, currentLocale } = arg0;
 	const [fullTextState, setFullTextState] = (0, react.useState)(null);
 	const [pagefindState, setPagefindState] = (0, react.useState)(null);
-	const searchItems = (0, react.useMemo)(() => buildSearchItems(routes, navigation), [navigation, routes]);
 	const quickResults = (0, react.useMemo)(() => {
 		const normalizedQuery = query.trim().toLowerCase();
 		if (!normalizedQuery) return [];
@@ -1412,15 +1463,7 @@ function SearchDialog(arg0) {
 	const fullTextKey = `${pagefindKey}:${trimmedQuery}`;
 	const results = (fullTextState?.key === fullTextKey ? fullTextState.results : null) ?? quickResults;
 	const searchInputLoading = pagefindAvailable === null || Boolean(trimmedQuery && pagefind && fullTextState?.key !== fullTextKey);
-	const showNoResults = query && results.length === 0 && pagefindAvailable !== null;
-	(0, react.useEffect)(() => {
-		setOpen(false);
-	}, [
-		location.pathname,
-		location.search,
-		location.hash,
-		setOpen
-	]);
+	const showNoResults = Boolean(query.trim()) && results.length === 0 && pagefindAvailable !== null;
 	(0, react.useEffect)(() => {
 		let cancelled = false;
 		loadPagefind(routePrefix, currentLocale).then((loadedPagefind) => {
@@ -1483,17 +1526,30 @@ function SearchDialog(arg0) {
 		routePrefix,
 		trimmedQuery
 	]);
-	(0, react.useEffect)(() => {
-		if (open) return void 0;
-		function onKeyDown(event) {
-			if (event.key === "k" && (event.metaKey || event.ctrlKey)) {
-				event.preventDefault();
-				setOpen(true);
-			}
-		}
-		window.addEventListener("keydown", onKeyDown);
-		return () => window.removeEventListener("keydown", onKeyDown);
-	}, [open, setOpen]);
+	return {
+		results,
+		searchInputLoading,
+		showNoResults
+	};
+}
+function SearchDialog(arg0) {
+	const { open, setOpen, routes, navigation, routePrefix = "/", currentLocale, className, onNavigate = () => {} } = arg0;
+	const t = useBuiltInText();
+	const navigate = (0, react_router_dom.useNavigate)();
+	const inputRef = (0, react.useRef)(null);
+	const [query, setQuery] = (0, react.useState)("");
+	const [activeIndex, setActiveIndex] = (0, react.useState)(0);
+	const searchItems = (0, react.useMemo)(() => buildSearchItems(routes, navigation), [navigation, routes]);
+	useSearchDialogLifecycle({
+		open,
+		setOpen
+	});
+	const { results, searchInputLoading, showNoResults } = useSearchData({
+		query,
+		searchItems,
+		routePrefix,
+		currentLocale
+	});
 	const updateQuery = (value) => {
 		setQuery(value);
 		setActiveIndex(0);
@@ -1508,6 +1564,29 @@ function SearchDialog(arg0) {
 		onNavigate();
 		closeDialog();
 	}
+	function renderResultsPanel() {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "border-t border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-background) empty:hidden dark:border-zinc-100/5 dark:bg-white/2.5",
+			children: [showNoResults ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "p-6 text-center",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.SearchX, { className: "mx-auto h-5 w-5 stroke-(--clarify-theme-tokens-colors-foreground) dark:stroke-zinc-600" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "mt-2 text-xs text-(--clarify-theme-tokens-colors-muted) dark:text-zinc-400",
+					children: t("search.noResults", { query })
+				})]
+			}) : null, results.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+				id: "clarify-search-results",
+				className: "clarify-search-results",
+				role: "listbox",
+				children: results.map((result, resultIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchResult, {
+					result,
+					query,
+					active: resultIndex === activeIndex,
+					onActive: () => setActiveIndex(resultIndex),
+					onSelect: () => selectResult(result)
+				}, result.type === "full-text" ? result.id : result.url))
+			}) : null]
+		});
+	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.Dialog, {
 		open,
 		onClose: closeDialog,
@@ -1537,27 +1616,7 @@ function SearchDialog(arg0) {
 					onClose: closeDialog,
 					onSubmit: () => selectResult(),
 					loading: searchInputLoading
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "border-t border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-background) empty:hidden dark:border-zinc-100/5 dark:bg-white/2.5",
-					children: [showNoResults ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "p-6 text-center",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.SearchX, { className: "mx-auto h-5 w-5 stroke-(--clarify-theme-tokens-colors-foreground) dark:stroke-zinc-600" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: "mt-2 text-xs text-(--clarify-theme-tokens-colors-muted) dark:text-zinc-400",
-							children: t("search.noResults", { query })
-						})]
-					}) : null, results.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-						id: "clarify-search-results",
-						className: "clarify-search-results",
-						role: "listbox",
-						children: results.map((result, resultIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchResult, {
-							result,
-							query,
-							active: resultIndex === activeIndex,
-							onActive: () => setActiveIndex(resultIndex),
-							onSelect: () => selectResult(result)
-						}, result.type === "full-text" ? result.id : result.url))
-					}) : null]
-				})]
+				}), renderResultsPanel()]
 			})
 		})]
 	});
@@ -1800,6 +1859,7 @@ function ProductTabs(arg0) {
 	const pathname = normalizeRoutePath((0, react_router_dom.useLocation)().pathname);
 	if (!tabs?.length) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-clarify-header-tabs": true,
 		className: "clarify-product-tabs hidden h-14 border-t border-(--clarify-theme-tokens-colors-border) lg:block dark:border-white/10",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
 			className: "clarify-product-tabs-nav mx-auto flex h-full w-full max-w-(--clarify-theme-layout-max-width) items-stretch gap-6 overflow-x-auto px-5",
@@ -1832,7 +1892,7 @@ function ProductTabs(arg0) {
 	});
 }
 var Header = (0, react.forwardRef)(function Header(arg0, ref) {
-	const { config, navigation, tabs, routes, currentLocale, currentRoute, banner, className, ...props } = arg0;
+	const { config, navigation, tabs, routes, currentLocale, currentRoute, banner, topAreaRef, className, ...props } = arg0;
 	const t = useBuiltInText();
 	const { isOpen: mobileNavIsOpen } = useMobileNavigationStore();
 	const isInsideMobileNavigation = useIsInsideMobileNavigation();
@@ -1841,7 +1901,121 @@ var Header = (0, react.forwardRef)(function Header(arg0, ref) {
 	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%"]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.motion.header, {
+	const hasNavbarLinks = Boolean(config.navbar?.links?.length);
+	function renderBrand() {
+		if (homeExternal) return /* @__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
+			})]
+		});
+		return /* @__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
+			})]
+		});
+	}
+	function renderTopLinks() {
+		if (!hasNavbarLinks) return null;
+		return /* @__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))
+			})
+		});
+	}
+	function renderHeaderActions() {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "clarify-header-actions flex shrink-0 items-center gap-5",
+			children: [
+				renderTopLinks(),
+				hasNavbarLinks ? /* @__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
+				})
+			]
+		});
+	}
+	function renderHeaderMain() {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			"data-clarify-header-main": true,
+			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
+						})
+					}), renderBrand()]
+				}),
+				/* @__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
+					})
+				}),
+				renderHeaderActions()
+			]
+		});
+	}
+	function renderTopArea() {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref: topAreaRef,
+			children: [
+				renderHeaderMain(),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					"data-clarify-header-banner": true,
+					children: banner
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProductTabs, { tabs })
+			]
+		});
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.header, {
 		...props,
 		ref,
 		"data-pagefind-ignore": true,
@@ -1850,96 +2024,7 @@ 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
-							})
-						}), 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.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 })
-		]
+		children: renderTopArea()
 	});
 });
 //#endregion
@@ -2107,12 +2192,6 @@ Object.defineProperty(exports, "resolveLucideIconName", {
 		return resolveLucideIconName;
 	}
 });
-Object.defineProperty(exports, "safeDecodeURIComponent", {
-	enumerable: true,
-	get: function() {
-		return safeDecodeURIComponent;
-	}
-});
 Object.defineProperty(exports, "storeLocalePreference", {
 	enumerable: true,
 	get: function() {
@@ -2168,4 +2247,4 @@ Object.defineProperty(exports, "useTheme", {
 	}
 });
 
-//# sourceMappingURL=PageActions-GI1t-JrR.cjs.map
+//# sourceMappingURL=PageActions-DEuFHgyB.cjs.map