@boost33/ui 0.4.1 → 0.5.1

package/README.md

@@ -3,7 +3,8 @@
 The app shell every Boost33 product renders inside. Fourteen components and the
 design tokens they are drawn with, published to public npm. Eleven ship today;
 AccountMenu, NotificationCenter and CommandPalette are in v1's scope and not
-built yet.
+built yet. Outside the shell, it also ships `LaunchLoader`, the screen a product
+shows while another one opens, and the `DotMatrixLoader` it is drawn with.
 
 Built because the product switcher and the wallet chip worked in the Wallet and
 nowhere else, and because a sidebar fixed in one app fixed nothing in the other
@@ -43,3 +44,27 @@ Watch for real test output in the log, not the agent's summary of it.
 
 The Wallet migrates first, Score second. **No 1.0 until both render from this
 package** — until then it has one consumer, which is a fork with a version number.
+
+## The launch screen
+
+`LaunchLoader` is presentational. The page that renders it owns the timing and
+passes in a `caption` and a `progress` (0–100, or `null` while there is no
+honest number). The background is built in and the same for every product:
+black, with one blurred brand-orange glow rising from below the middle of the
+screen. There are no product colours to pass; `stops` is deprecated and ignored
+since 0.5.1. The caption sits straight on the glow, and
+`npm run launch-contrast-check` measures it.
+
+The glow is drawn by the package stylesheet and takes no prop, so both sides of
+a hop paint the identical screen. Inline the ground colour too, so the instant
+before the stylesheet and the markup arrive is already black rather than white:
+
+```tsx
+import { LaunchLoader, launchBackdropCss } from '@boost33/ui'
+
+<style dangerouslySetInnerHTML={{ __html: launchBackdropCss() }} />
+<LaunchLoader caption={caption} progress={progress} />
+```
+
+An animated backdrop, when one exists, goes in the `backdrop` slot. The screen
+must stay complete without it. See `CHANGELOG.md` (B33-1389, B33-1401) for the full contract.

package/dist/components/AccountMenu/AccountMenu.d.ts

