@clarify-labs/renderer 0.2.0 → 0.5.0

package/output/{AppShell-4KB3lU-n.cjs → shell-_MyLsMUI.cjs}

@@ -1,50 +1,582 @@
-//#region \0rolldown/runtime.js
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __exportAll = (all, no_symbols) => {
-	let target = {};
-	for (var name in all) __defProp(target, name, {
-		get: all[name],
-		enumerable: true
-	});
-	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
-	return target;
-};
-var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-		key = keys[i];
-		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-			get: ((k) => from[k]).bind(null, key),
-			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-		});
-	}
-	return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-	value: mod,
-	enumerable: true
-}) : target, mod));
-//#endregion
-let framer_motion = require("framer-motion");
+const require_chunk = require("./chunk-DakpK96I.cjs");
+let clsx = require("clsx");
+clsx = require_chunk.__toESM(clsx, 1);
 let react = require("react");
 let react_router_dom = require("react-router-dom");
-let zustand = require("zustand");
-let react_jsx_runtime = require("react/jsx-runtime");
-let clsx = require("clsx");
-clsx = __toESM(clsx, 1);
 let _headlessui_react = require("@headlessui/react");
 let lucide_react = require("lucide-react");
-lucide_react = __toESM(lucide_react, 1);
+lucide_react = require_chunk.__toESM(lucide_react, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+let framer_motion = require("framer-motion");
+let zustand = require("zustand");
+//#region source/core/context.tsx
+var ClarifyConfigContext = (0, react.createContext)(null);
+var ClarifyLocaleContext = (0, react.createContext)(void 0);
+var OpenApisContext = (0, react.createContext)({});
+function useClarifyConfig() {
+	const config = (0, react.useContext)(ClarifyConfigContext);
+	if (!config) throw new Error("[clarify] useClarifyConfig must be used within a ClarifyConfigContext.Provider");
+	return config;
+}
+function useOpenApis() {
+	return (0, react.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 = (0, react.useContext)(ClarifyConfigContext);
+	const currentLocale = (0, react.useContext)(ClarifyLocaleContext);
+	const resolvedLocale = locale ?? currentLocale ?? config?.i18n?.defaultLocale;
+	return (key, replacements) => translateBuiltInText(resolvedLocale, key, replacements);
+}
+//#endregion
+//#region source/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] = (0, react.useState)("idle");
+	if (!route?.contentArtifactUrl) return null;
+	const contentArtifactUrl = resolveContentArtifactUrl(route.contentArtifactUrl, routePrefix);
+	const isOpenApi = route.kind === "openapi";
+	const replacements = { contentType: isOpenApi ? "OpenAPI" : "Markdown" };
+	const viewLabel = isOpenApi ? t("contentActions.viewOpenApi") : t("contentActions.viewMarkdown");
+	const viewDescription = isOpenApi ? t("contentActions.viewOpenApiDescription") : t("contentActions.viewMarkdownDescription");
+	function markCopied(state) {
+		setCopied(state);
+		window.setTimeout(() => setCopied("idle"), 1600);
+	}
+	async function handleCopyContent() {
+		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: lucide_react.Copy,
+		run: handleCopyContent,
+		copiedLabel: t("contentActions.copiedContent")
+	}, {
+		key: "link",
+		label: t("contentActions.copyLink", replacements),
+		description: t("contentActions.copyLinkDescription", replacements),
+		icon: lucide_react.Link2,
+		run: handleCopyLink,
+		copiedLabel: t("contentActions.copiedLink")
+	}];
+	const llmsAction = {
+		key: "llms",
+		label: t("contentActions.copyLlms"),
+		description: t("contentActions.copyLlmsDescription"),
+		icon: lucide_react.FileText,
+		run: handleCopyLlms,
+		copiedLabel: t("contentActions.copiedLlms")
+	};
+	const primaryAction = actions[0];
+	const PrimaryIcon = copied === primaryAction.key ? lucide_react.Check : primaryAction.icon;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `clarify-content-actions sticky z-20 flex justify-end py-4 ${hasTabs ? "top-16 lg:top-30" : "top-16"}`,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.Menu, {
+			as: "div",
+			className: "clarify-content-actions-menu relative inline-flex text-sm font-medium",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "clarify-content-actions-group inline-flex overflow-hidden rounded-full border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface)/90 shadow-sm shadow-zinc-900/5 backdrop-blur dark:border-white/10 dark:bg-zinc-900/80 dark:shadow-none",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					onClick: primaryAction.run,
+					className: "clarify-content-actions-primary clarify-ui-control inline-flex h-8 items-center gap-1.5 px-3 transition",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PrimaryIcon, { className: "h-3.5 w-3.5" }), copied === primaryAction.key ? t("actions.copied") : primaryAction.label]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuButton, {
+					className: "clarify-content-actions-trigger clarify-ui-control inline-flex h-8 w-8 items-center justify-center border-l border-(--clarify-theme-tokens-colors-border) transition dark:border-white/10",
+					"aria-label": t("contentActions.copyOptions"),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: "h-3.5 w-3.5" })
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.MenuItems, {
+				anchor: "bottom end",
+				className: "clarify-content-actions-list clarify-ui-menu z-30 mt-2 w-(--clarify-ui-action-menu-width) origin-top-right rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) p-1.5 shadow-xl shadow-zinc-900/5 transition [--anchor-gap:--spacing(2)] focus:outline-none data-closed:scale-95 data-closed:opacity-0 dark:border-white/10 dark:bg-zinc-900 dark:shadow-none",
+				children: [
+					actions.slice(0, 1).map((action) => {
+						const Icon = action.icon;
+						const isCopied = copied === action.key;
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+							type: "button",
+							onClick: action.run,
+							className: "clarify-content-actions-item clarify-ui-menu-item group flex w-full items-center gap-2 rounded-(--clarify-theme-tokens-radius-lg) px-1.5 py-1.5 text-left transition",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "clarify-ui-menu-icon flex shrink-0 rounded-(--clarify-theme-tokens-radius-md) border border-(--clarify-theme-tokens-colors-border) p-1.5 dark:border-white/10",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "h-4 w-4" })
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: "flex min-w-0 flex-1 flex-col px-1",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "clarify-ui-menu-title",
+										children: isCopied ? t("contentActions.copiedContent") : action.label
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "clarify-ui-menu-description truncate",
+										children: action.description
+									})]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: `h-3.5 w-3.5 shrink-0 text-(--clarify-theme-tokens-colors-primary) transition ${isCopied ? "opacity-100" : "opacity-0"}` })
+							]
+						}) }, action.key);
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+						href: contentArtifactUrl,
+						target: "_blank",
+						rel: "noreferrer",
+						className: "clarify-content-actions-item clarify-ui-menu-item group flex w-full items-center gap-2 rounded-(--clarify-theme-tokens-radius-lg) px-1.5 py-1.5 text-left no-underline transition",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "clarify-ui-menu-icon flex shrink-0 rounded-(--clarify-theme-tokens-radius-md) border border-(--clarify-theme-tokens-colors-border) p-1.5 dark:border-white/10",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.FileText, { className: "h-4 w-4" })
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "flex min-w-0 flex-1 flex-col px-1",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: "clarify-ui-menu-title flex items-center gap-1",
+									children: [viewLabel, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ExternalLink, { className: "clarify-ui-menu-icon h-3 w-3" })]
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "clarify-ui-menu-description truncate",
+									children: viewDescription
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "h-3.5 w-3.5 shrink-0 text-(--clarify-theme-tokens-colors-primary) opacity-0" })
+						]
+					}) }),
+					actions.slice(1).map((action) => {
+						const Icon = action.icon;
+						const isCopied = copied === action.key;
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+							type: "button",
+							onClick: action.run,
+							className: "clarify-content-actions-item clarify-ui-menu-item group flex w-full items-center gap-2 rounded-(--clarify-theme-tokens-radius-lg) px-1.5 py-1.5 text-left transition",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "clarify-ui-menu-icon flex shrink-0 rounded-(--clarify-theme-tokens-radius-md) border border-(--clarify-theme-tokens-colors-border) p-1.5 dark:border-white/10",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "h-4 w-4" })
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: "flex min-w-0 flex-1 flex-col px-1",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "clarify-ui-menu-title",
+										children: isCopied ? action.copiedLabel ?? action.label : action.label
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "clarify-ui-menu-description truncate",
+										children: action.description
+									})]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: `h-3.5 w-3.5 shrink-0 text-(--clarify-theme-tokens-colors-primary) transition ${isCopied ? "opacity-100" : "opacity-0"}` })
+							]
+						}) }, action.key);
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("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__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "clarify-ui-menu-icon flex shrink-0 rounded-(--clarify-theme-tokens-radius-md) border border-(--clarify-theme-tokens-colors-border) p-1.5 dark:border-white/10",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.FileText, { className: "h-4 w-4" })
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "flex min-w-0 flex-1 flex-col px-1",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "clarify-ui-menu-title",
+									children: copied === llmsAction.key ? llmsAction.copiedLabel ?? llmsAction.label : llmsAction.label
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "clarify-ui-menu-description truncate",
+									children: llmsAction.description
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: `h-3.5 w-3.5 shrink-0 text-(--clarify-theme-tokens-colors-primary) transition ${copied === llmsAction.key ? "opacity-100" : "opacity-0"}` })
+						]
+					}) }, llmsAction.key)
+				]
+			})]
+		})
+	});
+}
+//#endregion
+//#region source/theme/ThemeProvider.tsx
+var ThemeContext = (0, react.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] = (0, react.useState)(() => getStoredTheme());
+	const [systemTheme, setSystemTheme] = (0, react.useState)(() => getSystemTheme());
+	const resolvedTheme = theme === "system" ? systemTheme : theme;
+	(0, react.useEffect)(() => {
+		applyTheme(resolvedTheme);
+	}, [resolvedTheme]);
+	(0, react.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 = (0, react.useMemo)(() => ({
+		theme,
+		resolvedTheme,
+		setTheme(nextTheme) {
+			setThemeState(nextTheme);
+			storeTheme(nextTheme);
+		}
+	}), [resolvedTheme, theme]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThemeContext.Provider, {
+		value,
+		children
+	});
+}
+function useTheme() {
+	const context = (0, react.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__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		viewBox: "0 0 20 20",
+		fill: "none",
+		"aria-hidden": "true",
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12.5 10a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z" }), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("svg", {
+		viewBox: "0 0 20 20",
+		fill: "none",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", { className: "absolute size-12 pointer-fine:hidden" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SunIcon, { className: "h-5 w-5 stroke-(--clarify-theme-tokens-colors-foreground) dark:hidden" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.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 = lucide_react;
+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__ */ (0, react_jsx_runtime.jsx)(Icon, {
+		className: (0, clsx.default)("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 (0, zustand.createStore)()((set) => ({
 		sections,
@@ -63,16 +595,16 @@ function useVisibleSections(sectionStore) {
 	(0, react.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);
 		}
@@ -93,7 +625,17 @@ function SectionProvider(arg0) {
 	const [sectionStore] = (0, react.useState)(() => createSectionStore(sections));
 	useVisibleSections(sectionStore);
 	useIsomorphicLayoutEffect(() => {
-		sectionStore.setState({ sections });
+		sectionStore.setState((state) => ({
+			sections: sections.map((section) => {
+				const registeredSection = state.sections.find((item) => item.id === section.id);
+				return {
+					...section,
+					headingRef: registeredSection?.headingRef,
+					offsetRem: registeredSection?.offsetRem ?? section.offsetRem
+				};
+			}),
+			visibleSections: []
+		}));
 	}, [sectionStore, sections]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionStoreContext.Provider, {
 		value: sectionStore,
@@ -106,151 +648,46 @@ function useSectionStore(selector) {
 	return (0, zustand.useStore)(store, selector);
 }
 //#endregion
-//#region source/components/SiteLogo.tsx
-function SiteLogo(arg0) {
-	const { logo, className } = arg0;
-	if (!logo) return null;
-	if (typeof logo === "string") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-		src: logo,
-		alt: "",
-		className: (0, clsx.default)("clarify-logo", className)
-	});
-	const lightLogo = logo.light ?? logo.dark;
-	const darkLogo = logo.dark ?? logo.light;
-	if (!lightLogo || !darkLogo) return null;
-	if (lightLogo === darkLogo) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-		src: lightLogo,
-		alt: "",
-		className: (0, clsx.default)("clarify-logo", className)
+//#region source/components/Button.tsx
+function ArrowIcon(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		viewBox: "0 0 20 20",
+		fill: "none",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-		src: lightLogo,
-		alt: "",
-		className: (0, clsx.default)("clarify-logo clarify-logo-light", className, "dark:hidden")
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-		src: darkLogo,
-		alt: "",
-		className: (0, clsx.default)("clarify-logo clarify-logo-dark", className, "hidden dark:block")
-	})] });
-}
-//#endregion
-//#region source/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] = (0, react.useState)("idle");
-	if (!route?.rawContentUrl) return null;
-	const rawContentUrl = resolveRawContentUrl(route.rawContentUrl, routePrefix);
-	const isOpenApi = route.kind === "openapi";
-	const contentLabel = isOpenApi ? "复制 OpenAPI 内容" : "复制 Markdown 内容";
-	const linkLabel = isOpenApi ? "复制 OpenAPI 链接" : "复制 Markdown 链接";
-	function markCopied(state) {
-		setCopied(state);
-		window.setTimeout(() => setCopied("idle"), 1600);
-	}
-	async function handleCopyContent() {
-		await copyText(await (await fetch(rawContentUrl)).text());
-		markCopied("content");
-	}
-	async function handleCopyLink() {
-		await copyText(getAbsoluteUrl(rawContentUrl));
-		markCopied("link");
-	}
-	const actions = [{
-		key: "content",
-		label: contentLabel,
-		icon: lucide_react.Copy,
-		run: handleCopyContent
-	}, {
-		key: "link",
-		label: linkLabel,
-		icon: lucide_react.Link2,
-		run: handleCopyLink
-	}];
-	const primaryAction = actions[0];
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "clarify-content-actions sticky top-16 z-20 flex justify-end py-4",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.Menu, {
-			as: "div",
-			className: "clarify-content-actions-menu relative inline-flex text-xs font-medium",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "clarify-content-actions-group inline-flex overflow-hidden rounded-full border border-zinc-900/10 bg-white/85 backdrop-blur dark:border-white/10 dark:bg-white/5",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-					type: "button",
-					onClick: primaryAction.run,
-					className: "clarify-content-actions-primary inline-flex h-8 items-center gap-1.5 px-3 text-zinc-600 transition hover:bg-zinc-100 hover:text-zinc-950 dark:text-zinc-300 dark:hover:bg-white/10 dark:hover:text-white",
-					children: [copied === primaryAction.key ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(primaryAction.icon, { className: "h-3.5 w-3.5" }), copied === primaryAction.key ? "已复制" : "复制页面"]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuButton, {
-					className: "clarify-content-actions-trigger inline-flex h-8 w-8 items-center justify-center border-l border-zinc-900/10 text-zinc-500 transition hover:bg-zinc-100 hover:text-zinc-950 dark:border-white/10 dark:text-zinc-400 dark:hover:bg-white/10 dark:hover:text-white",
-					"aria-label": "选择复制选项",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: "h-3.5 w-3.5" })
-				})]
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuItems, {
-				anchor: "bottom end",
-				className: "clarify-content-actions-list z-30 mt-2 w-52 origin-top-right rounded-2xl border border-zinc-900/10 bg-white p-1 text-xs shadow-md transition [--anchor-gap:--spacing(2)] focus:outline-none data-closed:scale-95 data-closed:opacity-0 dark:border-white/10 dark:bg-zinc-900",
-				children: actions.map((action) => {
-					const Icon = copied === action.key ? lucide_react.Check : action.icon;
-					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-						type: "button",
-						onClick: action.run,
-						className: "clarify-content-actions-item flex w-full items-center gap-2 rounded-xl px-3 py-2 text-left text-zinc-600 transition data-focus:bg-zinc-100 data-focus:text-zinc-950 dark:text-zinc-300 dark:data-focus:bg-white/10 dark:data-focus:text-white",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: copied === action.key ? "已复制" : action.label })]
-					}) }, action.key);
-				})
-			})]
-		})
-	});
-}
-//#endregion
-//#region source/components/BuiltWithClarify.tsx
-function ClarifyMark(props) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.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 = (0, clsx.default)("clarify-button inline-flex justify-center gap-0.5 overflow-hidden text-sm font-medium transition", buttonVariantStyles[variant], className);
+	const arrowIcon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ArrowIcon, { className: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		arrow === "left" ? arrowIcon : null,
+		children,
+		arrow === "right" ? arrowIcon : null
+	] });
+	if (typeof props.href === "undefined") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		className: classes,
 		...props,
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("a", {
-		href: "https://clarify.pub",
-		target: "_blank",
-		rel: "noreferrer",
-		"aria-label": "Built with Clarify",
-		className: "clarify-built-with inline-flex items-center gap-1.5 rounded-full px-2 py-1 text-xs font-medium text-zinc-500 no-underline transition hover:bg-zinc-900/2.5 hover:text-zinc-900 dark:text-zinc-500 dark:hover:bg-white/5 dark:hover:text-white",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Built with" }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClarifyMark, { className: "clarify-built-with-logo h-3.5 w-5 flex-none" }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "font-semibold text-zinc-700 dark:text-zinc-300",
-				children: "Clarify"
-			})
-		]
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+		className: classes,
+		...props,
+		children: inner
 	});
 }
 //#endregion
