@boost33/ui 0.8.0-next.5 → 0.8.0

package/CHANGELOG.md

@@ -31,662 +31,690 @@ 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:
+### Added — `CommandPalette`, Stage A only. **Not releasable: it has not passed its fidelity gate** (B33-495)
 
-- **`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, now
-  optional and deprecated, and is ignored: a labels object that sets it still
-  compiles, and a catalogue typed as a full `AppSwitcherLabels` no longer has to
-  carry it. 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. In development, passing
-  `account` logs a console warning once (`process.env.NODE_ENV` other than
-  `production`); production builds are silent.
-- **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).
+**Do not include this component in a release.** `CommandPalette` is exported from
+`src/index.ts` and will appear in `dist/`, and a consumer who finds it there and
+renders it is rendering an unapproved view. It is Stage A under `CLAUDE.md`'s
+presentational-first rule: static markup, reproduced from Paper's
+"CommandPalette — search" artboard, with **no state, no handlers and no data**.
+The Wallet never rendered a palette, so there is no captured referent and no
+approved measurement anywhere — `CLAUDE.md` is explicit that before the gate
+nothing is authoritative and Paper is only a starting drawing. It becomes
+releasable when a person opens the specimen route, approves it, captures the
+first *designed* baseline themselves, and writes the measurements they approved
+into the spec document in the same session. Until all three have happened, cut
+this out of the release or hold the release.
 
-The 56px rail keeps working, icon-only. The redesign draws no rail, so it gets
-no new design.
+What exists today, and what does not:
 
-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.
+| | |
+| --- | --- |
+| Draws | the search row, three result groups with their headings, the footer legend, and an empty state |
+| Takes | `groups`, `query`, `activeResultId`, `labels`, `linkComponent` |
+| Does **not** | open, close, trap focus, mark anything `inert`, register `⌘K`, dismiss on Escape or a backdrop click, or move a highlight |
 
-### Changed — the shell redesign, part 3 of 3: the sidebar action, and every button on three tiers (B33-1713)
+**It takes grouped results as props and owns no search index.** Pages, Products
+and Actions are all the host's, decided on B33-495 on 2026-10-06. There is no
+cross-suite index in any repo and this component does not imply one: a palette
+over one product's pages is a smaller promise than the artboard's description
+("across the whole suite") makes, and that is accepted so the component is not
+held behind an architectural gap. Taking results as props is scope-agnostic —
+four products' results render exactly as one product's do — so a real index later
+changes what is passed in, not what is here.
 
-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).
+A result that navigates renders through `linkComponent` (ADR-0011); one with no
+`href` is an action and stays a `<button>`, with no handler until Stage B. Each
+result's glyph is the host's `icon`, because the groups are the host's and
+nothing here can map one to a glyph without learning what a host's group means.
+The markup is the combobox-over-listbox ADR-0010 settled for this component —
+`role="combobox"` on the input naming the highlighted row through
+`aria-activedescendant`, `role="listbox"` on the list, `role="option"` on each
+result, `role="group"` on each group — and that is markup, not traversal; what
+the arrow keys do is Stage B's to implement.
 
-What a consumer sees, and what it has to do:
+Every user-facing string is a prop with an English default
+(`defaultCommandPaletteLabels`, exported and frozen), resolved through the same
+`Partial` + `undefined`-skipping merge `WalletChip` uses, so one missed
+translation key falls back to English rather than leaving the panel's only
+control unnamed (B33-873, B33-877, and the contract B33-1007 asks the package to
+converge on).
 
-- **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.
+**New token: `--container-command-palette: 560px`**, the panel's width, read off
+the artboard and recorded in `data/paper-tokens.json` as **provisional** — it is
+the drawing's number, not an approved measurement, and the person at the gate may
+move it. It is the only token this change adds; everything else draws on tokens
+that already existed.
 
-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.
+`TopBar` is unchanged. There is still no `⌘K` badge in the bar and still no
+`aria-haspopup` on the search button — both arrive with the panel, in Stage B.
 
-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.
+Not in `dist/` and not a consumer's business: the specimen route showing the four
+states, their `SPECIMEN_ONLY` records (none of them is screenshot-gated, because
+a *designed* baseline is the gate's to capture and never an agent's), and
+`tests/command-palette.test.tsx`.
+### Added — `AccountMenu`, Stage A only, **not yet through its fidelity gate** (B33-493)
 
-### Changed — the shell redesign, part 2 of 3: the top bar, the token chip, the bell (B33-1712)
+> [!danger] Do not include this component in a release until a human has approved
+> it. `AccountMenu` has **not passed its fidelity gate.** Nobody has yet looked at
+> it beside a reference and said yes, no baseline exists for it, and no measurement
+> it draws with has been written into the spec. `CLAUDE.md` is explicit about what
+> that means for the three components the Wallet never rendered: "Before the gate,
+> nothing is authoritative", and the gate is where the referent is created rather
+> than checked. Until that session has happened — a person opening the specimen
+> route, judging the component, capturing the first baseline themselves, and
+> recording the approved measurements in the spec in the same pass — every number
+> this component renders is provisional and may change in a way that moves pixels
+> in your app. **If you are cutting a release, either hold this entry back or get
+> the gate done first.**
 
-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).
+The twelfth component. The account menu's **panel**: the signed-in person, the
+organisation they are acting in, and the rows into Settings and out of the
+session. Exported as `AccountMenu`, with `AccountMenuProps`,
+`AccountMenuPerson`, `AccountMenuOrg`, `AccountMenuGroup`, `AccountMenuItem`,
+`AccountMenuIcon`, `AccountMenuLabels` and `defaultAccountMenuLabels`.
 
-What a consumer sees, and what it has to do:
+**It is the panel and nothing else — no trigger, no open state, no dismissal.**
+That is not an unfinished half of trigger-plus-panel; it is the part of this
+component the two reference drawings agree about. Paper's 004 Components artboard
+and its origin on 103 Identity are identical in every property of the panel, and
+they disagree about the anchor above it and about where the panel sits relative to
+that anchor. Choosing between them is the gate-holder's, so the component takes no
+anchor, does no positioning, and leaves `TopBar` untouched. Nothing in this release
+changes `TopBar`.
 
-- **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. So in development, passing `breadcrumb` -- to `TopBar`
-  or through AppShell `topBar` -- logs a console warning once, naming where a
-  toggle and an organisation switcher go instead; production builds are silent.
-- **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).
+**What a consumer does with it today: nothing.** Render it and you get a static
+panel. It holds no state, so it cannot be opened or closed, and it wires no
+handlers, so `Sign out` is a `<button>` that does nothing when pressed. Wiring it
+to `useAnchoredOverlay`, giving the anchor its `aria-expanded`, and deciding what
+each row does are Stage B, after the gate (`CLAUDE.md`, "Presentational-first").
 
-The 56px rail keeps working, icon-only, and gets no new design. The top bar
-does not collapse.
+**The shape, so it is legible from here:**
 
-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.
-
-### Added and fixed — the release candidate (0.8.0-next.5)
+- `person` is `{ name, email, avatarUrl? }`. With no `avatarUrl` the circle draws
+  bare, which is what the drawings show; with one, the image is decorative and
+  takes an empty `alt`, because the person's name is on the line beside it.
+- `org` is `{ name, initials, role? }`. The initials are decorative; omitting
+  `role` draws no pill rather than an empty one.
+- `groups` is a list of `{ id, items }`, and **a hairline is drawn above every
+  group** — which is what separates the identity blocks from the first group as
+  well as each group from the last. Grouped rather than an `items` array plus a
+  named `footer`, because "footer" would be this package inventing a meaning for
+  the second group.
+- an item is `{ id, label, description?, href?, icon? }`. **Whether a row
+  navigates is decided by `href` and nothing else** (ADR-0011): with an `href` the
+  row is a link and renders through `linkComponent`; without one it is an action
+  and stays a `<button type="button">`. So the package never has to know which of
+  Profile, Settings, Switch account and Sign out your product treats as a
+  navigation. `icon` names one of four glyphs the package draws
+  (`'person' | 'settings' | 'switch' | 'signOut'`); omit it and the glyph lane
+  stays, empty, so the row labels still line up in one column.
+- `linkComponent` is the ADR-0011 escape hatch, unchanged from `NavItem` and
+  `AppSwitcher`: an `ElementType` defaulting to `'a'`, receiving `href`,
+  `className` and the row's `data-*`/`aria-*` through unchanged.
+- `labels` is `Partial<AccountMenuLabels>` and holds **one** field, `panel`,
+  default `"Account"` — the panel's accessible name, which a disclosure panel has
+  no other way to get (ADR-0010). Everything else a person reads is row data you
+  supply, and therefore translates by construction.
 
-Every new prop and label key here is optional, so an app moving from next.4
-changes only its version pin.
+**The label contract is the `WalletChip`'s, deliberately and in full.** `labels`
+is a `Partial`, a field supplied as `undefined` (what a missed next-intl key looks
+like) falls back to English rather than blanking the panel's name, and
+`defaultAccountMenuLabels` is frozen with no type annotation so the freeze
+survives into the emitted `.d.ts`. That is three of this repo's own fixed bugs
+(B33-873, B33-877, B33-916) taken as the starting point rather than repeated.
+B33-1007 records `AppSwitcher` still diverging on the last of the three; this
+component does not add a fourth dialect, and the switcher's remaining divergence
+is unchanged here and still that ticket's.
 
-- **French figures show their grouping space.** CLDR groups French thousands
-  with a narrow no-break space (U+202F), and the kit's faces draw it at almost
-  nothing: 1.9px in Inter at 14px, 4.1px in Outfit at 40px. So the token
-  popover read "1500" while the chip read "1 500" (Brokers). Every figure the
-  chip formats (`formatTokens`, the rail's short form, the threshold
-  percentage) now uses an ordinary no-break space (U+00A0) instead. It is
-  visible in every face and still never wraps. en-US output is unchanged.
-  If your tests compare against `Intl.NumberFormat('fr-FR')` output, apply the
-  same swap.
-- **`NotificationButton`** (Content):
-  - `unreadCount?: number` goes into the accessible name ("Notifications,
-    3 unread", new optional label `unreadCount`, `%count%`). Above 0 it draws
-    the dot. The figure itself is not drawn: board 20 draws a dot.
-  - `expanded?: boolean` and `controls?: string` become `aria-expanded` and
-    `aria-controls` when it opens a panel. Button form only.
-  - `ref` reaches the rendered button or link (React 19 passes `ref` as a
-    prop; the link form needs a `linkComponent` that forwards it, as next/link
-    does).
-- **`AppShellAction.active?: boolean`** (Off Market): on the action's own page,
-  the link form carries `aria-current="page"` and both forms keep the primary
-  tier's pressed ground (`.primary[data-active='true']`, its hover colour, in
-  either tone).
-- **`countLabel?: string`** on `NavItem` and `AppShellNavItem` (Off Market):
-  what a screen reader hears for `count` ("3 à ouvrir"). Given, the visible
-  number is hidden from assistive tech and this is read instead.
-- **`attrs?: NavItemAttrs`** on `NavItem` and `AppShellNavItem` (Outbound):
-  `data-*` attributes for the row, such as a tour's `data-tour`. Only `data-*`
-  names are accepted (also filtered at runtime), and the row's own
-  `data-active`/`data-collapsed` win. New exported type `NavItemAttrs`.
-- **README: two consumer notes.**
-  - Map the `--boost33-font-*` hooks on `:root`, with `next/font`'s variable
-    classes on `<html>`. A mapping on `body` never reaches the kit (Outbound).
-  - **Never pass a function from a Server Component to `AppSwitcher` or
-    `WalletChip`**, the package's client components: `linkComponent`,
-    `onTopUp`, `onOpenChange`. Next refuses it and every signed-in render 500s
-    (Passport), and `renderToStaticMarkup` tests cannot see it. Render those
-    two inside a `'use client'` file of your own. The `linkComponent` docs on
-    both now say so.
-- No approved screenshot moves (see the commit for the comparison).
+**A disclosure, not a menu** (ADR-0010): no widget role on the panel, no role on
+the rows, every row the real `<a>` or `<button>` it already is, so Tab walks them
+in the document's own order.
 
-### Fixed — the top bar fits at 1024px; the token popover stays on screen (0.8.0-next.4)
+**Three new tokens, all three read off an unapproved drawing.** They reach your
+app through `./style.css` and `./theme.css` like every other token, and the
+derivation comment on each says in as many words that the value is not settled:
 
-- **Below 80rem of bar, the centre group's two labels leave the screen.**
-  next.3 stopped the regions overlapping, but the centre does not shrink, so at
-  1024px Content's bar still needed 1067px and clipped the avatar. Now
-  "Switch Tools →" and "Check Your Tokens →" are hidden visually wherever the
-  bar's content box is under 80rem (1280px; a full-width bar in a window under
-  1344px) and the centre gives back about 280px. They stay in the
-  accessibility tree, before the control each introduces, so a screen reader
-  hears the same thing at every width. A container query on the bar
-  (`container: boost33-top-bar / inline-size`), so a bar narrower than the
-  window is measured by its own width. Measured in Chromium at 1024px with a
-  256px start group and either a 70px or a 220px actions group: no overflow and
-  no overlap. If you write container queries in the bar's slots, name your own
-  container: the bar is now a container.
-- **The token popover stays on screen.** It hangs from the pill's left edge and
-  is 340px wide. At 390px its right edge was at 535px, cutting the threshold
-  line and the reset note, and at 1024px it overshot by 8px. It now slides left
-  by exactly its overshoot to keep 16px from the right edge (never past 16px
-  from the left), and is never wider than the viewport less 32px. Both the
-  split chip and `totalOnly` do this. It is measured before paint and again on
-  resize.
-- **Below `chromeFrom` the shell fills the screen**: `min-height: 100dvh`
-  instead of next.3's `100%`, which resolved against app wrappers with no
-  height and left short pages ending grey (Content).
-- **No approved screenshot moves**: all 40 gated states measure the same with
-  and without these changes, each on a fresh specimen build.
+- `--container-account-menu: 312px` — the panel's width.
+- `--spacing-3_5: 14px` — the person block's block padding.
+- `--spacing-9_5: 38px` — the person block's avatar, the largest in the package.
 
-### Fixed — the top-bar token chip warns again past 80% of the grant; the top bar holds its layout (0.8.0-next.3)
+Nothing else in the package reads any of the three, so no existing rendering
+moves, and **no baseline moved**: all 27 gated states come back unchanged, because
+every token here is additive and no shared value was touched.
 
-- **The 80% threshold is back in the top bar.** 0.8.0-next.0 moved the chip to
-  the top bar without its threshold state, so a seller who had burned 87% of the
-  month's grant saw the same chip as one at 10%, and nothing here said so
-  (found by Score). `placement="topbar"` now reads `grantCycle` and
-  `burnedFraction` exactly as the sidebar card does (the consumer's
-  `burnedFraction` wins, otherwise it is derived from `grantCycle`, and with
-  neither nothing is claimed). Past 80%:
-  - with `grantCycle`, the bar in the chip and in the popover measures against
-    what the cycle started with, so it shortens and the burned share shows as
-    the warning-tinted track: the sidebar card's drawing (Jamal, 4 Nov 2026).
-    With `burnedFraction` alone there is no honest denominator, so the bar
-    stays full;
-  - the popover shows a line above the runway note, and the chip's accessible
-    name ends with it, so the warning is never colour alone. **New label
-    `thresholdNote`**, a template with `%percent%`, formatted for `locale`
-    ("87%", "87 %"). Default `You've used %percent% of this month's grant.`
-    A catalogue typed as a full `WalletChipLabels` must add it; that is the
-    typecheck catching a missing translation;
-  - the root carries `data-threshold="true"`. Buy tokens is unchanged: the
-    accent primary.
-  Keep passing `grantCycle` (or `burnedFraction`) to the top-bar chip.
-- **The top bar keeps its regions apart at any width.** At 1024px the start
-  group (mark and organisation pill) was given less than it held and painted
-  across "Switch Tools →" (Content, Wallet, Activity, Outbound). The bar is now
-  a three-column grid whose sides are never narrower than their contents: where
-  everything fits, the centre group sits in the middle as before; where it does
-  not, the centre moves off the middle instead of under the pill. Below that,
-  on a phone with no `chromeFrom`, the bar runs off the right edge in order
-  rather than piling up (Score). **No approved screenshot moves**: every gated
-  state measures the same pixel count with and without the change.
-- **The top bar is a `<header>`**, the page's banner landmark, so assistive tech
-  can jump to it and a test can scope to it (Score). `getByRole('banner')`
-  finds it. The census in `scripts/border-proof.ts` records the bar's hairline on
-  a `header` now; the pixels did not move.
-- **The popover's reset note ends on the date.** `grantedNote` defaults to
-  `Included each month · resets %date%`, without the `Resets %date%.`
-  full stop that printed "30 sept.." for a French date (Score). If you
-  translate it, keep punctuation off the end of `%date%`. `grantExpires` is one
-  date in both placements, the day this month's grant runs out and the next
-  lands. The sidebar says it as an expiry, the popover as a reset.
-- **Below `chromeFrom` the shell still fills its root** (`min-height: 100%`),
-  so a short page keeps the white ground to the bottom of the screen (Content).
-  Replaced by `100dvh` in next.4.
+**Four places where this does not reproduce its drawing**, each named at its rule
+in `AccountMenu.module.css`, and each because the drawn value is not a step this
+package's token set holds and the nearest step is within about a pixel — the trade
+`PageHeader` already records for `--leading-tight` against Paper's 30px. The row's
+glyph-to-text gap (11px drawn, `--spacing-2_5` here); the person block's
+name-to-email gap (3px drawn, `--spacing-0_5`, which is what the rows draw for the
+same relationship); two 10px type sizes (`--text-2xs`); and every line-height,
+because the drawing sets them in px and this package holds only percentages.
 
-### Added — `AppShell` gets out of the way on a phone: `chromeFrom` and `phoneChrome`
+**One open design question, recorded rather than decided.** This panel picks a row
+out with `--color-neutral-50`, where every other popover in the package uses
+`--color-surface-muted`, one neutral step darker. Reproduced as drawn and raised
+at the gate — the drawing was cloned from an Identity screen that predates the
+shared token pass, which is why it is the only popover in its own file still bound
+to literals.
 
-AppShell has no phone layout, and the 0.8 top bar runs off a 390px screen.
-Products keep their own phone chrome below a breakpoint, and until now the only
-ways to do that were a `matchMedia` switch (the desktop shell flashes on a phone
-before it swaps) or CSS reaching into the shell's DOM shape. Both options are opt-in;
-a shell that sets neither renders exactly as before.
+#### Not in `dist/`, and so not your concern
 
-- **`chromeFrom?: 'md' | 'lg' | 'xl'`** (new type `AppShellBreakpoint`). Below
-  that viewport width the shell hides its own top bar and sidebar, the page
-  body takes the full width, and the document scrolls instead of the shell's
-  content box. Done in the shell's own `@media` CSS, so the first paint is
-  already right, with no flash and no second render of the page. The widths are
-  Tailwind v4's defaults -- `md` 48rem (768px), `lg` 64rem (1024px), `xl` 80rem
-  (1280px) -- so `lg` here and `lg:` in your own markup flip at the same pixel.
-  It is a name and not a number because a media query cannot read a value
-  passed at runtime.
-- **`phoneChrome?: ReactNode`**: your phone header and navigation. The shell
-  draws it above the page body, outside `<main>`, and shows it only below
-  `chromeFrom`. Ignored without `chromeFrom`. The shell's wrapper around it
-  draws no box (`display: contents`), so a `position: sticky` header you pass
-  stays pinned while the page scrolls (fixed after 0.8.0-next.1, where it
-  scrolled away). Pass your phone chrome here and
-  drop any `lg:hidden` and any selector that hid the kit's bar or `<aside>` by
-  position: those depended on a DOM shape this package does not promise.
-- Not a mobile shell. Nothing is redesigned below the breakpoint; the shell only
-  stops drawing its desktop chrome. A phone design needs a board first.
-- The sidebar's development-only nav-height warning no longer fires when the
-  sidebar is hidden this way.
+The specimen gains an `AccountMenu` route with two sections, neither screenshot-gated
+and both recorded in `SPECIMEN_ONLY` with reasons: the panel, whose first baseline
+is a *designed* baseline only the person at the fidelity gate may capture, and a
+row rendered through a stand-in link component, which draws identically to the
+default by design. `tests/account-menu.test.tsx` adds 28 cases covering the
+structure, the row elements, the hairline-per-group rule, the label fallbacks and
+the ADR-0011 pass-through — none of them asserting geometry, which jsdom cannot
+see.
 
-### Note — in a Tailwind v4 app, `style.css` alone re-sizes the app's own utilities
+### Added — `NotificationCenter`, Stage A only, **not releasable yet** (B33-494)
 
-**Importing `@boost33/ui/style.css` changes what a Tailwind v4 app already has
-on screen, with or without `theme.css`.** Off Market and Brokers measured it
-adopting 0.8.0-next.0. This is not new in 0.8, but 0.8 is when Tailwind v4
-apps first take the shell.
+> [!danger] This component has not passed its fidelity gate and must not be
+> included in a release until it has.
+> `NotificationCenter` is exported from `src/index.ts`, which means it would be
+> published by any version cut from this state. Do not cut one. A human has not
+> yet opened the specimen route, judged the component, captured its first
+> baseline or written its measurements into the spec — and until all three happen
+> in one session, there is no referent for this component at all (`CLAUDE.md`,
+> "The three components the Wallet never rendered"). Nothing it draws is settled,
+> including the panel's 360px width and every space inside it.
+>
+> It is also only half built. Stage A is static: the panel renders and nothing
+> responds. The bell does not open it, Escape does not close it, the filters do
+> not filter and "Mark all as read" marks nothing. That is Stage B, and it lands
+> after the approval, not before.
 
-Why: `style.css` carries `tokens.css`, which declares this package's tokens on
-`:root`, unlayered, under the names Tailwind v4 itself uses (`--text-*`,
-`--leading-*`, `--tracking-*`, `--radius-*`, `--font-*`, `--font-weight-*`,
-`--color-*`). Tailwind's default utilities read those names through `var()`
-(`.text-sm { font-size: var(--text-sm) }`), and an unlayered declaration beats
-Tailwind's `@layer theme`. So in the app, `text-sm` becomes 13px (Tailwind's
-14px) with a 13px line height, `text-base` 15px (16px), and `rounded-sm`, `-md`,
-`-lg`, `-xl`, `-2xl` become 3/4/6/8/12px (4/6/8/12/16px). The `leading-*` and
-`tracking-*` steps move too.
+The panel behind the top bar's bell: everything the four products did, in one
+list, with the unread ones marked. Both states the design draws — populated and
+empty — ship from this package and appear in the specimen app.
 
-To keep your own scale, tell Tailwind to write literal values into its
-utilities so they never read `:root`. Either import Tailwind's theme inline:
+**It is presentational and it owns no feed.** The notifications arrive as a prop
+and this package neither fetches, stores nor subscribes to anything. There is no
+cross-product event source in any repo today, and a component that implied one
+would make the shared shell the place four services integrate — the opposite of
+the dependency direction every other component here has, and a straight
+contradiction of `CLAUDE.md`'s "it renders what it is given". That was decided on
+the ticket on 2026-10-06; the feed itself is separate work, outside 1.0.
 
-```css
-@layer theme, base, components, utilities;
-@import "tailwindcss/theme.css" layer(theme) theme(inline);
-@import "tailwindcss/preflight.css" layer(base);
-@import "tailwindcss/utilities.css" layer(utilities);
-@import "@boost33/ui/style.css";
+```tsx
+<NotificationCenter
+  items={[
+    {
+      id: 'n1',
+      slug: 'wallet',                       // optional: selects the ProductMark
+      title: 'Your granted tokens expire in 3 days',
+      source: 'Wallet',                     // the host's words, not a slug
+      time: '12 minutes ago',               // preformatted by the host
+      dateTime: '2026-10-06T09:48:00Z',     // optional: the <time> element's datetime
+      href: '/wallet/grants',               // optional: a row with nowhere to go is not a link
+      unread: true,                         // defaults to false
+    },
+  ]}
+  viewAllHref="/notifications"
+/>
 ```
 
