@clarify-labs/renderer 0.9.1 → 0.9.3

package/output/{PageActions-DaXQgMYP.js → PageActions-B_tSec1f.js}

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { Fragment, Suspense, createContext, forwardRef, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment, Suspense, createContext, forwardRef, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import { CloseButton, Dialog, DialogBackdrop, DialogPanel, Menu, MenuButton, MenuItem, MenuItems, TransitionChild } from "@headlessui/react";
 import * as LucideIcons from "lucide-react";
@@ -79,6 +79,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.",
@@ -87,6 +88,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",
@@ -176,6 +178,7 @@ var builtInText = {
 		"openapi.language": "语言",
 		"openapi.client": "客户端",
 		"openapi.mediaType": "媒体类型",
+		"openapi.none": "无",
 		"openapi.openApiReference": "OpenAPI 参考",
 		"openapi.operationParameter": "操作参数。",
 		"openapi.optional": "可选。",
@@ -184,6 +187,7 @@ var builtInText = {
 		"openapi.queryParameters": "查询参数",
 		"openapi.request": "请求",
 		"openapi.requestBody": "请求体",
+		"openapi.responseBodyProperties": "响应体属性",
 		"openapi.required": "必填。",
 		"openapi.requiredBadge": "必填",
 		"openapi.response": "响应",
@@ -765,49 +769,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 = 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 = useStore(sectionStore, (state) => state.setVisibleSections);
-	const sections = useStore(sectionStore, (state) => state.sections);
+function useSectionVisibilityObserver(checkVisibleSections, headerTopAreaRef) {
 	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 = useStore(sectionStore, (state) => state.setVisibleSections);
+	const sections = useStore(sectionStore, (state) => state.sections);
+	const emitVisibilityDebug = useSectionVisibilityDebug(headerTopAreaRef);
+	useSectionVisibilityObserver(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 = createContext(null);
-var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
-function SectionProvider(arg0) {
-	const { sections, headerRef, children } = arg0;
-	const [sectionStore] = useState(() => createSectionStore(sections));
-	useVisibleSections(sectionStore, headerRef);
+function useSyncSections(sectionStore, sections) {
 	useIsomorphicLayoutEffect(() => {
 		sectionStore.setState((state) => ({
 			sections: sections.map((section) => {
@@ -821,6 +869,14 @@ function SectionProvider(arg0) {
 			visibleSections: []
 		}));
 	}, [sectionStore, sections]);
+}
+var SectionStoreContext = createContext(null);
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function SectionProvider(arg0) {
+	const { sections, headerTopAreaRef, children } = arg0;
+	const [sectionStore] = useState(() => createSectionStore(sections));
+	useVisibleSections(sectionStore, headerTopAreaRef);
+	useSyncSections(sectionStore, sections);
 	return /* @__PURE__ */ jsx(SectionStoreContext.Provider, {
 		value: sectionStore,
 		children
@@ -832,15 +888,6 @@ function useSectionStore(selector) {
 	return 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] = useState(value);
@@ -882,23 +929,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__ */ jsx(CloseButton, {
 		as: Link,
 		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-4"),
 		style: isAnchorLink ? { paddingLeft: `${1.75 + Math.max(0, (level ?? 2) - 2) * .75}rem` } : void 0,
 		children: /* @__PURE__ */ jsxs("span", {
@@ -1197,6 +1231,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,
@@ -1383,17 +1418,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 = useNavigate();
+function useSearchDialogLifecycle(arg0) {
+	const { open, setOpen } = arg0;
 	const location = useLocation();
-	const inputRef = useRef(null);
-	const [query, setQuery] = useState("");
-	const [activeIndex, setActiveIndex] = useState(0);
+	useEffect(() => {
+		setOpen(false);
+	}, [
+		location.pathname,
+		location.search,
+		location.hash,
+		setOpen
+	]);
+	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] = useState(null);
 	const [pagefindState, setPagefindState] = useState(null);
-	const searchItems = useMemo(() => buildSearchItems(routes, navigation), [navigation, routes]);
 	const quickResults = useMemo(() => {
 		const normalizedQuery = query.trim().toLowerCase();
 		if (!normalizedQuery) return [];
@@ -1410,15 +1461,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;
-	useEffect(() => {
-		setOpen(false);
-	}, [
-		location.pathname,
-		location.search,
-		location.hash,
-		setOpen
-	]);
+	const showNoResults = Boolean(query.trim()) && results.length === 0 && pagefindAvailable !== null;
 	useEffect(() => {
 		let cancelled = false;
 		loadPagefind(routePrefix, currentLocale).then((loadedPagefind) => {
@@ -1481,17 +1524,30 @@ function SearchDialog(arg0) {
 		routePrefix,
 		trimmedQuery
 	]);
-	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 = useNavigate();
+	const inputRef = useRef(null);
+	const [query, setQuery] = useState("");
+	const [activeIndex, setActiveIndex] = useState(0);
+	const searchItems = 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);
@@ -1506,6 +1562,29 @@ function SearchDialog(arg0) {
 		onNavigate();
 		closeDialog();
 	}
+	function renderResultsPanel() {
+		return /* @__PURE__ */ 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__ */ jsxs("div", {
+				className: "p-6 text-center",
+				children: [/* @__PURE__ */ jsx(SearchX, { className: "mx-auto h-5 w-5 stroke-(--clarify-theme-tokens-colors-foreground) dark:stroke-zinc-600" }), /* @__PURE__ */ 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__ */ jsx("ul", {
+				id: "clarify-search-results",
+				className: "clarify-search-results",
+				role: "listbox",
+				children: results.map((result, resultIndex) => /* @__PURE__ */ jsx(SearchResult, {
+					result,
+					query,
+					active: resultIndex === activeIndex,
+					onActive: () => setActiveIndex(resultIndex),
+					onSelect: () => selectResult(result)
+				}, result.type === "full-text" ? result.id : result.url))
+			}) : null]
+		});
+	}
 	return /* @__PURE__ */ jsxs(Dialog, {
 		open,
 		onClose: closeDialog,
@@ -1535,27 +1614,7 @@ function SearchDialog(arg0) {
 					onClose: closeDialog,
 					onSubmit: () => selectResult(),
 					loading: searchInputLoading
-				}), /* @__PURE__ */ 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__ */ jsxs("div", {
-						className: "p-6 text-center",
-						children: [/* @__PURE__ */ jsx(SearchX, { className: "mx-auto h-5 w-5 stroke-(--clarify-theme-tokens-colors-foreground) dark:stroke-zinc-600" }), /* @__PURE__ */ 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__ */ jsx("ul", {
-						id: "clarify-search-results",
-						className: "clarify-search-results",
-						role: "listbox",
-						children: results.map((result, resultIndex) => /* @__PURE__ */ jsx(SearchResult, {
-							result,
-							query,
-							active: resultIndex === activeIndex,
-							onActive: () => setActiveIndex(resultIndex),
-							onSelect: () => selectResult(result)
-						}, result.type === "full-text" ? result.id : result.url))
-					}) : null]
-				})]
+				}), renderResultsPanel()]
 			})
 		})]
 	});
@@ -1798,6 +1857,7 @@ function ProductTabs(arg0) {
 	const pathname = normalizeRoutePath(useLocation().pathname);
 	if (!tabs?.length) return null;
 	return /* @__PURE__ */ 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__ */ 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",
@@ -1830,7 +1890,7 @@ function ProductTabs(arg0) {
 	});
 }
 var Header = 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();
@@ -1839,7 +1899,121 @@ var Header = forwardRef(function Header(arg0, ref) {
 	const { scrollY } = useScroll();
 	const bgOpacityLight = useTransform(scrollY, [0, 72], ["70%", "95%"]);
 	const bgOpacityDark = useTransform(scrollY, [0, 72], ["60%", "92%"]);
-	return /* @__PURE__ */ jsxs(motion.header, {
+	const hasNavbarLinks = Boolean(config.navbar?.links?.length);
+	function renderBrand() {
+		if (homeExternal) return /* @__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
+			})]
+		});
+		return /* @__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
+			})]
+		});
+	}
+	function renderTopLinks() {
+		if (!hasNavbarLinks) return null;
+		return /* @__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))
+			})
+		});
+	}
+	function renderHeaderActions() {
+		return /* @__PURE__ */ jsxs("div", {
+			className: "clarify-header-actions flex shrink-0 items-center gap-5",
+			children: [
+				renderTopLinks(),
+				hasNavbarLinks ? /* @__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
+				})
+			]
+		});
+	}
+	function renderHeaderMain() {
+		return /* @__PURE__ */ jsxs("div", {
+			"data-clarify-header-main": true,
+			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
+						})
+					}), renderBrand()]
+				}),
+				/* @__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
+					})
+				}),
+				renderHeaderActions()
+			]
+		});
+	}
+	function renderTopArea() {
+		return /* @__PURE__ */ jsxs("div", {
+			ref: topAreaRef,
+			children: [
+				renderHeaderMain(),
+				/* @__PURE__ */ jsx("div", {
+					"data-clarify-header-banner": true,
+					children: banner
+				}),
+				/* @__PURE__ */ jsx(ProductTabs, { tabs })
+			]
+		});
+	}
+	return /* @__PURE__ */ jsx(motion.header, {
 		...props,
 		ref,
 		"data-pagefind-ignore": true,
@@ -1848,96 +2022,7 @@ 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
-							})
-						}), 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__ */ 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 })
-		]
+		children: renderTopArea()
 	});
 });
 //#endregion
@@ -1961,6 +2046,6 @@ function PageTitleActions() {
 	});
 }
 //#endregion
