@evinvest/uikit 0.30.0 → 0.32.0

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

@@ -0,0 +1,139 @@
+"use client";
+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 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
+}) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "data-slot": "section-nav",
+      "aria-label": labels.nav ?? "Sections",
+      className: cn("flex w-64 shrink-0 flex-col gap-0.5", className),
+      ...props,
+      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-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 shrink-0 text-ink-soft" }),
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
+    item.trailing
+  ] });
+  if (item.href !== void 0 && !item.disabled) {
+    const Link = linkComponent ?? "a";
+    return /* @__PURE__ */ jsx(
+      Link,
+      {
+        href: item.href,
+        "aria-current": active ? "page" : void 0,
+        className,
+        onClick: () => onSelect?.(item.id),
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      disabled: item.disabled,
+      "aria-current": active ? "true" : void 0,
+      className,
+      onClick: () => onSelect?.(item.id),
+      children: content
+    }
+  );
+}
+export {
+  SectionNav
+};
+//# sourceMappingURL=section-nav.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/shell/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":[]}

package/dist/components/shell/settled.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/shell/settled.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nexport interface SettledProps extends Omit<React.ComponentProps<\"div\">, \"children\"> {\n  /** True while the data this surface needs is in flight. */\n  loading: boolean;\n  /** What stands in meanwhile — a `Skeleton` or a group of them. */\n  skeleton: React.ReactNode;\n  /** The content; also the empty and error states, guarded on the same condition. */\n  children: React.ReactNode;\n}\n\n/**\n * The skeleton → content handover. Swapped in a single frame, a skeleton reads\n * as a flicker — the eye sees that something changed, not what. Here the\n * content fades and rises the last `--ev-rise` into place\n * (`data-state=\"revealed\"`, motion.css).\n *\n * Deliberately not a cross-fade: the two would have to overlap, which means\n * taking one out of flow and animating a height, and the surface would jump\n * when the content is a different size. And no entrance when no skeleton was\n * shown — data already present on the first render cuts straight in; fading it\n * would invent a delay the data never had.\n *\n * `data-state`: `loading` → `revealed` after a skeleton, `ready` without one.\n */\nexport function Settled({ loading, skeleton, children, ...props }: SettledProps) {\n  // Adjusted during render, not in an effect, so the entrance plays on the very\n  // first render after `loading` drops: an effect would paint the content opaque\n  // once and only then start the fade. `reveals` keys the wrapper, so a later\n  // refetch that shows the skeleton again gets a handover of its own.\n  const [wasLoading, setWasLoading] = React.useState(loading);\n  const [reveals, setReveals] = React.useState(0);\n  if (wasLoading !== loading) {\n    setWasLoading(loading);\n    if (wasLoading) setReveals((n) => n + 1);\n  }\n  if (loading) {\n    return (\n      <div data-slot=\"settled\" data-state=\"loading\" aria-busy=\"true\" {...props}>\n        {skeleton}\n      </div>\n    );\n  }\n  return (\n    <div key={reveals} data-slot=\"settled\" data-state={reveals > 0 ? \"revealed\" : \"ready\"} {...props}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";AAwCM;AAtCN,YAAY,WAAW;AAyBhB,SAAS,QAAQ,EAAE,SAAS,UAAU,UAAU,GAAG,MAAM,GAAiB;AAK/E,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,OAAO;AAC1D,QAAM,CAAC,SAAS,UAAU,IAAI,MAAM,SAAS,CAAC;AAC9C,MAAI,eAAe,SAAS;AAC1B,kBAAc,OAAO;AACrB,QAAI,WAAY,YAAW,CAAC,MAAM,IAAI,CAAC;AAAA,EACzC;AACA,MAAI,SAAS;AACX,WACE,oBAAC,SAAI,aAAU,WAAU,cAAW,WAAU,aAAU,QAAQ,GAAG,OAChE,oBACH;AAAA,EAEJ;AACA,SACE,oBAAC,SAAkB,aAAU,WAAU,cAAY,UAAU,IAAI,aAAa,SAAU,GAAG,OACxF,YADO,OAEV;AAEJ;","names":[]}

package/dist/components/shell/shell-icons.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/shell/shell-icons.tsx"],"sourcesContent":["import * as React from \"react\";\n\n// lucide glyphs the shell needs, inlined so the kit keeps its zero-icon-dep footprint.\nfunction Glyph({ className, children }: { className?: string | undefined; children: React.ReactNode }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden\n    >\n      {children}\n    </svg>\n  );\n}\n\nexport function ChevronLeftIcon({ className }: { className?: string | undefined }) {\n  return (\n    <Glyph className={className}>\n      <path d=\"m15 18-6-6 6-6\" />\n    </Glyph>\n  );\n}\n\nexport function TriangleAlertIcon({ className }: { className?: string | undefined }) {\n  return (\n    <Glyph className={className}>\n      <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" />\n      <path d=\"M12 9v4\" />\n      <path d=\"M12 17h.01\" />\n    </Glyph>\n  );\n}\n\nexport function InfoIcon({ className }: { className?: string | undefined }) {\n  return (\n    <Glyph className={className}>\n      <circle cx=\"12\" cy=\"12\" r=\"10\" />\n      <path d=\"M12 16v-4\" />\n      <path d=\"M12 8h.01\" />\n    </Glyph>\n  );\n}\n\nexport function RefreshIcon({ className }: { className?: string | undefined }) {\n  return (\n    <Glyph className={className}>\n      <path d=\"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8\" />\n      <path d=\"M21 3v5h-5\" />\n      <path d=\"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16\" />\n      <path d=\"M8 16H3v5\" />\n    </Glyph>\n  );\n}\n\nexport function CloseIcon({ className }: { className?: string | undefined }) {\n  return (\n    <Glyph className={className}>\n      <path d=\"M18 6 6 18\" />\n      <path d=\"m6 6 12 12\" />\n    </Glyph>\n  );\n}\n"],"mappings":"AAKI,cAyBA,YAzBA;AALJ,YAAY,WAAW;AAGvB,SAAS,MAAM,EAAE,WAAW,SAAS,GAAkE;AACrG,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAa;AAAA,MACb,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,eAAW;AAAA,MAEV;AAAA;AAAA,EACH;AAEJ;AAEO,SAAS,gBAAgB,EAAE,UAAU,GAAuC;AACjF,SACE,oBAAC,SAAM,WACL,8BAAC,UAAK,GAAE,kBAAiB,GAC3B;AAEJ;AAEO,SAAS,kBAAkB,EAAE,UAAU,GAAuC;AACnF,SACE,qBAAC,SAAM,WACL;AAAA,wBAAC,UAAK,GAAE,4EAA2E;AAAA,IACnF,oBAAC,UAAK,GAAE,WAAU;AAAA,IAClB,oBAAC,UAAK,GAAE,cAAa;AAAA,KACvB;AAEJ;AAEO,SAAS,SAAS,EAAE,UAAU,GAAuC;AAC1E,SACE,qBAAC,SAAM,WACL;AAAA,wBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK;AAAA,IAC/B,oBAAC,UAAK,GAAE,aAAY;AAAA,IACpB,oBAAC,UAAK,GAAE,aAAY;AAAA,KACtB;AAEJ;AAEO,SAAS,YAAY,EAAE,UAAU,GAAuC;AAC7E,SACE,qBAAC,SAAM,WACL;AAAA,wBAAC,UAAK,GAAE,sDAAqD;AAAA,IAC7D,oBAAC,UAAK,GAAE,cAAa;AAAA,IACrB,oBAAC,UAAK,GAAE,uDAAsD;AAAA,IAC9D,oBAAC,UAAK,GAAE,aAAY;AAAA,KACtB;AAEJ;AAEO,SAAS,UAAU,EAAE,UAAU,GAAuC;AAC3E,SACE,qBAAC,SAAM,WACL;AAAA,wBAAC,UAAK,GAAE,cAAa;AAAA,IACrB,oBAAC,UAAK,GAAE,cAAa;AAAA,KACvB;AAEJ;","names":[]}

