@bemedev/mind-flow 0.0.1

package/lib/index.es.js

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