@boost33/ui 0.7.1 → 0.8.0-next.1

package/CHANGELOG.md

@@ -31,6 +31,263 @@ Three components are built to Stage A on main and are not releasable until
 each passes its fidelity gate. Their entries wait here for the release that
 ships them.
 
+### Changed — the shell redesign, part 1 of 3: the sidebar and the app switcher (B33-1711)
+
+The 3 Nov 2026 navigation redesign (B33-1710; Paper file Boost Products, page
+101 Hub, row V0.7, boards 20 and 21). **This changes how every consumer's
+sidebar and switcher look, and every gated screenshot of them.** No new
+baseline has been captured: the person approving the redesign captures them
+(CLAUDE.md). Parts 2 and 3 (B33-1712, B33-1713) land in the same release.
+
+What a consumer sees, and what it has to do:
+
+- **`AppShell` takes `appName`.** The product's name, drawn as plain text at
+  the top of the sidebar with no icon. Optional: omit it and nothing draws
+  there. Pass your product's display name, in your language. It names no
+  landmark (`label` still does that).
+- **`AppSwitcher` no longer draws products that do not exist yet.** A row with
+  `live: false` is left out, unless it is the current product. Keep passing the
+  registry whole -- do not filter it yourself. A product the account does not
+  hold (`entitled: false`) is still drawn, with its "Not on plan" tag: hiding it
+  would tell a client their product does not exist. This overrules the
+  Vocabulary document's "the switcher shows every product regardless of state",
+  which is amended to match.
+- **The "Soon" tag is gone with them.** `labels.soon` stays in the type, 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.
+
+### Changed — the shell redesign, part 3 of 3: the sidebar action, and every button on three tiers (B33-1713)
+
+Board 20 of the same redesign, and the consolidation its review asked for.
+**Every button the package draws changes look**; no new baseline has been
+captured (the person approving the redesign captures them).
+
+What a consumer sees, and what it has to do:
+
+- **New `AppShell.action`** (`AppShellAction`: `label`, optional `icon`, and
+  `href` or `onClick`): your product's main action, drawn at the foot of the
+  sidebar directly above the footer's divider -- board 20's "New scan". Near-black,
+  full width, 40px. Not drawn with neither `href` nor `onClick`. On the rail it
+  shows its icon alone, its label kept as its accessible name, and is not drawn
+  if it has no icon. If you drew your own action button elsewhere in the shell,
+  pass it here instead.
+- **The footer sits under a hairline when there is an action**, 10px above its
+  rows, and its rows are 2px apart (the nav's own pitch), down from 16px.
+- **Three button tiers, written down in ADR-0016:** primary (filled, 40px, ink or
+  accent), outlined (32px, white, 1px edge) and quiet (a word, no box). Every
+  package button now takes one.
+- **`WalletChip`'s "Top up" is no longer orange text.** At rest it is the quiet
+  tier in full ink; past the threshold it is the primary tier in the accent tone.
+  The orange text was 3.69:1 on white and failed AA at 12px.
+- **The accent tone is `--color-orange-600`**, not the brand orange: white on the
+  brand orange is 3.69:1. "Buy tokens" and the grown "Top up" both use it.
+  Decided by Jamal on 4 Nov 2026.
+- **`NotificationCenter`'s "Mark all as read" and "View all"** are the quiet tier.
+  The component is still Stage A and not releasable.
+- **If you pass `action`, add 67px to `consumerSlotsPx`** when you call
+  `navBudgetForViewport` yourself: the 40px button, 16px clear above it, and the
+  hairline and 10px the footer then takes. The development warning measures the
+  real column and needs nothing.
+
+Not done here, and why: board 20's Settings row carries an external-link arrow,
+which no ticket in Wave 4 asks for and `NavItem` has no slot for. It wants its
+own ticket.
+
+Repo-only: `src/buttons.module.css` holds the tiers. The "Shell redesign —
+B33-1710" specimen route's shell gains "New scan" and a Settings / Help footer.
+
+### Changed — the shell redesign, part 2 of 3: the top bar, the token chip, the bell (B33-1712)
+
+Boards 20, 21 and 22 of the same redesign. **This is a breaking layout change
+for every consumer of `AppShell`: the switcher and the wallet chip move out of
+the sidebar into the top bar, and the breadcrumb is no longer drawn.** Every
+gated screenshot of the shell, the top bar and the sidebar changes; no new
+baseline has been captured (the person approving the redesign captures them).
+
+What a consumer sees, and what it has to do:
+
+- **The top bar has three regions.** Left: the Boost33 mark (linked home
+  through `hubHref`, as the sidebar wordmark was) and the new `org` slot.
+  Centre: "Switch Tools →" then the switcher, "Check Your Tokens →" then the
+  token chip. Right: `topBar.actions` -- pass `NotificationButton` and your
+  avatar there.
+- **`AppShell.switcher` and `AppShell.wallet` keep their names and move.**
+  Both now render in the top bar's centre group, not the sidebar. Each label is
+  drawn only when its control is passed. Pass `WalletChip` with
+  `placement="topbar"` in `wallet`; the sidebar card is not designed for the
+  bar.
+- **The sidebar no longer draws the wordmark, the switcher or the wallet
+  chip.** It holds `appName`, the nav and `footer`, with 16px top and bottom
+  padding of its own.
+- **New `AppShell.org`**: a slot for your organisation pill, beside the mark.
+  The package draws no organisation menu (that is AccountMenu, B33-493, which
+  has not passed its gate).
+- **`topBar` is optional, and `topBar.breadcrumb` is deprecated and not
+  drawn.** It still compiles; stop passing it. `PageHeader` names the page.
+  **If you put `SidebarToggle` in `topBar.breadcrumb` (the Wallet does), move it
+  to the new `topBar.sidebarToggle` slot, or your rail loses its toggle.** The
+  screenshot gate does not catch this: the bar passed its baseline at 0.19%
+  with the toggle gone. 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 56px rail keeps working, icon-only, and gets no new design. The top bar
+does not collapse.
+
+Repo-only: the specimen's "Shell redesign — B33-1710" route grows the top bar,
+the open token popover, board 22's nothing-purchased chip, and the unknown,
+past-zero and total-only chips.
+
+### Added — `AppShell` gets out of the way on a phone: `chromeFrom` and `phoneChrome`
+
+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.
+
+- **`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`. 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.
+
+### Note — in a Tailwind v4 app, `style.css` alone re-sizes the app's own utilities
+
+**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.
+
+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.
+
+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:
+
+```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";
+```
+
+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.
+
+`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 shell also sets `font-family: var(--font-sans)` (Inter) on its frame, so
+`children` inherit Inter unless the page sets its own family.
+
 ### Changed — `CHANGELOG.md` now ships inside the package
 
 `package.json` `files` adds `CHANGELOG.md` next to `dist`, so this file is in

package/dist/buttons.module.css.js

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

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

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

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

@@ -10,12 +10,34 @@ export interface AppShellNavItem {
     active?: boolean;
     /** Trailing-slot count. Omit to leave the slot empty; it still reserves its width so counts line up. */
     count?: number;
-    /** Renders `count` in the primary color instead of muted. */
+    /** Draws `count` as the filled "needs you" pill instead of muted text. */
     countUrgent?: boolean;
+    /** A trailing attention dot; the string is what a screen reader hears. Ignored when `count` is set. */
+    dot?: string;
     /** Where the row goes. A nav row's destination is data; the shell renders it as a link. */
     href?: string;
 }
 /** One nav section: an optional header over a run of rows. */
+/**
+ * The product's main action, drawn as a button at the foot of the sidebar,
+ * above the footer's divider (B33-1713, board 20's "New scan"). Data, like a
+ * nav row: the shell renders it, in the primary tier's ink tone (ADR-0016).
+ */
+/**
+ * A named width for `AppShell.chromeFrom`, with Tailwind v4's default values:
+ * `md` 48rem (768px), `lg` 64rem (1024px), `xl` 80rem (1280px).
+ */
+export type AppShellBreakpoint = 'md' | 'lg' | 'xl';
+export interface AppShellAction {
+    /** The button's words, in the consumer's language -- "New scan". */
+    label: string;
+    /** A leading icon, decorative. On the 56px rail it is all that shows. */
+    icon?: ReactNode;
+    /** Where it goes. Renders a link through `linkComponent`. Wins over `onClick`. */
+    href?: string;
+    /** What pressing it does. Renders a `<button>`. */
+    onClick?: () => void;
+}
 export interface AppShellNavSection {
     /** The section header. Omit for a headerless section (the nav's first section has none). On the rail every header drops. */
     label?: string;
@@ -65,40 +87,130 @@ export interface AppShellProps {
      * resolved by a consumer passing this.
      */
     navLabel?: string;
+    /**
+     * The product's name, drawn as plain text at the top of the sidebar (B33-1711).
+     * The product name only -- "Boost Score", in the consumer's language -- with
+     * no icon beside it: the product mark belongs in the app switcher, not next to
+     * the name. Omit it and nothing is drawn there.
+     *
+     * It is visible text and nothing else. It names no landmark (that is `label`)
+     * and nothing branches on it. Often the same string as `label`; it is a
+     * separate prop because one is read aloud as a landmark's name and the other
+     * is read on screen, and a consumer may want them to differ.
+     *
+     * Hidden on the 56px rail, where there is no room for a word.
+     */
+    appName?: string;
     /** The navigation, as data. No product hardcodes rows; the shell composes them. */
     nav: AppShellNavSection[];
-    /** The top bar's content -- the breadcrumb and the shell actions on its right. */
-    topBar: TopBarProps;
-    /** The Boost33 mark for the wordmark lockup. Passed in, the way Wordmark takes it; on the rail it is all that shows. Pass it unlinked -- `hubHref` links the whole lockup. */
+    /**
+     * The top bar's own content: its `actions` on the right (the notification
+     * button and the avatar) and its `labels`. The shell fills the rest of the bar
+     * itself -- the mark and `org` on the left, `switcher` and `wallet` in the
+     * centre -- so those are props of the shell, not of this object.
+     *
+     * `breadcrumb` is still accepted and no longer drawn (B33-1712): the redesign
+     * puts the mark and the organisation where it was. A sidebar toggle kept
+     * inside it goes in `topBar.sidebarToggle` instead, at the far left of the
+     * bar, or the rail loses its toggle.
+     */
+    topBar?: Omit<TopBarProps, 'start' | 'switcher' | 'tokens'>;
+    /**
+     * The Boost33 mark, at the left of the top bar (B33-1712; it was the
+     * sidebar's wordmark lockup until 0.8.0). Passed in, the way Wordmark takes
+     * it. Pass it unlinked -- `hubHref` links it. The word "Boost33" is not drawn
+     * beside it; it stays as the link's accessible name.
+     */
     mark?: ReactNode;
     /**
-     * Where the hub lives. Set it and the wordmark in the sidebar's top-left
-     * corner becomes a link home, rendered through `linkComponent`; omit it and
-     * the wordmark is the plain lockup it always was (B33-1699). The consumer
+     * Where the hub lives. Set it and the mark at the left of the top bar becomes
+     * a link home, rendered through `linkComponent` (B33-1699). The consumer
      * supplies the URL -- Identity owns where the hub is and it differs per
      * environment, so the package never hardcodes it. See `Wordmark.hubHref`.
      */
     hubHref?: string;
     /**
-     * The product switcher, sitting under the wordmark. A slot: the registry it
-     * draws is served by Identity (ADR-0003), not owned here. Render its own
-     * collapsed form for the rail.
+     * The organisation, beside the mark at the left of the top bar (B33-1712,
+     * board 20: "AC Acme Coaching ⌄"). A slot -- the product's own pill. The
+     * package draws no organisation menu: that is AccountMenu (B33-493), which has
+     * not passed its gate.
+     */
+    org?: ReactNode;
+    /**
+     * The app switcher, at the centre of the top bar after its "Switch Tools →"
+     * label (B33-1712; it sat under the wordmark in the sidebar until 0.8.0). A
+     * slot: pass `AppSwitcher`. The registry it draws is served by Identity
+     * (ADR-0003), not owned here. It no longer has a rail form to render -- the
+     * top bar does not collapse.
      */
     switcher?: ReactNode;
     /**
-     * The wallet chip, pinned above the footer. A slot: the balance comes from
-     * `@boost33/ledger-client`, never read here. Render its own collapsed form
-     * for the rail.
+     * The token chip, at the centre of the top bar after the switcher and its
+     * "Check Your Tokens →" label (B33-1712; it was pinned above the sidebar's
+     * footer until 0.8.0). A slot: pass `WalletChip` with `placement="topbar"`.
+     * The balance comes from `@boost33/ledger-client`, never read here.
      */
     wallet?: ReactNode;
-    /** The sidebar footer, below the wallet chip. A slot -- the product's own. */
+    /**
+     * The product's main action, at the foot of the sidebar directly above the
+     * footer's divider (B33-1713). Omit it and nothing is drawn. Given neither
+     * `href` nor `onClick`, it is not drawn either: a button that does nothing is
+     * a control that lies (B33-1270). On the rail it shows its icon alone, or
+     * nothing if it has none.
+     */
+    action?: AppShellAction;
+    /**
+     * The sidebar footer, at the foot of the sidebar, under a divider -- Settings
+     * and Help on board 20. A slot -- the product's own.
+     */
     footer?: ReactNode;
     /**
      * The sidebar collapsed to the 56px rail. A state of the shell: the sidebar
-     * narrows and every piece it owns collapses off this one flag. The slots
-     * (switcher, wallet, footer) render their own collapsed form.
+     * narrows to icon-only nav and every piece it owns collapses off this one
+     * flag. The footer slot renders its own collapsed form. The switcher and the
+     * token chip live in the top bar since 0.8.0 (B33-1712) and do not collapse;
+     * the rail has no redesign of its own and keeps working as it did.
      */
     collapsed?: boolean;
+    /**
+     * The width from which the shell draws its own chrome -- the top bar and the
+     * sidebar. Below it the shell hides both and the page body takes the full
+     * width, so a product renders its own phone header and navigation around the
+     * shell. Omit it and the chrome is drawn at every width, as before.
+     *
+     * Not a mobile shell: nothing is redesigned below the breakpoint, the shell
+     * only gets out of the way. AppShell has no phone layout of its own, and the
+     * 0.8 top bar runs off a 390px screen.
+     *
+     * Done in the shell's own CSS, `@media (width < …)`, so the first paint is
+     * already right and a server-rendered page does not flash the desktop chrome
+     * on a phone, which a `matchMedia` switch in the product does. That is also
+     * why it is a name and not a number: a media query cannot read a value passed
+     * at runtime. The names and widths are Tailwind v4's defaults, so `lg` here
+     * and `lg:` in a product's own markup flip at the same pixel:
+     * `md` 48rem (768px), `lg` 64rem (1024px), `xl` 80rem (1280px).
+     *
+     * Below the breakpoint the page scrolls the document instead of the shell's
+     * content box, so a product header above the shell scrolls with the page. The
+     * `<main>` landmark stays; the hidden chrome is `display: none`, so it leaves
+     * the accessibility tree too.
+     */
+    chromeFrom?: AppShellBreakpoint;
+    /**
+     * The product's own phone chrome -- its header, its navigation -- drawn by
+     * the shell above the page body and shown only below `chromeFrom`, the
+     * inverse of the top bar and sidebar. The shell's own CSS does both halves,
+     * so a product passes its phone header here and writes no selector and no
+     * `lg:hidden` of its own.
+     *
+     * Above `<main>`, not inside it: "jump to main" skips the chrome on a phone
+     * the way it skips the top bar and sidebar on a desktop. A slot -- the
+     * product's own markup; the shell draws no phone design.
+     *
+     * Ignored without `chromeFrom`: with no breakpoint there is no width at which
+     * it would show.
+     */
+    phoneChrome?: ReactNode;
     /**
      * The element every linked nav row renders through. Defaults to a plain `a`;
      * a consumer whose router owns navigation passes its own here and the shell
@@ -140,4 +252,4 @@ export interface AppShellProps {
      */
     children: ReactNode;
 }
-export declare function AppShell({ label, navLabel, nav, topBar, mark, hubHref, switcher, wallet, footer, collapsed, linkComponent, children, }: AppShellProps): import("react").JSX.Element;
+export declare function AppShell({ label, appName, navLabel, nav, topBar, mark, hubHref, org, switcher, wallet, action, footer, collapsed, chromeFrom, phoneChrome, linkComponent, children, }: AppShellProps): import("react").JSX.Element;

package/dist/components/AppShell/AppShell.js

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