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

package/dist/canvas/index.d.ts

@@ -1,50 +1,68 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as react from 'react';
 import { ReactNode } from 'react';
-import { V as ViewTransform, g as Point } from '../_dts/index-DgcNdEdh.js';
-import '../_dts/types-AHlQxBNN.js';
-import '../_dts/PrefsForm-BYa6cWnO.js';
-import '../_dts/types-1Sdxy_Pv.js';
+import { V as ViewTransform, c as WorldSpec, a2 as ViewportSize, a as Point, W as WorldFrame } from '../_dts/frac-Cp3NivlC.js';
+export { x as DEFAULT_FRAME, a4 as applyCamera, aa as resolveFrame } from '../_dts/frac-Cp3NivlC.js';
+import { C as CanvasLayerDescriptor } from '../_dts/CanvasStackContext-DtAn_3O-.js';
+export { a as CanvasStackContext, b as CanvasStackContextValue, c as CanvasStackSurface } from '../_dts/CanvasStackContext-DtAn_3O-.js';
+import '../_dts/types-D6s4b7if.js';
+import '../_dts/PrefsForm-BkUJZx0A.js';
+import '../_dts/types-DYMaEvM5.js';
 import '../_dts/types-DJ79Tg5J.js';
-
-/** One layer of a canvas stack: its id, whether it is currently shown, and how
- *  it paints itself. */
-interface CanvasLayerDescriptor {
-    id: string;
-    visible: boolean;
-    render: (ctx: CanvasRenderingContext2D, view: ViewTransform) => void;
-}
+import '../_dts/types-C-gh9Ap-.js';
 
 /** Props for `<CanvasStack>`. */
 interface CanvasStackProps {
     layers: CanvasLayerDescriptor[];
     view: ViewTransform;
     onViewChange: (v: ViewTransform) => void;
+    /** The instrument's coordinate system. Omitted, world (0,0) sits at the
+     *  element's top-left with y running down. */
+    worldSpec?: WorldSpec;
     minZoom?: number;
     maxZoom?: number;
     width?: number | string;
     height?: number | string;
     className?: string;
+    /** Fired whenever the stack is measured, so a consumer can place a view that
+     *  only makes sense in terms of the viewport. */
+    onResize?: (size: ViewportSize) => void;
     onHitTest?: (worldPos: Point) => void;
     children?: ReactNode;
 }
 /** Stacks one `<canvas>` per layer and drives them from a shared view, so a
  *  layer that changes rarely is not redrawn with one that changes every frame.
  *  Handles sizing, device pixel ratio, and pan/zoom. */
-declare function CanvasStack({ layers, view, onViewChange, minZoom, maxZoom, width, height, className, onHitTest, children, }: CanvasStackProps): react_jsx_runtime.JSX.Element;
+declare function CanvasStack({ layers, view, onViewChange, worldSpec, minZoom, maxZoom, width, height, className, onResize, onHitTest, children, }: CanvasStackProps): react_jsx_runtime.JSX.Element;
 
