@weasel-js/labkit 1.6.0 → 1.7.0

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,10 +1,11 @@
-import { type CSSProperties, type ReactNode, useContext, useEffect, useRef } from 'react';
+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';
 import { useSurfaceOptional } from '../surface/useSurfaceTile';
-import { CameraWheelContext } from './CameraWheelContext';
-import { usePanZoom } from './usePanZoom';
-import type { ViewportSize } from './worldSpec';
+import { CameraContext, CameraInput, CameraScope, useCameraView } from './CameraInput';
+import { LinkedCursor } from './LinkedCursor';
+import { DEFAULT_FRAME, type ViewportSize } from './worldSpec';
 
 /** Props for `<Stage>`. */
 export interface StageProps {
@@ -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;
 }
 
 /**
@@ -43,7 +47,8 @@ export function fitStage(size: ViewportSize, viewport: ViewportSize): ViewTransf
 
 /**
  * DOM content of a fixed size, panned and zoomed by a camera — what
- * `<CanvasStack>` is for layers drawn to a canvas. The content is laid out at
+ * `<CanvasStack>` is for layers drawn to a canvas. Pan and zoom route through
+ * weasel's gesture dispatcher (`<CameraInput>`). The content is laid out at
  * its own size and transformed, so everything inside keeps its layout and a
  * measurement of any element in it reports where it is actually drawn.
  */