package/dist/components/{shell-nav.js → shell/shell-nav.js}

@@ -1,10 +1,14 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "../lib/cn.js";
+import { cn } from "../../lib/cn.js";
 import { NavBadge } from "./nav-badge.js";
 import { labelTitle, NavLink } from "./nav-link.js";
-import { resolveActiveNavItem } from "./nav-model.js";
+import { NavCollapse, NavGroupHeader, useNavGroupOpen } from "./nav-collapse.js";
+import {
+  navItemMatch,
+  resolveActiveNavItem
+} from "./nav-model.js";
 import { usePendingNavigation, useSlideMarker } from "./use-shell-nav.js";
 const NAV_FOCUS = "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-secondary";
 const ROW = "flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors";
@@ -19,6 +23,7 @@ function ShellNav({
   onItemIntent,
   onNavigate,
   labels = {},
+  collapsible = false,
   className,
   ...props
 }) {
@@ -31,6 +36,9 @@ function ShellNav({
       group,
       currentId,
       pendingId,
+      pathname,
+      labels,
+      collapsible,
       row: { linkComponent, markPending, onItemIntent, onNavigate, renderItem, badgeLabel: labels.badge }
     },
     group.id
@@ -58,48 +66,82 @@ function ShellNavSection({
   group,
   currentId,
   pendingId,
-  row
+  pathname,
+  row,
+  labels,
+  collapsible
 }) {
-  const root = React.useRef(null);
+  const body = React.useRef(null);
   const labelId = React.useId();
+  const regionId = React.useId();
   const at = group.items.some((i) => i.id === currentId) ? currentId ?? null : null;
-  useSlideMarker(root, at);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: root,
-      "data-slot": "shell-nav-section",
-      className: cn("relative isolate flex flex-col gap-1", group.label !== void 0 && "pl-1"),
-      children: [
-        at !== null && /* @__PURE__ */ jsx(
-          "span",
-          {
-            "data-slot": "shell-nav-marker",
-            "aria-hidden": true,
-            className: "pointer-events-none absolute left-0 top-0 -z-10 rounded-lg bg-primary"
-          }
-        ),
-        group.label !== void 0 && /* @__PURE__ */ jsx("p", { id: labelId, className: "mb-0.5 text-xs font-semibold uppercase tracking-widest text-ink-soft", children: group.label }),
-        /* @__PURE__ */ jsx(
-          "ul",
+  const [open, setOpen] = useNavGroupOpen(group, at !== null);
+  useSlideMarker(body, at);
+  const folds = (group.collapsible ?? collapsible) && group.label !== void 0;
+  const landing = group.href !== void 0 && navItemMatch({ id: group.id, href: group.href, label: "", match: "exact" }, pathname) !== null;
+  const content = /* @__PURE__ */ jsxs("div", { ref: body, className: cn("relative isolate", folds && "pt-1"), children: [
+    at !== null && /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-slot": "shell-nav-marker",
+        "aria-hidden": true,
+        className: "pointer-events-none absolute left-0 top-0 -z-10 rounded-lg bg-primary"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "ul",
+      {
+        "aria-labelledby": group.label !== void 0 ? labelId : void 0,
+        className: cn("flex flex-col gap-1", folds && "pl-3"),
+        children: group.items.map((item) => /* @__PURE__ */ jsx("li", { className: "flex flex-col", children: /* @__PURE__ */ jsx(
+          ShellNavRow,
           {
-            "aria-labelledby": group.label !== void 0 ? labelId : void 0,
-            className: "flex flex-col gap-1",
-            children: group.items.map((item) => /* @__PURE__ */ jsx("li", { className: "flex flex-col", children: /* @__PURE__ */ jsx(
-              ShellNavRow,
-              {
-                item,
-                state: { active: item.id === currentId, pending: item.id === pendingId },
-                row
-              }
-            ) }, item.id))
+            item,
+            nested: folds,
+            state: { active: item.id === currentId, pending: item.id === pendingId },
+            row
           }
-        )
-      ]
-    }
-  );
+        ) }, item.id))
+      }
+    )
+  ] });
+  if (!folds) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "shell-nav-section",
+        className: cn("flex flex-col gap-1", group.label !== void 0 && "pl-1"),
+        children: [
+          group.label !== void 0 && /* @__PURE__ */ jsx("p", { id: labelId, className: "mb-0.5 text-xs font-semibold uppercase tracking-widest text-ink-soft", children: group.label }),
+          content
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "shell-nav-section", "data-state": open ? "open" : "closed", className: "flex flex-col", children: [
+    /* @__PURE__ */ jsx(
+      NavGroupHeader,
+      {
+        label: group.label,
+        labelId,
+        regionId,
+        open,
+        onToggle: () => setOpen(!open),
+        href: group.href,
+        linkComponent: row.linkComponent,
+        current: landing,
+        labels
+      }
+    ),
+    /* @__PURE__ */ jsx(NavCollapse, { open, id: regionId, children: content })
+  ] });
 }