-or pin each colliding name you use under `@theme inline { … }` with Tailwind's
-value. Either way the kit's components keep reading `:root` and render as
-designed. Brokers measured identical computed styles on all 12 of its pages
-with the first recipe.
+**The time arrives formatted, and that is a decision rather than an omission.**
+The obvious move is the one `WalletChip` makes for numbers — take a `locale` and
+format from a `Date` — and three things separate the two cases. A number is a
+pure function of its value and a locale; a *relative* time needs a `now`, so the
+component would read a clock and then either re-read it on a timer or go stale on
+screen, which is state in a component whose contract is that it has none. It
+would also make this component's own fidelity gate unreproducible: a designed
+baseline showing "12 minutes ago" from `Date.now()` is a different image an hour
+later. And the hard part is editorial — where a product cuts over from "12
+minutes ago" to "Yesterday" to a date is a policy each product may differ on, and
+`Intl.RelativeTimeFormat` does not decide it. The optional `dateTime` is how the
+machine-readable instant still reaches the page without this package deciding how
+to say it.
 
-`theme.css` is a separate, optional step on top of this. It adds utilities for
-names only this package has (`bg-surface`, `border-border`, …) and makes the
-kit's values the app's whole scale (ADR-0011, ADR-0012). Every kit component
-renders correctly without it (the specimen imports no `theme.css`). An app that
-used those utilities and drops `theme.css` loses them.
+**Every string is a prop with an English default**, in the same shape
+`WalletChipLabels` uses: `labels` is a `Partial`, a missing key falls back to
+English rather than blanking the UI (B33-873), `defaultNotificationCenterLabels`
+is frozen in the B33-916 spelling so writing to it is a compile error, and the
+one value-carrying string — the row's `{source} · {time}` line — is a template or
+a function, so a locale owns the word order and the separator. `AppSwitcher`'s
+contract still differs on the freeze; B33-1007 closes that by bringing the
+switcher to this shape, not by adding a fourth.
 
