@evinvest/uikit 0.30.0 → 0.32.0

package/dist/components/shell/account-menu-profile.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/shell/account-menu-profile.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { Avatar, AvatarFallback } from \"../atomic/avatar\";\nimport { Badge } from \"../atomic/badge\";\nimport {\n  DropdownMenuItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n} from \"../atomic/dropdown-menu\";\nimport { Switch } from \"../atomic/switch\";\nimport { UiIcon } from \"../../icons/ui-icons\";\n\nexport interface AccountMenuTab {\n  id: string;\n  label: React.ReactNode;\n  /** Shown instead of the menu body when this tab is current; the first tab is always the menu itself. */\n  content?: React.ReactNode;\n}\n\nexport interface AccountMenuProfile {\n  /** Under the name on the profile card, e.g. \"Free\". */\n  plan?: string;\n  /** Makes the card a menu item that runs this and closes the menu, e.g. to open the account settings. */\n  onOpenProfile?: () => void;\n  tabs?: readonly AccountMenuTab[];\n  /** Names the tab row for assistive tech. Default `\"Sections\"`. */\n  tabsLabel?: string;\n  /** Current tab id (controlled). */\n  tab?: string;\n  onTabChange?: (id: string) => void;\n  /** A row with a short value badge on the right (\"EN\"); picking it runs `onSelect`. */\n  language?: { label: string; value: string; onSelect?: () => void };\n  /** A row with a switch; the menu closes after a toggle. */\n  darkTheme?: { label: string; checked: boolean; onCheckedChange: (checked: boolean) => void };\n  /** A submenu of radio options; the current one's label shows on the row. */\n  colorTheme?: {\n    label: string;\n    value: string;\n    options: readonly { id: string; label: string }[];\n    onValueChange: (id: string) => void;\n  };\n  /** Glyphs for the rows, so the kit carries no icon set. */\n  icons?: { language?: React.ReactNode; darkTheme?: React.ReactNode; colorTheme?: React.ReactNode };\n}\n\n/**\n * The tabs are `menuitemradio` items in a group, not a tablist: a menu may only\n * hold items, and this way the menu's own arrow-key roving reaches them.\n * Selecting one does not close the menu.\n */\nexport function ProfileTabs({\n  tabs,\n  value,\n  onChange,\n  label = \"Sections\",\n}: {\n  tabs: readonly AccountMenuTab[];\n  value: string;\n  onChange: (id: string) => void;\n  label?: string | undefined;\n}) {\n  const move = (e: React.KeyboardEvent<HTMLButtonElement>, index: number) => {\n    const step = e.key === \"ArrowRight\" ? 1 : e.key === \"ArrowLeft\" ? -1 : 0;\n    if (step === 0) return;\n    // Up and Down belong to the menu; Left and Right stay in the row.\n    e.stopPropagation();\n    e.preventDefault();\n    const target = (index + step + tabs.length) % tabs.length;\n    const next = tabs[target];\n    if (!next) return;\n    onChange(next.id);\n    e.currentTarget.parentElement?.querySelectorAll<HTMLElement>('[role=\"menuitemradio\"]')[target]?.focus();\n  };\n  return (\n    <div role=\"group\" aria-label={label} data-slot=\"account-menu-tabs\" className=\"flex border-b border-border-subtle\">\n      {tabs.map((t, i) => {\n        const selected = t.id === value;\n        return (\n          <button\n            key={t.id}\n            type=\"button\"\n            role=\"menuitemradio\"\n            aria-checked={selected}\n            tabIndex={-1}\n            onClick={() => onChange(t.id)}\n            onKeyDown={(e) => move(e, i)}\n            className={cn(\n              \"-mb-px h-8 flex-1 border-b px-3 text-body font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n              selected ? \"border-primary text-ink\" : \"border-transparent text-ink-mid hover:text-ink\",\n            )}\n          >\n            {t.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n\nexport function ProfileCard({\n  name,\n  plan,\n  initials,\n  onOpen,\n}: {\n  name: string;\n  plan?: string | undefined;\n  initials: string;\n  onOpen?: (() => void) | undefined;\n}) {\n  const content = (\n    <>\n      <Avatar className=\"size-14 shrink-0 rounded-full\">\n        <AvatarFallback className=\"font-serif text-h2 font-light text-ink\">{initials.slice(0, 1)}</AvatarFallback>\n      </Avatar>\n      <span className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n        <span className=\"truncate text-body font-medium text-ink\">{name}</span>\n        {plan && <span className=\"text-caption text-ink-soft\">{plan}</span>}\n      </span>\n      {onOpen && <UiIcon name=\"chevron-right\" className=\"size-4 text-ink-soft\" />}\n    </>\n  );\n  if (!onOpen) {\n    return (\n      <div data-slot=\"account-menu-card\" className=\"flex w-full items-center gap-2.5 p-2\">\n        {content}\n      </div>\n    );\n  }\n  // A real menu item: it joins the arrow-key order and closes the menu, so a dialog opened from it is not left under the menu.\n  return (\n    <DropdownMenuItem data-slot=\"account-menu-card\" className=\"h-auto gap-2.5 p-2\" onClick={onOpen}>\n      {content}\n    </DropdownMenuItem>\n  );\n}\n\nexport function ProfileSettingRows({ profile }: { profile: AccountMenuProfile }) {\n  const { language, darkTheme, colorTheme, icons } = profile;\n  if (!language && !darkTheme && !colorTheme) return null;\n  const currentColor = colorTheme?.options.find((o) => o.id === colorTheme.value)?.label;\n  return (\n    <>\n      <DropdownMenuSeparator />\n      {language && (\n        <DropdownMenuItem onClick={() => language.onSelect?.()}>\n          {icons?.language}\n          <span className=\"flex-1\">{language.label}</span>\n          <Badge>{language.value}</Badge>\n        </DropdownMenuItem>\n      )}\n      {darkTheme && (\n        <DropdownMenuItem\n          role=\"menuitemcheckbox\"\n          aria-checked={darkTheme.checked}\n          onClick={() => darkTheme.onCheckedChange(!darkTheme.checked)}\n        >\n          {icons?.darkTheme}\n          <span className=\"flex-1\">{darkTheme.label}</span>\n          {/* Presentational: the row is the control, so the switch stays out of the tab order. */}\n          <Switch checked={darkTheme.checked} tabIndex={-1} aria-hidden className=\"pointer-events-none\" />\n        </DropdownMenuItem>\n      )}\n      {colorTheme && (\n        <DropdownMenuSub>\n          <DropdownMenuSubTrigger>\n            {icons?.colorTheme}\n            <span className=\"flex-1\">{colorTheme.label}</span>\n            {currentColor && <span className=\"text-body-s text-ink-soft\">{currentColor}</span>}\n          </DropdownMenuSubTrigger>\n          <DropdownMenuSubContent>\n            <DropdownMenuRadioGroup value={colorTheme.value} onValueChange={colorTheme.onValueChange}>\n              {colorTheme.options.map((o) => (\n                <DropdownMenuRadioItem key={o.id} value={o.id}>\n                  {o.label}\n                </DropdownMenuRadioItem>\n              ))}\n            </DropdownMenuRadioGroup>\n          </DropdownMenuSubContent>\n        </DropdownMenuSub>\n      )}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/shell/account-menu.js

