@clarify-labs/renderer 0.10.2 → 0.10.3

package/output/{PageActions-D7K9LDGf.js → PageActions-BQeEmXbT.js}

@@ -1,12 +1,12 @@
-import { t as useBuiltInText } from "./i18n-DnqZHFT7.js";
+import { t as useBuiltInText } from "./i18n-Bqth9d6Q.js";
 import clsx from "clsx";
-import { Suspense, createContext, forwardRef, lazy, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Suspense, createContext, forwardRef, lazy, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Link, useLocation } from "react-router-dom";
 import { CloseButton, Dialog, DialogBackdrop, DialogPanel, Menu, MenuButton, MenuItem, MenuItems, TransitionChild } from "@headlessui/react";
 import * as LucideIcons from "lucide-react";
-import { Check, ChevronDown, Copy, ExternalLink, FileText, Globe2, Link2, Menu as Menu$1, Monitor, Moon, MoreHorizontal, PencilLine, Search, Sun, X } from "lucide-react";
+import { Check, ChevronDown, ChevronLeft, ChevronRight, Copy, ExternalLink, FileText, Globe2, Link2, LoaderCircle, Menu as Menu$1, Monitor, Moon, MoreHorizontal, PencilLine, Search, Sun, X } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { AnimatePresence, motion, useIsPresent, useScroll, useTransform } from "framer-motion";
+import { AnimatePresence, LayoutGroup, motion, useReducedMotion, useScroll, useTransform } from "framer-motion";
 import { create, createStore, useStore } from "zustand";
 //#region source/utils/clipboard.ts
 async function copyTextToClipboard(text) {
@@ -69,27 +69,46 @@ function ContentActions(arg0) {
 	const { route, routePrefix } = arg0;
 	const t = useBuiltInText();
 	const [copied, setCopied] = useState("idle");
+	const [copyPhase, setCopyPhase] = useState("idle");
+	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",
@@ -115,163 +134,176 @@ function ContentActions(arg0) {
 		copiedLabel: t("contentActions.copiedLlms")
 	};
 	const primaryAction = actions[0];
-	const PrimaryIcon = primaryAction && copied === primaryAction.key ? Check : primaryAction?.icon ?? PencilLine;
+	const primaryPhase = primaryAction && copied === primaryAction.key ? copyPhase : "idle";
+	const PrimaryIcon = primaryPhase === "copying" ? LoaderCircle : primaryPhase === "copied" ? Check : primaryPhase === "failed" ? X : primaryAction?.icon ?? 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__ */ jsx("div", {
 		className: "clarify-content-actions not-prose flex shrink-0 justify-start sm:justify-end",
 		children: /* @__PURE__ */ jsxs(Menu, {
 			as: "div",
 			className: "clarify-content-actions-menu relative inline-flex min-w-0 text-sm font-medium",
-			children: [/* @__PURE__ */ 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__ */ 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__ */ jsx(PrimaryIcon, { className: "h-3.5 w-3.5 shrink-0" }), /* @__PURE__ */ jsx("span", {
-						className: "truncate",
-						children: copied === primaryAction.key ? t("actions.copied") : primaryAction.label
-					})]
-				}) : /* @__PURE__ */ 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__ */ jsx(PrimaryIcon, { className: "h-3.5 w-3.5 shrink-0" }), /* @__PURE__ */ jsx("span", {
-						className: "truncate",
-						children: t("contentActions.editPage")
-					})]
-				}), /* @__PURE__ */ jsx(MenuButton, {
-					className: "clarify-content-actions-trigger clarify-ui-control inline-flex h-8 w-8 items-center justify-center border-l border-(--clarify-theme-tokens-colors-border) transition",
-					"aria-label": t("contentActions.copyOptions"),
-					children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5" })
-				})]
-			}), /* @__PURE__ */ jsxs(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__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsxs("a", {
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "clarify-content-actions-group inline-flex min-w-0 items-center gap-1",
+					children: [primaryAction ? /* @__PURE__ */ 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__ */ jsx(PrimaryIcon, { className: `h-4 w-4 shrink-0 ${primaryPhase === "copying" ? "animate-spin" : ""}` }), /* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: primaryPhase === "idle" ? primaryAction.label : feedbackLabel
+						})]
+					}) : /* @__PURE__ */ 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__ */ 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__ */ jsx(PencilLine, { className: "h-4 w-4" })
-							}),
-							/* @__PURE__ */ jsxs("span", {
-								className: "flex min-w-0 flex-1 flex-col px-1",
-								children: [/* @__PURE__ */ jsxs("span", {
-									className: "clarify-ui-menu-title flex items-center gap-1",
-									children: [t("contentActions.editPage"), /* @__PURE__ */ jsx(ExternalLink, { className: "clarify-ui-menu-icon h-3 w-3" })]
-								}), /* @__PURE__ */ jsx("span", {
-									className: "clarify-ui-menu-description truncate",
-									children: t("contentActions.editPageDescription")
-								})]
-							}),
-							/* @__PURE__ */ jsx(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__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsxs("button", {
-							type: "button",
-							onClick: action.run,
-							className: "clarify-content-actions-item clarify-ui-menu-item group flex w-full items-center gap-2 rounded-(--clarify-theme-tokens-radius-lg) px-1.5 py-1.5 text-left transition",
+						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__ */ jsx(PrimaryIcon, { className: "h-4 w-4 shrink-0" }), /* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: t("contentActions.editPage")
+						})]
+					}), /* @__PURE__ */ jsx(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__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5" })
+					})]
+				}),
+				feedbackAction && copyPhase !== "idle" && copied !== primaryAction?.key ? /* @__PURE__ */ 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__ */ jsx(LoaderCircle, { className: "h-3.5 w-3.5 animate-spin" }) : copyPhase === "copied" ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 text-(--clarify-theme-tokens-colors-primary)" }) : /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ jsx("span", { children: feedbackLabel })]
+				}) : null,
+				/* @__PURE__ */ jsxs(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__ */ jsx(MenuItem, { children: /* @__PURE__ */ 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__ */ 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__ */ jsx(Icon, { className: "h-4 w-4" })
+									children: /* @__PURE__ */ jsx(PencilLine, { className: "h-4 w-4" })
 								}),
 								/* @__PURE__ */ jsxs("span", {
 									className: "flex min-w-0 flex-1 flex-col px-1",
-									children: [/* @__PURE__ */ jsx("span", {
-										className: "clarify-ui-menu-title",
-										children: isCopied ? t("contentActions.copiedContent") : action.label
+									children: [/* @__PURE__ */ jsxs("span", {
+										className: "clarify-ui-menu-title flex items-center gap-1",
+										children: [t("contentActions.editPage"), /* @__PURE__ */ jsx(ExternalLink, { className: "clarify-ui-menu-icon h-3 w-3" })]
 									}), /* @__PURE__ */ jsx("span", {
 										className: "clarify-ui-menu-description truncate",
-										children: action.description
+										children: t("contentActions.editPageDescription")
 									})]
 								}),
-								/* @__PURE__ */ jsx(Check, { className: `h-3.5 w-3.5 shrink-0 text-(--clarify-theme-tokens-colors-primary) transition ${isCopied ? "opacity-100" : "opacity-0"}` })
+								/* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 shrink-0 text-(--clarify-theme-tokens-colors-primary) opacity-0" })
 							]
-						}) }, action.key);
-					}),
-					contentArtifactUrl ? /* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsxs("a", {
-						href: contentArtifactUrl,
-						target: "_blank",
-						rel: "noreferrer",
-						className: "clarify-content-actions-item clarify-ui-menu-item group flex w-full items-center gap-2 rounded-(--clarify-theme-tokens-radius-lg) px-1.5 py-1.5 text-left no-underline transition",
-						children: [
-							/* @__PURE__ */ jsx("span", {
-								className: "clarify-ui-menu-icon flex shrink-0 rounded-(--clarify-theme-tokens-radius-md) border border-(--clarify-theme-tokens-colors-border) p-1.5",
-								children: /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4" })
-							}),
-							/* @__PURE__ */ jsxs("span", {
-								className: "flex min-w-0 flex-1 flex-col px-1",
-								children: [/* @__PURE__ */ jsxs("span", {
-									className: "clarify-ui-menu-title flex items-center gap-1",
-									children: [viewLabel, /* @__PURE__ */ jsx(ExternalLink, { className: "clarify-ui-menu-icon h-3 w-3" })]
-								}), /* @__PURE__ */ jsx("span", {
-									className: "clarify-ui-menu-description truncate",
-									children: viewDescription
-								})]
-							}),
-							/* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 shrink-0 text-(--clarify-theme-tokens-colors-primary) opacity-0" })
-						]
-					}) }) : null,
-					actions.slice(1).map((action) => {
-						const Icon = action.icon;
-						const isCopied = copied === action.key;
-						return /* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsxs("button", {
+						}) }) : null,
+						actions.slice(0, 1).map((action) => {
+							const Icon = action.icon;
+							const isCopied = copied === action.key;
+							return /* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								onClick: action.run,
+								className: "clarify-content-actions-item clarify-ui-menu-item group flex w-full items-center gap-2 rounded-(--clarify-theme-tokens-radius-lg) px-1.5 py-1.5 text-left transition",
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										className: "clarify-ui-menu-icon flex shrink-0 rounded-(--clarify-theme-tokens-radius-md) border border-(--clarify-theme-tokens-colors-border) p-1.5",
+										children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" })
+									}),
+									/* @__PURE__ */ jsxs("span", {
+										className: "flex min-w-0 flex-1 flex-col px-1",
+										children: [/* @__PURE__ */ jsx("span", {
+											className: "clarify-ui-menu-title",
+											children: isCopied ? t("contentActions.copiedContent") : action.label
+										}), /* @__PURE__ */ jsx("span", {
+											className: "clarify-ui-menu-description truncate",
+											children: action.description
+										})]
+									}),
+									/* @__PURE__ */ jsx(Check, { className: `h-3.5 w-3.5 shrink-0 text-(--clarify-theme-tokens-colors-primary) transition ${isCopied ? "opacity-100" : "opacity-0"}` })
+								]
+							}) }, action.key);
+						}),
+						contentArtifactUrl ? /* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsxs("a", {
+							href: contentArtifactUrl,
+							target: "_blank",
+							rel: "noreferrer",
+							className: "clarify-content-actions-item clarify-ui-menu-item group flex w-full items-center gap-2 rounded-(--clarify-theme-tokens-radius-lg) px-1.5 py-1.5 text-left no-underline transition",
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: "clarify-ui-menu-icon flex shrink-0 rounded-(--clarify-theme-tokens-radius-md) border border-(--clarify-theme-tokens-colors-border) p-1.5",
+									children: /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4" })
+								}),
+								/* @__PURE__ */ jsxs("span", {
+									className: "flex min-w-0 flex-1 flex-col px-1",
+									children: [/* @__PURE__ */ jsxs("span", {
+										className: "clarify-ui-menu-title flex items-center gap-1",
+										children: [viewLabel, /* @__PURE__ */ jsx(ExternalLink, { className: "clarify-ui-menu-icon h-3 w-3" })]
+									}), /* @__PURE__ */ jsx("span", {
+										className: "clarify-ui-menu-description truncate",
+										children: viewDescription
+									})]
+								}),
+								/* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 shrink-0 text-(--clarify-theme-tokens-colors-primary) opacity-0" })
+							]
+						}) }) : null,
+						actions.slice(1).map((action) => {
+							const Icon = action.icon;
+							const isCopied = copied === action.key;
+							return /* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								onClick: action.run,
+								className: "clarify-content-actions-item clarify-ui-menu-item group flex w-full items-center gap-2 rounded-(--clarify-theme-tokens-radius-lg) px-1.5 py-1.5 text-left transition",
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										className: "clarify-ui-menu-icon flex shrink-0 rounded-(--clarify-theme-tokens-radius-md) border border-(--clarify-theme-tokens-colors-border) p-1.5",
+										children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" })
+									}),
+									/* @__PURE__ */ jsxs("span", {
+										className: "flex min-w-0 flex-1 flex-col px-1",
+										children: [/* @__PURE__ */ jsx("span", {
+											className: "clarify-ui-menu-title",
+											children: isCopied ? action.copiedLabel ?? action.label : action.label
+										}), /* @__PURE__ */ jsx("span", {
+											className: "clarify-ui-menu-description truncate",
+											children: action.description
+										})]
+									}),
+									/* @__PURE__ */ jsx(Check, { className: `h-3.5 w-3.5 shrink-0 text-(--clarify-theme-tokens-colors-primary) transition ${isCopied ? "opacity-100" : "opacity-0"}` })
+								]
+							}) }, action.key);
+						}),
+						/* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsxs("button", {
 							type: "button",
-							onClick: 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__ */ 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__ */ jsx(Icon, { className: "h-4 w-4" })
+									children: /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4" })
 								}),
 								/* @__PURE__ */ jsxs("span", {
 									className: "flex min-w-0 flex-1 flex-col px-1",
 									children: [/* @__PURE__ */ jsx("span", {
 										className: "clarify-ui-menu-title",
-										children: isCopied ? action.copiedLabel ?? action.label : action.label
+										children: copied === llmsAction.key ? llmsAction.copiedLabel ?? llmsAction.label : llmsAction.label
 									}), /* @__PURE__ */ jsx("span", {
 										className: "clarify-ui-menu-description truncate",
-										children: action.description
+										children: llmsAction.description
 									})]
 								}),
