EXPLORATION 05 / 06
Edit without losing the thread

What this showsTry graph edits in a local working copy. Connections are checked before they land, and every add, delete, reset, or accepted connection can be undone and redone.
inputStart here
transformFirst step
transformSecond step
sinkFinish here
noteMake a move
Select, connect, delete, undo. This is a safe place to try.
Svelte Flow
Activity
Select a node or drag from a handle to try a guarded connection.
Guarded connections

The shared validator rejects self-links, duplicate edges, and control cycles. Strict handle mode rejects incompatible source/target handles before an edge is committed.
Local history

Undo and redo keep snapshots in memory for this page only. Reloading is intentionally a clean start; nothing is persisted.
A safe experiment

Selected: No node selected · 5 nodes · 3 edges.
Under the hood SVELTE 5View source
src/routes/demo/interaction/+page.svelte
<script lang="ts">
	import type { Connection } from '@xyflow/svelte';
	import { Background, ConnectionMode, Controls, MiniMap, Panel, SvelteFlow } from '@xyflow/svelte';
	import DemoShell from '$lib/components/DemoShell.svelte';
	import StudioNode from '$lib/components/StudioNode.svelte';
	import { createDemoGraph, createEdge, createNode } from '$lib/flow/graph';
	import { validateConnection } from '$lib/flow/validate';
	import type { EdgeKind, FlowEdge, FlowNode } from '$lib/flow/graph';
	import source from './+page.svelte?raw';

	type Tone = 'info' | 'success' | 'error';
	type Feedback = { tone: Tone; text: string };
	type GraphSnapshot = { nodes: FlowNode[]; edges: FlowEdge[] };

	const nodeTypes = {
		input: StudioNode,
		transform: StudioNode,
		branch: StudioNode,
		sink: StudioNode,
		note: StudioNode
	};

	const starter = createDemoGraph('interaction');
	let nodes = $state.raw<FlowNode[]>(cloneNodes(starter.nodes));
	let edges = $state.raw<FlowEdge[]>(cloneEdges(starter.edges));
	let selectedNodeId = $state<string | null>(null);
	let connectionKind = $state<EdgeKind>('data');
	let past = $state<GraphSnapshot[]>([]);
	let future = $state<GraphSnapshot[]>([]);
	let addCount = $state(0);
	let edgeCount = $state(0);
	let feedback = $state<Feedback>({
		tone: 'info',
		text: 'Select a node or drag from a handle to try a guarded connection.'
	});
	let pendingConnectionSnapshot: GraphSnapshot | null = null;

	function cloneNodes(value: FlowNode[]): FlowNode[] {
		return value.map((node) => ({
			...node,
			position: { ...node.position },
			data: { ...node.data, params: { ...node.data.params } }
		}));
	}

	function cloneEdges(value: FlowEdge[]): FlowEdge[] {
		return value.map((edge) => ({
			...edge,
			data: { ...edge.data }
		}));
	}

	function snapshot(): GraphSnapshot {
		return { nodes: cloneNodes(nodes), edges: cloneEdges(edges) };
	}

	function restore(value: GraphSnapshot) {
		nodes = cloneNodes(value.nodes);
		edges = cloneEdges(value.edges);
	}

	function commit(nextNodes: FlowNode[], nextEdges: FlowEdge[], message: string) {
		past = [...past, snapshot()];
		nodes = nextNodes;
		edges = nextEdges;
		future = [];
		feedback = { tone: 'success', text: message };
	}

	function undo() {
		if (past.length === 0) {
			feedback = { tone: 'info', text: 'Nothing to undo yet.' };
			return;
		}
		const previous = past[past.length - 1];
		future = [...future, snapshot()];
		past = past.slice(0, -1);
		restore(previous);
		selectedNodeId = null;
		feedback = { tone: 'info', text: 'Undid the last graph edit.' };
	}

	function redo() {
		if (future.length === 0) {
			feedback = { tone: 'info', text: 'Nothing to redo yet.' };
			return;
		}
		const next = future[future.length - 1];
		past = [...past, snapshot()];
		future = future.slice(0, -1);
		restore(next);
		selectedNodeId = null;
		feedback = { tone: 'info', text: 'Redid the graph edit.' };
	}

	function addStep() {
		addCount += 1;
		const id = `manual-step-${addCount}`;
		const nextNode = createNode(
			id,
			'transform',
			`Added step ${addCount}`,
			{ x: 1040, y: 56 + ((addCount - 1) % 3) * 164 },
			{ subtitle: 'Created in this session', params: { operation: 'manual' } }
		);
		commit([...nodes, nextNode], edges, `Added “${nextNode.data.title}”.`);
		selectedNodeId = id;
	}

	function deleteSelected() {
		if (!selectedNodeId) {
			feedback = { tone: 'info', text: 'Select a node first, then delete it.' };
			return;
		}
		const selected = nodes.find((node) => node.id === selectedNodeId);
		if (!selected) {
			selectedNodeId = null;
			feedback = { tone: 'info', text: 'That selection is no longer in the graph.' };
			return;
		}
		const nextNodes = nodes.filter((node) => node.id !== selectedNodeId);
		const nextEdges = edges.filter(
			(edge) => edge.source !== selectedNodeId && edge.target !== selectedNodeId
		);
		commit(nextNodes, nextEdges, `Removed “${selected.data.title}” and its connections.`);
		selectedNodeId = null;
	}

	function resetGraph() {
		commit(cloneNodes(starter.nodes), cloneEdges(starter.edges), 'Restored the interaction starter graph.');
		selectedNodeId = null;
	}

	function connectionFrom(value: unknown): Connection | null {
		const candidate =
			value && typeof value === 'object' && 'detail' in value
				? (value as { detail: unknown }).detail
				: value;
		if (!candidate || typeof candidate !== 'object') return null;
		const connection = candidate as Partial<Connection>;
		if (typeof connection.source !== 'string' || typeof connection.target !== 'string') return null;
		return connection as Connection;
	}

	function inspectConnection(connection: FlowEdge | Connection) {
		const result = validateConnection({ ...connection, kind: connectionKind }, nodes, edges);
		feedback = result.ok
			? { tone: 'info', text: 'Compatible handle pair — release to add this edge.' }
			: { tone: 'error', text: `${result.code}: ${result.message}` };
		return result.ok;
	}

	function handleBeforeConnect(value: unknown): FlowEdge | false {
		const connection = connectionFrom(value);
		if (!connection) return false;
		const result = validateConnection({ ...connection, kind: connectionKind }, nodes, edges);
		if (!result.ok) {
			feedback = { tone: 'error', text: `${result.code}: ${result.message}` };
			return false;
		}

		pendingConnectionSnapshot = snapshot();
		edgeCount += 1;
		return createEdge(
			`manual-edge-${edgeCount}`,
			connection.source,
			connection.target,
			connectionKind,
			{ sourceHandle: connection.sourceHandle ?? undefined, targetHandle: connection.targetHandle ?? undefined }
		);
	}

	function handleConnect(value: unknown) {
		const connection = connectionFrom(value);
		const previous = pendingConnectionSnapshot;
		pendingConnectionSnapshot = null;
		if (!connection) return;
		if (previous) {
			past = [...past, previous];
			future = [];
		}
		feedback = { tone: 'success', text: `Connected ${connection.source} → ${connection.target} (${connectionKind} edge).` };
	}

	function handleNodeClick(value: unknown) {
		const candidate =
			value && typeof value === 'object' && 'detail' in value
				? (value as { detail: unknown }).detail
				: value;
		if (!candidate || typeof candidate !== 'object' || !('node' in candidate)) return;
		const node = (candidate as { node?: unknown }).node;
		if (node && typeof node === 'object' && 'id' in node) selectedNodeId = String(node.id);
	}

	const selectedTitle = $derived(
		selectedNodeId ? nodes.find((node) => node.id === selectedNodeId)?.data.title ?? 'Unknown node' : 'No node selected'
	);
