@clarify-labs/renderer 0.1.0 → 0.4.0

package/output/{AppShell-DBgUlirU.cjs → AppShell-CZw1MrPG.cjs}

@@ -29,16 +29,16 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 	enumerable: true
 }) : target, mod));
 //#endregion
+let clsx = require("clsx");
+clsx = __toESM(clsx, 1);
 let framer_motion = require("framer-motion");
 let react = require("react");
 let react_router_dom = require("react-router-dom");
 let zustand = require("zustand");
 let react_jsx_runtime = require("react/jsx-runtime");
-let clsx = require("clsx");
-clsx = __toESM(clsx, 1);
-let _headlessui_react = require("@headlessui/react");
 let lucide_react = require("lucide-react");
 lucide_react = __toESM(lucide_react, 1);
+let _headlessui_react = require("@headlessui/react");
 //#region source/utils/remToPx.ts
 function remToPx(remValue) {
 	return remValue * (typeof window === "undefined" ? 16 : Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize));
@@ -93,7 +93,14 @@ function SectionProvider(arg0) {
 	const [sectionStore] = (0, react.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__ */ (0, react_jsx_runtime.jsx)(SectionStoreContext.Provider, {
 		value: sectionStore,
@@ -106,110 +113,179 @@ function useSectionStore(selector) {
 	return (0, zustand.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__ */ (0, react_jsx_runtime.jsx)("img", {
-		src: logo,
-		alt: "",
-		className: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsx)("img", {
-		src: lightLogo,
-		alt: "",
-		className: (0, clsx.default)("clarify-logo", className)
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-		src: lightLogo,
-		alt: "",
-		className: (0, clsx.default)("clarify-logo clarify-logo-light", className, "dark:hidden")
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-		src: darkLogo,
-		alt: "",
-		className: (0, clsx.default)("clarify-logo clarify-logo-dark", className, "hidden dark:block")
-	})] });
+//#region source/context.tsx
+var ClarifyConfigContext = (0, react.createContext)(null);
+var ClarifyLocaleContext = (0, react.createContext)(void 0);
+var OpenApisContext = (0, react.createContext)({});
+function useClarifyConfig() {
+	const config = (0, react.useContext)(ClarifyConfigContext);
+	if (!config) throw new Error("[clarify] useClarifyConfig must be used within a ClarifyConfigContext.Provider");
+	return config;
 }
-//#endregion
-//#region source/shell/ContentActions.tsx
-function resolveRawContentUrl(rawContentUrl, routePrefix = "/") {
-	if (!routePrefix || routePrefix === "/") return rawContentUrl;
-	return `/${routePrefix.replace(/^\/+|\/+$/g, "")}${rawContentUrl}`;
+function useOpenApis() {
+	return (0, react.useContext)(OpenApisContext);
 }
-function getAbsoluteUrl(path) {
-	if (typeof window === "undefined") return path;
-	return new URL(path, window.location.href).href;
+//#endregion
+//#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";
 }
-async function copyText(text) {
-	await navigator.clipboard.writeText(text);
+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;
 }
-function ContentActions(arg0) {
-	const { route, routePrefix } = arg0;
-	const [copied, setCopied] = (0, react.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: lucide_react.Copy,
-		run: handleCopyContent
-	}, {
-		key: "link",
-		label: linkLabel,
-		icon: lucide_react.Link2,
-		run: handleCopyLink
-	}];
-	const primaryAction = actions[0];
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "clarify-content-actions sticky top-16 z-20 flex justify-end py-4",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.Menu, {
-			as: "div",
-			className: "clarify-content-actions-menu relative inline-flex text-xs font-medium",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(primaryAction.icon, { className: "h-3.5 w-3.5" }), copied === primaryAction.key ? "已复制" : "复制页面"]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.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__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: "h-3.5 w-3.5" })
-				})]
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.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 ? lucide_react.Check : action.icon;
-					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: copied === action.key ? "已复制" : action.label })]
-					}) }, action.key);
-				})
-			})]
-		})
-	});
+function useBuiltInText(locale) {
+	const config = (0, react.useContext)(ClarifyConfigContext);
+	const currentLocale = (0, react.useContext)(ClarifyLocaleContext);
+	const resolvedLocale = locale ?? currentLocale ?? config?.i18n?.defaultLocale;
+	return (key, replacements) => translateBuiltInText(resolvedLocale, key, replacements);
 }
 //#endregion
 //#region source/components/BuiltWithClarify.tsx
