@evinvest/uikit 0.29.4 → 0.31.0

package/dist/components/nav-collapse.js

@@ -0,0 +1,142 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { useControllableState } from "../primitives/use-controllable-state.js";
+function useNavGroupOpen(group, containsCurrent) {
+  const [open, setOpen] = useControllableState({
+    value: group.open,
+    defaultValue: group.defaultOpen ?? containsCurrent,
+    onChange: group.onOpenChange
+  });
+  const hadCurrent = React.useRef(containsCurrent);
+  React.useEffect(() => {
+    if (containsCurrent && !hadCurrent.current && !open) setOpen(true);
+    hadCurrent.current = containsCurrent;
+  }, [containsCurrent, open, setOpen]);
+  return [open, setOpen];
+}
+const MOTION = "duration-(--ev-dur-fast) ease-(--ev-ease-in-out) motion-reduce:transition-none";
+function NavCollapse({
+  open,
+  id,
+  children
+}) {
+  const ref = React.useRef(null);
+  React.useLayoutEffect(() => {
+    ref.current?.toggleAttribute("inert", !open);
+  }, [open]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      id,
+      "data-slot": "nav-collapse",
+      "data-state": open ? "open" : "closed",
+      className: cn(
+        // minmax(0, …): a plain `1fr` column grows to the widest label and the rail overflows.
+        "grid grid-cols-[minmax(0,1fr)] transition-[grid-template-rows]",
+        MOTION,
+        open ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+      ),
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "min-h-0 overflow-y-clip transition-[opacity,visibility]",
+            MOTION,
+            open ? "visible opacity-100" : "invisible opacity-0"
+          ),
+          children
+        }
+      )
+    }
+  );
+}
+function Chevron({ open }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": true,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: cn("size-4 transition-transform", MOTION, open && "rotate-90"),
+      children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+    }
+  );
+}
+const ROW = "flex min-h-9 items-center rounded-(--control-radius) text-body font-medium text-ink transition-colors motion-reduce:transition-none";
+const FOCUS = "outline-none focus-visible:ring-2 focus-visible:ring-ring";
+function NavGroupHeader({
+  label,
+  labelId,
+  regionId,
+  open,
+  onToggle,
+  href,
+  linkComponent,
+  current,
+  labels,
+  className
+}) {
+  const chevronId = React.useId();
+  const row = cn(ROW, open ? "bg-active" : "hover:bg-hover", className);
+  const chip = cn(
+    "grid size-7 shrink-0 place-items-center rounded-md text-ink-mid",
+    open && "bg-selected"
+  );
+  if (href === void 0) {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "data-slot": "nav-group-header",
+        "aria-expanded": open,
+        "aria-controls": regionId,
+        onClick: onToggle,
+        className: cn(row, FOCUS, "w-full gap-2 py-1 pl-3 pr-1.5 text-left"),
+        children: [
+          /* @__PURE__ */ jsx("span", { id: labelId, className: "min-w-0 flex-1 truncate", children: label }),
+          /* @__PURE__ */ jsx("span", { className: chip, children: /* @__PURE__ */ jsx(Chevron, { open }) })
+        ]
+      }
+    );
+  }
+  const Link = linkComponent ?? "a";
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "nav-group-header", className: cn(row, "gap-1 pr-1.5"), children: [
+    /* @__PURE__ */ jsx(
+      Link,
+      {
+        id: labelId,
+        href,
+        "aria-current": current ? "page" : void 0,
+        className: cn("min-w-0 flex-1 truncate rounded-(--control-radius) py-2 pl-3", FOCUS),
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        id: chevronId,
+        "aria-label": open ? labels?.collapse ?? "Collapse" : labels?.expand ?? "Expand",
+        "aria-labelledby": `${chevronId} ${labelId}`,
+        "aria-expanded": open,
+        "aria-controls": regionId,
+        onClick: onToggle,
+        className: cn(chip, FOCUS, !open && "hover:bg-hover"),
+        children: /* @__PURE__ */ jsx(Chevron, { open })
+      }
+    )
+  ] });
+}
+export {
+  NavCollapse,
+  NavGroupHeader,
+  useNavGroupOpen
+};
+//# sourceMappingURL=nav-collapse.js.map

