@stonecrop/node-editor 0.13.11 → 0.13.14

package/dist/src/types/index.d.ts

@@ -1,12 +1,10 @@
 import { type Elements, type Element, type XYPosition, Position } from '@vue-flow/core';
-import type { AnyStateNodeDefinition, AnyStateNodeConfig } from 'xstate';
+import type { AnyStateNodeConfig } from 'xstate';
 /**
  * Editor states
  * @public
  */
-export type EditorStates = {
-    [key: string]: AnyStateNodeDefinition | AnyStateNodeConfig['states'];
-};
+export type EditorStates = Record<string, AnyStateNodeConfig>;
 /**
  * Flow elements
  * @public

package/dist/src/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,OAAO,EAAE,KAAK,UAAU,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACvF,OAAO,KAAK,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAA;AAExE;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG;IAC1B,CAAC,GAAG,EAAE,MAAM,GAAG,sBAAsB,GAAG,kBAAkB,CAAC,QAAQ,CAAC,CAAA;CACpE,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,QAAQ,CAClC;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,EAC3C;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,CAC3C,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,OAAO,CAChC;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,EAC3C;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,CAC3C,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,MAAM,GAAG;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG;QACd,QAAQ,CAAC,EAAE,UAAU,CAAA;QACrB,cAAc,CAAC,EAAE,QAAQ,CAAA;QACzB,cAAc,CAAC,EAAE,QAAQ,CAAA;KACzB,CAAA;CACD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,OAAO,EAAE,KAAK,UAAU,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACvF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAA;AAEhD;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAA;AAE7D;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,QAAQ,CAClC;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,EAC3C;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,CAC3C,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,OAAO,CAChC;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,EAC3C;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,CAC3C,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,MAAM,GAAG;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG;QACd,QAAQ,CAAC,EAAE,UAAU,CAAA;QACrB,cAAc,CAAC,EAAE,QAAQ,CAAA;QACzB,cAAc,CAAC,EAAE,QAAQ,CAAA;KACzB,CAAA;CACD,CAAA"}

package/dist/src/utils/stateTransforms.d.ts

@@ -0,0 +1,7 @@
+import type { EditorStates, FlowElements, Layout } from '../types';
+export declare function statesToFlowElements(states: EditorStates, layout?: Layout): FlowElements;
+export declare function flowElementsToStates(nextElements: FlowElements): {
+    states: EditorStates;
+    layout: Layout;
+};
+//# sourceMappingURL=stateTransforms.d.ts.map

package/dist/src/utils/stateTransforms.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stateTransforms.d.ts","sourceRoot":"","sources":["../../../src/utils/stateTransforms.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAElE,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,YAAY,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,YAAY,CA2DxF;AAED,wBAAgB,oBAAoB,CAAC,YAAY,EAAE,YAAY,GAAG;IAAE,MAAM,EAAE,YAAY,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAmDzG"}

package/dist/src/utils/stateTransforms.js

@@ -0,0 +1,104 @@
+import { Position } from '@vue-flow/core';
+export function statesToFlowElements(states, layout) {
+    const hasInputs = {};
+    const stateElements = [];
+    const stateHash = {};
+    let index = 0;
+    for (const [key, value] of Object.entries(states)) {
+        const el = {
+            id: key,
+            label: key,
+            position: layout?.[key]?.position ?? { x: 200 * index, y: 100 },
+            targetPosition: layout?.[key]?.targetPosition ?? Position.Left,
+            sourcePosition: layout?.[key]?.sourcePosition ?? Position.Right,
+        };
+        if (value.type === 'final') {
+            el.type = 'output';
+            el.class = 'default-output-node';
+        }
+        stateHash[key] = el;
+        index++;
+    }
+    for (const [key, value] of Object.entries(states)) {
+        if (value.on) {
+            for (const [edgeKey, edgeValue] of Object.entries(value.on)) {
+                const target = typeof edgeValue === 'string'
+                    ? edgeValue
+                    : edgeValue != null &&
+                        typeof edgeValue === 'object' &&
+                        'target' in edgeValue &&
+                        typeof edgeValue.target === 'string'
+                        ? edgeValue.target
+                        : '';
+                stateElements.push({
+                    id: `${key}-${target}`,
+                    source: key,
+                    target,
+                    label: edgeKey,
+                    animated: true,
+                    type: 'smoothstep',
+                    interactionWidth: 40,
+                });
+                hasInputs[target] = true;
+            }
+        }
+    }
+    for (const [key] of Object.entries(stateHash)) {
+        if (!hasInputs[key]) {
+            stateHash[key].type = 'input';
+            stateHash[key].class = 'default-input-node';
+        }
+        stateElements.push(stateHash[key]);
+    }
+    return stateElements;
+}
+export function flowElementsToStates(nextElements) {
+    const transitionsBySource = {};
+    const idToLabel = {};
+    const nodeTypeByLabel = {};
+    const nextLayout = {};
+    // First pass: build id→label map from nodes so edge targets resolve correctly
+    for (const el of nextElements) {
+        if (!('source' in el)) {
+            idToLabel[el.id] = typeof el.label === 'string' ? el.label : el.id;
+        }
+    }
+    // Second pass: collect node types, layout positions, and edge transitions
+    for (const el of nextElements) {
+        if ('source' in el && 'target' in el) {
+            const edgeLabel = typeof el.label === 'string' ? el.label : el.id;
+            const sourceLabel = idToLabel[el.source] || el.source;
+            const targetLabel = idToLabel[el.target] || el.target;
+            transitionsBySource[sourceLabel] = transitionsBySource[sourceLabel] ?? {};
+            transitionsBySource[sourceLabel][edgeLabel] = { target: targetLabel };
+        }
+        else {
+            const nodeLabel = typeof el.label === 'string' ? el.label : el.id;
+            nodeTypeByLabel[nodeLabel] = el.type;
+            if (el.position) {
+                nextLayout[nodeLabel] = {
+                    position: el.position,
+                    ...(el.targetPosition !== undefined && { targetPosition: el.targetPosition }),
+                    ...(el.sourcePosition !== undefined && { sourcePosition: el.sourcePosition }),
+                };
+            }
+        }
+    }
+    // Build states from node types and collected transitions
+    const nextStates = {};
+    for (const [label, nodeType] of Object.entries(nodeTypeByLabel)) {
+        if (nodeType === 'output') {
+            nextStates[label] = { type: 'final' };
+        }
+        else {
+            nextStates[label] = { on: transitionsBySource[label] ?? {} };
+        }
+    }
+    // Capture any transition sources that had no corresponding node entry
+    for (const [sourceLabel, on] of Object.entries(transitionsBySource)) {
+        if (!nextStates[sourceLabel]) {
+            nextStates[sourceLabel] = { on };
+        }
+    }
+    return { states: nextStates, layout: nextLayout };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stonecrop/node-editor",
-  "version": "0.13.11",
+  "version": "0.13.14",
   "license": "MIT",
   "type": "module",
   "author": {
@@ -43,10 +43,12 @@
     "@microsoft/api-documenter": "^7.30.5",
     "@rushstack/heft": "^1.2.17",
     "@vitejs/plugin-vue": "^6.0.6",
+    "@vitest/coverage-istanbul": "^4.1.5",
     "oxlint": "1.67.0",
     "oxlint-tsgolint": "0.23.0",
     "typescript": "^6.0.3",
     "vite": "^7.3.2",
+    "vitest": "^4.1.5",
     "vue": "^3.5.33",
     "vue-router": "^5.0.6",
     "stonecrop-rig": "0.7.0"
@@ -65,6 +67,9 @@
     "docs": "bash ../common/scripts/run-docs.sh node_editor",
     "lint": "oxlint",
     "lint:fix": "oxlint --fix",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest run --coverage.enabled false",
+    "test:watch": "vitest watch",
+    "test:coverage": "vitest run --coverage"
   }
 }

package/src/components/EditableEdge.vue

@@ -1,4 +1,6 @@
 <template>
+	<!-- transparent ghost path gives a ~20px click zone around the 2px visible stroke -->
+	<path :d="path[0]" fill="none" stroke="transparent" stroke-width="20" class="vue-flow__edge-interaction" />
 	<path :id="id" :style="style" class="vue-flow__edge-path" :d="path[0]" :marker-end="markerEnd" />
 
 	<EdgeLabelRenderer>
@@ -9,7 +11,8 @@
 				transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`,
 			}"
 			class="nodrag nopan editable-edge-label"
-			@click="labelOnClick()">
+			@click="labelOnClick()"
+			@contextmenu.prevent="$emit('remove', id)">
 			<div class="vue-flow__edge-label">{{ label }}</div>
 			<div v-if="showInput" class="label-input-wrapper">
 				<input
@@ -28,10 +31,7 @@ import { type EdgeProps, EdgeLabelRenderer, getBezierPath /* useVueFlow */ } fro
 import { computed, ref, nextTick, useTemplateRef } from 'vue'
 
 const props = defineProps<EdgeProps>()
