@kolosal-ai/rivet 0.1.1 → 0.3.0

package/dist/index.js

@@ -1,7 +1,9 @@
 import { parseAnchorHandleId, ANCHOR_SIDES, anchorDotHandleId, strayPlacementPct, anchorHandleId, anchorAutoHandleId, parseAnchorAutoHandleId, normalizeAnchorConnection, computeAnchorGeometry, anchorGeometryEqual, DEFAULT_ANCHOR_OPTIONS } from './chunk-AXT35ZJV.js';
+import { createPresenceRegistry, createLockRegistry, DEFAULT_PRESENCE_OPTIONS, peerColor } from './chunk-A52HZWLH.js';
+export { LOCK_DEFAULT_REFUSED, useNodeLock, useNodeLockAllows } from './chunk-A52HZWLH.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 { clamp, clampNodeToLanes, 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';
 
@@ -356,6 +358,35 @@ function parseEdgeEndpoint(nodeId, handleId, handles) {
   return side ? { nodeId, side } : { nodeId };
 }
 
+// src/gesture-guard.ts
+function keepLocalGeometry(incoming, local) {
+  return {
+    ...incoming,
+    position: local.position,
+    width: local.width,
+    height: local.height,
+    size: local.size
+  };
+}
+function guardNodeChanges(changes, isHeld, getLocal) {
+  if (!changes.some((change) => change.type !== "add" && isHeld(change.id))) return changes;
+  const guarded = [];
+  for (const change of changes) {
+    if (change.type === "add" || !isHeld(change.id)) {
+      guarded.push(change);
+      continue;
+    }
+    if (change.type === "position" || change.type === "dimensions") continue;
+    if (change.type === "replace") {
+      const local = getLocal(change.id);
+      guarded.push(local ? { ...change, item: keepLocalGeometry(change.item, local) } : change);
+      continue;
+    }
+    guarded.push(change);
+  }
+  return guarded;
+}
+
 // src/graph.ts
 function clampChildToParent(position, childSize, parentSize) {
   const maxX = Math.max(0, parentSize.width - childSize.width);
@@ -522,6 +553,26 @@ var HistoryManager = class {
       this.last = this.snapshot();
     });
   }
+  /**
+   * Fold an external change into every stored snapshot.
+   *
+   * Snapshots are structural, so a restore rewrites the whole graph — which in a
+   * shared document means undoing past a peer's edit would silently erase it.
+   * {@link rebase} can't help: it only refreshes the rolling baseline, while the
+   * stale states are the ones already on the stacks. Replaying the incoming
+   * change over each of them keeps every stored step consistent with work this
+   * client doesn't own.
+   *
+   * The trade-off is that an undo touching a node a peer has since changed no
+   * longer moves it — the peer's newer value survives instead. That's the
+   * intended precedence: a local undo may drop its own effect, never someone
+   * else's edit.
+   */
+  rewrite(transform) {
+    this.undoStack = this.undoStack.map(transform);
+    this.redoStack = this.redoStack.map(transform);
+    this.last = transform(this.last);
+  }
   flush() {
     this.scheduled = false;
     this.undoStack.push(this.last);
@@ -575,177 +626,596 @@ var HistoryManager = class {
   }
 };
 
-// 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 = () => {
+// src/viewport.ts
+function worldToScreen(point, viewport) {
+  return {
+    x: point.x * viewport.zoom + viewport.x,
+    y: point.y * viewport.zoom + viewport.y
   };
-  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();
+}
+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/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)
+    });
   }
-  // --- internal bookkeeping ------------------------------------------------
-  invalidateWorld() {
-    this.worldCache = null;
+  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);
   }
-  /**
-   * 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();
+  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];
   }
-  /** 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 ?? ""}`;
+  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];
   }
-  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) : []
+  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);
   }
-  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();
+  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)
+    });
   }
-  bumpEdges() {
-    this.edgesVersion += 1;
-    for (const listener of this.edgesListeners) listener();
+  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 };
   }
-  // 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 });
-      }
+}
+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;
     }
-    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);
+  return null;
+}
+function reachableSides(nodeId, role, handles) {
+  if (!handles) return [];
+  const sides = [];
+  for (const record of handles.values()) {
+    if (record.nodeId !== nodeId) continue;
+    if (!WANTED_TYPES[role].includes(record.type)) continue;
+    if (!sides.includes(record.position)) sides.push(record.position);
+  }
+  return sides;
+}
+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
+        };
       }
     }
-    if (id !== null) {
-      const node = this.nodes.get(id);
-      if (node) {
-        this.writeNode(id, { ...node, hovered: true });
-        this.bumpNode(id);
-      }
+    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);
   }
-  // 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 });
+  const key = displayedSideKey(edge.id, role);
+  const side = resolveFacingSideAmong(
+    rect,
+    nodeRect(peer, worldPositions),
+    anchorId ? [] : reachableSides(node.id, role, handles),
+    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/store.ts
+var RivetGraphStore = class {
+  nodes = /* @__PURE__ */ new Map();
+  edges = /* @__PURE__ */ new Map();
+  handles = /* @__PURE__ */ new Map();
+  anchors = /* @__PURE__ */ new Map();
+  // Arrow-wrapped so the (later-initialized) requestRender field is looked up
+  // at call time, not while this field is being constructed.
+  presence = createPresenceRegistry({
+    requestRender: () => this.requestRender(),
+    requestCursorRender: () => this.requestCursorRender()
+  });
+  locks = createLockRegistry(() => this.requestRender());
+  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();
+  heldNodeIds = /* @__PURE__ */ new Set();
+  heldListeners = /* @__PURE__ */ new Set();
+  gestureStartHandler = null;
+  gestureEndHandler = null;
+  lockConflictHandler = null;
+  displayedSides = /* @__PURE__ */ new Map();
+  edgeLabelAnchors = /* @__PURE__ */ new Map();
+  alignmentGuides = [];
+  nodeChangeHandler = null;
+  edgeChangeHandler = null;
+  reconciling = false;
+  history = new HistoryManager(() => this.historySnapshot());
+  lastSelectionKey;
+  worldCache = null;
+  /** {@link worldCache} with peers' live gesture boxes folded in. */
+  peerWorldCache = null;
+  /** Presence transform version {@link peerWorldCache} was built from. */
+  peerWorldVersion = -1;
+  renderRequester = () => {
+  };
+  /**
+   * Null until a runtime claims it, and then `requestCursorRender` narrows to
+   * the cursor layer. Falling back to a full frame is the safe default: a
+   * consumer without the layer mounted still gets its paint.
+   */
+  cursorRenderRequester = null;
+  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;
+    this.peerWorldCache = 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);
+  }
+  notifyHeld() {
+    this.peerWorldCache = null;
+    this.requestRender();
+    for (const listener of this.heldListeners) listener();
+  }
+  /**
+   * 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, origin = "local") {
+    if (this.reconciling || changes.length === 0) return;
+    if (record) this.history.record(hasRecordableChange(changes));
+    else if (hasRecordableChange(changes)) this.history.rebase();
+    handler?.(changes, { origin });
+  }
+  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 });
       }
     }
@@ -821,10 +1291,11 @@ var RivetGraphStore = class {
         this.writeNode(node.id, node);
         continue;
       }
-      if (nodeControlledEqual(existing, node)) continue;
-      this.writeNode(node.id, existing.hovered ? { ...node, hovered: true } : node);
+      const settled = this.heldNodeIds.has(node.id) ? keepLocalGeometry(node, existing) : node;
+      if (nodeControlledEqual(existing, settled)) continue;
+      this.writeNode(node.id, existing.hovered ? { ...settled, hovered: true } : settled);
       this.bumpNode(node.id);
-      if (existing.position.x !== node.position.x || existing.position.y !== node.position.y) {
+      if (existing.position.x !== settled.position.x || existing.position.y !== settled.position.y) {
         moved.push(node.id);
       }
     }
@@ -917,13 +1388,54 @@ var RivetGraphStore = class {
       this.worldCache = /* @__PURE__ */ new Map();
       for (const id of this.nodes.keys()) this.worldCache.set(id, worldPosition(this.nodes, id));
     }
