@evinvest/uikit 0.23.0 → 0.25.0

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

@@ -0,0 +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":[]}

package/dist/components/page-frame.js

@@ -0,0 +1,92 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.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
+      ),
+      ...props
+    }
+  );
+}
+function PageHeading({ title, description, eyebrow, actions, className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      "data-slot": "page-heading",
+      className: cn("flex items-center justify-between gap-4", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+          eyebrow !== void 0 && /* @__PURE__ */ jsx(SectionLabel, { tone: "accent", children: eyebrow }),
+          /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold leading-tight text-ink", children: title }),
+          description !== void 0 && /* @__PURE__ */ jsx("p", { className: "text-sm text-ink-soft", children: description })
+        ] }),
+        actions !== void 0 && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2.5", children: actions })
+      ]
+    }
+  );
+}
+const HEADING_FROM = { md: "hidden md:flex", lg: "hidden lg:flex" };
+const PAD = {
+  md: "gap-4 px-4 pb-6 pt-5 md:gap-6 md:px-8 md:pb-7 md:pt-6",
+  lg: "gap-4 px-4 pb-6 pt-5 lg:gap-6 lg:px-8 lg:pb-7 lg:pt-6"
+};
+function PageFrame({
+  title,
+  description,
+  eyebrow,
+  actions,
+  appBar,
+  breakpoint = "lg",
+  width = "full",
+  headingClassName,
+  className,
+  style,
+  children,
+  ...props
+}) {
+  const hasBar = appBar !== void 0 && appBar !== null && appBar !== false;
+  const enter = {
+    "--enter-step": "var(--ev-stagger-section, 50ms)",
+    ...hasBar ? { "--enter-delay": "var(--ev-stagger-section, 50ms)" } : {}
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    appBar,
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "page-frame",
+        "data-enter": "stagger",
+        className: cn("flex flex-col", PAD[breakpoint], width === "content" && "max-w-5xl", className),
+        style: { ...enter, ...style },
+        ...props,
+        children: [
+          title !== void 0 && /* @__PURE__ */ jsx(
+            PageHeading,
+            {
+              title,
+              description,
+              eyebrow,
+              actions,
+              className: cn(hasBar && HEADING_FROM[breakpoint], headingClassName)
+            }
+          ),
+          children
+        ]
+      }
+    )
+  ] });
+}
+export {
+  PageFrame,
+  PageHeading,
+  SectionLabel
+};
+//# sourceMappingURL=page-frame.js.map

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

@@ -0,0 +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":[]}

