@stonecrop/node-editor 0.30.0 → 0.32.0

package/dist/node-editor.js

@@ -1,649 +1,828 @@
-import { defineComponent as T, useTemplateRef as Y, ref as E, computed as M, openBlock as S, createElementBlock as P, Fragment as Q, createElementVNode as c, normalizeStyle as K, createVNode as O, unref as _, withCtx as R, withModifiers as D, toDisplayString as F, withDirectives as X, withKeys as W, vModelText as U, createCommentVNode as B, nextTick as L, createBlock as H, onMounted as Z, onBeforeUnmount as ie, normalizeClass as ue, createTextVNode as de, mergeProps as A, useModel as J, mergeModels as re } from "vue";
-import { getBezierPath as ce, EdgeLabelRenderer as ee, Handle as q, useVueFlow as ve, VueFlow as fe, Position as C } from "@vue-flow/core";
-import { Graph as pe, layout as ge } from "@dagrejs/dagre";
-const me = ["d"], be = ["id", "d", "marker-end"], ye = { class: "vue-flow__edge-label" }, he = {
-  key: 0,
-  class: "label-input-wrapper"
-}, we = {
-  inheritAttrs: !1
-}, ke = /* @__PURE__ */ T({
-  ...we,
-  __name: "EditableEdge",
-  props: {
-    id: {},
-    sourceNode: {},
-    targetNode: {},
-    source: {},
-    target: {},
-    type: {},
-    label: { type: [String, Object, Function] },
-    style: {},
-    selected: { type: Boolean },
-    sourcePosition: {},
-    targetPosition: {},
-    sourceHandleId: {},
-    targetHandleId: {},
-    animated: { type: Boolean },
-    updatable: { type: Boolean },
-    markerStart: {},
-    markerEnd: {},
-    curvature: {},
-    interactionWidth: {},
-    data: {},
-    events: {},
-    labelStyle: {},
-    labelShowBg: { type: Boolean },
-    labelBgStyle: {},
-    labelBgPadding: {},
-    labelBgBorderRadius: {},
-    sourceX: {},
-    sourceY: {},
-    targetX: {},
-    targetY: {}
-  },
-  emits: ["change", "remove"],
-  setup(l, { emit: v }) {
-    const r = l, p = v, n = Y("labelInput"), u = E(""), t = E(!1);
-    let e = 0;
-    const a = async () => {
-      let f = Date.now();
-      f - e < 500 && !t.value && await s(), e = f;
-    }, s = async () => {
-      u.value = r.label, t.value = !0, await L(), n.value?.focus();
-    }, g = () => {
-      t.value = !1, p("change", u.value);
-    }, m = M(() => ce(r));
-    return (f, y) => (S(), P(Q, null, [
-      c("path", {
-        d: m.value[0],
-        fill: "none",
-        stroke: "transparent",
-        "stroke-width": "20",
-        class: "vue-flow__edge-interaction"
-      }, null, 8, me),
-      c("path", {
-        id: l.id,
-        style: K(l.style),
-        class: "vue-flow__edge-path",
-        d: m.value[0],
-        "marker-end": l.markerEnd
-      }, null, 12, be),
-      O(_(ee), null, {
-        default: R(() => [
-          c("div", {
-            style: K({
-              pointerEvents: "all",
-              position: "absolute",
-              transform: `translate(-50%, -50%) translate(${m.value[1]}px,${m.value[2]}px)`
-            }),
-            class: "nodrag nopan editable-edge-label",
-            onClick: y[2] || (y[2] = (h) => a()),
-            onContextmenu: y[3] || (y[3] = D((h) => f.$emit("remove", l.id), ["prevent"]))
-          }, [
-            c("div", ye, F(l.label), 1),
-            t.value ? (S(), P("div", he, [
-              X(c("input", {
-                ref: "labelInput",
-                "onUpdate:modelValue": y[0] || (y[0] = (h) => u.value = h),
-                class: "label-input",
-                onBlur: y[1] || (y[1] = (h) => t.value = !1),
-                onKeypress: W(g, ["enter"])
-              }, null, 544), [
-                [U, u.value]
-              ])
-            ])) : B("", !0)
-          ], 36)
-        ]),
-        _: 1
-      })
-    ], 64));
-  }
-}), Se = {
-  key: 0,
-  class: "label-input-wrapper"
-}, $e = /* @__PURE__ */ T({
-  __name: "EditableNode",
-  props: {
-    id: {},
-    type: {},
-    selected: { type: Boolean },
-    connectable: { type: [Boolean, Number, String, Function] },
-    position: {},
-    dimensions: {},
-    label: {},
-    isValidTargetPos: { type: Function },
-    isValidSourcePos: { type: Function },
-    parent: {},
-    parentNodeId: {},
-    dragging: { type: Boolean },
-    resizing: { type: Boolean },
-    zIndex: {},
-    targetPosition: {},
-    sourcePosition: {},
-    dragHandle: {},
-    data: {},
-    events: {}
-  },
-  emits: ["change"],
-  setup(l, { emit: v }) {
-    const r = l, p = v, n = Y("labelInput"), u = E(""), t = E(!1);
-    let e = 0;
-    const a = async () => {
-      let m = Date.now();
-      m - e < 500 && !t.value && await s(), e = m;
-    }, s = async () => {
-      u.value = r.label, t.value = !0, await L(), n.value?.focus();
-    }, g = () => {
-      t.value = !1, p("change", u.value);
-    };
-    return (m, f) => (S(), P("div", {
-      onClick: f[2] || (f[2] = (y) => a())
-    }, [
-      c("div", null, F(l.label), 1),
-      t.value ? (S(), P("div", Se, [
-        X(c("input", {
-          ref: "labelInput",
-          "onUpdate:modelValue": f[0] || (f[0] = (y) => u.value = y),
-          class: "label-input",
-          onBlur: f[1] || (f[1] = (y) => t.value = !1),
-          onKeypress: W(g, ["enter"])
-        }, null, 544), [
-          [U, u.value]
-        ])
-      ])) : B("", !0),
-      l.data.hasInput ? (S(), H(_(q), {
-        key: 1,
-        id: "a",
-        type: "target",
-        position: l.targetPosition
-      }, null, 8, ["position"])) : B("", !0),
-      l.data.hasOutput ? (S(), H(_(q), {
-        key: 2,
-        id: "b",
-        type: "source",
-        position: l.sourcePosition
-      }, null, 8, ["position"])) : B("", !0)
-    ]));
-  }
-}), Ce = ["d"], Ee = ["id", "d", "marker-end"], Pe = { class: "vue-flow__edge-label" }, Ne = {
-  key: 0,
-  class: "label-input-wrapper"
-}, Be = {
-  inheritAttrs: !1
-}, Ie = /* @__PURE__ */ T({
-  ...Be,
-  __name: "SelfLoopEdge",
-  props: {
-    id: {},
-    sourceNode: {},
-    targetNode: {},
-    source: {},
-    target: {},
-    type: {},
-    label: { type: [String, Object, Function] },
-    style: {},
-    selected: { type: Boolean },
-    sourcePosition: {},
-    targetPosition: {},
-    sourceHandleId: {},
-    targetHandleId: {},
-    animated: { type: Boolean },
-    updatable: { type: Boolean },
-    markerStart: {},
-    markerEnd: {},
-    curvature: {},
-    interactionWidth: {},
-    data: {},
-    events: {},
-    labelStyle: {},
-    labelShowBg: { type: Boolean },
-    labelBgStyle: {},
-    labelBgPadding: {},
-    labelBgBorderRadius: {},
-    sourceX: {},
-    sourceY: {},
-    targetX: {},
-    targetY: {}
-  },
-  emits: ["change", "remove"],
-  setup(l, { emit: v }) {
-    const r = l, p = v, n = 90, u = 45, t = M(() => {
-      const { sourceX: h, sourceY: k, targetX: $, targetY: x } = r, j = `M ${h},${k} C ${h + u},${k - n} ${$ - u},${x - n} ${$},${x}`, z = (h + $) / 2, V = Math.min(k, x) - n * 0.72;
-      return { d: j, labelX: z, labelY: V };
-    }), e = Y("labelInput"), a = E(""), s = E(!1);
-    let g = 0;
-    const m = async () => {
-      let h = Date.now();
-      h - g < 500 && !s.value && await f(), g = h;
-    }, f = async () => {
-      a.value = r.label, s.value = !0, await L(), e.value?.focus();
-    }, y = () => {
-      s.value = !1, p("change", a.value);
-    };
-    return (h, k) => (S(), P(Q, null, [
-      c("path", {
-        d: t.value.d,
-        fill: "none",
-        stroke: "transparent",
-        "stroke-width": "20",
-        class: "vue-flow__edge-interaction"
-      }, null, 8, Ce),
-      c("path", {
-        id: l.id,
-        style: K(l.style),
-        class: "vue-flow__edge-path",
-        d: t.value.d,
-        "marker-end": l.markerEnd
-      }, null, 12, Ee),
-      O(_(ee), null, {
-        default: R(() => [
-          c("div", {
-            style: K({
-              pointerEvents: "all",
-              position: "absolute",
-              transform: `translate(-50%, -50%) translate(${t.value.labelX}px,${t.value.labelY}px)`
-            }),
-            class: "nodrag nopan editable-edge-label",
-            onClick: k[2] || (k[2] = ($) => m()),
-            onContextmenu: k[3] || (k[3] = D(($) => h.$emit("remove", l.id), ["prevent"]))
-          }, [
-            c("div", Pe, F(l.label), 1),
-            s.value ? (S(), P("div", Ne, [
-              X(c("input", {
-                ref: "labelInput",
-                "onUpdate:modelValue": k[0] || (k[0] = ($) => a.value = $),
-                class: "label-input",
-                onBlur: k[1] || (k[1] = ($) => s.value = !1),
-                onKeypress: W(y, ["enter"])
-              }, null, 544), [
-                [U, a.value]
-              ])
-            ])) : B("", !0)
-          ], 36)
-        ]),
-        _: 1
-      })
-    ], 64));
-  }
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, toDisplayString, unref, useModel, useTemplateRef, vModelText, withCtx, withDirectives, withKeys, withModifiers } from "vue";
+import { EdgeLabelRenderer, Handle, Position, Position as Position$1, VueFlow, getBezierPath, useVueFlow } from "@vue-flow/core";
+import { Graph, layout } from "@dagrejs/dagre";
+import './assets/index.css';//#region src/components/EditableEdge.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$3 = ["d"];
+var _hoisted_2$2 = [
+	"id",
+	"d",
+	"marker-end"
+];
+var _hoisted_3$2 = { class: "vue-flow__edge-label" };
+var _hoisted_4$2 = {
+	key: 0,
+	class: "label-input-wrapper"
+};
+//#endregion
+//#region src/components/EditableEdge.vue
+var EditableEdge_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "EditableEdge",
+	props: {
+		id: {},
+		sourceNode: {},
+		targetNode: {},
+		source: {},
+		target: {},
+		type: {},
+		label: { type: [
+			String,
+			Object,
+			Function
+		] },
+		style: {},
+		selected: { type: Boolean },
+		sourcePosition: {},
+		targetPosition: {},
+		sourceHandleId: {},
+		targetHandleId: {},
+		animated: { type: Boolean },
+		updatable: { type: Boolean },
+		markerStart: {},
+		markerEnd: {},
+		curvature: {},
+		interactionWidth: {},
+		data: {},
+		events: {},
+		labelStyle: {},
+		labelShowBg: { type: Boolean },
+		labelBgStyle: {},
+		labelBgPadding: {},
+		labelBgBorderRadius: {},
+		sourceX: {},
+		sourceY: {},
+		targetX: {},
+		targetY: {}
+	},
+	emits: ["change", "remove"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const inputRef = useTemplateRef("labelInput");
+		const newLabel = ref("");
+		const showInput = ref(false);
+		let lastClick = 0;
+		const labelOnClick = async () => {
+			let now = Date.now();
+			if (now - lastClick < 500 && !showInput.value) await showLabelInput();
+			lastClick = now;
+		};
+		const showLabelInput = async () => {
+			newLabel.value = props.label;
+			showInput.value = true;
+			await nextTick();
+			inputRef.value?.focus();
+		};
+		const submitNewLabel = () => {
+			showInput.value = false;
+			emit("change", newLabel.value);
+		};
+		const path = computed(() => getBezierPath(props));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [
+				createElementVNode("path", {
+					d: path.value[0],
+					fill: "none",
+					stroke: "transparent",
+					"stroke-width": "20",
+					class: "vue-flow__edge-interaction"
+				}, null, 8, _hoisted_1$3),
+				createElementVNode("path", {
+					id: __props.id,
+					style: normalizeStyle(__props.style),
+					class: "vue-flow__edge-path",
+					d: path.value[0],
+					"marker-end": __props.markerEnd
+				}, null, 12, _hoisted_2$2),
+				createVNode(unref(EdgeLabelRenderer), null, {
+					default: withCtx(() => [createElementVNode("div", {
+						style: normalizeStyle({
+							pointerEvents: "all",
+							position: "absolute",
+							transform: `translate(-50%, -50%) translate(${path.value[1]}px,${path.value[2]}px)`
+						}),
+						class: "nodrag nopan editable-edge-label",
+						onClick: _cache[2] || (_cache[2] = ($event) => labelOnClick()),
+						onContextmenu: _cache[3] || (_cache[3] = withModifiers(($event) => _ctx.$emit("remove", __props.id), ["prevent"]))
+					}, [createElementVNode("div", _hoisted_3$2, toDisplayString(__props.label), 1), showInput.value ? (openBlock(), createElementBlock("div", _hoisted_4$2, [withDirectives(createElementVNode("input", {
+						ref: "labelInput",
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => newLabel.value = $event),
+						class: "label-input",
+						onBlur: _cache[1] || (_cache[1] = ($event) => showInput.value = false),
+						onKeypress: withKeys(submitNewLabel, ["enter"])
+					}, null, 544), [[vModelText, newLabel.value]])])) : createCommentVNode("", true)], 36)]),
+					_: 1
+				})
+			], 64);
+		};
+	}
+});
+//#endregion
+//#region src/components/EditableNode.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$2 = {
+	key: 0,
+	class: "label-input-wrapper"
+};
+//#endregion
+//#region src/components/EditableNode.vue
+var EditableNode_default = /* @__PURE__ */ defineComponent({
+	__name: "EditableNode",
+	props: {
+		id: {},
+		type: {},
+		selected: { type: Boolean },
+		connectable: { type: [
+			Boolean,
+			Number,
+			String,
+			Function
+		] },
+		position: {},
+		dimensions: {},
+		label: {},
+		isValidTargetPos: { type: Function },
+		isValidSourcePos: { type: Function },
+		parent: {},
+		parentNodeId: {},
+		dragging: { type: Boolean },
+		resizing: { type: Boolean },
+		zIndex: {},
+		targetPosition: {},
+		sourcePosition: {},
+		dragHandle: {},
+		data: {},
+		events: {}
+	},
+	emits: ["change"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const inputRef = useTemplateRef("labelInput");
+		const newLabel = ref("");
+		const showInput = ref(false);
+		let lastClick = 0;
+		const nodeOnClick = async () => {
+			let now = Date.now();
+			if (now - lastClick < 500 && !showInput.value) await showLabelInput();
+			lastClick = now;
+		};
+		const showLabelInput = async () => {
+			newLabel.value = props.label;
+			showInput.value = true;
+			await nextTick();
+			inputRef.value?.focus();
+		};
+		const submitNewLabel = () => {
+			showInput.value = false;
+			emit("change", newLabel.value);
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { onClick: _cache[2] || (_cache[2] = ($event) => nodeOnClick()) }, [
+				createElementVNode("div", null, toDisplayString(__props.label), 1),
+				showInput.value ? (openBlock(), createElementBlock("div", _hoisted_1$2, [withDirectives(createElementVNode("input", {
+					ref: "labelInput",
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => newLabel.value = $event),
+					class: "label-input",
+					onBlur: _cache[1] || (_cache[1] = ($event) => showInput.value = false),
+					onKeypress: withKeys(submitNewLabel, ["enter"])
+				}, null, 544), [[vModelText, newLabel.value]])])) : createCommentVNode("", true),
+				__props.data.hasInput ? (openBlock(), createBlock(unref(Handle), {
+					key: 1,
+					id: "a",
+					type: "target",
+					position: __props.targetPosition
+				}, null, 8, ["position"])) : createCommentVNode("", true),
+				__props.data.hasOutput ? (openBlock(), createBlock(unref(Handle), {
+					key: 2,
+					id: "b",
+					type: "source",
+					position: __props.sourcePosition
+				}, null, 8, ["position"])) : createCommentVNode("", true)
+			]);
+		};
+	}
 });