@@ -237,23 +313,163 @@ function ClarifyMark(props) {
 	});
 }
 function BuiltWithClarify() {
+	const t = useBuiltInText();
 	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", { children: "Built with" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("builtWith.prefix") }),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClarifyMark, { className: "clarify-built-with-logo h-3.5 w-5 flex-none" }),
 			/* @__PURE__ */ (0, react_jsx_runtime.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: lucide_react.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: lucide_react.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: lucide_react.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: lucide_react.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: lucide_react.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: lucide_react.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsx)(Icon, {
+			className: (0, clsx.default)("mt-1 size-4 flex-none", style.icon),
+			"aria-hidden": "true"
+		}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "min-w-0 flex-1 *:first:mt-0 *:last:mb-0",
+			children: [resolvedTitle ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: (0, clsx.default)("mb-1 font-semibold", style.title),
+				children: resolvedTitle
+			}) : null, /* @__PURE__ */ (0, react_jsx_runtime.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 = lucide_react[toPascalCase(name)];
+	if (!Icon) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-start gap-4",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardIcon, { name: icon }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "min-w-0 flex-1",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+				className: "m-0 text-base font-semibold text-[var(--clarify-theme-tokens-colors-foreground)] dark:text-white",
+				children: title
+			}), children ? /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "absolute inset-0 rounded-[var(--clarify-theme-tokens-radius-xl)]",
+		"aria-hidden": "true"
+	}) : null] });
+	const classes = (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: classes,
+		children: content
+	});
+	if (href.startsWith("/") && !href.startsWith("//")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Link, {
+		to: href,
+		className: classes,
+		...props,
+		children: content
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+		href,
+		className: classes,
+		...props,
+		children: content
+	});
+}
+//#endregion
 //#region source/components/Code.tsx
 var languageNames = {
 	js: "JavaScript",
@@ -272,10 +488,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);
@@ -300,6 +516,7 @@ function ClipboardIcon(props) {
 }
 function CopyButton(arg0) {
 	const { code } = arg0;
+	const t = useBuiltInText();
 	const [copyCount, setCopyCount] = (0, react.useState)(0);
 	const copied = copyCount > 0;
 	(0, react.useEffect)(() => {
@@ -310,7 +527,7 @@ function CopyButton(arg0) {
 	if (!code) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 		type: "button",
-		className: (0, clsx.default)("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: (0, clsx.default)("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);
@@ -319,11 +536,11 @@ function CopyButton(arg0) {
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 			"aria-hidden": copied,
 			className: (0, clsx.default)("pointer-events-none flex items-center gap-0.5 text-zinc-400 transition duration-300", copied && "-translate-y-1.5 opacity-0"),
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(ClipboardIcon, { className: "h-5 w-5 fill-zinc-500/20 stroke-zinc-500 transition-colors group-hover/button:stroke-zinc-400" }), t("actions.copy")]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			"aria-hidden": !copied,
-			className: (0, clsx.default)("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: (0, clsx.default)("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")
 		})]
 	});
 }
@@ -334,7 +551,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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-0.5 w-0.5 rounded-full bg-zinc-500" }) : null,
@@ -372,6 +589,7 @@ function CodePanel(arg0) {
 }
 function CodeGroupHeader(arg0) {
 	const { title, children, selectedIndex } = arg0;
+	const t = useBuiltInText();
 	const hasTabs = react.Children.count(children) > 1;
 	if (!title && !hasTabs) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -382,8 +600,11 @@ function CodeGroupHeader(arg0) {
 		}) : null, hasTabs ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.TabList, {
 			className: "clarify-code-tabs -mb-px flex gap-4 text-xs font-medium",
 			children: react.Children.map(children, (child, childIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.Tab, {
-				className: (0, clsx.default)("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((0, react.isValidElement)(child) ? child.props : {})
+				className: (0, clsx.default)("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({
+					...(0, react.isValidElement)(child) ? child.props : {},
+					fallbackTitle: t("actions.code")
+				})
 			}))
 		}) : null]
 	});
@@ -444,7 +665,11 @@ function useTabGroupProps(availableLanguages) {
 var CodeGroupContext = (0, react.createContext)(false);
 function CodeGroup(arg0) {
 	const { children, title, ...props } = arg0;
-	const tabGroupProps = useTabGroupProps(react.Children.map(children, (child) => getPanelTitle((0, react.isValidElement)(child) ? child.props : {})) ?? []);
+	const t = useBuiltInText();
+	const tabGroupProps = useTabGroupProps(react.Children.map(children, (child) => getPanelTitle({
+		...(0, react.isValidElement)(child) ? child.props : {},
+		fallbackTitle: t("actions.code")
+	})) ?? []);
 	const hasTabs = react.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__ */ (0, react_jsx_runtime.jsx)(CodeGroupHeader, {
@@ -523,6 +748,7 @@ function FeedbackButton(props) {
 }
 var FeedbackForm = (0, react.forwardRef)(function FeedbackForm(arg0, ref) {
 	const { onSubmit, className, ...props } = arg0;
+	const t = useBuiltInText();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
 		...props,
 		ref,
@@ -530,18 +756,18 @@ var FeedbackForm = (0, react.forwardRef)(function FeedbackForm(arg0, ref) {
 		className: (0, clsx.default)(className, "clarify-feedback-form absolute inset-0 flex items-center justify-center gap-6 md:justify-start"),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 			className: "text-sm text-zinc-600 dark:text-zinc-400",
-			children: "Was this page helpful?"
+			children: t("feedback.prompt")
 		}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(FeedbackButton, {
 					"data-response": "yes",
-					children: "Yes"
+					children: t("feedback.yes")
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "bg-zinc-900/10 dark:bg-white/10" }),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FeedbackButton, {
 					"data-response": "no",
-					children: "No"
+					children: t("feedback.no")
 				})
 			]
 		})]
@@ -549,13 +775,14 @@ var FeedbackForm = (0, react.forwardRef)(function FeedbackForm(arg0, ref) {
 });
 var FeedbackThanks = (0, react.forwardRef)(function FeedbackThanks(arg0, ref) {
 	const { className, ...props } = arg0;
+	const t = useBuiltInText();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		...props,
 		ref,
 		className: (0, clsx.default)(className, "clarify-feedback-thanks absolute inset-0 flex justify-center md:justify-start"),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(CheckIcon, { 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__ */ (0, react_jsx_runtime.jsx)(CheckIcon, { 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")]
 		})
 	});
 });
@@ -627,7 +854,7 @@ function HeroPattern() {
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "absolute top-0 left-1/2 -ml-152 h-100 w-325 dark:mask-[linear-gradient(white,transparent)]",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(GridPattern, {
 					width: 72,
 					height: 56,
@@ -651,18 +878,6 @@ function HeroPattern() {
 	});
 }
 //#endregion
-//#region source/context.tsx
-var ClarifyConfigContext = (0, react.createContext)(null);
-var OpenApisContext = (0, react.createContext)({});
-function useClarifyConfig() {
-	const config = (0, react.useContext)(ClarifyConfigContext);
-	if (!config) throw new Error("[clarify] useClarifyConfig must be used within a ClarifyConfigContext.Provider");
-	return config;
-}
-function useOpenApis() {
-	return (0, react.useContext)(OpenApisContext);
-}
-//#endregion
 //#region source/components/PageFooter.tsx
 function resolveLocalizedText$1(text, locale, fallbackLocale) {
 	if (typeof text === "string") return text;
@@ -690,7 +905,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)
 	});
 }
