@weasel-js/labkit 1.4.0-pre.0 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weasel-js/labkit",
-  "version": "1.4.0-pre.0",
+  "version": "1.4.0",
   "description": "React widgets for building self-contained interactive lab pages",
   "license": "MIT",
   "author": "orochi235",
@@ -93,7 +93,7 @@
     "dev:drag": "LABKIT_EXAMPLE=drag-lab vite",
     "dev:weasel": "LABKIT_EXAMPLE=weasel-lab vite",
     "build": "tsup && npm run build:dts && npm run build:css && npm run build:fonts",
-    "build:dts": "tsx scripts/build-dts.mts",
+    "build:dts": "NODE_OPTIONS=--max-old-space-size=8192 tsx scripts/build-dts.mts",
     "prepublishOnly": "npm run build",
     "build:css": "node scripts/build-css.mjs",
     "build:fonts": "mkdir -p dist/fonts && cp ../theme/fonts/*.woff2 dist/fonts/",
@@ -114,11 +114,11 @@
     "react-dom": "^19.0.0"
   },
   "dependencies": {
-    "@weasel-js/core": "1.4.0-pre.0",
-    "@weasel-js/loupe": "1.4.0-pre.0",
-    "@weasel-js/svg": "1.4.0-pre.0",
-    "@weasel-js/theme": "1.4.0-pre.0",
-    "@weasel-js/ui": "1.4.0-pre.0",
+    "@weasel-js/core": "1.4.0",
+    "@weasel-js/loupe": "1.4.0",
+    "@weasel-js/svg": "1.4.0",
+    "@weasel-js/theme": "1.4.0",
+    "@weasel-js/ui": "1.4.0",
     "earcut": "2.2.4",
     "polygon-clipping": "^0.15.7",
     "react-aria-components": "^1.5.0",
@@ -129,7 +129,7 @@
     "@biomejs/biome": "^2.4.12",
     "@rollup/plugin-alias": "^6.0.0",
     "@testing-library/jest-dom": "^6.6.0",
-    "@weasel-js/modes": "1.4.0-pre.0",
+    "@weasel-js/modes": "1.4.0",
     "less": "^4.2.0",
     "rollup-plugin-dts": "^6.4.1",
     "tsx": "^4.19.0",

package/src/annotations/AnnotationOverlay.tsx

@@ -9,7 +9,7 @@ import {
 import { type CSSProperties, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import type { Rect } from '../surface/rect';
-import { useSurfaceCanvas, useSurfaceOptional } from '../surface/useSurfaceTile';
+import { useSurfaceCanvas, useSurfaceOptional, useTileId } from '../surface/useSurfaceTile';
 import { createMarkDrawOne } from './drawOne';
 import type { WorldRect } from './frac';
 import { seenFrom } from './staleness';
@@ -101,12 +101,16 @@ export function AnnotationOverlay({
   configRef.current = config;
 
   const id = target.id;
+  // The surface's tile namespace is the whole lab's, and every trial of an
+  // instrument declares the same target ids — so the tile is registered under
+  // the trial-scoped key, not under `id`.
+  const tileId = useTileId(id);
   const lastTile = useRef<HTMLElement | null>(null);
   useEffect(() => {
     const el = target.ref.current ?? null;
     if (el === lastTile.current) return;
     lastTile.current = el;
-    surface?.registerTile(id, el);
+    surface?.registerTile(tileId, el);
   });
   useEffect(
     () => () => {
@@ -114,20 +118,20 @@ export function AnnotationOverlay({
       // commit. StrictMode's mount / unmount / mount would otherwise take the
       // tile out and never put it back, and the surface would measure nothing.
       lastTile.current = null;
-      surface?.registerTile(id, null);
+      surface?.registerTile(tileId, null);
     },
-    [surface, id],
+    [surface, tileId],
   );
 
   useEffect(
     () =>
-      surface?.registerPainter(id, (next) => {
+      surface?.registerPainter(tileId, (next) => {
         setRect((prev) => (sameRect(prev, next) ? prev : next));
         // The shared buffer was cleared if it resized this frame; this pane's
         // own loop has no way to know that.
         sceneCanvas.current?.requestRedraw();
       }),
-    [surface, id],
+    [surface, tileId],
   );
 
   const container = surface?.getContainer() ?? null;

package/src/annotations/Annotations.less

@@ -61,6 +61,12 @@
   cursor: pointer;
 }
 
+// Box and typography come from <Input>. This only says how the field shares
+// the row.
+.lk-mark-list__title {
+  width: 100%;
+}
+
 // The export panel: a target to export, how, and at what resolution. Held in
 // a popover because a mark belongs to a target — with more than one pane,
 // "export" on its own does not say what.

package/src/annotations/Annotations.overlay.test.tsx

@@ -10,7 +10,9 @@
 import { act, render } from '@testing-library/react';
 import { StrictMode, useRef } from 'react';
 import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
+import { TrialIdProvider } from '../state/context';
 import { SurfaceCanvasContext, SurfaceContext } from '../surface/SurfaceContext';
+import type { SurfaceHandle } from '../surface/useTiledSurface';
 import { useTiledSurface } from '../surface/useTiledSurface';
 import { AnnotationTargets } from './AnnotationTargets';
 import { createAnnotationStore } from './store';
@@ -140,3 +142,114 @@ describe('<AnnotationTargets>', () => {
     expect(document.querySelectorAll('.lk-annotate__input')).toHaveLength(0);
   });
 });
+
+/** One trial's worth of the harness above: its own pane element, its own
+ *  overlay, and the target id every trial of an instrument shares. */
+function OneTrial({
+  trialId,
+  box,
+}: {
+  trialId: string;
+  box: { left: number; top: number; width: number; height: number };
+}) {
+  const pane = useRef<HTMLDivElement | null>(null);
+  const annotations = useRef(createAnnotationStore({ targets: () => [] })).current;
+  const capability: AnnotationsCapability = {
+    targets: (): AnnotationTarget[] => [{ id: 'pane:a', ref: pane, content: { w: 200, h: 100 } }],
+  };
+  return (
+    <TrialIdProvider trialId={trialId}>
+      <div
+        data-testid={trialId}
+        ref={(el) => {
+          pane.current = el;
+          if (el) stubBox(el, box.left, box.top, box.width, box.height);
+        }}
+      />
+      <AnnotationTargets
+        capability={capability}
+        state={{}}
+        config={{}}
+        annotations={annotations}
+        activeToolId="rect"
+      />
+    </TrialIdProvider>
+  );
+}
+
+describe('two trials of one instrument', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.stubGlobal('requestAnimationFrame', (cb: FrameRequestCallback) =>
+      setTimeout(() => cb(0), 16),
+    );
+    vi.stubGlobal('cancelAnimationFrame', (id: number) => clearTimeout(id));
+  });
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.unstubAllGlobals();
+    vi.restoreAllMocks();
+  });
+
+  // An instrument names its regions once, so every trial of it declares the
+  // same target id. Sharing the surface's tile namespace, the trial that opens
+  // second takes the first one's rect, its observer registration and its
+  // painter — and the first is never told it moved again, so it keeps the box
+  // it was measured at while it was the only trial open.
+  it('re-measures a trial that was alone when a second one opens beside it', () => {
+    let handle: SurfaceHandle | null = null;
+
+    function Trials({ second }: { second: boolean }) {
+      const surface = useTiledSurface({ onFrame: () => {} });
+      handle = surface;
+      return (
+        <SurfaceContext.Provider value={surface}>
+          <SurfaceCanvasContext.Provider value={null}>
+            <div
+              ref={(el) => {
+                if (!el) return;
+                stubBox(el, 0, 0, 1200, 700);
+                surface.containerRef(el);
+              }}
+            >
+              <OneTrial
+                trialId="t1"
+                box={{ left: 0, top: 0, width: second ? 476 : 666, height: 639 }}
+              />
+              {second ? (
+                <OneTrial trialId="t2" box={{ left: 500, top: 0, width: 476, height: 639 }} />
+              ) : null}
+            </div>
+          </SurfaceCanvasContext.Provider>
+        </SurfaceContext.Provider>
+      );
+    }
+
+    const boxes = (root: HTMLElement) => [
+      ...root.querySelectorAll<HTMLElement>('.lk-annotate__input'),
+    ];
+    const widths = (root: HTMLElement) =>
+      boxes(root).map((el) => el.style.getPropertyValue('--lk-anno-w'));
+
+    const { container, rerender } = render(<Trials second={false} />, { wrapper: StrictMode });
+    act(() => {
+      vi.advanceTimersByTime(64);
+    });
+    expect(widths(container)).toEqual(['666px']);
+
+    // The grid halves the open trial to make room. jsdom's ResizeObserver never
+    // fires, so this takes `Workspace`'s path — the one it takes anyway for a
+    // tile that moves without resizing, which no observer would have seen.
+    rerender(<Trials second={true} />);
+    act(() => {
+      handle?.invalidateRects();
+      vi.advanceTimersByTime(64);
+    });
+
+    expect(widths(container)).toEqual(['476px', '476px']);
+    expect(boxes(container).map((el) => el.style.getPropertyValue('--lk-anno-x'))).toEqual([
+      '0px',
+      '500px',
+    ]);
+  });
+});

package/src/annotations/MarkList.tsx

@@ -1,3 +1,4 @@
+import { Input } from '../passthrough/weasel-ui';
 import { useAnnotations } from './AnnotationsContext';
 import type { AnnotationMeaning } from './types';
 
@@ -43,12 +44,12 @@ export function MarkList({ meaning, config }: MarkListProps) {
                 ×
               </button>
             </div>
-            <input
+            <Input
               className="lk-mark-list__title"
               aria-label={`Title of ${a.kind} on ${a.target}`}
               value={a.title ?? ''}
               placeholder="Untitled"
-              onChange={(e) => marks.update(a.id, { title: e.target.value })}
+              onChange={(next) => marks.update(a.id, { title: next })}
             />
             {statuses.length > 0 ? (
               // A native select: it carries role, name and keyboard operability

package/src/annotations/store.test.ts

@@ -155,6 +155,78 @@ describe('the annotation store', () => {
     expect(fn.mock.calls.length).toBe(before);
   });
 
+  // What the overlay's canvas does to a selection is `scene.setSelection` —
+  // weasel binds `useSelection` to the scene it is handed, so the selection is
+  // scene state, not React state, and these exercise the real write. What they
+  // do NOT reach is the pointer half: no click, marquee or handle runs here,
+  // because jsdom has no WebGL2 and the overlay's canvas never paints or
+  // hit-tests. That the canvas is bound to this scene is core's claim.
+  it('merges the selection across targets, and maps it back to annotation ids', () => {
+    const store = makeStore();
+    const onNaive = store.add(RING);
+    const onOcct = store.add({ ...RING, target: 'occt' });
+
+    store.setSelection([onOcct, onNaive]);
+    // Declaration order, not call order: one merged answer over several scenes.
+    expect(store.selection()).toEqual([onNaive, onOcct]);
+    expect(store.selection().map((id) => store.get(id)?.target)).toEqual(['naive', 'occt']);
+  });
+
+  it('reads back what the canvas would have written into the scene', () => {
+    const store = makeStore();
+    const id = store.add(RING);
+    const [node] = [...store.sceneFor('naive').renderOrder()];
+    if (node === undefined) throw new Error('unreachable');
+
+    store.sceneFor('naive').setSelection([node]);
+    expect(store.selection()).toEqual([id]);
+  });
+
+  it('replaces rather than adds, clearing a target the new selection omits', () => {
+    const store = makeStore();
+    const onNaive = store.add(RING);
+    const onOcct = store.add({ ...RING, target: 'occt' });
+
+    store.setSelection([onNaive]);
+    store.setSelection([onOcct]);
+    expect(store.selection()).toEqual([onOcct]);
+    expect(store.sceneFor('naive').getSelection()).toEqual([]);
+  });
+
+  it('drops an id it cannot resolve instead of throwing', () => {
+    const store = makeStore();
+    const id = store.add(RING);
+
+    expect(() => store.setSelection(['naive/nope', 'ghost/1', 'noslash', ''])).not.toThrow();
+    expect(store.selection()).toEqual([]);
+
+    store.setSelection([id, id]);
+    expect(store.selection()).toEqual([id]);
+  });
+
+  it('stops reporting a selected mark once it is removed', () => {
+    const store = makeStore();
+    const id = store.add(RING);
+    store.setSelection([id]);
+    store.remove(id);
+    expect(store.selection()).toEqual([]);
+  });
+
+  it('notifies subscribers when the selection changes', () => {
+    const store = makeStore();
+    const id = store.add(RING);
+    const fn = vi.fn();
+    store.subscribe(fn);
+
+    store.setSelection([id]);
+    expect(fn).toHaveBeenCalled();
+
+    // A write that changes nothing is not an event.
+    const before = fn.mock.calls.length;
+    store.setSelection([id]);
+    expect(fn.mock.calls.length).toBe(before);
+  });
+
   it('round-trips through JSON, and the snapshot is JSON-clean', () => {
     const store = makeStore();
     const id = store.add(RING, { angle: 'iso', shading: 'outline' });

package/src/annotations/store.ts

@@ -221,6 +221,36 @@ export function createAnnotationStore(opts: AnnotationStoreOptions): Annotations
       return history.redo(historySceneAt);
     },
 
+    selection() {
+      const out: string[] = [];
+      for (const target of liveTargets()) {
+        const scene = scenes.get(target);
+        if (!scene) continue;
+        for (const node of scene.getSelection()) {
+          if (scene.get(node)) out.push(`${target}/${String(node)}`);
+        }
+      }
+      return out;
+    },
+
+    setSelection(ids) {
+      const wanted = new Map<string, string[]>();
+      for (const id of ids) {
+        const found = nodeOf(id);
+        if (!found) continue;
+        const node = String(found.node.id);
+        const on = wanted.get(found.target);
+        if (!on) wanted.set(found.target, [node]);
+        else if (!on.includes(node)) on.push(node);
+      }
+      for (const [target, scene] of scenes) {
+        const next = wanted.get(target) ?? [];
+        const now = scene.getSelection();
+        if (now.length === next.length && next.every((n, i) => String(now[i]) === n)) continue;
+        scene.setSelection(next.map(asNodeId));
+      }
+    },
+
     subscribe(fn) {
       subs.add(fn);
       return () => {

package/src/annotations/types.ts

@@ -196,8 +196,15 @@ export interface AnnotationsApi {
   within(target: string, box: FracRect): Annotation[];
   /** Whether `a`'s position still describes the picture `config` produces. */
   isStale(a: Annotation, config: unknown): boolean;
-  /** Fires after every mutation. No delta: the scene does not diff, so
-   *  re-query rather than expecting a change payload. */
+  /** The marks the user currently has selected, across every target, as
+   *  annotation ids. Every one resolves through `get`. */
+  selection(): readonly string[];
+  /** Replace the selection. An id naming a target or a mark that is not
+   *  there is dropped, the way `update` and `remove` ignore one. */
+  setSelection(ids: readonly string[]): void;
+  /** Fires after every mutation *and* after a selection change — weasel keeps
+   *  a canvas's selection on the scene, so both already arrive on this one
+   *  channel. No delta: re-query, and re-read `selection()`. */
   subscribe(fn: () => void): () => void;
 
   /** Whether the last mark change on any target can be taken back. Weasel

package/src/canvas/index.ts

@@ -6,5 +6,16 @@ export type { ZoomAtOptions } from './camera';
 export { centerOn, zoomAt } from './camera';
 export { screenToWorld, worldToScreen } from './canvasCoords';
 export type { CanvasLayerDescriptor } from './useLayerScheduler';
+export type { OrbitHandlers, OrbitView, UseOrbitOptions, Vec3 } from './useOrbit';
+export {
+  clampPitch,
+  orbitAfterDrag,
+  orbitAfterWheel,
+  PITCH_LIMIT,
+  useOrbit,
+  wrapYaw,
+} from './useOrbit';
+export type { PanZoomHandlers, UsePanZoomOptions } from './usePanZoom';
+export { usePanZoom } from './usePanZoom';
 export type { ViewportSize, WorldFrame, WorldSpec } from './worldSpec';
 export { applyCamera, DEFAULT_FRAME, resolveFrame } from './worldSpec';

package/src/config/builder.test.ts

@@ -29,6 +29,11 @@ describe('builder', () => {
     });
   });
 
+  it('annotates a number with a display suffix', () => {
+    const n = f.number(20).suffix('px');
+    expect(n.annotations.suffix).toBe('px');
+  });
+
   it('keeps a custom node kind across a chain', () => {
     const n = f.custom('vector2', { x: 0 }).label('Offset');
     expect(n.kind).toBe('vector2');

package/src/config/builder.ts

@@ -90,6 +90,12 @@ class NumberNode extends BaseNode<number> {
     return this.ann({ step });
   }
 
+  /** A display suffix for the value — `'px'`, `'ms'`, `'°'`. Presentation only:
+   *  it is never parsed, and the stored value stays a plain number. */
+  suffix(suffix: string): this {
+    return this.ann({ suffix });
+  }
+
   /** Force a slider even without both bounds. */
   slider(): this {
     return this.ann({ control: 'slider' });

package/src/config/types.ts

@@ -24,6 +24,7 @@ export interface Annotations {
   min?: number;
   max?: number;
   step?: number;
+  suffix?: string;
   control?: string;
   options?: readonly ConfigOption[];
   placeholder?: string;

package/src/controls/ControlPanel.test.tsx

@@ -420,3 +420,26 @@ describe('<ControlPanel> packing', () => {
     expect(rowOf('Width')?.className).toMatch(/rowInline/);
   });
 });
+
+describe('<ControlPanel> suffix', () => {
+  const panel = (node: ReturnType<typeof f.number>) =>
+    render(
+      <ControlPanel
+        schema={resolveConfigSchema(f.schema({ width: node.label('Width') }), [])}
+        config={{ width: 20 }}
+        setConfig={vi.fn()}
+      />,
+    );
+
+  it('suffixes a slider readout with the suffix the leaf declares', () => {
+    const { container } = panel(f.number(20).range(0, 100).slider().suffix('px'));
+    expect(container.querySelector('input[type="range"]')).not.toBeNull();
+    expect(container.textContent).toContain('px');
+  });
+
+  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.textContent).toContain('px');
+  });
+});

package/src/controls/ControlPanel.tsx

@@ -159,6 +159,7 @@ function ControlRow<TC extends Record<string, unknown>>({
       const min = extra<number>(leaf, 'min');
       const max = extra<number>(leaf, 'max');
       const step = extra<number>(leaf, 'step');
+      const suffix = extra<string>(leaf, 'suffix');
       if (extra<string>(leaf, 'control') === 'slider' && min !== undefined && max !== undefined) {
         return (
           <SliderRow
@@ -167,6 +168,7 @@ function ControlRow<TC extends Record<string, unknown>>({
             min={min}
             max={max}
             step={step}
+            unit={suffix}
             onChange={write}
             layout={layout}
             span={wide}
@@ -186,6 +188,7 @@ function ControlRow<TC extends Record<string, unknown>>({
           min={min}
           max={max}
           step={step}
+          unit={suffix}
           onChange={(n) => write(Math.min(hi, Math.max(lo, n)))}
           layout={layout}
           description={description}

package/src/index.test.ts

@@ -67,6 +67,7 @@ describe('surface, job and orbit entry points', () => {
     expect(typeof kit.fracToWorld).toBe('function');
     expect(typeof kit.useOrbit).toBe('function');
     expect(typeof kit.orbitAfterDrag).toBe('function');
+    expect(typeof kit.usePanZoom).toBe('function');
     expect(typeof kit.useJob).toBe('function');
     expect(typeof kit.as2DView).toBe('function');
     expect(kit.SurfaceContext).toBeDefined();

package/src/index.ts

@@ -115,6 +115,12 @@ export type {
   CanvasStackContextValue,
   CanvasStackProps,
   CanvasStackSurface,
+  OrbitHandlers,
+  OrbitView,
+  PanZoomHandlers,
+  UseOrbitOptions,
+  UsePanZoomOptions,
+  Vec3,
   ViewportSize,
   WorldFrame,
   WorldSpec,
@@ -125,21 +131,19 @@ export {
   CanvasStack,
   CanvasStackContext,
   centerOn,
-  DEFAULT_FRAME,
-  resolveFrame,
-  screenToWorld,
-  worldToScreen,
-  zoomAt,
-} from './canvas';
-export type { OrbitHandlers, OrbitView, UseOrbitOptions, Vec3 } from './canvas/useOrbit';
-export {
   clampPitch,
+  DEFAULT_FRAME,
   orbitAfterDrag,
   orbitAfterWheel,
   PITCH_LIMIT,
+  resolveFrame,
+  screenToWorld,
   useOrbit,
+  usePanZoom,
+  worldToScreen,
   wrapYaw,
-} from './canvas/useOrbit';
+  zoomAt,
+} from './canvas';
 export * from './chrome';
 export { f } from './config/builder';
 export { fromConfigFields } from './config/fromConfigField';

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

@@ -12,7 +12,7 @@ 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 } from '../surface/useSurfaceTile';
+import { useSurfaceOptional, useSurfaceTile, useTileId } from '../surface/useSurfaceTile';
 import type { SurfaceFrame, SurfaceHandle } from '../surface/useTiledSurface';
 import { useTiledSurface } from '../surface/useTiledSurface';
 import { Lab } from './Lab';
@@ -39,9 +39,13 @@ beforeAll(() => {
 });
 
 let seen: SurfaceHandle | null | 'not-rendered' = 'not-rendered';
+/** The key the probe's tile is actually registered under: a tile inside a
+ *  trial is scoped by it, and the trial's id is minted by the store. */
+let paneTileId = 'pane';
 
 function Probe() {
   seen = useSurfaceOptional();
+  paneTileId = useTileId('pane');
   const tile = useSurfaceTile('pane');
   return <div data-testid="pane" ref={tile} />;
 }
@@ -146,7 +150,7 @@ describe('<Lab> tile round trip', () => {
 
     act(() => {
       handle?.invalidateRects();
-      handle?.invalidate('pane');
+      handle?.invalidate(paneTileId);
     });
     act(() => {
       vi.advanceTimersByTime(64);
@@ -156,7 +160,8 @@ describe('<Lab> tile round trip', () => {
     // that passes because nothing ran is the failure mode this arc keeps
     // hitting.
     expect(frames.length).toBeGreaterThan(0);
-    const rect = frames[frames.length - 1]?.rects.get('pane');
+    expect(paneTileId).not.toBe('pane');
+    const rect = frames[frames.length - 1]?.rects.get(paneTileId);
     expect(rect).toEqual({ x: 240, y: 100, w: 320, h: 200 });
   });
 });

package/src/lab/LabHeader.test.tsx

@@ -39,4 +39,16 @@ describe('<LabHeader>', () => {
       expect(screen.getByRole('radio', { name: label })).toBeInTheDocument();
     }
   });
+
+  it('draws each color mode as a glyph, with the word only as its name', () => {
+    // The assertion above passes whether the segment holds text or an icon,
+    // because both routes produce the same accessible name. This is the one
+    // that can tell them apart.
+    render(<Lab instruments={[Stub]} defaultInstrument="Stub" storage={null} />);
+    for (const label of ['Auto', 'Light', 'Dark']) {
+      const segment = screen.getByRole('radio', { name: label });
+      expect(segment.querySelector('svg')).not.toBeNull();
+      expect(segment).toHaveTextContent('');
+    }
+  });
 });

package/src/lab/LabHeader.tsx

@@ -1,14 +1,22 @@
-import { AddIcon } from '@weasel-js/ui';
+import { AddIcon, ModeAutoIcon, ModeDarkIcon, ModeLightIcon } 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 glyph is the segment's content and the word is its accessible name, so
+// the bar stays a three-way radiogroup announcing Auto / Light / Dark.
+const MODES = [
+  { value: 'auto' as LabMode, label: 'Auto', glyph: <ModeAutoIcon size={14} /> },
+  { value: 'light' as LabMode, label: 'Light', glyph: <ModeLightIcon size={14} /> },
+  { value: 'dark' as LabMode, label: 'Dark', glyph: <ModeDarkIcon size={14} /> },
 ];
 
+const MODE_ITEMS = MODES.map(({ value, label, glyph }) => ({
+  value,
+  label: glyph,
+  ariaLabel: label,
+}));
+
 /** 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
@@ -46,7 +54,9 @@ export function LabHeader() {
       <ToggleBar
         className="lk-lab-header__mode"
         ariaLabel="Color mode"
-        items={MODES}
+        size="sm"
+        variant="flat"
+        items={MODE_ITEMS}
         value={lab.mode}
         onChange={(next) => {
           if (next) lab.setMode(next);

package/src/passthrough/weasel-ui.test.ts

@@ -8,6 +8,8 @@ import {
   Dialog,
   Field,
   formatNumber,
+  ICON_PATHS,
+  Icon,
   Input,
   KeyCap,
   MINUS_SIGN,
@@ -69,6 +71,13 @@ describe('weasel-ui passthrough', () => {
     }
   });
 
+  it('re-exports the icon set, so a lab need not depend on weasel-ui itself', () => {
+    expect(['function', 'object']).toContain(typeof Icon);
+    expect(ICON_PATHS.layoutRows).toContain('<rect');
+    expect(ICON_PATHS.layoutColumns).toContain('<rect');
+    expect(ICON_PATHS.layoutGrid).toContain('<rect');
+  });
+
   it('re-exports app-chrome primitives as React components', () => {
     for (const C of [Sidebar, ToolPalette, KeyCap]) {
       expect(C).toBeDefined();