package/dist/components/resource-error.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { Alert, AlertDescription, AlertTitle } from "./alert.js";
+import { Button } from "./button.js";
+import { RefreshIcon, TriangleAlertIcon } from "./shell-icons.js";
+function ResourceError(props) {
+  if (props.variant === "alert") {
+    const { message: message2, title, labels: _labels, variant: _variant2, className: className2, ...rest2 } = props;
+    return /* @__PURE__ */ jsx("div", { "data-slot": "resource-error", "data-variant": "alert", className: className2, ...rest2, children: /* @__PURE__ */ jsxs(Alert, { variant: "destructive", children: [
+      /* @__PURE__ */ jsx(TriangleAlertIcon, { className: "size-4" }),
+      title !== void 0 && /* @__PURE__ */ jsx(AlertTitle, { children: title }),
+      /* @__PURE__ */ jsx(AlertDescription, { children: message2 })
+    ] }) });
+  }
+  const { message, onRetry, retrying = false, labels = {}, variant: _variant, title: _title, className, ...rest } = props;
+  const line = /* @__PURE__ */ jsxs("p", { className: "flex min-w-0 items-center gap-2 text-sm text-accent-error", children: [
+    /* @__PURE__ */ jsx(TriangleAlertIcon, { className: "size-4 shrink-0" }),
+    " ",
+    message
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "resource-error",
+      "data-variant": "inline",
+      role: "alert",
+      className: cn(
+        onRetry && "flex flex-wrap items-center gap-3 rounded-lg border border-accent-error/40 bg-accent-error/10 px-3 py-2.5",
+        className
+      ),
+      ...rest,
+      children: [
+        line,
+        onRetry && /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", size: "sm", disabled: retrying, onClick: onRetry, children: [
+          /* @__PURE__ */ jsx(RefreshIcon, { className: cn("size-4", retrying && "motion-safe:animate-spin") }),
+          labels.retry ?? "Try again"
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ResourceError
+};
+//# sourceMappingURL=resource-error.js.map

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

@@ -0,0 +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"]}

package/dist/components/section-nav.js

@@ -0,0 +1,86 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.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";
+function SectionNav({
+  groups,
+  value,
+  onValueChange,
+  linkComponent,
+  labels = {},
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "data-slot": "section-nav",
+      "aria-label": labels.nav ?? "Sections",
+      className: cn("flex w-60 shrink-0 flex-col gap-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))
+    }
+  );
+}
+function SectionNavRow({
+  item,
+  active,
+  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"
+  );
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    Icon && /* @__PURE__ */ jsx(Icon, { className: "size-4.5 shrink-0" }),
+    /* @__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/section-nav.js.map

@@ -0,0 +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":[]}

package/dist/components/settled.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+function Settled({ loading, skeleton, children, ...props }) {
+  const [wasLoading, setWasLoading] = React.useState(loading);
+  const [reveals, setReveals] = React.useState(0);
+  if (wasLoading !== loading) {
+    setWasLoading(loading);
+    if (wasLoading) setReveals((n) => n + 1);
+  }
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { "data-slot": "settled", "data-state": "loading", "aria-busy": "true", ...props, children: skeleton });
+  }
+  return /* @__PURE__ */ jsx("div", { "data-slot": "settled", "data-state": reveals > 0 ? "revealed" : "ready", ...props, children }, reveals);
+}
+export {
+  Settled
+};
+//# sourceMappingURL=settled.js.map

package/dist/components/settled.js.map

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

@@ -0,0 +1,57 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+function Glyph({ className, children }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children
+    }
+  );
+}
+function ChevronLeftIcon({ className }) {
+  return /* @__PURE__ */ jsx(Glyph, { className, children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" }) });
+}
+function TriangleAlertIcon({ className }) {
+  return /* @__PURE__ */ jsxs(Glyph, { className, children: [
+    /* @__PURE__ */ jsx("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" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 9v4" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
+  ] });
+}
+function InfoIcon({ className }) {
+  return /* @__PURE__ */ jsxs(Glyph, { className, children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 16v-4" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 8h.01" })
+  ] });
+}
+function RefreshIcon({ className }) {
+  return /* @__PURE__ */ jsxs(Glyph, { className, children: [
+    /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }),
+    /* @__PURE__ */ jsx("path", { d: "M21 3v5h-5" }),
+    /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }),
+    /* @__PURE__ */ jsx("path", { d: "M8 16H3v5" })
+  ] });
+}
+function CloseIcon({ className }) {
+  return /* @__PURE__ */ jsxs(Glyph, { className, children: [
+    /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+    /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+  ] });
+}
+export {
+  ChevronLeftIcon,
+  CloseIcon,
+  InfoIcon,
+  RefreshIcon,
+  TriangleAlertIcon
+};
+//# sourceMappingURL=shell-icons.js.map

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

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