@@ -293,21 +730,22 @@ var calloutStyles = {
 		Icon: lucide_react.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__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, clsx.default)("clarify-callout my-6 flex gap-3 rounded-2xl border p-4 text-sm/6", style.container, className),
+		className: (0, clsx.default)("clarify-callout my-6 flex gap-3 rounded-(--clarify-theme-tokens-radius-xl) border p-4 text-sm/6", style.container, className),
 		...props,
 		children: [icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
 			className: (0, clsx.default)("mt-1 size-4 flex-none", style.icon),
@@ -326,16 +764,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 = lucide_react[toPascalCase(name)];
+	const iconName = resolveLucideIconName(name);
+	if (!iconName) return null;
+	const Icon = lucideIconRegistry[iconName];
 	if (!Icon) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(Icon, {
 			className: "size-5",
 			"aria-hidden": "true"
@@ -362,18 +799,18 @@ function Card(arg0) {
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardIcon, { name: icon }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "min-w-0 flex-1",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-				className: "m-0 text-base font-semibold text-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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: "absolute inset-0 rounded-2xl",
+		className: "absolute inset-0 rounded-(--clarify-theme-tokens-radius-xl)",
 		"aria-hidden": "true"
 	}) : null] });
-	const classes = (0, clsx.default)("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 = (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: classes,
 		children: content
@@ -410,10 +847,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);
@@ -438,6 +875,7 @@ function ClipboardIcon(props) {
 }
 function CopyButton(arg0) {
 	const { code } = arg0;
+	const t = useBuiltInText();
 	const [copyCount, setCopyCount] = (0, react.useState)(0);
 	const copied = copyCount > 0;
 	(0, react.useEffect)(() => {
@@ -448,20 +886,20 @@ function CopyButton(arg0) {
 	if (!code) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 		type: "button",
-		className: (0, clsx.default)("clarify-code-copy group/button absolute top-3.5 right-4 overflow-hidden rounded-full py-1 pr-3 pl-2 text-2xs font-medium opacity-0 backdrop-blur-sm transition group-hover:opacity-100 focus:opacity-100", copied ? "bg-emerald-400/10 ring-1 ring-emerald-400/20 ring-inset" : "bg-white/5 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5"),
+		className: (0, clsx.default)("clarify-code-copy group/button absolute top-3.5 right-4 overflow-hidden rounded-full py-1 pr-3 pl-2 text-2xs font-medium opacity-0 backdrop-blur-sm transition group-hover:opacity-100 focus:opacity-100", copied ? "bg-[color-mix(in_srgb,var(--clarify-theme-tokens-colors-primary)_12%,transparent)] ring-1 ring-[color-mix(in_srgb,var(--clarify-theme-tokens-colors-primary)_24%,transparent)] ring-inset" : "bg-white/5 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5"),
 		onClick: () => {
-			window.navigator.clipboard.writeText(code).then(() => {
-				setCopyCount((count) => count + 1);
+			copyTextToClipboard(code).then((ok) => {
+				if (ok) setCopyCount((count) => count + 1);
 			});
 		},
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 			"aria-hidden": copied,
 			className: (0, clsx.default)("pointer-events-none flex items-center gap-0.5 text-zinc-400 transition duration-300", copied && "-translate-y-1.5 opacity-0"),
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClipboardIcon, { className: "h-5 w-5 fill-zinc-500/20 stroke-zinc-500 transition-colors group-hover/button:stroke-zinc-400" }), "Copy"]
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClipboardIcon, { className: "h-5 w-5 fill-zinc-500/20 stroke-zinc-500 transition-colors group-hover/button:stroke-zinc-400" }), t("actions.copy")]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			"aria-hidden": !copied,
-			className: (0, clsx.default)("pointer-events-none absolute inset-0 flex items-center justify-center text-emerald-400 transition duration-300", !copied && "translate-y-1.5 opacity-0"),
-			children: "Copied!"
+			className: (0, clsx.default)("pointer-events-none absolute inset-0 flex items-center justify-center text-(--clarify-theme-tokens-colors-primary) transition duration-300", !copied && "translate-y-1.5 opacity-0"),
+			children: t("actions.copied")
 		})]
 	});
 }
@@ -472,12 +910,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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-0.5 w-0.5 rounded-full bg-zinc-500" }) : null,
 			label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "font-mono text-xs text-zinc-400",
+				className: "text-xs text-zinc-400",
 				children: label
 			}) : null
 		]
@@ -510,6 +948,7 @@ function CodePanel(arg0) {
 }
 function CodeGroupHeader(arg0) {
 	const { title, children, selectedIndex } = arg0;
+	const t = useBuiltInText();
 	const hasTabs = react.Children.count(children) > 1;
 	if (!title && !hasTabs) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -520,8 +959,11 @@ function CodeGroupHeader(arg0) {
 		}) : null, hasTabs ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.TabList, {
 			className: "clarify-code-tabs -mb-px flex gap-4 text-xs font-medium",
 			children: react.Children.map(children, (child, childIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.Tab, {
-				className: (0, clsx.default)("clarify-code-tab border-b py-3 transition data-selected:not-data-focus:outline-hidden", childIndex === selectedIndex ? "border-emerald-500 text-emerald-400" : "border-transparent text-zinc-400 hover:text-zinc-300"),
-				children: getPanelTitle((0, react.isValidElement)(child) ? child.props : {})
+				className: (0, clsx.default)("clarify-code-tab border-b py-3 transition data-selected:not-data-focus:outline-hidden", childIndex === selectedIndex ? "border-(--clarify-theme-tokens-colors-primary) text-(--clarify-theme-tokens-colors-primary)" : "border-transparent text-zinc-400 hover:text-zinc-300"),
+				children: getPanelTitle({
+					...(0, react.isValidElement)(child) ? child.props : {},
+					fallbackTitle: t("actions.code")
+				})
 			}))
 		}) : null]
 	});