@@ -700,7 +915,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
 	});
 }
@@ -713,11 +928,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__ */ (0, react_jsx_runtime.jsxs)("footer", {
-		className: (0, clsx.default)("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: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "clarify-footer-content flex flex-col gap-3 text-right sm:text-left",
 			children: [copyright ? /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "clarify-footer-links flex flex-wrap justify-end gap-x-4 gap-y-2 sm:justify-start",
@@ -737,6 +952,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__ */ (0, react_jsx_runtime.jsxs)("nav", {
+		className: "clarify-page-navigation mt-6 grid gap-3 @3xl:grid-cols-2",
+		"aria-label": t("navigation.previousNext"),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageNavigationLink, {
+			direction: "previous",
+			route: previous
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageNavigationLink, {
+			direction: "next",
+			route: next
+		})]
+	});
+}
+function PageNavigationLink(arg0) {
+	const { direction, route } = arg0;
+	const t = useBuiltInText();
+	if (!route) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "hidden @3xl:block" });
+	const isNext = direction === "next";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_router_dom.Link, {
+		to: normalizeRoutePath(route.path),
+		className: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsx)(lucide_react.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__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(lucide_react.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__ */ (0, react_jsx_runtime.jsx)("img", {
+		src: logo,
+		alt: "",
+		className: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsx)("img", {
+		src: lightLogo,
+		alt: "",
+		className: (0, clsx.default)("clarify-logo", className)
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+		src: lightLogo,
+		alt: "",
+		className: (0, clsx.default)("clarify-logo clarify-logo-light", className, "dark:hidden")
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+		src: darkLogo,
+		alt: "",
+		className: (0, clsx.default)("clarify-logo clarify-logo-dark", className, "hidden dark:block")
+	})] });
+}
+//#endregion
 //#region source/components/ThemeProvider.tsx
 var ThemeContext = (0, react.createContext)(null);
 var storageKey = "clarify:theme";
@@ -815,15 +1119,16 @@ function MoonIcon(props) {
 }
 function ThemeToggle() {
 	const { resolvedTheme, setTheme } = useTheme();
+	const t = useBuiltInText();
 	const otherTheme = resolvedTheme === "dark" ? "light" : "dark";
 	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", { className: "absolute size-12 pointer-fine:hidden" }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SunIcon, { className: "h-5 w-5 stroke-zinc-900 dark:hidden" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SunIcon, { className: "h-5 w-5 stroke-(--clarify-theme-tokens-colors-foreground) dark:hidden" }),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MoonIcon, { className: "hidden h-5 w-5 stroke-white dark:block" })
 		]
 	});
@@ -845,11 +1150,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;
@@ -893,8 +1198,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 = {
@@ -909,7 +1214,7 @@ function Tag(arg0) {
 	const value = typeof children === "string" ? children.toUpperCase() : "";
 	const resolvedColor = color ?? tagValueColorMap[value] ?? "emerald";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: (0, clsx.default)("clarify-tag font-mono text-[0.625rem]/6 font-semibold", tagVariantStyles[variant], tagColorStyles[resolvedColor][variant]),
+		className: (0, clsx.default)("clarify-tag font-mono text-[0.625rem]/6 font-bold", tagVariantStyles[variant], tagColorStyles[resolvedColor][variant]),
 		children
 	});
 }
@@ -920,10 +1225,10 @@ function Logo(props) {
 		...props,
 		className: (0, clsx.default)("clarify-logo", props.className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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"
 		})]
 	});
