@weasel-js/labkit 1.7.1 → 1.7.2

package/src/primitives/FpsMeter.less

@@ -1,9 +1,9 @@
 .lk-fps-meter {
+  .numeric();
   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);
   color: var(--wzl-fg-muted);
 }
@@ -14,6 +14,5 @@
      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/JobProgress.less

@@ -30,8 +30,7 @@
   }
 
   &__count {
-    font-variant-numeric: tabular-nums;
-    font-family: var(--wzl-font-numeric);
+    .numeric();
     white-space: nowrap;
   }
 

package/src/primitives/ScaleIndicator.less

@@ -1,8 +1,8 @@
 .lk-scale-indicator {
+  .numeric();
   display: inline-flex;
   align-items: center;
   gap: var(--wzl-space-xs);
-  font-family: var(--wzl-font-mono);
   font-size: var(--wzl-font-size-sm);
   color: var(--wzl-fg-muted);
 }

package/src/primitives/StatusBar.less

@@ -1,4 +1,5 @@
 .lk-status-bar {
+  .numeric();
   display: flex;
   align-items: center;
   /* One line, always. A bar that grows a second line takes it from the canvas
@@ -11,7 +12,6 @@
   border-top: 1px solid var(--wzl-border);
   font-size: var(--wzl-font-size-sm);
   color: var(--wzl-fg-muted);
-  font-family: var(--wzl-font-mono);
 }
 
 .lk-status-bar-section {

package/src/specimen/Specimen.less

@@ -78,6 +78,7 @@
 }
 
 .lk-specimen__pane {
+  .numeric();
   flex: none;
   width: var(--lk-specimen-pane-w);
   padding: var(--wzl-space-sm);

package/src/styles.less

@@ -2,6 +2,8 @@
 // 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';
+// The numeric face's one definition, taken as a mixin: `.numeric();`.
+@import (reference, less) '@weasel-js/theme/numeric.module.css';
 @import './theme/base.less';
 @import './lab/Workspace.less';
 @import './lab/LabShell.less';
@@ -22,6 +24,7 @@
 @import './chrome/regions/PaletteRegion.less';
 @import './chrome/regions/SidebarRegion.less';
 @import './controls/ControlPanel.less';
+@import './controls/ControlMatrix.less';
 @import './canvas/CanvasStack.less';
 @import './canvas/Stage.less';
 @import './canvas/LinkedCursor.less';

package/src/trial/Trial.annotations.persist.test.tsx

@@ -4,7 +4,8 @@
  * is written on a trailing debounce: a write per scene notification re-renders
  * every trial on every frame of a drag.
  */
-import { act, render, screen, waitFor } from '@testing-library/react';
+import { act, screen, waitFor } from '@testing-library/react';
+import { renderSettled } from '@weasel-js/react/testing/renderSettled';
 import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
 import { useAnnotations } from '../annotations/AnnotationsContext';
 import type { AnnotationsApi, SerializedAnnotations } from '../annotations/types';
@@ -83,7 +84,7 @@ const selfStoring = defineInstrument<Record<string, never>, Record<string, never
 
 async function mount(backing: Map<string, unknown>, which: InstrumentList[number] = inspector) {
   api = null;
-  const view = render(
+  const view = await renderSettled(
     <Lab
       instruments={[which]}
       defaultInstrument={which.name}
@@ -121,7 +122,10 @@ describe('a trial that persists its marks', () => {
   it('brings them back on a remount from the same storage', async () => {
     const backing = new Map<string, unknown>();
     const first = await mount(backing);
-    const id = marks().add(MARK, { angle: 12 });
+    let id = '';
+    act(() => {
+      id = marks().add(MARK, { angle: 12 });
+    });
     first.unmount();
     await waitFor(() => expect(storedTrial(backing)?.annotations).toBeDefined());
 
@@ -139,7 +143,9 @@ describe('a trial that persists its marks', () => {
     const backing = new Map<string, unknown>();
     await mount(backing);
     vi.useFakeTimers({ toFake: ['setTimeout', 'clearTimeout', 'Date'] });
-    marks().add(MARK);
+    act(() => {
+      marks().add(MARK);
+    });
     await act(() => vi.advanceTimersByTimeAsync(20));
     // Not a claim about either interval — a claim that a store write is not
     // synchronous with a scene notification.
@@ -151,8 +157,11 @@ describe('a trial that persists its marks', () => {
   it('flushes on unmount, so the last mark before a close is not lost', async () => {
     const backing = new Map<string, unknown>();
     const first = await mount(backing);
-    const id = marks().add(MARK);
-    marks().add({ ...MARK, frac: { x: 0.6, y: 0.6, w: 0.1, h: 0.1 } });
+    let id = '';
+    act(() => {
+      id = marks().add(MARK);
+      marks().add({ ...MARK, frac: { x: 0.6, y: 0.6, w: 0.1, h: 0.1 } });
+    });
     first.unmount();
     // Nothing was written before the unmount: neither debounce had elapsed.
     await waitFor(() => expect(storedTrial(backing)?.annotations).toBeDefined());
@@ -165,7 +174,9 @@ describe('a trial that persists its marks', () => {
   it('leaves the slot alone when the instrument owns the storage', async () => {
     const backing = new Map<string, unknown>();
     const first = await mount(backing, selfStoring);
-    marks().add(MARK);
+    act(() => {
+      marks().add(MARK);
+    });
     first.unmount();
     await waitFor(() => expect(owned?.version).toBe(1));
     await waitFor(() => expect(storedTrial(backing)).toBeDefined());
@@ -181,7 +192,7 @@ describe('a trial that persists its marks', () => {
     gate = new Promise((resolve) => {
       release = resolve;
     });
-    render(
+    await renderSettled(
       <Lab
         instruments={[selfStoring]}
         defaultInstrument="SelfStoring"
@@ -199,7 +210,7 @@ describe('a trial that persists its marks', () => {
     gate = new Promise((resolve) => {
       release = resolve;
     });
-    act(() => lab?.addTrial('SelfStoring'));
+    await act(async () => lab?.addTrial('SelfStoring'));
     expect(document.querySelectorAll('.lk-trial--loading')).toHaveLength(1);
     await act(async () => release());
     await waitFor(() => expect(screen.getAllByTestId('pane')).toHaveLength(2));

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

@@ -4,7 +4,8 @@
  * follow. The overlay's own geometry is covered in
  * `annotations/Annotations.overlay.test.tsx`.
  */
-import { act, fireEvent, render, screen, within } from '@testing-library/react';
+import { act, fireEvent, screen, within } from '@testing-library/react';
+import { renderSettled } from '@weasel-js/react/testing/renderSettled';
 import { beforeAll, describe, expect, it, vi } from 'vitest';
 import { useAnnotations, useAnnotationsOptional } from '../annotations/AnnotationsContext';
 import type { AnnotationsApi } from '../annotations/types';
@@ -53,8 +54,8 @@ const plain = defineInstrument<Record<string, never>, Record<string, never>>({
 });
 
 describe('an instrument that declares annotations', () => {
-  it('gets a drawing palette', () => {
-    render(<Lab instruments={[annotating]} defaultInstrument="Annotating" />);
+  it('gets a drawing palette', async () => {
+    await renderSettled(<Lab instruments={[annotating]} defaultInstrument="Annotating" />);
     for (const label of [
       'Interact',
       'Select',
@@ -69,7 +70,7 @@ describe('an instrument that declares annotations', () => {
     }
   });
 
-  it('gets only the tools it names', () => {
+  it('gets only the tools it names', async () => {
     const narrow = defineInstrument<Record<string, never>, Record<string, never>>({
       ...annotating,
       name: 'Narrow',
@@ -78,20 +79,20 @@ describe('an instrument that declares annotations', () => {
         tools: ['pointer', 'select'],
       },
     });
-    render(<Lab instruments={[narrow]} defaultInstrument="Narrow" />);
+    await renderSettled(<Lab instruments={[narrow]} defaultInstrument="Narrow" />);
     expect(screen.getByRole('button', { name: 'Interact' })).toBeTruthy();
     expect(screen.getByRole('button', { name: 'Select' })).toBeTruthy();
     expect(screen.queryByRole('button', { name: 'Freehand' })).toBeNull();
     expect(screen.queryByRole('button', { name: 'Rectangle' })).toBeNull();
   });
 
-  it('puts the store in reach of its own render', () => {
-    render(<Lab instruments={[annotating]} defaultInstrument="Annotating" />);
+  it('puts the store in reach of its own render', async () => {
+    await renderSettled(<Lab instruments={[annotating]} defaultInstrument="Annotating" />);
     expect(screen.getByTestId('pane').dataset.marks).toBe('0');
   });
 
-  it('starts in interact, so a first click reaches the instrument', () => {
-    render(<Lab instruments={[annotating]} defaultInstrument="Annotating" />);
+  it('starts in interact, so a first click reaches the instrument', async () => {
+    await renderSettled(<Lab instruments={[annotating]} defaultInstrument="Annotating" />);
     expect(screen.getByRole('button', { name: 'Interact' }).getAttribute('aria-current')).toBe(
       'true',
     );
@@ -112,28 +113,28 @@ function CaptureLab() {
 }
 
 describe('the annotation tool', () => {
-  it("is offered in the lab's rail, not in a trial's", () => {
-    render(<Lab instruments={[annotating]} defaultInstrument="Annotating" />);
+  it("is offered in the lab's rail, not in a trial's", async () => {
+    await renderSettled(<Lab instruments={[annotating]} defaultInstrument="Annotating" />);
     expect(screen.getAllByRole('button', { name: 'Rectangle' })).toHaveLength(1);
     const trial = screen.getByRole('region', { name: /trial/i });
     expect(within(trial).queryByRole('button', { name: 'Rectangle' })).toBeNull();
   });
 
-  it('is one tool across every trial', () => {
+  it('is one tool across every trial', async () => {
     // A tool is what the hand is holding, not a property of a picture: picking
     // Rectangle once has to arm it wherever the next mark is drawn.
     labRef = null;
-    render(
+    await renderSettled(
       <Lab instruments={[annotating]} defaultInstrument="Annotating">
         <CaptureLab />
       </Lab>,
     );
-    act(() => labRef?.addTrial('Annotating'));
+    await act(async () => labRef?.addTrial('Annotating'));
     const panes = screen.getAllByTestId('pane');
     expect(panes).toHaveLength(2);
     for (const p of panes) expect(p.dataset.tool).toBe('pointer');
 
-    act(() => {
+    await act(async () => {
       fireEvent.click(screen.getByRole('button', { name: 'Rectangle' }));
     });
     for (const p of screen.getAllByTestId('pane')) expect(p.dataset.tool).toBe('rect');
@@ -141,39 +142,39 @@ describe('the annotation tool', () => {
 });
 
 describe('the trial undo chrome over marks', () => {
-  it('gets undo and redo without the instrument declaring `undo`', () => {
+  it('gets undo and redo without the instrument declaring `undo`', async () => {
     // Weasel history is the authority for marks, so the capability that
     // creates them is what earns the buttons.
-    render(<Lab instruments={[annotating]} defaultInstrument="Annotating" />);
+    await renderSettled(<Lab instruments={[annotating]} defaultInstrument="Annotating" />);
     expect(screen.getByRole('button', { name: 'Undo' })).toBeTruthy();
     expect(screen.getByRole('button', { name: 'Redo' })).toBeTruthy();
   });
 
-  it('takes back a mark, and puts it back', () => {
-    render(<Lab instruments={[annotating]} defaultInstrument="Annotating" />);
+  it('takes back a mark, and puts it back', async () => {
+    await renderSettled(<Lab instruments={[annotating]} defaultInstrument="Annotating" />);
     const undo = screen.getByRole('button', { name: 'Undo' });
     expect(undo.getAttribute('aria-disabled') ?? undo.getAttribute('disabled')).not.toBeNull();
 
-    act(() => {
+    await act(async () => {
       marks().add({ target: 'pane', kind: 'rect', frac: { x: 0.1, y: 0.1, w: 0.2, h: 0.2 } });
     });
     expect(screen.getByTestId('pane').dataset.marks).toBe('1');
 
-    act(() => {
+    await act(async () => {
       fireEvent.click(screen.getByRole('button', { name: 'Undo' }));
     });
     expect(screen.getByTestId('pane').dataset.marks).toBe('0');
 
-    act(() => {
+    await act(async () => {
       fireEvent.click(screen.getByRole('button', { name: 'Redo' }));
     });
     expect(screen.getByTestId('pane').dataset.marks).toBe('1');
   });
 
-  it('lists the marks in a sidebar panel', () => {
-    render(<Lab instruments={[annotating]} defaultInstrument="Annotating" />);
+  it('lists the marks in a sidebar panel', async () => {
+    await renderSettled(<Lab instruments={[annotating]} defaultInstrument="Annotating" />);
     expect(screen.getByText('Marks')).toBeTruthy();
-    act(() => {
+    await act(async () => {
       marks().add({ target: 'pane', kind: 'line', frac: { x: 0, y: 0, w: 0.5, h: 0 } });
     });
     expect(screen.getAllByRole('listitem')).toHaveLength(1);
@@ -190,7 +191,7 @@ function GrowingPane({ n, grow }: { n: number; grow: () => void }) {
 }
 
 describe('targets that follow the trial state', () => {
-  it('reach a reader of the store once the change commits', () => {
+  it('reach a reader of the store once the change commits', async () => {
     // The store reads the committed state, so a reader rendering in the same
     // pass as the change sees the one before; the trial tells it to read again.
     const growing = defineInstrument<{ n: number }, Record<string, never>>({
@@ -209,9 +210,9 @@ describe('targets that follow the trial state', () => {
           })),
       },
     });
-    render(<Lab instruments={[growing]} defaultInstrument="Growing" />);
+    await renderSettled(<Lab instruments={[growing]} defaultInstrument="Growing" />);
     expect(screen.getByTestId('growing').dataset.targets).toBe('1');
-    act(() => {
+    await act(async () => {
       fireEvent.click(screen.getByTestId('growing'));
     });
     expect(screen.getByTestId('growing').textContent).toBe('2');
@@ -232,30 +233,34 @@ describe("the capability's selection mode", () => {
         ...(selection ? { selection } : {}),
       },
     });
-  const selectBoth = (): readonly string[] => {
-    const onA = marks().add({ target: 'a', kind: 'rect', frac: { x: 0, y: 0, w: 0.1, h: 0.1 } });
-    const onB = marks().add({ target: 'b', kind: 'rect', frac: { x: 0, y: 0, w: 0.1, h: 0.1 } });
-    act(() => marks().setSelection([onA, onB]));
-    return [onA, onB];
+  const selectBoth = async (): Promise<readonly string[]> => {
+    let both: [string, string] = ['', ''];
+    await act(async () => {
+      const onA = marks().add({ target: 'a', kind: 'rect', frac: { x: 0, y: 0, w: 0.1, h: 0.1 } });
+      const onB = marks().add({ target: 'b', kind: 'rect', frac: { x: 0, y: 0, w: 0.1, h: 0.1 } });
+      marks().setSelection([onA, onB]);
+      both = [onA, onB];
+    });
+    return both;
   };
 
-  it('keeps the selection to one target by default', () => {
-    render(<Lab instruments={[twoTargets()]} defaultInstrument="Two" />);
-    const [onA] = selectBoth();
+  it('keeps the selection to one target by default', async () => {
+    await renderSettled(<Lab instruments={[twoTargets()]} defaultInstrument="Two" />);
+    const [onA] = await selectBoth();
     expect(marks().selection()).toEqual([onA]);
   });
 
-  it("reaches the trial's store when the instrument asks for per-target", () => {
-    render(<Lab instruments={[twoTargets('per-target')]} defaultInstrument="Two" />);
+  it("reaches the trial's store when the instrument asks for per-target", async () => {
+    await renderSettled(<Lab instruments={[twoTargets('per-target')]} defaultInstrument="Two" />);
     expect(marks().selection()).toEqual([]);
-    const both = selectBoth();
+    const both = await selectBoth();
     expect(marks().selection()).toEqual(both);
   });
 });
 
 describe('an instrument that declares none', () => {
-  it('gets no store and no palette', () => {
-    render(<Lab instruments={[plain]} defaultInstrument="Plain" />);
+  it('gets no store and no palette', async () => {
+    await renderSettled(<Lab instruments={[plain]} defaultInstrument="Plain" />);
     expect(screen.getByTestId('plain').dataset.hasApi).toBe('false');
     expect(screen.queryByRole('button', { name: 'Rectangle' })).toBeNull();
   });

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

@@ -1,5 +1,6 @@
-import { render, screen } from '@testing-library/react';
+import { act, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { renderSettled } from '@weasel-js/react/testing/renderSettled';
 import { beforeAll, describe, expect, it, vi } from 'vitest';
 import { auto } from '../config/auto';
 import { f } from '../config/builder';
@@ -7,6 +8,9 @@ import { defineInstrument } from '../instrument/defineInstrument';
 import type { Instrument } from '../instrument/types';
 import { Lab } from '../lab/Lab';
 
+/** Waits one animation frame inside act, so what the frame loop sets commits there. */
+const nextFrame = () => act(() => new Promise((r) => requestAnimationFrame(() => r(null))));
+
 interface St {
   n: number;
 }
@@ -44,8 +48,8 @@ function makeInstrument(
 }
 
 describe('an instrument that draws', () => {
-  it('still renders its own DOM, as an overlay over the canvas', () => {
-    const { container } = render(
+  it('still renders its own DOM, as an overlay over the canvas', async () => {
+    const { container } = await renderSettled(
       <Lab instruments={[makeInstrument(() => undefined)]} defaultInstrument="Probe" />,
     );
     expect(screen.getByTestId('readout')).toHaveTextContent('n = 7');
@@ -57,8 +61,8 @@ describe('an instrument that draws', () => {
 
   it('draws with the camera applied, so world geometry lands where the view says', async () => {
     const draw = vi.fn();
-    render(<Lab instruments={[makeInstrument(draw)]} defaultInstrument="Probe" />);
-    await new Promise((r) => requestAnimationFrame(() => r(null)));
+    await renderSettled(<Lab instruments={[makeInstrument(draw)]} defaultInstrument="Probe" />);
+    await nextFrame();
 
     expect(draw).toHaveBeenCalled();
     expect(ctxSpies.translate).toHaveBeenCalledWith(30, 40);
@@ -67,8 +71,8 @@ describe('an instrument that draws', () => {
 
   it('passes zoom in the args so a layer can keep line widths unscaled', async () => {
     const draw = vi.fn();
-    render(<Lab instruments={[makeInstrument(draw)]} defaultInstrument="Probe" />);
-    await new Promise((r) => requestAnimationFrame(() => r(null)));
+    await renderSettled(<Lab instruments={[makeInstrument(draw)]} defaultInstrument="Probe" />);
+    await nextFrame();
 
     expect(draw).toHaveBeenCalledWith(
       expect.anything(),
@@ -93,10 +97,10 @@ describe('an auto config path', () => {
       render: () => null,
       canvas: { layers: [{ id: 'main', draw }] },
     });
-    const { container } = render(
+    const { container } = await renderSettled(
       <Lab instruments={[instrument as Instrument]} defaultInstrument="Auto" />,
     );
-    await new Promise((r) => requestAnimationFrame(() => r(null)));
+    await nextFrame();
 
     expect(draw).toHaveBeenCalledWith(
       expect.anything(),
@@ -111,11 +115,11 @@ describe('an auto config path', () => {
 });
 
 describe('LabProps.instruments', () => {
-  it('accepts a typed instrument with no cast', () => {
+  it('accepts a typed instrument with no cast', async () => {
     // The assignment is the assertion: this file fails to compile if
     // `defineInstrument<St, ...>`'s result stops being assignable.
     const typed = makeInstrument(() => undefined);
-    render(<Lab instruments={[typed]} defaultInstrument="Probe" />);
+    await renderSettled(<Lab instruments={[typed]} defaultInstrument="Probe" />);
     expect(screen.getByTestId('readout')).toBeInTheDocument();
   });
 
@@ -132,8 +136,8 @@ describe('LabProps.instruments', () => {
     const instrument = makeInstrument(vi.fn(), {
       worldSpec: { origin: { x: 0.5, y: 0.5 }, yAxis: 'up' },
     });
-    render(<Lab instruments={[instrument]} defaultInstrument="Probe" />);
-    await new Promise((r) => requestAnimationFrame(() => r(null)));
+    await renderSettled(<Lab instruments={[instrument]} defaultInstrument="Probe" />);
+    await nextFrame();
 
     // Origin (400,300) plus the instrument's pan (30,40); y runs up.
     expect(ctxSpies.translate).toHaveBeenCalledWith(430, 340);
@@ -156,9 +160,9 @@ describe('LabProps.instruments', () => {
         pan: { x: width / 4, y: height / 4 },
       }),
     });
-    render(<Lab instruments={[instrument]} defaultInstrument="Probe" />);
-    await new Promise((r) => requestAnimationFrame(() => r(null)));
-    await new Promise((r) => requestAnimationFrame(() => r(null)));
+    await renderSettled(<Lab instruments={[instrument]} defaultInstrument="Probe" />);
+    await nextFrame();
+    await nextFrame();
 
     expect(ctxSpies.translate).toHaveBeenCalledWith(200, 150);
     vi.restoreAllMocks();
@@ -182,7 +186,7 @@ describe('LabProps.instruments', () => {
       },
       layers: { ids: ['grid', 'glyph'] },
     });
-    render(<Lab instruments={[instrument]} defaultInstrument="Probe" />);
+    await renderSettled(<Lab instruments={[instrument]} defaultInstrument="Probe" />);
     expect([...seen]).toEqual(['grid', 'glyph']);
 
     await userEvent.click(screen.getByRole('checkbox', { name: 'Show grid' }));

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

@@ -1,4 +1,5 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, screen } from '@testing-library/react';
+import { renderSettled } from '@weasel-js/react/testing/renderSettled';
 import { describe, expect, it } from 'vitest';
 import { auto } from '../config/auto';
 import { f } from '../config/builder';
@@ -27,19 +28,19 @@ const legacyInstrument = defineInstrument({
 });
 
 describe('a trial renders its instrument config', () => {
-  it('renders a builder schema into the settings sidebar', () => {
-    render(<Lab instruments={[schemaInstrument]} defaultInstrument="Schema" />);
+  it('renders a builder schema into the settings sidebar', async () => {
+    await renderSettled(<Lab instruments={[schemaInstrument]} defaultInstrument="Schema" />);
     expect(screen.getByLabelText('Show grid')).toBeInTheDocument();
     expect(screen.getByText('Grid spacing')).toBeInTheDocument();
   });
 
-  it('renders a legacy ConfigField list through the same path', () => {
-    render(<Lab instruments={[legacyInstrument]} defaultInstrument="Legacy" />);
+  it('renders a legacy ConfigField list through the same path', async () => {
+    await renderSettled(<Lab instruments={[legacyInstrument]} defaultInstrument="Legacy" />);
     expect(screen.getByLabelText('Show grid')).toBeInTheDocument();
   });
 
-  it('writes a config change back to the trial', () => {
-    render(<Lab instruments={[schemaInstrument]} defaultInstrument="Schema" />);
+  it('writes a config change back to the trial', async () => {
+    await renderSettled(<Lab instruments={[schemaInstrument]} defaultInstrument="Schema" />);
     const checkbox = screen.getByLabelText('Show grid') as HTMLInputElement;
     expect(checkbox.checked).toBe(true);
     fireEvent.click(checkbox);
@@ -48,7 +49,7 @@ describe('a trial renders its instrument config', () => {
 });
 
 describe('lab-wide config seams', () => {
-  it('applies a lab-wide rule before labkit inference', () => {
+  it('applies a lab-wide rule before labkit inference', async () => {
     const inst = defineInstrument({
       name: 'Ruled',
       config: f.schema({ tintColor: f.value('#ffffff') }),
@@ -56,22 +57,24 @@ describe('lab-wide config seams', () => {
       render: () => null,
     });
     const colorByName: ConfigRule = (ctx) => (ctx.key.endsWith('Color') ? { kind: 'color' } : null);
-    render(<Lab instruments={[inst]} defaultInstrument="Ruled" configRules={[colorByName]} />);
+    await renderSettled(
+      <Lab instruments={[inst]} defaultInstrument="Ruled" configRules={[colorByName]} />,
+    );
     expect(screen.getByLabelText('Tint color')).toHaveAttribute('type', 'color');
   });
 
-  it('without the rule the same leaf falls back to a text input', () => {
+  it('without the rule the same leaf falls back to a text input', async () => {
     const inst = defineInstrument({
       name: 'Unruled',
       config: f.schema({ tintColor: f.value('#ffffff') }),
       initialState: () => ({}),
       render: () => null,
     });
-    render(<Lab instruments={[inst]} defaultInstrument="Unruled" />);
+    await renderSettled(<Lab instruments={[inst]} defaultInstrument="Unruled" />);
     expect(screen.getByLabelText('Tint color')).toHaveAttribute('type', 'text');
   });
 
-  it('supplies a lab-wide control for a kind labkit does not ship', () => {
+  it('supplies a lab-wide control for a kind labkit does not ship', async () => {
     const inst = defineInstrument({
       name: 'Custom',
       config: f.schema({ offset: f.custom('vector2', { x: 3 }) }),
@@ -81,29 +84,31 @@ describe('lab-wide config seams', () => {
     const vector2: ControlRenderer = (ctx) => (
       <span>vec:{String((ctx.value as { x: number }).x)}</span>
     );
-    render(<Lab instruments={[inst]} defaultInstrument="Custom" controls={{ vector2 }} />);
+    await renderSettled(
+      <Lab instruments={[inst]} defaultInstrument="Custom" controls={{ vector2 }} />,
+    );
     expect(screen.getByText('vec:3')).toBeInTheDocument();
   });
 
-  it('shows the placeholder when no control is supplied for that kind', () => {
+  it('shows the placeholder when no control is supplied for that kind', async () => {
     const inst = defineInstrument({
       name: 'Unwired',
       config: f.schema({ offset: f.custom('vector2', { x: 3 }) }),
       initialState: () => ({}),
       render: () => null,
     });
-    render(<Lab instruments={[inst]} defaultInstrument="Unwired" />);
+    await renderSettled(<Lab instruments={[inst]} defaultInstrument="Unwired" />);
     expect(screen.getByText(/vector2/)).toBeInTheDocument();
   });
 
-  it('omits the settings section for an instrument with no config', () => {
+  it('omits the settings section for an instrument with no config', async () => {
     const inst = defineInstrument({
       name: 'Bare',
       defaultConfig: () => ({}),
       initialState: () => ({}),
       render: () => null,
     });
-    render(<Lab instruments={[inst]} defaultInstrument="Bare" />);
+    await renderSettled(<Lab instruments={[inst]} defaultInstrument="Bare" />);
     expect(screen.queryByText('Settings')).not.toBeInTheDocument();
   });
 });
@@ -129,9 +134,9 @@ describe('a nested config value, end to end', () => {
     return { instrument, seen };
   };
 
-  it('renders a nested leaf and writes the change back into the tree', () => {
+  it('renders a nested leaf and writes the change back into the tree', async () => {
     const { instrument } = nestedInstrument();
-    render(<Lab instruments={[instrument]} defaultInstrument="Nested" />);
+    await renderSettled(<Lab instruments={[instrument]} defaultInstrument="Nested" />);
     expect(screen.getByText('20')).toBeInTheDocument();
     fireEvent.change(screen.getByLabelText('Cell size'), {
       target: { value: '40' },
@@ -139,9 +144,9 @@ describe('a nested config value, end to end', () => {
     expect(screen.getByText('40')).toBeInTheDocument();
   });
 
-  it('hands onConfigChange the whole tree, with the sibling branch intact', () => {
+  it('hands onConfigChange the whole tree, with the sibling branch intact', async () => {
     const { instrument, seen } = nestedInstrument();
-    render(<Lab instruments={[instrument]} defaultInstrument="Nested" />);
+    await renderSettled(<Lab instruments={[instrument]} defaultInstrument="Nested" />);
     fireEvent.change(screen.getByLabelText('Cell size'), {
       target: { value: '40' },
     });
@@ -186,22 +191,22 @@ describe('a config written as auto', () => {
     return { instrument, seen };
   };
 
-  it('hands onConfigChange the resolved config, never the sentinel', () => {
+  it('hands onConfigChange the resolved config, never the sentinel', async () => {
     const { instrument, seen } = unpinnable();
-    render(<Lab instruments={[instrument]} defaultInstrument="Unpinnable" />);
+    await renderSettled(<Lab instruments={[instrument]} defaultInstrument="Unpinnable" />);
     fireEvent.click(screen.getByText('unpin gap'));
     expect(seen.at(-1)?.config).toEqual({ width: 432, gap: 18 });
     expect(seen.at(-1)?.prev).toEqual({ width: 432, gap: 12 });
   });
 
-  it('keeps the state that write derived free of the sentinel', () => {
+  it('keeps the state that write derived free of the sentinel', async () => {
     const { instrument } = unpinnable();
-    render(<Lab instruments={[instrument]} defaultInstrument="Unpinnable" />);
+    await renderSettled(<Lab instruments={[instrument]} defaultInstrument="Unpinnable" />);
     fireEvent.click(screen.getByText('unpin gap'));
     expect(screen.getByText('18')).toBeInTheDocument();
   });
 
-  it("shows the trial's unpinned path in the settings panel", () => {
+  it("shows the trial's unpinned path in the settings panel", async () => {
     const instrument = defineInstrument({
       name: 'Ghosted',
       config: f.schema({
@@ -215,7 +220,9 @@ describe('a config written as auto', () => {
       initialState: () => ({}),
       render: () => null,
     });
-    const { container } = render(<Lab instruments={[instrument]} defaultInstrument="Ghosted" />);
+    const { container } = await renderSettled(
+      <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. An auto row holds what the resolver decided rather than