@clarify-labs/renderer 0.2.0 → 0.5.0

package/output/{AppShell-Ci894P_0.js → shell-BlMMdTpZ.js}

@@ -1,18 +1,580 @@
-import { AnimatePresence, motion, useInView, useIsPresent, useScroll, useTransform } from "framer-motion";
-import { Children, Fragment, Suspense, createContext, forwardRef, isValidElement, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { Link, Route, Routes, useLocation, useNavigate } from "react-router-dom";
-import { create, createStore, useStore } from "zustand";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
+import { Children, Fragment, Suspense, createContext, forwardRef, isValidElement, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import { CloseButton, Dialog, DialogBackdrop, DialogPanel, Menu, MenuButton, MenuItem, MenuItems, Tab, TabGroup, TabList, TabPanel, TabPanels, Transition, TransitionChild } from "@headlessui/react";
 import * as LucideIcons from "lucide-react";
-import { AlertTriangle, Check, CheckCircle2, ChevronDown, Copy, Info, Lightbulb, Link2, XCircle } from "lucide-react";
+import { AlertTriangle, Check, CheckCircle2, ChevronDown, Copy, ExternalLink, FileText, Info, Lightbulb, Link2, MoreHorizontal, XCircle } from "lucide-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion, useInView, useIsPresent, useScroll, useTransform } from "framer-motion";
+import { create, createStore, useStore } from "zustand";
+//#region source/core/context.tsx
+var ClarifyConfigContext = createContext(null);
+var ClarifyLocaleContext = createContext(void 0);
+var OpenApisContext = createContext({});
+function useClarifyConfig() {
+	const config = useContext(ClarifyConfigContext);
+	if (!config) throw new Error("[clarify] useClarifyConfig must be used within a ClarifyConfigContext.Provider");
+	return config;
+}
+function useOpenApis() {
+	return useContext(OpenApisContext);
+}
+//#endregion
+//#region source/core/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.copyLlms": "Copy llms.txt",
+		"contentActions.copyLlmsDescription": "Copy the llms.txt link for this site",
+		"contentActions.copiedLlms": "Copied llms.txt",
+		"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.copyLlms": "复制 llms.txt",
+		"contentActions.copyLlmsDescription": "复制此站点的 llms.txt 链接",
+		"contentActions.copiedLlms": "已复制 llms.txt",
+		"contentActions.copyOptions": "选择复制选项",
+		"contentActions.copiedContent": "已复制页面",
+		"contentActions.copiedLink": "已复制链接",
+		"contentActions.viewMarkdown": "以 Markdown 格式查看",
+		"contentActions.viewMarkdownDescription": "以纯文本查看此页面",
+		"contentActions.viewOpenApi": "查看 OpenAPI 原始内容",
+		"contentActions.viewOpenApiDescription": "在新标签页打开 API 描述文件",
+		"feedback.no": "否",
+		"feedback.prompt": "这个页面有帮助吗？",
+		"feedback.thanks": "感谢你的反馈！",
+		"feedback.yes": "是",
+		"navigation.documentation": "文档",
+		"navigation.next": "下一页",
+		"navigation.previous": "上一页",
+		"navigation.previousNext": "上一页和下一页",
+		"navigation.toggle": "切换导航",
+		"navbar.home": "首页",
+		"navbar.openLinks": "打开导航链接",
+		"navbar.sections": "文档栏目",
+		"openapi.apiDocumentation": "API 文档",
+		"openapi.bodyProperties": "请求体属性",
+		"openapi.collapse": "收起",
+		"openapi.endpointNotFound": "未找到端点：{endpoint}",
+		"openapi.example": "示例",
+		"openapi.expand": "展开",
+		"openapi.headers": "请求头",
+		"openapi.language": "语言",
+		"openapi.client": "客户端",
+		"openapi.mediaType": "媒体类型",
+		"openapi.openApiReference": "OpenAPI 参考",
+		"openapi.operationParameter": "操作参数。",
+		"openapi.optional": "可选。",
+		"openapi.parameter": "参数",
+		"openapi.pathParameters": "路径参数",
+		"openapi.queryParameters": "查询参数",
+		"openapi.request": "请求",
+		"openapi.requestBody": "请求体",
+		"openapi.required": "必填。",
+		"openapi.requiredBadge": "必填",
+		"openapi.response": "响应",
+		"openapi.responses": "响应",
+		"openapi.schemaExample": "Schema 示例",
+		"openapi.scrollExamplesLeft": "向左滚动示例",
+		"openapi.scrollExamplesRight": "向右滚动示例",
+		"openapi.specNotFound": "未找到 OpenAPI 描述文件：{specPath}",
+		"openapi.specPathMissing": "未提供 spec 或 specPath",
+		"openapi.status": "状态",
+		"openapi.version": "版本 {version}",
+		"search.button": "搜索...",
+		"search.noResults": "没有找到与 {query} 相关的结果。",
+		"search.placeholder": "搜索内容...",
+		"search.shortcutCtrl": "Ctrl ",
+		"theme.switchToDark": "切换到深色主题",
+		"theme.switchToLight": "切换到浅色主题",
+		"language.switch": "切换语言"
+	}
+};
+function resolveBuiltInLocale(locale) {
+	return locale === "zh-CN" || locale?.toLowerCase().startsWith("zh") ? "zh-CN" : "en";
+}
+function 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 useBuiltInText(locale) {
+	const config = useContext(ClarifyConfigContext);
+	const currentLocale = useContext(ClarifyLocaleContext);
+	const resolvedLocale = locale ?? currentLocale ?? config?.i18n?.defaultLocale;
+	return (key, replacements) => translateBuiltInText(resolvedLocale, key, replacements);
+}
+//#endregion
+//#region source/utils/clipboard.ts
+async function copyTextToClipboard(text) {
+	if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) try {
+		await navigator.clipboard.writeText(text);
+		return true;
+	} catch {}
+	if (typeof document === "undefined") return false;
+	const textarea = document.createElement("textarea");
+	textarea.value = text;
+	textarea.setAttribute("readonly", "");
+	textarea.style.position = "fixed";
+	textarea.style.top = "-9999px";
+	textarea.style.opacity = "0";
+	document.body.appendChild(textarea);
+	try {
+		textarea.select();
+		return document.execCommand("copy");
+	} catch {
+		return false;
+	} finally {
+		textarea.remove();
+	}
+}
+//#endregion
+//#region source/utils/href.ts
+function isExternalHref(href) {
+	return /^[a-z][a-z\d+.-]*:/i.test(href) || href.startsWith("//");
+}
+function hasLocalePrefix(href, config) {
+	const firstSegment = href.replace(/^\/+/, "").split("/")[0];
+	return Boolean(firstSegment && config.i18n?.locales.some((locale) => locale.code === firstSegment));
+}
+function localizeHref(href, config, locale) {
+	if (!locale || !config.i18n || isExternalHref(href) || href.startsWith("#")) return href;
+	if (locale === config.i18n.defaultLocale || hasLocalePrefix(href, config)) return href;
+	const cleanHref = href === "/" ? "" : href.replace(/^\/+/, "");
+	return `/${locale}${cleanHref ? `/${cleanHref}` : ""}`;
+}
+function prefixHref(href, routePrefix = "/") {
+	if (isExternalHref(href) || href.startsWith("#")) return href;
+	if (!routePrefix || routePrefix === "/") return href.startsWith("/") ? href : `/${href}`;
+	const prefix = routePrefix.replace(/^\/+|\/+$/g, "");
+	const path = href.replace(/^\/+/, "");
+	if (!path) return `/${prefix}`;
+	if (path === prefix || path.startsWith(`${prefix}/`)) return `/${path}`;
+	return `/${prefix}/${path}`;
+}
+//#endregion
+//#region source/shell/ContentActions.tsx
+function resolveContentArtifactUrl(contentArtifactUrl, routePrefix = "/") {
+	return prefixHref(contentArtifactUrl, routePrefix);
+}
+function getAbsoluteUrl(path) {
+	if (typeof window === "undefined") return path;
+	return new URL(path, window.location.href).href;
+}
+function ContentActions(arg0) {
+	const { hasTabs = false, route, routePrefix } = arg0;
+	const t = useBuiltInText();
+	const [copied, setCopied] = useState("idle");
+	if (!route?.contentArtifactUrl) return null;
+	const contentArtifactUrl = resolveContentArtifactUrl(route.contentArtifactUrl, routePrefix);
+	const isOpenApi = route.kind === "openapi";
+	const replacements = { contentType: isOpenApi ? "OpenAPI" : "Markdown" };
+	const viewLabel = isOpenApi ? t("contentActions.viewOpenApi") : t("contentActions.viewMarkdown");
+	const viewDescription = isOpenApi ? t("contentActions.viewOpenApiDescription") : t("contentActions.viewMarkdownDescription");
+	function markCopied(state) {
+		setCopied(state);
+		window.setTimeout(() => setCopied("idle"), 1600);
+	}
+	async function handleCopyContent() {
+		if (await copyTextToClipboard(await (await fetch(contentArtifactUrl)).text())) markCopied("content");
+	}
+	const llmsArtifactUrl = resolveContentArtifactUrl("/llms.txt", routePrefix);
+	async function handleCopyLink() {
+		if (await copyTextToClipboard(getAbsoluteUrl(contentArtifactUrl))) markCopied("link");
+	}
+	async function handleCopyLlms() {
+		if (await copyTextToClipboard(getAbsoluteUrl(llmsArtifactUrl))) markCopied("llms");
+	}
+	const actions = [{
+		key: "content",
+		label: t("contentActions.copyContent"),
+		description: t("contentActions.copyContentDescription", replacements),
+		icon: Copy,
+		run: handleCopyContent,
+		copiedLabel: t("contentActions.copiedContent")
+	}, {
+		key: "link",
+		label: t("contentActions.copyLink", replacements),
+		description: t("contentActions.copyLinkDescription", replacements),
+		icon: Link2,
+		run: handleCopyLink,
+		copiedLabel: t("contentActions.copiedLink")
+	}];
+	const llmsAction = {
+		key: "llms",
+		label: t("contentActions.copyLlms"),
+		description: t("contentActions.copyLlmsDescription"),
+		icon: FileText,
+		run: handleCopyLlms,
+		copiedLabel: t("contentActions.copiedLlms")
+	};
+	const primaryAction = actions[0];
+	const PrimaryIcon = copied === primaryAction.key ? Check : primaryAction.icon;
+	return /* @__PURE__ */ jsx("div", {
+		className: `clarify-content-actions sticky z-20 flex justify-end py-4 ${hasTabs ? "top-16 lg:top-30" : "top-16"}`,
+		children: /* @__PURE__ */ jsxs(Menu, {
+			as: "div",
+			className: "clarify-content-actions-menu relative inline-flex text-sm font-medium",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "clarify-content-actions-group inline-flex overflow-hidden rounded-full border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface)/90 shadow-sm shadow-zinc-900/5 backdrop-blur dark:border-white/10 dark:bg-zinc-900/80 dark:shadow-none",
+				children: [/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: primaryAction.run,
+					className: "clarify-content-actions-primary clarify-ui-control inline-flex h-8 items-center gap-1.5 px-3 transition",
+					children: [/* @__PURE__ */ jsx(PrimaryIcon, { className: "h-3.5 w-3.5" }), copied === primaryAction.key ? t("actions.copied") : primaryAction.label]
+				}), /* @__PURE__ */ jsx(MenuButton, {
+					className: "clarify-content-actions-trigger clarify-ui-control inline-flex h-8 w-8 items-center justify-center border-l border-(--clarify-theme-tokens-colors-border) transition dark:border-white/10",
+					"aria-label": t("contentActions.copyOptions"),
+					children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5" })
+				})]
+			}), /* @__PURE__ */ jsxs(MenuItems, {
+				anchor: "bottom end",
+				className: "clarify-content-actions-list clarify-ui-menu z-30 mt-2 w-(--clarify-ui-action-menu-width) origin-top-right rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) p-1.5 shadow-xl shadow-zinc-900/5 transition [--anchor-gap:--spacing(2)] focus:outline-none data-closed:scale-95 data-closed:opacity-0 dark:border-white/10 dark:bg-zinc-900 dark:shadow-none",
+				children: [
+					actions.slice(0, 1).map((action) => {
+						const Icon = action.icon;
+						const isCopied = copied === action.key;
+						return /* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							onClick: action.run,
+							className: "clarify-content-actions-item clarify-ui-menu-item group flex w-full items-center gap-2 rounded-(--clarify-theme-tokens-radius-lg) px-1.5 py-1.5 text-left transition",
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: "clarify-ui-menu-icon flex shrink-0 rounded-(--clarify-theme-tokens-radius-md) border border-(--clarify-theme-tokens-colors-border) p-1.5 dark:border-white/10",
+									children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" })
+								}),
+								/* @__PURE__ */ jsxs("span", {
+									className: "flex min-w-0 flex-1 flex-col px-1",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "clarify-ui-menu-title",
+										children: isCopied ? t("contentActions.copiedContent") : action.label
+									}), /* @__PURE__ */ jsx("span", {
+										className: "clarify-ui-menu-description truncate",
+										children: action.description
+									})]
+								}),
+								/* @__PURE__ */ jsx(Check, { className: `h-3.5 w-3.5 shrink-0 text-(--clarify-theme-tokens-colors-primary) transition ${isCopied ? "opacity-100" : "opacity-0"}` })
+							]
+						}) }, action.key);
+					}),
+					/* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsxs("a", {
+						href: contentArtifactUrl,
+						target: "_blank",
+						rel: "noreferrer",
+						className: "clarify-content-actions-item clarify-ui-menu-item group flex w-full items-center gap-2 rounded-(--clarify-theme-tokens-radius-lg) px-1.5 py-1.5 text-left no-underline transition",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "clarify-ui-menu-icon flex shrink-0 rounded-(--clarify-theme-tokens-radius-md) border border-(--clarify-theme-tokens-colors-border) p-1.5 dark:border-white/10",
+								children: /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4" })
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "flex min-w-0 flex-1 flex-col px-1",
+								children: [/* @__PURE__ */ jsxs("span", {
+									className: "clarify-ui-menu-title flex items-center gap-1",
+									children: [viewLabel, /* @__PURE__ */ jsx(ExternalLink, { className: "clarify-ui-menu-icon h-3 w-3" })]
+								}), /* @__PURE__ */ jsx("span", {
+									className: "clarify-ui-menu-description truncate",
+									children: viewDescription
+								})]
+							}),
+							/* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 shrink-0 text-(--clarify-theme-tokens-colors-primary) opacity-0" })
+						]
+					}) }),
+					actions.slice(1).map((action) => {
+						const Icon = action.icon;
+						const isCopied = copied === action.key;
+						return /* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							onClick: action.run,
+							className: "clarify-content-actions-item clarify-ui-menu-item group flex w-full items-center gap-2 rounded-(--clarify-theme-tokens-radius-lg) px-1.5 py-1.5 text-left transition",
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: "clarify-ui-menu-icon flex shrink-0 rounded-(--clarify-theme-tokens-radius-md) border border-(--clarify-theme-tokens-colors-border) p-1.5 dark:border-white/10",
+									children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" })
+								}),
+								/* @__PURE__ */ jsxs("span", {
+									className: "flex min-w-0 flex-1 flex-col px-1",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "clarify-ui-menu-title",
+										children: isCopied ? action.copiedLabel ?? action.label : action.label
+									}), /* @__PURE__ */ jsx("span", {
+										className: "clarify-ui-menu-description truncate",
+										children: action.description
+									})]
+								}),
+								/* @__PURE__ */ jsx(Check, { className: `h-3.5 w-3.5 shrink-0 text-(--clarify-theme-tokens-colors-primary) transition ${isCopied ? "opacity-100" : "opacity-0"}` })
+							]
+						}) }, action.key);
+					}),
+					/* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						onClick: llmsAction.run,
+						className: "clarify-content-actions-item clarify-ui-menu-item group flex w-full items-center gap-2 rounded-(--clarify-theme-tokens-radius-lg) px-1.5 py-1.5 text-left transition",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "clarify-ui-menu-icon flex shrink-0 rounded-(--clarify-theme-tokens-radius-md) border border-(--clarify-theme-tokens-colors-border) p-1.5 dark:border-white/10",
+								children: /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4" })
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "flex min-w-0 flex-1 flex-col px-1",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "clarify-ui-menu-title",
+									children: copied === llmsAction.key ? llmsAction.copiedLabel ?? llmsAction.label : llmsAction.label
+								}), /* @__PURE__ */ jsx("span", {
+									className: "clarify-ui-menu-description truncate",
+									children: llmsAction.description
+								})]
+							}),
+							/* @__PURE__ */ jsx(Check, { className: `h-3.5 w-3.5 shrink-0 text-(--clarify-theme-tokens-colors-primary) transition ${copied === llmsAction.key ? "opacity-100" : "opacity-0"}` })
+						]
+					}) }, llmsAction.key)
+				]
+			})]
+		})
+	});
+}
+//#endregion
+//#region source/theme/ThemeProvider.tsx
+var ThemeContext = createContext(null);
+var storageKey = "clarify:theme";
+function getSystemTheme() {
+	if (typeof window === "undefined") return "light";
+	return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function getStoredTheme() {
+	if (typeof window === "undefined") return "system";
+	try {
+		const storedTheme = window.localStorage.getItem(storageKey);
+		return storedTheme === "light" || storedTheme === "dark" || storedTheme === "system" ? storedTheme : "system";
+	} catch {
+		return "system";
+	}
+}
+function storeTheme(theme) {
+	if (typeof window === "undefined") return;
+	try {
+		window.localStorage.setItem(storageKey, theme);
+	} catch {}
+}
+function applyTheme(resolvedTheme) {
+	if (typeof document === "undefined") return;
+	document.documentElement.classList.toggle("dark", resolvedTheme === "dark");
+	document.documentElement.style.colorScheme = resolvedTheme;
+}
+function ThemeProvider(arg0) {
+	const { children } = arg0;
+	const [theme, setThemeState] = useState(() => getStoredTheme());
+	const [systemTheme, setSystemTheme] = useState(() => getSystemTheme());
+	const resolvedTheme = theme === "system" ? systemTheme : theme;
+	useEffect(() => {
+		applyTheme(resolvedTheme);
+	}, [resolvedTheme]);
+	useEffect(() => {
+		if (typeof window === "undefined") return;
+		const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+		function updateSystemTheme() {
+			setSystemTheme(mediaQuery.matches ? "dark" : "light");
+		}
+		updateSystemTheme();
+		mediaQuery.addEventListener("change", updateSystemTheme);
+		return () => mediaQuery.removeEventListener("change", updateSystemTheme);
+	}, []);
+	const value = useMemo(() => ({
+		theme,
+		resolvedTheme,
+		setTheme(nextTheme) {
+			setThemeState(nextTheme);
+			storeTheme(nextTheme);
+		}
+	}), [resolvedTheme, theme]);
+	return /* @__PURE__ */ jsx(ThemeContext.Provider, {
+		value,
+		children
+	});
+}
+function useTheme() {
+	const context = useContext(ThemeContext);
+	if (!context) throw new Error("[clarify] useTheme must be used within ThemeProvider");
+	return context;
+}
+//#endregion
+//#region source/theme/ThemeToggle.tsx
+function SunIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 20 20",
+		fill: "none",
+		"aria-hidden": "true",
+		...props,
+		children: [/* @__PURE__ */ jsx("path", { d: "M12.5 10a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z" }), /* @__PURE__ */ jsx("path", {
+			strokeLinecap: "round",
+			d: "M10 5.5v-1M13.182 6.818l.707-.707M14.5 10h1M13.182 13.182l.707.707M10 15.5v-1M6.11 13.889l.708-.707M4.5 10h1M6.11 6.111l.708.707"
+		})]
+	});
+}
+function MoonIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 20 20",
+		fill: "none",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "M15.224 11.724a5.5 5.5 0 0 1-6.949-6.949 5.5 5.5 0 1 0 6.949 6.949Z" })
+	});
+}
+function ThemeToggle() {
+	const { resolvedTheme, setTheme } = useTheme();
+	const t = useBuiltInText();
+	const otherTheme = resolvedTheme === "dark" ? "light" : "dark";
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: "clarify-theme-toggle relative flex size-8 items-center justify-center rounded-(--clarify-theme-tokens-radius-md) transition hover:bg-[color-mix(in_srgb,var(--clarify-theme-tokens-colors-foreground)_5%,transparent)] dark:hover:bg-white/5",
+		"aria-label": otherTheme === "dark" ? t("theme.switchToDark") : t("theme.switchToLight"),
+		onClick: () => setTheme(otherTheme),
+		children: [
+			/* @__PURE__ */ jsx("span", { className: "absolute size-12 pointer-fine:hidden" }),
+			/* @__PURE__ */ jsx(SunIcon, { className: "h-5 w-5 stroke-(--clarify-theme-tokens-colors-foreground) dark:hidden" }),
+			/* @__PURE__ */ jsx(MoonIcon, { className: "hidden h-5 w-5 stroke-white dark:block" })
+		]
+	});
+}
+//#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/utils/lucide.ts
+/**
+* Registry of all Lucide icon components keyed by their PascalCase export name.
+*
+* Access icons via index lookup (e.g. `lucideIconRegistry[name]`) so React
+* tooling does not mistake the access for a component created during render.
+*/
+var lucideIconRegistry = LucideIcons;
+function toPascalCase(value) {
+	return value.split(/[^a-zA-Z0-9]+/).filter(Boolean).map((part) => `${part.charAt(0).toUpperCase()}${part.slice(1)}`).join("");
+}
+/**
+* Resolve an icon name into the matching Lucide registry key.
+*
+* Accepts both the exact PascalCase export name (e.g. `ArrowRight`) and
+* kebab/space/snake variants (e.g. `arrow-right`), returning `undefined`
+* when no matching icon exists.
+*/
+function resolveLucideIconName(name) {
+	if (!name) return void 0;
+	if (lucideIconRegistry[name]) return name;
+	const pascalName = toPascalCase(name);
+	return lucideIconRegistry[pascalName] ? pascalName : void 0;
+}
+//#endregion
+//#region source/shell/icons.tsx
+function NavigationIcon(arg0) {
+	const { name, className } = arg0;
+	if (!name) return null;
+	const iconName = resolveLucideIconName(name);
+	if (!iconName) return null;
+	const Icon = lucideIconRegistry[iconName];
+	if (!Icon) return null;
+	return /* @__PURE__ */ jsx(Icon, {
+		className: clsx("shrink-0 stroke-current", className),
+		"aria-hidden": "true"
+	});
+}
+//#endregion
 //#region source/utils/remToPx.ts
 function remToPx(remValue) {
 	return remValue * (typeof window === "undefined" ? 16 : Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize));
 }
 //#endregion
