@charcuterie/ui 4.5.0 → 4.5.1

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

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