@@ -556,459 +998,219 @@ function usePreventLayoutShift() {
 				window.scrollBy(0, newTop - initialTop);
 			});
 		}
-	};
-}
-var usePreferredLanguageStore = (0, zustand.create)()((set) => ({
-	preferredLanguages: [],
-	addPreferredLanguage: (language) => set((state) => ({ preferredLanguages: [...state.preferredLanguages.filter((preferredLanguage) => preferredLanguage !== language), language] }))
-}));
-function useTabGroupProps(availableLanguages) {
-	const { preferredLanguages, addPreferredLanguage } = usePreferredLanguageStore();
-	const [selectedIndex, setSelectedIndex] = (0, react.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);
-	const { positionRef, preventLayoutShift } = usePreventLayoutShift();
-	return {
-		as: "div",
-		ref: positionRef,
-		selectedIndex,
-		onChange: (nextSelectedIndex) => {
-			preventLayoutShift(() => addPreferredLanguage(availableLanguages[nextSelectedIndex]));
-		}
-	};
-}
-var CodeGroupContext = (0, react.createContext)(false);
-function CodeGroup(arg0) {
-	const { children, title, ...props } = arg0;
-	const tabGroupProps = useTabGroupProps(react.Children.map(children, (child) => getPanelTitle((0, react.isValidElement)(child) ? child.props : {})) ?? []);
-	const hasTabs = react.Children.count(children) > 1;
-	const containerClassName = "clarify-code-group my-6 overflow-hidden rounded-2xl bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10";
-	const header = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodeGroupHeader, {
-		title,
-		selectedIndex: tabGroupProps.selectedIndex,
-		children
-	});
-	const panels = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodeGroupPanels, {
-		...props,
-		children
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodeGroupContext.Provider, {
-		value: true,
-		children: hasTabs ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.TabGroup, {
-			...tabGroupProps,
-			className: containerClassName,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "not-prose",
-				children: [header, panels]
-			})
-		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: containerClassName,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "not-prose",
-				children: [header, panels]
-			})
-		})
-	});
-}
-function Code(arg0) {
-	const { children, ...props } = arg0;
-	if ((0, react.useContext)(CodeGroupContext) && typeof children === "string") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
-		...props,
-		dangerouslySetInnerHTML: { __html: children }
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
-		...props,
-		children
-	});
-}
-function Pre(arg0) {
-	const { children, ...props } = arg0;
-	if ((0, react.useContext)(CodeGroupContext)) return children;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodeGroup, {
-		...props,
-		children
-	});
-}
-//#endregion
-//#region source/components/Feedback.tsx
-function CheckIcon(props) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
-		viewBox: "0 0 20 20",
-		"aria-hidden": "true",
-		...props,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
-			cx: "10",
-			cy: "10",
-			r: "10",
-			strokeWidth: "0"
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-			fill: "none",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: "1.5",
-			d: "m6.75 10.813 2.438 2.437c1.218-4.469 4.062-6.5 4.062-6.5"
-		})]
-	});
-}
-function FeedbackButton(props) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-		type: "submit",
-		className: "clarify-feedback-button px-3 text-sm font-medium text-zinc-600 transition hover:bg-zinc-900/2.5 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-white/5 dark:hover:text-white",
-		...props
-	});
-}
-var FeedbackForm = (0, react.forwardRef)(function FeedbackForm(arg0, ref) {
-	const { onSubmit, className, ...props } = arg0;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
-		...props,
-		ref,
-		onSubmit,
-		className: (0, clsx.default)(className, "clarify-feedback-form absolute inset-0 flex items-center justify-center gap-6 md:justify-start"),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-			className: "text-sm text-zinc-600 dark:text-zinc-400",
-			children: "Was this page helpful?"
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "clarify-feedback-actions group grid h-8 grid-cols-[1fr_1px_1fr] overflow-hidden rounded-full border border-zinc-900/10 dark:border-white/10",
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FeedbackButton, {
-					"data-response": "yes",
-					children: "Yes"
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "bg-zinc-900/10 dark:bg-white/10" }),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FeedbackButton, {
-					"data-response": "no",
-					children: "No"
-				})
-			]
-		})]
-	});
-});
-var FeedbackThanks = (0, react.forwardRef)(function FeedbackThanks(arg0, ref) {
-	const { className, ...props } = arg0;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		...props,
-		ref,
-		className: (0, clsx.default)(className, "clarify-feedback-thanks absolute inset-0 flex justify-center md:justify-start"),
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex items-center gap-3 rounded-full bg-emerald-50/50 py-1 pr-3 pl-1.5 text-sm text-emerald-900 ring-1 ring-emerald-500/20 ring-inset dark:bg-emerald-500/5 dark:text-emerald-200 dark:ring-emerald-500/30",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckIcon, { className: "h-5 w-5 flex-none fill-emerald-500 stroke-white dark:fill-emerald-200/20 dark:stroke-emerald-200" }), "Thanks for your feedback!"]
-		})
-	});
-});
-function Feedback() {
-	const [submitted, setSubmitted] = (0, react.useState)(false);
-	function onSubmit(event) {
-		event.preventDefault();
-		setSubmitted(true);
-	}
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "clarify-feedback relative h-8",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.Transition, {
-			show: !submitted,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FeedbackForm, {
-				className: "duration-300 data-closed:opacity-0 data-leave:pointer-events-none",
-				onSubmit
-			})
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.Transition, {
-			show: submitted,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FeedbackThanks, { className: "delay-150 duration-300 data-closed:opacity-0" })
-		})]
-	});
-}
-//#endregion
-//#region source/components/patterns.tsx
-function GridPattern(arg0) {
-	const { width, height, x, y, squares, ...props } = arg0;
-	const patternId = (0, react.useId)();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
-		"aria-hidden": "true",
-		...props,
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pattern", {
-				id: patternId,
-				width,
-				height,
-				patternUnits: "userSpaceOnUse",
-				x,
-				y,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-					d: `M.5 ${height}V.5H${width}`,
-					fill: "none"
-				})
-			}) }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
-				width: "100%",
-				height: "100%",
-				strokeWidth: 0,
-				fill: `url(#${patternId})`
-			}),
-			squares ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-				x,
-				y,
-				className: "overflow-visible",
-				children: squares.map(([squareX, squareY]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
-					width: width + 1,
-					height: height + 1,
-					x: squareX * width,
-					y: squareY * height,
-					strokeWidth: "0"
-				}, `${squareX}-${squareY}`))
-			}) : null
-		]
-	});
-}
-function HeroPattern() {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "absolute inset-0 -z-10 mx-0 max-w-none overflow-hidden",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "absolute top-0 left-1/2 -ml-152 h-100 w-325 dark:mask-[linear-gradient(white,transparent)]",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "absolute inset-0 bg-linear-to-r from-[#36b49f] to-[#DBFF75] opacity-40 mask-[radial-gradient(farthest-side_at_top,white,transparent)] dark:from-[#36b49f]/30 dark:to-[#DBFF75]/30 dark:opacity-100",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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 = (0, react.createContext)(null);
-var OpenApisContext = (0, react.createContext)({});
-function useClarifyConfig() {
-	const config = (0, react.useContext)(ClarifyConfigContext);
-	if (!config) throw new Error("[clarify] useClarifyConfig must be used within a ClarifyConfigContext.Provider");
-	return config;
-}
-function useOpenApis() {
-	return (0, react.useContext)(OpenApisContext);
-}
-//#endregion
-//#region source/components/PageFooter.tsx
-function resolveLocalizedText$1(text, locale, fallbackLocale) {
-	if (typeof text === "string") return text;
-	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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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, (0, react_router_dom.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__ */ (0, react_jsx_runtime.jsxs)("footer", {
-		className: (0, clsx.default)("clarify-page-footer mx-auto mt-16 flex w-full max-w-3xl flex-col items-end gap-4 border-t border-zinc-900/10 pt-8 xl:max-w-[56rem] 2xl:max-w-[64rem] dark:border-white/10", hasCustomFooter && "sm:flex-row sm:items-center sm:justify-between"),
-		children: [hasCustomFooter ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "clarify-footer-content flex flex-col gap-3 text-right sm:text-left",
-			children: [copyright ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: "clarify-footer-copyright m-0 text-sm text-zinc-500 dark:text-zinc-400",
-				children: copyright
-			}) : null, links.length > 0 || socials.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "clarify-footer-links flex flex-wrap justify-end gap-x-4 gap-y-2 sm:justify-start",
-				children: [links.map((link) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FooterLink, {
-					link,
-					locale,
-					config
-				}, `${link.href}-${resolveLocalizedText$1(link.label, locale, config.i18n?.defaultLocale)}`)), socials.map(([name, href]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SocialLink, {
-					name,
-					href
-				}, name))]
-			}) : null]
-		}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "clarify-footer-brand flex justify-end",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BuiltWithClarify, {})
-		})]
-	});
-}
-//#endregion
-//#region source/components/ThemeProvider.tsx
-var ThemeContext = (0, react.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] = (0, react.useState)(() => getStoredTheme());
-	const [systemTheme, setSystemTheme] = (0, react.useState)(() => getSystemTheme());
-	const resolvedTheme = theme === "system" ? systemTheme : theme;
-	(0, react.useEffect)(() => {
-		applyTheme(resolvedTheme);
-	}, [resolvedTheme]);
-	(0, react.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 = (0, react.useMemo)(() => ({
-		theme,
-		resolvedTheme,
-		setTheme(nextTheme) {
-			setThemeState(nextTheme);
-			if (typeof window !== "undefined") window.localStorage.setItem(storageKey, nextTheme);
-		}
-	}), [resolvedTheme, theme]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThemeContext.Provider, {
-		value,
+	};
+}
+var usePreferredLanguageStore = (0, zustand.create)()((set) => ({
+	preferredLanguages: [],
+	addPreferredLanguage: (language) => set((state) => ({ preferredLanguages: [...state.preferredLanguages.filter((preferredLanguage) => preferredLanguage !== language), language] }))
+}));
+function useTabGroupProps(availableLanguages) {
+	const { preferredLanguages, addPreferredLanguage } = usePreferredLanguageStore();
+	const [selectedIndex, setSelectedIndex] = (0, react.useState)(0);
+	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]));
+		}
+	};
+}
+var CodeGroupContext = (0, react.createContext)(false);
+function CodeGroup(arg0) {
+	const { children, title, ...props } = arg0;
+	const t = useBuiltInText();
+	const tabGroupProps = useTabGroupProps(react.Children.map(children, (child) => getPanelTitle({
+		...(0, react.isValidElement)(child) ? child.props : {},
+		fallbackTitle: t("actions.code")
+	})) ?? []);
+	const hasTabs = react.Children.count(children) > 1;
+	const containerClassName = "clarify-code-group my-6 overflow-hidden rounded-2xl bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10";
+	const header = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodeGroupHeader, {
+		title,
+		selectedIndex: tabGroupProps.selectedIndex,
 		children
 	});
+	const panels = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodeGroupPanels, {
+		...props,
+		children
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodeGroupContext.Provider, {
+		value: true,
+		children: hasTabs ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.TabGroup, {
+			...tabGroupProps,
+			className: containerClassName,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "not-prose",
+				children: [header, panels]
+			})
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: containerClassName,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "not-prose",
+				children: [header, panels]
+			})
+		})
+	});
 }
