@weasel-js/labkit 1.6.0 → 1.6.1

package/src/overview/TrialOverview.tsx

@@ -0,0 +1,374 @@
+/**
+ * `<TrialOverview>` — the whole of a trial's content at a glance, in a panel
+ * that floats over the stage: the visible rect, a crosshair where the pointer
+ * is on the stage, and a press or drag that moves the stage's camera there.
+ *
+ * It is the labkit form of core's minimap contribution: the same
+ * `minimap.center` / `minimap.pan` actions, run on a dispatcher of its own with
+ * the trial's camera as `rootView`, and the same crosshair geometry.
+ */
+import {
+  ActionsProvider,
+  ActiveToolContextProvider,
+  crosshairRects,
+  DepRegistryProvider,
+  MINIMAP_CENTER,
+  MINIMAP_PAN,
+  minimapCenterAction,
+  minimapPanAction,
+  type Tool,
+  useActionsRegistry,
+  useDepSource,
+  useGestureDispatcher,
+  usePointerPosition,
+  type View,
+  type ViewApi,
+} from '@weasel-js/core';
+import {
+  type CSSProperties,
+  type ReactNode,
+  type RefObject,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+} from 'react';
+import {
+  CameraContext,
+  type CameraContextValue,
+  pointerElsewhere,
+  usePublishPointer,
+} from '../canvas/CameraInput';
+import { CanvasStackContext } from '../canvas/CanvasStackContext';
+import { fromCameraView } from '../canvas/cameraView';
+import type { ViewportSize, WorldFrame } from '../canvas/worldSpec';
+import { FloatingPanel, type FloatingPanelProps } from '../primitives/FloatingPanel';
+import { OverviewMarks } from './OverviewMarks';
+
+/** The view id the overview publishes its pointer under. */
+export const OVERVIEW_VIEW_ID = 'overview';
+
+/** A rect in the instrument's world. */
+export interface OverviewBounds {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+/** What an overview's `render` is handed. */
+export interface OverviewRenderArgs {
+  /** The content's own size in CSS pixels, at zoom 1 — lay out at this size
+   *  and the overview scales it to fit. */
+  size: ViewportSize;
+}
+
+/** Props for `<TrialOverview>`. */
+export interface TrialOverviewProps {
+  /** The overview box, in CSS pixels. */
+  width: number;
+  height: number;
+  /**
+   * DOM content for the overview, laid out at the content's own size — for a
+   * `stage` instrument, typically a lighter copy of what its `render` draws.
+   * Never the instrument's own `render`: its effects would run twice. A canvas
+   * instrument omits it, and the overview redraws the canvas's layers.
+   */
+  render?: (args: OverviewRenderArgs) => ReactNode;
+  /** What to frame, in the instrument's world. Defaults to a stage's content
+   *  rect; a canvas instrument, whose world has no edge, names one. */
+  bounds?: OverviewBounds;
+  /** Panel title. */
+  title?: string;
+  anchor?: FloatingPanelProps['anchor'];
+  persist?: string;
+  className?: string;
+}
+
+const PADDING = 6;
+const OVERVIEW_INPUT: Tool = {
+  id: 'overview',
+  eligibility: { always: true },
+  bindings: [
+    { spec: { kind: 'pointerDown' }, actionId: MINIMAP_CENTER },
+    { spec: { kind: 'drag' }, actionId: MINIMAP_PAN },
+  ],
+};
+const TOOLS_BY_ID: ReadonlyMap<string, Tool> = new Map([[OVERVIEW_INPUT.id, OVERVIEW_INPUT]]);
+const CHANNELS = { wheel: false, pinch: false, contextMenu: false, ingest: false } as const;
+
+/** A world rect as a frame-local one. */
+function toLocalRect(b: OverviewBounds, frame: WorldFrame): OverviewBounds {
+  if (frame.yDir === 1) return b;
+  return { x: b.x, y: -(b.y + b.height), width: b.width, height: b.height };
+}
+
+/** The camera that fits `rect` into `size`, `PADDING` in from every edge. */
+function fitRect(rect: OverviewBounds, size: ViewportSize): View {
+  const s = Math.min(
+    Math.max(1, size.width - 2 * PADDING) / Math.max(rect.width, 1e-9),
+    Math.max(1, size.height - 2 * PADDING) / Math.max(rect.height, 1e-9),
+  );
+  return {
+    x: rect.x + rect.width / 2 - size.width / (2 * s),
+    y: rect.y + rect.height / 2 - size.height / (2 * s),
+    scale: { x: s, y: s },
+  };
+}
+
+/** A canvas's 2D context sized to `size` at the device pixel ratio. */
+function prepare(
+  canvas: HTMLCanvasElement | null,
+  size: ViewportSize,
+): CanvasRenderingContext2D | null {
+  const ctx = canvas?.getContext('2d') ?? null;
+  if (!canvas || !ctx) return null;
+  const dpr = window.devicePixelRatio || 1;
+  const w = Math.round(size.width * dpr);
+  const h = Math.round(size.height * dpr);
+  if (canvas.width !== w) canvas.width = w;
+  if (canvas.height !== h) canvas.height = h;
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  ctx.clearRect(0, 0, size.width, size.height);
+  return ctx;
+}
+
+function cssVar(el: Element | null, name: string, fallback: string): string {
+  if (!el) return fallback;
+  return getComputedStyle(el).getPropertyValue(name).trim() || fallback;
+}
+
+/**
+ * A trial's overview. Mount it from an instrument's `render` (a canvas
+ * instrument) or `stage.overlay` (a DOM stage) — anywhere inside the trial's
+ * camera.
+ */
+export function TrialOverview(props: TrialOverviewProps) {
+  const camera = useContext(CameraContext);
+  if (!camera) return null;
+  return <Overview {...props} camera={camera} />;
+}
+
+function Overview({
+  width,
+  height,
+  render,
+  bounds,
+  title = 'Overview',
+  anchor = 'bottom-left',
+  persist,
+  className,
+  camera,
+}: TrialOverviewProps & { camera: CameraContextValue }) {
+  const size = useMemo(() => ({ width, height }), [width, height]);
+  const content = bounds ? toLocalRect(bounds, camera.frame) : camera.content;
+  const contentKey = content ? `${content.x},${content.y},${content.width},${content.height}` : '';
+  // biome-ignore lint/correctness/useExhaustiveDependencies: `content` is rebuilt every render; its numbers, in `contentKey`, are what the fit depends on.
+  const fit = useMemo(
+    () => (content ? fitRect(content, size) : { x: 0, y: 0, scale: { x: 1, y: 1 } }),
+    [contentKey, size],
+  );
+  const boxRef = useRef<HTMLDivElement | null>(null);
+
+  return (
+    <FloatingPanel
+      anchor={anchor}
+      className={className ? `lk-overview ${className}` : 'lk-overview'}
+      {...(persist ? { persist } : {})}
+    >
+      <div className="lk-overview__title">{title}</div>
+      <div ref={boxRef} className="lk-overview__box" data-no-drag style={boxVars(size)}>
+        {render && content ? (
+          <div className="lk-overview__content" style={contentVars(fit, content)}>
+            {render({ size: { width: content.width, height: content.height } })}
+          </div>
+        ) : null}
+        {render ? null : <LayersCanvas fit={fit} size={size} frame={camera.frame} />}
+        <OverviewMarks fit={fit} camera={camera} />
+        <ChromeCanvas fit={fit} size={size} camera={camera} />
+        <OverviewInput boxRef={boxRef} fit={fit} camera={camera} />
+      </div>
+    </FloatingPanel>
+  );
+}
+
+// The box's size and the content's camera change with props, and a transform
+// has nowhere to live but the element's own style: set as custom properties
+// the stylesheet reads, as `<Stage>` does.
+function boxVars(size: ViewportSize): CSSProperties {
+  return {
+    ['--lk-overview-w' as string]: `${size.width}px`,
+    ['--lk-overview-h' as string]: `${size.height}px`,
+  } as CSSProperties;
+}
+
+function contentVars(fit: View, content: OverviewBounds): CSSProperties {
+  const s = fit.scale.x;
+  return {
+    ['--lk-overview-x' as string]: `${(content.x - fit.x) * s}px`,
+    ['--lk-overview-y' as string]: `${(content.y - fit.y) * s}px`,
+    ['--lk-overview-zoom' as string]: String(s),
+    ['--lk-overview-cw' as string]: `${content.width}px`,
+    ['--lk-overview-ch' as string]: `${content.height}px`,
+  } as CSSProperties;
+}
+
+/** A canvas instrument's layers, redrawn through the fit camera. */
+function LayersCanvas({ fit, size, frame }: { fit: View; size: ViewportSize; frame: WorldFrame }) {
+  const stack = useContext(CanvasStackContext);
+  const ref = useRef<HTMLCanvasElement | null>(null);
+  const layers = stack?.surface?.layers;
+  useLayoutEffect(() => {
+    const ctx = prepare(ref.current, size);
+    if (!ctx || !layers) return;
+    const local: WorldFrame = { originPx: { x: 0, y: 0 }, yDir: frame.yDir };
+    const view = fromCameraView(fit, local);
+    for (const layer of layers) {
+      if (!layer.visible || layer.id.startsWith('__lk_')) continue;
+      ctx.save();
+      layer.render(ctx, view, local);
+      ctx.restore();
+    }
+  }, [layers, fit, size, frame.yDir]);
+  return <canvas ref={ref} className="lk-overview__canvas" />;
+}
+
+/** The visible-rect indicator and the linked crosshair. */
+function ChromeCanvas({
+  fit,
+  size,
+  camera,
+}: {
+  fit: View;
+  size: ViewportSize;
+  camera: CameraContextValue;
+}) {
+  const ref = useRef<HTMLCanvasElement | null>(null);
+  const pointer = usePointerPosition();
+  const root = camera.view.get();
+  const host = camera.view.hostSize?.() ?? null;
+  // No dependency list: this renders only when the pointer or the trial's
+  // camera moved, and either one moves the chrome.
+  useLayoutEffect(() => {
+    const ctx = prepare(ref.current, size);
+    if (!ctx) return;
+    const s = fit.scale.x;
+    const px = (x: number, y: number) => ({ x: (x - fit.x) * s, y: (y - fit.y) * s });
+    if (host) {
+      const a = px(root.x, root.y);
+      ctx.strokeStyle = cssVar(ref.current, '--wzl-fg', '#ffffff');
+      ctx.lineWidth = 1;
+      ctx.setLineDash([2, 3]);
+      ctx.strokeRect(
+        a.x + 0.5,
+        a.y + 0.5,
+        (host.width / root.scale.x) * s,
+        (host.height / root.scale.y) * s,
+      );
+      ctx.setLineDash([]);
+    }
+    const world = pointerElsewhere(pointer, OVERVIEW_VIEW_ID, camera.frame);
+    if (world) {
+      // Back to frame-local: the map is its own inverse.
+      const at = px(world.x, world.y * camera.frame.yDir);
+      const { halo, bars } = crosshairRects(at.x, at.y, 1);
+      ctx.fillStyle = 'rgb(0 0 0 / 60%)';
+      for (const r of halo) ctx.fillRect(r.x, r.y, r.w, r.h);
+      ctx.fillStyle = cssVar(ref.current, '--wzl-accent', '#4c8dff');
+      for (const r of bars) ctx.fillRect(r.x, r.y, r.w, r.h);
+    }
+  });
+  return <canvas ref={ref} className="lk-overview__canvas lk-overview__chrome" />;
+}
+
+/**
+ * The overview's input, on a dispatcher of its own: its actions and deps are
+ * isolated from the trial's, its pointer store is shared with it.
+ */
+function OverviewInput(props: {
+  boxRef: RefObject<HTMLDivElement | null>;
+  fit: View;
+  camera: CameraContextValue;
+}) {
+  return (
+    <DepRegistryProvider>
+      <ActionsProvider>
+        <ActiveToolContextProvider>
+          <OverviewDispatch {...props} />
+        </ActiveToolContextProvider>
+      </ActionsProvider>
+    </DepRegistryProvider>
+  );
+}
+
+function OverviewDispatch({
+  boxRef,
+  fit,
+  camera,
+}: {
+  boxRef: RefObject<HTMLDivElement | null>;
+  fit: View;
+  camera: CameraContextValue;
+}) {
+  const registry = useActionsRegistry();
+  const fitRef = useRef(fit);
+  fitRef.current = fit;
+  const root = camera.view;
+  useDepSource('rootView', () => root as ViewApi);
+
+  useEffect(() => {
+    if (!registry) return;
+    const offs = [registry.register(minimapCenterAction()), registry.register(minimapPanAction())];
+    return () => {
+      for (const off of offs) off();
+    };
+  }, [registry]);
+
+  const clientToLocal = useMemo(
+    () => (cx: number, cy: number) => {
+      const r = boxRef.current?.getBoundingClientRect();
+      const f = fitRef.current;
+      return {
+        x: (cx - (r?.left ?? 0)) / f.scale.x + f.x,
+        y: (cy - (r?.top ?? 0)) / f.scale.y + f.y,
+      };
+    },
+    [boxRef],
+  );
+
+  useGestureDispatcher({
+    canvasRef: boxRef,
+    // Always present: `OverviewInput` mounts the provider directly above.
+    actions: registry as NonNullable<typeof registry>,
+    toolsById: TOOLS_BY_ID,
+    clientToWorld: clientToLocal,
+    keyboard: false,
+    channels: CHANNELS,
+  });
+
+  usePublishPointer(boxRef, clientToLocal, camera.frame, OVERVIEW_VIEW_ID);
+
+  // The box sits inside the stage's element, whose own dispatcher, loupe and
+  // pointer publisher would otherwise take every event that bubbles out of it.
+  useEffect(() => {
+    const el = boxRef.current;
+    if (!el) return;
+    const stop = (e: Event): void => e.stopPropagation();
+    const kinds = [
+      'pointerdown',
+      'pointermove',
+      'pointerup',
+      'click',
+      'wheel',
+      'dblclick',
+      'contextmenu',
+    ];
+    for (const k of kinds) el.addEventListener(k, stop);
+    return () => {
+      for (const k of kinds) el.removeEventListener(k, stop);
+    };
+  }, [boxRef]);
+
+  return null;
+}

package/src/overview/index.ts

@@ -0,0 +1,2 @@
+export type { OverviewBounds, OverviewRenderArgs, TrialOverviewProps } from './TrialOverview';
+export { OVERVIEW_VIEW_ID, TrialOverview } from './TrialOverview';

package/src/passthrough/weasel-ui.ts

@@ -124,6 +124,7 @@ export {
   type OptionsBarProps,
   type OptionsBarSize,
   type OptionsBarVariant,
+  type OverlayPortalProps,
   oklchToHex,
   type Platform,
   Plot2D,
@@ -159,6 +160,9 @@ export {
   PrefsForm,
   type PrefsFormProps,
   type PrefsLayout,
+  type PropertyAlign,
+  type PropertyDensity,
+  type PropertyMetricProps,
   paintGradientTrack,
   prefValueAtPath,
   Radio,
@@ -172,6 +176,7 @@ export {
   type ReorderGhost,
   type RovingItem,
   type RovingTabIndex,
+  type SegmentTooltipFields,
   Select,
   SelectItem,
   type SelectItemProps,
@@ -183,6 +188,7 @@ export {
   type SidebarProps,
   Slider,
   type SliderProps,
+  type StanceProps,
   Switch,
   type SwitchProps,
   Tab,
@@ -215,4 +221,5 @@ export {
   useReorderDragList,
   useRovingTabIndex,
   visiblePrefSubtree,
+  type WithoutPortalTarget,
 } from '@weasel-js/ui';

package/src/specimen/Specimen.tsx

@@ -468,7 +468,15 @@ function PanelsAndRows() {
               onAlphaChange={setAlpha}
             />
             <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="number"
+              label="Count"
+              value={count}
+              min={0}
+              max={100}
+              step={1}
+              onChange={setCount}
+            />
             <PropertyField
               kind="enum"
               label="Line cap"
@@ -494,7 +502,16 @@ function PanelsAndRows() {
             <PropertyField kind="string" label="Label" value={label} onChange={setLabel} />
             <PropertyField kind="boolean" label="Visible" value={visible} onChange={setVisible} />
             <PropertyGroup title="Bevel" defaultCollapsed>
-              <PropertyField kind="number" control="slider" 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>

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/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

@@ -23,6 +23,8 @@
 @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 './annotations/Annotations.less';
 @import './dragdrop/Palette.less';

package/src/theme/Interstellar.stories.tsx

@@ -1,11 +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 {
-  PropertyField,
-  PropertyList,
-  PropertyPanel,
-} from '@weasel-js/ui';
+import { PropertyField, PropertyList, PropertyPanel } from '@weasel-js/ui';
 import './Interstellar.stories.less';
 
 const meta: Meta = {

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;
 }

package/src/trial/Trial.annotations.test.tsx

@@ -69,6 +69,22 @@ describe('an instrument that declares annotations', () => {
     }
   });
 
+  it('gets only the tools it names', () => {
+    const narrow = defineInstrument<Record<string, never>, Record<string, never>>({
+      ...annotating,
+      name: 'Narrow',
+      annotations: {
+        targets: () => [{ id: 'pane', ref: { current: null }, content: { w: 200, h: 100 } }],
+        tools: ['pointer', 'select'],
+      },
+    });
+    render(<Lab instruments={[narrow]} defaultInstrument="Narrow" />);
+    expect(screen.getByRole('button', { name: 'Interact' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Select' })).toBeTruthy();
+    expect(screen.queryByRole('button', { name: 'Freehand' })).toBeNull();
+    expect(screen.queryByRole('button', { name: 'Rectangle' })).toBeNull();
+  });
+
   it('puts the store in reach of its own render', () => {
     render(<Lab instruments={[annotating]} defaultInstrument="Annotating" />);
     expect(screen.getByTestId('pane').dataset.marks).toBe('0');

package/src/trial/Trial.loupe.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { beforeAll, describe, expect, it, vi } from 'vitest';
 import { defineInstrument } from '../instrument/defineInstrument';
@@ -126,3 +126,75 @@ describe('the loupe capability', () => {
     expect(lens(container)).toBeNull();
   });
 });
+
+describe('the loupe and the trial camera share one dispatcher', () => {
+  const frame = () => new Promise<void>((r) => requestAnimationFrame(() => r()));
+
+  function mountDrawn() {
+    const zooms: number[] = [];
+    const drawn = defineInstrument<Record<string, never>, Record<string, never>>({
+      name: 'Zoomed',
+      defaultConfig: () => ({}),
+      initialState: () => ({}),
+      render: () => null,
+      canvas: {
+        layers: [
+          {
+            id: 'main',
+            draw: (_ctx, { zoom }) => {
+              zooms.push(zoom);
+            },
+          },
+        ],
+      },
+      loupe: true,
+    });
+    const r = render(<Lab instruments={[drawn]} defaultInstrument="Zoomed" />);
+    const stack = r.container.querySelector('.lk-canvas-stack');
+    if (!stack) throw new Error('no canvas stack');
+    return { ...r, stack, zooms };
+  }
+
+  const wheel = (el: Element) => {
+    const e = new WheelEvent('wheel', {
+      deltaY: -300,
+      clientX: 50,
+      clientY: 50,
+      bubbles: true,
+      cancelable: true,
+    });
+    el.dispatchEvent(e);
+    return e;
+  };
+
+  it('zooms the camera while the lens is down', async () => {
+    const h = mountDrawn();
+    await act(async () => {
+      await frame();
+    });
+    await act(async () => {
+      wheel(h.stack);
+      await frame();
+    });
+    expect(h.zooms.at(-1)).toBeGreaterThan(1);
+  });
+
+  it('gives the wheel to the lens while it is up, and leaves the camera alone', async () => {
+    const user = userEvent.setup();
+    const h = mountDrawn();
+    await user.click(screen.getByRole('button', { name: 'Loupe' }));
+    pointAt(h.stack, 60, 40);
+    expect(lens(h.container)).not.toBeNull();
+    await act(async () => {
+      await frame();
+    });
+    const before = h.zooms.at(-1);
+    let e!: WheelEvent;
+    await act(async () => {
+      e = wheel(h.stack);
+      await frame();
+    });
+    expect(e.defaultPrevented).toBe(true);
+    expect(h.zooms.at(-1)).toBe(before);
+  });
+});

package/src/trial/Trial.stories.tsx

@@ -1,3 +1,4 @@
+import { createPointerStore } from '@weasel-js/core';
 import type { Meta, StoryObj } from '@weasel-js/forge';
 import type { Instrument } from '../instrument/types';
 import { LabContext, type LabContextValue } from '../lab/LabContext';
@@ -63,6 +64,7 @@ function Harness() {
                 setZoom: () => {},
                 activeToolId: null,
                 visibleLayers: [],
+                pointer: createPointerStore(),
               },
               emit: () => {},
             })}