@kolosal-ai/rivet 0.4.0 → 0.6.0

package/dist/index.js

@@ -1,5 +1,5 @@
-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';
+import { findSelectableAnchor, parseAnchorHandleId, orderedSelectableAnchors, ANCHOR_SIDES, anchorDotHandleId, strayPoint, anchorHandleId, parseAnchorAutoHandleId, anchorAutoHandleId, normalizeAnchorConnection, computeAnchorGeometry, anchorGeometryEqual, DEFAULT_ANCHOR_OPTIONS, anchorRect, strayPlacementPct } from './chunk-76GHEXDP.js';
+import { snapToGrid, anchorTargetKey, boundingRect, clampChildToParent, createPresenceRegistry, createLockRegistry, nodeControlledEqual, buildChildIndex, collectDescendants, worldPosition, nodeDepth, descendantIds, hasAncestorIn, edgeTargetKey, DEFAULT_PRESENCE_OPTIONS, collectPeerOutlines, peerOutlinesEqual, usePeerIdentities, serializeGraph, presenceTargetKey, peerColor, isNodeTarget, presenceTargetEdgeId, parsePresenceTarget } 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';
@@ -888,7 +888,8 @@ function resolveEnd(edge, role, node, peer, frame) {
     rect,
     nodeRect(peer, worldPositions),
     anchorId ? [] : reachableSides(node.id, role, handles),
-    extras?.displayedSides?.get(key)
+    extras?.displayedSides?.get(key),
+    extras?.alignmentHysteresis
   );
   extras?.displayedSides?.set(key, side);
   return endAt(side);
@@ -938,6 +939,20 @@ function distanceToSegment(p, a, b) {
 }
 
 // src/store.ts
