@bemedev/mind-flow 0.1.0 → 0.3.0

package/lib/index.es.js

@@ -1,33 +1,32 @@
 import { classList as e, createComponent as t, delegateEvents as n, effect as r, getNextElement as i, getNextMarker as a, insert as o, runHydrationEvents as s, setAttribute as c, setStyleProperty as l, template as u, use as d } from "solid-js/web";
-import { For as f, Show as p, createContext as m, createEffect as h, createMemo as g, createSignal as _, on as v, onCleanup as y, onMount as b, useContext as x } from "solid-js";
-import { createMachine as S, interpret as C } from "@bemedev/app";
-import { produce as w } from "solid-js/store";
-import { type as T } from "@bemedev/app/bemedev";
-import { useState as E } from "@bemedev/app-solidjs";
+import { createState as f } from "@bemedev/app-solidjs";
+import { For as p, Show as m, createContext as h, createEffect as g, createSignal as _, on as v, onCleanup as y, onMount as b, useContext as x } from "solid-js";
+import { createMachine as S, interpret as C, toArray as w } from "@bemedev/app";
+import { toArray as T, type as E } from "@bemedev/app/bemedev";
 import { DragDropProvider as D, DragDropSensors as O, DragOverlay as k, createDraggable as A, useDragDropContext as j } from "@thisbeyond/solid-dnd";
 //#region src/ui/components/classes.ts
