@charcuterie/ui 4.5.0 → 4.5.1

package/README.md

@@ -284,8 +284,13 @@ rename breaks only the rendered page).
    ([decision](../../docs/decisions/2026-08-21-a-deprecation-is-a-badge-in-place-and-the-sidebar-has-groups.md)).
 2. Colours from `intentStyles.ts`, sizes from `controlStyles.ts`. No hex, no `*-slate-*`
    (a test checks).
-3. The five stories: `Default`, `AllVariants`, `AllStates`, `Responsive` (three container
-   widths, via `ContainerBoard`), `Interactive` (the complete keyboard path).
+3. The five stories: `Playground`, `AllVariants`, `AllStates`, `Responsive` (three
+   container widths, via `ContainerBoard`), `Interactive` (the complete keyboard path).
+   **`Playground` is the only one that carries `parameters: playgroundParameters`.** The
+   addon panel is closed on every story in this Storybook, and that line is how the one
+   story whose `args` drive a single instance opens it again. The other four render their
+   own matrix, so a control moves at most one cell of the board
+   ([decision](../../docs/decisions/2026-09-13-the-addon-panel-is-closed-except-on-the-playground-story.md)).
 4. Export from `src/index.ts` — the one sanctioned barrel. Components import each other
    directly, never through it.
 5. **If it is an overlay, portal it to the body** — `FloatingPortal`, through

package/dist/Card/Card.d.ts

@@ -41,7 +41,10 @@ export declare const ELEVATION_CLASS: Record<ElevationStep, string>;
  *
  * `aria-labelledby` rather than `aria-label`, because the heading is
  * on screen already and stating the name twice is how the two drift
- * apart.
+ * apart. A card with **no** `heading` keeps the `aria-labelledby`
+ * the call site passed, for the app that draws its own title row
+ * inside the card — the name still points at text on screen, which
+ * is the same rule one level out.
  *
  * **Density is not a prop here.** mux-magic's inventory turned up a
  * `CardDensityProvider` in the withdrawn bambuddy evidence, and it
@@ -51,5 +54,5 @@ export declare const ELEVATION_CLASS: Record<ElevationStep, string>;
  * because a card wrapping a poster grid genuinely has none, which is
  * a layout fact rather than a density one.
  */
-export declare const Card: ({ accentEdge, actions, children, className, elevation, footer, heading, headingLevel, padding, style, surface, ...sectionProps }: CardProps) => ReactNode;
+export declare const Card: ({ "aria-labelledby": ariaLabelledBy, accentEdge, actions, children, className, elevation, footer, heading, headingLevel, padding, style, surface, ...sectionProps }: CardProps) => ReactNode;
 //# sourceMappingURL=Card.d.ts.map

package/dist/Card/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,aAAa,EACb,WAAW,EACZ,MAAM,qBAAqB,CAAA;AAC5B,OAAO,KAAK,EACV,qBAAqB,EACrB,SAAS,EACV,MAAM,OAAO,CAAA;AAGd,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAMzD,MAAM,MAAM,WAAW,GAAG,OAAO,CAC/B,WAAW,EACX,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAC7B,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;AAErD,MAAM,MAAM,SAAS,GAAG,qBAAqB,CAAC,SAAS,CAAC,GAAG;IACzD;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,cAAc,CAAA;IAC3B,uDAAuD;IACvD,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,aAAa,CAAA;IACzB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IACxB,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,OAAO,CAAC,EAAE,WAAW,CAAA;CACtB,CAAA;AAQD;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAClC,aAAa,EACb,MAAM,CAMP,CAAA;AASD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,IAAI,GAAI,kIAalB,SAAS,KAAG,SAmEd,CAAA"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,aAAa,EACb,WAAW,EACZ,MAAM,qBAAqB,CAAA;AAC5B,OAAO,KAAK,EACV,qBAAqB,EACrB,SAAS,EACV,MAAM,OAAO,CAAA;AAGd,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAMzD,MAAM,MAAM,WAAW,GAAG,OAAO,CAC/B,WAAW,EACX,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAC7B,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;AAErD,MAAM,MAAM,SAAS,GAAG,qBAAqB,CAAC,SAAS,CAAC,GAAG;IACzD;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,cAAc,CAAA;IAC3B,uDAAuD;IACvD,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,aAAa,CAAA;IACzB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IACxB,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,OAAO,CAAC,EAAE,WAAW,CAAA;CACtB,CAAA;AAQD;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAClC,aAAa,EACb,MAAM,CAMP,CAAA;AASD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,IAAI,GAAI,qKAclB,SAAS,KAAG,SAqFd,CAAA"}

