@weasel-js/labkit 1.6.1 → 1.7.0

package/dist/undo/index.d.ts

@@ -1,9 +1,9 @@
-export { az as UndoCapability } from '../_dts/types-B7yBTTF9.js';
+export { az as UndoCapability } from '../_dts/types-CSm9jgol.js';
 import '@weasel-js/core';
 import 'react';
-import '../_dts/PrefsRow.d-DFpPIeIC.js';
+import '../_dts/PrefsRow.d-TOZ7BgD9.js';
 import '@weasel-js/theme';
-import '../_dts/types-DTuViBvc.js';
+import '../_dts/types-CRPSGFAp.js';
 import '../_dts/types-DJ79Tg5J.js';
 
 /** A subscriber to a named event. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weasel-js/labkit",
-  "version": "1.6.1",
+  "version": "1.7.0",
   "description": "React widgets for building self-contained interactive lab pages",
   "license": "MIT",
   "author": "orochi235",
@@ -115,28 +115,29 @@
     "dev:3d": "LABKIT_EXAMPLE=3d-lab vite"
   },
   "peerDependencies": {
-    "@weasel-js/core": "1.6.1",
-    "@weasel-js/theme": "1.6.1",
+    "@weasel-js/core": "1.7.0",
+    "@weasel-js/theme": "1.7.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "dependencies": {
-    "@weasel-js/geom": "1.6.1",
-    "@weasel-js/kernel3d": "1.6.1",
-    "@weasel-js/loupe": "1.6.1",
-    "@weasel-js/svg": "1.6.1",
-    "@weasel-js/ui": "1.6.1",
-    "earcut": "2.2.4",
+    "@weasel-js/geom": "1.7.0",
+    "@weasel-js/kernel3d": "1.7.0",
+    "@weasel-js/loupe": "1.7.0",
+    "@weasel-js/quantity": "1.7.0",
+    "@weasel-js/svg": "1.7.0",
+    "@weasel-js/ui": "1.7.0",
+    "earcut": "3.2.3",
     "polygon-clipping": "^0.15.7",
     "react-aria-components": "^1.5.0",
-    "windease": "^1.3.0",
+    "windease": "^2.0.0",
     "zustand": "^5.0.12"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.12",
     "@rollup/plugin-alias": "^6.0.0",
-    "@testing-library/jest-dom": "^6.6.0",
-    "@weasel-js/modes": "1.6.1",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@weasel-js/modes": "1.7.0",
     "less": "^4.2.0",
     "rollup-plugin-dts": "^6.4.1",
     "tsx": "^4.19.0",

package/src/annotations/AnnotationOverlay.tsx

@@ -236,11 +236,11 @@ export function AnnotationOverlay({
         style={box}
       />
       {canvas && input ? (
-        // One scope per pane: a shared <ActionsProvider> lets only the newest
-        // canvas under it respond to input, and the rest go silently dead.
+        // Isolated so each pane keeps its own selection and tool.
         <WeaselProvider isolate>
           <ToolBridge toolId={annotationToolInfo(activeToolId)?.weaselTool ?? 'select'} />
           <SceneCanvas<AnnotationData, 'marks', WorldRect>
+            features={['pick', 'move', 'transform', 'edit']}
             ref={attachSceneCanvas}
             scene={scene}
             width={rect.w}

package/src/annotations/Annotations.less

@@ -59,16 +59,6 @@
 
 .lk-mark-list__drop {
   margin-left: auto;
-  background: none;
-  border: 0;
-  color: var(--wzl-fg-muted);
-  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

package/src/annotations/MarkList.tsx

@@ -1,4 +1,4 @@
-import { Input } from '../passthrough/weasel-ui';
+import { CloseButton, Input } from '../passthrough/weasel-ui';
 import { useAnnotations } from './AnnotationsContext';
 import type { AnnotationMeaning } from './types';
 
@@ -35,17 +35,13 @@ export function MarkList({ meaning, config }: MarkListProps) {
               <span className="lk-mark-list__kind">{a.kind}</span>
               <span className="lk-mark-list__target">{a.target}</span>
               {stale ? <span className="lk-mark-list__stale">stale</span> : null}
-              <button
-                type="button"
+              <CloseButton
                 className="lk-mark-list__drop"
-                aria-label={`Remove ${a.kind} on ${a.target}`}
+                ariaLabel={`Remove ${a.kind} on ${a.target}`}
                 onClick={() => marks.remove(a.id)}
-              >
-                ×
-              </button>
+              />
             </div>
             <Input
-              className="lk-mark-list__title"
               aria-label={`Title of ${a.kind} on ${a.target}`}
               value={a.title ?? ''}
               placeholder="Untitled"

package/src/annotations/paint.test.ts

@@ -48,23 +48,12 @@ describe('markCommands', () => {
     ]);
   });
 
-  it('makes an arrow the same line, plus the head as its own command', () => {
+  it('makes an arrow the same line, carrying an end marker', () => {
     const cmds = markCommands(mark('arrow', { points: ENDS }), CONTENT);
+    expect(cmds).toHaveLength(1);
     const stroke = (cmds[0] as { stroke?: { markerEnd?: unknown } }).stroke;
     expect(stroke?.markerEnd).toBe('arrow');
-    expect(anchors([cmds[0]])).toEqual([0.1 * 200, 0.2 * 100, 0.6 * 200, 0.9 * 100]);
-
-    // The head has to be geometry, not just a field: `markerEnd` alone is
-    // inert outside the kit's own node painter, which is what shipped an
-    // arrow with no head.
-    expect(cmds).toHaveLength(2);
-    const head = anchors([cmds[1]]);
-    expect(head.length).toBeGreaterThan(0);
-    // Its vertex is the line's far end — computed, not eyeballed.
-    const near = (v: number, t: number) => Math.abs(v - t) < 1;
-    const xs = head.filter((_, i) => i % 2 === 0);
-    const ys = head.filter((_, i) => i % 2 === 1);
-    expect(xs.some((x, i) => near(x, 120) && near(ys[i] as number, 90))).toBe(true);
+    expect(anchors(cmds)).toEqual([0.1 * 200, 0.2 * 100, 0.6 * 200, 0.9 * 100]);
   });
 
   it('threads a freehand stroke through every point', () => {

package/src/annotations/paint.ts

@@ -1,20 +1,12 @@
 import type { DrawCommand, Path, Stroke } from '@weasel-js/core';
-import {
-  ellipsePath,
-  linePath,
-  markerDrawCommands,
-  PathBuilder,
-  rectPath,
-  textCommand,
-} from '@weasel-js/core';
+import { ellipsePath, linePath, PathBuilder, rectPath, textCommand } from '@weasel-js/core';
 import type { WorldRect } from './frac';
 import type { AnnotationData, FracPoint } from './types';
 
 /** One loud color, not a themed one: a mark sits over the instrument's own
  *  picture and has to be legible against whatever that picture is. */
 const MARK_COLOR = '#e5484d';