-var M = /* @__PURE__ */ "fill-transparent cursor-pointer relative stroke-[rgba(168,168,168,0.4)] stroke-3 stroke-[rgba(168,168,168,1)] stroke-4 z-100 stroke-[rgba(168,168,168,0.8)] pointer-events-all w-[100px] h-[100px] bg-white fill-white pointer-events-none absolute top-0 w-full h-full overflow-hidden overflow-scroll h-[150vh] w-[2160px] bg-size-[30px_30px] flex flex-col cursor-grab rounded-md shadow-[1px_1px_11px_-6px_rgba(0,0,0,0.75)] select-none transition-[border,box-shadow] duration-200 ease-in-out hover:shadow-[2px_2px_12px_-6px_rgba(0,0,0,0.75)] draggable border border-[#e38c29] z-[100] border-[#e6d4be] z-[1] items-center justify-end -top-[30px] right-0 transition-all space-x-2 opacity-100 w-0 -right-3 opacity-0 w-6 h-6 fill-[#a11111] rounded-full size-6 bg-green-500 p-0.5 hover:bg-green-600 font-bold text-center overflow-visible bg-blue-500 text-white rounded-lg hover:bg-blue-600 justify-center p-3 border-b border-[#f0f0f0] cursor-default z-[-3] -left-[18px] bg-[#e38b29] w-3 h-3 my-3 -right-[18px] cursor-crosshair mt-3".split(" "), N = Object.prototype.hasOwnProperty;
-function P(e, t) {
-	var n, r;
-	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-- && P(e[r], t[r]););
-			return r === -1;
-		}
-		if (!n || typeof e == "object") {
-			for (n in r = 0, e) if (N.call(e, n) && ++r && !N.call(t, n) || !(n in t) || !P(e[n], t[n])) return !1;
-			return Object.keys(t).length === r;
-		}
+var M = /* @__PURE__ */ "fill-transparent cursor-pointer relative stroke-[rgba(168,168,168,0.4)] stroke-3 stroke-[rgba(168,168,168,1)] stroke-4 z-100 stroke-[rgba(168,168,168,0.8)] pointer-events-all w-[100px] h-[100px] bg-white fill-white pointer-events-none absolute top-0 w-full h-full overflow-hidden overflow-auto h-[150vh] w-[2160px] bg-size-[30px_30px] flex flex-col cursor-grab rounded-md shadow-[1px_1px_11px_-6px_rgba(0,0,0,0.75)] select-none transition-[border,box-shadow] duration-200 ease-in-out hover:shadow-[2px_2px_12px_-6px_rgba(0,0,0,0.75)] draggable border border-[#e38c29] z-[100] border-[#e6d4be] z-[1] items-center justify-end -top-[30px] right-0 transition-all space-x-2 opacity-100 w-0 -right-3 opacity-0 w-6 h-6 fill-[#a11111] rounded-full size-6 bg-green-500 p-0.5 hover:bg-green-600 font-bold text-center overflow-visible bg-blue-500 text-white rounded-lg hover:bg-blue-600 justify-center p-3 border-b border-[#f0f0f0] cursor-default z-[-3] -left-[18px] bg-[#e38b29] w-3 h-3 my-3 -right-[18px] cursor-crosshair mt-3".split(" "), N = 10.5, P = {
+	x: -10.5,
+	y: 18
+}, F = (e = 0) => ({
+	x: e + N,
+	y: 18
+}), I = {
+	horizontal: 55,
+	vertical: 40
+}, L = [{
+	id: "node-0",
+	data: {
+		content: "Some text",
+		label: "Root node"
+	},
+	input: !1,
+	position: {
+		x: 350,
+		y: 100
 	}
-	return e !== e && t !== t;
-}
-//#endregion
-//#region src/helpers/createContext.ts
-var F = (e, t) => {
-	let n = m(e(), t);
+}], R = (e, t) => {
+	let n = h(e(), t);
 	return [
 		({ children: e }) => n.Provider({
 			value: n.defaultValue,
@@ -36,45 +35,76 @@ var F = (e, t) => {
 		() => x(n),
 		n
 	];
-}, I = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", L = (e = 21) => {
+}, z = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", ee = (e = 21) => {
 	let t = "", n = crypto.getRandomValues(new Uint8Array(e |= 0));
-	for (; e--;) t += I[n[e] & 63];
+	for (; e--;) t += z[n[e] & 63];
 	return t;
-}, R = T({
+}, B = (e, t) => `edge = ${e} => ${t}`, V = (e) => `node-${e}`, te = (e, t = {
+	width: 192,
+	height: 50,
+	inputOffset: P
+}) => {
+	let n = t.width, r = t.height, i = t.outputOffset ?? F(n), a = t.inputOffset;
+	return {
+		width: n,
+		height: r,
+		output: {
+			x: e.x + i.x,
+			y: e.y + i.y
+		},
+		input: {
+			x: e.x + a.x,
+			y: e.y + a.y
+		},
+		outputOffset: i,
+		inputOffset: a
+	};
+}, H = E({
 	x: "number",
 	y: "number"
 });
-T(({ optional: e, use: t }) => ({
-	input: e(t(R)),
-	output: t(R)
+E(({ optional: e, use: t }) => ({
+	input: e(t(H)),
+	output: t(H)
 }));
-var z = T({
+var U = E({
 	from: "string",
 	to: "string"
-}), B = T(({ optional: e, use: t }) => ({
-	position: t(R),
+}), W = E(({ optional: e, use: t }) => ({
+	position: t(H),
 	data: {
 		label: e("string"),
 		content: "string"
 	},
 	input: "boolean"
-})), V = z;
-T(({ optional: e, use: t }) => ({
+})), G = U, K = E(({ optional: e, use: t }) => ({
 	width: "number",
 	height: "number",
-	id: "string",
-	output: t(R),
-	input: e(t(R))
-})), T({
+	output: t(H),
+	input: e(t(H)),
+	inputOffset: e(t(H)),
+	outputOffset: e(t(H))
+})), q = E({
 	x0: "number",
 	y0: "number",
 	x1: "number",
 	y1: "number"
-});
-//#endregion
-//#region src/services/main.machine.ts
-var H = (e, t) => `edge = ${e} => ${t}`, U = (e) => `node-${e}`, ee = S({
+}), ne = E(({ intersection: e, use: t }) => e({ from: "string" }, t(q))), J = E(({ optional: e }) => ({
+	self: {
+		left: "number",
+		top: "number",
+		width: "number",
+		height: "number"
+	},
+	parent: e({
+		scrollLeft: "number",
+		scrollTop: "number",
+		height: "number",
+		width: "number"
+	})
+})), re = S({
 	initial: "idle",
+	on: { SET_BOARD: { actions: ["setBoard"] } },
 	states: {
 		idle: { on: {
 			CONFIGURE: {
@@ -89,7 +119,7 @@ var H = (e, t) => `edge = ${e} => ${t}`, U = (e) => `node-${e}`, ee = S({
 		} },
 		working: { on: {
 			MOVE_IMMEDIATE: { actions: [{
-				name: "buildImmediateUI",
+				name: "buildUI",
 				description: "Must be in the ui"
 			}] },
 			ADD_CHILD: {
@@ -114,6 +144,7 @@ var H = (e, t) => `edge = ${e} => ${t}`, U = (e) => `node-${e}`, ee = S({
 				],
 				target: "/construction"
 			},
+			ADD_DIMENSION: { actions: ["addDimension"] },
 			ADD_SIBLING: {
 				actions: [
 					"generateID",
@@ -133,20 +164,27 @@ var H = (e, t) => `edge = ${e} => ${t}`, U = (e) => `node-${e}`, ee = S({
 				actions: ["addEdge"],
 				target: "/construction"
 			},
+			START_NEW_EDGE: { actions: ["startNewEdge"] },
+			MOVE_NEW_EDGE: { actions: ["moveNewEdge"] },
+			CLEAR_NEW_EDGE: { actions: ["clearNewEdge"] },
 			DELETE: {
 				actions: ["delete"],
 				target: "/construction"
 			},
 			SELECT: { actions: ["select"] },
-			DESELECT: { actions: ["deselect"] }
+			DESELECT: { actions: ["deselect"] },
+			ZOOM: { actions: ["zoom"] },
+			TOGGLE_ZOOM: { actions: ["toggleZoom"] },
+			SET_BOARD: { actions: ["setBoard"] }
 		} }
 	}
 }, {
-	eventsMap: T(({ intersection: e, use: t, array: n }) => ({
+	eventsMap: E(({ intersection: e, use: t, array: n }) => ({
 		CONFIGURE: {
-			nodes: n(e(t(B), { id: "string" })),
-			edges: n(e(t(V), { id: "string" }))
+			nodes: n(e(t(W), { id: "string" })),
+			edges: n(e(t(G), { id: "string" }))
 		},
+		SET_BOARD: t(J),
 		CONFIGURE_EMPTY: "never",
 		MOVE: {
 			id: "string",
@@ -164,288 +202,288 @@ var H = (e, t) => `edge = ${e} => ${t}`, U = (e) => `node-${e}`, ee = S({
 		DELETE: "string",
 		SELECT: "string",
 		DESELECT: "never",
-		ADD_EDGE: t(z)
+		ADD_EDGE: t(U),
+		START_NEW_EDGE: "string",
+		MOVE_NEW_EDGE: t(H),
+		CLEAR_NEW_EDGE: "never",
+		ZOOM: "number",
+		TOGGLE_ZOOM: "never",
+		ADD_DIMENSION: {
+			id: "string",
+			dimension: t(K)
+		}
 	})),
 	sync: !0,
-	pContext: T(({ union: e }) => ({ generatedId: e("string", "null") })),
-	context: T(({ optional: e, use: t, array: n }) => ({
+	pContext: E(({ union: e, optional: t, record: n, use: r, custom: i }) => ({
+		generatedId: e("string", "null"),
+		previousZoom: t("number"),
+		dimensions: n(r(K)),
+		getBoardPosition: i(),
+		clampPosition: i(),
+		calculateDimensions: i()
+	})),
+	context: E(({ optional: e, use: t, array: n, record: r }) => ({
 		data: e({
 			nodes: n({
-				...t(B),
+				...t(W),
 				id: "string"
 			}),
 			edges: n({
-				...t(V),
+				...t(G),
 				id: "string"
 			})
 		}),
+		board: e(t(J)),
+		edgesPositions: r(t(q)),
+		newEdge: e(t(ne)),
 		selected: e("string"),
-		updatingUI: e("boolean")
+		updatingUI: e("boolean"),
+		zoom: "number",
+		bounds: t(H)
 	}))
-}).provideOptions(({ assign: e, batch: t, erase: n }) => ({ actions: {
-	configure: t(e("context.data", () => ({
-		nodes: [],
-		edges: []
-	})), e("context.data.nodes", { CONFIGURE: ({ payload: { nodes: e } }) => e }), e("context.data.edges", { CONFIGURE: ({ payload: { edges: e } }) => e }), e("context.updatingUI", () => !1), e("pContext.generatedId", () => null)),
-	generateID: e("pContext.generatedId", () => L()),
-	linkChild: t(e("context.data.edges", { ADD_CHILD: ({ context: e, pContext: t, payload: n }) => {
-		let r = e.data, i = n, a = t?.generatedId, o = U(a), s = H(i, o);
-		return [...r?.edges ?? [], {
+}).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);
+		});
+	} })),
+	startNewEdge: e("newEdge", { START_NEW_EDGE: ({ payload: e, pContext: { dimensions: t } }) => {
+		let { x: n, y: r } = t[e].output;
+		return {
+			from: e,
+			x0: n,
+			y0: r,
+			x1: n,
+			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 = {
+				x: n.x + o.x,
+				y: n.y + o.y
+			}, l = {
+				x: n.x + s.x,
+				y: n.y + s.y
+			};
+			return a && (a.output = c, a.input = l), i?.forEach(({ from: e, to: r, id: i }) => {
+				e === n.id && (t[i].x0 = c.x, t[i].y0 = c.y), r === n.id && (t[i].x1 = l.x, t[i].y1 = l.y);
+			}), 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
+				});
+			}
+		}), t),
+		else: ({ context: { data: e, edgesPositions: t }, pContext: { dimensions: n } }) => {
+			let r = 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] = {
+					x0: a.x,
+					y0: a.y,
+					x1: o.x,
+					y1: o.y
+				} : delete t[r];
+			}), t;
+		}
+	}), e("updatingUI", () => !0)),
+	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);
+		return r.push({
 			id: s,
 			from: i,
 			to: o
-		}];
-	} }), e("context.selected", ({ pContext: { generatedId: e } }) => U(e))),
-	linkSibling: t(e("context.data.edges", { ADD_SIBLING: ({ pContext: e, payload: t, context: n }) => {
-		let r = n.data?.edges, i = e?.generatedId, a = [...r ?? []], o = r?.find(({ to: e }) => e === t)?.from;
-		if (!o) return a;
-		let s = U(i), c = H(o, s);
-		return a.push({
-			from: o,
-			to: s,
-			id: c
-		}), a;
-	} }), e("context.selected", ({ pContext: { generatedId: e } }) => U(e))),
-	selectParent: e("context.selected", ({ pContext: { generatedId: e } }) => U(e)),
-	moveNode: e("context.data.nodes", { MOVE: ({ context: { data: e }, payload: t }) => {
+		}), r;
+	} }), e("selected", ({ pContext: { generatedId: e } }) => V(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);
+		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 n ? e?.nodes?.map((e) => e.id === n ? {
+		return e?.nodes?.map((e) => e.id === n ? {
 			...e,
 			position: {
 				x: r,
 				y: i
 			}
-		} : e) ?? [] : e?.nodes ?? [];
+		} : e) ?? [];
 	} }),
-	select: e("context.selected", { SELECT: ({ payload: e }) => e }),
-	delete: e(["context.data.nodes", "context.data.edges"], { DELETE: ({ context: { data: e }, payload: t }) => [e?.nodes?.filter(({ id: e }) => e !== t), e?.edges?.filter(({ id: e, from: n, to: r }) => e !== t && n !== t && r !== t)] }),
-	addEdge: e("context.data.edges", { ADD_EDGE: ({ context: e, payload: { from: t, to: n } }) => {
-		let r = e.data?.edges ?? [], i = H(t, n);
+	select: e("selected", { SELECT: ({ payload: e }) => 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);
 		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;
 	} }),
-	deselect: n("context.selected")
-} })), te = 10.5, W = -10.5, G = {
-	x: W,
-	y: 18
-}, K = (e = 0) => ({
-	x: e + te,
-	y: 18
-}), q = {
-	horizontal: 55,
-	vertical: 40
-}, ne = [{
-	id: "node-0",
-	data: {
-		content: "Some text",
-		label: "Root node"
-	},
-	input: !1,
-	position: {
-		x: 350,
-		y: 100
-	}
-}], [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: e,
-			y: n
-		};
-		let a = i.getBoundingClientRect(), o = t[0]();
-		return {
-			x: e - a.left / o,
-			y: n - a.top / o
-		};
-	}, [c, l] = _({}, { equals: !1 }), u = (e, n, i = 192, a = 50) => {
-		let o = r()?.parentElement;
-		if (!o) return {
-			x: e,
-			y: n
-		};
-		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(e, c), l),
-			y: Math.min(Math.max(n, u), d)
-		};
-	};
-	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 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,
+	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);
+	} })
+} })), [ie, Y] = R(() => {
+	let e = C(re, {
+		context: {
+			zoom: 1,
+			edgesPositions: {},
+			bounds: {
+				x: 0,
+				y: 0
+			}
+		},
+		pContext: {
+			generatedId: null,
+			dimensions: {},
+			getBoardPosition(t, n, r) {
+				if (!r) return {
+					x: t,
+					y: n
+				};
+				let i = e.state.context.zoom;
+				return {
+					x: (t - r.self.left) / i,
+					y: (n - r.self.top) / i
+				};
+			},
+			clampPosition(t, n, r, i = 192, a = 50) {
+				let o = t?.parent;
+				if (!o) return {
+					x: n,
+					y: r
+				};
+				let s = e.state.context.zoom ?? 1, c = o.scrollLeft / s + I.horizontal, l = Math.max(c, (o.scrollLeft + o.width) / s - I.horizontal - i), u = o.scrollTop / s + I.vertical, d = Math.max(u, (o.scrollTop + o.height) / s - I.vertical - a);
+				return {
+					x: Math.min(Math.max(n, c), l),
+					y: Math.min(Math.max(r, u), d)
+				};
+			},
+			calculateDimensions: (e, t = {
+				width: 192,
+				height: 50,
+				inputOffset: P
+			}) => {
+				let n = t.width, r = t.height, i = t.outputOffset ?? F(n), a = t.inputOffset;
+				return {
+					width: n,
+					height: r,
+					output: {
+						x: e.x + i.x,
+						y: e.y + i.y
+					},
+					input: {
+						x: e.x + a.x,
+						y: e.y + a.y
+					},
+					outputOffset: i,
+					inputOffset: a
+				};
+			}
+		}
+	});
+	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: 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, {
+		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: {
-					x: f,
-					y: p
-				}
-			}];
+				position: m
+			}), r.dimensions[a] = h, i;
 		} }),