@@ -0,0 +1,97 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/cn.js";
+import { Avatar, AvatarFallback } from "../atomic/avatar.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "../atomic/dropdown-menu.js";
+import { useControllableState } from "../../primitives/use-controllable-state.js";
+import {
+  ProfileCard,
+  ProfileSettingRows,
+  ProfileTabs
+} from "./account-menu-profile.js";
+const initials = (account) => {
+  const words = account.name?.trim().split(/\s+/).filter(Boolean) ?? [];
+  const letters = words.length > 0 ? words.slice(0, 2).map((w) => Array.from(w)[0]) : [Array.from(account.email)[0]];
+  return letters.join("").toUpperCase();
+};
+function AccountMenu({
+  account,
+  manageHref,
+  switchHref,
+  groups = [],
+  onSignOut,
+  linkComponent,
+  labels = {},
+  profile,
+  className
+}) {
+  const Link = linkComponent ?? "a";
+  const tabs = profile?.tabs ?? [];
+  const [tab, setTab] = useControllableState({
+    ...profile?.tab !== void 0 ? { value: profile.tab } : {},
+    defaultValue: tabs[0]?.id ?? "",
+    ...profile?.onTabChange ? { onChange: profile.onTabChange } : {}
+  });
+  const otherTab = tabs.length > 0 && tab !== tabs[0]?.id ? tabs.find((t) => t.id === tab) : void 0;
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(
+      DropdownMenuTrigger,
+      {
+        "data-slot": "account-menu-trigger",
+        "aria-label": labels.trigger ?? "Account",
+        className: cn("rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring", className),
+        children: /* @__PURE__ */ jsx(Avatar, { children: /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs font-medium text-ink", children: initials(account) }) })
+      }
+    ),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: profile ? "w-75" : "w-64", children: [
+      tabs.length > 0 && /* @__PURE__ */ jsx(ProfileTabs, { tabs, value: tab, onChange: setTab, label: profile?.tabsLabel }),
+      otherTab ? otherTab.content : /* @__PURE__ */ jsxs(Fragment, { children: [
+        profile ? /* @__PURE__ */ jsx(
+          ProfileCard,
+          {
+            name: account.name || account.email,
+            plan: profile.plan,
+            initials: initials(account),
+            onOpen: profile.onOpenProfile
+          }
+        ) : /* @__PURE__ */ jsxs(DropdownMenuLabel, { className: "flex flex-col", children: [
+          account.name && /* @__PURE__ */ jsx("span", { className: "truncate text-ink", children: account.name }),
+          /* @__PURE__ */ jsx("span", { className: "truncate font-normal text-ink-soft", children: account.email })
+        ] }),
+        profile && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+        manageHref && /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsx("a", { href: manageHref, children: labels.manage ?? "Manage account" }) }),
+        groups.map((group) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+          /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
+            group.label && /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-xs text-ink-soft", children: group.label }),
+            group.items.map((item) => {
+              const Item = item.external ? "a" : Link;
+              const Icon = item.icon;
+              return /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxs(Item, { href: item.href, children: [
+                Icon && /* @__PURE__ */ jsx(Icon, { className: "size-4" }),
+                item.label
+              ] }) }, item.id);
+            })
+          ] })
+        ] }, group.id)),
+        profile && /* @__PURE__ */ jsx(ProfileSettingRows, { profile }),
+        /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+        /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsx("a", { href: switchHref, children: labels.switchAccount ?? "Switch account" }) }),
+        /* @__PURE__ */ jsx(DropdownMenuItem, { variant: profile ? "destructive" : "neutral", onClick: onSignOut, children: labels.signOut ?? "Sign out" })
+      ] })
+    ] })
+  ] });
+}
+export {
+  AccountMenu
+};
+//# sourceMappingURL=account-menu.js.map