@@ -931,7 +1236,7 @@ function Logo(props) {
 function Prose(arg0) {
 	const { as, className, ...props } = arg0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(as ?? "div", {
-		className: (0, clsx.default)(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: (0, clsx.default)(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
 	});
 }
@@ -975,7 +1280,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 = (0, react.useRef)(null);
@@ -1002,7 +1307,7 @@ function Heading(arg0) {
 		label
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
 		ref,
-		className: (0, clsx.default)("clarify-heading", tag || label ? "mt-2 scroll-mt-32" : "scroll-mt-24"),
+		className: (0, clsx.default)("clarify-heading", tag || label ? "mt-2 scroll-mt-32" : "scroll-mt-24", className),
 		...props,
 		children: anchor ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Anchor, {
 			id: props.id,
@@ -1048,7 +1353,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] = (0, react.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: lucide_react.Copy,
+		run: handleCopyContent
+	}, {
+		key: "link",
+		label: t("contentActions.copyLink", replacements),
+		description: t("contentActions.copyLinkDescription", replacements),
+		icon: lucide_react.Link2,
+		run: handleCopyLink
+	}];
+	const primaryAction = actions[0];
+	const PrimaryIcon = copied === primaryAction.key ? lucide_react.Check : primaryAction.icon;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `clarify-content-actions sticky z-20 flex justify-end py-4 ${hasTabs ? "top-16 lg:top-30" : "top-16"}`,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.Menu, {
+			as: "div",
+			className: "clarify-content-actions-menu relative inline-flex text-sm font-medium",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(PrimaryIcon, { className: "h-3.5 w-3.5" }), copied === primaryAction.key ? t("actions.copied") : primaryAction.label]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.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__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: "h-3.5 w-3.5" })
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.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__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "h-4 w-4" })
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: "flex min-w-0 flex-1 flex-col px-1",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "clarify-ui-menu-title",
+										children: isCopied ? t("contentActions.copiedContent") : action.label
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "clarify-ui-menu-description truncate",
+										children: action.description
+									})]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.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__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(lucide_react.FileText, { className: "h-4 w-4" })
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "flex min-w-0 flex-1 flex-col px-1",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: "clarify-ui-menu-title flex items-center gap-1",
+									children: [viewLabel, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ExternalLink, { className: "clarify-ui-menu-icon h-3 w-3" })]
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "clarify-ui-menu-description truncate",
+									children: viewDescription
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.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__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "h-4 w-4" })
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: "flex min-w-0 flex-1 flex-col px-1",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "clarify-ui-menu-title",
+										children: isCopied ? t("contentActions.copiedLink") : action.label
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "clarify-ui-menu-description truncate",
+										children: action.description
+									})]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.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;
@@ -1059,6 +1515,8 @@ function NavigationIcon(arg0) {
 		"aria-hidden": "true"
 	});
 }
+//#endregion
+//#region source/shell/Navigation.tsx
 function useInitialValue(value, condition = true) {
 	const [initialValue] = (0, react.useState)(value);
 	return condition ? initialValue : value;
@@ -1066,11 +1524,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,
@@ -1080,18 +1538,6 @@ function navigationToGroups(navigation) {
 		};
 	});
 }