@@ -0,0 +1,131 @@
+import { ElementType } from 'react';
+import { AccountMenuIcon } from './icons';
+import { AccountMenuLabels } from './labels';
+/**
+ * The signed-in person, at the top of the panel. Supplied by the consumer -- the
+ * menu reads no session and fetches nothing (CLAUDE.md).
+ */
+export interface AccountMenuPerson {
+    /** Their name, e.g. "Sofia Marques". */
+    name: string;
+    /** Their email, on the line beneath. */
+    email: string;
+    /**
+     * An avatar image. Omit it -- the drawing does -- and the circle draws bare, in
+     * `--color-border-strong`.
+     *
+     * The image is decorative when it renders: it takes an empty `alt`, because the
+     * person's name is on the line beside it and a name here would make a screen
+     * reader say who you are twice. Same reasoning as `ProductMark`'s default.
+     */
+    avatarUrl?: string;
+}
+/**
+ * The organisation strip under the person: which account you are acting in.
+ * Identity's data, supplied per render, never looked up here (ADR-0003).
+ */
+export interface AccountMenuOrg {
+    /** The organisation's name, e.g. "Acme Coaching". */
+    name: string;
+    /** The initials on the tile beside it, e.g. "AC". Decorative -- the name is next to it. */
+    initials: string;
+    /**
+     * The role pill at the right of the strip, e.g. "Admin". Omit it and no pill is
+     * drawn -- it is Identity's word for what this person is in this organisation,
+     * so a consumer with nothing to say there says nothing rather than guessing.
+     */
+    role?: string;
+}
+/**
+ * One row in the panel.
+ *
+ * Whether it navigates is decided by `href` and nothing else, which is ADR-0011's
+ * rule applied rather than re-decided: a row with an `href` is a link and renders
+ * through `linkComponent`; a row without one is an action and stays a `<button>`.
+ * That keeps the component out of the business of knowing which of Profile,
+ * Settings, Switch account and Sign out are navigations in a given product --
+ * four apps may answer differently, and the consumer already knows.
+ */
+export interface AccountMenuItem {
+    /** Stable identity: the React key, and what a test addresses the row by. */
+    id: string;
+    /** The row's name, e.g. "Profile". */
+    label: string;
+    /**
+     * The line beneath the name. Omit it and the row is a single line, set in the
+     * quieter register the drawing gives its Sign out row -- see `.rowLabel` in the
+     * stylesheet for why the two travel together.
+     */
+    description?: string;
+    /** Where the row goes. Omit it and the row is an action, rendered as a button. */
+    href?: string;
+    /** Which glyph the row carries. Omit it and the glyph lane stays, empty. */
+    icon?: AccountMenuIcon;
+}
+/**
+ * A run of rows drawn together. The panel's hairline is drawn above every group,
+ * which is what separates the first group from the identity blocks above it as
+ * well as each group from the last.
+ *
+ * Grouped rather than flat because the drawing puts a rule between its three
+ * navigations and its one way out, and grouped rather than named (`items` plus a
+ * `footer`) because "footer" would be this package inventing a meaning for the
+ * second group. A consumer that wants one group passes one.
+ */
+export interface AccountMenuGroup {
+    /** Stable identity: the React key. */
+    id: string;
+    /** The rows, in the order they are drawn. */
+    items: AccountMenuItem[];
+}
+export interface AccountMenuProps {
+    /** The signed-in person. */
+    person: AccountMenuPerson;
+    /** The organisation this person is acting in. */
+    org: AccountMenuOrg;
+    /** The row groups, in order. A hairline is drawn above each one. */
+    groups: AccountMenuGroup[];
+    /**
+     * Every user-facing string that is not row data -- which is the panel's
+     * accessible name, and today nothing else. Each field defaults to English, and
+     * a field left out, or supplied as `undefined` (what a missed next-intl key
+     * looks like), keeps its default.
+     */
+    labels?: Partial<AccountMenuLabels>;
+    /**
+     * The element a row with an `href` renders through. Defaults to a plain `a`; a
+     * router-owning consumer passes its own so the rows route client-side with the
+     * locale prefix intact (ADR-0011, B33-847). Rows without an `href` are buttons
+     * and ignore it.
+     */
+    linkComponent?: ElementType;
+}
+/**
+ * The account menu: who you are, which organisation you are in, and the way into
+ * Settings and out of the session (B33-493).
+ *
+ * **This is Stage A, and this component is the panel alone.** It takes no
+ * trigger, holds no open state and wires nothing. That is not a half-built
+ * version of trigger-plus-panel -- it is the part of this component that the two
+ * reference drawings agree about. Paper's 004 "AccountMenu — popover" and
+ * Identity's 103 · 11 Account menu are identical in every property of the panel,
+ * and they disagree about the anchor (004 draws a bell on a tile, an unread dot
+ * and a halo behind the avatar; 103 draws none of the three) and about where the
+ * panel sits relative to it (004: 8px below, 16px right inset, overhanging the
+ * avatar by 4px; 103: 10px below, 20px inset, flush). CLAUDE.md puts that choice
+ * with the person at the fidelity gate, and says plainly that an agent picking
+ * one has invented a referent. So the anchor is not here, `TopBar` is untouched,
+ * and the specimen positions the panel in its own stylesheet.
+ *
+ * A disclosure, like the switcher (ADR-0010): no widget role on the panel, no
+ * role on the rows, every row the real `<a>` or `<button>` it already is, and Tab
+ * the document's own order. Dismissal, focus restoration and the trigger's
+ * `aria-expanded` are the shared anchored-overlay contract's (ADR-0009) and
+ * arrive with the trigger in Stage B.
+ *
+ * Nothing here is authoritative. Every measurement in the stylesheet is read off
+ * a drawing that no human has approved, and the gate is where it becomes a
+ * referent -- at which point the approved baseline and the measurements written
+ * into the spec are what binds, not Paper.
+ */
+export declare function AccountMenu({ person, org, groups, labels, linkComponent }: AccountMenuProps): import("react").JSX.Element;

package/dist/components/AccountMenu/icons.d.ts

