@weasel-js/labkit 1.6.1 → 1.7.1

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/AGENTS.md

@@ -14,6 +14,7 @@ schedules its own layers; a foreign renderer wants rects and dirtiness only.
 | `CanvasStackContext.ts` | React context exposing the current `view` to descendants |
 | `useLayerScheduler.ts` | DPR-aware rAF scheduler; redraws dirty layers on view/state changes |
 | `CameraInput.tsx` | Pan, zoom and tap routed through weasel's gesture dispatcher; `CameraContext`; publishes the pointer |
+| `cameraRegistry.ts` | Cameras by trial id, so chrome outside a trial (the lab header's zoom) can drive the focused one |
 | `cameraView.ts` | The camera as a weasel `View` over frame-local coordinates, and the anchored zoom clamp |
 | `LinkedCursor.tsx` | The crosshair on the camera's element while the pointer is over another view |
 | `camera.ts` | `zoomAt` (fixed-point zoom) and `centerOn` (put a world point at a viewport's middle) |

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

@@ -5,10 +5,8 @@
  */
 import {
   type Action,
-  ActionsProvider,
   type ActionsRegistry,
-  ActiveToolContextProvider,
-  DepRegistryProvider,
+  InputScope,
   makeViewportZoomAction,
   PointerContextProvider,
   type PointerWorldPos,
@@ -16,10 +14,12 @@ import {
   useActionsRegistry,
   useDepSource,
   useGestureDispatcher,
+  useLatest,
   usePointerContext,
   type View,
   type ViewApi,
   viewportDragPanAction,
+  type Yoke,
 } from '@weasel-js/core';
 import {
   createContext,
@@ -27,12 +27,14 @@ import {
   type RefObject,
   useContext,
   useEffect,
+  useInsertionEffect,
   useMemo,
   useRef,
 } from 'react';
 import type { Point, ViewTransform } from '../instrument/types';
 import { normalize2DView } from '../state/view';
 import { CameraWheelContext } from './CameraWheelContext';
+import { usePublishCamera } from './cameraRegistry';
 import { clampZoomAbout, frameLocalToWorld, fromCameraView, toCameraView } from './cameraView';
 import type { ViewportSize, WorldFrame } from './worldSpec';
 
@@ -57,31 +59,20 @@ export interface CameraContextValue {
 /** The camera around the caller, or `null` outside one. */
 export const CameraContext = createContext<CameraContextValue | null>(null);
 
-/** Set by a host that already provides one input scope for everything inside
- *  it — a trial — so the camera, the loupe and an overview share it. */
-export const CameraScopeContext = createContext(false);
-
 /**
- * The actions and deps a camera routes through: the ones a trial provides, or
- * an isolated set of its own. Isolated, because an actions registry holds one
- * dispatcher, and a camera must not take input from a canvas beside it. The
- * pointer store is the exception — one already in scope is kept, since sharing
- * it is the point.
+ * The input scope a camera routes through. Inside another camera — a loupe or
+ * an overlay laid over a canvas stack — it joins that camera's scope, so its
+ * actions reach the dispatcher already listening there. Anywhere else it
+ * mounts a scope of its own, which keeps its own tool unless it joins `yoke`:
+ * a camera beside another never takes that one's gestures. The pointer store is the exception — one
+ * already in scope is kept, since sharing it is the point.
  */
-export function CameraScope({ children }: { children: ReactNode }) {
-  const inScope = useContext(CameraScopeContext);
+export function CameraScope({ yoke, children }: { yoke?: Yoke; children: ReactNode }) {
+  const around = useContext(CameraContext);
   const pointer = usePointerContext();
-  if (inScope) return <>{children}</>;
-  const scoped = <CameraScopeContext.Provider value={true}>{children}</CameraScopeContext.Provider>;
-  return (
-    <DepRegistryProvider>
-      <ActionsProvider>
-        <ActiveToolContextProvider>
-          {pointer ? scoped : <PointerContextProvider>{scoped}</PointerContextProvider>}
-        </ActiveToolContextProvider>
-      </ActionsProvider>
-    </DepRegistryProvider>
-  );
+  if (around) return <>{children}</>;
+  const scoped = <InputScope yoke={yoke}>{children}</InputScope>;
+  return pointer ? scoped : <PointerContextProvider>{scoped}</PointerContextProvider>;
 }
 
 /** Options for {@link useCameraView}. */
@@ -94,6 +85,17 @@ export interface CameraViewOptions {
   maxZoom?: number;
 }
 
+/** A camera's zoom limits, after widening to admit its opening zoom. */
+export interface ZoomRange {
+  min: number;
+  max: number;
+}
+
+/** A labkit camera: a weasel `ViewApi` that also says how far it zooms. */
+export interface CameraView extends ViewApi {
+  zoomRange(): ZoomRange;
+}
+
 function isPositiveFinite(n: number): boolean {
   return Number.isFinite(n) && n > 0;
 }
@@ -110,18 +112,21 @@ export function useCameraView({
   hostRef,
   minZoom = 0.1,
   maxZoom = 32,
-}: CameraViewOptions): ViewApi {
+}: 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<ViewApi>(() => {
+  return useMemo<CameraView>(() => {
     const get = (): View => toCameraView(live.current.view, live.current.frame);
     return {
       get,
@@ -138,8 +143,9 @@ export function useCameraView({
         const r = hostRef.current?.getBoundingClientRect();
         return r ? { width: r.width, height: r.height } : null;
       },
+      zoomRange: () => ({ ...bounds.current }),
     };
-  }, [hostRef]);
+  }, [bounds, hostRef]);
 }
 
 const TAP_ID = 'camera.tap';
@@ -149,7 +155,9 @@ const CHANNELS = { contextMenu: false, ingest: false } as const;
 /** Props for `<CameraInput>`. */
 export interface CameraInputProps {
   hostRef: RefObject<HTMLElement | null>;
-  camera: ViewApi;
+  /** Published to the host's camera registry while its scope is the active
+   *  one, so chrome acting on "the camera" acts on the one last used. */
+  camera: CameraView;
   frame: WorldFrame;
   /** A primary-button press released without crossing the drag threshold, at
    *  the world point it landed on. */
@@ -174,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);
@@ -209,11 +215,12 @@ function CameraDispatch({
       },
     };
     return [
-      viewportDragPanAction,
+      // A trial pans on a plain drag; the kit action binds none of its own.
+      { ...viewportDragPanAction, defaultBinding: { kind: 'drag' } },
       { ...zoom, defaultBinding: wheelOnly as Action['defaultBinding'] },
       tap,
     ];
-  }, []);
+  }, [frameRef, onTapRef]);
 
   useEffect(() => {
     const offs = actions.map((a) => registry.register(a));
@@ -237,26 +244,33 @@ function CameraDispatch({
   useGestureDispatcher({
     canvasRef: hostRef,
     actions: registry,
-    toolsById: NO_TOOLS,
+    entriesById: NO_TOOLS,
     clientToWorld,
     channels: CHANNELS,
   });
 
   usePublishPointer(hostRef, clientToWorld, frame, STAGE_VIEW_ID);
+  usePublishCamera(camera);
 
   // Input that lands outside the camera's element — an annotation target's
-  // box, portalled into the surface — reaches the dispatcher through here.
+  // box, portalled into the surface — reaches the active camera's dispatcher
+  // through here.
   const wheelSlot = useContext(CameraWheelContext);
   useEffect(() => {
     if (!wheelSlot) return;
     const forward = (e: WheelEvent): void => {
       hostRef.current?.dispatchEvent(new WheelEvent('wheel', e));
     };
-    wheelSlot.current = forward;
+    const claim = (): void => {
+      if (registry.isActive()) wheelSlot.current = forward;
+    };
+    claim();
+    const off = registry.subscribe(claim);
     return () => {
+      off();
       if (wheelSlot.current === forward) wheelSlot.current = null;
     };
-  }, [wheelSlot, hostRef]);
+  }, [wheelSlot, hostRef, registry]);
 
   return null;
 }
@@ -273,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;
@@ -294,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,3 +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';
@@ -25,6 +27,9 @@ export interface CanvasStackProps {
   onResize?: (size: ViewportSize) => void;
   onHitTest?: (worldPos: Point) => void;
   children?: ReactNode;
+  /** A yoke to join, from `useYoke()`: cameras on one yoke share their tool
+   *  and gesture in flight. Omitted, this one keeps its own. */
+  yoke?: Yoke;
 }
 
 /** Stacks one `<canvas>` per layer and drives them from a shared view, so a
@@ -44,6 +49,7 @@ export function CanvasStack({
   onResize,
   onHitTest,
   children,
+  yoke,
 }: CanvasStackProps) {
   const view = normalize2DView(viewProp);
   const containerRef = useRef<HTMLDivElement | null>(null);
@@ -75,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]);
 
@@ -102,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 };
@@ -118,7 +123,7 @@ export function CanvasStack({
   };
 
   return (
-    <CameraScope>
+    <CameraScope yoke={yoke}>
       <CameraContext.Provider value={cameraCtx}>
         <CanvasStackContext.Provider value={ctxValue}>
           <CameraInput hostRef={containerRef} camera={camera} frame={frame} onTap={onHitTest} />

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/LinkedCursor.less

@@ -12,5 +12,5 @@
 }
 
 .lk-linked-cursor__bar {
-  fill: var(--wzl-accent, #4c8dff);
+  fill: var(--wzl-accent);
 }

package/src/canvas/Stage.test.tsx

@@ -1,4 +1,4 @@
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen, within } from '@testing-library/react';
 import { useState } from 'react';
 import { beforeAll, describe, expect, it, vi } from 'vitest';
 import { defineInstrument } from '../instrument/defineInstrument';
@@ -169,19 +169,48 @@ describe('an instrument that declares a stage', () => {
 
   it('gets the zoom controls, and they move the stage', () => {
     const { container } = render(<Lab instruments={[staged]} defaultInstrument="Staged" />);
+    const trialView = within(screen.getByRole('toolbar', { name: 'View' }));
     act(() => {
-      fireEvent.click(screen.getByRole('button', { name: 'Zoom in' }));
+      fireEvent.click(trialView.getByRole('button', { name: 'Zoom in' }));
     });
     expect(zoomOf(content(container))).toBeCloseTo(1.25);
     act(() => {
-      fireEvent.click(screen.getByRole('button', { name: 'Actual size' }));
+      fireEvent.click(trialView.getByRole('button', { name: 'Actual size' }));
     });
     expect(zoomOf(content(container))).toBe(1);
   });
 
+  it('zooms about the middle of the view, not the stage origin', () => {
+    const rect = vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockReturnValue({
+      x: 0,
+      y: 0,
+      left: 0,
+      top: 0,
+      right: 240,
+      bottom: 160,
+      width: 240,
+      height: 160,
+      toJSON: () => ({}),
+    });
+    try {
+      const { container } = render(<Lab instruments={[staged]} defaultInstrument="Staged" />);
+      const trialView = within(screen.getByRole('toolbar', { name: 'View' }));
+      act(() => {
+        fireEvent.click(trialView.getByRole('button', { name: 'Zoom in' }));
+      });
+      const el = content(container);
+      expect(zoomOf(el)).toBeCloseTo(1.25);
+      // The screen middle (120, 80) still shows world (120, 80): pan = 120 - 120 * 1.25.
+      expect(el.style.getPropertyValue('--lk-stage-x')).toBe('-30px');
+      expect(el.style.getPropertyValue('--lk-stage-y')).toBe('-20px');
+    } finally {
+      rect.mockRestore();
+    }
+  });
+
   it('is what earns them: DOM content without one gets none', () => {
     render(<Lab instruments={[plain]} defaultInstrument="Plain" />);
-    expect(screen.queryByRole('button', { name: 'Zoom in' })).toBeNull();
+    expect(screen.queryByRole('toolbar', { name: 'View' })).toBeNull();
   });
 
   it('draws its overlay on the stage, outside the camera', () => {

package/src/canvas/Stage.tsx

@@ -1,3 +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';
@@ -21,6 +23,9 @@ export interface StageProps {
   /** Drawn over the content in viewport pixels, outside the camera. */
   overlay?: ReactNode;
   children?: ReactNode;
+  /** A yoke to join, from `useYoke()`: cameras on one yoke share their tool
+   *  and gesture in flight. Omitted, this one keeps its own. */
+  yoke?: Yoke;
 }
 
 /**
@@ -58,6 +63,7 @@ export function Stage({
   hostRef,
   overlay,
   children,
+  yoke,
 }: StageProps) {
   const view = normalize2DView(viewProp);
   const host = useRef<HTMLDivElement | null>(null);
@@ -80,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;
@@ -96,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.
@@ -117,7 +122,7 @@ export function Stage({
   } as CSSProperties;
 
   return (
-    <CameraScope>
+    <CameraScope yoke={yoke}>
       <CameraContext.Provider value={cameraCtx}>
         <CameraInput hostRef={host} camera={camera} frame={DEFAULT_FRAME} />
         <div

package/src/canvas/cameraRegistry.test.ts

@@ -0,0 +1,55 @@
+import { describe, expect, it, vi } from 'vitest';
+import type { CameraView } from './CameraInput';
+import { createCameraRegistry } from './cameraRegistry';
+
+const camera = (): CameraView => ({
+  get: () => ({ x: 0, y: 0, scale: { x: 1, y: 1 } }),
+  set: () => {},
+  zoomRange: () => ({ min: 0.1, max: 32 }),
+});
+
+describe('createCameraRegistry', () => {
+  it('answers null for a key nothing registered', () => {
+    expect(createCameraRegistry().get('a')).toBeNull();
+  });
+
+  it('holds a camera until its release', () => {
+    const reg = createCameraRegistry();
+    const cam = camera();
+    const off = reg.register('a', cam);
+    expect(reg.get('a')).toBe(cam);
+    off();
+    expect(reg.get('a')).toBeNull();
+  });
+
+  it('keeps the newest of a key live, and a release uncovers the one it displaced', () => {
+    const reg = createCameraRegistry();
+    const first = camera();
+    const second = camera();
+    const offFirst = reg.register('a', first);
+    const offSecond = reg.register('a', second);
+    expect(reg.get('a')).toBe(second);
+    offFirst();
+    expect(reg.get('a')).toBe(second);
+    offSecond();
+    expect(reg.get('a')).toBeNull();
+    reg.register('a', first);
+    const offAgain = reg.register('a', second);
+    offAgain();
+    expect(reg.get('a')).toBe(first);
+  });
+
+  it('tells subscribers when a key changes hands, and stops when they leave', () => {
+    const reg = createCameraRegistry();
+    const listener = vi.fn();
+    const unsubscribe = reg.subscribe(listener);
+    const off = reg.register('a', camera());
+    expect(listener).toHaveBeenCalledTimes(1);
+    off();
+    off();
+    expect(listener).toHaveBeenCalledTimes(2);
+    unsubscribe();
+    reg.register('b', camera());
+    expect(listener).toHaveBeenCalledTimes(2);
+  });
+});