From 839a443d0281c89e394436facee51cf69e267860 Mon Sep 17 00:00:00 2001
From: Milan Rother <milan.rother@gmx.de>
Date: Sat, 9 May 2026 09:35:35 +0200
Subject: [PATCH 01/16] fix: clean up recordingData subscriptions in
 BlockPropertiesDialog

---
 src/lib/components/dialogs/BlockPropertiesDialog.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/components/dialogs/BlockPropertiesDialog.svelte b/src/lib/components/dialogs/BlockPropertiesDialog.svelte
index c27783de..58234fce 100644
--- a/src/lib/components/dialogs/BlockPropertiesDialog.svelte
+++ b/src/lib/components/dialogs/BlockPropertiesDialog.svelte
@@ -76,6 +76,7 @@
 		unsubscribeDialog();
 		unsubscribeNodes();
 		unsubscribeTheme();
+		recordingData.destroy();
 		destroyEditor();
 	});
 

From f3538b9eaadb3cc2e667bb71a78f249420311bc3 Mon Sep 17 00:00:00 2001
From: Milan Rother <milan.rother@gmx.de>
Date: Sat, 9 May 2026 09:35:53 +0200
Subject: [PATCH 02/16] fix: clean up registry/path subscriptions in
 EventsPanel

---
 src/lib/components/panels/EventsPanel.svelte | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/panels/EventsPanel.svelte b/src/lib/components/panels/EventsPanel.svelte
index ddf292ea..afcd0e67 100644
--- a/src/lib/components/panels/EventsPanel.svelte
+++ b/src/lib/components/panels/EventsPanel.svelte
@@ -18,7 +18,7 @@
 
 	// Re-derive event types whenever the registry changes (runtime install/uninstall)
 	let registryTick = $state(0);
