@evinvest/uikit 0.25.0 → 0.27.0

package/README.md

@@ -63,7 +63,7 @@ your Tailwind v4 entrypoint — this is the load-bearing part of the kit:
 | surfaces | `background` `card` `popover` `muted` `hover` |
 | ink | `ink` `ink-mid` `ink-soft` — hierarchy, loudest first |
 | lines | `border` `input` `ring` |
-| roles | `brand` `primary` `secondary` `positive` `accent-trace` `accent-debug` `accent-info` `accent-warn` `accent-error`, each with `on-*` where it gets filled; `primary-ink` — the primary role as ink on a surface (`#128377` fill under a white `on-primary`, `#2a9d8f` ink) |
+| roles | `brand` `primary` `secondary` `positive` `accent-trace` `accent-debug` `accent-info` `accent-warn` `accent-error`, each with `on-*` where it gets filled; `primary-ink` — the primary role as ink on a surface (`#128377` fill under a white `on-primary`, `#2a9d8f` ink); `accent-error-ink` — the error role as text on its own tint (derived, a palette may pin it) |
 | scalars | `radius` `control-radius` `control-py` `display-scale` `band-py` `page-max` `page-px` `shell-rail-w` `shell-tab-bar-h` `shadow-*` `font-*` |
 | motion | `ev-ease-out` `ev-ease-in-out` `ev-dur-fast` `ev-dur-base` `ev-dur-slow` `ev-rise` `ev-stagger` `ev-stagger-section` |
 | charts | `chart-1` … `chart-5` |
@@ -106,7 +106,8 @@ It has two halves, each also shipped as a flat sheet of its own —
 
 - **the contract** — the `@theme inline` mapping, the geometry, and the tokens
   *derived* from a palette (`hover`, `ink-mid`, `ink-soft`, `border`, `input`
-  from `ink`; `ring` from `primary-ink`). The derived ones are redeclared on
+  from `ink`; `ring` from `primary-ink`; `accent-error-ink` from `accent-error`
+  and `ink`). The derived ones are redeclared on
   `:root`, `[data-brand]`, `.light` and `.dark` at zero specificity, so a brand
   scope gets its own borders, hover and focus ring rather than inheriting the
   root's, and a palette may still pin any of them outright. The geometry