package/dist/components/shell/account-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/shell/account-menu.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { Avatar, AvatarFallback } from \"../atomic/avatar\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"../atomic/dropdown-menu\";\nimport type { NavGroup } from \"./nav-model\";\nimport { useControllableState } from \"../../primitives/use-controllable-state\";\nimport {\n  ProfileCard,\n  ProfileSettingRows,\n  ProfileTabs,\n  type AccountMenuProfile,\n  type AccountMenuTab,\n} from \"./account-menu-profile\";\n\nexport type { AccountMenuProfile, AccountMenuTab };\n\nexport interface AccountMenuLabels {\n  /** Accessible name of the trigger. Default `\"Account\"`. */\n  trigger?: string;\n  /** Default `\"Manage account\"`. */\n  manage?: string;\n  /** Default `\"Switch account\"`. */\n  switchAccount?: string;\n  /** Default `\"Sign out\"`. */\n  signOut?: string;\n}\n\nexport interface AccountMenuProps {\n  account: { name?: string | null | undefined; email: string };\n  /** The account center, on the identity provider's origin; no item without it. */\n  manageHref?: string | undefined;\n  /** A full page load to the sign-in that offers the account chooser. */\n  switchHref: string;\n  /** The service's own entries, between the account center and switching. Draws `label`, `icon`, `external`. */\n  groups?: readonly NavGroup[];\n  onSignOut: () => void;\n  linkComponent?: React.ElementType;\n  labels?: AccountMenuLabels;\n  /**\n   * The wide profile form: tabs, a profile card, language and theme rows. Absent,\n   * the menu is the compact one it always was.\n   */\n  profile?: AccountMenuProfile;\n  className?: string;\n}\n\nconst initials = (account: AccountMenuProps[\"account\"]) => {\n  const words = account.name?.trim().split(/\\s+/).filter(Boolean) ?? [];\n  const letters = words.length > 0 ? words.slice(0, 2).map(w => Array.from(w)[0]) : [Array.from(account.email)[0]];\n  return letters.join(\"\").toUpperCase();\n};\n\n/**\n * Who is signed in, top right. The order is fixed — the account, the account\n * center, the service's groups, switching, signing out — so every service's\n * menu reads the same; a service adds groups and nothing else.\n */\nexport function AccountMenu({\n  account,\n  manageHref,\n  switchHref,\n  groups = [],\n  onSignOut,\n  linkComponent,\n  labels = {},\n  profile,\n  className,\n}: AccountMenuProps) {\n  const Link = linkComponent ?? \"a\";\n  const tabs = profile?.tabs ?? [];\n  const [tab, setTab] = useControllableState<string>({\n    ...(profile?.tab !== undefined ? { value: profile.tab } : {}),\n    defaultValue: tabs[0]?.id ?? \"\",\n    ...(profile?.onTabChange ? { onChange: profile.onTabChange } : {}),\n  });\n  const otherTab = tabs.length > 0 && tab !== tabs[0]?.id ? tabs.find((t) => t.id === tab) : undefined;\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger\n        data-slot=\"account-menu-trigger\"\n        aria-label={labels.trigger ?? \"Account\"}\n        className={cn(\"rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring\", className)}\n      >\n        <Avatar>\n          <AvatarFallback className=\"text-xs font-medium text-ink\">{initials(account)}</AvatarFallback>\n        </Avatar>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" className={profile ? \"w-75\" : \"w-64\"}>\n        {tabs.length > 0 && <ProfileTabs tabs={tabs} value={tab} onChange={setTab} label={profile?.tabsLabel} />}\n        {otherTab ? (\n          otherTab.content\n        ) : (\n          <>\n        {profile ? (\n          <ProfileCard\n            name={account.name || account.email}\n            plan={profile.plan}\n            initials={initials(account)}\n            onOpen={profile.onOpenProfile}\n          />\n        ) : (\n          <DropdownMenuLabel className=\"flex flex-col\">\n            {account.name && <span className=\"truncate text-ink\">{account.name}</span>}\n            <span className=\"truncate font-normal text-ink-soft\">{account.email}</span>\n          </DropdownMenuLabel>\n        )}\n        {profile && <DropdownMenuSeparator />}\n        {manageHref && (\n          <DropdownMenuItem asChild>\n            <a href={manageHref}>{labels.manage ?? \"Manage account\"}</a>\n          </DropdownMenuItem>\n        )}\n        {groups.map(group => (\n          <React.Fragment key={group.id}>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              {group.label && <DropdownMenuLabel className=\"text-xs text-ink-soft\">{group.label}</DropdownMenuLabel>}\n              {group.items.map(item => {\n                const Item = item.external ? \"a\" : Link;\n                const Icon = item.icon;\n                return (\n                  <DropdownMenuItem key={item.id} asChild>\n                    <Item href={item.href}>\n                      {Icon && <Icon className=\"size-4\" />}\n                      {item.label}\n                    </Item>\n                  </DropdownMenuItem>\n                );\n              })}\n            </DropdownMenuGroup>\n          </React.Fragment>\n        ))}\n        {profile && <ProfileSettingRows profile={profile} />}\n        <DropdownMenuSeparator />\n        <DropdownMenuItem asChild>\n          <a href={switchHref}>{labels.switchAccount ?? \"Switch account\"}</a>\n        </DropdownMenuItem>\n        <DropdownMenuItem variant={profile ? \"destructive\" : \"neutral\"} onClick={onSignOut}>\n          {labels.signOut ?? \"Sign out\"}\n        </DropdownMenuItem>\n          </>\n        )}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,84 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import {
+  ACCOUNT_SETTINGS_DIALOG_CLOSE,
+  ACCOUNT_SETTINGS_DIALOG_CONTENT,
+  ACCOUNT_SETTINGS_DIALOG_DESCRIPTION,
+  ACCOUNT_SETTINGS_DIALOG_ENTRY,
+  ACCOUNT_SETTINGS_DIALOG_FOOTER,
+  ACCOUNT_SETTINGS_DIALOG_HEADING,
+  ACCOUNT_SETTINGS_DIALOG_LIST,
+  ACCOUNT_SETTINGS_DIALOG_PANE,
+  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 "../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,
+  onOpenChange,
+  title,
+  description,
+  sections,
+  value,
+  defaultValue,
+  onValueChange,
+  sidebarFooter,
+  labels = {},
+  className
+}) {
+  const first = sections[0]?.id ?? "";
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      ...open !== void 0 ? { open } : {},
+      ...defaultOpen !== void 0 ? { defaultOpen } : {},
+      ...onOpenChange ? { onOpenChange } : {},
+      children: /* @__PURE__ */ jsxs(
+        DialogContent,
+        {
+          showCloseButton: false,
+          className: cn(ACCOUNT_SETTINGS_DIALOG_CONTENT, className),
+          children: [
+            /* @__PURE__ */ jsxs(
+              Tabs,
+              {
+                orientation: "vertical",
+                ...value !== void 0 ? { value } : { defaultValue: defaultValue ?? first },
+                ...onValueChange ? { onValueChange } : {},
+                className: ACCOUNT_SETTINGS_DIALOG_TABS,
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: ACCOUNT_SETTINGS_DIALOG_SIDEBAR, children: [
+                    /* @__PURE__ */ jsx(TabsList, { className: ACCOUNT_SETTINGS_DIALOG_LIST, children: sections.map((s) => /* @__PURE__ */ jsxs(TabsTrigger, { value: s.id, className: ACCOUNT_SETTINGS_DIALOG_ENTRY, children: [
+                      s.icon,
+                      s.label
+                    ] }, s.id)) }),
+                    sidebarFooter != null && /* @__PURE__ */ jsx("div", { className: ACCOUNT_SETTINGS_DIALOG_FOOTER, children: sidebarFooter })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: ACCOUNT_SETTINGS_DIALOG_PANE, children: [
+                    /* @__PURE__ */ jsxs("div", { className: ACCOUNT_SETTINGS_DIALOG_HEADING, children: [
+                      /* @__PURE__ */ jsx(DialogTitle, { className: ACCOUNT_SETTINGS_DIALOG_TITLE, children: title }),
+                      description != null && /* @__PURE__ */ jsx(DialogDescription, { className: ACCOUNT_SETTINGS_DIALOG_DESCRIPTION, children: description })
+                    ] }),
+                    sections.map((s) => /* @__PURE__ */ jsx(TabsContent, { value: s.id, className: ACCOUNT_SETTINGS_DIALOG_PANEL, children: s.content }, s.id))
+                  ] })
+                ]
+              }
+            ),
+            /* @__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" }) }) })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  AccountSettingsDialog
+};
+//# sourceMappingURL=account-settings-dialog.js.map

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} 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 ?? \"Close\"} className={ACCOUNT_SETTINGS_DIALOG_CLOSE}>\n            <UiIcon name=\"x\" />\n          </IconButton>\n        </DialogClose>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"AAwFY,cAEI,YAFJ;AAxFZ,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,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,SAAS,WAAW,+BAC1D,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",
@@ -23,6 +23,7 @@ function AppShell({
   tabBar,
   topBar,
   banner,
+  aside,
   breakpoint = "lg",
   mainProps,
   className,
@@ -78,6 +79,14 @@ function AppShell({
             ]
           }
         ),
+        present(aside) && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "app-shell-aside",
+            className: "sticky top-[var(--ev-shell-offset,0px)] flex h-[calc(100dvh-var(--ev-shell-offset,0px))] shrink-0 self-start",
+            children: aside
+          }
+        ),
         present(tabBar) && /* @__PURE__ */ jsx(
           "div",
           {

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/shell/aside.js

@@ -0,0 +1,140 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/cn.js";
+import {
+  ASIDE_BODY,
+  ASIDE_FOOTER,
+  ASIDE_HEADER_BACK_ICON,
+  ASIDE_HEADER_BASE,
+  ASIDE_HEADER_TITLE,
+  ASIDE_PANEL_DOCKED,
+  ASIDE_PANEL_DRAWER,
+  ASIDE_PANEL_SHEET,
+  ASIDE_RAIL_BASE,
+  ASIDE_RAIL_SPACER,
+  asidePanelSideClasses
+} 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";
+function AsideHeader({ title, onBack, onClose, actions, labels = {}, className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "aside-header",
+      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 }) }),
+        /* @__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" }) })
+      ]
+    }
+  );
+}
+function AsideRail({
+  items,
+  endItems = [],
+  value,
+  onValueChange,
+  className,
+  "aria-label": ariaLabel = "Panels",
+  ...props
+}) {
+  const button = (item) => /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      "aria-label": item.label,
+      tooltip: item.label,
+      pressed: value === item.id,
+      onClick: () => onValueChange(value === item.id ? null : item.id),
+      children: item.icon
+    },
+    item.id
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "group",
+      "aria-label": ariaLabel,
+      "data-slot": "aside-rail",
+      className: cn(ASIDE_RAIL_BASE, className),
+      ...props,
+      children: [
+        items.map(button),
+        /* @__PURE__ */ jsx("span", { className: ASIDE_RAIL_SPACER }),
+        endItems.map(button)
+      ]
+    }
+  );
+}
+function useAtLeast(query) {
+  return React.useSyncExternalStore(
+    (notify) => {
+      if (typeof window.matchMedia !== "function") return () => {
+      };
+      const mq = window.matchMedia(query);
+      mq.addEventListener("change", notify);
+      return () => mq.removeEventListener("change", notify);
+    },
+    () => typeof window.matchMedia !== "function" || window.matchMedia(query).matches,
+    // Server and first paint assume a wide screen; a phone swaps to the drawer on hydrate.
+    () => true
+  );
+}
+function AsidePanel({
+  mode = "docked",
+  side = "right",
+  open = true,
+  onOpenChange,
+  header,
+  footer,
+  collapseBelow = "md",
+  className,
+  children,
+  ...props
+}) {
+  const viewportWide = useAtLeast("(min-width: 768px)");
+  const wide = collapseBelow === false || viewportWide;
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    header,
+    /* @__PURE__ */ jsx("div", { "data-slot": "aside-body", className: ASIDE_BODY, children }),
+    footer != null && /* @__PURE__ */ jsx("div", { "data-slot": "aside-footer", className: ASIDE_FOOTER, children: footer })
+  ] });
+  if (mode === "docked" && wide) {
+    if (!open) return null;
+    return /* @__PURE__ */ jsx(
+      "aside",
+      {
+        "data-slot": "aside-panel",
+        "data-mode": "docked",
+        "data-side": side,
+        className: cn(ASIDE_PANEL_DOCKED, asidePanelSideClasses[side], className),
+        ...props,
+        children: body
+      }
+    );
+  }
+  const label = props["aria-label"];
+  if (!wide) {
+    return /* @__PURE__ */ jsx(Drawer, { open, ...onOpenChange ? { onOpenChange } : {}, direction: "bottom", children: /* @__PURE__ */ jsx(DrawerContent, { "aria-label": label, className: ASIDE_PANEL_DRAWER, children: body }) });
+  }
+  return /* @__PURE__ */ jsx(Sheet, { open, ...onOpenChange ? { onOpenChange } : {}, children: /* @__PURE__ */ jsx(
+    SheetContent,
+    {
+      side,
+      "aria-label": label,
+      className: cn(ASIDE_PANEL_SHEET, className),
+      children: body
+    }
+  ) });
+}
+export {
+  AsideHeader,
+  AsidePanel,
+  AsideRail
+};
+//# sourceMappingURL=aside.js.map

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} 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\";\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 ?? \"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 ?? \"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 = \"Panels\",\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 = \"docked\" | \"overlay\";\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,7 @@ import {
   EmptyHeader,
   EmptyMedia,
   EmptyTitle
