@weasel-js/labkit 1.7.0 → 1.7.1

package/src/annotations/store.ts

@@ -8,7 +8,17 @@ import {
 import { captureTarget } from './capture';
 import { type MarkDrawOptions, resolveMarkStyle } from './drawOne';
 import type { WorldRect } from './frac';
-import { fracContains, fracEncloses, fracToWorld, roundFrac, worldToFrac } from './frac';
+import {
+  boundsOf,
+  fracContains,
+  fracEncloses,
+  fracToWorld,
+  fromShape,
+  roundFrac,
+  roundPoints,
+  toShape,
+  worldToFrac,
+} from './frac';
 import { MarkHistory } from './history';
 import { isStale as isStaleAgainst, seenFrom } from './staleness';
 import type {
@@ -18,6 +28,7 @@ import type {
   AnnotationMeaning,
   AnnotationPatch,
   AnnotationQuery,
+  AnnotationSelectionMode,
   AnnotationsApi,
   AnnotationTargetInfo,
   CaptureOptions,
@@ -38,6 +49,7 @@ export function createAnnotationScene(): MarkScene {
   return createScene<AnnotationData, 'marks', MarkPose>({ systemLayers: [{ id: 'marks' }] });
 }
 
+/** Inputs to `createAnnotationStore`. */
 export interface AnnotationStoreOptions {
   /** Re-read on every call, so a target resizing or gaining a dependency takes
    *  effect without rebuilding the store. */
@@ -53,6 +65,10 @@ export interface AnnotationStoreOptions {
   config?: () => unknown;
   /** Notified after every finished export. */
   onCapture?: (result: CaptureResult) => void;
+  /** Whether a selection can stand in several targets at once. `'exclusive'`
+   *  (the default) clears every other target when a mark is selected in one.
+   *  A thunk is read at each selection change. */
+  selection?: AnnotationSelectionMode | (() => AnnotationSelectionMode | undefined);
 }
 
 /** Everything a capture needs that is not the store's own state. Split out so
@@ -66,6 +82,34 @@ export interface CaptureDeps {
 
 const NO_CONTENT = { w: 0, h: 0 };
 
+/** Where a mark's vertices sit in its own bounds, from points in the content
+ *  box. A point has none to store: its bounds are its position. */
+function shapeFor(
+  kind: AnnotationData['kind'],
+  points: readonly FracPoint[] | undefined,
+  frac: FracRect,
+): readonly FracPoint[] | undefined {
+  if (!points || kind === 'point') return undefined;
+  return roundPoints(toShape(points, frac));
+}
+
+type SerializedMarks = SerializedScene<AnnotationData, 'marks', MarkPose>;
+
+/** Scenes saved before vertices followed the bounds hold them as `points` in
+ *  the content box. Restated against each mark's bounds as saved. */
+function migrateLegacyPoints(
+  raw: SerializedMarks,
+  content: { w: number; h: number },
+): SerializedMarks {
+  const nodes = raw.nodes.map((n) => {
+    const { points, ...data } = n.data as AnnotationData & { points?: readonly FracPoint[] };
+    if (!points || data.shape) return n;
+    const shape = shapeFor(data.kind, points, worldToFrac(n.pose, content));
+    return { ...n, data: { ...data, ...(shape ? { shape } : {}) } };
+  });
+  return { ...raw, nodes };
+}
+
 /** A mark's id is its target and its node. One scene per target, so a node id
  *  is only unique within one — and an annotation is addressed by both. */
 function splitId(id: string): { target: string; node: string } | undefined {
@@ -92,21 +136,73 @@ export function createAnnotationStore(opts: AnnotationStoreOptions): Annotations
     for (const fn of subs) fn();
   };
 
+  // Scene changes made while held are told to subscribers as one, once the
+  // outermost hold ends — so a click that also clears another target, or a
+  // `setSelection` spanning several, is one event with the final answer.
+  let holding = 0;
+  let heldDirty = false;
+  const hold = (fn: () => void): void => {
+    holding += 1;
+    try {
+      fn();
+    } finally {
+      holding -= 1;
+    }
+    if (holding === 0 && heldDirty) {
+      heldDirty = false;
+      notify();
+    }
+  };
+
+  const exclusive = (): boolean =>
+    (typeof opts.selection === 'function' ? opts.selection() : opts.selection) !== 'per-target';
+
+  /** Each scene's selection as last seen, to tell a selection change from any
+   *  other change arriving on the same channel. */
+  const lastSelection = new Map<string, string>();
+  const selectionKey = (scene: MarkScene): string => scene.getSelection().map(String).join(' ');
+
+  const clearOthers = (keep: string): void => {
+    for (const [target, scene] of scenes) {
+      if (target !== keep && scene.getSelection().length > 0) scene.setSelection([]);
+    }
+  };
+
+  const targetOf = (id: string): AnnotationTargetInfo | undefined =>
+    targets().find((t) => t.id === id);
+
+  const contentOf = (id: string) => targetOf(id)?.content ?? NO_CONTENT;
+
   const sceneFor = (target: string): MarkScene => {
     const known = scenes.get(target);
     if (known) return known;
     const raw = restore?.[target];
     const scene = raw
       ? sceneFromJSON<AnnotationData, 'marks', MarkPose>(
-          raw as SerializedScene<AnnotationData, 'marks', MarkPose>,
+          migrateLegacyPoints(raw as SerializedMarks, contentOf(target)),
           {},
         )
       : createAnnotationScene();
     scenes.set(target, scene);
     history.track(target, scene);
+    lastSelection.set(target, selectionKey(scene));
     scene.subscribe(() => {
       history.observe(target, scene);
-      notify();
+      const selected = selectionKey(scene);
+      const newlySelected = selected !== '' && selected !== lastSelection.get(target);
+      lastSelection.set(target, selected);
+      if (holding > 0) {
+        heldDirty = true;
+        return;
+      }
+      if (newlySelected && exclusive()) {
+        hold(() => {
+          heldDirty = true;
+          clearOthers(target);
+        });
+      } else {
+        notify();
+      }
     });
     return scene;
   };
@@ -120,10 +216,6 @@ export function createAnnotationStore(opts: AnnotationStoreOptions): Annotations
   // a mark a sidebar cannot list.
   for (const target of Object.keys(restore ?? {})) sceneFor(target);
 
-  const targetOf = (id: string): AnnotationTargetInfo | undefined =>
-    targets().find((t) => t.id === id);
-
-  const contentOf = (id: string) => targetOf(id)?.content ?? NO_CONTENT;
   /** How a target's marks are drawn right now — one answer for the pane, an
    *  export and an overview, so none can disagree on a color or a dash. */
   const drawOptionsFor = (info: AnnotationTargetInfo): MarkDrawOptions => ({
@@ -136,12 +228,13 @@ export function createAnnotationStore(opts: AnnotationStoreOptions): Annotations
   const project = (target: string, node: string): Annotation | undefined => {
     const found = scenes.get(target)?.get(asNodeId(node));
     if (!found) return undefined;
-    return {
-      ...found.data,
-      target,
-      id: `${target}/${node}`,
-      frac: roundFrac(worldToFrac(found.pose as MarkPose, contentOf(target))),
-    };
+    const { shape, ...data } = found.data;
+    const frac = roundFrac(worldToFrac(found.pose as MarkPose, contentOf(target)));
+    const points =
+      data.kind === 'point'
+        ? [{ x: frac.x, y: frac.y }]
+        : shape && roundPoints(fromShape(shape, frac));
+    return { ...data, target, id: `${target}/${node}`, frac, ...(points ? { points } : {}) };
   };
 
   /** Every target with a scene, in declaration order — then any whose target
@@ -245,20 +338,24 @@ export function createAnnotationStore(opts: AnnotationStoreOptions): Annotations
 
     setSelection(ids) {
       const wanted = new Map<string, string[]>();
+      const only = exclusive();
       for (const id of ids) {
         const found = nodeOf(id);
         if (!found) continue;
+        if (only && wanted.size > 0 && !wanted.has(found.target)) 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));
-      }
+      hold(() => {
+        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) {
@@ -270,10 +367,12 @@ export function createAnnotationStore(opts: AnnotationStoreOptions): Annotations
 
     add(init: AnnotationInit, config?: unknown) {
       const target = targetOf(init.target);
+      const frac = roundFrac(init.frac);
+      const shape = shapeFor(init.kind, init.points, frac);
       const data: AnnotationData = {
         target: init.target,
         kind: init.kind,
-        ...(init.points ? { points: init.points } : {}),
+        ...(shape ? { shape } : {}),
         ...(init.title !== undefined ? { title: init.title } : {}),
         ...(init.status !== undefined ? { status: init.status } : {}),
         ...(init.tags !== undefined ? { tags: init.tags } : {}),
@@ -283,7 +382,7 @@ export function createAnnotationStore(opts: AnnotationStoreOptions): Annotations
       const node = sceneFor(init.target).add({
         kind: 'leaf',
         layer: 'marks',
-        pose: fracToWorld(roundFrac(init.frac), target?.content ?? NO_CONTENT),
+        pose: fracToWorld(frac, target?.content ?? NO_CONTENT),
         data,
       });
       return `${init.target}/${String(node)}`;
@@ -292,14 +391,18 @@ export function createAnnotationStore(opts: AnnotationStoreOptions): Annotations
     update(id, patch: AnnotationPatch) {
       const found = nodeOf(id);
       if (!found) return;
-      const { frac, ...meaning } = patch;
+      const { frac: fracPatch, points, ...meaning } = patch;
       const nid = asNodeId(found.node.id);
-      if (Object.keys(meaning).length > 0) {
-        found.scene.update(nid, { data: { ...found.node.data, ...meaning } });
-      }
-      if (frac) {
-        found.scene.setPose(nid, fracToWorld(roundFrac(frac), contentOf(found.target)));
+      const content = contentOf(found.target);
+      const frac = fracPatch ?? (points ? boundsOf(points) : null);
+      const bounds = roundFrac(frac ?? worldToFrac(found.node.pose as MarkPose, content));
+      const shape = points ? shapeFor(found.node.data.kind, points, bounds) : undefined;
+      if (Object.keys(meaning).length > 0 || shape) {
+        found.scene.update(nid, {
+          data: { ...found.node.data, ...meaning, ...(shape ? { shape } : {}) },
+        });
       }
+      if (frac) found.scene.setPose(nid, fracToWorld(bounds, content));
     },
 
     setMeta(id, meta) {

package/src/annotations/svgNodes.test.ts

@@ -1,17 +1,15 @@
-import { serializeSvg } from '@weasel-js/svg';
+import { serializeSvg, svgNeeds } from '@weasel-js/svg';
 import { describe, expect, it } from 'vitest';
 import { markCommands } from './paint';
 import { markSvgNodes } from './svgNodes';
 import type { AnnotationData, AnnotationKind } from './types';
 
-const CONTENT = { w: 100, h: 60 };
-
 const mark = (kind: AnnotationKind, extra: Partial<AnnotationData> = {}) => ({
   pose: { x: 10, y: 12, width: 30, height: 20 },
   data: {
     target: 'flat',
     kind,
-    points: [
+    shape: [
       { x: 0.1, y: 0.2 },
       { x: 0.5, y: 0.6 },
     ],
@@ -24,8 +22,8 @@ const KINDS: AnnotationKind[] = ['rect', 'ellipse', 'line', 'arrow', 'stroke'];
 describe('a mark as vector', () => {
   it.each(KINDS)('emits %s off the same geometry the screen draws', (kind) => {
     const m = mark(kind);
-    const cmds = markCommands(m, CONTENT);
-    const nodes = markSvgNodes(m, CONTENT);
+    const cmds = markCommands(m);
+    const nodes = markSvgNodes(m);
     expect(nodes).toHaveLength(cmds.length);
     for (const [i, cmd] of cmds.entries()) {
       if (cmd.kind !== 'path') throw new Error('expected path commands');
@@ -46,13 +44,13 @@ describe('a mark as vector', () => {
   });
 
   it('carries a stale mark′s dash through', () => {
-    const [node] = markSvgNodes(mark('rect'), CONTENT, { stale: true });
+    const [node] = markSvgNodes(mark('rect'), { stale: true });
     if (node?.kind !== 'path') throw new Error('expected a path node');
     expect(node.stroke?.dash).toEqual([6, 4]);
   });
 
   it("keeps the arrow's marker, so the export draws its head", () => {
-    const nodes = markSvgNodes(mark('arrow'), CONTENT);
+    const nodes = markSvgNodes(mark('arrow'));
     expect(nodes).toHaveLength(1);
     const [node] = nodes;
     if (node?.kind !== 'path') throw new Error('expected a path node');
@@ -64,11 +62,25 @@ describe('a mark as vector', () => {
 
   it('emits text as text, at the pose, in the mark color', () => {
     const m = mark('text', { title: 'missing edge' });
-    const [node] = markSvgNodes(m, CONTENT);
+    const [node] = markSvgNodes(m);
     expect(node).toMatchObject({ kind: 'text', text: 'missing edge', x: 10, y: 12 });
   });
 
   it('emits nothing for a text mark with no words', () => {
-    expect(markSvgNodes(mark('text'), CONTENT)).toEqual([]);
+    expect(markSvgNodes(mark('text'))).toEqual([]);
+  });
+
+  // Why `composeCaptureSvg` and `<OverviewMarks>` serialize without awaiting
+  // `warmSvg`: a mark exports nothing that loads on demand. A mark gaining a
+  // gradient paint or a script run fails this, and those two then need it.
+  it('needs nothing loaded to serialize, stale or not', () => {
+    const all: AnnotationKind[] = [...KINDS, 'point', 'text'];
+    for (const stale of [false, true]) {
+      const nodes = all.flatMap((k) =>
+        markSvgNodes(mark(k, { title: 'words' }), { stale, color: '#123456' }),
+      );
+      expect(nodes.length).toBeGreaterThan(all.length - 1);
+      expect(svgNeeds(nodes)).toEqual({ fonts: [], paintKinds: [] });
+    }
   });
 });

package/src/annotations/svgNodes.ts

@@ -1,4 +1,4 @@
-import type { DrawCommand, FillStyle, Stroke } from '@weasel-js/core';
+import type { DrawCommand, FillStyle, Stroke, View } from '@weasel-js/core';
 import type { SvgNode, SvgPaint, SvgStroke } from '@weasel-js/svg';
 import { type MarkStyle, markCommands, type PaintableMark } from './paint';
 
@@ -67,8 +67,8 @@ function toSvgNode(cmd: DrawCommand, m: PaintableMark): SvgNode {
  */
 export function markSvgNodes(
   m: PaintableMark,
-  content: { w: number; h: number },
   style: MarkStyle = {},
+  scale?: View['scale'],
 ): SvgNode[] {
-  return markCommands(m, content, style).map((cmd) => toSvgNode(cmd, m));
+  return markCommands(m, style, scale).map((cmd) => toSvgNode(cmd, m));
 }

package/src/annotations/types.ts

@@ -22,8 +22,8 @@ export interface FracRect {
 }
 
 /** What shape a mark is. The kinds map onto weasel's own tools; an arrow is a
- *  line carrying an end marker, not a separate geometry. A point holds one
- *  entry in `points` and zero-size bounds at that position. */
+ *  line carrying an end marker, not a separate geometry. A point is zero-size
+ *  bounds at its position. */
 export type AnnotationKind = 'stroke' | 'line' | 'arrow' | 'rect' | 'ellipse' | 'text' | 'point';
 
 /** One selectable status in an instrument's meaning tier. */
@@ -47,8 +47,11 @@ export interface AnnotationData {
   target: string;
   kind: AnnotationKind;
   /** Vertices for the kinds a bounding box cannot describe — a line's two
-   *  ends, a stroke's path. In fractions, like the bounds. */
-  points?: readonly FracPoint[];
+   *  ends, a stroke's path — in fractions of the mark's own bounds, so moving
+   *  or resizing the bounds carries them along. A point stores none: it is its
+   *  bounds' origin. `Annotation.points` is this restated in the target's
+   *  content box. */
+  shape?: readonly FracPoint[];
   title?: string;
   status?: string;
   tags?: readonly string[];
@@ -61,10 +64,13 @@ export interface AnnotationData {
 
 /** A mark, as the store reports it. `id` is `<target>/<node>`: one scene per
  *  target means a node id is only unique within one. */
-export interface Annotation extends AnnotationData {
+export interface Annotation extends Omit<AnnotationData, 'shape'> {
   id: string;
   /** Bounds in fractions of the target's content box. */
   frac: FracRect;
+  /** Vertices in fractions of the target's content box, wherever the bounds
+   *  now are. A point's one entry is its bounds' origin. */
+  points?: readonly FracPoint[];
 }
 
 /** A new mark, before the store gives it an id and dates it. */
@@ -72,6 +78,8 @@ export interface AnnotationInit {
   target: string;
   kind: AnnotationKind;
   frac: FracRect;
+  /** In the target's content box. Stored relative to `frac`, so they should
+   *  lie inside it; a point takes its position from `frac` alone. */
   points?: readonly FracPoint[];
   title?: string;
   status?: string;
@@ -89,7 +97,8 @@ export interface AnnotationQuery {
 }
 
 /** What a mark's meaning can be patched to. Geometry moves through `frac` /
- *  `points`; everything else is the meaning tier. */
+ *  `points`; everything else is the meaning tier. `frac` alone carries the
+ *  vertices with it; `points` alone moves the bounds to enclose them. */
 export type AnnotationPatch = Partial<
   Pick<Annotation, 'frac' | 'points' | 'title' | 'status' | 'tags' | 'meta'>
 >;
@@ -159,8 +168,6 @@ export interface AnnotationStorage {
   save: (doc: SerializedAnnotations) => void;
 }
 
-/** Declares that an instrument accepts marks: which regions take them,
- *  optionally what a mark is allowed to mean, and optionally where they live. */
 /** The annotation tools a lab's rail can carry. */
 export type AnnotationToolId =
   | 'pointer'
@@ -172,6 +179,13 @@ export type AnnotationToolId =
   | 'ellipse'
   | 'text';
 
+/** Whether a selection can stand in several of a trial's targets at once.
+ *  `'exclusive'` clears every other target when a mark is selected in one;
+ *  `'per-target'` lets each target keep its own. */
+export type AnnotationSelectionMode = 'exclusive' | 'per-target';
+
+/** Declares that an instrument accepts marks: which regions take them,
+ *  optionally what a mark is allowed to mean, and optionally where they live. */
 export interface AnnotationsCapability<TS = unknown, TC = unknown> {
   /** `trial` is which trial is asking: a declaration made once per instrument
    *  is called once per trial, and its targets are that trial's own. */
@@ -188,6 +202,9 @@ export interface AnnotationsCapability<TS = unknown, TC = unknown> {
    *  notification, not an interception: a host wanting its own flow calls
    *  `capture()` from its own UI, which is the surface the chrome uses. */
   onCapture?: (result: CaptureResult) => void;
+  /** Defaults to `'exclusive'`: selecting a mark in one target clears the
+   *  selection in every other. */
+  selection?: AnnotationSelectionMode;
 }
 
 /** A persisted mark set. Versioned by this arc rather than by labkit's
@@ -229,11 +246,13 @@ export interface AnnotationsApi {
    *  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. */
+   *  there is dropped, the way `update` and `remove` ignore one. Under an
+   *  `'exclusive'` selection, so is every id outside the first id's target. */
   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()`. */
+   *  channel. A selection change touching several targets is one event. 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/CameraInput.test.tsx

@@ -6,11 +6,14 @@
 
 import { act, render } from '@testing-library/react';
 import { createPointerStore, PointerContextProvider } from '@weasel-js/core';
+import { renderThenAbandon } from '@weasel-js/react/testing/abandonRender';
 import { useState } from 'react';
 import { beforeAll, describe, expect, it, vi } from 'vitest';
 import type { ViewTransform } from '../instrument/types';
+import { type CameraView, useCameraView } from './CameraInput';
 import { CanvasStack } from './CanvasStack';
 import { Stage } from './Stage';
+import { DEFAULT_FRAME } from './worldSpec';
 
 beforeAll(() => {
   HTMLCanvasElement.prototype.getContext = vi.fn(
@@ -133,4 +136,31 @@ describe('camera input', () => {
     act(() => pointer(host, 'pointermove', 40, 30, 0));
     expect(store.get()).toEqual({ worldX: 20, worldY: -15, viewId: 'stage' });
   });
+
+  it('reads, writes and clamps through the committed props, never an abandoned render', () => {
+    let camera: CameraView | null = null;
+    const hostRef = { current: null };
+    const committed = vi.fn();
+    const abandoned = vi.fn();
+    interface ProbeProps {
+      view: ViewTransform;
+      onViewChange: (v: ViewTransform) => void;
+      maxZoom: number;
+    }
+    function Probe(props: ProbeProps) {
+      camera = useCameraView({ ...props, frame: DEFAULT_FRAME, hostRef });
+      return null;
+    }
+    renderThenAbandon<ProbeProps>(
+      { view: { zoom: 1, pan: { x: 0, y: 0 } }, onViewChange: committed, maxZoom: 4 },
+      { view: { zoom: 2, pan: { x: 50, y: 50 } }, onViewChange: abandoned, maxZoom: 8 },
+      (p) => <Probe {...p} />,
+    );
+    const cam = camera as unknown as CameraView;
+    expect(cam.get().scale.x).toBe(1);
+    expect(cam.zoomRange().max).toBe(4);
+    act(() => cam.set(cam.get()));
+    expect(abandoned).not.toHaveBeenCalled();
+    expect(committed).toHaveBeenCalledTimes(1);
+  });
 });

package/src/canvas/CameraInput.tsx

@@ -14,6 +14,7 @@ import {
   useActionsRegistry,
   useDepSource,
   useGestureDispatcher,
+  useLatest,
   usePointerContext,
   type View,
   type ViewApi,
@@ -26,6 +27,7 @@ import {
   type RefObject,
   useContext,
   useEffect,
+  useInsertionEffect,
   useMemo,
   useRef,
 } from 'react';
@@ -111,15 +113,18 @@ export function useCameraView({
   minZoom = 0.1,
   maxZoom = 32,
 }: CameraViewOptions): CameraView {
+  // Written by each commit and by `set`, ahead of the render it asks for —
+  // two writers, so not `useLatest`.
   const live = useRef({ view: normalize2DView(view), onViewChange, frame });
-  live.current = { view: normalize2DView(view), onViewChange, frame };
+  useInsertionEffect(() => {
+    live.current = { view: normalize2DView(view), onViewChange, frame };
+  });
   const initialZoom = useRef(isPositiveFinite(view.zoom) ? view.zoom : null);
-  const bounds = useRef({ min: minZoom, max: maxZoom });
   const opening = initialZoom.current;
-  bounds.current = {
+  const bounds = useLatest({
     min: opening == null ? minZoom : Math.min(minZoom, opening),
     max: opening == null ? maxZoom : Math.max(maxZoom, opening),
-  };
+  });
 
   return useMemo<CameraView>(() => {
     const get = (): View => toCameraView(live.current.view, live.current.frame);
@@ -140,7 +145,7 @@ export function useCameraView({
       },
       zoomRange: () => ({ ...bounds.current }),
     };
-  }, [hostRef]);
+  }, [bounds, hostRef]);
 }
 
 const TAP_ID = 'camera.tap';
@@ -177,10 +182,8 @@ function CameraDispatch({
   onTap,
   registry,
 }: CameraInputProps & { registry: ActionsRegistry }) {
-  const frameRef = useRef(frame);
-  frameRef.current = frame;
-  const onTapRef = useRef(onTap);
-  onTapRef.current = onTap;
+  const frameRef = useLatest(frame);
+  const onTapRef = useLatest(onTap);
 
   useDepSource('view', () => camera);
   useDepSource('rootView', () => camera);
@@ -217,7 +220,7 @@ function CameraDispatch({
       { ...zoom, defaultBinding: wheelOnly as Action['defaultBinding'] },
       tap,
     ];
-  }, []);
+  }, [frameRef, onTapRef]);
 
   useEffect(() => {
     const offs = actions.map((a) => registry.register(a));
@@ -284,10 +287,8 @@ export function usePublishPointer(
   viewId: string,
 ): void {
   const store = usePointerContext();
-  const frameRef = useRef(frame);
-  frameRef.current = frame;
-  const toLocal = useRef(clientToLocal);
-  toLocal.current = clientToLocal;
+  const frameRef = useLatest(frame);
+  const toLocal = useLatest(clientToLocal);
   useEffect(() => {
     const el = hostRef.current;
     if (!el || !store) return;
@@ -305,7 +306,7 @@ export function usePublishPointer(
       el.removeEventListener('pointermove', onMove);
       el.removeEventListener('pointerleave', onLeave);
     };
-  }, [hostRef, store, viewId]);
+  }, [frameRef, hostRef, store, toLocal, viewId]);
 }
 
 /** The pointer as a frame-local point, or `null` when there is none or it is

package/src/canvas/CanvasStack.tsx

@@ -1,4 +1,5 @@
 import type { Yoke } from '@weasel-js/core';
+import { useLatest } from '@weasel-js/core';
 import { type CSSProperties, type ReactNode, useEffect, useMemo, useRef, useState } from 'react';
 import type { Point, ViewTransform } from '../instrument/types';
 import { normalize2DView } from '../state/view';
@@ -80,12 +81,11 @@ export function CanvasStack({
     return () => ro.disconnect();
   }, []);
 
-  const onResizeRef = useRef(onResize);
-  onResizeRef.current = onResize;
+  const onResizeRef = useLatest(onResize);
   useEffect(() => {
     if (size.width === 0 && size.height === 0) return;
     onResizeRef.current?.({ width: size.width, height: size.height });
-  }, [size.width, size.height]);
+  }, [size.width, size.height, onResizeRef]);
 
   const frame = useMemo(() => resolveFrame(worldSpec, size), [worldSpec, size]);
 
@@ -107,9 +107,9 @@ export function CanvasStack({
     () => ({
       view,
       frame,
-      surface: { element: containerRef, size, canvases: canvasMap, layers },
+      surface: { element: containerRef, size, canvases: canvasMap, layers, worldSpec },
     }),
-    [view, frame, size, layers],
+    [view, frame, size, layers, worldSpec],
   );
 
   const containerStyle: CSSProperties = { width, height };

package/src/canvas/CanvasStackContext.ts

@@ -1,7 +1,7 @@
 import { createContext, type RefObject } from 'react';
 import type { ViewTransform } from '../instrument/types';
 import type { CanvasLayerDescriptor } from './useLayerScheduler';
-import type { WorldFrame } from './worldSpec';
+import type { WorldFrame, WorldSpec } from './worldSpec';
 
 /** The stack's own drawing surface, for an overlay that has to re-draw it at
  *  another camera or read back what it presented — a loupe. */
@@ -14,6 +14,9 @@ export interface CanvasStackSurface {
   canvases: RefObject<Map<string, HTMLCanvasElement>>;
   /** The layers as the stack is drawing them, bottom first. */
   layers: readonly CanvasLayerDescriptor[];
+  /** The coordinate system the stack was given, which `frame` resolves at
+   *  its size — for a re-draw at another size. */
+  worldSpec?: WorldSpec;
 }
 
 /** What a canvas stack publishes to its children: the view, and the resolved

package/src/canvas/Stage.tsx

@@ -1,4 +1,5 @@
 import type { Yoke } from '@weasel-js/core';
+import { useLatest } from '@weasel-js/core';
 import { type CSSProperties, type ReactNode, useEffect, useMemo, useRef } from 'react';
 import type { ViewTransform } from '../instrument/types';
 import { normalize2DView } from '../state/view';
@@ -85,8 +86,7 @@ export function Stage({
     [camera, size.width, size.height],
   );
 
-  const onResizeRef = useRef(onResize);
-  onResizeRef.current = onResize;
+  const onResizeRef = useLatest(onResize);
   useEffect(() => {
     const el = host.current;
     if (!el) return;
@@ -101,7 +101,7 @@ export function Stage({
     const ro = new ResizeObserver(measure);
     ro.observe(el);
     return () => ro.disconnect();
-  }, []);
+  }, [onResizeRef]);
 
   // A transform moves every tile inside the content without resizing anything,
   // and a ResizeObserver reports only resizes.