@@ -366,10 +367,11 @@ export function Nav() {
 }
 ```
 
-- **`AppShell`** — slots `rail`, `tabBar`, `banner`, `children`; `breakpoint`
+- **`AppShell`** — slots `rail`, `topBar`, `tabBar`, `banner`, `children`; `breakpoint`
   (`"md"` | `"lg"`, default `lg`) is where the tab bar gives way to the rail.
   Fills `100dvh` less `--ev-shell-offset`; the rail sticks under that offset; the
   column reserves `--shell-tab-bar-h` plus the bottom safe area for the bar.
+  `topBar` sticks over the column, also under that offset, from `breakpoint` up.
   `mainProps` reaches the `<main>`. Layout only — no `"use client"`.
 - **`NavItem`** — `{ id, href, label, icon?, badge?, trailing?, external?,
   target?, match?, also?, disabled? }`, shared by the rail and the tab bar.
@@ -401,6 +403,10 @@ export function Nav() {
 - **`MobileAppBar`** `{ title, back?: { href } | { onClick }, right?,
   linkComponent?, hideFrom = "lg", labels: { back } }` — sticky under
   `--ev-shell-offset`; with `back` the title centres.
+- **`TopBar`** `{ start?, end? }` — layout only, server-safe.
+- **`AccountMenu`** `{ account: { name?, email }, manageHref?, switchHref,
+  groups?: NavGroup[], onSignOut, linkComponent?, labels: { trigger, manage,
+  switchAccount, signOut } }` — an initials avatar opening the menu.
 - **`PageFrame`** `{ title?, description?, eyebrow?, actions?, appBar?,
   width: "full" | "content", breakpoint }`, with **`PageHeading`** and
   **`SectionLabel`** (`tone: "muted" | "accent"`). With an `appBar` the heading
@@ -419,6 +425,25 @@ export function Nav() {
 Every string the kit renders or speaks is a `labels` entry with an English
 default.
 
+### The top bar contract
+
+Every service under one account wears the same top bar, so a user moving
+between them finds who they are and how to leave in the same place:
+
+```
+[start: app switcher or service name]        [end: service stats…]  [AccountMenu]
+AccountMenu: name / email · Manage account · ── service groups ── · Switch account · Sign out
+```
+
+- The bar is utility only; product nav stays in the rail.
+- The kit owns the fixed parts and their order. A service adds stats before the
+  `AccountMenu` and `groups` inside it — it never reorders or drops the rest.
+- Data is the host's: each service reads its own session and passes `account`;
+  `manageHref` is the identity provider's account center, `switchHref` the
+  sign-in that shows the account chooser.
+- A surface that cannot take the kit (the cabinet's public chip) hand-writes the
+  same order.
+
 ### Motion without a motion library
 
 The shell's motion is CSS in `tokens.css` (from `motion.css`), keyed on data
@@ -468,6 +493,90 @@ cn("p-4", "p-2"); // "p-2" — tailwind-merge resolves the conflict, rightmost w
 `cn` (clsx + tailwind-merge) is the mirror of the Rust `cn!` macro
 (`tailwind_fuse::tw_merge!`). A caller's `className`, passed last, beats the base.
 
+### Tables
+
+```tsx
+import { Table, TableBody, TableCard, TableCell, TableHead, TableHeader, TableRow } from "@evinvest/uikit";
+
+<TableCard>
+  <Table variant="card" density="compact">
+    <TableHeader>
+      <TableRow>
+        <TableHead>Key</TableHead>
+        <TableHead align="end">Amount</TableHead>
+      </TableRow>
+    </TableHeader>
+    <TableBody>
+      <TableRow>
+        <TableCell>sk_live_7f3a</TableCell>
+        <TableCell align="end">1,250.00</TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+</TableCard>
+```
+
+- `variant="card"` — uppercase `text-xs tracking-wide text-ink-soft` head,
+  `px-5 py-3` cells, no hover on the head row. Meant to sit edge to edge in a
+  `TableCard`, the paddingless card surface.
+- `density="compact"` — shorter head and rows; combines with either variant.
+- `align="start" | "end"` on `TableHead` / `TableCell` — `end` right-aligns
+  with tabular numerals for figures. It replaces the obsolete HTML `align`
+  attribute on those two.
+- `Table` sets no context: `variant` and `density` are inherited `--table-*`
+  custom properties the heads and cells read. `Table` stays a Server
+  Component, and a cell's own `className` (`px-0`, `text-center`) still wins.
+- **`ListRows` / `ListRow` (TS-only)** — a table's phone form: label/value rows
+  split by hairlines, so the trailing columns are not scrolled off-screen.
+  `variant="card"` pads the rows for a `TableCard`; `ListRowLabel` /
+  `ListRowValue` compose a row by hand.
+
+```tsx
+<TableCard className="sm:hidden">
+  <ListRows variant="card">
+    <ListRow label="sk_live_7f3a" description="api · aquafix" value="2026-09-30" />
+  </ListRows>
+</TableCard>
+```
+### Command
+
+By default `Command` filters its items on the client: a case-insensitive
+substring match of the typed query against each `CommandItem`'s `value`. When the
+rows are already the answer to the query — a search endpoint, a ranking of your
+own — pass `shouldFilter={false}` and own the query state:
+
+```tsx
+const [query, setQuery] = useState("");
+const { rows, loading } = useInvestorSearch(query); // your fetch, debounced or not
+
+<Command shouldFilter={false} search={query} onSearchChange={setQuery}>
+  <CommandInput placeholder="Search investors…" />
+  <CommandList>
+    {loading ? <Spinner /> : <CommandEmpty>No investors found.</CommandEmpty>}
+    {rows.map((r) => (
+      <CommandItem key={r.id} value={r.id} onSelect={pick}>
+        {r.name}
+      </CommandItem>
+    ))}
+  </CommandList>
+</Command>
+```
+
+Then nothing is hidden or reordered: every mounted item renders in your order,
+and `CommandEmpty` shows once a query is typed and no item is mounted. `value`
+is then just what `onSelect` receives.
+
+Keyboard works the same in both modes, as an ARIA combobox: focus stays in
+`CommandInput`, which points at the highlighted row via
+`aria-activedescendant`; ArrowUp / ArrowDown move the highlight (clamped,
+disabled rows skipped), Enter fires the row's `onSelect`, and hover moves it
+too. Home / End stay with the caret, and keys from any other focusable inside
+Command (a button in `CommandEmpty`) are left alone. Rows stay out of the Tab order on purpose. The highlight sits on
+the first row until the user moves it, so results that arrive after the
+keystroke put Enter on the top hit. Without a `CommandInput` there is nothing to
+hold focus, so a bare list is pointer-only. The live demo is `CommandDemo` in
+`example/`.
+
 ## Rust ↔ TS parity
 
 The Rust crate is the source of truth; this package preserves its _semantics_
@@ -484,7 +593,7 @@ element across the two ports.
 | overlay placement | inline `position:fixed` + `data-side` | `Portal` + `useFloating` |
 | dismiss / focus trap | full-screen backdrop / native order | `useDismissableLayer` / `useFocusScope` |
 
-### Component inventory (all 73 bricks)
+### Component inventory (all 75 bricks)
 
 - **Tier A — static (23):** badge, button, button-group, card, input, textarea,
   label, field, separator, skeleton, spinner, kbd, table, container, alert,
@@ -503,8 +612,8 @@ element across the two ports.
   / `Forbidden` / `ServerError` presets (404 / 403 / 500). The kit ships no
   artwork: `Logo` masks whatever `--brand-mark` / `--brand-aspect` the consumer
   declares beside the palette, and the status pages use it for their mark.
-- **App shell — TS-only (10):** app-shell, shell-nav, bottom-tab-bar,
-  nav-badge (`NavBadge` / `NavDot`), mobile-app-bar, page-frame (`PageFrame` /
+- **App shell — TS-only (12):** app-shell, shell-nav, bottom-tab-bar,
+  nav-badge (`NavBadge` / `NavDot`), top-bar, account-menu, mobile-app-bar, page-frame (`PageFrame` /
   `PageHeading` / `SectionLabel`), section-nav, resource-error, system-banner,
   settled — see [App shell](#app-shell).
 - **Features — composed screens (1):** terminal — a trading terminal over an
@@ -536,6 +645,31 @@ measuring needs host-only `web-sys`). Known gaps:
   no viewport-measured floating, native focus order (no trap). TS overlays use a
   real `Portal`, single-flip `useFloating` (absolute in the document, so it
   scrolls with the page natively), `useDismissableLayer`, and `useFocusScope`.
+- **overlay layers (TS):** every TS overlay is on one dismissable-layer stack.
+  A layer rendered inside another sits above it, even when both open in the
+  same commit; unrelated layers stack in the order they opened. Escape closes
+  the layer that was on top when it was pressed — a menu, `Select` or
+  `Popover` inside a `Dialog`, `Sheet` or `Drawer` closes first, the modal on
+  the next Escape — and a press inside a layer above is not "outside" the
+  ones below. A modal (`Dialog`, `AlertDialog`, `Sheet`, `Drawer`,
+  `CommandDialog`) bars the layers below from pointer-downs while it is open:
+  a click on its backdrop closes it alone. `Drawer` and `CommandDialog` close
+  on a click on their own scrim, not on any outside pointer-down. Toasts are
+  outside every layer: they never take Escape, and a click on one closes
+  nothing. The stack is shared through `globalThis`, so a micro-frontend
+  bundling its own uikit copy sees the host's layers; parent links are a
+  React context, so across two copies the nested layer's place falls back to
+  opening order. A non-uikit overlay joins through `useDismissableLayer`
+  (`modal`, `pointerOutside`) and `DismissableLayerScope`; mark a floating
+  region that should dismiss nothing with `LAYER_IGNORE_ATTR`.
+- **overlay layers (Rust):** `Select`, `Popover`, `Dialog` and `DropdownMenu`
+  share one dismissable-layer stack per `VirtualDom`
+  (`primitives::use_dismissable_layer`): Escape and a click on a backdrop act
+  on the top layer only, so a `Select` inside a `Dialog` closes first. There is
+  no document listener — an Escape counts only once it reaches an open layer's
+  `onkeydown` — and `AlertDialog`, `Sheet`, `Drawer`, `ContextMenu`, `Menubar`,
+  `NavigationMenu`, `HoverCard`, `Tooltip`, `InfoTip`, `DateTimePicker`,
+  `CommandDialog` and `DropdownMenuSub` are not on the stack yet.
 - **chart:** the recharts plotting engine is not bundled. `ChartContainer` is a
   themed SVG host (emits `--color-*` from its config); `ChartTooltipContent` /
   `ChartLegendContent` are presentational and take explicit items. Draw series
@@ -605,8 +739,8 @@ measuring needs host-only `web-sys`). Known gaps:
   The lock-up is composed from `mark` + `brand` (display family) + `tagline`,
   or passed whole as `lockup`. Brand-coloured text reads `primary-ink`.
 - **TS-only for now:** `NativeSelect`, the `Field` id hand-off,
-  `SelectValue` labels, and the whole [app shell](#app-shell) (`AppShell`,
-  `ShellNav`, `BottomTabBar`, `NavBadge` / `NavDot`, `MobileAppBar`, `PageFrame` /
+  `SelectValue` labels, `ListRows` / `ListRow` (a table's phone form), and the whole [app shell](#app-shell) (`AppShell`,
+  `ShellNav`, `BottomTabBar`, `NavBadge` / `NavDot`, `TopBar`, `AccountMenu`, `MobileAppBar`, `PageFrame` /
   `PageHeading` / `SectionLabel`, `SectionNav`, `ResourceError`, `SystemBanner`,
   `Settled`) — no Dioxus twin. Its CSS (the entrances, the markers, the motion
   and shell tokens) ships in the shared sheet, so a Rust app can use the

package/dist/components/account-menu.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { Avatar, AvatarFallback } from "./avatar.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "./dropdown-menu.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 = {},
+  className
+}) {
+  const Link = linkComponent ?? "a";
+  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: "w-64", children: [
+      /* @__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 })
+      ] }),
+      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)),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsx("a", { href: switchHref, children: labels.switchAccount ?? "Switch account" }) }),
+      /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: onSignOut, children: labels.signOut ?? "Sign out" })
+    ] })
+  ] });
+}
+export {
+  AccountMenu
+};
+//# sourceMappingURL=account-menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/account-menu.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Avatar, AvatarFallback } from \"./avatar\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"./dropdown-menu\";\nimport type { NavGroup } from \"./nav-model\";\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  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  className,\n}: AccountMenuProps) {\n  const Link = linkComponent ?? \"a\";\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=\"w-64\">\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        {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        <DropdownMenuSeparator />\n        <DropdownMenuItem asChild>\n          <a href={switchHref}>{labels.switchAccount ?? \"Switch account\"}</a>\n        </DropdownMenuItem>\n        <DropdownMenuItem onClick={onSignOut}>{labels.signOut ?? \"Sign out\"}</DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"mappings":";AAuEU,cAIF,YAJE;AArEV,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,QAAQ,sBAAsB;AACvC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AA4BP,MAAM,WAAW,CAAC,YAAyC;AACzD,QAAM,QAAQ,QAAQ,MAAM,KAAK,EAAE,MAAM,KAAK,EAAE,OAAO,OAAO,KAAK,CAAC;AACpE,QAAM,UAAU,MAAM,SAAS,IAAI,MAAM,MAAM,GAAG,CAAC,EAAE,IAAI,OAAK,MAAM,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,KAAK,QAAQ,KAAK,EAAE,CAAC,CAAC;AAC/G,SAAO,QAAQ,KAAK,EAAE,EAAE,YAAY;AACtC;AAOO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS,CAAC;AAAA,EACV;AAAA,EACA;AAAA,EACA,SAAS,CAAC;AAAA,EACV;AACF,GAAqB;AACnB,QAAM,OAAO,iBAAiB;AAC9B,SACE,qBAAC,gBACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,cAAY,OAAO,WAAW;AAAA,QAC9B,WAAW,GAAG,0EAA0E,SAAS;AAAA,QAEjG,8BAAC,UACC,8BAAC,kBAAe,WAAU,gCAAgC,mBAAS,OAAO,GAAE,GAC9E;AAAA;AAAA,IACF;AAAA,IACA,qBAAC,uBAAoB,OAAM,OAAM,WAAU,QACzC;AAAA,2BAAC,qBAAkB,WAAU,iBAC1B;AAAA,gBAAQ,QAAQ,oBAAC,UAAK,WAAU,qBAAqB,kBAAQ,MAAK;AAAA,QACnE,oBAAC,UAAK,WAAU,sCAAsC,kBAAQ,OAAM;AAAA,SACtE;AAAA,MACC,cACC,oBAAC,oBAAiB,SAAO,MACvB,8BAAC,OAAE,MAAM,YAAa,iBAAO,UAAU,kBAAiB,GAC1D;AAAA,MAED,OAAO,IAAI,WACV,qBAAC,MAAM,UAAN,EACC;AAAA,4BAAC,yBAAsB;AAAA,QACvB,qBAAC,qBACE;AAAA,gBAAM,SAAS,oBAAC,qBAAkB,WAAU,yBAAyB,gBAAM,OAAM;AAAA,UACjF,MAAM,MAAM,IAAI,UAAQ;AACvB,kBAAM,OAAO,KAAK,WAAW,MAAM;AACnC,kBAAM,OAAO,KAAK;AAClB,mBACE,oBAAC,oBAA+B,SAAO,MACrC,+BAAC,QAAK,MAAM,KAAK,MACd;AAAA,sBAAQ,oBAAC,QAAK,WAAU,UAAS;AAAA,cACjC,KAAK;AAAA,eACR,KAJqB,KAAK,EAK5B;AAAA,UAEJ,CAAC;AAAA,WACH;AAAA,WAhBmB,MAAM,EAiB3B,CACD;AAAA,MACD,oBAAC,yBAAsB;AAAA,MACvB,oBAAC,oBAAiB,SAAO,MACvB,8BAAC,OAAE,MAAM,YAAa,iBAAO,iBAAiB,kBAAiB,GACjE;AAAA,MACA,oBAAC,oBAAiB,SAAS,WAAY,iBAAO,WAAW,YAAW;AAAA,OACtE;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/alert-dialog.js

@@ -4,7 +4,7 @@ import * as React from "react";
 import { cn } from "../lib/cn.js";
 import { buttonVariants } from "./button.js";
 import { useControllableState } from "../primitives/use-controllable-state.js";
-import { useDismissableLayer } from "../primitives/dismissable-layer.js";
+import { DismissableLayerScope, useDismissableLayer } from "../primitives/dismissable-layer.js";
 import { useFocusScope } from "../primitives/focus-scope.js";
 import { usePresence } from "../primitives/presence.js";
 import { mergeRefs } from "../primitives/merge-refs.js";
@@ -66,11 +66,12 @@ function AlertDialogOverlay({ className, ...props }) {
 function AlertDialogContent({ className, children, ...props }) {
   const { open, setOpen, triggerRef } = useAlertDialog();
   const { isPresent, ref: presRef } = usePresence(open);
-  const focusRef = useFocusScope(open);
+  const focusRef = useFocusScope(open, { returnFocusTo: triggerRef });
   const dismissRef = useDismissableLayer({
     enabled: open,
     onDismiss: () => setOpen(false),
-    exclude: [triggerRef]
+    exclude: [triggerRef],
+    modal: true
   });
   if (!isPresent) return null;
   return /* @__PURE__ */ jsxs(Portal, { children: [
@@ -85,7 +86,7 @@ function AlertDialogContent({ className, children, ...props }) {
         ref: mergeRefs(focusRef, dismissRef, presRef),
         className: cn(ALERT_DIALOG_CONTENT, className),
         ...props,
-        children
+        children: /* @__PURE__ */ jsx(DismissableLayerScope, { layer: dismissRef, children })
       }
     )
   ] });

package/dist/components/alert-dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/alert-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { buttonVariants } from \"./button\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\nimport { useDismissableLayer } from \"../primitives/dismissable-layer\";\nimport { useFocusScope } from \"../primitives/focus-scope\";\nimport { usePresence } from \"../primitives/presence\";\nimport { mergeRefs } from \"../primitives/merge-refs\";\nimport { Portal } from \"../primitives/portal\";\nimport { Slot } from \"../primitives/slot\";\nimport {\n  ALERT_DIALOG_CONTENT,\n  ALERT_DIALOG_DESCRIPTION,\n  ALERT_DIALOG_FOOTER,\n  ALERT_DIALOG_HEADER,\n  ALERT_DIALOG_OVERLAY,\n  ALERT_DIALOG_TITLE,\n} from \"../generated/alert-dialog\";\n\ninterface AlertDialogContextValue {\n  open: boolean;\n  setOpen: (next: boolean) => void;\n  triggerRef: React.RefObject<HTMLElement | null>;\n}\n\nconst AlertDialogContext = React.createContext<AlertDialogContextValue | null>(null);\n\nfunction useAlertDialog(): AlertDialogContextValue {\n  const ctx = React.useContext(AlertDialogContext);\n  if (!ctx) throw new Error(\"AlertDialog parts must be used within <AlertDialog>\");\n  return ctx;\n}\n\nexport interface AlertDialogProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children?: React.ReactNode;\n}\n\nexport function AlertDialog({ open, defaultOpen = false, onOpenChange, children }: AlertDialogProps) {\n  const [isOpen, setOpen] = useControllableState<boolean>({\n    ...(open !== undefined ? { value: open } : {}),\n    defaultValue: defaultOpen,\n    ...(onOpenChange ? { onChange: onOpenChange } : {}),\n  });\n  const triggerRef = React.useRef<HTMLElement | null>(null);\n  return (\n    <AlertDialogContext.Provider value={{ open: isOpen, setOpen, triggerRef }}>\n      {children}\n    </AlertDialogContext.Provider>\n  );\n}\n\nexport interface AlertDialogTriggerProps extends React.ComponentProps<\"button\"> {\n  asChild?: boolean;\n}\n\nexport function AlertDialogTrigger({ asChild = false, onClick, ...props }: AlertDialogTriggerProps) {\n  const { open, setOpen, triggerRef } = useAlertDialog();\n  const Comp = asChild ? Slot : \"button\";\n  return (\n    <Comp\n      data-slot=\"alert-dialog-trigger\"\n      aria-expanded={open}\n      ref={triggerRef as React.Ref<HTMLButtonElement>}\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(e);\n        setOpen(true);\n      }}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport interface AlertDialogOverlayProps extends React.ComponentProps<\"div\"> {}\n\nexport function AlertDialogOverlay({ className, ...props }: AlertDialogOverlayProps) {\n  const { open, setOpen } = useAlertDialog();\n  return (\n    <div\n      data-slot=\"alert-dialog-overlay\"\n      data-state={open ? \"open\" : \"closed\"}\n      onClick={() => setOpen(false)}\n      className={cn(ALERT_DIALOG_OVERLAY, className)}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport interface AlertDialogContentProps extends React.ComponentProps<\"div\"> {}\n\nexport function AlertDialogContent({ className, children, ...props }: AlertDialogContentProps) {\n  const { open, setOpen, triggerRef } = useAlertDialog();\n  const { isPresent, ref: presRef } = usePresence(open);\n  const focusRef = useFocusScope(open);\n  const dismissRef = useDismissableLayer({\n    enabled: open,\n    onDismiss: () => setOpen(false),\n    exclude: [triggerRef],\n  });\n  if (!isPresent) return null;\n  return (\n    <Portal>\n      <AlertDialogOverlay />\n      <div\n        data-slot=\"alert-dialog-content\"\n        role=\"alertdialog\"\n        aria-modal=\"true\"\n        data-state={open ? \"open\" : \"closed\"}\n        ref={mergeRefs(focusRef, dismissRef, presRef as React.Ref<HTMLDivElement>)}\n        className={cn(ALERT_DIALOG_CONTENT, className)}\n        {...(props as Record<string, unknown>)}\n      >\n        {children}\n      </div>\n    </Portal>\n  );\n}\n\nexport function AlertDialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(ALERT_DIALOG_HEADER, className)}\n      {...props}\n    />\n  );\n}\n\nexport function AlertDialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(ALERT_DIALOG_FOOTER, className)}\n      {...props}\n    />\n  );\n}\n\nexport function AlertDialogTitle({ className, ...props }: React.ComponentProps<\"h2\">) {\n  return (\n    <h2\n      data-slot=\"alert-dialog-title\"\n      className={cn(ALERT_DIALOG_TITLE, className)}\n      {...props}\n    />\n  );\n}\n\nexport function AlertDialogDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"alert-dialog-description\"\n      className={cn(ALERT_DIALOG_DESCRIPTION, className)}\n      {...props}\n    />\n  );\n}\n\nexport interface AlertDialogActionProps extends React.ComponentProps<\"button\"> {}\n\nexport function AlertDialogAction({ className, onClick, ...props }: AlertDialogActionProps) {\n  const { setOpen } = useAlertDialog();\n  return (\n    <button\n      data-slot=\"alert-dialog-action\"\n      className={cn(buttonVariants(), className)}\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(e);\n        setOpen(false);\n      }}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport interface AlertDialogCancelProps extends React.ComponentProps<\"button\"> {}\n\nexport function AlertDialogCancel({ className, onClick, ...props }: AlertDialogCancelProps) {\n  const { setOpen } = useAlertDialog();\n  return (\n    <button\n      data-slot=\"alert-dialog-cancel\"\n      className={cn(buttonVariants({ variant: \"outline\" }), className)}\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(e);\n        setOpen(false);\n      }}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/alert-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { buttonVariants } from \"./button\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\nimport { DismissableLayerScope, useDismissableLayer } from \"../primitives/dismissable-layer\";\nimport { useFocusScope } from \"../primitives/focus-scope\";\nimport { usePresence } from \"../primitives/presence\";\nimport { mergeRefs } from \"../primitives/merge-refs\";\nimport { Portal } from \"../primitives/portal\";\nimport { Slot } from \"../primitives/slot\";\nimport {\n  ALERT_DIALOG_CONTENT,\n  ALERT_DIALOG_DESCRIPTION,\n  ALERT_DIALOG_FOOTER,\n  ALERT_DIALOG_HEADER,\n  ALERT_DIALOG_OVERLAY,\n  ALERT_DIALOG_TITLE,\n} from \"../generated/alert-dialog\";\n\ninterface AlertDialogContextValue {\n  open: boolean;\n  setOpen: (next: boolean) => void;\n  triggerRef: React.RefObject<HTMLElement | null>;\n}\n\nconst AlertDialogContext = React.createContext<AlertDialogContextValue | null>(null);\n\nfunction useAlertDialog(): AlertDialogContextValue {\n  const ctx = React.useContext(AlertDialogContext);\n  if (!ctx) throw new Error(\"AlertDialog parts must be used within <AlertDialog>\");\n  return ctx;\n}\n\nexport interface AlertDialogProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children?: React.ReactNode;\n}\n\nexport function AlertDialog({ open, defaultOpen = false, onOpenChange, children }: AlertDialogProps) {\n  const [isOpen, setOpen] = useControllableState<boolean>({\n    ...(open !== undefined ? { value: open } : {}),\n    defaultValue: defaultOpen,\n    ...(onOpenChange ? { onChange: onOpenChange } : {}),\n  });\n  const triggerRef = React.useRef<HTMLElement | null>(null);\n  return (\n    <AlertDialogContext.Provider value={{ open: isOpen, setOpen, triggerRef }}>\n      {children}\n    </AlertDialogContext.Provider>\n  );\n}\n\nexport interface AlertDialogTriggerProps extends React.ComponentProps<\"button\"> {\n  asChild?: boolean;\n}\n\nexport function AlertDialogTrigger({ asChild = false, onClick, ...props }: AlertDialogTriggerProps) {\n  const { open, setOpen, triggerRef } = useAlertDialog();\n  const Comp = asChild ? Slot : \"button\";\n  return (\n    <Comp\n      data-slot=\"alert-dialog-trigger\"\n      aria-expanded={open}\n      ref={triggerRef as React.Ref<HTMLButtonElement>}\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(e);\n        setOpen(true);\n      }}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport interface AlertDialogOverlayProps extends React.ComponentProps<\"div\"> {}\n\nexport function AlertDialogOverlay({ className, ...props }: AlertDialogOverlayProps) {\n  const { open, setOpen } = useAlertDialog();\n  return (\n    <div\n      data-slot=\"alert-dialog-overlay\"\n      data-state={open ? \"open\" : \"closed\"}\n      onClick={() => setOpen(false)}\n      className={cn(ALERT_DIALOG_OVERLAY, className)}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport interface AlertDialogContentProps extends React.ComponentProps<\"div\"> {}\n\nexport function AlertDialogContent({ className, children, ...props }: AlertDialogContentProps) {\n  const { open, setOpen, triggerRef } = useAlertDialog();\n  const { isPresent, ref: presRef } = usePresence(open);\n  const focusRef = useFocusScope(open, { returnFocusTo: triggerRef });\n  const dismissRef = useDismissableLayer({\n    enabled: open,\n    onDismiss: () => setOpen(false),\n    exclude: [triggerRef],\n    modal: true,\n  });\n  if (!isPresent) return null;\n  return (\n    <Portal>\n      <AlertDialogOverlay />\n      <div\n        data-slot=\"alert-dialog-content\"\n        role=\"alertdialog\"\n        aria-modal=\"true\"\n        data-state={open ? \"open\" : \"closed\"}\n        ref={mergeRefs(focusRef, dismissRef, presRef as React.Ref<HTMLDivElement>)}\n        className={cn(ALERT_DIALOG_CONTENT, className)}\n        {...(props as Record<string, unknown>)}\n      >\n        <DismissableLayerScope layer={dismissRef}>{children}</DismissableLayerScope>\n      </div>\n    </Portal>\n  );\n}\n\nexport function AlertDialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(ALERT_DIALOG_HEADER, className)}\n      {...props}\n    />\n  );\n}\n\nexport function AlertDialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(ALERT_DIALOG_FOOTER, className)}\n      {...props}\n    />\n  );\n}\n\nexport function AlertDialogTitle({ className, ...props }: React.ComponentProps<\"h2\">) {\n  return (\n    <h2\n      data-slot=\"alert-dialog-title\"\n      className={cn(ALERT_DIALOG_TITLE, className)}\n      {...props}\n    />\n  );\n}\n\nexport function AlertDialogDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"alert-dialog-description\"\n      className={cn(ALERT_DIALOG_DESCRIPTION, className)}\n      {...props}\n    />\n  );\n}\n\nexport interface AlertDialogActionProps extends React.ComponentProps<\"button\"> {}\n\nexport function AlertDialogAction({ className, onClick, ...props }: AlertDialogActionProps) {\n  const { setOpen } = useAlertDialog();\n  return (\n    <button\n      data-slot=\"alert-dialog-action\"\n      className={cn(buttonVariants(), className)}\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(e);\n        setOpen(false);\n      }}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport interface AlertDialogCancelProps extends React.ComponentProps<\"button\"> {}\n\nexport function AlertDialogCancel({ className, onClick, ...props }: AlertDialogCancelProps) {\n  const { setOpen } = useAlertDialog();\n  return (\n    <button\n      data-slot=\"alert-dialog-cancel\"\n      className={cn(buttonVariants({ variant: \"outline\" }), className)}\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(e);\n        setOpen(false);\n      }}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/app-shell.js

@@ -5,12 +5,14 @@ const AT = {
   md: {
     rail: "hidden md:flex",
     tabBar: "md:hidden",
+    topBar: "hidden md:block",
     reserve: "pb-[calc(var(--shell-tab-bar-h)+env(safe-area-inset-bottom,0px))] md:pb-0",
     banner: "md:px-8"
   },
   lg: {
     rail: "hidden lg:flex",
     tabBar: "lg:hidden",
+    topBar: "hidden lg:block",
     reserve: "pb-[calc(var(--shell-tab-bar-h)+env(safe-area-inset-bottom,0px))] lg:pb-0",
     banner: "lg:px-8"
   }
@@ -19,6 +21,7 @@ const present = (node) => node !== null && node !== void 0 && node !== false;
 function AppShell({
   rail,
   tabBar,
+  topBar,
   banner,
   breakpoint = "lg",
   mainProps,
@@ -55,6 +58,14 @@ function AppShell({
             "data-slot": "app-shell-content",
             className: cn("flex min-w-0 flex-1 flex-col", present(tabBar) && at.reserve),
             children: [
+              present(topBar) && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-slot": "app-shell-top-bar",
+                  className: cn("sticky top-[var(--ev-shell-offset,0px)] z-30", at.topBar),
+                  children: topBar
+                }
+              ),
               present(banner) && /* @__PURE__ */ jsx(
                 "div",
                 {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/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  /** Strips above the page (`SystemBanner`s). An empty slot takes no room. */\n  banner?: 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    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    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 banners and the\n * 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  banner,\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(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(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":"AAqEQ,cAUF,YAVE;AArER,YAAY,WAAW;AACvB,SAAS,UAAU;AAmBnB,MAAM,KAAK;AAAA,EACT,IAAI;AAAA,IACF,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EACA,IAAI;AAAA,IACF,MAAM;AAAA,IACN,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;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,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,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":[]}
+{"version":3,"sources":["../../src/components/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  /** 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  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(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":"AA0EQ,cAUF,YAVE;AA1ER,YAAY,WAAW;AACvB,SAAS,UAAU;AAqBnB,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;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,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":[]}