-//#region source/components/SectionProvider.tsx
+//#region source/app/SectionProvider.tsx
 function createSectionStore(sections) {
 	return createStore()((set) => ({
 		sections,
@@ -31,16 +593,16 @@ function useVisibleSections(sectionStore) {
 	useEffect(() => {
 		function checkVisibleSections() {
 			const { innerHeight, scrollY } = window;
+			const viewportTop = scrollY;
+			const viewportBottom = scrollY + innerHeight;
 			const newVisibleSections = [];
 			for (let sectionIndex = 0; sectionIndex < sections.length; sectionIndex += 1) {
 				const { id, headingRef, offsetRem = 0 } = sections[sectionIndex];
 				if (!headingRef?.current) continue;
 				const offset = remToPx(offsetRem);
 				const top = headingRef.current.getBoundingClientRect().top + scrollY;
-				if (sectionIndex === 0 && top - offset > scrollY) newVisibleSections.push("_top");
-				const nextSection = sections[sectionIndex + 1];
-				const bottom = (nextSection?.headingRef?.current?.getBoundingClientRect().top ?? Infinity) + scrollY - remToPx(nextSection?.offsetRem ?? 0);
-				if (top > scrollY && top < scrollY + innerHeight || bottom > scrollY && bottom < scrollY + innerHeight || top <= scrollY && bottom >= scrollY + innerHeight) newVisibleSections.push(id);
+				if (sectionIndex === 0 && top - offset > viewportTop) newVisibleSections.push("_top");
+				if ((sections[sectionIndex + 1]?.headingRef?.current?.getBoundingClientRect().top ?? Infinity) + scrollY > viewportTop && top < viewportBottom) newVisibleSections.push(id);
 			}
 			setVisibleSections(newVisibleSections);
 		}
@@ -61,7 +623,17 @@ function SectionProvider(arg0) {
 	const [sectionStore] = useState(() => createSectionStore(sections));
 	useVisibleSections(sectionStore);
 	useIsomorphicLayoutEffect(() => {
-		sectionStore.setState({ sections });
+		sectionStore.setState((state) => ({
+			sections: sections.map((section) => {
+				const registeredSection = state.sections.find((item) => item.id === section.id);
+				return {
+					...section,
+					headingRef: registeredSection?.headingRef,
+					offsetRem: registeredSection?.offsetRem ?? section.offsetRem
+				};
+			}),
+			visibleSections: []
+		}));
 	}, [sectionStore, sections]);
 	return /* @__PURE__ */ jsx(SectionStoreContext.Provider, {
 		value: sectionStore,
@@ -74,151 +646,46 @@ function useSectionStore(selector) {
 	return useStore(store, selector);
 }
 //#endregion
-//#region source/components/SiteLogo.tsx
-function SiteLogo(arg0) {
-	const { logo, className } = arg0;
-	if (!logo) return null;
-	if (typeof logo === "string") return /* @__PURE__ */ jsx("img", {
-		src: logo,
-		alt: "",
-		className: clsx("clarify-logo", className)
-	});
-	const lightLogo = logo.light ?? logo.dark;
-	const darkLogo = logo.dark ?? logo.light;
-	if (!lightLogo || !darkLogo) return null;
-	if (lightLogo === darkLogo) return /* @__PURE__ */ jsx("img", {
-		src: lightLogo,
-		alt: "",
-		className: clsx("clarify-logo", className)
+//#region source/components/Button.tsx
+function ArrowIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 20 20",
+		fill: "none",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", {
+			stroke: "currentColor",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			d: "m11.5 6.5 3 3.5m0 0-3 3.5m3-3.5h-9"
+		})
 	});
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("img", {
-		src: lightLogo,
-		alt: "",
-		className: clsx("clarify-logo clarify-logo-light", className, "dark:hidden")
-	}), /* @__PURE__ */ jsx("img", {
-		src: darkLogo,
-		alt: "",
-		className: clsx("clarify-logo clarify-logo-dark", className, "hidden dark:block")
-	})] });
-}
-//#endregion
-//#region source/shell/ContentActions.tsx
-function resolveRawContentUrl(rawContentUrl, routePrefix = "/") {
-	if (!routePrefix || routePrefix === "/") return rawContentUrl;
-	return `/${routePrefix.replace(/^\/+|\/+$/g, "")}${rawContentUrl}`;
-}
-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 { route, routePrefix } = arg0;
-	const [copied, setCopied] = useState("idle");
-	if (!route?.rawContentUrl) return null;
-	const rawContentUrl = resolveRawContentUrl(route.rawContentUrl, routePrefix);
-	const isOpenApi = route.kind === "openapi";
-	const contentLabel = isOpenApi ? "复制 OpenAPI 内容" : "复制 Markdown 内容";
-	const linkLabel = isOpenApi ? "复制 OpenAPI 链接" : "复制 Markdown 链接";
-	function markCopied(state) {
-		setCopied(state);
-		window.setTimeout(() => setCopied("idle"), 1600);
-	}
-	async function handleCopyContent() {
-		await copyText(await (await fetch(rawContentUrl)).text());
-		markCopied("content");
-	}
-	async function handleCopyLink() {
-		await copyText(getAbsoluteUrl(rawContentUrl));
-		markCopied("link");
-	}
-	const actions = [{
-		key: "content",
-		label: contentLabel,
-		icon: Copy,
-		run: handleCopyContent
-	}, {
-		key: "link",
-		label: linkLabel,
-		icon: Link2,
-		run: handleCopyLink
-	}];
-	const primaryAction = actions[0];
-	return /* @__PURE__ */ jsx("div", {
-		className: "clarify-content-actions sticky top-16 z-20 flex justify-end py-4",
-		children: /* @__PURE__ */ jsxs(Menu, {
-			as: "div",
-			className: "clarify-content-actions-menu relative inline-flex text-xs font-medium",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "clarify-content-actions-group inline-flex overflow-hidden rounded-full border border-zinc-900/10 bg-white/85 backdrop-blur dark:border-white/10 dark:bg-white/5",
-				children: [/* @__PURE__ */ jsxs("button", {
-					type: "button",
-					onClick: primaryAction.run,
-					className: "clarify-content-actions-primary inline-flex h-8 items-center gap-1.5 px-3 text-zinc-600 transition hover:bg-zinc-100 hover:text-zinc-950 dark:text-zinc-300 dark:hover:bg-white/10 dark:hover:text-white",
-					children: [copied === primaryAction.key ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(primaryAction.icon, { className: "h-3.5 w-3.5" }), copied === primaryAction.key ? "已复制" : "复制页面"]
-				}), /* @__PURE__ */ jsx(MenuButton, {
-					className: "clarify-content-actions-trigger inline-flex h-8 w-8 items-center justify-center border-l border-zinc-900/10 text-zinc-500 transition hover:bg-zinc-100 hover:text-zinc-950 dark:border-white/10 dark:text-zinc-400 dark:hover:bg-white/10 dark:hover:text-white",
-					"aria-label": "选择复制选项",
-					children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5" })
-				})]
-			}), /* @__PURE__ */ jsx(MenuItems, {
-				anchor: "bottom end",
-				className: "clarify-content-actions-list z-30 mt-2 w-52 origin-top-right rounded-2xl border border-zinc-900/10 bg-white p-1 text-xs shadow-md transition [--anchor-gap:--spacing(2)] focus:outline-none data-closed:scale-95 data-closed:opacity-0 dark:border-white/10 dark:bg-zinc-900",
-				children: actions.map((action) => {
-					const Icon = copied === action.key ? Check : action.icon;
-					return /* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsxs("button", {
-						type: "button",
-						onClick: action.run,
-						className: "clarify-content-actions-item flex w-full items-center gap-2 rounded-xl px-3 py-2 text-left text-zinc-600 transition data-focus:bg-zinc-100 data-focus:text-zinc-950 dark:text-zinc-300 dark:data-focus:bg-white/10 dark:data-focus:text-white",
-						children: [/* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ jsx("span", { children: copied === action.key ? "已复制" : action.label })]
-					}) }, action.key);
-				})
-			})]
-		})
-	});
-}
-//#endregion
-//#region source/components/BuiltWithClarify.tsx
-function ClarifyMark(props) {
-	return /* @__PURE__ */ jsxs("svg", {
-		viewBox: "0 0 279 200",
-		"aria-hidden": "true",
+var buttonVariantStyles = {
+	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;
+	const classes = clsx("clarify-button inline-flex justify-center gap-0.5 overflow-hidden text-sm font-medium transition", buttonVariantStyles[variant], className);
+	const arrowIcon = /* @__PURE__ */ jsx(ArrowIcon, { className: clsx("mt-0.5 h-5 w-5", variant === "text" && "relative top-px", arrow === "left" && "-ml-1 rotate-180", arrow === "right" && "-mr-1") });
+	const inner = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		arrow === "left" ? arrowIcon : null,
+		children,
+		arrow === "right" ? arrowIcon : null
+	] });
+	if (typeof props.href === "undefined") return /* @__PURE__ */ jsx("button", {
+		className: classes,
 		...props,
-		children: [
-			/* @__PURE__ */ jsx("path", {
-				d: "M44.867217 0.00543761C130.715579 1.00591567 200 70.9091172 200 156.994562L199.986321 155.127494C199.384888 180.009127 179.026368 199.994562 154 199.994562H46C20.5949015 199.994562 0 179.399661 0 153.994562V45.9945624C0 21.0975659 19.7793434 0.820282524 44.4815926 0.0191499894Z",
-				fill: "#00D492"
-			}),
-			/* @__PURE__ */ jsx("path", {
-				d: "M123.867217 0.00543761C209.715579 1.00591567 279 70.9091172 279 156.994562L278.986321 155.127494C278.384888 180.009127 258.026368 199.994562 233 199.994562H125C99.5949015 199.994562 79 179.399661 79 153.994562V45.9945624C79 21.0975659 98.7793434 0.820282524 123.481593 0.0191499894Z",
-				fill: "#00F6C9",
-				fillOpacity: "0.6",
-				transform: "rotate(-90 179 100)"
-			}),
-			/* @__PURE__ */ jsx("path", {
-				d: "M199.979267 154.416906L199.984438 155.157125L199.962366 155.872459C198.977251 180.406837 178.776104 199.994562 154 199.994562L124.372438 199.994125L124.249053 199.994081C99.6939678 199.603921 79.8122712 179.973634 79.01915 155.518407L79.0054376 155.132783C79.5830823 105.566626 103.129768 61.5221348 139.498462 33.1463428C175.69419 61.3871018 199.186123 105.143863 199.979267 154.416906Z",
-				fill: "#00F692"
-			})
-		]
+		children: inner
 	});
-}
-function BuiltWithClarify() {
-	return /* @__PURE__ */ jsxs("a", {
-		href: "https://clarify.pub",
-		target: "_blank",
-		rel: "noreferrer",
-		"aria-label": "Built with Clarify",
-		className: "clarify-built-with inline-flex items-center gap-1.5 rounded-full px-2 py-1 text-xs font-medium text-zinc-500 no-underline transition hover:bg-zinc-900/2.5 hover:text-zinc-900 dark:text-zinc-500 dark:hover:bg-white/5 dark:hover:text-white",
-		children: [
-			/* @__PURE__ */ jsx("span", { children: "Built with" }),
-			/* @__PURE__ */ jsx(ClarifyMark, { className: "clarify-built-with-logo h-3.5 w-5 flex-none" }),
-			/* @__PURE__ */ jsx("span", {
-				className: "font-semibold text-zinc-700 dark:text-zinc-300",
-				children: "Clarify"
-			})
-		]
+	return /* @__PURE__ */ jsx("a", {
+		className: classes,
+		...props,
+		children: inner
 	});
 }
 //#endregion
@@ -261,21 +728,22 @@ var calloutStyles = {
 		Icon: CheckCircle2
 	}
 };
-var defaultTitles = {
-	info: "Info",
-	note: "Note",
-	tip: "Tip",
-	warning: "Warning",
-	danger: "Danger",
-	success: "Success"
+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 ? defaultTitles[type] : title;
+	const resolvedTitle = title === void 0 ? t(defaultTitleKeys[type]) : title;
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("clarify-callout my-6 flex gap-3 rounded-2xl border p-4 text-sm/6", style.container, className),
+		className: clsx("clarify-callout my-6 flex gap-3 rounded-(--clarify-theme-tokens-radius-xl) border p-4 text-sm/6", style.container, className),
 		...props,
 		children: [icon ? /* @__PURE__ */ jsx(Icon, {
 			className: clsx("mt-1 size-4 flex-none", style.icon),
@@ -294,16 +762,15 @@ function Callout(arg0) {
 }
 //#endregion
 //#region source/components/Card.tsx
-function toPascalCase(value) {
-	return value.split(/[^a-zA-Z0-9]+/).filter(Boolean).map((part) => `${part.charAt(0).toUpperCase()}${part.slice(1)}`).join("");
-}
 function CardIcon(arg0) {
 	const { name } = arg0;
 	if (!name) return null;
-	const Icon = LucideIcons[toPascalCase(name)];
+	const iconName = resolveLucideIconName(name);
+	if (!iconName) return null;
+	const Icon = lucideIconRegistry[iconName];
 	if (!Icon) return null;
 	return /* @__PURE__ */ jsx("span", {
-		className: "flex size-9 flex-none items-center justify-center rounded-lg bg-emerald-50 text-emerald-600 ring-1 ring-emerald-500/10 dark:bg-emerald-400/10 dark:text-emerald-400 dark:ring-emerald-400/20",
+		className: "flex size-9 flex-none items-center justify-center rounded-(--clarify-theme-tokens-radius-lg) bg-(--clarify-ui-accent-background) text-(--clarify-ui-accent-text) ring-1 ring-(--clarify-ui-accent-border)",
 		children: /* @__PURE__ */ jsx(Icon, {
 			className: "size-5",
 			"aria-hidden": "true"
@@ -330,18 +797,18 @@ function Card(arg0) {
 		children: [/* @__PURE__ */ jsx(CardIcon, { name: icon }), /* @__PURE__ */ jsxs("div", {
 			className: "min-w-0 flex-1",
 			children: [/* @__PURE__ */ jsx("h3", {
-				className: "m-0 text-base font-semibold text-zinc-900 dark:text-white",
+				className: "m-0 text-base font-semibold text-(--clarify-theme-tokens-colors-foreground) dark:text-white",
 				children: title
 			}), children ? /* @__PURE__ */ jsx("div", {
-				className: "mt-2 text-sm/6 text-zinc-600 dark:text-zinc-400 *:m-0",
+				className: "mt-2 text-sm/6 text-(--clarify-theme-tokens-colors-muted) dark:text-zinc-400 *:m-0",
 				children
 			}) : null]
 		})]
 	}), href ? /* @__PURE__ */ jsx("span", {
-		className: "absolute inset-0 rounded-2xl",
+		className: "absolute inset-0 rounded-(--clarify-theme-tokens-radius-xl)",
 		"aria-hidden": "true"
 	}) : null] });
-	const classes = clsx("group relative block rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm transition hover:border-emerald-300 hover:shadow-md dark:border-white/10 dark:bg-zinc-900/50 dark:hover:border-emerald-400/40", className);
+	const classes = clsx("group relative block rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) p-5 shadow-(--clarify-ui-accent-glow) transition hover:border-(--clarify-ui-accent-border) hover:shadow-md dark:bg-zinc-900/50", className);
 	if (!href) return /* @__PURE__ */ jsx("div", {
 		className: classes,
 		children: content
@@ -378,10 +845,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);
@@ -389,7 +856,7 @@ function getNodeText(node) {
 	if (isValidElement(node)) return getNodeText(node.props.children);
 	return "";
 }
-function ClipboardIcon(props) {
+function ClipboardIcon$1(props) {
 	return /* @__PURE__ */ jsxs("svg", {
 		viewBox: "0 0 20 20",
 		"aria-hidden": "true",
@@ -406,6 +873,7 @@ function ClipboardIcon(props) {
 }
 function CopyButton(arg0) {
 	const { code } = arg0;
+	const t = useBuiltInText();
 	const [copyCount, setCopyCount] = useState(0);
 	const copied = copyCount > 0;
 	useEffect(() => {
@@ -416,20 +884,20 @@ function CopyButton(arg0) {
 	if (!code) return null;
 	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
-		className: clsx("clarify-code-copy group/button absolute top-3.5 right-4 overflow-hidden rounded-full py-1 pr-3 pl-2 text-2xs font-medium opacity-0 backdrop-blur-sm transition group-hover:opacity-100 focus:opacity-100", copied ? "bg-emerald-400/10 ring-1 ring-emerald-400/20 ring-inset" : "bg-white/5 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5"),
+		className: clsx("clarify-code-copy group/button absolute top-3.5 right-4 overflow-hidden rounded-full py-1 pr-3 pl-2 text-2xs font-medium opacity-0 backdrop-blur-sm transition group-hover:opacity-100 focus:opacity-100", copied ? "bg-[color-mix(in_srgb,var(--clarify-theme-tokens-colors-primary)_12%,transparent)] ring-1 ring-[color-mix(in_srgb,var(--clarify-theme-tokens-colors-primary)_24%,transparent)] ring-inset" : "bg-white/5 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5"),
 		onClick: () => {
-			window.navigator.clipboard.writeText(code).then(() => {
-				setCopyCount((count) => count + 1);
+			copyTextToClipboard(code).then((ok) => {
+				if (ok) setCopyCount((count) => count + 1);
 			});
 		},
 		children: [/* @__PURE__ */ jsxs("span", {
 			"aria-hidden": copied,
 			className: clsx("pointer-events-none flex items-center gap-0.5 text-zinc-400 transition duration-300", copied && "-translate-y-1.5 opacity-0"),
-			children: [/* @__PURE__ */ jsx(ClipboardIcon, { className: "h-5 w-5 fill-zinc-500/20 stroke-zinc-500 transition-colors group-hover/button:stroke-zinc-400" }), "Copy"]
+			children: [/* @__PURE__ */ jsx(ClipboardIcon$1, { className: "h-5 w-5 fill-zinc-500/20 stroke-zinc-500 transition-colors group-hover/button:stroke-zinc-400" }), t("actions.copy")]
 		}), /* @__PURE__ */ jsx("span", {
 			"aria-hidden": !copied,
-			className: clsx("pointer-events-none absolute inset-0 flex items-center justify-center text-emerald-400 transition duration-300", !copied && "translate-y-1.5 opacity-0"),
-			children: "Copied!"
+			className: clsx("pointer-events-none absolute inset-0 flex items-center justify-center text-(--clarify-theme-tokens-colors-primary) transition duration-300", !copied && "translate-y-1.5 opacity-0"),
+			children: t("actions.copied")
 		})]
 	});
 }
@@ -440,12 +908,12 @@ function CodePanelHeader(arg0) {
 		className: "clarify-code-panel-header flex h-9 items-center gap-2 border-y border-t-transparent border-b-white/7.5 bg-zinc-900 px-4 dark:border-b-white/5 dark:bg-white/1",
 		children: [
 			tag ? /* @__PURE__ */ jsx("span", {
-				className: "font-mono text-[0.625rem]/6 font-semibold text-emerald-400",
+				className: "clarify-code-panel-tag font-semibold text-(--clarify-theme-tokens-colors-primary)",
 				children: tag
 			}) : null,
 			tag && label ? /* @__PURE__ */ jsx("span", { className: "h-0.5 w-0.5 rounded-full bg-zinc-500" }) : null,
 			label ? /* @__PURE__ */ jsx("span", {
-				className: "font-mono text-xs text-zinc-400",
+				className: "text-xs text-zinc-400",
 				children: label
 			}) : null
 		]
@@ -478,6 +946,7 @@ function CodePanel(arg0) {
 }
 function CodeGroupHeader(arg0) {
 	const { title, children, selectedIndex } = arg0;
+	const t = useBuiltInText();
 	const hasTabs = Children.count(children) > 1;
 	if (!title && !hasTabs) return null;
 	return /* @__PURE__ */ jsxs("div", {
@@ -488,8 +957,11 @@ function CodeGroupHeader(arg0) {
 		}) : null, hasTabs ? /* @__PURE__ */ jsx(TabList, {
 			className: "clarify-code-tabs -mb-px flex gap-4 text-xs font-medium",
 			children: Children.map(children, (child, childIndex) => /* @__PURE__ */ jsx(Tab, {
-				className: clsx("clarify-code-tab border-b py-3 transition data-selected:not-data-focus:outline-hidden", childIndex === selectedIndex ? "border-emerald-500 text-emerald-400" : "border-transparent text-zinc-400 hover:text-zinc-300"),
-				children: getPanelTitle(isValidElement(child) ? child.props : {})
+				className: clsx("clarify-code-tab border-b py-3 transition data-selected:not-data-focus:outline-hidden", childIndex === selectedIndex ? "border-(--clarify-theme-tokens-colors-primary) text-(--clarify-theme-tokens-colors-primary)" : "border-transparent text-zinc-400 hover:text-zinc-300"),
+				children: getPanelTitle({
+					...isValidElement(child) ? child.props : {},
+					fallbackTitle: t("actions.code")
+				})
 			}))
 		}) : null]
 	});
@@ -533,16 +1005,19 @@ var usePreferredLanguageStore = create()((set) => ({
 function useTabGroupProps(availableLanguages) {
 	const { preferredLanguages, addPreferredLanguage } = usePreferredLanguageStore();
 	const [selectedIndex, setSelectedIndex] = useState(0);
-	const activeLanguage = [...availableLanguages].sort((a, z) => preferredLanguages.indexOf(z) - preferredLanguages.indexOf(a))[0];
-	const languageIndex = availableLanguages.indexOf(activeLanguage);
-	const newSelectedIndex = languageIndex === -1 ? selectedIndex : languageIndex;
-	if (newSelectedIndex !== selectedIndex) setSelectedIndex(newSelectedIndex);
+	if (new Set(availableLanguages).size === availableLanguages.length) {
+		const activeLanguage = [...availableLanguages].sort((a, z) => preferredLanguages.indexOf(z) - preferredLanguages.indexOf(a))[0];
+		const languageIndex = availableLanguages.indexOf(activeLanguage);
+		const newSelectedIndex = languageIndex === -1 ? selectedIndex : languageIndex;
+		if (newSelectedIndex !== selectedIndex) setSelectedIndex(newSelectedIndex);
+	}
 	const { positionRef, preventLayoutShift } = usePreventLayoutShift();
 	return {
 		as: "div",
 		ref: positionRef,
 		selectedIndex,
 		onChange: (nextSelectedIndex) => {
+			setSelectedIndex(nextSelectedIndex);
 			preventLayoutShift(() => addPreferredLanguage(availableLanguages[nextSelectedIndex]));
 		}
 	};
@@ -550,7 +1025,11 @@ function useTabGroupProps(availableLanguages) {
 var CodeGroupContext = createContext(false);
 function CodeGroup(arg0) {
 	const { children, title, ...props } = arg0;
-	const tabGroupProps = useTabGroupProps(Children.map(children, (child) => getPanelTitle(isValidElement(child) ? child.props : {})) ?? []);
+	const t = useBuiltInText();
+	const tabGroupProps = useTabGroupProps(Children.map(children, (child) => getPanelTitle({
+		...isValidElement(child) ? child.props : {},
+		fallbackTitle: t("actions.code")
+	})) ?? []);
 	const hasTabs = Children.count(children) > 1;
 	const containerClassName = "clarify-code-group my-6 overflow-hidden rounded-2xl bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10";
 	const header = /* @__PURE__ */ jsx(CodeGroupHeader, {
@@ -600,6 +1079,47 @@ function Pre(arg0) {
 	});
 }
 //#endregion
+//#region source/components/Collapse.tsx
+function Collapse(arg0) {
+	const { children, title, summary, defaultOpen = false, className, ...props } = arg0;
+	const [open, setOpen] = useState(defaultOpen);
+	const contentRef = useRef(null);
+	const [maxHeight, setMaxHeight] = useState("0px");
+	const summaryLabel = title ?? summary ?? "Details";
+	const contentId = useId();
+	useLayoutEffect(() => {
+		if (!contentRef.current) return;
+		setMaxHeight(open ? `${contentRef.current.scrollHeight}px` : "0px");
+	}, [open, children]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("clarify-collapse my-6 overflow-hidden rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) shadow-sm dark:border-white/10 dark:bg-zinc-950", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "flex w-full cursor-pointer items-center justify-between gap-3 px-4 py-3 text-left text-sm font-semibold text-(--clarify-theme-tokens-colors-foreground) transition hover:bg-(--clarify-ui-hover-background) dark:text-white dark:hover:bg-white/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary) focus-visible:ring-offset-2 focus-visible:ring-offset-(--clarify-theme-tokens-colors-background) dark:focus-visible:ring-offset-zinc-950",
+			"aria-expanded": open,
+			"aria-controls": contentId,
+			onClick: () => setOpen((value) => !value),
+			children: [/* @__PURE__ */ jsx("span", { children: summaryLabel }), /* @__PURE__ */ jsx(ChevronDown, {
+				className: clsx("h-4 w-4 text-(--clarify-theme-tokens-colors-muted) transition-transform duration-200", open && "rotate-180"),
+				"aria-hidden": "true"
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			id: contentId,
+			className: "overflow-hidden border-t border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-background) transition-[max-height,opacity,transform] duration-200 ease-out dark:border-white/10 dark:bg-zinc-950/95",
+			style: {
+				maxHeight,
+				willChange: "max-height, opacity, transform"
+			},
+			children: /* @__PURE__ */ jsx("div", {
+				ref: contentRef,
+				className: clsx("px-4 py-4 text-sm/6 text-(--clarify-theme-tokens-colors-foreground) transition-opacity duration-200 ease-out", open ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-1"),
+				children
+			})
+		})]
+	});
+}
+//#endregion
 //#region source/components/Feedback.tsx
 function CheckIcon$1(props) {
 	return /* @__PURE__ */ jsxs("svg", {
@@ -629,6 +1149,7 @@ function FeedbackButton(props) {
 }
 var FeedbackForm = forwardRef(function FeedbackForm(arg0, ref) {
 	const { onSubmit, className, ...props } = arg0;
+	const t = useBuiltInText();
 	return /* @__PURE__ */ jsxs("form", {
 		...props,
 		ref,
@@ -636,18 +1157,18 @@ var FeedbackForm = forwardRef(function FeedbackForm(arg0, ref) {
 		className: clsx(className, "clarify-feedback-form absolute inset-0 flex items-center justify-center gap-6 md:justify-start"),
 		children: [/* @__PURE__ */ jsx("p", {
 			className: "text-sm text-zinc-600 dark:text-zinc-400",
-			children: "Was this page helpful?"
+			children: t("feedback.prompt")
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "clarify-feedback-actions group grid h-8 grid-cols-[1fr_1px_1fr] overflow-hidden rounded-full border border-zinc-900/10 dark:border-white/10",
 			children: [
 				/* @__PURE__ */ jsx(FeedbackButton, {
 					"data-response": "yes",
-					children: "Yes"
+					children: t("feedback.yes")
 				}),
 				/* @__PURE__ */ jsx("div", { className: "bg-zinc-900/10 dark:bg-white/10" }),
 				/* @__PURE__ */ jsx(FeedbackButton, {
 					"data-response": "no",
-					children: "No"
+					children: t("feedback.no")
 				})
 			]
 		})]
@@ -655,13 +1176,14 @@ var FeedbackForm = forwardRef(function FeedbackForm(arg0, ref) {
 });
 var FeedbackThanks = forwardRef(function FeedbackThanks(arg0, ref) {
 	const { className, ...props } = arg0;
+	const t = useBuiltInText();
 	return /* @__PURE__ */ jsx("div", {
 		...props,
 		ref,
 		className: clsx(className, "clarify-feedback-thanks absolute inset-0 flex justify-center md:justify-start"),
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-3 rounded-full bg-emerald-50/50 py-1 pr-3 pl-1.5 text-sm text-emerald-900 ring-1 ring-emerald-500/20 ring-inset dark:bg-emerald-500/5 dark:text-emerald-200 dark:ring-emerald-500/30",
-			children: [/* @__PURE__ */ jsx(CheckIcon$1, { className: "h-5 w-5 flex-none fill-emerald-500 stroke-white dark:fill-emerald-200/20 dark:stroke-emerald-200" }), "Thanks for your feedback!"]
+			className: "flex items-center gap-3 rounded-full bg-(--clarify-ui-accent-background) py-1 pr-3 pl-1.5 text-sm text-(--clarify-ui-accent-text) ring-1 ring-(--clarify-ui-accent-border) ring-inset",
+			children: [/* @__PURE__ */ jsx(CheckIcon$1, { className: "h-5 w-5 flex-none fill-(--clarify-ui-accent-text) stroke-white dark:fill-(--clarify-ui-accent-background) dark:stroke-(--clarify-ui-accent-text)" }), t("feedback.thanks")]
 		})
 	});
 });
@@ -686,297 +1208,7 @@ function Feedback() {
 	});
 }
 //#endregion
-//#region source/components/patterns.tsx
-function GridPattern(arg0) {
-	const { width, height, x, y, squares, ...props } = arg0;
-	const patternId = useId();
-	return /* @__PURE__ */ jsxs("svg", {
-		"aria-hidden": "true",
-		...props,
-		children: [
-			/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("pattern", {
-				id: patternId,
-				width,
-				height,
-				patternUnits: "userSpaceOnUse",
-				x,
-				y,
-				children: /* @__PURE__ */ jsx("path", {
-					d: `M.5 ${height}V.5H${width}`,
-					fill: "none"
-				})
-			}) }),
-			/* @__PURE__ */ jsx("rect", {
-				width: "100%",
-				height: "100%",
-				strokeWidth: 0,
-				fill: `url(#${patternId})`
-			}),
-			squares ? /* @__PURE__ */ jsx("svg", {
-				x,
-				y,
-				className: "overflow-visible",
-				children: squares.map(([squareX, squareY]) => /* @__PURE__ */ jsx("rect", {
-					width: width + 1,
-					height: height + 1,
-					x: squareX * width,
-					y: squareY * height,
-					strokeWidth: "0"
-				}, `${squareX}-${squareY}`))
-			}) : null
-		]
-	});
-}
-function HeroPattern() {
-	return /* @__PURE__ */ jsx("div", {
-		className: "absolute inset-0 -z-10 mx-0 max-w-none overflow-hidden",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "absolute top-0 left-1/2 -ml-152 h-100 w-325 dark:mask-[linear-gradient(white,transparent)]",
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "absolute inset-0 bg-linear-to-r from-[#36b49f] to-[#DBFF75] opacity-40 mask-[radial-gradient(farthest-side_at_top,white,transparent)] dark:from-[#36b49f]/30 dark:to-[#DBFF75]/30 dark:opacity-100",
-				children: /* @__PURE__ */ jsx(GridPattern, {
-					width: 72,
-					height: 56,
-					x: -12,
-					y: 4,
-					squares: [
-						[4, 3],
-						[2, 1],
-						[7, 3],
-						[10, 6]
-					],
-					className: "absolute inset-x-0 inset-y-[-50%] h-[200%] w-full -skew-y-18 fill-black/40 stroke-black/50 mix-blend-overlay dark:fill-white/2.5 dark:stroke-white/5"
-				})
-			}), /* @__PURE__ */ jsx("svg", {
-				viewBox: "0 0 1113 440",
-				"aria-hidden": "true",
-				className: "absolute top-0 left-1/2 -ml-76 w-278.25 fill-white blur-[26px] dark:hidden",
-				children: /* @__PURE__ */ jsx("path", { d: "M.016 439.5s-9.5-300 434-300S882.516 20 882.516 20V0h230.004v439.5H.016Z" })
-			})]
-		})
-	});
-}
-//#endregion
-//#region source/context.tsx
-var ClarifyConfigContext = createContext(null);
-var OpenApisContext = createContext({});
-function useClarifyConfig() {
-	const config = useContext(ClarifyConfigContext);
-	if (!config) throw new Error("[clarify] useClarifyConfig must be used within a ClarifyConfigContext.Provider");
-	return config;
-}
-function useOpenApis() {
-	return useContext(OpenApisContext);
-}
-//#endregion
-//#region source/components/PageFooter.tsx
-function resolveLocalizedText$1(text, locale, fallbackLocale) {
-	if (typeof text === "string") return text;
-	return (locale ? text[locale] : void 0) ?? (fallbackLocale ? text[fallbackLocale] : void 0) ?? Object.values(text)[0] ?? "";
-}
-function isExternalHref$1(href) {
-	return /^[a-z][a-z0-9+.-]*:/i.test(href) || href.startsWith("//");
-}
-function localeForPath$1(config, pathname) {
-	const i18n = config.i18n;
-	if (!i18n) return void 0;
-	const firstSegment = pathname.split("/").filter(Boolean)[0];
-	return i18n.locales.find((locale) => locale.code === firstSegment)?.code ?? i18n.defaultLocale;
-}
-function localizeHref$1(href, config, locale) {
-	if (!locale || !config.i18n || isExternalHref$1(href) || href.startsWith("#")) return href;
-	if (locale === config.i18n.defaultLocale) return href;
-	const cleanHref = href === "/" ? "" : href.replace(/^\/+/, "");
-	return `/${locale}${cleanHref ? `/${cleanHref}` : ""}`;
-}
-function FooterLink(arg0) {
-	const { link, locale, config } = arg0;
-	const external = link.external ?? isExternalHref$1(link.href);
-	return /* @__PURE__ */ jsx("a", {
-		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",
-		children: resolveLocalizedText$1(link.label, locale, config.i18n?.defaultLocale)
-	});
-}
-function SocialLink(arg0) {
-	const { name, href } = arg0;
-	return /* @__PURE__ */ jsx("a", {
-		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",
-		children: name
-	});
-}
-function PageFooter() {
-	const config = useClarifyConfig();
-	const locale = localeForPath$1(config, useLocation().pathname);
-	const footer = config.footer;
-	const links = footer?.links ?? [];
-	const socials = Object.entries(footer?.socials ?? {});
-	const copyright = footer?.copyright ? resolveLocalizedText$1(footer.copyright, locale, config.i18n?.defaultLocale) : void 0;
-	const hasCustomFooter = Boolean(copyright || links.length > 0 || socials.length > 0);
-	return /* @__PURE__ */ jsxs("footer", {
-		className: clsx("clarify-page-footer mx-auto mt-16 flex w-full max-w-3xl flex-col items-end gap-4 border-t border-zinc-900/10 pt-8 xl:max-w-[56rem] 2xl:max-w-[64rem] dark:border-white/10", hasCustomFooter && "sm:flex-row sm:items-center sm:justify-between"),
-		children: [hasCustomFooter ? /* @__PURE__ */ jsxs("div", {
-			className: "clarify-footer-content flex flex-col gap-3 text-right sm:text-left",
-			children: [copyright ? /* @__PURE__ */ jsx("p", {
-				className: "clarify-footer-copyright m-0 text-sm text-zinc-500 dark:text-zinc-400",
-				children: copyright
-			}) : null, links.length > 0 || socials.length > 0 ? /* @__PURE__ */ jsxs("div", {
-				className: "clarify-footer-links flex flex-wrap justify-end gap-x-4 gap-y-2 sm:justify-start",
-				children: [links.map((link) => /* @__PURE__ */ jsx(FooterLink, {
-					link,
-					locale,
-					config
-				}, `${link.href}-${resolveLocalizedText$1(link.label, locale, config.i18n?.defaultLocale)}`)), socials.map(([name, href]) => /* @__PURE__ */ jsx(SocialLink, {
-					name,
-					href
-				}, name))]
-			}) : null]
-		}) : null, /* @__PURE__ */ jsx("div", {
-			className: "clarify-footer-brand flex justify-end",
-			children: /* @__PURE__ */ jsx(BuiltWithClarify, {})
-		})]
-	});
-}
-//#endregion
-//#region source/components/ThemeProvider.tsx
-var ThemeContext = createContext(null);
-var storageKey = "clarify:theme";
-function getSystemTheme() {
-	if (typeof window === "undefined") return "light";
-	return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-}
-function getStoredTheme() {
-	if (typeof window === "undefined") return "system";
-	const storedTheme = window.localStorage.getItem(storageKey);
-	return storedTheme === "light" || storedTheme === "dark" || storedTheme === "system" ? storedTheme : "system";
-}
-function applyTheme(resolvedTheme) {
-	if (typeof document === "undefined") return;
-	document.documentElement.classList.toggle("dark", resolvedTheme === "dark");
-	document.documentElement.style.colorScheme = resolvedTheme;
-}
-function ThemeProvider(arg0) {
-	const { children } = arg0;
-	const [theme, setThemeState] = useState(() => getStoredTheme());
-	const [systemTheme, setSystemTheme] = useState(() => getSystemTheme());
-	const resolvedTheme = theme === "system" ? systemTheme : theme;
-	useEffect(() => {
-		applyTheme(resolvedTheme);
-	}, [resolvedTheme]);
-	useEffect(() => {
-		if (typeof window === "undefined") return;
-		const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-		function updateSystemTheme() {
-			setSystemTheme(mediaQuery.matches ? "dark" : "light");
-		}
-		updateSystemTheme();
-		mediaQuery.addEventListener("change", updateSystemTheme);
-		return () => mediaQuery.removeEventListener("change", updateSystemTheme);
-	}, []);
-	const value = useMemo(() => ({
-		theme,
-		resolvedTheme,
-		setTheme(nextTheme) {
-			setThemeState(nextTheme);
-			if (typeof window !== "undefined") window.localStorage.setItem(storageKey, nextTheme);
-		}
-	}), [resolvedTheme, theme]);
-	return /* @__PURE__ */ jsx(ThemeContext.Provider, {
-		value,
-		children
-	});
-}
-function useTheme() {
-	const context = useContext(ThemeContext);
-	if (!context) throw new Error("[clarify] useTheme must be used within ThemeProvider");
-	return context;
-}
-//#endregion
-//#region source/components/ThemeToggle.tsx
-function SunIcon(props) {
-	return /* @__PURE__ */ jsxs("svg", {
-		viewBox: "0 0 20 20",
-		fill: "none",
-		"aria-hidden": "true",
-		...props,
-		children: [/* @__PURE__ */ jsx("path", { d: "M12.5 10a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z" }), /* @__PURE__ */ jsx("path", {
-			strokeLinecap: "round",
-			d: "M10 5.5v-1M13.182 6.818l.707-.707M14.5 10h1M13.182 13.182l.707.707M10 15.5v-1M6.11 13.889l.708-.707M4.5 10h1M6.11 6.111l.708.707"
-		})]
-	});
-}
-function MoonIcon(props) {
-	return /* @__PURE__ */ jsx("svg", {
-		viewBox: "0 0 20 20",
-		fill: "none",
-		"aria-hidden": "true",
-		...props,
-		children: /* @__PURE__ */ jsx("path", { d: "M15.224 11.724a5.5 5.5 0 0 1-6.949-6.949 5.5 5.5 0 1 0 6.949 6.949Z" })
-	});
-}
-function ThemeToggle() {
-	const { resolvedTheme, setTheme } = useTheme();
-	const otherTheme = resolvedTheme === "dark" ? "light" : "dark";
-	return /* @__PURE__ */ jsxs("button", {
-		type: "button",
-		className: "clarify-theme-toggle flex size-6 items-center justify-center rounded-md transition hover:bg-zinc-900/5 dark:hover:bg-white/5",
-		"aria-label": `Switch to ${otherTheme} theme`,
-		onClick: () => setTheme(otherTheme),
-		children: [
-			/* @__PURE__ */ jsx("span", { className: "absolute size-12 pointer-fine:hidden" }),
-			/* @__PURE__ */ jsx(SunIcon, { className: "h-5 w-5 stroke-zinc-900 dark:hidden" }),
-			/* @__PURE__ */ jsx(MoonIcon, { className: "hidden h-5 w-5 stroke-white dark:block" })
-		]
-	});
-}
-//#endregion
-//#region source/components/index.tsx
-function ArrowIcon(props) {
-	return /* @__PURE__ */ jsx("svg", {
-		viewBox: "0 0 20 20",
-		fill: "none",
-		"aria-hidden": "true",
-		...props,
-		children: /* @__PURE__ */ jsx("path", {
-			stroke: "currentColor",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			d: "m11.5 6.5 3 3.5m0 0-3 3.5m3-3.5h-9"
-		})
-	});
-}
-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"
-};
-function Button(arg0) {
-	const { variant = "primary", className, children, arrow, ...props } = arg0;
-	const classes = clsx("clarify-button inline-flex justify-center gap-0.5 overflow-hidden text-sm font-medium transition", buttonVariantStyles[variant], className);
-	const arrowIcon = /* @__PURE__ */ jsx(ArrowIcon, { className: clsx("mt-0.5 h-5 w-5", variant === "text" && "relative top-px", arrow === "left" && "-ml-1 rotate-180", arrow === "right" && "-mr-1") });
-	const inner = /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		arrow === "left" ? arrowIcon : null,
-		children,
-		arrow === "right" ? arrowIcon : null
-	] });
-	if (typeof props.href === "undefined") return /* @__PURE__ */ jsx("button", {
-		className: classes,
-		...props,
-		children: inner
-	});
-	return /* @__PURE__ */ jsx("a", {
-		className: classes,
-		...props,
-		children: inner
-	});
-}
+//#region source/components/Tag.tsx
 var tagVariantStyles = {
 	small: "",
 	medium: "rounded-lg px-1.5 ring-1 ring-inset"
@@ -998,49 +1230,29 @@ var tagColorStyles = {
 		small: "text-red-500 dark:text-rose-500",
 		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"
-	}
-};
-var tagValueColorMap = {
-	GET: "emerald",
-	POST: "sky",
-	PUT: "amber",
-	PATCH: "amber",
-	DELETE: "rose"
-};
-function Tag(arg0) {
-	const { children, variant = "medium", color } = arg0;
-	const value = typeof children === "string" ? children.toUpperCase() : "";
-	const resolvedColor = color ?? tagValueColorMap[value] ?? "emerald";
-	return /* @__PURE__ */ jsx("span", {
-		className: clsx("clarify-tag font-mono text-[0.625rem]/6 font-semibold", tagVariantStyles[variant], tagColorStyles[resolvedColor][variant]),
-		children
-	});
-}
-function Logo(props) {
-	return /* @__PURE__ */ jsxs("svg", {
-		viewBox: "0 0 99 24",
-		"aria-hidden": "true",
-		...props,
-		className: clsx("clarify-logo", props.className),
-		children: [/* @__PURE__ */ jsx("path", {
-			className: "fill-emerald-400",
-			d: "M16 8a5 5 0 0 0-5-5H5a5 5 0 0 0-5 5v13.927a1 1 0 0 0 1.623.782l3.684-2.93a4 4 0 0 1 2.49-.87H11a5 5 0 0 0 5-5V8Z"
-		}), /* @__PURE__ */ jsx("path", {
-			className: "fill-zinc-900 dark:fill-white",
-			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"
-		})]
-	});
-}
-function Prose(arg0) {
-	const { as, className, ...props } = arg0;
-	return /* @__PURE__ */ jsx(as ?? "div", {
-		className: clsx(className, "clarify-prose prose dark:prose-invert", "[html_:where(&>*)]:mx-auto [html_:where(&>*)]:w-full [html_:where(&>*)]:max-w-3xl xl:[html_:where(&>*)]:max-w-[56rem] 2xl:[html_:where(&>*)]:max-w-[64rem] [html_:where(&>.not-prose)]:max-w-5xl 2xl:[html_:where(&>.not-prose)]:max-w-[76rem]"),
-		...props
+	zinc: {
+		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 = {
+	GET: "emerald",
+	POST: "sky",
+	PUT: "amber",
+	PATCH: "amber",
+	DELETE: "rose"
+};
+function Tag(arg0) {
+	const { children, variant = "medium", color } = arg0;
+	const value = typeof children === "string" ? children.toUpperCase() : "";
+	const resolvedColor = color ?? tagValueColorMap[value] ?? "emerald";
+	return /* @__PURE__ */ jsx("span", {
+		className: clsx("clarify-tag font-bold", tagVariantStyles[variant], tagColorStyles[resolvedColor][variant]),
+		children
 	});
 }
+//#endregion
+//#region source/components/Heading.tsx
 function AnchorIcon(props) {
 	return /* @__PURE__ */ jsx("svg", {
 		viewBox: "0 0 20 20",
@@ -1060,7 +1272,7 @@ function Eyebrow(arg0) {
 			tag ? /* @__PURE__ */ jsx(Tag, { children: tag }) : null,
 			tag && label ? /* @__PURE__ */ jsx("span", { className: "h-0.5 w-0.5 rounded-full bg-zinc-300 dark:bg-zinc-600" }) : null,
 			label ? /* @__PURE__ */ jsx("span", {
-				className: "font-mono text-xs text-zinc-400",
+				className: "text-xs text-zinc-400",
 				children: label
 			}) : null
 		]
@@ -1081,7 +1293,7 @@ function Anchor(arg0) {
 	});
 }
 function Heading(arg0) {
-	const { children, tag, label, level, anchor = true, ...props } = arg0;
+	const { children, className, tag, label, level, anchor = true, ...props } = arg0;
 	const resolvedLevel = level ?? 2;
 	const Component = `h${resolvedLevel}`;
 	const ref = useRef(null);
@@ -1108,7 +1320,7 @@ function Heading(arg0) {
 		label
 	}), /* @__PURE__ */ jsx(Component, {
 		ref,
-		className: clsx("clarify-heading", tag || label ? "mt-2 scroll-mt-32" : "scroll-mt-24"),
+		className: clsx("clarify-heading", tag || label ? "mt-2 scroll-mt-32" : "scroll-mt-24", className),
 		...props,
 		children: anchor ? /* @__PURE__ */ jsx(Anchor, {
 			id: props.id,
@@ -1117,54 +1329,114 @@ function Heading(arg0) {
 		}) : children
 	})] });
 }
-function DocShell(arg0) {
-	const { title, subtitle, children } = arg0;
-	return /* @__PURE__ */ jsx("main", {
-		className: "clarify-doc-shell min-h-screen bg-white px-6 py-10 text-zinc-900 dark:bg-zinc-950 dark:text-white md:px-10",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "mx-auto max-w-6xl",
-			children: [/* @__PURE__ */ jsxs("header", {
-				className: "mb-10",
-				children: [/* @__PURE__ */ jsx("h1", {
-					className: "text-3xl font-bold tracking-tight md:text-5xl",
-					children: title
-				}), subtitle ? /* @__PURE__ */ jsx("p", {
-					className: "mt-3 max-w-2xl text-zinc-600 dark:text-zinc-400",
-					children: subtitle
-				}) : null]
-			}), /* @__PURE__ */ jsx(Prose, { children })]
-		})
+//#endregion
+//#region source/components/Logo.tsx
+function Logo(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 99 24",
+		"aria-hidden": "true",
+		...props,
+		className: clsx("clarify-logo", props.className),
+		children: [/* @__PURE__ */ jsx("path", {
+			className: "fill-(--clarify-theme-tokens-colors-primary)",
+			d: "M16 8a5 5 0 0 0-5-5H5a5 5 0 0 0-5 5v13.927a1 1 0 0 0 1.623.782l3.684-2.93a4 4 0 0 1 2.49-.87H11a5 5 0 0 0 5-5V8Z"
+		}), /* @__PURE__ */ jsx("path", {
+			className: "fill-(--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"
+		})]
 	});
 }
-function ApiEndpointCard(arg0) {
-	const { method, path, description, id } = arg0;
-	return /* @__PURE__ */ jsxs("article", {
-		id,
-		className: "clarify-api-endpoint-card scroll-mt-20 rounded-2xl border border-zinc-900/10 bg-white p-5 shadow-sm dark:border-white/10 dark:bg-zinc-900",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-3",
-			children: [/* @__PURE__ */ jsx(Tag, { children: method }), /* @__PURE__ */ jsx("code", {
-				className: "text-sm font-medium text-zinc-800 dark:text-zinc-200",
-				children: path
+//#endregion
+//#region source/components/patterns.tsx
+function GridPattern(arg0) {
+	const { width, height, x, y, squares, ...props } = arg0;
+	const patternId = useId();
+	return /* @__PURE__ */ jsxs("svg", {
+		"aria-hidden": "true",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("pattern", {
+				id: patternId,
+				width,
+				height,
+				patternUnits: "userSpaceOnUse",
+				x,
+				y,
+				children: /* @__PURE__ */ jsx("path", {
+					d: `M.5 ${height}V.5H${width}`,
+					fill: "none"
+				})
+			}) }),
+			/* @__PURE__ */ jsx("rect", {
+				width: "100%",
+				height: "100%",
+				strokeWidth: 0,
+				fill: `url(#${patternId})`
+			}),
+			squares ? /* @__PURE__ */ jsx("svg", {
+				x,
+				y,
+				className: "overflow-visible",
+				children: squares.map(([squareX, squareY]) => /* @__PURE__ */ jsx("rect", {
+					width: width + 1,
+					height: height + 1,
+					x: squareX * width,
+					y: squareY * height,
+					strokeWidth: "0"
+				}, `${squareX}-${squareY}`))
+			}) : null
+		]
+	});
+}
+function HeroPattern() {
+	return /* @__PURE__ */ jsx("div", {
+		className: "absolute inset-0 -z-10 mx-0 max-w-none overflow-hidden",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "absolute top-0 left-1/2 -ml-152 h-100 w-325 dark:mask-[linear-gradient(white,transparent)]",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "absolute inset-0 bg-[linear-gradient(to_right,var(--clarify-theme-tokens-colors-primary),var(--clarify-theme-tokens-colors-accent))] opacity-35 mask-[radial-gradient(farthest-side_at_top,white,transparent)] dark:opacity-55",
+				children: /* @__PURE__ */ jsx(GridPattern, {
+					width: 72,
+					height: 56,
+					x: -12,
+					y: 4,
+					squares: [
+						[4, 3],
+						[2, 1],
+						[7, 3],
+						[10, 6]
+					],
+					className: "absolute inset-x-0 inset-y-[-50%] h-[200%] w-full -skew-y-18 fill-black/40 stroke-black/50 mix-blend-overlay dark:fill-white/2.5 dark:stroke-white/5"
+				})
+			}), /* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 1113 440",
+				"aria-hidden": "true",
+				className: "absolute top-0 left-1/2 -ml-76 w-278.25 fill-white blur-[26px] dark:hidden",
+				children: /* @__PURE__ */ jsx("path", { d: "M.016 439.5s-9.5-300 434-300S882.516 20 882.516 20V0h230.004v439.5H.016Z" })
 			})]
-		}), description ? /* @__PURE__ */ jsx("p", {
-			className: "mt-3 text-sm text-zinc-600 dark:text-zinc-400",
-			children: description
-		}) : null]
+		})
 	});
 }
 //#endregion
-//#region source/shell/Navigation.tsx
-function NavigationIcon(arg0) {
-	const { name, className } = arg0;
-	if (!name) return null;
-	const Icon = LucideIcons[name];
-	if (!Icon) return null;
-	return /* @__PURE__ */ jsx(Icon, {
-		className: clsx("shrink-0 stroke-current", className),
-		"aria-hidden": "true"
+//#region source/components/Prose.tsx
+function Prose(arg0) {
+	const { as, className, ...props } = arg0;
+	return /* @__PURE__ */ jsx(as ?? "div", {
+		className: clsx(className, "clarify-prose prose max-w-none dark:prose-invert", "[html_:where(&>*)]:w-full [html_:where(&>*)]:min-w-0 [html_:where(&>*)]:max-w-full"),
+		...props
 	});
 }
+//#endregion
+//#region source/utils/hash.ts
+function safeDecodeURIComponent(value) {
+	try {
+		return decodeURIComponent(value);
+	} catch {
+		return value;
+	}
+}
+//#endregion
+//#region source/shell/Navigation.tsx
 function useInitialValue(value, condition = true) {
 	const [initialValue] = useState(value);
 	return condition ? initialValue : value;
@@ -1172,11 +1444,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,
@@ -1186,18 +1458,6 @@ function navigationToGroups(navigation) {
 		};
 	});
 }
-function TopLevelNavItem$1(arg0) {
-	const { href, children } = arg0;
-	return /* @__PURE__ */ jsx("li", {
-		className: "md:hidden",
-		children: /* @__PURE__ */ jsx(CloseButton, {
-			as: Link,
-			to: href,
-			className: "block py-1 text-sm text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white",
-			children
-		})
-	});
-}
 var sectionBadgeColorStyles = {
 	GET: "text-emerald-500 dark:text-emerald-400",
 	POST: "text-sky-500 dark:text-sky-400",
@@ -1211,7 +1471,7 @@ var sectionBadgeColorStyles = {
 function SectionBadge(arg0) {
 	const { children } = arg0;
 	return /* @__PURE__ */ jsx("span", {
-		className: clsx("inline-flex shrink-0 justify-end font-mono text-[0.625rem]/6 font-semibold uppercase tracking-wide", sectionBadgeColorStyles[children.toUpperCase()] ?? "text-zinc-500 dark:text-zinc-400"),
+		className: clsx("clarify-navigation-section-badge inline-flex shrink-0 justify-end font-semibold uppercase tracking-wide", sectionBadgeColorStyles[children.toUpperCase()] ?? "clarify-ui-menu-description"),
 		children
 	});
 }
@@ -1221,9 +1481,12 @@ function NavLink(arg0) {
 		if (!isAnchorLink) return;
 		const hashIndex = href.indexOf("#");
 		if (hashIndex === -1) return;
-		const targetId = decodeURIComponent(href.slice(hashIndex + 1));
+		const targetId = safeDecodeURIComponent(href.slice(hashIndex + 1));
 		window.requestAnimationFrame(() => {
 			document.getElementById(targetId)?.scrollIntoView();
+			window.requestAnimationFrame(() => {
+				window.dispatchEvent(new Event("scroll"));
+			});
 		});
 	}
 	return /* @__PURE__ */ jsxs(CloseButton, {
@@ -1231,7 +1494,7 @@ function NavLink(arg0) {
 		to: href,
 		"aria-current": active ? "page" : void 0,
 		onClick: handleClick,
-		className: clsx("clarify-navigation-link flex justify-between gap-2 py-1 pr-3 text-sm transition", isAnchorLink ? "clarify-navigation-anchor-link pl-7" : "pl-4", active ? "text-zinc-900 dark:text-white" : "text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white"),
+		className: clsx("clarify-navigation-link flex h-8 items-center justify-between gap-2 pr-3 transition", isAnchorLink ? "clarify-navigation-anchor-link pl-7" : "pl-4"),
 		children: [/* @__PURE__ */ jsxs("span", {
 			className: "flex min-w-0 flex-1 items-center gap-2",
 			children: [
@@ -1241,7 +1504,7 @@ function NavLink(arg0) {
 				}) : null,
 				badge ? /* @__PURE__ */ jsx(SectionBadge, { children: badge }) : null,
 				/* @__PURE__ */ jsx("span", {
-					className: "min-w-0 truncate",
+					className: "min-w-0 truncate whitespace-nowrap",
 					children
 				})
 			]
@@ -1262,18 +1525,32 @@ function VisibleSectionHighlight(arg0) {
 	const firstVisibleSectionIndex = Math.max(0, [{ id: "_top" }, ...sections].findIndex((section) => section.id === visibleSections[0]));
 	const itemHeight = remToPx(2);
 	const height = isPresent ? Math.max(1, visibleSections.length) * itemHeight : itemHeight;
-	const top = group.links.findIndex((link) => link.href === pathname) * itemHeight + firstVisibleSectionIndex * itemHeight;
+	const top = group.links.findIndex((link) => isSameRoutePath(link.href, pathname)) * itemHeight + firstVisibleSectionIndex * itemHeight;
 	return /* @__PURE__ */ jsx(motion.div, {
-		layout: true,
-		initial: { opacity: 0 },
+		initial: {
+			opacity: 0,
+			height: 0
+		},
 		animate: {
 			opacity: 1,
-			transition: { delay: .2 }
+			top,
+			height,
+			transition: {
+				duration: .2,
+				ease: "easeOut"
+			}
+		},
+		exit: {
+			opacity: 0,
+			height: 0,
+			transition: {
+				duration: .15,
+				ease: "easeIn"
+			}
 		},
-		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
 		}
@@ -1282,32 +1559,43 @@ function VisibleSectionHighlight(arg0) {
 function ActivePageMarker(arg0) {
 	const { group, pathname } = arg0;
 	const itemHeight = remToPx(2);
-	const top = remToPx(.25) + group.links.findIndex((link) => link.href === pathname) * itemHeight;
+	const top = remToPx(.25) + group.links.findIndex((link) => isSameRoutePath(link.href, pathname)) * itemHeight;
 	return /* @__PURE__ */ jsx(motion.div, {
-		layout: true,
-		className: "absolute left-2 h-6 w-px bg-emerald-500",
-		initial: { opacity: 0 },
+		className: "absolute left-2 h-6 w-px bg-(--clarify-theme-tokens-colors-primary)",
+		initial: {
+			opacity: 0,
+			top
+		},
 		animate: {
 			opacity: 1,
-			transition: { delay: .2 }
+			top,
+			transition: {
+				duration: .2,
+				ease: "easeOut"
+			}
+		},
+		exit: {
+			opacity: 0,
+			transition: {
+				duration: .15,
+				ease: "easeIn"
+			}
 		},
-		exit: { opacity: 0 },
 		style: { top }
 	});
 }
 function NavigationGroup(arg0) {
 	const { group, className } = arg0;
 	const isInsideMobileNavigation = useIsInsideMobileNavigation();
-	const [pathname, sections] = useInitialValue([useLocation().pathname, useSectionStore((s) => s.sections)], isInsideMobileNavigation);
-	const isActiveGroup = group.links.findIndex((link) => link.href === pathname) !== -1;
+	const [pathname, sections] = useInitialValue([normalizeRoutePath(useLocation().pathname), useSectionStore((s) => s.sections)], isInsideMobileNavigation);
+	const isActiveGroup = group.links.findIndex((link) => isSameRoutePath(link.href, pathname)) !== -1;
 	return /* @__PURE__ */ jsxs("li", {
 		className: clsx("clarify-navigation-group relative mt-6", className),
-		children: [/* @__PURE__ */ jsxs(motion.h2, {
-			layout: "position",
-			className: "clarify-navigation-group-title flex items-center gap-2 text-xs font-semibold text-zinc-900 dark:text-white",
+		children: [/* @__PURE__ */ jsxs("h2", {
+			className: "clarify-navigation-group-title flex items-center gap-2",
 			children: [/* @__PURE__ */ jsx(NavigationIcon, {
 				name: group.icon,
-				className: "h-3.5 w-3.5"
+				className: "clarify-navigation-group-title-icon h-3.5 w-3.5"
 			}), /* @__PURE__ */ jsx("span", { children: group.title })]
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "relative mt-3 pl-2",
@@ -1319,10 +1607,7 @@ function NavigationGroup(arg0) {
 						pathname
 					}) : null
 				}),
-				/* @__PURE__ */ jsx(motion.div, {
-					layout: true,
-					className: "absolute inset-y-0 left-2 w-px bg-zinc-900/10 dark:bg-white/5"
-				}),
+				/* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-2 w-px bg-(--clarify-theme-tokens-colors-border) dark:bg-white/5" }),
 				/* @__PURE__ */ jsx(AnimatePresence, {
 					initial: false,
 					children: isActiveGroup ? /* @__PURE__ */ jsx(ActivePageMarker, {
@@ -1333,38 +1618,39 @@ function NavigationGroup(arg0) {
 				/* @__PURE__ */ jsx("ul", {
 					role: "list",
 					className: "border-l border-transparent",
-					children: group.links.map((link) => /* @__PURE__ */ jsxs(motion.li, {
-						layout: "position",
-						className: "relative",
-						children: [/* @__PURE__ */ jsx(NavLink, {
-							href: link.href,
-							icon: link.icon,
-							active: link.href === pathname,
-							children: link.title
-						}), /* @__PURE__ */ jsx(AnimatePresence, {
-							mode: "popLayout",
-							initial: false,
-							children: link.href === pathname && sections.length > 0 ? /* @__PURE__ */ jsx(motion.ul, {
-								role: "list",
-								initial: { opacity: 0 },
-								animate: {
-									opacity: 1,
-									transition: { delay: .1 }
-								},
-								exit: {
-									opacity: 0,
-									transition: { duration: .15 }
-								},
-								children: sections.map((section) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, {
-									href: `${link.href}#${section.id}`,
-									badge: section.badge,
-									tags: section.tags,
-									isAnchorLink: true,
-									children: section.title
-								}) }, section.id))
-							}) : null
-						})]
-					}, link.href))
+					children: group.links.map((link) => {
+						const active = isSameRoutePath(link.href, pathname);
+						return /* @__PURE__ */ jsxs("li", {
+							className: "relative",
+							children: [/* @__PURE__ */ jsx(NavLink, {
+								href: link.href,
+								icon: link.icon,
+								active,
+								children: link.title
+							}), /* @__PURE__ */ jsx(AnimatePresence, {
+								initial: false,
+								children: active && sections.length > 0 ? /* @__PURE__ */ jsx(motion.ul, {
+									role: "list",
+									initial: { opacity: 0 },
+									animate: {
+										opacity: 1,
+										transition: { delay: .1 }
+									},
+									exit: {
+										opacity: 0,
+										transition: { duration: .15 }
+									},
+									children: sections.map((section) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, {
+										href: `${link.href}#${section.id}`,
+										badge: section.badge,
+										tags: section.tags,
+										isAnchorLink: true,
+										children: section.title
+									}) }, section.id))
+								}) : null
+							})]
+						}, link.href);
+					})
 				})
 			]
 		})]
@@ -1372,19 +1658,16 @@ function NavigationGroup(arg0) {
 }
 function Navigation(arg0) {
 	const { navigation, className } = arg0;
-	const groups = navigationToGroups(navigation);
+	const groups = navigationToGroups(navigation, useBuiltInText()("navigation.documentation"));
 	return /* @__PURE__ */ jsx("nav", {
 		className: clsx("clarify-navigation", className),
-		children: /* @__PURE__ */ jsxs("ul", {
+		children: /* @__PURE__ */ jsx("ul", {
 			role: "list",
 			className: "clarify-navigation-list",
-			children: [/* @__PURE__ */ jsx(TopLevelNavItem$1, {
-				href: "/",
-				children: "Home"
-			}), groups.map((group, groupIndex) => /* @__PURE__ */ jsx(NavigationGroup, {
+			children: groups.map((group, groupIndex) => /* @__PURE__ */ jsx(NavigationGroup, {
 				group,
-				className: groupIndex === 0 ? "md:mt-0" : ""
-			}, group.title))]
+				className: groupIndex === 0 ? "mt-0" : ""
+			}, group.title))
 		})
 	});
 }
@@ -1411,8 +1694,84 @@ function XIcon(props) {
 	});
 }
 var IsInsideMobileNavigationContext = createContext(false);
+function hasPath$1(nodes, pathname) {
+	return nodes.some((node) => isSameRoutePath(node.path, pathname) || hasPath$1(node.children ?? [], pathname));
+}
+function isActiveTab$1(tab, pathname) {
+	return isSameRoutePath(tab.path, pathname) || hasPath$1(tab.children, pathname);
+}
+function MobileTabsSelect(arg0) {
+	const { tabs } = arg0;
+	const pathname = normalizeRoutePath(useLocation().pathname);
+	const { close } = useMobileNavigationStore();
+	if (!tabs?.length) return null;
+	const activeTab = tabs.find((tab) => isActiveTab$1(tab, pathname)) ?? tabs[0];
+	return /* @__PURE__ */ jsxs(Menu, {
+		as: "div",
+		className: "clarify-mobile-tabs-select mb-6",
+		children: [/* @__PURE__ */ jsxs(MenuButton, {
+			className: "clarify-mobile-tabs-select-trigger clarify-ui-control group flex h-10 w-full items-center justify-between gap-2 rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-theme-tokens-colors-border) px-4 text-left font-semibold shadow-xs shadow-zinc-900/5 transition dark:border-white/10",
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "flex min-w-0 items-center gap-2",
+				children: [/* @__PURE__ */ jsx(NavigationIcon, {
+					name: activeTab.icon,
+					className: "h-4 w-4 shrink-0 text-(--clarify-theme-tokens-colors-primary)"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: activeTab.title
+				})]
+			}), /* @__PURE__ */ jsx("svg", {
+				width: "8",
+				height: "24",
+				viewBox: "0 -9 3 24",
+				"aria-hidden": "true",
+				className: "shrink-0 overflow-visible text-(--clarify-theme-tokens-colors-muted) transition-transform group-aria-expanded:rotate-180",
+				children: /* @__PURE__ */ jsx("path", {
+					d: "M0 0L3 3L0 6",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "1.5",
+					strokeLinecap: "round"
+				})
+			})]
+		}), /* @__PURE__ */ jsx(MenuItems, {
+			className: "clarify-mobile-tabs-select-list clarify-ui-menu mt-2 flex flex-col gap-1 rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) p-1 shadow-lg shadow-zinc-900/5 focus:outline-none dark:border-white/10 dark:bg-zinc-900 dark:shadow-none",
+			children: tabs.map((tab) => {
+				const active = isActiveTab$1(tab, pathname);
+				return /* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsxs(Link, {
+					to: tab.path,
+					onClick: close,
+					className: clsx("clarify-mobile-tabs-select-item clarify-ui-menu-item flex items-center justify-between gap-3 rounded-(--clarify-theme-tokens-radius-lg) px-3 py-2.5 no-underline transition", active && "clarify-ui-menu-item-active"),
+					"aria-current": active ? "page" : void 0,
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "flex min-w-0 items-start gap-2",
+						children: [/* @__PURE__ */ jsx(NavigationIcon, {
+							name: tab.icon,
+							className: "mt-0.5 h-4 w-4 shrink-0"
+						}), /* @__PURE__ */ jsx("span", {
+							className: "min-w-0 whitespace-normal wrap-anywhere font-medium leading-5",
+							children: tab.title
+						})]
+					}), active ? /* @__PURE__ */ jsx("svg", {
+						viewBox: "0 0 20 20",
+						fill: "none",
+						"aria-hidden": "true",
+						className: "mt-0.5 h-4 w-4 shrink-0",
+						children: /* @__PURE__ */ jsx("path", {
+							d: "m5 10 3 3 7-7",
+							stroke: "currentColor",
+							strokeWidth: "1.8",
+							strokeLinecap: "round",
+							strokeLinejoin: "round"
+						})
+					}) : null]
+				}) }, `${tab.title}-${tab.path}`);
+			})
+		})]
+	});
+}
 function MobileNavigationDialog(arg0) {
-	const { config, isOpen, navigation, routes, currentLocale, currentRoute, close } = arg0;
+	const { config, isOpen, navigation, tabs, routes, currentLocale, currentRoute, close } = arg0;
 	return /* @__PURE__ */ jsxs(Dialog, {
 		transition: true,
 		open: isOpen,
@@ -1420,18 +1779,19 @@ function MobileNavigationDialog(arg0) {
 		className: "clarify-mobile-navigation-dialog fixed inset-0 z-50 lg:hidden",
 		children: [/* @__PURE__ */ jsx(DialogBackdrop, {
 			transition: true,
-			className: "clarify-mobile-navigation-backdrop fixed inset-0 top-14 bg-zinc-400/20 backdrop-blur-xs data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in dark:bg-black/40"
+			className: "clarify-mobile-navigation-backdrop clarify-ui-backdrop fixed inset-0 top-14 backdrop-blur-xs data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
 		}), /* @__PURE__ */ jsxs(DialogPanel, { children: [/* @__PURE__ */ jsx(TransitionChild, { children: /* @__PURE__ */ jsx(Header, {
 			config,
 			navigation,
+			tabs,
 			routes,
 			currentLocale,
 			currentRoute,
 			className: "data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
-		}) }), /* @__PURE__ */ jsx(TransitionChild, { children: /* @__PURE__ */ jsx(motion.div, {
+		}) }), /* @__PURE__ */ jsx(TransitionChild, { children: /* @__PURE__ */ jsxs(motion.div, {
 			layoutScroll: true,
-			className: "clarify-mobile-navigation-panel fixed top-14 bottom-0 left-0 w-full overflow-y-auto bg-white px-4 pt-6 pb-4 shadow-lg ring-1 shadow-zinc-900/10 ring-zinc-900/7.5 duration-500 ease-in-out data-closed:-translate-x-full min-[416px]:max-w-sm sm:px-6 sm:pb-10 dark:bg-zinc-950 dark:ring-zinc-800",
-			children: /* @__PURE__ */ jsx(Navigation, { navigation })
+			className: "clarify-mobile-navigation-panel fixed top-14 bottom-0 left-0 w-full overflow-y-auto bg-(--clarify-theme-tokens-colors-background) px-4 pt-6 pb-4 shadow-lg ring-1 shadow-zinc-900/10 ring-(--clarify-theme-tokens-colors-border) duration-500 ease-in-out data-closed:-translate-x-full min-[416px]:max-w-sm sm:px-6 sm:pb-10 dark:bg-zinc-950 dark:ring-zinc-800",
+			children: [/* @__PURE__ */ jsx(MobileTabsSelect, { tabs }), /* @__PURE__ */ jsx(Navigation, { navigation })]
 		}) })] })]
 	});
 }
@@ -1445,23 +1805,25 @@ var useMobileNavigationStore = create()((set) => ({
 	toggle: () => set((state) => ({ isOpen: !state.isOpen }))
 }));
 function MobileNavigation(arg0) {
-	const { config, navigation, routes, currentLocale, currentRoute } = arg0;
+	const { config, navigation, tabs, routes, currentLocale, currentRoute } = arg0;
 	const isInsideMobileNavigation = useIsInsideMobileNavigation();
 	const { isOpen, toggle, close } = useMobileNavigationStore();
+	const t = useBuiltInText();
 	const ToggleIcon = isOpen ? XIcon : MenuIcon;
 	return /* @__PURE__ */ jsxs(IsInsideMobileNavigationContext.Provider, {
 		value: true,
 		children: [/* @__PURE__ */ jsxs("button", {
 			type: "button",
-			className: "clarify-mobile-navigation-button relative flex size-6 items-center justify-center rounded-md transition hover:bg-zinc-900/5 dark:hover:bg-white/5",
-			"aria-label": "Toggle navigation",
+			className: "clarify-mobile-navigation-button clarify-ui-icon-button relative flex size-6 items-center justify-center rounded-(--clarify-theme-tokens-radius-md) transition",
+			"aria-label": t("navigation.toggle"),
 			onClick: toggle,
-			children: [/* @__PURE__ */ jsx("span", { className: "absolute size-12 pointer-fine:hidden" }), /* @__PURE__ */ jsx(ToggleIcon, { className: "w-2.5 stroke-zinc-900 dark:stroke-white" })]
+			children: [/* @__PURE__ */ jsx("span", { className: "absolute size-12 pointer-fine:hidden" }), /* @__PURE__ */ jsx(ToggleIcon, { className: "w-2.5 stroke-(--clarify-theme-tokens-colors-foreground) dark:stroke-white" })]
 		}), !isInsideMobileNavigation ? /* @__PURE__ */ jsx(Suspense, {
 			fallback: null,
 			children: /* @__PURE__ */ jsx(MobileNavigationDialog, {
 				config,
 				navigation,
+				tabs,
 				routes,
 				currentLocale,
 				currentRoute,
@@ -1542,7 +1904,7 @@ function HighlightQuery(arg0) {
 	const { text, query } = arg0;
 	if (!query) return text;
 	return /* @__PURE__ */ jsx(Fragment$1, { children: text.split(new RegExp(`(${escapeRegExp(query)})`, "ig")).map((part, index) => part.toLowerCase() === query.toLowerCase() ? /* @__PURE__ */ jsx("mark", {
-		className: "bg-transparent text-emerald-500 underline",
+		className: "bg-transparent text-(--clarify-theme-tokens-colors-primary) underline",
 		children: part
 	}, index) : /* @__PURE__ */ jsx(Fragment, { children: part }, index)) });
 }
@@ -1552,25 +1914,25 @@ function SearchResult(arg0) {
 	const hierarchy = [result.sectionTitle, result.pageTitle].filter((value) => typeof value === "string");
 	return /* @__PURE__ */ jsxs("li", {
 		id,
-		className: clsx("clarify-search-result group block cursor-default px-4 py-3 aria-selected:bg-zinc-50 dark:aria-selected:bg-zinc-800/50", active && "bg-zinc-50 dark:bg-zinc-800/50"),
+		className: clsx("clarify-search-result group block cursor-default px-4 py-3", active && "clarify-search-result-active"),
 		"aria-selected": active,
 		onMouseDown: (event) => {
 			event.preventDefault();
 			onSelect();
 		},
 		children: [/* @__PURE__ */ jsx("div", {
-			className: "text-sm font-medium text-zinc-900 group-aria-selected:text-emerald-500 dark:text-white",
+			className: "clarify-search-result-title",
 			children: /* @__PURE__ */ jsx(HighlightQuery, {
 				text: result.title,
 				query
 			})
 		}), hierarchy.length > 0 ? /* @__PURE__ */ jsx("div", {
-			className: "mt-1 truncate text-2xs whitespace-nowrap text-zinc-500",
+			className: "clarify-search-result-hierarchy mt-1 truncate whitespace-nowrap",
 			children: hierarchy.map((item, itemIndex, items) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(HighlightQuery, {
 				text: item,
 				query
 			}), /* @__PURE__ */ jsx("span", {
-				className: itemIndex === items.length - 1 ? "sr-only" : "mx-2 text-zinc-300 dark:text-zinc-700",
+				className: itemIndex === items.length - 1 ? "sr-only" : "clarify-search-result-separator mx-2",
 				children: "/"
 			})] }, `${item}-${itemIndex}`))
 		}) : null]
@@ -1578,9 +1940,10 @@ function SearchResult(arg0) {
 }
 var SearchInput = forwardRef(function SearchInput(arg0, inputRef) {
 	const { query, setQuery, onClose, onSubmit, activeDescendantId } = arg0;
+	const t = useBuiltInText();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "clarify-search-input group relative flex h-12",
-		children: [/* @__PURE__ */ jsx(SearchIcon, { className: "pointer-events-none absolute top-0 left-3 h-full w-5 stroke-zinc-500" }), /* @__PURE__ */ jsx("input", {
+		children: [/* @__PURE__ */ jsx(SearchIcon, { className: "pointer-events-none absolute top-0 left-3 h-full w-5 stroke-(--clarify-theme-tokens-colors-muted)" }), /* @__PURE__ */ jsx("input", {
 			ref: inputRef,
 			"data-autofocus": true,
 			role: "combobox",
@@ -1597,13 +1960,14 @@ var SearchInput = forwardRef(function SearchInput(arg0, inputRef) {
 					onSubmit();
 				}
 			},
-			placeholder: "Find something...",
-			className: "flex-auto appearance-none bg-transparent pr-4 pl-10 text-zinc-900 outline-hidden placeholder:text-zinc-500 focus:w-full focus:flex-none sm:text-sm dark:text-white [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden [&::-webkit-search-results-button]:hidden [&::-webkit-search-results-decoration]:hidden"
+			placeholder: t("search.placeholder"),
+			className: "clarify-search-field flex-auto appearance-none bg-transparent pr-4 pl-10 outline-hidden focus:w-full focus:flex-none [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden [&::-webkit-search-results-button]:hidden [&::-webkit-search-results-decoration]:hidden"
 		})]
 	});
 });
 function SearchDialog(arg0) {
 	const { open, setOpen, routes, navigation, className, onNavigate = () => {} } = arg0;
+	const t = useBuiltInText();
 	const navigate = useNavigate();
 	const location = useLocation();
 	const inputRef = useRef(null);
@@ -1654,12 +2018,12 @@ function SearchDialog(arg0) {
 		className: clsx("clarify-search-dialog fixed inset-0 z-50", className),
 		children: [/* @__PURE__ */ jsx(DialogBackdrop, {
 			transition: true,
-			className: "clarify-search-backdrop fixed inset-0 bg-zinc-400/25 backdrop-blur-xs data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in dark:bg-black/40"
+			className: "clarify-search-backdrop clarify-ui-backdrop fixed inset-0 backdrop-blur-xs data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
 		}), /* @__PURE__ */ jsx("div", {
 			className: "fixed inset-0 overflow-y-auto px-4 py-4 sm:px-6 sm:py-20 md:py-32 lg:px-8 lg:py-[15vh]",
 			children: /* @__PURE__ */ jsxs(DialogPanel, {
 				transition: true,
-				className: "clarify-search-panel mx-auto transform-gpu overflow-hidden rounded-lg bg-zinc-50 shadow-xl ring-1 ring-zinc-900/7.5 data-closed:scale-95 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:max-w-xl dark:bg-zinc-900 dark:ring-zinc-800",
+				className: "clarify-search-panel mx-auto transform-gpu overflow-hidden rounded-(--clarify-theme-tokens-radius-lg) bg-(--clarify-theme-tokens-colors-surface) shadow-xl ring-1 ring-(--clarify-theme-tokens-colors-border) data-closed:scale-95 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:max-w-xl dark:bg-zinc-900 dark:ring-zinc-800",
 				onKeyDown: (event) => {
 					if (event.key === "ArrowDown") {
 						event.preventDefault();
@@ -1677,24 +2041,12 @@ function SearchDialog(arg0) {
 					onClose: closeDialog,
 					onSubmit: () => selectResult()
 				}), /* @__PURE__ */ jsxs("div", {
-					className: "border-t border-zinc-200 bg-white empty:hidden dark:border-zinc-100/5 dark:bg-white/2.5",
+					className: "border-t border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-background) empty:hidden dark:border-zinc-100/5 dark:bg-white/2.5",
 					children: [query && results.length === 0 ? /* @__PURE__ */ jsxs("div", {
 						className: "p-6 text-center",
-						children: [/* @__PURE__ */ jsx(NoResultsIcon, { className: "mx-auto h-5 w-5 stroke-zinc-900 dark:stroke-zinc-600" }), /* @__PURE__ */ jsxs("p", {
-							className: "mt-2 text-xs text-zinc-700 dark:text-zinc-400",
-							children: [
-								"Nothing found for",
-								" ",
-								/* @__PURE__ */ jsxs("strong", {
-									className: "font-semibold wrap-break-word text-zinc-900 dark:text-white",
-									children: [
-										"‘",
-										query,
-										"’"
-									]
-								}),
-								"."
-							]
+						children: [/* @__PURE__ */ jsx(NoResultsIcon, { className: "mx-auto h-5 w-5 stroke-(--clarify-theme-tokens-colors-foreground) dark:stroke-zinc-600" }), /* @__PURE__ */ jsx("p", {
+							className: "mt-2 text-xs text-(--clarify-theme-tokens-colors-muted) dark:text-zinc-400",
+							children: t("search.noResults", { query })
 						})]
 					}) : null, results.length ? /* @__PURE__ */ jsx("ul", {
 						id: "clarify-search-results",
@@ -1734,19 +2086,20 @@ function getModifierKey() {
 }
 function Search(arg0) {
 	const { routes, navigation } = arg0;
+	const t = useBuiltInText();
 	const modifierKey = getModifierKey();
 	const { buttonProps, dialogProps } = useSearchProps();
 	return /* @__PURE__ */ jsxs("div", {
-		className: "clarify-search hidden lg:block lg:max-w-md lg:flex-auto",
+		className: "clarify-search hidden w-80 max-w-[36vw] lg:block",
 		children: [/* @__PURE__ */ jsxs("button", {
 			type: "button",
-			className: "clarify-search-button hidden h-8 w-full items-center gap-2 rounded-full bg-white pr-3 pl-2 text-sm text-zinc-500 ring-1 ring-zinc-900/10 transition hover:ring-zinc-900/20 lg:flex dark:bg-white/5 dark:text-zinc-400 dark:ring-white/10 dark:ring-inset dark:hover:ring-white/20",
+			className: "clarify-search-button hidden h-9 w-full items-center gap-2 rounded-(--clarify-theme-tokens-radius-lg) bg-(--clarify-theme-tokens-colors-surface) pr-3 pl-2.5 font-medium ring-1 ring-(--clarify-theme-tokens-colors-border) transition hover:bg-(--clarify-theme-tokens-colors-background) lg:flex dark:bg-white/5 dark:ring-white/10 dark:ring-inset dark:hover:bg-white/10",
 			...buttonProps,
 			children: [
 				/* @__PURE__ */ jsx(SearchIcon, { className: "h-5 w-5 stroke-current" }),
-				"Find something...",
+				t("search.button"),
 				/* @__PURE__ */ jsxs("kbd", {
-					className: "ml-auto text-2xs text-zinc-400 dark:text-zinc-500",
+					className: "clarify-search-shortcut ml-auto rounded-(--clarify-theme-tokens-radius-sm) bg-(--clarify-theme-tokens-colors-background) px-1.5 py-0.5 ring-1 ring-(--clarify-theme-tokens-colors-border) dark:bg-white/5 dark:ring-white/10",
 					children: [/* @__PURE__ */ jsx("kbd", {
 						className: "font-sans",
 						children: modifierKey
@@ -1769,15 +2122,16 @@ function Search(arg0) {
 }
 function MobileSearch(arg0) {
 	const { routes, navigation, onNavigate } = arg0;
+	const t = useBuiltInText();
 	const { buttonProps, dialogProps } = useSearchProps();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "clarify-mobile-search contents lg:hidden",
 		children: [/* @__PURE__ */ jsxs("button", {
 			type: "button",
-			className: "clarify-mobile-search-button relative flex size-6 items-center justify-center rounded-md transition hover:bg-zinc-900/5 lg:hidden dark:hover:bg-white/5",
-			"aria-label": "Find something...",
+			className: "clarify-mobile-search-button clarify-ui-control relative flex size-6 items-center justify-center rounded-(--clarify-theme-tokens-radius-md) transition lg:hidden",
+			"aria-label": t("search.placeholder"),
 			...buttonProps,
-			children: [/* @__PURE__ */ jsx("span", { className: "absolute size-12 pointer-fine:hidden" }), /* @__PURE__ */ jsx(SearchIcon, { className: "h-5 w-5 stroke-zinc-900 dark:stroke-white" })]
+			children: [/* @__PURE__ */ jsx("span", { className: "absolute size-12 pointer-fine:hidden" }), /* @__PURE__ */ jsx(SearchIcon, { className: "h-5 w-5 stroke-(--clarify-theme-tokens-colors-foreground) dark:stroke-white" })]
 		}), /* @__PURE__ */ jsx(Suspense, {
 			fallback: null,
 			children: /* @__PURE__ */ jsx(SearchDialog, {
@@ -1791,20 +2145,39 @@ function MobileSearch(arg0) {
 	});
 }
 //#endregion
+//#region source/shell/SiteLogo.tsx
+function SiteLogo(arg0) {
+	const { logo, className } = arg0;
+	if (!logo) return null;
+	if (typeof logo === "string") return /* @__PURE__ */ jsx("img", {
+		src: logo,
+		alt: "",
+		className: clsx("clarify-logo", className)
+	});
+	const lightLogo = logo.light ?? logo.dark;
+	const darkLogo = logo.dark ?? logo.light;
+	if (!lightLogo || !darkLogo) return null;
+	if (lightLogo === darkLogo) return /* @__PURE__ */ jsx("img", {
+		src: lightLogo,
+		alt: "",
+		className: clsx("clarify-logo", className)
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("img", {
+		src: lightLogo,
+		alt: "",
+		className: clsx("clarify-logo clarify-logo-light", className, "dark:hidden")
+	}), /* @__PURE__ */ jsx("img", {
+		src: darkLogo,
+		alt: "",
+		className: clsx("clarify-logo clarify-logo-dark", className, "hidden dark:block")
+	})] });
+}
+//#endregion
 //#region source/shell/Header.tsx
 function resolveLocalizedText(text, locale, fallbackLocale) {
 	if (typeof text === "string") return text;
 	return (locale ? text[locale] : void 0) ?? (fallbackLocale ? text[fallbackLocale] : void 0) ?? Object.values(text)[0] ?? "";
 }
-function isExternalHref(href) {
-	return /^[a-z][a-z0-9+.-]*:/i.test(href) || href.startsWith("//");
-}
-function localizeHref(href, config, locale) {
-	if (!locale || !config.i18n || isExternalHref(href) || href.startsWith("#")) return href;
-	if (locale === config.i18n.defaultLocale) return href;
-	const cleanHref = href === "/" ? "" : href.replace(/^\/+/, "");
-	return `/${locale}${cleanHref ? `/${cleanHref}` : ""}`;
-}
 function localizedRoutePath(config, locale, route) {
 	const alternatePath = route?.alternates?.[locale];
 	if (alternatePath) return alternatePath;
@@ -1822,6 +2195,7 @@ function LanguageIcon(props) {
 }
 function LanguageSwitcher(arg0) {
 	const { config, currentLocale, currentRoute } = arg0;
+	const t = useBuiltInText();
 	const location = useLocation();
 	const i18n = config.i18n;
 	if (!i18n || i18n.locales.length < 2) return null;
@@ -1832,8 +2206,8 @@ function LanguageSwitcher(arg0) {
 		as: "div",
 		className: "clarify-language-switcher relative",
 		children: [/* @__PURE__ */ jsxs(MenuButton, {
-			className: "clarify-language-switcher-button flex h-7 items-center gap-1.5 rounded-md px-1.5 text-sm/5 font-medium text-zinc-600 transition hover:bg-zinc-900/5 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-white/5 dark:hover:text-white",
-			"aria-label": "Switch language",
+			className: "clarify-language-switcher-button clarify-ui-control flex h-7 items-center gap-1.5 rounded-(--clarify-theme-tokens-radius-md) px-1.5 transition",
+			"aria-label": t("language.switch"),
 			children: [
 				/* @__PURE__ */ jsx("span", { className: "absolute size-12 pointer-fine:hidden" }),
 				/* @__PURE__ */ jsx(LanguageIcon, { className: "h-5 w-5 stroke-current" }),
@@ -1844,19 +2218,19 @@ function LanguageSwitcher(arg0) {
 			]
 		}), /* @__PURE__ */ jsx(MenuItems, {
 			transition: true,
-			className: "clarify-language-switcher-menu absolute right-0 z-50 mt-2 w-44 rounded-xl bg-white p-1 text-sm shadow-lg ring-1 shadow-zinc-900/5 ring-zinc-900/10 transition data-closed:scale-95 data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in dark:bg-zinc-900 dark:ring-white/10",
+			className: "clarify-language-switcher-menu clarify-ui-menu absolute right-0 z-50 mt-2 w-(--clarify-ui-menu-width) rounded-(--clarify-theme-tokens-radius-xl) bg-(--clarify-theme-tokens-colors-surface) p-1 shadow-lg ring-1 shadow-zinc-900/5 ring-(--clarify-theme-tokens-colors-border) transition data-closed:scale-95 data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in dark:bg-zinc-900 dark:ring-white/10",
 			children: i18n.locales.flatMap((locale) => {
 				const localizedPath = localizedRoutePath(config, locale.code, currentRoute);
 				if (!localizedPath) return [];
 				const selected = locale.code === selectedLocale;
 				return [/* @__PURE__ */ jsx(MenuItem, { children: ({ focus }) => /* @__PURE__ */ jsxs(Link, {
 					to: `${localizedPath}${suffix}`,
-					className: clsx("clarify-language-switcher-item flex items-center justify-between rounded-lg px-3 py-2 no-underline transition", focus && "bg-zinc-100 dark:bg-white/5", selected ? "text-zinc-900 dark:text-white" : "text-zinc-600 dark:text-zinc-400"),
+					className: clsx("clarify-language-switcher-item clarify-ui-menu-item flex items-center justify-between rounded-(--clarify-theme-tokens-radius-lg) px-3 py-2 no-underline transition", focus && "clarify-ui-menu-item-focus", selected && "clarify-ui-menu-item-active"),
 					"aria-current": selected ? "true" : void 0,
 					lang: locale.code,
 					dir: locale.dir,
 					children: [/* @__PURE__ */ jsx("span", { children: locale.label }), /* @__PURE__ */ jsx("span", {
-						className: "text-xs text-zinc-400 dark:text-zinc-500",
+						className: "clarify-ui-menu-code",
 						children: locale.code
 					})]
 				}) }, locale.code)];
@@ -1868,199 +2242,186 @@ function TopLevelNavItem(arg0) {
 	const { href, children } = arg0;
 	if (isExternalHref(href)) return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
 		href,
-		className: "text-sm/5 text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white",
+		className: "clarify-ui-top-link transition",
 		target: "_blank",
 		rel: "noreferrer",
 		children
 	}) });
 	return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, {
 		to: href,
-		className: "text-sm/5 text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white",
+		className: "clarify-ui-top-link transition",
 		children
 	}) });
 }
+function MobileNavbarMenu(arg0) {
+	const { links, config, currentLocale } = arg0;
+	const t = useBuiltInText();
+	if (!links?.length) return null;
+	return /* @__PURE__ */ jsxs(Menu, {
+		as: "div",
+		className: "clarify-mobile-navbar-menu relative md:hidden",
+		children: [/* @__PURE__ */ jsxs(MenuButton, {
+			className: "clarify-mobile-navbar-menu-button clarify-ui-control relative flex size-8 items-center justify-center rounded-(--clarify-theme-tokens-radius-md) transition",
+			"aria-label": t("navbar.openLinks"),
+			children: [/* @__PURE__ */ jsx("span", { className: "absolute size-12 pointer-fine:hidden" }), /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-5 w-5" })]
+		}), /* @__PURE__ */ jsx(MenuItems, {
+			transition: true,
+			anchor: "bottom end",
+			className: "clarify-mobile-navbar-menu-list clarify-ui-menu z-50 mt-2 w-(--clarify-ui-menu-width) rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) p-1 shadow-lg transition [--anchor-gap:--spacing(2)] focus:outline-none data-closed:scale-95 data-closed:opacity-0 dark:border-white/10 dark:bg-zinc-900",
+			children: links.map((link) => {
+				const label = resolveLocalizedText(link.label, currentLocale, config.i18n?.defaultLocale);
+				const href = localizeHref(link.href, config, currentLocale);
+				const external = isExternalHref(href);
+				return /* @__PURE__ */ jsx(MenuItem, { children: ({ focus }) => {
+					const className = clsx("clarify-mobile-navbar-menu-item clarify-ui-menu-item block rounded-(--clarify-theme-tokens-radius-lg) px-3 py-2 no-underline transition", focus && "clarify-ui-menu-item-focus");
+					return external ? /* @__PURE__ */ jsx("a", {
+						href,
+						target: "_blank",
+						rel: "noreferrer",
+						className,
+						children: label
+					}) : /* @__PURE__ */ jsx(Link, {
+						to: href,
+						className,
+						children: label
+					});
+				} }, link.href);
+			})
+		})]
+	});
+}
+function hasPath(nodes, pathname) {
+	return nodes.some((node) => isSameRoutePath(node.path, pathname) || hasPath(node.children ?? [], pathname));
+}
+function isActiveTab(tab, pathname) {
+	return isSameRoutePath(tab.path, pathname) || hasPath(tab.children, pathname);
+}
+function ProductTabs(arg0) {
+	const { tabs } = arg0;
+	const t = useBuiltInText();
+	const pathname = normalizeRoutePath(useLocation().pathname);
+	if (!tabs?.length) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "clarify-product-tabs hidden h-14 border-t border-(--clarify-theme-tokens-colors-border) lg:block dark:border-white/10",
+		children: /* @__PURE__ */ jsx("nav", {
+			className: "clarify-product-tabs-nav mx-auto flex h-full w-full max-w-(--clarify-theme-layout-max-width) items-stretch gap-6 overflow-x-auto px-5",
+			"aria-label": t("navbar.sections"),
+			children: tabs.map((tab) => {
+				const active = isActiveTab(tab, pathname);
+				return /* @__PURE__ */ jsxs(Link, {
+					to: tab.path,
+					"aria-current": active ? "page" : void 0,
+					className: clsx("clarify-product-tab clarify-ui-tab relative inline-flex h-full shrink-0 items-center gap-2 px-0 transition", active && "clarify-ui-tab-active"),
+					children: [
+						/* @__PURE__ */ jsx(NavigationIcon, {
+							name: tab.icon,
+							className: "h-4 w-4"
+						}),
+						/* @__PURE__ */ jsx("span", { children: tab.title }),
+						active ? /* @__PURE__ */ jsx(motion.span, {
+							layoutId: "clarify-product-tab-indicator",
+							className: "absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-(--clarify-theme-tokens-colors-foreground) dark:bg-white",
+							transition: {
+								type: "tween",
+								duration: .16,
+								ease: "easeOut"
+							}
+						}) : null
+					]
+				}, `${tab.title}-${tab.path}`);
+			})
+		})
+	});
+}
 var Header = forwardRef(function Header(arg0, ref) {
-	const { config, navigation, routes, currentLocale, currentRoute, className, ...props } = arg0;
+	const { config, navigation, tabs, routes, currentLocale, currentRoute, className, ...props } = arg0;
+	const t = useBuiltInText();
 	const { isOpen: mobileNavIsOpen } = useMobileNavigationStore();
 	const isInsideMobileNavigation = useIsInsideMobileNavigation();
 	const { scrollY } = useScroll();
-	const bgOpacityLight = useTransform(scrollY, [0, 72], ["50%", "90%"]);
-	const bgOpacityDark = useTransform(scrollY, [0, 72], ["20%", "80%"]);
-	return /* @__PURE__ */ jsxs(motion.div, {
+	const bgOpacityLight = useTransform(scrollY, [0, 72], ["70%", "95%"]);
+	const bgOpacityDark = useTransform(scrollY, [0, 72], ["60%", "92%"]);
+	return /* @__PURE__ */ jsxs(motion.header, {
 		...props,
 		ref,
-		className: clsx(className, "clarify-header fixed inset-x-0 top-0 z-50 flex h-14 items-center justify-between gap-12 px-4 transition sm:px-6 lg:left-72 lg:z-30 lg:px-8 xl:left-80", !isInsideMobileNavigation && "backdrop-blur-xs lg:left-72 xl:left-80 dark:backdrop-blur-sm", isInsideMobileNavigation ? "bg-white dark:bg-zinc-950" : "bg-white/(--bg-opacity-light) dark:bg-zinc-950/(--bg-opacity-dark)"),
+		className: clsx(className, "clarify-header fixed inset-x-0 top-0 z-50 border-b border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-background)/(--bg-opacity-light) backdrop-blur-xs transition dark:border-white/10 dark:bg-zinc-950/(--bg-opacity-dark) dark:backdrop-blur-sm", isInsideMobileNavigation && "bg-(--clarify-theme-tokens-colors-background) dark:bg-zinc-950"),
 		style: {
 			"--bg-opacity-light": bgOpacityLight,
 			"--bg-opacity-dark": bgOpacityDark
 		},
-		children: [
-			/* @__PURE__ */ jsx("div", { className: clsx("absolute inset-x-0 top-full h-px transition", (isInsideMobileNavigation || !mobileNavIsOpen) && "bg-zinc-900/7.5 dark:bg-white/7.5") }),
-			/* @__PURE__ */ jsx("div", { className: "hidden lg:block" }),
-			/* @__PURE__ */ jsxs("div", {
-				className: "clarify-mobile-brand flex items-center gap-5 lg:hidden",
-				children: [/* @__PURE__ */ jsx(MobileNavigation, {
-					config,
-					navigation,
-					routes,
-					currentLocale,
-					currentRoute
-				}), config.logo ? /* @__PURE__ */ jsxs(CloseButton, {
-					as: Link,
-					to: localizeHref("/", config, currentLocale),
-					"aria-label": "Home",
-					className: "clarify-brand flex items-center gap-2 no-underline",
-					children: [/* @__PURE__ */ jsx(SiteLogo, {
-						logo: config.logo,
-						className: "h-6 w-6"
-					}), /* @__PURE__ */ jsx("span", {
-						className: "sr-only",
-						children: config.title
-					})]
-				}) : null]
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "clarify-header-actions flex items-center gap-5",
-				children: [
-					/* @__PURE__ */ jsx(Search, {
-						routes,
-						navigation
-					}),
-					config.navbar?.links?.length ? /* @__PURE__ */ jsx("nav", {
-						className: "clarify-top-nav hidden md:block",
-						children: /* @__PURE__ */ jsx("ul", {
-							role: "list",
-							className: "flex items-center gap-8",
-							children: config.navbar.links.map((link) => /* @__PURE__ */ jsx(TopLevelNavItem, {
-								href: localizeHref(link.href, config, currentLocale),
-								children: resolveLocalizedText(link.label, currentLocale, config.i18n?.defaultLocale)
-							}, link.href))
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: clsx("clarify-header-main relative mx-auto flex h-14 w-full max-w-(--clarify-theme-layout-max-width) items-center justify-between gap-6 px-4 sm:px-6 lg:px-5", (isInsideMobileNavigation || !mobileNavIsOpen) && "shadow-none"),
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "clarify-header-left flex min-w-0 items-center gap-5",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "clarify-mobile-brand flex items-center gap-5 lg:hidden",
+						children: /* @__PURE__ */ jsx(MobileNavigation, {
+							config,
+							navigation,
+							tabs,
+							routes,
+							currentLocale,
+							currentRoute
 						})
-					}) : null,
-					config.navbar?.links?.length ? /* @__PURE__ */ jsx("div", { className: "hidden md:block md:h-5 md:w-px md:bg-zinc-900/10 md:dark:bg-white/15" }) : null,
-					/* @__PURE__ */ jsx(MobileSearch, {
+					}), /* @__PURE__ */ jsxs(CloseButton, {
+						as: Link,
+						to: localizeHref("/", config, currentLocale),
+						"aria-label": t("navbar.home"),
+						className: "clarify-brand flex min-w-0 items-center gap-2 no-underline",
+						children: [/* @__PURE__ */ jsx(SiteLogo, {
+							logo: config.logo,
+							className: "h-6 w-6 shrink-0"
+						}), /* @__PURE__ */ jsx("span", {
+							className: "clarify-brand-title truncate font-semibold",
+							children: config.title
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "clarify-header-center absolute left-1/2 hidden -translate-x-1/2 lg:block",
+					children: /* @__PURE__ */ jsx(Search, {
 						routes,
 						navigation
-					}),
-					/* @__PURE__ */ jsx(LanguageSwitcher, {
-						config,
-						currentLocale,
-						currentRoute
-					}),
-					/* @__PURE__ */ jsx(ThemeToggle, {})
-				]
-			})
-		]
-	});
-});
-//#endregion
-//#region source/app/AppShell.tsx
-function routeForPath(routes, pathname) {
-	return routes.find((route) => route.path === pathname || `/${route.path}` === pathname);
-}
-function sectionsForRoute(route) {
-	return route?.sections?.map((section) => ({
-		id: section.id,
-		title: section.title,
-		badge: section.badge,
-		tags: section.tags
-	})) ?? [];
-}
-function scrollToHash(hash) {
-	if (!hash) return;
-	const targetId = decodeURIComponent(hash.slice(1));
-	window.requestAnimationFrame(() => {
-		document.getElementById(targetId)?.scrollIntoView();
-	});
-}
-function localeForPath(config, pathname, route) {
-	if (route?.locale) return route.locale;
-	const i18n = config.i18n;
-	if (!i18n) return void 0;
-	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 homePathForLocale(config, locale) {
-	if (!locale || !config.i18n || locale === config.i18n.defaultLocale) return "/";
-	return `/${locale}`;
-}
-function AppShell(arg0) {
-	const { config, routes, navigation } = arg0;
-	const location = useLocation();
-	const currentRoute = routeForPath(routes, location.pathname);
-	const currentLocale = localeForPath(config, location.pathname, currentRoute);
-	const currentLocaleConfig = config.i18n?.locales.find((locale) => locale.code === currentLocale);
-	const currentNavigation = navigationForLocale(navigation, currentLocale);
-	const sections = sectionsForRoute(currentRoute);
-	useEffect(() => {
-		scrollToHash(location.hash);
-	}, [location.hash, location.pathname]);
-	useEffect(() => {
-		if (!currentLocale) return;
-		document.documentElement.lang = currentLocale;
-		if (currentLocaleConfig?.dir) document.documentElement.dir = currentLocaleConfig.dir;
-		else document.documentElement.removeAttribute("dir");
-	}, [currentLocale, currentLocaleConfig?.dir]);
-	return /* @__PURE__ */ jsx(SectionProvider, {
-		sections,
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "clarify-app h-full min-h-screen bg-white lg:ml-72 xl:ml-80 dark:bg-zinc-950",
-			children: [/* @__PURE__ */ jsx(motion.header, {
-				layoutScroll: true,
-				className: "clarify-shell contents lg:pointer-events-none lg:fixed lg:inset-0 lg:z-40 lg:flex",
-				children: /* @__PURE__ */ jsxs("div", {
-					className: "clarify-sidebar contents lg:pointer-events-auto lg:block lg:w-72 lg:overflow-y-auto lg:border-r lg:border-zinc-900/10 lg:bg-white lg:px-6 lg:pt-4 lg:pb-8 xl:w-80 lg:dark:border-white/10 lg:dark:bg-zinc-950",
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "clarify-header-actions flex shrink-0 items-center gap-5",
 					children: [
-						/* @__PURE__ */ jsx("div", {
-							className: "clarify-sidebar-brand hidden lg:flex",
-							children: /* @__PURE__ */ jsxs(Link, {
-								to: homePathForLocale(config, currentLocale),
-								"aria-label": "Home",
-								className: "clarify-brand flex items-center gap-2 no-underline",
-								children: [/* @__PURE__ */ jsx(SiteLogo, {
-									logo: config.logo,
-									className: "h-6 w-6"
-								}), /* @__PURE__ */ jsx("span", {
-									className: "clarify-brand-title text-sm font-semibold text-zinc-900 dark:text-white",
-									children: config.title
-								})]
+						config.navbar?.links?.length ? /* @__PURE__ */ jsx("nav", {
+							className: "clarify-top-nav hidden md:block",
+							children: /* @__PURE__ */ jsx("ul", {
+								role: "list",
+								className: "flex items-center gap-8",
+								children: config.navbar.links.map((link) => /* @__PURE__ */ jsx(TopLevelNavItem, {
+									href: localizeHref(link.href, config, currentLocale),
+									children: resolveLocalizedText(link.label, currentLocale, config.i18n?.defaultLocale)
+								}, link.href))
 							})
+						}) : null,
+						config.navbar?.links?.length ? /* @__PURE__ */ jsx("div", { className: "hidden md:block md:h-5 md:w-px md:bg-(--clarify-theme-tokens-colors-border) md:dark:bg-white/15" }) : null,
+						/* @__PURE__ */ jsx(MobileSearch, {
+							routes,
+							navigation
 						}),
-						/* @__PURE__ */ jsx(Header, {
+						/* @__PURE__ */ jsx(LanguageSwitcher, {
 							config,
-							navigation: currentNavigation,
-							routes,
 							currentLocale,
 							currentRoute
 						}),
-						/* @__PURE__ */ jsx(Navigation, {
-							navigation: currentNavigation,
-							className: "clarify-navigation hidden lg:mt-10 lg:block"
+						/* @__PURE__ */ jsx(ThemeToggle, {}),
+						/* @__PURE__ */ jsx(MobileNavbarMenu, {
+							links: config.navbar?.links,
+							config,
+							currentLocale
 						})
 					]
 				})
-			}), /* @__PURE__ */ jsxs("div", {
-				className: "clarify-content relative flex min-h-screen flex-col px-4 pt-14 sm:px-6 lg:px-8",
-				children: [/* @__PURE__ */ jsx(ContentActions, {
-					route: currentRoute,
-					routePrefix: config.routePrefix
-				}), /* @__PURE__ */ jsx("main", {
-					className: "clarify-main flex-auto",
-					children: /* @__PURE__ */ jsx(Routes, { children: routes.map((route) => /* @__PURE__ */ jsx(Route, {
-						path: route.path,
-						element: /* @__PURE__ */ jsx(route.component, {})
-					}, route.path)) })
-				})]
-			})]
-		})
+			]
+		}), /* @__PURE__ */ jsx(ProductTabs, { tabs })]
 	});
-}
+});
 //#endregion
-export { Card as C, SectionProvider as D, BuiltWithClarify as E, useSectionStore as O, Pre as S, Callout as T, GridPattern as _, Heading as a, Code as b, Tag as c, useTheme as d, PageFooter as f, useOpenApis as g, useClarifyConfig as h, DocShell as i, remToPx as k, ThemeToggle as l, OpenApisContext as m, ApiEndpointCard as n, Logo as o, ClarifyConfigContext as p, Button as r, Prose as s, AppShell as t, ThemeProvider as u, HeroPattern as v, CardGroup as w, CodeGroup as x, Feedback as y };
+export { prefixHref as A, normalizeRoutePath as C, ContentActions as D, useTheme as E, OpenApisContext as F, useClarifyConfig as I, useOpenApis as L, useBuiltInText as M, ClarifyConfigContext as N, isExternalHref as O, ClarifyLocaleContext as P, isSameRoutePath as S, ThemeProvider as T, Callout as _, GridPattern as a, useSectionStore as b, Heading as c, Collapse as d, Code as f, CardGroup as g, Card as h, Prose as i, copyTextToClipboard as j, localizeHref as k, Tag as l, Pre as m, Navigation as n, HeroPattern as o, CodeGroup as p, safeDecodeURIComponent as r, Logo as s, Header as t, Feedback as u, Button as v, ThemeToggle as w, remToPx as x, SectionProvider as y };
 
-//# sourceMappingURL=AppShell-Ci894P_0.js.map
+//# sourceMappingURL=shell-BlMMdTpZ.js.map