+function unionRect(rects) {
+  let left = Number.POSITIVE_INFINITY;
+  let top = Number.POSITIVE_INFINITY;
+  let right = Number.NEGATIVE_INFINITY;
+  let bottom = Number.NEGATIVE_INFINITY;
+  for (const rect of rects) {
+    left = Math.min(left, rect.left);
+    top = Math.min(top, rect.top);
+    right = Math.max(right, rect.right);
+    bottom = Math.max(bottom, rect.bottom);
+  }
+  if (!Number.isFinite(left)) return { left: 0, top: 0, width: 0, height: 0 };
+  return { left, top, width: right - left, height: bottom - top };
+}
 var RivetGraphStore = class {
   nodes = /* @__PURE__ */ new Map();
   edges = /* @__PURE__ */ new Map();
@@ -984,6 +999,7 @@ var RivetGraphStore = class {
   nodeDragging = false;
   nodeResizing = false;
   edgeAlignment = "manual";
+  alignmentHysteresis = DEFAULT_ALIGNMENT_HYSTERESIS;
   draggingNodeIds = /* @__PURE__ */ new Set();
   heldNodeIds = /* @__PURE__ */ new Set();
   heldListeners = /* @__PURE__ */ new Set();
@@ -1467,6 +1483,13 @@ var RivetGraphStore = class {
     this.edgeAlignment = mode;
   };
   getEdgeAlignment = () => this.edgeAlignment;
+  setAlignmentHysteresis = (ratio) => {
+    const next = Number.isFinite(ratio) ? Math.max(1, ratio) : DEFAULT_ALIGNMENT_HYSTERESIS;
+    if (next === this.alignmentHysteresis) return;
+    this.alignmentHysteresis = next;
+    this.requestRender();
+  };
+  getAlignmentHysteresis = () => this.alignmentHysteresis;
   getDisplayedSides = () => this.displayedSides;
   getDraggingNodeIds = () => this.draggingNodeIds;
   /**
@@ -1487,22 +1510,77 @@ var RivetGraphStore = class {
    */
   reachableFacingSide(nodeId, handleId, rect, peerRect, end) {
     const allowed = parseAnchorHandleId(handleId) || parseAnchorAutoHandleId(handleId) ? [] : reachableSides(nodeId, end, this.handles);
-    return resolveFacingSideAmong(rect, peerRect, allowed);
+    return resolveFacingSideAmong(rect, peerRect, allowed, void 0, this.alignmentHysteresis);
   }
-  realignEndHandle(nodeId, handleId, side, end) {
-    if (!handleId || parseAnchorAutoHandleId(handleId)) return handleId;
+  /**
+   * What an end does about its new side, decided without choosing a handle yet.
+   *
+   * The choice is held back because it isn't an independent one: several ends
+   * can want the same side of the same node, and which handle each takes is
+   * only right relative to the others (see {@link assignSideHandles}).
+   */
+  planEndHandle(nodeId, handleId, side, end) {
+    if (!handleId || parseAnchorAutoHandleId(handleId)) return { kind: "fixed", handleId };
     const anchor = parseAnchorHandleId(handleId);
-    if (anchor) return anchor.side === side ? handleId : anchorHandleId(anchor.anchorId, side);
+    if (anchor) {
+      return {
+        kind: "fixed",
+        handleId: anchor.side === side ? handleId : anchorHandleId(anchor.anchorId, side)
+      };
+    }
     const record = this.handles.get(handleKey(nodeId, handleId));
-    if (!record) return parseSideHandleId(handleId) ? side : handleId;
-    if (record.position === side) return handleId;
-    const wanted = end === "source" ? ["source", "either"] : ["target", "either"];
-    for (const candidate of this.handles.values()) {
-      if (candidate.nodeId === nodeId && candidate.position === side && wanted.includes(candidate.type)) {
-        return candidate.handleId;
+    if (!record) {
+      return { kind: "fixed", handleId: parseSideHandleId(handleId) ? side : handleId };
+    }
+    if (record.position === side) return { kind: "fixed", handleId };
+    return { kind: "assign", nodeId, side, role: end };
+  }
+  /**
+   * Hand out one node side's handles to the ends that want it, **in the order
+   * their peers sit along that side**.
+   *
+   * Occupancy alone spreads edges across a side but says nothing about which
+   * gets which, so the assignment fell out of registry order — and an edge from
+   * a node above taking the lower handle while one from below takes the upper
+   * is two lines crossing for no reason. Sorting both sides of the assignment
+   * by the same axis removes exactly those crossings: peers in order, handles
+   * in order, paired off.
+   *
+   * This is local, not global. It can't uncross edges that don't share a side,
+   * which needs a pass over pairs rather than over one node's occupancy.
+   */
+  assignSideHandles(requests, occupied) {
+    const assigned = /* @__PURE__ */ new Map();
+    const groups = /* @__PURE__ */ new Map();
+    for (const request of requests) {
+      const key = `${request.nodeId}\0${request.side}`;
+      const group = groups.get(key);
+      if (group) group.push(request);
+      else groups.set(key, [request]);
+    }
+    for (const group of groups.values()) {
+      const first = group[0];
+      if (!first) continue;
+      const { nodeId, side } = first;
+      const vertical = side === "left" || side === "right";
+      const candidates = [...this.handles.values()].filter((handle) => handle.nodeId === nodeId && handle.position === side).map((handle, index) => ({ handle, index })).sort((a, b) => {
+        const delta = vertical ? a.handle.offset.y - b.handle.offset.y : a.handle.offset.x - b.handle.offset.x;
+        return delta !== 0 ? delta : a.index - b.index;
+      }).map(({ handle }) => handle);
+      const ordered = [...group].sort(
+        (a, b) => a.along !== b.along ? a.along - b.along : a.seq - b.seq
+      );
+      for (const request of ordered) {
+        const wanted = request.role === "source" ? ["source", "either"] : ["target", "either"];
+        const usable = candidates.filter((handle) => wanted.includes(handle.type));
+        const free = usable.find((handle) => !occupied.has(handleKey(nodeId, handle.handleId)));
+        const picked = free ?? usable[0];
+        if (!picked) continue;
+        occupied.add(handleKey(nodeId, picked.handleId));
+        assigned.set(request.id, picked.handleId);
       }
     }
-    return handleId;
+    return assigned;
   }
   /**
    * Under `"on-move"` and `"live"`: re-side both ends of the moved node's
@@ -1522,6 +1600,15 @@ var RivetGraphStore = class {
     if (this.edgeAlignment === "manual") return;
     const live = this.edgeAlignment === "live";
     const changes = [];
+    const occupied = /* @__PURE__ */ new Set();
+    for (const edge of this.edges.values()) {
+      const moved = edge.source === nodeId || edge.target === nodeId;
+      if (moved) continue;
+      if (edge.sourceHandle) occupied.add(handleKey(edge.source, edge.sourceHandle));
+      if (edge.targetHandle) occupied.add(handleKey(edge.target, edge.targetHandle));
+    }
+    const planned = [];
+    const requests = [];
     for (const [edgeId, edge] of this.edges) {
       if (edge.source !== nodeId && edge.target !== nodeId) continue;
       if (edge.source === edge.target) continue;
@@ -1532,18 +1619,42 @@ var RivetGraphStore = class {
       const targetKey = displayedSideKey(edgeId, "target");
       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,
-        sourceSide,
-        "source"
-      );
-      const targetHandle = this.realignEndHandle(
-        edge.target,
-        edge.targetHandle,
-        targetSide,
-        "target"
-      );
+      const source = this.planEndHandle(edge.source, edge.sourceHandle, sourceSide, "source");
+      const target = this.planEndHandle(edge.target, edge.targetHandle, targetSide, "target");
+      if (source.kind === "fixed" && source.handleId) {
+        occupied.add(handleKey(edge.source, source.handleId));
+      }
+      if (target.kind === "fixed" && target.handleId) {
+        occupied.add(handleKey(edge.target, target.handleId));
+      }
+      const along = (side, peer) => side === "left" || side === "right" ? peer.y + peer.height / 2 : peer.x + peer.width / 2;
+      if (source.kind === "assign") {
+        requests.push({
+          id: `${edgeId}:source`,
+          nodeId: source.nodeId,
+          side: source.side,
+          role: source.role,
+          along: along(source.side, targetRect),
+          seq: requests.length
+        });
+      }
+      if (target.kind === "assign") {
+        requests.push({
+          id: `${edgeId}:target`,
+          nodeId: target.nodeId,
+          side: target.side,
+          role: target.role,
+          along: along(target.side, sourceRect),
+          seq: requests.length
+        });
+      }
+      planned.push({ edgeId, edge, source, target, sourceKey, targetKey });
+    }
+    const assigned = this.assignSideHandles(requests, occupied);
+    const resolve = (plan, id, fallback) => plan.kind === "fixed" ? plan.handleId : assigned.get(id) ?? fallback;
+    for (const { edgeId, edge, source, target, sourceKey, targetKey } of planned) {
+      const sourceHandle = resolve(source, `${edgeId}:source`, edge.sourceHandle);
+      const targetHandle = resolve(target, `${edgeId}:target`, edge.targetHandle);
       if (live) {
         const pinned = (h) => Boolean(h) && !parseAnchorAutoHandleId(h);
         if (pinned(edge.sourceHandle)) this.displayedSides.delete(sourceKey);
@@ -1873,16 +1984,20 @@ var RivetGraphStore = class {
    */
   measureAnchor(key) {
     const record = this.anchors.get(key);
-    if (!record?.element?.isConnected) return false;
-    const element = record.element;
+    if (!record) return false;
+    const live = record.elements.filter((element) => element.isConnected);
+    const firstElement = live[0];
+    const lastElement = live[live.length - 1];
+    if (!firstElement || !lastElement) return false;
     const nodeEl = this.nodeElements.get(record.nodeId);
     if (!nodeEl) return false;
     const root = nodeEl.getBoundingClientRect();
-    const box = element.getBoundingClientRect();
+    const box = unionRect(live.map((element) => element.getBoundingClientRect()));
     if (root.width <= 0 || root.height <= 0 || box.width <= 0 && box.height <= 0) return false;
-    const rects = element.getClientRects();
-    const first = rects.item(0) ?? box;
-    const last = rects.item(rects.length - 1) ?? first;
+    const firstRects = firstElement.getClientRects();
+    const lastRects = lastElement.getClientRects();
+    const first = firstRects.item(0) ?? firstElement.getBoundingClientRect();
+    const last = lastRects.item(lastRects.length - 1) ?? lastElement.getBoundingClientRect();
     const geometry = computeAnchorGeometry(root, first, last, box);
     if (anchorGeometryEqual(record.geometry, geometry)) return false;
     this.anchors.set(key, { ...record, geometry });
@@ -1891,6 +2006,7 @@ var RivetGraphStore = class {
   registerAnchor = (nodeId, anchorId, element, options) => {
     const key = handleKey(nodeId, anchorId);
     const prev = this.anchors.get(key);
+    const elements = Array.isArray(element) ? [...element] : [element];
     this.anchors.set(key, {
       nodeId,
       anchorId,
@@ -1898,7 +2014,8 @@ var RivetGraphStore = class {
       strays: options?.strays ?? prev?.strays,
       selectable: options?.selectable ?? prev?.selectable,
       data: options?.data ?? prev?.data,
-      element,
+      elements,
+      element: elements[0] ?? null,
       // Keep the last-known geometry until the next successful measurement, so
       // a re-bind (display remount, editor DOM swap) never blanks the chrome.
       geometry: prev?.geometry ?? null
@@ -1910,8 +2027,8 @@ var RivetGraphStore = class {
   detachAnchor = (nodeId, anchorId) => {
     const key = handleKey(nodeId, anchorId);
     const record = this.anchors.get(key);
-    if (!record || record.element === null) return;
-    this.anchors.set(key, { ...record, element: null });
+    if (!record || record.elements.length === 0) return;
+    this.anchors.set(key, { ...record, elements: [], element: null });
     this.bumpAnchors(nodeId);
   };
   unregisterAnchor = (nodeId, anchorId) => {
@@ -3201,6 +3318,9 @@ var HELD_LINE_WIDTH = 2;
 var SELECTED_LINE_WIDTH = 1.5;
 var SELECTED_DASH = [4, 4];
 var OUTLINE_RADIUS = 6;
+var ANCHOR_CLAIM_ALPHA = 0.28;
+var ANCHOR_CLAIM_LINE_WIDTH = 1;
+var ANCHOR_CLAIM_RADIUS = 3;
 var CURSOR_POINTS = [
   { x: 0, y: 0 },
   { x: 0, y: 16 },
@@ -3239,6 +3359,17 @@ function projectRect(rect, viewport) {
 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 drawAnchorClaim(ctx, rect, color) {
+  traceRect(ctx, rect, ANCHOR_CLAIM_RADIUS);
+  ctx.globalAlpha = ANCHOR_CLAIM_ALPHA;
+  ctx.fillStyle = color;
+  ctx.fill();
+  ctx.globalAlpha = 1;
+  ctx.strokeStyle = color;
+  ctx.lineWidth = ANCHOR_CLAIM_LINE_WIDTH;
+  ctx.setLineDash([]);
+  ctx.stroke();
+}
 function drawNodeOutline(ctx, rect, color, mode) {
   ctx.strokeStyle = color;
   ctx.lineWidth = mode === "selected" ? SELECTED_LINE_WIDTH : HELD_LINE_WIDTH;
@@ -3271,18 +3402,31 @@ function drawCursor(ctx, point, color, name) {
   ctx.fillStyle = "#ffffff";
   ctx.fillText(name, x + LABEL_PADDING_X, y + LABEL_HEIGHT / 2);
 }
-function drawPeerOutlines(ctx, peers, { viewport, size, getNodeRect, locks }) {
+function drawPeerOutlines(ctx, peers, { viewport, size, getNodeRect, getAnchorRect, 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();
+  const paintAnchor = (key, color) => {
+    const target = parsePresenceTarget(key);
+    if (target.kind !== "anchor") return;
+    const rect = getAnchorRect(target.nodeId, target.anchorId);
+    if (!rect) return;
+    const screen = projectRect(rect, viewport);
+    if (onScreen(screen, size)) drawAnchorClaim(ctx, screen, color);
+  };
   for (const peer of peers) {
     const held = /* @__PURE__ */ new Set([
       ...peer.holding.filter((key) => isNodeTarget(key)),
       ...peer.transforms.keys()
     ]);
     for (const id of peer.selection) {
-      if (!isNodeTarget(id) || held.has(id)) continue;
+      if (!isNodeTarget(id)) {
+        painted.add(id);
+        paintAnchor(id, peer.color);
+        continue;
+      }
+      if (held.has(id)) continue;
       const rect = getNodeRect(id);
       if (!rect) continue;
       const screen = projectRect(rect, viewport);
@@ -3299,7 +3443,11 @@ function drawPeerOutlines(ctx, peers, { viewport, size, getNodeRect, locks }) {
   if (locks.size > 0) {
     const declared = new Map(peers.map((peer) => [peer.id, peer.color]));
     for (const [id, holderId] of locks) {
-      if (!isNodeTarget(id) || painted.has(id)) continue;
+      if (painted.has(id)) continue;
+      if (!isNodeTarget(id)) {
+        paintAnchor(id, declared.get(holderId) ?? peerColor(holderId));
+        continue;
+      }
       const rect = getNodeRect(id);
       if (!rect) continue;
       const screen = projectRect(rect, viewport);
@@ -3560,6 +3708,12 @@ function useRivetRuntime(params) {
       if (store.presence.getTransformVersion() !== version) schedule();
       else scheduleCursors();
     };
+    const peerAnchorRect = (nodeId, anchorId) => {
+      if (!store.nodes.has(nodeId)) return null;
+      const record = store.anchors.get(handleKey(nodeId, anchorId));
+      if (!record?.geometry) return null;
+      return anchorRect(store.getNodeRect(nodeId), record.geometry);
+    };
     const anchorPlacement = (nodeId, anchorId, side) => {
       const record = store.anchors.get(handleKey(nodeId, anchorId));
       return record?.geometry ? strayPlacementPct(record.geometry, side, anchorOptions) : null;
@@ -3600,6 +3754,7 @@ function useRivetRuntime(params) {
         worldPositions,
         displayedSides: store.getDisplayedSides(),
         liveAlignNodes,
+        alignmentHysteresis: store.getAlignmentHysteresis(),
         anchorPlacement,
         peerEdges
       });
@@ -3633,6 +3788,7 @@ function useRivetRuntime(params) {
           viewport,
           size,
           getNodeRect: (id) => store.nodes.has(id) ? store.getNodeRect(id) : null,
+          getAnchorRect: peerAnchorRect,
           locks: store.locks.getLocks()
         });
       }
@@ -4567,38 +4723,49 @@ function clampToParent(store, parentId, position, size) {
 }
 
 // src/anchor/select-gesture.ts
-function attachAnchorSelection(store, record) {
-  const element = record.element;
-  if (!record.selectable || !(element instanceof HTMLElement || element instanceof SVGElement)) {
-    return null;
-  }
+function attachAnchorSelection(store, record, multiSelectionKeys = []) {
+  const elements = record.elements.filter(
+    (candidate) => candidate instanceof HTMLElement || candidate instanceof SVGElement
+  );
+  if (!record.selectable || elements.length === 0) return null;
   const { nodeId, anchorId } = record;
-  const previous = element.style.pointerEvents;
-  element.style.pointerEvents = "auto";
+  const previous = elements.map((element) => element.style.pointerEvents);
+  for (const element of elements) 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 additive = keyHeld(event, multiSelectionKeys);
     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 }]);
+      if (!additive) {
+        store.setSelectedAnchors([{ nodeId, anchorId }]);
+        return;
+      }
+      const selected = store.getSelectedAnchors();
+      const without = selected.filter((ref) => ref.nodeId !== nodeId || ref.anchorId !== anchorId);
+      store.setSelectedAnchors(
+        without.length === selected.length ? [...selected, { nodeId, anchorId }] : without
+      );
     };
     window.addEventListener("pointerup", onUp);
   };
-  element.addEventListener("pointerdown", onPointerDown);
+  for (const element of elements) element.addEventListener("pointerdown", onPointerDown);
   return () => {
-    element.removeEventListener("pointerdown", onPointerDown);
-    element.style.pointerEvents = previous;
+    elements.forEach((element, index) => {
+      element.removeEventListener("pointerdown", onPointerDown);
+      element.style.pointerEvents = previous[index] ?? "";
+    });
   };
 }
 var DEFAULT_ANCHOR_COLOR = "#6366f1";
 function NodeAnchors({ nodeId }) {
-  const { store, anchorOptions } = useRivetContext();
+  const { store, anchorOptions, multiSelectionKeys } = useRivetContext();
   const subscribeAnchors = useCallback(
     (listener) => store.subscribeNodeAnchors(nodeId, listener),
     [store, nodeId]
@@ -4618,13 +4785,13 @@ function NodeAnchors({ nodeId }) {
   useEffect(() => {
     const cleanups = [];
     for (const record of store.getNodeAnchors(nodeId)) {
-      const cleanup = attachAnchorSelection(store, record);
+      const cleanup = attachAnchorSelection(store, record, multiSelectionKeys);
       if (cleanup) cleanups.push(cleanup);
     }
     return () => {
       for (const cleanup of cleanups) cleanup();
     };
-  }, [store, nodeId, anchorsVersion]);
+  }, [store, nodeId, anchorsVersion, multiSelectionKeys]);
   const records = store.getNodeAnchors(nodeId);
   if (records.length === 0) return null;
   const dotsVisible = Boolean(store.nodes.get(nodeId)?.hovered);
@@ -4681,7 +4848,7 @@ function AnchorSelectionOutline({ record }) {
 }
 function AnchorDots(props) {
   const { record, options } = props;
-  if (!record.geometry || !record.element?.isConnected) return null;
+  if (!record.geometry || !record.elements.some((element) => element.isConnected)) return null;
   const dots = record.geometry.dots;
   return /* @__PURE__ */ jsx(Fragment, { children: ANCHOR_SIDES.map((side) => {
     const dot = dots[side];
@@ -4712,11 +4879,11 @@ function AnchorDots(props) {
 function AnchorStrayHandles(props) {
   const { record, options } = props;
   const geometry = record.geometry;
-  if (!geometry) return null;
   const sides = props.connectedSides && props.connectedSides.length > 0 ? props.connectedSides : [options.defaultSide];
+  useLiveStrayPlacement(record, sides, options);
+  if (!geometry) return null;
   return /* @__PURE__ */ jsx(Fragment, { children: sides.map((side) => {
-    const placed = strayPlacementPct(geometry, side, options);
-    const axis = side === "top" || side === "bottom" ? { left: `${placed}%` } : { top: `${placed}%` };
+    const point = strayPoint(geometry, side, options);
     return /* @__PURE__ */ jsx(
       Handle,
       {
@@ -4724,17 +4891,89 @@ function AnchorStrayHandles(props) {
         type: "either",
         position: side,
         style: {
+          left: `${point.xPct}%`,
+          top: `${point.yPct}%`,
+          right: "auto",
+          bottom: "auto",
+          transform: "translate(-50%, -50%)",
           width: options.strayHandleSize,
           height: options.strayHandleSize,
           background: record.color ?? DEFAULT_ANCHOR_COLOR,
-          border: "none",
-          ...axis
+          border: "none"
         }
       },
-      `${side}:${placed.toFixed(1)}`
+      `${side}:${point.xPct.toFixed(1)},${point.yPct.toFixed(1)}`
     );
   }) });
 }
+function useLiveStrayPlacement(record, sides, options) {
+  const { store } = useRivetContext();
+  const { wrapperRef } = useRivetNodeContext();
+  const sideKey = sides.join(",");
+  useEffect(() => {
+    const wrapper = wrapperRef.current;
+    const geometry = record.geometry;
+    if (!wrapper || !geometry) return;
+    let displaced = false;
+    const element = (side) => wrapper.querySelector(
+      `[data-rivet-handle-id="${anchorHandleId(record.anchorId, side)}"]`
+    );
+    const place = (side, at) => {
+      const el = element(side);
+      if (!el) return;
+      const point = strayPoint(geometry, at, options);
+      el.style.left = `${point.xPct}%`;
+      el.style.top = `${point.yPct}%`;
+    };
+    return store.subscribeFrame(() => {
+      if (!store.isNodeDragging()) {
+        if (displaced) {
+          displaced = false;
+          for (const side of sides) place(side, side);
+        }
+        return;
+      }
+      const autoSide = sides.length === 1 ? sides[0] ?? null : null;
+      const shown = displayedAnchorSides(store, record, autoSide);
+      for (const side of sides) {
+        const at = shown.get(side);
+        if (at && at !== side) {
+          displaced = true;
+          place(side, at);
+        } else if (displaced) {
+          place(side, side);
+        }
+      }
+    });
+  }, [store, wrapperRef, record, sideKey, options]);
+}
+function displayedAnchorSides(store, record, autoSide) {
+  const shown = /* @__PURE__ */ new Map();
+  const displayed = store.getDisplayedSides();
+  if (displayed.size === 0) return shown;
+  for (const [edgeId, edge] of store.edges) {
+    for (const end of ["source", "target"]) {
+      const nodeId = end === "source" ? edge.source : edge.target;
+      if (nodeId !== record.nodeId) continue;
+      const handleId = end === "source" ? edge.sourceHandle : edge.targetHandle;
+      const at = displayed.get(displayedSideKey(edgeId, end));
+      if (!at) continue;
+      const anchor = parseAnchorHandleId(handleId);
+      if (anchor?.anchorId === record.anchorId) {
+        if (!shown.has(anchor.side)) shown.set(anchor.side, at);
+        continue;
+      }
+      if (autoSide && parseAnchorAutoHandleId(handleId) === record.anchorId && !shown.has(autoSide)) {
+        shown.set(autoSide, at);
+      }
+    }
+  }
+  return shown;
+}
+var ANCHOR_STEP_KEYS = {
+  ArrowRight: 1,
+  ArrowLeft: -1
+};
 var wrapperStyle = {
   position: "absolute",
   top: 0,
@@ -4827,6 +5066,21 @@ var NodeWrapper = memo(function NodeWrapper2({ id }) {
     if (next instanceof Element && next.closest(SELECTOR.node)) return;
     if (store.getFocusedNode() === id) store.setFocusedNode(null);
   };
+  const stepAnchor = (step) => {
+    const anchors = orderedSelectableAnchors(store.getNodeAnchors(id)).filter(
+      (record2) => store.locks.allows(anchorTargetKey(id, record2.anchorId), "select")
+    );
+    if (anchors.length === 0) return;
+    const selected = store.getSelectedAnchors();
+    const current = anchors.findLastIndex(
+      (record2) => selected.some((ref2) => ref2.nodeId === id && ref2.anchorId === record2.anchorId)
+    );
+    const next = current < 0 ? step > 0 ? 0 : anchors.length - 1 : current + step;
+    const record = anchors[(next + anchors.length) % anchors.length];
+    if (!record) return;
+    store.setSelectedAnchors([{ nodeId: id, anchorId: record.anchorId }]);
+    announce(`${record.anchorId} selected in ${nodeName()}.`);
+  };
   const onKeyDown = (event) => {
     if (event.target !== event.currentTarget) return;
     const node2 = store.nodes.get(id);
@@ -4858,9 +5112,21 @@ var NodeWrapper = memo(function NodeWrapper2({ id }) {
         releaseGrab(true);
         return;
       }
+      if (store.getSelectedAnchors().some((ref2) => ref2.nodeId === id)) {
+        event.preventDefault();
+        store.setSelectedAnchors([]);
+        store.selectNode(id);
+        announce(`${nodeName()} selected.`);
+        return;
+      }
       store.selectNode(null);
       return;
     }
+    if (event.altKey && !grabOrigins.current && ANCHOR_STEP_KEYS[event.key]) {
+      event.preventDefault();
+      stepAnchor(ANCHOR_STEP_KEYS[event.key] ?? 1);
+      return;
+    }
     const dir = ARROW_DIRS[event.key];
     if (!dir || !grabOrigins.current) return;
     event.preventDefault();
@@ -4892,12 +5158,13 @@ var NodeWrapper = memo(function NodeWrapper2({ id }) {
     const target = event.target instanceof Element ? event.target : null;
     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 onAnchor = target !== null && findSelectableAnchor(store.getNodeAnchors(id), target) !== null;
     const additive = keyHeld(event, multiSelectionKeys);
     if (additive) {
+      if (onAnchor) return;
       if (!noSelect) store.selectNode(id, true);
       return;
     }
-    const onAnchor = target !== null && findSelectableAnchor(store.getNodeAnchors(id), target) !== null;
     const selectNode = () => {
       if (!noSelect && !store.isNodeSelected(id)) store.selectNode(id);
     };
@@ -5474,7 +5741,7 @@ var srOnlyStyle = {
   whiteSpace: "nowrap",
   border: 0
 };
-var NODE_KEYBOARD_INSTRUCTIONS = "Press Enter to select and grab the node. While grabbed, use the arrow keys to move it, Enter to drop, Escape to cancel. Press Delete to remove the selection.";
+var NODE_KEYBOARD_INSTRUCTIONS = "Press Enter to select and grab the node. While grabbed, use the arrow keys to move it, Enter to drop, Escape to cancel. Hold Alt with Left or Right to step through the node's anchors, Escape to leave them. Press Delete to remove the selection.";
 var DEFAULT_MULTI_SELECTION_KEY_CODE = ["Meta", "Control", "Shift"];
 var EMPTY_NODE_TYPES = {};
 var EMPTY_NODES = [];
@@ -5529,6 +5796,7 @@ function Rivet({
   onConnect,
   edgesReconnectable,
   edgeAlignment = "manual",
+  edgeAlignmentHysteresis = DEFAULT_ALIGNMENT_HYSTERESIS,
   onReconnect,
   onReconnectStart,
   onReconnectEnd,
@@ -5577,6 +5845,9 @@ function Rivet({
   useEffect(() => {
     store.setEdgeAlignment(edgeAlignment);
   }, [store, edgeAlignment]);
+  useEffect(() => {
+    store.setAlignmentHysteresis(edgeAlignmentHysteresis);
+  }, [store, edgeAlignmentHysteresis]);
   const onSelectionChangeRef = useRef(onSelectionChange);
   onSelectionChangeRef.current = onSelectionChange;
   useEffect(
@@ -5888,6 +6159,7 @@ function buildInstance(store, controls, getViewportElements) {
         unregister: () => store.unregisterAnchor(nodeId, anchorId)
       };
     },
+    detachAnchor: (nodeId, anchorId) => store.detachAnchor(nodeId, anchorId),
     unregisterAnchor: (nodeId, anchorId) => store.unregisterAnchor(nodeId, anchorId),
     remeasureAnchors: (nodeId) => store.remeasureAnchors(nodeId),
     getAnchor: (nodeId, anchorId) => store.getNodeAnchors(nodeId).find((record) => record.anchorId === anchorId) ?? null,