-		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,
+		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;
 		} }),
-		buildUI: n(e(({ context: { data: e } }) => {
-			let t = e?.edges ?? [];
-			l((e) => {
-				let n = Object.entries({ ...e }).filter(([e]) => t.some((t) => t.id === e));
-				return Object.fromEntries(n);
-			});
-		}), e({
-			else: ({ context: { data: e } }) => {
-				let t = e?.edges ?? [];
-				l(w((e) => {
-					t?.forEach(({ from: t, id: n, to: r }) => {
-						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
-						});
-					});
-				}));
-			},
-			MOVE: ({ context: { data: e }, payload: t }) => {
-				let n = e?.edges ?? [];
-				l(w((e) => {
-					n?.forEach(({ from: n, to: r, id: i }) => {
-						if (n === t.id) {
-							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
-							}, o(w((e) => {
-								e[t.id] && (e[t.id] = {
-									...e[t.id],
-									output: {
-										x: r,
-										y: s
-									}
-								});
-							}));
-						}
-						if (r === t.id) {
-							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
-							}, o(w((e) => {
-								e[t.id] && (e[t.id] = {
-									...e[t.id],
-									input: {
-										x: r,
-										y: s
-									}
-								});
-							}));
-						}
-					});
-				}));
-			}
-		}), i("context.updatingUI", () => !0)),
-		buildImmediateUI: e({ MOVE_IMMEDIATE: ({ context: { data: e }, payload: t }) => {
-			let n = e?.edges ?? [];
-			l(w((e) => {
-				n?.forEach(({ from: n, to: r, id: i }) => {
-					if (n === t.id) {
-						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
-						}, o(w((e) => {
-							e[t.id] && (e[t.id] = {
-								...e[t.id],
-								output: {
-									x: r,
-									y: s
-								}
-							});
-						}));
-					}
-					if (r === t.id) {
-						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
-						}, o(w((e) => {
-							e[t.id] && (e[t.id] = {
-								...e[t.id],
-								input: {
-									x: r,
-									y: s
-								}
-							});
-						}));
-					}
-				});
-			}));
+		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(), {
-		dimensions: [a, o],
-		newEdge: n,
-		board: [r, i],
-		getBoardPoint: s,
-		edgesPositions: [c, l],
-		service: e,
-		zoom: t,
-		clampPosition: u
-	};
-}, { name: "FlowContext" }), Y = Object.prototype.hasOwnProperty;
-function X(e, t, n) {
-	for (n of e.keys()) if (Z(n, t)) return n;
+	} })), 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;
 }
