@clarify-labs/renderer 0.10.1 → 0.10.3

package/output/{PageActions-BjB6PYmL.cjs → PageActions-Dg1l9KB1.cjs}

@@ -1,5 +1,5 @@
 const require_rolldown_runtime = require("./rolldown-runtime-DakpK96I.cjs");
-const require_i18n = require("./i18n-b4iTLeia.cjs");
+const require_i18n = require("./i18n-C-fReCj-.cjs");
 let clsx = require("clsx");
 clsx = require_rolldown_runtime.__toESM(clsx, 1);
 let react = require("react");
@@ -71,27 +71,46 @@ function ContentActions(arg0) {
 	const { route, routePrefix } = arg0;
 	const t = require_i18n.useBuiltInText();
 	const [copied, setCopied] = (0, react.useState)("idle");
+	const [copyPhase, setCopyPhase] = (0, react.useState)("idle");
+	(0, react.useEffect)(() => {
+		if (copyPhase !== "copied" && copyPhase !== "failed") return void 0;
+		const timeout = setTimeout(() => {
+			setCopied("idle");
+			setCopyPhase("idle");
+		}, 1600);
+		return () => clearTimeout(timeout);
+	}, [copyPhase]);
 	if (!route?.contentArtifactUrl && !route?.sourceEditUrl) return null;
 	const contentArtifactUrl = route.contentArtifactUrl ? resolveContentArtifactUrl(route.contentArtifactUrl, routePrefix) : void 0;
 	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) {
+	async function runCopy(state, getText) {
 		setCopied(state);
-		setTimeout(() => setCopied("idle"), 1600);
+		setCopyPhase("copying");
+		try {
+			const text = await getText();
+			setCopyPhase(await copyTextToClipboard(text) ? "copied" : "failed");
+		} catch {
+			setCopyPhase("failed");
+		}
 	}
 	async function handleCopyContent() {
 		if (!contentArtifactUrl) return;
-		if (await copyTextToClipboard(await (await fetch(contentArtifactUrl)).text())) markCopied("content");
+		await runCopy("content", async () => {
+			const response = await fetch(contentArtifactUrl);
+			if (!response.ok) throw new Error(`Failed to fetch content: ${response.status}`);
+			return response.text();
+		});
 	}
 	const llmsArtifactUrl = resolveContentArtifactUrl("/llms.txt", routePrefix);
 	async function handleCopyLink() {
 		if (!contentArtifactUrl) return;
-		if (await copyTextToClipboard(getAbsoluteUrl(contentArtifactUrl))) markCopied("link");
+		await runCopy("link", () => getAbsoluteUrl(contentArtifactUrl));
 	}
 	async function handleCopyLlms() {
-		if (await copyTextToClipboard(getAbsoluteUrl(llmsArtifactUrl))) markCopied("llms");
+		await runCopy("llms", () => getAbsoluteUrl(llmsArtifactUrl));
 	}
 	const actions = contentArtifactUrl ? [{
 		key: "content",
@@ -117,163 +136,176 @@ function ContentActions(arg0) {
 		copiedLabel: t("contentActions.copiedLlms")
 	};
 	const primaryAction = actions[0];
-	const PrimaryIcon = primaryAction && copied === primaryAction.key ? lucide_react.Check : primaryAction?.icon ?? lucide_react.PencilLine;
+	const primaryPhase = primaryAction && copied === primaryAction.key ? copyPhase : "idle";
+	const PrimaryIcon = primaryPhase === "copying" ? lucide_react.LoaderCircle : primaryPhase === "copied" ? lucide_react.Check : primaryPhase === "failed" ? lucide_react.X : primaryAction?.icon ?? lucide_react.PencilLine;
+	const feedbackAction = copied === "content" ? actions[0] : copied === "link" ? actions[1] : copied === "llms" ? llmsAction : void 0;
+	const feedbackLabel = copyPhase === "copying" ? t("actions.copying") : copyPhase === "failed" ? t("actions.copyFailed") : feedbackAction?.copiedLabel;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "clarify-content-actions not-prose flex shrink-0 justify-start sm:justify-end",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.Menu, {
 			as: "div",
 			className: "clarify-content-actions-menu relative inline-flex min-w-0 text-sm font-medium",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "clarify-content-actions-group inline-flex min-w-0 overflow-hidden rounded-full border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) shadow-sm shadow-zinc-900/5",
-				children: [primaryAction ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-					type: "button",
-					onClick: primaryAction.run,
-					className: "clarify-content-actions-primary clarify-ui-control inline-flex h-8 min-w-0 items-center gap-1.5 px-2.5 transition sm:px-3",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PrimaryIcon, { className: "h-3.5 w-3.5 shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "truncate",
-						children: copied === primaryAction.key ? t("actions.copied") : primaryAction.label
-					})]
-				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
-					href: route.sourceEditUrl,
-					target: "_blank",
-					rel: "noreferrer",
-					className: "clarify-content-actions-primary clarify-ui-control inline-flex h-8 min-w-0 items-center gap-1.5 px-2.5 no-underline transition sm:px-3",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PrimaryIcon, { className: "h-3.5 w-3.5 shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "truncate",
-						children: t("contentActions.editPage")
-					})]
-				}), /* @__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",
-					"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, {
-				modal: false,
-				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",
-				children: [
-					route.sourceEditUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "clarify-content-actions-group inline-flex min-w-0 items-center gap-1",
+					children: [primaryAction ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						onClick: primaryAction.run,
+						disabled: primaryPhase === "copying",
+						"aria-live": "polite",
+						className: "clarify-content-actions-primary clarify-ui-control inline-flex h-9 min-w-0 items-center gap-2 rounded-md border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) px-3 shadow-xs shadow-zinc-900/5 transition",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PrimaryIcon, { className: `h-4 w-4 shrink-0 ${primaryPhase === "copying" ? "animate-spin" : ""}` }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "truncate",
+							children: primaryPhase === "idle" ? primaryAction.label : feedbackLabel
+						})]
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
 						href: route.sourceEditUrl,
 						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",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.PencilLine, { 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: [t("contentActions.editPage"), /* @__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: t("contentActions.editPageDescription")
-								})]
-							}),
-							/* @__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" })
-						]
-					}) }) : null,
-					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",
+						className: "clarify-content-actions-primary clarify-ui-control inline-flex h-9 min-w-0 items-center gap-2 rounded-md border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) px-3 no-underline shadow-xs shadow-zinc-900/5 transition",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PrimaryIcon, { className: "h-4 w-4 shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "truncate",
+							children: t("contentActions.editPage")
+						})]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuButton, {
+						className: "clarify-content-actions-trigger clarify-ui-control inline-flex size-9 items-center justify-center rounded-md border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) shadow-xs shadow-zinc-900/5 transition",
+						"aria-label": t("contentActions.copyOptions"),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: "h-3.5 w-3.5" })
+					})]
+				}),
+				feedbackAction && copyPhase !== "idle" && copied !== primaryAction?.key ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					role: "status",
+					className: "absolute top-full right-0 mt-2 inline-flex items-center gap-1.5 whitespace-nowrap rounded-md border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) px-2.5 py-1.5 text-xs shadow-lg shadow-zinc-900/10",
+					children: [copyPhase === "copying" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.LoaderCircle, { className: "h-3.5 w-3.5 animate-spin" }) : copyPhase === "copied" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "h-3.5 w-3.5 text-(--clarify-theme-tokens-colors-primary)" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: feedbackLabel })]
+				}) : null,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.MenuItems, {
+					modal: false,
+					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",
+					children: [
+						route.sourceEditUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+							href: route.sourceEditUrl,
+							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",
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "h-4 w-4" })
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.PencilLine, { 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
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+										className: "clarify-ui-menu-title flex items-center gap-1",
+										children: [t("contentActions.editPage"), /* @__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: action.description
+										children: t("contentActions.editPageDescription")
 									})]
 								}),
-								/* @__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"}` })
+								/* @__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" })
 							]
-						}) }, action.key);
-					}),
-					contentArtifactUrl ? /* @__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",
-								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" })
-						]
-					}) }) : null,
-					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", {
+						}) }) : null,
+						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",
+										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);
+						}),
+						contentArtifactUrl ? /* @__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",
+									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" })
+							]
+						}) }) : null,
+						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",
+										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: action.run,
+							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",
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "h-4 w-4" })
+									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: isCopied ? action.copiedLabel ?? action.label : action.label
+										children: copied === llmsAction.key ? llmsAction.copiedLabel ?? llmsAction.label : llmsAction.label
 									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 										className: "clarify-ui-menu-description truncate",
-										children: action.description
+										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 ${isCopied ? "opacity-100" : "opacity-0"}` })
+								/* @__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"}` })
 							]
-						}) }, 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",
-								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)
-				]
-			})]
+						}) }, llmsAction.key)
+					]
+				})
+			]
 		})
 	});
 }
@@ -439,12 +471,12 @@ function ThemeToggle() {
 	const label = getThemeLabel(nextTheme, t);
 	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-(--clarify-ui-hover-background)",
+		className: "clarify-theme-toggle clarify-ui-control relative flex size-9 items-center justify-center rounded-(--clarify-theme-tokens-radius-md) transition",
 		"aria-label": label,
 		title: label,
 		onClick: () => setTheme(nextTheme),
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "absolute size-12 pointer-fine:hidden" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "absolute size-11 pointer-fine:hidden" }),
 			theme === "system" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Monitor, { className: "h-5 w-5 stroke-(--clarify-theme-tokens-colors-foreground)" }) : null,
 			theme === "light" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Sun, { className: "h-5 w-5 stroke-(--clarify-theme-tokens-colors-foreground)" }) : null,
 			theme === "dark" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Moon, { className: "h-5 w-5 stroke-white" }) : null
@@ -590,9 +622,9 @@ function useSectionVisibilityDebug(_headerTopAreaRef) {
 	};
 }
 function useSectionVisibilityObserver(checkVisibleSections, headerTopAreaRef) {
-	(0, react.useEffect)(() => {
+	useIsomorphicLayoutEffect(() => {
 		if (typeof window === "undefined") return void 0;
-		const raf = window.requestAnimationFrame(() => checkVisibleSections());
+		checkVisibleSections();
 		window.addEventListener("scroll", checkVisibleSections, { passive: true });
 		window.addEventListener("resize", checkVisibleSections);
 		const resizeObserver = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(() => {
@@ -600,7 +632,6 @@ function useSectionVisibilityObserver(checkVisibleSections, headerTopAreaRef) {
 		});
 		if (resizeObserver && headerTopAreaRef?.current) resizeObserver.observe(headerTopAreaRef.current);
 		return () => {
-			window.cancelAnimationFrame(raf);
 			window.removeEventListener("scroll", checkVisibleSections);
 			window.removeEventListener("resize", checkVisibleSections);
 			resizeObserver?.disconnect();
@@ -636,17 +667,21 @@ function useVisibleSections(sectionStore, headerTopAreaRef) {
 }
 function useSyncSections(sectionStore, sections) {
 	useIsomorphicLayoutEffect(() => {
-		sectionStore.setState((state) => ({
-			sections: sections.map((section) => {
+		sectionStore.setState((state) => {
+			const nextSections = sections.map((section) => {
 				const registeredSection = state.sections.find((item) => item.id === section.id);
 				return {
 					...section,
 					headingRef: registeredSection?.headingRef,
 					offsetRem: registeredSection?.offsetRem ?? section.offsetRem
 				};
-			}),
-			visibleSections: []
-		}));
+			});
+			const nextSectionIds = new Set(nextSections.map((section) => section.id));
+			return {
+				sections: nextSections,
+				visibleSections: state.visibleSections.filter((id) => id === "_top" || nextSectionIds.has(id))
+			};
+		});
 	}, [sectionStore, sections]);
 }
 var SectionStoreContext = (0, react.createContext)(null);
@@ -668,26 +703,18 @@ function useSectionStore(selector) {
 }
 //#endregion
 //#region source/shell/Navigation.tsx
-function useInitialValue(value, condition = true) {
-	const [initialValue] = (0, react.useState)(value);
-	return condition ? initialValue : value;
-}
 function normalizePath(path) {
 	return path === "" ? "/" : path;
 }
 function navigationToGroups(navigation, defaultTitle) {
-	return navigation.map((node) => {
-		const children = node.children?.length ? node.children : [node];
-		return {
-			title: node.children?.length ? node.title : defaultTitle,
-			icon: node.icon,
-			links: children.map((child) => ({
-				title: child.title,
-				href: normalizePath(child.path),
-				icon: child.icon
-			}))
-		};
-	});
+	return navigation.map((node) => ({
+		title: node.children?.length ? node.title : defaultTitle,
+		icon: node.icon,
+		nodes: node.children?.length ? node.children : [node]
+	}));
+}
+function containsActivePath(node, pathname, currentLocale) {
+	return isSameRoutePath(node.path, pathname, currentLocale) || node.children?.some((child) => containsActivePath(child, pathname, currentLocale)) || false;
 }
 var sectionBadgeColorStyles = {
 	GET: "text-emerald-500 dark:text-emerald-400",
@@ -707,174 +734,232 @@ function SectionBadge(arg0) {
 		children
 	});
 }
-function NavLink(arg0) {
-	const { href, children, badge, icon, active = false, isAnchorLink = false, level } = arg0;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.CloseButton, {
-		as: react_router_dom.Link,
-		to: href,
-		"aria-current": active ? "page" : void 0,
-		className: (0, clsx.default)("clarify-navigation-link flex h-8 items-center justify-between gap-2 pr-3 transition", isAnchorLink ? "clarify-navigation-anchor-link" : "pl-4"),
-		style: isAnchorLink ? { paddingLeft: `${1.75 + Math.max(0, (level ?? 2) - 2) * .75}rem` } : void 0,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-			className: "flex min-w-0 flex-1 items-center gap-2",
-			children: [
-				icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavigationIcon, {
-					name: icon,
-					className: "h-3.5 w-3.5"
-				}) : null,
-				badge ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionBadge, { children: badge }) : null,
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "min-w-0 truncate whitespace-nowrap",
-					children
-				})
-			]
-		})
-	});
+function getVisibleSectionHighlightRange(sectionIds, visibleSectionIds) {
+	const validVisibleSectionIds = visibleSectionIds.filter((id) => id === "_top" || sectionIds.includes(id));
+	if (!validVisibleSectionIds.length) return void 0;
+	const firstVisibleSectionId = validVisibleSectionIds[0];
+	const lastVisibleSectionId = validVisibleSectionIds[validVisibleSectionIds.length - 1];
+	const pageHeight = remToPx(2.25);
+	const sectionOffset = pageHeight + remToPx(.25);
+	const sectionHeight = remToPx(2);
+	const getSectionTop = (id) => {
+		if (id === "_top") return 0;
+		return sectionOffset + sectionIds.indexOf(id) * sectionHeight;
+	};
+	const top = getSectionTop(firstVisibleSectionId);
+	return {
+		top,
+		height: (lastVisibleSectionId === "_top" ? pageHeight : getSectionTop(lastVisibleSectionId) + sectionHeight) - top
+	};
 }
 function VisibleSectionHighlight(arg0) {
-	const { group, pathname, currentLocale } = arg0;
-	const [sections, visibleSections] = useInitialValue([useSectionStore((s) => s.sections), useSectionStore((s) => s.visibleSections)], useIsInsideMobileNavigation());
-	const isPresent = (0, framer_motion.useIsPresent)();
-	const firstVisibleSectionIndex = Math.max(0, [{ id: "_top" }, ...sections].findIndex((section) => section.id === visibleSections[0]));
-	const itemHeight = remToPx(2);
-	const height = isPresent ? Math.max(1, visibleSections.length) * itemHeight : itemHeight;
-	const top = group.links.findIndex((link) => isSameRoutePath(link.href, pathname, currentLocale)) * itemHeight + firstVisibleSectionIndex * itemHeight;
+	const { top, height } = arg0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
-		initial: {
-			opacity: 0,
-			height: 0
-		},
+		className: "clarify-navigation-section-highlight pointer-events-none absolute inset-x-0 top-0",
+		initial: false,
 		animate: {
 			opacity: 1,
-			top,
 			height,
+			top,
 			transition: {
 				duration: .2,
 				ease: "easeOut"
 			}
 		},
-		exit: {
-			opacity: 0,
-			height: 0,
-			transition: {
-				duration: .15,
-				ease: "easeIn"
-			}
-		},
-		className: "clarify-navigation-section-highlight absolute inset-x-0 top-0 will-change-transform",
-		style: {
-			borderRadius: "var(--clarify-theme-tokens-radius-sm)",
-			height,
-			top
-		}
+		style: { borderRadius: "var(--clarify-theme-tokens-radius-md)" }
 	});
 }
-function ActivePageMarker(arg0) {
-	const { group, pathname, currentLocale } = arg0;
-	const itemHeight = remToPx(2);
-	const top = remToPx(.25) + group.links.findIndex((link) => isSameRoutePath(link.href, pathname, currentLocale)) * itemHeight;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
-		className: "absolute left-2 h-6 w-px bg-(--clarify-theme-tokens-colors-primary)",
-		initial: {
-			opacity: 0,
-			top
-		},
-		animate: {
-			opacity: 1,
-			top,
-			transition: {
-				duration: .2,
-				ease: "easeOut"
-			}
-		},
-		exit: {
-			opacity: 0,
-			transition: {
-				duration: .15,
-				ease: "easeIn"
-			}
-		},
-		style: { top }
+function NavigationPage(arg0) {
+	const { node, pathname, currentLocale, ancestorsExpanded } = arg0;
+	const sections = useSectionStore((state) => state.sections);
+	const visibleSections = useSectionStore((state) => state.visibleSections);
+	const active = isSameRoutePath(node.path, pathname, currentLocale);
+	const href = normalizePath(node.path);
+	const highlightRange = active && ancestorsExpanded ? getVisibleSectionHighlightRange(sections.map((section) => section.id), visibleSections) : void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+		className: "clarify-navigation-page relative",
+		children: [
+			highlightRange ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VisibleSectionHighlight, { ...highlightRange }) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.CloseButton, {
+				as: react_router_dom.Link,
+				to: href,
+				"aria-current": active ? "page" : void 0,
+				className: "clarify-navigation-link group relative z-10 flex min-h-9 items-center gap-2 rounded-(--clarify-theme-tokens-radius-md) py-1.5 pr-3 pl-2 no-underline transition",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "clarify-navigation-active-marker absolute inset-y-1.5 left-0 w-0.5 rounded-full opacity-0 transition-opacity group-aria-current:opacity-100" }),
+					node.icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavigationIcon, {
+						name: node.icon,
+						className: "clarify-navigation-item-icon h-3.5 w-3.5 shrink-0"
+					}) : null,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "min-w-0 flex-1 truncate whitespace-nowrap",
+						children: node.title
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.AnimatePresence, {
+				initial: false,
+				children: active && sections.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.ul, {
+					role: "list",
+					className: "clarify-navigation-sections relative py-1",
+					initial: {
+						height: 0,
+						opacity: 0
+					},
+					animate: {
+						height: "auto",
+						opacity: 1,
+						transition: {
+							duration: .18,
+							ease: "easeOut"
+						}
+					},
+					exit: {
+						height: 0,
+						opacity: 0,
+						transition: {
+							duration: .12,
+							ease: "easeIn"
+						}
+					},
+					children: sections.map((section) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.CloseButton, {
+						as: react_router_dom.Link,
+						to: `${href}#${section.id}`,
+						className: "clarify-navigation-anchor-link relative z-10 flex min-h-8 items-center pr-3 pl-2 no-underline transition",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "clarify-navigation-section-indent flex shrink-0",
+							"aria-hidden": "true",
+							children: Array.from({ length: Math.max(1, (section.level ?? 2) - 1) }, (_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, { className: "invisible h-3.5 w-3.5" }, index))
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "flex min-w-0 flex-1 items-center gap-2",
+							children: [section.badge ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionBadge, { children: section.badge }) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "min-w-0 flex-1 truncate whitespace-nowrap",
+								children: section.title
+							})]
+						})]
+					}) }, section.id))
+				}) : null
+			})
+		]
 	});
 }
-function NavigationGroup(arg0) {
-	const { group, className, currentLocale } = arg0;
-	const isInsideMobileNavigation = useIsInsideMobileNavigation();
-	const [pathname, sections] = useInitialValue([normalizeRoutePath((0, react_router_dom.useLocation)().pathname), useSectionStore((s) => s.sections)], isInsideMobileNavigation);
-	const isActiveGroup = group.links.findIndex((link) => isSameRoutePath(link.href, pathname, currentLocale)) !== -1;
+function NavigationBranch(arg0) {
+	const { node, pathname, currentLocale, ancestorsExpanded } = arg0;
+	const controlsId = (0, react.useId)();
+	const active = containsActivePath(node, pathname, currentLocale);
+	const [expansionOverride, setExpansionOverride] = (0, react.useState)();
+	const expanded = expansionOverride ?? active;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-		className: (0, clsx.default)("clarify-navigation-group relative mb-6", className),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("h2", {
-			className: "clarify-navigation-group-title flex items-center gap-2",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavigationIcon, {
-				name: group.icon,
-				className: "clarify-navigation-group-title-icon h-3.5 w-3.5"
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: group.title })]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "relative mt-3 pl-2",
+		className: "clarify-navigation-branch relative",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			type: "button",
+			"aria-expanded": expanded,
+			"aria-controls": controlsId,
+			"data-active": active || void 0,
+			onClick: () => setExpansionOverride(!expanded),
+			className: "clarify-navigation-branch-trigger group flex min-h-9 w-full items-center rounded-(--clarify-theme-tokens-radius-md) py-1.5 pr-3 pl-2 text-left transition",
 			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.AnimatePresence, {
-					initial: !isInsideMobileNavigation,
-					children: isActiveGroup ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VisibleSectionHighlight, {
-						group,
-						pathname,
-						currentLocale
-					}) : null
+				node.icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavigationIcon, {
+					name: node.icon,
+					className: "clarify-navigation-item-icon h-3.5 w-3.5 shrink-0"
+				}) : null,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "min-w-0 flex-1 truncate pl-2 whitespace-nowrap",
+					children: node.title
 				}),
-				/* @__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, {
-						group,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, { className: "clarify-navigation-chevron ml-2 h-3.5 w-3.5 shrink-0 transition-transform duration-150 group-aria-expanded:rotate-90" })
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.AnimatePresence, {
+			initial: false,
+			children: expanded ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.motion.div, {
+				id: controlsId,
+				className: "clarify-navigation-branch-content grid grid-cols-[auto_minmax(0,1fr)] overflow-hidden",
+				initial: {
+					height: 0,
+					opacity: 0
+				},
+				animate: {
+					height: "auto",
+					opacity: 1,
+					transition: {
+						duration: .18,
+						ease: "easeOut"
+					}
+				},
+				exit: {
+					height: 0,
+					opacity: 0,
+					transition: {
+						duration: .12,
+						ease: "easeIn"
+					}
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "grid",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, {
+						"aria-hidden": "true",
+						className: "invisible col-start-1 row-start-1 h-3.5 w-3.5"
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "col-start-2",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavigationNodes, {
+						nodes: node.children ?? [],
 						pathname,
-						currentLocale
-					}) : null
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-					role: "list",
-					className: "border-l border-transparent",
-					children: group.links.map((link) => {
-						const active = isSameRoutePath(link.href, pathname, currentLocale);
-						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-							className: "relative",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavLink, {
-								href: link.href,
-								icon: link.icon,
-								active,
-								children: link.title
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.AnimatePresence, {
-								initial: false,
-								children: active && sections.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.ul, {
-									role: "list",
-									initial: { opacity: 0 },
-									animate: {
-										opacity: 1,
-										transition: { delay: .1 }
-									},
-									exit: {
-										opacity: 0,
-										transition: { duration: .15 }
-									},
-									children: sections.map((section) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavLink, {
-										href: `${link.href}#${section.id}`,
-										badge: section.badge,
-										tags: section.tags,
-										isAnchorLink: true,
-										level: section.level,
-										children: section.title
-									}) }, section.id))
-								}) : null
-							})]
-						}, link.href);
+						currentLocale,
+						ancestorsExpanded: ancestorsExpanded && expanded
 					})
-				})
-			]
+				})]
+			}) : null
+		})]
+	});
+}
+function NavigationNodes(arg0) {
+	const { nodes, pathname, currentLocale, ancestorsExpanded } = arg0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+		role: "list",
+		className: "clarify-navigation-tree py-0.5",
+		children: nodes.map((node, index) => node.children?.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavigationBranch, {
+			node,
+			pathname,
+			currentLocale,
+			ancestorsExpanded
+		}, `${node.path}-${node.title}-${index}`) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavigationPage, {
+			node,
+			pathname,
+			currentLocale,
+			ancestorsExpanded
+		}, `${node.path}-${node.title}-${index}`))
+	});
+}
+function NavigationGroup(arg0) {
+	const { group, pathname, className, currentLocale } = arg0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+		className: (0, clsx.default)("clarify-navigation-group relative mb-7", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("h2", {
+			className: "clarify-navigation-group-title flex items-center gap-2 px-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavigationIcon, {
+				name: group.icon,
+				className: "clarify-navigation-group-title-icon h-3.5 w-3.5 shrink-0"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "min-w-0 truncate",
+				children: group.title
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "mt-2 px-2",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavigationNodes, {
+				nodes: group.nodes,
+				pathname,
+				currentLocale,
+				ancestorsExpanded: true
+			})
 		})]
 	});
 }
 function Navigation(arg0) {
 	const { navigation, className, currentLocale } = arg0;
-	const groups = navigationToGroups(navigation, require_i18n.useBuiltInText()("navigation.documentation"));
+	const t = require_i18n.useBuiltInText();
+	const pathname = normalizeRoutePath((0, react_router_dom.useLocation)().pathname);
+	const groups = navigationToGroups(navigation, t("navigation.documentation"));
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
 		className: (0, clsx.default)("clarify-navigation", className),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
@@ -882,9 +967,10 @@ function Navigation(arg0) {
 			className: "clarify-navigation-list",
 			children: groups.map((group, groupIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavigationGroup, {
 				group,
+				pathname,
 				className: groupIndex === 0 ? "mt-0" : "",
 				currentLocale
-			}, group.title))
+			}, `${group.title}-${groupIndex}`))
 		})
 	});
 }
@@ -990,10 +1076,10 @@ function MobileNavigation(arg0) {
 		value: true,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 			type: "button",
-			className: "clarify-mobile-navigation-button clarify-ui-icon-button relative flex size-8 items-center justify-center rounded-(--clarify-theme-tokens-radius-md) transition",
+			className: "clarify-mobile-navigation-button clarify-ui-icon-button relative flex size-9 items-center justify-center rounded-(--clarify-theme-tokens-radius-md) transition",
 			"aria-label": t("navigation.toggle"),
 			onClick: toggle,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "absolute size-12 pointer-fine:hidden" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleIcon, { className: "h-4 w-4 stroke-(--clarify-theme-tokens-colors-foreground) dark:stroke-white" })]
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "absolute size-11 pointer-fine:hidden" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleIcon, { className: "h-4 w-4 stroke-(--clarify-theme-tokens-colors-foreground) dark:stroke-white" })]
 		}), !isInsideMobileNavigation ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, {
 			fallback: null,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileNavigationDialog, {
@@ -1029,7 +1115,7 @@ function useSearchProps() {
 }
 //#endregion
 //#region source/shell/Search.tsx
-var SearchDialog = (0, react.lazy)(() => Promise.resolve().then(() => require("./SearchDialog-CIPvXMT3.cjs")));
+var SearchDialog = (0, react.lazy)(() => Promise.resolve().then(() => require("./SearchDialog-DjKvqN7p.cjs")));
 function getModifierKey() {
 	if (typeof navigator === "undefined") return "Ctrl ";
 	return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? "⌘" : "Ctrl ";
@@ -1080,10 +1166,10 @@ function MobileSearch(arg0) {
 		className: "clarify-mobile-search contents lg:hidden",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 			type: "button",
-			className: "clarify-mobile-search-button clarify-ui-control relative flex size-8 items-center justify-center rounded-(--clarify-theme-tokens-radius-md) transition lg:hidden",
+			className: "clarify-mobile-search-button clarify-ui-control relative flex size-9 items-center justify-center rounded-(--clarify-theme-tokens-radius-md) transition lg:hidden",
 			"aria-label": t("search.placeholder"),
 			...buttonProps,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "absolute size-12 pointer-fine:hidden" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Search, { className: "h-5 w-5 stroke-(--clarify-theme-tokens-colors-foreground) dark:stroke-white" })]
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "absolute size-11 pointer-fine:hidden" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Search, { className: "h-5 w-5 stroke-(--clarify-theme-tokens-colors-foreground) dark:stroke-white" })]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, {
 			fallback: null,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchDialog, {
@@ -1147,10 +1233,10 @@ function LanguageSwitcher(arg0) {
 		as: "div",
 		className: "clarify-language-switcher relative",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.MenuButton, {
-			className: "clarify-language-switcher-button clarify-ui-control flex h-8 items-center gap-1.5 rounded-(--clarify-theme-tokens-radius-md) px-1.5 transition",
+			className: "clarify-language-switcher-button clarify-ui-control flex h-9 items-center gap-1.5 rounded-(--clarify-theme-tokens-radius-md) px-2 transition",
 			"aria-label": t("language.switch"),
 			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "absolute size-12 pointer-fine:hidden" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "absolute size-11 pointer-fine:hidden" }),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Globe2, { className: "h-5 w-5 stroke-current" }),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					className: "hidden sm:inline",
@@ -1159,6 +1245,7 @@ function LanguageSwitcher(arg0) {
 			]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuItems, {
 			transition: true,
+			modal: false,
 			className: "clarify-language-switcher-menu clarify-ui-menu absolute right-0 z-50 mt-2 w-(--clarify-ui-menu-width) rounded-(--clarify-theme-tokens-radius-xl) bg-(--clarify-theme-tokens-colors-surface) p-1 shadow-lg ring-1 shadow-zinc-900/5 ring-(--clarify-theme-tokens-colors-border) transition data-closed:scale-95 data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in dark:bg-zinc-900 dark:ring-white/10",
 			children: i18n.locales.flatMap((locale) => {
 				const localizedPath = localizedRoutePath(config, locale.code, currentRoute);
@@ -1181,17 +1268,20 @@ function LanguageSwitcher(arg0) {
 	});
 }
 function TopLevelNavItem(arg0) {
-	const { href, children } = arg0;
-	if (isExternalHref(href)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+	const { href, active = false, children } = arg0;
+	const external = isExternalHref(href);
+	const className = (0, clsx.default)("clarify-ui-top-link inline-flex h-9 items-center rounded-(--clarify-theme-tokens-radius-md) px-3 no-underline transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)", active && "clarify-ui-top-link-active");
+	if (external) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
 		href,
-		className: "clarify-ui-top-link transition",
+		className,
 		target: "_blank",
 		rel: "noreferrer",
 		children
 	}) });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Link, {
 		to: href,
-		className: "clarify-ui-top-link transition",
+		className,
+		"aria-current": active ? "page" : void 0,
 		children
 	}) });
 }
@@ -1207,9 +1297,9 @@ function MobileNavbarMenu(arg0) {
 		as: "div",
 		className: "clarify-mobile-navbar-menu relative md:hidden",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.MenuButton, {
-			className: "clarify-mobile-navbar-menu-button clarify-ui-control relative flex size-8 items-center justify-center rounded-(--clarify-theme-tokens-radius-md) transition",
+			className: "clarify-mobile-navbar-menu-button clarify-ui-control relative flex size-9 items-center justify-center rounded-(--clarify-theme-tokens-radius-md) transition",
 			"aria-label": t("navbar.openLinks"),
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "absolute size-12 pointer-fine:hidden" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.MoreHorizontal, { className: "h-5 w-5" })]
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "absolute size-11 pointer-fine:hidden" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.MoreHorizontal, { className: "h-5 w-5" })]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuItems, {
 			transition: true,
 			anchor: "bottom end",
@@ -1246,43 +1336,122 @@ function ProductTabs(arg0) {
 	const { tabs, currentLocale } = arg0;
 	const t = require_i18n.useBuiltInText();
 	const pathname = normalizeRoutePath((0, react_router_dom.useLocation)().pathname);
+	const prefersReducedMotion = (0, framer_motion.useReducedMotion)();
+	const indicatorGroupId = (0, react.useId)();
+	const navRef = (0, react.useRef)(null);
+	const activeTabRef = (0, react.useRef)(null);
+	const [scrollState, setScrollState] = (0, react.useState)({
+		start: true,
+		end: true
+	});
+	const updateScrollState = (0, react.useCallback)(() => {
+		const nav = navRef.current;
+		if (!nav) return;
+		const maxScrollLeft = nav.scrollWidth - nav.clientWidth;
+		setScrollState({
+			start: nav.scrollLeft <= 1,
+			end: nav.scrollLeft >= maxScrollLeft - 1
+		});
+	}, []);
+	(0, react.useEffect)(() => {
+		const nav = navRef.current;
+		if (!nav) return;
+		updateScrollState();
+		const resizeObserver = new ResizeObserver(updateScrollState);
+		resizeObserver.observe(nav);
+		return () => resizeObserver.disconnect();
+	}, [tabs, updateScrollState]);
+	(0, react.useEffect)(() => {
+		activeTabRef.current?.scrollIntoView({
+			behavior: prefersReducedMotion ? "instant" : "smooth",
+			block: "nearest",
+			inline: "nearest"
+		});
+	}, [pathname, prefersReducedMotion]);
+	const scrollTabs = (direction) => {
+		const nav = navRef.current;
+		if (!nav) return;
+		nav.scrollBy({
+			left: direction * Math.max(nav.clientWidth * .6, 240),
+			behavior: prefersReducedMotion ? "instant" : "smooth"
+		});
+	};
 	if (!tabs?.length) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-clarify-header-tabs": true,
 		className: "clarify-product-tabs hidden h-14 border-t border-(--clarify-theme-tokens-colors-border) lg:block dark:border-white/10",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
-			className: "clarify-product-tabs-nav mx-auto flex h-full w-full max-w-(--clarify-theme-layout-max-width) items-stretch gap-6 overflow-x-auto px-5",
-			"aria-label": t("navbar.sections"),
-			children: tabs.map((tab) => {
-				const active = isActiveTab(tab, pathname, currentLocale);
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_router_dom.Link, {
-					to: tab.path,
-					"aria-current": active ? "page" : void 0,
-					className: (0, clsx.default)("clarify-product-tab clarify-ui-tab relative inline-flex h-full shrink-0 items-center gap-2 px-0 transition", active && "clarify-ui-tab-active"),
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavigationIcon, {
-							name: tab.icon,
-							className: "h-4 w-4"
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: tab.title }),
-						active ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.span, {
-							layoutId: "clarify-product-tab-indicator",
-							className: "absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-(--clarify-theme-tokens-colors-foreground) dark:bg-white",
-							transition: {
-								type: "tween",
-								duration: .16,
-								ease: "easeOut"
-							}
-						}) : null
-					]
-				}, `${tab.title}-${tab.path}`);
-			})
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "clarify-product-tabs-frame relative mx-auto h-full w-full max-w-(--clarify-theme-layout-max-width)",
+			"data-at-start": scrollState.start || void 0,
+			"data-at-end": scrollState.end || void 0,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: "clarify-product-tabs-scroll clarify-product-tabs-scroll-start",
+					onClick: () => scrollTabs(-1),
+					"aria-label": "Scroll sections left",
+					tabIndex: scrollState.start ? -1 : 0,
+					"aria-hidden": scrollState.start,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeft, {
+						className: "size-4",
+						"aria-hidden": "true"
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.LayoutGroup, {
+					id: indicatorGroupId,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+						ref: navRef,
+						className: "clarify-product-tabs-nav flex h-full w-full items-stretch gap-2 overflow-x-auto px-5",
+						"aria-label": t("navbar.sections"),
+						onScroll: updateScrollState,
+						children: tabs.map((tab) => {
+							const active = isActiveTab(tab, pathname, currentLocale);
+							return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_router_dom.Link, {
+								ref: active ? activeTabRef : void 0,
+								to: tab.path,
+								"aria-current": active ? "page" : void 0,
+								className: (0, clsx.default)("clarify-product-tab clarify-ui-tab relative inline-flex h-full shrink-0 items-center gap-2 px-3 no-underline transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--clarify-theme-tokens-colors-primary)", active && "clarify-ui-tab-active"),
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavigationIcon, {
+										name: tab.icon,
+										className: "h-4 w-4"
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: tab.title }),
+									active ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.span, {
+										layoutId: "active-indicator",
+										className: "absolute inset-x-3 bottom-0 h-0.5 rounded-full bg-(--clarify-ui-tab-indicator)",
+										transition: prefersReducedMotion ? { duration: 0 } : {
+											type: "spring",
+											stiffness: 420,
+											damping: 38,
+											mass: .7
+										}
+									}) : null
+								]
+							}, `${tab.title}-${tab.path}`);
+						})
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: "clarify-product-tabs-scroll clarify-product-tabs-scroll-end",
+					onClick: () => scrollTabs(1),
+					"aria-label": "Scroll sections right",
+					tabIndex: scrollState.end ? -1 : 0,
+					"aria-hidden": scrollState.end,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, {
+						className: "size-4",
+						"aria-hidden": "true"
+					})
+				})
+			]
 		})
 	});
 }
 var Header = (0, react.forwardRef)(function Header(arg0, ref) {
 	const { config, navigation, tabs, routes, currentLocale, currentRoute, banner, topAreaRef, className, ...props } = arg0;
 	const t = require_i18n.useBuiltInText();
+	const pathname = normalizeRoutePath((0, react_router_dom.useLocation)().pathname);
 	const { isOpen: mobileNavIsOpen } = useMobileNavigationStore();
 	const isInsideMobileNavigation = useIsInsideMobileNavigation();
 	const homeHref = resolveHomeHref(config, currentLocale);
@@ -1323,22 +1492,27 @@ var Header = (0, react.forwardRef)(function Header(arg0, ref) {
 		if (!hasNavbarLinks) return null;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
 			className: "clarify-top-nav hidden md:block",
+			"aria-label": t("navbar.sections"),
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
 				role: "list",
-				className: "flex items-center gap-8",
-				children: config.navbar?.links?.map((link) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TopLevelNavItem, {
-					href: localizeHref(link.href, config, currentLocale),
-					children: resolveLocalizedText(link.label, currentLocale, config.i18n?.defaultLocale)
-				}, link.href))
+				className: "flex items-center gap-0.5",
+				children: config.navbar?.links?.map((link) => {
+					const href = localizeHref(link.href, config, currentLocale);
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TopLevelNavItem, {
+						href,
+						active: !isExternalHref(href) && isSameRoutePath(href, pathname, currentLocale),
+						children: resolveLocalizedText(link.label, currentLocale, config.i18n?.defaultLocale)
+					}, link.href);
+				})
 			})
 		});
 	}
 	function renderHeaderActions() {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "clarify-header-actions flex shrink-0 items-center gap-5",
+			className: "clarify-header-actions flex shrink-0 items-center gap-1",
 			children: [
 				renderTopLinks(),
-				hasNavbarLinks ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "hidden md:block md:h-5 md:w-px md:bg-(--clarify-theme-tokens-colors-border) md:dark:bg-white/15" }) : null,
+				hasNavbarLinks ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "mx-2 hidden h-5 w-px bg-(--clarify-theme-tokens-colors-border) md:block md:dark:bg-white/15" }) : null,
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileSearch, {
 					routes,
 					navigation,
@@ -1597,4 +1771,4 @@ Object.defineProperty(exports, "useTheme", {
 	}
 });
 
-//# sourceMappingURL=PageActions-BjB6PYmL.cjs.map
+//# sourceMappingURL=PageActions-Dg1l9KB1.cjs.map