@bemedev/mind-flow 0.3.0 → 0.3.2

package/lib/index.es.js

@@ -14,7 +14,7 @@ var M = /* @__PURE__ */ "fill-transparent cursor-pointer relative stroke-[rgba(1
 }), I = {
 	horizontal: 55,
 	vertical: 40
-}, L = [{
+}, ee = [{
 	id: "node-0",
 	data: {
 		content: "Some text",
@@ -25,7 +25,7 @@ var M = /* @__PURE__ */ "fill-transparent cursor-pointer relative stroke-[rgba(1
 		x: 350,
 		y: 100
 	}
-}], R = (e, t) => {
+}], te = (e, t) => {
 	let n = h(e(), t);
 	return [
 		({ children: e }) => n.Provider({
@@ -35,11 +35,11 @@ var M = /* @__PURE__ */ "fill-transparent cursor-pointer relative stroke-[rgba(1
 		() => x(n),
 		n
 	];
-}, z = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", ee = (e = 21) => {
+}, ne = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", re = (e = 21) => {
 	let t = "", n = crypto.getRandomValues(new Uint8Array(e |= 0));
-	for (; e--;) t += z[n[e] & 63];
+	for (; e--;) t += ne[n[e] & 63];
 	return t;
-}, B = (e, t) => `edge = ${e} => ${t}`, V = (e) => `node-${e}`, te = (e, t = {
+}, L = (e, t) => `edge = ${e} => ${t}`, R = (e) => `node-${e}`, ie = (e, t = {
 	width: 192,
 	height: 50,
 	inputOffset: P
@@ -59,37 +59,37 @@ var M = /* @__PURE__ */ "fill-transparent cursor-pointer relative stroke-[rgba(1
 		outputOffset: i,
 		inputOffset: a
 	};
-}, H = E({
+}, z = E({
 	x: "number",
 	y: "number"
 });
 E(({ optional: e, use: t }) => ({
-	input: e(t(H)),
-	output: t(H)
+	input: e(t(z)),
+	output: t(z)
 }));
-var U = E({
+var B = E({
 	from: "string",
 	to: "string"
-}), W = E(({ optional: e, use: t }) => ({
-	position: t(H),
+}), V = E(({ optional: e, use: t }) => ({
+	position: t(z),
 	data: {
 		label: e("string"),
 		content: "string"
 	},
 	input: "boolean"
-})), G = U, K = E(({ optional: e, use: t }) => ({
+})), H = B, U = E(({ optional: e, use: t }) => ({
 	width: "number",
 	height: "number",
-	output: t(H),
-	input: e(t(H)),
-	inputOffset: e(t(H)),
-	outputOffset: e(t(H))
-})), q = E({
+	output: t(z),
+	input: e(t(z)),
+	inputOffset: e(t(z)),
+	outputOffset: e(t(z))
+})), W = E({
 	x0: "number",
 	y0: "number",
 	x1: "number",
 	y1: "number"
-}), ne = E(({ intersection: e, use: t }) => e({ from: "string" }, t(q))), J = E(({ optional: e }) => ({
+}), ae = E(({ intersection: e, use: t }) => e({ from: "string" }, t(W))), G = E(({ optional: e }) => ({
 	self: {
 		left: "number",
 		top: "number",
@@ -102,7 +102,7 @@ var U = E({
 		height: "number",
 		width: "number"
 	})
-})), re = S({
+})), oe = S({
 	initial: "idle",
 	on: { SET_BOARD: { actions: ["setBoard"] } },
 	states: {
@@ -181,10 +181,10 @@ var U = E({
 }, {
 	eventsMap: E(({ intersection: e, use: t, array: n }) => ({
 		CONFIGURE: {
-			nodes: n(e(t(W), { id: "string" })),
-			edges: n(e(t(G), { id: "string" }))
+			nodes: n(e(t(V), { id: "string" })),
+			edges: n(e(t(H), { id: "string" }))
 		},
-		SET_BOARD: t(J),
+		SET_BOARD: t(G),
 		CONFIGURE_EMPTY: "never",
 		MOVE: {
 			id: "string",
@@ -202,22 +202,22 @@ var U = E({
 		DELETE: "string",
 		SELECT: "string",
 		DESELECT: "never",
-		ADD_EDGE: t(U),
+		ADD_EDGE: t(B),
 		START_NEW_EDGE: "string",
-		MOVE_NEW_EDGE: t(H),
+		MOVE_NEW_EDGE: t(z),
 		CLEAR_NEW_EDGE: "never",
 		ZOOM: "number",
 		TOGGLE_ZOOM: "never",
 		ADD_DIMENSION: {
 			id: "string",
-			dimension: t(K)
+			dimension: t(U)
 		}
 	})),
 	sync: !0,
 	pContext: E(({ union: e, optional: t, record: n, use: r, custom: i }) => ({
 		generatedId: e("string", "null"),
 		previousZoom: t("number"),
-		dimensions: n(r(K)),
+		dimensions: n(r(U)),
 		getBoardPosition: i(),
 		clampPosition: i(),
 		calculateDimensions: i()
@@ -225,30 +225,35 @@ var U = E({
 	context: E(({ optional: e, use: t, array: n, record: r }) => ({
 		data: e({
 			nodes: n({
-				...t(W),
+				...t(V),
 				id: "string"
 			}),
 			edges: n({
-				...t(G),
+				...t(H),
 				id: "string"
 			})
 		}),
-		board: e(t(J)),
-		edgesPositions: r(t(q)),
-		newEdge: e(t(ne)),
+		board: e(t(G)),
+		edgesPositions: r(t(W)),
+		newEdge: e(t(ae)),
 		selected: e("string"),
 		updatingUI: e("boolean"),
 		zoom: "number",
-		bounds: t(H)
+		bounds: t(z)
 	}))
 }).provideOptions(({ assign: e, batch: t, erase: n, filter: r, action: i }) => ({ actions: {
 	configure: t(e("data", { CONFIGURE: ({ payload: e }) => e }), e("newEdge", () => void 0), e("updatingUI", () => !1), i(({ pContext: e }) => {
 		e.generatedId = null;
 	}), i({ CONFIGURE: ({ payload: { nodes: e }, pContext: { dimensions: t } }) => {
 		e.forEach(({ id: e, position: n }) => {
-			t[e] = te(n);
+			t[e] = ie(n);
 		});
 	} })),
+	setBoard: e("board", { SET_BOARD: ({ payload: e }) => e }),
+	generateID: i(({ pContext: e }) => e.generatedId = re()),
+	select: e("selected", { SELECT: ({ payload: e }) => e }),
+	clearNewEdge: n("newEdge"),
+	deselect: n("selected"),
 	startNewEdge: e("newEdge", { START_NEW_EDGE: ({ payload: e, pContext: { dimensions: t } }) => {
 		let { x: n, y: r } = t[e].output;
 		return {
@@ -259,7 +264,6 @@ var U = E({
 			y1: r
 		};
 	} }),
-	setBoard: e("board", { SET_BOARD: ({ payload: e }) => e }),
 	buildUI: t(e("edgesPositions", {
 		MOVE: ({ context: { data: e, edgesPositions: t }, payload: n, pContext: { dimensions: r } }) => {
 			let i = e?.edges, a = r[n.id], o = a?.outputOffset ?? F(a?.width), s = a?.inputOffset ?? P, c = {
@@ -274,20 +278,26 @@ var U = E({
 			}), t;
 		},
 		MOVE_IMMEDIATE: ({ context: { data: e, edgesPositions: t }, payload: n, pContext: { dimensions: r } }) => ((e?.edges)?.forEach(({ from: e, to: i, id: a }) => {
-			if (e === n.id) {
-				let e = r[n.id], i = e?.outputOffset ?? F(e?.width), o = n.x + i.x, s = n.y + i.y;
-				t[a].x0 = o, t[a].y0 = s, e && (e.output.x = o, e.output.y = s);
-			}
-			if (i === n.id) {
-				let e = r[n.id], i = e?.inputOffset ?? P, o = n.x + i.x, s = n.y + i.y;
-				t[a].x1 = o, t[a].y1 = s, e && (e.input = {
-					x: o,
-					y: s
-				});
+			let o = r[n.id], s = t[a];
+			if (!(!s || !o)) {
+				if (e === n.id) {
+					let e = o.outputOffset ?? F(o.width), t = n.x + e.x, r = n.y + e.y;
+					s.x0 = t, s.y0 = r, o.output = {
+						x: t,
+						y: r
+					};
+				}
+				if (i === n.id) {
+					let e = o?.inputOffset ?? P, t = n.x + e.x, r = n.y + e.y;
+					s.x1 = t, s.y1 = r, o.input = {
+						x: t,
+						y: r
+					};
+				}
 			}
 		}), t),
 		else: ({ context: { data: e, edgesPositions: t }, pContext: { dimensions: n } }) => {
-			let r = e?.edges ?? [];
+			let r = T.typed(e?.edges);
 			return t = {}, r.forEach(({ from: e, id: r, to: i }) => {
 				let a = n[e]?.output, o = n[i]?.input;
 				a && o ? t[r] = {
@@ -302,50 +312,41 @@ var U = E({
 	addDimension: i({ ADD_DIMENSION: ({ payload: { id: e, dimension: t }, pContext: { dimensions: n } }) => {
 		n[e] = t;
 	} }),
-	generateID: i(({ pContext: e }) => {
-		e.generatedId = ee();
-	}),
 	linkChild: t(e("data.edges", { ADD_CHILD: ({ context: { data: e }, pContext: t, payload: n }) => {
-		let r = T.typed(e?.edges), i = n, a = t?.generatedId, o = V(a), s = B(i, o);
+		let r = T.typed(e?.edges), i = n, a = t?.generatedId, o = R(a), s = L(i, o);
 		return r.push({
 			id: s,
 			from: i,
 			to: o
 		}), r;
-	} }), e("selected", ({ pContext: { generatedId: e } }) => V(e))),
+	} }), e("selected", ({ pContext: { generatedId: e } }) => R(e))),
 	linkSibling: t(e("data.edges", { ADD_SIBLING: ({ pContext: e, payload: t, context: { data: n } }) => {
 		let r = T.typed(n?.edges), i = e?.generatedId, a = r.find(({ to: e }) => e === t)?.from;
 		if (!a) return r;
-		let o = V(i), s = B(a, o);
+		let o = R(i), s = L(a, o);
 		return r.push({
 			from: a,
 			to: o,
 			id: s
 		}), r;
-	} }), e("selected", ({ pContext: { generatedId: e } }) => V(e))),
-	selectParent: e("selected", ({ pContext: { generatedId: e } }) => V(e)),
-	moveNode: e("data.nodes", { MOVE: ({ context: { data: e }, payload: t }) => {
-		let { id: n, x: r, y: i } = t;
-		return e?.nodes?.map((e) => e.id === n ? {
-			...e,
-			position: {
-				x: r,
-				y: i
-			}
-		} : e) ?? [];
-	} }),
-	select: e("selected", { SELECT: ({ payload: e }) => e }),
+	} }), e("selected", ({ pContext: { generatedId: e } }) => R(e))),
+	selectParent: e("selected", ({ pContext: { generatedId: e } }) => R(e)),
+	moveNode: e("data.nodes", { MOVE: ({ context: { data: e }, payload: { id: t, x: n, y: r } }) => e?.nodes?.map((e) => e.id === t ? {
+		...e,
+		position: {
+			x: n,
+			y: r
+		}
+	} : e) }),
 	delete: t(r("data.edges", { DELETE: ({ id: e, from: t, to: n }, r, { payload: i }) => e !== i && t !== i && n !== i }), r("data.nodes", { DELETE: ({ id: e }, t, { payload: n }) => e !== n })),
 	addEdge: t(e("data.edges", { ADD_EDGE: ({ context: e, payload: { from: t, to: n } }) => {
-		let r = e.data?.edges ?? [], i = B(t, n);
+		let r = e.data?.edges ?? [], i = L(t, n);
 		return r.some((e) => e.id === i) ? r : [...r, {
 			id: i,
 			from: t,
 			to: n
 		}];
 	} }), n("newEdge")),
-	clearNewEdge: n("newEdge"),
-	deselect: n("selected"),
 	zoom: e("zoom", { ZOOM: ({ context: { zoom: e }, payload: t, pContext: n }) => {
 		let r = e + t, i = Math.min(Math.max(Number(r.toFixed(2)), .2), 3);
 		return n.previousZoom = void 0, i;
@@ -353,9 +354,56 @@ var U = E({
 	toggleZoom: e("zoom", { TOGGLE_ZOOM: ({ context: { zoom: e }, pContext: t }) => {
 		let n = t.previousZoom;
 		return n === void 0 ? (t.previousZoom = e, 1) : (t.previousZoom = void 0, n);
+	} }),
+	placeChild: e("data.nodes", { ADD_CHILD: ({ payload: e, context: { data: t, board: n }, pContext: r }) => {
+		if (!n) return t?.nodes;
+		let i = t?.nodes;
+		if (!e) return i;
+		let a = i?.find((t) => t.id === e);
+		if (!a) return i;
+		let o = r.dimensions[e], s = `node-${r.generatedId}`, c = o?.width ?? 192, l = o?.height ?? 50, u = a.position.x + c + 100, d = a.position.y, f = r.clampPosition(n, u, d, c, l), p = r.calculateDimensions(f, o);
+		return i?.push({
+			id: s,
+			data: { content: "<Nouveau nœud>" },
+			input: !0,
+			position: f
+		}), r.dimensions[s] = p, i;
+	} }),
+	placeParent: e("data.nodes", { ADD_PARENT: ({ context: { data: e, zoom: t = 1, board: n }, pContext: r }) => {
+		if (!n) return e?.nodes;
+		let i = e?.nodes, a = `node-${r.generatedId}`, o = n.parent, s = o?.scrollLeft ?? 0, c = o?.scrollTop ?? 0, l = o?.width ?? 0, u = o?.height ?? 0, d = t, f = (s + l / 2) / d, p = (c + u / 2) / d, m = r.clampPosition(n, f, p), h = r.calculateDimensions(m);
+		return i?.push({
+			id: a,
+			data: { content: "<Nouveau nœud>" },
+			input: !1,
+			position: m
+		}), r.dimensions[a] = h, i;
+	} }),
+	placeSibling: e("data.nodes", { ADD_SIBLING: ({ payload: e, context: { data: t, board: n }, pContext: r }) => {
+		if (!n) return t?.nodes;
+		let i = t?.edges, a = t?.nodes, o = i?.find((t) => t.to === e)?.from;
+		if (!o) return a;
+		let s = a?.find((e) => e.id === o);
+		if (!s) return a;
+		let c = r.dimensions[o], l = `node-${r.generatedId}`, u = c?.width ?? 192, d = c?.height ?? 50, f = s.position.x + u + 100, p = s.position.y + 100, m = r.clampPosition(n, f, p, u, d), h = r.calculateDimensions(m, c);
+		return a?.push({
+			id: l,
+			data: { content: "<Nouveau nœud>" },
+			input: !0,
+			position: m
+		}), r.dimensions[l] = h, a;
+	} }),
+	moveNewEdge: e("newEdge", { MOVE_NEW_EDGE: ({ context: { newEdge: e, board: t }, payload: n, pContext: r }) => {
+		if (!t || !e) return;
+		let { x: i, y: a } = r.getBoardPosition(n.x, n.y, t);
+		return {
+			...e,
+			x1: i,
+			y1: a
+		};
 	} })
-} })), [ie, Y] = R(() => {
-	let e = C(re, {
+} })), [K, q] = te(() => {
+	let e = C(oe, {
 		context: {
 			zoom: 1,
 			edgesPositions: {},
@@ -367,7 +415,7 @@ var U = E({
 		pContext: {
 			generatedId: null,
 			dimensions: {},
-			getBoardPosition(t, n, r) {
+			getBoardPosition: (t, n, r) => {
 				if (!r) return {
 					x: t,
 					y: n
@@ -378,7 +426,7 @@ var U = E({
 					y: (n - r.self.top) / i
 				};
 			},
-			clampPosition(t, n, r, i = 192, a = 50) {
+			clampPosition: (t, n, r, i = 192, a = 50) => {
 				let o = t?.parent;
 				if (!o) return {
 					x: n,
@@ -413,77 +461,29 @@ var U = E({
 			}
 		}
 	});
-	return e.addOptions(({ assign: e }) => ({ actions: {
-		placeChild: e("data.nodes", { ADD_CHILD: ({ payload: e, context: { data: t, board: n }, pContext: r }) => {
-			if (!n) return t?.nodes;
-			let i = t?.nodes;
-			if (!e) return i;
-			let a = i?.find((t) => t.id === e);
-			if (!a) return i;
-			let o = r.dimensions[e], s = `node-${r.generatedId}`, c = o?.width ?? 192, l = o?.height ?? 50, u = a.position.x + c + 100, d = a.position.y, f = r.clampPosition(n, u, d, c, l), p = r.calculateDimensions(f, o);
-			return i?.push({
-				id: s,
-				data: { content: "<Nouveau nœud>" },
-				input: !0,
-				position: f
-			}), r.dimensions[s] = p, i;
-		} }),
-		placeParent: e("data.nodes", { ADD_PARENT: ({ context: { data: e, zoom: t = 1, board: n }, pContext: r }) => {
-			if (!n) return e?.nodes;
-			let i = e?.nodes, a = `node-${r.generatedId}`, o = n.parent, s = o?.scrollLeft ?? 0, c = o?.scrollTop ?? 0, l = o?.width ?? 0, u = o?.height ?? 0, d = t, f = (s + l / 2) / d, p = (c + u / 2) / d, m = r.clampPosition(n, f, p), h = r.calculateDimensions(m);
-			return i?.push({
-				id: a,
-				data: { content: "<Nouveau nœud>" },
-				input: !1,
-				position: m
-			}), r.dimensions[a] = h, i;
-		} }),
-		placeSibling: e("data.nodes", { ADD_SIBLING: ({ payload: e, context: { data: t, board: n }, pContext: r }) => {
-			if (!n) return t?.nodes;
-			let i = t?.edges, a = t?.nodes, o = i?.find((t) => t.to === e)?.from;
-			if (!o) return a;
-			let s = a?.find((e) => e.id === o);
-			if (!s) return a;
-			let c = r.dimensions[o], l = `node-${r.generatedId}`, u = c?.width ?? 192, d = c?.height ?? 50, f = s.position.x + u + 100, p = s.position.y + 100, m = r.clampPosition(n, f, p, u, d), h = r.calculateDimensions(m, c);
-			return a?.push({
-				id: l,
-				data: { content: "<Nouveau nœud>" },
-				input: !0,
-				position: m
-			}), r.dimensions[l] = h, a;
-		} }),
-		moveNewEdge: e("newEdge", { MOVE_NEW_EDGE: ({ context: { newEdge: e, board: t }, payload: n, pContext: r }) => {
-			if (!t || !e) return;
-			let { x: i, y: a } = r.getBoardPosition(n.x, n.y, t);
-			return {
-				...e,
-				x1: i,
-				y1: a
-			};
-		} })
-	} })), e.start(), e;
-}, { name: "FlowContext" }), X = Object.prototype.hasOwnProperty;
-function Z(e, t, n) {
-	for (n of e.keys()) if (Q(n, t)) return n;
+	return e.start(), e;
+}, { name: "FlowContext" }), J = Object.prototype.hasOwnProperty;
+function Y(e, t, n) {
+	for (n of e.keys()) if (X(n, t)) return n;
 }
-function Q(e, t) {
+function X(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-- && Q(e[r], t[r]););
+			if ((r = e.length) === t.length) for (; r-- && X(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 = Z(t, i), !i) || !t.has(i)) return !1;
+			for (r of e) if (i = r, i && typeof i == "object" && (i = Y(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 = Z(t, i), !i) || !Q(r[1], t.get(i))) return !1;
+			for (r of e) if (i = r[0], i && typeof i == "object" && (i = Y(t, i), !i) || !X(r[1], t.get(i))) return !1;
 			return !0;
 		}
 		if (n === ArrayBuffer) e = new Uint8Array(e), t = new Uint8Array(t);
@@ -496,7 +496,7 @@ function Q(e, t) {
 			return r === -1;
 		}
 		if (!n || typeof e == "object") {
-			for (n in r = 0, e) if (X.call(e, n) && ++r && !X.call(t, n) || !(n in t) || !Q(e[n], t[n])) return !1;
+			for (n in r = 0, e) if (J.call(e, n) && ++r && !J.call(t, n) || !(n in t) || !X(e[n], t[n])) return !1;
 			return Object.keys(t).length === r;
 		}
 	}
@@ -504,8 +504,8 @@ function Q(e, t) {
 }
 //#endregion
 //#region src/ui/components/Bounds.tsx
-var ae = () => {
-	let e = Y(), t = f(e, { selector: ({ context: e }) => e.zoom }), n = f(e, { selector: ({ context: e }) => e.board }), [r, { addTransformer: i, removeTransformer: a, onDragStart: o, onDragEnd: s }] = j(), c = {
+var se = () => {
+	let e = q(), t = f(e, { selector: ({ context: e }) => e.zoom }), n = f(e, { selector: ({ context: e }) => e.board }), [r, { addTransformer: i, removeTransformer: a, onDragStart: o, onDragEnd: s }] = j(), c = {
 		id: "clamp-to-container",
 		order: 100,
 		callback: (e) => {
@@ -525,84 +525,65 @@ var ae = () => {
 	}), s(({ draggable: e }) => {
 		a("draggables", e.id, c.id);
 	}), null;
-}, oe = /*#__PURE__*/ u("<svg><path class=\"relative cursor-pointer fill-transparent\"></svg>", !1, !0, !1), se = /*#__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), $ = (e) => e * 100 / 200, ce = ({ x0: e, y0: t, x1: n, y1: r }) => `M ${e} ${t} C ${e + $(Math.abs(n - e))} ${t}, ${n - $(Math.abs(n - e))} ${r}, ${n} ${r}`, le = (n) => {
-	let a = Y(), o = f(a, {
-		selector: ({ context: e }) => {
-			if (n.isNew) {
-				let t = e.newEdge;
-				return t ? {
-					x0: t.x0,
-					y0: t.y0,
-					x1: t.x1,
-					y1: t.y1
-				} : void 0;
-			}
-			return e.edgesPositions[n.id];
-		},
-		equals: Q
+}, ce = /*#__PURE__*/ u("<svg><path class=\"relative cursor-pointer fill-transparent\"></svg>", !1, !0, !1), le = /*#__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), Z = (e) => e * 100 / 200, ue = ({ x0: e, y0: t, x1: n, y1: r }) => `M ${e} ${t} C ${e + Z(Math.abs(n - e))} ${t}, ${n - Z(Math.abs(n - e))} ${r}, ${n} ${r}`, Q = (n) => {
+	let a = q(), o = f(a, {
+		selector: ({ context: { newEdge: e, edgesPositions: t } }) => n.isNew ? e : t[n.id],
+		equals: X
 	}), u = f(a, { selector: (e) => e.context.selected === n.id }), d = () => {
 		let e = o();
-		return e ? {
+		return {
 			x: e.x0 + (e.x1 - e.x0) / 2,
 			y: e.y0 + (e.y1 - e.y0) / 2
-		} : {
-			x: 0,
-			y: 0
 		};
 	};
-	return t(m, {
+	return [(() => {
+		var t = i(ce);
+		return t.$$mousedown = (e) => (e.stopPropagation(), a.send({
+			type: "SELECT",
+			payload: n.id
+		})), r((r) => {
+			var i = {
+				"stroke-[rgba(168,168,168,0.4)] stroke-3 z-200": !!n.isNew,
+				"stroke-[rgba(168,168,168,1)] stroke-4 z-100": u() && !n.isNew,
+				"stroke-[rgba(168,168,168,0.8)] stroke-3": !u() && !n.isNew
+			}, a = n.isNew ? "none" : "all", s = ue(o());
+			return r.e = e(t, i, r.e), a !== r.t && l(t, "pointer-events", r.t = a), s !== r.a && c(t, "d", r.a = s), r;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0
+		}), s(), t;
+	})(), t(m, {
 		get when() {
-			return o();
+			return u();
 		},
-		children: (o) => [(() => {
-			var t = i(oe);
-			return t.$$mousedown = (e) => (e.stopPropagation(), a.send({
-				type: "SELECT",
-				payload: n.id
-			})), r((r) => {
-				var i = {
-					"stroke-[rgba(168,168,168,0.4)] stroke-3 z-200": !!n.isNew,
-					"stroke-[rgba(168,168,168,1)] stroke-4 z-100": u() && !n.isNew,
-					"stroke-[rgba(168,168,168,0.8)] stroke-3": !u() && !n.isNew
-				}, a = n.isNew ? "none" : "all", s = ce(o());
-				return r.e = e(t, i, r.e), a !== r.t && l(t, "pointer-events", r.t = a), s !== r.a && c(t, "d", r.a = s), r;
-			}, {
-				e: void 0,
-				t: void 0,
-				a: void 0
-			}), s(), t;
-		})(), t(m, {
-			get when() {
-				return u();
-			},
-			get children() {
-				var e = i(se);
-				return e.$$mousedown = (e) => {
-					e.stopPropagation(), a.send({
-						type: "DELETE",
-						payload: n.id
-					});
-				}, r(() => c(e, "transform", `translate(${d().x}, ${d().y})`)), s(), e;
-			}
-		})]
-	});
+		get children() {
+			var e = i(le);
+			return e.$$mousedown = (e) => {
+				e.stopPropagation(), a.send({
+					type: "DELETE",
+					payload: n.id
+				});
+			}, r(() => c(e, "transform", `translate(${d().x}, ${d().y})`)), s(), e;
+		}
+	})];
 };
 n(["mousedown"]);
 //#endregion
 //#region src/ui/components/EdgesBoard.tsx
-var ue = /*#__PURE__*/ u("<svg class=\"pointer-events-none h-full w-full overflow-visible\"><!$><!/><!$><!/>"), de = () => {
-	let e = Y(), n = f(e, { selector: (e) => !!e.context.newEdge }), r = f(e, {
+var de = /*#__PURE__*/ u("<svg class=\"pointer-events-none h-full w-full overflow-visible\"><!$><!/><!$><!/>"), fe = () => {
+	let e = q(), n = f(e, { selector: (e) => !!e.context.newEdge }), r = f(e, {
 		selector: ({ context: e }) => Object.keys(e.edgesPositions),
 		equals: (e, t) => e.length === t.length
 	});
 	return (() => {
-		var e = i(ue), s = e.firstChild, [c, l] = a(s.nextSibling), u = c.nextSibling, [d, f] = a(u.nextSibling);
+		var e = i(de), s = e.firstChild, [c, l] = a(s.nextSibling), u = c.nextSibling, [d, f] = a(u.nextSibling);
 		return o(e, t(m, {
 			get when() {
 				return n();
 			},
 			get children() {
-				return t(le, {
+				return t(Q, {
 					id: "__#new-edge#__TEMP",
 					isNew: !0
 				});
@@ -611,14 +592,14 @@ var ue = /*#__PURE__*/ u("<svg class=\"pointer-events-none h-full w-full overflo
 			get each() {
 				return r();
 			},
-			children: (e) => t(le, { id: e })
+			children: (e) => t(Q, { id: e })
 		}), d, f), e;
 	})();
-}, fe = /*#__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\">"), pe = /*#__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>"), me = /*#__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>"), he = /*#__PURE__*/ u("<span class=\"min-w-max border-b border-[#f0f0f0] p-3 whitespace-nowrap text-red-600 select-none\">"), ge = /*#__PURE__*/ u("<div class=\"p-3 select-none\">"), _e = (n) => {
-	let u = Y(), p = f(u, {
+}, pe = /*#__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\">"), me = /*#__PURE__*/ u("<div id=inputs 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>"), he = /*#__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=outputs 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>"), ge = /*#__PURE__*/ u("<span class=\"min-w-max border-b border-[#f0f0f0] p-3 whitespace-nowrap text-red-600 select-none\">"), $ = /*#__PURE__*/ u("<div class=\"p-3 select-none\">"), _e = (n) => {
+	let u = q(), p = f(u, { selector: (e) => e.context.newEdge }), h = A(n.id), g = f(u, {
 		selector: ({ context: e }) => {
 			let t = w.typed(e.data?.nodes).find((e) => e.id === n.id);
-			if (t) return {
+			return {
 				x: t.position.x,
 				y: t.position.y,
 				label: t.data.label,
@@ -626,29 +607,29 @@ var ue = /*#__PURE__*/ u("<svg class=\"pointer-events-none h-full w-full overflo
 				input: t.input
 			};
 		},
-		equals: Q
-	}), h = f(u, { selector: (e) => e.context.newEdge }), g = f(u, { selector: (e) => e.context.selected === n.id }), _ = f(u, { selector: ({ context: { data: e } }) => {
+		equals: X
+	}), _ = f(u, { selector: ({ context: e }) => e.selected === n.id }), v = f(u, { selector: ({ context: { data: e } }) => {
 		let t = e?.edges;
 		return t ? t.some(({ to: e }) => e === n.id) : !1;
-	} }), v = A(n.id);
+	} });
 	return (() => {
-		var f = i(me), y = f.firstChild, b = y.firstChild, x = b.nextSibling, [S, C] = a(x.nextSibling), w = S.nextSibling, T = y.nextSibling, [E, D] = a(T.nextSibling), O = E.nextSibling, [k, A] = a(O.nextSibling), j = k.nextSibling, [M, N] = a(j.nextSibling), P = M.nextSibling, F = P.firstChild;
+		var f = i(he), y = f.firstChild, b = y.firstChild, x = b.nextSibling, [S, C] = a(x.nextSibling), w = S.nextSibling, T = y.nextSibling, [E, D] = a(T.nextSibling), O = E.nextSibling, [k, A] = a(O.nextSibling), j = k.nextSibling, [M, N] = a(j.nextSibling), P = M.nextSibling, F = P.firstChild;
 		return f.$$mousedown = (e) => {
 			e.stopPropagation(), u.send({
 				type: "SELECT",
 				payload: n.id
 			});
-		}, d(v, f, () => ({ skipTransform: !0 })), b.$$click = (e) => {
+		}, d(h, f, () => ({ skipTransform: !0 })), b.$$click = (e) => {
 			e.stopPropagation(), u.send({
 				type: "DELETE",
 				payload: n.id
 			});
 		}, l(b, "width", "24px"), l(b, "height", "24px"), o(y, t(m, {
 			get when() {
-				return _();
+				return v();
 			},
 			get children() {
-				var e = i(fe);
+				var e = i(pe);
 				return e.$$click = () => u.send({
 					type: "ADD_SIBLING",
 					payload: n.id
@@ -659,31 +640,31 @@ var ue = /*#__PURE__*/ u("<svg class=\"pointer-events-none h-full w-full overflo
 			payload: n.id
 		}), l(w, "width", "24px"), l(w, "height", "24px"), o(f, t(m, {
 			get when() {
-				return p()?.label;
+				return g().label;
 			},
 			keyed: !0,
 			children: (e) => (() => {
-				var t = i(he);
+				var t = i(ge);
 				return o(t, e), t;
 			})()
 		}), E, D), o(f, t(m, {
 			get when() {
-				return p()?.content;
+				return g().content;
 			},
 			keyed: !0,
 			children: (e) => (() => {
-				var t = i(ge);
+				var t = i($);
 				return o(t, e), t;
 			})()
 		}), k, A), o(f, t(m, {
 			get when() {
-				return p()?.input || _();
+				return g().input || v();
 			},
 			get children() {
-				var e = i(pe), t = e.firstChild;
+				var e = i(me), t = e.firstChild;
 				return l(e, "left", "-18px"), t.$$mouseup = (e) => {
 					e.stopPropagation();
-					let t = h()?.from;
+					let t = p()?.from;
 					t ? u.send({
 						type: "ADD_EDGE",
 						payload: {
@@ -703,12 +684,12 @@ var ue = /*#__PURE__*/ u("<svg class=\"pointer-events-none h-full w-full overflo
 		}, l(F, "width", "12px"), l(F, "height", "12px"), l(F, "margin-top", "12px"), r((t) => {
 			var r = {
 				"flex flex-col absolute cursor-grab bg-white rounded-md shadow-md select-none transition-[border,box-shadow] duration-200 ease-in-out hover:shadow-lg draggable": !0,
-				"border border-[#e38c29] z-[100]": g(),
-				"border border-[#e6d4be] z-[1]": !g()
-			}, i = `${p()?.y ?? 0}px`, a = `${p()?.x ?? 0}px`, o = n.id, s = {
+				"border border-[#e38c29] z-[100]": _(),
+				"border border-[#e6d4be] z-[1]": !_()
+			}, i = `${g().y}px`, a = `${g().x}px`, o = n.id, s = {
 				"pointer-events-none absolute flex items-center justify-end -top-7.5 right-0 transition-all duration-200 ease-in-out space-x-2": !0,
-				"w-full opacity-100": g(),
-				"w-0 -right-3 opacity-0 overflow-hidden": !g()
+				"w-full opacity-100": _(),
+				"w-0 -right-3 opacity-0 overflow-hidden": !_()
 			};
 			return t.e = e(f, r, t.e), i !== t.t && l(f, "top", t.t = i), a !== t.a && l(f, "left", t.a = a), o !== t.o && c(f, "id", t.o = o), t.i = e(y, s, t.i), t;
 		}, {
@@ -731,13 +712,13 @@ var ve = /*#__PURE__*/ u("<div class=\"relative h-full w-full overflow-auto roun
 	let e, [n, c] = _(!1), [u, h] = _({
 		x: 0,
 		y: 0
-	}), [y, x] = _(""), [S, C] = _(), T = 0, E = 0, A = Y(), j = f(A, {
+	}), [y, x] = _(), S = 0, C = 0, T = q(), E = f(T, {
 		selector: (e) => e.context.newEdge,
-		equals: Q
-	}), M = f(A, { selector: (e) => e.context.zoom ?? 1 }), N = () => {
-		let e = S();
+		equals: X
+	}), A = f(T, { selector: (e) => e.context.zoom ?? 1 }), j = () => {
+		let e = y();
 		if (!e) return;
-		let t = e.getBoundingClientRect(), n = () => S()?.parentElement, r = {
+		let t = e.getBoundingClientRect(), n = () => y()?.parentElement, r = {
 			self: {
 				left: t.left,
 				top: t.top,
@@ -751,54 +732,51 @@ var ve = /*#__PURE__*/ u("<div class=\"relative h-full w-full overflow-auto roun
 				width: n().clientWidth
 			} : void 0
 		};
-		A.send({
+		T.send({
 			type: "SET_BOARD",
 			payload: r
 		});
-	}, P = () => {
+	}, M = () => {
 		let t = e.scrollWidth - e.clientWidth, n = e.scrollHeight - e.clientHeight;
-		T = t > 0 ? e.scrollLeft / t : 0, E = n > 0 ? e.scrollTop / n : 0, N();
+		S = t > 0 ? e.scrollLeft / t : 0, C = n > 0 ? e.scrollTop / n : 0, j();
 	};
-	g(v(M, () => {
+	g(v(A, () => {
 		let t = e.scrollWidth - e.clientWidth, n = e.scrollHeight - e.clientHeight;
-		t > 0 && (e.scrollLeft = T * t), n > 0 && (e.scrollTop = E * n);
-	}, { defer: !0 })), b(N);
-	let F = f(A, { selector: (e) => e.context?.selected }), I = (e) => F() === e, L = f(A, {
+		t > 0 && (e.scrollLeft = S * t), n > 0 && (e.scrollTop = C * n);
+	}, { defer: !0 })), b(j);
+	let N = f(T, { selector: (e) => e.context?.selected }), P = f(T, {
 		selector: ({ context: e }) => w.typed(e.data?.nodes).map((e) => e.id),
 		equals: (e, t) => e.length === t.length
-	}), R = () => `calc((500vw - 265px) * ${M()})`, z = () => `calc((500vh - 425px) * ${M()})`;
+	}), F = () => `calc((500vw - 265px) * ${A()})`, I = () => `calc((500vh - 425px) * ${A()})`;
 	return (() => {
 		var f = i(be);
 		return f.addEventListener("wheel", (e) => {
 			if (e.ctrlKey || e.metaKey) {
-				e.preventDefault(), P();
+				e.preventDefault(), M();
 				let t = e.deltaY < 0 ? .1 : -.1;
-				A.send({
+				T.send({
 					type: "ZOOM",
 					payload: t
 				});
 			}
 		}), o(f, t(D, {
 			onDragMove: ({ draggable: { transform: e, node: t, id: n } }) => {
-				if (x(n), I(n)) {
-					let r = t.parentElement?.parentElement, i = M(), 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)`), A.send({
-						type: "MOVE_IMMEDIATE",
-						payload: {
-							id: `${n}`,
-							x: l,
-							y: u
-						}
-					}), h({
-						x: d * i,
-						y: f * i
-					});
-				}
+				let r = t.parentElement?.parentElement, i = A(), 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
+					}
+				}), h({
+					x: d * i,
+					y: f * i
+				});
 			},
 			onDragEnd: ({ draggable: { node: e, id: t } }) => {
-				if (!I(t)) return;
-				let n = e.parentElement?.parentElement, r = M(), 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"), A.send({
+				let n = e.parentElement?.parentElement, r = A(), 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"), T.send({
 					type: "MOVE",
 					payload: {
 						id: `${t}`,
@@ -815,26 +793,24 @@ var ve = /*#__PURE__*/ u("<div class=\"relative h-full w-full overflow-auto roun
 			get children() {
 				return [
 					(() => {
-						var u = i(ve), f = u.firstChild, [m, h] = a(f.nextSibling), g = m.nextSibling, _ = g.firstChild, v = _.firstChild, [y, b] = a(v.nextSibling), x = y.nextSibling, [S, w] = a(x.nextSibling), T = S.nextSibling, [E, D] = a(T.nextSibling);
-						return u.addEventListener("scroll", P), d((t) => e = t, u), o(u, t(O, {}), m, h), g.$$mousedown = (t) => {
-							if (j() || t.button !== 0) return;
-							A.send("DESELECT");
-							let n = t.clientX, r = t.clientY, i = e.scrollLeft, a = e.scrollTop;
-							c(!0);
-							let o = (t) => {
+						var u = i(ve), f = u.firstChild, [m, h] = a(f.nextSibling), g = m.nextSibling, _ = g.firstChild, v = _.firstChild, [y, b] = a(v.nextSibling), S = y.nextSibling, [C, w] = a(S.nextSibling), D = C.nextSibling, [k, j] = a(D.nextSibling);
+						return u.addEventListener("scroll", M), d((t) => e = t, u), o(u, t(O, {}), m, h), g.$$mousedown = (t) => {
+							if (E() || t.button !== 0) return;
+							T.send("DESELECT"), c(!0);
+							let n = t.clientX, r = t.clientY, i = e.scrollLeft, a = e.scrollTop, o = (t) => {
 								let o = t.clientX - n, s = t.clientY - r;
-								e.scrollLeft = i - o * 3, e.scrollTop = a - s * 3, P();
+								e.scrollLeft = i - o * 3, e.scrollTop = a - s * 3, M();
 							}, s = () => {
 								window.removeEventListener("mousemove", o), window.removeEventListener("mouseup", s), setTimeout(() => c(!1), 200);
 							};
 							window.addEventListener("mousemove", o), window.addEventListener("mouseup", s);
-						}, g.addEventListener("scroll", () => {}), d(C, g), o(_, t(ae, {}), y, b), o(_, t(de, {}), S, w), o(_, t(p, {
+						}, d(x, g), o(_, t(se, {}), y, b), o(_, t(fe, {}), C, w), o(_, t(p, {
 							get each() {
-								return L();
+								return P();
 							},
 							children: (e) => t(_e, { id: e })
-						}), E, D), r((e) => {
-							var t = !!n(), r = z(), i = R(), a = M();
+						}), k, j), r((e) => {
+							var t = !!n(), r = I(), i = F(), a = A();
 							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,
@@ -848,22 +824,22 @@ var ve = /*#__PURE__*/ u("<div class=\"relative h-full w-full overflow-auto roun
 						c.nextSibling;
 						var u = n.nextSibling, d = u.nextSibling.nextSibling;
 						return t.$$click = () => {
-							P(), A.send({
+							M(), T.send({
 								type: "ZOOM",
 								payload: -.1
 							});
 						}, n.$$click = () => {
-							P(), A.send("TOGGLE_ZOOM");
-						}, o(n, () => Math.round(M() * 100), c, l), u.$$click = () => {
-							P(), A.send({
+							M(), T.send("TOGGLE_ZOOM");
+						}, o(n, () => Math.round(A() * 100), c, l), u.$$click = () => {
+							M(), T.send({
 								type: "ZOOM",
 								payload: .1
 							});
-						}, d.$$click = () => A.send("ADD_PARENT"), s(), e;
+						}, d.$$click = () => T.send("ADD_PARENT"), s(), e;
 					})(),
 					t(m, {
 						get when() {
-							return !y() || !I(y());
+							return !N();
 						},
 						get children() {
 							return t(k, { children: "" });
@@ -878,8 +854,8 @@ n(["mousedown", "click"]);
 //#endregion
 //#region src/ui/components/FlowChart.tsx
 var Se = /*#__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)\">"), Ce = (e) => {
-	let n = e.config?.nodes ?? L, a = e.config?.edges, c = Y(), u = f(c, { selector: (e) => !!e.context.newEdge });
-	return b(() => {
+	let n = e.config?.nodes ?? ee, a = e.config?.edges, c = q(), u = f(c, { selector: (e) => !!e.context.newEdge });
+	return y(c.pause), b(() => {
 		c.resume(), c.send({
 			type: "CONFIGURE",
 			payload: {
@@ -887,14 +863,14 @@ var Se = /*#__PURE__*/ u("<div class=\"relative h-full w-full\"><div class=\"rel
 				edges: a ?? []
 			}
 		});
-	}), y(c.pause), (() => {
+	}), (() => {
 		var e = i(Se), n = e.firstChild;
-		return e.$$mousemove = (e) => {
-			c.send({
+		return e.$$mousemove = ({ clientX: e, clientY: t }) => {
+			u() && c.send({
 				type: "MOVE_NEW_EDGE",
 				payload: {
-					x: e.clientX,
-					y: e.clientY
+					x: e,
+					y: t
 				}
 			});
 		}, e.$$mouseup = () => c.send("CLEAR_NEW_EDGE"), o(n, t(xe, {})), r((e) => l(n, "cursor", u() ? "inherit" : "crosshair")), s(), e;
@@ -903,7 +879,7 @@ var Se = /*#__PURE__*/ u("<div class=\"relative h-full w-full\"><div class=\"rel
 n(["mouseup", "mousemove"]);
 //#endregion
 //#region src/ui/Flow.tsx
-var we = (e) => t(ie, { get children() {
+var we = (e) => t(K, { get children() {
 	return t(Ce, e);
 } });
 //#endregion