package/dist/components/nav-collapse.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/nav-collapse.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\n\n/** What a nav group takes to become a section that opens and closes. */\nexport interface NavGroupCollapse {\n  /**\n   * Draws the group's `label` as a header with a chevron and lets the rows fold\n   * away. Needs a `label`. Off by default so an existing rail keeps its static\n   * eyebrow.\n   */\n  collapsible?: boolean;\n  /** Open on mount. Default: open exactly when the group holds the current item. */\n  defaultOpen?: boolean;\n  /** Controlled open state; pair with `onOpenChange`. */\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** A landing page: the label navigates to it and only the chevron toggles. */\n  href?: string;\n}\n\nexport interface NavCollapseLabels {\n  /** Spoken before the group's name on a closed section's chevron. Default `\"Expand\"`. */\n  expand?: string;\n  /** Spoken before the group's name on an open section's chevron. Default `\"Collapse\"`. */\n  collapse?: string;\n}\n\n/**\n * Open state of one collapsible group. A route change that lands inside a closed\n * group opens it; a user who closes the group holding the current row is not\n * fought, because only the move INTO the group opens it.\n */\nexport function useNavGroupOpen(\n  group: NavGroupCollapse,\n  containsCurrent: boolean,\n): readonly [open: boolean, setOpen: (next: boolean) => void] {\n  const [open, setOpen] = useControllableState<boolean>({\n    value: group.open,\n    defaultValue: group.defaultOpen ?? containsCurrent,\n    onChange: group.onOpenChange,\n  });\n  const hadCurrent = React.useRef(containsCurrent);\n  React.useEffect(() => {\n    if (containsCurrent && !hadCurrent.current && !open) setOpen(true);\n    hadCurrent.current = containsCurrent;\n  }, [containsCurrent, open, setOpen]);\n  return [open, setOpen] as const;\n}\n\nconst MOTION =\n  \"duration-(--ev-dur-fast) ease-(--ev-ease-in-out) motion-reduce:transition-none\";\n\n/**\n * The folding body. Height runs on a `0fr → 1fr` grid track (no measuring), the\n * content fades, and `visibility` flips at the END of the close so the hidden\n * rows leave the tab order without cutting the fade. `inert` is set at once so\n * a closing region cannot take focus or be read while it fades.\n */\nexport function NavCollapse({\n  open,\n  id,\n  children,\n}: {\n  open: boolean;\n  id: string;\n  children: React.ReactNode;\n}) {\n  const ref = React.useRef<HTMLDivElement>(null);\n  // `inert` as a React prop is a boolean in 19 and unknown in 18; the DOM\n  // attribute works in both.\n  React.useLayoutEffect(() => {\n    ref.current?.toggleAttribute(\"inert\", !open);\n  }, [open]);\n  return (\n    <div\n      ref={ref}\n      id={id}\n      data-slot=\"nav-collapse\"\n      data-state={open ? \"open\" : \"closed\"}\n      className={cn(\n        // minmax(0, …): a plain `1fr` column grows to the widest label and the rail overflows.\n        \"grid grid-cols-[minmax(0,1fr)] transition-[grid-template-rows]\",\n        MOTION,\n        open ? \"grid-rows-[1fr]\" : \"grid-rows-[0fr]\",\n      )}\n    >\n      {/* `overflow-y-clip` keeps the x axis visible so a focus ring on a row is not cut. */}\n      <div\n        className={cn(\n          \"min-h-0 overflow-y-clip transition-[opacity,visibility]\",\n          MOTION,\n          open ? \"visible opacity-100\" : \"invisible opacity-0\",\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\nfunction Chevron({ open }: { open: boolean }) {\n  return (\n    <svg\n      aria-hidden\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className={cn(\"size-4 transition-transform\", MOTION, open && \"rotate-90\")}\n    >\n      <path d=\"m9 18 6-6-6-6\" />\n    </svg>\n  );\n}\n\nconst ROW = \"flex min-h-9 items-center rounded-(--control-radius) text-body font-medium text-ink transition-colors motion-reduce:transition-none\";\nconst FOCUS = \"outline-none focus-visible:ring-2 focus-visible:ring-ring\";\n\nexport interface NavGroupHeaderProps {\n  label: React.ReactNode;\n  labelId: string;\n  regionId: string;\n  open: boolean;\n  onToggle: () => void;\n  href?: string | undefined;\n  linkComponent?: React.ElementType | undefined;\n  /** The landing page is the current page. */\n  current?: boolean | undefined;\n  labels?: NavCollapseLabels | undefined;\n  className?: string | undefined;\n}\n\n/**\n * The section's header row. With an `href` the label is a link and the chevron\n * is its own button; without one the whole row is the button and the chevron is\n * a picture of its state.\n */\nexport function NavGroupHeader({\n  label,\n  labelId,\n  regionId,\n  open,\n  onToggle,\n  href,\n  linkComponent,\n  current,\n  labels,\n  className,\n}: NavGroupHeaderProps) {\n  const chevronId = React.useId();\n  const row = cn(ROW, open ? \"bg-active\" : \"hover:bg-hover\", className);\n  const chip = cn(\n    \"grid size-7 shrink-0 place-items-center rounded-md text-ink-mid\",\n    open && \"bg-selected\",\n  );\n  if (href === undefined) {\n    return (\n      <button\n        type=\"button\"\n        data-slot=\"nav-group-header\"\n        aria-expanded={open}\n        aria-controls={regionId}\n        onClick={onToggle}\n        className={cn(row, FOCUS, \"w-full gap-2 py-1 pl-3 pr-1.5 text-left\")}\n      >\n        <span id={labelId} className=\"min-w-0 flex-1 truncate\">\n          {label}\n        </span>\n        <span className={chip}>\n          <Chevron open={open} />\n        </span>\n      </button>\n    );\n  }\n  const Link: React.ElementType = linkComponent ?? \"a\";\n  return (\n    <div data-slot=\"nav-group-header\" className={cn(row, \"gap-1 pr-1.5\")}>\n      <Link\n        id={labelId}\n        href={href}\n        aria-current={current ? \"page\" : undefined}\n        className={cn(\"min-w-0 flex-1 truncate rounded-(--control-radius) py-2 pl-3\", FOCUS)}\n      >\n        {label}\n      </Link>\n      {/* Named \"Expand Guides\": the button's own aria-label, then the label's text. */}\n      <button\n        type=\"button\"\n        id={chevronId}\n        aria-label={open ? (labels?.collapse ?? \"Collapse\") : (labels?.expand ?? \"Expand\")}\n        aria-labelledby={`${chevronId} ${labelId}`}\n        aria-expanded={open}\n        aria-controls={regionId}\n        onClick={onToggle}\n        className={cn(chip, FOCUS, !open && \"hover:bg-hover\")}\n      >\n        <Chevron open={open} />\n      </button>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/nav-model.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/nav-model.ts"],"sourcesContent":["import type * as React from \"react\";\n\n/**\n * How a {@link NavItem} decides it is the current one.\n *\n * - `\"prefix\"` (default) — the path is the item's own or lies beneath it, on a\n *   segment boundary: `/invest` claims `/invest/arb` but not `/investors`. An\n *   item at `/` is exact, or it would claim every page.\n * - `\"exact\"` — the path is the item's own and nothing beneath it.\n * - a function — whatever it answers for the path.\n */\nexport type NavMatch = \"exact\" | \"prefix\" | ((pathname: string) => boolean);\n\n/** State a row is rendered in; what `trailing` and `renderItem` are told. */\nexport interface NavItemState {\n  active: boolean;\n  /** Marked by a click whose navigation has not landed yet. */\n  pending: boolean;\n}\n\n/** One destination, shared by the rail ({@link ShellNav}) and the tab bar. */\nexport interface NavItem {\n  /** Stable key; also what `onNavigate` / `onItemIntent` hand back. */\n  id: string;\n  href: string;\n  label: React.ReactNode;\n  icon?: React.ComponentType<{ className?: string }>;\n  /** A count (`NavBadge`, capped at 99+, `0` draws nothing) or your own node. */\n  badge?: number | React.ReactNode;\n  /** Anything after the label — a status chip; a function is told the row's state. */\n  trailing?: React.ReactNode | ((state: NavItemState) => React.ReactNode);\n  /**\n   * Leaves the app: rendered as a plain `<a>` (never `linkComponent`), never\n   * current, never marked pending — a `mailto:`, a docs site.\n   */\n  external?: boolean;\n  /** Passed to the anchor; `_blank` gets `rel=\"noopener noreferrer\"`. */\n  target?: React.HTMLAttributeAnchorTarget;\n  match?: NavMatch;\n  /**\n   * More paths this item claims, prefix-matched — the one tab standing in for\n   * a whole group of rail rows (`[\"/profile\", \"/notifications\"]`).\n   */\n  also?: readonly string[];\n  /** Rendered, not focusable, never current. */\n  disabled?: boolean;\n}\n\n/** A titled run of items; the rail draws one marker per group. */\nexport interface NavGroup {\n  id: string;\n  /** The eyebrow above the rows; also the list's accessible name. */\n  label?: React.ReactNode;\n  items: readonly NavItem[];\n}\n\nfunction pathOf(href: string): string {\n  const cut = href.search(/[?#]/);\n  const path = cut === -1 ? href : href.slice(0, cut);\n  return path.length > 1 && path.endsWith(\"/\") ? path.slice(0, -1) : path;\n}\n\nfunction underPrefix(pathname: string, prefix: string): boolean {\n  if (prefix === \"/\") return pathname === \"/\";\n  return pathname === prefix || pathname.startsWith(`${prefix}/`);\n}\n\n// An exact hit outranks any prefix; among prefixes the longest wins. A function\n// match ranks as a prefix hit on the item's own href.\nconst EXACT = Number.MAX_SAFE_INTEGER;\n\n/**\n * How strongly `item` claims `pathname`, or `null` when it does not. Used to\n * pick ONE current item when several match — the rail and the tab bar each\n * draw a single marker, so two current rows is not a state they can show.\n */\nexport function navItemMatch(item: NavItem, pathname: string): number | null {\n  if (item.external || item.disabled) return null;\n  const path = pathOf(pathname);\n  const own = pathOf(item.href);\n  const match = item.match ?? \"prefix\";\n  let score: number | null = null;\n  if (typeof match === \"function\") score = match(path) ? own.length : null;\n  else if (path === own) score = EXACT;\n  else if (match === \"prefix\" && underPrefix(path, own)) score = own.length;\n  for (const extra of item.also ?? []) {\n    const p = pathOf(extra);\n    if (underPrefix(path, p) && (score === null || p.length > score)) score = p.length;\n  }\n  return score;\n}\n\n/** Whether `item` claims `pathname` at all, regardless of its neighbours. */\nexport function isNavItemActive(item: NavItem, pathname: string): boolean {\n  return navItemMatch(item, pathname) !== null;\n}\n\n/** The single current item for `pathname`: the strongest claim, ties to the first. */\nexport function resolveActiveNavItem(\n  items: Iterable<NavItem>,\n  pathname: string,\n): NavItem | undefined {\n  let best: NavItem | undefined;\n  let bestScore = -1;\n  for (const item of items) {\n    const score = navItemMatch(item, pathname);\n    if (score !== null && score > bestScore) {\n      best = item;\n      bestScore = score;\n    }\n  }\n  return best;\n}\n\n/**\n * A click the app should handle in place. A modified or non-primary click opens\n * the page elsewhere (a tab, a window, the context menu) and the router lets the\n * browser have it, so the current row stays current; `defaultPrevented` is the\n * same courtesy to anything upstream that claimed the click.\n */\nexport function isPlainLeftClick(e: React.MouseEvent): boolean {\n  return !(e.defaultPrevented || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0);\n}\n\n/** Props the rail and the tab bar hand a `linkComponent`; `next/link` takes all of them. */\nexport function anchorTargetProps(\n  item: Pick<NavItem, \"target\">,\n): { target?: React.HTMLAttributeAnchorTarget; rel?: string } {\n  if (item.target === undefined) return {};\n  return item.target === \"_blank\"\n    ? { target: item.target, rel: \"noopener noreferrer\" }\n    : { target: item.target };\n}\n"],"mappings":"AAwDA,SAAS,OAAO,MAAsB;AACpC,QAAM,MAAM,KAAK,OAAO,MAAM;AAC9B,QAAM,OAAO,QAAQ,KAAK,OAAO,KAAK,MAAM,GAAG,GAAG;AAClD,SAAO,KAAK,SAAS,KAAK,KAAK,SAAS,GAAG,IAAI,KAAK,MAAM,GAAG,EAAE,IAAI;AACrE;AAEA,SAAS,YAAY,UAAkB,QAAyB;AAC9D,MAAI,WAAW,IAAK,QAAO,aAAa;AACxC,SAAO,aAAa,UAAU,SAAS,WAAW,GAAG,MAAM,GAAG;AAChE;AAIA,MAAM,QAAQ,OAAO;AAOd,SAAS,aAAa,MAAe,UAAiC;AAC3E,MAAI,KAAK,YAAY,KAAK,SAAU,QAAO;AAC3C,QAAM,OAAO,OAAO,QAAQ;AAC5B,QAAM,MAAM,OAAO,KAAK,IAAI;AAC5B,QAAM,QAAQ,KAAK,SAAS;AAC5B,MAAI,QAAuB;AAC3B,MAAI,OAAO,UAAU,WAAY,SAAQ,MAAM,IAAI,IAAI,IAAI,SAAS;AAAA,WAC3D,SAAS,IAAK,SAAQ;AAAA,WACtB,UAAU,YAAY,YAAY,MAAM,GAAG,EAAG,SAAQ,IAAI;AACnE,aAAW,SAAS,KAAK,QAAQ,CAAC,GAAG;AACnC,UAAM,IAAI,OAAO,KAAK;AACtB,QAAI,YAAY,MAAM,CAAC,MAAM,UAAU,QAAQ,EAAE,SAAS,OAAQ,SAAQ,EAAE;AAAA,EAC9E;AACA,SAAO;AACT;AAGO,SAAS,gBAAgB,MAAe,UAA2B;AACxE,SAAO,aAAa,MAAM,QAAQ,MAAM;AAC1C;AAGO,SAAS,qBACd,OACA,UACqB;AACrB,MAAI;AACJ,MAAI,YAAY;AAChB,aAAW,QAAQ,OAAO;AACxB,UAAM,QAAQ,aAAa,MAAM,QAAQ;AACzC,QAAI,UAAU,QAAQ,QAAQ,WAAW;AACvC,aAAO;AACP,kBAAY;AAAA,IACd;AAAA,EACF;AACA,SAAO;AACT;AAQO,SAAS,iBAAiB,GAA8B;AAC7D,SAAO,EAAE,EAAE,oBAAoB,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW;AAClG;AAGO,SAAS,kBACd,MAC4D;AAC5D,MAAI,KAAK,WAAW,OAAW,QAAO,CAAC;AACvC,SAAO,KAAK,WAAW,WACnB,EAAE,QAAQ,KAAK,QAAQ,KAAK,sBAAsB,IAClD,EAAE,QAAQ,KAAK,OAAO;AAC5B;","names":[]}
+{"version":3,"sources":["../../src/components/nav-model.ts"],"sourcesContent":["import type * as React from \"react\";\nimport type { NavGroupCollapse } from \"./nav-collapse\";\n\n/**\n * How a {@link NavItem} decides it is the current one.\n *\n * - `\"prefix\"` (default) — the path is the item's own or lies beneath it, on a\n *   segment boundary: `/invest` claims `/invest/arb` but not `/investors`. An\n *   item at `/` is exact, or it would claim every page.\n * - `\"exact\"` — the path is the item's own and nothing beneath it.\n * - a function — whatever it answers for the path.\n */\nexport type NavMatch = \"exact\" | \"prefix\" | ((pathname: string) => boolean);\n\n/** State a row is rendered in; what `trailing` and `renderItem` are told. */\nexport interface NavItemState {\n  active: boolean;\n  /** Marked by a click whose navigation has not landed yet. */\n  pending: boolean;\n}\n\n/** One destination, shared by the rail ({@link ShellNav}) and the tab bar. */\nexport interface NavItem {\n  /** Stable key; also what `onNavigate` / `onItemIntent` hand back. */\n  id: string;\n  href: string;\n  label: React.ReactNode;\n  icon?: React.ComponentType<{ className?: string }>;\n  /** A count (`NavBadge`, capped at 99+, `0` draws nothing) or your own node. */\n  badge?: number | React.ReactNode;\n  /** Anything after the label — a status chip; a function is told the row's state. */\n  trailing?: React.ReactNode | ((state: NavItemState) => React.ReactNode);\n  /**\n   * Leaves the app: rendered as a plain `<a>` (never `linkComponent`), never\n   * current, never marked pending — a `mailto:`, a docs site.\n   */\n  external?: boolean;\n  /** Passed to the anchor; `_blank` gets `rel=\"noopener noreferrer\"`. */\n  target?: React.HTMLAttributeAnchorTarget;\n  match?: NavMatch;\n  /**\n   * More paths this item claims, prefix-matched — the one tab standing in for\n   * a whole group of rail rows (`[\"/profile\", \"/notifications\"]`).\n   */\n  also?: readonly string[];\n  /** Rendered, not focusable, never current. */\n  disabled?: boolean;\n}\n\n/** A titled run of items; the rail draws one marker per group. */\nexport interface NavGroup extends NavGroupCollapse {\n  id: string;\n  /** The eyebrow above the rows; also the list's accessible name. */\n  label?: React.ReactNode;\n  items: readonly NavItem[];\n}\n\nfunction pathOf(href: string): string {\n  const cut = href.search(/[?#]/);\n  const path = cut === -1 ? href : href.slice(0, cut);\n  return path.length > 1 && path.endsWith(\"/\") ? path.slice(0, -1) : path;\n}\n\nfunction underPrefix(pathname: string, prefix: string): boolean {\n  if (prefix === \"/\") return pathname === \"/\";\n  return pathname === prefix || pathname.startsWith(`${prefix}/`);\n}\n\n// An exact hit outranks any prefix; among prefixes the longest wins. A function\n// match ranks as a prefix hit on the item's own href.\nconst EXACT = Number.MAX_SAFE_INTEGER;\n\n/**\n * How strongly `item` claims `pathname`, or `null` when it does not. Used to\n * pick ONE current item when several match — the rail and the tab bar each\n * draw a single marker, so two current rows is not a state they can show.\n */\nexport function navItemMatch(item: NavItem, pathname: string): number | null {\n  if (item.external || item.disabled) return null;\n  const path = pathOf(pathname);\n  const own = pathOf(item.href);\n  const match = item.match ?? \"prefix\";\n  let score: number | null = null;\n  if (typeof match === \"function\") score = match(path) ? own.length : null;\n  else if (path === own) score = EXACT;\n  else if (match === \"prefix\" && underPrefix(path, own)) score = own.length;\n  for (const extra of item.also ?? []) {\n    const p = pathOf(extra);\n    if (underPrefix(path, p) && (score === null || p.length > score)) score = p.length;\n  }\n  return score;\n}\n\n/** Whether `item` claims `pathname` at all, regardless of its neighbours. */\nexport function isNavItemActive(item: NavItem, pathname: string): boolean {\n  return navItemMatch(item, pathname) !== null;\n}\n\n/** The single current item for `pathname`: the strongest claim, ties to the first. */\nexport function resolveActiveNavItem(\n  items: Iterable<NavItem>,\n  pathname: string,\n): NavItem | undefined {\n  let best: NavItem | undefined;\n  let bestScore = -1;\n  for (const item of items) {\n    const score = navItemMatch(item, pathname);\n    if (score !== null && score > bestScore) {\n      best = item;\n      bestScore = score;\n    }\n  }\n  return best;\n}\n\n/**\n * A click the app should handle in place. A modified or non-primary click opens\n * the page elsewhere (a tab, a window, the context menu) and the router lets the\n * browser have it, so the current row stays current; `defaultPrevented` is the\n * same courtesy to anything upstream that claimed the click.\n */\nexport function isPlainLeftClick(e: React.MouseEvent): boolean {\n  return !(e.defaultPrevented || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0);\n}\n\n/** Props the rail and the tab bar hand a `linkComponent`; `next/link` takes all of them. */\nexport function anchorTargetProps(\n  item: Pick<NavItem, \"target\">,\n): { target?: React.HTMLAttributeAnchorTarget; rel?: string } {\n  if (item.target === undefined) return {};\n  return item.target === \"_blank\"\n    ? { target: item.target, rel: \"noopener noreferrer\" }\n    : { target: item.target };\n}\n"],"mappings":"AAyDA,SAAS,OAAO,MAAsB;AACpC,QAAM,MAAM,KAAK,OAAO,MAAM;AAC9B,QAAM,OAAO,QAAQ,KAAK,OAAO,KAAK,MAAM,GAAG,GAAG;AAClD,SAAO,KAAK,SAAS,KAAK,KAAK,SAAS,GAAG,IAAI,KAAK,MAAM,GAAG,EAAE,IAAI;AACrE;AAEA,SAAS,YAAY,UAAkB,QAAyB;AAC9D,MAAI,WAAW,IAAK,QAAO,aAAa;AACxC,SAAO,aAAa,UAAU,SAAS,WAAW,GAAG,MAAM,GAAG;AAChE;AAIA,MAAM,QAAQ,OAAO;AAOd,SAAS,aAAa,MAAe,UAAiC;AAC3E,MAAI,KAAK,YAAY,KAAK,SAAU,QAAO;AAC3C,QAAM,OAAO,OAAO,QAAQ;AAC5B,QAAM,MAAM,OAAO,KAAK,IAAI;AAC5B,QAAM,QAAQ,KAAK,SAAS;AAC5B,MAAI,QAAuB;AAC3B,MAAI,OAAO,UAAU,WAAY,SAAQ,MAAM,IAAI,IAAI,IAAI,SAAS;AAAA,WAC3D,SAAS,IAAK,SAAQ;AAAA,WACtB,UAAU,YAAY,YAAY,MAAM,GAAG,EAAG,SAAQ,IAAI;AACnE,aAAW,SAAS,KAAK,QAAQ,CAAC,GAAG;AACnC,UAAM,IAAI,OAAO,KAAK;AACtB,QAAI,YAAY,MAAM,CAAC,MAAM,UAAU,QAAQ,EAAE,SAAS,OAAQ,SAAQ,EAAE;AAAA,EAC9E;AACA,SAAO;AACT;AAGO,SAAS,gBAAgB,MAAe,UAA2B;AACxE,SAAO,aAAa,MAAM,QAAQ,MAAM;AAC1C;AAGO,SAAS,qBACd,OACA,UACqB;AACrB,MAAI;AACJ,MAAI,YAAY;AAChB,aAAW,QAAQ,OAAO;AACxB,UAAM,QAAQ,aAAa,MAAM,QAAQ;AACzC,QAAI,UAAU,QAAQ,QAAQ,WAAW;AACvC,aAAO;AACP,kBAAY;AAAA,IACd;AAAA,EACF;AACA,SAAO;AACT;AAQO,SAAS,iBAAiB,GAA8B;AAC7D,SAAO,EAAE,EAAE,oBAAoB,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW;AAClG;AAGO,SAAS,kBACd,MAC4D;AAC5D,MAAI,KAAK,WAAW,OAAW,QAAO,CAAC;AACvC,SAAO,KAAK,WAAW,WACnB,EAAE,QAAQ,KAAK,QAAQ,KAAK,sBAAsB,IAClD,EAAE,QAAQ,KAAK,OAAO;AAC5B;","names":[]}

