@clarify-labs/renderer 0.4.0 → 0.6.0

package/output/{AppShell-CZw1MrPG.cjs → shell-_MyLsMUI.cjs}

@@ -1,119 +1,15 @@
-//#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
+const require_chunk = require("./chunk-DakpK96I.cjs");
 let clsx = require("clsx");
-clsx = __toESM(clsx, 1);
-let framer_motion = require("framer-motion");
+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 lucide_react = require("lucide-react");
-lucide_react = __toESM(lucide_react, 1);
 let _headlessui_react = require("@headlessui/react");
-//#region source/utils/remToPx.ts
-function remToPx(remValue) {
-	return remValue * (typeof window === "undefined" ? 16 : Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize));
-}
-//#endregion
-//#region source/components/SectionProvider.tsx
-function createSectionStore(sections) {
-	return (0, zustand.createStore)()((set) => ({
-		sections,
-		visibleSections: [],
-		setVisibleSections: (visibleSections) => set((state) => state.visibleSections.join() === visibleSections.join() ? {} : { visibleSections }),
-		registerHeading: ({ id, ref, offsetRem }) => set((state) => ({ sections: state.sections.map((section) => section.id === id ? {
-			...section,
-			headingRef: ref,
-			offsetRem
-		} : section) }))
-	}));
-}
-function useVisibleSections(sectionStore) {
-	const setVisibleSections = (0, zustand.useStore)(sectionStore, (state) => state.setVisibleSections);
-	const sections = (0, zustand.useStore)(sectionStore, (state) => state.sections);
-	(0, react.useEffect)(() => {
-		function checkVisibleSections() {
-			const { innerHeight, scrollY } = window;
-			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);
-			}
-			setVisibleSections(newVisibleSections);
-		}
-		const raf = window.requestAnimationFrame(() => checkVisibleSections());
-		window.addEventListener("scroll", checkVisibleSections, { passive: true });
-		window.addEventListener("resize", checkVisibleSections);
-		return () => {
-			window.cancelAnimationFrame(raf);
-			window.removeEventListener("scroll", checkVisibleSections);
-			window.removeEventListener("resize", checkVisibleSections);
-		};
-	}, [setVisibleSections, sections]);
-}
-var SectionStoreContext = (0, react.createContext)(null);
-var useIsomorphicLayoutEffect = typeof window === "undefined" ? react.useEffect : react.useLayoutEffect;
-function SectionProvider(arg0) {
-	const { sections, children } = arg0;
-	const [sectionStore] = (0, react.useState)(() => createSectionStore(sections));
-	useVisibleSections(sectionStore);
-	useIsomorphicLayoutEffect(() => {
-		sectionStore.setState((state) => ({ sections: sections.map((section) => {
-			const registeredSection = state.sections.find((item) => item.id === section.id);
-			return {
-				...section,
-				headingRef: registeredSection?.headingRef,
-				offsetRem: registeredSection?.offsetRem ?? section.offsetRem
-			};
-		}) }));
-	}, [sectionStore, sections]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionStoreContext.Provider, {
-		value: sectionStore,
-		children
-	});
-}
-function useSectionStore(selector) {
-	const store = (0, react.useContext)(SectionStoreContext);
-	if (!store) throw new Error("[clarify] useSectionStore must be used within SectionProvider");
-	return (0, zustand.useStore)(store, selector);
-}
-//#endregion
-//#region source/context.tsx
+let lucide_react = require("lucide-react");
+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)({});
@@ -126,7 +22,7 @@ function useOpenApis() {
 	return (0, react.useContext)(OpenApisContext);
 }
 //#endregion
-//#region source/i18n.ts
+//#region source/core/i18n.ts
 var builtInText = {
 	en: {
 		"actions.code": "Code",
@@ -144,6 +40,9 @@ var builtInText = {
 		"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",
@@ -216,6 +115,9 @@ var builtInText = {
 		"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": "已复制链接",
@@ -288,894 +190,1027 @@ function useBuiltInText(locale) {
 	return (key, replacements) => translateBuiltInText(resolvedLocale, key, replacements);
 }
 //#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",
-		...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"
-			})
-		]
-	});
-}
-function BuiltWithClarify() {
-	const t = useBuiltInText();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
-		href: "https://clarify.pub",
-		target: "_blank",
-		rel: "noreferrer",
-		"aria-label": t("builtWith.label"),
-		className: "clarify-built-with inline-flex items-center gap-1.5 rounded-full px-2 py-1 font-medium no-underline transition",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("builtWith.prefix") }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClarifyMark, { className: "clarify-built-with-logo h-3.5 w-5 flex-none" }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "clarify-built-with-brand font-semibold",
-				children: "Clarify"
-			})
-		]
-	});
-}
-//#endregion
-//#region source/components/Callout.tsx
-var calloutStyles = {
-	info: {
-		container: "border-sky-500/20 bg-sky-50/50 text-sky-950 dark:border-sky-400/30 dark:bg-sky-400/5 dark:text-sky-100",
-		icon: "text-sky-600 dark:text-sky-400",
-		title: "text-sky-900 dark:text-sky-100",
-		Icon: lucide_react.Info
-	},
-	note: {
-		container: "border-zinc-500/20 bg-zinc-50 text-zinc-900 dark:border-white/10 dark:bg-white/5 dark:text-zinc-200",
-		icon: "text-zinc-500 dark:text-zinc-400",
-		title: "text-zinc-900 dark:text-white",
-		Icon: lucide_react.Info
-	},
-	tip: {
-		container: "border-emerald-500/20 bg-emerald-50/50 text-emerald-950 dark:border-emerald-400/30 dark:bg-emerald-400/5 dark:text-emerald-100",
-		icon: "text-emerald-600 dark:text-emerald-400",
-		title: "text-emerald-900 dark:text-emerald-100",
-		Icon: lucide_react.Lightbulb
-	},
-	warning: {
-		container: "border-amber-500/20 bg-amber-50/70 text-amber-950 dark:border-amber-400/30 dark:bg-amber-400/5 dark:text-amber-100",
-		icon: "text-amber-600 dark:text-amber-400",
-		title: "text-amber-900 dark:text-amber-100",
-		Icon: lucide_react.AlertTriangle
-	},
-	danger: {
-		container: "border-rose-500/20 bg-rose-50/70 text-rose-950 dark:border-rose-400/30 dark:bg-rose-400/5 dark:text-rose-100",
-		icon: "text-rose-600 dark:text-rose-400",
-		title: "text-rose-900 dark:text-rose-100",
-		Icon: lucide_react.XCircle
-	},
-	success: {
-		container: "border-emerald-500/20 bg-emerald-50/50 text-emerald-950 dark:border-emerald-400/30 dark:bg-emerald-400/5 dark:text-emerald-100",
-		icon: "text-emerald-600 dark:text-emerald-400",
-		title: "text-emerald-900 dark:text-emerald-100",
-		Icon: lucide_react.CheckCircle2
+//#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();
 	}
-};
-var defaultTitleKeys = {
-	info: "callout.info",
-	note: "callout.note",
-	tip: "callout.tip",
-	warning: "callout.warning",
-	danger: "callout.danger",
-	success: "callout.success"
-};
-function Callout(arg0) {
-	const { children, type = "info", title, icon = true, className, ...props } = arg0;
-	const t = useBuiltInText();
-	const style = calloutStyles[type];
-	const Icon = style.Icon;
-	const resolvedTitle = title === void 0 ? t(defaultTitleKeys[type]) : title;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, clsx.default)("clarify-callout my-6 flex gap-3 rounded-(--clarify-theme-tokens-radius-xl) border p-4 text-sm/6", style.container, className),
-		...props,
-		children: [icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
-			className: (0, clsx.default)("mt-1 size-4 flex-none", style.icon),
-			"aria-hidden": "true"
-		}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "min-w-0 flex-1 *:first:mt-0 *:last:mb-0",
-			children: [resolvedTitle ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: (0, clsx.default)("mb-1 font-semibold", style.title),
-				children: resolvedTitle
-			}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "*:first:mt-0 *:last:mb-0",
-				children
-			})]
-		})]
-	});
 }
 //#endregion
