@charcuterie/ui 4.4.0 → 4.5.1

package/src/Stepper/Stepper.mdx

@@ -12,7 +12,7 @@ Docket asked for this. Its phases — *"these 3 cards have to be done in order"*
 hand-rolled numbered rail with a connector drawn in a `::before`, and a `ProgressBar` per
 phase for the count. Neither says which things go together.
 
-<Canvas of={StepperStories.Default} />
+<Canvas of={StepperStories.Playground} />
 
 ## Props
 

package/src/Stepper/Stepper.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"
 import { Button } from "../Button/Button.tsx"
@@ -54,7 +55,9 @@ type Story = StoryObj<typeof meta>
  * as an empty box in the one position where an empty box reads as
  * an error.
  */
-export const Default: Story = {}
+export const Playground: Story = {
+  parameters: playgroundParameters,
+}
 
 export const AllVariants: Story = {
   render: (stepperProps) => (

package/src/Stepper/Stepper.test.tsx

@@ -9,13 +9,13 @@ import * as stories from "./Stepper.stories.tsx"
 const {
   AllStates,
   CompactCard,
-  Default,
+  Playground,
   Interactive,
   Responsive,
 } = composeStories(stories)
 
 test("the sequence is an ordered list with a name", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   // A `<ol>`, not a stack of divs: the ORDER is the meaning, and a
   // screen reader announcing "list, 3 items" is what carries it.
@@ -28,7 +28,7 @@ test("the sequence is an ordered list with a name", async () => {
 })
 
 test("each step is a heading at the level the caller asked for", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   await expect(
     canvas.getByRole("heading", { level: 3, name: /Rip/ }),
@@ -60,7 +60,7 @@ test("every status is a word, not only a colour", async () => {
 })
 
 test("the marker is the ordinal, so it renders in a font with no tick glyph", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   // Not `✓`. `docs/decisions/2026-07-29-ship-no-icons-and-no-symbol-
   // glyphs.md` — a glyph the font lacks paints as an empty box, and
@@ -75,7 +75,7 @@ test("the marker is the ordinal, so it renders in a font with no tick glyph", as
  * all — a pseudo-element has nothing to count.
  */
 test("the last step draws no connector", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const connectors = canvas
     .getAllByRole("listitem")
@@ -88,7 +88,7 @@ test("the last step draws no connector", async () => {
 })
 
 test("each step carries its key into the DOM, so a re-order can animate", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   // React's `key` never reaches the markup. Without this attribute
   // a caller who re-orders `steps` has no way to say which `<li>`
@@ -124,7 +124,7 @@ test("advancing moves which step is current", async () => {
 })
 
 test("no axe violations, in either orientation", async () => {
-  const vertical = await mountStory(Default)
+  const vertical = await mountStory(Playground)
 
   await expectNoAxeViolations(vertical.canvasElement)
 

package/src/Swatch/Swatch.mdx

@@ -10,7 +10,7 @@ A colour presented **as content**, with a name attached. It is the one colour th
 system does not own: the red sticker on a game controller, the accent castkit pulls off an
 album, a user's tag colour. Not a token — a value from data.
 
-<Canvas of={SwatchStories.Default} />
+<Canvas of={SwatchStories.Playground} />
 
 ## Props
 

package/src/Swatch/Swatch.stories.tsx

@@ -1,3 +1,4 @@
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 
 import {
@@ -44,7 +45,9 @@ type Story = StoryObj<typeof meta>
  * because a colour a screen reader cannot see needs a name it can
  * read.
  */
-export const Default: Story = {}
+export const Playground: Story = {
+  parameters: playgroundParameters,
+}
 
 /**
  * `solid` fills; `outline` keeps the hue and drops the fill. The

package/src/Swatch/Swatch.test.tsx

@@ -6,10 +6,10 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./Swatch.stories.tsx"
 
-const { Default, InAList } = composeStories(stories)
+const { Playground, InAList } = composeStories(stories)
 
 test("a colour is findable by the name a screen reader can read", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   // The whole contract: a `background-color` is nothing to an agent
   // or a screen reader, so the swatch is an `img` with a name.
@@ -44,7 +44,7 @@ test("the name survives with no visible label", async () => {
 })
 
 test("solid rings its fill; the ring is what keeps white visible", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const dot = canvas.getByRole("img", {
     name: "Red",

package/src/Switch/Switch.mdx

@@ -15,7 +15,7 @@ immediately — "automatic imports on". ARIA gives the second its own role, and
 reader announces "on/off" for a `switch` where it announces "checked/unchecked" for a
 checkbox.
 
-<Canvas of={SwitchStories.Default} />
+<Canvas of={SwitchStories.Playground} />
 
 ## Props
 

package/src/Switch/Switch.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"
@@ -28,7 +29,8 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: { label: "Automatic imports" },
 }
 

package/src/Switch/Switch.test.tsx

@@ -7,12 +7,12 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./Switch.stories.tsx"
 
-const { AllStates, Default, Interactive } =
+const { AllStates, Playground, Interactive } =
   composeStories(stories)
 
 test("it is a switch a screen reader can name and read", async () => {
   const { canvas, canvasElement } =
-    await mountStory(Default)
+    await mountStory(Playground)
 
   const control = expectAgentDrivable(canvas, {
     name: "Automatic imports",

package/src/Tabs/Tabs.mdx

@@ -13,7 +13,7 @@ fifteen more components.
 
 It did not come out ugly. The composition is two hooks and one decision.
 
-<Canvas of={TabsStories.Default} />
+<Canvas of={TabsStories.Playground} />
 
 ## Props
 

package/src/Tabs/Tabs.stories.tsx

@@ -1,3 +1,4 @@
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 
 import { toStoryChoice } from "../argTypes.storyHelpers.ts"
@@ -67,7 +68,8 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: { label: "Bay 3", tabs: BAY_TABS },
 }
 

package/src/Tabs/Tabs.test.tsx

@@ -10,7 +10,7 @@ import * as stories from "./Tabs.stories.tsx"
 const {
   AllStates,
   AllVariants,
-  Default,
+  Playground,
   Manual,
   Responsive,
   Routed,
@@ -20,7 +20,7 @@ const {
 
 test("selecting a tab wires the panel back to it", async () => {
   const { canvas, canvasElement } =
-    await mountStory(Default)
+    await mountStory(Playground)
 
   const tablist = expectAgentDrivable(canvas, {
     name: "Bay 3",
@@ -256,7 +256,7 @@ test("manual activation moves focus without selecting", async () => {
 })
 
 test("automatic activation selects as focus moves, and wraps", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const tablist = expectAgentDrivable(canvas, {
     name: "Bay 3",

package/src/TextLink/TextLink.mdx

@@ -18,7 +18,7 @@ header home link because there was nothing else to reach for. All of them are an
 here, so middle-click, ctrl-click, "open in new tab", "copy link address", and the browser's
 status bar work without anybody implementing them.
 
-<Canvas of={TextLinkStories.Default} />
+<Canvas of={TextLinkStories.Playground} />
 
 ## Props
 

package/src/TextLink/TextLink.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"
 
@@ -62,7 +63,8 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: { children: "the rip queue" },
 }
 

package/src/TextLink/TextLink.test.tsx

@@ -14,7 +14,7 @@ const {
   AllAppearances,
   AllStates,
   BackLink,
-  Default,
+  Playground,
   External,
   Routed,
 } = composeStories(stories)
@@ -28,7 +28,7 @@ const {
  * it for free is the entire argument for rendering an anchor.
  */
 test("is drivable by role and name", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const link = expectAgentDrivable(canvas, {
     name: "the rip queue",
@@ -39,7 +39,7 @@ test("is drivable by role and name", async () => {
 })
 
 test("Tab reaches it", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const link = canvas.getByRole("link", {
     name: "the rip queue",
@@ -210,7 +210,7 @@ test("an injected router takes in-app paths and nothing else", async () => {
 })
 
 test("with no provider it is still a real anchor", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const link = canvas.getByRole("link", {
     name: "the rip queue",

package/src/TimecodeInput/TimecodeInput.mdx

@@ -11,7 +11,7 @@ for a section of a file. The consumer that shaped it is **QueuePilot**, which pl
 chosen part of a video
 ([decision](../../../../docs/decisions/2026-09-01-a-timecode-is-milliseconds-and-a-section-is-a-mode.md)).
 
-<Canvas of={TimecodeInputStories.Default} />
+<Canvas of={TimecodeInputStories.Playground} />
 
 ## Props
 

package/src/TimecodeInput/TimecodeInput.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"
@@ -113,7 +114,8 @@ const TimecodeHarness = ({
  * Milliseconds are optional both ways: `1:01:00` commits as
  * `01:01:00`, not as `01:01:00.000`.
  */
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: { label: "Start at" },
   render: () => <TimecodeHarness label="Start at" />,
 }

package/src/Toast/Toast.mdx

@@ -16,7 +16,7 @@ machine down and M2 never built it:
 
 > | Toast lifecycle | entering → visible → exiting → removed |
 
-<Canvas of={ToastStories.Default} />
+<Canvas of={ToastStories.Playground} />
 
 ## Props
 

package/src/Toast/Toast.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"
@@ -46,7 +47,8 @@ const ToastList = ({
   </ul>
 )
 
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: {
     children: "Blade Runner (1982) · 9 titles.",
     title: "Rip finished",

package/src/Toast/Toast.test.tsx

@@ -8,7 +8,7 @@ import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./Toast.stories.tsx"
 import { toastTransitions } from "./toastLifecycle.ts"
 
-const { AllStates, AllVariants, Default, Interactive } =
+const { AllStates, AllVariants, Playground, Interactive } =
   composeStories(stories)
 
 /**
@@ -180,7 +180,7 @@ test("a dismiss during the enter frame is not undone by it", async () => {
 })
 
 test("a pinned toast stays put", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const dismiss = expectAgentDrivable(canvas, {
     name: "Dismiss Rip finished",

package/src/Toolbar/Toolbar.mdx

@@ -9,7 +9,7 @@ import * as ToolbarStories from "./Toolbar.stories";
 A row of controls that collapses into an overflow when it runs out of room — measured, not
 breakpointed, with **exactly one instance** of every control in the document.
 
-<Canvas of={ToolbarStories.Default} />
+<Canvas of={ToolbarStories.Playground} />
 
 ## Props
 

package/src/Toolbar/Toolbar.stories.tsx

@@ -1,5 +1,6 @@
 import { useMediaQuery } from "@charcuterie/logic"
 import { matchMediaMatcher } from "@charcuterie/logic/browser"
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 import type { ReactNode } from "react"
 import { useState } from "react"
@@ -150,7 +151,8 @@ type Story = StoryObj<typeof meta>
  * collapse is not progressive: almost everything lives in the
  * popover permanently.
  */
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   render: (toolbarProps) => (
     <Frame inlineSize="34rem">
       <Toolbar {...toolbarProps} />

package/src/Toolbar/Toolbar.test.tsx

@@ -15,13 +15,13 @@ import * as stories from "./Toolbar.stories.tsx"
 const {
   AllStates,
   AllVariants,
-  Default,
+  Playground,
   InAppShell,
   Interactive,
 } = composeStories(stories)
 
 test("the toolbar is named, and its actions are buttons", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const toolbar = expectAgentDrivable(canvas, {
     name: "Deck actions",
@@ -43,7 +43,7 @@ test("the toolbar is named, and its actions are buttons", async () => {
  * popover permanently.
  */
 test("a bar with room shows no overflow trigger", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const toolbar = expectAgentDrivable(canvas, {
     name: "Deck actions",
@@ -73,7 +73,7 @@ test("a bar with room shows no overflow trigger", async () => {
  * the app's own component and most of them forward no `tabIndex`.
  */
 test("the toolbar is one tab stop", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const toolbar = expectAgentDrivable(canvas, {
     name: "Deck actions",
@@ -98,7 +98,7 @@ test("the toolbar is one tab stop", async () => {
 })
 
 test("the arrow keys move along the row", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const start = expectAgentDrivable(canvas, {
     name: "Start rip",

package/src/Tooltip/Tooltip.mdx

@@ -9,7 +9,7 @@ import * as TooltipStories from "./Tooltip.stories";
 Replaces mux-magic's `FieldTooltip` — 130 lines of hand-rolled positioning, including a
 `computePosition` that reimplements `flip` and `shift` against `window.innerHeight`.
 
-<Canvas of={TooltipStories.Default} />
+<Canvas of={TooltipStories.Playground} />
 
 ## Props
 

package/src/Tooltip/Tooltip.stories.tsx

@@ -1,3 +1,4 @@
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 
 import { placementArgType } from "../argTypes.storyHelpers.ts"
@@ -26,7 +27,8 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: {
     children: <Button appearance="outline">Retry</Button>,
     label: "Re-reads the disc from title 1.",

package/src/Tooltip/Tooltip.test.tsx

@@ -7,12 +7,12 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./Tooltip.stories.tsx"
 
-const { AllVariants, Default, Interactive } =
+const { AllVariants, Playground, Interactive } =
   composeStories(stories)
 
 test("nothing is shown until something asks", async () => {
   const { body, canvas, canvasElement } =
-    await mountStory(Default)
+    await mountStory(Playground)
 
   expectAgentDrivable(canvas, {
     name: "Retry",

package/src/VirtualizedGrid/VirtualizedGrid.mdx

@@ -10,7 +10,7 @@ import * as VirtualizedGridStories from "./VirtualizedGrid.stories";
 two-box structure, same content cap. The one difference is that a list of 2,000 costs
 about as much as a list of 40.
 
-<Canvas of={VirtualizedGridStories.Default} />
+<Canvas of={VirtualizedGridStories.Playground} />
 
 ## Props
 

package/src/VirtualizedGrid/VirtualizedGrid.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"
 
@@ -107,7 +108,9 @@ type Story = StoryObj<typeof meta>
  * Inspect the DOM and count: the row elements are the ones on
  * screen plus `overscanRows` above and below.
  */
-export const Default: Story = {}
+export const Playground: Story = {
+  parameters: playgroundParameters,
+}
 
 /**
  * The app-shell contract: `Main` is the one vertical scroll region,

package/src/VirtualizedGrid/VirtualizedGrid.test.tsx

@@ -38,7 +38,7 @@ import * as stories from "./VirtualizedGrid.stories.tsx"
 
 const {
   AllStates,
-  Default,
+  Playground,
   InHiddenTabPanel,
   InShellScrollRegion,
 } = composeStories(stories)
@@ -84,7 +84,7 @@ const getRowIndexes = (canvasElement: HTMLElement) => [
 ]
 
 test("2,000 items mount as a few dozen cells", async () => {
-  const { canvasElement } = await mountStory(Default)
+  const { canvasElement } = await mountStory(Playground)
 
   await waitFor(async () => {
     await expect(
@@ -102,7 +102,7 @@ test("2,000 items mount as a few dozen cells", async () => {
 })
 
 test("the page is still as tall as the whole list", async () => {
-  const { canvasElement } = await mountStory(Default)
+  const { canvasElement } = await mountStory(Playground)
 
   await waitFor(async () => {
     await expect(
@@ -123,7 +123,7 @@ test("the page is still as tall as the whole list", async () => {
 })
 
 test("scrolling changes which rows exist", async () => {
-  const { canvasElement } = await mountStory(Default)
+  const { canvasElement } = await mountStory(Playground)
 
   await waitFor(async () => {
     await expect(
@@ -325,7 +325,7 @@ test("a grid inside a hidden panel mounts nothing and reveals without scrolling"
 })
 
 test("a screen reader is told the real length", async () => {
-  const { canvasElement } = await mountStory(Default)
+  const { canvasElement } = await mountStory(Playground)
 
   await waitFor(async () => {
     await expect(

package/src/VisuallyHidden/VisuallyHidden.mdx

@@ -11,7 +11,7 @@ other component in M3 leans on: it is how a `Spinner` says "Loading…" without
 how a `ProgressBar`'s label stays discoverable when the design does not show it, and how an
 `IconButton`'s glyph gets a name.
 
-<Canvas of={VisuallyHiddenStories.Default} />
+<Canvas of={VisuallyHiddenStories.Playground} />
 
 ## Props
 

package/src/VisuallyHidden/VisuallyHidden.stories.tsx

@@ -1,3 +1,4 @@
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 
 import {
@@ -28,7 +29,8 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: { children: "Announced, never printed." },
   render: (visuallyHiddenProps) => (
     <StoryGrid columns={2}>

package/src/markdownEditorCodeMirror/MarkdownEditorCodeMirror.mdx

@@ -16,7 +16,7 @@ It is **opt-in**, from a subpath:
 import { MarkdownEditorCodeMirror } from "@charcuterie/ui/markdown-editor-codemirror"
 ```
 
-<Canvas of={MarkdownEditorCodeMirrorStories.Default} />
+<Canvas of={MarkdownEditorCodeMirrorStories.Playground} />
 
 ## Props
 

package/src/markdownEditorCodeMirror/MarkdownEditorCodeMirror.stories.tsx

@@ -1,3 +1,4 @@
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 
 import {
@@ -91,7 +92,8 @@ type Story = StoryObj<typeof meta>
  * genuinely larger, `**` is nowhere on screen, the checkboxes are
  * checkboxes, and the bare URL is a link.
  */
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: {
     defaultValue: SAMPLE,
     label: "Description",

package/src/markdownEditorCodeMirror/MarkdownEditorCodeMirror.test.tsx

@@ -5,7 +5,7 @@ import { test } from "vitest"
 import { mountStory } from "../mountStory.testHelpers.ts"
 import * as stories from "./MarkdownEditorCodeMirror.stories.tsx"
 
-const { AllStates, CaretReveal, Default, Uploading } =
+const { AllStates, CaretReveal, Playground, Uploading } =
   composeStories(stories)
 
 type Canvas = Awaited<
@@ -169,7 +169,7 @@ test("a click low in an empty field lands in the document", async () => {
  * anywhere in this stack would have quietly taken away.
  */
 test("a document taller than the frame grows it", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const content = canvas.getByRole("textbox", {
     name: "Description",
@@ -235,7 +235,7 @@ test("the toolbar offers Image when uploads are wired", async () => {
 /** A button that opens a file picker and then has nowhere to send
  * the file is worse than no button. */
 test("the toolbar hides Image when nothing can take the file", async () => {
-  const { body, canvas } = await mountStory(Default)
+  const { body, canvas } = await mountStory(Playground)
 
   const overflow = canvas.queryByRole("button", {
     name: "More actions",

package/src/markdownEditorCodeMirror/MarkdownView.mdx

@@ -15,7 +15,7 @@ It is **opt-in**, from the same subpath as the editor:
 import { MarkdownView } from "@charcuterie/ui/markdown-editor-codemirror"
 ```
 
-<Canvas of={MarkdownViewStories.Default} />
+<Canvas of={MarkdownViewStories.Playground} />
 
 ## Props
 

package/src/markdownEditorCodeMirror/MarkdownView.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"
 
@@ -183,7 +184,9 @@ type Story = StoryObj<typeof meta>
  * `getAllByRole("toolbar")` returns nothing, because nothing in this
  * component can render one.
  */
-export const Default: Story = {}
+export const Playground: Story = {
+  parameters: playgroundParameters,
+}
 
 /**
  * The same string, in both surfaces, side by side.