@evinvest/uikit 0.31.0 → 0.33.0

package/dist/components/{account-settings-dialog.js → shell/account-settings-dialog.js}

@@ -12,13 +12,14 @@ import {
   ACCOUNT_SETTINGS_DIALOG_PANEL,
   ACCOUNT_SETTINGS_DIALOG_SIDEBAR,
   ACCOUNT_SETTINGS_DIALOG_TABS,
-  ACCOUNT_SETTINGS_DIALOG_TITLE
-} from "../generated/account-settings-dialog.js";
-import { cn } from "../lib/cn.js";
-import { Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle } from "./dialog.js";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs.js";
-import { IconButton } from "./icon-button.js";
-import { UiIcon } from "./ui-icons.js";
+  ACCOUNT_SETTINGS_DIALOG_TITLE,
+  ACCOUNT_SETTINGS_DIALOG_LABELS
+} from "../../generated/account-settings-dialog.js";
+import { cn } from "../../lib/cn.js";
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle } from "../atomic/dialog.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../atomic/tabs.js";
+import { IconButton } from "../derived/icon-button.js";
+import { UiIcon } from "../../icons/ui-icons.js";
 function AccountSettingsDialog({
   open,
   defaultOpen,
@@ -71,7 +72,7 @@ function AccountSettingsDialog({
                 ]
               }
             ),
-            /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { "aria-label": labels.close ?? "Close", className: ACCOUNT_SETTINGS_DIALOG_CLOSE, children: /* @__PURE__ */ jsx(UiIcon, { name: "x" }) }) })
+            /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { "aria-label": labels.close ?? ACCOUNT_SETTINGS_DIALOG_LABELS.close, className: ACCOUNT_SETTINGS_DIALOG_CLOSE, children: /* @__PURE__ */ jsx(UiIcon, { name: "x" }) }) })
           ]
         }
       )