-//#region source/components/Card.tsx
-function toPascalCase(value) {
-	return value.split(/[^a-zA-Z0-9]+/).filter(Boolean).map((part) => `${part.charAt(0).toUpperCase()}${part.slice(1)}`).join("");
+//#region source/utils/href.ts
+function isExternalHref(href) {
+	return /^[a-z][a-z\d+.-]*:/i.test(href) || href.startsWith("//");
 }
-function CardIcon(arg0) {
-	const { name } = arg0;
-	if (!name) return null;
-	const Icon = lucide_react[toPascalCase(name)];
-	if (!Icon) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: "flex size-9 flex-none items-center justify-center rounded-[var(--clarify-theme-tokens-radius-lg)] bg-(--clarify-ui-accent-background) text-(--clarify-ui-accent-text) ring-1 ring-(--clarify-ui-accent-border)",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
-			className: "size-5",
-			"aria-hidden": "true"
-		})
-	});
+function hasLocalePrefix(href, config) {
+	const firstSegment = href.replace(/^\/+/, "").split("/")[0];
+	return Boolean(firstSegment && config.i18n?.locales.some((locale) => locale.code === firstSegment));
 }
-var cardGroupColumnStyles = {
-	1: "grid-cols-1",
-	2: "grid-cols-1 sm:grid-cols-2",
-	3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
-	4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
-};
-function CardGroup(arg0) {
-	const { children, cols = 2, className } = arg0;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.default)("not-prose my-10 grid gap-4", cardGroupColumnStyles[cols], className),
-		children
-	});
+function 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 Card(arg0) {
-	const { title, icon, href, children, className, ...props } = arg0;
-	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex items-start gap-4",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardIcon, { name: icon }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "min-w-0 flex-1",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-				className: "m-0 text-base font-semibold text-[var(--clarify-theme-tokens-colors-foreground)] dark:text-white",
-				children: title
-			}), children ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "mt-2 text-sm/6 text-[var(--clarify-theme-tokens-colors-muted)] dark:text-zinc-400 *:m-0",
-				children
-			}) : null]
-		})]
-	}), href ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: "absolute inset-0 rounded-[var(--clarify-theme-tokens-radius-xl)]",
-		"aria-hidden": "true"
-	}) : null] });
-	const classes = (0, clsx.default)("group relative block rounded-[var(--clarify-theme-tokens-radius-xl)] border border-[color:var(--clarify-theme-tokens-colors-border)] bg-[var(--clarify-theme-tokens-colors-surface)] p-5 shadow-sm shadow-(--clarify-ui-accent-glow) transition hover:border-(--clarify-ui-accent-border) hover:shadow-md dark:bg-zinc-900/50", className);
-	if (!href) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: classes,
-		children: content
-	});
-	if (href.startsWith("/") && !href.startsWith("//")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Link, {
-		to: href,
-		className: classes,
-		...props,
-		children: content
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-		href,
-		className: classes,
-		...props,
-		children: content
-	});
+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/components/Code.tsx
-var languageNames = {
-	js: "JavaScript",
-	ts: "TypeScript",
-	jsx: "React JSX",
-	tsx: "React TSX",
-	javascript: "JavaScript",
-	typescript: "TypeScript",
-	php: "PHP",
-	python: "Python",
-	ruby: "Ruby",
-	go: "Go",
-	bash: "Shell",
-	sh: "Shell",
-	shell: "Shell",
-	json: "JSON"
-};
-function getPanelTitle(arg0) {
-	const { title, language, fallbackTitle = "Code" } = arg0;
-	if (title) return title;
-	if (language && language in languageNames) return languageNames[language];
-	return fallbackTitle;
+//#region source/shell/ContentActions.tsx
+function resolveContentArtifactUrl(contentArtifactUrl, routePrefix = "/") {
+	return prefixHref(contentArtifactUrl, routePrefix);
 }
-function getNodeText(node) {
-	if (typeof node === "string" || typeof node === "number") return String(node);
-	if (Array.isArray(node)) return node.map(getNodeText).join("");
-	if ((0, react.isValidElement)(node)) return getNodeText(node.props.children);
-	return "";
+function getAbsoluteUrl(path) {
+	if (typeof window === "undefined") return path;
+	return new URL(path, window.location.href).href;
 }
-function ClipboardIcon(props) {
+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", {
-			strokeWidth: "0",
-			d: "M5.5 13.5v-5a2 2 0 0 1 2-2l.447-.894A2 2 0 0 1 9.737 4.5h.527a2 2 0 0 1 1.789 1.106l.447.894a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2Z"
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-			fill: "none",
-			strokeLinejoin: "round",
-			d: "M12.5 6.5a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2m5 0-.447-.894a2 2 0 0 0-1.79-1.106h-.527a2 2 0 0 0-1.789 1.106L7.5 6.5m5 0-1 1h-3l-1-1"
+		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 CopyButton(arg0) {
-	const { code } = arg0;
+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 [copyCount, setCopyCount] = (0, react.useState)(0);
-	const copied = copyCount > 0;
-	(0, react.useEffect)(() => {
-		if (copyCount === 0) return void 0;
-		const timeout = window.setTimeout(() => setCopyCount(0), 1e3);
-		return () => window.clearTimeout(timeout);
-	}, [copyCount]);
-	if (!code) return null;
+	const otherTheme = resolvedTheme === "dark" ? "light" : "dark";
 	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-[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);
-			});
-		},
-		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" }), 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-[var(--clarify-theme-tokens-colors-primary)] transition duration-300", !copied && "translate-y-1.5 opacity-0"),
-			children: t("actions.copied")
-		})]
-	});
-}
-function CodePanelHeader(arg0) {
-	const { tag, label } = arg0;
-	if (!tag && !label) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		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",
+		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: [
-			tag ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "font-mono text-[0.625rem]/6 font-semibold text-[var(--clarify-theme-tokens-colors-primary)]",
-				children: tag
-			}) : null,
-			tag && label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-0.5 w-0.5 rounded-full bg-zinc-500" }) : null,
-			label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "font-mono text-xs text-zinc-400",
-				children: label
-			}) : null
+			/* @__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" })
 		]
 	});
 }
-function CodePanel(arg0) {
-	const { children } = arg0;
-	let { tag, label, code } = arg0;
-	const child = react.Children.only(children);
-	if ((0, react.isValidElement)(child)) {
-		const props = child.props;
-		tag = props.tag ?? tag;
-		label = props.label ?? label;
-		code = props.code ?? code ?? getNodeText(props.children);
+//#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/app/SectionProvider.tsx
+function createSectionStore(sections) {
+	return (0, zustand.createStore)()((set) => ({
+		sections,
+		visibleSections: [],
+		setVisibleSections: (visibleSections) => set((state) => state.visibleSections.join() === visibleSections.join() ? {} : { visibleSections }),
+		registerHeading: ({ id, ref, offsetRem }) => set((state) => ({ sections: state.sections.map((section) => section.id === id ? {
+			...section,
+			headingRef: ref,
+			offsetRem
+		} : section) }))
+	}));
+}
+function useVisibleSections(sectionStore) {
+	const setVisibleSections = (0, zustand.useStore)(sectionStore, (state) => state.setVisibleSections);
+	const sections = (0, zustand.useStore)(sectionStore, (state) => state.sections);
+	(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 > viewportTop) newVisibleSections.push("_top");
+				if ((sections[sectionIndex + 1]?.headingRef?.current?.getBoundingClientRect().top ?? Infinity) + scrollY > viewportTop && top < viewportBottom) newVisibleSections.push(id);
+			}
+			setVisibleSections(newVisibleSections);
+		}
+		const raf = window.requestAnimationFrame(() => checkVisibleSections());
+		window.addEventListener("scroll", checkVisibleSections, { passive: true });
+		window.addEventListener("resize", checkVisibleSections);
+		return () => {
+			window.cancelAnimationFrame(raf);
+			window.removeEventListener("scroll", checkVisibleSections);
+			window.removeEventListener("resize", checkVisibleSections);
+		};
+	}, [setVisibleSections, sections]);
+}
+var SectionStoreContext = (0, react.createContext)(null);
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? react.useEffect : react.useLayoutEffect;
+function SectionProvider(arg0) {
+	const { sections, children } = arg0;
+	const [sectionStore] = (0, react.useState)(() => createSectionStore(sections));
+	useVisibleSections(sectionStore);
+	useIsomorphicLayoutEffect(() => {
+		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,
+		children
+	});
+}
+function useSectionStore(selector) {
+	const store = (0, react.useContext)(SectionStoreContext);
+	if (!store) throw new Error("[clarify] useSectionStore must be used within SectionProvider");
+	return (0, zustand.useStore)(store, selector);
+}
+//#endregion
+//#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"
+		})
+	});
+}
+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: inner
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+		className: classes,
+		...props,
+		children: inner
+	});
+}
+//#endregion
+//#region source/components/Callout.tsx
+var calloutStyles = {
+	info: {
+		container: "border-sky-500/20 bg-sky-50/50 text-sky-950 dark:border-sky-400/30 dark:bg-sky-400/5 dark:text-sky-100",
+		icon: "text-sky-600 dark:text-sky-400",
+		title: "text-sky-900 dark:text-sky-100",
+		Icon: lucide_react.Info
+	},
+	note: {
+		container: "border-zinc-500/20 bg-zinc-50 text-zinc-900 dark:border-white/10 dark:bg-white/5 dark:text-zinc-200",
+		icon: "text-zinc-500 dark:text-zinc-400",
+		title: "text-zinc-900 dark:text-white",
+		Icon: lucide_react.Info
+	},
+	tip: {
+		container: "border-emerald-500/20 bg-emerald-50/50 text-emerald-950 dark:border-emerald-400/30 dark:bg-emerald-400/5 dark:text-emerald-100",
+		icon: "text-emerald-600 dark:text-emerald-400",
+		title: "text-emerald-900 dark:text-emerald-100",
+		Icon: lucide_react.Lightbulb
+	},
+	warning: {
+		container: "border-amber-500/20 bg-amber-50/70 text-amber-950 dark:border-amber-400/30 dark:bg-amber-400/5 dark:text-amber-100",
+		icon: "text-amber-600 dark:text-amber-400",
+		title: "text-amber-900 dark:text-amber-100",
+		Icon: lucide_react.AlertTriangle
+	},
+	danger: {
+		container: "border-rose-500/20 bg-rose-50/70 text-rose-950 dark:border-rose-400/30 dark:bg-rose-400/5 dark:text-rose-100",
+		icon: "text-rose-600 dark:text-rose-400",
+		title: "text-rose-900 dark:text-rose-100",
+		Icon: lucide_react.XCircle
+	},
+	success: {
+		container: "border-emerald-500/20 bg-emerald-50/50 text-emerald-950 dark:border-emerald-400/30 dark:bg-emerald-400/5 dark:text-emerald-100",
+		icon: "text-emerald-600 dark:text-emerald-400",
+		title: "text-emerald-900 dark:text-emerald-100",
+		Icon: lucide_react.CheckCircle2
 	}
-	const copyText = code ?? getNodeText(children);
+};
+var defaultTitleKeys = {
+	info: "callout.info",
+	note: "callout.note",
+	tip: "callout.tip",
+	warning: "callout.warning",
+	danger: "callout.danger",
+	success: "callout.success"
+};
+function Callout(arg0) {
+	const { children, type = "info", title, icon = true, className, ...props } = arg0;
+	const t = useBuiltInText();
+	const style = calloutStyles[type];
+	const Icon = style.Icon;
+	const resolvedTitle = title === void 0 ? t(defaultTitleKeys[type]) : title;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "clarify-code-panel group dark:bg-white/2.5",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodePanelHeader, {
-			tag,
-			label
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "relative",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
-				className: "clarify-code-pre overflow-x-auto p-4 text-xs text-white",
+		className: (0, clsx.default)("clarify-callout my-6 flex gap-3 rounded-(--clarify-theme-tokens-radius-xl) border p-4 text-sm/6", style.container, className),
+		...props,
+		children: [icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+			className: (0, clsx.default)("mt-1 size-4 flex-none", style.icon),
+			"aria-hidden": "true"
+		}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "min-w-0 flex-1 *:first:mt-0 *:last:mb-0",
+			children: [resolvedTitle ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: (0, clsx.default)("mb-1 font-semibold", style.title),
+				children: resolvedTitle
+			}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "*:first:mt-0 *:last:mb-0",
 				children
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopyButton, { code: copyText })]
+			})]
 		})]
 	});
 }
-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", {
-		className: "clarify-code-group-header flex min-h-[calc(--spacing(12)+1px)] flex-wrap items-start gap-x-4 border-b border-zinc-700 bg-zinc-800 px-4 dark:border-zinc-800 dark:bg-transparent",
-		children: [title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-			className: "mr-auto pt-3 text-xs font-semibold text-white",
-			children: title
-		}) : 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-[var(--clarify-theme-tokens-colors-primary)] text-[var(--clarify-theme-tokens-colors-primary)]" : "border-transparent text-zinc-400 hover:text-zinc-300"),
-				children: getPanelTitle({
-					...(0, react.isValidElement)(child) ? child.props : {},
-					fallbackTitle: t("actions.code")
-				})
-			}))
-		}) : null]
+//#endregion
+//#region source/components/Card.tsx
+function CardIcon(arg0) {
+	const { name } = 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)("span", {
+		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"
+		})
 	});
 }
-function CodeGroupPanels(arg0) {
-	const { children, ...props } = arg0;
-	if (react.Children.count(children) > 1) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.TabPanels, { children: react.Children.map(children, (child) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.TabPanel, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodePanel, {
-		...props,
-		children: child
-	}) })) });
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodePanel, {
-		...props,
+var cardGroupColumnStyles = {
+	1: "grid-cols-1",
+	2: "grid-cols-1 sm:grid-cols-2",
+	3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+	4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
+};
+function CardGroup(arg0) {
+	const { children, cols = 2, className } = arg0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, clsx.default)("not-prose my-10 grid gap-4", cardGroupColumnStyles[cols], className),
 		children
 	});
 }
-function usePreventLayoutShift() {
-	const positionRef = (0, react.useRef)(null);
-	const rafRef = (0, react.useRef)(void 0);
-	(0, react.useEffect)(() => {
-		return () => {
-			if (typeof rafRef.current !== "undefined") window.cancelAnimationFrame(rafRef.current);
-		};
-	}, []);
-	return {
-		positionRef,
-		preventLayoutShift(callback) {
-			if (!positionRef.current) return;
-			const initialTop = positionRef.current.getBoundingClientRect().top;
-			callback();
-			rafRef.current = window.requestAnimationFrame(() => {
-				const newTop = positionRef.current?.getBoundingClientRect().top ?? initialTop;
-				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 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 Card(arg0) {
+	const { title, icon, href, children, className, ...props } = arg0;
+	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-start gap-4",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardIcon, { name: icon }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "min-w-0 flex-1",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+				className: "m-0 text-base font-semibold text-(--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-(--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-(--clarify-theme-tokens-radius-xl)",
+		"aria-hidden": "true"
+	}) : null] });
+	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
 	});
-}
-function Code(arg0) {
-	const { children, ...props } = arg0;
-	if ((0, react.useContext)(CodeGroupContext) && typeof children === "string") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+	if (href.startsWith("/") && !href.startsWith("//")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Link, {
+		to: href,
+		className: classes,
 		...props,
-		dangerouslySetInnerHTML: { __html: children }
+		children: content
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+		href,
+		className: classes,
 		...props,
-		children
+		children: content
 	});
 }
-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/Code.tsx
+var languageNames = {
+	js: "JavaScript",
+	ts: "TypeScript",
+	jsx: "React JSX",
+	tsx: "React TSX",
+	javascript: "JavaScript",
+	typescript: "TypeScript",
+	php: "PHP",
+	python: "Python",
+	ruby: "Ruby",
+	go: "Go",
+	bash: "Shell",
+	sh: "Shell",
+	shell: "Shell",
+	json: "JSON"
+};
+function getPanelTitle(arg0) {
+	const { title, language, fallbackTitle = "Code" } = arg0;
+	if (title) return title;
+	if (language && language in languageNames) return languageNames[language];
+	return fallbackTitle;
+}
+function getNodeText(node) {
+	if (typeof node === "string" || typeof node === "number") return String(node);
+	if (Array.isArray(node)) return node.map(getNodeText).join("");
+	if ((0, react.isValidElement)(node)) return getNodeText(node.props.children);
+	return "";
 }
-//#endregion
-//#region source/components/Feedback.tsx
-function CheckIcon(props) {
+function ClipboardIcon(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"
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			strokeWidth: "0",
+			d: "M5.5 13.5v-5a2 2 0 0 1 2-2l.447-.894A2 2 0 0 1 9.737 4.5h.527a2 2 0 0 1 1.789 1.106l.447.894a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2Z"
 		}), /* @__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"
+			d: "M12.5 6.5a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2m5 0-.447-.894a2 2 0 0 0-1.79-1.106h-.527a2 2 0 0 0-1.789 1.106L7.5 6.5m5 0-1 1h-3l-1-1"
 		})]
 	});
 }
-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,
-		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")
-				})
-			]
-		})]
-	});
-});
-var FeedbackThanks = (0, react.forwardRef)(function FeedbackThanks(arg0, ref) {
-	const { className, ...props } = arg0;
+function CopyButton(arg0) {
+	const { code } = arg0;
 	const t = useBuiltInText();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		...props,
-		ref,
-		className: (0, clsx.default)(className, "clarify-feedback-thanks absolute inset-0 flex justify-center md:justify-start"),
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex items-center gap-3 rounded-full bg-(--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" })
+	const [copyCount, setCopyCount] = (0, react.useState)(0);
+	const copied = copyCount > 0;
+	(0, react.useEffect)(() => {
+		if (copyCount === 0) return void 0;
+		const timeout = window.setTimeout(() => setCopyCount(0), 1e3);
+		return () => window.clearTimeout(timeout);
+	}, [copyCount]);
+	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-[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: () => {
+			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" }), 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-(--clarify-theme-tokens-colors-primary) transition duration-300", !copied && "translate-y-1.5 opacity-0"),
+			children: t("actions.copied")
 		})]
 	});
 }
-//#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,
+function CodePanelHeader(arg0) {
+	const { tag, label } = arg0;
+	if (!tag && !label) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		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: [
-			/* @__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}`))
+			tag ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				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: "text-xs text-zinc-400",
+				children: label
 			}) : 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-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" })
-			})]
-		})
-	});
-}
-//#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 no-underline transition",
-		children: resolveLocalizedText$1(link.label, locale, config.i18n?.defaultLocale)
+function CodePanel(arg0) {
+	const { children } = arg0;
+	let { tag, label, code } = arg0;
+	const child = react.Children.only(children);
+	if ((0, react.isValidElement)(child)) {
+		const props = child.props;
+		tag = props.tag ?? tag;
+		label = props.label ?? label;
+		code = props.code ?? code ?? getNodeText(props.children);
+	}
+	const copyText = code ?? getNodeText(children);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "clarify-code-panel group dark:bg-white/2.5",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodePanelHeader, {
+			tag,
+			label
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "relative",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+				className: "clarify-code-pre overflow-x-auto p-4 text-xs text-white",
+				children
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopyButton, { code: copyText })]
+		})]
 	});
 }
-function SocialLink(arg0) {
-	const { name, href } = arg0;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-		href,
-		target: "_blank",
-		rel: "noreferrer",
-		className: "clarify-footer-social capitalize no-underline transition",
-		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-(--clarify-theme-layout-max-width) flex-col items-end gap-4 border-t border-(--clarify-theme-tokens-colors-border) px-4 py-8 sm:px-6 lg:mt-24 lg:px-5 dark:border-white/10", hasCustomFooter && "sm:flex-row sm:items-center sm:justify-between"),
-		children: [hasCustomFooter ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "clarify-footer-content flex flex-col gap-3 text-right sm:text-left",
-			children: [copyright ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: "clarify-footer-copyright m-0",
-				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, {})
-		})]
+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", {
+		className: "clarify-code-group-header flex min-h-[calc(--spacing(12)+1px)] flex-wrap items-start gap-x-4 border-b border-zinc-700 bg-zinc-800 px-4 dark:border-zinc-800 dark:bg-transparent",
+		children: [title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+			className: "mr-auto pt-3 text-xs font-semibold text-white",
+			children: title
+		}) : 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-(--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]
 	});
 }
-//#endregion
-//#region source/utils/path.ts
-function normalizeRoutePath(path) {
-	const [pathname, suffix = ""] = path.split(/([?#].*)/, 2);
-	return `${pathname.replace(/^\/+/, "/").replace(/\/+$/, "") || "/"}${suffix}`;
+function CodeGroupPanels(arg0) {
+	const { children, ...props } = arg0;
+	if (react.Children.count(children) > 1) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.TabPanels, { children: react.Children.map(children, (child) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.TabPanel, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodePanel, {
+		...props,
+		children: child
+	}) })) });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodePanel, {
+		...props,
+		children
+	});
 }
-function isSameRoutePath(a, b) {
-	if (!a || !b) return false;
-	return normalizeRoutePath(a) === normalizeRoutePath(b);
+function usePreventLayoutShift() {
+	const positionRef = (0, react.useRef)(null);
+	const rafRef = (0, react.useRef)(void 0);
+	(0, react.useEffect)(() => {
+		return () => {
+			if (typeof rafRef.current !== "undefined") window.cancelAnimationFrame(rafRef.current);
+		};
+	}, []);
+	return {
+		positionRef,
+		preventLayoutShift(callback) {
+			if (!positionRef.current) return;
+			const initialTop = positionRef.current.getBoundingClientRect().top;
+			callback();
+			rafRef.current = window.requestAnimationFrame(() => {
+				const newTop = positionRef.current?.getBoundingClientRect().top ?? initialTop;
+				window.scrollBy(0, newTop - initialTop);
+			});
+		}
+	};
 }
-//#endregion
-//#region source/components/PageNavigation.tsx
-function flattenNavigation(nodes) {
-	return nodes.flatMap((node) => node.children?.length ? flattenNavigation(node.children) : [node]);
+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]));
+		}
+	};
 }
-function PageNavigation(arg0) {
-	const { navigation, currentRoute } = arg0;
+var CodeGroupContext = (0, react.createContext)(false);
+function CodeGroup(arg0) {
+	const { children, title, ...props } = arg0;
 	const t = useBuiltInText();
-	if (!currentRoute) return null;
-	const pageRoutes = flattenNavigation(navigation);
-	const currentIndex = pageRoutes.findIndex((route) => isSameRoutePath(route.path, currentRoute.path));
-	if (currentIndex === -1) return null;
-	const previous = pageRoutes[currentIndex - 1];
-	const next = pageRoutes[currentIndex + 1];
-	if (!previous && !next) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("nav", {
-		className: "clarify-page-navigation mt-6 grid gap-3 @3xl:grid-cols-2",
-		"aria-label": t("navigation.previousNext"),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageNavigationLink, {
-			direction: "previous",
-			route: previous
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageNavigationLink, {
-			direction: "next",
-			route: next
-		})]
+	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
 	});
-}
-function PageNavigationLink(arg0) {
-	const { direction, route } = arg0;
-	const t = useBuiltInText();
-	if (!route) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "hidden @3xl:block" });
-	const isNext = direction === "next";
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_router_dom.Link, {
-		to: normalizeRoutePath(route.path),
-		className: (0, clsx.default)("group flex min-w-0 items-center gap-3 rounded-lg border border-(--clarify-theme-tokens-colors-border) px-4 py-3 no-underline transition hover:border-(--clarify-theme-tokens-colors-primary) hover:bg-(--clarify-theme-tokens-colors-surface) dark:border-white/10 dark:hover:border-(--clarify-theme-tokens-colors-primary) dark:hover:bg-white/2.5", isNext && "@3xl:justify-end @3xl:text-right"),
-		children: [
-			!isNext ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeft, { className: "h-3.5 w-3.5 shrink-0 text-(--clarify-theme-tokens-colors-muted) transition group-hover:text-(--clarify-theme-tokens-colors-primary)" }) : null,
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-				className: "min-w-0 flex-1",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "block text-[0.6875rem] font-medium uppercase tracking-wide text-(--clarify-theme-tokens-colors-muted)",
-					children: isNext ? t("navigation.next") : t("navigation.previous")
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "mt-0.5 block truncate text-[0.8125rem] font-semibold text-(--clarify-theme-tokens-colors-foreground) dark:text-white",
-					children: route.title
-				})]
-			}),
-			isNext ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, { className: "h-3.5 w-3.5 shrink-0 text-(--clarify-theme-tokens-colors-muted) transition group-hover:text-(--clarify-theme-tokens-colors-primary)" }) : null
-		]
+	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]
+			})
+		})
 	});
 }
-//#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)
+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 }
 	});
-	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.jsx)("code", {
+		...props,
+		children
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-		src: lightLogo,
-		alt: "",
-		className: (0, clsx.default)("clarify-logo clarify-logo-light", className, "dark:hidden")
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-		src: darkLogo,
-		alt: "",
-		className: (0, clsx.default)("clarify-logo clarify-logo-dark", className, "hidden dark:block")
-	})] });
-}
-//#endregion
-//#region source/components/ThemeProvider.tsx
-var ThemeContext = (0, react.createContext)(null);
-var storageKey = "clarify:theme";
-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,
+function Pre(arg0) {
+	const { children, ...props } = arg0;
+	if ((0, react.useContext)(CodeGroupContext)) return children;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodeGroup, {
+		...props,
 		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/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/ThemeToggle.tsx
-function SunIcon(props) {
+//#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", { 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", {
+		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",
-			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"
+			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 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 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
 	});
 }
-function ThemeToggle() {
-	const { resolvedTheme, setTheme } = useTheme();
+var FeedbackForm = (0, react.forwardRef)(function FeedbackForm(arg0, ref) {
+	const { onSubmit, className, ...props } = arg0;
 	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" })
-		]
+	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: 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")
+				})
+			]
+		})]
 	});
-}
-//#endregion
-//#region source/components/index.tsx
-function ArrowIcon(props) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-		viewBox: "0 0 20 20",
-		fill: "none",
-		"aria-hidden": "true",
+});
+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: /* @__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"
+		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")]
 		})
 	});
-}
-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: inner
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-		className: classes,
-		...props,
-		children: inner
+});
+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"
@@ -1214,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-bold", 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-(--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"
-		})]
-	});
-}
-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/components/Heading.tsx
 function AnchorIcon(props) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 		viewBox: "0 0 20 20",
@@ -1259,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
 		]
@@ -1304,218 +1319,125 @@ function Heading(arg0) {
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Eyebrow, {
 		tag,
-		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),
-		...props,
-		children: anchor ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Anchor, {
-			id: props.id,
-			inView,
-			children
-		}) : 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",
-		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 })]
-		})
-	});
-}
-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/shell/ContentActions.tsx
-function resolveContentArtifactUrl(contentArtifactUrl, routePrefix = "/") {
-	if (!routePrefix || routePrefix === "/") return contentArtifactUrl;
-	return `/${routePrefix.replace(/^\/+|\/+$/g, "")}${contentArtifactUrl}`;
-}
-function getAbsoluteUrl(path) {
-	if (typeof window === "undefined") return path;
-	return new URL(path, window.location.href).href;
-}
-async function copyText(text) {
-	await navigator.clipboard.writeText(text);
-}
-function ContentActions(arg0) {
-	const { hasTabs = false, route, routePrefix } = arg0;
-	const t = useBuiltInText();
-	const [copied, setCopied] = (0, react.useState)("idle");
-	if (!route?.contentArtifactUrl) return null;
-	const contentArtifactUrl = resolveContentArtifactUrl(route.contentArtifactUrl, routePrefix);
-	const isOpenApi = route.kind === "openapi";
-	const replacements = { contentType: isOpenApi ? "OpenAPI" : "Markdown" };
-	const viewLabel = isOpenApi ? t("contentActions.viewOpenApi") : t("contentActions.viewMarkdown");
-	const viewDescription = isOpenApi ? t("contentActions.viewOpenApiDescription") : t("contentActions.viewMarkdownDescription");
-	function markCopied(state) {
-		setCopied(state);
-		window.setTimeout(() => setCopied("idle"), 1600);
-	}
-	async function handleCopyContent() {
-		await copyText(await (await fetch(contentArtifactUrl)).text());
-		markCopied("content");
-	}
-	async function handleCopyLink() {
-		await copyText(getAbsoluteUrl(contentArtifactUrl));
-		markCopied("link");
-	}
-	const actions = [{
-		key: "content",
-		label: t("contentActions.copyContent"),
-		description: t("contentActions.copyContentDescription", replacements),
-		icon: lucide_react.Copy,
-		run: handleCopyContent
-	}, {
-		key: "link",
-		label: t("contentActions.copyLink", replacements),
-		description: t("contentActions.copyLinkDescription", replacements),
-		icon: lucide_react.Link2,
-		run: handleCopyLink
-	}];
-	const primaryAction = actions[0];
-	const PrimaryIcon = copied === primaryAction.key ? lucide_react.Check : primaryAction.icon;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: `clarify-content-actions sticky z-20 flex justify-end py-4 ${hasTabs ? "top-16 lg:top-30" : "top-16"}`,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.Menu, {
-			as: "div",
-			className: "clarify-content-actions-menu relative inline-flex text-sm font-medium",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "clarify-content-actions-group inline-flex overflow-hidden rounded-full border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface)/90 shadow-sm shadow-zinc-900/5 backdrop-blur dark:border-white/10 dark:bg-zinc-900/80 dark:shadow-none",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-					type: "button",
-					onClick: primaryAction.run,
-					className: "clarify-content-actions-primary clarify-ui-control inline-flex h-8 items-center gap-1.5 px-3 transition",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PrimaryIcon, { className: "h-3.5 w-3.5" }), copied === primaryAction.key ? t("actions.copied") : primaryAction.label]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuButton, {
-					className: "clarify-content-actions-trigger clarify-ui-control inline-flex h-8 w-8 items-center justify-center border-l border-(--clarify-theme-tokens-colors-border) transition dark:border-white/10",
-					"aria-label": t("contentActions.copyOptions"),
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: "h-3.5 w-3.5" })
-				})]
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.MenuItems, {
-				anchor: "bottom end",
-				className: "clarify-content-actions-list clarify-ui-menu z-30 mt-2 w-(--clarify-ui-action-menu-width) origin-top-right rounded-(--clarify-theme-tokens-radius-xl) border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) p-1.5 shadow-xl shadow-zinc-900/5 transition [--anchor-gap:--spacing(2)] focus:outline-none data-closed:scale-95 data-closed:opacity-0 dark:border-white/10 dark:bg-zinc-900 dark:shadow-none",
-				children: [
-					actions.slice(0, 1).map((action) => {
-						const Icon = action.icon;
-						const isCopied = copied === action.key;
-						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-							type: "button",
-							onClick: action.run,
-							className: "clarify-content-actions-item clarify-ui-menu-item group flex w-full items-center gap-2 rounded-(--clarify-theme-tokens-radius-lg) px-1.5 py-1.5 text-left transition",
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "clarify-ui-menu-icon flex shrink-0 rounded-(--clarify-theme-tokens-radius-md) border border-(--clarify-theme-tokens-colors-border) p-1.5 dark:border-white/10",
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "h-4 w-4" })
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-									className: "flex min-w-0 flex-1 flex-col px-1",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "clarify-ui-menu-title",
-										children: isCopied ? t("contentActions.copiedContent") : action.label
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "clarify-ui-menu-description truncate",
-										children: action.description
-									})]
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: `h-3.5 w-3.5 shrink-0 text-(--clarify-theme-tokens-colors-primary) transition ${isCopied ? "opacity-100" : "opacity-0"}` })
-							]
-						}) }, action.key);
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
-						href: contentArtifactUrl,
-						target: "_blank",
-						rel: "noreferrer",
-						className: "clarify-content-actions-item clarify-ui-menu-item group flex w-full items-center gap-2 rounded-(--clarify-theme-tokens-radius-lg) px-1.5 py-1.5 text-left no-underline transition",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "clarify-ui-menu-icon flex shrink-0 rounded-(--clarify-theme-tokens-radius-md) border border-(--clarify-theme-tokens-colors-border) p-1.5 dark:border-white/10",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.FileText, { className: "h-4 w-4" })
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-								className: "flex min-w-0 flex-1 flex-col px-1",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-									className: "clarify-ui-menu-title flex items-center gap-1",
-									children: [viewLabel, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ExternalLink, { className: "clarify-ui-menu-icon h-3 w-3" })]
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "clarify-ui-menu-description truncate",
-									children: viewDescription
-								})]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "h-3.5 w-3.5 shrink-0 text-(--clarify-theme-tokens-colors-primary) opacity-0" })
-						]
-					}) }),
-					actions.slice(1).map((action) => {
-						const Icon = action.icon;
-						const isCopied = copied === action.key;
-						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-							type: "button",
-							onClick: action.run,
-							className: "clarify-content-actions-item clarify-ui-menu-item group flex w-full items-center gap-2 rounded-(--clarify-theme-tokens-radius-lg) px-1.5 py-1.5 text-left transition",
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "clarify-ui-menu-icon flex shrink-0 rounded-(--clarify-theme-tokens-radius-md) border border-(--clarify-theme-tokens-colors-border) p-1.5 dark:border-white/10",
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "h-4 w-4" })
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-									className: "flex min-w-0 flex-1 flex-col px-1",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "clarify-ui-menu-title",
-										children: isCopied ? t("contentActions.copiedLink") : action.label
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "clarify-ui-menu-description truncate",
-										children: action.description
-									})]
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: `h-3.5 w-3.5 shrink-0 text-(--clarify-theme-tokens-colors-primary) transition ${isCopied ? "opacity-100" : "opacity-0"}` })
-							]
-						}) }, action.key);
-					})
-				]
+		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),
+		...props,
+		children: anchor ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Anchor, {
+			id: props.id,
+			inView,
+			children
+		}) : children
+	})] });
+}
+//#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: "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" })
 			})]
 		})
 	});
 }
 //#endregion
-//#region source/shell/icons.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/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/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);
@@ -1551,7 +1473,7 @@ var sectionBadgeColorStyles = {
 function SectionBadge(arg0) {
 	const { children } = arg0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: (0, clsx.default)("clarify-navigation-section-badge inline-flex shrink-0 justify-end font-mono font-semibold uppercase tracking-wide", sectionBadgeColorStyles[children.toUpperCase()] ?? "clarify-ui-menu-description"),
+		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
 	});
 }
@@ -1561,7 +1483,7 @@ 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(() => {
@@ -1584,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
 				})
 			]
@@ -1607,13 +1529,27 @@ function VisibleSectionHighlight(arg0) {
 	const height = isPresent ? Math.max(1, visibleSections.length) * itemHeight : 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: "clarify-navigation-section-highlight absolute inset-x-0 top-0 will-change-transform",
 		style: {
 			borderRadius: "var(--clarify-theme-tokens-radius-sm)",
@@ -1627,14 +1563,26 @@ function ActivePageMarker(arg0) {
 	const itemHeight = remToPx(2);
 	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-(--clarify-theme-tokens-colors-primary)",
-		initial: { opacity: 0 },
+		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 }
 	});
 }
@@ -1645,8 +1593,7 @@ function NavigationGroup(arg0) {
 	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",
+		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,
@@ -1662,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-(--clarify-theme-tokens-colors-border) 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, {
@@ -1678,8 +1622,7 @@ function NavigationGroup(arg0) {
 					className: "border-l border-transparent",
 					children: group.links.map((link) => {
 						const active = isSameRoutePath(link.href, pathname);
-						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.motion.li, {
-							layout: "position",
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
 							className: "relative",
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavLink, {
 								href: link.href,
@@ -1687,7 +1630,6 @@ function NavigationGroup(arg0) {
 								active,
 								children: link.title
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.AnimatePresence, {
-								mode: "popLayout",
 								initial: false,
 								children: active && sections.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.ul, {
 									role: "list",
@@ -1754,11 +1696,11 @@ function XIcon(props) {
 	});
 }
 var IsInsideMobileNavigationContext = (0, react.createContext)(false);
-function hasPath$2(nodes, pathname) {
-	return nodes.some((node) => isSameRoutePath(node.path, pathname) || hasPath$2(node.children ?? [], pathname));
+function 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$2(tab.children, pathname);
+	return isSameRoutePath(tab.path, pathname) || hasPath$1(tab.children, pathname);
 }
 function MobileTabsSelect(arg0) {
 	const { tabs } = arg0;
@@ -1777,7 +1719,7 @@ function MobileTabsSelect(arg0) {
 					name: activeTab.icon,
 					className: "h-4 w-4 shrink-0 text-(--clarify-theme-tokens-colors-primary)"
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "truncate tracking-[-0.01em]",
+					className: "truncate",
 					children: activeTab.title
 				})]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
@@ -2205,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;
@@ -2331,11 +2292,11 @@ function MobileNavbarMenu(arg0) {
 		})]
 	});
 }
-function hasPath$1(nodes, pathname) {
-	return nodes.some((node) => isSameRoutePath(node.path, pathname) || hasPath$1(node.children ?? [], pathname));
+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$1(tab.children, pathname);
+	return isSameRoutePath(tab.path, pathname) || hasPath(tab.children, pathname);
 }
 function ProductTabs(arg0) {
 	const { tabs } = arg0;
@@ -2352,7 +2313,7 @@ function ProductTabs(arg0) {
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_router_dom.Link, {
 					to: tab.path,
 					"aria-current": active ? "page" : void 0,
-					className: (0, clsx.default)("clarify-product-tab clarify-ui-tab relative inline-flex shrink-0 items-center gap-2 px-0 transition", active && "clarify-ui-tab-active"),
+					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,
@@ -2363,9 +2324,9 @@ function ProductTabs(arg0) {
 							layoutId: "clarify-product-tab-indicator",
 							className: "absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-(--clarify-theme-tokens-colors-foreground) dark:bg-white",
 							transition: {
-								type: "spring",
-								stiffness: 420,
-								damping: 36
+								type: "tween",
+								duration: .16,
+								ease: "easeOut"
 							}
 						}) : null
 					]
@@ -2463,217 +2424,6 @@ var Header = (0, react.forwardRef)(function Header(arg0, ref) {
 	});
 });
 //#endregion
-//#region source/app/AppShell.tsx
-function routeForPath(routes, pathname) {
-	return routes.find((route) => isSameRoutePath(route.path, pathname));
-}
-function sectionsForRoute(route) {
-	return route?.sections?.map((section) => ({
-		id: section.id,
-		title: section.title,
-		badge: section.badge,
-		tags: section.tags
-	})) ?? [];
-}
-function resolveRouteComponent(route) {
-	if (route.lazy) return (0, react.lazy)(route.component);
-	return route.component;
-}
-function scrollToHash(hash) {
-	if (!hash) return;
-	const targetId = decodeURIComponent(hash.slice(1));
-	window.requestAnimationFrame(() => {
-		document.getElementById(targetId)?.scrollIntoView();
-		window.requestAnimationFrame(() => {
-			window.dispatchEvent(new Event("scroll"));
-		});
-	});
-}
-function localeForPath(config, pathname, route) {
-	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 isTabbedNavigation(navigation) {
-	return !Array.isArray(navigation) && "tabs" in navigation;
-}
-function hasPath(nodes, pathname) {
-	return nodes.some((node) => isSameRoutePath(node.path, pathname) || hasPath(node.children ?? [], pathname));
-}
-function navigationFromTabs(navigation, pathname) {
-	return {
-		items: navigation.tabs.find((tab) => isSameRoutePath(tab.path, pathname) || hasPath(tab.children, pathname))?.children ?? navigation.tabs[0]?.children ?? [],
-		tabs: navigation.tabs
-	};
-}
-function navigationForLocale(navigation, locale, pathname) {
-	if (Array.isArray(navigation)) return { items: navigation };
-	if (isTabbedNavigation(navigation)) return navigationFromTabs(navigation, pathname);
-	if (!locale) return { items: [] };
-	const localizedNavigation = navigation[locale];
-	if (!localizedNavigation) return { items: [] };
-	return Array.isArray(localizedNavigation) ? { items: localizedNavigation } : navigationFromTabs(localizedNavigation, pathname);
-}
-function themeStyle(config) {
-	const { colors, radius } = config.theme.tokens;
-	const { layout } = config.theme;
-	return {
-		"--clarify-theme-tokens-colors-primary": colors.primary,
-		"--clarify-theme-tokens-colors-accent": colors.accent,
-		"--clarify-theme-tokens-colors-background": colors.background,
-		"--clarify-theme-tokens-colors-foreground": colors.foreground,
-		"--clarify-theme-tokens-colors-surface": colors.surface,
-		"--clarify-theme-tokens-colors-muted": colors.muted,
-		"--clarify-theme-tokens-colors-border": colors.border,
-		"--clarify-theme-tokens-colors-code-background": colors.codeBackground,
-		"--clarify-theme-tokens-radius-sm": radius.sm,
-		"--clarify-theme-tokens-radius-md": radius.md,
-		"--clarify-theme-tokens-radius-lg": radius.lg,
-		"--clarify-theme-tokens-radius-xl": radius.xl,
-		"--clarify-theme-layout-max-width": layout.maxWidth
-	};
-}
-function pageTitle(config, route) {
-	const routeTitle = route?.title?.trim();
-	if (!routeTitle || routeTitle === config.title) return config.title;
-	return `${routeTitle} - ${config.title}`;
-}
-function setNamedMeta(name, content) {
-	const existing = document.head.querySelector(`meta[name="${name}"]`);
-	if (!content) {
-		existing?.remove();
-		return;
-	}
-	const meta = existing ?? document.createElement("meta");
-	meta.name = name;
-	meta.content = content;
-	if (!existing) document.head.appendChild(meta);
-}
-function applyDocumentMetadata(config, route) {
-	document.title = pageTitle(config, route);
-	setNamedMeta("description", route?.description ?? config.description);
-	setNamedMeta("keywords", route?.keywords?.join(", "));
-}
-function applyRootThemeVariables(themeVariables) {
-	const rootStyle = document.documentElement.style;
-	for (const [property, value] of Object.entries(themeVariables)) rootStyle.setProperty(property, value);
-	return () => {
-		for (const property of Object.keys(themeVariables)) rootStyle.removeProperty(property);
-	};
-}
-function AppShell(arg0) {
-	const { config, routes, navigation } = arg0;
-	const location = (0, react_router_dom.useLocation)();
-	const pathname = normalizeRoutePath(location.pathname);
-	const currentRoute = routeForPath(routes, pathname);
-	const currentLocale = localeForPath(config, pathname, currentRoute);
-	const currentLocaleConfig = config.i18n?.locales.find((locale) => locale.code === currentLocale);
-	const currentNavigation = navigationForLocale(navigation, currentLocale, pathname);
-	const sections = sectionsForRoute(currentRoute);
-	const hasTabs = Boolean(currentNavigation.tabs?.length);
-	const themeVariables = themeStyle(config);
-	const renderRoutes = (0, react.useMemo)(() => routes.map((route) => ({
-		...route,
-		component: resolveRouteComponent(route)
-	})), [routes]);
-	(0, react.useEffect)(() => applyRootThemeVariables(themeVariables), [themeVariables]);
-	(0, react.useEffect)(() => {
-		if (location.hash) {
-			scrollToHash(location.hash);
-			return;
-		}
-		window.scrollTo({
-			top: 0,
-			left: 0
-		});
-		window.requestAnimationFrame(() => {
-			window.dispatchEvent(new Event("scroll"));
-		});
-	}, [location.hash, location.pathname]);
-	(0, react.useEffect)(() => {
-		if (!currentLocale) return;
-		document.documentElement.lang = currentLocale;
-		if (currentLocaleConfig?.dir) document.documentElement.dir = currentLocaleConfig.dir;
-		else document.documentElement.removeAttribute("dir");
-	}, [currentLocale, currentLocaleConfig?.dir]);
-	(0, react.useEffect)(() => {
-		applyDocumentMetadata(config, currentRoute);
-	}, [config, currentRoute]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClarifyLocaleContext.Provider, {
-		value: currentLocale,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionProvider, {
-			sections,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "clarify-app h-full min-h-screen bg-(--clarify-theme-tokens-colors-background) text-(--clarify-theme-tokens-colors-foreground) dark:bg-zinc-950 dark:text-white",
-				"data-theme-preset": config.theme.preset,
-				style: themeVariables,
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Header, {
-						config,
-						navigation: currentNavigation.items,
-						tabs: currentNavigation.tabs,
-						routes,
-						currentLocale,
-						currentRoute
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "clarify-layout mx-auto grid w-full max-w-(--clarify-theme-layout-max-width) grid-cols-1 lg:grid-cols-[18rem_minmax(0,1fr)] xl:grid-cols-[20rem_minmax(0,1fr)]",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.aside, {
-							layoutScroll: true,
-							className: (0, clsx.default)("clarify-sidebar hidden lg:sticky lg:z-30 lg:block lg:h-[calc(100vh-3.5rem)] lg:self-start lg:overflow-y-auto lg:bg-(--clarify-theme-tokens-colors-background) lg:px-5 lg:pb-8 xl:px-6 lg:dark:bg-zinc-950", hasTabs ? "lg:top-28 lg:h-[calc(100vh-7rem)] lg:pt-6" : "lg:top-14 lg:pt-6"),
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Navigation, { navigation: currentNavigation.items })
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: (0, clsx.default)("clarify-content @container relative flex min-h-screen min-w-0 flex-col px-4 sm:px-6 lg:px-8 xl:px-10", hasTabs ? "pt-14 lg:pt-28" : "pt-14"),
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContentActions, {
-									hasTabs,
-									route: currentRoute,
-									routePrefix: config.routePrefix
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("main", {
-									className: "clarify-main min-w-0 flex-auto",
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, {
-										fallback: null,
-										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Routes, { children: renderRoutes.map((route) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Route, {
-											path: route.path,
-											element: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(route.component, {})
-										}, route.path)) })
-									})
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageNavigation, {
-									navigation: currentNavigation.items,
-									currentRoute
-								})
-							]
-						})]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageFooter, {})
-				]
-			})
-		})
-	});
-}
-//#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;
-	}
-});
 Object.defineProperty(exports, "Button", {
 	enumerable: true,
 	get: function() {
@@ -2704,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() {
@@ -2716,10 +2472,16 @@ Object.defineProperty(exports, "CodeGroup", {
 		return CodeGroup;
 	}
 });
-Object.defineProperty(exports, "DocShell", {
+Object.defineProperty(exports, "Collapse", {
 	enumerable: true,
 	get: function() {
-		return DocShell;
+		return Collapse;
+	}
+});
+Object.defineProperty(exports, "ContentActions", {
+	enumerable: true,
+	get: function() {
+		return ContentActions;
 	}
 });
 Object.defineProperty(exports, "Feedback", {
@@ -2734,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() {
@@ -2752,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", {
@@ -2800,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 __exportAll;
+		return isExternalHref;
 	}
 });
-Object.defineProperty(exports, "__toESM", {
+Object.defineProperty(exports, "isSameRoutePath", {
 	enumerable: true,
 	get: function() {
-		return __toESM;
+		return isSameRoutePath;
+	}
+});
+Object.defineProperty(exports, "localizeHref", {
+	enumerable: true,
+	get: function() {
+		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", {
@@ -2818,6 +2610,12 @@ Object.defineProperty(exports, "remToPx", {
 		return remToPx;
 	}
 });
+Object.defineProperty(exports, "safeDecodeURIComponent", {
+	enumerable: true,
+	get: function() {
+		return safeDecodeURIComponent;
+	}
+});
 Object.defineProperty(exports, "useBuiltInText", {
 	enumerable: true,
 	get: function() {
@@ -2849,4 +2647,4 @@ Object.defineProperty(exports, "useTheme", {
 	}
 });
 
-//# sourceMappingURL=AppShell-CZw1MrPG.cjs.map
+//# sourceMappingURL=shell-_MyLsMUI.cjs.map