@weasel-js/labkit 1.3.0 → 1.4.0-pre.1

package/dist/chunk-E2UQVZ44.js

@@ -0,0 +1,458 @@
+import { centerOn, zoomAt } from './chunk-CTRKTLYZ.js';
+import { resolveFrame, screenToWorld, DEFAULT_FRAME } from './chunk-2AYGEN57.js';
+import { CanvasStackContext } from './chunk-CQLQPQ4P.js';
+import { useVisibleRaf } from './chunk-L5QJOOLV.js';
+import { useRef, useEffect, useReducer, useCallback, useContext, useMemo, useState } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/loupe/canvasLens.ts
+function lensCamera(aim, outer, outerFrame, factor, diameter, worldSpec) {
+  const size = { width: diameter, height: diameter };
+  const frame = resolveFrame(worldSpec, size);
+  const world = screenToWorld(aim, outer, outerFrame);
+  return { view: centerOn(world, outer.zoom * factor, size, frame), frame };
+}
+function lensSourceRect(aim, factor, diameter, dpr) {
+  const span = diameter / factor;
+  return {
+    sx: (aim.x - span / 2) * dpr,
+    sy: (aim.y - span / 2) * dpr,
+    sw: span * dpr,
+    sh: span * dpr
+  };
+}
+function sampleStack(layers, canvases, p, dpr) {
+  for (let i = layers.length - 1; i >= 0; i--) {
+    const layer = layers[i];
+    if (!layer.visible) continue;
+    const canvas = canvases.get(layer.id);
+    if (!canvas) continue;
+    const ctx = canvas.getContext("2d", { willReadFrequently: true });
+    if (!ctx) continue;
+    const x = Math.floor(p.x * dpr);
+    const y = Math.floor(p.y * dpr);
+    if (x < 0 || y < 0 || x >= canvas.width || y >= canvas.height) continue;
+    const [r, g, b, a] = ctx.getImageData(x, y, 1, 1).data;
+    if (a === 0) continue;
+    return `#${[r, g, b].map((c) => c.toString(16).padStart(2, "0")).join("")}`;
+  }
+  return null;
+}
+function drawCanvasLens(ctx, opts) {
+  const { aim, factor, diameter, dpr, mode, outer, layers, canvases } = opts;
+  ctx.save();
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  ctx.clearRect(0, 0, diameter, diameter);
+  if (mode === "pixel") {
+    const { sx, sy, sw, sh } = lensSourceRect(aim, factor, diameter, dpr);
+    ctx.imageSmoothingEnabled = false;
+    for (const layer of layers) {
+      if (!layer.visible) continue;
+      const canvas = canvases.get(layer.id);
+      if (!canvas || canvas.width === 0 || canvas.height === 0) continue;
+      ctx.drawImage(canvas, sx, sy, sw, sh, 0, 0, diameter, diameter);
+    }
+    ctx.restore();
+    return;
+  }
+  const lens = lensCamera(
+    aim,
+    outer,
+    opts.outerFrame ?? DEFAULT_FRAME,
+    factor,
+    diameter,
+    opts.worldSpec
+  );
+  for (const layer of layers) {
+    if (!layer.visible) continue;
+    ctx.save();
+    layer.render(ctx, lens.view, lens.frame);
+    ctx.restore();
+  }
+  ctx.restore();
+}
+function CanvasLoupe({
+  aim,
+  factor,
+  mode,
+  diameter,
+  surface,
+  view,
+  frame,
+  worldSpec
+}) {
+  const canvasRef = useRef(null);
+  const dpr = surface.size.dpr;
+  const args = { aim, factor, mode, diameter, dpr, view, frame, worldSpec, surface };
+  const argsRef = useRef(args);
+  argsRef.current = args;
+  const loop = useVisibleRaf(
+    () => {
+      loop.request();
+      const canvas = canvasRef.current;
+      const ctx = canvas?.getContext("2d");
+      const canvases = argsRef.current.surface.canvases.current;
+      if (!ctx || !canvases) return;
+      const a = argsRef.current;
+      drawCanvasLens(ctx, {
+        aim: a.aim,
+        factor: a.factor,
+        diameter: a.diameter,
+        dpr: a.dpr,
+        mode: a.mode,
+        outer: a.view,
+        outerFrame: a.frame,
+        worldSpec: a.worldSpec,
+        layers: a.surface.layers,
+        canvases
+      });
+    },
+    { target: canvasRef }
+  );
+  useEffect(() => {
+    loop.request();
+    return () => loop.cancel();
+  }, [loop]);
+  return /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      ref: canvasRef,
+      className: "lk-loupe__canvas",
+      width: Math.max(1, Math.round(diameter * dpr)),
+      height: Math.max(1, Math.round(diameter * dpr))
+    }
+  );
+}
+function DomLoupe({
+  aim,
+  factor,
+  mode,
+  diameter,
+  size,
+  view,
+  frame,
+  state,
+  config,
+  render
+}) {
+  const style = {
+    width: `${size.width}px`,
+    height: `${size.height}px`,
+    transform: `translate(${diameter / 2 - aim.x}px, ${diameter / 2 - aim.y}px)`
+  };
+  return /* @__PURE__ */ jsx("div", { className: "lk-loupe__stage", style, children: render({
+    state,
+    config,
+    view: zoomAt(view, factor, aim, { frame }),
+    factor,
+    mode,
+    size
+  }) });
+}
+function LoupeBubble({ aim, diameter, hostRef, children }) {
+  const style = {
+    width: `${diameter}px`,
+    height: `${diameter}px`,
+    transform: `translate(${aim.x - diameter / 2}px, ${aim.y - diameter / 2}px)`
+  };
+  return /* @__PURE__ */ jsx("div", { ref: hostRef, className: "lk-loupe", style, "aria-hidden": "true", children });
+}
+var ZERO = { width: 0, height: 0 };
+function useHostSize(ref) {
+  const [size, setSize] = useState(ZERO);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const update = () => {
+      const rect = el.getBoundingClientRect();
+      setSize(
+        (prev) => prev.width === rect.width && prev.height === rect.height ? prev : { width: rect.width, height: rect.height }
+      );
+    };
+    update();
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [ref]);
+  return size;
+}
+
+// ../loupe/dist/index.js
+function loupeSourcePoint(p, rect, aim, factor) {
+  return {
+    x: aim.x + (p.x - (rect.x + rect.w / 2)) / factor,
+    y: aim.y + (p.y - (rect.y + rect.h / 2)) / factor
+  };
+}
+function createLoupeModel(opts) {
+  const { surface } = opts;
+  let mode = opts.mode ?? "vector";
+  let factor = opts.factor ?? 8;
+  let aim = { x: 0, y: 0 };
+  let color = null;
+  let disposed = false;
+  const clamp = (n) => Math.min(
+    opts.maxFactor ?? Number.POSITIVE_INFINITY,
+    Math.max(opts.minFactor ?? Number.NEGATIVE_INFINITY, n)
+  );
+  const teardown = () => {
+    if (disposed) return;
+    disposed = true;
+    opts.onDispose?.();
+  };
+  const sampleColor = () => {
+    const hex = surface.sample(aim);
+    if (hex === null || hex === color) return;
+    color = hex;
+    opts.onColorChange?.(hex);
+  };
+  return {
+    get mode() {
+      return mode;
+    },
+    get factor() {
+      return factor;
+    },
+    get aim() {
+      return aim;
+    },
+    get color() {
+      return color;
+    },
+    setMode(next) {
+      if (disposed || next === mode) return;
+      mode = next;
+      surface.changed();
+    },
+    setFactor(next) {
+      if (disposed) return;
+      factor = clamp(next);
+      surface.changed();
+    },
+    aimAt(p) {
+      if (disposed) return;
+      if (surface.gone()) {
+        teardown();
+        return;
+      }
+      if (surface.hidden()) return;
+      if (surface.covers(p)) return;
+      aim = p;
+      sampleColor();
+      surface.changed();
+    },
+    pick(p) {
+      if (disposed) return null;
+      let at = aim;
+      if (p) {
+        const rect = surface.lens();
+        if (!rect) return null;
+        at = loupeSourcePoint(p, rect, aim, factor);
+        if (surface.covers(at)) return null;
+      }
+      const hex = surface.sample(at);
+      if (hex !== null) opts.onPick?.(hex);
+      return hex;
+    },
+    dispose: teardown
+  };
+}
+var WHEEL_RATE = 2e-3;
+function useLoupe({ capability, hostRef, enabled, sample }) {
+  const [, bump] = useReducer((n) => n + 1, 0);
+  const overRef = useRef(false);
+  const peekingRef = useRef(false);
+  const enabledRef = useRef(enabled);
+  enabledRef.current = enabled;
+  const sampleRef = useRef(sample);
+  sampleRef.current = sample;
+  const onColorChangeRef = useRef(capability.onColorChange);
+  onColorChangeRef.current = capability.onColorChange;
+  const shown = useCallback(
+    () => overRef.current && (enabledRef.current || peekingRef.current),
+    []
+  );
+  const modelRef = useRef(null);
+  if (modelRef.current === null) {
+    modelRef.current = createLoupeModel({
+      mode: capability.mode,
+      factor: capability.factor,
+      minFactor: capability.minFactor,
+      maxFactor: capability.maxFactor,
+      onColorChange: (hex) => onColorChangeRef.current?.(hex),
+      surface: {
+        lens: () => {
+          const d = diameterRef.current;
+          const { x, y } = modelRef.current?.aim ?? { x: 0, y: 0 };
+          return { x: x - d / 2, y: y - d / 2, w: d, h: d };
+        },
+        // The lens follows the pointer and is painted over the host rather than
+        // into it, so it is never part of the picture being magnified.
+        covers: () => false,
+        sample: (p) => sampleRef.current?.(p) ?? null,
+        hidden: () => !shown(),
+        gone: () => goneRef.current,
+        changed: bump
+      }
+    });
+  }
+  const model = modelRef.current;
+  const diameterRef = useRef(capability.diameter);
+  diameterRef.current = capability.diameter;
+  const goneRef = useRef(false);
+  useEffect(() => {
+    goneRef.current = false;
+    return () => {
+      goneRef.current = true;
+    };
+  }, []);
+  useEffect(() => {
+    if (!enabled && !peekingRef.current) bump();
+  }, [enabled]);
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host) return;
+    const onPointerMove = (e) => {
+      overRef.current = true;
+      const rect = host.getBoundingClientRect();
+      model.aimAt({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+      if (!shown()) return;
+      bump();
+    };
+    const onPointerLeave = () => {
+      overRef.current = false;
+      bump();
+    };
+    const onWheel = (e) => {
+      if (!shown()) return;
+      e.preventDefault();
+      e.stopPropagation();
+      model.setFactor(model.factor * Math.exp(-e.deltaY * WHEEL_RATE));
+    };
+    host.addEventListener("pointermove", onPointerMove);
+    host.addEventListener("pointerleave", onPointerLeave);
+    host.addEventListener("wheel", onWheel, { capture: true, passive: false });
+    return () => {
+      host.removeEventListener("pointermove", onPointerMove);
+      host.removeEventListener("pointerleave", onPointerLeave);
+      host.removeEventListener("wheel", onWheel, { capture: true });
+    };
+  }, [hostRef, model, shown]);
+  const peekKey = capability.peekKey;
+  useEffect(() => {
+    if (peekKey == null) return;
+    const setPeeking = (next) => {
+      if (peekingRef.current === next) return;
+      peekingRef.current = next;
+      bump();
+    };
+    const onKeyDown = (e) => {
+      if (e.key === peekKey) setPeeking(true);
+    };
+    const onKeyUp = (e) => {
+      if (e.key === peekKey) setPeeking(false);
+    };
+    const onBlur = () => setPeeking(false);
+    window.addEventListener("keydown", onKeyDown);
+    window.addEventListener("keyup", onKeyUp);
+    window.addEventListener("blur", onBlur);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener("keyup", onKeyUp);
+      window.removeEventListener("blur", onBlur);
+    };
+  }, [peekKey]);
+  return {
+    visible: shown(),
+    aim: model.aim,
+    factor: model.factor,
+    mode: model.mode,
+    color: model.color,
+    setMode: model.setMode,
+    setFactor: model.setFactor,
+    pick: model.pick
+  };
+}
+var NO_HOST = { current: null };
+function TrialLoupe({
+  capability,
+  enabled,
+  state,
+  config,
+  view,
+  worldSpec,
+  hostRef
+}) {
+  const stack = useContext(CanvasStackContext);
+  const surface = capability.render ? void 0 : stack?.surface;
+  const host = surface?.element ?? hostRef ?? NO_HOST;
+  const sample = useMemo(() => {
+    if (!surface) return void 0;
+    return (p) => {
+      const canvases = surface.canvases.current;
+      return canvases ? sampleStack(surface.layers, canvases, p, surface.size.dpr) : null;
+    };
+  }, [surface]);
+  const loupe = useLoupe({ capability, hostRef: host, enabled, sample });
+  const measured = useHostSize(host);
+  const size = surface?.size ?? measured;
+  if (!loupe.visible) return null;
+  return /* @__PURE__ */ jsx(LoupeBubble, { aim: loupe.aim, diameter: capability.diameter, children: capability.render ? /* @__PURE__ */ jsx(
+    DomLoupe,
+    {
+      aim: loupe.aim,
+      factor: loupe.factor,
+      mode: loupe.mode,
+      diameter: capability.diameter,
+      size,
+      view,
+      frame: stack?.frame,
+      state,
+      config,
+      render: capability.render
+    }
+  ) : surface && stack ? /* @__PURE__ */ jsx(
+    CanvasLoupe,
+    {
+      aim: loupe.aim,
+      factor: loupe.factor,
+      mode: loupe.mode,
+      diameter: capability.diameter,
+      surface,
+      view: stack.view,
+      frame: stack.frame,
+      worldSpec
+    }
+  ) : null });
+}
+
+// src/loupe/types.ts
+var LOUPE_DEFAULTS = {
+  factor: 6,
+  minFactor: 2,
+  maxFactor: 32,
+  mode: "vector",
+  diameter: 200,
+  peekKey: "Alt"
+};
+function resolveLoupe(declared) {
+  const cap = declared === true ? {} : declared;
+  const minFactor = cap.minFactor ?? LOUPE_DEFAULTS.minFactor;
+  const maxFactor = cap.maxFactor ?? LOUPE_DEFAULTS.maxFactor;
+  return {
+    render: cap.render,
+    onColorChange: cap.onColorChange,
+    minFactor,
+    maxFactor,
+    factor: Math.min(maxFactor, Math.max(minFactor, cap.factor ?? LOUPE_DEFAULTS.factor)),
+    diameter: cap.diameter ?? LOUPE_DEFAULTS.diameter,
+    peekKey: cap.peekKey === void 0 ? LOUPE_DEFAULTS.peekKey : cap.peekKey,
+    // A DOM loupe has no framebuffer, so `pixel` would have nothing to enlarge.
+    mode: cap.render ? "vector" : cap.mode ?? LOUPE_DEFAULTS.mode
+  };
+}
+
+export { CanvasLoupe, DomLoupe, LOUPE_DEFAULTS, LoupeBubble, TrialLoupe, drawCanvasLens, lensCamera, lensSourceRect, resolveLoupe, sampleStack, useLoupe };
+//# sourceMappingURL=chunk-E2UQVZ44.js.map
+//# sourceMappingURL=chunk-E2UQVZ44.js.map