-The shell also sets `font-family: var(--font-sans)` (Inter) on its frame, so
-`children` inherit Inter unless the page sets its own family.
+The panel is a disclosure, not a menu and not an ARIA tab set (ADR-0010): no
+widget role, real links and buttons, and Tab is the document's own order, so the
+header action, both filters, every row and the footer link are each their own tab
+stop. Rows that navigate render through `linkComponent` (ADR-0011). The unread
+state is announced in words as well as drawn as a dot, because a colour reaches
+nobody on a screen reader.
 
-### Changed — `CHANGELOG.md` now ships inside the package
+Three further things it deliberately does not do: it does not sort, filter, page
+or truncate `items`, because each is a decision about data it does not own; it
+draws no "0" on the unread filter, because a zero pill reads as a state; and the
+empty rendering drops the filters, the header action and the footer rather than
+offering three controls over an empty list. The empty state is not an edge case —
+a host with no feed wired yet has nothing to pass, which makes it the rendering
+most consumers meet first.
 
-`package.json` `files` adds `CHANGELOG.md` next to `dist`, so this file is in
-the tarball at `node_modules/@boost33/ui/CHANGELOG.md`. Until now it reached a
-consumer only through the repository, which is a strange place to keep the one
-notice a consumer gets. Nothing in `dist/` changes. 0.5.0 and earlier were
-published without it, and a published version cannot be amended, so the first
-release to carry it is the one after 0.5.0. Repo-only otherwise: no import,
-prop or rendering changes.
+**`TopBar` is unchanged.** Its bell's `unread` prop still defaults to `false`, it
+still gains no `aria-haspopup`, and it still opens nothing. Connecting the two is
+Stage B.
 