-function Z(e, t) {
+function Q(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-- && Z(e[r], t[r]););
+			if ((r = e.length) === t.length) for (; r-- && Q(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 = X(t, i), !i) || !t.has(i)) return !1;
+			for (r of e) if (i = r, i && typeof i == "object" && (i = Z(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 = X(t, i), !i) || !Z(r[1], t.get(i))) 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;
 			return !0;
 		}
 		if (n === ArrayBuffer) e = new Uint8Array(e), t = new Uint8Array(t);
@@ -458,7 +496,7 @@ function Z(e, t) {
 			return r === -1;
 		}
 		if (!n || typeof e == "object") {
-			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;
+			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;
 			return Object.keys(t).length === r;
 		}
 	}
@@ -466,236 +504,220 @@ function Z(e, t) {
 }
 //#endregion
 //#region src/ui/components/Bounds.tsx
-var ie = () => {
-	let { board: [e], zoom: [t] } = J(), [n, { addTransformer: r, removeTransformer: i, onDragStart: a, onDragEnd: o }] = j(), s = {
+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 = {
 		id: "clamp-to-container",
 		order: 100,
-		callback: (r) => {
-			let i = e(), a = n.active.draggable;
-			if (!i || !a) return r;
+		callback: (e) => {
+			let i = n()?.self, a = r.active.draggable;
+			if (!i || !a) return e;
 			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;
+			if (!o) return e;
+			let s = t(), c = I.horizontal, l = Math.max(c, i.width / s - o.offsetWidth - I.horizontal), u = I.vertical, d = Math.max(u, i.height / s - o.offsetHeight - I.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, f), p),
-				y: Math.min(Math.max(r.y, m), h)
+				x: Math.min(Math.max(e.x, f), p),
+				y: Math.min(Math.max(e.y, m), h)
 			};
 		}
 	};
-	return a(({ draggable: e }) => {
-		r("draggables", e.id, s);
-	}), o(({ draggable: e }) => {
-		i("draggables", e.id, s.id);
+	return o(({ draggable: e }) => {
+		i("draggables", e.id, c);
+	}), s(({ draggable: e }) => {
+		a("draggables", e.id, c.id);
 	}), null;
-}, 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 } = J();
-	h(() => {
-		let e = n.x0 + (n.x1 - n.x0) / 2, t = n.y0 + (n.y1 - n.y0) / 2;
-		o({
-			x: e,
-			y: t
-		});
-	});
-	let d = E(u, { selector: (e) => e.context.selected === n.id });
-	return [(() => {
-		var t = i(ae);
-		return t.$$click = () => u.send({
-			type: "SELECT",
-			payload: n.id
-		}), t.$$mousedown = (e) => e.stopPropagation(), 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": d() && !n.isNew,
-				"stroke-[rgba(168,168,168,0.8)] stroke-3": !d() && !n.isNew
-			}, a = n.isNew ? "none" : "all", o = se(n);
-			return r.e = e(t, i, r.e), a !== r.t && l(t, "pointer-events", r.t = a), o !== r.a && c(t, "d", r.a = o), r;
-		}, {
-			e: void 0,
-			t: void 0,
-			a: void 0
-		}), s(), t;
-	})(), t(p, {
+}, 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
+	}), u = f(a, { selector: (e) => e.context.selected === n.id }), d = () => {
+		let e = o();
+		return e ? {
+			x: e.x0 + (e.x1 - e.x0) / 2,
+			y: e.y0 + (e.y1 - e.y0) / 2
+		} : {
+			x: 0,
+			y: 0
+		};
+	};
+	return t(m, {
 		get when() {
-			return d();
+			return o();
 		},
-		get children() {
-			var e = i(oe);
-			return e.$$mousedown = (e) => {
-				e.stopPropagation(), u.send({
-					type: "DELETE",
-					payload: n.id
-				});
-			}, r(() => c(e, "transform", `translate(${a().x}, ${a().y})`)), s(), e;
-		}
-	})];
+		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;
+			}
+		})]
+	});
 };