@@ -0,0 +1,141 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+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 { 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";
+function ShellNav({
+  groups,
+  footerGroups = [],
+  pathname,
+  linkComponent,
+  header,
+  footer,
+  renderItem,
+  onItemIntent,
+  onNavigate,
+  labels = {},
+  className,
+  ...props
+}) {
+  const [pendingId, markPending] = usePendingNavigation(pathname);
+  const all = [...groups, ...footerGroups].flatMap((g) => g.items);
+  const currentId = (pendingId !== null && all.some((i) => i.id === pendingId) ? pendingId : void 0) ?? resolveActiveNavItem(all, pathname)?.id;
+  const section = (group) => /* @__PURE__ */ jsx(
+    ShellNavSection,
+    {
+      group,
+      currentId,
+      pendingId,
+      row: { linkComponent, markPending, onItemIntent, onNavigate, renderItem, badgeLabel: labels.badge }
+    },
+    group.id
+  );
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      "data-slot": "shell-nav",
+      className: cn(
+        "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",
+        className
+      ),
+      ...props,
+      children: [
+        header,
+        /* @__PURE__ */ jsx("nav", { "aria-label": labels.primary ?? "Main", className: "flex flex-col gap-4.5", children: groups.map(section) }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+        footerGroups.length > 0 && /* @__PURE__ */ jsx("nav", { "aria-label": labels.footer ?? "Account", className: "flex flex-col gap-4.5", children: footerGroups.map(section) }),
+        footer
+      ]
+    }
+  );
+}
+function ShellNavSection({
+  group,
+  currentId,
+  pendingId,
+  row
+}) {
+  const root = React.useRef(null);
+  const labelId = 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",
+          {
+            "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))
+          }
+        )
+      ]
+    }
+  );
+}
+function ShellNavRow({ item, state, row }) {
+  const Icon = item.icon;
+  const trailing = typeof item.trailing === "function" ? item.trailing(state) : item.trailing;
+  return /* @__PURE__ */ jsx(
+    NavLink,
+    {
+      item,
+      current: state.active,
+      pending: state.pending,
+      linkComponent: row.linkComponent,
+      markPending: row.markPending,
+      onItemIntent: row.onItemIntent,
+      onNavigate: row.onNavigate,
+      title: labelTitle(item.label),
+      className: cn(
+        ROW,
+        NAV_FOCUS,
+        state.active ? "font-semibold text-on-primary" : "font-medium text-ink hover:bg-hover",
+        item.disabled && "cursor-not-allowed opacity-50 hover:bg-transparent"
+      ),
+      children: row.renderItem ? row.renderItem(item, state) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        Icon && /* @__PURE__ */ jsx(Icon, { className: "size-4.5 shrink-0" }),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
+        typeof item.badge === "number" ? /* @__PURE__ */ jsx(
+          NavBadge,
+          {
+            count: item.badge,
+            active: state.active,
+            ...row.badgeLabel ? { label: row.badgeLabel } : {}
+          }
+        ) : item.badge,
+        trailing
+      ] })
+    }
+  );
+}
+export {
+  ShellNav
+};
+//# sourceMappingURL=shell-nav.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/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 { resolveActiveNavItem, type NavGroup, type NavItem, type NavItemState } from \"./nav-model\";\nimport { usePendingNavigation, useSlideMarker } from \"./use-shell-nav\";\n\nexport interface ShellNavLabels {\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}\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  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      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.\nfunction ShellNavSection({\n  group,\n  currentId,\n  pendingId,\n  row,\n}: {\n  group: NavGroup;\n  currentId: string | undefined;\n  pendingId: string | null;\n  row: RowContext;\n}) {\n  const root = React.useRef<HTMLDivElement>(null);\n  const labelId = React.useId();\n  const at = group.items.some((i) => i.id === currentId) ? (currentId ?? null) : null;\n  useSlideMarker(root, at);\n  return (\n    <div\n      ref={root}\n      data-slot=\"shell-nav-section\"\n      className={cn(\"relative isolate flex flex-col gap-1\", group.label !== undefined && \"pl-1\")}\n    >\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      {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      <ul\n        aria-labelledby={group.label !== undefined ? labelId : undefined}\n        className=\"flex flex-col gap-1\"\n      >\n        {group.items.map((item) => (\n          <li key={item.id} className=\"flex flex-col\">\n            <ShellNavRow\n              item={item}\n              state={{ active: item.id === currentId, pending: item.id === pendingId }}\n              row={row}\n            />\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n\nfunction ShellNavRow({ item, state, row }: { item: NavItem; state: NavItemState; row: RowContext }) {\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 ? \"font-semibold text-on-primary\" : \"font-medium text-ink hover:bg-hover\",\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":"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","names":[]}