-function TopLevelNavItem$1(arg0) {
-	const { href, children } = arg0;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
-		className: "md:hidden",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.CloseButton, {
-			as: react_router_dom.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",
@@ -1105,7 +1551,7 @@ var sectionBadgeColorStyles = {
 function SectionBadge(arg0) {
 	const { children } = arg0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: (0, clsx.default)("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: (0, clsx.default)("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
 	});
 }
@@ -1118,6 +1564,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__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.CloseButton, {
@@ -1125,7 +1574,7 @@ function NavLink(arg0) {
 		to: href,
 		"aria-current": active ? "page" : void 0,
 		onClick: handleClick,
-		className: (0, clsx.default)("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: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsxs)("span", {
 			className: "flex min-w-0 flex-1 items-center gap-2",
 			children: [
@@ -1156,7 +1605,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__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
 		layout: true,
 		initial: { opacity: 0 },
@@ -1165,9 +1614,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
 		}
@@ -1176,10 +1625,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__ */ (0, react_jsx_runtime.jsx)(framer_motion.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,
@@ -1192,16 +1641,16 @@ function ActivePageMarker(arg0) {
 function NavigationGroup(arg0) {
 	const { group, className } = arg0;
 	const isInsideMobileNavigation = useIsInsideMobileNavigation();
-	const [pathname, sections] = useInitialValue([(0, react_router_dom.useLocation)().pathname, useSectionStore((s) => s.sections)], isInsideMobileNavigation);
-	const isActiveGroup = group.links.findIndex((link) => link.href === pathname) !== -1;
+	const [pathname, sections] = useInitialValue([normalizeRoutePath((0, react_router_dom.useLocation)().pathname), useSectionStore((s) => s.sections)], isInsideMobileNavigation);
+	const isActiveGroup = group.links.findIndex((link) => isSameRoutePath(link.href, pathname)) !== -1;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
 		className: (0, clsx.default)("clarify-navigation-group relative mt-6", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", { children: group.title })]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "relative mt-3 pl-2",
@@ -1215,7 +1664,7 @@ function NavigationGroup(arg0) {
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.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__ */ (0, react_jsx_runtime.jsx)(framer_motion.AnimatePresence, {
 					initial: false,
@@ -1227,38 +1676,41 @@ function NavigationGroup(arg0) {
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
 					role: "list",
 					className: "border-l border-transparent",
-					children: group.links.map((link) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.motion.li, {
-						layout: "position",
-						className: "relative",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavLink, {
-							href: link.href,
-							icon: link.icon,
-							active: link.href === pathname,
-							children: link.title
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.AnimatePresence, {
-							mode: "popLayout",
-							initial: false,
-							children: link.href === pathname && sections.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.ul, {
-								role: "list",
-								initial: { opacity: 0 },
-								animate: {
-									opacity: 1,
-									transition: { delay: .1 }
-								},
-								exit: {
-									opacity: 0,
-									transition: { duration: .15 }
-								},
-								children: sections.map((section) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(framer_motion.motion.li, {
+							layout: "position",
+							className: "relative",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavLink, {
+								href: link.href,
+								icon: link.icon,
+								active,
+								children: link.title
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.AnimatePresence, {
+								mode: "popLayout",
+								initial: false,
+								children: active && sections.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.ul, {
+									role: "list",
+									initial: { opacity: 0 },
+									animate: {
+										opacity: 1,
+										transition: { delay: .1 }
+									},
+									exit: {
+										opacity: 0,
+										transition: { duration: .15 }
+									},
+									children: sections.map((section) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavLink, {
+										href: `${link.href}#${section.id}`,
+										badge: section.badge,
+										tags: section.tags,
+										isAnchorLink: true,
+										children: section.title
+									}) }, section.id))
+								}) : null
+							})]
+						}, link.href);
+					})
 				})
 			]
 		})]
@@ -1266,19 +1718,16 @@ function NavigationGroup(arg0) {
 }
 function Navigation(arg0) {
 	const { navigation, className } = arg0;
-	const groups = navigationToGroups(navigation);
+	const groups = navigationToGroups(navigation, useBuiltInText()("navigation.documentation"));
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
 		className: (0, clsx.default)("clarify-navigation", className),
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("ul", {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
 			role: "list",
 			className: "clarify-navigation-list",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TopLevelNavItem$1, {
-				href: "/",
-				children: "Home"
-			}), groups.map((group, groupIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavigationGroup, {
+			children: groups.map((group, groupIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavigationGroup, {
 				group,
-				className: groupIndex === 0 ? "md:mt-0" : ""
-			}, group.title))]
+				className: groupIndex === 0 ? "mt-0" : ""
+			}, group.title))
 		})
 	});
 }
@@ -1305,8 +1754,84 @@ function XIcon(props) {
 	});
 }
 var IsInsideMobileNavigationContext = (0, react.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((0, react_router_dom.useLocation)().pathname);
+	const { close } = useMobileNavigationStore();
+	if (!tabs?.length) return null;
+	const activeTab = tabs.find((tab) => isActiveTab$1(tab, pathname)) ?? tabs[0];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.Menu, {
+		as: "div",
+		className: "clarify-mobile-tabs-select mb-6",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.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__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "flex min-w-0 items-center gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavigationIcon, {
+					name: activeTab.icon,
+					className: "h-4 w-4 shrink-0 text-(--clarify-theme-tokens-colors-primary)"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "truncate tracking-[-0.01em]",
+					children: activeTab.title
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("path", {
+					d: "M0 0L3 3L0 6",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "1.5",
+					strokeLinecap: "round"
+				})
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.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__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_router_dom.Link, {
+					to: tab.path,
+					onClick: close,
+					className: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "flex min-w-0 items-start gap-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavigationIcon, {
+							name: tab.icon,
+							className: "mt-0.5 h-4 w-4 shrink-0"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "min-w-0 whitespace-normal wrap-anywhere font-medium leading-5",
+							children: tab.title
+						})]
+					}), active ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+						viewBox: "0 0 20 20",
+						fill: "none",
+						"aria-hidden": "true",
+						className: "mt-0.5 h-4 w-4 shrink-0",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.Dialog, {
 		transition: true,
 		open: isOpen,
@@ -1314,18 +1839,19 @@ function MobileNavigationDialog(arg0) {
 		className: "clarify-mobile-navigation-dialog fixed inset-0 z-50 lg:hidden",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.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__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.DialogPanel, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.TransitionChild, { children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.TransitionChild, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.TransitionChild, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(MobileTabsSelect, { tabs }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Navigation, { navigation })]
 		}) })] })]
 	});
 }
@@ -1339,23 +1865,25 @@ var useMobileNavigationStore = (0, zustand.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__ */ (0, react_jsx_runtime.jsxs)(IsInsideMobileNavigationContext.Provider, {
 		value: true,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", { className: "absolute size-12 pointer-fine:hidden" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleIcon, { className: "w-2.5 stroke-zinc-900 dark:stroke-white" })]
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "absolute size-12 pointer-fine:hidden" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleIcon, { className: "w-2.5 stroke-(--clarify-theme-tokens-colors-foreground) dark:stroke-white" })]
 		}), !isInsideMobileNavigation ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, {
 			fallback: null,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileNavigationDialog, {
 				config,
 				navigation,
+				tabs,
 				routes,
 				currentLocale,
 				currentRoute,
@@ -1436,7 +1964,7 @@ function HighlightQuery(arg0) {
 	const { text, query } = arg0;
 	if (!query) return text;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: text.split(new RegExp(`(${escapeRegExp(query)})`, "ig")).map((part, index) => part.toLowerCase() === query.toLowerCase() ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("mark", {
-		className: "bg-transparent text-emerald-500 underline",
+		className: "bg-transparent text-(--clarify-theme-tokens-colors-primary) underline",
 		children: part
 	}, index) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: part }, index)) });
 }