-    return this.worldCache;
+    const version = this.presence.getTransformVersion();
+    if (this.presence.getNodeTransforms().size === 0) return this.worldCache;
+    if (this.peerWorldCache && this.peerWorldVersion === version) return this.peerWorldCache;
+    this.peerWorldVersion = version;
+    this.peerWorldCache = this.withPeerGestures(this.worldCache);
+    return this.peerWorldCache;
   };
+  /**
+   * Fold peers' live gesture boxes into world positions.
+   *
+   * A node somebody else is dragging is drawn, hit-tested and wired at the box
+   * they last sent — the node moves, rather than a ghost of it appearing
+   * elsewhere. The graph underneath is untouched: nothing here is written back,
+   * so their drag never enters the document, the change stream, or history, and
+   * the node lands for real when their commit arrives.
+   *
+   * Descendants ride along by the same delta, since their own positions are
+   * relative to a parent this map has just moved.
+   */
+  withPeerGestures(base) {
+    const merged = new Map(base);
+    for (const [id, rect] of this.presence.getNodeTransforms()) {
+      if (this.heldNodeIds.has(id)) continue;
+      const origin = base.get(id);
+      if (!origin) continue;
+      const dx = rect.x - origin.x;
+      const dy = rect.y - origin.y;
+      if (dx === 0 && dy === 0) continue;
+      merged.set(id, { x: rect.x, y: rect.y });
+      for (const childId of this.getDescendantIds(id)) {
+        const child = merged.get(childId);
+        if (child) merged.set(childId, { x: child.x + dx, y: child.y + dy });
+      }
+    }
+    return merged;
+  }
   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 };
+    const live = this.heldNodeIds.has(id) ? void 0 : this.presence.getNodeTransforms().get(id);
+    if (live) return { x: origin.x, y: origin.y, width: live.width, height: live.height };
+    const node = this.nodes.get(id);
+    return {
+      x: origin.x,
+      y: origin.y,
+      width: node?.width ?? node?.size?.width ?? DEFAULT_NODE_SIZE.width,
+      height: node?.height ?? node?.size?.height ?? DEFAULT_NODE_SIZE.height
+    };
   };
   getNodeDepth = (id) => nodeDepth(this.nodes, id);
   getDescendantIds = (id) => descendantIds(this.nodes, id);