package/dist/components/navigation-menu.js

@@ -29,10 +29,12 @@ function useItem() {
 function NavigationMenu({
   className,
   children,
+  // Content renders inline under its trigger, so no shared viewport is mounted; the flag
+  // stays on the DOM for consumers' selectors.
   viewport = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     "nav",
     {
       "data-slot": "navigation-menu",
@@ -43,10 +45,7 @@ function NavigationMenu({
         className
       ),
       ...props,
-      children: [
-        children,
-        viewport && /* @__PURE__ */ jsx(NavigationMenuViewport, {})
-      ]
+      children
     }
   );
 }

package/dist/components/navigation-menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/navigation-menu.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\nimport { DismissableLayerScope, useDismissableLayer } from \"../primitives/dismissable-layer\";\nimport { usePresence } from \"../primitives/presence\";\nimport { mergeRefs } from \"../primitives/merge-refs\";\nimport { Slot } from \"../primitives/slot\";\nimport {\n  NAVIGATION_MENU,\n  NAVIGATION_MENU_CONTENT,\n  NAVIGATION_MENU_INDICATOR,\n  NAVIGATION_MENU_ITEM,\n  NAVIGATION_MENU_LINK,\n  NAVIGATION_MENU_LIST,\n  NAVIGATION_MENU_TRIGGER_STYLE,\n  NAVIGATION_MENU_VIEWPORT,\n} from \"../generated/navigation-menu\";\n\n/**\n * Fused canonical trigger class string, the mirror of Rust's\n * `navigation_menu_trigger_style()`. Reuse it to style a plain link the same way\n * a `NavigationMenuTrigger` is styled.\n */\nexport function navigationMenuTriggerStyle(): string {\n  return NAVIGATION_MENU_TRIGGER_STYLE;\n}\n\ninterface ItemCtx {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  triggerRef: React.RefObject<HTMLButtonElement | null>;\n}\nconst NavigationMenuItemContext = React.createContext<ItemCtx | null>(null);\nfunction useItem(): ItemCtx {\n  const ctx = React.useContext(NavigationMenuItemContext);\n  if (!ctx) throw new Error(\"NavigationMenu parts must be used within <NavigationMenuItem>\");\n  return ctx;\n}\n\nexport function NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  ...props\n}: React.ComponentProps<\"nav\"> & { viewport?: boolean }) {\n  return (\n    <nav\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      role=\"navigation\"\n      className={cn(\n        NAVIGATION_MENU,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {viewport && <NavigationMenuViewport />}\n    </nav>\n  );\n}\n\nexport function NavigationMenuList({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"navigation-menu-list\"\n      role=\"list\"\n      className={cn(\n        NAVIGATION_MENU_LIST,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface NavigationMenuItemProps extends React.ComponentProps<\"li\"> {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\nexport function NavigationMenuItem({\n  className,\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  children,\n  ...props\n}: NavigationMenuItemProps) {\n  const [isOpen, setOpen] = useControllableState({\n    value: open,\n    defaultValue: defaultOpen,\n    onChange: onOpenChange,\n  });\n  const triggerRef = React.useRef<HTMLButtonElement | null>(null);\n  return (\n    <NavigationMenuItemContext.Provider value={{ open: isOpen, setOpen, triggerRef }}>\n      <li data-slot=\"navigation-menu-item\" className={cn(NAVIGATION_MENU_ITEM, className)} {...props}>\n        {children}\n      </li>\n    </NavigationMenuItemContext.Provider>\n  );\n}\n\nexport function NavigationMenuTrigger({\n  className,\n  children,\n  onClick,\n  ...props\n}: React.ComponentProps<\"button\">) {\n  const { open, setOpen, triggerRef } = useItem();\n  return (\n    <button\n      ref={triggerRef}\n      type=\"button\"\n      data-slot=\"navigation-menu-trigger\"\n      data-state={open ? \"open\" : \"closed\"}\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      onClick={(e) => {\n        onClick?.(e);\n        setOpen(!open);\n      }}\n      {...props}\n    >\n      {children}{\" \"}\n      <svg\n        className=\"relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    </button>\n  );\n}\n\nexport function NavigationMenuContent({ className, children, ...props }: React.ComponentProps<\"div\">) {\n  const { open, setOpen, triggerRef } = useItem();\n  const { isPresent, ref: presenceRef } = usePresence(open);\n  const dismissRef = useDismissableLayer({\n    enabled: open,\n    onDismiss: () => setOpen(false),\n    exclude: [triggerRef],\n  });\n  if (!isPresent) return null;\n  return (\n    <div\n      ref={mergeRefs(presenceRef, dismissRef)}\n      data-slot=\"navigation-menu-content\"\n      data-state={open ? \"open\" : \"closed\"}\n      className={cn(\n        NAVIGATION_MENU_CONTENT,\n        className,\n      )}\n      {...props}\n    >\n      <DismissableLayerScope layer={dismissRef}>{children}</DismissableLayerScope>\n    </div>\n  );\n}\n\nexport function NavigationMenuViewport({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"absolute top-full left-0 isolate z-50 flex justify-center\">\n      <div\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          NAVIGATION_MENU_VIEWPORT,\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\nexport function NavigationMenuLink({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"a\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot : \"a\";\n  return (\n    <Comp\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        NAVIGATION_MENU_LINK,\n        className,\n      )}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport function NavigationMenuIndicator({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        NAVIGATION_MENU_INDICATOR,\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md\" />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/navigation-menu.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\nimport { DismissableLayerScope, useDismissableLayer } from \"../primitives/dismissable-layer\";\nimport { usePresence } from \"../primitives/presence\";\nimport { mergeRefs } from \"../primitives/merge-refs\";\nimport { Slot } from \"../primitives/slot\";\nimport {\n  NAVIGATION_MENU,\n  NAVIGATION_MENU_CONTENT,\n  NAVIGATION_MENU_INDICATOR,\n  NAVIGATION_MENU_ITEM,\n  NAVIGATION_MENU_LINK,\n  NAVIGATION_MENU_LIST,\n  NAVIGATION_MENU_TRIGGER_STYLE,\n  NAVIGATION_MENU_VIEWPORT,\n} from \"../generated/navigation-menu\";\n\n/**\n * Fused canonical trigger class string, the mirror of Rust's\n * `navigation_menu_trigger_style()`. Reuse it to style a plain link the same way\n * a `NavigationMenuTrigger` is styled.\n */\nexport function navigationMenuTriggerStyle(): string {\n  return NAVIGATION_MENU_TRIGGER_STYLE;\n}\n\ninterface ItemCtx {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  triggerRef: React.RefObject<HTMLButtonElement | null>;\n}\nconst NavigationMenuItemContext = React.createContext<ItemCtx | null>(null);\nfunction useItem(): ItemCtx {\n  const ctx = React.useContext(NavigationMenuItemContext);\n  if (!ctx) throw new Error(\"NavigationMenu parts must be used within <NavigationMenuItem>\");\n  return ctx;\n}\n\nexport function NavigationMenu({\n  className,\n  children,\n  // Content renders inline under its trigger, so no shared viewport is mounted; the flag\n  // stays on the DOM for consumers' selectors.\n  viewport = true,\n  ...props\n}: React.ComponentProps<\"nav\"> & { viewport?: boolean }) {\n  return (\n    <nav\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      role=\"navigation\"\n      className={cn(\n        NAVIGATION_MENU,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </nav>\n  );\n}\n\nexport function NavigationMenuList({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"navigation-menu-list\"\n      role=\"list\"\n      className={cn(\n        NAVIGATION_MENU_LIST,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface NavigationMenuItemProps extends React.ComponentProps<\"li\"> {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\nexport function NavigationMenuItem({\n  className,\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  children,\n  ...props\n}: NavigationMenuItemProps) {\n  const [isOpen, setOpen] = useControllableState({\n    value: open,\n    defaultValue: defaultOpen,\n    onChange: onOpenChange,\n  });\n  const triggerRef = React.useRef<HTMLButtonElement | null>(null);\n  return (\n    <NavigationMenuItemContext.Provider value={{ open: isOpen, setOpen, triggerRef }}>\n      <li data-slot=\"navigation-menu-item\" className={cn(NAVIGATION_MENU_ITEM, className)} {...props}>\n        {children}\n      </li>\n    </NavigationMenuItemContext.Provider>\n  );\n}\n\nexport function NavigationMenuTrigger({\n  className,\n  children,\n  onClick,\n  ...props\n}: React.ComponentProps<\"button\">) {\n  const { open, setOpen, triggerRef } = useItem();\n  return (\n    <button\n      ref={triggerRef}\n      type=\"button\"\n      data-slot=\"navigation-menu-trigger\"\n      data-state={open ? \"open\" : \"closed\"}\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      onClick={(e) => {\n        onClick?.(e);\n        setOpen(!open);\n      }}\n      {...props}\n    >\n      {children}{\" \"}\n      <svg\n        className=\"relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    </button>\n  );\n}\n\nexport function NavigationMenuContent({ className, children, ...props }: React.ComponentProps<\"div\">) {\n  const { open, setOpen, triggerRef } = useItem();\n  const { isPresent, ref: presenceRef } = usePresence(open);\n  const dismissRef = useDismissableLayer({\n    enabled: open,\n    onDismiss: () => setOpen(false),\n    exclude: [triggerRef],\n  });\n  if (!isPresent) return null;\n  return (\n    <div\n      ref={mergeRefs(presenceRef, dismissRef)}\n      data-slot=\"navigation-menu-content\"\n      data-state={open ? \"open\" : \"closed\"}\n      className={cn(\n        NAVIGATION_MENU_CONTENT,\n        className,\n      )}\n      {...props}\n    >\n      <DismissableLayerScope layer={dismissRef}>{children}</DismissableLayerScope>\n    </div>\n  );\n}\n\nexport function NavigationMenuViewport({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"absolute top-full left-0 isolate z-50 flex justify-center\">\n      <div\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          NAVIGATION_MENU_VIEWPORT,\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\nexport function NavigationMenuLink({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"a\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot : \"a\";\n  return (\n    <Comp\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        NAVIGATION_MENU_LINK,\n        className,\n      )}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport function NavigationMenuIndicator({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        NAVIGATION_MENU_INDICATOR,\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md\" />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/page-frame.js

@@ -1,16 +1,13 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../lib/cn.js";
+import { SECTION_LABEL_BASE, sectionLabelToneClasses } from "../generated/section-label.js";
 function SectionLabel({ as: Comp = "p", tone = "muted", className, ...props }) {
   return /* @__PURE__ */ jsx(
     Comp,
     {
       "data-slot": "section-label",
-      className: cn(
-        "text-xs font-semibold uppercase tracking-widest",
-        tone === "accent" ? "text-primary-ink" : "text-ink-soft",
-        className
-      ),
+      className: cn(SECTION_LABEL_BASE, sectionLabelToneClasses[tone], className),
       ...props
     }
   );

package/dist/components/page-frame.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/page-frame.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport type { ShellBreakpoint } from \"./app-shell\";\n\nexport type SectionLabelTone = \"muted\" | \"accent\";\n\nexport interface SectionLabelProps extends React.HTMLAttributes<HTMLElement> {\n  as?: React.ElementType;\n  /** `muted` labels a group or a section; `accent` announces a hero figure. */\n  tone?: SectionLabelTone;\n}\n\n/** The tracked-uppercase label above a figure, a group or a section. */\nexport function SectionLabel({ as: Comp = \"p\", tone = \"muted\", className, ...props }: SectionLabelProps) {\n  return (\n    <Comp\n      data-slot=\"section-label\"\n      className={cn(\n        \"text-xs font-semibold uppercase tracking-widest\",\n        tone === \"accent\" ? \"text-primary-ink\" : \"text-ink-soft\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface PageHeadingProps extends Omit<React.ComponentProps<\"header\">, \"title\"> {\n  title: React.ReactNode;\n  /** What the screen is for, in a sentence. */\n  description?: React.ReactNode;\n  eyebrow?: React.ReactNode;\n  /** The screen's own controls, on the right. */\n  actions?: React.ReactNode;\n}\n\n/** The title row: eyebrow → title → description on the left, actions on the right. */\nexport function PageHeading({ title, description, eyebrow, actions, className, ...props }: PageHeadingProps) {\n  return (\n    <header\n      data-slot=\"page-heading\"\n      className={cn(\"flex items-center justify-between gap-4\", className)}\n      {...props}\n    >\n      <div className=\"flex min-w-0 flex-col gap-1\">\n        {eyebrow !== undefined && <SectionLabel tone=\"accent\">{eyebrow}</SectionLabel>}\n        <h1 className=\"text-2xl font-semibold leading-tight text-ink\">{title}</h1>\n        {description !== undefined && <p className=\"text-sm text-ink-soft\">{description}</p>}\n      </div>\n      {actions !== undefined && <div className=\"flex shrink-0 items-center gap-2.5\">{actions}</div>}\n    </header>\n  );\n}\n\nexport type PageFrameWidth = \"full\" | \"content\";\n\nexport interface PageFrameProps extends Omit<React.ComponentProps<\"div\">, \"title\"> {\n  /** Omit when the screen's heading is its own composition. */\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  eyebrow?: React.ReactNode;\n  actions?: React.ReactNode;\n  /**\n   * The bar titling the screen on a phone (`MobileAppBar`). With one, the heading\n   * shows from `breakpoint` up only and the sections arrive a step after the bar.\n   */\n  appBar?: React.ReactNode;\n  /** Default `lg`. */\n  breakpoint?: ShellBreakpoint;\n  /** `full` fills the column (the rail already bounds it); `content` caps it at a reading measure. */\n  width?: PageFrameWidth;\n  headingClassName?: string;\n}\n\nconst HEADING_FROM = { md: \"hidden md:flex\", lg: \"hidden lg:flex\" } as const;\nconst PAD = {\n  md: \"gap-4 px-4 pb-6 pt-5 md:gap-6 md:px-8 md:pb-7 md:pt-6\",\n  lg: \"gap-4 px-4 pb-6 pt-5 lg:gap-6 lg:px-8 lg:pb-7 lg:pt-6\",\n} as const;\n\n/**\n * The frame every screen sits in: one inset, one section rhythm, one title scale,\n * so moving between screens never reads as moving between products.\n *\n * Its sections arrive in sequence by CSS alone (`data-enter=\"stagger\"`, see\n * motion.css): every direct child fades and rises `--ev-rise`, one\n * `--ev-stagger-section` after the previous, the heading first. Server-safe —\n * no motion library, no hydration needed for the entrance.\n */\nexport function PageFrame({\n  title,\n  description,\n  eyebrow,\n  actions,\n  appBar,\n  breakpoint = \"lg\",\n  width = \"full\",\n  headingClassName,\n  className,\n  style,\n  children,\n  ...props\n}: PageFrameProps) {\n  const hasBar = appBar !== undefined && appBar !== null && appBar !== false;\n  const enter = {\n    \"--enter-step\": \"var(--ev-stagger-section, 50ms)\",\n    ...(hasBar ? { \"--enter-delay\": \"var(--ev-stagger-section, 50ms)\" } : {}),\n  };\n  return (\n    <>\n      {appBar}\n      <div\n        data-slot=\"page-frame\"\n        data-enter=\"stagger\"\n        className={cn(\"flex flex-col\", PAD[breakpoint], width === \"content\" && \"max-w-5xl\", className)}\n        style={{ ...enter, ...style }}\n        {...props}\n      >\n        {title !== undefined && (\n          <PageHeading\n            title={title}\n            description={description}\n            eyebrow={eyebrow}\n            actions={actions}\n            className={cn(hasBar && HEADING_FROM[breakpoint], headingClassName)}\n          />\n        )}\n        {children}\n      </div>\n    </>\n  );\n}\n"],"mappings":"AAeI,SA8FA,UA9FA,KA6BE,YA7BF;AAfJ,YAAY,WAAW;AACvB,SAAS,UAAU;AAYZ,SAAS,aAAa,EAAE,IAAI,OAAO,KAAK,OAAO,SAAS,WAAW,GAAG,MAAM,GAAsB;AACvG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA,SAAS,WAAW,qBAAqB;AAAA,QACzC;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAYO,SAAS,YAAY,EAAE,OAAO,aAAa,SAAS,SAAS,WAAW,GAAG,MAAM,GAAqB;AAC3G,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,2CAA2C,SAAS;AAAA,MACjE,GAAG;AAAA,MAEJ;AAAA,6BAAC,SAAI,WAAU,+BACZ;AAAA,sBAAY,UAAa,oBAAC,gBAAa,MAAK,UAAU,mBAAQ;AAAA,UAC/D,oBAAC,QAAG,WAAU,iDAAiD,iBAAM;AAAA,UACpE,gBAAgB,UAAa,oBAAC,OAAE,WAAU,yBAAyB,uBAAY;AAAA,WAClF;AAAA,QACC,YAAY,UAAa,oBAAC,SAAI,WAAU,sCAAsC,mBAAQ;AAAA;AAAA;AAAA,EACzF;AAEJ;AAsBA,MAAM,eAAe,EAAE,IAAI,kBAAkB,IAAI,iBAAiB;AAClE,MAAM,MAAM;AAAA,EACV,IAAI;AAAA,EACJ,IAAI;AACN;AAWO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,QAAM,SAAS,WAAW,UAAa,WAAW,QAAQ,WAAW;AACrE,QAAM,QAAQ;AAAA,IACZ,gBAAgB;AAAA,IAChB,GAAI,SAAS,EAAE,iBAAiB,kCAAkC,IAAI,CAAC;AAAA,EACzE;AACA,SACE,iCACG;AAAA;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,cAAW;AAAA,QACX,WAAW,GAAG,iBAAiB,IAAI,UAAU,GAAG,UAAU,aAAa,aAAa,SAAS;AAAA,QAC7F,OAAO,EAAE,GAAG,OAAO,GAAG,MAAM;AAAA,QAC3B,GAAG;AAAA,QAEH;AAAA,oBAAU,UACT;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,WAAW,GAAG,UAAU,aAAa,UAAU,GAAG,gBAAgB;AAAA;AAAA,UACpE;AAAA,UAED;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/page-frame.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { SECTION_LABEL_BASE, sectionLabelToneClasses, type SectionLabelTone } from \"../generated/section-label\";\nimport type { ShellBreakpoint } from \"./app-shell\";\n\nexport type { SectionLabelTone };\n\nexport interface SectionLabelProps extends React.HTMLAttributes<HTMLElement> {\n  as?: React.ElementType;\n  /** `muted` labels a group or a section; `accent` announces a hero figure. */\n  tone?: SectionLabelTone;\n}\n\n/** The tracked-uppercase label above a figure, a group or a section. */\nexport function SectionLabel({ as: Comp = \"p\", tone = \"muted\", className, ...props }: SectionLabelProps) {\n  return (\n    <Comp\n      data-slot=\"section-label\"\n      className={cn(SECTION_LABEL_BASE, sectionLabelToneClasses[tone], className)}\n      {...props}\n    />\n  );\n}\n\nexport interface PageHeadingProps extends Omit<React.ComponentProps<\"header\">, \"title\"> {\n  title: React.ReactNode;\n  /** What the screen is for, in a sentence. */\n  description?: React.ReactNode;\n  eyebrow?: React.ReactNode;\n  /** The screen's own controls, on the right. */\n  actions?: React.ReactNode;\n}\n\n/** The title row: eyebrow → title → description on the left, actions on the right. */\nexport function PageHeading({ title, description, eyebrow, actions, className, ...props }: PageHeadingProps) {\n  return (\n    <header\n      data-slot=\"page-heading\"\n      className={cn(\"flex items-center justify-between gap-4\", className)}\n      {...props}\n    >\n      <div className=\"flex min-w-0 flex-col gap-1\">\n        {eyebrow !== undefined && <SectionLabel tone=\"accent\">{eyebrow}</SectionLabel>}\n        <h1 className=\"text-2xl font-semibold leading-tight text-ink\">{title}</h1>\n        {description !== undefined && <p className=\"text-sm text-ink-soft\">{description}</p>}\n      </div>\n      {actions !== undefined && <div className=\"flex shrink-0 items-center gap-2.5\">{actions}</div>}\n    </header>\n  );\n}\n\nexport type PageFrameWidth = \"full\" | \"content\";\n\nexport interface PageFrameProps extends Omit<React.ComponentProps<\"div\">, \"title\"> {\n  /** Omit when the screen's heading is its own composition. */\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  eyebrow?: React.ReactNode;\n  actions?: React.ReactNode;\n  /**\n   * The bar titling the screen on a phone (`MobileAppBar`). With one, the heading\n   * shows from `breakpoint` up only and the sections arrive a step after the bar.\n   */\n  appBar?: React.ReactNode;\n  /** Default `lg`. */\n  breakpoint?: ShellBreakpoint;\n  /** `full` fills the column (the rail already bounds it); `content` caps it at a reading measure. */\n  width?: PageFrameWidth;\n  headingClassName?: string;\n}\n\nconst HEADING_FROM = { md: \"hidden md:flex\", lg: \"hidden lg:flex\" } as const;\nconst PAD = {\n  md: \"gap-4 px-4 pb-6 pt-5 md:gap-6 md:px-8 md:pb-7 md:pt-6\",\n  lg: \"gap-4 px-4 pb-6 pt-5 lg:gap-6 lg:px-8 lg:pb-7 lg:pt-6\",\n} as const;\n\n/**\n * The frame every screen sits in: one inset, one section rhythm, one title scale,\n * so moving between screens never reads as moving between products.\n *\n * Its sections arrive in sequence by CSS alone (`data-enter=\"stagger\"`, see\n * motion.css): every direct child fades and rises `--ev-rise`, one\n * `--ev-stagger-section` after the previous, the heading first. Server-safe —\n * no motion library, no hydration needed for the entrance.\n */\nexport function PageFrame({\n  title,\n  description,\n  eyebrow,\n  actions,\n  appBar,\n  breakpoint = \"lg\",\n  width = \"full\",\n  headingClassName,\n  className,\n  style,\n  children,\n  ...props\n}: PageFrameProps) {\n  const hasBar = appBar !== undefined && appBar !== null && appBar !== false;\n  const enter = {\n    \"--enter-step\": \"var(--ev-stagger-section, 50ms)\",\n    ...(hasBar ? { \"--enter-delay\": \"var(--ev-stagger-section, 50ms)\" } : {}),\n  };\n  return (\n    <>\n      {appBar}\n      <div\n        data-slot=\"page-frame\"\n        data-enter=\"stagger\"\n        className={cn(\"flex flex-col\", PAD[breakpoint], width === \"content\" && \"max-w-5xl\", className)}\n        style={{ ...enter, ...style }}\n        {...props}\n      >\n        {title !== undefined && (\n          <PageHeading\n            title={title}\n            description={description}\n            eyebrow={eyebrow}\n            actions={actions}\n            className={cn(hasBar && HEADING_FROM[breakpoint], headingClassName)}\n          />\n        )}\n        {children}\n      </div>\n    </>\n  );\n}\n"],"mappings":"AAgBI,SA0FA,UA1FA,KAyBE,YAzBF;AAhBJ,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,oBAAoB,+BAAsD;AAY5E,SAAS,aAAa,EAAE,IAAI,OAAO,KAAK,OAAO,SAAS,WAAW,GAAG,MAAM,GAAsB;AACvG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,oBAAoB,wBAAwB,IAAI,GAAG,SAAS;AAAA,MACzE,GAAG;AAAA;AAAA,EACN;AAEJ;AAYO,SAAS,YAAY,EAAE,OAAO,aAAa,SAAS,SAAS,WAAW,GAAG,MAAM,GAAqB;AAC3G,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,2CAA2C,SAAS;AAAA,MACjE,GAAG;AAAA,MAEJ;AAAA,6BAAC,SAAI,WAAU,+BACZ;AAAA,sBAAY,UAAa,oBAAC,gBAAa,MAAK,UAAU,mBAAQ;AAAA,UAC/D,oBAAC,QAAG,WAAU,iDAAiD,iBAAM;AAAA,UACpE,gBAAgB,UAAa,oBAAC,OAAE,WAAU,yBAAyB,uBAAY;AAAA,WAClF;AAAA,QACC,YAAY,UAAa,oBAAC,SAAI,WAAU,sCAAsC,mBAAQ;AAAA;AAAA;AAAA,EACzF;AAEJ;AAsBA,MAAM,eAAe,EAAE,IAAI,kBAAkB,IAAI,iBAAiB;AAClE,MAAM,MAAM;AAAA,EACV,IAAI;AAAA,EACJ,IAAI;AACN;AAWO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,QAAM,SAAS,WAAW,UAAa,WAAW,QAAQ,WAAW;AACrE,QAAM,QAAQ;AAAA,IACZ,gBAAgB;AAAA,IAChB,GAAI,SAAS,EAAE,iBAAiB,kCAAkC,IAAI,CAAC;AAAA,EACzE;AACA,SACE,iCACG;AAAA;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,cAAW;AAAA,QACX,WAAW,GAAG,iBAAiB,IAAI,UAAU,GAAG,UAAU,aAAa,aAAa,SAAS;AAAA,QAC7F,OAAO,EAAE,GAAG,OAAO,GAAG,MAAM;AAAA,QAC3B,GAAG;AAAA,QAEH;AAAA,oBAAU,UACT;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,WAAW,GAAG,UAAU,aAAa,UAAU,GAAG,gBAAgB;AAAA;AAAA,UACpE;AAAA,UAED;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/popover-form.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import {
+  POPOVER_FORM_ACTIONS,
+  POPOVER_FORM_CONTENT,
+  POPOVER_FORM_FIELDS,
+  POPOVER_FORM_FORM,
+  POPOVER_FORM_TITLE
+} from "../generated/popover-form.js";
+import { useControllableState } from "../primitives/use-controllable-state.js";
+import { Button } from "./button.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+function PopoverForm({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  trigger,
+  title,
+  children,
+  onSubmit,
+  onReset,
+  labels = {},
+  className
+}) {
+  const [isOpen, setOpen] = useControllableState({
+    ...open !== void 0 ? { value: open } : {},
+    defaultValue: defaultOpen,
+    ...onOpenChange ? { onChange: onOpenChange } : {}
+  });
+  const titleId = React.useId();
+  return /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx(PopoverContent, { align: "start", className: cn(POPOVER_FORM_CONTENT, className), "aria-labelledby": titleId, role: "dialog", children: /* @__PURE__ */ jsxs(
+      "form",
+      {
+        className: POPOVER_FORM_FORM,
+        onSubmit: (e) => {
+          e.preventDefault();
+          onSubmit?.(e);
+          setOpen(false);
+        },
+        onReset: () => onReset?.(),
+        children: [
+          /* @__PURE__ */ jsx("h3", { id: titleId, className: POPOVER_FORM_TITLE, children: title }),
+          /* @__PURE__ */ jsx("div", { className: POPOVER_FORM_FIELDS, children }),
+          /* @__PURE__ */ jsxs("div", { className: POPOVER_FORM_ACTIONS, children: [
+            /* @__PURE__ */ jsx(Button, { type: "reset", variant: "ghost", size: "sm", children: labels.reset ?? "Reset" }),
+            /* @__PURE__ */ jsx(Button, { type: "submit", variant: "primary", size: "sm", children: labels.submit ?? "Apply" })
+          ] })
+        ]
+      }
+    ) })
+  ] });
+}
+export {
+  PopoverForm
+};
+//# sourceMappingURL=popover-form.js.map