@@ -1446,25 +1974,25 @@ function SearchResult(arg0) {
 	const hierarchy = [result.sectionTitle, result.pageTitle].filter((value) => typeof value === "string");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
 		id,
-		className: (0, clsx.default)("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: (0, clsx.default)("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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(HighlightQuery, {
 				text: result.title,
 				query
 			})
 		}), hierarchy.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HighlightQuery, {
 				text: item,
 				query
 			}), /* @__PURE__ */ (0, react_jsx_runtime.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]
@@ -1472,9 +2000,10 @@ function SearchResult(arg0) {
 }
 var SearchInput = (0, react.forwardRef)(function SearchInput(arg0, inputRef) {
 	const { query, setQuery, onClose, onSubmit, activeDescendantId } = arg0;
+	const t = useBuiltInText();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "clarify-search-input group relative flex h-12",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchIcon, { className: "pointer-events-none absolute top-0 left-3 h-full w-5 stroke-zinc-500" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchIcon, { className: "pointer-events-none absolute top-0 left-3 h-full w-5 stroke-(--clarify-theme-tokens-colors-muted)" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 			ref: inputRef,
 			"data-autofocus": true,
 			role: "combobox",
@@ -1491,13 +2020,14 @@ var SearchInput = (0, react.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 = (0, react_router_dom.useNavigate)();
 	const location = (0, react_router_dom.useLocation)();
 	const inputRef = (0, react.useRef)(null);
@@ -1548,12 +2078,12 @@ function SearchDialog(arg0) {
 		className: (0, clsx.default)("clarify-search-dialog fixed inset-0 z-50", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.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();
@@ -1571,24 +2101,12 @@ function SearchDialog(arg0) {
 					onClose: closeDialog,
 					onSubmit: () => selectResult()
 				}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "p-6 text-center",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NoResultsIcon, { className: "mx-auto h-5 w-5 stroke-zinc-900 dark:stroke-zinc-600" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
-							className: "mt-2 text-xs text-zinc-700 dark:text-zinc-400",
-							children: [
-								"Nothing found for",
-								" ",
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("strong", {
-									className: "font-semibold wrap-break-word text-zinc-900 dark:text-white",
-									children: [
-										"‘",
-										query,
-										"’"
-									]
-								}),
-								"."
-							]
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NoResultsIcon, { className: "mx-auto h-5 w-5 stroke-(--clarify-theme-tokens-colors-foreground) dark:stroke-zinc-600" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "mt-2 text-xs text-(--clarify-theme-tokens-colors-muted) dark:text-zinc-400",
+							children: t("search.noResults", { query })
 						})]
 					}) : null, results.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
 						id: "clarify-search-results",
@@ -1628,19 +2146,20 @@ function getModifierKey() {
 }
 function Search(arg0) {
 	const { routes, navigation } = arg0;
+	const t = useBuiltInText();
 	const modifierKey = getModifierKey();
 	const { buttonProps, dialogProps } = useSearchProps();
 	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(SearchIcon, { className: "h-5 w-5 stroke-current" }),
-				"Find something...",
+				t("search.button"),
 				/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("kbd", {
 						className: "font-sans",
 						children: modifierKey
@@ -1663,15 +2182,16 @@ function Search(arg0) {
 }
 function MobileSearch(arg0) {
 	const { routes, navigation, onNavigate } = arg0;
+	const t = useBuiltInText();
 	const { buttonProps, dialogProps } = useSearchProps();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "clarify-mobile-search contents lg:hidden",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", { className: "absolute size-12 pointer-fine:hidden" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchIcon, { className: "h-5 w-5 stroke-zinc-900 dark:stroke-white" })]
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "absolute size-12 pointer-fine:hidden" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchIcon, { className: "h-5 w-5 stroke-(--clarify-theme-tokens-colors-foreground) dark:stroke-white" })]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, {
 			fallback: null,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchDialog, {
@@ -1716,6 +2236,7 @@ function LanguageIcon(props) {
 }
 function LanguageSwitcher(arg0) {
 	const { config, currentLocale, currentRoute } = arg0;
+	const t = useBuiltInText();
 	const location = (0, react_router_dom.useLocation)();
 	const i18n = config.i18n;
 	if (!i18n || i18n.locales.length < 2) return null;
@@ -1726,8 +2247,8 @@ function LanguageSwitcher(arg0) {
 		as: "div",
 		className: "clarify-language-switcher relative",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.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__ */ (0, react_jsx_runtime.jsx)("span", { className: "absolute size-12 pointer-fine:hidden" }),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LanguageIcon, { className: "h-5 w-5 stroke-current" }),
@@ -1738,19 +2259,19 @@ function LanguageSwitcher(arg0) {
 			]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.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__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuItem, { children: ({ focus }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_router_dom.Link, {
 					to: `${localizedPath}${suffix}`,
-					className: (0, clsx.default)("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: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsx)("span", { children: locale.label }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "text-xs text-zinc-400 dark:text-zinc-500",
+						className: "clarify-ui-menu-code",
 						children: locale.code
 					})]
 				}) }, locale.code)];
@@ -1762,95 +2283,189 @@ function TopLevelNavItem(arg0) {
 	const { href, children } = arg0;
 	if (isExternalHref(href)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.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__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.Menu, {
+		as: "div",
+		className: "clarify-mobile-navbar-menu relative md:hidden",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.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__ */ (0, react_jsx_runtime.jsx)("span", { className: "absolute size-12 pointer-fine:hidden" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.MoreHorizontal, { className: "h-5 w-5" })]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.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__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuItem, { children: ({ focus }) => {
+					const className = (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsx)("a", {
+						href,
+						target: "_blank",
+						rel: "noreferrer",
+						className,
+						children: label
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.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((0, react_router_dom.useLocation)().pathname);
+	if (!tabs?.length) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("nav", {
+			className: "clarify-product-tabs-nav mx-auto flex h-full w-full max-w-(--clarify-theme-layout-max-width) items-stretch gap-6 overflow-x-auto px-5",
+			"aria-label": t("navbar.sections"),
+			children: tabs.map((tab) => {
+				const active = isActiveTab(tab, pathname);
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_router_dom.Link, {
+					to: tab.path,
+					"aria-current": active ? "page" : void 0,
+					className: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsx)(NavigationIcon, {
+							name: tab.icon,
+							className: "h-4 w-4"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: tab.title }),
+						active ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.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 = (0, react.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 } = (0, framer_motion.useScroll)();
-	const bgOpacityLight = (0, framer_motion.useTransform)(scrollY, [0, 72], ["50%", "90%"]);
-	const bgOpacityDark = (0, framer_motion.useTransform)(scrollY, [0, 72], ["20%", "80%"]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.motion.div, {
+	const bgOpacityLight = (0, framer_motion.useTransform)(scrollY, [0, 72], ["70%", "95%"]);
+	const bgOpacityDark = (0, framer_motion.useTransform)(scrollY, [0, 72], ["60%", "92%"]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.motion.header, {
 		...props,
 		ref,
-		className: (0, clsx.default)(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: (0, clsx.default)(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__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, clsx.default)("absolute inset-x-0 top-full h-px transition", (isInsideMobileNavigation || !mobileNavIsOpen) && "bg-zinc-900/7.5 dark:bg-white/7.5") }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "hidden lg:block" }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "clarify-mobile-brand flex items-center gap-5 lg:hidden",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileNavigation, {
-					config,
-					navigation,
-					routes,
-					currentLocale,
-					currentRoute
-				}), config.logo ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.CloseButton, {
-					as: react_router_dom.Link,
-					to: localizeHref("/", config, currentLocale),
-					"aria-label": "Home",
-					className: "clarify-brand flex items-center gap-2 no-underline",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SiteLogo, {
-						logo: config.logo,
-						className: "h-6 w-6"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "sr-only",
-						children: config.title
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, clsx.default)("clarify-header-main relative mx-auto flex h-14 w-full max-w-(--clarify-theme-layout-max-width) items-center justify-between gap-6 px-4 sm:px-6 lg:px-5", (isInsideMobileNavigation || !mobileNavIsOpen) && "shadow-none"),
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "clarify-header-left flex min-w-0 items-center gap-5",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "clarify-mobile-brand flex items-center gap-5 lg:hidden",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileNavigation, {
+							config,
+							navigation,
+							tabs,
+							routes,
+							currentLocale,
+							currentRoute
+						})
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.CloseButton, {
+						as: react_router_dom.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__ */ (0, react_jsx_runtime.jsx)(SiteLogo, {
+							logo: config.logo,
+							className: "h-6 w-6 shrink-0"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "clarify-brand-title truncate font-semibold",
+							children: config.title
+						})]
 					})]
-				}) : null]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "clarify-header-actions flex items-center gap-5",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Search, {
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "clarify-header-center absolute left-1/2 hidden -translate-x-1/2 lg:block",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Search, {
 						routes,
 						navigation
-					}),
-					config.navbar?.links?.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
-						className: "clarify-top-nav hidden md:block",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-							role: "list",
-							className: "flex items-center gap-8",
-							children: config.navbar.links.map((link) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TopLevelNavItem, {
-								href: localizeHref(link.href, config, currentLocale),
-								children: resolveLocalizedText(link.label, currentLocale, config.i18n?.defaultLocale)
-							}, link.href))
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "clarify-header-actions flex shrink-0 items-center gap-5",
+					children: [
+						config.navbar?.links?.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+							className: "clarify-top-nav hidden md:block",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+								role: "list",
+								className: "flex items-center gap-8",
+								children: config.navbar.links.map((link) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TopLevelNavItem, {
+									href: localizeHref(link.href, config, currentLocale),
+									children: resolveLocalizedText(link.label, currentLocale, config.i18n?.defaultLocale)
+								}, link.href))
+							})
+						}) : null,
+						config.navbar?.links?.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "hidden md:block md:h-5 md:w-px md:bg-(--clarify-theme-tokens-colors-border) md:dark:bg-white/15" }) : null,
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileSearch, {
+							routes,
+							navigation
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LanguageSwitcher, {
+							config,
+							currentLocale,
+							currentRoute
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThemeToggle, {}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileNavbarMenu, {
+							links: config.navbar?.links,
+							config,
+							currentLocale
 						})
-					}) : null,
-					config.navbar?.links?.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "hidden md:block md:h-5 md:w-px md:bg-zinc-900/10 md:dark:bg-white/15" }) : null,
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileSearch, {
-						routes,
-						navigation
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LanguageSwitcher, {
-						config,
-						currentLocale,
-						currentRoute
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThemeToggle, {})
-				]
-			})
-		]
+					]
+				})
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.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) => ({
@@ -1860,11 +2475,18 @@ function sectionsForRoute(route) {
 		tags: section.tags
 	})) ?? [];
 }
