@clarify-labs/renderer 0.1.0 → 0.4.0

package/output/{AppShell-C_bj6ZhV.js → AppShell-nQnuKyn2.js}

@@ -1,12 +1,12 @@
+import clsx from "clsx";
 import { AnimatePresence, motion, useInView, useIsPresent, useScroll, useTransform } from "framer-motion";
-import { Children, Fragment, Suspense, createContext, forwardRef, isValidElement, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Children, Fragment, Suspense, createContext, forwardRef, isValidElement, lazy, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Link, Route, Routes, useLocation, useNavigate } from "react-router-dom";
 import { create, createStore, useStore } from "zustand";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import { CloseButton, Dialog, DialogBackdrop, DialogPanel, Menu, MenuButton, MenuItem, MenuItems, Tab, TabGroup, TabList, TabPanel, TabPanels, Transition, TransitionChild } from "@headlessui/react";
 import * as LucideIcons from "lucide-react";
-import { Check, ChevronDown, Copy, Link2 } from "lucide-react";
+import { AlertTriangle, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, Copy, ExternalLink, FileText, Info, Lightbulb, Link2, MoreHorizontal, XCircle } from "lucide-react";
+import { CloseButton, Dialog, DialogBackdrop, DialogPanel, Menu, MenuButton, MenuItem, MenuItems, Tab, TabGroup, TabList, TabPanel, TabPanels, Transition, TransitionChild } from "@headlessui/react";
 //#region source/utils/remToPx.ts
 function remToPx(remValue) {
 	return remValue * (typeof window === "undefined" ? 16 : Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize));
@@ -61,7 +61,14 @@ function SectionProvider(arg0) {
 	const [sectionStore] = useState(() => createSectionStore(sections));
 	useVisibleSections(sectionStore);
 	useIsomorphicLayoutEffect(() => {
-		sectionStore.setState({ sections });
+		sectionStore.setState((state) => ({ sections: sections.map((section) => {
+			const registeredSection = state.sections.find((item) => item.id === section.id);
+			return {
+				...section,
+				headingRef: registeredSection?.headingRef,
+				offsetRem: registeredSection?.offsetRem ?? section.offsetRem
+			};
+		}) }));
 	}, [sectionStore, sections]);
 	return /* @__PURE__ */ jsx(SectionStoreContext.Provider, {
 		value: sectionStore,
@@ -74,110 +81,179 @@ function useSectionStore(selector) {
 	return useStore(store, selector);
 }
 //#endregion
-//#region source/components/SiteLogo.tsx
-function SiteLogo(arg0) {
-	const { logo, className } = arg0;
-	if (!logo) return null;
-	if (typeof logo === "string") return /* @__PURE__ */ jsx("img", {
-		src: logo,
-		alt: "",
-		className: clsx("clarify-logo", className)
-	});
-	const lightLogo = logo.light ?? logo.dark;
-	const darkLogo = logo.dark ?? logo.light;
-	if (!lightLogo || !darkLogo) return null;
-	if (lightLogo === darkLogo) return /* @__PURE__ */ jsx("img", {
-		src: lightLogo,
-		alt: "",
-		className: clsx("clarify-logo", className)
-	});
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("img", {
-		src: lightLogo,
-		alt: "",
-		className: clsx("clarify-logo clarify-logo-light", className, "dark:hidden")
-	}), /* @__PURE__ */ jsx("img", {
-		src: darkLogo,
-		alt: "",
-		className: clsx("clarify-logo clarify-logo-dark", className, "hidden dark:block")
-	})] });
+//#region source/context.tsx
+var ClarifyConfigContext = createContext(null);
+var ClarifyLocaleContext = 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");
+	return config;
+}
+function useOpenApis() {
+	return useContext(OpenApisContext);
 }
 //#endregion
