@weasel-js/labkit 0.1.0

package/dist/_dts/index-C6Yze7sQ.d.ts

@@ -0,0 +1,93 @@
+import { ReactNode } from 'react';
+import { C as ConfigField } from './types-Si4Fw-1F.js';
+
+interface RenderContext<TS = unknown, TC = unknown> {
+    state: TS;
+    config: TC;
+    setState: (next: TS | ((prev: TS) => TS)) => void;
+    setConfig: (key: keyof TC, value: unknown) => void;
+    workspace: {
+        id: string;
+        zoom: number;
+        setZoom: (z: number) => void;
+    };
+    emit: (event: string) => void;
+}
+interface CanvasLayer<TS = unknown, TC = unknown> {
+    id: string;
+    draw: (ctx: CanvasRenderingContext2D, args: {
+        state: TS;
+        config: TC;
+        zoom: number;
+    }) => void;
+}
+interface CanvasCapability<TS = unknown, TC = unknown> {
+    layers: CanvasLayer<TS, TC>[];
+    initialView?: {
+        zoom: number;
+        pan: {
+            x: number;
+            y: number;
+        };
+    };
+}
+interface LayerCapability {
+    ids: string[];
+}
+interface DragDropCapability<TS = unknown, TC = unknown> {
+    palette: PaletteItem[] | ((state: TS, config: TC) => PaletteItem[]);
+    onDrop: (worldPos: Point, item: PaletteItem, state: TS, config: TC) => TS;
+    onDragOver?: (worldPos: Point, item: PaletteItem, state: TS, config: TC) => DragFeedback | null;
+    pickUp?: (hit: HitResult, state: TS, config: TC) => {
+        item: PaletteItem;
+        state: TS;
+    } | null;
+}
+interface UndoCapability {
+    snapshotOn?: string[];
+    maxDepth?: number;
+}
+type SystemEvent = string;
+type Point = {
+    x: number;
+    y: number;
+};
+type HitResult = {
+    hit: boolean;
+    layerId?: string;
+    pointId?: string;
+};
+type ViewTransform = {
+    zoom: number;
+    pan: Point;
+};
+type LayerDescriptor = {
+    id: string;
+    label: string;
+    alwaysOn?: boolean;
+};
+type PaletteItem = {
+    id: string;
+    label: string;
+    data?: unknown;
+};
+type DragFeedback = {
+    ok: boolean;
+    reason?: string;
+};
+interface Instrument<TS = unknown, TC = unknown> {
+    name: string;
+    defaultConfig: () => TC;
+    initialState: (config: TC) => TS;
+    configSchema?: () => ConfigField[];
+    render: (ctx: RenderContext<TS, TC>) => ReactNode;
+    onConfigChange?: (config: TC, prev: TC, state: TS) => TS;
+    serialize?: (state: TS) => unknown;
+    deserialize?: (data: unknown, config: TC) => TS;
+    canvas?: CanvasCapability<TS, TC>;
+    layers?: LayerCapability;
+    dragDrop?: DragDropCapability<TS, TC>;
+    undo?: UndoCapability;
+}
+
+export type { CanvasCapability as C, DragDropCapability as D, HitResult as H, Instrument as I, LayerCapability as L, PaletteItem as P, RenderContext as R, SystemEvent as S, UndoCapability as U, ViewTransform as V, CanvasLayer as a, DragFeedback as b, LayerDescriptor as c, Point as d };

package/dist/_dts/types-Si4Fw-1F.d.ts

@@ -0,0 +1,48 @@
+type ConfigFieldType = 'slider' | 'checkbox' | 'select' | 'number' | 'text' | 'color';
+interface ConfigFieldBase {
+    key: string;
+    label: string;
+    type: ConfigFieldType;
+}
+interface SliderField extends ConfigFieldBase {
+    type: 'slider';
+    default: number;
+    min: number;
+    max: number;
+    step?: number;
+}
+interface CheckboxField extends ConfigFieldBase {
+    type: 'checkbox';
+    default: boolean;
+}
+interface SelectOption {
+    value: string;
+    label: string;
+}
+interface SelectField extends ConfigFieldBase {
+    type: 'select';
+    default: string;
+    options: SelectOption[];
+}
+interface NumberField extends ConfigFieldBase {
+    type: 'number';
+    default: number;
+    min?: number;
+    max?: number;
+    step?: number;
+}
+interface TextField extends ConfigFieldBase {
+    type: 'text';
+    default: string;
+    placeholder?: string;
+    maxLength?: number;
+    /** Milliseconds to debounce live setConfig calls. Default 150 ms. Set to 0 to disable. */
+    debounceMs?: number;
+}
+interface ColorField extends ConfigFieldBase {
+    type: 'color';
+    default: string;
+}
+type ConfigField = SliderField | CheckboxField | SelectField | NumberField | TextField | ColorField;
+
+export type { ConfigField as C, NumberField as N, SelectField as S, TextField as T, CheckboxField as a, ColorField as b, ConfigFieldBase as c, ConfigFieldType as d, SelectOption as e, SliderField as f };