+function resolveRouteComponent(route) {
+	if (route.lazy) return (0, react.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) {
@@ -1874,25 +2496,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 homePathForLocale(config, locale) {
-	if (!locale || !config.i18n || locale === config.i18n.defaultLocale) return "/";
-	return `/${locale}`;
+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 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 = (0, react_router_dom.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 = (0, react.useMemo)(() => routes.map((route) => ({
+		...route,
+		component: resolveRouteComponent(route)
+	})), [routes]);
+	(0, react.useEffect)(() => applyRootThemeVariables(themeVariables), [themeVariables]);
 	(0, react.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]);
 	(0, react.useEffect)(() => {
 		if (!currentLocale) return;
@@ -1900,57 +2598,60 @@ function AppShell(arg0) {
 		if (currentLocaleConfig?.dir) document.documentElement.dir = currentLocaleConfig.dir;
 		else document.documentElement.removeAttribute("dir");
 	}, [currentLocale, currentLocaleConfig?.dir]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionProvider, {
-		sections,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "clarify-app h-full min-h-screen bg-white lg:ml-72 xl:ml-80 dark:bg-zinc-950",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.header, {
-				layoutScroll: true,
-				className: "clarify-shell contents lg:pointer-events-none lg:fixed lg:inset-0 lg:z-40 lg:flex",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "clarify-sidebar-brand hidden lg:flex",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_router_dom.Link, {
-								to: homePathForLocale(config, currentLocale),
-								"aria-label": "Home",
-								className: "clarify-brand flex items-center gap-2 no-underline",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SiteLogo, {
-									logo: config.logo,
-									className: "h-6 w-6"
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "clarify-brand-title text-sm font-semibold text-zinc-900 dark:text-white",
-									children: config.title
-								})]
-							})
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Header, {
-							config,
-							navigation: currentNavigation,
-							routes,
-							currentLocale,
-							currentRoute
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Navigation, {
-							navigation: currentNavigation,
-							className: "clarify-navigation hidden lg:mt-10 lg:block"
-						})
-					]
-				})
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "clarify-content relative flex min-h-screen flex-col px-4 pt-14 sm:px-6 lg:px-8",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContentActions, {
-					route: currentRoute,
-					routePrefix: config.routePrefix
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("main", {
-					className: "clarify-main flex-auto",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Routes, { children: routes.map((route) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Route, {
-						path: route.path,
-						element: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(route.component, {})
-					}, route.path)) })
-				})]
-			})]
+	(0, react.useEffect)(() => {
+		applyDocumentMetadata(config, currentRoute);
+	}, [config, currentRoute]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClarifyLocaleContext.Provider, {
+		value: currentLocale,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionProvider, {
+			sections,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(Header, {
+						config,
+						navigation: currentNavigation.items,
+						tabs: currentNavigation.tabs,
+						routes,
+						currentLocale,
+						currentRoute
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.aside, {
+							layoutScroll: true,
+							className: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsx)(Navigation, { navigation: currentNavigation.items })
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsx)(ContentActions, {
+									hasTabs,
+									route: currentRoute,
+									routePrefix: config.routePrefix
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("main", {
+									className: "clarify-main min-w-0 flex-auto",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, {
+										fallback: null,
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Routes, { children: renderRoutes.map((route) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Route, {
+											path: route.path,
+											element: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(route.component, {})
+										}, route.path)) })
+									})
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageNavigation, {
+									navigation: currentNavigation.items,
+									currentRoute
+								})
+							]
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageFooter, {})
+				]
+			})
 		})
 	});
 }