-function te(l, v = {}) {
-  const { rankdir: r = "LR", nodeWidth: p = 160, nodeHeight: n = 40, dimensions: u } = v, t = (s) => u?.[s] ?? { width: p, height: n }, e = [];
-  for (const s of l)
-    "source" in s || e.push(s.id);
-  if (e.length === 0) return [...l];
-  const a = new pe();
-  a.setGraph({ rankdir: r, nodesep: 40, ranksep: 80, edgesep: 20 }), a.setDefaultEdgeLabel(() => ({}));
-  for (const s of e) {
-    const { width: g, height: m } = t(s);
-    a.setNode(s, { width: g, height: m });
-  }
-  for (const s of l)
-    "source" in s && s.source !== s.target && a.setEdge(s.source, s.target);
-  return ge(a), l.map((s) => {
-    if ("source" in s) return s;
-    const g = a.node(s.id);
-    if (!g) return s;
-    const { width: m, height: f } = t(s.id);
-    return { ...s, position: { x: g.x - m / 2, y: g.y - f / 2 } };
-  });
+//#endregion
+//#region src/components/SelfLoopEdge.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$1 = ["d"];
+var _hoisted_2$1 = [
+	"id",
+	"d",
+	"marker-end"
+];
+var _hoisted_3$1 = { class: "vue-flow__edge-label" };
+var _hoisted_4$1 = {
+	key: 0,
+	class: "label-input-wrapper"
+};
+//#endregion
+//#region src/components/SelfLoopEdge.vue
+var SelfLoopEdge_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "SelfLoopEdge",
+	props: {
+		id: {},
+		sourceNode: {},
+		targetNode: {},
+		source: {},
+		target: {},
+		type: {},
+		label: { type: [
+			String,
+			Object,
+			Function
+		] },
+		style: {},
+		selected: { type: Boolean },
+		sourcePosition: {},
+		targetPosition: {},
+		sourceHandleId: {},
+		targetHandleId: {},
+		animated: { type: Boolean },
+		updatable: { type: Boolean },
+		markerStart: {},
+		markerEnd: {},
+		curvature: {},
+		interactionWidth: {},
+		data: {},
+		events: {},
+		labelStyle: {},
+		labelShowBg: { type: Boolean },
+		labelBgStyle: {},
+		labelBgPadding: {},
+		labelBgBorderRadius: {},
+		sourceX: {},
+		sourceY: {},
+		targetX: {},
+		targetY: {}
+	},
+	emits: ["change", "remove"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const LOOP_HEIGHT = 90;
+		const LOOP_SPREAD = 45;
+		const path = computed(() => {
+			const { sourceX, sourceY, targetX, targetY } = props;
+			return {
+				d: `M ${sourceX},${sourceY} C ${sourceX + LOOP_SPREAD},${sourceY - LOOP_HEIGHT} ${targetX - LOOP_SPREAD},${targetY - LOOP_HEIGHT} ${targetX},${targetY}`,
+				labelX: (sourceX + targetX) / 2,
+				labelY: Math.min(sourceY, targetY) - LOOP_HEIGHT * .72
+			};
+		});
+		const inputRef = useTemplateRef("labelInput");
+		const newLabel = ref("");
+		const showInput = ref(false);
+		let lastClick = 0;
+		const labelOnClick = async () => {
+			let now = Date.now();
+			if (now - lastClick < 500 && !showInput.value) await showLabelInput();
+			lastClick = now;
+		};
+		const showLabelInput = async () => {
+			newLabel.value = props.label;
+			showInput.value = true;
+			await nextTick();
+			inputRef.value?.focus();
+		};
+		const submitNewLabel = () => {
+			showInput.value = false;
+			emit("change", newLabel.value);
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [
+				createElementVNode("path", {
+					d: path.value.d,
+					fill: "none",
+					stroke: "transparent",
+					"stroke-width": "20",
+					class: "vue-flow__edge-interaction"
+				}, null, 8, _hoisted_1$1),
+				createElementVNode("path", {
+					id: __props.id,
+					style: normalizeStyle(__props.style),
+					class: "vue-flow__edge-path",
+					d: path.value.d,
+					"marker-end": __props.markerEnd
+				}, null, 12, _hoisted_2$1),
+				createVNode(unref(EdgeLabelRenderer), null, {
+					default: withCtx(() => [createElementVNode("div", {
+						style: normalizeStyle({
+							pointerEvents: "all",
+							position: "absolute",
+							transform: `translate(-50%, -50%) translate(${path.value.labelX}px,${path.value.labelY}px)`
+						}),
+						class: "nodrag nopan editable-edge-label",
+						onClick: _cache[2] || (_cache[2] = ($event) => labelOnClick()),
+						onContextmenu: _cache[3] || (_cache[3] = withModifiers(($event) => _ctx.$emit("remove", __props.id), ["prevent"]))
+					}, [createElementVNode("div", _hoisted_3$1, toDisplayString(__props.label), 1), showInput.value ? (openBlock(), createElementBlock("div", _hoisted_4$1, [withDirectives(createElementVNode("input", {
+						ref: "labelInput",
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => newLabel.value = $event),
+						class: "label-input",
+						onBlur: _cache[1] || (_cache[1] = ($event) => showInput.value = false),
+						onKeypress: withKeys(submitNewLabel, ["enter"])
+					}, null, 544), [[vModelText, newLabel.value]])])) : createCommentVNode("", true)], 36)]),
+					_: 1
+				})
+			], 64);
+		};
+	}
+});
+//#endregion
+//#region src/utils/autoLayout.ts
+/**
+* Compute node positions for a workflow graph with dagre's layered (Sugiyama) algorithm.
+*
+* Pure and synchronous: takes VueFlow elements (nodes + edges) and returns a new elements array with
+* each node's `position` replaced by a laid-out coordinate; edges and every other node field are
+* passed through untouched. Used two ways — as the seed for an un-arranged workflow (fixed default
+* dimensions, no DOM) and behind the toolbar button (measured `dimensions`).
+*
+* Self-loop edges (`source === target`) are skipped: dagre doesn't rank them, and they're reserved
+* for the separate mutate-in-place self-transition feature.
+* @public
+*/
+function autoLayout(elements, options = {}) {
+	const { rankdir = "LR", nodeWidth = 160, nodeHeight = 40, dimensions } = options;
+	const sizeOf = (id) => dimensions?.[id] ?? {
+		width: nodeWidth,
+		height: nodeHeight
+	};
+	const nodeIds = [];
+	for (const el of elements) if (!("source" in el)) nodeIds.push(el.id);
+	if (nodeIds.length === 0) return [...elements];
+	const graph = new Graph();
+	graph.setGraph({
+		rankdir,
+		nodesep: 40,
+		ranksep: 80,
+		edgesep: 20
+	});
+	graph.setDefaultEdgeLabel(() => ({}));
+	for (const id of nodeIds) {
+		const { width, height } = sizeOf(id);
+		graph.setNode(id, {
+			width,
+			height
+		});
+	}
+	for (const el of elements) {
+		if (!("source" in el)) continue;
+		if (el.source === el.target) continue;
+		graph.setEdge(el.source, el.target);
+	}
+	layout(graph);
+	return elements.map((el) => {
+		if ("source" in el) return el;
+		const center = graph.node(el.id);
+		if (!center) return el;
+		const { width, height } = sizeOf(el.id);
+		return {
+			...el,
+			position: {
+				x: center.x - width / 2,
+				y: center.y - height / 2
+			}
+		};
+	});
 }