-n(["mousedown", "click"]);
+n(["mousedown"]);
 //#endregion
 //#region src/ui/components/EdgesBoard.tsx
-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(ce), n = e.firstChild, [s, l] = a(n.nextSibling), u = s.nextSibling, [d, m] = a(u.nextSibling);
-		return o(e, t(p, {
+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, {
+		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);
+		return o(e, t(m, {
 			get when() {
-				return r();
+				return n();
 			},
-			children: (e) => t($, {
-				id: "__#new-edge#__TEMP",
-				isNew: !0,
-				get x0() {
-					return e().x0;
-				},
-				get y0() {
-					return e().y0;
-				},
-				get x1() {
-					return e().x1;
-				},
-				get y1() {
-					return e().y1;
-				}
-			})
-		}), s, l), o(e, t(f, {
+			get children() {
+				return t(le, {
+					id: "__#new-edge#__TEMP",
+					isNew: !0
+				});
+			}
+		}), c, l), o(e, t(p, {
 			get each() {
-				return c();
+				return r();
 			},
-			children: $
-		}), d, m), e;
+			children: (e) => t(le, { id: e })
+		}), d, f), e;
 	})();
-}, 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 : 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
-		}, y = {
-			x: n.x + d,
-			y: n.y + p
-		};
-		v(w((e) => {
-			e[n.id] = {
-				width: h,
-				height: g,
-				output: _,
-				input: y,
-				outputOffset: {
-					x: c,
-					y: l
-				},
-				inputOffset: {
-					x: d,
-					y: p
-				}
+}, 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, {
+		selector: ({ context: e }) => {
+			let t = w.typed(e.data?.nodes).find((e) => e.id === n.id);
+			if (t) return {
+				x: t.position.x,
+				y: t.position.y,
+				label: t.data.label,
+				content: t.data.content ?? "",
+				input: t.input
 			};
-		}));
-	});
-	let O = E(C, { selector: ({ context: { data: e } }) => {
+		},
+		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 } }) => {
 		let t = e?.edges;
 		return t ? t.some(({ to: e }) => e === n.id) : !1;
-	} }), k = A(n.id);
+	} }), v = A(n.id);
 	return (() => {
-		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({
+		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;
+		return f.$$mousedown = (e) => {
+			e.stopPropagation(), u.send({
 				type: "SELECT",
 				payload: n.id
 			});
-		}, d(h, m), v.$$click = (e) => {
-			e.stopPropagation(), C.send({
+		}, d(v, f, () => ({ skipTransform: !0 })), b.$$click = (e) => {
+			e.stopPropagation(), u.send({
 				type: "DELETE",
 				payload: n.id
 			});
-		}, l(v, "width", "24px"), l(v, "height", "24px"), o(_, t(p, {
+		}, l(b, "width", "24px"), l(b, "height", "24px"), o(y, t(m, {
 			get when() {
-				return O();
+				return _();
 			},
 			get children() {
-				var e = i(ue);
-				return e.$$click = () => C.send({
+				var e = i(fe);
+				return e.$$click = () => u.send({
 					type: "ADD_SIBLING",
 					payload: n.id
 				}), l(e, "width", "24px"), l(e, "height", "24px"), s(), e;
 			}
-		}), w, T), E.$$click = () => C.send({
+		}), S, C), w.$$click = () => u.send({
 			type: "ADD_CHILD",
 			payload: n.id
-		}), l(E, "width", "24px"), l(E, "height", "24px"), o(m, t(p, {
+		}), l(w, "width", "24px"), l(w, "height", "24px"), o(f, t(m, {
 			get when() {
-				return n.label;
+				return p()?.label;
 			},
 			keyed: !0,
 			children: (e) => (() => {
-				var t = i(pe);
+				var t = i(he);
 				return o(t, e), t;
 			})()
-		}), j, M), o(m, t(p, {
+		}), E, D), o(f, t(m, {
 			get when() {
-				return n.content;
+				return p()?.content;
 			},
 			keyed: !0,
 			children: (e) => (() => {
-				var t = i(me);
+				var t = i(ge);
 				return o(t, e), t;
 			})()
-		}), P, F), o(m, t(p, {
+		}), k, A), o(f, t(m, {
 			get when() {
-				return n.input || O();
+				return p()?.input || _();
 			},
 			get children() {
-				var e = i(de), t = e.firstChild;
+				var e = i(pe), t = e.firstChild;
 				return l(e, "left", "-18px"), t.$$mouseup = (e) => {
 					e.stopPropagation();
-					let t = y()?.from;
-					t && C.send({
+					let t = h()?.from;
+					t ? u.send({
 						type: "ADD_EDGE",
 						payload: {
 							from: t,
 							to: n.id
 						}
-					}), x();
+					}) : u.send("CLEAR_NEW_EDGE");
 				}, t.$$mousedown = (e) => {
 					e.stopPropagation();
-				}, d((e) => u = e, t), l(t, "width", "12px"), l(t, "height", "12px"), l(t, "margin-top", "12px"), s(), e;
+				}, l(t, "width", "12px"), l(t, "height", "12px"), l(t, "margin-top", "12px"), s(), e;
 			}
-		}), L, R), l(z, "right", "-18px"), B.$$mousedown = (e) => {
-			e.stopPropagation(), C.send("DESELECT");
-			let t = g()[n.id]?.output, r = S(e.clientX, e.clientY);
-			t && x({
-				x0: t.x,
-				y0: t.y,
-				x1: r.x,
-				y1: r.y,
-				from: n.id
+		}), M, N), l(P, "right", "-18px"), F.$$mousedown = (e) => {
+			e.stopPropagation(), u.send("DESELECT"), u.send({
+				type: "START_NEW_EDGE",
+				payload: n.id
 			});
-		}, d((e) => f = e, B), l(B, "width", "12px"), l(B, "height", "12px"), l(B, "margin-top", "12px"), r((t) => {
-			var r = n.id, i = {
+		}, 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]": D(),
-				"border border-[#e6d4be] z-[1]": !D()
-			}, a = `${n.y}px`, o = `${n.x}px`, s = {
+				"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 = {
 				"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": D(),
-				"w-0 -right-3 opacity-0 overflow-hidden": !D()
+				"w-full opacity-100": g(),
+				"w-0 -right-3 opacity-0 overflow-hidden": !g()
 			};
-			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;
+			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;
 		}, {
 			e: void 0,
 			t: void 0,
 			a: void 0,
 			o: void 0,
 			i: void 0
-		}), s(), m;
+		}), s(), f;
 	})();
 };
 n([
@@ -705,66 +727,86 @@ n([
 ]);
 //#endregion
 //#region src/ui/components/NodesBoard.tsx
-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] = _({
+var ve = /*#__PURE__*/ u("<div class=\"relative h-full w-full overflow-auto 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\"><!$><!/><!$><!/><!$><!/>"), ye = /*#__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\">"), be = /*#__PURE__*/ u("<div class=\"relative mx-auto h-[calc(100vh-64px)] w-[calc(100vw-32px)] overflow-hidden\">"), xe = () => {
+	let e, [n, c] = _(!1), [u, h] = _({
 		x: 0,
 		y: 0
-	}), [g, y] = _(""), [b, x] = _(), S = 0, C = 0, { board: [, w], service: T, newEdge: [A], zoom: [j, M] } = J(), N = () => {
+	}), [y, x] = _(""), [S, C] = _(), T = 0, E = 0, A = Y(), j = f(A, {
+		selector: (e) => e.context.newEdge,
+		equals: Q
+	}), M = f(A, { selector: (e) => e.context.zoom ?? 1 }), N = () => {
+		let e = S();
+		if (!e) return;
+		let t = e.getBoundingClientRect(), n = () => S()?.parentElement, r = {
+			self: {
+				left: t.left,
+				top: t.top,
+				width: e.clientWidth,
+				height: e.clientHeight
+			},
+			parent: n() ? {
+				scrollLeft: n().scrollLeft,
+				scrollTop: n().scrollTop,
+				height: n().clientHeight,
+				width: n().clientWidth
+			} : void 0
+		};
+		A.send({
+			type: "SET_BOARD",
+			payload: r
+		});
+	}, P = () => {
 		let t = e.scrollWidth - e.clientWidth, n = e.scrollHeight - e.clientHeight;
-		S = t > 0 ? e.scrollLeft / t : 0, C = n > 0 ? e.scrollTop / n : 0;
+		T = t > 0 ? e.scrollLeft / t : 0, E = n > 0 ? e.scrollTop / n : 0, N();
 	};
-	h(v(j, () => {
+	g(v(M, () => {
 		let t = e.scrollWidth - e.clientWidth, n = e.scrollHeight - e.clientHeight;
-		t > 0 && (e.scrollLeft = S * t), n > 0 && (e.scrollTop = C * n);
-	}, { defer: !0 }));
-	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,
-			y: e.position.y,
-			label: e.data.label,
-			content: e.data.content ?? "",
-			input: e.input
-		})),
-		equals: Z
-	}), L = () => `calc((500vw - 265px) * ${j()})`, R = () => `calc((500vh - 425px) * ${j()})`;
+		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, {
+		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()})`;
 	return (() => {
-		var h = i(ve);
-		return h.addEventListener("wheel", (e) => {
+		var f = i(be);
+		return f.addEventListener("wheel", (e) => {
 			if (e.ctrlKey || e.metaKey) {
-				e.preventDefault(), N();
+				e.preventDefault(), P();
 				let t = e.deltaY < 0 ? .1 : -.1;
-				M((e) => Math.min(Math.max(Number((e + t).toFixed(2)), .2), 3));
+				A.send({
+					type: "ZOOM",
+					payload: t
+				});
 			}
-		}), o(h, t(D, {
+		}), o(f, 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({
+				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
 						}
-					}), m({
+					}), h({
 						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({
+				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({
+					type: "MOVE",
+					payload: {
+						id: `${t}`,
+						x: c,
+						y: l
+					}
+				}), setTimeout(() => {
+					h({
 						x: 0,
 						y: 0
 					});
@@ -773,26 +815,26 @@ var ge = /*#__PURE__*/ u("<div class=\"relative h-full w-full overflow-scroll ro
 			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");
+						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) => {
 								let o = t.clientX - n, s = t.clientY - r;
-								e.scrollLeft = i - o * 3, e.scrollTop = a - s * 3, N();
+								e.scrollLeft = i - o * 3, e.scrollTop = a - s * 3, P();
 							}, 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, {
+						}, g.addEventListener("scroll", () => {}), d(C, g), o(_, t(ae, {}), y, b), o(_, t(de, {}), S, w), o(_, t(p, {
 							get each() {
-								return I();
+								return L();
 							},
-							children: he
-						}), D, k), r((e) => {
-							var t = !!n(), r = R(), i = L(), a = j();
+							children: (e) => t(_e, { id: e })
+						}), E, D), r((e) => {
+							var t = !!n(), r = z(), i = R(), a = M();
 							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,
@@ -802,20 +844,26 @@ var ge = /*#__PURE__*/ u("<div class=\"relative h-full w-full overflow-scroll ro
 						}), s(), u;
 					})(),
 					(() => {
-						var e = i(_e), t = e.firstChild, n = t.nextSibling, r = n.firstChild, [c, l] = a(r.nextSibling);
+						var e = i(ye), 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))));
+							P(), A.send({
+								type: "ZOOM",
+								payload: -.1
+							});
 						}, 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;
+							P(), A.send("TOGGLE_ZOOM");
+						}, o(n, () => Math.round(M() * 100), c, l), u.$$click = () => {
+							P(), A.send({
+								type: "ZOOM",
+								payload: .1
+							});
+						}, d.$$click = () => A.send("ADD_PARENT"), s(), e;
 					})(),
-					t(p, {
+					t(m, {
 						get when() {
-							return !g() || !F(g());
+							return !y() || !I(y());
 						},
 						get children() {
 							return t(k, { children: "" });
@@ -823,42 +871,40 @@ var ge = /*#__PURE__*/ u("<div class=\"relative h-full w-full overflow-scroll ro
 					})
 				];
 			}
-		})), h;
+		})), f;
 	})();
 };
 n(["mousedown", "click"]);
 //#endregion
 //#region src/ui/components/FlowChart.tsx
-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();
+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(() => {
-		c.start(), c.send({
+		c.resume(), c.send({
 			type: "CONFIGURE",
 			payload: {
 				nodes: n,
 				edges: a ?? []
 			}
 		});
-	}), y(c.stop), (() => {
-		var e = i(be), n = e.firstChild;
+	}), y(c.pause), (() => {
+		var e = i(Se), n = e.firstChild;
 		return e.$$mousemove = (e) => {
-			let t = u();
-			if (t) {
-				let n = f(e.clientX, e.clientY);
-				d({
-					...t,
-					x1: n.x,
-					y1: n.y
-				});
-			}
-		}, e.$$mouseup = () => d(), o(n, t(ye, {})), r((e) => l(n, "cursor", u() ? "inherit" : "crosshair")), s(), e;
+			c.send({
+				type: "MOVE_NEW_EDGE",
+				payload: {
+					x: e.clientX,
+					y: e.clientY
+				}
+			});
+		}, e.$$mouseup = () => c.send("CLEAR_NEW_EDGE"), o(n, t(xe, {})), r((e) => l(n, "cursor", u() ? "inherit" : "crosshair")), s(), e;
 	})();
 };
 n(["mouseup", "mousemove"]);
 //#endregion
 //#region src/ui/Flow.tsx
-var Se = (e) => t(re, { get children() {
-	return t(xe, e);
+var we = (e) => t(ie, { get children() {
+	return t(Ce, e);
 } });
 //#endregion
-export { M as CLASSES, Se as Flow };
+export { M as CLASSES, we as Flow };