@@ -1025,6 +1537,16 @@ var RivetGraphStore = class {
    * candidate (single-handle nodes, custom layouts, a culled peer whose
    * handles are unregistered) means the pin is kept.
    */
+  /**
+   * The side of `nodeId` that faces `peerRect` and can actually be reached by
+   * this end. An anchor end is unconstrained — its stray places itself along
+   * whichever side faces the peer — and so is a node with no compatible handle
+   * at all, which attaches at side midpoints.
+   */
+  reachableFacingSide(nodeId, handleId, rect, peerRect, end) {
+    const allowed = parseAnchorHandleId(handleId) || parseAnchorAutoHandleId(handleId) ? [] : reachableSides(nodeId, end, this.handles);
+    return resolveFacingSideAmong(rect, peerRect, allowed);
+  }
   realignEndHandle(nodeId, handleId, side, end) {
     if (!handleId || parseAnchorAutoHandleId(handleId)) return handleId;
     const anchor = parseAnchorHandleId(handleId);
@@ -1066,8 +1588,8 @@ var RivetGraphStore = class {
       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 sourceSide = (live ? this.displayedSides.get(sourceKey) : void 0) ?? this.reachableFacingSide(edge.source, edge.sourceHandle, sourceRect, targetRect, "source");
+      const targetSide = (live ? this.displayedSides.get(targetKey) : void 0) ?? this.reachableFacingSide(edge.target, edge.targetHandle, targetRect, sourceRect, "target");
       const sourceHandle = this.realignEndHandle(
         edge.source,
         edge.sourceHandle,
@@ -1102,6 +1624,42 @@ var RivetGraphStore = class {
     if (!dragging) this.draggingNodeIds.clear();
   };
   isNodeResizing = () => this.nodeResizing;
+  setGestureHandlers = (handlers) => {
+    this.gestureStartHandler = handlers.start ?? null;
+    this.gestureEndHandler = handlers.end ?? null;
+    this.lockConflictHandler = handlers.conflict ?? null;
+  };
+  setLockedNodes = (locks) => {
+    const opened = this.locks.setLocks(locks);
+    if (opened.length === 0 || this.heldNodeIds.size === 0) return;
+    const held = [...this.heldNodeIds];
+    for (const nodeId of opened) {
+      if (!this.heldNodeIds.has(nodeId)) continue;
+      const holderId = this.locks.getHolder(nodeId);
+      if (holderId) this.lockConflictHandler?.({ nodeId, holderId, ids: held });
+    }
+  };
+  isNodeHeld = (id) => this.heldNodeIds.has(id);
+  getHeldNodeIds = () => this.heldNodeIds;
+  beginNodeGesture = (id, ids = [id]) => {
+    const opened = ids.filter((nodeId) => !this.heldNodeIds.has(nodeId));
+    if (opened.length === 0) return;
+    for (const nodeId of opened) this.heldNodeIds.add(nodeId);
+    this.gestureStartHandler?.({ id, ids: [...ids] });
+    this.notifyHeld();
+  };
+  endNodeGesture = (id, ids = [id]) => {
+    const closed = ids.filter((nodeId) => this.heldNodeIds.delete(nodeId));
+    if (closed.length === 0) return;
+    this.gestureEndHandler?.({ id, ids: [...ids] });
+    this.notifyHeld();
+  };
+  subscribeHeldNodes = (listener) => {
+    this.heldListeners.add(listener);
+    return () => {
+      this.heldListeners.delete(listener);
+    };
+  };
   selectNode = (id, additive = false) => {
     this.setSelectionBoxActive(false);
     if (id === null) {
@@ -1220,6 +1778,7 @@ var RivetGraphStore = class {
     }
     if (this.selectedNodeIds.size > 0) {
       for (const id of [...this.selectedNodeIds]) {
+        if (!this.locks.allows(id, "delete")) continue;
         if (this.removeNodeInternal(id, removedEdges)) removedNodes.push(id);
       }
     }
@@ -1249,6 +1808,19 @@ var RivetGraphStore = class {
     this.history.rebase();
     this.requestRender();
   };
+  applyRemote = ({ nodes = [], edges = [], origin = "remote" }) => {
+    const guarded = guardNodeChanges(nodes, this.isNodeHeld, (id) => this.nodes.get(id));
+    if (guarded.length === 0 && edges.length === 0) return;
+    const currentNodes = [...this.nodes.values()];
+    const currentEdges = [...this.edges.values()];
+    this.reconcile(applyNodeChanges(guarded, currentNodes), applyEdgeChanges(edges, currentEdges));
+    this.history.rewrite((snapshot) => ({
+      nodes: guarded.length > 0 ? applyNodeChanges(guarded, snapshot.nodes) : snapshot.nodes,
+      edges: edges.length > 0 ? applyEdgeChanges(edges, snapshot.edges) : snapshot.edges
+    }));
+    this.emit(guarded, this.nodeChangeHandler, false, origin);
+    this.emit(edges, this.edgeChangeHandler, false, origin);
+  };
   // --- undo / redo ---------------------------------------------------------
   /** Structural snapshot for history — no selection/hover/drag state. */
   historySnapshot() {
@@ -1453,6 +2025,13 @@ var RivetGraphStore = class {
   bindRenderRequester = (fn) => {
     this.renderRequester = fn;
   };
+  requestCursorRender = () => {
+    if (this.cursorRenderRequester) this.cursorRenderRequester();
+    else this.renderRequester();
+  };
+  bindCursorRenderRequester = (fn) => {
+    this.cursorRenderRequester = fn;
+  };
   // --- reconnect gateway (runtime-bound; consulted by <Handle>) ------------
   reconnectDelegate = null;
   getSelectedEdge = () => this.selectedEdgeId;
@@ -1465,66 +2044,27 @@ function createRivetStore(init) {
   return new RivetGraphStore(init);
 }
 
-// src/viewport.ts
-function worldToScreen(point, viewport) {
+// 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 {
-    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
+    nodeId: rivetHandleNode,
+    handleId: rivetHandleId,
+    type: rivetHandleType
   };
 }
 function handleWorldPosition(store, hit) {
@@ -1595,8 +2135,17 @@ function startConnectionDrag(config) {
     validate,
     map,
     onEnd,
-    resolveHit = resolveConnectionHit
+    resolveHit: resolveHitInput = resolveConnectionHit
   } = config;
+  if (!store.locks.allows(from.nodeId, "connect")) {
+    onEnd?.();
+    return;
+  }
+  const resolveHit = (...args) => {
+    const hit = resolveHitInput(...args);
+    if (hit && !store.locks.allows(hit.nodeId, "connect")) return null;
+    return hit;
+  };
   store.beginConnection(begin);
   const onMove = (event) => {
     const hit = resolveHit(store, paneRef, from, event.clientX, event.clientY);
@@ -1699,6 +2248,10 @@ function Handle({
     if (event.key !== "Enter" && event.key !== " ") return;
     event.preventDefault();
     const self = { nodeId, handleId, type: resolvedType };
+    if (!store.locks.allows(nodeId, "connect")) {
+      announce(`${nodeName(nodeId)} is locked by someone else.`);
+      return;
+    }
     const pending = store.getPending();
     if (!pending) {
       const origin = handleWorldPosition(store, self);
@@ -1751,6 +2304,7 @@ function Handle({
   const onFocus = () => {
     const pending = store.getPending();
     if (!pending || pending.source === nodeId && pending.sourceHandle === handleId) return;
+    if (!store.locks.allows(nodeId, "connect")) return;
     const world = handleWorldPosition(store, { nodeId, handleId});
     if (world) store.updateConnection(world, place);
   };
@@ -1835,7 +2389,12 @@ var baseStyle = {
   minWidth: 120,
   padding: "10px 14px",
   borderRadius: 8,
-  border: "1px solid rgba(100, 116, 139, 0.4)",
+  // Longhand, not the `border` shorthand: the hover/selected styles below
+  // override `borderColor` alone, and React warns when a shorthand and a
+  // longhand for the same value are mixed across renders.
+  borderWidth: 1,
+  borderStyle: "solid",
+  borderColor: "rgba(100, 116, 139, 0.4)",
   background: "#ffffff",
   color: "#0f172a",
   fontSize: 13,
@@ -1867,7 +2426,10 @@ var baseStyle2 = {
   minHeight: 100,
   boxSizing: "border-box",
   borderRadius: 10,
-  border: "1.5px dashed rgba(100, 116, 139, 0.45)",
+  // Longhand — see the note in `default-node.tsx`.
+  borderWidth: 1.5,
+  borderStyle: "dashed",
+  borderColor: "rgba(100, 116, 139, 0.45)",
   background: "rgba(100, 116, 139, 0.06)"
 };
 var hoveredStyle2 = {
@@ -2051,6 +2613,11 @@ function NodeResizer({
 }) {
   const { store } = useRivetContext();
   const { nodeId } = useRivetNodeContext();
+  const resizable = useSyncExternalStore(
+    store.locks.subscribe,
+    useCallback(() => store.locks.allows(nodeId, "resize"), [store, nodeId]),
+    useCallback(() => store.locks.allows(nodeId, "resize"), [store, nodeId])
+  );
   const startResize = (dir) => (event) => {
     if (event.button !== 0) return;
     event.stopPropagation();
@@ -2082,7 +2649,16 @@ function NodeResizer({
       };
       return { size: { width, height }, position };
     };
+    let started = false;
     const onMove = (moveEvent) => {
+      if (!started) {
+        started = true;
+        store.beginNodeGesture(nodeId);
+      } else if (!store.isNodeHeld(nodeId)) {
+        window.removeEventListener("pointermove", onMove);
+        window.removeEventListener("pointerup", onUp);
+        return;
+      }
       const { size, position } = compute(moveEvent);
       const moved = dir.left || dir.top;
       store.resizeNode(nodeId, size, moved ? position : void 0, false);
@@ -2091,14 +2667,17 @@ function NodeResizer({
     const onUp = (upEvent) => {
       window.removeEventListener("pointermove", onMove);
       window.removeEventListener("pointerup", onUp);
+      if (started && !store.isNodeHeld(nodeId)) return;
       const { size, position } = compute(upEvent);
       const moved = dir.left || dir.top;
       store.resizeNode(nodeId, size, moved ? position : void 0, true);
+      if (started) store.endNodeGesture(nodeId);
       onResizeEnd?.(size, position);
     };
     window.addEventListener("pointermove", onMove);
     window.addEventListener("pointerup", onUp);
   };
+  if (!resizable) return null;
   return /* @__PURE__ */ jsx(Fragment, { children: HANDLES.map((dir) => /* @__PURE__ */ jsx(
     "div",
     {
@@ -2114,6 +2693,106 @@ function NodeResizer({
     dir.key
   )) });
 }
+
+// src/presence/local.ts
+var sameIds = (a, b) => a.length === b.length && a.every((id, i) => id === b[i]);
+var samePresence = (a, b) => a.cursor?.x === b.cursor?.x && a.cursor?.y === b.cursor?.y && sameIds(a.selection, b.selection) && sameIds(a.holding, b.holding);
+function trackLocalPresence({
+  store,
+  pane,
+  emit,
+  throttleMs
+}) {
+  let cursor = null;
+  let screenPoint = null;
+  let last = null;
+  let timer = null;
+  let lastEmit = Number.NEGATIVE_INFINITY;
+  const publish = () => {
+    if (timer !== null) {
+      clearTimeout(timer);
+      timer = null;
+    }
+    lastEmit = performance.now();
+    const next = {
+      cursor,
+      selection: store.getSelectedNodes(),
+      holding: [...store.getHeldNodeIds()]
+    };
+    if (last && samePresence(last, next)) return;
+    last = next;
+    emit(next);
+  };
+  const schedule = () => {
+    if (timer !== null) return;
+    const wait = throttleMs - (performance.now() - lastEmit);
+    if (wait <= 0) {
+      publish();
+      return;
+    }
+    timer = setTimeout(() => {
+      timer = null;
+      publish();
+    }, wait);
+  };
+  const project = () => {
+    if (!screenPoint) {
+      cursor = null;
+      return;
+    }
+    cursor = screenToWorld(screenPoint, store.getViewport());
+  };
+  const onPointerMove = (event) => {
+    const rect = pane.getBoundingClientRect();
+    screenPoint = { x: event.clientX - rect.left, y: event.clientY - rect.top };
+    project();
+    schedule();
+  };
+  const onPointerLeave = () => {
+    screenPoint = null;
+    cursor = null;
+    publish();
+  };
+  const unsubscribeViewport = store.subscribeViewport(() => {
+    if (!screenPoint) return;
+    project();
+    schedule();
+  });
+  const unsubscribeSelection = store.subscribeSelection(() => publish());
+  const unsubscribeHeld = store.subscribeHeldNodes(() => publish());
+  pane.addEventListener("pointermove", onPointerMove);
+  pane.addEventListener("pointerleave", onPointerLeave);
+  return () => {
+    if (timer !== null) clearTimeout(timer);
+    pane.removeEventListener("pointermove", onPointerMove);
+    pane.removeEventListener("pointerleave", onPointerLeave);
+    unsubscribeViewport();
+    unsubscribeSelection();
+    unsubscribeHeld();
+  };
+}
+
+// src/hooks/use-local-presence.ts
+function useLocalPresence({
+  store,
+  paneRef,
+  onLocalPresence,
+  throttleMs
+}) {
+  const handlerRef = useRef(onLocalPresence);
+  handlerRef.current = onLocalPresence;
+  const enabled = Boolean(onLocalPresence);
+  useEffect(() => {
+    const pane = paneRef.current;
+    if (!enabled || !pane) return;
+    return trackLocalPresence({
+      store,
+      pane,
+      emit: (presence) => handlerRef.current?.(presence),
+      throttleMs
+    });
+  }, [store, paneRef, enabled, throttleMs]);
+}
 function shallowEqual(a, b) {
   if (Object.is(a, b)) return true;
   if (typeof a !== "object" || a === null || typeof b !== "object" || b === null) return false;
@@ -2169,6 +2848,11 @@ function useRivetConfig(params) {
     () => ({ ...DEFAULT_ANCHOR_OPTIONS, ...anchorOptionsInput }),
     [anchorOptionsInput]
   );
+  const presenceOptionsInput = useShallowStable(params.presenceOptions);
+  const presenceOptions = useMemo(
+    () => ({ ...DEFAULT_PRESENCE_OPTIONS, ...presenceOptionsInput }),
+    [presenceOptionsInput]
+  );
   const isValidConnection = useStableOptional(params.isValidConnection);
   const mapConnection = useStableOptional(params.mapConnection);
   const onConnect = useStableOptional(params.onConnect);
@@ -2182,6 +2866,7 @@ function useRivetConfig(params) {
     snapGrid,
     swimlaneMargin,
     anchorOptions,
+    presenceOptions,
     panButtons,
     selectionKeys,
     multiSelectionKeys,
@@ -2221,7 +2906,7 @@ function createKeyboardHandler(store, getSnapGrid) {
     }
     const dir = ARROW_DIRS[event.key];
     if (!dir) return;
-    const movers = store.getMovers(store.getSelectedNodes());
+    const movers = store.getMovers(store.getSelectedNodes()).filter((id) => store.locks.allows(id, "drag"));
     if (movers.length === 0) return;
     event.preventDefault();
     const snapGrid = getSnapGrid?.() ?? null;
@@ -2299,6 +2984,7 @@ function createMarqueeController(deps) {
     const ids = [];
     for (const [id, node] of store.nodes) {
       if (node.selectable === false) continue;
+      if (!store.locks.allows(id, "select")) continue;
       if (rectsIntersect(worldRect, store.getNodeRect(id))) ids.push(id);
     }
     store.selectNodes(additive ? [.../* @__PURE__ */ new Set([...base, ...ids])] : ids);
@@ -2365,454 +3051,221 @@ function createPanController(deps) {
       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;
+      if (!panning) return;
+      panning = false;
+      pane.releasePointerCapture(event.pointerId);
+    },
+    suppressNextContextMenu() {
+      if (!suppressContextMenu) return false;
+      suppressContextMenu = false;
+      return true;
+    }
+  };
 }
-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 };
-  }
+
+// src/input/resize-controller.ts
+function createResizeController(deps) {
+  const { pane, bgCanvas, size, edgeRenderer, foregroundRenderer, onResize, 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);
+    onResize?.();
+    schedule();
+  };
+  const observer = new ResizeObserver(resize);
+  observer.observe(pane);
+  resize();
+  return { dispose: () => observer.disconnect() };
 }
-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 };
+
+// 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();
+    }
+  };
 }
-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;
+
+// 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);
     }
   }
-  return null;
+  ctx.fill();
 }
-function reachableSides(nodeId, role, handles) {
-  if (!handles) return [];
-  const sides = [];
-  for (const record of handles.values()) {
-    if (record.nodeId !== nodeId) continue;
-    if (!WANTED_TYPES[role].includes(record.type)) continue;
-    if (!sides.includes(record.position)) sides.push(record.position);
+
+// src/renderer/presence.ts
+var HELD_LINE_WIDTH = 2;
+var SELECTED_LINE_WIDTH = 1.5;
+var SELECTED_DASH = [4, 4];
+var OUTLINE_RADIUS = 6;
+var CURSOR_POINTS = [
+  { x: 0, y: 0 },
+  { x: 0, y: 16 },
+  { x: 4.2, y: 12.2 },
+  { x: 6.8, y: 17.6 },
+  { x: 9.2, y: 16.6 },
+  { x: 6.6, y: 11.4 },
+  { x: 11.4, y: 11.4 }
+];
+var CURSOR_LABEL_OFFSET = { x: 12, y: 17 };
+var LABEL_FONT = "500 11px ui-sans-serif, system-ui, -apple-system, sans-serif";
+var LABEL_PADDING_X = 6;
+var LABEL_HEIGHT = 17;
+var LABEL_RADIUS = 4;
+var CULL_MARGIN_PX = 64;
+function traceRect(ctx, rect, radius) {
+  ctx.beginPath();
+  if (typeof ctx.roundRect === "function") {
+    ctx.roundRect(rect.x, rect.y, rect.width, rect.height, radius);
+  } else {
+    ctx.rect(rect.x, rect.y, rect.width, rect.height);
   }
-  return sides;
 }
-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 };
+function projectRect(rect, viewport) {
+  const origin = worldToScreen({ x: rect.x, y: rect.y }, viewport);
+  return {
+    x: origin.x,
+    y: origin.y,
+    width: rect.width * viewport.zoom,
+    height: rect.height * viewport.zoom
   };
-  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
-      };
+}
+function onScreen(rect, size) {
+  return rect.x + rect.width >= -CULL_MARGIN_PX && rect.y + rect.height >= -CULL_MARGIN_PX && rect.x <= size.width + CULL_MARGIN_PX && rect.y <= size.height + CULL_MARGIN_PX;
+}
+function drawNodeOutline(ctx, rect, color, mode) {
+  ctx.strokeStyle = color;
+  ctx.lineWidth = mode === "selected" ? SELECTED_LINE_WIDTH : HELD_LINE_WIDTH;
+  ctx.setLineDash(mode === "selected" ? SELECTED_DASH : []);
+  traceRect(ctx, rect, OUTLINE_RADIUS);
+  ctx.stroke();
+  ctx.setLineDash([]);
+}
+function drawCursor(ctx, point, color, name) {
+  ctx.beginPath();
+  const [first, ...rest] = CURSOR_POINTS;
+  if (!first) return;
+  ctx.moveTo(point.x + first.x, point.y + first.y);
+  for (const offset of rest) ctx.lineTo(point.x + offset.x, point.y + offset.y);
+  ctx.closePath();
+  ctx.fillStyle = color;
+  ctx.fill();
+  ctx.strokeStyle = "#ffffff";
+  ctx.lineWidth = 1;
+  ctx.stroke();
+  if (!name) return;
+  ctx.font = LABEL_FONT;
+  ctx.textBaseline = "middle";
+  const width = ctx.measureText(name).width + LABEL_PADDING_X * 2;
+  const x = point.x + CURSOR_LABEL_OFFSET.x;
+  const y = point.y + CURSOR_LABEL_OFFSET.y;
+  traceRect(ctx, { x, y, width, height: LABEL_HEIGHT }, LABEL_RADIUS);
+  ctx.fillStyle = color;
+  ctx.fill();
+  ctx.fillStyle = "#ffffff";
+  ctx.fillText(name, x + LABEL_PADDING_X, y + LABEL_HEIGHT / 2);
+}
+function drawPeerOutlines(ctx, peers, { viewport, size, getNodeRect, locks }) {
+  if (peers.length === 0 && locks.size === 0) return;
+  ctx.save();
+  ctx.setTransform(size.dpr, 0, 0, size.dpr, 0, 0);
+  const painted = /* @__PURE__ */ new Set();
+  for (const peer of peers) {
+    const held = /* @__PURE__ */ new Set([...peer.holding, ...peer.transforms.keys()]);
+    for (const id of peer.selection) {
+      if (held.has(id)) continue;
+      const rect = getNodeRect(id);
+      if (!rect) continue;
+      const screen = projectRect(rect, viewport);
+      if (onScreen(screen, size)) drawNodeOutline(ctx, screen, peer.color, "selected");
+    }
+    for (const id of held) {
+      painted.add(id);
+      const rect = getNodeRect(id);
+      if (!rect) continue;
+      const screen = projectRect(rect, viewport);
+      if (onScreen(screen, size)) drawNodeOutline(ctx, screen, peer.color, "held");
     }
-    return endAt(pinnedSide);
   }
-  const key = displayedSideKey(edge.id, role);
-  const side = resolveFacingSideAmong(
-    rect,
-    nodeRect(peer, worldPositions),
-    anchorId ? [] : reachableSides(node.id, role, handles),
-    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));
+  if (locks.size > 0) {
+    const declared = new Map(peers.map((peer) => [peer.id, peer.color]));
+    for (const [id, holderId] of locks) {
+      if (painted.has(id)) continue;
+      const rect = getNodeRect(id);
+      if (!rect) continue;
+      const screen = projectRect(rect, viewport);
+      if (!onScreen(screen, size)) continue;
+      drawNodeOutline(ctx, screen, declared.get(holderId) ?? peerColor(holderId), "held");
+    }
   }
-  return best;
+  ctx.restore();
 }
-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));
+function drawPeerCursors(ctx, peers, { viewport, size }) {
+  ctx.setTransform(size.dpr, 0, 0, size.dpr, 0, 0);
+  ctx.clearRect(0, 0, size.width, size.height);
+  for (const peer of peers) {
+    if (!peer.cursor) continue;
+    const point = worldToScreen(peer.cursor, viewport);
+    if (!onScreen({ ...point, width: 0, height: 0 }, size)) continue;
+    drawCursor(ctx, point, peer.color, peer.name);
+  }
 }
 
 // src/renderer/swimlane.ts
@@ -2845,7 +3298,7 @@ function drawSwimlanes(ctx, width, height, viewport, lanes, style) {
 }
 
 // src/hooks/use-rivet-runtime.ts
-var CULL_MARGIN_PX = 240;
+var CULL_MARGIN_PX2 = 240;
 var ZOOM_STEP = 1.2;
 var WILL_CHANGE_IDLE_MS = 180;
 var GUIDE_COLOR = "rgba(236, 72, 153, 0.9)";
@@ -2890,7 +3343,7 @@ function drawEndpointBubbles(ctx, ends, size) {
 }
 function useRivetRuntime(params) {
   const { store, paneRef, nodeContainerRef } = params;
-  const { backgroundCanvasRef, edgeCanvasRef, foregroundCanvasRef } = params;
+  const { backgroundCanvasRef, edgeCanvasRef, foregroundCanvasRef, cursorCanvasRef } = params;
   const { swimlaneLanes, scrollToPan, zoomSpeed } = params;
   const { minZoom, maxZoom, gridGap, edgeTypes, defaultEdgeOptions, anchorOptions } = params;
   const { edgeRenderer: createEdgeRenderer } = params;
@@ -2929,7 +3382,66 @@ function useRivetRuntime(params) {
     const size = sizeRef.current;
     let frame = 0;
     let dirty = true;
+    let cursorsDirty = true;
     let hoveredEdgeId = null;
+    let peerPositioned = /* @__PURE__ */ new Set();
+    const positionPeerNodes = (worldPositions) => {
+      const transforms = store.presence.getNodeTransforms();
+      if (transforms.size === 0 && peerPositioned.size === 0) return;
+      const current = /* @__PURE__ */ new Set();
+      for (const id of transforms.keys()) {
+        current.add(id);
+        for (const childId of store.getDescendantIds(id)) current.add(childId);
+      }
+      for (const id of /* @__PURE__ */ new Set([...current, ...peerPositioned])) {
+        const element = store.getNodeElement(id);
+        const world = worldPositions.get(id);
+        if (!element || !world) continue;
+        element.style.transform = `translate(${world.x}px, ${world.y}px)`;
+        const live = transforms.get(id);
+        if (live && !store.isNodeHeld(id)) {
+          element.style.width = `${live.width}px`;
+          element.style.height = `${live.height}px`;
+        } else if (peerPositioned.has(id)) {
+          element.style.width = "";
+          element.style.height = "";
+        }
+      }
+      peerPositioned = current;
+    };
+    let cursorCanvas = null;
+    let cursorCtx = null;
+    let cursorAllocated = false;
+    const sizeCursorLayer = () => {
+      if (!cursorCanvas || !cursorAllocated) return;
+      cursorCanvas.width = Math.max(1, Math.round(size.width * size.dpr));
+      cursorCanvas.height = Math.max(1, Math.round(size.height * size.dpr));
+      cursorCanvas.style.width = `${size.width}px`;
+      cursorCanvas.style.height = `${size.height}px`;
+    };
+    const drawCursorLayer = () => {
+      const canvas = cursorCanvasRef.current;
+      if (canvas !== cursorCanvas) {
+        cursorCanvas = canvas;
+        cursorCtx = canvas?.getContext("2d") ?? null;
+        cursorAllocated = false;
+      }
+      if (!cursorCtx) return;
+      const peers = store.presence.getPeers();
+      const wanted = peers.some((peer) => peer.cursor);
+      if (!wanted && !cursorAllocated) return;
+      if (!cursorAllocated) {
+        cursorAllocated = true;
+        sizeCursorLayer();
+      }
+      drawPeerCursors(cursorCtx, peers, { viewport: store.getViewport(), size });
+    };
+    const stepPresence = () => {
+      const version = store.presence.getTransformVersion();
+      if (!store.presence.step(performance.now())) return;
+      if (store.presence.getTransformVersion() !== version) schedule();
+      else scheduleCursors();
+    };
     const anchorPlacement = (nodeId, anchorId, side) => {
       const record = store.anchors.get(handleKey(nodeId, anchorId));
       return record?.geometry ? strayPlacementPct(record.geometry, side, anchorOptions) : null;
@@ -2947,6 +3459,7 @@ function useRivetRuntime(params) {
     });
     const render = () => {
       zoom.step();
+      stepPresence();
       const viewport = store.getViewport();
       layerHint.apply(viewportToCss(viewport));
       bgCtx.setTransform(size.dpr, 0, 0, size.dpr, 0, 0);
@@ -2954,6 +3467,7 @@ function useRivetRuntime(params) {
       drawDotGrid(bgCtx, size.width, size.height, viewport, { gap: gridGap });
       drawSwimlanes(bgCtx, size.width, size.height, viewport, swimlaneLanesRef.current);
       const worldPositions = store.getWorldPositions();
+      positionPeerNodes(worldPositions);
       const edgeList = [...store.edges.values()];
       const pending = store.getPending();
       const liveAlignNodes = store.getEdgeAlignment() === "live" && store.isNodeDragging() ? store.getDraggingNodeIds() : void 0;
@@ -2982,9 +3496,18 @@ function useRivetRuntime(params) {
           if (ends) drawEndpointBubbles(fgCtx, ends, size);
         }
       }
+      if (fgCtx && (!store.presence.isEmpty() || store.locks.size() > 0)) {
+        drawPeerOutlines(fgCtx, store.presence.getPeers(), {
+          viewport,
+          size,
+          getNodeRect: (id) => store.nodes.has(id) ? store.getNodeRect(id) : null,
+          locks: store.locks.getLocks()
+        });
+      }
+      drawCursorLayer();
       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 margin = CULL_MARGIN_PX2 / viewport.zoom;
       const view = {
         x: rect.x - margin,
         y: rect.y - margin,
@@ -3013,16 +3536,29 @@ function useRivetRuntime(params) {
     };
     const tick = () => {
       frame = 0;
-      if (!dirty) return;
-      dirty = false;
-      render();
+      if (dirty) {
+        dirty = false;
+        cursorsDirty = false;
+        render();
+        return;
+      }
+      if (!cursorsDirty) return;
+      cursorsDirty = false;
+      stepPresence();
+      drawCursorLayer();
     };
     const schedule = () => {
       dirty = true;
       if (frame) return;
       frame = requestAnimationFrame(tick);
     };
+    const scheduleCursors = () => {
+      cursorsDirty = true;
+      if (frame) return;
+      frame = requestAnimationFrame(tick);
+    };
     store.bindRenderRequester(schedule);
+    store.bindCursorRenderRequester(scheduleCursors);
     const setEdgeHover = (id) => {
       if (hoveredEdgeId === id) return;
       hoveredEdgeId = id;
@@ -3232,6 +3768,7 @@ function useRivetRuntime(params) {
       size,
       edgeRenderer,
       foregroundRenderer,
+      onResize: sizeCursorLayer,
       schedule
     });
     pane.addEventListener("wheel", zoom.onWheel, { passive: false });
@@ -3248,6 +3785,7 @@ function useRivetRuntime(params) {
       resizer.dispose();
       store.bindRenderRequester(() => {
       });
+      store.bindCursorRenderRequester(null);
       store.bindReconnectDelegate(null);
       unsubscribeFocus();
       if (focusRetryFrame) cancelAnimationFrame(focusRetryFrame);
@@ -3275,6 +3813,7 @@ function useRivetRuntime(params) {
     backgroundCanvasRef,
     edgeCanvasRef,
     foregroundCanvasRef,
+    cursorCanvasRef,
     scrollToPan,
     zoomSpeed,
     minZoom,
@@ -3668,7 +4207,7 @@ var labelStyle2 = {
   whiteSpace: "nowrap",
   pointerEvents: "none"
 };
-function sameIds(a, b) {
+function sameIds2(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;
@@ -3694,7 +4233,7 @@ function EdgeLabelLayer() {
     return store.subscribeFrame(() => {
       const anchors = store.getEdgeLabelAnchors();
       const next = [...anchors.keys()];
-      setIds((prev) => sameIds(prev, next) ? prev : next);
+      setIds((prev) => sameIds2(prev, next) ? prev : next);
       position();
     });
   }, [store, position]);
@@ -3730,6 +4269,8 @@ function startGroupDrag(params) {
   let started = false;
   let starts = /* @__PURE__ */ new Map();
   let affected = /* @__PURE__ */ new Set();
+  let initiator;
+  let anchor;
   const repositionAffected = () => {
     for (const affectedId of affected) {
       const affectedEl = store.getNodeElement(affectedId);
@@ -3740,8 +4281,9 @@ function startGroupDrag(params) {
     onFrame?.();
   };
   const beginDrag = () => {
+    const movers = store.getMovers(store.getSelectedNodes()).filter((moverId) => store.locks.allows(moverId, "drag"));
+    if (movers.length === 0) return false;
     started = true;
-    const movers = store.getMovers(store.getSelectedNodes());
     starts = /* @__PURE__ */ new Map();
     for (const moverId of movers) {
       const moverNode = store.nodes.get(moverId);
@@ -3753,17 +4295,42 @@ function startGroupDrag(params) {
       for (const descendant of store.getDescendantIds(moverId)) affected.add(descendant);
     }
     store.setNodeDragging(true);
+    initiator = params.nodeId ?? movers[0];
+    anchor = movers[0];
+    if (initiator) store.beginNodeGesture(initiator, movers);
     el.setPointerCapture(pointerId);
     el.style.cursor = "grabbing";
     window.getSelection()?.removeAllRanges();
     document.body.style.userSelect = "none";
     document.body.style.webkitUserSelect = "none";
+    return true;
+  };
+  const teardown = () => {
+    window.removeEventListener("pointermove", onMove);
+    window.removeEventListener("pointerup", onUp);
+    if (!started) return;
+    started = false;
+    el.style.cursor = "grab";
+    document.body.style.userSelect = "";
+    document.body.style.webkitUserSelect = "";
+    store.setAlignmentGuides([]);
+    store.setNodeDragging(false);
+    if (el.hasPointerCapture(pointerId)) el.releasePointerCapture(pointerId);
   };
+  const yielded = () => anchor !== void 0 && !store.isNodeHeld(anchor);
   const onMove = (moveEvent) => {
     if (!started) {
       const moved = Math.hypot(moveEvent.clientX - originX, moveEvent.clientY - originY);
       if (moved < DRAG_THRESHOLD) return;
-      beginDrag();
+      if (!beginDrag()) {
+        window.removeEventListener("pointermove", onMove);
+        window.removeEventListener("pointerup", onUp);
+        return;
+      }
+    }
+    if (yielded()) {
+      teardown();
+      return;
     }
     const dx = (moveEvent.clientX - originX) / zoom;
     const dy = (moveEvent.clientY - originY) / zoom;
@@ -3798,6 +4365,10 @@ function startGroupDrag(params) {
     window.removeEventListener("pointermove", onMove);
     window.removeEventListener("pointerup", onUp);
     if (!started) return;
+    if (yielded()) {
+      teardown();
+      return;
+    }
     el.style.cursor = "grab";
     document.body.style.userSelect = "";
     document.body.style.webkitUserSelect = "";
@@ -3824,6 +4395,7 @@ function startGroupDrag(params) {
       }
       store.moveNode(moverId, position, true);
     }
+    if (initiator) store.endNodeGesture(initiator, [...starts.keys()]);
     repositionAffected();
   };
   window.addEventListener("pointermove", onMove);
@@ -3951,7 +4523,11 @@ var NodeWrapper = memo(function NodeWrapper2({ id }) {
     return node2?.ariaLabel ?? `node ${id}`;
   };
   const grab = () => {
-    const movers = store.getMovers(store.isNodeSelected(id) ? store.getSelectedNodes() : [id]);
+    const movers = store.getMovers(store.isNodeSelected(id) ? store.getSelectedNodes() : [id]).filter((moverId) => store.locks.allows(moverId, "drag"));
+    if (movers.length === 0) {
+      announce(`${nodeName()} is locked by someone else.`);
+      return;
+    }
     const origins = /* @__PURE__ */ new Map();
     for (const moverId of movers) {
       const mover = store.nodes.get(moverId);
@@ -3959,6 +4535,7 @@ var NodeWrapper = memo(function NodeWrapper2({ id }) {
     }
     grabOrigins.current = origins;
     setGrabbed(true);
+    store.beginNodeGesture(id, movers);
     announce(`Grabbed ${nodeName()}. Use the arrow keys to move, Enter to drop, Escape to cancel.`);
   };
   const releaseGrab = (revert) => {
@@ -3968,9 +4545,11 @@ var NodeWrapper = memo(function NodeWrapper2({ id }) {
     if (!origins) return;
     if (revert) {
       for (const [moverId, origin] of origins) store.moveNode(moverId, origin, true);
+      store.endNodeGesture(id, [...origins.keys()]);
       announce("Move cancelled.");
       return;
     }
+    store.endNodeGesture(id, [...origins.keys()]);
     const node2 = store.nodes.get(id);
     if (node2) {
       const { x, y } = node2.position;
@@ -3983,6 +4562,11 @@ var NodeWrapper = memo(function NodeWrapper2({ id }) {
   );
   const getSnapshot = useCallback(() => store.getNodeVersion(id), [store, id]);
   useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const lockHolder = useSyncExternalStore(
+    store.locks.subscribe,
+    useCallback(() => store.locks.getHolder(id), [store, id]),
+    useCallback(() => store.locks.getHolder(id), [store, id])
+  );
   const nodeContext = useMemo(() => ({ nodeId: id, wrapperRef: ref }), [id]);
   useEffect(() => {
     const el = ref.current;
@@ -4015,6 +4599,13 @@ var NodeWrapper = memo(function NodeWrapper2({ id }) {
     if (event.target !== event.currentTarget) return;
     const node2 = store.nodes.get(id);
     if (!node2 || node2.selectable === false) return;
+    if (grabOrigins.current && !store.isNodeHeld(id)) {
+      grabOrigins.current = null;
+      setGrabbed(false);
+      announce(`${nodeName()} was taken by someone else.`);
+      return;
+    }
+    if (!store.locks.allows(id, "select")) return;
     if (event.key === "Enter" || event.key === " ") {
       event.preventDefault();
       if (grabOrigins.current) {
@@ -4067,8 +4658,8 @@ var NodeWrapper = memo(function NodeWrapper2({ id }) {
     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 noSelect = node2.selectable === false || Boolean(target?.closest(SELECTOR.noSelect)) || !store.locks.allows(id, "select");
+    const noDrag = node2.draggable === false || Boolean(target?.closest(SELECTOR.noDrag)) || !store.locks.allows(id, "drag");
     const additive = keyHeld(event, multiSelectionKeys);
     if (additive) {
       if (!noSelect) store.selectNode(id, true);
@@ -4078,6 +4669,7 @@ var NodeWrapper = memo(function NodeWrapper2({ id }) {
     if (noDrag) return;
     startGroupDrag({
       store,
+      nodeId: id,
       el,
       event,
       snapGrid,
@@ -4095,6 +4687,9 @@ var NodeWrapper = memo(function NodeWrapper2({ id }) {
   const Component = nodeTypes[key] ?? BUILTIN_NODE_TYPES[key] ?? DefaultNode;
   const world = store.getNodeWorldPosition(id);
   const depth = store.getNodeDepth(id);
+  const locked = lockHolder !== null;
+  const lockedForSelect = locked && !store.locks.allows(id, "select");
+  const lockedForDrag = locked && !store.locks.allows(id, "drag");
   return (
     // biome-ignore lint/a11y/useSemanticElements: a node wraps arbitrary (often interactive) content, so it can't be a native <button>
     /* @__PURE__ */ jsx(
@@ -4103,12 +4698,14 @@ var NodeWrapper = memo(function NodeWrapper2({ id }) {
         ref,
         "data-rivet-node": id,
         "data-rivet-grabbed": grabbed ? "" : void 0,
-        tabIndex: node.selectable === false ? -1 : 0,
+        "data-rivet-locked": locked ? lockHolder ?? "" : void 0,
+        tabIndex: node.selectable === false || lockedForSelect ? -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,
+        "aria-disabled": lockedForSelect || void 0,
+        "aria-describedby": node.selectable === false || lockedForSelect ? void 0 : nodeDescriptionId,
         onPointerDown,
         onPointerEnter,
         onPointerLeave,
@@ -4117,6 +4714,7 @@ var NodeWrapper = memo(function NodeWrapper2({ id }) {
         onBlur,
         style: {
           ...wrapperStyle,
+          ...lockedForDrag ? { cursor: "not-allowed" } : {},
           transform: `translate(${world.x}px, ${world.y}px)`,
           zIndex: depth,
           // Explicit dimensions from NodeResizer override the intrinsic size.
@@ -4494,6 +5092,12 @@ function Rivet({
   snapGrid,
   alignmentGuides = false,
   anchorOptions,
+  peers,
+  onLocalPresence,
+  presenceOptions,
+  lockedNodes,
+  canInteractWithLocked,
+  onNodeLockConflict,
   panOnDrag = true,
   selectionOnDrag = false,
   selectionKeyCode = "Shift",
@@ -4521,6 +5125,8 @@ function Rivet({
   onReconnect,
   onReconnectStart,
   onReconnectEnd,
+  onNodeDragStart,
+  onNodeDragEnd,
   onSelectionChange,
   onFocusChange,
   className,
@@ -4543,6 +5149,7 @@ function Rivet({
     snapGrid,
     swimlaneMargin,
     anchorOptions,
+    presenceOptions,
     panOnDrag,
     selectionKeyCode,
     multiSelectionKeyCode,
@@ -4583,14 +5190,28 @@ function Rivet({
   const hasEdgeChange = Boolean(onEdgesChange);
   useEffect(() => {
     store.setChangeHandlers({
-      nodes: hasNodeChange ? (changes) => onNodesChangeRef.current?.(changes) : void 0,
-      edges: hasEdgeChange ? (changes) => onEdgesChangeRef.current?.(changes) : void 0
+      nodes: hasNodeChange ? (changes, meta) => onNodesChangeRef.current?.(changes, meta) : void 0,
+      edges: hasEdgeChange ? (changes, meta) => onEdgesChangeRef.current?.(changes, meta) : void 0
     });
     return () => store.setChangeHandlers({});
   }, [store, hasNodeChange, hasEdgeChange]);
+  const onNodeDragStartRef = useRef(onNodeDragStart);
+  onNodeDragStartRef.current = onNodeDragStart;
+  const onNodeDragEndRef = useRef(onNodeDragEnd);
+  onNodeDragEndRef.current = onNodeDragEnd;
+  const onNodeLockConflictRef = useRef(onNodeLockConflict);
+  onNodeLockConflictRef.current = onNodeLockConflict;
+  useEffect(() => {
+    store.setGestureHandlers({
+      start: (event) => onNodeDragStartRef.current?.(event),
+      end: (event) => onNodeDragEndRef.current?.(event),
+      conflict: (event) => onNodeLockConflictRef.current?.(event)
+    });
+    return () => store.setGestureHandlers({});
+  }, [store]);
   const isControlled = controlledNodes !== void 0 || controlledEdges !== void 0;
   useEffect(() => {
-    if (!isControlled || store.isNodeDragging() || store.isNodeResizing()) return;
+    if (!isControlled) return;
     store.reconcile(
       controlledNodes ?? [...store.nodes.values()],
       controlledEdges ?? [...store.edges.values()]
@@ -4643,6 +5264,24 @@ function Rivet({
   const backgroundCanvasRef = useRef(null);
   const edgeCanvasRef = useRef(null);
   const foregroundCanvasRef = useRef(null);
+  const cursorCanvasRef = useRef(null);
+  useEffect(() => {
+    if (peers === void 0) return;
+    store.presence.setPeers(peers);
+  }, [store, peers]);
+  const canInteractWithLockedRef = useRef(canInteractWithLocked);
+  canInteractWithLockedRef.current = canInteractWithLocked;
+  const hasLockPolicy = Boolean(canInteractWithLocked);
+  useEffect(() => {
+    store.locks.setPolicy(
+      hasLockPolicy ? (event) => canInteractWithLockedRef.current?.(event) ?? true : null
+    );
+    return () => store.locks.setPolicy(null);
+  }, [store, hasLockPolicy]);
+  useEffect(() => {
+    store.setLockedNodes(lockedNodes);
+  }, [store, lockedNodes]);
+  useLocalPresence({ store, paneRef, onLocalPresence, throttleMs: cfg.presenceOptions.throttleMs });
   const { visibleIds, controls, getViewportElements } = useRivetRuntime({
     store,
     paneRef,
@@ -4650,6 +5289,7 @@ function Rivet({
     backgroundCanvasRef,
     edgeCanvasRef,
     foregroundCanvasRef,
+    cursorCanvasRef,
     swimlaneLanes: swimlanes.lanes,
     edgeTypes: cfg.edgeTypes,
     defaultEdgeOptions: cfg.defaultEdgeOptions,
@@ -4742,6 +5382,7 @@ function Rivet({
         /* @__PURE__ */ jsx("canvas", { ref: edgeCanvasRef, style: canvasStyle }),
         /* @__PURE__ */ jsx(NodeLayer, { containerRef: nodeContainerRef, visibleIds }),
         /* @__PURE__ */ jsx("canvas", { ref: foregroundCanvasRef, style: canvasStyle }),
+        cfg.presenceOptions.renderCursors && /* @__PURE__ */ jsx("canvas", { ref: cursorCanvasRef, style: canvasStyle }),
         /* @__PURE__ */ jsx(EdgeLabelLayer, {}),
         /* @__PURE__ */ jsx(SwimlaneOverlay, {}),
         children,
@@ -4801,6 +5442,10 @@ function buildInstance(store, controls, getViewportElements) {
     ),
     getNodes,
     getNode: (id) => store.nodes.get(id),
+    // The store's own `getNodeRect` answers for any id, falling back to the
+    // origin and the default size; a public caller needs to tell "it's there,
+    // at 0,0" from "it isn't there".
+    getNodeRect: (id) => store.nodes.has(id) ? store.getNodeRect(id) : null,
     setNodes,
     addNodes: (nodes) => {
       for (const node of Array.isArray(nodes) ? nodes : [nodes]) store.addNode(node);
@@ -4825,6 +5470,7 @@ function buildInstance(store, controls, getViewportElements) {
       for (const id of edges ?? []) store.removeEdge(id);
       for (const id of nodes ?? []) store.removeNode(id);
     },
+    applyRemote: (changes) => store.applyRemote(changes),
     registerAnchor: (nodeId, anchorId, element, options) => {
       store.registerAnchor(nodeId, anchorId, element, options);
       return {
@@ -4834,6 +5480,10 @@ function buildInstance(store, controls, getViewportElements) {
     },
     unregisterAnchor: (nodeId, anchorId) => store.unregisterAnchor(nodeId, anchorId),
     remeasureAnchors: (nodeId) => store.remeasureAnchors(nodeId),
+    setPeerCursor: (peerId, point) => store.presence.setPeerCursor(peerId, point),
+    setPeerNodeTransform: (peerId, nodeId, rect) => store.presence.setPeerNodeTransform(peerId, nodeId, rect),
+    removePeer: (peerId) => store.presence.removePeer(peerId),
+    releaseNodeGesture: (id, ids) => store.endNodeGesture(id, ids),
     copy: (ids) => {
       const targetIds = ids ?? store.getSelectedNodes();
       if (targetIds.length === 0) return;