@weasel-js/labkit 1.6.0 → 1.7.0

package/src/controls/ControlPanel.test.tsx

@@ -1,6 +1,7 @@
 import { act, fireEvent, render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { TOOL_PREF_KINDS, type ToolPrefKind } from '@weasel-js/core';
+import { compact } from '@weasel-js/quantity';
 import type { PrefLeaf } from '@weasel-js/ui';
 import { useState } from 'react';
 import { afterEach, describe, expect, it, vi } from 'vitest';
@@ -88,7 +89,7 @@ describe('<ControlPanel> number', () => {
     ];
     render(<ControlPanel fields={fields} config={{ n: 42 }} setConfig={vi.fn()} />);
     const input = screen.getByLabelText('N') as HTMLInputElement;
-    expect(input.type).toBe('number');
+    expect(input).toHaveAttribute('role', 'spinbutton');
     expect(input.value).toBe('42');
   });
 
@@ -143,7 +144,7 @@ describe('<ControlPanel> color', () => {
     const input = screen.getByLabelText('Color') as HTMLInputElement;
     expect(input.type).toBe('color');
     expect(input.value).toBe('#ff0000');
-    fireEvent.change(input, { target: { value: '#00ff00' } });
+    fireEvent.input(input, { target: { value: '#00ff00' } });
     expect(setConfig).toHaveBeenCalledWith('c', '#00ff00');
   });
 });
