@kolosal-ai/rivet 0.2.0 → 0.4.0

package/dist/index.js

@@ -1,9 +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 { findSelectableAnchor, parseAnchorHandleId, ANCHOR_SIDES, anchorDotHandleId, strayPlacementPct, anchorHandleId, anchorAutoHandleId, parseAnchorAutoHandleId, normalizeAnchorConnection, computeAnchorGeometry, anchorGeometryEqual, DEFAULT_ANCHOR_OPTIONS, anchorRect } from './chunk-W5HBJ4VF.js';
+import { snapToGrid, boundingRect, clampChildToParent, anchorTargetKey, createPresenceRegistry, createLockRegistry, nodeControlledEqual, buildChildIndex, collectDescendants, worldPosition, nodeDepth, descendantIds, hasAncestorIn, edgeTargetKey, DEFAULT_PRESENCE_OPTIONS, collectPeerOutlines, peerOutlinesEqual, usePeerIdentities, serializeGraph, presenceTargetKey, peerColor, isNodeTarget, presenceTargetEdgeId } from './chunk-TT2N7KWU.js';
+export { LOCK_DEFAULT_REFUSED, boundingRect, clampChildToParent, serializeGraph, snapToGrid, useNodeLock, useNodeLockAllows } from './chunk-TT2N7KWU.js';
 import { useRivetContext, RivetNodeContext, useRivetNodeContext, useRivetControls, RivetContext, useRivetViewport } from './chunk-VQYN27OK.js';
 export { useRivetContext, useRivetControls, useRivetFocusedNode, useRivetHistory, useRivetViewport } from './chunk-VQYN27OK.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';
 
@@ -282,6 +282,7 @@ var DEFAULT_NODE_SIZE = { width: 160, height: 44 };
 function handleKey(nodeId, handleId) {
   return `${nodeId} ${handleId}`;
 }