package/dist/components/popover-form.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/popover-form.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport {\n  POPOVER_FORM_ACTIONS,\n  POPOVER_FORM_CONTENT,\n  POPOVER_FORM_FIELDS,\n  POPOVER_FORM_FORM,\n  POPOVER_FORM_TITLE,\n} from \"../generated/popover-form\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\nimport { Button } from \"./button\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\n\nexport interface PopoverFormLabels {\n  submit?: string;\n  reset?: string;\n}\n\nexport interface PopoverFormProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** The button that opens the form; wrapped with `asChild`, so pass one element. */\n  trigger: React.ReactNode;\n  title: React.ReactNode;\n  /** The fields: `Field`s with an `Input`, `Select` or `Checkbox`. */\n  children: React.ReactNode;\n  /** Called on submit; the popover closes afterwards. */\n  onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;\n  /** Called when Reset is pressed; native fields are reset by the browser first. */\n  onReset?: () => void;\n  labels?: PopoverFormLabels;\n  className?: string;\n}\n\n/** A filter-style form in a popover: a title, fields, Reset and Apply. */\nexport function PopoverForm({\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  trigger,\n  title,\n  children,\n  onSubmit,\n  onReset,\n  labels = {},\n  className,\n}: PopoverFormProps) {\n  const [isOpen, setOpen] = useControllableState<boolean>({\n    ...(open !== undefined ? { value: open } : {}),\n    defaultValue: defaultOpen,\n    ...(onOpenChange ? { onChange: onOpenChange } : {}),\n  });\n  const titleId = React.useId();\n  return (\n    <Popover open={isOpen} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>{trigger}</PopoverTrigger>\n      <PopoverContent align=\"start\" className={cn(POPOVER_FORM_CONTENT, className)} aria-labelledby={titleId} role=\"dialog\">\n        <form\n          className={POPOVER_FORM_FORM}\n          onSubmit={(e) => {\n            e.preventDefault();\n            onSubmit?.(e);\n            setOpen(false);\n          }}\n          onReset={() => onReset?.()}\n        >\n          <h3 id={titleId} className={POPOVER_FORM_TITLE}>\n            {title}\n          </h3>\n          <div className={POPOVER_FORM_FIELDS}>{children}</div>\n          <div className={POPOVER_FORM_ACTIONS}>\n            <Button type=\"reset\" variant=\"ghost\" size=\"sm\">\n              {labels.reset ?? \"Reset\"}\n            </Button>\n            <Button type=\"submit\" variant=\"primary\" size=\"sm\">\n              {labels.submit ?? \"Apply\"}\n            </Button>\n          </div>\n        </form>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":";AA0DM,cAeI,YAfJ;AAxDN,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;AACrC,SAAS,cAAc;AACvB,SAAS,SAAS,gBAAgB,sBAAsB;AAyBjD,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS,CAAC;AAAA,EACV;AACF,GAAqB;AACnB,QAAM,CAAC,QAAQ,OAAO,IAAI,qBAA8B;AAAA,IACtD,GAAI,SAAS,SAAY,EAAE,OAAO,KAAK,IAAI,CAAC;AAAA,IAC5C,cAAc;AAAA,IACd,GAAI,eAAe,EAAE,UAAU,aAAa,IAAI,CAAC;AAAA,EACnD,CAAC;AACD,QAAM,UAAU,MAAM,MAAM;AAC5B,SACE,qBAAC,WAAQ,MAAM,QAAQ,cAAc,SACnC;AAAA,wBAAC,kBAAe,SAAO,MAAE,mBAAQ;AAAA,IACjC,oBAAC,kBAAe,OAAM,SAAQ,WAAW,GAAG,sBAAsB,SAAS,GAAG,mBAAiB,SAAS,MAAK,UAC3G;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,QACX,UAAU,CAAC,MAAM;AACf,YAAE,eAAe;AACjB,qBAAW,CAAC;AACZ,kBAAQ,KAAK;AAAA,QACf;AAAA,QACA,SAAS,MAAM,UAAU;AAAA,QAEzB;AAAA,8BAAC,QAAG,IAAI,SAAS,WAAW,oBACzB,iBACH;AAAA,UACA,oBAAC,SAAI,WAAW,qBAAsB,UAAS;AAAA,UAC/C,qBAAC,SAAI,WAAW,sBACd;AAAA,gCAAC,UAAO,MAAK,SAAQ,SAAQ,SAAQ,MAAK,MACvC,iBAAO,SAAS,SACnB;AAAA,YACA,oBAAC,UAAO,MAAK,UAAS,SAAQ,WAAU,MAAK,MAC1C,iBAAO,UAAU,SACpB;AAAA,aACF;AAAA;AAAA;AAAA,IACF,GACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/resource-error.js

