@clarify-labs/renderer 0.9.1 → 0.9.2

package/output/{PageActions-DaXQgMYP.js → PageActions-tmnpzi23.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";
@@ -765,49 +765,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 +865,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
@@ -1197,6 +1249,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 +1436,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 +1479,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 +1542,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 +1580,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 +1632,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 +1875,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 +1908,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 +1917,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 +2040,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
@@ -1963,4 +2066,4 @@ 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 };
 
-//# sourceMappingURL=PageActions-DaXQgMYP.js.map
+//# sourceMappingURL=PageActions-tmnpzi23.js.map