-//#region source/shell/ContentActions.tsx
-function resolveRawContentUrl(rawContentUrl, routePrefix = "/") {
-	if (!routePrefix || routePrefix === "/") return rawContentUrl;
-	return `/${routePrefix.replace(/^\/+|\/+$/g, "")}${rawContentUrl}`;
+//#region source/i18n.ts
+var builtInText = {
+	en: {
+		"actions.code": "Code",
+		"actions.copy": "Copy",
+		"actions.copied": "Copied!",
+		"builtWith.label": "Built with Clarify",
+		"builtWith.prefix": "Built with",
+		"callout.danger": "Danger",
+		"callout.info": "Info",
+		"callout.note": "Note",
+		"callout.success": "Success",
+		"callout.tip": "Tip",
+		"callout.warning": "Warning",
+		"contentActions.copyContent": "Copy page",
+		"contentActions.copyContentDescription": "Copy this page as {contentType} for LLMs",
+		"contentActions.copyLink": "Copy {contentType} link",
+		"contentActions.copyLinkDescription": "Copy the raw {contentType} content link for this page",
+		"contentActions.copyOptions": "Choose copy option",
+		"contentActions.copiedContent": "Copied page",
+		"contentActions.copiedLink": "Copied link",
+		"contentActions.viewMarkdown": "View as Markdown",
+		"contentActions.viewMarkdownDescription": "View this page as plain text",
+		"contentActions.viewOpenApi": "View raw OpenAPI",
+		"contentActions.viewOpenApiDescription": "Open the API description file in a new tab",
+		"feedback.no": "No",
+		"feedback.prompt": "Was this page helpful?",
+		"feedback.thanks": "Thanks for your feedback!",
+		"feedback.yes": "Yes",
+		"navigation.documentation": "Documentation",
+		"navigation.next": "Next",
+		"navigation.previous": "Previous",
+		"navigation.previousNext": "Previous and next pages",
+		"navigation.toggle": "Toggle navigation",
+		"navbar.home": "Home",
+		"navbar.openLinks": "Open navigation links",
+		"navbar.sections": "Documentation sections",
+		"openapi.apiDocumentation": "API Documentation",
+		"openapi.bodyProperties": "Body properties",
+		"openapi.collapse": "Collapse",
+		"openapi.endpointNotFound": "Endpoint not found: {endpoint}",
+		"openapi.example": "Example",
+		"openapi.expand": "Expand",
+		"openapi.headers": "Headers",
+		"openapi.language": "Language",
+		"openapi.client": "Client",
+		"openapi.mediaType": "Media type",
+		"openapi.openApiReference": "OpenAPI Reference",
+		"openapi.operationParameter": "Operation parameter.",
+		"openapi.optional": "Optional.",
+		"openapi.parameter": "parameter",
+		"openapi.pathParameters": "Path parameters",
+		"openapi.queryParameters": "Query parameters",
+		"openapi.request": "Request",
+		"openapi.requestBody": "Request body",
+		"openapi.required": "Required.",
+		"openapi.requiredBadge": "required",
+		"openapi.response": "Response",
+		"openapi.responses": "Responses",
+		"openapi.schemaExample": "Schema example",
+		"openapi.scrollExamplesLeft": "Scroll examples left",
+		"openapi.scrollExamplesRight": "Scroll examples right",
+		"openapi.specNotFound": "OpenAPI spec not found: {specPath}",
+		"openapi.specPathMissing": "spec or specPath was not provided",
+		"openapi.status": "Status",
+		"openapi.version": "Version {version}",
+		"search.button": "Search...",
+		"search.noResults": "Nothing found for {query}.",
+		"search.placeholder": "Find something...",
+		"search.shortcutCtrl": "Ctrl ",
+		"theme.switchToDark": "Switch to dark theme",
+		"theme.switchToLight": "Switch to light theme",
+		"language.switch": "Switch language"
+	},
+	"zh-CN": {
+		"actions.code": "代码",
+		"actions.copy": "复制",
+		"actions.copied": "已复制！",
+		"builtWith.label": "由 Clarify 构建",
+		"builtWith.prefix": "构建来自",
+		"callout.danger": "危险",
+		"callout.info": "信息",
+		"callout.note": "注意",
+		"callout.success": "成功",
+		"callout.tip": "提示",
+		"callout.warning": "警告",
+		"contentActions.copyContent": "复制页面",
+		"contentActions.copyContentDescription": "将页面以 {contentType} 格式复制给 LLMs",
+		"contentActions.copyLink": "复制 {contentType} 链接",
+		"contentActions.copyLinkDescription": "复制当前页面的 {contentType} 原始内容链接",
+		"contentActions.copyOptions": "选择复制选项",
+		"contentActions.copiedContent": "已复制页面",
+		"contentActions.copiedLink": "已复制链接",
+		"contentActions.viewMarkdown": "以 Markdown 格式查看",
+		"contentActions.viewMarkdownDescription": "以纯文本查看此页面",
+		"contentActions.viewOpenApi": "查看 OpenAPI 原始内容",
+		"contentActions.viewOpenApiDescription": "在新标签页打开 API 描述文件",
+		"feedback.no": "否",
+		"feedback.prompt": "这个页面有帮助吗？",
+		"feedback.thanks": "感谢你的反馈！",
+		"feedback.yes": "是",
+		"navigation.documentation": "文档",
+		"navigation.next": "下一页",
+		"navigation.previous": "上一页",
+		"navigation.previousNext": "上一页和下一页",
+		"navigation.toggle": "切换导航",
+		"navbar.home": "首页",
+		"navbar.openLinks": "打开导航链接",
+		"navbar.sections": "文档栏目",
+		"openapi.apiDocumentation": "API 文档",
+		"openapi.bodyProperties": "请求体属性",
+		"openapi.collapse": "收起",
+		"openapi.endpointNotFound": "未找到端点：{endpoint}",
+		"openapi.example": "示例",
+		"openapi.expand": "展开",
+		"openapi.headers": "请求头",
+		"openapi.language": "语言",
+		"openapi.client": "客户端",
+		"openapi.mediaType": "媒体类型",
+		"openapi.openApiReference": "OpenAPI 参考",
+		"openapi.operationParameter": "操作参数。",
+		"openapi.optional": "可选。",
+		"openapi.parameter": "参数",
+		"openapi.pathParameters": "路径参数",
+		"openapi.queryParameters": "查询参数",
+		"openapi.request": "请求",
+		"openapi.requestBody": "请求体",
+		"openapi.required": "必填。",
+		"openapi.requiredBadge": "必填",
+		"openapi.response": "响应",
+		"openapi.responses": "响应",
+		"openapi.schemaExample": "Schema 示例",
+		"openapi.scrollExamplesLeft": "向左滚动示例",
+		"openapi.scrollExamplesRight": "向右滚动示例",
+		"openapi.specNotFound": "未找到 OpenAPI 描述文件：{specPath}",
+		"openapi.specPathMissing": "未提供 spec 或 specPath",
+		"openapi.status": "状态",
+		"openapi.version": "版本 {version}",
+		"search.button": "搜索...",
+		"search.noResults": "没有找到与 {query} 相关的结果。",
+		"search.placeholder": "搜索内容...",
+		"search.shortcutCtrl": "Ctrl ",
+		"theme.switchToDark": "切换到深色主题",
+		"theme.switchToLight": "切换到浅色主题",
+		"language.switch": "切换语言"
+	}
+};
+function resolveBuiltInLocale(locale) {
+	return locale === "zh-CN" || locale?.toLowerCase().startsWith("zh") ? "zh-CN" : "en";
 }
-function getAbsoluteUrl(path) {
-	if (typeof window === "undefined") return path;
-	return new URL(path, window.location.href).href;
+function translateBuiltInText(locale, key, replacements = {}) {
+	let value = builtInText[resolveBuiltInLocale(locale)]?.[key] ?? builtInText.en[key];
+	for (const [name, replacement] of Object.entries(replacements)) value = value.replaceAll(`{${name}}`, replacement);
+	return value;
 }
-async function copyText(text) {
-	await navigator.clipboard.writeText(text);
-}
-function ContentActions(arg0) {
-	const { route, routePrefix } = arg0;
-	const [copied, setCopied] = useState("idle");
-	if (!route?.rawContentUrl) return null;
-	const rawContentUrl = resolveRawContentUrl(route.rawContentUrl, routePrefix);
-	const isOpenApi = route.kind === "openapi";
-	const contentLabel = isOpenApi ? "复制 OpenAPI 内容" : "复制 Markdown 内容";
-	const linkLabel = isOpenApi ? "复制 OpenAPI 链接" : "复制 Markdown 链接";
-	function markCopied(state) {
-		setCopied(state);
-		window.setTimeout(() => setCopied("idle"), 1600);
-	}
-	async function handleCopyContent() {
-		await copyText(await (await fetch(rawContentUrl)).text());
-		markCopied("content");
-	}
-	async function handleCopyLink() {
-		await copyText(getAbsoluteUrl(rawContentUrl));
-		markCopied("link");
-	}
-	const actions = [{
-		key: "content",
-		label: contentLabel,
-		icon: Copy,
-		run: handleCopyContent
-	}, {
-		key: "link",
-		label: linkLabel,
-		icon: Link2,
-		run: handleCopyLink
-	}];
-	const primaryAction = actions[0];
-	return /* @__PURE__ */ jsx("div", {
-		className: "clarify-content-actions sticky top-16 z-20 flex justify-end py-4",
-		children: /* @__PURE__ */ jsxs(Menu, {
-			as: "div",
-			className: "clarify-content-actions-menu relative inline-flex text-xs font-medium",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "clarify-content-actions-group inline-flex overflow-hidden rounded-full border border-zinc-900/10 bg-white/85 backdrop-blur dark:border-white/10 dark:bg-white/5",
-				children: [/* @__PURE__ */ jsxs("button", {
-					type: "button",
-					onClick: primaryAction.run,
-					className: "clarify-content-actions-primary inline-flex h-8 items-center gap-1.5 px-3 text-zinc-600 transition hover:bg-zinc-100 hover:text-zinc-950 dark:text-zinc-300 dark:hover:bg-white/10 dark:hover:text-white",
-					children: [copied === primaryAction.key ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(primaryAction.icon, { className: "h-3.5 w-3.5" }), copied === primaryAction.key ? "已复制" : "复制页面"]
-				}), /* @__PURE__ */ jsx(MenuButton, {
-					className: "clarify-content-actions-trigger inline-flex h-8 w-8 items-center justify-center border-l border-zinc-900/10 text-zinc-500 transition hover:bg-zinc-100 hover:text-zinc-950 dark:border-white/10 dark:text-zinc-400 dark:hover:bg-white/10 dark:hover:text-white",
-					"aria-label": "选择复制选项",
-					children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5" })
-				})]
-			}), /* @__PURE__ */ jsx(MenuItems, {
-				anchor: "bottom end",
-				className: "clarify-content-actions-list z-30 mt-2 w-52 origin-top-right rounded-2xl border border-zinc-900/10 bg-white p-1 text-xs shadow-md transition [--anchor-gap:--spacing(2)] focus:outline-none data-closed:scale-95 data-closed:opacity-0 dark:border-white/10 dark:bg-zinc-900",
-				children: actions.map((action) => {
-					const Icon = copied === action.key ? Check : action.icon;
-					return /* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsxs("button", {
-						type: "button",
-						onClick: action.run,
-						className: "clarify-content-actions-item flex w-full items-center gap-2 rounded-xl px-3 py-2 text-left text-zinc-600 transition data-focus:bg-zinc-100 data-focus:text-zinc-950 dark:text-zinc-300 dark:data-focus:bg-white/10 dark:data-focus:text-white",
-						children: [/* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ jsx("span", { children: copied === action.key ? "已复制" : action.label })]
-					}) }, action.key);
-				})
-			})]
-		})
-	});
+function useBuiltInText(locale) {
+	const config = useContext(ClarifyConfigContext);
+	const currentLocale = useContext(ClarifyLocaleContext);
+	const resolvedLocale = locale ?? currentLocale ?? config?.i18n?.defaultLocale;
+	return (key, replacements) => translateBuiltInText(resolvedLocale, key, replacements);
 }
 //#endregion
 //#region source/components/BuiltWithClarify.tsx
@@ -205,23 +281,163 @@ function ClarifyMark(props) {
 	});
 }
 function BuiltWithClarify() {
+	const t = useBuiltInText();
 	return /* @__PURE__ */ jsxs("a", {
 		href: "https://clarify.pub",
 		target: "_blank",
 		rel: "noreferrer",
-		"aria-label": "Built with Clarify",
-		className: "clarify-built-with inline-flex items-center gap-1.5 rounded-full px-2 py-1 text-xs font-medium text-zinc-500 no-underline transition hover:bg-zinc-900/2.5 hover:text-zinc-900 dark:text-zinc-500 dark:hover:bg-white/5 dark:hover:text-white",
+		"aria-label": t("builtWith.label"),
+		className: "clarify-built-with inline-flex items-center gap-1.5 rounded-full px-2 py-1 font-medium no-underline transition",
 		children: [
-			/* @__PURE__ */ jsx("span", { children: "Built with" }),
+			/* @__PURE__ */ jsx("span", { children: t("builtWith.prefix") }),
 			/* @__PURE__ */ jsx(ClarifyMark, { className: "clarify-built-with-logo h-3.5 w-5 flex-none" }),
 			/* @__PURE__ */ jsx("span", {
-				className: "font-semibold text-zinc-700 dark:text-zinc-300",
+				className: "clarify-built-with-brand font-semibold",
 				children: "Clarify"
 			})
 		]
 	});
 }
 //#endregion
+//#region source/components/Callout.tsx
+var calloutStyles = {
+	info: {
+		container: "border-sky-500/20 bg-sky-50/50 text-sky-950 dark:border-sky-400/30 dark:bg-sky-400/5 dark:text-sky-100",
+		icon: "text-sky-600 dark:text-sky-400",
+		title: "text-sky-900 dark:text-sky-100",
+		Icon: Info
+	},
+	note: {
+		container: "border-zinc-500/20 bg-zinc-50 text-zinc-900 dark:border-white/10 dark:bg-white/5 dark:text-zinc-200",
+		icon: "text-zinc-500 dark:text-zinc-400",
+		title: "text-zinc-900 dark:text-white",
+		Icon: Info
+	},
+	tip: {
+		container: "border-emerald-500/20 bg-emerald-50/50 text-emerald-950 dark:border-emerald-400/30 dark:bg-emerald-400/5 dark:text-emerald-100",
+		icon: "text-emerald-600 dark:text-emerald-400",
+		title: "text-emerald-900 dark:text-emerald-100",
+		Icon: Lightbulb
+	},
+	warning: {
+		container: "border-amber-500/20 bg-amber-50/70 text-amber-950 dark:border-amber-400/30 dark:bg-amber-400/5 dark:text-amber-100",
+		icon: "text-amber-600 dark:text-amber-400",
+		title: "text-amber-900 dark:text-amber-100",
+		Icon: AlertTriangle
+	},
+	danger: {
+		container: "border-rose-500/20 bg-rose-50/70 text-rose-950 dark:border-rose-400/30 dark:bg-rose-400/5 dark:text-rose-100",
+		icon: "text-rose-600 dark:text-rose-400",
+		title: "text-rose-900 dark:text-rose-100",
+		Icon: XCircle
+	},
+	success: {
+		container: "border-emerald-500/20 bg-emerald-50/50 text-emerald-950 dark:border-emerald-400/30 dark:bg-emerald-400/5 dark:text-emerald-100",
+		icon: "text-emerald-600 dark:text-emerald-400",
+		title: "text-emerald-900 dark:text-emerald-100",
+		Icon: CheckCircle2
+	}
+};
+var defaultTitleKeys = {
+	info: "callout.info",
+	note: "callout.note",
+	tip: "callout.tip",
+	warning: "callout.warning",
+	danger: "callout.danger",
+	success: "callout.success"
+};
+function Callout(arg0) {
+	const { children, type = "info", title, icon = true, className, ...props } = arg0;
+	const t = useBuiltInText();
+	const style = calloutStyles[type];
+	const Icon = style.Icon;
+	const resolvedTitle = title === void 0 ? t(defaultTitleKeys[type]) : title;
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("clarify-callout my-6 flex gap-3 rounded-(--clarify-theme-tokens-radius-xl) border p-4 text-sm/6", style.container, className),
+		...props,
+		children: [icon ? /* @__PURE__ */ jsx(Icon, {
+			className: clsx("mt-1 size-4 flex-none", style.icon),
+			"aria-hidden": "true"
+		}) : null, /* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 flex-1 *:first:mt-0 *:last:mb-0",
+			children: [resolvedTitle ? /* @__PURE__ */ jsx("p", {
+				className: clsx("mb-1 font-semibold", style.title),
+				children: resolvedTitle
+			}) : null, /* @__PURE__ */ jsx("div", {
+				className: "*:first:mt-0 *:last:mb-0",
+				children
+			})]
+		})]
+	});
+}
+//#endregion
+//#region source/components/Card.tsx
+function toPascalCase(value) {
+	return value.split(/[^a-zA-Z0-9]+/).filter(Boolean).map((part) => `${part.charAt(0).toUpperCase()}${part.slice(1)}`).join("");
+}
+function CardIcon(arg0) {
+	const { name } = arg0;
+	if (!name) return null;
+	const Icon = LucideIcons[toPascalCase(name)];
+	if (!Icon) return null;
+	return /* @__PURE__ */ jsx("span", {
+		className: "flex size-9 flex-none items-center justify-center rounded-[var(--clarify-theme-tokens-radius-lg)] bg-(--clarify-ui-accent-background) text-(--clarify-ui-accent-text) ring-1 ring-(--clarify-ui-accent-border)",
+		children: /* @__PURE__ */ jsx(Icon, {
+			className: "size-5",
+			"aria-hidden": "true"
+		})
+	});
+}
+var cardGroupColumnStyles = {
+	1: "grid-cols-1",
+	2: "grid-cols-1 sm:grid-cols-2",
+	3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+	4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
+};
+function CardGroup(arg0) {
+	const { children, cols = 2, className } = arg0;
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("not-prose my-10 grid gap-4", cardGroupColumnStyles[cols], className),
+		children
+	});
+}
+function Card(arg0) {
+	const { title, icon, href, children, className, ...props } = arg0;
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "flex items-start gap-4",
+		children: [/* @__PURE__ */ jsx(CardIcon, { name: icon }), /* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 flex-1",
+			children: [/* @__PURE__ */ jsx("h3", {
+				className: "m-0 text-base font-semibold text-[var(--clarify-theme-tokens-colors-foreground)] dark:text-white",
+				children: title
+			}), children ? /* @__PURE__ */ jsx("div", {
+				className: "mt-2 text-sm/6 text-[var(--clarify-theme-tokens-colors-muted)] dark:text-zinc-400 *:m-0",
+				children
+			}) : null]
+		})]
+	}), href ? /* @__PURE__ */ jsx("span", {
+		className: "absolute inset-0 rounded-[var(--clarify-theme-tokens-radius-xl)]",
+		"aria-hidden": "true"
+	}) : null] });
+	const classes = clsx("group relative block rounded-[var(--clarify-theme-tokens-radius-xl)] border border-[color:var(--clarify-theme-tokens-colors-border)] bg-[var(--clarify-theme-tokens-colors-surface)] p-5 shadow-sm shadow-(--clarify-ui-accent-glow) transition hover:border-(--clarify-ui-accent-border) hover:shadow-md dark:bg-zinc-900/50", className);
+	if (!href) return /* @__PURE__ */ jsx("div", {
+		className: classes,
+		children: content
+	});
+	if (href.startsWith("/") && !href.startsWith("//")) return /* @__PURE__ */ jsx(Link, {
+		to: href,
+		className: classes,
+		...props,
+		children: content
+	});
+	return /* @__PURE__ */ jsx("a", {
+		href,
+		className: classes,
+		...props,
+		children: content
+	});
+}
+//#endregion
 //#region source/components/Code.tsx
 var languageNames = {
 	js: "JavaScript",
@@ -240,10 +456,10 @@ var languageNames = {
 	json: "JSON"
 };
 function getPanelTitle(arg0) {
-	const { title, language } = arg0;
+	const { title, language, fallbackTitle = "Code" } = arg0;
 	if (title) return title;
 	if (language && language in languageNames) return languageNames[language];
-	return "Code";
+	return fallbackTitle;
 }
 function getNodeText(node) {
 	if (typeof node === "string" || typeof node === "number") return String(node);
@@ -251,7 +467,7 @@ function getNodeText(node) {
 	if (isValidElement(node)) return getNodeText(node.props.children);
 	return "";
 }
-function ClipboardIcon(props) {
+function ClipboardIcon$1(props) {
 	return /* @__PURE__ */ jsxs("svg", {
 		viewBox: "0 0 20 20",
 		"aria-hidden": "true",
@@ -268,6 +484,7 @@ function ClipboardIcon(props) {
 }
 function CopyButton(arg0) {
 	const { code } = arg0;
+	const t = useBuiltInText();
 	const [copyCount, setCopyCount] = useState(0);
 	const copied = copyCount > 0;
 	useEffect(() => {
@@ -278,7 +495,7 @@ function CopyButton(arg0) {
 	if (!code) return null;
 	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
-		className: clsx("clarify-code-copy group/button absolute top-3.5 right-4 overflow-hidden rounded-full py-1 pr-3 pl-2 text-2xs font-medium opacity-0 backdrop-blur-sm transition group-hover:opacity-100 focus:opacity-100", copied ? "bg-emerald-400/10 ring-1 ring-emerald-400/20 ring-inset" : "bg-white/5 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5"),
+		className: clsx("clarify-code-copy group/button absolute top-3.5 right-4 overflow-hidden rounded-full py-1 pr-3 pl-2 text-2xs font-medium opacity-0 backdrop-blur-sm transition group-hover:opacity-100 focus:opacity-100", copied ? "bg-[color-mix(in_srgb,var(--clarify-theme-tokens-colors-primary)_12%,transparent)] ring-1 ring-[color-mix(in_srgb,var(--clarify-theme-tokens-colors-primary)_24%,transparent)] ring-inset" : "bg-white/5 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5"),
 		onClick: () => {
 			window.navigator.clipboard.writeText(code).then(() => {
 				setCopyCount((count) => count + 1);
@@ -287,11 +504,11 @@ function CopyButton(arg0) {
 		children: [/* @__PURE__ */ jsxs("span", {
 			"aria-hidden": copied,
 			className: clsx("pointer-events-none flex items-center gap-0.5 text-zinc-400 transition duration-300", copied && "-translate-y-1.5 opacity-0"),
-			children: [/* @__PURE__ */ jsx(ClipboardIcon, { className: "h-5 w-5 fill-zinc-500/20 stroke-zinc-500 transition-colors group-hover/button:stroke-zinc-400" }), "Copy"]
+			children: [/* @__PURE__ */ jsx(ClipboardIcon$1, { className: "h-5 w-5 fill-zinc-500/20 stroke-zinc-500 transition-colors group-hover/button:stroke-zinc-400" }), t("actions.copy")]
 		}), /* @__PURE__ */ jsx("span", {
 			"aria-hidden": !copied,
-			className: clsx("pointer-events-none absolute inset-0 flex items-center justify-center text-emerald-400 transition duration-300", !copied && "translate-y-1.5 opacity-0"),
-			children: "Copied!"
+			className: clsx("pointer-events-none absolute inset-0 flex items-center justify-center text-[var(--clarify-theme-tokens-colors-primary)] transition duration-300", !copied && "translate-y-1.5 opacity-0"),
+			children: t("actions.copied")
 		})]
 	});
 }
@@ -302,7 +519,7 @@ function CodePanelHeader(arg0) {
 		className: "clarify-code-panel-header flex h-9 items-center gap-2 border-y border-t-transparent border-b-white/7.5 bg-zinc-900 px-4 dark:border-b-white/5 dark:bg-white/1",
 		children: [
 			tag ? /* @__PURE__ */ jsx("span", {
-				className: "font-mono text-[0.625rem]/6 font-semibold text-emerald-400",
+				className: "font-mono text-[0.625rem]/6 font-semibold text-[var(--clarify-theme-tokens-colors-primary)]",
 				children: tag
 			}) : null,
 			tag && label ? /* @__PURE__ */ jsx("span", { className: "h-0.5 w-0.5 rounded-full bg-zinc-500" }) : null,
@@ -340,6 +557,7 @@ function CodePanel(arg0) {
 }
 function CodeGroupHeader(arg0) {
 	const { title, children, selectedIndex } = arg0;
+	const t = useBuiltInText();
 	const hasTabs = Children.count(children) > 1;
 	if (!title && !hasTabs) return null;
 	return /* @__PURE__ */ jsxs("div", {
@@ -350,8 +568,11 @@ function CodeGroupHeader(arg0) {
 		}) : null, hasTabs ? /* @__PURE__ */ jsx(TabList, {
 			className: "clarify-code-tabs -mb-px flex gap-4 text-xs font-medium",
 			children: Children.map(children, (child, childIndex) => /* @__PURE__ */ jsx(Tab, {
-				className: clsx("clarify-code-tab border-b py-3 transition data-selected:not-data-focus:outline-hidden", childIndex === selectedIndex ? "border-emerald-500 text-emerald-400" : "border-transparent text-zinc-400 hover:text-zinc-300"),
-				children: getPanelTitle(isValidElement(child) ? child.props : {})
+				className: clsx("clarify-code-tab border-b py-3 transition data-selected:not-data-focus:outline-hidden", childIndex === selectedIndex ? "border-[var(--clarify-theme-tokens-colors-primary)] text-[var(--clarify-theme-tokens-colors-primary)]" : "border-transparent text-zinc-400 hover:text-zinc-300"),
+				children: getPanelTitle({
+					...isValidElement(child) ? child.props : {},
+					fallbackTitle: t("actions.code")
+				})
 			}))
 		}) : null]
 	});
@@ -412,7 +633,11 @@ function useTabGroupProps(availableLanguages) {
 var CodeGroupContext = createContext(false);
 function CodeGroup(arg0) {
 	const { children, title, ...props } = arg0;
-	const tabGroupProps = useTabGroupProps(Children.map(children, (child) => getPanelTitle(isValidElement(child) ? child.props : {})) ?? []);
+	const t = useBuiltInText();
+	const tabGroupProps = useTabGroupProps(Children.map(children, (child) => getPanelTitle({
+		...isValidElement(child) ? child.props : {},
+		fallbackTitle: t("actions.code")
+	})) ?? []);
 	const hasTabs = Children.count(children) > 1;
 	const containerClassName = "clarify-code-group my-6 overflow-hidden rounded-2xl bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10";
 	const header = /* @__PURE__ */ jsx(CodeGroupHeader, {
@@ -491,6 +716,7 @@ function FeedbackButton(props) {
 }
 var FeedbackForm = forwardRef(function FeedbackForm(arg0, ref) {
 	const { onSubmit, className, ...props } = arg0;
+	const t = useBuiltInText();
 	return /* @__PURE__ */ jsxs("form", {
 		...props,
 		ref,
@@ -498,18 +724,18 @@ var FeedbackForm = forwardRef(function FeedbackForm(arg0, ref) {
 		className: clsx(className, "clarify-feedback-form absolute inset-0 flex items-center justify-center gap-6 md:justify-start"),
 		children: [/* @__PURE__ */ jsx("p", {
 			className: "text-sm text-zinc-600 dark:text-zinc-400",
-			children: "Was this page helpful?"
+			children: t("feedback.prompt")
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "clarify-feedback-actions group grid h-8 grid-cols-[1fr_1px_1fr] overflow-hidden rounded-full border border-zinc-900/10 dark:border-white/10",
 			children: [
 				/* @__PURE__ */ jsx(FeedbackButton, {
 					"data-response": "yes",
-					children: "Yes"
+					children: t("feedback.yes")
 				}),
 				/* @__PURE__ */ jsx("div", { className: "bg-zinc-900/10 dark:bg-white/10" }),
 				/* @__PURE__ */ jsx(FeedbackButton, {
 					"data-response": "no",
-					children: "No"
+					children: t("feedback.no")
 				})
 			]
 		})]
@@ -517,13 +743,14 @@ var FeedbackForm = forwardRef(function FeedbackForm(arg0, ref) {
 });
 var FeedbackThanks = forwardRef(function FeedbackThanks(arg0, ref) {
 	const { className, ...props } = arg0;
+	const t = useBuiltInText();
 	return /* @__PURE__ */ jsx("div", {
 		...props,
 		ref,
 		className: clsx(className, "clarify-feedback-thanks absolute inset-0 flex justify-center md:justify-start"),
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-3 rounded-full bg-emerald-50/50 py-1 pr-3 pl-1.5 text-sm text-emerald-900 ring-1 ring-emerald-500/20 ring-inset dark:bg-emerald-500/5 dark:text-emerald-200 dark:ring-emerald-500/30",
-			children: [/* @__PURE__ */ jsx(CheckIcon$1, { className: "h-5 w-5 flex-none fill-emerald-500 stroke-white dark:fill-emerald-200/20 dark:stroke-emerald-200" }), "Thanks for your feedback!"]
+			className: "flex items-center gap-3 rounded-full bg-(--clarify-ui-accent-background) py-1 pr-3 pl-1.5 text-sm text-(--clarify-ui-accent-text) ring-1 ring-(--clarify-ui-accent-border) ring-inset",
+			children: [/* @__PURE__ */ jsx(CheckIcon$1, { className: "h-5 w-5 flex-none fill-(--clarify-ui-accent-text) stroke-white dark:fill-(--clarify-ui-accent-background) dark:stroke-(--clarify-ui-accent-text)" }), t("feedback.thanks")]
 		})
 	});
 });
@@ -595,7 +822,7 @@ function HeroPattern() {
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "absolute top-0 left-1/2 -ml-152 h-100 w-325 dark:mask-[linear-gradient(white,transparent)]",
 			children: [/* @__PURE__ */ jsx("div", {
-				className: "absolute inset-0 bg-linear-to-r from-[#36b49f] to-[#DBFF75] opacity-40 mask-[radial-gradient(farthest-side_at_top,white,transparent)] dark:from-[#36b49f]/30 dark:to-[#DBFF75]/30 dark:opacity-100",
+				className: "absolute inset-0 bg-[linear-gradient(to_right,var(--clarify-theme-tokens-colors-primary),var(--clarify-theme-tokens-colors-accent))] opacity-35 mask-[radial-gradient(farthest-side_at_top,white,transparent)] dark:opacity-55",
 				children: /* @__PURE__ */ jsx(GridPattern, {
 					width: 72,
 					height: 56,
@@ -619,18 +846,6 @@ function HeroPattern() {
 	});
 }
 //#endregion
-//#region source/context.tsx
-var ClarifyConfigContext = createContext(null);
-var OpenApisContext = createContext({});
-function useClarifyConfig() {
-	const config = useContext(ClarifyConfigContext);
-	if (!config) throw new Error("[clarify] useClarifyConfig must be used within a ClarifyConfigContext.Provider");
-	return config;
-}
-function useOpenApis() {
-	return useContext(OpenApisContext);
-}
-//#endregion
 //#region source/components/PageFooter.tsx
 function resolveLocalizedText$1(text, locale, fallbackLocale) {
 	if (typeof text === "string") return text;
@@ -658,7 +873,7 @@ function FooterLink(arg0) {
 		href: external ? link.href : localizeHref$1(link.href, config, locale),
 		target: external ? "_blank" : void 0,
 		rel: external ? "noreferrer" : void 0,
-		className: "clarify-footer-link text-sm text-zinc-500 no-underline transition hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white",
+		className: "clarify-footer-link no-underline transition",
 		children: resolveLocalizedText$1(link.label, locale, config.i18n?.defaultLocale)
 	});
 }
@@ -668,7 +883,7 @@ function SocialLink(arg0) {
 		href,
 		target: "_blank",
 		rel: "noreferrer",
-		className: "clarify-footer-social text-sm capitalize text-zinc-500 no-underline transition hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white",
+		className: "clarify-footer-social capitalize no-underline transition",
 		children: name
 	});
 }
@@ -681,11 +896,11 @@ function PageFooter() {
 	const copyright = footer?.copyright ? resolveLocalizedText$1(footer.copyright, locale, config.i18n?.defaultLocale) : void 0;
 	const hasCustomFooter = Boolean(copyright || links.length > 0 || socials.length > 0);
 	return /* @__PURE__ */ jsxs("footer", {
-		className: clsx("clarify-page-footer mx-auto mt-16 flex w-full max-w-3xl flex-col items-end gap-4 border-t border-zinc-900/10 pt-8 xl:max-w-[56rem] 2xl:max-w-[64rem] dark:border-white/10", hasCustomFooter && "sm:flex-row sm:items-center sm:justify-between"),
+		className: clsx("clarify-page-footer mx-auto mt-16 flex w-full max-w-(--clarify-theme-layout-max-width) flex-col items-end gap-4 border-t border-(--clarify-theme-tokens-colors-border) px-4 py-8 sm:px-6 lg:mt-24 lg:px-5 dark:border-white/10", hasCustomFooter && "sm:flex-row sm:items-center sm:justify-between"),
 		children: [hasCustomFooter ? /* @__PURE__ */ jsxs("div", {
 			className: "clarify-footer-content flex flex-col gap-3 text-right sm:text-left",
 			children: [copyright ? /* @__PURE__ */ jsx("p", {
-				className: "clarify-footer-copyright m-0 text-sm text-zinc-500 dark:text-zinc-400",
+				className: "clarify-footer-copyright m-0",
 				children: copyright
 			}) : null, links.length > 0 || socials.length > 0 ? /* @__PURE__ */ jsxs("div", {
 				className: "clarify-footer-links flex flex-wrap justify-end gap-x-4 gap-y-2 sm:justify-start",
@@ -705,6 +920,95 @@ function PageFooter() {
 	});
 }
 //#endregion
+//#region source/utils/path.ts
+function normalizeRoutePath(path) {
+	const [pathname, suffix = ""] = path.split(/([?#].*)/, 2);
+	return `${pathname.replace(/^\/+/, "/").replace(/\/+$/, "") || "/"}${suffix}`;
+}
+function isSameRoutePath(a, b) {
+	if (!a || !b) return false;
+	return normalizeRoutePath(a) === normalizeRoutePath(b);
+}
+//#endregion
+//#region source/components/PageNavigation.tsx
+function flattenNavigation(nodes) {
+	return nodes.flatMap((node) => node.children?.length ? flattenNavigation(node.children) : [node]);
+}
+function PageNavigation(arg0) {
+	const { navigation, currentRoute } = arg0;
+	const t = useBuiltInText();
+	if (!currentRoute) return null;
+	const pageRoutes = flattenNavigation(navigation);
+	const currentIndex = pageRoutes.findIndex((route) => isSameRoutePath(route.path, currentRoute.path));
+	if (currentIndex === -1) return null;
+	const previous = pageRoutes[currentIndex - 1];
+	const next = pageRoutes[currentIndex + 1];
+	if (!previous && !next) return null;
+	return /* @__PURE__ */ jsxs("nav", {
+		className: "clarify-page-navigation mt-6 grid gap-3 @3xl:grid-cols-2",
+		"aria-label": t("navigation.previousNext"),
+		children: [/* @__PURE__ */ jsx(PageNavigationLink, {
+			direction: "previous",
+			route: previous
+		}), /* @__PURE__ */ jsx(PageNavigationLink, {
+			direction: "next",
+			route: next
+		})]
+	});
+}
+function PageNavigationLink(arg0) {
+	const { direction, route } = arg0;
+	const t = useBuiltInText();
+	if (!route) return /* @__PURE__ */ jsx("div", { className: "hidden @3xl:block" });
+	const isNext = direction === "next";
+	return /* @__PURE__ */ jsxs(Link, {
+		to: normalizeRoutePath(route.path),
+		className: clsx("group flex min-w-0 items-center gap-3 rounded-lg border border-(--clarify-theme-tokens-colors-border) px-4 py-3 no-underline transition hover:border-(--clarify-theme-tokens-colors-primary) hover:bg-(--clarify-theme-tokens-colors-surface) dark:border-white/10 dark:hover:border-(--clarify-theme-tokens-colors-primary) dark:hover:bg-white/2.5", isNext && "@3xl:justify-end @3xl:text-right"),
+		children: [
+			!isNext ? /* @__PURE__ */ jsx(ChevronLeft, { className: "h-3.5 w-3.5 shrink-0 text-(--clarify-theme-tokens-colors-muted) transition group-hover:text-(--clarify-theme-tokens-colors-primary)" }) : null,
+			/* @__PURE__ */ jsxs("span", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "block text-[0.6875rem] font-medium uppercase tracking-wide text-(--clarify-theme-tokens-colors-muted)",
+					children: isNext ? t("navigation.next") : t("navigation.previous")
+				}), /* @__PURE__ */ jsx("span", {
+					className: "mt-0.5 block truncate text-[0.8125rem] font-semibold text-(--clarify-theme-tokens-colors-foreground) dark:text-white",
+					children: route.title
+				})]
+			}),
+			isNext ? /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5 shrink-0 text-(--clarify-theme-tokens-colors-muted) transition group-hover:text-(--clarify-theme-tokens-colors-primary)" }) : null
+		]
+	});
+}
+//#endregion
+//#region source/components/SiteLogo.tsx
+function SiteLogo(arg0) {
+	const { logo, className } = arg0;
+	if (!logo) return null;
+	if (typeof logo === "string") return /* @__PURE__ */ jsx("img", {
+		src: logo,
+		alt: "",
+		className: clsx("clarify-logo", className)
+	});
+	const lightLogo = logo.light ?? logo.dark;
+	const darkLogo = logo.dark ?? logo.light;
+	if (!lightLogo || !darkLogo) return null;
+	if (lightLogo === darkLogo) return /* @__PURE__ */ jsx("img", {
+		src: lightLogo,
+		alt: "",
+		className: clsx("clarify-logo", className)
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("img", {
+		src: lightLogo,
+		alt: "",
+		className: clsx("clarify-logo clarify-logo-light", className, "dark:hidden")
+	}), /* @__PURE__ */ jsx("img", {
+		src: darkLogo,
+		alt: "",
+		className: clsx("clarify-logo clarify-logo-dark", className, "hidden dark:block")
+	})] });
+}
+//#endregion
 //#region source/components/ThemeProvider.tsx
 var ThemeContext = createContext(null);
 var storageKey = "clarify:theme";
@@ -783,15 +1087,16 @@ function MoonIcon(props) {
 }
 function ThemeToggle() {
 	const { resolvedTheme, setTheme } = useTheme();
+	const t = useBuiltInText();
 	const otherTheme = resolvedTheme === "dark" ? "light" : "dark";
 	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
-		className: "clarify-theme-toggle flex size-6 items-center justify-center rounded-md transition hover:bg-zinc-900/5 dark:hover:bg-white/5",
-		"aria-label": `Switch to ${otherTheme} theme`,
+		className: "clarify-theme-toggle relative flex size-8 items-center justify-center rounded-(--clarify-theme-tokens-radius-md) transition hover:bg-[color-mix(in_srgb,var(--clarify-theme-tokens-colors-foreground)_5%,transparent)] dark:hover:bg-white/5",
+		"aria-label": otherTheme === "dark" ? t("theme.switchToDark") : t("theme.switchToLight"),
 		onClick: () => setTheme(otherTheme),
 		children: [
 			/* @__PURE__ */ jsx("span", { className: "absolute size-12 pointer-fine:hidden" }),
-			/* @__PURE__ */ jsx(SunIcon, { className: "h-5 w-5 stroke-zinc-900 dark:hidden" }),
+			/* @__PURE__ */ jsx(SunIcon, { className: "h-5 w-5 stroke-(--clarify-theme-tokens-colors-foreground) dark:hidden" }),
 			/* @__PURE__ */ jsx(MoonIcon, { className: "hidden h-5 w-5 stroke-white dark:block" })
 		]
 	});
@@ -813,11 +1118,11 @@ function ArrowIcon(props) {
 	});
 }
 var buttonVariantStyles = {
-	primary: "rounded-full bg-zinc-900 px-3 py-1 text-white hover:bg-zinc-700 dark:bg-emerald-400/10 dark:text-emerald-400 dark:ring-1 dark:ring-inset dark:ring-emerald-400/20 dark:hover:text-emerald-300 dark:hover:ring-emerald-300",
-	secondary: "rounded-full bg-zinc-100 px-3 py-1 text-zinc-900 hover:bg-zinc-200 dark:bg-zinc-800/40 dark:text-zinc-400 dark:ring-1 dark:ring-inset dark:ring-zinc-800 dark:hover:bg-zinc-800 dark:hover:text-zinc-300",
-	filled: "rounded-full bg-zinc-900 px-3 py-1 text-white hover:bg-zinc-700 dark:bg-emerald-500 dark:hover:bg-emerald-400",
-	outline: "rounded-full px-3 py-1 text-zinc-700 ring-1 ring-inset ring-zinc-900/10 hover:bg-zinc-900/2.5 hover:text-zinc-900 dark:text-zinc-400 dark:ring-white/10 dark:hover:bg-white/5 dark:hover:text-white",
-	text: "text-emerald-500 hover:text-emerald-600 dark:text-emerald-400 dark:hover:text-emerald-500"
+	primary: "rounded-full bg-(--clarify-theme-tokens-colors-foreground) px-3 py-1 text-white hover:opacity-80 dark:bg-(--clarify-theme-tokens-colors-primary)/10 dark:text-(--clarify-theme-tokens-colors-primary) dark:ring-1 dark:ring-inset dark:ring-(--clarify-theme-tokens-colors-primary)/20 dark:hover:opacity-80",
+	secondary: "rounded-full bg-(--clarify-theme-tokens-colors-code-background) px-3 py-1 text-(--clarify-theme-tokens-colors-foreground) hover:opacity-80 dark:bg-zinc-800/40 dark:text-zinc-400 dark:ring-1 dark:ring-inset dark:ring-zinc-800 dark:hover:bg-zinc-800 dark:hover:text-zinc-300",
+	filled: "rounded-full bg-(--clarify-theme-tokens-colors-foreground) px-3 py-1 text-white hover:opacity-80 dark:bg-(--clarify-theme-tokens-colors-primary) dark:hover:opacity-80",
+	outline: "rounded-full px-3 py-1 text-(--clarify-theme-tokens-colors-muted) ring-1 ring-inset ring-(--clarify-theme-tokens-colors-border) hover:bg-[color-mix(in_srgb,var(--clarify-theme-tokens-colors-foreground)_2.5%,transparent)] hover:text-(--clarify-theme-tokens-colors-foreground) dark:text-zinc-400 dark:ring-white/10 dark:hover:bg-white/5 dark:hover:text-white",
+	text: "text-(--clarify-theme-tokens-colors-primary) hover:opacity-80 dark:text-(--clarify-theme-tokens-colors-primary) dark:hover:opacity-80"
 };
 function Button(arg0) {
 	const { variant = "primary", className, children, arrow, ...props } = arg0;
@@ -861,8 +1166,8 @@ var tagColorStyles = {
 		medium: "bg-rose-50 text-red-500 ring-rose-200 dark:bg-rose-400/10 dark:text-rose-400 dark:ring-rose-500/20"
 	},
 	zinc: {
-		small: "text-zinc-400 dark:text-zinc-500",
-		medium: "bg-zinc-50 text-zinc-500 ring-zinc-200 dark:bg-zinc-400/10 dark:text-zinc-400 dark:ring-zinc-500/20"
+		small: "text-(--clarify-theme-tokens-colors-muted) dark:text-zinc-500",
+		medium: "bg-(--clarify-theme-tokens-colors-code-background) text-(--clarify-theme-tokens-colors-muted) ring-(--clarify-theme-tokens-colors-border) dark:bg-zinc-400/10 dark:text-zinc-400 dark:ring-zinc-500/20"
 	}
 };
 var tagValueColorMap = {
@@ -877,7 +1182,7 @@ function Tag(arg0) {
 	const value = typeof children === "string" ? children.toUpperCase() : "";
 	const resolvedColor = color ?? tagValueColorMap[value] ?? "emerald";
 	return /* @__PURE__ */ jsx("span", {
-		className: clsx("clarify-tag font-mono text-[0.625rem]/6 font-semibold", tagVariantStyles[variant], tagColorStyles[resolvedColor][variant]),
+		className: clsx("clarify-tag font-mono text-[0.625rem]/6 font-bold", tagVariantStyles[variant], tagColorStyles[resolvedColor][variant]),
 		children
 	});
 }
@@ -888,10 +1193,10 @@ function Logo(props) {
 		...props,
 		className: clsx("clarify-logo", props.className),
 		children: [/* @__PURE__ */ jsx("path", {
-			className: "fill-emerald-400",
+			className: "fill-(--clarify-theme-tokens-colors-primary)",
 			d: "M16 8a5 5 0 0 0-5-5H5a5 5 0 0 0-5 5v13.927a1 1 0 0 0 1.623.782l3.684-2.93a4 4 0 0 1 2.49-.87H11a5 5 0 0 0 5-5V8Z"
 		}), /* @__PURE__ */ jsx("path", {
-			className: "fill-zinc-900 dark:fill-white",
+			className: "fill-(--clarify-theme-tokens-colors-foreground) dark:fill-white",
 			d: "M26.538 18h2.654v-3.999h2.576c2.672 0 4.456-1.723 4.456-4.333V9.65c0-2.61-1.784-4.333-4.456-4.333h-5.23V18Zm4.58-10.582c1.52 0 2.416.8 2.416 2.241v.018c0 1.441-.896 2.25-2.417 2.25h-1.925V7.418h1.925ZM38.051 18h2.566v-5.414c0-1.371.923-2.206 2.382-2.206.396 0 .791.061 1.178.15V8.287a3.843 3.843 0 0 0-.958-.123c-1.257 0-2.136.615-2.443 1.661h-.159V8.323h-2.566V18Zm11.55.202c2.979 0 4.772-1.88 4.772-5.036v-.018c0-3.128-1.82-5.036-4.773-5.036-2.953 0-4.772 1.916-4.772 5.036v.018c0 3.146 1.793 5.036 4.772 5.036Zm0-2.013c-1.372 0-2.145-1.116-2.145-3.023v-.018c0-1.89.782-3.023 2.144-3.023 1.354 0 2.145 1.134 2.145 3.023v.018c0 1.907-.782 3.023-2.145 3.023Zm10.52 1.846c.492 0 .967-.053 1.283-.114v-1.907a6.057 6.057 0 0 1-.755.044c-.87 0-1.24-.387-1.24-1.257v-4.544h1.995V8.323H59.41V6.012h-2.592v2.311h-1.495v1.934h1.495v5.133c0 1.88.949 2.645 3.304 2.645Zm7.287.167c2.98 0 4.772-1.88 4.772-5.036v-.018c0-3.128-1.82-5.036-4.772-5.036-2.954 0-4.773 1.916-4.773 5.036v.018c0 3.146 1.793 5.036 4.773 5.036Zm0-2.013c-1.372 0-2.145-1.116-2.145-3.023v-.018c0-1.89.782-3.023 2.145-3.023 1.353 0 2.144 1.134 2.144 3.023v.018c0 1.907-.782 3.023-2.144 3.023Zm10.767 2.013c2.522 0 4.034-1.353 4.297-3.463l.01-.053h-2.374l-.017.036c-.229.966-.853 1.467-1.908 1.467-1.37 0-2.135-1.08-2.135-3.04v-.018c0-1.934.755-3.006 2.135-3.006 1.099 0 1.74.615 1.908 1.556l.008.017h2.391v-.026c-.228-2.162-1.749-3.56-4.315-3.56-3.033 0-4.738 1.837-4.738 5.019v.017c0 3.217 1.714 5.054 4.738 5.054Zm10.257 0c2.98 0 4.772-1.88 4.772-5.036v-.018c0-3.128-1.82-5.036-4.772-5.036-2.953 0-4.773 1.916-4.773 5.036v.018c0 3.146 1.793 5.036 4.773 5.036Zm0-2.013c-1.371 0-2.145-1.116-2.145-3.023v-.018c0-1.89.782-3.023 2.145-3.023 1.353 0 2.144 1.134 2.144 3.023v.018c0 1.907-.782 3.023-2.144 3.023ZM95.025 18h2.566V4.623h-2.566V18Z"
 		})]
 	});
@@ -899,7 +1204,7 @@ function Logo(props) {
 function Prose(arg0) {
 	const { as, className, ...props } = arg0;
 	return /* @__PURE__ */ jsx(as ?? "div", {
-		className: clsx(className, "clarify-prose prose dark:prose-invert", "[html_:where(&>*)]:mx-auto [html_:where(&>*)]:w-full [html_:where(&>*)]:max-w-3xl xl:[html_:where(&>*)]:max-w-[56rem] 2xl:[html_:where(&>*)]:max-w-[64rem] [html_:where(&>.not-prose)]:max-w-5xl 2xl:[html_:where(&>.not-prose)]:max-w-[76rem]"),
+		className: clsx(className, "clarify-prose prose max-w-none dark:prose-invert", "[html_:where(&>*)]:w-full [html_:where(&>*)]:min-w-0 [html_:where(&>*)]:max-w-full"),
 		...props
 	});
 }
@@ -943,7 +1248,7 @@ function Anchor(arg0) {
 	});
 }
 function Heading(arg0) {
-	const { children, tag, label, level, anchor = true, ...props } = arg0;
+	const { children, className, tag, label, level, anchor = true, ...props } = arg0;
 	const resolvedLevel = level ?? 2;
 	const Component = `h${resolvedLevel}`;
 	const ref = useRef(null);
@@ -970,7 +1275,7 @@ function Heading(arg0) {
 		label
 	}), /* @__PURE__ */ jsx(Component, {
 		ref,
-		className: clsx("clarify-heading", tag || label ? "mt-2 scroll-mt-32" : "scroll-mt-24"),
+		className: clsx("clarify-heading", tag || label ? "mt-2 scroll-mt-32" : "scroll-mt-24", className),
 		...props,
 		children: anchor ? /* @__PURE__ */ jsx(Anchor, {
 			id: props.id,
@@ -1016,7 +1321,158 @@ function ApiEndpointCard(arg0) {
 	});
 }
 //#endregion
-//#region source/shell/Navigation.tsx
+//#region source/shell/ContentActions.tsx
+function resolveContentArtifactUrl(contentArtifactUrl, routePrefix = "/") {
+	if (!routePrefix || routePrefix === "/") return contentArtifactUrl;
+	return `/${routePrefix.replace(/^\/+|\/+$/g, "")}${contentArtifactUrl}`;
+}
+function getAbsoluteUrl(path) {
+	if (typeof window === "undefined") return path;
+	return new URL(path, window.location.href).href;
+}
+async function copyText(text) {
+	await navigator.clipboard.writeText(text);
+}
+function ContentActions(arg0) {
+	const { hasTabs = false, route, routePrefix } = arg0;
+	const t = useBuiltInText();
+	const [copied, setCopied] = useState("idle");
+	if (!route?.contentArtifactUrl) return null;
+	const contentArtifactUrl = resolveContentArtifactUrl(route.contentArtifactUrl, routePrefix);
+	const isOpenApi = route.kind === "openapi";
+	const replacements = { contentType: isOpenApi ? "OpenAPI" : "Markdown" };
+	const viewLabel = isOpenApi ? t("contentActions.viewOpenApi") : t("contentActions.viewMarkdown");
+	const viewDescription = isOpenApi ? t("contentActions.viewOpenApiDescription") : t("contentActions.viewMarkdownDescription");
+	function markCopied(state) {
+		setCopied(state);
+		window.setTimeout(() => setCopied("idle"), 1600);
+	}
+	async function handleCopyContent() {
+		await copyText(await (await fetch(contentArtifactUrl)).text());
+		markCopied("content");
+	}
+	async function handleCopyLink() {
+		await copyText(getAbsoluteUrl(contentArtifactUrl));
+		markCopied("link");
+	}
+	const actions = [{
+		key: "content",
+		label: t("contentActions.copyContent"),
+		description: t("contentActions.copyContentDescription", replacements),
+		icon: Copy,
+		run: handleCopyContent
+	}, {
+		key: "link",
+		label: t("contentActions.copyLink", replacements),
+		description: t("contentActions.copyLinkDescription", replacements),
+		icon: Link2,
+		run: handleCopyLink
+	}];
+	const primaryAction = actions[0];
+	const PrimaryIcon = copied === primaryAction.key ? Check : primaryAction.icon;
+	return /* @__PURE__ */ jsx("div", {
+		className: `clarify-content-actions sticky z-20 flex justify-end py-4 ${hasTabs ? "top-16 lg:top-30" : "top-16"}`,
+		children: /* @__PURE__ */ jsxs(Menu, {
+			as: "div",
+			className: "clarify-content-actions-menu relative inline-flex 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 dark:border-white/10 dark:bg-zinc-900/80 dark:shadow-none",
+				children: [/* @__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]
+				}), /* @__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 dark:border-white/10",
+					"aria-label": t("contentActions.copyOptions"),
+					children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5" })
+				})]
+			}), /* @__PURE__ */ jsxs(MenuItems, {
+				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 dark:border-white/10 dark:bg-zinc-900 dark:shadow-none",
+				children: [
+					actions.slice(0, 1).map((action) => {
+						const Icon = action.icon;
+						const isCopied = copied === action.key;
+						return /* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							onClick: action.run,
+							className: "clarify-content-actions-item clarify-ui-menu-item group flex w-full items-center gap-2 rounded-(--clarify-theme-tokens-radius-lg) px-1.5 py-1.5 text-left transition",
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: "clarify-ui-menu-icon flex shrink-0 rounded-(--clarify-theme-tokens-radius-md) border border-(--clarify-theme-tokens-colors-border) p-1.5 dark:border-white/10",
+									children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" })
+								}),
+								/* @__PURE__ */ jsxs("span", {
+									className: "flex min-w-0 flex-1 flex-col px-1",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "clarify-ui-menu-title",
+										children: isCopied ? t("contentActions.copiedContent") : action.label
+									}), /* @__PURE__ */ jsx("span", {
+										className: "clarify-ui-menu-description truncate",
+										children: action.description
+									})]
+								}),
+								/* @__PURE__ */ jsx(Check, { className: `h-3.5 w-3.5 shrink-0 text-(--clarify-theme-tokens-colors-primary) transition ${isCopied ? "opacity-100" : "opacity-0"}` })
+							]
+						}) }, action.key);
+					}),
+					/* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsxs("a", {
+						href: contentArtifactUrl,
+						target: "_blank",
+						rel: "noreferrer",
+						className: "clarify-content-actions-item clarify-ui-menu-item group flex w-full items-center gap-2 rounded-(--clarify-theme-tokens-radius-lg) px-1.5 py-1.5 text-left no-underline transition",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "clarify-ui-menu-icon flex shrink-0 rounded-(--clarify-theme-tokens-radius-md) border border-(--clarify-theme-tokens-colors-border) p-1.5 dark:border-white/10",
+								children: /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4" })
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "flex min-w-0 flex-1 flex-col px-1",
+								children: [/* @__PURE__ */ jsxs("span", {
+									className: "clarify-ui-menu-title flex items-center gap-1",
+									children: [viewLabel, /* @__PURE__ */ jsx(ExternalLink, { className: "clarify-ui-menu-icon h-3 w-3" })]
+								}), /* @__PURE__ */ jsx("span", {
+									className: "clarify-ui-menu-description truncate",
+									children: viewDescription
+								})]
+							}),
+							/* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 shrink-0 text-(--clarify-theme-tokens-colors-primary) opacity-0" })
+						]
+					}) }),
+					actions.slice(1).map((action) => {
+						const Icon = action.icon;
+						const isCopied = copied === action.key;
+						return /* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							onClick: action.run,
+							className: "clarify-content-actions-item clarify-ui-menu-item group flex w-full items-center gap-2 rounded-(--clarify-theme-tokens-radius-lg) px-1.5 py-1.5 text-left transition",
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: "clarify-ui-menu-icon flex shrink-0 rounded-(--clarify-theme-tokens-radius-md) border border-(--clarify-theme-tokens-colors-border) p-1.5 dark:border-white/10",
+									children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" })
+								}),
+								/* @__PURE__ */ jsxs("span", {
+									className: "flex min-w-0 flex-1 flex-col px-1",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "clarify-ui-menu-title",
+										children: isCopied ? t("contentActions.copiedLink") : action.label
+									}), /* @__PURE__ */ jsx("span", {
+										className: "clarify-ui-menu-description truncate",
+										children: action.description
+									})]
+								}),
+								/* @__PURE__ */ jsx(Check, { className: `h-3.5 w-3.5 shrink-0 text-(--clarify-theme-tokens-colors-primary) transition ${isCopied ? "opacity-100" : "opacity-0"}` })
+							]
+						}) }, action.key);
+					})
+				]
+			})]
+		})
+	});
+}
+//#endregion
+//#region source/shell/icons.tsx
 function NavigationIcon(arg0) {
 	const { name, className } = arg0;
 	if (!name) return null;
@@ -1027,6 +1483,8 @@ function NavigationIcon(arg0) {
 		"aria-hidden": "true"
 	});
 }
+//#endregion
+//#region source/shell/Navigation.tsx
 function useInitialValue(value, condition = true) {
 	const [initialValue] = useState(value);
 	return condition ? initialValue : value;
@@ -1034,11 +1492,11 @@ function useInitialValue(value, condition = true) {
 function normalizePath(path) {
 	return path === "" ? "/" : path;
 }
-function navigationToGroups(navigation) {
+function navigationToGroups(navigation, defaultTitle) {
 	return navigation.map((node) => {
 		const children = node.children?.length ? node.children : [node];
 		return {
-			title: node.children?.length ? node.title : "Documentation",
+			title: node.children?.length ? node.title : defaultTitle,
 			icon: node.icon,
 			links: children.map((child) => ({
 				title: child.title,
@@ -1048,18 +1506,6 @@ function navigationToGroups(navigation) {
 		};
 	});
 }
-function TopLevelNavItem$1(arg0) {
-	const { href, children } = arg0;
-	return /* @__PURE__ */ jsx("li", {
-		className: "md:hidden",
-		children: /* @__PURE__ */ jsx(CloseButton, {
-			as: Link,
-			to: href,
-			className: "block py-1 text-sm text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white",
-			children
-		})
-	});
-}
 var sectionBadgeColorStyles = {
 	GET: "text-emerald-500 dark:text-emerald-400",
 	POST: "text-sky-500 dark:text-sky-400",
@@ -1073,7 +1519,7 @@ var sectionBadgeColorStyles = {
 function SectionBadge(arg0) {
 	const { children } = arg0;
 	return /* @__PURE__ */ jsx("span", {
-		className: clsx("inline-flex shrink-0 justify-end font-mono text-[0.625rem]/6 font-semibold uppercase tracking-wide", sectionBadgeColorStyles[children.toUpperCase()] ?? "text-zinc-500 dark:text-zinc-400"),
+		className: clsx("clarify-navigation-section-badge inline-flex shrink-0 justify-end font-mono font-semibold uppercase tracking-wide", sectionBadgeColorStyles[children.toUpperCase()] ?? "clarify-ui-menu-description"),
 		children
 	});
 }
@@ -1086,6 +1532,9 @@ function NavLink(arg0) {
 		const targetId = decodeURIComponent(href.slice(hashIndex + 1));
 		window.requestAnimationFrame(() => {
 			document.getElementById(targetId)?.scrollIntoView();
+			window.requestAnimationFrame(() => {
+				window.dispatchEvent(new Event("scroll"));
+			});
 		});
 	}
 	return /* @__PURE__ */ jsxs(CloseButton, {
@@ -1093,7 +1542,7 @@ function NavLink(arg0) {
 		to: href,
 		"aria-current": active ? "page" : void 0,
 		onClick: handleClick,
-		className: clsx("clarify-navigation-link flex justify-between gap-2 py-1 pr-3 text-sm transition", isAnchorLink ? "clarify-navigation-anchor-link pl-7" : "pl-4", active ? "text-zinc-900 dark:text-white" : "text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white"),
+		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"),
 		children: [/* @__PURE__ */ jsxs("span", {
 			className: "flex min-w-0 flex-1 items-center gap-2",
 			children: [
@@ -1124,7 +1573,7 @@ function VisibleSectionHighlight(arg0) {
 	const firstVisibleSectionIndex = Math.max(0, [{ id: "_top" }, ...sections].findIndex((section) => section.id === visibleSections[0]));
 	const itemHeight = remToPx(2);
 	const height = isPresent ? Math.max(1, visibleSections.length) * itemHeight : itemHeight;
-	const top = group.links.findIndex((link) => link.href === pathname) * itemHeight + firstVisibleSectionIndex * itemHeight;
+	const top = group.links.findIndex((link) => isSameRoutePath(link.href, pathname)) * itemHeight + firstVisibleSectionIndex * itemHeight;
 	return /* @__PURE__ */ jsx(motion.div, {
 		layout: true,
 		initial: { opacity: 0 },
@@ -1133,9 +1582,9 @@ function VisibleSectionHighlight(arg0) {
 			transition: { delay: .2 }
 		},
 		exit: { opacity: 0 },
-		className: "absolute inset-x-0 top-0 bg-zinc-800/2.5 will-change-transform dark:bg-white/2.5",
+		className: "clarify-navigation-section-highlight absolute inset-x-0 top-0 will-change-transform",
 		style: {
-			borderRadius: 8,
+			borderRadius: "var(--clarify-theme-tokens-radius-sm)",
 			height,
 			top
 		}
@@ -1144,10 +1593,10 @@ function VisibleSectionHighlight(arg0) {
 function ActivePageMarker(arg0) {
 	const { group, pathname } = arg0;
 	const itemHeight = remToPx(2);
-	const top = remToPx(.25) + group.links.findIndex((link) => link.href === pathname) * itemHeight;
+	const top = remToPx(.25) + group.links.findIndex((link) => isSameRoutePath(link.href, pathname)) * itemHeight;
 	return /* @__PURE__ */ jsx(motion.div, {
 		layout: true,
-		className: "absolute left-2 h-6 w-px bg-emerald-500",
+		className: "absolute left-2 h-6 w-px bg-(--clarify-theme-tokens-colors-primary)",
 		initial: { opacity: 0 },
 		animate: {
 			opacity: 1,
@@ -1160,16 +1609,16 @@ function ActivePageMarker(arg0) {
 function NavigationGroup(arg0) {
 	const { group, className } = arg0;
 	const isInsideMobileNavigation = useIsInsideMobileNavigation();
-	const [pathname, sections] = useInitialValue([useLocation().pathname, useSectionStore((s) => s.sections)], isInsideMobileNavigation);
-	const isActiveGroup = group.links.findIndex((link) => link.href === pathname) !== -1;
+	const [pathname, sections] = useInitialValue([normalizeRoutePath(useLocation().pathname), useSectionStore((s) => s.sections)], isInsideMobileNavigation);
+	const isActiveGroup = group.links.findIndex((link) => isSameRoutePath(link.href, pathname)) !== -1;
 	return /* @__PURE__ */ jsxs("li", {
 		className: clsx("clarify-navigation-group relative mt-6", className),
 		children: [/* @__PURE__ */ jsxs(motion.h2, {
 			layout: "position",
-			className: "clarify-navigation-group-title flex items-center gap-2 text-xs font-semibold text-zinc-900 dark:text-white",
+			className: "clarify-navigation-group-title flex items-center gap-2",
 			children: [/* @__PURE__ */ jsx(NavigationIcon, {
 				name: group.icon,
-				className: "h-3.5 w-3.5"
+				className: "clarify-navigation-group-title-icon h-3.5 w-3.5"
 			}), /* @__PURE__ */ jsx("span", { children: group.title })]
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "relative mt-3 pl-2",
@@ -1183,7 +1632,7 @@ function NavigationGroup(arg0) {
 				}),
 				/* @__PURE__ */ jsx(motion.div, {
 					layout: true,
-					className: "absolute inset-y-0 left-2 w-px bg-zinc-900/10 dark:bg-white/5"
+					className: "absolute inset-y-0 left-2 w-px bg-(--clarify-theme-tokens-colors-border) dark:bg-white/5"
 				}),
 				/* @__PURE__ */ jsx(AnimatePresence, {
 					initial: false,
@@ -1195,38 +1644,41 @@ function NavigationGroup(arg0) {
 				/* @__PURE__ */ jsx("ul", {
 					role: "list",
 					className: "border-l border-transparent",
-					children: group.links.map((link) => /* @__PURE__ */ jsxs(motion.li, {
-						layout: "position",
-						className: "relative",
-						children: [/* @__PURE__ */ jsx(NavLink, {
-							href: link.href,
-							icon: link.icon,
-							active: link.href === pathname,
-							children: link.title
-						}), /* @__PURE__ */ jsx(AnimatePresence, {
-							mode: "popLayout",
-							initial: false,
-							children: link.href === pathname && sections.length > 0 ? /* @__PURE__ */ jsx(motion.ul, {
-								role: "list",
-								initial: { opacity: 0 },
-								animate: {
-									opacity: 1,
-									transition: { delay: .1 }
-								},
-								exit: {
-									opacity: 0,
-									transition: { duration: .15 }
-								},
-								children: sections.map((section) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, {
-									href: `${link.href}#${section.id}`,
-									badge: section.badge,
-									tags: section.tags,
-									isAnchorLink: true,
-									children: section.title
-								}) }, section.id))
-							}) : null
-						})]
-					}, link.href))
+					children: group.links.map((link) => {
+						const active = isSameRoutePath(link.href, pathname);
+						return /* @__PURE__ */ jsxs(motion.li, {
+							layout: "position",
+							className: "relative",
+							children: [/* @__PURE__ */ jsx(NavLink, {
+								href: link.href,
+								icon: link.icon,
+								active,
+								children: link.title
+							}), /* @__PURE__ */ jsx(AnimatePresence, {
+								mode: "popLayout",
+								initial: false,
+								children: active && sections.length > 0 ? /* @__PURE__ */ jsx(motion.ul, {
+									role: "list",
+									initial: { opacity: 0 },
+									animate: {
+										opacity: 1,
+										transition: { delay: .1 }
+									},
+									exit: {
+										opacity: 0,
+										transition: { duration: .15 }
+									},
+									children: sections.map((section) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, {
+										href: `${link.href}#${section.id}`,
+										badge: section.badge,
+										tags: section.tags,
+										isAnchorLink: true,
+										children: section.title
+									}) }, section.id))
+								}) : null
+							})]
+						}, link.href);
+					})
 				})
 			]
 		})]
@@ -1234,19 +1686,16 @@ function NavigationGroup(arg0) {
 }
 function Navigation(arg0) {
 	const { navigation, className } = arg0;
-	const groups = navigationToGroups(navigation);
+	const groups = navigationToGroups(navigation, useBuiltInText()("navigation.documentation"));
 	return /* @__PURE__ */ jsx("nav", {
 		className: clsx("clarify-navigation", className),
-		children: /* @__PURE__ */ jsxs("ul", {
+		children: /* @__PURE__ */ jsx("ul", {
 			role: "list",
 			className: "clarify-navigation-list",
-			children: [/* @__PURE__ */ jsx(TopLevelNavItem$1, {
-				href: "/",
-				children: "Home"
-			}), groups.map((group, groupIndex) => /* @__PURE__ */ jsx(NavigationGroup, {
+			children: groups.map((group, groupIndex) => /* @__PURE__ */ jsx(NavigationGroup, {
 				group,
-				className: groupIndex === 0 ? "md:mt-0" : ""
-			}, group.title))]
+				className: groupIndex === 0 ? "mt-0" : ""
+			}, group.title))
 		})
 	});
 }
@@ -1273,8 +1722,84 @@ function XIcon(props) {
 	});
 }
 var IsInsideMobileNavigationContext = createContext(false);
+function hasPath$2(nodes, pathname) {
+	return nodes.some((node) => isSameRoutePath(node.path, pathname) || hasPath$2(node.children ?? [], pathname));
+}
+function isActiveTab$1(tab, pathname) {
+	return isSameRoutePath(tab.path, pathname) || hasPath$2(tab.children, pathname);
+}
+function MobileTabsSelect(arg0) {
+	const { tabs } = arg0;
+	const pathname = normalizeRoutePath(useLocation().pathname);
+	const { close } = useMobileNavigationStore();
+	if (!tabs?.length) return null;
+	const activeTab = tabs.find((tab) => isActiveTab$1(tab, pathname)) ?? tabs[0];
+	return /* @__PURE__ */ jsxs(Menu, {
+		as: "div",
+		className: "clarify-mobile-tabs-select mb-6",
+		children: [/* @__PURE__ */ jsxs(MenuButton, {
+			className: "clarify-mobile-tabs-select-trigger clarify-ui-control group flex h-10 w-full items-center justify-between gap-2 rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-theme-tokens-colors-border) px-4 text-left font-semibold shadow-xs shadow-zinc-900/5 transition dark:border-white/10",
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "flex min-w-0 items-center gap-2",
+				children: [/* @__PURE__ */ jsx(NavigationIcon, {
+					name: activeTab.icon,
+					className: "h-4 w-4 shrink-0 text-(--clarify-theme-tokens-colors-primary)"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "truncate tracking-[-0.01em]",
+					children: activeTab.title
+				})]
+			}), /* @__PURE__ */ jsx("svg", {
+				width: "8",
+				height: "24",
+				viewBox: "0 -9 3 24",
+				"aria-hidden": "true",
+				className: "shrink-0 overflow-visible text-(--clarify-theme-tokens-colors-muted) transition-transform group-aria-expanded:rotate-180",
+				children: /* @__PURE__ */ jsx("path", {
+					d: "M0 0L3 3L0 6",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "1.5",
+					strokeLinecap: "round"
+				})
+			})]
+		}), /* @__PURE__ */ jsx(MenuItems, {
+			className: "clarify-mobile-tabs-select-list clarify-ui-menu mt-2 flex flex-col gap-1 rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) p-1 shadow-lg shadow-zinc-900/5 focus:outline-none dark:border-white/10 dark:bg-zinc-900 dark:shadow-none",
+			children: tabs.map((tab) => {
+				const active = isActiveTab$1(tab, pathname);
+				return /* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsxs(Link, {
+					to: tab.path,
+					onClick: close,
+					className: clsx("clarify-mobile-tabs-select-item clarify-ui-menu-item flex items-center justify-between gap-3 rounded-(--clarify-theme-tokens-radius-lg) px-3 py-2.5 no-underline transition", active && "clarify-ui-menu-item-active"),
+					"aria-current": active ? "page" : void 0,
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "flex min-w-0 items-start gap-2",
+						children: [/* @__PURE__ */ jsx(NavigationIcon, {
+							name: tab.icon,
+							className: "mt-0.5 h-4 w-4 shrink-0"
+						}), /* @__PURE__ */ jsx("span", {
+							className: "min-w-0 whitespace-normal wrap-anywhere font-medium leading-5",
+							children: tab.title
+						})]
+					}), active ? /* @__PURE__ */ jsx("svg", {
+						viewBox: "0 0 20 20",
+						fill: "none",
+						"aria-hidden": "true",
+						className: "mt-0.5 h-4 w-4 shrink-0",
+						children: /* @__PURE__ */ jsx("path", {
+							d: "m5 10 3 3 7-7",
+							stroke: "currentColor",
+							strokeWidth: "1.8",
+							strokeLinecap: "round",
+							strokeLinejoin: "round"
+						})
+					}) : null]
+				}) }, `${tab.title}-${tab.path}`);
+			})
+		})]
+	});
+}
 function MobileNavigationDialog(arg0) {
-	const { config, isOpen, navigation, routes, currentLocale, currentRoute, close } = arg0;
+	const { config, isOpen, navigation, tabs, routes, currentLocale, currentRoute, close } = arg0;
 	return /* @__PURE__ */ jsxs(Dialog, {
 		transition: true,
 		open: isOpen,
@@ -1282,18 +1807,19 @@ function MobileNavigationDialog(arg0) {
 		className: "clarify-mobile-navigation-dialog fixed inset-0 z-50 lg:hidden",
 		children: [/* @__PURE__ */ jsx(DialogBackdrop, {
 			transition: true,
-			className: "clarify-mobile-navigation-backdrop fixed inset-0 top-14 bg-zinc-400/20 backdrop-blur-xs data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in dark:bg-black/40"
+			className: "clarify-mobile-navigation-backdrop clarify-ui-backdrop fixed inset-0 top-14 backdrop-blur-xs data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
 		}), /* @__PURE__ */ jsxs(DialogPanel, { children: [/* @__PURE__ */ jsx(TransitionChild, { children: /* @__PURE__ */ jsx(Header, {
 			config,
 			navigation,
+			tabs,
 			routes,
 			currentLocale,
 			currentRoute,
 			className: "data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
-		}) }), /* @__PURE__ */ jsx(TransitionChild, { children: /* @__PURE__ */ jsx(motion.div, {
+		}) }), /* @__PURE__ */ jsx(TransitionChild, { children: /* @__PURE__ */ jsxs(motion.div, {
 			layoutScroll: true,
-			className: "clarify-mobile-navigation-panel fixed top-14 bottom-0 left-0 w-full overflow-y-auto bg-white px-4 pt-6 pb-4 shadow-lg ring-1 shadow-zinc-900/10 ring-zinc-900/7.5 duration-500 ease-in-out data-closed:-translate-x-full min-[416px]:max-w-sm sm:px-6 sm:pb-10 dark:bg-zinc-950 dark:ring-zinc-800",
-			children: /* @__PURE__ */ jsx(Navigation, { navigation })
+			className: "clarify-mobile-navigation-panel fixed top-14 bottom-0 left-0 w-full overflow-y-auto bg-(--clarify-theme-tokens-colors-background) px-4 pt-6 pb-4 shadow-lg ring-1 shadow-zinc-900/10 ring-(--clarify-theme-tokens-colors-border) duration-500 ease-in-out data-closed:-translate-x-full min-[416px]:max-w-sm sm:px-6 sm:pb-10 dark:bg-zinc-950 dark:ring-zinc-800",
+			children: [/* @__PURE__ */ jsx(MobileTabsSelect, { tabs }), /* @__PURE__ */ jsx(Navigation, { navigation })]
 		}) })] })]
 	});
 }
@@ -1307,23 +1833,25 @@ var useMobileNavigationStore = create()((set) => ({
 	toggle: () => set((state) => ({ isOpen: !state.isOpen }))
 }));
 function MobileNavigation(arg0) {
-	const { config, navigation, routes, currentLocale, currentRoute } = arg0;
+	const { config, navigation, tabs, routes, currentLocale, currentRoute } = arg0;
 	const isInsideMobileNavigation = useIsInsideMobileNavigation();
 	const { isOpen, toggle, close } = useMobileNavigationStore();
+	const t = useBuiltInText();
 	const ToggleIcon = isOpen ? XIcon : MenuIcon;
 	return /* @__PURE__ */ jsxs(IsInsideMobileNavigationContext.Provider, {
 		value: true,
 		children: [/* @__PURE__ */ jsxs("button", {
 			type: "button",
-			className: "clarify-mobile-navigation-button relative flex size-6 items-center justify-center rounded-md transition hover:bg-zinc-900/5 dark:hover:bg-white/5",
-			"aria-label": "Toggle navigation",
+			className: "clarify-mobile-navigation-button clarify-ui-icon-button relative flex size-6 items-center justify-center rounded-(--clarify-theme-tokens-radius-md) transition",
+			"aria-label": t("navigation.toggle"),
 			onClick: toggle,
-			children: [/* @__PURE__ */ jsx("span", { className: "absolute size-12 pointer-fine:hidden" }), /* @__PURE__ */ jsx(ToggleIcon, { className: "w-2.5 stroke-zinc-900 dark:stroke-white" })]
+			children: [/* @__PURE__ */ jsx("span", { className: "absolute size-12 pointer-fine:hidden" }), /* @__PURE__ */ jsx(ToggleIcon, { className: "w-2.5 stroke-(--clarify-theme-tokens-colors-foreground) dark:stroke-white" })]
 		}), !isInsideMobileNavigation ? /* @__PURE__ */ jsx(Suspense, {
 			fallback: null,
 			children: /* @__PURE__ */ jsx(MobileNavigationDialog, {
 				config,
 				navigation,
+				tabs,
 				routes,
 				currentLocale,
 				currentRoute,
@@ -1404,7 +1932,7 @@ function HighlightQuery(arg0) {
 	const { text, query } = arg0;
 	if (!query) return text;
 	return /* @__PURE__ */ jsx(Fragment$1, { children: text.split(new RegExp(`(${escapeRegExp(query)})`, "ig")).map((part, index) => part.toLowerCase() === query.toLowerCase() ? /* @__PURE__ */ jsx("mark", {
-		className: "bg-transparent text-emerald-500 underline",
+		className: "bg-transparent text-(--clarify-theme-tokens-colors-primary) underline",
 		children: part
 	}, index) : /* @__PURE__ */ jsx(Fragment, { children: part }, index)) });
 }
@@ -1414,25 +1942,25 @@ function SearchResult(arg0) {
 	const hierarchy = [result.sectionTitle, result.pageTitle].filter((value) => typeof value === "string");
 	return /* @__PURE__ */ jsxs("li", {
 		id,
-		className: clsx("clarify-search-result group block cursor-default px-4 py-3 aria-selected:bg-zinc-50 dark:aria-selected:bg-zinc-800/50", active && "bg-zinc-50 dark:bg-zinc-800/50"),
+		className: clsx("clarify-search-result group block cursor-default px-4 py-3", active && "clarify-search-result-active"),
 		"aria-selected": active,
 		onMouseDown: (event) => {
 			event.preventDefault();
 			onSelect();
 		},
 		children: [/* @__PURE__ */ jsx("div", {
-			className: "text-sm font-medium text-zinc-900 group-aria-selected:text-emerald-500 dark:text-white",
+			className: "clarify-search-result-title",
 			children: /* @__PURE__ */ jsx(HighlightQuery, {
 				text: result.title,
 				query
 			})
 		}), hierarchy.length > 0 ? /* @__PURE__ */ jsx("div", {
-			className: "mt-1 truncate text-2xs whitespace-nowrap text-zinc-500",
+			className: "clarify-search-result-hierarchy mt-1 truncate whitespace-nowrap",
 			children: hierarchy.map((item, itemIndex, items) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(HighlightQuery, {
 				text: item,
 				query
 			}), /* @__PURE__ */ jsx("span", {
-				className: itemIndex === items.length - 1 ? "sr-only" : "mx-2 text-zinc-300 dark:text-zinc-700",
+				className: itemIndex === items.length - 1 ? "sr-only" : "clarify-search-result-separator mx-2",
 				children: "/"
 			})] }, `${item}-${itemIndex}`))
 		}) : null]
@@ -1440,9 +1968,10 @@ function SearchResult(arg0) {
 }
 var SearchInput = forwardRef(function SearchInput(arg0, inputRef) {
 	const { query, setQuery, onClose, onSubmit, activeDescendantId } = arg0;
+	const t = useBuiltInText();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "clarify-search-input group relative flex h-12",
-		children: [/* @__PURE__ */ jsx(SearchIcon, { className: "pointer-events-none absolute top-0 left-3 h-full w-5 stroke-zinc-500" }), /* @__PURE__ */ jsx("input", {
+		children: [/* @__PURE__ */ jsx(SearchIcon, { className: "pointer-events-none absolute top-0 left-3 h-full w-5 stroke-(--clarify-theme-tokens-colors-muted)" }), /* @__PURE__ */ jsx("input", {
 			ref: inputRef,
 			"data-autofocus": true,
 			role: "combobox",
@@ -1459,13 +1988,14 @@ var SearchInput = forwardRef(function SearchInput(arg0, inputRef) {
 					onSubmit();
 				}
 			},
-			placeholder: "Find something...",
-			className: "flex-auto appearance-none bg-transparent pr-4 pl-10 text-zinc-900 outline-hidden placeholder:text-zinc-500 focus:w-full focus:flex-none sm:text-sm dark:text-white [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden [&::-webkit-search-results-button]:hidden [&::-webkit-search-results-decoration]:hidden"
+			placeholder: t("search.placeholder"),
+			className: "clarify-search-field flex-auto appearance-none bg-transparent pr-4 pl-10 outline-hidden focus:w-full focus:flex-none [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden [&::-webkit-search-results-button]:hidden [&::-webkit-search-results-decoration]:hidden"
 		})]
 	});
 });
 function SearchDialog(arg0) {
 	const { open, setOpen, routes, navigation, className, onNavigate = () => {} } = arg0;
+	const t = useBuiltInText();
 	const navigate = useNavigate();
 	const location = useLocation();
 	const inputRef = useRef(null);
@@ -1516,12 +2046,12 @@ function SearchDialog(arg0) {
 		className: clsx("clarify-search-dialog fixed inset-0 z-50", className),
 		children: [/* @__PURE__ */ jsx(DialogBackdrop, {
 			transition: true,
-			className: "clarify-search-backdrop fixed inset-0 bg-zinc-400/25 backdrop-blur-xs data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in dark:bg-black/40"
+			className: "clarify-search-backdrop clarify-ui-backdrop fixed inset-0 backdrop-blur-xs data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
 		}), /* @__PURE__ */ jsx("div", {
 			className: "fixed inset-0 overflow-y-auto px-4 py-4 sm:px-6 sm:py-20 md:py-32 lg:px-8 lg:py-[15vh]",
 			children: /* @__PURE__ */ jsxs(DialogPanel, {
 				transition: true,
-				className: "clarify-search-panel mx-auto transform-gpu overflow-hidden rounded-lg bg-zinc-50 shadow-xl ring-1 ring-zinc-900/7.5 data-closed:scale-95 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:max-w-xl dark:bg-zinc-900 dark:ring-zinc-800",
+				className: "clarify-search-panel mx-auto transform-gpu overflow-hidden rounded-(--clarify-theme-tokens-radius-lg) bg-(--clarify-theme-tokens-colors-surface) shadow-xl ring-1 ring-(--clarify-theme-tokens-colors-border) data-closed:scale-95 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:max-w-xl dark:bg-zinc-900 dark:ring-zinc-800",
 				onKeyDown: (event) => {
 					if (event.key === "ArrowDown") {
 						event.preventDefault();
@@ -1539,24 +2069,12 @@ function SearchDialog(arg0) {
 					onClose: closeDialog,
 					onSubmit: () => selectResult()
 				}), /* @__PURE__ */ jsxs("div", {
-					className: "border-t border-zinc-200 bg-white empty:hidden dark:border-zinc-100/5 dark:bg-white/2.5",
+					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: [query && results.length === 0 ? /* @__PURE__ */ jsxs("div", {
 						className: "p-6 text-center",
-						children: [/* @__PURE__ */ jsx(NoResultsIcon, { className: "mx-auto h-5 w-5 stroke-zinc-900 dark:stroke-zinc-600" }), /* @__PURE__ */ jsxs("p", {
-							className: "mt-2 text-xs text-zinc-700 dark:text-zinc-400",
-							children: [
-								"Nothing found for",
-								" ",
-								/* @__PURE__ */ jsxs("strong", {
-									className: "font-semibold wrap-break-word text-zinc-900 dark:text-white",
-									children: [
-										"‘",
-										query,
-										"’"
-									]
-								}),
-								"."
-							]
+						children: [/* @__PURE__ */ jsx(NoResultsIcon, { 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",
@@ -1596,19 +2114,20 @@ function getModifierKey() {
 }
 function Search(arg0) {
 	const { routes, navigation } = arg0;
+	const t = useBuiltInText();
 	const modifierKey = getModifierKey();
 	const { buttonProps, dialogProps } = useSearchProps();
 	return /* @__PURE__ */ jsxs("div", {
-		className: "clarify-search hidden lg:block lg:max-w-md lg:flex-auto",
+		className: "clarify-search hidden w-80 max-w-[36vw] lg:block",
 		children: [/* @__PURE__ */ jsxs("button", {
 			type: "button",
-			className: "clarify-search-button hidden h-8 w-full items-center gap-2 rounded-full bg-white pr-3 pl-2 text-sm text-zinc-500 ring-1 ring-zinc-900/10 transition hover:ring-zinc-900/20 lg:flex dark:bg-white/5 dark:text-zinc-400 dark:ring-white/10 dark:ring-inset dark:hover:ring-white/20",
+			className: "clarify-search-button hidden h-9 w-full items-center gap-2 rounded-(--clarify-theme-tokens-radius-lg) bg-(--clarify-theme-tokens-colors-surface) pr-3 pl-2.5 font-medium ring-1 ring-(--clarify-theme-tokens-colors-border) transition hover:bg-(--clarify-theme-tokens-colors-background) lg:flex dark:bg-white/5 dark:ring-white/10 dark:ring-inset dark:hover:bg-white/10",
 			...buttonProps,
 			children: [
 				/* @__PURE__ */ jsx(SearchIcon, { className: "h-5 w-5 stroke-current" }),
-				"Find something...",
+				t("search.button"),
 				/* @__PURE__ */ jsxs("kbd", {
-					className: "ml-auto text-2xs text-zinc-400 dark:text-zinc-500",
+					className: "clarify-search-shortcut ml-auto rounded-(--clarify-theme-tokens-radius-sm) bg-(--clarify-theme-tokens-colors-background) px-1.5 py-0.5 ring-1 ring-(--clarify-theme-tokens-colors-border) dark:bg-white/5 dark:ring-white/10",
 					children: [/* @__PURE__ */ jsx("kbd", {
 						className: "font-sans",
 						children: modifierKey
@@ -1631,15 +2150,16 @@ function Search(arg0) {
 }
 function MobileSearch(arg0) {
 	const { routes, navigation, onNavigate } = arg0;
+	const t = useBuiltInText();
 	const { buttonProps, dialogProps } = useSearchProps();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "clarify-mobile-search contents lg:hidden",
 		children: [/* @__PURE__ */ jsxs("button", {
 			type: "button",
-			className: "clarify-mobile-search-button relative flex size-6 items-center justify-center rounded-md transition hover:bg-zinc-900/5 lg:hidden dark:hover:bg-white/5",
-			"aria-label": "Find something...",
+			className: "clarify-mobile-search-button clarify-ui-control relative flex size-6 items-center justify-center rounded-(--clarify-theme-tokens-radius-md) transition lg:hidden",
+			"aria-label": t("search.placeholder"),
 			...buttonProps,
-			children: [/* @__PURE__ */ jsx("span", { className: "absolute size-12 pointer-fine:hidden" }), /* @__PURE__ */ jsx(SearchIcon, { className: "h-5 w-5 stroke-zinc-900 dark:stroke-white" })]
+			children: [/* @__PURE__ */ jsx("span", { className: "absolute size-12 pointer-fine:hidden" }), /* @__PURE__ */ jsx(SearchIcon, { className: "h-5 w-5 stroke-(--clarify-theme-tokens-colors-foreground) dark:stroke-white" })]
 		}), /* @__PURE__ */ jsx(Suspense, {
 			fallback: null,
 			children: /* @__PURE__ */ jsx(SearchDialog, {
@@ -1684,6 +2204,7 @@ function LanguageIcon(props) {
 }
 function LanguageSwitcher(arg0) {
 	const { config, currentLocale, currentRoute } = arg0;
+	const t = useBuiltInText();
 	const location = useLocation();
 	const i18n = config.i18n;
 	if (!i18n || i18n.locales.length < 2) return null;
@@ -1694,8 +2215,8 @@ function LanguageSwitcher(arg0) {
 		as: "div",
 		className: "clarify-language-switcher relative",
 		children: [/* @__PURE__ */ jsxs(MenuButton, {
-			className: "clarify-language-switcher-button flex h-7 items-center gap-1.5 rounded-md px-1.5 text-sm/5 font-medium text-zinc-600 transition hover:bg-zinc-900/5 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-white/5 dark:hover:text-white",
-			"aria-label": "Switch language",
+			className: "clarify-language-switcher-button clarify-ui-control flex h-7 items-center gap-1.5 rounded-(--clarify-theme-tokens-radius-md) px-1.5 transition",
+			"aria-label": t("language.switch"),
 			children: [
 				/* @__PURE__ */ jsx("span", { className: "absolute size-12 pointer-fine:hidden" }),
 				/* @__PURE__ */ jsx(LanguageIcon, { className: "h-5 w-5 stroke-current" }),
@@ -1706,19 +2227,19 @@ function LanguageSwitcher(arg0) {
 			]
 		}), /* @__PURE__ */ jsx(MenuItems, {
 			transition: true,
-			className: "clarify-language-switcher-menu absolute right-0 z-50 mt-2 w-44 rounded-xl bg-white p-1 text-sm shadow-lg ring-1 shadow-zinc-900/5 ring-zinc-900/10 transition data-closed:scale-95 data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in dark:bg-zinc-900 dark:ring-white/10",
+			className: "clarify-language-switcher-menu clarify-ui-menu absolute right-0 z-50 mt-2 w-(--clarify-ui-menu-width) rounded-(--clarify-theme-tokens-radius-xl) bg-(--clarify-theme-tokens-colors-surface) p-1 shadow-lg ring-1 shadow-zinc-900/5 ring-(--clarify-theme-tokens-colors-border) transition data-closed:scale-95 data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in dark:bg-zinc-900 dark:ring-white/10",
 			children: i18n.locales.flatMap((locale) => {
 				const localizedPath = localizedRoutePath(config, locale.code, currentRoute);
 				if (!localizedPath) return [];
 				const selected = locale.code === selectedLocale;
 				return [/* @__PURE__ */ jsx(MenuItem, { children: ({ focus }) => /* @__PURE__ */ jsxs(Link, {
 					to: `${localizedPath}${suffix}`,
-					className: clsx("clarify-language-switcher-item flex items-center justify-between rounded-lg px-3 py-2 no-underline transition", focus && "bg-zinc-100 dark:bg-white/5", selected ? "text-zinc-900 dark:text-white" : "text-zinc-600 dark:text-zinc-400"),
+					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,
 					dir: locale.dir,
 					children: [/* @__PURE__ */ jsx("span", { children: locale.label }), /* @__PURE__ */ jsx("span", {
-						className: "text-xs text-zinc-400 dark:text-zinc-500",
+						className: "clarify-ui-menu-code",
 						children: locale.code
 					})]
 				}) }, locale.code)];
@@ -1730,95 +2251,189 @@ function TopLevelNavItem(arg0) {
 	const { href, children } = arg0;
 	if (isExternalHref(href)) return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
 		href,
-		className: "text-sm/5 text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white",
+		className: "clarify-ui-top-link transition",
 		target: "_blank",
 		rel: "noreferrer",
 		children
 	}) });
 	return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, {
 		to: href,
-		className: "text-sm/5 text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white",
+		className: "clarify-ui-top-link transition",
 		children
 	}) });
 }
+function MobileNavbarMenu(arg0) {
+	const { links, config, currentLocale } = arg0;
+	const t = useBuiltInText();
+	if (!links?.length) return null;
+	return /* @__PURE__ */ jsxs(Menu, {
+		as: "div",
+		className: "clarify-mobile-navbar-menu relative md:hidden",
+		children: [/* @__PURE__ */ jsxs(MenuButton, {
+			className: "clarify-mobile-navbar-menu-button clarify-ui-control relative flex size-8 items-center justify-center rounded-(--clarify-theme-tokens-radius-md) transition",
+			"aria-label": t("navbar.openLinks"),
+			children: [/* @__PURE__ */ jsx("span", { className: "absolute size-12 pointer-fine:hidden" }), /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-5 w-5" })]
+		}), /* @__PURE__ */ jsx(MenuItems, {
+			transition: true,
+			anchor: "bottom end",
+			className: "clarify-mobile-navbar-menu-list clarify-ui-menu z-50 mt-2 w-(--clarify-ui-menu-width) rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) p-1 shadow-lg transition [--anchor-gap:--spacing(2)] focus:outline-none data-closed:scale-95 data-closed:opacity-0 dark:border-white/10 dark:bg-zinc-900",
+			children: links.map((link) => {
+				const label = resolveLocalizedText(link.label, currentLocale, config.i18n?.defaultLocale);
+				const href = localizeHref(link.href, config, currentLocale);
+				const external = isExternalHref(href);
+				return /* @__PURE__ */ jsx(MenuItem, { children: ({ focus }) => {
+					const className = clsx("clarify-mobile-navbar-menu-item clarify-ui-menu-item block rounded-(--clarify-theme-tokens-radius-lg) px-3 py-2 no-underline transition", focus && "clarify-ui-menu-item-focus");
+					return external ? /* @__PURE__ */ jsx("a", {
+						href,
+						target: "_blank",
+						rel: "noreferrer",
+						className,
+						children: label
+					}) : /* @__PURE__ */ jsx(Link, {
+						to: href,
+						className,
+						children: label
+					});
+				} }, link.href);
+			})
+		})]
+	});
+}
+function hasPath$1(nodes, pathname) {
+	return nodes.some((node) => isSameRoutePath(node.path, pathname) || hasPath$1(node.children ?? [], pathname));
+}
+function isActiveTab(tab, pathname) {
+	return isSameRoutePath(tab.path, pathname) || hasPath$1(tab.children, pathname);
+}
+function ProductTabs(arg0) {
+	const { tabs } = arg0;
+	const t = useBuiltInText();
+	const pathname = normalizeRoutePath(useLocation().pathname);
+	if (!tabs?.length) return null;
+	return /* @__PURE__ */ jsx("div", {
+		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",
+			"aria-label": t("navbar.sections"),
+			children: tabs.map((tab) => {
+				const active = isActiveTab(tab, pathname);
+				return /* @__PURE__ */ jsxs(Link, {
+					to: tab.path,
+					"aria-current": active ? "page" : void 0,
+					className: clsx("clarify-product-tab clarify-ui-tab relative inline-flex shrink-0 items-center gap-2 px-0 transition", active && "clarify-ui-tab-active"),
+					children: [
+						/* @__PURE__ */ jsx(NavigationIcon, {
+							name: tab.icon,
+							className: "h-4 w-4"
+						}),
+						/* @__PURE__ */ jsx("span", { children: tab.title }),
+						active ? /* @__PURE__ */ jsx(motion.span, {
+							layoutId: "clarify-product-tab-indicator",
+							className: "absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-(--clarify-theme-tokens-colors-foreground) dark:bg-white",
+							transition: {
+								type: "spring",
+								stiffness: 420,
+								damping: 36
+							}
+						}) : null
+					]
+				}, `${tab.title}-${tab.path}`);
+			})
+		})
+	});
+}
 var Header = forwardRef(function Header(arg0, ref) {
-	const { config, navigation, routes, currentLocale, currentRoute, className, ...props } = arg0;
+	const { config, navigation, tabs, routes, currentLocale, currentRoute, className, ...props } = arg0;
+	const t = useBuiltInText();
 	const { isOpen: mobileNavIsOpen } = useMobileNavigationStore();
 	const isInsideMobileNavigation = useIsInsideMobileNavigation();
 	const { scrollY } = useScroll();
-	const bgOpacityLight = useTransform(scrollY, [0, 72], ["50%", "90%"]);
-	const bgOpacityDark = useTransform(scrollY, [0, 72], ["20%", "80%"]);
-	return /* @__PURE__ */ jsxs(motion.div, {
+	const bgOpacityLight = useTransform(scrollY, [0, 72], ["70%", "95%"]);
+	const bgOpacityDark = useTransform(scrollY, [0, 72], ["60%", "92%"]);
+	return /* @__PURE__ */ jsxs(motion.header, {
 		...props,
 		ref,
-		className: clsx(className, "clarify-header fixed inset-x-0 top-0 z-50 flex h-14 items-center justify-between gap-12 px-4 transition sm:px-6 lg:left-72 lg:z-30 lg:px-8 xl:left-80", !isInsideMobileNavigation && "backdrop-blur-xs lg:left-72 xl:left-80 dark:backdrop-blur-sm", isInsideMobileNavigation ? "bg-white dark:bg-zinc-950" : "bg-white/(--bg-opacity-light) dark:bg-zinc-950/(--bg-opacity-dark)"),
+		className: clsx(className, "clarify-header fixed inset-x-0 top-0 z-50 border-b border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-background)/(--bg-opacity-light) backdrop-blur-xs transition dark:border-white/10 dark:bg-zinc-950/(--bg-opacity-dark) dark:backdrop-blur-sm", isInsideMobileNavigation && "bg-(--clarify-theme-tokens-colors-background) dark:bg-zinc-950"),
 		style: {
 			"--bg-opacity-light": bgOpacityLight,
 			"--bg-opacity-dark": bgOpacityDark
 		},
-		children: [
-			/* @__PURE__ */ jsx("div", { className: clsx("absolute inset-x-0 top-full h-px transition", (isInsideMobileNavigation || !mobileNavIsOpen) && "bg-zinc-900/7.5 dark:bg-white/7.5") }),
-			/* @__PURE__ */ jsx("div", { className: "hidden lg:block" }),
-			/* @__PURE__ */ jsxs("div", {
-				className: "clarify-mobile-brand flex items-center gap-5 lg:hidden",
-				children: [/* @__PURE__ */ jsx(MobileNavigation, {
-					config,
-					navigation,
-					routes,
-					currentLocale,
-					currentRoute
-				}), config.logo ? /* @__PURE__ */ jsxs(CloseButton, {
-					as: Link,
-					to: localizeHref("/", config, currentLocale),
-					"aria-label": "Home",
-					className: "clarify-brand flex items-center gap-2 no-underline",
-					children: [/* @__PURE__ */ jsx(SiteLogo, {
-						logo: config.logo,
-						className: "h-6 w-6"
-					}), /* @__PURE__ */ jsx("span", {
-						className: "sr-only",
-						children: config.title
+		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-6 shrink-0"
+						}), /* @__PURE__ */ jsx("span", {
+							className: "clarify-brand-title truncate font-semibold",
+							children: config.title
+						})]
 					})]
-				}) : null]
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "clarify-header-actions flex items-center gap-5",
-				children: [
-					/* @__PURE__ */ jsx(Search, {
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "clarify-header-center absolute left-1/2 hidden -translate-x-1/2 lg:block",
+					children: /* @__PURE__ */ jsx(Search, {
 						routes,
 						navigation
-					}),
-					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))
+					})
+				}),
+				/* @__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
+						}),
+						/* @__PURE__ */ jsx(LanguageSwitcher, {
+							config,
+							currentLocale,
+							currentRoute
+						}),
+						/* @__PURE__ */ jsx(ThemeToggle, {}),
+						/* @__PURE__ */ jsx(MobileNavbarMenu, {
+							links: config.navbar?.links,
+							config,
+							currentLocale
 						})
-					}) : null,
-					config.navbar?.links?.length ? /* @__PURE__ */ jsx("div", { className: "hidden md:block md:h-5 md:w-px md:bg-zinc-900/10 md:dark:bg-white/15" }) : null,
-					/* @__PURE__ */ jsx(MobileSearch, {
-						routes,
-						navigation
-					}),
-					/* @__PURE__ */ jsx(LanguageSwitcher, {
-						config,
-						currentLocale,
-						currentRoute
-					}),
-					/* @__PURE__ */ jsx(ThemeToggle, {})
-				]
-			})
-		]
+					]
+				})
+			]
+		}), /* @__PURE__ */ jsx(ProductTabs, { tabs })]
 	});
 });
 //#endregion
 //#region source/app/AppShell.tsx
 function routeForPath(routes, pathname) {
-	return routes.find((route) => route.path === pathname || `/${route.path}` === pathname);
+	return routes.find((route) => isSameRoutePath(route.path, pathname));
 }
 function sectionsForRoute(route) {
 	return route?.sections?.map((section) => ({
@@ -1828,11 +2443,18 @@ function sectionsForRoute(route) {
 		tags: section.tags
 	})) ?? [];
 }
+function resolveRouteComponent(route) {
+	if (route.lazy) return lazy(route.component);
+	return route.component;
+}
 function scrollToHash(hash) {
 	if (!hash) return;
 	const targetId = decodeURIComponent(hash.slice(1));
 	window.requestAnimationFrame(() => {
 		document.getElementById(targetId)?.scrollIntoView();
+		window.requestAnimationFrame(() => {
+			window.dispatchEvent(new Event("scroll"));
+		});
 	});
 }
 function localeForPath(config, pathname, route) {
@@ -1842,25 +2464,101 @@ function localeForPath(config, pathname, route) {
 	const firstSegment = pathname.split("/").filter(Boolean)[0];
 	return i18n.locales.find((locale) => locale.code === firstSegment)?.code ?? i18n.defaultLocale;
 }
-function navigationForLocale(navigation, locale) {
-	if (Array.isArray(navigation)) return navigation;
-	if (!locale) return [];
-	return navigation[locale] ?? [];
+function isTabbedNavigation(navigation) {
+	return !Array.isArray(navigation) && "tabs" in navigation;
+}
+function hasPath(nodes, pathname) {
+	return nodes.some((node) => isSameRoutePath(node.path, pathname) || hasPath(node.children ?? [], pathname));
+}
+function navigationFromTabs(navigation, pathname) {
+	return {
+		items: navigation.tabs.find((tab) => isSameRoutePath(tab.path, pathname) || hasPath(tab.children, pathname))?.children ?? navigation.tabs[0]?.children ?? [],
+		tabs: navigation.tabs
+	};
+}
+function navigationForLocale(navigation, locale, pathname) {
+	if (Array.isArray(navigation)) return { items: navigation };
+	if (isTabbedNavigation(navigation)) return navigationFromTabs(navigation, pathname);
+	if (!locale) return { items: [] };
+	const localizedNavigation = navigation[locale];
+	if (!localizedNavigation) return { items: [] };
+	return Array.isArray(localizedNavigation) ? { items: localizedNavigation } : navigationFromTabs(localizedNavigation, pathname);
+}
+function themeStyle(config) {
+	const { colors, radius } = config.theme.tokens;
+	const { layout } = config.theme;
+	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": layout.maxWidth
+	};
+}
+function pageTitle(config, route) {
+	const routeTitle = route?.title?.trim();
+	if (!routeTitle || routeTitle === config.title) return config.title;
+	return `${routeTitle} - ${config.title}`;
 }
-function homePathForLocale(config, locale) {
-	if (!locale || !config.i18n || locale === config.i18n.defaultLocale) return "/";
-	return `/${locale}`;
+function setNamedMeta(name, content) {
+	const existing = document.head.querySelector(`meta[name="${name}"]`);
+	if (!content) {
+		existing?.remove();
+		return;
+	}
+	const meta = existing ?? document.createElement("meta");
+	meta.name = name;
+	meta.content = content;
+	if (!existing) document.head.appendChild(meta);
+}
+function applyDocumentMetadata(config, route) {
+	document.title = pageTitle(config, route);
+	setNamedMeta("description", route?.description ?? config.description);
+	setNamedMeta("keywords", route?.keywords?.join(", "));
+}
+function applyRootThemeVariables(themeVariables) {
+	const rootStyle = document.documentElement.style;
+	for (const [property, value] of Object.entries(themeVariables)) rootStyle.setProperty(property, value);
+	return () => {
+		for (const property of Object.keys(themeVariables)) rootStyle.removeProperty(property);
+	};
 }
 function AppShell(arg0) {
 	const { config, routes, navigation } = arg0;
 	const location = useLocation();
-	const currentRoute = routeForPath(routes, location.pathname);
-	const currentLocale = localeForPath(config, location.pathname, currentRoute);
+	const pathname = normalizeRoutePath(location.pathname);
+	const currentRoute = routeForPath(routes, pathname);
+	const currentLocale = localeForPath(config, pathname, currentRoute);
 	const currentLocaleConfig = config.i18n?.locales.find((locale) => locale.code === currentLocale);
-	const currentNavigation = navigationForLocale(navigation, currentLocale);
+	const currentNavigation = navigationForLocale(navigation, currentLocale, pathname);
 	const sections = sectionsForRoute(currentRoute);
+	const hasTabs = Boolean(currentNavigation.tabs?.length);
+	const themeVariables = themeStyle(config);
+	const renderRoutes = useMemo(() => routes.map((route) => ({
+		...route,
+		component: resolveRouteComponent(route)
+	})), [routes]);
+	useEffect(() => applyRootThemeVariables(themeVariables), [themeVariables]);
 	useEffect(() => {
-		scrollToHash(location.hash);
+		if (location.hash) {
+			scrollToHash(location.hash);
+			return;
+		}
+		window.scrollTo({
+			top: 0,
+			left: 0
+		});
+		window.requestAnimationFrame(() => {
+			window.dispatchEvent(new Event("scroll"));
+		});
 	}, [location.hash, location.pathname]);
 	useEffect(() => {
 		if (!currentLocale) return;
@@ -1868,61 +2566,64 @@ function AppShell(arg0) {
 		if (currentLocaleConfig?.dir) document.documentElement.dir = currentLocaleConfig.dir;
 		else document.documentElement.removeAttribute("dir");
 	}, [currentLocale, currentLocaleConfig?.dir]);
-	return /* @__PURE__ */ jsx(SectionProvider, {
-		sections,
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "clarify-app h-full min-h-screen bg-white lg:ml-72 xl:ml-80 dark:bg-zinc-950",
-			children: [/* @__PURE__ */ jsx(motion.header, {
-				layoutScroll: true,
-				className: "clarify-shell contents lg:pointer-events-none lg:fixed lg:inset-0 lg:z-40 lg:flex",
-				children: /* @__PURE__ */ jsxs("div", {
-					className: "clarify-sidebar contents lg:pointer-events-auto lg:block lg:w-72 lg:overflow-y-auto lg:border-r lg:border-zinc-900/10 lg:bg-white lg:px-6 lg:pt-4 lg:pb-8 xl:w-80 lg:dark:border-white/10 lg:dark:bg-zinc-950",
-					children: [
-						/* @__PURE__ */ jsx("div", {
-							className: "clarify-sidebar-brand hidden lg:flex",
-							children: /* @__PURE__ */ jsxs(Link, {
-								to: homePathForLocale(config, currentLocale),
-								"aria-label": "Home",
-								className: "clarify-brand flex items-center gap-2 no-underline",
-								children: [/* @__PURE__ */ jsx(SiteLogo, {
-									logo: config.logo,
-									className: "h-6 w-6"
-								}), /* @__PURE__ */ jsx("span", {
-									className: "clarify-brand-title text-sm font-semibold text-zinc-900 dark:text-white",
-									children: config.title
-								})]
-							})
-						}),
-						/* @__PURE__ */ jsx(Header, {
-							config,
-							navigation: currentNavigation,
-							routes,
-							currentLocale,
-							currentRoute
-						}),
-						/* @__PURE__ */ jsx(Navigation, {
-							navigation: currentNavigation,
-							className: "clarify-navigation hidden lg:mt-10 lg:block"
-						})
-					]
-				})
-			}), /* @__PURE__ */ jsxs("div", {
-				className: "clarify-content relative flex min-h-screen flex-col px-4 pt-14 sm:px-6 lg:px-8",
-				children: [/* @__PURE__ */ jsx(ContentActions, {
-					route: currentRoute,
-					routePrefix: config.routePrefix
-				}), /* @__PURE__ */ jsx("main", {
-					className: "clarify-main flex-auto",
-					children: /* @__PURE__ */ jsx(Routes, { children: routes.map((route) => /* @__PURE__ */ jsx(Route, {
-						path: route.path,
-						element: /* @__PURE__ */ jsx(route.component, {})
-					}, route.path)) })
-				})]
-			})]
+	useEffect(() => {
+		applyDocumentMetadata(config, currentRoute);
+	}, [config, currentRoute]);
+	return /* @__PURE__ */ jsx(ClarifyLocaleContext.Provider, {
+		value: currentLocale,
+		children: /* @__PURE__ */ jsx(SectionProvider, {
+			sections,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "clarify-app h-full min-h-screen bg-(--clarify-theme-tokens-colors-background) text-(--clarify-theme-tokens-colors-foreground) dark:bg-zinc-950 dark:text-white",
+				"data-theme-preset": config.theme.preset,
+				style: themeVariables,
+				children: [
+					/* @__PURE__ */ jsx(Header, {
+						config,
+						navigation: currentNavigation.items,
+						tabs: currentNavigation.tabs,
+						routes,
+						currentLocale,
+						currentRoute
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "clarify-layout mx-auto grid w-full max-w-(--clarify-theme-layout-max-width) grid-cols-1 lg:grid-cols-[18rem_minmax(0,1fr)] xl:grid-cols-[20rem_minmax(0,1fr)]",
+						children: [/* @__PURE__ */ jsx(motion.aside, {
+							layoutScroll: true,
+							className: clsx("clarify-sidebar hidden lg:sticky lg:z-30 lg:block lg:h-[calc(100vh-3.5rem)] lg:self-start lg:overflow-y-auto lg:bg-(--clarify-theme-tokens-colors-background) lg:px-5 lg:pb-8 xl:px-6 lg:dark:bg-zinc-950", hasTabs ? "lg:top-28 lg:h-[calc(100vh-7rem)] lg:pt-6" : "lg:top-14 lg:pt-6"),
+							children: /* @__PURE__ */ jsx(Navigation, { navigation: currentNavigation.items })
+						}), /* @__PURE__ */ jsxs("div", {
+							className: clsx("clarify-content @container relative flex min-h-screen min-w-0 flex-col px-4 sm:px-6 lg:px-8 xl:px-10", hasTabs ? "pt-14 lg:pt-28" : "pt-14"),
+							children: [
+								/* @__PURE__ */ jsx(ContentActions, {
+									hasTabs,
+									route: currentRoute,
+									routePrefix: config.routePrefix
+								}),
+								/* @__PURE__ */ jsx("main", {
+									className: "clarify-main min-w-0 flex-auto",
+									children: /* @__PURE__ */ jsx(Suspense, {
+										fallback: null,
+										children: /* @__PURE__ */ jsx(Routes, { children: renderRoutes.map((route) => /* @__PURE__ */ jsx(Route, {
+											path: route.path,
+											element: /* @__PURE__ */ jsx(route.component, {})
+										}, route.path)) })
+									})
+								}),
+								/* @__PURE__ */ jsx(PageNavigation, {
+									navigation: currentNavigation.items,
+									currentRoute
+								})
+							]
+						})]
+					}),
+					/* @__PURE__ */ jsx(PageFooter, {})
+				]
+			})
 		})
 	});
 }
 //#endregion
-export { BuiltWithClarify as C, remToPx as E, Pre as S, useSectionStore as T, GridPattern as _, Heading as a, Code as b, Tag as c, useTheme as d, PageFooter as f, useOpenApis as g, useClarifyConfig as h, DocShell as i, ThemeToggle as l, OpenApisContext as m, ApiEndpointCard as n, Logo as o, ClarifyConfigContext as p, Button as r, Prose as s, AppShell as t, ThemeProvider as u, HeroPattern as v, SectionProvider as w, CodeGroup as x, Feedback as y };
+export { remToPx as A, useBuiltInText as C, useOpenApis as D, useClarifyConfig as E, SectionProvider as O, BuiltWithClarify as S, OpenApisContext as T, CodeGroup as _, Heading as a, CardGroup as b, Tag as c, useTheme as d, PageFooter as f, Code as g, Feedback as h, DocShell as i, useSectionStore as k, ThemeToggle as l, HeroPattern as m, ApiEndpointCard as n, Logo as o, GridPattern as p, Button as r, Prose as s, AppShell as t, ThemeProvider as u, Pre as v, ClarifyConfigContext as w, Callout as x, Card as y };
 
-//# sourceMappingURL=AppShell-C_bj6ZhV.js.map
+//# sourceMappingURL=AppShell-nQnuKyn2.js.map