@weasel-js/labkit 1.5.1 → 1.5.2

package/src/controls/ControlPanel.tsx

@@ -23,6 +23,7 @@ import {
   Switch,
   SwitchRow,
   TextRow,
+  ToggleBar,
   ToggleRow,
 } from '@weasel-js/ui';
 import { Fragment, type ReactNode, useEffect, useMemo, useRef, useState } from 'react';
@@ -106,11 +107,11 @@ export interface ControlPanelProps<TC extends Record<string, unknown>> {
   /** A fold moved. The key is a section's label — prefixed by its group's
    *  dotted path when the section sits inside one — or a group's own path. */
   onCollapse?: (key: string, collapsed: boolean) => void;
-  /** Dotted paths currently unpinned. A row in this set draws ghosted and its
-   *  dot reads as auto, and the dot writes the sentinel back through
-   *  `setConfig`. Omitted, the panel keeps the set itself: the dots still work
-   *  and the sentinel never reaches `setConfig`, which would otherwise store it
-   *  as the row's value. */
+  /** Dotted paths currently unpinned. A row in this set hides its control and
+   *  reads out `auto`, and clicking its label writes the sentinel back through
+   *  `setConfig`. Omitted, the panel keeps the set itself: the labels still
+   *  toggle and the sentinel never reaches `setConfig`, which would otherwise
+   *  store it as the row's value. */
   auto?: ReadonlySet<string>;
   /** Draw leaves marked `hidden`. */
   showHidden?: boolean;
@@ -170,28 +171,6 @@ export function ControlPanel<TC extends Record<string, unknown>>({
     [resolved, config, auto],
   );
 
-  const listRef = useRef<HTMLDivElement>(null);
-  const toggles = useRef(new Map<string, () => void>());
-  // Capture phase, because `PropertyRow` is a <label>: a bubbled handler runs
-  // after the browser has already begun a range drag or a native control's
-  // activation, so the shift-click moves the very value it was meant to unpin.
-  useEffect(() => {
-    const host = listRef.current;
-    if (!host) return;
-    const onDown = (e: PointerEvent) => {
-      if (!e.shiftKey) return;
-      const row = (e.target as HTMLElement | null)?.closest('[data-auto-path]');
-      const path = row?.getAttribute('data-auto-path');
-      const toggle = path ? toggles.current.get(path) : undefined;
-      if (!toggle) return;
-      e.preventDefault();
-      e.stopPropagation();
-      toggle();
-    };
-    host.addEventListener('pointerdown', onDown, true);
-    return () => host.removeEventListener('pointerdown', onDown, true);
-  }, []);
-
   const gridPack = gridOf(pack);
   // A section that declares how it opens is foldable whether or not the lab
   // asked for folds — there is nothing else for the declaration to mean.
@@ -230,7 +209,6 @@ export function ControlPanel<TC extends Record<string, unknown>>({
           layout={rows.layout}
           auto={auto}
           setRowAuto={setRowAuto}
-          toggles={toggles.current}
         />
       );
     }
@@ -238,7 +216,16 @@ export function ControlPanel<TC extends Record<string, unknown>>({
     // empty `PrefGroup.name` — so it contributes its rows and no chrome.
     if (found.name === '') return <Fragment key={path}>{body(found, path, rows)}</Fragment>;
     return (
-      <PropertyGroup key={path} title={found.name} {...fold(path, undefined, rows.grid)}>
+      <PropertyGroup
+        key={path}
+        title={found.name}
+        description={found.description}
+        // A nested group is a block of rows, not a control: half of a
+        // two-column grid leaves it laying its own rows out inside a cell,
+        // which overlaps them.
+        span
+        {...fold(path, undefined, rows.grid)}
+      >
         {body(found, path, rows)}
       </PropertyGroup>
     );
@@ -289,6 +276,9 @@ export function ControlPanel<TC extends Record<string, unknown>>({
           shown={shown}
           setConfig={setConfig}
           layout={rows.layout}
+          // A segmented cell carries every choice at once, so a pair holding
+          // one needs the whole row the way a segmented row of its own does.
+          span={cells.some(({ leaf }) => extra<string>(leaf, 'control') === 'radio')}
         />,
       );
       i = j;
@@ -324,16 +314,14 @@ export function ControlPanel<TC extends Record<string, unknown>>({
   };
 
   return (
-    <div ref={listRef}>
-      <PropertyList
-        pack={gridPack}
-        density={density}
-        align={align}
-        className={className ? `lk-control-panel ${className}` : 'lk-control-panel'}
-      >
-        {body(resolved.group, '', { pack, layout, grid: gridPack })}
-      </PropertyList>
-    </div>
+    <PropertyList
+      pack={gridPack}
+      density={density}
+      align={align}
+      className={className ? `lk-control-panel ${className}` : 'lk-control-panel'}
+    >
+      {body(resolved.group, '', { pack, layout, grid: gridPack })}
+    </PropertyList>
   );
 }
 
@@ -357,7 +345,6 @@ interface ControlRowProps<TC extends Record<string, unknown>> {
   layout?: PropertyRowLayout;
   auto?: ReadonlySet<string>;
   setRowAuto: (path: string, next: boolean, value: unknown) => void;
-  toggles: Map<string, () => void>;
 }
 
 /** Whether this leaf draws as a slider, mirroring the condition the `number`
@@ -390,7 +377,6 @@ function ControlRow<TC extends Record<string, unknown>>({
   layout,
   auto,
   setRowAuto,
-  toggles,
 }: ControlRowProps<TC>) {
   const write = (value: unknown): void => setConfig(path, value);
   const fallback = extra<unknown>(leaf, 'default');
@@ -408,30 +394,9 @@ function ControlRow<TC extends Record<string, unknown>>({
   const value = resolvedValue ?? pinned;
   const setAuto = (next: boolean): void => setRowAuto(path, next, value);
   const onAutoChange = canAuto ? setAuto : undefined;
-  // A slider's handle is a position, not a number, so the readout is the only
-  // place its resolved value can be read. Every other control renders its own
-  // value, and repeating it there says it twice and wraps the narrow slot.
-  const readsItsOwnValue = !isSliderLeaf(leaf);
-  // A readout says what the control would say, so it reads in the display
-  // unit: a radian in a row that edits degrees is a different number.
-  const readoutValue =
-    leaf.kind === 'number' && typeof resolvedValue === 'number'
-      ? numberField(leaf, resolvedValue).shown
-      : resolvedValue;
-  const autoReadout = !isAutoRow
-    ? undefined
-    : resolvedValue === undefined || readsItsOwnValue
-      ? 'auto'
-      : `auto · ${String(readoutValue)}`;
-  const autoProps = { auto: isAutoRow, onAutoChange, 'data-auto-path': canAuto ? path : undefined };
-
-  useEffect(() => {
-    if (!canAuto) return;
-    toggles.set(path, () => setAuto(!isAutoRow));
-    return () => {
-      toggles.delete(path);
-    };
-  });
+  // An auto row hides its control, so the word is all the row has to say.
+  const autoReadout = isAutoRow ? 'auto' : undefined;
+  const autoProps = { auto: isAutoRow, onAutoChange };
 
   // Most specific wins, and within a tier the lab's entry beats the
   // instrument's: controls[path] -> node .render -> controls[kind] -> built-in.
@@ -611,7 +576,6 @@ function DebouncedTextRow({
   readout,
   auto,
   onAutoChange,
-  'data-auto-path': autoPath,
 }: {
   leaf: PrefLeaf;
   label: string;
@@ -623,7 +587,6 @@ function DebouncedTextRow({
   readout?: ReactNode;
   auto?: boolean;
   onAutoChange?: (next: boolean) => void;
-  'data-auto-path'?: string;
 }) {
   const text = useDebouncedText(
     value,
@@ -640,7 +603,6 @@ function DebouncedTextRow({
       description={description}
       auto={auto}
       onAutoChange={onAutoChange}
-      data-auto-path={autoPath}
       value={text.local}
       placeholder={extra<string>(leaf, 'placeholder')}
       maxLength={extra<number>(leaf, 'maxLength')}
@@ -735,8 +697,8 @@ interface PairCellSpec {
  *
  * The cells are bare controls: a row holds one label column, so each leaf's
  * own name stays with its control as the accessible name and its description
- * as a title. For the same reason the row carries no pin dot — a dot names one
- * path, and this row has several.
+ * as a title. For the same reason the row's label does not toggle auto — it
+ * names one path, and this row has several.
  */
 function PairedRow<TC extends Record<string, unknown>>({
   label,
@@ -744,22 +706,29 @@ function PairedRow<TC extends Record<string, unknown>>({
   shown,
   setConfig,
   layout,
+  span,
 }: {
   label: string;
   cells: readonly PairCellSpec[];
   shown: TC;
   setConfig: (path: string, value: unknown) => void;
   layout?: PropertyRowLayout;
+  span?: boolean;
 }) {
   return (
-    <PropertyRow group label={label} layout={layout}>
+    <PropertyRow group span={span} label={label} layout={layout}>
       {cells.map(({ path, leaf }) => (
-        <PairCell
-          key={path}
-          leaf={leaf}
-          value={valueAtPath(shown, path) ?? extra<unknown>(leaf, 'default')}
-          write={(value) => setConfig(path, value)}
-        />
+        // The row is named by the pair, so a cell that shares it says which
+        // knob it is — without a caption a paired switch reads only to a
+        // screen reader. A cell whose leaf is deliberately unnamed keeps none.
+        <span key={path} className="lk-pair-cell">
+          {leaf.name ? <span className="lk-pair-label">{leaf.name}</span> : null}
+          <PairCell
+            leaf={leaf}
+            value={valueAtPath(shown, path) ?? extra<unknown>(leaf, 'default')}
+            write={(value) => setConfig(path, value)}
+          />
+        </span>
       ))}
     </PropertyRow>
   );
@@ -845,6 +814,21 @@ function PairCell({
     }
     case 'enum': {
       const options = extra<readonly { value: string; label: string }[]>(leaf, 'options') ?? [];
+      // A leaf that asked to be segmented stays segmented when it shares a row:
+      // the choice is the control's shape, not a whole row's worth of chrome.
+      if (extra<string>(leaf, 'control') === 'radio') {
+        return (
+          <span title={title}>
+            <ToggleBar<string>
+              ariaLabel={name}
+              size="sm"
+              value={typeof value === 'string' ? value : null}
+              onChange={(next) => next !== null && write(next)}
+              items={options.map((o) => ({ value: o.value, label: o.label }))}
+            />
+          </span>
+        );
+      }
       // `Select` takes no `title`, so the cell's help hangs off a wrapper.
       return (
         <span title={title}>

package/src/index.test.ts

@@ -72,8 +72,6 @@ describe('surface, job and orbit entry points', () => {
     expect(typeof kit.annotationsFromJSON).toBe('function');
     expect(typeof kit.seenFrom).toBe('function');
     expect(typeof kit.fracToWorld).toBe('function');
-    expect(typeof kit.useOrbit).toBe('function');
-    expect(typeof kit.orbitAfterDrag).toBe('function');
     expect(typeof kit.usePanZoom).toBe('function');
     expect(typeof kit.useJob).toBe('function');
     expect(typeof kit.as2DView).toBe('function');

package/src/index.ts

@@ -43,6 +43,8 @@ export type {
   TokenCategory,
   TokenEntry,
   TokenPanelProps,
+  TokenScale,
+  TokenScaleRule,
 } from '@weasel-js/ui';
 export {
   Button,
@@ -67,6 +69,7 @@ export {
   PropertyPanel,
   PropertyRow,
   PropertySpan,
+  refitScale,
   ResetIcon,
   Select,
   SelectRow,
@@ -148,13 +151,9 @@ export type {
   CanvasStackContextValue,
   CanvasStackProps,
   CanvasStackSurface,
-  OrbitHandlers,
-  OrbitView,
   PanZoomHandlers,
   StageProps,
-  UseOrbitOptions,
   UsePanZoomOptions,
-  Vec3,
   ViewportSize,
   WorldFrame,
   WorldSpec,
@@ -165,19 +164,13 @@ export {
   CanvasStack,
   CanvasStackContext,
   centerOn,
-  clampPitch,
   DEFAULT_FRAME,
   fitStage,
-  orbitAfterDrag,
-  orbitAfterWheel,
-  PITCH_LIMIT,
   resolveFrame,
   Stage,
   screenToWorld,
-  useOrbit,
   usePanZoom,
   worldToScreen,
-  wrapYaw,
   zoomAt,
 } from './canvas';
 export * from './chrome';
@@ -298,6 +291,7 @@ export { Persistence, type PersistenceProps } from './state/Persistence';
 export type { RecordCache, RecordChange } from './state/records';
 export type {
   CreateLabStoreOptions,
+  LabDensity,
   LabDocument,
   LabMode,
   LabStoreState,

package/src/lab/Lab.tsx

@@ -30,7 +30,7 @@ import { type OpenedLabStore, openLabStore } from '../state/openLabStore';
 import { PersistenceContext } from '../state/Persistence';
 import { createRecordCache } from '../state/records';
 import { createLabStore, type LabStore } from '../state/store';
-import type { LabMode, StorageAdapter, TrialRecord } from '../state/types';
+import type { LabDensity, LabMode, StorageAdapter, TrialRecord } from '../state/types';
 import { useOpenOnce, useWarnIgnoredChange } from '../state/useOpenOnce';
 import { usePersistedState } from '../state/usePersistedState';
 import { SurfaceCanvasContext, SurfaceContext } from '../surface/SurfaceContext';
@@ -64,6 +64,10 @@ interface LabBaseProps {
   instruments: InstrumentList;
   defaultInstrument: string;
   mode?: LabMode;
+  /** How much room the lab's chrome takes. Default `'comfortable'`; a lab whose
+   *  window is the whole app, rather than a panel beside one, reads better at
+   *  `'roomy'`. The trials' own contents are unaffected. */
+  density?: LabDensity;
   /** Rendered while a stored lab loads. Default: the lab's empty shell. */
   fallback?: ReactNode;
   /**
@@ -175,12 +179,17 @@ async function openStoredLab(
 function LabFallback({
   title,
   mode,
+  density,
   pages,
   path,
-}: Pick<LabBaseProps, 'title' | 'mode' | 'pages' | 'path'>) {
+}: Pick<LabBaseProps, 'title' | 'mode' | 'density' | 'pages' | 'path'>) {
   const resolvedMode = useResolvedMode(mode ?? 'auto');
   return (
-    <ThemeProvider theme={interstellarTheme} selection={{ mode: resolvedMode }} className="lk-lab">
+    <ThemeProvider
+      theme={interstellarTheme}
+      selection={{ mode: resolvedMode, density: density ?? 'comfortable' }}
+      className="lk-lab"
+    >
       <LabShell
         title={title ?? 'Labkit'}
         mode={mode}
@@ -289,7 +298,13 @@ export function Lab(props: LabProps) {
   if (!opened) {
     if (props.fallback !== undefined) return props.fallback;
     return (
-      <LabFallback title={props.title} mode={props.mode} pages={props.pages} path={props.path} />
+      <LabFallback
+        title={props.title}
+        mode={props.mode}
+        density={props.density}
+        pages={props.pages}
+        path={props.path}
+      />
     );
   }
   return <LabRuntime {...props} opened={opened} />;
@@ -298,6 +313,7 @@ export function Lab(props: LabProps) {
 function LabRuntime({
   instruments,
   mode,
+  density,
   nebula,
   title,
   pages,
@@ -575,7 +591,7 @@ function LabRuntime({
           <LabContext.Provider value={contextValue}>
             <ThemeProvider
               theme={interstellarTheme}
-              selection={{ mode: resolvedMode }}
+              selection={{ mode: resolvedMode, density: density ?? 'comfortable' }}
               className="lk-lab"
               style={backdropStyle}
             >

package/src/layers/LayerList.less

@@ -89,5 +89,5 @@
 // line up down the level.
 .lk-layer-list__twisty-gap {
   flex: 0 0 auto;
-  width: var(--wzl-disclosure-target, 20px);
+  width: var(--wzl-disclosure-target, var(--wzl-control-h-sm));
 }

package/src/layers/LayerList.stories.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { LayerList, type LayerTreeNode } from './LayerList';
 
 const meta: Meta<typeof LayerList> = {
-  title: 'labkit/layers/LayerList',
+  title: 'labkit/Layers/LayerList',
   component: LayerList,
 };
 export default meta;

package/src/primitives/FpsMeter.less

@@ -1,6 +1,7 @@
 .lk-fps-meter {
   display: inline-flex;
   align-items: center;
+  white-space: nowrap;
   gap: var(--wzl-space-xs);
   font-family: var(--wzl-font-mono);
   font-size: var(--wzl-font-size-sm);
@@ -9,6 +10,10 @@
 
 .lk-fps-meter-value {
   color: var(--wzl-fg);
-  min-width: 2.5ch;
+  /* Sized for the widest rate it can hold rather than the one it holds now:
+     a 240Hz display reads three digits, and a readout that grows into them
+     pushes whatever shares its row. */
+  min-width: 3ch;
+  font-variant-numeric: tabular-nums;
   text-align: right;
 }

package/src/primitives/FpsMeter.test.tsx

@@ -9,9 +9,17 @@ describe('FpsMeter', () => {
 
   test('renders an FPS label', () => {
     render(<FpsMeter />);
-    expect(screen.getByText(/fps/i)).toBeInTheDocument();
+    expect(screen.getByText('FPS')).toBeInTheDocument();
   });
 
+  /* The label and the rate are separate elements so the rate can hold a fixed
+     width; a text query spanning both would go back to matching one box. */
+  const rate = (): HTMLElement => {
+    const el = document.querySelector('.lk-fps-meter-value');
+    if (!el) throw new Error('no rate readout');
+    return el as HTMLElement;
+  };
+
   test('uses lk-fps-meter class', () => {
     const { container } = render(<FpsMeter />);
     expect((container.firstChild as HTMLElement).className).toBe('lk-fps-meter');
@@ -31,7 +39,7 @@ describe('FpsMeter', () => {
       raf?.(16.67);
       raf?.(33.34);
     });
-    expect(screen.getByText(/FPS\s+\d+/)).toBeInTheDocument();
+    expect(rate().textContent).toMatch(/^\d+$/);
 
     vi.unstubAllGlobals();
   });
@@ -59,7 +67,7 @@ describe('FpsMeter', () => {
       run(16.67);
       run(33.34);
     });
-    const before = screen.getByText(/FPS\s+\d+/).textContent;
+    const before = rate().textContent;
 
     // An hour hidden. The frame that lands on resume is not a 60-minute frame,
     // and must not enter the rolling average as one.
@@ -74,7 +82,7 @@ describe('FpsMeter', () => {
       run(3_600_016.67);
     });
 
-    expect(screen.getByText(/FPS\s+\d+/).textContent).toBe(before);
+    expect(rate().textContent).toBe(before);
 
     setHidden(false);
     vi.unstubAllGlobals();

package/src/primitives/FpsMeter.tsx

@@ -42,7 +42,12 @@ export function FpsMeter() {
 
   return (
     <div className="lk-fps-meter" ref={rootRef}>
-      <span className="lk-fps-meter-value">FPS {fps}</span>
+      <span className="lk-fps-meter-label">FPS</span>
+      {/* The number is its own cell because it is the only part that changes:
+          in one box with the label, every digit it gains or loses resizes the
+          readout, and the status bar it sits in wraps to a second line and
+          back — which in a small trial resizes the window. */}
+      <span className="lk-fps-meter-value">{fps}</span>
     </div>
   );
 }

package/src/primitives/JobProgress.stories.tsx

@@ -13,7 +13,7 @@ const base: JobHandle = {
 };
 
 const meta: Meta<typeof JobProgress> = {
-  title: 'labkit/primitives/JobProgress',
+  title: 'labkit/Primitives/JobProgress',
   component: JobProgress,
 };
 export default meta;

package/src/primitives/StatusBar.less

@@ -1,6 +1,10 @@
 .lk-status-bar {
   display: flex;
   align-items: center;
+  /* One line, always. A bar that grows a second line takes it from the canvas
+     above it, and a readout that changes width would do that on and off as it
+     ticks. Too narrow for its contents clips them instead. */
+  overflow: hidden;
   gap: var(--wzl-space-md);
   padding: var(--wzl-space-xs) var(--wzl-space-sm);
   background: var(--wzl-surface-raised);
@@ -13,6 +17,8 @@
 .lk-status-bar-section {
   display: inline-flex;
   align-items: center;
+  white-space: nowrap;
+  min-width: 0;
   gap: var(--wzl-space-xs);
   padding: 0 var(--wzl-space-xs);
   border-right: 1px solid var(--wzl-line-subtle);

package/src/state/types.ts

@@ -80,6 +80,11 @@ export interface SavedSnapshot {
 /** `auto` follows the OS; the other two are an explicit choice. */
 export type LabMode = 'auto' | 'light' | 'dark';
 
+/** 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. */
 export interface LabStoreState {
@@ -126,7 +131,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/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');
   });
 });
 

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

@@ -218,7 +218,7 @@ describe('a config written as auto', () => {
     const { container } = render(<Lab instruments={[instrument]} defaultInstrument="Ghosted" />);
     expect(screen.getByRole('button', { name: /Gap/ })).toHaveAttribute('aria-pressed', 'false');
     expect(screen.getByRole('button', { name: /Width/ })).toHaveAttribute('aria-pressed', 'true');
-    // 432 / 24. A ghosted control draws what the resolver decided rather than
+    // 432 / 24. An auto row holds what the resolver decided rather than
     // the pinned 12 underneath it, and un-pinning writes back what it drew.
     expect((container.querySelector('input[type=range]') as HTMLInputElement).value).toBe('18');
   });