@charcuterie/ui 4.5.0 → 4.6.0

package/src/Card/Card.tsx

@@ -83,7 +83,10 @@ const PADDING_CLASS: Record<CardPadding, 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
@@ -94,6 +97,7 @@ const PADDING_CLASS: Record<CardPadding, string> = {
  * a layout fact rather than a density one.
  */
 export const Card = ({
+  "aria-labelledby": ariaLabelledBy,
   accentEdge,
   actions,
   children,
@@ -122,12 +126,30 @@ export const Card = ({
       ? 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}` as const
 
   return (
     <section
       {...sectionProps}
-      aria-labelledby={heading ? headingId : undefined}
+      aria-labelledby={labelledById}
       className={toClassName(
         // `@container` here, not on a wrapper, is what lets the
         // header stack at narrow widths *inside a wide viewport* —

package/src/Checkbox/Checkbox.mdx

@@ -16,7 +16,7 @@ Here the box is `bg-surface-sunken`, its border `border-border-strong`, and the
 the kiosk with no per-app override. `BooleanField` becomes a thin wrapper that binds this
 to a `CommandField`.
 
-<Canvas of={CheckboxStories.Default} />
+<Canvas of={CheckboxStories.Playground} />
 
 ## Props
 

package/src/Checkbox/Checkbox.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"
@@ -29,7 +30,8 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: { label: "Delete originals after import" },
 }
 

package/src/Checkbox/Checkbox.test.tsx

@@ -9,7 +9,7 @@ import * as stories from "./Checkbox.stories.tsx"
 
 const {
   AllStates,
-  Default,
+  Playground,
   Interactive,
   WithDescriptions,
   WithValues,
@@ -17,7 +17,7 @@ const {
 
 test("it is a checkbox a screen reader can name", async () => {
   const { canvas, canvasElement } =
-    await mountStory(Default)
+    await mountStory(Playground)
 
   const checkbox = expectAgentDrivable(canvas, {
     name: "Delete originals after import",
@@ -151,7 +151,7 @@ test("value names the member, and a group reads back the ticked ones", async ()
 })
 
 test("a box with no value stays out of the way", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   // `value` is optional and a lone boolean should omit it. React drops
   // an `undefined` attribute entirely rather than writing an empty
@@ -252,7 +252,7 @@ test("each box owns its own description, and the group owns the group's", async
 })
 
 test("a box with no description writes no aria-describedby", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   // The slot is opt-in. React drops an `undefined` attribute rather
   // than writing an empty string, so a box without a hint points at

package/src/ColorSchemeSwitcher/ColorSchemeSwitcher.mdx

@@ -12,7 +12,7 @@ the [`useColorScheme`](/) hook to the three defaults from `@charcuterie/logic/br
 [`ColorSchemeToggle`](?path=/docs/components-colorschemetoggle--docs). Drop it in and the app
 follows the OS, remembers the user's choice, and re-themes with zero React re-render.
 
-<Canvas of={ColorSchemeSwitcherStories.Default} />
+<Canvas of={ColorSchemeSwitcherStories.Playground} />
 
 ## Props
 

package/src/ColorSchemeSwitcher/ColorSchemeSwitcher.stories.tsx

@@ -3,6 +3,7 @@ import type {
   ColorSchemeResolver,
   ResolvedColorScheme,
 } from "@charcuterie/logic"
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 import { useRef, useState } from "react"
 import type { ColorSchemeIcons } from "../ColorSchemeToggle/ColorSchemeToggle.tsx"
@@ -113,6 +114,7 @@ type Story = StoryObj<typeof meta>
  * scoped to the demo panel, which is exactly how a non-browser host
  * (Electron `nativeTheme`) wires it — by replacing those seams.
  */
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   render: () => <ScopedSwitcherDemo />,
 }

package/src/ColorSchemeSwitcher/ColorSchemeSwitcher.test.tsx

@@ -7,7 +7,7 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./ColorSchemeSwitcher.stories.tsx"
 
-const { Default } = composeStories(stories)
+const { Playground } = composeStories(stories)
 
 /**
  * The connected switcher is agent-drivable and cycles like the
@@ -15,7 +15,7 @@ const { Default } = composeStories(stories)
  * reaches the applier: the demo panel's `data-scheme` tracks it.
  */
 test("it renders a named, drivable button", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   expectAgentDrivable(canvas, {
     name: /colour scheme/i,
@@ -24,7 +24,7 @@ test("it renders a named, drivable button", async () => {
 })
 
 test("system resolves through the injected resolver to the panel", async () => {
-  const { canvasElement } = await mountStory(Default)
+  const { canvasElement } = await mountStory(Playground)
 
   const panel = canvasElement.querySelector("[data-scheme]")
 
@@ -33,7 +33,7 @@ test("system resolves through the injected resolver to the panel", async () => {
 })
 
 test("cycling to a concrete mode re-applies the scheme", async () => {
-  const { canvasElement } = await mountStory(Default)
+  const { canvasElement } = await mountStory(Playground)
 
   const canvas = within(canvasElement)
 
@@ -53,7 +53,7 @@ test("cycling to a concrete mode re-applies the scheme", async () => {
 })
 
 test("the connected switcher forwards the neutral intent by default", async () => {
-  const { canvasElement } = await mountStory(Default)
+  const { canvasElement } = await mountStory(Playground)
 
   const button = canvasElement.querySelector("button")
 

package/src/ColorSchemeToggle/ColorSchemeToggle.mdx

@@ -16,7 +16,7 @@ That split is deliberate. The browser dependency lives one layer up in
 runs unchanged in any runtime — a plain React app wires `onCycle` to `useState`, an Electron
 or React-Native host wires it to `useColorScheme` with its own resolver.
 
-<Canvas of={ColorSchemeToggleStories.Default} />
+<Canvas of={ColorSchemeToggleStories.Playground} />
 
 ## Props
 

package/src/ColorSchemeToggle/ColorSchemeToggle.stories.tsx

@@ -1,4 +1,5 @@
 import type { ColorSchemeMode } from "@charcuterie/logic"
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 import { useState } from "react"
 
@@ -71,7 +72,8 @@ type Story = StoryObj<typeof meta>
  * The accessible name states the current mode and the next one, so
  * it changes as the button cycles — that is what the test asserts.
  */
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   render: (toggleProps) => {
     const [mode, setMode] =
       useState<ColorSchemeMode>("system")

package/src/ColorSchemeToggle/ColorSchemeToggle.test.tsx

@@ -10,7 +10,7 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import meta, * as stories from "./ColorSchemeToggle.stories.tsx"
 
-const { AllModes, Default } = composeStories(stories)
+const { AllModes, Playground } = composeStories(stories)
 
 /**
  * The name states the current mode — a screen reader that lands on
@@ -18,7 +18,7 @@ const { AllModes, Default } = composeStories(stories)
  * and an agent can find it.
  */
 test("the toggle is named for its current mode", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   expectAgentDrivable(canvas, {
     name: /colour scheme: system/i,
@@ -27,7 +27,7 @@ test("the toggle is named for its current mode", async () => {
 })
 
 test("a press cycles the mode and updates the name", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const button = expectAgentDrivable(canvas, {
     name: /colour scheme: system/i,
@@ -53,7 +53,7 @@ test("a press cycles the mode and updates the name", async () => {
 
 test("the icon is hidden from assistive tech; the name carries it", async () => {
   const { canvas, canvasElement } =
-    await mountStory(Default)
+    await mountStory(Playground)
 
   expectAgentDrivable(canvas, {
     name: /colour scheme/i,
@@ -90,7 +90,7 @@ test("each mode renders its own control", async () => {
  * action on real app chrome.
  */
 test("defaults to the neutral intent, not accent", async () => {
-  const { canvasElement } = await mountStory(Default)
+  const { canvasElement } = await mountStory(Playground)
 
   const button = canvasElement.querySelector("button")
 

package/src/Combobox/Combobox.mdx

@@ -13,7 +13,7 @@ Use it when the list is long enough to search or filter; reach for
 [`Listbox`](?path=/docs/components-listbox--docs) for a short rich-option list, and the
 native [`Select`](?path=/docs/components-select--docs) for a plain one.
 
-<Canvas of={ComboboxStories.Default} />
+<Canvas of={ComboboxStories.Playground} />
 
 ## Props
 

package/src/Combobox/Combobox.stories.tsx

@@ -1,4 +1,5 @@
 import { useVisibility } from "@charcuterie/logic"
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { ControlSize } from "@charcuterie/tokens"
 import type { Meta, StoryObj } from "@storybook/react"
 import type { ReactNode } from "react"
@@ -150,7 +151,8 @@ const ComboboxHarness = ({
   )
 }
 
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: {
     isVisible: false,
     onDismiss: () => {},

package/src/Combobox/Combobox.test.tsx

@@ -11,7 +11,7 @@ const {
   AllVariants,
   AttachedInputDrillDown,
   ChosenValueOnOpen,
-  Default,
+  Playground,
   DisabledFirstOption,
   Interactive,
   LongFooter,
@@ -42,7 +42,7 @@ const openMulti = async () => {
 }
 
 const openDefault = async () => {
-  const mounted = await mountStory(Default)
+  const mounted = await mountStory(Playground)
 
   await userEvent.click(
     expectAgentDrivable(mounted.canvas, {

package/src/CopyButton/CopyButton.mdx

@@ -9,7 +9,7 @@ import * as CopyButtonStories from "./CopyButton.stories";
 **A button that puts a string on the clipboard and says so.** Press it, the label turns to
 `Copied`, and the caller is told whether that is true.
 
-<Canvas of={CopyButtonStories.Default} />
+<Canvas of={CopyButtonStories.Playground} />
 
 ## Props
 

package/src/CopyButton/CopyButton.stories.tsx

@@ -1,3 +1,4 @@
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 import { userEvent, within } from "storybook/test"
 
@@ -29,7 +30,9 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {}
+export const Playground: Story = {
+  parameters: playgroundParameters,
+}
 
 /**
  * The confirmation, held open. `confirmDuration` is enormous here so

package/src/CopyButton/CopyButton.test.tsx

@@ -16,11 +16,11 @@ import { expectAgentDrivable } from "../testing/index.ts"
 import meta, * as stories from "./CopyButton.stories.tsx"
 import { copyText } from "./copyText.ts"
 
-const { Confirmed, Default, Refused } =
+const { Confirmed, Playground, Refused } =
   composeStories(stories)
 
 test("is a button an agent can find by role and name", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const button = expectAgentDrivable(canvas, {
     name: "Copy",
@@ -170,7 +170,7 @@ test("a prevented click copies nothing", async () => {
 })
 
 test("has no axe violations", async () => {
-  const { canvasElement } = await mountStory(Default)
+  const { canvasElement } = await mountStory(Playground)
 
   await expectNoAxeViolations(canvasElement)
 })

package/src/DataTable/DataTable.mdx

@@ -10,7 +10,7 @@ import * as DataTableStories from "./DataTable.stories";
 optional selection column, and the sort *announcement* — the data itself stays the
 consumer's.
 
-<Canvas of={DataTableStories.Default} />
+<Canvas of={DataTableStories.Playground} />
 
 ## Props
 

package/src/DataTable/DataTable.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"
@@ -266,7 +267,8 @@ type Story = StoryObj<typeof meta>
  * of the split: the component says *which* column is sorted, the
  * consumer says what that means for a priority enum.
  */
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   render: () => (
     <TaskTable
       initialSort={{

package/src/DataTable/DataTable.test.tsx

@@ -11,7 +11,7 @@ import {
 } from "../viewport.testHelpers.ts"
 import * as stories from "./DataTable.stories.tsx"
 
-const { AllVariants, Default, Interactive, Responsive } =
+const { AllVariants, Playground, Interactive, Responsive } =
   composeStories(stories)
 
 /**
@@ -23,7 +23,7 @@ const { AllVariants, Default, Interactive, Responsive } =
  */
 test("the table is drivable by role and name", async () => {
   const { canvas, canvasElement } =
-    await mountStory(Default)
+    await mountStory(Playground)
 
   const table = expectAgentDrivable(canvas, {
     name: "Tasks",
@@ -43,7 +43,7 @@ test("the table is drivable by role and name", async () => {
  * cannot be sorted", where `"none"` would say the opposite.
  */
 test("sortable columns announce, unsortable ones stay silent", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const updated = expectAgentDrivable(canvas, {
     name: "Updated",

package/src/DatePicker/DatePicker.mdx

@@ -11,7 +11,7 @@ it. The consumer that shaped it is **Docket** — due dates, scheduled dates, ph
 ranges, and a staleness threshold counted in days
 ([decision](../../../docs/decisions/2026-08-19-a-date-is-a-calendar-date-not-an-instant.md)).
 
-<Canvas of={DatePickerStories.Default} />
+<Canvas of={DatePickerStories.Playground} />
 
 ## Props
 

package/src/DatePicker/DatePicker.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"
@@ -99,7 +100,8 @@ const DatePickerHarness = ({
  * `19 aug`, `2026-08-19` and a bare `19` all resolve, and the line
  * underneath shows what they resolved to before anything commits.
  */
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: { label: "Due date" },
   render: () => <DatePickerHarness label="Due date" />,
 }

package/src/DatePicker/DatePicker.test.tsx

@@ -12,11 +12,11 @@ import {
 } from "../viewport.testHelpers.ts"
 import * as stories from "./DatePicker.stories.tsx"
 
-const { AllVariants, Default, Interactive } =
+const { AllVariants, Playground, Interactive } =
   composeStories(stories)
 
 const openDefault = async () => {
-  const mounted = await mountStory(Default)
+  const mounted = await mountStory(Playground)
 
   const input = expectAgentDrivable(mounted.canvas, {
     name: "Due date",
@@ -415,7 +415,7 @@ test("a container narrower than --cq-xs drops the weekday headers to one letter"
   // clamped to the space available and the calendar reads *that*.
   await setViewport({ height: 700, width: 260 })
 
-  const { body, canvas } = await mountStory(Default)
+  const { body, canvas } = await mountStory(Playground)
 
   await userEvent.click(
     expectAgentDrivable(canvas, {

package/src/DatePicker/plainDate.test.ts

@@ -155,16 +155,34 @@ test("the day number round-trips across four centuries", () => {
     year: 2101,
   })
 
+  // ⚠️ ONE assertion, not 74 000 of them.
+  //
+  // This loop covers about 74 000 days, and it used to call `expect` on every
+  // one. Vitest builds an assertion object per call, so the assertion overhead
+  // WAS the whole cost of the test — it ran right up against the default 5 000
+  // ms timeout and started failing on 2026-09-14 when the hosted runners got
+  // slower. Collecting the mismatches and asserting once removes the overhead
+  // and keeps every day covered.
+  //
+  // It also reports better. The old shape stopped at the first bad day; this
+  // one names every day that failed, which is what you want from a round-trip
+  // over a century rule.
+  const mismatchedDayNumbers = []
+
   for (
     let dayNumber = from;
     dayNumber <= to;
     dayNumber += 1
   ) {
-    expect(
-      getDayNumber(getPlainDateFromDayNumber(dayNumber)),
-    ).toBe(dayNumber)
+    if (
+      getDayNumber(getPlainDateFromDayNumber(dayNumber)) !==
+      dayNumber
+    )
+      mismatchedDayNumbers.push(dayNumber)
   }
 
+  expect(mismatchedDayNumbers).toEqual([])
+
   expect(
     getDayNumber({ day: 1, month: 1, year: 1970 }),
   ).toBe(0)

package/src/Dialog/Dialog.mdx

@@ -12,7 +12,7 @@ Close button, a scrolling body, an optional footer, and five sizes. This is what
 and hands the generic one back to the base layer
 ([decision](../../../docs/decisions/2026-08-03-modal-is-the-base-layer-and-dialog-is-the-component.md)).
 
-<Canvas of={DialogStories.Default} />
+<Canvas of={DialogStories.Playground} />
 
 ## Props
 

package/src/Dialog/Dialog.stories.tsx

@@ -1,4 +1,5 @@
 import { useVisibility } from "@charcuterie/logic"
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 import type { ReactNode } from "react"
 import { useRef } from "react"
@@ -121,7 +122,8 @@ const InitialFocusDemo = (): ReactNode => {
   )
 }
 
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: {
     heading: "Bay 3",
     isVisible: false,

package/src/Dialog/Dialog.test.tsx

@@ -13,7 +13,7 @@ import * as stories from "./Dialog.stories.tsx"
 const {
   AllStates,
   AllVariants,
-  Default,
+  Playground,
   InitialFocus,
   Interactive,
   NoBody,
@@ -49,7 +49,7 @@ test("a dialog with no body renders from heading and footer alone", async () =>
 })
 
 test("the dialog is reachable from a body-scoped query", async () => {
-  const { body, canvas } = await mountStory(Default)
+  const { body, canvas } = await mountStory(Playground)
 
   await userEvent.click(
     expectAgentDrivable(canvas, {

package/src/DropRail/DropRail.mdx

@@ -9,7 +9,7 @@ import * as DropRailStories from "./DropRail.stories";
 Every destination at once, brought to the pointer instead of the pointer being carried to
 it.
 
-<Canvas of={DropRailStories.Default} />
+<Canvas of={DropRailStories.Playground} />
 
 ## Props
 

package/src/DropRail/DropRail.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"
 
@@ -170,7 +171,9 @@ type Story = StoryObj<typeof meta>
  * group the card is already in — visible, unofferable, and saying so
  * to a screen reader rather than only by being dimmer.
  */
-export const Default: Story = {}
+export const Playground: Story = {
+  parameters: playgroundParameters,
+}
 
 /**
  * The case the component exists for. Thirty-four destinations do not

package/src/DropRail/DropRail.test.tsx

@@ -6,7 +6,7 @@ import { expectNoAxeViolations } from "../expectNoAxeViolations.testHelpers.ts"
 import { mountStory } from "../mountStory.testHelpers.ts"
 import * as stories from "./DropRail.stories.tsx"
 
-const { AllStates, Default, InAList, ManyTargets } =
+const { AllStates, Playground, InAList, ManyTargets } =
   composeStories(stories)
 
 /**
@@ -25,7 +25,7 @@ const { AllStates, Default, InAList, ManyTargets } =
  */
 
 test("the rail is a listbox of destinations", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const rail = canvas.getByRole("listbox", {
     name: "Move to which project",
@@ -51,7 +51,7 @@ test("a closed rail renders nothing at all", async () => {
 })
 
 test("the group a card is already in is shown but not offerable", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const current = canvas.getByRole("option", {
     name: /Atlas Ingest/,
@@ -64,7 +64,7 @@ test("the group a card is already in is shown but not offerable", async () => {
 })
 
 test("an archived destination is refused", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   expect(
     canvas.getByRole("option", {

package/src/EmptyState/EmptyState.mdx

@@ -14,7 +14,7 @@ Designed fresh rather than ported: the two repos that had a real `EmptyState` wi
 variants were bambuddy and spoolbuddy, which are upstream projects rather than Kevin's
 code, so that evidence was withdrawn from the plan.
 
-<Canvas of={EmptyStateStories.Default} />
+<Canvas of={EmptyStateStories.Playground} />
 
 ## Props
 

package/src/EmptyState/EmptyState.stories.tsx

@@ -1,3 +1,4 @@
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 import { Button } from "../Button/Button.tsx"
 import {
@@ -30,7 +31,8 @@ type Story = StoryObj<typeof meta>
  * The heading is the handle. Eleven copies of "Nothing here" in a
  * `<div>` are indistinguishable to an agent; a named heading is not.
  */
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: {
     description:
       "Insert a disc and rip-deck will pick it up automatically.",

package/src/EmptyState/EmptyState.test.tsx

@@ -6,11 +6,11 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./EmptyState.stories.tsx"
 
-const { Default, DeeplyNested, Interactive } =
+const { Playground, DeeplyNested, Interactive } =
   composeStories(stories)
 
 test("the heading is the handle", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   expectAgentDrivable(canvas, {
     name: "No discs queued",

package/src/Field/Field.mdx

@@ -25,7 +25,7 @@ wrong in the *other* file. Half of them are broken and nothing says which half.
 the argument for a component rather than a convention — here the id is minted and consumed
 in one place and cannot be spelled twice.
 
-<Canvas of={FieldStories.Default} />
+<Canvas of={FieldStories.Playground} />
 
 `Field` is also how a `Picker` (or `Button`, or an app's own control) sits next to
 its label **without butting against the last word**. Those controls are