package/dist/chunk-E2UQVZ44.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/loupe/canvasLens.ts","../src/loupe/CanvasLoupe.tsx","../src/loupe/DomLoupe.tsx","../src/loupe/LoupeBubble.tsx","../src/loupe/useHostSize.ts","../../loupe/src/geometry.ts","../../loupe/src/model.ts","../src/loupe/useLoupe.ts","../src/loupe/TrialLoupe.tsx","../src/loupe/types.ts"],"names":["jsx","useEffect","useRef"],"mappings":"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","file":"chunk-E2UQVZ44.js","sourcesContent":["import type { LoupePoint } from '@weasel-js/loupe';\nimport { centerOn } from '../canvas/camera';\nimport { screenToWorld } from '../canvas/canvasCoords';\nimport type { CanvasLayerDescriptor } from '../canvas/useLayerScheduler';\nimport { DEFAULT_FRAME, resolveFrame, type WorldFrame, type WorldSpec } from '../canvas/worldSpec';\nimport type { ViewTransform } from '../instrument/types';\n\n/** The camera a round lens of `diameter` shows a magnified region through, and\n *  the coordinate system it is read in — the instrument's own `WorldSpec`,\n *  resolved against the lens rather than the stack. */\nexport interface LensCamera {\n  view: ViewTransform;\n  frame: WorldFrame;\n}\n\n/**\n * What a lens aimed at `aim` renders the stack's layers through.\n *\n * The lens is its own viewport, so the world spec resolves against its box: an\n * instrument centred on its viewport is centred in the lens too.\n */\nexport function lensCamera(\n  aim: LoupePoint,\n  outer: ViewTransform,\n  outerFrame: WorldFrame,\n  factor: number,\n  diameter: number,\n  worldSpec?: WorldSpec,\n): LensCamera {\n  const size = { width: diameter, height: diameter };\n  const frame = resolveFrame(worldSpec, size);\n  const world = screenToWorld(aim, outer, outerFrame);\n  return { view: centerOn(world, outer.zoom * factor, size, frame), frame };\n}\n\n/** A rectangle in a backing store's own device pixels. */\nexport interface SourceRect {\n  sx: number;\n  sy: number;\n  sw: number;\n  sh: number;\n}\n\n/**\n * The region a pixel-mode lens copies out of a presented canvas: the `diameter\n * / factor` CSS px around `aim`, in that canvas' backing-store pixels.\n */\nexport function lensSourceRect(\n  aim: LoupePoint,\n  factor: number,\n  diameter: number,\n  dpr: number,\n): SourceRect {\n  const span = diameter / factor;\n  return {\n    sx: (aim.x - span / 2) * dpr,\n    sy: (aim.y - span / 2) * dpr,\n    sw: span * dpr,\n    sh: span * dpr,\n  };\n}\n\n/**\n * The colour a stack presents at a point: the topmost visible layer with\n * anything opaque there, or `null` when every layer is transparent — which is\n * the honest answer for a point showing nothing but the workspace behind.\n */\nexport function sampleStack(\n  layers: readonly CanvasLayerDescriptor[],\n  canvases: Map<string, HTMLCanvasElement>,\n  p: LoupePoint,\n  dpr: number,\n): string | null {\n  for (let i = layers.length - 1; i >= 0; i--) {\n    const layer = layers[i];\n    if (!layer.visible) continue;\n    const canvas = canvases.get(layer.id);\n    if (!canvas) continue;\n    const ctx = canvas.getContext('2d', { willReadFrequently: true });\n    if (!ctx) continue;\n    const x = Math.floor(p.x * dpr);\n    const y = Math.floor(p.y * dpr);\n    if (x < 0 || y < 0 || x >= canvas.width || y >= canvas.height) continue;\n    const [r, g, b, a] = ctx.getImageData(x, y, 1, 1).data;\n    if (a === 0) continue;\n    return `#${[r, g, b].map((c) => c.toString(16).padStart(2, '0')).join('')}`;\n  }\n  return null;\n}\n\n/** Redraw the stack into a lens' own canvas. `mode` decides whether the layers\n *  are re-run at the lens camera or their presented pixels are enlarged. */\nexport function drawCanvasLens(\n  ctx: CanvasRenderingContext2D,\n  opts: {\n    aim: LoupePoint;\n    factor: number;\n    diameter: number;\n    dpr: number;\n    mode: 'vector' | 'pixel';\n    outer: ViewTransform;\n    outerFrame?: WorldFrame;\n    worldSpec?: WorldSpec;\n    layers: readonly CanvasLayerDescriptor[];\n    canvases: Map<string, HTMLCanvasElement>;\n  },\n): void {\n  const { aim, factor, diameter, dpr, mode, outer, layers, canvases } = opts;\n  ctx.save();\n  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n  ctx.clearRect(0, 0, diameter, diameter);\n\n  if (mode === 'pixel') {\n    const { sx, sy, sw, sh } = lensSourceRect(aim, factor, diameter, dpr);\n    ctx.imageSmoothingEnabled = false;\n    for (const layer of layers) {\n      if (!layer.visible) continue;\n      const canvas = canvases.get(layer.id);\n      if (!canvas || canvas.width === 0 || canvas.height === 0) continue;\n      ctx.drawImage(canvas, sx, sy, sw, sh, 0, 0, diameter, diameter);\n    }\n    ctx.restore();\n    return;\n  }\n\n  const lens = lensCamera(\n    aim,\n    outer,\n    opts.outerFrame ?? DEFAULT_FRAME,\n    factor,\n    diameter,\n    opts.worldSpec,\n  );\n  for (const layer of layers) {\n    if (!layer.visible) continue;\n    ctx.save();\n    layer.render(ctx, lens.view, lens.frame);\n    ctx.restore();\n  }\n  ctx.restore();\n}\n","import { useVisibleRaf } from '@weasel-js/core';\nimport type { LoupeMode, LoupePoint } from '@weasel-js/loupe';\nimport { useEffect, useRef } from 'react';\nimport type { CanvasStackSurface } from '../canvas/CanvasStackContext';\nimport type { WorldFrame, WorldSpec } from '../canvas/worldSpec';\nimport type { ViewTransform } from '../instrument/types';\nimport { drawCanvasLens } from './canvasLens';\n\n/** Props for `<CanvasLoupe>`. */\nexport interface CanvasLoupeProps {\n  aim: LoupePoint;\n  factor: number;\n  mode: LoupeMode;\n  diameter: number;\n  /** The stack being magnified: its layers, its pixels, and its measured box. */\n  surface: CanvasStackSurface;\n  view: ViewTransform;\n  frame: WorldFrame;\n  worldSpec?: WorldSpec;\n}\n\n/**\n * Paints a lens over a `<CanvasStack>` by re-drawing the stack's layers through\n * a zoomed camera — so the magnified content is as sharp as the original, at\n * any factor. `pixel` mode enlarges what the stack presented instead.\n */\nexport function CanvasLoupe({\n  aim,\n  factor,\n  mode,\n  diameter,\n  surface,\n  view,\n  frame,\n  worldSpec,\n}: CanvasLoupeProps) {\n  const canvasRef = useRef<HTMLCanvasElement | null>(null);\n  const dpr = surface.size.dpr;\n\n  // Whatever the stack redraws every frame, the lens has to redraw too — an\n  // instrument that animates from its own loop never re-renders this component.\n  const args = { aim, factor, mode, diameter, dpr, view, frame, worldSpec, surface };\n  const argsRef = useRef(args);\n  argsRef.current = args;\n\n  const loop = useVisibleRaf(\n    () => {\n      loop.request();\n      const canvas = canvasRef.current;\n      const ctx = canvas?.getContext('2d');\n      const canvases = argsRef.current.surface.canvases.current;\n      if (!ctx || !canvases) return;\n      const a = argsRef.current;\n      drawCanvasLens(ctx, {\n        aim: a.aim,\n        factor: a.factor,\n        diameter: a.diameter,\n        dpr: a.dpr,\n        mode: a.mode,\n        outer: a.view,\n        outerFrame: a.frame,\n        worldSpec: a.worldSpec,\n        layers: a.surface.layers,\n        canvases,\n      });\n    },\n    { target: canvasRef },\n  );\n\n  useEffect(() => {\n    loop.request();\n    return () => loop.cancel();\n  }, [loop]);\n\n  return (\n    <canvas\n      ref={canvasRef}\n      className=\"lk-loupe__canvas\"\n      width={Math.max(1, Math.round(diameter * dpr))}\n      height={Math.max(1, Math.round(diameter * dpr))}\n    />\n  );\n}\n","import type { LoupeMode, LoupePoint } from '@weasel-js/loupe';\nimport type { CSSProperties } from 'react';\nimport { zoomAt } from '../canvas/camera';\nimport type { ViewportSize, WorldFrame } from '../canvas/worldSpec';\nimport type { ViewTransform } from '../instrument/types';\nimport type { LoupeRenderArgs } from './types';\n\n/** Props for `<DomLoupe>`. */\nexport interface DomLoupeProps {\n  aim: LoupePoint;\n  factor: number;\n  mode: LoupeMode;\n  diameter: number;\n  /** The host the instrument draws into, which the stage reproduces. */\n  size: ViewportSize;\n  /** The trial's own camera. */\n  view: ViewTransform;\n  frame?: WorldFrame;\n  state: unknown;\n  config: unknown;\n  render: (args: LoupeRenderArgs) => React.ReactNode;\n}\n\n/**\n * Paints a lens over DOM content by asking the instrument to draw itself again\n * at a magnified camera.\n *\n * The stage is a full copy of the host, so the instrument's own layout still\n * holds; the camera is composed about the aimed point, which keeps that point\n * where it already was, and the stage is then slid by `diameter / 2 - aim` to\n * bring it to the middle of the lens.\n */\nexport function DomLoupe({\n  aim,\n  factor,\n  mode,\n  diameter,\n  size,\n  view,\n  frame,\n  state,\n  config,\n  render,\n}: DomLoupeProps) {\n  const style: CSSProperties = {\n    width: `${size.width}px`,\n    height: `${size.height}px`,\n    transform: `translate(${diameter / 2 - aim.x}px, ${diameter / 2 - aim.y}px)`,\n  };\n  return (\n    <div className=\"lk-loupe__stage\" style={style}>\n      {render({\n        state,\n        config,\n        view: zoomAt(view, factor, aim, { frame }),\n        factor,\n        mode,\n        size,\n      })}\n    </div>\n  );\n}\n","import type { LoupePoint } from '@weasel-js/loupe';\nimport type { CSSProperties, ReactNode, RefObject } from 'react';\n\n/** Props for `<LoupeBubble>`. */\nexport interface LoupeBubbleProps {\n  /** Where the lens is aimed, in its container's own pixels. */\n  aim: LoupePoint;\n  diameter: number;\n  hostRef?: RefObject<HTMLDivElement | null>;\n  children: ReactNode;\n}\n\n/**\n * The lens itself: a circle centred on the aimed point, clipping whatever a\n * painter draws into it.\n *\n * It takes no pointer events, so the pan, the wheel and anything underneath\n * keep working while it is up — and it is `aria-hidden`, since it magnifies\n * content already on the page rather than adding any.\n */\nexport function LoupeBubble({ aim, diameter, hostRef, children }: LoupeBubbleProps) {\n  const style: CSSProperties = {\n    width: `${diameter}px`,\n    height: `${diameter}px`,\n    transform: `translate(${aim.x - diameter / 2}px, ${aim.y - diameter / 2}px)`,\n  };\n  return (\n    <div ref={hostRef} className=\"lk-loupe\" style={style} aria-hidden=\"true\">\n      {children}\n    </div>\n  );\n}\n","import { type RefObject, useEffect, useState } from 'react';\nimport type { ViewportSize } from '../canvas/worldSpec';\n\nconst ZERO: ViewportSize = { width: 0, height: 0 };\n\n/** An element's CSS-pixel box, kept current. `{0, 0}` until it is measured, and\n *  wherever `ResizeObserver` is absent. */\nexport function useHostSize(ref: RefObject<HTMLElement | null>): ViewportSize {\n  const [size, setSize] = useState<ViewportSize>(ZERO);\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    const update = (): void => {\n      const rect = el.getBoundingClientRect();\n      setSize((prev) =>\n        prev.width === rect.width && prev.height === rect.height\n          ? prev\n          : { width: rect.width, height: rect.height },\n      );\n    };\n    update();\n    if (typeof ResizeObserver === 'undefined') return;\n    const ro = new ResizeObserver(update);\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, [ref]);\n\n  return size;\n}\n","import type { View } from '@weasel-js/core';\n\n/** A point on the magnified surface, in its own CSS pixels. */\nexport interface LoupePoint {\n  x: number;\n  y: number;\n}\n\n/** The lens' rectangle on that surface. */\nexport interface LoupeRect extends LoupePoint {\n  w: number;\n  h: number;\n}\n\n/**\n * The inner `View` a loupe renders its content through: the outer view's\n * magnification times `factor`, positioned so `target` sits at the center of\n * a viewport the size of `rect`.\n */\nexport function loupeInnerView(\n  target: LoupePoint,\n  outer: View,\n  rect: LoupeRect,\n  factor: number,\n): View {\n  const scale = { x: outer.scale.x * factor, y: outer.scale.y * factor };\n  return {\n    x: target.x - rect.w / 2 / scale.x,\n    y: target.y - rect.h / 2 / scale.y,\n    scale,\n  };\n}\n\n/**\n * Where on the outer surface a point inside the lens is looking, in\n * screen-space CSS px.\n *\n * The inverse of {@link loupeInnerView}: the lens centers `aim` in `rect` and\n * magnifies by `factor`, and the outer view's own scale cancels out of the\n * round trip — so this needs no `View`.\n */\nexport function loupeSourcePoint(\n  p: LoupePoint,\n  rect: LoupeRect,\n  aim: LoupePoint,\n  factor: number,\n): LoupePoint {\n  return {\n    x: aim.x + (p.x - (rect.x + rect.w / 2)) / factor,\n    y: aim.y + (p.y - (rect.y + rect.h / 2)) / factor,\n  };\n}\n","import { type LoupePoint, type LoupeRect, loupeSourcePoint } from './geometry';\n\n/** How a loupe magnifies. `'vector'` re-renders the source through a zoomed-in\n *  view, so content stays sharp at any factor; `'pixel'` blows up the actual\n *  pixels the surface presented. */\nexport type LoupeMode = 'vector' | 'pixel';\n\n/**\n * What a loupe needs from the surface it magnifies. A painter implements it,\n * and the model asks nothing about how the lens is drawn — only where it is,\n * what colour is under a point, and whether anyone can still see it.\n */\nexport interface LoupeSurface {\n  /** The lens' rectangle, or `null` while it has none. */\n  lens(): LoupeRect | null;\n  /**\n   * Does the lens itself cover this point? A stationary lens does over its own\n   * frame, which is what the freeze rule below is for; a lens that follows the\n   * pointer never covers it and answers `false`.\n   */\n  covers(p: LoupePoint): boolean;\n  /** Hex colour at a surface point, or `null` when the surface cannot say. */\n  sample(p: LoupePoint): string | null;\n  /** Is the lens off screen? Aims are ignored while it is. */\n  hidden(): boolean;\n  /** Is the lens gone for good? The model tears itself down when it is. */\n  gone(): boolean;\n  /** Something the painter must redraw for has changed. */\n  changed(): void;\n}\n\n/** Options for {@link createLoupeModel}. */\nexport interface LoupeModelOptions {\n  surface: LoupeSurface;\n  mode?: LoupeMode;\n  /** Magnification. Default 8. */\n  factor?: number;\n  /** Bounds `setFactor` clamps to. Unset means unclamped. */\n  minFactor?: number;\n  maxFactor?: number;\n  /** Called with the hex colour under the aim point whenever it changes. */\n  onColorChange?: (hex: string) => void;\n  /** Called when a pick lands — an eyedropper on the magnified surface. Where\n   *  the colour goes is the consumer's business. */\n  onPick?: (hex: string) => void;\n  /** Called when the model tears itself down because the surface reported the\n   *  lens gone, so the painter can drop what it was holding. */\n  onDispose?: () => void;\n}\n\n/** Where a loupe is aimed, how far it magnifies, and what colour it is over. */\nexport interface LoupeModel {\n  readonly mode: LoupeMode;\n  readonly factor: number;\n  /** Last aimed point, in the surface's CSS px. */\n  readonly aim: LoupePoint;\n  /** Hex colour under the aim point. `null` until something answers. */\n  readonly color: string | null;\n  setMode(mode: LoupeMode): void;\n  setFactor(factor: number): void;\n  /** Aim at a surface point. Ignored while the lens covers it, is hidden, or\n   *  the model is disposed. */\n  aimAt(p: LoupePoint): void;\n  /** Sample what the lens shows at `p`, a point inside it, and report that to\n   *  `onPick`. Omit `p` to pick at the aim point. Leaves the aim, and `color`,\n   *  alone. */\n  pick(p?: LoupePoint): string | null;\n  dispose(): void;\n}\n\n/**\n * Build the loupe's model over a surface. It holds the state a magnifier has —\n * aim, factor, mode, colour — and none of the drawing.\n */\nexport function createLoupeModel(opts: LoupeModelOptions): LoupeModel {\n  const { surface } = opts;\n  let mode: LoupeMode = opts.mode ?? 'vector';\n  let factor = opts.factor ?? 8;\n  let aim: LoupePoint = { x: 0, y: 0 };\n  let color: string | null = null;\n  let disposed = false;\n\n  const clamp = (n: number): number =>\n    Math.min(opts.maxFactor ?? Number.POSITIVE_INFINITY,\n             Math.max(opts.minFactor ?? Number.NEGATIVE_INFINITY, n));\n\n  const teardown = () => {\n    if (disposed) return;\n    disposed = true;\n    opts.onDispose?.();\n  };\n\n  const sampleColor = () => {\n    const hex = surface.sample(aim);\n    if (hex === null || hex === color) return;\n    color = hex;\n    opts.onColorChange?.(hex);\n  };\n\n  return {\n    get mode() { return mode; },\n    get factor() { return factor; },\n    get aim() { return aim; },\n    get color() { return color; },\n\n    setMode(next) {\n      if (disposed || next === mode) return;\n      mode = next;\n      surface.changed();\n    },\n\n    setFactor(next) {\n      if (disposed) return;\n      factor = clamp(next);\n      surface.changed();\n    },\n\n    aimAt(p) {\n      if (disposed) return;\n      // A lens can be taken away by whatever owns it, without coming back\n      // through `dispose`. Follow it down rather than keep sampling for a\n      // magnifier nobody can see.\n      if (surface.gone()) { teardown(); return; }\n      if (surface.hidden()) return;\n      if (surface.covers(p)) return;\n      aim = p;\n      sampleColor();\n      surface.changed();\n    },\n\n    pick(p) {\n      if (disposed) return null;\n      let at = aim;\n      if (p) {\n        const rect = surface.lens();\n        if (!rect) return null;\n        at = loupeSourcePoint(p, rect, aim, factor);\n        // The lens is part of the picture the surface presents. A point near\n        // its frame maps back underneath it, and sampling there reports the\n        // lens' own chrome as artwork.\n        if (surface.covers(at)) return null;\n      }\n      const hex = surface.sample(at);\n      if (hex !== null) opts.onPick?.(hex);\n      return hex;\n    },\n\n    dispose: teardown,\n  };\n}\n","import {\n  createLoupeModel,\n  type LoupeMode,\n  type LoupeModel,\n  type LoupePoint,\n} from '@weasel-js/loupe';\nimport { type RefObject, useCallback, useEffect, useReducer, useRef } from 'react';\nimport type { ResolvedLoupe } from './types';\n\n/** Options for {@link useLoupe}. */\nexport interface UseLoupeOptions {\n  capability: ResolvedLoupe;\n  /** The element the lens tracks the pointer across. */\n  hostRef: RefObject<HTMLElement | null>;\n  /** Whether the loupe is turned on. Hold-to-peek shows it regardless. */\n  enabled: boolean;\n  /** Hex colour at a host point. Omitted, the loupe reports no colour — which\n   *  is the honest answer for a surface with no pixels to read. */\n  sample?: (p: LoupePoint) => string | null;\n}\n\n/** A loupe as a React view reads it. */\nexport interface LoupeState {\n  /** Whether the lens should be drawn. */\n  visible: boolean;\n  /** Where it is aimed, in the host's own pixels. */\n  aim: LoupePoint;\n  factor: number;\n  mode: LoupeMode;\n  color: string | null;\n  setMode: (mode: LoupeMode) => void;\n  setFactor: (factor: number) => void;\n  /** Sample what the lens shows at a point inside it. */\n  pick: (p?: LoupePoint) => string | null;\n}\n\n/** How fast the wheel walks the magnification. Gentler than the pan-zoom\n *  wheel: the lens' whole range is one order of magnitude. */\nconst WHEEL_RATE = 0.002;\n\n/**\n * Binds `@weasel-js/loupe`'s model to a host element and drives it from the\n * pointer, the peek key and the wheel.\n *\n * These are plain listeners rather than gesture bindings because labkit trials\n * do not route input through the dispatcher — see the loupe entry under\n * \"Selection, actions & UI panels\" in `docs/TODO.md`. They are all in this one\n * hook so that when trial input does go through it, this is the only file to\n * rewrite.\n */\nexport function useLoupe({ capability, hostRef, enabled, sample }: UseLoupeOptions): LoupeState {\n  const [, bump] = useReducer((n: number) => n + 1, 0);\n\n  const overRef = useRef(false);\n  const peekingRef = useRef(false);\n  const enabledRef = useRef(enabled);\n  enabledRef.current = enabled;\n  const sampleRef = useRef(sample);\n  sampleRef.current = sample;\n  const onColorChangeRef = useRef(capability.onColorChange);\n  onColorChangeRef.current = capability.onColorChange;\n\n  // Reads nothing but refs, so it is stable and an effect may depend on it.\n  const shown = useCallback(\n    (): boolean => overRef.current && (enabledRef.current || peekingRef.current),\n    [],\n  );\n\n  const modelRef = useRef<LoupeModel | null>(null);\n  if (modelRef.current === null) {\n    modelRef.current = createLoupeModel({\n      mode: capability.mode,\n      factor: capability.factor,\n      minFactor: capability.minFactor,\n      maxFactor: capability.maxFactor,\n      onColorChange: (hex) => onColorChangeRef.current?.(hex),\n      surface: {\n        lens: () => {\n          const d = diameterRef.current;\n          const { x, y } = modelRef.current?.aim ?? { x: 0, y: 0 };\n          return { x: x - d / 2, y: y - d / 2, w: d, h: d };\n        },\n        // The lens follows the pointer and is painted over the host rather than\n        // into it, so it is never part of the picture being magnified.\n        covers: () => false,\n        sample: (p) => sampleRef.current?.(p) ?? null,\n        hidden: () => !shown(),\n        gone: () => goneRef.current,\n        changed: bump,\n      },\n    });\n  }\n  const model = modelRef.current;\n\n  const diameterRef = useRef(capability.diameter);\n  diameterRef.current = capability.diameter;\n  const goneRef = useRef(false);\n\n  // The model holds no resources, and `dispose` is one-way — so unmounting only\n  // reports the lens gone. Disposing here instead leaves React's mount / unmount\n  // / remount in StrictMode with a permanently dead model that silently ignores\n  // every aim.\n  useEffect(() => {\n    goneRef.current = false;\n    return () => {\n      goneRef.current = true;\n    };\n  }, []);\n\n  // Turning the loupe off with the pointer still inside must put the lens away,\n  // and the model only reconsiders on an aim.\n  useEffect(() => {\n    if (!enabled && !peekingRef.current) bump();\n  }, [enabled]);\n\n  useEffect(() => {\n    const host = hostRef.current;\n    if (!host) return;\n\n    const onPointerMove = (e: PointerEvent): void => {\n      overRef.current = true;\n      const rect = host.getBoundingClientRect();\n      model.aimAt({ x: e.clientX - rect.left, y: e.clientY - rect.top });\n      if (!shown()) return;\n      bump();\n    };\n    const onPointerLeave = (): void => {\n      overRef.current = false;\n      bump();\n    };\n    const onWheel = (e: WheelEvent): void => {\n      if (!shown()) return;\n      // Ahead of the stack's own pan-zoom, which is a React handler on this same\n      // element: capture runs first, and stopping propagation keeps the event\n      // from reaching React's root listener at all.\n      e.preventDefault();\n      e.stopPropagation();\n      model.setFactor(model.factor * Math.exp(-e.deltaY * WHEEL_RATE));\n    };\n\n    host.addEventListener('pointermove', onPointerMove);\n    host.addEventListener('pointerleave', onPointerLeave);\n    host.addEventListener('wheel', onWheel, { capture: true, passive: false });\n    return () => {\n      host.removeEventListener('pointermove', onPointerMove);\n      host.removeEventListener('pointerleave', onPointerLeave);\n      host.removeEventListener('wheel', onWheel, { capture: true });\n    };\n  }, [hostRef, model, shown]);\n\n  const peekKey = capability.peekKey;\n  useEffect(() => {\n    if (peekKey == null) return;\n    const setPeeking = (next: boolean): void => {\n      if (peekingRef.current === next) return;\n      peekingRef.current = next;\n      bump();\n    };\n    const onKeyDown = (e: KeyboardEvent): void => {\n      if (e.key === peekKey) setPeeking(true);\n    };\n    const onKeyUp = (e: KeyboardEvent): void => {\n      if (e.key === peekKey) setPeeking(false);\n    };\n    // A key held while the window loses focus never sends its keyup, so the\n    // peek would stay on until the key was pressed and released again.\n    const onBlur = (): void => setPeeking(false);\n\n    window.addEventListener('keydown', onKeyDown);\n    window.addEventListener('keyup', onKeyUp);\n    window.addEventListener('blur', onBlur);\n    return () => {\n      window.removeEventListener('keydown', onKeyDown);\n      window.removeEventListener('keyup', onKeyUp);\n      window.removeEventListener('blur', onBlur);\n    };\n  }, [peekKey]);\n\n  return {\n    visible: shown(),\n    aim: model.aim,\n    factor: model.factor,\n    mode: model.mode,\n    color: model.color,\n    setMode: model.setMode,\n    setFactor: model.setFactor,\n    pick: model.pick,\n  };\n}\n","import { type RefObject, useContext, useMemo } from 'react';\nimport { CanvasStackContext } from '../canvas/CanvasStackContext';\nimport type { WorldSpec } from '../canvas/worldSpec';\nimport type { ViewTransform } from '../instrument/types';\nimport { CanvasLoupe } from './CanvasLoupe';\nimport { sampleStack } from './canvasLens';\nimport { DomLoupe } from './DomLoupe';\nimport { LoupeBubble } from './LoupeBubble';\nimport type { ResolvedLoupe } from './types';\nimport { useHostSize } from './useHostSize';\nimport { useLoupe } from './useLoupe';\n\n/** Props for `<TrialLoupe>`. */\nexport interface TrialLoupeProps {\n  capability: ResolvedLoupe;\n  /** Whether the trial's loupe is turned on. Hold-to-peek shows it anyway. */\n  enabled: boolean;\n  state: unknown;\n  config: unknown;\n  /** The trial's own camera. */\n  view: ViewTransform;\n  worldSpec?: WorldSpec;\n  /** The element the lens tracks. A loupe mounted inside a `<CanvasStack>`\n   *  takes the stack's own element instead, and this goes unused. */\n  hostRef?: RefObject<HTMLElement | null>;\n}\n\n/** Stable stand-in, so a loupe with nothing to track does not re-bind its\n *  listeners on every render. */\nconst NO_HOST: RefObject<HTMLElement | null> = { current: null };\n\n/**\n * A trial's loupe, painted by whichever painter suits its content: the canvas\n * stack it is mounted inside, or the instrument's own `render` at a magnified\n * camera.\n */\nexport function TrialLoupe({\n  capability,\n  enabled,\n  state,\n  config,\n  view,\n  worldSpec,\n  hostRef,\n}: TrialLoupeProps) {\n  const stack = useContext(CanvasStackContext);\n  const surface = capability.render ? undefined : stack?.surface;\n  const host = surface?.element ?? hostRef ?? NO_HOST;\n\n  const sample = useMemo(() => {\n    if (!surface) return undefined;\n    return (p: { x: number; y: number }): string | null => {\n      const canvases = surface.canvases.current;\n      return canvases ? sampleStack(surface.layers, canvases, p, surface.size.dpr) : null;\n    };\n  }, [surface]);\n\n  const loupe = useLoupe({ capability, hostRef: host, enabled, sample });\n  const measured = useHostSize(host);\n  const size = surface?.size ?? measured;\n\n  if (!loupe.visible) return null;\n\n  return (\n    <LoupeBubble aim={loupe.aim} diameter={capability.diameter}>\n      {capability.render ? (\n        <DomLoupe\n          aim={loupe.aim}\n          factor={loupe.factor}\n          mode={loupe.mode}\n          diameter={capability.diameter}\n          size={size}\n          view={view}\n          frame={stack?.frame}\n          state={state}\n          config={config}\n          render={capability.render}\n        />\n      ) : surface && stack ? (\n        <CanvasLoupe\n          aim={loupe.aim}\n          factor={loupe.factor}\n          mode={loupe.mode}\n          diameter={capability.diameter}\n          surface={surface}\n          view={stack.view}\n          frame={stack.frame}\n          worldSpec={worldSpec}\n        />\n      ) : null}\n    </LoupeBubble>\n  );\n}\n","import type { LoupeMode } from '@weasel-js/loupe';\nimport type { ReactNode } from 'react';\nimport type { ViewportSize } from '../canvas/worldSpec';\nimport type { ViewTransform } from '../instrument/types';\n\n/** What a DOM instrument's loupe `render` is handed: the same data its own\n *  `render` gets, and the camera to draw it through. */\nexport interface LoupeRenderArgs<TS = unknown, TC = unknown> {\n  state: TS;\n  config: TC;\n  /** The trial's own camera composed with the magnification, about the aimed\n   *  point — so drawing the same content through it magnifies in place. */\n  view: ViewTransform;\n  /** The magnification on its own, for whatever must not scale with the\n   *  camera. */\n  factor: number;\n  mode: LoupeMode;\n  /** The size of the viewport `view` is written for: the trial's content well,\n   *  not the lens. The lens shows a circle cut out of it. */\n  size: ViewportSize;\n}\n\n/**\n * Declares that an instrument can be magnified.\n *\n * With no `render`, the loupe re-draws the instrument's canvas layers through a\n * zoomed camera, so it stays sharp at any factor. An instrument whose content is\n * DOM supplies `render` instead: given a camera, draw me again.\n */\nexport interface LoupeCapability<TS = unknown, TC = unknown> {\n  render?: (args: LoupeRenderArgs<TS, TC>) => ReactNode;\n  /** Opening magnification, clamped to the bounds below. Default 6. */\n  factor?: number;\n  /** What the wheel clamps to. Defaults 2 and 32. */\n  minFactor?: number;\n  maxFactor?: number;\n  /** `'vector'` (default) re-renders the content magnified; `'pixel'` blows up\n   *  the pixels the instrument presented. A `render` loupe is always vector —\n   *  DOM has no framebuffer to enlarge. */\n  mode?: LoupeMode;\n  /** Lens diameter in CSS px. Default 200. */\n  diameter?: number;\n  /** Held for a momentary peek while the loupe is off. Default `'Alt'`; `null`\n   *  turns hold-to-peek off. Matched against `KeyboardEvent.key`. */\n  peekKey?: string | null;\n  /** Called with the colour under the aim, wherever the surface can say. The\n   *  canvas painter reads it back; a DOM loupe has no pixels to sample. */\n  onColorChange?: (hex: string) => void;\n}\n\n/** An instrument's loupe declaration. `true` takes every default. */\nexport type LoupeDeclaration<TS = unknown, TC = unknown> = true | LoupeCapability<TS, TC>;\n\n/** A {@link LoupeCapability} with every default filled in. */\nexport interface ResolvedLoupe<TS = unknown, TC = unknown> {\n  render?: (args: LoupeRenderArgs<TS, TC>) => ReactNode;\n  onColorChange?: (hex: string) => void;\n  factor: number;\n  minFactor: number;\n  maxFactor: number;\n  mode: LoupeMode;\n  diameter: number;\n  peekKey: string | null;\n}\n\nexport const LOUPE_DEFAULTS = {\n  factor: 6,\n  minFactor: 2,\n  maxFactor: 32,\n  mode: 'vector',\n  diameter: 200,\n  peekKey: 'Alt',\n} as const satisfies Omit<ResolvedLoupe, 'render' | 'onColorChange'>;\n\nexport function resolveLoupe<TS, TC>(declared: LoupeDeclaration<TS, TC>): ResolvedLoupe<TS, TC> {\n  const cap = declared === true ? {} : declared;\n  const minFactor = cap.minFactor ?? LOUPE_DEFAULTS.minFactor;\n  const maxFactor = cap.maxFactor ?? LOUPE_DEFAULTS.maxFactor;\n  return {\n    render: cap.render,\n    onColorChange: cap.onColorChange,\n    minFactor,\n    maxFactor,\n    factor: Math.min(maxFactor, Math.max(minFactor, cap.factor ?? LOUPE_DEFAULTS.factor)),\n    diameter: cap.diameter ?? LOUPE_DEFAULTS.diameter,\n    peekKey: cap.peekKey === undefined ? LOUPE_DEFAULTS.peekKey : cap.peekKey,\n    // A DOM loupe has no framebuffer, so `pixel` would have nothing to enlarge.\n    mode: cap.render ? 'vector' : (cap.mode ?? LOUPE_DEFAULTS.mode),\n  };\n}\n"]}

package/dist/{chunk-LGKRIUSW.js → chunk-ESIQNQ6K.js}

@@ -1,4 +1,4 @@
-import { useVisibleRaf } from './chunk-QCICIHEO.js';
+import { useVisibleRaf } from './chunk-L5QJOOLV.js';
 import { createContext, useContext, useCallback, useRef, useEffect } from 'react';
 
 // src/surface/composeRects.ts
@@ -31,6 +31,10 @@ function toDeviceRect(rect, surfaceHeight, dpr) {
   };
 }
 var SurfaceContext = createContext(null);
