@weasel-js/labkit 1.1.0 → 1.3.0-pre.0

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

@@ -0,0 +1,65 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import type { TrialContribution } from '../chrome/types';
+import type { Instrument } from '../instrument/types';
+import { Lab } from './Lab';
+
+const Glyph = () => <svg />;
+const bare: Instrument = {
+  name: 'Bare',
+  defaultConfig: () => ({}),
+  initialState: () => ({}),
+  render: () => null,
+};
+
+/** React logs the error it re-throws from a failed render; the assertions are
+ *  on the throw itself, so the console noise is not informative. */
+function silenceRenderError(): void {
+  vi.spyOn(console, 'error').mockImplementation(() => {});
+}
+
+describe('<Lab> chrome', () => {
+  it('renders a consumer contribution', () => {
+    const extra: TrialContribution = {
+      id: 'export',
+      region: 'toolbar',
+      item: { icon: Glyph, label: 'Export', onActivate: () => {} },
+    };
+    render(<Lab title="T" instruments={[bare]} defaultInstrument="Bare" chrome={[extra]} />);
+    expect(screen.getByRole('button', { name: 'Export' })).toBeInTheDocument();
+  });
+
+  it('suppresses a built-in by id', () => {
+    render(<Lab title="T" instruments={[bare]} defaultInstrument="Bare" suppress={['snapshot']} />);
+    expect(screen.queryByRole('button', { name: 'Save snapshot' })).toBeNull();
+    expect(screen.getByRole('button', { name: 'Clone trial' })).toBeInTheDocument();
+  });
+
+  it('throws when a consumer id collides with a built-in', () => {
+    silenceRenderError();
+    const clash: TrialContribution = {
+      id: 'clone',
+      region: 'toolbar',
+      item: { icon: Glyph, label: 'Mine', onActivate: () => {} },
+    };
+    expect(() =>
+      render(<Lab title="T" instruments={[bare]} defaultInstrument="Bare" chrome={[clash]} />),
+    ).toThrow(/duplicate contribution id "clone"/);
+  });
+
+  it('throws when suppressing an id that is not there', () => {
+    silenceRenderError();
+    expect(() =>
+      render(<Lab title="T" instruments={[bare]} defaultInstrument="Bare" suppress={['nope']} />),
+    ).toThrow(/cannot suppress "nope"/);
+  });
+
+  it('renders an instrument-declared contribution', () => {
+    const withChrome: Instrument = {
+      ...bare,
+      chrome: [{ id: 'mine', region: 'status', item: { text: 'ready' } }],
+    };
+    render(<Lab title="T" instruments={[withChrome]} defaultInstrument="Bare" />);
+    expect(screen.getByText('ready')).toBeInTheDocument();
+  });
+});

package/src/lab/Lab.stories.tsx

@@ -33,10 +33,9 @@ export const Default: Story = {
 
 function AddSecondTrial() {
   const ctx = useLabContext();
-  // biome-ignore lint/correctness/useExhaustiveDependencies: run once on mount
   useEffect(() => {
     if (ctx.trials.length < 2) ctx.addTrial('Stub');
-  }, []);
+  }, [ctx]);
   return null;
 }
 

package/src/lab/Lab.tsx

@@ -1,12 +1,15 @@
 import { ThemeProvider } from '@weasel-js/theme/react';
 import { type CSSProperties, type ReactNode, useEffect, useMemo, useRef } from 'react';
 import { useStore } from 'zustand/react';
+import type { TrialContribution } from '../chrome/types';
+import type { ConfigRule, ControlRenderer } from '../config/types';
 import type { InstrumentList } from '../instrument/types';
 import { noneAdapter } from '../state/adapters';
 import { LabStoreContext } from '../state/context';
 import { createLabStore, type LabStore } from '../state/store';
 import type { LabMode, StorageAdapter, TrialRecord } from '../state/types';
 import { interstellarTheme } from '../theme/interstellar';