-const emit = defineEmits(['change'])
-
-// TODO: Implement edge removal
-// const { removeEdges } = useVueFlow()
+const emit = defineEmits(['change', 'remove'])
 
 const inputRef = useTemplateRef<HTMLInputElement>('labelInput')
 const newLabel = ref<EdgeProps['label']>('')

package/src/components/EditableNode.vue

@@ -38,7 +38,7 @@ const showLabelInput = async () => {
 	newLabel.value = props.label
 	showInput.value = true
 	await nextTick()
-	inputRef.value.focus()
+	inputRef.value?.focus()
 }
 
 const submitNewLabel = () => {

package/src/components/NodeEditor.vue

@@ -1,5 +1,10 @@
 <template>
-	<div class="node-editor-wrapper" :class="nodeContainerClass" @mouseover="hover = true" @mouseleave="hover = false">
+	<div
+		class="node-editor-wrapper"
+		:class="nodeContainerClass"
+		@contextmenu.prevent
+		@mouseover="hover = true"
+		@mouseleave="hover = false">
 		<div class="chart-controls">
 			<div class="chart-controls-left">
 				<div><b>Selected Node:</b> {{ activeElementKey ? activeElementKey : 'none' }}</div>
@@ -29,13 +34,16 @@
 			:fit-view-on-init="true"
 			@connect="handleConnect"
 			@pane-ready="setInstance"
+			@node-click="handleNodeClick"
+			@edge-click="handleEdgeClick"
 			@edge-context-menu="handleEdgeContextMenu"
+			@node-drag-stop="emitElements"
 			@wheel.prevent="onWheel">
 			<template #node-editable="props">
 				<EditableNode v-bind="props" @change="labelChanged($event, props.id)" />
 			</template>
 			<template #edge-editable="props">
-				<EditableEdge v-bind="props" @change="labelChanged($event, props.id)" />
+				<EditableEdge v-bind="props" @change="labelChanged($event, props.id)" @remove="removeEdge(props.id)" />
 			</template>
 		</VueFlow>
 	</div>
@@ -49,10 +57,11 @@ import {
 	useVueFlow,
 	Connection,
 	Node,
+	NodeMouseEvent,
 	EdgeMouseEvent,
 	DefaultEdge,
 } from '@vue-flow/core'
-import { type HTMLAttributes, ref, computed, defineEmits, onBeforeUnmount, onMounted } from 'vue'
+import { type HTMLAttributes, ref, computed, nextTick, onBeforeUnmount, onMounted } from 'vue'
 
 import EditableEdge from './EditableEdge.vue'
 import EditableNode from './EditableNode.vue'
@@ -69,15 +78,9 @@ const vueFlowElements = ref<FlowElements>([])
 const vueFlowInstance = ref<VueFlowStore>()
 
 const activeElementKey = ref('')
-const activeElementIndex = computed(() => {
-	vueFlowElements.value.forEach((element, index) => {
-		if (element.id === activeElementKey.value) {
-			return index
-		}
-	})
-
-	return -1
-})
+const activeElementIndex = computed(() =>
+	vueFlowElements.value.findIndex(element => element.id === activeElementKey.value)
+)
 
 const elements = computed({
 	get: () => {
@@ -100,15 +103,6 @@ const elements = computed({
 			element.type = 'editable'
 		}
 
-		// Add click event to each element
-		for (const element of items) {
-			element.events = {
-				click: () => {
-					activeElementKey.value = element.id
-				},
-			}
-		}
-
 		return items
 	},
 	set: newValue => {
@@ -147,6 +141,7 @@ const shiftOutput = () => {
 		const activeNode = vueFlowElements.value[activeElementIndex.value] as Node
 		if (!activeNode.sourcePosition) return
 		activeNode.sourcePosition = shiftTerminal(activeNode.sourcePosition)
+		emitElements()
 	}
 }
 
@@ -155,6 +150,7 @@ const shiftInput = () => {
 		const activeNode = vueFlowElements.value[activeElementIndex.value] as Node
 		if (!activeNode.targetPosition) return
 		activeNode.targetPosition = shiftTerminal(activeNode.targetPosition)
+		emitElements()
 	}
 }
 
@@ -201,17 +197,11 @@ const addNode = () => {
 			hasInput: true,
 			hasOutput: true,
 		},
-		events: {
-			click: () => {
-				activeElementKey.value = nodeId
-			},
-		},
-		// position: { x: Math.random() * vueFlowInstance.value.dimensions.width, y: Math.random() * vueFlowInstance.value.dimensions.height }
 		position: newNodePosition,
 	})
 
 	if (makeEdge) {
-		let edgeId = `edge-${id + 1}`
+		const edgeId = `edge-${id + 1}`
 		vueFlowElements.value.push({
 			id: edgeId,
 			source: activeElementKey.value,
@@ -219,13 +209,9 @@ const addNode = () => {
 			type: 'editable',
 			label: `EDGE ${id + 1}`,
 			animated: true,
-			events: {
-				click: () => {
-					activeElementKey.value = edgeId
-				},
-			},
 		})
 	}
+	emitElements()
 }
 
 const labelChanged = (event: DefaultEdge['label'], id: DefaultEdge['id']) => {
@@ -235,9 +221,18 @@ const labelChanged = (event: DefaultEdge['label'], id: DefaultEdge['id']) => {
 			break
 		}
 	}
+	emitElements()
 }
 