-								/* @__PURE__ */ jsx(Check, { className: `h-3.5 w-3.5 shrink-0 text-(--clarify-theme-tokens-colors-primary) transition ${isCopied ? "opacity-100" : "opacity-0"}` })
+								/* @__PURE__ */ jsx(Check, { className: `h-3.5 w-3.5 shrink-0 text-(--clarify-theme-tokens-colors-primary) transition ${copied === llmsAction.key ? "opacity-100" : "opacity-0"}` })
 							]
-						}) }, action.key);
-					}),
-					/* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsxs("button", {
-						type: "button",
-						onClick: llmsAction.run,
-						className: "clarify-content-actions-item clarify-ui-menu-item group flex w-full items-center gap-2 rounded-(--clarify-theme-tokens-radius-lg) px-1.5 py-1.5 text-left transition",
-						children: [
-							/* @__PURE__ */ jsx("span", {
-								className: "clarify-ui-menu-icon flex shrink-0 rounded-(--clarify-theme-tokens-radius-md) border border-(--clarify-theme-tokens-colors-border) p-1.5",
-								children: /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4" })
-							}),
-							/* @__PURE__ */ jsxs("span", {
-								className: "flex min-w-0 flex-1 flex-col px-1",
-								children: [/* @__PURE__ */ jsx("span", {
-									className: "clarify-ui-menu-title",
-									children: copied === llmsAction.key ? llmsAction.copiedLabel ?? llmsAction.label : llmsAction.label
-								}), /* @__PURE__ */ jsx("span", {
-									className: "clarify-ui-menu-description truncate",
-									children: llmsAction.description
-								})]
-							}),
-							/* @__PURE__ */ jsx(Check, { className: `h-3.5 w-3.5 shrink-0 text-(--clarify-theme-tokens-colors-primary) transition ${copied === llmsAction.key ? "opacity-100" : "opacity-0"}` })
-						]
-					}) }, llmsAction.key)
-				]
-			})]
+						}) }, llmsAction.key)
+					]
+				})
+			]
 		})
 	});
 }