package/dist/_dts/useExperimentState-eSvpwV_P.d.ts

@@ -0,0 +1,102 @@
+import * as react from 'react';
+import { ReactNode, ReactElement } from 'react';
+import { StoreApi } from 'zustand/vanilla';
+
+interface UndoStack {
+    past: unknown[];
+    future: unknown[];
+}
+interface WorkspaceRecord<TS = unknown, TC = unknown> {
+    id: string;
+    instrumentName: string;
+    config: TC;
+    state: TS;
+    view: {
+        zoom: number;
+        pan: {
+            x: number;
+            y: number;
+        };
+    };
+    undoStack: UndoStack;
+}
+interface SavedSnapshot {
+    id: string;
+    name: string;
+    workspaceId: string;
+    instrumentName: string;
+    config: unknown;
+    state: unknown;
+    savedAt: number;
+}
+interface LabStoreState {
+    workspaces: WorkspaceRecord[];
+    savedSnapshots: SavedSnapshot[];
+    theme: 'light' | 'interstellar' | 'auto';
+}
+interface StorageAdapter {
+    read(key: string): string | null;
+    write(key: string, value: string): void;
+    delete?(key: string): void;
+}
+interface ExperimentStateHandle<TS, TC> {
+    state: TS;
+    setState: (next: TS | ((prev: TS) => TS)) => void;
+    config: TC;
+    setConfig: (key: keyof TC, value: TC[keyof TC]) => void;
+}
+interface CreateLabStoreOptions {
+    storageKey: string;
+    storage: StorageAdapter;
+    initialTheme?: 'light' | 'interstellar' | 'auto';
+}
+type InstrumentSerializers = Record<string, {
+    serialize?: (state: unknown) => unknown;
+    deserialize?: (data: unknown) => unknown;
+} | undefined>;
+
+declare const localStorageAdapter: StorageAdapter;
+declare const sessionStorageAdapter: StorageAdapter;
+declare const urlHashAdapter: StorageAdapter;
+declare function createMemoryAdapter(): StorageAdapter;
+declare const noneAdapter: StorageAdapter;
+
+interface LabStoreActions {
+    addWorkspace: (record: Omit<WorkspaceRecord, 'undoStack'>) => void;
+    removeWorkspace: (id: string) => void;
+    updateWorkspaceState: <TS>(id: string, next: TS | ((prev: TS) => TS)) => void;
+    updateWorkspaceConfig: <TC>(id: string, key: keyof TC, value: TC[keyof TC]) => void;
+    updateWorkspaceView: (id: string, view: WorkspaceRecord['view']) => void;
+    updateWorkspaceUndoStack: (id: string, next: WorkspaceRecord['undoStack'] | ((prev: WorkspaceRecord['undoStack']) => WorkspaceRecord['undoStack'])) => void;
+    setWorkspaceInstrument: (id: string, instrumentName: string) => void;
+    saveSnapshot: (workspaceId: string, name: string) => void;
+    loadSnapshot: (snapshotId: string, workspaceId: string) => void;
+    deleteSnapshot: (snapshotId: string) => void;
+    listSnapshots: (workspaceId?: string) => SavedSnapshot[];
+    setTheme: (theme: 'light' | 'interstellar' | 'auto') => void;
+}
+type LabStore = StoreApi<LabStoreState & LabStoreActions> & {
+    registerSerializers: (s: InstrumentSerializers) => void;
+};
+declare function createLabStore(options: CreateLabStoreOptions): LabStore;
+
+type LabStoreCtx = {
+    store: LabStore;
+} | null;
+declare const LabStoreContext: react.Context<LabStoreCtx>;
+declare function LabStoreProvider({ store, children, }: {
+    store: LabStore;
+    children: ReactNode;
+}): ReactElement;
+declare function useLabStore(): LabStoreState & ReturnType<LabStore['getState']>;
+declare const WorkspaceIdContext: react.Context<string | null>;
+declare function WorkspaceIdProvider({ workspaceId, children, }: {
+    workspaceId: string;
+    children: ReactNode;
+}): ReactElement;
+declare function useWorkspaceId(): string;
+
+declare function useExperimentState<TS = unknown, TC = unknown>(): ExperimentStateHandle<TS, TC>;
+
+export { LabStoreContext as b, LabStoreProvider as c, WorkspaceIdContext as f, WorkspaceIdProvider as g, createLabStore as h, createMemoryAdapter as i, useExperimentState as j, useLabStore as k, localStorageAdapter as l, useWorkspaceId as m, noneAdapter as n, sessionStorageAdapter as s, urlHashAdapter as u };
+export type { CreateLabStoreOptions as C, ExperimentStateHandle as E, InstrumentSerializers as I, LabStore as L, StorageAdapter as S, UndoStack as U, WorkspaceRecord as W, LabStoreActions as a, LabStoreState as d, SavedSnapshot as e };