+var SurfaceCanvasContext = createContext(null);
+function useSurfaceCanvas() {
+  return useContext(SurfaceCanvasContext);
+}
 function useSurfaceOptional() {
   return useContext(SurfaceContext);
 }
@@ -53,6 +57,7 @@ function useTiledSurface({ onFrame }) {
   const tiles = useRef(/* @__PURE__ */ new Map());
   const rects = useRef(/* @__PURE__ */ new Map());
   const dirty = useRef(/* @__PURE__ */ new Set());
+  const painters = useRef(/* @__PURE__ */ new Map());
   const needsMeasure = useRef(true);
   const observer = useRef(null);
   const lastDpr = useRef(0);
@@ -89,12 +94,17 @@ function useTiledSurface({ onFrame }) {
       }
       if (dirty.current.size === 0) return;
       const box = el.getBoundingClientRect();
-      onFrameRef.current({
+      const frame = {
         dirty: new Set(dirty.current),
         rects: new Map(rects.current),
         dpr,
         size: { width: box.width, height: box.height }
-      });
+      };
+      onFrameRef.current(frame);
+      for (const id of frame.dirty) {
+        const rect = frame.rects.get(id);
+        if (rect) painters.current.get(id)?.(rect, frame);
+      }
       dirty.current.clear();
     },
     // The host attaches its container through `containerRef`, which may land
