@boost33/ui 0.7.0 → 0.8.0-next.0

package/CHANGELOG.md

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

package/dist/buttons.module.css.js

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

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

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

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

@@ -10,12 +10,29 @@ export interface AppShellNavItem {
     active?: boolean;
     /** Trailing-slot count. Omit to leave the slot empty; it still reserves its width so counts line up. */
     count?: number;
-    /** Renders `count` in the primary color instead of muted. */
+    /** Draws `count` as the filled "needs you" pill instead of muted text. */
     countUrgent?: boolean;
+    /** A trailing attention dot; the string is what a screen reader hears. Ignored when `count` is set. */
+    dot?: string;
     /** Where the row goes. A nav row's destination is data; the shell renders it as a link. */
     href?: string;
 }
 /** One nav section: an optional header over a run of rows. */
+/**
+ * The product's main action, drawn as a button at the foot of the sidebar,
+ * above the footer's divider (B33-1713, board 20's "New scan"). Data, like a
+ * nav row: the shell renders it, in the primary tier's ink tone (ADR-0016).
+ */
+export interface AppShellAction {
+    /** The button's words, in the consumer's language -- "New scan". */
+    label: string;
+    /** A leading icon, decorative. On the 56px rail it is all that shows. */
+    icon?: ReactNode;
+    /** Where it goes. Renders a link through `linkComponent`. Wins over `onClick`. */
+    href?: string;
+    /** What pressing it does. Renders a `<button>`. */
+    onClick?: () => void;
+}
 export interface AppShellNavSection {
     /** The section header. Omit for a headerless section (the nav's first section has none). On the rail every header drops. */
     label?: string;
@@ -65,43 +82,104 @@ 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. */
+    /**
+     * 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;
     /**
-     * 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.
+     * 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 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 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
-     * threads it to every row of `nav`, so the whole nav goes client-side with the
-     * locale prefix intact rather than full-page-reloading (B33-847). This is the
-     * shell's one nod to how a consumer routes -- it renders the element, never
-     * knowing what it is. See docs/adr/0011.
+     * threads it to every row of `nav`, and to the wordmark when `hubHref` links
+     * it, so the whole nav goes client-side with the locale prefix intact rather
+     * than full-page-reloading (B33-847). This is the shell's one nod to how a
+     * consumer routes -- it renders the element, never knowing what it is. See
+     * docs/adr/0011.
      *
-     * **It reaches the rows of `nav` and nothing else.** The slots (`switcher`,
-     * `wallet`, `footer`, `topBar.actions`) are `ReactNode`s the consumer has
-     * already created, so the shell cannot put a prop on what is inside one. A
+     * **It reaches the rows of `nav` and the wordmark, and nothing else.** The
+     * slots (`switcher`, `wallet`, `footer`, `topBar.actions`) are `ReactNode`s
+     * the consumer has already created, so the shell cannot put a prop on what is
+     * inside one. A
      * consumer composing a link-bearing component into a slot -- `AppSwitcher`,
      * `AccountMenu`, `NotificationCenter` -- passes `linkComponent` to that
      * component as well, or its rows stay bare anchors and reload the page. The
@@ -130,4 +208,4 @@ export interface AppShellProps {
      */
     children: ReactNode;
 }
-export declare function AppShell({ label, navLabel, nav, topBar, mark, switcher, wallet, footer, collapsed, linkComponent, children, }: AppShellProps): import("react").JSX.Element;
+export declare function AppShell({ label, appName, navLabel, nav, topBar, mark, hubHref, org, switcher, wallet, action, footer, collapsed, linkComponent, children, }: AppShellProps): import("react").JSX.Element;

package/dist/components/AppShell/AppShell.js

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