package/dist/canvas/index.d.ts

@@ -0,0 +1,34 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { V as ViewTransform, d as Point } from '../_dts/index-C6Yze7sQ.js';
+import '../_dts/types-Si4Fw-1F.js';
+
+interface CanvasLayerDescriptor {
+    id: string;
+    visible: boolean;
+    render: (ctx: CanvasRenderingContext2D, view: ViewTransform) => void;
+}
+
+interface CanvasStackProps {
+    layers: CanvasLayerDescriptor[];
+    view: ViewTransform;
+    onViewChange: (v: ViewTransform) => void;
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+    onHitTest?: (worldPos: Point) => void;
+    children?: ReactNode;
+}
+declare function CanvasStack({ layers, view, onViewChange, width, height, className, onHitTest, children, }: CanvasStackProps): react_jsx_runtime.JSX.Element;
+
+interface CanvasStackContextValue {
+    view: ViewTransform;
+}
+declare const CanvasStackContext: react.Context<CanvasStackContextValue | null>;
+
+declare function worldToScreen(world: Point, view: ViewTransform): Point;
+declare function screenToWorld(screen: Point, view: ViewTransform): Point;
+
+export { CanvasStack, CanvasStackContext, screenToWorld, worldToScreen };
+export type { CanvasLayerDescriptor, CanvasStackContextValue, CanvasStackProps };

package/dist/canvas/index.js

@@ -0,0 +1,4 @@
+export { CanvasStack, screenToWorld, worldToScreen } from '../chunk-54IQ2DX7.js';
+export { CanvasStackContext } from '../chunk-PWC7AQZM.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/canvas/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/chunk-2QNYYL3V.js

