@kolosal-ai/rivet 0.1.0 → 0.2.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-RG5ALD3X.js';
+export { LOCK_DEFAULT_REFUSED, useNodeLock, useNodeLockAllows } from './chunk-RG5ALD3X.js';
+import { clamp, clampNodeToLanes, swimlaneChromeAt, SWIMLANE_LABEL_WIDTH, resolveSwimlanes, flattenLanes, resolveMargin, requiredLaneHeight, withAlpha } from './chunk-6XRQSAQT.js';
 import { useRivetContext, RivetNodeContext, useRivetNodeContext, useRivetControls, RivetContext, useRivetViewport } from './chunk-VQYN27OK.js';
 export { useRivetContext, useRivetControls, useRivetFocusedNode, useRivetHistory, useRivetViewport } from './chunk-VQYN27OK.js';
-import { clampNodeToLanes, clamp, swimlaneChromeAt, SWIMLANE_LABEL_WIDTH, resolveSwimlanes, flattenLanes, resolveMargin, requiredLaneHeight, withAlpha } from './chunk-6XRQSAQT.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { memo, useRef, useState, useCallback, useSyncExternalStore, useMemo, useEffect, Fragment as Fragment$1, useId, useLayoutEffect } from 'react';
 
@@ -313,6 +315,22 @@ function resolveFacingSide(node, peer, previous, hysteresis = DEFAULT_ALIGNMENT_
   if (Math.abs(dx) > Math.abs(dy) * hysteresis) return dx > 0 ? "right" : "left";
   return dy > 0 ? "bottom" : "top";
 }
+function bestAllowedSide(node, peer, allowed) {
+  const dx = peer.x + peer.width / 2 - (node.x + node.width / 2);
+  const dy = peer.y + peer.height / 2 - (node.y + node.height / 2);
+  const score = { left: -dx, right: dx, top: -dy, bottom: dy };
+  let best = null;
+  for (const side of allowed) {
+    if (best === null || score[side] > score[best]) best = side;
+  }
+  return best;
+}
+function resolveFacingSideAmong(node, peer, allowed, previous, hysteresis = DEFAULT_ALIGNMENT_HYSTERESIS) {
+  const resolved = resolveFacingSide(node, peer, previous, hysteresis);
+  if (allowed.length === 0 || allowed.includes(resolved)) return resolved;
+  if (previous && allowed.includes(previous)) return previous;
+  return bestAllowedSide(node, peer, allowed) ?? resolved;
+}
 
 // src/edge-ends.ts
 function displayedSideKey(edgeId, end) {
@@ -340,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);
@@ -506,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);
@@ -559,12 +626,407 @@ var HistoryManager = class {
   }
 };
 