-function useTheme() {
-	const context = (0, react.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__ */ (0, react_jsx_runtime.jsxs)("svg", {
-		viewBox: "0 0 20 20",
-		fill: "none",
-		"aria-hidden": "true",
+function Code(arg0) {
+	const { children, ...props } = arg0;
+	if ((0, react.useContext)(CodeGroupContext) && typeof children === "string") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
 		...props,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12.5 10a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z" }), /* @__PURE__ */ (0, react_jsx_runtime.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"
-		})]
+		dangerouslySetInnerHTML: { __html: children }
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+		...props,
+		children
 	});
 }
-function MoonIcon(props) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-		viewBox: "0 0 20 20",
-		fill: "none",
-		"aria-hidden": "true",
+function Pre(arg0) {
+	const { children, ...props } = arg0;
+	if ((0, react.useContext)(CodeGroupContext)) return children;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodeGroup, {
 		...props,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.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" })
+		children
 	});
 }
-function ThemeToggle() {
-	const { resolvedTheme, setTheme } = useTheme();
-	const otherTheme = resolvedTheme === "dark" ? "light" : "dark";
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-		type: "button",
-		className: "clarify-theme-toggle flex size-6 items-center justify-center rounded-md transition hover:bg-zinc-900/5 dark:hover:bg-white/5",
-		"aria-label": `Switch to ${otherTheme} theme`,
-		onClick: () => setTheme(otherTheme),
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "absolute size-12 pointer-fine:hidden" }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SunIcon, { className: "h-5 w-5 stroke-zinc-900 dark:hidden" }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MoonIcon, { className: "hidden h-5 w-5 stroke-white dark:block" })
-		]
+//#endregion
+//#region source/components/Collapse.tsx
+function Collapse(arg0) {
+	const { children, title, summary, defaultOpen = false, className, ...props } = arg0;
+	const [open, setOpen] = (0, react.useState)(defaultOpen);
+	const contentRef = (0, react.useRef)(null);
+	const [maxHeight, setMaxHeight] = (0, react.useState)("0px");
+	const summaryLabel = title ?? summary ?? "Details";
+	const contentId = (0, react.useId)();
+	(0, react.useLayoutEffect)(() => {
+		if (!contentRef.current) return;
+		setMaxHeight(open ? `${contentRef.current.scrollHeight}px` : "0px");
+	}, [open, children]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, clsx.default)("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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", { children: summaryLabel }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, {
+				className: (0, clsx.default)("h-4 w-4 text-(--clarify-theme-tokens-colors-muted) transition-transform duration-200", open && "rotate-180"),
+				"aria-hidden": "true"
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+				ref: contentRef,
+				className: (0, clsx.default)("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/index.tsx
-function ArrowIcon(props) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+//#region source/components/Feedback.tsx
+function CheckIcon(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 		viewBox: "0 0 20 20",
-		fill: "none",
 		"aria-hidden": "true",
 		...props,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-			stroke: "currentColor",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			cx: "10",
+			cy: "10",
+			r: "10",
+			strokeWidth: "0"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			fill: "none",
 			strokeLinecap: "round",
 			strokeLinejoin: "round",
-			d: "m11.5 6.5 3 3.5m0 0-3 3.5m3-3.5h-9"
-		})
+			strokeWidth: "1.5",
+			d: "m6.75 10.813 2.438 2.437c1.218-4.469 4.062-6.5 4.062-6.5"
+		})]
 	});
 }
-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 = (0, clsx.default)("clarify-button inline-flex justify-center gap-0.5 overflow-hidden text-sm font-medium transition", buttonVariantStyles[variant], className);
-	const arrowIcon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ArrowIcon, { className: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-		arrow === "left" ? arrowIcon : null,
-		children,
-		arrow === "right" ? arrowIcon : null
-	] });
-	if (typeof props.href === "undefined") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-		className: classes,
+function FeedbackButton(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "submit",
+		className: "clarify-feedback-button px-3 text-sm font-medium text-zinc-600 transition hover:bg-zinc-900/2.5 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-white/5 dark:hover:text-white",
+		...props
+	});
+}
+var FeedbackForm = (0, react.forwardRef)(function FeedbackForm(arg0, ref) {
+	const { onSubmit, className, ...props } = arg0;
+	const t = useBuiltInText();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
 		...props,
-		children: inner
+		ref,
+		onSubmit,
+		className: (0, clsx.default)(className, "clarify-feedback-form absolute inset-0 flex items-center justify-center gap-6 md:justify-start"),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: "text-sm text-zinc-600 dark:text-zinc-400",
+			children: t("feedback.prompt")
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "clarify-feedback-actions group grid h-8 grid-cols-[1fr_1px_1fr] overflow-hidden rounded-full border border-zinc-900/10 dark:border-white/10",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FeedbackButton, {
+					"data-response": "yes",
+					children: t("feedback.yes")
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "bg-zinc-900/10 dark:bg-white/10" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FeedbackButton, {
+					"data-response": "no",
+					children: t("feedback.no")
+				})
+			]
+		})]
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-		className: classes,
+});
+var FeedbackThanks = (0, react.forwardRef)(function FeedbackThanks(arg0, ref) {
+	const { className, ...props } = arg0;
+	const t = useBuiltInText();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		...props,
-		children: inner
+		ref,
+		className: (0, clsx.default)(className, "clarify-feedback-thanks absolute inset-0 flex justify-center md:justify-start"),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-3 rounded-full bg-(--clarify-ui-accent-background) py-1 pr-3 pl-1.5 text-sm text-(--clarify-ui-accent-text) ring-1 ring-(--clarify-ui-accent-border) ring-inset",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckIcon, { className: "h-5 w-5 flex-none fill-(--clarify-ui-accent-text) stroke-white dark:fill-(--clarify-ui-accent-background) dark:stroke-(--clarify-ui-accent-text)" }), t("feedback.thanks")]
+		})
+	});
+});
+function Feedback() {
+	const [submitted, setSubmitted] = (0, react.useState)(false);
+	function onSubmit(event) {
+		event.preventDefault();
+		setSubmitted(true);
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "clarify-feedback relative h-8",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.Transition, {
+			show: !submitted,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FeedbackForm, {
+				className: "duration-300 data-closed:opacity-0 data-leave:pointer-events-none",
+				onSubmit
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.Transition, {
+			show: submitted,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FeedbackThanks, { className: "delay-150 duration-300 data-closed:opacity-0" })
+		})]
 	});
 }
+//#endregion
+//#region source/components/Tag.tsx
 var tagVariantStyles = {
 	small: "",
 	medium: "rounded-lg px-1.5 ring-1 ring-inset"
@@ -1031,8 +1233,8 @@ var tagColorStyles = {
 		medium: "bg-rose-50 text-red-500 ring-rose-200 dark:bg-rose-400/10 dark:text-rose-400 dark:ring-rose-500/20"
 	},
 	zinc: {
-		small: "text-zinc-400 dark:text-zinc-500",
-		medium: "bg-zinc-50 text-zinc-500 ring-zinc-200 dark:bg-zinc-400/10 dark:text-zinc-400 dark:ring-zinc-500/20"
+		small: "text-(--clarify-theme-tokens-colors-muted) dark:text-zinc-500",
+		medium: "bg-(--clarify-theme-tokens-colors-code-background) text-(--clarify-theme-tokens-colors-muted) ring-(--clarify-theme-tokens-colors-border) dark:bg-zinc-400/10 dark:text-zinc-400 dark:ring-zinc-500/20"
 	}
 };
 var tagValueColorMap = {
@@ -1047,32 +1249,12 @@ function Tag(arg0) {
 	const value = typeof children === "string" ? children.toUpperCase() : "";
 	const resolvedColor = color ?? tagValueColorMap[value] ?? "emerald";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: (0, clsx.default)("clarify-tag font-mono text-[0.625rem]/6 font-semibold", tagVariantStyles[variant], tagColorStyles[resolvedColor][variant]),
+		className: (0, clsx.default)("clarify-tag font-bold", tagVariantStyles[variant], tagColorStyles[resolvedColor][variant]),
 		children
 	});
 }
-function Logo(props) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
-		viewBox: "0 0 99 24",
-		"aria-hidden": "true",
-		...props,
-		className: (0, clsx.default)("clarify-logo", props.className),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(as ?? "div", {
-		className: (0, clsx.default)(className, "clarify-prose prose dark:prose-invert", "[html_:where(&>*)]:mx-auto [html_:where(&>*)]:w-full [html_:where(&>*)]:max-w-3xl xl:[html_:where(&>*)]:max-w-[56rem] 2xl:[html_:where(&>*)]:max-w-[64rem] [html_:where(&>.not-prose)]:max-w-5xl 2xl:[html_:where(&>.not-prose)]:max-w-[76rem]"),
-		...props
-	});
-}
+//#endregion
+//#region source/components/Heading.tsx
 function AnchorIcon(props) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 		viewBox: "0 0 20 20",
@@ -1092,7 +1274,7 @@ function Eyebrow(arg0) {
 			tag ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, { children: tag }) : null,
 			tag && label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-0.5 w-0.5 rounded-full bg-zinc-300 dark:bg-zinc-600" }) : null,
 			label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "font-mono text-xs text-zinc-400",
+				className: "text-xs text-zinc-400",
 				children: label
 			}) : null
 		]
@@ -1113,7 +1295,7 @@ function Anchor(arg0) {
 	});
 }
 function Heading(arg0) {
-	const { children, tag, label, level, anchor = true, ...props } = arg0;
+	const { children, className, tag, label, level, anchor = true, ...props } = arg0;
 	const resolvedLevel = level ?? 2;
 	const Component = `h${resolvedLevel}`;
 	const ref = (0, react.useRef)(null);
@@ -1140,7 +1322,7 @@ function Heading(arg0) {
 		label
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
 		ref,
-		className: (0, clsx.default)("clarify-heading", tag || label ? "mt-2 scroll-mt-32" : "scroll-mt-24"),
+		className: (0, clsx.default)("clarify-heading", tag || label ? "mt-2 scroll-mt-32" : "scroll-mt-24", className),
 		...props,
 		children: anchor ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Anchor, {
 			id: props.id,
@@ -1149,54 +1331,114 @@ function Heading(arg0) {
 		}) : children
 	})] });
 }
