H-5655: Fix selection conflicts and multi-node drag, add integration tests

Remove dual selection management between onNodeClick/onEdgeClick and
ReactFlow's internal handleNodeClick. Selection now flows exclusively
through ReactFlow → onNodesChange → useApplyNodeChanges → setSelection,
fixing meta+click multi-select which was broken by conflicting handlers.

Fix multi-node drag position commit by reading change.position directly
from ReactFlow events instead of stale draggingStateByNodeId closure.

Add integration test file using real EditorProvider + controlled SDCPNContext
covering click selection, meta+click toggle, pane clear, single/multi-node
drag, and keyboard delete.

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

Author: kube

libs/@hashintel/petrinaut/src/state/editor-provider.tsx

@@ -78,7 +78,14 @@ export const EditorProvider: React.FC<EditorProviderProps> = ({ children }) => {
     setActiveBottomPanelTab: (tab) =>
       setState((prev) => ({ ...prev, activeBottomPanelTab: tab })),
     setSelection: (selection: SelectionMap) =>
-      setState((prev) => ({ ...prev, selection })),
+      setState((prev) => {
+        const visibilityChanged =
+          (prev.selection.size === 0) !== (selection.size === 0);
+        if (visibilityChanged) {
+          triggerPanelAnimation();
+        }
+        return { ...prev, selection };
+      }),
     selectItem: (item: SelectionItem) => {
       setState((prev) => {
         const wasEmpty = prev.selection.size === 0;

libs/@hashintel/petrinaut/src/views/SDCPN/hooks/use-apply-node-changes.ts

@@ -19,21 +19,16 @@ import {
 export function useApplyNodeChanges() {
   const { getItemType, updatePlacePosition, updateTransitionPosition } =
     use(SDCPNContext);
-  const {
-    draggingStateByNodeId,
-    updateDraggingStateByNodeId,
-    setSelection,
-    selection,
-  } = use(EditorContext);
+  const { updateDraggingStateByNodeId, setSelection, selection } =
+    use(EditorContext);
   const { compactNodes } = use(UserSettingsContext);
   const dims = compactNodes ? compactNodeDimensions : classicNodeDimensions;
 
   return (changes: (NodeChange | EdgeChange)[]) => {
-    const positionUpdates: Array<{
+    const positionCommits: Array<{
       id: string;
       position: { x: number; y: number };
     }> = [];
-
     let selectionChanged = false;
 
     // Check if current selection has any non-node items (types, etc.)
@@ -84,30 +79,14 @@ export function useApplyNodeChanges() {
               position: change.position ?? { x: 0, y: 0 },
             },
           }));
-        } else {
-          const lastPosition = draggingStateByNodeId[change.id]?.position;
-
-          if (!lastPosition) {
-            // we've had a dragging: false with no preceding dragging: true, so the node has not been dragged anywhere.
-            continue;
-          }
-
-          /**
-           * When dragging stops, we receive a change event with 'dragging: false' but no position.
-           * We use the last position we received to report the change to the consumer.
-           */
-          positionUpdates.push({
+        } else if (change.position) {
+          // Drag ended for this node. Use `change.position` directly rather than
+          // reading from `draggingStateByNodeId`, because the closure may be stale:
+          // ReactFlow syncs `onNodesChange` to its store via useEffect, so between
+          // rapid mouse events the callback may reference an older render's state.
+          positionCommits.push({
             id: change.id,
-            position: lastPosition,
-          });
-
-          // Clear the dragging state for this node now that the drag is complete
-          // and the position has been collected for commit to the SDCPN store.
-          // Keeping stale positions here would cause them to be re-applied
-          // if ReactFlow emits a spurious position change after an undo.
-          updateDraggingStateByNodeId((existing) => {
-            const { [change.id]: _, ...rest } = existing;
-            return rest;
+            position: change.position,
           });
         }
       }
@@ -118,22 +97,23 @@ export function useApplyNodeChanges() {
       setSelection(newSelection);
     }
 
-    // Apply position updates to SDCPN store
-    for (const { id, position } of positionUpdates) {
-      // Get item type to determine whether it's a place or transition
-      const itemType = getItemType(id);
-
-      if (itemType === "place") {
-        updatePlacePosition(id, {
-          x: position.x + dims.place.width / 2,
-          y: position.y + dims.place.height / 2,
-        });
-      } else if (itemType === "transition") {
-        updateTransitionPosition(id, {
-          x: position.x + dims.transition.width / 2,
-          y: position.y + dims.transition.height / 2,
-        });
+    // Commit final positions from drag-end changes to the SDCPN store.
+    if (positionCommits.length > 0) {
+      for (const { id, position } of positionCommits) {
+        const itemType = getItemType(id);
+        if (itemType === "place") {
+          updatePlacePosition(id, {
+            x: position.x + dims.place.width / 2,
+            y: position.y + dims.place.height / 2,
+          });
+        } else if (itemType === "transition") {
+          updateTransitionPosition(id, {
+            x: position.x + dims.transition.width / 2,
+            y: position.y + dims.transition.height / 2,
+          });
+        }
       }
+      updateDraggingStateByNodeId(() => ({}));
     }
   };
 }