package/dist/Card/Card.js

@@ -36,7 +36,10 @@ const PADDING_CLASS = {
  *
  * `aria-labelledby` rather than `aria-label`, because the heading is
  * on screen already and stating the name twice is how the two drift
- * apart.
+ * apart. A card with **no** `heading` keeps the `aria-labelledby`
+ * the call site passed, for the app that draws its own title row
+ * inside the card — the name still points at text on screen, which
+ * is the same rule one level out.
  *
  * **Density is not a prop here.** mux-magic's inventory turned up a
  * `CardDensityProvider` in the withdrawn bambuddy evidence, and it
@@ -46,7 +49,7 @@ const PADDING_CLASS = {
  * because a card wrapping a poster grid genuinely has none, which is
  * a layout fact rather than a density one.
  */
-export const Card = ({ accentEdge, actions, children, className, elevation = "low", footer, heading, headingLevel = 2, padding = "md", style, surface = "raised", ...sectionProps }) => {
+export const Card = ({ "aria-labelledby": ariaLabelledBy, accentEdge, actions, children, className, elevation = "low", footer, heading, headingLevel = 2, padding = "md", style, surface = "raised", ...sectionProps }) => {
     const headingId = useUniqueId();
     // The caller's own `style` wins. An accent colour is one custom
     // property, and silently dropping whatever else the call site set
@@ -57,8 +60,25 @@ export const Card = ({ accentEdge, actions, children, className, elevation = "lo
     const mergedStyle = accentEdgeStyle == null
         ? style
         : { ...accentEdgeStyle, ...style };
+    // The caller's own pointer is the FALLBACK, not the loser. This
+    // attribute is written *after* the spread, so `undefined` here
+    // does not mean "leave whatever the call site passed": it
+    // overwrites it, React then drops the attribute entirely, and the
+    // card's accessible name falls back to its whole subtree with
+    // nothing failing — not typecheck, not axe, not a render. A
+    // `role="button"` tile in mail-sifter naming itself
+    // `aria-labelledby="recent-tile-heading"` announced as "Recent
+    // Mail 6 40 arrived in the last 24 hours, 34 done".
+    //
+    // `heading` still wins when it is given, because that is the name
+    // the reader can see and this component renders it. Do not
+    // "simplify" this back to a ternary ending in `undefined`.
+    //
+    // `aria-label` needs no equivalent: the component never writes
+    // one, so the spread carries the caller's through untouched.
+    const labelledById = heading ? headingId : ariaLabelledBy;
     const Heading = `h${headingLevel}`;
-    return (_jsxs("section", { ...sectionProps, "aria-labelledby": heading ? headingId : undefined, className: toClassName(
+    return (_jsxs("section", { ...sectionProps, "aria-labelledby": labelledById, className: toClassName(
         // `@container` here, not on a wrapper, is what lets the
         // header stack at narrow widths *inside a wide viewport* —
         // a card in a sidebar and the same card full-bleed are the

package/dist/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAUhD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EACL,sBAAsB,EACtB,kBAAkB,GACnB,MAAM,qBAAqB,CAAA;AA8B5B,MAAM,aAAa,GAAgC;IACjD,IAAI,EAAE,iBAAiB;IACvB,MAAM,EAAE,mBAAmB;IAC3B,MAAM,EAAE,mBAAmB;CAC5B,CAAA;AAED;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,eAAe,GAGxB;IACF,IAAI,EAAE,aAAa;IACnB,GAAG,EAAE,YAAY;IACjB,MAAM,EAAE,eAAe;IACvB,IAAI,EAAE,aAAa;CACpB,CAAA;AAED,MAAM,aAAa,GAAgC;IACjD,IAAI,EAAE,KAAK;IACX,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,KAAK;CACV,CAAA;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EACnB,UAAU,EACV,OAAO,EACP,QAAQ,EACR,SAAS,EACT,SAAS,GAAG,KAAK,EACjB,MAAM,EACN,OAAO,EACP,YAAY,GAAG,CAAC,EAChB,OAAO,GAAG,IAAI,EACd,KAAK,EACL,OAAO,GAAG,QAAQ,EAClB,GAAG,YAAY,EACL,EAAa,EAAE;IACzB,MAAM,SAAS,GAAG,WAAW,EAAE,CAAA;IAE/B,gEAAgE;IAChE,kEAAkE;IAClE,4DAA4D;IAC5D,MAAM,eAAe,GACnB,UAAU,IAAI,IAAI;QAChB,CAAC,CAAC,SAAS;QACX,CAAC,CAAC,kBAAkB,CAAC,UAAU,CAAC,CAAA;IAEpC,MAAM,WAAW,GACf,eAAe,IAAI,IAAI;QACrB,CAAC,CAAC,KAAK;QACP,CAAC,CAAC,EAAE,GAAG,eAAe,EAAE,GAAG,KAAK,EAAE,CAAA;IAEtC,MAAM,OAAO,GAAG,IAAI,YAAY,EAAW,CAAA;IAE3C,OAAO,CACL,sBACM,YAAY,qBACC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAChD,SAAS,EAAE,WAAW;QACpB,wDAAwD;QACxD,2DAA2D;QAC3D,2DAA2D;QAC3D,wDAAwD;QACxD,0DAA0D;QAC1D,4FAA4F,EAC5F,aAAa,CAAC,OAAO,CAAC,EACtB,eAAe,CAAC,SAAS,CAAC,EAC1B,aAAa,CAAC,OAAO,CAAC,EACtB,UAAU,IAAI,IAAI;YAChB,CAAC,CAAC,SAAS;YACX,CAAC,CAAC,sBAAsB,CAAC,UAAU,CAAC,EACtC,SAAS,CACV,EACD,KAAK,EAAE,WAAW,aAEjB,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,CACpB,kBAAQ,SAAS,EAAC,4EAA4E,aAC3F,OAAO,CAAC,CAAC,CAAC,CACT,KAAC,OAAO,IACN,SAAS,EAAC,qCAAqC,EAC/C,EAAE,EAAE,SAAS,YAEZ,OAAO,GACA,CACX,CAAC,CAAC,CAAC,IAAI,EAEP,OAAO,CAAC,CAAC,CAAC,CACT,cAAK,SAAS,EAAC,kCAAkC,YAC9C,OAAO,GACJ,CACP,CAAC,CAAC,CAAC,IAAI,IACD,CACV,CAAC,CAAC,CAAC,IAAI,EAEP,QAAQ,EAER,MAAM,CAAC,CAAC,CAAC,CACR,iBAAQ,SAAS,EAAC,mEAAmE,YAClF,MAAM,GACA,CACV,CAAC,CAAC,CAAC,IAAI,IACA,CACX,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcuterie/ui",
-  "version": "4.5.0",
+  "version": "4.5.1",
   "description": "The Charcuterie components. Tokens for look, @charcuterie/logic for state, ARIA that agents can actually drive.",
   "license": "MIT",
   "type": "module",
@@ -94,6 +94,7 @@
     }
   },
   "devDependencies": {
+    "@charcuterie/storybook-config": "0.4.0",
     "@codemirror/commands": "^6",
     "@codemirror/lang-markdown": "^6",
     "@codemirror/language": "^6",

package/src/Accordion/Accordion.mdx

@@ -9,7 +9,7 @@ import * as AccordionStories from "./Accordion.stories";
 Eleven sites in the fleet. The plan called it "nearly free once `Tabs` exists" — it is, the
 exclusive mode is `VisibilityGroup` and nothing else — but the saving is not why it ships.
 
-<Canvas of={AccordionStories.Default} />
+<Canvas of={AccordionStories.Playground} />
 
 ## Props
 

package/src/Accordion/Accordion.stories.tsx

@@ -1,3 +1,4 @@
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 
 import { Badge } from "../Badge/Badge.tsx"
@@ -67,7 +68,8 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: { expandedKeys: ["disc"], items: JOB_SECTIONS },
 }
 

package/src/Accordion/Accordion.test.tsx

@@ -7,12 +7,12 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./Accordion.stories.tsx"
 
-const { AllStates, AllVariants, Default } =
+const { AllStates, AllVariants, Playground } =
   composeStories(stories)
 
 test("a trigger says what it controls and whether it is open", async () => {
   const { canvas, canvasElement } =
-    await mountStory(Default)
+    await mountStory(Playground)
 
   const disc = expectAgentDrivable(canvas, {
     name: "Disc",
@@ -57,7 +57,7 @@ test("a trigger says what it controls and whether it is open", async () => {
  * frame later.
  */
 test("the initially expanded section is expanded on the first paint", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const expanded = canvas
     .queryAllByRole("button")
@@ -72,7 +72,7 @@ test("the initially expanded section is expanded on the first paint", async () =
 })
 
 test("exclusive means opening one closes the other", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const log = expectAgentDrivable(canvas, {
     name: "Log",

package/src/ActionTiles/ActionTiles.mdx

@@ -15,7 +15,7 @@ named this case under *"What this deliberately does not cover"*: mux-magic's "Pi
 tiles are `<a href>` and points-market's are `<Link>`, and *"a link is not a radio, and
 giving one `aria-checked` would be worse than the paint it replaced"*.
 
-<Canvas of={ActionTilesStories.Default} />
+<Canvas of={ActionTilesStories.Playground} />
 
 ## Props
 

package/src/ActionTiles/ActionTiles.stories.tsx

@@ -1,3 +1,4 @@
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 
 import { controlSizeArgType } from "../argTypes.storyHelpers.ts"
@@ -142,7 +143,8 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: { items: QUEUE_TYPE_ITEMS, label: "Queue type" },
 }
 

package/src/ActionTiles/ActionTiles.test.tsx

@@ -11,7 +11,7 @@ const {
   AllStates,
   AutoHues,
   BesideTheRadioTile,
-  Default,
+  Playground,
   Interactive,
   Links,
   NamedHues,
@@ -41,7 +41,7 @@ const getAccentEdgeLayer = (boxShadow: string) =>
 
 test("it is a named group of pressable tiles", async () => {
   const { canvas, canvasElement } =
-    await mountStory(Default)
+    await mountStory(Playground)
 
   const group = expectAgentDrivable(canvas, {
     name: "Queue type",
@@ -64,7 +64,7 @@ test("it is a named group of pressable tiles", async () => {
 })
 
 test("a tile's hint is part of its accessible name", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   // The reason the hint is rendered inside the tile rather than
   // beside it: a hint a screen reader never reads is a hint half the

package/src/AdaptiveGrid/AdaptiveGrid.mdx

@@ -14,7 +14,7 @@ That is the opposite of every wrapping grid in the fleet today. `auto-fill, minm
 takes every column the width allows, which is how you end up with seven items strung
 across an ultrawide and nothing below the fold.
 
-<Canvas of={AdaptiveGridStories.Default} />
+<Canvas of={AdaptiveGridStories.Playground} />
 
 ## Props
 

package/src/AdaptiveGrid/AdaptiveGrid.stories.tsx

@@ -1,3 +1,4 @@
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 import { useState } from "react"
 
@@ -89,7 +90,8 @@ type Story = StoryObj<typeof meta>
  * carry nine — and the content cap widens from 56rem to 72rem to
  * hold them.
  */
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: { blockSizeResolver: fixedBlockSize(1080) },
 }
 

package/src/AdaptiveGrid/AdaptiveGrid.test.tsx

@@ -36,7 +36,7 @@ import * as stories from "./AdaptiveGrid.stories.tsx"
  * all.
  */
 
-const { AllStates, AllVariants, Default, Responsive } =
+const { AllStates, AllVariants, Playground, Responsive } =
   composeStories(stories)
 
 /**
@@ -109,7 +109,7 @@ test("the grid re-columns when its container resizes", async () => {
   // need two stacks; at 700px wide only one column fits, and at
   // 1280px the second one it wanted is finally allowed.
   const { canvasElement } = await mountAtInlineSize(
-    Default,
+    Playground,
     700,
   )
 
@@ -147,7 +147,7 @@ test("height buys the column, and width only caps it", async () => {
 
 test("the content cap widens with the columns", async () => {
   const { canvasElement } = await mountAtInlineSize(
-    Default,
+    Playground,
     1280,
   )
 
@@ -163,7 +163,7 @@ test("the content cap widens with the columns", async () => {
 
 test("the measured box is never the capped box", async () => {
   const { canvasElement } = await mountAtInlineSize(
-    Default,
+    Playground,
     1280,
   )
 
@@ -203,7 +203,7 @@ test("one item is one column at a reading measure", async () => {
 
 test("a long unbroken string does not push a track wide", async () => {
   const { canvasElement } = await mountAtInlineSize(
-    Default,
+    Playground,
     1280,
   )
 

package/src/Alert/Alert.mdx

@@ -11,7 +11,7 @@ four times — `TowerAlerts`, `UsbAlertBanner`, `LoadedDiscsBanner`, `VerdictBad
 of those carry a byte-identical `TONE_CLASS` map of hardcoded hexes with no light mode.
 mux-magic spells the same idea a third way in `statusClassMap`.
 
-<Canvas of={AlertStories.Default} />
+<Canvas of={AlertStories.Playground} />
 
 ## Props
 

package/src/Alert/Alert.stories.tsx

@@ -1,3 +1,4 @@
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 
 import {
@@ -47,7 +48,8 @@ type Story = StoryObj<typeof meta>
  * rip-deck's grouped tower alert, verbatim: one trouble, the bays it
  * touches, and whether the house speakers already said it out loud.
  */
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: {
     description: "4 bays · 3, 4, 5, 6 · confirmed",
     heading:

package/src/Alert/Alert.test.tsx

@@ -7,7 +7,7 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./Alert.stories.tsx"
 
-const { AllStates, Default, Interactive, Responsive } =
+const { AllStates, Playground, Interactive, Responsive } =
   composeStories(stories)
 
 test("a labelled alert is a landmark an agent can scope to", async () => {
@@ -34,7 +34,7 @@ test("a labelled alert is a landmark an agent can scope to", async () => {
 
 test("an unlabelled alert is not a landmark", async () => {
   const { canvas, canvasElement } =
-    await mountStory(Default)
+    await mountStory(Playground)
 
   // A block, deliberately. Nine bay cards each holding a named
   // region called "Part of the tower-wide problem above." is axe's

package/src/Avatar/Avatar.mdx

@@ -10,7 +10,7 @@ A person, as a coloured chip — a glyph or an initial, with the name attached w
 assistive technology and a hover can reach it. It exists to **delete a printed name**: a
 board whose cards all say "Owner" has spent a column on a word that a colour says faster.
 
-<Canvas of={AvatarStories.Default} />
+<Canvas of={AvatarStories.Playground} />
 
 ## Props
 

package/src/Avatar/Avatar.stories.tsx

@@ -1,3 +1,4 @@
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 
 import { categoricalArgType } from "../argTypes.storyHelpers.ts"
@@ -75,7 +76,9 @@ type Story = StoryObj<typeof meta>
  * a screen reader and on hover for a pointer, and it is not printed
  * anywhere — `getByRole("img", { name: "Ada Lovelace" })` resolves.
  */
-export const Default: Story = {}
+export const Playground: Story = {
+  parameters: playgroundParameters,
+}
 
 /**
  * The three appearances, and the ten colours the scale holds.

package/src/Avatar/Avatar.test.tsx

@@ -7,7 +7,7 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./Avatar.stories.tsx"
 
-const { AllStates, AllVariants, Default, InAList } =
+const { AllStates, AllVariants, Playground, InAList } =
   composeStories(stories)
 
 /**
@@ -18,7 +18,7 @@ const { AllStates, AllVariants, Default, InAList } =
  * text is the one regression that matters.
  */
 test("the name is readable by an agent and never printed", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const avatar = expectAgentDrivable(canvas, {
     name: "Ada Lovelace",

package/src/Badge/Badge.mdx

@@ -11,7 +11,7 @@ Four repos, and rip-deck declares the **identical** `TONE_CLASS` map twice —
 copy-paste. mux-magic's `statusClassMap` is the same idea spelled a third way, keyed by a
 bare `string`, so an unrecognised status renders with no colour and no error.
 
-<Canvas of={BadgeStories.Default} />
+<Canvas of={BadgeStories.Playground} />
 
 ## Props
 

package/src/Badge/Badge.stories.tsx

@@ -2,6 +2,7 @@ import {
   asyncTransitions,
   useStatus,
 } from "@charcuterie/logic"
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import {
   CATEGORICAL_HUES,
   CATEGORICAL_INDEXES,
@@ -64,7 +65,8 @@ type Story = StoryObj<typeof meta>
  * else, not a live region — so the handle an agent reads off the row
  * is its text.
  */
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: { children: "running", intent: "info" },
 }
 

package/src/Badge/Badge.test.tsx

@@ -11,13 +11,13 @@ import meta, * as stories from "./Badge.stories.tsx"
 const {
   Categorical,
   CategoricalLabels,
-  Default,
+  Playground,
   Interactive,
   Responsive,
 } = composeStories(stories)
 
 test("the text is queryable, which is what an agent matches on", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   // No role, deliberately — a badge is a word about something else,
   // not a live region. So there is nothing to `getByRole` and the
@@ -115,7 +115,7 @@ test("a truncated badge never paints outside its container", async () => {
 })
 
 test("a short badge gets no tooltip", async () => {
-  const { canvasElement } = await mountStory(Default)
+  const { canvasElement } = await mountStory(Playground)
 
   // The measurement has to be able to say *no*, or `title` is just
   // unconditional and every pill in a bay list grows a tooltip.

package/src/BadgeButton/BadgeButton.mdx

@@ -16,7 +16,7 @@ opens the panel that changes it, so each one is pressable — and all six were s
 had no way to make `Badge` pressable. The same shape turns up on a start-point chip, a
 group chip and a pool's Exclude chip.
 
-<Canvas of={BadgeButtonStories.Default} />
+<Canvas of={BadgeButtonStories.Playground} />
 
 ## Props
 

package/src/BadgeButton/BadgeButton.stories.tsx

@@ -1,3 +1,4 @@
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 
 import {
@@ -53,7 +54,8 @@ type Story = StoryObj<typeof meta>
  * finds it — which is what an agent, and every test in the fleet,
  * actually matches on.
  */
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: { children: "1 episode", intent: "accent" },
 }
 

package/src/BadgeButton/BadgeButton.test.tsx

@@ -10,7 +10,7 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import meta, * as stories from "./BadgeButton.stories.tsx"
 
-const { BesideABadge, Default, InATileFooter } =
+const { BesideABadge, Playground, InATileFooter } =
   composeStories(stories)
 
 /**
@@ -18,7 +18,7 @@ const { BesideABadge, Default, InATileFooter } =
  * is a component rather than a `className` on `Badge`.
  */
 test("is a button, not a span", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const chip = expectAgentDrivable(canvas, {
     name: "1 episode",

package/src/Board/Board.mdx

@@ -9,7 +9,7 @@ import * as BoardStories from "./Board.stories";
 Lanes of cards, sized by their **container**, moved by keyboard or by pointer — and with
 **no drag-and-drop dependency**.
 
-<Canvas of={BoardStories.Default} />
+<Canvas of={BoardStories.Playground} />
 
 <Canvas of={BoardStories.CardMenuItems} />
 

package/src/Board/Board.stories.tsx

@@ -1,3 +1,4 @@
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 import type { ReactNode } from "react"
 import { useState } from "react"
@@ -473,7 +474,9 @@ type Story = StoryObj<typeof meta>
  * a real mode rather than a story convenience: a board on a wall
  * display should not be advertising affordances nobody can use.
  */
-export const Default: Story = {}
+export const Playground: Story = {
+  parameters: playgroundParameters,
+}
 
 /**
  * Parallel project pools as horizontal bands. Every lane stays on

package/src/Board/Board.test.tsx

@@ -16,7 +16,7 @@ const {
   AccentEdge,
   AllStates,
   CardMenuItems,
-  Default,
+  Playground,
   InBoardScreen,
   Interactive,
   MarkdownTitles,
@@ -188,7 +188,7 @@ test("the priority bar's meaning is available as text", async () => {
  * a promise.
  */
 test("a board with no onMove has no move handles", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   await expect(
     canvas.queryAllByRole("button", { name: /^Move / }),

package/src/Button/Button.mdx

@@ -14,7 +14,7 @@ Six intents x four appearances x three sizes, all of it from tier-2 tokens — s
 swap or a density flip repaints every button on the page with no prop change and no
 re-render.
 
-<Canvas of={ButtonStories.Default} />
+<Canvas of={ButtonStories.Playground} />
 
 ## Props
 

package/src/Button/Button.stories.tsx

@@ -1,3 +1,4 @@
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 
 import {
@@ -57,7 +58,8 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: { children: "Start rip" },
 }
 

package/src/Button/Button.test.tsx

@@ -9,11 +9,11 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import meta, * as stories from "./Button.stories.tsx"
 
-const { AllStates, Default, Loading } =
+const { AllStates, Playground, Loading } =
   composeStories(stories)
 
 test("is drivable by role and name", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   expectAgentDrivable(canvas, {
     name: "Start rip",

package/src/ButtonLink/ButtonLink.mdx

@@ -16,7 +16,7 @@ cannot be middle-clicked, ctrl-clicked, opened in a new tab, or copied — and m
 solves the same problem in the other direction, with 14 raw `<a href="/…">` that force a
 full page reload through its own SPA router.
 
-<Canvas of={ButtonLinkStories.Default} />
+<Canvas of={ButtonLinkStories.Playground} />
 
 ## Props
 

package/src/ButtonLink/ButtonLink.stories.tsx

@@ -1,3 +1,4 @@
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 import type { ReactNode } from "react"
 
@@ -77,7 +78,8 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: { children: "Configure" },
 }
 

package/src/ButtonLink/ButtonLink.test.tsx

@@ -14,7 +14,7 @@ const {
   AllStates,
   AllVariants,
   BesideAButton,
-  Default,
+  Playground,
   External,
   Routed,
 } = composeStories(stories)
@@ -29,7 +29,7 @@ const {
  * whole argument.
  */
 test("is a link, not a button", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const link = expectAgentDrivable(canvas, {
     name: "Configure",
@@ -51,7 +51,7 @@ test("is a link, not a button", async () => {
 })
 
 test("Tab reaches it", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const link = canvas.getByRole("link", {
     name: "Configure",