@@ -437,12 +469,12 @@ function ThemeToggle() {
 	const label = getThemeLabel(nextTheme, t);
 	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
-		className: "clarify-theme-toggle relative flex size-8 items-center justify-center rounded-(--clarify-theme-tokens-radius-md) transition hover:bg-(--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__ */ jsx("span", { className: "absolute size-12 pointer-fine:hidden" }),
+			/* @__PURE__ */ jsx("span", { className: "absolute size-11 pointer-fine:hidden" }),
 			theme === "system" ? /* @__PURE__ */ jsx(Monitor, { className: "h-5 w-5 stroke-(--clarify-theme-tokens-colors-foreground)" }) : null,
 			theme === "light" ? /* @__PURE__ */ jsx(Sun, { className: "h-5 w-5 stroke-(--clarify-theme-tokens-colors-foreground)" }) : null,
 			theme === "dark" ? /* @__PURE__ */ jsx(Moon, { className: "h-5 w-5 stroke-white" }) : null
@@ -588,9 +620,9 @@ function useSectionVisibilityDebug(_headerTopAreaRef) {
 	};
 }
 function useSectionVisibilityObserver(checkVisibleSections, headerTopAreaRef) {
-	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(() => {
@@ -598,7 +630,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();
@@ -634,17 +665,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 = createContext(null);
@@ -666,26 +701,18 @@ function useSectionStore(selector) {
 }
 //#endregion
 //#region source/shell/Navigation.tsx
-function useInitialValue(value, condition = true) {
-	const [initialValue] = 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",
@@ -705,174 +732,232 @@ function SectionBadge(arg0) {
 		children
 	});
 }
-function NavLink(arg0) {
-	const { href, children, badge, icon, active = false, isAnchorLink = false, level } = arg0;
-	return /* @__PURE__ */ jsx(CloseButton, {
-		as: Link,
-		to: href,
-		"aria-current": active ? "page" : void 0,
-		className: clsx("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__ */ jsxs("span", {
-			className: "flex min-w-0 flex-1 items-center gap-2",
-			children: [
-				icon ? /* @__PURE__ */ jsx(NavigationIcon, {
-					name: icon,
-					className: "h-3.5 w-3.5"
-				}) : null,
-				badge ? /* @__PURE__ */ jsx(SectionBadge, { children: badge }) : null,
-				/* @__PURE__ */ 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 = 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__ */ jsx(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__ */ jsx(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__ */ jsxs("li", {
+		className: "clarify-navigation-page relative",
+		children: [
+			highlightRange ? /* @__PURE__ */ jsx(VisibleSectionHighlight, { ...highlightRange }) : null,
+			/* @__PURE__ */ jsxs(CloseButton, {
+				as: 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__ */ 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__ */ jsx(NavigationIcon, {
+						name: node.icon,
+						className: "clarify-navigation-item-icon h-3.5 w-3.5 shrink-0"
+					}) : null,
+					/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1 truncate whitespace-nowrap",
+						children: node.title
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(AnimatePresence, {
+				initial: false,
+				children: active && sections.length > 0 ? /* @__PURE__ */ jsx(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__ */ jsx("li", { children: /* @__PURE__ */ jsxs(CloseButton, {
+						as: 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__ */ 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__ */ jsx(ChevronRight, { className: "invisible h-3.5 w-3.5" }, index))
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "flex min-w-0 flex-1 items-center gap-2",
+							children: [section.badge ? /* @__PURE__ */ jsx(SectionBadge, { children: section.badge }) : null, /* @__PURE__ */ 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(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 = useId();
+	const active = containsActivePath(node, pathname, currentLocale);
+	const [expansionOverride, setExpansionOverride] = useState();
+	const expanded = expansionOverride ?? active;
 	return /* @__PURE__ */ jsxs("li", {
-		className: clsx("clarify-navigation-group relative mb-6", className),
-		children: [/* @__PURE__ */ jsxs("h2", {
-			className: "clarify-navigation-group-title flex items-center gap-2",
-			children: [/* @__PURE__ */ jsx(NavigationIcon, {
-				name: group.icon,
-				className: "clarify-navigation-group-title-icon h-3.5 w-3.5"
-			}), /* @__PURE__ */ jsx("span", { children: group.title })]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "relative mt-3 pl-2",
+		className: "clarify-navigation-branch relative",
+		children: [/* @__PURE__ */ 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__ */ jsx(AnimatePresence, {
-					initial: !isInsideMobileNavigation,
-					children: isActiveGroup ? /* @__PURE__ */ jsx(VisibleSectionHighlight, {
-						group,
-						pathname,
-						currentLocale
-					}) : null
+				node.icon ? /* @__PURE__ */ jsx(NavigationIcon, {
+					name: node.icon,
+					className: "clarify-navigation-item-icon h-3.5 w-3.5 shrink-0"
+				}) : null,
+				/* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1 truncate pl-2 whitespace-nowrap",
+					children: node.title
 				}),
-				/* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-2 w-px bg-(--clarify-theme-tokens-colors-border) dark:bg-white/5" }),
-				/* @__PURE__ */ jsx(AnimatePresence, {
-					initial: false,
-					children: isActiveGroup ? /* @__PURE__ */ jsx(ActivePageMarker, {
-						group,
+				/* @__PURE__ */ jsx(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__ */ jsx(AnimatePresence, {
+			initial: false,
+			children: expanded ? /* @__PURE__ */ jsxs(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__ */ jsx("div", {
+					className: "grid",
+					children: /* @__PURE__ */ jsx(ChevronRight, {
+						"aria-hidden": "true",
+						className: "invisible col-start-1 row-start-1 h-3.5 w-3.5"
+					})
+				}), /* @__PURE__ */ jsx("div", {
+					className: "col-start-2",
+					children: /* @__PURE__ */ jsx(NavigationNodes, {
+						nodes: node.children ?? [],
 						pathname,
-						currentLocale
-					}) : null
-				}),
-				/* @__PURE__ */ jsx("ul", {
-					role: "list",
-					className: "border-l border-transparent",
-					children: group.links.map((link) => {
-						const active = isSameRoutePath(link.href, pathname, currentLocale);
-						return /* @__PURE__ */ jsxs("li", {
-							className: "relative",
-							children: [/* @__PURE__ */ jsx(NavLink, {
-								href: link.href,
-								icon: link.icon,
-								active,
-								children: link.title
-							}), /* @__PURE__ */ jsx(AnimatePresence, {
-								initial: false,
-								children: active && sections.length > 0 ? /* @__PURE__ */ jsx(motion.ul, {
-									role: "list",
-									initial: { opacity: 0 },
-									animate: {
-										opacity: 1,
-										transition: { delay: .1 }
-									},
-									exit: {
-										opacity: 0,
-										transition: { duration: .15 }
-									},
-									children: sections.map((section) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, {
-										href: `${link.href}#${section.id}`,
-										badge: section.badge,
-										tags: section.tags,
-										isAnchorLink: true,
-										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__ */ jsx("ul", {
+		role: "list",
+		className: "clarify-navigation-tree py-0.5",
+		children: nodes.map((node, index) => node.children?.length ? /* @__PURE__ */ jsx(NavigationBranch, {
+			node,
+			pathname,
+			currentLocale,
+			ancestorsExpanded
+		}, `${node.path}-${node.title}-${index}`) : /* @__PURE__ */ jsx(NavigationPage, {
+			node,
+			pathname,
+			currentLocale,
+			ancestorsExpanded
+		}, `${node.path}-${node.title}-${index}`))
+	});
+}
+function NavigationGroup(arg0) {
+	const { group, pathname, className, currentLocale } = arg0;
+	return /* @__PURE__ */ jsxs("li", {
+		className: clsx("clarify-navigation-group relative mb-7", className),
+		children: [/* @__PURE__ */ jsxs("h2", {
+			className: "clarify-navigation-group-title flex items-center gap-2 px-2",
+			children: [/* @__PURE__ */ jsx(NavigationIcon, {
+				name: group.icon,
+				className: "clarify-navigation-group-title-icon h-3.5 w-3.5 shrink-0"
+			}), /* @__PURE__ */ jsx("span", {
+				className: "min-w-0 truncate",
+				children: group.title
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "mt-2 px-2",
+			children: /* @__PURE__ */ jsx(NavigationNodes, {
+				nodes: group.nodes,
+				pathname,
+				currentLocale,
+				ancestorsExpanded: true
+			})
 		})]
 	});
 }
 function Navigation(arg0) {
 	const { navigation, className, currentLocale } = arg0;
-	const groups = navigationToGroups(navigation, useBuiltInText()("navigation.documentation"));
+	const t = useBuiltInText();
+	const pathname = normalizeRoutePath(useLocation().pathname);
+	const groups = navigationToGroups(navigation, t("navigation.documentation"));
 	return /* @__PURE__ */ jsx("nav", {
 		className: clsx("clarify-navigation", className),
 		children: /* @__PURE__ */ jsx("ul", {
@@ -880,9 +965,10 @@ function Navigation(arg0) {
 			className: "clarify-navigation-list",
 			children: groups.map((group, groupIndex) => /* @__PURE__ */ jsx(NavigationGroup, {
 				group,
+				pathname,
 				className: groupIndex === 0 ? "mt-0" : "",
 				currentLocale
-			}, group.title))
+			}, `${group.title}-${groupIndex}`))
 		})
 	});
 }
@@ -988,10 +1074,10 @@ function MobileNavigation(arg0) {
 		value: true,
 		children: [/* @__PURE__ */ 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__ */ jsx("span", { className: "absolute size-12 pointer-fine:hidden" }), /* @__PURE__ */ jsx(ToggleIcon, { className: "h-4 w-4 stroke-(--clarify-theme-tokens-colors-foreground) dark:stroke-white" })]
+			children: [/* @__PURE__ */ jsx("span", { className: "absolute size-11 pointer-fine:hidden" }), /* @__PURE__ */ jsx(ToggleIcon, { className: "h-4 w-4 stroke-(--clarify-theme-tokens-colors-foreground) dark:stroke-white" })]
 		}), !isInsideMobileNavigation ? /* @__PURE__ */ jsx(Suspense, {
 			fallback: null,
 			children: /* @__PURE__ */ jsx(MobileNavigationDialog, {
@@ -1027,7 +1113,7 @@ function useSearchProps() {
 }
 //#endregion
 //#region source/shell/Search.tsx
-var SearchDialog = lazy(() => import("./SearchDialog-CxYLjRi5.js"));
+var SearchDialog = lazy(() => import("./SearchDialog-B67VA0Ut.js"));
 function getModifierKey() {
 	if (typeof navigator === "undefined") return "Ctrl ";
 	return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? "⌘" : "Ctrl ";
@@ -1078,10 +1164,10 @@ function MobileSearch(arg0) {
 		className: "clarify-mobile-search contents lg:hidden",
 		children: [/* @__PURE__ */ 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__ */ jsx("span", { className: "absolute size-12 pointer-fine:hidden" }), /* @__PURE__ */ jsx(Search, { className: "h-5 w-5 stroke-(--clarify-theme-tokens-colors-foreground) dark:stroke-white" })]
+			children: [/* @__PURE__ */ jsx("span", { className: "absolute size-11 pointer-fine:hidden" }), /* @__PURE__ */ jsx(Search, { className: "h-5 w-5 stroke-(--clarify-theme-tokens-colors-foreground) dark:stroke-white" })]
 		}), /* @__PURE__ */ jsx(Suspense, {
 			fallback: null,
 			children: /* @__PURE__ */ jsx(SearchDialog, {
@@ -1145,10 +1231,10 @@ function LanguageSwitcher(arg0) {
 		as: "div",
 		className: "clarify-language-switcher relative",
 		children: [/* @__PURE__ */ jsxs(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__ */ jsx("span", { className: "absolute size-12 pointer-fine:hidden" }),
+				/* @__PURE__ */ jsx("span", { className: "absolute size-11 pointer-fine:hidden" }),
 				/* @__PURE__ */ jsx(Globe2, { className: "h-5 w-5 stroke-current" }),
 				/* @__PURE__ */ jsx("span", {
 					className: "hidden sm:inline",
@@ -1157,6 +1243,7 @@ function LanguageSwitcher(arg0) {
 			]
 		}), /* @__PURE__ */ jsx(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);
@@ -1179,17 +1266,20 @@ function LanguageSwitcher(arg0) {
 	});
 }
 function TopLevelNavItem(arg0) {
-	const { href, children } = arg0;
-	if (isExternalHref(href)) return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
+	const { href, active = false, children } = arg0;
+	const external = isExternalHref(href);
+	const className = clsx("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__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
 		href,
-		className: "clarify-ui-top-link transition",
+		className,
 		target: "_blank",
 		rel: "noreferrer",
 		children
 	}) });
 	return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, {
 		to: href,
-		className: "clarify-ui-top-link transition",
+		className,
+		"aria-current": active ? "page" : void 0,
 		children
 	}) });
 }
@@ -1205,9 +1295,9 @@ function MobileNavbarMenu(arg0) {
 		as: "div",
 		className: "clarify-mobile-navbar-menu relative md:hidden",
 		children: [/* @__PURE__ */ jsxs(MenuButton, {
-			className: "clarify-mobile-navbar-menu-button clarify-ui-control relative flex size-8 items-center justify-center rounded-(--clarify-theme-tokens-radius-md) transition",
+			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__ */ jsx("span", { className: "absolute size-12 pointer-fine:hidden" }), /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-5 w-5" })]
+			children: [/* @__PURE__ */ jsx("span", { className: "absolute size-11 pointer-fine:hidden" }), /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-5 w-5" })]
 		}), /* @__PURE__ */ jsx(MenuItems, {
 			transition: true,
 			anchor: "bottom end",
@@ -1244,43 +1334,122 @@ function ProductTabs(arg0) {
 	const { tabs, currentLocale } = arg0;
 	const t = useBuiltInText();
 	const pathname = normalizeRoutePath(useLocation().pathname);
+	const prefersReducedMotion = useReducedMotion();
+	const indicatorGroupId = useId();
+	const navRef = useRef(null);
+	const activeTabRef = useRef(null);
+	const [scrollState, setScrollState] = useState({
+		start: true,
+		end: true
+	});
+	const updateScrollState = useCallback(() => {
+		const nav = navRef.current;
+		if (!nav) return;
+		const maxScrollLeft = nav.scrollWidth - nav.clientWidth;
+		setScrollState({
+			start: nav.scrollLeft <= 1,
+			end: nav.scrollLeft >= maxScrollLeft - 1
+		});
+	}, []);
+	useEffect(() => {
+		const nav = navRef.current;
+		if (!nav) return;
+		updateScrollState();
+		const resizeObserver = new ResizeObserver(updateScrollState);
+		resizeObserver.observe(nav);
+		return () => resizeObserver.disconnect();
+	}, [tabs, updateScrollState]);
+	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__ */ 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__ */ 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__ */ jsxs(Link, {
-					to: tab.path,
-					"aria-current": active ? "page" : void 0,
-					className: clsx("clarify-product-tab clarify-ui-tab relative inline-flex h-full shrink-0 items-center gap-2 px-0 transition", active && "clarify-ui-tab-active"),
-					children: [
-						/* @__PURE__ */ jsx(NavigationIcon, {
-							name: tab.icon,
-							className: "h-4 w-4"
-						}),
-						/* @__PURE__ */ jsx("span", { children: tab.title }),
-						active ? /* @__PURE__ */ jsx(motion.span, {
-							layoutId: "clarify-product-tab-indicator",
-							className: "absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-(--clarify-theme-tokens-colors-foreground) dark:bg-white",
-							transition: {
-								type: "tween",
-								duration: .16,
-								ease: "easeOut"
-							}
-						}) : null
-					]
-				}, `${tab.title}-${tab.path}`);
-			})
+		children: /* @__PURE__ */ 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__ */ 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__ */ jsx(ChevronLeft, {
+						className: "size-4",
+						"aria-hidden": "true"
+					})
+				}),
+				/* @__PURE__ */ jsx(LayoutGroup, {
+					id: indicatorGroupId,
+					children: /* @__PURE__ */ 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__ */ jsxs(Link, {
+								ref: active ? activeTabRef : void 0,
+								to: tab.path,
+								"aria-current": active ? "page" : void 0,
+								className: clsx("clarify-product-tab clarify-ui-tab relative inline-flex h-full shrink-0 items-center gap-2 px-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__ */ jsx(NavigationIcon, {
+										name: tab.icon,
+										className: "h-4 w-4"
+									}),
+									/* @__PURE__ */ jsx("span", { children: tab.title }),
+									active ? /* @__PURE__ */ jsx(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__ */ 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__ */ jsx(ChevronRight, {
+						className: "size-4",
+						"aria-hidden": "true"
+					})
+				})
+			]
 		})
 	});
 }
 var Header = forwardRef(function Header(arg0, ref) {
 	const { config, navigation, tabs, routes, currentLocale, currentRoute, banner, topAreaRef, className, ...props } = arg0;
 	const t = useBuiltInText();
+	const pathname = normalizeRoutePath(useLocation().pathname);
 	const { isOpen: mobileNavIsOpen } = useMobileNavigationStore();
 	const isInsideMobileNavigation = useIsInsideMobileNavigation();
 	const homeHref = resolveHomeHref(config, currentLocale);
@@ -1321,22 +1490,27 @@ var Header = forwardRef(function Header(arg0, ref) {
 		if (!hasNavbarLinks) return null;
 		return /* @__PURE__ */ jsx("nav", {
 			className: "clarify-top-nav hidden md:block",
+			"aria-label": t("navbar.sections"),
 			children: /* @__PURE__ */ jsx("ul", {
 				role: "list",
-				className: "flex items-center gap-8",
-				children: config.navbar?.links?.map((link) => /* @__PURE__ */ jsx(TopLevelNavItem, {
-					href: localizeHref(link.href, config, currentLocale),
-					children: resolveLocalizedText(link.label, currentLocale, config.i18n?.defaultLocale)
-				}, link.href))
+				className: "flex items-center gap-0.5",
+				children: config.navbar?.links?.map((link) => {
+					const href = localizeHref(link.href, config, currentLocale);
+					return /* @__PURE__ */ jsx(TopLevelNavItem, {
+						href,
+						active: !isExternalHref(href) && isSameRoutePath(href, pathname, currentLocale),
+						children: resolveLocalizedText(link.label, currentLocale, config.i18n?.defaultLocale)
+					}, link.href);
+				})
 			})
 		});
 	}
 	function renderHeaderActions() {
 		return /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(MobileSearch, {
 					routes,
 					navigation,
@@ -1440,4 +1614,4 @@ function PageTitleActions() {
 //#endregion
 export { isExternalHref as C, copyTextToClipboard as E, themeCookieName as S, prefixHref as T, getStoredThemePreference as _, SectionProvider as a, storeLocalePreference as b, lucideIconRegistry as c, normalizeRoutePath as d, resolveLocalizedText as f, getStoredLocalePreference as g, useTheme as h, Navigation as i, resolveLucideIconName as l, ThemeProvider as m, PageTitleActions as n, useSectionStore as o, ThemeToggle as p, Header as r, remToPx as s, PageActionsProvider as t, isSameRoutePath as u, localeCookieName as v, localizeHref as w, storeThemePreference as x, readLocaleCookie as y };
 
-//# sourceMappingURL=PageActions-D7K9LDGf.js.map
+//# sourceMappingURL=PageActions-BQeEmXbT.js.map