-} from "./empty.js";
+} from "../atomic/empty.js";
 function AuthWall({ title, description, children, ...props }) {
   return /* @__PURE__ */ jsxs(Empty, { ...props, children: [
     /* @__PURE__ */ jsxs(EmptyHeader, { children: [

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\";\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\n// lucide `lock`, inlined so the kit keeps its zero-icon-dep footprint.\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      <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\" />\n      <path d=\"M7 11V7a5 5 0 0 1 10 0v4\" />\n    </svg>\n  );\n}\n"],"mappings":"AAuBM,SAEI,KAFJ;AAvBN,YAAY,WAAW;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAYA,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;AAGA,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,MAEX;AAAA,4BAAC,UAAK,GAAE,KAAI,GAAE,MAAK,OAAM,MAAK,QAAO,MAAK,IAAG,KAAI,IAAG,KAAI;AAAA,QACxD,oBAAC,UAAK,GAAE,4BAA2B;AAAA;AAAA;AAAA,EACrC;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";

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-secondary 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-lg 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-50\",\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/shell/chat-composer.js

@@ -0,0 +1,141 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import {
+  CHAT_COMPOSER_ATTACHMENTS,
+  CHAT_COMPOSER_BASE,
+  CHAT_COMPOSER_FIELD,
+  CHAT_COMPOSER_HINT,
+  CHAT_COMPOSER_IDLE,
+  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";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger
+} 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";
+function ModelChip({ models, value, onValueChange, "aria-label": ariaLabel = "Model", className }) {
+  const current = models.find((m) => m.id === value);
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxs(
+      DropdownMenuTrigger,
+      {
+        "aria-label": `${ariaLabel}: ${current?.label ?? value}`,
+        "data-slot": "model-chip",
+        className: cn(MODEL_CHIP_BASE, className),
+        children: [
+          current?.label ?? value,
+          /* @__PURE__ */ jsx(UiIcon, { name: "chevron-down" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", children: /* @__PURE__ */ jsx(DropdownMenuRadioGroup, { value, onValueChange, children: models.map((m) => /* @__PURE__ */ jsx(DropdownMenuRadioItem, { value: m.id, children: m.label }, m.id)) }) })
+  ] });
+}
+function ChatComposer({
+  value,
+  defaultValue = "",
+  onValueChange,
+  onSend,
+  streaming = false,
+  onStop,
+  placeholder = "Ask the assistant\u2026",
+  onAttach,
+  attachments,
+  tools,
+  hint,
+  disabled = false,
+  labels = {},
+  className,
+  ...props
+}) {
+  const [text, setText] = useControllableState({
+    ...value !== void 0 ? { value } : {},
+    defaultValue,
+    ...onValueChange ? { onChange: onValueChange } : {}
+  });
+  const trimmed = text.trim();
+  const root = React.useRef(null);
+  const send = () => {
+    if (trimmed === "" || disabled) return;
+    onSend(trimmed);
+    setText("");
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: root,
+      "data-slot": "chat-composer",
+      "data-state": streaming ? "streaming" : "default",
+      className: cn(
+        CHAT_COMPOSER_BASE,
+        streaming ? CHAT_COMPOSER_STREAMING : CHAT_COMPOSER_IDLE,
+        className
+      ),
+      ...props,
+      children: [
+        attachments != null && /* @__PURE__ */ jsx("div", { className: CHAT_COMPOSER_ATTACHMENTS, children: attachments }),
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            rows: 1,
+            value: text,
+            disabled,
+            placeholder,
+            "aria-label": labels.field ?? "Message",
+            onChange: (e) => setText(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing && e.keyCode !== 229) {
+                e.preventDefault();
+                send();
+              }
+            },
+            className: CHAT_COMPOSER_FIELD
+          }
+        ),
+        /* @__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" }) }),
+          tools,
+          /* @__PURE__ */ jsx("span", { className: CHAT_COMPOSER_SPACER }),
+          hint != null && /* @__PURE__ */ jsx("span", { className: CHAT_COMPOSER_HINT, children: hint }),
+          streaming ? /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              variant: "outline",
+              "aria-label": labels.stop ?? "Stop",
+              onClick: () => {
+                onStop?.();
+                root.current?.querySelector("textarea")?.focus();
+              },
+              children: /* @__PURE__ */ jsx(UiIcon, { name: "stop" })
+            }
+          ) : /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              variant: "outline",
+              "aria-label": labels.send ?? "Send",
+              onClick: send,
+              disabled: disabled || trimmed === "",
+              children: /* @__PURE__ */ jsx(UiIcon, { name: "arrow-up" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ChatComposer,
+  ModelChip
+};
+//# sourceMappingURL=chat-composer.js.map