@@ -33,7 +33,7 @@ function ResourceError(props) {
       ...rest,
       children: [
         line,
-        onRetry && /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", size: "sm", disabled: retrying, onClick: onRetry, children: [
+        onRetry && /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", size: "xs", disabled: retrying, onClick: onRetry, children: [
           /* @__PURE__ */ jsx(RefreshIcon, { className: cn("size-4", retrying && "motion-safe:animate-spin") }),
           labels.retry ?? "Try again"
         ] })

package/dist/components/resource-error.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/resource-error.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Alert, AlertDescription, AlertTitle } from \"./alert\";\nimport { Button } from \"./button\";\nimport { RefreshIcon, TriangleAlertIcon } from \"./shell-icons\";\n\nexport interface ResourceErrorLabels {\n  /** The retry button. Default `\"Try again\"`. */\n  retry?: string;\n}\n\ninterface ResourceErrorBase extends Omit<React.ComponentProps<\"div\">, \"title\" | \"children\"> {\n  /** What failed, already in the reader's words — the kit formats no errors. */\n  message: React.ReactNode;\n  labels?: ResourceErrorLabels;\n}\n\n// The two forms take different props and the union says so: an `alert` has no\n// retry and an `inline` line has no heading, so asking for either is a type\n// error rather than a prop that silently does nothing.\nexport type ResourceErrorProps = ResourceErrorBase &\n  (\n    | {\n        /** One line under the page header — for dense screens where a block would push everything down. */\n        variant?: \"inline\";\n        title?: never;\n        /** Re-run the read; boxes the line so the button and the message read as one thing. */\n        onRetry?: () => void;\n        /** The retry is in flight: the button is disabled and its icon spins. */\n        retrying?: boolean;\n      }\n    | {\n        /** The kit's `Alert` with a heading — for screens that address the reader. */\n        variant: \"alert\";\n        title?: React.ReactNode;\n        onRetry?: never;\n        retrying?: never;\n      }\n  );\n\n/**\n * What a screen shows when a read it needed never arrived. Whether there is\n * anything to report stays with the caller — only it knows whether stale data is\n * still on screen, and a failed refresh over figures the reader can see belongs\n * beside them, not in place of them.\n */\nexport function ResourceError(props: ResourceErrorProps) {\n  if (props.variant === \"alert\") {\n    const { message, title, labels: _labels, variant: _variant, className, ...rest } = props;\n    return (\n      <div data-slot=\"resource-error\" data-variant=\"alert\" className={className} {...rest}>\n        <Alert variant=\"destructive\">\n          <TriangleAlertIcon className=\"size-4\" />\n          {title !== undefined && <AlertTitle>{title}</AlertTitle>}\n          <AlertDescription>{message}</AlertDescription>\n        </Alert>\n      </div>\n    );\n  }\n  const { message, onRetry, retrying = false, labels = {}, variant: _variant, title: _title, className, ...rest } = props;\n  const line = (\n    <p className=\"flex min-w-0 items-center gap-2 text-sm text-accent-error\">\n      {/* Holds its size: beside the button it is the first thing squeezed, and a\n          half-width triangle reads as a rendering fault. */}\n      <TriangleAlertIcon className=\"size-4 shrink-0\" /> {message}\n    </p>\n  );\n  return (\n    <div\n      data-slot=\"resource-error\"\n      data-variant=\"inline\"\n      role=\"alert\"\n      className={cn(\n        onRetry &&\n          \"flex flex-wrap items-center gap-3 rounded-lg border border-accent-error/40 bg-accent-error/10 px-3 py-2.5\",\n        className,\n      )}\n      {...rest}\n    >\n      {line}\n      {onRetry && (\n        <Button type=\"button\" variant=\"outline\" size=\"sm\" disabled={retrying} onClick={onRetry}>\n          <RefreshIcon className={cn(\"size-4\", retrying && \"motion-safe:animate-spin\")} />\n          {labels.retry ?? \"Try again\"}\n        </Button>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAqDQ,SACE,KADF;AAnDR,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,OAAO,kBAAkB,kBAAkB;AACpD,SAAS,cAAc;AACvB,SAAS,aAAa,yBAAyB;AA0CxC,SAAS,cAAc,OAA2B;AACvD,MAAI,MAAM,YAAY,SAAS;AAC7B,UAAM,EAAE,SAAAA,UAAS,OAAO,QAAQ,SAAS,SAASC,WAAU,WAAAC,YAAW,GAAGC,MAAK,IAAI;AACnF,WACE,oBAAC,SAAI,aAAU,kBAAiB,gBAAa,SAAQ,WAAWD,YAAY,GAAGC,OAC7E,+BAAC,SAAM,SAAQ,eACb;AAAA,0BAAC,qBAAkB,WAAU,UAAS;AAAA,MACrC,UAAU,UAAa,oBAAC,cAAY,iBAAM;AAAA,MAC3C,oBAAC,oBAAkB,UAAAH,UAAQ;AAAA,OAC7B,GACF;AAAA,EAEJ;AACA,QAAM,EAAE,SAAS,SAAS,WAAW,OAAO,SAAS,CAAC,GAAG,SAAS,UAAU,OAAO,QAAQ,WAAW,GAAG,KAAK,IAAI;AAClH,QAAM,OACJ,qBAAC,OAAE,WAAU,6DAGX;AAAA,wBAAC,qBAAkB,WAAU,mBAAkB;AAAA,IAAE;AAAA,IAAE;AAAA,KACrD;AAEF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,gBAAa;AAAA,MACb,MAAK;AAAA,MACL,WAAW;AAAA,QACT,WACE;AAAA,QACF;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,WACC,qBAAC,UAAO,MAAK,UAAS,SAAQ,WAAU,MAAK,MAAK,UAAU,UAAU,SAAS,SAC7E;AAAA,8BAAC,eAAY,WAAW,GAAG,UAAU,YAAY,0BAA0B,GAAG;AAAA,UAC7E,OAAO,SAAS;AAAA,WACnB;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":["message","_variant","className","rest"]}
+{"version":3,"sources":["../../src/components/resource-error.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Alert, AlertDescription, AlertTitle } from \"./alert\";\nimport { Button } from \"./button\";\nimport { RefreshIcon, TriangleAlertIcon } from \"./shell-icons\";\n\nexport interface ResourceErrorLabels {\n  /** The retry button. Default `\"Try again\"`. */\n  retry?: string;\n}\n\ninterface ResourceErrorBase extends Omit<React.ComponentProps<\"div\">, \"title\" | \"children\"> {\n  /** What failed, already in the reader's words — the kit formats no errors. */\n  message: React.ReactNode;\n  labels?: ResourceErrorLabels;\n}\n\n// The two forms take different props and the union says so: an `alert` has no\n// retry and an `inline` line has no heading, so asking for either is a type\n// error rather than a prop that silently does nothing.\nexport type ResourceErrorProps = ResourceErrorBase &\n  (\n    | {\n        /** One line under the page header — for dense screens where a block would push everything down. */\n        variant?: \"inline\";\n        title?: never;\n        /** Re-run the read; boxes the line so the button and the message read as one thing. */\n        onRetry?: () => void;\n        /** The retry is in flight: the button is disabled and its icon spins. */\n        retrying?: boolean;\n      }\n    | {\n        /** The kit's `Alert` with a heading — for screens that address the reader. */\n        variant: \"alert\";\n        title?: React.ReactNode;\n        onRetry?: never;\n        retrying?: never;\n      }\n  );\n\n/**\n * What a screen shows when a read it needed never arrived. Whether there is\n * anything to report stays with the caller — only it knows whether stale data is\n * still on screen, and a failed refresh over figures the reader can see belongs\n * beside them, not in place of them.\n */\nexport function ResourceError(props: ResourceErrorProps) {\n  if (props.variant === \"alert\") {\n    const { message, title, labels: _labels, variant: _variant, className, ...rest } = props;\n    return (\n      <div data-slot=\"resource-error\" data-variant=\"alert\" className={className} {...rest}>\n        <Alert variant=\"destructive\">\n          <TriangleAlertIcon className=\"size-4\" />\n          {title !== undefined && <AlertTitle>{title}</AlertTitle>}\n          <AlertDescription>{message}</AlertDescription>\n        </Alert>\n      </div>\n    );\n  }\n  const { message, onRetry, retrying = false, labels = {}, variant: _variant, title: _title, className, ...rest } = props;\n  const line = (\n    <p className=\"flex min-w-0 items-center gap-2 text-sm text-accent-error\">\n      {/* Holds its size: beside the button it is the first thing squeezed, and a\n          half-width triangle reads as a rendering fault. */}\n      <TriangleAlertIcon className=\"size-4 shrink-0\" /> {message}\n    </p>\n  );\n  return (\n    <div\n      data-slot=\"resource-error\"\n      data-variant=\"inline\"\n      role=\"alert\"\n      className={cn(\n        onRetry &&\n          \"flex flex-wrap items-center gap-3 rounded-lg border border-accent-error/40 bg-accent-error/10 px-3 py-2.5\",\n        className,\n      )}\n      {...rest}\n    >\n      {line}\n      {onRetry && (\n        <Button type=\"button\" variant=\"outline\" size=\"xs\" disabled={retrying} onClick={onRetry}>\n          <RefreshIcon className={cn(\"size-4\", retrying && \"motion-safe:animate-spin\")} />\n          {labels.retry ?? \"Try again\"}\n        </Button>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAqDQ,SACE,KADF;AAnDR,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,OAAO,kBAAkB,kBAAkB;AACpD,SAAS,cAAc;AACvB,SAAS,aAAa,yBAAyB;AA0CxC,SAAS,cAAc,OAA2B;AACvD,MAAI,MAAM,YAAY,SAAS;AAC7B,UAAM,EAAE,SAAAA,UAAS,OAAO,QAAQ,SAAS,SAASC,WAAU,WAAAC,YAAW,GAAGC,MAAK,IAAI;AACnF,WACE,oBAAC,SAAI,aAAU,kBAAiB,gBAAa,SAAQ,WAAWD,YAAY,GAAGC,OAC7E,+BAAC,SAAM,SAAQ,eACb;AAAA,0BAAC,qBAAkB,WAAU,UAAS;AAAA,MACrC,UAAU,UAAa,oBAAC,cAAY,iBAAM;AAAA,MAC3C,oBAAC,oBAAkB,UAAAH,UAAQ;AAAA,OAC7B,GACF;AAAA,EAEJ;AACA,QAAM,EAAE,SAAS,SAAS,WAAW,OAAO,SAAS,CAAC,GAAG,SAAS,UAAU,OAAO,QAAQ,WAAW,GAAG,KAAK,IAAI;AAClH,QAAM,OACJ,qBAAC,OAAE,WAAU,6DAGX;AAAA,wBAAC,qBAAkB,WAAU,mBAAkB;AAAA,IAAE;AAAA,IAAE;AAAA,KACrD;AAEF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,gBAAa;AAAA,MACb,MAAK;AAAA,MACL,WAAW;AAAA,QACT,WACE;AAAA,QACF;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,WACC,qBAAC,UAAO,MAAK,UAAS,SAAQ,WAAU,MAAK,MAAK,UAAU,UAAU,SAAS,SAC7E;AAAA,8BAAC,eAAY,WAAW,GAAG,UAAU,YAAY,0BAA0B,GAAG;AAAA,UAC7E,OAAO,SAAS;AAAA,WACnB;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":["message","_variant","className","rest"]}

package/dist/components/section-nav.js

@@ -2,14 +2,20 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../lib/cn.js";
+import {
+  NavCollapse,
+  NavGroupHeader,
+  useNavGroupOpen
+} from "./nav-collapse.js";
 import { SectionLabel } from "./page-frame.js";
-const ITEM = "flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50";
+const ITEM = "flex h-8 w-full items-center gap-2.5 rounded-(--control-radius) px-2.5 text-left text-body outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40";
 function SectionNav({
   groups,
   value,
   onValueChange,
   linkComponent,
   labels = {},
+  collapsible = false,
   className,
   ...props
 }) {
@@ -18,40 +24,87 @@ function SectionNav({
     {
       "data-slot": "section-nav",
       "aria-label": labels.nav ?? "Sections",
-      className: cn("flex w-60 shrink-0 flex-col gap-5", className),
+      className: cn("flex w-64 shrink-0 flex-col gap-0.5", className),
       ...props,
-      children: groups.map((group) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-        (group.label !== void 0 || group.description !== void 0) && /* @__PURE__ */ jsxs("div", { className: "mb-1 flex flex-col gap-0.5 px-3", children: [
-          group.label !== void 0 && /* @__PURE__ */ jsx(SectionLabel, { children: group.label }),
-          group.description !== void 0 && /* @__PURE__ */ jsx("p", { className: "text-xs leading-snug text-ink-soft", children: group.description })
-        ] }),
-        group.items.map((item) => /* @__PURE__ */ jsx(
-          SectionNavRow,
-          {
-            item,
-            active: item.id === value,
-            onSelect: onValueChange,
-            linkComponent
-          },
-          item.id
-        ))
-      ] }, group.id))
+      children: groups.map((group) => /* @__PURE__ */ jsx(
+        SectionNavGroupView,
+        {
+          group,
+          value,
+          onSelect: onValueChange,
+          linkComponent,
+          labels,
+          collapsible
+        },
+        group.id
+      ))
     }
   );
 }