@@ -0,0 +1,11 @@
+import { ReactElement } from 'react';
+/**
+ * Which glyph a row carries. A closed union, unlike `ProductMark`'s `slug`:
+ * these four are the package's own chrome rather than a registry Identity owns
+ * and can run ahead of, so there is no served value to degrade from. A row that
+ * wants no glyph omits the field and keeps the empty lane -- see `.lane` in
+ * AccountMenu.module.css for why the lane stays.
+ */
+export type AccountMenuIcon = 'person' | 'settings' | 'switch' | 'signOut';
+/** The glyph for each name, keyed so the row renders one lookup and no switch. */
+export declare const ACCOUNT_MENU_ICONS: Record<AccountMenuIcon, (className?: string) => ReactElement>;

package/dist/components/AccountMenu/labels.d.ts

@@ -0,0 +1,39 @@
+/** Every user-facing string the account menu renders that is not row data. */
+export interface AccountMenuLabels {
+    /**
+     * The panel's accessible name. A disclosure panel carries no widget role, so
+     * an `aria-label` is the only thing that names it (ADR-0010). Default
+     * "Account".
+     *
+     * It names the control rather than the person in it: the person's name and
+     * email are inside the panel and a screen reader reaches them on the way
+     * through, so putting them in the name as well says them twice.
+     */
+    panel: string;
+}
+/**
+ * The English defaults. A consumer that passes nothing renders English.
+ *
+ * Frozen because it is a public export reaching four products on a version bump:
+ * `const` protects the binding and not the contents, so without the freeze a
+ * consumer aliasing it -- `const mine = defaultAccountMenuLabels; mine.panel =
+ * 'Compte'` -- renames every account menu in the process (B33-877). The freeze
+ * carries no `: AccountMenuLabels` annotation on purpose; the annotation widens
+ * `Readonly<...>` back to mutable in the emitted declaration file and makes the
+ * freeze runtime-only (B33-916). `satisfies` checks the shape without widening.
+ */
+export declare const defaultAccountMenuLabels: Readonly<{
+    panel: string;
+}>;
+/**
+ * Merge a consumer's partial `labels` onto the English defaults, treating an
+ * explicitly-`undefined` field as unsupplied -- the same resolution
+ * `resolveWalletChipLabels` and `resolveAppSwitcherLabels` perform.
+ *
+ * A next-intl `t('...')` returns `undefined` on a missed key, so
+ * `{ panel: undefined }` is what one missing translation looks like at the call
+ * site. A plain object spread copies that `undefined` across and leaves the
+ * panel with an empty `aria-label`, which is the one thing naming it; a per-field
+ * skip does not (B33-873).
+ */
+export declare function resolveAccountMenuLabels(labels?: Partial<AccountMenuLabels>): AccountMenuLabels;

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

@@ -1,6 +1,5 @@
 import { ElementType, ReactNode } from 'react';
 import { TopBarProps } from '../TopBar/TopBar';