+// src/viewport.ts
+function worldToScreen(point, viewport) {
+  return {
+    x: point.x * viewport.zoom + viewport.x,
+    y: point.y * viewport.zoom + viewport.y
+  };
+}
+function screenToWorld(point, viewport) {
+  return {
+    x: (point.x - viewport.x) / viewport.zoom,
+    y: (point.y - viewport.y) / viewport.zoom
+  };
+}
+function zoomAt(viewport, anchor, nextZoom, minZoom = 0.1, maxZoom = 4) {
+  const zoom = clamp(nextZoom, minZoom, maxZoom);
+  const world = screenToWorld(anchor, viewport);
+  return {
+    zoom,
+    x: anchor.x - world.x * zoom,
+    y: anchor.y - world.y * zoom
+  };
+}
+function viewportToCss(viewport) {
+  return `translate(${viewport.x}px, ${viewport.y}px) scale(${viewport.zoom})`;
+}
+function visibleWorldRect(viewport, width, height) {
+  const topLeft = screenToWorld({ x: 0, y: 0 }, viewport);
+  const bottomRight = screenToWorld({ x: width, y: height }, viewport);
+  return {
+    x: topLeft.x,
+    y: topLeft.y,
+    width: bottomRight.x - topLeft.x,
+    height: bottomRight.y - topLeft.y
+  };
+}
+function rectsIntersect(a, b) {
+  return a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y;
+}
+
+// src/renderer/edge-paths.ts
+var SIDE_DIR = {
+  left: { x: -1, y: 0 },
+  right: { x: 1, y: 0 },
+  top: { x: 0, y: -1 },
+  bottom: { x: 0, y: 1 }
+};
+var BEZIER_SEGMENT_PX = 8;
+var BEZIER_MIN_SAMPLES = 16;
+var BEZIER_MAX_SAMPLES = 160;
+var CORNER_RADIUS = 8;
+var ARC_SAMPLES = 6;
+function cubicAt(a, b, c, d, t) {
+  const mt = 1 - t;
+  return mt * mt * mt * a + 3 * mt * mt * t * b + 3 * mt * t * t * c + t * t * t * d;
+}
+function quadAt(a, b, c, t) {
+  const mt = 1 - t;
+  return mt * mt * a + 2 * mt * t * b + t * t * c;
+}
+var getStraightPath = ({ sourceX, sourceY, targetX, targetY }) => ({
+  points: [
+    { x: sourceX, y: sourceY },
+    { x: targetX, y: targetY }
+  ],
+  labelX: (sourceX + targetX) / 2,
+  labelY: (sourceY + targetY) / 2
+});
+var getBezierPath = (params) => {
+  const { sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition } = params;
+  const sDir = SIDE_DIR[sourcePosition];
+  const tDir = SIDE_DIR[targetPosition];
+  const dist = Math.hypot(targetX - sourceX, targetY - sourceY);
+  const reach = Math.max(40, dist * 0.4);
+  const p0 = { x: sourceX, y: sourceY };
+  const p1 = { x: sourceX + sDir.x * reach, y: sourceY + sDir.y * reach };
+  const p2 = { x: targetX + tDir.x * reach, y: targetY + tDir.y * reach };
+  const p3 = { x: targetX, y: targetY };
+  const ctrlLen = Math.hypot(p1.x - p0.x, p1.y - p0.y) + Math.hypot(p2.x - p1.x, p2.y - p1.y) + Math.hypot(p3.x - p2.x, p3.y - p2.y);
+  const samples = Math.max(
+    BEZIER_MIN_SAMPLES,
+    Math.min(BEZIER_MAX_SAMPLES, Math.ceil(ctrlLen / BEZIER_SEGMENT_PX))
+  );
+  const points = [];
+  for (let i = 0; i <= samples; i++) {
+    const t = i / samples;
+    points.push({
+      x: cubicAt(p0.x, p1.x, p2.x, p3.x, t),
+      y: cubicAt(p0.y, p1.y, p2.y, p3.y, t)
+    });
+  }
+  return {
+    points,
+    labelX: cubicAt(p0.x, p1.x, p2.x, p3.x, 0.5),
+    labelY: cubicAt(p0.y, p1.y, p2.y, p3.y, 0.5)
+  };
+};
+var STEP_OFFSET = 20;
+function simplifyCorners(corners) {
+  const out = [];
+  for (const p of corners) {
+    const a = out[out.length - 2];
+    const b = out[out.length - 1];
+    if (b && b.x === p.x && b.y === p.y) continue;
+    if (a && b && (a.x === b.x && b.x === p.x || a.y === b.y && b.y === p.y)) out.pop();
+    out.push(p);
+  }
+  return out;
+}
+function stepCorners(params) {
+  const { sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition } = params;
+  const s = { x: sourceX, y: sourceY };
+  const t = { x: targetX, y: targetY };
+  const sDir = SIDE_DIR[sourcePosition];
+  const tDir = SIDE_DIR[targetPosition];
+  const sg = { x: sourceX + sDir.x * STEP_OFFSET, y: sourceY + sDir.y * STEP_OFFSET };
+  const tg = { x: targetX + tDir.x * STEP_OFFSET, y: targetY + tDir.y * STEP_OFFSET };
+  return simplifyCorners(routeCorners(s, t, sg, tg, sDir, tDir));
+}
+function routeCorners(s, t, sg, tg, sDir, tDir) {
+  const sHoriz = sDir.x !== 0;
+  const tHoriz = tDir.x !== 0;
+  if (sHoriz && tHoriz) {
+    if (sDir.x * tDir.x < 0) {
+      if ((t.x - s.x) * sDir.x >= 2 * STEP_OFFSET) {
+        const midX = (s.x + t.x) / 2;
+        return [s, { x: midX, y: s.y }, { x: midX, y: t.y }, t];
+      }
+      const midY = (s.y + t.y) / 2;
+      return [s, sg, { x: sg.x, y: midY }, { x: tg.x, y: midY }, tg, t];
+    }
+    const railX = sDir.x > 0 ? Math.max(sg.x, tg.x) : Math.min(sg.x, tg.x);
+    return [s, { x: railX, y: s.y }, { x: railX, y: t.y }, t];
+  }
+  if (!sHoriz && !tHoriz) {
+    if (sDir.y * tDir.y < 0) {
+      if ((t.y - s.y) * sDir.y >= 2 * STEP_OFFSET) {
+        const midY = (s.y + t.y) / 2;
+        return [s, { x: s.x, y: midY }, { x: t.x, y: midY }, t];
+      }
+      const midX = (s.x + t.x) / 2;
+      return [s, sg, { x: midX, y: sg.y }, { x: midX, y: tg.y }, tg, t];
+    }
+    const railY = sDir.y > 0 ? Math.max(sg.y, tg.y) : Math.min(sg.y, tg.y);
+    return [s, { x: s.x, y: railY }, { x: t.x, y: railY }, t];
+  }
+  const corner = sHoriz ? { x: t.x, y: s.y } : { x: s.x, y: t.y };
+  const exitsSource = sHoriz ? (corner.x - s.x) * sDir.x >= STEP_OFFSET : (corner.y - s.y) * sDir.y >= STEP_OFFSET;
+  const exitsTarget = tHoriz ? (corner.x - t.x) * tDir.x >= STEP_OFFSET : (corner.y - t.y) * tDir.y >= STEP_OFFSET;
+  if (exitsSource && exitsTarget) return [s, corner, t];
+  const bend = sHoriz ? { x: sg.x, y: tg.y } : { x: tg.x, y: sg.y };
+  return [s, sg, bend, tg, t];
+}
+function roundCorners(corners, radius) {
+  if (corners.length <= 2) return corners;
+  const points = [];
+  const first = corners[0];
+  if (first) points.push(first);
+  for (let i = 1; i < corners.length - 1; i++) {
+    const prev = corners[i - 1];
+    const curr = corners[i];
+    const next = corners[i + 1];
+    if (!prev || !curr || !next) continue;
+    const inLen = Math.hypot(curr.x - prev.x, curr.y - prev.y);
+    const outLen = Math.hypot(next.x - curr.x, next.y - curr.y);
+    const r = Math.min(radius, inLen / 2, outLen / 2);
+    const inPt = {
+      x: curr.x + (prev.x - curr.x) / (inLen || 1) * r,
+      y: curr.y + (prev.y - curr.y) / (inLen || 1) * r
+    };
+    const outPt = {
+      x: curr.x + (next.x - curr.x) / (outLen || 1) * r,
+      y: curr.y + (next.y - curr.y) / (outLen || 1) * r
+    };
+    points.push(inPt);
+    for (let j = 1; j < ARC_SAMPLES; j++) {
+      const tt = j / ARC_SAMPLES;
+      points.push({
+        x: quadAt(inPt.x, curr.x, outPt.x, tt),
+        y: quadAt(inPt.y, curr.y, outPt.y, tt)
+      });
+    }
+    points.push(outPt);
+  }
+  const last = corners[corners.length - 1];
+  if (last) points.push(last);
+  return points;
+}
+function stepLabel(corners, params) {
+  const i = Math.floor((corners.length - 1) / 2);
+  const a = corners[i];
+  const b = corners[i + 1];
+  if (!a || !b) return { x: params.sourceX, y: params.sourceY };
+  return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+}
+var getSmoothStepPath = (params) => {
+  const corners = stepCorners(params);
+  const label = stepLabel(corners, params);
+  return { points: roundCorners(corners, CORNER_RADIUS), labelX: label.x, labelY: label.y };
+};
+var getStepPath = (params) => {
+  const corners = stepCorners(params);
+  const label = stepLabel(corners, params);
+  return { points: corners, labelX: label.x, labelY: label.y };
+};
+var BUILTIN_EDGE_TYPES = {
+  bezier: getBezierPath,
+  smoothstep: getSmoothStepPath,
+  step: getStepPath,
+  straight: getStraightPath
+};
+
+// src/renderer/edge-geometry.ts
+var EDGE_COLOR = "rgba(100, 116, 139, 0.75)";
+var EDGE_COLOR_SELECTED = "#6366f1";
+var EDGE_COLOR_HOVERED = "rgba(99, 102, 241, 0.9)";
+var EDGE_WIDTH = 1.5;
+var EDGE_WIDTH_HOVERED = 2.5;
+var PENDING_COLOR = "#6366f1";
+var OPPOSITE = {
+  left: "right",
+  right: "left",
+  top: "bottom",
+  bottom: "top"
+};
+var falseToNull = (m) => m || null;
+function buildEdges(edges, nodes, viewport, edgeTypes, defaults, extras) {
+  const handles = extras?.handles;
+  const hovered = extras?.hovered;
+  const reconnecting = extras?.reconnecting;
+  const worldPositions = extras?.worldPositions;
+  const resolved = [];
+  for (const edge of edges) {
+    if (edge.id === reconnecting) continue;
+    const source = nodes.get(edge.source);
+    const target = nodes.get(edge.target);
+    if (!source || !target) continue;
+    const frame = { handles, viewport, worldPositions, extras };
+    const start = resolveEnd(edge, "source", source, target, frame);
+    const end = resolveEnd(edge, "target", target, source, frame);
+    const params = {
+      sourceX: start.point.x,
+      sourceY: start.point.y,
+      targetX: end.point.x,
+      targetY: end.point.y,
+      sourcePosition: start.position,
+      targetPosition: end.position
+    };
+    const pathFn = edgeTypes[edge.type ?? defaults.type ?? "bezier"] ?? getBezierPath;
+    const path = pathFn(params);
+    if (path.points.length < 2) continue;
+    const style = { ...defaults.style, ...edge.style };
+    const isHovered = edge.id === hovered;
+    resolved.push({
+      id: edge.id,
+      points: path.points,
+      source: start.point,
+      target: end.point,
+      label: edge.label !== void 0 ? { x: path.labelX, y: path.labelY } : void 0,
+      stroke: edge.selected ? EDGE_COLOR_SELECTED : isHovered ? EDGE_COLOR_HOVERED : style.stroke ?? EDGE_COLOR,
+      width: style.strokeWidth ?? (isHovered ? EDGE_WIDTH_HOVERED : EDGE_WIDTH),
+      opacity: style.opacity ?? 1,
+      animated: edge.animated ?? defaults.animated ?? false,
+      dash: style.strokeDasharray,
+      markerStart: falseToNull(edge.markerStart ?? defaults.markerStart),
+      markerEnd: falseToNull(edge.markerEnd ?? defaults.markerEnd)
+    });
+  }
+  return resolved;
+}
+function buildPendingPath(pending, handles, viewport) {
+  const record = handles?.get(handleKey(pending.source, pending.sourceHandle));
+  const sourcePosition = record?.position ?? (pending.sourceType === "target" ? "left" : "right");
+  const from = worldToScreen(pending.from, viewport);
+  const to = worldToScreen(pending.to, viewport);
+  const targetPosition = pending.toPosition ?? OPPOSITE[sourcePosition];
+  return getBezierPath({
+    sourceX: from.x,
+    sourceY: from.y,
+    targetX: to.x,
+    targetY: to.y,
+    sourcePosition,
+    targetPosition
+  }).points;
+}
+function pointOnSide(rect, side, alongPct = 50) {
+  const t = alongPct / 100;
+  switch (side) {
+    case "left":
+      return { x: rect.x, y: rect.y + rect.height * t };
+    case "right":
+      return { x: rect.x + rect.width, y: rect.y + rect.height * t };
+    case "top":
+      return { x: rect.x + rect.width * t, y: rect.y };
+    case "bottom":
+      return { x: rect.x + rect.width * t, y: rect.y + rect.height };
+  }
+}
+function nodeRect(node, worldPositions) {
+  const origin = worldPositions?.get(node.id) ?? node.position;
+  const size = node.size ?? DEFAULT_NODE_SIZE;
+  return { x: origin.x, y: origin.y, width: size.width, height: size.height };
+}
+var WANTED_TYPES = {
+  source: ["source", "either"],
+  target: ["target", "either"]
+};
+function handleOnSide(nodeId, side, role, handles) {
+  if (!handles) return null;
+  for (const record of handles.values()) {
+    if (record.nodeId === nodeId && record.position === side && WANTED_TYPES[role].includes(record.type)) {
+      return record;
+    }
+  }
+  return null;
+}
+function 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
+        };
+      }
+    }
+    return { point: worldToScreen(pointOnSide(rect, side2, alongPct), viewport), position: side2 };
+  };
+  const registered = handleId && handles ? handles.get(handleKey(node.id, handleId)) : void 0;
+  const pinnedSide = parseAnchorHandleId(handleId)?.side ?? registered?.position ?? parseSideHandleId(handleId);
+  const live = extras?.liveAlignNodes !== void 0 && (extras.liveAlignNodes.has(edge.source) || extras.liveAlignNodes.has(edge.target)) && edge.source !== edge.target;
+  if (pinnedSide && !live) {
+    if (registered) {
+      return {
+        point: worldToScreen(
+          { x: rect.x + registered.offset.x, y: rect.y + registered.offset.y },
+          viewport
+        ),
+        position: registered.position
+      };
+    }
+    return endAt(pinnedSide);
+  }
+  const key = displayedSideKey(edge.id, role);
+  const side = 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(() => this.requestRender());
+  locks = createLockRegistry(() => this.requestRender());
   viewport;
   viewportClamp = null;
   pending = null;
