@loopstack/loopstack-studio 0.28.0 → 0.29.0

package/dist/_virtual/rolldown_runtime.js

@@ -1,20 +1,18 @@
-var __create = Object.create, __defProp = Object.defineProperty, __getOwnPropDesc = Object.getOwnPropertyDescriptor, __getOwnPropNames = Object.getOwnPropertyNames, __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty, __esmMin = (e, n) => () => (e && (n = e(e = 0)), n), __commonJSMin = (e, n) => () => (n || e((n = { exports: {} }).exports, n), n.exports), __export = (e, r) => {
-	let i = {};
-	for (var a in e) __defProp(i, a, {
-		get: e[a],
+var __create = Object.create, __defProp = Object.defineProperty, __getOwnPropDesc = Object.getOwnPropertyDescriptor, __getOwnPropNames = Object.getOwnPropertyNames, __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty, __commonJSMin = (e, t) => () => (t || e((t = { exports: {} }).exports, t), t.exports), __export = (e, n) => {
+	let r = {};
+	for (var i in e) __defProp(r, i, {
+		get: e[i],
 		enumerable: !0
 	});
-	return r && __defProp(i, Symbol.toStringTag, { value: "Module" }), i;
-}, __copyProps = (e, a, s, c) => {
-	if (a && typeof a == "object" || typeof a == "function") for (var l = __getOwnPropNames(a), u = 0, d = l.length, f; u < d; u++) f = l[u], !__hasOwnProp.call(e, f) && f !== s && __defProp(e, f, {
-		get: ((e) => a[e]).bind(null, f),
-		enumerable: !(c = __getOwnPropDesc(a, f)) || c.enumerable
+	return n && __defProp(r, Symbol.toStringTag, { value: "Module" }), r;
+}, __copyProps = (e, i, o, s) => {
+	if (i && typeof i == "object" || typeof i == "function") for (var c = __getOwnPropNames(i), l = 0, u = c.length, d; l < u; l++) d = c[l], !__hasOwnProp.call(e, d) && d !== o && __defProp(e, d, {
+		get: ((e) => i[e]).bind(null, d),
+		enumerable: !(s = __getOwnPropDesc(i, d)) || s.enumerable
 	});
 	return e;
-}, __reExport = (e, r, i, a) => {
-	a && (__defProp(e, Symbol.toStringTag, { value: "Module" }), i && __defProp(i, Symbol.toStringTag, { value: "Module" })), __copyProps(e, r, "default"), i && __copyProps(i, r, "default");
-}, __toESM = (r, i, o) => (o = r == null ? {} : __create(__getProtoOf(r)), __copyProps(i || !r || !r.__esModule ? __defProp(o, "default", {
-	value: r,
+}, __toESM = (n, r, a) => (a = n == null ? {} : __create(__getProtoOf(n)), __copyProps(r || !n || !n.__esModule ? __defProp(a, "default", {
+	value: n,
 	enumerable: !0
-}) : o, r)), __toCommonJS = (e) => __hasOwnProp.call(e, "module.exports") ? e["module.exports"] : __copyProps(__defProp({}, "__esModule", { value: !0 }), e);
-export { __commonJSMin, __esmMin, __export, __reExport, __toCommonJS, __toESM };
+}) : a, n));
+export { __commonJSMin, __export, __toESM };

package/dist/components/dynamic-form/Form.js

@@ -1,64 +1,61 @@
 import { FormElementHeader } from "./FormElementHeader.js";
 import FormBody_default from "./FormBody.js";
 import { c } from "react/compiler-runtime";
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { FormProvider } from "react-hook-form";
-function extractSchemaDefaults(e) {
-	if (e.default !== void 0) return e.default;
-	if (e.properties) {
-		let a = {}, o = !1;
-		for (let [s, l] of Object.entries(e.properties)) if (l.default !== void 0) a[s] = l.default, o = !0;
-		else if (l.type === "object" && l.properties) {
-			let e = extractSchemaDefaults(l);
-			e !== void 0 && (a[s] = e, o = !0);
+function extractSchemaDefaults(t) {
+	if (t.default !== void 0) return t.default;
+	if (t.properties) {
+		let o = {}, s = !1;
+		for (let [l, u] of Object.entries(t.properties)) if (u.default !== void 0) o[l] = u.default, s = !0;
+		else if (u.type === "object" && u.properties) {
+			let t = extractSchemaDefaults(u);
+			t !== void 0 && (o[l] = t, s = !0);
 		}
-		return o ? a : void 0;
+		return s ? o : void 0;
 	}
 }
-var Form_default = (s) => {
-	let u = c(28), { form: d, schema: f, ui: p, mimeType: m, disabled: h, viewOnly: g, actions: _ } = s, v = p, y = f, b;
-	u[0] !== d || u[1] !== y ? (b = () => {
-		let e = extractSchemaDefaults(y);
-		if (e) {
-			let a = d.getValues(), o = { ...e };
-			for (let [e, s] of Object.entries(a)) s !== void 0 && s !== "" && s !== null && (o[e] = s);
-			d.reset(o);
-		}
-	}, u[0] = d, u[1] = y, u[2] = b) : b = u[2];
-	let x;
-	u[3] === f ? x = u[4] : (x = [f], u[3] = f, u[4] = x), useEffect(b, x);
-	let S = v?.form?.title, C = v?.form?.description, w;
-	u[5] !== h || u[6] !== S || u[7] !== C ? (w = /* @__PURE__ */ jsx(FormElementHeader, {
-		title: S,
-		description: C,
-		disabled: h
-	}), u[5] = h, u[6] = S, u[7] = C, u[8] = w) : w = u[8];
-	let T = f, E = p?.form, D;
-	u[9] !== h || u[10] !== d || u[11] !== m || u[12] !== T || u[13] !== E || u[14] !== g ? (D = /* @__PURE__ */ jsx(FormBody_default, {
-		form: d,
-		mimeType: m,
-		schema: T,
-		ui: E,
-		disabled: h,
-		viewOnly: g
-	}), u[9] = h, u[10] = d, u[11] = m, u[12] = T, u[13] = E, u[14] = g, u[15] = D) : D = u[15];
-	let O;
-	u[16] !== _ || u[17] !== g ? (O = !g && !!_ && /* @__PURE__ */ jsx("div", {
-		className: "mt-4 flex w-full justify-end",
-		children: _
-	}), u[16] = _, u[17] = g, u[18] = O) : O = u[18];
-	let k;
-	u[19] !== D || u[20] !== O ? (k = /* @__PURE__ */ jsxs("form", { children: [D, O] }), u[19] = D, u[20] = O, u[21] = k) : k = u[21];
+var Form_default = (l) => {
+	let d = c(28), { form: f, schema: p, ui: m, mimeType: h, disabled: g, viewOnly: _, actions: v } = l, y = m, b = p, x = useRef(!1), S;
+	d[0] !== f || d[1] !== b ? (S = () => {
+		if (x.current) return;
+		let t = extractSchemaDefaults(b);
+		t && (x.current = !0, f.reset(t));
+	}, d[0] = f, d[1] = b, d[2] = S) : S = d[2];
+	let C;
+	d[3] === p ? C = d[4] : (C = [p], d[3] = p, d[4] = C), useEffect(S, C);
+	let w = y?.form?.title, T = y?.form?.description, E;
+	d[5] !== g || d[6] !== w || d[7] !== T ? (E = /* @__PURE__ */ jsx(FormElementHeader, {
+		title: w,
+		description: T,
+		disabled: g
+	}), d[5] = g, d[6] = w, d[7] = T, d[8] = E) : E = d[8];
+	let D = p, O = m?.form, k;
+	d[9] !== g || d[10] !== f || d[11] !== h || d[12] !== D || d[13] !== O || d[14] !== _ ? (k = /* @__PURE__ */ jsx(FormBody_default, {
+		form: f,
+		mimeType: h,
+		schema: D,
+		ui: O,
+		disabled: g,
+		viewOnly: _
+	}), d[9] = g, d[10] = f, d[11] = h, d[12] = D, d[13] = O, d[14] = _, d[15] = k) : k = d[15];
 	let A;
-	u[22] !== k || u[23] !== w ? (A = /* @__PURE__ */ jsxs("div", {
-		className: "container mx-auto",
-		children: [w, k]
-	}), u[22] = k, u[23] = w, u[24] = A) : A = u[24];
+	d[16] !== v || d[17] !== _ ? (A = !_ && !!v && /* @__PURE__ */ jsx("div", {
+		className: "mt-4 flex w-full justify-end",
+		children: v
+	}), d[16] = v, d[17] = _, d[18] = A) : A = d[18];
 	let j;
-	return u[25] !== d || u[26] !== A ? (j = /* @__PURE__ */ jsx(FormProvider, {
-		...d,
-		children: A
-	}), u[25] = d, u[26] = A, u[27] = j) : j = u[27], j;
+	d[19] !== k || d[20] !== A ? (j = /* @__PURE__ */ jsxs("form", { children: [k, A] }), d[19] = k, d[20] = A, d[21] = j) : j = d[21];
+	let M;
+	d[22] !== j || d[23] !== E ? (M = /* @__PURE__ */ jsxs("div", {
+		className: "container mx-auto",
+		children: [E, j]
+	}), d[22] = j, d[23] = E, d[24] = M) : M = d[24];
+	let N;
+	return d[25] !== f || d[26] !== M ? (N = /* @__PURE__ */ jsx(FormProvider, {
+		...f,
+		children: M
+	}), d[25] = f, d[26] = M, d[27] = N) : N = d[27], N;
 };
 export { Form_default as default };

package/dist/config.js

@@ -0,0 +1,6 @@
+var config_default = { environment: {
+	id: "local",
+	name: "Local Environment",
+	url: window.__LOOPSTACK_CONFIG__?.apiUrl ?? void 0 ?? "http://localhost:3000"
+} };
+export { config_default as default };

package/dist/features/debug/components/WorkflowFlowViewer.js

@@ -1,89 +1,86 @@
 import { useWorkflow } from "../../../hooks/useWorkflows.js";
-import { Background, BackgroundVariant, Controls, index, useEdgesState, useNodesState, useReactFlow } from "../../../node_modules/@xyflow/react/dist/esm/index.js";
+import { Background, BackgroundVariant, Controls, Panel, index, useEdgesState, useNodesState, useReactFlow } from "../../../node_modules/@xyflow/react/dist/esm/index.js";
 /* empty css                                             */
 import StateNode_default from "./workflow-flow/StateNode.js";
 import WorkflowGraph_default from "./workflow-flow/WorkflowGraph.js";
 import WorkflowTransitionEdge_default from "./workflow-flow/WorkflowTransitionEdge.js";
 import { c } from "react/compiler-runtime";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Loader2 } from "lucide-react";
-var nodeTypes = { stateNode: StateNode_default }, edgeTypes = { workflowTransition: WorkflowTransitionEdge_default }, WorkflowFlowViewer_default = (b) => {
-	let x = c(29), { workflowId: S, workflows: C, workflowConfig: w, direction: T } = b, E = T === void 0 ? "LR" : T, { data: D } = useWorkflow(S), O;
-	x[0] === Symbol.for("react.memo_cache_sentinel") ? (O = [], x[0] = O) : O = x[0];
-	let [k, A, j] = useNodesState(O), M;
-	x[1] === Symbol.for("react.memo_cache_sentinel") ? (M = [], x[1] = M) : M = x[1];
-	let [N, P, F] = useEdgesState(M), { fitView: I } = useReactFlow(), L = useRef(!1), R;
-	x[2] === Symbol.for("react.memo_cache_sentinel") ? (R = {}, x[2] = R) : R = x[2];
-	let [z, B] = useState(R), V;
-	x[3] === Symbol.for("react.memo_cache_sentinel") ? (V = /* @__PURE__ */ new Map(), x[3] = V) : V = x[3];
-	let H = useRef(V), U = Object.values(z).some(_temp), W;
-	x[4] === Symbol.for("react.memo_cache_sentinel") ? (W = (e, m) => {
-		B((h) => h[e] === m ? h : {
-			...h,
-			[e]: m
+var nodeTypes = { stateNode: StateNode_default }, edgeTypes = { workflowTransition: WorkflowTransitionEdge_default }, WorkflowFlowViewer_default = (p) => {
+	let m = c(43), { workflowId: h, workflows: g, workflowConfig: _, direction: v } = p, y = v === void 0 ? "LR" : v, { data: b, isPending: x, isLoading: S } = useWorkflow(h), C;
+	m[0] === Symbol.for("react.memo_cache_sentinel") ? (C = [], m[0] = C) : C = m[0];
+	let [w, T, E] = useNodesState(C), D;
+	m[1] === Symbol.for("react.memo_cache_sentinel") ? (D = [], m[1] = D) : D = m[1];
+	let [O, k, A] = useEdgesState(D), { fitView: j } = useReactFlow(), M = useRef(!1), N;
+	m[2] === Symbol.for("react.memo_cache_sentinel") ? (N = {}, m[2] = N) : N = m[2];
+	let [P, F] = useState(N), [I, L] = useState(!0), R = b, z;
+	if (m[3] !== h || m[4] !== g) {
+		let t;
+		m[6] === h ? t = m[7] : (t = (t) => t.id !== h, m[6] = h, m[7] = t), z = g.filter(t), m[3] = h, m[4] = g, m[5] = z;
+	} else z = m[5];
+	let B = z, V = Object.values(P).some(_temp), H = !!h && !b && (x || S) || V, U;
+	m[8] === Symbol.for("react.memo_cache_sentinel") ? (U = (t, d) => {
+		F((f) => f[t] === d ? f : {
+			...f,
+			[t]: d
 		});
-	}, x[4] = W) : W = x[4];
-	let G = W, K;
-	x[5] !== P || x[6] !== A || x[7] !== C ? (K = (e, m, h) => {
-		let g = C.findIndex((m) => m.id === e) * 250, _ = m.map((e) => ({
-			...e,
-			position: {
-				...e.position,
-				y: e.position.y + g
-			}
-		}));
-		H.current.set(e, {
-			nodes: _,
-			edges: h
-		});
-		let v = [], y = [];
-		H.current.forEach((e) => {
-			let { nodes: m, edges: h } = e;
-			v.push(...m), y.push(...h);
-		}), A(v), P(y);
-	}, x[5] = P, x[6] = A, x[7] = C, x[8] = K) : K = x[8];
-	let q = K, J, Y;
-	if (x[9] !== I || x[10] !== U || x[11] !== k.length ? (J = () => {
-		if (!U && k.length > 0 && !L.current) {
-			L.current = !0;
-			let e = setTimeout(() => {
-				I({ padding: .2 });
+	}, m[8] = U) : U = m[8];
+	let W = U, G;
+	m[9] !== k || m[10] !== T ? (G = (t, d, f) => {
+		T(d), k(f);
+	}, m[9] = k, m[10] = T, m[11] = G) : G = m[11];
+	let K = G, q;
+	m[12] !== k || m[13] !== T ? (q = () => {
+		M.current = !1, T([]), k([]);
+	}, m[12] = k, m[13] = T, m[14] = q) : q = m[14];
+	let J;
+	m[15] !== k || m[16] !== T || m[17] !== h ? (J = [
+		h,
+		T,
+		k
+	], m[15] = k, m[16] = T, m[17] = h, m[18] = J) : J = m[18], useLayoutEffect(q, J);
+	let Y, X;
+	m[19] !== j || m[20] !== H || m[21] !== w.length ? (Y = () => {
+		if (!H && w.length > 0 && !M.current) {
+			M.current = !0;
+			let t = setTimeout(() => {
+				j({ padding: .2 });
 			}, 150);
-			return () => clearTimeout(e);
+			return () => clearTimeout(t);
 		}
-	}, Y = [
-		U,
-		k.length,
-		I
-	], x[9] = I, x[10] = U, x[11] = k.length, x[12] = J, x[13] = Y) : (J = x[12], Y = x[13]), useEffect(J, Y), U && k.length === 0) {
-		let e;
-		return x[14] === Symbol.for("react.memo_cache_sentinel") ? (e = /* @__PURE__ */ jsx("div", {
-			className: "flex h-full items-center justify-center",
-			children: /* @__PURE__ */ jsx(Loader2, { className: "text-muted-foreground h-8 w-8 animate-spin" })
-		}), x[14] = e) : e = x[14], e;
-	}
-	let X;
-	x[15] !== E || x[16] !== q || x[17] !== D || x[18] !== w || x[19] !== C ? (X = D && C.map((e) => /* @__PURE__ */ jsx(WorkflowGraph_default, {
-		parentWorkflow: D,
-		workflow: e,
-		workflowConfig: w,
-		onGraphReady: q,
-		onLoadingChange: G,
-		direction: E
-	}, e.id)), x[15] = E, x[16] = q, x[17] = D, x[18] = w, x[19] = C, x[20] = X) : X = x[20];
+	}, X = [
+		H,
+		w.length,
+		j
+	], m[19] = j, m[20] = H, m[21] = w.length, m[22] = Y, m[23] = X) : (Y = m[22], X = m[23]), useEffect(Y, X);
 	let Z;
-	x[21] !== N || x[22] !== k || x[23] !== F || x[24] !== j ? (Z = k.length === 0 ? /* @__PURE__ */ jsx("div", {
+	m[24] !== y || m[25] !== B || m[26] !== K || m[27] !== b || m[28] !== R || m[29] !== I || m[30] !== _ || m[31] !== h ? (Z = R && /* @__PURE__ */ jsx(WorkflowGraph_default, {
+		parentWorkflow: b,
+		workflow: R,
+		workflowConfig: _,
+		extraTransitionSources: B,
+		onGraphReady: K,
+		onLoadingChange: W,
+		direction: y,
+		hideSameStateTransitions: !I
+	}, h), m[24] = y, m[25] = B, m[26] = K, m[27] = b, m[28] = R, m[29] = I, m[30] = _, m[31] = h, m[32] = Z) : Z = m[32];
+	let Q;
+	m[33] !== O || m[34] !== H || m[35] !== w || m[36] !== A || m[37] !== E || m[38] !== I ? (Q = H && w.length === 0 ? /* @__PURE__ */ jsx("div", {
+		className: "flex h-full items-center justify-center",
+		children: /* @__PURE__ */ jsx(Loader2, { className: "text-muted-foreground h-8 w-8 animate-spin" })
+	}) : w.length === 0 ? /* @__PURE__ */ jsx("div", {
 		className: "text-muted-foreground flex h-full items-center justify-center",
 		children: /* @__PURE__ */ jsx("p", {
 			className: "font-medium",
 			children: "No workflow transitions available"
 		})
 	}) : /* @__PURE__ */ jsxs(index, {
-		nodes: k,
-		edges: N,
-		onNodesChange: j,
-		onEdgesChange: F,
+		nodes: w,
+		edges: O,
+		onNodesChange: E,
+		onEdgesChange: A,
 		nodeTypes,
 		edgeTypes,
 		fitView: !0,
@@ -91,20 +88,36 @@ var nodeTypes = { stateNode: StateNode_default }, edgeTypes = { workflowTransiti
 		maxZoom: 2,
 		proOptions: { hideAttribution: !0 },
 		className: "bg-background",
-		children: [/* @__PURE__ */ jsx(Background, {
-			variant: BackgroundVariant.Cross,
-			gap: 24,
-			size: 1,
-			className: "opacity-[0.15]"
-		}), /* @__PURE__ */ jsx(Controls, { className: "bg-card border-border rounded-lg border shadow-md" })]
-	}), x[21] = N, x[22] = k, x[23] = F, x[24] = j, x[25] = Z) : Z = x[25];
-	let Q;
-	return x[26] !== X || x[27] !== Z ? (Q = /* @__PURE__ */ jsxs("div", {
+		children: [
+			/* @__PURE__ */ jsx(Panel, {
+				position: "top-right",
+				className: "m-2 flex max-w-[min(100%,14rem)] flex-col gap-2 rounded-md border border-border/60 bg-card/95 px-2 py-2 text-xs shadow-sm backdrop-blur-sm",
+				children: /* @__PURE__ */ jsxs("label", {
+					className: "flex cursor-pointer select-none items-center gap-2 text-muted-foreground",
+					children: [/* @__PURE__ */ jsx("input", {
+						type: "checkbox",
+						className: "accent-primary h-3.5 w-3.5 shrink-0 rounded border-border",
+						checked: I,
+						onChange: (t) => L(t.target.checked)
+					}), /* @__PURE__ */ jsx("span", { children: "Same-state transitions" })]
+				})
+			}),
+			/* @__PURE__ */ jsx(Background, {
+				variant: BackgroundVariant.Cross,
+				gap: 24,
+				size: 1,
+				className: "opacity-[0.15]"
+			}),
+			/* @__PURE__ */ jsx(Controls, { className: "bg-card border-border rounded-lg border shadow-md" })
+		]
+	}), m[33] = O, m[34] = H, m[35] = w, m[36] = A, m[37] = E, m[38] = I, m[39] = Q) : Q = m[39];
+	let $;
+	return m[40] !== Z || m[41] !== Q ? ($ = /* @__PURE__ */ jsxs("div", {
 		className: "h-full w-full",
-		children: [X, Z]
-	}), x[26] = X, x[27] = Z, x[28] = Q) : Q = x[28], Q;
+		children: [Z, Q]
+	}), m[40] = Z, m[41] = Q, m[42] = $) : $ = m[42], $;
 };
-function _temp(e) {
-	return e;
+function _temp(t) {
+	return t;
 }
 export { WorkflowFlowViewer_default as default };

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 };