@bemedev/mind-flow 0.0.1 → 0.1.0

package/lib/index.es.js

@@ -73,7 +73,7 @@ T(({ optional: e, use: t }) => ({
 });
 //#endregion
 //#region src/services/main.machine.ts
-var H = (e, t) => `edge = ${e} => ${t}`, U = (e) => `node-${e}`, W = S({
+var H = (e, t) => `edge = ${e} => ${t}`, U = (e) => `node-${e}`, ee = S({
 	initial: "idle",
 	states: {
 		idle: { on: {
@@ -88,15 +88,10 @@ var H = (e, t) => `edge = ${e} => ${t}`, U = (e) => `node-${e}`, W = S({
 			target: "/working"
 		} },
 		working: { on: {
-			MOVE: {
-				actions: ["moveNode", "buildUI"],
-				target: "/construction"
-			},
 			MOVE_IMMEDIATE: { actions: [{
 				name: "buildImmediateUI",
 				description: "Must be in the ui"
 			}] },
-			UPDATE_UI: "/construction",
 			ADD_CHILD: {
 				actions: [
 					"generateID",
@@ -130,6 +125,10 @@ var H = (e, t) => `edge = ${e} => ${t}`, U = (e) => `node-${e}`, W = S({
 				],
 				target: "/construction"
 			},
+			MOVE: {
+				actions: ["moveNode", "buildUI"],
+				target: "/construction"
+			},
 			ADD_EDGE: {
 				actions: ["addEdge"],
 				target: "/construction"
@@ -167,6 +166,7 @@ var H = (e, t) => `edge = ${e} => ${t}`, U = (e) => `node-${e}`, W = S({
 		DESELECT: "never",
 		ADD_EDGE: t(z)
 	})),
+	sync: !0,
 	pContext: T(({ union: e }) => ({ generatedId: e("string", "null") })),
 	context: T(({ optional: e, use: t, array: n }) => ({
 		data: e({
@@ -181,8 +181,7 @@ var H = (e, t) => `edge = ${e} => ${t}`, U = (e) => `node-${e}`, W = S({
 		}),
 		selected: e("string"),
 		updatingUI: e("boolean")
-	})),
-	sync: !0
+	}))
 }).provideOptions(({ assign: e, batch: t, erase: n }) => ({ actions: {
 	configure: t(e("context.data", () => ({
 		nodes: [],
@@ -229,16 +228,16 @@ var H = (e, t) => `edge = ${e} => ${t}`, U = (e) => `node-${e}`, W = S({
 		}];
 	} }),
 	deselect: n("context.selected")
-} })), G = 10.5, K = -10.5, q = {
-	x: K,
+} })), te = 10.5, W = -10.5, G = {
+	x: W,
 	y: 18
-}, J = (e = 0) => ({
-	x: e + G,
+}, K = (e = 0) => ({
+	x: e + te,
 	y: 18
-}), Y = {
-	horizontal: 20,
-	vertical: 35
-}, ee = [{
+}), q = {
+	horizontal: 55,
+	vertical: 40
+}, ne = [{
 	id: "node-0",
 	data: {
 		content: "Some text",
@@ -249,40 +248,40 @@ var H = (e, t) => `edge = ${e} => ${t}`, U = (e) => `node-${e}`, W = S({
 		x: 350,
 		y: 100
 	}
-}], X = C(W, {
-	context: {},
-	pContext: { generatedId: null }
-}), [te, Z] = F(() => {
-	let e = _(1), t = _(), [n, r] = _(), [i, a] = _({}, { equals: P }), o = (t, r) => {
-		let i = n();
+}], [re, J] = F(() => {
+	let e = C(ee, {
+		context: {},
+		pContext: { generatedId: null }
+	}), t = _(1), n = _(), [r, i] = _(), [a, o] = _({}, { equals: P }), s = (e, n) => {
+		let i = r();
 		if (!i) return {
-			x: t,
-			y: r
+			x: e,
+			y: n
 		};
-		let a = i.getBoundingClientRect(), o = e[0]();
+		let a = i.getBoundingClientRect(), o = t[0]();
 		return {
-			x: (t - a.left) / o,
-			y: (r - a.top) / o
+			x: e - a.left / o,
+			y: n - a.top / o
 		};
-	}, [s, c] = _({}, { equals: !1 }), l = (t, r, i = 192, a = 50) => {
-		let o = n()?.parentElement;
+	}, [c, l] = _({}, { equals: !1 }), u = (e, n, i = 192, a = 50) => {
+		let o = r()?.parentElement;
 		if (!o) return {
-			x: t,
-			y: r
+			x: e,
+			y: n
 		};
-		let s = e[0](), c = o.scrollLeft / s + Y.horizontal, l = Math.max(c, (o.scrollLeft + o.clientWidth) / s - Y.horizontal - i), u = o.scrollTop / s + Y.vertical, d = Math.max(u, (o.scrollTop + o.clientHeight) / s - Y.vertical - a);
+		let s = t[0](), c = o.scrollLeft / s + q.horizontal, l = Math.max(c, (o.scrollLeft + o.clientWidth) / s - q.horizontal - i), u = o.scrollTop / s + q.vertical, d = Math.max(u, (o.scrollTop + o.clientHeight) / s - q.vertical - a);
 		return {
-			x: Math.min(Math.max(t, c), l),
-			y: Math.min(Math.max(r, u), d)
+			x: Math.min(Math.max(e, c), l),
+			y: Math.min(Math.max(n, u), d)
 		};
 	};
-	return X.addOptions(({ voidAction: t, batch: r, assign: o }) => ({ actions: {
-		placeChild: o("context.data.nodes", { ADD_CHILD: ({ payload: e, context: { data: t }, pContext: { generatedId: n } }) => {
+	return e.addOptions(({ voidAction: e, batch: n, assign: i }) => ({ actions: {
+		placeChild: i("context.data.nodes", { ADD_CHILD: ({ payload: e, context: { data: t }, pContext: { generatedId: n } }) => {
 			let r = t?.nodes ?? [];
 			if (!e) return r;
-			let a = r.find((t) => t.id === e);
-			if (!a) return r;
-			let o = `node-${n}`, s = i()[e]?.width ?? 0, c = i()[e]?.height ?? 0, u = a.position.x + s + 100, d = a.position.y, f = l(u, d, s, c);
+			let i = r.find((t) => t.id === e);
+			if (!i) return r;
+			let o = `node-${n}`, s = a()[e]?.width ?? 0, c = a()[e]?.height ?? 0, l = i.position.x + s + 100, d = i.position.y, f = u(l, d, s, c);
 			return [...r, {
 				id: o,
 				data: { content: "<Nouveau nœud>" },
@@ -290,8 +289,8 @@ var H = (e, t) => `edge = ${e} => ${t}`, U = (e) => `node-${e}`, W = S({
 				position: f
 			}];
 		} }),
-		placeParent: o("context.data.nodes", { ADD_PARENT: ({ context: { data: t }, pContext: { generatedId: r } }) => {
-			let i = t?.nodes ?? [], a = `node-${r}`, o = n()?.parentElement, s = o?.scrollLeft ?? 0, c = o?.scrollTop ?? 0, l = o?.clientWidth ?? 0, u = o?.clientHeight ?? 0, d = e[0](), f = (s + l / 2) / d, p = (c + u / 2) / d;
+		placeParent: i("context.data.nodes", { ADD_PARENT: ({ context: { data: e }, pContext: { generatedId: n } }) => {
+			let i = e?.nodes ?? [], a = `node-${n}`, o = r()?.parentElement, s = o?.scrollLeft ?? 0, c = o?.scrollTop ?? 0, l = o?.clientWidth ?? 0, u = o?.clientHeight ?? 0, d = t[0](), f = (s + l / 2) / d, p = (c + u / 2) / d;
 			return [...i, {
 				id: a,
 				data: { content: "<Nouveau nœud>" },
@@ -302,34 +301,34 @@ var H = (e, t) => `edge = ${e} => ${t}`, U = (e) => `node-${e}`, W = S({
 				}
 			}];
 		} }),
-		placeSibling: o("context.data.nodes", { ADD_SIBLING: ({ payload: e, context: { data: t }, pContext: { generatedId: n } }) => {
-			let r = t?.edges ?? [], a = t?.nodes ?? [], o = r.find((t) => t.to === e)?.from;
-			if (!o) return a;
-			let s = a.find((e) => e.id === o);
-			if (!s) return a;
-			let c = `node-${n}`, u = i()[o]?.width ?? 0, d = i()[o]?.height ?? 0, f = s.position.x + u + 100, p = s.position.y + 100, m = l(f, p, u, d);
-			return [...a, {
+		placeSibling: i("context.data.nodes", { ADD_SIBLING: ({ payload: e, context: { data: t }, pContext: { generatedId: n } }) => {
+			let r = t?.edges ?? [], i = t?.nodes ?? [], o = r.find((t) => t.to === e)?.from;
+			if (!o) return i;
+			let s = i.find((e) => e.id === o);
+			if (!s) return i;
+			let c = `node-${n}`, l = a()[o]?.width ?? 0, d = a()[o]?.height ?? 0, f = s.position.x + l + 100, p = s.position.y + 100, m = u(f, p, l, d);
+			return [...i, {
 				id: c,
 				data: { content: "<Nouveau nœud>" },
 				input: !0,
 				position: m
 			}];
 		} }),
-		buildUI: r(t(({ context: { data: e } }) => {
+		buildUI: n(e(({ context: { data: e } }) => {
 			let t = e?.edges ?? [];
-			c((e) => {
-				let n = Object.entries({ ...e }).filter(([e]) => t?.some((t) => t.id === e));
+			l((e) => {
+				let n = Object.entries({ ...e }).filter(([e]) => t.some((t) => t.id === e));
 				return Object.fromEntries(n);
 			});
-		}), t({
+		}), e({
 			else: ({ context: { data: e } }) => {
 				let t = e?.edges ?? [];
-				c(w((e) => {
+				l(w((e) => {
 					t?.forEach(({ from: t, id: n, to: r }) => {
-						let a = i()[t]?.output, o = i()[r]?.input;
-						a && o && (e[n] = {
-							x0: a.x,
-							y0: a.y,
+						let i = a()[t]?.output, o = a()[r]?.input;
+						i && o && (e[n] = {
+							x0: i.x,
+							y0: i.y,
 							x1: o.x,
 							y1: o.y
 						});
@@ -338,15 +337,15 @@ var H = (e, t) => `edge = ${e} => ${t}`, U = (e) => `node-${e}`, W = S({
 			},
 			MOVE: ({ context: { data: e }, payload: t }) => {
 				let n = e?.edges ?? [];
-				c(w((e) => {
-					n?.forEach(({ from: n, to: r, id: o }) => {
+				l(w((e) => {
+					n?.forEach(({ from: n, to: r, id: i }) => {
 						if (n === t.id) {
-							let n = i()[t.id]?.outputOffset ?? J(i()[t.id]?.width), r = t.x + n.x, s = t.y + n.y;
-							e[o] = {
-								...e[o],
+							let n = a()[t.id]?.outputOffset ?? K(a()[t.id]?.width), r = t.x + n.x, s = t.y + n.y;
+							e[i] = {
+								...e[i],
 								x0: r,
 								y0: s
-							}, a(w((e) => {
+							}, o(w((e) => {
 								e[t.id] && (e[t.id] = {
 									...e[t.id],
 									output: {
@@ -357,12 +356,12 @@ var H = (e, t) => `edge = ${e} => ${t}`, U = (e) => `node-${e}`, W = S({
 							}));
 						}
 						if (r === t.id) {
-							let n = i()[t.id]?.inputOffset ?? q, r = t.x + n.x, s = t.y + n.y;
-							e[o] = {
-								...e[o],
+							let n = a()[t.id]?.inputOffset ?? G, r = t.x + n.x, s = t.y + n.y;
+							e[i] = {
+								...e[i],
 								x1: r,
 								y1: s
-							}, a(w((e) => {
+							}, o(w((e) => {
 								e[t.id] && (e[t.id] = {
 									...e[t.id],
 									input: {
@@ -375,18 +374,18 @@ var H = (e, t) => `edge = ${e} => ${t}`, U = (e) => `node-${e}`, W = S({
 					});
 				}));
 			}
-		}), o("context.updatingUI", () => !0)),
-		buildImmediateUI: t({ MOVE_IMMEDIATE: ({ context: { data: e }, payload: t }) => {
+		}), i("context.updatingUI", () => !0)),
+		buildImmediateUI: e({ MOVE_IMMEDIATE: ({ context: { data: e }, payload: t }) => {
 			let n = e?.edges ?? [];
-			c(w((e) => {
-				n?.forEach(({ from: n, to: r, id: o }) => {
+			l(w((e) => {
+				n?.forEach(({ from: n, to: r, id: i }) => {
 					if (n === t.id) {
-						let n = i()[t.id]?.outputOffset ?? J(i()[t.id]?.width), r = t.x + n.x, s = t.y + n.y;
-						e[o] = {
-							...e[o],
+						let n = a()[t.id]?.outputOffset ?? K(a()[t.id]?.width), r = t.x + n.x, s = t.y + n.y;
+						e[i] = {
+							...e[i],
 							x0: r,
 							y0: s
-						}, a(w((e) => {
+						}, o(w((e) => {
 							e[t.id] && (e[t.id] = {
 								...e[t.id],
 								output: {
@@ -397,12 +396,12 @@ var H = (e, t) => `edge = ${e} => ${t}`, U = (e) => `node-${e}`, W = S({
 						}));
 					}
 					if (r === t.id) {
-						let n = i()[t.id]?.inputOffset ?? q, r = t.x + n.x, s = t.y + n.y;
-						e[o] = {
-							...e[o],
+						let n = a()[t.id]?.inputOffset ?? G, r = t.x + n.x, s = t.y + n.y;
+						e[i] = {
+							...e[i],
 							x1: r,
 							y1: s
-						}, a(w((e) => {
+						}, o(w((e) => {
 							e[t.id] && (e[t.id] = {
 								...e[t.id],
 								input: {
@@ -415,37 +414,38 @@ var H = (e, t) => `edge = ${e} => ${t}`, U = (e) => `node-${e}`, W = S({
 				});
 			}));
 		} })
-	} })), X.start(), {
-		dimensions: [i, a],
-		newEdge: t,
-		board: [n, r],
-		getBoardPoint: o,
-		edgesPositions: [s, c],
-		service: X,
-		zoom: e
+	} })), e.start(), {
+		dimensions: [a, o],
+		newEdge: n,
+		board: [r, i],
+		getBoardPoint: s,
+		edgesPositions: [c, l],
+		service: e,
+		zoom: t,
+		clampPosition: u
 	};
-}, { name: "FlowContext" }), Q = Object.prototype.hasOwnProperty;
-function ne(e, t, n) {
-	for (n of e.keys()) if ($(n, t)) return n;
+}, { name: "FlowContext" }), Y = Object.prototype.hasOwnProperty;
+function X(e, t, n) {
+	for (n of e.keys()) if (Z(n, t)) return n;
 }
-function $(e, t) {
+function Z(e, t) {
 	var n, r, i;
 	if (e === t) return !0;
 	if (e && t && (n = e.constructor) === t.constructor) {
 		if (n === Date) return e.getTime() === t.getTime();
 		if (n === RegExp) return e.toString() === t.toString();
 		if (n === Array) {
-			if ((r = e.length) === t.length) for (; r-- && $(e[r], t[r]););
+			if ((r = e.length) === t.length) for (; r-- && Z(e[r], t[r]););
 			return r === -1;
 		}
 		if (n === Set) {
 			if (e.size !== t.size) return !1;
-			for (r of e) if (i = r, i && typeof i == "object" && (i = ne(t, i), !i) || !t.has(i)) return !1;
+			for (r of e) if (i = r, i && typeof i == "object" && (i = X(t, i), !i) || !t.has(i)) return !1;
 			return !0;
 		}
 		if (n === Map) {
 			if (e.size !== t.size) return !1;
-			for (r of e) if (i = r[0], i && typeof i == "object" && (i = ne(t, i), !i) || !$(r[1], t.get(i))) return !1;
+			for (r of e) if (i = r[0], i && typeof i == "object" && (i = X(t, i), !i) || !Z(r[1], t.get(i))) return !1;
 			return !0;
 		}
 		if (n === ArrayBuffer) e = new Uint8Array(e), t = new Uint8Array(t);
@@ -458,7 +458,7 @@ function $(e, t) {
 			return r === -1;
 		}
 		if (!n || typeof e == "object") {
-			for (n in r = 0, e) if (Q.call(e, n) && ++r && !Q.call(t, n) || !(n in t) || !$(e[n], t[n])) return !1;
+			for (n in r = 0, e) if (Y.call(e, n) && ++r && !Y.call(t, n) || !(n in t) || !Z(e[n], t[n])) return !1;
 			return Object.keys(t).length === r;
 		}
 	}
@@ -466,17 +466,19 @@ function $(e, t) {
 }
 //#endregion
 //#region src/ui/components/Bounds.tsx
-var re = () => {
-	let { board: [e], zoom: [t] } = Z(), [n, { addTransformer: r, removeTransformer: i, onDragStart: a, onDragEnd: o }] = j(), s = {
+var ie = () => {
+	let { board: [e], zoom: [t] } = J(), [n, { addTransformer: r, removeTransformer: i, onDragStart: a, onDragEnd: o }] = j(), s = {
 		id: "clamp-to-container",
 		order: 100,
 		callback: (r) => {
-			let i = e()?.parentElement, a = n.active.draggable;
+			let i = e(), a = n.active.draggable;
 			if (!i || !a) return r;
-			let o = a.layout, s = i.getBoundingClientRect(), c = s.left + i.clientLeft, l = s.top + i.clientTop, u = c + i.clientWidth, d = l + i.clientHeight, f = t(), p = c - o.left + Y.horizontal * f, m = Math.max(p, u - o.right - Y.horizontal * f), h = l - o.top + Y.vertical * f, g = Math.max(h, d - o.bottom - Y.vertical * f);
+			let o = a.node;
+			if (!o) return r;
+			let s = t(), c = q.horizontal, l = Math.max(c, i.clientWidth / s - o.offsetWidth - q.horizontal), u = q.vertical, d = Math.max(u, i.clientHeight / s - o.offsetHeight - q.vertical), f = (c - o.offsetLeft) * s, p = (l - o.offsetLeft) * s, m = (u - o.offsetTop) * s, h = (d - o.offsetTop) * s;
 			return {
-				x: Math.min(Math.max(r.x, p), m),
-				y: Math.min(Math.max(r.y, h), g)
+				x: Math.min(Math.max(r.x, f), p),
+				y: Math.min(Math.max(r.y, m), h)
 			};
 		}
 	};
@@ -485,11 +487,11 @@ var re = () => {
 	}), o(({ draggable: e }) => {
 		i("draggables", e.id, s.id);
 	}), null;
-}, ie = /*#__PURE__*/ u("<svg><path class=\"relative cursor-pointer fill-transparent\"></svg>", !1, !0, !1), ae = /*#__PURE__*/ u("<svg><g cursor=pointer style=pointer-events:all;z-index:30><circle cx=0 cy=0 r=12 fill=\"rgba(168, 168, 168, 1)\"></circle><svg fill=currentColor stroke-width=0 xmlns=http://www.w3.org/2000/svg class=\"h-25 w-25 bg-white fill-white\"width=20 height=20 viewBox=\"0 0 20 20\"color=white x=-10 y=-10><path d=\"M10.185,1.417c-4.741,0-8.583,3.842-8.583,8.583c0,4.74,3.842,8.582,8.583,8.582S18.768,14.74,18.768,10C18.768,5.259,14.926,1.417,10.185,1.417 M10.185,17.68c-4.235,0-7.679-3.445-7.679-7.68c0-4.235,3.444-7.679,7.679-7.679S17.864,5.765,17.864,10C17.864,14.234,14.42,17.68,10.185,17.68 M10.824,10l2.842-2.844c0.178-0.176,0.178-0.46,0-0.637c-0.177-0.178-0.461-0.178-0.637,0l-2.844,2.841L7.341,6.52c-0.176-0.178-0.46-0.178-0.637,0c-0.178,0.176-0.178,0.461,0,0.637L9.546,10l-2.841,2.844c-0.178,0.176-0.178,0.461,0,0.637c0.178,0.178,0.459,0.178,0.637,0l2.844-2.841l2.844,2.841c0.178,0.178,0.459,0.178,0.637,0c0.178-0.176,0.178-0.461,0-0.637L10.824,10z\"></svg>", !1, !0, !1), oe = (e) => e * 100 / 200, se = ({ x0: e, y0: t, x1: n, y1: r }) => `M ${e} ${t} C ${e + oe(Math.abs(n - e))} ${t}, ${n - oe(Math.abs(n - e))} ${r}, ${n} ${r}`, ce = (n) => {
+}, ae = /*#__PURE__*/ u("<svg><path class=\"relative cursor-pointer fill-transparent\"></svg>", !1, !0, !1), oe = /*#__PURE__*/ u("<svg><g cursor=pointer style=pointer-events:all;z-index:30><circle cx=0 cy=0 r=12 fill=\"rgba(168, 168, 168, 1)\"></circle><svg fill=currentColor stroke-width=0 xmlns=http://www.w3.org/2000/svg class=\"h-25 w-25 bg-white fill-white\"width=20 height=20 viewBox=\"0 0 20 20\"color=white x=-10 y=-10><path d=\"M10.185,1.417c-4.741,0-8.583,3.842-8.583,8.583c0,4.74,3.842,8.582,8.583,8.582S18.768,14.74,18.768,10C18.768,5.259,14.926,1.417,10.185,1.417 M10.185,17.68c-4.235,0-7.679-3.445-7.679-7.68c0-4.235,3.444-7.679,7.679-7.679S17.864,5.765,17.864,10C17.864,14.234,14.42,17.68,10.185,17.68 M10.824,10l2.842-2.844c0.178-0.176,0.178-0.46,0-0.637c-0.177-0.178-0.461-0.178-0.637,0l-2.844,2.841L7.341,6.52c-0.176-0.178-0.46-0.178-0.637,0c-0.178,0.176-0.178,0.461,0,0.637L9.546,10l-2.841,2.844c-0.178,0.176-0.178,0.461,0,0.637c0.178,0.178,0.459,0.178,0.637,0l2.844-2.841l2.844,2.841c0.178,0.178,0.459,0.178,0.637,0c0.178-0.176,0.178-0.461,0-0.637L10.824,10z\"></svg>", !1, !0, !1), Q = (e) => e * 100 / 200, se = ({ x0: e, y0: t, x1: n, y1: r }) => `M ${e} ${t} C ${e + Q(Math.abs(n - e))} ${t}, ${n - Q(Math.abs(n - e))} ${r}, ${n} ${r}`, $ = (n) => {
 	let [a, o] = _({
 		x: n.x0 + (n.x1 - n.x0) / 2,
 		y: n.y0 + (n.y1 - n.y0) / 2
-	}), { service: u } = Z();
+	}), { service: u } = J();
 	h(() => {
 		let e = n.x0 + (n.x1 - n.x0) / 2, t = n.y0 + (n.y1 - n.y0) / 2;
 		o({
@@ -499,7 +501,7 @@ var re = () => {
 	});
 	let d = E(u, { selector: (e) => e.context.selected === n.id });
 	return [(() => {
-		var t = i(ie);
+		var t = i(ae);
 		return t.$$click = () => u.send({
 			type: "SELECT",
 			payload: n.id
@@ -520,7 +522,7 @@ var re = () => {
 			return d();
 		},
 		get children() {
-			var e = i(ae);
+			var e = i(oe);
 			return e.$$mousedown = (e) => {
 				e.stopPropagation(), u.send({
 					type: "DELETE",
@@ -533,20 +535,20 @@ var re = () => {
 n(["mousedown", "click"]);
 //#endregion
 //#region src/ui/components/EdgesBoard.tsx
-var le = /*#__PURE__*/ u("<svg class=\"pointer-events-none h-full w-full overflow-visible\"><!$><!/><!$><!/>"), ue = () => {
-	let [e, n] = _(), { newEdge: [r], edgesPositions: [s] } = Z(), c = g(() => Object.entries(s()).map(([e, t]) => ({
+var ce = /*#__PURE__*/ u("<svg class=\"pointer-events-none h-full w-full overflow-visible\"><!$><!/><!$><!/>"), le = () => {
+	let [e, n] = _(), { newEdge: [r], edgesPositions: [s] } = J(), c = g(() => Object.entries(s()).map(([e, t]) => ({
 		id: e,
 		...t
 	})));
 	return h(() => {
 		e() && r() && n();
 	}), (() => {
-		var e = i(le), n = e.firstChild, [s, l] = a(n.nextSibling), u = s.nextSibling, [d, m] = a(u.nextSibling);
+		var e = i(ce), n = e.firstChild, [s, l] = a(n.nextSibling), u = s.nextSibling, [d, m] = a(u.nextSibling);
 		return o(e, t(p, {
 			get when() {
 				return r();
 			},
-			children: (e) => t(ce, {
+			children: (e) => t($, {
 				id: "__#new-edge#__TEMP",
 				isNew: !0,
 				get x0() {
@@ -566,27 +568,27 @@ var le = /*#__PURE__*/ u("<svg class=\"pointer-events-none h-full w-full overflo
 			get each() {
 				return c();
 			},
-			children: ce
+			children: $
 		}), d, m), e;
 	})();
-}, de = /*#__PURE__*/ u("<svg class=\"cursor-pointer overflow-visible rounded-full bg-green-500 p-0.5 text-center font-bold hover:bg-green-600\"viewBox=\"0 0 1024 1024\"preserveAspectRatio=xMaxYMax xmlns=http://www.w3.org/2000/svg fill=white style=pointer-events:all;fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2><g id=background><path d=\"M467.40667,277.66696c-0.05948,-14.53055 5.75527,-22.95613 -8.62044,-20.90487c-112.55699,16.0607 -222.1609,112.14558 -245.06161,239.85765c-46.52056,259.43466 231.33083,443.06705 449.51209,316.97506c117.31668,-67.80002 160.95215,-190.43324 151.34416,-288.29849c-5.92276,-60.32819 -27.80273,-107.95668 -53.44246,-144.25469l59.39269,-42.05363c111.72214,156.309 73.11535,351.55635 -25.06953,459.45565c-184.18877,202.4124 -470.46624,145.52064 -592.95027,-32.92123c-156.18269,-227.53604 -27.15324,-543.64371 261.18883,-582.44416c5.0579,-0.68061 3.56556,-7.04079 3.56442,-8.58985c-0.05594,-76.3354 -0.11021,-76.7687 1.10909,-77.24589c2.06886,-0.80969 151.41433,118.4561 151.92482,118.95524c4.65592,4.55233 -0.99548,7.829 -29.07828,30.50907c-120.49369,97.31245 -120.4977,98.55675 -123.0691,97.87586c-0.43639,-0.11555 -0.80698,-0.31322 -0.74442,-66.91571Z\"></path><path d=\"M316.61562,611.03414c0.11517,-90.16257 -0.25516,-99.92912 0.64739,-101.78856c1.56486,-3.22393 131.99102,0.91032 134.6959,-1.89763c2.21336,-2.2977 -0.59362,-129.97807 1.1376,-132.37034c0.7253,-1.00225 11.10552,-0.99175 12.07474,-0.99077c104.50336,0.10564 104.90098,-0.37811 105.967,0.85765c1.56461,1.81373 0.25596,114.18436 0.67852,129.81412c0.1322,4.88975 3.22386,3.28152 99.72028,3.4563c33.0841,0.05992 36.14259,-1.40368 36.21852,4.50462c0.11713,9.11348 1.41954,110.45369 -0.40274,113.92715c-1.81106,3.45208 -130.39967,-0.42618 -134.48289,1.62075c-2.29035,1.14816 -0.36989,101.12392 -1.11542,130.51904c-0.09548,3.76459 -2.13506,3.20617 -47.84854,3.17365c-69.30253,-0.0493 -69.31099,-0.25627 -69.65762,-0.42191c-3.77927,-1.80595 0.16287,-129.33555 -2.24266,-132.58994c-1.79931,-2.43424 -124.06108,-0.29118 -132.80252,-0.97392c-3.81102,-0.29766 -2.58229,-14.8847 -2.58758,-16.8402Z\">"), fe = /*#__PURE__*/ u("<div id=outputs class=\"pointer-events-none absolute top-0 z-10 flex cursor-default flex-col\"><div class=\"cursor-default rounded-full bg-[#e38b29] shadow-md\"style=pointer-events:all>"), pe = /*#__PURE__*/ u("<div class=min-w-48><div><svg class=\"cursor-pointer rounded-full fill-[#a11111] opacity-100 transition-all duration-200 ease-in-out\"fill=currentColor stroke-width=2 viewBox=\"4 4 16 16\"style=overflow:visible;pointer-events:all><path d=\"M12 4c-4.419 0-8 3.582-8 8s3.581 8 8 8 8-3.582 8-8-3.581-8-8-8zm3.707 10.293a.999.999 0 11-1.414 1.414L12 13.414l-2.293 2.293a.997.997 0 01-1.414 0 .999.999 0 010-1.414L10.586 12 8.293 9.707a.999.999 0 111.414-1.414L12 10.586l2.293-2.293a.999.999 0 111.414 1.414L13.414 12l2.293 2.293z\"></path></svg><!$><!/><svg class=\"flex cursor-pointer items-center justify-center rounded-lg bg-blue-500 p-0.5 text-center font-bold text-white hover:bg-blue-600\"viewBox=\"0 0 24 24\"stroke=currentColor stroke-width=2 style=pointer-events:all><path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\"></path></svg></div><!$><!/><!$><!/><!$><!/><div id=inputs class=\"pointer-events-none absolute top-0 z-10 flex flex-col\"><div class=\"cursor-crosshair rounded-full bg-[#e38b29] shadow-md\"style=pointer-events:all>"), me = /*#__PURE__*/ u("<span class=\"min-w-max border-b border-[#f0f0f0] p-3 whitespace-nowrap text-red-600 select-none\">"), he = /*#__PURE__*/ u("<div class=\"p-3 select-none\">"), ge = (n) => {
-	let u, f, [m, g] = _(), { dimensions: [v, y], newEdge: [b, x], getBoardPoint: S, service: C, zoom: [T] } = Z(), D = E(C, { selector: (e) => e.context.selected === n.id });
-	h(() => {
+}, ue = /*#__PURE__*/ u("<svg class=\"cursor-pointer overflow-visible rounded-full bg-green-500 p-0.5 text-center font-bold hover:bg-green-600\"viewBox=\"0 0 1024 1024\"preserveAspectRatio=xMaxYMax xmlns=http://www.w3.org/2000/svg fill=white style=pointer-events:all;fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2><g id=background><path d=\"M467.40667,277.66696c-0.05948,-14.53055 5.75527,-22.95613 -8.62044,-20.90487c-112.55699,16.0607 -222.1609,112.14558 -245.06161,239.85765c-46.52056,259.43466 231.33083,443.06705 449.51209,316.97506c117.31668,-67.80002 160.95215,-190.43324 151.34416,-288.29849c-5.92276,-60.32819 -27.80273,-107.95668 -53.44246,-144.25469l59.39269,-42.05363c111.72214,156.309 73.11535,351.55635 -25.06953,459.45565c-184.18877,202.4124 -470.46624,145.52064 -592.95027,-32.92123c-156.18269,-227.53604 -27.15324,-543.64371 261.18883,-582.44416c5.0579,-0.68061 3.56556,-7.04079 3.56442,-8.58985c-0.05594,-76.3354 -0.11021,-76.7687 1.10909,-77.24589c2.06886,-0.80969 151.41433,118.4561 151.92482,118.95524c4.65592,4.55233 -0.99548,7.829 -29.07828,30.50907c-120.49369,97.31245 -120.4977,98.55675 -123.0691,97.87586c-0.43639,-0.11555 -0.80698,-0.31322 -0.74442,-66.91571Z\"></path><path d=\"M316.61562,611.03414c0.11517,-90.16257 -0.25516,-99.92912 0.64739,-101.78856c1.56486,-3.22393 131.99102,0.91032 134.6959,-1.89763c2.21336,-2.2977 -0.59362,-129.97807 1.1376,-132.37034c0.7253,-1.00225 11.10552,-0.99175 12.07474,-0.99077c104.50336,0.10564 104.90098,-0.37811 105.967,0.85765c1.56461,1.81373 0.25596,114.18436 0.67852,129.81412c0.1322,4.88975 3.22386,3.28152 99.72028,3.4563c33.0841,0.05992 36.14259,-1.40368 36.21852,4.50462c0.11713,9.11348 1.41954,110.45369 -0.40274,113.92715c-1.81106,3.45208 -130.39967,-0.42618 -134.48289,1.62075c-2.29035,1.14816 -0.36989,101.12392 -1.11542,130.51904c-0.09548,3.76459 -2.13506,3.20617 -47.84854,3.17365c-69.30253,-0.0493 -69.31099,-0.25627 -69.65762,-0.42191c-3.77927,-1.80595 0.16287,-129.33555 -2.24266,-132.58994c-1.79931,-2.43424 -124.06108,-0.29118 -132.80252,-0.97392c-3.81102,-0.29766 -2.58229,-14.8847 -2.58758,-16.8402Z\">"), de = /*#__PURE__*/ u("<div id=outputs class=\"pointer-events-none absolute top-0 z-10 flex cursor-default flex-col\"><div class=\"cursor-default rounded-full bg-[#e38b29] shadow-md\"style=pointer-events:all>"), fe = /*#__PURE__*/ u("<div class=min-w-48><div><svg class=\"cursor-pointer rounded-full fill-[#a11111] opacity-100 transition-all duration-200 ease-in-out\"fill=currentColor stroke-width=2 viewBox=\"4 4 16 16\"style=overflow:visible;pointer-events:all><path d=\"M12 4c-4.419 0-8 3.582-8 8s3.581 8 8 8 8-3.582 8-8-3.581-8-8-8zm3.707 10.293a.999.999 0 11-1.414 1.414L12 13.414l-2.293 2.293a.997.997 0 01-1.414 0 .999.999 0 010-1.414L10.586 12 8.293 9.707a.999.999 0 111.414-1.414L12 10.586l2.293-2.293a.999.999 0 111.414 1.414L13.414 12l2.293 2.293z\"></path></svg><!$><!/><svg class=\"flex cursor-pointer items-center justify-center rounded-lg bg-blue-500 p-0.5 text-center font-bold text-white hover:bg-blue-600\"viewBox=\"0 0 24 24\"stroke=currentColor stroke-width=2 style=pointer-events:all><path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\"></path></svg></div><!$><!/><!$><!/><!$><!/><div id=inputs class=\"pointer-events-none absolute top-0 z-10 flex flex-col\"><div class=\"cursor-crosshair rounded-full bg-[#e38b29] shadow-md\"style=pointer-events:all>"), pe = /*#__PURE__*/ u("<span class=\"min-w-max border-b border-[#f0f0f0] p-3 whitespace-nowrap text-red-600 select-none\">"), me = /*#__PURE__*/ u("<div class=\"p-3 select-none\">"), he = (n) => {
+	let u, f, [m, h] = _(), { dimensions: [g, v], newEdge: [y, x], getBoardPoint: S, service: C, zoom: [T] } = J(), D = E(C, { selector: (e) => e.context.selected === n.id });
+	b(() => {
 		let e = u, t = f, r = m(), i = T();
 		if (!t || !r) return;
-		let a = r.getBoundingClientRect(), o = t.getBoundingClientRect(), s = e?.getBoundingClientRect(), c = (o.left - a.left + o.width / 2) / i, l = (o.top - a.top + o.height / 2) / i, d = s ? (s.left - a.left + s.width / 2) / i : K, p = s ? (s.top - a.top + s.height / 2) / i : 18, h = a.width / i, g = a.height / i, _ = {
+		let a = r.getBoundingClientRect(), o = t.getBoundingClientRect(), s = e?.getBoundingClientRect(), c = (o.left - a.left + o.width / 2) / i, l = (o.top - a.top + o.height / 2) / i, d = s ? (s.left - a.left + s.width / 2) / i : W, p = s ? (s.top - a.top + s.height / 2) / i : 18, h = a.width / i, g = a.height / i, _ = {
 			x: n.x + c,
 			y: n.y + l
-		}, v = {
+		}, y = {
 			x: n.x + d,
 			y: n.y + p
 		};
-		y(w((e) => {
+		v(w((e) => {
 			e[n.id] = {
 				width: h,
 				height: g,
 				output: _,
-				input: v,
+				input: y,
 				outputOffset: {
 					x: c,
 					y: l
@@ -600,26 +602,26 @@ var le = /*#__PURE__*/ u("<svg class=\"pointer-events-none h-full w-full overflo
 	});
 	let O = E(C, { selector: ({ context: { data: e } }) => {
 		let t = e?.edges;
-		return t ? Object.values(t).some((e) => e.to === n.id) : !1;
+		return t ? t.some(({ to: e }) => e === n.id) : !1;
 	} }), k = A(n.id);
 	return (() => {
-		var m = i(pe), h = m.firstChild, _ = h.firstChild, y = _.nextSibling, [w, T] = a(y.nextSibling), E = w.nextSibling, A = h.nextSibling, [j, M] = a(A.nextSibling), N = j.nextSibling, [P, F] = a(N.nextSibling), I = P.nextSibling, [L, R] = a(I.nextSibling), z = L.nextSibling, B = z.firstChild;
+		var m = i(fe), _ = m.firstChild, v = _.firstChild, b = v.nextSibling, [w, T] = a(b.nextSibling), E = w.nextSibling, A = _.nextSibling, [j, M] = a(A.nextSibling), N = j.nextSibling, [P, F] = a(N.nextSibling), I = P.nextSibling, [L, R] = a(I.nextSibling), z = L.nextSibling, B = z.firstChild;
 		return d(k, m, () => ({ skipTransform: !0 })), m.$$mousedown = (e) => {
 			e.stopPropagation(), e.stopImmediatePropagation(), C.send({
 				type: "SELECT",
 				payload: n.id
 			});
-		}, d(g, m), _.$$click = (e) => {
+		}, d(h, m), v.$$click = (e) => {
 			e.stopPropagation(), C.send({
 				type: "DELETE",
 				payload: n.id
 			});
-		}, l(_, "width", "24px"), l(_, "height", "24px"), o(h, t(p, {
+		}, l(v, "width", "24px"), l(v, "height", "24px"), o(_, t(p, {
 			get when() {
 				return O();
 			},
 			get children() {
-				var e = i(de);
+				var e = i(ue);
 				return e.$$click = () => C.send({
 					type: "ADD_SIBLING",
 					payload: n.id
@@ -634,7 +636,7 @@ var le = /*#__PURE__*/ u("<svg class=\"pointer-events-none h-full w-full overflo
 			},
 			keyed: !0,
 			children: (e) => (() => {
-				var t = i(me);
+				var t = i(pe);
 				return o(t, e), t;
 			})()
 		}), j, M), o(m, t(p, {
@@ -643,7 +645,7 @@ var le = /*#__PURE__*/ u("<svg class=\"pointer-events-none h-full w-full overflo
 			},
 			keyed: !0,
 			children: (e) => (() => {
-				var t = i(he);
+				var t = i(me);
 				return o(t, e), t;
 			})()
 		}), P, F), o(m, t(p, {
@@ -651,10 +653,10 @@ var le = /*#__PURE__*/ u("<svg class=\"pointer-events-none h-full w-full overflo
 				return n.input || O();
 			},
 			get children() {
-				var e = i(fe), t = e.firstChild;
+				var e = i(de), t = e.firstChild;
 				return l(e, "left", "-18px"), t.$$mouseup = (e) => {
 					e.stopPropagation();
-					let t = b()?.from;
+					let t = y()?.from;
 					t && C.send({
 						type: "ADD_EDGE",
 						payload: {
@@ -668,7 +670,7 @@ var le = /*#__PURE__*/ u("<svg class=\"pointer-events-none h-full w-full overflo
 			}
 		}), L, R), l(z, "right", "-18px"), B.$$mousedown = (e) => {
 			e.stopPropagation(), C.send("DESELECT");
-			let t = v()[n.id]?.output, r = S(e.clientX, e.clientY);
+			let t = g()[n.id]?.output, r = S(e.clientX, e.clientY);
 			t && x({
 				x0: t.x,
 				y0: t.y,
@@ -686,7 +688,7 @@ var le = /*#__PURE__*/ u("<svg class=\"pointer-events-none h-full w-full overflo
 				"w-full opacity-100": D(),
 				"w-0 -right-3 opacity-0 overflow-hidden": !D()
 			};
-			return r !== t.e && c(m, "id", t.e = r), t.t = e(m, i, t.t), a !== t.a && l(m, "top", t.a = a), o !== t.o && l(m, "left", t.o = o), t.i = e(h, s, t.i), t;
+			return r !== t.e && c(m, "id", t.e = r), t.t = e(m, i, t.t), a !== t.a && l(m, "top", t.a = a), o !== t.o && l(m, "left", t.o = o), t.i = e(_, s, t.i), t;
 		}, {
 			e: void 0,
 			t: void 0,
@@ -703,23 +705,19 @@ n([
 ]);
 //#endregion
 //#region src/ui/components/NodesBoard.tsx
-var _e = /*#__PURE__*/ u("<div class=\"relative mx-auto h-[calc(100vh-64px)] w-[calc(100vw-32px)]\"><div class=\"relative h-full w-full overflow-scroll rounded-lg border-2 border-gray-600\"><!$><!/><!$><!/><div class=\"relative cursor-crosshair\"style=\"transform-origin:top left\"><!$><!/><!$><!/></div></div><div class=\"absolute right-4 bottom-4 z-50 flex items-center gap-2 rounded-xl border border-gray-200 bg-white/90 p-2 shadow-lg backdrop-blur-md\"><button type=button class=\"flex size-9 cursor-pointer items-center justify-center rounded-lg bg-gray-100 text-lg font-bold text-gray-700 shadow-sm transition-all duration-150 hover:bg-gray-200 active:scale-95\"title=\"Zoom out\"aria-label=\"Zoom out\">-</button><button type=button class=\"h-9 cursor-pointer rounded-lg px-2 text-xs font-semibold text-gray-700 transition-colors hover:bg-gray-100\"title=\"Reset zoom\"aria-label=\"Reset zoom\"><!$><!/>%</button><button type=button class=\"flex size-9 cursor-pointer items-center justify-center rounded-lg bg-gray-100 text-lg font-bold text-gray-700 shadow-sm transition-all duration-150 hover:bg-gray-200 active:scale-95\"title=\"Zoom in\"aria-label=\"Zoom in\">+</button><div class=\"h-5 w-px bg-gray-300\"></div><button type=button class=\"flex size-9 cursor-pointer items-center justify-center rounded-lg bg-blue-600 text-white shadow transition-all duration-150 hover:bg-blue-700 active:scale-95\"title=\"Add parent node\"aria-label=\"Add parent node\"><svg class=size-5 viewBox=\"0 0 24 24\"fill=currentColor><path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\">"), ve = () => {
+var ge = /*#__PURE__*/ u("<div class=\"relative h-full w-full overflow-scroll rounded-lg border-2 border-gray-600\"><!$><!/><div class=\"relative cursor-crosshair overflow-hidden\"><div class=\"relative h-full w-full\"style=\"transform-origin:top left\"><!$><!/><!$><!/><!$><!/>"), _e = /*#__PURE__*/ u("<div class=\"absolute right-4 bottom-4 z-50 flex items-center gap-2 rounded-xl border border-gray-200 bg-white/90 p-2 shadow-lg backdrop-blur-md\"><button type=button class=\"flex size-9 cursor-pointer items-center justify-center rounded-lg bg-gray-100 text-lg font-bold text-gray-700 shadow-sm transition-all duration-150 hover:bg-gray-200 active:scale-95\"title=\"Zoom out\"aria-label=\"Zoom out\">-</button><button type=button class=\"h-9 cursor-pointer rounded-lg px-2 text-xs font-semibold text-gray-700 transition-colors hover:bg-gray-100\"title=\"Reset zoom\"aria-label=\"Reset zoom\"><!$><!/>%</button><button type=button class=\"flex size-9 cursor-pointer items-center justify-center rounded-lg bg-gray-100 text-lg font-bold text-gray-700 shadow-sm transition-all duration-150 hover:bg-gray-200 active:scale-95\"title=\"Zoom in\"aria-label=\"Zoom in\">+</button><div class=\"h-5 w-px bg-gray-300\"></div><button type=button class=\"flex size-9 cursor-pointer items-center justify-center rounded-lg bg-blue-600 text-white shadow transition-all duration-150 hover:bg-blue-700 active:scale-95\"title=\"Add parent node\"aria-label=\"Add parent node\"><svg class=size-5 viewBox=\"0 0 24 24\"fill=currentColor><path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\">"), ve = /*#__PURE__*/ u("<div class=\"relative mx-auto h-[calc(100vh-64px)] w-[calc(100vw-32px)] overflow-hidden\">"), ye = () => {
 	let e, [n, c] = _(!1), [u, m] = _({
 		x: 0,
 		y: 0
-	}), [g, b] = _(""), [x, S] = _(), C = () => {};
-	y(C);
-	let w = 0, T = 0, { board: [, A], service: j, newEdge: [M], zoom: [N, P] } = Z(), F = () => {
-		if (!e) return;
+	}), [g, y] = _(""), [b, x] = _(), S = 0, C = 0, { board: [, w], service: T, newEdge: [A], zoom: [j, M] } = J(), N = () => {
 		let t = e.scrollWidth - e.clientWidth, n = e.scrollHeight - e.clientHeight;
-		w = t > 0 ? e.scrollLeft / t : 0, T = n > 0 ? e.scrollTop / n : 0;
+		S = t > 0 ? e.scrollLeft / t : 0, C = n > 0 ? e.scrollTop / n : 0;
 	};
-	h(v(N, () => {
-		if (!e) return;
+	h(v(j, () => {
 		let t = e.scrollWidth - e.clientWidth, n = e.scrollHeight - e.clientHeight;
-		t > 0 && (e.scrollLeft = w * t), n > 0 && (e.scrollTop = T * n);
+		t > 0 && (e.scrollLeft = S * t), n > 0 && (e.scrollTop = C * n);
 	}, { defer: !0 }));
-	let I = E(j, { selector: (e) => e.context?.selected }), L = (e) => I() === e, R = E(j, {
+	let P = E(T, { selector: (e) => e.context?.selected }), F = (e) => P() === e, I = E(T, {
 		selector: (e) => (e.context.data?.nodes ?? []).map((e) => ({
 			id: e.id,
 			x: e.position.x,
@@ -728,104 +726,111 @@ var _e = /*#__PURE__*/ u("<div class=\"relative mx-auto h-[calc(100vh-64px)] w-[
 			content: e.data.content ?? "",
 			input: e.input
 		})),
-		equals: $
-	}), z = () => {
-		let e = N();
-		return e < 1 ? 500 * e : 500;
-	};
-	return t(D, {
-		onDragMove: ({ draggable: { transform: e, node: t, id: n }, overlay: r }) => {
-			if (b(n), L(n)) {
-				let i = t.offsetLeft + e.x / N(), a = t.offsetTop + e.y / N();
-				r?.node.style.setProperty("top", a * 2 + "px"), r?.node.style.setProperty("left", i * 2 + "px");
-				let o = e.x / N(), s = e.y / N();
-				t.style.setProperty("transform", `translate3d(${o}px, ${s}px, 0)`), j.send({
-					type: "MOVE_IMMEDIATE",
-					payload: {
-						id: `${n}`,
-						x: i,
-						y: a
-					}
-				}), m({ ...e });
+		equals: Z
+	}), L = () => `calc((500vw - 265px) * ${j()})`, R = () => `calc((500vh - 425px) * ${j()})`;
+	return (() => {
+		var h = i(ve);
+		return h.addEventListener("wheel", (e) => {
+			if (e.ctrlKey || e.metaKey) {
+				e.preventDefault(), N();
+				let t = e.deltaY < 0 ? .1 : -.1;
+				M((e) => Math.min(Math.max(Number((e + t).toFixed(2)), .2), 3));
 			}
-		},
-		onDragEnd: ({ draggable: { node: e, id: t } }) => {
-			if (!L(t)) return;
-			let n = e.offsetLeft + u().x / N(), r = e.offsetTop + u().y / N();
-			e.style.setProperty("top", r + "px"), e.style.setProperty("left", n + "px"), e.style.removeProperty("transform"), setTimeout(() => {
-				j.send({
-					type: "MOVE",
-					payload: {
-						id: `${t}`,
-						x: n,
-						y: r
-					}
-				}), m({
-					x: 0,
-					y: 0
-				});
-			}, 0);
-		},
-		get children() {
-			return [(() => {
-				var u = i(_e), p = u.firstChild, m = p.firstChild, [h, g] = a(m.nextSibling), _ = h.nextSibling, [v, y] = a(_.nextSibling), b = v.nextSibling, w = b.firstChild, [T, E] = a(w.nextSibling), D = T.nextSibling, [k, I] = a(D.nextSibling), L = p.nextSibling.firstChild, B = L.nextSibling, V = B.firstChild, [H, U] = a(V.nextSibling);
-				H.nextSibling;
-				var W = B.nextSibling, G = W.nextSibling.nextSibling;
-				return u.addEventListener("wheel", (e) => {
-					if (e.ctrlKey || e.metaKey) {
-						e.preventDefault(), F();
-						let t = e.deltaY < 0 ? .1 : -.1;
-						P((e) => Math.min(Math.max(Number((e + t).toFixed(2)), .2), 3));
-					}
-				}), p.addEventListener("scroll", F), d((t) => e = t, p), o(p, t(O, {}), h, g), o(p, t(re, {}), v, y), b.$$mousedown = (t) => {
-					if (M() || t.button !== 0 || !e) return;
-					j.send("DESELECT");
-					let n = t.clientX, r = t.clientY, i = e.scrollLeft, a = e.scrollTop;
-					c(!0);
-					let o = (t) => {
-						if (!e) return;
-						let o = t.clientX - n, s = t.clientY - r;
-						e.scrollLeft = i - o * 3, e.scrollTop = a - s * 3, F();
-					}, s = () => {
-						window.removeEventListener("mousemove", o), window.removeEventListener("mouseup", s), setTimeout(() => c(!1), 200), C = void 0;
-					};
-					C = s, window.addEventListener("mousemove", o), window.addEventListener("mouseup", s);
-				}, d(A, b), o(b, t(ue, {}), T, E), o(b, t(f, {
-					get each() {
-						return R();
-					},
-					children: ge
-				}), k, I), L.$$click = () => {
-					F(), S(void 0), P((e) => Math.max(.2, Number((e - .1).toFixed(2))));
-				}, B.$$click = () => {
-					F(), x() ? (P(x()), S(void 0)) : (S(N()), P(1));
-				}, o(B, () => Math.round(N() * 100), H, U), W.$$click = () => {
-					F(), S(void 0), P((e) => Math.min(3, Number((e + .1).toFixed(2))));
-				}, G.$$click = () => j.send("ADD_PARENT"), r((e) => {
-					var t = !!n(), r = `calc(${z()}vh - 85px)`, i = `calc(${z()}vw - 53px)`, a = N();
-					return t !== e.e && b.classList.toggle("cursor-grabbing", e.e = t), r !== e.t && l(b, "height", e.t = r), i !== e.a && l(b, "width", e.a = i), a !== e.o && l(b, "scale", e.o = a), e;
-				}, {
-					e: void 0,
-					t: void 0,
-					a: void 0,
-					o: void 0
-				}), s(), u;
-			})(), t(p, {
-				get when() {
-					return !g() || !L(g());
-				},
-				get children() {
-					return t(k, { children: "" });
+		}), o(h, t(D, {
+			onDragMove: ({ draggable: { transform: e, node: t, id: n } }) => {
+				if (y(n), F(n)) {
+					let r = t.parentElement?.parentElement, i = j(), a = r ? Math.max(0, r.clientWidth / i - t.offsetWidth) : Infinity, o = r ? Math.max(0, r.clientHeight / i - t.offsetHeight) : Infinity, s = t.offsetLeft + e.x / i, c = t.offsetTop + e.y / i, l = Math.min(Math.max(s, 0), a), u = Math.min(Math.max(c, 0), o), d = l - t.offsetLeft, f = u - t.offsetTop;
+					t.style.setProperty("transform", `translate3d(${d}px, ${f}px, 0)`), T.send({
+						type: "MOVE_IMMEDIATE",
+						payload: {
+							id: `${n}`,
+							x: l,
+							y: u
+						}
+					}), m({
+						x: d * i,
+						y: f * i
+					});
 				}
-			})];
-		}
-	});
+			},
+			onDragEnd: ({ draggable: { node: e, id: t } }) => {
+				if (!F(t)) return;
+				let n = e.parentElement?.parentElement, r = j(), i = n ? Math.max(0, n.clientWidth / r - e.offsetWidth) : Infinity, a = n ? Math.max(0, n.clientHeight / r - e.offsetHeight) : Infinity, o = e.offsetLeft + u().x / r, s = e.offsetTop + u().y / r, c = Math.min(Math.max(o, 0), i), l = Math.min(Math.max(s, 0), a);
+				e.style.setProperty("top", l + "px"), e.style.setProperty("left", c + "px"), e.style.removeProperty("transform"), setTimeout(() => {
+					T.send({
+						type: "MOVE",
+						payload: {
+							id: `${t}`,
+							x: c,
+							y: l
+						}
+					}), m({
+						x: 0,
+						y: 0
+					});
+				}, 0);
+			},
+			get children() {
+				return [
+					(() => {
+						var u = i(ge), p = u.firstChild, [m, h] = a(p.nextSibling), g = m.nextSibling, _ = g.firstChild, v = _.firstChild, [y, b] = a(v.nextSibling), x = y.nextSibling, [S, C] = a(x.nextSibling), E = S.nextSibling, [D, k] = a(E.nextSibling);
+						return u.addEventListener("scroll", N), d((t) => e = t, u), o(u, t(O, {}), m, h), g.$$mousedown = (t) => {
+							if (A() || t.button !== 0) return;
+							T.send("DESELECT");
+							let n = t.clientX, r = t.clientY, i = e.scrollLeft, a = e.scrollTop;
+							c(!0);
+							let o = (t) => {
+								let o = t.clientX - n, s = t.clientY - r;
+								e.scrollLeft = i - o * 3, e.scrollTop = a - s * 3, N();
+							}, s = () => {
+								window.removeEventListener("mousemove", o), window.removeEventListener("mouseup", s), setTimeout(() => c(!1), 200);
+							};
+							window.addEventListener("mousemove", o), window.addEventListener("mouseup", s);
+						}, d(w, g), o(_, t(ie, {}), y, b), o(_, t(le, {}), S, C), o(_, t(f, {
+							get each() {
+								return I();
+							},
+							children: he
+						}), D, k), r((e) => {
+							var t = !!n(), r = R(), i = L(), a = j();
+							return t !== e.e && g.classList.toggle("cursor-grabbing", e.e = t), r !== e.t && l(g, "height", e.t = r), i !== e.a && l(g, "width", e.a = i), a !== e.o && l(_, "scale", e.o = a), e;
+						}, {
+							e: void 0,
+							t: void 0,
+							a: void 0,
+							o: void 0
+						}), s(), u;
+					})(),
+					(() => {
+						var e = i(_e), t = e.firstChild, n = t.nextSibling, r = n.firstChild, [c, l] = a(r.nextSibling);
+						c.nextSibling;
+						var u = n.nextSibling, d = u.nextSibling.nextSibling;
+						return t.$$click = () => {
+							N(), x(void 0), M((e) => Math.max(1 / 5, Number((e - .1).toFixed(2))));
+						}, n.$$click = () => {
+							N(), b() ? (M(b()), x(void 0)) : (x(j()), M(1));
+						}, o(n, () => Math.round(j() * 100), c, l), u.$$click = () => {
+							N(), x(void 0), M((e) => Math.min(3, Number((e + .1).toFixed(2))));
+						}, d.$$click = () => T.send("ADD_PARENT"), s(), e;
+					})(),
+					t(p, {
+						get when() {
+							return !g() || !F(g());
+						},
+						get children() {
+							return t(k, { children: "" });
+						}
+					})
+				];
+			}
+		})), h;
+	})();
 };
 n(["mousedown", "click"]);
 //#endregion
 //#region src/ui/components/FlowChart.tsx
-var ye = /*#__PURE__*/ u("<div class=\"relative h-full w-full\"><div class=\"relative h-full w-full bg-white bg-size-[30px_30px]\"style=\"background-image:radial-gradient(circle, #b8b8b8bf 1px, rgba(0, 0, 0, 0) 1px)\">"), be = (e) => {
-	let n = e.config?.nodes ?? ee, a = e.config?.edges, { service: c, newEdge: [u, d], getBoardPoint: f } = Z();
+var be = /*#__PURE__*/ u("<div class=\"relative h-full w-full\"><div class=\"relative h-full w-full bg-white bg-size-[30px_30px]\"style=\"background-image:radial-gradient(circle, #b8b8b8bf 1px, rgba(0, 0, 0, 0) 1px)\">"), xe = (e) => {
+	let n = e.config?.nodes ?? ne, a = e.config?.edges, { service: c, newEdge: [u, d], getBoardPoint: f } = J();
 	return b(() => {
 		c.start(), c.send({
 			type: "CONFIGURE",
@@ -835,7 +840,7 @@ var ye = /*#__PURE__*/ u("<div class=\"relative h-full w-full\"><div class=\"rel
 			}
 		});
 	}), y(c.stop), (() => {
-		var e = i(ye), n = e.firstChild;
+		var e = i(be), n = e.firstChild;
 		return e.$$mousemove = (e) => {
 			let t = u();
 			if (t) {
@@ -846,14 +851,14 @@ var ye = /*#__PURE__*/ u("<div class=\"relative h-full w-full\"><div class=\"rel
 					y1: n.y
 				});
 			}
-		}, e.$$mouseup = () => d(), o(n, t(ve, {})), r((e) => l(n, "cursor", u() ? "inherit" : "crosshair")), s(), e;
+		}, e.$$mouseup = () => d(), o(n, t(ye, {})), r((e) => l(n, "cursor", u() ? "inherit" : "crosshair")), s(), e;
 	})();
 };
 n(["mouseup", "mousemove"]);
 //#endregion
 //#region src/ui/Flow.tsx
-var xe = (e) => t(te, { get children() {
-	return t(be, e);
+var Se = (e) => t(re, { get children() {
+	return t(xe, e);
 } });
 //#endregion
-export { M as CLASSES, xe as Flow };
+export { M as CLASSES, Se as Flow };