@evinvest/uikit 0.30.0 → 0.32.0

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

@@ -0,0 +1,149 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/cn.js";
+import {
+  HEADER_BALANCE_BASE,
+  HEADER_BALANCE_CHEVRON,
+  HEADER_BALANCE_FIGURE,
+  HEADER_BALANCE_INTERACTIVE,
+  HEADER_BALANCE_LABEL,
+  HEADER_BALANCE_SETTLED,
+  HEADER_BALANCE_SKELETON,
+  HEADER_SEARCH_BASE,
+  HEADER_SEARCH_PLACEHOLDER,
+  NOTIFICATION_BELL_CONTENT,
+  NOTIFICATION_BELL_EMPTY,
+  NOTIFICATION_BELL_FOOTER,
+  NOTIFICATION_BELL_ITEM,
+  NOTIFICATION_BELL_ITEM_BODY,
+  NOTIFICATION_BELL_ITEM_DESCRIPTION,
+  NOTIFICATION_BELL_ITEM_DOT,
+  NOTIFICATION_BELL_ITEM_DOT_READ,
+  NOTIFICATION_BELL_ITEM_DOT_UNREAD,
+  NOTIFICATION_BELL_ITEM_TIME,
+  NOTIFICATION_BELL_ITEM_TITLE,
+  NOTIFICATION_BELL_ITEM_TITLE_UNREAD,
+  NOTIFICATION_BELL_LIST,
+  NOTIFICATION_BELL_TRIGGER,
+  NOTIFICATION_DOT,
+  headerBalanceToneClasses
+} from "../../generated/header-controls.js";
+import { AnimatedNumber } from "../derived/animated-number.js";
+import { IconButton } from "../derived/icon-button.js";
+import { Kbd } from "../atomic/kbd.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../atomic/popover.js";
+import { Settled } from "./settled.js";
+import { Skeleton } from "../atomic/skeleton.js";
+import { UiIcon } from "../../icons/ui-icons.js";
+const USD = { style: "currency", currency: "USD" };
+function HeaderBalance({
+  label = "Balance:",
+  value,
+  amount,
+  format = USD,
+  locales,
+  loading = false,
+  icon,
+  tone = "default",
+  onClick,
+  disabled,
+  className,
+  ...props
+}) {
+  const face = cn(HEADER_BALANCE_BASE, onClick && HEADER_BALANCE_INTERACTIVE, className);
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon,
+    /* @__PURE__ */ jsx("span", { className: HEADER_BALANCE_LABEL, children: label }),
+    /* @__PURE__ */ jsx(
+      Settled,
+      {
+        loading,
+        skeleton: /* @__PURE__ */ jsx(Skeleton, { className: HEADER_BALANCE_SKELETON }),
+        className: HEADER_BALANCE_SETTLED,
+        children: /* @__PURE__ */ jsx("span", { className: cn(HEADER_BALANCE_FIGURE, headerBalanceToneClasses[tone]), children: amount === void 0 ? value : /* @__PURE__ */ jsx(AnimatedNumber, { value: amount, format, locales }) })
+      }
+    ),
+    onClick && /* @__PURE__ */ jsx(UiIcon, { name: "chevron-down", className: HEADER_BALANCE_CHEVRON })
+  ] });
+  if (!onClick) {
+    return /* @__PURE__ */ jsx("div", { "data-slot": "header-balance", className: face, ...props, children: body });
+  }
+  return /* @__PURE__ */ jsx("button", { type: "button", "data-slot": "header-balance", className: face, onClick, disabled, ...props, children: body });
+}
+function NotificationBell({ notifications, onSelect, labels = {}, footer, className }) {
+  const unread = notifications.filter((n) => n.unread).length;
+  const name = labels.trigger ?? "Notifications";
+  const spoken = unread > 0 ? `${name}, ${(labels.unread ?? ((n) => `${n} unread`))(unread)}` : name;
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(IconButton, { "aria-label": spoken, variant: "outline", className: cn(NOTIFICATION_BELL_TRIGGER, className), children: [
+      /* @__PURE__ */ jsx(UiIcon, { name: "bell" }),
+      unread > 0 && /* @__PURE__ */ jsx("span", { "data-slot": "notification-dot", "aria-hidden": true, className: NOTIFICATION_DOT })
+    ] }) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { align: "end", className: NOTIFICATION_BELL_CONTENT, children: [
+      notifications.length === 0 ? /* @__PURE__ */ jsx("p", { className: NOTIFICATION_BELL_EMPTY, children: labels.empty ?? "No notifications" }) : /* @__PURE__ */ jsx("ul", { className: NOTIFICATION_BELL_LIST, children: notifications.map((n) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => onSelect?.(n.id),
+          className: NOTIFICATION_BELL_ITEM,
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                className: cn(
+                  NOTIFICATION_BELL_ITEM_DOT,
+                  n.unread ? NOTIFICATION_BELL_ITEM_DOT_UNREAD : NOTIFICATION_BELL_ITEM_DOT_READ
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: NOTIFICATION_BELL_ITEM_BODY, children: [
+              /* @__PURE__ */ jsx("span", { className: cn(NOTIFICATION_BELL_ITEM_TITLE, n.unread && NOTIFICATION_BELL_ITEM_TITLE_UNREAD), children: n.title }),
+              n.description != null && /* @__PURE__ */ jsx("span", { className: NOTIFICATION_BELL_ITEM_DESCRIPTION, children: n.description })
+            ] }),
+            n.time != null && /* @__PURE__ */ jsx("span", { className: NOTIFICATION_BELL_ITEM_TIME, children: n.time })
+          ]
+        }
+      ) }, n.id)) }),
+      footer != null && /* @__PURE__ */ jsx("div", { className: NOTIFICATION_BELL_FOOTER, children: footer })
+    ] })
+  ] });
+}
+const APPLE = /Mac|iPhone|iPad|iPod/;
+function usePlatformShortcut() {
+  const [shortcut, setShortcut] = React.useState("Ctrl K");
+  React.useEffect(() => {
+    const nav = navigator;
+    if (APPLE.test(nav.userAgentData?.platform ?? nav.platform ?? "")) setShortcut("\u2318K");
+  }, []);
+  return shortcut;
+}
+function HeaderSearch({
+  placeholder = "Search or jump to\u2026",
+  shortcut,
+  className,
+  ...props
+}) {
+  const platformShortcut = usePlatformShortcut();
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "data-slot": "header-search",
+      className: cn(HEADER_SEARCH_BASE, className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(UiIcon, { name: "search" }),
+        /* @__PURE__ */ jsx("span", { className: HEADER_SEARCH_PLACEHOLDER, children: placeholder }),
+        /* @__PURE__ */ jsx(Kbd, { children: shortcut ?? platformShortcut })
+      ]
+    }
+  );
+}
+export {
+  HeaderBalance,
+  HeaderSearch,
+  NotificationBell
+};
+//# sourceMappingURL=header-controls.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/shell/header-controls.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  HEADER_BALANCE_BASE,\n  HEADER_BALANCE_CHEVRON,\n  HEADER_BALANCE_FIGURE,\n  HEADER_BALANCE_INTERACTIVE,\n  HEADER_BALANCE_LABEL,\n  HEADER_BALANCE_SETTLED,\n  HEADER_BALANCE_SKELETON,\n  HEADER_SEARCH_BASE,\n  HEADER_SEARCH_PLACEHOLDER,\n  NOTIFICATION_BELL_CONTENT,\n  NOTIFICATION_BELL_EMPTY,\n  NOTIFICATION_BELL_FOOTER,\n  NOTIFICATION_BELL_ITEM,\n  NOTIFICATION_BELL_ITEM_BODY,\n  NOTIFICATION_BELL_ITEM_DESCRIPTION,\n  NOTIFICATION_BELL_ITEM_DOT,\n  NOTIFICATION_BELL_ITEM_DOT_READ,\n  NOTIFICATION_BELL_ITEM_DOT_UNREAD,\n  NOTIFICATION_BELL_ITEM_TIME,\n  NOTIFICATION_BELL_ITEM_TITLE,\n  NOTIFICATION_BELL_ITEM_TITLE_UNREAD,\n  NOTIFICATION_BELL_LIST,\n  NOTIFICATION_BELL_TRIGGER,\n  NOTIFICATION_DOT,\n  headerBalanceToneClasses,\n  type HeaderBalanceTone,\n} from \"../../generated/header-controls\";\nimport { AnimatedNumber } from \"../derived/animated-number\";\nimport { IconButton } from \"../derived/icon-button\";\nimport { Kbd } from \"../atomic/kbd\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../atomic/popover\";\nimport { Settled } from \"./settled\";\nimport { Skeleton } from \"../atomic/skeleton\";\nimport { UiIcon } from \"../../icons/ui-icons\";\n\nexport interface HeaderBalanceProps extends Omit<React.HTMLAttributes<HTMLElement>, \"children\"> {\n  /** Only meaningful with `onClick`. */\n  disabled?: boolean;\n  label?: React.ReactNode;\n  /** The figure, already formatted: \"$0.00\". Ignored when `amount` is given. */\n  value?: React.ReactNode;\n  /** The figure as a number: it rolls to each new amount, formatted by `format` and `locales`. */\n  amount?: number;\n  /** Formatting for `amount`. Default: USD currency. */\n  format?: Intl.NumberFormatOptions;\n  locales?: Intl.LocalesArgument;\n  /** True until the balance is known; the figure then reveals in place of the skeleton. */\n  loading?: boolean;\n  /** A glyph before the label. */\n  icon?: React.ReactNode;\n  /** `warn` colours the figure as a low-funds signal. */\n  tone?: HeaderBalanceTone;\n}\n\nconst USD: Intl.NumberFormatOptions = { style: \"currency\", currency: \"USD\" };\n\n/** \"Balance: $0.00\" in the header; a button only when given `onClick`. */\nexport function HeaderBalance({\n  label = \"Balance:\",\n  value,\n  amount,\n  format = USD,\n  locales,\n  loading = false,\n  icon,\n  tone = \"default\",\n  onClick,\n  disabled,\n  className,\n  ...props\n}: HeaderBalanceProps) {\n  const face = cn(HEADER_BALANCE_BASE, onClick && HEADER_BALANCE_INTERACTIVE, className);\n  const body = (\n    <>\n      {icon}\n      <span className={HEADER_BALANCE_LABEL}>{label}</span>\n      <Settled\n        loading={loading}\n        skeleton={<Skeleton className={HEADER_BALANCE_SKELETON} />}\n        className={HEADER_BALANCE_SETTLED}\n      >\n        <span className={cn(HEADER_BALANCE_FIGURE, headerBalanceToneClasses[tone])}>\n          {amount === undefined ? value : <AnimatedNumber value={amount} format={format} locales={locales} />}\n        </span>\n      </Settled>\n      {onClick && <UiIcon name=\"chevron-down\" className={HEADER_BALANCE_CHEVRON} />}\n    </>\n  );\n  if (!onClick) {\n    return (\n      <div data-slot=\"header-balance\" className={face} {...props}>\n        {body}\n      </div>\n    );\n  }\n  return (\n    <button type=\"button\" data-slot=\"header-balance\" className={face} onClick={onClick} disabled={disabled} {...props}>\n      {body}\n    </button>\n  );\n}\n\nexport interface HeaderNotification {\n  id: string;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  /** Already formatted: \"2m ago\". */\n  time?: React.ReactNode;\n  unread?: boolean;\n}\n\nexport interface NotificationBellLabels {\n  /** The bell's name. Default `\"Notifications\"`. */\n  trigger?: string;\n  /** Spoken after the name when something is unread; gets the count. Default `\"{n} unread\"`. */\n  unread?: (count: number) => string;\n  /** Default `\"No notifications\"`. */\n  empty?: string;\n}\n\nexport interface NotificationBellProps {\n  notifications: readonly HeaderNotification[];\n  onSelect?: (id: string) => void;\n  labels?: NotificationBellLabels;\n  /** Under the list: \"View all\". */\n  footer?: React.ReactNode;\n  className?: string;\n}\n\n/** The bell with an unread dot; the list opens in a popover. */\nexport function NotificationBell({ notifications, onSelect, labels = {}, footer, className }: NotificationBellProps) {\n  const unread = notifications.filter((n) => n.unread).length;\n  const name = labels.trigger ?? \"Notifications\";\n  const spoken = unread > 0 ? `${name}, ${(labels.unread ?? ((n) => `${n} unread`))(unread)}` : name;\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <IconButton aria-label={spoken} variant=\"outline\" className={cn(NOTIFICATION_BELL_TRIGGER, className)}>\n          <UiIcon name=\"bell\" />\n          {unread > 0 && (\n            <span data-slot=\"notification-dot\" aria-hidden className={NOTIFICATION_DOT} />\n          )}\n        </IconButton>\n      </PopoverTrigger>\n      <PopoverContent align=\"end\" className={NOTIFICATION_BELL_CONTENT}>\n        {notifications.length === 0 ? (\n          <p className={NOTIFICATION_BELL_EMPTY}>{labels.empty ?? \"No notifications\"}</p>\n        ) : (\n          <ul className={NOTIFICATION_BELL_LIST}>\n            {notifications.map((n) => (\n              <li key={n.id}>\n                <button\n                  type=\"button\"\n                  onClick={() => onSelect?.(n.id)}\n                  className={NOTIFICATION_BELL_ITEM}\n                >\n                  <span\n                    aria-hidden\n                    className={cn(\n                      NOTIFICATION_BELL_ITEM_DOT,\n                      n.unread ? NOTIFICATION_BELL_ITEM_DOT_UNREAD : NOTIFICATION_BELL_ITEM_DOT_READ,\n                    )}\n                  />\n                  <span className={NOTIFICATION_BELL_ITEM_BODY}>\n                    <span className={cn(NOTIFICATION_BELL_ITEM_TITLE, n.unread && NOTIFICATION_BELL_ITEM_TITLE_UNREAD)}>{n.title}</span>\n                    {n.description != null && <span className={NOTIFICATION_BELL_ITEM_DESCRIPTION}>{n.description}</span>}\n                  </span>\n                  {n.time != null && <span className={NOTIFICATION_BELL_ITEM_TIME}>{n.time}</span>}\n                </button>\n              </li>\n            ))}\n          </ul>\n        )}\n        {footer != null && <div className={NOTIFICATION_BELL_FOOTER}>{footer}</div>}\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport interface HeaderSearchProps extends React.ComponentProps<\"button\"> {\n  placeholder?: string;\n  /** The shortcut hint at the end. Default: `⌘K` on Apple platforms, `Ctrl K` elsewhere. */\n  shortcut?: string;\n}\n\nconst APPLE = /Mac|iPhone|iPad|iPod/;\n\n// Read after mount, so the server render and the first client render agree.\nfunction usePlatformShortcut(): string {\n  const [shortcut, setShortcut] = React.useState(\"Ctrl K\");\n  React.useEffect(() => {\n    const nav = navigator as Navigator & { userAgentData?: { platform?: string } };\n    if (APPLE.test(nav.userAgentData?.platform ?? nav.platform ?? \"\")) setShortcut(\"⌘K\");\n  }, []);\n  return shortcut;\n}\n\n/** A button dressed as the search field; it opens the palette rather than taking input. */\nexport function HeaderSearch({\n  placeholder = \"Search or jump to…\",\n  shortcut,\n  className,\n  ...props\n}: HeaderSearchProps) {\n  const platformShortcut = usePlatformShortcut();\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"header-search\"\n      className={cn(HEADER_SEARCH_BASE, className)}\n      {...props}\n    >\n      <UiIcon name=\"search\" />\n      <span className={HEADER_SEARCH_PLACEHOLDER}>{placeholder}</span>\n      <Kbd>{shortcut ?? platformShortcut}</Kbd>\n    </button>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/{list-rows.js → shell/list-rows.js}

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "../lib/cn.js";
+import { cn } from "../../lib/cn.js";
 const LIST_ROWS = "flex w-full min-w-0 flex-col divide-y divide-border";
 const listRowsVariants = {
   plain: "",

package/dist/components/shell/list-rows.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/shell/list-rows.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\n\n// The phone form of a table: a list of label/value rows split by hairlines.\n// A table scrolled sideways on a phone hides the trailing columns — usually the\n// date and the action, the reason the list was opened. TS-only (README\n// \"Limitations\").\n\nexport type ListRowsVariant = \"plain\" | \"card\";\n\nconst LIST_ROWS = \"flex w-full min-w-0 flex-col divide-y divide-border\";\n\n// `plain` sits in a container that already pads (a padded card, a section);\n// `card` is edge to edge in a `TableCard`, so the rows pad themselves and the\n// hairlines run the card's full width. The inset travels as a custom property,\n// as the table's cell padding does, so a row's own `px-*` still wins.\nconst listRowsVariants: Record<ListRowsVariant, string> = {\n  plain: \"\",\n  card: \"[--ev-list-row-x:1rem]\",\n};\n\nexport interface ListRowsProps extends React.ComponentProps<\"ul\"> {\n  variant?: ListRowsVariant;\n}\n\nexport function ListRows({ variant = \"plain\", className, ...props }: ListRowsProps) {\n  return (\n    <ul\n      data-slot=\"list-rows\"\n      data-variant={variant}\n      className={cn(LIST_ROWS, listRowsVariants[variant], className)}\n      {...props}\n    />\n  );\n}\n\nconst LIST_ROW = \"flex min-w-0 items-center justify-between gap-3 px-[var(--ev-list-row-x,0px)] py-3\";\n\n// `<li value>` is an ordinal for `<ol>`; in an unordered list of rows the name\n// is far more useful for the trailing figure.\nexport interface ListRowProps extends Omit<React.ComponentProps<\"li\">, \"value\"> {\n  /** The row's title. Omit it (and `value`) to lay the row out yourself. */\n  label?: React.ReactNode;\n  /** A caption a step down under the label. */\n  description?: React.ReactNode;\n  /** Trailing value, right-aligned and truncated rather than pushing the row wide. */\n  value?: React.ReactNode;\n}\n\n/**\n * One row: label (and description) leading, value trailing, then `children`\n * (a badge, an action). With neither `label` nor `value` the children are the\n * whole row.\n */\nexport function ListRow({ label, description, value, className, children, ...props }: ListRowProps) {\n  return (\n    <li\n      data-slot=\"list-row\"\n      className={cn(LIST_ROW, className)}\n      {...props}\n    >\n      {(label != null || description != null) && (\n        <ListRowLabel description={description}>{label}</ListRowLabel>\n      )}\n      {value != null && <ListRowValue>{value}</ListRowValue>}\n      {children}\n    </li>\n  );\n}\n\nexport interface ListRowLabelProps extends Omit<React.ComponentProps<\"div\">, \"title\"> {\n  description?: React.ReactNode;\n}\n\n/** The leading block on its own, for a row you compose by hand. */\nexport function ListRowLabel({ description, className, children, ...props }: ListRowLabelProps) {\n  return (\n    <div\n      data-slot=\"list-row-label\"\n      className={cn(\"flex min-w-0 flex-1 flex-col gap-0.5\", className)}\n      {...props}\n    >\n      <span className=\"text-sm font-medium text-ink\">{children}</span>\n      {description != null && (\n        <span\n          data-slot=\"list-row-description\"\n          className=\"text-xs leading-snug text-ink-soft\"\n        >\n          {description}\n        </span>\n      )}\n    </div>\n  );\n}\n\n/**\n * The trailing value. It shares the label's type step, so the muted tone and\n * the lighter weight are what keep the label reading first; digits are tabular\n * so a figure in one row lines up with the next.\n */\nexport function ListRowValue({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"list-row-value\"\n      className={cn(\"min-w-0 truncate text-right text-sm tabular-nums text-ink-soft\", className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":"AA2BI,cA6BA,YA7BA;AA3BJ,YAAY,WAAW;AACvB,SAAS,UAAU;AASnB,MAAM,YAAY;AAMlB,MAAM,mBAAoD;AAAA,EACxD,OAAO;AAAA,EACP,MAAM;AACR;AAMO,SAAS,SAAS,EAAE,UAAU,SAAS,WAAW,GAAG,MAAM,GAAkB;AAClF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,gBAAc;AAAA,MACd,WAAW,GAAG,WAAW,iBAAiB,OAAO,GAAG,SAAS;AAAA,MAC5D,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,MAAM,WAAW;AAkBV,SAAS,QAAQ,EAAE,OAAO,aAAa,OAAO,WAAW,UAAU,GAAG,MAAM,GAAiB;AAClG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,UAAU,SAAS;AAAA,MAChC,GAAG;AAAA,MAEF;AAAA,kBAAS,QAAQ,eAAe,SAChC,oBAAC,gBAAa,aAA2B,iBAAM;AAAA,QAEhD,SAAS,QAAQ,oBAAC,gBAAc,iBAAM;AAAA,QACtC;AAAA;AAAA;AAAA,EACH;AAEJ;AAOO,SAAS,aAAa,EAAE,aAAa,WAAW,UAAU,GAAG,MAAM,GAAsB;AAC9F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,wCAAwC,SAAS;AAAA,MAC9D,GAAG;AAAA,MAEJ;AAAA,4BAAC,UAAK,WAAU,gCAAgC,UAAS;AAAA,QACxD,eAAe,QACd;AAAA,UAAC;AAAA;AAAA,YACC,aAAU;AAAA,YACV,WAAU;AAAA,YAET;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAOO,SAAS,aAAa,EAAE,WAAW,GAAG,MAAM,GAAiC;AAClF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,kEAAkE,SAAS;AAAA,MACxF,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/components/{logo.js → shell/logo.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "../lib/cn.js";
+import { cn } from "../../lib/cn.js";
 const maskStyle = {
   backgroundColor: "currentColor",
   maskImage: "var(--brand-mark)",

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/shell/logo.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\n\n/**\n * The consumer's mark, painted as a CSS mask (`backgroundColor: currentColor` +\n * `maskImage`) so a monochrome lockup follows the surrounding text colour\n * instead of the artwork's baked-in fill. `withBackground` seats it on the brand\n * field, keeping a chip consistent with a favicon.\n *\n * The kit ships no artwork. The mark is a design token like every colour: the\n * consumer declares `--brand-mark` — a `url()` at its own asset — and\n * `--brand-aspect` in the same sheet it declares the palette in (see\n * `styles/tokens.css`). Undeclared, `maskImage` is invalid at computed-value time\n * and the span paints as a solid block: loud, and nobody else's logo.\n *\n * Decorative by design (`aria-hidden`): every real call site has the brand name\n * in adjacent text or on the wrapping link, and a mark announced twice is worse\n * than one announced once.\n */\nexport interface LogoProps {\n  className?: string;\n  withBackground?: boolean;\n}\n\nconst maskStyle: React.CSSProperties = {\n  backgroundColor: \"currentColor\",\n  maskImage: \"var(--brand-mark)\",\n  WebkitMaskImage: \"var(--brand-mark)\",\n  maskRepeat: \"no-repeat\",\n  WebkitMaskRepeat: \"no-repeat\",\n  maskPosition: \"center\",\n  WebkitMaskPosition: \"center\",\n  maskSize: \"contain\",\n  WebkitMaskSize: \"contain\",\n  // the ratio's fallback is what makes a missing mark *visible*: a masked span\n  // has no intrinsic size, so `h-N w-auto` without it is zero-width\n  aspectRatio: \"var(--brand-aspect, 1)\",\n};\n\nexport function Logo({ className, withBackground = false }: LogoProps) {\n  const mark = (\n    <span\n      data-slot=\"logo\"\n      aria-hidden\n      style={maskStyle}\n      className={cn(\"inline-block\", withBackground ? \"w-3/5 h-3/5\" : className)}\n    />\n  );\n\n  if (!withBackground) return mark;\n\n  return (\n    <span\n      data-slot=\"logo-background\"\n      className={cn(\"inline-flex items-center justify-center bg-brand\", className)}\n    >\n      {mark}\n    </span>\n  );\n}\n"],"mappings":"AAyCI;AAzCJ,YAAY,WAAW;AACvB,SAAS,UAAU;AAuBnB,MAAM,YAAiC;AAAA,EACrC,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,UAAU;AAAA,EACV,gBAAgB;AAAA;AAAA;AAAA,EAGhB,aAAa;AACf;AAEO,SAAS,KAAK,EAAE,WAAW,iBAAiB,MAAM,GAAc;AACrE,QAAM,OACJ;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,eAAW;AAAA,MACX,OAAO;AAAA,MACP,WAAW,GAAG,gBAAgB,iBAAiB,gBAAgB,SAAS;AAAA;AAAA,EAC1E;AAGF,MAAI,CAAC,eAAgB,QAAO;AAE5B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,oDAAoD,SAAS;AAAA,MAE1E;AAAA;AAAA,EACH;AAEJ;","names":[]}

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

@@ -1,7 +1,7 @@
 "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 { ChevronLeftIcon } from "./shell-icons.js";
 const BACK = "-ml-1 flex size-6 shrink-0 items-center justify-center rounded-md text-ink outline-none focus-visible:ring-2 focus-visible:ring-ring";
 const HIDE_FROM = { md: "md:hidden", lg: "lg:hidden" };

package/dist/components/shell/mobile-app-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/shell/mobile-app-bar.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport type { ShellBreakpoint } from \"./app-shell\";\nimport { ChevronLeftIcon } from \"./shell-icons\";\n\nexport interface MobileAppBarLabels {\n  /** Accessible name of the back control. Default `\"Back\"`. */\n  back?: string;\n}\n\nexport type MobileAppBarBack = { href: string } | { onClick: () => void };\n\nexport interface MobileAppBarProps extends Omit<React.ComponentProps<\"header\">, \"title\"> {\n  title: React.ReactNode;\n  /** A pushed screen: a back link (`href`) or a back button (`onClick`); centres the title. */\n  back?: MobileAppBarBack;\n  /** Trailing action — Save, a menu. */\n  right?: React.ReactNode;\n  linkComponent?: React.ElementType;\n  /** Hidden from this breakpoint up, where the page heading takes over. Default `lg`; `false` never hides. */\n  hideFrom?: ShellBreakpoint | false;\n  labels?: MobileAppBarLabels;\n}\n\n// A bare glyph has no border of its own, so it needs a rounded box for the ring to trace.\nconst BACK =\n  \"-ml-1 flex size-6 shrink-0 items-center justify-center rounded-md text-ink outline-none focus-visible:ring-2 focus-visible:ring-ring\";\n\nconst HIDE_FROM = { md: \"md:hidden\", lg: \"lg:hidden\" } as const;\n\n/**\n * The bar that titles a screen on a phone. A root screen puts the title flush\n * left with an optional action; a pushed one (`back`) centres it between the\n * back control and a matching spacer. Sticks under `--ev-shell-offset` and\n * arrives with the screen (`data-enter=\"rise\"`), one step ahead of a\n * `PageFrame`'s sections.\n */\nexport function MobileAppBar({\n  title,\n  back,\n  right,\n  linkComponent,\n  hideFrom = \"lg\",\n  labels = {},\n  className,\n  ...props\n}: MobileAppBarProps) {\n  const backLabel = labels.back ?? \"Back\";\n  const Link = linkComponent ?? \"a\";\n  return (\n    <header\n      data-slot=\"mobile-app-bar\"\n      data-enter=\"rise\"\n      className={cn(\n        \"sticky top-[var(--ev-shell-offset,0px)] z-30 flex items-center gap-2 border-b border-border bg-secondary px-4 pb-3.5 pt-4\",\n        hideFrom && HIDE_FROM[hideFrom],\n        className,\n      )}\n      {...props}\n    >\n      {back &&\n        (\"href\" in back ? (\n          <Link href={back.href} aria-label={backLabel} className={BACK}>\n            <ChevronLeftIcon className=\"size-6\" />\n          </Link>\n        ) : (\n          <button type=\"button\" onClick={back.onClick} aria-label={backLabel} className={BACK}>\n            <ChevronLeftIcon className=\"size-6\" />\n          </button>\n        ))}\n      <h1\n        className={cn(\n          \"min-w-0 flex-1 truncate font-semibold text-ink\",\n          back ? \"text-center text-base\" : \"text-lg\",\n        )}\n      >\n        {title}\n      </h1>\n      {back && right === undefined ? <span className=\"size-6 shrink-0\" aria-hidden /> : right}\n    </header>\n  );\n}\n"],"mappings":";AAoDI,SAaQ,KAbR;AAlDJ,YAAY,WAAW;AACvB,SAAS,UAAU;AAEnB,SAAS,uBAAuB;AAsBhC,MAAM,OACJ;AAEF,MAAM,YAAY,EAAE,IAAI,aAAa,IAAI,YAAY;AAS9C,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,SAAS,CAAC;AAAA,EACV;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,YAAY,OAAO,QAAQ;AACjC,QAAM,OAAO,iBAAiB;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,cAAW;AAAA,MACX,WAAW;AAAA,QACT;AAAA,QACA,YAAY,UAAU,QAAQ;AAAA,QAC9B;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,iBACE,UAAU,OACT,oBAAC,QAAK,MAAM,KAAK,MAAM,cAAY,WAAW,WAAW,MACvD,8BAAC,mBAAgB,WAAU,UAAS,GACtC,IAEA,oBAAC,YAAO,MAAK,UAAS,SAAS,KAAK,SAAS,cAAY,WAAW,WAAW,MAC7E,8BAAC,mBAAgB,WAAU,UAAS,GACtC;AAAA,QAEJ;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,OAAO,0BAA0B;AAAA,YACnC;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QACC,QAAQ,UAAU,SAAY,oBAAC,UAAK,WAAU,mBAAkB,eAAW,MAAC,IAAK;AAAA;AAAA;AAAA,EACpF;AAEJ;","names":[]}

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

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "../lib/cn.js";
+import { cn } from "../../lib/cn.js";
 const PILL = "rounded-full px-2 py-0.5 text-xs font-semibold tabular-nums";
 const CORNER = "absolute -right-2.5 -top-1.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-primary px-1 text-xs font-semibold leading-none tabular-nums text-on-primary";
 const defaultLabel = (n) => `${n} new`;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/shell/nav-badge.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\n\nexport type NavBadgeVariant = \"pill\" | \"corner\";\n\nexport interface NavBadgeProps extends Omit<React.ComponentProps<\"span\">, \"children\"> {\n  count: number;\n  /** Above this the badge shows `{max}+`. */\n  max?: number;\n  /**\n   * The spoken text, given the REAL count — the one figure the cap throws away.\n   * Default: `\"{n} new\"`.\n   */\n  label?: (count: number) => string;\n  /**\n   * `pill` sits in a row after the label (the rail); `corner` is the solid dot on\n   * an icon's top-right corner (the tab bar) — its parent must be `relative`.\n   */\n  variant?: NavBadgeVariant;\n  /** A pill on the marked row: inverted so it reads on the marker's fill. */\n  active?: boolean;\n}\n\nconst PILL = \"rounded-full px-2 py-0.5 text-xs font-semibold tabular-nums\";\nconst CORNER =\n  \"absolute -right-2.5 -top-1.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-primary px-1 text-xs font-semibold leading-none tabular-nums text-on-primary\";\n\nconst defaultLabel = (n: number) => `${n} new`;\n\n/**\n * A count on a nav row or tab, capped so a neglected inbox cannot widen the\n * rail. Draws nothing for `0` or less.\n *\n * The visible figure is `aria-hidden` and the spoken one rides in an `sr-only`\n * span rather than an `aria-label`: a label on a plain span is not part of the\n * name the browser computes for the link around it, while text is — so the row\n * reads \"Notifications, 150 new\".\n */\nexport function NavBadge({\n  count,\n  max = 99,\n  label = defaultLabel,\n  variant = \"pill\",\n  active = false,\n  className,\n  ...props\n}: NavBadgeProps) {\n  if (!(count > 0)) return null;\n  return (\n    <span\n      data-slot=\"nav-badge\"\n      data-variant={variant}\n      className={cn(\n        variant === \"corner\"\n          ? CORNER\n          : cn(PILL, active ? \"bg-background text-ink\" : \"bg-primary-ink/15 text-primary-ink\"),\n        className,\n      )}\n      {...props}\n    >\n      <span aria-hidden>{count > max ? `${max}+` : count}</span>\n      <span className=\"sr-only\">{label(count)}</span>\n    </span>\n  );\n}\n\nexport type NavDotTone = \"primary\" | \"positive\" | \"warn\" | \"error\";\n\nconst DOT_TONE: Record<NavDotTone, string> = {\n  primary: \"bg-primary-ink\",\n  positive: \"bg-positive\",\n  warn: \"bg-accent-warn\",\n  error: \"bg-accent-error\",\n};\n\nexport interface NavDotProps extends Omit<React.ComponentProps<\"span\">, \"children\"> {\n  tone?: NavDotTone;\n  /** Spoken text; without one the dot is decoration and hidden from AT. */\n  label?: string;\n  /** Pin to an icon's top-right corner (parent `relative`), as the tab bar does. */\n  corner?: boolean;\n}\n\n/** A presence dot — \"something here\", no figure. */\nexport function NavDot({ tone = \"primary\", label, corner = false, className, ...props }: NavDotProps) {\n  return (\n    <span\n      data-slot=\"nav-dot\"\n      aria-hidden={label === undefined ? true : undefined}\n      className={cn(\n        \"inline-block size-2 shrink-0 rounded-full\",\n        DOT_TONE[tone],\n        corner && \"absolute -right-1 -top-0.5\",\n        className,\n      )}\n      {...props}\n    >\n      {label !== undefined && <span className=\"sr-only\">{label}</span>}\n    </span>\n  );\n}\n"],"mappings":"AAiDI,SAWE,KAXF;AAjDJ,YAAY,WAAW;AACvB,SAAS,UAAU;AAsBnB,MAAM,OAAO;AACb,MAAM,SACJ;AAEF,MAAM,eAAe,CAAC,MAAc,GAAG,CAAC;AAWjC,SAAS,SAAS;AAAA,EACvB;AAAA,EACA,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,SAAS;AAAA,EACT;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,MAAI,EAAE,QAAQ,GAAI,QAAO;AACzB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,gBAAc;AAAA,MACd,WAAW;AAAA,QACT,YAAY,WACR,SACA,GAAG,MAAM,SAAS,2BAA2B,oCAAoC;AAAA,QACrF;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,4BAAC,UAAK,eAAW,MAAE,kBAAQ,MAAM,GAAG,GAAG,MAAM,OAAM;AAAA,QACnD,oBAAC,UAAK,WAAU,WAAW,gBAAM,KAAK,GAAE;AAAA;AAAA;AAAA,EAC1C;AAEJ;AAIA,MAAM,WAAuC;AAAA,EAC3C,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AACT;AAWO,SAAS,OAAO,EAAE,OAAO,WAAW,OAAO,SAAS,OAAO,WAAW,GAAG,MAAM,GAAgB;AACpG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,eAAa,UAAU,SAAY,OAAO;AAAA,MAC1C,WAAW;AAAA,QACT;AAAA,QACA,SAAS,IAAI;AAAA,QACb,UAAU;AAAA,QACV;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,oBAAU,UAAa,oBAAC,UAAK,WAAU,WAAW,iBAAM;AAAA;AAAA,EAC3D;AAEJ;","names":[]}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/shell/nav-link.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { anchorTargetProps, isPlainLeftClick, type NavItem } from \"./nav-model\";\n\nexport interface NavLinkCallbacks {\n  /** Hover or focus on an item — the moment to prefetch its route. */\n  onItemIntent?: ((item: NavItem) => void) | undefined;\n  /** A plain left click on an in-app item, after it is marked pending. */\n  onNavigate?: ((item: NavItem) => void) | undefined;\n}\n\ninterface NavLinkProps extends NavLinkCallbacks {\n  item: NavItem;\n  current: boolean;\n  pending: boolean;\n  linkComponent: React.ElementType | undefined;\n  markPending: (id: string) => void;\n  className: string;\n  title?: string | undefined;\n  children: React.ReactNode;\n}\n\n/**\n * The anchor (or the disabled stand-in) under a rail row and a tab: picks the\n * element, wires the optimistic mark and the intent/navigate callbacks, and\n * carries `aria-current`, which is also what the rail's marker measures.\n */\nexport function NavLink({\n  item,\n  current,\n  pending,\n  linkComponent,\n  markPending,\n  onItemIntent,\n  onNavigate,\n  className,\n  title,\n  children,\n}: NavLinkProps) {\n  if (item.disabled) {\n    return (\n      <span data-slot=\"nav-link\" aria-disabled=\"true\" title={title} className={className}>\n        {children}\n      </span>\n    );\n  }\n  const Comp: React.ElementType = item.external ? \"a\" : (linkComponent ?? \"a\");\n  const intent = onItemIntent && (() => onItemIntent(item));\n  return (\n    <Comp\n      data-slot=\"nav-link\"\n      data-pending={pending ? \"true\" : undefined}\n      href={item.href}\n      title={title}\n      aria-current={current ? \"page\" : undefined}\n      className={className}\n      onPointerEnter={intent}\n      onFocus={intent}\n      onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {\n        if (item.external || !isPlainLeftClick(e)) return;\n        markPending(item.id);\n        onNavigate?.(item);\n      }}\n      {...anchorTargetProps(item)}\n    >\n      {children}\n    </Comp>\n  );\n}\n\n/** The row's tooltip: the label itself when it is plain text, so a truncated one stays readable. */\nexport function labelTitle(label: React.ReactNode): string | undefined {\n  return typeof label === \"string\" ? label : undefined;\n}\n"],"mappings":";AA0CM;AAxCN,YAAY,WAAW;AACvB,SAAS,mBAAmB,wBAAsC;AAyB3D,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiB;AACf,MAAI,KAAK,UAAU;AACjB,WACE,oBAAC,UAAK,aAAU,YAAW,iBAAc,QAAO,OAAc,WAC3D,UACH;AAAA,EAEJ;AACA,QAAM,OAA0B,KAAK,WAAW,MAAO,iBAAiB;AACxE,QAAM,SAAS,iBAAiB,MAAM,aAAa,IAAI;AACvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,gBAAc,UAAU,SAAS;AAAA,MACjC,MAAM,KAAK;AAAA,MACX;AAAA,MACA,gBAAc,UAAU,SAAS;AAAA,MACjC;AAAA,MACA,gBAAgB;AAAA,MAChB,SAAS;AAAA,MACT,SAAS,CAAC,MAA2C;AACnD,YAAI,KAAK,YAAY,CAAC,iBAAiB,CAAC,EAAG;AAC3C,oBAAY,KAAK,EAAE;AACnB,qBAAa,IAAI;AAAA,MACnB;AAAA,MACC,GAAG,kBAAkB,IAAI;AAAA,MAEzB;AAAA;AAAA,EACH;AAEJ;AAGO,SAAS,WAAW,OAA4C;AACrE,SAAO,OAAO,UAAU,WAAW,QAAQ;AAC7C;","names":[]}

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

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

package/dist/components/{page-frame.js → shell/page-frame.js}

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

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

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

package/dist/components/{resource-error.js → shell/resource-error.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 { Alert, AlertDescription, AlertTitle } from "./alert.js";
-import { Button } from "./button.js";
+import { cn } from "../../lib/cn.js";
+import { Alert, AlertDescription, AlertTitle } from "../atomic/alert.js";
+import { Button } from "../atomic/button.js";
 import { RefreshIcon, TriangleAlertIcon } from "./shell-icons.js";
 function ResourceError(props) {
   if (props.variant === "alert") {
@@ -33,7 +33,7 @@ function ResourceError(props) {
       ...rest,
       children: [
         line,
-        onRetry && /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", size: "sm", disabled: retrying, onClick: onRetry, children: [
+        onRetry && /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", size: "xs", disabled: retrying, onClick: onRetry, children: [
           /* @__PURE__ */ jsx(RefreshIcon, { className: cn("size-4", retrying && "motion-safe:animate-spin") }),
           labels.retry ?? "Try again"
         ] })

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

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