@@ -0,0 +1,86 @@
+import { useState, useRef } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/layers/LayerList.tsx
+function LayerList({ layers, visibility, onReorder, onToggle, className }) {
+  const reorderable = layers.filter((l) => !l.alwaysOn);
+  const pinned = layers.filter((l) => l.alwaysOn);
+  const [dragIndex, setDragIndex] = useState(null);
+  const dragRef = useRef(null);
+  if (layers.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: className ? `lk-layer-list ${className}` : "lk-layer-list", children: /* @__PURE__ */ jsx("div", { className: "lk-layer-list__empty", children: "No layers" }) });
+  }
+  const startDrag = (e, index) => {
+    e.currentTarget.setPointerCapture(e.pointerId);
+    dragRef.current = { pointerId: e.pointerId, fromIndex: index, startY: e.clientY };
+    setDragIndex(index);
+  };
+  const moveDrag = (e) => {
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== e.pointerId) return;
+    const rowHeight = 28;
+    const delta = Math.round((e.clientY - drag.startY) / rowHeight);
+    const target = Math.min(reorderable.length - 1, Math.max(0, drag.fromIndex + delta));
+    setDragIndex(target);
+  };
+  const endDrag = (e) => {
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== e.pointerId) return;
+    if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    }
+    if (dragIndex !== null && dragIndex !== drag.fromIndex) {
+      const next = [...reorderable];
+      const [moved] = next.splice(drag.fromIndex, 1);
+      if (moved) next.splice(dragIndex, 0, moved);
+      onReorder([...next, ...pinned]);
+    }
+    dragRef.current = null;
+    setDragIndex(null);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: className ? `lk-layer-list ${className}` : "lk-layer-list", children: [
+    reorderable.map((layer, i) => {
+      const isDragging = dragIndex === i;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: isDragging ? "lk-layer-list__row lk-layer-list__row--dragging" : "lk-layer-list__row",
+          children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "lk-layer-list__handle",
+                "aria-label": `Reorder ${layer.label}`,
+                onPointerDown: (e) => startDrag(e, i),
+                onPointerMove: moveDrag,
+                onPointerUp: endDrag,
+                children: "\u22EE\u22EE"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                className: "lk-layer-list__check",
+                type: "checkbox",
+                checked: visibility[layer.id] !== false,
+                onChange: (e) => onToggle(layer.id, e.target.checked),
+                "aria-label": `Toggle ${layer.label}`
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "lk-layer-list__label", children: layer.label })
+          ]
+        },
+        layer.id
+      );
+    }),
+    pinned.map((layer) => /* @__PURE__ */ jsxs("div", { className: "lk-layer-list__row lk-layer-list__row--pinned", children: [
+      /* @__PURE__ */ jsx("span", { className: "lk-layer-list__lock", role: "img", "aria-label": "Always on", children: "\u{1F512}" }),
+      /* @__PURE__ */ jsx("span", { className: "lk-layer-list__label", children: layer.label })
+    ] }, layer.id))
+  ] });
+}
+
+export { LayerList };
+//# sourceMappingURL=chunk-2QNYYL3V.js.map
+//# sourceMappingURL=chunk-2QNYYL3V.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/layers/LayerList.tsx"],"names":[],"mappings":"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","file":"chunk-2QNYYL3V.js","sourcesContent":["import { type PointerEvent, useRef, useState } from 'react';\nimport type { LayerDescriptor } from '../instrument/types';\n\nexport interface LayerListProps {\n  layers: LayerDescriptor[];\n  visibility: Record<string, boolean>;\n  onReorder: (newOrder: LayerDescriptor[]) => void;\n  onToggle: (id: string, visible: boolean) => void;\n  className?: string;\n}\n\ninterface DragState {\n  pointerId: number;\n  fromIndex: number;\n  startY: number;\n}\n\nexport function LayerList({ layers, visibility, onReorder, onToggle, className }: LayerListProps) {\n  const reorderable = layers.filter((l) => !l.alwaysOn);\n  const pinned = layers.filter((l) => l.alwaysOn);\n  const [dragIndex, setDragIndex] = useState<number | null>(null);\n  const dragRef = useRef<DragState | null>(null);\n\n  if (layers.length === 0) {\n    return (\n      <div className={className ? `lk-layer-list ${className}` : 'lk-layer-list'}>\n        <div className=\"lk-layer-list__empty\">No layers</div>\n      </div>\n    );\n  }\n\n  const startDrag = (e: PointerEvent<HTMLElement>, index: number) => {\n    e.currentTarget.setPointerCapture(e.pointerId);\n    dragRef.current = { pointerId: e.pointerId, fromIndex: index, startY: e.clientY };\n    setDragIndex(index);\n  };\n\n  const moveDrag = (e: PointerEvent<HTMLElement>) => {\n    const drag = dragRef.current;\n    if (!drag || drag.pointerId !== e.pointerId) return;\n    const rowHeight = 28;\n    const delta = Math.round((e.clientY - drag.startY) / rowHeight);\n    const target = Math.min(reorderable.length - 1, Math.max(0, drag.fromIndex + delta));\n    setDragIndex(target);\n  };\n\n  const endDrag = (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    if (dragIndex !== null && dragIndex !== drag.fromIndex) {\n      const next = [...reorderable];\n      const [moved] = next.splice(drag.fromIndex, 1);\n      if (moved) next.splice(dragIndex, 0, moved);\n      onReorder([...next, ...pinned]);\n    }\n    dragRef.current = null;\n    setDragIndex(null);\n  };\n\n  return (\n    <div className={className ? `lk-layer-list ${className}` : 'lk-layer-list'}>\n      {reorderable.map((layer, i) => {\n        const isDragging = dragIndex === i;\n        return (\n          <div\n            key={layer.id}\n            className={\n              isDragging ? 'lk-layer-list__row lk-layer-list__row--dragging' : 'lk-layer-list__row'\n            }\n          >\n            <button\n              type=\"button\"\n              className=\"lk-layer-list__handle\"\n              aria-label={`Reorder ${layer.label}`}\n              onPointerDown={(e) => startDrag(e, i)}\n              onPointerMove={moveDrag}\n              onPointerUp={endDrag}\n            >\n              ⋮⋮\n            </button>\n            <input\n              className=\"lk-layer-list__check\"\n              type=\"checkbox\"\n              checked={visibility[layer.id] !== false}\n              onChange={(e) => onToggle(layer.id, e.target.checked)}\n              aria-label={`Toggle ${layer.label}`}\n            />\n            <span className=\"lk-layer-list__label\">{layer.label}</span>\n          </div>\n        );\n      })}\n      {pinned.map((layer) => (\n        <div key={layer.id} className=\"lk-layer-list__row lk-layer-list__row--pinned\">\n          <span className=\"lk-layer-list__lock\" role=\"img\" aria-label=\"Always on\">\n            🔒\n          </span>\n          <span className=\"lk-layer-list__label\">{layer.label}</span>\n        </div>\n      ))}\n    </div>\n  );\n}\n"]}

