@charcuterie/ui 4.5.0 → 4.5.1

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",

package/src/Nav/Nav.mdx

@@ -14,7 +14,7 @@ of a phone, or a panel behind one control — the same list, drawn where it fits
 > layout and behaves identically, down to the measured whole-row fold — see *`bar` folds
 > whole* below.
 
-<Canvas of={NavStories.Default} />
+<Canvas of={NavStories.Playground} />
 
 ## Props
 

package/src/Nav/Nav.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"
@@ -153,7 +154,8 @@ type Story = StoryObj<typeof Nav>
  * A header row, which is what an app with a handful of destinations
  * wants: ai-usage, folio, mux-magic, portly-controllers.
  */
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: {
     activeHref: "/library",
     items: STATION_ITEMS,

package/src/Nav/Nav.test.tsx

@@ -12,11 +12,11 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./Nav.stories.tsx"
 
-const { AllStates, AllVariants, Default, Interactive } =
+const { AllStates, AllVariants, Playground, Interactive } =
   composeStories(stories)
 
 test("the destinations are a named navigation landmark", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const nav = expectAgentDrivable(canvas, {
     name: "Main",
@@ -33,7 +33,7 @@ test("the destinations are a named navigation landmark", async () => {
  * a new tab", the status bar, and "copy link address".
  */
 test("every destination is a real link with an href", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const links = canvas.getAllByRole("link")
 
@@ -45,7 +45,7 @@ test("every destination is a real link with an href", async () => {
 })
 
 test("the current destination is announced, not only coloured", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const current = canvas.getByRole("link", {
     name: "Library",
@@ -240,7 +240,7 @@ test("a long label truncates rather than widening the column", async () => {
  * button permanently.
  */
 test("a bar with room shows no menu trigger", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const nav = canvas.getByRole("navigation", {
     name: "Main",
@@ -330,7 +330,7 @@ test("a folded destination is still a real link", async () => {
  * tell which one a human can see.
  */
 test("a destination is mounted exactly once", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   expect(
     canvas.getAllByRole("link", { name: "Tonight" }),

package/src/NavBar/NavBar.mdx

@@ -35,7 +35,7 @@ import * as NavBarStories from "./NavBar.stories";
 The app's destinations as real links, in one line — folding into a single menu button,
 **whole**, when that line does not fit.
 
-<Canvas of={NavBarStories.Default} />
+<Canvas of={NavBarStories.Playground} />
 
 ## Props
 

package/src/NavBar/NavBar.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"
 
@@ -131,7 +132,8 @@ type Story = StoryObj<typeof meta>
  * a trigger that shows at every width is not a fold, it is a nav
  * you have permanently hidden.
  */
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   render: (navBarProps) => (
     <Frame inlineSize="52rem">
       <NavBar {...navBarProps} />

package/src/NavBar/NavBar.test.tsx

@@ -15,13 +15,13 @@ import * as stories from "./NavBar.stories.tsx"
 const {
   AllStates,
   AllVariants,
-  Default,
+  Playground,
   InAppShell,
   Interactive,
 } = composeStories(stories)
 
 test("the nav is named, and its destinations are links", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const nav = expectAgentDrivable(canvas, {
     name: "Main",
@@ -48,7 +48,7 @@ test("the nav is named, and its destinations are links", async () => {
  * button permanently.
  */
 test("a bar with room shows no menu trigger", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const nav = expectAgentDrivable(canvas, {
     name: "Main",

package/src/Picker/Picker.mdx

@@ -9,7 +9,7 @@ import * as PickerStories from "./Picker.stories.tsx"
 A `Listbox` with its trigger already attached — the shape an app reaches for when it wants
 "a select, but ours".
 
-<Canvas of={PickerStories.Default} />
+<Canvas of={PickerStories.Playground} />
 
 ## Why this exists when `Listbox` already does
 

package/src/Picker/Picker.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"
@@ -106,7 +107,8 @@ const PickerHarness = ({
  * The assembled default: a button showing the current value, a
  * chevron, and the `Listbox` panel already wired to it.
  */
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   render: () => (
     <PickerHarness
       initialValue="eng"

package/src/Picker/Picker.test.tsx

@@ -7,12 +7,12 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./Picker.stories.tsx"
 
-const { AllStates, Default, Interactive, NextToText } =
+const { AllStates, Playground, Interactive, NextToText } =
   composeStories(stories)
 
 test("the trigger's accessible name carries the current value", async () => {
   const { canvas, canvasElement } =
-    await mountStory(Default)
+    await mountStory(Playground)
 
   // Not a bare "Language": the button's VISIBLE text is the value, and
   // WCAG 2.5.3 wants the visible text inside the accessible name.

package/src/Popover/Popover.mdx

@@ -11,7 +11,7 @@ for one reason: **Radix owns `open`.** Wrapping it leaves `useVisibility` and Ra
 believing they hold the state, which is the conflict the whole state layer exists to
 avoid.
 
-<Canvas of={PopoverStories.Default} />
+<Canvas of={PopoverStories.Playground} />
 
 ## Props
 

package/src/Popover/Popover.stories.tsx

@@ -1,4 +1,5 @@
 import { useVisibility } from "@charcuterie/logic"
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Placement } from "@floating-ui/react"
 import type { Meta, StoryObj } from "@storybook/react"
 import type { ReactNode } from "react"
@@ -73,7 +74,8 @@ const PopoverDemo = ({
   )
 }
 
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: {
     children: null,
     heading: "Filters",

package/src/Popover/Popover.test.tsx

@@ -10,14 +10,14 @@ import * as stories from "./Popover.stories.tsx"
 const {
   AllStates,
   AllVariants,
-  Default,
+  Playground,
   EscapesOverflowClip,
   Interactive,
   Responsive,
 } = composeStories(stories)
 
 test("the trigger and the panel agree about each other", async () => {
-  const { body, canvas } = await mountStory(Default)
+  const { body, canvas } = await mountStory(Playground)
 
   const trigger = expectAgentDrivable(canvas, {
     name: "Filters",

package/src/PortraitTiles/PortraitTiles.mdx

@@ -13,7 +13,7 @@ points-market's "Who's shopping?" is the shape this is taken from. It had been h
 there since the app was built, and it is the third tile shape the fleet grew on its own,
 after mux-magic's and Gallery Downloader's "Pick a tool" cards.
 
-<Canvas of={PortraitTilesStories.Default} />
+<Canvas of={PortraitTilesStories.Playground} />
 
 ## Props
 

package/src/PortraitTiles/PortraitTiles.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"
@@ -154,7 +155,8 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: {
     items: SHOPPER_ITEMS,
     label: "Who's shopping?",

package/src/PortraitTiles/PortraitTiles.test.tsx

@@ -11,7 +11,7 @@ const {
   AllStates,
   AllVariants,
   DataColours,
-  Default,
+  Playground,
   Interactive,
   NamedHues,
   Responsive,
@@ -20,7 +20,7 @@ const {
 
 test("it is a named group of pressable portraits", async () => {
   const { canvas, canvasElement } =
-    await mountStory(Default)
+    await mountStory(Playground)
 
   const group = expectAgentDrivable(canvas, {
     name: "Who's shopping?",
@@ -50,7 +50,7 @@ test("it is a named group of pressable portraits", async () => {
  * thing the portrait was being chosen by.
  */
 test("the name, the number and its unit are one accessible name", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   expectAgentDrivable(canvas, {
     name: "Avery 1,240 points",
@@ -194,7 +194,7 @@ test("a fixed layout skips the query", async () => {
  * how a token name that did not exist shipped in Docket.
  */
 test("each portrait wears a different hue, and a named one holds it", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const faces = Array.from(
     expectAgentDrivable(canvas, {
@@ -380,7 +380,7 @@ test("an href portrait is a real anchor", async () => {
  * promise that survives exactly one edit.
  */
 test("a portrait is the same box as an action tile", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const portrait = expectAgentDrivable(canvas, {
     name: "Avery 1,240 points",

package/src/ProgressBar/ProgressBar.mdx

@@ -13,7 +13,7 @@ are a `<div>` with a percentage width: invisible to assistive technology and to
 This is the union — rip-deck's ARIA and its indeterminate sweep, plus threshold colours
 nobody has yet.
 
-<Canvas of={ProgressBarStories.Default} />
+<Canvas of={ProgressBarStories.Playground} />
 
 ## Props
 

package/src/ProgressBar/ProgressBar.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"
 
@@ -43,7 +44,8 @@ type Story = StoryObj<typeof meta>
  * is not printed, and the value sits on the *track* — so an agent's
  * bounding box is the widget, not the filled 38%.
  */
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: { label: "Ripping title 4 of 9", value: 38 },
 }
 

package/src/ProgressBar/ProgressBar.test.tsx

@@ -6,11 +6,11 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./ProgressBar.stories.tsx"
 
-const { Default, Indeterminate, Interactive } =
+const { Playground, Indeterminate, Interactive } =
   composeStories(stories)
 
 test("the name is real and the value sits on the track", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const bar = expectAgentDrivable(canvas, {
     name: "Ripping title 4 of 9",

package/src/QueryBuilder/QueryBuilder.mdx

@@ -14,7 +14,7 @@ mail rules (leaf = field/operator/value, combinators AND/OR) and mux-magic's job
 combinator** are fully opaque here — `Combinator` and `Leaf` only ever pass through to the
 consumer's `renderLeaf` and `combinatorOptions`.
 
-<Canvas of={QueryBuilderStories.Default} />
+<Canvas of={QueryBuilderStories.Playground} />
 
 ## Props
 

package/src/QueryBuilder/QueryBuilder.stories.tsx

@@ -1,5 +1,6 @@
 import type { SerializedTree } from "@charcuterie/logic"
 import { createTree, useTree } from "@charcuterie/logic"
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 import type { ReactNode } from "react"
 import { useState } from "react"
@@ -194,7 +195,8 @@ type Story = StoryObj<typeof meta>
  * A flat group of two conditions joined by ALL. Change the combinator,
  * edit a condition, or add another with "+ Add condition".
  */
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   render: () => (
     <QueryBuilderHarness initialTree={FLAT_TREE} />
   ),

package/src/QueryBuilder/QueryBuilder.test.tsx

@@ -10,13 +10,13 @@ import * as stories from "./QueryBuilder.stories.tsx"
 const {
   AllStates,
   CustomCombinator,
-  Default,
+  Playground,
   Interactive,
 } = composeStories(stories)
 
 test("the root group exposes its combinator as a named 'Match' control", async () => {
   const { canvas, canvasElement } =
-    await mountStory(Default)
+    await mountStory(Playground)
 
   // One root group, so exactly one combinator picker. It is a
   // `Listbox` trigger, so the control is a button that opens a

package/src/RadioGroup/RadioGroup.mdx

@@ -16,7 +16,7 @@ each option carries a real sentence and an in-line strip would wrap. Choosing be
 is layout, not behaviour, which is why the keyboard model is identical and lives in the same
 two hooks.
 
-<Canvas of={RadioGroupStories.Default} />
+<Canvas of={RadioGroupStories.Playground} />
 
 ## Props
 

package/src/RadioGroup/RadioGroup.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"
@@ -98,7 +99,8 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: { items: NAMING_ITEMS, label: "Naming scheme" },
 }
 

package/src/RadioGroup/RadioGroup.test.tsx

@@ -9,7 +9,7 @@ import * as stories from "./RadioGroup.stories.tsx"
 
 const {
   AllStates,
-  Default,
+  Playground,
   Interactive,
   Responsive,
   Tiles,
@@ -30,7 +30,7 @@ const getOptions = (group: HTMLElement) =>
 
 test("it is a radio group with exactly one option checked", async () => {
   const { canvas, canvasElement } =
-    await mountStory(Default)
+    await mountStory(Playground)
 
   const group = expectAgentDrivable(canvas, {
     name: "Naming scheme",

package/src/Rail/Rail.mdx

@@ -9,7 +9,7 @@ import * as RailStories from "./Rail.stories";
 A side column — the app's sections, a filter panel, the selected job's detail. `side` places
 it, `landmark` decides what it is, and `label` is required.
 
-<Canvas of={RailStories.Default} />
+<Canvas of={RailStories.Playground} />
 
 ## Props