-### Added — `CommandPalette`, Stage A only. **Not releasable: it has not passed its fidelity gate** (B33-495)
+## 0.8.0 — 2026-11-05
+
+**Breaking. Read the B33-1712 entry before you bump.** The 3 November 2026
+shell redesign (B33-1710) in three parts: the sidebar and the switcher
+(B33-1711), the top bar, the token chip and the bell (B33-1712), and the
+sidebar action with every button on three tiers (B33-1713). The switcher and
+the wallet chip move from the sidebar into the top bar, the bar stops drawing
+`breadcrumb`, and every button the package draws changes look. A minor under
+`0.x`, where a breaking change is allowed in one; the entries below are what
+tell you what to do.
+
+**The redesign passed its fidelity gate on 5 November 2026.** Jamal judged the
+specimen on 0.8.0-next.5 and approved it. The three part entries below say "no
+new baseline has been captured"; that was true when each landed and is not any
+more: eleven designed baselines (the two re-captured `appswitcher-*` states and
+nine `shell-redesign-*` states) were captured from the specimen at the gate and
+are now gated, and the measurements are in the spec, "Shell redesign, recorded
+at its gate, 5 November 2026". Repo-only: no import, prop or rendering changes.
+
+The entries for `0.8.0-next.1` to `next.5` are kept below as they were written
+for each prerelease. An app moving from `next.5` changes only its version pin;
+an app moving from `0.7.1` reads all of them.
+
+**Held back, as in 0.6.0 to 0.7.1:** the Stage A entries under Unreleased
+(`CommandPalette`, `AccountMenu`, `NotificationCenter`) have still not passed
+their fidelity gate and are not part of this release, even though their exports
+are present in `dist/`.
 