-function DocShell(arg0) {
-	const { title, subtitle, children } = arg0;
-	return /* @__PURE__ */ (0, react_jsx_runtime.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",
+//#endregion
+//#region source/components/Logo.tsx
+function Logo(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		viewBox: "0 0 99 24",
+		"aria-hidden": "true",
+		...props,
+		className: (0, clsx.default)("clarify-logo", props.className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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"
+		})]
+	});
+}
+//#endregion
+//#region source/components/patterns.tsx
+function GridPattern(arg0) {
+	const { width, height, x, y, squares, ...props } = arg0;
+	const patternId = (0, react.useId)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		"aria-hidden": "true",
+		...props,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pattern", {
+				id: patternId,
+				width,
+				height,
+				patternUnits: "userSpaceOnUse",
+				x,
+				y,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					d: `M.5 ${height}V.5H${width}`,
+					fill: "none"
+				})
+			}) }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+				width: "100%",
+				height: "100%",
+				strokeWidth: 0,
+				fill: `url(#${patternId})`
+			}),
+			squares ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+				x,
+				y,
+				className: "overflow-visible",
+				children: squares.map(([squareX, squareY]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+					width: width + 1,
+					height: height + 1,
+					x: squareX * width,
+					y: squareY * height,
+					strokeWidth: "0"
+				}, `${squareX}-${squareY}`))
+			}) : null
+		]
+	});
+}
+function HeroPattern() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "absolute inset-0 -z-10 mx-0 max-w-none overflow-hidden",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "mx-auto max-w-6xl",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
-				className: "mb-10",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
-					className: "text-3xl font-bold tracking-tight md:text-5xl",
-					children: title
-				}), subtitle ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: "mt-3 max-w-2xl text-zinc-600 dark:text-zinc-400",
-					children: subtitle
-				}) : null]
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Prose, { children })]
+			className: "absolute top-0 left-1/2 -ml-152 h-100 w-325 dark:mask-[linear-gradient(white,transparent)]",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "absolute inset-0 bg-[linear-gradient(to_right,var(--clarify-theme-tokens-colors-primary),var(--clarify-theme-tokens-colors-accent))] opacity-35 mask-[radial-gradient(farthest-side_at_top,white,transparent)] dark:opacity-55",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridPattern, {
+					width: 72,
+					height: 56,
+					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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("path", { d: "M.016 439.5s-9.5-300 434-300S882.516 20 882.516 20V0h230.004v439.5H.016Z" })
+			})]
 		})
 	});
 }
-function ApiEndpointCard(arg0) {
-	const { method, path, description, id } = arg0;
-	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex items-center gap-3",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, { children: method }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
-				className: "text-sm font-medium text-zinc-800 dark:text-zinc-200",
-				children: path
-			})]
-		}), description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-			className: "mt-3 text-sm text-zinc-600 dark:text-zinc-400",
-			children: description
-		}) : null]
+//#endregion
+//#region source/components/Prose.tsx
+function Prose(arg0) {
+	const { as, className, ...props } = arg0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(as ?? "div", {
+		className: (0, clsx.default)(className, "clarify-prose prose max-w-none dark:prose-invert", "[html_:where(&>*)]:w-full [html_:where(&>*)]:min-w-0 [html_:where(&>*)]:max-w-full"),
+		...props
 	});
 }
 //#endregion
-//#region source/shell/Navigation.tsx
-function NavigationIcon(arg0) {
-	const { name, className } = arg0;
-	if (!name) return null;
-	const Icon = lucide_react[name];
-	if (!Icon) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
-		className: (0, clsx.default)("shrink-0 stroke-current", className),
-		"aria-hidden": "true"
-	});
+//#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] = (0, react.useState)(value);
 	return condition ? initialValue : value;
@@ -1204,11 +1446,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,
@@ -1218,18 +1460,6 @@ function navigationToGroups(navigation) {
 		};
 	});
 }
-function TopLevelNavItem$1(arg0) {
-	const { href, children } = arg0;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
-		className: "md:hidden",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.CloseButton, {
-			as: react_router_dom.Link,
-			to: href,
-			className: "block py-1 text-sm text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white",
-			children
-		})
-	});
-}
 var sectionBadgeColorStyles = {
 	GET: "text-emerald-500 dark:text-emerald-400",
 	POST: "text-sky-500 dark:text-sky-400",
@@ -1243,7 +1473,7 @@ var sectionBadgeColorStyles = {
 function SectionBadge(arg0) {
 	const { children } = arg0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: (0, clsx.default)("inline-flex shrink-0 justify-end font-mono text-[0.625rem]/6 font-semibold uppercase tracking-wide", sectionBadgeColorStyles[children.toUpperCase()] ?? "text-zinc-500 dark:text-zinc-400"),
+		className: (0, clsx.default)("clarify-navigation-section-badge inline-flex shrink-0 justify-end font-semibold uppercase tracking-wide", sectionBadgeColorStyles[children.toUpperCase()] ?? "clarify-ui-menu-description"),
 		children
 	});
 }
@@ -1253,9 +1483,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__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.CloseButton, {
@@ -1263,7 +1496,7 @@ function NavLink(arg0) {
 		to: href,
 		"aria-current": active ? "page" : void 0,
 		onClick: handleClick,
-		className: (0, clsx.default)("clarify-navigation-link flex justify-between gap-2 py-1 pr-3 text-sm transition", isAnchorLink ? "clarify-navigation-anchor-link pl-7" : "pl-4", active ? "text-zinc-900 dark:text-white" : "text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white"),
+		className: (0, clsx.default)("clarify-navigation-link flex h-8 items-center justify-between gap-2 pr-3 transition", isAnchorLink ? "clarify-navigation-anchor-link pl-7" : "pl-4"),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 			className: "flex min-w-0 flex-1 items-center gap-2",
 			children: [
@@ -1273,7 +1506,7 @@ function NavLink(arg0) {
 				}) : null,
 				badge ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionBadge, { children: badge }) : null,
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "min-w-0 truncate",
+					className: "min-w-0 truncate whitespace-nowrap",
 					children
 				})
 			]
@@ -1294,18 +1527,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__ */ (0, react_jsx_runtime.jsx)(framer_motion.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
 		}
@@ -1314,32 +1561,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__ */ (0, react_jsx_runtime.jsx)(framer_motion.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([(0, react_router_dom.useLocation)().pathname, useSectionStore((s) => s.sections)], isInsideMobileNavigation);
-	const isActiveGroup = group.links.findIndex((link) => link.href === pathname) !== -1;
+	const [pathname, sections] = useInitialValue([normalizeRoutePath((0, react_router_dom.useLocation)().pathname), useSectionStore((s) => s.sections)], isInsideMobileNavigation);
+	const isActiveGroup = group.links.findIndex((link) => isSameRoutePath(link.href, pathname)) !== -1;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
 		className: (0, clsx.default)("clarify-navigation-group relative mt-6", className),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.motion.h2, {
-			layout: "position",
-			className: "clarify-navigation-group-title flex items-center gap-2 text-xs font-semibold text-zinc-900 dark:text-white",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("h2", {
+			className: "clarify-navigation-group-title flex items-center gap-2",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavigationIcon, {
 				name: group.icon,
-				className: "h-3.5 w-3.5"
+				className: "clarify-navigation-group-title-icon h-3.5 w-3.5"
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: group.title })]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "relative mt-3 pl-2",
@@ -1351,10 +1609,7 @@ function NavigationGroup(arg0) {
 						pathname
 					}) : null
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
-					layout: true,
-					className: "absolute inset-y-0 left-2 w-px bg-zinc-900/10 dark:bg-white/5"
-				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "absolute inset-y-0 left-2 w-px bg-(--clarify-theme-tokens-colors-border) dark:bg-white/5" }),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.AnimatePresence, {
 					initial: false,
 					children: isActiveGroup ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActivePageMarker, {
@@ -1365,38 +1620,39 @@ function NavigationGroup(arg0) {
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
 					role: "list",
 					className: "border-l border-transparent",
-					children: group.links.map((link) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.motion.li, {
-						layout: "position",
-						className: "relative",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavLink, {
-							href: link.href,
-							icon: link.icon,
-							active: link.href === pathname,
-							children: link.title
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.AnimatePresence, {
-							mode: "popLayout",
-							initial: false,
-							children: link.href === pathname && sections.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.ul, {
-								role: "list",
-								initial: { opacity: 0 },
-								animate: {
-									opacity: 1,
-									transition: { delay: .1 }
-								},
-								exit: {
-									opacity: 0,
-									transition: { duration: .15 }
-								},
-								children: sections.map((section) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavLink, {
-									href: `${link.href}#${section.id}`,
-									badge: section.badge,
-									tags: section.tags,
-									isAnchorLink: true,
-									children: section.title
-								}) }, section.id))
-							}) : null
-						})]
-					}, link.href))
+					children: group.links.map((link) => {
+						const active = isSameRoutePath(link.href, pathname);
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+							className: "relative",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavLink, {
+								href: link.href,
+								icon: link.icon,
+								active,
+								children: link.title
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.AnimatePresence, {
+								initial: false,
+								children: active && sections.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.ul, {
+									role: "list",
+									initial: { opacity: 0 },
+									animate: {
+										opacity: 1,
+										transition: { delay: .1 }
+									},
+									exit: {
+										opacity: 0,
+										transition: { duration: .15 }
+									},
+									children: sections.map((section) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavLink, {
+										href: `${link.href}#${section.id}`,
+										badge: section.badge,
+										tags: section.tags,
+										isAnchorLink: true,
+										children: section.title
+									}) }, section.id))
+								}) : null
+							})]
+						}, link.href);
+					})
 				})
 			]
 		})]
@@ -1404,19 +1660,16 @@ function NavigationGroup(arg0) {
 }
 function Navigation(arg0) {
 	const { navigation, className } = arg0;
-	const groups = navigationToGroups(navigation);
+	const groups = navigationToGroups(navigation, useBuiltInText()("navigation.documentation"));
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
 		className: (0, clsx.default)("clarify-navigation", className),
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("ul", {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
 			role: "list",
 			className: "clarify-navigation-list",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TopLevelNavItem$1, {
-				href: "/",
-				children: "Home"
-			}), groups.map((group, groupIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavigationGroup, {
+			children: groups.map((group, groupIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavigationGroup, {
 				group,
-				className: groupIndex === 0 ? "md:mt-0" : ""
-			}, group.title))]
+				className: groupIndex === 0 ? "mt-0" : ""
+			}, group.title))
 		})
 	});
 }