package/dist/components/system-banner.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.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,
+  labels = {},
+  className,
+  children,
+  ...props
+}) {
+  const glyph = icon !== void 0 ? icon : tone === "warn" ? /* @__PURE__ */ jsx(TriangleAlertIcon, { className: "size-4" }) : /* @__PURE__ */ jsx(InfoIcon, { className: "size-4" });
+  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),
+      ...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 }),
+          title !== void 0 && children !== void 0 && " \u2014 ",
+          children !== void 0 && /* @__PURE__ */ jsx("span", { className: cn(title !== void 0 && tone === "info" && "text-ink-soft"), children })
+        ] }),
+        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" })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  SystemBanner
+};
+//# sourceMappingURL=system-banner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/system-banner.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { CloseIcon, InfoIcon, TriangleAlertIcon } from \"./shell-icons\";\n\nexport type SystemBannerTone = \"warn\" | \"info\";\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  labels?: SystemBannerLabels;\n}\n\nconst TONE: Record<SystemBannerTone, string> = {\n  warn: \"border-accent-warn/40 bg-accent-warn/10 text-accent-warn\",\n  info: \"border-border bg-card text-ink\",\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  labels = {},\n  className,\n  children,\n  ...props\n}: SystemBannerProps) {\n  const glyph =\n    icon !== undefined ? icon : tone === \"warn\" ? <TriangleAlertIcon className=\"size-4\" /> : <InfoIcon className=\"size-4\" />;\n  return (\n    <div\n      data-slot=\"system-banner\"\n      data-tone={tone}\n      role=\"status\"\n      className={cn(\"flex items-start gap-2.5 rounded-lg border px-4 py-2.5 text-sm\", TONE[tone], className)}\n      {...props}\n    >\n      {glyph !== null && <span className=\"mt-0.5 flex shrink-0\">{glyph}</span>}\n      <div className=\"min-w-0 flex-1\">\n        {title !== undefined && <span className=\"font-semibold\">{title}</span>}\n        {title !== undefined && children !== undefined && \" — \"}\n        {children !== undefined && (\n          <span className={cn(title !== undefined && tone === \"info\" && \"text-ink-soft\")}>{children}</span>\n        )}\n      </div>\n      {onDismiss && (\n        <button\n          type=\"button\"\n          aria-label={labels.dismiss ?? \"Dismiss\"}\n          onClick={onDismiss}\n          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\"\n        >\n          <CloseIcon className=\"size-4\" />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AA8CkD,cAU5C,YAV4C;AA5ClD,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,WAAW,UAAU,yBAAyB;AAqBvD,MAAM,OAAyC;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM;AACR;AAOO,SAAS,aAAa;AAAA,EAC3B,OAAO;AAAA,EACP;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,WAAU,UAAS,IAAK,oBAAC,YAAS,WAAU,UAAS;AACxH,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,aAAW;AAAA,MACX,MAAK;AAAA,MACL,WAAW,GAAG,kEAAkE,KAAK,IAAI,GAAG,SAAS;AAAA,MACpG,GAAG;AAAA,MAEH;AAAA,kBAAU,QAAQ,oBAAC,UAAK,WAAU,wBAAwB,iBAAM;AAAA,QACjE,qBAAC,SAAI,WAAU,kBACZ;AAAA,oBAAU,UAAa,oBAAC,UAAK,WAAU,iBAAiB,iBAAM;AAAA,UAC9D,UAAU,UAAa,aAAa,UAAa;AAAA,UACjD,aAAa,UACZ,oBAAC,UAAK,WAAW,GAAG,UAAU,UAAa,SAAS,UAAU,eAAe,GAAI,UAAS;AAAA,WAE9F;AAAA,QACC,aACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAY,OAAO,WAAW;AAAA,YAC9B,SAAS;AAAA,YACT,WAAU;AAAA,YAEV,8BAAC,aAAU,WAAU,UAAS;AAAA;AAAA,QAChC;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}