-import { PageHeaderProps } from '../PageHeader/PageHeader';
 /** One nav row, described as data. The consumer never hands the shell markup. */
 export interface AppShellNavItem {
     /** The row's name. Truncates rather than wrapping; on the rail it collapses to the accessibility tree. */
@@ -25,24 +24,51 @@ export interface AppShellNavSection {
 }
 export interface AppShellProps {
     /**
-     * The product this shell renders for. The consumer names it once, here, and
-     * the shell carries it down -- it labels the sidebar and its navigation, and
-     * nothing above the nav (the Boost33 wordmark and brand) changes between
-     * products. This one prop is the whole of the shell's product-awareness.
+     * The accessible name of the sidebar landmark. A display string in the
+     * consumer's own language -- usually the product's name -- that reaches
+     * `aria-label` on the `<aside>` and is never rendered as text.
+     *
+     * **It is an accessible name, not product-awareness.** This prop was called
+     * `product` and its comment claimed it was "the whole of the shell's
+     * product-awareness" (B33-1272). Nothing branches on it, nothing is looked up
+     * with it, and no artwork or copy changes because of it -- so the comment
+     * described a mechanism that did not exist and sent the next reader looking
+     * for the rest of it. The shell is product-aware through `nav`, `switcher`,
+     * `wallet` and `footer`, which are the product's own data.
+     *
+     * **Not the Identity slug.** `AppSwitcher.currentSlug` takes that
+     * (`"wallet"`, `"boostscore"`); this takes what a person would read
+     * ("Wallet"). The shell carries two names for one product and nothing in the
+     * types connects them, so check which kind of string each prop wants.
      */
-    product: string;
+    label: string;
+    /**
+     * The accessible name of the navigation landmark inside the sidebar.
+     * **Defaults to `label`, which is today's behaviour and not the fix.**
+     *
+     * Pass a distinct string here. Without one the `<aside>` and the `<nav>`
+     * nested inside it carry the same accessible name, and a screen-reader user
+     * moving by landmark hears "Wallet complementary" then "Wallet navigation" --
+     * the name doing none of the distinguishing that is the one job a landmark
+     * label has (B33-1272). Something like "Wallet sections" or "Wallet pages",
+     * in your language, resolves it.
+     *
+     * **The package cannot default this to anything better, which is why the
+     * fallback is the default.** A sensible default would have to compose a word
+     * -- "navigation", "sections" -- and that word is user-facing text a screen
+     * reader reads aloud, so it would have to be in the consumer's language. Both
+     * consumers default to French. This package hardcodes no user-facing English
+     * (`tests/no-hardcoded-strings.test.ts`), and a composed English default would
+     * ship an untranslatable word into assistive output for every consumer that
+     * never noticed the prop. Repeating `label` is at least a name the consumer
+     * chose and wrote in their own language. So the duplicate name is only fully
+     * resolved by a consumer passing this.
+     */
+    navLabel?: 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 page header's content -- the page title, its optional subtitle and
-     * trailing controls. Omit it for a screen that has no title: the Wallet's own
-     * overview is one, which is why its 9 Sep baseline shows the top bar's
-     * hairline sitting directly on the body (B33-750). The header draws no border
-     * of its own, so dropping it leaves that hairline in place rather than a gap.
-     */
-    pageHeader?: PageHeaderProps;
     /** The Boost33 mark for the wordmark lockup. Passed in, the way Wordmark takes it; on the rail it is all that shows. */
     mark?: ReactNode;
     /**
@@ -67,14 +93,41 @@ export interface AppShellProps {
     collapsed?: boolean;
     /**
      * The element every linked nav row renders through. Defaults to a plain `a`;
-     * a consumer whose router owns navigation passes its own once here and the
-     * shell threads it to every row, so the whole nav goes client-side with the
+     * a consumer whose router owns navigation passes its own here and the shell
+     * threads it to every row of `nav`, so the whole nav goes client-side with the
      * locale prefix intact rather than full-page-reloading (B33-847). This is the
      * shell's one nod to how a consumer routes -- it renders the element, never
      * knowing what it is. See docs/adr/0011.
+     *
+     * **It reaches the rows of `nav` and nothing else.** The slots (`switcher`,
+     * `wallet`, `footer`, `topBar.actions`) are `ReactNode`s the consumer has
+     * already created, so the shell cannot put a prop on what is inside one. A
+     * consumer composing a link-bearing component into a slot -- `AppSwitcher`,
+     * `AccountMenu`, `NotificationCenter` -- passes `linkComponent` to that
+     * component as well, or its rows stay bare anchors and reload the page. The
+     * Wallet shipped exactly that defect (B33-1281) by reading this prop as the
+     * single place, which is the 2026-10-06 correction on docs/adr/0011.
      */
     linkComponent?: ElementType;
-    /** The page body. Sits on white, below the header. */
+    /**
+     * The page body. Sits on white, below the top bar, and the shell renders it
+     * inside the page's `<main>` -- so a consumer adds no wrapper of its own.
+     *
+     * **The page's title goes here too.** A screen with a title renders
+     * `PageHeader` as the first thing in its own body; a screen with none renders
+     * nothing and the top bar's hairline sits straight on the content, which is
+     * what the Wallet's overview does and what its 9 Sep baseline shows. The
+     * shell used to take a `pageHeader` prop and draw the header itself, above
+     * this; B33-1267 removed it, because no consumer ever passed it and Score
+     * forbids it by test (the page below owns the sole `h1`).
+     *
+     * **Everything here scrolls.** This box is the shell's one scrolling element,
+     * so the sidebar and top bar stay pinned and the page header goes up with the
+     * body. The removed prop sat outside the scroll box and pinned the header
+     * instead -- the one real difference between the two spellings, and the
+     * reason the choice was worth collapsing to one rather than leaving to a
+     * consumer to discover on a long page.
+     */
     children: ReactNode;
 }
-export declare function AppShell({ product, nav, topBar, pageHeader, mark, switcher, wallet, footer, collapsed, linkComponent, children, }: AppShellProps): import("react").JSX.Element;
+export declare function AppShell({ label, navLabel, nav, topBar, mark, switcher, wallet, footer, collapsed, linkComponent, children, }: AppShellProps): import("react").JSX.Element;

package/dist/components/AppShell/AppShell.js

@@ -1,59 +1,57 @@
 import { jsxs as i, jsx as r } from "react/jsx-runtime";
 import { Sidebar as b } from "../Sidebar/Sidebar.js";
-import { NavSection as x } from "../NavSection/NavSection.js";
-import { NavItem as S } from "../NavItem/NavItem.js";
-import { TopBar as g } from "../TopBar/TopBar.js";
-import { PageHeader as j } from "../PageHeader/PageHeader.js";
-import { Wordmark as k } from "../Wordmark/Wordmark.js";
-import l from "./AppShell.module.css.js";
-function q({
-  product: e,
+import { NavSection as k } from "../NavSection/NavSection.js";
+import { NavItem as x } from "../NavItem/NavItem.js";
+import { TopBar as S } from "../TopBar/TopBar.js";
+import { Wordmark as g } from "../Wordmark/Wordmark.js";
+import a from "./AppShell.module.css.js";
+function T({
+  label: e,
+  navLabel: t,
   nav: d,
   topBar: h,
-  pageHeader: m,
   mark: v,
-  switcher: o,
-  wallet: c,
-  footer: s,
-  collapsed: n = !1,
+  switcher: m,
+  wallet: o,
+  footer: c,
+  collapsed: l = !1,
   linkComponent: f,
   children: p
 }) {
-  return /* @__PURE__ */ i("div", { className: l.shell, children: [
-    /* @__PURE__ */ i(b, { label: e, collapsed: n, children: [
-      /* @__PURE__ */ r("div", { className: l.wordmark, children: /* @__PURE__ */ r(k, { mark: v, collapsed: n }) }),
-      o != null && /* @__PURE__ */ r("div", { className: l.switcher, children: o }),
-      /* @__PURE__ */ r("nav", { "aria-label": e, className: l.nav, children: d.map((t, u) => (
+  return /* @__PURE__ */ i("div", { className: a.shell, children: [
+    /* @__PURE__ */ i(b, { landmarkLabel: e, collapsed: l, children: [
+      /* @__PURE__ */ r("div", { className: a.wordmark, children: /* @__PURE__ */ r(g, { mark: v, collapsed: l }) }),
+      m != null && /* @__PURE__ */ r("div", { className: a.switcher, children: m }),
+      /* @__PURE__ */ r("nav", { "aria-label": t ?? e, className: a.nav, children: d.map((s, u) => (
         // 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(x, { label: n ? void 0 : t.label, children: t.items.map((a, N) => /* @__PURE__ */ r(
-          S,
+        /* @__PURE__ */ r(k, { label: l ? void 0 : s.label, children: s.items.map((n, N) => /* @__PURE__ */ r(
+          x,
           {
-            icon: a.icon,
-            active: a.active,
-            collapsed: n,
-            count: a.count,
-            countUrgent: a.countUrgent,
-            href: a.href,
+            icon: n.icon,
+            active: n.active,
+            collapsed: l,
+            count: n.count,
+            countUrgent: n.countUrgent,
+            href: n.href,
             linkComponent: f,
-            children: a.label
+            children: n.label
           },
           N
         )) }, u)
       )) }),
-      (c != null || s != null) && /* @__PURE__ */ i("div", { className: l.foot, children: [
-        c,
-        s
+      (o != null || c != null) && /* @__PURE__ */ i("div", { className: a.foot, children: [
+        o,
+        c
       ] })
     ] }),
-    /* @__PURE__ */ i("div", { className: l.main, children: [
-      /* @__PURE__ */ r(g, { ...h }),
-      m != null && /* @__PURE__ */ r(j, { ...m }),
-      /* @__PURE__ */ r("div", { className: l.content, children: p })
+    /* @__PURE__ */ i("div", { className: a.main, children: [
+      /* @__PURE__ */ r(S, { ...h }),
+      /* @__PURE__ */ r("main", { className: a.content, children: p })
     ] })
   ] });
 }
 export {
-  q as AppShell
+  T 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 { PageHeader, type PageHeaderProps } from '../PageHeader/PageHeader'\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 product this shell renders for. The consumer names it once, here, and\n   * the shell carries it down -- it labels the sidebar and its navigation, and\n   * nothing above the nav (the Boost33 wordmark and brand) changes between\n   * products. This one prop is the whole of the shell's product-awareness.\n   */\n  product: 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  /**\n   * The page header's content -- the page title, its optional subtitle and\n   * trailing controls. Omit it for a screen that has no title: the Wallet's own\n   * overview is one, which is why its 9 Sep baseline shows the top bar's\n   * hairline sitting directly on the body (B33-750). The header draws no border\n   * of its own, so dropping it leaves that hairline in place rather than a gap.\n   */\n  pageHeader?: PageHeaderProps\n  /** The Boost33 mark for the wordmark lockup. Passed in, the way Wordmark takes it; on the rail it is all that shows. */\n  mark?: ReactNode\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 once here and the\n   * shell threads it to every row, so the whole nav goes client-side with the\n   * locale prefix intact rather than full-page-reloading (B33-847). This is the\n   * shell's one nod to how a consumer routes -- it renders the element, never\n   * knowing what it is. See docs/adr/0011.\n   */\n  linkComponent?: ElementType\n  /** The page body. Sits on white, below the header. */\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, page header -- into one thing a product imports instead\n// of building a sidebar. Product-aware only through `product`; everything below\n// that is the product's own data, and nothing above it changes.\nexport function AppShell({\n  product,\n  nav,\n  topBar,\n  pageHeader,\n  mark,\n  switcher,\n  wallet,\n  footer,\n  collapsed = false,\n  linkComponent,\n  children,\n}: AppShellProps) {\n  return (\n    <div className={styles.shell}>\n      <Sidebar label={product} collapsed={collapsed}>\n        <div className={styles.wordmark}>\n          <Wordmark mark={mark} collapsed={collapsed} />\n        </div>\n        {switcher != null && <div className={styles.switcher}>{switcher}</div>}\n        <nav aria-label={product} 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      <div className={styles.main}>\n        <TopBar {...topBar} />\n        {pageHeader != null && <PageHeader {...pageHeader} />}\n        <div className={styles.content}>{children}</div>\n      </div>\n    </div>\n  )\n}\n"],"names":["AppShell","product","nav","topBar","pageHeader","mark","switcher","wallet","footer","collapsed","linkComponent","children","jsxs","styles","Sidebar","jsx","Wordmark","section","sectionIndex","NavSection","item","itemIndex","NavItem","TopBar","PageHeader"],"mappings":";;;;;;;;AA6FO,SAASA,EAAS;AAAA,EACvB,SAAAC;AAAA,EACA,KAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,MAAAC;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,OAAOb,GAAS,WAAAQ,GACvB,UAAA;AAAA,MAAA,gBAAAM,EAAC,OAAA,EAAI,WAAWF,EAAO,UACrB,4BAACG,GAAA,EAAS,MAAAX,GAAY,WAAAI,GAAsB,EAAA,CAC9C;AAAA,MACCH,KAAY,QAAQ,gBAAAS,EAAC,SAAI,WAAWF,EAAO,UAAW,UAAAP,GAAS;AAAA,MAChE,gBAAAS,EAAC,OAAA,EAAI,cAAYd,GAAS,WAAWY,EAAO,KACzC,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,IACA,gBAAAI,EAAC,OAAA,EAAI,WAAWC,EAAO,MACrB,UAAA;AAAA,MAAA,gBAAAE,EAACQ,GAAA,EAAQ,GAAGpB,GAAQ;AAAA,MACnBC,KAAc,QAAQ,gBAAAW,EAACS,GAAA,EAAY,GAAGpB,EAAA,CAAY;AAAA,MACnD,gBAAAW,EAAC,OAAA,EAAI,WAAWF,EAAO,SAAU,UAAAF,EAAA,CAAS;AAAA,IAAA,EAAA,CAC5C;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 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. */\n  mark?: ReactNode\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`, so the whole nav goes client-side with the\n   * locale prefix intact rather than full-page-reloading (B33-847). This is the\n   * shell's one nod to how a consumer routes -- it renders the element, never\n   * knowing what it is. See docs/adr/0011.\n   *\n   * **It reaches the rows of `nav` and nothing else.** The slots (`switcher`,\n   * `wallet`, `footer`, `topBar.actions`) are `ReactNode`s the consumer has\n   * already created, so the shell cannot put a prop on what is 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  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} />\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","switcher","wallet","footer","collapsed","linkComponent","children","jsxs","styles","Sidebar","jsx","Wordmark","section","sectionIndex","NavSection","item","itemIndex","NavItem","TopBar"],"mappings":";;;;;;;AAyJO,SAASA,EAAS;AAAA,EACvB,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,KAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC;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,eAAeb,GAAO,WAAAQ,GAC7B,UAAA;AAAA,MAAA,gBAAAM,EAAC,OAAA,EAAI,WAAWF,EAAO,UACrB,4BAACG,GAAA,EAAS,MAAAX,GAAY,WAAAI,GAAsB,EAAA,CAC9C;AAAA,MACCH,KAAY,QAAQ,gBAAAS,EAAC,SAAI,WAAWF,EAAO,UAAW,UAAAP,GAAS;AAAA,MAMhE,gBAAAS,EAAC,OAAA,EAAI,cAAYb,KAAYD,GAAO,WAAWY,EAAO,KACnD,UAAAV,EAAI,IAAI,CAACc,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,GAAGnB,GAAQ;AAAA,MA0BpB,gBAAAW,EAAC,QAAA,EAAK,WAAWF,EAAO,SAAU,UAAAF,EAAA,CAAS;AAAA,IAAA,EAAA,CAC7C;AAAA,EAAA,GACF;AAEJ;"}

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

@@ -1,20 +1,20 @@
-const n = "_shell_1iynb_10", t = "_wordmark_1iynb_20", o = "_switcher_1iynb_26", _ = "_foot_1iynb_33", s = "_nav_1iynb_45", c = "_main_1iynb_54", i = "_content_1iynb_65", e = {
-  shell: n,
-  wordmark: t,
+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: s,
-  main: c,
-  content: i
+  nav: n,
+  main: s,
+  content: h
 };
 export {
-  i as content,
+  h as content,
   e as default,
   _ as foot,
-  c as main,
-  s as nav,
-  n as shell,
+  s as main,
+  n as nav,
+  t as shell,
   o as switcher,
-  t as wordmark
+  c as wordmark
 };
 //# sourceMappingURL=AppShell.module.css.js.map

package/dist/components/AppSwitcher/AppSwitcher.d.ts

@@ -66,7 +66,29 @@ export interface AppSwitcherAccount {
     initials: string;
     /** The line beneath the name, preformatted, e.g. "Admin · 2 workspaces". */
     description: string;
-    /** Chosen -- opens the workspace panel. */
+    /**
+     * Chosen -- opens the workspace panel.
+     *
+     * **It is also what makes the row a control.** Supplied, the row is the
+     * `<button>` it has always been, with the chevron pointing at the panel it
+     * opens. Omitted, the row still draws -- the organisation and its workspace
+     * count are facts about the account whether or not anything opens -- but as a
+     * plain `<div>`: no chevron, no hover step, no tab stop (B33-1270).
+     *
+     * Both consumers ship it unarmed today, because the panel it would open is
+     * B33-493's and unbuilt: see the comment on `account` in
+     * `boostscore/components/app-shell/product-switcher.tsx` ("the Wallet's
+     * migration left the same row inert for the same reason"). Before this gate
+     * existed they got a button that swallowed a click and did nothing, and no way
+     * to reach it -- `.accountRow`'s class name is CSS-Modules-hashed.
+     *
+     * The whole row is not removed, and that is deliberate. ADR-0010's "Not
+     * entitled is not disabled" is the nearest settled reasoning: a row that
+     * carries information is not the component's to withhold, and `aria-disabled`
+     * does not belong on something nobody can act on anyway. So the information
+     * stays and the affordances go. Nor is the button `disabled` -- that is still
+     * a control a consumer cannot remove.
+     */
     onSelect?: () => void;
 }
 export interface AppSwitcherProps {