@@ -1443,8 +1696,84 @@ function XIcon(props) {
 	});
 }
 var IsInsideMobileNavigationContext = (0, react.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((0, react_router_dom.useLocation)().pathname);
+	const { close } = useMobileNavigationStore();
+	if (!tabs?.length) return null;
+	const activeTab = tabs.find((tab) => isActiveTab$1(tab, pathname)) ?? tabs[0];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.Menu, {
+		as: "div",
+		className: "clarify-mobile-tabs-select mb-6",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.MenuButton, {
+			className: "clarify-mobile-tabs-select-trigger clarify-ui-control group flex h-10 w-full items-center justify-between gap-2 rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-theme-tokens-colors-border) px-4 text-left font-semibold shadow-xs shadow-zinc-900/5 transition dark:border-white/10",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "flex min-w-0 items-center gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavigationIcon, {
+					name: activeTab.icon,
+					className: "h-4 w-4 shrink-0 text-(--clarify-theme-tokens-colors-primary)"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "truncate",
+					children: activeTab.title
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+				width: "8",
+				height: "24",
+				viewBox: "0 -9 3 24",
+				"aria-hidden": "true",
+				className: "shrink-0 overflow-visible text-(--clarify-theme-tokens-colors-muted) transition-transform group-aria-expanded:rotate-180",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					d: "M0 0L3 3L0 6",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "1.5",
+					strokeLinecap: "round"
+				})
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuItems, {
+			className: "clarify-mobile-tabs-select-list clarify-ui-menu mt-2 flex flex-col gap-1 rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) p-1 shadow-lg shadow-zinc-900/5 focus:outline-none dark:border-white/10 dark:bg-zinc-900 dark:shadow-none",
+			children: tabs.map((tab) => {
+				const active = isActiveTab$1(tab, pathname);
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_router_dom.Link, {
+					to: tab.path,
+					onClick: close,
+					className: (0, clsx.default)("clarify-mobile-tabs-select-item clarify-ui-menu-item flex items-center justify-between gap-3 rounded-(--clarify-theme-tokens-radius-lg) px-3 py-2.5 no-underline transition", active && "clarify-ui-menu-item-active"),
+					"aria-current": active ? "page" : void 0,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "flex min-w-0 items-start gap-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavigationIcon, {
+							name: tab.icon,
+							className: "mt-0.5 h-4 w-4 shrink-0"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "min-w-0 whitespace-normal wrap-anywhere font-medium leading-5",
+							children: tab.title
+						})]
+					}), active ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+						viewBox: "0 0 20 20",
+						fill: "none",
+						"aria-hidden": "true",
+						className: "mt-0.5 h-4 w-4 shrink-0",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+							d: "m5 10 3 3 7-7",
+							stroke: "currentColor",
+							strokeWidth: "1.8",
+							strokeLinecap: "round",
+							strokeLinejoin: "round"
+						})
+					}) : null]
+				}) }, `${tab.title}-${tab.path}`);
+			})
+		})]
+	});
+}
 function MobileNavigationDialog(arg0) {
-	const { config, isOpen, navigation, routes, currentLocale, currentRoute, close } = arg0;
+	const { config, isOpen, navigation, tabs, routes, currentLocale, currentRoute, close } = arg0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.Dialog, {
 		transition: true,
 		open: isOpen,
@@ -1452,18 +1781,19 @@ function MobileNavigationDialog(arg0) {
 		className: "clarify-mobile-navigation-dialog fixed inset-0 z-50 lg:hidden",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.DialogBackdrop, {
 			transition: true,
-			className: "clarify-mobile-navigation-backdrop fixed inset-0 top-14 bg-zinc-400/20 backdrop-blur-xs data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in dark:bg-black/40"
+			className: "clarify-mobile-navigation-backdrop clarify-ui-backdrop fixed inset-0 top-14 backdrop-blur-xs data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.DialogPanel, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.TransitionChild, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Header, {
 			config,
 			navigation,
+			tabs,
 			routes,
 			currentLocale,
 			currentRoute,
 			className: "data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
-		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.TransitionChild, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.TransitionChild, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.motion.div, {
 			layoutScroll: true,
-			className: "clarify-mobile-navigation-panel fixed top-14 bottom-0 left-0 w-full overflow-y-auto bg-white px-4 pt-6 pb-4 shadow-lg ring-1 shadow-zinc-900/10 ring-zinc-900/7.5 duration-500 ease-in-out data-closed:-translate-x-full min-[416px]:max-w-sm sm:px-6 sm:pb-10 dark:bg-zinc-950 dark:ring-zinc-800",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Navigation, { navigation })
+			className: "clarify-mobile-navigation-panel fixed top-14 bottom-0 left-0 w-full overflow-y-auto bg-(--clarify-theme-tokens-colors-background) px-4 pt-6 pb-4 shadow-lg ring-1 shadow-zinc-900/10 ring-(--clarify-theme-tokens-colors-border) duration-500 ease-in-out data-closed:-translate-x-full min-[416px]:max-w-sm sm:px-6 sm:pb-10 dark:bg-zinc-950 dark:ring-zinc-800",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileTabsSelect, { tabs }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Navigation, { navigation })]
 		}) })] })]
 	});
 }
@@ -1477,23 +1807,25 @@ var useMobileNavigationStore = (0, zustand.create)()((set) => ({
 	toggle: () => set((state) => ({ isOpen: !state.isOpen }))
 }));
 function MobileNavigation(arg0) {
-	const { config, navigation, routes, currentLocale, currentRoute } = arg0;
+	const { config, navigation, tabs, routes, currentLocale, currentRoute } = arg0;
 	const isInsideMobileNavigation = useIsInsideMobileNavigation();
 	const { isOpen, toggle, close } = useMobileNavigationStore();
+	const t = useBuiltInText();
 	const ToggleIcon = isOpen ? XIcon : MenuIcon;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(IsInsideMobileNavigationContext.Provider, {
 		value: true,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 			type: "button",
-			className: "clarify-mobile-navigation-button relative flex size-6 items-center justify-center rounded-md transition hover:bg-zinc-900/5 dark:hover:bg-white/5",
-			"aria-label": "Toggle navigation",
+			className: "clarify-mobile-navigation-button clarify-ui-icon-button relative flex size-6 items-center justify-center rounded-(--clarify-theme-tokens-radius-md) transition",
+			"aria-label": t("navigation.toggle"),
 			onClick: toggle,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "absolute size-12 pointer-fine:hidden" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleIcon, { className: "w-2.5 stroke-zinc-900 dark:stroke-white" })]
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "absolute size-12 pointer-fine:hidden" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleIcon, { className: "w-2.5 stroke-(--clarify-theme-tokens-colors-foreground) dark:stroke-white" })]
 		}), !isInsideMobileNavigation ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, {
 			fallback: null,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileNavigationDialog, {
 				config,
 				navigation,
+				tabs,
 				routes,
 				currentLocale,
 				currentRoute,
@@ -1574,7 +1906,7 @@ function HighlightQuery(arg0) {
 	const { text, query } = arg0;
 	if (!query) return text;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: text.split(new RegExp(`(${escapeRegExp(query)})`, "ig")).map((part, index) => part.toLowerCase() === query.toLowerCase() ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("mark", {
-		className: "bg-transparent text-emerald-500 underline",
+		className: "bg-transparent text-(--clarify-theme-tokens-colors-primary) underline",
 		children: part
 	}, index) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: part }, index)) });
 }
@@ -1584,25 +1916,25 @@ function SearchResult(arg0) {
 	const hierarchy = [result.sectionTitle, result.pageTitle].filter((value) => typeof value === "string");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
 		id,
-		className: (0, clsx.default)("clarify-search-result group block cursor-default px-4 py-3 aria-selected:bg-zinc-50 dark:aria-selected:bg-zinc-800/50", active && "bg-zinc-50 dark:bg-zinc-800/50"),
+		className: (0, clsx.default)("clarify-search-result group block cursor-default px-4 py-3", active && "clarify-search-result-active"),
 		"aria-selected": active,
 		onMouseDown: (event) => {
 			event.preventDefault();
 			onSelect();
 		},
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "text-sm font-medium text-zinc-900 group-aria-selected:text-emerald-500 dark:text-white",
+			className: "clarify-search-result-title",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HighlightQuery, {
 				text: result.title,
 				query
 			})
 		}), hierarchy.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "mt-1 truncate text-2xs whitespace-nowrap text-zinc-500",
+			className: "clarify-search-result-hierarchy mt-1 truncate whitespace-nowrap",
 			children: hierarchy.map((item, itemIndex, items) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HighlightQuery, {
 				text: item,
 				query
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: itemIndex === items.length - 1 ? "sr-only" : "mx-2 text-zinc-300 dark:text-zinc-700",
+				className: itemIndex === items.length - 1 ? "sr-only" : "clarify-search-result-separator mx-2",
 				children: "/"
 			})] }, `${item}-${itemIndex}`))
 		}) : null]