-	eventRegistryVersion.subscribe((v) => (registryTick = v));
+	const unsubscribeRegistry = eventRegistryVersion.subscribe((v) => (registryTick = v));
 	const eventTypes = $derived.by(() => {
 		void registryTick;
 		return eventRegistry.getAll();
@@ -26,7 +26,7 @@
 
 	// Track if at root level
 	let isAtRoot = $state(true);
-	graphStore.currentPath.subscribe((path) => {
+	const unsubscribePath = graphStore.currentPath.subscribe((path) => {
 		isAtRoot = path.length === 0;
 	});
 
@@ -57,7 +57,11 @@
 		}
 	}
 
-	onDestroy(clearHoverTimers);
+	onDestroy(() => {
+		clearHoverTimers();
+		unsubscribeRegistry();
+		unsubscribePath();
+	});
 
 	function handleMouseEnter(item: EventTypeDefinition) {
 		if (hoverCloseTimer !== null) {

From 738bd3ea600b1fe28464731381b0c710dbfcd45f Mon Sep 17 00:00:00 2001
From: Milan Rother <milan.rother@gmx.de>
Date: Sat, 9 May 2026 09:36:02 +0200
Subject: [PATCH 03/16] fix: clean up registry subscription in NodeLibrary

---
 src/lib/components/panels/NodeLibrary.svelte | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/panels/NodeLibrary.svelte b/src/lib/components/panels/NodeLibrary.svelte
index ecf0fd3c..3410e777 100644
--- a/src/lib/components/panels/NodeLibrary.svelte
+++ b/src/lib/components/panels/NodeLibrary.svelte
@@ -21,7 +21,7 @@
 	// Registry change counter — read it inside derived blocks so they re-run
 	// whenever a toolbox install/uninstall mutates the registry.
 	let registryTick = $state(0);
-	registryVersion.subscribe((v) => (registryTick = v));
+	const unsubscribeRegistry = registryVersion.subscribe((v) => (registryTick = v));
 
 	// Search query
 	let searchQuery = $state('');
@@ -64,7 +64,10 @@
 		}
 	}
 
-	onDestroy(clearHoverTimers);
+	onDestroy(() => {
+		clearHoverTimers();
+		unsubscribeRegistry();
+	});
 
 	// Collapsed categories
 	let collapsedCategories = $state<Set<string>>(new Set());

From 2c6c1344323cc6e3f5995e751de6f70b849eac42 Mon Sep 17 00:00:00 2001
From: Milan Rother <milan.rother@gmx.de>
Date: Sat, 9 May 2026 09:36:22 +0200
Subject: [PATCH 04/16] fix: clean up toolboxes subscription in
 ToolboxManagerDialog

---
 src/lib/components/dialogs/ToolboxManagerDialog.svelte | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/dialogs/ToolboxManagerDialog.svelte b/src/lib/components/dialogs/ToolboxManagerDialog.svelte
index 2363cad2..f3a66368 100644
--- a/src/lib/components/dialogs/ToolboxManagerDialog.svelte
+++ b/src/lib/components/dialogs/ToolboxManagerDialog.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onDestroy } from 'svelte';
 	import { fade, scale } from 'svelte/transition';
 	import { cubicOut } from 'svelte/easing';
 	import Icon from '$lib/components/icons/Icon.svelte';
@@ -39,7 +40,8 @@
 
 	// Reactive list of installed toolboxes (drives manager and catalog filter)
 	let installed = $state<ToolboxConfig[]>([]);
-	toolboxes.subscribe((list) => (installed = list));
+	const unsubscribeToolboxes = toolboxes.subscribe((list) => (installed = list));
+	onDestroy(unsubscribeToolboxes);
 
 
 	// Source-step inputs

From c0a0d99abe0a05306e9fcf718d6213f00012582c Mon Sep 17 00:00:00 2001
From: Milan Rother <milan.rother@gmx.de>
Date: Sat, 9 May 2026 09:36:44 +0200
Subject: [PATCH 05/16] fix: clean up subsystemTree subscription in
 +page.svelte

---
 src/routes/+page.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2db8ae9a..0b89cb65 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -173,7 +173,7 @@
 	let showEventsPanel = $state(false);
 	let showSubsystemTree = $state(false);
 	let hasAnySubsystem = $state(false);
-	graphStore.subsystemTree.subscribe((tree) => {
+	const unsubSubsystemTree = graphStore.subsystemTree.subscribe((tree) => {
 		const next = tree.length > 0;
 		if (!next && showSubsystemTree) showSubsystemTree = false;
 		hasAnySubsystem = next;
@@ -684,6 +684,7 @@
 			cleanupAutoSave();
 			unsubNodes();
 			unsubConnections();
+			unsubSubsystemTree();
 			window.removeEventListener('run-simulation', handleRunSimulation);
 			window.removeEventListener('continue-simulation', handleContinueSimulation);
 		};

From b1d0437cf4e85c3703c94aff50d44fc48fa5a85d Mon Sep 17 00:00:00 2001
From: Milan Rother <milan.rother@gmx.de>
Date: Sat, 9 May 2026 09:38:35 +0200
Subject: [PATCH 06/16] perf: append in place in mergeStreamingResult to avoid
 quadratic reallocation

---
 src/lib/pyodide/bridge.ts | 35 ++++++++++++++++++++++++-----------
 1 file changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/lib/pyodide/bridge.ts b/src/lib/pyodide/bridge.ts
index d4fe9787..81f02fa9 100644
--- a/src/lib/pyodide/bridge.ts
+++ b/src/lib/pyodide/bridge.ts
@@ -146,8 +146,12 @@ function computeResultHistory(
 }
 
 /**
- * Merge incremental streaming result with accumulated result
- * Scope data is appended, spectrum data is replaced
+ * Merge incremental streaming result with accumulated result.
+ * Scope data is appended IN PLACE on the underlying time/signals arrays
+ * to avoid O(N) reallocation per chunk (which becomes O(N²) over a long
+ * sim). The entry object and outer scopeData are still freshly built so
+ * Svelte reactivity sees a new identity at each level above the arrays.
+ * Spectrum data is replaced.
  */
 function mergeStreamingResult(
 	accumulated: SimulationResult | null,
@@ -157,27 +161,36 @@ function mergeStreamingResult(
 		return incremental;
 	}
 
-	// Merge scope data by appending time and signals
 	const mergedScopeData: SimulationResult['scopeData'] = { ...accumulated.scopeData };
 	for (const [id, data] of Object.entries(incremental.scopeData)) {
-		if (mergedScopeData[id]) {
-			// Append to existing scope data
+		const existing = mergedScopeData[id];
+		if (existing) {
+			// Mutate in place — accumulated arrays are owned by us after the first chunk.
+			for (let i = 0; i < data.time.length; i++) {
+				existing.time.push(data.time[i]);
+			}
+			for (let s = 0; s < existing.signals.length; s++) {
+				const incoming = data.signals[s];
+				if (!incoming) continue;
+				const target = existing.signals[s];
+				for (let i = 0; i < incoming.length; i++) {
+					target.push(incoming[i]);
+				}
+			}
+			// New entry object preserves array refs but flips identity for downstream diffs.
 			mergedScopeData[id] = {
-				time: [...mergedScopeData[id].time, ...data.time],
-				signals: mergedScopeData[id].signals.map((sig, i) => [...sig, ...(data.signals[i] || [])]),
-				labels: data.labels || mergedScopeData[id].labels
+				time: existing.time,
+				signals: existing.signals,
+				labels: data.labels || existing.labels
 			};
 		} else {
-			// New scope
 			mergedScopeData[id] = data;
 		}
 	}
 
 	return {
 		scopeData: mergedScopeData,
-		// Spectrum data is not incremental, just use latest
 		spectrumData: incremental.spectrumData,
-		// Merge node names
 		nodeNames: { ...accumulated.nodeNames, ...incremental.nodeNames }
 	};
 }

From e0e2b6ea8903fba6312c302e73a8c2805cae7c11 Mon Sep 17 00:00:00 2001
From: Milan Rother <milan.rother@gmx.de>
Date: Sat, 9 May 2026 09:38:58 +0200
Subject: [PATCH 07/16] perf: replace JSON.stringify diff with shallow-equal
 helpers in FlowCanvas

---
 src/lib/components/FlowCanvas.svelte |  5 +++--
 src/lib/utils/shallowEqual.ts        | 28 ++++++++++++++++++++++++++++
 2 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/utils/shallowEqual.ts

diff --git a/src/lib/components/FlowCanvas.svelte b/src/lib/components/FlowCanvas.svelte
index 55b0a35b..d1d97db9 100644
--- a/src/lib/components/FlowCanvas.svelte
+++ b/src/lib/components/FlowCanvas.svelte
@@ -36,6 +36,7 @@
 		import { nodeRegistry } from '$lib/nodes';
 	import { NODE_TYPES } from '$lib/constants/nodeTypes';
 	import { GRID_SIZE, SNAP_GRID, BACKGROUND_GAP } from '$lib/constants/grid';
+	import { shallowEqualArray, shallowEqualRecord } from '$lib/utils/shallowEqual';
 	import type { NodeInstance, Connection, Annotation } from '$lib/nodes/types';
 	import type { EventInstance } from '$lib/events/types';
 
@@ -547,8 +548,8 @@
 			}
 			if (currentData.name !== gn.name) return true;
 			if (currentData.color !== gn.color) return true;
-			if (JSON.stringify(currentData.params) !== JSON.stringify(gn.params)) return true;
-			if (JSON.stringify(currentData.pinnedParams) !== JSON.stringify(gn.pinnedParams)) return true;
+			if (!shallowEqualRecord(currentData.params, gn.params)) return true;
+			if (!shallowEqualArray(currentData.pinnedParams, gn.pinnedParams)) return true;
 			return false;
 		});
 
diff --git a/src/lib/utils/shallowEqual.ts b/src/lib/utils/shallowEqual.ts
new file mode 100644
index 00000000..91b32f4e
--- /dev/null
+++ b/src/lib/utils/shallowEqual.ts
@@ -0,0 +1,28 @@
+/**
+ * Shallow-equality helpers for change detection on hot paths.
+ * Avoid JSON.stringify in places that run per-node per-store-tick.
+ */
+
+export function shallowEqualArray<T>(a: readonly T[] | undefined, b: readonly T[] | undefined): boolean {
+	if (a === b) return true;
+	if (!a || !b) return false;
+	if (a.length !== b.length) return false;
+	for (let i = 0; i < a.length; i++) {
+		if (a[i] !== b[i]) return false;
+	}
+	return true;
+}
+
+export function shallowEqualRecord<T>(
+	a: Record<string, T> | undefined,
+	b: Record<string, T> | undefined
+): boolean {
+	if (a === b) return true;
+	if (!a || !b) return false;
+	const aKeys = Object.keys(a);
+	if (aKeys.length !== Object.keys(b).length) return false;
+	for (const key of aKeys) {
+		if (a[key] !== b[key]) return false;
+	}
+	return true;
+}

From 6bdef82ed4c7a0c83103f35cfd387df44348dd85 Mon Sep 17 00:00:00 2001
From: Milan Rother <milan.rother@gmx.de>
Date: Sat, 9 May 2026 09:39:56 +0200
Subject: [PATCH 08/16] perf: replace JSON.parse(JSON.stringify(...)) with
 structuredClone

---
 src/lib/schema/componentOps.ts  |  4 ++--
 src/lib/stores/clipboard.ts     | 10 +++++-----
 src/lib/stores/events.ts        |  2 +-
 src/lib/stores/graph/helpers.ts |  4 ++--
 src/lib/stores/graph/nodes.ts   |  4 ++--
 5 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/lib/schema/componentOps.ts b/src/lib/schema/componentOps.ts
index eefe92f9..154187ee 100644
--- a/src/lib/schema/componentOps.ts
+++ b/src/lib/schema/componentOps.ts
@@ -19,7 +19,7 @@ import { hasFileSystemAccess } from './fileOps';
  */
 export function createBlockFile(node: NodeInstance): ComponentFile {
 	// Deep clone and clean params
-	const clonedNode = JSON.parse(JSON.stringify(node));
+	const clonedNode = structuredClone(node);
 	const cleanedNode = cleanNodeForExport(clonedNode);
 
 	// Remove graph property for blocks (only subsystems have graphs)
@@ -48,7 +48,7 @@ export function createSubsystemFile(node: NodeInstance): ComponentFile {
 	}
 
 	// Deep clone and clean params (recursively for nested subsystems)
-	const clonedNode = JSON.parse(JSON.stringify(node));
+	const clonedNode = structuredClone(node);
 	const cleanedNode = cleanNodeForExport(clonedNode);
 
 	return {
diff --git a/src/lib/stores/clipboard.ts b/src/lib/stores/clipboard.ts
index 554d20eb..6ae94bf5 100644
--- a/src/lib/stores/clipboard.ts
+++ b/src/lib/stores/clipboard.ts
@@ -163,7 +163,7 @@ async function copy(): Promise<boolean> {
 	for (const id of selectedNodeIds) {
 		const annotation = graphStore.getAnnotation(id);
 		if (annotation) {
-			copiedAnnotations.push(JSON.parse(JSON.stringify(annotation)));
+			copiedAnnotations.push(structuredClone(annotation));
 		}
 	}
 
@@ -187,7 +187,7 @@ async function copy(): Promise<boolean> {
 	for (const id of actualNodeIds) {
 		const node = nodesMap.get(id);
 		if (node && node.type !== NODE_TYPES.INTERFACE) {
-			copiedNodes.push(JSON.parse(JSON.stringify(node)));
+			copiedNodes.push(structuredClone(node));
 		}
 	}
 
@@ -195,7 +195,7 @@ async function copy(): Promise<boolean> {
 	const copiedConnections: Connection[] = [];
 	for (const conn of connections) {
 		if (actualNodeIds.has(conn.sourceNodeId) && actualNodeIds.has(conn.targetNodeId)) {
-			copiedConnections.push(JSON.parse(JSON.stringify(conn)));
+			copiedConnections.push(structuredClone(conn));
 		}
 	}
 
@@ -205,7 +205,7 @@ async function copy(): Promise<boolean> {
 		for (const id of selectedEventIds) {
 			const event = eventStore.getEvent(id);
 			if (event) {
-				copiedEvents.push(JSON.parse(JSON.stringify(event)));
+				copiedEvents.push(structuredClone(event));
 			}
 		}
 	} else {
@@ -213,7 +213,7 @@ async function copy(): Promise<boolean> {
 		for (const id of selectedEventIds) {
 			const event = graphStore.getSubsystemEvent(id);
 			if (event) {
-				copiedEvents.push(JSON.parse(JSON.stringify(event)));
+				copiedEvents.push(structuredClone(event));
 			}
 		}
 	}
diff --git a/src/lib/stores/events.ts b/src/lib/stores/events.ts
index 375becab..eb50ff7b 100644
--- a/src/lib/stores/events.ts
+++ b/src/lib/stores/events.ts
@@ -243,7 +243,7 @@ export const eventStore = {
 					y: original.position.y + offset.y
 				},
 				// Deep clone params to avoid shared references
-				params: JSON.parse(JSON.stringify(original.params)),
+				params: structuredClone(original.params),
 				color: original.color
 			};
 
diff --git a/src/lib/stores/graph/helpers.ts b/src/lib/stores/graph/helpers.ts
index e767f5a4..27df8da4 100644
--- a/src/lib/stores/graph/helpers.ts
+++ b/src/lib/stores/graph/helpers.ts
@@ -195,12 +195,12 @@ export function cloneNode(
 			node.outputs.map((p) => ({ name: p.name, color: p.color }))
 		),
 		// Deep clone params to avoid shared references
-		params: JSON.parse(JSON.stringify(node.params)),
+		params: structuredClone(node.params),
 		// Copy pinnedParams array if present
 		pinnedParams: node.pinnedParams ? [...node.pinnedParams] : undefined,
 		color: node.color,
 		// Deep clone graph for subsystems
-		graph: node.graph ? JSON.parse(JSON.stringify(node.graph)) : undefined
+		graph: node.graph ? structuredClone(node.graph) : undefined
 	};
 }
 
diff --git a/src/lib/stores/graph/nodes.ts b/src/lib/stores/graph/nodes.ts
index b6201e13..bf4a22aa 100644
--- a/src/lib/stores/graph/nodes.ts
+++ b/src/lib/stores/graph/nodes.ts
@@ -332,7 +332,7 @@ export function duplicateSelected(): string[] {
 				nodeId: newId
 			})),
 			// Deep clone params to avoid shared references
-			params: JSON.parse(JSON.stringify(original.params)),
+			params: structuredClone(original.params),
 			// Copy pinnedParams array if present
 			pinnedParams: original.pinnedParams ? [...original.pinnedParams] : undefined,
 			color: original.color
@@ -340,7 +340,7 @@ export function duplicateSelected(): string[] {
 
 		// Deep copy and regenerate IDs for subsystem graphs (handles nested subsystems)
 		if (original.graph) {
-			const clonedGraph = JSON.parse(JSON.stringify(original.graph));
+			const clonedGraph = structuredClone(original.graph);
 			newNode.graph = regenerateGraphIds(clonedGraph);
 		}
 

From b1e1a87c6cceb102ef64e81540405aa4b43e1626 Mon Sep 17 00:00:00 2001
From: Milan Rother <milan.rother@gmx.de>
Date: Sat, 9 May 2026 09:42:23 +0200
Subject: [PATCH 09/16] refactor: extract createHoverDetail action shared by
 NodeLibrary and EventsPanel

---
 src/lib/actions/hoverDetail.svelte.ts        | 123 +++++++++++++++++++
 src/lib/components/panels/EventsPanel.svelte | 107 ++--------------
 src/lib/components/panels/NodeLibrary.svelte | 123 ++-----------------
 3 files changed, 145 insertions(+), 208 deletions(-)
 create mode 100644 src/lib/actions/hoverDetail.svelte.ts

diff --git a/src/lib/actions/hoverDetail.svelte.ts b/src/lib/actions/hoverDetail.svelte.ts
new file mode 100644
index 00000000..56861aac
--- /dev/null
+++ b/src/lib/actions/hoverDetail.svelte.ts
@@ -0,0 +1,123 @@
+/**
+ * Reusable hover-detail state machine.
+ *
+ * Drives a "detail column" that appears next to a list when the user hovers
+ * an item. Brushing past tiles on the way to the detail column shouldn't
+ * flip the content, so we delay open/switch/close transitions.
+ *
+ * Used by NodeLibrary and EventsPanel — keep the timing identical so both
+ * panels feel the same.
+ */
+
+const DEFAULT_OPEN_DELAY = 250;
+const DEFAULT_SWITCH_DELAY = 200;
+const DEFAULT_CLOSE_DELAY = 120;
+
+export interface HoverDetailOptions<T> {
+	/** Called whenever the visible detail item changes (including to null). */
+	onChange?: (item: T | null) => void;
+	/** Called when the detail column should appear or disappear. */
+	onVisibleChange?: (visible: boolean) => void;
+	openDelay?: number;
+	switchDelay?: number;
+	closeDelay?: number;
+}
+
+export function createHoverDetail<T>(opts: HoverDetailOptions<T> = {}) {
+	const openDelay = opts.openDelay ?? DEFAULT_OPEN_DELAY;
+	const switchDelay = opts.switchDelay ?? DEFAULT_SWITCH_DELAY;
+	const closeDelay = opts.closeDelay ?? DEFAULT_CLOSE_DELAY;
+
+	let hoveredItem = $state<T | null>(null);
+	let openTimer: ReturnType<typeof setTimeout> | null = null;
+	let switchTimer: ReturnType<typeof setTimeout> | null = null;
+	let closeTimer: ReturnType<typeof setTimeout> | null = null;
+
+	function clearOpenTimer() {
+		if (openTimer !== null) {
+			clearTimeout(openTimer);
+			openTimer = null;
+		}
+	}
+	function clearSwitchTimer() {
+		if (switchTimer !== null) {
+			clearTimeout(switchTimer);
+			switchTimer = null;
+		}
+	}
+	function clearCloseTimer() {
+		if (closeTimer !== null) {
+			clearTimeout(closeTimer);
+			closeTimer = null;
+		}
+	}
+	function clearAll() {
+		clearOpenTimer();
+		clearSwitchTimer();
+		clearCloseTimer();
+	}
+
+	function handleEnter(item: T) {
+		clearCloseTimer();
+		if (hoveredItem === item) {
+			clearSwitchTimer();
+			return;
+		}
+		if (hoveredItem !== null) {
+			clearSwitchTimer();
+			switchTimer = setTimeout(() => {
+				switchTimer = null;
+				hoveredItem = item;
+				opts.onChange?.(item);
+			}, switchDelay);
+			return;
+		}
+		clearOpenTimer();
+		openTimer = setTimeout(() => {
+			openTimer = null;
+			hoveredItem = item;
+			opts.onChange?.(item);
+			opts.onVisibleChange?.(true);
+		}, openDelay);
+	}
+
+	function handleLeave() {
+		clearOpenTimer();
+		clearSwitchTimer();
+		if (hoveredItem === null) return;
+		clearCloseTimer();
+		closeTimer = setTimeout(() => {
+			closeTimer = null;
+			hoveredItem = null;
+			opts.onChange?.(null);
+			opts.onVisibleChange?.(false);
+		}, closeDelay);
+	}
+
+	function hideNow() {
+		clearAll();
+		const wasShown = hoveredItem !== null;
+		hoveredItem = null;
+		if (wasShown) {
+			opts.onChange?.(null);
+			opts.onVisibleChange?.(false);
+		}
+	}
+
+	function keepAlive() {
+		clearCloseTimer();
+		clearSwitchTimer();
+	}
+
+	return {
+		get hovered() {
+			return hoveredItem;
+		},
+		handleEnter,
+		handleLeave,
+		hideNow,
+		keepAlive,
+		dismiss: handleLeave,
+		cleanup: clearAll
+	};
+}
diff --git a/src/lib/components/panels/EventsPanel.svelte b/src/lib/components/panels/EventsPanel.svelte
index afcd0e67..3ee22b2e 100644
--- a/src/lib/components/panels/EventsPanel.svelte
+++ b/src/lib/components/panels/EventsPanel.svelte
@@ -6,6 +6,7 @@
 	import { graphStore } from '$lib/stores/graph';
 	import { historyStore } from '$lib/stores/history';
 	import { screenToFlow } from '$lib/stores/viewActions';
+	import { createHoverDetail } from '$lib/actions/hoverDetail.svelte';
 	import EventPreview from '$lib/components/nodes/EventPreview.svelte';
 
 	interface Props {
@@ -33,109 +34,23 @@
 	// Track drag state to prevent click after drag
 	let isDragging = $state(false);
 
-	// Hover-detail state — same pattern as NodeLibrary.
-	const HOVER_OPEN_DELAY = 250;
-	const HOVER_SWITCH_DELAY = 200;
-	const HOVER_CLOSE_DELAY = 120;
-	let hoveredItem = $state<EventTypeDefinition | null>(null);
-	let hoverOpenTimer: ReturnType<typeof setTimeout> | null = null;
-	let hoverSwitchTimer: ReturnType<typeof setTimeout> | null = null;
-	let hoverCloseTimer: ReturnType<typeof setTimeout> | null = null;
-
-	function clearHoverTimers() {
-		if (hoverOpenTimer !== null) {
-			clearTimeout(hoverOpenTimer);
-			hoverOpenTimer = null;
-		}
-		if (hoverSwitchTimer !== null) {
-			clearTimeout(hoverSwitchTimer);
-			hoverSwitchTimer = null;
-		}
-		if (hoverCloseTimer !== null) {
-			clearTimeout(hoverCloseTimer);
-			hoverCloseTimer = null;
-		}
-	}
+	const hover = createHoverDetail<EventTypeDefinition>({
+		onChange: (item) => onhoveritem?.(item),
+		onVisibleChange: (visible) => ondetailvisible?.(visible)
+	});
 
 	onDestroy(() => {
-		clearHoverTimers();
+		hover.cleanup();
 		unsubscribeRegistry();
 		unsubscribePath();
 	});
 
-	function handleMouseEnter(item: EventTypeDefinition) {
-		if (hoverCloseTimer !== null) {
-			clearTimeout(hoverCloseTimer);
-			hoverCloseTimer = null;
-		}
-		if (hoveredItem === item) {
-			if (hoverSwitchTimer !== null) {
-				clearTimeout(hoverSwitchTimer);
-				hoverSwitchTimer = null;
-			}
-			return;
-		}
-		if (hoveredItem !== null) {
-			if (hoverSwitchTimer !== null) clearTimeout(hoverSwitchTimer);
-			hoverSwitchTimer = setTimeout(() => {
-				hoverSwitchTimer = null;
-				hoveredItem = item;
-				onhoveritem?.(item);
-			}, HOVER_SWITCH_DELAY);
-			return;
-		}
-		if (hoverOpenTimer !== null) clearTimeout(hoverOpenTimer);
-		hoverOpenTimer = setTimeout(() => {
-			hoverOpenTimer = null;
-			hoveredItem = item;
-			onhoveritem?.(item);
-			ondetailvisible?.(true);
-		}, HOVER_OPEN_DELAY);
-	}
+	const handleMouseEnter = (item: EventTypeDefinition) => hover.handleEnter(item);
+	const handleMouseLeave = () => hover.handleLeave();
+	const hideDetailNow = () => hover.hideNow();
 
-	function handleMouseLeave() {
-		if (hoverOpenTimer !== null) {
-			clearTimeout(hoverOpenTimer);
-			hoverOpenTimer = null;
-		}
-		if (hoverSwitchTimer !== null) {
-			clearTimeout(hoverSwitchTimer);
-			hoverSwitchTimer = null;
-		}
-		if (hoveredItem === null) return;
-		if (hoverCloseTimer !== null) clearTimeout(hoverCloseTimer);
-		hoverCloseTimer = setTimeout(() => {
-			hoverCloseTimer = null;
-			hoveredItem = null;
-			onhoveritem?.(null);
-			ondetailvisible?.(false);
-		}, HOVER_CLOSE_DELAY);
-	}
-
-	function hideDetailNow() {
-		clearHoverTimers();
-		const wasShown = hoveredItem !== null;
-		hoveredItem = null;
-		if (wasShown) {
-			onhoveritem?.(null);
-			ondetailvisible?.(false);
-		}
-	}
-
-	export function keepDetailAlive() {
-		if (hoverCloseTimer !== null) {
-			clearTimeout(hoverCloseTimer);
-			hoverCloseTimer = null;
-		}
-		if (hoverSwitchTimer !== null) {
-			clearTimeout(hoverSwitchTimer);
-			hoverSwitchTimer = null;
-		}
-	}
-
-	export function dismissDetail() {
-		handleMouseLeave();
-	}
+	export const keepDetailAlive = () => hover.keepAlive();
+	export const dismissDetail = () => hover.dismiss();
 
 	/**
 	 * Add an event at the current level (root or subsystem)
diff --git a/src/lib/components/panels/NodeLibrary.svelte b/src/lib/components/panels/NodeLibrary.svelte
index 3410e777..0e4b0aba 100644
--- a/src/lib/components/panels/NodeLibrary.svelte
+++ b/src/lib/components/panels/NodeLibrary.svelte
@@ -2,6 +2,7 @@
 	import { onDestroy } from 'svelte';
 	import { nodeRegistry, blockConfig, registryVersion, type NodeCategory, type NodeTypeDefinition } from '$lib/nodes';
 	import { NODE_TYPES } from '$lib/constants/nodeTypes';
+	import { createHoverDetail } from '$lib/actions/hoverDetail.svelte';
 	import NodePreview from '$lib/components/nodes/NodePreview.svelte';
 	import Icon from '$lib/components/icons/Icon.svelte';
 	interface Props {
@@ -37,35 +38,13 @@
 	let dragPreviewNode = $state<NodeTypeDefinition | null>(null);
 	let dragPreviewElement = $state<HTMLDivElement | undefined>(undefined);
 
-	// Hover-detail state. The detail content lives in a second column inside
-	// the library panel itself. We delay both opening and closing so that
-	// brushing past tiles on the way to the detail column doesn't flicker
-	// through every block in between.
-	const HOVER_OPEN_DELAY = 250;
-	const HOVER_SWITCH_DELAY = 200;
-	const HOVER_CLOSE_DELAY = 120;
-	let hoveredItem = $state<NodeTypeDefinition | null>(null);
-	let hoverOpenTimer: ReturnType<typeof setTimeout> | null = null;
-	let hoverSwitchTimer: ReturnType<typeof setTimeout> | null = null;
-	let hoverCloseTimer: ReturnType<typeof setTimeout> | null = null;
-
-	function clearHoverTimers() {
-		if (hoverOpenTimer !== null) {
-			clearTimeout(hoverOpenTimer);
-			hoverOpenTimer = null;
-		}
-		if (hoverSwitchTimer !== null) {
-			clearTimeout(hoverSwitchTimer);
-			hoverSwitchTimer = null;
-		}
-		if (hoverCloseTimer !== null) {
-			clearTimeout(hoverCloseTimer);
-			hoverCloseTimer = null;
-		}
-	}
+	const hover = createHoverDetail<NodeTypeDefinition>({
+		onChange: (item) => onhoveritem?.(item),
+		onVisibleChange: (visible) => ondetailvisible?.(visible)
+	});
 
 	onDestroy(() => {
-		clearHoverTimers();
+		hover.cleanup();
 		unsubscribeRegistry();
 	});
 
@@ -132,100 +111,20 @@
 	// Handle mouse enter to prepare drag preview and schedule detail open.
 	function handleMouseEnter(node: NodeTypeDefinition) {
 		dragPreviewNode = node;
-		scheduleShowDetail(node);
+		hover.handleEnter(node);
 	}
 
-	function handleMouseLeave() {
-		scheduleHideDetail();
-	}
-
-	function scheduleShowDetail(node: NodeTypeDefinition) {
-		// Cancel pending close — we're hovering something again.
-		if (hoverCloseTimer !== null) {
-			clearTimeout(hoverCloseTimer);
-			hoverCloseTimer = null;
-		}
-		// Already showing this exact item — drop any in-flight switch so
-		// it doesn't replace us with itself.
-		if (hoveredItem === node) {
-			if (hoverSwitchTimer !== null) {
-				clearTimeout(hoverSwitchTimer);
-				hoverSwitchTimer = null;
-			}
-			return;
-		}
-		// Detail is open on a different item: schedule a switch. Brushing
-		// past tiles on the way to the detail column won't flip content
-		// because the cursor leaves before this timer fires.
-		if (hoveredItem !== null) {
-			if (hoverSwitchTimer !== null) clearTimeout(hoverSwitchTimer);
-			hoverSwitchTimer = setTimeout(() => {
-				hoverSwitchTimer = null;
-				hoveredItem = node;
-				onhoveritem?.(node);
-			}, HOVER_SWITCH_DELAY);
-			return;
-		}
-		// First-time open: wait a moment so brushing past tiles doesn't
-		// flash a detail.
-		if (hoverOpenTimer !== null) clearTimeout(hoverOpenTimer);
-		hoverOpenTimer = setTimeout(() => {
-			hoverOpenTimer = null;
-			hoveredItem = node;
-			onhoveritem?.(node);
-			ondetailvisible?.(true);
-		}, HOVER_OPEN_DELAY);
-	}
-
-	function scheduleHideDetail() {
-		// Cancel pending open / switch — user moved off before we'd commit.
-		if (hoverOpenTimer !== null) {
-			clearTimeout(hoverOpenTimer);
-			hoverOpenTimer = null;
-		}
-		if (hoverSwitchTimer !== null) {
-			clearTimeout(hoverSwitchTimer);
-			hoverSwitchTimer = null;
-		}
-		if (hoveredItem === null) return;
-		if (hoverCloseTimer !== null) clearTimeout(hoverCloseTimer);
-		hoverCloseTimer = setTimeout(() => {
-			hoverCloseTimer = null;
-			hoveredItem = null;
-			onhoveritem?.(null);
-			ondetailvisible?.(false);
-		}, HOVER_CLOSE_DELAY);
-	}
-
-	function hideDetailNow() {
-		clearHoverTimers();
-		const wasShown = hoveredItem !== null;
-		hoveredItem = null;
-		if (wasShown) {
-			onhoveritem?.(null);
-			ondetailvisible?.(false);
-		}
-	}
+	const handleMouseLeave = () => hover.handleLeave();
+	const hideDetailNow = () => hover.hideNow();
 
 	/** Called from the parent when the cursor enters the detail column —
 	 *  cancel any pending dismiss / switch so the column stays open and
 	 *  doesn't swap content from a transient last-tile hover. */
-	export function keepDetailAlive() {
-		if (hoverCloseTimer !== null) {
-			clearTimeout(hoverCloseTimer);
-			hoverCloseTimer = null;
-		}
-		if (hoverSwitchTimer !== null) {
-			clearTimeout(hoverSwitchTimer);
-			hoverSwitchTimer = null;
-		}
-	}
+	export const keepDetailAlive = () => hover.keepAlive();
 
 	/** Called from the parent when the cursor leaves the detail column —
 	 *  schedule the same delayed dismiss as a tile mouseleave. */
-	export function dismissDetail() {
-		scheduleHideDetail();
-	}
+	export const dismissDetail = () => hover.dismiss();
 
 	// Handle drag start
 	function handleDragStart(event: DragEvent, nodeType: NodeTypeDefinition) {

From a820167a402c17605ab5e70a1a8acf5ee1356807 Mon Sep 17 00:00:00 2001
From: Milan Rother <milan.rother@gmx.de>
Date: Sat, 9 May 2026 09:47:26 +0200
Subject: [PATCH 10/16] refactor: extract DialogShell and migrate
 ConfirmationModal, KeyboardShortcuts, Export, CodePreview, SearchDialog

---
 src/lib/components/ConfirmationModal.svelte   |  90 ++++++--------
 .../dialogs/CodePreviewDialog.svelte          |  97 +++++++--------
 .../components/dialogs/ExportDialog.svelte    | 113 ++++++++----------
 .../dialogs/KeyboardShortcutsDialog.svelte    |  88 ++++++--------
 .../components/dialogs/SearchDialog.svelte    |  43 +++----
 .../dialogs/shared/DialogShell.svelte         |  79 ++++++++++++
 6 files changed, 259 insertions(+), 251 deletions(-)
 create mode 100644 src/lib/components/dialogs/shared/DialogShell.svelte

diff --git a/src/lib/components/ConfirmationModal.svelte b/src/lib/components/ConfirmationModal.svelte
index 56f1c0a7..f5f14cb7 100644
--- a/src/lib/components/ConfirmationModal.svelte
+++ b/src/lib/components/ConfirmationModal.svelte
@@ -1,17 +1,18 @@
 <script lang="ts">
-	import { fade, scale } from 'svelte/transition';
-	import { cubicOut } from 'svelte/easing';
+	import { onDestroy } from 'svelte';
 	import { confirmationStore, type ConfirmationOptions } from '$lib/stores/confirmation';
 	import Icon from '$lib/components/icons/Icon.svelte';
+	import DialogShell from '$lib/components/dialogs/shared/DialogShell.svelte';
 
 	let state = $state<{
 		open: boolean;
 		options: ConfirmationOptions | null;
 	}>({ open: false, options: null });
 
-	confirmationStore.subscribe((s) => {
+	const unsubscribe = confirmationStore.subscribe((s) => {
 		state = { open: s.open, options: s.options };
 	});
+	onDestroy(unsubscribe);
 
 	function handleConfirm() {
 		confirmationStore.confirm();
@@ -21,64 +22,47 @@
 		confirmationStore.cancel();
 	}
 
-	function handleBackdropClick(event: MouseEvent) {
-		if (event.target === event.currentTarget) {
-			handleCancel();
-		}
-	}
-
-	function handleKeydown(event: KeyboardEvent) {
-		if (!state.open) return;
-		if (event.key === 'Escape') {
-			handleCancel();
-		} else if (event.key === 'Enter') {
+	function handleEnterKey(event: KeyboardEvent) {
+		if (state.open && event.key === 'Enter') {
 			handleConfirm();
 		}
 	}
 </script>
 
-<svelte:window onkeydown={handleKeydown} />
-
-{#if state.open && state.options}
-	<div
-		class="dialog-backdrop"
-		onclick={handleBackdropClick}
-		transition:fade={{ duration: 150 }}
-		role="presentation"
-	>
-		<div
-			class="confirmation-dialog glass-panel"
-			transition:scale={{ start: 0.95, duration: 150, easing: cubicOut }}
-			role="alertdialog"
-			aria-modal="true"
-			aria-labelledby="confirmation-title"
-			aria-describedby="confirmation-message"
-		>
-			<div class="dialog-header">
-				<span id="confirmation-title">{state.options.title}</span>
-				<button class="icon-btn" onclick={handleCancel} aria-label="Close">
-					<Icon name="x" size={16} />
-				</button>
-			</div>
-
-			<div class="dialog-body">
-				<p id="confirmation-message">{state.options.message}</p>
-			</div>
-
-			<div class="dialog-actions">
-				<button class="ghost" onclick={handleCancel}>
-					{state.options.cancelText}
-				</button>
-				<button onclick={handleConfirm}>
-					{state.options.confirmText}
-				</button>
-			</div>
+<svelte:window onkeydown={handleEnterKey} />
+
+<DialogShell
+	open={state.open && state.options !== null}
+	onClose={handleCancel}
+	ariaLabelledby="confirmation-title"
+	role="alertdialog"
+	dialogClass="confirmation-dialog glass-panel"
+>
+	{#if state.options}
+		<div class="dialog-header">
+			<span id="confirmation-title">{state.options.title}</span>
+			<button class="icon-btn" onclick={handleCancel} aria-label="Close">
+				<Icon name="x" size={16} />
+			</button>
+		</div>
+
+		<div class="dialog-body">
+			<p id="confirmation-message">{state.options.message}</p>
+		</div>
+
+		<div class="dialog-actions">
+			<button class="ghost" onclick={handleCancel}>
+				{state.options.cancelText}
+			</button>
+			<button onclick={handleConfirm}>
+				{state.options.confirmText}
+			</button>
 		</div>
-	</div>
-{/if}
+	{/if}
+</DialogShell>
 
 <style>
-	.confirmation-dialog {
+	:global(.confirmation-dialog) {
 		width: 90%;
 		max-width: 320px;
 		display: flex;
diff --git a/src/lib/components/dialogs/CodePreviewDialog.svelte b/src/lib/components/dialogs/CodePreviewDialog.svelte
index 5ecb49ef..23cd17fa 100644
--- a/src/lib/components/dialogs/CodePreviewDialog.svelte
+++ b/src/lib/components/dialogs/CodePreviewDialog.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
 	import { onDestroy } from 'svelte';
-	import { fade, scale } from 'svelte/transition';
-	import { cubicOut } from 'svelte/easing';
 	import { themeStore, type Theme } from '$lib/stores/theme';
 	import { tooltip } from '$lib/components/Tooltip.svelte';
 	import Icon from '$lib/components/icons/Icon.svelte';
 	import { loadCodeMirrorModules, createEditorExtensions, type CodeMirrorModules } from '$lib/utils/codemirror';
+	import DialogShell from './shared/DialogShell.svelte';
 
 	interface Props {
 		open: boolean;
@@ -105,69 +104,57 @@
 		setTimeout(() => (copied = false), 2000);
 	}
 
-	function handleBackdropClick(event: MouseEvent) {
-		if (event.target === event.currentTarget) {
-			onClose();
-		}
-	}
-
-	function handleKeydown(event: KeyboardEvent) {
-		if (event.key === 'Escape') {
-			onClose();
-		}
-	}
-
 	onDestroy(() => {
 		unsubscribeTheme();
 		destroyEditor();
 	});
 </script>
 
-<svelte:window onkeydown={handleKeydown} />
-
-{#if open}
-	<div class="dialog-backdrop nested" transition:fade={{ duration: 150 }} onclick={handleBackdropClick} role="presentation">
-		<div class="dialog glass-panel" transition:scale={{ start: 0.95, duration: 150, easing: cubicOut }} role="dialog" tabindex="-1" aria-labelledby="dialog-title">
-			<div class="dialog-header">
-				<span id="dialog-title">{title}</span>
-				<div class="header-actions">
-					<button
-						class="icon-btn"
-						class:success={copied}
-						onclick={copyToClipboard}
-						use:tooltip={copied ? "Copied!" : "Copy to Clipboard"}
-						aria-label="Copy to Clipboard"
-					>
-						{#if copied}
-							<Icon name="check" size={16} />
-						{:else}
-							<Icon name="copy" size={16} />
-						{/if}
-					</button>
-					<button
-						class="icon-btn"
-						onclick={onClose}
-						use:tooltip={{ text: "Close", shortcut: "Esc" }}
-						aria-label="Close"
-					>
-						<Icon name="x" size={16} />
-					</button>
-				</div>
-			</div>
-
-			<div class="dialog-body">
-				<div class="code-preview" bind:this={editorContainer}>
-					{#if editorLoading}
-						<div class="loading">Loading...</div>
-					{/if}
-				</div>
-			</div>
+<DialogShell
+	{open}
+	{onClose}
+	ariaLabelledby="dialog-title"
+	backdropClass="dialog-backdrop nested"
+	dialogClass="dialog glass-panel code-preview-dialog"
+>
+	<div class="dialog-header">
+		<span id="dialog-title">{title}</span>
+		<div class="header-actions">
+			<button
+				class="icon-btn"
+				class:success={copied}
+				onclick={copyToClipboard}
+				use:tooltip={copied ? "Copied!" : "Copy to Clipboard"}
+				aria-label="Copy to Clipboard"
+			>
+				{#if copied}
+					<Icon name="check" size={16} />
+				{:else}
+					<Icon name="copy" size={16} />
+				{/if}
+			</button>
+			<button
+				class="icon-btn"
+				onclick={onClose}
+				use:tooltip={{ text: "Close", shortcut: "Esc" }}
+				aria-label="Close"
+			>
+				<Icon name="x" size={16} />
+			</button>
+		</div>
+	</div>
+
+	<div class="dialog-body">
+		<div class="code-preview" bind:this={editorContainer}>
+			{#if editorLoading}
+				<div class="loading">Loading...</div>
+			{/if}
 		</div>
 	</div>
-{/if}
+</DialogShell>
 
 <style>
-	.dialog {
+	:global(.code-preview-dialog) {
 		width: 90%;
 		max-width: 700px;
 		max-height: 80vh;
diff --git a/src/lib/components/dialogs/ExportDialog.svelte b/src/lib/components/dialogs/ExportDialog.svelte
index 77680ad2..6f9ad85e 100644
--- a/src/lib/components/dialogs/ExportDialog.svelte
+++ b/src/lib/components/dialogs/ExportDialog.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
 	import { onDestroy } from 'svelte';
-	import { fade, scale } from 'svelte/transition';
-	import { cubicOut } from 'svelte/easing';
 	import { graphStore } from '$lib/stores/graph';
 	import { eventStore } from '$lib/stores/events';
 	import { settingsStore } from '$lib/stores/settings';
@@ -12,6 +10,7 @@
 	import Icon from '$lib/components/icons/Icon.svelte';
 	import { loadCodeMirrorModules, createEditorExtensions, type CodeMirrorModules } from '$lib/utils/codemirror';
 	import { downloadPython } from '$lib/utils/download';
+	import DialogShell from './shared/DialogShell.svelte';
 
 	interface Props {
 		open: boolean;
@@ -113,79 +112,67 @@
 		downloadPython(pythonCode, 'pathview_simulation.py');
 	}
 
-	function handleBackdropClick(event: MouseEvent) {
-		if (event.target === event.currentTarget) {
-			onClose();
-		}
-	}
-
-	function handleKeydown(event: KeyboardEvent) {
-		if (event.key === 'Escape') {
-			onClose();
-		}
-	}
-
 	onDestroy(() => {
 		unsubscribeTheme();
 		destroyEditor();
 	});
 </script>
 
-<svelte:window onkeydown={handleKeydown} />
-
-{#if open}
-	<div class="dialog-backdrop" transition:fade={{ duration: 150 }} onclick={handleBackdropClick} role="presentation">
-		<div class="dialog glass-panel" data-tour="dialog-python-export" transition:scale={{ start: 0.95, duration: 150, easing: cubicOut }} role="dialog" tabindex="-1" aria-labelledby="dialog-title">
-			<div class="dialog-header">
-				<span id="dialog-title">Export Python Code</span>
-				<div class="header-actions">
-					<button
-						class="icon-btn"
-						class:success={copied}
-						onclick={copyToClipboard}
-						use:tooltip={copied ? "Copied!" : "Copy to Clipboard"}
-						aria-label="Copy to Clipboard"
-					>
-						{#if copied}
-							<Icon name="check" size={16} />
-						{:else}
-							<Icon name="copy" size={16} />
-						{/if}
-					</button>
-					<button
-						class="icon-btn"
-						onclick={downloadFile}
-						use:tooltip={"Download .py"}
-						aria-label="Download Python file"
-					>
-						<Icon name="download" size={16} />
-					</button>
-					<button
-						class="icon-btn"
-						onclick={onClose}
-						use:tooltip={{ text: "Close", shortcut: "Esc" }}
-						aria-label="Close"
-					>
-						<Icon name="x" size={16} />
-					</button>
-				</div>
-			</div>
-
-			<div class="dialog-body">
-				<div class="code-preview" bind:this={editorContainer}>
-					{#if editorLoading}
-						<div class="loading">Loading syntax highlighting...</div>
-					{/if}
-				</div>
-			</div>
+<DialogShell
+	{open}
+	{onClose}
+	ariaLabelledby="dialog-title"
+	dataTour="dialog-python-export"
+	dialogClass="dialog glass-panel export-dialog"
+>
+	<div class="dialog-header">
+		<span id="dialog-title">Export Python Code</span>
+		<div class="header-actions">
+			<button
+				class="icon-btn"
+				class:success={copied}
+				onclick={copyToClipboard}
+				use:tooltip={copied ? "Copied!" : "Copy to Clipboard"}
+				aria-label="Copy to Clipboard"
+			>
+				{#if copied}
+					<Icon name="check" size={16} />
+				{:else}
+					<Icon name="copy" size={16} />
+				{/if}
+			</button>
+			<button
+				class="icon-btn"
+				onclick={downloadFile}
+				use:tooltip={"Download .py"}
+				aria-label="Download Python file"
+			>
+				<Icon name="download" size={16} />
+			</button>
+			<button
+				class="icon-btn"
+				onclick={onClose}
+				use:tooltip={{ text: "Close", shortcut: "Esc" }}
+				aria-label="Close"
+			>
+				<Icon name="x" size={16} />
+			</button>
+		</div>
+	</div>
+
+	<div class="dialog-body">
+		<div class="code-preview" bind:this={editorContainer}>
+			{#if editorLoading}
+				<div class="loading">Loading syntax highlighting...</div>
+			{/if}
 		</div>
 	</div>
-{/if}
+</DialogShell>
 
 <style>
 	/* Uses global .dialog-backdrop, .dialog-header, .icon-btn from app.css */
 
-	.dialog {
+	:global(.export-dialog) {
 		width: 90%;
 		max-width: 800px;
 		max-height: 80vh;
diff --git a/src/lib/components/dialogs/KeyboardShortcutsDialog.svelte b/src/lib/components/dialogs/KeyboardShortcutsDialog.svelte
index 85263fc4..52ba9b3f 100644
--- a/src/lib/components/dialogs/KeyboardShortcutsDialog.svelte
+++ b/src/lib/components/dialogs/KeyboardShortcutsDialog.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-	import { fade, scale } from 'svelte/transition';
-	import { cubicOut } from 'svelte/easing';
 	import Icon from '$lib/components/icons/Icon.svelte';
+	import DialogShell from './shared/DialogShell.svelte';
 
 	interface Props {
 		open: boolean;
@@ -10,12 +9,6 @@
 
 	let { open, onClose }: Props = $props();
 
-	function handleKeydown(event: KeyboardEvent) {
-		if (event.key === 'Escape') {
-			onClose();
-		}
-	}
-
 	const shortcuts = [
 		{
 			category: 'File',
@@ -87,58 +80,47 @@
 	];
 </script>
 
-<svelte:window onkeydown={handleKeydown} />
-
-{#if open}
-	<!-- svelte-ignore a11y_no_static_element_interactions, a11y_click_events_have_key_events -->
-	<div class="dialog-backdrop" transition:fade={{ duration: 150 }} onclick={onClose} role="presentation">
-		<!-- svelte-ignore a11y_no_static_element_interactions, a11y_click_events_have_key_events -->
-		<div
-			class="dialog glass-panel"
-			data-tour="dialog-shortcuts"
-			transition:scale={{ start: 0.95, duration: 150, easing: cubicOut }}
-			onclick={(e) => e.stopPropagation()}
-			role="dialog"
-			tabindex="-1"
-			aria-modal="true"
-			aria-labelledby="shortcuts-title"
-		>
-			<div class="dialog-header">
-				<span id="shortcuts-title">Keyboard Shortcuts</span>
-				<button class="icon-btn ghost" onclick={onClose} aria-label="Close">
-					<Icon name="x" size={16} />
-				</button>
-			</div>
+<DialogShell
+	{open}
+	{onClose}
+	ariaLabelledby="shortcuts-title"
+	dataTour="dialog-shortcuts"
+	dialogClass="dialog glass-panel shortcuts-dialog"
+>
+	<div class="dialog-header">
+		<span id="shortcuts-title">Keyboard Shortcuts</span>
+		<button class="icon-btn ghost" onclick={onClose} aria-label="Close">
+			<Icon name="x" size={16} />
+		</button>
+	</div>
 
-			<div class="dialog-body">
-				{#each shortcuts as section}
-					<div class="section">
-						<div class="section-header">{section.category}</div>
-						<div class="section-items">
-							{#each section.items as shortcut}
-								<div class="shortcut-row">
-									<span class="keys">
-										{#each shortcut.keys as key, i}
-											<kbd>{key}</kbd>{#if i < shortcut.keys.length - 1}<span class="separator">+</span>{/if}
-										{/each}
-									</span>
-									<span class="label">{shortcut.description}</span>
-								</div>
-							{/each}
+	<div class="dialog-body">
+		{#each shortcuts as section}
+			<div class="section">
+				<div class="section-header">{section.category}</div>
+				<div class="section-items">
+					{#each section.items as shortcut}
+						<div class="shortcut-row">
+							<span class="keys">
+								{#each shortcut.keys as key, i}
+									<kbd>{key}</kbd>{#if i < shortcut.keys.length - 1}<span class="separator">+</span>{/if}
+								{/each}
+							</span>
+							<span class="label">{shortcut.description}</span>
 						</div>
-					</div>
-				{/each}
+					{/each}
+				</div>
 			</div>
+		{/each}
+	</div>
 
-			<div class="dialog-footer">
-				Press <kbd>?</kbd> to toggle
-			</div>
-		</div>
+	<div class="dialog-footer">
+		Press <kbd>?</kbd> to toggle
 	</div>
-{/if}
+</DialogShell>
 
 <style>
-	.dialog {
+	:global(.shortcuts-dialog) {
 		width: 580px;
 		max-width: 90vw;
 		max-height: 80vh;
diff --git a/src/lib/components/dialogs/SearchDialog.svelte b/src/lib/components/dialogs/SearchDialog.svelte
index 4588f9df..8a650358 100644
--- a/src/lib/components/dialogs/SearchDialog.svelte
+++ b/src/lib/components/dialogs/SearchDialog.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
 	import { onDestroy } from 'svelte';
-	import { fade, scale } from 'svelte/transition';
-	import { cubicOut } from 'svelte/easing';
 	import { graphStore, type SearchableNode } from '$lib/stores/graph';
 	import { triggerFocusNode } from '$lib/stores/viewActions';
 	import Icon from '$lib/components/icons/Icon.svelte';
+	import DialogShell from './shared/DialogShell.svelte';
 
 	interface Props {
 		open: boolean;
@@ -88,9 +87,7 @@
 
 		const items = filteredNodes();
 
-		if (event.key === 'Escape') {
-			onClose();
-		} else if (event.key === 'ArrowDown') {
+		if (event.key === 'ArrowDown') {
 			event.preventDefault();
 			selectedIndex = Math.min(selectedIndex + 1, items.length - 1);
 		} else if (event.key === 'ArrowUp') {
@@ -133,20 +130,14 @@
 
 <svelte:window onkeydown={handleKeydown} />
 
-{#if open}
-	<!-- svelte-ignore a11y_no_static_element_interactions, a11y_click_events_have_key_events -->
-	<div class="dialog-backdrop" transition:fade={{ duration: 100 }} onclick={onClose} onkeydown={(e) => e.key === 'Escape' && onClose()} role="presentation">
-		<!-- svelte-ignore a11y_no_static_element_interactions, a11y_click_events_have_key_events -->
-		<div
-			class="search-dialog glass-panel"
-			data-tour="dialog-search"
-			transition:scale={{ start: 0.95, duration: 150, easing: cubicOut }}
-			onclick={(e) => e.stopPropagation()}
-			role="dialog"
-			tabindex="-1"
-			aria-modal="true"
-		>
-			<div class="search-container">
+<DialogShell
+	{open}
+	{onClose}
+	dataTour="dialog-search"
+	dialogClass="search-dialog glass-panel"
+	backdropFadeDuration={100}
+>
+		<div class="search-container">
 				<span class="search-icon"><Icon name="search" size={14} /></span>
 				<input
 					bind:this={searchInput}
@@ -181,17 +172,15 @@
 				<div class="no-results">No blocks found</div>
 			{/if}
 
-			<div class="footer">
-				<span><kbd>↑</kbd><kbd>↓</kbd> navigate</span>
-				<span><kbd>↵</kbd> select</span>
-				<span><kbd>esc</kbd> close</span>
-			</div>
+		<div class="footer">
+			<span><kbd>↑</kbd><kbd>↓</kbd> navigate</span>
+			<span><kbd>↵</kbd> select</span>
+			<span><kbd>esc</kbd> close</span>
 		</div>
-	</div>
-{/if}
+</DialogShell>
 
 <style>
-	.search-dialog {
+	:global(.search-dialog) {
 		position: absolute;
 		top: 15vh;
 		width: 320px;
diff --git a/src/lib/components/dialogs/shared/DialogShell.svelte b/src/lib/components/dialogs/shared/DialogShell.svelte
new file mode 100644
index 00000000..b6d8fab7
--- /dev/null
+++ b/src/lib/components/dialogs/shared/DialogShell.svelte
@@ -0,0 +1,79 @@
+<!--
+  Shared dialog shell — provides backdrop + scaled glass-panel wrapper +
+  Escape-to-close + click-outside-to-close. Inner markup (header/body/footer)
+  stays in each consumer so existing dialogs can adopt this incrementally
+  without churning their content.
+
+  Custom keyboard handling stays in the consumer (extra svelte:window listener);
+  if the consumer also handles Escape, set `closeOnEscape={false}` to avoid
+  double-firing.
+-->
+<script lang="ts">
+	import { fade, scale } from 'svelte/transition';
+	import { cubicOut } from 'svelte/easing';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		open: boolean;
+		onClose: () => void;
+		ariaLabelledby?: string;
+		dataTour?: string;
+		role?: 'dialog' | 'alertdialog';
+		closeOnEscape?: boolean;
+		closeOnBackdrop?: boolean;
+		backdropFadeDuration?: number;
+		dialogScaleDuration?: number;
+		backdropClass?: string;
+		dialogClass?: string;
+		children: Snippet;
+	}
+
+	let {
+		open,
+		onClose,
+		ariaLabelledby,
+		dataTour,
+		role = 'dialog',
+		closeOnEscape = true,
+		closeOnBackdrop = true,
+		backdropFadeDuration = 150,
+		dialogScaleDuration = 150,
+		backdropClass = 'dialog-backdrop',
+		dialogClass = 'dialog glass-panel',
+		children
+	}: Props = $props();
+
+	function handleBackdropClick(e: MouseEvent) {
+		if (!closeOnBackdrop) return;
+		if (e.target === e.currentTarget) onClose();
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (!open) return;
+		if (closeOnEscape && e.key === 'Escape') onClose();
+	}
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if open}
+	<!-- svelte-ignore a11y_no_static_element_interactions, a11y_click_events_have_key_events -->
+	<div
+		class={backdropClass}
+		transition:fade={{ duration: backdropFadeDuration }}
+		onclick={handleBackdropClick}
+		role="presentation"
+	>
+		<div
+			class={dialogClass}
+			data-tour={dataTour}
+			transition:scale={{ start: 0.95, duration: dialogScaleDuration, easing: cubicOut }}
+			{role}
+			tabindex="-1"
+			aria-modal="true"
+			aria-labelledby={ariaLabelledby}
+		>
+			{@render children()}
+		</div>
+	</div>
+{/if}

From fb904b42fc320cfef4595e823c6f7cd7dbc7c370 Mon Sep 17 00:00:00 2001
From: Milan Rother <milan.rother@gmx.de>
Date: Sat, 9 May 2026 09:50:57 +0200
Subject: [PATCH 11/16] refactor: migrate remaining dialogs (PlotOptions,
 EventProperties, BlockProperties, ToolboxManager) to DialogShell

---
 .../dialogs/BlockPropertiesDialog.svelte      | 47 +++++++------------
 .../dialogs/EventPropertiesDialog.svelte      | 40 ++++++----------
 .../dialogs/PlotOptionsDialog.svelte          | 38 ++++-----------
 .../dialogs/ToolboxManagerDialog.svelte       | 39 +++++----------
 .../dialogs/shared/DialogShell.svelte         |  3 ++
 5 files changed, 57 insertions(+), 110 deletions(-)

diff --git a/src/lib/components/dialogs/BlockPropertiesDialog.svelte b/src/lib/components/dialogs/BlockPropertiesDialog.svelte
index 58234fce..1d4f43b2 100644
--- a/src/lib/components/dialogs/BlockPropertiesDialog.svelte
+++ b/src/lib/components/dialogs/BlockPropertiesDialog.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
 	import { onDestroy } from 'svelte';
-	import { fade, scale } from 'svelte/transition';
-	import { cubicOut } from 'svelte/easing';
 	import { graphStore } from '$lib/stores/graph';
 	import { historyStore } from '$lib/stores/history';
 	import { nodeDialogStore, closeNodeDialog } from '$lib/stores/nodeDialog';
@@ -15,6 +13,7 @@
 	import { paramInput } from '$lib/actions/paramInput';
 	import { loadCodeMirrorModules, createEditorExtensions, type CodeMirrorModules } from '$lib/utils/codemirror';
 	import ColorPicker from './shared/ColorPicker.svelte';
+	import DialogShell from './shared/DialogShell.svelte';
 	import DocumentationSection from './shared/DocumentationSection.svelte';
 	import Icon from '$lib/components/icons/Icon.svelte';
 	import { DEFAULT_NODE_COLOR } from '$lib/utils/colors';
@@ -231,27 +230,18 @@
 		return String(value);
 	}
 
-	// Handle backdrop click
-	function handleBackdropClick(event: MouseEvent) {
-		if (event.target === event.currentTarget) {
-			closeNodeDialog();
-		}
-	}
-
-	// Handle escape key
-	function handleKeydown(event: KeyboardEvent) {
-		if (event.key === 'Escape') {
-			closeNodeDialog();
-		}
-	}
 </script>
 
-<svelte:window onkeydown={handleKeydown} />
-
-{#if nodeId && node && typeDef}
-	<div class="dialog-backdrop" onclick={handleBackdropClick} transition:fade={{ duration: 150 }} role="presentation">
-		<div class="properties-dialog glass-panel" data-tour="dialog-properties" style="--node-color: {currentColor}" transition:scale={{ start: 0.95, duration: 150, easing: cubicOut }} role="dialog" tabindex="-1" aria-labelledby="dialog-title">
-			<div class="dialog-header">
+<DialogShell
+	open={!!(nodeId && node && typeDef)}
+	onClose={closeNodeDialog}
+	ariaLabelledby="dialog-title"
+	dataTour="dialog-properties"
+	dialogClass="properties-dialog glass-panel"
+	dialogStyle="--node-color: {currentColor};"
+>
+	{#if nodeId && node && typeDef}
+		<div class="dialog-header">
 				{#if showCode}
 					<span id="dialog-title">Python Code</span>
 				{:else}
@@ -400,14 +390,13 @@
 				{/if}
 			</div>
 
-			{#if !showCode}
-				<div class="dialog-footer">
-					<span class="hint">R rotate · X flip horizontal · Y flip vertical</span>
-				</div>
-			{/if}
-		</div>
-	</div>
-{/if}
+		{#if !showCode}
+			<div class="dialog-footer">
+				<span class="hint">R rotate · X flip horizontal · Y flip vertical</span>
+			</div>
+		{/if}
+	{/if}
+</DialogShell>
 
 <style>
 	/* Uses global .properties-dialog styles from app.css */
diff --git a/src/lib/components/dialogs/EventPropertiesDialog.svelte b/src/lib/components/dialogs/EventPropertiesDialog.svelte
index 8d064b41..a07afc65 100644
--- a/src/lib/components/dialogs/EventPropertiesDialog.svelte
+++ b/src/lib/components/dialogs/EventPropertiesDialog.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
 	import { onDestroy } from 'svelte';
-	import { fade, scale } from 'svelte/transition';
-	import { cubicOut } from 'svelte/easing';
 	import { get } from 'svelte/store';
 	import { eventStore } from '$lib/stores/events';
 	import { historyStore } from '$lib/stores/history';
@@ -15,6 +13,7 @@
 	import { tooltip } from '$lib/components/Tooltip.svelte';
 	import { paramInput } from '$lib/actions/paramInput';
 	import ColorPicker from './shared/ColorPicker.svelte';
+	import DialogShell from './shared/DialogShell.svelte';
 	import DocumentationSection from './shared/DocumentationSection.svelte';
 	import CodePreviewDialog from './CodePreviewDialog.svelte';
 	import Icon from '$lib/components/icons/Icon.svelte';
@@ -118,27 +117,17 @@
 		return String(value);
 	}
 
-	// Handle backdrop click
-	function handleBackdropClick(e: MouseEvent) {
-		if (e.target === e.currentTarget) {
-			closeEventDialog();
-		}
-	}
-
-	// Handle escape key
-	function handleKeydown(e: KeyboardEvent) {
-		if (e.key === 'Escape') {
-			closeEventDialog();
-		}
-	}
 </script>
 
-<svelte:window onkeydown={handleKeydown} />
-
-{#if eventId && event && typeDef}
-	<div class="dialog-backdrop" onclick={handleBackdropClick} transition:fade={{ duration: 150 }} role="presentation">
-		<div class="properties-dialog glass-panel" style="--node-color: {currentColor}" transition:scale={{ start: 0.95, duration: 150, easing: cubicOut }} role="dialog" tabindex="-1" aria-labelledby="dialog-title">
-			<div class="dialog-header">
+<DialogShell
+	open={!!(eventId && event && typeDef)}
+	onClose={closeEventDialog}
+	ariaLabelledby="dialog-title"
+	dialogClass="properties-dialog glass-panel"
+	dialogStyle="--node-color: {currentColor};"
+>
+	{#if eventId && event && typeDef}
+		<div class="dialog-header">
 				<div class="node-info">
 					<input
 						id="dialog-title"
@@ -222,12 +211,11 @@
 				<DocumentationSection docstringHtml={typeDef.docstringHtml} />
 			</div>
 
-			<div class="dialog-footer">
-				<span class="hint">Events trigger actions during simulation</span>
-			</div>
+		<div class="dialog-footer">
+			<span class="hint">Events trigger actions during simulation</span>
 		</div>
-	</div>
-{/if}
+	{/if}
+</DialogShell>
 
 <CodePreviewDialog
 	open={showCodePreview}
diff --git a/src/lib/components/dialogs/PlotOptionsDialog.svelte b/src/lib/components/dialogs/PlotOptionsDialog.svelte
index 0e5067f3..f8ff6ccb 100644
--- a/src/lib/components/dialogs/PlotOptionsDialog.svelte
+++ b/src/lib/components/dialogs/PlotOptionsDialog.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
 	import { onDestroy } from 'svelte';
-	import { fade, scale } from 'svelte/transition';
-	import { cubicOut } from 'svelte/easing';
 	import Icon from '$lib/components/icons/Icon.svelte';
+	import DialogShell from './shared/DialogShell.svelte';
 	import {
 		plotSettingsStore,
 		createTraceId,
@@ -42,12 +41,6 @@
 		unsubscribe();
 	});
 
-	function handleKeydown(event: KeyboardEvent) {
-		if (event.key === 'Escape') {
-			onClose();
-		}
-	}
-
 	// Get trace settings reactively from local state
 	function getTraceSettings(traceId: string) {
 		return settings.traces[traceId] ?? { ...DEFAULT_TRACE_SETTINGS };
@@ -127,22 +120,13 @@
 	}
 </script>
 
-<svelte:window onkeydown={handleKeydown} />
-
-{#if open}
-	<!-- svelte-ignore a11y_no_static_element_interactions, a11y_click_events_have_key_events -->
-	<div class="dialog-backdrop" transition:fade={{ duration: 150 }} onclick={onClose} role="presentation">
-		<!-- svelte-ignore a11y_no_static_element_interactions, a11y_click_events_have_key_events -->
-		<div
-			class="dialog glass-panel"
-			transition:scale={{ start: 0.95, duration: 150, easing: cubicOut }}
-			onclick={(e) => e.stopPropagation()}
-			role="dialog"
-			tabindex="-1"
-			aria-modal="true"
-			aria-labelledby="plot-options-title"
-		>
-			<div class="dialog-header">
+<DialogShell
+	{open}
+	{onClose}
+	ariaLabelledby="plot-options-title"
+	dialogClass="dialog glass-panel plot-options-dialog"
+>
+		<div class="dialog-header">
 				<span id="plot-options-title">Plot Options</span>
 				<button class="icon-btn ghost" onclick={onClose} aria-label="Close">
 					<Icon name="x" size={16} />
@@ -283,13 +267,11 @@
 						</div>
 					{/each}
 				{/if}
-			</div>
 		</div>
-	</div>
-{/if}
+</DialogShell>
 
 <style>
-	.dialog {
+	:global(.plot-options-dialog) {
 		width: 480px;
 		max-width: 90vw;
 		max-height: 80vh;
diff --git a/src/lib/components/dialogs/ToolboxManagerDialog.svelte b/src/lib/components/dialogs/ToolboxManagerDialog.svelte
index f3a66368..898ca599 100644
--- a/src/lib/components/dialogs/ToolboxManagerDialog.svelte
+++ b/src/lib/components/dialogs/ToolboxManagerDialog.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
 	import { onDestroy } from 'svelte';
-	import { fade, scale } from 'svelte/transition';
-	import { cubicOut } from 'svelte/easing';
 	import Icon from '$lib/components/icons/Icon.svelte';
 	import { tooltip } from '$lib/components/Tooltip.svelte';
+	import DialogShell from './shared/DialogShell.svelte';
 	import {
 		TOOLBOX_CATALOG,
 		performInstall,
@@ -340,28 +339,16 @@
 	const allBlocksOn = $derived(blockSelections.length > 0 && blockSelections.every((s) => s.enabled));
 	const someBlocksOn = $derived(blockSelections.some((s) => s.enabled));
 
-	function handleBackdrop(e: MouseEvent) {
-		if (e.target === e.currentTarget) onClose();
-	}
-	function handleKeydown(e: KeyboardEvent) {
-		if (!open) return;
-		if (e.key === 'Escape') onClose();
-	}
 </script>
 
-<svelte:window onkeydown={handleKeydown} />
-
-{#if open}
-	<div class="dialog-backdrop" transition:fade={{ duration: 150 }} onclick={handleBackdrop} role="presentation">
-		<div
-			class="dialog glass-panel manager-modal"
-			data-tour="dialog-toolbox-manager"
-			transition:scale={{ start: 0.95, duration: 150, easing: cubicOut }}
-			role="dialog"
-			aria-modal="true"
-			aria-labelledby="manager-title"
-		>
-			<div class="dialog-header">
+<DialogShell
+	{open}
+	{onClose}
+	ariaLabelledby="manager-title"
+	dataTour="dialog-toolbox-manager"
+	dialogClass="dialog glass-panel manager-modal"
+>
+		<div class="dialog-header">
 				<span id="manager-title">
 					{#if step === 'manager'}Toolbox manager{:else}Add toolbox{/if}
 				</span>
@@ -684,16 +671,14 @@
 						{/each}
 					</div>
 				</div>
-			{/if}
-		</div>
-	</div>
-{/if}
+		{/if}
+</DialogShell>
 
 <style>
 	/* Uses global .dialog-backdrop, .dialog-header, .glass-panel, .icon-btn,
 	   .ghost button, default button, input/select/textarea from app.css */
 
-	.manager-modal {
+	:global(.manager-modal) {
 		width: 90%;
 		max-width: 560px;
 		max-height: 80vh;
diff --git a/src/lib/components/dialogs/shared/DialogShell.svelte b/src/lib/components/dialogs/shared/DialogShell.svelte
index b6d8fab7..c92fb22b 100644
--- a/src/lib/components/dialogs/shared/DialogShell.svelte
+++ b/src/lib/components/dialogs/shared/DialogShell.svelte
@@ -25,6 +25,7 @@
 		dialogScaleDuration?: number;
 		backdropClass?: string;
 		dialogClass?: string;
+		dialogStyle?: string;
 		children: Snippet;
 	}
 
@@ -40,6 +41,7 @@
 		dialogScaleDuration = 150,
 		backdropClass = 'dialog-backdrop',
 		dialogClass = 'dialog glass-panel',
+		dialogStyle,
 		children
 	}: Props = $props();
 
@@ -66,6 +68,7 @@
 	>
 		<div
 			class={dialogClass}
+			style={dialogStyle}
 			data-tour={dataTour}
 			transition:scale={{ start: 0.95, duration: dialogScaleDuration, easing: cubicOut }}
 			{role}

From bfd1e7fc06a238f433ac6283e7db832729174094 Mon Sep 17 00:00:00 2001
From: Milan Rother <milan.rother@gmx.de>
Date: Sat, 9 May 2026 09:52:33 +0200
Subject: [PATCH 12/16] refactor: extract AbstractBackend base class for state
 and callback plumbing

---
 src/lib/pyodide/backend/abstract.ts        | 85 ++++++++++++++++++++++
 src/lib/pyodide/backend/flask/backend.ts   | 51 +------------
 src/lib/pyodide/backend/pyodide/backend.ts | 50 +------------
 3 files changed, 92 insertions(+), 94 deletions(-)
 create mode 100644 src/lib/pyodide/backend/abstract.ts

diff --git a/src/lib/pyodide/backend/abstract.ts b/src/lib/pyodide/backend/abstract.ts
new file mode 100644
index 00000000..9eb6ab3c
--- /dev/null
+++ b/src/lib/pyodide/backend/abstract.ts
@@ -0,0 +1,85 @@
+/**
+ * Abstract base for Backend implementations.
+ *
+ * Hosts state-store delegation, output-callback plumbing, and id generation
+ * that is identical across the Pyodide and Flask backends. Concrete backends
+ * still own init/terminate/exec/streaming, since those are transport-specific.
+ */
+
+import type { Backend, BackendState } from './types';
+import { backendState } from './state';
+
+export abstract class AbstractBackend implements Backend {
+	protected messageId = 0;
+	protected stdoutCallback: ((value: string) => void) | null = null;
+	protected stderrCallback: ((value: string) => void) | null = null;
+
+	// -------------------------------------------------------------------------
+	// Lifecycle (abstract — concrete backends implement)
+	// -------------------------------------------------------------------------
+	abstract init(): Promise<void>;
+	abstract terminate(): void;
+
+	// -------------------------------------------------------------------------
+	// State (delegates to shared backendState store)
+	// -------------------------------------------------------------------------
+
+	getState(): BackendState {
+		return backendState.get();
+	}
+
+	subscribe(callback: (state: BackendState) => void): () => void {
+		return backendState.subscribe(callback);
+	}
+
+	isReady(): boolean {
+		return this.getState().initialized;
+	}
+
+	isLoading(): boolean {
+		return this.getState().loading;
+	}
+
+	getError(): string | null {
+		return this.getState().error;
+	}
+
+	// -------------------------------------------------------------------------
+	// Execution (abstract)
+	// -------------------------------------------------------------------------
+	abstract exec(code: string, timeout?: number): Promise<void>;
+	abstract evaluate<T = unknown>(expr: string, timeout?: number): Promise<T>;
+
+	// -------------------------------------------------------------------------
+	// Streaming (abstract)
+	// -------------------------------------------------------------------------
+	abstract startStreaming<T>(
+		expr: string,
+		onData: (data: T) => void,
+		onDone: () => void,
+		onError: (error: Error) => void
+	): void;
+	abstract stopStreaming(): void;
+	abstract isStreaming(): boolean;
+	abstract execDuringStreaming(code: string): void;
+
+	// -------------------------------------------------------------------------
+	// Output callbacks
+	// -------------------------------------------------------------------------
+
+	onStdout(callback: (value: string) => void): void {
+		this.stdoutCallback = callback;
+	}
+
+	onStderr(callback: (value: string) => void): void {
+		this.stderrCallback = callback;
+	}
+
+	// -------------------------------------------------------------------------
+	// Helpers
+	// -------------------------------------------------------------------------
+
+	protected generateId(): string {
+		return `repl_${++this.messageId}`;
+	}
+}
diff --git a/src/lib/pyodide/backend/flask/backend.ts b/src/lib/pyodide/backend/flask/backend.ts
index cdb19ca6..384fe2ab 100644
--- a/src/lib/pyodide/backend/flask/backend.ts
+++ b/src/lib/pyodide/backend/flask/backend.ts
@@ -7,7 +7,8 @@
  * - streaming uses start + poll (like postMessage with stream-data/stream-done)
  */
 
-import type { Backend, BackendState } from '../types';
+import type { BackendState } from '../types';
+import { AbstractBackend } from '../abstract';
 import { backendState } from '../state';
 import { TIMEOUTS } from '$lib/constants/python';
 import { STATUS_MESSAGES } from '$lib/constants/messages';
@@ -21,10 +22,9 @@ const STREAM_POLL_INTERVAL = 5;
 /** BroadcastChannel name for cross-tab session coordination */
 const SESSION_CHANNEL = 'flask-session';
 
-export class FlaskBackend implements Backend {
+export class FlaskBackend extends AbstractBackend {
 	private host: string;
 	private sessionId: string;
-	private messageId = 0;
 	private _isStreaming = false;
 	private streamPollTimer: ReturnType<typeof setTimeout> | null = null;
 	private serverInitPromise: Promise<void> | null = null;
@@ -37,11 +37,8 @@ export class FlaskBackend implements Backend {
 		onError: ((error: Error) => void) | null;
 	} = { onData: null, onDone: null, onError: null };
 
-	// Output callbacks
-	private stdoutCallback: ((value: string) => void) | null = null;
-	private stderrCallback: ((value: string) => void) | null = null;
-
 	constructor(host: string) {
+		super();
 		this.host = host.replace(/\/$/, '');
 		const stored = typeof localStorage !== 'undefined' ? localStorage.getItem('flask-session-id') : null;
 		if (stored) {
@@ -126,30 +123,6 @@ export class FlaskBackend implements Backend {
 		backendState.reset();
 	}
 
-	// -------------------------------------------------------------------------
-	// State
-	// -------------------------------------------------------------------------
-
-	getState(): BackendState {
-		return backendState.get();
-	}
-
-	subscribe(callback: (state: BackendState) => void): () => void {
-		return backendState.subscribe(callback);
-	}
-
-	isReady(): boolean {
-		return this.getState().initialized;
-	}
-
-	isLoading(): boolean {
-		return this.getState().loading;
-	}
-
-	getError(): string | null {
-		return this.getState().error;
-	}
-
 	// -------------------------------------------------------------------------
 	// Lazy server init
 	// -------------------------------------------------------------------------
@@ -317,26 +290,10 @@ export class FlaskBackend implements Backend {
 		}).catch(() => {});
 	}
 
-	// -------------------------------------------------------------------------
-	// Output Callbacks
-	// -------------------------------------------------------------------------
-
-	onStdout(callback: (value: string) => void): void {
-		this.stdoutCallback = callback;
-	}
-
-	onStderr(callback: (value: string) => void): void {
-		this.stderrCallback = callback;
-	}
-
 	// -------------------------------------------------------------------------
 	// Private Methods
 	// -------------------------------------------------------------------------
 
-	private generateId(): string {
-		return `repl_${++this.messageId}`;
-	}
-
 	/**
 	 * POST /api/init with packages and forward worker messages to callbacks.
 	 * Shared by init() (first load with progress UI) and ensureServerInit() (lazy re-init).
diff --git a/src/lib/pyodide/backend/pyodide/backend.ts b/src/lib/pyodide/backend/pyodide/backend.ts
index 93d4d1b0..51462fdd 100644
--- a/src/lib/pyodide/backend/pyodide/backend.ts
+++ b/src/lib/pyodide/backend/pyodide/backend.ts
@@ -4,7 +4,8 @@
  */
 
 import { get } from 'svelte/store';
-import type { Backend, BackendState, REPLRequest, REPLResponse, REPLErrorResponse } from '../types';
+import type { BackendState, REPLRequest, REPLResponse, REPLErrorResponse } from '../types';
+import { AbstractBackend } from '../abstract';
 import { backendState } from '../state';
 import { TIMEOUTS } from '$lib/constants/python';
 import { PROGRESS_MESSAGES, STATUS_MESSAGES } from '$lib/constants/messages';
@@ -28,9 +29,8 @@ interface StreamState {
  * Runs Python code via Pyodide in a Web Worker.
  * Supports streaming with code injection between generator steps.
  */
-export class PyodideBackend implements Backend {
+export class PyodideBackend extends AbstractBackend {
 	private worker: Worker | null = null;
-	private messageId = 0;
 	private pendingRequests = new Map<string, PendingRequest>();
 	private isInitializing = false;
 
@@ -41,10 +41,6 @@ export class PyodideBackend implements Backend {
 		onError: null
 	};
 
-	// Output callbacks
-	private stdoutCallback: ((value: string) => void) | null = null;
-	private stderrCallback: ((value: string) => void) | null = null;
-
 	// -------------------------------------------------------------------------
 	// Lifecycle
 	// -------------------------------------------------------------------------
@@ -145,30 +141,6 @@ export class PyodideBackend implements Backend {
 		backendState.reset();
 	}
 
-	// -------------------------------------------------------------------------
-	// State
-	// -------------------------------------------------------------------------
-
-	getState(): BackendState {
-		return backendState.get();
-	}
-
-	subscribe(callback: (state: BackendState) => void): () => void {
-		return backendState.subscribe(callback);
-	}
-
-	isReady(): boolean {
-		return this.getState().initialized;
-	}
-
-	isLoading(): boolean {
-		return this.getState().loading;
-	}
-
-	getError(): string | null {
-		return this.getState().error;
-	}
-
 	// -------------------------------------------------------------------------
 	// Execution
 	// -------------------------------------------------------------------------
@@ -296,26 +268,10 @@ export class PyodideBackend implements Backend {
 		this.sendRequest({ type: 'stream-exec', code });
 	}
 
-	// -------------------------------------------------------------------------
-	// Output Callbacks
-	// -------------------------------------------------------------------------
-
-	onStdout(callback: (value: string) => void): void {
-		this.stdoutCallback = callback;
-	}
-
-	onStderr(callback: (value: string) => void): void {
-		this.stderrCallback = callback;
-	}
-
 	// -------------------------------------------------------------------------
 	// Private Methods
 	// -------------------------------------------------------------------------
 
-	private generateId(): string {
-		return `repl_${++this.messageId}`;
-	}
-
 	private sendRequest(request: REPLRequest): void {
 		if (!this.worker) {
 			throw new Error('Worker not initialized');

From 41e9dc2728c6a5ee4e6daae3aeaf96751252bfa2 Mon Sep 17 00:00:00 2001
From: Milan Rother <milan.rother@gmx.de>
Date: Sat, 9 May 2026 09:52:49 +0200
Subject: [PATCH 13/16] perf: lazy-load and async-decode WelcomeModal example
 screenshots

---
 src/lib/components/WelcomeModal.svelte | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/lib/components/WelcomeModal.svelte b/src/lib/components/WelcomeModal.svelte
index 2b625ae4..d9055890 100644
--- a/src/lib/components/WelcomeModal.svelte
+++ b/src/lib/components/WelcomeModal.svelte
@@ -179,6 +179,8 @@
 							<img
 								src="{base}/examples/screenshots/{example.basename}-{isDark ? 'dark' : 'light'}.png"
 								alt="{example.name} preview"
+								loading="lazy"
+								decoding="async"
 								onerror={(e) => { (e.currentTarget as HTMLImageElement).style.display = 'none'; }}
 							/>
 						</div>

From 6241544cdac8b6bd169e66278271ec8ac70903ae Mon Sep 17 00:00:00 2001
From: Milan Rother <milan.rother@gmx.de>
Date: Sat, 9 May 2026 09:53:09 +0200
Subject: [PATCH 14/16] perf: cap inlineMath render cache at 500 entries with
 LRU eviction

---
 src/lib/utils/inlineMathRenderer.ts | 33 ++++++++++++++++++++++++-----
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/lib/utils/inlineMathRenderer.ts b/src/lib/utils/inlineMathRenderer.ts
index c1a0fb13..a2b03e02 100644
--- a/src/lib/utils/inlineMathRenderer.ts
+++ b/src/lib/utils/inlineMathRenderer.ts
@@ -13,9 +13,32 @@ export interface MathRenderResult {
 	hasMath: boolean;
 }
 
-/** Cached render results to avoid re-rendering unchanged content */
+/**
+ * Bounded LRU cache for rendered results. Map iteration is insertion-ordered,
+ * so we rotate hits to the back (most-recent) and evict the front (oldest)
+ * when the cap is exceeded.
+ */
+const RENDER_CACHE_MAX = 500;
 const renderCache = new Map<string, MathRenderResult>();
 
+function cacheGet(key: string): MathRenderResult | undefined {
+	const value = renderCache.get(key);
+	if (value !== undefined) {
+		renderCache.delete(key);
+		renderCache.set(key, value);
+	}
+	return value;
+}
+
+function cacheSet(key: string, value: MathRenderResult): void {
+	if (renderCache.has(key)) renderCache.delete(key);
+	renderCache.set(key, value);
+	if (renderCache.size > RENDER_CACHE_MAX) {
+		const oldest = renderCache.keys().next().value;
+		if (oldest !== undefined) renderCache.delete(oldest);
+	}
+}
+
 /**
  * Check if a string contains inline math delimiters
  */
@@ -36,13 +59,13 @@ export async function renderInlineMath(text: string): Promise<MathRenderResult>
 	}
 
 	// Check cache
-	const cached = renderCache.get(text);
+	const cached = cacheGet(text);
 	if (cached) return cached;
 
 	// Check if there's any math to render
 	if (!containsMath(text)) {
 		const result = { html: escapeHtml(text), hasMath: false };
-		renderCache.set(text, result);
+		cacheSet(text, result);
 		return result;
 	}
 
@@ -69,7 +92,7 @@ export async function renderInlineMath(text: string): Promise<MathRenderResult>
 	// Actually we need to be more careful - escape text first, then insert math
 
 	const result = { html, hasMath };
-	renderCache.set(text, result);
+	cacheSet(text, result);
 	return result;
 }
 
@@ -78,7 +101,7 @@ export async function renderInlineMath(text: string): Promise<MathRenderResult>
  * Returns null if not cached (caller should use async version)
  */
 export function renderInlineMathSync(text: string): MathRenderResult | null {
-	return renderCache.get(text) ?? null;
+	return cacheGet(text) ?? null;
 }
 
 /**

From 75d6c35a7f5671ecbb224b6fad91adafac85aa36 Mon Sep 17 00:00:00 2001
From: Milan Rother <milan.rother@gmx.de>
Date: Sat, 9 May 2026 09:55:02 +0200
Subject: [PATCH 15/16] refactor: consolidate routing/dimension magic constants
 into routing/constants and dimensions

---
 src/lib/components/FlowCanvas.svelte          |  9 ++++---
 .../components/edges/OrthogonalEdge.svelte    |  9 +++----
 src/lib/constants/dimensions.ts               |  7 +++++
 src/lib/routing/constants.ts                  | 22 ++++++++++++++++
 src/lib/routing/index.ts                      | 13 +++++++++-
 src/lib/stores/routing.ts                     | 26 ++++++++++++-------
 6 files changed, 67 insertions(+), 19 deletions(-)

diff --git a/src/lib/components/FlowCanvas.svelte b/src/lib/components/FlowCanvas.svelte
index d1d97db9..6ad76ddf 100644
--- a/src/lib/components/FlowCanvas.svelte
+++ b/src/lib/components/FlowCanvas.svelte
@@ -36,6 +36,7 @@
 		import { nodeRegistry } from '$lib/nodes';
 	import { NODE_TYPES } from '$lib/constants/nodeTypes';
 	import { GRID_SIZE, SNAP_GRID, BACKGROUND_GAP } from '$lib/constants/grid';
+	import { DEFAULT_NODE_WIDTH, DEFAULT_NODE_HEIGHT } from '$lib/constants/dimensions';
 	import { shallowEqualArray, shallowEqualRecord } from '$lib/utils/shallowEqual';
 	import type { NodeInstance, Connection, Annotation } from '$lib/nodes/types';
 	import type { EventInstance } from '$lib/events/types';
@@ -274,8 +275,8 @@
 		if (portIndex >= ports.length) return null;
 
 		const rotation = (nodeData.params?.['_rotation'] as number) || 0;
-		const width = node.measured?.width ?? node.width ?? 80;
-		const height = node.measured?.height ?? node.height ?? 40;
+		const width = node.measured?.width ?? node.width ?? DEFAULT_NODE_WIDTH;
+		const height = node.measured?.height ?? node.height ?? DEFAULT_NODE_HEIGHT;
 
 		// Calculate port offset from center based on rotation
 		const portCount = ports.length;
@@ -739,8 +740,8 @@
 				changedNodeIds.add(node.id);
 
 				// Incrementally update grid obstacle for this node
-				const width = node.measured?.width ?? node.width ?? 80;
-				const height = node.measured?.height ?? node.height ?? 40;
+				const width = node.measured?.width ?? node.width ?? DEFAULT_NODE_WIDTH;
+				const height = node.measured?.height ?? node.height ?? DEFAULT_NODE_HEIGHT;
 				routingStore.updateNodeBounds(node.id, {
 					x: snappedX - width / 2,
 					y: snappedY - height / 2,
diff --git a/src/lib/components/edges/OrthogonalEdge.svelte b/src/lib/components/edges/OrthogonalEdge.svelte
index 2aa7b70c..d3fb816c 100644
--- a/src/lib/components/edges/OrthogonalEdge.svelte
+++ b/src/lib/components/edges/OrthogonalEdge.svelte
@@ -24,7 +24,7 @@
 	import { routingStore, type PortInfo } from '$lib/stores/routing';
 	import { historyStore } from '$lib/stores/history';
 	import { screenToFlow } from '$lib/utils/viewUtils';
-	import { GRID_SIZE } from '$lib/routing/constants';
+	import { GRID_SIZE, EDGE_SOURCE_OFFSET, EDGE_TARGET_OFFSET, EDGE_CORNER_RADIUS } from '$lib/routing/constants';
 	import type { RouteResult, Direction } from '$lib/routing';
 	import type { Waypoint } from '$lib/types/nodes';
 
@@ -201,8 +201,8 @@
 	// Offset to start/end path at handle tips (not centers)
 	// Source: small inset from handle edge
 	// Target: larger offset to leave room for arrowhead
-	const sourceOffset = 0.5;
-	const targetOffset = 4.5;
+	const sourceOffset = EDGE_SOURCE_OFFSET;
+	const targetOffset = EDGE_TARGET_OFFSET;
 
 	// Adjusted source position based on handle direction
 	const adjustedSource = $derived(() => {
@@ -226,8 +226,7 @@
 		return { x, y };
 	});
 
-	// Corner radius for bends (0.5G = 5px)
-	const CORNER_RADIUS = 5;
+	const CORNER_RADIUS = EDGE_CORNER_RADIUS;
 
 	/**
 	 * Build SVG path with rounded corners using quadratic bezier curves
diff --git a/src/lib/constants/dimensions.ts b/src/lib/constants/dimensions.ts
index 6b811c80..e9cc39f5 100644
--- a/src/lib/constants/dimensions.ts
+++ b/src/lib/constants/dimensions.ts
@@ -19,6 +19,13 @@ export const NODE = {
 	borderWidth: 1
 } as const;
 
+/**
+ * Fallback node width/height used when xyflow has not yet measured a node.
+ * Re-exported so callers don't inline the magic numbers.
+ */
+export const DEFAULT_NODE_WIDTH = NODE.baseWidth;
+export const DEFAULT_NODE_HEIGHT = NODE.baseHeight;
+
 /** Handle (port connector) dimensions */
 export const HANDLE = {
 	/** Width of horizontal handles (rotation 0, 2): 1 grid unit */
diff --git a/src/lib/routing/constants.ts b/src/lib/routing/constants.ts
index 8dabdf4b..cf90adca 100644
--- a/src/lib/routing/constants.ts
+++ b/src/lib/routing/constants.ts
@@ -21,3 +21,25 @@ export const HANDLE_OFFSET = G.unit / 2;
 
 /** Arrow head length - stub should start within arrowhead (0.25 grid units = 2.5px) */
 export const ARROW_INSET = G.unit / 4;
+
+/** How many routes to recompute synchronously before yielding to the browser. */
+export const ASYNC_BATCH_SIZE = 8;
+
+/** Merge user waypoints closer than this many pixels. */
+export const WAYPOINT_MERGE_THRESHOLD = 15;
+
+/** Treat three waypoints as collinear if the middle one is within this many pixels of the line. */
+export const WAYPOINT_COLLINEAR_THRESHOLD = 5;
+
+/** Default routing-context padding around node bounds (in pixels). */
+export const ROUTING_CONTEXT_PADDING = 100;
+
+/**
+ * Sub-pixel offsets that pull the visible edge endpoint slightly out of the
+ * handle hitbox so the rounded corner geometry doesn't overlap the port.
+ */
+export const EDGE_SOURCE_OFFSET = 0.5;
+export const EDGE_TARGET_OFFSET = 4.5;
+
+/** Rounded-corner radius for orthogonal edges (in pixels). */
+export const EDGE_CORNER_RADIUS = 5;
diff --git a/src/lib/routing/index.ts b/src/lib/routing/index.ts
index 71f0b971..dab4047d 100644
--- a/src/lib/routing/index.ts
+++ b/src/lib/routing/index.ts
@@ -9,7 +9,18 @@ export { calculateRoute, calculateRouteWithWaypoints, calculateSimpleRoute, getP
 export { SparseGrid } from './gridBuilder';
 
 // Constants used by FlowCanvas
-export { ROUTING_MARGIN, HANDLE_OFFSET, ARROW_INSET } from './constants';
+export {
+	ROUTING_MARGIN,
+	HANDLE_OFFSET,
+	ARROW_INSET,
+	ASYNC_BATCH_SIZE,
+	WAYPOINT_MERGE_THRESHOLD,
+	WAYPOINT_COLLINEAR_THRESHOLD,
+	ROUTING_CONTEXT_PADDING,
+	EDGE_SOURCE_OFFSET,
+	EDGE_TARGET_OFFSET,
+	EDGE_CORNER_RADIUS
+} from './constants';
 
 // Types
 export type { Bounds, RoutingContext, RouteResult, Direction, PortStub } from './types';
diff --git a/src/lib/stores/routing.ts b/src/lib/stores/routing.ts
index 7e732b1a..af51a3c0 100644
--- a/src/lib/stores/routing.ts
+++ b/src/lib/stores/routing.ts
@@ -6,7 +6,18 @@ import { writable, derived, get } from 'svelte/store';
 import type { Position } from '$lib/types/common';
 import type { Connection, Waypoint } from '$lib/types/nodes';
 import type { RoutingContext, RouteResult, Bounds, Direction, PortStub } from '$lib/routing';
-import { calculateRoute, calculateRouteWithWaypoints, calculateSimpleRoute, getPathCells, ROUTING_MARGIN } from '$lib/routing';
+import {
+	calculateRoute,
+	calculateRouteWithWaypoints,
+	calculateSimpleRoute,
+	getPathCells,
+	ROUTING_MARGIN,
+	ASYNC_BATCH_SIZE,
+	WAYPOINT_MERGE_THRESHOLD,
+	WAYPOINT_COLLINEAR_THRESHOLD,
+	ROUTING_CONTEXT_PADDING
+} from '$lib/routing';
+import { DEFAULT_NODE_WIDTH, DEFAULT_NODE_HEIGHT } from '$lib/constants/dimensions';
 import { SparseGrid } from '$lib/routing/gridBuilder';
 import { generateId } from '$lib/stores/utils';
 import { graphStore } from '$lib/stores/graph';
@@ -53,9 +64,6 @@ function hashRouteInputs(
 	return `${sourcePos.x},${sourcePos.y}|${targetPos.x},${targetPos.y}|${sourceDir}|${targetDir}|${wpHash}`;
 }
 
-/** Number of routes to calculate per async batch before yielding to browser */
-const ASYNC_BATCH_SIZE = 8;
-
 interface RoutingState {
 	/** Cached routes by connection ID */
 	routes: Map<string, RouteResult>;
@@ -734,8 +742,8 @@ export const routingStore = {
 		const sourcePos = sourceInfo?.position || null;
 		const targetPos = targetInfo?.position || null;
 
-		const MERGE_THRESHOLD = 15; // Pixels - merge waypoints closer than this
-		const COLLINEAR_THRESHOLD = 5; // Pixels - consider collinear if deviation less than this
+		const MERGE_THRESHOLD = WAYPOINT_MERGE_THRESHOLD;
+		const COLLINEAR_THRESHOLD = WAYPOINT_COLLINEAR_THRESHOLD;
 
 		// Helper to check if point is collinear with prev and next
 		const isCollinear = (prev: Position, curr: Position, next: Position): boolean => {
@@ -856,7 +864,7 @@ export const routingStore = {
  */
 export function buildRoutingContext(
 	nodes: Array<{ id: string; position: Position; width?: number; height?: number; measured?: { width?: number; height?: number } }>,
-	padding = 100
+	padding = ROUTING_CONTEXT_PADDING
 ): { nodeBounds: Map<string, Bounds>; canvasBounds: Bounds } {
 	const nodeBounds = new Map<string, Bounds>();
 
@@ -866,8 +874,8 @@ export function buildRoutingContext(
 	let maxY = -Infinity;
 
 	for (const node of nodes) {
-		const width = node.measured?.width ?? node.width ?? 80;
-		const height = node.measured?.height ?? node.height ?? 40;
+		const width = node.measured?.width ?? node.width ?? DEFAULT_NODE_WIDTH;
+		const height = node.measured?.height ?? node.height ?? DEFAULT_NODE_HEIGHT;
 
 		// Node position is center (nodeOrigin = [0.5, 0.5])
 		const left = node.position.x - width / 2;

From f43302c5efcd3bd356677487c1ff27cbbd1d1897 Mon Sep 17 00:00:00 2001
From: Milan Rother <milan.rother@gmx.de>
Date: Sat, 9 May 2026 09:56:39 +0200
Subject: [PATCH 16/16] refactor: extract applyWaypointUpdate helper to
 deduplicate routing waypoint methods

---
 src/lib/stores/routing.ts | 203 ++++++++++++--------------------------
 1 file changed, 62 insertions(+), 141 deletions(-)

diff --git a/src/lib/stores/routing.ts b/src/lib/stores/routing.ts
index af51a3c0..93a67820 100644
--- a/src/lib/stores/routing.ts
+++ b/src/lib/stores/routing.ts
@@ -85,6 +85,54 @@ const state = writable<RoutingState>({
 /** Generation counter — incremented on each recalculateAllRoutes call to cancel stale async work */
 let routingGeneration = 0;
 
+function findConnection(connectionId: string): Connection | undefined {
+	return get(graphStore.connections).find((c) => c.id === connectionId);
+}
+
+/**
+ * Persist new waypoints for a connection, then either recompute the route
+ * synchronously (when port positions are available) or invalidate the cached
+ * route so a fresh calculation runs on the next read.
+ *
+ * Shared by addUserWaypoint, addUserWaypointAtIndex, removeUserWaypoint, and
+ * moveWaypoint — they all do the same thing after they've decided what the
+ * new waypoint list should look like.
+ */
+function applyWaypointUpdate(
+	connection: Connection,
+	updatedWaypoints: Waypoint[],
+	getPortInfo: ((nodeId: string, portIndex: number, isOutput: boolean) => PortInfo | null) | undefined
+): void {
+	graphStore.updateConnectionWaypoints(connection.id, updatedWaypoints);
+
+	if (getPortInfo) {
+		const $state = get(state);
+		const sourceInfo = getPortInfo(connection.sourceNodeId, connection.sourcePortIndex, true);
+		const targetInfo = getPortInfo(connection.targetNodeId, connection.targetPortIndex, false);
+
+		if (sourceInfo && targetInfo) {
+			const userWaypoints = getUserWaypoints(updatedWaypoints);
+			const result = computeRoute(
+				sourceInfo.position,
+				targetInfo.position,
+				sourceInfo.direction,
+				targetInfo.direction,
+				$state.grid,
+				userWaypoints
+			);
+
+			state.update((s) => {
+				const routes = new Map(s.routes);
+				routes.set(connection.id, result);
+				return { ...s, routes };
+			});
+			return;
+		}
+	}
+
+	routingStore.invalidateRoute(connection.id);
+}
+
 /**
  * Routing store - manages route calculations and caching
  */
@@ -501,50 +549,17 @@ export const routingStore = {
 	): string | null {
 		let waypointId: string | null = null;
 		historyStore.mutate(() => {
-			const connections = get(graphStore.connections);
-			const connection = connections.find((c) => c.id === connectionId);
+			const connection = findConnection(connectionId);
 			if (!connection) return;
 
 			waypointId = generateId();
-			const newWaypoint: Waypoint = {
-				id: waypointId,
-				position,
-				isUserWaypoint: true
-			};
+			const newWaypoint: Waypoint = { id: waypointId, position, isUserWaypoint: true };
 
-			// Get existing user waypoints (filter out auto waypoints)
+			// Drop auto waypoints — they'll be regenerated from the new user-waypoint set.
 			const existingUserWaypoints = getUserWaypoints(connection.waypoints);
 			const updatedWaypoints = [...existingUserWaypoints, newWaypoint];
 
-			graphStore.updateConnectionWaypoints(connectionId, updatedWaypoints);
-
-			// Immediately recalculate route if we have port info (prevents full recalc)
-			if (getPortInfo) {
-				const $state = get(state);
-				const sourceInfo = getPortInfo(connection.sourceNodeId, connection.sourcePortIndex, true);
-				const targetInfo = getPortInfo(connection.targetNodeId, connection.targetPortIndex, false);
-
-				if (sourceInfo && targetInfo) {
-					const result = computeRoute(
-						sourceInfo.position,
-						targetInfo.position,
-						sourceInfo.direction,
-						targetInfo.direction,
-						$state.grid,
-						updatedWaypoints
-					);
-
-					state.update((s) => {
-						const routes = new Map(s.routes);
-						routes.set(connectionId, result);
-						return { ...s, routes };
-					});
-					return;
-				}
-			}
-
-			// Fallback: just invalidate
-			routingStore.invalidateRoute(connectionId);
+			applyWaypointUpdate(connection, updatedWaypoints, getPortInfo);
 		});
 		return waypointId;
 	},
@@ -562,56 +577,20 @@ export const routingStore = {
 	): string | null {
 		let waypointId: string | null = null;
 		historyStore.mutate(() => {
-			const connections = get(graphStore.connections);
-			const connection = connections.find((c) => c.id === connectionId);
+			const connection = findConnection(connectionId);
 			if (!connection) return;
 
 			waypointId = generateId();
-			const newWaypoint: Waypoint = {
-				id: waypointId,
-				position,
-				isUserWaypoint: true
-			};
+			const newWaypoint: Waypoint = { id: waypointId, position, isUserWaypoint: true };
 
-			// Get existing user waypoints
 			const existingUserWaypoints = getUserWaypoints(connection.waypoints);
-
-			// Insert at the specified index
 			const updatedWaypoints = [
 				...existingUserWaypoints.slice(0, insertIndex),
 				newWaypoint,
 				...existingUserWaypoints.slice(insertIndex)
 			];
 
-			graphStore.updateConnectionWaypoints(connectionId, updatedWaypoints);
-
-			// Immediately recalculate route if we have port info (prevents full recalc)
-			if (getPortInfo) {
-				const $state = get(state);
-				const sourceInfo = getPortInfo(connection.sourceNodeId, connection.sourcePortIndex, true);
-				const targetInfo = getPortInfo(connection.targetNodeId, connection.targetPortIndex, false);
-
-				if (sourceInfo && targetInfo) {
-					const result = computeRoute(
-						sourceInfo.position,
-						targetInfo.position,
-						sourceInfo.direction,
-						targetInfo.direction,
-						$state.grid,
-						updatedWaypoints
-					);
-
-					state.update((s) => {
-						const routes = new Map(s.routes);
-						routes.set(connectionId, result);
-						return { ...s, routes };
-					});
-					return;
-				}
-			}
-
-			// Fallback: just invalidate
-			routingStore.invalidateRoute(connectionId);
+			applyWaypointUpdate(connection, updatedWaypoints, getPortInfo);
 		});
 		return waypointId;
 	},
@@ -626,49 +605,21 @@ export const routingStore = {
 		getPortInfo?: (nodeId: string, portIndex: number, isOutput: boolean) => PortInfo | null
 	): void {
 		historyStore.mutate(() => {
-			const connections = get(graphStore.connections);
-			const connection = connections.find((c) => c.id === connectionId);
+			const connection = findConnection(connectionId);
 			if (!connection?.waypoints) return;
 
 			const updatedWaypoints = connection.waypoints.filter(
 				(w) => w.id !== waypointId || !w.isUserWaypoint
 			);
 
-			graphStore.updateConnectionWaypoints(connectionId, updatedWaypoints);
-
-			// Immediately recalculate route if we have port info (prevents flicker)
-			if (getPortInfo) {
-				const $state = get(state);
-				const sourceInfo = getPortInfo(connection.sourceNodeId, connection.sourcePortIndex, true);
-				const targetInfo = getPortInfo(connection.targetNodeId, connection.targetPortIndex, false);
-
-				if (sourceInfo && targetInfo) {
-					const userWaypoints = getUserWaypoints(updatedWaypoints);
-					const result = computeRoute(
-						sourceInfo.position,
-						targetInfo.position,
-						sourceInfo.direction,
-						targetInfo.direction,
-						$state.grid,
-						userWaypoints
-					);
-
-					state.update((s) => {
-						const routes = new Map(s.routes);
-						routes.set(connectionId, result);
-						return { ...s, routes };
-					});
-					return;
-				}
-			}
-
-			// Fallback: just invalidate
-			routingStore.invalidateRoute(connectionId);
+			applyWaypointUpdate(connection, updatedWaypoints, getPortInfo);
 		});
 	},
 
 	/**
-	 * Move a waypoint to a new position and recalculate route
+	 * Move a waypoint to a new position and recalculate route.
+	 * Not wrapped in historyStore.mutate — the caller owns the drag transaction
+	 * so a single drag becomes one undo entry rather than one per move event.
 	 * @param getPortInfo - Optional callback to get port info for route recalculation
 	 */
 	moveWaypoint(
@@ -677,44 +628,14 @@ export const routingStore = {
 		newPosition: Position,
 		getPortInfo?: (nodeId: string, portIndex: number, isOutput: boolean) => PortInfo | null
 	): void {
-		const connections = get(graphStore.connections);
-		const connection = connections.find((c) => c.id === connectionId);
+		const connection = findConnection(connectionId);
 		if (!connection?.waypoints) return;
 
 		const updatedWaypoints = connection.waypoints.map((w) =>
 			w.id === waypointId ? { ...w, position: newPosition } : w
 		);
 
-		graphStore.updateConnectionWaypoints(connectionId, updatedWaypoints);
-
-		// If getPortInfo is provided, recalculate route immediately
-		if (getPortInfo) {
-			const $state = get(state);
-			const sourceInfo = getPortInfo(connection.sourceNodeId, connection.sourcePortIndex, true);
-			const targetInfo = getPortInfo(connection.targetNodeId, connection.targetPortIndex, false);
-
-			if (sourceInfo && targetInfo) {
-				const userWaypoints = getUserWaypoints(updatedWaypoints);
-				const result = computeRoute(
-					sourceInfo.position,
-					targetInfo.position,
-					sourceInfo.direction,
-					targetInfo.direction,
-					$state.grid,
-					userWaypoints
-				);
-
-				state.update((s) => {
-					const routes = new Map(s.routes);
-					routes.set(connectionId, result);
-					return { ...s, routes };
-				});
-				return;
-			}
-		}
-
-		// Fallback: just invalidate
-		routingStore.invalidateRoute(connectionId);
+		applyWaypointUpdate(connection, updatedWaypoints, getPortInfo);
 	},
 
 	/**