package/dist/components/shell/account-settings-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/shell/account-settings-dialog.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  ACCOUNT_SETTINGS_DIALOG_CLOSE,\n  ACCOUNT_SETTINGS_DIALOG_CONTENT,\n  ACCOUNT_SETTINGS_DIALOG_DESCRIPTION,\n  ACCOUNT_SETTINGS_DIALOG_ENTRY,\n  ACCOUNT_SETTINGS_DIALOG_FOOTER,\n  ACCOUNT_SETTINGS_DIALOG_HEADING,\n  ACCOUNT_SETTINGS_DIALOG_LIST,\n  ACCOUNT_SETTINGS_DIALOG_PANE,\n  ACCOUNT_SETTINGS_DIALOG_PANEL,\n  ACCOUNT_SETTINGS_DIALOG_SIDEBAR,\n  ACCOUNT_SETTINGS_DIALOG_TABS,\n  ACCOUNT_SETTINGS_DIALOG_TITLE,\n  ACCOUNT_SETTINGS_DIALOG_LABELS,\n} from \"../../generated/account-settings-dialog\";\nimport { cn } from \"../../lib/cn\";\nimport { Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle } from \"../atomic/dialog\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"../atomic/tabs\";\nimport { IconButton } from \"../derived/icon-button\";\nimport { UiIcon } from \"../../icons/ui-icons\";\n\nexport interface AccountSettingsSection {\n  id: string;\n  label: React.ReactNode;\n  icon?: React.ReactNode;\n  content: React.ReactNode;\n}\n\nexport interface AccountSettingsDialogLabels {\n  /** The close button. Default `\"Close\"`. */\n  close?: string;\n}\n\nexport interface AccountSettingsDialogProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** The heading of the content pane. */\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  /** One sidebar entry each; the active one's `content` fills the pane. */\n  sections: readonly AccountSettingsSection[];\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (id: string) => void;\n  /** Pinned under the sidebar entries: sign out, language. */\n  sidebarFooter?: React.ReactNode;\n  labels?: AccountSettingsDialogLabels;\n  className?: string;\n}\n\n/**\n * The account modal: a vertical tab rail on the left, the active section on\n * the right. Sections are the caller's, so Profile and Security (or any other)\n * are built from `SettingsSection` and `SettingsRow` inside `content`.\n */\nexport function AccountSettingsDialog({\n  open,\n  defaultOpen,\n  onOpenChange,\n  title,\n  description,\n  sections,\n  value,\n  defaultValue,\n  onValueChange,\n  sidebarFooter,\n  labels = {},\n  className,\n}: AccountSettingsDialogProps) {\n  const first = sections[0]?.id ?? \"\";\n  return (\n    <Dialog\n      {...(open !== undefined ? { open } : {})}\n      {...(defaultOpen !== undefined ? { defaultOpen } : {})}\n      {...(onOpenChange ? { onOpenChange } : {})}\n    >\n      <DialogContent\n        showCloseButton={false}\n        className={cn(ACCOUNT_SETTINGS_DIALOG_CONTENT, className)}\n      >\n        <Tabs\n          orientation=\"vertical\"\n          {...(value !== undefined ? { value } : { defaultValue: defaultValue ?? first })}\n          {...(onValueChange ? { onValueChange } : {})}\n          className={ACCOUNT_SETTINGS_DIALOG_TABS}\n        >\n          <div className={ACCOUNT_SETTINGS_DIALOG_SIDEBAR}>\n            <TabsList className={ACCOUNT_SETTINGS_DIALOG_LIST}>\n              {sections.map((s) => (\n                <TabsTrigger key={s.id} value={s.id} className={ACCOUNT_SETTINGS_DIALOG_ENTRY}>\n                  {s.icon}\n                  {s.label}\n                </TabsTrigger>\n              ))}\n            </TabsList>\n            {sidebarFooter != null && (\n              <div className={ACCOUNT_SETTINGS_DIALOG_FOOTER}>{sidebarFooter}</div>\n            )}\n          </div>\n          <div className={ACCOUNT_SETTINGS_DIALOG_PANE}>\n            <div className={ACCOUNT_SETTINGS_DIALOG_HEADING}>\n              <DialogTitle className={ACCOUNT_SETTINGS_DIALOG_TITLE}>{title}</DialogTitle>\n              {description != null && (\n                <DialogDescription className={ACCOUNT_SETTINGS_DIALOG_DESCRIPTION}>{description}</DialogDescription>\n              )}\n            </div>\n            {sections.map((s) => (\n              <TabsContent key={s.id} value={s.id} className={ACCOUNT_SETTINGS_DIALOG_PANEL}>\n                {s.content}\n              </TabsContent>\n            ))}\n          </div>\n        </Tabs>\n        <DialogClose asChild>\n          <IconButton aria-label={labels.close ?? ACCOUNT_SETTINGS_DIALOG_LABELS.close} className={ACCOUNT_SETTINGS_DIALOG_CLOSE}>\n            <UiIcon name=\"x\" />\n          </IconButton>\n        </DialogClose>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"AAyFY,cAEI,YAFJ;AAzFZ,YAAY,WAAW;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,UAAU;AACnB,SAAS,QAAQ,aAAa,eAAe,mBAAmB,mBAAmB;AACnF,SAAS,MAAM,aAAa,UAAU,mBAAmB;AACzD,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AAqChB,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS,CAAC;AAAA,EACV;AACF,GAA+B;AAC7B,QAAM,QAAQ,SAAS,CAAC,GAAG,MAAM;AACjC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAI,SAAS,SAAY,EAAE,KAAK,IAAI,CAAC;AAAA,MACrC,GAAI,gBAAgB,SAAY,EAAE,YAAY,IAAI,CAAC;AAAA,MACnD,GAAI,eAAe,EAAE,aAAa,IAAI,CAAC;AAAA,MAExC;AAAA,QAAC;AAAA;AAAA,UACC,iBAAiB;AAAA,UACjB,WAAW,GAAG,iCAAiC,SAAS;AAAA,UAExD;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,aAAY;AAAA,gBACX,GAAI,UAAU,SAAY,EAAE,MAAM,IAAI,EAAE,cAAc,gBAAgB,MAAM;AAAA,gBAC5E,GAAI,gBAAgB,EAAE,cAAc,IAAI,CAAC;AAAA,gBAC1C,WAAW;AAAA,gBAEX;AAAA,uCAAC,SAAI,WAAW,iCACd;AAAA,wCAAC,YAAS,WAAW,8BAClB,mBAAS,IAAI,CAAC,MACb,qBAAC,eAAuB,OAAO,EAAE,IAAI,WAAW,+BAC7C;AAAA,wBAAE;AAAA,sBACF,EAAE;AAAA,yBAFa,EAAE,EAGpB,CACD,GACH;AAAA,oBACC,iBAAiB,QAChB,oBAAC,SAAI,WAAW,gCAAiC,yBAAc;AAAA,qBAEnE;AAAA,kBACA,qBAAC,SAAI,WAAW,8BACd;AAAA,yCAAC,SAAI,WAAW,iCACd;AAAA,0CAAC,eAAY,WAAW,+BAAgC,iBAAM;AAAA,sBAC7D,eAAe,QACd,oBAAC,qBAAkB,WAAW,qCAAsC,uBAAY;AAAA,uBAEpF;AAAA,oBACC,SAAS,IAAI,CAAC,MACb,oBAAC,eAAuB,OAAO,EAAE,IAAI,WAAW,+BAC7C,YAAE,WADa,EAAE,EAEpB,CACD;AAAA,qBACH;AAAA;AAAA;AAAA,YACF;AAAA,YACA,oBAAC,eAAY,SAAO,MAClB,8BAAC,cAAW,cAAY,OAAO,SAAS,+BAA+B,OAAO,WAAW,+BACvF,8BAAC,UAAO,MAAK,KAAI,GACnB,GACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/{app-shell.js → shell/app-shell.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 AT = {
   md: {
     rail: "hidden md:flex",

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/shell/app-shell.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\n\n/** Where the shell swaps the bottom tab bar for the rail. */\nexport type ShellBreakpoint = \"md\" | \"lg\";\n\nexport interface AppShellProps extends React.ComponentProps<\"div\"> {\n  /** The desktop rail — a `ShellNav`. Shown from `breakpoint` up. */\n  rail?: React.ReactNode;\n  /** The phone's tab bar — a `BottomTabBar`. Pinned to the viewport bottom below `breakpoint`. */\n  tabBar?: React.ReactNode;\n  /** A `TopBar`, pinned over the column from `breakpoint` up (a phone titles its screen with `MobileAppBar`). */\n  topBar?: React.ReactNode;\n  /** Strips above the page (`SystemBanner`s). An empty slot takes no room. */\n  banner?: React.ReactNode;\n  /** Right of the content column: an `AsidePanel` and its `AsideRail`, side by side. Sticks like the rail. */\n  aside?: React.ReactNode;\n  /** Default `lg`. */\n  breakpoint?: ShellBreakpoint;\n  /** Props for the `<main>` the page renders into (an `id` for a skip link, say). */\n  mainProps?: React.ComponentProps<\"main\">;\n}\n\n// Tailwind only sees whole class strings, so each breakpoint spells its own.\nconst AT = {\n  md: {\n    rail: \"hidden md:flex\",\n    tabBar: \"md:hidden\",\n    topBar: \"hidden md:block\",\n    reserve: \"pb-[calc(var(--shell-tab-bar-h)+env(safe-area-inset-bottom,0px))] md:pb-0\",\n    banner: \"md:px-8\",\n  },\n  lg: {\n    rail: \"hidden lg:flex\",\n    tabBar: \"lg:hidden\",\n    topBar: \"hidden lg:block\",\n    reserve: \"pb-[calc(var(--shell-tab-bar-h)+env(safe-area-inset-bottom,0px))] lg:pb-0\",\n    banner: \"lg:px-8\",\n  },\n} as const;\n\nconst present = (node: React.ReactNode) => node !== null && node !== undefined && node !== false;\n\n/**\n * The signed-in app's frame: a rail beside a content column on a wide screen, a\n * bottom tab bar under it on a phone. Layout only — the nav, the top bar, the banners\n * and the page are slots, so the shell knows nothing about routes, roles or data.\n *\n * Fills the viewport less `--ev-shell-offset` (the room a host shell's own header\n * takes); the rail sticks under that offset at full remaining height and scrolls\n * by itself when it cannot fit. The column reserves the tab bar's height plus\n * the bottom safe area, so the bar never covers content.\n */\nexport function AppShell({\n  rail,\n  tabBar,\n  topBar,\n  banner,\n  aside,\n  breakpoint = \"lg\",\n  mainProps,\n  className,\n  children,\n  ...props\n}: AppShellProps) {\n  const at = AT[breakpoint];\n  return (\n    <div\n      data-slot=\"app-shell\"\n      data-breakpoint={breakpoint}\n      className={cn(\n        \"flex min-h-[calc(100dvh-var(--ev-shell-offset,0px))] bg-background\",\n        className,\n      )}\n      {...props}\n    >\n      {present(rail) && (\n        <div\n          data-slot=\"app-shell-rail\"\n          className={cn(\n            \"sticky top-[var(--ev-shell-offset,0px)] h-[calc(100dvh-var(--ev-shell-offset,0px))] shrink-0 self-start\",\n            at.rail,\n          )}\n        >\n          {rail}\n        </div>\n      )}\n      <div\n        data-slot=\"app-shell-content\"\n        className={cn(\"flex min-w-0 flex-1 flex-col\", present(tabBar) && at.reserve)}\n      >\n        {present(topBar) && (\n          <div\n            data-slot=\"app-shell-top-bar\"\n            className={cn(\"sticky top-[var(--ev-shell-offset,0px)] z-30\", at.topBar)}\n          >\n            {topBar}\n          </div>\n        )}\n        {present(banner) && (\n          <div\n            data-slot=\"app-shell-banner\"\n            className={cn(\"flex flex-col gap-2 px-4 pt-4 empty:hidden\", at.banner)}\n          >\n            {banner}\n          </div>\n        )}\n        <main {...mainProps} className={cn(\"min-w-0 flex-1\", mainProps?.className)}>\n          {children}\n        </main>\n      </div>\n      {present(aside) && (\n        <div\n          data-slot=\"app-shell-aside\"\n          className=\"sticky top-[var(--ev-shell-offset,0px)] flex h-[calc(100dvh-var(--ev-shell-offset,0px))] shrink-0 self-start\"\n        >\n          {aside}\n        </div>\n      )}\n      {present(tabBar) && (\n        <div\n          data-slot=\"app-shell-tab-bar\"\n          className={cn(\"fixed inset-x-0 bottom-0 z-40\", at.tabBar)}\n        >\n          {tabBar}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"AA6EQ,cAUF,YAVE;AA7ER,YAAY,WAAW;AACvB,SAAS,UAAU;AAuBnB,MAAM,KAAK;AAAA,EACT,IAAI;AAAA,IACF,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EACA,IAAI;AAAA,IACF,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AACF;AAEA,MAAM,UAAU,CAAC,SAA0B,SAAS,QAAQ,SAAS,UAAa,SAAS;AAYpF,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,KAAK,GAAG,UAAU;AACxB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,mBAAiB;AAAA,MACjB,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,gBAAQ,IAAI,KACX;AAAA,UAAC;AAAA;AAAA,YACC,aAAU;AAAA,YACV,WAAW;AAAA,cACT;AAAA,cACA,GAAG;AAAA,YACL;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC,aAAU;AAAA,YACV,WAAW,GAAG,gCAAgC,QAAQ,MAAM,KAAK,GAAG,OAAO;AAAA,YAE1E;AAAA,sBAAQ,MAAM,KACb;AAAA,gBAAC;AAAA;AAAA,kBACC,aAAU;AAAA,kBACV,WAAW,GAAG,gDAAgD,GAAG,MAAM;AAAA,kBAEtE;AAAA;AAAA,cACH;AAAA,cAED,QAAQ,MAAM,KACb;AAAA,gBAAC;AAAA;AAAA,kBACC,aAAU;AAAA,kBACV,WAAW,GAAG,8CAA8C,GAAG,MAAM;AAAA,kBAEpE;AAAA;AAAA,cACH;AAAA,cAEF,oBAAC,UAAM,GAAG,WAAW,WAAW,GAAG,kBAAkB,WAAW,SAAS,GACtE,UACH;AAAA;AAAA;AAAA,QACF;AAAA,QACC,QAAQ,KAAK,KACZ;AAAA,UAAC;AAAA;AAAA,YACC,aAAU;AAAA,YACV,WAAU;AAAA,YAET;AAAA;AAAA,QACH;AAAA,QAED,QAAQ,MAAM,KACb;AAAA,UAAC;AAAA;AAAA,YACC,aAAU;AAAA,YACV,WAAW,GAAG,iCAAiC,GAAG,MAAM;AAAA,YAEvD;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/components/{aside.js → shell/aside.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 {
   ASIDE_BODY,
   ASIDE_FOOTER,
@@ -13,12 +13,14 @@ import {
   ASIDE_PANEL_SHEET,
   ASIDE_RAIL_BASE,
   ASIDE_RAIL_SPACER,
-  asidePanelSideClasses
-} from "../generated/aside.js";
-import { Drawer, DrawerContent } from "./drawer.js";
-import { IconButton } from "./icon-button.js";
-import { Sheet, SheetContent } from "./sheet.js";
-import { UiIcon } from "./ui-icons.js";
+  asidePanelSideClasses,
+  ASIDE_HEADER_LABELS
+} from "../../generated/aside.js";
+import { Drawer, DrawerContent } from "../atomic/drawer.js";
+import { IconButton } from "../derived/icon-button.js";
+import { Sheet, SheetContent } from "../atomic/sheet.js";
+import { UiIcon } from "../../icons/ui-icons.js";
+import * as copy from "../../generated/copy.js";
 function AsideHeader({ title, onBack, onClose, actions, labels = {}, className, ...props }) {
   return /* @__PURE__ */ jsxs(
     "div",
@@ -27,10 +29,10 @@ function AsideHeader({ title, onBack, onClose, actions, labels = {}, className,
       className: cn(ASIDE_HEADER_BASE, className),
       ...props,
       children: [
-        onBack && /* @__PURE__ */ jsx(IconButton, { "aria-label": labels.back ?? "Back", size: "sm", onClick: onBack, children: /* @__PURE__ */ jsx(UiIcon, { name: "chevron-right", className: ASIDE_HEADER_BACK_ICON }) }),
+        onBack && /* @__PURE__ */ jsx(IconButton, { "aria-label": labels.back ?? ASIDE_HEADER_LABELS.back, size: "sm", onClick: onBack, children: /* @__PURE__ */ jsx(UiIcon, { name: "chevron-right", className: ASIDE_HEADER_BACK_ICON }) }),
         /* @__PURE__ */ jsx("h2", { className: ASIDE_HEADER_TITLE, children: title }),
         actions,
-        onClose && /* @__PURE__ */ jsx(IconButton, { "aria-label": labels.close ?? "Close", size: "sm", onClick: onClose, children: /* @__PURE__ */ jsx(UiIcon, { name: "x" }) })
+        onClose && /* @__PURE__ */ jsx(IconButton, { "aria-label": labels.close ?? ASIDE_HEADER_LABELS.close, size: "sm", onClick: onClose, children: /* @__PURE__ */ jsx(UiIcon, { name: "x" }) })
       ]
     }
   );
@@ -41,7 +43,7 @@ function AsideRail({
   value,
   onValueChange,
   className,
-  "aria-label": ariaLabel = "Panels",
+  "aria-label": ariaLabel = copy.ASIDE_RAIL,
   ...props
 }) {
   const button = (item) => /* @__PURE__ */ jsx(

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/shell/aside.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  ASIDE_BODY,\n  ASIDE_FOOTER,\n  ASIDE_HEADER_BACK_ICON,\n  ASIDE_HEADER_BASE,\n  ASIDE_HEADER_TITLE,\n  ASIDE_PANEL_DOCKED,\n  ASIDE_PANEL_DRAWER,\n  ASIDE_PANEL_SHEET,\n  ASIDE_RAIL_BASE,\n  ASIDE_RAIL_SPACER,\n  asidePanelSideClasses,\n  type AsidePanelSide,\n  ASIDE_HEADER_LABELS,\n} from \"../../generated/aside\";\nimport { Drawer, DrawerContent } from \"../atomic/drawer\";\nimport { IconButton } from \"../derived/icon-button\";\nimport { Sheet, SheetContent } from \"../atomic/sheet\";\nimport { UiIcon } from \"../../icons/ui-icons\";\nimport type { AsidePanelMode } from \"../../generated/aside\";\nimport * as copy from \"../../generated/copy\";\n\nexport interface AsideHeaderLabels {\n  back?: string;\n  close?: string;\n}\n\nexport interface AsideHeaderProps extends Omit<React.ComponentProps<\"div\">, \"title\"> {\n  title: React.ReactNode;\n  /** Shows the back button first. */\n  onBack?: () => void;\n  /** Shows the close button last. */\n  onClose?: () => void;\n  /** `IconButton`s between the title and the close button: pin, more. */\n  actions?: React.ReactNode;\n  labels?: AsideHeaderLabels;\n}\n\n/** The 44 px title row of an aside. */\nexport function AsideHeader({ title, onBack, onClose, actions, labels = {}, className, ...props }: AsideHeaderProps) {\n  return (\n    <div\n      data-slot=\"aside-header\"\n      className={cn(ASIDE_HEADER_BASE, className)}\n      {...props}\n    >\n      {onBack && (\n        <IconButton aria-label={labels.back ?? ASIDE_HEADER_LABELS.back} size=\"sm\" onClick={onBack}>\n          <UiIcon name=\"chevron-right\" className={ASIDE_HEADER_BACK_ICON} />\n        </IconButton>\n      )}\n      <h2 className={ASIDE_HEADER_TITLE}>{title}</h2>\n      {actions}\n      {onClose && (\n        <IconButton aria-label={labels.close ?? ASIDE_HEADER_LABELS.close} size=\"sm\" onClick={onClose}>\n          <UiIcon name=\"x\" />\n        </IconButton>\n      )}\n    </div>\n  );\n}\n\nexport interface AsideRailItem {\n  id: string;\n  /** Names the button and fills its tooltip. */\n  label: string;\n  icon: React.ReactNode;\n}\n\nexport interface AsideRailProps extends Omit<React.ComponentProps<\"div\">, \"onChange\"> {\n  items: readonly AsideRailItem[];\n  /** Pinned to the bottom, e.g. settings. */\n  endItems?: readonly AsideRailItem[];\n  /** The open aside's id; `null` when all are closed. */\n  value: string | null;\n  /** Pressing the open item's button asks for `null`. */\n  onValueChange: (id: string | null) => void;\n  /** Accessible name of the rail. Default `\"Panels\"`. */\n  \"aria-label\"?: string;\n}\n\n/** The 44 px strip of icon buttons that opens and closes the asides. */\nexport function AsideRail({\n  items,\n  endItems = [],\n  value,\n  onValueChange,\n  className,\n  \"aria-label\": ariaLabel = copy.ASIDE_RAIL,\n  ...props\n}: AsideRailProps) {\n  const button = (item: AsideRailItem) => (\n    <IconButton\n      key={item.id}\n      aria-label={item.label}\n      tooltip={item.label}\n      pressed={value === item.id}\n      onClick={() => onValueChange(value === item.id ? null : item.id)}\n    >\n      {item.icon}\n    </IconButton>\n  );\n  return (\n    <div\n      role=\"group\"\n      aria-label={ariaLabel}\n      data-slot=\"aside-rail\"\n      className={cn(ASIDE_RAIL_BASE, className)}\n      {...props}\n    >\n      {items.map(button)}\n      <span className={ASIDE_RAIL_SPACER} />\n      {endItems.map(button)}\n    </div>\n  );\n}\n\nfunction useAtLeast(query: string): boolean {\n  return React.useSyncExternalStore(\n    (notify) => {\n      if (typeof window.matchMedia !== \"function\") return () => {};\n      const mq = window.matchMedia(query);\n      mq.addEventListener(\"change\", notify);\n      return () => mq.removeEventListener(\"change\", notify);\n    },\n    () => typeof window.matchMedia !== \"function\" || window.matchMedia(query).matches,\n    // Server and first paint assume a wide screen; a phone swaps to the drawer on hydrate.\n    () => true,\n  );\n}\n\nexport type { AsidePanelMode };\n\nexport interface AsidePanelProps extends Omit<React.ComponentProps<\"aside\">, \"title\"> {\n  /** Names the panel. */\n  \"aria-label\": string;\n  mode?: AsidePanelMode;\n  /** Which edge of the screen it hugs. Default `right`. */\n  side?: AsidePanelSide;\n  open?: boolean;\n  /**\n   * Escape, the scrim and the drawer drag call it with `false`. A docked panel\n   * is only dismissable this way where it falls back to the drawer (below `md`).\n   */\n  onOpenChange?: (open: boolean) => void;\n  /** An `AsideHeader`. */\n  header?: React.ReactNode;\n  /** Sticky under the body: actions. */\n  footer?: React.ReactNode;\n  /**\n   * Below this width the panel floats on a drawer so the content keeps its room.\n   * `false` keeps it docked (or on a sheet) at every width, for a framed preview\n   * or an embedded layout where the viewport says nothing about the room.\n   */\n  collapseBelow?: \"md\" | false;\n  /** Docked 380 (260 for a left navigation), overlay 420: a width class overrides it. */\n  className?: string;\n}\n\n/**\n * A side panel. `docked` sits in the layout and takes room from the content;\n * `overlay` floats over a scrim on a Sheet. Below `md` both use a bottom Drawer.\n * The edge facing the content is the only border.\n */\nexport function AsidePanel({\n  mode = \"docked\",\n  side = \"right\",\n  open = true,\n  onOpenChange,\n  header,\n  footer,\n  collapseBelow = \"md\",\n  className,\n  children,\n  ...props\n}: AsidePanelProps) {\n  const viewportWide = useAtLeast(\"(min-width: 768px)\");\n  const wide = collapseBelow === false || viewportWide;\n  const body = (\n    <>\n      {header}\n      <div data-slot=\"aside-body\" className={ASIDE_BODY}>\n        {children}\n      </div>\n      {footer != null && (\n        <div data-slot=\"aside-footer\" className={ASIDE_FOOTER}>\n          {footer}\n        </div>\n      )}\n    </>\n  );\n\n  if (mode === \"docked\" && wide) {\n    if (!open) return null;\n    return (\n      <aside\n        data-slot=\"aside-panel\"\n        data-mode=\"docked\"\n        data-side={side}\n        className={cn(ASIDE_PANEL_DOCKED, asidePanelSideClasses[side], className)}\n        {...props}\n      >\n        {body}\n      </aside>\n    );\n  }\n\n  // Below md there is no room beside the content, so a docked panel floats like an overlay.\n  const label = props[\"aria-label\"];\n  if (!wide) {\n    return (\n      <Drawer open={open} {...(onOpenChange ? { onOpenChange } : {})} direction=\"bottom\">\n        <DrawerContent aria-label={label} className={ASIDE_PANEL_DRAWER}>\n          {body}\n        </DrawerContent>\n      </Drawer>\n    );\n  }\n  return (\n    <Sheet open={open} {...(onOpenChange ? { onOpenChange } : {})}>\n      <SheetContent\n        side={side}\n        aria-label={label}\n        className={cn(ASIDE_PANEL_SHEET, className)}\n      >\n        {body}\n      </SheetContent>\n    </Sheet>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/{auth-wall.js → shell/auth-wall.js}

@@ -7,7 +7,8 @@ import {
   EmptyHeader,
   EmptyMedia,
   EmptyTitle
-} from "./empty.js";
+} from "../atomic/empty.js";
+import { iconShapes } from "../../icons/icon-shapes.js";
 function AuthWall({ title, description, children, ...props }) {
   return /* @__PURE__ */ jsxs(Empty, { ...props, children: [
     /* @__PURE__ */ jsxs(EmptyHeader, { children: [
@@ -19,7 +20,7 @@ function AuthWall({ title, description, children, ...props }) {
   ] });
 }
 function LockIcon() {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     "svg",
     {
       viewBox: "0 0 24 24",
@@ -29,10 +30,7 @@ function LockIcon() {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       "aria-hidden": true,
-      children: [
-        /* @__PURE__ */ jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
-        /* @__PURE__ */ jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
-      ]
+      children: iconShapes("lock")
     }
   );
 }

package/dist/components/shell/auth-wall.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/shell/auth-wall.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"../atomic/empty\";\nimport { iconShapes } from \"../../icons/icon-shapes\";\n\n/**\n * What a section shows a caller it is not for: an `Empty` with a lock, a title, why,\n * and an action slot. A guest gets the sign-in button there; a signed-in caller\n * without the permission gets no action, or the host's own (request access).\n */\nexport interface AuthWallProps extends Omit<React.ComponentProps<\"div\">, \"title\"> {\n  title: React.ReactNode;\n  description: React.ReactNode;\n}\n\nexport function AuthWall({ title, description, children, ...props }: AuthWallProps) {\n  return (\n    <Empty {...props}>\n      <EmptyHeader>\n        <EmptyMedia variant=\"icon\">\n          <LockIcon />\n        </EmptyMedia>\n        <EmptyTitle>{title}</EmptyTitle>\n        <EmptyDescription>{description}</EmptyDescription>\n      </EmptyHeader>\n      <EmptyContent>{children}</EmptyContent>\n    </Empty>\n  );\n}\n\nfunction LockIcon() {\n  return (\n    <svg\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(\"lock\")}\n    </svg>\n  );\n}\n"],"mappings":"AAwBM,SAEI,KAFJ;AAxBN,YAAY,WAAW;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB;AAYpB,SAAS,SAAS,EAAE,OAAO,aAAa,UAAU,GAAG,MAAM,GAAkB;AAClF,SACE,qBAAC,SAAO,GAAG,OACT;AAAA,yBAAC,eACC;AAAA,0BAAC,cAAW,SAAQ,QAClB,8BAAC,YAAS,GACZ;AAAA,MACA,oBAAC,cAAY,iBAAM;AAAA,MACnB,oBAAC,oBAAkB,uBAAY;AAAA,OACjC;AAAA,IACA,oBAAC,gBAAc,UAAS;AAAA,KAC1B;AAEJ;AAEA,SAAS,WAAW;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAa;AAAA,MACb,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,eAAW;AAAA,MAEV,qBAAW,MAAM;AAAA;AAAA,EACpB;AAEJ;","names":[]}

package/dist/components/{bottom-tab-bar.js → shell/bottom-tab-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 { NavBadge } from "./nav-badge.js";
 import { labelTitle, NavLink } from "./nav-link.js";
 import { resolveActiveNavItem } from "./nav-model.js";
@@ -25,7 +25,7 @@ function BottomTabBar({
       "data-slot": "tab-bar",
       "aria-label": labels.nav ?? "Main",
       className: cn(
-        "relative box-content flex h-(--shell-tab-bar-h) items-center border-t border-border bg-secondary px-2 pb-[env(safe-area-inset-bottom,0px)]",
+        "relative box-content flex h-(--shell-tab-bar-h) items-center border-t border-border bg-card px-2 pb-[env(safe-area-inset-bottom,0px)]",
         className
       ),
       ...props,
@@ -58,10 +58,10 @@ function BottomTabBar({
               onItemIntent,
               onNavigate,
               className: cn(
-                "flex min-w-0 flex-1 flex-col items-center justify-center gap-0.5 rounded-lg py-1 font-medium transition-colors",
+                "flex min-w-0 flex-1 flex-col items-center justify-center gap-0.5 rounded-row py-1 font-medium transition-colors",
                 "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-secondary",
                 active ? "text-primary-ink" : "text-ink-soft hover:text-ink",
-                item.disabled && "cursor-not-allowed opacity-50"
+                item.disabled && "cursor-not-allowed opacity-(--disabled-opacity)"
               ),
               children: [
                 /* @__PURE__ */ jsxs("span", { className: "relative shrink-0", children: [

package/dist/components/shell/bottom-tab-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/shell/bottom-tab-bar.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { NavBadge } from \"./nav-badge\";\nimport { labelTitle, NavLink, type NavLinkCallbacks } from \"./nav-link\";\nimport { resolveActiveNavItem, type NavItem } from \"./nav-model\";\nimport { usePendingNavigation } from \"./use-shell-nav\";\n\nexport interface BottomTabBarLabels {\n  /** Accessible name of the bar. Default `\"Main\"`. */\n  nav?: string;\n  /** Spoken text of a numeric badge, given the real count. Default `\"{n} new\"`. */\n  badge?: (count: number) => string;\n}\n\nexport interface BottomTabBarProps\n  extends Omit<React.ComponentProps<\"nav\">, \"children\">,\n    NavLinkCallbacks {\n  /**\n   * The tabs, in order. Five is the most a phone holds — every label gets a\n   * fifth of ~390px. A tab standing in for several rail rows lists their paths\n   * in `also`. `trailing` is not drawn here; `badge` sits on the icon's corner.\n   */\n  items: readonly NavItem[];\n  pathname: string;\n  linkComponent?: React.ElementType;\n  labels?: BottomTabBarLabels;\n}\n\n/**\n * The mobile tab bar: equal tabs, one rule that slides between them, and a\n * corner badge. Position-agnostic — `AppShell` pins it to the bottom of the\n * viewport and hides it from its breakpoint up; the bar itself reserves the\n * bottom safe area under its `--shell-tab-bar-h`.\n *\n * The rule is a single node translated by whole tab widths (it is exactly one\n * tab wide, so the two cannot drift); on a route no tab claims it fades out\n * where it stands. That is why each tab is `min-w-0`: a long label must\n * truncate, never widen its tab off the rule's arithmetic.\n */\nexport function BottomTabBar({\n  items,\n  pathname,\n  linkComponent,\n  onItemIntent,\n  onNavigate,\n  labels = {},\n  className,\n  ...props\n}: BottomTabBarProps) {\n  const [pendingId, markPending] = usePendingNavigation(pathname);\n  const currentId =\n    (pendingId !== null && items.some((i) => i.id === pendingId) ? pendingId : undefined) ??\n    resolveActiveNavItem(items, pathname)?.id;\n  const at = items.findIndex((i) => i.id === currentId);\n  return (\n    <nav\n      data-slot=\"tab-bar\"\n      aria-label={labels.nav ?? \"Main\"}\n      className={cn(\n        \"relative box-content flex h-(--shell-tab-bar-h) items-center border-t border-border bg-card px-2 pb-[env(safe-area-inset-bottom,0px)]\",\n        className,\n      )}\n      {...props}\n    >\n      <span\n        data-slot=\"tab-bar-marker\"\n        data-state={at >= 0 ? \"active\" : \"idle\"}\n        aria-hidden\n        className=\"pointer-events-none absolute left-2 top-0 flex justify-center\"\n        // `left-2` + `1rem` restate the bar's `px-2`: the rule is one tab wide.\n        style={{\n          width: `calc((100% - 1rem) / ${Math.max(items.length, 1)})`,\n          translate: `${Math.max(at, 0) * 100}% 0`,\n        }}\n      >\n        <span className=\"h-0.5 w-10 rounded-full bg-primary-ink\" />\n      </span>\n      {items.map((item) => {\n        const Icon = item.icon;\n        const active = item.id === currentId;\n        return (\n          <NavLink\n            key={item.id}\n            item={item}\n            current={active}\n            pending={item.id === pendingId}\n            linkComponent={linkComponent}\n            markPending={markPending}\n            onItemIntent={onItemIntent}\n            onNavigate={onNavigate}\n            className={cn(\n              \"flex min-w-0 flex-1 flex-col items-center justify-center gap-0.5 rounded-row py-1 font-medium transition-colors\",\n              \"outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-secondary\",\n              active ? \"text-primary-ink\" : \"text-ink-soft hover:text-ink\",\n              item.disabled && \"cursor-not-allowed opacity-(--disabled-opacity)\",\n            )}\n          >\n            <span className=\"relative shrink-0\">\n              {Icon ? <Icon className=\"size-5\" /> : <span className=\"block size-5\" />}\n              {typeof item.badge === \"number\" ? (\n                <NavBadge\n                  count={item.badge}\n                  variant=\"corner\"\n                  {...(labels.badge ? { label: labels.badge } : {})}\n                />\n              ) : (\n                item.badge\n              )}\n            </span>\n            <span className=\"w-full truncate text-center text-xs\" title={labelTitle(item.label)}>\n              {item.label}\n            </span>\n          </NavLink>\n        );\n      })}\n    </nav>\n  );\n}\n"],"mappings":";AA6EQ,cAsBI,YAtBJ;AA3ER,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,gBAAgB;AACzB,SAAS,YAAY,eAAsC;AAC3D,SAAS,4BAA0C;AACnD,SAAS,4BAA4B;AAkC9B,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS,CAAC;AAAA,EACV;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,CAAC,WAAW,WAAW,IAAI,qBAAqB,QAAQ;AAC9D,QAAM,aACH,cAAc,QAAQ,MAAM,KAAK,CAAC,MAAM,EAAE,OAAO,SAAS,IAAI,YAAY,WAC3E,qBAAqB,OAAO,QAAQ,GAAG;AACzC,QAAM,KAAK,MAAM,UAAU,CAAC,MAAM,EAAE,OAAO,SAAS;AACpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,cAAY,OAAO,OAAO;AAAA,MAC1B,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,aAAU;AAAA,YACV,cAAY,MAAM,IAAI,WAAW;AAAA,YACjC,eAAW;AAAA,YACX,WAAU;AAAA,YAEV,OAAO;AAAA,cACL,OAAO,wBAAwB,KAAK,IAAI,MAAM,QAAQ,CAAC,CAAC;AAAA,cACxD,WAAW,GAAG,KAAK,IAAI,IAAI,CAAC,IAAI,GAAG;AAAA,YACrC;AAAA,YAEA,8BAAC,UAAK,WAAU,0CAAyC;AAAA;AAAA,QAC3D;AAAA,QACC,MAAM,IAAI,CAAC,SAAS;AACnB,gBAAM,OAAO,KAAK;AAClB,gBAAM,SAAS,KAAK,OAAO;AAC3B,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC;AAAA,cACA,SAAS;AAAA,cACT,SAAS,KAAK,OAAO;AAAA,cACrB;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA,SAAS,qBAAqB;AAAA,gBAC9B,KAAK,YAAY;AAAA,cACnB;AAAA,cAEA;AAAA,qCAAC,UAAK,WAAU,qBACb;AAAA,yBAAO,oBAAC,QAAK,WAAU,UAAS,IAAK,oBAAC,UAAK,WAAU,gBAAe;AAAA,kBACpE,OAAO,KAAK,UAAU,WACrB;AAAA,oBAAC;AAAA;AAAA,sBACC,OAAO,KAAK;AAAA,sBACZ,SAAQ;AAAA,sBACP,GAAI,OAAO,QAAQ,EAAE,OAAO,OAAO,MAAM,IAAI,CAAC;AAAA;AAAA,kBACjD,IAEA,KAAK;AAAA,mBAET;AAAA,gBACA,oBAAC,UAAK,WAAU,uCAAsC,OAAO,WAAW,KAAK,KAAK,GAC/E,eAAK,OACR;AAAA;AAAA;AAAA,YA7BK,KAAK;AAAA,UA8BZ;AAAA,QAEJ,CAAC;AAAA;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/components/{chat-composer.js → shell/chat-composer.js}

@@ -10,21 +10,23 @@ import {
   CHAT_COMPOSER_SPACER,
   CHAT_COMPOSER_STREAMING,
   CHAT_COMPOSER_TOOLBAR,
-  MODEL_CHIP_BASE
-} from "../generated/chat-composer.js";
-import { cn } from "../lib/cn.js";
-import { useControllableState } from "../primitives/use-controllable-state.js";
+  MODEL_CHIP_BASE,
+  CHAT_COMPOSER_LABELS
+} from "../../generated/chat-composer.js";
+import { cn } from "../../lib/cn.js";
+import { useControllableState } from "../../primitives/use-controllable-state.js";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuTrigger
-} from "./dropdown-menu.js";
-import { IconButton } from "./icon-button.js";
-import { Textarea } from "./textarea.js";
-import { UiIcon } from "./ui-icons.js";
-function ModelChip({ models, value, onValueChange, "aria-label": ariaLabel = "Model", className }) {
+} from "../atomic/dropdown-menu.js";
+import { IconButton } from "../derived/icon-button.js";
+import { Textarea } from "../atomic/textarea.js";
+import { UiIcon } from "../../icons/ui-icons.js";
+import * as copy from "../../generated/copy.js";
+function ModelChip({ models, value, onValueChange, "aria-label": ariaLabel = copy.MODEL_CHIP, className }) {
   const current = models.find((m) => m.id === value);
   return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
     /* @__PURE__ */ jsxs(
@@ -49,7 +51,7 @@ function ChatComposer({
   onSend,
   streaming = false,
   onStop,
-  placeholder = "Ask the assistant\u2026",
+  placeholder = copy.CHAT_COMPOSER_PLACEHOLDER,
   onAttach,
   attachments,
   tools,
@@ -92,7 +94,7 @@ function ChatComposer({
             value: text,
             disabled,
             placeholder,
-            "aria-label": labels.field ?? "Message",
+            "aria-label": labels.field ?? CHAT_COMPOSER_LABELS.field,
             onChange: (e) => setText(e.target.value),
             onKeyDown: (e) => {
               if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing && e.keyCode !== 229) {
@@ -104,7 +106,7 @@ function ChatComposer({
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: CHAT_COMPOSER_TOOLBAR, children: [
-          onAttach && /* @__PURE__ */ jsx(IconButton, { "aria-label": labels.attach ?? "Attach file", size: "sm", onClick: onAttach, disabled, children: /* @__PURE__ */ jsx(UiIcon, { name: "plus" }) }),
+          onAttach && /* @__PURE__ */ jsx(IconButton, { "aria-label": labels.attach ?? CHAT_COMPOSER_LABELS.attach, size: "sm", onClick: onAttach, disabled, children: /* @__PURE__ */ jsx(UiIcon, { name: "plus" }) }),
           tools,
           /* @__PURE__ */ jsx("span", { className: CHAT_COMPOSER_SPACER }),
           hint != null && /* @__PURE__ */ jsx("span", { className: CHAT_COMPOSER_HINT, children: hint }),
@@ -112,7 +114,7 @@ function ChatComposer({
             IconButton,
             {
               variant: "outline",
-              "aria-label": labels.stop ?? "Stop",
+              "aria-label": labels.stop ?? CHAT_COMPOSER_LABELS.stop,
               onClick: () => {
                 onStop?.();
                 root.current?.querySelector("textarea")?.focus();
@@ -123,7 +125,7 @@ function ChatComposer({
             IconButton,
             {
               variant: "outline",
-              "aria-label": labels.send ?? "Send",
+              "aria-label": labels.send ?? CHAT_COMPOSER_LABELS.send,
               onClick: send,
               disabled: disabled || trimmed === "",
               children: /* @__PURE__ */ jsx(UiIcon, { name: "arrow-up" })

package/dist/components/shell/chat-composer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/shell/chat-composer.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  CHAT_COMPOSER_ATTACHMENTS,\n  CHAT_COMPOSER_BASE,\n  CHAT_COMPOSER_FIELD,\n  CHAT_COMPOSER_HINT,\n  CHAT_COMPOSER_IDLE,\n  CHAT_COMPOSER_SPACER,\n  CHAT_COMPOSER_STREAMING,\n  CHAT_COMPOSER_TOOLBAR,\n  MODEL_CHIP_BASE,\n  CHAT_COMPOSER_LABELS,\n} from \"../../generated/chat-composer\";\nimport { cn } from \"../../lib/cn\";\nimport { useControllableState } from \"../../primitives/use-controllable-state\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n} from \"../atomic/dropdown-menu\";\nimport { IconButton } from \"../derived/icon-button\";\nimport { Textarea } from \"../atomic/textarea\";\nimport { UiIcon } from \"../../icons/ui-icons\";\nimport * as copy from \"../../generated/copy\";\n\nexport interface ModelOption {\n  id: string;\n  label: string;\n}\n\nexport interface ModelChipProps {\n  models: readonly ModelOption[];\n  value: string;\n  onValueChange: (id: string) => void;\n  /** Names the menu. Default `\"Model\"`. */\n  \"aria-label\"?: string;\n  className?: string;\n}\n\n/** The small bordered button naming the model; opens a radio menu of the options. */\nexport function ModelChip({ models, value, onValueChange, \"aria-label\": ariaLabel = copy.MODEL_CHIP, className }: ModelChipProps) {\n  const current = models.find((m) => m.id === value);\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger\n        aria-label={`${ariaLabel}: ${current?.label ?? value}`}\n        data-slot=\"model-chip\"\n        className={cn(MODEL_CHIP_BASE, className)}\n      >\n        {current?.label ?? value}\n        <UiIcon name=\"chevron-down\" />\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"start\">\n        <DropdownMenuRadioGroup value={value} onValueChange={onValueChange}>\n          {models.map((m) => (\n            <DropdownMenuRadioItem key={m.id} value={m.id}>\n              {m.label}\n            </DropdownMenuRadioItem>\n          ))}\n        </DropdownMenuRadioGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n\nexport interface ChatComposerLabels {\n  /** Names the message field. Default `\"Message\"`. */\n  field?: string;\n  send?: string;\n  stop?: string;\n  attach?: string;\n}\n\nexport interface ChatComposerProps extends Omit<React.ComponentProps<\"div\">, \"onChange\" | \"defaultValue\"> {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  /** Enter or the send button, with the trimmed text. The field clears afterwards. */\n  onSend: (text: string) => void;\n  /** The assistant is answering: the button becomes Stop. Enter still queues a follow-up. */\n  streaming?: boolean;\n  onStop?: () => void;\n  placeholder?: string;\n  /** Shows the attach button. */\n  onAttach?: () => void;\n  /** A row of `ChatAttachment`s above the field. */\n  attachments?: React.ReactNode;\n  /** Model chips and other toolbar controls, after the attach button. */\n  tools?: React.ReactNode;\n  /** A caption in the toolbar: \"Enter to send · Shift+Enter for a new line\". */\n  hint?: React.ReactNode;\n  disabled?: boolean;\n  labels?: ChatComposerLabels;\n}\n\nexport function ChatComposer({\n  value,\n  defaultValue = \"\",\n  onValueChange,\n  onSend,\n  streaming = false,\n  onStop,\n  placeholder = copy.CHAT_COMPOSER_PLACEHOLDER,\n  onAttach,\n  attachments,\n  tools,\n  hint,\n  disabled = false,\n  labels = {},\n  className,\n  ...props\n}: ChatComposerProps) {\n  const [text, setText] = useControllableState<string>({\n    ...(value !== undefined ? { value } : {}),\n    defaultValue,\n    ...(onValueChange ? { onChange: onValueChange } : {}),\n  });\n  const trimmed = text.trim();\n  const root = React.useRef<HTMLDivElement>(null);\n\n  const send = () => {\n    if (trimmed === \"\" || disabled) return;\n    onSend(trimmed);\n    setText(\"\");\n  };\n\n  return (\n    <div\n      ref={root}\n      data-slot=\"chat-composer\"\n      data-state={streaming ? \"streaming\" : \"default\"}\n      className={cn(\n        CHAT_COMPOSER_BASE,\n        streaming ? CHAT_COMPOSER_STREAMING : CHAT_COMPOSER_IDLE,\n        className,\n      )}\n      {...props}\n    >\n      {attachments != null && <div className={CHAT_COMPOSER_ATTACHMENTS}>{attachments}</div>}\n      <Textarea\n        rows={1}\n        value={text}\n        disabled={disabled}\n        placeholder={placeholder}\n        aria-label={labels.field ?? CHAT_COMPOSER_LABELS.field}\n        onChange={(e) => setText(e.target.value)}\n        onKeyDown={(e) => {\n          // Enter during IME composition confirms the candidate; it must not send. Safari reports the\n          // confirming Enter after compositionend, with isComposing already false and keyCode 229.\n          if (e.key === \"Enter\" && !e.shiftKey && !e.nativeEvent.isComposing && e.keyCode !== 229) {\n            e.preventDefault();\n            send();\n          }\n        }}\n        className={CHAT_COMPOSER_FIELD}\n      />\n      <div className={CHAT_COMPOSER_TOOLBAR}>\n        {onAttach && (\n          <IconButton aria-label={labels.attach ?? CHAT_COMPOSER_LABELS.attach} size=\"sm\" onClick={onAttach} disabled={disabled}>\n            <UiIcon name=\"plus\" />\n          </IconButton>\n        )}\n        {tools}\n        <span className={CHAT_COMPOSER_SPACER} />\n        {hint != null && <span className={CHAT_COMPOSER_HINT}>{hint}</span>}\n        {streaming ? (\n          <IconButton\n            variant=\"outline\"\n            aria-label={labels.stop ?? CHAT_COMPOSER_LABELS.stop}\n            onClick={() => {\n              onStop?.();\n              // The Stop button turns into Send, so focus would otherwise stay on a swapped-out element.\n              root.current?.querySelector(\"textarea\")?.focus();\n            }}\n          >\n            <UiIcon name=\"stop\" />\n          </IconButton>\n        ) : (\n          <IconButton\n            variant=\"outline\"\n            aria-label={labels.send ?? CHAT_COMPOSER_LABELS.send}\n            onClick={send}\n            disabled={disabled || trimmed === \"\"}\n          >\n            <UiIcon name=\"arrow-up\" />\n          </IconButton>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/{chat-message.js → shell/chat-message.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 {
   CHAT_ATTACHMENT_BASE,
   CHAT_ATTACHMENT_BODY,
@@ -39,10 +39,10 @@ import {
   chatBubbleVariantClasses,
   chatStatusDotClasses,
   chatToolMetaClasses
-} from "../generated/chat-message.js";
+} from "../../generated/chat-message.js";
 import { ChatStreamText } from "./chat-stream-text.js";
-import { IconButton } from "./icon-button.js";
-import { UiIcon } from "./ui-icons.js";
+import { IconButton } from "../derived/icon-button.js";
+import { UiIcon } from "../../icons/ui-icons.js";
 function ChatBubble({ variant = "assistant", streaming = false, className, children, ...props }) {
   const [live, setLive] = React.useState(streaming);
   if (streaming && !live) setLive(true);

package/dist/components/shell/chat-message.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/shell/chat-message.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  CHAT_ATTACHMENT_BASE,\n  CHAT_ATTACHMENT_BODY,\n  CHAT_ATTACHMENT_ICON,\n  CHAT_ATTACHMENT_META,\n  CHAT_ATTACHMENT_NAME,\n  CHAT_ATTACHMENT_PROGRESS,\n  CHAT_ATTACHMENT_PROGRESS_FILL,\n  CHAT_ATTACHMENT_ROW,\n  CHAT_BUBBLE_BASE,\n  CHAT_MARKER_DOT,\n  CHAT_MARKER_RULE,\n  CHAT_MARKER_SEPARATOR,\n  CHAT_MARKER_SEPARATOR_LABEL,\n  CHAT_MARKER_STATUS,\n  CHAT_MARKER_TOOL,\n  CHAT_MARKER_TOOL_BODY,\n  CHAT_MARKER_TOOL_BORDER,\n  CHAT_MARKER_TOOL_CHECK,\n  CHAT_MARKER_TOOL_DETAIL,\n  CHAT_MARKER_TOOL_ERROR_BORDER,\n  CHAT_MARKER_TOOL_ICON,\n  CHAT_MARKER_TOOL_META,\n  CHAT_MARKER_TOOL_TITLE,\n  CHAT_MESSAGE_AVATAR,\n  CHAT_MESSAGE_AVATAR_TILE,\n  CHAT_MESSAGE_BASE,\n  CHAT_MESSAGE_BODY,\n  CHAT_MESSAGE_BODY_ASSISTANT,\n  CHAT_MESSAGE_BODY_USER,\n  CHAT_MESSAGE_HEADER,\n  CHAT_MESSAGE_NAME,\n  CHAT_MESSAGE_TIME,\n  CHAT_MESSAGE_USER,\n  chatBubbleVariantClasses,\n  chatStatusDotClasses,\n  chatToolMetaClasses,\n} from \"../../generated/chat-message\";\nimport type { ChatBubbleVariant, ChatStatusState, ChatToolState } from \"../../generated/chat-message\";\nimport { ChatStreamText } from \"./chat-stream-text\";\nimport { IconButton } from \"../derived/icon-button\";\nimport { UiIcon } from \"../../icons/ui-icons\";\nimport type { ChatAttachmentState, ChatAttachmentType, ChatMessageRole } from \"../../generated/chat-message\";\n\nexport type { ChatBubbleVariant };\n\nexport interface ChatBubbleProps extends React.ComponentProps<\"div\"> {\n  variant?: ChatBubbleVariant;\n  /**\n   * Still receiving text: a soft caret pulses after it, and string children\n   * fade in word by word (`ChatStreamText`). Stays set until the text is complete.\n   */\n  streaming?: boolean;\n}\n\n/** One block of message text; `assistant` has no box so long answers read as a page. */\nexport function ChatBubble({ variant = \"assistant\", streaming = false, className, children, ...props }: ChatBubbleProps) {\n  // Once a bubble has streamed it keeps its word wrappers and its caret slot, so\n  // the last words finish landing and the caret fades out instead of vanishing.\n  const [live, setLive] = React.useState(streaming);\n  if (streaming && !live) setLive(true);\n  return (\n    <div\n      data-slot=\"chat-bubble\"\n      data-variant={variant}\n      data-streaming={streaming ? \"\" : undefined}\n      data-caret={live ? \"\" : undefined}\n      className={cn(CHAT_BUBBLE_BASE, chatBubbleVariantClasses[variant], className)}\n      {...props}\n    >\n      {live && typeof children === \"string\" ? <ChatStreamText text={children} streaming={streaming} /> : children}\n    </div>\n  );\n}\n\nexport interface ChatMessageProps extends Omit<React.ComponentProps<\"div\">, \"role\"> {\n  role: ChatMessageRole;\n  /** \"Assistant\", \"You\". */\n  name?: React.ReactNode;\n  /** Already formatted: \"13:04\". */\n  time?: React.ReactNode;\n  /** The assistant's tile; a default sparkle tile when omitted. */\n  avatar?: React.ReactNode;\n  /** Drops the name row and the avatar, for a narrow dock. */\n  compact?: boolean;\n}\n\n/** A turn: who spoke, when, then the bubbles and markers. Fades in and rises once when it mounts. */\nexport function ChatMessage({ role, name, time, avatar, compact = false, className, children, ...props }: ChatMessageProps) {\n  const user = role === \"user\";\n  return (\n    <div\n      data-slot=\"chat-message\"\n      data-role={role}\n      data-enter=\"rise\"\n      className={cn(CHAT_MESSAGE_BASE, user && CHAT_MESSAGE_USER, className)}\n      {...props}\n    >\n      {!user && !compact && (\n        <div className={CHAT_MESSAGE_AVATAR}>\n          {avatar ?? (\n            <span className={CHAT_MESSAGE_AVATAR_TILE}>\n              <UiIcon name=\"sparkles\" />\n            </span>\n          )}\n        </div>\n      )}\n      <div className={cn(CHAT_MESSAGE_BODY, user ? CHAT_MESSAGE_BODY_USER : CHAT_MESSAGE_BODY_ASSISTANT)}>\n        {!compact && (name != null || time != null) && (\n          <div className={CHAT_MESSAGE_HEADER}>\n            {name != null && <span className={CHAT_MESSAGE_NAME}>{name}</span>}\n            {time != null && <span className={CHAT_MESSAGE_TIME}>{time}</span>}\n          </div>\n        )}\n        {children}\n      </div>\n    </div>\n  );\n}\n\nexport type ChatMarkerProps = Omit<React.ComponentProps<\"div\">, \"title\"> &\n  (\n    | { type: \"status\"; state?: ChatStatusState }\n    | {\n        type: \"tool\";\n        state?: ChatToolState;\n        /** The tool's name. */\n        title: React.ReactNode;\n        detail?: React.ReactNode;\n        /** The right-hand note: \"Running…\", \"0.4s\", \"Failed · 1.2s\". */\n        meta?: React.ReactNode;\n      }\n    | { type: \"separator\" }\n  );\n\n/** The quiet lines between messages: progress, a tool call, or a day break. */\nexport function ChatMarker(allProps: ChatMarkerProps) {\n  if (allProps.type === \"separator\") {\n    const { type: _type, className, children, ...rest } = allProps;\n    return (\n      <div data-slot=\"chat-marker\" data-type=\"separator\" className={cn(CHAT_MARKER_SEPARATOR, className)} {...rest}>\n        <span className={CHAT_MARKER_RULE} />\n        <span className={CHAT_MARKER_SEPARATOR_LABEL}>{children}</span>\n        <span className={CHAT_MARKER_RULE} />\n      </div>\n    );\n  }\n  if (allProps.type === \"status\") {\n    const { type: _type, state = \"done\", className, children, ...rest } = allProps;\n    return (\n      <div\n        data-slot=\"chat-marker\"\n        data-type=\"status\"\n        data-state={state}\n        role={state === \"running\" ? \"status\" : undefined}\n        className={cn(CHAT_MARKER_STATUS, className)}\n        {...rest}\n      >\n        <span\n          aria-hidden\n          className={cn(CHAT_MARKER_DOT, chatStatusDotClasses[state])}\n        />\n        {children}\n      </div>\n    );\n  }\n  const { type: _type, state = \"done\", title, detail, meta, className, children, ...rest } = allProps;\n  return (\n    <div\n      data-slot=\"chat-marker\"\n      data-type=\"tool\"\n      data-state={state}\n      className={cn(\n        CHAT_MARKER_TOOL,\n        state === \"error\" ? CHAT_MARKER_TOOL_ERROR_BORDER : CHAT_MARKER_TOOL_BORDER,\n        className,\n      )}\n      {...rest}\n    >\n      <UiIcon name={state === \"error\" ? \"alert\" : \"sparkles\"} className={CHAT_MARKER_TOOL_ICON} />\n      <div className={CHAT_MARKER_TOOL_BODY}>\n        <span className={CHAT_MARKER_TOOL_TITLE}>{title}</span>\n        {detail != null && <span className={CHAT_MARKER_TOOL_DETAIL}>{detail}</span>}\n        {children}\n      </div>\n      {meta != null && (\n        <span className={cn(CHAT_MARKER_TOOL_META, chatToolMetaClasses[state])}>{meta}\n        </span>\n      )}\n      {state === \"done\" && <UiIcon name=\"check\" className={CHAT_MARKER_TOOL_CHECK} />}\n    </div>\n  );\n}\n\nexport interface ChatAttachmentProps extends Omit<React.ComponentProps<\"div\">, \"children\"> {\n  type?: ChatAttachmentType;\n  state?: ChatAttachmentState;\n  name: string;\n  /** \"PDF · 1.2 MB\"; while uploading, defaults to the percentage. */\n  meta?: React.ReactNode;\n  /** 0 to 100, while uploading. */\n  progress?: number;\n  /** Shows the remove button. */\n  onRemove?: () => void;\n  /** Default `\"Remove {name}\"`. */\n  removeLabel?: string;\n}\n\n/** A card for a file in a message or in the composer. */\nexport function ChatAttachment({\n  type = \"file\",\n  state = \"ready\",\n  name,\n  meta,\n  progress = 0,\n  onRemove,\n  removeLabel,\n  className,\n  ...props\n}: ChatAttachmentProps) {\n  const pct = Math.min(100, Math.max(0, Math.round(progress)));\n  return (\n    <div\n      data-slot=\"chat-attachment\"\n      data-type={type}\n      data-state={state}\n      className={cn(CHAT_ATTACHMENT_BASE, className)}\n      {...props}\n    >\n      <div className={CHAT_ATTACHMENT_ROW}>\n        <span className={CHAT_ATTACHMENT_ICON}>\n          <UiIcon name={type === \"image\" ? \"image\" : \"file\"} />\n        </span>\n        <div className={CHAT_ATTACHMENT_BODY}>\n          <span className={CHAT_ATTACHMENT_NAME}>{name}</span>\n          <span className={CHAT_ATTACHMENT_META}>{meta ?? (state === \"uploading\" ? `Uploading… ${pct}%` : null)}</span>\n        </div>\n        {onRemove && (\n          <IconButton aria-label={removeLabel ?? `Remove ${name}`} size=\"sm\" onClick={onRemove}>\n            <UiIcon name=\"x\" />\n          </IconButton>\n        )}\n      </div>\n      {state === \"uploading\" && (\n        <div\n          role=\"progressbar\"\n          aria-label={name}\n          aria-valuemin={0}\n          aria-valuemax={100}\n          aria-valuenow={pct}\n          className={CHAT_ATTACHMENT_PROGRESS}\n        >\n          <div className={CHAT_ATTACHMENT_PROGRESS_FILL} style={{ width: `${pct}%` }} />\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":["_type","className","children","rest","state"]}

package/dist/components/{chat-panel.js → shell/chat-panel.js}

@@ -1,10 +1,10 @@
 "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 { AsideHeader } from "./aside.js";
-import { IconButton } from "./icon-button.js";
-import { UiIcon } from "./ui-icons.js";
+import { IconButton } from "../derived/icon-button.js";
+import { UiIcon } from "../../icons/ui-icons.js";
 const PIN_SLACK = 24;
 function ChatPanel({ children, empty, composer, streaming = false, labels = {}, className, ...props }) {
   const scroller = React.useRef(null);

package/dist/components/shell/chat-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/shell/chat-panel.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { AsideHeader } from \"./aside\";\nimport { IconButton } from \"../derived/icon-button\";\nimport { UiIcon } from \"../../icons/ui-icons\";\n\n// Within this many pixels of the end still counts as \"at the end\": sub-pixel\n// scroll positions and a growing last line would otherwise unpin the reader.\nconst PIN_SLACK = 24;\n\nexport interface ChatPanelLabels {\n  /** The scroll-to-end button. Default `\"Jump to latest\"`. */\n  jump?: string;\n  /** Names the log region. Default `\"Conversation\"`. */\n  log?: string;\n}\n\nexport interface ChatPanelProps extends Omit<React.ComponentProps<\"div\">, \"children\"> {\n  /** `ChatMessage`s and `ChatMarker`s, oldest first. */\n  children?: React.ReactNode;\n  /** Shown instead of the log while there is nothing to read. */\n  empty?: React.ReactNode;\n  /** The composer, under the log. */\n  composer?: React.ReactNode;\n  /**\n   * The last turn is still arriving. The log is marked busy, so a screen reader\n   * waits for the finished text instead of announcing every chunk.\n   */\n  streaming?: boolean;\n  labels?: ChatPanelLabels;\n}\n\n/**\n * The conversation: a scrolling log that follows new content while the reader\n * is at the end, and lets go the moment they scroll up. The jump button brings\n * them back. The log is a polite live region, so new turns are announced\n * without taking focus.\n */\nexport function ChatPanel({ children, empty, composer, streaming = false, labels = {}, className, ...props }: ChatPanelProps) {\n  const scroller = React.useRef<HTMLDivElement>(null);\n  const pinned = React.useRef(true);\n  const [away, setAway] = React.useState(false);\n  const [scrolled, setScrolled] = React.useState(false);\n  // `count` would call `false` a child, and `{list.length > 0 && …}` is common.\n  const isEmpty = React.Children.toArray(children).length === 0 && empty != null;\n\n  const toEnd = () => {\n    const el = scroller.current;\n    if (el) el.scrollTop = el.scrollHeight;\n  };\n\n  // Streaming grows the last node's text without adding nodes, so watch characters too.\n  React.useEffect(() => {\n    const el = scroller.current;\n    if (!el) return;\n    const follow = () => {\n      if (pinned.current) toEnd();\n    };\n    const mo = new MutationObserver(follow);\n    mo.observe(el, { childList: true, subtree: true, characterData: true });\n    const ro = typeof ResizeObserver === \"function\" ? new ResizeObserver(follow) : null;\n    ro?.observe(el);\n    toEnd();\n    return () => {\n      mo.disconnect();\n      ro?.disconnect();\n    };\n  }, [isEmpty]);\n\n  return (\n    <div data-slot=\"chat-panel\" className={cn(\"flex min-h-0 flex-1 flex-col\", className)} {...props}>\n      <div className=\"relative flex min-h-0 flex-1 flex-col\">\n        {isEmpty ? (\n          <div className=\"flex flex-1 flex-col justify-center px-4\">{empty}</div>\n        ) : (\n          <div\n            ref={scroller}\n            role=\"log\"\n            aria-live=\"polite\"\n            aria-busy={streaming}\n            aria-label={labels.log ?? \"Conversation\"}\n            tabIndex={0}\n            data-slot=\"chat-log\"\n            data-scrolled={scrolled ? \"\" : undefined}\n            className=\"flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4 outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring\"\n            onScroll={(e) => {\n              const el = e.currentTarget;\n              const atEnd = el.scrollHeight - el.scrollTop - el.clientHeight <= PIN_SLACK;\n              pinned.current = atEnd;\n              setAway(!atEnd);\n              setScrolled(el.scrollTop > 0);\n            }}\n          >\n            {children}\n          </div>\n        )}\n        {!isEmpty && (\n          // Stays mounted so it can fade; hidden from the tree and the tab order until it matters.\n          <IconButton\n            variant=\"outline\"\n            aria-label={labels.jump ?? \"Jump to latest\"}\n            data-chat-jump={away ? \"visible\" : \"hidden\"}\n            aria-hidden={!away}\n            tabIndex={away ? 0 : -1}\n            disabled={!away}\n            className=\"absolute bottom-3 left-1/2 -translate-x-1/2\"\n            onClick={() => {\n              pinned.current = true;\n              setAway(false);\n              toEnd();\n              // The button unmounts with `away`; keep focus in the conversation.\n              scroller.current?.focus();\n            }}\n          >\n            <UiIcon name=\"chevron-down\" />\n          </IconButton>\n        )}\n      </div>\n      {composer != null && <div className=\"shrink-0 px-4 pb-4\">{composer}</div>}\n    </div>\n  );\n}\n\nexport interface ChatDockLabels extends ChatPanelLabels {\n  /** The launcher bar's name when collapsed. Default `\"Open assistant\"`. */\n  open?: string;\n  /** Default `\"Collapse\"`. */\n  collapse?: string;\n}\n\nexport interface ChatDockProps extends Omit<React.ComponentProps<\"section\">, \"title\" | \"children\"> {\n  title: React.ReactNode;\n  expanded?: boolean;\n  defaultExpanded?: boolean;\n  onExpandedChange?: (expanded: boolean) => void;\n  /** Header buttons before collapse: history. */\n  actions?: React.ReactNode;\n  /** The launcher bar's text when collapsed. */\n  prompt?: string;\n  children?: React.ReactNode;\n  empty?: React.ReactNode;\n  composer?: React.ReactNode;\n  streaming?: boolean;\n  labels?: ChatDockLabels;\n}\n\n/** The assistant docked in a column: a launcher bar when collapsed, header + conversation + composer when open. */\nexport function ChatDock({\n  title,\n  expanded,\n  defaultExpanded = true,\n  onExpandedChange,\n  actions,\n  prompt = \"Ask the assistant…\",\n  children,\n  empty,\n  composer,\n  streaming = false,\n  labels = {},\n  className,\n  ...props\n}: ChatDockProps) {\n  const [inner, setInner] = React.useState(defaultExpanded);\n  const open = expanded ?? inner;\n  const root = React.useRef<HTMLElement>(null);\n  const moved = React.useRef(false);\n  const set = (next: boolean) => {\n    moved.current = true;\n    setInner(next);\n    onExpandedChange?.(next);\n  };\n  // The button that was pressed unmounts with its state; hand focus to the same job in the other one.\n  React.useEffect(() => {\n    if (!moved.current) return;\n    moved.current = false;\n    const target = open\n      ? (root.current?.querySelector<HTMLElement>(\"textarea\") ?? root.current?.querySelector<HTMLElement>(\"[role=log]\"))\n      : root.current?.querySelector<HTMLElement>(\"button\");\n    target?.focus();\n  }, [open]);\n  if (!open) {\n    return (\n      <section ref={root} data-slot=\"chat-dock\" data-state=\"collapsed\" className={cn(\"bg-card\", className)} {...props}>\n        <button\n          type=\"button\"\n          aria-label={labels.open ?? \"Open assistant\"}\n          onClick={() => set(true)}\n          className=\"flex h-11 w-full items-center gap-2 border-t border-border px-4 text-left text-body text-ink-soft outline-none hover:bg-hover focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring\"\n        >\n          <UiIcon name=\"sparkles\" />\n          {prompt}\n        </button>\n      </section>\n    );\n  }\n  return (\n    <section ref={root} data-slot=\"chat-dock\" data-state=\"expanded\" className={cn(\"flex h-full min-h-0 flex-col bg-card\", className)} {...props}>\n      <AsideHeader title={title} actions={actions} onClose={() => set(false)} labels={{ close: labels.collapse ?? \"Collapse\" }} />\n      <ChatPanel empty={empty} composer={composer} streaming={streaming} labels={labels}>\n        {children}\n      </ChatPanel>\n    </section>\n  );\n}\n"],"mappings":";AAyEM,SAEI,KAFJ;AAvEN,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AAIvB,MAAM,YAAY;AA8BX,SAAS,UAAU,EAAE,UAAU,OAAO,UAAU,YAAY,OAAO,SAAS,CAAC,GAAG,WAAW,GAAG,MAAM,GAAmB;AAC5H,QAAM,WAAW,MAAM,OAAuB,IAAI;AAClD,QAAM,SAAS,MAAM,OAAO,IAAI;AAChC,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,KAAK;AAC5C,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAS,KAAK;AAEpD,QAAM,UAAU,MAAM,SAAS,QAAQ,QAAQ,EAAE,WAAW,KAAK,SAAS;AAE1E,QAAM,QAAQ,MAAM;AAClB,UAAM,KAAK,SAAS;AACpB,QAAI,GAAI,IAAG,YAAY,GAAG;AAAA,EAC5B;AAGA,QAAM,UAAU,MAAM;AACpB,UAAM,KAAK,SAAS;AACpB,QAAI,CAAC,GAAI;AACT,UAAM,SAAS,MAAM;AACnB,UAAI,OAAO,QAAS,OAAM;AAAA,IAC5B;AACA,UAAM,KAAK,IAAI,iBAAiB,MAAM;AACtC,OAAG,QAAQ,IAAI,EAAE,WAAW,MAAM,SAAS,MAAM,eAAe,KAAK,CAAC;AACtE,UAAM,KAAK,OAAO,mBAAmB,aAAa,IAAI,eAAe,MAAM,IAAI;AAC/E,QAAI,QAAQ,EAAE;AACd,UAAM;AACN,WAAO,MAAM;AACX,SAAG,WAAW;AACd,UAAI,WAAW;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,OAAO,CAAC;AAEZ,SACE,qBAAC,SAAI,aAAU,cAAa,WAAW,GAAG,gCAAgC,SAAS,GAAI,GAAG,OACxF;AAAA,yBAAC,SAAI,WAAU,yCACZ;AAAA,gBACC,oBAAC,SAAI,WAAU,4CAA4C,iBAAM,IAEjE;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,MAAK;AAAA,UACL,aAAU;AAAA,UACV,aAAW;AAAA,UACX,cAAY,OAAO,OAAO;AAAA,UAC1B,UAAU;AAAA,UACV,aAAU;AAAA,UACV,iBAAe,WAAW,KAAK;AAAA,UAC/B,WAAU;AAAA,UACV,UAAU,CAAC,MAAM;AACf,kBAAM,KAAK,EAAE;AACb,kBAAM,QAAQ,GAAG,eAAe,GAAG,YAAY,GAAG,gBAAgB;AAClE,mBAAO,UAAU;AACjB,oBAAQ,CAAC,KAAK;AACd,wBAAY,GAAG,YAAY,CAAC;AAAA,UAC9B;AAAA,UAEC;AAAA;AAAA,MACH;AAAA,MAED,CAAC;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,cAAY,OAAO,QAAQ;AAAA,UAC3B,kBAAgB,OAAO,YAAY;AAAA,UACnC,eAAa,CAAC;AAAA,UACd,UAAU,OAAO,IAAI;AAAA,UACrB,UAAU,CAAC;AAAA,UACX,WAAU;AAAA,UACV,SAAS,MAAM;AACb,mBAAO,UAAU;AACjB,oBAAQ,KAAK;AACb,kBAAM;AAEN,qBAAS,SAAS,MAAM;AAAA,UAC1B;AAAA,UAEA,8BAAC,UAAO,MAAK,gBAAe;AAAA;AAAA,MAC9B;AAAA,OAEJ;AAAA,IACC,YAAY,QAAQ,oBAAC,SAAI,WAAU,sBAAsB,oBAAS;AAAA,KACrE;AAEJ;AA0BO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,SAAS,CAAC;AAAA,EACV;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,eAAe;AACxD,QAAM,OAAO,YAAY;AACzB,QAAM,OAAO,MAAM,OAAoB,IAAI;AAC3C,QAAM,QAAQ,MAAM,OAAO,KAAK;AAChC,QAAM,MAAM,CAAC,SAAkB;AAC7B,UAAM,UAAU;AAChB,aAAS,IAAI;AACb,uBAAmB,IAAI;AAAA,EACzB;AAEA,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,MAAM,QAAS;AACpB,UAAM,UAAU;AAChB,UAAM,SAAS,OACV,KAAK,SAAS,cAA2B,UAAU,KAAK,KAAK,SAAS,cAA2B,YAAY,IAC9G,KAAK,SAAS,cAA2B,QAAQ;AACrD,YAAQ,MAAM;AAAA,EAChB,GAAG,CAAC,IAAI,CAAC;AACT,MAAI,CAAC,MAAM;AACT,WACE,oBAAC,aAAQ,KAAK,MAAM,aAAU,aAAY,cAAW,aAAY,WAAW,GAAG,WAAW,SAAS,GAAI,GAAG,OACxG;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAY,OAAO,QAAQ;AAAA,QAC3B,SAAS,MAAM,IAAI,IAAI;AAAA,QACvB,WAAU;AAAA,QAEV;AAAA,8BAAC,UAAO,MAAK,YAAW;AAAA,UACvB;AAAA;AAAA;AAAA,IACH,GACF;AAAA,EAEJ;AACA,SACE,qBAAC,aAAQ,KAAK,MAAM,aAAU,aAAY,cAAW,YAAW,WAAW,GAAG,wCAAwC,SAAS,GAAI,GAAG,OACpI;AAAA,wBAAC,eAAY,OAAc,SAAkB,SAAS,MAAM,IAAI,KAAK,GAAG,QAAQ,EAAE,OAAO,OAAO,YAAY,WAAW,GAAG;AAAA,IAC1H,oBAAC,aAAU,OAAc,UAAoB,WAAsB,QAChE,UACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/shell/chat-stream-text.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/shell/chat-stream-text.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\n// Words in one chunk start this far apart, up to STAGGER_CAP of them, so a burst\n// of text reads as a ripple instead of landing at once.\nconst STAGGER_STEP_MS = 28;\nconst STAGGER_CAP = 6;\n// Safety net for when `animationend` never fires (hidden tab, display: none).\nconst SETTLE_FALLBACK_MS = 900;\n\ninterface Unit {\n  word: string;\n  /** The whitespace that follows the word, kept outside the animated span. */\n  gap: string;\n}\n\nfunction split(text: string): { lead: string; units: Unit[] } {\n  const lead = /^\\s*/.exec(text)?.[0] ?? \"\";\n  const units: Unit[] = [];\n  for (const m of text.slice(lead.length).matchAll(/(\\S+)(\\s*)/g)) units.push({ word: m[1] ?? \"\", gap: m[2] ?? \"\" });\n  return { lead, units };\n}\n\ninterface Progress {\n  text: string;\n  /** Units before this index are plain text; the rest are animating. */\n  settled: number;\n  /** Start delay per unit, fixed when the unit appears so re-renders never restart it. */\n  delays: number[];\n}\n\nfunction delaysFor(from: number, to: number): number[] {\n  return Array.from({ length: to - from }, (_, j) => Math.min(j, STAGGER_CAP) * STAGGER_STEP_MS);\n}\n\nexport interface ChatStreamTextProps extends Omit<React.ComponentProps<\"span\">, \"children\"> {\n  /** The text so far. Pass the whole growing string; only the appended tail animates. */\n  text: string;\n  /**\n   * The text is still growing. A string that is already complete when this\n   * mounts as `false` shows at once, with no entrance.\n   */\n  streaming?: boolean;\n}\n\n/**\n * Text that arrives word by word. New words fade in from a soft blur and settle\n * (motion.css); words already on screen are never touched again. Once a word has\n * landed it folds into one plain text node, so a long reply costs a handful of\n * elements, not thousands. The text content stays exactly `text`.\n */\nexport function ChatStreamText({ text, streaming = false, ...props }: ChatStreamTextProps) {\n  const parsed = split(text);\n  const [progress, setProgress] = React.useState<Progress>(() => ({\n    text,\n    settled: streaming ? 0 : parsed.units.length,\n    delays: delaysFor(0, parsed.units.length),\n  }));\n\n  let cur = progress;\n  if (text !== progress.text) {\n    // Anything but an append (edit, regenerate) starts over rather than patching words in place.\n    const appended = text.startsWith(progress.text);\n    const known = appended ? split(progress.text).units.length : 0;\n    cur = {\n      text,\n      settled: appended ? progress.settled : 0,\n      delays: [...(appended ? progress.delays.slice(0, known) : []), ...delaysFor(known, parsed.units.length)],\n    };\n    setProgress(cur);\n  }\n\n  const settle = React.useCallback((upTo: number) => {\n    setProgress((p) => (upTo > p.settled ? { ...p, settled: upTo } : p));\n  }, []);\n\n  const total = parsed.units.length;\n  React.useEffect(() => {\n    if (streaming) return;\n    const id = setTimeout(() => settle(total), SETTLE_FALLBACK_MS);\n    return () => clearTimeout(id);\n  }, [streaming, total, settle]);\n\n  const settledText = parsed.lead + parsed.units.slice(0, cur.settled).map((u) => u.word + u.gap).join(\"\");\n  return (\n    <span\n      data-slot=\"chat-stream-text\"\n      onAnimationEnd={(e) => {\n        const i = Number((e.target as HTMLElement).dataset[\"word\"]);\n        if (Number.isInteger(i)) settle(i + 1);\n      }}\n      {...props}\n    >\n      {settledText}\n      {parsed.units.slice(cur.settled).map((u, k) => {\n        const i = cur.settled + k;\n        return (\n          <React.Fragment key={i}>\n            <span data-slot=\"chat-word\" data-word={i} style={{ animationDelay: `${cur.delays[i] ?? 0}ms` }}>\n              {u.word}\n            </span>\n            {u.gap}\n          </React.Fragment>\n        );\n      })}\n    </span>\n  );\n}\n"],"mappings":";AAkGU,SACE,KADF;AAhGV,YAAY,WAAW;AAIvB,MAAM,kBAAkB;AACxB,MAAM,cAAc;AAEpB,MAAM,qBAAqB;AAQ3B,SAAS,MAAM,MAA+C;AAC5D,QAAM,OAAO,OAAO,KAAK,IAAI,IAAI,CAAC,KAAK;AACvC,QAAM,QAAgB,CAAC;AACvB,aAAW,KAAK,KAAK,MAAM,KAAK,MAAM,EAAE,SAAS,aAAa,EAAG,OAAM,KAAK,EAAE,MAAM,EAAE,CAAC,KAAK,IAAI,KAAK,EAAE,CAAC,KAAK,GAAG,CAAC;AACjH,SAAO,EAAE,MAAM,MAAM;AACvB;AAUA,SAAS,UAAU,MAAc,IAAsB;AACrD,SAAO,MAAM,KAAK,EAAE,QAAQ,KAAK,KAAK,GAAG,CAAC,GAAG,MAAM,KAAK,IAAI,GAAG,WAAW,IAAI,eAAe;AAC/F;AAkBO,SAAS,eAAe,EAAE,MAAM,YAAY,OAAO,GAAG,MAAM,GAAwB;AACzF,QAAM,SAAS,MAAM,IAAI;AACzB,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAmB,OAAO;AAAA,IAC9D;AAAA,IACA,SAAS,YAAY,IAAI,OAAO,MAAM;AAAA,IACtC,QAAQ,UAAU,GAAG,OAAO,MAAM,MAAM;AAAA,EAC1C,EAAE;AAEF,MAAI,MAAM;AACV,MAAI,SAAS,SAAS,MAAM;AAE1B,UAAM,WAAW,KAAK,WAAW,SAAS,IAAI;AAC9C,UAAM,QAAQ,WAAW,MAAM,SAAS,IAAI,EAAE,MAAM,SAAS;AAC7D,UAAM;AAAA,MACJ;AAAA,MACA,SAAS,WAAW,SAAS,UAAU;AAAA,MACvC,QAAQ,CAAC,GAAI,WAAW,SAAS,OAAO,MAAM,GAAG,KAAK,IAAI,CAAC,GAAI,GAAG,UAAU,OAAO,OAAO,MAAM,MAAM,CAAC;AAAA,IACzG;AACA,gBAAY,GAAG;AAAA,EACjB;AAEA,QAAM,SAAS,MAAM,YAAY,CAAC,SAAiB;AACjD,gBAAY,CAAC,MAAO,OAAO,EAAE,UAAU,EAAE,GAAG,GAAG,SAAS,KAAK,IAAI,CAAE;AAAA,EACrE,GAAG,CAAC,CAAC;AAEL,QAAM,QAAQ,OAAO,MAAM;AAC3B,QAAM,UAAU,MAAM;AACpB,QAAI,UAAW;AACf,UAAM,KAAK,WAAW,MAAM,OAAO,KAAK,GAAG,kBAAkB;AAC7D,WAAO,MAAM,aAAa,EAAE;AAAA,EAC9B,GAAG,CAAC,WAAW,OAAO,MAAM,CAAC;AAE7B,QAAM,cAAc,OAAO,OAAO,OAAO,MAAM,MAAM,GAAG,IAAI,OAAO,EAAE,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE;AACvG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,gBAAgB,CAAC,MAAM;AACrB,cAAM,IAAI,OAAQ,EAAE,OAAuB,QAAQ,MAAM,CAAC;AAC1D,YAAI,OAAO,UAAU,CAAC,EAAG,QAAO,IAAI,CAAC;AAAA,MACvC;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,OAAO,MAAM,MAAM,IAAI,OAAO,EAAE,IAAI,CAAC,GAAG,MAAM;AAC7C,gBAAM,IAAI,IAAI,UAAU;AACxB,iBACE,qBAAC,MAAM,UAAN,EACC;AAAA,gCAAC,UAAK,aAAU,aAAY,aAAW,GAAG,OAAO,EAAE,gBAAgB,GAAG,IAAI,OAAO,CAAC,KAAK,CAAC,KAAK,GAC1F,YAAE,MACL;AAAA,YACC,EAAE;AAAA,eAJgB,CAKrB;AAAA,QAEJ,CAAC;AAAA;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/components/{chat-typing.js → shell/chat-typing.js}

@@ -1,8 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { CHAT_TYPING_BASE, CHAT_TYPING_DOT, CHAT_TYPING_STILL } from "../generated/chat-typing.js";
-import { cn } from "../lib/cn.js";
-function ChatTyping({ label = "Assistant is thinking", className, ...props }) {
+import { CHAT_TYPING_BASE, CHAT_TYPING_DOT, CHAT_TYPING_STILL } from "../../generated/chat-typing.js";
+import { cn } from "../../lib/cn.js";
+import * as copy from "../../generated/copy.js";
+function ChatTyping({ label = copy.CHAT_TYPING, className, ...props }) {
   return /* @__PURE__ */ jsxs(
     "span",
     {

package/dist/components/shell/chat-typing.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/shell/chat-typing.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { CHAT_TYPING_BASE, CHAT_TYPING_DOT, CHAT_TYPING_STILL } from \"../../generated/chat-typing\";\nimport { cn } from \"../../lib/cn\";\nimport * as copy from \"../../generated/copy\";\n\nexport interface ChatTypingProps extends Omit<React.ComponentProps<\"span\">, \"children\"> {\n  /** Names the state for assistive tech. Default `\"Assistant is thinking\"`. */\n  label?: string;\n}\n\n/**\n * The wait before the first token: three dots whose opacity ripples. Under\n * reduced motion CSS swaps them for a still \"…\". It is a status region, so a\n * screen reader hears the label once when it appears.\n */\nexport function ChatTyping({ label = copy.CHAT_TYPING, className, ...props }: ChatTypingProps) {\n  return (\n    <span\n      role=\"status\"\n      aria-label={label}\n      data-slot=\"chat-typing\"\n      className={cn(CHAT_TYPING_BASE, className)}\n      {...props}\n    >\n      <span aria-hidden data-dot className={CHAT_TYPING_DOT} />\n      <span aria-hidden data-dot className={CHAT_TYPING_DOT} />\n      <span aria-hidden data-dot className={CHAT_TYPING_DOT} />\n      <span aria-hidden data-still className={CHAT_TYPING_STILL}>\n        …\n      </span>\n    </span>\n  );\n}\n"],"mappings":"AAiBI,SAOE,KAPF;AAjBJ,YAAY,WAAW;AACvB,SAAS,kBAAkB,iBAAiB,yBAAyB;AACrE,SAAS,UAAU;AACnB,YAAY,UAAU;AAYf,SAAS,WAAW,EAAE,QAAQ,KAAK,aAAa,WAAW,GAAG,MAAM,GAAoB;AAC7F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,aAAU;AAAA,MACV,WAAW,GAAG,kBAAkB,SAAS;AAAA,MACxC,GAAG;AAAA,MAEJ;AAAA,4BAAC,UAAK,eAAW,MAAC,YAAQ,MAAC,WAAW,iBAAiB;AAAA,QACvD,oBAAC,UAAK,eAAW,MAAC,YAAQ,MAAC,WAAW,iBAAiB;AAAA,QACvD,oBAAC,UAAK,eAAW,MAAC,YAAQ,MAAC,WAAW,iBAAiB;AAAA,QACvD,oBAAC,UAAK,eAAW,MAAC,cAAU,MAAC,WAAW,mBAAmB,oBAE3D;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -1,7 +1,9 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Container } from "./container.js";
-const HEADING = "font-mono text-xs text-ink uppercase tracking-widest mb-6";
+import { Container } from "../atomic/container.js";
+import * as copy from "../../generated/copy.js";
+import { FOOTER_BRAND, FOOTER_COPYRIGHT, FOOTER_DESCRIPTION, FOOTER_GRID, FOOTER_HEADING, FOOTER_LEGAL_LINK, FOOTER_LEGAL_LINKS, FOOTER_LEGAL_SEPARATOR, FOOTER_LOCKUP, FOOTER_LOCKUP_TEXT, FOOTER_NAV_COLUMN, FOOTER_NAV_LINK, FOOTER_NAV_LIST, FOOTER_NEWSLETTER_BLURB, FOOTER_NEWSLETTER_COLUMN, FOOTER_OFFICES_LIST, FOOTER_OFFICE_NAME, FOOTER_ROOT, FOOTER_TAGLINE, FOOTER_VERSION, FOOTER_WIDE_COLUMN } from "../../generated/footer.js";
+const HEADING = FOOTER_HEADING;
 function Footer({
   lockup,
   brand,
@@ -11,10 +13,10 @@ function Footer({
   copyright,
   nav = [],
   offices = [],
-  officesHeading = "Offices",
+  officesHeading = copy.FOOTER_OFFICES,
   legalLinks = [],
   newsletter,
-  newsletterHeading = "Newsletter",
+  newsletterHeading = copy.FOOTER_NEWSLETTER,
   newsletterBlurb = "",
   version,
   commitHref,
@@ -24,47 +26,47 @@ function Footer({
   const L = linkComponent ?? "a";
   const composed = brand !== void 0 || mark !== void 0;
   const hasBrandColumn = lockup !== void 0 || composed || description !== void 0 || legalLinks.length > 0;
-  return /* @__PURE__ */ jsxs("footer", { "data-slot": "footer", className: "bg-background border-t border-ink/10 py-16", children: [
+  return /* @__PURE__ */ jsxs("footer", { "data-slot": "footer", className: FOOTER_ROOT, children: [
     children,
     /* @__PURE__ */ jsxs(Container, { children: [
-      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-8 gap-y-8 lg:grid-cols-12 mb-12", children: [
-        hasBrandColumn && /* @__PURE__ */ jsxs("div", { className: "col-span-2 lg:col-span-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: FOOTER_GRID, children: [
+        hasBrandColumn && /* @__PURE__ */ jsxs("div", { className: FOOTER_WIDE_COLUMN, children: [
           lockup !== void 0 ? /* @__PURE__ */ jsx("div", { "data-slot": "footer-lockup", className: "mb-6", children: lockup }) : composed && /* @__PURE__ */ jsx(FooterLockup, { brand, mark, tagline }),
-          description !== void 0 && /* @__PURE__ */ jsx("p", { className: "text-ink/40 text-xs font-light max-w-sm leading-relaxed mb-6", children: description }),
-          legalLinks.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex gap-4 text-xs font-mono text-primary-ink", children: legalLinks.map((link, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
-            i > 0 && /* @__PURE__ */ jsx("span", { className: "text-ink/20", children: "|" }),
-            /* @__PURE__ */ jsx(L, { href: link.href, className: "hover:underline", children: link.label })
+          description !== void 0 && /* @__PURE__ */ jsx("p", { className: FOOTER_DESCRIPTION, children: description }),
+          legalLinks.length > 0 && /* @__PURE__ */ jsx("div", { className: FOOTER_LEGAL_LINKS, children: legalLinks.map((link, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+            i > 0 && /* @__PURE__ */ jsx("span", { className: FOOTER_LEGAL_SEPARATOR, children: "|" }),
+            /* @__PURE__ */ jsx(L, { href: link.href, className: FOOTER_LEGAL_LINK, children: link.label })
           ] }, link.label)) })
         ] }),
-        nav.map((group) => /* @__PURE__ */ jsxs("nav", { "aria-label": `Footer ${group.heading} links`, className: "lg:col-span-2", children: [
+        nav.map((group) => /* @__PURE__ */ jsxs("nav", { "aria-label": `Footer ${group.heading} links`, className: FOOTER_NAV_COLUMN, children: [
           /* @__PURE__ */ jsx("h4", { className: HEADING, children: group.heading }),
-          /* @__PURE__ */ jsx("ul", { className: "space-y-3", children: group.links.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("ul", { className: FOOTER_NAV_LIST, children: group.links.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
             L,
             {
               href: link.href,
-              className: "text-xs font-light text-ink/70 hover:text-primary-ink transition-colors",
+              className: FOOTER_NAV_LINK,
               children: link.label
             }
           ) }, link.href)) })
         ] }, group.heading)),
-        offices.length > 0 && /* @__PURE__ */ jsxs("div", { className: "col-span-2 lg:col-span-3", children: [
+        offices.length > 0 && /* @__PURE__ */ jsxs("div", { className: FOOTER_WIDE_COLUMN, children: [
           /* @__PURE__ */ jsx("h4", { className: HEADING, children: officesHeading }),
-          /* @__PURE__ */ jsx("ul", { className: "space-y-4 text-xs text-ink/70 font-light leading-relaxed", children: offices.map((office) => /* @__PURE__ */ jsxs("li", { children: [
-            /* @__PURE__ */ jsx("strong", { className: "text-ink block font-mono text-[10px] uppercase tracking-wider mb-1", children: office.name }),
+          /* @__PURE__ */ jsx("ul", { className: FOOTER_OFFICES_LIST, children: offices.map((office) => /* @__PURE__ */ jsxs("li", { children: [
+            /* @__PURE__ */ jsx("strong", { className: FOOTER_OFFICE_NAME, children: office.name }),
             office.address
           ] }, office.name)) })
         ] }),
-        newsletter && /* @__PURE__ */ jsxs("div", { className: "col-span-2 lg:col-span-2", children: [
+        newsletter && /* @__PURE__ */ jsxs("div", { className: FOOTER_NEWSLETTER_COLUMN, children: [
           /* @__PURE__ */ jsx("h4", { className: HEADING, children: newsletterHeading }),
-          /* @__PURE__ */ jsx("p", { className: "text-sm sm:text-xs font-light leading-relaxed text-ink/70 mb-4", children: newsletterBlurb }),
+          /* @__PURE__ */ jsx("p", { className: FOOTER_NEWSLETTER_BLURB, children: newsletterBlurb }),
           newsletter
         ] })
       ] }),
-      (copyright !== void 0 || version !== void 0) && /* @__PURE__ */ jsx("div", { className: "border-t border-ink/10 pt-8 text-[10px] font-mono text-ink/40", children: /* @__PURE__ */ jsxs("p", { children: [
+      (copyright !== void 0 || version !== void 0) && /* @__PURE__ */ jsx("div", { className: FOOTER_COPYRIGHT, children: /* @__PURE__ */ jsxs("p", { children: [
         copyright,
         version && /* @__PURE__ */ jsxs(Fragment, { children: [
           copyright !== void 0 && " ",
-          /* @__PURE__ */ jsx("a", { href: commitHref, className: "text-ink/30", children: version })
+          /* @__PURE__ */ jsx("a", { href: commitHref, className: FOOTER_VERSION, children: version })
         ] })
       ] }) })
     ] })
@@ -75,11 +77,11 @@ function FooterLockup({
   mark,
   tagline
 }) {
-  return /* @__PURE__ */ jsxs("div", { "data-slot": "footer-lockup", className: "flex items-center gap-3 mb-6", children: [
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "footer-lockup", className: FOOTER_LOCKUP, children: [
     mark,
-    (brand !== void 0 || tagline !== void 0) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-      brand !== void 0 && /* @__PURE__ */ jsx("span", { className: "font-serif font-bold text-base tracking-wider text-ink", children: brand }),
-      tagline !== void 0 && /* @__PURE__ */ jsx("span", { className: "text-[8px] font-mono tracking-[0.3em] text-primary-ink uppercase", children: tagline })
+    (brand !== void 0 || tagline !== void 0) && /* @__PURE__ */ jsxs("div", { className: FOOTER_LOCKUP_TEXT, children: [
+      brand !== void 0 && /* @__PURE__ */ jsx("span", { className: FOOTER_BRAND, children: brand }),
+      tagline !== void 0 && /* @__PURE__ */ jsx("span", { className: FOOTER_TAGLINE, children: tagline })
     ] })
   ] });
 }