@weasel-js/labkit 1.4.4 → 1.5.1

package/src/fake-indexeddb-auto.d.ts

@@ -0,0 +1,5 @@
+// fake-indexeddb's `./auto` export declares no `types` condition, so under
+// `moduleResolution: Bundler` tsc finds no declaration for it — the ambient one
+// the package ships at its root is never part of the compilation. The subpath
+// is side-effect-only, so a bare declaration is the whole of it.
+declare module 'fake-indexeddb/auto';

package/src/index.test.ts

@@ -51,6 +51,13 @@ describe('public export surface', () => {
   });
 });
 
+describe('ui re-exports', () => {
+  it('carries ToggleBar and Button from the package root', () => {
+    expect(labkit).toHaveProperty('ToggleBar');
+    expect(labkit).toHaveProperty('Button');
+  });
+});
+
 describe('surface, job and orbit entry points', () => {
   it('are reachable from the package root', async () => {
     const kit = await import('./index');

package/src/index.ts

@@ -1,8 +1,13 @@
-// The property-panel family and LayerStack live in `@weasel-js/ui` now; labkit
-// re-exports them so existing `@weasel-js/labkit` imports keep resolving. Named,
-// not `export *` — a star re-export of an external package emits no binding in
-// the bundle.
+// The property-panel family, LayerStack, 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.
+// The playback glyphs ride along for the same reason: chrome that labels a control with
+// one should not need `@weasel-js/ui` in its manifest to draw a play button.
 export type {
+  ButtonProps,
+  ButtonSize,
+  ButtonVariant,
   CheckboxRowProps,
   ColorRowProps,
   CurveFieldProps,
@@ -10,6 +15,9 @@ export type {
   EffectCardListItem,
   EffectCardListProps,
   EffectCardProps,
+  IconProps,
+  InputProps,
+  JogProps,
   LayerStackItem,
   LayerStackProps,
   NumberRowProps,
@@ -22,30 +30,55 @@ export type {
   PropertyRowProps,
   PropertyRowVariant,
   PropertySpanProps,
+  SelectProps,
   SelectRowProps,
   SliderRowProps,
   SubpanelProps,
   TextRowProps,
+  ToggleBarItem,
+  ToggleBarProps,
+  ToggleBarSize,
+  ToggleBarVariant,
   ToggleRowProps,
+  TokenCategory,
+  TokenEntry,
+  TokenPanelProps,
 } from '@weasel-js/ui';
 export {
+  Button,
   CheckboxRow,
+  CloseIcon,
+  CollapseIcon,
   ColorRow,
   CurveField,
   EffectCard,
   EffectCardList,
+  ExpandIcon,
+  Icon,
+  Input,
+  inferTokenType,
+  Jog,
   LayerStack,
   NumberRow,
+  PauseIcon,
+  PlayIcon,
   PropertyGroup,
   PropertyList,
   PropertyPanel,
   PropertyRow,
   PropertySpan,
+  ResetIcon,
+  Select,
   SelectRow,
   SliderRow,
+  StepBackIcon,
+  StepForwardIcon,
+  StopIcon,
   Subpanel,
   TextRow,
+  ToggleBar,
   ToggleRow,
+  TokenPanel,
 } from '@weasel-js/ui';
 export type {
   Annotation,
@@ -118,6 +151,7 @@ export type {
   OrbitHandlers,
   OrbitView,
   PanZoomHandlers,
+  StageProps,
   UseOrbitOptions,
   UsePanZoomOptions,
   Vec3,
@@ -133,10 +167,12 @@ export {
   centerOn,
   clampPitch,
   DEFAULT_FRAME,
+  fitStage,
   orbitAfterDrag,
   orbitAfterWheel,
   PITCH_LIMIT,
   resolveFrame,
+  Stage,
   screenToWorld,
   useOrbit,
   usePanZoom,
@@ -145,7 +181,21 @@ export {
   zoomAt,
 } from './canvas';
 export * from './chrome';
-export { f, isConfigBranch } from './config/builder';
+export { type Auto, auto, isAuto } from './config/auto';
+export { autoPathsOf, resolveAutoConfig } from './config/autoConfig';
+export {
+  BaseNode,
+  BooleanNode,
+  ColorNode,
+  CustomNode,
+  EnumNode,
+  f,
+  GroupNode,
+  isConfigBranch,
+  NumberNode,
+  StringNode,
+  ValueNode,
+} from './config/builder';
 export { fromConfigFields } from './config/fromConfigField';
 export {
   fillConfigDefaults,
@@ -181,6 +231,7 @@ export type {
   ValueAtPath,
 } from './config/types';
 export { useConfigSchema } from './config/useConfigSchema';
+export { useResolvedConfig } from './config/useResolvedConfig';
 export { isLeafVisible } from './config/visible';
 export { ControlPanel } from './controls/ControlPanel';
 export type {
@@ -209,6 +260,7 @@ export type {
   PaletteItem,
   Point,
   RenderContext,
+  StageCapability,
   SystemEvent,
   UndoCapability,
   ViewTransform,
@@ -221,8 +273,12 @@ export type { LayerListProps, LayerTreeNode } from './layers';
 export { LayerList } from './layers';
 export * from './loupe';
 export * from './primitives';
+export { SPECIMEN_SECTIONS, Specimen } from './specimen/Specimen';
 export {
+  createIndexedDbAdapter,
   createMemoryAdapter,
+  type IndexedDbAdapterOptions,
+  indexedDbAdapter,
   localStorageAdapter,
   noneAdapter,
   sessionStorageAdapter,
@@ -237,6 +293,9 @@ export {
   useTrialId,
 } from './state/context';
 export { CURRENT_DOCUMENT_VERSION, labDocumentKey, quarantineKey } from './state/document';
+export { type OpenedLabStore, type OpenLabStoreOptions, openLabStore } from './state/openLabStore';
+export { Persistence, type PersistenceProps } from './state/Persistence';
+export type { RecordCache, RecordChange } from './state/records';
 export type {
   CreateLabStoreOptions,
   LabDocument,
@@ -245,6 +304,7 @@ export type {
   SavedSnapshot,
   SerializedTrial,
   StorageAdapter,
+  StorageChange,
   TrialInfo,
   TrialRecord,
   TrialStateHandle,
@@ -252,6 +312,7 @@ export type {
 } from './state/types';
 export type { UndockedPanel, UndockedPanels } from './state/undock';
 export { dockPanel, panelKey, undockPanel } from './state/undock';
+export { type PersistedStateOptions, usePersistedState } from './state/usePersistedState';
 export { useTrialState } from './state/useTrialState';
 export type { ViewTransform2D } from './state/view';
 export { as2DView, DEFAULT_VIEW } from './state/view';

package/src/instrument/serializers.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'vitest';
+import { configMigrationsOf } from './serializers';
+import type { InstrumentList } from './types';
+
+const instrument = (name: string, extra: Record<string, unknown> = {}) => ({
+  name,
+  defaultConfig: () => ({}),
+  initialState: () => ({}),
+  render: () => null,
+  ...extra,
+});
+
+describe('configMigrationsOf', () => {
+  it('keys each declared migration by instrument name, and skips the rest', () => {
+    const migrations = configMigrationsOf([
+      instrument('moves', { migrateConfig: (c: unknown) => ({ moved: c }) }),
+      instrument('stays'),
+    ] as InstrumentList);
+    expect(Object.keys(migrations)).toEqual(['moves']);
+    expect(migrations.moves?.({ a: 1 })).toEqual({ moved: { a: 1 } });
+  });
+});

package/src/instrument/serializers.ts

@@ -1,5 +1,33 @@
+import { resolveConfigSchema } from '../config/resolve';
+import type { ResolvedConfig } from '../config/types';
 import type { InstrumentSerializers } from '../state/types';
-import type { InstrumentList } from './types';
+import type { Instrument, InstrumentList } from './types';
+
+/**
+ * One instrument's config schema, resolved without the lab's rules — which
+ * neither the store nor a trial composed outside a lab has access to. No rule
+ * can reach `autoResolve`, `unpinned` or `manual`, so for reading those the
+ * two resolutions agree; anything reading the rendered leaves wants
+ * `useConfigSchema` instead. `undefined` for a legacy `configSchema()`
+ * instrument, which declares no auto annotations at all.
+ */
+export function unruledConfigSchema(
+  // biome-ignore lint/suspicious/noExplicitAny: instruments are stored contravariantly; see InstrumentList
+  instrument: Instrument<any, any, any>, // eslint-disable-line @typescript-eslint/no-explicit-any
+): ResolvedConfig | undefined {
+  return instrument.config ? resolveConfigSchema(instrument.config, []) : undefined;
+}
+
+/** Each instrument's unruled config schema, keyed by name — what the store
+ *  reads a leaf's auto annotations off. */
+export function configSchemasOf(instruments: InstrumentList): Record<string, ResolvedConfig> {
+  const out: Record<string, ResolvedConfig> = {};
+  for (const instrument of instruments) {
+    const schema = unruledConfigSchema(instrument);
+    if (schema) out[instrument.name] = schema;
+  }
+  return out;
+}
 
 /**
  * Each instrument's default config, keyed by name — what `createLabStore`
@@ -12,6 +40,17 @@ export function configDefaultsOf(instruments: InstrumentList): Record<string, ()
   return out;
 }
 
+/** Each instrument's `migrateConfig`, keyed by name, for those that declare one. */
+export function configMigrationsOf(
+  instruments: InstrumentList,
+): Record<string, (stored: unknown) => unknown> {
+  const out: Record<string, (stored: unknown) => unknown> = {};
+  for (const { name, migrateConfig } of instruments) {
+    if (migrateConfig) out[name] = (stored) => migrateConfig(stored);
+  }
+  return out;
+}
+
 /**
  * The `serialize` / `deserialize` an instrument list declares, keyed by
  * instrument name — what `createLabStore` needs to rebuild a trial's state

package/src/instrument/types.ts

@@ -67,6 +67,19 @@ export interface CanvasCapability<TS = unknown, TC = unknown> {
   maxZoom?: number;
 }
 
+/** Declares that an instrument's DOM is content of a fixed size, which the
+ *  trial pans and zooms the way it does a canvas's layers. Not combined with
+ *  `canvas`: there the DOM is an unzoomed overlay, and `canvas` wins. */
+export interface StageCapability {
+  /** The content's own size in CSS pixels, at zoom 1. */
+  size: ViewportSize;
+  /** Where the view starts. Omitted, the content opens centered and shrunk to
+   *  fit (`fitStage`). A function is called once the stage knows its size. */
+  initialView?: ViewTransform | ((viewport: ViewportSize) => ViewTransform);
+  minZoom?: number;
+  maxZoom?: number;
+}
+
 /** Declares which of an instrument's layers the trial should offer
  *  show/hide controls for. */
 export interface LayerCapability {
@@ -99,7 +112,8 @@ export type SystemEvent = string;
 export type Point = { x: number; y: number };
 /** What a hit-test found, and where. */
 export type HitResult = { hit: boolean; layerId?: string; pointId?: string };
-/** A trial's camera. */
+/** A trial's camera. `zoom` is always positive and finite once labkit holds
+ *  it — see `normalize2DView`. */
 export type ViewTransform = { zoom: number; pan: Point };
 /** A layer as the layer list shows it. `alwaysOn` layers cannot be hidden. */
 export type LayerDescriptor = { id: string; label: string; alwaysOn?: boolean };
@@ -119,7 +133,10 @@ export type DragFeedback = { ok: boolean; reason?: string };
  * is what makes the trial provide the corresponding chrome.
  */
 export interface Instrument<TS = unknown, TC = unknown, TItem = unknown> {
+  /** The id a trial record names its instrument by. */
   name: string;
+  /** What a trial of this instrument and the add-trial menu read. Default: `name`. */
+  title?: string;
   defaultConfig: () => TC;
   initialState: (config: TC) => TS;
   /** The instrument's config, declared once: values, types and controls.
@@ -133,9 +150,16 @@ export interface Instrument<TS = unknown, TC = unknown, TItem = unknown> {
    *  layers rather than instead of them; return `null` for canvas only. */
   render: (ctx: RenderContext<TS, TC>) => ReactNode;
   onConfigChange?: (config: TC, prev: TC, state: TS) => TS;
+  /** Moves a stored config's values to where the current schema keeps them —
+   *  `gridSize` to `grid.size` — before the defaults fill its gaps, so it
+   *  returns only what it moved and leaves the rest to them. It runs on every
+   *  read of a stored config, including one already moved, so it must hand
+   *  back a current config unchanged. */
+  migrateConfig?: (stored: unknown) => unknown;
   serialize?: (state: TS) => unknown;
   deserialize?: (data: unknown, config: TC) => TS;
   canvas?: CanvasCapability<TS, TC>;
+  stage?: StageCapability;
   layers?: LayerCapability;
   dragDrop?: DragDropCapability<TS, TC>;
   undo?: UndoCapability;

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

@@ -62,4 +62,20 @@ describe('<Lab> chrome', () => {
     render(<Lab title="T" instruments={[withChrome]} defaultInstrument="Bare" />);
     expect(screen.getByText('ready')).toBeInTheDocument();
   });
+
+  it('renders an aside contribution in its own pane, after the workspace', () => {
+    render(
+      <Lab
+        title="T"
+        instruments={[bare]}
+        defaultInstrument="Bare"
+        labChrome={[{ id: 'notes', region: 'aside', item: { title: 'Notes', body: <p>jot</p> } }]}
+      />,
+    );
+    const body = screen.getByText('jot');
+    const trial = screen.getByRole('region', { name: /trial/i });
+    expect(body.closest('.lk-lab__aside')).not.toBeNull();
+    expect(trial.compareDocumentPosition(body) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    expect(screen.getByRole('separator', { name: /Lab aside/ })).toBeInTheDocument();
+  });
 });

package/src/lab/Lab.less

@@ -1,17 +1,8 @@
-// `height: 100%` resolves against the containing block, so the lab needs an
-// unbroken chain of sized ancestors — and a host that supplies the height but
-// not the margin reset gets a page 16px taller than the viewport, which reads
-// as a stuck canvas rather than as overflow. Scoped with `:has` so a page that
-// mounts no lab is untouched, and stopping at the lab's own parent so an
-// embedded lab cannot resize its host's layout.
-html:has(.lk-lab),
-body:has(.lk-lab) {
+// A fullscreen lab's page is the viewport, and body's default margin would
+// scroll it. `<LabShell>` alone fills the viewport too. `:has` leaves a page
+// that mounts neither untouched.
+body:has(.lk-lab, .lk-shell) {
   margin: 0;
-  height: 100%;
-}
-
-body:has(.lk-lab) > :has(> .lk-lab) {
-  height: 100%;
 }
 
 .lk-lab {

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

@@ -0,0 +1,147 @@
+import 'fake-indexeddb/auto';
+import { act, render, screen, waitFor } from '@testing-library/react';
+import { StrictMode } from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import type { Instrument } from '../instrument/types';
+import { createMemoryAdapter, indexedDbAdapter, resetDefaultStorage } from '../state/adapters';
+import { labPrefix } from '../state/labRecords';
+import type { StorageAdapter } from '../state/types';
+import { Lab } from './Lab';
+import { LabContext, type LabContextValue } from './LabContext';
+
+const stub: Instrument = {
+  name: 'Stub',
+  defaultConfig: () => ({}),
+  initialState: () => ({}),
+  render: () => <div data-testid="stub-content">stub</div>,
+};
+
+let labRef: LabContextValue | null = null;
+function CaptureLab() {
+  return (
+    <LabContext.Consumer>
+      {(value) => {
+        labRef = value;
+        return null;
+      }}
+    </LabContext.Consumer>
+  );
+}
+
+/** A memory adapter whose first `list` waits until released. */
+function gated() {
+  const memory = createMemoryAdapter();
+  let release = (): void => {};
+  const opened = new Promise<void>((resolve) => {
+    release = resolve;
+  });
+  const storage: StorageAdapter = {
+    ...memory,
+    list: async (prefix) => {
+      await opened;
+      return memory.list(prefix);
+    },
+  };
+  return { storage, release };
+}
+
+afterEach(() => {
+  resetDefaultStorage();
+  vi.restoreAllMocks();
+});
+
+describe('<Lab> with a storageKey', () => {
+  it('renders its fallback until the lab has loaded', async () => {
+    const { storage, release } = gated();
+    render(
+      <Lab
+        instruments={[stub]}
+        defaultInstrument="Stub"
+        storageKey="gate"
+        storage={storage}
+        fallback={<p>loading</p>}
+      />,
+    );
+    expect(screen.getByText('loading')).toBeInTheDocument();
+    expect(screen.queryByTestId('stub-content')).toBeNull();
+    await act(async () => release());
+    expect(await screen.findByTestId('stub-content')).toBeInTheDocument();
+    expect(screen.queryByText('loading')).toBeNull();
+  });
+
+  it("falls back to the lab's empty shell by default", () => {
+    const { storage } = gated();
+    const { container } = render(
+      <Lab
+        instruments={[stub]}
+        defaultInstrument="Stub"
+        storageKey="gate"
+        storage={storage}
+        title="Waiting"
+      />,
+    );
+    expect(container.querySelector('.lk-lab .lk-shell')).not.toBeNull();
+    expect(screen.getByText('Waiting')).toBeInTheDocument();
+    expect(screen.queryByRole('region', { name: /trial/i })).toBeNull();
+  });
+
+  it('opens the lab once under StrictMode', async () => {
+    const storage = createMemoryAdapter();
+    const list = vi.spyOn(storage, 'list');
+    render(
+      <StrictMode>
+        <Lab instruments={[stub]} defaultInstrument="Stub" storageKey="strict" storage={storage} />
+      </StrictMode>,
+    );
+    await screen.findByTestId('stub-content');
+    expect(list).toHaveBeenCalledTimes(1);
+  });
+
+  it('persists to IndexedDB when given no storage', async () => {
+    const view = render(
+      <Lab instruments={[stub]} defaultInstrument="Stub" storageKey="idb-lab">
+        <CaptureLab />
+      </Lab>,
+    );
+    await screen.findByTestId('stub-content');
+    act(() => labRef?.setMode('light'));
+    view.unmount();
+    await waitFor(async () => {
+      const records = new Map(await indexedDbAdapter.list(labPrefix('idb-lab')));
+      expect(records.get(`${labPrefix('idb-lab')}meta`)).toMatchObject({ mode: 'light' });
+    });
+  });
+
+  it('warns when its storageKey changes after mount, and keeps the first', async () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const storage = createMemoryAdapter();
+    const view = render(
+      <Lab instruments={[stub]} defaultInstrument="Stub" storageKey="one" storage={storage} />,
+    );
+    await screen.findByTestId('stub-content');
+    view.rerender(
+      <Lab instruments={[stub]} defaultInstrument="Stub" storageKey="two" storage={storage} />,
+    );
+    expect(warn).toHaveBeenCalledWith(expect.stringContaining('`storageKey`'));
+  });
+
+  it('closes the lab on unmount, sending what was queued', async () => {
+    const backing = new Map<string, unknown>();
+    const view = render(
+      <Lab
+        instruments={[stub]}
+        defaultInstrument="Stub"
+        storageKey="close"
+        storage={createMemoryAdapter(backing)}
+      >
+        <CaptureLab />
+      </Lab>,
+    );
+    await screen.findByTestId('stub-content');
+    act(() => labRef?.setMode('dark'));
+    view.unmount();
+    await waitFor(() =>
+      expect(backing.get(`${labPrefix('close')}meta`)).toMatchObject({ mode: 'dark' }),
+    );
+  });
+});

package/src/lab/Lab.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { Meta, StoryObj } from '@weasel-js/forge';
 import { useEffect } from 'react';
 import type { Instrument } from '../instrument/types';
 import { Lab } from './Lab';
@@ -27,7 +27,6 @@ export const Default: Story = {
     instruments: [StubInstrument],
     defaultInstrument: 'Stub',
     title: 'Default Lab',
-    storage: null,
   },
 };
 
@@ -44,7 +43,6 @@ export const TwoTrials: Story = {
     instruments: [StubInstrument],
     defaultInstrument: 'Stub',
     title: 'Two Trials',
-    storage: null,
     children: <AddSecondTrial />,
   },
 };

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

@@ -12,7 +12,12 @@ import type { ReactNode } from 'react';
 import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
 import { defineInstrument } from '../instrument/defineInstrument';
 import { SurfaceContext } from '../surface/SurfaceContext';
-import { useSurfaceOptional, useSurfaceTile, useTileId } from '../surface/useSurfaceTile';
+import {
+  useSurfaceCanvas,
+  useSurfaceOptional,
+  useSurfaceTile,
+  useTileId,
+} from '../surface/useSurfaceTile';
 import type { SurfaceFrame, SurfaceHandle } from '../surface/useTiledSurface';
 import { useTiledSurface } from '../surface/useTiledSurface';
 import { Lab } from './Lab';
@@ -43,9 +48,21 @@ let seen: SurfaceHandle | null | 'not-rendered' = 'not-rendered';
  *  trial is scoped by it, and the trial's id is minted by the store. */
 let paneTileId = 'pane';
 
+interface SeenCanvases {
+  over: HTMLCanvasElement | null;
+  under: HTMLCanvasElement | null;
+  byDefault: HTMLCanvasElement | null;
+}
+let seenCanvases: SeenCanvases = { over: null, under: null, byDefault: null };
+
 function Probe() {
   seen = useSurfaceOptional();
   paneTileId = useTileId('pane');
+  seenCanvases = {
+    over: useSurfaceCanvas('over'),
+    under: useSurfaceCanvas('under'),
+    byDefault: useSurfaceCanvas(),
+  };
   const tile = useSurfaceTile('pane');
   return <div data-testid="pane" ref={tile} />;
 }
@@ -66,10 +83,34 @@ describe('<Lab> surface provider', () => {
     expect(typeof (seen as unknown as SurfaceHandle).registerTile).toBe('function');
   });
 
-  it('mounts one inert buffer inside the lab body', () => {
+  it('stacks an under and an over buffer inside the lab body', () => {
     const { container } = render(<Lab instruments={[probeInstrument]} defaultInstrument="Probe" />);
     const canvases = container.querySelectorAll('.lk-lab__body > canvas.lk-lab__surface');
-    expect(canvases).toHaveLength(1);
+    expect(canvases).toHaveLength(2);
+    // Source order, because the z-index that separates them is in a stylesheet
+    // jsdom does not resolve — this is a proxy for the stacking, not proof of
+    // it. The real check is a browser.
+    expect([...canvases].map((c) => c.className)).toEqual([
+      'lk-lab__surface lk-lab__surface--under',
+      'lk-lab__surface lk-lab__surface--over',
+    ]);
+  });
+
+  it('hands a tenant whichever of the two it asks for', () => {
+    const { container } = render(<Lab instruments={[probeInstrument]} defaultInstrument="Probe" />);
+    const [underEl, overEl] = [...container.querySelectorAll('canvas.lk-lab__surface')];
+    expect(seenCanvases.over).toBe(overEl);
+    expect(seenCanvases.under).toBe(underEl);
+    expect(overEl).not.toBe(underEl);
+  });
+
+  it('defaults a tenant to the buffer over the trials', () => {
+    // Every tenant predating the split wants the over one: the surface was
+    // built for marks that annotate an instrument.
+    const { container } = render(<Lab instruments={[probeInstrument]} defaultInstrument="Probe" />);
+    const [underEl, overEl] = [...container.querySelectorAll('canvas.lk-lab__surface')];
+    expect(seenCanvases.byDefault).toBe(overEl);
+    expect(seenCanvases.byDefault).not.toBe(underEl);
   });
 
   it('mounts no buffer of its own when a host already owns the surface', () => {
@@ -165,3 +206,30 @@ describe('<Lab> tile round trip', () => {
     expect(rect).toEqual({ x: 240, y: 100, w: 320, h: 200 });
   });
 });
+
+describe('<Lab> pages', () => {
+  it("gives the title a way back to the project's other labs", () => {
+    const { getByRole } = render(
+      <Lab
+        instruments={[probeInstrument]}
+        defaultInstrument="Probe"
+        title="kliegsminister"
+        path="/kliegsminister"
+        pages={[
+          { href: '/kliegsminister', label: 'kliegsminister' },
+          { href: '/stats', label: 'corpus stats' },
+        ]}
+      />,
+    );
+    // A switcher, not a bare heading: the lab it came from has to be reachable.
+    expect(getByRole('button', { name: /kliegsminister/ })).toBeTruthy();
+  });
+
+  it('leaves the title a plain heading when there are no other labs', () => {
+    const { getByRole, queryByRole } = render(
+      <Lab instruments={[probeInstrument]} defaultInstrument="Probe" title="solo" />,
+    );
+    expect(getByRole('heading', { name: 'solo' })).toBeTruthy();
+    expect(queryByRole('button', { name: /solo/ })).toBeNull();
+  });
+});