+function SectionNavGroupView({
+  group,
+  value,
+  onSelect,
+  linkComponent,
+  labels,
+  collapsible
+}) {
+  const labelId = React.useId();
+  const regionId = React.useId();
+  const [open, setOpen] = useNavGroupOpen(group, group.items.some((i) => i.id === value));
+  const folds = (group.collapsible ?? collapsible) && group.label !== void 0;
+  const rows = group.items.map((item) => /* @__PURE__ */ jsx(
+    SectionNavRow,
+    {
+      item,
+      active: item.id === value,
+      nested: folds,
+      onSelect,
+      linkComponent
+    },
+    item.id
+  ));
+  if (folds) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col pt-1.5 first:pt-0", children: [
+      /* @__PURE__ */ jsx(
+        NavGroupHeader,
+        {
+          label: group.label,
+          labelId,
+          regionId,
+          open,
+          onToggle: () => setOpen(!open),
+          href: group.href,
+          linkComponent,
+          labels
+        }
+      ),
+      /* @__PURE__ */ jsx(NavCollapse, { open, id: regionId, children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5 pt-0.5 pl-3", children: rows }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 pt-3.5 first:pt-0", children: [
+    (group.label !== void 0 || group.description !== void 0) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+      group.label !== void 0 && /* @__PURE__ */ jsx(SectionLabel, { className: "px-2 py-1", children: group.label }),
+      group.description !== void 0 && /* @__PURE__ */ jsx("p", { className: "px-2 text-caption text-ink-soft", children: group.description })
+    ] }),
+    rows
+  ] });
+}
 function SectionNavRow({
   item,
   active,
+  nested,
   onSelect,
   linkComponent
 }) {
   const Icon = item.icon;
   const className = cn(
     ITEM,
-    active ? "bg-primary-ink/15 font-semibold text-primary-ink" : "text-ink hover:bg-hover"
+    active ? "bg-active text-ink" : "text-ink-mid hover:bg-hover",
+    nested && "h-9"
   );
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-    Icon && /* @__PURE__ */ jsx(Icon, { className: "size-4.5 shrink-0" }),
+    Icon && /* @__PURE__ */ jsx(Icon, { className: "size-4 shrink-0 text-ink-soft" }),
     /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
     item.trailing
   ] });