-function ShellNavRow({ item, state, row }) {
+function ShellNavRow({
+  item,
+  state,
+  row,
+  nested
+}) {
   const Icon = item.icon;
   const trailing = typeof item.trailing === "function" ? item.trailing(state) : item.trailing;
   return /* @__PURE__ */ jsx(
@@ -116,7 +158,7 @@ function ShellNavRow({ item, state, row }) {
       className: cn(
         ROW,
         NAV_FOCUS,
-        state.active ? "font-semibold text-on-primary" : "font-medium text-ink hover:bg-hover",
+        state.active ? "font-semibold text-on-primary" : cn("font-medium hover:bg-hover", nested ? "text-ink-mid" : "text-ink"),
         item.disabled && "cursor-not-allowed opacity-50 hover:bg-transparent"
       ),
       children: row.renderItem ? row.renderItem(item, state) : /* @__PURE__ */ jsxs(Fragment, { children: [

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/shell/shell-nav.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { NavBadge } from \"./nav-badge\";\nimport { labelTitle, NavLink, type NavLinkCallbacks } from \"./nav-link\";\nimport { NavCollapse, NavGroupHeader, useNavGroupOpen, type NavCollapseLabels } from \"./nav-collapse\";\nimport {\n  navItemMatch,\n  resolveActiveNavItem,\n  type NavGroup,\n  type NavItem,\n  type NavItemState,\n} from \"./nav-model\";\nimport { usePendingNavigation, useSlideMarker } from \"./use-shell-nav\";\n\nexport interface ShellNavLabels extends NavCollapseLabels {\n  /** Accessible name of the nav holding `groups`. Default `\"Main\"`. */\n  primary?: string;\n  /** Accessible name of the nav holding `footerGroups`. Default `\"Account\"`. */\n  footer?: string;\n  /** Spoken text of a numeric badge, given the real count. Default `\"{n} new\"`. */\n  badge?: (count: number) => string;\n}\n\nexport interface ShellNavProps\n  extends Omit<React.ComponentProps<\"aside\">, \"children\">,\n    NavLinkCallbacks {\n  groups: readonly NavGroup[];\n  /** Pinned to the bottom of the rail (profile, notifications, settings). */\n  footerGroups?: readonly NavGroup[];\n  /** The router's current path — `usePathname()` in Next. */\n  pathname: string;\n  /** Your router's link (`next/link`); defaults to a plain `<a>`. */\n  linkComponent?: React.ElementType;\n  /** Above the groups — the brand lock-up. */\n  header?: React.ReactNode;\n  /** Below the footer groups — the signed-in account, a sign-out. */\n  footer?: React.ReactNode;\n  /** Replaces a row's content (icon, label, badge); the link, `aria-current` and the marker stay the kit's. */\n  renderItem?: (item: NavItem, state: NavItemState) => React.ReactNode;\n  labels?: ShellNavLabels;\n  /** Makes every labelled group collapsible; a group's own `collapsible` wins. Default `false`. */\n  collapsible?: boolean;\n}\n\n// The ring is the solid token, never a tint — at 50% it composites under the 3:1\n// non-text floor. The offset keeps it legible around the marked row, whose fill\n// is that same hue.\nconst NAV_FOCUS =\n  \"outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-secondary\";\nconst ROW = \"flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors\";\n\n/**\n * The app's left rail: data-driven groups, a footer block pinned to the bottom,\n * one sliding marker per group, and an optimistic mark on click so the row\n * answers the click rather than the router's round-trip.\n *\n * Exactly one row across the rail is current — the strongest claim on the path\n * (see {@link resolveActiveNavItem}) — so overlapping `prefix` items are safe.\n * Visibility (roles, flags) is the caller's: pass only the items to show.\n */\nexport function ShellNav({\n  groups,\n  footerGroups = [],\n  pathname,\n  linkComponent,\n  header,\n  footer,\n  renderItem,\n  onItemIntent,\n  onNavigate,\n  labels = {},\n  collapsible = false,\n  className,\n  ...props\n}: ShellNavProps) {\n  const [pendingId, markPending] = usePendingNavigation(pathname);\n  const all = [...groups, ...footerGroups].flatMap((g) => g.items);\n  const currentId =\n    (pendingId !== null && all.some((i) => i.id === pendingId) ? pendingId : undefined) ??\n    resolveActiveNavItem(all, pathname)?.id;\n  const section = (group: NavGroup) => (\n    <ShellNavSection\n      key={group.id}\n      group={group}\n      currentId={currentId}\n      pendingId={pendingId}\n      pathname={pathname}\n      labels={labels}\n      collapsible={collapsible}\n      row={{ linkComponent, markPending, onItemIntent, onNavigate, renderItem, badgeLabel: labels.badge }}\n    />\n  );\n  return (\n    <aside\n      data-slot=\"shell-nav\"\n      className={cn(\n        \"flex h-full w-(--shell-rail-w) flex-col gap-7 overflow-y-auto border-r border-border bg-secondary px-4.5 pb-5 pt-6\",\n        className,\n      )}\n      {...props}\n    >\n      {header}\n      <nav aria-label={labels.primary ?? \"Main\"} className=\"flex flex-col gap-4.5\">\n        {groups.map(section)}\n      </nav>\n      <div className=\"flex-1\" />\n      {footerGroups.length > 0 && (\n        <nav aria-label={labels.footer ?? \"Account\"} className=\"flex flex-col gap-4.5\">\n          {footerGroups.map(section)}\n        </nav>\n      )}\n      {footer}\n    </aside>\n  );\n}\n\ninterface RowContext extends NavLinkCallbacks {\n  linkComponent: React.ElementType | undefined;\n  markPending: (id: string) => void;\n  renderItem: ShellNavProps[\"renderItem\"];\n  badgeLabel: ((count: number) => string) | undefined;\n}\n\n// One marker node per SECTION, mounted once and moved — not one per rail: a\n// marker travelling between groups would cross headings that have nothing to do\n// with either row. Crossing groups unmounts one marker and mounts another (a\n// fade). `isolate` is load-bearing: the marker sits on a negative z-index and\n// without its own stacking context would land behind the rail's background.\n// The marker lives in the BODY, below the header, so a folding section clips it\n// together with its rows instead of leaving it painted over the next group.\nfunction ShellNavSection({\n  group,\n  currentId,\n  pendingId,\n  pathname,\n  row,\n  labels,\n  collapsible,\n}: {\n  group: NavGroup;\n  currentId: string | undefined;\n  pendingId: string | null;\n  pathname: string;\n  row: RowContext;\n  labels: ShellNavLabels;\n  collapsible: boolean;\n}) {\n  const body = React.useRef<HTMLDivElement>(null);\n  const labelId = React.useId();\n  const regionId = React.useId();\n  const at = group.items.some((i) => i.id === currentId) ? (currentId ?? null) : null;\n  const [open, setOpen] = useNavGroupOpen(group, at !== null);\n  useSlideMarker(body, at);\n  const folds = (group.collapsible ?? collapsible) && group.label !== undefined;\n  const landing =\n    group.href !== undefined &&\n    navItemMatch({ id: group.id, href: group.href, label: \"\", match: \"exact\" }, pathname) !== null;\n  const content = (\n    <div ref={body} className={cn(\"relative isolate\", folds && \"pt-1\")}>\n      {/* First in DOM order: the pre-hydration fill in motion.css reaches the marked\n          row through a sibling combinator, which only looks forward. */}\n      {at !== null && (\n        <span\n          data-slot=\"shell-nav-marker\"\n          aria-hidden\n          className=\"pointer-events-none absolute left-0 top-0 -z-10 rounded-lg bg-primary\"\n        />\n      )}\n      <ul\n        aria-labelledby={group.label !== undefined ? labelId : undefined}\n        className={cn(\"flex flex-col gap-1\", folds && \"pl-3\")}\n      >\n        {group.items.map((item) => (\n          <li key={item.id} className=\"flex flex-col\">\n            <ShellNavRow\n              item={item}\n              nested={folds}\n              state={{ active: item.id === currentId, pending: item.id === pendingId }}\n              row={row}\n            />\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n  if (!folds) {\n    return (\n      <div\n        data-slot=\"shell-nav-section\"\n        className={cn(\"flex flex-col gap-1\", group.label !== undefined && \"pl-1\")}\n      >\n        {group.label !== undefined && (\n          <p id={labelId} className=\"mb-0.5 text-xs font-semibold uppercase tracking-widest text-ink-soft\">\n            {group.label}\n          </p>\n        )}\n        {content}\n      </div>\n    );\n  }\n  return (\n    <div data-slot=\"shell-nav-section\" data-state={open ? \"open\" : \"closed\"} className=\"flex flex-col\">\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={row.linkComponent}\n        current={landing}\n        labels={labels}\n      />\n      <NavCollapse open={open} id={regionId}>\n        {content}\n      </NavCollapse>\n    </div>\n  );\n}\n\nfunction ShellNavRow({\n  item,\n  state,\n  row,\n  nested,\n}: {\n  item: NavItem;\n  state: NavItemState;\n  row: RowContext;\n  nested: boolean;\n}) {\n  const Icon = item.icon;\n  const trailing = typeof item.trailing === \"function\" ? item.trailing(state) : item.trailing;\n  return (\n    <NavLink\n      item={item}\n      current={state.active}\n      pending={state.pending}\n      linkComponent={row.linkComponent}\n      markPending={row.markPending}\n      onItemIntent={row.onItemIntent}\n      onNavigate={row.onNavigate}\n      title={labelTitle(item.label)}\n      className={cn(\n        ROW,\n        NAV_FOCUS,\n        state.active\n          ? \"font-semibold text-on-primary\"\n          : cn(\"font-medium hover:bg-hover\", nested ? \"text-ink-mid\" : \"text-ink\"),\n        item.disabled && \"cursor-not-allowed opacity-50 hover:bg-transparent\",\n      )}\n    >\n      {row.renderItem ? (\n        row.renderItem(item, state)\n      ) : (\n        <>\n          {Icon && <Icon className=\"size-4.5 shrink-0\" />}\n          {/* `min-w-0`: without it the label refuses to shrink below its own text and\n              the rail widens to the longest translation instead of truncating. */}\n          <span className=\"min-w-0 flex-1 truncate\">{item.label}</span>\n          {typeof item.badge === \"number\" ? (\n            <NavBadge\n              count={item.badge}\n              active={state.active}\n              {...(row.badgeLabel ? { label: row.badgeLabel } : {})}\n            />\n          ) : (\n            item.badge\n          )}\n          {trailing}\n        </>\n      )}\n    </NavLink>\n  );\n}\n"],"mappings":";AAmFI,SA8KI,UA9KJ,KAYA,YAZA;AAjFJ,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,gBAAgB;AACzB,SAAS,YAAY,eAAsC;AAC3D,SAAS,aAAa,gBAAgB,uBAA+C;AACrF;AAAA,EACE;AAAA,EACA;AAAA,OAIK;AACP,SAAS,sBAAsB,sBAAsB;AAmCrD,MAAM,YACJ;AACF,MAAM,MAAM;AAWL,SAAS,SAAS;AAAA,EACvB;AAAA,EACA,eAAe,CAAC;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS,CAAC;AAAA,EACV,cAAc;AAAA,EACd;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,CAAC,WAAW,WAAW,IAAI,qBAAqB,QAAQ;AAC9D,QAAM,MAAM,CAAC,GAAG,QAAQ,GAAG,YAAY,EAAE,QAAQ,CAAC,MAAM,EAAE,KAAK;AAC/D,QAAM,aACH,cAAc,QAAQ,IAAI,KAAK,CAAC,MAAM,EAAE,OAAO,SAAS,IAAI,YAAY,WACzE,qBAAqB,KAAK,QAAQ,GAAG;AACvC,QAAM,UAAU,CAAC,UACf;AAAA,IAAC;AAAA;AAAA,MAEC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK,EAAE,eAAe,aAAa,cAAc,YAAY,YAAY,YAAY,OAAO,MAAM;AAAA;AAAA,IAP7F,MAAM;AAAA,EAQb;AAEF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,QACD,oBAAC,SAAI,cAAY,OAAO,WAAW,QAAQ,WAAU,yBAClD,iBAAO,IAAI,OAAO,GACrB;AAAA,QACA,oBAAC,SAAI,WAAU,UAAS;AAAA,QACvB,aAAa,SAAS,KACrB,oBAAC,SAAI,cAAY,OAAO,UAAU,WAAW,WAAU,yBACpD,uBAAa,IAAI,OAAO,GAC3B;AAAA,QAED;AAAA;AAAA;AAAA,EACH;AAEJ;AAgBA,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQG;AACD,QAAM,OAAO,MAAM,OAAuB,IAAI;AAC9C,QAAM,UAAU,MAAM,MAAM;AAC5B,QAAM,WAAW,MAAM,MAAM;AAC7B,QAAM,KAAK,MAAM,MAAM,KAAK,CAAC,MAAM,EAAE,OAAO,SAAS,IAAK,aAAa,OAAQ;AAC/E,QAAM,CAAC,MAAM,OAAO,IAAI,gBAAgB,OAAO,OAAO,IAAI;AAC1D,iBAAe,MAAM,EAAE;AACvB,QAAM,SAAS,MAAM,eAAe,gBAAgB,MAAM,UAAU;AACpE,QAAM,UACJ,MAAM,SAAS,UACf,aAAa,EAAE,IAAI,MAAM,IAAI,MAAM,MAAM,MAAM,OAAO,IAAI,OAAO,QAAQ,GAAG,QAAQ,MAAM;AAC5F,QAAM,UACJ,qBAAC,SAAI,KAAK,MAAM,WAAW,GAAG,oBAAoB,SAAS,MAAM,GAG9D;AAAA,WAAO,QACN;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,eAAW;AAAA,QACX,WAAU;AAAA;AAAA,IACZ;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC,mBAAiB,MAAM,UAAU,SAAY,UAAU;AAAA,QACvD,WAAW,GAAG,uBAAuB,SAAS,MAAM;AAAA,QAEnD,gBAAM,MAAM,IAAI,CAAC,SAChB,oBAAC,QAAiB,WAAU,iBAC1B;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,QAAQ;AAAA,YACR,OAAO,EAAE,QAAQ,KAAK,OAAO,WAAW,SAAS,KAAK,OAAO,UAAU;AAAA,YACvE;AAAA;AAAA,QACF,KANO,KAAK,EAOd,CACD;AAAA;AAAA,IACH;AAAA,KACF;AAEF,MAAI,CAAC,OAAO;AACV,WACE;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,WAAW,GAAG,uBAAuB,MAAM,UAAU,UAAa,MAAM;AAAA,QAEvE;AAAA,gBAAM,UAAU,UACf,oBAAC,OAAE,IAAI,SAAS,WAAU,wEACvB,gBAAM,OACT;AAAA,UAED;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACA,SACE,qBAAC,SAAI,aAAU,qBAAoB,cAAY,OAAO,SAAS,UAAU,WAAU,iBACjF;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,MAAM;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,MAAM,QAAQ,CAAC,IAAI;AAAA,QAC7B,MAAM,MAAM;AAAA,QACZ,eAAe,IAAI;AAAA,QACnB,SAAS;AAAA,QACT;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,eAAY,MAAY,IAAI,UAC1B,mBACH;AAAA,KACF;AAEJ;AAEA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,OAAO,KAAK;AAClB,QAAM,WAAW,OAAO,KAAK,aAAa,aAAa,KAAK,SAAS,KAAK,IAAI,KAAK;AACnF,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAS,MAAM;AAAA,MACf,SAAS,MAAM;AAAA,MACf,eAAe,IAAI;AAAA,MACnB,aAAa,IAAI;AAAA,MACjB,cAAc,IAAI;AAAA,MAClB,YAAY,IAAI;AAAA,MAChB,OAAO,WAAW,KAAK,KAAK;AAAA,MAC5B,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,MAAM,SACF,kCACA,GAAG,8BAA8B,SAAS,iBAAiB,UAAU;AAAA,QACzE,KAAK,YAAY;AAAA,MACnB;AAAA,MAEC,cAAI,aACH,IAAI,WAAW,MAAM,KAAK,IAE1B,iCACG;AAAA,gBAAQ,oBAAC,QAAK,WAAU,qBAAoB;AAAA,QAG7C,oBAAC,UAAK,WAAU,2BAA2B,eAAK,OAAM;AAAA,QACrD,OAAO,KAAK,UAAU,WACrB;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,KAAK;AAAA,YACZ,QAAQ,MAAM;AAAA,YACb,GAAI,IAAI,aAAa,EAAE,OAAO,IAAI,WAAW,IAAI,CAAC;AAAA;AAAA,QACrD,IAEA,KAAK;AAAA,QAEN;AAAA,SACH;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/components/shell/smart-header.js

@@ -0,0 +1,53 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/cn.js";
+import {
+  SMART_HEADER_BAR,
+  SMART_HEADER_BASE,
+  SMART_HEADER_CONTEXT,
+  SMART_HEADER_TOOLBAR
+} from "../../generated/smart-header.js";
+import { TopBar } from "./top-bar.js";
+function SmartHeader({
+  state = "default",
+  start,
+  end,
+  collapsed,
+  banner,
+  toolbar,
+  context,
+  palette,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "smart-header",
+      "data-state": state,
+      className: cn(SMART_HEADER_BASE, className),
+      ...props,
+      children: [
+        state === "banner" && banner,
+        /* @__PURE__ */ jsx(
+          TopBar,
+          {
+            className: SMART_HEADER_BAR,
+            start: /* @__PURE__ */ jsxs(Fragment, { children: [
+              start,
+              state === "collapsed" && collapsed
+            ] }),
+            end
+          }
+        ),
+        state === "default" && toolbar != null && /* @__PURE__ */ jsx("div", { "data-slot": "smart-header-toolbar", className: SMART_HEADER_TOOLBAR, children: toolbar }),
+        state === "default" && context != null && /* @__PURE__ */ jsx("div", { "data-slot": "smart-header-context", className: SMART_HEADER_CONTEXT, children: context }),
+        state === "search" && palette != null && /* @__PURE__ */ jsx("div", { "data-slot": "smart-header-palette", children: palette })
+      ]
+    }
+  );
+}
+export {
+  SmartHeader
+};
+//# sourceMappingURL=smart-header.js.map

package/dist/components/shell/smart-header.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/shell/smart-header.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  SMART_HEADER_BAR,\n  SMART_HEADER_BASE,\n  SMART_HEADER_CONTEXT,\n  SMART_HEADER_TOOLBAR,\n} from \"../../generated/smart-header\";\nimport { TopBar } from \"./top-bar\";\n\nexport type SmartHeaderState = \"default\" | \"collapsed\" | \"banner\" | \"search\";\n\nexport interface SmartHeaderProps extends Omit<React.ComponentProps<\"div\">, \"children\"> {\n  /**\n   * `default` — bar, toolbar and context line; `collapsed` — the toolbar folds\n   * into the bar as `collapsed`; `banner` — a banner row above one bar;\n   * `search` — one bar with the `palette` under it.\n   */\n  state?: SmartHeaderState;\n  /** Brand, workspace tabs: the left side of the bar. */\n  start?: React.ReactNode;\n  /** The right side of the bar: icon actions, balance, bell, account menu. */\n  end?: React.ReactNode;\n  /** The folded toolbar, between `start` and `end`; shown in `collapsed` only. */\n  collapsed?: React.ReactNode;\n  /** A `SystemBanner`; shown in `banner` only. */\n  banner?: React.ReactNode;\n  /** The second row, 44 high; shown in `default` only. */\n  toolbar?: React.ReactNode;\n  /** The slim line on the page fill under the toolbar; shown in `default` only. */\n  context?: React.ReactNode;\n  /** A `CommandPalette` or any panel that drops from the bar; shown in `search` only. */\n  palette?: React.ReactNode;\n}\n\n/**\n * A page header that adapts to scroll and alerts. The bar is the same in every\n * state, so switching never moves the brand or the account: only the rows\n * around it come and go. Layout only; the caller owns the state and its trigger\n * (a scroll observer, a feed status, the search button).\n */\nexport function SmartHeader({\n  state = \"default\",\n  start,\n  end,\n  collapsed,\n  banner,\n  toolbar,\n  context,\n  palette,\n  className,\n  ...props\n}: SmartHeaderProps) {\n  return (\n    <div\n      data-slot=\"smart-header\"\n      data-state={state}\n      className={cn(SMART_HEADER_BASE, className)}\n      {...props}\n    >\n      {state === \"banner\" && banner}\n      <TopBar\n        className={SMART_HEADER_BAR}\n        start={\n          <>\n            {start}\n            {state === \"collapsed\" && collapsed}\n          </>\n        }\n        end={end}\n      />\n      {state === \"default\" && toolbar != null && (\n        <div data-slot=\"smart-header-toolbar\" className={SMART_HEADER_TOOLBAR}>\n          {toolbar}\n        </div>\n      )}\n      {state === \"default\" && context != null && (\n        <div data-slot=\"smart-header-context\" className={SMART_HEADER_CONTEXT}>\n          {context}\n        </div>\n      )}\n      {state === \"search\" && palette != null && <div data-slot=\"smart-header-palette\">{palette}</div>}\n    </div>\n  );\n}\n"],"mappings":"AA6DM,SAGI,UAHJ,KAGI,YAHJ;AA7DN,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AAiChB,SAAS,YAAY;AAAA,EAC1B,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,cAAY;AAAA,MACZ,WAAW,GAAG,mBAAmB,SAAS;AAAA,MACzC,GAAG;AAAA,MAEH;AAAA,kBAAU,YAAY;AAAA,QACvB;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,YACX,OACE,iCACG;AAAA;AAAA,cACA,UAAU,eAAe;AAAA,eAC5B;AAAA,YAEF;AAAA;AAAA,QACF;AAAA,QACC,UAAU,aAAa,WAAW,QACjC,oBAAC,SAAI,aAAU,wBAAuB,WAAW,sBAC9C,mBACH;AAAA,QAED,UAAU,aAAa,WAAW,QACjC,oBAAC,SAAI,aAAU,wBAAuB,WAAW,sBAC9C,mBACH;AAAA,QAED,UAAU,YAAY,WAAW,QAAQ,oBAAC,SAAI,aAAU,wBAAwB,mBAAQ;AAAA;AAAA;AAAA,EAC3F;AAEJ;","names":[]}

package/dist/components/{status-screen.js → shell/status-screen.js}

@@ -1,9 +1,9 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "../lib/cn.js";
-import { accentTextClasses } from "../generated/accent.js";
-import { buttonVariants } from "./button.js";
+import { cn } from "../../lib/cn.js";
+import { accentTextClasses } from "../../generated/accent.js";
+import { buttonVariants } from "../atomic/button.js";
 import { Logo } from "./logo.js";
 function statusCtaClass(accent, variant) {
   return cn(

package/dist/components/shell/status-screen.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/shell/status-screen.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { accentTextClasses, type Accent } from \"../../generated/accent\";\nimport { buttonVariants, type ButtonVariant } from \"../atomic/button\";\nimport { Logo } from \"./logo\";\n\n/**\n * The shared 404 / 403 / 500 status surface.\n *\n * `StatusScreen` is the generic shell; `NotFound` / `Forbidden` / `ServerError`\n * are the ready-made pages with their copy baked in — a host renders those with\n * its own hrefs. The mark is `Logo`'s, i.e. the consumer's. Links default to a\n * plain `<a>` (a full document load, which is what you want off an error page);\n * pass `linkComponent` (e.g. `next/link`) for soft navigation from a client\n * boundary.\n */\nexport type { Accent };\n\n/**\n * A status CTA is a Button at the page's accent: the canonical button string for\n * that variant and rung, then the mono/uppercase treatment the error pages wear.\n *\n * Exported because a host that renders its own action into `StatusScreen`'s\n * slot — a retry button wired to Next's `reset`, say — has to be able to match\n * the CTAs beside it.\n */\nexport function statusCtaClass(accent: Accent, variant: ButtonVariant) {\n  return cn(\n    buttonVariants({ variant, size: \"lg\", accent }),\n    \"font-mono text-xs uppercase tracking-widest\",\n  );\n}\n\n// lucide `arrow-left`, inlined so the kit keeps its zero-icon-dep footprint.\nfunction ArrowLeftIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden\n    >\n      <path d=\"m12 19-7-7 7-7\" />\n      <path d=\"M19 12H5\" />\n    </svg>\n  );\n}\n\nexport interface StatusLinkData {\n  label: string;\n  href: string;\n  variant?: ButtonVariant;\n  leadingArrow?: boolean;\n}\n\nexport interface StatusScreenProps {\n  accent: Accent;\n  eyebrow: string;\n  code: string;\n  headlineLead: string;\n  headlineAccent: string;\n  headlineTail?: string;\n  subtext: string;\n  links?: StatusLinkData[];\n  /** Leading action slot, rendered before `links` (e.g. the 500 client retry). */\n  children?: React.ReactNode;\n  /** CTA element — `next/link` for soft nav; defaults to `<a>` (full load). */\n  linkComponent?: React.ElementType;\n}\n\n/**\n * Shared skeleton for the 404 / 403 / 500 status pages: a centred hero with the\n * logo mark, a mono eyebrow, a giant Playfair code, a headline whose final clause\n * is an italic accent, supporting copy, and the CTAs. The accent threads through\n * all four marks. Actions render inline (from `links` data, plus an optional\n * `children` slot) — never passed as a JSX prop through a server boundary.\n */\nexport function StatusScreen({\n  accent,\n  eyebrow,\n  code,\n  headlineLead,\n  headlineAccent,\n  headlineTail = \".\",\n  subtext,\n  links,\n  children,\n  linkComponent,\n}: StatusScreenProps) {\n  const L = linkComponent ?? \"a\";\n  const accentText = accentTextClasses[accent];\n  return (\n    <section className=\"relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-background px-6 py-32 text-center\">\n      <div\n        aria-hidden\n        className={cn(\n          \"pointer-events-none absolute inset-0 opacity-[0.07] [background:radial-gradient(55%_45%_at_50%_30%,currentColor,transparent_70%)]\",\n          accentText,\n        )}\n      />\n      <div className=\"relative z-10 flex w-full max-w-2xl flex-col items-center\">\n        <Logo className={cn(\"mb-7 h-10 w-auto\", accentText)} />\n        <p className={cn(\"mb-6 font-mono text-[11px] uppercase tracking-[0.34em]\", accentText)}>{eyebrow}</p>\n        <p className={cn(\"font-serif text-[110px] font-medium leading-[0.9] sm:text-[180px]\", accentText)}>{code}</p>\n        <h1 className=\"mt-4 font-serif text-3xl font-light leading-tight text-ink sm:text-5xl\">\n          {headlineLead}\n          <span className={cn(\"font-serif italic\", accentText)}>{headlineAccent}</span>\n          {headlineTail}\n        </h1>\n        <p className=\"mx-auto mt-5 max-w-md text-sm leading-relaxed text-ink/60 sm:text-base\">{subtext}</p>\n        <div className=\"mt-9 flex flex-col items-center gap-3 sm:flex-row\">\n          {children}\n          {links?.map((link) => (\n            <L key={link.label} href={link.href} className={statusCtaClass(accent, link.variant ?? \"primary\")}>\n              {link.leadingArrow ? <ArrowLeftIcon className=\"mr-2 h-4 w-4\" /> : null}\n              {link.label}\n            </L>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n\nexport interface StatusPageProps {\n  /** CTA element — `next/link` for soft nav; defaults to `<a>` (full load). */\n  linkComponent?: React.ElementType;\n  /** \"Back to home\" target — `/` for the landing, `/cabinet` for the cabinet. */\n  homeHref?: string;\n  /** Secondary CTA target (contact / request access). */\n  contactHref?: string;\n}\n\n/** 404 — page not found. */\nexport function NotFound({ linkComponent = \"a\", homeHref = \"/\", contactHref = \"/contact\" }: StatusPageProps) {\n  return (\n    <StatusScreen\n      accent=\"debug\"\n      eyebrow=\"Page not found\"\n      code=\"404\"\n      headlineLead=\"You've reached \"\n      headlineAccent=\"open water\"\n      subtext=\"The page you're looking for has drifted off our coastline — moved, renamed, or never charted. Let's get you back to shore.\"\n      linkComponent={linkComponent}\n      links={[\n        { label: \"Back to home\", href: homeHref, leadingArrow: true },\n        { label: \"Contact the team\", href: contactHref, variant: \"outline\" },\n      ]}\n    />\n  );\n}\n\n/** 403 — access forbidden. */\nexport function Forbidden({ linkComponent = \"a\", homeHref = \"/\", contactHref = \"/contact\" }: StatusPageProps) {\n  return (\n    <StatusScreen\n      accent=\"warn\"\n      eyebrow=\"Access forbidden\"\n      code=\"403\"\n      headlineLead=\"This harbour is \"\n      headlineAccent=\"private\"\n      subtext=\"You don't have the credentials to view this page. If you believe you should, our team can open the right doors.\"\n      linkComponent={linkComponent}\n      links={[\n        { label: \"Back to home\", href: homeHref, leadingArrow: true },\n        { label: \"Request access\", href: contactHref, variant: \"outline\" },\n      ]}\n    />\n  );\n}\n\nexport interface ServerErrorProps {\n  /** CTA element — `next/link` for soft nav; defaults to `<a>` (full load). */\n  linkComponent?: React.ElementType;\n  /** \"Back to home\" target — `/` for the landing, `/cabinet` for the cabinet. */\n  homeHref?: string;\n  /** Retry handler (e.g. Next's error-boundary `reset`); falls back to a reload. */\n  reset?: () => void;\n}\n\n/** 500 — server error. The \"Try again\" button runs `reset` or reloads the page. */\nexport function ServerError({ linkComponent = \"a\", homeHref = \"/\", reset }: ServerErrorProps) {\n  return (\n    <StatusScreen\n      accent=\"error\"\n      eyebrow=\"Server error\"\n      code=\"500\"\n      headlineLead=\"Our systems are \"\n      headlineAccent=\"recalibrating\"\n      subtext=\"Something broke on our end — not yours. We've been alerted and are restoring service. Please try again in a moment.\"\n      linkComponent={linkComponent}\n      links={[{ label: \"Back to home\", href: homeHref, variant: \"outline\", leadingArrow: true }]}\n    >\n      <button\n        type=\"button\"\n        className={statusCtaClass(\"error\", \"primary\")}\n        onClick={() => (reset ? reset() : window.location.reload())}\n      >\n        Try again\n      </button>\n    </StatusScreen>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/{system-banner.js → shell/system-banner.js}

@@ -1,46 +1,56 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "../lib/cn.js";
+import { cn } from "../../lib/cn.js";
+import {
+  SYSTEM_BANNER_ACTION,
+  SYSTEM_BANNER_BASE,
+  SYSTEM_BANNER_BODY_AFTER_TITLE,
+  SYSTEM_BANNER_DISMISS,
+  SYSTEM_BANNER_GLYPH,
+  SYSTEM_BANNER_ICON,
+  SYSTEM_BANNER_MESSAGE,
+  SYSTEM_BANNER_TITLE,
+  systemBannerIconToneClasses,
+  systemBannerToneClasses
+} from "../../generated/system-banner.js";
 import { CloseIcon, InfoIcon, TriangleAlertIcon } from "./shell-icons.js";
-const TONE = {
-  warn: "border-accent-warn/40 bg-accent-warn/10 text-accent-warn",
-  info: "border-border bg-card text-ink"
-};
 function SystemBanner({
   tone = "info",
   title,
   icon,
   onDismiss,
+  action,
   labels = {},
   className,
   children,
   ...props
 }) {
-  const glyph = icon !== void 0 ? icon : tone === "warn" ? /* @__PURE__ */ jsx(TriangleAlertIcon, { className: "size-4" }) : /* @__PURE__ */ jsx(InfoIcon, { className: "size-4" });
+  const glyph = icon !== void 0 ? icon : tone === "warn" ? /* @__PURE__ */ jsx(TriangleAlertIcon, { className: SYSTEM_BANNER_GLYPH }) : /* @__PURE__ */ jsx(InfoIcon, { className: SYSTEM_BANNER_GLYPH });
   return /* @__PURE__ */ jsxs(
     "div",
     {
       "data-slot": "system-banner",
       "data-tone": tone,
       role: "status",
-      className: cn("flex items-start gap-2.5 rounded-lg border px-4 py-2.5 text-sm", TONE[tone], className),
+      className: cn(SYSTEM_BANNER_BASE, systemBannerToneClasses[tone], className),
       ...props,
       children: [
-        glyph !== null && /* @__PURE__ */ jsx("span", { className: "mt-0.5 flex shrink-0", children: glyph }),
-        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          title !== void 0 && /* @__PURE__ */ jsx("span", { className: "font-semibold", children: title }),
+        glyph !== null && /* @__PURE__ */ jsx("span", { className: cn(SYSTEM_BANNER_ICON, systemBannerIconToneClasses[tone]), children: glyph }),
+        /* @__PURE__ */ jsxs("div", { className: SYSTEM_BANNER_MESSAGE, children: [
+          title !== void 0 && /* @__PURE__ */ jsx("span", { className: SYSTEM_BANNER_TITLE, children: title }),
           title !== void 0 && children !== void 0 && " \u2014 ",
-          children !== void 0 && /* @__PURE__ */ jsx("span", { className: cn(title !== void 0 && tone === "info" && "text-ink-soft"), children })
+          children !== void 0 && /* @__PURE__ */ jsx("span", { className: cn(title !== void 0 && SYSTEM_BANNER_BODY_AFTER_TITLE), children })
         ] }),
+        action !== void 0 && /* @__PURE__ */ jsx("span", { className: SYSTEM_BANNER_ACTION, children: action }),
         onDismiss && /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
             "aria-label": labels.dismiss ?? "Dismiss",
             onClick: onDismiss,
-            className: "-mr-1 shrink-0 rounded-md p-0.5 opacity-70 outline-none transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring",
-            children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-4" })
+            className: SYSTEM_BANNER_DISMISS,
+            children: /* @__PURE__ */ jsx(CloseIcon, { className: SYSTEM_BANNER_GLYPH })
           }
         )
       ]

package/dist/components/shell/system-banner.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/shell/system-banner.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  SYSTEM_BANNER_ACTION,\n  SYSTEM_BANNER_BASE,\n  SYSTEM_BANNER_BODY_AFTER_TITLE,\n  SYSTEM_BANNER_DISMISS,\n  SYSTEM_BANNER_GLYPH,\n  SYSTEM_BANNER_ICON,\n  SYSTEM_BANNER_MESSAGE,\n  SYSTEM_BANNER_TITLE,\n  systemBannerIconToneClasses,\n  systemBannerToneClasses,\n  type SystemBannerTone,\n} from \"../../generated/system-banner\";\nimport { CloseIcon, InfoIcon, TriangleAlertIcon } from \"./shell-icons\";\n\nexport type { SystemBannerTone };\n\nexport interface SystemBannerLabels {\n  /** The close button. Default `\"Dismiss\"`. */\n  dismiss?: string;\n}\n\nexport interface SystemBannerProps extends Omit<React.ComponentProps<\"div\">, \"title\"> {\n  /** `warn` — a platform state (maintenance, read-only); `info` — an announcement. */\n  tone?: SystemBannerTone;\n  /** Bold lead before the message. */\n  title?: React.ReactNode;\n  /** Replaces the tone's glyph; `null` drops it. */\n  icon?: React.ReactNode;\n  /** Shows a close button; remembering the dismissal is the caller's. */\n  onDismiss?: () => void;\n  /** A link or button after the message. */\n  action?: React.ReactNode;\n  labels?: SystemBannerLabels;\n}\n\n/**\n * A slim full-width strip above the page — presentation only: where its state\n * comes from, and whether a dismissal sticks, are the caller's. Put it in\n * `AppShell`'s `banner` slot; several stack with a gap.\n */\nexport function SystemBanner({\n  tone = \"info\",\n  title,\n  icon,\n  onDismiss,\n  action,\n  labels = {},\n  className,\n  children,\n  ...props\n}: SystemBannerProps) {\n  const glyph =\n    icon !== undefined ? icon : tone === \"warn\" ? <TriangleAlertIcon className={SYSTEM_BANNER_GLYPH} /> : <InfoIcon className={SYSTEM_BANNER_GLYPH} />;\n  return (\n    <div\n      data-slot=\"system-banner\"\n      data-tone={tone}\n      role=\"status\"\n      className={cn(SYSTEM_BANNER_BASE, systemBannerToneClasses[tone], className)}\n      {...props}\n    >\n      {glyph !== null && <span className={cn(SYSTEM_BANNER_ICON, systemBannerIconToneClasses[tone])}>{glyph}</span>}\n      <div className={SYSTEM_BANNER_MESSAGE}>\n        {title !== undefined && <span className={SYSTEM_BANNER_TITLE}>{title}</span>}\n        {title !== undefined && children !== undefined && \" — \"}\n        {children !== undefined && <span className={cn(title !== undefined && SYSTEM_BANNER_BODY_AFTER_TITLE)}>{children}</span>}\n      </div>\n      {action !== undefined && <span className={SYSTEM_BANNER_ACTION}>{action}</span>}\n      {onDismiss && (\n        <button\n          type=\"button\"\n          aria-label={labels.dismiss ?? \"Dismiss\"}\n          onClick={onDismiss}\n          className={SYSTEM_BANNER_DISMISS}\n        >\n          <CloseIcon className={SYSTEM_BANNER_GLYPH} />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAyDkD,cAU5C,YAV4C;AAvDlD,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,WAAW,UAAU,yBAAyB;AA4BhD,SAAS,aAAa;AAAA,EAC3B,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS,CAAC;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,QACJ,SAAS,SAAY,OAAO,SAAS,SAAS,oBAAC,qBAAkB,WAAW,qBAAqB,IAAK,oBAAC,YAAS,WAAW,qBAAqB;AAClJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,aAAW;AAAA,MACX,MAAK;AAAA,MACL,WAAW,GAAG,oBAAoB,wBAAwB,IAAI,GAAG,SAAS;AAAA,MACzE,GAAG;AAAA,MAEH;AAAA,kBAAU,QAAQ,oBAAC,UAAK,WAAW,GAAG,oBAAoB,4BAA4B,IAAI,CAAC,GAAI,iBAAM;AAAA,QACtG,qBAAC,SAAI,WAAW,uBACb;AAAA,oBAAU,UAAa,oBAAC,UAAK,WAAW,qBAAsB,iBAAM;AAAA,UACpE,UAAU,UAAa,aAAa,UAAa;AAAA,UACjD,aAAa,UAAa,oBAAC,UAAK,WAAW,GAAG,UAAU,UAAa,8BAA8B,GAAI,UAAS;AAAA,WACnH;AAAA,QACC,WAAW,UAAa,oBAAC,UAAK,WAAW,sBAAuB,kBAAO;AAAA,QACvE,aACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAY,OAAO,WAAW;AAAA,YAC9B,SAAS;AAAA,YACT,WAAW;AAAA,YAEX,8BAAC,aAAU,WAAW,qBAAqB;AAAA;AAAA,QAC7C;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/components/{top-bar.js → shell/top-bar.js}

@@ -1,16 +1,17 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "../lib/cn.js";
+import { cn } from "../../lib/cn.js";
+import { TOP_BAR_BASE, TOP_BAR_END, TOP_BAR_START } from "../../generated/top-bar.js";
 function TopBar({ start, end, className, ...props }) {
   return /* @__PURE__ */ jsxs(
     "header",
     {
       "data-slot": "top-bar",
-      className: cn("flex h-14 items-center gap-3 border-b border-border bg-background px-8", className),
+      className: cn(TOP_BAR_BASE, className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx("div", { "data-slot": "top-bar-start", className: "flex min-w-0 items-center gap-2", children: start }),
-        /* @__PURE__ */ jsx("div", { "data-slot": "top-bar-end", className: "ml-auto flex shrink-0 items-center gap-3", children: end })
+        /* @__PURE__ */ jsx("div", { "data-slot": "top-bar-start", className: TOP_BAR_START, children: start }),
+        /* @__PURE__ */ jsx("div", { "data-slot": "top-bar-end", className: TOP_BAR_END, children: end })
       ]
     }
   );

package/dist/components/shell/top-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/shell/top-bar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { TOP_BAR_BASE, TOP_BAR_END, TOP_BAR_START } from \"../../generated/top-bar\";\n\nexport interface TopBarProps extends React.ComponentProps<\"header\"> {\n  /** The app switcher, or the service's name. */\n  start?: React.ReactNode;\n  /** Service stats, then an `AccountMenu` last. */\n  end?: React.ReactNode;\n}\n\n/**\n * The wide screen's utility bar over the content column: who and where, never\n * product nav (that is the rail's). Layout only — `AppShell.topBar` pins it.\n */\nexport function TopBar({ start, end, className, ...props }: TopBarProps) {\n  return (\n    <header\n      data-slot=\"top-bar\"\n      className={cn(TOP_BAR_BASE, className)}\n      {...props}\n    >\n      <div data-slot=\"top-bar-start\" className={TOP_BAR_START}>\n        {start}\n      </div>\n      <div data-slot=\"top-bar-end\" className={TOP_BAR_END}>\n        {end}\n      </div>\n    </header>\n  );\n}\n"],"mappings":"AAiBI,SAKE,KALF;AAjBJ,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,cAAc,aAAa,qBAAqB;AAalD,SAAS,OAAO,EAAE,OAAO,KAAK,WAAW,GAAG,MAAM,GAAgB;AACvE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,cAAc,SAAS;AAAA,MACpC,GAAG;AAAA,MAEJ;AAAA,4BAAC,SAAI,aAAU,iBAAgB,WAAW,eACvC,iBACH;AAAA,QACA,oBAAC,SAAI,aAAU,eAAc,WAAW,aACrC,eACH;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/shell/use-shell-nav.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/shell/use-shell-nav.ts"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\n/**\n * The optimistic half of a nav: the id of the item just clicked, until the\n * pathname catches up.\n *\n * A router that waits for the next page's payload changes the pathname 150–300ms\n * after the click — exactly the window in which a highlight that has not moved\n * reads as a click that did not land. So the clicked item is marked at once.\n *\n * The entry remembers the pathname it was made on, so the moment the pathname\n * changes it is stale by construction and the URL is the truth again. It is\n * cleared during render, not in an effect (an effect would paint one frame with\n * the URL's row marked and the stale one not), and cleared rather than ignored:\n * left behind, it would come back to life on a return to the page it was made\n * on. A click that never navigates is forgotten by the next one.\n */\nexport function usePendingNavigation(\n  pathname: string,\n): readonly [pendingId: string | null, markPending: (id: string) => void] {\n  const [pending, setPending] = React.useState<{ id: string; from: string } | null>(null);\n  if (pending && pending.from !== pathname) setPending(null);\n  const pendingId = pending && pending.from === pathname ? pending.id : null;\n  const markPending = React.useCallback(\n    (id: string) => setPending({ id, from: pathname }),\n    [pathname],\n  );\n  return [pendingId, markPending] as const;\n}\n\n/**\n * Places the section's `[data-slot=\"shell-nav-marker\"]` over its\n * `[aria-current=\"page\"]` row, by measurement: rows differ in count and every\n * label is somebody's translation, and SSR cannot know those offsets (until the\n * first placement the row carries the fill itself — see motion.css). Re-runs\n * when `at` changes and whenever the section resizes — rows come and go, labels\n * change width with the locale or a font swap.\n */\nexport function useSlideMarker(\n  ref: React.RefObject<HTMLElement | null>,\n  at: string | null,\n): void {\n  // Which marker node was last placed, so a re-run over the same node — a move,\n  // a resize — is told apart from a marker that has just mounted. `undefined`\n  // until the first run, so only a marker mounting AFTER the section settled\n  // counts as entering (and fades); one hydration finds on its row cuts in.\n  const placed = React.useRef<HTMLElement | null | undefined>(undefined);\n  React.useLayoutEffect(() => {\n    const section = ref.current;\n    if (!section) return;\n    const place = () => {\n      const marker = section.querySelector<HTMLElement>('[data-slot=\"shell-nav-marker\"]');\n      const row = section.querySelector<HTMLElement>('[aria-current=\"page\"]');\n      const fresh = marker !== placed.current;\n      const entering = fresh && placed.current !== undefined;\n      placed.current = marker;\n      if (!marker || !row) return;\n      if (fresh) marker.style.transition = \"none\";\n      marker.style.transform = `translate(${row.offsetLeft}px, ${row.offsetTop}px)`;\n      marker.style.width = `${row.offsetWidth}px`;\n      marker.style.height = `${row.offsetHeight}px`;\n      if (fresh) {\n        // A transition is decided by the style AFTER the change: flushing the\n        // placement first makes it the starting point, so a new marker appears on\n        // its row instead of sliding in from the section's origin.\n        void marker.offsetWidth;\n        marker.style.transition = \"\";\n        marker.dataset[\"placed\"] = entering ? \"entered\" : \"first\";\n      }\n    };\n    place();\n    if (typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(place);\n    observer.observe(section);\n    return () => observer.disconnect();\n  }, [ref, at]);\n}\n"],"mappings":";AAEA,YAAY,WAAW;AAiBhB,SAAS,qBACd,UACwE;AACxE,QAAM,CAAC,SAAS,UAAU,IAAI,MAAM,SAA8C,IAAI;AACtF,MAAI,WAAW,QAAQ,SAAS,SAAU,YAAW,IAAI;AACzD,QAAM,YAAY,WAAW,QAAQ,SAAS,WAAW,QAAQ,KAAK;AACtE,QAAM,cAAc,MAAM;AAAA,IACxB,CAAC,OAAe,WAAW,EAAE,IAAI,MAAM,SAAS,CAAC;AAAA,IACjD,CAAC,QAAQ;AAAA,EACX;AACA,SAAO,CAAC,WAAW,WAAW;AAChC;AAUO,SAAS,eACd,KACA,IACM;AAKN,QAAM,SAAS,MAAM,OAAuC,MAAS;AACrE,QAAM,gBAAgB,MAAM;AAC1B,UAAM,UAAU,IAAI;AACpB,QAAI,CAAC,QAAS;AACd,UAAM,QAAQ,MAAM;AAClB,YAAM,SAAS,QAAQ,cAA2B,gCAAgC;AAClF,YAAM,MAAM,QAAQ,cAA2B,uBAAuB;AACtE,YAAM,QAAQ,WAAW,OAAO;AAChC,YAAM,WAAW,SAAS,OAAO,YAAY;AAC7C,aAAO,UAAU;AACjB,UAAI,CAAC,UAAU,CAAC,IAAK;AACrB,UAAI,MAAO,QAAO,MAAM,aAAa;AACrC,aAAO,MAAM,YAAY,aAAa,IAAI,UAAU,OAAO,IAAI,SAAS;AACxE,aAAO,MAAM,QAAQ,GAAG,IAAI,WAAW;AACvC,aAAO,MAAM,SAAS,GAAG,IAAI,YAAY;AACzC,UAAI,OAAO;AAIT,aAAK,OAAO;AACZ,eAAO,MAAM,aAAa;AAC1B,eAAO,QAAQ,QAAQ,IAAI,WAAW,YAAY;AAAA,MACpD;AAAA,IACF;AACA,UAAM;AACN,QAAI,OAAO,mBAAmB,YAAa;AAC3C,UAAM,WAAW,IAAI,eAAe,KAAK;AACzC,aAAS,QAAQ,OAAO;AACxB,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,KAAK,EAAE,CAAC;AACd;","names":[]}