-const Le = { class: "chart-controls" }, xe = { class: "chart-controls-left" }, Oe = { class: "chart-controls-right" }, Ve = { key: 0 }, Re = { key: 1 }, oe = /* @__PURE__ */ T({
-  __name: "NodeEditor",
-  props: {
-    modelValue: {},
-    nodeContainerClass: { type: [Boolean, null, String, Object, Array], default: "" }
-  },
-  emits: ["update:modelValue"],
-  setup(l, { emit: v }) {
-    const r = v, p = E(!1), n = E([]), u = E(), t = E(""), e = M(
-      () => n.value.findIndex((o) => o.id === t.value)
-    ), a = M({
-      get: () => {
-        const o = l.modelValue;
-        for (const i of o)
-          i.data = { ...i.data }, i.type === "input" ? (i.data.hasInput = !1, i.data.hasOutput = !0) : i.type === "output" ? (i.data.hasInput = !0, i.data.hasOutput = !1) : (i.data.hasInput = !0, i.data.hasOutput = !0), i.class = "vue-flow__node-default", i.type = "source" in i && i.source === i.target ? "selfloop" : "editable";
-        return o;
-      },
-      set: (o) => {
-        r("update:modelValue", JSON.parse(JSON.stringify(o)));
-      }
-    }), { addEdges: s, removeEdges: g } = ve();
-    Z(() => {
-      document.removeEventListener("keypress", $), document.addEventListener("keypress", $);
-    }), ie(() => {
-      document.removeEventListener("keypress", $);
-    });
-    const m = (o) => {
-      u.value = o;
-    };
-    n.value = a.value;
-    const f = (o) => ({
-      [C.Top]: C.Right,
-      [C.Right]: C.Bottom,
-      [C.Bottom]: C.Left,
-      [C.Left]: C.Top
-    })[o], y = () => {
-      if (e.value > -1) {
-        const o = n.value[e.value];
-        if (!o.sourcePosition) return;
-        o.sourcePosition = f(o.sourcePosition), N();
-      }
-    }, h = () => {
-      if (e.value > -1) {
-        const o = n.value[e.value];
-        if (!o.targetPosition) return;
-        o.targetPosition = f(o.targetPosition), N();
-      }
-    }, k = (o) => {
-      window.scrollBy(0, o.deltaY);
-    }, $ = (o) => {
-      p.value && o.ctrlKey == !0 && ((o.key == "+" || o.key == "=") && u.value?.zoomIn(), o.key == "-" && u.value?.zoomOut());
-    }, x = async () => {
-      await u.value?.fitView();
-    }, j = async () => {
-      const o = u.value, i = {};
-      for (const b of n.value) {
-        if ("source" in b) continue;
-        const I = o?.findNode?.(b.id)?.dimensions;
-        I?.width && I?.height && (i[b.id] = { width: I.width, height: I.height });
-      }
-      const d = te(n.value, { dimensions: i }), w = /* @__PURE__ */ new Map();
-      for (const b of d)
-        "source" in b || w.set(b.id, b.position);
-      for (const b of n.value) {
-        if ("source" in b) continue;
-        const I = w.get(b.id);
-        I && (b.position = I);
-      }
-      N(), await L(), await x();
-    }, z = () => {
-      let o = !1, i = { x: Math.random() * 200, y: Math.random() * 200 };
-      if (e.value > -1) {
-        const b = n.value[e.value];
-        b.data?.hasOutput && (i = { x: b.position.x + 200, y: b.position.y + 50 }, o = !0);
-      }
-      const d = n.value.length, w = `node-${d}`;
-      if (n.value.push({
-        id: w,
-        label: "Node " + d,
-        sourcePosition: C.Right,
-        targetPosition: C.Left,
-        class: "vue-flow__node-default",
-        type: "editable",
-        data: {
-          hasInput: !0,
-          hasOutput: !0
-        },
-        position: i
-      }), o) {
-        const b = `edge-${d + 1}`;
-        n.value.push({
-          id: b,
-          source: t.value,
-          target: w,
-          type: "editable",
-          label: `EDGE ${d + 1}`,
-          animated: !0
-        });
-      }
-      N();
-    }, V = (o, i) => {
-      for (let d = 0; d < n.value.length; d++)
-        if (n.value[d].id == i) {
-          n.value[d].label = o;
-          break;
-        }
-      N();
-    }, ne = ({ node: o }) => {
-      t.value = o.id;
-    }, ae = ({ edge: o }) => {
-      t.value = o.id;
-    }, le = async (o) => {
-      const i = n.value.length, d = o.source === o.target, w = {
-        id: `edge-${i}`,
-        source: o.source,
-        target: o.target,
-        type: d ? "selfloop" : "editable",
-        label: "New Edge",
-        interactionWidth: 400,
-        animated: !0
-      };
-      s([w]), await L(), N();
-    }, se = async (o) => {
-      g([o.edge.id]), await L(), N();
-    }, G = async (o) => {
-      g([o]), await L(), N();
-    }, N = () => {
-      r("update:modelValue", JSON.parse(JSON.stringify(n.value)));
-    };
-    return (o, i) => (S(), P("div", {
-      class: ue(["node-editor-wrapper", l.nodeContainerClass]),
-      onContextmenu: i[1] || (i[1] = D(() => {
-      }, ["prevent"])),
-      onMouseover: i[2] || (i[2] = (d) => p.value = !0),
-      onMouseleave: i[3] || (i[3] = (d) => p.value = !1)
-    }, [
-      c("div", Le, [
-        c("div", xe, [
-          c("div", null, [
-            i[4] || (i[4] = c("b", null, "Selected Node:", -1)),
-            de(" " + F(t.value ? t.value : "none"), 1)
-          ])
-        ]),
-        c("div", Oe, [
-          c("div", null, [
-            c("button", {
-              class: "button-default",
-              onClick: z
-            }, "Add Node")
-          ]),
-          c("div", null, [
-            c("button", {
-              class: "button-default",
-              onClick: x
-            }, "Center")
-          ]),
-          c("div", null, [
-            c("button", {
-              class: "button-default",
-              onClick: j
-            }, "Auto-arrange")
-          ]),
-          e.value > -1 ? (S(), P("div", Ve, [
-            c("button", {
-              class: "button-default",
-              onClick: h
-            }, "Shift Input Position")
-          ])) : B("", !0),
-          e.value > -1 ? (S(), P("div", Re, [
-            c("button", {
-              class: "button-default",
-              onClick: y
-            }, "Shift Output Position")
-          ])) : B("", !0)
-        ])
-      ]),
-      n.value && n.value.length ? (S(), H(_(fe), {
-        key: 0,
-        modelValue: n.value,
-        "onUpdate:modelValue": i[0] || (i[0] = (d) => n.value = d),
-        class: "nowheel",
-        "prevent-scrolling": !0,
-        "zoom-on-scroll": !1,
-        "fit-view-on-init": !0,
-        "pan-activation-key-code": null,
-        onConnect: le,
-        onPaneReady: m,
-        onNodeClick: ne,
-        onEdgeClick: ae,
-        onEdgeContextMenu: se,
-        onNodeDragStop: N,
-        onWheel: D(k, ["prevent"])
-      }, {
-        "node-editable": R((d) => [
-          O($e, A(d, {
-            onChange: (w) => V(w, d.id)
-          }), null, 16, ["onChange"])
-        ]),
-        "edge-editable": R((d) => [
-          O(ke, A(d, {
-            onChange: (w) => V(w, d.id),
-            onRemove: (w) => G(d.id)
-          }), null, 16, ["onChange", "onRemove"])
-        ]),
-        "edge-selfloop": R((d) => [
-          O(Ie, A(d, {
-            onChange: (w) => V(w, d.id),
-            onRemove: (w) => G(d.id)
-          }), null, 16, ["onChange", "onRemove"])
-        ]),
-        _: 1
-      }, 8, ["modelValue"])) : B("", !0)
-    ], 34));
-  }
+//#endregion
+//#region src/components/NodeEditor.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "chart-controls" };
+var _hoisted_2 = { class: "chart-controls-left" };
+var _hoisted_3 = { class: "chart-controls-right" };
+var _hoisted_4 = { key: 0 };
+var _hoisted_5 = { key: 1 };
+//#endregion
+//#region src/components/NodeEditor.vue
+var NodeEditor_default = /* @__PURE__ */ defineComponent({
+	__name: "NodeEditor",
+	props: {
+		modelValue: {},
+		nodeContainerClass: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			default: ""
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const hover = ref(false);
+		const vueFlowElements = ref([]);
+		const vueFlowInstance = ref();
+		const activeElementKey = ref("");
+		const activeElementIndex = computed(() => vueFlowElements.value.findIndex((element) => element.id === activeElementKey.value));
+		const elements = computed({
+			get: () => {
+				const items = __props.modelValue;
+				for (const element of items) {
+					element.data = { ...element.data };
+					if (element.type === "input") {
+						element.data.hasInput = false;
+						element.data.hasOutput = true;
+					} else if (element.type === "output") {
+						element.data.hasInput = true;
+						element.data.hasOutput = false;
+					} else {
+						element.data.hasInput = true;
+						element.data.hasOutput = true;
+					}
+					element.class = "vue-flow__node-default";
+					element.type = "source" in element && element.source === element.target ? "selfloop" : "editable";
+				}
+				return items;
+			},
+			set: (newValue) => {
+				emit("update:modelValue", JSON.parse(JSON.stringify(newValue)));
+			}
+		});
+		const { addEdges, removeEdges } = useVueFlow();
+		onMounted(() => {
+			document.removeEventListener("keypress", handleKeypress);
+			document.addEventListener("keypress", handleKeypress);
+		});
+		onBeforeUnmount(() => {
+			document.removeEventListener("keypress", handleKeypress);
+		});
+		const setInstance = (instance) => {
+			vueFlowInstance.value = instance;
+		};
+		vueFlowElements.value = elements.value;
+		const shiftTerminal = (currentTerminal) => {
+			return {
+				[Position$1.Top]: Position$1.Right,
+				[Position$1.Right]: Position$1.Bottom,
+				[Position$1.Bottom]: Position$1.Left,
+				[Position$1.Left]: Position$1.Top
+			}[currentTerminal];
+		};
+		const shiftOutput = () => {
+			if (activeElementIndex.value > -1) {
+				const activeNode = vueFlowElements.value[activeElementIndex.value];
+				if (!activeNode.sourcePosition) return;
+				activeNode.sourcePosition = shiftTerminal(activeNode.sourcePosition);
+				emitElements();
+			}
+		};
+		const shiftInput = () => {
+			if (activeElementIndex.value > -1) {
+				const activeNode = vueFlowElements.value[activeElementIndex.value];
+				if (!activeNode.targetPosition) return;
+				activeNode.targetPosition = shiftTerminal(activeNode.targetPosition);
+				emitElements();
+			}
+		};
+		const onWheel = (event) => {
+			window.scrollBy(0, event.deltaY);
+		};
+		const handleKeypress = (event) => {
+			if (hover.value && event.ctrlKey == true) {
+				if (event.key == "+" || event.key == "=") vueFlowInstance.value?.zoomIn();
+				if (event.key == "-") vueFlowInstance.value?.zoomOut();
+			}
+		};
+		const fitView = async () => {
+			await vueFlowInstance.value?.fitView();
+		};
+		const autoArrange = async () => {
+			const store = vueFlowInstance.value;
+			const dimensions = {};
+			for (const el of vueFlowElements.value) {
+				if ("source" in el) continue;
+				const dims = store?.findNode?.(el.id)?.dimensions;
+				if (dims?.width && dims?.height) dimensions[el.id] = {
+					width: dims.width,
+					height: dims.height
+				};
+			}
+			const laid = autoLayout(vueFlowElements.value, { dimensions });
+			const positionById = /* @__PURE__ */ new Map();
+			for (const el of laid) {
+				if ("source" in el) continue;
+				positionById.set(el.id, el.position);
+			}
+			for (const el of vueFlowElements.value) {
+				if ("source" in el) continue;
+				const position = positionById.get(el.id);
+				if (position) el.position = position;
+			}
+			emitElements();
+			await nextTick();
+			await fitView();
+		};
+		const addNode = () => {
+			let makeEdge = false;
+			let newNodePosition = {
+				x: Math.random() * 200,
+				y: Math.random() * 200
+			};
+			if (activeElementIndex.value > -1) {
+				const activeNode = vueFlowElements.value[activeElementIndex.value];
+				if (activeNode.data?.hasOutput) {
+					newNodePosition = {
+						x: activeNode.position.x + 200,
+						y: activeNode.position.y + 50
+					};
+					makeEdge = true;
+				}
+			}
+			const id = vueFlowElements.value.length;
+			const nodeId = `node-${id}`;
+			vueFlowElements.value.push({
+				id: nodeId,
+				label: "Node " + id,
+				sourcePosition: Position$1.Right,
+				targetPosition: Position$1.Left,
+				class: "vue-flow__node-default",
+				type: "editable",
+				data: {
+					hasInput: true,
+					hasOutput: true
+				},
+				position: newNodePosition
+			});
+			if (makeEdge) {
+				const edgeId = `edge-${id + 1}`;
+				vueFlowElements.value.push({
+					id: edgeId,
+					source: activeElementKey.value,
+					target: nodeId,
+					type: "editable",
+					label: `EDGE ${id + 1}`,
+					animated: true
+				});
+			}
+			emitElements();
+		};
+		const labelChanged = (event, id) => {
+			for (let j = 0; j < vueFlowElements.value.length; j++) if (vueFlowElements.value[j].id == id) {
+				vueFlowElements.value[j].label = event;
+				break;
+			}
+			emitElements();
+		};
+		const handleNodeClick = ({ node }) => {
+			activeElementKey.value = node.id;
+		};
+		const handleEdgeClick = ({ edge }) => {
+			activeElementKey.value = edge.id;
+		};
+		const handleConnect = async (event) => {
+			const id = vueFlowElements.value.length;
+			const isSelfLoop = event.source === event.target;
+			const newEdge = {
+				id: `edge-${id}`,
+				source: event.source,
+				target: event.target,
+				type: isSelfLoop ? "selfloop" : "editable",
+				label: `New Edge`,
+				interactionWidth: 400,
+				animated: true
+			};
+			addEdges([newEdge]);
+			await nextTick();
+			emitElements();
+		};
+		const handleEdgeContextMenu = async (event) => {
+			removeEdges([event.edge.id]);
+			await nextTick();
+			emitElements();
+		};
+		const removeEdge = async (id) => {
+			removeEdges([id]);
+			await nextTick();
+			emitElements();
+		};
+		const emitElements = () => {
+			emit("update:modelValue", JSON.parse(JSON.stringify(vueFlowElements.value)));
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["node-editor-wrapper", __props.nodeContainerClass]),
+				onContextmenu: _cache[1] || (_cache[1] = withModifiers(() => {}, ["prevent"])),
+				onMouseover: _cache[2] || (_cache[2] = ($event) => hover.value = true),
+				onMouseleave: _cache[3] || (_cache[3] = ($event) => hover.value = false)
+			}, [createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createElementVNode("div", null, [_cache[4] || (_cache[4] = createElementVNode("b", null, "Selected Node:", -1)), createTextVNode(" " + toDisplayString(activeElementKey.value ? activeElementKey.value : "none"), 1)])]), createElementVNode("div", _hoisted_3, [
+				createElementVNode("div", null, [createElementVNode("button", {
+					class: "button-default",
+					onClick: addNode
+				}, "Add Node")]),
+				createElementVNode("div", null, [createElementVNode("button", {
+					class: "button-default",
+					onClick: fitView
+				}, "Center")]),
+				createElementVNode("div", null, [createElementVNode("button", {
+					class: "button-default",
+					onClick: autoArrange
+				}, "Auto-arrange")]),
+				activeElementIndex.value > -1 ? (openBlock(), createElementBlock("div", _hoisted_4, [createElementVNode("button", {
+					class: "button-default",
+					onClick: shiftInput
+				}, "Shift Input Position")])) : createCommentVNode("", true),
+				activeElementIndex.value > -1 ? (openBlock(), createElementBlock("div", _hoisted_5, [createElementVNode("button", {
+					class: "button-default",
+					onClick: shiftOutput
+				}, "Shift Output Position")])) : createCommentVNode("", true)
+			])]), vueFlowElements.value && vueFlowElements.value.length ? (openBlock(), createBlock(unref(VueFlow), {
+				key: 0,
+				modelValue: vueFlowElements.value,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vueFlowElements.value = $event),
+				class: "nowheel",
+				"prevent-scrolling": true,
+				"zoom-on-scroll": false,
+				"fit-view-on-init": true,
+				"pan-activation-key-code": null,
+				onConnect: handleConnect,
+				onPaneReady: setInstance,
+				onNodeClick: handleNodeClick,
+				onEdgeClick: handleEdgeClick,
+				onEdgeContextMenu: handleEdgeContextMenu,
+				onNodeDragStop: emitElements,
+				onWheel: withModifiers(onWheel, ["prevent"])
+			}, {
+				"node-editable": withCtx((props) => [createVNode(EditableNode_default, mergeProps(props, { onChange: ($event) => labelChanged($event, props.id) }), null, 16, ["onChange"])]),
+				"edge-editable": withCtx((props) => [createVNode(EditableEdge_default, mergeProps(props, {
+					onChange: ($event) => labelChanged($event, props.id),
+					onRemove: ($event) => removeEdge(props.id)
+				}), null, 16, ["onChange", "onRemove"])]),
+				"edge-selfloop": withCtx((props) => [createVNode(SelfLoopEdge_default, mergeProps(props, {
+					onChange: ($event) => labelChanged($event, props.id),
+					onRemove: ($event) => removeEdge(props.id)
+				}), null, 16, ["onChange", "onRemove"])]),
+				_: 1
+			}, 8, ["modelValue"])) : createCommentVNode("", true)], 34);
+		};
+	}
 });
