@charcuterie/ui 4.5.0 → 4.6.0

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/Overlay/OverlayPanel.tsx

@@ -117,13 +117,55 @@ export const OverlayPanel = ({
       // `outsidePress` on a *lower* modal would close it too, so it is
       // scoped to the top — which is also why the scrim needs no click
       // handler of its own.
-      outsidePress: isDismissable && isTop,
+      outsidePress: (event) => {
+        if (!isDismissable || !isTop) return false
+        /*
+         * ⚠️ A press on a toast is NOT an outside press.
+         *
+         * A `ToastRegion` renders in the page, so floating-ui sees a
+         * press on its Undo as a press outside the floating element
+         * — and closing the modal on the way to taking an action
+         * back is the opposite of what the button says. The region
+         * marks itself with `data-charcuterie-toast-region`; nothing
+         * else in the fleet carries that attribute.
+         *
+         * ⚠️ Do not delete this on the evidence of a small story.
+         * floating-ui has a *second*, accidental guard that hides
+         * this one: `closeOnPressOutside` bails out early when the
+         * press target's body-level ancestor contains none of the
+         * `[data-floating-ui-inert]` markers `markOthers` left
+         * behind, on the theory that such an element was injected
+         * after the panel opened. A page that is nothing but a
+         * region takes that branch and never reaches this predicate
+         * at all. A page with content beside the region — every real
+         * app — does reach it. `Toast.stories.tsx`'s
+         * `OverStackedModals` carries a heading and a paragraph for
+         * exactly that reason, and `ToastRegion.test.tsx` fails
+         * without this predicate only because they are there.
+         */
+        const target = event.target as Element | null
+        return (
+          target?.closest?.(
+            "[data-charcuterie-toast-region]",
+          ) == null
+        )
+      },
     }),
     useRole(context, { role }),
   ])
 
   const { register, unregister } = stack
 
+  /**
+   * Where this panel sits in the stack, and therefore how far above
+   * `--layer-modal` it paints. `0` when unprovided — a lone `Modal`
+   * is the only thing open.
+   */
+  const stackIndex = Math.max(
+    stack.orderedIds.indexOf(id),
+    0,
+  )
+
   useEffect(() => {
     if (!isVisible) {
       return
@@ -169,7 +211,26 @@ export const OverlayPanel = ({
       )}
 
       <FloatingPortal>
-        <div className="fixed inset-0 z-[var(--layer-modal)] flex items-center justify-center">
+        <div
+          className="fixed inset-0 flex items-center justify-center"
+          /*
+           * ⚠️ Cascading, not one shared layer.
+           *
+           * Every panel used to render at the one `--layer-modal`, and
+           * which of two open modals painted on top fell out of the
+           * order their portals happened to be appended in. A modal
+           * opened from inside another is the case that made this
+           * visible. The index in the stack is the answer the stack
+           * already knows.
+           *
+           * The scale's gaps are 100, so a cascade this deep is
+           * arithmetic nobody has to think about — and the toast sits
+           * at `--layer-toast` plus the same depth, above all of it.
+           */
+          style={{
+            zIndex: `calc(var(--layer-modal) + ${stackIndex})`,
+          }}
+        >
           <FloatingFocusManager
             context={context}
             // `undefined` keeps the manager's own default (the first

package/src/Overlay/OverlayStack.tsx

@@ -40,6 +40,11 @@ export type OverlayStackEntry = {
 
 export type OverlayStackValue = {
   depth: number
+  /**
+   * The open ids, oldest first. A panel reads its own index out of
+   * this to cascade its z-index above the one below it.
+   */
+  orderedIds: string[]
   /**
    * `false` in the context default. An `OverlayPanel` reads this to
    * decide whether to render its own scrim (unprovided) or defer to
@@ -56,6 +61,7 @@ export type OverlayStackValue = {
 const DEFAULT_STACK: OverlayStackValue = {
   depth: 0,
   isProvided: false,
+  orderedIds: [],
   register: () => {},
   requestCloseTop: () => {},
   topId: null,
@@ -76,7 +82,6 @@ export const OverlayStackProvider = ({
   const [entries, setEntries] = useState<
     OverlayStackEntry[]
   >([])
-
   // Read through a ref so `requestCloseTop` stays stable while still
   // seeing the live top.
   const entriesRef = useLatestRef(entries)
@@ -112,6 +117,7 @@ export const OverlayStackProvider = ({
     () => ({
       depth: entries.length,
       isProvided: true,
+      orderedIds: entries.map((one) => one.id),
       register,
       requestCloseTop,
       topId: entries.at(-1)?.id ?? null,

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
 

package/src/Rail/Rail.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"
@@ -40,7 +41,8 @@ type Story = StoryObj<typeof meta>
  * name: "Sections" })` is what distinguishes its "Settings" link
  * from the header's "Settings" button.
  */
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: {
     label: "Sections",
     landmark: "navigation",

package/src/Rail/Rail.test.tsx

@@ -12,7 +12,7 @@ import {
 } from "../viewport.testHelpers.ts"
 import * as stories from "./Rail.stories.tsx"
 
-const { AllVariants, Default, Interactive, Responsive } =
+const { AllVariants, Playground, Interactive, Responsive } =
   composeStories(stories)
 
 afterAll(async () => {
@@ -144,7 +144,7 @@ test("the rail scopes its own links away from the header's", async () => {
 })
 
 test("a single start rail is clean under axe", async () => {
-  const { canvasElement } = await mountStory(Default)
+  const { canvasElement } = await mountStory(Playground)
 
   await expectNoAxeViolations(canvasElement)
 })

package/src/RangeSlider/RangeSlider.mdx

@@ -14,7 +14,7 @@ they typed into a `TimecodeInput` beside it. So the shape this is built for is a
 timeline — a bar spanning the whole runtime, two thumbs, and the chosen span painted
 between them.
 
-<Canvas of={RangeSliderStories.Default} />
+<Canvas of={RangeSliderStories.Playground} />
 
 ## Props
 

package/src/RangeSlider/RangeSlider.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"
 
@@ -98,7 +99,8 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: {
     label: "Clip",
     max: 2_700,

package/src/RangeSlider/RangeSlider.test.tsx

@@ -7,8 +7,12 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./RangeSlider.stories.tsx"
 
-const { AllStates, BesideTheSlider, Default, Interactive } =
-  composeStories(stories)
+const {
+  AllStates,
+  BesideTheSlider,
+  Playground,
+  Interactive,
+} = composeStories(stories)
 
 /** A fraction along the bar, as viewport coordinates. */
 const pointerAt =
@@ -39,7 +43,7 @@ const readThumbStyles = (thumb: Element) => {
 
 test("it is two named sliders inside one named group", async () => {
   const { canvas, canvasElement } =
-    await mountStory(Default)
+    await mountStory(Playground)
 
   const start = expectAgentDrivable(canvas, {
     name: "Clip start",

package/src/ReorderList/ReorderList.mdx

@@ -8,7 +8,7 @@ import * as ReorderListStories from "./ReorderList.stories";
 
 A vertical list put in a different order — by two buttons, or by dragging a handle.
 
-<Canvas of={ReorderListStories.Default} />
+<Canvas of={ReorderListStories.Playground} />
 
 ## Props
 

package/src/ReorderList/ReorderList.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"
 
@@ -133,7 +134,8 @@ type Story = StoryObj<typeof meta>
  * A checklist in the order it will be worked through. Press ↑ or ↓,
  * or press and hold the position and drag it somewhere else.
  */
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   render: () => <StoryList />,
 }