@loopstack/loopstack-studio 0.28.0 → 0.29.1

package/dist/features/debug/components/workflow-flow/StateNode.js

@@ -2,110 +2,185 @@ import { cn } from "../../../../lib/utils.js";
 import { Badge } from "../../../../components/ui/badge.js";
 import { Position } from "../../../../node_modules/@xyflow/system/dist/esm/index.js";
 import { Handle } from "../../../../node_modules/@xyflow/react/dist/esm/index.js";
+import { NODE_HEIGHT, NODE_WIDTH } from "../../lib/flow-types.js";
 import { c } from "react/compiler-runtime";
 import React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var HIDDEN_HANDLE = "!bg-muted-foreground/30 !h-3 !w-1 !rounded-sm opacity-0", HIDDEN_HANDLE_WIDE = "!bg-muted-foreground/30 !h-1 !w-3 !rounded-sm opacity-0";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+var HIDDEN_HANDLE = "!border-none !bg-muted-foreground/30 !h-3 !w-3 !min-h-0 !min-w-0 !rounded-sm opacity-0";
 function getNodeClassName(e) {
 	return e.isCurrent ? "border-primary shadow-primary/20 bg-primary/5 ring-primary/30 z-10 shadow-lg ring-4" : e.isEnd ? "border-green-500/30 bg-green-500/10" : e.isStart ? "border-blue-500/30 bg-blue-500/10" : e.isVisited ? "border-border/60 bg-muted/40" : `border-border/40 bg-card/60 ${e.forceVisible ? "opacity-100" : "opacity-80 hover:opacity-100"}`;
 }
 function getLabelClassName(e) {
 	return e.isCurrent ? "text-primary font-semibold" : e.isVisited ? "text-foreground" : "text-muted-foreground";
 }