@@ -57,28 +62,28 @@ export function Stage({
   hostRef,
   overlay,
   children,
+  yoke,
 }: StageProps) {
   const view = normalize2DView(viewProp);
   const host = useRef<HTMLDivElement | null>(null);
   const surface = useSurfaceOptional();
-  const handlers = usePanZoom({ view: viewProp, onViewChange, minZoom, maxZoom });
-  const onWheelRef = useRef(handlers.onWheel);
-  onWheelRef.current = handlers.onWheel;
-  const wheelSlot = useContext(CameraWheelContext);
-
-  // Bound by hand because React registers wheel listeners passive, where
-  // `preventDefault` is refused and the page scrolls under the zoom.
-  useEffect(() => {
-    const el = host.current;
-    if (!el) return;
-    const wheel = (e: WheelEvent): void => onWheelRef.current(e, el);
-    el.addEventListener('wheel', wheel, { passive: false });
-    if (wheelSlot) wheelSlot.current = wheel;
-    return () => {
-      el.removeEventListener('wheel', wheel);
-      if (wheelSlot?.current === wheel) wheelSlot.current = null;
-    };
-  }, [wheelSlot]);
+  const camera = useCameraView({
+    view: viewProp,
+    onViewChange,
+    frame: DEFAULT_FRAME,
+    hostRef: host,
+    minZoom,
+    maxZoom,
+  });
+  const cameraCtx = useMemo(
+    () => ({
+      view: camera,
+      frame: DEFAULT_FRAME,
+      element: () => host.current,
+      content: { x: 0, y: 0, width: size.width, height: size.height },
+    }),
+    [camera, size.width, size.height],
+  );
 
   const onResizeRef = useRef(onResize);
   onResizeRef.current = onResize;
@@ -108,7 +113,7 @@ export function Stage({
   // The camera changes every frame of a pan, and a transform has nowhere to
   // live but the element's own style: set as custom properties the stylesheet
   // reads.
-  const camera = {
+  const cameraVars = {
     ['--lk-stage-x' as string]: `${view.pan.x}px`,
     ['--lk-stage-y' as string]: `${view.pan.y}px`,
     ['--lk-stage-zoom' as string]: String(view.zoom),
@@ -117,18 +122,23 @@ export function Stage({
   } as CSSProperties;
 
   return (
-    <div
-      ref={(el) => {
-        host.current = el;
-        if (hostRef) hostRef.current = el;
-      }}
-      className="lk-stage"
-      onPointerDown={handlers.onPointerDown}
-    >
-      <div className="lk-stage__content" style={camera}>
-        {children}
-      </div>
-      {overlay}
-    </div>
+    <CameraScope yoke={yoke}>
+      <CameraContext.Provider value={cameraCtx}>
+        <CameraInput hostRef={host} camera={camera} frame={DEFAULT_FRAME} />
+        <div
+          ref={(el) => {
+            host.current = el;
+            if (hostRef) hostRef.current = el;
+          }}
+          className="lk-stage"
+        >
+          <div className="lk-stage__content" style={cameraVars}>
+            {children}
+          </div>
+          <LinkedCursor />
+          {overlay}
+        </div>
+      </CameraContext.Provider>
+    </CameraScope>
   );
 }

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

package/src/canvas/cameraRegistry.ts

@@ -0,0 +1,86 @@
+import { useActionsRegistry } from '@weasel-js/core';
+import { createContext, useContext, useEffect } from 'react';
+import type { CameraView } from './CameraInput';
+
+/**
+ * Cameras by key, for chrome that acts on a camera it does not contain — the
+ * lab's zoom controls, which drive whichever trial has the focus.
+ */
+export interface CameraRegistry {
+  /** Publish `camera` under `key` and return its release. Registrants for one
+   *  key stack, newest live. */
+  register(key: string, camera: CameraView): () => void;
+  get(key: string): CameraView | null;
+  /** Fires after any register or release. Shaped for `useSyncExternalStore`. */
+  subscribe(listener: () => void): () => void;
+}
+
+export function createCameraRegistry(): CameraRegistry {
+  const stacks = new Map<string, CameraView[]>();
+  const listeners = new Set<() => void>();
+  const notify = (): void => {
+    for (const l of listeners) l();
+  };
+  return {
+    register(key, camera) {
+      const stack = stacks.get(key) ?? [];
+      stack.push(camera);
+      stacks.set(key, stack);
+      notify();
+      let released = false;
+      return () => {
+        if (released) return;
+        released = true;
+        const cur = stacks.get(key);
+        const i = cur?.lastIndexOf(camera) ?? -1;
+        if (!cur || i === -1) return;
+        cur.splice(i, 1);
+        if (cur.length === 0) stacks.delete(key);
+        notify();
+      };
+    },
+    get: (key) => stacks.get(key)?.at(-1) ?? null,
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+  };
+}
+
+/** The registry a lab keeps its trials' cameras in. */
+export const CameraRegistryContext = createContext<CameraRegistry | null>(null);
+
+/** Where a camera publishes itself. The host binds the key — a trial provides
+ *  one that registers under its own id — so the camera needs no name. */
+export const CameraPublishContext = createContext<((camera: CameraView) => () => void) | null>(
+  null,
+);
+
+/** Publish `camera` to the host in scope for as long as the caller is mounted,
+ *  and again each time its input scope becomes the active one — a registry
+ *  key stacks newest-live, so the camera last used is the one chrome reaches.
+ *  Call it inside the camera's scope. */
+export function usePublishCamera(camera: CameraView): void {
+  const publish = useContext(CameraPublishContext);
+  const actions = useActionsRegistry();
+  useEffect(() => {
+    if (!publish) return;
+    let release = publish(camera);
+    if (!actions) return release;
+    let was = actions.isActive();
+    const off = actions.subscribe(() => {
+      const now = actions.isActive();
+      if (now && !was) {
+        release();
+        release = publish(camera);
+      }
+      was = now;
+    });
+    return () => {
+      off();
+      release();
+    };
+  }, [publish, camera, actions]);
+}

package/src/canvas/cameraView.test.ts

@@ -0,0 +1,60 @@
+import type { View } from '@weasel-js/core';
+import { describe, expect, it } from 'vitest';
+import { clampZoomAbout, frameLocalToWorld, fromCameraView, toCameraView } from './cameraView';
+import { worldToScreen } from './canvasCoords';
+import type { WorldFrame } from './worldSpec';
+
+const UP: WorldFrame = { originPx: { x: 200, y: 150 }, yDir: -1 };
+const vt = { zoom: 2.5, pan: { x: 30, y: -40 } };
+
+/** Where a weasel View puts a frame-local point. */
+const project = (v: View, p: { x: number; y: number }) => ({
+  x: (p.x - v.x) * v.scale.x,
+  y: (p.y - v.y) * v.scale.y,
+});
+
+describe('camera as a weasel View', () => {
+  it.each([
+    ['default frame', undefined],
+    ['moved origin, y up', UP],
+  ] as const)('places every world point where labkit does (%s)', (_, frame) => {
+    const v = toCameraView(vt, frame);
+    for (const w of [
+      { x: 0, y: 0 },
+      { x: 13, y: -7 },
+      { x: -120, y: 44 },
+    ]) {
+      const local = frameLocalToWorld(w, frame);
+      const a = project(v, local);
+      const b = worldToScreen(w, vt, frame);
+      expect(a.x).toBeCloseTo(b.x);
+      expect(a.y).toBeCloseTo(b.y);
+    }
+  });
+
+  it('round-trips', () => {
+    const back = fromCameraView(toCameraView(vt, UP), UP);
+    expect(back.zoom).toBeCloseTo(vt.zoom);
+    expect(back.pan.x).toBeCloseTo(vt.pan.x);
+    expect(back.pan.y).toBeCloseTo(vt.pan.y);
+  });
+});
+
+describe('clampZoomAbout', () => {
+  const prev: View = { x: 0, y: 0, scale: { x: 1, y: 1 } };
+  it('holds the anchor of a zoom that hits the bound', () => {
+    // A 4x zoom about screen (100, 50): world under it stays (100, 50).
+    const next: View = { x: 75, y: 37.5, scale: { x: 4, y: 4 } };
+    const out = clampZoomAbout(prev, next, 0.5, 2);
+    expect(out.scale.x).toBe(2);
+    expect(100 / out.scale.x + out.x).toBeCloseTo(100);
+    expect(50 / out.scale.y + out.y).toBeCloseTo(50);
+  });
+
+  it('passes a zoom inside the bounds and a pan through', () => {
+    const inside: View = { x: 10, y: 5, scale: { x: 1.5, y: 1.5 } };
+    expect(clampZoomAbout(prev, inside, 0.5, 2)).toBe(inside);
+    const pan: View = { x: 10, y: 5, scale: { x: 1, y: 1 } };
+    expect(clampZoomAbout(prev, pan, 0.5, 2)).toBe(pan);
+  });
+});

package/src/canvas/cameraView.ts

@@ -0,0 +1,61 @@
+/**
+ * labkit's camera as a weasel `View`, so core's viewport actions drive it.
+ *
+ * labkit places a world point on screen at
+ * `originPx + pan + zoom * (x, yDir * y)`. A weasel `View` places one at
+ * `(p - (x, y)) * scale`. Over *frame-local* coordinates — the world with `y`
+ * multiplied by `yDir` — the two are the same affine map, which is all a pan
+ * or a zoom about a screen point needs.
+ */
+import type { View } from '@weasel-js/core';
+import type { Point, ViewTransform } from '../instrument/types';
+import { normalize2DView } from '../state/view';
+import { DEFAULT_FRAME, type WorldFrame } from './worldSpec';
+
+/** The weasel `View` equal to `view` under `frame`. */
+export function toCameraView(view: ViewTransform, frame: WorldFrame = DEFAULT_FRAME): View {
+  const v = normalize2DView(view);
+  return {
+    x: -(frame.originPx.x + v.pan.x) / v.zoom,
+    y: -(frame.originPx.y + v.pan.y) / v.zoom,
+    scale: { x: v.zoom, y: v.zoom },
+  };
+}
+
+/** The labkit camera equal to weasel `view` under `frame`. */
+export function fromCameraView(view: View, frame: WorldFrame = DEFAULT_FRAME): ViewTransform {
+  const zoom = view.scale.x;
+  return {
+    zoom,
+    pan: { x: -view.x * zoom - frame.originPx.x, y: -view.y * zoom - frame.originPx.y },
+  };
+}
+
+/** A frame-local point in the instrument's world, and back — the map is its
+ *  own inverse. */
+export function frameLocalToWorld(p: Point, frame: WorldFrame = DEFAULT_FRAME): Point {
+  return { x: p.x, y: p.y * frame.yDir };
+}
+
+/**
+ * `next` with its zoom held to [`min`, `max`], about the screen point the step
+ * from `prev` was anchored on, so a zoom that hits a bound stays anchored where
+ * the pointer is. A pan (equal scales) passes through.
+ */
+export function clampZoomAbout(prev: View, next: View, min: number, max: number): View {
+  const s0 = prev.scale.x;
+  const s1 = next.scale.x;
+  const clamped = Math.min(max, Math.max(min, s1));
+  if (clamped === s1) return next;
+  if (s0 === s1) return { ...next, scale: { x: clamped, y: clamped } };
+  // The screen point both views agree on: p / s0 + x0 = p / s1 + x1.
+  const inv = 1 / s0 - 1 / s1;
+  const px = (next.x - prev.x) / inv;
+  const py = (next.y - prev.y) / inv;
+  // The same point under the clamped scale.
+  return {
+    x: prev.x + px / s0 - px / clamped,
+    y: prev.y + py / s0 - py / clamped,
+    scale: { x: clamped, y: clamped },
+  };
+}

package/src/canvas/cameraZoom.test.ts

@@ -0,0 +1,46 @@
+import { describe, expect, it } from 'vitest';
+import type { CameraView } from './CameraInput';
+import { zoomCameraTo } from './cameraZoom';
+
+function fakeCamera(
+  host: { width: number; height: number } | null,
+  range = { min: 0.1, max: 32 },
+): CameraView & {
+  view: { x: number; y: number; scale: { x: number; y: number } };
+} {
+  const cam = {
+    view: { x: 0, y: 0, scale: { x: 1, y: 1 } },
+    get: () => cam.view,
+    set: (v: { x: number; y: number; scale: { x: number; y: number } }) => {
+      const s = Math.min(range.max, Math.max(range.min, v.scale.x));
+      cam.view = { ...v, scale: { x: s, y: s } };
+    },
+    hostSize: () => host,
+    zoomRange: () => range,
+  };
+  return cam;
+}
+
+describe('zoomCameraTo', () => {
+  it('keeps the middle of the view where it was', () => {
+    const cam = fakeCamera({ width: 200, height: 100 });
+    zoomCameraTo(cam, 2);
+    // The world point under the screen middle (100, 50) is still under it.
+    expect(cam.view.x + 100 / cam.view.scale.x).toBeCloseTo(100);
+    expect(cam.view.y + 50 / cam.view.scale.y).toBeCloseTo(50);
+    expect(cam.view.scale.x).toBe(2);
+  });
+
+  it('anchors at the origin when the camera cannot measure its host', () => {
+    const cam = fakeCamera(null);
+    zoomCameraTo(cam, 2);
+    expect(cam.view).toEqual({ x: 0, y: 0, scale: { x: 2, y: 2 } });
+  });
+
+  it('stops at the edge of the camera range', () => {
+    const cam = fakeCamera({ width: 200, height: 100 }, { min: 0.5, max: 1.2 });
+    zoomCameraTo(cam, 5);
+    expect(cam.view.scale.x).toBe(1.2);
+    expect(cam.view.x + 100 / cam.view.scale.x).toBeCloseTo(100);
+  });
+});

package/src/canvas/cameraZoom.ts

@@ -0,0 +1,24 @@
+import type { View } from '@weasel-js/core';
+import type { CameraView } from './CameraInput';
+
+/** `view` at `scale`, about the screen point `at`. */
+export function atScale(view: View, scale: number, at: { x: number; y: number }): View {
+  return {
+    x: view.x + at.x / view.scale.x - at.x / scale,
+    y: view.y + at.y / view.scale.y - at.y / scale,
+    scale: { x: scale, y: scale },
+  };
+}
+
+/** The middle of the camera's host, in its own screen space; the origin when it cannot measure. */
+export function viewMiddle(camera: CameraView): { x: number; y: number } {
+  const size = camera.hostSize?.();
+  return size ? { x: size.width / 2, y: size.height / 2 } : { x: 0, y: 0 };
+}
+
+/** Zoom `camera` to `zoom` about the middle of its view, within its range. */
+export function zoomCameraTo(camera: CameraView, zoom: number): void {
+  const { min, max } = camera.zoomRange();
+  const scale = Math.min(max, Math.max(min, zoom));
+  camera.set(atScale(camera.get(), scale, viewMiddle(camera)));
+}

package/src/canvas/index.ts

@@ -1,3 +1,17 @@
+export type {
+  CameraContextValue,
+  CameraInputProps,
+  CameraView,
+  CameraViewOptions,
+  ZoomRange,
+} from './CameraInput';
+export {
+  CameraContext,
+  CameraInput,
+  CameraScope,
+  STAGE_VIEW_ID,
+  useCameraView,
+} from './CameraInput';
 export type { CameraWheelSlot } from './CameraWheelContext';
 export { CameraWheelContext } from './CameraWheelContext';
 export type { CanvasStackProps } from './CanvasStack';
@@ -6,11 +20,18 @@ export type { CanvasStackContextValue, CanvasStackSurface } from './CanvasStackC
 export { CanvasStackContext } from './CanvasStackContext';
 export type { ZoomAtOptions } from './camera';
 export { centerOn, zoomAt } from './camera';
+export type { CameraRegistry } from './cameraRegistry';
+export {
+  CameraPublishContext,
+  CameraRegistryContext,
+  createCameraRegistry,
+  usePublishCamera,
+} from './cameraRegistry';
+export { clampZoomAbout, frameLocalToWorld, fromCameraView, toCameraView } from './cameraView';
 export { screenToWorld, worldToScreen } from './canvasCoords';
+export { LinkedCursor } from './LinkedCursor';
 export type { StageProps } from './Stage';
 export { fitStage, Stage } from './Stage';
 export type { CanvasLayerDescriptor } from './useLayerScheduler';
-export type { PanZoomHandlers, UsePanZoomOptions } from './usePanZoom';
-export { usePanZoom } from './usePanZoom';
 export type { ViewportSize, WorldFrame, WorldSpec } from './worldSpec';
 export { applyCamera, DEFAULT_FRAME, resolveFrame } from './worldSpec';

package/src/canvas/sharedScope.test.tsx

@@ -0,0 +1,94 @@
+/**
+ * Two cameras under one host scope — what a trial gives every canvas inside it,
+ * and what a forge index page puts several of in. Each must answer only for
+ * itself: the newest must not take the others' gestures.
+ */
+
+import { act, render } from '@testing-library/react';
+import { WeaselProvider } from '@weasel-js/core';
+import { beforeAll, describe, expect, it, vi } from 'vitest';
+import type { ViewTransform } from '../instrument/types';
+import { CanvasStack } from './CanvasStack';
+
+beforeAll(() => {
+  HTMLCanvasElement.prototype.getContext = vi.fn(
+    () => null,
+  ) as unknown as HTMLCanvasElement['getContext'];
+  const proto = HTMLElement.prototype as unknown as Record<string, unknown>;
+  proto.setPointerCapture = vi.fn();
+  proto.releasePointerCapture = vi.fn();
+  proto.hasPointerCapture = vi.fn(() => true);
+});
+
+function pointer(el: Element, type: string, x: number, y: number, buttons = 1) {
+  el.dispatchEvent(
+    new PointerEvent(type, {
+      bubbles: true,
+      cancelable: true,
+      pointerId: 1,
+      clientX: x,
+      clientY: y,
+      button: 0,
+      buttons,
+    }),
+  );
+}
+
+const VIEW: ViewTransform = { zoom: 1, pan: { x: 0, y: 0 } };
+
+function mountTwo() {
+  const views = [vi.fn(), vi.fn()];
+  const taps = [vi.fn(), vi.fn()];
+  const { container } = render(
+    <WeaselProvider isolate>
+      {(['a', 'b'] as const).map((id, i) => (
+        <CanvasStack
+          key={id}
+          layers={[]}
+          view={VIEW}
+          onViewChange={views[i]}
+          onHitTest={taps[i]}
+          width={100}
+          height={100}
+        />
+      ))}
+    </WeaselProvider>,
+  );
+  const hosts = [...container.querySelectorAll<HTMLElement>('.lk-canvas-stack')];
+  return { hosts, views, taps };
+}
+
+describe('cameras sharing a host scope', () => {
+  it('pans the camera the drag began on, not the newest', () => {
+    const { hosts, views } = mountTwo();
+    act(() => {
+      pointer(hosts[0]!, 'pointerdown', 50, 50);
+      pointer(hosts[0]!, 'pointermove', 60, 55);
+      pointer(hosts[0]!, 'pointermove', 80, 70);
+      pointer(hosts[0]!, 'pointerup', 80, 70, 0);
+    });
+    expect(views[0]).toHaveBeenCalled();
+    expect(views[1]).not.toHaveBeenCalled();
+  });
+
+  it('reports a tap to the canvas it landed on', () => {
+    const { hosts, taps } = mountTwo();
+    act(() => {
+      pointer(hosts[0]!, 'pointerdown', 50, 50);
+      pointer(hosts[0]!, 'pointerup', 50, 50, 0);
+    });
+    expect(taps[0]).toHaveBeenCalledTimes(1);
+    expect(taps[1]).not.toHaveBeenCalled();
+  });
+
+  it('still drives the newest camera from its own canvas', () => {
+    const { hosts, views } = mountTwo();
+    act(() => {
+      pointer(hosts[1]!, 'pointerdown', 50, 50);
+      pointer(hosts[1]!, 'pointermove', 80, 70);
+      pointer(hosts[1]!, 'pointerup', 80, 70, 0);
+    });
+    expect(views[1]).toHaveBeenCalled();
+    expect(views[0]).not.toHaveBeenCalled();
+  });
+});

package/src/chrome/ChromeRegions.stories.tsx

@@ -72,6 +72,7 @@ export default meta;
 type Story = StoryObj<typeof Lab>;
 
 export const EveryRegion: Story = {
+  tags: ['gallery'],
   args: {
     instruments: [FullInstrument],
     defaultInstrument: 'Every Region',

package/src/chrome/regions/PaletteRegion.less

@@ -4,11 +4,4 @@
   padding: var(--wzl-space-xs);
   border-right: var(--wzl-border-w) solid var(--wzl-line-subtle);
   background: var(--wzl-surface-sunken);
-
-  // labkit's `:where(button)` default sets an explicit height, and because
-  // :where() carries no specificity it also wins over ToolButton, which sizes
-  // itself from padding.
-  button {
-    height: auto;
-  }
 }