-/** What a canvas stack publishes to its children — currently the view, so
- *  DOM overlays can position themselves in the same coordinates. */
-interface CanvasStackContextValue {
-    view: ViewTransform;
+/** Bounds and coordinate system a {@link zoomAt} works in. */
+interface ZoomAtOptions {
+    /** The instrument's coordinate system, resolved against the viewport.
+     *  Omitted, `at` is measured from the element's top-left. */
+    frame?: WorldFrame;
+    min?: number;
+    max?: number;
 }
-/** Context carrying the surrounding canvas stack's view. */
-declare const CanvasStackContext: react.Context<CanvasStackContextValue | null>;
+/**
+ * Zoom a view by `factor` about a fixed point, so whatever world coordinate
+ * `at` was over stays under it.
+ *
+ * `at` is in the element's own pixels — a cursor position, or the centre of a
+ * lens. The clamp is applied before the pan is solved, so a zoom that hits a
+ * bound still anchors on the zoom it actually reached.
+ */
+declare function zoomAt(view: ViewTransform, factor: number, at: Point, { frame, min, max }?: ZoomAtOptions): ViewTransform;
+/** The view that puts a world point at the centre of a `size` viewport, at
+ *  `zoom`. What a lens showing a region around one point renders through. */
+declare function centerOn(world: Point, zoom: number, size: ViewportSize, frame?: WorldFrame): ViewTransform;
 
-/** Project a world point into screen coordinates under a view. */
-declare function worldToScreen(world: Point, view: ViewTransform): Point;
+/** Project a world point into screen coordinates under a view.
+ *
+ *  `frame` is the instrument's declared coordinate system, resolved against the
+ *  viewport; omitting it gives labkit's original one — origin at the top-left,
+ *  y downward. */
+declare function worldToScreen(world: Point, view: ViewTransform, frame?: WorldFrame): Point;
 /** Unproject a screen point back to world coordinates under a view. */
-declare function screenToWorld(screen: Point, view: ViewTransform): Point;
+declare function screenToWorld(screen: Point, view: ViewTransform, frame?: WorldFrame): Point;
 
-export { CanvasStack, CanvasStackContext, screenToWorld, worldToScreen };
-export type { CanvasLayerDescriptor, CanvasStackContextValue, CanvasStackProps };
+export { CanvasLayerDescriptor, CanvasStack, ViewportSize, WorldFrame, WorldSpec, centerOn, screenToWorld, worldToScreen, zoomAt };
+export type { CanvasStackProps, ZoomAtOptions };

package/dist/canvas/index.js

@@ -1,5 +1,7 @@
-export { CanvasStack, screenToWorld, worldToScreen } from '../chunk-NS54R52R.js';
-export { CanvasStackContext } from '../chunk-CPUJ3QXL.js';
-import '../chunk-Z6HJ5FEM.js';
+export { CanvasStack } from '../chunk-3ZELRRBV.js';
+export { centerOn, zoomAt } from '../chunk-CTRKTLYZ.js';
+export { DEFAULT_FRAME, applyCamera, resolveFrame, screenToWorld, worldToScreen } from '../chunk-2AYGEN57.js';
+export { CanvasStackContext } from '../chunk-CQLQPQ4P.js';
+import '../chunk-ROQDRXKW.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/chrome/index.d.ts

@@ -1,11 +1,12 @@
-import { a as ControlRenderer } from '../_dts/types-AHlQxBNN.js';
-import { I as Instrument, m as TrialChromeContext, T as TrialContribution } from '../_dts/index-DgcNdEdh.js';
-export { e as IconComponent, S as SidebarSection, h as StatusReadout, k as ToolItem, l as ToolbarItem, n as TrialRegion, o as ViewportControl } from '../_dts/index-DgcNdEdh.js';
+import { c as ControlRenderer } from '../_dts/types-D6s4b7if.js';
+import { I as Instrument, _ as TrialChromeContext, m as TrialContribution } from '../_dts/frac-Cp3NivlC.js';
+export { z as IconComponent, O as SidebarSection, Q as StatusReadout, Y as ToolItem, Z as ToolbarItem, $ as TrialRegion, a1 as ViewportControl } from '../_dts/frac-Cp3NivlC.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import '../_dts/PrefsForm-BYa6cWnO.js';
+import '../_dts/PrefsForm-BkUJZx0A.js';
 import 'react';
-import '../_dts/types-1Sdxy_Pv.js';
+import '../_dts/types-DYMaEvM5.js';
 import '../_dts/types-DJ79Tg5J.js';
+import '../_dts/types-C-gh9Ap-.js';
 
 /**
  * The contributions a trial gets from what its instrument declared. This is
@@ -44,7 +45,9 @@ interface SidebarRegionProps {
     contributions: readonly TrialContribution[];
     ctx: TrialChromeContext;
 }
-/** Lays a trial's `sidebar` contributions out as titled, collapsible sections. */
+/** Lays a trial's `sidebar` contributions out as titled, collapsible sections.
+ *  A section the trial has torn out is not rendered here — `Trial` portals its
+ *  body into the workspace instead. */
 declare function SidebarRegion({ contributions, ctx }: SidebarRegionProps): react_jsx_runtime.JSX.Element | null;
 
 /** Props for `<StatusRegion>`. */

package/dist/chrome/index.js

@@ -1,8 +1,9 @@
-export { PaletteRegion, SidebarRegion, StatusRegion, TitleBarRegion, ToolbarRegion, ViewportRegion, builtinContributions, mergeContributions, suppressContributions } from '../chunk-PO6L3NSH.js';
-import '../chunk-O7NVSCLN.js';
-import '../chunk-ZZAYVX4X.js';
-import '../chunk-TLGRYALP.js';
-import '../chunk-CPUJ3QXL.js';
-import '../chunk-Z6HJ5FEM.js';
+export { PaletteRegion, SidebarRegion, StatusRegion, TitleBarRegion, ToolbarRegion, ViewportRegion, builtinContributions, mergeContributions, suppressContributions } from '../chunk-LITE5YFB.js';
+import '../chunk-6JMU56CU.js';
+import '../chunk-YQJNT4XQ.js';
+import '../chunk-SBXNQW4G.js';
+import '../chunk-HEORBLVT.js';
+import '../chunk-CQLQPQ4P.js';
+import '../chunk-ROQDRXKW.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/chunk-2AYGEN57.js

@@ -0,0 +1,32 @@
+// src/canvas/worldSpec.ts
+var DEFAULT_FRAME = { originPx: { x: 0, y: 0 }, yDir: 1 };
+function resolveFrame(spec, size) {
+  if (!spec) return DEFAULT_FRAME;
+  const origin = spec.origin ?? { x: 0, y: 0 };
+  return {
+    originPx: { x: origin.x * size.width, y: origin.y * size.height },
+    yDir: spec.yAxis === "up" ? -1 : 1
+  };
+}
+function applyCamera(ctx, view, frame = DEFAULT_FRAME) {
+  ctx.translate(frame.originPx.x + view.pan.x, frame.originPx.y + view.pan.y);
+  ctx.scale(view.zoom, view.zoom * frame.yDir);
+}
+
+// src/canvas/canvasCoords.ts
+function worldToScreen(world, view, frame = DEFAULT_FRAME) {
+  return {
+    x: frame.originPx.x + view.pan.x + world.x * view.zoom,
+    y: frame.originPx.y + view.pan.y + world.y * view.zoom * frame.yDir
+  };
+}
+function screenToWorld(screen, view, frame = DEFAULT_FRAME) {
+  return {
+    x: (screen.x - frame.originPx.x - view.pan.x) / view.zoom,
+    y: (screen.y - frame.originPx.y - view.pan.y) / (view.zoom * frame.yDir)
+  };
+}
+
+export { DEFAULT_FRAME, applyCamera, resolveFrame, screenToWorld, worldToScreen };
+//# sourceMappingURL=chunk-2AYGEN57.js.map
+//# sourceMappingURL=chunk-2AYGEN57.js.map

package/dist/chunk-2AYGEN57.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/canvas/worldSpec.ts","../src/canvas/canvasCoords.ts"],"names":[],"mappings":";AA2BO,IAAM,aAAA,GAA4B,EAAE,QAAA,EAAU,EAAE,CAAA,EAAG,GAAG,CAAA,EAAG,CAAA,EAAE,EAAG,IAAA,EAAM,CAAA;AAEpE,SAAS,YAAA,CAAa,MAA6B,IAAA,EAAgC;AACxF,EAAA,IAAI,CAAC,MAAM,OAAO,aAAA;AAClB,EAAA,MAAM,SAAS,IAAA,CAAK,MAAA,IAAU,EAAE,CAAA,EAAG,CAAA,EAAG,GAAG,CAAA,EAAE;AAC3C,EAAA,OAAO;AAAA,IACL,QAAA,EAAU,EAAE,CAAA,EAAG,MAAA,CAAO,CAAA,GAAI,IAAA,CAAK,KAAA,EAAO,CAAA,EAAG,MAAA,CAAO,CAAA,GAAI,IAAA,CAAK,MAAA,EAAO;AAAA,IAChE,IAAA,EAAM,IAAA,CAAK,KAAA,KAAU,IAAA,GAAO,EAAA,GAAK;AAAA,GACnC;AACF;AAIO,SAAS,WAAA,CACd,GAAA,EACA,IAAA,EACA,KAAA,GAAoB,aAAA,EACd;AACN,EAAA,GAAA,CAAI,SAAA,CAAU,KAAA,CAAM,QAAA,CAAS,CAAA,GAAI,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,KAAA,CAAM,QAAA,CAAS,CAAA,GAAI,IAAA,CAAK,GAAA,CAAI,CAAC,CAAA;AAC1E,EAAA,GAAA,CAAI,MAAM,IAAA,CAAK,IAAA,EAAM,IAAA,CAAK,IAAA,GAAO,MAAM,IAAI,CAAA;AAC7C;;;ACvCO,SAAS,aAAA,CACd,KAAA,EACA,IAAA,EACA,KAAA,GAAoB,aAAA,EACb;AACP,EAAA,OAAO;AAAA,IACL,CAAA,EAAG,MAAM,QAAA,CAAS,CAAA,GAAI,KAAK,GAAA,CAAI,CAAA,GAAI,KAAA,CAAM,CAAA,GAAI,IAAA,CAAK,IAAA;AAAA,IAClD,CAAA,EAAG,KAAA,CAAM,QAAA,CAAS,CAAA,GAAI,IAAA,CAAK,GAAA,CAAI,CAAA,GAAI,KAAA,CAAM,CAAA,GAAI,IAAA,CAAK,IAAA,GAAO,KAAA,CAAM;AAAA,GACjE;AACF;AAGO,SAAS,aAAA,CACd,MAAA,EACA,IAAA,EACA,KAAA,GAAoB,aAAA,EACb;AACP,EAAA,OAAO;AAAA,IACL,CAAA,EAAA,CAAI,OAAO,CAAA,GAAI,KAAA,CAAM,SAAS,CAAA,GAAI,IAAA,CAAK,GAAA,CAAI,CAAA,IAAK,IAAA,CAAK,IAAA;AAAA,IACrD,CAAA,EAAA,CAAI,MAAA,CAAO,CAAA,GAAI,KAAA,CAAM,QAAA,CAAS,CAAA,GAAI,IAAA,CAAK,GAAA,CAAI,CAAA,KAAM,IAAA,CAAK,IAAA,GAAO,KAAA,CAAM,IAAA;AAAA,GACrE;AACF","file":"chunk-2AYGEN57.js","sourcesContent":["import type { Point, ViewTransform } from '../instrument/types';\n\n/** How an instrument's world sits on the canvas, independent of the camera.\n *  The defaults reproduce the convention labkit shipped before this existed:\n *  world (0,0) at the element's top-left, y growing downward. */\nexport interface WorldSpec {\n  /** Where world (0,0) sits at `pan` zero, as a fraction of the viewport.\n   *  `{x:0,y:0}` top-left (default); `{x:0.5,y:0.5}` centre. */\n  origin?: Point;\n  /** Which way the world y axis runs on screen. Default `'down'`. */\n  yAxis?: 'down' | 'up';\n}\n\n/** A viewport's CSS-pixel size. */\nexport interface ViewportSize {\n  width: number;\n  height: number;\n}\n\n/** A `WorldSpec` resolved against a viewport: what the coordinate helpers,\n *  the camera and the wheel all read. */\nexport interface WorldFrame {\n  /** Screen position of world (0,0) at `pan` zero. */\n  originPx: Point;\n  yDir: 1 | -1;\n}\n\nexport const DEFAULT_FRAME: WorldFrame = { originPx: { x: 0, y: 0 }, yDir: 1 };\n\nexport function resolveFrame(spec: WorldSpec | undefined, size: ViewportSize): WorldFrame {\n  if (!spec) return DEFAULT_FRAME;\n  const origin = spec.origin ?? { x: 0, y: 0 };\n  return {\n    originPx: { x: origin.x * size.width, y: origin.y * size.height },\n    yDir: spec.yAxis === 'up' ? -1 : 1,\n  };\n}\n\n/** Put a 2D context into the instrument's world coordinates, so a layer's\n *  `draw` works in them. Must stay the exact inverse of `screenToWorld`. */\nexport function applyCamera(\n  ctx: CanvasRenderingContext2D,\n  view: ViewTransform,\n  frame: WorldFrame = DEFAULT_FRAME,\n): void {\n  ctx.translate(frame.originPx.x + view.pan.x, frame.originPx.y + view.pan.y);\n  ctx.scale(view.zoom, view.zoom * frame.yDir);\n}\n","import type { Point, ViewTransform } from '../instrument/types';\nimport { DEFAULT_FRAME, type WorldFrame } from './worldSpec';\n\n/** Project a world point into screen coordinates under a view.\n *\n *  `frame` is the instrument's declared coordinate system, resolved against the\n *  viewport; omitting it gives labkit's original one — origin at the top-left,\n *  y downward. */\nexport function worldToScreen(\n  world: Point,\n  view: ViewTransform,\n  frame: WorldFrame = DEFAULT_FRAME,\n): Point {\n  return {\n    x: frame.originPx.x + view.pan.x + world.x * view.zoom,\n    y: frame.originPx.y + view.pan.y + world.y * view.zoom * frame.yDir,\n  };\n}\n\n/** Unproject a screen point back to world coordinates under a view. */\nexport function screenToWorld(\n  screen: Point,\n  view: ViewTransform,\n  frame: WorldFrame = DEFAULT_FRAME,\n): Point {\n  return {\n    x: (screen.x - frame.originPx.x - view.pan.x) / view.zoom,\n    y: (screen.y - frame.originPx.y - view.pan.y) / (view.zoom * frame.yDir),\n  };\n}\n"]}

package/dist/{chunk-RVNN4CHQ.js → chunk-3P5TTTA7.js}

@@ -1,4 +1,4 @@
-import { Zt, Qt } from './chunk-TLGRYALP.js';
+import { ae, oe } from './chunk-HEORBLVT.js';
 import { useRef, useMemo, useState, useEffect } from 'react';
 import { floatingStrategy, DEFAULT_INSET, DEFAULT_ANCHOR, FLOATING_DRAG_PREFIX } from 'windease';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -9,6 +9,7 @@ function borderBoxOf(entry) {
   if (box) return { w: box.inlineSize, h: box.blockSize };
   return { w: entry.contentRect.width, h: entry.contentRect.height };
 }
+var DRAG_THRESHOLD = 3;
 function isInteractive(target) {
   if (!(target instanceof Element)) return false;
   return target.closest("input, button, a, select, textarea, [data-no-drag]") !== null;
@@ -77,15 +78,21 @@ function FloatingPanel({
     options
   }).placements.get(ITEM_ID);
   const dragging = useRef(null);
+  const pending = useRef(null);
   const [isDragging, setDragging] = useState(false);
   const onPointerDown = (e) => {
     if (isInteractive(e.target)) return;
     e.stopPropagation();
-    dragging.current = { x: e.clientX, y: e.clientY };
-    setDragging(true);
-    e.currentTarget.setPointerCapture?.(e.pointerId);
+    pending.current = { x: e.clientX, y: e.clientY, pointerId: e.pointerId };
   };
   const onPointerMove = (e) => {
+    const armed = pending.current;
+    if (armed && armed.pointerId === e.pointerId && !dragging.current) {
+      if (Math.hypot(e.clientX - armed.x, e.clientY - armed.y) < DRAG_THRESHOLD) return;
+      dragging.current = { x: armed.x, y: armed.y };
+      setDragging(true);
+      e.currentTarget.setPointerCapture?.(e.pointerId);
+    }
     const from = dragging.current;
     if (!from) return;
     const dx = e.clientX - from.x;
@@ -105,6 +112,7 @@ function FloatingPanel({
     );
   };
   const endDrag = (e) => {
+    pending.current = null;
     if (!dragging.current) return;
     dragging.current = null;
     setDragging(false);
@@ -160,12 +168,12 @@ function JobProgress({ job, className }) {
       determinate ? ` / ${total}` : ""
     ] }),
     failures.length > 0 && /* @__PURE__ */ jsxs("span", { className: "lk-job__failures", title: failures.map((f) => f.error).join("\n"), children: [
-      /* @__PURE__ */ jsx(Zt, { size: 14 }),
+      /* @__PURE__ */ jsx(ae, { size: 14 }),
       failures.length,
       " failed"
     ] }),
     error && /* @__PURE__ */ jsxs("span", { className: "lk-job__error", title: error, children: [
-      /* @__PURE__ */ jsx(Qt, { size: 14 }),
+      /* @__PURE__ */ jsx(oe, { size: 14 }),
       error
     ] }),
     status === "running" && /* @__PURE__ */ jsx("button", { type: "button", className: "lk-job__cancel", onClick: job.cancel, children: "Cancel" })
@@ -208,5 +216,5 @@ function Sidebar({ children, title, collapsed = false, onToggle }) {
 }
 
 export { FloatingPanel, JobProgress, Legend, Sidebar };
-//# sourceMappingURL=chunk-RVNN4CHQ.js.map
-//# sourceMappingURL=chunk-RVNN4CHQ.js.map
+//# sourceMappingURL=chunk-3P5TTTA7.js.map
+//# sourceMappingURL=chunk-3P5TTTA7.js.map

package/dist/chunk-3P5TTTA7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/primitives/FloatingPanel.tsx","../src/primitives/JobProgress.tsx","../src/primitives/Legend.tsx","../src/primitives/Sidebar.tsx"],"names":["jsx","jsxs"],"mappings":"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","file":"chunk-3P5TTTA7.js","sourcesContent":["import type React from 'react';\nimport { type CSSProperties, type ReactNode, useEffect, useMemo, useRef, useState } from 'react';\nimport {\n  type Corner,\n  DEFAULT_ANCHOR,\n  DEFAULT_INSET,\n  FLOATING_DRAG_PREFIX,\n  type FloatingPlacement,\n  floatingStrategy,\n} from 'windease';\n\n/** The strategy holds a map keyed by item id; a panel is always a lone item. */\nconst ITEM_ID = 'panel';\n\n/** Props for `<FloatingPanel>`. */\nexport interface FloatingPanelProps {\n  children: ReactNode;\n  /** Corner it rests in before it has ever been dragged. Default `'bottom-left'`. */\n  anchor?: Corner;\n  /** Corners that may capture it. Default: all four. */\n  snapCorners?: readonly Corner[];\n  /** Pixels in from a corner when snapped. Default 12. */\n  inset?: number;\n  /** localStorage key to remember its position under. Omit to forget on reload. */\n  storageKey?: string;\n  className?: string;\n}\n\n/**\n * The panel's footprint is its border box — `contentRect` excludes padding and\n * border, which would place a panel that then overflows its corner by exactly\n * that much.\n */\nfunction borderBoxOf(entry: ResizeObserverEntry): { w: number; h: number } {\n  const box = entry.borderBoxSize?.[0];\n  if (box) return { w: box.inlineSize, h: box.blockSize };\n  return { w: entry.contentRect.width, h: entry.contentRect.height };\n}\n\n/** How far the pointer must travel before a press becomes a drag. */\nconst DRAG_THRESHOLD = 3;\n\n/** A pointerdown on one of these is the child's, not a drag. */\nfunction isInteractive(target: EventTarget | null): boolean {\n  if (!(target instanceof Element)) return false;\n  return target.closest('input, button, a, select, textarea, [data-no-drag]') !== null;\n}\n\nfunction readStored(key: string | undefined): FloatingPlacement | null {\n  if (!key) return null;\n  try {\n    const raw = localStorage.getItem(key);\n    return raw ? (JSON.parse(raw) as FloatingPlacement) : null;\n  } catch {\n    return null;\n  }\n}\n\n/**\n * A draggable box that floats over its offset parent and snaps to its corners.\n *\n * Drives windease's `floatingStrategy` as a pure function rather than mounting a\n * windease container: a lab overlay has one item and no zone tree, so the node\n * model would be all cost. Pointer handling is therefore this component's, and\n * windease's own affordance rendering never participates.\n */\nexport function FloatingPanel({\n  children,\n  anchor = DEFAULT_ANCHOR,\n  snapCorners,\n  inset = DEFAULT_INSET,\n  storageKey,\n  className,\n}: FloatingPanelProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const strategy = useMemo(() => floatingStrategy(), []);\n  const options = useMemo(() => ({ defaultAnchor: anchor, inset }), [anchor, inset]);\n\n  const [container, setContainer] = useState({ w: 0, h: 0 });\n  const [size, setSize] = useState({ w: 0, h: 0 });\n  const [place, setPlace] = useState<FloatingPlacement>(\n    () => readStored(storageKey) ?? { x: 0, y: 0, anchor },\n  );\n\n  useEffect(() => {\n    if (!storageKey) return;\n    try {\n      localStorage.setItem(storageKey, JSON.stringify(place));\n    } catch {\n      // A full or disabled store is not worth failing a lab over.\n    }\n  }, [place, storageKey]);\n\n  const item = useMemo(\n    () => ({\n      id: ITEM_ID,\n      meta: { floating: true, ...(snapCorners ? { snapCorners: [...snapCorners] } : {}) },\n      natural: size,\n    }),\n    [size, snapCorners],\n  );\n\n  useEffect(() => {\n    const el = ref.current;\n    const parent = el?.offsetParent ?? el?.parentElement;\n    if (!el || !parent) return;\n    // Sizes come off the entry, not the DOM: jsdom reports 0 for every\n    // clientWidth/offsetWidth, and an unmeasured item is withheld from layout.\n    const observer = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        if (entry.target === parent) {\n          setContainer({ w: entry.contentRect.width, h: entry.contentRect.height });\n        } else {\n          setSize(borderBoxOf(entry));\n        }\n      }\n    });\n    observer.observe(parent);\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, []);\n\n  const rect = strategy\n    .layout({\n      items: [item],\n      container,\n      state: { at: { [ITEM_ID]: place }, inner: undefined },\n      options,\n    })\n    .placements.get(ITEM_ID);\n\n  const dragging = useRef<{ x: number; y: number } | null>(null);\n  /** Pressed but not yet moved far enough to be a drag. */\n  const pending = useRef<{ x: number; y: number; pointerId: number } | null>(null);\n  const [isDragging, setDragging] = useState(false);\n\n  const onPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {\n    if (isInteractive(e.target)) return;\n    // The canvas stack underneath owns pan/zoom on the same pointer events.\n    e.stopPropagation();\n    // Armed, not capturing. Capture retargets mouseup to this element, and the\n    // browser then synthesizes no `click` on the child under the cursor — so\n    // capturing on press makes every non-native control in the panel dead to a\n    // real mouse, silently. `isInteractive` only exempts the names it lists; a\n    // `role=\"button\"` span, a react-aria control or a canvas is not among them.\n    pending.current = { x: e.clientX, y: e.clientY, pointerId: e.pointerId };\n  };\n\n  const onPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {\n    const armed = pending.current;\n    if (armed && armed.pointerId === e.pointerId && !dragging.current) {\n      if (Math.hypot(e.clientX - armed.x, e.clientY - armed.y) < DRAG_THRESHOLD) return;\n      dragging.current = { x: armed.x, y: armed.y };\n      setDragging(true);\n      e.currentTarget.setPointerCapture?.(e.pointerId);\n    }\n    const from = dragging.current;\n    if (!from) return;\n    const dx = e.clientX - from.x;\n    const dy = e.clientY - from.y;\n    if (dx === 0 && dy === 0) return;\n    dragging.current = { x: e.clientX, y: e.clientY };\n    setPlace(\n      (prev) =>\n        strategy.reduce?.(\n          { at: { [ITEM_ID]: prev }, inner: undefined },\n          {\n            affordanceId: `${FLOATING_DRAG_PREFIX}${ITEM_ID}`,\n            kind: 'drag',\n            payload: { dx, dy },\n          },\n          { container, options, items: [item] },\n        ).at[ITEM_ID] ?? prev,\n    );\n  };\n\n  const endDrag = (e: React.PointerEvent<HTMLDivElement>) => {\n    pending.current = null;\n    if (!dragging.current) return;\n    dragging.current = null;\n    setDragging(false);\n    e.currentTarget.releasePointerCapture?.(e.pointerId);\n  };\n\n  return (\n    <div\n      className={className ? `lk-floating-panel ${className}` : 'lk-floating-panel'}\n      data-dragging={isDragging ? 'true' : undefined}\n      data-placed={rect ? 'true' : undefined}\n      onPointerCancel={endDrag}\n      onPointerDown={onPointerDown}\n      onPointerMove={onPointerMove}\n      onPointerUp={endDrag}\n      ref={ref}\n      style={\n        {\n          position: 'absolute',\n          left: `${rect?.x ?? 0}px`,\n          top: `${rect?.y ?? 0}px`,\n        } as CSSProperties\n      }\n    >\n      {children}\n    </div>\n  );\n}\n","import { ErrorIcon, WarningIcon } from '@weasel-js/ui';\nimport type { JobHandle } from '../job/types';\n\n/** Props for `<JobProgress>`. */\nexport interface JobProgressProps {\n  job: JobHandle;\n  className?: string;\n}\n\n/** A running job's progress, failures and outcome. Determinate once the job\n *  reports a total; a job that cannot count up front never sends one, so the\n *  bar stays indeterminate rather than inventing a denominator. */\nexport function JobProgress({ job, className }: JobProgressProps) {\n  const { status, done, total, failures, error } = job;\n  if (status === 'idle') return null;\n\n  const determinate = total !== null && total > 0;\n  const fraction = determinate ? Math.min(1, done / total) : 0;\n  const cls = ['lk-job', `lk-job--${status}`, className].filter(Boolean).join(' ');\n\n  return (\n    <div className={cls}>\n      <div\n        className={`lk-job__track${determinate ? '' : ' lk-job__track--indeterminate'}`}\n        role=\"progressbar\"\n        aria-label=\"Job progress\"\n        aria-valuenow={determinate ? done : undefined}\n        aria-valuemin={determinate ? 0 : undefined}\n        aria-valuemax={determinate ? total : undefined}\n      >\n        {/* Scaling a full-width bar keeps the fill off the layout path, so\n            progress updates never reflow the status bar. */}\n        <div\n          className=\"lk-job__fill\"\n          style={{ transform: `scaleX(${determinate ? fraction : 1})` }}\n        />\n      </div>\n\n      <span className=\"lk-job__count\">\n        {done}\n        {determinate ? ` / ${total}` : ''}\n      </span>\n\n      {failures.length > 0 && (\n        <span className=\"lk-job__failures\" title={failures.map((f) => f.error).join('\\n')}>\n          <WarningIcon size={14} />\n          {failures.length} failed\n        </span>\n      )}\n\n      {error && (\n        <span className=\"lk-job__error\" title={error}>\n          <ErrorIcon size={14} />\n          {error}\n        </span>\n      )}\n\n      {status === 'running' && (\n        <button type=\"button\" className=\"lk-job__cancel\" onClick={job.cancel}>\n          Cancel\n        </button>\n      )}\n    </div>\n  );\n}\n","import type { CSSProperties } from 'react';\n\n/** How a legend entry's swatch is drawn, matching how the thing looks on canvas. */\nexport type LegendMark = 'line' | 'dash' | 'dot' | 'band';\n\n/** One row of a legend: a swatch and what it means. */\nexport interface LegendEntry {\n  key: string;\n  label: string;\n  color: string;\n  /** Defaults to `'line'`. */\n  mark?: LegendMark;\n}\n\n/** Props for `<Legend>`. */\nexport interface LegendProps {\n  entries: readonly LegendEntry[];\n  className?: string;\n}\n\n/** A color key. Presentational only — no handlers, no state, no hover behavior. */\nexport function Legend({ entries, className }: LegendProps) {\n  return (\n    <ul className={className ? `lk-legend ${className}` : 'lk-legend'}>\n      {entries.map((entry) => {\n        const mark = entry.mark ?? 'line';\n        return (\n          <li className=\"lk-legend__row\" key={entry.key}>\n            <span\n              aria-hidden=\"true\"\n              className={`lk-legend__swatch lk-legend__swatch--${mark}`}\n              style={{ '--lk-legend-ink': entry.color } as CSSProperties}\n            />\n            <span className=\"lk-legend__label\">{entry.label}</span>\n          </li>\n        );\n      })}\n    </ul>\n  );\n}\n","import type { ReactNode } from 'react';\n\n/** Props for `<Sidebar>`. */\nexport interface SidebarProps {\n  children: ReactNode;\n  title?: string;\n  collapsed?: boolean;\n  onToggle?: () => void;\n}\n\n/** A collapsible side panel with an optional title. Collapse state is the\n *  caller's to hold. */\nexport function Sidebar({ children, title, collapsed = false, onToggle }: SidebarProps) {\n  const className = `lk-sidebar${collapsed ? ' lk-sidebar--collapsed' : ''}`;\n  return (\n    <aside className={className}>\n      {(title || onToggle) && (\n        <div className=\"lk-sidebar-header\">\n          {title && <span className=\"lk-sidebar-title\">{title}</span>}\n          {onToggle && (\n            <button\n              type=\"button\"\n              className=\"lk-sidebar-toggle\"\n              onClick={onToggle}\n              aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}\n            >\n              {collapsed ? '›' : '‹'}\n            </button>\n          )}\n        </div>\n      )}\n      <div className=\"lk-sidebar-body\">{children}</div>\n    </aside>\n  );\n}\n"]}

package/dist/{chunk-NS54R52R.js → chunk-3ZELRRBV.js}

@@ -1,24 +1,14 @@
-import { CanvasStackContext } from './chunk-CPUJ3QXL.js';
-import { useVisibleRaf } from './chunk-Z6HJ5FEM.js';
+import { zoomAt } from './chunk-CTRKTLYZ.js';
+import { resolveFrame, screenToWorld, DEFAULT_FRAME } from './chunk-2AYGEN57.js';
+import { CanvasStackContext } from './chunk-CQLQPQ4P.js';
+import { useVisibleRaf } from './chunk-ROQDRXKW.js';
 import { useRef, useState, useEffect, useMemo, useCallback } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-// src/canvas/canvasCoords.ts
-function worldToScreen(world, view) {
-  return {
-    x: world.x * view.zoom + view.pan.x,
-    y: world.y * view.zoom + view.pan.y
-  };
-}
-function screenToWorld(screen, view) {
-  return {
-    x: (screen.x - view.pan.x) / view.zoom,
-    y: (screen.y - view.pan.y) / view.zoom
-  };
-}
 function useLayerScheduler({
   layers,
   view,
+  frame = DEFAULT_FRAME,
   canvasRefs,
   size,
   host
@@ -37,7 +27,7 @@ function useLayerScheduler({
   }, [layers]);
   useEffect(() => {
     for (const layer of layers) dirty.current.add(layer.id);
-  }, [view, size, layers]);
+  }, [view, frame, size, layers]);
   const frameLoop = useVisibleRaf(
     () => {
       if (dirty.current.size === 0) return;
@@ -56,7 +46,7 @@ function useLayerScheduler({
         ctx.save();
         ctx.setTransform(size.dpr, 0, 0, size.dpr, 0, 0);
         ctx.clearRect(0, 0, size.width, size.height);
-        layer.render(ctx, view);
+        layer.render(ctx, view, frame);
         ctx.restore();
       }
       dirty.current.clear();
@@ -75,7 +65,8 @@ function usePanZoom({
   view,
   onViewChange,
   minZoom = 0.1,
-  maxZoom = 32
+  maxZoom = 32,
+  frame = DEFAULT_FRAME
 }) {
   const dragRef = useRef(null);
   const viewRef = useRef(view);
@@ -85,23 +76,21 @@ function usePanZoom({
     (e) => {
       e.preventDefault();
       const rect = e.currentTarget.getBoundingClientRect();
-      const cursorX = e.clientX - rect.left;
-      const cursorY = e.clientY - rect.top;
-      const v = viewRef.current;
       const initialZoom = initialZoomRef.current;
-      const effectiveMin = initialZoom == null ? minZoom : Math.min(minZoom, initialZoom);
-      const effectiveMax = initialZoom == null ? maxZoom : Math.max(maxZoom, initialZoom);
-      const factor = Math.exp(-e.deltaY * 1e-3);
-      const rawZoom = isPositiveFinite(v.zoom) ? v.zoom : 1;
-      const nextZoom = Math.min(effectiveMax, Math.max(effectiveMin, rawZoom * factor));
-      const ratio = nextZoom / rawZoom;
-      const nextPan = {
-        x: cursorX - (cursorX - v.pan.x) * ratio,
-        y: cursorY - (cursorY - v.pan.y) * ratio
-      };
-      onViewChange({ zoom: nextZoom, pan: nextPan });
+      onViewChange(
+        zoomAt(
+          viewRef.current,
+          Math.exp(-e.deltaY * 1e-3),
+          { x: e.clientX - rect.left, y: e.clientY - rect.top },
+          {
+            frame,
+            min: initialZoom == null ? minZoom : Math.min(minZoom, initialZoom),
+            max: initialZoom == null ? maxZoom : Math.max(maxZoom, initialZoom)
+          }
+        )
+      );
     },
-    [onViewChange, minZoom, maxZoom]
+    [onViewChange, minZoom, maxZoom, frame]
   );
   const onPointerDown = useCallback((e) => {
     if (e.button !== 0) return;
@@ -144,11 +133,13 @@ function CanvasStack({
   layers,
   view,
   onViewChange,
+  worldSpec,
   minZoom,
   maxZoom,
   width = "100%",
   height = "100%",
   className,
+  onResize,
   onHitTest,
   children
 }) {
@@ -178,9 +169,23 @@ function CanvasStack({
     ro.observe(el);
     return () => ro.disconnect();
   }, []);
-  const handlers = usePanZoom({ view, onViewChange, minZoom, maxZoom });
-  useLayerScheduler({ layers, view, canvasRefs: canvasMap, size, host: containerRef });
-  const ctxValue = useMemo(() => ({ view }), [view]);
+  const onResizeRef = useRef(onResize);
+  onResizeRef.current = onResize;
+  useEffect(() => {
+    if (size.width === 0 && size.height === 0) return;
+    onResizeRef.current?.({ width: size.width, height: size.height });
+  }, [size.width, size.height]);
+  const frame = useMemo(() => resolveFrame(worldSpec, size), [worldSpec, size]);
+  const handlers = usePanZoom({ view, onViewChange, minZoom, maxZoom, frame });
+  useLayerScheduler({ layers, view, frame, canvasRefs: canvasMap, size, host: containerRef });
+  const ctxValue = useMemo(
+    () => ({
+      view,
+      frame,
+      surface: { element: containerRef, size, canvases: canvasMap, layers }
+    }),
+    [view, frame, size, layers]
+  );
   const containerStyle = { width, height };
   const canvasPx = {
     width: Math.max(0, Math.round(size.width * size.dpr)),
@@ -196,7 +201,7 @@ function CanvasStack({
     if (!wasDragging && onHitTest && containerRef.current) {
       const rect = containerRef.current.getBoundingClientRect();
       const screen = { x: e.clientX - rect.left, y: e.clientY - rect.top };
-      onHitTest(screenToWorld(screen, view));
+      onHitTest(screenToWorld(screen, view, frame));
     }
   };
   return /* @__PURE__ */ jsx(CanvasStackContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxs(
@@ -227,6 +232,6 @@ function CanvasStack({
   ) });
 }
 
-export { CanvasStack, screenToWorld, worldToScreen };
-//# sourceMappingURL=chunk-NS54R52R.js.map
-//# sourceMappingURL=chunk-NS54R52R.js.map
+export { CanvasStack };
+//# sourceMappingURL=chunk-3ZELRRBV.js.map
+//# sourceMappingURL=chunk-3ZELRRBV.js.map

package/dist/chunk-3ZELRRBV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/canvas/useLayerScheduler.ts","../src/canvas/usePanZoom.ts","../src/canvas/CanvasStack.tsx"],"names":["useRef","useEffect"],"mappings":"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","file":"chunk-3ZELRRBV.js","sourcesContent":["import { useVisibleRaf } from '@weasel-js/core';\nimport { type RefObject, useEffect, useRef } from 'react';\nimport type { ViewTransform } from '../instrument/types';\nimport { DEFAULT_FRAME, type WorldFrame } from './worldSpec';\n\n/** One layer of a canvas stack: its id, whether it is currently shown, and how\n *  it paints itself. */\nexport interface CanvasLayerDescriptor {\n  id: string;\n  visible: boolean;\n  render: (ctx: CanvasRenderingContext2D, view: ViewTransform, frame: WorldFrame) => void;\n}\n\ninterface SchedulerOptions {\n  layers: CanvasLayerDescriptor[];\n  view: ViewTransform;\n  /** The instrument's coordinate system, resolved against `size`. */\n  frame?: WorldFrame;\n  canvasRefs: RefObject<Map<string, HTMLCanvasElement>>;\n  size: { width: number; height: number; dpr: number };\n  /** The element the stack occupies. Given one, the scheduler also stops while\n   *  the stack sits outside the viewport. */\n  host?: RefObject<Element | null>;\n}\n\nexport function useLayerScheduler({\n  layers,\n  view,\n  frame = DEFAULT_FRAME,\n  canvasRefs,\n  size,\n  host,\n}: SchedulerOptions): void {\n  const dirty = useRef<Set<string>>(new Set());\n  const lastRenderRef = useRef<Map<string, CanvasLayerDescriptor['render']>>(new Map());\n\n  useEffect(() => {\n    for (const layer of layers) {\n      const prev = lastRenderRef.current.get(layer.id);\n      if (prev !== layer.render) dirty.current.add(layer.id);\n      lastRenderRef.current.set(layer.id, layer.render);\n    }\n    for (const id of [...lastRenderRef.current.keys()]) {\n      if (!layers.find((l) => l.id === id)) lastRenderRef.current.delete(id);\n    }\n  }, [layers]);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: re-mark dirty when view or size changes\n  useEffect(() => {\n    for (const layer of layers) dirty.current.add(layer.id);\n  }, [view, frame, size, layers]);\n\n  // Painting only what is dirty is not the same as doing nothing: a hidden tab\n  // still commits React updates, and the effect above marks every layer dirty\n  // on any view or size change. The gate is what actually stops the work.\n  const frameLoop = useVisibleRaf(\n    () => {\n      if (dirty.current.size === 0) return;\n      const map = canvasRefs.current;\n      if (!map) {\n        dirty.current.clear();\n        return;\n      }\n      for (const layer of layers) {\n        if (!dirty.current.has(layer.id)) continue;\n        if (!layer.visible) continue;\n        const canvas = map.get(layer.id);\n        if (!canvas) continue;\n        const ctx = canvas.getContext('2d');\n        if (!ctx) continue;\n        ctx.save();\n        ctx.setTransform(size.dpr, 0, 0, size.dpr, 0, 0);\n        ctx.clearRect(0, 0, size.width, size.height);\n        layer.render(ctx, view, frame);\n        ctx.restore();\n      }\n      dirty.current.clear();\n    },\n    { target: host },\n  );\n\n  useEffect(() => {\n    if (dirty.current.size > 0) frameLoop.request();\n  });\n}\n","import { type PointerEvent, useCallback, useRef, type WheelEvent } from 'react';\nimport type { ViewTransform } from '../instrument/types';\nimport { zoomAt } from './camera';\nimport { DEFAULT_FRAME, type WorldFrame } from './worldSpec';\n\nexport interface UsePanZoomOptions {\n  view: ViewTransform;\n  onViewChange: (v: ViewTransform) => void;\n  /** The opening `view.zoom` always stays reachable, widening these past\n   *  whatever is passed here if it would otherwise exclude it. */\n  minZoom?: number;\n  maxZoom?: number;\n  /** The instrument's coordinate system, resolved against the viewport. The\n   *  wheel anchors in this frame; omitting it anchors at the element's\n   *  top-left, which is what labkit did before a frame could be declared. */\n  frame?: WorldFrame;\n}\n\nexport interface PanZoomHandlers {\n  onWheel: (e: WheelEvent<HTMLElement>) => void;\n  onPointerDown: (e: PointerEvent<HTMLElement>) => void;\n  onPointerMove: (e: PointerEvent<HTMLElement>) => void;\n  onPointerUp: (e: PointerEvent<HTMLElement>) => void;\n  isDragging: () => boolean;\n}\n\ninterface DragState {\n  pointerId: number;\n  startScreenX: number;\n  startScreenY: number;\n  startPan: { x: number; y: number };\n  moved: boolean;\n}\n\nconst DRAG_THRESHOLD = 3;\n\nfunction isPositiveFinite(n: number): boolean {\n  return Number.isFinite(n) && n > 0;\n}\n\nexport function usePanZoom({\n  view,\n  onViewChange,\n  minZoom = 0.1,\n  maxZoom = 32,\n  frame = DEFAULT_FRAME,\n}: UsePanZoomOptions): PanZoomHandlers {\n  const dragRef = useRef<DragState | null>(null);\n  const viewRef = useRef(view);\n  viewRef.current = view;\n  // Captured once, from the view the canvas opened at — not the current view,\n  // which would let a prior zoom-out shrink the range and trap the opening\n  // view unreachable behind it.\n  const initialZoomRef = useRef(isPositiveFinite(view.zoom) ? view.zoom : null);\n\n  const onWheel = useCallback(\n    (e: WheelEvent<HTMLElement>) => {\n      e.preventDefault();\n      const rect = e.currentTarget.getBoundingClientRect();\n      const initialZoom = initialZoomRef.current;\n      onViewChange(\n        zoomAt(\n          viewRef.current,\n          Math.exp(-e.deltaY * 0.001),\n          { x: e.clientX - rect.left, y: e.clientY - rect.top },\n          {\n            frame,\n            min: initialZoom == null ? minZoom : Math.min(minZoom, initialZoom),\n            max: initialZoom == null ? maxZoom : Math.max(maxZoom, initialZoom),\n          },\n        ),\n      );\n    },\n    [onViewChange, minZoom, maxZoom, frame],\n  );\n\n  const onPointerDown = useCallback((e: PointerEvent<HTMLElement>) => {\n    if (e.button !== 0) return;\n    e.currentTarget.setPointerCapture(e.pointerId);\n    dragRef.current = {\n      pointerId: e.pointerId,\n      startScreenX: e.clientX,\n      startScreenY: e.clientY,\n      startPan: { ...viewRef.current.pan },\n      moved: false,\n    };\n  }, []);\n\n  const onPointerMove = useCallback(\n    (e: PointerEvent<HTMLElement>) => {\n      const drag = dragRef.current;\n      if (!drag || drag.pointerId !== e.pointerId) return;\n      const dx = e.clientX - drag.startScreenX;\n      const dy = e.clientY - drag.startScreenY;\n      if (!drag.moved && Math.hypot(dx, dy) < DRAG_THRESHOLD) return;\n      drag.moved = true;\n      onViewChange({\n        zoom: viewRef.current.zoom,\n        pan: { x: drag.startPan.x + dx, y: drag.startPan.y + dy },\n      });\n    },\n    [onViewChange],\n  );\n\n  const onPointerUp = useCallback((e: PointerEvent<HTMLElement>) => {\n    const drag = dragRef.current;\n    if (!drag || drag.pointerId !== e.pointerId) return;\n    if (e.currentTarget.hasPointerCapture(e.pointerId)) {\n      e.currentTarget.releasePointerCapture(e.pointerId);\n    }\n    dragRef.current = null;\n  }, []);\n\n  const isDragging = useCallback(() => dragRef.current?.moved === true, []);\n\n  return { onWheel, onPointerDown, onPointerMove, onPointerUp, isDragging };\n}\n","import { type CSSProperties, type ReactNode, useEffect, useMemo, useRef, useState } from 'react';\nimport type { Point, ViewTransform } from '../instrument/types';\nimport { CanvasStackContext } from './CanvasStackContext';\nimport { screenToWorld } from './canvasCoords';\nimport { type CanvasLayerDescriptor, useLayerScheduler } from './useLayerScheduler';\nimport { usePanZoom } from './usePanZoom';\nimport { resolveFrame, type ViewportSize, type WorldSpec } from './worldSpec';\n\n/** Props for `<CanvasStack>`. */\nexport interface CanvasStackProps {\n  layers: CanvasLayerDescriptor[];\n  view: ViewTransform;\n  onViewChange: (v: ViewTransform) => void;\n  /** The instrument's coordinate system. Omitted, world (0,0) sits at the\n   *  element's top-left with y running down. */\n  worldSpec?: WorldSpec;\n  minZoom?: number;\n  maxZoom?: number;\n  width?: number | string;\n  height?: number | string;\n  className?: string;\n  /** Fired whenever the stack is measured, so a consumer can place a view that\n   *  only makes sense in terms of the viewport. */\n  onResize?: (size: ViewportSize) => void;\n  onHitTest?: (worldPos: Point) => void;\n  children?: ReactNode;\n}\n\n/** Stacks one `<canvas>` per layer and drives them from a shared view, so a\n *  layer that changes rarely is not redrawn with one that changes every frame.\n *  Handles sizing, device pixel ratio, and pan/zoom. */\nexport function CanvasStack({\n  layers,\n  view,\n  onViewChange,\n  worldSpec,\n  minZoom,\n  maxZoom,\n  width = '100%',\n  height = '100%',\n  className,\n  onResize,\n  onHitTest,\n  children,\n}: CanvasStackProps) {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const canvasMap = useRef<Map<string, HTMLCanvasElement>>(new Map());\n  const [size, setSize] = useState({ width: 0, height: 0, dpr: 1 });\n\n  const setCanvasRef = (id: string, el: HTMLCanvasElement | null): void => {\n    if (el) canvasMap.current.set(id, el);\n    else canvasMap.current.delete(id);\n  };\n\n  useEffect(() => {\n    const el = containerRef.current;\n    if (!el) return;\n    const update = () => {\n      const rect = el.getBoundingClientRect();\n      const dpr = window.devicePixelRatio ?? 1;\n      setSize((prev) => {\n        if (prev.width === rect.width && prev.height === rect.height && prev.dpr === dpr) {\n          return prev;\n        }\n        return { width: rect.width, height: rect.height, dpr };\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  }, []);\n\n  const onResizeRef = useRef(onResize);\n  onResizeRef.current = onResize;\n  useEffect(() => {\n    if (size.width === 0 && size.height === 0) return;\n    onResizeRef.current?.({ width: size.width, height: size.height });\n  }, [size.width, size.height]);\n\n  const frame = useMemo(() => resolveFrame(worldSpec, size), [worldSpec, size]);\n\n  const handlers = usePanZoom({ view, onViewChange, minZoom, maxZoom, frame });\n  useLayerScheduler({ layers, view, frame, canvasRefs: canvasMap, size, host: containerRef });\n\n  const ctxValue = useMemo(\n    () => ({\n      view,\n      frame,\n      surface: { element: containerRef, size, canvases: canvasMap, layers },\n    }),\n    [view, frame, size, layers],\n  );\n\n  const containerStyle: CSSProperties = { width, height };\n  const canvasPx = {\n    width: Math.max(0, Math.round(size.width * size.dpr)),\n    height: Math.max(0, Math.round(size.height * size.dpr)),\n  };\n  const canvasCss: CSSProperties = {\n    width: size.width,\n    height: size.height,\n  };\n\n  const handlePointerUp = (e: React.PointerEvent<HTMLDivElement>) => {\n    const wasDragging = handlers.isDragging();\n    handlers.onPointerUp(e);\n    if (!wasDragging && onHitTest && containerRef.current) {\n      const rect = containerRef.current.getBoundingClientRect();\n      const screen = { x: e.clientX - rect.left, y: e.clientY - rect.top };\n      onHitTest(screenToWorld(screen, view, frame));\n    }\n  };\n\n  return (\n    <CanvasStackContext.Provider value={ctxValue}>\n      <div\n        ref={containerRef}\n        className={className ? `lk-canvas-stack ${className}` : 'lk-canvas-stack'}\n        style={containerStyle}\n        onWheel={handlers.onWheel}\n        onPointerDown={handlers.onPointerDown}\n        onPointerMove={handlers.onPointerMove}\n        onPointerUp={handlePointerUp}\n      >\n        {layers.map((layer) => (\n          <canvas\n            key={layer.id}\n            ref={(el) => setCanvasRef(layer.id, el)}\n            className=\"lk-canvas-stack__canvas\"\n            width={canvasPx.width}\n            height={canvasPx.height}\n            style={{ ...canvasCss, display: layer.visible ? 'block' : 'none' }}\n          />\n        ))}\n        <div className=\"lk-canvas-stack__overlay\">{children}</div>\n      </div>\n    </CanvasStackContext.Provider>\n  );\n}\n"]}

package/dist/{chunk-HFDVGF4X.js → chunk-4EY67BKJ.js}

@@ -1,4 +1,4 @@
-import { useVisibleRaf } from './chunk-Z6HJ5FEM.js';
+import { useVisibleRaf } from './chunk-ROQDRXKW.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-HFDVGF4X.js.map
-//# sourceMappingURL=chunk-HFDVGF4X.js.map
+export { SurfaceCanvasContext, SurfaceContext, composeRects, rectsEqual, toDeviceRect, useSurface, useSurfaceCanvas, useSurfaceOptional, useSurfaceTile, useTiledSurface };
+//# sourceMappingURL=chunk-4EY67BKJ.js.map
+//# sourceMappingURL=chunk-4EY67BKJ.js.map