+import type { TrialTool } from '../tools/types';
 import { Trial } from '../trial/Trial';
 import {
   addTrial as addTrialOp,
@@ -16,6 +19,8 @@ import {
   resetTrial as resetTrialOp,
 } from '../trial/trialOps';
 import { LabContext, type LabContextValue } from './LabContext';
+import { LabHeader } from './LabHeader';
+import { LabPalette } from './LabPalette';
 import { LabShell } from './LabShell';
 import { useResolvedMode } from './useSystemMode';
 import { type TrialLayout, Workspace } from './Workspace';
@@ -35,6 +40,22 @@ export interface LabProps {
    */
   nebula?: readonly string[];
   title?: string;
+  /** Rendered in the shell's footer, below the workspace. */
+  footer?: ReactNode;
+  /** Contributions added to every trial's chrome, after the instrument's own. */
+  chrome?: readonly TrialContribution[];
+  /** Built-in contribution ids to drop. Throws on an id that is not there. */
+  suppress?: readonly string[];
+  /** Tools offered lab-wide. A trial whose instrument declares none of its own
+   *  reflects and writes this slot. */
+  tools?: readonly TrialTool[];
+  /** Rules run over every instrument's config leaves, before labkit's own
+   *  inference — where a lab states a convention once instead of annotating
+   *  each field. Memoize or hoist. */
+  configRules?: readonly ConfigRule[];
+  /** Control overrides and app-defined kinds for every trial's settings panel.
+   *  Keys are config paths (checked first) or leaf kinds. Memoize or hoist. */
+  controls?: Record<string, ControlRenderer>;
   children?: ReactNode;
 }
 
@@ -88,6 +109,12 @@ export function Lab({
   mode,
   nebula,
   title,
+  footer,
+  chrome,
+  suppress,
+  tools,
+  configRules,
+  controls,
   children,
 }: LabProps) {
   if (process.env.NODE_ENV !== 'production' && instruments.length === 0) {
@@ -160,7 +187,8 @@ export function Lab({
       },
       savedSnapshots,
       saveSnapshot: (trialId, name) => {
-        store.getState().saveSnapshot(trialId, name ?? `Save ${new Date().toLocaleString()}`);
+        const taken = store.getState().savedSnapshots.filter((s) => s.trialId === trialId).length;
+        store.getState().saveSnapshot(trialId, name ?? `Snapshot ${taken + 1}`);
       },
       loadSnapshot: (trialId, snapshotId) => {
         store.getState().loadSnapshot(snapshotId, trialId);
@@ -172,8 +200,10 @@ export function Lab({
       setMode: (m) => {
         store.getState().setMode(m);
       },
+      configRules,
+      controls,
     };
-  }, [instruments, trials, savedSnapshots, modeValue, store]);
+  }, [instruments, trials, savedSnapshots, modeValue, store, configRules, controls]);
 
   // Only override the backdrop in dark, where there is one to override.
   // Setting a CSS custom property is the sanctioned use of inline style.
@@ -191,19 +221,32 @@ export function Lab({
           className="lk-lab"
           style={backdropStyle}
         >
-          <LabShell title={title ?? 'Labkit'} mode={modeValue} header={children}>
-            <Workspace
-              ids={trials.map((w) => w.id)}
-              resizable
-              reorderable
-              onReorder={(ids) => contextValue.reorderTrials(ids)}
-              layout={layout as TrialLayout}
-              onLayoutChange={(next) => store.getState().setLayout(next)}
-            >
-              {trials.map((w) => (
-                <Trial key={w.id} id={w.id} />
-              ))}
-            </Workspace>
+          <LabShell
+            title={title ?? 'Labkit'}
+            mode={modeValue}
+            footer={footer}
+            header={
+              <>
+                <LabHeader />
+                {children}
+              </>
+            }
+          >
+            <div className="lk-lab__body">
+              {tools ? <LabPalette tools={tools} /> : null}
+              <Workspace
+                ids={trials.map((w) => w.id)}
+                resizable
+                reorderable
+                onReorder={(ids) => contextValue.reorderTrials(ids)}
+                layout={layout as TrialLayout}
+                onLayoutChange={(next) => store.getState().setLayout(next)}
+              >
+                {trials.map((w) => (
+                  <Trial key={w.id} id={w.id} chrome={chrome} suppress={suppress} />
+                ))}
+              </Workspace>
+            </div>
           </LabShell>
         </ThemeProvider>
       </LabContext.Provider>

package/src/lab/LabContext.ts

@@ -1,4 +1,5 @@
 import { createContext, useContext } from 'react';
+import type { ConfigRule, ControlRenderer } from '../config/types';
 import type { InstrumentList } from '../instrument/types';
 import type { LabMode, SavedSnapshot, TrialRecord } from '../state/types';
 
@@ -19,6 +20,11 @@ export interface LabContextValue {
   deleteSnapshot: (snapshotId: string) => void;
   mode: LabMode;
   setMode: (m: LabMode) => void;
+  /** Lab-wide rules run over every instrument's config leaves, before
+   *  labkit's own inference. */
+  configRules?: readonly ConfigRule[];
+  /** Lab-wide control overrides, keyed by config path or by leaf kind. */
+  controls?: Record<string, ControlRenderer>;
 }
 
 /** Context carrying the surrounding lab. Prefer `useLabContext`. */

package/src/lab/LabFullChrome.stories.tsx

@@ -0,0 +1,308 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useEffect, useRef } from 'react';
+import type { ConfigField } from '../controls/types';
+import { defineInstrument } from '../instrument/defineInstrument';
+import type { Instrument, RenderContext } from '../instrument/types';
+import type { JobEvent } from '../job/types';
+import { Lab } from './Lab';
+import { useLabContext } from './LabContext';
+
+interface ScanConfig {
+  gain: number;
+  integrationMs: number;
+  source: string;
+  channel: string;
+  traceColor: string;
+  autoBaseline: boolean;
+}
+
+interface ScanState {
+  samples: number[];
+  marks: number[];
+}
+
+const PLOT = { w: 240, h: 120 };
+
+function scanSchema(traceColor: string): ConfigField[] {
+  return [
+    { key: 'gain', label: 'Gain', type: 'slider', default: 1.4, min: 0.1, max: 4, step: 0.1 },
+    {
+      key: 'integrationMs',
+      label: 'Integration (ms)',
+      type: 'number',
+      default: 250,
+      min: 10,
+      max: 2000,
+      step: 10,
+    },
+    {
+      key: 'source',
+      label: 'Source',
+      type: 'select',
+      default: 'deuterium',
+      options: [
+        { value: 'deuterium', label: 'Deuterium' },
+        { value: 'tungsten', label: 'Tungsten' },
+        { value: 'xenon', label: 'Xenon flash' },
+      ],
+    },
+    { key: 'channel', label: 'Channel', type: 'text', default: 'CH-1', maxLength: 12 },
+    { key: 'traceColor', label: 'Trace', type: 'color', default: traceColor },
+    { key: 'autoBaseline', label: 'Auto baseline', type: 'checkbox', default: true },
+  ];
+}
+
+function wait(ms: number, signal: AbortSignal): Promise<void> {
+  return new Promise((resolve) => {
+    const timer = setTimeout(resolve, ms);
+    signal.addEventListener(
+      'abort',
+      () => {
+        clearTimeout(timer);
+        resolve();
+      },
+      { once: true },
+    );
+  });
+}
+
+interface SweepSpec {
+  count: number;
+  everyMs: number;
+  /** Frame indices that report a `failed` event instead of a sample. */
+  dropped?: number[];
+  /** Frame index at which the whole run throws, and what it throws. */
+  faultAt?: number;
+  fault?: string;
+}
+
+async function* sweep(spec: SweepSpec, signal: AbortSignal): AsyncGenerator<JobEvent<number>> {
+  yield { kind: 'total', total: spec.count };
+  for (let i = 0; i < spec.count; i++) {
+    await wait(spec.everyMs, signal);
+    if (signal.aborted) return;
+    if (i === spec.faultAt) throw new Error(spec.fault ?? 'Sweep failed');
+    if (spec.dropped?.includes(i)) {
+      yield { kind: 'failed', index: i, error: `Frame ${i}: detector saturated` };
+      continue;
+    }
+    yield { kind: 'item', item: Math.sin(i * 0.55) * 42 + 58 };
+  }
+}
+
+// Rendered for its effect alone: a mark seeded on mount gives every trial one
+// undoable edit, so Undo reads live instead of starting greyed out.
+function SeedMarks({ ctx }: { ctx: RenderContext<ScanState, ScanConfig> }) {
+  const seeded = useRef(false);
+  useEffect(() => {
+    if (seeded.current) return;
+    seeded.current = true;
+    ctx.setState((prev) => ({ ...prev, marks: [...prev.marks, 64, 152] }));
+  }, [ctx]);
+  return null;
+}
+
+function scanInstrument(
+  name: string,
+  traceColor: string,
+  spec: SweepSpec,
+): Instrument<ScanState, ScanConfig, number> {
+  return defineInstrument<ScanState, ScanConfig, number>({
+    name,
+    defaultConfig: () => ({
+      gain: 1.4,
+      integrationMs: 250,
+      source: 'deuterium',
+      channel: 'CH-1',
+      traceColor,
+      autoBaseline: true,
+    }),
+    initialState: () => ({ samples: [], marks: [] }),
+    configSchema: () => scanSchema(traceColor),
+    render: (ctx) => <SeedMarks ctx={ctx} />,
+    canvas: {
+      initialView: { zoom: 1, pan: { x: 24, y: 24 } },
+      layers: [
+        {
+          id: 'grid',
+          draw: (c, { zoom }) => {
+            c.strokeStyle = '#8894a8';
+            c.globalAlpha = 0.3;
+            c.lineWidth = 1 / zoom;
+            for (let x = 0; x <= PLOT.w; x += 20) {
+              c.beginPath();
+              c.moveTo(x, 0);
+              c.lineTo(x, PLOT.h);
+              c.stroke();
+            }
+            for (let y = 0; y <= PLOT.h; y += 20) {
+              c.beginPath();
+              c.moveTo(0, y);
+              c.lineTo(PLOT.w, y);
+              c.stroke();
+            }
+            c.globalAlpha = 1;
+          },
+        },
+        {
+          id: 'trace',
+          draw: (c, { state, config, zoom }) => {
+            if (state.samples.length === 0) return;
+            c.strokeStyle = config.traceColor;
+            c.lineWidth = 2 / zoom;
+            c.beginPath();
+            state.samples.forEach((sample, i) => {
+              const x = i * 10;
+              const y = PLOT.h - Math.min(PLOT.h, sample * config.gain * 0.7);
+              if (i === 0) c.moveTo(x, y);
+              else c.lineTo(x, y);
+            });
+            c.stroke();
+          },
+        },
+        {
+          id: 'marks',
+          draw: (c, { state, zoom }) => {
+            c.strokeStyle = '#f08c00';
+            c.lineWidth = 1 / zoom;
+            for (const x of state.marks) {
+              c.beginPath();
+              c.moveTo(x, 0);
+              c.lineTo(x, PLOT.h);
+              c.stroke();
+            }
+          },
+        },
+      ],
+    },
+    layers: {
+      ids: [
+        { id: 'grid', label: 'Grid', alwaysOn: true },
+        { id: 'trace', label: 'Trace' },
+        { id: 'marks', label: 'Marks' },
+      ],
+    },
+    dragDrop: {
+      palette: [
+        { id: 'peak', label: 'Peak marker' },
+        { id: 'baseline', label: 'Baseline point' },
+        { id: 'window', label: 'Integration window' },
+      ],
+      onDrop: (worldPos, _item, state) => ({ ...state, marks: [...state.marks, worldPos.x] }),
+    },
+    undo: { snapshotOn: ['state.change', 'canvas.itemAdded'], maxDepth: 20 },
+    job: {
+      auto: true,
+      run: ({ signal }) => sweep(spec, signal),
+      onItem: (item, state) => ({ ...state, samples: [...state.samples, item] }),
+    },
+  });
+}
+
+const spectrometer = scanInstrument('Spectrometer', '#5ad1ff', { count: 24, everyMs: 1200 });
+const beamProfile = scanInstrument('Beam profile', '#ffd166', {
+  count: 12,
+  everyMs: 900,
+  dropped: [4, 9],
+});
+const thermalDrift = scanInstrument('Thermal drift', '#ff8fa3', {
+  count: 8,
+  everyMs: 800,
+  faultAt: 3,
+  fault: 'Sensor bus timeout on channel 2',
+});
+
+/** Opens the other two trials and saves one snapshot per trial, so every
+ *  toolbar shows its Load control and the header's Select has somewhere to
+ *  add to. */
+function SeedTrials() {
+  const lab = useLabContext();
+  const opened = useRef(false);
+  const saved = useRef(false);
+  useEffect(() => {
+    if (!opened.current) {
+      opened.current = true;
+      lab.addTrial('Beam profile');
+      lab.addTrial('Thermal drift');
+      return;
+    }
+    if (!saved.current && lab.trials.length === 3) {
+      saved.current = true;
+      for (const trial of lab.trials) lab.saveSnapshot(trial.id, 'Baseline');
+    }
+  }, [lab]);
+  return null;
+}
+
+const runLog = defineInstrument<{ lines: string[] }, Record<string, never>>({
+  name: 'Run log',
+  defaultConfig: () => ({}),
+  initialState: () => ({
+    lines: ['09:04 lamp warm', '09:06 slit 50 µm', '09:12 calibrated', '09:14 sweep armed'],
+  }),
+  render: ({ state }) => (
+    <div className="lk-run-log">
+      {state.lines.map((line) => (
+        <div key={line}>{line}</div>
+      ))}
+    </div>
+  ),
+});
+
+const meta: Meta<typeof Lab> = {
+  title: 'labkit/Lab/FullChrome',
+  component: Lab,
+  parameters: { layout: 'fullscreen' },
+};
+export default meta;
+
+type Story = StoryObj<typeof Lab>;
+
+/** Every chrome surface a lab renders, on screen at once: three instruments so
+ *  the header offers its Select, three trials each carrying a title bar, the
+ *  full toolbar, a control panel with one of every field type, the palette and
+ *  layer list, and a status bar with a running job. Starts in dark, where the
+ *  `nebula` backdrop paints. */
+export const AllChrome: Story = {
+  args: {
+    instruments: [spectrometer, beamProfile, thermalDrift],
+    defaultInstrument: 'Spectrometer',
+    title: 'Optics bench',
+    storage: null,
+    mode: 'dark',
+    nebula: ['#3b5bdb', '#7048e8', '#0ca678'],
+    children: (
+      <>
+        <SeedTrials />
+        <span className="lk-run-tag">Run 42 · bench 3</span>
+      </>
+    ),
+  },
+};
+
+/** The chrome the other story cannot show at the same time: one instrument, so
+ *  the header is an Add trial button; one trial, so Close is disabled; no
+ *  config schema, canvas, undo or job, so the sidebar falls back to its
+ *  placeholder and the toolbar keeps only what is left. */
+export const SingleInstrument: Story = {
+  args: {
+    instruments: [runLog],
+    defaultInstrument: 'Run log',
+    title: 'Run log',
+    storage: null,
+  },
+};
+
+/** The shell footer, which `<Lab>` had no prop for — reaching it used to mean
+ *  building `<LabShell>` yourself. Trial chrome is contributions now; see
+ *  `labkit/Chrome/Regions` for those. */
+export const WithFooter: Story = {
+  args: {
+    instruments: [spectrometer, beamProfile],
+    defaultInstrument: 'Spectrometer',
+    title: 'With footer',
+    storage: null,
+    mode: 'dark',
+    footer: <span className="lk-run-tag">Footer — reached through LabProps.footer</span>,
+  },
+};

package/src/lab/LabHeader.test.tsx

@@ -0,0 +1,42 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import type { Instrument } from '../instrument/types';
+import { Lab } from './Lab';
+
+const Stub: Instrument = {
+  name: 'Stub',
+  defaultConfig: () => ({}),
+  initialState: () => ({}),
+  render: () => <div>stub</div>,
+};
+const Other: Instrument = { ...Stub, name: 'Other' };
+
+describe('<LabHeader>', () => {
+  it('offers an add-trial button when the lab has one instrument', () => {
+    render(<Lab instruments={[Stub]} defaultInstrument="Stub" storage={null} />);
+    expect(screen.getByRole('button', { name: /add trial/i })).toBeInTheDocument();
+  });
+
+  it('offers a picker instead when the lab has several', () => {
+    render(<Lab instruments={[Stub, Other]} defaultInstrument="Stub" storage={null} />);
+    // A picker, not a button — which instrument to add is now a choice.
+    expect(screen.queryByRole('button', { name: /^add trial$/i })).toBeNull();
+    expect(screen.getByLabelText(/add trial/i)).toBeInTheDocument();
+  });
+
+  it('adds a trial when the button is used', async () => {
+    const { default: userEvent } = await import('@testing-library/user-event');
+    const user = userEvent.setup();
+    render(<Lab instruments={[Stub]} defaultInstrument="Stub" storage={null} />);
+    expect(screen.getAllByLabelText(/^Trial Stub$/)).toHaveLength(1);
+    await user.click(screen.getByRole('button', { name: /add trial/i }));
+    expect(screen.getAllByLabelText(/^Trial Stub$/)).toHaveLength(2);
+  });
+
+  it('exposes the color mode as a three-way choice', () => {
+    render(<Lab instruments={[Stub]} defaultInstrument="Stub" storage={null} />);
+    for (const label of ['Auto', 'Light', 'Dark']) {
+      expect(screen.getByRole('radio', { name: label })).toBeInTheDocument();
+    }
+  });
+});

package/src/lab/LabHeader.tsx

@@ -0,0 +1,57 @@
+import { AddIcon } from '@weasel-js/ui';
+import { Select, ToggleBar } from '../passthrough/weasel-ui';
+import type { LabMode } from '../state/types';
+import { useLabContext } from './LabContext';
+
+const MODES: { value: LabMode; label: string }[] = [
+  { value: 'auto', label: 'Auto' },
+  { value: 'light', label: 'Light' },
+  { value: 'dark', label: 'Dark' },
+];
+
+/** The controls `<Lab>` puts in its header: add a trial, and choose the color
+ *  mode. Both drive `LabContext`, which carried them with no UI at all — so
+ *  every consumer rebuilt these two. Rendered before a consumer's own header
+ *  content, which still lands beside them. */
+export function LabHeader() {
+  const lab = useLabContext();
+  const only = lab.instruments.length === 1 ? lab.instruments[0] : null;
+
+  return (
+    <>
+      {only ? (
+        <button
+          type="button"
+          className="lk-lab-header__add"
+          onClick={() => lab.addTrial(only.name)}
+        >
+          <AddIcon size={16} />
+          <span>Add trial</span>
+        </button>
+      ) : (
+        // Held at null so the control stays an "add one" action rather than
+        // reading as the current instrument.
+        <Select
+          className="lk-lab-header__add-select"
+          aria-label="Add trial"
+          placeholder="Add trial…"
+          selectedKey={null}
+          options={lab.instruments.map((i) => ({ value: i.name, label: i.name }))}
+          onSelectionChange={(name) => {
+            if (name != null) lab.addTrial(String(name));
+          }}
+        />
+      )}
+
+      <ToggleBar
+        className="lk-lab-header__mode"
+        ariaLabel="Color mode"
+        items={MODES}
+        value={lab.mode}
+        onChange={(next) => {
+          if (next) lab.setMode(next);
+        }}
+      />
+    </>
+  );
+}

package/src/lab/LabPalette.test.tsx

@@ -0,0 +1,35 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import type { Instrument } from '../instrument/types';
+import { Lab } from './Lab';
+
+const Glyph = () => <svg />;
+const bare: Instrument = {
+  name: 'Bare',
+  defaultConfig: () => ({}),
+  initialState: () => ({}),
+  render: () => null,
+};
+const tools = [
+  { id: 'pick', label: 'Pick', icon: Glyph },
+  { id: 'pan', label: 'Pan', icon: Glyph },
+];
+
+describe('the lab palette', () => {
+  it('does not render when the lab declares no tools', () => {
+    render(<Lab title="T" instruments={[bare]} defaultInstrument="Bare" />);
+    expect(screen.queryByRole('toolbar', { name: 'Tools' })).toBeNull();
+  });
+
+  it('renders one button per declared tool', () => {
+    render(<Lab title="T" instruments={[bare]} defaultInstrument="Bare" tools={tools} />);
+    expect(screen.getByRole('button', { name: 'Pick' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Pan' })).toBeInTheDocument();
+  });
+
+  it('marks the chosen tool current after a click', () => {
+    render(<Lab title="T" instruments={[bare]} defaultInstrument="Bare" tools={tools} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Pan' }));
+    expect(screen.getByRole('button', { name: 'Pan' })).toHaveAttribute('aria-current', 'true');
+  });
+});