@boost33/ui 0.7.1 → 0.8.0-next.0

package/CHANGELOG.md

@@ -31,6 +31,189 @@ Three components are built to Stage A on main and are not releasable until
 each passes its fidelity gate. Their entries wait here for the release that
 ships them.
 
+### Changed — the shell redesign, part 1 of 3: the sidebar and the app switcher (B33-1711)
+
+The 3 Nov 2026 navigation redesign (B33-1710; Paper file Boost Products, page
+101 Hub, row V0.7, boards 20 and 21). **This changes how every consumer's
+sidebar and switcher look, and every gated screenshot of them.** No new
+baseline has been captured: the person approving the redesign captures them
+(CLAUDE.md). Parts 2 and 3 (B33-1712, B33-1713) land in the same release.
+
+What a consumer sees, and what it has to do:
+
+- **`AppShell` takes `appName`.** The product's name, drawn as plain text at
+  the top of the sidebar with no icon. Optional: omit it and nothing draws
+  there. Pass your product's display name, in your language. It names no
+  landmark (`label` still does that).
+- **`AppSwitcher` no longer draws products that do not exist yet.** A row with
+  `live: false` is left out, unless it is the current product. Keep passing the
+  registry whole -- do not filter it yourself. A product the account does not
+  hold (`entitled: false`) is still drawn, with its "Not on plan" tag: hiding it
+  would tell a client their product does not exist. This overrules the
+  Vocabulary document's "the switcher shows every product regardless of state",
+  which is amended to match.
+- **The "Soon" tag is gone with them.** `labels.soon` stays in the type and is
+  ignored, so a labels object that sets it still compiles. Drop it when
+  convenient.
+- **The switcher's account row is gone.** `account` is now optional and
+  ignored, and `AppSwitcherAccount` is deprecated. The organisation moves to the
+  top bar in part 2. Nothing breaks if you keep passing it; stop when
+  convenient. Its `onSelect` is never called.
+- **New, optional, per product row:** `group` (a section header, e.g. "Your
+  tools" -- rows are grouped in the order served; no groups means one plain
+  list) and `trailing` (`{ kind: 'value', value: '8,940' }` or
+  `{ kind: 'dot', label: '2 new' }` -- the dot's `label` is what a screen reader
+  hears). Both are data you are served; the switcher fetches nothing.
+- **The switcher is redrawn to board 21.** A 32px tinted trigger with no border
+  and the product name in the display face; a 360px borderless panel; a dark
+  Hub row with a chevron; 28px product tiles; the current row semibold on a
+  muted ground. The product marks are unchanged (the set approved 29 Oct 2026).
+- **Nav rows:** the active label is regular weight now, not semibold (the white
+  row and full-ink colour carry "you are here"). Counts are 12px medium and
+  right-aligned. `countUrgent` draws a filled pill instead of orange text --
+  white on `--color-orange-600`, 5.18:1, because the old orange text was 3.45:1
+  on the sidebar and failed AA. New `dot` on `NavItem` and `AppShellNavItem`: a
+  7px attention dot, its string read by a screen reader.
+- **Section labels** track at 0.09em (`--tracking-wider`), up from 0.05em.
+- **Three new component-private tokens** (in `style.css`, no Tailwind
+  utility): `--container-app-switcher` (360px), `--spacing-2_75` (11px),
+  `--spacing-1_75` (7px).
+
+The 56px rail keeps working, icon-only. The redesign draws no rail, so it gets
+no new design.
+
+Repo-only: the specimen's unarmed-switcher route is removed (the row it showed
+is gone), and a new "Shell redesign — B33-1710" route at the bottom of the
+specimen assembles boards 20 and 21 for review.
+
+### Changed — the shell redesign, part 3 of 3: the sidebar action, and every button on three tiers (B33-1713)
+
+Board 20 of the same redesign, and the consolidation its review asked for.
+**Every button the package draws changes look**; no new baseline has been
+captured (the person approving the redesign captures them).
+
+What a consumer sees, and what it has to do:
+
+- **New `AppShell.action`** (`AppShellAction`: `label`, optional `icon`, and
+  `href` or `onClick`): your product's main action, drawn at the foot of the
+  sidebar directly above the footer's divider -- board 20's "New scan". Near-black,
+  full width, 40px. Not drawn with neither `href` nor `onClick`. On the rail it
+  shows its icon alone, its label kept as its accessible name, and is not drawn
+  if it has no icon. If you drew your own action button elsewhere in the shell,
+  pass it here instead.
+- **The footer sits under a hairline when there is an action**, 10px above its
+  rows, and its rows are 2px apart (the nav's own pitch), down from 16px.
+- **Three button tiers, written down in ADR-0016:** primary (filled, 40px, ink or
+  accent), outlined (32px, white, 1px edge) and quiet (a word, no box). Every
+  package button now takes one.
+- **`WalletChip`'s "Top up" is no longer orange text.** At rest it is the quiet
+  tier in full ink; past the threshold it is the primary tier in the accent tone.
+  The orange text was 3.69:1 on white and failed AA at 12px.
+- **The accent tone is `--color-orange-600`**, not the brand orange: white on the
+  brand orange is 3.69:1. "Buy tokens" and the grown "Top up" both use it.
+  Decided by Jamal on 4 Nov 2026.
+- **`NotificationCenter`'s "Mark all as read" and "View all"** are the quiet tier.
+  The component is still Stage A and not releasable.
+- **If you pass `action`, add 67px to `consumerSlotsPx`** when you call
+  `navBudgetForViewport` yourself: the 40px button, 16px clear above it, and the
+  hairline and 10px the footer then takes. The development warning measures the
+  real column and needs nothing.
+
+Not done here, and why: board 20's Settings row carries an external-link arrow,
+which no ticket in Wave 4 asks for and `NavItem` has no slot for. It wants its
+own ticket.
+
+Repo-only: `src/buttons.module.css` holds the tiers. The "Shell redesign —
+B33-1710" specimen route's shell gains "New scan" and a Settings / Help footer.
+
+### Changed — the shell redesign, part 2 of 3: the top bar, the token chip, the bell (B33-1712)
+
+Boards 20, 21 and 22 of the same redesign. **This is a breaking layout change
+for every consumer of `AppShell`: the switcher and the wallet chip move out of
+the sidebar into the top bar, and the breadcrumb is no longer drawn.** Every
+gated screenshot of the shell, the top bar and the sidebar changes; no new
+baseline has been captured (the person approving the redesign captures them).
+
+What a consumer sees, and what it has to do:
+
+- **The top bar has three regions.** Left: the Boost33 mark (linked home
+  through `hubHref`, as the sidebar wordmark was) and the new `org` slot.
+  Centre: "Switch Tools →" then the switcher, "Check Your Tokens →" then the
+  token chip. Right: `topBar.actions` -- pass `NotificationButton` and your
+  avatar there.
+- **`AppShell.switcher` and `AppShell.wallet` keep their names and move.**
+  Both now render in the top bar's centre group, not the sidebar. Each label is
+  drawn only when its control is passed. Pass `WalletChip` with
+  `placement="topbar"` in `wallet`; the sidebar card is not designed for the
+  bar.
+- **The sidebar no longer draws the wordmark, the switcher or the wallet
+  chip.** It holds `appName`, the nav and `footer`, with 16px top and bottom
+  padding of its own.
+- **New `AppShell.org`**: a slot for your organisation pill, beside the mark.
+  The package draws no organisation menu (that is AccountMenu, B33-493, which
+  has not passed its gate).
+- **`topBar` is optional, and `topBar.breadcrumb` is deprecated and not
+  drawn.** It still compiles; stop passing it. `PageHeader` names the page.
+  **If you put `SidebarToggle` in `topBar.breadcrumb` (the Wallet does), move it
+  to the new `topBar.sidebarToggle` slot, or your rail loses its toggle.** The
+  screenshot gate does not catch this: the bar passed its baseline at 0.19%
+  with the toggle gone.
+- **New `topBar.sidebarToggle`** (and `TopBar.sidebarToggle`): your rail
+  toggle, drawn at the far left of the bar before the mark. No board draws it;
+  judged at the gate.
+  `topBar.labels` (`TopBarLabels`, `defaultTopBarLabels`) translates the two
+  centre labels.
+- **No search, and no `⌘K`.** Search was removed from the top bar on 3 Nov
+  2026 until it is built, and nothing replaces it. `CommandPalette` stays in the
+  package, Stage A and unreleasable, with no trigger in the shell.
+- **New `WalletChip placement="topbar"`**: a 32px pill drawn like the
+  switcher -- the balance in the mono face, a 44 x 6 two-segment bar, a
+  chevron -- that opens a 340px popover with the balance, the bar at width,
+  granted and purchased with what each means, your `burnNote`, an "Open" link
+  (`walletHref`, `linkComponent`) and a "Buy tokens" button (`onTopUp`). A zero
+  segment is drawn at 0px with the 2px gap kept, never as a sliver (B33-590).
+  `unknown` shows an em dash, no bar and no split. The default
+  `placement="sidebar"` card is unchanged.
+- **New `WalletChip totalOnly` with a signed `balance`** (top bar only, enforced
+  by the type), for a balance the Ledger reports with a bucket below zero, which
+  no two-segment bar can draw honestly. Below zero: the distance past zero in
+  `--color-danger` with the words "past zero", as the Wallet's past-zero screen
+  says it. At zero or above (a bucket below zero, a positive total -- decided by
+  Jamal on 3 Nov 2026): the plain figure. Neither draws a bar or a
+  granted / purchased legend. New labels: `pastZero`, `pastZeroLong`,
+  `pastZeroBalance`. **No board draws this state; it is judged at the gate.**
+- **New labels for the popover:** `popover`, `grantedFigure`,
+  `purchasedFigure`, `grantedNote`, `grantedNoteUndated`, `purchasedNote`,
+  `open`, `buyTokens`. Each defaults to English.
+- **New `NotificationButton`**: the 32px bell for `topBar.actions`, with an
+  `unread` dot. It fetches nothing and renders nothing without `onClick` or
+  `href`. The NotificationCenter panel stays Stage A and is not wired.
+- **"Buy tokens" is white on `--color-orange-600`** (5.18:1), not the brand
+  orange board 21 draws (3.69:1, fails AA at 13px). Decided by Jamal on 4 Nov
+  2026: orange that carries text is `--color-orange-600`.
+- **The top bar spans the full width,** above the sidebar and the product's
+  column alike (board 20). Until now it sat over the content column only and
+  the sidebar ran the full height.
+- **Two new component-private tokens:** `--container-token-popover` (340px),
+  `--spacing-0_75` (3px).
+- **The nav height budget moves, because the sidebar's furniture moved.**
+  `navBudgetForViewport(900)` and `checkNavHeightBudget`'s default budget rise
+  from 629 to 730px: the top bar (48) is now counted above the sidebar, and the
+  wordmark, switcher and wallet chip no longer take sidebar height. The default
+  `consumerSlotsPx` is now 44 (the footer alone), down from 86 (switcher plus
+  footer). If you pass your own `consumerSlotsPx`, drop your switcher's height
+  from it. A 13-item nav that scrolled at 900px now fits; the dev warning in
+  `Sidebar` follows the same numbers.
+- **The app name no longer shrinks** when the nav is long enough to scroll
+  (it lost 2px of its 38).
+
+The 56px rail keeps working, icon-only, and gets no new design. The top bar
+does not collapse.
+
+Repo-only: the specimen's "Shell redesign — B33-1710" route grows the top bar,
+the open token popover, board 22's nothing-purchased chip, and the unknown,
+past-zero and total-only chips.
+
 ### Changed — `CHANGELOG.md` now ships inside the package
 
 `package.json` `files` adds `CHANGELOG.md` next to `dist`, so this file is in

package/dist/buttons.module.css.js

@@ -0,0 +1,10 @@
+const t = "_primary_qxhao_26", a = "_quiet_qxhao_77", o = {
+  primary: t,
+  quiet: a
+};
+export {
+  o as default,
+  t as primary,
+  a as quiet
+};
+//# sourceMappingURL=buttons.module.css.js.map

package/dist/buttons.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttons.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/AppShell/AppShell.d.ts

@@ -10,12 +10,29 @@ export interface AppShellNavItem {
     active?: boolean;
     /** Trailing-slot count. Omit to leave the slot empty; it still reserves its width so counts line up. */
     count?: number;
-    /** Renders `count` in the primary color instead of muted. */
+    /** Draws `count` as the filled "needs you" pill instead of muted text. */
     countUrgent?: boolean;
+    /** A trailing attention dot; the string is what a screen reader hears. Ignored when `count` is set. */
+    dot?: string;
     /** Where the row goes. A nav row's destination is data; the shell renders it as a link. */
     href?: string;
 }
 /** One nav section: an optional header over a run of rows. */
+/**
+ * The product's main action, drawn as a button at the foot of the sidebar,
+ * above the footer's divider (B33-1713, board 20's "New scan"). Data, like a
+ * nav row: the shell renders it, in the primary tier's ink tone (ADR-0016).
+ */
+export interface AppShellAction {
+    /** The button's words, in the consumer's language -- "New scan". */
+    label: string;
+    /** A leading icon, decorative. On the 56px rail it is all that shows. */
+    icon?: ReactNode;
+    /** Where it goes. Renders a link through `linkComponent`. Wins over `onClick`. */
+    href?: string;
+    /** What pressing it does. Renders a `<button>`. */
+    onClick?: () => void;
+}
 export interface AppShellNavSection {
     /** The section header. Omit for a headerless section (the nav's first section has none). On the rail every header drops. */
     label?: string;
@@ -65,38 +82,89 @@ export interface AppShellProps {
      * resolved by a consumer passing this.
      */
     navLabel?: string;
+    /**
+     * The product's name, drawn as plain text at the top of the sidebar (B33-1711).
+     * The product name only -- "Boost Score", in the consumer's language -- with
+     * no icon beside it: the product mark belongs in the app switcher, not next to
+     * the name. Omit it and nothing is drawn there.
+     *
+     * It is visible text and nothing else. It names no landmark (that is `label`)
+     * and nothing branches on it. Often the same string as `label`; it is a
+     * separate prop because one is read aloud as a landmark's name and the other
+     * is read on screen, and a consumer may want them to differ.
+     *
+     * Hidden on the 56px rail, where there is no room for a word.
+     */
+    appName?: string;
     /** The navigation, as data. No product hardcodes rows; the shell composes them. */
     nav: AppShellNavSection[];
-    /** The top bar's content -- the breadcrumb and the shell actions on its right. */
-    topBar: TopBarProps;
-    /** The Boost33 mark for the wordmark lockup. Passed in, the way Wordmark takes it; on the rail it is all that shows. Pass it unlinked -- `hubHref` links the whole lockup. */
+    /**
+     * The top bar's own content: its `actions` on the right (the notification
+     * button and the avatar) and its `labels`. The shell fills the rest of the bar
+     * itself -- the mark and `org` on the left, `switcher` and `wallet` in the
+     * centre -- so those are props of the shell, not of this object.
+     *
+     * `breadcrumb` is still accepted and no longer drawn (B33-1712): the redesign
+     * puts the mark and the organisation where it was. A sidebar toggle kept
+     * inside it goes in `topBar.sidebarToggle` instead, at the far left of the
+     * bar, or the rail loses its toggle.
+     */
+    topBar?: Omit<TopBarProps, 'start' | 'switcher' | 'tokens'>;
+    /**
+     * The Boost33 mark, at the left of the top bar (B33-1712; it was the
+     * sidebar's wordmark lockup until 0.8.0). Passed in, the way Wordmark takes
+     * it. Pass it unlinked -- `hubHref` links it. The word "Boost33" is not drawn
+     * beside it; it stays as the link's accessible name.
+     */
     mark?: ReactNode;
     /**
-     * Where the hub lives. Set it and the wordmark in the sidebar's top-left
-     * corner becomes a link home, rendered through `linkComponent`; omit it and
-     * the wordmark is the plain lockup it always was (B33-1699). The consumer
+     * Where the hub lives. Set it and the mark at the left of the top bar becomes
+     * a link home, rendered through `linkComponent` (B33-1699). The consumer
      * supplies the URL -- Identity owns where the hub is and it differs per
      * environment, so the package never hardcodes it. See `Wordmark.hubHref`.
      */
     hubHref?: string;
     /**
-     * The product switcher, sitting under the wordmark. A slot: the registry it
-     * draws is served by Identity (ADR-0003), not owned here. Render its own
-     * collapsed form for the rail.
+     * The organisation, beside the mark at the left of the top bar (B33-1712,
+     * board 20: "AC Acme Coaching ⌄"). A slot -- the product's own pill. The
+     * package draws no organisation menu: that is AccountMenu (B33-493), which has
+     * not passed its gate.
+     */
+    org?: ReactNode;
+    /**
+     * The app switcher, at the centre of the top bar after its "Switch Tools →"
+     * label (B33-1712; it sat under the wordmark in the sidebar until 0.8.0). A
+     * slot: pass `AppSwitcher`. The registry it draws is served by Identity
+     * (ADR-0003), not owned here. It no longer has a rail form to render -- the
+     * top bar does not collapse.
      */
     switcher?: ReactNode;
     /**
-     * The wallet chip, pinned above the footer. A slot: the balance comes from
-     * `@boost33/ledger-client`, never read here. Render its own collapsed form
-     * for the rail.
+     * The token chip, at the centre of the top bar after the switcher and its
+     * "Check Your Tokens →" label (B33-1712; it was pinned above the sidebar's
+     * footer until 0.8.0). A slot: pass `WalletChip` with `placement="topbar"`.
+     * The balance comes from `@boost33/ledger-client`, never read here.
      */
     wallet?: ReactNode;
-    /** The sidebar footer, below the wallet chip. A slot -- the product's own. */
+    /**
+     * The product's main action, at the foot of the sidebar directly above the
+     * footer's divider (B33-1713). Omit it and nothing is drawn. Given neither
+     * `href` nor `onClick`, it is not drawn either: a button that does nothing is
+     * a control that lies (B33-1270). On the rail it shows its icon alone, or
+     * nothing if it has none.
+     */
+    action?: AppShellAction;
+    /**
+     * The sidebar footer, at the foot of the sidebar, under a divider -- Settings
+     * and Help on board 20. A slot -- the product's own.
+     */
     footer?: ReactNode;
     /**
      * The sidebar collapsed to the 56px rail. A state of the shell: the sidebar
-     * narrows and every piece it owns collapses off this one flag. The slots
-     * (switcher, wallet, footer) render their own collapsed form.
+     * narrows to icon-only nav and every piece it owns collapses off this one
+     * flag. The footer slot renders its own collapsed form. The switcher and the
+     * token chip live in the top bar since 0.8.0 (B33-1712) and do not collapse;
+     * the rail has no redesign of its own and keeps working as it did.
      */
     collapsed?: boolean;
     /**
@@ -140,4 +208,4 @@ export interface AppShellProps {
      */
     children: ReactNode;
 }
-export declare function AppShell({ label, navLabel, nav, topBar, mark, hubHref, switcher, wallet, footer, collapsed, linkComponent, children, }: AppShellProps): import("react").JSX.Element;
+export declare function AppShell({ label, appName, navLabel, nav, topBar, mark, hubHref, org, switcher, wallet, action, footer, collapsed, linkComponent, children, }: AppShellProps): import("react").JSX.Element;

package/dist/components/AppShell/AppShell.js

@@ -1,58 +1,83 @@
-import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { jsxs as o, jsx as r, Fragment as v } from "react/jsx-runtime";
 import { Sidebar as x } from "../Sidebar/Sidebar.js";
-import { NavSection as S } from "../NavSection/NavSection.js";
-import { NavItem as g } from "../NavItem/NavItem.js";
-import { TopBar as j } from "../TopBar/TopBar.js";
-import { Wordmark as k } from "../Wordmark/Wordmark.js";
-import a from "./AppShell.module.css.js";
-function W({
-  label: e,
-  navLabel: t,
-  nav: h,
-  topBar: v,
-  mark: f,
-  hubHref: p,
-  switcher: m,
-  wallet: c,
-  footer: o,
-  collapsed: n = !1,
-  linkComponent: s,
-  children: u
+import { NavSection as j } from "../NavSection/NavSection.js";
+import { NavItem as A } from "../NavItem/NavItem.js";
+import { TopBar as C } from "../TopBar/TopBar.js";
+import { Wordmark as L } from "../Wordmark/Wordmark.js";
+import U from "../../buttons.module.css.js";
+import l from "./AppShell.module.css.js";
+function z({
+  label: n,
+  appName: a,
+  navLabel: s,
+  nav: t,
+  topBar: c,
+  mark: d,
+  hubHref: m,
+  org: p,
+  switcher: N,
+  wallet: b,
+  action: S,
+  footer: u,
+  collapsed: i = !1,
+  linkComponent: h,
+  children: k
 }) {
-  return /* @__PURE__ */ i("div", { className: a.shell, children: [
-    /* @__PURE__ */ i(x, { landmarkLabel: e, collapsed: n, children: [
-      /* @__PURE__ */ r("div", { className: a.wordmark, children: /* @__PURE__ */ r(k, { mark: f, collapsed: n, hubHref: p, linkComponent: s }) }),
-      m != null && /* @__PURE__ */ r("div", { className: a.switcher, children: m }),
-      /* @__PURE__ */ r("nav", { "aria-label": t ?? e, className: a.nav, children: h.map((d, N) => (
-        // No room for a header at 56px, so on the rail every section renders
-        // headerless -- its rows collapse to their icons and line up.
-        /* @__PURE__ */ r(S, { label: n ? void 0 : d.label, children: d.items.map((l, b) => /* @__PURE__ */ r(
-          g,
-          {
-            icon: l.icon,
-            active: l.active,
-            collapsed: n,
-            count: l.count,
-            countUrgent: l.countUrgent,
-            href: l.href,
-            linkComponent: s,
-            children: l.label
-          },
-          b
-        )) }, N)
-      )) }),
-      (c != null || o != null) && /* @__PURE__ */ i("div", { className: a.foot, children: [
-        c,
-        o
-      ] })
-    ] }),
-    /* @__PURE__ */ i("div", { className: a.main, children: [
-      /* @__PURE__ */ r(j, { ...v }),
-      /* @__PURE__ */ r("main", { className: a.content, children: u })
+  return /* @__PURE__ */ o("div", { className: l.shell, children: [
+    /* @__PURE__ */ r(
+      C,
+      {
+        ...c,
+        start: /* @__PURE__ */ o(v, { children: [
+          /* @__PURE__ */ r(L, { mark: d, collapsed: !0, hubHref: m, linkComponent: h }),
+          p
+        ] }),
+        switcher: N,
+        tokens: b
+      }
+    ),
+    /* @__PURE__ */ o("div", { className: l.body, children: [
+      /* @__PURE__ */ o(x, { landmarkLabel: n, collapsed: i, children: [
+        a != null && !i && /* @__PURE__ */ r("p", { className: l.appName, children: a }),
+        /* @__PURE__ */ r("nav", { "aria-label": s ?? n, className: l.nav, children: t.map((f, y) => (
+          // No room for a header at 56px, so on the rail every section renders
+          // headerless -- its rows collapse to their icons and line up.
+          /* @__PURE__ */ r(j, { label: i ? void 0 : f.label, children: f.items.map((e, g) => /* @__PURE__ */ r(
+            A,
+            {
+              icon: e.icon,
+              active: e.active,
+              collapsed: i,
+              count: e.count,
+              countUrgent: e.countUrgent,
+              dot: e.dot,
+              href: e.href,
+              linkComponent: h,
+              children: e.label
+            },
+            g
+          )) }, y)
+        )) }),
+        /* @__PURE__ */ r($, { action: S, collapsed: i, linkComponent: h }),
+        u != null && /* @__PURE__ */ r("div", { className: l.foot, children: u })
+      ] }),
+      /* @__PURE__ */ r("div", { className: l.main, children: /* @__PURE__ */ r("main", { className: l.content, children: k }) })
     ] })
   ] });
 }
+function $({ action: n, collapsed: a, linkComponent: s }) {
+  if (n === void 0 || n.href === void 0 && n.onClick === void 0 || a && n.icon == null) return null;
+  const t = /* @__PURE__ */ o(v, { children: [
+    n.icon != null && /* @__PURE__ */ r("span", { "aria-hidden": "true", children: n.icon }),
+    /* @__PURE__ */ r("span", { className: a ? l.srOnly : void 0, children: n.label })
+  ] }), c = `${U.primary} ${l.action}`, d = a ? "true" : void 0;
+  if (n.href !== void 0) {
+    const m = s ?? "a";
+    return /* @__PURE__ */ r("div", { className: l.actionSlot, children: /* @__PURE__ */ r(m, { className: c, href: n.href, "data-collapsed": d, children: t }) });
+  }
+  return /* @__PURE__ */ r("div", { className: l.actionSlot, children: /* @__PURE__ */ r("button", { type: "button", className: c, onClick: n.onClick, "data-collapsed": d, children: t }) });
+}
 export {
-  W as AppShell
+  z as AppShell
 };
 //# sourceMappingURL=AppShell.js.map

package/dist/components/AppShell/AppShell.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.js","sources":["../../../src/components/AppShell/AppShell.tsx"],"sourcesContent":["import type { ElementType, ReactNode } from 'react'\nimport { Sidebar } from '../Sidebar/Sidebar'\nimport { NavSection } from '../NavSection/NavSection'\nimport { NavItem } from '../NavItem/NavItem'\nimport { TopBar, type TopBarProps } from '../TopBar/TopBar'\nimport { Wordmark } from '../Wordmark/Wordmark'\nimport styles from './AppShell.module.css'\n\n/** One nav row, described as data. The consumer never hands the shell markup. */\nexport interface AppShellNavItem {\n  /** The row's name. Truncates rather than wrapping; on the rail it collapses to the accessibility tree. */\n  label: string\n  /** The leading icon. Decorative -- the label carries the name. On the rail it is all that shows. */\n  icon?: ReactNode\n  /** Marks this row as the current page. Sets `aria-current=\"page\"`. */\n  active?: boolean\n  /** Trailing-slot count. Omit to leave the slot empty; it still reserves its width so counts line up. */\n  count?: number\n  /** Renders `count` in the primary color instead of muted. */\n  countUrgent?: boolean\n  /** Where the row goes. A nav row's destination is data; the shell renders it as a link. */\n  href?: string\n}\n\n/** One nav section: an optional header over a run of rows. */\nexport interface AppShellNavSection {\n  /** The section header. Omit for a headerless section (the nav's first section has none). On the rail every header drops. */\n  label?: string\n  /** The section's rows, as data. */\n  items: AppShellNavItem[]\n}\n\nexport interface AppShellProps {\n  /**\n   * The accessible name of the sidebar landmark. A display string in the\n   * consumer's own language -- usually the product's name -- that reaches\n   * `aria-label` on the `<aside>` and is never rendered as text.\n   *\n   * **It is an accessible name, not product-awareness.** This prop was called\n   * `product` and its comment claimed it was \"the whole of the shell's\n   * product-awareness\" (B33-1272). Nothing branches on it, nothing is looked up\n   * with it, and no artwork or copy changes because of it -- so the comment\n   * described a mechanism that did not exist and sent the next reader looking\n   * for the rest of it. The shell is product-aware through `nav`, `switcher`,\n   * `wallet` and `footer`, which are the product's own data.\n   *\n   * **Not the Identity slug.** `AppSwitcher.currentSlug` takes that\n   * (`\"wallet\"`, `\"boostscore\"`); this takes what a person would read\n   * (\"Wallet\"). The shell carries two names for one product and nothing in the\n   * types connects them, so check which kind of string each prop wants.\n   */\n  label: string\n  /**\n   * The accessible name of the navigation landmark inside the sidebar.\n   * **Defaults to `label`, which is today's behaviour and not the fix.**\n   *\n   * Pass a distinct string here. Without one the `<aside>` and the `<nav>`\n   * nested inside it carry the same accessible name, and a screen-reader user\n   * moving by landmark hears \"Wallet complementary\" then \"Wallet navigation\" --\n   * the name doing none of the distinguishing that is the one job a landmark\n   * label has (B33-1272). Something like \"Wallet sections\" or \"Wallet pages\",\n   * in your language, resolves it.\n   *\n   * **The package cannot default this to anything better, which is why the\n   * fallback is the default.** A sensible default would have to compose a word\n   * -- \"navigation\", \"sections\" -- and that word is user-facing text a screen\n   * reader reads aloud, so it would have to be in the consumer's language. Both\n   * consumers default to French. This package hardcodes no user-facing English\n   * (`tests/no-hardcoded-strings.test.ts`), and a composed English default would\n   * ship an untranslatable word into assistive output for every consumer that\n   * never noticed the prop. Repeating `label` is at least a name the consumer\n   * chose and wrote in their own language. So the duplicate name is only fully\n   * resolved by a consumer passing this.\n   */\n  navLabel?: string\n  /** The navigation, as data. No product hardcodes rows; the shell composes them. */\n  nav: AppShellNavSection[]\n  /** The top bar's content -- the breadcrumb and the shell actions on its right. */\n  topBar: TopBarProps\n  /** The Boost33 mark for the wordmark lockup. Passed in, the way Wordmark takes it; on the rail it is all that shows. Pass it unlinked -- `hubHref` links the whole lockup. */\n  mark?: ReactNode\n  /**\n   * Where the hub lives. Set it and the wordmark in the sidebar's top-left\n   * corner becomes a link home, rendered through `linkComponent`; omit it and\n   * the wordmark is the plain lockup it always was (B33-1699). The consumer\n   * supplies the URL -- Identity owns where the hub is and it differs per\n   * environment, so the package never hardcodes it. See `Wordmark.hubHref`.\n   */\n  hubHref?: string\n  /**\n   * The product switcher, sitting under the wordmark. A slot: the registry it\n   * draws is served by Identity (ADR-0003), not owned here. Render its own\n   * collapsed form for the rail.\n   */\n  switcher?: ReactNode\n  /**\n   * The wallet chip, pinned above the footer. A slot: the balance comes from\n   * `@boost33/ledger-client`, never read here. Render its own collapsed form\n   * for the rail.\n   */\n  wallet?: ReactNode\n  /** The sidebar footer, below the wallet chip. A slot -- the product's own. */\n  footer?: ReactNode\n  /**\n   * The sidebar collapsed to the 56px rail. A state of the shell: the sidebar\n   * narrows and every piece it owns collapses off this one flag. The slots\n   * (switcher, wallet, footer) render their own collapsed form.\n   */\n  collapsed?: boolean\n  /**\n   * The element every linked nav row renders through. Defaults to a plain `a`;\n   * a consumer whose router owns navigation passes its own here and the shell\n   * threads it to every row of `nav`, and to the wordmark when `hubHref` links\n   * it, so the whole nav goes client-side with the locale prefix intact rather\n   * than full-page-reloading (B33-847). This is the shell's one nod to how a\n   * consumer routes -- it renders the element, never knowing what it is. See\n   * docs/adr/0011.\n   *\n   * **It reaches the rows of `nav` and the wordmark, and nothing else.** The\n   * slots (`switcher`, `wallet`, `footer`, `topBar.actions`) are `ReactNode`s\n   * the consumer has already created, so the shell cannot put a prop on what is\n   * inside one. A\n   * consumer composing a link-bearing component into a slot -- `AppSwitcher`,\n   * `AccountMenu`, `NotificationCenter` -- passes `linkComponent` to that\n   * component as well, or its rows stay bare anchors and reload the page. The\n   * Wallet shipped exactly that defect (B33-1281) by reading this prop as the\n   * single place, which is the 2026-10-06 correction on docs/adr/0011.\n   */\n  linkComponent?: ElementType\n  /**\n   * The page body. Sits on white, below the top bar, and the shell renders it\n   * inside the page's `<main>` -- so a consumer adds no wrapper of its own.\n   *\n   * **The page's title goes here too.** A screen with a title renders\n   * `PageHeader` as the first thing in its own body; a screen with none renders\n   * nothing and the top bar's hairline sits straight on the content, which is\n   * what the Wallet's overview does and what its 9 Sep baseline shows. The\n   * shell used to take a `pageHeader` prop and draw the header itself, above\n   * this; B33-1267 removed it, because no consumer ever passed it and Score\n   * forbids it by test (the page below owns the sole `h1`).\n   *\n   * **Everything here scrolls.** This box is the shell's one scrolling element,\n   * so the sidebar and top bar stay pinned and the page header goes up with the\n   * body. The removed prop sat outside the scroll box and pinned the header\n   * instead -- the one real difference between the two spellings, and the\n   * reason the choice was worth collapsing to one rather than leaving to a\n   * consumer to discover on a long page.\n   */\n  children: ReactNode\n}\n\n// The shell every authenticated Boost33 screen renders inside. It composes the\n// pieces built in the earlier tickets -- sidebar, wordmark, switcher, nav,\n// wallet chip, top bar -- into one thing a product imports instead of building a\n// sidebar. Everything that differs between products is the product's own data --\n// `nav`, `switcher`, `wallet`, `footer` -- and nothing above the nav (the Boost33\n// wordmark and brand) changes at all. `label` and `navLabel` name the two\n// landmarks and decide nothing; B33-1272 corrected the claim that `label` (then\n// `product`) was the whole of the shell's product-awareness.\n//\n// `PageHeader` is deliberately not in that list. The shell drew it from a\n// `pageHeader` prop until B33-1267; a page's title is the page's, rendered at\n// the top of `children`, which is what both consumers already did.\nexport function AppShell({\n  label,\n  navLabel,\n  nav,\n  topBar,\n  mark,\n  hubHref,\n  switcher,\n  wallet,\n  footer,\n  collapsed = false,\n  linkComponent,\n  children,\n}: AppShellProps) {\n  return (\n    <div className={styles.shell}>\n      <Sidebar landmarkLabel={label} collapsed={collapsed}>\n        <div className={styles.wordmark}>\n          <Wordmark mark={mark} collapsed={collapsed} hubHref={hubHref} linkComponent={linkComponent} />\n        </div>\n        {switcher != null && <div className={styles.switcher}>{switcher}</div>}\n        {/* Falls back to the sidebar's name rather than composing one. The\n            composed string would be a word a screen reader reads aloud, so it\n            would have to be in the consumer's language, and this package\n            hardcodes no user-facing English. Falling back repeats a name the\n            consumer wrote; it does not invent one. See `navLabel`. */}\n        <nav aria-label={navLabel ?? label} className={styles.nav}>\n          {nav.map((section, sectionIndex) => (\n            // No room for a header at 56px, so on the rail every section renders\n            // headerless -- its rows collapse to their icons and line up.\n            <NavSection key={sectionIndex} label={collapsed ? undefined : section.label}>\n              {section.items.map((item, itemIndex) => (\n                <NavItem\n                  key={itemIndex}\n                  icon={item.icon}\n                  active={item.active}\n                  collapsed={collapsed}\n                  count={item.count}\n                  countUrgent={item.countUrgent}\n                  href={item.href}\n                  linkComponent={linkComponent}\n                >\n                  {item.label}\n                </NavItem>\n              ))}\n            </NavSection>\n          ))}\n        </nav>\n        {(wallet != null || footer != null) && (\n          <div className={styles.foot}>\n            {wallet}\n            {footer}\n          </div>\n        )}\n      </Sidebar>\n      {/* `.main` is the product's column -- the top bar over the body. The\n          landmark is the body alone, one level down: jumping to main has to\n          skip the chrome, and a <main> around the top bar would swallow the\n          breadcrumb, the search box and the avatar. */}\n      <div className={styles.main}>\n        <TopBar {...topBar} />\n        {/* The page's main landmark, and the shell's to supply. This was a plain\n            div, so no route of any consumer had one unless that consumer\n            remembered a wrapper of its own -- the Wallet did\n            (`boostledger/src/app/(wallet)/layout.tsx`), and three products each\n            having to remember it is three chances to ship without one. What the\n            absence costs a screen-reader user is the first move they make on an\n            unfamiliar screen: jump to main and start reading. Without one they\n            land at the top of the document and walk the wordmark, the switcher,\n            every nav row, the wallet chip, the footer links, the sidebar toggle,\n            the search box and the avatar before the first word of the page -- on\n            every navigation, because the shell is a layout and does not remount.\n\n            The landmark is the body alone, which is the half that matters: a\n            <main> drawn around `.main` would satisfy any \"has a landmark\" check\n            and buy the reader nothing, because jumping to it would land them\n            back on the breadcrumb.\n\n            A consumer that already wraps `children` now has two, which is worse\n            than none -- B33-1265 drops the Wallet's as it takes this version,\n            and the CHANGELOG entry tells both consumers to.\n\n            An element swap and nothing else: `main` and `div` are both\n            `display: block`, the class and every declaration behind it are\n            untouched, and all 27 gated screenshot states came back at the ratios\n            they held before. */}\n        <main className={styles.content}>{children}</main>\n      </div>\n    </div>\n  )\n}\n"],"names":["AppShell","label","navLabel","nav","topBar","mark","hubHref","switcher","wallet","footer","collapsed","linkComponent","children","jsxs","styles","Sidebar","jsx","Wordmark","section","sectionIndex","NavSection","item","itemIndex","NavItem","TopBar"],"mappings":";;;;;;;AAmKO,SAASA,EAAS;AAAA,EACvB,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,KAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,eAAAC;AAAA,EACA,UAAAC;AACF,GAAkB;AAChB,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAO,OACrB,UAAA;AAAA,IAAA,gBAAAD,EAACE,GAAA,EAAQ,eAAed,GAAO,WAAAS,GAC7B,UAAA;AAAA,MAAA,gBAAAM,EAAC,OAAA,EAAI,WAAWF,EAAO,UACrB,UAAA,gBAAAE,EAACC,KAAS,MAAAZ,GAAY,WAAAK,GAAsB,SAAAJ,GAAkB,eAAAK,EAAA,CAA8B,EAAA,CAC9F;AAAA,MACCJ,KAAY,QAAQ,gBAAAS,EAAC,SAAI,WAAWF,EAAO,UAAW,UAAAP,GAAS;AAAA,MAMhE,gBAAAS,EAAC,OAAA,EAAI,cAAYd,KAAYD,GAAO,WAAWa,EAAO,KACnD,UAAAX,EAAI,IAAI,CAACe,GAASC;AAAA;AAAA;AAAA,QAGjB,gBAAAH,EAACI,GAAA,EAA8B,OAAOV,IAAY,SAAYQ,EAAQ,OACnE,UAAAA,EAAQ,MAAM,IAAI,CAACG,GAAMC,MACxB,gBAAAN;AAAA,UAACO;AAAA,UAAA;AAAA,YAEC,MAAMF,EAAK;AAAA,YACX,QAAQA,EAAK;AAAA,YACb,WAAAX;AAAA,YACA,OAAOW,EAAK;AAAA,YACZ,aAAaA,EAAK;AAAA,YAClB,MAAMA,EAAK;AAAA,YACX,eAAAV;AAAA,YAEC,UAAAU,EAAK;AAAA,UAAA;AAAA,UATDC;AAAA,QAAA,CAWR,KAdcH,CAejB;AAAA,OACD,GACH;AAAA,OACEX,KAAU,QAAQC,KAAU,2BAC3B,OAAA,EAAI,WAAWK,EAAO,MACpB,UAAA;AAAA,QAAAN;AAAA,QACAC;AAAA,MAAA,EAAA,CACH;AAAA,IAAA,GAEJ;AAAA,IAKA,gBAAAI,EAAC,OAAA,EAAI,WAAWC,EAAO,MACrB,UAAA;AAAA,MAAA,gBAAAE,EAACQ,GAAA,EAAQ,GAAGpB,GAAQ;AAAA,MA0BpB,gBAAAY,EAAC,QAAA,EAAK,WAAWF,EAAO,SAAU,UAAAF,EAAA,CAAS;AAAA,IAAA,EAAA,CAC7C;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"AppShell.js","sources":["../../../src/components/AppShell/AppShell.tsx"],"sourcesContent":["import type { ElementType, ReactNode } from 'react'\nimport { Sidebar } from '../Sidebar/Sidebar'\nimport { NavSection } from '../NavSection/NavSection'\nimport { NavItem } from '../NavItem/NavItem'\nimport { TopBar, type TopBarProps } from '../TopBar/TopBar'\nimport { Wordmark } from '../Wordmark/Wordmark'\nimport buttons from '../../buttons.module.css'\nimport styles from './AppShell.module.css'\n\n/** One nav row, described as data. The consumer never hands the shell markup. */\nexport interface AppShellNavItem {\n  /** The row's name. Truncates rather than wrapping; on the rail it collapses to the accessibility tree. */\n  label: string\n  /** The leading icon. Decorative -- the label carries the name. On the rail it is all that shows. */\n  icon?: ReactNode\n  /** Marks this row as the current page. Sets `aria-current=\"page\"`. */\n  active?: boolean\n  /** Trailing-slot count. Omit to leave the slot empty; it still reserves its width so counts line up. */\n  count?: number\n  /** Draws `count` as the filled \"needs you\" pill instead of muted text. */\n  countUrgent?: boolean\n  /** A trailing attention dot; the string is what a screen reader hears. Ignored when `count` is set. */\n  dot?: string\n  /** Where the row goes. A nav row's destination is data; the shell renders it as a link. */\n  href?: string\n}\n\n/** One nav section: an optional header over a run of rows. */\n/**\n * The product's main action, drawn as a button at the foot of the sidebar,\n * above the footer's divider (B33-1713, board 20's \"New scan\"). Data, like a\n * nav row: the shell renders it, in the primary tier's ink tone (ADR-0016).\n */\nexport interface AppShellAction {\n  /** The button's words, in the consumer's language -- \"New scan\". */\n  label: string\n  /** A leading icon, decorative. On the 56px rail it is all that shows. */\n  icon?: ReactNode\n  /** Where it goes. Renders a link through `linkComponent`. Wins over `onClick`. */\n  href?: string\n  /** What pressing it does. Renders a `<button>`. */\n  onClick?: () => void\n}\n\nexport interface AppShellNavSection {\n  /** The section header. Omit for a headerless section (the nav's first section has none). On the rail every header drops. */\n  label?: string\n  /** The section's rows, as data. */\n  items: AppShellNavItem[]\n}\n\nexport interface AppShellProps {\n  /**\n   * The accessible name of the sidebar landmark. A display string in the\n   * consumer's own language -- usually the product's name -- that reaches\n   * `aria-label` on the `<aside>` and is never rendered as text.\n   *\n   * **It is an accessible name, not product-awareness.** This prop was called\n   * `product` and its comment claimed it was \"the whole of the shell's\n   * product-awareness\" (B33-1272). Nothing branches on it, nothing is looked up\n   * with it, and no artwork or copy changes because of it -- so the comment\n   * described a mechanism that did not exist and sent the next reader looking\n   * for the rest of it. The shell is product-aware through `nav`, `switcher`,\n   * `wallet` and `footer`, which are the product's own data.\n   *\n   * **Not the Identity slug.** `AppSwitcher.currentSlug` takes that\n   * (`\"wallet\"`, `\"boostscore\"`); this takes what a person would read\n   * (\"Wallet\"). The shell carries two names for one product and nothing in the\n   * types connects them, so check which kind of string each prop wants.\n   */\n  label: string\n  /**\n   * The accessible name of the navigation landmark inside the sidebar.\n   * **Defaults to `label`, which is today's behaviour and not the fix.**\n   *\n   * Pass a distinct string here. Without one the `<aside>` and the `<nav>`\n   * nested inside it carry the same accessible name, and a screen-reader user\n   * moving by landmark hears \"Wallet complementary\" then \"Wallet navigation\" --\n   * the name doing none of the distinguishing that is the one job a landmark\n   * label has (B33-1272). Something like \"Wallet sections\" or \"Wallet pages\",\n   * in your language, resolves it.\n   *\n   * **The package cannot default this to anything better, which is why the\n   * fallback is the default.** A sensible default would have to compose a word\n   * -- \"navigation\", \"sections\" -- and that word is user-facing text a screen\n   * reader reads aloud, so it would have to be in the consumer's language. Both\n   * consumers default to French. This package hardcodes no user-facing English\n   * (`tests/no-hardcoded-strings.test.ts`), and a composed English default would\n   * ship an untranslatable word into assistive output for every consumer that\n   * never noticed the prop. Repeating `label` is at least a name the consumer\n   * chose and wrote in their own language. So the duplicate name is only fully\n   * resolved by a consumer passing this.\n   */\n  navLabel?: string\n  /**\n   * The product's name, drawn as plain text at the top of the sidebar (B33-1711).\n   * The product name only -- \"Boost Score\", in the consumer's language -- with\n   * no icon beside it: the product mark belongs in the app switcher, not next to\n   * the name. Omit it and nothing is drawn there.\n   *\n   * It is visible text and nothing else. It names no landmark (that is `label`)\n   * and nothing branches on it. Often the same string as `label`; it is a\n   * separate prop because one is read aloud as a landmark's name and the other\n   * is read on screen, and a consumer may want them to differ.\n   *\n   * Hidden on the 56px rail, where there is no room for a word.\n   */\n  appName?: string\n  /** The navigation, as data. No product hardcodes rows; the shell composes them. */\n  nav: AppShellNavSection[]\n  /**\n   * The top bar's own content: its `actions` on the right (the notification\n   * button and the avatar) and its `labels`. The shell fills the rest of the bar\n   * itself -- the mark and `org` on the left, `switcher` and `wallet` in the\n   * centre -- so those are props of the shell, not of this object.\n   *\n   * `breadcrumb` is still accepted and no longer drawn (B33-1712): the redesign\n   * puts the mark and the organisation where it was. A sidebar toggle kept\n   * inside it goes in `topBar.sidebarToggle` instead, at the far left of the\n   * bar, or the rail loses its toggle.\n   */\n  topBar?: Omit<TopBarProps, 'start' | 'switcher' | 'tokens'>\n  /**\n   * The Boost33 mark, at the left of the top bar (B33-1712; it was the\n   * sidebar's wordmark lockup until 0.8.0). Passed in, the way Wordmark takes\n   * it. Pass it unlinked -- `hubHref` links it. The word \"Boost33\" is not drawn\n   * beside it; it stays as the link's accessible name.\n   */\n  mark?: ReactNode\n  /**\n   * Where the hub lives. Set it and the mark at the left of the top bar becomes\n   * a link home, rendered through `linkComponent` (B33-1699). The consumer\n   * supplies the URL -- Identity owns where the hub is and it differs per\n   * environment, so the package never hardcodes it. See `Wordmark.hubHref`.\n   */\n  hubHref?: string\n  /**\n   * The organisation, beside the mark at the left of the top bar (B33-1712,\n   * board 20: \"AC Acme Coaching ⌄\"). A slot -- the product's own pill. The\n   * package draws no organisation menu: that is AccountMenu (B33-493), which has\n   * not passed its gate.\n   */\n  org?: ReactNode\n  /**\n   * The app switcher, at the centre of the top bar after its \"Switch Tools →\"\n   * label (B33-1712; it sat under the wordmark in the sidebar until 0.8.0). A\n   * slot: pass `AppSwitcher`. The registry it draws is served by Identity\n   * (ADR-0003), not owned here. It no longer has a rail form to render -- the\n   * top bar does not collapse.\n   */\n  switcher?: ReactNode\n  /**\n   * The token chip, at the centre of the top bar after the switcher and its\n   * \"Check Your Tokens →\" label (B33-1712; it was pinned above the sidebar's\n   * footer until 0.8.0). A slot: pass `WalletChip` with `placement=\"topbar\"`.\n   * The balance comes from `@boost33/ledger-client`, never read here.\n   */\n  wallet?: ReactNode\n  /**\n   * The product's main action, at the foot of the sidebar directly above the\n   * footer's divider (B33-1713). Omit it and nothing is drawn. Given neither\n   * `href` nor `onClick`, it is not drawn either: a button that does nothing is\n   * a control that lies (B33-1270). On the rail it shows its icon alone, or\n   * nothing if it has none.\n   */\n  action?: AppShellAction\n  /**\n   * The sidebar footer, at the foot of the sidebar, under a divider -- Settings\n   * and Help on board 20. A slot -- the product's own.\n   */\n  footer?: ReactNode\n  /**\n   * The sidebar collapsed to the 56px rail. A state of the shell: the sidebar\n   * narrows to icon-only nav and every piece it owns collapses off this one\n   * flag. The footer slot renders its own collapsed form. The switcher and the\n   * token chip live in the top bar since 0.8.0 (B33-1712) and do not collapse;\n   * the rail has no redesign of its own and keeps working as it did.\n   */\n  collapsed?: boolean\n  /**\n   * The element every linked nav row renders through. Defaults to a plain `a`;\n   * a consumer whose router owns navigation passes its own here and the shell\n   * threads it to every row of `nav`, and to the wordmark when `hubHref` links\n   * it, so the whole nav goes client-side with the locale prefix intact rather\n   * than full-page-reloading (B33-847). This is the shell's one nod to how a\n   * consumer routes -- it renders the element, never knowing what it is. See\n   * docs/adr/0011.\n   *\n   * **It reaches the rows of `nav` and the wordmark, and nothing else.** The\n   * slots (`switcher`, `wallet`, `footer`, `topBar.actions`) are `ReactNode`s\n   * the consumer has already created, so the shell cannot put a prop on what is\n   * inside one. A\n   * consumer composing a link-bearing component into a slot -- `AppSwitcher`,\n   * `AccountMenu`, `NotificationCenter` -- passes `linkComponent` to that\n   * component as well, or its rows stay bare anchors and reload the page. The\n   * Wallet shipped exactly that defect (B33-1281) by reading this prop as the\n   * single place, which is the 2026-10-06 correction on docs/adr/0011.\n   */\n  linkComponent?: ElementType\n  /**\n   * The page body. Sits on white, below the top bar, and the shell renders it\n   * inside the page's `<main>` -- so a consumer adds no wrapper of its own.\n   *\n   * **The page's title goes here too.** A screen with a title renders\n   * `PageHeader` as the first thing in its own body; a screen with none renders\n   * nothing and the top bar's hairline sits straight on the content, which is\n   * what the Wallet's overview does and what its 9 Sep baseline shows. The\n   * shell used to take a `pageHeader` prop and draw the header itself, above\n   * this; B33-1267 removed it, because no consumer ever passed it and Score\n   * forbids it by test (the page below owns the sole `h1`).\n   *\n   * **Everything here scrolls.** This box is the shell's one scrolling element,\n   * so the sidebar and top bar stay pinned and the page header goes up with the\n   * body. The removed prop sat outside the scroll box and pinned the header\n   * instead -- the one real difference between the two spellings, and the\n   * reason the choice was worth collapsing to one rather than leaving to a\n   * consumer to discover on a long page.\n   */\n  children: ReactNode\n}\n\n// The shell every authenticated Boost33 screen renders inside. It composes the\n// pieces built in the earlier tickets -- sidebar, wordmark, switcher, nav,\n// wallet chip, top bar -- into one thing a product imports instead of building a\n// sidebar. Everything that differs between products is the product's own data --\n// `nav`, `switcher`, `wallet`, `footer` -- and nothing above the nav (the Boost33\n// wordmark and brand) changes at all. `label` and `navLabel` name the two\n// landmarks and decide nothing; B33-1272 corrected the claim that `label` (then\n// `product`) was the whole of the shell's product-awareness.\n//\n// `PageHeader` is deliberately not in that list. The shell drew it from a\n// `pageHeader` prop until B33-1267; a page's title is the page's, rendered at\n// the top of `children`, which is what both consumers already did.\nexport function AppShell({\n  label,\n  appName,\n  navLabel,\n  nav,\n  topBar,\n  mark,\n  hubHref,\n  org,\n  switcher,\n  wallet,\n  action,\n  footer,\n  collapsed = false,\n  linkComponent,\n  children,\n}: AppShellProps) {\n  return (\n    <div className={styles.shell}>\n      {/* The bar across the full width, above the sidebar and the product's\n          column alike (board 20). First in the DOM as it is first on screen, so\n          the tab order runs mark, switcher, token chip, bell, avatar, then the\n          nav, then the page. */}\n      <TopBar\n        {...topBar}\n        start={\n          <>\n            {/* The mark alone, as board 20 draws it: Wordmark's collapsed form\n                keeps \"Boost33\" in the accessibility tree, so the link home is\n                named, and draws only the mark. */}\n            <Wordmark mark={mark} collapsed hubHref={hubHref} linkComponent={linkComponent} />\n            {org}\n          </>\n        }\n        switcher={switcher}\n        tokens={wallet}\n      />\n      <div className={styles.body}>\n        <Sidebar landmarkLabel={label} collapsed={collapsed}>\n          {appName != null && !collapsed && <p className={styles.appName}>{appName}</p>}\n          {/* Falls back to the sidebar's name rather than composing one. The\n              composed string would be a word a screen reader reads aloud, so it\n              would have to be in the consumer's language, and this package\n              hardcodes no user-facing English. Falling back repeats a name the\n              consumer wrote; it does not invent one. See `navLabel`. */}\n          <nav aria-label={navLabel ?? label} className={styles.nav}>\n            {nav.map((section, sectionIndex) => (\n              // No room for a header at 56px, so on the rail every section renders\n              // headerless -- its rows collapse to their icons and line up.\n              <NavSection key={sectionIndex} label={collapsed ? undefined : section.label}>\n                {section.items.map((item, itemIndex) => (\n                  <NavItem\n                    key={itemIndex}\n                    icon={item.icon}\n                    active={item.active}\n                    collapsed={collapsed}\n                    count={item.count}\n                    countUrgent={item.countUrgent}\n                    dot={item.dot}\n                    href={item.href}\n                    linkComponent={linkComponent}\n                  >\n                    {item.label}\n                  </NavItem>\n                ))}\n              </NavSection>\n            ))}\n          </nav>\n          <SidebarAction action={action} collapsed={collapsed} linkComponent={linkComponent} />\n          {footer != null && <div className={styles.foot}>{footer}</div>}\n        </Sidebar>\n        {/* `.main` is the product's column, under the bar and beside the\n            sidebar. The landmark is the page body inside it: jumping to main\n            has to skip the chrome. */}\n        <div className={styles.main}>\n          {/* The page's main landmark, and the shell's to supply. This was a plain\n              div, so no route of any consumer had one unless that consumer\n              remembered a wrapper of its own -- the Wallet did\n              (`boostledger/src/app/(wallet)/layout.tsx`), and three products each\n              having to remember it is three chances to ship without one. What the\n              absence costs a screen-reader user is the first move they make on an\n              unfamiliar screen: jump to main and start reading. Without one they\n              land at the top of the document and walk the mark, the switcher, the\n              token chip, the bell, the avatar, every nav row, the footer links and\n              the sidebar toggle before the first word of the page -- on\n              every navigation, because the shell is a layout and does not remount.\n\n              The landmark is the body alone, which is the half that matters: a\n              <main> drawn around the whole shell would satisfy any \"has a\n              landmark\" check and buy the reader nothing, because jumping to it\n              would land them back on the top bar.\n\n              A consumer that already wraps `children` now has two, which is worse\n              than none -- B33-1265 drops the Wallet's as it takes this version,\n              and the CHANGELOG entry tells both consumers to.\n\n              An element swap and nothing else: `main` and `div` are both\n              `display: block`, the class and every declaration behind it are\n              untouched, and all 27 gated screenshot states came back at the ratios\n              they held before. */}\n          <main className={styles.content}>{children}</main>\n        </div>\n      </div>\n    </div>\n  )\n}\n\n/**\n * The sidebar's action button (B33-1713). The primary tier in its ink tone,\n * full width -- board 20's near-black \"New scan\", not the brand orange, which\n * the package keeps for the money moment (ADR-0016). Pushed to the foot of the\n * column with the footer: the nav above takes the slack.\n */\nfunction SidebarAction({ action, collapsed, linkComponent }: { action: AppShellAction | undefined; collapsed: boolean; linkComponent: ElementType | undefined }) {\n  if (action === undefined || (action.href === undefined && action.onClick === undefined)) return null\n  if (collapsed && action.icon == null) return null\n\n  const content = (\n    <>\n      {action.icon != null && <span aria-hidden=\"true\">{action.icon}</span>}\n      {/* On the rail the label leaves the screen and stays the button's name. */}\n      <span className={collapsed ? styles.srOnly : undefined}>{action.label}</span>\n    </>\n  )\n  const className = `${buttons.primary} ${styles.action}`\n  const dataCollapsed = collapsed ? 'true' : undefined\n\n  if (action.href !== undefined) {\n    const Link = linkComponent ?? 'a'\n    return (\n      <div className={styles.actionSlot}>\n        <Link className={className} href={action.href} data-collapsed={dataCollapsed}>\n          {content}\n        </Link>\n      </div>\n    )\n  }\n  return (\n    <div className={styles.actionSlot}>\n      <button type=\"button\" className={className} onClick={action.onClick} data-collapsed={dataCollapsed}>\n        {content}\n      </button>\n    </div>\n  )\n}\n"],"names":["AppShell","label","appName","navLabel","nav","topBar","mark","hubHref","org","switcher","wallet","action","footer","collapsed","linkComponent","children","jsxs","styles","jsx","TopBar","Fragment","Wordmark","Sidebar","section","sectionIndex","NavSection","item","itemIndex","NavItem","SidebarAction","content","className","buttons","dataCollapsed","Link"],"mappings":";;;;;;;;AAyOO,SAASA,EAAS;AAAA,EACvB,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,KAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,KAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,eAAAC;AAAA,EACA,UAAAC;AACF,GAAkB;AAChB,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAO,OAKrB,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACE,GAAGd;AAAA,QACJ,OACE,gBAAAW,EAAAI,GAAA,EAIE,UAAA;AAAA,UAAA,gBAAAF,EAACG,GAAA,EAAS,MAAAf,GAAY,WAAS,IAAC,SAAAC,GAAkB,eAAAO,GAA8B;AAAA,UAC/EN;AAAA,QAAA,GACH;AAAA,QAEF,UAAAC;AAAA,QACA,QAAQC;AAAA,MAAA;AAAA,IAAA;AAAA,IAEV,gBAAAM,EAAC,OAAA,EAAI,WAAWC,EAAO,MACrB,UAAA;AAAA,MAAA,gBAAAD,EAACM,GAAA,EAAQ,eAAerB,GAAO,WAAAY,GAC5B,UAAA;AAAA,QAAAX,KAAW,QAAQ,CAACW,KAAa,gBAAAK,EAAC,OAAE,WAAWD,EAAO,SAAU,UAAAf,EAAA,CAAQ;AAAA,QAMzE,gBAAAgB,EAAC,OAAA,EAAI,cAAYf,KAAYF,GAAO,WAAWgB,EAAO,KACnD,UAAAb,EAAI,IAAI,CAACmB,GAASC;AAAA;AAAA;AAAA,UAGjB,gBAAAN,EAACO,GAAA,EAA8B,OAAOZ,IAAY,SAAYU,EAAQ,OACnE,UAAAA,EAAQ,MAAM,IAAI,CAACG,GAAMC,MACxB,gBAAAT;AAAA,YAACU;AAAA,YAAA;AAAA,cAEC,MAAMF,EAAK;AAAA,cACX,QAAQA,EAAK;AAAA,cACb,WAAAb;AAAA,cACA,OAAOa,EAAK;AAAA,cACZ,aAAaA,EAAK;AAAA,cAClB,KAAKA,EAAK;AAAA,cACV,MAAMA,EAAK;AAAA,cACX,eAAAZ;AAAA,cAEC,UAAAY,EAAK;AAAA,YAAA;AAAA,YAVDC;AAAA,UAAA,CAYR,KAfcH,CAgBjB;AAAA,SACD,GACH;AAAA,QACA,gBAAAN,EAACW,GAAA,EAAc,QAAAlB,GAAgB,WAAAE,GAAsB,eAAAC,EAAA,CAA8B;AAAA,QAClFF,KAAU,QAAQ,gBAAAM,EAAC,SAAI,WAAWD,EAAO,MAAO,UAAAL,EAAA,CAAO;AAAA,MAAA,GAC1D;AAAA,MAIA,gBAAAM,EAAC,OAAA,EAAI,WAAWD,EAAO,MA0BrB,UAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWD,EAAO,SAAU,UAAAF,EAAA,CAAS,EAAA,CAC7C;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;AAQA,SAASc,EAAc,EAAE,QAAAlB,GAAQ,WAAAE,GAAW,eAAAC,KAAqH;AAE/J,MADIH,MAAW,UAAcA,EAAO,SAAS,UAAaA,EAAO,YAAY,UACzEE,KAAaF,EAAO,QAAQ,KAAM,QAAO;AAE7C,QAAMmB,IACJ,gBAAAd,EAAAI,GAAA,EACG,UAAA;AAAA,IAAAT,EAAO,QAAQ,QAAQ,gBAAAO,EAAC,UAAK,eAAY,QAAQ,YAAO,KAAA,CAAK;AAAA,IAE9D,gBAAAA,EAAC,UAAK,WAAWL,IAAYI,EAAO,SAAS,QAAY,YAAO,MAAA,CAAM;AAAA,EAAA,GACxE,GAEIc,IAAY,GAAGC,EAAQ,OAAO,IAAIf,EAAO,MAAM,IAC/CgB,IAAgBpB,IAAY,SAAS;AAE3C,MAAIF,EAAO,SAAS,QAAW;AAC7B,UAAMuB,IAAOpB,KAAiB;AAC9B,WACE,gBAAAI,EAAC,OAAA,EAAI,WAAWD,EAAO,YACrB,UAAA,gBAAAC,EAACgB,GAAA,EAAK,WAAAH,GAAsB,MAAMpB,EAAO,MAAM,kBAAgBsB,GAC5D,aACH,GACF;AAAA,EAEJ;AACA,2BACG,OAAA,EAAI,WAAWhB,EAAO,YACrB,4BAAC,UAAA,EAAO,MAAK,UAAS,WAAAc,GAAsB,SAASpB,EAAO,SAAS,kBAAgBsB,GAClF,aACH,GACF;AAEJ;"}

package/dist/components/AppShell/AppShell.module.css.js

@@ -1,20 +1,26 @@
-const t = "_shell_10chf_10", c = "_wordmark_10chf_20", o = "_switcher_10chf_26", _ = "_foot_10chf_33", n = "_nav_10chf_45", s = "_main_10chf_54", h = "_content_10chf_75", e = {
-  shell: t,
-  wordmark: c,
-  switcher: o,
-  foot: _,
-  nav: n,
-  main: s,
-  content: h
+const o = "_shell_1e11e_13", e = "_body_1e11e_24", n = "_appName_1e11e_39", t = "_foot_1e11e_65", _ = "_actionSlot_1e11e_79", a = "_action_1e11e_79", c = "_srOnly_1e11e_103", s = "_nav_1e11e_116", l = "_main_1e11e_125", i = "_content_1e11e_146", p = {
+  shell: o,
+  body: e,
+  appName: n,
+  foot: t,
+  actionSlot: _,
+  action: a,
+  srOnly: c,
+  nav: s,
+  main: l,
+  content: i
 };
 export {
-  h as content,
-  e as default,
-  _ as foot,
-  s as main,
-  n as nav,
-  t as shell,
-  o as switcher,
-  c as wordmark
+  a as action,
+  _ as actionSlot,
+  n as appName,
+  e as body,
+  i as content,
+  p as default,
+  t as foot,
+  l as main,
+  s as nav,
+  o as shell,
+  c as srOnly
 };
 //# sourceMappingURL=AppShell.module.css.js.map

package/dist/components/AppShell/AppShell.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
+{"version":3,"file":"AppShell.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}