@evinvest/uikit 0.23.0 → 0.25.0

package/README.md

@@ -64,7 +64,8 @@ your Tailwind v4 entrypoint — this is the load-bearing part of the kit:
 | 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) |
-| scalars | `radius` `control-radius` `control-py` `display-scale` `band-py` `page-max` `page-px` `shadow-*` `font-*` |
+| 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` |
 
 Custom properties inherit, so a scope class on a `<section>` re-themes its
@@ -310,6 +311,133 @@ and so does the fill, on every palette and polarity `test/tokens.test.ts`
 measures. Controls that sit on the surface (`outline`, `ghost`, inputs) keep
 the `ring` border plus its halo.
 
+## App shell
+
+The frame a signed-in app sits in — a rail beside the page on a wide screen, a
+tab bar under it on a phone, one page inset and title scale, and the motion
+between screens. It knows nothing about routes, roles or data: the nav is a
+list you build, visibility is a list you filter, and the router comes in as two
+props. TS-only (see [Limitations](#limitations)).
+
+```tsx
+// app/(app)/layout.tsx — the layout stays a Server Component; the nav is a client leaf
+import { AppShell } from "@evinvest/uikit";
+import { Nav, Tabs } from "./nav";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <AppShell rail={<Nav />} tabBar={<Tabs />} banner={<Banners />}>
+      {children}
+    </AppShell>
+  );
+}
+```
+
+```tsx
+// app/(app)/nav.tsx
+"use client";
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import { ShellNav, BottomTabBar, type NavGroup, type NavItem } from "@evinvest/uikit";
+
+const GROUPS: NavGroup[] = [
+  { id: "main", label: "Your account", items: [
+    { id: "home", href: "/", label: "Home", icon: Home },
+    { id: "invest", href: "/invest", label: "Invest", icon: LineChart, match: "exact" },
+  ] },
+];
+const FOOTER: NavGroup[] = [
+  { id: "me", items: [{ id: "inbox", href: "/notifications", label: "Notifications", icon: Bell, badge: unread }] },
+];
+
+export function Nav() {
+  const router = useRouter();
+  return (
+    <ShellNav
+      groups={GROUPS}
+      footerGroups={FOOTER}
+      pathname={usePathname()}
+      linkComponent={Link}
+      onItemIntent={(item) => router.prefetch(item.href)}
+      header={<Logo />}
+      labels={{ primary: t("nav.main"), footer: t("nav.account"), badge: (n) => t("nav.unread", { n }) }}
+    />
+  );
+}
+```
+
+- **`AppShell`** — slots `rail`, `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.
+  `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.
+  `match` is `"prefix"` (default, on a segment boundary; `/` is exact),
+  `"exact"`, or `(path) => boolean`; `also` lists more paths the item claims
+  (the one tab standing in for Profile, Notifications and Settings). When
+  several items claim a path, **one** wins — an exact hit, else the longest
+  prefix, else the first — so overlapping items never light two rows.
+  `resolveActiveNavItem` / `isNavItemActive` are exported for your own chrome.
+  `badge: number` draws a `NavBadge`; any other node is drawn as given.
+  `trailing` may be a function of `{ active, pending }`. `external` renders a
+  plain `<a>` that is never current.
+- **`ShellNav`** — `groups` + `footerGroups` (pinned to the bottom), `header` /
+  `footer` slots, `pathname` + `linkComponent`, `onItemIntent(item)` (hover /
+  focus — prefetch there), `onNavigate(item)`, `renderItem(item, state)` to
+  replace a row's content (the link, `aria-current` and the marker stay the
+  kit's), `labels` `{ primary, footer, badge(n) }`. A plain left click marks
+  the row at once (`data-pending`) and the pathname catches up; a modified or
+  middle click does not. One marker per group slides between rows on a CSS
+  `transform` transition — it is placed by measurement, so until hydration the
+  marked row carries the fill itself.
+- **`BottomTabBar`** — `items` (five fit a phone), the same router props,
+  callbacks and optimistic mark, `labels` `{ nav, badge(n) }`. One rule slides by
+  whole tab widths and fades on a route no tab claims; a numeric `badge` sits
+  on the icon's corner.
+- **`NavBadge`** `{ count, max = 99, label(n), variant: "pill" | "corner",
+  active }` shows `99+` and speaks the real count; **`NavDot`** `{ tone, label?,
+  corner? }` is a presence dot.
+- **`MobileAppBar`** `{ title, back?: { href } | { onClick }, right?,
+  linkComponent?, hideFrom = "lg", labels: { back } }` — sticky under
+  `--ev-shell-offset`; with `back` the title centres.
+- **`PageFrame`** `{ title?, description?, eyebrow?, actions?, appBar?,
+  width: "full" | "content", breakpoint }`, with **`PageHeading`** and
+  **`SectionLabel`** (`tone: "muted" | "accent"`). With an `appBar` the heading
+  is the wide screen's only. Server-safe.
+- **`SectionNav`** `{ groups: { id, label?, description?, items }[], value,
+  onValueChange?, linkComponent?, labels: { nav } }` — a page's own section
+  rail (settings panes); items are buttons, or links when they have an `href`.
+- **`ResourceError`** `{ message, variant: "inline" (onRetry?, retrying?) |
+  "alert" (title?), labels: { retry } }` and **`SystemBanner`** `{ tone: "warn" |
+  "info", title?, icon?, onDismiss?, labels: { dismiss } }` — presentation
+  only; what failed and whether a dismissal sticks are yours.
+- **`Settled`** `{ loading, skeleton, children }` — the skeleton → content
+  handover: the content fades and rises in after a skeleton was shown, and cuts
+  in when the data was there from the start.
+
+Every string the kit renders or speaks is a `labels` entry with an English
+default.
+
+### Motion without a motion library
+
+The shell's motion is CSS in `tokens.css` (from `motion.css`), keyed on data
+attributes, so a Server Component gets it and no client JS runs for it. Every
+rule has a `prefers-reduced-motion` form (fades stay, travel goes).
+
+| attribute | what moves |
+|---|---|
+| `data-enter="rise"` | the element fades in and rises `--ev-rise` once; `--enter-delay` postpones it |
+| `data-enter="stagger"` | each direct child does the same, `--enter-step` (default `--ev-stagger`) apart; override a child's slot with `--enter-index` |
+| `[data-slot="settled"][data-state="revealed"]` | `Settled`'s handover |
+| `[data-slot="skeleton"]` | every `Skeleton` fades in before it pulses (`animate-none` turns both off) |
+
+The timing is tokens on every theme root, for your own transitions too
+(`ease-(--ev-ease-out) duration-(--ev-dur-base)`): `--ev-ease-out`,
+`--ev-ease-in-out`, `--ev-dur-fast` / `-base` / `-slow` (180 / 280 / 400ms),
+`--ev-rise` (8px), `--ev-stagger` (35ms), `--ev-stagger-section` (50ms). The
+shell's geometry is `--shell-rail-w` (248px) and `--shell-tab-bar-h` (64px).
+
 ## Usage
 
 ```tsx