-/** World units, so a mark thickens with the picture it annotates — and so the
- *  marker geometry can be resolved here, which needs a resolved width. */
+/** World units, so a mark thickens with the picture it annotates. */
 const MARK_WIDTH = 2;
 const TEXT_SIZE = 14;
 const POINT_RADIUS = 4;
@@ -97,15 +89,7 @@ export function markCommands(
     case 'arrow': {
       const [a, b] = vertices(m, content);
       // The spec's arrow: a line carrying an end marker, not its own geometry.
-      // Markers are separate commands — a stroke's `markerEnd` is inert unless
-      // something turns it into geometry, and only the kit's own node painter
-      // does that, for the nodes it owns.
-      const marked: Stroke = { ...stroke, markerEnd: 'arrow' };
-      const path = linePath(a, b);
-      return [
-        { kind: 'path', path, stroke: marked },
-        ...markerDrawCommands(path, marked, MARK_WIDTH, undefined),
-      ];
+      return [{ kind: 'path', path: linePath(a, b), stroke: { ...stroke, markerEnd: 'arrow' } }];
     }
     case 'stroke':
       return [{ kind: 'path', path: polyline(vertices(m, content)), stroke }];

package/src/annotations/svgNodes.test.ts

@@ -51,16 +51,13 @@ describe('a mark as vector', () => {
     expect(node.stroke?.dash).toEqual([6, 4]);
   });
 
-  it("drops the arrow's marker reference, because its head is already a node", () => {
+  it("keeps the arrow's marker, so the export draws its head", () => {
     const nodes = markSvgNodes(mark('arrow'), CONTENT);
-    expect(nodes.length).toBeGreaterThan(1);
-    for (const node of nodes) {
-      if (node.kind !== 'path') throw new Error('expected path nodes');
-      // Keeping `markerEnd` would make the serializer emit a <marker> def as
-      // well, and the head would be drawn twice.
-      expect(node.stroke?.markerEnd).toBeUndefined();
-    }
-    expect(serializeSvg(nodes, { viewBox: { x: 0, y: 0, width: 100, height: 60 } })).not.toContain(
+    expect(nodes).toHaveLength(1);
+    const [node] = nodes;
+    if (node?.kind !== 'path') throw new Error('expected a path node');
+    expect(node.stroke?.markerEnd).toBe('arrow');
+    expect(serializeSvg(nodes, { viewBox: { x: 0, y: 0, width: 100, height: 60 } })).toContain(
       '<marker',
     );
   });

package/src/annotations/svgNodes.ts

@@ -16,9 +16,6 @@ function toSvgPaint(paint: FillStyle | undefined): SvgPaint {
   return { kind: 'gradient', paint };
 }
 
-/** Marker references are deliberately dropped: `markCommands` already resolves
- *  a marker into its own path command, and keeping the reference would make
- *  the serializer emit a `<marker>` def that draws the head a second time. */
 function toSvgStroke(stroke: Stroke): SvgStroke {
   return {
     paint: toSvgPaint(stroke.paint),
@@ -28,6 +25,9 @@ function toSvgStroke(stroke: Stroke): SvgStroke {
     ...(stroke.dash ? { dash: [...stroke.dash] } : {}),
     ...(stroke.miterLimit != null ? { miterLimit: stroke.miterLimit } : {}),
     ...(stroke.align ? { align: stroke.align } : {}),
+    ...(stroke.markerStart ? { markerStart: stroke.markerStart } : {}),
+    ...(stroke.markerMid ? { markerMid: stroke.markerMid } : {}),
+    ...(stroke.markerEnd ? { markerEnd: stroke.markerEnd } : {}),
   };
 }
 

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.tsx

@@ -5,10 +5,8 @@
  */
 import {
   type Action,
-  ActionsProvider,
   type ActionsRegistry,
-  ActiveToolContextProvider,
-  DepRegistryProvider,
+  InputScope,
   makeViewportZoomAction,
   PointerContextProvider,
   type PointerWorldPos,
@@ -20,6 +18,7 @@ import {
   type View,
   type ViewApi,
   viewportDragPanAction,
+  type Yoke,
 } from '@weasel-js/core';
 import {
   createContext,
@@ -33,6 +32,7 @@ import {
 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 +57,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 +83,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,7 +110,7 @@ export function useCameraView({
   hostRef,
   minZoom = 0.1,
   maxZoom = 32,
-}: CameraViewOptions): ViewApi {
+}: CameraViewOptions): CameraView {
   const live = useRef({ view: normalize2DView(view), onViewChange, frame });
   live.current = { view: normalize2DView(view), onViewChange, frame };
   const initialZoom = useRef(isPositiveFinite(view.zoom) ? view.zoom : null);
@@ -121,7 +121,7 @@ export function useCameraView({
     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,6 +138,7 @@ export function useCameraView({
         const r = hostRef.current?.getBoundingClientRect();
         return r ? { width: r.width, height: r.height } : null;
       },
+      zoomRange: () => ({ ...bounds.current }),
     };
   }, [hostRef]);
 }
@@ -149,7 +150,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. */
@@ -209,7 +212,8 @@ 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,
     ];
@@ -237,26 +241,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;
 }

package/src/canvas/CanvasStack.tsx

@@ -1,3 +1,4 @@
+import type { Yoke } 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 +26,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 +48,7 @@ export function CanvasStack({
   onResize,
   onHitTest,
   children,
+  yoke,
 }: CanvasStackProps) {
   const view = normalize2DView(viewProp);
   const containerRef = useRef<HTMLDivElement | null>(null);
@@ -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/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,4 @@
+import type { Yoke } 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 +22,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 +62,7 @@ export function Stage({
   hostRef,
   overlay,
   children,
+  yoke,
 }: StageProps) {
   const view = normalize2DView(viewProp);
   const host = useRef<HTMLDivElement | null>(null);
@@ -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);
+  });
+});