@boost33/ui 0.8.0-next.5 → 0.8.1

package/CHANGELOG.md

@@ -27,9 +27,268 @@ why the entry matters more than the number.
 
 ## Unreleased
 
-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.
+Two 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.
+
+### Added — `CommandPalette`, Stage A only. **Not releasable: it has not passed its fidelity gate** (B33-495)
+
+**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.
+
+What exists today, and what does not:
+
+| | |
+| --- | --- |
+| 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 |
+
+**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.
+
+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.
+
+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 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.
+
+`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 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 — `NotificationCenter`, Stage A only, **not releasable yet** (B33-494)
+
+> [!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.
+
+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.
+
+**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.
+
+```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"
+/>
+```
+
+**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.
+
+**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 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.
+
+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.
+
+**`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.
+
+## 0.8.1 — 2026-11-05
+
+**Not breaking. Add one element to your top bar.** The account menu, the Hub's,
+for every app: the avatar opens the same menu in all ten products (Jamal, 5 Nov
+2026). New exports only; an app that passes nothing new renders exactly what
+0.8.0 rendered.
+
+**Held back, as before:** `CommandPalette` and `NotificationCenter` under
+Unreleased have still not passed their fidelity gate.
+
+### Added — `StandardAccountMenu`, the account menu behind every app's avatar, and `topBar.account` (B33-493)
+
+The Hub's working menu (boost33-hub `src/app/account-menu.tsx`), moved into the
+kit so every app draws the same one. It passed its fidelity gate on 5 Nov 2026
+against a render of the Hub's own component.
+
+What a consumer does:
+
+```tsx
+import { AppShell, StandardAccountMenu } from '@boost33/ui'
+
+<AppShell
+  topBar={{
+    actions: <NotificationButton … />,
+    account: (
+      <StandardAccountMenu
+        person={{ name: claims.name, email: claims.email, avatarUrl }}
+        org={orgName ? { name: orgName } : undefined}
+        role={role}                      // 'admin' | 'member' | null
+        identityUrl="https://id.boost33.com"
+        hubUrl="https://app.boost33.com"
+        otherAccountsCount={claims.accounts.length - 1}
+      />
+    ),
+  }}
+  …
+/>
+```
+
+- **Safe from a Server Component layout.** Every prop is plain data. You pass no
+  `linkComponent` and no callback, so nothing crosses the client boundary as a
+  function. `AccountMenu` is a client component inside the package;
+  `StandardAccountMenu` is not.
+- **Remove your own avatar** from `topBar.actions`. `topBar.account` (new on
+  `TopBar` and `AppShell`) draws after `actions`, at the far right of the bar.
+- **The rows, the Hub's, with absolute links**, so they work from any app and
+  from the Hub itself:
+  - Profile, to `{hubUrl}/settings/profile`
+  - Security, to `{identityUrl}/account/security`
+  - Settings, to `{hubUrl}/settings/org/general`, described by role
+  - Switch account, to `{identityUrl}/choose-account`, only when
+    `otherAccountsCount` is above 0, described by `otherAccountNames` when every
+    account is named, or else by the count
+  - Feedback (`mailto:support@boost33.com`) and Docs (`https://docs.boost33.com`)
+  - Sign out, to `{identityUrl}/signout`
+- **The Hub's production URL is `https://app.boost33.com`** (Identity's
+  `HUB_URL`). `hub.boost33.com` does not resolve.
+- **The trigger is the Hub's**: a 26px avatar with the person's initials, or their
+  photo from `person.avatarUrl`, named "Your account". The panel opens 10px below
+  it, aligned to its right edge.
+- **Keyboard and focus are the Hub's `useMenu`**: a WAI-ARIA menu button.
+  - Opening moves focus to the first row (ArrowUp on the trigger: the last).
+  - The arrows wrap; Home and End jump.
+  - Escape closes and returns focus to the avatar; Tab leaves and closes.
+  - A press outside closes it, and choosing a row closes it.
+- **Words**: `labels` takes the rows' words (`StandardAccountMenuLabels`, English
+  defaults the Hub's); `menuLabels` takes the menu's accessible names.
+- **Lower level**: `AccountMenu` takes `groups` of rows of your own, and
+  `standardAccountMenuGroups(options)` returns the standard rows as data to
+  extend. Do not add per-app rows without asking: one menu everywhere is the
+  point.
+
+Changed from the Stage A `AccountMenu` that 0.8.0 exported but did not release:
+
+- It now draws its own trigger and opens a `role="menu"`, not a static panel.
+- `person.name`, `org` and `org.initials` are optional.
+- The default accessible name is "Your account", not "Account".
+- Rows are `menuitem`s with `tabIndex={-1}`.
+- `AccountMenuIcon` gains `security`, `feedback` and `docs`.
+
+## 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/`.
 
 ### Changed — the shell redesign, part 1 of 3: the sidebar and the app switcher (B33-1711)
 