-**Do not include this component in a release.** `CommandPalette` is exported from
-`src/index.ts` and will appear in `dist/`, and a consumer who finds it there and
-renders it is rendering an unapproved view. It is Stage A under `CLAUDE.md`'s
-presentational-first rule: static markup, reproduced from Paper's
-"CommandPalette — search" artboard, with **no state, no handlers and no data**.
-The Wallet never rendered a palette, so there is no captured referent and no
-approved measurement anywhere — `CLAUDE.md` is explicit that before the gate
-nothing is authoritative and Paper is only a starting drawing. It becomes
-releasable when a person opens the specimen route, approves it, captures the
-first *designed* baseline themselves, and writes the measurements they approved
-into the spec document in the same session. Until all three have happened, cut
-this out of the release or hold the release.
+### Changed — the shell redesign, part 1 of 3: the sidebar and the app switcher (B33-1711)
 
-What exists today, and what does not:
+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.
 
-| | |
-| --- | --- |
-| Draws | the search row, three result groups with their headings, the footer legend, and an empty state |
-| Takes | `groups`, `query`, `activeResultId`, `labels`, `linkComponent` |
-| Does **not** | open, close, trap focus, mark anything `inert`, register `⌘K`, dismiss on Escape or a backdrop click, or move a highlight |
+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, now
+  optional and deprecated, and is ignored: a labels object that sets it still
+  compiles, and a catalogue typed as a full `AppSwitcherLabels` no longer has to
+  carry it. 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. In development, passing
+  `account` logs a console warning once (`process.env.NODE_ENV` other than
+  `production`); production builds are silent.
+- **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.
 
-**It takes grouped results as props and owns no search index.** Pages, Products
-and Actions are all the host's, decided on B33-495 on 2026-10-06. There is no
-cross-suite index in any repo and this component does not imply one: a palette
-over one product's pages is a smaller promise than the artboard's description
-("across the whole suite") makes, and that is accepted so the component is not
-held behind an architectural gap. Taking results as props is scope-agnostic —
-four products' results render exactly as one product's do — so a real index later
-changes what is passed in, not what is here.
+### Changed — the shell redesign, part 3 of 3: the sidebar action, and every button on three tiers (B33-1713)
 
-A result that navigates renders through `linkComponent` (ADR-0011); one with no
-`href` is an action and stays a `<button>`, with no handler until Stage B. Each
-result's glyph is the host's `icon`, because the groups are the host's and
-nothing here can map one to a glyph without learning what a host's group means.
-The markup is the combobox-over-listbox ADR-0010 settled for this component —
-`role="combobox"` on the input naming the highlighted row through
-`aria-activedescendant`, `role="listbox"` on the list, `role="option"` on each
-result, `role="group"` on each group — and that is markup, not traversal; what
-the arrow keys do is Stage B's to implement.
+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).
 
-Every user-facing string is a prop with an English default
-(`defaultCommandPaletteLabels`, exported and frozen), resolved through the same
-`Partial` + `undefined`-skipping merge `WalletChip` uses, so one missed
-translation key falls back to English rather than leaving the panel's only
-control unnamed (B33-873, B33-877, and the contract B33-1007 asks the package to
-converge on).
+What a consumer sees, and what it has to do:
 
-**New token: `--container-command-palette: 560px`**, the panel's width, read off
-the artboard and recorded in `data/paper-tokens.json` as **provisional** — it is
-the drawing's number, not an approved measurement, and the person at the gate may
-move it. It is the only token this change adds; everything else draws on tokens
-that already existed.
+- **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.
 
-`TopBar` is unchanged. There is still no `⌘K` badge in the bar and still no
-`aria-haspopup` on the search button — both arrive with the panel, in Stage B.
+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.
 
-Not in `dist/` and not a consumer's business: the specimen route showing the four
-states, their `SPECIMEN_ONLY` records (none of them is screenshot-gated, because
-a *designed* baseline is the gate's to capture and never an agent's), and
-`tests/command-palette.test.tsx`.
-### Added — `AccountMenu`, Stage A only, **not yet through its fidelity gate** (B33-493)
+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.
 
-> [!danger] Do not include this component in a release until a human has approved
-> it. `AccountMenu` has **not passed its fidelity gate.** Nobody has yet looked at
-> it beside a reference and said yes, no baseline exists for it, and no measurement
-> it draws with has been written into the spec. `CLAUDE.md` is explicit about what
-> that means for the three components the Wallet never rendered: "Before the gate,
-> nothing is authoritative", and the gate is where the referent is created rather
-> than checked. Until that session has happened — a person opening the specimen
-> route, judging the component, capturing the first baseline themselves, and
-> recording the approved measurements in the spec in the same pass — every number
-> this component renders is provisional and may change in a way that moves pixels
-> in your app. **If you are cutting a release, either hold this entry back or get
-> the gate done first.**
+### Changed — the shell redesign, part 2 of 3: the top bar, the token chip, the bell (B33-1712)
 
-The twelfth component. The account menu's **panel**: the signed-in person, the
-organisation they are acting in, and the rows into Settings and out of the
-session. Exported as `AccountMenu`, with `AccountMenuProps`,
-`AccountMenuPerson`, `AccountMenuOrg`, `AccountMenuGroup`, `AccountMenuItem`,
-`AccountMenuIcon`, `AccountMenuLabels` and `defaultAccountMenuLabels`.
+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).
 
-**It is the panel and nothing else — no trigger, no open state, no dismissal.**
-That is not an unfinished half of trigger-plus-panel; it is the part of this
-component the two reference drawings agree about. Paper's 004 Components artboard
-and its origin on 103 Identity are identical in every property of the panel, and
-they disagree about the anchor above it and about where the panel sits relative to
-that anchor. Choosing between them is the gate-holder's, so the component takes no
-anchor, does no positioning, and leaves `TopBar` untouched. Nothing in this release
-changes `TopBar`.
+What a consumer sees, and what it has to do:
 
-**What a consumer does with it today: nothing.** Render it and you get a static
-panel. It holds no state, so it cannot be opened or closed, and it wires no
-handlers, so `Sign out` is a `<button>` that does nothing when pressed. Wiring it
-to `useAnchoredOverlay`, giving the anchor its `aria-expanded`, and deciding what
-each row does are Stage B, after the gate (`CLAUDE.md`, "Presentational-first").
+- **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. So in development, passing `breadcrumb` -- to `TopBar`
+  or through AppShell `topBar` -- logs a console warning once, naming where a
+  toggle and an organisation switcher go instead; production builds are silent.
+- **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 shape, so it is legible from here:**
+The 56px rail keeps working, icon-only, and gets no new design. The top bar
+does not collapse.
 