@@ -206,7 +207,7 @@ describe('<ControlPanel> schema', () => {
       [],
     );
     render(<ControlPanel schema={schema} config={{ a: 5, b: 5 }} setConfig={vi.fn()} />);
-    expect(screen.getByLabelText('B')).toHaveAttribute('type', 'number');
+    expect(screen.getByLabelText('B')).toHaveAttribute('role', 'spinbutton');
   });
 
   it('falls back to the leaf default when config holds no value', () => {
@@ -372,6 +373,7 @@ describe('<ControlPanel> built-in kind coverage', () => {
     sections: [],
     showIf: new Map(),
     renderers: {},
+    dialogs: {},
   });
 
   it('declines paint and object with a named row rather than a blank one', () => {
@@ -465,7 +467,7 @@ describe('<ControlPanel> suffix', () => {
 
   it('suffixes a typed number with the suffix the leaf declares', () => {
     const { container } = panel(f.number(20).input().suffix('px'));
-    expect(container.querySelector('input[type="number"]')).not.toBeNull();
+    expect(container.querySelector('input[role="spinbutton"]')).not.toBeNull();
     expect(container.textContent).toContain('px');
   });
 });
@@ -475,7 +477,7 @@ describe('<ControlPanel> format', () => {
     render(
       <ControlPanel
         schema={resolveConfigSchema(
-          f.schema({ glyphs: f.number(0).range(0, 2_000_000).format('compact') }),
+          f.schema({ glyphs: f.number(0).range(0, 2_000_000).display(compact()) }),
           [],
         )}
         config={{ glyphs: 2_000_000 }}
@@ -897,6 +899,28 @@ describe('<ControlPanel> auto', () => {
   });
 });
 
+describe('<ControlPanel> option icons', () => {
+  it("draws an option's icon in its segment and keeps the label as its name", () => {
+    const status = f
+      .enum('ok', [
+        { value: 'ok', label: 'ok', icon: 'statusSuccess' },
+        { value: 'bad', label: 'bad' },
+      ])
+      .radio();
+    render(
+      <ControlPanel
+        schema={resolveConfigSchema(f.schema({ status }), [])}
+        config={{ status: 'ok' }}
+        setConfig={() => {}}
+      />,
+    );
+    const ok = screen.getByRole('radio', { name: 'ok' });
+    expect(ok.querySelector('svg')).not.toBeNull();
+    expect(ok.textContent).toBe('');
+    expect(screen.getByRole('radio', { name: 'bad' }).textContent).toBe('bad');
+  });
+});
+
 describe('<ControlPanel> pair', () => {
   const paired = () =>
     resolveConfigSchema(
@@ -912,8 +936,8 @@ describe('<ControlPanel> pair', () => {
   it('draws two leaves sharing a pair id as one row named by the pair', () => {
     render(<ControlPanel schema={paired()} config={config} setConfig={vi.fn()} />);
     const row = screen.getByText('Offset').closest('div') as HTMLElement;
-    expect(within(row).getByLabelText('X')).toHaveValue(10);
-    expect(within(row).getByLabelText('Y')).toHaveValue(20);
+    expect(within(row).getByLabelText('X')).toHaveValue('10');
+    expect(within(row).getByLabelText('Y')).toHaveValue('20');
   });
 
   it('captions each cell of a pair with its own name, so a paired switch is not left unnamed', () => {
@@ -951,7 +975,7 @@ describe('<ControlPanel> pair', () => {
     render(<ControlPanel schema={paired()} config={config} setConfig={vi.fn()} />);
     const row = screen.getByText('Offset').closest('div') as HTMLElement;
     expect(within(row).queryByLabelText('Scale')).toBeNull();
-    expect(screen.getByLabelText('Scale')).toHaveValue(1);
+    expect(screen.getByLabelText('Scale')).toHaveValue('1');
   });
 });
 
@@ -1044,18 +1068,18 @@ describe('<ControlPanel> color alpha', () => {
   it('splits the stored hex into a swatch and an alpha track', () => {
     panel();
     expect((screen.getByLabelText('Tint') as HTMLInputElement).value).toBe('#336699');
-    expect((screen.getByLabelText('Tint opacity') as HTMLInputElement).value).toBe('0.8');
+    expect((screen.getByLabelText('Tint opacity') as HTMLInputElement).value).toBe('80');
   });
 
   it('keeps the stored alpha when the swatch moves', () => {
     const setConfig = panel();
-    fireEvent.change(screen.getByLabelText('Tint'), { target: { value: '#00ff00' } });
+    fireEvent.input(screen.getByLabelText('Tint'), { target: { value: '#00ff00' } });
     expect(setConfig).toHaveBeenCalledWith('tint', '#00ff00cc');
   });
 
   it('keeps the stored color when the alpha track moves', () => {
     const setConfig = panel();
-    fireEvent.change(screen.getByLabelText('Tint opacity'), { target: { value: '0.5' } });
+    fireEvent.input(screen.getByLabelText('Tint opacity'), { target: { value: '50' } });
     expect(setConfig).toHaveBeenCalledWith('tint', '#33669980');
   });
 
@@ -1075,14 +1099,23 @@ describe('<ControlPanel> title, stance and tone', () => {
   const fields: ConfigField[] = [{ key: 'on', label: 'On', type: 'checkbox', default: true }];
 
   it('renders the bare list when given none of them', () => {
-    const { container } = render(<ControlPanel fields={fields} config={{ on: true }} setConfig={vi.fn()} />);
+    const { container } = render(
+      <ControlPanel fields={fields} config={{ on: true }} setConfig={vi.fn()} />,
+    );
     expect(container.firstElementChild?.classList.contains('lk-control-panel')).toBe(true);
     expect(container.querySelector('[data-stance], h2')).toBeNull();
   });
 
   it('wraps its rows in a panel carrying them when asked', () => {
     const { container } = render(
-      <ControlPanel title="View" stance="scope" tone={1} fields={fields} config={{ on: true }} setConfig={vi.fn()} />,
+      <ControlPanel
+        title="View"
+        stance="scope"
+        tone={1}
+        fields={fields}
+        config={{ on: true }}
+        setConfig={vi.fn()}
+      />,
     );
     const panel = container.firstElementChild as HTMLElement;
     expect(panel.dataset.stance).toBe('scope');
@@ -1091,3 +1124,33 @@ describe('<ControlPanel> title, stance and tone', () => {
     expect(panel.querySelector('.lk-control-panel')).not.toBeNull();
   });
 });
+
+describe('<ControlPanel> resettable group', () => {
+  const schema = resolveConfigSchema(
+    f.schema({
+      name: f.string('a'),
+      modes: f.group({ one: f.number(0), two: f.number(0), inner: f.group({ three: f.number(1) }) }).resettable(),
+      plain: f.group({ four: f.number(0) }),
+    }),
+  );
+
+  it('puts a reset button on the group heading, disabled while nothing has changed', () => {
+    render(
+      <ControlPanel schema={schema} config={{ name: 'a', modes: { one: 0, two: 0, inner: { three: 1 } }, plain: { four: 0 } }} setConfig={vi.fn()} />,
+    );
+    expect(screen.getByRole('button', { name: 'Reset Modes' })).toBeDisabled();
+    expect(screen.queryByRole('button', { name: 'Reset Plain' })).toBeNull();
+  });
+
+  it('writes the default of every changed value beneath the group and nothing else', () => {
+    const setConfig = vi.fn();
+    render(
+      <ControlPanel schema={schema} config={{ name: 'b', modes: { one: 2, two: 0, inner: { three: 5 } }, plain: { four: 3 } }} setConfig={setConfig} />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Reset Modes' }));
+    expect(setConfig.mock.calls).toEqual([
+      ['modes.one', 0],
+      ['modes.inner.three', 1],
+    ]);
+  });
+});

package/src/controls/ControlPanel.tsx

@@ -1,13 +1,14 @@
 import { getAlpha01, isBuiltinToolPref, toHex8, withAlpha01 } from '@weasel-js/core';
 import {
+  Button,
   DialogRow,
   isPrefLeaf,
   ListEditor,
   type PrefGroup,
   type PrefLeaf,
   type PropertyAlign,
-  type PropertyControlProps,
   PropertyControl,
+  type PropertyControlProps,
   type PropertyDensity,
   PropertyField,
   PropertyGroup,
@@ -17,6 +18,7 @@ import {
   PropertyRow,
   type PropertyRowLayout,
   prefFieldProps,
+  ResetIcon,
   type StanceProps,
 } from '@weasel-js/ui';
 import { Fragment, type ReactNode, useEffect, useMemo, useRef, useState } from 'react';
@@ -26,7 +28,7 @@ import { fromConfigFields } from '../config/fromConfigField';
 import { schemaNodeAtPath, valueAtPath } from '../config/path';
 import type { ControlRenderer, ResolvedConfig, SectionSpec } from '../config/types';
 import { isLeafVisible } from '../config/visible';
-import { summarizeValue } from './inDialog';
+import { inDialog, summarizeValue } from './inDialog';
 import type { ConfigField } from './types';
 
 /** How a panel packs its rows into the two-column property grid.
@@ -117,6 +119,45 @@ export interface ControlPanelProps<TC extends Record<string, unknown>> extends S
 
 const NO_AUTO: ReadonlySet<string> = new Set();
 
+/** Every leaf beneath a group, as its dotted path and its default. */
+function leavesUnder(group: PrefGroup, at: string): [string, unknown][] {
+  return Object.entries(group.children).flatMap(([key, child]) => {
+    const path = at === '' ? key : `${at}.${key}`;
+    return isPrefLeaf(child) ? [[path, child.default] as [string, unknown]] : leavesUnder(child, path);
+  });
+}
+
+/** The heading button of a `.resettable()` group: writes each changed leaf's
+ *  default, and is disabled while nothing has changed. */
+function ResetGroup({
+  group,
+  path,
+  config,
+  setConfig,
+}: {
+  group: PrefGroup;
+  path: string;
+  config: Record<string, unknown>;
+  setConfig: (path: string, value: unknown) => void;
+}) {
+  const changed = leavesUnder(group, path).filter(([p, d]) => !Object.is(valueAtPath(config, p), d));
+  return (
+    <Button
+      iconOnly
+      variant="ghost"
+      size="sm"
+      ariaLabel={`Reset ${group.name}`}
+      tooltip={`Reset ${group.name} to defaults`}
+      disabled={changed.length === 0}
+      onClick={() => {
+        for (const [p, d] of changed) setConfig(p, d);
+      }}
+    >
+      <ResetIcon />
+    </Button>
+  );
+}
+
 /** Render an instrument's config schema as a stack of controls, each writing
  *  back through `setConfig`. Built on the property rows, so a lab's controls
  *  are the same aligned, themed rows the rest of the kit uses. */
@@ -224,6 +265,11 @@ export function ControlPanel<TC extends Record<string, unknown>>({
         // two-column grid leaves it laying its own rows out inside a cell,
         // which overlaps them.
         span
+        actions={
+          resolved.resettable?.has(path) ? (
+            <ResetGroup group={found} path={path} config={config as Record<string, unknown>} setConfig={setConfig} />
+          ) : undefined
+        }
         {...fold(path, undefined, rows.grid)}
       >
         {body(found, path, rows)}
@@ -243,7 +289,13 @@ export function ControlPanel<TC extends Record<string, unknown>>({
     if (pair === undefined) return undefined;
     if (!isLeafVisible(resolved, path, config as Record<string, unknown>, showHidden))
       return undefined;
-    if (renderers?.[path] ?? resolved.renderers[path] ?? renderers?.[found.kind]) return undefined;
+    if (
+      renderers?.[path] ??
+      resolved.renderers[path] ??
+      resolved.dialogs[path] ??
+      renderers?.[found.kind]
+    )
+      return undefined;
     if (!isBuiltinToolPref(found)) return undefined;
     if (found.kind === 'paint' || found.kind === 'object' || isSliderLeaf(found)) return undefined;
     return { leaf: found, pair };
@@ -405,8 +457,13 @@ function ControlRow<TC extends Record<string, unknown>>({
   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.
-  const custom = renderers?.[path] ?? resolved.renderers[path] ?? renderers?.[leaf.kind];
+  // instrument's: controls[path] -> node .render/.dialog -> controls[kind] -> built-in.
+  const dialog = resolved.dialogs[path];
+  const custom =
+    renderers?.[path] ??
+    resolved.renderers[path] ??
+    (dialog ? inDialog(dialog.body, dialog) : undefined) ??
+    renderers?.[leaf.kind];
   // A custom row places itself like any other; one that needs the full width
   // says so with `<PropertyRow span>`, which is the same opt-out a built-in has.
   if (custom) return custom({ path, pref: leaf, value, setValue: write, auto: isAutoRow, setAuto });
@@ -442,14 +499,15 @@ function ControlRow<TC extends Record<string, unknown>>({
   }
 
   const field = labField(leaf, value, write);
-  if (field === null) return <UnwiredRow label={label} kind={leaf.kind} description={description} />;
+  if (field === null)
+    return <UnwiredRow label={label} kind={leaf.kind} description={description} />;
   switch (field.kind) {
     case 'string':
       return <DebouncedTextRow leaf={leaf} field={field} span={wide} {...row} />;
     case 'number':
       return <PropertyField {...field} {...row} span={field.control === 'slider' && wide} />;
     case 'enum':
-      return <PropertyField {...field} {...row} span={field.control === 'radio' && wide} />;
+      return <PropertyField {...field} {...row} span={field.control === 'toggle' && wide} />;
     default:
       return <PropertyField {...field} {...row} />;
   }
@@ -479,9 +537,16 @@ function labField(
         unit: extra<string>(leaf, 'suffix') ?? field.unit,
       };
     case 'boolean':
-      return { ...field, control: extra<string>(leaf, 'control') === 'switch' ? 'switch' : 'checkbox' };
+      return {
+        ...field,
+        control: extra<string>(leaf, 'control') === 'switch' ? 'switch' : 'checkbox',
+      };
     case 'enum':
-      return { ...field, control: extra<string>(leaf, 'control') === 'radio' ? 'radio' : 'select' };
+      // `.radio()` asks for every option at once, as segments.
+      return {
+        ...field,
+        control: extra<string>(leaf, 'control') === 'radio' ? 'toggle' : 'select',
+      };
     case 'string':
       return {
         ...field,
@@ -605,7 +670,9 @@ function PairCell({
   if (field === null) return null;
   switch (field.kind) {
     case 'string':
-      return <PropertyControl {...field} name={leaf.name} value={text.local} onChange={text.type} />;
+      return (
+        <PropertyControl {...field} name={leaf.name} value={text.local} onChange={text.type} />
+      );
     case 'number':
       // The pair names the row, so a cell has no room for a unit.
       return <PropertyControl {...field} name={leaf.name} control="input" unit={undefined} />;
@@ -618,7 +685,9 @@ function PairCell({
           {...field}
           name={leaf.name}
           alpha={undefined}
-          onChange={(rgb: string) => write(field.alpha ? withAlpha01(rgb, getAlpha01(stored)) : rgb)}
+          onChange={(rgb: string) =>
+            write(field.alpha ? withAlpha01(rgb, getAlpha01(stored)) : rgb)
+          }
         />
       );
     }

package/src/controls/inDialog.test.tsx

@@ -69,6 +69,24 @@ describe('.dialog', () => {
     render(<Panel schema={schema} />);
     expect(screen.getByRole('button', { name: 'Edit Pts' }).textContent).toContain('3 points');
   });
+
+  it('gives way to a later .render, and takes over from an earlier one', () => {
+    const schema = f.schema({
+      a: f
+        .string('x')
+        .dialog(() => null)
+        .render(() => <span>row a</span>),
+      b: f
+        .string('y')
+        .render(() => <span>row b</span>)
+        .dialog(() => null),
+    });
+    render(<Panel schema={schema} />);
+    expect(screen.getByText('row a')).toBeTruthy();
+    expect(screen.queryByRole('button', { name: 'Edit A' })).toBeNull();
+    expect(screen.queryByText('row b')).toBeNull();
+    expect(screen.getByRole('button', { name: 'Edit B' })).toBeTruthy();
+  });
 });
 
 describe('summarizeValue', () => {

package/src/controls/inDialog.tsx

@@ -1,15 +1,7 @@
 import { DialogRow } from '@weasel-js/ui';
-import type { ReactNode } from 'react';
-import type { ControlRenderer } from '../config/types';
+import type { ControlRenderer, InDialogOptions } from '../config/types';
 
-/** Options for {@link inDialog}. */
-export interface InDialogOptions {
-  /** What the row's button shows of the value. Defaults to a list joined with
-   *  commas, or the value itself. */
-  summary?: (value: unknown) => ReactNode;
-  /** The dialog's heading. Defaults to the row's label. */
-  title?: ReactNode;
-}
+export type { InDialogOptions };
 
 /** The one-line summary a dialog row shows when it is given none. */
 export function summarizeValue(value: unknown): string {

package/src/index.test.ts

@@ -72,7 +72,7 @@ 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.usePanZoom).toBe('function');
+    expect(typeof kit.CameraInput).toBe('function');
     expect(typeof kit.useJob).toBe('function');
     expect(typeof kit.as2DView).toBe('function');
     expect(kit.SurfaceContext).toBeDefined();

package/src/index.ts

@@ -1,4 +1,4 @@
-// The property-panel family, LayerList, Input, Select, TokenPanel, ToggleBar and Button live in
+// The property-panel family, DetailList, LayerList, Input, Select, TokenPanel, ToggleBar and Button live in
 // `@weasel-js/ui`; labkit re-exports them so chrome built on labkit needs no
 // direct ui dependency. Named, not `export *` — a star re-export of an external
 // package emits no binding in the bundle.
@@ -10,6 +10,11 @@ export type {
   ButtonVariant,
   CurveFieldProps,
   CurveMark,
+  DetailListLayout,
+  DetailListProps,
+  DetailListValues,
+  DetailRowProps,
+  DetailRowStatus,
   IconProps,
   InputProps,
   JogProps,
@@ -41,6 +46,8 @@ export {
   CloseIcon,
   CollapseIcon,
   CurveField,
+  DetailList,
+  DetailRow,
   ExpandIcon,
   Icon,
   Input,
@@ -79,6 +86,7 @@ export type {
   AnnotationsCapability,
   AnnotationTarget,
   AnnotationTargetInfo,
+  AnnotationToolId,
   CaptureDeps,
   CaptureOptions,
   CaptureResult,
@@ -129,29 +137,37 @@ export {
 export type { ContentSize, PaneSize } from './annotations/view';
 export { fitView, fromWeaselView, toWeaselView } from './annotations/view';
 export type {
+  CameraContextValue,
+  CameraRegistry,
+  CameraView,
   CanvasLayerDescriptor,
   CanvasStackContextValue,
   CanvasStackProps,
   CanvasStackSurface,
-  PanZoomHandlers,
   StageProps,
-  UsePanZoomOptions,
   ViewportSize,
   WorldFrame,
   WorldSpec,
   ZoomAtOptions,
+  ZoomRange,
 } from './canvas';
 export {
   applyCamera,
+  CameraContext,
+  CameraInput,
+  CameraPublishContext,
+  CameraRegistryContext,
+  CameraScope,
   CanvasStack,
   CanvasStackContext,
   centerOn,
+  createCameraRegistry,
   DEFAULT_FRAME,
   fitStage,
   resolveFrame,
   Stage,
   screenToWorld,
-  usePanZoom,
+  usePublishCamera,
   worldToScreen,
   zoomAt,
 } from './canvas';
@@ -173,7 +189,6 @@ export {
   ValueNode,
 } from './config/builder';
 export { fromConfigFields } from './config/fromConfigField';
-export { type SectionTree, sectionTree } from './config/sectionTree';
 export {
   fillConfigDefaults,
   hasConfigPath,
@@ -183,6 +198,7 @@ export {
 } from './config/path';
 export { resolveConfigSchema } from './config/resolve';
 export { applyRules, builtinRules, titleCase } from './config/rules';
+export { type SectionTree, sectionTree } from './config/sectionTree';
 export type {
   Annotations,
   BranchAnnotations,
@@ -198,12 +214,14 @@ export type {
   ConfigSchema,
   ConfigShape,
   ControlRenderer,
+  DialogSpec,
   EntryValue,
   InferConfig,
   LeafPatch,
   NodeOptions,
   NodeValue,
   ResolvedConfig,
+  SectionOption,
   SectionSpec,
   ValueAtPath,
 } from './config/types';

package/src/instrument/SineWave.smoke.test.tsx

@@ -1,4 +1,5 @@
 import { render } from '@testing-library/react';
+import { createPointerStore } from '@weasel-js/core';
 import type { ReactElement } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import { DEFAULT_VIEW } from '../state/view';
@@ -94,6 +95,7 @@ describe('SineWave instrument smoke test', () => {
         setZoom: vi.fn(),
         activeToolId: null,
         visibleLayers: [],
+        pointer: createPointerStore(),
       },
       emit: vi.fn(),
     };

package/src/instrument/types.ts

@@ -1,3 +1,4 @@
+import type { PointerContextValue } from '@weasel-js/core';
 import type { ReactNode } from 'react';
 import type { AnnotationsCapability } from '../annotations/types';
 import type { ViewportSize, WorldSpec } from '../canvas/worldSpec';
@@ -33,6 +34,14 @@ export interface RenderContext<TS = unknown, TC = unknown> {
      *  hidden layer's `draw`, so this is the only way to know what was
      *  painted — a legend listing rows the view did not draw needs it. */
     visibleLayers: readonly string[];
+    /**
+     * Where the pointer is over this trial, in the instrument's world:
+     * `get()` answers `{ worldX, worldY, viewId }`, where `viewId` is
+     * `'stage'` over the trial's own camera and `'overview'` over its
+     * `<TrialOverview>`, or `null` when it is over neither. A key handler
+     * reading it works over either view.
+     */
+    pointer: PointerContextValue;
   };
   emit: (event: string) => void;
   /** Present only when the instrument declares a `job`. */
@@ -61,7 +70,7 @@ export interface CanvasCapability<TS = unknown, TC = unknown> {
    *  size, so an instrument can frame content it can only place in terms of
    *  the viewport; until then the trial's view is `null`. */
   initialView?: ViewTransform | ((size: ViewportSize) => ViewTransform);
-  /** Widens `usePanZoom`'s default clamp; the opening zoom stays reachable
+  /** Widens the camera's default zoom clamp; the opening zoom stays reachable
    *  regardless of these. */
   minZoom?: number;
   maxZoom?: number;

package/src/lab/Lab.nebula.test.tsx

@@ -19,12 +19,21 @@ const backdrop = (container: HTMLElement) =>
 
 describe('<Lab nebula>', () => {
   it('draws one blob per literal color', () => {
-    const { container } = render(<Lab instruments={[bare]} defaultInstrument="Bare" mode="dark" nebula={['#ff0000', '#00ff00']} />);
+    const { container } = render(
+      <Lab
+        instruments={[bare]}
+        defaultInstrument="Bare"
+        mode="dark"
+        nebula={['#ff0000', '#00ff00']}
+      />,
+    );
     expect(backdrop(container).match(/radial-gradient/g)).toHaveLength(3);
   });
 
   it('resolves a theme ramp against the lab’s theme', () => {
-    const { container } = render(<Lab instruments={[bare]} defaultInstrument="Bare" mode="dark" nebula={{ ramp: 'swatch' }} />);
+    const { container } = render(
+      <Lab instruments={[bare]} defaultInstrument="Bare" mode="dark" nebula={{ ramp: 'swatch' }} />,
+    );
     const sky = resolveTheme(interstellarTheme, { mode: 'dark' })['--wzl-swatch-sky'];
     expect(backdrop(container)).toContain(sky);
   });

package/src/lab/Lab.test.tsx

@@ -165,7 +165,9 @@ describe('<Lab>', () => {
       storageKey: 's',
     });
     await waitFor(() => expect(labRef?.trials[0]).toBeDefined());
-    expect((labRef?.trials[0]?.state as { seen: Set<string> }).seen).toEqual(new Set(['a']));
+    expect((labRef?.trials[0]?.state as { seen: Set<string> } | undefined)?.seen).toEqual(
+      new Set(['a']),
+    );
   });
 });