@evinvest/uikit 0.31.0 → 0.33.0

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

@@ -1,7 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "../lib/cn.js";
-import { SECTION_LABEL_BASE, sectionLabelToneClasses } from "../generated/section-label.js";
+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,

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,14 +1,14 @@
 "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") {
     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: [
+    return /* @__PURE__ */ jsx("div", { "data-slot": "resource-error", "data-variant": "alert", className: className2, ...rest2, children: /* @__PURE__ */ jsxs(Alert, { tone: "error", children: [
       /* @__PURE__ */ jsx(TriangleAlertIcon, { className: "size-4" }),
       title !== void 0 && /* @__PURE__ */ jsx(AlertTitle, { children: title }),
       /* @__PURE__ */ jsx(AlertDescription, { children: message2 })
@@ -27,7 +27,7 @@ function ResourceError(props) {
       "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",
+        onRetry && "flex flex-wrap items-center gap-3 rounded-panel border border-tint-error-edge bg-accent-error/(--tint-hover) px-3 py-2.5",
         className
       ),
       ...rest,

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 tone=\"error\">\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-panel border border-tint-error-edge bg-accent-error/(--tint-hover) 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,MAAK,SACV;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 → shell/section-nav.js}

@@ -1,14 +1,14 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "../lib/cn.js";
+import { cn } from "../../lib/cn.js";
 import {
   NavCollapse,
   NavGroupHeader,
   useNavGroupOpen
 } from "./nav-collapse.js";
 import { SectionLabel } from "./page-frame.js";
-const ITEM = "flex h-8 w-full items-center gap-2.5 rounded-(--control-radius) px-2.5 text-left text-body outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40";
+const ITEM = "flex h-(--control-h-sm) w-full items-center gap-2.5 rounded-row px-2.5 text-left text-body outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-(--disabled-opacity)";
 function SectionNav({
   groups,
   value,
@@ -100,8 +100,8 @@ function SectionNavRow({
   const Icon = item.icon;
   const className = cn(
     ITEM,
-    active ? "bg-active text-ink" : "text-ink-mid hover:bg-hover",
-    nested && "h-9"
+    active ? "bg-selected text-ink" : "text-ink-mid hover:bg-hover",
+    nested && "h-(--control-h-md)"
   );
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
     Icon && /* @__PURE__ */ jsx(Icon, { className: "size-4 shrink-0 text-ink-soft" }),

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/shell/section-nav.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  NavCollapse,\n  NavGroupHeader,\n  useNavGroupOpen,\n  type NavCollapseLabels,\n  type NavGroupCollapse,\n} from \"./nav-collapse\";\nimport { SectionLabel } from \"./page-frame\";\n\nexport interface SectionNavItem {\n  id: string;\n  label: React.ReactNode;\n  icon?: React.ComponentType<{ className?: string }>;\n  /** A link (`?section=…`, a sub-route) instead of a button calling `onValueChange`. */\n  href?: string;\n  /** After the label — a count, a status chip. */\n  trailing?: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport interface SectionNavGroup extends NavGroupCollapse {\n  id: string;\n  label?: React.ReactNode;\n  /** One line under the label saying what kind of thing lives here. */\n  description?: React.ReactNode;\n  items: readonly SectionNavItem[];\n}\n\nexport interface SectionNavLabels extends NavCollapseLabels {\n  /** Accessible name of the nav. Default `\"Sections\"`. */\n  nav?: string;\n}\n\nexport interface SectionNavProps extends Omit<React.ComponentProps<\"nav\">, \"children\"> {\n  groups: readonly SectionNavGroup[];\n  /** The current section's id. */\n  value: string;\n  /** Called by button items (those without `href`), and by link items on click. */\n  onValueChange?: (id: string) => void;\n  linkComponent?: React.ElementType;\n  labels?: SectionNavLabels;\n  /** Makes every labelled group collapsible; a group's own `collapsible` wins. Default `false`. */\n  collapsible?: boolean;\n}\n\nconst ITEM =\n  \"flex h-(--control-h-sm) w-full items-center gap-2.5 rounded-row px-2.5 text-left text-body outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-(--disabled-opacity)\";\n\n/**\n * A screen's own section rail — settings panes, a document's chapters: grouped\n * rows, one current (`aria-current`), each a button or a link. The shell's rail\n * is `ShellNav`; this one lives inside a page, so it carries a tint rather than\n * the rail's solid marker and does not slide.\n */\nexport function SectionNav({\n  groups,\n  value,\n  onValueChange,\n  linkComponent,\n  labels = {},\n  collapsible = false,\n  className,\n  ...props\n}: SectionNavProps) {\n  return (\n    <nav\n      data-slot=\"section-nav\"\n      aria-label={labels.nav ?? \"Sections\"}\n      className={cn(\"flex w-64 shrink-0 flex-col gap-0.5\", className)}\n      {...props}\n    >\n      {groups.map((group) => (\n        <SectionNavGroupView\n          key={group.id}\n          group={group}\n          value={value}\n          onSelect={onValueChange}\n          linkComponent={linkComponent}\n          labels={labels}\n          collapsible={collapsible}\n        />\n      ))}\n    </nav>\n  );\n}\n\nfunction SectionNavGroupView({\n  group,\n  value,\n  onSelect,\n  linkComponent,\n  labels,\n  collapsible,\n}: {\n  group: SectionNavGroup;\n  value: string;\n  onSelect: ((id: string) => void) | undefined;\n  linkComponent: React.ElementType | undefined;\n  labels: SectionNavLabels;\n  collapsible: boolean;\n}) {\n  const labelId = React.useId();\n  const regionId = React.useId();\n  const [open, setOpen] = useNavGroupOpen(group, group.items.some((i) => i.id === value));\n  const folds = (group.collapsible ?? collapsible) && group.label !== undefined;\n  const rows = group.items.map((item) => (\n    <SectionNavRow\n      key={item.id}\n      item={item}\n      active={item.id === value}\n      nested={folds}\n      onSelect={onSelect}\n      linkComponent={linkComponent}\n    />\n  ));\n  if (folds) {\n    return (\n      <div className=\"flex flex-col pt-1.5 first:pt-0\">\n        <NavGroupHeader\n          label={group.label}\n          labelId={labelId}\n          regionId={regionId}\n          open={open}\n          onToggle={() => setOpen(!open)}\n          href={group.href}\n          linkComponent={linkComponent}\n          labels={labels}\n        />\n        <NavCollapse open={open} id={regionId}>\n          <div className=\"flex flex-col gap-0.5 pt-0.5 pl-3\">{rows}</div>\n        </NavCollapse>\n      </div>\n    );\n  }\n  return (\n    <div className=\"flex flex-col gap-0.5 pt-3.5 first:pt-0\">\n      {(group.label !== undefined || group.description !== undefined) && (\n        <div className=\"flex flex-col\">\n          {group.label !== undefined && <SectionLabel className=\"px-2 py-1\">{group.label}</SectionLabel>}\n          {group.description !== undefined && (\n            <p className=\"px-2 text-caption text-ink-soft\">{group.description}</p>\n          )}\n        </div>\n      )}\n      {rows}\n    </div>\n  );\n}\n\nfunction SectionNavRow({\n  item,\n  active,\n  nested,\n  onSelect,\n  linkComponent,\n}: {\n  item: SectionNavItem;\n  active: boolean;\n  nested: boolean;\n  onSelect: ((id: string) => void) | undefined;\n  linkComponent: React.ElementType | undefined;\n}) {\n  const Icon = item.icon;\n  const className = cn(\n    ITEM,\n    active ? \"bg-selected text-ink\" : \"text-ink-mid hover:bg-hover\",\n    nested && \"h-(--control-h-md)\",\n  );\n  const content = (\n    <>\n      {Icon && <Icon className=\"size-4 shrink-0 text-ink-soft\" />}\n      <span className=\"min-w-0 flex-1 truncate\">{item.label}</span>\n      {item.trailing}\n    </>\n  );\n  if (item.href !== undefined && !item.disabled) {\n    const Link = linkComponent ?? \"a\";\n    return (\n      <Link\n        href={item.href}\n        aria-current={active ? \"page\" : undefined}\n        className={className}\n        onClick={() => onSelect?.(item.id)}\n      >\n        {content}\n      </Link>\n    );\n  }\n  return (\n    <button\n      type=\"button\"\n      disabled={item.disabled}\n      aria-current={active ? \"true\" : undefined}\n      className={className}\n      onClick={() => onSelect?.(item.id)}\n    >\n      {content}\n    </button>\n  );\n}\n"],"mappings":"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","names":[]}

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

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

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

@@ -0,0 +1,42 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { iconShapes } from "../../icons/icon-shapes.js";
+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: iconShapes("chevron-left") });
+}
+function TriangleAlertIcon({ className }) {
+  return /* @__PURE__ */ jsx(Glyph, { className, children: iconShapes("triangle-alert") });
+}
+function InfoIcon({ className }) {
+  return /* @__PURE__ */ jsx(Glyph, { className, children: iconShapes("info") });
+}
+function RefreshIcon({ className }) {
+  return /* @__PURE__ */ jsx(Glyph, { className, children: iconShapes("refresh") });
+}
+function CloseIcon({ className }) {
+  return /* @__PURE__ */ jsx(Glyph, { className, children: iconShapes("close") });
+}
+export {
+  ChevronLeftIcon,
+  CloseIcon,
+  InfoIcon,
+  RefreshIcon,
+  TriangleAlertIcon
+};
+//# sourceMappingURL=shell-icons.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/shell/shell-icons.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { iconShapes } from \"../../icons/icon-shapes\";\n\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      {iconShapes(\"chevron-left\")}\n    </Glyph>\n  );\n}\n\nexport function TriangleAlertIcon({ className }: { className?: string | undefined }) {\n  return (\n    <Glyph className={className}>\n      {iconShapes(\"triangle-alert\")}\n    </Glyph>\n  );\n}\n\nexport function InfoIcon({ className }: { className?: string | undefined }) {\n  return (\n    <Glyph className={className}>\n      {iconShapes(\"info\")}\n    </Glyph>\n  );\n}\n\nexport function RefreshIcon({ className }: { className?: string | undefined }) {\n  return (\n    <Glyph className={className}>\n      {iconShapes(\"refresh\")}\n    </Glyph>\n  );\n}\n\nexport function CloseIcon({ className }: { className?: string | undefined }) {\n  return (\n    <Glyph className={className}>\n      {iconShapes(\"close\")}\n    </Glyph>\n  );\n}\n"],"mappings":"AAKI;AALJ,YAAY,WAAW;AACvB,SAAS,kBAAkB;AAE3B,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,WACJ,qBAAW,cAAc,GAC5B;AAEJ;AAEO,SAAS,kBAAkB,EAAE,UAAU,GAAuC;AACnF,SACE,oBAAC,SAAM,WACJ,qBAAW,gBAAgB,GAC9B;AAEJ;AAEO,SAAS,SAAS,EAAE,UAAU,GAAuC;AAC1E,SACE,oBAAC,SAAM,WACJ,qBAAW,MAAM,GACpB;AAEJ;AAEO,SAAS,YAAY,EAAE,UAAU,GAAuC;AAC7E,SACE,oBAAC,SAAM,WACJ,qBAAW,SAAS,GACvB;AAEJ;AAEO,SAAS,UAAU,EAAE,UAAU,GAAuC;AAC3E,SACE,oBAAC,SAAM,WACJ,qBAAW,OAAO,GACrB;AAEJ;","names":[]}

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

@@ -1,7 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "../lib/cn.js";
+import { cn } from "../../lib/cn.js";
 import { NavBadge } from "./nav-badge.js";
 import { labelTitle, NavLink } from "./nav-link.js";
 import { NavCollapse, NavGroupHeader, useNavGroupOpen } from "./nav-collapse.js";
@@ -11,7 +11,7 @@ import {
 } 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";
+const ROW = "flex items-center gap-3 rounded-row px-3 py-2 text-sm transition-colors";
 function ShellNav({
   groups,
   footerGroups = [],
@@ -48,7 +48,7 @@ function ShellNav({
     {
       "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",
+        "flex h-full w-(--shell-rail-w) flex-col gap-7 overflow-y-auto border-r border-border bg-card px-4.5 pb-5 pt-6",
         className
       ),
       ...props,
@@ -85,7 +85,7 @@ function ShellNavSection({
       {
         "data-slot": "shell-nav-marker",
         "aria-hidden": true,
-        className: "pointer-events-none absolute left-0 top-0 -z-10 rounded-lg bg-primary"
+        className: "pointer-events-none absolute left-0 top-0 -z-10 rounded-row bg-primary"
       }
     ),
     /* @__PURE__ */ jsx(
@@ -159,7 +159,7 @@ function ShellNavRow({
         ROW,
         NAV_FOCUS,
         state.active ? "font-semibold text-on-primary" : cn("font-medium hover:bg-hover", nested ? "text-ink-mid" : "text-ink"),
-        item.disabled && "cursor-not-allowed opacity-50 hover:bg-transparent"
+        item.disabled && "cursor-not-allowed opacity-(--disabled-opacity) hover:bg-transparent"
       ),
       children: row.renderItem ? row.renderItem(item, state) : /* @__PURE__ */ jsxs(Fragment, { children: [
         Icon && /* @__PURE__ */ jsx(Icon, { className: "size-4.5 shrink-0" }),

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/shell/shell-nav.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { NavBadge } from \"./nav-badge\";\nimport { labelTitle, NavLink, type NavLinkCallbacks } from \"./nav-link\";\nimport { NavCollapse, NavGroupHeader, useNavGroupOpen, type NavCollapseLabels } from \"./nav-collapse\";\nimport {\n  navItemMatch,\n  resolveActiveNavItem,\n  type NavGroup,\n  type NavItem,\n  type NavItemState,\n} from \"./nav-model\";\nimport { usePendingNavigation, useSlideMarker } from \"./use-shell-nav\";\n\nexport interface ShellNavLabels extends NavCollapseLabels {\n  /** Accessible name of the nav holding `groups`. Default `\"Main\"`. */\n  primary?: string;\n  /** Accessible name of the nav holding `footerGroups`. Default `\"Account\"`. */\n  footer?: string;\n  /** Spoken text of a numeric badge, given the real count. Default `\"{n} new\"`. */\n  badge?: (count: number) => string;\n}\n\nexport interface ShellNavProps\n  extends Omit<React.ComponentProps<\"aside\">, \"children\">,\n    NavLinkCallbacks {\n  groups: readonly NavGroup[];\n  /** Pinned to the bottom of the rail (profile, notifications, settings). */\n  footerGroups?: readonly NavGroup[];\n  /** The router's current path — `usePathname()` in Next. */\n  pathname: string;\n  /** Your router's link (`next/link`); defaults to a plain `<a>`. */\n  linkComponent?: React.ElementType;\n  /** Above the groups — the brand lock-up. */\n  header?: React.ReactNode;\n  /** Below the footer groups — the signed-in account, a sign-out. */\n  footer?: React.ReactNode;\n  /** Replaces a row's content (icon, label, badge); the link, `aria-current` and the marker stay the kit's. */\n  renderItem?: (item: NavItem, state: NavItemState) => React.ReactNode;\n  labels?: ShellNavLabels;\n  /** Makes every labelled group collapsible; a group's own `collapsible` wins. Default `false`. */\n  collapsible?: boolean;\n}\n\n// The ring is the solid token, never a tint — at 50% it composites under the 3:1\n// non-text floor. The offset keeps it legible around the marked row, whose fill\n// is that same hue.\nconst NAV_FOCUS =\n  \"outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-secondary\";\nconst ROW = \"flex items-center gap-3 rounded-row px-3 py-2 text-sm transition-colors\";\n\n/**\n * The app's left rail: data-driven groups, a footer block pinned to the bottom,\n * one sliding marker per group, and an optimistic mark on click so the row\n * answers the click rather than the router's round-trip.\n *\n * Exactly one row across the rail is current — the strongest claim on the path\n * (see {@link resolveActiveNavItem}) — so overlapping `prefix` items are safe.\n * Visibility (roles, flags) is the caller's: pass only the items to show.\n */\nexport function ShellNav({\n  groups,\n  footerGroups = [],\n  pathname,\n  linkComponent,\n  header,\n  footer,\n  renderItem,\n  onItemIntent,\n  onNavigate,\n  labels = {},\n  collapsible = false,\n  className,\n  ...props\n}: ShellNavProps) {\n  const [pendingId, markPending] = usePendingNavigation(pathname);\n  const all = [...groups, ...footerGroups].flatMap((g) => g.items);\n  const currentId =\n    (pendingId !== null && all.some((i) => i.id === pendingId) ? pendingId : undefined) ??\n    resolveActiveNavItem(all, pathname)?.id;\n  const section = (group: NavGroup) => (\n    <ShellNavSection\n      key={group.id}\n      group={group}\n      currentId={currentId}\n      pendingId={pendingId}\n      pathname={pathname}\n      labels={labels}\n      collapsible={collapsible}\n      row={{ linkComponent, markPending, onItemIntent, onNavigate, renderItem, badgeLabel: labels.badge }}\n    />\n  );\n  return (\n    <aside\n      data-slot=\"shell-nav\"\n      className={cn(\n        \"flex h-full w-(--shell-rail-w) flex-col gap-7 overflow-y-auto border-r border-border bg-card px-4.5 pb-5 pt-6\",\n        className,\n      )}\n      {...props}\n    >\n      {header}\n      <nav aria-label={labels.primary ?? \"Main\"} className=\"flex flex-col gap-4.5\">\n        {groups.map(section)}\n      </nav>\n      <div className=\"flex-1\" />\n      {footerGroups.length > 0 && (\n        <nav aria-label={labels.footer ?? \"Account\"} className=\"flex flex-col gap-4.5\">\n          {footerGroups.map(section)}\n        </nav>\n      )}\n      {footer}\n    </aside>\n  );\n}\n\ninterface RowContext extends NavLinkCallbacks {\n  linkComponent: React.ElementType | undefined;\n  markPending: (id: string) => void;\n  renderItem: ShellNavProps[\"renderItem\"];\n  badgeLabel: ((count: number) => string) | undefined;\n}\n\n// One marker node per SECTION, mounted once and moved — not one per rail: a\n// marker travelling between groups would cross headings that have nothing to do\n// with either row. Crossing groups unmounts one marker and mounts another (a\n// fade). `isolate` is load-bearing: the marker sits on a negative z-index and\n// without its own stacking context would land behind the rail's background.\n// The marker lives in the BODY, below the header, so a folding section clips it\n// together with its rows instead of leaving it painted over the next group.\nfunction ShellNavSection({\n  group,\n  currentId,\n  pendingId,\n  pathname,\n  row,\n  labels,\n  collapsible,\n}: {\n  group: NavGroup;\n  currentId: string | undefined;\n  pendingId: string | null;\n  pathname: string;\n  row: RowContext;\n  labels: ShellNavLabels;\n  collapsible: boolean;\n}) {\n  const body = React.useRef<HTMLDivElement>(null);\n  const labelId = React.useId();\n  const regionId = React.useId();\n  const at = group.items.some((i) => i.id === currentId) ? (currentId ?? null) : null;\n  const [open, setOpen] = useNavGroupOpen(group, at !== null);\n  useSlideMarker(body, at);\n  const folds = (group.collapsible ?? collapsible) && group.label !== undefined;\n  const landing =\n    group.href !== undefined &&\n    navItemMatch({ id: group.id, href: group.href, label: \"\", match: \"exact\" }, pathname) !== null;\n  const content = (\n    <div ref={body} className={cn(\"relative isolate\", folds && \"pt-1\")}>\n      {/* First in DOM order: the pre-hydration fill in motion.css reaches the marked\n          row through a sibling combinator, which only looks forward. */}\n      {at !== null && (\n        <span\n          data-slot=\"shell-nav-marker\"\n          aria-hidden\n          className=\"pointer-events-none absolute left-0 top-0 -z-10 rounded-row bg-primary\"\n        />\n      )}\n      <ul\n        aria-labelledby={group.label !== undefined ? labelId : undefined}\n        className={cn(\"flex flex-col gap-1\", folds && \"pl-3\")}\n      >\n        {group.items.map((item) => (\n          <li key={item.id} className=\"flex flex-col\">\n            <ShellNavRow\n              item={item}\n              nested={folds}\n              state={{ active: item.id === currentId, pending: item.id === pendingId }}\n              row={row}\n            />\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n  if (!folds) {\n    return (\n      <div\n        data-slot=\"shell-nav-section\"\n        className={cn(\"flex flex-col gap-1\", group.label !== undefined && \"pl-1\")}\n      >\n        {group.label !== undefined && (\n          <p id={labelId} className=\"mb-0.5 text-xs font-semibold uppercase tracking-widest text-ink-soft\">\n            {group.label}\n          </p>\n        )}\n        {content}\n      </div>\n    );\n  }\n  return (\n    <div data-slot=\"shell-nav-section\" data-state={open ? \"open\" : \"closed\"} className=\"flex flex-col\">\n      <NavGroupHeader\n        label={group.label}\n        labelId={labelId}\n        regionId={regionId}\n        open={open}\n        onToggle={() => setOpen(!open)}\n        href={group.href}\n        linkComponent={row.linkComponent}\n        current={landing}\n        labels={labels}\n      />\n      <NavCollapse open={open} id={regionId}>\n        {content}\n      </NavCollapse>\n    </div>\n  );\n}\n\nfunction ShellNavRow({\n  item,\n  state,\n  row,\n  nested,\n}: {\n  item: NavItem;\n  state: NavItemState;\n  row: RowContext;\n  nested: boolean;\n}) {\n  const Icon = item.icon;\n  const trailing = typeof item.trailing === \"function\" ? item.trailing(state) : item.trailing;\n  return (\n    <NavLink\n      item={item}\n      current={state.active}\n      pending={state.pending}\n      linkComponent={row.linkComponent}\n      markPending={row.markPending}\n      onItemIntent={row.onItemIntent}\n      onNavigate={row.onNavigate}\n      title={labelTitle(item.label)}\n      className={cn(\n        ROW,\n        NAV_FOCUS,\n        state.active\n          ? \"font-semibold text-on-primary\"\n          : cn(\"font-medium hover:bg-hover\", nested ? \"text-ink-mid\" : \"text-ink\"),\n        item.disabled && \"cursor-not-allowed opacity-(--disabled-opacity) 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/{smart-header.js → shell/smart-header.js}

@@ -1,12 +1,12 @@
 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 {
   SMART_HEADER_BAR,
   SMART_HEADER_BASE,
   SMART_HEADER_CONTEXT,
   SMART_HEADER_TOOLBAR
-} from "../generated/smart-header.js";
+} from "../../generated/smart-header.js";
 import { TopBar } from "./top-bar.js";
 function SmartHeader({
   state = "default",

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

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

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

@@ -0,0 +1,145 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/cn.js";
+import { accentTextClasses } from "../../generated/accent.js";
+import { buttonVariants } from "../atomic/button.js";
+import { Logo } from "./logo.js";
+import { STATUS_SCREEN_ACTIONS, STATUS_SCREEN_ACTION_ICON, STATUS_SCREEN_BODY, STATUS_SCREEN_CODE, STATUS_SCREEN_CTA, STATUS_SCREEN_EYEBROW, STATUS_SCREEN_GLOW, STATUS_SCREEN_LOGO, STATUS_SCREEN_ROOT, STATUS_SCREEN_STACK, STATUS_SCREEN_TITLE, STATUS_SCREEN_TITLE_ACCENT } from "../../generated/status-screen.js";
+import { iconShapes } from "../../icons/icon-shapes.js";
+import * as copy from "../../generated/copy.js";
+function statusCtaClass(accent, variant) {
+  return cn(
+    buttonVariants({ variant, size: "lg", accent }),
+    STATUS_SCREEN_CTA
+  );
+}
+function ArrowLeftIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children: iconShapes("arrow-left")
+    }
+  );
+}
+function StatusScreen({
+  accent,
+  eyebrow,
+  code,
+  headlineLead,
+  headlineAccent,
+  headlineTail = ".",
+  subtext,
+  links,
+  children,
+  linkComponent
+}) {
+  const L = linkComponent ?? "a";
+  const accentText = accentTextClasses[accent];
+  return /* @__PURE__ */ jsxs("section", { className: STATUS_SCREEN_ROOT, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": true,
+        className: cn(
+          STATUS_SCREEN_GLOW,
+          accentText
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: STATUS_SCREEN_STACK, children: [
+      /* @__PURE__ */ jsx(Logo, { className: cn(STATUS_SCREEN_LOGO, accentText) }),
+      /* @__PURE__ */ jsx("p", { className: cn(STATUS_SCREEN_EYEBROW, accentText), children: eyebrow }),
+      /* @__PURE__ */ jsx("p", { className: cn(STATUS_SCREEN_CODE, accentText), children: code }),
+      /* @__PURE__ */ jsxs("h1", { className: STATUS_SCREEN_TITLE, children: [
+        headlineLead,
+        /* @__PURE__ */ jsx("span", { className: cn(STATUS_SCREEN_TITLE_ACCENT, accentText), children: headlineAccent }),
+        headlineTail
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: STATUS_SCREEN_BODY, children: subtext }),
+      /* @__PURE__ */ jsxs("div", { className: STATUS_SCREEN_ACTIONS, children: [
+        children,
+        links?.map((link) => /* @__PURE__ */ jsxs(L, { href: link.href, className: statusCtaClass(accent, link.variant ?? "primary"), children: [
+          link.leadingArrow ? /* @__PURE__ */ jsx(ArrowLeftIcon, { className: STATUS_SCREEN_ACTION_ICON }) : null,
+          link.label
+        ] }, link.label))
+      ] })
+    ] })
+  ] });
+}
+function NotFound({ linkComponent = "a", homeHref = "/", contactHref = "/contact" }) {
+  return /* @__PURE__ */ jsx(
+    StatusScreen,
+    {
+      accent: "debug",
+      eyebrow: copy.NOT_FOUND_EYEBROW,
+      code: "404",
+      headlineLead: copy.NOT_FOUND_HEADLINE_LEAD,
+      headlineAccent: copy.NOT_FOUND_HEADLINE_ACCENT,
+      subtext: copy.NOT_FOUND_SUBTEXT,
+      linkComponent,
+      links: [
+        { label: copy.STATUS_HOME, href: homeHref, leadingArrow: true },
+        { label: copy.NOT_FOUND_CONTACT, href: contactHref, variant: "outline" }
+      ]
+    }
+  );
+}
+function Forbidden({ linkComponent = "a", homeHref = "/", contactHref = "/contact" }) {
+  return /* @__PURE__ */ jsx(
+    StatusScreen,
+    {
+      accent: "warn",
+      eyebrow: copy.FORBIDDEN_EYEBROW,
+      code: "403",
+      headlineLead: copy.FORBIDDEN_HEADLINE_LEAD,
+      headlineAccent: copy.FORBIDDEN_HEADLINE_ACCENT,
+      subtext: copy.FORBIDDEN_SUBTEXT,
+      linkComponent,
+      links: [
+        { label: copy.STATUS_HOME, href: homeHref, leadingArrow: true },
+        { label: copy.FORBIDDEN_CONTACT, href: contactHref, variant: "outline" }
+      ]
+    }
+  );
+}
+function ServerError({ linkComponent = "a", homeHref = "/", reset }) {
+  return /* @__PURE__ */ jsx(
+    StatusScreen,
+    {
+      accent: "error",
+      eyebrow: copy.SERVER_ERROR_EYEBROW,
+      code: "500",
+      headlineLead: copy.SERVER_ERROR_HEADLINE_LEAD,
+      headlineAccent: copy.SERVER_ERROR_HEADLINE_ACCENT,
+      subtext: copy.SERVER_ERROR_SUBTEXT,
+      linkComponent,
+      links: [{ label: copy.STATUS_HOME, href: homeHref, variant: "outline", leadingArrow: true }],
+      children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: statusCtaClass("error", "primary"),
+          onClick: () => reset ? reset() : window.location.reload(),
+          children: copy.SERVER_ERROR_RETRY
+        }
+      )
+    }
+  );
+}
+export {
+  Forbidden,
+  NotFound,
+  ServerError,
+  StatusScreen,
+  statusCtaClass
+};
+//# sourceMappingURL=status-screen.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/shell/status-screen.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { accentTextClasses, type Accent } from \"../../generated/accent\";\nimport { buttonVariants, type ButtonVariant } from \"../atomic/button\";\nimport { Logo } from \"./logo\";\nimport { STATUS_SCREEN_ACTIONS, STATUS_SCREEN_ACTION_ICON, STATUS_SCREEN_BODY, STATUS_SCREEN_CODE, STATUS_SCREEN_CTA, STATUS_SCREEN_EYEBROW, STATUS_SCREEN_GLOW, STATUS_SCREEN_LOGO, STATUS_SCREEN_ROOT, STATUS_SCREEN_STACK, STATUS_SCREEN_TITLE, STATUS_SCREEN_TITLE_ACCENT } from \"../../generated/status-screen\";\nimport { iconShapes } from \"../../icons/icon-shapes\";\nimport * as copy from \"../../generated/copy\";\n\n/**\n * The shared 404 / 403 / 500 status surface.\n *\n * `StatusScreen` is the generic shell; `NotFound` / `Forbidden` / `ServerError`\n * are the ready-made pages with their copy baked in — a host renders those with\n * its own hrefs. The mark is `Logo`'s, i.e. the consumer's. Links default to a\n * plain `<a>` (a full document load, which is what you want off an error page);\n * pass `linkComponent` (e.g. `next/link`) for soft navigation from a client\n * boundary.\n */\nexport type { Accent };\n\n/**\n * A status CTA is a Button at the page's accent: the canonical button string for\n * that variant and rung, then the mono/uppercase treatment the error pages wear.\n *\n * Exported because a host that renders its own action into `StatusScreen`'s\n * slot — a retry button wired to Next's `reset`, say — has to be able to match\n * the CTAs beside it.\n */\nexport function statusCtaClass(accent: Accent, variant: ButtonVariant) {\n  return cn(\n    buttonVariants({ variant, size: \"lg\", accent }),\n    STATUS_SCREEN_CTA,\n  );\n}\n\nfunction ArrowLeftIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden\n    >\n      {iconShapes(\"arrow-left\")}\n    </svg>\n  );\n}\n\nexport interface StatusLinkData {\n  label: string;\n  href: string;\n  variant?: ButtonVariant;\n  leadingArrow?: boolean;\n}\n\nexport interface StatusScreenProps {\n  accent: Accent;\n  eyebrow: string;\n  code: string;\n  headlineLead: string;\n  headlineAccent: string;\n  headlineTail?: string;\n  subtext: string;\n  links?: StatusLinkData[];\n  /** Leading action slot, rendered before `links` (e.g. the 500 client retry). */\n  children?: React.ReactNode;\n  /** CTA element — `next/link` for soft nav; defaults to `<a>` (full load). */\n  linkComponent?: React.ElementType;\n}\n\n/**\n * Shared skeleton for the 404 / 403 / 500 status pages: a centred hero with the\n * logo mark, a mono eyebrow, a giant Playfair code, a headline whose final clause\n * is an italic accent, supporting copy, and the CTAs. The accent threads through\n * all four marks. Actions render inline (from `links` data, plus an optional\n * `children` slot) — never passed as a JSX prop through a server boundary.\n */\nexport function StatusScreen({\n  accent,\n  eyebrow,\n  code,\n  headlineLead,\n  headlineAccent,\n  headlineTail = \".\",\n  subtext,\n  links,\n  children,\n  linkComponent,\n}: StatusScreenProps) {\n  const L = linkComponent ?? \"a\";\n  const accentText = accentTextClasses[accent];\n  return (\n    <section className={STATUS_SCREEN_ROOT}>\n      <div\n        aria-hidden\n        className={cn(\n          STATUS_SCREEN_GLOW,\n          accentText,\n        )}\n      />\n      <div className={STATUS_SCREEN_STACK}>\n        <Logo className={cn(STATUS_SCREEN_LOGO, accentText)} />\n        <p className={cn(STATUS_SCREEN_EYEBROW, accentText)}>{eyebrow}</p>\n        <p className={cn(STATUS_SCREEN_CODE, accentText)}>{code}</p>\n        <h1 className={STATUS_SCREEN_TITLE}>\n          {headlineLead}\n          <span className={cn(STATUS_SCREEN_TITLE_ACCENT, accentText)}>{headlineAccent}</span>\n          {headlineTail}\n        </h1>\n        <p className={STATUS_SCREEN_BODY}>{subtext}</p>\n        <div className={STATUS_SCREEN_ACTIONS}>\n          {children}\n          {links?.map((link) => (\n            <L key={link.label} href={link.href} className={statusCtaClass(accent, link.variant ?? \"primary\")}>\n              {link.leadingArrow ? <ArrowLeftIcon className={STATUS_SCREEN_ACTION_ICON} /> : null}\n              {link.label}\n            </L>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n\nexport interface StatusPageProps {\n  /** CTA element — `next/link` for soft nav; defaults to `<a>` (full load). */\n  linkComponent?: React.ElementType;\n  /** copy.STATUS_HOME target — `/` for the landing, `/cabinet` for the cabinet. */\n  homeHref?: string;\n  /** Secondary CTA target (contact / request access). */\n  contactHref?: string;\n}\n\n/** 404 — page not found. */\nexport function NotFound({ linkComponent = \"a\", homeHref = \"/\", contactHref = \"/contact\" }: StatusPageProps) {\n  return (\n    <StatusScreen\n      accent=\"debug\"\n      eyebrow={copy.NOT_FOUND_EYEBROW}\n      code=\"404\"\n      headlineLead={copy.NOT_FOUND_HEADLINE_LEAD}\n      headlineAccent={copy.NOT_FOUND_HEADLINE_ACCENT}\n      subtext={copy.NOT_FOUND_SUBTEXT}\n      linkComponent={linkComponent}\n      links={[\n        { label: copy.STATUS_HOME, href: homeHref, leadingArrow: true },\n        { label: copy.NOT_FOUND_CONTACT, href: contactHref, variant: \"outline\" },\n      ]}\n    />\n  );\n}\n\n/** 403 — access forbidden. */\nexport function Forbidden({ linkComponent = \"a\", homeHref = \"/\", contactHref = \"/contact\" }: StatusPageProps) {\n  return (\n    <StatusScreen\n      accent=\"warn\"\n      eyebrow={copy.FORBIDDEN_EYEBROW}\n      code=\"403\"\n      headlineLead={copy.FORBIDDEN_HEADLINE_LEAD}\n      headlineAccent={copy.FORBIDDEN_HEADLINE_ACCENT}\n      subtext={copy.FORBIDDEN_SUBTEXT}\n      linkComponent={linkComponent}\n      links={[\n        { label: copy.STATUS_HOME, href: homeHref, leadingArrow: true },\n        { label: copy.FORBIDDEN_CONTACT, href: contactHref, variant: \"outline\" },\n      ]}\n    />\n  );\n}\n\nexport interface ServerErrorProps {\n  /** CTA element — `next/link` for soft nav; defaults to `<a>` (full load). */\n  linkComponent?: React.ElementType;\n  /** copy.STATUS_HOME target — `/` for the landing, `/cabinet` for the cabinet. */\n  homeHref?: string;\n  /** Retry handler (e.g. Next's error-boundary `reset`); falls back to a reload. */\n  reset?: () => void;\n}\n\n/** 500 — server error. The \"Try again\" button runs `reset` or reloads the page. */\nexport function ServerError({ linkComponent = \"a\", homeHref = \"/\", reset }: ServerErrorProps) {\n  return (\n    <StatusScreen\n      accent=\"error\"\n      eyebrow={copy.SERVER_ERROR_EYEBROW}\n      code=\"500\"\n      headlineLead={copy.SERVER_ERROR_HEADLINE_LEAD}\n      headlineAccent={copy.SERVER_ERROR_HEADLINE_ACCENT}\n      subtext={copy.SERVER_ERROR_SUBTEXT}\n      linkComponent={linkComponent}\n      links={[{ label: copy.STATUS_HOME, href: homeHref, variant: \"outline\", leadingArrow: true }]}\n    >\n      <button\n        type=\"button\"\n        className={statusCtaClass(\"error\", \"primary\")}\n        onClick={() => (reset ? reset() : window.location.reload())}\n      >\n        {copy.SERVER_ERROR_RETRY}\n      </button>\n    </StatusScreen>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/{system-banner.js → shell/system-banner.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 {
   SYSTEM_BANNER_ACTION,
   SYSTEM_BANNER_BASE,
@@ -11,12 +11,12 @@ import {
   SYSTEM_BANNER_ICON,
   SYSTEM_BANNER_MESSAGE,
   SYSTEM_BANNER_TITLE,
-  systemBannerIconToneClasses,
-  systemBannerToneClasses
-} from "../generated/system-banner.js";
+  SYSTEM_BANNER_LABELS
+} from "../../generated/system-banner.js";
+import { toneClasses } from "../../generated/tone.js";
 import { CloseIcon, InfoIcon, TriangleAlertIcon } from "./shell-icons.js";
 function SystemBanner({
-  tone = "info",
+  tone = "neutral",
   title,
   icon,
   onDismiss,
@@ -33,10 +33,10 @@ function SystemBanner({
       "data-slot": "system-banner",
       "data-tone": tone,
       role: "status",
-      className: cn(SYSTEM_BANNER_BASE, systemBannerToneClasses[tone], className),
+      className: cn(SYSTEM_BANNER_BASE, toneClasses[tone], className),
       ...props,
       children: [
-        glyph !== null && /* @__PURE__ */ jsx("span", { className: cn(SYSTEM_BANNER_ICON, systemBannerIconToneClasses[tone]), children: glyph }),
+        glyph !== null && /* @__PURE__ */ jsx("span", { className: SYSTEM_BANNER_ICON, children: glyph }),
         /* @__PURE__ */ jsxs("div", { className: SYSTEM_BANNER_MESSAGE, children: [
           title !== void 0 && /* @__PURE__ */ jsx("span", { className: SYSTEM_BANNER_TITLE, children: title }),
           title !== void 0 && children !== void 0 && " \u2014 ",
@@ -47,7 +47,7 @@ function SystemBanner({
           "button",
           {
             type: "button",
-            "aria-label": labels.dismiss ?? "Dismiss",
+            "aria-label": labels.dismiss ?? SYSTEM_BANNER_LABELS.dismiss,
             onClick: onDismiss,
             className: SYSTEM_BANNER_DISMISS,
             children: /* @__PURE__ */ jsx(CloseIcon, { className: SYSTEM_BANNER_GLYPH })

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

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

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

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "../lib/cn.js";
-import { TOP_BAR_BASE, TOP_BAR_END, TOP_BAR_START } from "../generated/top-bar.js";
+import { cn } from "../../lib/cn.js";
+import { TOP_BAR_BASE, TOP_BAR_END, TOP_BAR_START } from "../../generated/top-bar.js";
 function TopBar({ start, end, className, ...props }) {
   return /* @__PURE__ */ jsxs(
     "header",

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

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

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

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

package/dist/components/{workspace-tab.js → shell/workspace-tab.js}

@@ -1,8 +1,8 @@
 "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";
+import { cn } from "../../lib/cn.js";
+import { useControllableState } from "../../primitives/use-controllable-state.js";
 import {
   WORKSPACE_TAB_BASE,
   WORKSPACE_TAB_CLOSE,
@@ -11,8 +11,9 @@ import {
   WORKSPACE_TAB_SPACER,
   WORKSPACE_TAB_TRIGGER,
   WORKSPACE_TABS_BASE
-} from "../generated/workspace-tab.js";
-import { UiIcon } from "./ui-icons.js";
+} from "../../generated/workspace-tab.js";
+import { UiIcon } from "../../icons/ui-icons.js";
+import * as copy from "../../generated/copy.js";
 const WorkspaceTabsContext = React.createContext(null);
 function useWorkspaceTabs() {
   const ctx = React.useContext(WorkspaceTabsContext);
@@ -65,7 +66,7 @@ function WorkspaceTab({
   value,
   icon,
   onClose,
-  closeLabel = "Close tab",
+  closeLabel = copy.WORKSPACE_TAB_CLOSE,
   className,
   children,
   onClick,

package/dist/components/shell/workspace-tab.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/shell/workspace-tab.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { useControllableState } from \"../../primitives/use-controllable-state\";\nimport {\n  WORKSPACE_TAB_BASE,\n  WORKSPACE_TAB_CLOSE,\n  WORKSPACE_TAB_LABEL,\n  WORKSPACE_TAB_SELECTED,\n  WORKSPACE_TAB_SPACER,\n  WORKSPACE_TAB_TRIGGER,\n  WORKSPACE_TABS_BASE,\n} from \"../../generated/workspace-tab\";\nimport { UiIcon } from \"../../icons/ui-icons\";\nimport * as copy from \"../../generated/copy\";\n\ninterface WorkspaceTabsContextValue {\n  value: string;\n  setValue: (next: string) => void;\n  /** Values of the mounted tabs, in mount order. */\n  values: readonly string[];\n  register: (value: string) => () => void;\n}\n\nconst WorkspaceTabsContext = React.createContext<WorkspaceTabsContextValue | null>(null);\n\nfunction useWorkspaceTabs(): WorkspaceTabsContextValue {\n  const ctx = React.useContext(WorkspaceTabsContext);\n  if (!ctx) throw new Error(\"WorkspaceTab must be used within <WorkspaceTabs>\");\n  return ctx;\n}\n\nexport interface WorkspaceTabsProps extends Omit<React.ComponentProps<\"div\">, \"onChange\" | \"defaultValue\"> {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n}\n\n/**\n * A row of open workspaces. Arrow keys move focus (Home/End jump); selecting is\n * Enter, Space or a click, so moving through the row never swaps the screen.\n */\nexport function WorkspaceTabs({\n  value,\n  defaultValue = \"\",\n  onValueChange,\n  className,\n  onKeyDown,\n  ...props\n}: WorkspaceTabsProps) {\n  const [active, setValue] = useControllableState<string>({\n    ...(value !== undefined ? { value } : {}),\n    defaultValue,\n    ...(onValueChange ? { onChange: onValueChange } : {}),\n  });\n  const [values, setValues] = React.useState<readonly string[]>([]);\n  const register = React.useCallback((v: string) => {\n    setValues((prev) => [...prev, v]);\n    return () => setValues((prev) => prev.filter((x) => x !== v));\n  }, []);\n  // Tabs come and go as workspaces open and close, so the order is read from the DOM at key time.\n  const move = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    const tabs = Array.from(e.currentTarget.querySelectorAll<HTMLElement>('[role=\"tab\"]'));\n    const at = tabs.indexOf(document.activeElement as HTMLElement);\n    if (at < 0) return;\n    const target =\n      e.key === \"ArrowRight\" ? (at + 1) % tabs.length\n      : e.key === \"ArrowLeft\" ? (at - 1 + tabs.length) % tabs.length\n      : e.key === \"Home\" ? 0\n      : e.key === \"End\" ? tabs.length - 1\n      : -1;\n    if (target < 0) return;\n    e.preventDefault();\n    tabs[target]?.focus();\n  };\n  return (\n    <WorkspaceTabsContext.Provider value={{ value: active, setValue, values, register }}>\n      <div\n        role=\"tablist\"\n        aria-orientation=\"horizontal\"\n        data-slot=\"workspace-tabs\"\n        className={cn(WORKSPACE_TABS_BASE, className)}\n        onKeyDown={(e) => {\n          onKeyDown?.(e);\n          if (!e.defaultPrevented) move(e);\n        }}\n        {...props}\n      />\n    </WorkspaceTabsContext.Provider>\n  );\n}\n\nexport interface WorkspaceTabProps extends Omit<React.ComponentProps<\"button\">, \"value\"> {\n  value: string;\n  /** Leading glyph; the layers glyph by default. */\n  icon?: React.ReactNode;\n  /** Adds a close button; Delete and Backspace on the tab close it too. */\n  onClose?: () => void;\n  /** Names the close button, e.g. \"Close Trading\". */\n  closeLabel?: string;\n}\n\nexport function WorkspaceTab({\n  value,\n  icon,\n  onClose,\n  closeLabel = copy.WORKSPACE_TAB_CLOSE,\n  className,\n  children,\n  onClick,\n  onKeyDown,\n  ...props\n}: WorkspaceTabProps) {\n  const { value: active, setValue, values, register } = useWorkspaceTabs();\n  React.useEffect(() => register(value), [register, value]);\n  const selected = active === value;\n  // With no selected tab (nothing chosen yet, or the active one was just closed) the first tab\n  // takes the tab stop, or the row could not be entered from the keyboard.\n  const stop = selected || (!values.includes(active) && values[0] === value);\n  return (\n    <div\n      data-slot=\"workspace-tab\"\n      data-state={selected ? \"active\" : \"inactive\"}\n      className={cn(\n        WORKSPACE_TAB_BASE,\n        selected && WORKSPACE_TAB_SELECTED,\n        className,\n      )}\n    >\n      <button\n        type=\"button\"\n        role=\"tab\"\n        aria-selected={selected}\n        tabIndex={stop ? 0 : -1}\n        className={WORKSPACE_TAB_TRIGGER}\n        onClick={(e) => {\n          onClick?.(e);\n          setValue(value);\n        }}\n        onKeyDown={(e) => {\n          onKeyDown?.(e);\n          if (onClose && (e.key === \"Delete\" || e.key === \"Backspace\")) {\n            e.preventDefault();\n            // Hand focus to a neighbour first: the closed tab's button unmounts and focus would fall to <body>.\n            const tabs = Array.from(\n              e.currentTarget.closest('[role=\"tablist\"]')?.querySelectorAll<HTMLElement>('[role=\"tab\"]') ?? [],\n            );\n            const at = tabs.indexOf(e.currentTarget);\n            (tabs[at + 1] ?? tabs[at - 1])?.focus();\n            onClose();\n          }\n        }}\n        {...props}\n      >\n        {icon ?? <UiIcon name=\"layers\" />}\n        <span className={WORKSPACE_TAB_LABEL}>{children}</span>\n      </button>\n      {onClose ? (\n        <button\n          type=\"button\"\n          aria-label={closeLabel}\n          tabIndex={-1}\n          onClick={onClose}\n          className={WORKSPACE_TAB_CLOSE}\n        >\n          <UiIcon name=\"x\" />\n        </button>\n      ) : (\n        <span className={WORKSPACE_TAB_SPACER} aria-hidden />\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}