@@ -1979,6 +2680,24 @@ Object.defineProperty(exports, "Button", {
 		return Button;
 	}
 });
+Object.defineProperty(exports, "Callout", {
+	enumerable: true,
+	get: function() {
+		return Callout;
+	}
+});
+Object.defineProperty(exports, "Card", {
+	enumerable: true,
+	get: function() {
+		return Card;
+	}
+});
+Object.defineProperty(exports, "CardGroup", {
+	enumerable: true,
+	get: function() {
+		return CardGroup;
+	}
+});
 Object.defineProperty(exports, "ClarifyConfigContext", {
 	enumerable: true,
 	get: function() {
@@ -2099,6 +2818,12 @@ Object.defineProperty(exports, "remToPx", {
 		return remToPx;
 	}
 });
+Object.defineProperty(exports, "useBuiltInText", {
+	enumerable: true,
+	get: function() {
+		return useBuiltInText;
+	}
+});
 Object.defineProperty(exports, "useClarifyConfig", {
 	enumerable: true,
 	get: function() {
@@ -2124,4 +2849,4 @@ Object.defineProperty(exports, "useTheme", {
 	}
 });
 
-//# sourceMappingURL=AppShell-DBgUlirU.cjs.map
+//# sourceMappingURL=AppShell-CZw1MrPG.cjs.map