-- `person` is `{ name, email, avatarUrl? }`. With no `avatarUrl` the circle draws
-  bare, which is what the drawings show; with one, the image is decorative and
-  takes an empty `alt`, because the person's name is on the line beside it.
-- `org` is `{ name, initials, role? }`. The initials are decorative; omitting
-  `role` draws no pill rather than an empty one.
-- `groups` is a list of `{ id, items }`, and **a hairline is drawn above every
-  group** — which is what separates the identity blocks from the first group as
-  well as each group from the last. Grouped rather than an `items` array plus a
-  named `footer`, because "footer" would be this package inventing a meaning for
-  the second group.
-- an item is `{ id, label, description?, href?, icon? }`. **Whether a row
-  navigates is decided by `href` and nothing else** (ADR-0011): with an `href` the
-  row is a link and renders through `linkComponent`; without one it is an action
-  and stays a `<button type="button">`. So the package never has to know which of
-  Profile, Settings, Switch account and Sign out your product treats as a
-  navigation. `icon` names one of four glyphs the package draws
-  (`'person' | 'settings' | 'switch' | 'signOut'`); omit it and the glyph lane
-  stays, empty, so the row labels still line up in one column.
-- `linkComponent` is the ADR-0011 escape hatch, unchanged from `NavItem` and
-  `AppSwitcher`: an `ElementType` defaulting to `'a'`, receiving `href`,
-  `className` and the row's `data-*`/`aria-*` through unchanged.
-- `labels` is `Partial<AccountMenuLabels>` and holds **one** field, `panel`,
-  default `"Account"` — the panel's accessible name, which a disclosure panel has
-  no other way to get (ADR-0010). Everything else a person reads is row data you
-  supply, and therefore translates by construction.
+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.
 
-**The label contract is the `WalletChip`'s, deliberately and in full.** `labels`
-is a `Partial`, a field supplied as `undefined` (what a missed next-intl key looks
-like) falls back to English rather than blanking the panel's name, and
-`defaultAccountMenuLabels` is frozen with no type annotation so the freeze
-survives into the emitted `.d.ts`. That is three of this repo's own fixed bugs
-(B33-873, B33-877, B33-916) taken as the starting point rather than repeated.
-B33-1007 records `AppSwitcher` still diverging on the last of the three; this
-component does not add a fourth dialect, and the switcher's remaining divergence
-is unchanged here and still that ticket's.
+### Added and fixed — the release candidate (0.8.0-next.5)
 
-**A disclosure, not a menu** (ADR-0010): no widget role on the panel, no role on
-the rows, every row the real `<a>` or `<button>` it already is, so Tab walks them
-in the document's own order.
+Every new prop and label key here is optional, so an app moving from next.4
+changes only its version pin.
+
+- **French figures show their grouping space.** CLDR groups French thousands
+  with a narrow no-break space (U+202F), and the kit's faces draw it at almost
+  nothing: 1.9px in Inter at 14px, 4.1px in Outfit at 40px. So the token
+  popover read "1500" while the chip read "1 500" (Brokers). Every figure the
+  chip formats (`formatTokens`, the rail's short form, the threshold
+  percentage) now uses an ordinary no-break space (U+00A0) instead. It is
+  visible in every face and still never wraps. en-US output is unchanged.
+  If your tests compare against `Intl.NumberFormat('fr-FR')` output, apply the
+  same swap.
+- **`NotificationButton`** (Content):
+  - `unreadCount?: number` goes into the accessible name ("Notifications,
+    3 unread", new optional label `unreadCount`, `%count%`). Above 0 it draws
+    the dot. The figure itself is not drawn: board 20 draws a dot.
+  - `expanded?: boolean` and `controls?: string` become `aria-expanded` and
+    `aria-controls` when it opens a panel. Button form only.
+  - `ref` reaches the rendered button or link (React 19 passes `ref` as a
+    prop; the link form needs a `linkComponent` that forwards it, as next/link
+    does).
+- **`AppShellAction.active?: boolean`** (Off Market): on the action's own page,
+  the link form carries `aria-current="page"` and both forms keep the primary
+  tier's pressed ground (`.primary[data-active='true']`, its hover colour, in
+  either tone).
+- **`countLabel?: string`** on `NavItem` and `AppShellNavItem` (Off Market):
+  what a screen reader hears for `count` ("3 à ouvrir"). Given, the visible
+  number is hidden from assistive tech and this is read instead.
+- **`attrs?: NavItemAttrs`** on `NavItem` and `AppShellNavItem` (Outbound):
+  `data-*` attributes for the row, such as a tour's `data-tour`. Only `data-*`
+  names are accepted (also filtered at runtime), and the row's own
+  `data-active`/`data-collapsed` win. New exported type `NavItemAttrs`.
+- **README: two consumer notes.**
+  - Map the `--boost33-font-*` hooks on `:root`, with `next/font`'s variable
+    classes on `<html>`. A mapping on `body` never reaches the kit (Outbound).
+  - **Never pass a function from a Server Component to `AppSwitcher` or
+    `WalletChip`**, the package's client components: `linkComponent`,
+    `onTopUp`, `onOpenChange`. Next refuses it and every signed-in render 500s
+    (Passport), and `renderToStaticMarkup` tests cannot see it. Render those
+    two inside a `'use client'` file of your own. The `linkComponent` docs on
+    both now say so.
+- No approved screenshot moves (see the commit for the comparison).
 
-**Three new tokens, all three read off an unapproved drawing.** They reach your
-app through `./style.css` and `./theme.css` like every other token, and the
-derivation comment on each says in as many words that the value is not settled:
+### Fixed — the top bar fits at 1024px; the token popover stays on screen (0.8.0-next.4)
 
-- `--container-account-menu: 312px` — the panel's width.
-- `--spacing-3_5: 14px` — the person block's block padding.
-- `--spacing-9_5: 38px` — the person block's avatar, the largest in the package.
+- **Below 80rem of bar, the centre group's two labels leave the screen.**
+  next.3 stopped the regions overlapping, but the centre does not shrink, so at
+  1024px Content's bar still needed 1067px and clipped the avatar. Now
+  "Switch Tools →" and "Check Your Tokens →" are hidden visually wherever the
+  bar's content box is under 80rem (1280px; a full-width bar in a window under
+  1344px) and the centre gives back about 280px. They stay in the
+  accessibility tree, before the control each introduces, so a screen reader
+  hears the same thing at every width. A container query on the bar
+  (`container: boost33-top-bar / inline-size`), so a bar narrower than the
+  window is measured by its own width. Measured in Chromium at 1024px with a
+  256px start group and either a 70px or a 220px actions group: no overflow and
+  no overlap. If you write container queries in the bar's slots, name your own
+  container: the bar is now a container.
+- **The token popover stays on screen.** It hangs from the pill's left edge and
+  is 340px wide. At 390px its right edge was at 535px, cutting the threshold
+  line and the reset note, and at 1024px it overshot by 8px. It now slides left
+  by exactly its overshoot to keep 16px from the right edge (never past 16px
+  from the left), and is never wider than the viewport less 32px. Both the
+  split chip and `totalOnly` do this. It is measured before paint and again on
+  resize.
+- **Below `chromeFrom` the shell fills the screen**: `min-height: 100dvh`
+  instead of next.3's `100%`, which resolved against app wrappers with no
+  height and left short pages ending grey (Content).
+- **No approved screenshot moves**: all 40 gated states measure the same with
+  and without these changes, each on a fresh specimen build.
 
