@weasel-js/labkit 1.5.2 → 1.6.1

package/src/specimen/Specimen.tsx

@@ -1,15 +1,13 @@
 import type { FillStyle, GradientFill, Track } from '@weasel-js/core';
 import {
-  ActionsBar,
   Badge,
   type Band,
   BandEditor,
   Button,
+  ButtonBar,
   Callout,
   Checkbox,
-  CheckboxRow,
   ColorField,
-  ColorRow,
   ComboBox,
   type ControlPoint,
   CurveEditor,
@@ -24,11 +22,11 @@ import {
   ItemList,
   KeyCap,
   KeySequence,
-  LayerStack,
-  type LayerStackItem,
+  LayerList,
+  type LayerListItem,
   MenuButton,
+  moveLayers,
   NumberField,
-  NumberRow,
   OptionsBar,
   PaintInput,
   Plot2D,
@@ -36,6 +34,7 @@ import {
   Powerline,
   type PrefGroup,
   PrefsForm,
+  PropertyField,
   PropertyGroup,
   PropertyList,
   PropertyPanel,
@@ -44,10 +43,9 @@ import {
   RangeSlider,
   ResizeHandle,
   Select,
-  SelectRow,
+  Sidebar,
   SidebarPanel,
   Slider,
-  SliderRow,
   StatusBarItem,
   StatusBarSpacer,
   Switch,
@@ -55,18 +53,15 @@ import {
   TabList,
   TabPanel,
   Tabs,
-  TextRow,
   type Thumb,
   Timeline,
   ToastRegion,
   ToggleBar,
-  ToggleRow,
   ToolButton,
   ToolGroup,
   ToolOptionsBar,
   Tooltip,
   TooltipTrigger,
-  Sidebar as UiSidebar,
   StatusBar as UiStatusBar,
 } from '@weasel-js/ui';
 import { type CSSProperties, type ReactNode, useId, useMemo, useRef, useState } from 'react';
@@ -76,7 +71,6 @@ import { FloatingPanel } from '../primitives/FloatingPanel';
 import { JobProgress } from '../primitives/JobProgress';
 import { Legend, type LegendEntry } from '../primitives/Legend';
 import { ScaleIndicator } from '../primitives/ScaleIndicator';
-import { Sidebar } from '../primitives/Sidebar';
 import { Split } from '../primitives/Split';
 import { StatusBar } from '../primitives/StatusBar';
 import { Toolbar } from '../primitives/Toolbar';
@@ -213,19 +207,19 @@ function ButtonsAndToggles() {
       </Cell>
       <Cell label="Badge">
         <div className="lk-specimen__row">
-          <Badge shape="pill" tone="accent" variant="outline" size="sm">
+          <Badge shape="pill" status="accent" variant="outline" size="sm">
             ACCENT
           </Badge>
-          <Badge tone="info" variant="subtle">
+          <Badge status="info" variant="subtle">
             INFO
           </Badge>
-          <Badge tone="warn" variant="solid">
+          <Badge status="warn" variant="solid">
             WARN
           </Badge>
-          <Badge tone="danger" variant="solid">
+          <Badge status="danger" variant="solid">
             DANGER
           </Badge>
-          <Badge tone="muted">MUTED</Badge>
+          <Badge status="muted">MUTED</Badge>
         </div>
       </Cell>
       <Cell label="Checkbox, Switch">
@@ -269,7 +263,7 @@ function ButtonsAndToggles() {
           ]}
         />
       </Cell>
-      <Cell label="OptionsBar, ActionsBar">
+      <Cell label="OptionsBar, ButtonBar">
         <div className="lk-specimen__row">
           <OptionsBar
             ariaLabel="Text style"
@@ -278,7 +272,7 @@ function ButtonsAndToggles() {
               { value: 'i', label: 'I', selected: italic, onChange: setItalic },
             ]}
           />
-          <ActionsBar
+          <ButtonBar
             items={[
               { value: 'undo', label: 'Undo', onAction: () => {} },
               { value: 'redo', label: 'Redo', onAction: () => {} },
@@ -297,7 +291,6 @@ function ButtonsAndToggles() {
             ]}
           />
           <Disclosure open={open} onToggle={() => setOpen((o) => !o)} label="Shapes" />
-          <Disclosure open={false} onToggle={() => {}} label="Down" direction="down" />
         </div>
       </Cell>
       <Cell label="Tabs">
@@ -436,7 +429,7 @@ function PanelsAndRows() {
   const [label, setLabel] = useState('Badge');
   const [visible, setVisible] = useState(true);
   const [prefs, setPrefs] = useState<Record<string, unknown>>({});
-  const [layers, setLayers] = useState<LayerStackItem[]>([
+  const [layers, setLayers] = useState<LayerListItem[]>([
     { id: 'base', label: 'Base coat' },
     { id: 'wash', label: 'Wash' },
   ]);
@@ -446,7 +439,9 @@ function PanelsAndRows() {
       <Cell label="PropertyPanel">
         <PropertyPanel title="Shape">
           <PropertyList>
-            <SliderRow
+            <PropertyField
+              kind="number"
+              control="slider"
               label="Opacity"
               value={opacity}
               min={0}
@@ -454,7 +449,9 @@ function PanelsAndRows() {
               step={0.01}
               onChange={setOpacity}
             />
-            <SliderRow
+            <PropertyField
+              kind="number"
+              control="slider"
               label="Radius"
               value={radius}
               min={0}
@@ -462,16 +459,26 @@ function PanelsAndRows() {
               unit="px"
               onChange={setRadius}
             />
-            <ColorRow
+            <PropertyField
+              kind="color"
               label="Fill"
               value={fill}
               onChange={setFill}
               alpha={alpha}
               onAlphaChange={setAlpha}
             />
-            <ColorRow label="Stroke" value={stroke} onChange={setStroke} />
-            <NumberRow label="Count" value={count} min={0} max={100} step={1} onChange={setCount} />
-            <SelectRow
+            <PropertyField kind="color" label="Stroke" value={stroke} onChange={setStroke} />
+            <PropertyField
+              kind="number"
+              label="Count"
+              value={count}
+              min={0}
+              max={100}
+              step={1}
+              onChange={setCount}
+            />
+            <PropertyField
+              kind="enum"
               label="Line cap"
               value={cap}
               onChange={setCap}
@@ -480,7 +487,9 @@ function PanelsAndRows() {
                 { value: 'round', label: 'Round' },
               ]}
             />
-            <ToggleRow
+            <PropertyField
+              kind="enum"
+              control="toggle"
               label="Align"
               value={side}
               onChange={setSide}
@@ -490,10 +499,19 @@ function PanelsAndRows() {
                 { value: 'right', label: 'R' },
               ]}
             />
-            <TextRow label="Label" value={label} onChange={setLabel} />
-            <CheckboxRow label="Visible" value={visible} onChange={setVisible} />
+            <PropertyField kind="string" label="Label" value={label} onChange={setLabel} />
+            <PropertyField kind="boolean" label="Visible" value={visible} onChange={setVisible} />
             <PropertyGroup title="Bevel" defaultCollapsed>
-              <SliderRow label="Rings" value={32} min={4} max={96} step={1} onChange={() => {}} />
+              <PropertyField
+                kind="number"
+                control="slider"
+                label="Rings"
+                value={32}
+                min={4}
+                max={96}
+                step={1}
+                onChange={() => {}}
+              />
             </PropertyGroup>
           </PropertyList>
         </PropertyPanel>
@@ -505,18 +523,16 @@ function PanelsAndRows() {
           onChange={(path, value) => setPrefs((prev) => setAt(prev, path, value))}
         />
       </Cell>
-      <Cell label="LayerStack">
-        <LayerStack
+      <Cell label="LayerList">
+        <LayerList
           items={layers}
-          onReorder={(ids) =>
-            setLayers(ids.flatMap((id) => layers.filter((item) => item.id === id)))
-          }
+          onReorder={(move) => setLayers(moveLayers(layers, move))}
           renderBody={(item) => <div>settings for {item.label}</div>}
         />
       </Cell>
       <Cell label="Sidebar, SidebarPanel">
         <div className="lk-specimen__box">
-          <UiSidebar side="right" ariaLabel="Specimen sidebar">
+          <Sidebar side="right" ariaLabel="Specimen sidebar">
             <SidebarPanel
               title="Selection"
               collapsed={panelCollapsed}
@@ -525,7 +541,7 @@ function PanelsAndRows() {
             >
               <div className="lk-specimen__pad">2 items selected</div>
             </SidebarPanel>
-          </UiSidebar>
+          </Sidebar>
         </div>
       </Cell>
     </Section>
@@ -554,8 +570,8 @@ function OverlaysAndFeedback() {
             triggerRef={calloutAnchor}
             isOpen={calloutOpen}
             onOpenChange={setCalloutOpen}
-            tone="info"
-            title="Info"
+            stance="notice"
+            title="Notice"
           >
             Neutral guidance.
           </Callout>
@@ -587,9 +603,9 @@ function OverlaysAndFeedback() {
           variant="solid"
           size="sm"
           segments={[
-            { text: 'main', tone: 'accent', endCap: 'chevron' },
-            { text: '✓ 12', tone: 'info', endCap: 'slant' },
-            { text: '~/proj', tone: 'muted' },
+            { text: 'main', status: 'accent', endCap: 'chevron' },
+            { text: '✓ 12', status: 'info', endCap: 'slant' },
+            { text: '~/proj', status: 'muted' },
           ]}
         />
       </Cell>
@@ -799,7 +815,6 @@ function EditorsAndPlots() {
 }
 
 function LabChrome() {
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
   const [zoom, setZoom] = useState(1);
   return (
     <Section title="Lab chrome">
@@ -823,18 +838,6 @@ function LabChrome() {
           <StatusBar.Section>Zoom: 100%</StatusBar.Section>
         </StatusBar>
       </Cell>
-      <Cell label="Sidebar">
-        <div className="lk-specimen__box">
-          <div className="lk-specimen__box-main">main</div>
-          <Sidebar
-            title="Controls"
-            collapsed={sidebarCollapsed}
-            onToggle={() => setSidebarCollapsed((v) => !v)}
-          >
-            <p>One slider</p>
-          </Sidebar>
-        </div>
-      </Cell>
       <Cell label="Legend, JobProgress">
         <Legend entries={LEGEND} />
         <JobProgress job={JOB} />

package/src/state/labRecords.test.ts

@@ -96,7 +96,10 @@ describe('documents and records', () => {
       ['trial:z', { instrumentName: 'T', order: 0 }],
       ['trial:m', { instrumentName: 'T', order: 0 }],
     ]);
-    expect((joined?.doc.trials as { id: string }[]).map((t) => t.id)).toEqual(['m', 'z']);
+    expect((joined?.doc.trials as { id: string }[] | undefined)?.map((t) => t.id)).toEqual([
+      'm',
+      'z',
+    ]);
   });
 
   it('is null without a meta record', () => {

package/src/state/store.test.ts

@@ -84,7 +84,7 @@ describe('updateTrialState', () => {
     s.getState().updateTrialState('w1', (prev: unknown) => ({
       n: (prev as { n: number }).n + 1,
     }));
-    expect((s.getState().trials[0]?.state as { n: number }).n).toBe(2);
+    expect((s.getState().trials[0]?.state as { n: number } | undefined)?.n).toBe(2);
   });
 });
 
@@ -99,8 +99,8 @@ describe('updateTrialConfig', () => {
       view: { zoom: 1, pan: { x: 0, y: 0 } },
     });
     s.getState().updateTrialConfig('w1', 'x', 99);
-    expect((s.getState().trials[0]?.config as { x: number }).x).toBe(99);
-    expect((s.getState().trials[0]?.config as { y: number }).y).toBe(2);
+    expect((s.getState().trials[0]?.config as { x: number } | undefined)?.x).toBe(99);
+    expect((s.getState().trials[0]?.config as { y: number } | undefined)?.y).toBe(2);
   });
 
   it('writes down a dotted path without disturbing its siblings', () => {
@@ -161,7 +161,7 @@ describe('save/load/delete snapshots', () => {
     s.getState().updateTrialState('w1', { n: 99 });
     const snapId = s.getState().savedSnapshots[0]?.id ?? '';
     s.getState().loadSnapshot(snapId, 'w1');
-    expect((s.getState().trials[0]?.state as { n: number }).n).toBe(5);
+    expect((s.getState().trials[0]?.state as { n: number } | undefined)?.n).toBe(5);
   });
 
   it('loadSnapshot restores the auto paths the trial had when saved', () => {

package/src/state/types.ts

@@ -1,3 +1,4 @@
+import type { ColorModePreference } from '@weasel-js/theme';
 import type { Auto } from '../config/auto';
 import type { ConfigPath, ResolvedConfig, ValueAtPath } from '../config/types';
 import type { InstrumentList } from '../instrument/types';
@@ -78,7 +79,7 @@ export interface SavedSnapshot {
 }
 
 /** `auto` follows the OS; the other two are an explicit choice. */
-export type LabMode = 'auto' | 'light' | 'dark';
+export type LabMode = ColorModePreference;
 
 /** How much room the lab's own chrome takes — the theme's density axis, named
  *  the way the theme names it. A lab's instruments are unaffected: this sizes

package/src/state/useTrialState.test.tsx

@@ -173,7 +173,7 @@ describe('auto paths', () => {
     store.getState().updateTrialConfig('w1', 'gap', 30);
     const rec = store.getState().trials[0];
     expect(rec?.auto).toBeUndefined();
-    expect((rec?.config as { gap: number }).gap).toBe(30);
+    expect((rec?.config as { gap: number } | undefined)?.gap).toBe(30);
   });
 
   it('does not allocate a new record when the path is already auto', () => {

package/src/styles.less

@@ -1,10 +1,12 @@
 // Imports compile-time only. Component .less files are added in later steps.
+// 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';
 @import './theme/base.less';
 @import './lab/Workspace.less';
 @import './lab/LabShell.less';
 @import './lab/LabSwitcher.less';
 @import './primitives/Toolbar.less';
-@import './primitives/Sidebar.less';
 @import './primitives/Split.less';
 @import './primitives/ZoomControl.less';
 @import './primitives/StatusBar.less';
@@ -17,11 +19,13 @@
 @import './trial/Trial.less';
 @import './chrome/regions/ViewportRegion.less';
 @import './chrome/regions/PaletteRegion.less';
+@import './chrome/regions/SidebarRegion.less';
 @import './controls/ControlPanel.less';
 @import './canvas/CanvasStack.less';
 @import './canvas/Stage.less';
+@import './canvas/LinkedCursor.less';
+@import './overview/TrialOverview.less';
 @import './loupe/Loupe.less';
-@import './layers/LayerList.less';
 @import './annotations/Annotations.less';
 @import './dragdrop/Palette.less';
 @import './dragdrop/DragGhost.less';

package/src/theme/Interstellar.stories.tsx

@@ -1,14 +1,7 @@
 import type { Meta, StoryObj } from '@weasel-js/forge';
 import type { TokenName } from '@weasel-js/theme';
 import { useTheme } from '@weasel-js/theme/react';
-import {
-  CheckboxRow,
-  ColorRow,
-  PropertyList,
-  PropertyPanel,
-  SliderRow,
-  TextRow,
-} from '@weasel-js/ui';
+import { PropertyField, PropertyList, PropertyPanel } from '@weasel-js/ui';
 import './Interstellar.stories.less';
 
 const meta: Meta = {
@@ -148,7 +141,9 @@ function LivePanelPreview() {
       <h3 className="lk-theme-doc__heading">Live panel</h3>
       <PropertyPanel title="Sample">
         <PropertyList>
-          <SliderRow
+          <PropertyField
+            kind="number"
+            control="slider"
             label="Opacity"
             value={0.65}
             min={0}
@@ -157,10 +152,10 @@ function LivePanelPreview() {
             onChange={() => {}}
             format={(v) => v.toFixed(2)}
           />
-          <ColorRow label="Fill" value="#b08adb" onChange={() => {}} />
-          <ColorRow label="Stroke" value="#1a1428" onChange={() => {}} />
-          <TextRow label="Name" value="Untitled" onChange={() => {}} />
-          <CheckboxRow label="Visible" value={true} onChange={() => {}} />
+          <PropertyField kind="color" label="Fill" value="#b08adb" onChange={() => {}} />
+          <PropertyField kind="color" label="Stroke" value="#1a1428" onChange={() => {}} />
+          <PropertyField kind="string" label="Name" value="Untitled" onChange={() => {}} />
+          <PropertyField kind="boolean" label="Visible" value={true} onChange={() => {}} />
         </PropertyList>
       </PropertyPanel>
     </div>

package/src/theme/base.less

@@ -1,25 +1,8 @@
-// Self-hosted Oswald (variable font, wght axis 200–700) for the headline
-// typeface. Sourced from @weasel-js/theme; build:fonts copies it into dist/fonts.
-@font-face {
-  font-family: 'Oswald';
-  font-style: normal;
-  font-weight: 200 700;
-  font-display: swap;
-  // URL is resolved relative to the COMPILED stylesheet at dist/styles.css,
-  // so this points to dist/fonts/. Source-tree usage (less compilation
-  // happens before the file is moved) doesn't need to resolve the URL.
-  src: url('./fonts/oswald-latin-variable.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
-    U+2212, U+2215, U+FEFF, U+FFFD;
-}
+// The Oswald and Inter faces come from @weasel-js/theme/faces.css, imported at
+// the top of styles.less.
 
 // Resets and global element defaults.
 .lk-root {
-  // labkit's own vocabulary over the theme's raw scale — named for the thing
-  // rather than the step, so "the workspace is too tight" has one place to go.
-  --lk-workspace-pad: var(--wzl-space-sm);
-
   font-family: var(--wzl-font-ui);
   font-size: var(--wzl-font-size);
   font-weight: var(--wzl-font-weight-light);
@@ -52,7 +35,7 @@
 
     &:hover {
       border-color: var(--wzl-accent);
-      color: var(--wzl-accent);
+      color: var(--wzl-accent-fg);
     }
 
     &:focus-visible {

package/src/theme/interstellar.test.ts

@@ -1,4 +1,4 @@
-import { resolveTheme, THEME_SOURCES, type ThemeDefinition } from '@weasel-js/theme';
+import { resolveTheme, THEME_SOURCES, type ThemeDefinition, weaselTheme } from '@weasel-js/theme';
 import { derive } from '@weasel-js/theme/engine';
 import { describe, expect, it } from 'vitest';
 import { interstellarTheme } from './interstellar';
@@ -19,8 +19,11 @@ describe('interstellarTheme', () => {
     // Values carried over verbatim from the retired Less.
     expect(dark['--wzl-surface']).toBe('#0a0a14');
     expect(dark['--wzl-accent']).toBe('#b08adb');
-    expect(light['--wzl-surface']).toBe('#fafaf7');
-    expect(light['--wzl-accent']).toBe('#a86f3c');
+    // Light mode is weasel's own: interstellar restyles the dark only.
+    const weasel = resolveTheme(weaselTheme, { mode: 'light' });
+    expect(light['--wzl-surface']).toBe(weasel['--wzl-surface']);
+    expect(light['--wzl-accent']).toBe(weasel['--wzl-accent']);
+    expect(light['--wzl-border']).toBe(weasel['--wzl-border']);
 
     // Inherited from weasel — interstellar overrides values, not the token set.
     expect(dark['--wzl-space-md']).toBe('12px');

package/src/theme/interstellar.theme.json

@@ -27,10 +27,6 @@
       "dark": {
         "value": "#0a0a14",
         "type": "color"
-      },
-      "light": {
-        "value": "#fafaf7",
-        "type": "color"
       }
     },
     "surface-raised": {
@@ -38,10 +34,6 @@
       "dark": {
         "value": "rgba(20, 20, 36, 0.55)",
         "type": "color"
-      },
-      "light": {
-        "value": "#ffffff",
-        "type": "color"
       }
     },
     "surface-sunken": {
@@ -49,10 +41,6 @@
       "dark": {
         "value": "#02020a",
         "type": "color"
-      },
-      "light": {
-        "value": "#f0ebe2",
-        "type": "color"
       }
     },
     "border": {
@@ -60,10 +48,6 @@
       "dark": {
         "value": "rgba(255, 255, 255, 0.14)",
         "type": "color"
-      },
-      "light": {
-        "value": "#c9bba5",
-        "type": "color"
       }
     },
     "line-subtle": {
@@ -71,10 +55,6 @@
       "dark": {
         "value": "rgba(255, 255, 255, 0.08)",
         "type": "color"
-      },
-      "light": {
-        "value": "rgba(0, 0, 0, 0.08)",
-        "type": "color"
       }
     },
     "fg": {
@@ -82,10 +62,6 @@
       "dark": {
         "value": "#e8e8f0",
         "type": "color"
-      },
-      "light": {
-        "value": "#2a2018",
-        "type": "color"
       }
     },
     "fg-muted": {
@@ -93,10 +69,6 @@
       "dark": {
         "value": "#a8a8c0",
         "type": "color"
-      },
-      "light": {
-        "value": "#6b5c4a",
-        "type": "color"
       }
     },
     "fg-subtle": {
@@ -104,10 +76,6 @@
       "dark": {
         "value": "#5a5a78",
         "type": "color"
-      },
-      "light": {
-        "value": "#a89b85",
-        "type": "color"
       }
     },
     "accent": {
@@ -115,10 +83,6 @@
       "dark": {
         "value": "#b08adb",
         "type": "color"
-      },
-      "light": {
-        "value": "#a86f3c",
-        "type": "color"
       }
     },
     "accent-hover": {
@@ -126,10 +90,6 @@
       "dark": {
         "value": "#c6a3ee",
         "type": "color"
-      },
-      "light": {
-        "value": "#c2854f",
-        "type": "color"
       }
     },
     "focus-ring": {
@@ -137,10 +97,6 @@
       "dark": {
         "value": "rgba(176, 138, 219, 0.45)",
         "type": "color"
-      },
-      "light": {
-        "value": "rgba(168, 111, 60, 0.35)",
-        "type": "color"
       }
     },
     "shadow": {
@@ -148,10 +104,6 @@
       "dark": {
         "value": "rgba(0, 0, 0, 0.7)",
         "type": "color"
-      },
-      "light": {
-        "value": "rgba(80, 60, 40, 0.18)",
-        "type": "color"
       }
     },
     "border-strong": {
@@ -159,10 +111,6 @@
       "dark": {
         "value": "rgba(255, 255, 255, 0.36)",
         "type": "color"
-      },
-      "light": {
-        "value": "#9e8b71",
-        "type": "color"
       }
     },
     "backdrop": {
@@ -170,10 +118,6 @@
       "dark": {
         "value": "radial-gradient(ellipse 60% 80% at 18% 30%, rgba(150, 80, 200, 0.22), transparent 70%), radial-gradient(ellipse 55% 90% at 78% 70%, rgba(220, 100, 140, 0.18), transparent 65%), radial-gradient(ellipse 50% 70% at 50% 50%, rgba(60, 110, 200, 0.18), transparent 75%), radial-gradient(ellipse at center, #0a0a18 0%, #02020a 100%)",
         "type": "gradient"
-      },
-      "light": {
-        "value": "none",
-        "type": "gradient"
       }
     }
   }

package/src/theme/interstellar.ts

@@ -2,8 +2,8 @@ import { defineTheme, type Theme, type ThemeInput, weaselTheme } from '@weasel-j
 import definition from './interstellar.theme.json' with { type: 'json' };
 
 /**
- * labkit's theme: a cosmic dark and a warm parchment light, extending the
- * built-in weasel theme. A pins-only theme definition: nothing in it is
+ * labkit's theme: a cosmic dark over the built-in weasel theme, whose light
+ * mode it keeps as is. A pins-only theme definition: nothing in it is
  * derived, so it loads without the engine.
  */
 export const interstellarTheme: Theme = defineTheme({

package/src/tools/labTool.ts

@@ -1,11 +1,15 @@
+import { labAnnotationTools } from '../annotations/toolMap';
 import type { InstrumentList } from '../instrument/types';
 
 /**
  * The tool the lab's slot holds, once its default is applied: a lab with any
  * annotating instrument starts in `pointer`, so a first click reaches the
- * instrument rather than the marks over it.
+ * instrument rather than the marks over it, or in the first annotation tool
+ * its rail carries when `pointer` is not among them.
  */
 export function resolveLabTool(slot: string | null, instruments: InstrumentList): string | null {
   if (slot !== null) return slot;
-  return instruments.some((i) => i.annotations != null) ? 'pointer' : null;
+  const tools = labAnnotationTools(instruments);
+  if (tools.some((t) => t.id === 'pointer')) return 'pointer';
+  return tools[0]?.id ?? null;
 }