@@ -137,6 +147,13 @@ function useTiledSurface({ onFrame }) {
     },
     [schedule]
   );
+  const registerPainter = useCallback((id, paint) => {
+    painters.current.set(id, paint);
+    return () => {
+      if (painters.current.get(id) === paint) painters.current.delete(id);
+    };
+  }, []);
+  const getContainer = useCallback(() => container.current, []);
   const containerRef = useCallback(
     (el) => {
       if (container.current === el) return;
@@ -162,9 +179,17 @@ function useTiledSurface({ onFrame }) {
       frameLoop.cancel();
     };
   }, [schedule, frameLoop]);
-  return { invalidate, invalidateAll, invalidateRects, registerTile, containerRef };
+  return {
+    invalidate,
+    invalidateAll,
+    invalidateRects,
+    registerTile,
+    registerPainter,
+    containerRef,
+    getContainer
+  };
 }
 
-export { SurfaceContext, composeRects, rectsEqual, toDeviceRect, useSurface, useSurfaceOptional, useSurfaceTile, useTiledSurface };
-//# sourceMappingURL=chunk-LGKRIUSW.js.map
-//# sourceMappingURL=chunk-LGKRIUSW.js.map
+export { SurfaceCanvasContext, SurfaceContext, composeRects, rectsEqual, toDeviceRect, useSurface, useSurfaceCanvas, useSurfaceOptional, useSurfaceTile, useTiledSurface };
+//# sourceMappingURL=chunk-ESIQNQ6K.js.map
+//# sourceMappingURL=chunk-ESIQNQ6K.js.map