-export { LocaleContext as A, themeCookieName as C, copyTextToClipboard as D, prefixHref as E, useConfig as M, useLocale as N, useBuiltInText as O, useOpenApis as P, storeThemePreference as S, localizeHref as T, getStoredLocalePreference as _, safeDecodeURIComponent as a, readLocaleCookie as b, remToPx as c, isSameRoutePath as d, normalizeRoutePath as f, useTheme as g, ThemeProvider as h, Navigation as i, OpenApisContext as j, ConfigContext as k, lucideIconRegistry as l, ThemeToggle as m, PageTitleActions as n, SectionProvider as o, resolveLocalizedText as p, Header as r, useSectionStore as s, PageActionsProvider as t, resolveLucideIconName as u, getStoredThemePreference as v, isExternalHref as w, storeLocalePreference as x, localeCookieName as y };
+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 _, SectionProvider as a, storeLocalePreference as b, lucideIconRegistry as c, normalizeRoutePath as d, resolveLocalizedText as f, getStoredLocalePreference as g, useTheme as h, Navigation as i, useConfig as j, LocaleContext as k, resolveLucideIconName as l, ThemeProvider as m, PageTitleActions as n, useSectionStore as o, ThemeToggle as p, Header as r, remToPx as s, PageActionsProvider as t, isSameRoutePath as u, localeCookieName as v, localizeHref as w, storeThemePreference as x, readLocaleCookie as y };
 
-//# sourceMappingURL=PageActions-DaXQgMYP.js.map
+//# sourceMappingURL=PageActions-B_tSec1f.js.map