-const handleConnect = (event: Connection) => {
+const handleNodeClick = ({ node }: NodeMouseEvent) => {
+	activeElementKey.value = node.id
+}
+
+const handleEdgeClick = ({ edge }: EdgeMouseEvent) => {
+	activeElementKey.value = edge.id
+}
+
+const handleConnect = async (event: Connection) => {
 	const id = vueFlowElements.value.length
 	const newEdge = {
 		id: `edge-${id}`,
@@ -247,17 +242,26 @@ const handleConnect = (event: Connection) => {
 		label: `New Edge`,
 		interactionWidth: 400,
 		animated: true,
-		events: {
-			click: () => {
-				activeElementKey.value = newEdge.id
-			},
-		},
 	}
 	addEdges([newEdge])
+	await nextTick()
+	emitElements()
+}
+
+const handleEdgeContextMenu = async (event: EdgeMouseEvent) => {
+	removeEdges([event.edge.id])
+	await nextTick()
+	emitElements()
+}
+
+const removeEdge = async (id: string) => {
+	removeEdges([id])
+	await nextTick()
+	emitElements()
 }
 
-const handleEdgeContextMenu = (event: EdgeMouseEvent) => {
-	removeEdges(event.edge.id)
+const emitElements = () => {
+	emit('update:modelValue', JSON.parse(JSON.stringify(vueFlowElements.value)))
 }
 </script>
 

package/src/components/StateEditor.vue

@@ -5,132 +5,35 @@
 </template>
 
 <script setup lang="ts">
-import { type Node, Position } from '@vue-flow/core'
-import { type HTMLAttributes, computed } from 'vue'
+import { type HTMLAttributes, computed, onMounted } from 'vue'
 
 import NodeEditor from './NodeEditor.vue'
-import type { EditorStates, FlowElement, FlowElements, Layout } from '../types'
+import type { EditorStates, FlowElements, Layout } from '../types'
+import { statesToFlowElements, flowElementsToStates } from '../utils/stateTransforms'
 
-const emit = defineEmits(['update:modelValue'])
 const states = defineModel<EditorStates>()
-const { layout, nodeContainerClass = '' } = defineProps<{
-	layout: Layout
+const layout = defineModel<Layout>('layout')
+const { nodeContainerClass = '' } = defineProps<{
 	nodeContainerClass?: HTMLAttributes['class']
 }>()
 
+onMounted(() => {
+	if (layout.value === undefined) {
+		console.warn('[StateEditor] v-model:layout is not bound. Node position changes will not be persisted.')
+	}
+})
+
 const elements = computed<FlowElements>({
 	get: () => {
-		const hasInputs = {}
-		const stateElements: FlowElements = []
-		const stateHash: Record<string, FlowElement> = {}
-
-		if (!states.value) {
-			return stateElements
-		}
-
-		let index = 0
-		for (const [key, value] of Object.entries(states.value)) {
-			const el: Node = {
-				id: key,
-				label: key,
-				position: layout[key]?.position || { x: 200 * index, y: 100 },
-				targetPosition: layout[key]?.targetPosition || Position.Left,
-				sourcePosition: layout[key]?.sourcePosition || Position.Right,
-			}
-
-			if (value?.type === 'final') {
-				el.type = 'output'
-				el.class = 'default-output-node'
-			}
-
-			stateHash[key] = el
-		}
-
-		for (const [key, value] of Object.entries(states.value)) {
-			if (value?.on) {
-				for (const [edgeKey, edgeValue] of Object.entries(value.on)) {
-					// NOTE: If the proxy array 'value.on' has more than one edge, 'edgeValue' will contain a proxy object
-					// where 'target' can be accessed. Otherwise, 'edgeValue' will be available directly.
-
-					// TODO: resolve type issues with xstate
-					const target = edgeValue.target || edgeValue
-					stateElements.push({
-						id: `${key}-${target}`,
-						source: key,
-						target: target,
-						label: edgeKey,
-						animated: true,
-						type: 'smoothstep', // Use smoothstep for better separation of bidirectional edges
-					})
-
-					hasInputs[target] = true
-				}
-			}
-			index++
-		}
-
-		for (const [key, value] of Object.entries(stateHash)) {
-			if (!hasInputs[key]) {
-				value['type'] = 'input'
-				value['class'] = 'default-input-node'
-			}
-			stateElements.push(value)
-		}
-
-		return stateElements
+		if (!states.value) return []
+		return statesToFlowElements(states.value, layout.value)
 	},
-
 	set: newValue => {
-		// update modelValue when elements change
-		onElementsChange(newValue)
-
-		// TODO: emit('update:modelValue', modelValue)
+		const { states: nextStates, layout: nextLayout } = flowElementsToStates(newValue)
+		states.value = nextStates
+		if (layout.value !== undefined) {
+			layout.value = nextLayout
+		}
 	},
 })
-const onElementsChange = (nextElements: FlowElements) => {
-	const edges: Record<string, Record<string, any>> = {}
-	const idToLabel: Record<string, string> = {}
-	const nextStates: EditorStates = {}
-
-	for (const el of nextElements) {
-		const label = el.label as string
-
-		if (el.type === 'input') {
-			// it's an input node
-			nextStates[label] = {
-				on: {},
-			}
-		} else if (el.type === 'output') {
-			// it's an output node
-			nextStates[label] = {
-				type: 'final',
-			}
-		} else if (el.source && el.target) {
-			// it's an edge
-			edges[el.source] = edges[el.source] || {}
-			edges[el.source][label] = {
-				target: el.target,
-			}
-		} else {
-			// it's a state
-			nextStates[label] = {
-				on: {},
-			}
-		}
-		idToLabel[el.id] = label
-	}
-
-	for (const [edgeKey, edgeValue] of Object.entries(edges)) {
-		// add edges to states
-		const label = idToLabel[edgeKey]
-		for (const [key, value] of Object.entries(edgeValue)) {
-			if (!nextStates[label]) {
-				nextStates[label] = { on: {} }
-			}
-			nextStates[label].on[key] = value
-		}
-	}
-
-	emit('update:modelValue', nextStates)
-}
 </script>

package/src/types/index.ts

@@ -1,13 +1,11 @@
 import { type Elements, type Element, type XYPosition, Position } from '@vue-flow/core'
-import type { AnyStateNodeDefinition, AnyStateNodeConfig } from 'xstate'
+import type { AnyStateNodeConfig } from 'xstate'
 
 /**
  * Editor states
  * @public
  */
-export type EditorStates = {
-	[key: string]: AnyStateNodeDefinition | AnyStateNodeConfig['states']
-}
+export type EditorStates = Record<string, AnyStateNodeConfig>
 
 /**
  * Flow elements

package/src/utils/stateTransforms.ts

@@ -0,0 +1,117 @@
+import { Position, type Node } from '@vue-flow/core'
+
+import type { EditorStates, FlowElements, Layout } from '../types'
+
+export function statesToFlowElements(states: EditorStates, layout?: Layout): FlowElements {
+	const hasInputs: Record<string, boolean> = {}
+	const stateElements: FlowElements = []
+	const stateHash: Record<string, Node> = {}
+
+	let index = 0
+	for (const [key, value] of Object.entries(states)) {
+		const el: Node = {
+			id: key,
+			label: key,
+			position: layout?.[key]?.position ?? { x: 200 * index, y: 100 },
+			targetPosition: layout?.[key]?.targetPosition ?? Position.Left,
+			sourcePosition: layout?.[key]?.sourcePosition ?? Position.Right,
+		}
+
+		if (value.type === 'final') {
+			el.type = 'output'
+			el.class = 'default-output-node'
+		}
+
+		stateHash[key] = el
+		index++
+	}
+
+	for (const [key, value] of Object.entries(states)) {
+		if (value.on) {
+			for (const [edgeKey, edgeValue] of Object.entries(value.on)) {
+				const target =
+					typeof edgeValue === 'string'
+						? edgeValue
+						: edgeValue != null &&
+							  typeof edgeValue === 'object' &&
+							  'target' in edgeValue &&
+							  typeof edgeValue.target === 'string'
+							? edgeValue.target
+							: ''
+				stateElements.push({
+					id: `${key}-${target}`,
+					source: key,
+					target,
+					label: edgeKey,
+					animated: true,
+					type: 'smoothstep',
+					interactionWidth: 40,
+				})
+				hasInputs[target] = true
+			}
+		}
+	}
+
+	for (const [key] of Object.entries(stateHash)) {
+		if (!hasInputs[key]) {
+			stateHash[key].type = 'input'
+			stateHash[key].class = 'default-input-node'
+		}
+		stateElements.push(stateHash[key])
+	}
+
+	return stateElements
+}
+
+export function flowElementsToStates(nextElements: FlowElements): { states: EditorStates; layout: Layout } {
+	const transitionsBySource: Record<string, Record<string, { target: string }>> = {}
+	const idToLabel: Record<string, string> = {}
+	const nodeTypeByLabel: Record<string, string | undefined> = {}
+	const nextLayout: Layout = {}
+
+	// First pass: build id→label map from nodes so edge targets resolve correctly
+	for (const el of nextElements) {
+		if (!('source' in el)) {
+			idToLabel[el.id] = typeof el.label === 'string' ? el.label : el.id
+		}
+	}
+
+	// Second pass: collect node types, layout positions, and edge transitions
+	for (const el of nextElements) {
+		if ('source' in el && 'target' in el) {
+			const edgeLabel = typeof el.label === 'string' ? el.label : el.id
+			const sourceLabel = idToLabel[el.source] || el.source
+			const targetLabel = idToLabel[el.target] || el.target
+			transitionsBySource[sourceLabel] = transitionsBySource[sourceLabel] ?? {}
+			transitionsBySource[sourceLabel][edgeLabel] = { target: targetLabel }
+		} else {
+			const nodeLabel = typeof el.label === 'string' ? el.label : el.id
+			nodeTypeByLabel[nodeLabel] = el.type
+			if (el.position) {
+				nextLayout[nodeLabel] = {
+					position: el.position,
+					...(el.targetPosition !== undefined && { targetPosition: el.targetPosition }),
+					...(el.sourcePosition !== undefined && { sourcePosition: el.sourcePosition }),
+				}
+			}
+		}
+	}
+
+	// Build states from node types and collected transitions
+	const nextStates: EditorStates = {}
+	for (const [label, nodeType] of Object.entries(nodeTypeByLabel)) {
+		if (nodeType === 'output') {
+			nextStates[label] = { type: 'final' }
+		} else {
+			nextStates[label] = { on: transitionsBySource[label] ?? {} }
+		}
+	}
+	// Capture any transition sources that had no corresponding node entry
+	for (const [sourceLabel, on] of Object.entries(transitionsBySource)) {
+		if (!nextStates[sourceLabel]) {
+			nextStates[sourceLabel] = { on }
+		}
+	}
+
+	return { states: nextStates, layout: nextLayout }
+}