@kolosal-ai/rivet 0.1.0

package/dist/index.js

@@ -0,0 +1,4849 @@
+import { parseAnchorHandleId, ANCHOR_SIDES, anchorDotHandleId, strayPlacementPct, anchorHandleId, anchorAutoHandleId, parseAnchorAutoHandleId, normalizeAnchorConnection, computeAnchorGeometry, anchorGeometryEqual, DEFAULT_ANCHOR_OPTIONS } from './chunk-AXT35ZJV.js';
+import { useRivetContext, RivetNodeContext, useRivetNodeContext, useRivetControls, RivetContext, useRivetViewport } from './chunk-VQYN27OK.js';
+export { useRivetContext, useRivetControls, useRivetFocusedNode, useRivetHistory, useRivetViewport } from './chunk-VQYN27OK.js';
+import { clampNodeToLanes, clamp, swimlaneChromeAt, SWIMLANE_LABEL_WIDTH, resolveSwimlanes, flattenLanes, resolveMargin, requiredLaneHeight, withAlpha } from './chunk-6XRQSAQT.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { memo, useRef, useState, useCallback, useSyncExternalStore, useMemo, useEffect, Fragment as Fragment$1, useId, useLayoutEffect } from 'react';
+
+// src/align.ts
+var edgesX = (r) => [r.x, r.x + r.width / 2, r.x + r.width];
+var edgesY = (r) => [r.y, r.y + r.height / 2, r.y + r.height];
+function alignRect(moving, statics, threshold) {
+  const mX = edgesX(moving);
+  const mY = edgesY(moving);
+  let bestX = null;
+  let bestY = null;
+  for (const other of statics) {
+    const oX = edgesX(other);
+    const oY = edgesY(other);
+    for (const me of mX) {
+      for (const oe of oX) {
+        const delta = oe - me;
+        if (Math.abs(delta) <= threshold && (!bestX || Math.abs(delta) < Math.abs(bestX.delta))) {
+          bestX = { delta, position: oe, other };
+        }
+      }
+    }
+    for (const me of mY) {
+      for (const oe of oY) {
+        const delta = oe - me;
+        if (Math.abs(delta) <= threshold && (!bestY || Math.abs(delta) < Math.abs(bestY.delta))) {
+          bestY = { delta, position: oe, other };
+        }
+      }
+    }
+  }
+  const offset = { x: bestX?.delta ?? 0, y: bestY?.delta ?? 0 };
+  const guides = [];
+  if (bestX) {
+    const o = bestX.other;
+    guides.push({
+      axis: "x",
+      position: bestX.position,
+      start: Math.min(moving.y + offset.y, o.y),
+      end: Math.max(moving.y + moving.height + offset.y, o.y + o.height)
+    });
+  }
+  if (bestY) {
+    const o = bestY.other;
+    guides.push({
+      axis: "y",
+      position: bestY.position,
+      start: Math.min(moving.x + offset.x, o.x),
+      end: Math.max(moving.x + moving.width + offset.x, o.x + o.width)
+    });
+  }
+  return { offset, guides };
+}
+
+// src/changes.ts
+function applyNodeChanges(changes, nodes) {
+  if (changes.length === 0) return nodes;
+  const byId = new Map(nodes.map((node) => [node.id, node]));
+  const order = nodes.map((node) => node.id);
+  for (const change of changes) {
+    switch (change.type) {
+      case "add": {
+        if (!byId.has(change.item.id)) order.push(change.item.id);
+        byId.set(change.item.id, change.item);
+        break;
+      }
+      case "replace": {
+        byId.set(change.id, change.item);
+        break;
+      }
+      case "remove": {
+        byId.delete(change.id);
+        break;
+      }
+      case "position": {
+        const node = byId.get(change.id);
+        if (node) {
+          byId.set(change.id, {
+            ...node,
+            position: change.position ?? node.position,
+            dragging: change.dragging
+          });
+        }
+        break;
+      }
+      case "dimensions": {
+        const node = byId.get(change.id);
+        if (node) {
+          byId.set(change.id, {
+            ...node,
+            size: change.dimensions,
+            // A resize (not a measurement) sets explicit width/height.
+            ...change.resizing !== void 0 ? { width: change.dimensions.width, height: change.dimensions.height } : {}
+          });
+        }
+        break;
+      }
+      case "select": {
+        const node = byId.get(change.id);
+        if (node) byId.set(change.id, { ...node, selected: change.selected });
+        break;
+      }
+    }
+  }
+  const result = [];
+  for (const id of order) {
+    const node = byId.get(id);
+    if (node) result.push(node);
+  }
+  return result;
+}
+function applyEdgeChanges(changes, edges) {
+  if (changes.length === 0) return edges;
+  const byId = new Map(edges.map((edge) => [edge.id, edge]));
+  const order = edges.map((edge) => edge.id);
+  for (const change of changes) {
+    switch (change.type) {
+      case "add": {
+        if (!byId.has(change.item.id)) order.push(change.item.id);
+        byId.set(change.item.id, change.item);
+        break;
+      }
+      case "replace": {
+        byId.set(change.id, change.item);
+        break;
+      }
+      case "remove": {
+        byId.delete(change.id);
+        break;
+      }
+      case "select": {
+        const edge = byId.get(change.id);
+        if (edge) byId.set(change.id, { ...edge, selected: change.selected });
+        break;
+      }
+    }
+  }
+  const result = [];
+  for (const id of order) {
+    const edge = byId.get(id);
+    if (edge) result.push(edge);
+  }
+  return result;
+}
+
+// src/clipboard.ts
+var ORIGIN = { x: 0, y: 0 };
+var defaultId = () => crypto.randomUUID();
+function cloneElements(nodes, edges, options = {}) {
+  const offset = options.offset ?? ORIGIN;
+  const makeId = options.makeId ?? defaultId;
+  const idMap = /* @__PURE__ */ new Map();
+  for (const node of nodes) idMap.set(node.id, makeId());
+  const remap = (id) => idMap.get(id) ?? id;
+  const clonedNodes = nodes.map((node) => {
+    const parentCopied = node.parentId !== void 0 && idMap.has(node.parentId);
+    const next = {
+      ...node,
+      id: remap(node.id),
+      position: parentCopied ? { ...node.position } : { x: node.position.x + offset.x, y: node.position.y + offset.y }
+    };
+    next.hovered = void 0;
+    next.dragging = void 0;
+    next.selected = void 0;
+    if (node.parentId) next.parentId = idMap.has(node.parentId) ? remap(node.parentId) : void 0;
+    return next;
+  });
+  const clonedEdges = edges.filter((edge) => idMap.has(edge.source) && idMap.has(edge.target)).map((edge) => ({
+    ...edge,
+    id: makeId(),
+    source: remap(edge.source),
+    target: remap(edge.target),
+    selected: void 0
+  }));
+  return { nodes: clonedNodes, edges: clonedEdges };
+}
+var panelStyle = {
+  position: "absolute",
+  bottom: 16,
+  left: 16,
+  display: "flex",
+  flexDirection: "column",
+  borderRadius: 8,
+  overflow: "hidden",
+  border: "1px solid rgba(100, 116, 139, 0.4)",
+  background: "#ffffff",
+  boxShadow: "0 1px 3px rgba(15, 23, 42, 0.12)"
+};
+var buttonStyle = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: 32,
+  height: 32,
+  padding: 0,
+  border: "none",
+  borderBottom: "1px solid rgba(100, 116, 139, 0.25)",
+  background: "transparent",
+  color: "#0f172a",
+  cursor: "pointer"
+};
+function Controls({
+  showZoom = true,
+  showFitView = true,
+  children,
+  className,
+  style
+}) {
+  const controls = useRivetControls();
+  return /* @__PURE__ */ jsxs("div", { "data-nopan": true, className, style: { ...panelStyle, ...style }, children: [
+    showZoom && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          style: buttonStyle,
+          onClick: () => controls.zoomIn(),
+          "aria-label": "Zoom in",
+          children: /* @__PURE__ */ jsx(Icon, { title: "Zoom in", path: "M12 5v14M5 12h14" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          style: buttonStyle,
+          onClick: () => controls.zoomOut(),
+          "aria-label": "Zoom out",
+          children: /* @__PURE__ */ jsx(Icon, { title: "Zoom out", path: "M5 12h14" })
+        }
+      )
+    ] }),
+    showFitView && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        style: buttonStyle,
+        onClick: () => controls.fitView(),
+        "aria-label": "Fit view",
+        children: /* @__PURE__ */ jsx(Icon, { title: "Fit view", path: "M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5" })
+      }
+    ),
+    children
+  ] });
+}
+function Icon({ title, path }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: 16,
+      height: 16,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      role: "img",
+      children: [
+        /* @__PURE__ */ jsx("title", { children: title }),
+        /* @__PURE__ */ jsx("path", { d: path })
+      ]
+    }
+  );
+}
+
+// ../utils/src/id.ts
+function createId(prefix = "") {
+  const cryptoObj = globalThis.crypto;
+  const base = cryptoObj?.randomUUID ? cryptoObj.randomUUID() : `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+  return prefix ? `${prefix}-${base}` : base;
+}
+
+// src/constants.ts
+var DEFAULT_NODE_SIZE = { width: 160, height: 44 };
+function handleKey(nodeId, handleId) {
+  return `${nodeId} ${handleId}`;
+}
+var SELECTOR = {
+  node: "[data-rivet-node]",
+  handle: "[data-rivet-handle]",
+  noPan: "[data-nopan]",
+  /** Press here starts no node drag (but the node can still be selected/clicked). */
+  noDrag: "[data-nodrag]",
+  /** Press here never changes the selection. */
+  noSelect: "[data-noselect]",
+  /** The draggable box a marquee leaves over its selection (owns its own drag). */
+  nodesSelection: "[data-rivet-nodes-selection]",
+  /** Elements that own their own pointer — a pane pointerdown here starts no gesture. */
+  paneGestureExempt: "[data-rivet-node], [data-rivet-swimlane-handle], [data-nopan], [data-rivet-nodes-selection]"
+};
+
+// src/edge-alignment.ts
+function facingSide(node, peer) {
+  const dx = peer.x + peer.width / 2 - (node.x + node.width / 2);
+  const dy = peer.y + peer.height / 2 - (node.y + node.height / 2);
+  if (Math.abs(dx) > Math.abs(dy)) return dx > 0 ? "right" : "left";
+  return dy > 0 ? "bottom" : "top";
+}
+var DEFAULT_ALIGNMENT_HYSTERESIS = 1.2;
+function resolveFacingSide(node, peer, previous, hysteresis = DEFAULT_ALIGNMENT_HYSTERESIS) {
+  if (!previous) return facingSide(node, peer);
+  const dx = peer.x + peer.width / 2 - (node.x + node.width / 2);
+  const dy = peer.y + peer.height / 2 - (node.y + node.height / 2);
+  if (previous === "left" || previous === "right") {
+    if (Math.abs(dy) > Math.abs(dx) * hysteresis) return dy > 0 ? "bottom" : "top";
+    return dx > 0 ? "right" : "left";
+  }
+  if (Math.abs(dx) > Math.abs(dy) * hysteresis) return dx > 0 ? "right" : "left";
+  return dy > 0 ? "bottom" : "top";
+}
+
+// src/edge-ends.ts
+function displayedSideKey(edgeId, end) {
+  return `${edgeId}:${end}`;
+}
+var SIDES = ["left", "right", "top", "bottom"];
+function parseSideHandleId(handleId) {
+  return handleId && SIDES.includes(handleId) ? handleId : null;
+}
+function edgeEndpointHandle(end) {
+  if (end.anchorId !== void 0) {
+    return end.side ? anchorHandleId(end.anchorId, end.side) : anchorAutoHandleId(end.anchorId);
+  }
+  return end.side;
+}
+function parseEdgeEndpoint(nodeId, handleId, handles) {
+  if (!handleId) return { nodeId };
+  const auto = parseAnchorAutoHandleId(handleId);
+  if (auto) return { nodeId, anchorId: auto };
+  const stray = parseAnchorHandleId(handleId);
+  if (stray) return { nodeId, anchorId: stray.anchorId, side: stray.side };
+  const registered = handles?.get(handleKey(nodeId, handleId));
+  if (registered) return { nodeId, side: registered.position };
+  const side = parseSideHandleId(handleId);
+  return side ? { nodeId, side } : { nodeId };
+}
+
+// src/graph.ts
+function clampChildToParent(position, childSize, parentSize) {
+  const maxX = Math.max(0, parentSize.width - childSize.width);
+  const maxY = Math.max(0, parentSize.height - childSize.height);
+  return {
+    x: Math.min(maxX, Math.max(0, position.x)),
+    y: Math.min(maxY, Math.max(0, position.y))
+  };
+}
+function snapToGrid(position, grid) {
+  const [gx, gy] = grid;
+  return {
+    x: gx > 0 ? Math.round(position.x / gx) * gx : position.x,
+    y: gy > 0 ? Math.round(position.y / gy) * gy : position.y
+  };
+}
+function boundingRect(rects) {
+  if (rects.length === 0) return null;
+  let minX = Number.POSITIVE_INFINITY;
+  let minY = Number.POSITIVE_INFINITY;
+  let maxX = Number.NEGATIVE_INFINITY;
+  let maxY = Number.NEGATIVE_INFINITY;
+  for (const r of rects) {
+    minX = Math.min(minX, r.x);
+    minY = Math.min(minY, r.y);
+    maxX = Math.max(maxX, r.x + r.width);
+    maxY = Math.max(maxY, r.y + r.height);
+  }
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+var MAX_PARENT_DEPTH = 50;
+function worldPosition(nodes, id, maxDepth = MAX_PARENT_DEPTH) {
+  const node = nodes.get(id);
+  if (!node) return { x: 0, y: 0 };
+  let x = node.position.x;
+  let y = node.position.y;
+  let parentId = node.parentId;
+  let guard = 0;
+  while (parentId && guard++ < maxDepth) {
+    const parent = nodes.get(parentId);
+    if (!parent) break;
+    x += parent.position.x;
+    y += parent.position.y;
+    parentId = parent.parentId;
+  }
+  return { x, y };
+}
+function nodeDepth(nodes, id, maxDepth = MAX_PARENT_DEPTH) {
+  let depth = 0;
+  let parentId = nodes.get(id)?.parentId;
+  while (parentId && depth < maxDepth) {
+    depth++;
+    parentId = nodes.get(parentId)?.parentId;
+  }
+  return depth;
+}
+function hasAncestorIn(nodes, id, set, maxDepth = MAX_PARENT_DEPTH) {
+  let parentId = nodes.get(id)?.parentId;
+  let guard = 0;
+  while (parentId && guard++ < maxDepth) {
+    if (set.has(parentId)) return true;
+    parentId = nodes.get(parentId)?.parentId;
+  }
+  return false;
+}
+function buildChildIndex(nodes) {
+  const childrenOf = /* @__PURE__ */ new Map();
+  for (const node of nodes.values()) {
+    if (!node.parentId) continue;
+    const list = childrenOf.get(node.parentId);
+    if (list) list.push(node.id);
+    else childrenOf.set(node.parentId, [node.id]);
+  }
+  return childrenOf;
+}
+function collectDescendants(id, childIndex, out) {
+  for (const child of childIndex.get(id) ?? []) {
+    out.push(child);
+    collectDescendants(child, childIndex, out);
+  }
+}
+function descendantIds(nodes, id) {
+  const out = [];
+  collectDescendants(id, buildChildIndex(nodes), out);
+  return out;
+}
+function serializeGraph(nodes, edges, viewport) {
+  const cleanNodes = [];
+  for (const node of nodes) {
+    const copy = { ...node, position: { ...node.position } };
+    if (node.size) copy.size = { ...node.size };
+    copy.hovered = void 0;
+    copy.dragging = void 0;
+    cleanNodes.push(copy);
+  }
+  return {
+    nodes: cleanNodes,
+    edges: [...edges].map((edge) => ({ ...edge })),
+    viewport: { ...viewport }
+  };
+}
+function nodeControlledEqual(a, b) {
+  return a.position.x === b.position.x && a.position.y === b.position.y && Boolean(a.selected) === Boolean(b.selected) && a.data === b.data && a.type === b.type && a.laneId === b.laneId && a.ariaLabel === b.ariaLabel && a.parentId === b.parentId && a.extent === b.extent && a.width === b.width && a.height === b.height && Boolean(a.dragging) === Boolean(b.dragging) && a.size?.width === b.size?.width && a.size?.height === b.size?.height;
+}
+
+// src/history.ts
+function hasRecordableChange(changes) {
+  return changes.some((change) => {
+    switch (change.type) {
+      case "add":
+      case "remove":
+      case "replace":
+        return true;
+      case "position":
+        return !change.dragging;
+      case "dimensions":
+        return !change.resizing;
+      default:
+        return false;
+    }
+  });
+}
+var HistoryManager = class {
+  constructor(snapshot, limit = 100, schedule = (cb) => queueMicrotask(cb)) {
+    this.snapshot = snapshot;
+    this.limit = limit;
+    this.schedule = schedule;
+    this.last = snapshot();
+  }
+  snapshot;
+  limit;
+  schedule;
+  undoStack = [];
+  redoStack = [];
+  last;
+  scheduled = false;
+  rebaseScheduled = false;
+  listeners = /* @__PURE__ */ new Set();
+  /** Note that a recordable batch was applied; flushes one step next microtask. */
+  record(recordable) {
+    if (!recordable || this.scheduled) return;
+    this.scheduled = true;
+    this.schedule(() => {
+      if (this.scheduled) this.flush();
+    });
+  }
+  /**
+   * The graph changed *without* recording a step — a controlled reconcile
+   * applying incoming props, or a measurement echo. Refresh the rolling
+   * baseline so the next recorded step diffs against reality; a stale baseline
+   * makes undo revert the unrecorded changes too (e.g. a prop-added node that
+   * was then deleted through the store would undo to a graph without it).
+   * Coalesced per microtask like {@link record}. When a step is pending, its
+   * flush refreshes the baseline anyway, so this defers to it — with the
+   * documented limit that unrecorded and recorded mutations landing in the
+   * same microtask fold into that one step.
+   */
+  rebase() {
+    if (this.scheduled || this.rebaseScheduled) return;
+    this.rebaseScheduled = true;
+    this.schedule(() => {
+      this.rebaseScheduled = false;
+      if (this.scheduled) return;
+      this.last = this.snapshot();
+    });
+  }
+  flush() {
+    this.scheduled = false;
+    this.undoStack.push(this.last);
+    if (this.undoStack.length > this.limit) this.undoStack.shift();
+    this.redoStack = [];
+    this.last = this.snapshot();
+    this.notify();
+  }
+  undo(apply) {
+    if (this.scheduled) this.flush();
+    const prev = this.undoStack.pop();
+    if (!prev) return false;
+    this.redoStack.push(this.snapshot());
+    apply(prev);
+    this.last = prev;
+    this.notify();
+    return true;
+  }
+  redo(apply) {
+    const next = this.redoStack.pop();
+    if (!next) return false;
+    this.undoStack.push(this.last);
+    apply(next);
+    this.last = next;
+    this.notify();
+    return true;
+  }
+  canUndo() {
+    return this.undoStack.length > 0 || this.scheduled;
+  }
+  canRedo() {
+    return this.redoStack.length > 0;
+  }
+  /** Drop all history and reset the baseline to the current graph. */
+  clear() {
+    this.scheduled = false;
+    this.rebaseScheduled = false;
+    this.undoStack = [];
+    this.redoStack = [];
+    this.last = this.snapshot();
+    this.notify();
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+  notify() {
+    for (const listener of this.listeners) listener();
+  }
+};
+
+// src/store.ts
+var RivetGraphStore = class {
+  nodes = /* @__PURE__ */ new Map();
+  edges = /* @__PURE__ */ new Map();
+  handles = /* @__PURE__ */ new Map();
+  anchors = /* @__PURE__ */ new Map();
+  viewport;
+  viewportClamp = null;
+  pending = null;
+  nodeVersions = /* @__PURE__ */ new Map();
+  nodeListeners = /* @__PURE__ */ new Map();
+  anchorVersions = /* @__PURE__ */ new Map();
+  anchorListeners = /* @__PURE__ */ new Map();
+  edgesVersion = 0;
+  edgesListeners = /* @__PURE__ */ new Set();
+  nodeElements = /* @__PURE__ */ new Map();
+  viewportListeners = /* @__PURE__ */ new Set();
+  frameListeners = /* @__PURE__ */ new Set();
+  selectionListeners = /* @__PURE__ */ new Set();
+  selectedNodeIds = /* @__PURE__ */ new Set();
+  selectionBoxActive = false;
+  selectionBoxVersion = 0;
+  selectionBoxListeners = /* @__PURE__ */ new Set();
+  hoveredNodeId = null;
+  focusedNodeId = null;
+  focusListeners = /* @__PURE__ */ new Set();
+  selectedEdgeId = null;
+  nodeDragging = false;
+  nodeResizing = false;
+  edgeAlignment = "manual";
+  draggingNodeIds = /* @__PURE__ */ new Set();
+  displayedSides = /* @__PURE__ */ new Map();
+  edgeLabelAnchors = /* @__PURE__ */ new Map();
+  alignmentGuides = [];
+  nodeChangeHandler = null;
+  edgeChangeHandler = null;
+  reconciling = false;
+  history = new HistoryManager(() => this.historySnapshot());
+  lastSelectionKey;
+  worldCache = null;
+  renderRequester = () => {
+  };
+  constructor(init) {
+    this.viewport = init.viewport;
+    for (const node of init.nodes) this.writeNode(node.id, node);
+    for (const edge of init.edges) this.edges.set(edge.id, edge);
+    for (const node of init.nodes) if (node.selected) this.selectedNodeIds.add(node.id);
+    this.selectedEdgeId = init.edges.find((edge) => edge.selected)?.id ?? null;
+    this.lastSelectionKey = this.selectionKey();
+    this.history.clear();
+  }
+  // --- internal bookkeeping ------------------------------------------------
+  invalidateWorld() {
+    this.worldCache = null;
+  }
+  /**
+   * The single node-map write path. Invalidates the world-position cache exactly
+   * when a layout-affecting field changed (the node's position or its parent
+   * chain) or the node is new — so size/lane/selection/hover writes skip the
+   * O(n) rebuild, and no mutator can forget to invalidate.
+   */
+  writeNode(id, next) {
+    const prev = this.nodes.get(id);
+    this.nodes.set(id, next);
+    if (!prev || prev.parentId !== next.parentId || prev.position.x !== next.position.x || prev.position.y !== next.position.y) {
+      this.invalidateWorld();
+    }
+  }
+  /** The single node-map delete path. Always invalidates — a removal shifts descendants. */
+  deleteNode(id) {
+    this.nodes.delete(id);
+    this.invalidateWorld();
+  }
+  selectionKey() {
+    return `${[...this.selectedNodeIds].sort().join(",")}|${this.selectedEdgeId ?? ""}`;
+  }
+  buildSelection() {
+    return {
+      nodes: [...this.selectedNodeIds].map((id) => this.nodes.get(id)).filter((n) => n !== void 0),
+      edges: this.selectedEdgeId ? [this.edges.get(this.selectedEdgeId)].filter((e) => e !== void 0) : []
+    };
+  }
+  notifySelection() {
+    const key = this.selectionKey();
+    if (key === this.lastSelectionKey) return;
+    this.lastSelectionKey = key;
+    if (this.selectionBoxActive) this.bumpSelectionBox();
+    if (this.selectionListeners.size === 0) return;
+    const selection = this.buildSelection();
+    for (const listener of this.selectionListeners) listener(selection);
+  }
+  /**
+   * The one emission policy. Unless a `reconcile` is applying incoming props
+   * (which must never echo them back out), record the batch to history — when
+   * `record` is set — then hand it to the controlled consumer. Recording happens
+   * before the handler so history works in uncontrolled mode too.
+   */
+  emit(changes, handler, record) {
+    if (this.reconciling || changes.length === 0) return;
+    if (record) this.history.record(hasRecordableChange(changes));
+    else if (hasRecordableChange(changes)) this.history.rebase();
+    handler?.(changes);
+  }
+  emitNodeChanges(changes, record = true) {
+    this.emit(changes, this.nodeChangeHandler, record);
+  }
+  emitEdgeChanges(changes, record = true) {
+    this.emit(changes, this.edgeChangeHandler, record);
+  }
+  bumpNode(id) {
+    this.nodeVersions.set(id, (this.nodeVersions.get(id) ?? 0) + 1);
+    const listeners = this.nodeListeners.get(id);
+    if (listeners) for (const listener of listeners) listener();
+    if (this.selectionBoxActive && this.selectedNodeIds.has(id)) this.bumpSelectionBox();
+  }
+  bumpSelectionBox() {
+    this.selectionBoxVersion += 1;
+    for (const listener of this.selectionBoxListeners) listener();
+  }
+  bumpAnchors(id) {
+    this.anchorVersions.set(id, (this.anchorVersions.get(id) ?? 0) + 1);
+    const listeners = this.anchorListeners.get(id);
+    if (listeners) for (const listener of listeners) listener();
+  }
+  bumpEdges() {
+    this.edgesVersion += 1;
+    for (const listener of this.edgesListeners) listener();
+  }
+  // Node selection is React state (nodes are DOM), so bump only what flips.
+  // `target` is the exact set that should end up selected.
+  applyNodeSelection(target) {
+    const changes = [];
+    for (const [nodeId, node] of this.nodes) {
+      const selected = target.has(nodeId);
+      if (Boolean(node.selected) !== selected) {
+        this.writeNode(nodeId, { ...node, selected });
+        this.bumpNode(nodeId);
+        changes.push({ type: "select", id: nodeId, selected });
+      }
+    }
+    this.selectedNodeIds.clear();
+    for (const id of target) if (this.nodes.has(id)) this.selectedNodeIds.add(id);
+    this.emitNodeChanges(changes);
+  }
+  setNodeHover(id) {
+    if (this.hoveredNodeId === id) return;
+    const prev = this.hoveredNodeId;
+    this.hoveredNodeId = id;
+    if (prev !== null) {
+      const node = this.nodes.get(prev);
+      if (node) {
+        this.writeNode(prev, { ...node, hovered: false });
+        this.bumpNode(prev);
+      }
+    }
+    if (id !== null) {
+      const node = this.nodes.get(id);
+      if (node) {
+        this.writeNode(id, { ...node, hovered: true });
+        this.bumpNode(id);
+      }
+    }
+  }
+  // Edge selection is canvas-only, so it just invalidates the frame.
+  setEdgeSelection(id) {
+    if (this.selectedEdgeId === id) return;
+    const changes = [];
+    if (this.selectedEdgeId) {
+      const prev = this.edges.get(this.selectedEdgeId);
+      if (prev) {
+        this.edges.set(this.selectedEdgeId, { ...prev, selected: false });
+        changes.push({ type: "select", id: this.selectedEdgeId, selected: false });
+      }
+    }
+    if (id) {
+      const next = this.edges.get(id);
+      if (next) {
+        this.edges.set(id, { ...next, selected: true });
+        changes.push({ type: "select", id, selected: true });
+      }
+    }
+    this.selectedEdgeId = id;
+    this.emitEdgeChanges(changes);
+    this.requestRender();
+  }
+  removeEdgeInternal(id) {
+    if (!this.edges.delete(id)) return false;
+    if (this.selectedEdgeId === id) this.selectedEdgeId = null;
+    this.displayedSides.delete(displayedSideKey(id, "source"));
+    this.displayedSides.delete(displayedSideKey(id, "target"));
+    this.bumpEdges();
+    return true;
+  }
+  // Drop a node's bookkeeping (map entry, version, selection, hover, its
+  // handles and anchors). Edges are handled by the caller — reconcile owns
+  // edges separately from remove.
+  dropNodeState(id) {
+    this.deleteNode(id);
+    this.nodeVersions.delete(id);
+    this.anchorVersions.delete(id);
+    this.selectedNodeIds.delete(id);
+    if (this.hoveredNodeId === id) this.hoveredNodeId = null;
+    if (this.focusedNodeId === id) this.setFocusedNode(null);
+    const prefix = `${id} `;
+    for (const key of this.handles.keys()) {
+      if (key.startsWith(prefix)) this.handles.delete(key);
+    }
+    for (const key of this.anchors.keys()) {
+      if (key.startsWith(prefix)) this.anchors.delete(key);
+    }
+  }
+  removeNodeInternal(id, removedEdges) {
+    if (!this.nodes.has(id)) return false;
+    this.dropNodeState(id);
+    for (const [edgeId, edge] of this.edges) {
+      if (edge.source === id || edge.target === id) {
+        if (this.removeEdgeInternal(edgeId)) removedEdges.push(edgeId);
+      }
+    }
+    return true;
+  }
+  edgeRemoveChanges(ids) {
+    return ids.map((id) => ({ type: "remove", id }));
+  }
+  clampViewport(next) {
+    const bound = this.viewportClamp;
+    if (!bound) return next;
+    const maxViewportX = -bound.minX * next.zoom;
+    const maxViewportY = -bound.minY * next.zoom;
+    const minViewportY = bound.maxY === void 0 ? Number.NEGATIVE_INFINITY : -bound.maxY * next.zoom;
+    return {
+      ...next,
+      x: Math.min(next.x, maxViewportX),
+      y: clamp(next.y, minViewportY, maxViewportY)
+    };
+  }
+  reconcileNodes(nextNodes) {
+    const incoming = /* @__PURE__ */ new Set();
+    const moved = [];
+    for (const node of nextNodes) {
+      incoming.add(node.id);
+      const existing = this.nodes.get(node.id);
+      if (!existing) {
+        this.writeNode(node.id, node);
+        continue;
+      }
+      if (nodeControlledEqual(existing, node)) continue;
+      this.writeNode(node.id, existing.hovered ? { ...node, hovered: true } : node);
+      this.bumpNode(node.id);
+      if (existing.position.x !== node.position.x || existing.position.y !== node.position.y) {
+        moved.push(node.id);
+      }
+    }
+    for (const id of [...this.nodes.keys()]) {
+      if (!incoming.has(id)) this.dropNodeState(id);
+    }
+    if (moved.length > 0) {
+      const childIndex = buildChildIndex(this.nodes);
+      const descendants = [];
+      for (const id of moved) collectDescendants(id, childIndex, descendants);
+      for (const id of descendants) this.bumpNode(id);
+    }
+    this.selectedNodeIds.clear();
+    for (const node of nextNodes) if (node.selected) this.selectedNodeIds.add(node.id);
+  }
+  reconcileEdges(nextEdges) {
+    const incoming = /* @__PURE__ */ new Set();
+    let connectivityChanged = false;
+    for (const edge of nextEdges) {
+      incoming.add(edge.id);
+      const prev = this.edges.get(edge.id);
+      if (!prev || prev.source !== edge.source || prev.target !== edge.target || prev.sourceHandle !== edge.sourceHandle || prev.targetHandle !== edge.targetHandle) {
+        connectivityChanged = true;
+      }
+      this.edges.set(edge.id, edge);
+    }
+    for (const id of [...this.edges.keys()]) {
+      if (!incoming.has(id)) {
+        this.edges.delete(id);
+        connectivityChanged = true;
+      }
+    }
+    this.selectedEdgeId = nextEdges.find((edge) => edge.selected)?.id ?? null;
+    if (connectivityChanged) this.bumpEdges();
+  }
+  // --- per-node React channel ----------------------------------------------
+  getNodeVersion = (id) => this.nodeVersions.get(id) ?? 0;
+  subscribeNode = (id, listener) => {
+    let set = this.nodeListeners.get(id);
+    if (!set) {
+      set = /* @__PURE__ */ new Set();
+      this.nodeListeners.set(id, set);
+    }
+    set.add(listener);
+    return () => {
+      set.delete(listener);
+      if (set.size === 0) this.nodeListeners.delete(id);
+    };
+  };
+  registerNodeElement = (id, el) => {
+    this.nodeElements.set(id, el);
+  };
+  unregisterNodeElement = (id, el) => {
+    if (this.nodeElements.get(id) === el) this.nodeElements.delete(id);
+  };
+  getNodeElement = (id) => this.nodeElements.get(id);
+  // --- viewport ------------------------------------------------------------
+  getViewport = () => this.viewport;
+  setViewport = (next) => {
+    this.viewport = this.clampViewport(next);
+    for (const listener of this.viewportListeners) listener(this.viewport);
+  };
+  setViewportClamp = (clampBound) => {
+    this.viewportClamp = clampBound;
+    const clamped = this.clampViewport(this.viewport);
+    if (clamped.x !== this.viewport.x || clamped.y !== this.viewport.y) {
+      this.viewport = clamped;
+      for (const listener of this.viewportListeners) listener(this.viewport);
+      this.requestRender();
+    }
+  };
+  subscribeViewport = (listener) => {
+    this.viewportListeners.add(listener);
+    return () => {
+      this.viewportListeners.delete(listener);
+    };
+  };
+  subscribeFrame = (listener) => {
+    this.frameListeners.add(listener);
+    return () => {
+      this.frameListeners.delete(listener);
+    };
+  };
+  notifyFrame = () => {
+    for (const listener of this.frameListeners) listener();
+  };
+  // --- node geometry -------------------------------------------------------
+  getWorldPositions = () => {
+    if (!this.worldCache) {
+      this.worldCache = /* @__PURE__ */ new Map();
+      for (const id of this.nodes.keys()) this.worldCache.set(id, worldPosition(this.nodes, id));
+    }
+    return this.worldCache;
+  };
+  getNodeWorldPosition = (id) => this.getWorldPositions().get(id) ?? { x: 0, y: 0 };
+  getNodeRect = (id) => {
+    const origin = this.getNodeWorldPosition(id);
+    const size = this.nodes.get(id)?.size ?? DEFAULT_NODE_SIZE;
+    return { x: origin.x, y: origin.y, width: size.width, height: size.height };
+  };
+  getNodeDepth = (id) => nodeDepth(this.nodes, id);
+  getDescendantIds = (id) => descendantIds(this.nodes, id);
+  getMovers = (ids) => {
+    const set = new Set(ids);
+    return ids.filter((id) => !hasAncestorIn(this.nodes, id, set));
+  };
+  // --- node mutations ------------------------------------------------------
+  moveNode = (id, position, commit) => {
+    const node = this.nodes.get(id);
+    if (!node) return;
+    this.writeNode(id, { ...node, position });
+    if (commit) this.draggingNodeIds.delete(id);
+    else this.draggingNodeIds.add(id);
+    this.requestRender();
+    if (commit) {
+      this.bumpNode(id);
+      for (const descendant of descendantIds(this.nodes, id)) this.bumpNode(descendant);
+    }
+    this.emitNodeChanges([{ type: "position", id, position, dragging: !commit }]);
+    if (commit) this.realignNodeEdges(id);
+  };
+  setNodeSize = (id, size) => {
+    const node = this.nodes.get(id);
+    if (!node) return;
+    if (node.size && Math.abs(node.size.width - size.width) < 1 && Math.abs(node.size.height - size.height) < 1) {
+      return;
+    }
+    this.writeNode(id, { ...node, size });
+    this.requestRender();
+    this.bumpNode(id);
+    this.emitNodeChanges([{ type: "dimensions", id, dimensions: size }], false);
+  };
+  resizeNode = (id, size, position, commit = true) => {
+    const node = this.nodes.get(id);
+    if (!node) return;
+    this.nodeResizing = !commit;
+    const next = { ...node, width: size.width, height: size.height, size };
+    if (position) next.position = position;
+    this.writeNode(id, next);
+    this.requestRender();
+    this.bumpNode(id);
+    const changes = [{ type: "dimensions", id, dimensions: size, resizing: !commit }];
+    if (position) changes.push({ type: "position", id, position, dragging: !commit });
+    this.emitNodeChanges(changes);
+    if (commit && position) this.realignNodeEdges(id);
+  };
+  setNodeLane = (id, laneId) => {
+    const node = this.nodes.get(id);
+    if (!node) return false;
+    const next = laneId ?? void 0;
+    if (node.laneId === next) return false;
+    const previous = node.laneId ?? null;
+    const updated = { ...node, laneId: next };
+    this.writeNode(id, updated);
+    this.bumpNode(id);
+    this.emitNodeChanges([{ type: "replace", id, item: updated }]);
+    return previous;
+  };
+  addNode = (node) => {
+    if (this.nodes.has(node.id)) return;
+    this.writeNode(node.id, node);
+    if (node.selected) this.selectedNodeIds.add(node.id);
+    this.requestRender();
+    this.emitNodeChanges([{ type: "add", item: node }]);
+  };
+  replaceNode = (id, node) => {
+    if (!this.nodes.has(id)) return;
+    this.writeNode(id, node);
+    if (node.selected) this.selectedNodeIds.add(id);
+    else this.selectedNodeIds.delete(id);
+    this.bumpNode(id);
+    this.requestRender();
+    this.emitNodeChanges([{ type: "replace", id, item: node }]);
+  };
+  removeNode = (id) => {
+    const removedEdges = [];
+    if (this.removeNodeInternal(id, removedEdges)) {
+      this.emitNodeChanges([{ type: "remove", id }]);
+      this.emitEdgeChanges(this.edgeRemoveChanges(removedEdges));
+      this.requestRender();
+      this.notifySelection();
+    }
+  };
+  // --- edge alignment ------------------------------------------------------
+  setEdgeAlignment = (mode) => {
+    this.edgeAlignment = mode;
+  };
+  getEdgeAlignment = () => this.edgeAlignment;
+  getDisplayedSides = () => this.displayedSides;
+  getDraggingNodeIds = () => this.draggingNodeIds;
+  /**
+   * Re-side one edge end toward `side`. Auto ends (no handle, or an
+   * `inode-…-auto` id) have no pin to rewrite and pass through. Anchor stray
+   * and bare-side ids encode their side, so they rewrite as strings (the
+   * anchor chrome follows connectivity, and the target stray may not be
+   * rendered yet). A registered plain handle re-sides through the registry:
+   * swap to a registered handle on the facing side with a compatible type. No
+   * candidate (single-handle nodes, custom layouts, a culled peer whose
+   * handles are unregistered) means the pin is kept.
+   */
+  realignEndHandle(nodeId, handleId, side, end) {
+    if (!handleId || parseAnchorAutoHandleId(handleId)) return handleId;
+    const anchor = parseAnchorHandleId(handleId);
+    if (anchor) return anchor.side === side ? handleId : anchorHandleId(anchor.anchorId, side);
+    const record = this.handles.get(handleKey(nodeId, handleId));
+    if (!record) return parseSideHandleId(handleId) ? side : handleId;
+    if (record.position === side) return handleId;
+    const wanted = end === "source" ? ["source", "either"] : ["target", "either"];
+    for (const candidate of this.handles.values()) {
+      if (candidate.nodeId === nodeId && candidate.position === side && wanted.includes(candidate.type)) {
+        return candidate.handleId;
+      }
+    }
+    return handleId;
+  }
+  /**
+   * Under `"on-move"` and `"live"`: re-side both ends of the moved node's
+   * edges to face each other. Called only from committed position mutations —
+   * never from replaces, dimension echoes, reconcile, or history restores,
+   * which must not move an edge the user didn't touch or rewrite handles an
+   * undo just restored. Emitting in the same synchronous batch as the move
+   * keeps the rewrite inside the move's history step (microtask coalescing).
+   *
+   * `"live"` commits the *displayed* side when the renderer resolved one this
+   * gesture — the hysteresis band means the raw facing side can differ near a
+   * diagonal, and the drop must not flip what the user was just shown. The
+   * consumed entries are dropped afterwards so a later commit without live
+   * frames (an arrow-key move) can't re-side to a stale display.
+   */
+  realignNodeEdges(nodeId) {
+    if (this.edgeAlignment === "manual") return;
+    const live = this.edgeAlignment === "live";
+    const changes = [];
+    for (const [edgeId, edge] of this.edges) {
+      if (edge.source !== nodeId && edge.target !== nodeId) continue;
+      if (edge.source === edge.target) continue;
+      if (!this.nodes.has(edge.source) || !this.nodes.has(edge.target)) continue;
+      const sourceRect = this.getNodeRect(edge.source);
+      const targetRect = this.getNodeRect(edge.target);
+      const sourceKey = displayedSideKey(edgeId, "source");
+      const targetKey = displayedSideKey(edgeId, "target");
+      const sourceSide = (live ? this.displayedSides.get(sourceKey) : void 0) ?? facingSide(sourceRect, targetRect);
+      const targetSide = (live ? this.displayedSides.get(targetKey) : void 0) ?? facingSide(targetRect, sourceRect);
+      const sourceHandle = this.realignEndHandle(
+        edge.source,
+        edge.sourceHandle,
+        sourceSide,
+        "source"
+      );
+      const targetHandle = this.realignEndHandle(
+        edge.target,
+        edge.targetHandle,
+        targetSide,
+        "target"
+      );
+      if (live) {
+        const pinned = (h) => Boolean(h) && !parseAnchorAutoHandleId(h);
+        if (pinned(edge.sourceHandle)) this.displayedSides.delete(sourceKey);
+        if (pinned(edge.targetHandle)) this.displayedSides.delete(targetKey);
+      }
+      if (sourceHandle === edge.sourceHandle && targetHandle === edge.targetHandle) continue;
+      const updated = { ...edge, sourceHandle, targetHandle };
+      this.edges.set(edgeId, updated);
+      changes.push({ type: "replace", id: edgeId, item: updated });
+    }
+    if (changes.length === 0) return;
+    this.bumpEdges();
+    this.requestRender();
+    this.emitEdgeChanges(changes);
+  }
+  // --- drag / selection state ----------------------------------------------
+  isNodeDragging = () => this.nodeDragging;
+  setNodeDragging = (dragging) => {
+    this.nodeDragging = dragging;
+    if (!dragging) this.draggingNodeIds.clear();
+  };
+  isNodeResizing = () => this.nodeResizing;
+  selectNode = (id, additive = false) => {
+    this.setSelectionBoxActive(false);
+    if (id === null) {
+      this.applyNodeSelection(/* @__PURE__ */ new Set());
+      this.notifySelection();
+      return;
+    }
+    let target;
+    if (additive) {
+      target = new Set(this.selectedNodeIds);
+      if (target.has(id)) target.delete(id);
+      else target.add(id);
+    } else {
+      target = /* @__PURE__ */ new Set([id]);
+    }
+    this.applyNodeSelection(target);
+    this.setEdgeSelection(null);
+    this.notifySelection();
+  };
+  selectNodes = (ids, additive = false) => {
+    this.setSelectionBoxActive(false);
+    const target = additive ? new Set(this.selectedNodeIds) : /* @__PURE__ */ new Set();
+    for (const id of ids) target.add(id);
+    this.applyNodeSelection(target);
+    if (target.size > 0) this.setEdgeSelection(null);
+    this.notifySelection();
+  };
+  getSelectedNodes = () => [...this.selectedNodeIds];
+  isNodeSelected = (id) => this.selectedNodeIds.has(id);
+  getSelection = () => this.buildSelection();
+  subscribeSelection = (listener) => {
+    this.selectionListeners.add(listener);
+    return () => {
+      this.selectionListeners.delete(listener);
+    };
+  };
+  setSelectionBoxActive = (active) => {
+    if (this.selectionBoxActive === active) return;
+    this.selectionBoxActive = active;
+    this.bumpSelectionBox();
+  };
+  isSelectionBoxActive = () => this.selectionBoxActive;
+  getSelectionBoxVersion = () => this.selectionBoxVersion;
+  subscribeSelectionBox = (listener) => {
+    this.selectionBoxListeners.add(listener);
+    return () => {
+      this.selectionBoxListeners.delete(listener);
+    };
+  };
+  hoverNode = (id) => {
+    this.setNodeHover(id);
+  };
+  getFocusedNode = () => this.focusedNodeId;
+  setFocusedNode = (id) => {
+    if (id !== null && !this.nodes.has(id)) return;
+    if (this.focusedNodeId === id) return;
+    this.focusedNodeId = id;
+    for (const listener of this.focusListeners) listener(id);
+  };
+  subscribeFocus = (listener) => {
+    this.focusListeners.add(listener);
+    return () => {
+      this.focusListeners.delete(listener);
+    };
+  };
+  // --- edges ---------------------------------------------------------------
+  selectEdge = (id) => {
+    this.setSelectionBoxActive(false);
+    this.setEdgeSelection(id);
+    this.applyNodeSelection(/* @__PURE__ */ new Set());
+    this.notifySelection();
+  };
+  addEdge = (edge) => {
+    if (this.edges.has(edge.id)) return;
+    this.edges.set(edge.id, edge);
+    this.bumpEdges();
+    this.requestRender();
+    this.emitEdgeChanges([{ type: "add", item: edge }]);
+  };
+  replaceEdge = (id, edge) => {
+    if (!this.edges.has(id)) return;
+    this.edges.set(id, edge);
+    if (this.selectedEdgeId === id && !edge.selected) this.selectedEdgeId = null;
+    this.bumpEdges();
+    this.requestRender();
+    this.emitEdgeChanges([{ type: "replace", id, item: edge }]);
+  };
+  reconnectEdge = (id, connection) => {
+    const edge = this.edges.get(id);
+    if (!edge) return;
+    const updated = {
+      ...edge,
+      source: connection.source,
+      target: connection.target,
+      sourceHandle: connection.sourceHandle ?? void 0,
+      targetHandle: connection.targetHandle ?? void 0
+    };
+    this.edges.set(id, updated);
+    this.bumpEdges();
+    this.requestRender();
+    this.emitEdgeChanges([{ type: "replace", id, item: updated }]);
+  };
+  removeEdge = (id) => {
+    if (this.removeEdgeInternal(id)) {
+      this.emitEdgeChanges([{ type: "remove", id }]);
+      this.requestRender();
+      this.notifySelection();
+    }
+  };
+  deleteSelection = () => {
+    const removedNodes = [];
+    const removedEdges = [];
+    const selectedEdge = this.selectedEdgeId;
+    if (selectedEdge && this.removeEdgeInternal(selectedEdge)) {
+      removedEdges.push(selectedEdge);
+    }
+    if (this.selectedNodeIds.size > 0) {
+      for (const id of [...this.selectedNodeIds]) {
+        if (this.removeNodeInternal(id, removedEdges)) removedNodes.push(id);
+      }
+    }
+    const changed = removedNodes.length > 0 || removedEdges.length > 0;
+    if (changed) {
+      this.setSelectionBoxActive(false);
+      this.emitNodeChanges(removedNodes.map((id) => ({ type: "remove", id })));
+      this.emitEdgeChanges(this.edgeRemoveChanges(removedEdges));
+      this.requestRender();
+      this.notifySelection();
+    }
+    return changed;
+  };
+  // --- controlled mode -----------------------------------------------------
+  setChangeHandlers = (handlers) => {
+    this.nodeChangeHandler = handlers.nodes ?? null;
+    this.edgeChangeHandler = handlers.edges ?? null;
+  };
+  reconcile = (nextNodes, nextEdges) => {
+    this.reconciling = true;
+    try {
+      this.reconcileNodes(nextNodes);
+      this.reconcileEdges(nextEdges);
+    } finally {
+      this.reconciling = false;
+    }
+    this.history.rebase();
+    this.requestRender();
+  };
+  // --- undo / redo ---------------------------------------------------------
+  /** Structural snapshot for history — no selection/hover/drag state. */
+  historySnapshot() {
+    const nodes = [...this.nodes.values()].map((node) => {
+      const copy = { ...node, position: { ...node.position } };
+      if (node.size) copy.size = { ...node.size };
+      copy.selected = void 0;
+      copy.hovered = void 0;
+      copy.dragging = void 0;
+      return copy;
+    });
+    const edges = [...this.edges.values()].map((edge) => {
+      const copy = { ...edge };
+      copy.selected = void 0;
+      return copy;
+    });
+    return { nodes, edges };
+  }
+  /**
+   * Restore a snapshot, emitting the diff so controlled consumers update. Emits
+   * with `record: false` so the restore itself isn't re-recorded, and preserves
+   * live selection/hover (undo shouldn't churn what's selected).
+   */
+  applyHistorySnapshot(snap) {
+    const nodeChanges = [];
+    const snapNodeIds = new Set(snap.nodes.map((node) => node.id));
+    for (const id of [...this.nodes.keys()]) {
+      if (!snapNodeIds.has(id)) {
+        this.dropNodeState(id);
+        nodeChanges.push({ type: "remove", id });
+      }
+    }
+    for (const node of snap.nodes) {
+      const existing = this.nodes.get(node.id);
+      const merged = existing ? { ...node, selected: existing.selected, hovered: existing.hovered } : node;
+      if (!existing) {
+        this.writeNode(node.id, merged);
+        nodeChanges.push({ type: "add", item: merged });
+      } else if (!nodeControlledEqual(existing, merged)) {
+        this.writeNode(node.id, merged);
+        this.bumpNode(node.id);
+        nodeChanges.push({ type: "replace", id: node.id, item: merged });
+      }
+    }
+    const edgeChanges = [];
+    const snapEdgeIds = new Set(snap.edges.map((edge) => edge.id));
+    for (const id of [...this.edges.keys()]) {
+      if (!snapEdgeIds.has(id)) {
+        this.edges.delete(id);
+        edgeChanges.push({ type: "remove", id });
+      }
+    }
+    for (const edge of snap.edges) {
+      const existing = this.edges.get(edge.id);
+      const merged = existing ? { ...edge, selected: existing.selected } : edge;
+      this.edges.set(edge.id, merged);
+      edgeChanges.push(
+        existing ? { type: "replace", id: edge.id, item: merged } : { type: "add", item: merged }
+      );
+    }
+    if (this.selectedEdgeId && !this.edges.has(this.selectedEdgeId)) this.selectedEdgeId = null;
+    if (edgeChanges.length > 0) this.bumpEdges();
+    this.emitNodeChanges(nodeChanges, false);
+    this.emitEdgeChanges(edgeChanges, false);
+    this.requestRender();
+  }
+  undo = () => this.history.undo((snap) => this.applyHistorySnapshot(snap));
+  redo = () => this.history.redo((snap) => this.applyHistorySnapshot(snap));
+  canUndo = () => this.history.canUndo();
+  canRedo = () => this.history.canRedo();
+  clearHistory = () => this.history.clear();
+  subscribeHistory = (listener) => this.history.subscribe(listener);
+  // --- edge labels (renderer ↔ label layer) --------------------------------
+  getEdgeLabelAnchors = () => this.edgeLabelAnchors;
+  setEdgeLabelAnchors = (anchors) => {
+    this.edgeLabelAnchors = anchors;
+  };
+  getAlignmentGuides = () => this.alignmentGuides;
+  setAlignmentGuides = (guides) => {
+    this.alignmentGuides = guides;
+    this.requestRender();
+  };
+  // --- handle registry -----------------------------------------------------
+  registerHandle = (record) => {
+    this.handles.set(handleKey(record.nodeId, record.handleId), record);
+    this.requestRender();
+  };
+  unregisterHandle = (nodeId, handleId) => {
+    this.handles.delete(handleKey(nodeId, handleId));
+    this.requestRender();
+  };
+  // --- anchor registry -----------------------------------------------------
+  /**
+   * Measure one anchor against its node element. Returns true when geometry
+   * changed beyond tolerance. Bails — keeping the last-known geometry — while
+   * the element or node box can't produce a meaningful measurement (detached,
+   * display:none, node not yet laid out).
+   */
+  measureAnchor(key) {
+    const record = this.anchors.get(key);
+    if (!record?.element?.isConnected) return false;
+    const element = record.element;
+    const nodeEl = this.nodeElements.get(record.nodeId);
+    if (!nodeEl) return false;
+    const root = nodeEl.getBoundingClientRect();
+    const box = element.getBoundingClientRect();
+    if (root.width <= 0 || root.height <= 0 || box.width <= 0 && box.height <= 0) return false;
+    const rects = element.getClientRects();
+    const first = rects.item(0) ?? box;
+    const last = rects.item(rects.length - 1) ?? first;
+    const geometry = computeAnchorGeometry(root, first, last, box);
+    if (anchorGeometryEqual(record.geometry, geometry)) return false;
+    this.anchors.set(key, { ...record, geometry });
+    return true;
+  }
+  registerAnchor = (nodeId, anchorId, element, options) => {
+    const key = handleKey(nodeId, anchorId);
+    const prev = this.anchors.get(key);
+    this.anchors.set(key, {
+      nodeId,
+      anchorId,
+      color: options?.color ?? prev?.color,
+      strays: options?.strays ?? prev?.strays,
+      element,
+      // Keep the last-known geometry until the next successful measurement, so
+      // a re-bind (display remount, editor DOM swap) never blanks the chrome.
+      geometry: prev?.geometry ?? null
+    });
+    this.measureAnchor(key);
+    this.bumpAnchors(nodeId);
+    this.requestRender();
+  };
+  detachAnchor = (nodeId, anchorId) => {
+    const key = handleKey(nodeId, anchorId);
+    const record = this.anchors.get(key);
+    if (!record || record.element === null) return;
+    this.anchors.set(key, { ...record, element: null });
+    this.bumpAnchors(nodeId);
+  };
+  unregisterAnchor = (nodeId, anchorId) => {
+    if (!this.anchors.delete(handleKey(nodeId, anchorId))) return;
+    this.bumpAnchors(nodeId);
+    this.requestRender();
+  };
+  remeasureAnchors = (nodeId) => {
+    let changed = false;
+    for (const [key, record] of this.anchors) {
+      if (record.nodeId === nodeId && this.measureAnchor(key)) changed = true;
+    }
+    if (changed) {
+      this.bumpAnchors(nodeId);
+      this.requestRender();
+    }
+  };
+  getNodeAnchors = (nodeId) => {
+    const records = [];
+    for (const record of this.anchors.values()) {
+      if (record.nodeId === nodeId) records.push(record);
+    }
+    return records;
+  };
+  getNodeAnchorsVersion = (nodeId) => this.anchorVersions.get(nodeId) ?? 0;
+  subscribeNodeAnchors = (nodeId, listener) => {
+    let set = this.anchorListeners.get(nodeId);
+    if (!set) {
+      set = /* @__PURE__ */ new Set();
+      this.anchorListeners.set(nodeId, set);
+    }
+    set.add(listener);
+    return () => {
+      set.delete(listener);
+      if (set.size === 0) this.anchorListeners.delete(nodeId);
+    };
+  };
+  getEdgesVersion = () => this.edgesVersion;
+  subscribeEdges = (listener) => {
+    this.edgesListeners.add(listener);
+    return () => {
+      this.edgesListeners.delete(listener);
+    };
+  };
+  // --- in-progress connection ----------------------------------------------
+  getPending = () => this.pending;
+  beginConnection = (next) => {
+    this.pending = next;
+    this.requestRender();
+  };
+  updateConnection = (to, toPosition) => {
+    if (!this.pending) return;
+    this.pending = { ...this.pending, to, toPosition };
+    this.requestRender();
+  };
+  endConnection = () => {
+    if (!this.pending) return;
+    this.pending = null;
+    this.requestRender();
+  };
+  // --- render loop hook ----------------------------------------------------
+  requestRender = () => {
+    this.renderRequester();
+  };
+  bindRenderRequester = (fn) => {
+    this.renderRequester = fn;
+  };
+  // --- reconnect gateway (runtime-bound; consulted by <Handle>) ------------
+  reconnectDelegate = null;
+  getSelectedEdge = () => this.selectedEdgeId;
+  bindReconnectDelegate = (delegate) => {
+    this.reconnectDelegate = delegate;
+  };
+  getReconnectDelegate = () => this.reconnectDelegate;
+};
+function createRivetStore(init) {
+  return new RivetGraphStore(init);
+}
+
+// src/viewport.ts
+function worldToScreen(point, viewport) {
+  return {
+    x: point.x * viewport.zoom + viewport.x,
+    y: point.y * viewport.zoom + viewport.y
+  };
+}
+function screenToWorld(point, viewport) {
+  return {
+    x: (point.x - viewport.x) / viewport.zoom,
+    y: (point.y - viewport.y) / viewport.zoom
+  };
+}
+function zoomAt(viewport, anchor, nextZoom, minZoom = 0.1, maxZoom = 4) {
+  const zoom = clamp(nextZoom, minZoom, maxZoom);
+  const world = screenToWorld(anchor, viewport);
+  return {
+    zoom,
+    x: anchor.x - world.x * zoom,
+    y: anchor.y - world.y * zoom
+  };
+}
+function viewportToCss(viewport) {
+  return `translate(${viewport.x}px, ${viewport.y}px) scale(${viewport.zoom})`;
+}
+function visibleWorldRect(viewport, width, height) {
+  const topLeft = screenToWorld({ x: 0, y: 0 }, viewport);
+  const bottomRight = screenToWorld({ x: width, y: height }, viewport);
+  return {
+    x: topLeft.x,
+    y: topLeft.y,
+    width: bottomRight.x - topLeft.x,
+    height: bottomRight.y - topLeft.y
+  };
+}
+function rectsIntersect(a, b) {
+  return a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y;
+}
+
+// src/connection.ts
+function clientToWorld(store, paneRef, clientX, clientY) {
+  const rect = paneRef.current?.getBoundingClientRect();
+  const point = { x: clientX - (rect?.left ?? 0), y: clientY - (rect?.top ?? 0) };
+  return screenToWorld(point, store.getViewport());
+}
+function isCompatible(from, hit) {
+  const canSource = from.type !== "target";
+  const canTarget = from.type !== "source";
+  return hit.nodeId !== from.nodeId && (canSource && hit.type !== "source" || canTarget && hit.type !== "target");
+}
+function findHandleAt(clientX, clientY) {
+  const element = document.elementFromPoint(clientX, clientY);
+  const handleEl = element instanceof Element ? element.closest(SELECTOR.handle) : null;
+  if (!handleEl) return null;
+  const { rivetHandleNode, rivetHandleId, rivetHandleType } = handleEl.dataset;
+  if (!rivetHandleNode || !rivetHandleId || !rivetHandleType) return null;
+  return {
+    nodeId: rivetHandleNode,
+    handleId: rivetHandleId,
+    type: rivetHandleType
+  };
+}
+function handleWorldPosition(store, hit) {
+  const record = store.handles.get(handleKey(hit.nodeId, hit.handleId));
+  const node = store.nodes.get(hit.nodeId);
+  if (!record || !node) return null;
+  const origin = store.getNodeWorldPosition(hit.nodeId);
+  return { x: origin.x + record.offset.x, y: origin.y + record.offset.y };
+}
+function handleSide(store, hit) {
+  return store.handles.get(handleKey(hit.nodeId, hit.handleId))?.position ?? null;
+}
+function resolveConnectionHit(store, paneRef, from, clientX, clientY) {
+  const direct = findHandleAt(clientX, clientY);
+  if (direct && isCompatible(from, direct)) return direct;
+  const el = document.elementFromPoint(clientX, clientY);
+  const nodeEl = el instanceof Element ? el.closest(SELECTOR.node) : null;
+  const overNodeId = nodeEl?.dataset.rivetNode;
+  if (!overNodeId || overNodeId === from.nodeId) return null;
+  const world = clientToWorld(store, paneRef, clientX, clientY);
+  let best = null;
+  let bestDist = Number.POSITIVE_INFINITY;
+  for (const record of store.handles.values()) {
+    if (record.nodeId !== overNodeId) continue;
+    const candidate = {
+      nodeId: record.nodeId,
+      handleId: record.handleId,
+      type: record.type
+    };
+    if (!isCompatible(from, candidate)) continue;
+    const node = store.nodes.get(record.nodeId);
+    if (!node) continue;
+    const origin = store.getNodeWorldPosition(record.nodeId);
+    const dx = origin.x + record.offset.x - world.x;
+    const dy = origin.y + record.offset.y - world.y;
+    const dist = dx * dx + dy * dy;
+    if (dist < bestDist) {
+      bestDist = dist;
+      best = candidate;
+    }
+  }
+  return best;
+}
+function orientConnection(from, hit) {
+  const canSource = from.type !== "target";
+  const draggedAsSource = canSource && hit.type !== "source";
+  return draggedAsSource ? {
+    source: from.nodeId,
+    sourceHandle: from.handleId,
+    target: hit.nodeId,
+    targetHandle: hit.handleId
+  } : {
+    source: hit.nodeId,
+    sourceHandle: hit.handleId,
+    target: from.nodeId,
+    targetHandle: from.handleId
+  };
+}
+
+// src/input/connection-drag.ts
+function startConnectionDrag(config) {
+  const {
+    store,
+    paneRef,
+    from,
+    begin,
+    commit,
+    validate,
+    map,
+    onEnd,
+    resolveHit = resolveConnectionHit
+  } = config;
+  store.beginConnection(begin);
+  const onMove = (event) => {
+    const hit = resolveHit(store, paneRef, from, event.clientX, event.clientY);
+    const snapped = hit && handleWorldPosition(store, hit);
+    store.updateConnection(
+      snapped ?? clientToWorld(store, paneRef, event.clientX, event.clientY),
+      snapped && hit ? handleSide(store, hit) ?? void 0 : void 0
+    );
+  };
+  const detach = () => {
+    window.removeEventListener("pointermove", onMove);
+    window.removeEventListener("pointerup", onUp);
+    window.removeEventListener("pointercancel", onCancel);
+  };
+  const onUp = (event) => {
+    detach();
+    if (!store.getPending()) {
+      onEnd?.();
+      return;
+    }
+    const hit = resolveHit(store, paneRef, from, event.clientX, event.clientY);
+    if (hit) {
+      const connection = orientConnection(from, hit);
+      if (!validate || validate(connection)) {
+        const mapped = map ? map(connection) : connection;
+        if (mapped) commit(mapped);
+      }
+    }
+    onEnd?.();
+    store.endConnection();
+  };
+  const onCancel = () => {
+    detach();
+    onEnd?.();
+    store.endConnection();
+  };
+  window.addEventListener("pointermove", onMove);
+  window.addEventListener("pointerup", onUp);
+  window.addEventListener("pointercancel", onCancel);
+}
+var SIZE = 10;
+var positionStyles = {
+  right: { right: 0, top: "50%", transform: "translate(50%, -50%)" },
+  left: { left: 0, top: "50%", transform: "translate(-50%, -50%)" },
+  top: { top: 0, left: "50%", transform: "translate(-50%, -50%)" },
+  bottom: { bottom: 0, left: "50%", transform: "translate(-50%, 50%)" }
+};
+function Handle({
+  type,
+  id,
+  position,
+  className,
+  style,
+  ariaLabel
+}) {
+  const { store, paneRef, isValidConnection, mapConnection, onConnect, announce } = useRivetContext();
+  const { nodeId, wrapperRef } = useRivetNodeContext();
+  const ref = useRef(null);
+  const resolvedType = type ?? "either";
+  const place = position ?? (resolvedType === "target" ? "left" : "right");
+  const handleId = id ?? place;
+  useEffect(() => {
+    const el = ref.current;
+    const wrapper = wrapperRef.current;
+    if (!el || !wrapper) return;
+    const measure = () => {
+      const zoom = store.getViewport().zoom || 1;
+      const hr = el.getBoundingClientRect();
+      const wr = wrapper.getBoundingClientRect();
+      store.registerHandle({
+        nodeId,
+        handleId,
+        type: resolvedType,
+        position: place,
+        offset: {
+          x: (hr.left + hr.width / 2 - wr.left) / zoom,
+          y: (hr.top + hr.height / 2 - wr.top) / zoom
+        }
+      });
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(wrapper);
+    observer.observe(el);
+    return () => {
+      observer.disconnect();
+      store.unregisterHandle(nodeId, handleId);
+    };
+  }, [store, wrapperRef, nodeId, handleId, resolvedType, place]);
+  const nodeName = (id2) => store.nodes.get(id2)?.ariaLabel ?? `node ${id2}`;
+  const onKeyDown = (event) => {
+    if (event.key === "Escape") {
+      if (!store.getPending()) return;
+      event.preventDefault();
+      event.stopPropagation();
+      store.endConnection();
+      announce("Connection cancelled.");
+      return;
+    }
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    const self = { nodeId, handleId, type: resolvedType };
+    const pending = store.getPending();
+    if (!pending) {
+      const origin = handleWorldPosition(store, self);
+      if (!origin) return;
+      store.beginConnection({
+        source: nodeId,
+        sourceHandle: handleId,
+        sourceType: resolvedType,
+        from: origin,
+        to: origin
+      });
+      announce(
+        `Connection started from ${nodeName(nodeId)}. Move focus to a handle on another node and press Enter to connect, or press Escape to cancel.`
+      );
+      return;
+    }
+    if (pending.source === nodeId && pending.sourceHandle === handleId) {
+      store.endConnection();
+      announce("Connection cancelled.");
+      return;
+    }
+    const from = {
+      nodeId: pending.source,
+      handleId: pending.sourceHandle,
+      type: pending.sourceType
+    };
+    if (!isCompatible(from, self)) {
+      announce("These handles cannot be connected.");
+      return;
+    }
+    const connection = orientConnection(from, self);
+    if (isValidConnection && !isValidConnection(connection)) {
+      announce("Connection rejected.");
+      return;
+    }
+    const mapped = mapConnection ? mapConnection(connection) : connection;
+    if (mapped) {
+      store.addEdge({
+        id: createId("edge"),
+        source: mapped.source,
+        target: mapped.target,
+        sourceHandle: mapped.sourceHandle ?? void 0,
+        targetHandle: mapped.targetHandle ?? void 0
+      });
+      onConnect?.(mapped);
+      announce(`Connected ${nodeName(mapped.source)} to ${nodeName(mapped.target)}.`);
+    }
+    store.endConnection();
+  };
+  const onFocus = () => {
+    const pending = store.getPending();
+    if (!pending || pending.source === nodeId && pending.sourceHandle === handleId) return;
+    const world = handleWorldPosition(store, { nodeId, handleId});
+    if (world) store.updateConnection(world, place);
+  };
+  const onPointerDown = (event) => {
+    if (event.button !== 0) return;
+    event.stopPropagation();
+    event.preventDefault();
+    if (!event.altKey) {
+      const delegate = store.getReconnectDelegate();
+      const endpointHit = delegate?.pickEndpoint(event.clientX, event.clientY);
+      if (delegate && endpointHit) {
+        delegate.begin(endpointHit.edgeId, endpointHit.end);
+        return;
+      }
+    }
+    const from = { nodeId, handleId, type: resolvedType };
+    const start = handleWorldPosition(store, from);
+    const origin = start ?? clientToWorld(store, paneRef, event.clientX, event.clientY);
+    startConnectionDrag({
+      store,
+      paneRef,
+      from,
+      begin: {
+        source: nodeId,
+        sourceHandle: handleId,
+        sourceType: resolvedType,
+        from: origin,
+        to: origin
+      },
+      validate: isValidConnection,
+      map: mapConnection,
+      commit: (connection) => {
+        store.addEdge({
+          id: createId("edge"),
+          source: connection.source,
+          target: connection.target,
+          sourceHandle: connection.sourceHandle ?? void 0,
+          targetHandle: connection.targetHandle ?? void 0
+        });
+        onConnect?.(connection);
+      }
+    });
+  };
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: the handle doubles as a drag affordance and measurement target, so it can't be a native <button>
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className,
+        tabIndex: 0,
+        role: "button",
+        "aria-roledescription": "connection handle",
+        "aria-label": ariaLabel ?? `${handleId} handle of ${nodeName(nodeId)}`,
+        onPointerDown,
+        onKeyDown,
+        onFocus,
+        "data-rivet-handle": "",
+        "data-rivet-handle-node": nodeId,
+        "data-rivet-handle-id": handleId,
+        "data-rivet-handle-type": resolvedType,
+        style: {
+          position: "absolute",
+          width: SIZE,
+          height: SIZE,
+          borderRadius: "50%",
+          background: "#ffffff",
+          border: "1.5px solid #6366f1",
+          boxSizing: "border-box",
+          pointerEvents: "auto",
+          cursor: "crosshair",
+          zIndex: 1,
+          ...positionStyles[place],
+          ...style
+        }
+      }
+    )
+  );
+}
+var baseStyle = {
+  position: "relative",
+  minWidth: 120,
+  padding: "10px 14px",
+  borderRadius: 8,
+  border: "1px solid rgba(100, 116, 139, 0.4)",
+  background: "#ffffff",
+  color: "#0f172a",
+  fontSize: 13,
+  lineHeight: 1.3,
+  boxShadow: "0 1px 2px rgba(15, 23, 42, 0.08)"
+};
+var hoveredStyle = {
+  borderColor: "rgba(99, 102, 241, 0.6)"
+};
+var selectedStyle = {
+  borderColor: "#6366f1",
+  boxShadow: "0 0 0 2px rgba(99, 102, 241, 0.35)"
+};
+function DefaultNode({ data, selected, hovered }) {
+  const label = data && typeof data === "object" && "label" in data ? String(data.label) : "Node";
+  const style = selected ? { ...baseStyle, ...selectedStyle } : hovered ? { ...baseStyle, ...hoveredStyle } : baseStyle;
+  return /* @__PURE__ */ jsxs("div", { style, children: [
+    /* @__PURE__ */ jsx(Handle, { type: "target", position: "left" }),
+    label,
+    /* @__PURE__ */ jsx(Handle, { type: "source", position: "right" })
+  ] });
+}
+var baseStyle2 = {
+  position: "relative",
+  width: "100%",
+  height: "100%",
+  // Keeps an unsized group visible; give real bounds via `width`/`height`.
+  minWidth: 150,
+  minHeight: 100,
+  boxSizing: "border-box",
+  borderRadius: 10,
+  border: "1.5px dashed rgba(100, 116, 139, 0.45)",
+  background: "rgba(100, 116, 139, 0.06)"
+};
+var hoveredStyle2 = {
+  borderColor: "rgba(99, 102, 241, 0.6)"
+};
+var selectedStyle2 = {
+  borderColor: "#6366f1",
+  background: "rgba(99, 102, 241, 0.08)"
+};
+var labelStyle = {
+  position: "absolute",
+  top: 6,
+  left: 10,
+  fontSize: 11,
+  fontWeight: 500,
+  color: "rgba(100, 116, 139, 0.9)",
+  pointerEvents: "none",
+  userSelect: "none"
+};
+function GroupNode({ data, selected, hovered }) {
+  const label = data && typeof data === "object" && "label" in data ? String(data.label) : null;
+  const style = selected ? { ...baseStyle2, ...selectedStyle2 } : hovered ? { ...baseStyle2, ...hoveredStyle2 } : baseStyle2;
+  return /* @__PURE__ */ jsx("div", { style, children: label !== null && /* @__PURE__ */ jsx("div", { style: labelStyle, children: label }) });
+}
+var BUILTIN_NODE_TYPES = {
+  default: DefaultNode,
+  group: GroupNode
+};
+var MAP_PADDING = 8;
+var containerStyle = {
+  position: "absolute",
+  bottom: 16,
+  right: 16,
+  borderRadius: 8,
+  overflow: "hidden",
+  border: "1px solid rgba(100, 116, 139, 0.4)",
+  background: "rgba(248, 250, 252, 0.9)",
+  boxShadow: "0 1px 3px rgba(15, 23, 42, 0.12)",
+  cursor: "pointer"
+};
+function MiniMap({
+  width = 200,
+  height = 150,
+  nodeColor = "rgba(100, 116, 139, 0.7)",
+  selectedColor = "#6366f1",
+  maskColor = "rgba(15, 23, 42, 0.12)",
+  className,
+  style
+}) {
+  const { store, paneRef } = useRivetContext();
+  const canvasRef = useRef(null);
+  const transformRef = useRef({ scale: 1, offsetX: 0, offsetY: 0 });
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext("2d");
+    if (!canvas || !ctx) return;
+    const dpr = window.devicePixelRatio || 1;
+    canvas.width = Math.round(width * dpr);
+    canvas.height = Math.round(height * dpr);
+    const draw = () => {
+      const viewport = store.getViewport();
+      const pane = paneRef.current;
+      const paneWidth = pane?.clientWidth ?? width;
+      const paneHeight = pane?.clientHeight ?? height;
+      const view = visibleWorldRect(viewport, paneWidth, paneHeight);
+      let minX = view.x;
+      let minY = view.y;
+      let maxX = view.x + view.width;
+      let maxY = view.y + view.height;
+      for (const id of store.nodes.keys()) {
+        const box = store.getNodeRect(id);
+        minX = Math.min(minX, box.x);
+        minY = Math.min(minY, box.y);
+        maxX = Math.max(maxX, box.x + box.width);
+        maxY = Math.max(maxY, box.y + box.height);
+      }
+      const boundsWidth = maxX - minX || 1;
+      const boundsHeight = maxY - minY || 1;
+      const innerWidth = width - MAP_PADDING * 2;
+      const innerHeight = height - MAP_PADDING * 2;
+      const scale = Math.min(innerWidth / boundsWidth, innerHeight / boundsHeight);
+      const offsetX = MAP_PADDING + (innerWidth - boundsWidth * scale) / 2 - minX * scale;
+      const offsetY = MAP_PADDING + (innerHeight - boundsHeight * scale) / 2 - minY * scale;
+      transformRef.current = { scale, offsetX, offsetY };
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      ctx.clearRect(0, 0, width, height);
+      for (const node of store.nodes.values()) {
+        const box = store.getNodeRect(node.id);
+        ctx.fillStyle = node.selected ? selectedColor : nodeColor;
+        ctx.fillRect(
+          box.x * scale + offsetX,
+          box.y * scale + offsetY,
+          Math.max(1, box.width * scale),
+          Math.max(1, box.height * scale)
+        );
+      }
+      const vx = view.x * scale + offsetX;
+      const vy = view.y * scale + offsetY;
+      const vw = view.width * scale;
+      const vh = view.height * scale;
+      ctx.fillStyle = maskColor;
+      ctx.beginPath();
+      ctx.rect(0, 0, width, height);
+      ctx.rect(vx, vy, vw, vh);
+      ctx.fill("evenodd");
+      ctx.strokeStyle = "rgba(99, 102, 241, 0.9)";
+      ctx.lineWidth = 1;
+      ctx.strokeRect(vx, vy, vw, vh);
+    };
+    draw();
+    return store.subscribeFrame(draw);
+  }, [store, paneRef, width, height, nodeColor, selectedColor, maskColor]);
+  const recenter = (event) => {
+    const canvas = canvasRef.current;
+    const pane = paneRef.current;
+    if (!canvas || !pane) return;
+    const rect = canvas.getBoundingClientRect();
+    const { scale, offsetX, offsetY } = transformRef.current;
+    const worldX = (event.clientX - rect.left - offsetX) / scale;
+    const worldY = (event.clientY - rect.top - offsetY) / scale;
+    const viewport = store.getViewport();
+    store.setViewport({
+      zoom: viewport.zoom,
+      x: pane.clientWidth / 2 - worldX * viewport.zoom,
+      y: pane.clientHeight / 2 - worldY * viewport.zoom
+    });
+    store.requestRender();
+  };
+  const onPointerDown = (event) => {
+    if (event.button !== 0) return;
+    event.currentTarget.setPointerCapture(event.pointerId);
+    recenter(event);
+  };
+  const onPointerMove = (event) => {
+    if (event.buttons & 1) recenter(event);
+  };
+  return /* @__PURE__ */ jsx("div", { className, style: { ...containerStyle, ...style, width, height }, children: /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      ref: canvasRef,
+      style: { width, height, display: "block" },
+      onPointerDown,
+      onPointerMove
+    }
+  ) });
+}
+var NS = "ns-resize";
+var EW = "ew-resize";
+var NWSE = "nwse-resize";
+var NESW = "nesw-resize";
+var HANDLES = [
+  { key: "nw", top: true, left: true, style: { top: 0, left: 0 }, cursor: NWSE },
+  { key: "n", top: true, style: { top: 0, left: "50%" }, cursor: NS },
+  { key: "ne", top: true, right: true, style: { top: 0, left: "100%" }, cursor: NESW },
+  { key: "e", right: true, style: { top: "50%", left: "100%" }, cursor: EW },
+  { key: "se", bottom: true, right: true, style: { top: "100%", left: "100%" }, cursor: NWSE },
+  { key: "s", bottom: true, style: { top: "100%", left: "50%" }, cursor: NS },
+  { key: "sw", bottom: true, left: true, style: { top: "100%", left: 0 }, cursor: NESW },
+  { key: "w", left: true, style: { top: "50%", left: 0 }, cursor: EW }
+];
+var dotStyle = (color) => ({
+  position: "absolute",
+  width: 8,
+  height: 8,
+  background: "#ffffff",
+  border: `1.5px solid ${color}`,
+  borderRadius: 2,
+  boxSizing: "border-box",
+  pointerEvents: "auto",
+  zIndex: 2
+});
+function NodeResizer({
+  minWidth = 20,
+  minHeight = 20,
+  maxWidth = Number.POSITIVE_INFINITY,
+  maxHeight = Number.POSITIVE_INFINITY,
+  keepAspectRatio = false,
+  color = "#6366f1",
+  onResize,
+  onResizeEnd
+}) {
+  const { store } = useRivetContext();
+  const { nodeId } = useRivetNodeContext();
+  const startResize = (dir) => (event) => {
+    if (event.button !== 0) return;
+    event.stopPropagation();
+    event.preventDefault();
+    const node = store.nodes.get(nodeId);
+    if (!node) return;
+    const zoom = store.getViewport().zoom || 1;
+    const startW = node.width ?? node.size?.width ?? 0;
+    const startH = node.height ?? node.size?.height ?? 0;
+    const start = node.position;
+    const startX = event.clientX;
+    const startY = event.clientY;
+    const ratio = startH > 0 ? startW / startH : 1;
+    const isCorner = (dir.left || dir.right) && (dir.top || dir.bottom);
+    const compute = (moveEvent) => {
+      const dx = (moveEvent.clientX - startX) / zoom;
+      const dy = (moveEvent.clientY - startY) / zoom;
+      let width = startW + (dir.right ? dx : dir.left ? -dx : 0);
+      let height = startH + (dir.bottom ? dy : dir.top ? -dy : 0);
+      width = clamp(width, minWidth, maxWidth);
+      height = clamp(height, minHeight, maxHeight);
+      if (keepAspectRatio && isCorner) {
+        height = clamp(width / ratio, minHeight, maxHeight);
+        width = height * ratio;
+      }
+      const position = {
+        x: dir.left ? start.x + (startW - width) : start.x,
+        y: dir.top ? start.y + (startH - height) : start.y
+      };
+      return { size: { width, height }, position };
+    };
+    const onMove = (moveEvent) => {
+      const { size, position } = compute(moveEvent);
+      const moved = dir.left || dir.top;
+      store.resizeNode(nodeId, size, moved ? position : void 0, false);
+      onResize?.(size, position);
+    };
+    const onUp = (upEvent) => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      const { size, position } = compute(upEvent);
+      const moved = dir.left || dir.top;
+      store.resizeNode(nodeId, size, moved ? position : void 0, true);
+      onResizeEnd?.(size, position);
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: HANDLES.map((dir) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-rivet-resize-handle": dir.key,
+      onPointerDown: startResize(dir),
+      style: {
+        ...dotStyle(color),
+        ...dir.style,
+        transform: "translate(-50%, -50%)",
+        cursor: dir.cursor
+      }
+    },
+    dir.key
+  )) });
+}
+function shallowEqual(a, b) {
+  if (Object.is(a, b)) return true;
+  if (typeof a !== "object" || a === null || typeof b !== "object" || b === null) return false;
+  const aArr = Array.isArray(a);
+  if (aArr !== Array.isArray(b)) return false;
+  if (aArr) {
+    const bArr = b;
+    if (a.length !== bArr.length) return false;
+    return a.every((v, i) => Object.is(v, bArr[i]));
+  }
+  const aKeys = Object.keys(a);
+  const bObj = b;
+  if (aKeys.length !== Object.keys(bObj).length) return false;
+  return aKeys.every(
+    (k) => Object.hasOwn(bObj, k) && Object.is(a[k], bObj[k])
+  );
+}
+function useShallowStable(value) {
+  const ref = useRef(value);
+  if (!shallowEqual(ref.current, value)) ref.current = value;
+  return ref.current;
+}
+function useStableOptional(fn) {
+  const ref = useRef(fn);
+  ref.current = fn;
+  const stable = useRef(null);
+  if (stable.current === null) stable.current = (...args) => ref.current?.(...args);
+  return fn ? stable.current : void 0;
+}
+function useRivetConfig(params) {
+  const panOnDrag = useShallowStable(params.panOnDrag);
+  const selectionKeyCode = useShallowStable(params.selectionKeyCode);
+  const multiSelectionKeyCode = useShallowStable(params.multiSelectionKeyCode);
+  const panButtons = useMemo(
+    () => panOnDrag === true ? [0] : panOnDrag === false ? [] : panOnDrag,
+    [panOnDrag]
+  );
+  const selectionKeys = useMemo(
+    () => selectionKeyCode == null ? [] : Array.isArray(selectionKeyCode) ? selectionKeyCode : [selectionKeyCode],
+    [selectionKeyCode]
+  );
+  const multiSelectionKeys = useMemo(
+    () => Array.isArray(multiSelectionKeyCode) ? multiSelectionKeyCode : [multiSelectionKeyCode],
+    [multiSelectionKeyCode]
+  );
+  const nodeTypes = useShallowStable(params.nodeTypes);
+  const edgeTypes = useShallowStable(params.edgeTypes);
+  const defaultEdgeOptions = useShallowStable(params.defaultEdgeOptions);
+  const snapGrid = useShallowStable(params.snapGrid ?? null);
+  const swimlaneMargin = useShallowStable(params.swimlaneMargin);
+  const anchorOptionsInput = useShallowStable(params.anchorOptions);
+  const anchorOptions = useMemo(
+    () => ({ ...DEFAULT_ANCHOR_OPTIONS, ...anchorOptionsInput }),
+    [anchorOptionsInput]
+  );
+  const isValidConnection = useStableOptional(params.isValidConnection);
+  const mapConnection = useStableOptional(params.mapConnection);
+  const onConnect = useStableOptional(params.onConnect);
+  const onLaneChange = useStableOptional(params.onLaneChange);
+  const renderSwimlaneHeader = useStableOptional(params.renderSwimlaneHeader);
+  const renderSwimlaneLabel = useStableOptional(params.renderSwimlaneLabel);
+  return {
+    nodeTypes,
+    edgeTypes,
+    defaultEdgeOptions,
+    snapGrid,
+    swimlaneMargin,
+    anchorOptions,
+    panButtons,
+    selectionKeys,
+    multiSelectionKeys,
+    isValidConnection,
+    mapConnection,
+    onConnect,
+    onLaneChange,
+    renderSwimlaneHeader,
+    renderSwimlaneLabel
+  };
+}
+
+// src/input/keyboard.ts
+var ARROW_STEP = 10;
+var ARROW_STEP_SHIFT = 5;
+var ARROW_DIRS = {
+  ArrowUp: { x: 0, y: -1 },
+  ArrowDown: { x: 0, y: 1 },
+  ArrowLeft: { x: -1, y: 0 },
+  ArrowRight: { x: 1, y: 0 }
+};
+function createKeyboardHandler(store) {
+  return (event) => {
+    if (event.defaultPrevented) return;
+    const active = document.activeElement;
+    if (active instanceof HTMLElement && (active.tagName === "INPUT" || active.tagName === "TEXTAREA" || active.isContentEditable)) {
+      return;
+    }
+    if (event.key === "Delete" || event.key === "Backspace") {
+      if (store.deleteSelection()) event.preventDefault();
+      return;
+    }
+    if (event.key === "Escape") {
+      if (store.getPending()) store.endConnection();
+      else if (store.isSelectionBoxActive()) store.selectNode(null);
+      return;
+    }
+    const dir = ARROW_DIRS[event.key];
+    if (!dir) return;
+    const movers = store.getMovers(store.getSelectedNodes());
+    if (movers.length === 0) return;
+    event.preventDefault();
+    const step = event.shiftKey ? ARROW_STEP * ARROW_STEP_SHIFT : ARROW_STEP;
+    for (const id of movers) {
+      const node = store.nodes.get(id);
+      if (!node) continue;
+      store.moveNode(
+        id,
+        { x: node.position.x + dir.x * step, y: node.position.y + dir.y * step },
+        true
+      );
+    }
+  };
+}
+
+// src/input/keys.ts
+var MODIFIER_KEYS = /* @__PURE__ */ new Set(["Shift", "Control", "Meta", "Alt"]);
+function keyHeld(event, keys, pressedKeys) {
+  return keys.some(
+    (key) => MODIFIER_KEYS.has(key) ? event.getModifierState(key) : pressedKeys?.has(key) ?? false
+  );
+}
+
+// src/input/layer-hint.ts
+function createLayerHint(layer, idleMs) {
+  let lastTransform = "";
+  let timer = 0;
+  return {
+    apply(transform) {
+      if (transform === lastTransform) return;
+      lastTransform = transform;
+      layer.style.transform = transform;
+      layer.style.willChange = "transform";
+      if (timer) clearTimeout(timer);
+      timer = window.setTimeout(() => {
+        layer.style.willChange = "auto";
+      }, idleMs);
+    },
+    dispose() {
+      if (timer) clearTimeout(timer);
+    }
+  };
+}
+
+// src/input/marquee-controller.ts
+var OVERLAY_STYLE = "position:absolute;pointer-events:none;display:none;border:1px solid rgba(99,102,241,0.9);background:rgba(99,102,241,0.12);";
+function createMarqueeController(deps) {
+  const { store, pane } = deps;
+  let active = false;
+  let additive = false;
+  let base = [];
+  let start = { x: 0, y: 0 };
+  const overlay = document.createElement("div");
+  overlay.style.cssText = OVERLAY_STYLE;
+  pane.appendChild(overlay);
+  const apply = (px, py) => {
+    const left = Math.min(start.x, px);
+    const top = Math.min(start.y, py);
+    const width = Math.abs(px - start.x);
+    const height = Math.abs(py - start.y);
+    overlay.style.left = `${left}px`;
+    overlay.style.top = `${top}px`;
+    overlay.style.width = `${width}px`;
+    overlay.style.height = `${height}px`;
+    const viewport = store.getViewport();
+    const topLeft = screenToWorld({ x: left, y: top }, viewport);
+    const bottomRight = screenToWorld({ x: left + width, y: top + height }, viewport);
+    const worldRect = {
+      x: topLeft.x,
+      y: topLeft.y,
+      width: bottomRight.x - topLeft.x,
+      height: bottomRight.y - topLeft.y
+    };
+    const ids = [];
+    for (const [id, node] of store.nodes) {
+      if (node.selectable === false) continue;
+      if (rectsIntersect(worldRect, store.getNodeRect(id))) ids.push(id);
+    }
+    store.selectNodes(additive ? [.../* @__PURE__ */ new Set([...base, ...ids])] : ids);
+  };
+  return {
+    isActive: () => active,
+    start(event, px, py, isAdditive) {
+      active = true;
+      additive = isAdditive;
+      base = isAdditive ? store.getSelectedNodes() : [];
+      start = { x: px, y: py };
+      overlay.style.display = "block";
+      apply(px, py);
+      pane.setPointerCapture(event.pointerId);
+    },
+    move(px, py) {
+      if (!active) return;
+      apply(px, py);
+    },
+    end(event) {
+      if (!active) return;
+      active = false;
+      overlay.style.display = "none";
+      pane.releasePointerCapture(event.pointerId);
+      store.setSelectionBoxActive(store.getSelectedNodes().length > 0);
+    },
+    dispose() {
+      overlay.remove();
+    }
+  };
+}
+
+// src/input/pan-controller.ts
+var PAN_MOVE_THRESHOLD = 3;
+function createPanController(deps) {
+  const { store, pane, schedule } = deps;
+  let panning = false;
+  let button = 0;
+  let moved = false;
+  let start = { x: 0, y: 0 };
+  let origin = { x: 0, y: 0 };
+  let suppressContextMenu = false;
+  return {
+    isPanning: () => panning,
+    start(event) {
+      panning = true;
+      button = event.button;
+      moved = false;
+      const viewport = store.getViewport();
+      start = { x: event.clientX, y: event.clientY };
+      origin = { x: viewport.x, y: viewport.y };
+      pane.setPointerCapture(event.pointerId);
+    },
+    move(event) {
+      if (!panning) return;
+      const dx = event.clientX - start.x;
+      const dy = event.clientY - start.y;
+      if (!moved && Math.hypot(dx, dy) > PAN_MOVE_THRESHOLD) {
+        moved = true;
+        if (button === 2) suppressContextMenu = true;
+      }
+      const viewport = store.getViewport();
+      store.setViewport({ ...viewport, x: origin.x + dx, y: origin.y + dy });
+      schedule();
+    },
+    end(event) {
+      if (!panning) return;
+      panning = false;
+      pane.releasePointerCapture(event.pointerId);
+    },
+    suppressNextContextMenu() {
+      if (!suppressContextMenu) return false;
+      suppressContextMenu = false;
+      return true;
+    }
+  };
+}
+
+// src/input/resize-controller.ts
+function createResizeController(deps) {
+  const { pane, bgCanvas, size, edgeRenderer, foregroundRenderer, schedule } = deps;
+  const resize = () => {
+    const rect = pane.getBoundingClientRect();
+    size.width = rect.width;
+    size.height = rect.height;
+    size.dpr = window.devicePixelRatio || 1;
+    bgCanvas.width = Math.max(1, Math.round(rect.width * size.dpr));
+    bgCanvas.height = Math.max(1, Math.round(rect.height * size.dpr));
+    bgCanvas.style.width = `${rect.width}px`;
+    bgCanvas.style.height = `${rect.height}px`;
+    edgeRenderer.resize(rect.width, rect.height, size.dpr);
+    foregroundRenderer.resize(rect.width, rect.height, size.dpr);
+    schedule();
+  };
+  const observer = new ResizeObserver(resize);
+  observer.observe(pane);
+  resize();
+  return { dispose: () => observer.disconnect() };
+}
+
+// src/input/zoom-controller.ts
+var WHEEL_LINE_PX = 16;
+var ZOOM_EASE = 0.22;
+function createZoomController(deps) {
+  const { store, pane, size, minZoom, maxZoom, zoomSpeed, scrollToPan, schedule } = deps;
+  let target = null;
+  return {
+    cancel() {
+      target = null;
+    },
+    step() {
+      if (!target) return;
+      const vp = store.getViewport();
+      const diff = target.zoom - vp.zoom;
+      if (Math.abs(diff) < 5e-4) {
+        store.setViewport(zoomAt(vp, target.anchor, target.zoom, minZoom, maxZoom));
+        target = null;
+        return;
+      }
+      store.setViewport(zoomAt(vp, target.anchor, vp.zoom + diff * ZOOM_EASE, minZoom, maxZoom));
+      schedule();
+    },
+    onWheel(event) {
+      event.preventDefault();
+      const scale = event.deltaMode === 1 ? WHEEL_LINE_PX : event.deltaMode === 2 ? size.height : 1;
+      const deltaX = event.deltaX * scale;
+      const deltaY = event.deltaY * scale;
+      if (scrollToPan && !event.ctrlKey) {
+        target = null;
+        const viewport = store.getViewport();
+        store.setViewport({ ...viewport, x: viewport.x - deltaX, y: viewport.y - deltaY });
+        schedule();
+        return;
+      }
+      const rect = pane.getBoundingClientRect();
+      const anchor = { x: event.clientX - rect.left, y: event.clientY - rect.top };
+      const base = target?.zoom ?? store.getViewport().zoom;
+      const nextZoom = clamp(base * Math.exp(-deltaY * zoomSpeed), minZoom, maxZoom);
+      target = { zoom: nextZoom, anchor };
+      schedule();
+    }
+  };
+}
+
+// src/renderer/background.ts
+function drawDotGrid(ctx, width, height, viewport, options) {
+  const gap = options?.gap ?? 24;
+  const radius = options?.radius ?? 1;
+  const color = options?.color ?? "rgba(100, 116, 139, 0.35)";
+  const step = gap * viewport.zoom;
+  if (step < 8) return;
+  const offsetX = (viewport.x % step + step) % step;
+  const offsetY = (viewport.y % step + step) % step;
+  ctx.fillStyle = color;
+  ctx.beginPath();
+  for (let x = offsetX; x < width; x += step) {
+    for (let y = offsetY; y < height; y += step) {
+      ctx.moveTo(x + radius, y);
+      ctx.arc(x, y, radius, 0, Math.PI * 2);
+    }
+  }
+  ctx.fill();
+}
+
+// src/renderer/edge-paths.ts
+var SIDE_DIR = {
+  left: { x: -1, y: 0 },
+  right: { x: 1, y: 0 },
+  top: { x: 0, y: -1 },
+  bottom: { x: 0, y: 1 }
+};
+var BEZIER_SEGMENT_PX = 8;
+var BEZIER_MIN_SAMPLES = 16;
+var BEZIER_MAX_SAMPLES = 160;
+var CORNER_RADIUS = 8;
+var ARC_SAMPLES = 6;
+function cubicAt(a, b, c, d, t) {
+  const mt = 1 - t;
+  return mt * mt * mt * a + 3 * mt * mt * t * b + 3 * mt * t * t * c + t * t * t * d;
+}
+function quadAt(a, b, c, t) {
+  const mt = 1 - t;
+  return mt * mt * a + 2 * mt * t * b + t * t * c;
+}
+var getStraightPath = ({ sourceX, sourceY, targetX, targetY }) => ({
+  points: [
+    { x: sourceX, y: sourceY },
+    { x: targetX, y: targetY }
+  ],
+  labelX: (sourceX + targetX) / 2,
+  labelY: (sourceY + targetY) / 2
+});
+var getBezierPath = (params) => {
+  const { sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition } = params;
+  const sDir = SIDE_DIR[sourcePosition];
+  const tDir = SIDE_DIR[targetPosition];
+  const dist = Math.hypot(targetX - sourceX, targetY - sourceY);
+  const reach = Math.max(40, dist * 0.4);
+  const p0 = { x: sourceX, y: sourceY };
+  const p1 = { x: sourceX + sDir.x * reach, y: sourceY + sDir.y * reach };
+  const p2 = { x: targetX + tDir.x * reach, y: targetY + tDir.y * reach };
+  const p3 = { x: targetX, y: targetY };
+  const ctrlLen = Math.hypot(p1.x - p0.x, p1.y - p0.y) + Math.hypot(p2.x - p1.x, p2.y - p1.y) + Math.hypot(p3.x - p2.x, p3.y - p2.y);
+  const samples = Math.max(
+    BEZIER_MIN_SAMPLES,
+    Math.min(BEZIER_MAX_SAMPLES, Math.ceil(ctrlLen / BEZIER_SEGMENT_PX))
+  );
+  const points = [];
+  for (let i = 0; i <= samples; i++) {
+    const t = i / samples;
+    points.push({
+      x: cubicAt(p0.x, p1.x, p2.x, p3.x, t),
+      y: cubicAt(p0.y, p1.y, p2.y, p3.y, t)
+    });
+  }
+  return {
+    points,
+    labelX: cubicAt(p0.x, p1.x, p2.x, p3.x, 0.5),
+    labelY: cubicAt(p0.y, p1.y, p2.y, p3.y, 0.5)
+  };
+};
+var STEP_OFFSET = 20;
+function simplifyCorners(corners) {
+  const out = [];
+  for (const p of corners) {
+    const a = out[out.length - 2];
+    const b = out[out.length - 1];
+    if (b && b.x === p.x && b.y === p.y) continue;
+    if (a && b && (a.x === b.x && b.x === p.x || a.y === b.y && b.y === p.y)) out.pop();
+    out.push(p);
+  }
+  return out;
+}
+function stepCorners(params) {
+  const { sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition } = params;
+  const s = { x: sourceX, y: sourceY };
+  const t = { x: targetX, y: targetY };
+  const sDir = SIDE_DIR[sourcePosition];
+  const tDir = SIDE_DIR[targetPosition];
+  const sg = { x: sourceX + sDir.x * STEP_OFFSET, y: sourceY + sDir.y * STEP_OFFSET };
+  const tg = { x: targetX + tDir.x * STEP_OFFSET, y: targetY + tDir.y * STEP_OFFSET };
+  return simplifyCorners(routeCorners(s, t, sg, tg, sDir, tDir));
+}
+function routeCorners(s, t, sg, tg, sDir, tDir) {
+  const sHoriz = sDir.x !== 0;
+  const tHoriz = tDir.x !== 0;
+  if (sHoriz && tHoriz) {
+    if (sDir.x * tDir.x < 0) {
+      if ((t.x - s.x) * sDir.x >= 2 * STEP_OFFSET) {
+        const midX = (s.x + t.x) / 2;
+        return [s, { x: midX, y: s.y }, { x: midX, y: t.y }, t];
+      }
+      const midY = (s.y + t.y) / 2;
+      return [s, sg, { x: sg.x, y: midY }, { x: tg.x, y: midY }, tg, t];
+    }
+    const railX = sDir.x > 0 ? Math.max(sg.x, tg.x) : Math.min(sg.x, tg.x);
+    return [s, { x: railX, y: s.y }, { x: railX, y: t.y }, t];
+  }
+  if (!sHoriz && !tHoriz) {
+    if (sDir.y * tDir.y < 0) {
+      if ((t.y - s.y) * sDir.y >= 2 * STEP_OFFSET) {
+        const midY = (s.y + t.y) / 2;
+        return [s, { x: s.x, y: midY }, { x: t.x, y: midY }, t];
+      }
+      const midX = (s.x + t.x) / 2;
+      return [s, sg, { x: midX, y: sg.y }, { x: midX, y: tg.y }, tg, t];
+    }
+    const railY = sDir.y > 0 ? Math.max(sg.y, tg.y) : Math.min(sg.y, tg.y);
+    return [s, { x: s.x, y: railY }, { x: t.x, y: railY }, t];
+  }
+  const corner = sHoriz ? { x: t.x, y: s.y } : { x: s.x, y: t.y };
+  const exitsSource = sHoriz ? (corner.x - s.x) * sDir.x >= STEP_OFFSET : (corner.y - s.y) * sDir.y >= STEP_OFFSET;
+  const exitsTarget = tHoriz ? (corner.x - t.x) * tDir.x >= STEP_OFFSET : (corner.y - t.y) * tDir.y >= STEP_OFFSET;
+  if (exitsSource && exitsTarget) return [s, corner, t];
+  const bend = sHoriz ? { x: sg.x, y: tg.y } : { x: tg.x, y: sg.y };
+  return [s, sg, bend, tg, t];
+}
+function roundCorners(corners, radius) {
+  if (corners.length <= 2) return corners;
+  const points = [];
+  const first = corners[0];
+  if (first) points.push(first);
+  for (let i = 1; i < corners.length - 1; i++) {
+    const prev = corners[i - 1];
+    const curr = corners[i];
+    const next = corners[i + 1];
+    if (!prev || !curr || !next) continue;
+    const inLen = Math.hypot(curr.x - prev.x, curr.y - prev.y);
+    const outLen = Math.hypot(next.x - curr.x, next.y - curr.y);
+    const r = Math.min(radius, inLen / 2, outLen / 2);
+    const inPt = {
+      x: curr.x + (prev.x - curr.x) / (inLen || 1) * r,
+      y: curr.y + (prev.y - curr.y) / (inLen || 1) * r
+    };
+    const outPt = {
+      x: curr.x + (next.x - curr.x) / (outLen || 1) * r,
+      y: curr.y + (next.y - curr.y) / (outLen || 1) * r
+    };
+    points.push(inPt);
+    for (let j = 1; j < ARC_SAMPLES; j++) {
+      const tt = j / ARC_SAMPLES;
+      points.push({
+        x: quadAt(inPt.x, curr.x, outPt.x, tt),
+        y: quadAt(inPt.y, curr.y, outPt.y, tt)
+      });
+    }
+    points.push(outPt);
+  }
+  const last = corners[corners.length - 1];
+  if (last) points.push(last);
+  return points;
+}
+function stepLabel(corners, params) {
+  const i = Math.floor((corners.length - 1) / 2);
+  const a = corners[i];
+  const b = corners[i + 1];
+  if (!a || !b) return { x: params.sourceX, y: params.sourceY };
+  return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+}
+var getSmoothStepPath = (params) => {
+  const corners = stepCorners(params);
+  const label = stepLabel(corners, params);
+  return { points: roundCorners(corners, CORNER_RADIUS), labelX: label.x, labelY: label.y };
+};
+var getStepPath = (params) => {
+  const corners = stepCorners(params);
+  const label = stepLabel(corners, params);
+  return { points: corners, labelX: label.x, labelY: label.y };
+};
+var BUILTIN_EDGE_TYPES = {
+  bezier: getBezierPath,
+  smoothstep: getSmoothStepPath,
+  step: getStepPath,
+  straight: getStraightPath
+};
+
+// src/renderer/edge-geometry.ts
+var EDGE_COLOR = "rgba(100, 116, 139, 0.75)";
+var EDGE_COLOR_SELECTED = "#6366f1";
+var EDGE_COLOR_HOVERED = "rgba(99, 102, 241, 0.9)";
+var EDGE_WIDTH = 1.5;
+var EDGE_WIDTH_HOVERED = 2.5;
+var PENDING_COLOR = "#6366f1";
+var OPPOSITE = {
+  left: "right",
+  right: "left",
+  top: "bottom",
+  bottom: "top"
+};
+var falseToNull = (m) => m || null;
+function buildEdges(edges, nodes, viewport, edgeTypes, defaults, extras) {
+  const handles = extras?.handles;
+  const hovered = extras?.hovered;
+  const reconnecting = extras?.reconnecting;
+  const worldPositions = extras?.worldPositions;
+  const resolved = [];
+  for (const edge of edges) {
+    if (edge.id === reconnecting) continue;
+    const source = nodes.get(edge.source);
+    const target = nodes.get(edge.target);
+    if (!source || !target) continue;
+    const frame = { handles, viewport, worldPositions, extras };
+    const start = resolveEnd(edge, "source", source, target, frame);
+    const end = resolveEnd(edge, "target", target, source, frame);
+    const params = {
+      sourceX: start.point.x,
+      sourceY: start.point.y,
+      targetX: end.point.x,
+      targetY: end.point.y,
+      sourcePosition: start.position,
+      targetPosition: end.position
+    };
+    const pathFn = edgeTypes[edge.type ?? defaults.type ?? "bezier"] ?? getBezierPath;
+    const path = pathFn(params);
+    if (path.points.length < 2) continue;
+    const style = { ...defaults.style, ...edge.style };
+    const isHovered = edge.id === hovered;
+    resolved.push({
+      id: edge.id,
+      points: path.points,
+      source: start.point,
+      target: end.point,
+      label: edge.label !== void 0 ? { x: path.labelX, y: path.labelY } : void 0,
+      stroke: edge.selected ? EDGE_COLOR_SELECTED : isHovered ? EDGE_COLOR_HOVERED : style.stroke ?? EDGE_COLOR,
+      width: style.strokeWidth ?? (isHovered ? EDGE_WIDTH_HOVERED : EDGE_WIDTH),
+      opacity: style.opacity ?? 1,
+      animated: edge.animated ?? defaults.animated ?? false,
+      dash: style.strokeDasharray,
+      markerStart: falseToNull(edge.markerStart ?? defaults.markerStart),
+      markerEnd: falseToNull(edge.markerEnd ?? defaults.markerEnd)
+    });
+  }
+  return resolved;
+}
+function buildPendingPath(pending, handles, viewport) {
+  const record = handles?.get(handleKey(pending.source, pending.sourceHandle));
+  const sourcePosition = record?.position ?? (pending.sourceType === "target" ? "left" : "right");
+  const from = worldToScreen(pending.from, viewport);
+  const to = worldToScreen(pending.to, viewport);
+  const targetPosition = pending.toPosition ?? OPPOSITE[sourcePosition];
+  return getBezierPath({
+    sourceX: from.x,
+    sourceY: from.y,
+    targetX: to.x,
+    targetY: to.y,
+    sourcePosition,
+    targetPosition
+  }).points;
+}
+function pointOnSide(rect, side, alongPct = 50) {
+  const t = alongPct / 100;
+  switch (side) {
+    case "left":
+      return { x: rect.x, y: rect.y + rect.height * t };
+    case "right":
+      return { x: rect.x + rect.width, y: rect.y + rect.height * t };
+    case "top":
+      return { x: rect.x + rect.width * t, y: rect.y };
+    case "bottom":
+      return { x: rect.x + rect.width * t, y: rect.y + rect.height };
+  }
+}
+function nodeRect(node, worldPositions) {
+  const origin = worldPositions?.get(node.id) ?? node.position;
+  const size = node.size ?? DEFAULT_NODE_SIZE;
+  return { x: origin.x, y: origin.y, width: size.width, height: size.height };
+}
+var WANTED_TYPES = {
+  source: ["source", "either"],
+  target: ["target", "either"]
+};
+function handleOnSide(nodeId, side, role, handles) {
+  if (!handles) return null;
+  for (const record of handles.values()) {
+    if (record.nodeId === nodeId && record.position === side && WANTED_TYPES[role].includes(record.type)) {
+      return record;
+    }
+  }
+  return null;
+}
+function resolveEnd(edge, role, node, peer, frame) {
+  const { handles, viewport, worldPositions, extras } = frame;
+  const handleId = role === "source" ? edge.sourceHandle : edge.targetHandle;
+  const rect = nodeRect(node, worldPositions);
+  const anchorId = parseAnchorAutoHandleId(handleId) ?? parseAnchorHandleId(handleId)?.anchorId ?? null;
+  const endAt = (side2) => {
+    const alongPct = (anchorId ? extras?.anchorPlacement?.(node.id, anchorId, side2) : null) ?? void 0;
+    if (alongPct === void 0 && !anchorId) {
+      const candidate = handleOnSide(node.id, side2, role, handles);
+      if (candidate) {
+        return {
+          point: worldToScreen(
+            { x: rect.x + candidate.offset.x, y: rect.y + candidate.offset.y },
+            viewport
+          ),
+          position: side2
+        };
+      }
+    }
+    return { point: worldToScreen(pointOnSide(rect, side2, alongPct), viewport), position: side2 };
+  };
+  const registered = handleId && handles ? handles.get(handleKey(node.id, handleId)) : void 0;
+  const pinnedSide = parseAnchorHandleId(handleId)?.side ?? registered?.position ?? parseSideHandleId(handleId);
+  const live = extras?.liveAlignNodes !== void 0 && (extras.liveAlignNodes.has(edge.source) || extras.liveAlignNodes.has(edge.target)) && edge.source !== edge.target;
+  if (pinnedSide && !live) {
+    if (registered) {
+      return {
+        point: worldToScreen(
+          { x: rect.x + registered.offset.x, y: rect.y + registered.offset.y },
+          viewport
+        ),
+        position: registered.position
+      };
+    }
+    return endAt(pinnedSide);
+  }
+  const key = displayedSideKey(edge.id, role);
+  const side = resolveFacingSide(
+    rect,
+    nodeRect(peer, worldPositions),
+    extras?.displayedSides?.get(key)
+  );
+  extras?.displayedSides?.set(key, side);
+  return endAt(side);
+}
+function distanceToPolyline(point, points) {
+  let best = Number.POSITIVE_INFINITY;
+  for (let i = 0; i < points.length - 1; i++) {
+    const a = points[i];
+    const b = points[i + 1];
+    if (!a || !b) continue;
+    best = Math.min(best, distanceToSegment(point, a, b));
+  }
+  return best;
+}
+function distanceToSegment(p, a, b) {
+  const dx = b.x - a.x;
+  const dy = b.y - a.y;
+  const lenSq = dx * dx + dy * dy;
+  if (lenSq === 0) return Math.hypot(p.x - a.x, p.y - a.y);
+  let t = ((p.x - a.x) * dx + (p.y - a.y) * dy) / lenSq;
+  t = Math.max(0, Math.min(1, t));
+  return Math.hypot(p.x - (a.x + t * dx), p.y - (a.y + t * dy));
+}
+
+// src/renderer/swimlane.ts
+var DEFAULTS = {
+  separator: "rgba(100, 116, 139, 0.28)",
+  tintAlpha: 0.06
+};
+function drawSwimlanes(ctx, width, height, viewport, lanes, style) {
+  if (lanes.length === 0) return;
+  const separator = DEFAULTS.separator;
+  const tintAlpha = DEFAULTS.tintAlpha;
+  for (const lane of lanes) {
+    if (!lane.color) continue;
+    const top = viewport.y + lane.top * viewport.zoom;
+    const bottom = viewport.y + (lane.top + lane.height) * viewport.zoom;
+    if (bottom < 0 || top > height) continue;
+    ctx.fillStyle = withAlpha(lane.color, tintAlpha);
+    ctx.fillRect(0, top, width, bottom - top);
+  }
+  ctx.strokeStyle = separator;
+  ctx.lineWidth = 1;
+  ctx.beginPath();
+  for (const lane of lanes) {
+    const bottom = viewport.y + (lane.top + lane.height) * viewport.zoom;
+    if (bottom < 0 || bottom > height) continue;
+    ctx.moveTo(0, bottom - 0.5);
+    ctx.lineTo(width, bottom - 0.5);
+  }
+  ctx.stroke();
+}
+
+// src/hooks/use-rivet-runtime.ts
+var CULL_MARGIN_PX = 240;
+var ZOOM_STEP = 1.2;
+var WILL_CHANGE_IDLE_MS = 180;
+var GUIDE_COLOR = "rgba(236, 72, 153, 0.9)";
+function drawAlignmentGuides(ctx, guides, viewport, size) {
+  if (guides.length === 0) return;
+  ctx.save();
+  ctx.setTransform(size.dpr, 0, 0, size.dpr, 0, 0);
+  ctx.strokeStyle = GUIDE_COLOR;
+  ctx.lineWidth = 1;
+  ctx.beginPath();
+  for (const guide of guides) {
+    if (guide.axis === "x") {
+      const a = worldToScreen({ x: guide.position, y: guide.start }, viewport);
+      const b = worldToScreen({ x: guide.position, y: guide.end }, viewport);
+      ctx.moveTo(Math.round(a.x) + 0.5, a.y);
+      ctx.lineTo(Math.round(b.x) + 0.5, b.y);
+    } else {
+      const a = worldToScreen({ x: guide.start, y: guide.position }, viewport);
+      const b = worldToScreen({ x: guide.end, y: guide.position }, viewport);
+      ctx.moveTo(a.x, Math.round(a.y) + 0.5);
+      ctx.lineTo(b.x, Math.round(b.y) + 0.5);
+    }
+  }
+  ctx.stroke();
+  ctx.restore();
+}
+var ENDPOINT_BUBBLE_RADIUS = 6;
+var HOVER_KEEP_TOLERANCE = 16;
+function drawEndpointBubbles(ctx, ends, size) {
+  ctx.save();
+  ctx.setTransform(size.dpr, 0, 0, size.dpr, 0, 0);
+  ctx.fillStyle = PENDING_COLOR;
+  ctx.strokeStyle = "#ffffff";
+  ctx.lineWidth = 1.5;
+  for (const point of [ends.source, ends.target]) {
+    ctx.beginPath();
+    ctx.arc(point.x, point.y, ENDPOINT_BUBBLE_RADIUS, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.stroke();
+  }
+  ctx.restore();
+}
+function useRivetRuntime(params) {
+  const { store, paneRef, nodeContainerRef } = params;
+  const { backgroundCanvasRef, edgeCanvasRef, foregroundCanvasRef } = params;
+  const { swimlaneLanes, scrollToPan, zoomSpeed } = params;
+  const { minZoom, maxZoom, gridGap, edgeTypes, defaultEdgeOptions, anchorOptions } = params;
+  const { edgeRenderer: createEdgeRenderer } = params;
+  const { panButtons, selectionOnDrag, selectionKeys, multiSelectionKeys } = params;
+  const [visibleIds, setVisibleIds] = useState([]);
+  const reconnectRef = useRef(params);
+  reconnectRef.current = params;
+  const sizeRef = useRef({ width: 0, height: 0, dpr: 1 });
+  const visibleKeyRef = useRef("");
+  const swimlaneLanesRef = useRef(swimlaneLanes);
+  useEffect(() => {
+    swimlaneLanesRef.current = swimlaneLanes;
+    store.requestRender();
+  }, [store, swimlaneLanes]);
+  const controls = useMemo(
+    () => buildControls({ store, sizeRef, minZoom, maxZoom }),
+    [store, minZoom, maxZoom]
+  );
+  const getViewportElements = useMemo(
+    () => buildViewportQuery({ store, sizeRef, lanesRef: swimlaneLanesRef }),
+    [store]
+  );
+  useEffect(() => {
+    const pane = paneRef.current;
+    const bgCanvas = backgroundCanvasRef.current;
+    const edgeCanvas = edgeCanvasRef.current;
+    const foregroundCanvas = foregroundCanvasRef.current;
+    const nodeContainer = nodeContainerRef.current;
+    if (!pane || !bgCanvas || !edgeCanvas || !foregroundCanvas || !nodeContainer) return;
+    const bgCtx = bgCanvas.getContext("2d");
+    if (!bgCtx) return;
+    const rendererOptions = { edgeTypes, defaultEdgeOptions };
+    const edgeRenderer = createEdgeRenderer(edgeCanvas, rendererOptions);
+    const foregroundRenderer = createEdgeRenderer(foregroundCanvas, rendererOptions);
+    const fgCtx = foregroundCanvas.getContext("2d");
+    const size = sizeRef.current;
+    let frame = 0;
+    let dirty = true;
+    let hoveredEdgeId = null;
+    const anchorPlacement = (nodeId, anchorId, side) => {
+      const record = store.anchors.get(handleKey(nodeId, anchorId));
+      return record?.geometry ? strayPlacementPct(record.geometry, side, anchorOptions) : null;
+    };
+    const layerHint = createLayerHint(nodeContainer, WILL_CHANGE_IDLE_MS);
+    const zoom = createZoomController({
+      store,
+      pane,
+      size,
+      minZoom,
+      maxZoom,
+      zoomSpeed,
+      scrollToPan,
+      schedule: () => schedule()
+    });
+    const render = () => {
+      zoom.step();
+      const viewport = store.getViewport();
+      layerHint.apply(viewportToCss(viewport));
+      bgCtx.setTransform(size.dpr, 0, 0, size.dpr, 0, 0);
+      bgCtx.clearRect(0, 0, size.width, size.height);
+      drawDotGrid(bgCtx, size.width, size.height, viewport, { gap: gridGap });
+      drawSwimlanes(bgCtx, size.width, size.height, viewport, swimlaneLanesRef.current);
+      const worldPositions = store.getWorldPositions();
+      const edgeList = [...store.edges.values()];
+      const pending = store.getPending();
+      const liveAlignNodes = store.getEdgeAlignment() === "live" && store.isNodeDragging() ? store.getDraggingNodeIds() : void 0;
+      edgeRenderer.draw(edgeList, store.nodes, viewport, {
+        handles: store.handles,
+        pending: null,
+        hovered: hoveredEdgeId,
+        reconnecting: pending?.reconnecting ?? null,
+        worldPositions,
+        displayedSides: store.getDisplayedSides(),
+        liveAlignNodes,
+        anchorPlacement
+      });
+      store.setEdgeLabelAnchors(edgeRenderer.getLabels());
+      foregroundRenderer.draw([], store.nodes, viewport, {
+        handles: store.handles,
+        pending
+      });
+      if (fgCtx) drawAlignmentGuides(fgCtx, store.getAlignmentGuides(), viewport, size);
+      if (fgCtx) {
+        const affordanceId = hoveredEdgeId ?? store.getSelectedEdge();
+        const edge = affordanceId ? store.edges.get(affordanceId) : void 0;
+        const reconnectable = edge ? edge.reconnectable ?? reconnectRef.current.edgesReconnectable : false;
+        if (edge && reconnectable && edge.id !== pending?.reconnecting) {
+          const ends = edgeRenderer.getEndpoints?.().get(edge.id);
+          if (ends) drawEndpointBubbles(fgCtx, ends, size);
+        }
+      }
+      if (edgeList.some((edge) => edge.animated ?? defaultEdgeOptions?.animated)) schedule();
+      const rect = visibleWorldRect(viewport, size.width, size.height);
+      const margin = CULL_MARGIN_PX / viewport.zoom;
+      const view = {
+        x: rect.x - margin,
+        y: rect.y - margin,
+        width: rect.width + margin * 2,
+        height: rect.height + margin * 2
+      };
+      const ids = [];
+      for (const node of store.nodes.values()) {
+        const nodeSize = node.size ?? DEFAULT_NODE_SIZE;
+        const origin = worldPositions.get(node.id) ?? node.position;
+        if (!node.size || rectsIntersect(view, {
+          x: origin.x,
+          y: origin.y,
+          width: nodeSize.width,
+          height: nodeSize.height
+        })) {
+          ids.push(node.id);
+        }
+      }
+      const key = ids.join("|");
+      if (key !== visibleKeyRef.current) {
+        visibleKeyRef.current = key;
+        setVisibleIds(ids);
+      }
+      store.notifyFrame();
+    };
+    const tick = () => {
+      frame = 0;
+      if (!dirty) return;
+      dirty = false;
+      render();
+    };
+    const schedule = () => {
+      dirty = true;
+      if (frame) return;
+      frame = requestAnimationFrame(tick);
+    };
+    store.bindRenderRequester(schedule);
+    const setEdgeHover = (id) => {
+      if (hoveredEdgeId === id) return;
+      hoveredEdgeId = id;
+      schedule();
+    };
+    const pan = createPanController({ store, pane, schedule });
+    const marquee = createMarqueeController({ store, pane });
+    const pressedKeys = /* @__PURE__ */ new Set();
+    const selectionKeyHeld = (event) => keyHeld(event, selectionKeys, pressedKeys);
+    const multiSelectHeld = (event) => keyHeld(event, multiSelectionKeys, pressedKeys);
+    const startMarquee = (event, px, py) => {
+      setEdgeHover(null);
+      marquee.start(event, px, py, multiSelectHeld(event));
+    };
+    const endpointWorld = (edge, nodeId, handleId, role) => {
+      if (handleId) {
+        const record = store.handles.get(handleKey(nodeId, handleId));
+        if (record) {
+          const wp = handleWorldPosition(store, { nodeId, handleId, type: record.type });
+          if (wp) return wp;
+        }
+      }
+      const side = parseAnchorHandleId(handleId)?.side ?? parseSideHandleId(handleId) ?? store.getDisplayedSides().get(displayedSideKey(edge.id, role));
+      if (side) {
+        const anchorId = parseAnchorAutoHandleId(handleId) ?? parseAnchorHandleId(handleId)?.anchorId;
+        const pct = anchorId ? anchorPlacement(nodeId, anchorId, side) ?? void 0 : void 0;
+        return pointOnSide(store.getNodeRect(nodeId), side, pct);
+      }
+      const node = store.nodes.get(nodeId);
+      const size2 = node?.size ?? DEFAULT_NODE_SIZE;
+      const base = store.getNodeWorldPosition(nodeId);
+      const x = role === "source" ? base.x + size2.width : base.x;
+      return { x, y: base.y + size2.height / 2 };
+    };
+    const beginReconnect = (edge, end) => {
+      zoom.cancel();
+      const fixedIsSource = end === "target";
+      const fixedNodeId = fixedIsSource ? edge.source : edge.target;
+      const fixedHandleId = fixedIsSource ? edge.sourceHandle : edge.targetHandle;
+      const from = {
+        nodeId: fixedNodeId,
+        handleId: fixedHandleId ?? "",
+        type: fixedIsSource ? "source" : "target"
+      };
+      const fixedWorld = endpointWorld(
+        edge,
+        fixedNodeId,
+        fixedHandleId,
+        fixedIsSource ? "source" : "target"
+      );
+      const looseWorld = endpointWorld(
+        edge,
+        fixedIsSource ? edge.target : edge.source,
+        fixedIsSource ? edge.targetHandle : edge.sourceHandle,
+        fixedIsSource ? "target" : "source"
+      );
+      startConnectionDrag({
+        store,
+        paneRef,
+        from,
+        begin: {
+          source: from.nodeId,
+          sourceHandle: from.handleId,
+          sourceType: from.type,
+          from: fixedWorld,
+          to: looseWorld,
+          reconnecting: edge.id
+        },
+        // Callbacks read `reconnectRef.current` when the drag ends, so a late
+        // prop change (this effect never re-runs on callback identity) is honored.
+        validate: (connection) => reconnectRef.current.isValidConnection?.(connection) ?? true,
+        map: (connection) => {
+          const mapFn = reconnectRef.current.mapConnection;
+          return mapFn ? mapFn(connection) : connection;
+        },
+        commit: (connection) => {
+          store.reconnectEdge(edge.id, connection);
+          reconnectRef.current.onReconnect?.(edge, connection);
+        },
+        onEnd: () => reconnectRef.current.onReconnectEnd?.(edge)
+      });
+      reconnectRef.current.onReconnectStart?.(edge);
+    };
+    store.bindReconnectDelegate({
+      pickEndpoint: (clientX, clientY) => {
+        const rect = pane.getBoundingClientRect();
+        const hit = edgeRenderer.pickEndpoint(clientX - rect.left, clientY - rect.top);
+        if (!hit) return null;
+        if (hit.edgeId !== hoveredEdgeId && hit.edgeId !== store.getSelectedEdge()) return null;
+        const edge = store.edges.get(hit.edgeId);
+        const reconnectable = edge ? edge.reconnectable ?? reconnectRef.current.edgesReconnectable : false;
+        return reconnectable ? hit : null;
+      },
+      begin: (edgeId, end) => {
+        const edge = store.edges.get(edgeId);
+        if (edge) beginReconnect(edge, end);
+      }
+    });
+    const onPointerDown = (event) => {
+      if (store.getPending()) store.endConnection();
+      if (event.target instanceof Element && event.target.closest(SELECTOR.paneGestureExempt)) {
+        return;
+      }
+      const rect = pane.getBoundingClientRect();
+      const px = event.clientX - rect.left;
+      const py = event.clientY - rect.top;
+      if (event.button !== 0) {
+        if (panButtons.includes(event.button)) {
+          event.preventDefault();
+          zoom.cancel();
+          pan.start(event);
+        }
+        return;
+      }
+      zoom.cancel();
+      if (selectionKeyHeld(event)) {
+        startMarquee(event, px, py);
+        return;
+      }
+      const endpointHit = edgeRenderer.pickEndpoint(px, py);
+      if (endpointHit) {
+        const edge = store.edges.get(endpointHit.edgeId);
+        const reconnectable = edge?.reconnectable ?? reconnectRef.current.edgesReconnectable;
+        if (edge && reconnectable) {
+          beginReconnect(edge, endpointHit.end);
+          return;
+        }
+      }
+      const hitEdge = edgeRenderer.pick(px, py);
+      if (hitEdge && store.edges.get(hitEdge)?.selectable !== false) {
+        store.selectEdge(hitEdge);
+        return;
+      }
+      store.selectNode(null);
+      if (selectionOnDrag) {
+        startMarquee(event, px, py);
+        return;
+      }
+      if (panButtons.includes(0)) pan.start(event);
+    };
+    const onPointerMove = (event) => {
+      const rect = pane.getBoundingClientRect();
+      const px = event.clientX - rect.left;
+      const py = event.clientY - rect.top;
+      if (marquee.isActive()) {
+        marquee.move(px, py);
+        return;
+      }
+      if (pan.isPanning()) {
+        pan.move(event);
+        return;
+      }
+      if (store.getPending()) return;
+      const overNode = event.target instanceof Element && event.target.closest(`${SELECTOR.node}, ${SELECTOR.nodesSelection}`);
+      let overEdge = overNode ? null : edgeRenderer.pick(px, py);
+      if (!overEdge && hoveredEdgeId) {
+        const near = edgeRenderer.pick(px, py, HOVER_KEEP_TOLERANCE) === hoveredEdgeId || edgeRenderer.pickEndpoint(px, py)?.edgeId === hoveredEdgeId;
+        if (near) overEdge = hoveredEdgeId;
+      }
+      pane.style.cursor = overEdge ? "pointer" : "";
+      setEdgeHover(overEdge);
+    };
+    const onPointerUp = (event) => {
+      if (marquee.isActive()) {
+        marquee.end(event);
+        return;
+      }
+      pan.end(event);
+    };
+    const onKeyDown = createKeyboardHandler(store);
+    let focusRetryFrame = 0;
+    const unsubscribeFocus = store.subscribeFocus((id) => {
+      if (focusRetryFrame) {
+        cancelAnimationFrame(focusRetryFrame);
+        focusRetryFrame = 0;
+      }
+      if (id === null) return;
+      const el = store.getNodeElement(id);
+      if (el) {
+        if (document.activeElement !== el) el.focus();
+        return;
+      }
+      controls.centerNode(id);
+      let tries = 0;
+      const attempt = () => {
+        focusRetryFrame = 0;
+        const mounted = store.getNodeElement(id);
+        if (mounted) {
+          mounted.focus();
+          return;
+        }
+        if (++tries < 10) focusRetryFrame = requestAnimationFrame(attempt);
+      };
+      focusRetryFrame = requestAnimationFrame(attempt);
+    });
+    const onContextMenu = (event) => {
+      if (!pan.suppressNextContextMenu()) return;
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    const onTrackKeyDown = (event) => pressedKeys.add(event.key);
+    const onTrackKeyUp = (event) => pressedKeys.delete(event.key);
+    const clearPressedKeys = () => pressedKeys.clear();
+    const resizer = createResizeController({
+      pane,
+      bgCanvas,
+      size,
+      edgeRenderer,
+      foregroundRenderer,
+      schedule
+    });
+    pane.addEventListener("wheel", zoom.onWheel, { passive: false });
+    pane.addEventListener("pointerdown", onPointerDown);
+    pane.addEventListener("pointermove", onPointerMove);
+    pane.addEventListener("pointerup", onPointerUp);
+    pane.addEventListener("pointercancel", onPointerUp);
+    pane.addEventListener("contextmenu", onContextMenu, { capture: true });
+    window.addEventListener("keydown", onKeyDown);
+    window.addEventListener("keydown", onTrackKeyDown);
+    window.addEventListener("keyup", onTrackKeyUp);
+    window.addEventListener("blur", clearPressedKeys);
+    return () => {
+      resizer.dispose();
+      store.bindRenderRequester(() => {
+      });
+      store.bindReconnectDelegate(null);
+      unsubscribeFocus();
+      if (focusRetryFrame) cancelAnimationFrame(focusRetryFrame);
+      if (frame) cancelAnimationFrame(frame);
+      layerHint.dispose();
+      pane.removeEventListener("wheel", zoom.onWheel);
+      pane.removeEventListener("pointerdown", onPointerDown);
+      pane.removeEventListener("pointermove", onPointerMove);
+      pane.removeEventListener("pointerup", onPointerUp);
+      pane.removeEventListener("pointercancel", onPointerUp);
+      pane.removeEventListener("contextmenu", onContextMenu, { capture: true });
+      window.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener("keydown", onTrackKeyDown);
+      window.removeEventListener("keyup", onTrackKeyUp);
+      window.removeEventListener("blur", clearPressedKeys);
+      marquee.dispose();
+      edgeRenderer.dispose();
+      foregroundRenderer.dispose();
+    };
+  }, [
+    store,
+    controls,
+    paneRef,
+    nodeContainerRef,
+    backgroundCanvasRef,
+    edgeCanvasRef,
+    foregroundCanvasRef,
+    scrollToPan,
+    zoomSpeed,
+    minZoom,
+    maxZoom,
+    gridGap,
+    edgeTypes,
+    defaultEdgeOptions,
+    anchorOptions,
+    createEdgeRenderer,
+    panButtons,
+    selectionOnDrag,
+    selectionKeys,
+    multiSelectionKeys
+  ]);
+  return { visibleIds, controls, getViewportElements };
+}
+function buildViewportQuery({
+  store,
+  sizeRef,
+  lanesRef
+}) {
+  return () => {
+    const { width, height } = sizeRef.current;
+    const rect = visibleWorldRect(store.getViewport(), width, height);
+    const nodes = [];
+    for (const node of store.nodes.values()) {
+      if (rectsIntersect(store.getNodeRect(node.id), rect)) nodes.push(node);
+    }
+    const lanes = [];
+    for (const lane of lanesRef.current) {
+      const overlapH = Math.min(lane.top + lane.height, rect.y + rect.height) - Math.max(lane.top, rect.y);
+      if (overlapH <= 0) continue;
+      lanes.push({ ...lane, visibleArea: overlapH * rect.width });
+    }
+    lanes.sort((a, b) => b.visibleArea - a.visibleArea);
+    return { rect, nodes, lanes };
+  };
+}
+var sameViewport = (a, b) => a.x === b.x && a.y === b.y && a.zoom === b.zoom;
+var easeInOutCubic = (t) => t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
+function buildControls({ store, sizeRef, minZoom, maxZoom }) {
+  let animId = null;
+  let written = null;
+  const cancelAnim = () => {
+    if (animId !== null) cancelAnimationFrame(animId);
+    animId = null;
+    written = null;
+  };
+  const commit = (viewport) => {
+    store.setViewport(viewport);
+    store.requestRender();
+  };
+  const applyViewport = (target, duration) => {
+    cancelAnim();
+    const from = store.getViewport();
+    if (!duration || duration <= 0 || sameViewport(from, target)) {
+      commit(target);
+      return;
+    }
+    const start = performance.now();
+    const step = (now) => {
+      if (written && !sameViewport(store.getViewport(), written)) {
+        animId = null;
+        written = null;
+        return;
+      }
+      const t = Math.min(1, (now - start) / duration);
+      const e = easeInOutCubic(t);
+      commit({
+        x: from.x + (target.x - from.x) * e,
+        y: from.y + (target.y - from.y) * e,
+        zoom: from.zoom + (target.zoom - from.zoom) * e
+      });
+      written = store.getViewport();
+      if (t < 1) {
+        animId = requestAnimationFrame(step);
+      } else {
+        animId = null;
+        written = null;
+      }
+    };
+    animId = requestAnimationFrame(step);
+  };
+  const zoomToLevel = (nextZoom) => {
+    cancelAnim();
+    const { width, height } = sizeRef.current;
+    const anchor = { x: width / 2, y: height / 2 };
+    commit(zoomAt(store.getViewport(), anchor, nextZoom, minZoom, maxZoom));
+  };
+  const frameBounds = (rect, options) => {
+    const { width, height } = sizeRef.current;
+    if (width === 0 || height === 0) return;
+    const padding = options?.padding ?? 0.1;
+    const availWidth = width * (1 - padding * 2);
+    const availHeight = height * (1 - padding * 2);
+    const fitZoom = Math.min(
+      rect.width > 0 ? availWidth / rect.width : maxZoom,
+      rect.height > 0 ? availHeight / rect.height : maxZoom
+    );
+    const zoom = clamp(fitZoom, minZoom, options?.maxZoom ?? maxZoom);
+    const centerX = rect.x + rect.width / 2;
+    const centerY = rect.y + rect.height / 2;
+    applyViewport(
+      { zoom, x: width / 2 - centerX * zoom, y: height / 2 - centerY * zoom },
+      options?.duration
+    );
+  };
+  const boundsOfNodes = (ids) => boundingRect([...ids].map((id) => store.getNodeRect(id)));
+  return {
+    zoomIn: () => zoomToLevel(store.getViewport().zoom * ZOOM_STEP),
+    zoomOut: () => zoomToLevel(store.getViewport().zoom / ZOOM_STEP),
+    zoomTo: (zoom) => zoomToLevel(zoom),
+    fitView: (options) => {
+      const rect = boundsOfNodes(store.nodes.keys());
+      if (rect) frameBounds(rect, options);
+    },
+    fitSelection: (options) => {
+      const rect = boundsOfNodes(store.getSelectedNodes());
+      if (rect) frameBounds(rect, options);
+    },
+    fitBounds: (rect, options) => frameBounds(rect, options),
+    centerNode: (id, options) => {
+      if (!store.nodes.has(id)) return;
+      const { width, height } = sizeRef.current;
+      if (width === 0 || height === 0) return;
+      const box = store.getNodeRect(id);
+      const zoom = clamp(options?.zoom ?? store.getViewport().zoom, minZoom, maxZoom);
+      const centerX = box.x + box.width / 2;
+      const centerY = box.y + box.height / 2;
+      applyViewport(
+        { zoom, x: width / 2 - centerX * zoom, y: height / 2 - centerY * zoom },
+        options?.duration
+      );
+    },
+    getViewport: () => store.getViewport(),
+    setViewport: (viewport) => {
+      cancelAnim();
+      commit(viewport);
+    }
+  };
+}
+function useSwimlanes(params) {
+  const { store, swimlane, swimlaneMargin, swimlaneResizable } = params;
+  const { clampToSwimlane, swimlaneBottomReveal, onSwimlaneSizeChange } = params;
+  const [laneHeights, setLaneHeights] = useState({});
+  const resizableEnabled = (swimlaneResizable ?? true) && Boolean(swimlane?.length);
+  const effectiveSwimlane = useMemo(() => {
+    if (!swimlane) return void 0;
+    if (Object.keys(laneHeights).length === 0) return swimlane;
+    return swimlane.map((group) => ({
+      ...group,
+      lanes: group.lanes.map((lane) => ({
+        ...lane,
+        size: laneHeights[lane.id] ?? lane.size
+      }))
+    }));
+  }, [swimlane, laneHeights]);
+  const groups = useMemo(
+    () => effectiveSwimlane ? resolveSwimlanes(effectiveSwimlane) : [],
+    [effectiveSwimlane]
+  );
+  const lanes = useMemo(() => flattenLanes(groups), [groups]);
+  const margin = useMemo(() => resolveMargin(swimlaneMargin), [swimlaneMargin]);
+  const clampEnabled = (clampToSwimlane ?? true) && lanes.length > 0;
+  const lanesRef = useRef(lanes);
+  lanesRef.current = lanes;
+  const marginRef = useRef(margin);
+  marginRef.current = margin;
+  const onSizeChangeRef = useRef(onSwimlaneSizeChange);
+  onSizeChangeRef.current = onSwimlaneSizeChange;
+  const resizeSwimlane = useCallback(
+    (laneId, height, commit, reason = "resize") => {
+      const lane = lanesRef.current.find((l) => l.id === laneId);
+      if (!lane) return;
+      const min = requiredLaneHeight(lane, store.nodes.values(), marginRef.current.bottom);
+      const next = Math.max(min, height);
+      setLaneHeights((prev) => prev[laneId] === next ? prev : { ...prev, [laneId]: next });
+      if (commit) onSizeChangeRef.current?.({ laneId, height: next, reason });
+    },
+    [store]
+  );
+  useEffect(() => {
+    if (!clampEnabled) return;
+    return store.subscribeFrame(() => {
+      if (store.isNodeDragging()) return;
+      const marginBottom = marginRef.current.bottom;
+      const grown = {};
+      for (const lane of lanesRef.current) {
+        const need = requiredLaneHeight(lane, store.nodes.values(), marginBottom);
+        if (need > lane.height + 0.5) grown[lane.id] = need;
+      }
+      const entries = Object.entries(grown);
+      if (entries.length === 0) return;
+      setLaneHeights((prev) => ({ ...prev, ...grown }));
+      for (const [id, height] of entries) {
+        onSizeChangeRef.current?.({ laneId: id, height, reason: "autofit" });
+      }
+    });
+  }, [store, clampEnabled]);
+  useEffect(() => {
+    if (!clampEnabled) {
+      store.setViewportClamp(null);
+      return;
+    }
+    const minX = Math.min(...groups.map((group) => group.x));
+    const minY = Math.min(...groups.map((group) => group.top));
+    const last = lanes.reduce((a, b) => b.top + b.height > a.top + a.height ? b : a);
+    const maxY = last.top + (1 - swimlaneBottomReveal) * last.height;
+    store.setViewportClamp({ minX, minY, maxY });
+    return () => store.setViewportClamp(null);
+  }, [store, clampEnabled, groups, lanes, swimlaneBottomReveal]);
+  return { groups, lanes, margin, clampEnabled, resizableEnabled, resizeSwimlane };
+}
+
+// src/renderer/canvas-2d-edge-renderer.ts
+var PICK_TOLERANCE = 6;
+var ENDPOINT_RADIUS = 12;
+var ARROW_SIZE = 9;
+var DASH_SPEED = 40;
+var Canvas2DEdgeRenderer = class {
+  constructor(canvas, options = {}) {
+    this.canvas = canvas;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) throw new Error("rivet: 2D canvas context is unavailable");
+    this.ctx = ctx;
+    this.edgeTypes = { ...BUILTIN_EDGE_TYPES, ...options.edgeTypes };
+    this.defaults = options.defaultEdgeOptions ?? {};
+  }
+  canvas;
+  ctx;
+  dpr = 1;
+  width = 0;
+  height = 0;
+  edgeTypes;
+  defaults;
+  /** Screen-space polylines from the last frame, keyed by edge id, for picking. */
+  geometry = /* @__PURE__ */ new Map();
+  /** Screen-space endpoints per edge, for endpoint (reconnection) picking. */
+  endpoints = /* @__PURE__ */ new Map();
+  /** Screen-space label anchor per edge that has a label. */
+  labels = /* @__PURE__ */ new Map();
+  resize(width, height, dpr) {
+    this.width = width;
+    this.height = height;
+    this.dpr = dpr;
+    this.canvas.width = Math.max(1, Math.round(width * dpr));
+    this.canvas.height = Math.max(1, Math.round(height * dpr));
+    this.canvas.style.width = `${width}px`;
+    this.canvas.style.height = `${height}px`;
+  }
+  /** Screen-space label anchors for the edges drawn last frame. */
+  getLabels() {
+    return this.labels;
+  }
+  /** Screen-space endpoints per edge from the last frame (reconnect affordance). */
+  getEndpoints() {
+    return this.endpoints;
+  }
+  draw(edges, nodes, viewport, extras) {
+    const ctx = this.ctx;
+    const now = performance.now();
+    ctx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
+    ctx.clearRect(0, 0, this.width, this.height);
+    ctx.lineJoin = "round";
+    ctx.lineCap = "round";
+    this.geometry.clear();
+    this.endpoints.clear();
+    this.labels.clear();
+    const resolved = buildEdges(edges, nodes, viewport, this.edgeTypes, this.defaults, extras);
+    for (const edge of resolved) {
+      this.geometry.set(edge.id, edge.points);
+      this.endpoints.set(edge.id, { source: edge.source, target: edge.target });
+      if (edge.label) this.labels.set(edge.id, edge.label);
+      ctx.strokeStyle = edge.stroke;
+      ctx.lineWidth = edge.width;
+      ctx.globalAlpha = edge.opacity;
+      if (edge.animated) {
+        ctx.setLineDash([8, 6]);
+        ctx.lineDashOffset = -(now / 1e3 * DASH_SPEED) % 14;
+      } else if (edge.dash) {
+        ctx.setLineDash(edge.dash);
+        ctx.lineDashOffset = 0;
+      } else {
+        ctx.setLineDash([]);
+        ctx.lineDashOffset = 0;
+      }
+      strokePolyline(ctx, edge.points);
+      ctx.setLineDash([]);
+      ctx.globalAlpha = 1;
+      const markerColor = ctx.strokeStyle;
+      if (edge.markerEnd) drawMarker(ctx, edge.points, "end", edge.markerEnd, markerColor);
+      if (edge.markerStart) drawMarker(ctx, edge.points, "start", edge.markerStart, markerColor);
+    }
+    const pending = extras?.pending;
+    if (pending) {
+      const points = buildPendingPath(pending, extras?.handles, viewport);
+      ctx.strokeStyle = PENDING_COLOR;
+      ctx.lineWidth = EDGE_WIDTH;
+      ctx.globalAlpha = 1;
+      ctx.setLineDash([6, 4]);
+      strokePolyline(ctx, points);
+      ctx.setLineDash([]);
+    }
+    ctx.globalAlpha = 1;
+    ctx.setLineDash([]);
+  }
+  pick(x, y, tolerance = PICK_TOLERANCE) {
+    for (const [id, points] of this.geometry) {
+      if (distanceToPolyline({ x, y }, points) <= tolerance) return id;
+    }
+    return null;
+  }
+  pickEndpoint(x, y) {
+    let best = null;
+    let bestDist = ENDPOINT_RADIUS;
+    for (const [edgeId, ends] of this.endpoints) {
+      const ds = Math.hypot(x - ends.source.x, y - ends.source.y);
+      if (ds < bestDist) {
+        bestDist = ds;
+        best = { edgeId, end: "source" };
+      }
+      const dt = Math.hypot(x - ends.target.x, y - ends.target.y);
+      if (dt < bestDist) {
+        bestDist = dt;
+        best = { edgeId, end: "target" };
+      }
+    }
+    return best;
+  }
+  dispose() {
+    this.geometry.clear();
+    this.endpoints.clear();
+    this.labels.clear();
+  }
+};
+var canvas2DEdgeRenderer = (canvas, options) => new Canvas2DEdgeRenderer(canvas, options);
+function strokePolyline(ctx, points) {
+  const first = points[0];
+  if (!first) return;
+  ctx.beginPath();
+  ctx.moveTo(first.x, first.y);
+  for (let i = 1; i < points.length; i++) {
+    const p = points[i];
+    if (p) ctx.lineTo(p.x, p.y);
+  }
+  ctx.stroke();
+}
+function drawMarker(ctx, points, at, kind, color) {
+  const tip = at === "end" ? points[points.length - 1] : points[0];
+  const prev = at === "end" ? points[points.length - 2] : points[1];
+  if (!tip || !prev) return;
+  const angle = Math.atan2(tip.y - prev.y, tip.x - prev.x);
+  const spread = 0.5;
+  const left = {
+    x: tip.x - ARROW_SIZE * Math.cos(angle - spread),
+    y: tip.y - ARROW_SIZE * Math.sin(angle - spread)
+  };
+  const right = {
+    x: tip.x - ARROW_SIZE * Math.cos(angle + spread),
+    y: tip.y - ARROW_SIZE * Math.sin(angle + spread)
+  };
+  ctx.beginPath();
+  ctx.moveTo(left.x, left.y);
+  ctx.lineTo(tip.x, tip.y);
+  ctx.lineTo(right.x, right.y);
+  if (kind === "arrowclosed") {
+    ctx.closePath();
+    ctx.fillStyle = color;
+    ctx.fill();
+  } else {
+    ctx.strokeStyle = color;
+    ctx.stroke();
+  }
+}
+var overlayStyle = {
+  position: "absolute",
+  inset: 0,
+  overflow: "hidden",
+  pointerEvents: "none"
+};
+var labelStyle2 = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  padding: "1px 6px",
+  borderRadius: 4,
+  background: "rgba(255, 255, 255, 0.9)",
+  color: "#0f172a",
+  fontSize: 11,
+  lineHeight: 1.4,
+  whiteSpace: "nowrap",
+  pointerEvents: "none"
+};
+function sameIds(a, b) {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
+  return true;
+}
+function EdgeLabelLayer() {
+  const { store, defaultEdgeOptions } = useRivetContext();
+  const [ids, setIds] = useState([]);
+  const refs = useRef(/* @__PURE__ */ new Map());
+  const position = useCallback(() => {
+    const anchors = store.getEdgeLabelAnchors();
+    for (const [id, el] of refs.current) {
+      if (!el) continue;
+      const anchor = anchors.get(id);
+      if (anchor) {
+        el.style.display = "";
+        el.style.transform = `translate(${anchor.x}px, ${anchor.y}px) translate(-50%, -50%)`;
+      } else {
+        el.style.display = "none";
+      }
+    }
+  }, [store]);
+  useEffect(() => {
+    return store.subscribeFrame(() => {
+      const anchors = store.getEdgeLabelAnchors();
+      const next = [...anchors.keys()];
+      setIds((prev) => sameIds(prev, next) ? prev : next);
+      position();
+    });
+  }, [store, position]);
+  useLayoutEffect(position);
+  return /* @__PURE__ */ jsx("div", { style: overlayStyle, children: ids.map((id) => {
+    const edge = store.edges.get(id);
+    if (!edge || edge.label === void 0) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: (el) => {
+          refs.current.set(id, el);
+        },
+        style: { ...labelStyle2, ...defaultEdgeOptions?.labelStyle, ...edge.labelStyle },
+        children: String(edge.label)
+      },
+      id
+    );
+  }) });
+}
+
+// src/input/group-drag.ts
+var DRAG_THRESHOLD = 4;
+var ALIGN_THRESHOLD = 6;
+function startGroupDrag(params) {
+  const { store, el, snapGrid, alignmentGuides, onLaneChange, onFrame } = params;
+  const { swimlaneLanes, clampToSwimlane, swimlaneMargin, swimlaneLabelWidth } = params;
+  const { zoom } = store.getViewport();
+  const originX = params.event.clientX;
+  const originY = params.event.clientY;
+  const pointerId = params.event.pointerId;
+  const clampActive = clampToSwimlane && swimlaneLanes.length > 0;
+  let started = false;
+  let starts = /* @__PURE__ */ new Map();
+  let affected = /* @__PURE__ */ new Set();
+  const repositionAffected = () => {
+    for (const affectedId of affected) {
+      const affectedEl = store.getNodeElement(affectedId);
+      if (!affectedEl) continue;
+      const world = store.getNodeWorldPosition(affectedId);
+      affectedEl.style.transform = `translate(${world.x}px, ${world.y}px)`;
+    }
+    onFrame?.();
+  };
+  const beginDrag = () => {
+    started = true;
+    const movers = store.getMovers(store.getSelectedNodes());
+    starts = /* @__PURE__ */ new Map();
+    for (const moverId of movers) {
+      const moverNode = store.nodes.get(moverId);
+      if (moverNode) starts.set(moverId, moverNode.position);
+    }
+    affected = /* @__PURE__ */ new Set();
+    for (const moverId of movers) {
+      affected.add(moverId);
+      for (const descendant of store.getDescendantIds(moverId)) affected.add(descendant);
+    }
+    store.setNodeDragging(true);
+    el.setPointerCapture(pointerId);
+    el.style.cursor = "grabbing";
+    window.getSelection()?.removeAllRanges();
+    document.body.style.userSelect = "none";
+    document.body.style.webkitUserSelect = "none";
+  };
+  const onMove = (moveEvent) => {
+    if (!started) {
+      const moved = Math.hypot(moveEvent.clientX - originX, moveEvent.clientY - originY);
+      if (moved < DRAG_THRESHOLD) return;
+      beginDrag();
+    }
+    const dx = (moveEvent.clientX - originX) / zoom;
+    const dy = (moveEvent.clientY - originY) / zoom;
+    const single = starts.size === 1;
+    for (const [moverId, start] of starts) {
+      const moverNode = store.nodes.get(moverId);
+      let next = { x: start.x + dx, y: start.y + dy };
+      if (snapGrid) next = snapToGrid(next, snapGrid);
+      if (moverNode?.parentId && moverNode.extent === "parent" && moverNode.size) {
+        next = clampToParent(store, moverNode.parentId, next, moverNode.size);
+      } else if (alignmentGuides && single && moverNode?.size && !moverNode.parentId) {
+        const movingRect = {
+          x: next.x,
+          y: next.y,
+          width: moverNode.size.width,
+          height: moverNode.size.height
+        };
+        const statics = [];
+        for (const [otherId, other] of store.nodes) {
+          if (otherId === moverId || other.parentId) continue;
+          statics.push(store.getNodeRect(otherId));
+        }
+        const { offset, guides } = alignRect(movingRect, statics, ALIGN_THRESHOLD / zoom);
+        next = { x: next.x + offset.x, y: next.y + offset.y };
+        store.setAlignmentGuides(guides);
+      }
+      store.moveNode(moverId, next, false);
+    }
+    repositionAffected();
+  };
+  const onUp = () => {
+    window.removeEventListener("pointermove", onMove);
+    window.removeEventListener("pointerup", onUp);
+    if (!started) return;
+    el.style.cursor = "grab";
+    document.body.style.userSelect = "";
+    document.body.style.webkitUserSelect = "";
+    store.setAlignmentGuides([]);
+    store.setNodeDragging(false);
+    for (const [moverId, start] of starts) {
+      const moverNode = store.nodes.get(moverId);
+      let position = moverNode?.position ?? start;
+      if (moverNode?.parentId && moverNode.extent === "parent" && moverNode.size) {
+        position = clampToParent(store, moverNode.parentId, position, moverNode.size);
+      } else if (clampActive && moverNode?.size) {
+        const result = clampNodeToLanes(
+          position,
+          moverNode.size,
+          swimlaneLanes,
+          swimlaneMargin,
+          swimlaneLabelWidth
+        );
+        position = result.position;
+        const previousLaneId = store.setNodeLane(moverId, result.laneId);
+        if (previousLaneId !== false) {
+          onLaneChange?.({ nodeId: moverId, laneId: result.laneId, previousLaneId });
+        }
+      }
+      store.moveNode(moverId, position, true);
+    }
+    repositionAffected();
+  };
+  window.addEventListener("pointermove", onMove);
+  window.addEventListener("pointerup", onUp);
+}
+function clampToParent(store, parentId, position, size) {
+  const parent = store.nodes.get(parentId);
+  const parentSize = {
+    width: parent?.width ?? parent?.size?.width ?? 0,
+    height: parent?.height ?? parent?.size?.height ?? 0
+  };
+  return clampChildToParent(position, size, parentSize);
+}
+var DEFAULT_ANCHOR_COLOR = "#6366f1";
+function NodeAnchors({ nodeId }) {
+  const { store, anchorOptions } = useRivetContext();
+  const subscribeAnchors = useCallback(
+    (listener) => store.subscribeNodeAnchors(nodeId, listener),
+    [store, nodeId]
+  );
+  const getAnchorsVersion = useCallback(() => store.getNodeAnchorsVersion(nodeId), [store, nodeId]);
+  useSyncExternalStore(subscribeAnchors, getAnchorsVersion, getAnchorsVersion);
+  useSyncExternalStore(store.subscribeEdges, store.getEdgesVersion, store.getEdgesVersion);
+  const records = store.getNodeAnchors(nodeId);
+  if (records.length === 0) return null;
+  const dotsVisible = Boolean(store.nodes.get(nodeId)?.hovered);
+  const connectedSides = /* @__PURE__ */ new Map();
+  for (const edge of store.edges.values()) {
+    const ends = [
+      edge.source === nodeId ? parseAnchorHandleId(edge.sourceHandle) : null,
+      edge.target === nodeId ? parseAnchorHandleId(edge.targetHandle) : null
+    ];
+    for (const end of ends) {
+      if (!end) continue;
+      const sides = connectedSides.get(end.anchorId) ?? [];
+      if (!sides.includes(end.side)) sides.push(end.side);
+      connectedSides.set(end.anchorId, sides);
+    }
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: records.map((record) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsx(AnchorDots, { record, options: anchorOptions, visible: dotsVisible }),
+    record.strays !== "none" && /* @__PURE__ */ jsx(
+      AnchorStrayHandles,
+      {
+        record,
+        options: anchorOptions,
+        connectedSides: connectedSides.get(record.anchorId)
+      }
+    )
+  ] }, record.anchorId)) });
+}
+function AnchorDots(props) {
+  const { record, options } = props;
+  if (!record.geometry || !record.element?.isConnected) return null;
+  const dots = record.geometry.dots;
+  return /* @__PURE__ */ jsx(Fragment, { children: ANCHOR_SIDES.map((side) => {
+    const dot = dots[side];
+    return /* @__PURE__ */ jsx(
+      Handle,
+      {
+        id: anchorDotHandleId(record.anchorId, side),
+        type: "either",
+        position: side,
+        style: {
+          left: `${dot.xPct}%`,
+          top: `${dot.yPct}%`,
+          right: "auto",
+          bottom: "auto",
+          transform: "translate(-50%, -50%)",
+          width: options.dotSize,
+          height: options.dotSize,
+          background: record.color ?? DEFAULT_ANCHOR_COLOR,
+          border: "none",
+          opacity: props.visible ? 1 : 0,
+          transition: "opacity 150ms"
+        }
+      },
+      `${side}:${dot.xPct.toFixed(1)},${dot.yPct.toFixed(1)}`
+    );
+  }) });
+}
+function AnchorStrayHandles(props) {
+  const { record, options } = props;
+  const geometry = record.geometry;
+  if (!geometry) return null;
+  const sides = props.connectedSides && props.connectedSides.length > 0 ? props.connectedSides : [options.defaultSide];
+  return /* @__PURE__ */ jsx(Fragment, { children: sides.map((side) => {
+    const placed = strayPlacementPct(geometry, side, options);
+    const axis = side === "top" || side === "bottom" ? { left: `${placed}%` } : { top: `${placed}%` };
+    return /* @__PURE__ */ jsx(
+      Handle,
+      {
+        id: anchorHandleId(record.anchorId, side),
+        type: "either",
+        position: side,
+        style: {
+          width: options.strayHandleSize,
+          height: options.strayHandleSize,
+          background: record.color ?? DEFAULT_ANCHOR_COLOR,
+          border: "none",
+          ...axis
+        }
+      },
+      `${side}:${placed.toFixed(1)}`
+    );
+  }) });
+}
+var wrapperStyle = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  pointerEvents: "auto",
+  cursor: "grab",
+  userSelect: "none"
+};
+var NodeWrapper = memo(function NodeWrapper2({ id }) {
+  const { store, nodeTypes, onLaneChange, multiSelectionKeys, snapGrid } = useRivetContext();
+  const { swimlaneLanes, clampToSwimlane, swimlaneMargin, swimlaneLabelWidth, alignmentGuides } = useRivetContext();
+  const { announce, nodeDescriptionId } = useRivetContext();
+  const ref = useRef(null);
+  const [grabbed, setGrabbed] = useState(false);
+  const grabOrigins = useRef(null);
+  const nodeName = () => {
+    const node2 = store.nodes.get(id);
+    return node2?.ariaLabel ?? `node ${id}`;
+  };
+  const grab = () => {
+    const movers = store.getMovers(store.isNodeSelected(id) ? store.getSelectedNodes() : [id]);
+    const origins = /* @__PURE__ */ new Map();
+    for (const moverId of movers) {
+      const mover = store.nodes.get(moverId);
+      if (mover) origins.set(moverId, { ...mover.position });
+    }
+    grabOrigins.current = origins;
+    setGrabbed(true);
+    announce(`Grabbed ${nodeName()}. Use the arrow keys to move, Enter to drop, Escape to cancel.`);
+  };
+  const releaseGrab = (revert) => {
+    const origins = grabOrigins.current;
+    grabOrigins.current = null;
+    setGrabbed(false);
+    if (!origins) return;
+    if (revert) {
+      for (const [moverId, origin] of origins) store.moveNode(moverId, origin, true);
+      announce("Move cancelled.");
+      return;
+    }
+    const node2 = store.nodes.get(id);
+    if (node2) {
+      const { x, y } = node2.position;
+      announce(`Dropped ${nodeName()} at ${Math.round(x)}, ${Math.round(y)}.`);
+    }
+  };
+  const subscribe = useCallback(
+    (onChange) => store.subscribeNode(id, onChange),
+    [store, id]
+  );
+  const getSnapshot = useCallback(() => store.getNodeVersion(id), [store, id]);
+  useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const nodeContext = useMemo(() => ({ nodeId: id, wrapperRef: ref }), [id]);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    store.registerNodeElement(id, el);
+    const observer = new ResizeObserver(() => {
+      store.setNodeSize(id, { width: el.offsetWidth, height: el.offsetHeight });
+      store.remeasureAnchors(id);
+    });
+    observer.observe(el);
+    return () => {
+      observer.disconnect();
+      store.unregisterNodeElement(id, el);
+    };
+  }, [id, store]);
+  const onPointerEnter = () => store.hoverNode(id);
+  const onPointerLeave = () => store.hoverNode(null);
+  const onFocus = (event) => {
+    if (event.target !== event.currentTarget) return;
+    store.setFocusedNode(id);
+  };
+  const onBlur = (event) => {
+    if (event.target !== event.currentTarget) return;
+    if (grabOrigins.current) releaseGrab(false);
+    const next = event.relatedTarget;
+    if (next instanceof Element && next.closest(SELECTOR.node)) return;
+    if (store.getFocusedNode() === id) store.setFocusedNode(null);
+  };
+  const onKeyDown = (event) => {
+    if (event.target !== event.currentTarget) return;
+    const node2 = store.nodes.get(id);
+    if (!node2 || node2.selectable === false) return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      if (grabOrigins.current) {
+        releaseGrab(false);
+        return;
+      }
+      if (keyHeld(event, multiSelectionKeys)) {
+        store.selectNode(id, true);
+        return;
+      }
+      if (!store.isNodeSelected(id)) store.selectNode(id);
+      if (node2.draggable !== false) grab();
+      return;
+    }
+    if (event.key === "Escape") {
+      if (grabOrigins.current) {
+        event.preventDefault();
+        releaseGrab(true);
+        return;
+      }
+      store.selectNode(null);
+      return;
+    }
+    const dir = ARROW_DIRS[event.key];
+    if (!dir || !grabOrigins.current) return;
+    event.preventDefault();
+    const factor = event.shiftKey ? ARROW_STEP_SHIFT : 1;
+    const stepX = (snapGrid?.[0] || ARROW_STEP) * factor;
+    const stepY = (snapGrid?.[1] || ARROW_STEP) * factor;
+    for (const moverId of grabOrigins.current.keys()) {
+      const mover = store.nodes.get(moverId);
+      if (!mover) continue;
+      let next = {
+        x: mover.position.x + dir.x * stepX,
+        y: mover.position.y + dir.y * stepY
+      };
+      if (snapGrid) next = snapToGrid(next, snapGrid);
+      if (mover.parentId && mover.extent === "parent" && mover.size) {
+        next = clampToParent(store, mover.parentId, next, mover.size);
+      }
+      store.moveNode(moverId, next, true);
+    }
+  };
+  const onPointerDown = (event) => {
+    if (event.button !== 0) return;
+    if (ref.current && event.target instanceof Node && !ref.current.contains(event.target)) return;
+    if (event.target instanceof Element && event.target.closest(SELECTOR.noPan)) return;
+    event.stopPropagation();
+    const el = ref.current;
+    const node2 = store.nodes.get(id);
+    if (!el || !node2) return;
+    const target = event.target instanceof Element ? event.target : null;
+    const noSelect = node2.selectable === false || Boolean(target?.closest(SELECTOR.noSelect));
+    const noDrag = node2.draggable === false || Boolean(target?.closest(SELECTOR.noDrag));
+    const additive = keyHeld(event, multiSelectionKeys);
+    if (additive) {
+      if (!noSelect) store.selectNode(id, true);
+      return;
+    }
+    if (!noSelect && !store.isNodeSelected(id)) store.selectNode(id);
+    if (noDrag) return;
+    startGroupDrag({
+      store,
+      el,
+      event,
+      snapGrid,
+      alignmentGuides,
+      swimlaneLanes,
+      clampToSwimlane,
+      swimlaneMargin,
+      swimlaneLabelWidth,
+      onLaneChange
+    });
+  };
+  const node = store.nodes.get(id);
+  if (!node) return null;
+  const key = node.type ?? "default";
+  const Component = nodeTypes[key] ?? BUILTIN_NODE_TYPES[key] ?? DefaultNode;
+  const world = store.getNodeWorldPosition(id);
+  const depth = store.getNodeDepth(id);
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: a node wraps arbitrary (often interactive) content, so it can't be a native <button>
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-rivet-node": id,
+        "data-rivet-grabbed": grabbed ? "" : void 0,
+        tabIndex: node.selectable === false ? -1 : 0,
+        role: "button",
+        "aria-roledescription": "graph node",
+        "aria-pressed": Boolean(node.selected),
+        "aria-label": node.ariaLabel,
+        "aria-describedby": node.selectable === false ? void 0 : nodeDescriptionId,
+        onPointerDown,
+        onPointerEnter,
+        onPointerLeave,
+        onKeyDown,
+        onFocus,
+        onBlur,
+        style: {
+          ...wrapperStyle,
+          transform: `translate(${world.x}px, ${world.y}px)`,
+          zIndex: depth,
+          // Explicit dimensions from NodeResizer override the intrinsic size.
+          ...node.width !== void 0 ? { width: node.width } : {},
+          ...node.height !== void 0 ? { height: node.height } : {}
+        },
+        children: /* @__PURE__ */ jsxs(RivetNodeContext.Provider, { value: nodeContext, children: [
+          /* @__PURE__ */ jsx(
+            Component,
+            {
+              id,
+              type: node.type,
+              data: node.data,
+              selected: Boolean(node.selected),
+              hovered: Boolean(node.hovered),
+              width: node.width ?? node.size?.width,
+              height: node.height ?? node.size?.height,
+              position: node.position,
+              positionAbsolute: world
+            }
+          ),
+          /* @__PURE__ */ jsx(NodeAnchors, { nodeId: id })
+        ] })
+      }
+    )
+  );
+});
+var NODES_SELECTION_Z = 1e3;
+var boxStyle = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  pointerEvents: "auto",
+  cursor: "grab",
+  userSelect: "none",
+  zIndex: NODES_SELECTION_Z,
+  // Same accent as the marquee overlay it succeeds, but dotted: the marquee is
+  // the live gesture, this is the settled selection.
+  border: "1px dotted rgba(99, 102, 241, 0.8)",
+  background: "rgba(99, 102, 241, 0.08)"
+};
+var applyRect = (el, rect) => {
+  el.style.transform = `translate(${rect.x}px, ${rect.y}px)`;
+  el.style.width = `${rect.width}px`;
+  el.style.height = `${rect.height}px`;
+};
+var NodesSelection = memo(function NodesSelection2() {
+  const { store, snapGrid, alignmentGuides, onLaneChange } = useRivetContext();
+  const { swimlaneLanes, clampToSwimlane, swimlaneMargin, swimlaneLabelWidth } = useRivetContext();
+  const ref = useRef(null);
+  const subscribe = useCallback(
+    (onChange) => store.subscribeSelectionBox(onChange),
+    [store]
+  );
+  const getSnapshot = useCallback(() => store.getSelectionBoxVersion(), [store]);
+  useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const selectionRect = () => boundingRect(store.getSelectedNodes().map((id) => store.getNodeRect(id)));
+  const onPointerDown = (event) => {
+    if (event.button !== 0) return;
+    const el = ref.current;
+    if (!el) return;
+    event.stopPropagation();
+    startGroupDrag({
+      store,
+      el,
+      event,
+      snapGrid,
+      alignmentGuides,
+      swimlaneLanes,
+      clampToSwimlane,
+      swimlaneMargin,
+      swimlaneLabelWidth,
+      onLaneChange,
+      // Node moves are imperative during the drag (no React re-render), so the
+      // box tracks its nodes the same way; the drop's commit re-renders it.
+      onFrame: () => {
+        const rect2 = selectionRect();
+        if (rect2 && ref.current) applyRect(ref.current, rect2);
+      }
+    });
+  };
+  if (!store.isSelectionBoxActive()) return null;
+  const rect = selectionRect();
+  if (!rect) return null;
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: a drag affordance over canvas-positioned nodes, not a form grouping — it can't be a <fieldset>
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-rivet-nodes-selection": true,
+        role: "group",
+        "aria-label": "Selected nodes",
+        onPointerDown,
+        style: {
+          ...boxStyle,
+          transform: `translate(${rect.x}px, ${rect.y}px)`,
+          width: rect.width,
+          height: rect.height
+        }
+      }
+    )
+  );
+});
+var layerStyle = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  transformOrigin: "0 0",
+  // `will-change: transform` is applied imperatively only while panning/zooming
+  // (see the runtime), then cleared — a permanently promoted layer would upscale a
+  // cached bitmap and blur node text when zoomed in.
+  pointerEvents: "none"
+};
+function NodeLayer({ containerRef, visibleIds }) {
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, style: layerStyle, children: [
+    visibleIds.map((id) => /* @__PURE__ */ jsx(NodeWrapper, { id }, id)),
+    /* @__PURE__ */ jsx(NodesSelection, {})
+  ] });
+}
+var containerStyle2 = {
+  position: "absolute",
+  inset: 0,
+  overflow: "hidden",
+  // Chrome only — never intercept canvas panning or node dragging.
+  pointerEvents: "none",
+  zIndex: 5
+};
+var headerWrapperStyle = {
+  position: "absolute",
+  left: 0,
+  right: 0,
+  overflow: "hidden"
+};
+var defaultHeaderStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+  height: "100%",
+  paddingLeft: 12,
+  paddingRight: 12,
+  background: "#ffffff",
+  borderBottom: "1px solid rgba(100, 116, 139, 0.2)",
+  fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+  fontSize: 12,
+  fontWeight: 600,
+  letterSpacing: 0.4,
+  textTransform: "uppercase",
+  whiteSpace: "nowrap"
+};
+var labelWrapperStyle = {
+  position: "absolute",
+  overflow: "hidden"
+};
+var defaultLabelStyle = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "100%",
+  height: "100%",
+  background: "#ffffff",
+  borderRight: "1px solid rgba(100, 116, 139, 0.2)"
+};
+var labelTextStyle = {
+  writingMode: "vertical-rl",
+  transform: "rotate(180deg)",
+  fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+  fontSize: 10,
+  fontWeight: 600,
+  letterSpacing: 0.6,
+  textTransform: "uppercase",
+  color: "rgba(51, 65, 85, 0.85)",
+  whiteSpace: "nowrap",
+  userSelect: "none"
+};
+var RESIZE_HANDLE_HIT = 8;
+function SwimlaneOverlay() {
+  const {
+    swimlaneGroups,
+    swimlaneLabelWidth,
+    swimlaneHeaderSize,
+    swimlaneResizable,
+    renderSwimlaneHeader,
+    renderSwimlaneLabel
+  } = useRivetContext();
+  const { x: vx, y: vy, zoom } = useRivetViewport();
+  if (swimlaneGroups.length === 0) return null;
+  const headerBottomByGroup = /* @__PURE__ */ new Map();
+  return /* @__PURE__ */ jsxs("div", { style: containerStyle2, children: [
+    swimlaneGroups.map((group) => {
+      const screenTop = group.top * zoom + vy;
+      const screenBottom = group.bottom * zoom + vy;
+      const stickyY = Math.max(0, Math.min(screenTop, screenBottom - swimlaneHeaderSize));
+      headerBottomByGroup.set(group.id, stickyY + swimlaneHeaderSize);
+      if (screenBottom <= 0) return null;
+      const sticky = stickyY > screenTop;
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: { ...headerWrapperStyle, top: stickyY, height: swimlaneHeaderSize },
+          children: renderSwimlaneHeader ? renderSwimlaneHeader({ id: group.id, label: group.label, color: group.color, sticky }) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                ...defaultHeaderStyle,
+                boxShadow: sticky ? "0 1px 2px rgba(0, 0, 0, 0.08)" : void 0
+              },
+              children: group.label
+            }
+          )
+        },
+        group.id
+      );
+    }),
+    swimlaneGroups.flatMap(
+      (group) => group.lanes.map((lane) => {
+        if (!lane.label) return null;
+        const headerBottom = headerBottomByGroup.get(group.id) ?? 0;
+        const screenX = lane.x * zoom + vx;
+        const screenTop = lane.top * zoom + vy;
+        const screenBottom = screenTop + lane.height * zoom;
+        const screenEndX = screenX + lane.width * zoom;
+        const stickyX = Math.max(0, Math.min(screenX, screenEndX - swimlaneLabelWidth));
+        const clampedTop = Math.max(headerBottom, screenTop);
+        const labelHeight = screenBottom - clampedTop;
+        if (screenBottom <= headerBottom || labelHeight <= 0) return null;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              ...labelWrapperStyle,
+              left: stickyX,
+              top: clampedTop,
+              width: swimlaneLabelWidth,
+              height: labelHeight
+            },
+            children: renderSwimlaneLabel ? renderSwimlaneLabel({
+              id: lane.id,
+              label: lane.label,
+              color: lane.color,
+              groupId: lane.groupId
+            }) : /* @__PURE__ */ jsx("div", { style: defaultLabelStyle, children: /* @__PURE__ */ jsx("span", { style: labelTextStyle, children: lane.label }) })
+          },
+          lane.id
+        );
+      })
+    ),
+    swimlaneResizable && swimlaneGroups.flatMap(
+      (group) => group.lanes.map((lane) => {
+        const bottom = (lane.top + lane.height) * zoom + vy;
+        if (bottom < 0) return null;
+        return /* @__PURE__ */ jsx(LaneResizeHandle, { lane, top: bottom - RESIZE_HANDLE_HIT / 2 }, lane.id);
+      })
+    )
+  ] });
+}
+var handleStyle = {
+  position: "absolute",
+  left: 0,
+  right: 0,
+  height: RESIZE_HANDLE_HIT,
+  cursor: "ns-resize",
+  pointerEvents: "auto",
+  touchAction: "none"
+};
+function LaneResizeHandle({ lane, top }) {
+  const { store, resizeSwimlane, swimlaneMargin } = useRivetContext();
+  const onDoubleClick = useCallback(
+    (event) => {
+      event.stopPropagation();
+      const next = requiredLaneHeight(lane, store.nodes.values(), swimlaneMargin.bottom);
+      resizeSwimlane(lane.id, next, true, "autofit");
+    },
+    [store, resizeSwimlane, swimlaneMargin.bottom, lane]
+  );
+  const onPointerDown = useCallback(
+    (event) => {
+      if (event.button !== 0) return;
+      event.stopPropagation();
+      event.preventDefault();
+      const startClientY = event.clientY;
+      const startHeight = lane.height;
+      const laneId = lane.id;
+      const onMove = (moveEvent) => {
+        const zoom = store.getViewport().zoom || 1;
+        const next = startHeight + (moveEvent.clientY - startClientY) / zoom;
+        resizeSwimlane(laneId, next, false);
+      };
+      const onUp = (upEvent) => {
+        window.removeEventListener("pointermove", onMove);
+        window.removeEventListener("pointerup", onUp);
+        const zoom = store.getViewport().zoom || 1;
+        const next = startHeight + (upEvent.clientY - startClientY) / zoom;
+        resizeSwimlane(laneId, next, true);
+      };
+      window.addEventListener("pointermove", onMove);
+      window.addEventListener("pointerup", onUp);
+    },
+    [store, resizeSwimlane, lane.id, lane.height]
+  );
+  const onKeyDown = useCallback(
+    (event) => {
+      const dir = event.key === "ArrowDown" ? 1 : event.key === "ArrowUp" ? -1 : 0;
+      if (dir === 0) return;
+      event.preventDefault();
+      const step = event.shiftKey ? 50 : 10;
+      resizeSwimlane(lane.id, lane.height + dir * step, true);
+    },
+    [resizeSwimlane, lane.id, lane.height]
+  );
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: a focusable, arrow-key-resizable separator is an interactive widget — <hr> can't take focus or gestures
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-rivet-swimlane-handle": "",
+        role: "separator",
+        "aria-orientation": "horizontal",
+        "aria-label": `Resize lane ${lane.label ?? lane.id}`,
+        "aria-valuenow": Math.round(lane.height),
+        tabIndex: 0,
+        style: { ...handleStyle, top },
+        onPointerDown,
+        onDoubleClick,
+        onKeyDown
+      }
+    )
+  );
+}
+var paneStyle = {
+  position: "relative",
+  width: "100%",
+  height: "100%",
+  overflow: "hidden",
+  touchAction: "none"
+};
+var canvasStyle = {
+  position: "absolute",
+  inset: 0,
+  pointerEvents: "none"
+};
+var srOnlyStyle = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  margin: -1,
+  padding: 0,
+  overflow: "hidden",
+  clipPath: "inset(50%)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+var NODE_KEYBOARD_INSTRUCTIONS = "Press Enter to select and grab the node. While grabbed, use the arrow keys to move it, Enter to drop, Escape to cancel. Press Delete to remove the selection.";
+var DEFAULT_MULTI_SELECTION_KEY_CODE = ["Meta", "Control", "Shift"];
+var EMPTY_NODE_TYPES = {};
+var EMPTY_NODES = [];
+var EMPTY_EDGES = [];
+var DEFAULT_VIEWPORT = { x: 0, y: 0, zoom: 1 };
+function Rivet({
+  defaultNodes = EMPTY_NODES,
+  defaultEdges = EMPTY_EDGES,
+  nodes: controlledNodes,
+  edges: controlledEdges,
+  onNodesChange,
+  onEdgesChange,
+  defaultViewport = DEFAULT_VIEWPORT,
+  nodeTypes = EMPTY_NODE_TYPES,
+  edgeTypes,
+  defaultEdgeOptions,
+  ariaLabel,
+  renderer = canvas2DEdgeRenderer,
+  minZoom = 0.2,
+  maxZoom = 2.5,
+  gridGap = 24,
+  snapGrid,
+  alignmentGuides = false,
+  anchorOptions,
+  panOnDrag = true,
+  selectionOnDrag = false,
+  selectionKeyCode = "Shift",
+  multiSelectionKeyCode = DEFAULT_MULTI_SELECTION_KEY_CODE,
+  scrollToPan = false,
+  zoomSpeed = 15e-4,
+  swimlane,
+  clampToSwimlane,
+  swimlaneMargin,
+  swimlaneHeaderHeight = 32,
+  swimlaneResizable,
+  swimlaneBottomReveal = 0.5,
+  renderSwimlaneHeader,
+  renderSwimlaneLabel,
+  onSwimlaneSizeChange,
+  onPaneContextMenu,
+  onSwimlaneHeaderContextMenu,
+  onSwimlaneGroupHeaderContextMenu,
+  onLaneChange,
+  isValidConnection,
+  mapConnection,
+  onConnect,
+  edgesReconnectable,
+  edgeAlignment = "manual",
+  onReconnect,
+  onReconnectStart,
+  onReconnectEnd,
+  onSelectionChange,
+  onFocusChange,
+  className,
+  style,
+  children
+}) {
+  const storeRef = useRef(null);
+  if (storeRef.current === null) {
+    storeRef.current = createRivetStore({
+      nodes: controlledNodes ?? defaultNodes,
+      edges: controlledEdges ?? defaultEdges,
+      viewport: defaultViewport
+    });
+  }
+  const store = storeRef.current;
+  const cfg = useRivetConfig({
+    nodeTypes,
+    edgeTypes,
+    defaultEdgeOptions,
+    snapGrid,
+    swimlaneMargin,
+    anchorOptions,
+    panOnDrag,
+    selectionKeyCode,
+    multiSelectionKeyCode,
+    isValidConnection,
+    mapConnection,
+    onConnect,
+    onLaneChange,
+    renderSwimlaneHeader,
+    renderSwimlaneLabel
+  });
+  const mapConnectionWithAnchors = useMemo(
+    () => (connection) => {
+      const normalized = normalizeAnchorConnection(connection);
+      return cfg.mapConnection ? cfg.mapConnection(normalized) : normalized;
+    },
+    [cfg.mapConnection]
+  );
+  useEffect(() => {
+    store.setEdgeAlignment(edgeAlignment);
+  }, [store, edgeAlignment]);
+  const onSelectionChangeRef = useRef(onSelectionChange);
+  onSelectionChangeRef.current = onSelectionChange;
+  useEffect(
+    () => store.subscribeSelection((selection) => onSelectionChangeRef.current?.(selection)),
+    [store]
+  );
+  const onFocusChangeRef = useRef(onFocusChange);
+  onFocusChangeRef.current = onFocusChange;
+  useEffect(() => store.subscribeFocus((id) => onFocusChangeRef.current?.(id)), [store]);
+  const [announcement, setAnnouncement] = useState("");
+  const announce = useCallback((message) => setAnnouncement(message), []);
+  const nodeDescriptionId = useId();
+  const onNodesChangeRef = useRef(onNodesChange);
+  onNodesChangeRef.current = onNodesChange;
+  const onEdgesChangeRef = useRef(onEdgesChange);
+  onEdgesChangeRef.current = onEdgesChange;
+  const hasNodeChange = Boolean(onNodesChange);
+  const hasEdgeChange = Boolean(onEdgesChange);
+  useEffect(() => {
+    store.setChangeHandlers({
+      nodes: hasNodeChange ? (changes) => onNodesChangeRef.current?.(changes) : void 0,
+      edges: hasEdgeChange ? (changes) => onEdgesChangeRef.current?.(changes) : void 0
+    });
+    return () => store.setChangeHandlers({});
+  }, [store, hasNodeChange, hasEdgeChange]);
+  const isControlled = controlledNodes !== void 0 || controlledEdges !== void 0;
+  useEffect(() => {
+    if (!isControlled || store.isNodeDragging() || store.isNodeResizing()) return;
+    store.reconcile(
+      controlledNodes ?? [...store.nodes.values()],
+      controlledEdges ?? [...store.edges.values()]
+    );
+  }, [store, isControlled, controlledNodes, controlledEdges]);
+  const swimlanes = useSwimlanes({
+    store,
+    swimlane,
+    swimlaneMargin: cfg.swimlaneMargin,
+    swimlaneResizable,
+    clampToSwimlane,
+    swimlaneBottomReveal,
+    onSwimlaneSizeChange
+  });
+  const handleContextMenu = useCallback(
+    (event) => {
+      if (event.target instanceof Element && event.target.closest(SELECTOR.node)) return;
+      const viewport = store.getViewport();
+      const rect = paneRef.current?.getBoundingClientRect();
+      const point = { x: event.clientX - (rect?.left ?? 0), y: event.clientY - (rect?.top ?? 0) };
+      if (swimlanes.groups.length > 0) {
+        const hit = swimlaneChromeAt(
+          swimlanes.groups,
+          viewport,
+          point,
+          swimlaneHeaderHeight,
+          SWIMLANE_LABEL_WIDTH
+        );
+        if (hit?.type === "group") return onSwimlaneGroupHeaderContextMenu?.(hit.id, event);
+        if (hit?.type === "lane") return onSwimlaneHeaderContextMenu?.(hit.id, event);
+      }
+      const world = screenToWorld(point, viewport);
+      const lane = swimlanes.lanes.find(
+        (l) => world.y >= l.top && world.y <= l.top + l.height && world.x >= l.x
+      ) ?? null;
+      onPaneContextMenu?.(event, { world, lane });
+    },
+    [
+      store,
+      swimlanes.groups,
+      swimlanes.lanes,
+      swimlaneHeaderHeight,
+      onPaneContextMenu,
+      onSwimlaneHeaderContextMenu,
+      onSwimlaneGroupHeaderContextMenu
+    ]
+  );
+  const paneRef = useRef(null);
+  const nodeContainerRef = useRef(null);
+  const backgroundCanvasRef = useRef(null);
+  const edgeCanvasRef = useRef(null);
+  const foregroundCanvasRef = useRef(null);
+  const { visibleIds, controls, getViewportElements } = useRivetRuntime({
+    store,
+    paneRef,
+    nodeContainerRef,
+    backgroundCanvasRef,
+    edgeCanvasRef,
+    foregroundCanvasRef,
+    swimlaneLanes: swimlanes.lanes,
+    edgeTypes: cfg.edgeTypes,
+    defaultEdgeOptions: cfg.defaultEdgeOptions,
+    anchorOptions: cfg.anchorOptions,
+    edgeRenderer: renderer,
+    edgesReconnectable,
+    isValidConnection: cfg.isValidConnection,
+    mapConnection: mapConnectionWithAnchors,
+    onReconnect,
+    onReconnectStart,
+    onReconnectEnd,
+    panButtons: cfg.panButtons,
+    selectionOnDrag,
+    selectionKeys: cfg.selectionKeys,
+    multiSelectionKeys: cfg.multiSelectionKeys,
+    scrollToPan,
+    zoomSpeed,
+    minZoom,
+    maxZoom,
+    gridGap
+  });
+  const contextValue = useMemo(
+    () => ({
+      store,
+      nodeTypes: cfg.nodeTypes,
+      paneRef,
+      controls,
+      getViewportElements,
+      multiSelectionKeys: cfg.multiSelectionKeys,
+      announce,
+      nodeDescriptionId,
+      defaultEdgeOptions: cfg.defaultEdgeOptions,
+      snapGrid: cfg.snapGrid,
+      alignmentGuides,
+      anchorOptions: cfg.anchorOptions,
+      swimlaneGroups: swimlanes.groups,
+      swimlaneLanes: swimlanes.lanes,
+      clampToSwimlane: swimlanes.clampEnabled,
+      swimlaneMargin: swimlanes.margin,
+      swimlaneLabelWidth: SWIMLANE_LABEL_WIDTH,
+      swimlaneHeaderSize: swimlaneHeaderHeight,
+      swimlaneResizable: swimlanes.resizableEnabled,
+      resizeSwimlane: swimlanes.resizeSwimlane,
+      renderSwimlaneHeader: cfg.renderSwimlaneHeader,
+      renderSwimlaneLabel: cfg.renderSwimlaneLabel,
+      onLaneChange: cfg.onLaneChange,
+      isValidConnection: cfg.isValidConnection,
+      mapConnection: mapConnectionWithAnchors,
+      onConnect: cfg.onConnect
+    }),
+    [
+      store,
+      cfg.nodeTypes,
+      controls,
+      getViewportElements,
+      cfg.multiSelectionKeys,
+      announce,
+      nodeDescriptionId,
+      cfg.defaultEdgeOptions,
+      cfg.snapGrid,
+      alignmentGuides,
+      cfg.anchorOptions,
+      swimlanes.groups,
+      swimlanes.lanes,
+      swimlanes.clampEnabled,
+      swimlanes.margin,
+      swimlaneHeaderHeight,
+      swimlanes.resizableEnabled,
+      swimlanes.resizeSwimlane,
+      cfg.renderSwimlaneHeader,
+      cfg.renderSwimlaneLabel,
+      cfg.onLaneChange,
+      cfg.isValidConnection,
+      mapConnectionWithAnchors,
+      cfg.onConnect
+    ]
+  );
+  return /* @__PURE__ */ jsx(RivetContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: paneRef,
+      className,
+      style: { ...paneStyle, ...style },
+      onContextMenu: handleContextMenu,
+      role: "application",
+      "aria-label": ariaLabel ?? "Node graph",
+      children: [
+        /* @__PURE__ */ jsx("canvas", { ref: backgroundCanvasRef, style: canvasStyle }),
+        /* @__PURE__ */ jsx("canvas", { ref: edgeCanvasRef, style: canvasStyle }),
+        /* @__PURE__ */ jsx(NodeLayer, { containerRef: nodeContainerRef, visibleIds }),
+        /* @__PURE__ */ jsx("canvas", { ref: foregroundCanvasRef, style: canvasStyle }),
+        /* @__PURE__ */ jsx(EdgeLabelLayer, {}),
+        /* @__PURE__ */ jsx(SwimlaneOverlay, {}),
+        children,
+        /* @__PURE__ */ jsx("div", { id: nodeDescriptionId, style: srOnlyStyle, children: NODE_KEYBOARD_INSTRUCTIONS }),
+        /* @__PURE__ */ jsx("div", { style: srOnlyStyle, role: "status", "aria-live": "polite", "aria-atomic": "true", children: announcement })
+      ]
+    }
+  ) });
+}
+var clipboards = /* @__PURE__ */ new WeakMap();
+var PASTE_OFFSET = { x: 24, y: 24 };
+function buildInstance(store, controls, getViewportElements) {
+  const getNodes = () => [...store.nodes.values()];
+  const getEdges = () => [...store.edges.values()];
+  const setNodes = (arg) => {
+    const next = typeof arg === "function" ? arg(getNodes()) : arg;
+    const nextIds = new Set(next.map((node) => node.id));
+    for (const current of getNodes()) {
+      if (!nextIds.has(current.id)) store.removeNode(current.id);
+    }
+    for (const node of next) {
+      if (store.nodes.has(node.id)) store.replaceNode(node.id, node);
+      else store.addNode(node);
+    }
+  };
+  const setEdges = (arg) => {
+    const next = typeof arg === "function" ? arg(getEdges()) : arg;
+    const nextIds = new Set(next.map((edge) => edge.id));
+    for (const current of getEdges()) {
+      if (!nextIds.has(current.id)) store.removeEdge(current.id);
+    }
+    for (const edge of next) {
+      if (store.edges.has(edge.id)) store.replaceEdge(edge.id, edge);
+      else store.addEdge(edge);
+    }
+  };
+  const snapshot = (ids) => {
+    const nodes = ids.map((id) => store.nodes.get(id)).filter((node) => node !== void 0).map((node) => ({ ...node, position: { ...node.position } }));
+    const idSet = new Set(nodes.map((node) => node.id));
+    const edges = getEdges().filter((edge) => idSet.has(edge.source) && idSet.has(edge.target)).map((edge) => ({ ...edge }));
+    return { nodes, edges };
+  };
+  const insert = (source, offset) => {
+    const cloned = cloneElements(source.nodes, source.edges, { offset });
+    for (const node of cloned.nodes) store.addNode(node);
+    for (const edge of cloned.edges) store.addEdge(edge);
+    store.selectNodes(cloned.nodes.map((node) => node.id));
+    return cloned;
+  };
+  return {
+    ...controls,
+    getViewportElements,
+    toObject: () => serializeGraph(
+      store.nodes.values(),
+      store.edges.values(),
+      store.getViewport()
+    ),
+    getNodes,
+    getNode: (id) => store.nodes.get(id),
+    setNodes,
+    addNodes: (nodes) => {
+      for (const node of Array.isArray(nodes) ? nodes : [nodes]) store.addNode(node);
+    },
+    updateNode: (id, patch) => {
+      const current = store.nodes.get(id);
+      if (!current) return;
+      store.replaceNode(id, typeof patch === "function" ? patch(current) : patch);
+    },
+    getEdges,
+    getEdge: (id) => store.edges.get(id),
+    setEdges,
+    addEdges: (edges) => {
+      for (const edge of Array.isArray(edges) ? edges : [edges]) store.addEdge(edge);
+    },
+    updateEdge: (id, patch) => {
+      const current = store.edges.get(id);
+      if (!current) return;
+      store.replaceEdge(id, typeof patch === "function" ? patch(current) : patch);
+    },
+    deleteElements: ({ nodes, edges }) => {
+      for (const id of edges ?? []) store.removeEdge(id);
+      for (const id of nodes ?? []) store.removeNode(id);
+    },
+    registerAnchor: (nodeId, anchorId, element, options) => {
+      store.registerAnchor(nodeId, anchorId, element, options);
+      return {
+        rebind: (el) => el === null ? store.detachAnchor(nodeId, anchorId) : store.registerAnchor(nodeId, anchorId, el, options),
+        unregister: () => store.unregisterAnchor(nodeId, anchorId)
+      };
+    },
+    unregisterAnchor: (nodeId, anchorId) => store.unregisterAnchor(nodeId, anchorId),
+    remeasureAnchors: (nodeId) => store.remeasureAnchors(nodeId),
+    copy: (ids) => {
+      const targetIds = ids ?? store.getSelectedNodes();
+      if (targetIds.length === 0) return;
+      clipboards.set(store, snapshot(targetIds));
+    },
+    cut: (ids) => {
+      const targetIds = ids ?? store.getSelectedNodes();
+      if (targetIds.length === 0) return;
+      clipboards.set(store, snapshot(targetIds));
+      for (const id of targetIds) store.removeNode(id);
+    },
+    paste: (options) => {
+      const clip = clipboards.get(store);
+      if (!clip || clip.nodes.length === 0) return;
+      return insert(clip, options?.offset ?? PASTE_OFFSET);
+    },
+    duplicate: (ids) => {
+      const targetIds = ids ?? store.getSelectedNodes();
+      if (targetIds.length === 0) return;
+      return insert(snapshot(targetIds), PASTE_OFFSET);
+    },
+    undo: () => store.undo(),
+    redo: () => store.redo(),
+    canUndo: () => store.canUndo(),
+    canRedo: () => store.canRedo(),
+    clearHistory: () => store.clearHistory()
+  };
+}
+function useRivet() {
+  const { store, controls, getViewportElements } = useRivetContext();
+  return useMemo(
+    () => buildInstance(store, controls, getViewportElements),
+    [store, controls, getViewportElements]
+  );
+}
+
+// src/index.ts
+var VERSION = "0.0.0";
+
+export { BUILTIN_EDGE_TYPES, BUILTIN_NODE_TYPES, Canvas2DEdgeRenderer, Controls, DEFAULT_ALIGNMENT_HYSTERESIS, DefaultNode, GroupNode, Handle, MiniMap, NodeResizer, Rivet, VERSION, alignRect, applyEdgeChanges, applyNodeChanges, boundingRect, canvas2DEdgeRenderer, clampChildToParent, cloneElements, createRivetStore, edgeEndpointHandle, facingSide, getBezierPath, getSmoothStepPath, getStepPath, getStraightPath, handleKey, parseEdgeEndpoint, parseSideHandleId, rectsIntersect, resolveFacingSide, screenToWorld, serializeGraph, snapToGrid, useRivet, viewportToCss, visibleWorldRect, worldToScreen, zoomAt };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map