+var DRAG_THRESHOLD = 4;
 var SELECTOR = {
   node: "[data-rivet-node]",
   handle: "[data-rivet-handle]",
@@ -387,111 +388,6 @@ function guardNodeChanges(changes, isHeld, getLocal) {
   return guarded;
 }
 
-// src/graph.ts
-function clampChildToParent(position, childSize, parentSize) {
-  const maxX = Math.max(0, parentSize.width - childSize.width);
-  const maxY = Math.max(0, parentSize.height - childSize.height);
-  return {
-    x: Math.min(maxX, Math.max(0, position.x)),
-    y: Math.min(maxY, Math.max(0, position.y))
-  };
-}
-function snapToGrid(position, grid) {
-  const [gx, gy] = grid;
-  return {
-    x: gx > 0 ? Math.round(position.x / gx) * gx : position.x,
-    y: gy > 0 ? Math.round(position.y / gy) * gy : position.y
-  };
-}
-function boundingRect(rects) {
-  if (rects.length === 0) return null;
-  let minX = Number.POSITIVE_INFINITY;
-  let minY = Number.POSITIVE_INFINITY;
-  let maxX = Number.NEGATIVE_INFINITY;
-  let maxY = Number.NEGATIVE_INFINITY;
-  for (const r of rects) {
-    minX = Math.min(minX, r.x);
-    minY = Math.min(minY, r.y);
-    maxX = Math.max(maxX, r.x + r.width);
-    maxY = Math.max(maxY, r.y + r.height);
-  }
-  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
-}
-var MAX_PARENT_DEPTH = 50;
-function worldPosition(nodes, id, maxDepth = MAX_PARENT_DEPTH) {
-  const node = nodes.get(id);
-  if (!node) return { x: 0, y: 0 };
-  let x = node.position.x;
-  let y = node.position.y;
-  let parentId = node.parentId;
-  let guard = 0;
-  while (parentId && guard++ < maxDepth) {
-    const parent = nodes.get(parentId);
-    if (!parent) break;
-    x += parent.position.x;
-    y += parent.position.y;
-    parentId = parent.parentId;
-  }
-  return { x, y };
-}
-function nodeDepth(nodes, id, maxDepth = MAX_PARENT_DEPTH) {
-  let depth = 0;
-  let parentId = nodes.get(id)?.parentId;
-  while (parentId && depth < maxDepth) {
-    depth++;
-    parentId = nodes.get(parentId)?.parentId;
-  }
-  return depth;
-}
-function hasAncestorIn(nodes, id, set, maxDepth = MAX_PARENT_DEPTH) {
-  let parentId = nodes.get(id)?.parentId;
-  let guard = 0;
-  while (parentId && guard++ < maxDepth) {
-    if (set.has(parentId)) return true;
-    parentId = nodes.get(parentId)?.parentId;
-  }
-  return false;
-}
-function buildChildIndex(nodes) {
-  const childrenOf = /* @__PURE__ */ new Map();
-  for (const node of nodes.values()) {
-    if (!node.parentId) continue;
-    const list = childrenOf.get(node.parentId);
-    if (list) list.push(node.id);
-    else childrenOf.set(node.parentId, [node.id]);
-  }
-  return childrenOf;
-}
-function collectDescendants(id, childIndex, out) {
-  for (const child of childIndex.get(id) ?? []) {
-    out.push(child);
-    collectDescendants(child, childIndex, out);
-  }
-}
-function descendantIds(nodes, id) {
-  const out = [];
-  collectDescendants(id, buildChildIndex(nodes), out);
-  return out;
-}
-function serializeGraph(nodes, edges, viewport) {
-  const cleanNodes = [];
-  for (const node of nodes) {
-    const copy = { ...node, position: { ...node.position } };
-    if (node.size) copy.size = { ...node.size };
-    copy.hovered = void 0;
-    copy.dragging = void 0;
-    cleanNodes.push(copy);
-  }
-  return {
-    nodes: cleanNodes,
-    edges: [...edges].map((edge) => ({ ...edge })),
-    viewport: { ...viewport }
-  };
-}
-function nodeControlledEqual(a, b) {
-  return a.position.x === b.position.x && a.position.y === b.position.y && Boolean(a.selected) === Boolean(b.selected) && a.data === b.data && a.type === b.type && a.laneId === b.laneId && a.ariaLabel === b.ariaLabel && a.parentId === b.parentId && a.extent === b.extent && a.width === b.width && a.height === b.height && Boolean(a.dragging) === Boolean(b.dragging) && a.size?.width === b.size?.width && a.size?.height === b.size?.height;
-}
-
 // src/history.ts
 function hasRecordableChange(changes) {
   return changes.some((change) => {
@@ -997,6 +893,30 @@ function resolveEnd(edge, role, node, peer, frame) {
   extras?.displayedSides?.set(key, side);
   return endAt(side);
 }
+function polylineMidpoint(points) {
+  const first = points[0];
+  if (!first) return { x: 0, y: 0 };
+  let total = 0;
+  for (let i = 0; i < points.length - 1; i++) {
+    const a = points[i];
+    const b = points[i + 1];
+    if (a && b) total += Math.hypot(b.x - a.x, b.y - a.y);
+  }
+  let travelled = 0;
+  const half = total / 2;
+  for (let i = 0; i < points.length - 1; i++) {
+    const a = points[i];
+    const b = points[i + 1];
+    if (!a || !b) continue;
+    const length = Math.hypot(b.x - a.x, b.y - a.y);
+    if (travelled + length >= half) {
+      const t = length === 0 ? 0 : (half - travelled) / length;
+      return { x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t };
+    }
+    travelled += length;
+  }
+  return points[points.length - 1] ?? first;
+}
 function distanceToPolyline(point, points) {
   let best = Number.POSITIVE_INFINITY;
   for (let i = 0; i < points.length - 1; i++) {
@@ -1025,8 +945,14 @@ var RivetGraphStore = class {
   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());
+  presence = createPresenceRegistry({
+    requestRender: () => this.requestRender(),
+    requestCursorRender: () => this.requestCursorRender()
+  });
+  locks = createLockRegistry(
+    () => this.requestRender(),
+    (id) => this.nodes.get(id)?.parentId
+  );
   viewport;
   viewportClamp = null;
   pending = null;
@@ -1039,6 +965,8 @@ var RivetGraphStore = class {
   nodeElements = /* @__PURE__ */ new Map();
   viewportListeners = /* @__PURE__ */ new Set();
   frameListeners = /* @__PURE__ */ new Set();
+  cursorFrameListeners = /* @__PURE__ */ new Set();
+  connectionListeners = /* @__PURE__ */ new Set();
   selectionListeners = /* @__PURE__ */ new Set();
   selectedNodeIds = /* @__PURE__ */ new Set();
   selectionBoxActive = false;
@@ -1048,6 +976,11 @@ var RivetGraphStore = class {
   focusedNodeId = null;
   focusListeners = /* @__PURE__ */ new Set();
   selectedEdgeId = null;
+  /** Selected anchors, keyed like the registry so lookups are one hash. */
+  selectedAnchors = /* @__PURE__ */ new Map();
+  selectedAnchorSnapshot = [];
+  selectedAnchorsStale = false;
+  anchorSelectionListeners = /* @__PURE__ */ new Set();
   nodeDragging = false;
   nodeResizing = false;
   edgeAlignment = "manual";
@@ -1059,6 +992,8 @@ var RivetGraphStore = class {
   lockConflictHandler = null;
   displayedSides = /* @__PURE__ */ new Map();
   edgeLabelAnchors = /* @__PURE__ */ new Map();
+  /** Screen-space points on claimed edges, published only while DOM outlines are on. */
+  peerEdgeAnchors = /* @__PURE__ */ new Map();
   alignmentGuides = [];
   nodeChangeHandler = null;
   edgeChangeHandler = null;
@@ -1072,6 +1007,12 @@ var RivetGraphStore = class {
   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);
@@ -1246,6 +1187,7 @@ var RivetGraphStore = class {
     for (const key of this.anchors.keys()) {
       if (key.startsWith(prefix)) this.anchors.delete(key);
     }
+    this.dropSelectedAnchors((ref) => ref.nodeId === id);
   }
   removeNodeInternal(id, removedEdges) {
     if (!this.nodes.has(id)) return false;
@@ -1373,6 +1315,15 @@ var RivetGraphStore = class {
   notifyFrame = () => {
     for (const listener of this.frameListeners) listener();
   };
+  subscribeCursorFrame = (listener) => {
+    this.cursorFrameListeners.add(listener);
+    return () => {
+      this.cursorFrameListeners.delete(listener);
+    };
+  };
+  notifyCursorFrame = () => {
+    for (const listener of this.cursorFrameListeners) listener();
+  };
   // --- node geometry -------------------------------------------------------
   getWorldPositions = () => {
     if (!this.worldCache) {
@@ -1419,8 +1370,14 @@ var RivetGraphStore = class {
   getNodeRect = (id) => {
     const origin = this.getNodeWorldPosition(id);
     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 };
+    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);
@@ -1618,8 +1575,10 @@ var RivetGraphStore = class {
     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 openedSet = new Set(opened);
+    for (const nodeId of held) {
+      const source = this.locks.getLockSource(nodeId);
+      if (source === null || !openedSet.has(source)) continue;
       const holderId = this.locks.getHolder(nodeId);
       if (holderId) this.lockConflictHandler?.({ nodeId, holderId, ids: held });
     }
@@ -1647,6 +1606,7 @@ var RivetGraphStore = class {
   };
   selectNode = (id, additive = false) => {
     this.setSelectionBoxActive(false);
+    this.dropSelectedAnchors(() => true);
     if (id === null) {
       this.applyNodeSelection(/* @__PURE__ */ new Set());
       this.notifySelection();
@@ -1666,6 +1626,7 @@ var RivetGraphStore = class {
   };
   selectNodes = (ids, additive = false) => {
     this.setSelectionBoxActive(false);
+    this.dropSelectedAnchors(() => true);
     const target = additive ? new Set(this.selectedNodeIds) : /* @__PURE__ */ new Set();
     for (const id of ids) target.add(id);
     this.applyNodeSelection(target);
@@ -1674,6 +1635,7 @@ var RivetGraphStore = class {
   };
   getSelectedNodes = () => [...this.selectedNodeIds];
   isNodeSelected = (id) => this.selectedNodeIds.has(id);
+  getSelectedEdgeId = () => this.selectedEdgeId;
   getSelection = () => this.buildSelection();
   subscribeSelection = (listener) => {
     this.selectionListeners.add(listener);
@@ -1713,6 +1675,7 @@ var RivetGraphStore = class {
   // --- edges ---------------------------------------------------------------
   selectEdge = (id) => {
     this.setSelectionBoxActive(false);
+    this.dropSelectedAnchors(() => true);
     this.setEdgeSelection(id);
     this.applyNodeSelection(/* @__PURE__ */ new Set());
     this.notifySelection();
@@ -1758,7 +1721,7 @@ var RivetGraphStore = class {
     const removedNodes = [];
     const removedEdges = [];
     const selectedEdge = this.selectedEdgeId;
-    if (selectedEdge && this.removeEdgeInternal(selectedEdge)) {
+    if (selectedEdge && this.locks.allows(edgeTargetKey(selectedEdge), "delete") && this.removeEdgeInternal(selectedEdge)) {
       removedEdges.push(selectedEdge);
     }
     if (this.selectedNodeIds.size > 0) {
@@ -1883,6 +1846,10 @@ var RivetGraphStore = class {
   setEdgeLabelAnchors = (anchors) => {
     this.edgeLabelAnchors = anchors;
   };
+  getPeerEdgeAnchors = () => this.peerEdgeAnchors;
+  setPeerEdgeAnchors = (anchors) => {
+    this.peerEdgeAnchors = anchors;
+  };
   getAlignmentGuides = () => this.alignmentGuides;
   setAlignmentGuides = (guides) => {
     this.alignmentGuides = guides;
@@ -1929,6 +1896,8 @@ var RivetGraphStore = class {
       anchorId,
       color: options?.color ?? prev?.color,
       strays: options?.strays ?? prev?.strays,
+      selectable: options?.selectable ?? prev?.selectable,
+      data: options?.data ?? prev?.data,
       element,
       // Keep the last-known geometry until the next successful measurement, so
       // a re-bind (display remount, editor DOM swap) never blanks the chrome.
@@ -1947,6 +1916,7 @@ var RivetGraphStore = class {
   };
   unregisterAnchor = (nodeId, anchorId) => {
     if (!this.anchors.delete(handleKey(nodeId, anchorId))) return;
+    this.dropSelectedAnchors((ref) => ref.nodeId === nodeId && ref.anchorId === anchorId);
     this.bumpAnchors(nodeId);
     this.requestRender();
   };
@@ -1968,6 +1938,51 @@ var RivetGraphStore = class {
     return records;
   };
   getNodeAnchorsVersion = (nodeId) => this.anchorVersions.get(nodeId) ?? 0;
+  getSelectedAnchors = () => {
+    if (this.selectedAnchorsStale) {
+      this.selectedAnchorsStale = false;
+      this.selectedAnchorSnapshot = [...this.selectedAnchors.values()];
+    }
+    return this.selectedAnchorSnapshot;
+  };
+  setSelectedAnchors = (refs) => {
+    const next = /* @__PURE__ */ new Map();
+    for (const ref of refs) next.set(handleKey(ref.nodeId, ref.anchorId), ref);
+    if (next.size === this.selectedAnchors.size && [...next.keys()].every((key) => this.selectedAnchors.has(key))) {
+      return;
+    }
+    const clearsGraph = next.size > 0 && (this.selectedNodeIds.size > 0 || this.selectedEdgeId !== null);
+    this.selectedAnchors = /* @__PURE__ */ new Map();
+    if (clearsGraph) {
+      this.selectNode(null);
+      this.selectEdge(null);
+    }
+    this.selectedAnchors = next;
+    this.selectedAnchorsStale = true;
+    for (const listener of this.anchorSelectionListeners) listener();
+    this.requestRender();
+  };
+  isAnchorSelected = (nodeId, anchorId) => this.selectedAnchors.has(handleKey(nodeId, anchorId));
+  subscribeAnchorSelection = (listener) => {
+    this.anchorSelectionListeners.add(listener);
+    return () => {
+      this.anchorSelectionListeners.delete(listener);
+    };
+  };
+  /** Drop every selected anchor the predicate claims. No-op when none match. */
+  dropSelectedAnchors(matches) {
+    if (this.selectedAnchors.size === 0) return;
+    let changed = false;
+    for (const [key, ref] of this.selectedAnchors) {
+      if (!matches(ref)) continue;
+      this.selectedAnchors.delete(key);
+      changed = true;
+    }
+    if (!changed) return;
+    this.selectedAnchorsStale = true;
+    for (const listener of this.anchorSelectionListeners) listener();
+    this.requestRender();
+  }
   subscribeNodeAnchors = (nodeId, listener) => {
     let set = this.anchorListeners.get(nodeId);
     if (!set) {
@@ -1992,17 +2007,29 @@ var RivetGraphStore = class {
   beginConnection = (next) => {
     this.pending = next;
     this.requestRender();
+    this.notifyConnection();
   };
   updateConnection = (to, toPosition) => {
     if (!this.pending) return;
     this.pending = { ...this.pending, to, toPosition };
     this.requestRender();
+    this.notifyConnection();
   };
   endConnection = () => {
     if (!this.pending) return;
     this.pending = null;
     this.requestRender();
+    this.notifyConnection();
+  };
+  subscribeConnection = (listener) => {
+    this.connectionListeners.add(listener);
+    return () => {
+      this.connectionListeners.delete(listener);
+    };
   };
+  notifyConnection() {
+    for (const listener of this.connectionListeners) listener();
+  }
   // --- render loop hook ----------------------------------------------------
   requestRender = () => {
     this.renderRequester();
@@ -2010,6 +2037,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;
@@ -2674,7 +2708,12 @@ function NodeResizer({
 
 // 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);
+var sameConnection = (a, b) => {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return a.source === b.source && a.sourceHandle === b.sourceHandle && a.toPosition === b.toPosition && a.to.x === b.to.x && a.to.y === b.to.y;
+};
+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) && sameConnection(a.pending, b.pending);
 function trackLocalPresence({
   store,
   pane,
@@ -2686,6 +2725,21 @@ function trackLocalPresence({
   let last = null;
   let timer = null;
   let lastEmit = Number.NEGATIVE_INFINITY;
+  const selectionTargets = () => {
+    const targets = store.getSelectedNodes();
+    const edgeId = store.getSelectedEdgeId();
+    if (edgeId) targets.push(presenceTargetKey({ kind: "edge", id: edgeId }));
+    for (const ref of store.getSelectedAnchors()) {
+      targets.push(presenceTargetKey({ kind: "anchor", ...ref }));
+    }
+    return targets;
+  };
+  const localConnection = () => {
+    const pending = store.getPending();
+    if (!pending) return null;
+    const { source, sourceHandle, sourceType, from, to, toPosition } = pending;
+    return toPosition === void 0 ? { source, sourceHandle, sourceType, from, to } : { source, sourceHandle, sourceType, from, to, toPosition };
+  };
   const publish = () => {
     if (timer !== null) {
       clearTimeout(timer);
@@ -2694,8 +2748,9 @@ function trackLocalPresence({
     lastEmit = performance.now();
     const next = {
       cursor,
-      selection: store.getSelectedNodes(),
-      holding: [...store.getHeldNodeIds()]
+      selection: selectionTargets(),
+      holding: [...store.getHeldNodeIds()],
+      pending: localConnection()
     };
     if (last && samePresence(last, next)) return;
     last = next;
@@ -2737,7 +2792,18 @@ function trackLocalPresence({
     schedule();
   });
   const unsubscribeSelection = store.subscribeSelection(() => publish());
+  const unsubscribeAnchors = store.subscribeAnchorSelection(() => publish());
   const unsubscribeHeld = store.subscribeHeldNodes(() => publish());
+  let hadPending = store.getPending() !== null;
+  const unsubscribeConnection = store.subscribeConnection(() => {
+    const has = store.getPending() !== null;
+    if (has === hadPending) {
+      schedule();
+      return;
+    }
+    hadPending = has;
+    publish();
+  });
   pane.addEventListener("pointermove", onPointerMove);
   pane.addEventListener("pointerleave", onPointerLeave);
   return () => {
@@ -2746,7 +2812,9 @@ function trackLocalPresence({
     pane.removeEventListener("pointerleave", onPointerLeave);
     unsubscribeViewport();
     unsubscribeSelection();
+    unsubscribeAnchors();
     unsubscribeHeld();
+    unsubscribeConnection();
   };
 }
 
@@ -3043,7 +3111,7 @@ function createPanController(deps) {
 
 // src/input/resize-controller.ts
 function createResizeController(deps) {
-  const { pane, bgCanvas, size, edgeRenderer, foregroundRenderer, schedule } = deps;
+  const { pane, bgCanvas, size, edgeRenderer, foregroundRenderer, onResize, schedule } = deps;
   const resize = () => {
     const rect = pane.getBoundingClientRect();
     size.width = rect.width;
@@ -3055,6 +3123,7 @@ function createResizeController(deps) {
     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);
@@ -3147,6 +3216,9 @@ var LABEL_PADDING_X = 6;
 var LABEL_HEIGHT = 17;
 var LABEL_RADIUS = 4;
 var CULL_MARGIN_PX = 64;
+var PENDING_DASH = [6, 4];
+var PENDING_LINE_WIDTH = 2;
+var PENDING_TIP_RADIUS = 3.5;
 function traceRect(ctx, rect, radius) {
   ctx.beginPath();
   if (typeof ctx.roundRect === "function") {
@@ -3199,15 +3271,18 @@ function drawCursor(ctx, point, color, name) {
   ctx.fillStyle = "#ffffff";
   ctx.fillText(name, x + LABEL_PADDING_X, y + LABEL_HEIGHT / 2);
 }
-function drawPresence(ctx, peers, { viewport, size, getNodeRect, renderCursors, locks }) {
+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()]);
+    const held = /* @__PURE__ */ new Set([
+      ...peer.holding.filter((key) => isNodeTarget(key)),
+      ...peer.transforms.keys()
+    ]);
     for (const id of peer.selection) {
-      if (held.has(id)) continue;
+      if (!isNodeTarget(id) || held.has(id)) continue;
       const rect = getNodeRect(id);
       if (!rect) continue;
       const screen = projectRect(rect, viewport);
@@ -3224,7 +3299,7 @@ function drawPresence(ctx, peers, { viewport, size, getNodeRect, renderCursors,
   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;
+      if (!isNodeTarget(id) || painted.has(id)) continue;
       const rect = getNodeRect(id);
       if (!rect) continue;
       const screen = projectRect(rect, viewport);
@@ -3232,15 +3307,80 @@ function drawPresence(ctx, peers, { viewport, size, getNodeRect, renderCursors,
       drawNodeOutline(ctx, screen, declared.get(holderId) ?? peerColor(holderId), "held");
     }
   }
-  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();
+}
+function collectPeerEdges(peers, lockedEdges) {
+  if (peers.length === 0 && lockedEdges.size === 0) return void 0;
+  let claimed = null;
+  const claim = (key, color, override) => {
+    const edgeId = presenceTargetEdgeId(key);
+    if (edgeId === null) return;
+    claimed ??= /* @__PURE__ */ new Map();
+    if (override || !claimed.has(edgeId)) claimed.set(edgeId, color);
+  };
+  for (const peer of peers) {
+    for (const key of peer.selection) claim(key, peer.color, false);
+  }
+  for (const peer of peers) {
+    for (const key of peer.holding) claim(key, peer.color, true);
+  }
+  if (lockedEdges.size > 0) {
+    const declared = new Map(peers.map((peer) => [peer.id, peer.color]));
+    for (const [edgeId, holderId] of lockedEdges) {
+      claimed ??= /* @__PURE__ */ new Map();
+      if (!claimed.has(edgeId)) {
+        claimed.set(edgeId, declared.get(holderId) ?? peerColor(holderId));
+      }
     }
   }
-  ctx.restore();
+  return claimed ?? void 0;
+}
+function drawPeerPending(ctx, peers, { viewport, size, handles }) {
+  let saved = false;
+  for (const peer of peers) {
+    if (!peer.pending) continue;
+    const from = worldToScreen(peer.pending.from, viewport);
+    const to = worldToScreen(peer.pending.to, viewport);
+    const bounds = {
+      x: Math.min(from.x, to.x),
+      y: Math.min(from.y, to.y),
+      width: Math.abs(to.x - from.x),
+      height: Math.abs(to.y - from.y)
+    };
+    if (!onScreen(bounds, size)) continue;
+    if (!saved) {
+      saved = true;
+      ctx.save();
+      ctx.setTransform(size.dpr, 0, 0, size.dpr, 0, 0);
+      ctx.lineWidth = PENDING_LINE_WIDTH;
+      ctx.setLineDash(PENDING_DASH);
+    }
+    const points = buildPendingPath(peer.pending, handles, viewport);
+    const [first, ...rest] = points;
+    if (!first) continue;
+    ctx.strokeStyle = peer.color;
+    ctx.beginPath();
+    ctx.moveTo(first.x, first.y);
+    for (const point of rest) ctx.lineTo(point.x, point.y);
+    ctx.stroke();
+    ctx.setLineDash([]);
+    ctx.fillStyle = peer.color;
+    ctx.beginPath();
+    ctx.arc(to.x, to.y, PENDING_TIP_RADIUS, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.setLineDash(PENDING_DASH);
+  }
+  if (saved) ctx.restore();
+}
+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
@@ -3302,6 +3442,7 @@ function drawAlignmentGuides(ctx, guides, viewport, size) {
 }
 var ENDPOINT_BUBBLE_RADIUS = 6;
 var HOVER_KEEP_TOLERANCE = 16;
+var EMPTY_EDGE_ANCHORS = /* @__PURE__ */ new Map();
 function drawEndpointBubbles(ctx, ends, size) {
   ctx.save();
   ctx.setTransform(size.dpr, 0, 0, size.dpr, 0, 0);
@@ -3318,7 +3459,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;
@@ -3326,6 +3467,8 @@ function useRivetRuntime(params) {
   const [visibleIds, setVisibleIds] = useState([]);
   const reconnectRef = useRef(params);
   reconnectRef.current = params;
+  const outlineModeRef = useRef(params.outlineMode);
+  outlineModeRef.current = params.outlineMode;
   const sizeRef = useRef({ width: 0, height: 0, dpr: 1 });
   const visibleKeyRef = useRef("");
   const swimlaneLanesRef = useRef(swimlaneLanes);
@@ -3357,6 +3500,7 @@ 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) => {
@@ -3383,6 +3527,39 @@ function useRivetRuntime(params) {
       }
       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;
@@ -3398,9 +3575,10 @@ function useRivetRuntime(params) {
       scrollToPan,
       schedule: () => schedule()
     });
+    const canReconnect = (edgeId) => store.locks.size() === 0 || store.locks.allows(edgeTargetKey(edgeId), "reconnect");
     const render = () => {
       zoom.step();
-      if (store.presence.step(performance.now())) schedule();
+      stepPresence();
       const viewport = store.getViewport();
       layerHint.apply(viewportToCss(viewport));
       bgCtx.setTransform(size.dpr, 0, 0, size.dpr, 0, 0);
@@ -3412,6 +3590,8 @@ function useRivetRuntime(params) {
       const edgeList = [...store.edges.values()];
       const pending = store.getPending();
       const liveAlignNodes = store.getEdgeAlignment() === "live" && store.isNodeDragging() ? store.getDraggingNodeIds() : void 0;
+      const outlineMode = outlineModeRef.current;
+      const peerEdges = outlineMode === "none" ? void 0 : collectPeerEdges(store.presence.getPeers(), store.locks.getLockedEdges());
       edgeRenderer.draw(edgeList, store.nodes, viewport, {
         handles: store.handles,
         pending: null,
@@ -3420,32 +3600,43 @@ function useRivetRuntime(params) {
         worldPositions,
         displayedSides: store.getDisplayedSides(),
         liveAlignNodes,
-        anchorPlacement
+        anchorPlacement,
+        peerEdges
       });
       store.setEdgeLabelAnchors(edgeRenderer.getLabels());
+      if (outlineMode === "dom") {
+        store.setPeerEdgeAnchors(edgeRenderer.getPeerEdgeAnchors?.() ?? EMPTY_EDGE_ANCHORS);
+      }
       foregroundRenderer.draw([], store.nodes, viewport, {
         handles: store.handles,
         pending
       });
+      if (fgCtx && !store.presence.isEmpty()) {
+        drawPeerPending(fgCtx, store.presence.getPeers(), {
+          viewport,
+          size,
+          handles: store.handles
+        });
+      }
       if (fgCtx) drawAlignmentGuides(fgCtx, store.getAlignmentGuides(), viewport, size);
       if (fgCtx) {
         const affordanceId = hoveredEdgeId ?? store.getSelectedEdge();
         const edge = affordanceId ? store.edges.get(affordanceId) : void 0;
         const reconnectable = edge ? edge.reconnectable ?? reconnectRef.current.edgesReconnectable : false;
-        if (edge && reconnectable && edge.id !== pending?.reconnecting) {
+        if (edge && reconnectable && edge.id !== pending?.reconnecting && canReconnect(edge.id)) {
           const ends = edgeRenderer.getEndpoints?.().get(edge.id);
           if (ends) drawEndpointBubbles(fgCtx, ends, size);
         }
       }
-      if (fgCtx && (!store.presence.isEmpty() || store.locks.size() > 0)) {
-        drawPresence(fgCtx, store.presence.getPeers(), {
+      if (fgCtx && outlineMode === "canvas" && (!store.presence.isEmpty() || store.locks.size() > 0)) {
+        drawPeerOutlines(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()
         });
       }
+      drawCursorLayer();
       if (edgeList.some((edge) => edge.animated ?? defaultEdgeOptions?.animated)) schedule();
       const rect = visibleWorldRect(viewport, size.width, size.height);
       const margin = CULL_MARGIN_PX2 / viewport.zoom;
@@ -3474,19 +3665,34 @@ function useRivetRuntime(params) {
         setVisibleIds(ids);
       }
       store.notifyFrame();
+      store.notifyCursorFrame();
     };
     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();
+      store.notifyCursorFrame();
     };
     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;
@@ -3522,6 +3728,7 @@ function useRivetRuntime(params) {
       return { x, y: base.y + size2.height / 2 };
     };
     const beginReconnect = (edge, end) => {
+      if (!canReconnect(edge.id)) return;
       zoom.cancel();
       const fixedIsSource = end === "target";
       const fixedNodeId = fixedIsSource ? edge.source : edge.target;
@@ -3578,7 +3785,7 @@ function useRivetRuntime(params) {
         if (hit.edgeId !== hoveredEdgeId && hit.edgeId !== store.getSelectedEdge()) return null;
         const edge = store.edges.get(hit.edgeId);
         const reconnectable = edge ? edge.reconnectable ?? reconnectRef.current.edgesReconnectable : false;
-        return reconnectable ? hit : null;
+        return reconnectable && canReconnect(hit.edgeId) ? hit : null;
       },
       begin: (edgeId, end) => {
         const edge = store.edges.get(edgeId);
@@ -3617,7 +3824,7 @@ function useRivetRuntime(params) {
       }
       const hitEdge = edgeRenderer.pick(px, py);
       if (hitEdge && store.edges.get(hitEdge)?.selectable !== false) {
-        store.selectEdge(hitEdge);
+        if (store.locks.allows(edgeTargetKey(hitEdge), "select")) store.selectEdge(hitEdge);
         return;
       }
       store.selectNode(null);
@@ -3696,6 +3903,7 @@ function useRivetRuntime(params) {
       size,
       edgeRenderer,
       foregroundRenderer,
+      onResize: sizeCursorLayer,
       schedule
     });
     pane.addEventListener("wheel", zoom.onWheel, { passive: false });
@@ -3712,6 +3920,7 @@ function useRivetRuntime(params) {
       resizer.dispose();
       store.bindRenderRequester(() => {
       });
+      store.bindCursorRenderRequester(null);
       store.bindReconnectDelegate(null);
       unsubscribeFocus();
       if (focusRetryFrame) cancelAnimationFrame(focusRetryFrame);
@@ -3739,6 +3948,7 @@ function useRivetRuntime(params) {
     backgroundCanvasRef,
     edgeCanvasRef,
     foregroundCanvasRef,
+    cursorCanvasRef,
     scrollToPan,
     zoomSpeed,
     minZoom,
@@ -3958,6 +4168,8 @@ var PICK_TOLERANCE = 6;
 var ENDPOINT_RADIUS = 12;
 var ARROW_SIZE = 9;
 var DASH_SPEED = 40;
+var PEER_HALO_EXTRA = 6;
+var PEER_HALO_ALPHA = 0.45;
 var Canvas2DEdgeRenderer = class {
   constructor(canvas, options = {}) {
     this.canvas = canvas;
@@ -3980,6 +4192,8 @@ var Canvas2DEdgeRenderer = class {
   endpoints = /* @__PURE__ */ new Map();
   /** Screen-space label anchor per edge that has a label. */
   labels = /* @__PURE__ */ new Map();
+  /** Screen-space midpoint per edge somebody has claimed, for DOM claim chrome. */
+  peerAnchors = /* @__PURE__ */ new Map();
   resize(width, height, dpr) {
     this.width = width;
     this.height = height;
@@ -3993,6 +4207,10 @@ var Canvas2DEdgeRenderer = class {
   getLabels() {
     return this.labels;
   }
+  /** Screen-space midpoints for the edges a peer had claimed last frame. */
+  getPeerEdgeAnchors() {
+    return this.peerAnchors;
+  }
   /** Screen-space endpoints per edge from the last frame (reconnect affordance). */
   getEndpoints() {
     return this.endpoints;
@@ -4007,11 +4225,23 @@ var Canvas2DEdgeRenderer = class {
     this.geometry.clear();
     this.endpoints.clear();
     this.labels.clear();
+    this.peerAnchors.clear();
     const resolved = buildEdges(edges, nodes, viewport, this.edgeTypes, this.defaults, extras);
+    const peerEdges = extras?.peerEdges;
     for (const edge of resolved) {
       this.geometry.set(edge.id, edge.points);
       this.endpoints.set(edge.id, { source: edge.source, target: edge.target });
       if (edge.label) this.labels.set(edge.id, edge.label);
+      const peerColor2 = peerEdges?.get(edge.id);
+      if (peerColor2) {
+        this.peerAnchors.set(edge.id, polylineMidpoint(edge.points));
+        ctx.strokeStyle = peerColor2;
+        ctx.lineWidth = edge.width + PEER_HALO_EXTRA * 2;
+        ctx.globalAlpha = PEER_HALO_ALPHA;
+        ctx.setLineDash([]);
+        ctx.lineDashOffset = 0;
+        strokePolyline(ctx, edge.points);
+      }
       ctx.strokeStyle = edge.stroke;
       ctx.lineWidth = edge.width;
       ctx.globalAlpha = edge.opacity;
@@ -4072,6 +4302,7 @@ var Canvas2DEdgeRenderer = class {
     this.geometry.clear();
     this.endpoints.clear();
     this.labels.clear();
+    this.peerAnchors.clear();
   }
 };
 var canvas2DEdgeRenderer = (canvas, options) => new Canvas2DEdgeRenderer(canvas, options);
@@ -4181,7 +4412,6 @@ function EdgeLabelLayer() {
 }
 
 // src/input/group-drag.ts
-var DRAG_THRESHOLD = 4;
 var ALIGN_THRESHOLD = 6;
 function startGroupDrag(params) {
   const { store, el, snapGrid, alignmentGuides, onLaneChange, onFrame } = params;
@@ -4206,6 +4436,7 @@ function startGroupDrag(params) {
     onFrame?.();
   };
   const beginDrag = () => {
+    params.selectOnDrag?.();
     const movers = store.getMovers(store.getSelectedNodes()).filter((moverId) => store.locks.allows(moverId, "drag"));
     if (movers.length === 0) return false;
     started = true;
@@ -4334,6 +4565,37 @@ function clampToParent(store, parentId, position, size) {
   };
   return clampChildToParent(position, size, parentSize);
 }
+
+// src/anchor/select-gesture.ts
+function attachAnchorSelection(store, record) {
+  const element = record.element;
+  if (!record.selectable || !(element instanceof HTMLElement || element instanceof SVGElement)) {
+    return null;
+  }
+  const { nodeId, anchorId } = record;
+  const previous = element.style.pointerEvents;
+  element.style.pointerEvents = "auto";
+  const onPointerDown = (event) => {
+    if (!(event instanceof MouseEvent)) return;
+    if (event.button !== 0) return;
+    const originX = event.clientX;
+    const originY = event.clientY;
+    const onUp = (upEvent) => {
+      window.removeEventListener("pointerup", onUp);
+      if (!(upEvent instanceof MouseEvent)) return;
+      const moved = Math.hypot(upEvent.clientX - originX, upEvent.clientY - originY);
+      if (moved >= DRAG_THRESHOLD) return;
+      if (!store.locks.allows(anchorTargetKey(nodeId, anchorId), "select")) return;
+      store.setSelectedAnchors([{ nodeId, anchorId }]);
+    };
+    window.addEventListener("pointerup", onUp);
+  };
+  element.addEventListener("pointerdown", onPointerDown);
+  return () => {
+    element.removeEventListener("pointerdown", onPointerDown);
+    element.style.pointerEvents = previous;
+  };
+}
 var DEFAULT_ANCHOR_COLOR = "#6366f1";
 function NodeAnchors({ nodeId }) {
   const { store, anchorOptions } = useRivetContext();
@@ -4342,8 +4604,27 @@ function NodeAnchors({ nodeId }) {
     [store, nodeId]
   );
   const getAnchorsVersion = useCallback(() => store.getNodeAnchorsVersion(nodeId), [store, nodeId]);
-  useSyncExternalStore(subscribeAnchors, getAnchorsVersion, getAnchorsVersion);
+  const anchorsVersion = useSyncExternalStore(
+    subscribeAnchors,
+    getAnchorsVersion,
+    getAnchorsVersion
+  );
   useSyncExternalStore(store.subscribeEdges, store.getEdgesVersion, store.getEdgesVersion);
+  useSyncExternalStore(
+    store.subscribeAnchorSelection,
+    store.getSelectedAnchors,
+    store.getSelectedAnchors
+  );
+  useEffect(() => {
+    const cleanups = [];
+    for (const record of store.getNodeAnchors(nodeId)) {
+      const cleanup = attachAnchorSelection(store, record);
+      if (cleanup) cleanups.push(cleanup);
+    }
+    return () => {
+      for (const cleanup of cleanups) cleanup();
+    };
+  }, [store, nodeId, anchorsVersion]);
   const records = store.getNodeAnchors(nodeId);
   if (records.length === 0) return null;
   const dotsVisible = Boolean(store.nodes.get(nodeId)?.hovered);
@@ -4361,6 +4642,7 @@ function NodeAnchors({ nodeId }) {
     }
   }
   return /* @__PURE__ */ jsx(Fragment, { children: records.map((record) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    store.isAnchorSelected(nodeId, record.anchorId) && /* @__PURE__ */ jsx(AnchorSelectionOutline, { record }),
     /* @__PURE__ */ jsx(AnchorDots, { record, options: anchorOptions, visible: dotsVisible }),
     record.strays !== "none" && /* @__PURE__ */ jsx(
       AnchorStrayHandles,
@@ -4372,6 +4654,31 @@ function NodeAnchors({ nodeId }) {
     )
   ] }, record.anchorId)) });
 }
+function AnchorSelectionOutline({ record }) {
+  const geometry = record.geometry;
+  if (!geometry) return null;
+  const { dots } = geometry;
+  const left = dots.left.xPct;
+  const top = dots.top.yPct;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-rivet-anchor-selected": record.anchorId,
+      style: {
+        position: "absolute",
+        left: `${left}%`,
+        top: `${top}%`,
+        width: `${dots.right.xPct - left}%`,
+        height: `${dots.bottom.yPct - top}%`,
+        border: `1px solid ${record.color ?? DEFAULT_ANCHOR_COLOR}`,
+        borderRadius: 2,
+        // The box is a readout, never a target: presses belong to the element
+        // underneath it, which is what put the selection here.
+        pointerEvents: "none"
+      }
+    }
+  );
+}
 function AnchorDots(props) {
   const { record, options } = props;
   if (!record.geometry || !record.element?.isConnected) return null;
@@ -4590,7 +4897,11 @@ var NodeWrapper = memo(function NodeWrapper2({ id }) {
       if (!noSelect) store.selectNode(id, true);
       return;
     }
-    if (!noSelect && !store.isNodeSelected(id)) store.selectNode(id);
+    const onAnchor = target !== null && findSelectableAnchor(store.getNodeAnchors(id), target) !== null;
+    const selectNode = () => {
+      if (!noSelect && !store.isNodeSelected(id)) store.selectNode(id);
+    };
+    if (!onAnchor) selectNode();
     if (noDrag) return;
     startGroupDrag({
       store,
@@ -4603,7 +4914,8 @@ var NodeWrapper = memo(function NodeWrapper2({ id }) {
       clampToSwimlane,
       swimlaneMargin,
       swimlaneLabelWidth,
-      onLaneChange
+      onLaneChange,
+      selectOnDrag: onAnchor ? selectNode : void 0
     });
   };
   const node = store.nodes.get(id);
@@ -4760,6 +5072,176 @@ function NodeLayer({ containerRef, visibleIds }) {
     /* @__PURE__ */ jsx(NodesSelection, {})
   ] });
 }
+var overlayStyle2 = {
+  position: "absolute",
+  inset: 0,
+  // Cursor chrome belongs to the canvas: clipped to the pane rather than
+  // escaping into whatever app UI surrounds it.
+  overflow: "hidden",
+  pointerEvents: "none"
+};
+var cursorStyle = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  // The wrapper is a point, not a box: it sits at the pointer tip and whatever
+  // the consumer renders lays itself out from there.
+  width: 0,
+  height: 0,
+  pointerEvents: "none"
+};
+function PeerCursorLayer({
+  component: Cursor
+}) {
+  const { store, paneRef } = useRivetContext();
+  const peers = usePeerIdentities();
+  const refs = useRef(/* @__PURE__ */ new Map());
+  const zoomRef = useRef(null);
+  const zoomWritten = useRef(/* @__PURE__ */ new WeakSet());
+  const position = useCallback(() => {
+    const pane = paneRef.current;
+    if (!pane) return;
+    const viewport = store.getViewport();
+    const zoomChanged = zoomRef.current !== viewport.zoom;
+    zoomRef.current = viewport.zoom;
+    const { width, height } = pane.getBoundingClientRect();
+    const live = new Map(store.presence.getPeers().map((peer) => [peer.id, peer.cursor]));
+    for (const [id, el] of refs.current) {
+      if (!el) continue;
+      const cursor = live.get(id);
+      if (!cursor) {
+        el.style.display = "none";
+        continue;
+      }
+      el.style.display = "";
+      const point = worldToScreen(cursor, viewport);
+      const x = Math.min(Math.max(point.x, 0), width);
+      const y = Math.min(Math.max(point.y, 0), height);
+      const offscreen = x !== point.x || y !== point.y;
+      el.style.transform = `translate(${x}px, ${y}px)`;
+      el.style.visibility = offscreen ? "hidden" : "";
+      if (offscreen) el.setAttribute("data-rivet-offscreen", "");
+      else el.removeAttribute("data-rivet-offscreen");
+      if (zoomChanged || !zoomWritten.current.has(el)) {
+        el.style.setProperty("--rivet-zoom", String(viewport.zoom));
+        zoomWritten.current.add(el);
+      }
+    }
+  }, [store, paneRef]);
+  useEffect(() => {
+    return store.subscribeCursorFrame(position);
+  }, [store, position]);
+  useLayoutEffect(position);
+  return /* @__PURE__ */ jsx("div", { style: overlayStyle2, children: peers.map((peer) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: (el) => {
+        if (el) refs.current.set(peer.id, el);
+        else refs.current.delete(peer.id);
+      },
+      style: { ...cursorStyle, display: "none" },
+      "data-rivet-peer-cursor": peer.id,
+      children: /* @__PURE__ */ jsx(Cursor, { peer })
+    },
+    peer.id
+  )) });
+}
+var overlayStyle3 = {
+  position: "absolute",
+  inset: 0,
+  // Claim chrome belongs to the canvas, so a box that has been panned off the
+  // pane is clipped rather than left hanging over the app around it.
+  overflow: "hidden",
+  pointerEvents: "none"
+};
+var wrapperStyle2 = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  pointerEvents: "none"
+};
+function projectRect2(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 PeerOutlineLayer({
+  component: Outline
+}) {
+  const { store } = useRivetContext();
+  const [entries, setEntries] = useState([]);
+  const refs = useRef(/* @__PURE__ */ new Map());
+  const zoomRef = useRef(null);
+  const zoomWritten = useRef(/* @__PURE__ */ new WeakSet());
+  const rectOf = useCallback(
+    (target, viewport) => {
+      if (target.kind === "edge") {
+        const point = store.getPeerEdgeAnchors().get(target.id);
+        return point ? { x: point.x, y: point.y, width: 0, height: 0 } : null;
+      }
+      const nodeId = target.kind === "node" ? target.id : target.nodeId;
+      if (!store.nodes.has(nodeId)) return null;
+      const node = store.getNodeRect(nodeId);
+      if (target.kind === "node") return projectRect2(node, viewport);
+      const record = store.anchors.get(handleKey(nodeId, target.anchorId));
+      if (!record?.geometry) return null;
+      return projectRect2(anchorRect(node, record.geometry), viewport);
+    },
+    [store]
+  );
+  const position = useCallback(() => {
+    const viewport = store.getViewport();
+    const zoomChanged = zoomRef.current !== viewport.zoom;
+    zoomRef.current = viewport.zoom;
+    for (const entry of entries) {
+      const el = refs.current.get(entry.key);
+      if (!el) continue;
+      const rect = rectOf(entry.target, viewport);
+      if (!rect) {
+        el.style.display = "none";
+        continue;
+      }
+      el.style.display = "";
+      el.style.transform = `translate(${rect.x}px, ${rect.y}px)`;
+      el.style.width = `${rect.width}px`;
+      el.style.height = `${rect.height}px`;
+      if (zoomChanged || !zoomWritten.current.has(el)) {
+        el.style.setProperty("--rivet-zoom", String(viewport.zoom));
+        zoomWritten.current.add(el);
+      }
+    }
+  }, [store, entries, rectOf]);
+  useEffect(() => {
+    return store.subscribeFrame(() => {
+      const next = collectPeerOutlines(
+        store.presence.getPeers(),
+        store.presence.getPeerIdentities(),
+        store.locks.getLocks()
+      );
+      setEntries((prev) => peerOutlinesEqual(prev, next) ? prev : next);
+      position();
+    });
+  }, [store, position]);
+  useLayoutEffect(position);
+  return /* @__PURE__ */ jsx("div", { style: overlayStyle3, children: entries.map((entry) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: (el) => {
+        if (el) refs.current.set(entry.key, el);
+        else refs.current.delete(entry.key);
+      },
+      style: { ...wrapperStyle2, display: "none" },
+      "data-rivet-peer-outline": entry.key,
+      "data-rivet-outline-kind": entry.target.kind,
+      children: /* @__PURE__ */ jsx(Outline, { target: entry.target, claims: entry.claims, lock: entry.lock })
+    },
+    entry.key
+  )) });
+}
 var containerStyle2 = {
   position: "absolute",
   inset: 0,
@@ -5189,6 +5671,7 @@ 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);
@@ -5206,6 +5689,7 @@ function Rivet({
     store.setLockedNodes(lockedNodes);
   }, [store, lockedNodes]);
   useLocalPresence({ store, paneRef, onLocalPresence, throttleMs: cfg.presenceOptions.throttleMs });
+  const outlineMode = !cfg.presenceOptions.renderOutlines ? "none" : cfg.presenceOptions.outlineComponent ? "dom" : "canvas";
   const { visibleIds, controls, getViewportElements } = useRivetRuntime({
     store,
     paneRef,
@@ -5213,11 +5697,12 @@ function Rivet({
     backgroundCanvasRef,
     edgeCanvasRef,
     foregroundCanvasRef,
+    cursorCanvasRef,
+    outlineMode,
     swimlaneLanes: swimlanes.lanes,
     edgeTypes: cfg.edgeTypes,
     defaultEdgeOptions: cfg.defaultEdgeOptions,
     anchorOptions: cfg.anchorOptions,
-    presenceOptions: cfg.presenceOptions,
     edgeRenderer: renderer,
     edgesReconnectable,
     isValidConnection: cfg.isValidConnection,
@@ -5306,6 +5791,8 @@ function Rivet({
         /* @__PURE__ */ jsx("canvas", { ref: edgeCanvasRef, style: canvasStyle }),
         /* @__PURE__ */ jsx(NodeLayer, { containerRef: nodeContainerRef, visibleIds }),
         /* @__PURE__ */ jsx("canvas", { ref: foregroundCanvasRef, style: canvasStyle }),
+        outlineMode === "dom" && cfg.presenceOptions.outlineComponent && /* @__PURE__ */ jsx(PeerOutlineLayer, { component: cfg.presenceOptions.outlineComponent }),
+        cfg.presenceOptions.renderCursors && (cfg.presenceOptions.cursorComponent ? /* @__PURE__ */ jsx(PeerCursorLayer, { component: cfg.presenceOptions.cursorComponent }) : /* @__PURE__ */ jsx("canvas", { ref: cursorCanvasRef, style: canvasStyle })),
         /* @__PURE__ */ jsx(EdgeLabelLayer, {}),
         /* @__PURE__ */ jsx(SwimlaneOverlay, {}),
         children,
@@ -5365,6 +5852,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);
@@ -5399,8 +5890,12 @@ function buildInstance(store, controls, getViewportElements) {
     },
     unregisterAnchor: (nodeId, anchorId) => store.unregisterAnchor(nodeId, anchorId),
     remeasureAnchors: (nodeId) => store.remeasureAnchors(nodeId),
+    getAnchor: (nodeId, anchorId) => store.getNodeAnchors(nodeId).find((record) => record.anchorId === anchorId) ?? null,
+    setSelectedAnchors: (refs) => store.setSelectedAnchors(refs),
+    getSelectedAnchors: () => store.getSelectedAnchors(),
     setPeerCursor: (peerId, point) => store.presence.setPeerCursor(peerId, point),
     setPeerNodeTransform: (peerId, nodeId, rect) => store.presence.setPeerNodeTransform(peerId, nodeId, rect),
+    setPeerConnection: (peerId, connection) => store.presence.setPeerConnection(peerId, connection),
     removePeer: (peerId) => store.presence.removePeer(peerId),
     releaseNodeGesture: (id, ids) => store.endNodeGesture(id, ids),
     copy: (ids) => {
@@ -5442,6 +5937,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, resolveFacingSideAmong, 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, canvas2DEdgeRenderer, cloneElements, createRivetStore, edgeEndpointHandle, facingSide, getBezierPath, getSmoothStepPath, getStepPath, getStraightPath, handleKey, parseEdgeEndpoint, parseSideHandleId, rectsIntersect, resolveFacingSide, resolveFacingSideAmong, screenToWorld, useRivet, viewportToCss, visibleWorldRect, worldToScreen, zoomAt };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map