@@ -356,7 +484,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 63 bricks)
+### Component inventory (all 73 bricks)
 
 - **Tier A — static (23):** badge, button, button-group, card, input, textarea,
   label, field, separator, skeleton, spinner, kbd, table, container, alert,
@@ -375,6 +503,10 @@ 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` /
+  `PageHeading` / `SectionLabel`), section-nav, resource-error, system-banner,
+  settled — see [App shell](#app-shell).
 - **Features — composed screens (1):** terminal — a trading terminal over an
   investment product's shares (`Terminal` grid placing each `TerminalPane` by
   `TerminalArea`; `TerminalTicker` / `TickerStat`; `OrderBook` with
@@ -388,6 +520,10 @@ landing (TS) sources — e.g. `Badge` keeps cabinet's `success` variant, and
 `Button` keeps landing's square icon shape at every size, as the separate `icon`
 boolean it always was in Rust (see [docs/spec/variants.md](../../docs/spec/variants.md)).
 
+`size="touch"` is the 44 px pointer-target floor (WCAG 2.5.5) for touch-first
+screens: `min-h-11` with `lg`'s padding, and a 44 × 44 square with `icon`. It is
+a button step only — `Input` and `SelectTrigger` already clear it at `lg`.
+
 ## Limitations
 
 Reproducing everything dep-light means some behaviour is intentionally reduced,
@@ -468,8 +604,19 @@ measuring needs host-only `web-sys`). Known gaps:
   lock-up are the caller's, and each column renders only when it has content.
   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 and
-  `SelectValue` labels.
+- **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` /
+  `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
+  `data-enter` contract today.
+- **app shell:** `ShellNav`'s marker is measured (one forced layout read per
+  navigation); the tab bar's rule is arithmetic and assumes equal tabs. A
+  `data-enter` nested inside another still entering composes both rises (the
+  cabinet's motion-library version flattens the inner one); the kit leaves
+  nesting to the caller. `linkComponent` is typed loosely (`ElementType`), as
+  on `Footer`, so a router with typed hrefs does not fight it.
 - **brand chrome (header / footer / status pages):** TS routes links through an
   optional `linkComponent` (e.g. `next/link`) for soft navigation; Rust renders
   plain `<a>` (a full document load). The Dioxus header drives its scroll state,

package/dist/components/app-shell.js

@@ -0,0 +1,85 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+const AT = {
+  md: {
+    rail: "hidden md:flex",
+    tabBar: "md:hidden",
+    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",
+    reserve: "pb-[calc(var(--shell-tab-bar-h)+env(safe-area-inset-bottom,0px))] lg:pb-0",
+    banner: "lg:px-8"
+  }
+};
+const present = (node) => node !== null && node !== void 0 && node !== false;
+function AppShell({
+  rail,
+  tabBar,
+  banner,
+  breakpoint = "lg",
+  mainProps,
+  className,
+  children,
+  ...props
+}) {
+  const at = AT[breakpoint];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "app-shell",
+      "data-breakpoint": breakpoint,
+      className: cn(
+        "flex min-h-[calc(100dvh-var(--ev-shell-offset,0px))] bg-background",
+        className
+      ),
+      ...props,
+      children: [
+        present(rail) && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "app-shell-rail",
+            className: cn(
+              "sticky top-[var(--ev-shell-offset,0px)] h-[calc(100dvh-var(--ev-shell-offset,0px))] shrink-0 self-start",
+              at.rail
+            ),
+            children: rail
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "app-shell-content",
+            className: cn("flex min-w-0 flex-1 flex-col", present(tabBar) && at.reserve),
+            children: [
+              present(banner) && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-slot": "app-shell-banner",
+                  className: cn("flex flex-col gap-2 px-4 pt-4 empty:hidden", at.banner),
+                  children: banner
+                }
+              ),
+              /* @__PURE__ */ jsx("main", { ...mainProps, className: cn("min-w-0 flex-1", mainProps?.className), children })
+            ]
+          }
+        ),
+        present(tabBar) && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "app-shell-tab-bar",
+            className: cn("fixed inset-x-0 bottom-0 z-40", at.tabBar),
+            children: tabBar
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  AppShell
+};
+//# sourceMappingURL=app-shell.js.map

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

@@ -0,0 +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":[]}

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

@@ -0,0 +1,91 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+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";
+import { usePendingNavigation } from "./use-shell-nav.js";
+function BottomTabBar({
+  items,
+  pathname,
+  linkComponent,
+  onItemIntent,
+  onNavigate,
+  labels = {},
+  className,
+  ...props
+}) {
+  const [pendingId, markPending] = usePendingNavigation(pathname);
+  const currentId = (pendingId !== null && items.some((i) => i.id === pendingId) ? pendingId : void 0) ?? resolveActiveNavItem(items, pathname)?.id;
+  const at = items.findIndex((i) => i.id === currentId);
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      "data-slot": "tab-bar",
+      "aria-label": labels.nav ?? "Main",
+      className: cn(
+        "relative box-content flex h-(--shell-tab-bar-h) items-center border-t border-border bg-secondary px-2 pb-[env(safe-area-inset-bottom,0px)]",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "tab-bar-marker",
+            "data-state": at >= 0 ? "active" : "idle",
+            "aria-hidden": true,
+            className: "pointer-events-none absolute left-2 top-0 flex justify-center",
+            style: {
+              width: `calc((100% - 1rem) / ${Math.max(items.length, 1)})`,
+              translate: `${Math.max(at, 0) * 100}% 0`
+            },
+            children: /* @__PURE__ */ jsx("span", { className: "h-0.5 w-10 rounded-full bg-primary-ink" })
+          }
+        ),
+        items.map((item) => {
+          const Icon = item.icon;
+          const active = item.id === currentId;
+          return /* @__PURE__ */ jsxs(
+            NavLink,
+            {
+              item,
+              current: active,
+              pending: item.id === pendingId,
+              linkComponent,
+              markPending,
+              onItemIntent,
+              onNavigate,
+              className: cn(
+                "flex min-w-0 flex-1 flex-col items-center justify-center gap-0.5 rounded-lg py-1 font-medium transition-colors",
+                "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-secondary",
+                active ? "text-primary-ink" : "text-ink-soft hover:text-ink",
+                item.disabled && "cursor-not-allowed opacity-50"
+              ),
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: "relative shrink-0", children: [
+                  Icon ? /* @__PURE__ */ jsx(Icon, { className: "size-5" }) : /* @__PURE__ */ jsx("span", { className: "block size-5" }),
+                  typeof item.badge === "number" ? /* @__PURE__ */ jsx(
+                    NavBadge,
+                    {
+                      count: item.badge,
+                      variant: "corner",
+                      ...labels.badge ? { label: labels.badge } : {}
+                    }
+                  ) : item.badge
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "w-full truncate text-center text-xs", title: labelTitle(item.label), children: item.label })
+              ]
+            },
+            item.id
+          );
+        })
+      ]
+    }
+  );
+}
+export {
+  BottomTabBar
+};
+//# sourceMappingURL=bottom-tab-bar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/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/mobile-app-bar.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { ChevronLeftIcon } from "./shell-icons.js";
+const BACK = "-ml-1 flex size-6 shrink-0 items-center justify-center rounded-md text-ink outline-none focus-visible:ring-2 focus-visible:ring-ring";
+const HIDE_FROM = { md: "md:hidden", lg: "lg:hidden" };
+function MobileAppBar({
+  title,
+  back,
+  right,
+  linkComponent,
+  hideFrom = "lg",
+  labels = {},
+  className,
+  ...props
+}) {
+  const backLabel = labels.back ?? "Back";
+  const Link = linkComponent ?? "a";
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      "data-slot": "mobile-app-bar",
+      "data-enter": "rise",
+      className: cn(
+        "sticky top-[var(--ev-shell-offset,0px)] z-30 flex items-center gap-2 border-b border-border bg-secondary px-4 pb-3.5 pt-4",
+        hideFrom && HIDE_FROM[hideFrom],
+        className
+      ),
+      ...props,
+      children: [
+        back && ("href" in back ? /* @__PURE__ */ jsx(Link, { href: back.href, "aria-label": backLabel, className: BACK, children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-6" }) }) : /* @__PURE__ */ jsx("button", { type: "button", onClick: back.onClick, "aria-label": backLabel, className: BACK, children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-6" }) })),
+        /* @__PURE__ */ jsx(
+          "h1",
+          {
+            className: cn(
+              "min-w-0 flex-1 truncate font-semibold text-ink",
+              back ? "text-center text-base" : "text-lg"
+            ),
+            children: title
+          }
+        ),
+        back && right === void 0 ? /* @__PURE__ */ jsx("span", { className: "size-6 shrink-0", "aria-hidden": true }) : right
+      ]
+    }
+  );
+}
+export {
+  MobileAppBar
+};
+//# sourceMappingURL=mobile-app-bar.js.map

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

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

package/dist/components/nav-badge.js

@@ -0,0 +1,61 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+const PILL = "rounded-full px-2 py-0.5 text-xs font-semibold tabular-nums";
+const CORNER = "absolute -right-2.5 -top-1.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-primary px-1 text-xs font-semibold leading-none tabular-nums text-on-primary";
+const defaultLabel = (n) => `${n} new`;
+function NavBadge({
+  count,
+  max = 99,
+  label = defaultLabel,
+  variant = "pill",
+  active = false,
+  className,
+  ...props
+}) {
+  if (!(count > 0)) return null;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-slot": "nav-badge",
+      "data-variant": variant,
+      className: cn(
+        variant === "corner" ? CORNER : cn(PILL, active ? "bg-background text-ink" : "bg-primary-ink/15 text-primary-ink"),
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: count > max ? `${max}+` : count }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: label(count) })
+      ]
+    }
+  );
+}
+const DOT_TONE = {
+  primary: "bg-primary-ink",
+  positive: "bg-positive",
+  warn: "bg-accent-warn",
+  error: "bg-accent-error"
+};
+function NavDot({ tone = "primary", label, corner = false, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "nav-dot",
+      "aria-hidden": label === void 0 ? true : void 0,
+      className: cn(
+        "inline-block size-2 shrink-0 rounded-full",
+        DOT_TONE[tone],
+        corner && "absolute -right-1 -top-0.5",
+        className
+      ),
+      ...props,
+      children: label !== void 0 && /* @__PURE__ */ jsx("span", { className: "sr-only", children: label })
+    }
+  );
+}
+export {
+  NavBadge,
+  NavDot
+};
+//# sourceMappingURL=nav-badge.js.map

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

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

package/dist/components/nav-link.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { anchorTargetProps, isPlainLeftClick } from "./nav-model.js";
+function NavLink({
+  item,
+  current,
+  pending,
+  linkComponent,
+  markPending,
+  onItemIntent,
+  onNavigate,
+  className,
+  title,
+  children
+}) {
+  if (item.disabled) {
+    return /* @__PURE__ */ jsx("span", { "data-slot": "nav-link", "aria-disabled": "true", title, className, children });
+  }
+  const Comp = item.external ? "a" : linkComponent ?? "a";
+  const intent = onItemIntent && (() => onItemIntent(item));
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "nav-link",
+      "data-pending": pending ? "true" : void 0,
+      href: item.href,
+      title,
+      "aria-current": current ? "page" : void 0,
+      className,
+      onPointerEnter: intent,
+      onFocus: intent,
+      onClick: (e) => {
+        if (item.external || !isPlainLeftClick(e)) return;
+        markPending(item.id);
+        onNavigate?.(item);
+      },
+      ...anchorTargetProps(item),
+      children
+    }
+  );
+}
+function labelTitle(label) {
+  return typeof label === "string" ? label : void 0;
+}
+export {
+  NavLink,
+  labelTitle
+};
+//# sourceMappingURL=nav-link.js.map

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

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

package/dist/components/nav-model.js

@@ -0,0 +1,55 @@
+function pathOf(href) {
+  const cut = href.search(/[?#]/);
+  const path = cut === -1 ? href : href.slice(0, cut);
+  return path.length > 1 && path.endsWith("/") ? path.slice(0, -1) : path;
+}
+function underPrefix(pathname, prefix) {
+  if (prefix === "/") return pathname === "/";
+  return pathname === prefix || pathname.startsWith(`${prefix}/`);
+}
+const EXACT = Number.MAX_SAFE_INTEGER;
+function navItemMatch(item, pathname) {
+  if (item.external || item.disabled) return null;
+  const path = pathOf(pathname);
+  const own = pathOf(item.href);
+  const match = item.match ?? "prefix";
+  let score = null;
+  if (typeof match === "function") score = match(path) ? own.length : null;
+  else if (path === own) score = EXACT;
+  else if (match === "prefix" && underPrefix(path, own)) score = own.length;
+  for (const extra of item.also ?? []) {
+    const p = pathOf(extra);
+    if (underPrefix(path, p) && (score === null || p.length > score)) score = p.length;
+  }
+  return score;
+}
+function isNavItemActive(item, pathname) {
+  return navItemMatch(item, pathname) !== null;
+}
+function resolveActiveNavItem(items, pathname) {
+  let best;
+  let bestScore = -1;
+  for (const item of items) {
+    const score = navItemMatch(item, pathname);
+    if (score !== null && score > bestScore) {
+      best = item;
+      bestScore = score;
+    }
+  }
+  return best;
+}
+function isPlainLeftClick(e) {
+  return !(e.defaultPrevented || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0);
+}
+function anchorTargetProps(item) {
+  if (item.target === void 0) return {};
+  return item.target === "_blank" ? { target: item.target, rel: "noopener noreferrer" } : { target: item.target };
+}
+export {
+  anchorTargetProps,
+  isNavItemActive,
+  isPlainLeftClick,
+  navItemMatch,
+  resolveActiveNavItem
+};
+//# sourceMappingURL=nav-model.js.map