@@ -590,6 +1052,11 @@ var RivetGraphStore = class {
   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 = [];
@@ -599,6 +1066,10 @@ var RivetGraphStore = class {
   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 = () => {
   };
   constructor(init) {
@@ -613,6 +1084,7 @@ var RivetGraphStore = class {
   // --- internal bookkeeping ------------------------------------------------
   invalidateWorld() {
     this.worldCache = null;
+    this.peerWorldCache = null;
   }
   /**
    * The single node-map write path. Invalidates the world-position cache exactly
@@ -650,17 +1122,22 @@ var RivetGraphStore = class {
     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) {
+  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);
+    handler?.(changes, { origin });
   }
   emitNodeChanges(changes, record = true) {
     this.emit(changes, this.nodeChangeHandler, record);
@@ -805,10 +1282,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);
       }
     }
@@ -901,12 +1379,47 @@ 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;
+    const live = this.heldNodeIds.has(id) ? void 0 : this.presence.getNodeTransforms().get(id);
+    const size = live ?? this.nodes.get(id)?.size ?? DEFAULT_NODE_SIZE;
     return { x: origin.x, y: origin.y, width: size.width, height: size.height };
   };
   getNodeDepth = (id) => nodeDepth(this.nodes, id);
@@ -1009,6 +1522,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);
@@ -1050,8 +1573,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,
@@ -1085,7 +1608,43 @@ var RivetGraphStore = class {
     this.nodeDragging = dragging;
     if (!dragging) this.draggingNodeIds.clear();
   };
-  isNodeResizing = () => this.nodeResizing;
+  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) {
@@ -1204,6 +1763,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);
       }
     }
@@ -1233,6 +1793,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() {
@@ -1449,45 +2022,6 @@ function createRivetStore(init) {
   return new RivetGraphStore(init);
 }
 
-// src/viewport.ts
-function worldToScreen(point, viewport) {
-  return {
-    x: point.x * viewport.zoom + viewport.x,
-    y: point.y * viewport.zoom + viewport.y
-  };
-}
-function screenToWorld(point, viewport) {
-  return {
-    x: (point.x - viewport.x) / viewport.zoom,
-    y: (point.y - viewport.y) / viewport.zoom
-  };
-}
-function zoomAt(viewport, anchor, nextZoom, minZoom = 0.1, maxZoom = 4) {
-  const zoom = clamp(nextZoom, minZoom, maxZoom);
-  const world = screenToWorld(anchor, viewport);
-  return {
-    zoom,
-    x: anchor.x - world.x * zoom,
-    y: anchor.y - world.y * zoom
-  };
-}
-function viewportToCss(viewport) {
-  return `translate(${viewport.x}px, ${viewport.y}px) scale(${viewport.zoom})`;
-}
-function visibleWorldRect(viewport, width, height) {
-  const topLeft = screenToWorld({ x: 0, y: 0 }, viewport);
-  const bottomRight = screenToWorld({ x: width, y: height }, viewport);
-  return {
-    x: topLeft.x,
-    y: topLeft.y,
-    width: bottomRight.x - topLeft.x,
-    height: bottomRight.y - topLeft.y
-  };
-}
-function rectsIntersect(a, b) {
-  return a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y;
-}
-
 // src/connection.ts
 function clientToWorld(store, paneRef, clientX, clientY) {
   const rect = paneRef.current?.getBoundingClientRect();
@@ -1579,8 +2113,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);
@@ -1683,6 +2226,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);
@@ -1735,6 +2282,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);
   };
@@ -1819,7 +2367,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,
@@ -1851,7 +2404,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 = {
@@ -2035,6 +2591,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();
@@ -2066,7 +2627,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);
@@ -2075,14 +2645,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",
     {
@@ -2098,6 +2671,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;
@@ -2153,6 +2826,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);
@@ -2166,6 +2844,7 @@ function useRivetConfig(params) {
     snapGrid,
     swimlaneMargin,
     anchorOptions,
+    presenceOptions,
     panButtons,
     selectionKeys,
     multiSelectionKeys,
@@ -2187,7 +2866,7 @@ var ARROW_DIRS = {
   ArrowLeft: { x: -1, y: 0 },
   ArrowRight: { x: 1, y: 0 }
 };
-function createKeyboardHandler(store) {
+function createKeyboardHandler(store, getSnapGrid) {
   return (event) => {
     if (event.defaultPrevented) return;
     const active = document.activeElement;
@@ -2205,18 +2884,19 @@ function createKeyboardHandler(store) {
     }
     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 step = event.shiftKey ? ARROW_STEP * ARROW_STEP_SHIFT : ARROW_STEP;
+    const snapGrid = getSnapGrid?.() ?? null;
+    const factor = event.shiftKey ? ARROW_STEP_SHIFT : 1;
+    const stepX = (snapGrid?.[0] || ARROW_STEP) * factor;
+    const stepY = (snapGrid?.[1] || ARROW_STEP) * factor;
     for (const id of movers) {
       const node = store.nodes.get(id);
       if (!node) continue;
-      store.moveNode(
-        id,
-        { x: node.position.x + dir.x * step, y: node.position.y + dir.y * step },
-        true
-      );
+      let next = { x: node.position.x + dir.x * stepX, y: node.position.y + dir.y * stepY };
+      if (snapGrid) next = snapToGrid(next, snapGrid);
+      store.moveNode(id, next, true);
     }
   };
 }
@@ -2282,6 +2962,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);
@@ -2428,363 +3109,138 @@ function createZoomController(deps) {
 
 // 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)
-      });
+  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);
     }
-    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 };
+  ctx.fill();
 }
-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)
-    });
+// 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 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 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
+  };
 }
-function pointOnSide(rect, side, alongPct = 50) {
-  const t = alongPct / 100;
-  switch (side) {
-    case "left":
-      return { x: rect.x, y: rect.y + rect.height * t };
-    case "right":
-      return { x: rect.x + rect.width, y: rect.y + rect.height * t };
-    case "top":
-      return { x: rect.x + rect.width * t, y: rect.y };
-    case "bottom":
-      return { x: rect.x + rect.width * t, y: rect.y + rect.height };
-  }
+function 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 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 };
+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([]);
 }
-var WANTED_TYPES = {
-  source: ["source", "either"],
-  target: ["target", "either"]
-};
-function handleOnSide(nodeId, side, role, handles) {
-  if (!handles) return null;
-  for (const record of handles.values()) {
-    if (record.nodeId === nodeId && record.position === side && WANTED_TYPES[role].includes(record.type)) {
-      return record;
-    }
-  }
-  return null;
+function 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 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
-        };
-      }
+function drawPresence(ctx, peers, { viewport, size, getNodeRect, renderCursors, 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");
     }
-    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
-      };
+    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 = resolveFacingSide(
-    rect,
-    nodeRect(peer, worldPositions),
-    extras?.displayedSides?.get(key)
-  );
-  extras?.displayedSides?.set(key, side);
-  return endAt(side);
-}
-function distanceToPolyline(point, points) {
-  let best = Number.POSITIVE_INFINITY;
-  for (let i = 0; i < points.length - 1; i++) {
-    const a = points[i];
-    const b = points[i + 1];
-    if (!a || !b) continue;
-    best = Math.min(best, distanceToSegment(point, a, b));
+  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;
-}
-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));
+  if (renderCursors) {
+    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);
+    }
+  }
+  ctx.restore();
 }
 
 // src/renderer/swimlane.ts
@@ -2817,7 +3273,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)";
@@ -2902,6 +3358,31 @@ function useRivetRuntime(params) {
     let frame = 0;
     let dirty = 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;
+    };
     const anchorPlacement = (nodeId, anchorId, side) => {
       const record = store.anchors.get(handleKey(nodeId, anchorId));
       return record?.geometry ? strayPlacementPct(record.geometry, side, anchorOptions) : null;
@@ -2919,6 +3400,7 @@ function useRivetRuntime(params) {
     });
     const render = () => {
       zoom.step();
+      if (store.presence.step(performance.now())) schedule();
       const viewport = store.getViewport();
       layerHint.apply(viewportToCss(viewport));
       bgCtx.setTransform(size.dpr, 0, 0, size.dpr, 0, 0);
@@ -2926,6 +3408,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;
@@ -2954,9 +3437,18 @@ function useRivetRuntime(params) {
           if (ends) drawEndpointBubbles(fgCtx, ends, size);
         }
       }
+      if (fgCtx && (!store.presence.isEmpty() || store.locks.size() > 0)) {
+        drawPresence(fgCtx, store.presence.getPeers(), {
+          viewport,
+          size,
+          getNodeRect: (id) => store.nodes.has(id) ? store.getNodeRect(id) : null,
+          renderCursors: reconnectRef.current.presenceOptions.renderCursors,
+          locks: store.locks.getLocks()
+        });
+      }
       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,
@@ -3164,7 +3656,7 @@ function useRivetRuntime(params) {
       }
       pan.end(event);
     };
-    const onKeyDown = createKeyboardHandler(store);
+    const onKeyDown = createKeyboardHandler(store, () => reconnectRef.current.snapGrid);
     let focusRetryFrame = 0;
     const unsubscribeFocus = store.subscribeFocus((id) => {
       if (focusRetryFrame) {
@@ -3640,7 +4132,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;
@@ -3666,7 +4158,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]);
@@ -3702,6 +4194,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);
@@ -3712,8 +4206,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);
@@ -3725,17 +4220,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;
@@ -3770,6 +4290,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 = "";
@@ -3796,6 +4320,7 @@ function startGroupDrag(params) {
       }
       store.moveNode(moverId, position, true);
     }
+    if (initiator) store.endNodeGesture(initiator, [...starts.keys()]);
     repositionAffected();
   };
   window.addEventListener("pointermove", onMove);
@@ -3923,7 +4448,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);
@@ -3931,6 +4460,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) => {
@@ -3940,9 +4470,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;
@@ -3955,6 +4487,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;
@@ -3987,6 +4524,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) {
@@ -4039,8 +4583,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);
@@ -4050,6 +4594,7 @@ var NodeWrapper = memo(function NodeWrapper2({ id }) {
     if (noDrag) return;
     startGroupDrag({
       store,
+      nodeId: id,
       el,
       event,
       snapGrid,
@@ -4067,6 +4612,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(
@@ -4075,12 +4623,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,
@@ -4089,6 +4639,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.
@@ -4466,6 +5017,12 @@ function Rivet({
   snapGrid,
   alignmentGuides = false,
   anchorOptions,
+  peers,
+  onLocalPresence,
+  presenceOptions,
+  lockedNodes,
+  canInteractWithLocked,
+  onNodeLockConflict,
   panOnDrag = true,
   selectionOnDrag = false,
   selectionKeyCode = "Shift",
@@ -4493,6 +5050,8 @@ function Rivet({
   onReconnect,
   onReconnectStart,
   onReconnectEnd,
+  onNodeDragStart,
+  onNodeDragEnd,
   onSelectionChange,
   onFocusChange,
   className,
@@ -4515,6 +5074,7 @@ function Rivet({
     snapGrid,
     swimlaneMargin,
     anchorOptions,
+    presenceOptions,
     panOnDrag,
     selectionKeyCode,
     multiSelectionKeyCode,
@@ -4555,14 +5115,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()]
@@ -4615,6 +5189,23 @@ function Rivet({
   const backgroundCanvasRef = useRef(null);
   const edgeCanvasRef = useRef(null);
   const foregroundCanvasRef = 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,
@@ -4626,6 +5217,7 @@ function Rivet({
     edgeTypes: cfg.edgeTypes,
     defaultEdgeOptions: cfg.defaultEdgeOptions,
     anchorOptions: cfg.anchorOptions,
+    presenceOptions: cfg.presenceOptions,
     edgeRenderer: renderer,
     edgesReconnectable,
     isValidConnection: cfg.isValidConnection,
@@ -4641,7 +5233,8 @@ function Rivet({
     zoomSpeed,
     minZoom,
     maxZoom,
-    gridGap
+    gridGap,
+    snapGrid: cfg.snapGrid
   });
   const contextValue = useMemo(
     () => ({
@@ -4796,6 +5389,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 {
@@ -4805,6 +5399,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;
@@ -4844,6 +5442,6 @@ function useRivet() {
 // src/index.ts
 var VERSION = "0.0.0";
 
-export { BUILTIN_EDGE_TYPES, BUILTIN_NODE_TYPES, Canvas2DEdgeRenderer, Controls, DEFAULT_ALIGNMENT_HYSTERESIS, DefaultNode, GroupNode, Handle, MiniMap, NodeResizer, Rivet, VERSION, alignRect, applyEdgeChanges, applyNodeChanges, boundingRect, canvas2DEdgeRenderer, clampChildToParent, cloneElements, createRivetStore, edgeEndpointHandle, facingSide, getBezierPath, getSmoothStepPath, getStepPath, getStraightPath, handleKey, parseEdgeEndpoint, parseSideHandleId, rectsIntersect, resolveFacingSide, screenToWorld, serializeGraph, snapToGrid, useRivet, viewportToCss, visibleWorldRect, worldToScreen, zoomAt };
+export { BUILTIN_EDGE_TYPES, BUILTIN_NODE_TYPES, Canvas2DEdgeRenderer, Controls, DEFAULT_ALIGNMENT_HYSTERESIS, DefaultNode, GroupNode, Handle, MiniMap, NodeResizer, Rivet, VERSION, alignRect, applyEdgeChanges, applyNodeChanges, boundingRect, canvas2DEdgeRenderer, clampChildToParent, cloneElements, createRivetStore, edgeEndpointHandle, facingSide, getBezierPath, getSmoothStepPath, getStepPath, getStraightPath, handleKey, parseEdgeEndpoint, parseSideHandleId, rectsIntersect, resolveFacingSide, resolveFacingSideAmong, screenToWorld, serializeGraph, snapToGrid, useRivet, viewportToCss, visibleWorldRect, worldToScreen, zoomAt };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map