-function Me(l, v) {
-  const { states: r = [], actions: p = {} } = l, n = [], u = [];
-  for (const [t, e] of Object.entries(p))
-    if (!(e.stateless || !e.allowedStates?.length)) {
-      if (e.selfTransition) {
-        for (const a of e.allowedStates)
-          n.push({
-            id: `${t}-${a}`,
-            source: a,
-            target: a,
-            label: e.label ?? t,
-            data: { actionKey: t },
-            animated: !0,
-            type: "selfloop",
-            interactionWidth: 40
-          });
-        continue;
-      }
-      if (e.nextState)
-        for (const a of e.allowedStates)
-          n.push({
-            id: `${t}-${a}`,
-            source: a,
-            target: e.nextState,
-            // The edge paints the human display label; its identity (the action key) rides in
-            // `data.actionKey`, so relabeling the edge renames the action without re-keying it.
-            label: e.label ?? t,
-            data: { actionKey: t },
-            animated: !0,
-            type: "smoothstep",
-            interactionWidth: 40
-          });
-    }
-  for (let t = 0; t < r.length; t++) {
-    const e = r[t], a = {
-      id: e,
-      label: e,
-      position: v?.[e]?.position ?? { x: 200 * t, y: 100 },
-      targetPosition: v?.[e]?.targetPosition ?? C.Left,
-      sourcePosition: v?.[e]?.sourcePosition ?? C.Right
-    };
-    u.push(a);
-  }
-  return [...n, ...u];
+//#endregion
+//#region src/utils/stateTransforms.ts
+function statesToFlowElements(workflow, layout) {
+	const { states = [], actions = {} } = workflow;
+	const edges = [];
+	const nodes = [];
+	for (const [actionKey, actionDef] of Object.entries(actions)) {
+		if (actionDef.stateless || !actionDef.allowedStates?.length) continue;
+		if (actionDef.selfTransition) {
+			for (const source of actionDef.allowedStates) edges.push({
+				id: `${actionKey}-${source}`,
+				source,
+				target: source,
+				label: actionDef.label ?? actionKey,
+				data: { actionKey },
+				animated: true,
+				type: "selfloop",
+				interactionWidth: 40
+			});
+			continue;
+		}
+		if (!actionDef.nextState) continue;
+		for (const source of actionDef.allowedStates) edges.push({
+			id: `${actionKey}-${source}`,
+			source,
+			target: actionDef.nextState,
+			label: actionDef.label ?? actionKey,
+			data: { actionKey },
+			animated: true,
+			type: "smoothstep",
+			interactionWidth: 40
+		});
+	}
+	for (let index = 0; index < states.length; index++) {
+		const state = states[index];
+		const node = {
+			id: state,
+			label: state,
+			position: layout?.[state]?.position ?? {
+				x: 200 * index,
+				y: 100
+			},
+			targetPosition: layout?.[state]?.targetPosition ?? Position$1.Left,
+			sourcePosition: layout?.[state]?.sourcePosition ?? Position$1.Right
+		};
+		nodes.push(node);
+	}
+	return [...edges, ...nodes];
 }
-function _e(l, v) {
-  const r = {}, p = {}, n = [];
-  for (const e of l) {
-    if ("source" in e) continue;
-    const a = typeof e.label == "string" ? e.label : e.id;
-    r[e.id] = a, n.push(a), e.position && (p[a] = {
-      position: e.position,
-      ...e.targetPosition !== void 0 && { targetPosition: e.targetPosition },
-      ...e.sourcePosition !== void 0 && { sourcePosition: e.sourcePosition }
-    });
-  }
-  const u = {};
-  for (const e of l) {
-    if (!("source" in e)) continue;
-    const a = typeof e.label == "string" ? e.label : e.id, s = e.data?.actionKey ?? a, g = r[e.source] || e.source, m = r[e.target] || e.target, f = e.source === e.target;
-    u[s] ? u[s].allowedStates.push(g) : u[s] = {
-      allowedStates: [g],
-      label: a,
-      selfLoop: f,
-      ...f ? {} : { nextState: m }
-    };
-  }
-  const t = {};
-  for (const [e, a] of Object.entries(u)) {
-    const s = v?.actions?.[e];
-    t[e] = {
-      // Spread existing first so every field the graph does NOT own — clientHandler,
-      // requiredFields and any field added to ActionDefinition later — survives the
-      // round-trip. The graph owns topology (allowedStates/nextState/selfTransition) and the
-      // display label. (Enumerating named fields here previously dropped clientHandler.)
-      ...s,
-      // The edge's label is the display name (decoupled from the key). Fall back to the
-      // existing label, then the key, if an edge ever arrives label-less.
-      label: a.label || s?.label || e,
-      // The graph owns topology only. A self-transition (self-loop) stays in place: mark
-      // `selfTransition`, carry NO `nextState`. A cross-state transition carries `nextState`
-      // and clears any stale self flag (a self-loop redrawn as a normal edge). Explicit
-      // `undefined` on the unused field is dropped by JSON.stringify, so no format churn.
-      allowedStates: a.allowedStates,
-      nextState: a.selfLoop ? void 0 : a.nextState,
-      selfTransition: a.selfLoop ? !0 : void 0
-    };
-  }
-  for (const [e, a] of Object.entries(v?.actions ?? {}))
-    e in u || (a.stateless || !a.allowedStates?.length) && (t[e] = a);
-  return {
-    // Spread existingWorkflow first so every top-level key the graph does NOT own — the
-    // sibling `triggers` map (field-validation triggers), and any WorkflowMeta key added
-    // later — survives the round-trip. The graph owns topology only: states + actions,
-    // overridden below. (Same principle the per-action spread applies above; enumerating
-    // only states+actions here previously dropped `triggers` on every graph edit.)
-    workflow: { ...v, states: n, actions: t },
-    layout: p
-  };
+function flowElementsToStates(nextElements, existingWorkflow) {
+	const idToLabel = {};
+	const nextLayout = {};
+	const stateNames = [];
+	for (const el of nextElements) {
+		if ("source" in el) continue;
+		const label = typeof el.label === "string" ? el.label : el.id;
+		idToLabel[el.id] = label;
+		stateNames.push(label);
+		if (el.position) nextLayout[label] = {
+			position: el.position,
+			...el.targetPosition !== void 0 && { targetPosition: el.targetPosition },
+			...el.sourcePosition !== void 0 && { sourcePosition: el.sourcePosition }
+		};
+	}
+	const transitionGroups = {};
+	for (const el of nextElements) {
+		if (!("source" in el)) continue;
+		const edgeLabel = typeof el.label === "string" ? el.label : el.id;
+		const actionKey = el.data?.actionKey ?? edgeLabel;
+		const sourceLabel = idToLabel[el.source] || el.source;
+		const targetLabel = idToLabel[el.target] || el.target;
+		const isSelf = el.source === el.target;
+		if (!transitionGroups[actionKey]) transitionGroups[actionKey] = {
+			allowedStates: [sourceLabel],
+			label: edgeLabel,
+			selfLoop: isSelf,
+			...isSelf ? {} : { nextState: targetLabel }
+		};
+		else transitionGroups[actionKey].allowedStates.push(sourceLabel);
+	}
+	const nextActions = {};
+	for (const [actionKey, group] of Object.entries(transitionGroups)) {
+		const existing = existingWorkflow?.actions?.[actionKey];
+		nextActions[actionKey] = {
+			...existing,
+			label: group.label || existing?.label || actionKey,
+			allowedStates: group.allowedStates,
+			nextState: group.selfLoop ? void 0 : group.nextState,
+			selfTransition: group.selfLoop ? true : void 0
+		};
+	}
+	for (const [actionKey, actionDef] of Object.entries(existingWorkflow?.actions ?? {})) {
+		if (actionKey in transitionGroups) continue;
+		if (actionDef.stateless || !actionDef.allowedStates?.length) nextActions[actionKey] = actionDef;
+	}
+	return {
+		workflow: {
+			...existingWorkflow,
+			states: stateNames,
+			actions: nextActions
+		},
+		layout: nextLayout
+	};
 }
-const Te = /* @__PURE__ */ T({
-  __name: "StateEditor",
-  props: /* @__PURE__ */ re({
-    nodeContainerClass: { type: [Boolean, null, String, Object, Array], default: "" }
-  }, {
-    modelValue: {},
-    modelModifiers: {},
-    layout: {},
-    layoutModifiers: {}
-  }),
-  emits: ["update:modelValue", "update:layout"],
-  setup(l) {
-    const v = J(l, "modelValue"), r = J(l, "layout");
-    Z(() => {
-      r.value === void 0 && console.warn("[StateEditor] v-model:layout is not bound. Node position changes will not be persisted.");
-    });
-    const p = M({
-      get: () => {
-        if (!v.value) return [];
-        const n = Me(v.value, r.value);
-        return !r.value || Object.keys(r.value).length === 0 ? te(n) : n;
-      },
-      set: (n) => {
-        const { workflow: u, layout: t } = _e(n, v.value);
-        v.value = u, r.value !== void 0 && (r.value = t);
-      }
-    });
-    return (n, u) => (S(), P("div", null, [
-      O(oe, {
-        modelValue: p.value,
-        "onUpdate:modelValue": u[0] || (u[0] = (t) => p.value = t),
-        "node-container-class": l.nodeContainerClass
-      }, null, 8, ["modelValue", "node-container-class"])
-    ]));
-  }
+//#endregion
+//#region src/components/StateEditor.vue
+var StateEditor_default = /* @__PURE__ */ defineComponent({
+	__name: "StateEditor",
+	props: /*@__PURE__*/ mergeModels({ nodeContainerClass: {
+		type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		],
+		default: ""
+	} }, {
+		"modelValue": {},
+		"modelModifiers": {},
+		"layout": {},
+		"layoutModifiers": {}
+	}),
+	emits: ["update:modelValue", "update:layout"],
+	setup(__props) {
+		const workflow = useModel(__props, "modelValue");
+		const layout = useModel(__props, "layout");
+		onMounted(() => {
+			if (layout.value === void 0) console.warn("[StateEditor] v-model:layout is not bound. Node position changes will not be persisted.");
+		});
+		const elements = computed({
+			get: () => {
+				if (!workflow.value) return [];
+				const els = statesToFlowElements(workflow.value, layout.value);
+				return !layout.value || Object.keys(layout.value).length === 0 ? autoLayout(els) : els;
+			},
+			set: (newValue) => {
+				const { workflow: nextWorkflow, layout: nextLayout } = flowElementsToStates(newValue, workflow.value);
+				workflow.value = nextWorkflow;
+				if (layout.value !== void 0) layout.value = nextLayout;
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", null, [createVNode(NodeEditor_default, {
+				modelValue: elements.value,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => elements.value = $event),
+				"node-container-class": __props.nodeContainerClass
+			}, null, 8, ["modelValue", "node-container-class"])]);
+		};
+	}
 });
-function je(l) {
-  l.component("NodeEditor", oe), l.component("StateEditor", Te);
+//#endregion
+//#region src/index.ts
+/**
+* Install all Node Editor components
+* @param app - Vue app instance
+* @public
+*/
+function install(app) {
+	app.component("NodeEditor", NodeEditor_default);
+	app.component("StateEditor", StateEditor_default);
 }
-export {
-  oe as NodeEditor,
-  Te as StateEditor,
-  je as install
-};
-//# sourceMappingURL=node-editor.js.map
+//#endregion
+export { NodeEditor_default as NodeEditor, Position, StateEditor_default as StateEditor, install };
+
+//# sourceMappingURL=node-editor.js.map