-function getPositions(e) {
-	let l = e === "LR";
-	return {
-		target: l ? Position.Left : Position.Top,
-		source: l ? Position.Right : Position.Bottom,
-		backEdge: l ? Position.Bottom : Position.Right
-	};
-}
-var StateNode = (l) => {
-	let u = c(29), { data: f } = l, g;
-	u[0] === f.direction ? g = u[1] : (g = getPositions(f.direction), u[0] = f.direction, u[1] = g);
-	let _ = g, v;
-	u[2] === f ? v = u[3] : (v = cn("relative flex min-w-32 flex-col items-center gap-2 rounded-xl border px-5 py-3 shadow-sm transition-all duration-300", getNodeClassName(f)), u[2] = f, u[3] = v);
-	let y;
-	u[4] === f.isCurrent ? y = u[5] : (y = f.isCurrent && /* @__PURE__ */ jsx(CurrentIndicator, {}), u[4] = f.isCurrent, u[5] = y);
-	let b;
-	u[6] === _.target ? b = u[7] : (b = /* @__PURE__ */ jsx(Handle, {
+function TbHandles() {
+	let e = c(4), d;
+	e[0] === Symbol.for("react.memo_cache_sentinel") ? (d = /* @__PURE__ */ jsx(Handle, {
 		type: "target",
-		position: _.target,
-		className: HIDDEN_HANDLE
-	}), u[6] = _.target, u[7] = b);
-	let x;
-	u[8] === _.source ? x = u[9] : (x = /* @__PURE__ */ jsx(Handle, {
+		id: "tb-t",
+		position: Position.Top,
+		className: HIDDEN_HANDLE,
+		style: {
+			left: "50%",
+			transform: "translate(-50%, -50%)"
+		}
+	}), e[0] = d) : d = e[0];
+	let m;
+	e[1] === Symbol.for("react.memo_cache_sentinel") ? (m = /* @__PURE__ */ jsx(Handle, {
 		type: "source",
-		position: _.source,
-		className: HIDDEN_HANDLE
-	}), u[8] = _.source, u[9] = x);
-	let S, C;
-	u[10] === _.backEdge ? (S = u[11], C = u[12]) : (S = /* @__PURE__ */ jsx(Handle, {
+		id: "tb-s",
+		position: Position.Bottom,
+		className: HIDDEN_HANDLE,
+		style: {
+			left: "50%",
+			transform: "translate(-50%, 50%)"
+		}
+	}), e[1] = m) : m = e[1];
+	let h;
+	e[2] === Symbol.for("react.memo_cache_sentinel") ? (h = /* @__PURE__ */ jsx(Handle, {
+		type: "target",
+		id: "tb-t-self",
+		position: Position.Top,
+		className: HIDDEN_HANDLE,
+		style: {
+			left: "78%",
+			transform: "translate(-50%, -50%)"
+		}
+	}), e[2] = h) : h = e[2];
+	let g;
+	return e[3] === Symbol.for("react.memo_cache_sentinel") ? (g = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		d,
+		m,
+		h,
+		/* @__PURE__ */ jsx(Handle, {
+			type: "source",
+			id: "tb-s-self",
+			position: Position.Bottom,
+			className: HIDDEN_HANDLE,
+			style: {
+				left: "22%",
+				transform: "translate(-50%, 50%)"
+			}
+		})
+	] }), e[3] = g) : g = e[3], g;
+}
+function LrHandles() {
+	let e = c(4), d;
+	e[0] === Symbol.for("react.memo_cache_sentinel") ? (d = /* @__PURE__ */ jsx(Handle, {
+		type: "target",
+		id: "lr-l",
+		position: Position.Left,
+		className: HIDDEN_HANDLE,
+		style: {
+			top: "50%",
+			transform: "translate(-50%, -50%)"
+		}
+	}), e[0] = d) : d = e[0];
+	let m;
+	e[1] === Symbol.for("react.memo_cache_sentinel") ? (m = /* @__PURE__ */ jsx(Handle, {
 		type: "source",
-		id: "bottom-source",
-		position: _.backEdge,
-		className: HIDDEN_HANDLE_WIDE
-	}), C = /* @__PURE__ */ jsx(Handle, {
+		id: "lr-r",
+		position: Position.Right,
+		className: HIDDEN_HANDLE,
+		style: {
+			top: "50%",
+			transform: "translate(50%, -50%)"
+		}
+	}), e[1] = m) : m = e[1];
+	let h;
+	e[2] === Symbol.for("react.memo_cache_sentinel") ? (h = /* @__PURE__ */ jsx(Handle, {
 		type: "target",
-		id: "bottom-target",
-		position: _.backEdge,
-		className: HIDDEN_HANDLE_WIDE
-	}), u[10] = _.backEdge, u[11] = S, u[12] = C);
-	let w;
-	u[13] === f ? w = u[14] : (w = cn("text-sm font-medium tracking-tight", getLabelClassName(f)), u[13] = f, u[14] = w);
-	let T;
-	u[15] !== f.label || u[16] !== w ? (T = /* @__PURE__ */ jsx("span", {
-		className: w,
-		children: f.label
-	}), u[15] = f.label, u[16] = w, u[17] = T) : T = u[17];
-	let E;
-	u[18] === f ? E = u[19] : (E = /* @__PURE__ */ jsx(StatusBadges, { data: f }), u[18] = f, u[19] = E);
-	let D;
-	return u[20] !== E || u[21] !== v || u[22] !== y || u[23] !== b || u[24] !== x || u[25] !== S || u[26] !== C || u[27] !== T ? (D = /* @__PURE__ */ jsxs("div", {
-		className: v,
+		id: "lr-l-self",
+		position: Position.Left,
+		className: HIDDEN_HANDLE,
+		style: {
+			top: "72%",
+			transform: "translate(-50%, -50%)"
+		}
+	}), e[2] = h) : h = e[2];
+	let g;
+	return e[3] === Symbol.for("react.memo_cache_sentinel") ? (g = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		d,
+		m,
+		h,
+		/* @__PURE__ */ jsx(Handle, {
+			type: "source",
+			id: "lr-r-self",
+			position: Position.Right,
+			className: HIDDEN_HANDLE,
+			style: {
+				top: "28%",
+				transform: "translate(50%, -50%)"
+			}
+		})
+	] }), e[3] = g) : g = e[3], g;
+}
+var StateNode = (d) => {
+	let f = c(20), { data: p } = d, m = p.direction === "TB", h;
+	f[0] === p ? h = f[1] : (h = cn("relative box-border flex w-full flex-col items-center justify-center gap-2 rounded-xl border px-3 py-2.5 shadow-sm transition-all duration-300", getNodeClassName(p)), f[0] = p, f[1] = h);
+	let g;
+	f[2] === Symbol.for("react.memo_cache_sentinel") ? (g = {
+		width: 208,
+		minHeight: 104
+	}, f[2] = g) : g = f[2];
+	let _;
+	f[3] === p.isCurrent ? _ = f[4] : (_ = p.isCurrent && /* @__PURE__ */ jsx(CurrentIndicator, {}), f[3] = p.isCurrent, f[4] = _);
+	let v;
+	f[5] === m ? v = f[6] : (v = jsx(m ? TbHandles : LrHandles, {}), f[5] = m, f[6] = v);
+	let y;
+	f[7] === p ? y = f[8] : (y = cn("w-full truncate px-0.5 text-center text-sm font-medium tracking-tight", getLabelClassName(p)), f[7] = p, f[8] = y);
+	let b;
+	f[9] !== p.label || f[10] !== y ? (b = /* @__PURE__ */ jsx("span", {
+		className: y,
+		title: p.label,
+		children: p.label
+	}), f[9] = p.label, f[10] = y, f[11] = b) : b = f[11];
+	let x;
+	f[12] === p ? x = f[13] : (x = /* @__PURE__ */ jsx(StatusBadges, { data: p }), f[12] = p, f[13] = x);
+	let S;
+	return f[14] !== h || f[15] !== _ || f[16] !== v || f[17] !== b || f[18] !== x ? (S = /* @__PURE__ */ jsxs("div", {
+		className: h,
+		style: g,
 		children: [
-			y,
+			_,
+			v,
 			b,
-			x,
-			S,
-			C,
-			T,
-			E
+			x
 		]
-	}), u[20] = E, u[21] = v, u[22] = y, u[23] = b, u[24] = x, u[25] = S, u[26] = C, u[27] = T, u[28] = D) : D = u[28], D;
+	}), f[14] = h, f[15] = _, f[16] = v, f[17] = b, f[18] = x, f[19] = S) : S = f[19], S;
 }, CurrentIndicator = () => {
-	let e = c(1), l;
-	return e[0] === Symbol.for("react.memo_cache_sentinel") ? (l = /* @__PURE__ */ jsxs("span", {
+	let e = c(1), d;
+	return e[0] === Symbol.for("react.memo_cache_sentinel") ? (d = /* @__PURE__ */ jsxs("span", {
 		className: "absolute -top-1 -right-1 flex h-3 w-3",
 		children: [/* @__PURE__ */ jsx("span", { className: "bg-primary/50 absolute inline-flex h-full w-full animate-ping rounded-full opacity-75" }), /* @__PURE__ */ jsx("span", { className: "bg-primary relative inline-flex h-3 w-3 rounded-full" })]
-	}), e[0] = l) : l = e[0], l;
+	}), e[0] = d) : d = e[0], d;
 }, StatusBadges = (e) => {
-	let u = c(10), { data: d } = e, f;
-	u[0] === d.visitCount ? f = u[1] : (f = d.visitCount > 1 && /* @__PURE__ */ jsxs(Badge, {
+	let f = c(10), { data: p } = e, m;
+	f[0] === p.visitCount ? m = f[1] : (m = p.visitCount > 1 && /* @__PURE__ */ jsxs(Badge, {
 		variant: "secondary",
-		className: "bg-secondary/50 text-secondary-foreground hover:bg-secondary/70 h-5 px-1.5 text-[10px]",
-		children: [d.visitCount, "x"]
-	}), u[0] = d.visitCount, u[1] = f);
-	let p;
-	u[2] === d.isEnd ? p = u[3] : (p = d.isEnd && /* @__PURE__ */ jsx(Badge, {
+		className: "bg-secondary/50 text-secondary-foreground hover:bg-secondary/70 h-5 shrink-0 px-1.5 text-[10px]",
+		children: [p.visitCount, "x"]
+	}), f[0] = p.visitCount, f[1] = m);
+	let h;
+	f[2] === p.isEnd ? h = f[3] : (h = p.isEnd && /* @__PURE__ */ jsx(Badge, {
 		variant: "outline",
-		className: "h-5 border-green-500/30 bg-green-500/5 px-1.5 text-[10px] text-green-600",
+		className: "h-5 shrink-0 border-green-500/30 bg-green-500/5 px-1.5 text-[10px] text-green-600",
 		children: "End"
-	}), u[2] = d.isEnd, u[3] = p);
-	let m;
-	u[4] === d.isStart ? m = u[5] : (m = d.isStart && /* @__PURE__ */ jsx(Badge, {
+	}), f[2] = p.isEnd, f[3] = h);
+	let g;
+	f[4] === p.isStart ? g = f[5] : (g = p.isStart && /* @__PURE__ */ jsx(Badge, {
 		variant: "outline",
-		className: "h-5 border-blue-500/30 bg-blue-500/5 px-1.5 text-[10px] text-blue-600",
+		className: "h-5 shrink-0 border-blue-500/30 bg-blue-500/5 px-1.5 text-[10px] text-blue-600",
 		children: "Start"
-	}), u[4] = d.isStart, u[5] = m);
-	let h;
-	return u[6] !== f || u[7] !== p || u[8] !== m ? (h = /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center gap-1.5",
+	}), f[4] = p.isStart, f[5] = g);
+	let _;
+	return f[6] !== m || f[7] !== h || f[8] !== g ? (_ = /* @__PURE__ */ jsxs("div", {
+		className: "flex max-w-full flex-wrap items-center justify-center gap-1",
 		children: [
-			f,
-			p,
-			m
+			m,
+			h,
+			g
 		]
-	}), u[6] = f, u[7] = p, u[8] = m, u[9] = h) : h = u[9], h;
+	}), f[6] = m, f[7] = h, f[8] = g, f[9] = _) : _ = f[9], _;
 }, StateNode_default = StateNode;
 export { StateNode_default as default };