@@ -1610,9 +1942,10 @@ function SearchResult(arg0) {
 }
 var SearchInput = (0, react.forwardRef)(function SearchInput(arg0, inputRef) {
 	const { query, setQuery, onClose, onSubmit, activeDescendantId } = arg0;
+	const t = useBuiltInText();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "clarify-search-input group relative flex h-12",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchIcon, { className: "pointer-events-none absolute top-0 left-3 h-full w-5 stroke-zinc-500" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchIcon, { className: "pointer-events-none absolute top-0 left-3 h-full w-5 stroke-(--clarify-theme-tokens-colors-muted)" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 			ref: inputRef,
 			"data-autofocus": true,
 			role: "combobox",
@@ -1629,13 +1962,14 @@ var SearchInput = (0, react.forwardRef)(function SearchInput(arg0, inputRef) {
 					onSubmit();
 				}
 			},
-			placeholder: "Find something...",
-			className: "flex-auto appearance-none bg-transparent pr-4 pl-10 text-zinc-900 outline-hidden placeholder:text-zinc-500 focus:w-full focus:flex-none sm:text-sm dark:text-white [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden [&::-webkit-search-results-button]:hidden [&::-webkit-search-results-decoration]:hidden"
+			placeholder: t("search.placeholder"),
+			className: "clarify-search-field flex-auto appearance-none bg-transparent pr-4 pl-10 outline-hidden focus:w-full focus:flex-none [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden [&::-webkit-search-results-button]:hidden [&::-webkit-search-results-decoration]:hidden"
 		})]
 	});
 });
 function SearchDialog(arg0) {
 	const { open, setOpen, routes, navigation, className, onNavigate = () => {} } = arg0;
+	const t = useBuiltInText();
 	const navigate = (0, react_router_dom.useNavigate)();
 	const location = (0, react_router_dom.useLocation)();
 	const inputRef = (0, react.useRef)(null);
@@ -1686,12 +2020,12 @@ function SearchDialog(arg0) {
 		className: (0, clsx.default)("clarify-search-dialog fixed inset-0 z-50", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.DialogBackdrop, {
 			transition: true,
-			className: "clarify-search-backdrop fixed inset-0 bg-zinc-400/25 backdrop-blur-xs data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in dark:bg-black/40"
+			className: "clarify-search-backdrop clarify-ui-backdrop fixed inset-0 backdrop-blur-xs data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "fixed inset-0 overflow-y-auto px-4 py-4 sm:px-6 sm:py-20 md:py-32 lg:px-8 lg:py-[15vh]",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.DialogPanel, {
 				transition: true,
-				className: "clarify-search-panel mx-auto transform-gpu overflow-hidden rounded-lg bg-zinc-50 shadow-xl ring-1 ring-zinc-900/7.5 data-closed:scale-95 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:max-w-xl dark:bg-zinc-900 dark:ring-zinc-800",
+				className: "clarify-search-panel mx-auto transform-gpu overflow-hidden rounded-(--clarify-theme-tokens-radius-lg) bg-(--clarify-theme-tokens-colors-surface) shadow-xl ring-1 ring-(--clarify-theme-tokens-colors-border) data-closed:scale-95 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:max-w-xl dark:bg-zinc-900 dark:ring-zinc-800",
 				onKeyDown: (event) => {
 					if (event.key === "ArrowDown") {
 						event.preventDefault();
@@ -1709,24 +2043,12 @@ function SearchDialog(arg0) {
 					onClose: closeDialog,
 					onSubmit: () => selectResult()
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "border-t border-zinc-200 bg-white empty:hidden dark:border-zinc-100/5 dark:bg-white/2.5",
+					className: "border-t border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-background) empty:hidden dark:border-zinc-100/5 dark:bg-white/2.5",
 					children: [query && results.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "p-6 text-center",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NoResultsIcon, { className: "mx-auto h-5 w-5 stroke-zinc-900 dark:stroke-zinc-600" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
-							className: "mt-2 text-xs text-zinc-700 dark:text-zinc-400",
-							children: [
-								"Nothing found for",
-								" ",
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("strong", {
-									className: "font-semibold wrap-break-word text-zinc-900 dark:text-white",
-									children: [
-										"‘",
-										query,
-										"’"
-									]
-								}),
-								"."
-							]
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NoResultsIcon, { className: "mx-auto h-5 w-5 stroke-(--clarify-theme-tokens-colors-foreground) dark:stroke-zinc-600" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "mt-2 text-xs text-(--clarify-theme-tokens-colors-muted) dark:text-zinc-400",
+							children: t("search.noResults", { query })
 						})]
 					}) : null, results.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
 						id: "clarify-search-results",
@@ -1766,19 +2088,20 @@ function getModifierKey() {
 }
 function Search(arg0) {
 	const { routes, navigation } = arg0;
+	const t = useBuiltInText();
 	const modifierKey = getModifierKey();
 	const { buttonProps, dialogProps } = useSearchProps();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "clarify-search hidden lg:block lg:max-w-md lg:flex-auto",
+		className: "clarify-search hidden w-80 max-w-[36vw] lg:block",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 			type: "button",
-			className: "clarify-search-button hidden h-8 w-full items-center gap-2 rounded-full bg-white pr-3 pl-2 text-sm text-zinc-500 ring-1 ring-zinc-900/10 transition hover:ring-zinc-900/20 lg:flex dark:bg-white/5 dark:text-zinc-400 dark:ring-white/10 dark:ring-inset dark:hover:ring-white/20",
+			className: "clarify-search-button hidden h-9 w-full items-center gap-2 rounded-(--clarify-theme-tokens-radius-lg) bg-(--clarify-theme-tokens-colors-surface) pr-3 pl-2.5 font-medium ring-1 ring-(--clarify-theme-tokens-colors-border) transition hover:bg-(--clarify-theme-tokens-colors-background) lg:flex dark:bg-white/5 dark:ring-white/10 dark:ring-inset dark:hover:bg-white/10",
 			...buttonProps,
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchIcon, { className: "h-5 w-5 stroke-current" }),
-				"Find something...",
+				t("search.button"),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("kbd", {
-					className: "ml-auto text-2xs text-zinc-400 dark:text-zinc-500",
+					className: "clarify-search-shortcut ml-auto rounded-(--clarify-theme-tokens-radius-sm) bg-(--clarify-theme-tokens-colors-background) px-1.5 py-0.5 ring-1 ring-(--clarify-theme-tokens-colors-border) dark:bg-white/5 dark:ring-white/10",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("kbd", {
 						className: "font-sans",
 						children: modifierKey
@@ -1801,15 +2124,16 @@ function Search(arg0) {
 }
 function MobileSearch(arg0) {
 	const { routes, navigation, onNavigate } = arg0;
+	const t = useBuiltInText();
 	const { buttonProps, dialogProps } = useSearchProps();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "clarify-mobile-search contents lg:hidden",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 			type: "button",
-			className: "clarify-mobile-search-button relative flex size-6 items-center justify-center rounded-md transition hover:bg-zinc-900/5 lg:hidden dark:hover:bg-white/5",
-			"aria-label": "Find something...",
+			className: "clarify-mobile-search-button clarify-ui-control relative flex size-6 items-center justify-center rounded-(--clarify-theme-tokens-radius-md) transition lg:hidden",
+			"aria-label": t("search.placeholder"),
 			...buttonProps,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "absolute size-12 pointer-fine:hidden" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchIcon, { className: "h-5 w-5 stroke-zinc-900 dark:stroke-white" })]
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "absolute size-12 pointer-fine:hidden" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchIcon, { className: "h-5 w-5 stroke-(--clarify-theme-tokens-colors-foreground) dark:stroke-white" })]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, {
 			fallback: null,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchDialog, {
@@ -1823,20 +2147,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__ */ (0, react_jsx_runtime.jsx)("img", {
+		src: logo,
+		alt: "",
+		className: (0, clsx.default)("clarify-logo", className)
+	});
+	const lightLogo = logo.light ?? logo.dark;
+	const darkLogo = logo.dark ?? logo.light;
+	if (!lightLogo || !darkLogo) return null;
+	if (lightLogo === darkLogo) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+		src: lightLogo,
+		alt: "",
+		className: (0, clsx.default)("clarify-logo", className)
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+		src: lightLogo,
+		alt: "",
+		className: (0, clsx.default)("clarify-logo clarify-logo-light", className, "dark:hidden")
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+		src: darkLogo,
+		alt: "",
+		className: (0, clsx.default)("clarify-logo clarify-logo-dark", className, "hidden dark:block")
+	})] });
+}
+//#endregion
 //#region source/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;
@@ -1854,6 +2197,7 @@ function LanguageIcon(props) {
 }
 function LanguageSwitcher(arg0) {
 	const { config, currentLocale, currentRoute } = arg0;
+	const t = useBuiltInText();
 	const location = (0, react_router_dom.useLocation)();
 	const i18n = config.i18n;
 	if (!i18n || i18n.locales.length < 2) return null;
@@ -1864,8 +2208,8 @@ function LanguageSwitcher(arg0) {
 		as: "div",
 		className: "clarify-language-switcher relative",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.MenuButton, {
-			className: "clarify-language-switcher-button flex h-7 items-center gap-1.5 rounded-md px-1.5 text-sm/5 font-medium text-zinc-600 transition hover:bg-zinc-900/5 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-white/5 dark:hover:text-white",
-			"aria-label": "Switch language",
+			className: "clarify-language-switcher-button clarify-ui-control flex h-7 items-center gap-1.5 rounded-(--clarify-theme-tokens-radius-md) px-1.5 transition",
+			"aria-label": t("language.switch"),
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "absolute size-12 pointer-fine:hidden" }),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LanguageIcon, { className: "h-5 w-5 stroke-current" }),
@@ -1876,19 +2220,19 @@ function LanguageSwitcher(arg0) {
 			]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuItems, {
 			transition: true,
-			className: "clarify-language-switcher-menu absolute right-0 z-50 mt-2 w-44 rounded-xl bg-white p-1 text-sm shadow-lg ring-1 shadow-zinc-900/5 ring-zinc-900/10 transition data-closed:scale-95 data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in dark:bg-zinc-900 dark:ring-white/10",
+			className: "clarify-language-switcher-menu clarify-ui-menu absolute right-0 z-50 mt-2 w-(--clarify-ui-menu-width) rounded-(--clarify-theme-tokens-radius-xl) bg-(--clarify-theme-tokens-colors-surface) p-1 shadow-lg ring-1 shadow-zinc-900/5 ring-(--clarify-theme-tokens-colors-border) transition data-closed:scale-95 data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in dark:bg-zinc-900 dark:ring-white/10",
 			children: i18n.locales.flatMap((locale) => {
 				const localizedPath = localizedRoutePath(config, locale.code, currentRoute);
 				if (!localizedPath) return [];
 				const selected = locale.code === selectedLocale;
 				return [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuItem, { children: ({ focus }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_router_dom.Link, {
 					to: `${localizedPath}${suffix}`,
-					className: (0, clsx.default)("clarify-language-switcher-item flex items-center justify-between rounded-lg px-3 py-2 no-underline transition", focus && "bg-zinc-100 dark:bg-white/5", selected ? "text-zinc-900 dark:text-white" : "text-zinc-600 dark:text-zinc-400"),
+					className: (0, clsx.default)("clarify-language-switcher-item clarify-ui-menu-item flex items-center justify-between rounded-(--clarify-theme-tokens-radius-lg) px-3 py-2 no-underline transition", focus && "clarify-ui-menu-item-focus", selected && "clarify-ui-menu-item-active"),
 					"aria-current": selected ? "true" : void 0,
 					lang: locale.code,
 					dir: locale.dir,
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: locale.label }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "text-xs text-zinc-400 dark:text-zinc-500",
+						className: "clarify-ui-menu-code",
 						children: locale.code
 					})]
 				}) }, locale.code)];
@@ -1900,217 +2244,186 @@ function TopLevelNavItem(arg0) {
 	const { href, children } = arg0;
 	if (isExternalHref(href)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
 		href,
-		className: "text-sm/5 text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white",
+		className: "clarify-ui-top-link transition",
 		target: "_blank",
 		rel: "noreferrer",
 		children
 	}) });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Link, {
 		to: href,
-		className: "text-sm/5 text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white",
+		className: "clarify-ui-top-link transition",
 		children
 	}) });
 }
+function MobileNavbarMenu(arg0) {
+	const { links, config, currentLocale } = arg0;
+	const t = useBuiltInText();
+	if (!links?.length) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.Menu, {
+		as: "div",
+		className: "clarify-mobile-navbar-menu relative md:hidden",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.MenuButton, {
+			className: "clarify-mobile-navbar-menu-button clarify-ui-control relative flex size-8 items-center justify-center rounded-(--clarify-theme-tokens-radius-md) transition",
+			"aria-label": t("navbar.openLinks"),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "absolute size-12 pointer-fine:hidden" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.MoreHorizontal, { className: "h-5 w-5" })]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuItems, {
+			transition: true,
+			anchor: "bottom end",
+			className: "clarify-mobile-navbar-menu-list clarify-ui-menu z-50 mt-2 w-(--clarify-ui-menu-width) rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) p-1 shadow-lg transition [--anchor-gap:--spacing(2)] focus:outline-none data-closed:scale-95 data-closed:opacity-0 dark:border-white/10 dark:bg-zinc-900",
+			children: links.map((link) => {
+				const label = resolveLocalizedText(link.label, currentLocale, config.i18n?.defaultLocale);
+				const href = localizeHref(link.href, config, currentLocale);
+				const external = isExternalHref(href);
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuItem, { children: ({ focus }) => {
+					const className = (0, clsx.default)("clarify-mobile-navbar-menu-item clarify-ui-menu-item block rounded-(--clarify-theme-tokens-radius-lg) px-3 py-2 no-underline transition", focus && "clarify-ui-menu-item-focus");
+					return external ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+						href,
+						target: "_blank",
+						rel: "noreferrer",
+						className,
+						children: label
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Link, {
+						to: href,
+						className,
+						children: label
+					});
+				} }, link.href);
+			})
+		})]
+	});
+}
+function hasPath(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((0, react_router_dom.useLocation)().pathname);
+	if (!tabs?.length) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "clarify-product-tabs hidden h-14 border-t border-(--clarify-theme-tokens-colors-border) lg:block dark:border-white/10",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+			className: "clarify-product-tabs-nav mx-auto flex h-full w-full max-w-(--clarify-theme-layout-max-width) items-stretch gap-6 overflow-x-auto px-5",
+			"aria-label": t("navbar.sections"),
+			children: tabs.map((tab) => {
+				const active = isActiveTab(tab, pathname);
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_router_dom.Link, {
+					to: tab.path,
+					"aria-current": active ? "page" : void 0,
+					className: (0, clsx.default)("clarify-product-tab clarify-ui-tab relative inline-flex h-full shrink-0 items-center gap-2 px-0 transition", active && "clarify-ui-tab-active"),
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavigationIcon, {
+							name: tab.icon,
+							className: "h-4 w-4"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: tab.title }),
+						active ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.span, {
+							layoutId: "clarify-product-tab-indicator",
+							className: "absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-(--clarify-theme-tokens-colors-foreground) dark:bg-white",
+							transition: {
+								type: "tween",
+								duration: .16,
+								ease: "easeOut"
+							}
+						}) : null
+					]
+				}, `${tab.title}-${tab.path}`);
+			})
+		})
+	});
+}
 var Header = (0, react.forwardRef)(function Header(arg0, ref) {
-	const { config, navigation, routes, currentLocale, currentRoute, className, ...props } = arg0;
+	const { config, navigation, tabs, routes, currentLocale, currentRoute, className, ...props } = arg0;
+	const t = useBuiltInText();
 	const { isOpen: mobileNavIsOpen } = useMobileNavigationStore();
 	const isInsideMobileNavigation = useIsInsideMobileNavigation();
 	const { scrollY } = (0, framer_motion.useScroll)();
-	const bgOpacityLight = (0, framer_motion.useTransform)(scrollY, [0, 72], ["50%", "90%"]);
-	const bgOpacityDark = (0, framer_motion.useTransform)(scrollY, [0, 72], ["20%", "80%"]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.motion.div, {
+	const bgOpacityLight = (0, framer_motion.useTransform)(scrollY, [0, 72], ["70%", "95%"]);
+	const bgOpacityDark = (0, framer_motion.useTransform)(scrollY, [0, 72], ["60%", "92%"]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.motion.header, {
 		...props,
 		ref,
-		className: (0, clsx.default)(className, "clarify-header fixed inset-x-0 top-0 z-50 flex h-14 items-center justify-between gap-12 px-4 transition sm:px-6 lg:left-72 lg:z-30 lg:px-8 xl:left-80", !isInsideMobileNavigation && "backdrop-blur-xs lg:left-72 xl:left-80 dark:backdrop-blur-sm", isInsideMobileNavigation ? "bg-white dark:bg-zinc-950" : "bg-white/(--bg-opacity-light) dark:bg-zinc-950/(--bg-opacity-dark)"),
+		className: (0, clsx.default)(className, "clarify-header fixed inset-x-0 top-0 z-50 border-b border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-background)/(--bg-opacity-light) backdrop-blur-xs transition dark:border-white/10 dark:bg-zinc-950/(--bg-opacity-dark) dark:backdrop-blur-sm", isInsideMobileNavigation && "bg-(--clarify-theme-tokens-colors-background) dark:bg-zinc-950"),
 		style: {
 			"--bg-opacity-light": bgOpacityLight,
 			"--bg-opacity-dark": bgOpacityDark
 		},
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, clsx.default)("absolute inset-x-0 top-full h-px transition", (isInsideMobileNavigation || !mobileNavIsOpen) && "bg-zinc-900/7.5 dark:bg-white/7.5") }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "hidden lg:block" }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "clarify-mobile-brand flex items-center gap-5 lg:hidden",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileNavigation, {
-					config,
-					navigation,
-					routes,
-					currentLocale,
-					currentRoute
-				}), config.logo ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.CloseButton, {
-					as: react_router_dom.Link,
-					to: localizeHref("/", config, currentLocale),
-					"aria-label": "Home",
-					className: "clarify-brand flex items-center gap-2 no-underline",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SiteLogo, {
-						logo: config.logo,
-						className: "h-6 w-6"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "sr-only",
-						children: config.title
-					})]
-				}) : null]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "clarify-header-actions flex items-center gap-5",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Search, {
-						routes,
-						navigation
-					}),
-					config.navbar?.links?.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
-						className: "clarify-top-nav hidden md:block",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-							role: "list",
-							className: "flex items-center gap-8",
-							children: config.navbar.links.map((link) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TopLevelNavItem, {
-								href: localizeHref(link.href, config, currentLocale),
-								children: resolveLocalizedText(link.label, currentLocale, config.i18n?.defaultLocale)
-							}, link.href))
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, clsx.default)("clarify-header-main relative mx-auto flex h-14 w-full max-w-(--clarify-theme-layout-max-width) items-center justify-between gap-6 px-4 sm:px-6 lg:px-5", (isInsideMobileNavigation || !mobileNavIsOpen) && "shadow-none"),
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "clarify-header-left flex min-w-0 items-center gap-5",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "clarify-mobile-brand flex items-center gap-5 lg:hidden",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileNavigation, {
+							config,
+							navigation,
+							tabs,
+							routes,
+							currentLocale,
+							currentRoute
 						})