@@ -420,274 +679,6 @@ 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.
 
-### Added — `CommandPalette`, Stage A only. **Not releasable: it has not passed its fidelity gate** (B33-495)
-
-**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.
-
-What exists today, and what does not:
-
-| | |
-| --- | --- |
-| 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 |
-
-**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.
-
-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.
-
-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 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.
-
-`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 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)
-
-> [!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.**
-
-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`.
-
-**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 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 shape, so it is legible from here:**
-
-- `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.
-
-**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.
-
-**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.
-
-**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:
-
-- `--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.
-
-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.
-
-**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.
-
-**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.
-
-#### Not in `dist/`, and so not your concern
-
-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.
-
-### Added — `NotificationCenter`, Stage A only, **not releasable yet** (B33-494)
-
-> [!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.
-
-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.
-
-**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.
-
-```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"
-/>
-```
-
-**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.
-
-**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 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.
-
-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.
-
-**`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.
-
 ## 0.7.1 — 2026-11-02
 
 **Not breaking. Nothing to do on upgrade unless you want the link home**, which

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

@@ -6,13 +6,17 @@ import { AccountMenuLabels } from './labels';
  * menu reads no session and fetches nothing (CLAUDE.md).
  */
 export interface AccountMenuPerson {
-    /** Their name, e.g. "Sofia Marques". */
-    name: string;
+    /**
+     * Their name, e.g. "Sofia Marques". Optional: Identity may hold none. Without
+     * it the name line reads "You" (`labels.unnamed`) and the initials come from
+     * the email, as the Hub's do.
+     */
+    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`.
+     * An avatar image, on the trigger and in the person block. Omit it and both
+     * circles carry the person's initials on `--color-neutral-300`, as the Hub's do.
      *
      * 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
@@ -27,8 +31,11 @@ export interface AccountMenuPerson {
 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 initials on the tile beside it, e.g. "AC". Decorative -- the name is next
+     * to it. Omit them and they are taken from the name.
+     */
+    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,
@@ -81,8 +88,13 @@ export interface AccountMenuGroup {
 export interface AccountMenuProps {
     /** The signed-in person. */
     person: AccountMenuPerson;
-    /** The organisation this person is acting in. */
-    org: AccountMenuOrg;
+    /**
+     * The organisation this person is acting in. Omit it and no strip is drawn: a
+     * person on no membership would otherwise get an empty dark tile where the
+     * company goes, which reads as a company whose name failed to load (the Hub's
+     * reasoning).
+     */
+    org?: AccountMenuOrg;
     /** The row groups, in order. A hairline is drawn above each one. */
     groups: AccountMenuGroup[];
     /**
@@ -92,6 +104,11 @@ export interface AccountMenuProps {
      * looks like), keeps its default.
      */
     labels?: Partial<AccountMenuLabels>;
+    /**
+     * Draw the menu open on first render, without moving focus. For the specimen
+     * and for screenshots; an app leaves it unset.
+     */
+    defaultOpen?: boolean;
     /**
      * 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
@@ -101,31 +118,24 @@ export interface AccountMenuProps {
     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).
+ * The account menu: the avatar button in the top bar's end group, and the menu it
+ * opens -- who you are, which organisation you are in, the way into Profile,
+ * Security and Settings, Feedback and Docs, and the way out (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.
+ * **Stage B, and the referent is the Hub's working menu** (boost33-hub
+ * src/app/account-menu.tsx), named by Jamal on 5 Nov 2026 so that every app's
+ * avatar opens the same menu. The panel is Stage A's, which was drawn from the
+ * same Paper artboard the Hub built from (103 · 11); the trigger and the placement
+ * are the Hub's: a 26px avatar, the panel 10px below it and aligned to its right
+ * edge.
  *
- * 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.
+ * A menu button, not a disclosure: `role="menu"` on the panel and
+ * `role="menuitem"` on every row, with the Hub's keyboard model (./use-menu.ts).
+ * Choosing a row closes the menu, so a client-side navigation does not leave it
+ * open over the page it just opened.
  *
- * 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.
+ * Most apps want `StandardAccountMenu`, which builds the standard rows from an
+ * identity URL, a Hub URL and the person's role. This is the lower level: any
+ * rows, as groups.
  */
-export declare function AccountMenu({ person, org, groups, labels, linkComponent }: AccountMenuProps): import("react").JSX.Element;
+export declare function AccountMenu({ person, org, groups, labels, defaultOpen, linkComponent }: AccountMenuProps): import("react").JSX.Element;