</script>

<DemoShell
	slug="interaction"
	title="Edit without losing the thread"
	description="Try graph edits in a local working copy. Connections are checked before they land, and every add, delete, reset, or accepted connection can be undone and redone."
	{source}
>
	{#snippet toolbar()}
		<div class="flex flex-wrap items-center gap-2" aria-label="Graph editing controls">
			<button class="btn btn-sm btn-primary" onclick={addStep}>Add step</button>
			<button class="btn btn-sm btn-outline" onclick={deleteSelected} disabled={!selectedNodeId}>
				Delete selected
			</button>
			<label class="flex items-center gap-2 text-sm">
				<span class="sr-only">New edge kind</span>
				<select class="select select-bordered select-sm" bind:value={connectionKind} aria-label="New edge kind">
					<option value="data">Data edge</option>
					<option value="control">Control edge</option>
					<option value="error">Error edge</option>
				</select>
			</label>
			<span class="hidden h-6 w-px bg-base-300 sm:block" aria-hidden="true"></span>
			<button class="btn btn-sm btn-ghost" onclick={undo} disabled={past.length === 0} aria-label="Undo last graph edit">
				Undo <span class="ml-1 text-xs opacity-60">{past.length}</span>
			</button>
			<button class="btn btn-sm btn-ghost" onclick={redo} disabled={future.length === 0} aria-label="Redo graph edit">
				Redo <span class="ml-1 text-xs opacity-60">{future.length}</span>
			</button>
			<button class="btn btn-sm btn-outline" onclick={resetGraph}>Reset</button>
		</div>
	{/snippet}

	{#snippet info()}
		<div class="grid gap-4 md:grid-cols-3">
			<div>
				<h2 class="font-semibold">Guarded connections</h2>
				<p class="mt-1 text-sm text-base-content/70">
					The shared validator rejects self-links, duplicate edges, and control cycles. Strict handle mode rejects incompatible source/target handles before an edge is committed.
				</p>
			</div>
			<div>
				<h2 class="font-semibold">Local history</h2>
				<p class="mt-1 text-sm text-base-content/70">
					Undo and redo keep snapshots in memory for this page only. Reloading is intentionally a clean start; nothing is persisted.
				</p>
			</div>
			<div>
				<h2 class="font-semibold">A safe experiment</h2>
				<p class="mt-1 text-sm text-base-content/70">
					Selected: <strong>{selectedTitle}</strong> · {nodes.length} nodes · {edges.length} edges.
				</p>
			</div>
		</div>
	{/snippet}

	<SvelteFlow
		id="demo-interaction"
		bind:nodes
		bind:edges
		{nodeTypes}
		fitView
		fitViewOptions={{ padding: 0.2 }}
		connectionMode={ConnectionMode.Strict}
		onbeforeconnect={handleBeforeConnect}
		isValidConnection={inspectConnection}
		onconnect={handleConnect}
		onnodeclick={handleNodeClick}
		onpaneclick={() => (selectedNodeId = null)}
		aria-label="Interactive guarded workflow canvas"
	>
		<Background />
		<Controls />
		<MiniMap pannable zoomable />
		<Panel position="top-right">
			<div class="max-w-xs rounded-box border border-base-300 bg-base-100/95 p-3 text-xs shadow-sm" role="status" aria-live="polite">
				<div class="mb-1 font-semibold">Activity</div>
				<div class={feedback.tone === 'error' ? 'text-error' : feedback.tone === 'success' ? 'text-success' : 'text-base-content/70'}>
					{feedback.text}
				</div>
			</div>
		</Panel>
	</SvelteFlow>
</DemoShell>
The actual route source, imported with ?raw. Shared components and graph utilities live in src/lib.