-Nothing else in the package reads any of the three, so no existing rendering
-moves, and **no baseline moved**: all 27 gated states come back unchanged, because
-every token here is additive and no shared value was touched.
+### Fixed — the top-bar token chip warns again past 80% of the grant; the top bar holds its layout (0.8.0-next.3)
 
-**Four places where this does not reproduce its drawing**, each named at its rule
-in `AccountMenu.module.css`, and each because the drawn value is not a step this
-package's token set holds and the nearest step is within about a pixel — the trade
-`PageHeader` already records for `--leading-tight` against Paper's 30px. The row's
-glyph-to-text gap (11px drawn, `--spacing-2_5` here); the person block's
-name-to-email gap (3px drawn, `--spacing-0_5`, which is what the rows draw for the
-same relationship); two 10px type sizes (`--text-2xs`); and every line-height,
-because the drawing sets them in px and this package holds only percentages.
+- **The 80% threshold is back in the top bar.** 0.8.0-next.0 moved the chip to
+  the top bar without its threshold state, so a seller who had burned 87% of the
+  month's grant saw the same chip as one at 10%, and nothing here said so
+  (found by Score). `placement="topbar"` now reads `grantCycle` and
+  `burnedFraction` exactly as the sidebar card does (the consumer's
+  `burnedFraction` wins, otherwise it is derived from `grantCycle`, and with
+  neither nothing is claimed). Past 80%:
+  - with `grantCycle`, the bar in the chip and in the popover measures against
+    what the cycle started with, so it shortens and the burned share shows as
+    the warning-tinted track: the sidebar card's drawing (Jamal, 4 Nov 2026).
+    With `burnedFraction` alone there is no honest denominator, so the bar
+    stays full;
+  - the popover shows a line above the runway note, and the chip's accessible
+    name ends with it, so the warning is never colour alone. **New label
+    `thresholdNote`**, a template with `%percent%`, formatted for `locale`
+    ("87%", "87 %"). Default `You've used %percent% of this month's grant.`
+    A catalogue typed as a full `WalletChipLabels` must add it; that is the
+    typecheck catching a missing translation;
+  - the root carries `data-threshold="true"`. Buy tokens is unchanged: the
+    accent primary.
+  Keep passing `grantCycle` (or `burnedFraction`) to the top-bar chip.
+- **The top bar keeps its regions apart at any width.** At 1024px the start
+  group (mark and organisation pill) was given less than it held and painted
+  across "Switch Tools →" (Content, Wallet, Activity, Outbound). The bar is now
+  a three-column grid whose sides are never narrower than their contents: where
+  everything fits, the centre group sits in the middle as before; where it does
+  not, the centre moves off the middle instead of under the pill. Below that,
+  on a phone with no `chromeFrom`, the bar runs off the right edge in order
+  rather than piling up (Score). **No approved screenshot moves**: every gated
+  state measures the same pixel count with and without the change.
+- **The top bar is a `<header>`**, the page's banner landmark, so assistive tech
+  can jump to it and a test can scope to it (Score). `getByRole('banner')`
+  finds it. The census in `scripts/border-proof.ts` records the bar's hairline on
+  a `header` now; the pixels did not move.
+- **The popover's reset note ends on the date.** `grantedNote` defaults to
+  `Included each month · resets %date%`, without the `Resets %date%.`
+  full stop that printed "30 sept.." for a French date (Score). If you
+  translate it, keep punctuation off the end of `%date%`. `grantExpires` is one
+  date in both placements, the day this month's grant runs out and the next
+  lands. The sidebar says it as an expiry, the popover as a reset.
+- **Below `chromeFrom` the shell still fills its root** (`min-height: 100%`),
+  so a short page keeps the white ground to the bottom of the screen (Content).
+  Replaced by `100dvh` in next.4.
 
-**One open design question, recorded rather than decided.** This panel picks a row
-out with `--color-neutral-50`, where every other popover in the package uses
-`--color-surface-muted`, one neutral step darker. Reproduced as drawn and raised
-at the gate — the drawing was cloned from an Identity screen that predates the
-shared token pass, which is why it is the only popover in its own file still bound
-to literals.
+### Added — `AppShell` gets out of the way on a phone: `chromeFrom` and `phoneChrome`
 
-#### Not in `dist/`, and so not your concern
+AppShell has no phone layout, and the 0.8 top bar runs off a 390px screen.
+Products keep their own phone chrome below a breakpoint, and until now the only
+ways to do that were a `matchMedia` switch (the desktop shell flashes on a phone
+before it swaps) or CSS reaching into the shell's DOM shape. Both options are opt-in;
+a shell that sets neither renders exactly as before.
 
-The specimen gains an `AccountMenu` route with two sections, neither screenshot-gated
-and both recorded in `SPECIMEN_ONLY` with reasons: the panel, whose first baseline
-is a *designed* baseline only the person at the fidelity gate may capture, and a
-row rendered through a stand-in link component, which draws identically to the
-default by design. `tests/account-menu.test.tsx` adds 28 cases covering the
-structure, the row elements, the hairline-per-group rule, the label fallbacks and
-the ADR-0011 pass-through — none of them asserting geometry, which jsdom cannot
-see.
+- **`chromeFrom?: 'md' | 'lg' | 'xl'`** (new type `AppShellBreakpoint`). Below
+  that viewport width the shell hides its own top bar and sidebar, the page
+  body takes the full width, and the document scrolls instead of the shell's
+  content box. Done in the shell's own `@media` CSS, so the first paint is
+  already right, with no flash and no second render of the page. The widths are
+  Tailwind v4's defaults -- `md` 48rem (768px), `lg` 64rem (1024px), `xl` 80rem
+  (1280px) -- so `lg` here and `lg:` in your own markup flip at the same pixel.
+  It is a name and not a number because a media query cannot read a value
+  passed at runtime.
+- **`phoneChrome?: ReactNode`**: your phone header and navigation. The shell
+  draws it above the page body, outside `<main>`, and shows it only below
+  `chromeFrom`. Ignored without `chromeFrom`. The shell's wrapper around it
+  draws no box (`display: contents`), so a `position: sticky` header you pass
+  stays pinned while the page scrolls (fixed after 0.8.0-next.1, where it
+  scrolled away). Pass your phone chrome here and
+  drop any `lg:hidden` and any selector that hid the kit's bar or `<aside>` by
+  position: those depended on a DOM shape this package does not promise.
+- Not a mobile shell. Nothing is redesigned below the breakpoint; the shell only
+  stops drawing its desktop chrome. A phone design needs a board first.
+- The sidebar's development-only nav-height warning no longer fires when the
+  sidebar is hidden this way.
 
