@charcuterie/ui 2.8.0 → 2.10.0

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/mountStory.testHelpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mountStory.testHelpers.d.ts","sourceRoot":"","sources":["../src/mountStory.testHelpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAEvC,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAA;AAEvC;;;;;GAKG;AACH,KAAK,cAAc,GAAG;IACpB,GAAG,EAAE,CAAC,OAAO,EAAE;QACb,aAAa,EAAE,WAAW,CAAA;KAC3B,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;CACpB,CAAA;AAkDD,eAAO,MAAM,UAAU,GACrB,OAAO,cAAc,KACpB,OAAO,CAAC;IACT,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;IACd,aAAa,EAAE,WAAW,CAAA;CAC3B,CAwBA,CAAA"}
+{"version":3,"file":"mountStory.testHelpers.d.ts","sourceRoot":"","sources":["../src/mountStory.testHelpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAEvC,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAA;AAEvC;;;;;GAKG;AACH,KAAK,cAAc,GAAG;IACpB,GAAG,EAAE,CAAC,OAAO,EAAE;QACb,aAAa,EAAE,WAAW,CAAA;KAC3B,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;CACpB,CAAA;AA+GD,eAAO,MAAM,UAAU,GACrB,OAAO,cAAc,KACpB,OAAO,CAAC;IACT,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;IACd,aAAa,EAAE,WAAW,CAAA;CAC3B,CA0BA,CAAA"}

package/dist/mountStory.testHelpers.js

@@ -46,6 +46,61 @@ import { within } from "storybook/test";
  * triggers still open from inside `canvas`.
  */
 const mountedCanvases = [];
+/**
+ * One frame past the mount, so post-mount effects have applied
+ * before anything reads the DOM.
+ *
+ * `storybook-addon-pseudo-states` applies its forced
+ * `:hover`/`:focus`/`:active` classes **a tick after render**, not
+ * during it — `vrtCapture.mjs` documents the same window and closes
+ * it with a settle, after "a real flake seen on `*--all-states`
+ * stories".
+ *
+ * This suite has the identical window and never closed it, and the
+ * consequence is worse here than a pixel diff: the a11y addon's
+ * `afterEach` runs axe the moment `run()` resolves, so a story
+ * whose forced state lands late is audited **un-forced**, and one
+ * whose state lands early is audited **hovered**. That is a
+ * contrast check reading `intent-accent-solid` on one run and
+ * `intent-accent-solid-hover` on the next — which is precisely the
+ * shape of `ButtonLink`'s intermittent `color-contrast` failure in
+ * CI, reported against `#6A64F0`, the daylight `solidHover`.
+ *
+ * Two frames rather than a fixed delay: React flushes effects and
+ * the addon applies classes within a frame, so this is a barrier
+ * tied to the browser's own scheduling instead of a millisecond
+ * count guessed against one machine. `vrtCapture` can afford its
+ * 400ms because it takes ~700 shots; this runs before every one of
+ * 222 tests.
+ */
+/**
+ * Captured at module load, **before any test can replace it**.
+ *
+ * `Toast.test.tsx` stubs `requestAnimationFrame` and *holds* the
+ * callbacks, deliberately, to prove that a dismiss arriving during
+ * the enter frame is not undone by it. A settle that called the
+ * live `globalThis.requestAnimationFrame` would hand its own
+ * continuation to that stub and never be released — which is
+ * exactly what happened: three Toast tests went from passing to a
+ * flat 15s timeout.
+ *
+ * Binding the native one keeps a true frame barrier while staying
+ * immune to a stub, and it does not disturb the test doing the
+ * stubbing: the component's frames still go to its stub, only this
+ * helper's do not.
+ */
+const requestNativeFrame = globalThis.requestAnimationFrame?.bind(globalThis);
+const settlePostMountEffects = () => new Promise((resolve) => {
+    if (!requestNativeFrame) {
+        globalThis.setTimeout(resolve, 0);
+        return;
+    }
+    requestNativeFrame(() => {
+        requestNativeFrame(() => {
+            resolve();
+        });
+    });
+});
 export const mountStory = async (story) => {
     for (const previous of mountedCanvases.splice(0)) {
         previous.remove();
@@ -57,6 +112,7 @@ export const mountStory = async (story) => {
     document.body.append(canvasElement);
     mountedCanvases.push(canvasElement);
     await story.run({ canvasElement });
+    await settlePostMountEffects();
     return {
         body: within(document.body),
         canvas: within(canvasElement),

package/dist/mountStory.testHelpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"mountStory.testHelpers.js","sourceRoot":"","sources":["../src/mountStory.testHelpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAgBvC;;;;;;;;;;GAUG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,eAAe,GAAkB,EAAE,CAAA;AAEzC,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,EAC7B,KAAqB,EAKpB,EAAE;IACH,KAAK,MAAM,QAAQ,IAAI,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;QACjD,QAAQ,CAAC,MAAM,EAAE,CAAA;IACnB,CAAC;IAED,KAAK,MAAM,UAAU,IAAI,QAAQ,CAAC,gBAAgB,CAChD,2BAA2B,CAC5B,EAAE,CAAC;QACF,UAAU,CAAC,MAAM,EAAE,CAAA;IACrB,CAAC;IAED,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;IAEnD,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,CAAA;IAEnC,eAAe,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;IAEnC,MAAM,KAAK,CAAC,GAAG,CAAC,EAAE,aAAa,EAAE,CAAC,CAAA;IAElC,OAAO;QACL,IAAI,EAAE,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC;QAC3B,MAAM,EAAE,MAAM,CAAC,aAAa,CAAC;QAC7B,aAAa;KACd,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"mountStory.testHelpers.js","sourceRoot":"","sources":["../src/mountStory.testHelpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAgBvC;;;;;;;;;;GAUG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,eAAe,GAAkB,EAAE,CAAA;AAEzC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH;;;;;;;;;;;;;;;GAeG;AACH,MAAM,kBAAkB,GACtB,UAAU,CAAC,qBAAqB,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;AAEpD,MAAM,sBAAsB,GAAG,GAAG,EAAE,CAClC,IAAI,OAAO,CAAO,CAAC,OAAO,EAAE,EAAE;IAC5B,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACxB,UAAU,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC,CAAA;QAEjC,OAAM;IACR,CAAC;IAED,kBAAkB,CAAC,GAAG,EAAE;QACtB,kBAAkB,CAAC,GAAG,EAAE;YACtB,OAAO,EAAE,CAAA;QACX,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA;AAEJ,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,EAC7B,KAAqB,EAKpB,EAAE;IACH,KAAK,MAAM,QAAQ,IAAI,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;QACjD,QAAQ,CAAC,MAAM,EAAE,CAAA;IACnB,CAAC;IAED,KAAK,MAAM,UAAU,IAAI,QAAQ,CAAC,gBAAgB,CAChD,2BAA2B,CAC5B,EAAE,CAAC;QACF,UAAU,CAAC,MAAM,EAAE,CAAA;IACrB,CAAC;IAED,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;IAEnD,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,CAAA;IAEnC,eAAe,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;IAEnC,MAAM,KAAK,CAAC,GAAG,CAAC,EAAE,aAAa,EAAE,CAAC,CAAA;IAElC,MAAM,sBAAsB,EAAE,CAAA;IAE9B,OAAO;QACL,IAAI,EAAE,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC;QAC3B,MAAM,EAAE,MAAM,CAAC,aAAa,CAAC;QAC7B,aAAa;KACd,CAAA;AACH,CAAC,CAAA"}

package/dist/viewport.testHelpers.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Resize the browser and **wait until the page agrees**.
+ *
+ * `page.viewport()` resolves when the driver has asked for the
+ * resize, not when the tester frame has been laid out at the new
+ * size. On the first resize in a file that gap is real: the
+ * assertion runs against the *previous* width, so a
+ * horizontal-scroll test at 390px silently measures a 1440px page
+ * and reports a number nobody can explain. It is a race, so it
+ * fails intermittently — which is the worst possible property for
+ * the one gate that says the shell does not scroll sideways.
+ *
+ * Polling `innerWidth` is the honest wait: it is the same number
+ * the media queries and the layout resolved against, so when it
+ * matches, the thing under test really is at the width the test
+ * claims.
+ */
+export declare const setViewport: ({ height, width, }: {
+    height: number;
+    width: number;
+}) => Promise<void>;
+/** A phone in portrait — the width plex-channels scrolls at. */
+export declare const PHONE: {
+    height: number;
+    width: number;
+};
+export declare const DESKTOP: {
+    height: number;
+    width: number;
+};
+//# sourceMappingURL=viewport.testHelpers.d.ts.map

package/dist/viewport.testHelpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewport.testHelpers.d.ts","sourceRoot":"","sources":["../src/viewport.testHelpers.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,WAAW,GAAU,oBAG/B;IACD,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;CACd,KAAG,OAAO,CAAC,IAAI,CAgBf,CAAA;AAED,gEAAgE;AAChE,eAAO,MAAM,KAAK;;;CAA8B,CAAA;AAEhD,eAAO,MAAM,OAAO;;;CAA+B,CAAA"}

package/dist/viewport.testHelpers.js

@@ -0,0 +1,34 @@
+import { page } from "@vitest/browser/context";
+/**
+ * Resize the browser and **wait until the page agrees**.
+ *
+ * `page.viewport()` resolves when the driver has asked for the
+ * resize, not when the tester frame has been laid out at the new
+ * size. On the first resize in a file that gap is real: the
+ * assertion runs against the *previous* width, so a
+ * horizontal-scroll test at 390px silently measures a 1440px page
+ * and reports a number nobody can explain. It is a race, so it
+ * fails intermittently — which is the worst possible property for
+ * the one gate that says the shell does not scroll sideways.
+ *
+ * Polling `innerWidth` is the honest wait: it is the same number
+ * the media queries and the layout resolved against, so when it
+ * matches, the thing under test really is at the width the test
+ * claims.
+ */
+export const setViewport = async ({ height, width, }) => {
+    await page.viewport(width, height);
+    const deadline = Date.now() + 2000;
+    while (globalThis.innerWidth !== width) {
+        if (Date.now() > deadline) {
+            throw new Error(`The viewport never reached ${width}px — it is ${globalThis.innerWidth}px. Every width assertion after this point would be measuring the wrong page.`);
+        }
+        await new Promise((resolve) => {
+            globalThis.requestAnimationFrame(resolve);
+        });
+    }
+};
+/** A phone in portrait — the width plex-channels scrolls at. */
+export const PHONE = { height: 844, width: 390 };
+export const DESKTOP = { height: 900, width: 1440 };
+//# sourceMappingURL=viewport.testHelpers.js.map

package/dist/viewport.testHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewport.testHelpers.js","sourceRoot":"","sources":["../src/viewport.testHelpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAA;AAE9C;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,EAAE,EAChC,MAAM,EACN,KAAK,GAIN,EAAiB,EAAE;IAClB,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;IAElC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAA;IAElC,OAAO,UAAU,CAAC,UAAU,KAAK,KAAK,EAAE,CAAC;QACvC,IAAI,IAAI,CAAC,GAAG,EAAE,GAAG,QAAQ,EAAE,CAAC;YAC1B,MAAM,IAAI,KAAK,CACb,8BAA8B,KAAK,cAAc,UAAU,CAAC,UAAU,+EAA+E,CACtJ,CAAA;QACH,CAAC;QAED,MAAM,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YAC5B,UAAU,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAA;QAC3C,CAAC,CAAC,CAAA;IACJ,CAAC;AACH,CAAC,CAAA;AAED,gEAAgE;AAChE,MAAM,CAAC,MAAM,KAAK,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,CAAA;AAEhD,MAAM,CAAC,MAAM,OAAO,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcuterie/ui",
-  "version": "2.8.0",
+  "version": "2.10.0",
   "description": "The Charcuterie components. Tokens for look, @charcuterie/logic for state, ARIA that agents can actually drive.",
   "license": "MIT",
   "type": "module",
@@ -49,7 +49,7 @@
   },
   "dependencies": {
     "@charcuterie/logic": "1.2.0",
-    "@charcuterie/tokens": "1.2.0",
+    "@charcuterie/tokens": "1.3.0",
     "@floating-ui/react": "^0.27.20",
     "@tanstack/react-virtual": "^3.13.12"
   },

package/src/Dialog/Dialog.tsx

@@ -119,7 +119,23 @@ export const Dialog = ({
         ) : null}
       </header>
 
-      <div className="min-h-0 flex-1 overflow-auto p-4">
+      {/*
+        `tabIndex={0}` is load-bearing, not decoration. This region
+        scrolls, and a scrollable region that cannot be focused cannot
+        be scrolled by anyone driving the keyboard — there is nothing
+        to put the caret in and no way to reach the overflow. axe
+        gates it as `scrollable-region-focusable` (serious).
+
+        It only surfaced once the body actually overflowed, which is
+        why it could land green: the rule fires on a region that is
+        scrollable *right now*, so a dialog whose content happened to
+        fit stayed silent.
+      */}
+      <div
+        className="min-h-0 flex-1 overflow-auto p-4"
+        // biome-ignore lint/a11y/noNoninteractiveTabindex: a scroll container must be focusable or a keyboard user can see the pane and cannot scroll it — axe's `scrollable-region-focusable`, which fails this component without the line. Same call, and the same wording, as `LogViewer`'s scroll pane. The rule is right about `<div>`s in general and wrong about scrollers.
+        tabIndex={0}
+      >
         {children}
       </div>
 

package/src/Field/Field.tsx

@@ -202,9 +202,17 @@ export const Field = ({
 
       {clonedControl}
 
+      {/*
+        Both of these are `text-sm`, not `text-xs`, since 2026-08-10.
+        A field description is the instruction for the input directly
+        above it, and an error is the one thing the user has to read
+        to get unstuck — neither survives being the smallest text on
+        the page. `aria-describedby` already ties them to the control;
+        the size is what decides whether a sighted user reads them.
+      */}
       {description === undefined ? null : (
         <p
-          className="text-content-secondary text-xs"
+          className="text-content-secondary text-sm"
           id={descriptionId}
         >
           {description}
@@ -213,7 +221,7 @@ export const Field = ({
 
       {error === undefined ? null : (
         <p
-          className="text-intent-danger-content text-xs"
+          className="text-intent-danger-content text-sm"
           id={errorId}
         >
           {error}

package/src/Field/FieldGroup.tsx

@@ -116,9 +116,11 @@ export const FieldGroup = ({
 
       {children}
 
+      {/* `text-sm` since 2026-08-10, matching `Field` — same reasoning,
+          and the two must not disagree about how big a description is. */}
       {description === undefined ? null : (
         <p
-          className="text-content-secondary text-xs"
+          className="text-content-secondary text-sm"
           id={descriptionId}
         >
           {description}
@@ -127,7 +129,7 @@ export const FieldGroup = ({
 
       {error === undefined ? null : (
         <p
-          className="text-intent-danger-content text-xs"
+          className="text-intent-danger-content text-sm"
           id={errorId}
         >
           {error}

package/src/Header/Header.mdx

@@ -0,0 +1,72 @@
+import { Canvas, Controls, Meta } from "@storybook/addon-docs/blocks";
+
+import * as HeaderStories from "./Header.stories";
+
+<Meta of={HeaderStories} />
+
+# Header
+
+The `<header>` landmark, the app's name, and the controls that belong to the frame rather
+than to the page. Ten repos hand-roll this row; two of them wrote the same string.
+
+<Canvas of={HeaderStories.Default} />
+
+## Props
+
+<Controls />
+
+<Canvas of={HeaderStories.AllStates} />
+
+## `isSticky` sets `position` **and** `z-index`
+
+That pairing is the entire reason the prop is a boolean rather than two class names.
+
+mux-magic's `PageHeader` is documented as a sticky header and sets only `z-index`
+(`PageHeader.tsx:173`). It never sets `position: sticky`, so it scrolls away like any other
+block and the z-index it carries has nothing to stack against — it is a flex-column shell
+wearing a sticky header's clothes. The CSS is valid, the intent is stated in a comment, and
+nobody scrolls a component in a review.
+
+<Canvas of={HeaderStories.AllVariants} />
+
+The z-index is `--layer-sticky` (100) from the token scale, never a hand-picked number. The
+fleet's headers currently sit at `z-40` (mail-sifter, points-market), `z-50` (rip-deck),
+`z-10` (spoolbuddy) and `z-[100]` (mux-magic) with no ordering guarantee between a header
+and anything else. On the scale, `sticky` is below `dropdown` (200), `modal` (400) and
+`toast` (500) — so a `Menu` opened *from* the header paints over it, by construction.
+
+<Canvas of={HeaderStories.NotSticky} />
+
+## It invents no colours
+
+`bg-surface-raised/85`, `backdrop-blur-md`, `border-border-subtle`. The fleet's copy of this
+line is `bg-surface-base/90` — the header at *the same colour as the page behind it*,
+leaning entirely on the blur to separate the two, so it disappears against a page that has
+not been scrolled. `raised` means *more separated from base*, which is the role this
+element actually wants.
+
+## The width comes from `Shell`
+
+<Canvas of={HeaderStories.Responsive} />
+
+The `<header>` is full-bleed — the border and the translucent fill run edge to edge — and
+only its **inner row** is capped. That is what stops a constrained header from reading as a
+floating island on an ultrawide, and it is the half points-market got right while its
+`<main>` went uncapped.
+
+The cap itself comes from `Shell`'s `contentWidth` through context, so the title always
+sits directly above the content it names. Passing `contentWidth` here overrides it for the
+rare case where they genuinely differ.
+
+## Slots, in render order
+
+`heading` → `children` → `actions`. Every one is optional: a header with only actions is
+image-viewer's `TitleBar`, one with only a heading is board-games'. `children` is the middle
+— a search field, a breadcrumb, a status pill — and `actions` is pushed to the far end with
+`ms-auto`, so it stays at the end in RTL too.
+
+<Canvas of={HeaderStories.Interactive} />
+
+`headingLevel` defaults to `1`, because on most pages the app's name *is* the document's
+top-level heading. An app whose page title is its `h1` sets `headingLevel={2}` here rather
+than leaving two of them.

package/src/Header/Header.stories.tsx

@@ -0,0 +1,221 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Badge } from "../Badge/Badge.tsx"
+import { Button } from "../Button/Button.tsx"
+import {
+  StoryCell,
+  StorySection,
+} from "../board.storyHelpers.tsx"
+import { Main } from "../Main/Main.tsx"
+import { Shell } from "../Shell/Shell.tsx"
+import {
+  HeaderSchemeToggle,
+  PageContent,
+  ScrollFiller,
+} from "../shell.storyHelpers.tsx"
+import { Header } from "./Header.tsx"
+
+const meta = {
+  title: "Components/Header",
+  component: Header,
+  parameters: { layout: "fullscreen" },
+  argTypes: {
+    headingLevel: {
+      control: { type: "radio" },
+      options: [1, 2],
+    },
+  },
+  args: {
+    headingLevel: 1,
+    isSticky: true,
+  },
+} satisfies Meta<typeof Header>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+/**
+ * The fleet's header, as one component: the app's name, the
+ * controls that belong to the frame, a real `<header>` landmark,
+ * and a fill that is `surface-raised` rather than the page's own
+ * colour.
+ */
+export const Default: Story = {
+  args: { heading: "Rip Deck" },
+  render: (headerProps) => (
+    <Shell>
+      <Header
+        {...headerProps}
+        actions={<HeaderSchemeToggle />}
+      />
+
+      <Main>
+        <PageContent />
+      </Main>
+    </Shell>
+  ),
+}
+
+/**
+ * The three slots, in the order they render: the heading, the
+ * middle (`children` — a search field, a breadcrumb, a status
+ * pill), and `actions`, which is pushed to the far end.
+ *
+ * Every one is optional. A header with only actions is the
+ * image-viewer's `TitleBar`; a header with only a heading is
+ * board-games'.
+ */
+export const AllStates: Story = {
+  render: (headerProps) => (
+    <StorySection title="Ten repos hand-roll this row. These are the four shapes they hand-roll it into.">
+      <StoryCell align="stretch" label="heading only">
+        <Header {...headerProps} heading="Board Games" />
+      </StoryCell>
+
+      <StoryCell align="stretch" label="heading + actions">
+        <Header
+          {...headerProps}
+          actions={<HeaderSchemeToggle />}
+          heading="Points Market"
+        />
+      </StoryCell>
+
+      <StoryCell
+        align="stretch"
+        label="heading + middle + actions"
+      >
+        <Header
+          {...headerProps}
+          actions={<HeaderSchemeToggle />}
+          heading="Mail Sifter"
+        >
+          <Badge intent="info">412 unread</Badge>
+        </Header>
+      </StoryCell>
+
+      <StoryCell align="stretch" label="actions only">
+        <Header {...headerProps}>
+          <Button appearance="ghost" size="sm">
+            Open
+          </Button>
+        </Header>
+      </StoryCell>
+    </StorySection>
+  ),
+}
+
+/**
+ * **`isSticky` sets `position` and `z-index` together, and that
+ * is the point.** mux-magic's `PageHeader` is documented as a
+ * sticky header and sets only the z-index, so it scrolls away
+ * like any other block — valid CSS, stated intent, no effect.
+ *
+ * Scroll the panel below. The z-index is `--layer-sticky` (100)
+ * from the token scale, so a `Menu` opened from the header — at
+ * `--layer-modal` (400) — still paints over it.
+ */
+export const AllVariants: Story = {
+  render: (headerProps) => (
+    <div className="h-96 overflow-y-auto border border-border-subtle">
+      <Shell>
+        <Header
+          {...headerProps}
+          actions={<HeaderSchemeToggle />}
+          heading="Scroll me"
+        />
+
+        <Main>
+          <PageContent />
+
+          <ScrollFiller />
+        </Main>
+      </Shell>
+    </div>
+  ),
+}
+
+/**
+ * `isSticky={false}` — the header scrolls away with the page, and
+ * takes its z-index with it rather than leaving a stacking
+ * context nobody asked for. board-games' `AppShell.tsx` is this
+ * one: the same structure as mail-sifter's and points-market's,
+ * minus `sticky`.
+ */
+export const NotSticky: Story = {
+  args: { heading: "Board Games", isSticky: false },
+  render: (headerProps) => (
+    <div className="h-96 overflow-y-auto border border-border-subtle">
+      <Shell>
+        <Header
+          {...headerProps}
+          actions={<HeaderSchemeToggle />}
+        />
+
+        <Main>
+          <PageContent />
+
+          <ScrollFiller />
+        </Main>
+      </Shell>
+    </div>
+  ),
+}
+
+/**
+ * The width contract. **The `<header>` is full-bleed and only its
+ * inner row is capped**, which is what stops a constrained header
+ * from looking like a floating island on an ultrawide — and the
+ * cap it uses is `Shell`'s, so the title always sits directly
+ * above the content it names.
+ *
+ * points-market is the app where those two disagree: its header
+ * row is capped at 80rem and its `<main>` is not capped at all.
+ */
+export const Responsive: Story = {
+  render: (headerProps) => (
+    <Shell contentWidth="sm">
+      <Header
+        {...headerProps}
+        actions={<HeaderSchemeToggle />}
+        heading="Narrow by contract"
+      />
+
+      <Main>
+        <PageContent />
+      </Main>
+    </Shell>
+  ),
+}
+
+/**
+ * What an agent reaches for. The header is a landmark, so
+ * `getByRole("banner")` scopes every query inside it — which is
+ * how one of the three "Settings" buttons on a page becomes
+ * addressable.
+ */
+export const Interactive: Story = {
+  args: { heading: "Rip Deck" },
+  render: (headerProps) => (
+    <Shell>
+      <Header
+        {...headerProps}
+        actions={
+          <>
+            <Button appearance="outline" size="sm">
+              Settings
+            </Button>
+
+            <HeaderSchemeToggle />
+          </>
+        }
+      />
+
+      <Main>
+        <Button appearance="outline" size="sm">
+          Settings
+        </Button>
+      </Main>
+    </Shell>
+  ),
+}