@canvas-harness/react 0.0.0

package/dist/index.js

@@ -0,0 +1,1653 @@
+import { createRenderer, DEFAULT_MINIMAP_MAX_NODES, renderMinimapContent, sceneBounds, drawMinimapViewport, worldViewportFromCamera, screenToWorld, hitTestAny, copy, cut, paste, createPalmRejectionState, createDefaultTextareaEditor, minimapScreenToWorld, notePenActive, shouldRejectTouch, notePenInactive, asEdgeId, midpointToCubicControls, projectToNodeBoundary, marqueeNodes, shouldAutoFit, computeAutoFitHeight, hitTestPoint, worldToNodeLocal, edgeLabelBoundsWorld, asNodeId, zoomAtScreenPoint, clampZoom, panByScreen } from '@canvas-harness/core';
+import { createContext, useContext, useRef, useState, useEffect, useSyncExternalStore } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/Canvas.tsx
+var CanvasContext = createContext(null);
+function CanvasProvider({ store, children }) {
+  return /* @__PURE__ */ jsx(CanvasContext.Provider, { value: store, children });
+}
+function useCanvasStore() {
+  const store = useContext(CanvasContext);
+  if (!store) {
+    throw new Error(
+      "useCanvasStore() must be used inside <CanvasProvider>. Wrap your tree with <CanvasProvider store={store}>."
+    );
+  }
+  return store;
+}
+function EditorMount({
+  store,
+  factory = createDefaultTextareaEditor
+}) {
+  const hostRef = useRef(null);
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host) return;
+    let activeAdapter = null;
+    let currentEditingKey = null;
+    const teardown = () => {
+      if (activeAdapter) {
+        activeAdapter.destroy();
+        activeAdapter = null;
+      }
+      currentEditingKey = null;
+    };
+    const onInteraction = () => {
+      const state = store.getInteractionState();
+      const target = state.mode === "editing" ? state.editingTarget : null;
+      const key = target ? `${target.kind}:${target.id}` : null;
+      if (key === currentEditingKey) return;
+      teardown();
+      if (!target) return;
+      let editorNode = null;
+      if (target.kind === "node") {
+        editorNode = store.getNode(target.id) ?? null;
+      } else {
+        const edge = store.getEdge(target.id);
+        const geom = store.getEdgeGeometry(target.id);
+        if (edge && geom) editorNode = synthesizeLabelNode(edge, geom);
+      }
+      if (!editorNode) return;
+      currentEditingKey = key;
+      activeAdapter = factory({
+        node: editorNode,
+        container: host,
+        camera: store.getCamera(),
+        dpr: window.devicePixelRatio || 1,
+        onCommit: (text) => {
+          store.commitEdit(text);
+        },
+        onCancel: () => {
+          store.cancelEdit();
+        }
+      });
+    };
+    onInteraction();
+    const unsub = store.subscribe("interaction", onInteraction);
+    return () => {
+      unsub();
+      teardown();
+    };
+  }, [store, factory]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: hostRef,
+      style: {
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none"
+        // Children (the textarea) re-enable pointer events themselves.
+      }
+    }
+  );
+}
+var synthesizeLabelNode = (edge, geom) => {
+  const labelStyle = { fontFamily: "handwriting", ...edge.style };
+  const bounds = edgeLabelBoundsWorld(edge, geom);
+  if (!bounds) {
+    if (geom.samples.length < 2) return null;
+    const mid = geom.samples[Math.floor(geom.samples.length / 2)];
+    return {
+      id: asNodeId(`__edge-label:${edge.id}`),
+      type: "text",
+      x: mid.x - 60,
+      y: mid.y - 12,
+      w: 120,
+      h: 24,
+      angle: 0,
+      z: 0,
+      groups: [],
+      content: "",
+      style: labelStyle
+    };
+  }
+  return {
+    id: asNodeId(`__edge-label:${edge.id}`),
+    type: "text",
+    x: bounds.x,
+    y: bounds.y,
+    w: bounds.w,
+    h: bounds.h,
+    angle: 0,
+    z: 0,
+    groups: [],
+    content: edge.content ?? "",
+    style: { ...labelStyle, autoFit: false }
+    // labels don't autofit height
+  };
+};
+var CLICK_MAX_PIXELS = 4;
+var useArrowTool = (ref, store, enabled, defaults) => {
+  const defaultsRef = useRef(defaults);
+  defaultsRef.current = defaults;
+  useEffect(() => {
+    if (!enabled) return;
+    const el = ref.current;
+    if (!el) return;
+    let pointerDownAt = null;
+    let active = false;
+    let sourceEnd = null;
+    const screenFromEvent = (e) => {
+      const rect = el.getBoundingClientRect();
+      return { x: e.clientX - rect.left, y: e.clientY - rect.top };
+    };
+    const worldFromEvent = (e) => screenToWorld(screenFromEvent(e), store.getCamera());
+    const endFromWorldPoint = (world) => {
+      const hit = hitTestPoint(store, world, store.getCamera().z);
+      if (hit && hit.kind === "body") {
+        const node = store.getNode(hit.nodeId);
+        const localOffset = projectToNodeBoundary(world, node);
+        return { end: { nodeId: node.id, localOffset }, nodeId: node.id };
+      }
+      return { end: { worldPoint: world }, nodeId: null };
+    };
+    const followingEnd = (world) => {
+      const hit = hitTestPoint(store, world, store.getCamera().z);
+      if (hit && hit.kind === "body") {
+        const node = store.getNode(hit.nodeId);
+        const local = worldToNodeLocal(world, node);
+        const clamped = {
+          x: Math.max(0, Math.min(node.w, local.x)),
+          y: Math.max(0, Math.min(node.h, local.y))
+        };
+        return { end: { nodeId: node.id, localOffset: clamped }, nodeId: node.id };
+      }
+      return { end: { worldPoint: world }, nodeId: null };
+    };
+    const onPointerDown = (e) => {
+      if (e.button !== 0) return;
+      pointerDownAt = screenFromEvent(e);
+      const world = worldFromEvent(e);
+      const { end } = endFromWorldPoint(world);
+      sourceEnd = end;
+      el.setPointerCapture(e.pointerId);
+      e.preventDefault();
+    };
+    const onPointerMove = (e) => {
+      if (!pointerDownAt || !sourceEnd) return;
+      const screen = screenFromEvent(e);
+      const dx = screen.x - pointerDownAt.x;
+      const dy = screen.y - pointerDownAt.y;
+      if (!active && Math.abs(dx) < CLICK_MAX_PIXELS && Math.abs(dy) < CLICK_MAX_PIXELS) return;
+      active = true;
+      const world = worldFromEvent(e);
+      const { end: target, nodeId: snapTargetNodeId } = followingEnd(world);
+      store.setInteractionState({
+        mode: "creating-edge",
+        draftEdge: {
+          source: sourceEnd,
+          target,
+          reconnectingId: null,
+          snapTargetNodeId
+        }
+      });
+    };
+    const onPointerUp = (e) => {
+      if (!pointerDownAt) return;
+      if (el.hasPointerCapture(e.pointerId)) el.releasePointerCapture(e.pointerId);
+      const wasActive = active;
+      if (wasActive && sourceEnd) {
+        const world = worldFromEvent(e);
+        const { end: target } = endFromWorldPoint(world);
+        const d = defaultsRef.current;
+        store.addEdge({
+          id: asEdgeId(store.generateId()),
+          source: sourceEnd,
+          target,
+          pathStyle: d?.pathStyle ?? "bezier",
+          z: 0,
+          groups: [],
+          ...d?.style ? { style: d.style } : {}
+        });
+      }
+      store.resetInteractionState();
+      pointerDownAt = null;
+      active = false;
+      sourceEnd = null;
+    };
+    const onPointerCancel = (e) => {
+      if (el.hasPointerCapture(e.pointerId)) el.releasePointerCapture(e.pointerId);
+      store.resetInteractionState();
+      pointerDownAt = null;
+      active = false;
+      sourceEnd = null;
+    };
+    el.addEventListener("pointerdown", onPointerDown);
+    el.addEventListener("pointermove", onPointerMove);
+    el.addEventListener("pointerup", onPointerUp);
+    el.addEventListener("pointercancel", onPointerCancel);
+    return () => {
+      el.removeEventListener("pointerdown", onPointerDown);
+      el.removeEventListener("pointermove", onPointerMove);
+      el.removeEventListener("pointerup", onPointerUp);
+      el.removeEventListener("pointercancel", onPointerCancel);
+    };
+  }, [ref, store, enabled]);
+};
+var CLICK_MAX_PIXELS2 = 4;
+var LONG_PRESS_MS = 500;
+var LONG_PRESS_MAX_MOVE_PX = 10;
+var useInteractionGesture = (ref, store, tool) => {
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (tool !== "select") return;
+    let pointerDownAt = null;
+    let activeGesture = "idle";
+    let resizeHandle = null;
+    let dragOriginals = [];
+    let marqueeStartWorld = null;
+    let marqueeShift = false;
+    let reconnectEdgeId = null;
+    let reconnectEnd = null;
+    let midpointEdgeId = null;
+    let rotateNodeId = null;
+    let rotateOriginAngle = 0;
+    let rotatePointerStartAngle = 0;
+    const palm = createPalmRejectionState();
+    let longPressTimer = null;
+    const clearLongPress = () => {
+      if (longPressTimer !== null) {
+        clearTimeout(longPressTimer);
+        longPressTimer = null;
+      }
+    };
+    const screenFromEvent = (e) => {
+      const rect = el.getBoundingClientRect();
+      return { x: e.clientX - rect.left, y: e.clientY - rect.top };
+    };
+    const worldFromEvent = (e) => screenToWorld(screenFromEvent(e), store.getCamera());
+    const snapshotOriginals = (ids) => {
+      const result = [];
+      for (const id of ids) {
+        const n = store.getNode(id);
+        if (n) result.push({ id, x: n.x, y: n.y, w: n.w, h: n.h, angle: n.angle });
+      }
+      return result;
+    };
+    const beginDrag = (ids) => {
+      dragOriginals = snapshotOriginals(ids);
+      store.setInteractionState({
+        mode: "dragging",
+        draggedIds: ids,
+        dragOriginals,
+        dragDelta: { x: 0, y: 0 }
+      });
+    };
+    const beginResize = (id, handle) => {
+      dragOriginals = snapshotOriginals([id]);
+      store.setInteractionState({
+        mode: "resizing",
+        draggedIds: [id],
+        dragOriginals,
+        resizeHandle: handle,
+        resizeLockAspect: false,
+        resizeFromCenter: false
+      });
+    };
+    const pointerAngleFromCenter = (node, world) => {
+      const cx = node.x + node.w / 2;
+      const cy = node.y + node.h / 2;
+      return Math.atan2(world.y - cy, world.x - cx);
+    };
+    const beginRotate = (id, worldAtStart) => {
+      const node = store.getNode(id);
+      if (!node) return;
+      rotateNodeId = id;
+      rotateOriginAngle = node.angle;
+      rotatePointerStartAngle = pointerAngleFromCenter(node, worldAtStart);
+      store.setInteractionState({
+        mode: "rotating",
+        draggedIds: [id]
+      });
+    };
+    const ROTATE_SNAP_RAD = 15 * Math.PI / 180;
+    const updateRotate = (worldPoint, shift) => {
+      if (!rotateNodeId) return;
+      const node = store.getNode(rotateNodeId);
+      if (!node) return;
+      const pointerAngle = pointerAngleFromCenter(node, worldPoint);
+      const delta = pointerAngle - rotatePointerStartAngle;
+      let next = rotateOriginAngle + delta;
+      if (shift) next = Math.round(next / ROTATE_SNAP_RAD) * ROTATE_SNAP_RAD;
+      store.updateNode(rotateNodeId, { angle: next });
+    };
+    const commitRotate = () => {
+      rotateNodeId = null;
+      store.resetInteractionState();
+    };
+    const updateDrag = (delta) => {
+      store.setInteractionState({ dragDelta: delta });
+    };
+    const updateResize = (worldPoint, modifiers) => {
+      const orig = dragOriginals[0];
+      if (!orig || !resizeHandle) return;
+      const next = computeResizeGeometry(orig, resizeHandle, worldPoint, modifiers);
+      store.updateNode(orig.id, next);
+      store.setInteractionState({
+        resizeLockAspect: modifiers.shift,
+        resizeFromCenter: modifiers.alt
+      });
+    };
+    const commitDrag = () => {
+      const interaction = store.getInteractionState();
+      const delta = interaction.dragDelta;
+      if (delta.x !== 0 || delta.y !== 0) {
+        store.batch(() => {
+          for (const orig of dragOriginals) {
+            store.updateNode(orig.id, { x: orig.x + delta.x, y: orig.y + delta.y });
+          }
+        });
+      }
+      store.resetInteractionState();
+    };
+    const commitResize = () => {
+      const selected = store.getSelection();
+      for (const id of selected) {
+        const node = store.getNode(id);
+        if (!node) continue;
+        if (!shouldAutoFit(node)) continue;
+        const fitted = computeAutoFitHeight(node);
+        if (fitted > node.h) store.updateNode(node.id, { h: fitted });
+      }
+      store.resetInteractionState();
+    };
+    const beginMarquee = (start, shift) => {
+      marqueeStartWorld = start;
+      marqueeShift = shift;
+      store.setInteractionState({
+        mode: "marqueeing",
+        marqueeRect: { x: start.x, y: start.y, w: 0, h: 0 },
+        marqueeAdditive: shift
+      });
+    };
+    const updateMarquee = (current) => {
+      if (!marqueeStartWorld) return;
+      const rect = {
+        x: Math.min(marqueeStartWorld.x, current.x),
+        y: Math.min(marqueeStartWorld.y, current.y),
+        w: Math.abs(current.x - marqueeStartWorld.x),
+        h: Math.abs(current.y - marqueeStartWorld.y)
+      };
+      store.setInteractionState({ marqueeRect: rect });
+    };
+    const commitMarquee = () => {
+      const interaction = store.getInteractionState();
+      const rect = interaction.marqueeRect;
+      if (rect && (rect.w > 0 || rect.h > 0)) {
+        const hits = marqueeNodes(store, rect);
+        if (marqueeShift) {
+          const existing = new Set(store.getSelection());
+          for (const id of hits) existing.add(id);
+          store.setSelection([...existing]);
+        } else {
+          store.setSelection(hits);
+        }
+      }
+      store.resetInteractionState();
+    };
+    const onPointerDown = (e) => {
+      if (e.button !== 0) return;
+      if (e.pointerType === "pen") notePenActive(palm);
+      else if (e.pointerType === "touch" && shouldRejectTouch(palm, Date.now())) return;
+      pointerDownAt = screenFromEvent(e);
+      const world = worldFromEvent(e);
+      const camera = store.getCamera();
+      const selection = store.getSelection();
+      const selectedNodeIds = /* @__PURE__ */ new Set();
+      const selectedEdgeIds = /* @__PURE__ */ new Set();
+      for (const id of selection) {
+        if (store.getNode(id)) selectedNodeIds.add(id);
+        else if (store.getEdge(id)) selectedEdgeIds.add(id);
+      }
+      const hit = hitTestAny(store, world, camera.z, selectedNodeIds, selectedEdgeIds);
+      if (hit?.kind === "rotate-handle") {
+        activeGesture = "rotate";
+        beginRotate(hit.nodeId, world);
+        el.setPointerCapture(e.pointerId);
+        e.preventDefault();
+        return;
+      }
+      if (hit?.kind === "resize-handle") {
+        resizeHandle = hit.handle;
+        activeGesture = "resize";
+        beginResize(hit.nodeId, hit.handle);
+        el.setPointerCapture(e.pointerId);
+        e.preventDefault();
+        return;
+      }
+      if (hit?.kind === "midpoint-handle") {
+        midpointEdgeId = hit.edgeId;
+        activeGesture = "edge-midpoint";
+        el.setPointerCapture(e.pointerId);
+        e.preventDefault();
+        return;
+      }
+      if (hit?.kind === "source-handle" || hit?.kind === "target-handle") {
+        reconnectEdgeId = hit.edgeId;
+        reconnectEnd = hit.kind === "source-handle" ? "source" : "target";
+        activeGesture = "reconnect-edge";
+        const edge = store.getEdge(hit.edgeId);
+        if (edge) {
+          store.setInteractionState({
+            mode: "reconnecting-edge",
+            draftEdge: {
+              source: edge.source,
+              target: edge.target,
+              reconnectingId: hit.edgeId,
+              snapTargetNodeId: null
+            }
+          });
+        }
+        el.setPointerCapture(e.pointerId);
+        e.preventDefault();
+        return;
+      }
+      if (hit?.kind === "body" && "nodeId" in hit) {
+        const alreadySelected = selectedNodeIds.has(hit.nodeId);
+        if (e.shiftKey) {
+          const next = new Set(selectedNodeIds);
+          if (alreadySelected) next.delete(hit.nodeId);
+          else next.add(hit.nodeId);
+          store.setSelection([...next]);
+        } else if (!alreadySelected) {
+          store.setSelection([hit.nodeId]);
+        }
+        activeGesture = "click-pending";
+        el.setPointerCapture(e.pointerId);
+        if (e.pointerType === "touch") {
+          const targetIds = e.shiftKey ? [...selectedNodeIds, hit.nodeId] : [hit.nodeId];
+          clearLongPress();
+          longPressTimer = setTimeout(() => {
+            longPressTimer = null;
+            if (activeGesture !== "click-pending") return;
+            activeGesture = "drag";
+            beginDrag(targetIds);
+          }, LONG_PRESS_MS);
+        }
+        e.preventDefault();
+        return;
+      }
+      if (hit?.kind === "body" && "edgeId" in hit) {
+        if (e.shiftKey) {
+          const next = new Set(selectedEdgeIds);
+          if (selectedEdgeIds.has(hit.edgeId)) next.delete(hit.edgeId);
+          else next.add(hit.edgeId);
+          store.setSelection([...selectedNodeIds, ...next]);
+        } else {
+          store.setSelection([hit.edgeId]);
+        }
+        activeGesture = "click-pending";
+        el.setPointerCapture(e.pointerId);
+        e.preventDefault();
+        return;
+      }
+      if (!e.shiftKey) store.setSelection([]);
+      activeGesture = "click-pending";
+      el.setPointerCapture(e.pointerId);
+    };
+    const onPointerMove = (e) => {
+      if (!pointerDownAt) return;
+      const screen = screenFromEvent(e);
+      const dx = screen.x - pointerDownAt.x;
+      const dy = screen.y - pointerDownAt.y;
+      if (longPressTimer !== null && (Math.abs(dx) > LONG_PRESS_MAX_MOVE_PX || Math.abs(dy) > LONG_PRESS_MAX_MOVE_PX)) {
+        clearLongPress();
+      }
+      if (activeGesture === "click-pending") {
+        if (Math.abs(dx) < CLICK_MAX_PIXELS2 && Math.abs(dy) < CLICK_MAX_PIXELS2) return;
+        const startWorld = screenToWorld(pointerDownAt, store.getCamera());
+        const camera = store.getCamera();
+        const selectedIds = new Set(
+          store.getSelection().filter((id) => store.getNode(id))
+        );
+        const hit = hitTestAny(store, startWorld, camera.z, selectedIds, /* @__PURE__ */ new Set());
+        if (hit?.kind === "body" && "nodeId" in hit && selectedIds.has(hit.nodeId)) {
+          activeGesture = "drag";
+          beginDrag([...selectedIds]);
+        } else {
+          activeGesture = "marquee";
+          beginMarquee(startWorld, e.shiftKey);
+        }
+      }
+      if (activeGesture === "drag") {
+        const camera = store.getCamera();
+        updateDrag({ x: dx / camera.z, y: dy / camera.z });
+      } else if (activeGesture === "resize") {
+        const world = worldFromEvent(e);
+        updateResize(world, { shift: e.shiftKey, alt: e.altKey });
+      } else if (activeGesture === "rotate") {
+        updateRotate(worldFromEvent(e), e.shiftKey);
+      } else if (activeGesture === "marquee") {
+        updateMarquee(worldFromEvent(e));
+      } else if (activeGesture === "reconnect-edge" && reconnectEdgeId && reconnectEnd) {
+        updateReconnect(worldFromEvent(e));
+      } else if (activeGesture === "edge-midpoint" && midpointEdgeId) {
+        updateEdgeMidpoint(worldFromEvent(e));
+      }
+    };
+    const updateEdgeMidpoint = (world) => {
+      if (!midpointEdgeId) return;
+      const geom = store.getEdgeGeometry(midpointEdgeId);
+      if (!geom) return;
+      const { c1, c2 } = midpointToCubicControls(geom.source, world, geom.target);
+      store.updateEdge(midpointEdgeId, { control: [c1, c2] });
+    };
+    const updateReconnect = (world) => {
+      if (!reconnectEdgeId || !reconnectEnd) return;
+      const edge = store.getEdge(reconnectEdgeId);
+      if (!edge) return;
+      const camera = store.getCamera();
+      const newEnd = followingEnd(world, camera.z);
+      const draftSource = reconnectEnd === "source" ? newEnd.end : edge.source;
+      const draftTarget = reconnectEnd === "target" ? newEnd.end : edge.target;
+      store.setInteractionState({
+        mode: "reconnecting-edge",
+        draftEdge: {
+          source: draftSource,
+          target: draftTarget,
+          reconnectingId: reconnectEdgeId,
+          snapTargetNodeId: newEnd.nodeId
+        }
+      });
+    };
+    const followingEnd = (world, cameraZ) => {
+      const hit = hitTestAny(store, world, cameraZ);
+      if (hit?.kind === "body" && "nodeId" in hit) {
+        const node = store.getNode(hit.nodeId);
+        if (node) {
+          const local = worldToNodeLocal(world, node);
+          const clamped = {
+            x: Math.max(0, Math.min(node.w, local.x)),
+            y: Math.max(0, Math.min(node.h, local.y))
+          };
+          return { end: { nodeId: node.id, localOffset: clamped }, nodeId: node.id };
+        }
+      }
+      return { end: { worldPoint: world }, nodeId: null };
+    };
+    const commitReconnect = (e) => {
+      if (!reconnectEdgeId || !reconnectEnd) return;
+      const world = worldFromEvent(e);
+      const hit = hitTestAny(store, world, store.getCamera().z);
+      let newEnd;
+      if (hit?.kind === "body" && "nodeId" in hit) {
+        const node = store.getNode(hit.nodeId);
+        if (node) {
+          const localOffset = projectToNodeBoundary(world, node);
+          newEnd = { nodeId: node.id, localOffset };
+        } else {
+          newEnd = { worldPoint: world };
+        }
+      } else {
+        newEnd = { worldPoint: world };
+      }
+      store.updateEdge(
+        reconnectEdgeId,
+        reconnectEnd === "source" ? { source: newEnd } : { target: newEnd }
+      );
+      store.resetInteractionState();
+    };
+    const onPointerUp = (e) => {
+      if (e.pointerType === "pen") notePenInactive(palm, Date.now());
+      clearLongPress();
+      if (!pointerDownAt) return;
+      if (el.hasPointerCapture(e.pointerId)) el.releasePointerCapture(e.pointerId);
+      switch (activeGesture) {
+        case "drag":
+          commitDrag();
+          break;
+        case "resize":
+          commitResize();
+          break;
+        case "rotate":
+          commitRotate();
+          break;
+        case "marquee":
+          commitMarquee();
+          break;
+        case "reconnect-edge":
+          commitReconnect(e);
+          break;
+      }
+      pointerDownAt = null;
+      activeGesture = "idle";
+      resizeHandle = null;
+      dragOriginals = [];
+      marqueeStartWorld = null;
+      reconnectEdgeId = null;
+      midpointEdgeId = null;
+      reconnectEnd = null;
+    };
+    const onKeyDown = (e) => {
+      const target = e.target;
+      if (target && (target.tagName === "TEXTAREA" || target.tagName === "INPUT" || target.isContentEditable))
+        return;
+      if (e.key === "Escape") {
+        store.setSelection([]);
+        store.resetInteractionState();
+      }
+      if ((e.key === "Delete" || e.key === "Backspace") && store.getSelection().length > 0) {
+        const ids = store.getSelection();
+        store.batch(() => {
+          for (const id of ids) {
+            if (store.getNode(id)) store.removeNode(id);
+            else if (store.getEdge(id)) store.removeEdge(id);
+          }
+        });
+        store.setSelection([]);
+      }
+    };
+    el.addEventListener("pointerdown", onPointerDown);
+    el.addEventListener("pointermove", onPointerMove);
+    el.addEventListener("pointerup", onPointerUp);
+    el.addEventListener("pointercancel", onPointerUp);
+    window.addEventListener("keydown", onKeyDown);
+    return () => {
+      el.removeEventListener("pointerdown", onPointerDown);
+      el.removeEventListener("pointermove", onPointerMove);
+      el.removeEventListener("pointerup", onPointerUp);
+      el.removeEventListener("pointercancel", onPointerUp);
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, [ref, store, tool]);
+};
+var computeResizeGeometry = (orig, handle, pointer, modifiers) => {
+  let x = orig.x;
+  let y = orig.y;
+  let w = orig.w;
+  let h = orig.h;
+  const rightFixed = handle === "nw" || handle === "w" || handle === "sw";
+  const leftFixed = handle === "ne" || handle === "e" || handle === "se";
+  const bottomFixed = handle === "nw" || handle === "n" || handle === "ne";
+  const topFixed = handle === "sw" || handle === "s" || handle === "se";
+  if (rightFixed) {
+    const right = orig.x + orig.w;
+    w = Math.max(1, right - pointer.x);
+    x = right - w;
+  } else if (leftFixed) {
+    w = Math.max(1, pointer.x - orig.x);
+  }
+  if (bottomFixed) {
+    const bottom = orig.y + orig.h;
+    h = Math.max(1, bottom - pointer.y);
+    y = bottom - h;
+  } else if (topFixed) {
+    h = Math.max(1, pointer.y - orig.y);
+  }
+  if (modifiers.shift) {
+    const targetAspect = orig.w / orig.h;
+    const currentAspect = w / h;
+    if (currentAspect > targetAspect) {
+      w = h * targetAspect;
+      if (rightFixed) x = orig.x + orig.w - w;
+    } else {
+      h = w / targetAspect;
+      if (bottomFixed) y = orig.y + orig.h - h;
+    }
+  }
+  if (modifiers.alt) {
+    const cx = orig.x + orig.w / 2;
+    const cy = orig.y + orig.h / 2;
+    if (handle !== "n" && handle !== "s") {
+      w = Math.max(1, w * 2 - orig.w + (orig.w - Math.abs(orig.w - w * 0)));
+      const newW = Math.abs(pointer.x - cx) * 2;
+      w = Math.max(1, newW);
+      x = cx - w / 2;
+    }
+    if (handle !== "e" && handle !== "w") {
+      const newH = Math.abs(pointer.y - cy) * 2;
+      h = Math.max(1, newH);
+      y = cy - h / 2;
+    }
+  }
+  return { x, y, w, h };
+};
+var useOverlayHost = () => {
+  const [mountedIds, setMountedIds] = useState([]);
+  useEffect(() => {
+  }, []);
+  return { mountedIds, setMountedIds };
+};
+var usePanZoom = (ref, store) => {
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    let panning = false;
+    let panActivatedBySpace = false;
+    let lastX = 0;
+    let lastY = 0;
+    let pendingDx = 0;
+    let pendingDy = 0;
+    let pendingZoomFactor = 1;
+    let pendingZoomAnchor = null;
+    let scheduled = false;
+    let rafId = 0;
+    const MOTION_RESET_MS = 150;
+    let motionEndDeadline = 0;
+    let motionEndPolling = false;
+    const setMotion = (mode) => {
+      const current = store.getInteractionState().mode;
+      if (mode === null) {
+        if (current === "panning" || current === "zooming") {
+          store.setInteractionState({ mode: "idle" });
+        }
+        return;
+      }
+      if (current !== "idle" && current !== "panning" && current !== "zooming") return;
+      if (current !== mode) store.setInteractionState({ mode });
+    };
+    const pollMotionEnd = () => {
+      if (performance.now() >= motionEndDeadline) {
+        motionEndPolling = false;
+        setMotion(null);
+        return;
+      }
+      requestAnimationFrame(pollMotionEnd);
+    };
+    const pulseMotion = (mode) => {
+      motionEndDeadline = performance.now() + MOTION_RESET_MS;
+      const current = store.getInteractionState().mode;
+      if (current !== mode) setMotion(mode);
+      if (!motionEndPolling) {
+        motionEndPolling = true;
+        requestAnimationFrame(pollMotionEnd);
+      }
+    };
+    const activeTouches = /* @__PURE__ */ new Map();
+    let lastPinchDistance = 0;
+    let lastPinchMidpoint = null;
+    const palm = createPalmRejectionState();
+    const flushPending = () => {
+      scheduled = false;
+      rafId = 0;
+      if (pendingZoomFactor !== 1 && pendingZoomAnchor) {
+        const camera = store.getCamera();
+        store.setCamera(
+          zoomAtScreenPoint(camera, clampZoom(camera.z * pendingZoomFactor), pendingZoomAnchor)
+        );
+        pendingZoomFactor = 1;
+        pendingZoomAnchor = null;
+      }
+      if (pendingDx !== 0 || pendingDy !== 0) {
+        const camera = store.getCamera();
+        store.setCamera(panByScreen(camera, { x: pendingDx, y: pendingDy }));
+        pendingDx = 0;
+        pendingDy = 0;
+      }
+    };
+    const schedule = () => {
+      if (scheduled) return;
+      scheduled = true;
+      rafId = requestAnimationFrame(flushPending);
+    };
+    const isEditing = () => store.getInteractionState().mode === "editing";
+    const screenFromClient = (clientX, clientY) => {
+      const rect = el.getBoundingClientRect();
+      return { x: clientX - rect.left, y: clientY - rect.top };
+    };
+    const updatePointerInfo = (e) => {
+      const { x: sx, y: sy } = screenFromClient(e.clientX, e.clientY);
+      const camera = store.getCamera();
+      store.setInteractionState({
+        pointer: {
+          worldX: sx / camera.z + camera.x,
+          worldY: sy / camera.z + camera.y,
+          screenX: sx,
+          screenY: sy,
+          pointerType: e.pointerType,
+          pressure: e.pointerType === "pen" ? e.pressure : void 0
+        }
+      });
+    };
+    const onWheel = (e) => {
+      if (isEditing()) return;
+      e.preventDefault();
+      if (e.ctrlKey || e.metaKey) {
+        const factor = Math.exp(-e.deltaY * 0.01);
+        pendingZoomFactor *= factor;
+        pendingZoomAnchor = screenFromClient(e.clientX, e.clientY);
+        pulseMotion("zooming");
+      } else {
+        pendingDx += -e.deltaX;
+        pendingDy += -e.deltaY;
+        pulseMotion("panning");
+      }
+      schedule();
+    };
+    const resetPinchTracking = () => {
+      lastPinchDistance = 0;
+      lastPinchMidpoint = null;
+    };
+    const recomputePinchSeed = () => {
+      const pts = [...activeTouches.values()];
+      if (pts.length !== 2) {
+        resetPinchTracking();
+        return;
+      }
+      const [a, b] = pts;
+      lastPinchDistance = Math.hypot(a.x - b.x, a.y - b.y);
+      lastPinchMidpoint = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+    };
+    const onPointerDown = (e) => {
+      if (isEditing()) return;
+      if (e.pointerType === "pen") {
+        notePenActive(palm);
+      } else if (e.pointerType === "touch" && shouldRejectTouch(palm, Date.now())) {
+        return;
+      }
+      if (e.pointerType === "touch") {
+        const pt = screenFromClient(e.clientX, e.clientY);
+        activeTouches.set(e.pointerId, { id: e.pointerId, x: pt.x, y: pt.y });
+        if (activeTouches.size === 2) {
+          recomputePinchSeed();
+          el.setPointerCapture(e.pointerId);
+          setMotion("zooming");
+          e.preventDefault();
+        }
+        return;
+      }
+      if (e.button === 1 || e.button === 0 && panActivatedBySpace) {
+        panning = true;
+        lastX = e.clientX;
+        lastY = e.clientY;
+        el.setPointerCapture(e.pointerId);
+        setMotion("panning");
+        e.preventDefault();
+      }
+    };
+    const onPointerMove = (e) => {
+      updatePointerInfo(e);
+      if (e.pointerType === "touch" && activeTouches.has(e.pointerId)) {
+        const pt = screenFromClient(e.clientX, e.clientY);
+        activeTouches.set(e.pointerId, { id: e.pointerId, x: pt.x, y: pt.y });
+        if (activeTouches.size === 2 && lastPinchMidpoint && lastPinchDistance > 0) {
+          const pts = [...activeTouches.values()];
+          const [a, b] = pts;
+          const dist = Math.hypot(a.x - b.x, a.y - b.y);
+          const mid = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+          const factor = dist / lastPinchDistance;
+          if (Number.isFinite(factor) && factor > 0) {
+            pendingZoomFactor *= factor;
+            pendingZoomAnchor = mid;
+          }
+          pendingDx += mid.x - lastPinchMidpoint.x;
+          pendingDy += mid.y - lastPinchMidpoint.y;
+          lastPinchDistance = dist;
+          lastPinchMidpoint = mid;
+          schedule();
+        }
+        return;
+      }
+      if (!panning) return;
+      const dx = e.clientX - lastX;
+      const dy = e.clientY - lastY;
+      lastX = e.clientX;
+      lastY = e.clientY;
+      pendingDx += dx;
+      pendingDy += dy;
+      schedule();
+    };
+    const onPointerUp = (e) => {
+      if (e.pointerType === "pen") notePenInactive(palm, Date.now());
+      if (e.pointerType === "touch" && activeTouches.has(e.pointerId)) {
+        activeTouches.delete(e.pointerId);
+        if (el.hasPointerCapture(e.pointerId)) el.releasePointerCapture(e.pointerId);
+        if (activeTouches.size === 2) recomputePinchSeed();
+        else {
+          resetPinchTracking();
+          setMotion(null);
+        }
+        return;
+      }
+      if (!panning) return;
+      panning = false;
+      if (el.hasPointerCapture(e.pointerId)) el.releasePointerCapture(e.pointerId);
+      setMotion(null);
+    };
+    const onPointerCancel = (e) => {
+      if (e.pointerType === "touch") {
+        activeTouches.delete(e.pointerId);
+        if (activeTouches.size < 2) {
+          resetPinchTracking();
+          setMotion(null);
+        }
+      }
+      if (panning) {
+        panning = false;
+        setMotion(null);
+      }
+      if (e.pointerType === "pen") notePenInactive(palm, Date.now());
+    };
+    const onKeyDown = (e) => {
+      if (e.code === "Space") panActivatedBySpace = true;
+    };
+    const onKeyUp = (e) => {
+      if (e.code === "Space") panActivatedBySpace = false;
+    };
+    el.addEventListener("wheel", onWheel, { passive: false });
+    el.addEventListener("pointerdown", onPointerDown);
+    el.addEventListener("pointermove", onPointerMove);
+    el.addEventListener("pointerup", onPointerUp);
+    el.addEventListener("pointercancel", onPointerCancel);
+    window.addEventListener("keydown", onKeyDown);
+    window.addEventListener("keyup", onKeyUp);
+    return () => {
+      el.removeEventListener("wheel", onWheel);
+      el.removeEventListener("pointerdown", onPointerDown);
+      el.removeEventListener("pointermove", onPointerMove);
+      el.removeEventListener("pointerup", onPointerUp);
+      el.removeEventListener("pointercancel", onPointerCancel);
+      window.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener("keyup", onKeyUp);
+      if (rafId !== 0) cancelAnimationFrame(rafId);
+    };
+  }, [ref, store]);
+};
+var useResizeObserver = (ref) => {
+  const [size, setSize] = useState({ w: 0, h: 0 });
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const ro = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      const { width, height } = entry.contentRect;
+      setSize({ w: Math.round(width), h: Math.round(height) });
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [ref]);
+  return size;
+};
+function Canvas(props) {
+  if (props.store) {
+    return /* @__PURE__ */ jsx(CanvasProvider, { store: props.store, children: /* @__PURE__ */ jsx(CanvasSurface, { ...props }) });
+  }
+  return /* @__PURE__ */ jsx(CanvasSurface, { ...props });
+}
+var DRAG_CREATE_MIN_SIZE_PX = 5;
+function CanvasSurface({
+  tool,
+  theme,
+  editorAdapter,
+  onRenderer,
+  onClick,
+  onDoubleClick,
+  onCreateDrag,
+  arrowDefaults,
+  background,
+  renderCustomNodeView,
+  children
+}) {
+  const store = useCanvasStore();
+  const wrapRef = useRef(null);
+  const staticRef = useRef(null);
+  const interactiveRef = useRef(null);
+  const overlayRef = useRef(null);
+  const rendererRef = useRef(null);
+  const toolRef = useRef(tool);
+  toolRef.current = tool;
+  const { w, h } = useResizeObserver(wrapRef);
+  usePanZoom(wrapRef, store);
+  useInteractionGesture(wrapRef, store, tool);
+  useArrowTool(wrapRef, store, tool === "arrow", arrowDefaults);
+  const { mountedIds, setMountedIds } = useOverlayHost();
+  const [camera, setCamera] = useState(() => store.getCamera());
+  useEffect(() => store.subscribe("camera", (c) => setCamera({ ...c })), [store]);
+  useEffect(() => {
+    if (!staticRef.current || !interactiveRef.current || w === 0 || h === 0) return;
+    if (rendererRef.current) {
+      rendererRef.current.setSize(w, h);
+      return;
+    }
+    const r = createRenderer({
+      store,
+      staticCanvas: staticRef.current,
+      interactiveCanvas: interactiveRef.current,
+      theme,
+      width: w,
+      height: h,
+      background,
+      onOverlayChange: (ids) => setMountedIds(ids)
+    });
+    r.start();
+    rendererRef.current = r;
+    onRenderer?.(r);
+    return () => {
+      r.dispose();
+      rendererRef.current = null;
+    };
+  }, [store, theme, w, h, onRenderer, setMountedIds]);
+  useEffect(() => {
+    rendererRef.current?.setBackground(background);
+  }, [background]);
+  useEffect(() => {
+    const el = wrapRef.current;
+    if (!el) return;
+    const dispatch = (e, cb) => {
+      if (!cb) return;
+      const rect = el.getBoundingClientRect();
+      const screen = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+      const world = screenToWorld(screen, store.getCamera());
+      cb({ screen, world, tool: toolRef.current, native: e });
+    };
+    const onClickHandler = (e) => dispatch(e, onClick);
+    const onDoubleClickHandler = (e) => {
+      if (toolRef.current === "select") {
+        const rect = el.getBoundingClientRect();
+        const screen = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+        const camera2 = store.getCamera();
+        const world = screenToWorld(screen, camera2);
+        const hit = hitTestAny(store, world, camera2.z);
+        if (hit && hit.kind === "body" && "nodeId" in hit) {
+          store.beginEdit(hit.nodeId);
+        } else if (hit && hit.kind === "body" && "edgeId" in hit) {
+          store.beginEdit(hit.edgeId);
+        } else if (hit && hit.kind === "label") {
+          store.beginEdit(hit.edgeId);
+        } else if (hit && hit.kind === "midpoint-handle") {
+          store.updateEdge(hit.edgeId, { control: void 0 });
+        }
+      }
+      dispatch(e, onDoubleClick);
+    };
+    el.addEventListener("click", onClickHandler);
+    el.addEventListener("dblclick", onDoubleClickHandler);
+    return () => {
+      el.removeEventListener("click", onClickHandler);
+      el.removeEventListener("dblclick", onDoubleClickHandler);
+    };
+  }, [store, onClick, onDoubleClick]);
+  useEffect(() => {
+    const el = wrapRef.current;
+    if (!el || !onCreateDrag) return;
+    let startWorld = null;
+    let startScreen = null;
+    let activePointerId = null;
+    let committed = false;
+    const justCommittedRef = { current: false };
+    const screenFromEvent = (e) => {
+      const rect = el.getBoundingClientRect();
+      return { x: e.clientX - rect.left, y: e.clientY - rect.top };
+    };
+    const worldFromEvent = (e) => screenToWorld(screenFromEvent(e), store.getCamera());
+    const isShapeTool = (t) => t !== "select" && t !== "arrow" && t !== "text";
+    const onPointerDown = (e) => {
+      if (e.button !== 0) return;
+      if (!isShapeTool(toolRef.current)) return;
+      if (store.getInteractionState().mode === "editing") return;
+      const camera2 = store.getCamera();
+      const world = screenToWorld(screenFromEvent(e), camera2);
+      if (hitTestAny(store, world, camera2.z)) return;
+      startWorld = world;
+      startScreen = screenFromEvent(e);
+      activePointerId = e.pointerId;
+      committed = false;
+      el.setPointerCapture(e.pointerId);
+    };
+    const onPointerMove = (e) => {
+      if (startWorld === null || startScreen === null) return;
+      if (e.pointerId !== activePointerId) return;
+      const screen = screenFromEvent(e);
+      const dx = screen.x - startScreen.x;
+      const dy = screen.y - startScreen.y;
+      if (!committed && Math.abs(dx) < DRAG_CREATE_MIN_SIZE_PX && Math.abs(dy) < DRAG_CREATE_MIN_SIZE_PX) {
+        return;
+      }
+      if (!committed) committed = true;
+      const world = worldFromEvent(e);
+      const rect = {
+        x: Math.min(startWorld.x, world.x),
+        y: Math.min(startWorld.y, world.y),
+        w: Math.abs(world.x - startWorld.x),
+        h: Math.abs(world.y - startWorld.y)
+      };
+      store.setInteractionState({
+        mode: "creating-shape",
+        createDraftRect: rect,
+        createTool: toolRef.current
+      });
+    };
+    const onPointerUp = (e) => {
+      if (activePointerId !== e.pointerId) return;
+      if (el.hasPointerCapture(e.pointerId)) el.releasePointerCapture(e.pointerId);
+      const wasCommitted = committed;
+      activePointerId = null;
+      if (!wasCommitted || !startWorld) {
+        startWorld = null;
+        startScreen = null;
+        return;
+      }
+      const world = worldFromEvent(e);
+      const rect = {
+        x: Math.min(startWorld.x, world.x),
+        y: Math.min(startWorld.y, world.y),
+        w: Math.abs(world.x - startWorld.x),
+        h: Math.abs(world.y - startWorld.y)
+      };
+      startWorld = null;
+      startScreen = null;
+      store.resetInteractionState();
+      justCommittedRef.current = true;
+      setTimeout(() => {
+        justCommittedRef.current = false;
+      }, 0);
+      onCreateDrag({ rect, tool: toolRef.current, native: e });
+    };
+    const onClickCapture = (e) => {
+      if (justCommittedRef.current) {
+        e.stopPropagation();
+        e.preventDefault();
+      }
+    };
+    el.addEventListener("pointerdown", onPointerDown);
+    el.addEventListener("pointermove", onPointerMove);
+    el.addEventListener("pointerup", onPointerUp);
+    el.addEventListener("pointercancel", onPointerUp);
+    el.addEventListener("click", onClickCapture, true);
+    return () => {
+      el.removeEventListener("pointerdown", onPointerDown);
+      el.removeEventListener("pointermove", onPointerMove);
+      el.removeEventListener("pointerup", onPointerUp);
+      el.removeEventListener("pointercancel", onPointerUp);
+      el.removeEventListener("click", onClickCapture, true);
+    };
+  }, [store, onCreateDrag]);
+  useEffect(() => {
+    const onKey = (e) => {
+      const target = e.target;
+      if (target && (target.tagName === "TEXTAREA" || target.tagName === "INPUT")) return;
+      const meta = e.metaKey || e.ctrlKey;
+      if (!meta) return;
+      if (e.key === "c" || e.key === "C") {
+        e.preventDefault();
+        void copy(store);
+      } else if (e.key === "x" || e.key === "X") {
+        e.preventDefault();
+        void cut(store);
+      } else if (e.key === "v" || e.key === "V") {
+        e.preventDefault();
+        void paste(store);
+      } else if (e.key === "]") {
+        const selection = store.getSelection();
+        if (selection.length === 0) return;
+        e.preventDefault();
+        if (e.shiftKey) store.bringToFront(selection);
+        else store.bringForward(selection);
+      } else if (e.key === "[") {
+        const selection = store.getSelection();
+        if (selection.length === 0) return;
+        e.preventDefault();
+        if (e.shiftKey) store.sendToBack(selection);
+        else store.sendBackward(selection);
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [store]);
+  const overlayTransform = `translate(${-camera.x * camera.z}px, ${-camera.y * camera.z}px) scale(${camera.z})`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: wrapRef,
+      "data-canvas-host": "",
+      style: {
+        position: "absolute",
+        inset: 0,
+        background: "#f8fafc",
+        overflow: "hidden",
+        cursor: tool === "select" ? "default" : "crosshair",
+        touchAction: "none"
+      },
+      children: [
+        /* @__PURE__ */ jsx("canvas", { ref: staticRef, style: { position: "absolute", inset: 0, pointerEvents: "none" } }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: overlayRef,
+            style: {
+              position: "absolute",
+              inset: 0,
+              transformOrigin: "0 0",
+              transform: overlayTransform,
+              pointerEvents: "none"
+            },
+            children: renderCustomNodeView ? mountedIds.map((id) => /* @__PURE__ */ jsx(OverlayItem, { id, children: renderCustomNodeView(id) }, id)) : null
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "canvas",
+          {
+            ref: interactiveRef,
+            style: { position: "absolute", inset: 0, pointerEvents: "none" }
+          }
+        ),
+        /* @__PURE__ */ jsx(EditorMount, { store, factory: editorAdapter }),
+        children
+      ]
+    }
+  );
+}
+function OverlayItem({ id, children }) {
+  const store = useCanvasStore();
+  const [node, setNode] = useState(() => store.getNode(id));
+  useEffect(() => {
+    return store.subscribe("change", () => setNode(store.getNode(id)));
+  }, [id, store]);
+  if (!node) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: node.x,
+        top: node.y,
+        width: node.w,
+        height: node.h,
+        transform: node.angle !== 0 ? `rotate(${node.angle}rad)` : void 0,
+        transformOrigin: "center"
+      },
+      children
+    }
+  );
+}
+var POSITION_STYLES = {
+  "top-left": { top: 12, left: 12 },
+  "top-right": { top: 12, right: 12 },
+  "bottom-left": { bottom: 12, left: 12 },
+  "bottom-right": { bottom: 12, right: 12 }
+};
+function Minimap({
+  width = 200,
+  height = 150,
+  maxNodes = DEFAULT_MINIMAP_MAX_NODES,
+  position = "bottom-right",
+  style,
+  viewportColor = "#3b82f6",
+  backgroundColor = "#ffffff",
+  borderColor = "#cbd5e1",
+  defaultNodeColor = "#94a3b8"
+}) {
+  const store = useCanvasStore();
+  const containerRef = useRef(null);
+  const canvasRef = useRef(null);
+  const cacheRef = useRef(null);
+  const cachedBoundsRef = useRef(null);
+  const dirtyRef = useRef(true);
+  const rafRef = useRef(0);
+  const [overCap, setOverCap] = useState(false);
+  useEffect(() => {
+    const c = document.createElement("canvas");
+    const dpr = window.devicePixelRatio || 1;
+    c.width = Math.ceil(width * dpr);
+    c.height = Math.ceil(height * dpr);
+    cacheRef.current = c;
+    dirtyRef.current = true;
+  }, [width, height]);
+  const schedule = () => {
+    if (rafRef.current !== 0) return;
+    rafRef.current = requestAnimationFrame(() => {
+      rafRef.current = 0;
+      repaint();
+    });
+  };
+  const repaint = () => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const dpr = window.devicePixelRatio || 1;
+    if (dirtyRef.current) {
+      const cache = cacheRef.current;
+      if (cache) {
+        const cctx = cache.getContext("2d");
+        if (cctx) {
+          cctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+          cctx.clearRect(0, 0, width, height);
+          cctx.fillStyle = backgroundColor;
+          cctx.fillRect(0, 0, width, height);
+          const ok = renderMinimapContent(cctx, store, width, height, {
+            maxNodes,
+            defaultNodeColor
+          });
+          cachedBoundsRef.current = ok ? sceneBounds(store) : null;
+          setOverCap(!ok && store.getNodeCount() > maxNodes);
+        }
+      }
+      dirtyRef.current = false;
+    }
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.clearRect(0, 0, width, height);
+    if (cacheRef.current) {
+      ctx.drawImage(cacheRef.current, 0, 0, width, height);
+    } else {
+      ctx.fillStyle = backgroundColor;
+      ctx.fillRect(0, 0, width, height);
+    }
+    const bounds = cachedBoundsRef.current;
+    if (bounds && bounds.w > 0 && bounds.h > 0) {
+      const camera = store.getCamera();
+      const wrap = containerRef.current?.closest("[data-canvas-host]");
+      const screenW = wrap?.clientWidth ?? window.innerWidth;
+      const screenH = wrap?.clientHeight ?? window.innerHeight;
+      drawMinimapViewport(
+        ctx,
+        worldViewportFromCamera(camera, screenW, screenH),
+        bounds,
+        width,
+        height,
+        viewportColor
+      );
+    }
+  };
+  useEffect(() => {
+    const onChange = () => {
+      dirtyRef.current = true;
+      schedule();
+    };
+    const onCamera = () => {
+      schedule();
+    };
+    const unsubChange = store.subscribe("change", onChange);
+    const unsubCamera = store.subscribe("camera", onCamera);
+    schedule();
+    return () => {
+      unsubChange();
+      unsubCamera();
+      if (rafRef.current !== 0) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = 0;
+      }
+    };
+  }, [store]);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    let dragging = false;
+    const move = (e) => {
+      const rect = canvas.getBoundingClientRect();
+      const worldCenter = minimapScreenToWorld(
+        store,
+        e.clientX - rect.left,
+        e.clientY - rect.top,
+        width,
+        height
+      );
+      if (!worldCenter) return;
+      const wrap = containerRef.current?.closest("[data-canvas-host]");
+      const screenW = wrap?.clientWidth ?? window.innerWidth;
+      const screenH = wrap?.clientHeight ?? window.innerHeight;
+      const camera = store.getCamera();
+      store.setCamera({
+        x: worldCenter.x - screenW / camera.z / 2,
+        y: worldCenter.y - screenH / camera.z / 2
+      });
+    };
+    const down = (e) => {
+      if (e.button !== 0) return;
+      dragging = true;
+      canvas.setPointerCapture(e.pointerId);
+      move(e);
+    };
+    const drag = (e) => {
+      if (!dragging) return;
+      move(e);
+    };
+    const up = (e) => {
+      if (!dragging) return;
+      dragging = false;
+      if (canvas.hasPointerCapture(e.pointerId)) canvas.releasePointerCapture(e.pointerId);
+    };
+    canvas.addEventListener("pointerdown", down);
+    canvas.addEventListener("pointermove", drag);
+    canvas.addEventListener("pointerup", up);
+    canvas.addEventListener("pointercancel", up);
+    return () => {
+      canvas.removeEventListener("pointerdown", down);
+      canvas.removeEventListener("pointermove", drag);
+      canvas.removeEventListener("pointerup", up);
+      canvas.removeEventListener("pointercancel", up);
+    };
+  }, [store, width, height]);
+  const containerStyle = style ?? {
+    position: "absolute",
+    ...POSITION_STYLES[position],
+    width,
+    height,
+    background: backgroundColor,
+    border: `1px solid ${borderColor}`,
+    borderRadius: 6,
+    boxShadow: "0 1px 3px rgba(0,0,0,.08)",
+    overflow: "hidden",
+    zIndex: 10
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, style: containerStyle, children: [
+    /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        ref: canvasRef,
+        width: Math.ceil(
+          width * (typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1)
+        ),
+        height: Math.ceil(
+          height * (typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1)
+        ),
+        style: { width, height, display: "block", cursor: "crosshair" }
+      }
+    ),
+    overCap && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          inset: 0,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "#64748b",
+          fontFamily: "system-ui, -apple-system, sans-serif",
+          fontSize: 11,
+          textAlign: "center",
+          padding: 8,
+          pointerEvents: "none"
+        },
+        children: [
+          "Minimap disabled",
+          /* @__PURE__ */ jsx("br", {}),
+          "(",
+          store.getNodeCount(),
+          " > ",
+          maxNodes,
+          ")"
+        ]
+      }
+    )
+  ] });
+}
+function useNode(id) {
+  const store = useCanvasStore();
+  return useSyncExternalStore(
+    (cb) => {
+      return store.subscribe("change", (batch) => {
+        for (const op of batch.ops) {
+          if ("node" in op && op.node.id === id) {
+            cb();
+            return;
+          }
+          if ("id" in op && op.id === id) {
+            cb();
+            return;
+          }
+        }
+      });
+    },
+    () => store.getNode(id)
+  );
+}
+function useNodes(predicate) {
+  const store = useCanvasStore();
+  const [nodes, setNodes] = useState(() => {
+    const all = store.getAllNodes();
+    return predicate ? all.filter(predicate) : all;
+  });
+  useEffect(() => {
+    const recompute = () => {
+      const all = store.getAllNodes();
+      setNodes(predicate ? all.filter(predicate) : all);
+    };
+    return store.subscribe("change", recompute);
+  }, [store, predicate]);
+  return nodes;
+}
+function useEdge(id) {
+  const store = useCanvasStore();
+  return useSyncExternalStore(
+    (cb) => store.subscribe("change", (batch) => {
+      for (const op of batch.ops) {
+        if ("edge" in op && op.edge.id === id) {
+          cb();
+          return;
+        }
+        if ("id" in op && op.id === id) {
+          cb();
+          return;
+        }
+      }
+    }),
+    () => store.getEdge(id)
+  );
+}
+function useEdges(predicate) {
+  const store = useCanvasStore();
+  const [edges, setEdges] = useState(() => {
+    const all = store.getAllEdges();
+    return predicate ? all.filter(predicate) : all;
+  });
+  useEffect(() => {
+    const recompute = () => {
+      const all = store.getAllEdges();
+      setEdges(predicate ? all.filter(predicate) : all);
+    };
+    return store.subscribe("change", recompute);
+  }, [store, predicate]);
+  return edges;
+}
+function useSelection() {
+  const store = useCanvasStore();
+  return useSyncExternalStore(
+    (cb) => store.subscribe("selection", cb),
+    () => store.getSelection()
+  );
+}
+function useCamera() {
+  const store = useCanvasStore();
+  return useSyncExternalStore(
+    (cb) => store.subscribe("camera", cb),
+    () => store.getCamera()
+  );
+}
+function useInteractionState() {
+  const store = useCanvasStore();
+  return useSyncExternalStore(
+    (cb) => store.subscribe("interaction", cb),
+    () => store.getInteractionState()
+  );
+}
+function useInteractionMode() {
+  const store = useCanvasStore();
+  return useSyncExternalStore(
+    (cb) => {
+      let lastMode = store.getInteractionState().mode;
+      return store.subscribe("interaction", (state) => {
+        if (state.mode !== lastMode) {
+          lastMode = state.mode;
+          cb();
+        }
+      });
+    },
+    () => store.getInteractionState().mode
+  );
+}
+function useCursor() {
+  const store = useCanvasStore();
+  return useSyncExternalStore(
+    (cb) => store.subscribe("interaction", cb),
+    () => store.getInteractionState().pointer
+  );
+}
+function useIsMoving() {
+  const mode = useInteractionMode();
+  return mode === "panning" || mode === "zooming" || mode === "dragging" || mode === "resizing" || mode === "rotating";
+}
+var EMPTY_DRAGGED = [];
+function useDraggedIds() {
+  const store = useCanvasStore();
+  return useSyncExternalStore(
+    (cb) => store.subscribe("interaction", cb),
+    () => {
+      const state = store.getInteractionState();
+      return state.draggedIds.length === 0 ? EMPTY_DRAGGED : state.draggedIds;
+    }
+  );
+}
+function useIsPenActive() {
+  const cursor = useCursor();
+  return cursor?.pointerType === "pen";
+}
+function useLocalPresence() {
+  const store = useCanvasStore();
+  return useSyncExternalStore(
+    (cb) => store.subscribe("presence", (e) => {
+      if ("removed" in e && e.removed) return;
+      if (e.state.clientId === store.clientId) cb();
+    }),
+    () => store.presence.getLocal()
+  );
+}
+function usePresence(clientId) {
+  const store = useCanvasStore();
+  const [, force] = useState(0);
+  useEffect(() => {
+    if (clientId !== void 0) return;
+    return store.subscribe("presence", (e) => {
+      if ("removed" in e && e.removed) return force((n) => n + 1);
+      if (e.state.clientId !== store.clientId) force((n) => n + 1);
+    });
+  }, [store, clientId]);
+  const [snap, setSnap] = useState(
+    () => clientId === void 0 ? void 0 : store.presence.get(clientId)
+  );
+  useEffect(() => {
+    if (clientId === void 0) return;
+    return store.subscribe("presence", (e) => {
+      if ("removed" in e && e.removed && e.clientId === clientId) setSnap(void 0);
+      else if (!("removed" in e) && e.state.clientId === clientId) setSnap(e.state);
+    });
+  }, [store, clientId]);
+  if (clientId !== void 0) return snap;
+  return store.presence.getAll();
+}
+function useCanUndo() {
+  const store = useCanvasStore();
+  return useSyncExternalStore(
+    (cb) => store.subscribe("change", cb),
+    () => store.canUndo()
+  );
+}
+function useCanRedo() {
+  const store = useCanvasStore();
+  return useSyncExternalStore(
+    (cb) => store.subscribe("change", cb),
+    () => store.canRedo()
+  );
+}
+
+// src/index.ts
+var VERSION = "0.0.0";
+
+export { Canvas, CanvasProvider, Minimap, VERSION, useCamera, useCanRedo, useCanUndo, useCanvasStore, useCursor, useDraggedIds, useEdge, useEdges, useInteractionMode, useInteractionState, useIsMoving, useIsPenActive, useLocalPresence, useNode, useNodes, usePresence, useSelection };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map