-### Added — `NotificationCenter`, Stage A only, **not releasable yet** (B33-494)
+### Note — in a Tailwind v4 app, `style.css` alone re-sizes the app's own utilities
 
-> [!danger] This component has not passed its fidelity gate and must not be
-> included in a release until it has.
-> `NotificationCenter` is exported from `src/index.ts`, which means it would be
-> published by any version cut from this state. Do not cut one. A human has not
-> yet opened the specimen route, judged the component, captured its first
-> baseline or written its measurements into the spec — and until all three happen
-> in one session, there is no referent for this component at all (`CLAUDE.md`,
-> "The three components the Wallet never rendered"). Nothing it draws is settled,
-> including the panel's 360px width and every space inside it.
->
-> It is also only half built. Stage A is static: the panel renders and nothing
-> responds. The bell does not open it, Escape does not close it, the filters do
-> not filter and "Mark all as read" marks nothing. That is Stage B, and it lands
-> after the approval, not before.
+**Importing `@boost33/ui/style.css` changes what a Tailwind v4 app already has
+on screen, with or without `theme.css`.** Off Market and Brokers measured it
+adopting 0.8.0-next.0. This is not new in 0.8, but 0.8 is when Tailwind v4
+apps first take the shell.
 
-The panel behind the top bar's bell: everything the four products did, in one
-list, with the unread ones marked. Both states the design draws — populated and
-empty — ship from this package and appear in the specimen app.
+Why: `style.css` carries `tokens.css`, which declares this package's tokens on
+`:root`, unlayered, under the names Tailwind v4 itself uses (`--text-*`,
+`--leading-*`, `--tracking-*`, `--radius-*`, `--font-*`, `--font-weight-*`,
+`--color-*`). Tailwind's default utilities read those names through `var()`
+(`.text-sm { font-size: var(--text-sm) }`), and an unlayered declaration beats
+Tailwind's `@layer theme`. So in the app, `text-sm` becomes 13px (Tailwind's
+14px) with a 13px line height, `text-base` 15px (16px), and `rounded-sm`, `-md`,
+`-lg`, `-xl`, `-2xl` become 3/4/6/8/12px (4/6/8/12/16px). The `leading-*` and
+`tracking-*` steps move too.
 
-**It is presentational and it owns no feed.** The notifications arrive as a prop
-and this package neither fetches, stores nor subscribes to anything. There is no
-cross-product event source in any repo today, and a component that implied one
-would make the shared shell the place four services integrate — the opposite of
-the dependency direction every other component here has, and a straight
-contradiction of `CLAUDE.md`'s "it renders what it is given". That was decided on
-the ticket on 2026-10-06; the feed itself is separate work, outside 1.0.
+To keep your own scale, tell Tailwind to write literal values into its
+utilities so they never read `:root`. Either import Tailwind's theme inline:
 
-```tsx
-<NotificationCenter
-  items={[
-    {
-      id: 'n1',
-      slug: 'wallet',                       // optional: selects the ProductMark
-      title: 'Your granted tokens expire in 3 days',
-      source: 'Wallet',                     // the host's words, not a slug
-      time: '12 minutes ago',               // preformatted by the host
-      dateTime: '2026-10-06T09:48:00Z',     // optional: the <time> element's datetime
-      href: '/wallet/grants',               // optional: a row with nowhere to go is not a link
-      unread: true,                         // defaults to false
-    },
-  ]}
-  viewAllHref="/notifications"
-/>
+```css
+@layer theme, base, components, utilities;
+@import "tailwindcss/theme.css" layer(theme) theme(inline);
+@import "tailwindcss/preflight.css" layer(base);
+@import "tailwindcss/utilities.css" layer(utilities);
+@import "@boost33/ui/style.css";
 ```
 
-**The time arrives formatted, and that is a decision rather than an omission.**
-The obvious move is the one `WalletChip` makes for numbers — take a `locale` and
-format from a `Date` — and three things separate the two cases. A number is a
-pure function of its value and a locale; a *relative* time needs a `now`, so the
-component would read a clock and then either re-read it on a timer or go stale on
-screen, which is state in a component whose contract is that it has none. It
-would also make this component's own fidelity gate unreproducible: a designed
-baseline showing "12 minutes ago" from `Date.now()` is a different image an hour
-later. And the hard part is editorial — where a product cuts over from "12
-minutes ago" to "Yesterday" to a date is a policy each product may differ on, and
-`Intl.RelativeTimeFormat` does not decide it. The optional `dateTime` is how the
-machine-readable instant still reaches the page without this package deciding how
-to say it.
+or pin each colliding name you use under `@theme inline { … }` with Tailwind's
+value. Either way the kit's components keep reading `:root` and render as
+designed. Brokers measured identical computed styles on all 12 of its pages
+with the first recipe.
 
-**Every string is a prop with an English default**, in the same shape
-`WalletChipLabels` uses: `labels` is a `Partial`, a missing key falls back to
-English rather than blanking the UI (B33-873), `defaultNotificationCenterLabels`
-is frozen in the B33-916 spelling so writing to it is a compile error, and the
-one value-carrying string — the row's `{source} · {time}` line — is a template or
-a function, so a locale owns the word order and the separator. `AppSwitcher`'s
-contract still differs on the freeze; B33-1007 closes that by bringing the
-switcher to this shape, not by adding a fourth.
+`theme.css` is a separate, optional step on top of this. It adds utilities for
+names only this package has (`bg-surface`, `border-border`, …) and makes the
+kit's values the app's whole scale (ADR-0011, ADR-0012). Every kit component
+renders correctly without it (the specimen imports no `theme.css`). An app that
+used those utilities and drops `theme.css` loses them.
 
-The panel is a disclosure, not a menu and not an ARIA tab set (ADR-0010): no
-widget role, real links and buttons, and Tab is the document's own order, so the
-header action, both filters, every row and the footer link are each their own tab
-stop. Rows that navigate render through `linkComponent` (ADR-0011). The unread
-state is announced in words as well as drawn as a dot, because a colour reaches
-nobody on a screen reader.
+The shell also sets `font-family: var(--font-sans)` (Inter) on its frame, so
+`children` inherit Inter unless the page sets its own family.
 
-Three further things it deliberately does not do: it does not sort, filter, page
-or truncate `items`, because each is a decision about data it does not own; it
-draws no "0" on the unread filter, because a zero pill reads as a state; and the
-empty rendering drops the filters, the header action and the footer rather than
-offering three controls over an empty list. The empty state is not an edge case —
-a host with no feed wired yet has nothing to pass, which makes it the rendering
-most consumers meet first.
+### Changed — `CHANGELOG.md` now ships inside the package
 
-**`TopBar` is unchanged.** Its bell's `unread` prop still defaults to `false`, it
-still gains no `aria-haspopup`, and it still opens nothing. Connecting the two is
-Stage B.
+`package.json` `files` adds `CHANGELOG.md` next to `dist`, so this file is in
+the tarball at `node_modules/@boost33/ui/CHANGELOG.md`. Until now it reached a
+consumer only through the repository, which is a strange place to keep the one
+notice a consumer gets. Nothing in `dist/` changes. 0.5.0 and earlier were
+published without it, and a published version cannot be amended, so the first
+release to carry it is the one after 0.5.0. Repo-only otherwise: no import,
+prop or rendering changes.
 
 ## 0.7.1 — 2026-11-02