-					}) : null,
-					config.navbar?.links?.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "hidden md:block md:h-5 md:w-px md:bg-zinc-900/10 md:dark:bg-white/15" }) : null,
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileSearch, {
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.CloseButton, {
+						as: react_router_dom.Link,
+						to: localizeHref("/", config, currentLocale),
+						"aria-label": t("navbar.home"),
+						className: "clarify-brand flex min-w-0 items-center gap-2 no-underline",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SiteLogo, {
+							logo: config.logo,
+							className: "h-6 w-6 shrink-0"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "clarify-brand-title truncate font-semibold",
+							children: config.title
+						})]
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "clarify-header-center absolute left-1/2 hidden -translate-x-1/2 lg:block",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Search, {
 						routes,
 						navigation
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LanguageSwitcher, {
-						config,
-						currentLocale,
-						currentRoute
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.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 = (0, react_router_dom.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);
-	(0, react.useEffect)(() => {
-		scrollToHash(location.hash);
-	}, [location.hash, location.pathname]);
-	(0, react.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__ */ (0, react_jsx_runtime.jsx)(SectionProvider, {
-		sections,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "clarify-app h-full min-h-screen bg-white lg:ml-72 xl:ml-80 dark:bg-zinc-950",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.header, {
-				layoutScroll: true,
-				className: "clarify-shell contents lg:pointer-events-none lg:fixed lg:inset-0 lg:z-40 lg:flex",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "clarify-sidebar contents lg:pointer-events-auto lg:block lg:w-72 lg:overflow-y-auto lg:border-r lg:border-zinc-900/10 lg:bg-white lg:px-6 lg:pt-4 lg:pb-8 xl:w-80 lg:dark:border-white/10 lg:dark:bg-zinc-950",
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "clarify-header-actions flex shrink-0 items-center gap-5",
 					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "clarify-sidebar-brand hidden lg:flex",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_router_dom.Link, {
-								to: homePathForLocale(config, currentLocale),
-								"aria-label": "Home",
-								className: "clarify-brand flex items-center gap-2 no-underline",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SiteLogo, {
-									logo: config.logo,
-									className: "h-6 w-6"
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "clarify-brand-title text-sm font-semibold text-zinc-900 dark:text-white",
-									children: config.title
-								})]
+						config.navbar?.links?.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+							className: "clarify-top-nav hidden md:block",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+								role: "list",
+								className: "flex items-center gap-8",
+								children: config.navbar.links.map((link) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TopLevelNavItem, {
+									href: localizeHref(link.href, config, currentLocale),
+									children: resolveLocalizedText(link.label, currentLocale, config.i18n?.defaultLocale)
+								}, link.href))
 							})
+						}) : null,
+						config.navbar?.links?.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "hidden md:block md:h-5 md:w-px md:bg-(--clarify-theme-tokens-colors-border) md:dark:bg-white/15" }) : null,
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileSearch, {
+							routes,
+							navigation
 						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Header, {
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LanguageSwitcher, {
 							config,
-							navigation: currentNavigation,
-							routes,
 							currentLocale,
 							currentRoute
 						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Navigation, {
-							navigation: currentNavigation,
-							className: "clarify-navigation hidden lg:mt-10 lg:block"
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThemeToggle, {}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileNavbarMenu, {
+							links: config.navbar?.links,
+							config,
+							currentLocale
 						})
 					]
 				})
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "clarify-content relative flex min-h-screen flex-col px-4 pt-14 sm:px-6 lg:px-8",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContentActions, {
-					route: currentRoute,
-					routePrefix: config.routePrefix
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("main", {
-					className: "clarify-main flex-auto",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Routes, { children: routes.map((route) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Route, {
-						path: route.path,
-						element: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(route.component, {})
-					}, route.path)) })
-				})]
-			})]
-		})
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProductTabs, { tabs })]
 	});
-}
-//#endregion
-Object.defineProperty(exports, "ApiEndpointCard", {
-	enumerable: true,
-	get: function() {
-		return ApiEndpointCard;
-	}
-});
-Object.defineProperty(exports, "AppShell", {
-	enumerable: true,
-	get: function() {
-		return AppShell;
-	}
-});
-Object.defineProperty(exports, "BuiltWithClarify", {
-	enumerable: true,
-	get: function() {
-		return BuiltWithClarify;
-	}
 });
+//#endregion
 Object.defineProperty(exports, "Button", {
 	enumerable: true,
 	get: function() {
@@ -2141,6 +2454,12 @@ Object.defineProperty(exports, "ClarifyConfigContext", {
 		return ClarifyConfigContext;
 	}
 });
+Object.defineProperty(exports, "ClarifyLocaleContext", {
+	enumerable: true,
+	get: function() {
+		return ClarifyLocaleContext;
+	}
+});
 Object.defineProperty(exports, "Code", {
 	enumerable: true,
 	get: function() {
@@ -2153,10 +2472,16 @@ Object.defineProperty(exports, "CodeGroup", {
 		return CodeGroup;
 	}
 });
-Object.defineProperty(exports, "DocShell", {
+Object.defineProperty(exports, "Collapse", {
+	enumerable: true,
+	get: function() {
+		return Collapse;
+	}
+});
+Object.defineProperty(exports, "ContentActions", {
 	enumerable: true,
 	get: function() {
-		return DocShell;
+		return ContentActions;
 	}
 });
 Object.defineProperty(exports, "Feedback", {
@@ -2171,6 +2496,12 @@ Object.defineProperty(exports, "GridPattern", {
 		return GridPattern;
 	}
 });
+Object.defineProperty(exports, "Header", {
+	enumerable: true,
+	get: function() {
+		return Header;
+	}
+});
 Object.defineProperty(exports, "Heading", {
 	enumerable: true,
 	get: function() {
@@ -2189,16 +2520,16 @@ Object.defineProperty(exports, "Logo", {
 		return Logo;
 	}
 });
-Object.defineProperty(exports, "OpenApisContext", {
+Object.defineProperty(exports, "Navigation", {
 	enumerable: true,
 	get: function() {
-		return OpenApisContext;
+		return Navigation;
 	}
 });
-Object.defineProperty(exports, "PageFooter", {
+Object.defineProperty(exports, "OpenApisContext", {
 	enumerable: true,
 	get: function() {
-		return PageFooter;
+		return OpenApisContext;
 	}
 });
 Object.defineProperty(exports, "Pre", {
@@ -2237,16 +2568,40 @@ Object.defineProperty(exports, "ThemeToggle", {
 		return ThemeToggle;
 	}
 });
-Object.defineProperty(exports, "__exportAll", {
+Object.defineProperty(exports, "copyTextToClipboard", {
+	enumerable: true,
+	get: function() {
+		return copyTextToClipboard;
+	}
+});
+Object.defineProperty(exports, "isExternalHref", {
+	enumerable: true,
+	get: function() {
+		return isExternalHref;
+	}
+});
+Object.defineProperty(exports, "isSameRoutePath", {
 	enumerable: true,
 	get: function() {
-		return __exportAll;
+		return isSameRoutePath;
 	}
 });
-Object.defineProperty(exports, "__toESM", {
+Object.defineProperty(exports, "localizeHref", {
 	enumerable: true,
 	get: function() {
-		return __toESM;
+		return localizeHref;
+	}
+});
+Object.defineProperty(exports, "normalizeRoutePath", {
+	enumerable: true,
+	get: function() {
+		return normalizeRoutePath;
+	}
+});
+Object.defineProperty(exports, "prefixHref", {
+	enumerable: true,
+	get: function() {
+		return prefixHref;
 	}
 });
 Object.defineProperty(exports, "remToPx", {
@@ -2255,6 +2610,18 @@ Object.defineProperty(exports, "remToPx", {
 		return remToPx;
 	}
 });
+Object.defineProperty(exports, "safeDecodeURIComponent", {
+	enumerable: true,
+	get: function() {
+		return safeDecodeURIComponent;
+	}
+});
+Object.defineProperty(exports, "useBuiltInText", {
+	enumerable: true,
+	get: function() {
+		return useBuiltInText;
+	}
+});
 Object.defineProperty(exports, "useClarifyConfig", {
 	enumerable: true,
 	get: function() {
@@ -2280,4 +2647,4 @@ Object.defineProperty(exports, "useTheme", {
 	}
 });
 
-//# sourceMappingURL=AppShell-4KB3lU-n.cjs.map
+//# sourceMappingURL=shell-_MyLsMUI.cjs.map