package/dist/components/section-nav.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/section-nav.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { SectionLabel } from \"./page-frame\";\n\nexport interface SectionNavItem {\n  id: string;\n  label: React.ReactNode;\n  icon?: React.ComponentType<{ className?: string }>;\n  /** A link (`?section=…`, a sub-route) instead of a button calling `onValueChange`. */\n  href?: string;\n  /** After the label — a count, a status chip. */\n  trailing?: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport interface SectionNavGroup {\n  id: string;\n  label?: React.ReactNode;\n  /** One line under the label saying what kind of thing lives here. */\n  description?: React.ReactNode;\n  items: readonly SectionNavItem[];\n}\n\nexport interface SectionNavLabels {\n  /** Accessible name of the nav. Default `\"Sections\"`. */\n  nav?: string;\n}\n\nexport interface SectionNavProps extends Omit<React.ComponentProps<\"nav\">, \"children\"> {\n  groups: readonly SectionNavGroup[];\n  /** The current section's id. */\n  value: string;\n  /** Called by button items (those without `href`), and by link items on click. */\n  onValueChange?: (id: string) => void;\n  linkComponent?: React.ElementType;\n  labels?: SectionNavLabels;\n}\n\nconst ITEM =\n  \"flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\";\n\n/**\n * A screen's own section rail — settings panes, a document's chapters: grouped\n * rows, one current (`aria-current`), each a button or a link. The shell's rail\n * is `ShellNav`; this one lives inside a page, so it carries a tint rather than\n * the rail's solid marker and does not slide.\n */\nexport function SectionNav({\n  groups,\n  value,\n  onValueChange,\n  linkComponent,\n  labels = {},\n  className,\n  ...props\n}: SectionNavProps) {\n  return (\n    <nav\n      data-slot=\"section-nav\"\n      aria-label={labels.nav ?? \"Sections\"}\n      className={cn(\"flex w-60 shrink-0 flex-col gap-5\", className)}\n      {...props}\n    >\n      {groups.map((group) => (\n        <div key={group.id} className=\"flex flex-col gap-1\">\n          {(group.label !== undefined || group.description !== undefined) && (\n            <div className=\"mb-1 flex flex-col gap-0.5 px-3\">\n              {group.label !== undefined && <SectionLabel>{group.label}</SectionLabel>}\n              {group.description !== undefined && (\n                <p className=\"text-xs leading-snug text-ink-soft\">{group.description}</p>\n              )}\n            </div>\n          )}\n          {group.items.map((item) => (\n            <SectionNavRow\n              key={item.id}\n              item={item}\n              active={item.id === value}\n              onSelect={onValueChange}\n              linkComponent={linkComponent}\n            />\n          ))}\n        </div>\n      ))}\n    </nav>\n  );\n}\n\nfunction SectionNavRow({\n  item,\n  active,\n  onSelect,\n  linkComponent,\n}: {\n  item: SectionNavItem;\n  active: boolean;\n  onSelect: ((id: string) => void) | undefined;\n  linkComponent: React.ElementType | undefined;\n}) {\n  const Icon = item.icon;\n  const className = cn(\n    ITEM,\n    active ? \"bg-primary-ink/15 font-semibold text-primary-ink\" : \"text-ink hover:bg-hover\",\n  );\n  const content = (\n    <>\n      {Icon && <Icon className=\"size-4.5 shrink-0\" />}\n      <span className=\"min-w-0 flex-1 truncate\">{item.label}</span>\n      {item.trailing}\n    </>\n  );\n  if (item.href !== undefined && !item.disabled) {\n    const Link = linkComponent ?? \"a\";\n    return (\n      <Link\n        href={item.href}\n        aria-current={active ? \"page\" : undefined}\n        className={className}\n        onClick={() => onSelect?.(item.id)}\n      >\n        {content}\n      </Link>\n    );\n  }\n  return (\n    <button\n      type=\"button\"\n      disabled={item.disabled}\n      aria-current={active ? \"true\" : undefined}\n      className={className}\n      onClick={() => onSelect?.(item.id)}\n    >\n      {content}\n    </button>\n  );\n}\n"],"mappings":";AAoEY,SAuCR,UAtCwC,KADhC;AAlEZ,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,oBAAoB;AAoC7B,MAAM,OACJ;AAQK,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS,CAAC;AAAA,EACV;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,cAAY,OAAO,OAAO;AAAA,MAC1B,WAAW,GAAG,qCAAqC,SAAS;AAAA,MAC3D,GAAG;AAAA,MAEH,iBAAO,IAAI,CAAC,UACX,qBAAC,SAAmB,WAAU,uBAC1B;AAAA,eAAM,UAAU,UAAa,MAAM,gBAAgB,WACnD,qBAAC,SAAI,WAAU,mCACZ;AAAA,gBAAM,UAAU,UAAa,oBAAC,gBAAc,gBAAM,OAAM;AAAA,UACxD,MAAM,gBAAgB,UACrB,oBAAC,OAAE,WAAU,sCAAsC,gBAAM,aAAY;AAAA,WAEzE;AAAA,QAED,MAAM,MAAM,IAAI,CAAC,SAChB;AAAA,UAAC;AAAA;AAAA,YAEC;AAAA,YACA,QAAQ,KAAK,OAAO;AAAA,YACpB,UAAU;AAAA,YACV;AAAA;AAAA,UAJK,KAAK;AAAA,QAKZ,CACD;AAAA,WAjBO,MAAM,EAkBhB,CACD;AAAA;AAAA,EACH;AAEJ;AAEA,SAAS,cAAc;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,OAAO,KAAK;AAClB,QAAM,YAAY;AAAA,IAChB;AAAA,IACA,SAAS,qDAAqD;AAAA,EAChE;AACA,QAAM,UACJ,iCACG;AAAA,YAAQ,oBAAC,QAAK,WAAU,qBAAoB;AAAA,IAC7C,oBAAC,UAAK,WAAU,2BAA2B,eAAK,OAAM;AAAA,IACrD,KAAK;AAAA,KACR;AAEF,MAAI,KAAK,SAAS,UAAa,CAAC,KAAK,UAAU;AAC7C,UAAM,OAAO,iBAAiB;AAC9B,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,KAAK;AAAA,QACX,gBAAc,SAAS,SAAS;AAAA,QAChC;AAAA,QACA,SAAS,MAAM,WAAW,KAAK,EAAE;AAAA,QAEhC;AAAA;AAAA,IACH;AAAA,EAEJ;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,UAAU,KAAK;AAAA,MACf,gBAAc,SAAS,SAAS;AAAA,MAChC;AAAA,MACA,SAAS,MAAM,WAAW,KAAK,EAAE;AAAA,MAEhC;AAAA;AAAA,EACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/section-nav.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport {\n  NavCollapse,\n  NavGroupHeader,\n  useNavGroupOpen,\n  type NavCollapseLabels,\n  type NavGroupCollapse,\n} from \"./nav-collapse\";\nimport { SectionLabel } from \"./page-frame\";\n\nexport interface SectionNavItem {\n  id: string;\n  label: React.ReactNode;\n  icon?: React.ComponentType<{ className?: string }>;\n  /** A link (`?section=…`, a sub-route) instead of a button calling `onValueChange`. */\n  href?: string;\n  /** After the label — a count, a status chip. */\n  trailing?: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport interface SectionNavGroup extends NavGroupCollapse {\n  id: string;\n  label?: React.ReactNode;\n  /** One line under the label saying what kind of thing lives here. */\n  description?: React.ReactNode;\n  items: readonly SectionNavItem[];\n}\n\nexport interface SectionNavLabels extends NavCollapseLabels {\n  /** Accessible name of the nav. Default `\"Sections\"`. */\n  nav?: string;\n}\n\nexport interface SectionNavProps extends Omit<React.ComponentProps<\"nav\">, \"children\"> {\n  groups: readonly SectionNavGroup[];\n  /** The current section's id. */\n  value: string;\n  /** Called by button items (those without `href`), and by link items on click. */\n  onValueChange?: (id: string) => void;\n  linkComponent?: React.ElementType;\n  labels?: SectionNavLabels;\n  /** Makes every labelled group collapsible; a group's own `collapsible` wins. Default `false`. */\n  collapsible?: boolean;\n}\n\nconst ITEM =\n  \"flex h-8 w-full items-center gap-2.5 rounded-(--control-radius) px-2.5 text-left text-body outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40\";\n\n/**\n * A screen's own section rail — settings panes, a document's chapters: grouped\n * rows, one current (`aria-current`), each a button or a link. The shell's rail\n * is `ShellNav`; this one lives inside a page, so it carries a tint rather than\n * the rail's solid marker and does not slide.\n */\nexport function SectionNav({\n  groups,\n  value,\n  onValueChange,\n  linkComponent,\n  labels = {},\n  collapsible = false,\n  className,\n  ...props\n}: SectionNavProps) {\n  return (\n    <nav\n      data-slot=\"section-nav\"\n      aria-label={labels.nav ?? \"Sections\"}\n      className={cn(\"flex w-64 shrink-0 flex-col gap-0.5\", className)}\n      {...props}\n    >\n      {groups.map((group) => (\n        <SectionNavGroupView\n          key={group.id}\n          group={group}\n          value={value}\n          onSelect={onValueChange}\n          linkComponent={linkComponent}\n          labels={labels}\n          collapsible={collapsible}\n        />\n      ))}\n    </nav>\n  );\n}\n\nfunction SectionNavGroupView({\n  group,\n  value,\n  onSelect,\n  linkComponent,\n  labels,\n  collapsible,\n}: {\n  group: SectionNavGroup;\n  value: string;\n  onSelect: ((id: string) => void) | undefined;\n  linkComponent: React.ElementType | undefined;\n  labels: SectionNavLabels;\n  collapsible: boolean;\n}) {\n  const labelId = React.useId();\n  const regionId = React.useId();\n  const [open, setOpen] = useNavGroupOpen(group, group.items.some((i) => i.id === value));\n  const folds = (group.collapsible ?? collapsible) && group.label !== undefined;\n  const rows = group.items.map((item) => (\n    <SectionNavRow\n      key={item.id}\n      item={item}\n      active={item.id === value}\n      nested={folds}\n      onSelect={onSelect}\n      linkComponent={linkComponent}\n    />\n  ));\n  if (folds) {\n    return (\n      <div className=\"flex flex-col pt-1.5 first:pt-0\">\n        <NavGroupHeader\n          label={group.label}\n          labelId={labelId}\n          regionId={regionId}\n          open={open}\n          onToggle={() => setOpen(!open)}\n          href={group.href}\n          linkComponent={linkComponent}\n          labels={labels}\n        />\n        <NavCollapse open={open} id={regionId}>\n          <div className=\"flex flex-col gap-0.5 pt-0.5 pl-3\">{rows}</div>\n        </NavCollapse>\n      </div>\n    );\n  }\n  return (\n    <div className=\"flex flex-col gap-0.5 pt-3.5 first:pt-0\">\n      {(group.label !== undefined || group.description !== undefined) && (\n        <div className=\"flex flex-col\">\n          {group.label !== undefined && <SectionLabel className=\"px-2 py-1\">{group.label}</SectionLabel>}\n          {group.description !== undefined && (\n            <p className=\"px-2 text-caption text-ink-soft\">{group.description}</p>\n          )}\n        </div>\n      )}\n      {rows}\n    </div>\n  );\n}\n\nfunction SectionNavRow({\n  item,\n  active,\n  nested,\n  onSelect,\n  linkComponent,\n}: {\n  item: SectionNavItem;\n  active: boolean;\n  nested: boolean;\n  onSelect: ((id: string) => void) | undefined;\n  linkComponent: React.ElementType | undefined;\n}) {\n  const Icon = item.icon;\n  const className = cn(\n    ITEM,\n    active ? \"bg-active text-ink\" : \"text-ink-mid hover:bg-hover\",\n    nested && \"h-9\",\n  );\n  const content = (\n    <>\n      {Icon && <Icon className=\"size-4 shrink-0 text-ink-soft\" />}\n      <span className=\"min-w-0 flex-1 truncate\">{item.label}</span>\n      {item.trailing}\n    </>\n  );\n  if (item.href !== undefined && !item.disabled) {\n    const Link = linkComponent ?? \"a\";\n    return (\n      <Link\n        href={item.href}\n        aria-current={active ? \"page\" : undefined}\n        className={className}\n        onClick={() => onSelect?.(item.id)}\n      >\n        {content}\n      </Link>\n    );\n  }\n  return (\n    <button\n      type=\"button\"\n      disabled={item.disabled}\n      aria-current={active ? \"true\" : undefined}\n      className={className}\n      onClick={() => onSelect?.(item.id)}\n    >\n      {content}\n    </button>\n  );\n}\n"],"mappings":"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","names":[]}