@weasel-js/labkit 1.5.1 → 1.6.0

package/src/specimen/Specimen.tsx

@@ -1,15 +1,13 @@
 import type { FillStyle, GradientFill, Track } from '@weasel-js/core';
 import {
-  ActionsBar,
   Badge,
   type Band,
   BandEditor,
   Button,
+  ButtonBar,
   Callout,
   Checkbox,
-  CheckboxRow,
   ColorField,
-  ColorRow,
   ComboBox,
   type ControlPoint,
   CurveEditor,
@@ -24,11 +22,11 @@ import {
   ItemList,
   KeyCap,
   KeySequence,
-  LayerStack,
-  type LayerStackItem,
+  LayerList,
+  type LayerListItem,
   MenuButton,
+  moveLayers,
   NumberField,
-  NumberRow,
   OptionsBar,
   PaintInput,
   Plot2D,
@@ -36,6 +34,7 @@ import {
   Powerline,
   type PrefGroup,
   PrefsForm,
+  PropertyField,
   PropertyGroup,
   PropertyList,
   PropertyPanel,
@@ -44,10 +43,9 @@ import {
   RangeSlider,
   ResizeHandle,
   Select,
-  SelectRow,
+  Sidebar,
   SidebarPanel,
   Slider,
-  SliderRow,
   StatusBarItem,
   StatusBarSpacer,
   Switch,
@@ -55,18 +53,15 @@ import {
   TabList,
   TabPanel,
   Tabs,
-  TextRow,
   type Thumb,
   Timeline,
   ToastRegion,
   ToggleBar,
-  ToggleRow,
   ToolButton,
   ToolGroup,
   ToolOptionsBar,
   Tooltip,
   TooltipTrigger,
-  Sidebar as UiSidebar,
   StatusBar as UiStatusBar,
 } from '@weasel-js/ui';
 import { type CSSProperties, type ReactNode, useId, useMemo, useRef, useState } from 'react';
@@ -76,7 +71,6 @@ import { FloatingPanel } from '../primitives/FloatingPanel';
 import { JobProgress } from '../primitives/JobProgress';
 import { Legend, type LegendEntry } from '../primitives/Legend';
 import { ScaleIndicator } from '../primitives/ScaleIndicator';
-import { Sidebar } from '../primitives/Sidebar';
 import { Split } from '../primitives/Split';
 import { StatusBar } from '../primitives/StatusBar';
 import { Toolbar } from '../primitives/Toolbar';
@@ -213,19 +207,19 @@ function ButtonsAndToggles() {
       </Cell>
       <Cell label="Badge">
         <div className="lk-specimen__row">
-          <Badge shape="pill" tone="accent" variant="outline" size="sm">
+          <Badge shape="pill" status="accent" variant="outline" size="sm">
             ACCENT
           </Badge>
-          <Badge tone="info" variant="subtle">
+          <Badge status="info" variant="subtle">
             INFO
           </Badge>
-          <Badge tone="warn" variant="solid">
+          <Badge status="warn" variant="solid">
             WARN
           </Badge>
-          <Badge tone="danger" variant="solid">
+          <Badge status="danger" variant="solid">
             DANGER
           </Badge>
-          <Badge tone="muted">MUTED</Badge>
+          <Badge status="muted">MUTED</Badge>
         </div>
       </Cell>
       <Cell label="Checkbox, Switch">
@@ -269,7 +263,7 @@ function ButtonsAndToggles() {
           ]}
         />
       </Cell>
-      <Cell label="OptionsBar, ActionsBar">
+      <Cell label="OptionsBar, ButtonBar">
         <div className="lk-specimen__row">
           <OptionsBar
             ariaLabel="Text style"
@@ -278,7 +272,7 @@ function ButtonsAndToggles() {
               { value: 'i', label: 'I', selected: italic, onChange: setItalic },
             ]}
           />
-          <ActionsBar
+          <ButtonBar
             items={[
               { value: 'undo', label: 'Undo', onAction: () => {} },
               { value: 'redo', label: 'Redo', onAction: () => {} },
@@ -297,7 +291,6 @@ function ButtonsAndToggles() {
             ]}
           />
           <Disclosure open={open} onToggle={() => setOpen((o) => !o)} label="Shapes" />
-          <Disclosure open={false} onToggle={() => {}} label="Down" direction="down" />
         </div>
       </Cell>
       <Cell label="Tabs">
@@ -436,7 +429,7 @@ function PanelsAndRows() {
   const [label, setLabel] = useState('Badge');
   const [visible, setVisible] = useState(true);
   const [prefs, setPrefs] = useState<Record<string, unknown>>({});
-  const [layers, setLayers] = useState<LayerStackItem[]>([
+  const [layers, setLayers] = useState<LayerListItem[]>([
     { id: 'base', label: 'Base coat' },
     { id: 'wash', label: 'Wash' },
   ]);
@@ -446,7 +439,9 @@ function PanelsAndRows() {
       <Cell label="PropertyPanel">
         <PropertyPanel title="Shape">
           <PropertyList>
-            <SliderRow
+            <PropertyField
+              kind="number"
+              control="slider"
               label="Opacity"
               value={opacity}
               min={0}
@@ -454,7 +449,9 @@ function PanelsAndRows() {
               step={0.01}
               onChange={setOpacity}
             />
-            <SliderRow
+            <PropertyField
+              kind="number"
+              control="slider"
               label="Radius"
               value={radius}
               min={0}
@@ -462,16 +459,18 @@ function PanelsAndRows() {
               unit="px"
               onChange={setRadius}
             />
-            <ColorRow
+            <PropertyField
+              kind="color"
               label="Fill"
               value={fill}
               onChange={setFill}
               alpha={alpha}
               onAlphaChange={setAlpha}
             />
-            <ColorRow label="Stroke" value={stroke} onChange={setStroke} />
-            <NumberRow label="Count" value={count} min={0} max={100} step={1} onChange={setCount} />
-            <SelectRow
+            <PropertyField kind="color" label="Stroke" value={stroke} onChange={setStroke} />
+            <PropertyField kind="number" label="Count" value={count} min={0} max={100} step={1} onChange={setCount} />
+            <PropertyField
+              kind="enum"
               label="Line cap"
               value={cap}
               onChange={setCap}
@@ -480,7 +479,9 @@ function PanelsAndRows() {
                 { value: 'round', label: 'Round' },
               ]}
             />
-            <ToggleRow
+            <PropertyField
+              kind="enum"
+              control="toggle"
               label="Align"
               value={side}
               onChange={setSide}
@@ -490,10 +491,10 @@ function PanelsAndRows() {
                 { value: 'right', label: 'R' },
               ]}
             />
-            <TextRow label="Label" value={label} onChange={setLabel} />
-            <CheckboxRow label="Visible" value={visible} onChange={setVisible} />
+            <PropertyField kind="string" label="Label" value={label} onChange={setLabel} />
+            <PropertyField kind="boolean" label="Visible" value={visible} onChange={setVisible} />
             <PropertyGroup title="Bevel" defaultCollapsed>
-              <SliderRow label="Rings" value={32} min={4} max={96} step={1} onChange={() => {}} />
+              <PropertyField kind="number" control="slider" label="Rings" value={32} min={4} max={96} step={1} onChange={() => {}} />
             </PropertyGroup>
           </PropertyList>
         </PropertyPanel>
@@ -505,18 +506,16 @@ function PanelsAndRows() {
           onChange={(path, value) => setPrefs((prev) => setAt(prev, path, value))}
         />
       </Cell>
-      <Cell label="LayerStack">
-        <LayerStack
+      <Cell label="LayerList">
+        <LayerList
           items={layers}
-          onReorder={(ids) =>
-            setLayers(ids.flatMap((id) => layers.filter((item) => item.id === id)))
-          }
+          onReorder={(move) => setLayers(moveLayers(layers, move))}
           renderBody={(item) => <div>settings for {item.label}</div>}
         />
       </Cell>
       <Cell label="Sidebar, SidebarPanel">
         <div className="lk-specimen__box">
-          <UiSidebar side="right" ariaLabel="Specimen sidebar">
+          <Sidebar side="right" ariaLabel="Specimen sidebar">
             <SidebarPanel
               title="Selection"
               collapsed={panelCollapsed}
@@ -525,7 +524,7 @@ function PanelsAndRows() {
             >
               <div className="lk-specimen__pad">2 items selected</div>
             </SidebarPanel>
-          </UiSidebar>
+          </Sidebar>
         </div>
       </Cell>
     </Section>
@@ -554,8 +553,8 @@ function OverlaysAndFeedback() {
             triggerRef={calloutAnchor}
             isOpen={calloutOpen}
             onOpenChange={setCalloutOpen}
-            tone="info"
-            title="Info"
+            stance="notice"
+            title="Notice"
           >
             Neutral guidance.
           </Callout>
@@ -587,9 +586,9 @@ function OverlaysAndFeedback() {
           variant="solid"
           size="sm"
           segments={[
-            { text: 'main', tone: 'accent', endCap: 'chevron' },
-            { text: '✓ 12', tone: 'info', endCap: 'slant' },
-            { text: '~/proj', tone: 'muted' },
+            { text: 'main', status: 'accent', endCap: 'chevron' },
+            { text: '✓ 12', status: 'info', endCap: 'slant' },
+            { text: '~/proj', status: 'muted' },
           ]}
         />
       </Cell>
@@ -799,7 +798,6 @@ function EditorsAndPlots() {
 }
 
 function LabChrome() {
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
   const [zoom, setZoom] = useState(1);
   return (
     <Section title="Lab chrome">
@@ -823,18 +821,6 @@ function LabChrome() {
           <StatusBar.Section>Zoom: 100%</StatusBar.Section>
         </StatusBar>
       </Cell>
-      <Cell label="Sidebar">
-        <div className="lk-specimen__box">
-          <div className="lk-specimen__box-main">main</div>
-          <Sidebar
-            title="Controls"
-            collapsed={sidebarCollapsed}
-            onToggle={() => setSidebarCollapsed((v) => !v)}
-          >
-            <p>One slider</p>
-          </Sidebar>
-        </div>
-      </Cell>
       <Cell label="Legend, JobProgress">
         <Legend entries={LEGEND} />
         <JobProgress job={JOB} />

package/src/state/types.ts

@@ -1,3 +1,4 @@
+import type { ColorModePreference } from '@weasel-js/theme';
 import type { Auto } from '../config/auto';
 import type { ConfigPath, ResolvedConfig, ValueAtPath } from '../config/types';
 import type { InstrumentList } from '../instrument/types';
@@ -78,7 +79,12 @@ export interface SavedSnapshot {
 }
 
 /** `auto` follows the OS; the other two are an explicit choice. */
-export type LabMode = 'auto' | 'light' | 'dark';
+export type LabMode = ColorModePreference;
+
+/** How much room the lab's own chrome takes — the theme's density axis, named
+ *  the way the theme names it. A lab's instruments are unaffected: this sizes
+ *  the shell around them. */
+export type LabDensity = 'compact' | 'comfortable' | 'roomy';
 
 /** Everything a lab persists: its trials, its saved snapshots, and the
  *  chosen color mode. */
@@ -126,7 +132,7 @@ export interface TrialStateHandle<TS, TC> {
   setState: (next: TS | ((prev: TS) => TS)) => void;
   config: TC;
   /** The config as stored, before any auto path is resolved. What the control
-   *  panel renders, so a ghosted control sits at the value it pins back to. */
+   *  panel renders, so an auto row pins back to the value it was holding. */
   raw: TC;
   /** Dotted paths this trial has unpinned. */
   auto: ReadonlySet<string>;

package/src/state/view.test.ts

@@ -5,13 +5,13 @@ import { openLabStore } from './openLabStore';
 import { createLabStore } from './store';
 import { as2DView, DEFAULT_VIEW, normalize2DView, withZoom } from './view';
 
-interface OrbitView {
+interface ArbitraryTrialView {
   yaw: number;
   pitch: number;
   distance: number;
 }
 
-const orbit: OrbitView = { yaw: 1.1, pitch: 0.3, distance: 9 };
+const orbit: ArbitraryTrialView = { yaw: 1.1, pitch: 0.3, distance: 9 };
 
 describe('as2DView', () => {
   it('accepts the 2D shape', () => {
@@ -54,7 +54,7 @@ describe('a trial view labkit does not interpret', () => {
 
     store.getState().updateTrialView('w1', orbit);
 
-    expect(store.getState().trials[0]?.view as OrbitView).toEqual(orbit);
+    expect(store.getState().trials[0]?.view as ArbitraryTrialView).toEqual(orbit);
   });
 
   it('round-trips that view through persistence', async () => {
@@ -76,7 +76,7 @@ describe('a trial view labkit does not interpret', () => {
       storageKey: 'view-b',
       storage: createMemoryAdapter(backing),
     });
-    expect(hydrated.store.getState().trials[0]?.view as OrbitView).toEqual(orbit);
+    expect(hydrated.store.getState().trials[0]?.view as ArbitraryTrialView).toEqual(orbit);
   });
 });
 

package/src/styles.less

@@ -1,10 +1,12 @@
 // Imports compile-time only. Component .less files are added in later steps.
+// Left as a CSS @import for the consumer's bundler to resolve; build-css.mjs
+// swaps it for the faces themselves, pointed at dist/fonts/.
+@import (css) '@weasel-js/theme/faces.css';
 @import './theme/base.less';
 @import './lab/Workspace.less';
 @import './lab/LabShell.less';
 @import './lab/LabSwitcher.less';
 @import './primitives/Toolbar.less';
-@import './primitives/Sidebar.less';
 @import './primitives/Split.less';
 @import './primitives/ZoomControl.less';
 @import './primitives/StatusBar.less';
@@ -17,11 +19,11 @@
 @import './trial/Trial.less';
 @import './chrome/regions/ViewportRegion.less';
 @import './chrome/regions/PaletteRegion.less';
+@import './chrome/regions/SidebarRegion.less';
 @import './controls/ControlPanel.less';
 @import './canvas/CanvasStack.less';
 @import './canvas/Stage.less';
 @import './loupe/Loupe.less';
-@import './layers/LayerList.less';
 @import './annotations/Annotations.less';
 @import './dragdrop/Palette.less';
 @import './dragdrop/DragGhost.less';

package/src/theme/Interstellar.stories.tsx

@@ -2,12 +2,9 @@ import type { Meta, StoryObj } from '@weasel-js/forge';
 import type { TokenName } from '@weasel-js/theme';
 import { useTheme } from '@weasel-js/theme/react';
 import {
-  CheckboxRow,
-  ColorRow,
+  PropertyField,
   PropertyList,
   PropertyPanel,
-  SliderRow,
-  TextRow,
 } from '@weasel-js/ui';
 import './Interstellar.stories.less';
 
@@ -148,7 +145,9 @@ function LivePanelPreview() {
       <h3 className="lk-theme-doc__heading">Live panel</h3>
       <PropertyPanel title="Sample">
         <PropertyList>
-          <SliderRow
+          <PropertyField
+            kind="number"
+            control="slider"
             label="Opacity"
             value={0.65}
             min={0}
@@ -157,10 +156,10 @@ function LivePanelPreview() {
             onChange={() => {}}
             format={(v) => v.toFixed(2)}
           />
-          <ColorRow label="Fill" value="#b08adb" onChange={() => {}} />
-          <ColorRow label="Stroke" value="#1a1428" onChange={() => {}} />
-          <TextRow label="Name" value="Untitled" onChange={() => {}} />
-          <CheckboxRow label="Visible" value={true} onChange={() => {}} />
+          <PropertyField kind="color" label="Fill" value="#b08adb" onChange={() => {}} />
+          <PropertyField kind="color" label="Stroke" value="#1a1428" onChange={() => {}} />
+          <PropertyField kind="string" label="Name" value="Untitled" onChange={() => {}} />
+          <PropertyField kind="boolean" label="Visible" value={true} onChange={() => {}} />
         </PropertyList>
       </PropertyPanel>
     </div>

package/src/theme/base.less

@@ -1,25 +1,8 @@
-// Self-hosted Oswald (variable font, wght axis 200–700) for the headline
-// typeface. Sourced from @weasel-js/theme; build:fonts copies it into dist/fonts.
-@font-face {
-  font-family: 'Oswald';
-  font-style: normal;
-  font-weight: 200 700;
-  font-display: swap;
-  // URL is resolved relative to the COMPILED stylesheet at dist/styles.css,
-  // so this points to dist/fonts/. Source-tree usage (less compilation
-  // happens before the file is moved) doesn't need to resolve the URL.
-  src: url('./fonts/oswald-latin-variable.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
-    U+2212, U+2215, U+FEFF, U+FFFD;
-}
+// The Oswald and Inter faces come from @weasel-js/theme/faces.css, imported at
+// the top of styles.less.
 
 // Resets and global element defaults.
 .lk-root {
-  // labkit's own vocabulary over the theme's raw scale — named for the thing
-  // rather than the step, so "the workspace is too tight" has one place to go.
-  --lk-workspace-pad: var(--wzl-space-sm);
-
   font-family: var(--wzl-font-ui);
   font-size: var(--wzl-font-size);
   font-weight: var(--wzl-font-weight-light);
@@ -52,7 +35,7 @@
 
     &:hover {
       border-color: var(--wzl-accent);
-      color: var(--wzl-accent);
+      color: var(--wzl-accent-fg);
     }
 
     &:focus-visible {

package/src/theme/interstellar.test.ts

@@ -1,4 +1,4 @@
-import { resolveTheme, THEME_SOURCES, type ThemeDefinition } from '@weasel-js/theme';
+import { resolveTheme, THEME_SOURCES, type ThemeDefinition, weaselTheme } from '@weasel-js/theme';
 import { derive } from '@weasel-js/theme/engine';
 import { describe, expect, it } from 'vitest';
 import { interstellarTheme } from './interstellar';
@@ -19,8 +19,11 @@ describe('interstellarTheme', () => {
     // Values carried over verbatim from the retired Less.
     expect(dark['--wzl-surface']).toBe('#0a0a14');
     expect(dark['--wzl-accent']).toBe('#b08adb');
-    expect(light['--wzl-surface']).toBe('#fafaf7');
-    expect(light['--wzl-accent']).toBe('#a86f3c');
+    // Light mode is weasel's own: interstellar restyles the dark only.
+    const weasel = resolveTheme(weaselTheme, { mode: 'light' });
+    expect(light['--wzl-surface']).toBe(weasel['--wzl-surface']);
+    expect(light['--wzl-accent']).toBe(weasel['--wzl-accent']);
+    expect(light['--wzl-border']).toBe(weasel['--wzl-border']);
 
     // Inherited from weasel — interstellar overrides values, not the token set.
     expect(dark['--wzl-space-md']).toBe('12px');

package/src/theme/interstellar.theme.json

@@ -27,10 +27,6 @@
       "dark": {
         "value": "#0a0a14",
         "type": "color"
-      },
-      "light": {
-        "value": "#fafaf7",
-        "type": "color"
       }
     },
     "surface-raised": {
@@ -38,10 +34,6 @@
       "dark": {
         "value": "rgba(20, 20, 36, 0.55)",
         "type": "color"
-      },
-      "light": {
-        "value": "#ffffff",
-        "type": "color"
       }
     },
     "surface-sunken": {
@@ -49,10 +41,6 @@
       "dark": {
         "value": "#02020a",
         "type": "color"
-      },
-      "light": {
-        "value": "#f0ebe2",
-        "type": "color"
       }
     },
     "border": {
@@ -60,10 +48,6 @@
       "dark": {
         "value": "rgba(255, 255, 255, 0.14)",
         "type": "color"
-      },
-      "light": {
-        "value": "#c9bba5",
-        "type": "color"
       }
     },
     "line-subtle": {
@@ -71,10 +55,6 @@
       "dark": {
         "value": "rgba(255, 255, 255, 0.08)",
         "type": "color"
-      },
-      "light": {
-        "value": "rgba(0, 0, 0, 0.08)",
-        "type": "color"
       }
     },
     "fg": {
@@ -82,10 +62,6 @@
       "dark": {
         "value": "#e8e8f0",
         "type": "color"
-      },
-      "light": {
-        "value": "#2a2018",
-        "type": "color"
       }
     },
     "fg-muted": {
@@ -93,10 +69,6 @@
       "dark": {
         "value": "#a8a8c0",
         "type": "color"
-      },
-      "light": {
-        "value": "#6b5c4a",
-        "type": "color"
       }
     },
     "fg-subtle": {
@@ -104,10 +76,6 @@
       "dark": {
         "value": "#5a5a78",
         "type": "color"
-      },
-      "light": {
-        "value": "#a89b85",
-        "type": "color"
       }
     },
     "accent": {
@@ -115,10 +83,6 @@
       "dark": {
         "value": "#b08adb",
         "type": "color"
-      },
-      "light": {
-        "value": "#a86f3c",
-        "type": "color"
       }
     },
     "accent-hover": {
@@ -126,10 +90,6 @@
       "dark": {
         "value": "#c6a3ee",
         "type": "color"
-      },
-      "light": {
-        "value": "#c2854f",
-        "type": "color"
       }
     },
     "focus-ring": {
@@ -137,10 +97,6 @@
       "dark": {
         "value": "rgba(176, 138, 219, 0.45)",
         "type": "color"
-      },
-      "light": {
-        "value": "rgba(168, 111, 60, 0.35)",
-        "type": "color"
       }
     },
     "shadow": {
@@ -148,10 +104,6 @@
       "dark": {
         "value": "rgba(0, 0, 0, 0.7)",
         "type": "color"
-      },
-      "light": {
-        "value": "rgba(80, 60, 40, 0.18)",
-        "type": "color"
       }
     },
     "border-strong": {
@@ -159,10 +111,6 @@
       "dark": {
         "value": "rgba(255, 255, 255, 0.36)",
         "type": "color"
-      },
-      "light": {
-        "value": "#9e8b71",
-        "type": "color"
       }
     },
     "backdrop": {
@@ -170,10 +118,6 @@
       "dark": {
         "value": "radial-gradient(ellipse 60% 80% at 18% 30%, rgba(150, 80, 200, 0.22), transparent 70%), radial-gradient(ellipse 55% 90% at 78% 70%, rgba(220, 100, 140, 0.18), transparent 65%), radial-gradient(ellipse 50% 70% at 50% 50%, rgba(60, 110, 200, 0.18), transparent 75%), radial-gradient(ellipse at center, #0a0a18 0%, #02020a 100%)",
         "type": "gradient"
-      },
-      "light": {
-        "value": "none",
-        "type": "gradient"
       }
     }
   }

package/src/theme/interstellar.ts

@@ -2,8 +2,8 @@ import { defineTheme, type Theme, type ThemeInput, weaselTheme } from '@weasel-j
 import definition from './interstellar.theme.json' with { type: 'json' };
 
 /**
- * labkit's theme: a cosmic dark and a warm parchment light, extending the
- * built-in weasel theme. A pins-only theme definition: nothing in it is
+ * labkit's theme: a cosmic dark over the built-in weasel theme, whose light
+ * mode it keeps as is. A pins-only theme definition: nothing in it is
  * derived, so it loads without the engine.
  */
 export const interstellarTheme: Theme = defineTheme({

package/src/trial/Trial.canvas.test.tsx

@@ -93,16 +93,20 @@ describe('an auto config path', () => {
       render: () => null,
       canvas: { layers: [{ id: 'main', draw }] },
     });
-    render(<Lab instruments={[instrument as Instrument]} defaultInstrument="Auto" />);
+    const { container } = render(
+      <Lab instruments={[instrument as Instrument]} defaultInstrument="Auto" />,
+    );
     await new Promise((r) => requestAnimationFrame(() => r(null)));
 
     expect(draw).toHaveBeenCalledWith(
       expect.anything(),
       expect.objectContaining({ config: { gap: 18 } }),
     );
-    // The panel is handed the raw config, but a ghosted control draws what the
-    // resolver decided — a handle at 12 under a readout saying 18 reads as a bug.
-    expect(screen.getByRole('slider', { name: 'Gap' })).toHaveValue('18');
+    // The panel is handed the raw config, but an auto row holds what the
+    // resolver decided, so pinning it keeps the number the instrument drew.
+    // The row hides its control while auto, which takes it out of the
+    // accessibility tree — so this reads the element rather than the role.
+    expect(container.querySelector('input[type=range]')).toHaveValue('18');
   });
 });
 
@@ -181,7 +185,7 @@ describe('LabProps.instruments', () => {
     render(<Lab instruments={[instrument]} defaultInstrument="Probe" />);
     expect([...seen]).toEqual(['grid', 'glyph']);
 
-    await userEvent.click(screen.getByRole('checkbox', { name: 'Toggle grid' }));
+    await userEvent.click(screen.getByRole('checkbox', { name: 'Show grid' }));
     expect([...seen]).toEqual(['glyph']);
   });
 });