fix(library): keep a native-handle connection in its previewed lane and shape

Two preview-versus-commit gaps for a new connection:

- The valid onConnect path minted a fresh edge id instead of reusing the preview's
  pendingConnectionId, so parallel native-handle connections could re-lane the
  instant the ghost was released (sibling lanes are settled by edge id).
- The pending preview edge dropped its source/target handles, but straight-hook
  edge types (use-case, syntax-tree, Petri-net) resolve their endpoints through
  getEdgePosition, which reads those handles — so the ghost could attach at a
  different point than the committed edge. Carry the same handles the commit uses.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: FelixTJDietrich

library/lib/components/ReconnectConnectionLine.tsx

@@ -23,6 +23,7 @@ import {
   adjustTargetCoordinates,
   getDefaultEdgeType,
   getEdgeMarkerStyles,
+  getSideHandleIdForPosition,
   preserveOrthogonalEdgePoints,
   routeOrthogonalPath,
 } from "@/utils/edgeUtils"
@@ -98,6 +99,7 @@ export const ReconnectConnectionLine = ({
   connectionLineStyle,
   connectionLineType,
   fromNode,
+  fromHandle,
   fromX,
   fromY,
   toX,
@@ -216,12 +218,23 @@ export const ReconnectConnectionLine = ({
   const pinnedTargetAnchor = newConnection.targetId
     ? newConnection.targetAnchor
     : null
+  // The handles the commit will assign (source: the one the drag started on; target:
+  // the side the drop resolved to). Straight-hook edge types — use-case, syntax-tree,
+  // Petri-net — resolve their endpoints through `getEdgePosition`, which reads these
+  // handles, so the preview must carry them or its line attaches at a different point
+  // than the committed edge.
+  const previewSourceHandle = fromHandle?.id ?? undefined
+  const previewTargetHandle = newConnection.targetId
+    ? getSideHandleIdForPosition(newConnection.toPosition)
+    : undefined
   const pendingEdge = useMemo<Edge | null>(() => {
     if (!isNewConnection || !fromNodeId || !newConnection.targetId) return null
     return {
       id: pendingEdgeId,
       source: fromNodeId,
       target: newConnection.targetId,
+      sourceHandle: previewSourceHandle,
+      targetHandle: previewTargetHandle,
       type: previewEdgeType,
       data: pinnedTargetAnchor
         ? { points: [], targetAnchor: pinnedTargetAnchor }
@@ -231,6 +244,8 @@ export const ReconnectConnectionLine = ({
     isNewConnection,
     fromNodeId,
     newConnection.targetId,
+    previewSourceHandle,
+    previewTargetHandle,
     pinnedTargetAnchor,
     previewEdgeType,
     pendingEdgeId,

library/lib/hooks/useConnect.ts

@@ -202,7 +202,11 @@ export const useConnect = () => {
 
       const newEdge: Edge = {
         ...connection,
-        id: generateUUID(),
+        // Reuse the id minted for the live preview (see onConnectStart) so a native
+        // handle-drop commits into the SAME fan lane it previewed in — sibling lanes
+        // are settled by edge id, so a fresh id here would re-lane parallel
+        // connections on release. Falls back to a new id if the gesture had none.
+        id: pendingConnectionId.current ?? generateUUID(),
         type: defaultEdgeType,
         selected: false,
       }