package/dist/chunk-54IQ2DX7.js

@@ -0,0 +1,222 @@
+import { CanvasStackContext } from './chunk-PWC7AQZM.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, canvasRefs, size }) {
+  const dirty = useRef(/* @__PURE__ */ new Set());
+  const rafId = useRef(null);
+  const lastRenderRef = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    for (const layer of layers) {
+      const prev = lastRenderRef.current.get(layer.id);
+      if (prev !== layer.render) dirty.current.add(layer.id);
+      lastRenderRef.current.set(layer.id, layer.render);
+    }
+    for (const id of [...lastRenderRef.current.keys()]) {
+      if (!layers.find((l) => l.id === id)) lastRenderRef.current.delete(id);
+    }
+  }, [layers]);
+  useEffect(() => {
+    for (const layer of layers) dirty.current.add(layer.id);
+  }, [view, size, layers]);
+  useEffect(() => {
+    const tick = () => {
+      rafId.current = null;
+      if (dirty.current.size === 0) return;
+      const map = canvasRefs.current;
+      if (!map) {
+        dirty.current.clear();
+        return;
+      }
+      for (const layer of layers) {
+        if (!dirty.current.has(layer.id)) continue;
+        if (!layer.visible) continue;
+        const canvas = map.get(layer.id);
+        if (!canvas) continue;
+        const ctx = canvas.getContext("2d");
+        if (!ctx) continue;
+        ctx.save();
+        ctx.setTransform(size.dpr, 0, 0, size.dpr, 0, 0);
+        ctx.clearRect(0, 0, size.width, size.height);
+        layer.render(ctx, view);
+        ctx.restore();
+      }
+      dirty.current.clear();
+    };
+    if (dirty.current.size > 0 && rafId.current === null) {
+      rafId.current = requestAnimationFrame(tick);
+    }
+    return () => {
+      if (rafId.current !== null) {
+        cancelAnimationFrame(rafId.current);
+        rafId.current = null;
+      }
+    };
+  });
+}
+var DRAG_THRESHOLD = 3;
+function usePanZoom({
+  view,
+  onViewChange,
+  minZoom = 0.1,
+  maxZoom = 32
+}) {
+  const dragRef = useRef(null);
+  const viewRef = useRef(view);
+  viewRef.current = view;
+  const onWheel = useCallback(
+    (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 factor = Math.exp(-e.deltaY * 1e-3);
+      const nextZoom = Math.min(maxZoom, Math.max(minZoom, v.zoom * factor));
+      const ratio = nextZoom / v.zoom;
+      const nextPan = {
+        x: cursorX - (cursorX - v.pan.x) * ratio,
+        y: cursorY - (cursorY - v.pan.y) * ratio
+      };
+      onViewChange({ zoom: nextZoom, pan: nextPan });
+    },
+    [onViewChange, minZoom, maxZoom]
+  );
+  const onPointerDown = useCallback((e) => {
+    if (e.button !== 0) return;
+    e.currentTarget.setPointerCapture(e.pointerId);
+    dragRef.current = {
+      pointerId: e.pointerId,
+      startScreenX: e.clientX,
+      startScreenY: e.clientY,
+      startPan: { ...viewRef.current.pan },
+      moved: false
+    };
+  }, []);
+  const onPointerMove = useCallback(
+    (e) => {
+      const drag = dragRef.current;
+      if (!drag || drag.pointerId !== e.pointerId) return;
+      const dx = e.clientX - drag.startScreenX;
+      const dy = e.clientY - drag.startScreenY;
+      if (!drag.moved && Math.hypot(dx, dy) < DRAG_THRESHOLD) return;
+      drag.moved = true;
+      onViewChange({
+        zoom: viewRef.current.zoom,
+        pan: { x: drag.startPan.x + dx, y: drag.startPan.y + dy }
+      });
+    },
+    [onViewChange]
+  );
+  const onPointerUp = useCallback((e) => {
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== e.pointerId) return;
+    if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    }
+    dragRef.current = null;
+  }, []);
+  const isDragging = useCallback(() => dragRef.current?.moved === true, []);
+  return { onWheel, onPointerDown, onPointerMove, onPointerUp, isDragging };
+}
+function CanvasStack({
+  layers,
+  view,
+  onViewChange,
+  width = "100%",
+  height = "100%",
+  className,
+  onHitTest,
+  children
+}) {
+  const containerRef = useRef(null);
+  const canvasMap = useRef(/* @__PURE__ */ new Map());
+  const [size, setSize] = useState({ width: 0, height: 0, dpr: 1 });
+  const setCanvasRef = (id, el) => {
+    if (el) canvasMap.current.set(id, el);
+    else canvasMap.current.delete(id);
+  };
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const update = () => {
+      const rect = el.getBoundingClientRect();
+      const dpr = window.devicePixelRatio ?? 1;
+      setSize((prev) => {
+        if (prev.width === rect.width && prev.height === rect.height && prev.dpr === dpr) {
+          return prev;
+        }
+        return { width: rect.width, height: rect.height, dpr };
+      });
+    };
+    update();
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const handlers = usePanZoom({ view, onViewChange });
+  useLayerScheduler({ layers, view, canvasRefs: canvasMap, size });
+  const ctxValue = useMemo(() => ({ view }), [view]);
+  const containerStyle = { width, height };
+  const canvasPx = {
+    width: Math.max(0, Math.round(size.width * size.dpr)),
+    height: Math.max(0, Math.round(size.height * size.dpr))
+  };
+  const canvasCss = {
+    width: size.width,
+    height: size.height
+  };
+  const handlePointerUp = (e) => {
+    const wasDragging = handlers.isDragging();
+    handlers.onPointerUp(e);
+    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));
+    }
+  };
+  return /* @__PURE__ */ jsx(CanvasStackContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: className ? `lk-canvas-stack ${className}` : "lk-canvas-stack",
+      style: containerStyle,
+      onWheel: handlers.onWheel,
+      onPointerDown: handlers.onPointerDown,
+      onPointerMove: handlers.onPointerMove,
+      onPointerUp: handlePointerUp,
+      children: [
+        layers.map((layer) => /* @__PURE__ */ jsx(
+          "canvas",
+          {
+            ref: (el) => setCanvasRef(layer.id, el),
+            className: "lk-canvas-stack__canvas",
+            width: canvasPx.width,
+            height: canvasPx.height,
+            style: { ...canvasCss, display: layer.visible ? "block" : "none" }
+          },
+          layer.id
+        )),
+        /* @__PURE__ */ jsx("div", { className: "lk-canvas-stack__overlay", children })
+      ]
+    }
+  ) });
+}
+
+export { CanvasStack, screenToWorld, worldToScreen };
+//# sourceMappingURL=chunk-54IQ2DX7.js.map
+//# sourceMappingURL=chunk-54IQ2DX7.js.map

