@charcuterie/ui 4.5.0 → 4.6.0

package/src/Field/Field.stories.tsx

@@ -1,3 +1,4 @@
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 
 import {
@@ -26,7 +27,8 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: {
     children: (
       <input className={TEXT_INPUT_CLASS} type="text" />

package/src/Field/Field.test.tsx

@@ -12,7 +12,7 @@ const {
   AdoptsOverlayTriggerId,
   AllStates,
   AllVariants,
-  Default,
+  Playground,
   ForwardsRestProps,
   Group,
   Nested,
@@ -79,7 +79,7 @@ test("an overlay trigger keeps the id the label points at", async () => {
 
 test("the label names the control it points at", async () => {
   const { canvas, canvasElement } =
-    await mountStory(Default)
+    await mountStory(Playground)
 
   // The whole point of the component in one query: the control is
   // findable by the *label's* text, which is only true if `htmlFor`
@@ -112,7 +112,7 @@ test("the label names the control it points at", async () => {
  * the other component's suite.
  */
 test("the label carries a derivable id for non-labelable controls", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const control = expectAgentDrivable(canvas, {
     name: "Output directory",
@@ -133,7 +133,7 @@ test("the label carries a derivable id for non-labelable controls", async () =>
 })
 
 test("a description is announced with the control", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const control = expectAgentDrivable(canvas, {
     name: "Output directory",

package/src/FileDropZone/FileDropZone.mdx

@@ -9,7 +9,7 @@ import * as FileDropZoneStories from "./FileDropZone.stories";
 The one drag target in the fleet is gallery-downloader's, and it **gets the hard part
 right** — credit where it is due, and the fix is reproduced here.
 
-<Canvas of={FileDropZoneStories.Default} />
+<Canvas of={FileDropZoneStories.Playground} />
 
 ## Props
 

package/src/FileDropZone/FileDropZone.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"
 
@@ -25,7 +26,8 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: {
     description: "ISO or MKV, up to 50 GB.",
     label: "Drop a disc image here",

package/src/FileDropZone/FileDropZone.test.tsx

@@ -6,7 +6,7 @@ import { expectNoAxeViolations } from "../expectNoAxeViolations.testHelpers.ts"
 import { mountStory } from "../mountStory.testHelpers.ts"
 import * as stories from "./FileDropZone.stories.tsx"
 
-const { AllStates, AllVariants, Default, Interactive } =
+const { AllStates, AllVariants, Playground, Interactive } =
   composeStories(stories)
 
 /**
@@ -45,7 +45,7 @@ const { AllStates, AllVariants, Default, Interactive } =
  */
 test("the zone is a real file input, reachable and named", async () => {
   const { canvas, canvasElement } =
-    await mountStory(Default)
+    await mountStory(Playground)
 
   const input = canvas.getByLabelText(
     "Drop a disc image here",
@@ -198,7 +198,7 @@ test("a dropped link reports as text", async () => {
  * the correct fix and is reproduced here.
  */
 test("the highlight survives crossing a child element", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const zone = canvas
     .getByLabelText("Drop a disc image here")

package/src/Header/Header.mdx

@@ -9,7 +9,7 @@ import * as HeaderStories from "./Header.stories";
 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} />
+<Canvas of={HeaderStories.Playground} />
 
 ## Props
 

package/src/Header/Header.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"
@@ -41,7 +42,8 @@ type Story = StoryObj<typeof meta>
  * and a fill that is `surface-raised` rather than the page's own
  * colour.
  */
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: { heading: "Rip Deck" },
   render: (headerProps) => (
     <Shell>

package/src/IconButton/IconButton.mdx

@@ -15,7 +15,7 @@ A screen reader announces the last of those as "↶", and
 the fleet is not agent-drivable today, and the reason this component exists as something
 other than `<Button sizing="icon">`.
 
-<Canvas of={IconButtonStories.Default} />
+<Canvas of={IconButtonStories.Playground} />
 
 ## Props
 

package/src/IconButton/IconButton.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"
@@ -48,7 +49,8 @@ type Story = StoryObj<typeof meta>
  * bare `<button>` today, so a screen reader announces "↶" and
  * `getByRole("button", { name: "Undo" })` finds nothing.
  */
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: { children: UNDO_ICON, label: "Undo" },
 }
 

package/src/IconButton/IconButton.test.tsx

@@ -10,7 +10,7 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import meta, * as stories from "./IconButton.stories.tsx"
 
-const { Default, RawGlyph } = composeStories(stories)
+const { Playground, RawGlyph } = composeStories(stories)
 
 /**
  * The assertion the fleet fails today: plex-channels renders `↶`
@@ -18,7 +18,7 @@ const { Default, RawGlyph } = composeStories(stories)
  * query finds nothing.
  */
 test("a glyph gets a name", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   expectAgentDrivable(canvas, {
     name: "Undo",

package/src/Lightbox/Lightbox.mdx

@@ -16,7 +16,7 @@ So a `Lightbox` is a **skin over `Dialog`**, not a second dialog. `Dialog` (thro
 `object-contain` image clamped to the viewport, so a 2:3 poster and a 16:9 still both land
 whole.
 
-<Canvas of={LightboxStories.Default} />
+<Canvas of={LightboxStories.Playground} />
 
 ## Props
 

package/src/Lightbox/Lightbox.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"
 
@@ -51,7 +52,8 @@ type Story = StoryObj<typeof meta>
  * component owns its open state. This is what a rip card passes —
  * one `Lightbox` with the poster as its `thumbnail`.
  */
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: {
     thumbnail: <PosterThumb />,
   },

package/src/Lightbox/Lightbox.test.tsx

@@ -7,11 +7,11 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./Lightbox.stories.tsx"
 
-const { Controlled, Default, Interactive, WithCaption } =
+const { Controlled, Playground, Interactive, WithCaption } =
   composeStories(stories)
 
 test("the thumbnail opens the enlarged image", async () => {
-  const { body, canvas } = await mountStory(Default)
+  const { body, canvas } = await mountStory(Playground)
 
   await userEvent.click(
     expectAgentDrivable(canvas, {

package/src/Listbox/Listbox.mdx

@@ -12,7 +12,7 @@ type-ahead, Home/End, the mobile wheel picker, form submission, `:invalid` and a
 `Listbox` is for the cases `<option>` cannot render — a leading icon, two lines, a trailing
 badge ([decision](../../../docs/decisions/2026-08-03-listbox-and-combobox-are-siblings-of-select.md)).
 
-<Canvas of={ListboxStories.Default} />
+<Canvas of={ListboxStories.Playground} />
 
 ## Props
 

package/src/Listbox/Listbox.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"
@@ -142,7 +143,8 @@ const ListboxHarness = ({
   )
 }
 
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: {
     isVisible: false,
     onDismiss: () => {},

package/src/Listbox/Listbox.test.tsx

@@ -7,11 +7,11 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./Listbox.stories.tsx"
 
-const { AllStates, AllVariants, Default, Interactive } =
+const { AllStates, AllVariants, Playground, Interactive } =
   composeStories(stories)
 
 test("a button opens a listbox whose rows are options", async () => {
-  const { body, canvas } = await mountStory(Default)
+  const { body, canvas } = await mountStory(Playground)
 
   const trigger = expectAgentDrivable(canvas, {
     name: "Choose a language",
@@ -74,7 +74,7 @@ test("opening focuses the seeded selection, which reads selected", async () => {
 })
 
 test("the arrow keys move focus and skip the disabled option", async () => {
-  const { body, canvas } = await mountStory(Default)
+  const { body, canvas } = await mountStory(Playground)
 
   await userEvent.click(
     expectAgentDrivable(canvas, {
@@ -116,7 +116,7 @@ test("the arrow keys move focus and skip the disabled option", async () => {
 })
 
 test("type-ahead jumps to the first match", async () => {
-  const { body, canvas } = await mountStory(Default)
+  const { body, canvas } = await mountStory(Playground)
 
   await userEvent.click(
     expectAgentDrivable(canvas, {
@@ -163,7 +163,7 @@ test("Enter selects the focused option and closes", async () => {
 })
 
 test("Escape dismisses without choosing, and there is one tab stop", async () => {
-  const { body, canvas } = await mountStory(Default)
+  const { body, canvas } = await mountStory(Playground)
 
   await userEvent.click(
     expectAgentDrivable(canvas, {

package/src/LiveStatusIndicator/LiveStatusIndicator.mdx

@@ -9,7 +9,7 @@ import * as LiveStatusIndicatorStories from "./LiveStatusIndicator.stories";
 Four repos, four implementations, and **it is the thing users read most** — a wall-mounted
 panel showing stale data under a green dot is worse than one showing nothing.
 
-<Canvas of={LiveStatusIndicatorStories.Default} />
+<Canvas of={LiveStatusIndicatorStories.Playground} />
 
 ## Props
 

package/src/LiveStatusIndicator/LiveStatusIndicator.stories.tsx

@@ -2,6 +2,7 @@ import {
   connectionTransitions,
   useStatus,
 } from "@charcuterie/logic"
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 
 import { connectionStatusArgType } from "../argTypes.storyHelpers.ts"
@@ -40,7 +41,8 @@ type Story = StoryObj<typeof meta>
  * handle for a Playwright assertion, because it survives translation
  * where the visible wording does not.
  */
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: { status: "connected" },
 }
 

package/src/LiveStatusIndicator/LiveStatusIndicator.test.tsx

@@ -6,10 +6,10 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./LiveStatusIndicator.stories.tsx"
 
-const { Default, Interactive } = composeStories(stories)
+const { Playground, Interactive } = composeStories(stories)
 
 test("it is a named live region with a stable status handle", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const indicator = expectAgentDrivable(canvas, {
     name: "Connected",

package/src/LogViewer/LogViewer.mdx

@@ -11,7 +11,7 @@ rip-deck's `LogModal` — and between them they have four defects this component
 have. The fifth below is not theirs: it is defect 1 coming back through the front door, in
 this component, found by the first app to consume it.
 
-<Canvas of={LogViewerStories.Default} />
+<Canvas of={LogViewerStories.Playground} />
 
 ## Props
 

package/src/LogViewer/LogViewer.stories.tsx

@@ -1,3 +1,4 @@
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 
 import { Accordion } from "../Accordion/Accordion.tsx"
@@ -61,7 +62,8 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: { label: "Bay 3 rip log", lines: RIP_LINES },
 }
 

package/src/LogViewer/LogViewer.test.tsx

@@ -10,14 +10,14 @@ import * as stories from "./LogViewer.stories.tsx"
 const {
   AllStates,
   AllVariants,
-  Default,
+  Playground,
   InsideDisclosure,
   Interactive,
 } = composeStories(stories)
 
 test("the pane is named, and is a log", async () => {
   const { canvas, canvasElement } =
-    await mountStory(Default)
+    await mountStory(Playground)
 
   // Found by its name, not by a `data-log-id`. mux-magic's pane
   // carries one of those — a `data-testid` under a different name,

package/src/Main/Main.mdx

@@ -15,7 +15,7 @@ The owner's complaint, verbatim:
 > Rip-Deck where the app has a narrower main column but the wrapping grids are all
 > full-width in most of these apps only when you have too many items."
 
-<Canvas of={MainStories.Default} />
+<Canvas of={MainStories.Playground} />
 
 ## Props
 

package/src/Main/Main.stories.tsx

@@ -1,3 +1,4 @@
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 import { useEffect, useState } from "react"
 
@@ -55,7 +56,8 @@ type Story = StoryObj<typeof meta>
  * tell apart and the reason the fleet's poster grids look wrong
  * at intermediate widths.
  */
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   render: (mainProps) => (
     <Shell>
       <Header

package/src/Main/Main.test.tsx

@@ -14,7 +14,7 @@ import * as stories from "./Main.stories.tsx"
 import { forgetScrollOffsets } from "./scrollMemory.ts"
 
 const {
-  Default,
+  Playground,
   Interactive,
   Responsive,
   ScrollMemory,
@@ -34,7 +34,7 @@ afterEach(() => {
 test("the content column is capped at the token, not at the window", async () => {
   await setViewport(DESKTOP)
 
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const column = canvas.getByRole("main")
     .firstElementChild as HTMLElement
@@ -63,7 +63,7 @@ test("the content column is capped at the token, not at the window", async () =>
 test("main is the query container its content responds to", async () => {
   await setViewport(DESKTOP)
 
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const column = canvas.getByRole("main")
     .firstElementChild as HTMLElement

package/src/MarkdownEditor/MarkdownEditor.mdx

@@ -13,7 +13,7 @@ replaces destroyed data by storing HTML in a field it later read back as text. S
 constraint is not "prefer markdown" — it is that an HTML tag must not be *able* to reach the
 stored string.
 
-<Canvas of={MarkdownEditorStories.Default} />
+<Canvas of={MarkdownEditorStories.Playground} />
 
 > **Reading rather than editing?** `isReadOnly` here leaves the toolbar on screen, because it
 > means "an editor you cannot type in". A surface with no toolbar in the DOM is

package/src/MarkdownEditor/MarkdownEditor.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"
 
@@ -61,7 +62,8 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: {
     defaultValue: SAMPLE,
     label: "Description",

package/src/MarkdownEditor/MarkdownEditor.test.tsx

@@ -11,7 +11,7 @@ const {
   AllStates,
   AllVariants,
   Blank,
-  Default,
+  Playground,
   Interactive,
   NoUpload,
   Responsive,
@@ -59,7 +59,7 @@ const resyncHarness = (editor: HTMLTextAreaElement) => {
  */
 test("the surface is a real textbox an agent can find", async () => {
   const { canvas, canvasElement } =
-    await mountStory(Default)
+    await mountStory(Playground)
 
   expectAgentDrivable(canvas, {
     name: "Description",
@@ -77,7 +77,7 @@ test("the surface is a real textbox an agent can find", async () => {
 
 test("the toolbar is one tab stop with arrow keys inside it", async () => {
   const { canvas, canvasElement } =
-    await mountStory(Default)
+    await mountStory(Playground)
 
   expectAgentDrivable(canvas, {
     name: "Markdown formatting",
@@ -133,7 +133,7 @@ test("markdown goes in and the same markdown comes out", async () => {
  * drifts away from the glyphs it is supposed to be sitting between.
  */
 test("the painted layer holds exactly the textarea's text", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const editor = getEditor(canvas, "Description")
 

package/src/MarkdownLine/MarkdownLine.mdx

@@ -10,7 +10,7 @@ import * as MarkdownLineStories from "./MarkdownLine.stories";
 wherever a stored string is a *name* rather than a document — a card title, a lane heading,
 a table cell, a breadcrumb.
 
-<Canvas of={MarkdownLineStories.Default} />
+<Canvas of={MarkdownLineStories.Playground} />
 
 ## Props
 

package/src/MarkdownLine/MarkdownLine.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"
 
@@ -52,7 +53,9 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {}
+export const Playground: Story = {
+  parameters: playgroundParameters,
+}
 
 /**
  * The four marks, each in the shape a title actually uses it for.

package/src/MarkdownLine/MarkdownLine.test.tsx

@@ -22,7 +22,7 @@ import * as stories from "./MarkdownLine.stories.tsx"
 const {
   AllMarks,
   AsALink,
-  Default,
+  Playground,
   FileNames,
   InsideACardLink,
   RefusedUrl,
@@ -31,7 +31,7 @@ const {
 } = composeStories(stories)
 
 test("a code span is a `code` element, and the backticks are gone", async () => {
-  const { canvasElement } = await mountStory(Default)
+  const { canvasElement } = await mountStory(Playground)
 
   await expect(
     [...canvasElement.querySelectorAll("code")].map(
@@ -80,7 +80,7 @@ test("an underscore inside a word marks nothing", async () => {
 })
 
 test("a line with no href has nothing to click", async () => {
-  const { canvasElement } = await mountStory(Default)
+  const { canvasElement } = await mountStory(Playground)
 
   await expect(canvasElement.querySelector("a")).toBe(null)
 })

package/src/MediaTile/MediaTile.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"
@@ -35,7 +36,8 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: {
     alt: "Blade Runner (1982) poster",
     src: toPosterSrc("Blade Runner"),

package/src/MediaTile/MediaTile.test.tsx

@@ -6,11 +6,11 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./MediaTile.stories.tsx"
 
-const { Default, Interactive, InteractiveButton } =
+const { Playground, Interactive, InteractiveButton } =
   composeStories(stories)
 
 test("an unlinked tile's poster carries the name", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   expectAgentDrivable(canvas, {
     name: "Blade Runner (1982) poster",

package/src/Menu/Menu.mdx

@@ -10,7 +10,7 @@ A menu is **not** a listbox, and mux-magic's `TypePicker` is the fleet's one att
 telling them apart — it renders `role="menu"` over items that set a value, which is a
 listbox wearing the wrong role.
 
-<Canvas of={MenuStories.Default} />
+<Canvas of={MenuStories.Playground} />
 
 ## Props
 

package/src/Menu/Menu.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"
@@ -166,7 +167,8 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: {
     isVisible: false,
     onDismiss: noop,

package/src/Modal/Modal.mdx

@@ -12,7 +12,7 @@ anything else that wants a scrim over the page. `Modal` is that foundation, and
 [`Dialog`](?path=/docs/components-dialog--docs) is `Modal` plus the
 heading/Close/footer/size chrome the component shipped with before the M8 rebuild.
 
-<Canvas of={ModalStories.Default} />
+<Canvas of={ModalStories.Playground} />
 
 ## Props
 

package/src/Modal/Modal.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"
 
@@ -73,7 +74,8 @@ const ModalDemo = ({
   )
 }
 
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: {
     "aria-label": "Read error on title 4",
     children: null,

package/src/Modal/Modal.test.tsx

@@ -7,12 +7,12 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./Modal.stories.tsx"
 
-const { Alert, Default, Interactive } =
+const { Alert, Playground, Interactive } =
   composeStories(stories)
 
 test("the base modal portals to the body, named by its aria-label", async () => {
   const { body, canvas, canvasElement } =
-    await mountStory(Default)
+    await mountStory(Playground)
 
   await userEvent.click(
     expectAgentDrivable(canvas, {
@@ -50,7 +50,7 @@ test("an alertdialog role is carried through", async () => {
 })
 
 test("Escape and an outside press both close through onClose", async () => {
-  const { body, canvas } = await mountStory(Default)
+  const { body, canvas } = await mountStory(Playground)
 
   const trigger = expectAgentDrivable(canvas, {
     name: "Open the base modal",