package/dist/features/debug/components/workflow-flow/WorkflowGraph.js

@@ -5,42 +5,54 @@ import React, { useEffect, useRef } from "react";
 function countTransitions(e) {
 	return e ? getTransitions(e).length : 0;
 }
-var WorkflowGraph_default = (l) => {
-	let u = c(24), { parentWorkflow: d, workflow: f, workflowConfig: p, onGraphReady: m, onLoadingChange: h, direction: g } = l, _ = g === void 0 ? "LR" : g, v = useWorkflow(f.id), y = v.data, b = useWorkflowCheckpoints(f.id), x;
-	u[0] === b.data ? x = u[1] : (x = b.data ?? [], u[0] = b.data, u[1] = x);
-	let S = x, C = useRef(null), w = v.isLoading || b.isLoading, T, E;
-	u[2] !== w || u[3] !== h || u[4] !== f.id ? (T = () => {
-		h(f.id, w);
-	}, E = [
-		f.id,
-		w,
-		h
-	], u[2] = w, u[3] = h, u[4] = f.id, u[5] = T, u[6] = E) : (T = u[5], E = u[6]), useEffect(T, E);
-	let D;
-	u[7] !== S || u[8] !== _ || u[9] !== w || u[10] !== m || u[11] !== d || u[12] !== f.id || u[13] !== p || u[14] !== y ? (D = () => {
-		if (w) return;
-		let e = p ? getTransitions(p) : [], a = JSON.stringify({
-			p: countTransitions(d),
-			w: countTransitions(y),
+function countExtraTransitions(e) {
+	return e?.length ? e.reduce((e, o) => e + countTransitions(o), 0) : 0;
+}
+var WorkflowGraph_default = (u) => {
+	let d = c(29), { parentWorkflow: f, workflow: p, workflowConfig: m, extraTransitionSources: h, onGraphReady: g, onLoadingChange: _, direction: v, hideSameStateTransitions: y } = u, b = v === void 0 ? "LR" : v, x = y === void 0 ? !1 : y, S = useWorkflow(p.id), C = S.data, w = useWorkflowCheckpoints(p.id), T;
+	d[0] === w.data ? T = d[1] : (T = w.data ?? [], d[0] = w.data, d[1] = T);
+	let E = T, D = useRef(null), O = S.isLoading || w.isLoading, k, A;
+	d[2] !== O || d[3] !== _ || d[4] !== p.id ? (k = () => {
+		_(p.id, O);
+	}, A = [
+		p.id,
+		O,
+		_
+	], d[2] = O, d[3] = _, d[4] = p.id, d[5] = k, d[6] = A) : (k = d[5], A = d[6]), useEffect(k, A);
+	let j;
+	d[7] !== E || d[8] !== b || d[9] !== h || d[10] !== x || d[11] !== O || d[12] !== g || d[13] !== f || d[14] !== p.id || d[15] !== m || d[16] !== C ? (j = () => {
+		if (O) return;
+		let e = m ? getTransitions(m) : [], o = JSON.stringify({
+			p: countTransitions(f),
+			w: countTransitions(C),
+			x: countExtraTransitions(h),
 			c: e.length,
-			checkpoints: S.length,
-			place: y?.place
+			checkpoints: E.length,
+			place: C?.place,
+			direction: b,
+			hideSelf: x
 		});
-		if (a !== C.current) {
-			C.current = a;
-			let { nodes: o, edges: s } = buildWorkflowGraph(d, y, f.id, e, _, !1, S);
-			m(f.id, o, s);
+		if (o !== D.current) {
+			D.current = o;
+			let { nodes: s, edges: l } = buildWorkflowGraph(f, C, p.id, e, b, !1, E, {
+				hideSameStateTransitions: x,
+				extraTransitionSources: h
+			});
+			g(p.id, s, l);
 		}
-	}, u[7] = S, u[8] = _, u[9] = w, u[10] = m, u[11] = d, u[12] = f.id, u[13] = p, u[14] = y, u[15] = D) : D = u[15];
-	let O;
-	return u[16] !== S || u[17] !== w || u[18] !== m || u[19] !== d || u[20] !== f || u[21] !== p || u[22] !== y ? (O = [
-		d,
+	}, d[7] = E, d[8] = b, d[9] = h, d[10] = x, d[11] = O, d[12] = g, d[13] = f, d[14] = p.id, d[15] = m, d[16] = C, d[17] = j) : j = d[17];
+	let M;
+	return d[18] !== E || d[19] !== b || d[20] !== h || d[21] !== x || d[22] !== O || d[23] !== g || d[24] !== f || d[25] !== p || d[26] !== m || d[27] !== C ? (M = [
 		f,
-		y,
-		S,
 		p,
+		C,
+		E,
 		m,
-		w
-	], u[16] = S, u[17] = w, u[18] = m, u[19] = d, u[20] = f, u[21] = p, u[22] = y, u[23] = O) : O = u[23], useEffect(D, O), null;
+		g,
+		O,
+		b,
+		x,
+		h
+	], d[18] = E, d[19] = b, d[20] = h, d[21] = x, d[22] = O, d[23] = g, d[24] = f, d[25] = p, d[26] = m, d[27] = C, d[28] = M) : M = d[28], useEffect(j, M), null;
 };
 export { WorkflowGraph_default as default };

package/dist/features/debug/components/workflow-flow/WorkflowTransitionEdge.js

@@ -6,90 +6,91 @@ import React from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Wrench } from "lucide-react";
 var TransitionLabel = (e) => {
-	let t = c(12), { transitionId: n, tools: r, condition: a, isExecuted: o, forceVisible: d } = e, f = `flex flex-col items-center gap-0.5 rounded-full border px-2 py-0.5 shadow-sm transition-all hover:z-50 hover:scale-105 bg-background/95 backdrop-blur-[2px] text-muted-foreground border-border/40 hover:border-border/80 ${o || d ? "opacity-100" : "opacity-60 hover:opacity-100"}`, p;
-	t[0] === n ? p = t[1] : (p = /* @__PURE__ */ jsx("span", {
+	let n = c(12), { transitionId: r, tools: i, condition: o, isExecuted: s, forceVisible: d } = e, f = `flex flex-col items-center gap-0.5 rounded-full border px-2 py-0.5 shadow-sm transition-all hover:z-50 hover:scale-105 bg-background/95 backdrop-blur-[2px] text-muted-foreground border-border/40 hover:border-border/80 ${s || d ? "opacity-100" : "opacity-60 hover:opacity-100"}`, p;
+	n[0] === r ? p = n[1] : (p = /* @__PURE__ */ jsx("span", {
 		className: "text-[10px] font-semibold leading-tight tracking-tight",
-		children: n
-	}), t[0] = n, t[1] = p);
+		children: r
+	}), n[0] = r, n[1] = p);
 	let m;
-	t[2] !== o || t[3] !== r ? (m = r && /* @__PURE__ */ jsxs("div", {
-		className: `flex items-center gap-1 rounded-full px-1.5 py-[1px] text-[9px] ${o ? "bg-primary/5 text-primary" : "bg-muted/50 text-muted-foreground"}`,
+	n[2] !== s || n[3] !== i ? (m = i && /* @__PURE__ */ jsxs("div", {
+		className: `flex items-center gap-1 rounded-full px-1.5 py-[1px] text-[9px] ${s ? "bg-primary/5 text-primary" : "bg-muted/50 text-muted-foreground"}`,
 		children: [/* @__PURE__ */ jsx(Wrench, { className: "h-2.5 w-2.5 opacity-70" }), /* @__PURE__ */ jsx("span", {
 			className: "max-w-[150px] truncate font-mono font-medium",
-			children: r
+			children: i
 		})]
-	}), t[2] = o, t[3] = r, t[4] = m) : m = t[4];
+	}), n[2] = s, n[3] = i, n[4] = m) : m = n[4];
 	let h;
-	t[5] === a ? h = t[6] : (h = a && /* @__PURE__ */ jsx("span", {
+	n[5] === o ? h = n[6] : (h = o && /* @__PURE__ */ jsx("span", {
 		className: "max-w-[150px] truncate font-mono text-[8px] tracking-tighter opacity-70",
-		children: a
-	}), t[5] = a, t[6] = h);
+		children: o
+	}), n[5] = o, n[6] = h);
 	let g;
-	return t[7] !== f || t[8] !== p || t[9] !== m || t[10] !== h ? (g = /* @__PURE__ */ jsxs("div", {
+	return n[7] !== f || n[8] !== p || n[9] !== m || n[10] !== h ? (g = /* @__PURE__ */ jsxs("div", {
 		className: f,
 		children: [
 			p,
 			m,
 			h
 		]
-	}), t[7] = f, t[8] = p, t[9] = m, t[10] = h, t[11] = g) : g = t[11], g;
-}, WorkflowTransitionEdge_default = (a) => {
-	let u = c(39), { sourceX: f, sourceY: m, targetX: h, targetY: g, sourcePosition: _, targetPosition: v, style: y, markerEnd: b, data: x } = a, S;
+	}), n[7] = f, n[8] = p, n[9] = m, n[10] = h, n[11] = g) : g = n[11], g;
+}, WorkflowTransitionEdge_default = (o) => {
+	let u = c(43), { sourceX: f, sourceY: m, targetX: h, targetY: g, sourcePosition: _, targetPosition: v, style: y, markerEnd: b, data: x } = o, S;
 	u[0] === y ? S = u[1] : (S = y === void 0 ? {} : y, u[0] = y, u[1] = S);
-	let C = S, w, T, E, D, O, k, A, j;
+	let C = S, w, T, E, D, O, k, A, j, M;
 	if (u[2] !== x || u[3] !== _ || u[4] !== f || u[5] !== m || u[6] !== v || u[7] !== h || u[8] !== g) {
-		let { id: e, isExecuted: t, isSelfLoop: i, isBackEdge: a, forceVisible: o, call: s, condition: l } = x ?? {};
-		j = e, D = t === void 0 ? !1 : t;
-		let d = i === void 0 ? !1 : i, y = a === void 0 ? !1 : a;
-		T = o === void 0 ? !1 : o, {path: w, labelX: O, labelY: k} = resolveEdgePath({
+		let { id: e, isExecuted: n, isSelfLoop: a, forceVisible: o, call: s, condition: l } = x ?? {};
+		M = e, D = n === void 0 ? !1 : n, O = a === void 0 ? !1 : a, T = o === void 0 ? !1 : o, {path: w, labelX: k, labelY: A} = resolveEdgePath({
 			sourceX: f,
 			sourceY: m,
 			targetX: h,
 			targetY: g,
 			sourcePosition: _,
 			targetPosition: v
-		}, {
-			isSelfLoop: d,
-			isBackEdge: y
-		}), E = l ? formatCondition(l) : null, A = s?.map(_temp).join(", "), u[2] = x, u[3] = _, u[4] = f, u[5] = m, u[6] = v, u[7] = h, u[8] = g, u[9] = w, u[10] = T, u[11] = E, u[12] = D, u[13] = O, u[14] = k, u[15] = A, u[16] = j;
-	} else w = u[9], T = u[10], E = u[11], D = u[12], O = u[13], k = u[14], A = u[15], j = u[16];
-	let M = A;
-	if (!(j || M || E)) {
-		let t;
-		return u[17] !== w || u[18] !== b || u[19] !== C ? (t = /* @__PURE__ */ jsx(BaseEdge, {
+		}, { isSelfLoop: O }), E = l ? formatCondition(l) : null, j = s?.map(_temp).join(", "), u[2] = x, u[3] = _, u[4] = f, u[5] = m, u[6] = v, u[7] = h, u[8] = g, u[9] = w, u[10] = T, u[11] = E, u[12] = D, u[13] = O, u[14] = k, u[15] = A, u[16] = j, u[17] = M;
+	} else w = u[9], T = u[10], E = u[11], D = u[12], O = u[13], k = u[14], A = u[15], j = u[16], M = u[17];
+	let N = j, P = M || N || E, F;
+	u[18] !== O || u[19] !== C ? (F = O ? {
+		...C ?? {},
+		strokeLinecap: "round",
+		strokeLinejoin: "round"
+	} : C ?? {}, u[18] = O, u[19] = C, u[20] = F) : F = u[20];
+	let I = F;
+	if (!P) {
+		let n;
+		return u[21] !== w || u[22] !== I || u[23] !== b ? (n = /* @__PURE__ */ jsx(BaseEdge, {
 			path: w,
 			markerEnd: b,
-			style: C
-		}), u[17] = w, u[18] = b, u[19] = C, u[20] = t) : t = u[20], t;
+			style: I
+		}), u[21] = w, u[22] = I, u[23] = b, u[24] = n) : n = u[24], n;
 	}
-	let N;
-	u[21] !== w || u[22] !== b || u[23] !== C ? (N = /* @__PURE__ */ jsx(BaseEdge, {
+	let L;
+	u[25] !== w || u[26] !== I || u[27] !== b ? (L = /* @__PURE__ */ jsx(BaseEdge, {
 		path: w,
 		markerEnd: b,
-		style: C
-	}), u[21] = w, u[22] = b, u[23] = C, u[24] = N) : N = u[24];
-	let P = `translate(-50%, -50%) translate(${O}px,${k}px)`, F;
-	u[25] === P ? F = u[26] : (F = {
+		style: I
+	}), u[25] = w, u[26] = I, u[27] = b, u[28] = L) : L = u[28];
+	let R = `translate(-50%, -50%) translate(${k}px,${A}px)`, z;
+	u[29] === R ? z = u[30] : (z = {
 		position: "absolute",
-		transform: P,
+		transform: R,
 		pointerEvents: "all"
-	}, u[25] = P, u[26] = F);
-	let I = j ?? "", L;
-	u[27] !== T || u[28] !== E || u[29] !== D || u[30] !== I || u[31] !== M ? (L = /* @__PURE__ */ jsx(TransitionLabel, {
-		transitionId: I,
-		tools: M,
+	}, u[29] = R, u[30] = z);
+	let B = M ?? "", V;
+	u[31] !== T || u[32] !== E || u[33] !== D || u[34] !== B || u[35] !== N ? (V = /* @__PURE__ */ jsx(TransitionLabel, {
+		transitionId: B,
+		tools: N,
 		condition: E,
 		isExecuted: D,
 		forceVisible: T
-	}), u[27] = T, u[28] = E, u[29] = D, u[30] = I, u[31] = M, u[32] = L) : L = u[32];
-	let R;
-	u[33] !== F || u[34] !== L ? (R = /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx("div", {
-		style: F,
+	}), u[31] = T, u[32] = E, u[33] = D, u[34] = B, u[35] = N, u[36] = V) : V = u[36];
+	let H;
+	u[37] !== z || u[38] !== V ? (H = /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx("div", {
+		style: z,
 		className: "nodrag nopan",
-		children: L
-	}) }), u[33] = F, u[34] = L, u[35] = R) : R = u[35];
-	let z;
-	return u[36] !== N || u[37] !== R ? (z = /* @__PURE__ */ jsxs(Fragment$1, { children: [N, R] }), u[36] = N, u[37] = R, u[38] = z) : z = u[38], z;
+		children: V
+	}) }), u[37] = z, u[38] = V, u[39] = H) : H = u[39];
+	let U;
+	return u[40] !== H || u[41] !== L ? (U = /* @__PURE__ */ jsxs(Fragment$1, { children: [L, H] }), u[40] = H, u[41] = L, u[42] = U) : U = u[42], U;
 };
 function _temp(e) {
 	return e.tool;

package/dist/features/debug/lib/edge-paths.js

@@ -1,40 +1,55 @@
 import { Position, getSmoothStepPath } from "../../../node_modules/@xyflow/system/dist/esm/index.js";
-var SELF_LOOP_OFFSET = 75, SELF_LOOP_EXTEND = 20, SELF_LOOP_NODE_W = 130, SELF_LOOP_NODE_H = 70;
-function selfLoopPath(n, s, c) {
-	if (c === Position.Bottom || c === Position.Top) {
-		let e = n, a = s - SELF_LOOP_NODE_H;
-		return {
-			path: `M ${n} ${s} C ${n + SELF_LOOP_OFFSET} ${s + SELF_LOOP_EXTEND}, ${e + SELF_LOOP_OFFSET} ${a - SELF_LOOP_EXTEND}, ${e} ${a}`,
-			labelX: n + SELF_LOOP_OFFSET + 8,
-			labelY: (s + a) / 2
-		};
-	}
-	let l = n - SELF_LOOP_NODE_W, u = s;
+import { NODE_HEIGHT, NODE_WIDTH } from "./flow-types.js";
+var CLEAR = 22, HALF_W = 208 / 2, HALF_H = 104 / 2;
+function selfLoopPath(r) {
+	let { sourceX: i, sourceY: a, targetX: o, targetY: s, sourcePosition: c, targetPosition: u } = r;
+	if (c === Position.Bottom && u === Position.Top) return tbSelfLoopRight(i, a, o, s);
+	if (c === Position.Right && u === Position.Left) return lrSelfLoopBelow(i, a, o, s);
+	let [d, f, p] = getSmoothStepPath({
+		...r,
+		borderRadius: 14
+	});
 	return {
-		path: `M ${n} ${s} C ${n + SELF_LOOP_EXTEND} ${s + SELF_LOOP_OFFSET}, ${l - SELF_LOOP_EXTEND} ${u + SELF_LOOP_OFFSET}, ${l} ${u}`,
-		labelX: (n + l) / 2,
-		labelY: s + SELF_LOOP_OFFSET + 8
+		path: d,
+		labelX: f,
+		labelY: p
 	};
 }
-var BACK_EDGE_MIN_OFFSET = 60;
-function backEdgePath(n, r, i, a, o) {
-	if (o === Position.Bottom) {
-		let e = Math.abs(n - i), o = Math.max(e * .3, BACK_EDGE_MIN_OFFSET);
-		return {
-			path: `M ${n} ${r} C ${n} ${r + o}, ${i} ${a + o}, ${i} ${a}`,
-			labelX: (n + i) / 2,
-			labelY: Math.max(r, a) + o + 10
-		};
-	}
-	let s = Math.abs(r - a), l = Math.max(s * .3, BACK_EDGE_MIN_OFFSET);
+function tbSelfLoopRight(e, n, r, i) {
+	let s = (e + r) / 2 + HALF_W + CLEAR, c = n + 16, l = i - 28;
 	return {
-		path: `M ${n} ${r} C ${n + l} ${r}, ${i + l} ${a}, ${i} ${a}`,
-		labelX: Math.max(n, i) + l + 10,
-		labelY: (r + a) / 2
+		path: [
+			`M ${e} ${n}`,
+			`L ${e} ${c}`,
+			`L ${s} ${c}`,
+			`L ${s} ${l}`,
+			`L ${r} ${l}`,
+			`L ${r} ${i}`
+		].join(" "),
+		labelX: s + 14,
+		labelY: (c + l) / 2
+	};
+}
+function lrSelfLoopBelow(e, n, r, i) {
+	let o = (n + i) / 2 + HALF_H + CLEAR, c = e + 16, l = r - 16;
+	return {
+		path: [
+			`M ${e} ${n}`,
+			`L ${c} ${n}`,
+			`L ${c} ${o}`,
+			`L ${l} ${o}`,
+			`L ${l} ${i}`,
+			`L ${r} ${i}`
+		].join(" "),
+		labelX: (c + l) / 2,
+		labelY: o + 18
 	};
 }
 function forwardEdgePath(e) {
-	let [r, i, a] = getSmoothStepPath(e);
+	let [r, i, a] = getSmoothStepPath({
+		...e,
+		borderRadius: 14
+	});
 	return {
 		path: r,
 		labelX: i,
@@ -42,6 +57,6 @@ function forwardEdgePath(e) {
 	};
 }
 function resolveEdgePath(e, n) {
-	return n.isSelfLoop ? selfLoopPath(e.sourceX, e.sourceY, e.sourcePosition) : n.isBackEdge ? backEdgePath(e.sourceX, e.sourceY, e.targetX, e.targetY, e.sourcePosition) : forwardEdgePath(e);
+	return n.isSelfLoop ? selfLoopPath(e) : forwardEdgePath(e);
 }
 export { resolveEdgePath };

package/dist/features/debug/lib/flow-types.js

@@ -0,0 +1,2 @@
+const NODE_WIDTH = 208, NODE_HEIGHT = 104;
+export { NODE_HEIGHT, NODE_WIDTH };