package/dist/chunk-54IQ2DX7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/canvas/canvasCoords.ts","../src/canvas/useLayerScheduler.ts","../src/canvas/usePanZoom.ts","../src/canvas/CanvasStack.tsx"],"names":["useRef","useEffect"],"mappings":"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","file":"chunk-54IQ2DX7.js","sourcesContent":["import type { Point, ViewTransform } from '../instrument/types';\n\nexport function worldToScreen(world: Point, view: ViewTransform): Point {\n  return {\n    x: world.x * view.zoom + view.pan.x,\n    y: world.y * view.zoom + view.pan.y,\n  };\n}\n\nexport function screenToWorld(screen: Point, view: ViewTransform): Point {\n  return {\n    x: (screen.x - view.pan.x) / view.zoom,\n    y: (screen.y - view.pan.y) / view.zoom,\n  };\n}\n","import { type RefObject, useEffect, useRef } from 'react';\nimport type { ViewTransform } from '../instrument/types';\n\nexport interface CanvasLayerDescriptor {\n  id: string;\n  visible: boolean;\n  render: (ctx: CanvasRenderingContext2D, view: ViewTransform) => void;\n}\n\ninterface SchedulerOptions {\n  layers: CanvasLayerDescriptor[];\n  view: ViewTransform;\n  canvasRefs: RefObject<Map<string, HTMLCanvasElement>>;\n  size: { width: number; height: number; dpr: number };\n}\n\nexport function useLayerScheduler({ layers, view, canvasRefs, size }: SchedulerOptions): void {\n  const dirty = useRef<Set<string>>(new Set());\n  const rafId = useRef<number | null>(null);\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, size, layers]);\n\n  useEffect(() => {\n    const tick = () => {\n      rafId.current = null;\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);\n        ctx.restore();\n      }\n      dirty.current.clear();\n    };\n    if (dirty.current.size > 0 && rafId.current === null) {\n      rafId.current = requestAnimationFrame(tick);\n    }\n    return () => {\n      if (rafId.current !== null) {\n        cancelAnimationFrame(rafId.current);\n        rafId.current = null;\n      }\n    };\n  });\n}\n","import { type PointerEvent, useCallback, useRef, type WheelEvent } from 'react';\nimport type { ViewTransform } from '../instrument/types';\n\nexport interface UsePanZoomOptions {\n  view: ViewTransform;\n  onViewChange: (v: ViewTransform) => void;\n  minZoom?: number;\n  maxZoom?: number;\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\nexport function usePanZoom({\n  view,\n  onViewChange,\n  minZoom = 0.1,\n  maxZoom = 32,\n}: UsePanZoomOptions): PanZoomHandlers {\n  const dragRef = useRef<DragState | null>(null);\n  const viewRef = useRef(view);\n  viewRef.current = view;\n\n  const onWheel = useCallback(\n    (e: WheelEvent<HTMLElement>) => {\n      e.preventDefault();\n      const rect = e.currentTarget.getBoundingClientRect();\n      const cursorX = e.clientX - rect.left;\n      const cursorY = e.clientY - rect.top;\n      const v = viewRef.current;\n      const factor = Math.exp(-e.deltaY * 0.001);\n      const nextZoom = Math.min(maxZoom, Math.max(minZoom, v.zoom * factor));\n      const ratio = nextZoom / v.zoom;\n      const nextPan = {\n        x: cursorX - (cursorX - v.pan.x) * ratio,\n        y: cursorY - (cursorY - v.pan.y) * ratio,\n      };\n      onViewChange({ zoom: nextZoom, pan: nextPan });\n    },\n    [onViewChange, minZoom, maxZoom],\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';\n\nexport interface CanvasStackProps {\n  layers: CanvasLayerDescriptor[];\n  view: ViewTransform;\n  onViewChange: (v: ViewTransform) => void;\n  width?: number | string;\n  height?: number | string;\n  className?: string;\n  onHitTest?: (worldPos: Point) => void;\n  children?: ReactNode;\n}\n\nexport function CanvasStack({\n  layers,\n  view,\n  onViewChange,\n  width = '100%',\n  height = '100%',\n  className,\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 handlers = usePanZoom({ view, onViewChange });\n  useLayerScheduler({ layers, view, canvasRefs: canvasMap, size });\n\n  const ctxValue = useMemo(() => ({ view }), [view]);\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));\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"]}