From 1eed484a0c71d53993abf60583791720e3c393e7 Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Tue, 17 Feb 2026 19:30:56 +0100
Subject: [PATCH 01/25] Temporary patch

---
 yarn.lock | 152 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 150 insertions(+), 2 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 9976cf4a713..5c957a01e56 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -19982,6 +19982,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vitest/expect@npm:4.0.17":
+  version: 4.0.17
+  resolution: "@vitest/expect@npm:4.0.17"
+  dependencies:
+    "@standard-schema/spec": "npm:^1.0.0"
+    "@types/chai": "npm:^5.2.2"
+    "@vitest/spy": "npm:4.0.17"
+    "@vitest/utils": "npm:4.0.17"
+    chai: "npm:^6.2.1"
+    tinyrainbow: "npm:^3.0.3"
+  checksum: 10c0/cdaa6827aa3a9473d51fd0944bcd698a94507929fa3c98b00bbdb74342319ec04279f01108d7d2dd7cbcd0d8062f65a3f21bb3615c0d5223e61adcc036c8b370
+  languageName: node
+  linkType: hard
+
 "@vitest/expect@npm:4.0.18":
   version: 4.0.18
   resolution: "@vitest/expect@npm:4.0.18"
@@ -20015,6 +20029,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vitest/mocker@npm:4.0.17":
+  version: 4.0.17
+  resolution: "@vitest/mocker@npm:4.0.17"
+  dependencies:
+    "@vitest/spy": "npm:4.0.17"
+    estree-walker: "npm:^3.0.3"
+    magic-string: "npm:^0.30.21"
+  peerDependencies:
+    msw: ^2.4.9
+    vite: ^6.0.0 || ^7.0.0-0
+  peerDependenciesMeta:
+    msw:
+      optional: true
+    vite:
+      optional: true
+  checksum: 10c0/54e657fa5b79764926b15aac993528bfe7083f6731209253617b1f27d328aa3297fcbf96b67e84d1a5632553231f795585f2396f563837cf117a574c87f5cef7
+  languageName: node
+  linkType: hard
+
 "@vitest/mocker@npm:4.0.18":
   version: 4.0.18
   resolution: "@vitest/mocker@npm:4.0.18"
@@ -20043,6 +20076,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vitest/pretty-format@npm:4.0.17":
+  version: 4.0.17
+  resolution: "@vitest/pretty-format@npm:4.0.17"
+  dependencies:
+    tinyrainbow: "npm:^3.0.3"
+  checksum: 10c0/10a2dd7e2daf7ee006107d380bbd28b66b09a7014d31087daab0dea7dee0d12868cfcf6b3372729268502fd9065162345b68b9b9c5d225f5c6c2fd2c664a2a86
+  languageName: node
+  linkType: hard
+
 "@vitest/pretty-format@npm:4.0.18":
   version: 4.0.18
   resolution: "@vitest/pretty-format@npm:4.0.18"
@@ -20063,6 +20105,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vitest/runner@npm:4.0.17":
+  version: 4.0.17
+  resolution: "@vitest/runner@npm:4.0.17"
+  dependencies:
+    "@vitest/utils": "npm:4.0.17"
+    pathe: "npm:^2.0.3"
+  checksum: 10c0/f4ccc236d1ed5ba2186d5f36ff0306d4ac7b711a40d7316ad6fd71c0f7229482b19969a8737e87670f3d4efb08f2138ff5b47a744fd7ae8db6c03cf991293a04
+  languageName: node
+  linkType: hard
+
 "@vitest/runner@npm:4.0.18":
   version: 4.0.18
   resolution: "@vitest/runner@npm:4.0.18"
@@ -20084,6 +20136,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vitest/snapshot@npm:4.0.17":
+  version: 4.0.17
+  resolution: "@vitest/snapshot@npm:4.0.17"
+  dependencies:
+    "@vitest/pretty-format": "npm:4.0.17"
+    magic-string: "npm:^0.30.21"
+    pathe: "npm:^2.0.3"
+  checksum: 10c0/31a047a097b13eff6c0f5393ea3e7203771ae9a22afe6465cd9023fd2ed516ddccd84523d48504a032c9d04a86a12e3f1235e08bb2ffc7d7a125e372c41ef53d
+  languageName: node
+  linkType: hard
+
 "@vitest/snapshot@npm:4.0.18":
   version: 4.0.18
   resolution: "@vitest/snapshot@npm:4.0.18"
@@ -20104,6 +20167,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vitest/spy@npm:4.0.17":
+  version: 4.0.17
+  resolution: "@vitest/spy@npm:4.0.17"
+  checksum: 10c0/c290731ba3392f11eaba8fc7fa08063a3a4d14af6baeec210b260ccd5a46613196fb4a8ff3ac8bf91a9606aef90eee9b6364bda130ce71abff368e35dfe2b265
+  languageName: node
+  linkType: hard
+
 "@vitest/spy@npm:4.0.18":
   version: 4.0.18
   resolution: "@vitest/spy@npm:4.0.18"
@@ -20122,6 +20192,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vitest/utils@npm:4.0.17":
+  version: 4.0.17
+  resolution: "@vitest/utils@npm:4.0.17"
+  dependencies:
+    "@vitest/pretty-format": "npm:4.0.17"
+    tinyrainbow: "npm:^3.0.3"
+  checksum: 10c0/1e2e4d7d7709ec022f603a1e12015523a2290f326c0bbe0c6bd5481ec396d4efc6bf8c738d601915d88e74267e9841df1e05157edced10f5048865204aeb86ff
+  languageName: node
+  linkType: hard
+
 "@vitest/utils@npm:4.0.18":
   version: 4.0.18
   resolution: "@vitest/utils@npm:4.0.18"
@@ -29469,7 +29549,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-tsconfig@npm:^4.10.0, get-tsconfig@npm:^4.10.1, get-tsconfig@npm:^4.13.0, get-tsconfig@npm:^4.13.6, get-tsconfig@npm:^4.7.5":
+"get-tsconfig@npm:^4.10.0, get-tsconfig@npm:^4.10.1, get-tsconfig@npm:^4.13.0, get-tsconfig@npm:^4.7.5":
+  version: 4.13.0
+  resolution: "get-tsconfig@npm:4.13.0"
+  dependencies:
+    resolve-pkg-maps: "npm:^1.0.0"
+  checksum: 10c0/2c49ef8d3907047a107f229fd610386fe3b7fe9e42dfd6b42e7406499493cdda8c62e83e57e8d7a98125610774b9f604d3a0ff308d7f9de5c7ac6d1b07cb6036
+  languageName: node
+  linkType: hard
+
+"get-tsconfig@npm:^4.13.6":
   version: 4.13.6
   resolution: "get-tsconfig@npm:4.13.6"
   dependencies:
@@ -45518,7 +45607,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vitest@npm:4.0.18, vitest@npm:^4.0.16":
+"vitest@npm:4.0.18":
   version: 4.0.18
   resolution: "vitest@npm:4.0.18"
   dependencies:
@@ -45577,6 +45666,65 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vitest@npm:^4.0.16":
+  version: 4.0.17
+  resolution: "vitest@npm:4.0.17"
+  dependencies:
+    "@vitest/expect": "npm:4.0.17"
+    "@vitest/mocker": "npm:4.0.17"
+    "@vitest/pretty-format": "npm:4.0.17"
+    "@vitest/runner": "npm:4.0.17"
+    "@vitest/snapshot": "npm:4.0.17"
+    "@vitest/spy": "npm:4.0.17"
+    "@vitest/utils": "npm:4.0.17"
+    es-module-lexer: "npm:^1.7.0"
+    expect-type: "npm:^1.2.2"
+    magic-string: "npm:^0.30.21"
+    obug: "npm:^2.1.1"
+    pathe: "npm:^2.0.3"
+    picomatch: "npm:^4.0.3"
+    std-env: "npm:^3.10.0"
+    tinybench: "npm:^2.9.0"
+    tinyexec: "npm:^1.0.2"
+    tinyglobby: "npm:^0.2.15"
+    tinyrainbow: "npm:^3.0.3"
+    vite: "npm:^6.0.0 || ^7.0.0"
+    why-is-node-running: "npm:^2.3.0"
+  peerDependencies:
+    "@edge-runtime/vm": "*"
+    "@opentelemetry/api": ^1.9.0
+    "@types/node": ^20.0.0 || ^22.0.0 || >=24.0.0
+    "@vitest/browser-playwright": 4.0.17
+    "@vitest/browser-preview": 4.0.17
+    "@vitest/browser-webdriverio": 4.0.17
+    "@vitest/ui": 4.0.17
+    happy-dom: "*"
+    jsdom: "*"
+  peerDependenciesMeta:
+    "@edge-runtime/vm":
+      optional: true
+    "@opentelemetry/api":
+      optional: true
+    "@types/node":
+      optional: true
+    "@vitest/browser-playwright":
+      optional: true
+    "@vitest/browser-preview":
+      optional: true
+    "@vitest/browser-webdriverio":
+      optional: true
+    "@vitest/ui":
+      optional: true
+    happy-dom:
+      optional: true
+    jsdom:
+      optional: true
+  bin:
+    vitest: vitest.mjs
+  checksum: 10c0/e1648bbfe2d01e23ceb6856863344035d2a1c139f39e8b15859e6ea8dc510ac3ba425df7c45486492d85ca516472aa892540dfd11ab6ad0613be98fd56d40716
+  languageName: node
+  linkType: hard
+
 "vscode-languageserver-types@npm:3.17.5":
   version: 3.17.5
   resolution: "vscode-languageserver-types@npm:3.17.5"

From ae3085ad19ca31ebc9fd1643e15df205d531423b Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Sat, 7 Mar 2026 14:24:19 +0100
Subject: [PATCH 02/25] H-5655: Refactor selection logic and migrate to
 @xyflow/react v12

- Extract selection state into dedicated module with SelectionMap type
- Add arc selection and multi-selection support in properties panel
- Migrate from reactflow v11 to @xyflow/react v12
- Fix node centering by offsetting positions in mapper instead of CSS transforms
- Add measured dimensions to nodes to fix arc invisibility after large moves
- Add browser tests for SDCPNView with vitest-browser-playwright
- Update node dimensions to match actual visual sizes for classic/compact modes

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 libs/@hashintel/petrinaut/eslint.config.js    |   1 +
 libs/@hashintel/petrinaut/package.json        |  10 +-
 libs/@hashintel/petrinaut/src/petrinaut.tsx   |   2 +-
 .../petrinaut/src/state/editor-context.ts     |  29 +-
 .../petrinaut/src/state/editor-provider.tsx   |  90 ++-
 .../petrinaut/src/state/selection.ts          |  39 ++
 .../src/state/use-selection-cleanup.ts        |  70 +++
 .../petrinaut/src/state/use-selection.ts      |  19 +
 .../src/views/Editor/editor-view.tsx          |   4 +
 .../BottomPanel/subviews/diagnostics.tsx      |  20 +-
 .../subviews/simulation-settings.tsx          |  15 +-
 .../subviews/differential-equations-list.tsx  |  21 +-
 .../LeftSideBar/subviews/nodes-list.tsx       |  35 +-
 .../LeftSideBar/subviews/parameters-list.tsx  |  19 +-
 .../LeftSideBar/subviews/types-list.tsx       |  19 +-
 .../PropertiesPanel/arc-properties/main.tsx   | 222 +++++++
 .../PropertiesPanel/multi-selection-panel.tsx | 119 ++++
 .../Editor/panels/PropertiesPanel/panel.tsx   |  49 +-
 .../place-properties/subviews/main.tsx        |  17 +-
 .../src/views/SDCPN/components/arc.tsx        |  12 +-
 .../SDCPN/components/classic-place-node.tsx   |  15 +-
 .../components/classic-transition-node.tsx    |  15 +-
 .../src/views/SDCPN/components/mini-map.tsx   |  10 +-
 .../src/views/SDCPN/components/node-card.tsx  |   3 +-
 .../src/views/SDCPN/components/place-node.tsx |  14 +-
 .../SDCPN/components/transition-node.tsx      |  14 +-
 .../SDCPN/components/viewport-controls.tsx    |   6 +-
 .../SDCPN/hooks/use-apply-node-changes.ts     |  60 +-
 .../SDCPN/hooks/use-sdcpn-to-react-flow.ts    |  44 +-
 .../src/views/SDCPN/reactflow-types.ts        |  11 +-
 .../views/SDCPN/sdcpn-view.browser.test.tsx   | 548 ++++++++++++++++++
 .../petrinaut/src/views/SDCPN/sdcpn-view.tsx  | 109 ++--
 .../src/views/SDCPN/styles/styling.ts         |  14 +-
 libs/@hashintel/petrinaut/vite.config.ts      |   2 +-
 .../petrinaut/vitest.browser.config.ts        |  28 +
 yarn.lock                                     |  70 ++-
 36 files changed, 1556 insertions(+), 219 deletions(-)
 create mode 100644 libs/@hashintel/petrinaut/src/state/selection.ts
 create mode 100644 libs/@hashintel/petrinaut/src/state/use-selection-cleanup.ts
 create mode 100644 libs/@hashintel/petrinaut/src/state/use-selection.ts
 create mode 100644 libs/@hashintel/petrinaut/src/views/Editor/panels/PropertiesPanel/arc-properties/main.tsx
 create mode 100644 libs/@hashintel/petrinaut/src/views/Editor/panels/PropertiesPanel/multi-selection-panel.tsx
 create mode 100644 libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.browser.test.tsx
 create mode 100644 libs/@hashintel/petrinaut/vitest.browser.config.ts

diff --git a/libs/@hashintel/petrinaut/eslint.config.js b/libs/@hashintel/petrinaut/eslint.config.js
index d9e2693ad7c..1f108b8f9ef 100644
--- a/libs/@hashintel/petrinaut/eslint.config.js
+++ b/libs/@hashintel/petrinaut/eslint.config.js
@@ -11,6 +11,7 @@ export default [
             "postcss.config.cjs",
             "vite.config.ts",
             "vite.site.config.ts",
+            "vitest.browser.config.ts",
             ".storybook/main.ts",
             ".storybook/manager.tsx",
             ".storybook/preview.tsx",
diff --git a/libs/@hashintel/petrinaut/package.json b/libs/@hashintel/petrinaut/package.json
index bf3e8cb97e5..6a2b4f0ab2d 100644
--- a/libs/@hashintel/petrinaut/package.json
+++ b/libs/@hashintel/petrinaut/package.json
@@ -34,7 +34,8 @@
     "lint:eslint": "eslint --report-unused-disable-directives .",
     "lint:tsc": "tsgo --noEmit",
     "prepublishOnly": "turbo run build",
-    "test:unit": "vitest"
+    "test:unit": "vitest",
+    "test:browser": "vitest --config vitest.browser.config.ts"
   },
   "dependencies": {
     "@ark-ui/react": "5.26.2",
@@ -50,13 +51,13 @@
     "@hashintel/refractive": "workspace:^",
     "@mantine/hooks": "8.3.5",
     "@monaco-editor/react": "4.8.0-rc.3",
+    "@xyflow/react": "12.10.1",
     "d3-array": "3.2.4",
     "d3-scale": "4.0.2",
     "elkjs": "0.11.0",
     "monaco-editor": "0.55.1",
     "react-icons": "5.5.0",
     "react-resizable-panels": "4.6.5",
-    "reactflow": "11.11.4",
     "typescript": "5.9.3",
     "uuid": "13.0.0",
     "vscode-languageserver-types": "3.17.5",
@@ -77,6 +78,7 @@
     "@types/react-dom": "19.2.3",
     "@typescript/native-preview": "7.0.0-dev.20260309.1",
     "@vitejs/plugin-react": "5.1.4",
+    "@vitest/browser-playwright": "^4.0.16",
     "babel-plugin-react-compiler": "1.0.0",
     "eslint": "9.39.3",
     "immer": "10.1.3",
@@ -87,7 +89,9 @@
     "rolldown-plugin-dts": "0.22.4",
     "storybook": "10.2.13",
     "vite": "8.0.0-beta.18",
-    "vitest": "4.0.18"
+    "vite-plugin-dts": "4.5.4",
+    "vitest": "4.0.18",
+    "vitest-browser-react": "^2.0.2"
   },
   "peerDependencies": {
     "@hashintel/ds-components": "workspace:^",
diff --git a/libs/@hashintel/petrinaut/src/petrinaut.tsx b/libs/@hashintel/petrinaut/src/petrinaut.tsx
index 3fba8cbf5e5..d3ea8d69b4b 100644
--- a/libs/@hashintel/petrinaut/src/petrinaut.tsx
+++ b/libs/@hashintel/petrinaut/src/petrinaut.tsx
@@ -1,4 +1,4 @@
-import "reactflow/dist/style.css";
+import "@xyflow/react/dist/style.css";
 import "./index.css";
 
 import { type FunctionComponent } from "react";
diff --git a/libs/@hashintel/petrinaut/src/state/editor-context.ts b/libs/@hashintel/petrinaut/src/state/editor-context.ts
index 99df4199e54..95ee28f53e5 100644
--- a/libs/@hashintel/petrinaut/src/state/editor-context.ts
+++ b/libs/@hashintel/petrinaut/src/state/editor-context.ts
@@ -5,6 +5,7 @@ import {
   DEFAULT_LEFT_SIDEBAR_WIDTH,
   DEFAULT_PROPERTIES_PANEL_WIDTH,
 } from "../constants/ui";
+import type { SelectionItem, SelectionMap } from "./selection";
 
 export type DraggingStateByNodeId = Record<
   string,
@@ -34,8 +35,7 @@ export type EditorState = {
   isBottomPanelOpen: boolean;
   bottomPanelHeight: number;
   activeBottomPanelTab: BottomPanelTab;
-  selectedResourceId: string | null;
-  selectedItemIds: Set<string>;
+  selection: SelectionMap;
   draggingStateByNodeId: DraggingStateByNodeId;
   timelineChartType: TimelineChartType;
   isPanelAnimating: boolean;
@@ -55,11 +55,14 @@ export type EditorActions = {
   toggleBottomPanel: () => void;
   setBottomPanelHeight: (height: number) => void;
   setActiveBottomPanelTab: (tab: BottomPanelTab) => void;
-  setSelectedResourceId: (id: string | null) => void;
-  setSelectedItemIds: (ids: Set<string>) => void;
-  addSelectedItemId: (id: string) => void;
-  removeSelectedItemId: (id: string) => void;
+  setSelection: (selection: SelectionMap) => void;
+  selectItem: (item: SelectionItem) => void;
+  toggleItem: (item: SelectionItem) => void;
+  addToSelection: (items: SelectionItem[]) => void;
+  removeFromSelection: (ids: string[]) => void;
   clearSelection: () => void;
+  focusNode: (nodeId: string) => void;
+  registerFocusNode: (fn: (nodeId: string) => void) => void;
   setDraggingStateByNodeId: (state: DraggingStateByNodeId) => void;
   updateDraggingStateByNodeId: (
     updater: (state: DraggingStateByNodeId) => DraggingStateByNodeId,
@@ -83,8 +86,7 @@ export const initialEditorState: EditorState = {
   isBottomPanelOpen: false,
   bottomPanelHeight: DEFAULT_BOTTOM_PANEL_HEIGHT,
   activeBottomPanelTab: "diagnostics",
-  selectedResourceId: null,
-  selectedItemIds: new Set(),
+  selection: new Map(),
   draggingStateByNodeId: {},
   timelineChartType: "run",
   isPanelAnimating: false,
@@ -102,11 +104,14 @@ const DEFAULT_CONTEXT_VALUE: EditorContextValue = {
   toggleBottomPanel: () => {},
   setBottomPanelHeight: () => {},
   setActiveBottomPanelTab: () => {},
-  setSelectedResourceId: () => {},
-  setSelectedItemIds: () => {},
-  addSelectedItemId: () => {},
-  removeSelectedItemId: () => {},
+  setSelection: () => {},
+  selectItem: () => {},
+  toggleItem: () => {},
+  addToSelection: () => {},
+  removeFromSelection: () => {},
   clearSelection: () => {},
+  focusNode: () => {},
+  registerFocusNode: () => {},
   setDraggingStateByNodeId: () => {},
   updateDraggingStateByNodeId: () => {},
   resetDraggingState: () => {},
diff --git a/libs/@hashintel/petrinaut/src/state/editor-provider.tsx b/libs/@hashintel/petrinaut/src/state/editor-provider.tsx
index 910a0d7b268..49ac9ad2867 100644
--- a/libs/@hashintel/petrinaut/src/state/editor-provider.tsx
+++ b/libs/@hashintel/petrinaut/src/state/editor-provider.tsx
@@ -8,6 +8,7 @@ import {
   type EditorState,
   initialEditorState,
 } from "./editor-context";
+import type { SelectionItem, SelectionMap } from "./selection";
 import { useSyncEditorToSettings } from "./use-sync-editor-to-settings";
 import { UserSettingsContext } from "./user-settings-context";
 
@@ -32,6 +33,8 @@ export const EditorProvider: React.FC<EditorProviderProps> = ({ children }) => {
     undefined,
   );
 
+  const focusNodeRef = useRef<(nodeId: string) => void>(() => {});
+
   const triggerPanelAnimation = () => {
     if (!userSettings.showAnimations) {
       return;
@@ -74,26 +77,77 @@ export const EditorProvider: React.FC<EditorProviderProps> = ({ children }) => {
       setState((prev) => ({ ...prev, bottomPanelHeight: height })),
     setActiveBottomPanelTab: (tab) =>
       setState((prev) => ({ ...prev, activeBottomPanelTab: tab })),
-    setSelectedResourceId: (id) => {
-      triggerPanelAnimation();
-      setState((prev) => ({ ...prev, selectedResourceId: id }));
+    setSelection: (selection: SelectionMap) =>
+      setState((prev) => ({ ...prev, selection })),
+    selectItem: (item: SelectionItem) => {
+      setState((prev) => {
+        const wasEmpty = prev.selection.size === 0;
+        const newSelection: SelectionMap = new Map([[item.id, item]]);
+        const willBeEmpty = false;
+        if (wasEmpty !== willBeEmpty) {
+          triggerPanelAnimation();
+        }
+        return { ...prev, selection: newSelection };
+      });
     },
-    setSelectedItemIds: (ids) =>
-      setState((prev) => ({ ...prev, selectedItemIds: ids })),
-    addSelectedItemId: (id) =>
+    toggleItem: (item: SelectionItem) => {
       setState((prev) => {
-        const newSet = new Set(prev.selectedItemIds);
-        newSet.add(id);
-        return { ...prev, selectedItemIds: newSet };
-      }),
-    removeSelectedItemId: (id) =>
+        const newSelection = new Map(prev.selection);
+        if (newSelection.has(item.id)) {
+          newSelection.delete(item.id);
+        } else {
+          newSelection.set(item.id, item);
+        }
+        const visibilityChanged =
+          (prev.selection.size === 0) !== (newSelection.size === 0);
+        if (visibilityChanged) {
+          triggerPanelAnimation();
+        }
+        return { ...prev, selection: newSelection };
+      });
+    },
+    addToSelection: (items: SelectionItem[]) => {
+      setState((prev) => {
+        const newSelection = new Map(prev.selection);
+        for (const item of items) {
+          newSelection.set(item.id, item);
+        }
+        const visibilityChanged =
+          (prev.selection.size === 0) !== (newSelection.size === 0);
+        if (visibilityChanged) {
+          triggerPanelAnimation();
+        }
+        return { ...prev, selection: newSelection };
+      });
+    },
+    removeFromSelection: (ids: string[]) => {
       setState((prev) => {
-        const newSet = new Set(prev.selectedItemIds);
-        newSet.delete(id);
-        return { ...prev, selectedItemIds: newSet };
-      }),
-    clearSelection: () =>
-      setState((prev) => ({ ...prev, selectedItemIds: new Set() })),
+        const newSelection = new Map(prev.selection);
+        for (const id of ids) {
+          newSelection.delete(id);
+        }
+        const visibilityChanged =
+          (prev.selection.size === 0) !== (newSelection.size === 0);
+        if (visibilityChanged) {
+          triggerPanelAnimation();
+        }
+        return { ...prev, selection: newSelection };
+      });
+    },
+    clearSelection: () => {
+      setState((prev) => {
+        if (prev.selection.size > 0) {
+          triggerPanelAnimation();
+        }
+        return { ...prev, selection: new Map() };
+      });
+    },
+    focusNode: (nodeId: string) => {
+      focusNodeRef.current(nodeId);
+    },
+    registerFocusNode: (fn: (nodeId: string) => void) => {
+      focusNodeRef.current = fn;
+    },
     setDraggingStateByNodeId: (draggingState: DraggingStateByNodeId) =>
       setState((prev) => ({ ...prev, draggingStateByNodeId: draggingState })),
     updateDraggingStateByNodeId: (updater) =>
@@ -109,7 +163,7 @@ export const EditorProvider: React.FC<EditorProviderProps> = ({ children }) => {
         ...prev,
         isLeftSidebarOpen: false,
         isBottomPanelOpen: false,
-        selectedResourceId: null,
+        selection: new Map(),
       }));
     },
     setTimelineChartType: (chartType) =>
diff --git a/libs/@hashintel/petrinaut/src/state/selection.ts b/libs/@hashintel/petrinaut/src/state/selection.ts
new file mode 100644
index 00000000000..fe78cf38183
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/state/selection.ts
@@ -0,0 +1,39 @@
+import { ARC_ID_PREFIX, ARC_ID_SEPARATOR } from "./sdcpn-context";
+
+export type SelectionItemType =
+  | "place"
+  | "transition"
+  | "arc"
+  | "type"
+  | "differentialEquation"
+  | "parameter";
+
+export type SelectionItem =
+  | { type: "place"; id: string }
+  | { type: "transition"; id: string }
+  | { type: "arc"; id: string }
+  | { type: "type"; id: string }
+  | { type: "differentialEquation"; id: string }
+  | { type: "parameter"; id: string };
+
+/** Map from item ID -> typed SelectionItem. O(1) lookup for ReactFlow bridge. */
+export type SelectionMap = Map<string, SelectionItem>;
+
+export type PanelTarget =
+  | { kind: "none" }
+  | { kind: "single"; item: SelectionItem }
+  | { kind: "multi"; items: SelectionItem[] };
+
+export function parseArcId(
+  arcId: string,
+): { sourceId: string; targetId: string } | null {
+  if (!arcId.startsWith(ARC_ID_PREFIX)) {
+    return null;
+  }
+  const rest = arcId.slice(ARC_ID_PREFIX.length);
+  const [sourceId, targetId] = rest.split(ARC_ID_SEPARATOR);
+  if (!sourceId || !targetId) {
+    return null;
+  }
+  return { sourceId, targetId };
+}
diff --git a/libs/@hashintel/petrinaut/src/state/use-selection-cleanup.ts b/libs/@hashintel/petrinaut/src/state/use-selection-cleanup.ts
new file mode 100644
index 00000000000..bc61fc0962c
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/state/use-selection-cleanup.ts
@@ -0,0 +1,70 @@
+import { use, useEffect } from "react";
+
+import { EditorContext } from "./editor-context";
+import { generateArcId, SDCPNContext } from "./sdcpn-context";
+import type { SelectionMap } from "./selection";
+
+/**
+ * Reactively removes stale IDs from the selection when items are deleted from the SDCPN.
+ */
+export function useSelectionCleanup() {
+  const { petriNetDefinition } = use(SDCPNContext);
+  const { selection, setSelection } = use(EditorContext);
+
+  useEffect(() => {
+    if (selection.size === 0) {
+      return;
+    }
+
+    // Build the set of all valid IDs
+    const validIds = new Set<string>();
+
+    for (const place of petriNetDefinition.places) {
+      validIds.add(place.id);
+    }
+    for (const transition of petriNetDefinition.transitions) {
+      validIds.add(transition.id);
+      for (const inputArc of transition.inputArcs) {
+        validIds.add(
+          generateArcId({ inputId: inputArc.placeId, outputId: transition.id }),
+        );
+      }
+      for (const outputArc of transition.outputArcs) {
+        validIds.add(
+          generateArcId({
+            inputId: transition.id,
+            outputId: outputArc.placeId,
+          }),
+        );
+      }
+    }
+    for (const type of petriNetDefinition.types) {
+      validIds.add(type.id);
+    }
+    for (const eq of petriNetDefinition.differentialEquations) {
+      validIds.add(eq.id);
+    }
+    for (const param of petriNetDefinition.parameters) {
+      validIds.add(param.id);
+    }
+
+    // Check if any selected ID is stale
+    let hasStale = false;
+    for (const id of selection.keys()) {
+      if (!validIds.has(id)) {
+        hasStale = true;
+        break;
+      }
+    }
+
+    if (hasStale) {
+      const cleaned: SelectionMap = new Map();
+      for (const [id, item] of selection) {
+        if (validIds.has(id)) {
+          cleaned.set(id, item);
+        }
+      }
+      setSelection(cleaned);
+    }
+  }, [petriNetDefinition, selection, setSelection]);
+}
diff --git a/libs/@hashintel/petrinaut/src/state/use-selection.ts b/libs/@hashintel/petrinaut/src/state/use-selection.ts
new file mode 100644
index 00000000000..99a040b8c7a
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/state/use-selection.ts
@@ -0,0 +1,19 @@
+import { use, useMemo } from "react";
+
+import { EditorContext } from "./editor-context";
+import type { PanelTarget } from "./selection";
+
+export function usePanelTarget(): PanelTarget {
+  const { selection } = use(EditorContext);
+
+  return useMemo(() => {
+    const items = Array.from(selection.values());
+    if (items.length === 0) {
+      return { kind: "none" };
+    }
+    if (items.length === 1) {
+      return { kind: "single", item: items[0]! };
+    }
+    return { kind: "multi", items };
+  }, [selection]);
+}
diff --git a/libs/@hashintel/petrinaut/src/views/Editor/editor-view.tsx b/libs/@hashintel/petrinaut/src/views/Editor/editor-view.tsx
index c6c635b6794..0fe4dc934c0 100644
--- a/libs/@hashintel/petrinaut/src/views/Editor/editor-view.tsx
+++ b/libs/@hashintel/petrinaut/src/views/Editor/editor-view.tsx
@@ -13,6 +13,7 @@ import { convertOldFormatToSDCPN } from "../../old-formats/convert-old-format";
 import { EditorContext } from "../../state/editor-context";
 import { PortalContainerContext } from "../../state/portal-container-context";
 import { SDCPNContext } from "../../state/sdcpn-context";
+import { useSelectionCleanup } from "../../state/use-selection-cleanup";
 import { SDCPNView } from "../SDCPN/sdcpn-view";
 import { BottomBar } from "./components/BottomBar/bottom-bar";
 import { TopBar } from "./components/TopBar/top-bar";
@@ -80,6 +81,9 @@ export const EditorView = ({
     clearSelection,
   } = use(EditorContext);
 
+  // Clean up stale selections when items are deleted
+  useSelectionCleanup();
+
   function handleNew() {
     createNewNet({
       title: "Untitled",
diff --git a/libs/@hashintel/petrinaut/src/views/Editor/panels/BottomPanel/subviews/diagnostics.tsx b/libs/@hashintel/petrinaut/src/views/Editor/panels/BottomPanel/subviews/diagnostics.tsx
index 6a1a6864742..ad8877576d6 100644
--- a/libs/@hashintel/petrinaut/src/views/Editor/panels/BottomPanel/subviews/diagnostics.tsx
+++ b/libs/@hashintel/petrinaut/src/views/Editor/panels/BottomPanel/subviews/diagnostics.tsx
@@ -8,6 +8,7 @@ import { LanguageClientContext } from "../../../../../lsp/context";
 import { parseDocumentUri } from "../../../../../monaco/editor-paths";
 import { EditorContext } from "../../../../../state/editor-context";
 import { SDCPNContext } from "../../../../../state/sdcpn-context";
+import type { SelectionItemType } from "../../../../../state/selection";
 
 const emptyMessageStyle = css({
   color: "neutral.s100",
@@ -116,7 +117,7 @@ const DiagnosticsContent: React.FC = () => {
     LanguageClientContext,
   );
   const { petriNetDefinition } = use(SDCPNContext);
-  const { setSelectedResourceId } = use(EditorContext);
+  const { selectItem } = use(EditorContext);
   // Track collapsed entities (all expanded by default)
   const [collapsedEntities, setCollapsedEntities] = useState<Set<string>>(
     new Set(),
@@ -124,10 +125,14 @@ const DiagnosticsContent: React.FC = () => {
 
   // Handler to select an entity when clicking on a diagnostic
   const handleSelectEntity = useCallback(
-    (entityId: string) => {
-      setSelectedResourceId(entityId);
+    (entityId: string, entityType: EntityType) => {
+      const selectionType: SelectionItemType =
+        entityType === "differential-equation"
+          ? "differentialEquation"
+          : "transition";
+      selectItem({ type: selectionType, id: entityId });
     },
-    [setSelectedResourceId],
+    [selectItem],
   );
 
   // Group diagnostics by entity (transition or differential equation)
@@ -255,7 +260,12 @@ const DiagnosticsContent: React.FC = () => {
                         >
                           <button
                             type="button"
-                            onClick={() => handleSelectEntity(group.entityId)}
+                            onClick={() =>
+                              handleSelectEntity(
+                                group.entityId,
+                                group.entityType,
+                              )
+                            }
                             className={diagnosticButtonStyle}
                           >
                             <span className={bulletStyle}>•</span>
diff --git a/libs/@hashintel/petrinaut/src/views/Editor/panels/BottomPanel/subviews/simulation-settings.tsx b/libs/@hashintel/petrinaut/src/views/Editor/panels/BottomPanel/subviews/simulation-settings.tsx
index 6bbb59223d8..c3a69e5d369 100644
--- a/libs/@hashintel/petrinaut/src/views/Editor/panels/BottomPanel/subviews/simulation-settings.tsx
+++ b/libs/@hashintel/petrinaut/src/views/Editor/panels/BottomPanel/subviews/simulation-settings.tsx
@@ -145,7 +145,11 @@ const editButtonIconStyle = css({
  * Split into two sections: Computation and Parameters.
  */
 const SimulationSettingsContent: React.FC = () => {
-  const { setGlobalMode, setSelectedResourceId } = use(EditorContext);
+  const { setGlobalMode, selectItem } = use(EditorContext);
+  const {
+    getItemType,
+    petriNetDefinition: { parameters },
+  } = use(SDCPNContext);
   const {
     state: simulationState,
     error: simulationError,
@@ -156,10 +160,6 @@ const SimulationSettingsContent: React.FC = () => {
     setParameterValue,
   } = use(SimulationContext);
 
-  const {
-    petriNetDefinition: { parameters },
-  } = use(SDCPNContext);
-
   // Local state for ODE solver (not used in simulation yet, but UI is ready)
   const [odeSolver, setOdeSolver] = useState("euler");
 
@@ -262,7 +262,10 @@ const SimulationSettingsContent: React.FC = () => {
               type="button"
               onClick={() => {
                 setGlobalMode("edit");
-                setSelectedResourceId(errorItemId);
+                const itemType = getItemType(errorItemId);
+                if (itemType) {
+                  selectItem({ type: itemType, id: errorItemId });
+                }
               }}
               className={editButtonStyle}
             >
diff --git a/libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/differential-equations-list.tsx b/libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/differential-equations-list.tsx
index b323758f1c3..3ebf3fa512f 100644
--- a/libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/differential-equations-list.tsx
+++ b/libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/differential-equations-list.tsx
@@ -9,6 +9,7 @@ import { UI_MESSAGES } from "../../../../../constants/ui-messages";
 import { DEFAULT_DIFFERENTIAL_EQUATION_CODE } from "../../../../../core/default-codes";
 import { EditorContext } from "../../../../../state/editor-context";
 import { SDCPNContext } from "../../../../../state/sdcpn-context";
+import type { SelectionItem } from "../../../../../state/selection";
 import { useIsReadOnly } from "../../../../../state/use-is-read-only";
 
 const listContainerStyle = css({
@@ -66,14 +67,18 @@ const DifferentialEquationsSectionContent: React.FC = () => {
     removeDifferentialEquation,
   } = use(SDCPNContext);
 
-  const { selectedResourceId, setSelectedResourceId } = use(EditorContext);
+  const { selection, selectItem, toggleItem } = use(EditorContext);
 
   const isReadOnly = useIsReadOnly();
 
   return (
     <div className={listContainerStyle}>
       {differentialEquations.map((eq) => {
-        const isSelected = selectedResourceId === eq.id;
+        const isSelected = selection.has(eq.id);
+        const item: SelectionItem = {
+          type: "differentialEquation",
+          id: eq.id,
+        };
 
         return (
           <div
@@ -86,13 +91,17 @@ const DifferentialEquationsSectionContent: React.FC = () => {
               ) {
                 return;
               }
-              setSelectedResourceId(eq.id);
+              if (event.metaKey || event.ctrlKey) {
+                toggleItem(item);
+              } else {
+                selectItem(item);
+              }
             }}
             role="button"
             tabIndex={0}
             onKeyDown={(event) => {
               if (event.key === "Enter" || event.key === " ") {
-                setSelectedResourceId(eq.id);
+                selectItem(item);
               }
             }}
             className={equationRowStyle({ isSelected })}
@@ -129,7 +138,7 @@ const DifferentialEquationsSectionHeaderAction: React.FC = () => {
     petriNetDefinition: { types, differentialEquations },
     addDifferentialEquation,
   } = use(SDCPNContext);
-  const { setSelectedResourceId } = use(EditorContext);
+  const { selectItem } = use(EditorContext);
 
   const isReadOnly = useIsReadOnly();
 
@@ -148,7 +157,7 @@ const DifferentialEquationsSectionHeaderAction: React.FC = () => {
           colorId: types.length > 0 ? types[0]!.id : "",
           code: DEFAULT_DIFFERENTIAL_EQUATION_CODE,
         });
-        setSelectedResourceId(id);
+        selectItem({ type: "differentialEquation", id });
       }}
     >
       <TbPlus />
diff --git a/libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/nodes-list.tsx b/libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/nodes-list.tsx
index cd48262caa5..69d19a3486f 100644
--- a/libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/nodes-list.tsx
+++ b/libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/nodes-list.tsx
@@ -5,6 +5,7 @@ import { FaCircle, FaSquare } from "react-icons/fa6";
 import type { SubView } from "../../../../../components/sub-view/types";
 import { EditorContext } from "../../../../../state/editor-context";
 import { SDCPNContext } from "../../../../../state/sdcpn-context";
+import type { SelectionItem } from "../../../../../state/selection";
 
 const listContainerStyle = css({
   display: "flex",
@@ -90,28 +91,37 @@ const NodesSectionContent: React.FC = () => {
   const {
     petriNetDefinition: { places, transitions },
   } = use(SDCPNContext);
-  const { selectedResourceId, setSelectedResourceId } = use(EditorContext);
+  const { selection, selectItem, toggleItem, focusNode } = use(EditorContext);
 
-  const handleLayerClick = (id: string) => {
-    // Single select: replace selection
-    setSelectedResourceId(id);
+  const handleLayerClick = (event: React.MouseEvent, item: SelectionItem) => {
+    if (event.metaKey || event.ctrlKey) {
+      toggleItem(item);
+    } else {
+      selectItem(item);
+    }
+    // Pan to node for places and transitions
+    if (item.type === "place" || item.type === "transition") {
+      focusNode(item.id);
+    }
   };
 
   return (
     <div className={listContainerStyle}>
       {/* Places */}
       {places.map((place) => {
-        const isSelected = selectedResourceId === place.id;
+        const isSelected = selection.has(place.id);
+        const item: SelectionItem = { type: "place", id: place.id };
         return (
           <div
             key={place.id}
             role="button"
             tabIndex={0}
-            onClick={() => handleLayerClick(place.id)}
+            onClick={(event) => handleLayerClick(event, item)}
             onKeyDown={(event) => {
               if (event.key === "Enter" || event.key === " ") {
                 event.preventDefault();
-                handleLayerClick(place.id);
+                selectItem(item);
+                focusNode(place.id);
               }
             }}
             className={nodeRowStyle({ isSelected })}
@@ -126,17 +136,22 @@ const NodesSectionContent: React.FC = () => {
 
       {/* Transitions */}
       {transitions.map((transition) => {
-        const isSelected = selectedResourceId === transition.id;
+        const isSelected = selection.has(transition.id);
+        const item: SelectionItem = {
+          type: "transition",
+          id: transition.id,
+        };
         return (
           <div
             key={transition.id}
             role="button"
             tabIndex={0}
-            onClick={() => handleLayerClick(transition.id)}
+            onClick={(event) => handleLayerClick(event, item)}
             onKeyDown={(event) => {
               if (event.key === "Enter" || event.key === " ") {
                 event.preventDefault();
-                handleLayerClick(transition.id);
+                selectItem(item);
+                focusNode(transition.id);
               }
             }}
             className={nodeRowStyle({ isSelected })}
diff --git a/libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/parameters-list.tsx b/libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/parameters-list.tsx
index 13eccd1c8ed..f68ebabec79 100644
--- a/libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/parameters-list.tsx
+++ b/libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/parameters-list.tsx
@@ -10,6 +10,7 @@ import { UI_MESSAGES } from "../../../../../constants/ui-messages";
 import { SimulationContext } from "../../../../../simulation/context";
 import { EditorContext } from "../../../../../state/editor-context";
 import { SDCPNContext } from "../../../../../state/sdcpn-context";
+import type { SelectionItem } from "../../../../../state/selection";
 import { useIsReadOnly } from "../../../../../state/use-is-read-only";
 
 const listContainerStyle = css({
@@ -78,7 +79,7 @@ const ParametersHeaderAction: React.FC = () => {
     petriNetDefinition: { parameters },
     addParameter,
   } = use(SDCPNContext);
-  const { setSelectedResourceId } = use(EditorContext);
+  const { selectItem } = use(EditorContext);
 
   const isReadOnly = useIsReadOnly();
 
@@ -92,7 +93,7 @@ const ParametersHeaderAction: React.FC = () => {
       type: "real",
       defaultValue: "0",
     });
-    setSelectedResourceId(id);
+    selectItem({ type: "parameter", id });
   };
 
   return (
@@ -116,8 +117,7 @@ const ParametersList: React.FC = () => {
     petriNetDefinition: { parameters },
     removeParameter,
   } = use(SDCPNContext);
-  const { globalMode, selectedResourceId, setSelectedResourceId } =
-    use(EditorContext);
+  const { globalMode, selection, selectItem, toggleItem } = use(EditorContext);
   const {
     state: simulationState,
     parameterValues,
@@ -133,7 +133,8 @@ const ParametersList: React.FC = () => {
     <div>
       <div className={listContainerStyle}>
         {parameters.map((param) => {
-          const isSelected = selectedResourceId === param.id;
+          const isSelected = selection.has(param.id);
+          const item: SelectionItem = { type: "parameter", id: param.id };
 
           return (
             <div
@@ -147,13 +148,17 @@ const ParametersList: React.FC = () => {
                 ) {
                   return;
                 }
-                setSelectedResourceId(param.id);
+                if (event.metaKey || event.ctrlKey) {
+                  toggleItem(item);
+                } else {
+                  selectItem(item);
+                }
               }}
               role="button"
               tabIndex={0}
               onKeyDown={(event) => {
                 if (event.key === "Enter" || event.key === " ") {
-                  setSelectedResourceId(param.id);
+                  selectItem(item);
                 }
               }}
               className={parameterRowStyle({ isSelected })}
diff --git a/libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/types-list.tsx b/libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/types-list.tsx
index 3e355ce8170..f4d9ca76bf2 100644
--- a/libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/types-list.tsx
+++ b/libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/types-list.tsx
@@ -7,6 +7,7 @@ import type { SubView } from "../../../../../components/sub-view/types";
 import { UI_MESSAGES } from "../../../../../constants/ui-messages";
 import { EditorContext } from "../../../../../state/editor-context";
 import { SDCPNContext } from "../../../../../state/sdcpn-context";
+import type { SelectionItem } from "../../../../../state/selection";
 import { useIsReadOnly } from "../../../../../state/use-is-read-only";
 
 const listContainerStyle = css({
@@ -117,14 +118,15 @@ const TypesSectionContent: React.FC = () => {
     removeType,
   } = use(SDCPNContext);
 
-  const { selectedResourceId, setSelectedResourceId } = use(EditorContext);
+  const { selection, selectItem, toggleItem } = use(EditorContext);
 
   const isReadOnly = useIsReadOnly();
 
   return (
     <div className={listContainerStyle}>
       {types.map((type) => {
-        const isSelected = selectedResourceId === type.id;
+        const isSelected = selection.has(type.id);
+        const item: SelectionItem = { type: "type", id: type.id };
 
         return (
           <div
@@ -137,13 +139,17 @@ const TypesSectionContent: React.FC = () => {
               ) {
                 return;
               }
-              setSelectedResourceId(type.id);
+              if (event.metaKey || event.ctrlKey) {
+                toggleItem(item);
+              } else {
+                selectItem(item);
+              }
             }}
             role="button"
             tabIndex={0}
             onKeyDown={(event) => {
               if (event.key === "Enter" || event.key === " ") {
-                setSelectedResourceId(type.id);
+                selectItem(item);
               }
             }}
             className={typeRowStyle({ isSelected })}
@@ -182,6 +188,7 @@ const TypesSectionHeaderAction: React.FC = () => {
     petriNetDefinition: { types },
     addType,
   } = use(SDCPNContext);
+  const { selectItem } = use(EditorContext);
 
   const isReadOnly = useIsReadOnly();
 
@@ -197,8 +204,9 @@ const TypesSectionHeaderAction: React.FC = () => {
         const nextNumber = getNextTypeNumber(existingNames);
         const nextColor = getNextAvailableColor(existingColors);
 
+        const id = `type__${Date.now()}`;
         const newType = {
-          id: `type__${Date.now()}`,
+          id,
           name: `Type ${nextNumber}`,
           iconSlug: "circle",
           displayColor: nextColor,
@@ -211,6 +219,7 @@ const TypesSectionHeaderAction: React.FC = () => {
           ],
         };
         addType(newType);
+        selectItem({ type: "type", id });
       }}
     >
       <TbPlus />
diff --git a/libs/@hashintel/petrinaut/src/views/Editor/panels/PropertiesPanel/arc-properties/main.tsx b/libs/@hashintel/petrinaut/src/views/Editor/panels/PropertiesPanel/arc-properties/main.tsx
new file mode 100644
index 00000000000..f29144b6960
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/views/Editor/panels/PropertiesPanel/arc-properties/main.tsx
@@ -0,0 +1,222 @@
+import { css } from "@hashintel/ds-helpers/css";
+import { createContext, use } from "react";
+import { TbTrash } from "react-icons/tb";
+
+import { IconButton } from "../../../../../components/icon-button";
+import { NumberInput } from "../../../../../components/number-input";
+import { Section, SectionList } from "../../../../../components/section";
+import type { SubView } from "../../../../../components/sub-view/types";
+import { VerticalSubViewsContainer } from "../../../../../components/sub-view/vertical/vertical-sub-views-container";
+import { UI_MESSAGES } from "../../../../../constants/ui-messages";
+import type { SDCPN } from "../../../../../core/types/sdcpn";
+import { EditorContext } from "../../../../../state/editor-context";
+import { parseArcId } from "../../../../../state/selection";
+import { useIsReadOnly } from "../../../../../state/use-is-read-only";
+
+const containerStyle = css({
+  display: "flex",
+  flexDirection: "column",
+  height: "[100%]",
+  minHeight: "[0]",
+});
+
+const readOnlyFieldStyle = css({
+  fontSize: "sm",
+  color: "neutral.s110",
+  padding: "1",
+});
+
+interface ArcPropertiesData {
+  arcId: string;
+  transitionId: string;
+  placeId: string;
+  arcType: "input" | "output";
+  sourceName: string;
+  targetName: string;
+  weight: number;
+  updateArcWeight: (
+    transitionId: string,
+    arcType: "input" | "output",
+    placeId: string,
+    weight: number,
+  ) => void;
+  removeArc: (
+    transitionId: string,
+    arcType: "input" | "output",
+    placeId: string,
+  ) => void;
+}
+
+const ArcPropertiesContext = createContext<ArcPropertiesData | null>(null);
+
+function useArcPropertiesContext() {
+  const ctx = use(ArcPropertiesContext);
+  if (!ctx) {
+    throw new Error(
+      "useArcPropertiesContext must be used within ArcProperties",
+    );
+  }
+  return ctx;
+}
+
+const ArcMainContent: React.FC = () => {
+  const {
+    transitionId,
+    placeId,
+    arcType,
+    sourceName,
+    targetName,
+    weight,
+    updateArcWeight,
+  } = useArcPropertiesContext();
+  const isReadOnly = useIsReadOnly();
+
+  return (
+    <SectionList>
+      <Section title="Source">
+        <div className={readOnlyFieldStyle}>{sourceName}</div>
+      </Section>
+      <Section title="Target">
+        <div className={readOnlyFieldStyle}>{targetName}</div>
+      </Section>
+      <Section title="Weight">
+        <NumberInput
+          size="sm"
+          min={1}
+          step={1}
+          value={weight}
+          onChange={(event) => {
+            const value = Number.parseInt(
+              (event.target as HTMLInputElement).value,
+              10,
+            );
+            if (value > 0) {
+              updateArcWeight(transitionId, arcType, placeId, value);
+            }
+          }}
+          disabled={isReadOnly}
+        />
+      </Section>
+    </SectionList>
+  );
+};
+
+const DeleteArcAction: React.FC = () => {
+  const { transitionId, placeId, arcType, removeArc } =
+    useArcPropertiesContext();
+  const { clearSelection } = use(EditorContext);
+  const isReadOnly = useIsReadOnly();
+
+  return (
+    <IconButton
+      aria-label="Delete"
+      size="xs"
+      colorScheme="red"
+      onClick={() => {
+        removeArc(transitionId, arcType, placeId);
+        clearSelection();
+      }}
+      disabled={isReadOnly}
+      tooltip={isReadOnly ? UI_MESSAGES.READ_ONLY_MODE : "Delete"}
+    >
+      <TbTrash />
+    </IconButton>
+  );
+};
+
+const arcMainContentSubView: SubView = {
+  id: "arc-main-content",
+  title: "Arc",
+  main: true,
+  component: ArcMainContent,
+  renderHeaderAction: () => <DeleteArcAction />,
+};
+
+const subViews: SubView[] = [arcMainContentSubView];
+
+interface ArcPropertiesProps {
+  arcId: string;
+  petriNetDefinition: SDCPN;
+  updateArcWeight: (
+    transitionId: string,
+    arcType: "input" | "output",
+    placeId: string,
+    weight: number,
+  ) => void;
+  removeArc: (
+    transitionId: string,
+    arcType: "input" | "output",
+    placeId: string,
+  ) => void;
+}
+
+export const ArcProperties: React.FC<ArcPropertiesProps> = ({
+  arcId,
+  petriNetDefinition,
+  updateArcWeight,
+  removeArc,
+}) => {
+  const parsed = parseArcId(arcId);
+  if (!parsed) {
+    return null;
+  }
+
+  const { sourceId, targetId } = parsed;
+
+  const sourcePlace = petriNetDefinition.places.find(
+    (pl) => pl.id === sourceId,
+  );
+  const targetPlace = petriNetDefinition.places.find(
+    (pl) => pl.id === targetId,
+  );
+  const sourceTransition = petriNetDefinition.transitions.find(
+    (tr) => tr.id === sourceId,
+  );
+  const targetTransition = petriNetDefinition.transitions.find(
+    (tr) => tr.id === targetId,
+  );
+
+  let data: ArcPropertiesData;
+
+  if (sourcePlace && targetTransition) {
+    const arc = targetTransition.inputArcs.find(
+      (ia) => ia.placeId === sourcePlace.id,
+    );
+    data = {
+      arcId,
+      transitionId: targetTransition.id,
+      placeId: sourcePlace.id,
+      arcType: "input",
+      sourceName: sourcePlace.name,
+      targetName: targetTransition.name,
+      weight: arc?.weight ?? 1,
+      updateArcWeight,
+      removeArc,
+    };
+  } else if (sourceTransition && targetPlace) {
+    const arc = sourceTransition.outputArcs.find(
+      (oa) => oa.placeId === targetPlace.id,
+    );
+    data = {
+      arcId,
+      transitionId: sourceTransition.id,
+      placeId: targetPlace.id,
+      arcType: "output",
+      sourceName: sourceTransition.name,
+      targetName: targetPlace.name,
+      weight: arc?.weight ?? 1,
+      updateArcWeight,
+      removeArc,
+    };
+  } else {
+    return null;
+  }
+
+  return (
+    <div className={containerStyle}>
+      <ArcPropertiesContext value={data}>
+        <VerticalSubViewsContainer name="arc-properties" subViews={subViews} />
+      </ArcPropertiesContext>
+    </div>
+  );
+};
diff --git a/libs/@hashintel/petrinaut/src/views/Editor/panels/PropertiesPanel/multi-selection-panel.tsx b/libs/@hashintel/petrinaut/src/views/Editor/panels/PropertiesPanel/multi-selection-panel.tsx
new file mode 100644
index 00000000000..ea0a7ebfd88
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/views/Editor/panels/PropertiesPanel/multi-selection-panel.tsx
@@ -0,0 +1,119 @@
+import { css } from "@hashintel/ds-helpers/css";
+import { createContext, use } from "react";
+import { TbTrash } from "react-icons/tb";
+
+import { IconButton } from "../../../../components/icon-button";
+import type { SubView } from "../../../../components/sub-view/types";
+import { VerticalSubViewsContainer } from "../../../../components/sub-view/vertical/vertical-sub-views-container";
+import { UI_MESSAGES } from "../../../../constants/ui-messages";
+import { EditorContext } from "../../../../state/editor-context";
+import type { SelectionItem } from "../../../../state/selection";
+import { useIsReadOnly } from "../../../../state/use-is-read-only";
+
+const containerStyle = css({
+  display: "flex",
+  flexDirection: "column",
+  height: "[100%]",
+  minHeight: "[0]",
+});
+
+const summaryStyle = css({
+  fontSize: "sm",
+  color: "neutral.s110",
+  lineHeight: "[1.5]",
+});
+
+interface MultiSelectionData {
+  items: SelectionItem[];
+  deleteItemsByIds: (ids: Set<string>) => void;
+}
+
+const MultiSelectionContext = createContext<MultiSelectionData | null>(null);
+
+function useMultiSelectionContext() {
+  const ctx = use(MultiSelectionContext);
+  if (!ctx) {
+    throw new Error(
+      "useMultiSelectionContext must be used within MultiSelectionPanel",
+    );
+  }
+  return ctx;
+}
+
+const TYPE_LABELS: Record<string, string> = {
+  place: "place",
+  transition: "transition",
+  arc: "arc",
+  type: "type",
+  differentialEquation: "differential equation",
+  parameter: "parameter",
+};
+
+const MultiSelectionContent: React.FC = () => {
+  const { items } = useMultiSelectionContext();
+
+  // Group items by type
+  const counts = new Map<string, number>();
+  for (const item of items) {
+    counts.set(item.type, (counts.get(item.type) ?? 0) + 1);
+  }
+
+  const summary = Array.from(counts.entries())
+    .map(([type, count]) => {
+      const label = TYPE_LABELS[type] ?? type;
+      return `${count} ${label}${count > 1 ? "s" : ""}`;
+    })
+    .join(", ");
+
+  return <div className={summaryStyle}>{summary}</div>;
+};
+
+const DeleteSelectionAction: React.FC = () => {
+  const { items, deleteItemsByIds } = useMultiSelectionContext();
+  const { clearSelection } = use(EditorContext);
+  const isReadOnly = useIsReadOnly();
+
+  return (
+    <IconButton
+      aria-label="Delete selected"
+      size="xs"
+      colorScheme="red"
+      disabled={isReadOnly}
+      onClick={() => {
+        deleteItemsByIds(new Set(items.map((item) => item.id)));
+        clearSelection();
+      }}
+      tooltip={isReadOnly ? UI_MESSAGES.READ_ONLY_MODE : "Delete selected"}
+    >
+      <TbTrash />
+    </IconButton>
+  );
+};
+
+const multiSelectionMainSubView: SubView = {
+  id: "multi-selection-main",
+  title: "Multiple Selection",
+  main: true,
+  component: MultiSelectionContent,
+  renderHeaderAction: () => <DeleteSelectionAction />,
+};
+
+const subViews: SubView[] = [multiSelectionMainSubView];
+
+interface MultiSelectionPanelProps {
+  items: SelectionItem[];
+  deleteItemsByIds: (ids: Set<string>) => void;
+}
+
+export const MultiSelectionPanel: React.FC<MultiSelectionPanelProps> = ({
+  items,
+  deleteItemsByIds,
+}) => {
+  return (
+    <div className={containerStyle}>
+      <MultiSelectionContext value={{ items, deleteItemsByIds }}>
+        <VerticalSubViewsContainer name="multi-selection" subViews={subViews} />
+      </MultiSelectionContext>
+    </div>
+  );
+};
diff --git a/libs/@hashintel/petrinaut/src/views/Editor/panels/PropertiesPanel/panel.tsx b/libs/@hashintel/petrinaut/src/views/Editor/panels/PropertiesPanel/panel.tsx
index f6d59655033..4a90002f82d 100644
--- a/libs/@hashintel/petrinaut/src/views/Editor/panels/PropertiesPanel/panel.tsx
+++ b/libs/@hashintel/petrinaut/src/views/Editor/panels/PropertiesPanel/panel.tsx
@@ -10,8 +10,11 @@ import {
 } from "../../../../constants/ui";
 import { EditorContext } from "../../../../state/editor-context";
 import { SDCPNContext } from "../../../../state/sdcpn-context";
+import { usePanelTarget } from "../../../../state/use-selection";
 import { UserSettingsContext } from "../../../../state/user-settings-context";
+import { ArcProperties } from "./arc-properties/main";
 import { DifferentialEquationProperties } from "./differential-equation-properties/main";
+import { MultiSelectionPanel } from "./multi-selection-panel";
 import { ParameterProperties } from "./parameter-properties/main";
 import { PlaceProperties } from "./place-properties/main";
 import { TransitionProperties } from "./transition-properties/main";
@@ -55,7 +58,6 @@ const glassPanelContentStyle = css({
  */
 export const PropertiesPanel: React.FC = () => {
   const {
-    selectedResourceId,
     setPropertiesPanelWidth,
     isBottomPanelOpen,
     bottomPanelHeight,
@@ -63,16 +65,19 @@ export const PropertiesPanel: React.FC = () => {
   } = use(EditorContext);
 
   const {
-    getItemType,
     petriNetDefinition,
     updatePlace,
     updateTransition,
     updateArcWeight,
+    removeArc,
     updateType,
     updateDifferentialEquation,
     updateParameter,
+    deleteItemsByIds,
   } = use(SDCPNContext);
 
+  const panelTarget = usePanelTarget();
+
   const [panelWidth, setPanelWidthLocal] = useState(
     DEFAULT_PROPERTIES_PANEL_WIDTH,
   );
@@ -91,20 +96,17 @@ export const PropertiesPanel: React.FC = () => {
     setPropertiesPanelWidth(DEFAULT_PROPERTIES_PANEL_WIDTH);
   }, [setPropertiesPanelWidth]);
 
-  // Determine if the panel should be open and compute content
-  const itemType = selectedResourceId ? getItemType(selectedResourceId) : null;
-  const isOpen =
-    selectedResourceId !== null && itemType !== null && itemType !== "arc";
+  const isOpen = panelTarget.kind !== "none";
 
   let content: React.ReactNode = null;
 
-  if (isOpen) {
-    const selectedId = selectedResourceId;
+  if (panelTarget.kind === "single") {
+    const { item } = panelTarget;
 
-    switch (itemType) {
+    switch (item.type) {
       case "place": {
         const placeData = petriNetDefinition.places.find(
-          (place) => place.id === selectedId,
+          (place) => place.id === item.id,
         );
         if (placeData) {
           content = (
@@ -120,7 +122,7 @@ export const PropertiesPanel: React.FC = () => {
 
       case "transition": {
         const transitionData = petriNetDefinition.transitions.find(
-          (transition) => transition.id === selectedId,
+          (transition) => transition.id === item.id,
         );
         if (transitionData) {
           content = (
@@ -136,9 +138,21 @@ export const PropertiesPanel: React.FC = () => {
         break;
       }
 
+      case "arc": {
+        content = (
+          <ArcProperties
+            arcId={item.id}
+            petriNetDefinition={petriNetDefinition}
+            updateArcWeight={updateArcWeight}
+            removeArc={removeArc}
+          />
+        );
+        break;
+      }
+
       case "type": {
         const typeData = petriNetDefinition.types.find(
-          (type) => type.id === selectedId,
+          (type) => type.id === item.id,
         );
         if (typeData) {
           content = <TypeProperties type={typeData} updateType={updateType} />;
@@ -148,7 +162,7 @@ export const PropertiesPanel: React.FC = () => {
 
       case "differentialEquation": {
         const equationData = petriNetDefinition.differentialEquations.find(
-          (equation) => equation.id === selectedId,
+          (equation) => equation.id === item.id,
         );
         if (equationData) {
           content = (
@@ -165,7 +179,7 @@ export const PropertiesPanel: React.FC = () => {
 
       case "parameter": {
         const parameterData = petriNetDefinition.parameters.find(
-          (parameter) => parameter.id === selectedId,
+          (parameter) => parameter.id === item.id,
         );
         if (parameterData) {
           content = (
@@ -178,6 +192,13 @@ export const PropertiesPanel: React.FC = () => {
         break;
       }
     }
+  } else if (panelTarget.kind === "multi") {
+    content = (
+      <MultiSelectionPanel
+        items={panelTarget.items}
+        deleteItemsByIds={deleteItemsByIds}
+      />
+    );
   }
 
   // Calculate bottom offset based on bottom panel visibility
diff --git a/libs/@hashintel/petrinaut/src/views/Editor/panels/PropertiesPanel/place-properties/subviews/main.tsx b/libs/@hashintel/petrinaut/src/views/Editor/panels/PropertiesPanel/place-properties/subviews/main.tsx
index 51c8392050f..273b879335f 100644
--- a/libs/@hashintel/petrinaut/src/views/Editor/panels/PropertiesPanel/place-properties/subviews/main.tsx
+++ b/libs/@hashintel/petrinaut/src/views/Editor/panels/PropertiesPanel/place-properties/subviews/main.tsx
@@ -43,9 +43,10 @@ const typeColorDotStyle = css({
  */
 const PlaceMainContent: React.FC = () => {
   const { place, types, isReadOnly, updatePlace } = usePlacePropertiesContext();
-  const { setSelectedResourceId } = use(EditorContext);
+  const { selectItem } = use(EditorContext);
 
   const {
+    getItemType,
     petriNetDefinition: { differentialEquations, types: availableTypes },
   } = use(SDCPNContext);
 
@@ -219,7 +220,12 @@ const PlaceMainContent: React.FC = () => {
                 colorScheme="neutral"
                 size="xs"
                 onClick={() => {
-                  setSelectedResourceId(place.colorId);
+                  if (place.colorId) {
+                    const itemType = getItemType(place.colorId);
+                    if (itemType) {
+                      selectItem({ type: itemType, id: place.colorId });
+                    }
+                  }
                 }}
                 iconRight={<TbArrowRight />}
               >
@@ -303,7 +309,12 @@ const PlaceMainContent: React.FC = () => {
                       colorScheme="neutral"
                       size="xs"
                       onClick={() => {
-                        setSelectedResourceId(place.differentialEquationId);
+                        if (place.differentialEquationId) {
+                          selectItem({
+                            type: "differentialEquation",
+                            id: place.differentialEquationId,
+                          });
+                        }
                       }}
                       iconRight={<TbArrowRight />}
                     >
diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/components/arc.tsx b/libs/@hashintel/petrinaut/src/views/SDCPN/components/arc.tsx
index 6042c8b1f26..adb8a4677de 100644
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/components/arc.tsx
+++ b/libs/@hashintel/petrinaut/src/views/SDCPN/components/arc.tsx
@@ -1,17 +1,17 @@
 import { css } from "@hashintel/ds-helpers/css";
-import { type CSSProperties, use, useEffect, useRef } from "react";
 import {
   BaseEdge,
   type EdgeProps,
   getBezierPath,
   getSmoothStepPath,
   type Position,
-} from "reactflow";
+} from "@xyflow/react";
+import { type CSSProperties, use, useEffect, useRef } from "react";
 
 import { EditorContext } from "../../../state/editor-context";
 import { UserSettingsContext } from "../../../state/user-settings-context";
 import { useFiringDelta } from "../hooks/use-firing-delta";
-import type { ArcData } from "../reactflow-types";
+import type { ArcEdgeType } from "../reactflow-types";
 
 const BASE_STROKE_WIDTH = 2;
 const ANIMATION_DURATION_MS = 500;
@@ -166,7 +166,7 @@ function getCustomArcPath({
   return [path, labelX, labelY];
 }
 
-export const Arc: React.FC<EdgeProps<ArcData>> = ({
+export const Arc: React.FC<EdgeProps<ArcEdgeType>> = ({
   id,
   sourceX,
   sourceY,
@@ -179,11 +179,11 @@ export const Arc: React.FC<EdgeProps<ArcData>> = ({
   markerEnd,
 }) => {
   // Derive selected state from EditorContext
-  const { selectedItemIds } = use(EditorContext);
+  const { selection } = use(EditorContext);
   const { arcRendering } = use(UserSettingsContext);
 
   // Check if this arc is selected by its ID
-  const selected = selectedItemIds.has(id);
+  const selected = selection.has(id);
 
   // Track firing count delta for simulation visualization
   const firingDelta = useFiringDelta(data?.frame?.firingCount ?? null);
diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/components/classic-place-node.tsx b/libs/@hashintel/petrinaut/src/views/SDCPN/components/classic-place-node.tsx
index e8db05aebc9..4df47cdf35b 100644
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/components/classic-place-node.tsx
+++ b/libs/@hashintel/petrinaut/src/views/SDCPN/components/classic-place-node.tsx
@@ -1,19 +1,18 @@
 import { css, cva } from "@hashintel/ds-helpers/css";
+import { Handle, type NodeProps, Position } from "@xyflow/react";
 import { use } from "react";
 import { TbMathFunction } from "react-icons/tb";
-import { Handle, type NodeProps, Position } from "reactflow";
 
 import { hexToHsl } from "../../../lib/hsl-color";
 import { splitPascalCase } from "../../../lib/split-pascal-case";
 import { PlaybackContext } from "../../../playback/context";
 import { SimulationContext } from "../../../simulation/context";
 import { EditorContext } from "../../../state/editor-context";
-import type { PlaceNodeData } from "../reactflow-types";
+import type { PlaceNodeType } from "../reactflow-types";
 import { handleStyling } from "../styles/styling";
 
 const containerStyle = css({
   position: "relative",
-  transform: "translate(-50%, -50%)",
 });
 
 const placeCircleStyle = cva({
@@ -108,13 +107,13 @@ const tokenCountBadgeStyle = css({
   fontVariantNumeric: "tabular-nums",
 });
 
-export const ClassicPlaceNode: React.FC<NodeProps<PlaceNodeData>> = ({
+export const ClassicPlaceNode: React.FC<NodeProps<PlaceNodeType>> = ({
   id,
   data,
   isConnectable,
   selected,
-}: NodeProps<PlaceNodeData>) => {
-  const { globalMode, selectedResourceId } = use(EditorContext);
+}: NodeProps<PlaceNodeType>) => {
+  const { globalMode, selection } = use(EditorContext);
   const isSimulateMode = globalMode === "simulate";
   const { initialMarking } = use(SimulationContext);
   const { currentViewedFrame } = use(PlaybackContext);
@@ -130,8 +129,8 @@ export const ClassicPlaceNode: React.FC<NodeProps<PlaceNodeData>> = ({
   }
 
   // Determine selection state
-  const isSelectedByResource = selectedResourceId === id;
-  const selectionVariant = isSelectedByResource
+  const isInSelection = selection.has(id);
+  const selectionVariant = isInSelection
     ? "resource"
     : selected
       ? "reactflow"
diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/components/classic-transition-node.tsx b/libs/@hashintel/petrinaut/src/views/SDCPN/components/classic-transition-node.tsx
index 71832bfe8d2..0e9fb28ca88 100644
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/components/classic-transition-node.tsx
+++ b/libs/@hashintel/petrinaut/src/views/SDCPN/components/classic-transition-node.tsx
@@ -1,11 +1,11 @@
 import { css, cva } from "@hashintel/ds-helpers/css";
+import { Handle, type NodeProps, Position } from "@xyflow/react";
 import { use, useEffect, useRef } from "react";
 import { TbBolt, TbLambda } from "react-icons/tb";
-import { Handle, type NodeProps, Position } from "reactflow";
 
 import { EditorContext } from "../../../state/editor-context";
 import { useFiringDelta } from "../hooks/use-firing-delta";
-import type { TransitionNodeData } from "../reactflow-types";
+import type { TransitionNodeType } from "../reactflow-types";
 import { handleStyling } from "../styles/styling";
 
 const FIRING_ANIMATION_DURATION_MS = 300;
@@ -13,7 +13,6 @@ const FIRING_ANIMATION_DURATION_MS = 300;
 const containerStyle = css({
   position: "relative",
   background: "[transparent]",
-  transform: "translate(-50%, -50%)",
 });
 
 const transitionBoxStyle = cva({
@@ -152,15 +151,15 @@ function useFiringAnimation(
   }, [firingDelta, boxRef, boltRef]);
 }
 
-export const ClassicTransitionNode: React.FC<NodeProps<TransitionNodeData>> = ({
+export const ClassicTransitionNode: React.FC<NodeProps<TransitionNodeType>> = ({
   id,
   data,
   isConnectable,
   selected,
-}: NodeProps<TransitionNodeData>) => {
+}: NodeProps<TransitionNodeType>) => {
   const { label } = data;
 
-  const { selectedResourceId } = use(EditorContext);
+  const { selection } = use(EditorContext);
 
   // Refs for animated elements
   const boxRef = useRef<HTMLDivElement | null>(null);
@@ -173,8 +172,8 @@ export const ClassicTransitionNode: React.FC<NodeProps<TransitionNodeData>> = ({
   useFiringAnimation(boxRef, boltRef, firingDelta);
 
   // Determine selection state
-  const isSelectedByResource = selectedResourceId === id;
-  const selectionVariant = isSelectedByResource
+  const isInSelection = selection.has(id);
+  const selectionVariant = isInSelection
     ? "resource"
     : selected
       ? "reactflow"
diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/components/mini-map.tsx b/libs/@hashintel/petrinaut/src/views/SDCPN/components/mini-map.tsx
index a21b8c4c54a..2a2ee26b5b5 100644
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/components/mini-map.tsx
+++ b/libs/@hashintel/petrinaut/src/views/SDCPN/components/mini-map.tsx
@@ -1,7 +1,7 @@
 import { css } from "@hashintel/ds-helpers/css";
+import type { MiniMapNodeProps, MiniMapProps } from "@xyflow/react";
+import { MiniMap as ReactFlowMiniMap, useStore } from "@xyflow/react";
 import { use } from "react";
-import type { MiniMapNodeProps, MiniMapProps } from "reactflow";
-import { MiniMap as ReactFlowMiniMap, useStore } from "reactflow";
 
 import { PANEL_MARGIN } from "../../../constants/ui";
 import { hexToHsl } from "../../../lib/hsl-color";
@@ -29,7 +29,7 @@ const DEFAULT_TRANSITION_FILL = "#6b7280";
 const MiniMapNode: React.FC<MiniMapNodeProps> = ({ id, x, y }) => {
   // MiniMapNodeProps doesn't include node data, so we look it up from the store
   const node = useStore(
-    (state) => state.nodeInternals.get(id) as NodeType | undefined,
+    (state) => state.nodeLookup.get(id) as NodeType | undefined,
   );
 
   if (!node) {
@@ -72,10 +72,10 @@ const MiniMapNode: React.FC<MiniMapNodeProps> = ({ id, x, y }) => {
  * Positions at top-right, offset by properties panel width when visible.
  */
 export const MiniMap: React.FC<Omit<MiniMapProps, "style">> = (props) => {
-  const { selectedResourceId, propertiesPanelWidth, isPanelAnimating } =
+  const { selection, propertiesPanelWidth, isPanelAnimating } =
     use(EditorContext);
 
-  const isPropertiesPanelVisible = selectedResourceId !== null;
+  const isPropertiesPanelVisible = selection.size > 0;
   const minimapOffset = 12;
   const panelOffset = isPropertiesPanelVisible
     ? propertiesPanelWidth + PANEL_MARGIN
diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/components/node-card.tsx b/libs/@hashintel/petrinaut/src/views/SDCPN/components/node-card.tsx
index 0ea756e0071..299b929717b 100644
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/components/node-card.tsx
+++ b/libs/@hashintel/petrinaut/src/views/SDCPN/components/node-card.tsx
@@ -1,6 +1,6 @@
 import { css, cva } from "@hashintel/ds-helpers/css";
+import { Handle, Position } from "@xyflow/react";
 import type { ReactNode } from "react";
-import { Handle, Position } from "reactflow";
 
 import { handleStyling } from "../styles/styling";
 
@@ -8,7 +8,6 @@ export type SelectionVariant = "resource" | "reactflow" | "none";
 
 const containerStyle = css({
   position: "relative",
-  transform: "translate(-50%, -50%)",
 });
 
 /**
diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/components/place-node.tsx b/libs/@hashintel/petrinaut/src/views/SDCPN/components/place-node.tsx
index 3f805281c2a..bf34921b544 100644
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/components/place-node.tsx
+++ b/libs/@hashintel/petrinaut/src/views/SDCPN/components/place-node.tsx
@@ -1,13 +1,13 @@
 import { css } from "@hashintel/ds-helpers/css";
+import type { NodeProps } from "@xyflow/react";
 import { use } from "react";
 import { TbCircleFilled, TbMathFunction } from "react-icons/tb";
-import type { NodeProps } from "reactflow";
 
 import { hexToHsl } from "../../../lib/hsl-color";
 import { PlaybackContext } from "../../../playback/context";
 import { SimulationContext } from "../../../simulation/context";
 import { EditorContext } from "../../../state/editor-context";
-import type { PlaceNodeData } from "../reactflow-types";
+import type { PlaceNodeType } from "../reactflow-types";
 import {
   iconBadgeStyle,
   iconContainerBaseStyle,
@@ -46,13 +46,13 @@ const tokenCountBadgeStyle = css({
   fontVariantNumeric: "tabular-nums",
 });
 
-export const PlaceNode: React.FC<NodeProps<PlaceNodeData>> = ({
+export const PlaceNode: React.FC<NodeProps<PlaceNodeType>> = ({
   id,
   data,
   isConnectable,
   selected,
-}: NodeProps<PlaceNodeData>) => {
-  const { globalMode, selectedResourceId } = use(EditorContext);
+}: NodeProps<PlaceNodeType>) => {
+  const { globalMode, selection } = use(EditorContext);
   const isSimulateMode = globalMode === "simulate";
   const { initialMarking } = use(SimulationContext);
   const { currentViewedFrame } = use(PlaybackContext);
@@ -68,8 +68,8 @@ export const PlaceNode: React.FC<NodeProps<PlaceNodeData>> = ({
   }
 
   // Determine selection state
-  const isSelectedByResource = selectedResourceId === id;
-  const selectionVariant: SelectionVariant = isSelectedByResource
+  const isInSelection = selection.has(id);
+  const selectionVariant: SelectionVariant = isInSelection
     ? "resource"
     : selected
       ? "reactflow"
diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/components/transition-node.tsx b/libs/@hashintel/petrinaut/src/views/SDCPN/components/transition-node.tsx
index 95ac154dde4..31e5484e58f 100644
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/components/transition-node.tsx
+++ b/libs/@hashintel/petrinaut/src/views/SDCPN/components/transition-node.tsx
@@ -1,11 +1,11 @@
 import { css } from "@hashintel/ds-helpers/css";
+import type { NodeProps } from "@xyflow/react";
 import { use, useEffect, useRef } from "react";
 import { TbBolt, TbLambda, TbSquareFilled } from "react-icons/tb";
-import type { NodeProps } from "reactflow";
 
 import { EditorContext } from "../../../state/editor-context";
 import { useFiringDelta } from "../hooks/use-firing-delta";
-import type { TransitionNodeData } from "../reactflow-types";
+import type { TransitionNodeType } from "../reactflow-types";
 import {
   iconBadgeStyle,
   iconContainerBaseStyle,
@@ -99,15 +99,15 @@ function useFiringAnimation(
   }, [firingDelta, boxRef, boltRef]);
 }
 
-export const TransitionNode: React.FC<NodeProps<TransitionNodeData>> = ({
+export const TransitionNode: React.FC<NodeProps<TransitionNodeType>> = ({
   id,
   data,
   isConnectable,
   selected,
-}: NodeProps<TransitionNodeData>) => {
+}: NodeProps<TransitionNodeType>) => {
   const { label } = data;
 
-  const { selectedResourceId } = use(EditorContext);
+  const { selection } = use(EditorContext);
 
   // Refs for animated elements
   const boxRef = useRef<HTMLDivElement | null>(null);
@@ -120,8 +120,8 @@ export const TransitionNode: React.FC<NodeProps<TransitionNodeData>> = ({
   useFiringAnimation(boxRef, boltRef, firingDelta);
 
   // Determine selection state
-  const isSelectedByResource = selectedResourceId === id;
-  const selectionVariant: SelectionVariant = isSelectedByResource
+  const isInSelection = selection.has(id);
+  const selectionVariant: SelectionVariant = isInSelection
     ? "resource"
     : selected
       ? "reactflow"
diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/components/viewport-controls.tsx b/libs/@hashintel/petrinaut/src/views/SDCPN/components/viewport-controls.tsx
index aa154ff5999..cb9a02ea0be 100644
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/components/viewport-controls.tsx
+++ b/libs/@hashintel/petrinaut/src/views/SDCPN/components/viewport-controls.tsx
@@ -1,4 +1,5 @@
 import { css, cva } from "@hashintel/ds-helpers/css";
+import { useReactFlow } from "@xyflow/react";
 import { use, useState } from "react";
 import {
   TbLockOpen,
@@ -7,7 +8,6 @@ import {
   TbPlus,
   TbSettings,
 } from "react-icons/tb";
-import { useReactFlow } from "reactflow";
 
 import { IconButton } from "../../../components/icon-button";
 import { PANEL_MARGIN } from "../../../constants/ui";
@@ -40,14 +40,14 @@ export const ViewportControls: React.FC = () => {
   const { zoomIn, zoomOut } = useReactFlow();
   const {
     collapseAllPanels,
-    selectedResourceId,
+    selection,
     propertiesPanelWidth,
     isBottomPanelOpen,
     bottomPanelHeight,
     isPanelAnimating,
   } = use(EditorContext);
 
-  const isPropertiesPanelVisible = selectedResourceId !== null;
+  const isPropertiesPanelVisible = selection.size > 0;
   const rightOffset =
     BASE_OFFSET +
     (isPropertiesPanelVisible ? propertiesPanelWidth + PANEL_MARGIN : 0);
diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/hooks/use-apply-node-changes.ts b/libs/@hashintel/petrinaut/src/views/SDCPN/hooks/use-apply-node-changes.ts
index bdbbf354597..3373e0c2985 100644
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/hooks/use-apply-node-changes.ts
+++ b/libs/@hashintel/petrinaut/src/views/SDCPN/hooks/use-apply-node-changes.ts
@@ -1,8 +1,14 @@
+import type { EdgeChange, NodeChange } from "@xyflow/react";
 import { use } from "react";
-import type { EdgeChange, NodeChange } from "reactflow";
 
 import { EditorContext } from "../../../state/editor-context";
 import { SDCPNContext } from "../../../state/sdcpn-context";
+import type { SelectionItem, SelectionMap } from "../../../state/selection";
+import { UserSettingsContext } from "../../../state/user-settings-context";
+import {
+  classicNodeDimensions,
+  compactNodeDimensions,
+} from "../styles/styling";
 
 /**
  * A hook that provides a callback to apply ReactFlow node changes to the SDCPN store.
@@ -16,9 +22,11 @@ export function useApplyNodeChanges() {
   const {
     draggingStateByNodeId,
     updateDraggingStateByNodeId,
-    setSelectedItemIds,
-    selectedItemIds,
+    setSelection,
+    selection,
   } = use(EditorContext);
+  const { compactNodes } = use(UserSettingsContext);
+  const dims = compactNodes ? compactNodeDimensions : classicNodeDimensions;
 
   return (changes: (NodeChange | EdgeChange)[]) => {
     const positionUpdates: Array<{
@@ -29,23 +37,25 @@ export function useApplyNodeChanges() {
     let selectionChanged = false;
 
     // Check if current selection has any non-node items (types, etc.)
-    const hasNonNodeSelection = Array.from(selectedItemIds).some((id) => {
-      const itemType = getItemType(id);
-      return (
-        itemType !== "place" && itemType !== "transition" && itemType !== "arc"
-      );
-    });
+    const hasNonCanvasSelection = Array.from(selection.values()).some(
+      (item) =>
+        item.type !== "place" &&
+        item.type !== "transition" &&
+        item.type !== "arc",
+    );
 
-    // If we have non-node items selected, clear them when ReactFlow tries to select something
+    // If we have non-canvas items selected, clear them when ReactFlow tries to select something
     // Otherwise, keep the existing selection and let ReactFlow modify it
-    const newSelectedIds = new Set(hasNonNodeSelection ? [] : selectedItemIds);
+    const newSelection: SelectionMap = new Map(
+      hasNonCanvasSelection ? [] : selection,
+    );
 
     for (const change of changes) {
       if (
         // We add nodes in onDrop, we won't handle these kind of changes
         change.type === "add" ||
-        // unclear what reset is supposed to do, it's not handled in reactflow's applyChange implementation
-        change.type === "reset" ||
+        // We handle replace the same as add — our SDCPN store is the source of truth
+        change.type === "replace" ||
         // We don't allow resizing at the moment
         change.type === "dimensions"
       ) {
@@ -54,10 +64,14 @@ export function useApplyNodeChanges() {
 
       if (change.type === "select") {
         selectionChanged = true;
-        if (change.selected && !selectedItemIds.has(change.id)) {
-          newSelectedIds.add(change.id);
-        } else if (!change.selected && selectedItemIds.has(change.id)) {
-          newSelectedIds.delete(change.id);
+        if (change.selected && !selection.has(change.id)) {
+          const itemType = getItemType(change.id);
+          if (itemType) {
+            const item: SelectionItem = { type: itemType, id: change.id };
+            newSelection.set(change.id, item);
+          }
+        } else if (!change.selected && selection.has(change.id)) {
+          newSelection.delete(change.id);
         }
       }
 
@@ -101,7 +115,7 @@ export function useApplyNodeChanges() {
 
     // Apply selection changes to EditorStore
     if (selectionChanged) {
-      setSelectedItemIds(newSelectedIds);
+      setSelection(newSelection);
     }
 
     // Apply position updates to SDCPN store
@@ -110,9 +124,15 @@ export function useApplyNodeChanges() {
       const itemType = getItemType(id);
 
       if (itemType === "place") {
-        updatePlacePosition(id, { x: position.x, y: position.y });
+        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, y: position.y });
+        updateTransitionPosition(id, {
+          x: position.x + dims.transition.width / 2,
+          y: position.y + dims.transition.height / 2,
+        });
       }
     }
   };
diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/hooks/use-sdcpn-to-react-flow.ts b/libs/@hashintel/petrinaut/src/views/SDCPN/hooks/use-sdcpn-to-react-flow.ts
index c9f2858b8a8..f5fe173a0b9 100644
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/hooks/use-sdcpn-to-react-flow.ts
+++ b/libs/@hashintel/petrinaut/src/views/SDCPN/hooks/use-sdcpn-to-react-flow.ts
@@ -1,15 +1,19 @@
+import { MarkerType } from "@xyflow/react";
 import { use } from "react";
-import { MarkerType } from "reactflow";
 
 import { hexToHsl } from "../../../lib/hsl-color";
 import { PlaybackContext } from "../../../playback/context";
 import { EditorContext } from "../../../state/editor-context";
 import { generateArcId, SDCPNContext } from "../../../state/sdcpn-context";
+import { UserSettingsContext } from "../../../state/user-settings-context";
 import type {
   NodeType,
   PetrinautReactFlowDefinitionObject,
 } from "../reactflow-types";
-import { nodeDimensions } from "../styles/styling";
+import {
+  classicNodeDimensions,
+  compactNodeDimensions,
+} from "../styles/styling";
 
 /**
  * Converts SDCPN state to ReactFlow format (nodes and edges), and combines
@@ -23,8 +27,11 @@ import { nodeDimensions } from "../styles/styling";
  */
 export function useSdcpnToReactFlow(): PetrinautReactFlowDefinitionObject {
   const { petriNetDefinition } = use(SDCPNContext);
-  const { draggingStateByNodeId, selectedItemIds } = use(EditorContext);
+  const { draggingStateByNodeId, selection } = use(EditorContext);
   const { currentViewedFrame } = use(PlaybackContext);
+  const { compactNodes } = use(UserSettingsContext);
+
+  const dims = compactNodes ? compactNodeDimensions : classicNodeDimensions;
 
   const nodes: NodeType[] = [];
 
@@ -43,11 +50,15 @@ export function useSdcpnToReactFlow(): PetrinautReactFlowDefinitionObject {
       type: "place",
       position: draggingState?.dragging
         ? draggingState.position
-        : { x: place.x, y: place.y },
-      width: nodeDimensions.place.width,
-      height: nodeDimensions.place.height,
+        : {
+            x: place.x - dims.place.width / 2,
+            y: place.y - dims.place.height / 2,
+          },
+      width: dims.place.width,
+      height: dims.place.height,
+      measured: { width: dims.place.width, height: dims.place.height },
       dragging: draggingState?.dragging ?? false,
-      selected: selectedItemIds.has(place.id),
+      selected: selection.has(place.id),
       data: {
         label: place.name,
         type: "place",
@@ -67,11 +78,18 @@ export function useSdcpnToReactFlow(): PetrinautReactFlowDefinitionObject {
       type: "transition",
       position: draggingState?.dragging
         ? draggingState.position
-        : { x: transition.x, y: transition.y },
-      width: nodeDimensions.transition.width,
-      height: nodeDimensions.transition.height,
+        : {
+            x: transition.x - dims.transition.width / 2,
+            y: transition.y - dims.transition.height / 2,
+          },
+      width: dims.transition.width,
+      height: dims.transition.height,
+      measured: {
+        width: dims.transition.width,
+        height: dims.transition.height,
+      },
       dragging: draggingState?.dragging ?? false,
-      selected: selectedItemIds.has(transition.id),
+      selected: selection.has(transition.id),
       data: {
         label: transition.name,
         type: "transition",
@@ -108,7 +126,7 @@ export function useSdcpnToReactFlow(): PetrinautReactFlowDefinitionObject {
         source: inputArc.placeId,
         target: transition.id,
         type: "default" as const,
-        selected: selectedItemIds.has(arcId),
+        selected: selection.has(arcId),
         markerEnd: {
           type: MarkerType.ArrowClosed,
           color: arcColor,
@@ -149,7 +167,7 @@ export function useSdcpnToReactFlow(): PetrinautReactFlowDefinitionObject {
         source: transition.id,
         target: outputArc.placeId,
         type: "default" as const,
-        selected: selectedItemIds.has(arcId),
+        selected: selection.has(arcId),
         markerEnd: {
           type: MarkerType.ArrowClosed,
           color: arcColor,
diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/reactflow-types.ts b/libs/@hashintel/petrinaut/src/views/SDCPN/reactflow-types.ts
index 71695cd9267..bfb61fb927d 100644
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/reactflow-types.ts
+++ b/libs/@hashintel/petrinaut/src/views/SDCPN/reactflow-types.ts
@@ -1,4 +1,4 @@
-import type { Edge, Node, ReactFlowInstance } from "reactflow";
+import type { Edge, Node, ReactFlowInstance } from "@xyflow/react";
 
 import type { SimulationFrameState_Transition } from "../../simulation/context";
 
@@ -16,7 +16,9 @@ export type ArcData = {
   frame: SimulationFrameState_Transition | null;
 };
 
-export type ArcType = Omit<Edge<ArcData>, "style">;
+export type ArcEdgeType = Edge<ArcData>;
+
+export type ArcType = Omit<ArcEdgeType, "style">;
 
 export type PlaceNodeData = {
   label: string;
@@ -60,4 +62,7 @@ export type PetrinautReactFlowDefinitionObject = {
 /**
  * ReactFlow instance type for Petrinaut.
  */
-export type PetrinautReactFlowInstance = ReactFlowInstance<NodeData, ArcData>;
+export type PetrinautReactFlowInstance = ReactFlowInstance<
+  NodeType,
+  ArcEdgeType
+>;
diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.browser.test.tsx b/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.browser.test.tsx
new file mode 100644
index 00000000000..c14618a3246
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.browser.test.tsx
@@ -0,0 +1,548 @@
+import "@xyflow/react/dist/style.css";
+
+import { fireEvent } from "@testing-library/dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { render } from "vitest-browser-react";
+
+import type { SDCPN } from "../../core/types/sdcpn";
+import {
+  PlaybackContext,
+  type PlaybackContextValue,
+} from "../../playback/context";
+import {
+  SimulationContext,
+  type SimulationContextValue,
+} from "../../simulation/context";
+import {
+  EditorContext,
+  type EditorContextValue,
+  initialEditorState,
+} from "../../state/editor-context";
+import {
+  SDCPNContext,
+  type SDCPNContextValue,
+} from "../../state/sdcpn-context";
+import type { SelectionMap } from "../../state/selection";
+import {
+  defaultUserSettings,
+  UserSettingsContext,
+  type UserSettingsContextValue,
+} from "../../state/user-settings-context";
+import { SDCPNView } from "./sdcpn-view";
+
+// ---------------------------------------------------------------------------
+// Factories
+// ---------------------------------------------------------------------------
+
+function createTestSDCPN(overrides?: Partial<SDCPN>): SDCPN {
+  return {
+    places: [
+      {
+        id: "place__1",
+        name: "PlaceA",
+        colorId: null,
+        dynamicsEnabled: false,
+        differentialEquationId: null,
+        x: 100,
+        y: 100,
+      },
+      {
+        id: "place__2",
+        name: "PlaceB",
+        colorId: null,
+        dynamicsEnabled: false,
+        differentialEquationId: null,
+        x: 400,
+        y: 100,
+      },
+    ],
+    transitions: [
+      {
+        id: "transition__1",
+        name: "TransitionA",
+        inputArcs: [],
+        outputArcs: [],
+        lambdaType: "predicate",
+        lambdaCode: "",
+        transitionKernelCode: "",
+        x: 250,
+        y: 250,
+      },
+    ],
+    types: [],
+    differentialEquations: [],
+    parameters: [],
+    ...overrides,
+  };
+}
+
+function createMockSDCPNContext(
+  sdcpn: SDCPN,
+  overrides?: Partial<SDCPNContextValue>,
+): SDCPNContextValue {
+  return {
+    createNewNet: vi.fn(),
+    existingNets: [],
+    loadPetriNet: vi.fn(),
+    petriNetId: "test-net",
+    petriNetDefinition: sdcpn,
+    readonly: false,
+    mutatePetriNetDefinition: vi.fn(),
+    setTitle: vi.fn(),
+    title: "Test Net",
+    addPlace: vi.fn(),
+    updatePlace: vi.fn(),
+    updatePlacePosition: vi.fn(),
+    removePlace: vi.fn(),
+    addTransition: vi.fn(),
+    updateTransition: vi.fn(),
+    updateTransitionPosition: vi.fn(),
+    removeTransition: vi.fn(),
+    addArc: vi.fn(),
+    removeArc: vi.fn(),
+    updateArcWeight: vi.fn(),
+    addType: vi.fn(),
+    updateType: vi.fn(),
+    removeType: vi.fn(),
+    addDifferentialEquation: vi.fn(),
+    updateDifferentialEquation: vi.fn(),
+    removeDifferentialEquation: vi.fn(),
+    addParameter: vi.fn(),
+    updateParameter: vi.fn(),
+    removeParameter: vi.fn(),
+    getItemType: vi.fn((id: string) => {
+      if (id.startsWith("place")) {
+        return "place";
+      }
+      if (id.startsWith("transition")) {
+        return "transition";
+      }
+      if (id.startsWith("$A_")) {
+        return "arc";
+      }
+      return null;
+    }),
+    deleteItemsByIds: vi.fn(),
+    layoutGraph: vi.fn(async () => {}),
+    ...overrides,
+  };
+}
+
+function createMockEditorContext(
+  overrides?: Partial<EditorContextValue>,
+): EditorContextValue {
+  return {
+    ...initialEditorState,
+    cursorMode: "select",
+    setGlobalMode: vi.fn(),
+    setEditionMode: vi.fn(),
+    setCursorMode: vi.fn(),
+    setLeftSidebarOpen: vi.fn(),
+    setLeftSidebarWidth: vi.fn(),
+    setPropertiesPanelWidth: vi.fn(),
+    setBottomPanelOpen: vi.fn(),
+    toggleBottomPanel: vi.fn(),
+    setBottomPanelHeight: vi.fn(),
+    setActiveBottomPanelTab: vi.fn(),
+    setSelection: vi.fn(),
+    selectItem: vi.fn(),
+    toggleItem: vi.fn(),
+    addToSelection: vi.fn(),
+    removeFromSelection: vi.fn(),
+    clearSelection: vi.fn(),
+    focusNode: vi.fn(),
+    registerFocusNode: vi.fn(),
+    setDraggingStateByNodeId: vi.fn(),
+    updateDraggingStateByNodeId: vi.fn(),
+    resetDraggingState: vi.fn(),
+    collapseAllPanels: vi.fn(),
+    setTimelineChartType: vi.fn(),
+    triggerPanelAnimation: vi.fn(),
+    __reinitialize: vi.fn(),
+    ...overrides,
+  };
+}
+
+function createMockPlaybackContext(
+  overrides?: Partial<PlaybackContextValue>,
+): PlaybackContextValue {
+  return {
+    currentFrame: null,
+    currentViewedFrame: null,
+    playbackState: "Stopped",
+    currentFrameIndex: 0,
+    totalFrames: 0,
+    playbackSpeed: 1,
+    playMode: "computeMax",
+    isViewOnlyAvailable: false,
+    isComputeAvailable: true,
+    setCurrentViewedFrame: vi.fn(),
+    play: vi.fn(async () => {}),
+    pause: vi.fn(),
+    stop: vi.fn(),
+    setPlaybackSpeed: vi.fn(),
+    setPlayMode: vi.fn(),
+    ...overrides,
+  };
+}
+
+function createMockSimulationContext(
+  overrides?: Partial<SimulationContextValue>,
+): SimulationContextValue {
+  return {
+    state: "NotRun",
+    error: null,
+    errorItemId: null,
+    parameterValues: {},
+    initialMarking: new Map(),
+    dt: 0.01,
+    maxTime: null,
+    totalFrames: 0,
+    getFrame: vi.fn(() => Promise.resolve(null)),
+    getAllFrames: vi.fn(() => Promise.resolve([])),
+    getFramesInRange: vi.fn(() => Promise.resolve([])),
+    setInitialMarking: vi.fn(),
+    setParameterValue: vi.fn(),
+    setDt: vi.fn(),
+    setMaxTime: vi.fn(),
+    initialize: vi.fn(async () => {}),
+    run: vi.fn(),
+    pause: vi.fn(),
+    reset: vi.fn(),
+    setBackpressure: vi.fn(),
+    ack: vi.fn(),
+    ...overrides,
+  };
+}
+
+function createMockUserSettings(
+  overrides?: Partial<UserSettingsContextValue>,
+): UserSettingsContextValue {
+  return {
+    ...defaultUserSettings,
+    setShowAnimations: vi.fn(),
+    setKeepPanelsMounted: vi.fn(),
+    setCompactNodes: vi.fn(),
+    setArcRendering: vi.fn(),
+    setIsLeftSidebarOpen: vi.fn(),
+    setLeftSidebarWidth: vi.fn(),
+    setPropertiesPanelWidth: vi.fn(),
+    setIsBottomPanelOpen: vi.fn(),
+    setBottomPanelHeight: vi.fn(),
+    setActiveBottomPanelTab: vi.fn(),
+    setCursorMode: vi.fn(),
+    setTimelineChartType: vi.fn(),
+    updateSubViewSection: vi.fn(),
+    ...overrides,
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Test harness
+// ---------------------------------------------------------------------------
+
+function renderSDCPNView(opts?: {
+  sdcpn?: SDCPN;
+  sdcpnOverrides?: Partial<SDCPNContextValue>;
+  editorOverrides?: Partial<EditorContextValue>;
+  userSettingsOverrides?: Partial<UserSettingsContextValue>;
+}) {
+  const sdcpn = opts?.sdcpn ?? createTestSDCPN();
+  const sdcpnCtx = createMockSDCPNContext(sdcpn, opts?.sdcpnOverrides);
+  const editorCtx = createMockEditorContext(opts?.editorOverrides);
+  const playbackCtx = createMockPlaybackContext();
+  const simulationCtx = createMockSimulationContext();
+  const userSettingsCtx = createMockUserSettings(opts?.userSettingsOverrides);
+
+  const result = render(
+    <UserSettingsContext value={userSettingsCtx}>
+      <SimulationContext value={simulationCtx}>
+        <PlaybackContext value={playbackCtx}>
+          <SDCPNContext value={sdcpnCtx}>
+            <EditorContext value={editorCtx}>
+              <div style={{ width: 800, height: 600 }}>
+                <SDCPNView />
+              </div>
+            </EditorContext>
+          </SDCPNContext>
+        </PlaybackContext>
+      </SimulationContext>
+    </UserSettingsContext>,
+  );
+
+  return { result, editorCtx, sdcpnCtx, userSettingsCtx };
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/** Wait for ReactFlow to initialise (nodes get rendered to the DOM). */
+async function waitForNodes(expectedCount: number) {
+  await expect
+    .poll(() => document.querySelectorAll(".react-flow__node").length, {
+      timeout: 5_000,
+      message: `Expected ${expectedCount} rendered nodes`,
+    })
+    .toBe(expectedCount);
+}
+
+/**
+ * Simulate a drag-select rectangle using fireEvent pointer events.
+ * Coordinates are relative to the pane element's bounding rect.
+ */
+function dragSelectOnPane(
+  pane: Element,
+  startX: number,
+  startY: number,
+  endX: number,
+  endY: number,
+) {
+  const rect = pane.getBoundingClientRect();
+  const absStartX = rect.left + startX;
+  const absStartY = rect.top + startY;
+  const absEndX = rect.left + endX;
+  const absEndY = rect.top + endY;
+
+  // Pointer down on the pane to start selection
+  fireEvent.pointerDown(pane, {
+    clientX: absStartX,
+    clientY: absStartY,
+    button: 0,
+    isPrimary: true,
+    pointerId: 1,
+  });
+
+  // Move in steps so ReactFlow registers a drag (exceeds paneClickDistance)
+  const steps = 6;
+  for (let i = 1; i <= steps; i++) {
+    const ratio = i / steps;
+    fireEvent.pointerMove(pane, {
+      clientX: absStartX + (absEndX - absStartX) * ratio,
+      clientY: absStartY + (absEndY - absStartY) * ratio,
+      button: 0,
+      isPrimary: true,
+      pointerId: 1,
+    });
+  }
+
+  // Pointer up to finalize
+  fireEvent.pointerUp(pane, {
+    clientX: absEndX,
+    clientY: absEndY,
+    button: 0,
+    isPrimary: true,
+    pointerId: 1,
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe("SDCPNView", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe("rendering", () => {
+    it("renders place and transition nodes in classic mode", async () => {
+      renderSDCPNView({ userSettingsOverrides: { compactNodes: false } });
+      await waitForNodes(3); // 2 places + 1 transition
+    });
+
+    it("renders place and transition nodes in compact mode", async () => {
+      renderSDCPNView({ userSettingsOverrides: { compactNodes: true } });
+      await waitForNodes(3);
+    });
+  });
+
+  describe("node click dispatches to EditorContext", () => {
+    it("calls selectItem when a node is clicked", async () => {
+      const { editorCtx } = renderSDCPNView();
+      await waitForNodes(3);
+
+      const node = document.querySelector('[data-id="place__1"]')!;
+      fireEvent.click(node);
+
+      expect(editorCtx.selectItem).toHaveBeenCalledWith({
+        type: "place",
+        id: "place__1",
+      });
+    });
+
+    it("calls toggleItem on ctrl+click", async () => {
+      const { editorCtx } = renderSDCPNView();
+      await waitForNodes(3);
+
+      const node = document.querySelector('[data-id="place__1"]')!;
+      fireEvent.click(node, { ctrlKey: true });
+
+      expect(editorCtx.toggleItem).toHaveBeenCalledWith({
+        type: "place",
+        id: "place__1",
+      });
+    });
+  });
+
+  describe("pane click dispatches to EditorContext", () => {
+    it("calls clearSelection when clicking empty canvas", async () => {
+      // Use pan mode so the pane has a regular onClick handler
+      // (in select mode, ReactFlow replaces onClick with pointer event handlers)
+      const { editorCtx } = renderSDCPNView({
+        editorOverrides: { cursorMode: "pan" },
+      });
+      await waitForNodes(3);
+
+      const pane = document.querySelector(".react-flow__pane")!;
+      fireEvent.click(pane);
+
+      expect(editorCtx.clearSelection).toHaveBeenCalled();
+    });
+  });
+
+  describe("drag-select in select cursor mode", () => {
+    it("dispatches selection changes via setSelection when nodes are drag-selected (classic)", async () => {
+      const { editorCtx } = renderSDCPNView({
+        editorOverrides: { cursorMode: "select" },
+        userSettingsOverrides: { compactNodes: false },
+      });
+      await waitForNodes(3);
+
+      const pane = document.querySelector(".react-flow__pane")!;
+      // Use extreme coordinates to ensure the selection rectangle covers all nodes
+      // regardless of how fitView adjusts the viewport transform
+      dragSelectOnPane(pane, -2000, -2000, 4000, 4000);
+
+      // setSelection should have been called at least once during the drag
+      expect(editorCtx.setSelection).toHaveBeenCalled();
+
+      // Collect all selected IDs across all setSelection calls
+      const allSelectedIds = new Set<string>();
+      for (const call of (editorCtx.setSelection as ReturnType<typeof vi.fn>)
+        .mock.calls) {
+        const selMap = call[0] as SelectionMap;
+        for (const id of selMap.keys()) {
+          allSelectedIds.add(id);
+        }
+      }
+
+      expect(allSelectedIds.has("place__1")).toBe(true);
+      expect(allSelectedIds.has("place__2")).toBe(true);
+      expect(allSelectedIds.has("transition__1")).toBe(true);
+    });
+
+    it("dispatches selection changes via setSelection when nodes are drag-selected (compact)", async () => {
+      const { editorCtx } = renderSDCPNView({
+        editorOverrides: { cursorMode: "select" },
+        userSettingsOverrides: { compactNodes: true },
+      });
+      await waitForNodes(3);
+
+      const pane = document.querySelector(".react-flow__pane")!;
+      dragSelectOnPane(pane, -2000, -2000, 4000, 4000);
+
+      expect(editorCtx.setSelection).toHaveBeenCalled();
+
+      // Collect all selected IDs across all setSelection calls
+      const allSelectedIds = new Set<string>();
+      for (const call of (editorCtx.setSelection as ReturnType<typeof vi.fn>)
+        .mock.calls) {
+        const selMap = call[0] as SelectionMap;
+        for (const id of selMap.keys()) {
+          allSelectedIds.add(id);
+        }
+      }
+
+      expect(allSelectedIds.has("place__1")).toBe(true);
+      expect(allSelectedIds.has("place__2")).toBe(true);
+      expect(allSelectedIds.has("transition__1")).toBe(true);
+    });
+
+    it("does not select nodes outside the drag rectangle", async () => {
+      // Place nodes far apart so we can select just one
+      const sdcpn = createTestSDCPN({
+        places: [
+          {
+            id: "place__1",
+            name: "PlaceA",
+            colorId: null,
+            dynamicsEnabled: false,
+            differentialEquationId: null,
+            x: 100,
+            y: 100,
+          },
+          {
+            id: "place__2",
+            name: "PlaceB",
+            colorId: null,
+            dynamicsEnabled: false,
+            differentialEquationId: null,
+            x: 600,
+            y: 500,
+          },
+        ],
+        transitions: [],
+      });
+
+      const { editorCtx } = renderSDCPNView({
+        sdcpn,
+        editorOverrides: { cursorMode: "select" },
+        userSettingsOverrides: { compactNodes: false },
+      });
+      await waitForNodes(2);
+
+      const pane = document.querySelector(".react-flow__pane")!;
+      // Drag a small rectangle in the top-left area where only PlaceA is
+      dragSelectOnPane(pane, 0, 0, 250, 250);
+
+      const calls = (editorCtx.setSelection as ReturnType<typeof vi.fn>).mock
+        .calls;
+
+      if (calls.length > 0) {
+        const lastCall = calls.at(-1)?.[0] as SelectionMap | undefined;
+        if (lastCall && lastCall.size > 0) {
+          expect(lastCall.has("place__1")).toBe(true);
+          expect(lastCall.has("place__2")).toBe(false);
+        }
+      }
+    });
+  });
+
+  describe("selection is not enabled in pan mode", () => {
+    it("does not dispatch setSelection on drag in pan mode", async () => {
+      const { editorCtx } = renderSDCPNView({
+        editorOverrides: { cursorMode: "pan" },
+      });
+      await waitForNodes(3);
+
+      const pane = document.querySelector(".react-flow__pane")!;
+      dragSelectOnPane(pane, 0, 0, 800, 600);
+
+      // In pan mode, drag should pan the canvas, not select
+      expect(editorCtx.setSelection).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("keyboard delete dispatches to EditorContext", () => {
+    it("calls deleteItemsByIds and clearSelection on Delete key", async () => {
+      const selection: SelectionMap = new Map([
+        ["place__1", { type: "place", id: "place__1" }],
+      ]);
+
+      const { editorCtx, sdcpnCtx } = renderSDCPNView({
+        editorOverrides: { selection },
+      });
+      await waitForNodes(3);
+
+      // The onKeyDown handler is on the container div wrapping ReactFlow.
+      const container = document.querySelector(".react-flow")?.parentElement;
+      if (container) {
+        fireEvent.keyDown(container, { key: "Delete" });
+      }
+
+      expect(sdcpnCtx.deleteItemsByIds).toHaveBeenCalled();
+      expect(editorCtx.clearSelection).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.tsx b/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.tsx
index fd4236a92a3..84f59ba2f9e 100644
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.tsx
+++ b/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.tsx
@@ -1,9 +1,9 @@
-import "reactflow/dist/style.css";
+import "@xyflow/react/dist/style.css";
 
 import { css } from "@hashintel/ds-helpers/css";
+import type { Connection } from "@xyflow/react";
+import { Background, ReactFlow, useReactFlow } from "@xyflow/react";
 import { use, useEffect, useMemo, useRef, useState } from "react";
-import type { Connection, Node, ReactFlowInstance } from "reactflow";
-import ReactFlow, { Background } from "reactflow";
 import { v4 as generateUuid } from "uuid";
 
 import {
@@ -12,6 +12,7 @@ import {
 } from "../../core/default-codes";
 import { EditorContext } from "../../state/editor-context";
 import { SDCPNContext } from "../../state/sdcpn-context";
+import type { SelectionItem } from "../../state/selection";
 import { useIsReadOnly } from "../../state/use-is-read-only";
 import { UserSettingsContext } from "../../state/user-settings-context";
 import { Arc } from "./components/arc";
@@ -23,11 +24,7 @@ import { TransitionNode } from "./components/transition-node";
 import { ViewportControls } from "./components/viewport-controls";
 import { useApplyNodeChanges } from "./hooks/use-apply-node-changes";
 import { useSdcpnToReactFlow } from "./hooks/use-sdcpn-to-react-flow";
-import type {
-  ArcData,
-  NodeData,
-  PetrinautReactFlowInstance,
-} from "./reactflow-types";
+import type { NodeType, PetrinautReactFlowInstance } from "./reactflow-types";
 
 const SNAP_GRID_SIZE = 15;
 
@@ -54,6 +51,33 @@ const canvasContainerStyle = css({
   },
 });
 
+/**
+ * Inner component that registers focusNode via useReactFlow (must be inside ReactFlow provider).
+ */
+const FocusNodeRegistrar: React.FC = () => {
+  const { setCenter } = useReactFlow();
+  const { registerFocusNode } = use(EditorContext);
+  const { petriNetDefinition } = use(SDCPNContext);
+
+  useEffect(() => {
+    registerFocusNode((nodeId: string) => {
+      const place = petriNetDefinition.places.find((pl) => pl.id === nodeId);
+      if (place) {
+        void setCenter(place.x, place.y, { duration: 400, zoom: 1 });
+        return;
+      }
+      const transition = petriNetDefinition.transitions.find(
+        (tr) => tr.id === nodeId,
+      );
+      if (transition) {
+        void setCenter(transition.x, transition.y, { duration: 400, zoom: 1 });
+      }
+    });
+  }, [setCenter, registerFocusNode, petriNetDefinition]);
+
+  return null;
+};
+
 /**
  * SDCPNView is responsible for rendering the SDCPN using ReactFlow.
  * It reads from SDCPNContext and EditorContext, and handles all ReactFlow interactions.
@@ -76,6 +100,7 @@ export const SDCPNView: React.FC = () => {
     addTransition,
     addArc,
     deleteItemsByIds,
+    getItemType,
     readonly,
   } = use(SDCPNContext);
 
@@ -83,9 +108,9 @@ export const SDCPNView: React.FC = () => {
     editionMode,
     setEditionMode,
     cursorMode,
-    selectedItemIds,
-    setSelectedItemIds,
-    setSelectedResourceId,
+    selection,
+    selectItem,
+    toggleItem,
     clearSelection,
   } = use(EditorContext);
 
@@ -97,7 +122,11 @@ export const SDCPNView: React.FC = () => {
 
   // Center viewport on SDCPN load
   useEffect(() => {
-    reactFlowInstance?.fitView({ padding: 0.4, minZoom: 0.4, maxZoom: 1.1 });
+    void reactFlowInstance?.fitView({
+      padding: 0.4,
+      minZoom: 0.4,
+      maxZoom: 1.1,
+    });
   }, [reactFlowInstance, petriNetId]);
 
   // Readonly if simulation mode or readonly has been provided by external consumer.
@@ -121,8 +150,8 @@ export const SDCPNView: React.FC = () => {
       return;
     }
 
-    const source = connection.source ?? "";
-    const target = connection.target ?? "";
+    const source = connection.source;
+    const target = connection.target;
 
     const sourceNode = nodes.find((node) => node.id === source);
     const targetNode = nodes.find((node) => node.id === target);
@@ -144,7 +173,7 @@ export const SDCPNView: React.FC = () => {
     }
   }
 
-  function onInit(instance: ReactFlowInstance<NodeData, ArcData>) {
+  function onInit(instance: PetrinautReactFlowInstance) {
     setReactFlowInstance(instance);
   }
 
@@ -180,14 +209,21 @@ export const SDCPNView: React.FC = () => {
         y: position.y,
       });
     }
-    setSelectedItemIds(new Set([id]));
+    selectItem({ type: nodeType, id });
     setEditionMode("cursor");
   }
 
-  function onNodeClick(_event: React.MouseEvent, node: Node<NodeData>) {
-    // Set the selected resource ID for properties panel
-    setSelectedResourceId(node.id);
-    setSelectedItemIds(new Set([node.id]));
+  function onNodeClick(event: React.MouseEvent, node: NodeType) {
+    const itemType = getItemType(node.id);
+    if (!itemType) {
+      return;
+    }
+    const item: SelectionItem = { type: itemType, id: node.id };
+    if (event.metaKey || event.ctrlKey) {
+      toggleItem(item);
+    } else {
+      selectItem(item);
+    }
   }
 
   function onPaneClick(event: React.MouseEvent) {
@@ -197,8 +233,7 @@ export const SDCPNView: React.FC = () => {
 
     // Clear selection when clicking empty canvas in select mode
     if (editionMode === "cursor") {
-      setSelectedItemIds(new Set());
-      setSelectedResourceId(null);
+      clearSelection();
       return;
     }
 
@@ -210,10 +245,9 @@ export const SDCPNView: React.FC = () => {
 
     const nodeType = editionMode === "add-place" ? "place" : "transition";
 
-    const reactFlowBounds = canvasContainer.current.getBoundingClientRect();
-    const position = reactFlowInstance.project({
-      x: event.clientX - reactFlowBounds.left,
-      y: event.clientY - reactFlowBounds.top,
+    const position = reactFlowInstance.screenToFlowPosition({
+      x: event.clientX,
+      y: event.clientY,
     });
 
     createNodeAtPosition(nodeType, position);
@@ -239,10 +273,9 @@ export const SDCPNView: React.FC = () => {
       return;
     }
 
-    const reactFlowBounds = canvasContainer.current.getBoundingClientRect();
-    const position = reactFlowInstance.project({
-      x: event.clientX - reactFlowBounds.left,
-      y: event.clientY - reactFlowBounds.top,
+    const position = reactFlowInstance.screenToFlowPosition({
+      x: event.clientX,
+      y: event.clientY,
     });
 
     createNodeAtPosition(nodeType, position);
@@ -287,6 +320,7 @@ export const SDCPNView: React.FC = () => {
   const isAddMode =
     editionMode === "add-place" || editionMode === "add-transition";
   const isPanMode = editionMode === "cursor" && cursorMode === "pan";
+  const isSelectMode = editionMode === "cursor" && cursorMode === "select";
 
   // Set cursor style based on mode
   const getCursorStyle = () => {
@@ -312,9 +346,8 @@ export const SDCPNView: React.FC = () => {
         // Quick-and-dirty way to delete selected items with keyboard
         // with two different keys (Delete and Backspace), not possible with ReactFlow `deleteKeyCode` prop
         if ((key === "Delete" || key === "Backspace") && !isReadonly) {
-          setSelectedResourceId(null);
+          deleteItemsByIds(new Set(selection.keys()));
           clearSelection();
-          deleteItemsByIds(selectedItemIds);
         }
       }}
     >
@@ -329,9 +362,13 @@ export const SDCPNView: React.FC = () => {
         onInit={onInit}
         onNodeClick={onNodeClick}
         onPaneClick={onPaneClick}
-        onEdgeClick={(_e, edge) => {
-          setSelectedResourceId(null);
-          setSelectedItemIds(new Set([edge.id]));
+        onEdgeClick={(event, edge) => {
+          const item: SelectionItem = { type: "arc", id: edge.id };
+          if (event.metaKey || event.ctrlKey) {
+            toggleItem(item);
+          } else {
+            selectItem(item);
+          }
         }}
         onDrop={isReadonly ? undefined : onDrop}
         onDragOver={isReadonly ? undefined : onDragOver}
@@ -340,6 +377,7 @@ export const SDCPNView: React.FC = () => {
         snapGrid={[SNAP_GRID_SIZE, SNAP_GRID_SIZE]}
         proOptions={{ hideAttribution: true }}
         panOnDrag={isPanMode ? true : isAddMode ? false : [1, 2]}
+        selectionOnDrag={isSelectMode && !isReadonly}
         nodesDraggable={!isReadonly}
         nodesConnectable={!isReadonly}
         elementsSelectable={!isReadonly && !isAddMode}
@@ -350,6 +388,7 @@ export const SDCPNView: React.FC = () => {
         <Background gap={SNAP_GRID_SIZE} size={1} />
         <MiniMap pannable zoomable />
         <ViewportControls />
+        <FocusNodeRegistrar />
       </ReactFlow>
     </div>
   );
diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/styles/styling.ts b/libs/@hashintel/petrinaut/src/views/SDCPN/styles/styling.ts
index 1f73009444d..3f90a5090b3 100644
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/styles/styling.ts
+++ b/libs/@hashintel/petrinaut/src/views/SDCPN/styles/styling.ts
@@ -1,8 +1,16 @@
-export const nodeDimensions = {
-  place: { width: 120, height: 48 },
-  transition: { width: 120, height: 48 },
+export const compactNodeDimensions = {
+  place: { width: 180, height: 48 },
+  transition: { width: 180, height: 48 },
 };
 
+export const classicNodeDimensions = {
+  place: { width: 130, height: 130 },
+  transition: { width: 160, height: 80 },
+};
+
+/** @deprecated Use compactNodeDimensions or classicNodeDimensions */
+export const nodeDimensions = compactNodeDimensions;
+
 export const handleStyling = {
   background: "#6b7280",
   width: 9,
diff --git a/libs/@hashintel/petrinaut/vite.config.ts b/libs/@hashintel/petrinaut/vite.config.ts
index cb03d164edf..aa0bde0363a 100644
--- a/libs/@hashintel/petrinaut/vite.config.ts
+++ b/libs/@hashintel/petrinaut/vite.config.ts
@@ -19,7 +19,7 @@ export default defineConfig(({ command }) => ({
         "@hashintel/ds-helpers",
         "react",
         "react-dom",
-        "reactflow",
+        "@xyflow/react",
         "monaco-editor",
         "@babel/standalone",
       ],
diff --git a/libs/@hashintel/petrinaut/vitest.browser.config.ts b/libs/@hashintel/petrinaut/vitest.browser.config.ts
new file mode 100644
index 00000000000..ea269450cbe
--- /dev/null
+++ b/libs/@hashintel/petrinaut/vitest.browser.config.ts
@@ -0,0 +1,28 @@
+import react from "@vitejs/plugin-react";
+import { playwright } from "@vitest/browser-playwright";
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  plugins: [
+    react({
+      babel: {
+        plugins: ["babel-plugin-react-compiler"],
+      },
+    }),
+  ],
+  define: {
+    "process.versions": JSON.stringify({ pnp: undefined }),
+  },
+  optimizeDeps: {
+    include: ["@testing-library/dom"],
+  },
+  test: {
+    include: ["src/**/*.browser.test.{ts,tsx}"],
+    browser: {
+      enabled: true,
+      provider: playwright(),
+      headless: true,
+      instances: [{ browser: "chromium" }],
+    },
+  },
+});
diff --git a/yarn.lock b/yarn.lock
index 5c957a01e56..e27f6a8165d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8006,6 +8006,8 @@ __metadata:
     "@types/react-dom": "npm:19.2.3"
     "@typescript/native-preview": "npm:7.0.0-dev.20260309.1"
     "@vitejs/plugin-react": "npm:5.1.4"
+    "@vitest/browser-playwright": "npm:^4.0.16"
+    "@xyflow/react": "npm:12.10.1"
     babel-plugin-react-compiler: "npm:1.0.0"
     d3-array: "npm:3.2.4"
     d3-scale: "npm:4.0.2"
@@ -8018,14 +8020,15 @@ __metadata:
     react-dom: "npm:19.2.3"
     react-icons: "npm:5.5.0"
     react-resizable-panels: "npm:4.6.5"
-    reactflow: "npm:11.11.4"
     rolldown: "npm:1.0.0-rc.8"
     rolldown-plugin-dts: "npm:0.22.4"
     storybook: "npm:10.2.13"
     typescript: "npm:5.9.3"
     uuid: "npm:13.0.0"
     vite: "npm:8.0.0-beta.18"
+    vite-plugin-dts: "npm:4.5.4"
     vitest: "npm:4.0.18"
+    vitest-browser-react: "npm:^2.0.2"
     vscode-languageserver-types: "npm:3.17.5"
     web-worker: "npm:1.4.1"
   peerDependencies:
@@ -18060,7 +18063,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/d3-drag@npm:*, @types/d3-drag@npm:^3.0.1":
+"@types/d3-drag@npm:*, @types/d3-drag@npm:^3.0.1, @types/d3-drag@npm:^3.0.7":
   version: 3.0.7
   resolution: "@types/d3-drag@npm:3.0.7"
   dependencies:
@@ -18122,7 +18125,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/d3-interpolate@npm:*":
+"@types/d3-interpolate@npm:*, @types/d3-interpolate@npm:^3.0.4":
   version: 3.0.4
   resolution: "@types/d3-interpolate@npm:3.0.4"
   dependencies:
@@ -18175,7 +18178,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/d3-selection@npm:*, @types/d3-selection@npm:^3.0.3":
+"@types/d3-selection@npm:*, @types/d3-selection@npm:^3.0.10, @types/d3-selection@npm:^3.0.3":
   version: 3.0.11
   resolution: "@types/d3-selection@npm:3.0.11"
   checksum: 10c0/0c512956c7503ff5def4bb32e0c568cc757b9a2cc400a104fc0f4cfe5e56d83ebde2a97821b6f2cb26a7148079d3b86a2f28e11d68324ed311cf35c2ed980d1d
@@ -18212,7 +18215,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/d3-transition@npm:*":
+"@types/d3-transition@npm:*, @types/d3-transition@npm:^3.0.8":
   version: 3.0.9
   resolution: "@types/d3-transition@npm:3.0.9"
   dependencies:
@@ -18221,7 +18224,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/d3-zoom@npm:*, @types/d3-zoom@npm:^3.0.1":
+"@types/d3-zoom@npm:*, @types/d3-zoom@npm:^3.0.1, @types/d3-zoom@npm:^3.0.8":
   version: 3.0.8
   resolution: "@types/d3-zoom@npm:3.0.8"
   dependencies:
@@ -20627,6 +20630,37 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@xyflow/react@npm:12.10.1":
+  version: 12.10.1
+  resolution: "@xyflow/react@npm:12.10.1"
+  dependencies:
+    "@xyflow/system": "npm:0.0.75"
+    classcat: "npm:^5.0.3"
+    zustand: "npm:^4.4.0"
+  peerDependencies:
+    react: ">=17"
+    react-dom: ">=17"
+  checksum: 10c0/7fbcbb99a67f2a74a30408d070dba5dab006658add73949773e7475d91563f3762dd40ac2ece4007fc2e7c2918c3448615048875f0dd634e56e1b3b513a6fc39
+  languageName: node
+  linkType: hard
+
+"@xyflow/system@npm:0.0.75":
+  version: 0.0.75
+  resolution: "@xyflow/system@npm:0.0.75"
+  dependencies:
+    "@types/d3-drag": "npm:^3.0.7"
+    "@types/d3-interpolate": "npm:^3.0.4"
+    "@types/d3-selection": "npm:^3.0.10"
+    "@types/d3-transition": "npm:^3.0.8"
+    "@types/d3-zoom": "npm:^3.0.8"
+    d3-drag: "npm:^3.0.0"
+    d3-interpolate: "npm:^3.0.1"
+    d3-selection: "npm:^3.0.0"
+    d3-zoom: "npm:^3.0.0"
+  checksum: 10c0/d7d838465825e6267bd43b169b97ff11b08b313397dde5e249634c2526e1728e0f5bc4b092650d0c970eb13950f1415677926d46dc371faf79a2f46ea1e91ede
+  languageName: node
+  linkType: hard
+
 "@yarnpkg/types@npm:^4.0.1":
   version: 4.0.1
   resolution: "@yarnpkg/types@npm:4.0.1"
@@ -25135,7 +25169,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"d3-interpolate@npm:1 - 3, d3-interpolate@npm:1.2.0 - 3":
+"d3-interpolate@npm:1 - 3, d3-interpolate@npm:1.2.0 - 3, d3-interpolate@npm:^3.0.1":
   version: 3.0.1
   resolution: "d3-interpolate@npm:3.0.1"
   dependencies:
@@ -45085,7 +45119,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"use-sync-external-store@npm:^1.4.0, use-sync-external-store@npm:^1.5.0":
+"use-sync-external-store@npm:^1.2.2, use-sync-external-store@npm:^1.4.0, use-sync-external-store@npm:^1.5.0":
   version: 1.6.0
   resolution: "use-sync-external-store@npm:1.6.0"
   peerDependencies:
@@ -46959,6 +46993,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"zustand@npm:^4.4.0":
+  version: 4.5.7
+  resolution: "zustand@npm:4.5.7"
+  dependencies:
+    use-sync-external-store: "npm:^1.2.2"
+  peerDependencies:
+    "@types/react": ">=16.8"
+    immer: ">=9.0.6"
+    react: ">=16.8"
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    immer:
+      optional: true
+    react:
+      optional: true
+  checksum: 10c0/55559e37a82f0c06cadc61cb08f08314c0fe05d6a93815e41e3376130c13db22a5017cbb0cd1f018c82f2dad0051afe3592561d40f980bd4082e32005e8a950c
+  languageName: node
+  linkType: hard
+
 "zustand@npm:^4.4.1":
   version: 4.5.5
   resolution: "zustand@npm:4.5.5"

From 2f75439b6134106a339406eec837cf02a5c8749e Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Sat, 7 Mar 2026 14:25:37 +0100
Subject: [PATCH 03/25] Update yarn.lock

---
 yarn.lock | 31 +------------------------------
 1 file changed, 1 insertion(+), 30 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index e27f6a8165d..05f90135dad 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -45110,15 +45110,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"use-sync-external-store@npm:1.2.2":
-  version: 1.2.2
-  resolution: "use-sync-external-store@npm:1.2.2"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 10c0/23b1597c10adf15b26ade9e8c318d8cc0abc9ec0ab5fc7ca7338da92e89c2536abd150a5891bf076836c352fdfa104fc7231fb48f806fd9960e0cbe03601abaf
-  languageName: node
-  linkType: hard
-
 "use-sync-external-store@npm:^1.2.2, use-sync-external-store@npm:^1.4.0, use-sync-external-store@npm:^1.5.0":
   version: 1.6.0
   resolution: "use-sync-external-store@npm:1.6.0"
@@ -46993,7 +46984,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"zustand@npm:^4.4.0":
+"zustand@npm:^4.4.0, zustand@npm:^4.4.1":
   version: 4.5.7
   resolution: "zustand@npm:4.5.7"
   dependencies:
@@ -47013,26 +47004,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"zustand@npm:^4.4.1":
-  version: 4.5.5
-  resolution: "zustand@npm:4.5.5"
-  dependencies:
-    use-sync-external-store: "npm:1.2.2"
-  peerDependencies:
-    "@types/react": ">=16.8"
-    immer: ">=9.0.6"
-    react: ">=16.8"
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-    immer:
-      optional: true
-    react:
-      optional: true
-  checksum: 10c0/d04469d76b29c7e4070da269886de4efdadedd3d3824dc2a06ac4ff62e3b5877f925e927afe7382de651829872b99adec48082f1bd69fe486149be666345e626
-  languageName: node
-  linkType: hard
-
 "zwitch@npm:^2.0.0":
   version: 2.0.4
   resolution: "zwitch@npm:2.0.4"

From f8c5cbb454b2c2415b3797947de483572d5c73e0 Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Sat, 7 Mar 2026 20:35:50 +0100
Subject: [PATCH 04/25] H-5655: Fix selection conflicts and multi-node drag,
 add integration tests
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../petrinaut/src/state/editor-provider.tsx   |   9 +-
 .../SDCPN/hooks/use-apply-node-changes.ts     |  72 +--
 .../sdcpn-view-integration.browser.test.tsx   | 606 ++++++++++++++++++
 .../views/SDCPN/sdcpn-view.browser.test.tsx   | 296 ++++++++-
 .../petrinaut/src/views/SDCPN/sdcpn-view.tsx  |  30 +-
 .../petrinaut/vitest.browser.config.ts        |   5 +-
 6 files changed, 926 insertions(+), 92 deletions(-)
 create mode 100644 libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view-integration.browser.test.tsx

diff --git a/libs/@hashintel/petrinaut/src/state/editor-provider.tsx b/libs/@hashintel/petrinaut/src/state/editor-provider.tsx
index 49ac9ad2867..ceef918381b 100644
--- a/libs/@hashintel/petrinaut/src/state/editor-provider.tsx
+++ b/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;
diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/hooks/use-apply-node-changes.ts b/libs/@hashintel/petrinaut/src/views/SDCPN/hooks/use-apply-node-changes.ts
index 3373e0c2985..e8534825f5e 100644
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/hooks/use-apply-node-changes.ts
+++ b/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(() => ({}));
     }
   };
 }
diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view-integration.browser.test.tsx b/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view-integration.browser.test.tsx
new file mode 100644
index 00000000000..19fa7840110
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view-integration.browser.test.tsx
@@ -0,0 +1,606 @@
+/**
+ * Integration tests for SDCPNView using the real EditorProvider.
+ *
+ * Only two contexts are explicitly provided:
+ * - EditorProvider (real) — manages selection, dragging state, cursor mode, etc.
+ * - SDCPNContext (controlled mock) — supplies initial SDCPN data and records mutations.
+ *
+ * All other contexts (PlaybackContext, SimulationContext, UserSettingsContext,
+ * MonacoContext, etc.) fall through to their default `createContext` values.
+ */
+import "@xyflow/react/dist/style.css";
+import "../../index.css";
+
+import { fireEvent } from "@testing-library/dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { render } from "vitest-browser-react";
+
+import type { SDCPN } from "../../core/types/sdcpn";
+import { EditorProvider } from "../../state/editor-provider";
+import {
+  SDCPNContext,
+  type SDCPNContextValue,
+} from "../../state/sdcpn-context";
+import { SDCPNView } from "./sdcpn-view";
+
+// ---------------------------------------------------------------------------
+// Test data
+// ---------------------------------------------------------------------------
+
+function createTestSDCPN(overrides?: Partial<SDCPN>): SDCPN {
+  return {
+    places: [
+      {
+        id: "place__1",
+        name: "PlaceA",
+        colorId: null,
+        dynamicsEnabled: false,
+        differentialEquationId: null,
+        x: 100,
+        y: 100,
+      },
+      {
+        id: "place__2",
+        name: "PlaceB",
+        colorId: null,
+        dynamicsEnabled: false,
+        differentialEquationId: null,
+        x: 400,
+        y: 100,
+      },
+    ],
+    transitions: [
+      {
+        id: "transition__1",
+        name: "TransitionA",
+        inputArcs: [],
+        outputArcs: [],
+        lambdaType: "predicate",
+        lambdaCode: "",
+        transitionKernelCode: "",
+        x: 250,
+        y: 250,
+      },
+    ],
+    types: [],
+    differentialEquations: [],
+    parameters: [],
+    ...overrides,
+  };
+}
+
+function createMockSDCPNContext(
+  sdcpn: SDCPN,
+  overrides?: Partial<SDCPNContextValue>,
+): SDCPNContextValue {
+  return {
+    createNewNet: vi.fn(),
+    existingNets: [],
+    loadPetriNet: vi.fn(),
+    petriNetId: "test-net",
+    petriNetDefinition: sdcpn,
+    readonly: false,
+    mutatePetriNetDefinition: vi.fn(),
+    setTitle: vi.fn(),
+    title: "Test Net",
+    addPlace: vi.fn(),
+    updatePlace: vi.fn(),
+    updatePlacePosition: vi.fn(),
+    removePlace: vi.fn(),
+    addTransition: vi.fn(),
+    updateTransition: vi.fn(),
+    updateTransitionPosition: vi.fn(),
+    removeTransition: vi.fn(),
+    addArc: vi.fn(),
+    removeArc: vi.fn(),
+    updateArcWeight: vi.fn(),
+    addType: vi.fn(),
+    updateType: vi.fn(),
+    removeType: vi.fn(),
+    addDifferentialEquation: vi.fn(),
+    updateDifferentialEquation: vi.fn(),
+    removeDifferentialEquation: vi.fn(),
+    addParameter: vi.fn(),
+    updateParameter: vi.fn(),
+    removeParameter: vi.fn(),
+    getItemType: vi.fn((id: string) => {
+      if (id.startsWith("place")) {
+        return "place";
+      }
+      if (id.startsWith("transition")) {
+        return "transition";
+      }
+      if (id.startsWith("$A_")) {
+        return "arc";
+      }
+      return null;
+    }),
+    deleteItemsByIds: vi.fn(),
+    layoutGraph: vi.fn(async () => {}),
+    ...overrides,
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Test harness
+// ---------------------------------------------------------------------------
+
+/**
+ * Render SDCPNView wrapped in:
+ * - The **real** EditorProvider (manages selection, dragging, cursor mode, etc.)
+ * - A controlled SDCPNContext (initialised from `sdcpn`, mutations tracked via vi.fn())
+ *
+ * All other contexts use their default createContext values.
+ */
+const renderIntegration = (opts?: {
+  sdcpn?: SDCPN;
+  sdcpnOverrides?: Partial<SDCPNContextValue>;
+}) => {
+  const sdcpn = opts?.sdcpn ?? createTestSDCPN();
+  const sdcpnCtx = createMockSDCPNContext(sdcpn, opts?.sdcpnOverrides);
+
+  const result = render(
+    <SDCPNContext value={sdcpnCtx}>
+      <EditorProvider>
+        <div style={{ width: 800, height: 600 }}>
+          <SDCPNView />
+        </div>
+      </EditorProvider>
+    </SDCPNContext>,
+  );
+
+  return { result, sdcpnCtx };
+};
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+async function waitForNodes(expectedCount: number) {
+  await expect
+    .poll(() => document.querySelectorAll(".react-flow__node").length, {
+      timeout: 5_000,
+      message: `Expected ${expectedCount} rendered nodes`,
+    })
+    .toBe(expectedCount);
+}
+
+function getNodeRect(id: string) {
+  const el = document.querySelector(`[data-id="${id}"]`) as HTMLElement;
+  return el.getBoundingClientRect();
+}
+
+/**
+ * Simulate dragging a ReactFlow node via native mouse events.
+ * d3-drag listens for mousedown on the node element, then
+ * mousemove/mouseup on `event.view` (window).
+ *
+ * Returns a `release()` function so callers can assert mid-drag state
+ * before ending the drag.
+ */
+const dragNode = (
+  nodeEl: Element,
+  startX: number,
+  startY: number,
+  endX: number,
+  endY: number,
+  steps = 5,
+) => {
+  fireEvent.mouseDown(nodeEl, {
+    clientX: startX,
+    clientY: startY,
+    button: 0,
+    view: window,
+  });
+
+  const dx = endX - startX;
+  const dy = endY - startY;
+
+  for (let i = 1; i <= steps; i++) {
+    fireEvent.mouseMove(window, {
+      clientX: startX + (dx * i) / steps,
+      clientY: startY + (dy * i) / steps,
+      button: 0,
+      view: window,
+    });
+  }
+
+  return {
+    release() {
+      fireEvent.mouseUp(window, {
+        clientX: endX,
+        clientY: endY,
+        button: 0,
+        view: window,
+      });
+    },
+  };
+};
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe("SDCPNView (integration)", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe("node selection via click", () => {
+    it("selects a node on click (visible via ReactFlow selected class)", async () => {
+      renderIntegration();
+      await waitForNodes(3);
+
+      const node = document.querySelector('[data-id="place__1"]')!;
+      fireEvent.click(node);
+
+      // The real EditorProvider updates selection → mapper sets selected: true
+      // → ReactFlow applies the `selected` class on re-render.
+      await expect
+        .poll(
+          () =>
+            document
+              .querySelector('[data-id="place__1"]')
+              ?.classList.contains("selected"),
+          { timeout: 3_000 },
+        )
+        .toBe(true);
+    });
+
+    it("ctrl+click toggles a second node into the selection", async () => {
+      renderIntegration();
+      await waitForNodes(3);
+
+      // Select first node
+      fireEvent.click(document.querySelector('[data-id="place__1"]')!);
+      await expect
+        .poll(
+          () =>
+            document
+              .querySelector('[data-id="place__1"]')
+              ?.classList.contains("selected"),
+          { timeout: 3_000 },
+        )
+        .toBe(true);
+
+      // Hold Meta key so ReactFlow's useKeyPress sets multiSelectionActive = true,
+      // then click the second node, then release Meta.
+      // Use native dispatchEvent since fireEvent may not trigger listeners on window reliably.
+      window.dispatchEvent(
+        new KeyboardEvent("keydown", {
+          key: "Meta",
+          code: "MetaLeft",
+          metaKey: true,
+          bubbles: true,
+        }),
+      );
+
+      // Wait for React to process the key press and update multiSelectionActive
+      await new Promise((r) => setTimeout(r, 100));
+
+      fireEvent.click(document.querySelector('[data-id="transition__1"]')!, {
+        metaKey: true,
+      });
+
+      window.dispatchEvent(
+        new KeyboardEvent("keyup", {
+          key: "Meta",
+          code: "MetaLeft",
+          metaKey: false,
+          bubbles: true,
+        }),
+      );
+
+      await expect
+        .poll(
+          () =>
+            document
+              .querySelector('[data-id="transition__1"]')
+              ?.classList.contains("selected"),
+          { timeout: 3_000 },
+        )
+        .toBe(true);
+
+      // First node should still be selected
+      expect(
+        document
+          .querySelector('[data-id="place__1"]')
+          ?.classList.contains("selected"),
+      ).toBe(true);
+    });
+
+    it("clicking a new node deselects the previous one", async () => {
+      renderIntegration();
+      await waitForNodes(3);
+
+      fireEvent.click(document.querySelector('[data-id="place__1"]')!);
+      await expect
+        .poll(
+          () =>
+            document
+              .querySelector('[data-id="place__1"]')
+              ?.classList.contains("selected"),
+          { timeout: 3_000 },
+        )
+        .toBe(true);
+
+      // Click a different node without ctrl
+      fireEvent.click(document.querySelector('[data-id="place__2"]')!);
+      await expect
+        .poll(
+          () =>
+            document
+              .querySelector('[data-id="place__2"]')
+              ?.classList.contains("selected"),
+          { timeout: 3_000 },
+        )
+        .toBe(true);
+
+      // First node should no longer be selected
+      expect(
+        document
+          .querySelector('[data-id="place__1"]')
+          ?.classList.contains("selected"),
+      ).toBe(false);
+    });
+  });
+
+  describe("pane click clears selection", () => {
+    it("clears all selected nodes when clicking empty canvas in pan mode", async () => {
+      renderIntegration();
+      await waitForNodes(3);
+
+      // Select a node first
+      fireEvent.click(document.querySelector('[data-id="place__1"]')!);
+      await expect
+        .poll(
+          () =>
+            document
+              .querySelector('[data-id="place__1"]')
+              ?.classList.contains("selected"),
+          { timeout: 3_000 },
+        )
+        .toBe(true);
+
+      // Click the pane (EditorProvider defaults to pan cursor mode)
+      const pane = document.querySelector(".react-flow__pane")!;
+      fireEvent.click(pane);
+
+      await expect
+        .poll(
+          () =>
+            document
+              .querySelector('[data-id="place__1"]')
+              ?.classList.contains("selected"),
+          { timeout: 3_000 },
+        )
+        .toBe(false);
+    });
+  });
+
+  describe("single-node drag commits position", () => {
+    it("updates the SDCPN store position after dragging a node", async () => {
+      const { sdcpnCtx } = renderIntegration();
+      await waitForNodes(3);
+
+      const nodeEl = document.querySelector('[data-id="place__1"]')!;
+      const rect = getNodeRect("place__1");
+      const startX = rect.left + rect.width / 2;
+      const startY = rect.top + rect.height / 2;
+
+      const drag = dragNode(
+        nodeEl,
+        startX,
+        startY,
+        startX + 90,
+        startY + 45,
+        6,
+      );
+      drag.release();
+
+      await expect
+        .poll(
+          () =>
+            (sdcpnCtx.updatePlacePosition as ReturnType<typeof vi.fn>).mock
+              .calls.length,
+          { timeout: 3_000, message: "updatePlacePosition should be called" },
+        )
+        .toBeGreaterThan(0);
+
+      // Verify only place__1 was updated
+      const calls = (sdcpnCtx.updatePlacePosition as ReturnType<typeof vi.fn>)
+        .mock.calls;
+      const place1Calls = calls.filter(
+        (call: unknown[]) => call[0] === "place__1",
+      );
+      const place2Calls = calls.filter(
+        (call: unknown[]) => call[0] === "place__2",
+      );
+      expect(place1Calls.length).toBeGreaterThan(0);
+      expect(place2Calls).toHaveLength(0);
+    });
+  });
+
+  describe("multi-node drag", () => {
+    it("commits positions for all selected nodes and preserves relative distances", async () => {
+      const { sdcpnCtx } = renderIntegration();
+      await waitForNodes(3);
+
+      // Step 1: Select place__1
+      fireEvent.click(document.querySelector('[data-id="place__1"]')!);
+      await expect
+        .poll(
+          () =>
+            document
+              .querySelector('[data-id="place__1"]')
+              ?.classList.contains("selected"),
+          { timeout: 3_000 },
+        )
+        .toBe(true);
+
+      // Step 2: Hold Meta, click transition__1 to add to selection, release Meta
+      window.dispatchEvent(
+        new KeyboardEvent("keydown", {
+          key: "Meta",
+          code: "MetaLeft",
+          metaKey: true,
+          bubbles: true,
+        }),
+      );
+      await new Promise((r) => setTimeout(r, 100));
+
+      fireEvent.click(document.querySelector('[data-id="transition__1"]')!, {
+        metaKey: true,
+      });
+
+      window.dispatchEvent(
+        new KeyboardEvent("keyup", {
+          key: "Meta",
+          code: "MetaLeft",
+          metaKey: false,
+          bubbles: true,
+        }),
+      );
+
+      await expect
+        .poll(
+          () =>
+            document
+              .querySelector('[data-id="transition__1"]')
+              ?.classList.contains("selected"),
+          { timeout: 3_000 },
+        )
+        .toBe(true);
+
+      // Record initial screen positions
+      const initialPlace1 = getNodeRect("place__1");
+      const initialPlace2 = getNodeRect("place__2");
+      const initialTrans1 = getNodeRect("transition__1");
+
+      const initialScreenDx = initialTrans1.left - initialPlace1.left;
+      const initialScreenDy = initialTrans1.top - initialPlace1.top;
+
+      // Step 3: Drag place__1 (selected) from its center
+      const nodeEl = document.querySelector('[data-id="place__1"]')!;
+      const startX = initialPlace1.left + initialPlace1.width / 2;
+      const startY = initialPlace1.top + initialPlace1.height / 2;
+      const dragDx = 105;
+      const dragDy = 60;
+
+      const drag = dragNode(
+        nodeEl,
+        startX,
+        startY,
+        startX + dragDx,
+        startY + dragDy,
+        8,
+      );
+
+      // Step 4: Verify DURING the drag — selected nodes moved
+      await expect
+        .poll(
+          () => {
+            const rect = getNodeRect("place__1");
+            return Math.abs(rect.left - initialPlace1.left);
+          },
+          { timeout: 3_000, message: "place__1 should move during drag" },
+        )
+        .toBeGreaterThan(10);
+
+      // Unselected node should not have moved significantly
+      const place2During = getNodeRect("place__2");
+      expect(Math.abs(place2During.left - initialPlace2.left)).toBeLessThan(20);
+      expect(Math.abs(place2During.top - initialPlace2.top)).toBeLessThan(20);
+
+      // Selected nodes should maintain relative distance during drag
+      const place1During = getNodeRect("place__1");
+      const trans1During = getNodeRect("transition__1");
+      expect(
+        Math.abs(trans1During.left - place1During.left - initialScreenDx),
+      ).toBeLessThan(5);
+      expect(
+        Math.abs(trans1During.top - place1During.top - initialScreenDy),
+      ).toBeLessThan(5);
+
+      // Step 5: Release the drag
+      drag.release();
+
+      // Step 6: Verify AFTER the drag — positions committed to SDCPN store
+      await expect
+        .poll(
+          () =>
+            (sdcpnCtx.updatePlacePosition as ReturnType<typeof vi.fn>).mock
+              .calls.length,
+          { timeout: 3_000, message: "updatePlacePosition should be called" },
+        )
+        .toBeGreaterThan(0);
+
+      expect(sdcpnCtx.updateTransitionPosition).toHaveBeenCalledWith(
+        "transition__1",
+        expect.objectContaining({
+          x: expect.any(Number),
+          y: expect.any(Number),
+        }),
+      );
+
+      // place__1 committed
+      const placeCalls = (
+        sdcpnCtx.updatePlacePosition as ReturnType<typeof vi.fn>
+      ).mock.calls.filter((call: unknown[]) => call[0] === "place__1");
+      expect(placeCalls.length).toBeGreaterThan(0);
+
+      // place__2 NOT committed
+      const place2Calls = (
+        sdcpnCtx.updatePlacePosition as ReturnType<typeof vi.fn>
+      ).mock.calls.filter((call: unknown[]) => call[0] === "place__2");
+      expect(place2Calls).toHaveLength(0);
+
+      // Verify relative distance preserved in committed SDCPN positions.
+      // Original SDCPN centers: place__1 (100,100), transition__1 (250,250)
+      // Distance: dx=150, dy=150
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      const lastPlacePos: { x: number; y: number } = placeCalls.at(-1)![1];
+      const transCalls = (
+        sdcpnCtx.updateTransitionPosition as ReturnType<typeof vi.fn>
+      ).mock.calls.filter((call: unknown[]) => call[0] === "transition__1");
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      const lastTransPos: { x: number; y: number } = transCalls.at(-1)![1];
+
+      const committedDx = lastTransPos.x - lastPlacePos.x;
+      const committedDy = lastTransPos.y - lastPlacePos.y;
+      expect(committedDx).toBeCloseTo(150, 0);
+      expect(committedDy).toBeCloseTo(150, 0);
+    });
+  });
+
+  describe("keyboard delete", () => {
+    it("deletes selected nodes via Delete key", async () => {
+      const { sdcpnCtx } = renderIntegration();
+      await waitForNodes(3);
+
+      // Select a node
+      fireEvent.click(document.querySelector('[data-id="place__1"]')!);
+      await expect
+        .poll(
+          () =>
+            document
+              .querySelector('[data-id="place__1"]')
+              ?.classList.contains("selected"),
+          { timeout: 3_000 },
+        )
+        .toBe(true);
+
+      // Press Delete
+      const container = document.querySelector(".react-flow")?.parentElement;
+      expect(container).toBeTruthy();
+      fireEvent.keyDown(container!, { key: "Delete" });
+
+      expect(sdcpnCtx.deleteItemsByIds).toHaveBeenCalled();
+
+      // The deleted set should contain place__1
+      const deletedSet = (sdcpnCtx.deleteItemsByIds as ReturnType<typeof vi.fn>)
+        .mock.calls[0]![0] as Set<string>;
+      expect(deletedSet.has("place__1")).toBe(true);
+    });
+  });
+});
diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.browser.test.tsx b/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.browser.test.tsx
index c14618a3246..b54baedad37 100644
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.browser.test.tsx
+++ b/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.browser.test.tsx
@@ -1,6 +1,8 @@
 import "@xyflow/react/dist/style.css";
+import "../../index.css";
 
 import { fireEvent } from "@testing-library/dom";
+import { useState } from "react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { render } from "vitest-browser-react";
 
@@ -14,6 +16,7 @@ import {
   type SimulationContextValue,
 } from "../../simulation/context";
 import {
+  type DraggingStateByNodeId,
   EditorContext,
   type EditorContextValue,
   initialEditorState,
@@ -273,6 +276,94 @@ function renderSDCPNView(opts?: {
   return { result, editorCtx, sdcpnCtx, userSettingsCtx };
 }
 
+/**
+ * Render SDCPNView with a stateful EditorContext for dragging tests.
+ *
+ * The dragging state is managed with real `useState` so that
+ * `useApplyNodeChanges` can accumulate dragging positions across renders
+ * and commit them on drag end.
+ */
+function renderStatefulDragTest(opts: {
+  sdcpn: SDCPN;
+  selection: SelectionMap;
+  userSettingsOverrides?: Partial<UserSettingsContextValue>;
+}) {
+  const sdcpnCtx = createMockSDCPNContext(opts.sdcpn);
+
+  // Create stable mock functions (not recreated on re-render)
+  const editorMocks = {
+    setGlobalMode: vi.fn(),
+    setEditionMode: vi.fn(),
+    setCursorMode: vi.fn(),
+    setLeftSidebarOpen: vi.fn(),
+    setLeftSidebarWidth: vi.fn(),
+    setPropertiesPanelWidth: vi.fn(),
+    setBottomPanelOpen: vi.fn(),
+    toggleBottomPanel: vi.fn(),
+    setBottomPanelHeight: vi.fn(),
+    setActiveBottomPanelTab: vi.fn(),
+    setSelection: vi.fn(),
+    selectItem: vi.fn(),
+    toggleItem: vi.fn(),
+    addToSelection: vi.fn(),
+    removeFromSelection: vi.fn(),
+    clearSelection: vi.fn(),
+    focusNode: vi.fn(),
+    registerFocusNode: vi.fn(),
+    collapseAllPanels: vi.fn(),
+    setTimelineChartType: vi.fn(),
+    triggerPanelAnimation: vi.fn(),
+    __reinitialize: vi.fn(),
+  };
+
+  const selection = opts.selection;
+
+  const StatefulEditorProvider = ({
+    children,
+  }: {
+    children: React.ReactNode;
+  }) => {
+    const [draggingState, setDraggingState] = useState<DraggingStateByNodeId>(
+      {},
+    );
+
+    const ctx: EditorContextValue = {
+      ...initialEditorState,
+      cursorMode: "select",
+      selection,
+      draggingStateByNodeId: draggingState,
+      ...editorMocks,
+      setDraggingStateByNodeId: setDraggingState,
+      updateDraggingStateByNodeId: (updater) => {
+        setDraggingState(updater);
+      },
+      resetDraggingState: () => setDraggingState({}),
+    };
+
+    return <EditorContext value={ctx}>{children}</EditorContext>;
+  };
+
+  const userSettingsCtx = createMockUserSettings(opts.userSettingsOverrides);
+
+  const result = render(
+    <UserSettingsContext value={userSettingsCtx}>
+      <SimulationContext value={createMockSimulationContext()}>
+        <PlaybackContext value={createMockPlaybackContext()}>
+          <SDCPNContext value={sdcpnCtx}>
+            <StatefulEditorProvider>
+              <div style={{ width: 800, height: 600 }}>
+                <SDCPNView />
+              </div>
+            </StatefulEditorProvider>
+          </SDCPNContext>
+        </PlaybackContext>
+      </SimulationContext>
+    </UserSettingsContext>,
+  );
+
+  return { result, sdcpnCtx, editorMocks };
+}
+
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------
@@ -336,6 +427,57 @@ function dragSelectOnPane(
   });
 }
 
+/** Get the bounding rect of a ReactFlow node by data-id. */
+function getNodeRect(id: string) {
+  const el = document.querySelector(`[data-id="${id}"]`) as HTMLElement;
+  return el.getBoundingClientRect();
+}
+
+/**
+ * Simulate dragging a ReactFlow node via native mouse events.
+ * d3-drag (used by ReactFlow) listens for mousedown on the node,
+ * then mousemove/mouseup on `event.view` (window).
+ */
+function dragNode(
+  nodeEl: Element,
+  startX: number,
+  startY: number,
+  endX: number,
+  endY: number,
+  steps = 5,
+) {
+  fireEvent.mouseDown(nodeEl, {
+    clientX: startX,
+    clientY: startY,
+    button: 0,
+    view: window,
+  });
+
+  const dx = endX - startX;
+  const dy = endY - startY;
+
+  for (let i = 1; i <= steps; i++) {
+    fireEvent.mouseMove(window, {
+      clientX: startX + (dx * i) / steps,
+      clientY: startY + (dy * i) / steps,
+      button: 0,
+      view: window,
+    });
+  }
+
+  // Return without mouseUp so callers can assert mid-drag state
+  return {
+    release() {
+      fireEvent.mouseUp(window, {
+        clientX: endX,
+        clientY: endY,
+        button: 0,
+        view: window,
+      });
+    },
+  };
+}
+
 // ---------------------------------------------------------------------------
 // Tests
 // ---------------------------------------------------------------------------
@@ -357,31 +499,21 @@ describe("SDCPNView", () => {
     });
   });
 
-  describe("node click dispatches to EditorContext", () => {
-    it("calls selectItem when a node is clicked", async () => {
+  describe("node click dispatches selection via onNodesChange", () => {
+    it("calls setSelection when a node is clicked", async () => {
       const { editorCtx } = renderSDCPNView();
       await waitForNodes(3);
 
       const node = document.querySelector('[data-id="place__1"]')!;
       fireEvent.click(node);
 
-      expect(editorCtx.selectItem).toHaveBeenCalledWith({
-        type: "place",
-        id: "place__1",
-      });
-    });
-
-    it("calls toggleItem on ctrl+click", async () => {
-      const { editorCtx } = renderSDCPNView();
-      await waitForNodes(3);
-
-      const node = document.querySelector('[data-id="place__1"]')!;
-      fireEvent.click(node, { ctrlKey: true });
-
-      expect(editorCtx.toggleItem).toHaveBeenCalledWith({
-        type: "place",
-        id: "place__1",
-      });
+      // Selection now flows through ReactFlow's handleNodeClick → onNodesChange
+      // → useApplyNodeChanges → setSelection
+      expect(editorCtx.setSelection).toHaveBeenCalled();
+      const lastCall = (
+        editorCtx.setSelection as ReturnType<typeof vi.fn>
+      ).mock.calls.at(-1)![0] as Map<string, unknown>;
+      expect(lastCall.has("place__1")).toBe(true);
     });
   });
 
@@ -545,4 +677,130 @@ describe("SDCPNView", () => {
       expect(editorCtx.clearSelection).toHaveBeenCalled();
     });
   });
+
+  describe("multi-node drag", () => {
+    it("commits positions for all selected nodes and preserves relative distances", async () => {
+      // SDCPN centers: place__1 (100,100), place__2 (400,100), transition__1 (250,250)
+      const sdcpn = createTestSDCPN();
+
+      // Pre-select place__1 and transition__1 (but NOT place__2)
+      const selection: SelectionMap = new Map([
+        ["place__1", { type: "place", id: "place__1" }],
+        ["transition__1", { type: "transition", id: "transition__1" }],
+      ]);
+
+      const { sdcpnCtx } = renderStatefulDragTest({
+        sdcpn,
+        selection,
+        userSettingsOverrides: { compactNodes: true },
+      });
+
+      await waitForNodes(3);
+
+      // Record initial screen positions
+      const initialPlace1 = getNodeRect("place__1");
+      const initialPlace2 = getNodeRect("place__2");
+      const initialTrans1 = getNodeRect("transition__1");
+
+      // Distance between the two selected nodes (screen coords)
+      const initialScreenDx = initialTrans1.left - initialPlace1.left;
+      const initialScreenDy = initialTrans1.top - initialPlace1.top;
+
+      // Start dragging place__1 from its center
+      const nodeEl = document.querySelector('[data-id="place__1"]')!;
+      const startX = initialPlace1.left + initialPlace1.width / 2;
+      const startY = initialPlace1.top + initialPlace1.height / 2;
+      const dragDx = 105; // ~7 grid squares (15px grid)
+      const dragDy = 60; // ~4 grid squares
+
+      const drag = dragNode(
+        nodeEl,
+        startX,
+        startY,
+        startX + dragDx,
+        startY + dragDy,
+        8,
+      );
+
+      // -- Verify DURING the drag --
+      // Wait for place__1 to visually move
+      await expect
+        .poll(
+          () => {
+            const rect = getNodeRect("place__1");
+            return Math.abs(rect.left - initialPlace1.left);
+          },
+          { timeout: 3_000, message: "place__1 should move during drag" },
+        )
+        .toBeGreaterThan(10);
+
+      // Unselected node (place__2) should NOT have moved significantly.
+      // Allow up to one snap grid unit (15px) for initial grid-snap adjustment.
+      const place2During = getNodeRect("place__2");
+      expect(Math.abs(place2During.left - initialPlace2.left)).toBeLessThan(20);
+      expect(Math.abs(place2During.top - initialPlace2.top)).toBeLessThan(20);
+
+      // Selected nodes should maintain relative distance during drag
+      const place1During = getNodeRect("place__1");
+      const trans1During = getNodeRect("transition__1");
+      const screenDxDuring = trans1During.left - place1During.left;
+      const screenDyDuring = trans1During.top - place1During.top;
+      expect(Math.abs(screenDxDuring - initialScreenDx)).toBeLessThan(5);
+      expect(Math.abs(screenDyDuring - initialScreenDy)).toBeLessThan(5);
+
+      // -- Release the drag --
+      drag.release();
+
+      // -- Verify AFTER the drag --
+      // Both selected nodes should have their positions committed to the SDCPN store.
+      await expect
+        .poll(
+          () =>
+            (sdcpnCtx.updatePlacePosition as ReturnType<typeof vi.fn>).mock
+              .calls.length,
+          { timeout: 3_000, message: "updatePlacePosition should be called" },
+        )
+        .toBeGreaterThan(0);
+
+      expect(sdcpnCtx.updateTransitionPosition).toHaveBeenCalledWith(
+        "transition__1",
+        expect.objectContaining({
+          x: expect.any(Number),
+          y: expect.any(Number),
+        }),
+      );
+
+      // Verify that place__1 was committed
+      const placeCalls = (
+        sdcpnCtx.updatePlacePosition as ReturnType<typeof vi.fn>
+      ).mock.calls.filter((call: unknown[]) => call[0] === "place__1");
+      expect(placeCalls.length).toBeGreaterThan(0);
+
+      // Verify that place__2 was NOT committed (it was not selected/dragged)
+      const place2Calls = (
+        sdcpnCtx.updatePlacePosition as ReturnType<typeof vi.fn>
+      ).mock.calls.filter((call: unknown[]) => call[0] === "place__2");
+      expect(place2Calls).toHaveLength(0);
+
+      // Verify relative distance is preserved in committed SDCPN positions.
+      // Original SDCPN centers: place__1 (100,100), transition__1 (250,250)
+      // Distance: dx=150, dy=150
+      const lastPlacePos = placeCalls.at(-1)![1] as {
+        x: number;
+        y: number;
+      };
+      const transCalls = (
+        sdcpnCtx.updateTransitionPosition as ReturnType<typeof vi.fn>
+      ).mock.calls.filter((call: unknown[]) => call[0] === "transition__1");
+      const lastTransPos = transCalls.at(-1)![1] as {
+        x: number;
+        y: number;
+      };
+
+      const committedDx = lastTransPos.x - lastPlacePos.x;
+      const committedDy = lastTransPos.y - lastPlacePos.y;
+      expect(committedDx).toBeCloseTo(150, 0);
+      expect(committedDy).toBeCloseTo(150, 0);
+    });
+  });
 });
diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.tsx b/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.tsx
index 84f59ba2f9e..6b02969d3fe 100644
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.tsx
+++ b/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.tsx
@@ -12,7 +12,6 @@ import {
 } from "../../core/default-codes";
 import { EditorContext } from "../../state/editor-context";
 import { SDCPNContext } from "../../state/sdcpn-context";
-import type { SelectionItem } from "../../state/selection";
 import { useIsReadOnly } from "../../state/use-is-read-only";
 import { UserSettingsContext } from "../../state/user-settings-context";
 import { Arc } from "./components/arc";
@@ -24,7 +23,7 @@ import { TransitionNode } from "./components/transition-node";
 import { ViewportControls } from "./components/viewport-controls";
 import { useApplyNodeChanges } from "./hooks/use-apply-node-changes";
 import { useSdcpnToReactFlow } from "./hooks/use-sdcpn-to-react-flow";
-import type { NodeType, PetrinautReactFlowInstance } from "./reactflow-types";
+import type { PetrinautReactFlowInstance } from "./reactflow-types";
 
 const SNAP_GRID_SIZE = 15;
 
@@ -100,7 +99,6 @@ export const SDCPNView: React.FC = () => {
     addTransition,
     addArc,
     deleteItemsByIds,
-    getItemType,
     readonly,
   } = use(SDCPNContext);
 
@@ -110,7 +108,6 @@ export const SDCPNView: React.FC = () => {
     cursorMode,
     selection,
     selectItem,
-    toggleItem,
     clearSelection,
   } = use(EditorContext);
 
@@ -213,18 +210,10 @@ export const SDCPNView: React.FC = () => {
     setEditionMode("cursor");
   }
 
-  function onNodeClick(event: React.MouseEvent, node: NodeType) {
-    const itemType = getItemType(node.id);
-    if (!itemType) {
-      return;
-    }
-    const item: SelectionItem = { type: itemType, id: node.id };
-    if (event.metaKey || event.ctrlKey) {
-      toggleItem(item);
-    } else {
-      selectItem(item);
-    }
-  }
+  // Node click selection is handled by ReactFlow's internal handleNodeClick
+  // which fires select changes through onNodesChange → useApplyNodeChanges.
+  // We don't need an onNodeClick handler for selection — doing so would
+  // conflict with ReactFlow's internal selection management.
 
   function onPaneClick(event: React.MouseEvent) {
     if (!reactFlowInstance || !canvasContainer.current) {
@@ -360,16 +349,7 @@ export const SDCPNView: React.FC = () => {
         onEdgesChange={isReadonly ? undefined : applyNodeChanges}
         onConnect={isReadonly ? undefined : onConnect}
         onInit={onInit}
-        onNodeClick={onNodeClick}
         onPaneClick={onPaneClick}
-        onEdgeClick={(event, edge) => {
-          const item: SelectionItem = { type: "arc", id: edge.id };
-          if (event.metaKey || event.ctrlKey) {
-            toggleItem(item);
-          } else {
-            selectItem(item);
-          }
-        }}
         onDrop={isReadonly ? undefined : onDrop}
         onDragOver={isReadonly ? undefined : onDragOver}
         defaultViewport={{ x: 0, y: 0, zoom: 1 }}
diff --git a/libs/@hashintel/petrinaut/vitest.browser.config.ts b/libs/@hashintel/petrinaut/vitest.browser.config.ts
index ea269450cbe..48f9bd2a825 100644
--- a/libs/@hashintel/petrinaut/vitest.browser.config.ts
+++ b/libs/@hashintel/petrinaut/vitest.browser.config.ts
@@ -10,6 +10,9 @@ export default defineConfig({
       },
     }),
   ],
+  // css: {
+  //   postcss: "./postcss.config.cjs",
+  // },
   define: {
     "process.versions": JSON.stringify({ pnp: undefined }),
   },
@@ -21,7 +24,7 @@ export default defineConfig({
     browser: {
       enabled: true,
       provider: playwright(),
-      headless: true,
+      // headless: true,
       instances: [{ browser: "chromium" }],
     },
   },

From b0543efb220914483b7630d7c24e1b118551745f Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Mon, 9 Mar 2026 17:20:51 +0100
Subject: [PATCH 05/25] H-5655: Batch multi-node drag position commits into
 single atomic mutation

Previously each dragged node's position was committed via a separate
mutatePetriNetDefinition call, causing a visual snap-back glitch when the
dragging state was cleared before all positions were flushed. Now all
position updates are applied in one mutatePetriNetDefinition call.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../SDCPN/hooks/use-apply-node-changes.ts     | 45 +++++++-----
 .../sdcpn-view-integration.browser.test.tsx   | 70 +++++++++----------
 2 files changed, 63 insertions(+), 52 deletions(-)

diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/hooks/use-apply-node-changes.ts b/libs/@hashintel/petrinaut/src/views/SDCPN/hooks/use-apply-node-changes.ts
index e8534825f5e..eba0cd0922b 100644
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/hooks/use-apply-node-changes.ts
+++ b/libs/@hashintel/petrinaut/src/views/SDCPN/hooks/use-apply-node-changes.ts
@@ -17,8 +17,7 @@ import {
  * @see https://github.com/xyflow/xyflow/blob/04055c9625cbd92cf83a2f4c340d6fae5199bfa3/packages/react/src/utils/changes.ts#L107
  */
 export function useApplyNodeChanges() {
-  const { getItemType, updatePlacePosition, updateTransitionPosition } =
-    use(SDCPNContext);
+  const { getItemType, mutatePetriNetDefinition } = use(SDCPNContext);
   const { updateDraggingStateByNodeId, setSelection, selection } =
     use(EditorContext);
   const { compactNodes } = use(UserSettingsContext);
@@ -97,22 +96,36 @@ export function useApplyNodeChanges() {
       setSelection(newSelection);
     }
 
-    // Commit final positions from drag-end changes to the SDCPN store.
+    // Commit all final positions from drag-end in a single atomic mutation
+    // so that clearing the dragging state never exposes stale SDCPN positions.
     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,
-          });
+      const commits = positionCommits.map(({ id, position }) => ({
+        id,
+        itemType: getItemType(id),
+        position,
+      }));
+
+      mutatePetriNetDefinition((sdcpn) => {
+        for (const { id, itemType, position } of commits) {
+          if (itemType === "place") {
+            for (const place of sdcpn.places) {
+              if (place.id === id) {
+                place.x = position.x + dims.place.width / 2;
+                place.y = position.y + dims.place.height / 2;
+                break;
+              }
+            }
+          } else if (itemType === "transition") {
+            for (const transition of sdcpn.transitions) {
+              if (transition.id === id) {
+                transition.x = position.x + dims.transition.width / 2;
+                transition.y = position.y + dims.transition.height / 2;
+                break;
+              }
+            }
+          }
         }
-      }
+      });
       updateDraggingStateByNodeId(() => ({}));
     }
   };
diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view-integration.browser.test.tsx b/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view-integration.browser.test.tsx
index 19fa7840110..be3fb2ae70a 100644
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view-integration.browser.test.tsx
+++ b/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view-integration.browser.test.tsx
@@ -525,49 +525,47 @@ describe("SDCPNView (integration)", () => {
       // Step 5: Release the drag
       drag.release();
 
-      // Step 6: Verify AFTER the drag — positions committed to SDCPN store
+      // Step 6: Verify AFTER the drag — positions committed atomically via
+      // a single mutatePetriNetDefinition call (batched).
+      const mutateFn = sdcpnCtx.mutatePetriNetDefinition as ReturnType<
+        typeof vi.fn
+      >;
       await expect
-        .poll(
-          () =>
-            (sdcpnCtx.updatePlacePosition as ReturnType<typeof vi.fn>).mock
-              .calls.length,
-          { timeout: 3_000, message: "updatePlacePosition should be called" },
-        )
+        .poll(() => mutateFn.mock.calls.length, {
+          timeout: 3_000,
+          message: "mutatePetriNetDefinition should be called on drag end",
+        })
         .toBeGreaterThan(0);
 
-      expect(sdcpnCtx.updateTransitionPosition).toHaveBeenCalledWith(
-        "transition__1",
-        expect.objectContaining({
-          x: expect.any(Number),
-          y: expect.any(Number),
-        }),
-      );
-
-      // place__1 committed
-      const placeCalls = (
-        sdcpnCtx.updatePlacePosition as ReturnType<typeof vi.fn>
-      ).mock.calls.filter((call: unknown[]) => call[0] === "place__1");
-      expect(placeCalls.length).toBeGreaterThan(0);
-
-      // place__2 NOT committed
-      const place2Calls = (
-        sdcpnCtx.updatePlacePosition as ReturnType<typeof vi.fn>
-      ).mock.calls.filter((call: unknown[]) => call[0] === "place__2");
-      expect(place2Calls).toHaveLength(0);
+      // Apply the last mutation to a copy of the SDCPN to inspect committed positions
+      const sdcpnCopy = structuredClone(createTestSDCPN());
+      const lastMutation = mutateFn.mock.calls.at(-1)![0] as (
+        draft: SDCPN,
+      ) => void;
+      lastMutation(sdcpnCopy);
+
+      // place__1 should have been updated
+      const place1 = sdcpnCopy.places.find((place) => place.id === "place__1")!;
+      expect(place1.x).not.toBe(100);
+      expect(place1.y).not.toBe(100);
+
+      // transition__1 should have been updated
+      const trans1 = sdcpnCopy.transitions.find(
+        (tr) => tr.id === "transition__1",
+      )!;
+      expect(trans1.x).not.toBe(250);
+      expect(trans1.y).not.toBe(250);
+
+      // place__2 should NOT have been updated (unselected)
+      const place2 = sdcpnCopy.places.find((place) => place.id === "place__2")!;
+      expect(place2.x).toBe(400);
+      expect(place2.y).toBe(100);
 
       // Verify relative distance preserved in committed SDCPN positions.
       // Original SDCPN centers: place__1 (100,100), transition__1 (250,250)
       // Distance: dx=150, dy=150
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      const lastPlacePos: { x: number; y: number } = placeCalls.at(-1)![1];
-      const transCalls = (
-        sdcpnCtx.updateTransitionPosition as ReturnType<typeof vi.fn>
-      ).mock.calls.filter((call: unknown[]) => call[0] === "transition__1");
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      const lastTransPos: { x: number; y: number } = transCalls.at(-1)![1];
-
-      const committedDx = lastTransPos.x - lastPlacePos.x;
-      const committedDy = lastTransPos.y - lastPlacePos.y;
+      const committedDx = trans1.x - place1.x;
+      const committedDy = trans1.y - place1.y;
       expect(committedDx).toBeCloseTo(150, 0);
       expect(committedDy).toBeCloseTo(150, 0);
     });

From d5dc66482bd1609cc15aa4d37a4835861f3daa29 Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Mon, 9 Mar 2026 19:16:38 +0100
Subject: [PATCH 06/25] H-5655: Fix stale selection race and restrict arc
 selection to click-only

- setSelection now accepts a functional updater so concurrent
  onNodesChange/onEdgesChange calls chain against latest state instead
  of clobbering each other via stale closures.
- Arcs are excluded from drag-to-select; a dedicated onEdgeClick handler
  makes them selectable only by direct click.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../petrinaut/src/state/editor-context.ts     |  4 +-
 .../petrinaut/src/state/editor-provider.tsx   |  8 ++-
 .../SDCPN/hooks/use-apply-node-changes.ts     | 63 ++++++++++---------
 .../petrinaut/src/views/SDCPN/sdcpn-view.tsx  |  7 +++
 4 files changed, 52 insertions(+), 30 deletions(-)

diff --git a/libs/@hashintel/petrinaut/src/state/editor-context.ts b/libs/@hashintel/petrinaut/src/state/editor-context.ts
index 95ee28f53e5..603c1226fa3 100644
--- a/libs/@hashintel/petrinaut/src/state/editor-context.ts
+++ b/libs/@hashintel/petrinaut/src/state/editor-context.ts
@@ -55,7 +55,9 @@ export type EditorActions = {
   toggleBottomPanel: () => void;
   setBottomPanelHeight: (height: number) => void;
   setActiveBottomPanelTab: (tab: BottomPanelTab) => void;
-  setSelection: (selection: SelectionMap) => void;
+  setSelection: (
+    selection: SelectionMap | ((prev: SelectionMap) => SelectionMap),
+  ) => void;
   selectItem: (item: SelectionItem) => void;
   toggleItem: (item: SelectionItem) => void;
   addToSelection: (items: SelectionItem[]) => void;
diff --git a/libs/@hashintel/petrinaut/src/state/editor-provider.tsx b/libs/@hashintel/petrinaut/src/state/editor-provider.tsx
index ceef918381b..5728960f35c 100644
--- a/libs/@hashintel/petrinaut/src/state/editor-provider.tsx
+++ b/libs/@hashintel/petrinaut/src/state/editor-provider.tsx
@@ -77,8 +77,14 @@ export const EditorProvider: React.FC<EditorProviderProps> = ({ children }) => {
       setState((prev) => ({ ...prev, bottomPanelHeight: height })),
     setActiveBottomPanelTab: (tab) =>
       setState((prev) => ({ ...prev, activeBottomPanelTab: tab })),
-    setSelection: (selection: SelectionMap) =>
+    setSelection: (
+      selectionOrUpdater: SelectionMap | ((prev: SelectionMap) => SelectionMap),
+    ) =>
       setState((prev) => {
+        const selection =
+          typeof selectionOrUpdater === "function"
+            ? selectionOrUpdater(prev.selection)
+            : selectionOrUpdater;
         const visibilityChanged =
           (prev.selection.size === 0) !== (selection.size === 0);
         if (visibilityChanged) {
diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/hooks/use-apply-node-changes.ts b/libs/@hashintel/petrinaut/src/views/SDCPN/hooks/use-apply-node-changes.ts
index eba0cd0922b..7c340fc0886 100644
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/hooks/use-apply-node-changes.ts
+++ b/libs/@hashintel/petrinaut/src/views/SDCPN/hooks/use-apply-node-changes.ts
@@ -3,7 +3,7 @@ import { use } from "react";
 
 import { EditorContext } from "../../../state/editor-context";
 import { SDCPNContext } from "../../../state/sdcpn-context";
-import type { SelectionItem, SelectionMap } from "../../../state/selection";
+import type { SelectionMap } from "../../../state/selection";
 import { UserSettingsContext } from "../../../state/user-settings-context";
 import {
   classicNodeDimensions,
@@ -18,8 +18,7 @@ import {
  */
 export function useApplyNodeChanges() {
   const { getItemType, mutatePetriNetDefinition } = use(SDCPNContext);
-  const { updateDraggingStateByNodeId, setSelection, selection } =
-    use(EditorContext);
+  const { updateDraggingStateByNodeId, setSelection } = use(EditorContext);
   const { compactNodes } = use(UserSettingsContext);
   const dims = compactNodes ? compactNodeDimensions : classicNodeDimensions;
 
@@ -30,20 +29,6 @@ export function useApplyNodeChanges() {
     }> = [];
     let selectionChanged = false;
 
-    // Check if current selection has any non-node items (types, etc.)
-    const hasNonCanvasSelection = Array.from(selection.values()).some(
-      (item) =>
-        item.type !== "place" &&
-        item.type !== "transition" &&
-        item.type !== "arc",
-    );
-
-    // If we have non-canvas items selected, clear them when ReactFlow tries to select something
-    // Otherwise, keep the existing selection and let ReactFlow modify it
-    const newSelection: SelectionMap = new Map(
-      hasNonCanvasSelection ? [] : selection,
-    );
-
     for (const change of changes) {
       if (
         // We add nodes in onDrop, we won't handle these kind of changes
@@ -58,15 +43,6 @@ export function useApplyNodeChanges() {
 
       if (change.type === "select") {
         selectionChanged = true;
-        if (change.selected && !selection.has(change.id)) {
-          const itemType = getItemType(change.id);
-          if (itemType) {
-            const item: SelectionItem = { type: itemType, id: change.id };
-            newSelection.set(change.id, item);
-          }
-        } else if (!change.selected && selection.has(change.id)) {
-          newSelection.delete(change.id);
-        }
       }
 
       if (change.type === "position") {
@@ -91,9 +67,40 @@ export function useApplyNodeChanges() {
       }
     }
 
-    // Apply selection changes to EditorStore
+    // Apply selection changes to EditorStore using a functional updater
+    // so that concurrent onNodesChange and onEdgesChange calls (which
+    // ReactFlow fires separately in the same event tick) don't clobber
+    // each other due to stale closure state.
     if (selectionChanged) {
-      setSelection(newSelection);
+      setSelection((prevSelection) => {
+        const hasNonCanvasItems = Array.from(prevSelection.values()).some(
+          (item) =>
+            item.type !== "place" &&
+            item.type !== "transition" &&
+            item.type !== "arc",
+        );
+
+        const base: SelectionMap = new Map(
+          hasNonCanvasItems ? [] : prevSelection,
+        );
+
+        for (const change of changes) {
+          if (change.type === "select") {
+            if (change.selected && !prevSelection.has(change.id)) {
+              const itemType = getItemType(change.id);
+              // Skip arcs — they are only selectable via direct click
+              // (onEdgeClick), not via drag-to-select box selection.
+              if (itemType && itemType !== "arc") {
+                base.set(change.id, { type: itemType, id: change.id });
+              }
+            } else if (!change.selected && prevSelection.has(change.id)) {
+              base.delete(change.id);
+            }
+          }
+        }
+
+        return base;
+      });
     }
 
     // Commit all final positions from drag-end in a single atomic mutation
diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.tsx b/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.tsx
index 6b02969d3fe..ca0abdf738b 100644
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.tsx
+++ b/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.tsx
@@ -215,6 +215,12 @@ export const SDCPNView: React.FC = () => {
   // We don't need an onNodeClick handler for selection — doing so would
   // conflict with ReactFlow's internal selection management.
 
+  // Edge (arc) selection is handled here instead of in applyNodeChanges,
+  // because we want arcs selectable only by click, not by drag-to-select.
+  function onEdgeClick(_event: React.MouseEvent, edge: { id: string }) {
+    selectItem({ type: "arc", id: edge.id });
+  }
+
   function onPaneClick(event: React.MouseEvent) {
     if (!reactFlowInstance || !canvasContainer.current) {
       return;
@@ -349,6 +355,7 @@ export const SDCPNView: React.FC = () => {
         onEdgesChange={isReadonly ? undefined : applyNodeChanges}
         onConnect={isReadonly ? undefined : onConnect}
         onInit={onInit}
+        onEdgeClick={isReadonly ? undefined : onEdgeClick}
         onPaneClick={onPaneClick}
         onDrop={isReadonly ? undefined : onDrop}
         onDragOver={isReadonly ? undefined : onDragOver}

From 1a1e72424d90d57c4e54e033363e4913e0653ebd Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Mon, 9 Mar 2026 19:34:36 +0100
Subject: [PATCH 07/25] H-5655: Add partial selection setting and refactor
 settings dialog

Add a `partialSelection` user setting (default true) that controls
whether drag-to-select picks up partially intersected nodes. Refactor
the viewport settings dialog to use a reusable SettingRow grid component.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/state/user-settings-context.ts        |   4 +
 .../src/state/user-settings-provider.tsx      |   2 +
 .../components/viewport-settings-dialog.tsx   | 109 +++++++++++-------
 .../views/SDCPN/sdcpn-view.browser.test.tsx   |   1 +
 .../petrinaut/src/views/SDCPN/sdcpn-view.tsx  |  12 +-
 5 files changed, 84 insertions(+), 44 deletions(-)

diff --git a/libs/@hashintel/petrinaut/src/state/user-settings-context.ts b/libs/@hashintel/petrinaut/src/state/user-settings-context.ts
index 9c0484826f8..65f6c32f9a9 100644
--- a/libs/@hashintel/petrinaut/src/state/user-settings-context.ts
+++ b/libs/@hashintel/petrinaut/src/state/user-settings-context.ts
@@ -38,6 +38,7 @@ export type UserSettings = {
   bottomPanelHeight: number;
   activeBottomPanelTab: BottomPanelTab;
   timelineChartType: TimelineChartType;
+  partialSelection: boolean;
   subViewPanels: SubViewPanelsSettings;
 };
 
@@ -54,6 +55,7 @@ export type UserSettingsActions = {
   setActiveBottomPanelTab: (value: BottomPanelTab) => void;
   setCursorMode: (value: CursorMode) => void;
   setTimelineChartType: (value: TimelineChartType) => void;
+  setPartialSelection: (value: boolean) => void;
   updateSubViewSection: (
     containerName: string,
     sectionId: string,
@@ -76,6 +78,7 @@ export const defaultUserSettings: UserSettings = {
   bottomPanelHeight: DEFAULT_BOTTOM_PANEL_HEIGHT,
   activeBottomPanelTab: "diagnostics",
   timelineChartType: "run",
+  partialSelection: true,
   subViewPanels: {},
 };
 
@@ -93,6 +96,7 @@ const DEFAULT_CONTEXT_VALUE: UserSettingsContextValue = {
   setActiveBottomPanelTab: () => {},
   setCursorMode: () => {},
   setTimelineChartType: () => {},
+  setPartialSelection: () => {},
   updateSubViewSection: () => {},
 };
 
diff --git a/libs/@hashintel/petrinaut/src/state/user-settings-provider.tsx b/libs/@hashintel/petrinaut/src/state/user-settings-provider.tsx
index 1441688bddb..a28aea5fb36 100644
--- a/libs/@hashintel/petrinaut/src/state/user-settings-provider.tsx
+++ b/libs/@hashintel/petrinaut/src/state/user-settings-provider.tsx
@@ -69,6 +69,8 @@ export const UserSettingsProvider: React.FC<React.PropsWithChildren> = ({
       setState((prev) => ({ ...prev, activeBottomPanelTab: value })),
     setTimelineChartType: (value: TimelineChartType) =>
       setState((prev) => ({ ...prev, timelineChartType: value })),
+    setPartialSelection: (value: boolean) =>
+      setState((prev) => ({ ...prev, partialSelection: value })),
     updateSubViewSection: (
       containerName: string,
       sectionId: string,
diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/components/viewport-settings-dialog.tsx b/libs/@hashintel/petrinaut/src/views/SDCPN/components/viewport-settings-dialog.tsx
index d1afd4976c9..5ca2fcb5ac2 100644
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/components/viewport-settings-dialog.tsx
+++ b/libs/@hashintel/petrinaut/src/views/SDCPN/components/viewport-settings-dialog.tsx
@@ -9,10 +9,12 @@ import type { ArcRendering } from "../../../state/user-settings-context";
 import { UserSettingsContext } from "../../../state/user-settings-context";
 
 const rowStyle = css({
-  display: "flex",
-  alignItems: "flex-start",
-  justifyContent: "space-between",
-  gap: "3",
+  display: "grid",
+  gridTemplateColumns: "[1fr auto]",
+  gridTemplateRows: "auto",
+  columnGap: "8",
+  rowGap: "1",
+  alignItems: "center",
   paddingY: "2",
 });
 
@@ -21,19 +23,41 @@ const labelStyle = css({
   fontWeight: "medium",
   lineHeight: "[1.25]",
   color: "neutral.fg.heading",
+  gridColumn: "1",
+  gridRow: "1",
+});
+
+const controlStyle = css({
+  gridColumn: "2",
+  gridRow: "[1 / -1]",
+  alignSelf: "center",
 });
 
 const descriptionStyle = css({
   fontSize: "xs",
   color: "neutral.fg.subtle",
   lineHeight: "[1.4]",
+  gridColumn: "1",
+  gridRow: "2",
 });
 
-const selectWrapperStyle = css({
+const selectStyle = css({
   width: "[160px]",
   flexShrink: "[0]",
 });
 
+const SettingRow: React.FC<{
+  label: string;
+  description?: string;
+  children: React.ReactNode;
+}> = ({ label, description, children }) => (
+  <div className={rowStyle}>
+    <span className={labelStyle}>{label}</span>
+    <div className={controlStyle}>{children}</div>
+    {description && <p className={descriptionStyle}>{description}</p>}
+  </div>
+);
+
 interface ViewportSettingsDialogProps {
   open: boolean;
   onOpenChange: (details: { open: boolean }) => void;
@@ -52,6 +76,8 @@ export const ViewportSettingsDialog: React.FC<ViewportSettingsDialogProps> = ({
     setCompactNodes,
     arcRendering,
     setArcRendering,
+    partialSelection,
+    setPartialSelection,
   } = use(UserSettingsContext);
 
   return (
@@ -60,55 +86,54 @@ export const ViewportSettingsDialog: React.FC<ViewportSettingsDialogProps> = ({
         <Dialog.Card>
           <Dialog.Header>Settings</Dialog.Header>
           <Dialog.Body>
-            <div className={rowStyle}>
-              <div>
-                <span className={labelStyle}>Animations</span>
-                <p className={descriptionStyle}>
-                  Animate panel transitions and UI interactions
-                </p>
-              </div>
+            <SettingRow
+              label="Animations"
+              description="Animate panel transitions and UI interactions"
+            >
               <Switch
                 checked={showAnimations}
                 onCheckedChange={setShowAnimations}
               />
-            </div>
-            <div className={rowStyle}>
-              <div>
-                <span className={labelStyle}>Keep panels mounted</span>
-                <p className={descriptionStyle}>
-                  Keep all panel views loaded even if not currently selected,
-                  which speeds up switching but may affect performance
-                </p>
-              </div>
+            </SettingRow>
+            <SettingRow
+              label="Keep panels mounted"
+              description="Keep hidden panels loaded in the background for faster switching"
+            >
               <Switch
                 checked={keepPanelsMounted}
                 onCheckedChange={setKeepPanelsMounted}
               />
-            </div>
-            <div className={rowStyle}>
-              <span className={labelStyle}>Compact nodes</span>
+            </SettingRow>
+            <SettingRow label="Compact nodes">
               <Switch
                 checked={compactNodes}
                 onCheckedChange={setCompactNodes}
               />
-            </div>
-            <div className={rowStyle}>
-              <span className={labelStyle}>Arcs rendering</span>
-              <div className={selectWrapperStyle}>
-                <Select
-                  value={arcRendering}
-                  onValueChange={(value) =>
-                    setArcRendering(value as ArcRendering)
-                  }
-                  options={[
-                    { value: "smoothstep", label: "Square" },
-                    { value: "bezier", label: "Bezier" },
-                    { value: "custom", label: "Adaptive Bezier" },
-                  ]}
-                  portal={false}
-                />
-              </div>
-            </div>
+            </SettingRow>
+            <SettingRow
+              label="Partial selection"
+              description="Select nodes that are only partially inside the selection box"
+            >
+              <Switch
+                checked={partialSelection}
+                onCheckedChange={setPartialSelection}
+              />
+            </SettingRow>
+            <SettingRow label="Arcs rendering">
+              <Select
+                className={selectStyle}
+                value={arcRendering}
+                onValueChange={(value) =>
+                  setArcRendering(value as ArcRendering)
+                }
+                options={[
+                  { value: "smoothstep", label: "Square" },
+                  { value: "bezier", label: "Bezier" },
+                  { value: "custom", label: "Adaptive Bezier" },
+                ]}
+                portal={false}
+              />
+            </SettingRow>
           </Dialog.Body>
         </Dialog.Card>
         <Dialog.Footer>
diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.browser.test.tsx b/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.browser.test.tsx
index b54baedad37..fc2b7e1224a 100644
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.browser.test.tsx
+++ b/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.browser.test.tsx
@@ -235,6 +235,7 @@ function createMockUserSettings(
     setActiveBottomPanelTab: vi.fn(),
     setCursorMode: vi.fn(),
     setTimelineChartType: vi.fn(),
+    setPartialSelection: vi.fn(),
     updateSubViewSection: vi.fn(),
     ...overrides,
   };
diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.tsx b/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.tsx
index ca0abdf738b..2e22491032b 100644
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.tsx
+++ b/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.tsx
@@ -2,7 +2,12 @@ import "@xyflow/react/dist/style.css";
 
 import { css } from "@hashintel/ds-helpers/css";
 import type { Connection } from "@xyflow/react";
-import { Background, ReactFlow, useReactFlow } from "@xyflow/react";
+import {
+  Background,
+  ReactFlow,
+  SelectionMode,
+  useReactFlow,
+} from "@xyflow/react";
 import { use, useEffect, useMemo, useRef, useState } from "react";
 import { v4 as generateUuid } from "uuid";
 
@@ -86,7 +91,7 @@ export const SDCPNView: React.FC = () => {
   const [reactFlowInstance, setReactFlowInstance] =
     useState<PetrinautReactFlowInstance | null>(null);
 
-  const { compactNodes } = use(UserSettingsContext);
+  const { compactNodes, partialSelection } = use(UserSettingsContext);
   const nodeTypes = useMemo(
     () => (compactNodes ? COMPACT_NODE_TYPES : CLASSIC_NODE_TYPES),
     [compactNodes],
@@ -368,6 +373,9 @@ export const SDCPNView: React.FC = () => {
         nodesDraggable={!isReadonly}
         nodesConnectable={!isReadonly}
         elementsSelectable={!isReadonly && !isAddMode}
+        selectionMode={
+          partialSelection ? SelectionMode.Partial : SelectionMode.Full
+        }
         selectNodesOnDrag={false}
         panOnScroll={false}
         zoomOnScroll

From 95e8d2b952f820d1d14660a27ad51285bcf5239d Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Mon, 9 Mar 2026 19:47:42 +0100
Subject: [PATCH 08/25] H-5655: Remove focusNode viewport centering on sidebar
 selection

Remove FocusNodeRegistrar and all focusNode/registerFocusNode plumbing
from the editor context. Viewport centering on node selection will be
revisited as a dedicated feature.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../petrinaut/src/state/editor-context.ts     |  4 ---
 .../petrinaut/src/state/editor-provider.tsx   |  8 -----
 .../LeftSideBar/subviews/nodes-list.tsx       |  8 +----
 .../views/SDCPN/sdcpn-view.browser.test.tsx   |  4 ---
 .../petrinaut/src/views/SDCPN/sdcpn-view.tsx  | 35 +------------------
 5 files changed, 2 insertions(+), 57 deletions(-)

diff --git a/libs/@hashintel/petrinaut/src/state/editor-context.ts b/libs/@hashintel/petrinaut/src/state/editor-context.ts
index 603c1226fa3..27291e556de 100644
--- a/libs/@hashintel/petrinaut/src/state/editor-context.ts
+++ b/libs/@hashintel/petrinaut/src/state/editor-context.ts
@@ -63,8 +63,6 @@ export type EditorActions = {
   addToSelection: (items: SelectionItem[]) => void;
   removeFromSelection: (ids: string[]) => void;
   clearSelection: () => void;
-  focusNode: (nodeId: string) => void;
-  registerFocusNode: (fn: (nodeId: string) => void) => void;
   setDraggingStateByNodeId: (state: DraggingStateByNodeId) => void;
   updateDraggingStateByNodeId: (
     updater: (state: DraggingStateByNodeId) => DraggingStateByNodeId,
@@ -112,8 +110,6 @@ const DEFAULT_CONTEXT_VALUE: EditorContextValue = {
   addToSelection: () => {},
   removeFromSelection: () => {},
   clearSelection: () => {},
-  focusNode: () => {},
-  registerFocusNode: () => {},
   setDraggingStateByNodeId: () => {},
   updateDraggingStateByNodeId: () => {},
   resetDraggingState: () => {},
diff --git a/libs/@hashintel/petrinaut/src/state/editor-provider.tsx b/libs/@hashintel/petrinaut/src/state/editor-provider.tsx
index 5728960f35c..8e35e58c924 100644
--- a/libs/@hashintel/petrinaut/src/state/editor-provider.tsx
+++ b/libs/@hashintel/petrinaut/src/state/editor-provider.tsx
@@ -33,8 +33,6 @@ export const EditorProvider: React.FC<EditorProviderProps> = ({ children }) => {
     undefined,
   );
 
-  const focusNodeRef = useRef<(nodeId: string) => void>(() => {});
-
   const triggerPanelAnimation = () => {
     if (!userSettings.showAnimations) {
       return;
@@ -155,12 +153,6 @@ export const EditorProvider: React.FC<EditorProviderProps> = ({ children }) => {
         return { ...prev, selection: new Map() };
       });
     },
-    focusNode: (nodeId: string) => {
-      focusNodeRef.current(nodeId);
-    },
-    registerFocusNode: (fn: (nodeId: string) => void) => {
-      focusNodeRef.current = fn;
-    },
     setDraggingStateByNodeId: (draggingState: DraggingStateByNodeId) =>
       setState((prev) => ({ ...prev, draggingStateByNodeId: draggingState })),
     updateDraggingStateByNodeId: (updater) =>
diff --git a/libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/nodes-list.tsx b/libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/nodes-list.tsx
index 69d19a3486f..1d6e40cf165 100644
--- a/libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/nodes-list.tsx
+++ b/libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/nodes-list.tsx
@@ -91,7 +91,7 @@ const NodesSectionContent: React.FC = () => {
   const {
     petriNetDefinition: { places, transitions },
   } = use(SDCPNContext);
-  const { selection, selectItem, toggleItem, focusNode } = use(EditorContext);
+  const { selection, selectItem, toggleItem } = use(EditorContext);
 
   const handleLayerClick = (event: React.MouseEvent, item: SelectionItem) => {
     if (event.metaKey || event.ctrlKey) {
@@ -99,10 +99,6 @@ const NodesSectionContent: React.FC = () => {
     } else {
       selectItem(item);
     }
-    // Pan to node for places and transitions
-    if (item.type === "place" || item.type === "transition") {
-      focusNode(item.id);
-    }
   };
 
   return (
@@ -121,7 +117,6 @@ const NodesSectionContent: React.FC = () => {
               if (event.key === "Enter" || event.key === " ") {
                 event.preventDefault();
                 selectItem(item);
-                focusNode(place.id);
               }
             }}
             className={nodeRowStyle({ isSelected })}
@@ -151,7 +146,6 @@ const NodesSectionContent: React.FC = () => {
               if (event.key === "Enter" || event.key === " ") {
                 event.preventDefault();
                 selectItem(item);
-                focusNode(transition.id);
               }
             }}
             className={nodeRowStyle({ isSelected })}
diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.browser.test.tsx b/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.browser.test.tsx
index fc2b7e1224a..a7db1903a21 100644
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.browser.test.tsx
+++ b/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.browser.test.tsx
@@ -153,8 +153,6 @@ function createMockEditorContext(
     addToSelection: vi.fn(),
     removeFromSelection: vi.fn(),
     clearSelection: vi.fn(),
-    focusNode: vi.fn(),
-    registerFocusNode: vi.fn(),
     setDraggingStateByNodeId: vi.fn(),
     updateDraggingStateByNodeId: vi.fn(),
     resetDraggingState: vi.fn(),
@@ -309,8 +307,6 @@ function renderStatefulDragTest(opts: {
     addToSelection: vi.fn(),
     removeFromSelection: vi.fn(),
     clearSelection: vi.fn(),
-    focusNode: vi.fn(),
-    registerFocusNode: vi.fn(),
     collapseAllPanels: vi.fn(),
     setTimelineChartType: vi.fn(),
     triggerPanelAnimation: vi.fn(),
diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.tsx b/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.tsx
index 2e22491032b..a4217e6bbb5 100644
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.tsx
+++ b/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.tsx
@@ -2,12 +2,7 @@ import "@xyflow/react/dist/style.css";
 
 import { css } from "@hashintel/ds-helpers/css";
 import type { Connection } from "@xyflow/react";
-import {
-  Background,
-  ReactFlow,
-  SelectionMode,
-  useReactFlow,
-} from "@xyflow/react";
+import { Background, ReactFlow, SelectionMode } from "@xyflow/react";
 import { use, useEffect, useMemo, useRef, useState } from "react";
 import { v4 as generateUuid } from "uuid";
 
@@ -55,33 +50,6 @@ const canvasContainerStyle = css({
   },
 });
 
-/**
- * Inner component that registers focusNode via useReactFlow (must be inside ReactFlow provider).
- */
-const FocusNodeRegistrar: React.FC = () => {
-  const { setCenter } = useReactFlow();
-  const { registerFocusNode } = use(EditorContext);
-  const { petriNetDefinition } = use(SDCPNContext);
-
-  useEffect(() => {
-    registerFocusNode((nodeId: string) => {
-      const place = petriNetDefinition.places.find((pl) => pl.id === nodeId);
-      if (place) {
-        void setCenter(place.x, place.y, { duration: 400, zoom: 1 });
-        return;
-      }
-      const transition = petriNetDefinition.transitions.find(
-        (tr) => tr.id === nodeId,
-      );
-      if (transition) {
-        void setCenter(transition.x, transition.y, { duration: 400, zoom: 1 });
-      }
-    });
-  }, [setCenter, registerFocusNode, petriNetDefinition]);
-
-  return null;
-};
-
 /**
  * SDCPNView is responsible for rendering the SDCPN using ReactFlow.
  * It reads from SDCPNContext and EditorContext, and handles all ReactFlow interactions.
@@ -383,7 +351,6 @@ export const SDCPNView: React.FC = () => {
         <Background gap={SNAP_GRID_SIZE} size={1} />
         <MiniMap pannable zoomable />
         <ViewportControls />
-        <FocusNodeRegistrar />
       </ReactFlow>
     </div>
   );

From e185ca7acea228e723a07914f9a93fea87a53a93 Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Mon, 9 Mar 2026 20:05:34 +0100
Subject: [PATCH 09/25] H-5655: Highlight selected nodes in MiniMap

Selected nodes render with a light blue fill and stroke in the MiniMap.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/views/SDCPN/components/mini-map.tsx        | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/components/mini-map.tsx b/libs/@hashintel/petrinaut/src/views/SDCPN/components/mini-map.tsx
index 2a2ee26b5b5..9d69ce4f08c 100644
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/components/mini-map.tsx
+++ b/libs/@hashintel/petrinaut/src/views/SDCPN/components/mini-map.tsx
@@ -21,6 +21,8 @@ const SHAPE_SIZE = 90;
 const TRANSITION_WIDTH_RATIO = 1.5;
 const DEFAULT_PLACE_FILL = "#0F0F0F";
 const DEFAULT_TRANSITION_FILL = "#6b7280";
+const SELECTED_COLOR = "#3bb9f6";
+const SELECTED_STROKE_WIDTH = 12;
 
 /**
  * Custom node renderer for the MiniMap.
@@ -44,13 +46,18 @@ const MiniMapNode: React.FC<MiniMapNodeProps> = ({ id, x, y }) => {
         : DEFAULT_PLACE_FILL
       : DEFAULT_TRANSITION_FILL;
 
+  const isSelected = node.selected;
+
   if (node.data.type === "place") {
     return (
       <circle
         cx={x + SHAPE_SIZE / 2}
         cy={y + SHAPE_SIZE / 2}
         r={SHAPE_SIZE / 2}
-        fill={fill}
+        fill={isSelected ? SELECTED_COLOR : fill}
+        stroke={isSelected ? SELECTED_COLOR : "none"}
+        strokeWidth={isSelected ? SELECTED_STROKE_WIDTH : 0}
+        strokeOpacity={0.4}
       />
     );
   }
@@ -61,7 +68,10 @@ const MiniMapNode: React.FC<MiniMapNodeProps> = ({ id, x, y }) => {
       y={y - SHAPE_SIZE / TRANSITION_WIDTH_RATIO}
       width={SHAPE_SIZE * TRANSITION_WIDTH_RATIO}
       height={SHAPE_SIZE}
-      fill={fill}
+      fill={isSelected ? SELECTED_COLOR : fill}
+      stroke={isSelected ? SELECTED_COLOR : "none"}
+      strokeWidth={isSelected ? SELECTED_STROKE_WIDTH : 0}
+      strokeOpacity={0.4}
     />
   );
 };

From 1cdd1ed30aba43b5942022ebc520a45934603ce2 Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Mon, 9 Mar 2026 20:39:51 +0100
Subject: [PATCH 10/25] H-5655: Remove browser tests and related dependencies

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 libs/@hashintel/petrinaut/package.json        |   9 +-
 .../sdcpn-view-integration.browser.test.tsx   | 604 -------------
 .../views/SDCPN/sdcpn-view.browser.test.tsx   | 803 ------------------
 .../petrinaut/vitest.browser.config.ts        |  31 -
 4 files changed, 2 insertions(+), 1445 deletions(-)
 delete mode 100644 libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view-integration.browser.test.tsx
 delete mode 100644 libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.browser.test.tsx
 delete mode 100644 libs/@hashintel/petrinaut/vitest.browser.config.ts

diff --git a/libs/@hashintel/petrinaut/package.json b/libs/@hashintel/petrinaut/package.json
index 6a2b4f0ab2d..9fd50259734 100644
--- a/libs/@hashintel/petrinaut/package.json
+++ b/libs/@hashintel/petrinaut/package.json
@@ -34,8 +34,7 @@
     "lint:eslint": "eslint --report-unused-disable-directives .",
     "lint:tsc": "tsgo --noEmit",
     "prepublishOnly": "turbo run build",
-    "test:unit": "vitest",
-    "test:browser": "vitest --config vitest.browser.config.ts"
+    "test:unit": "vitest"
   },
   "dependencies": {
     "@ark-ui/react": "5.26.2",
@@ -69,8 +68,6 @@
     "@pandacss/dev": "1.4.3",
     "@sentry/react": "10.22.0",
     "@storybook/react-vite": "10.2.13",
-    "@testing-library/dom": "10.4.1",
-    "@testing-library/react": "16.3.2",
     "@types/babel__standalone": "7.1.9",
     "@types/d3-array": "3.2.2",
     "@types/d3-scale": "4.0.9",
@@ -78,7 +75,6 @@
     "@types/react-dom": "19.2.3",
     "@typescript/native-preview": "7.0.0-dev.20260309.1",
     "@vitejs/plugin-react": "5.1.4",
-    "@vitest/browser-playwright": "^4.0.16",
     "babel-plugin-react-compiler": "1.0.0",
     "eslint": "9.39.3",
     "immer": "10.1.3",
@@ -90,8 +86,7 @@
     "storybook": "10.2.13",
     "vite": "8.0.0-beta.18",
     "vite-plugin-dts": "4.5.4",
-    "vitest": "4.0.18",
-    "vitest-browser-react": "^2.0.2"
+    "vitest": "4.0.18"
   },
   "peerDependencies": {
     "@hashintel/ds-components": "workspace:^",
diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view-integration.browser.test.tsx b/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view-integration.browser.test.tsx
deleted file mode 100644
index be3fb2ae70a..00000000000
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view-integration.browser.test.tsx
+++ /dev/null
@@ -1,604 +0,0 @@
-/**
- * Integration tests for SDCPNView using the real EditorProvider.
- *
- * Only two contexts are explicitly provided:
- * - EditorProvider (real) — manages selection, dragging state, cursor mode, etc.
- * - SDCPNContext (controlled mock) — supplies initial SDCPN data and records mutations.
- *
- * All other contexts (PlaybackContext, SimulationContext, UserSettingsContext,
- * MonacoContext, etc.) fall through to their default `createContext` values.
- */
-import "@xyflow/react/dist/style.css";
-import "../../index.css";
-
-import { fireEvent } from "@testing-library/dom";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import { render } from "vitest-browser-react";
-
-import type { SDCPN } from "../../core/types/sdcpn";
-import { EditorProvider } from "../../state/editor-provider";
-import {
-  SDCPNContext,
-  type SDCPNContextValue,
-} from "../../state/sdcpn-context";
-import { SDCPNView } from "./sdcpn-view";
-
-// ---------------------------------------------------------------------------
-// Test data
-// ---------------------------------------------------------------------------
-
-function createTestSDCPN(overrides?: Partial<SDCPN>): SDCPN {
-  return {
-    places: [
-      {
-        id: "place__1",
-        name: "PlaceA",
-        colorId: null,
-        dynamicsEnabled: false,
-        differentialEquationId: null,
-        x: 100,
-        y: 100,
-      },
-      {
-        id: "place__2",
-        name: "PlaceB",
-        colorId: null,
-        dynamicsEnabled: false,
-        differentialEquationId: null,
-        x: 400,
-        y: 100,
-      },
-    ],
-    transitions: [
-      {
-        id: "transition__1",
-        name: "TransitionA",
-        inputArcs: [],
-        outputArcs: [],
-        lambdaType: "predicate",
-        lambdaCode: "",
-        transitionKernelCode: "",
-        x: 250,
-        y: 250,
-      },
-    ],
-    types: [],
-    differentialEquations: [],
-    parameters: [],
-    ...overrides,
-  };
-}
-
-function createMockSDCPNContext(
-  sdcpn: SDCPN,
-  overrides?: Partial<SDCPNContextValue>,
-): SDCPNContextValue {
-  return {
-    createNewNet: vi.fn(),
-    existingNets: [],
-    loadPetriNet: vi.fn(),
-    petriNetId: "test-net",
-    petriNetDefinition: sdcpn,
-    readonly: false,
-    mutatePetriNetDefinition: vi.fn(),
-    setTitle: vi.fn(),
-    title: "Test Net",
-    addPlace: vi.fn(),
-    updatePlace: vi.fn(),
-    updatePlacePosition: vi.fn(),
-    removePlace: vi.fn(),
-    addTransition: vi.fn(),
-    updateTransition: vi.fn(),
-    updateTransitionPosition: vi.fn(),
-    removeTransition: vi.fn(),
-    addArc: vi.fn(),
-    removeArc: vi.fn(),
-    updateArcWeight: vi.fn(),
-    addType: vi.fn(),
-    updateType: vi.fn(),
-    removeType: vi.fn(),
-    addDifferentialEquation: vi.fn(),
-    updateDifferentialEquation: vi.fn(),
-    removeDifferentialEquation: vi.fn(),
-    addParameter: vi.fn(),
-    updateParameter: vi.fn(),
-    removeParameter: vi.fn(),
-    getItemType: vi.fn((id: string) => {
-      if (id.startsWith("place")) {
-        return "place";
-      }
-      if (id.startsWith("transition")) {
-        return "transition";
-      }
-      if (id.startsWith("$A_")) {
-        return "arc";
-      }
-      return null;
-    }),
-    deleteItemsByIds: vi.fn(),
-    layoutGraph: vi.fn(async () => {}),
-    ...overrides,
-  };
-}
-
-// ---------------------------------------------------------------------------
-// Test harness
-// ---------------------------------------------------------------------------
-
-/**
- * Render SDCPNView wrapped in:
- * - The **real** EditorProvider (manages selection, dragging, cursor mode, etc.)
- * - A controlled SDCPNContext (initialised from `sdcpn`, mutations tracked via vi.fn())
- *
- * All other contexts use their default createContext values.
- */
-const renderIntegration = (opts?: {
-  sdcpn?: SDCPN;
-  sdcpnOverrides?: Partial<SDCPNContextValue>;
-}) => {
-  const sdcpn = opts?.sdcpn ?? createTestSDCPN();
-  const sdcpnCtx = createMockSDCPNContext(sdcpn, opts?.sdcpnOverrides);
-
-  const result = render(
-    <SDCPNContext value={sdcpnCtx}>
-      <EditorProvider>
-        <div style={{ width: 800, height: 600 }}>
-          <SDCPNView />
-        </div>
-      </EditorProvider>
-    </SDCPNContext>,
-  );
-
-  return { result, sdcpnCtx };
-};
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-async function waitForNodes(expectedCount: number) {
-  await expect
-    .poll(() => document.querySelectorAll(".react-flow__node").length, {
-      timeout: 5_000,
-      message: `Expected ${expectedCount} rendered nodes`,
-    })
-    .toBe(expectedCount);
-}
-
-function getNodeRect(id: string) {
-  const el = document.querySelector(`[data-id="${id}"]`) as HTMLElement;
-  return el.getBoundingClientRect();
-}
-
-/**
- * Simulate dragging a ReactFlow node via native mouse events.
- * d3-drag listens for mousedown on the node element, then
- * mousemove/mouseup on `event.view` (window).
- *
- * Returns a `release()` function so callers can assert mid-drag state
- * before ending the drag.
- */
-const dragNode = (
-  nodeEl: Element,
-  startX: number,
-  startY: number,
-  endX: number,
-  endY: number,
-  steps = 5,
-) => {
-  fireEvent.mouseDown(nodeEl, {
-    clientX: startX,
-    clientY: startY,
-    button: 0,
-    view: window,
-  });
-
-  const dx = endX - startX;
-  const dy = endY - startY;
-
-  for (let i = 1; i <= steps; i++) {
-    fireEvent.mouseMove(window, {
-      clientX: startX + (dx * i) / steps,
-      clientY: startY + (dy * i) / steps,
-      button: 0,
-      view: window,
-    });
-  }
-
-  return {
-    release() {
-      fireEvent.mouseUp(window, {
-        clientX: endX,
-        clientY: endY,
-        button: 0,
-        view: window,
-      });
-    },
-  };
-};
-
-// ---------------------------------------------------------------------------
-// Tests
-// ---------------------------------------------------------------------------
-
-describe("SDCPNView (integration)", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe("node selection via click", () => {
-    it("selects a node on click (visible via ReactFlow selected class)", async () => {
-      renderIntegration();
-      await waitForNodes(3);
-
-      const node = document.querySelector('[data-id="place__1"]')!;
-      fireEvent.click(node);
-
-      // The real EditorProvider updates selection → mapper sets selected: true
-      // → ReactFlow applies the `selected` class on re-render.
-      await expect
-        .poll(
-          () =>
-            document
-              .querySelector('[data-id="place__1"]')
-              ?.classList.contains("selected"),
-          { timeout: 3_000 },
-        )
-        .toBe(true);
-    });
-
-    it("ctrl+click toggles a second node into the selection", async () => {
-      renderIntegration();
-      await waitForNodes(3);
-
-      // Select first node
-      fireEvent.click(document.querySelector('[data-id="place__1"]')!);
-      await expect
-        .poll(
-          () =>
-            document
-              .querySelector('[data-id="place__1"]')
-              ?.classList.contains("selected"),
-          { timeout: 3_000 },
-        )
-        .toBe(true);
-
-      // Hold Meta key so ReactFlow's useKeyPress sets multiSelectionActive = true,
-      // then click the second node, then release Meta.
-      // Use native dispatchEvent since fireEvent may not trigger listeners on window reliably.
-      window.dispatchEvent(
-        new KeyboardEvent("keydown", {
-          key: "Meta",
-          code: "MetaLeft",
-          metaKey: true,
-          bubbles: true,
-        }),
-      );
-
-      // Wait for React to process the key press and update multiSelectionActive
-      await new Promise((r) => setTimeout(r, 100));
-
-      fireEvent.click(document.querySelector('[data-id="transition__1"]')!, {
-        metaKey: true,
-      });
-
-      window.dispatchEvent(
-        new KeyboardEvent("keyup", {
-          key: "Meta",
-          code: "MetaLeft",
-          metaKey: false,
-          bubbles: true,
-        }),
-      );
-
-      await expect
-        .poll(
-          () =>
-            document
-              .querySelector('[data-id="transition__1"]')
-              ?.classList.contains("selected"),
-          { timeout: 3_000 },
-        )
-        .toBe(true);
-
-      // First node should still be selected
-      expect(
-        document
-          .querySelector('[data-id="place__1"]')
-          ?.classList.contains("selected"),
-      ).toBe(true);
-    });
-
-    it("clicking a new node deselects the previous one", async () => {
-      renderIntegration();
-      await waitForNodes(3);
-
-      fireEvent.click(document.querySelector('[data-id="place__1"]')!);
-      await expect
-        .poll(
-          () =>
-            document
-              .querySelector('[data-id="place__1"]')
-              ?.classList.contains("selected"),
-          { timeout: 3_000 },
-        )
-        .toBe(true);
-
-      // Click a different node without ctrl
-      fireEvent.click(document.querySelector('[data-id="place__2"]')!);
-      await expect
-        .poll(
-          () =>
-            document
-              .querySelector('[data-id="place__2"]')
-              ?.classList.contains("selected"),
-          { timeout: 3_000 },
-        )
-        .toBe(true);
-
-      // First node should no longer be selected
-      expect(
-        document
-          .querySelector('[data-id="place__1"]')
-          ?.classList.contains("selected"),
-      ).toBe(false);
-    });
-  });
-
-  describe("pane click clears selection", () => {
-    it("clears all selected nodes when clicking empty canvas in pan mode", async () => {
-      renderIntegration();
-      await waitForNodes(3);
-
-      // Select a node first
-      fireEvent.click(document.querySelector('[data-id="place__1"]')!);
-      await expect
-        .poll(
-          () =>
-            document
-              .querySelector('[data-id="place__1"]')
-              ?.classList.contains("selected"),
-          { timeout: 3_000 },
-        )
-        .toBe(true);
-
-      // Click the pane (EditorProvider defaults to pan cursor mode)
-      const pane = document.querySelector(".react-flow__pane")!;
-      fireEvent.click(pane);
-
-      await expect
-        .poll(
-          () =>
-            document
-              .querySelector('[data-id="place__1"]')
-              ?.classList.contains("selected"),
-          { timeout: 3_000 },
-        )
-        .toBe(false);
-    });
-  });
-
-  describe("single-node drag commits position", () => {
-    it("updates the SDCPN store position after dragging a node", async () => {
-      const { sdcpnCtx } = renderIntegration();
-      await waitForNodes(3);
-
-      const nodeEl = document.querySelector('[data-id="place__1"]')!;
-      const rect = getNodeRect("place__1");
-      const startX = rect.left + rect.width / 2;
-      const startY = rect.top + rect.height / 2;
-
-      const drag = dragNode(
-        nodeEl,
-        startX,
-        startY,
-        startX + 90,
-        startY + 45,
-        6,
-      );
-      drag.release();
-
-      await expect
-        .poll(
-          () =>
-            (sdcpnCtx.updatePlacePosition as ReturnType<typeof vi.fn>).mock
-              .calls.length,
-          { timeout: 3_000, message: "updatePlacePosition should be called" },
-        )
-        .toBeGreaterThan(0);
-
-      // Verify only place__1 was updated
-      const calls = (sdcpnCtx.updatePlacePosition as ReturnType<typeof vi.fn>)
-        .mock.calls;
-      const place1Calls = calls.filter(
-        (call: unknown[]) => call[0] === "place__1",
-      );
-      const place2Calls = calls.filter(
-        (call: unknown[]) => call[0] === "place__2",
-      );
-      expect(place1Calls.length).toBeGreaterThan(0);
-      expect(place2Calls).toHaveLength(0);
-    });
-  });
-
-  describe("multi-node drag", () => {
-    it("commits positions for all selected nodes and preserves relative distances", async () => {
-      const { sdcpnCtx } = renderIntegration();
-      await waitForNodes(3);
-
-      // Step 1: Select place__1
-      fireEvent.click(document.querySelector('[data-id="place__1"]')!);
-      await expect
-        .poll(
-          () =>
-            document
-              .querySelector('[data-id="place__1"]')
-              ?.classList.contains("selected"),
-          { timeout: 3_000 },
-        )
-        .toBe(true);
-
-      // Step 2: Hold Meta, click transition__1 to add to selection, release Meta
-      window.dispatchEvent(
-        new KeyboardEvent("keydown", {
-          key: "Meta",
-          code: "MetaLeft",
-          metaKey: true,
-          bubbles: true,
-        }),
-      );
-      await new Promise((r) => setTimeout(r, 100));
-
-      fireEvent.click(document.querySelector('[data-id="transition__1"]')!, {
-        metaKey: true,
-      });
-
-      window.dispatchEvent(
-        new KeyboardEvent("keyup", {
-          key: "Meta",
-          code: "MetaLeft",
-          metaKey: false,
-          bubbles: true,
-        }),
-      );
-
-      await expect
-        .poll(
-          () =>
-            document
-              .querySelector('[data-id="transition__1"]')
-              ?.classList.contains("selected"),
-          { timeout: 3_000 },
-        )
-        .toBe(true);
-
-      // Record initial screen positions
-      const initialPlace1 = getNodeRect("place__1");
-      const initialPlace2 = getNodeRect("place__2");
-      const initialTrans1 = getNodeRect("transition__1");
-
-      const initialScreenDx = initialTrans1.left - initialPlace1.left;
-      const initialScreenDy = initialTrans1.top - initialPlace1.top;
-
-      // Step 3: Drag place__1 (selected) from its center
-      const nodeEl = document.querySelector('[data-id="place__1"]')!;
-      const startX = initialPlace1.left + initialPlace1.width / 2;
-      const startY = initialPlace1.top + initialPlace1.height / 2;
-      const dragDx = 105;
-      const dragDy = 60;
-
-      const drag = dragNode(
-        nodeEl,
-        startX,
-        startY,
-        startX + dragDx,
-        startY + dragDy,
-        8,
-      );
-
-      // Step 4: Verify DURING the drag — selected nodes moved
-      await expect
-        .poll(
-          () => {
-            const rect = getNodeRect("place__1");
-            return Math.abs(rect.left - initialPlace1.left);
-          },
-          { timeout: 3_000, message: "place__1 should move during drag" },
-        )
-        .toBeGreaterThan(10);
-
-      // Unselected node should not have moved significantly
-      const place2During = getNodeRect("place__2");
-      expect(Math.abs(place2During.left - initialPlace2.left)).toBeLessThan(20);
-      expect(Math.abs(place2During.top - initialPlace2.top)).toBeLessThan(20);
-
-      // Selected nodes should maintain relative distance during drag
-      const place1During = getNodeRect("place__1");
-      const trans1During = getNodeRect("transition__1");
-      expect(
-        Math.abs(trans1During.left - place1During.left - initialScreenDx),
-      ).toBeLessThan(5);
-      expect(
-        Math.abs(trans1During.top - place1During.top - initialScreenDy),
-      ).toBeLessThan(5);
-
-      // Step 5: Release the drag
-      drag.release();
-
-      // Step 6: Verify AFTER the drag — positions committed atomically via
-      // a single mutatePetriNetDefinition call (batched).
-      const mutateFn = sdcpnCtx.mutatePetriNetDefinition as ReturnType<
-        typeof vi.fn
-      >;
-      await expect
-        .poll(() => mutateFn.mock.calls.length, {
-          timeout: 3_000,
-          message: "mutatePetriNetDefinition should be called on drag end",
-        })
-        .toBeGreaterThan(0);
-
-      // Apply the last mutation to a copy of the SDCPN to inspect committed positions
-      const sdcpnCopy = structuredClone(createTestSDCPN());
-      const lastMutation = mutateFn.mock.calls.at(-1)![0] as (
-        draft: SDCPN,
-      ) => void;
-      lastMutation(sdcpnCopy);
-
-      // place__1 should have been updated
-      const place1 = sdcpnCopy.places.find((place) => place.id === "place__1")!;
-      expect(place1.x).not.toBe(100);
-      expect(place1.y).not.toBe(100);
-
-      // transition__1 should have been updated
-      const trans1 = sdcpnCopy.transitions.find(
-        (tr) => tr.id === "transition__1",
-      )!;
-      expect(trans1.x).not.toBe(250);
-      expect(trans1.y).not.toBe(250);
-
-      // place__2 should NOT have been updated (unselected)
-      const place2 = sdcpnCopy.places.find((place) => place.id === "place__2")!;
-      expect(place2.x).toBe(400);
-      expect(place2.y).toBe(100);
-
-      // Verify relative distance preserved in committed SDCPN positions.
-      // Original SDCPN centers: place__1 (100,100), transition__1 (250,250)
-      // Distance: dx=150, dy=150
-      const committedDx = trans1.x - place1.x;
-      const committedDy = trans1.y - place1.y;
-      expect(committedDx).toBeCloseTo(150, 0);
-      expect(committedDy).toBeCloseTo(150, 0);
-    });
-  });
-
-  describe("keyboard delete", () => {
-    it("deletes selected nodes via Delete key", async () => {
-      const { sdcpnCtx } = renderIntegration();
-      await waitForNodes(3);
-
-      // Select a node
-      fireEvent.click(document.querySelector('[data-id="place__1"]')!);
-      await expect
-        .poll(
-          () =>
-            document
-              .querySelector('[data-id="place__1"]')
-              ?.classList.contains("selected"),
-          { timeout: 3_000 },
-        )
-        .toBe(true);
-
-      // Press Delete
-      const container = document.querySelector(".react-flow")?.parentElement;
-      expect(container).toBeTruthy();
-      fireEvent.keyDown(container!, { key: "Delete" });
-
-      expect(sdcpnCtx.deleteItemsByIds).toHaveBeenCalled();
-
-      // The deleted set should contain place__1
-      const deletedSet = (sdcpnCtx.deleteItemsByIds as ReturnType<typeof vi.fn>)
-        .mock.calls[0]![0] as Set<string>;
-      expect(deletedSet.has("place__1")).toBe(true);
-    });
-  });
-});
diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.browser.test.tsx b/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.browser.test.tsx
deleted file mode 100644
index a7db1903a21..00000000000
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.browser.test.tsx
+++ /dev/null
@@ -1,803 +0,0 @@
-import "@xyflow/react/dist/style.css";
-import "../../index.css";
-
-import { fireEvent } from "@testing-library/dom";
-import { useState } from "react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import { render } from "vitest-browser-react";
-
-import type { SDCPN } from "../../core/types/sdcpn";
-import {
-  PlaybackContext,
-  type PlaybackContextValue,
-} from "../../playback/context";
-import {
-  SimulationContext,
-  type SimulationContextValue,
-} from "../../simulation/context";
-import {
-  type DraggingStateByNodeId,
-  EditorContext,
-  type EditorContextValue,
-  initialEditorState,
-} from "../../state/editor-context";
-import {
-  SDCPNContext,
-  type SDCPNContextValue,
-} from "../../state/sdcpn-context";
-import type { SelectionMap } from "../../state/selection";
-import {
-  defaultUserSettings,
-  UserSettingsContext,
-  type UserSettingsContextValue,
-} from "../../state/user-settings-context";
-import { SDCPNView } from "./sdcpn-view";
-
-// ---------------------------------------------------------------------------
-// Factories
-// ---------------------------------------------------------------------------
-
-function createTestSDCPN(overrides?: Partial<SDCPN>): SDCPN {
-  return {
-    places: [
-      {
-        id: "place__1",
-        name: "PlaceA",
-        colorId: null,
-        dynamicsEnabled: false,
-        differentialEquationId: null,
-        x: 100,
-        y: 100,
-      },
-      {
-        id: "place__2",
-        name: "PlaceB",
-        colorId: null,
-        dynamicsEnabled: false,
-        differentialEquationId: null,
-        x: 400,
-        y: 100,
-      },
-    ],
-    transitions: [
-      {
-        id: "transition__1",
-        name: "TransitionA",
-        inputArcs: [],
-        outputArcs: [],
-        lambdaType: "predicate",
-        lambdaCode: "",
-        transitionKernelCode: "",
-        x: 250,
-        y: 250,
-      },
-    ],
-    types: [],
-    differentialEquations: [],
-    parameters: [],
-    ...overrides,
-  };
-}
-
-function createMockSDCPNContext(
-  sdcpn: SDCPN,
-  overrides?: Partial<SDCPNContextValue>,
-): SDCPNContextValue {
-  return {
-    createNewNet: vi.fn(),
-    existingNets: [],
-    loadPetriNet: vi.fn(),
-    petriNetId: "test-net",
-    petriNetDefinition: sdcpn,
-    readonly: false,
-    mutatePetriNetDefinition: vi.fn(),
-    setTitle: vi.fn(),
-    title: "Test Net",
-    addPlace: vi.fn(),
-    updatePlace: vi.fn(),
-    updatePlacePosition: vi.fn(),
-    removePlace: vi.fn(),
-    addTransition: vi.fn(),
-    updateTransition: vi.fn(),
-    updateTransitionPosition: vi.fn(),
-    removeTransition: vi.fn(),
-    addArc: vi.fn(),
-    removeArc: vi.fn(),
-    updateArcWeight: vi.fn(),
-    addType: vi.fn(),
-    updateType: vi.fn(),
-    removeType: vi.fn(),
-    addDifferentialEquation: vi.fn(),
-    updateDifferentialEquation: vi.fn(),
-    removeDifferentialEquation: vi.fn(),
-    addParameter: vi.fn(),
-    updateParameter: vi.fn(),
-    removeParameter: vi.fn(),
-    getItemType: vi.fn((id: string) => {
-      if (id.startsWith("place")) {
-        return "place";
-      }
-      if (id.startsWith("transition")) {
-        return "transition";
-      }
-      if (id.startsWith("$A_")) {
-        return "arc";
-      }
-      return null;
-    }),
-    deleteItemsByIds: vi.fn(),
-    layoutGraph: vi.fn(async () => {}),
-    ...overrides,
-  };
-}
-
-function createMockEditorContext(
-  overrides?: Partial<EditorContextValue>,
-): EditorContextValue {
-  return {
-    ...initialEditorState,
-    cursorMode: "select",
-    setGlobalMode: vi.fn(),
-    setEditionMode: vi.fn(),
-    setCursorMode: vi.fn(),
-    setLeftSidebarOpen: vi.fn(),
-    setLeftSidebarWidth: vi.fn(),
-    setPropertiesPanelWidth: vi.fn(),
-    setBottomPanelOpen: vi.fn(),
-    toggleBottomPanel: vi.fn(),
-    setBottomPanelHeight: vi.fn(),
-    setActiveBottomPanelTab: vi.fn(),
-    setSelection: vi.fn(),
-    selectItem: vi.fn(),
-    toggleItem: vi.fn(),
-    addToSelection: vi.fn(),
-    removeFromSelection: vi.fn(),
-    clearSelection: vi.fn(),
-    setDraggingStateByNodeId: vi.fn(),
-    updateDraggingStateByNodeId: vi.fn(),
-    resetDraggingState: vi.fn(),
-    collapseAllPanels: vi.fn(),
-    setTimelineChartType: vi.fn(),
-    triggerPanelAnimation: vi.fn(),
-    __reinitialize: vi.fn(),
-    ...overrides,
-  };
-}
-
-function createMockPlaybackContext(
-  overrides?: Partial<PlaybackContextValue>,
-): PlaybackContextValue {
-  return {
-    currentFrame: null,
-    currentViewedFrame: null,
-    playbackState: "Stopped",
-    currentFrameIndex: 0,
-    totalFrames: 0,
-    playbackSpeed: 1,
-    playMode: "computeMax",
-    isViewOnlyAvailable: false,
-    isComputeAvailable: true,
-    setCurrentViewedFrame: vi.fn(),
-    play: vi.fn(async () => {}),
-    pause: vi.fn(),
-    stop: vi.fn(),
-    setPlaybackSpeed: vi.fn(),
-    setPlayMode: vi.fn(),
-    ...overrides,
-  };
-}
-
-function createMockSimulationContext(
-  overrides?: Partial<SimulationContextValue>,
-): SimulationContextValue {
-  return {
-    state: "NotRun",
-    error: null,
-    errorItemId: null,
-    parameterValues: {},
-    initialMarking: new Map(),
-    dt: 0.01,
-    maxTime: null,
-    totalFrames: 0,
-    getFrame: vi.fn(() => Promise.resolve(null)),
-    getAllFrames: vi.fn(() => Promise.resolve([])),
-    getFramesInRange: vi.fn(() => Promise.resolve([])),
-    setInitialMarking: vi.fn(),
-    setParameterValue: vi.fn(),
-    setDt: vi.fn(),
-    setMaxTime: vi.fn(),
-    initialize: vi.fn(async () => {}),
-    run: vi.fn(),
-    pause: vi.fn(),
-    reset: vi.fn(),
-    setBackpressure: vi.fn(),
-    ack: vi.fn(),
-    ...overrides,
-  };
-}
-
-function createMockUserSettings(
-  overrides?: Partial<UserSettingsContextValue>,
-): UserSettingsContextValue {
-  return {
-    ...defaultUserSettings,
-    setShowAnimations: vi.fn(),
-    setKeepPanelsMounted: vi.fn(),
-    setCompactNodes: vi.fn(),
-    setArcRendering: vi.fn(),
-    setIsLeftSidebarOpen: vi.fn(),
-    setLeftSidebarWidth: vi.fn(),
-    setPropertiesPanelWidth: vi.fn(),
-    setIsBottomPanelOpen: vi.fn(),
-    setBottomPanelHeight: vi.fn(),
-    setActiveBottomPanelTab: vi.fn(),
-    setCursorMode: vi.fn(),
-    setTimelineChartType: vi.fn(),
-    setPartialSelection: vi.fn(),
-    updateSubViewSection: vi.fn(),
-    ...overrides,
-  };
-}
-
-// ---------------------------------------------------------------------------
-// Test harness
-// ---------------------------------------------------------------------------
-
-function renderSDCPNView(opts?: {
-  sdcpn?: SDCPN;
-  sdcpnOverrides?: Partial<SDCPNContextValue>;
-  editorOverrides?: Partial<EditorContextValue>;
-  userSettingsOverrides?: Partial<UserSettingsContextValue>;
-}) {
-  const sdcpn = opts?.sdcpn ?? createTestSDCPN();
-  const sdcpnCtx = createMockSDCPNContext(sdcpn, opts?.sdcpnOverrides);
-  const editorCtx = createMockEditorContext(opts?.editorOverrides);
-  const playbackCtx = createMockPlaybackContext();
-  const simulationCtx = createMockSimulationContext();
-  const userSettingsCtx = createMockUserSettings(opts?.userSettingsOverrides);
-
-  const result = render(
-    <UserSettingsContext value={userSettingsCtx}>
-      <SimulationContext value={simulationCtx}>
-        <PlaybackContext value={playbackCtx}>
-          <SDCPNContext value={sdcpnCtx}>
-            <EditorContext value={editorCtx}>
-              <div style={{ width: 800, height: 600 }}>
-                <SDCPNView />
-              </div>
-            </EditorContext>
-          </SDCPNContext>
-        </PlaybackContext>
-      </SimulationContext>
-    </UserSettingsContext>,
-  );
-
-  return { result, editorCtx, sdcpnCtx, userSettingsCtx };
-}
-
-/**
- * Render SDCPNView with a stateful EditorContext for dragging tests.
- *
- * The dragging state is managed with real `useState` so that
- * `useApplyNodeChanges` can accumulate dragging positions across renders
- * and commit them on drag end.
- */
-function renderStatefulDragTest(opts: {
-  sdcpn: SDCPN;
-  selection: SelectionMap;
-  userSettingsOverrides?: Partial<UserSettingsContextValue>;
-}) {
-  const sdcpnCtx = createMockSDCPNContext(opts.sdcpn);
-
-  // Create stable mock functions (not recreated on re-render)
-  const editorMocks = {
-    setGlobalMode: vi.fn(),
-    setEditionMode: vi.fn(),
-    setCursorMode: vi.fn(),
-    setLeftSidebarOpen: vi.fn(),
-    setLeftSidebarWidth: vi.fn(),
-    setPropertiesPanelWidth: vi.fn(),
-    setBottomPanelOpen: vi.fn(),
-    toggleBottomPanel: vi.fn(),
-    setBottomPanelHeight: vi.fn(),
-    setActiveBottomPanelTab: vi.fn(),
-    setSelection: vi.fn(),
-    selectItem: vi.fn(),
-    toggleItem: vi.fn(),
-    addToSelection: vi.fn(),
-    removeFromSelection: vi.fn(),
-    clearSelection: vi.fn(),
-    collapseAllPanels: vi.fn(),
-    setTimelineChartType: vi.fn(),
-    triggerPanelAnimation: vi.fn(),
-    __reinitialize: vi.fn(),
-  };
-
-  const selection = opts.selection;
-
-  const StatefulEditorProvider = ({
-    children,
-  }: {
-    children: React.ReactNode;
-  }) => {
-    const [draggingState, setDraggingState] = useState<DraggingStateByNodeId>(
-      {},
-    );
-
-    const ctx: EditorContextValue = {
-      ...initialEditorState,
-      cursorMode: "select",
-      selection,
-      draggingStateByNodeId: draggingState,
-      ...editorMocks,
-      setDraggingStateByNodeId: setDraggingState,
-      updateDraggingStateByNodeId: (updater) => {
-        setDraggingState(updater);
-      },
-      resetDraggingState: () => setDraggingState({}),
-    };
-
-    return <EditorContext value={ctx}>{children}</EditorContext>;
-  };
-
-  const userSettingsCtx = createMockUserSettings(opts.userSettingsOverrides);
-
-  const result = render(
-    <UserSettingsContext value={userSettingsCtx}>
-      <SimulationContext value={createMockSimulationContext()}>
-        <PlaybackContext value={createMockPlaybackContext()}>
-          <SDCPNContext value={sdcpnCtx}>
-            <StatefulEditorProvider>
-              <div style={{ width: 800, height: 600 }}>
-                <SDCPNView />
-              </div>
-            </StatefulEditorProvider>
-          </SDCPNContext>
-        </PlaybackContext>
-      </SimulationContext>
-    </UserSettingsContext>,
-  );
-
-  return { result, sdcpnCtx, editorMocks };
-}
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-/** Wait for ReactFlow to initialise (nodes get rendered to the DOM). */
-async function waitForNodes(expectedCount: number) {
-  await expect
-    .poll(() => document.querySelectorAll(".react-flow__node").length, {
-      timeout: 5_000,
-      message: `Expected ${expectedCount} rendered nodes`,
-    })
-    .toBe(expectedCount);
-}
-
-/**
- * Simulate a drag-select rectangle using fireEvent pointer events.
- * Coordinates are relative to the pane element's bounding rect.
- */
-function dragSelectOnPane(
-  pane: Element,
-  startX: number,
-  startY: number,
-  endX: number,
-  endY: number,
-) {
-  const rect = pane.getBoundingClientRect();
-  const absStartX = rect.left + startX;
-  const absStartY = rect.top + startY;
-  const absEndX = rect.left + endX;
-  const absEndY = rect.top + endY;
-
-  // Pointer down on the pane to start selection
-  fireEvent.pointerDown(pane, {
-    clientX: absStartX,
-    clientY: absStartY,
-    button: 0,
-    isPrimary: true,
-    pointerId: 1,
-  });
-
-  // Move in steps so ReactFlow registers a drag (exceeds paneClickDistance)
-  const steps = 6;
-  for (let i = 1; i <= steps; i++) {
-    const ratio = i / steps;
-    fireEvent.pointerMove(pane, {
-      clientX: absStartX + (absEndX - absStartX) * ratio,
-      clientY: absStartY + (absEndY - absStartY) * ratio,
-      button: 0,
-      isPrimary: true,
-      pointerId: 1,
-    });
-  }
-
-  // Pointer up to finalize
-  fireEvent.pointerUp(pane, {
-    clientX: absEndX,
-    clientY: absEndY,
-    button: 0,
-    isPrimary: true,
-    pointerId: 1,
-  });
-}
-
-/** Get the bounding rect of a ReactFlow node by data-id. */
-function getNodeRect(id: string) {
-  const el = document.querySelector(`[data-id="${id}"]`) as HTMLElement;
-  return el.getBoundingClientRect();
-}
-
-/**
- * Simulate dragging a ReactFlow node via native mouse events.
- * d3-drag (used by ReactFlow) listens for mousedown on the node,
- * then mousemove/mouseup on `event.view` (window).
- */
-function dragNode(
-  nodeEl: Element,
-  startX: number,
-  startY: number,
-  endX: number,
-  endY: number,
-  steps = 5,
-) {
-  fireEvent.mouseDown(nodeEl, {
-    clientX: startX,
-    clientY: startY,
-    button: 0,
-    view: window,
-  });
-
-  const dx = endX - startX;
-  const dy = endY - startY;
-
-  for (let i = 1; i <= steps; i++) {
-    fireEvent.mouseMove(window, {
-      clientX: startX + (dx * i) / steps,
-      clientY: startY + (dy * i) / steps,
-      button: 0,
-      view: window,
-    });
-  }
-
-  // Return without mouseUp so callers can assert mid-drag state
-  return {
-    release() {
-      fireEvent.mouseUp(window, {
-        clientX: endX,
-        clientY: endY,
-        button: 0,
-        view: window,
-      });
-    },
-  };
-}
-
-// ---------------------------------------------------------------------------
-// Tests
-// ---------------------------------------------------------------------------
-
-describe("SDCPNView", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe("rendering", () => {
-    it("renders place and transition nodes in classic mode", async () => {
-      renderSDCPNView({ userSettingsOverrides: { compactNodes: false } });
-      await waitForNodes(3); // 2 places + 1 transition
-    });
-
-    it("renders place and transition nodes in compact mode", async () => {
-      renderSDCPNView({ userSettingsOverrides: { compactNodes: true } });
-      await waitForNodes(3);
-    });
-  });
-
-  describe("node click dispatches selection via onNodesChange", () => {
-    it("calls setSelection when a node is clicked", async () => {
-      const { editorCtx } = renderSDCPNView();
-      await waitForNodes(3);
-
-      const node = document.querySelector('[data-id="place__1"]')!;
-      fireEvent.click(node);
-
-      // Selection now flows through ReactFlow's handleNodeClick → onNodesChange
-      // → useApplyNodeChanges → setSelection
-      expect(editorCtx.setSelection).toHaveBeenCalled();
-      const lastCall = (
-        editorCtx.setSelection as ReturnType<typeof vi.fn>
-      ).mock.calls.at(-1)![0] as Map<string, unknown>;
-      expect(lastCall.has("place__1")).toBe(true);
-    });
-  });
-
-  describe("pane click dispatches to EditorContext", () => {
-    it("calls clearSelection when clicking empty canvas", async () => {
-      // Use pan mode so the pane has a regular onClick handler
-      // (in select mode, ReactFlow replaces onClick with pointer event handlers)
-      const { editorCtx } = renderSDCPNView({
-        editorOverrides: { cursorMode: "pan" },
-      });
-      await waitForNodes(3);
-
-      const pane = document.querySelector(".react-flow__pane")!;
-      fireEvent.click(pane);
-
-      expect(editorCtx.clearSelection).toHaveBeenCalled();
-    });
-  });
-
-  describe("drag-select in select cursor mode", () => {
-    it("dispatches selection changes via setSelection when nodes are drag-selected (classic)", async () => {
-      const { editorCtx } = renderSDCPNView({
-        editorOverrides: { cursorMode: "select" },
-        userSettingsOverrides: { compactNodes: false },
-      });
-      await waitForNodes(3);
-
-      const pane = document.querySelector(".react-flow__pane")!;
-      // Use extreme coordinates to ensure the selection rectangle covers all nodes
-      // regardless of how fitView adjusts the viewport transform
-      dragSelectOnPane(pane, -2000, -2000, 4000, 4000);
-
-      // setSelection should have been called at least once during the drag
-      expect(editorCtx.setSelection).toHaveBeenCalled();
-
-      // Collect all selected IDs across all setSelection calls
-      const allSelectedIds = new Set<string>();
-      for (const call of (editorCtx.setSelection as ReturnType<typeof vi.fn>)
-        .mock.calls) {
-        const selMap = call[0] as SelectionMap;
-        for (const id of selMap.keys()) {
-          allSelectedIds.add(id);
-        }
-      }
-
-      expect(allSelectedIds.has("place__1")).toBe(true);
-      expect(allSelectedIds.has("place__2")).toBe(true);
-      expect(allSelectedIds.has("transition__1")).toBe(true);
-    });
-
-    it("dispatches selection changes via setSelection when nodes are drag-selected (compact)", async () => {
-      const { editorCtx } = renderSDCPNView({
-        editorOverrides: { cursorMode: "select" },
-        userSettingsOverrides: { compactNodes: true },
-      });
-      await waitForNodes(3);
-
-      const pane = document.querySelector(".react-flow__pane")!;
-      dragSelectOnPane(pane, -2000, -2000, 4000, 4000);
-
-      expect(editorCtx.setSelection).toHaveBeenCalled();
-
-      // Collect all selected IDs across all setSelection calls
-      const allSelectedIds = new Set<string>();
-      for (const call of (editorCtx.setSelection as ReturnType<typeof vi.fn>)
-        .mock.calls) {
-        const selMap = call[0] as SelectionMap;
-        for (const id of selMap.keys()) {
-          allSelectedIds.add(id);
-        }
-      }
-
-      expect(allSelectedIds.has("place__1")).toBe(true);
-      expect(allSelectedIds.has("place__2")).toBe(true);
-      expect(allSelectedIds.has("transition__1")).toBe(true);
-    });
-
-    it("does not select nodes outside the drag rectangle", async () => {
-      // Place nodes far apart so we can select just one
-      const sdcpn = createTestSDCPN({
-        places: [
-          {
-            id: "place__1",
-            name: "PlaceA",
-            colorId: null,
-            dynamicsEnabled: false,
-            differentialEquationId: null,
-            x: 100,
-            y: 100,
-          },
-          {
-            id: "place__2",
-            name: "PlaceB",
-            colorId: null,
-            dynamicsEnabled: false,
-            differentialEquationId: null,
-            x: 600,
-            y: 500,
-          },
-        ],
-        transitions: [],
-      });
-
-      const { editorCtx } = renderSDCPNView({
-        sdcpn,
-        editorOverrides: { cursorMode: "select" },
-        userSettingsOverrides: { compactNodes: false },
-      });
-      await waitForNodes(2);
-
-      const pane = document.querySelector(".react-flow__pane")!;
-      // Drag a small rectangle in the top-left area where only PlaceA is
-      dragSelectOnPane(pane, 0, 0, 250, 250);
-
-      const calls = (editorCtx.setSelection as ReturnType<typeof vi.fn>).mock
-        .calls;
-
-      if (calls.length > 0) {
-        const lastCall = calls.at(-1)?.[0] as SelectionMap | undefined;
-        if (lastCall && lastCall.size > 0) {
-          expect(lastCall.has("place__1")).toBe(true);
-          expect(lastCall.has("place__2")).toBe(false);
-        }
-      }
-    });
-  });
-
-  describe("selection is not enabled in pan mode", () => {
-    it("does not dispatch setSelection on drag in pan mode", async () => {
-      const { editorCtx } = renderSDCPNView({
-        editorOverrides: { cursorMode: "pan" },
-      });
-      await waitForNodes(3);
-
-      const pane = document.querySelector(".react-flow__pane")!;
-      dragSelectOnPane(pane, 0, 0, 800, 600);
-
-      // In pan mode, drag should pan the canvas, not select
-      expect(editorCtx.setSelection).not.toHaveBeenCalled();
-    });
-  });
-
-  describe("keyboard delete dispatches to EditorContext", () => {
-    it("calls deleteItemsByIds and clearSelection on Delete key", async () => {
-      const selection: SelectionMap = new Map([
-        ["place__1", { type: "place", id: "place__1" }],
-      ]);
-
-      const { editorCtx, sdcpnCtx } = renderSDCPNView({
-        editorOverrides: { selection },
-      });
-      await waitForNodes(3);
-
-      // The onKeyDown handler is on the container div wrapping ReactFlow.
-      const container = document.querySelector(".react-flow")?.parentElement;
-      if (container) {
-        fireEvent.keyDown(container, { key: "Delete" });
-      }
-
-      expect(sdcpnCtx.deleteItemsByIds).toHaveBeenCalled();
-      expect(editorCtx.clearSelection).toHaveBeenCalled();
-    });
-  });
-
-  describe("multi-node drag", () => {
-    it("commits positions for all selected nodes and preserves relative distances", async () => {
-      // SDCPN centers: place__1 (100,100), place__2 (400,100), transition__1 (250,250)
-      const sdcpn = createTestSDCPN();
-
-      // Pre-select place__1 and transition__1 (but NOT place__2)
-      const selection: SelectionMap = new Map([
-        ["place__1", { type: "place", id: "place__1" }],
-        ["transition__1", { type: "transition", id: "transition__1" }],
-      ]);
-
-      const { sdcpnCtx } = renderStatefulDragTest({
-        sdcpn,
-        selection,
-        userSettingsOverrides: { compactNodes: true },
-      });
-
-      await waitForNodes(3);
-
-      // Record initial screen positions
-      const initialPlace1 = getNodeRect("place__1");
-      const initialPlace2 = getNodeRect("place__2");
-      const initialTrans1 = getNodeRect("transition__1");
-
-      // Distance between the two selected nodes (screen coords)
-      const initialScreenDx = initialTrans1.left - initialPlace1.left;
-      const initialScreenDy = initialTrans1.top - initialPlace1.top;
-
-      // Start dragging place__1 from its center
-      const nodeEl = document.querySelector('[data-id="place__1"]')!;
-      const startX = initialPlace1.left + initialPlace1.width / 2;
-      const startY = initialPlace1.top + initialPlace1.height / 2;
-      const dragDx = 105; // ~7 grid squares (15px grid)
-      const dragDy = 60; // ~4 grid squares
-
-      const drag = dragNode(
-        nodeEl,
-        startX,
-        startY,
-        startX + dragDx,
-        startY + dragDy,
-        8,
-      );
-
-      // -- Verify DURING the drag --
-      // Wait for place__1 to visually move
-      await expect
-        .poll(
-          () => {
-            const rect = getNodeRect("place__1");
-            return Math.abs(rect.left - initialPlace1.left);
-          },
-          { timeout: 3_000, message: "place__1 should move during drag" },
-        )
-        .toBeGreaterThan(10);
-
-      // Unselected node (place__2) should NOT have moved significantly.
-      // Allow up to one snap grid unit (15px) for initial grid-snap adjustment.
-      const place2During = getNodeRect("place__2");
-      expect(Math.abs(place2During.left - initialPlace2.left)).toBeLessThan(20);
-      expect(Math.abs(place2During.top - initialPlace2.top)).toBeLessThan(20);
-
-      // Selected nodes should maintain relative distance during drag
-      const place1During = getNodeRect("place__1");
-      const trans1During = getNodeRect("transition__1");
-      const screenDxDuring = trans1During.left - place1During.left;
-      const screenDyDuring = trans1During.top - place1During.top;
-      expect(Math.abs(screenDxDuring - initialScreenDx)).toBeLessThan(5);
-      expect(Math.abs(screenDyDuring - initialScreenDy)).toBeLessThan(5);
-
-      // -- Release the drag --
-      drag.release();
-
-      // -- Verify AFTER the drag --
-      // Both selected nodes should have their positions committed to the SDCPN store.
-      await expect
-        .poll(
-          () =>
-            (sdcpnCtx.updatePlacePosition as ReturnType<typeof vi.fn>).mock
-              .calls.length,
-          { timeout: 3_000, message: "updatePlacePosition should be called" },
-        )
-        .toBeGreaterThan(0);
-
-      expect(sdcpnCtx.updateTransitionPosition).toHaveBeenCalledWith(
-        "transition__1",
-        expect.objectContaining({
-          x: expect.any(Number),
-          y: expect.any(Number),
-        }),
-      );
-
-      // Verify that place__1 was committed
-      const placeCalls = (
-        sdcpnCtx.updatePlacePosition as ReturnType<typeof vi.fn>
-      ).mock.calls.filter((call: unknown[]) => call[0] === "place__1");
-      expect(placeCalls.length).toBeGreaterThan(0);
-
-      // Verify that place__2 was NOT committed (it was not selected/dragged)
-      const place2Calls = (
-        sdcpnCtx.updatePlacePosition as ReturnType<typeof vi.fn>
-      ).mock.calls.filter((call: unknown[]) => call[0] === "place__2");
-      expect(place2Calls).toHaveLength(0);
-
-      // Verify relative distance is preserved in committed SDCPN positions.
-      // Original SDCPN centers: place__1 (100,100), transition__1 (250,250)
-      // Distance: dx=150, dy=150
-      const lastPlacePos = placeCalls.at(-1)![1] as {
-        x: number;
-        y: number;
-      };
-      const transCalls = (
-        sdcpnCtx.updateTransitionPosition as ReturnType<typeof vi.fn>
-      ).mock.calls.filter((call: unknown[]) => call[0] === "transition__1");
-      const lastTransPos = transCalls.at(-1)![1] as {
-        x: number;
-        y: number;
-      };
-
-      const committedDx = lastTransPos.x - lastPlacePos.x;
-      const committedDy = lastTransPos.y - lastPlacePos.y;
-      expect(committedDx).toBeCloseTo(150, 0);
-      expect(committedDy).toBeCloseTo(150, 0);
-    });
-  });
-});
diff --git a/libs/@hashintel/petrinaut/vitest.browser.config.ts b/libs/@hashintel/petrinaut/vitest.browser.config.ts
deleted file mode 100644
index 48f9bd2a825..00000000000
--- a/libs/@hashintel/petrinaut/vitest.browser.config.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import react from "@vitejs/plugin-react";
-import { playwright } from "@vitest/browser-playwright";
-import { defineConfig } from "vitest/config";
-
-export default defineConfig({
-  plugins: [
-    react({
-      babel: {
-        plugins: ["babel-plugin-react-compiler"],
-      },
-    }),
-  ],
-  // css: {
-  //   postcss: "./postcss.config.cjs",
-  // },
-  define: {
-    "process.versions": JSON.stringify({ pnp: undefined }),
-  },
-  optimizeDeps: {
-    include: ["@testing-library/dom"],
-  },
-  test: {
-    include: ["src/**/*.browser.test.{ts,tsx}"],
-    browser: {
-      enabled: true,
-      provider: playwright(),
-      // headless: true,
-      instances: [{ browser: "chromium" }],
-    },
-  },
-});

From c9cdd5d9dbeb10a9d01f8e101bbcb6a06c71ca4e Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Mon, 9 Mar 2026 20:40:16 +0100
Subject: [PATCH 11/25] Update yarn.lock

---
 yarn.lock | 109 +++++++-----------------------------------------------
 1 file changed, 14 insertions(+), 95 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 05f90135dad..5b176eff353 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3276,7 +3276,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.26.0, @babel/code-frame@npm:^7.26.2, @babel/code-frame@npm:^7.27.1, @babel/code-frame@npm:^7.28.6, @babel/code-frame@npm:^7.29.0":
+"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.26.0, @babel/code-frame@npm:^7.26.2, @babel/code-frame@npm:^7.27.1, @babel/code-frame@npm:^7.28.6, @babel/code-frame@npm:^7.29.0":
   version: 7.29.0
   resolution: "@babel/code-frame@npm:7.29.0"
   dependencies:
@@ -7997,8 +7997,6 @@ __metadata:
     "@pandacss/dev": "npm:1.4.3"
     "@sentry/react": "npm:10.22.0"
     "@storybook/react-vite": "npm:10.2.13"
-    "@testing-library/dom": "npm:10.4.1"
-    "@testing-library/react": "npm:16.3.2"
     "@types/babel__standalone": "npm:7.1.9"
     "@types/d3-array": "npm:3.2.2"
     "@types/d3-scale": "npm:4.0.9"
@@ -8006,7 +8004,6 @@ __metadata:
     "@types/react-dom": "npm:19.2.3"
     "@typescript/native-preview": "npm:7.0.0-dev.20260309.1"
     "@vitejs/plugin-react": "npm:5.1.4"
-    "@vitest/browser-playwright": "npm:^4.0.16"
     "@xyflow/react": "npm:12.10.1"
     babel-plugin-react-compiler: "npm:1.0.0"
     d3-array: "npm:3.2.4"
@@ -8028,7 +8025,6 @@ __metadata:
     vite: "npm:8.0.0-beta.18"
     vite-plugin-dts: "npm:4.5.4"
     vitest: "npm:4.0.18"
-    vitest-browser-react: "npm:^2.0.2"
     vscode-languageserver-types: "npm:3.17.5"
     web-worker: "npm:1.4.1"
   peerDependencies:
@@ -17408,22 +17404,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/dom@npm:10.4.1":
-  version: 10.4.1
-  resolution: "@testing-library/dom@npm:10.4.1"
-  dependencies:
-    "@babel/code-frame": "npm:^7.10.4"
-    "@babel/runtime": "npm:^7.12.5"
-    "@types/aria-query": "npm:^5.0.1"
-    aria-query: "npm:5.3.0"
-    dom-accessibility-api: "npm:^0.5.9"
-    lz-string: "npm:^1.5.0"
-    picocolors: "npm:1.1.1"
-    pretty-format: "npm:^27.0.2"
-  checksum: 10c0/19ce048012d395ad0468b0dbcc4d0911f6f9e39464d7a8464a587b29707eed5482000dad728f5acc4ed314d2f4d54f34982999a114d2404f36d048278db815b1
-  languageName: node
-  linkType: hard
-
 "@testing-library/jest-dom@npm:^6.6.3":
   version: 6.8.0
   resolution: "@testing-library/jest-dom@npm:6.8.0"
@@ -17438,26 +17418,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/react@npm:16.3.2":
-  version: 16.3.2
-  resolution: "@testing-library/react@npm:16.3.2"
-  dependencies:
-    "@babel/runtime": "npm:^7.12.5"
-  peerDependencies:
-    "@testing-library/dom": ^10.0.0
-    "@types/react": ^18.0.0 || ^19.0.0
-    "@types/react-dom": ^18.0.0 || ^19.0.0
-    react: ^18.0.0 || ^19.0.0
-    react-dom: ^18.0.0 || ^19.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-    "@types/react-dom":
-      optional: true
-  checksum: 10c0/f9c7f0915e1b5f7b750e6c7d8b51f091b8ae7ea99bacb761d7b8505ba25de9cfcb749a0f779f1650fb268b499dd79165dc7e1ee0b8b4cb63430d3ddc81ffe044
-  languageName: node
-  linkType: hard
-
 "@testing-library/user-event@npm:^14.6.1":
   version: 14.6.1
   resolution: "@testing-library/user-event@npm:14.6.1"
@@ -17847,13 +17807,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/aria-query@npm:^5.0.1":
-  version: 5.0.4
-  resolution: "@types/aria-query@npm:5.0.4"
-  checksum: 10c0/dc667bc6a3acc7bba2bccf8c23d56cb1f2f4defaa704cfef595437107efaa972d3b3db9ec1d66bc2711bfc35086821edd32c302bffab36f2e79b97f312069f08
-  languageName: node
-  linkType: hard
-
 "@types/babel__core@npm:^7.20.5":
   version: 7.20.5
   resolution: "@types/babel__core@npm:7.20.5"
@@ -21873,13 +21826,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ansi-styles@npm:^5.0.0":
-  version: 5.2.0
-  resolution: "ansi-styles@npm:5.2.0"
-  checksum: 10c0/9c4ca80eb3c2fb7b33841c210d2f20807f40865d27008d7c3f707b7f95cab7d67462a565e2388ac3285b71cb3d9bb2173de8da37c57692a362885ec34d6e27df
-  languageName: node
-  linkType: hard
-
 "ansi-styles@npm:^6.1.0, ansi-styles@npm:^6.2.1":
   version: 6.2.1
   resolution: "ansi-styles@npm:6.2.1"
@@ -21994,15 +21940,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"aria-query@npm:5.3.0":
-  version: 5.3.0
-  resolution: "aria-query@npm:5.3.0"
-  dependencies:
-    dequal: "npm:^2.0.3"
-  checksum: 10c0/2bff0d4eba5852a9dd578ecf47eaef0e82cc52569b48469b0aac2db5145db0b17b7a58d9e01237706d1e14b7a1b0ac9b78e9c97027ad97679dd8f91b85da1469
-  languageName: node
-  linkType: hard
-
 "aria-query@npm:^5.0.0, aria-query@npm:^5.3.2":
   version: 5.3.2
   resolution: "aria-query@npm:5.3.2"
@@ -26031,13 +25968,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dom-accessibility-api@npm:^0.5.9":
-  version: 0.5.16
-  resolution: "dom-accessibility-api@npm:0.5.16"
-  checksum: 10c0/b2c2eda4fae568977cdac27a9f0c001edf4f95a6a6191dfa611e3721db2478d1badc01db5bb4fa8a848aeee13e442a6c2a4386d65ec65a1436f24715a2f8d053
-  languageName: node
-  linkType: hard
-
 "dom-accessibility-api@npm:^0.6.3":
   version: 0.6.3
   resolution: "dom-accessibility-api@npm:0.6.3"
@@ -33006,7 +32936,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jsesc@npm:^3.0.2, jsesc@npm:^3.1.0, jsesc@npm:~3.1.0":
+"jsesc@npm:^3.0.2, jsesc@npm:~3.0.2":
+  version: 3.0.2
+  resolution: "jsesc@npm:3.0.2"
+  bin:
+    jsesc: bin/jsesc
+  checksum: 10c0/ef22148f9e793180b14d8a145ee6f9f60f301abf443288117b4b6c53d0ecd58354898dc506ccbb553a5f7827965cd38bc5fb726575aae93c5e8915e2de8290e1
+  languageName: node
+  linkType: hard
+
+"jsesc@npm:^3.1.0, jsesc@npm:~3.1.0":
   version: 3.1.0
   resolution: "jsesc@npm:3.1.0"
   bin:
@@ -33024,15 +32963,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jsesc@npm:~3.0.2":
-  version: 3.0.2
-  resolution: "jsesc@npm:3.0.2"
-  bin:
-    jsesc: bin/jsesc
-  checksum: 10c0/ef22148f9e793180b14d8a145ee6f9f60f301abf443288117b4b6c53d0ecd58354898dc506ccbb553a5f7827965cd38bc5fb726575aae93c5e8915e2de8290e1
-  languageName: node
-  linkType: hard
-
 "json-bigint@npm:^1.0.0":
   version: 1.0.0
   resolution: "json-bigint@npm:1.0.0"
@@ -34460,7 +34390,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lz-string@npm:^1.4.4, lz-string@npm:^1.5.0":
+"lz-string@npm:^1.4.4":
   version: 1.5.0
   resolution: "lz-string@npm:1.5.0"
   bin:
@@ -38102,7 +38032,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"picocolors@npm:1.1.1, picocolors@npm:^1.0.0, picocolors@npm:^1.1.0, picocolors@npm:^1.1.1":
+"picocolors@npm:^1.0.0, picocolors@npm:^1.1.0, picocolors@npm:^1.1.1":
   version: 1.1.1
   resolution: "picocolors@npm:1.1.1"
   checksum: 10c0/e2e3e8170ab9d7c7421969adaa7e1b31434f789afb9b3f115f6b96d91945041ac3ceb02e9ec6fe6510ff036bcc0bf91e69a1772edc0b707e12b19c0f2d6bcf58
@@ -38638,17 +38568,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pretty-format@npm:^27.0.2":
-  version: 27.5.1
-  resolution: "pretty-format@npm:27.5.1"
-  dependencies:
-    ansi-regex: "npm:^5.0.1"
-    ansi-styles: "npm:^5.0.0"
-    react-is: "npm:^17.0.1"
-  checksum: 10c0/0cbda1031aa30c659e10921fa94e0dd3f903ecbbbe7184a729ad66f2b6e7f17891e8c7d7654c458fa4ccb1a411ffb695b4f17bbcd3fe075fabe181027c4040ed
-  languageName: node
-  linkType: hard
-
 "pretty-ms@npm:^9.2.0":
   version: 9.3.0
   resolution: "pretty-ms@npm:9.3.0"
@@ -39480,7 +39399,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:^17.0.1, react-is@npm:^17.0.2":
+"react-is@npm:^17.0.2":
   version: 17.0.2
   resolution: "react-is@npm:17.0.2"
   checksum: 10c0/2bdb6b93fbb1820b024b496042cce405c57e2f85e777c9aabd55f9b26d145408f9f74f5934676ffdc46f3dcff656d78413a6e43968e7b3f92eea35b3052e9053

From 6912c7bdbc15ce2bec16e72d23d623547c171321 Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Mon, 9 Mar 2026 21:13:42 +0100
Subject: [PATCH 12/25] H-5655: Make Delete/Backspace work globally and support
 all item types

Move deletion keyboard handling from SDCPNView's onKeyDown to the global
keyboard shortcuts hook using useEffectEvent, so Delete/Backspace works
from anywhere in Petrinaut. Extend deleteItemsByIds to also handle types,
differential equations, and parameters.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../petrinaut/src/state/sdcpn-provider.tsx    |  28 +++-
 .../BottomBar/use-keyboard-shortcuts.ts       | 139 ++++++++++--------
 .../petrinaut/src/views/SDCPN/sdcpn-view.tsx  |  20 +--
 3 files changed, 105 insertions(+), 82 deletions(-)

diff --git a/libs/@hashintel/petrinaut/src/state/sdcpn-provider.tsx b/libs/@hashintel/petrinaut/src/state/sdcpn-provider.tsx
index aa2efd6fd93..170396dd86d 100644
--- a/libs/@hashintel/petrinaut/src/state/sdcpn-provider.tsx
+++ b/libs/@hashintel/petrinaut/src/state/sdcpn-provider.tsx
@@ -314,10 +314,6 @@ export const SDCPNProvider: React.FC<SDCPNProviderProps> = ({
             }
           }
 
-          /**
-           * If we have no more ids we can return now.
-           * Places aren't referred to by anything else, so no more ids == no places to delete.
-           */
           if (idsToProcess.size === 0) {
             return;
           }
@@ -330,6 +326,30 @@ export const SDCPNProvider: React.FC<SDCPNProviderProps> = ({
             idsToProcess.delete(place.id);
           }
         }
+
+        for (let i = sdcpn.types.length - 1; i >= 0; i--) {
+          const type = sdcpn.types[i]!;
+          if (idsToProcess.has(type.id)) {
+            sdcpn.types.splice(i, 1);
+            idsToProcess.delete(type.id);
+          }
+        }
+
+        for (let i = sdcpn.differentialEquations.length - 1; i >= 0; i--) {
+          const equation = sdcpn.differentialEquations[i]!;
+          if (idsToProcess.has(equation.id)) {
+            sdcpn.differentialEquations.splice(i, 1);
+            idsToProcess.delete(equation.id);
+          }
+        }
+
+        for (let i = sdcpn.parameters.length - 1; i >= 0; i--) {
+          const parameter = sdcpn.parameters[i]!;
+          if (idsToProcess.has(parameter.id)) {
+            sdcpn.parameters.splice(i, 1);
+            idsToProcess.delete(parameter.id);
+          }
+        }
       });
     },
     async layoutGraph() {
diff --git a/libs/@hashintel/petrinaut/src/views/Editor/components/BottomBar/use-keyboard-shortcuts.ts b/libs/@hashintel/petrinaut/src/views/Editor/components/BottomBar/use-keyboard-shortcuts.ts
index df4edfeb770..467a90f4370 100644
--- a/libs/@hashintel/petrinaut/src/views/Editor/components/BottomBar/use-keyboard-shortcuts.ts
+++ b/libs/@hashintel/petrinaut/src/views/Editor/components/BottomBar/use-keyboard-shortcuts.ts
@@ -1,7 +1,10 @@
-import { use, useEffect } from "react";
+import { use, useEffect, useEffectEvent } from "react";
 
 import type { CursorMode, EditorState } from "../../../../state/editor-context";
+import { EditorContext } from "../../../../state/editor-context";
+import { SDCPNContext } from "../../../../state/sdcpn-context";
 import { UndoRedoContext } from "../../../../state/undo-redo-context";
+import { useIsReadOnly } from "../../../../state/use-is-read-only";
 
 type EditorMode = EditorState["globalMode"];
 type EditorEditionMode = EditorState["editionMode"];
@@ -12,78 +15,94 @@ export function useKeyboardShortcuts(
   onCursorModeChange: (mode: CursorMode) => void,
 ) {
   const undoRedo = use(UndoRedoContext);
+  const { selection, clearSelection } = use(EditorContext);
+  const { deleteItemsByIds, readonly } = use(SDCPNContext);
+  const isSimulationReadOnly = useIsReadOnly();
+  const isReadonly = isSimulationReadOnly || readonly;
 
-  useEffect(() => {
-    function handleKeyDown(event: KeyboardEvent) {
-      const target = event.target as HTMLElement;
+  const handleKeyDown = useEffectEvent((event: KeyboardEvent) => {
+    const target = event.target as HTMLElement;
 
-      const isInputFocused =
-        target.tagName === "INPUT" ||
-        target.tagName === "TEXTAREA" ||
-        target.isContentEditable ||
-        target.closest(".monaco-editor") !== null ||
-        target.closest("#sentry-feedback") !== null;
+    const isInputFocused =
+      target.tagName === "INPUT" ||
+      target.tagName === "TEXTAREA" ||
+      target.isContentEditable ||
+      target.closest(".monaco-editor") !== null ||
+      target.closest("#sentry-feedback") !== null;
 
-      // Handle undo/redo shortcuts, but let inputs handle their own undo/redo.
-      if (
-        undoRedo &&
-        !isInputFocused &&
-        (event.metaKey || event.ctrlKey) &&
-        event.key.toLowerCase() === "z"
-      ) {
-        event.preventDefault();
-        if (event.shiftKey) {
-          undoRedo.redo();
-        } else {
-          undoRedo.undo();
-        }
-        return;
+    // Handle undo/redo shortcuts, but let inputs handle their own undo/redo.
+    if (
+      undoRedo &&
+      !isInputFocused &&
+      (event.metaKey || event.ctrlKey) &&
+      event.key.toLowerCase() === "z"
+    ) {
+      event.preventDefault();
+      if (event.shiftKey) {
+        undoRedo.redo();
+      } else {
+        undoRedo.undo();
       }
+      return;
+    }
 
-      if (isInputFocused) {
-        return;
-      }
+    if (isInputFocused) {
+      return;
+    }
 
-      // Check that no modifier keys are pressed
-      if (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) {
-        return;
-      }
+    // Delete selected items with Backspace or Delete
+    if (
+      (event.key === "Delete" || event.key === "Backspace") &&
+      !isReadonly &&
+      selection.size > 0
+    ) {
+      event.preventDefault();
+      deleteItemsByIds(new Set(selection.keys()));
+      clearSelection();
+      return;
+    }
 
-      // Switch modes based on key
-      switch (event.key.toLowerCase()) {
-        // If escape is pressed, switch to cursor mode (keep current cursor)
-        case "escape":
-          event.preventDefault();
-          onEditionModeChange("cursor");
-          break;
-        case "v":
+    // Check that no modifier keys are pressed
+    if (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) {
+      return;
+    }
+
+    // Switch modes based on key
+    switch (event.key.toLowerCase()) {
+      // If escape is pressed, switch to cursor mode (keep current cursor)
+      case "escape":
+        event.preventDefault();
+        onEditionModeChange("cursor");
+        break;
+      case "v":
+        event.preventDefault();
+        onCursorModeChange("select");
+        onEditionModeChange("cursor");
+        break;
+      case "h":
+        event.preventDefault();
+        onCursorModeChange("pan");
+        onEditionModeChange("cursor");
+        break;
+      case "n":
+        if (mode === "edit") {
           event.preventDefault();
-          onCursorModeChange("select");
-          onEditionModeChange("cursor");
-          break;
-        case "h":
+          onEditionModeChange("add-place");
+        }
+        break;
+      case "t":
+        if (mode === "edit") {
           event.preventDefault();
-          onCursorModeChange("pan");
-          onEditionModeChange("cursor");
-          break;
-        case "n":
-          if (mode === "edit") {
-            event.preventDefault();
-            onEditionModeChange("add-place");
-          }
-          break;
-        case "t":
-          if (mode === "edit") {
-            event.preventDefault();
-            onEditionModeChange("add-transition");
-          }
-          break;
-      }
+          onEditionModeChange("add-transition");
+        }
+        break;
     }
+  });
 
+  useEffect(() => {
     window.addEventListener("keydown", handleKeyDown);
     return () => {
       window.removeEventListener("keydown", handleKeyDown);
     };
-  }, [mode, onEditionModeChange, onCursorModeChange, undoRedo]);
+  }, [handleKeyDown]);
 }
diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.tsx b/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.tsx
index a4217e6bbb5..875d7bb61fd 100644
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.tsx
+++ b/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.tsx
@@ -66,20 +66,13 @@ export const SDCPNView: React.FC = () => {
   );
 
   // SDCPN store
-  const {
-    petriNetId,
-    addPlace,
-    addTransition,
-    addArc,
-    deleteItemsByIds,
-    readonly,
-  } = use(SDCPNContext);
+  const { petriNetId, addPlace, addTransition, addArc, readonly } =
+    use(SDCPNContext);
 
   const {
     editionMode,
     setEditionMode,
     cursorMode,
-    selection,
     selectItem,
     clearSelection,
   } = use(EditorContext);
@@ -302,7 +295,6 @@ export const SDCPNView: React.FC = () => {
   };
 
   return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     <div
       ref={canvasContainer}
       className={canvasContainerStyle}
@@ -310,14 +302,6 @@ export const SDCPNView: React.FC = () => {
         // @ts-expect-error CSS variables work at runtime, but are not in the type system
         "--pane-cursor": getCursorStyle() as string,
       }}
-      onKeyDown={({ key }) => {
-        // Quick-and-dirty way to delete selected items with keyboard
-        // with two different keys (Delete and Backspace), not possible with ReactFlow `deleteKeyCode` prop
-        if ((key === "Delete" || key === "Backspace") && !isReadonly) {
-          deleteItemsByIds(new Set(selection.keys()));
-          clearSelection();
-        }
-      }}
     >
       <ReactFlow
         nodes={nodes}

From cba394c1d7dcca01c2ce53965b9330f886cc8f00 Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Mon, 9 Mar 2026 23:07:46 +0100
Subject: [PATCH 13/25] H-5655: Add isSelected/hasSelection to EditorContext
 and type deleteItemsByIds

Expose `isSelected(id)` and `hasSelection` from EditorContext so consumers
no longer need direct access to the SelectionMap for simple lookups. Change
`deleteItemsByIds` to accept typed SelectionMap, enabling it to partition
by item type and skip irrelevant collections. Migrate all 12 UI consumers.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../petrinaut/src/state/editor-context.ts     |   6 +
 .../petrinaut/src/state/editor-provider.tsx   |  50 +++---
 .../petrinaut/src/state/sdcpn-context.ts      |   3 +-
 .../petrinaut/src/state/sdcpn-provider.tsx    | 153 ++++++++++--------
 .../BottomBar/use-keyboard-shortcuts.ts       |   6 +-
 .../subviews/differential-equations-list.tsx  |   6 +-
 .../LeftSideBar/subviews/nodes-list.tsx       |  24 +--
 .../LeftSideBar/subviews/parameters-list.tsx  |   6 +-
 .../LeftSideBar/subviews/types-list.tsx       |   6 +-
 .../PropertiesPanel/multi-selection-panel.tsx |   8 +-
 .../src/views/SDCPN/components/arc.tsx        |   4 +-
 .../SDCPN/components/classic-place-node.tsx   |   4 +-
 .../components/classic-transition-node.tsx    |   4 +-
 .../src/views/SDCPN/components/mini-map.tsx   |   4 +-
 .../src/views/SDCPN/components/place-node.tsx |   4 +-
 .../SDCPN/components/transition-node.tsx      |   4 +-
 .../SDCPN/components/viewport-controls.tsx    |   4 +-
 .../SDCPN/hooks/use-sdcpn-to-react-flow.ts    |  10 +-
 18 files changed, 171 insertions(+), 135 deletions(-)

diff --git a/libs/@hashintel/petrinaut/src/state/editor-context.ts b/libs/@hashintel/petrinaut/src/state/editor-context.ts
index 27291e556de..1d4a971fc35 100644
--- a/libs/@hashintel/petrinaut/src/state/editor-context.ts
+++ b/libs/@hashintel/petrinaut/src/state/editor-context.ts
@@ -36,6 +36,8 @@ export type EditorState = {
   bottomPanelHeight: number;
   activeBottomPanelTab: BottomPanelTab;
   selection: SelectionMap;
+  /** Whether any items are currently selected. */
+  hasSelection: boolean;
   draggingStateByNodeId: DraggingStateByNodeId;
   timelineChartType: TimelineChartType;
   isPanelAnimating: boolean;
@@ -55,6 +57,8 @@ export type EditorActions = {
   toggleBottomPanel: () => void;
   setBottomPanelHeight: (height: number) => void;
   setActiveBottomPanelTab: (tab: BottomPanelTab) => void;
+  /** Check whether a given ID is in the current selection. */
+  isSelected: (id: string) => boolean;
   setSelection: (
     selection: SelectionMap | ((prev: SelectionMap) => SelectionMap),
   ) => void;
@@ -87,6 +91,7 @@ export const initialEditorState: EditorState = {
   bottomPanelHeight: DEFAULT_BOTTOM_PANEL_HEIGHT,
   activeBottomPanelTab: "diagnostics",
   selection: new Map(),
+  hasSelection: false,
   draggingStateByNodeId: {},
   timelineChartType: "run",
   isPanelAnimating: false,
@@ -104,6 +109,7 @@ const DEFAULT_CONTEXT_VALUE: EditorContextValue = {
   toggleBottomPanel: () => {},
   setBottomPanelHeight: () => {},
   setActiveBottomPanelTab: () => {},
+  isSelected: () => false,
   setSelection: () => {},
   selectItem: () => {},
   toggleItem: () => {},
diff --git a/libs/@hashintel/petrinaut/src/state/editor-provider.tsx b/libs/@hashintel/petrinaut/src/state/editor-provider.tsx
index 8e35e58c924..e33a84d0114 100644
--- a/libs/@hashintel/petrinaut/src/state/editor-provider.tsx
+++ b/libs/@hashintel/petrinaut/src/state/editor-provider.tsx
@@ -1,4 +1,4 @@
-import { use, useRef, useState } from "react";
+import { use, useCallback, useRef, useState } from "react";
 
 import {
   type DraggingStateByNodeId,
@@ -45,7 +45,7 @@ export const EditorProvider: React.FC<EditorProviderProps> = ({ children }) => {
     }, 500);
   };
 
-  const actions: EditorActions = {
+  const actions: Omit<EditorActions, "isSelected"> = {
     setGlobalMode: (mode) =>
       setState((prev) => ({ ...prev, globalMode: mode })),
     setEditionMode: (mode) =>
@@ -83,22 +83,19 @@ export const EditorProvider: React.FC<EditorProviderProps> = ({ children }) => {
           typeof selectionOrUpdater === "function"
             ? selectionOrUpdater(prev.selection)
             : selectionOrUpdater;
-        const visibilityChanged =
-          (prev.selection.size === 0) !== (selection.size === 0);
-        if (visibilityChanged) {
+        const hasSelection = selection.size > 0;
+        if (prev.hasSelection !== hasSelection) {
           triggerPanelAnimation();
         }
-        return { ...prev, selection };
+        return { ...prev, selection, hasSelection };
       }),
     selectItem: (item: SelectionItem) => {
       setState((prev) => {
-        const wasEmpty = prev.selection.size === 0;
         const newSelection: SelectionMap = new Map([[item.id, item]]);
-        const willBeEmpty = false;
-        if (wasEmpty !== willBeEmpty) {
+        if (!prev.hasSelection) {
           triggerPanelAnimation();
         }
-        return { ...prev, selection: newSelection };
+        return { ...prev, selection: newSelection, hasSelection: true };
       });
     },
     toggleItem: (item: SelectionItem) => {
@@ -109,12 +106,11 @@ export const EditorProvider: React.FC<EditorProviderProps> = ({ children }) => {
         } else {
           newSelection.set(item.id, item);
         }
-        const visibilityChanged =
-          (prev.selection.size === 0) !== (newSelection.size === 0);
-        if (visibilityChanged) {
+        const hasSelection = newSelection.size > 0;
+        if (prev.hasSelection !== hasSelection) {
           triggerPanelAnimation();
         }
-        return { ...prev, selection: newSelection };
+        return { ...prev, selection: newSelection, hasSelection };
       });
     },
     addToSelection: (items: SelectionItem[]) => {
@@ -123,12 +119,11 @@ export const EditorProvider: React.FC<EditorProviderProps> = ({ children }) => {
         for (const item of items) {
           newSelection.set(item.id, item);
         }
-        const visibilityChanged =
-          (prev.selection.size === 0) !== (newSelection.size === 0);
-        if (visibilityChanged) {
+        const hasSelection = newSelection.size > 0;
+        if (prev.hasSelection !== hasSelection) {
           triggerPanelAnimation();
         }
-        return { ...prev, selection: newSelection };
+        return { ...prev, selection: newSelection, hasSelection };
       });
     },
     removeFromSelection: (ids: string[]) => {
@@ -137,20 +132,19 @@ export const EditorProvider: React.FC<EditorProviderProps> = ({ children }) => {
         for (const id of ids) {
           newSelection.delete(id);
         }
-        const visibilityChanged =
-          (prev.selection.size === 0) !== (newSelection.size === 0);
-        if (visibilityChanged) {
+        const hasSelection = newSelection.size > 0;
+        if (prev.hasSelection !== hasSelection) {
           triggerPanelAnimation();
         }
-        return { ...prev, selection: newSelection };
+        return { ...prev, selection: newSelection, hasSelection };
       });
     },
     clearSelection: () => {
       setState((prev) => {
-        if (prev.selection.size > 0) {
+        if (prev.hasSelection) {
           triggerPanelAnimation();
         }
-        return { ...prev, selection: new Map() };
+        return { ...prev, selection: new Map(), hasSelection: false };
       });
     },
     setDraggingStateByNodeId: (draggingState: DraggingStateByNodeId) =>
@@ -169,6 +163,7 @@ export const EditorProvider: React.FC<EditorProviderProps> = ({ children }) => {
         isLeftSidebarOpen: false,
         isBottomPanelOpen: false,
         selection: new Map(),
+        hasSelection: false,
       }));
     },
     setTimelineChartType: (chartType) =>
@@ -188,9 +183,16 @@ export const EditorProvider: React.FC<EditorProviderProps> = ({ children }) => {
     timelineChartType: state.timelineChartType,
   });
 
+  const { selection } = state;
+  const isSelected = useCallback(
+    (id: string) => selection.has(id),
+    [selection],
+  );
+
   const contextValue: EditorContextValue = {
     ...state,
     ...actions,
+    isSelected,
   };
 
   return (
diff --git a/libs/@hashintel/petrinaut/src/state/sdcpn-context.ts b/libs/@hashintel/petrinaut/src/state/sdcpn-context.ts
index fe8ed71b96e..008339c9799 100644
--- a/libs/@hashintel/petrinaut/src/state/sdcpn-context.ts
+++ b/libs/@hashintel/petrinaut/src/state/sdcpn-context.ts
@@ -10,6 +10,7 @@ import type {
   SDCPN,
   Transition,
 } from "../core/types/sdcpn";
+import type { SelectionMap } from "./selection";
 
 export const ARC_ID_PREFIX = "$A_";
 export type ArcIdPrefix = typeof ARC_ID_PREFIX;
@@ -101,7 +102,7 @@ export type MutationHelperFunctions = {
     | "differentialEquation"
     | "parameter"
     | null;
-  deleteItemsByIds: (ids: Set<string>) => void;
+  deleteItemsByIds: (items: SelectionMap) => void;
   layoutGraph: () => Promise<void>;
 };
 
diff --git a/libs/@hashintel/petrinaut/src/state/sdcpn-provider.tsx b/libs/@hashintel/petrinaut/src/state/sdcpn-provider.tsx
index 170396dd86d..957cdd4a4d5 100644
--- a/libs/@hashintel/petrinaut/src/state/sdcpn-provider.tsx
+++ b/libs/@hashintel/petrinaut/src/state/sdcpn-provider.tsx
@@ -261,93 +261,114 @@ export const SDCPNProvider: React.FC<SDCPNProviderProps> = ({
 
       return null;
     },
-    deleteItemsByIds(ids) {
+    deleteItemsByIds(items) {
       rest.mutatePetriNetDefinition((sdcpn) => {
-        const idsToProcess = new Set(ids);
+        // Partition selection by type for targeted deletion
+        const placeIds = new Set<string>();
+        const transitionIds = new Set<string>();
+        const arcIds = new Set<string>();
+        const typeIds = new Set<string>();
+        const equationIds = new Set<string>();
+        const parameterIds = new Set<string>();
 
-        /**
-         * Deal with the transitions first because we always need to check them,
-         * in case they, an arc within them or a place referenced by an arc is being deleted.
-         */
-        for (let i = sdcpn.transitions.length - 1; i >= 0; i--) {
-          const transition = sdcpn.transitions[i]!;
-          if (idsToProcess.has(transition.id)) {
-            sdcpn.transitions.splice(i, 1);
-            idsToProcess.delete(transition.id);
-            continue;
+        for (const [id, item] of items) {
+          switch (item.type) {
+            case "place":
+              placeIds.add(id);
+              break;
+            case "transition":
+              transitionIds.add(id);
+              break;
+            case "arc":
+              arcIds.add(id);
+              break;
+            case "type":
+              typeIds.add(id);
+              break;
+            case "differentialEquation":
+              equationIds.add(id);
+              break;
+            case "parameter":
+              parameterIds.add(id);
+              break;
           }
+        }
 
-          for (
-            let inputArcIndex = transition.inputArcs.length - 1;
-            inputArcIndex >= 0;
-            inputArcIndex--
-          ) {
-            const inputArc = transition.inputArcs[inputArcIndex]!;
-            const arcId = generateArcId({
-              inputId: inputArc.placeId,
-              outputId: transition.id,
-            });
+        // Transitions need special handling: we always iterate them when places,
+        // transitions, or arcs are being deleted, because arcs live inside transitions
+        // and deleting a place must cascade to remove its connected arcs.
+        const hasCanvasDeletes =
+          placeIds.size > 0 || transitionIds.size > 0 || arcIds.size > 0;
 
-            if (idsToProcess.has(arcId) || idsToProcess.has(inputArc.placeId)) {
-              transition.inputArcs.splice(inputArcIndex, 1);
-              idsToProcess.delete(arcId);
+        if (hasCanvasDeletes) {
+          for (let i = sdcpn.transitions.length - 1; i >= 0; i--) {
+            const transition = sdcpn.transitions[i]!;
+            if (transitionIds.has(transition.id)) {
+              sdcpn.transitions.splice(i, 1);
+              continue;
             }
-          }
-
-          for (
-            let outputArcIndex = transition.outputArcs.length - 1;
-            outputArcIndex >= 0;
-            outputArcIndex--
-          ) {
-            const outputArc = transition.outputArcs[outputArcIndex]!;
-            const arcId = generateArcId({
-              inputId: transition.id,
-              outputId: outputArc.placeId,
-            });
 
-            if (
-              idsToProcess.has(arcId) ||
-              idsToProcess.has(outputArc.placeId)
+            for (
+              let arcIdx = transition.inputArcs.length - 1;
+              arcIdx >= 0;
+              arcIdx--
             ) {
-              transition.outputArcs.splice(outputArcIndex, 1);
-              idsToProcess.delete(arcId);
+              const inputArc = transition.inputArcs[arcIdx]!;
+              const arcId = generateArcId({
+                inputId: inputArc.placeId,
+                outputId: transition.id,
+              });
+
+              if (arcIds.has(arcId) || placeIds.has(inputArc.placeId)) {
+                transition.inputArcs.splice(arcIdx, 1);
+              }
             }
-          }
 
-          if (idsToProcess.size === 0) {
-            return;
+            for (
+              let arcIdx = transition.outputArcs.length - 1;
+              arcIdx >= 0;
+              arcIdx--
+            ) {
+              const outputArc = transition.outputArcs[arcIdx]!;
+              const arcId = generateArcId({
+                inputId: transition.id,
+                outputId: outputArc.placeId,
+              });
+
+              if (arcIds.has(arcId) || placeIds.has(outputArc.placeId)) {
+                transition.outputArcs.splice(arcIdx, 1);
+              }
+            }
           }
-        }
 
-        for (let i = sdcpn.places.length - 1; i >= 0; i--) {
-          const place = sdcpn.places[i]!;
-          if (idsToProcess.has(place.id)) {
-            sdcpn.places.splice(i, 1);
-            idsToProcess.delete(place.id);
+          for (let i = sdcpn.places.length - 1; i >= 0; i--) {
+            if (placeIds.has(sdcpn.places[i]!.id)) {
+              sdcpn.places.splice(i, 1);
+            }
           }
         }
 
-        for (let i = sdcpn.types.length - 1; i >= 0; i--) {
-          const type = sdcpn.types[i]!;
-          if (idsToProcess.has(type.id)) {
-            sdcpn.types.splice(i, 1);
-            idsToProcess.delete(type.id);
+        if (typeIds.size > 0) {
+          for (let i = sdcpn.types.length - 1; i >= 0; i--) {
+            if (typeIds.has(sdcpn.types[i]!.id)) {
+              sdcpn.types.splice(i, 1);
+            }
           }
         }
 
-        for (let i = sdcpn.differentialEquations.length - 1; i >= 0; i--) {
-          const equation = sdcpn.differentialEquations[i]!;
-          if (idsToProcess.has(equation.id)) {
-            sdcpn.differentialEquations.splice(i, 1);
-            idsToProcess.delete(equation.id);
+        if (equationIds.size > 0) {
+          for (let i = sdcpn.differentialEquations.length - 1; i >= 0; i--) {
+            if (equationIds.has(sdcpn.differentialEquations[i]!.id)) {
+              sdcpn.differentialEquations.splice(i, 1);
+            }
           }
         }
 
-        for (let i = sdcpn.parameters.length - 1; i >= 0; i--) {
-          const parameter = sdcpn.parameters[i]!;
-          if (idsToProcess.has(parameter.id)) {
-            sdcpn.parameters.splice(i, 1);
-            idsToProcess.delete(parameter.id);
+        if (parameterIds.size > 0) {
+          for (let i = sdcpn.parameters.length - 1; i >= 0; i--) {
+            if (parameterIds.has(sdcpn.parameters[i]!.id)) {
+              sdcpn.parameters.splice(i, 1);
+            }
           }
         }
       });
diff --git a/libs/@hashintel/petrinaut/src/views/Editor/components/BottomBar/use-keyboard-shortcuts.ts b/libs/@hashintel/petrinaut/src/views/Editor/components/BottomBar/use-keyboard-shortcuts.ts
index 467a90f4370..6a4e6478f1d 100644
--- a/libs/@hashintel/petrinaut/src/views/Editor/components/BottomBar/use-keyboard-shortcuts.ts
+++ b/libs/@hashintel/petrinaut/src/views/Editor/components/BottomBar/use-keyboard-shortcuts.ts
@@ -15,7 +15,7 @@ export function useKeyboardShortcuts(
   onCursorModeChange: (mode: CursorMode) => void,
 ) {
   const undoRedo = use(UndoRedoContext);
-  const { selection, clearSelection } = use(EditorContext);
+  const { selection, hasSelection, clearSelection } = use(EditorContext);
   const { deleteItemsByIds, readonly } = use(SDCPNContext);
   const isSimulationReadOnly = useIsReadOnly();
   const isReadonly = isSimulationReadOnly || readonly;
@@ -54,10 +54,10 @@ export function useKeyboardShortcuts(
     if (
       (event.key === "Delete" || event.key === "Backspace") &&
       !isReadonly &&
-      selection.size > 0
+      hasSelection
     ) {
       event.preventDefault();
-      deleteItemsByIds(new Set(selection.keys()));
+      deleteItemsByIds(selection);
       clearSelection();
       return;
     }
diff --git a/libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/differential-equations-list.tsx b/libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/differential-equations-list.tsx
index 3ebf3fa512f..21f4892b107 100644
--- a/libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/differential-equations-list.tsx
+++ b/libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/differential-equations-list.tsx
@@ -67,14 +67,14 @@ const DifferentialEquationsSectionContent: React.FC = () => {
     removeDifferentialEquation,
   } = use(SDCPNContext);
 
-  const { selection, selectItem, toggleItem } = use(EditorContext);
+  const { isSelected, selectItem, toggleItem } = use(EditorContext);
 
   const isReadOnly = useIsReadOnly();
 
   return (
     <div className={listContainerStyle}>
       {differentialEquations.map((eq) => {
-        const isSelected = selection.has(eq.id);
+        const eqSelected = isSelected(eq.id);
         const item: SelectionItem = {
           type: "differentialEquation",
           id: eq.id,
@@ -104,7 +104,7 @@ const DifferentialEquationsSectionContent: React.FC = () => {
                 selectItem(item);
               }
             }}
-            className={equationRowStyle({ isSelected })}
+            className={equationRowStyle({ isSelected: eqSelected })}
           >
             <div className={equationNameContainerStyle}>
               <span>{eq.name}</span>
diff --git a/libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/nodes-list.tsx b/libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/nodes-list.tsx
index 1d6e40cf165..7d9dd66c51e 100644
--- a/libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/nodes-list.tsx
+++ b/libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/nodes-list.tsx
@@ -91,7 +91,7 @@ const NodesSectionContent: React.FC = () => {
   const {
     petriNetDefinition: { places, transitions },
   } = use(SDCPNContext);
-  const { selection, selectItem, toggleItem } = use(EditorContext);
+  const { isSelected, selectItem, toggleItem } = use(EditorContext);
 
   const handleLayerClick = (event: React.MouseEvent, item: SelectionItem) => {
     if (event.metaKey || event.ctrlKey) {
@@ -105,7 +105,7 @@ const NodesSectionContent: React.FC = () => {
     <div className={listContainerStyle}>
       {/* Places */}
       {places.map((place) => {
-        const isSelected = selection.has(place.id);
+        const placeSelected = isSelected(place.id);
         const item: SelectionItem = { type: "place", id: place.id };
         return (
           <div
@@ -119,10 +119,13 @@ const NodesSectionContent: React.FC = () => {
                 selectItem(item);
               }
             }}
-            className={nodeRowStyle({ isSelected })}
+            className={nodeRowStyle({ isSelected: placeSelected })}
           >
-            <FaCircle size={12} className={nodeIconStyle({ isSelected })} />
-            <span className={nodeNameStyle({ isSelected })}>
+            <FaCircle
+              size={12}
+              className={nodeIconStyle({ isSelected: placeSelected })}
+            />
+            <span className={nodeNameStyle({ isSelected: placeSelected })}>
               {place.name || `Place ${place.id}`}
             </span>
           </div>
@@ -131,7 +134,7 @@ const NodesSectionContent: React.FC = () => {
 
       {/* Transitions */}
       {transitions.map((transition) => {
-        const isSelected = selection.has(transition.id);
+        const transitionSelected = isSelected(transition.id);
         const item: SelectionItem = {
           type: "transition",
           id: transition.id,
@@ -148,10 +151,13 @@ const NodesSectionContent: React.FC = () => {
                 selectItem(item);
               }
             }}
-            className={nodeRowStyle({ isSelected })}
+            className={nodeRowStyle({ isSelected: transitionSelected })}
           >
-            <FaSquare size={12} className={nodeIconStyle({ isSelected })} />
-            <span className={nodeNameStyle({ isSelected })}>
+            <FaSquare
+              size={12}
+              className={nodeIconStyle({ isSelected: transitionSelected })}
+            />
+            <span className={nodeNameStyle({ isSelected: transitionSelected })}>
               {transition.name || `Transition ${transition.id}`}
             </span>
           </div>
diff --git a/libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/parameters-list.tsx b/libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/parameters-list.tsx
index f68ebabec79..3745aff7cce 100644
--- a/libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/parameters-list.tsx
+++ b/libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/parameters-list.tsx
@@ -117,7 +117,7 @@ const ParametersList: React.FC = () => {
     petriNetDefinition: { parameters },
     removeParameter,
   } = use(SDCPNContext);
-  const { globalMode, selection, selectItem, toggleItem } = use(EditorContext);
+  const { globalMode, isSelected, selectItem, toggleItem } = use(EditorContext);
   const {
     state: simulationState,
     parameterValues,
@@ -133,7 +133,7 @@ const ParametersList: React.FC = () => {
     <div>
       <div className={listContainerStyle}>
         {parameters.map((param) => {
-          const isSelected = selection.has(param.id);
+          const paramSelected = isSelected(param.id);
           const item: SelectionItem = { type: "parameter", id: param.id };
 
           return (
@@ -161,7 +161,7 @@ const ParametersList: React.FC = () => {
                   selectItem(item);
                 }
               }}
-              className={parameterRowStyle({ isSelected })}
+              className={parameterRowStyle({ isSelected: paramSelected })}
             >
               <div>
                 <div>{param.name}</div>
diff --git a/libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/types-list.tsx b/libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/types-list.tsx
index f4d9ca76bf2..24039cd5ee6 100644
--- a/libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/types-list.tsx
+++ b/libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/types-list.tsx
@@ -118,14 +118,14 @@ const TypesSectionContent: React.FC = () => {
     removeType,
   } = use(SDCPNContext);
 
-  const { selection, selectItem, toggleItem } = use(EditorContext);
+  const { isSelected, selectItem, toggleItem } = use(EditorContext);
 
   const isReadOnly = useIsReadOnly();
 
   return (
     <div className={listContainerStyle}>
       {types.map((type) => {
-        const isSelected = selection.has(type.id);
+        const typeSelected = isSelected(type.id);
         const item: SelectionItem = { type: "type", id: type.id };
 
         return (
@@ -152,7 +152,7 @@ const TypesSectionContent: React.FC = () => {
                 selectItem(item);
               }
             }}
-            className={typeRowStyle({ isSelected })}
+            className={typeRowStyle({ isSelected: typeSelected })}
           >
             <div
               className={colorDotStyle}
diff --git a/libs/@hashintel/petrinaut/src/views/Editor/panels/PropertiesPanel/multi-selection-panel.tsx b/libs/@hashintel/petrinaut/src/views/Editor/panels/PropertiesPanel/multi-selection-panel.tsx
index ea0a7ebfd88..77ff920d313 100644
--- a/libs/@hashintel/petrinaut/src/views/Editor/panels/PropertiesPanel/multi-selection-panel.tsx
+++ b/libs/@hashintel/petrinaut/src/views/Editor/panels/PropertiesPanel/multi-selection-panel.tsx
@@ -7,7 +7,7 @@ import type { SubView } from "../../../../components/sub-view/types";
 import { VerticalSubViewsContainer } from "../../../../components/sub-view/vertical/vertical-sub-views-container";
 import { UI_MESSAGES } from "../../../../constants/ui-messages";
 import { EditorContext } from "../../../../state/editor-context";
-import type { SelectionItem } from "../../../../state/selection";
+import type { SelectionItem, SelectionMap } from "../../../../state/selection";
 import { useIsReadOnly } from "../../../../state/use-is-read-only";
 
 const containerStyle = css({
@@ -25,7 +25,7 @@ const summaryStyle = css({
 
 interface MultiSelectionData {
   items: SelectionItem[];
-  deleteItemsByIds: (ids: Set<string>) => void;
+  deleteItemsByIds: (items: SelectionMap) => void;
 }
 
 const MultiSelectionContext = createContext<MultiSelectionData | null>(null);
@@ -80,7 +80,7 @@ const DeleteSelectionAction: React.FC = () => {
       colorScheme="red"
       disabled={isReadOnly}
       onClick={() => {
-        deleteItemsByIds(new Set(items.map((item) => item.id)));
+        deleteItemsByIds(new Map(items.map((item) => [item.id, item])));
         clearSelection();
       }}
       tooltip={isReadOnly ? UI_MESSAGES.READ_ONLY_MODE : "Delete selected"}
@@ -102,7 +102,7 @@ const subViews: SubView[] = [multiSelectionMainSubView];
 
 interface MultiSelectionPanelProps {
   items: SelectionItem[];
-  deleteItemsByIds: (ids: Set<string>) => void;
+  deleteItemsByIds: (items: SelectionMap) => void;
 }
 
 export const MultiSelectionPanel: React.FC<MultiSelectionPanelProps> = ({
diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/components/arc.tsx b/libs/@hashintel/petrinaut/src/views/SDCPN/components/arc.tsx
index adb8a4677de..e3159a6362c 100644
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/components/arc.tsx
+++ b/libs/@hashintel/petrinaut/src/views/SDCPN/components/arc.tsx
@@ -179,11 +179,11 @@ export const Arc: React.FC<EdgeProps<ArcEdgeType>> = ({
   markerEnd,
 }) => {
   // Derive selected state from EditorContext
-  const { selection } = use(EditorContext);
+  const { isSelected } = use(EditorContext);
   const { arcRendering } = use(UserSettingsContext);
 
   // Check if this arc is selected by its ID
-  const selected = selection.has(id);
+  const selected = isSelected(id);
 
   // Track firing count delta for simulation visualization
   const firingDelta = useFiringDelta(data?.frame?.firingCount ?? null);
diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/components/classic-place-node.tsx b/libs/@hashintel/petrinaut/src/views/SDCPN/components/classic-place-node.tsx
index 4df47cdf35b..12f05e5752b 100644
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/components/classic-place-node.tsx
+++ b/libs/@hashintel/petrinaut/src/views/SDCPN/components/classic-place-node.tsx
@@ -113,7 +113,7 @@ export const ClassicPlaceNode: React.FC<NodeProps<PlaceNodeType>> = ({
   isConnectable,
   selected,
 }: NodeProps<PlaceNodeType>) => {
-  const { globalMode, selection } = use(EditorContext);
+  const { globalMode, isSelected } = use(EditorContext);
   const isSimulateMode = globalMode === "simulate";
   const { initialMarking } = use(SimulationContext);
   const { currentViewedFrame } = use(PlaybackContext);
@@ -129,7 +129,7 @@ export const ClassicPlaceNode: React.FC<NodeProps<PlaceNodeType>> = ({
   }
 
   // Determine selection state
-  const isInSelection = selection.has(id);
+  const isInSelection = isSelected(id);
   const selectionVariant = isInSelection
     ? "resource"
     : selected
diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/components/classic-transition-node.tsx b/libs/@hashintel/petrinaut/src/views/SDCPN/components/classic-transition-node.tsx
index 0e9fb28ca88..ed065f9302d 100644
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/components/classic-transition-node.tsx
+++ b/libs/@hashintel/petrinaut/src/views/SDCPN/components/classic-transition-node.tsx
@@ -159,7 +159,7 @@ export const ClassicTransitionNode: React.FC<NodeProps<TransitionNodeType>> = ({
 }: NodeProps<TransitionNodeType>) => {
   const { label } = data;
 
-  const { selection } = use(EditorContext);
+  const { isSelected } = use(EditorContext);
 
   // Refs for animated elements
   const boxRef = useRef<HTMLDivElement | null>(null);
@@ -172,7 +172,7 @@ export const ClassicTransitionNode: React.FC<NodeProps<TransitionNodeType>> = ({
   useFiringAnimation(boxRef, boltRef, firingDelta);
 
   // Determine selection state
-  const isInSelection = selection.has(id);
+  const isInSelection = isSelected(id);
   const selectionVariant = isInSelection
     ? "resource"
     : selected
diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/components/mini-map.tsx b/libs/@hashintel/petrinaut/src/views/SDCPN/components/mini-map.tsx
index 9d69ce4f08c..f1690dd5382 100644
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/components/mini-map.tsx
+++ b/libs/@hashintel/petrinaut/src/views/SDCPN/components/mini-map.tsx
@@ -82,10 +82,10 @@ const MiniMapNode: React.FC<MiniMapNodeProps> = ({ id, x, y }) => {
  * Positions at top-right, offset by properties panel width when visible.
  */
 export const MiniMap: React.FC<Omit<MiniMapProps, "style">> = (props) => {
-  const { selection, propertiesPanelWidth, isPanelAnimating } =
+  const { hasSelection, propertiesPanelWidth, isPanelAnimating } =
     use(EditorContext);
 
-  const isPropertiesPanelVisible = selection.size > 0;
+  const isPropertiesPanelVisible = hasSelection;
   const minimapOffset = 12;
   const panelOffset = isPropertiesPanelVisible
     ? propertiesPanelWidth + PANEL_MARGIN
diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/components/place-node.tsx b/libs/@hashintel/petrinaut/src/views/SDCPN/components/place-node.tsx
index bf34921b544..925c4fc3bc1 100644
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/components/place-node.tsx
+++ b/libs/@hashintel/petrinaut/src/views/SDCPN/components/place-node.tsx
@@ -52,7 +52,7 @@ export const PlaceNode: React.FC<NodeProps<PlaceNodeType>> = ({
   isConnectable,
   selected,
 }: NodeProps<PlaceNodeType>) => {
-  const { globalMode, selection } = use(EditorContext);
+  const { globalMode, isSelected } = use(EditorContext);
   const isSimulateMode = globalMode === "simulate";
   const { initialMarking } = use(SimulationContext);
   const { currentViewedFrame } = use(PlaybackContext);
@@ -68,7 +68,7 @@ export const PlaceNode: React.FC<NodeProps<PlaceNodeType>> = ({
   }
 
   // Determine selection state
-  const isInSelection = selection.has(id);
+  const isInSelection = isSelected(id);
   const selectionVariant: SelectionVariant = isInSelection
     ? "resource"
     : selected
diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/components/transition-node.tsx b/libs/@hashintel/petrinaut/src/views/SDCPN/components/transition-node.tsx
index 31e5484e58f..e5004cfe3d4 100644
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/components/transition-node.tsx
+++ b/libs/@hashintel/petrinaut/src/views/SDCPN/components/transition-node.tsx
@@ -107,7 +107,7 @@ export const TransitionNode: React.FC<NodeProps<TransitionNodeType>> = ({
 }: NodeProps<TransitionNodeType>) => {
   const { label } = data;
 
-  const { selection } = use(EditorContext);
+  const { isSelected } = use(EditorContext);
 
   // Refs for animated elements
   const boxRef = useRef<HTMLDivElement | null>(null);
@@ -120,7 +120,7 @@ export const TransitionNode: React.FC<NodeProps<TransitionNodeType>> = ({
   useFiringAnimation(boxRef, boltRef, firingDelta);
 
   // Determine selection state
-  const isInSelection = selection.has(id);
+  const isInSelection = isSelected(id);
   const selectionVariant: SelectionVariant = isInSelection
     ? "resource"
     : selected
diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/components/viewport-controls.tsx b/libs/@hashintel/petrinaut/src/views/SDCPN/components/viewport-controls.tsx
index cb9a02ea0be..e079354dcd8 100644
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/components/viewport-controls.tsx
+++ b/libs/@hashintel/petrinaut/src/views/SDCPN/components/viewport-controls.tsx
@@ -40,14 +40,14 @@ export const ViewportControls: React.FC = () => {
   const { zoomIn, zoomOut } = useReactFlow();
   const {
     collapseAllPanels,
-    selection,
+    hasSelection,
     propertiesPanelWidth,
     isBottomPanelOpen,
     bottomPanelHeight,
     isPanelAnimating,
   } = use(EditorContext);
 
-  const isPropertiesPanelVisible = selection.size > 0;
+  const isPropertiesPanelVisible = hasSelection;
   const rightOffset =
     BASE_OFFSET +
     (isPropertiesPanelVisible ? propertiesPanelWidth + PANEL_MARGIN : 0);
diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/hooks/use-sdcpn-to-react-flow.ts b/libs/@hashintel/petrinaut/src/views/SDCPN/hooks/use-sdcpn-to-react-flow.ts
index f5fe173a0b9..229887156f4 100644
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/hooks/use-sdcpn-to-react-flow.ts
+++ b/libs/@hashintel/petrinaut/src/views/SDCPN/hooks/use-sdcpn-to-react-flow.ts
@@ -27,7 +27,7 @@ import {
  */
 export function useSdcpnToReactFlow(): PetrinautReactFlowDefinitionObject {
   const { petriNetDefinition } = use(SDCPNContext);
-  const { draggingStateByNodeId, selection } = use(EditorContext);
+  const { draggingStateByNodeId, isSelected } = use(EditorContext);
   const { currentViewedFrame } = use(PlaybackContext);
   const { compactNodes } = use(UserSettingsContext);
 
@@ -58,7 +58,7 @@ export function useSdcpnToReactFlow(): PetrinautReactFlowDefinitionObject {
       height: dims.place.height,
       measured: { width: dims.place.width, height: dims.place.height },
       dragging: draggingState?.dragging ?? false,
-      selected: selection.has(place.id),
+      selected: isSelected(place.id),
       data: {
         label: place.name,
         type: "place",
@@ -89,7 +89,7 @@ export function useSdcpnToReactFlow(): PetrinautReactFlowDefinitionObject {
         height: dims.transition.height,
       },
       dragging: draggingState?.dragging ?? false,
-      selected: selection.has(transition.id),
+      selected: isSelected(transition.id),
       data: {
         label: transition.name,
         type: "transition",
@@ -126,7 +126,7 @@ export function useSdcpnToReactFlow(): PetrinautReactFlowDefinitionObject {
         source: inputArc.placeId,
         target: transition.id,
         type: "default" as const,
-        selected: selection.has(arcId),
+        selected: isSelected(arcId),
         markerEnd: {
           type: MarkerType.ArrowClosed,
           color: arcColor,
@@ -167,7 +167,7 @@ export function useSdcpnToReactFlow(): PetrinautReactFlowDefinitionObject {
         source: transition.id,
         target: outputArc.placeId,
         type: "default" as const,
-        selected: selection.has(arcId),
+        selected: isSelected(arcId),
         markerEnd: {
           type: MarkerType.ArrowClosed,
           color: arcColor,

From 25b5c8737530f1a3bf5349538751f3e1be32ea57 Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Tue, 10 Mar 2026 00:52:38 +0100
Subject: [PATCH 14/25] H-5655: Add changeset for selection logic refactor

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .changeset/refactor-selection-logic.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/refactor-selection-logic.md

diff --git a/.changeset/refactor-selection-logic.md b/.changeset/refactor-selection-logic.md
new file mode 100644
index 00000000000..a3479f84328
--- /dev/null
+++ b/.changeset/refactor-selection-logic.md
@@ -0,0 +1,5 @@
+---
+"@hashintel/petrinaut": patch
+---
+
+Refactor selection logic, migrate to @xyflow/react v12, and add multi-selection support with keyboard shortcuts

From 248a0146d08f345f8add99285b9e73d2c72ca7c9 Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Tue, 10 Mar 2026 12:42:07 +0100
Subject: [PATCH 15/25] H-5655: Fix layout coordinate conversion, selection
 guard, and restore test deps

- Convert ELK top-left positions to center coordinates in calculateGraphLayout,
  matching the convention used by useSdcpnToReactFlow and useApplyNodeChanges
- Accept dims parameter instead of using deprecated nodeDimensions alias, so
  layout uses correct dimensions for compact vs classic mode
- Fix selection guards to check base map instead of prevSelection, preventing
  previously-selected canvas nodes from being dropped during box-select when
  non-canvas items are selected
- Re-add @testing-library/dom and @testing-library/react devDependencies needed
  by unit tests that were incorrectly removed with browser test cleanup

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 libs/@hashintel/petrinaut/package.json        |  2 +
 .../src/lib/calculate-graph-layout.ts         | 23 +++--
 .../petrinaut/src/state/sdcpn-provider.tsx    | 11 ++-
 .../SDCPN/hooks/use-apply-node-changes.ts     |  4 +-
 yarn.lock                                     | 87 ++++++++++++++++++-
 5 files changed, 112 insertions(+), 15 deletions(-)

diff --git a/libs/@hashintel/petrinaut/package.json b/libs/@hashintel/petrinaut/package.json
index 9fd50259734..7a633752ba0 100644
--- a/libs/@hashintel/petrinaut/package.json
+++ b/libs/@hashintel/petrinaut/package.json
@@ -68,6 +68,8 @@
     "@pandacss/dev": "1.4.3",
     "@sentry/react": "10.22.0",
     "@storybook/react-vite": "10.2.13",
+    "@testing-library/dom": "10.4.1",
+    "@testing-library/react": "16.3.2",
     "@types/babel__standalone": "7.1.9",
     "@types/d3-array": "3.2.2",
     "@types/d3-scale": "4.0.9",
diff --git a/libs/@hashintel/petrinaut/src/lib/calculate-graph-layout.ts b/libs/@hashintel/petrinaut/src/lib/calculate-graph-layout.ts
index 7bce4e14b4f..5ccf2f78a32 100644
--- a/libs/@hashintel/petrinaut/src/lib/calculate-graph-layout.ts
+++ b/libs/@hashintel/petrinaut/src/lib/calculate-graph-layout.ts
@@ -2,7 +2,6 @@ import type { ElkNode } from "elkjs";
 import ELK from "elkjs";
 
 import type { SDCPN } from "../core/types/sdcpn";
-import { nodeDimensions } from "../views/SDCPN/styles/styling";
 
 /**
  * @see https://eclipse.dev/elk/documentation/tooldevelopers
@@ -38,6 +37,10 @@ export type NodePosition = {
  */
 export const calculateGraphLayout = async (
   sdcpn: SDCPN,
+  dims: {
+    place: { width: number; height: number };
+    transition: { width: number; height: number };
+  },
 ): Promise<Record<string, NodePosition>> => {
   if (sdcpn.places.length === 0) {
     return {};
@@ -47,13 +50,13 @@ export const calculateGraphLayout = async (
   const elkNodes: ElkNode["children"] = [
     ...sdcpn.places.map((place) => ({
       id: place.id,
-      width: nodeDimensions.place.width,
-      height: nodeDimensions.place.height,
+      width: dims.place.width,
+      height: dims.place.height,
     })),
     ...sdcpn.transitions.map((transition) => ({
       id: transition.id,
-      width: nodeDimensions.transition.width,
-      height: nodeDimensions.transition.height,
+      width: dims.transition.width,
+      height: dims.transition.height,
     })),
   ];
 
@@ -87,15 +90,19 @@ export const calculateGraphLayout = async (
 
   const updatedElements = await elk.layout(graph);
 
+  const placeIds = new Set(sdcpn.places.map((place) => place.id));
+
   /**
-   * ELK inserts the calculated position as a root 'x' and 'y'.
+   * ELK returns top-left positions, but the SDCPN store uses center
+   * coordinates, so we offset by half the node dimensions.
    */
   const positionsByNodeId: Record<string, NodePosition> = {};
   for (const child of updatedElements.children ?? []) {
     if (child.x !== undefined && child.y !== undefined) {
+      const nodeDims = placeIds.has(child.id) ? dims.place : dims.transition;
       positionsByNodeId[child.id] = {
-        x: child.x,
-        y: child.y,
+        x: child.x + nodeDims.width / 2,
+        y: child.y + nodeDims.height / 2,
       };
     }
   }
diff --git a/libs/@hashintel/petrinaut/src/state/sdcpn-provider.tsx b/libs/@hashintel/petrinaut/src/state/sdcpn-provider.tsx
index 957cdd4a4d5..209fab57888 100644
--- a/libs/@hashintel/petrinaut/src/state/sdcpn-provider.tsx
+++ b/libs/@hashintel/petrinaut/src/state/sdcpn-provider.tsx
@@ -1,4 +1,10 @@
+import { use } from "react";
+
 import { calculateGraphLayout } from "../lib/calculate-graph-layout";
+import {
+  classicNodeDimensions,
+  compactNodeDimensions,
+} from "../views/SDCPN/styles/styling";
 import {
   ARC_ID_PREFIX,
   generateArcId,
@@ -6,11 +12,14 @@ import {
   type SDCPNContextValue,
   type SDCPNProviderProps,
 } from "./sdcpn-context";
+import { UserSettingsContext } from "./user-settings-context";
 
 export const SDCPNProvider: React.FC<SDCPNProviderProps> = ({
   children,
   ...rest
 }: React.PropsWithChildren<SDCPNProviderProps>) => {
+  const { compactNodes } = use(UserSettingsContext);
+  const dims = compactNodes ? compactNodeDimensions : classicNodeDimensions;
   const value: SDCPNContextValue = {
     ...rest,
     addPlace(place) {
@@ -380,7 +389,7 @@ export const SDCPNProvider: React.FC<SDCPNProviderProps> = ({
         return;
       }
 
-      const positions = await calculateGraphLayout(sdcpn);
+      const positions = await calculateGraphLayout(sdcpn, dims);
 
       rest.mutatePetriNetDefinition((sdcpnToMutate) => {
         for (const place of sdcpnToMutate.places) {
diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/hooks/use-apply-node-changes.ts b/libs/@hashintel/petrinaut/src/views/SDCPN/hooks/use-apply-node-changes.ts
index 7c340fc0886..1a2b022050f 100644
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/hooks/use-apply-node-changes.ts
+++ b/libs/@hashintel/petrinaut/src/views/SDCPN/hooks/use-apply-node-changes.ts
@@ -86,14 +86,14 @@ export function useApplyNodeChanges() {
 
         for (const change of changes) {
           if (change.type === "select") {
-            if (change.selected && !prevSelection.has(change.id)) {
+            if (change.selected && !base.has(change.id)) {
               const itemType = getItemType(change.id);
               // Skip arcs — they are only selectable via direct click
               // (onEdgeClick), not via drag-to-select box selection.
               if (itemType && itemType !== "arc") {
                 base.set(change.id, { type: itemType, id: change.id });
               }
-            } else if (!change.selected && prevSelection.has(change.id)) {
+            } else if (!change.selected && base.has(change.id)) {
               base.delete(change.id);
             }
           }
diff --git a/yarn.lock b/yarn.lock
index 5b176eff353..b6e12e15eb0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3276,7 +3276,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.26.0, @babel/code-frame@npm:^7.26.2, @babel/code-frame@npm:^7.27.1, @babel/code-frame@npm:^7.28.6, @babel/code-frame@npm:^7.29.0":
+"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.26.0, @babel/code-frame@npm:^7.26.2, @babel/code-frame@npm:^7.27.1, @babel/code-frame@npm:^7.28.6, @babel/code-frame@npm:^7.29.0":
   version: 7.29.0
   resolution: "@babel/code-frame@npm:7.29.0"
   dependencies:
@@ -7997,6 +7997,8 @@ __metadata:
     "@pandacss/dev": "npm:1.4.3"
     "@sentry/react": "npm:10.22.0"
     "@storybook/react-vite": "npm:10.2.13"
+    "@testing-library/dom": "npm:10.4.1"
+    "@testing-library/react": "npm:16.3.2"
     "@types/babel__standalone": "npm:7.1.9"
     "@types/d3-array": "npm:3.2.2"
     "@types/d3-scale": "npm:4.0.9"
@@ -17404,6 +17406,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@testing-library/dom@npm:10.4.1":
+  version: 10.4.1
+  resolution: "@testing-library/dom@npm:10.4.1"
+  dependencies:
+    "@babel/code-frame": "npm:^7.10.4"
+    "@babel/runtime": "npm:^7.12.5"
+    "@types/aria-query": "npm:^5.0.1"
+    aria-query: "npm:5.3.0"
+    dom-accessibility-api: "npm:^0.5.9"
+    lz-string: "npm:^1.5.0"
+    picocolors: "npm:1.1.1"
+    pretty-format: "npm:^27.0.2"
+  checksum: 10c0/19ce048012d395ad0468b0dbcc4d0911f6f9e39464d7a8464a587b29707eed5482000dad728f5acc4ed314d2f4d54f34982999a114d2404f36d048278db815b1
+  languageName: node
+  linkType: hard
+
 "@testing-library/jest-dom@npm:^6.6.3":
   version: 6.8.0
   resolution: "@testing-library/jest-dom@npm:6.8.0"
@@ -17418,6 +17436,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@testing-library/react@npm:16.3.2":
+  version: 16.3.2
+  resolution: "@testing-library/react@npm:16.3.2"
+  dependencies:
+    "@babel/runtime": "npm:^7.12.5"
+  peerDependencies:
+    "@testing-library/dom": ^10.0.0
+    "@types/react": ^18.0.0 || ^19.0.0
+    "@types/react-dom": ^18.0.0 || ^19.0.0
+    react: ^18.0.0 || ^19.0.0
+    react-dom: ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/f9c7f0915e1b5f7b750e6c7d8b51f091b8ae7ea99bacb761d7b8505ba25de9cfcb749a0f779f1650fb268b499dd79165dc7e1ee0b8b4cb63430d3ddc81ffe044
+  languageName: node
+  linkType: hard
+
 "@testing-library/user-event@npm:^14.6.1":
   version: 14.6.1
   resolution: "@testing-library/user-event@npm:14.6.1"
@@ -17807,6 +17845,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/aria-query@npm:^5.0.1":
+  version: 5.0.4
+  resolution: "@types/aria-query@npm:5.0.4"
+  checksum: 10c0/dc667bc6a3acc7bba2bccf8c23d56cb1f2f4defaa704cfef595437107efaa972d3b3db9ec1d66bc2711bfc35086821edd32c302bffab36f2e79b97f312069f08
+  languageName: node
+  linkType: hard
+
 "@types/babel__core@npm:^7.20.5":
   version: 7.20.5
   resolution: "@types/babel__core@npm:7.20.5"
@@ -21826,6 +21871,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ansi-styles@npm:^5.0.0":
+  version: 5.2.0
+  resolution: "ansi-styles@npm:5.2.0"
+  checksum: 10c0/9c4ca80eb3c2fb7b33841c210d2f20807f40865d27008d7c3f707b7f95cab7d67462a565e2388ac3285b71cb3d9bb2173de8da37c57692a362885ec34d6e27df
+  languageName: node
+  linkType: hard
+
 "ansi-styles@npm:^6.1.0, ansi-styles@npm:^6.2.1":
   version: 6.2.1
   resolution: "ansi-styles@npm:6.2.1"
@@ -21940,6 +21992,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"aria-query@npm:5.3.0":
+  version: 5.3.0
+  resolution: "aria-query@npm:5.3.0"
+  dependencies:
+    dequal: "npm:^2.0.3"
+  checksum: 10c0/2bff0d4eba5852a9dd578ecf47eaef0e82cc52569b48469b0aac2db5145db0b17b7a58d9e01237706d1e14b7a1b0ac9b78e9c97027ad97679dd8f91b85da1469
+  languageName: node
+  linkType: hard
+
 "aria-query@npm:^5.0.0, aria-query@npm:^5.3.2":
   version: 5.3.2
   resolution: "aria-query@npm:5.3.2"
@@ -25968,6 +26029,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dom-accessibility-api@npm:^0.5.9":
+  version: 0.5.16
+  resolution: "dom-accessibility-api@npm:0.5.16"
+  checksum: 10c0/b2c2eda4fae568977cdac27a9f0c001edf4f95a6a6191dfa611e3721db2478d1badc01db5bb4fa8a848aeee13e442a6c2a4386d65ec65a1436f24715a2f8d053
+  languageName: node
+  linkType: hard
+
 "dom-accessibility-api@npm:^0.6.3":
   version: 0.6.3
   resolution: "dom-accessibility-api@npm:0.6.3"
@@ -34390,7 +34458,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lz-string@npm:^1.4.4":
+"lz-string@npm:^1.4.4, lz-string@npm:^1.5.0":
   version: 1.5.0
   resolution: "lz-string@npm:1.5.0"
   bin:
@@ -38032,7 +38100,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"picocolors@npm:^1.0.0, picocolors@npm:^1.1.0, picocolors@npm:^1.1.1":
+"picocolors@npm:1.1.1, picocolors@npm:^1.0.0, picocolors@npm:^1.1.0, picocolors@npm:^1.1.1":
   version: 1.1.1
   resolution: "picocolors@npm:1.1.1"
   checksum: 10c0/e2e3e8170ab9d7c7421969adaa7e1b31434f789afb9b3f115f6b96d91945041ac3ceb02e9ec6fe6510ff036bcc0bf91e69a1772edc0b707e12b19c0f2d6bcf58
@@ -38568,6 +38636,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pretty-format@npm:^27.0.2":
+  version: 27.5.1
+  resolution: "pretty-format@npm:27.5.1"
+  dependencies:
+    ansi-regex: "npm:^5.0.1"
+    ansi-styles: "npm:^5.0.0"
+    react-is: "npm:^17.0.1"
+  checksum: 10c0/0cbda1031aa30c659e10921fa94e0dd3f903ecbbbe7184a729ad66f2b6e7f17891e8c7d7654c458fa4ccb1a411ffb695b4f17bbcd3fe075fabe181027c4040ed
+  languageName: node
+  linkType: hard
+
 "pretty-ms@npm:^9.2.0":
   version: 9.3.0
   resolution: "pretty-ms@npm:9.3.0"
@@ -39399,7 +39478,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:^17.0.2":
+"react-is@npm:^17.0.1, react-is@npm:^17.0.2":
   version: 17.0.2
   resolution: "react-is@npm:17.0.2"
   checksum: 10c0/2bdb6b93fbb1820b024b496042cce405c57e2f85e777c9aabd55f9b26d145408f9f74f5934676ffdc46f3dcff656d78413a6e43968e7b3f92eea35b3052e9053

From ba94bd8ade2ed76d08e9409c58056e189368e29d Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Tue, 10 Mar 2026 15:19:52 +0100
Subject: [PATCH 16/25] Fix from review

---
 libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.tsx b/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.tsx
index 875d7bb61fd..6088c7e43d0 100644
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.tsx
+++ b/libs/@hashintel/petrinaut/src/views/SDCPN/sdcpn-view.tsx
@@ -329,6 +329,7 @@ export const SDCPNView: React.FC = () => {
           partialSelection ? SelectionMode.Partial : SelectionMode.Full
         }
         selectNodesOnDrag={false}
+        deleteKeyCode={null}
         panOnScroll={false}
         zoomOnScroll
       >

From fb41c5b7fd0ec07b477a65eb2446e4bd1d59ed79 Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Tue, 10 Mar 2026 15:30:39 +0100
Subject: [PATCH 17/25] Remove vite.browser.config.ts from ESLint
 allowDefaultProject

---
 libs/@hashintel/petrinaut/eslint.config.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/libs/@hashintel/petrinaut/eslint.config.js b/libs/@hashintel/petrinaut/eslint.config.js
index 1f108b8f9ef..d9e2693ad7c 100644
--- a/libs/@hashintel/petrinaut/eslint.config.js
+++ b/libs/@hashintel/petrinaut/eslint.config.js
@@ -11,7 +11,6 @@ export default [
             "postcss.config.cjs",
             "vite.config.ts",
             "vite.site.config.ts",
-            "vitest.browser.config.ts",
             ".storybook/main.ts",
             ".storybook/manager.tsx",
             ".storybook/preview.tsx",

From 2e13d92affdd2b8ac6d4a94c3d8b243876276145 Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Tue, 10 Mar 2026 17:02:19 +0100
Subject: [PATCH 18/25] yarn fix:yarn-deduplicate

---
 yarn.lock | 141 +-----------------------------------------------------
 1 file changed, 1 insertion(+), 140 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index b6e12e15eb0..095a5b50639 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -19983,20 +19983,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vitest/expect@npm:4.0.17":
-  version: 4.0.17
-  resolution: "@vitest/expect@npm:4.0.17"
-  dependencies:
-    "@standard-schema/spec": "npm:^1.0.0"
-    "@types/chai": "npm:^5.2.2"
-    "@vitest/spy": "npm:4.0.17"
-    "@vitest/utils": "npm:4.0.17"
-    chai: "npm:^6.2.1"
-    tinyrainbow: "npm:^3.0.3"
-  checksum: 10c0/cdaa6827aa3a9473d51fd0944bcd698a94507929fa3c98b00bbdb74342319ec04279f01108d7d2dd7cbcd0d8062f65a3f21bb3615c0d5223e61adcc036c8b370
-  languageName: node
-  linkType: hard
-
 "@vitest/expect@npm:4.0.18":
   version: 4.0.18
   resolution: "@vitest/expect@npm:4.0.18"
@@ -20030,25 +20016,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vitest/mocker@npm:4.0.17":
-  version: 4.0.17
-  resolution: "@vitest/mocker@npm:4.0.17"
-  dependencies:
-    "@vitest/spy": "npm:4.0.17"
-    estree-walker: "npm:^3.0.3"
-    magic-string: "npm:^0.30.21"
-  peerDependencies:
-    msw: ^2.4.9
-    vite: ^6.0.0 || ^7.0.0-0
-  peerDependenciesMeta:
-    msw:
-      optional: true
-    vite:
-      optional: true
-  checksum: 10c0/54e657fa5b79764926b15aac993528bfe7083f6731209253617b1f27d328aa3297fcbf96b67e84d1a5632553231f795585f2396f563837cf117a574c87f5cef7
-  languageName: node
-  linkType: hard
-
 "@vitest/mocker@npm:4.0.18":
   version: 4.0.18
   resolution: "@vitest/mocker@npm:4.0.18"
@@ -20077,15 +20044,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vitest/pretty-format@npm:4.0.17":
-  version: 4.0.17
-  resolution: "@vitest/pretty-format@npm:4.0.17"
-  dependencies:
-    tinyrainbow: "npm:^3.0.3"
-  checksum: 10c0/10a2dd7e2daf7ee006107d380bbd28b66b09a7014d31087daab0dea7dee0d12868cfcf6b3372729268502fd9065162345b68b9b9c5d225f5c6c2fd2c664a2a86
-  languageName: node
-  linkType: hard
-
 "@vitest/pretty-format@npm:4.0.18":
   version: 4.0.18
   resolution: "@vitest/pretty-format@npm:4.0.18"
@@ -20106,16 +20064,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vitest/runner@npm:4.0.17":
-  version: 4.0.17
-  resolution: "@vitest/runner@npm:4.0.17"
-  dependencies:
-    "@vitest/utils": "npm:4.0.17"
-    pathe: "npm:^2.0.3"
-  checksum: 10c0/f4ccc236d1ed5ba2186d5f36ff0306d4ac7b711a40d7316ad6fd71c0f7229482b19969a8737e87670f3d4efb08f2138ff5b47a744fd7ae8db6c03cf991293a04
-  languageName: node
-  linkType: hard
-
 "@vitest/runner@npm:4.0.18":
   version: 4.0.18
   resolution: "@vitest/runner@npm:4.0.18"
@@ -20137,17 +20085,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vitest/snapshot@npm:4.0.17":
-  version: 4.0.17
-  resolution: "@vitest/snapshot@npm:4.0.17"
-  dependencies:
-    "@vitest/pretty-format": "npm:4.0.17"
-    magic-string: "npm:^0.30.21"
-    pathe: "npm:^2.0.3"
-  checksum: 10c0/31a047a097b13eff6c0f5393ea3e7203771ae9a22afe6465cd9023fd2ed516ddccd84523d48504a032c9d04a86a12e3f1235e08bb2ffc7d7a125e372c41ef53d
-  languageName: node
-  linkType: hard
-
 "@vitest/snapshot@npm:4.0.18":
   version: 4.0.18
   resolution: "@vitest/snapshot@npm:4.0.18"
@@ -20168,13 +20105,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vitest/spy@npm:4.0.17":
-  version: 4.0.17
-  resolution: "@vitest/spy@npm:4.0.17"
-  checksum: 10c0/c290731ba3392f11eaba8fc7fa08063a3a4d14af6baeec210b260ccd5a46613196fb4a8ff3ac8bf91a9606aef90eee9b6364bda130ce71abff368e35dfe2b265
-  languageName: node
-  linkType: hard
-
 "@vitest/spy@npm:4.0.18":
   version: 4.0.18
   resolution: "@vitest/spy@npm:4.0.18"
@@ -20193,16 +20123,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vitest/utils@npm:4.0.17":
-  version: 4.0.17
-  resolution: "@vitest/utils@npm:4.0.17"
-  dependencies:
-    "@vitest/pretty-format": "npm:4.0.17"
-    tinyrainbow: "npm:^3.0.3"
-  checksum: 10c0/1e2e4d7d7709ec022f603a1e12015523a2290f326c0bbe0c6bd5481ec396d4efc6bf8c738d601915d88e74267e9841df1e05157edced10f5048865204aeb86ff
-  languageName: node
-  linkType: hard
-
 "@vitest/utils@npm:4.0.18":
   version: 4.0.18
   resolution: "@vitest/utils@npm:4.0.18"
@@ -45630,7 +45550,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vitest@npm:4.0.18":
+"vitest@npm:4.0.18, vitest@npm:^4.0.16":
   version: 4.0.18
   resolution: "vitest@npm:4.0.18"
   dependencies:
@@ -45689,65 +45609,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vitest@npm:^4.0.16":
-  version: 4.0.17
-  resolution: "vitest@npm:4.0.17"
-  dependencies:
-    "@vitest/expect": "npm:4.0.17"
-    "@vitest/mocker": "npm:4.0.17"
-    "@vitest/pretty-format": "npm:4.0.17"
-    "@vitest/runner": "npm:4.0.17"
-    "@vitest/snapshot": "npm:4.0.17"
-    "@vitest/spy": "npm:4.0.17"
-    "@vitest/utils": "npm:4.0.17"
-    es-module-lexer: "npm:^1.7.0"
-    expect-type: "npm:^1.2.2"
-    magic-string: "npm:^0.30.21"
-    obug: "npm:^2.1.1"
-    pathe: "npm:^2.0.3"
-    picomatch: "npm:^4.0.3"
-    std-env: "npm:^3.10.0"
-    tinybench: "npm:^2.9.0"
-    tinyexec: "npm:^1.0.2"
-    tinyglobby: "npm:^0.2.15"
-    tinyrainbow: "npm:^3.0.3"
-    vite: "npm:^6.0.0 || ^7.0.0"
-    why-is-node-running: "npm:^2.3.0"
-  peerDependencies:
-    "@edge-runtime/vm": "*"
-    "@opentelemetry/api": ^1.9.0
-    "@types/node": ^20.0.0 || ^22.0.0 || >=24.0.0
-    "@vitest/browser-playwright": 4.0.17
-    "@vitest/browser-preview": 4.0.17
-    "@vitest/browser-webdriverio": 4.0.17
-    "@vitest/ui": 4.0.17
-    happy-dom: "*"
-    jsdom: "*"
-  peerDependenciesMeta:
-    "@edge-runtime/vm":
-      optional: true
-    "@opentelemetry/api":
-      optional: true
-    "@types/node":
-      optional: true
-    "@vitest/browser-playwright":
-      optional: true
-    "@vitest/browser-preview":
-      optional: true
-    "@vitest/browser-webdriverio":
-      optional: true
-    "@vitest/ui":
-      optional: true
-    happy-dom:
-      optional: true
-    jsdom:
-      optional: true
-  bin:
-    vitest: vitest.mjs
-  checksum: 10c0/e1648bbfe2d01e23ceb6856863344035d2a1c139f39e8b15859e6ea8dc510ac3ba425df7c45486492d85ca516472aa892540dfd11ab6ad0613be98fd56d40716
-  languageName: node
-  linkType: hard
-
 "vscode-languageserver-types@npm:3.17.5":
   version: 3.17.5
   resolution: "vscode-languageserver-types@npm:3.17.5"

From 94f502fd1a12a2945ed620e2d4b13da452571116 Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Wed, 11 Mar 2026 10:35:36 +0100
Subject: [PATCH 19/25] yarn fix:yarn-deduplicate

---
 yarn.lock | 31 +++++++++++--------------------
 1 file changed, 11 insertions(+), 20 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 095a5b50639..2ad0b9397a8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -29501,16 +29501,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-tsconfig@npm:^4.10.0, get-tsconfig@npm:^4.10.1, get-tsconfig@npm:^4.13.0, get-tsconfig@npm:^4.7.5":
-  version: 4.13.0
-  resolution: "get-tsconfig@npm:4.13.0"
-  dependencies:
-    resolve-pkg-maps: "npm:^1.0.0"
-  checksum: 10c0/2c49ef8d3907047a107f229fd610386fe3b7fe9e42dfd6b42e7406499493cdda8c62e83e57e8d7a98125610774b9f604d3a0ff308d7f9de5c7ac6d1b07cb6036
-  languageName: node
-  linkType: hard
-
-"get-tsconfig@npm:^4.13.6":
+"get-tsconfig@npm:^4.10.0, get-tsconfig@npm:^4.10.1, get-tsconfig@npm:^4.13.0, get-tsconfig@npm:^4.13.6, get-tsconfig@npm:^4.7.5":
   version: 4.13.6
   resolution: "get-tsconfig@npm:4.13.6"
   dependencies:
@@ -32924,16 +32915,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jsesc@npm:^3.0.2, jsesc@npm:~3.0.2":
-  version: 3.0.2
-  resolution: "jsesc@npm:3.0.2"
-  bin:
-    jsesc: bin/jsesc
-  checksum: 10c0/ef22148f9e793180b14d8a145ee6f9f60f301abf443288117b4b6c53d0ecd58354898dc506ccbb553a5f7827965cd38bc5fb726575aae93c5e8915e2de8290e1
-  languageName: node
-  linkType: hard
-
-"jsesc@npm:^3.1.0, jsesc@npm:~3.1.0":
+"jsesc@npm:^3.0.2, jsesc@npm:^3.1.0, jsesc@npm:~3.1.0":
   version: 3.1.0
   resolution: "jsesc@npm:3.1.0"
   bin:
@@ -32951,6 +32933,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jsesc@npm:~3.0.2":
+  version: 3.0.2
+  resolution: "jsesc@npm:3.0.2"
+  bin:
+    jsesc: bin/jsesc
+  checksum: 10c0/ef22148f9e793180b14d8a145ee6f9f60f301abf443288117b4b6c53d0ecd58354898dc506ccbb553a5f7827965cd38bc5fb726575aae93c5e8915e2de8290e1
+  languageName: node
+  linkType: hard
+
 "json-bigint@npm:^1.0.0":
   version: 1.0.0
   resolution: "json-bigint@npm:1.0.0"

From 616e1ab54d0e28544ad7f7efd771589780666084 Mon Sep 17 00:00:00 2001
From: Chris Feijoo <kube@users.noreply.github.com>
Date: Thu, 12 Mar 2026 13:59:04 +0100
Subject: [PATCH 20/25] Update refactor-selection-logic.md

---
 .changeset/refactor-selection-logic.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/refactor-selection-logic.md b/.changeset/refactor-selection-logic.md
index a3479f84328..07848f13027 100644
--- a/.changeset/refactor-selection-logic.md
+++ b/.changeset/refactor-selection-logic.md
@@ -2,4 +2,4 @@
 "@hashintel/petrinaut": patch
 ---
 
-Refactor selection logic, migrate to @xyflow/react v12, and add multi-selection support with keyboard shortcuts
+Add multi-selection support with keyboard shortcuts, refactor selection logic, migrate to @xyflow/react v12

From ac4803f99fd0e3401165c2e169b2212c80b01234 Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Thu, 12 Mar 2026 14:38:16 +0100
Subject: [PATCH 21/25] Address review nits: rename dims to dimensions, restore
 descriptive arc index names

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/lib/calculate-graph-layout.ts         | 18 +++++++-----
 .../petrinaut/src/state/sdcpn-provider.tsx    | 26 +++++++++--------
 .../SDCPN/hooks/use-apply-node-changes.ts     | 12 ++++----
 .../SDCPN/hooks/use-sdcpn-to-react-flow.ts    | 29 +++++++++++--------
 4 files changed, 48 insertions(+), 37 deletions(-)

diff --git a/libs/@hashintel/petrinaut/src/lib/calculate-graph-layout.ts b/libs/@hashintel/petrinaut/src/lib/calculate-graph-layout.ts
index 5ccf2f78a32..94605dca1c8 100644
--- a/libs/@hashintel/petrinaut/src/lib/calculate-graph-layout.ts
+++ b/libs/@hashintel/petrinaut/src/lib/calculate-graph-layout.ts
@@ -37,7 +37,7 @@ export type NodePosition = {
  */
 export const calculateGraphLayout = async (
   sdcpn: SDCPN,
-  dims: {
+  dimensions: {
     place: { width: number; height: number };
     transition: { width: number; height: number };
   },
@@ -50,13 +50,13 @@ export const calculateGraphLayout = async (
   const elkNodes: ElkNode["children"] = [
     ...sdcpn.places.map((place) => ({
       id: place.id,
-      width: dims.place.width,
-      height: dims.place.height,
+      width: dimensions.place.width,
+      height: dimensions.place.height,
     })),
     ...sdcpn.transitions.map((transition) => ({
       id: transition.id,
-      width: dims.transition.width,
-      height: dims.transition.height,
+      width: dimensions.transition.width,
+      height: dimensions.transition.height,
     })),
   ];
 
@@ -99,10 +99,12 @@ export const calculateGraphLayout = async (
   const positionsByNodeId: Record<string, NodePosition> = {};
   for (const child of updatedElements.children ?? []) {
     if (child.x !== undefined && child.y !== undefined) {
-      const nodeDims = placeIds.has(child.id) ? dims.place : dims.transition;
+      const nodeDimensions = placeIds.has(child.id)
+        ? dimensions.place
+        : dimensions.transition;
       positionsByNodeId[child.id] = {
-        x: child.x + nodeDims.width / 2,
-        y: child.y + nodeDims.height / 2,
+        x: child.x + nodeDimensions.width / 2,
+        y: child.y + nodeDimensions.height / 2,
       };
     }
   }
diff --git a/libs/@hashintel/petrinaut/src/state/sdcpn-provider.tsx b/libs/@hashintel/petrinaut/src/state/sdcpn-provider.tsx
index 209fab57888..829616f884a 100644
--- a/libs/@hashintel/petrinaut/src/state/sdcpn-provider.tsx
+++ b/libs/@hashintel/petrinaut/src/state/sdcpn-provider.tsx
@@ -19,7 +19,9 @@ export const SDCPNProvider: React.FC<SDCPNProviderProps> = ({
   ...rest
 }: React.PropsWithChildren<SDCPNProviderProps>) => {
   const { compactNodes } = use(UserSettingsContext);
-  const dims = compactNodes ? compactNodeDimensions : classicNodeDimensions;
+  const dimensions = compactNodes
+    ? compactNodeDimensions
+    : classicNodeDimensions;
   const value: SDCPNContextValue = {
     ...rest,
     addPlace(place) {
@@ -318,34 +320,34 @@ export const SDCPNProvider: React.FC<SDCPNProviderProps> = ({
             }
 
             for (
-              let arcIdx = transition.inputArcs.length - 1;
-              arcIdx >= 0;
-              arcIdx--
+              let inputArcIndex = transition.inputArcs.length - 1;
+              inputArcIndex >= 0;
+              inputArcIndex--
             ) {
-              const inputArc = transition.inputArcs[arcIdx]!;
+              const inputArc = transition.inputArcs[inputArcIndex]!;
               const arcId = generateArcId({
                 inputId: inputArc.placeId,
                 outputId: transition.id,
               });
 
               if (arcIds.has(arcId) || placeIds.has(inputArc.placeId)) {
-                transition.inputArcs.splice(arcIdx, 1);
+                transition.inputArcs.splice(inputArcIndex, 1);
               }
             }
 
             for (
-              let arcIdx = transition.outputArcs.length - 1;
-              arcIdx >= 0;
-              arcIdx--
+              let outputArcIndex = transition.outputArcs.length - 1;
+              outputArcIndex >= 0;
+              outputArcIndex--
             ) {
-              const outputArc = transition.outputArcs[arcIdx]!;
+              const outputArc = transition.outputArcs[outputArcIndex]!;
               const arcId = generateArcId({
                 inputId: transition.id,
                 outputId: outputArc.placeId,
               });
 
               if (arcIds.has(arcId) || placeIds.has(outputArc.placeId)) {
-                transition.outputArcs.splice(arcIdx, 1);
+                transition.outputArcs.splice(outputArcIndex, 1);
               }
             }
           }
@@ -389,7 +391,7 @@ export const SDCPNProvider: React.FC<SDCPNProviderProps> = ({
         return;
       }
 
-      const positions = await calculateGraphLayout(sdcpn, dims);
+      const positions = await calculateGraphLayout(sdcpn, dimensions);
 
       rest.mutatePetriNetDefinition((sdcpnToMutate) => {
         for (const place of sdcpnToMutate.places) {
diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/hooks/use-apply-node-changes.ts b/libs/@hashintel/petrinaut/src/views/SDCPN/hooks/use-apply-node-changes.ts
index 1a2b022050f..f97df3c8ed4 100644
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/hooks/use-apply-node-changes.ts
+++ b/libs/@hashintel/petrinaut/src/views/SDCPN/hooks/use-apply-node-changes.ts
@@ -20,7 +20,9 @@ export function useApplyNodeChanges() {
   const { getItemType, mutatePetriNetDefinition } = use(SDCPNContext);
   const { updateDraggingStateByNodeId, setSelection } = use(EditorContext);
   const { compactNodes } = use(UserSettingsContext);
-  const dims = compactNodes ? compactNodeDimensions : classicNodeDimensions;
+  const dimensions = compactNodes
+    ? compactNodeDimensions
+    : classicNodeDimensions;
 
   return (changes: (NodeChange | EdgeChange)[]) => {
     const positionCommits: Array<{
@@ -117,16 +119,16 @@ export function useApplyNodeChanges() {
           if (itemType === "place") {
             for (const place of sdcpn.places) {
               if (place.id === id) {
-                place.x = position.x + dims.place.width / 2;
-                place.y = position.y + dims.place.height / 2;
+                place.x = position.x + dimensions.place.width / 2;
+                place.y = position.y + dimensions.place.height / 2;
                 break;
               }
             }
           } else if (itemType === "transition") {
             for (const transition of sdcpn.transitions) {
               if (transition.id === id) {
-                transition.x = position.x + dims.transition.width / 2;
-                transition.y = position.y + dims.transition.height / 2;
+                transition.x = position.x + dimensions.transition.width / 2;
+                transition.y = position.y + dimensions.transition.height / 2;
                 break;
               }
             }
diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/hooks/use-sdcpn-to-react-flow.ts b/libs/@hashintel/petrinaut/src/views/SDCPN/hooks/use-sdcpn-to-react-flow.ts
index 229887156f4..23cc565769d 100644
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/hooks/use-sdcpn-to-react-flow.ts
+++ b/libs/@hashintel/petrinaut/src/views/SDCPN/hooks/use-sdcpn-to-react-flow.ts
@@ -31,7 +31,9 @@ export function useSdcpnToReactFlow(): PetrinautReactFlowDefinitionObject {
   const { currentViewedFrame } = use(PlaybackContext);
   const { compactNodes } = use(UserSettingsContext);
 
-  const dims = compactNodes ? compactNodeDimensions : classicNodeDimensions;
+  const dimensions = compactNodes
+    ? compactNodeDimensions
+    : classicNodeDimensions;
 
   const nodes: NodeType[] = [];
 
@@ -51,12 +53,15 @@ export function useSdcpnToReactFlow(): PetrinautReactFlowDefinitionObject {
       position: draggingState?.dragging
         ? draggingState.position
         : {
-            x: place.x - dims.place.width / 2,
-            y: place.y - dims.place.height / 2,
+            x: place.x - dimensions.place.width / 2,
+            y: place.y - dimensions.place.height / 2,
           },
-      width: dims.place.width,
-      height: dims.place.height,
-      measured: { width: dims.place.width, height: dims.place.height },
+      width: dimensions.place.width,
+      height: dimensions.place.height,
+      measured: {
+        width: dimensions.place.width,
+        height: dimensions.place.height,
+      },
       dragging: draggingState?.dragging ?? false,
       selected: isSelected(place.id),
       data: {
@@ -79,14 +84,14 @@ export function useSdcpnToReactFlow(): PetrinautReactFlowDefinitionObject {
       position: draggingState?.dragging
         ? draggingState.position
         : {
-            x: transition.x - dims.transition.width / 2,
-            y: transition.y - dims.transition.height / 2,
+            x: transition.x - dimensions.transition.width / 2,
+            y: transition.y - dimensions.transition.height / 2,
           },
-      width: dims.transition.width,
-      height: dims.transition.height,
+      width: dimensions.transition.width,
+      height: dimensions.transition.height,
       measured: {
-        width: dims.transition.width,
-        height: dims.transition.height,
+        width: dimensions.transition.width,
+        height: dimensions.transition.height,
       },
       dragging: draggingState?.dragging ?? false,
       selected: isSelected(transition.id),

From e783a6ad8be00cf7aeae7280d36ab504a4038cb2 Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Thu, 12 Mar 2026 14:45:43 +0100
Subject: [PATCH 22/25] Clean up dangling references when deleting types and
 differential equations

When a type or differential equation is deleted, clear references to it
from places and equations to avoid unresolvable IDs in the SDCPN JSON.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../petrinaut/src/state/sdcpn-provider.tsx    | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/libs/@hashintel/petrinaut/src/state/sdcpn-provider.tsx b/libs/@hashintel/petrinaut/src/state/sdcpn-provider.tsx
index 829616f884a..b307cf1acb6 100644
--- a/libs/@hashintel/petrinaut/src/state/sdcpn-provider.tsx
+++ b/libs/@hashintel/petrinaut/src/state/sdcpn-provider.tsx
@@ -190,6 +190,17 @@ export const SDCPNProvider: React.FC<SDCPNProviderProps> = ({
             break;
           }
         }
+        // Clear dangling colorId references
+        for (const place of sdcpn.places) {
+          if (place.colorId === typeId) {
+            place.colorId = null;
+          }
+        }
+        for (const equation of sdcpn.differentialEquations) {
+          if (equation.colorId === typeId) {
+            equation.colorId = "";
+          }
+        }
       });
     },
     addDifferentialEquation(equation) {
@@ -215,6 +226,12 @@ export const SDCPNProvider: React.FC<SDCPNProviderProps> = ({
             break;
           }
         }
+        // Clear dangling differentialEquationId references
+        for (const place of sdcpn.places) {
+          if (place.differentialEquationId === equationId) {
+            place.differentialEquationId = null;
+          }
+        }
       });
     },
     addParameter(parameter) {
@@ -365,6 +382,17 @@ export const SDCPNProvider: React.FC<SDCPNProviderProps> = ({
               sdcpn.types.splice(i, 1);
             }
           }
+          // Clear dangling colorId references on places and equations
+          for (const place of sdcpn.places) {
+            if (place.colorId && typeIds.has(place.colorId)) {
+              place.colorId = null;
+            }
+          }
+          for (const equation of sdcpn.differentialEquations) {
+            if (typeIds.has(equation.colorId)) {
+              equation.colorId = "";
+            }
+          }
         }
 
         if (equationIds.size > 0) {
@@ -373,6 +401,15 @@ export const SDCPNProvider: React.FC<SDCPNProviderProps> = ({
               sdcpn.differentialEquations.splice(i, 1);
             }
           }
+          // Clear dangling differentialEquationId references on places
+          for (const place of sdcpn.places) {
+            if (
+              place.differentialEquationId &&
+              equationIds.has(place.differentialEquationId)
+            ) {
+              place.differentialEquationId = null;
+            }
+          }
         }
 
         if (parameterIds.size > 0) {

From 3dfb7140645ddcd6e013ea2e61b6d87457536138 Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Thu, 12 Mar 2026 15:33:57 +0100
Subject: [PATCH 23/25] Address AI review feedback: stabilize setSelection,
 remove dead code, fix drag-end cleanup

- Stabilize setSelection with useCallback to prevent useSelectionCleanup
  effect from re-running on every render
- Remove unused addToSelection and removeFromSelection
- Add early return in selection updater when nothing changed to avoid
  unnecessary re-renders
- Always clear per-node dragging state on drag-end even without position

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../petrinaut/src/state/editor-context.ts     |  4 --
 .../petrinaut/src/state/editor-provider.tsx   | 59 ++++++-------------
 .../SDCPN/hooks/use-apply-node-changes.ts     | 35 +++++++----
 3 files changed, 44 insertions(+), 54 deletions(-)

diff --git a/libs/@hashintel/petrinaut/src/state/editor-context.ts b/libs/@hashintel/petrinaut/src/state/editor-context.ts
index 1d4a971fc35..93aa8d9b94c 100644
--- a/libs/@hashintel/petrinaut/src/state/editor-context.ts
+++ b/libs/@hashintel/petrinaut/src/state/editor-context.ts
@@ -64,8 +64,6 @@ export type EditorActions = {
   ) => void;
   selectItem: (item: SelectionItem) => void;
   toggleItem: (item: SelectionItem) => void;
-  addToSelection: (items: SelectionItem[]) => void;
-  removeFromSelection: (ids: string[]) => void;
   clearSelection: () => void;
   setDraggingStateByNodeId: (state: DraggingStateByNodeId) => void;
   updateDraggingStateByNodeId: (
@@ -113,8 +111,6 @@ const DEFAULT_CONTEXT_VALUE: EditorContextValue = {
   setSelection: () => {},
   selectItem: () => {},
   toggleItem: () => {},
-  addToSelection: () => {},
-  removeFromSelection: () => {},
   clearSelection: () => {},
   setDraggingStateByNodeId: () => {},
   updateDraggingStateByNodeId: () => {},
diff --git a/libs/@hashintel/petrinaut/src/state/editor-provider.tsx b/libs/@hashintel/petrinaut/src/state/editor-provider.tsx
index e33a84d0114..6c08a021531 100644
--- a/libs/@hashintel/petrinaut/src/state/editor-provider.tsx
+++ b/libs/@hashintel/petrinaut/src/state/editor-provider.tsx
@@ -45,6 +45,24 @@ export const EditorProvider: React.FC<EditorProviderProps> = ({ children }) => {
     }, 500);
   };
 
+  const setSelection = useCallback(
+    (
+      selectionOrUpdater: SelectionMap | ((prev: SelectionMap) => SelectionMap),
+    ) =>
+      setState((prev) => {
+        const selection =
+          typeof selectionOrUpdater === "function"
+            ? selectionOrUpdater(prev.selection)
+            : selectionOrUpdater;
+        const hasSelection = selection.size > 0;
+        if (prev.hasSelection !== hasSelection) {
+          triggerPanelAnimation();
+        }
+        return { ...prev, selection, hasSelection };
+      }),
+    [],
+  );
+
   const actions: Omit<EditorActions, "isSelected"> = {
     setGlobalMode: (mode) =>
       setState((prev) => ({ ...prev, globalMode: mode })),
@@ -75,20 +93,7 @@ export const EditorProvider: React.FC<EditorProviderProps> = ({ children }) => {
       setState((prev) => ({ ...prev, bottomPanelHeight: height })),
     setActiveBottomPanelTab: (tab) =>
       setState((prev) => ({ ...prev, activeBottomPanelTab: tab })),
-    setSelection: (
-      selectionOrUpdater: SelectionMap | ((prev: SelectionMap) => SelectionMap),
-    ) =>
-      setState((prev) => {
-        const selection =
-          typeof selectionOrUpdater === "function"
-            ? selectionOrUpdater(prev.selection)
-            : selectionOrUpdater;
-        const hasSelection = selection.size > 0;
-        if (prev.hasSelection !== hasSelection) {
-          triggerPanelAnimation();
-        }
-        return { ...prev, selection, hasSelection };
-      }),
+    setSelection,
     selectItem: (item: SelectionItem) => {
       setState((prev) => {
         const newSelection: SelectionMap = new Map([[item.id, item]]);
@@ -113,32 +118,6 @@ export const EditorProvider: React.FC<EditorProviderProps> = ({ children }) => {
         return { ...prev, selection: newSelection, hasSelection };
       });
     },
-    addToSelection: (items: SelectionItem[]) => {
-      setState((prev) => {
-        const newSelection = new Map(prev.selection);
-        for (const item of items) {
-          newSelection.set(item.id, item);
-        }
-        const hasSelection = newSelection.size > 0;
-        if (prev.hasSelection !== hasSelection) {
-          triggerPanelAnimation();
-        }
-        return { ...prev, selection: newSelection, hasSelection };
-      });
-    },
-    removeFromSelection: (ids: string[]) => {
-      setState((prev) => {
-        const newSelection = new Map(prev.selection);
-        for (const id of ids) {
-          newSelection.delete(id);
-        }
-        const hasSelection = newSelection.size > 0;
-        if (prev.hasSelection !== hasSelection) {
-          triggerPanelAnimation();
-        }
-        return { ...prev, selection: newSelection, hasSelection };
-      });
-    },
     clearSelection: () => {
       setState((prev) => {
         if (prev.hasSelection) {
diff --git a/libs/@hashintel/petrinaut/src/views/SDCPN/hooks/use-apply-node-changes.ts b/libs/@hashintel/petrinaut/src/views/SDCPN/hooks/use-apply-node-changes.ts
index f97df3c8ed4..831168c11ff 100644
--- a/libs/@hashintel/petrinaut/src/views/SDCPN/hooks/use-apply-node-changes.ts
+++ b/libs/@hashintel/petrinaut/src/views/SDCPN/hooks/use-apply-node-changes.ts
@@ -56,14 +56,25 @@ export function useApplyNodeChanges() {
               position: change.position ?? { x: 0, y: 0 },
             },
           }));
-        } 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: change.position,
+        } 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: change.position,
+            });
+          }
+          // Always clear dragging state on drag-end, even if position is absent,
+          // to avoid leaving nodes stuck in a visual dragging state.
+          updateDraggingStateByNodeId((existing) => {
+            if (!(change.id in existing)) {
+              return existing;
+            }
+            const { [change.id]: _, ...rest } = existing;
+            return rest;
           });
         }
       }
@@ -86,6 +97,8 @@ export function useApplyNodeChanges() {
           hasNonCanvasItems ? [] : prevSelection,
         );
 
+        let changed = hasNonCanvasItems && prevSelection.size > 0;
+
         for (const change of changes) {
           if (change.type === "select") {
             if (change.selected && !base.has(change.id)) {
@@ -94,14 +107,17 @@ export function useApplyNodeChanges() {
               // (onEdgeClick), not via drag-to-select box selection.
               if (itemType && itemType !== "arc") {
                 base.set(change.id, { type: itemType, id: change.id });
+                changed = true;
               }
             } else if (!change.selected && base.has(change.id)) {
               base.delete(change.id);
+              changed = true;
             }
           }
         }
 
-        return base;
+        // Avoid unnecessary re-renders when nothing actually changed
+        return changed ? base : prevSelection;
       });
     }
 
@@ -135,7 +151,6 @@ export function useApplyNodeChanges() {
           }
         }
       });
-      updateDraggingStateByNodeId(() => ({}));
     }
   };
 }

From c88f30b238242c499f5f68c5de16d37b8bb368bc Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Thu, 12 Mar 2026 19:26:06 +0100
Subject: [PATCH 24/25] Fix issue for React compiler

---
 .../petrinaut/src/state/editor-provider.tsx   | 38 ++++++++-----------
 1 file changed, 16 insertions(+), 22 deletions(-)

diff --git a/libs/@hashintel/petrinaut/src/state/editor-provider.tsx b/libs/@hashintel/petrinaut/src/state/editor-provider.tsx
index 6c08a021531..e847881ada6 100644
--- a/libs/@hashintel/petrinaut/src/state/editor-provider.tsx
+++ b/libs/@hashintel/petrinaut/src/state/editor-provider.tsx
@@ -1,4 +1,4 @@
-import { use, useCallback, useRef, useState } from "react";
+import { use, useRef, useState } from "react";
 
 import {
   type DraggingStateByNodeId,
@@ -45,23 +45,20 @@ export const EditorProvider: React.FC<EditorProviderProps> = ({ children }) => {
     }, 500);
   };
 
-  const setSelection = useCallback(
-    (
-      selectionOrUpdater: SelectionMap | ((prev: SelectionMap) => SelectionMap),
-    ) =>
-      setState((prev) => {
-        const selection =
-          typeof selectionOrUpdater === "function"
-            ? selectionOrUpdater(prev.selection)
-            : selectionOrUpdater;
-        const hasSelection = selection.size > 0;
-        if (prev.hasSelection !== hasSelection) {
-          triggerPanelAnimation();
-        }
-        return { ...prev, selection, hasSelection };
-      }),
-    [],
-  );
+  const setSelection = (
+    selectionOrUpdater: SelectionMap | ((prev: SelectionMap) => SelectionMap),
+  ) =>
+    setState((prev) => {
+      const selection =
+        typeof selectionOrUpdater === "function"
+          ? selectionOrUpdater(prev.selection)
+          : selectionOrUpdater;
+      const hasSelection = selection.size > 0;
+      if (prev.hasSelection !== hasSelection) {
+        triggerPanelAnimation();
+      }
+      return { ...prev, selection, hasSelection };
+    });
 
   const actions: Omit<EditorActions, "isSelected"> = {
     setGlobalMode: (mode) =>
@@ -163,10 +160,7 @@ export const EditorProvider: React.FC<EditorProviderProps> = ({ children }) => {
   });
 
   const { selection } = state;
-  const isSelected = useCallback(
-    (id: string) => selection.has(id),
-    [selection],
-  );
+  const isSelected = (id: string) => selection.has(id);
 
   const contextValue: EditorContextValue = {
     ...state,

From 278aaa601e0b7b069c988950b04e70f2d5cbedbd Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Thu, 12 Mar 2026 19:59:32 +0100
Subject: [PATCH 25/25] Use functional updater in selection cleanup to avoid
 stale closure

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../petrinaut/src/state/use-selection-cleanup.ts   | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/libs/@hashintel/petrinaut/src/state/use-selection-cleanup.ts b/libs/@hashintel/petrinaut/src/state/use-selection-cleanup.ts
index bc61fc0962c..b7f770f9e94 100644
--- a/libs/@hashintel/petrinaut/src/state/use-selection-cleanup.ts
+++ b/libs/@hashintel/petrinaut/src/state/use-selection-cleanup.ts
@@ -58,13 +58,15 @@ export function useSelectionCleanup() {
     }
 
     if (hasStale) {
-      const cleaned: SelectionMap = new Map();
-      for (const [id, item] of selection) {
-        if (validIds.has(id)) {
-          cleaned.set(id, item);
+      setSelection((prev) => {
+        const cleaned: SelectionMap = new Map();
+        for (const [id, item] of prev) {
+          if (validIds.has(id)) {
+            cleaned.set(id, item);
+          }
         }
-      }
-      setSelection(cleaned);
+        return cleaned;
+      });
     }
   }, [petriNetDefinition, selection, setSelection]);
 }