@bemedev/mind-flow 0.3.2 → 1.1.0

package/lib/index.es.js

@@ -1,95 +1,60 @@
-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 { 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-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,
+import { isDefined as e, toArray as t, type as n } from "@bemedev/app/bemedev";
+import { Dynamic as r, addEventListener as i, classList as a, className as o, createComponent as s, delegateEvents as c, effect as l, getNextElement as u, getNextMarker as d, insert as f, memo as p, mergeProps as m, runHydrationEvents as h, setAttribute as g, setStyleProperty as _, spread as v, style as y, template as b, use as x } from "solid-js/web";
+import { createState as S } from "@bemedev/app-solidjs";
+import { For as ee, Show as C, createComponent as w, createContext as T, createEffect as E, createMemo as D, createSignal as O, on as k, onCleanup as A, onMount as j, splitProps as M, useContext as N } from "solid-js";
+import { createMachine as te, deepEqual as P, interpret as ne, toArray as re } from "@bemedev/app";
+import { DragDropProvider as ie, DragDropSensors as ae, DragOverlay as F, createDraggable as I, useDragDropContext as oe } from "@thisbeyond/solid-dnd";
+//#region src/services/main.machine.data.ts
+var se = 100, L = {
+	width: 192,
+	height: 50
+}, ce = L.width, le = L.height, R = { content: "<Nouveau nœud>" }, ue = 1.5, de = 12, fe = 6, pe = 12, me = 18, he = 18, ge = 10.5, _e = -10.5, ve = 18, z = {
+	x: _e,
 	y: 18
-}, F = (e = 0) => ({
-	x: e + N,
+}, ye = {
+	WIDTH: 5e3,
+	HEIGHT: 3500
+}, be = (e = 0) => ({
+	x: e + ge,
 	y: 18
-}), I = {
+}), xe = 30, Se = 5, B = {
 	horizontal: 55,
 	vertical: 40
-}, ee = [{
+}, Ce = 5, we = 3, Te = [{
 	id: "node-0",
 	data: {
 		content: "Some text",
 		label: "Root node"
 	},
-	input: !1,
 	position: {
 		x: 350,
 		y: 100
 	}
-}], te = (e, t) => {
-	let n = h(e(), t);
-	return [
-		({ children: e }) => n.Provider({
-			value: n.defaultValue,
-			children: e
-		}),
-		() => x(n),
-		n
-	];
-}, ne = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", re = (e = 21) => {
-	let t = "", n = crypto.getRandomValues(new Uint8Array(e |= 0));
-	for (; e--;) t += ne[n[e] & 63];
-	return t;
-}, L = (e, t) => `edge = ${e} => ${t}`, R = (e) => `node-${e}`, ie = (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
-	};
-}, z = E({
+}], V = n({
 	x: "number",
 	y: "number"
-});
-E(({ optional: e, use: t }) => ({
-	input: e(t(z)),
-	output: t(z)
-}));
-var B = E({
+}), Ee = n(({ use: e }) => ({
+	input: e(V),
+	output: e(V)
+})), De = n({
 	from: "string",
 	to: "string"
-}), V = E(({ optional: e, use: t }) => ({
-	position: t(z),
-	data: {
-		label: e("string"),
-		content: "string"
-	},
-	input: "boolean"
-})), H = B, U = E(({ optional: e, use: t }) => ({
+}), Oe = n(({ union: e }) => e("string", "boolean", "number")), ke = n(({ record: e, use: t }) => e(t(Oe))), Ae = n(({ use: e }) => ({
+	position: e(V),
+	data: e(ke)
+})), je = De, Me = n(({ optional: e, use: t }) => ({
 	width: "number",
 	height: "number",
-	output: t(z),
-	input: e(t(z)),
-	inputOffset: e(t(z)),
-	outputOffset: e(t(z))
-})), W = E({
+	output: t(V),
+	input: e(t(V)),
+	inputOffset: e(t(V)),
+	outputOffset: e(t(V))
+})), Ne = n({
 	x0: "number",
 	y0: "number",
 	x1: "number",
 	y1: "number"
-}), ae = E(({ intersection: e, use: t }) => e({ from: "string" }, t(W))), G = E(({ optional: e }) => ({
+}), Pe = n(({ intersection: e, use: t }) => e({ from: "string" }, t(Ne))), Fe = n(({ optional: e }) => ({
 	self: {
 		left: "number",
 		top: "number",
@@ -102,14 +67,54 @@ var B = E({
 		height: "number",
 		width: "number"
 	})
-})), oe = S({
+})), Ie = /* @__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(" "), Le = (e, t, n) => Math.min(Math.max(e, t), n), Re = (e, t) => {
+	let n = T(void 0, t);
+	return [
+		(t) => w(n.Provider, {
+			value: e(),
+			get children() {
+				return t.children;
+			}
+		}),
+		() => {
+			let e = N(n);
+			if (!e) throw Error("useContext must be used within a Provider");
+			return e;
+		},
+		n
+	];
+}, ze = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", Be = (e = 21) => {
+	let t = "", n = crypto.getRandomValues(new Uint8Array(e |= 0));
+	for (; e--;) t += ze[n[e] & 63];
+	return t;
+}, Ve = (e, t) => `edge = ${e} => ${t}`, He = (e) => `node-${e}`, Ue = (e, t = {
+	width: L.width,
+	height: L.height,
+	inputOffset: z
+}) => {
+	let n = t.width, r = t.height, i = t.outputOffset ?? be(n), a = t.inputOffset ?? z;
+	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
+	};
+}, We = te({
 	initial: "idle",
 	on: { SET_BOARD: { actions: ["setBoard"] } },
 	states: {
 		idle: { on: {
 			CONFIGURE: {
 				actions: ["configure"],
-				target: "/working"
+				target: "/construction"
 			},
 			CONFIGURE_EMPTY: "/working"
 		} },
@@ -118,6 +123,10 @@ var B = E({
 			target: "/working"
 		} },
 		working: { on: {
+			CONFIGURE: {
+				actions: ["configure"],
+				target: "/construction"
+			},
 			MOVE_IMMEDIATE: { actions: [{
 				name: "buildUI",
 				description: "Must be in the ui"
@@ -144,7 +153,6 @@ var B = E({
 				],
 				target: "/construction"
 			},
-			ADD_DIMENSION: { actions: ["addDimension"] },
 			ADD_SIBLING: {
 				actions: [
 					"generateID",
@@ -156,6 +164,7 @@ var B = E({
 				],
 				target: "/construction"
 			},
+			RESIZE: { actions: ["resize", "buildUI"] },
 			MOVE: {
 				actions: ["moveNode", "buildUI"],
 				target: "/construction"
@@ -175,16 +184,20 @@ var B = E({
 			DESELECT: { actions: ["deselect"] },
 			ZOOM: { actions: ["zoom"] },
 			TOGGLE_ZOOM: { actions: ["toggleZoom"] },
-			SET_BOARD: { actions: ["setBoard"] }
+			SET_BOARD: { actions: ["setBoard"] },
+			SET_NODE_DATA: { actions: ["setNodeData"] },
+			EDIT: { actions: ["edit"] },
+			STOP_EDIT: { actions: ["stopEdit"] }
 		} }
 	}
 }, {
-	eventsMap: E(({ intersection: e, use: t, array: n }) => ({
+	eventsMap: n(({ intersection: e, use: t, array: n, optional: r }) => ({
 		CONFIGURE: {
-			nodes: n(e(t(V), { id: "string" })),
-			edges: n(e(t(H), { id: "string" }))
+			nodes: n(e(t(Ae), { id: "string" })),
+			edges: n(e(t(je), { id: "string" })),
+			defaultData: r(t(ke))
 		},
-		SET_BOARD: t(G),
+		SET_BOARD: t(Fe),
 		CONFIGURE_EMPTY: "never",
 		MOVE: {
 			id: "string",
@@ -202,58 +215,81 @@ var B = E({
 		DELETE: "string",
 		SELECT: "string",
 		DESELECT: "never",
-		ADD_EDGE: t(B),
+		EDIT: "string",
+		STOP_EDIT: "never",
+		ADD_EDGE: t(De),
 		START_NEW_EDGE: "string",
-		MOVE_NEW_EDGE: t(z),
+		MOVE_NEW_EDGE: t(V),
 		CLEAR_NEW_EDGE: "never",
 		ZOOM: "number",
 		TOGGLE_ZOOM: "never",
-		ADD_DIMENSION: {
+		RESIZE: {
+			id: "string",
+			size: {
+				width: "number",
+				height: "number"
+			}
+		},
+		SET_NODE_DATA: {
 			id: "string",
-			dimension: t(U)
+			data: t(ke)
 		}
 	})),
 	sync: !0,
-	pContext: E(({ union: e, optional: t, record: n, use: r, custom: i }) => ({
+	pContext: n(({ union: e, optional: t, record: n, use: r, custom: i }) => ({
 		generatedId: e("string", "null"),
 		previousZoom: t("number"),
-		dimensions: n(r(U)),
+		dimensions: n(r(Me)),
+		defaultData: t(r(ke)),
 		getBoardPosition: i(),
 		clampPosition: i(),
 		calculateDimensions: i()
 	})),
-	context: E(({ optional: e, use: t, array: n, record: r }) => ({
+	context: n(({ optional: e, use: t, array: n, record: r }) => ({
 		data: e({
 			nodes: n({
-				...t(V),
+				...t(Ae),
 				id: "string"
 			}),
 			edges: n({
-				...t(H),
+				...t(je),
 				id: "string"
 			})
 		}),
-		board: e(t(G)),
-		edgesPositions: r(t(W)),
-		newEdge: e(t(ae)),
+		board: e(t(Fe)),
+		edgesPositions: r(t(Ne)),
+		newEdge: e(t(Pe)),
 		selected: e("string"),
+		editing: e("string"),
 		updatingUI: e("boolean"),
 		zoom: "number",
-		bounds: t(z)
+		bounds: t(V)
 	}))
-}).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 }) => {
+}).provideOptions(({ assign: e, batch: n, erase: r, filter: i, action: a }) => ({ actions: {
+	configure: n(e("data", { CONFIGURE: ({ payload: { nodes: e, edges: t } }) => ({
+		nodes: e,
+		edges: t
+	}) }), e("newEdge", () => void 0), e("updatingUI", () => !1), a(({ pContext: e }) => {
 		e.generatedId = null;
-	}), i({ CONFIGURE: ({ payload: { nodes: e }, pContext: { dimensions: t } }) => {
-		e.forEach(({ id: e, position: n }) => {
-			t[e] = ie(n);
+	}), a({ CONFIGURE: ({ payload: { nodes: e, defaultData: t }, pContext: n }) => {
+		n.defaultData = t, e.forEach(({ id: e, position: t }) => {
+			n.dimensions[e] = Ue(t);
 		});
 	} })),
+	setNodeData: e("data.nodes", { SET_NODE_DATA: ({ context: { data: e }, payload: { id: t, data: n } }) => e?.nodes?.map((e) => e.id === t ? {
+		...e,
+		data: {
+			...e.data,
+			...n
+		}
+	} : e) }),
 	setBoard: e("board", { SET_BOARD: ({ payload: e }) => e }),
-	generateID: i(({ pContext: e }) => e.generatedId = re()),
+	generateID: a(({ pContext: e }) => e.generatedId = Be()),
 	select: e("selected", { SELECT: ({ payload: e }) => e }),
-	clearNewEdge: n("newEdge"),
-	deselect: n("selected"),
+	clearNewEdge: r("newEdge"),
+	deselect: n(r("selected"), r("editing")),
+	edit: n(e("editing", { EDIT: ({ payload: e }) => e }), e("selected", { EDIT: ({ payload: e }) => e })),
+	stopEdit: r("editing"),
 	startNewEdge: e("newEdge", { START_NEW_EDGE: ({ payload: e, pContext: { dimensions: t } }) => {
 		let { x: n, y: r } = t[e].output;
 		return {
@@ -264,31 +300,34 @@ var B = E({
 			y1: r
 		};
 	} }),
-	buildUI: t(e("edgesPositions", {
+	buildUI: n(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 = {
+			let i = e?.edges, a = r[n.id];
+			if (!a) return;
+			let o = a.outputOffset ?? be(a.width), s = a.inputOffset ?? z, 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);
+			return a.output = c, a.input = l, i?.forEach(({ from: e, to: r, id: i }) => {
+				let a = t[i];
+				a && (e === n.id && (a.x0 = c.x, a.y0 = c.y), r === n.id && (a.x1 = l.x, a.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 }) => {
+		MOVE_IMMEDIATE: ({ context: { data: e, edgesPositions: t }, payload: n, pContext: { dimensions: r } }) => (e?.edges?.forEach(({ from: e, to: i, id: a }) => {
 			let o = r[n.id], s = t[a];
 			if (!(!s || !o)) {
 				if (e === n.id) {
-					let e = o.outputOffset ?? F(o.width), t = n.x + e.x, r = n.y + e.y;
+					let e = o.outputOffset ?? be(o.width), t = n.x + e.x, r = n.y + e.y;
 					s.x0 = t, s.y0 = r, o.output = {
 						x: t,
 						y: r
 					};
 				}
 				if (i === n.id) {
-					let e = o?.inputOffset ?? P, t = n.x + e.x, r = n.y + e.y;
+					let e = o?.inputOffset ?? z, t = n.x + e.x, r = n.y + e.y;
 					s.x1 = t, s.y1 = r, o.input = {
 						x: t,
 						y: r
@@ -296,41 +335,54 @@ var B = E({
 				}
 			}
 		}), t),
-		else: ({ context: { data: e, edgesPositions: t }, pContext: { dimensions: n } }) => {
-			let r = T.typed(e?.edges);
-			return t = {}, r.forEach(({ from: e, id: r, to: i }) => {
-				let a = n[e]?.output, o = n[i]?.input;
-				a && o ? t[r] = {
+		else: ({ context: { data: e }, pContext: { dimensions: t } }) => {
+			let n = {};
+			return e?.edges?.forEach(({ from: e, id: r, to: i }) => {
+				let a = t[e]?.output, o = t[i]?.input;
+				a && o && (n[r] = {
 					x0: a.x,
 					y0: a.y,
 					x1: o.x,
 					y1: o.y
-				} : delete t[r];
-			}), t;
+				});
+			}), n;
 		}
 	}), e("updatingUI", () => !0)),
-	addDimension: i({ ADD_DIMENSION: ({ payload: { id: e, dimension: t }, pContext: { dimensions: n } }) => {
-		n[e] = t;
+	resize: a({ RESIZE: ({ payload: { id: e, size: { width: t, height: n } }, context: { data: r }, pContext: { dimensions: i } }) => {
+		let a = i[e];
+		if (!a) return;
+		a.width = t, a.height = n;
+		let o = r?.nodes?.find((t) => t.id === e), s = be(t), c = a.inputOffset ?? z;
+		a.outputOffset = s, a.inputOffset = c, o ? (a.output = {
+			x: o.position.x + s.x,
+			y: o.position.y + s.y
+		}, a.input = {
+			x: o.position.x + c.x,
+			y: o.position.y + c.y
+		}) : a.output = {
+			x: a.output.x,
+			y: a.output.y
+		};
 	} }),
-	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 = R(a), s = L(i, o);
-		return r.push({
+	linkChild: n(e("data.edges", { ADD_CHILD: ({ context: { data: e }, pContext: n, payload: r }) => {
+		let i = t.typed(e?.edges), a = n?.generatedId, o = He(a), s = Ve(r, o);
+		return i.push({
 			id: s,
-			from: i,
+			from: r,
 			to: o
-		}), r;
-	} }), e("selected", ({ pContext: { generatedId: e } }) => R(e))),
-	linkSibling: t(e("data.edges", { ADD_SIBLING: ({ pContext: e, payload: t, context: { data: n } }) => {
-		let r = T.typed(n?.edges), i = e?.generatedId, a = r.find(({ to: e }) => e === t)?.from;
-		if (!a) return r;
-		let o = R(i), s = L(a, o);
-		return r.push({
-			from: a,
-			to: o,
-			id: s
-		}), r;
-	} }), e("selected", ({ pContext: { generatedId: e } }) => R(e))),
-	selectParent: e("selected", ({ pContext: { generatedId: e } }) => R(e)),
+		}), i;
+	} }), e("selected", ({ pContext: { generatedId: e } }) => He(e))),
+	linkSibling: n(e("data.edges", { ADD_SIBLING: ({ pContext: e, payload: n, context: { data: r } }) => {
+		let i = t.typed(r?.edges), a = e?.generatedId, o = i.find(({ to: e }) => e === n)?.from;
+		if (!o) return i;
+		let s = He(a), c = Ve(o, s);
+		return i.push({
+			from: o,
+			to: s,
+			id: c
+		}), i;
+	} }), e("selected", ({ pContext: { generatedId: e } }) => He(e))),
+	selectParent: e("selected", ({ pContext: { generatedId: e } }) => He(e)),
 	moveNode: e("data.nodes", { MOVE: ({ context: { data: e }, payload: { id: t, x: n, y: r } }) => e?.nodes?.map((e) => e.id === t ? {
 		...e,
 		position: {
@@ -338,18 +390,18 @@ var B = E({
 			y: r
 		}
 	} : e) }),
-	delete: t(r("data.edges", { DELETE: ({ id: e, from: t, to: n }, r, { payload: i }) => e !== i && t !== i && n !== i }), r("data.nodes", { DELETE: ({ id: e }, t, { payload: n }) => e !== n })),
-	addEdge: t(e("data.edges", { ADD_EDGE: ({ context: e, payload: { from: t, to: n } }) => {
-		let r = e.data?.edges ?? [], i = L(t, n);
+	delete: n(i("data.edges", { DELETE: ({ id: e, from: t, to: n }, r, { payload: i }) => e !== i && t !== i && n !== i }), i("data.nodes", { DELETE: ({ id: e }, t, { payload: n }) => e !== n }), r("editing")),
+	addEdge: n(e("data.edges", { ADD_EDGE: ({ context: e, payload: { from: t, to: n } }) => {
+		let r = e.data?.edges ?? [], i = Ve(t, n);
 		return r.some((e) => e.id === i) ? r : [...r, {
 			id: i,
 			from: t,
 			to: n
 		}];
-	} }), n("newEdge")),
+	} }), r("newEdge")),
 	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;
+		let r = Le(e + t, .1, 3);
+		return n.previousZoom = void 0, r;
 	} }),
 	toggleZoom: e("zoom", { TOGGLE_ZOOM: ({ context: { zoom: e }, pContext: t }) => {
 		let n = t.previousZoom;
@@ -361,23 +413,21 @@ var B = E({
 		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);
+		let o = r.dimensions[e], s = `node-${r.generatedId}`, c = o?.width ?? L.width, l = o?.height ?? L.height, u = a.position.x + c + 100, d = a.position.y, f = r.clampPosition(n, u, d, c, l), p = r.defaultData ?? R;
 		return i?.push({
 			id: s,
-			data: { content: "<Nouveau nœud>" },
-			input: !0,
+			data: { ...p },
 			position: f
-		}), r.dimensions[s] = p, i;
+		}), r.dimensions[s] = r.calculateDimensions(f, o ?? L), 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);
+		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, L.width, L.height), h = r.defaultData ?? R;
 		return i?.push({
 			id: a,
-			data: { content: "<Nouveau nœud>" },
-			input: !1,
+			data: { ...h },
 			position: m
-		}), r.dimensions[a] = h, i;
+		}), r.dimensions[a] = r.calculateDimensions(m, L), i;
 	} }),
 	placeSibling: e("data.nodes", { ADD_SIBLING: ({ payload: e, context: { data: t, board: n }, pContext: r }) => {
 		if (!n) return t?.nodes;
@@ -385,13 +435,12 @@ var B = E({
 		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);
+		let c = r.dimensions[o], l = `node-${r.generatedId}`, u = c?.width ?? L.width, d = c?.height ?? L.height, f = s.position.x + u + 100, p = s.position.y + 100, m = r.clampPosition(n, f, p, u, d), h = r.defaultData ?? R;
 		return a?.push({
 			id: l,
-			data: { content: "<Nouveau nœud>" },
-			input: !0,
+			data: { ...h },
 			position: m
-		}), r.dimensions[l] = h, a;
+		}), r.dimensions[l] = r.calculateDimensions(m, c ?? L), a;
 	} }),
 	moveNewEdge: e("newEdge", { MOVE_NEW_EDGE: ({ context: { newEdge: e, board: t }, payload: n, pContext: r }) => {
 		if (!t || !e) return;
@@ -402,8 +451,8 @@ var B = E({
 			y1: a
 		};
 	} })
-} })), [K, q] = te(() => {
-	let e = C(oe, {
+} })), [Ge, H] = Re(() => {
+	let e = ne(We, {
 		context: {
 			zoom: 1,
 			edgesPositions: {},
@@ -426,24 +475,24 @@ var B = E({
 					y: (n - r.self.top) / i
 				};
 			},
-			clampPosition: (t, n, r, i = 192, a = 50) => {
+			clampPosition: (t, n, r, i = L.width, a = L.height) => {
 				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);
+				let s = e.state.context.zoom ?? 1, c = o.scrollLeft / s + B.horizontal, l = Math.max(c, (o.scrollLeft + o.width) / s - B.horizontal - i), u = o.scrollTop / s + B.vertical, d = Math.max(u, (o.scrollTop + o.height) / s - B.vertical - a);
 				return {
-					x: Math.min(Math.max(n, c), l),
-					y: Math.min(Math.max(r, u), d)
+					x: Le(n, c, l),
+					y: Le(r, u, d)
 				};
 			},
 			calculateDimensions: (e, t = {
-				width: 192,
-				height: 50,
-				inputOffset: P
+				width: L.width,
+				height: L.height,
+				inputOffset: z
 			}) => {
-				let n = t.width, r = t.height, i = t.outputOffset ?? F(n), a = t.inputOffset;
+				let n = t.width, r = t.height, i = t.outputOffset ?? be(n), a = t.inputOffset ?? z;
 				return {
 					width: n,
 					height: r,
@@ -462,28 +511,28 @@ var B = E({
 		}
 	});
 	return e.start(), e;
-}, { name: "FlowContext" }), J = Object.prototype.hasOwnProperty;
-function Y(e, t, n) {
-	for (n of e.keys()) if (X(n, t)) return n;
+}, { name: "FlowContext" }), Ke = Object.prototype.hasOwnProperty;
+function qe(e, t, n) {
+	for (n of e.keys()) if (U(n, t)) return n;
 }
-function X(e, t) {
+function U(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-- && X(e[r], t[r]););
+			if ((r = e.length) === t.length) for (; r-- && U(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 = Y(t, i), !i) || !t.has(i)) return !1;
+			for (r of e) if (i = r, i && typeof i == "object" && (i = qe(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 = Y(t, i), !i) || !X(r[1], t.get(i))) return !1;
+			for (r of e) if (i = r[0], i && typeof i == "object" && (i = qe(t, i), !i) || !U(r[1], t.get(i))) return !1;
 			return !0;
 		}
 		if (n === ArrayBuffer) e = new Uint8Array(e), t = new Uint8Array(t);
@@ -496,7 +545,7 @@ function X(e, t) {
 			return r === -1;
 		}
 		if (!n || typeof e == "object") {
-			for (n in r = 0, e) if (J.call(e, n) && ++r && !J.call(t, n) || !(n in t) || !X(e[n], t[n])) return !1;
+			for (n in r = 0, e) if (Ke.call(e, n) && ++r && !Ke.call(t, n) || !(n in t) || !U(e[n], t[n])) return !1;
 			return Object.keys(t).length === r;
 		}
 	}
@@ -504,8 +553,8 @@ function X(e, t) {
 }
 //#endregion
 //#region src/ui/components/Bounds.tsx
-var se = () => {
-	let e = q(), t = f(e, { selector: ({ context: e }) => e.zoom }), n = f(e, { selector: ({ context: e }) => e.board }), [r, { addTransformer: i, removeTransformer: a, onDragStart: o, onDragEnd: s }] = j(), c = {
+var Je = () => {
+	let e = H(), t = S(e, { selector: ({ context: e }) => e.zoom }), n = S(e, { selector: ({ context: e }) => e.board }), [r, { addTransformer: i, removeTransformer: a, onDragStart: o, onDragEnd: s }] = oe(), c = {
 		id: "clamp-to-container",
 		order: 100,
 		callback: (e) => {
@@ -513,7 +562,7 @@ var se = () => {
 			if (!i || !a) return e;
 			let o = a.node;
 			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;
+			let s = t(), c = B.horizontal, l = Math.max(c, i.width / s - o.offsetWidth - B.horizontal), u = B.vertical, d = Math.max(u, i.height / s - o.offsetHeight - B.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(e.x, f), p),
 				y: Math.min(Math.max(e.y, m), h)
@@ -525,200 +574,314 @@ var se = () => {
 	}), s(({ draggable: e }) => {
 		a("draggables", e.id, c.id);
 	}), null;
-}, ce = /*#__PURE__*/ u("<svg><path class=\"relative cursor-pointer fill-transparent\"></svg>", !1, !0, !1), le = /*#__PURE__*/ u("<svg><g cursor=pointer style=pointer-events:all;z-index:30><circle cx=0 cy=0 r=12 fill=\"rgba(168, 168, 168, 1)\"></circle><svg fill=currentColor stroke-width=0 xmlns=http://www.w3.org/2000/svg class=\"h-25 w-25 bg-white fill-white\"width=20 height=20 viewBox=\"0 0 20 20\"color=white x=-10 y=-10><path d=\"M10.185,1.417c-4.741,0-8.583,3.842-8.583,8.583c0,4.74,3.842,8.582,8.583,8.582S18.768,14.74,18.768,10C18.768,5.259,14.926,1.417,10.185,1.417 M10.185,17.68c-4.235,0-7.679-3.445-7.679-7.68c0-4.235,3.444-7.679,7.679-7.679S17.864,5.765,17.864,10C17.864,14.234,14.42,17.68,10.185,17.68 M10.824,10l2.842-2.844c0.178-0.176,0.178-0.46,0-0.637c-0.177-0.178-0.461-0.178-0.637,0l-2.844,2.841L7.341,6.52c-0.176-0.178-0.46-0.178-0.637,0c-0.178,0.176-0.178,0.461,0,0.637L9.546,10l-2.841,2.844c-0.178,0.176-0.178,0.461,0,0.637c0.178,0.178,0.459,0.178,0.637,0l2.844-2.841l2.844,2.841c0.178,0.178,0.459,0.178,0.637,0c0.178-0.176,0.178-0.461,0-0.637L10.824,10z\"></svg>", !1, !0, !1), Z = (e) => e * 100 / 200, ue = ({ x0: e, y0: t, x1: n, y1: r }) => `M ${e} ${t} C ${e + Z(Math.abs(n - e))} ${t}, ${n - Z(Math.abs(n - e))} ${r}, ${n} ${r}`, Q = (n) => {
-	let a = q(), o = f(a, {
-		selector: ({ context: { newEdge: e, edgesPositions: t } }) => n.isNew ? e : t[n.id],
-		equals: X
-	}), u = f(a, { selector: (e) => e.context.selected === n.id }), d = () => {
-		let e = o();
-		return {
+}, Ye = /*#__PURE__*/ b("<svg><path class=\"relative cursor-pointer fill-transparent\"></svg>", !1, !0, !1), Xe = /*#__PURE__*/ b("<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), Ze = (e) => e * 100 / 200, Qe = (e) => {
+	if (!e) return "";
+	let { x0: t, y0: n, x1: r, y1: i } = e;
+	return `M ${t} ${n} C ${t + Ze(Math.abs(r - t))} ${n}, ${r - Ze(Math.abs(r - t))} ${i}, ${r} ${i}`;
+}, $e = (e) => {
+	let t = H(), n = S(t, {
+		selector: ({ context: { newEdge: t, edgesPositions: n } }) => e.isNew ? t : n[e.id],
+		equals: U
+	}), r = S(t, { selector: (t) => t.context.selected === e.id }), i = () => {
+		let e = n();
+		return e ? {
 			x: e.x0 + (e.x1 - e.x0) / 2,
 			y: e.y0 + (e.y1 - e.y0) / 2
+		} : {
+			x: 0,
+			y: 0
 		};
 	};
-	return [(() => {
-		var t = i(ce);
-		return t.$$mousedown = (e) => (e.stopPropagation(), a.send({
-			type: "SELECT",
-			payload: n.id
-		})), r((r) => {
-			var i = {
-				"stroke-[rgba(168,168,168,0.4)] stroke-3 z-200": !!n.isNew,
-				"stroke-[rgba(168,168,168,1)] stroke-4 z-100": u() && !n.isNew,
-				"stroke-[rgba(168,168,168,0.8)] stroke-3": !u() && !n.isNew
-			}, a = n.isNew ? "none" : "all", s = ue(o());
-			return r.e = e(t, i, r.e), a !== r.t && l(t, "pointer-events", r.t = a), s !== r.a && c(t, "d", r.a = s), r;
-		}, {
-			e: void 0,
-			t: void 0,
-			a: void 0
-		}), s(), t;
-	})(), t(m, {
+	return s(C, {
 		get when() {
-			return u();
+			return n();
 		},
-		get children() {
-			var e = i(le);
-			return e.$$mousedown = (e) => {
-				e.stopPropagation(), a.send({
-					type: "DELETE",
-					payload: n.id
-				});
-			}, r(() => c(e, "transform", `translate(${d().x}, ${d().y})`)), s(), e;
-		}
-	})];
+		children: (n) => [(() => {
+			var i = u(Ye);
+			return i.$$mousedown = (n) => (n.stopPropagation(), t.send({
+				type: "SELECT",
+				payload: e.id
+			})), l((t) => {
+				var o = {
+					"stroke-[rgba(168,168,168,0.4)] stroke-3 z-200": !!e.isNew,
+					"stroke-[rgba(168,168,168,1)] stroke-4 z-100": r() && !e.isNew,
+					"stroke-[rgba(168,168,168,0.8)] stroke-3": !r() && !e.isNew
+				}, s = e.isNew ? "none" : "all", c = Qe(n());
+				return t.e = a(i, o, t.e), s !== t.t && _(i, "pointer-events", t.t = s), c !== t.a && g(i, "d", t.a = c), t;
+			}, {
+				e: void 0,
+				t: void 0,
+				a: void 0
+			}), h(), i;
+		})(), s(C, {
+			get when() {
+				return r();
+			},
+			get children() {
+				var n = u(Xe);
+				return n.$$mousedown = (n) => {
+					n.stopPropagation(), t.send({
+						type: "DELETE",
+						payload: e.id
+					});
+				}, l(() => g(n, "transform", `translate(${i().x}, ${i().y})`)), h(), n;
+			}
+		})]
+	});
 };
-n(["mousedown"]);
+c(["mousedown"]);
 //#endregion
 //#region src/ui/components/EdgesBoard.tsx
-var de = /*#__PURE__*/ u("<svg class=\"pointer-events-none h-full w-full overflow-visible\"><!$><!/><!$><!/>"), fe = () => {
-	let e = q(), n = f(e, { selector: (e) => !!e.context.newEdge }), r = f(e, {
-		selector: ({ context: e }) => Object.keys(e.edgesPositions),
+var et = /*#__PURE__*/ b("<svg class=\"pointer-events-none h-full w-full overflow-visible\"><!$><!/><!$><!/>"), tt = () => {
+	let e = H(), t = S(e, { selector: (e) => !!e.context.newEdge }), n = S(e, {
+		selector: ({ context: e }) => Object.keys(e.edgesPositions ?? {}),
 		equals: (e, t) => e.length === t.length
 	});
 	return (() => {
-		var e = i(de), s = e.firstChild, [c, l] = a(s.nextSibling), u = c.nextSibling, [d, f] = a(u.nextSibling);
-		return o(e, t(m, {
+		var e = u(et), r = e.firstChild, [i, a] = d(r.nextSibling), o = i.nextSibling, [c, l] = d(o.nextSibling);
+		return f(e, s(C, {
 			get when() {
-				return n();
+				return t();
 			},
 			get children() {
-				return t(Q, {
+				return s($e, {
 					id: "__#new-edge#__TEMP",
 					isNew: !0
 				});
 			}
-		}), c, l), o(e, t(p, {
+		}), i, a), f(e, s(ee, {
 			get each() {
-				return r();
+				return n();
 			},
-			children: (e) => t(Q, { id: e })
-		}), d, f), e;
+			children: (e) => s($e, { id: e })
+		}), c, l), e;
 	})();
-}, pe = /*#__PURE__*/ u("<svg class=\"cursor-pointer overflow-visible rounded-full bg-green-500 p-0.5 text-center font-bold hover:bg-green-600\"viewBox=\"0 0 1024 1024\"preserveAspectRatio=xMaxYMax xmlns=http://www.w3.org/2000/svg fill=white style=pointer-events:all;fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2><g id=background><path d=\"M467.40667,277.66696c-0.05948,-14.53055 5.75527,-22.95613 -8.62044,-20.90487c-112.55699,16.0607 -222.1609,112.14558 -245.06161,239.85765c-46.52056,259.43466 231.33083,443.06705 449.51209,316.97506c117.31668,-67.80002 160.95215,-190.43324 151.34416,-288.29849c-5.92276,-60.32819 -27.80273,-107.95668 -53.44246,-144.25469l59.39269,-42.05363c111.72214,156.309 73.11535,351.55635 -25.06953,459.45565c-184.18877,202.4124 -470.46624,145.52064 -592.95027,-32.92123c-156.18269,-227.53604 -27.15324,-543.64371 261.18883,-582.44416c5.0579,-0.68061 3.56556,-7.04079 3.56442,-8.58985c-0.05594,-76.3354 -0.11021,-76.7687 1.10909,-77.24589c2.06886,-0.80969 151.41433,118.4561 151.92482,118.95524c4.65592,4.55233 -0.99548,7.829 -29.07828,30.50907c-120.49369,97.31245 -120.4977,98.55675 -123.0691,97.87586c-0.43639,-0.11555 -0.80698,-0.31322 -0.74442,-66.91571Z\"></path><path d=\"M316.61562,611.03414c0.11517,-90.16257 -0.25516,-99.92912 0.64739,-101.78856c1.56486,-3.22393 131.99102,0.91032 134.6959,-1.89763c2.21336,-2.2977 -0.59362,-129.97807 1.1376,-132.37034c0.7253,-1.00225 11.10552,-0.99175 12.07474,-0.99077c104.50336,0.10564 104.90098,-0.37811 105.967,0.85765c1.56461,1.81373 0.25596,114.18436 0.67852,129.81412c0.1322,4.88975 3.22386,3.28152 99.72028,3.4563c33.0841,0.05992 36.14259,-1.40368 36.21852,4.50462c0.11713,9.11348 1.41954,110.45369 -0.40274,113.92715c-1.81106,3.45208 -130.39967,-0.42618 -134.48289,1.62075c-2.29035,1.14816 -0.36989,101.12392 -1.11542,130.51904c-0.09548,3.76459 -2.13506,3.20617 -47.84854,3.17365c-69.30253,-0.0493 -69.31099,-0.25627 -69.65762,-0.42191c-3.77927,-1.80595 0.16287,-129.33555 -2.24266,-132.58994c-1.79931,-2.43424 -124.06108,-0.29118 -132.80252,-0.97392c-3.81102,-0.29766 -2.58229,-14.8847 -2.58758,-16.8402Z\">"), me = /*#__PURE__*/ u("<div id=inputs class=\"pointer-events-none absolute top-0 z-10 flex cursor-default flex-col\"><div class=\"cursor-default rounded-full bg-[#e38b29] shadow-md\"style=pointer-events:all>"), he = /*#__PURE__*/ u("<div class=min-w-48><div><svg class=\"cursor-pointer rounded-full fill-[#a11111] opacity-100 transition-all duration-200 ease-in-out\"fill=currentColor stroke-width=2 viewBox=\"4 4 16 16\"style=overflow:visible;pointer-events:all><path d=\"M12 4c-4.419 0-8 3.582-8 8s3.581 8 8 8 8-3.582 8-8-3.581-8-8-8zm3.707 10.293a.999.999 0 11-1.414 1.414L12 13.414l-2.293 2.293a.997.997 0 01-1.414 0 .999.999 0 010-1.414L10.586 12 8.293 9.707a.999.999 0 111.414-1.414L12 10.586l2.293-2.293a.999.999 0 111.414 1.414L13.414 12l2.293 2.293z\"></path></svg><!$><!/><svg class=\"flex cursor-pointer items-center justify-center rounded-lg bg-blue-500 p-0.5 text-center font-bold text-white hover:bg-blue-600\"viewBox=\"0 0 24 24\"stroke=currentColor stroke-width=2 style=pointer-events:all><path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\"></path></svg></div><!$><!/><!$><!/><!$><!/><div id=outputs class=\"pointer-events-none absolute top-0 z-10 flex flex-col\"><div class=\"cursor-crosshair rounded-full bg-[#e38b29] shadow-md\"style=pointer-events:all>"), ge = /*#__PURE__*/ u("<span class=\"min-w-max border-b border-[#f0f0f0] p-3 whitespace-nowrap text-red-600 select-none\">"), $ = /*#__PURE__*/ u("<div class=\"p-3 select-none\">"), _e = (n) => {
-	let u = q(), p = f(u, { selector: (e) => e.context.newEdge }), h = A(n.id), g = f(u, {
-		selector: ({ context: e }) => {
-			let t = w.typed(e.data?.nodes).find((e) => e.id === n.id);
+}, nt = (e, t) => {
+	let n = (n) => {
+		e.contains(n.target) || t()?.();
+	};
+	document.body.addEventListener("click", n), A(() => document.body.removeEventListener("click", n));
+}, rt = (e, t) => {
+	let n, r = () => {
+		n !== void 0 && (clearTimeout(n), n = void 0);
+	}, i = () => {
+		r();
+	}, a = (e) => {
+		r();
+		let i = t();
+		if (!i) return;
+		let a, o = 0;
+		typeof i == "function" ? a = i : Array.isArray(i) ? (a = i[0], o = i[1] ?? 0) : typeof i == "object" && (a = i.callback ?? i.onMouseOut, o = i.delay ?? 0), a && (o > 0 ? n = setTimeout(() => {
+			a?.(e), n = void 0;
+		}, o) : a(e));
+	};
+	e.addEventListener("mouseleave", a), e.addEventListener("mouseenter", i), A(() => {
+		r(), e.removeEventListener("mouseleave", a), e.removeEventListener("mouseenter", i);
+	});
+}, it = (e) => (t) => {
+	let n = H(), r = new ResizeObserver((t) => {
+		let r = t[0].target;
+		if (!r) return;
+		let i = r.clientWidth, a = r.clientHeight;
+		i > 0 && a > 0 && n.send({
+			type: "RESIZE",
+			payload: {
+				id: e,
+				size: {
+					width: i,
+					height: a
+				}
+			}
+		});
+	});
+	return r.observe(t), () => {
+		r.unobserve(t), r.disconnect();
+	};
+}, at = /*#__PURE__*/ b("<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\">"), ot = /*#__PURE__*/ b("<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></div><div id=inputs class=\"pointer-events-none absolute top-0 z-10 flex cursor-default flex-col\"><div class=\"cursor-default rounded-full bg-[#e38b29] shadow-md\"style=pointer-events:all></div></div><div id=outputs class=\"pointer-events-none absolute top-0 z-10 flex flex-col\"><div class=\"cursor-crosshair rounded-full bg-[#e38b29] shadow-md\"style=pointer-events:all>"), st = /*#__PURE__*/ b("<div class=\"p-3 select-none\"><!$><!/><!$><!/><!$><!/>"), ct = /*#__PURE__*/ b("<span class=\"mb-2 block min-w-max border-b border-[#f0f0f0] pb-2 font-semibold whitespace-nowrap text-red-600 select-none\">"), lt = /*#__PURE__*/ b("<div class=select-none>"), ut = /*#__PURE__*/ b("<div><span class=font-semibold><!$><!/>: </span><span>"), dt = (e) => {
+	let t = H(), n = S(t, { selector: (e) => e.context.newEdge }), i = I(e.id), o = S(t, {
+		selector: ({ context: t }) => {
+			let n = re.typed(t.data?.nodes).find((t) => t.id === e.id);
 			return {
-				x: t.position.x,
-				y: t.position.y,
-				label: t.data.label,
-				content: t.data.content ?? "",
-				input: t.input
+				x: n?.position.x ?? 0,
+				y: n?.position.y ?? 0,
+				data: n?.data ?? {}
 			};
 		},
-		equals: X
-	}), _ = f(u, { selector: ({ context: e }) => e.selected === n.id }), v = f(u, { selector: ({ context: { data: e } }) => {
-		let t = e?.edges;
-		return t ? t.some(({ to: e }) => e === n.id) : !1;
+		equals: U
+	}), c = S(t, { selector: ({ context: t }) => t.selected === e.id }), v = S(t, { selector: ({ context: { data: t } }) => {
+		let n = t?.edges;
+		return n ? n.some(({ to: t }) => t === e.id) : !1;
 	} });
 	return (() => {
-		var f = i(he), y = f.firstChild, b = y.firstChild, x = b.nextSibling, [S, C] = a(x.nextSibling), w = S.nextSibling, T = y.nextSibling, [E, D] = a(T.nextSibling), O = E.nextSibling, [k, A] = a(O.nextSibling), j = k.nextSibling, [M, N] = a(j.nextSibling), P = M.nextSibling, F = P.firstChild;
-		return f.$$mousedown = (e) => {
-			e.stopPropagation(), u.send({
+		var y = u(ot), b = y.firstChild, S = b.firstChild, w = S.nextSibling, [T, E] = d(w.nextSibling), D = T.nextSibling, O = b.nextSibling, k = O.nextSibling, A = k.firstChild, j = k.nextSibling, M = j.firstChild;
+		y.$$dblclick = (n) => {
+			n.stopPropagation(), t.send({
+				type: "EDIT",
+				payload: e.id
+			});
+		}, y.$$mousedown = (n) => {
+			n.stopPropagation(), t.send({
 				type: "SELECT",
-				payload: n.id
+				payload: e.id
 			});
-		}, d(h, f, () => ({ skipTransform: !0 })), b.$$click = (e) => {
-			e.stopPropagation(), u.send({
+		}, x(i, y, () => ({ skipTransform: !0 })), S.$$click = (n) => {
+			n.stopPropagation(), t.send({
 				type: "DELETE",
-				payload: n.id
+				payload: e.id
 			});
-		}, l(b, "width", "24px"), l(b, "height", "24px"), o(y, t(m, {
+		}, _(S, "width", "24px"), _(S, "height", "24px"), f(b, s(C, {
 			get when() {
 				return v();
 			},
 			get children() {
-				var e = i(pe);
-				return e.$$click = () => u.send({
+				var n = u(at);
+				return n.$$click = () => t.send({
 					type: "ADD_SIBLING",
-					payload: n.id
-				}), l(e, "width", "24px"), l(e, "height", "24px"), s(), e;
+					payload: e.id
+				}), _(n, "width", "24px"), _(n, "height", "24px"), h(), n;
 			}
-		}), S, C), w.$$click = () => u.send({
+		}), T, E), D.$$click = () => t.send({
 			type: "ADD_CHILD",
-			payload: n.id
-		}), l(w, "width", "24px"), l(w, "height", "24px"), o(f, t(m, {
-			get when() {
-				return g().label;
-			},
-			keyed: !0,
-			children: (e) => (() => {
-				var t = i(ge);
-				return o(t, e), t;
-			})()
-		}), E, D), o(f, t(m, {
+			payload: e.id
+		}), _(D, "width", "24px"), _(D, "height", "24px");
+		var N = it(e.id);
+		return typeof N == "function" && x(N, O), f(O, s(C, {
 			get when() {
-				return g().content;
+				return e.children;
 			},
-			keyed: !0,
-			children: (e) => (() => {
-				var t = i($);
-				return o(t, e), t;
-			})()
-		}), k, A), o(f, t(m, {
-			get when() {
-				return g().input || v();
+			get fallback() {
+				return (() => {
+					var e = u(st), t = e.firstChild, [n, r] = d(t.nextSibling), i = n.nextSibling, [a, c] = d(i.nextSibling), l = a.nextSibling, [m, h] = d(l.nextSibling);
+					return f(e, s(C, {
+						get when() {
+							return o().data.label;
+						},
+						keyed: !0,
+						children: (e) => (() => {
+							var t = u(ct);
+							return f(t, () => String(e)), t;
+						})()
+					}), n, r), f(e, s(C, {
+						get when() {
+							return o().data.content;
+						},
+						keyed: !0,
+						children: (e) => (() => {
+							var t = u(lt);
+							return f(t, () => String(e)), t;
+						})()
+					}), a, c), f(e, s(C, {
+						get when() {
+							return p(() => !o().data.label)() && !o().data.content;
+						},
+						get children() {
+							return s(ee, {
+								get each() {
+									return Object.entries(o().data);
+								},
+								children: ([e, t]) => (() => {
+									var n = u(ut), r = n.firstChild, i = r.firstChild, [a, o] = d(i.nextSibling);
+									a.nextSibling;
+									var s = r.nextSibling;
+									return f(r, e, a, o), f(s, () => String(t)), n;
+								})()
+							});
+						}
+					}), m, h), e;
+				})();
 			},
 			get children() {
-				var e = i(me), t = e.firstChild;
-				return l(e, "left", "-18px"), t.$$mouseup = (e) => {
-					e.stopPropagation();
-					let t = p()?.from;
-					t ? u.send({
-						type: "ADD_EDGE",
-						payload: {
-							from: t,
-							to: n.id
-						}
-					}) : u.send("CLEAR_NEW_EDGE");
-				}, t.$$mousedown = (e) => {
-					e.stopPropagation();
-				}, l(t, "width", "12px"), l(t, "height", "12px"), l(t, "margin-top", "12px"), s(), e;
+				return s(r, m({ get component() {
+					return e.children;
+				} }, () => o().data));
 			}
-		}), M, N), l(P, "right", "-18px"), F.$$mousedown = (e) => {
-			e.stopPropagation(), u.send("DESELECT"), u.send({
+		})), _(k, "left", "-18px"), A.$$mouseup = (r) => {
+			r.stopPropagation();
+			let i = n()?.from;
+			i ? t.send({
+				type: "ADD_EDGE",
+				payload: {
+					from: i,
+					to: e.id
+				}
+			}) : t.send("CLEAR_NEW_EDGE");
+		}, A.$$mousedown = (e) => {
+			e.stopPropagation();
+		}, _(A, "width", "12px"), _(A, "height", "12px"), _(A, "margin-top", "12px"), _(j, "right", "-18px"), M.$$mousedown = (n) => {
+			n.stopPropagation(), t.send("DESELECT"), t.send({
 				type: "START_NEW_EDGE",
-				payload: n.id
+				payload: e.id
 			});
-		}, l(F, "width", "12px"), l(F, "height", "12px"), l(F, "margin-top", "12px"), r((t) => {
-			var r = {
+		}, _(M, "width", "12px"), _(M, "height", "12px"), _(M, "margin-top", "12px"), l((t) => {
+			var n = {
 				"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]": _(),
-				"border border-[#e6d4be] z-[1]": !_()
-			}, i = `${g().y}px`, a = `${g().x}px`, o = n.id, s = {
+				"border border-[#e38c29] z-100": c(),
+				"border border-[#e6d4be] z-1": !c()
+			}, r = `${o().y}px`, i = `${o().x}px`, s = e.id, l = {
 				"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": _(),
-				"w-0 -right-3 opacity-0 overflow-hidden": !_()
+				"w-full opacity-100": c(),
+				"w-0 -right-3 opacity-0 overflow-hidden": !c()
 			};
-			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;
+			return t.e = a(y, n, t.e), r !== t.t && _(y, "top", t.t = r), i !== t.a && _(y, "left", t.a = i), s !== t.o && g(y, "id", t.o = s), t.i = a(b, l, t.i), t;
 		}, {
 			e: void 0,
 			t: void 0,
 			a: void 0,
 			o: void 0,
 			i: void 0
-		}), s(), f;
+		}), h(), y;
 	})();
 };
-n([
+c([
 	"mousedown",
+	"dblclick",
 	"click",
 	"mouseup"
 ]);
 //#endregion
-//#region src/ui/components/NodesBoard.tsx
-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] = _({
+//#region src/ui/components/Panels.tsx
+var ft = /*#__PURE__*/ b("<div class=\"absolute top-4 left-4 z-50\">"), pt = /*#__PURE__*/ b("<div class=\"absolute top-4 right-4 z-50\">"), mt = /*#__PURE__*/ b("<div class=\"absolute bottom-4 left-4 z-50\">"), ht = (e) => [
+	s(C, {
+		get when() {
+			return e.topLeft;
+		},
+		keyed: !0,
+		children: (e) => (() => {
+			var t = u(ft);
+			return f(t, s(e, {})), t;
+		})()
+	}),
+	s(C, {
+		get when() {
+			return e.topRight;
+		},
+		keyed: !0,
+		children: (e) => (() => {
+			var t = u(pt);
+			return f(t, s(e, {})), t;
+		})()
+	}),
+	s(C, {
+		get when() {
+			return e.bottomLeft;
+		},
+		keyed: !0,
+		children: (e) => (() => {
+			var t = u(mt);
+			return f(t, s(e, {})), t;
+		})()
+	})
+], gt = /*#__PURE__*/ b("<div class=\"relative h-full w-full overflow-auto\"><!$><!/><div class=\"relative cursor-crosshair overflow-hidden\"><div class=\"relative h-full w-full\"style=\"transform-origin:top left\"><!$><!/><!$><!/><!$><!/>"), _t = /*#__PURE__*/ b("<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\">"), vt = /*#__PURE__*/ b("<div class=\"relative mx-auto h-full w-full overflow-hidden\">"), yt = (e) => {
+	let t, [n, r] = O(!1), [i, a] = O({
 		x: 0,
 		y: 0
-	}), [y, x] = _(), S = 0, C = 0, T = q(), E = f(T, {
+	}), [o, c] = O(), p = 0, g = 0, v = H(), y = S(v, {
 		selector: (e) => e.context.newEdge,
-		equals: X
-	}), A = f(T, { selector: (e) => e.context.zoom ?? 1 }), j = () => {
-		let e = y();
+		equals: U
+	}), b = S(v, { selector: (e) => e.context.zoom ?? 1 }), w = () => {
+		let e = o();
 		if (!e) return;
-		let t = e.getBoundingClientRect(), n = () => y()?.parentElement, r = {
+		let t = e.getBoundingClientRect(), n = () => o()?.parentElement, r = {
 			self: {
 				left: t.left,
 				top: t.top,
@@ -732,59 +895,59 @@ var ve = /*#__PURE__*/ u("<div class=\"relative h-full w-full overflow-auto roun
 				width: n().clientWidth
 			} : void 0
 		};
-		T.send({
+		v.send({
 			type: "SET_BOARD",
 			payload: r
 		});
-	}, M = () => {
-		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, j();
+	}, T = () => {
+		let e = t.scrollWidth - t.clientWidth, n = t.scrollHeight - t.clientHeight;
+		p = e > 0 ? t.scrollLeft / e : 0, g = n > 0 ? t.scrollTop / n : 0, w();
 	};
-	g(v(A, () => {
-		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 })), b(j);
-	let N = f(T, { selector: (e) => e.context?.selected }), P = f(T, {
-		selector: ({ context: e }) => w.typed(e.data?.nodes).map((e) => e.id),
+	E(k(b, () => {
+		let e = t.scrollWidth - t.clientWidth, n = t.scrollHeight - t.clientHeight;
+		e > 0 && (t.scrollLeft = p * e), n > 0 && (t.scrollTop = g * n);
+	}, { defer: !0 })), j(w);
+	let D = S(v, { selector: (e) => e.context?.selected }), A = S(v, {
+		selector: ({ context: e }) => re.typed(e.data?.nodes).map((e) => e.id),
 		equals: (e, t) => e.length === t.length
-	}), F = () => `calc((500vw - 265px) * ${A()})`, I = () => `calc((500vh - 425px) * ${A()})`;
+	}), M = () => `calc((500vw - 265px) * ${b()})`, N = () => `calc((500vh - 425px) * ${b()})`;
 	return (() => {
-		var f = i(be);
-		return f.addEventListener("wheel", (e) => {
+		var o = u(vt);
+		return o.addEventListener("wheel", (e) => {
 			if (e.ctrlKey || e.metaKey) {
-				e.preventDefault(), M();
+				e.preventDefault(), T();
 				let t = e.deltaY < 0 ? .1 : -.1;
-				T.send({
+				v.send({
 					type: "ZOOM",
 					payload: t
 				});
 			}
-		}), o(f, t(D, {
+		}), f(o, s(ie, {
 			onDragMove: ({ draggable: { transform: e, node: t, id: n } }) => {
-				let r = t.parentElement?.parentElement, i = A(), a = r ? Math.max(0, r.clientWidth / i - t.offsetWidth) : Infinity, o = r ? Math.max(0, r.clientHeight / i - t.offsetHeight) : Infinity, s = t.offsetLeft + e.x / i, c = t.offsetTop + e.y / i, l = Math.min(Math.max(s, 0), a), u = Math.min(Math.max(c, 0), o), d = l - t.offsetLeft, f = u - t.offsetTop;
-				t.style.setProperty("transform", `translate3d(${d}px, ${f}px, 0)`), T.send({
+				let r = t.parentElement?.parentElement, i = b(), o = r ? Math.max(0, r.clientWidth / i - t.offsetWidth) : Infinity, s = r ? Math.max(0, r.clientHeight / i - t.offsetHeight) : Infinity, c = t.offsetLeft + e.x / i, l = t.offsetTop + e.y / i, u = Math.min(Math.max(c, 0), o), d = Math.min(Math.max(l, 0), s), f = u - t.offsetLeft, p = d - t.offsetTop;
+				t.style.setProperty("transform", `translate3d(${f}px, ${p}px, 0)`), v.send({
 					type: "MOVE_IMMEDIATE",
 					payload: {
 						id: `${n}`,
-						x: l,
-						y: u
+						x: u,
+						y: d
 					}
-				}), h({
-					x: d * i,
-					y: f * i
+				}), a({
+					x: f * i,
+					y: p * i
 				});
 			},
 			onDragEnd: ({ draggable: { node: e, id: t } }) => {
-				let n = e.parentElement?.parentElement, r = A(), i = n ? Math.max(0, n.clientWidth / r - e.offsetWidth) : Infinity, a = n ? Math.max(0, n.clientHeight / r - e.offsetHeight) : Infinity, o = e.offsetLeft + u().x / r, s = e.offsetTop + u().y / r, c = Math.min(Math.max(o, 0), i), l = Math.min(Math.max(s, 0), a);
-				e.style.setProperty("top", l + "px"), e.style.setProperty("left", c + "px"), e.style.removeProperty("transform"), T.send({
+				let n = e.parentElement?.parentElement, r = b(), o = n ? Math.max(0, n.clientWidth / r - e.offsetWidth) : Infinity, s = n ? Math.max(0, n.clientHeight / r - e.offsetHeight) : Infinity, c = e.offsetLeft + i().x / r, l = e.offsetTop + i().y / r, u = Math.min(Math.max(c, 0), o), d = Math.min(Math.max(l, 0), s);
+				e.style.setProperty("top", d + "px"), e.style.setProperty("left", u + "px"), e.style.removeProperty("transform"), v.send({
 					type: "MOVE",
 					payload: {
 						id: `${t}`,
-						x: c,
-						y: l
+						x: u,
+						y: d
 					}
 				}), setTimeout(() => {
-					h({
+					a({
 						x: 0,
 						y: 0
 					});
@@ -793,94 +956,2022 @@ var ve = /*#__PURE__*/ u("<div class=\"relative h-full w-full overflow-auto roun
 			get children() {
 				return [
 					(() => {
-						var u = i(ve), f = u.firstChild, [m, h] = a(f.nextSibling), g = m.nextSibling, _ = g.firstChild, v = _.firstChild, [y, b] = a(v.nextSibling), S = y.nextSibling, [C, w] = a(S.nextSibling), D = C.nextSibling, [k, j] = a(D.nextSibling);
-						return u.addEventListener("scroll", M), d((t) => e = t, u), o(u, t(O, {}), m, h), g.$$mousedown = (t) => {
-							if (E() || t.button !== 0) return;
-							T.send("DESELECT"), c(!0);
-							let n = t.clientX, r = t.clientY, i = e.scrollLeft, a = e.scrollTop, o = (t) => {
-								let o = t.clientX - n, s = t.clientY - r;
-								e.scrollLeft = i - o * 3, e.scrollTop = a - s * 3, M();
-							}, s = () => {
-								window.removeEventListener("mousemove", o), window.removeEventListener("mouseup", s), setTimeout(() => c(!1), 200);
+						var i = u(gt), a = i.firstChild, [o, p] = d(a.nextSibling), m = o.nextSibling, g = m.firstChild, S = g.firstChild, [C, w] = d(S.nextSibling), E = C.nextSibling, [D, O] = d(E.nextSibling), k = D.nextSibling, [j, te] = d(k.nextSibling);
+						return i.addEventListener("scroll", T), x((e) => t = e, i), f(i, s(ae, {}), o, p), m.$$mousedown = (e) => {
+							if (y() || e.button !== 0) return;
+							v.send("DESELECT"), r(!0);
+							let n = e.clientX, i = e.clientY, a = t.scrollLeft, o = t.scrollTop, s = (e) => {
+								let r = e.clientX - n, s = e.clientY - i;
+								t.scrollLeft = a - r * 3, t.scrollTop = o - s * 3, T();
+							}, c = () => {
+								window.removeEventListener("mousemove", s), window.removeEventListener("mouseup", c), setTimeout(() => r(!1), 200);
 							};
-							window.addEventListener("mousemove", o), window.addEventListener("mouseup", s);
-						}, d(x, g), o(_, t(se, {}), y, b), o(_, t(fe, {}), C, w), o(_, t(p, {
+							window.addEventListener("mousemove", s), window.addEventListener("mouseup", c);
+						}, x(c, m), f(g, s(Je, {}), C, w), f(g, s(tt, {}), D, O), f(g, s(ee, {
 							get each() {
-								return P();
+								return A();
 							},
-							children: (e) => t(_e, { id: e })
-						}), k, j), r((e) => {
-							var t = !!n(), r = I(), i = F(), a = A();
-							return t !== e.e && g.classList.toggle("cursor-grabbing", e.e = t), r !== e.t && l(g, "height", e.t = r), i !== e.a && l(g, "width", e.a = i), a !== e.o && l(_, "scale", e.o = a), e;
+							children: (t) => s(dt, {
+								id: t,
+								get children() {
+									return e.component;
+								}
+							})
+						}), j, te), l((e) => {
+							var t = !!n(), r = N(), i = M(), a = b();
+							return t !== e.e && m.classList.toggle("cursor-grabbing", e.e = t), r !== e.t && _(m, "height", e.t = r), i !== e.a && _(m, "width", e.a = i), a !== e.o && _(g, "scale", e.o = a), e;
 						}, {
 							e: void 0,
 							t: void 0,
 							a: void 0,
 							o: void 0
-						}), s(), u;
+						}), h(), i;
 					})(),
+					s(ht, m(() => e.panels)),
 					(() => {
-						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;
+						var e = u(_t), t = e.firstChild, n = t.nextSibling, r = n.firstChild, [i, a] = d(r.nextSibling);
+						i.nextSibling;
+						var o = n.nextSibling, s = o.nextSibling.nextSibling;
 						return t.$$click = () => {
-							M(), T.send({
+							T(), v.send({
 								type: "ZOOM",
 								payload: -.1
 							});
 						}, n.$$click = () => {
-							M(), T.send("TOGGLE_ZOOM");
-						}, o(n, () => Math.round(A() * 100), c, l), u.$$click = () => {
-							M(), T.send({
+							T(), v.send("TOGGLE_ZOOM");
+						}, f(n, () => Math.round(b() * 100), i, a), o.$$click = () => {
+							T(), v.send({
 								type: "ZOOM",
 								payload: .1
 							});
-						}, d.$$click = () => T.send("ADD_PARENT"), s(), e;
+						}, s.$$click = () => v.send("ADD_PARENT"), h(), e;
 					})(),
-					t(m, {
+					s(C, {
 						get when() {
-							return !N();
+							return !D();
 						},
 						get children() {
-							return t(k, { children: "" });
+							return s(F, { children: "" });
 						}
 					})
 				];
 			}
-		})), f;
+		})), o;
 	})();
 };
-n(["mousedown", "click"]);
+c(["mousedown", "click"]);
 //#endregion
 //#region src/ui/components/FlowChart.tsx
-var Se = /*#__PURE__*/ u("<div class=\"relative h-full w-full\"><div class=\"relative h-full w-full bg-white bg-size-[30px_30px]\"style=\"background-image:radial-gradient(circle, #b8b8b8bf 1px, rgba(0, 0, 0, 0) 1px)\">"), Ce = (e) => {
-	let n = e.config?.nodes ?? ee, a = e.config?.edges, c = q(), u = f(c, { selector: (e) => !!e.context.newEdge });
-	return y(c.pause), b(() => {
-		c.resume(), c.send({
+var bt = /*#__PURE__*/ b("<div class=\"relative h-full w-full\"><div class=\"h-full w-full\">"), xt = (e) => {
+	let t = e.config?.nodes ?? Te, n = e.config?.edges, r = H(), i = S(r, { selector: (e) => !!e.context.newEdge });
+	return A(r.pause), j(() => {
+		r.resume(), r.send({
 			type: "CONFIGURE",
 			payload: {
-				nodes: n,
-				edges: a ?? []
+				nodes: t,
+				edges: n ?? [],
+				defaultData: e.defaultData
 			}
 		});
 	}), (() => {
-		var e = i(Se), n = e.firstChild;
-		return e.$$mousemove = ({ clientX: e, clientY: t }) => {
-			u() && c.send({
+		var t = u(bt), n = t.firstChild;
+		return t.$$mousemove = ({ clientX: e, clientY: t }) => {
+			i() && r.send({
 				type: "MOVE_NEW_EDGE",
 				payload: {
 					x: e,
 					y: t
 				}
 			});
-		}, e.$$mouseup = () => c.send("CLEAR_NEW_EDGE"), o(n, t(xe, {})), r((e) => l(n, "cursor", u() ? "inherit" : "crosshair")), s(), e;
+		}, t.$$mouseup = () => r.send("CLEAR_NEW_EDGE"), f(n, s(yt, {
+			get panels() {
+				return e.panels;
+			},
+			get component() {
+				return e.component;
+			}
+		})), l((e) => _(n, "cursor", i() ? "inherit" : "crosshair")), h(), t;
 	})();
 };
-n(["mouseup", "mousemove"]);
+c(["mouseup", "mousemove"]);
+//#endregion
+//#region ../../node_modules/clsx/dist/clsx.mjs
+function St(e) {
+	var t, n, r = "";
+	if (typeof e == "string" || typeof e == "number") r += e;
+	else if (typeof e == "object") {
+		if (Array.isArray(e)) {
+			var i = e.length;
+			for (t = 0; t < i; t++) e[t] && (n = St(e[t])) && (r && (r += " "), r += n);
+		} else for (n in e) e[n] && (r && (r += " "), r += n);
+	}
+	return r;
+}
+function Ct() {
+	for (var e, t, n = 0, r = "", i = arguments.length; n < i; n++) (e = arguments[n]) && (t = St(e)) && (r && (r += " "), r += t);
+	return r;
+}
+//#endregion
+//#region ../../node_modules/tailwind-merge/dist/bundle-mjs.mjs
+var wt = (e, t) => {
+	let n = Array(e.length + t.length);
+	for (let t = 0; t < e.length; t++) n[t] = e[t];
+	for (let r = 0; r < t.length; r++) n[e.length + r] = t[r];
+	return n;
+}, Tt = (e, t) => ({
+	classGroupId: e,
+	validator: t
+}), Et = (e = /* @__PURE__ */ new Map(), t = null, n) => ({
+	nextPart: e,
+	validators: t,
+	classGroupId: n
+}), Dt = "-", Ot = [], kt = "arbitrary..", At = (e) => {
+	let t = Nt(e), { conflictingClassGroups: n, conflictingClassGroupModifiers: r } = e;
+	return {
+		getClassGroupId: (e) => {
+			if (e.startsWith("[") && e.endsWith("]")) return Mt(e);
+			let n = e.split(Dt);
+			return jt(n, +(n[0] === "" && n.length > 1), t);
+		},
+		getConflictingClassGroupIds: (e, t) => {
+			if (t) {
+				let t = r[e], i = n[e];
+				return t ? i ? wt(i, t) : t : i || Ot;
+			}
+			return n[e] || Ot;
+		}
+	};
+}, jt = (e, t, n) => {
+	if (e.length - t === 0) return n.classGroupId;
+	let r = e[t], i = n.nextPart.get(r);
+	if (i) {
+		let n = jt(e, t + 1, i);
+		if (n) return n;
+	}
+	let a = n.validators;
+	if (a === null) return;
+	let o = t === 0 ? e.join(Dt) : e.slice(t).join(Dt), s = a.length;
+	for (let e = 0; e < s; e++) {
+		let t = a[e];
+		if (t.validator(o)) return t.classGroupId;
+	}
+}, Mt = (e) => e.slice(1, -1).indexOf(":") === -1 ? void 0 : (() => {
+	let t = e.slice(1, -1), n = t.indexOf(":"), r = t.slice(0, n);
+	return r ? kt + r : void 0;
+})(), Nt = (e) => {
+	let { theme: t, classGroups: n } = e;
+	return Pt(n, t);
+}, Pt = (e, t) => {
+	let n = Et();
+	for (let r in e) {
+		let i = e[r];
+		Ft(i, n, r, t);
+	}
+	return n;
+}, Ft = (e, t, n, r) => {
+	let i = e.length;
+	for (let a = 0; a < i; a++) {
+		let i = e[a];
+		It(i, t, n, r);
+	}
+}, It = (e, t, n, r) => {
+	if (typeof e == "string") {
+		Lt(e, t, n);
+		return;
+	}
+	if (typeof e == "function") {
+		Rt(e, t, n, r);
+		return;
+	}
+	zt(e, t, n, r);
+}, Lt = (e, t, n) => {
+	let r = e === "" ? t : Bt(t, e);
+	r.classGroupId = n;
+}, Rt = (e, t, n, r) => {
+	if (Vt(e)) {
+		Ft(e(r), t, n, r);
+		return;
+	}
+	t.validators === null && (t.validators = []), t.validators.push(Tt(n, e));
+}, zt = (e, t, n, r) => {
+	let i = Object.entries(e), a = i.length;
+	for (let e = 0; e < a; e++) {
+		let [a, o] = i[e];
+		Ft(o, Bt(t, a), n, r);
+	}
+}, Bt = (e, t) => {
+	let n = e, r = t.split(Dt), i = r.length;
+	for (let e = 0; e < i; e++) {
+		let t = r[e], i = n.nextPart.get(t);
+		i || (i = Et(), n.nextPart.set(t, i)), n = i;
+	}
+	return n;
+}, Vt = (e) => "isThemeGetter" in e && e.isThemeGetter === !0, Ht = (e) => {
+	if (e < 1) return {
+		get: () => void 0,
+		set: () => {}
+	};
+	let t = 0, n = Object.create(null), r = Object.create(null), i = (i, a) => {
+		n[i] = a, t++, t > e && (t = 0, r = n, n = Object.create(null));
+	};
+	return {
+		get(e) {
+			let t = n[e];
+			if (t !== void 0) return t;
+			if ((t = r[e]) !== void 0) return i(e, t), t;
+		},
+		set(e, t) {
+			e in n ? n[e] = t : i(e, t);
+		}
+	};
+}, Ut = "!", Wt = ":", Gt = [], Kt = (e, t, n, r, i) => ({
+	modifiers: e,
+	hasImportantModifier: t,
+	baseClassName: n,
+	maybePostfixModifierPosition: r,
+	isExternal: i
+}), qt = (e) => {
+	let { prefix: t, experimentalParseClassName: n } = e, r = (e) => {
+		let t = [], n = 0, r = 0, i = 0, a, o = e.length;
+		for (let s = 0; s < o; s++) {
+			let o = e[s];
+			if (n === 0 && r === 0) {
+				if (o === Wt) {
+					t.push(e.slice(i, s)), i = s + 1;
+					continue;
+				}
+				if (o === "/") {
+					a = s;
+					continue;
+				}
+			}
+			o === "[" ? n++ : o === "]" ? n-- : o === "(" ? r++ : o === ")" && r--;
+		}
+		let s = t.length === 0 ? e : e.slice(i), c = s, l = !1;
+		s.endsWith(Ut) ? (c = s.slice(0, -1), l = !0) : s.startsWith(Ut) && (c = s.slice(1), l = !0);
+		let u = a && a > i ? a - i : void 0;
+		return Kt(t, l, c, u);
+	};
+	if (t) {
+		let e = t + Wt, n = r;
+		r = (t) => t.startsWith(e) ? n(t.slice(e.length)) : Kt(Gt, !1, t, void 0, !0);
+	}
+	if (n) {
+		let e = r;
+		r = (t) => n({
+			className: t,
+			parseClassName: e
+		});
+	}
+	return r;
+}, Jt = (e) => {
+	let t = /* @__PURE__ */ new Map();
+	return e.orderSensitiveModifiers.forEach((e, n) => {
+		t.set(e, 1e6 + n);
+	}), (e) => {
+		let n = [], r = [];
+		for (let i = 0; i < e.length; i++) {
+			let a = e[i], o = a[0] === "[", s = t.has(a);
+			o || s ? (r.length > 0 && (r.sort(), n.push(...r), r = []), n.push(a)) : r.push(a);
+		}
+		return r.length > 0 && (r.sort(), n.push(...r)), n;
+	};
+}, Yt = (e) => ({
+	cache: Ht(e.cacheSize),
+	parseClassName: qt(e),
+	sortModifiers: Jt(e),
+	postfixLookupClassGroupIds: Xt(e),
+	...At(e)
+}), Xt = (e) => {
+	let t = Object.create(null), n = e.postfixLookupClassGroups;
+	if (n) for (let e = 0; e < n.length; e++) t[n[e]] = !0;
+	return t;
+}, Zt = /\s+/, Qt = (e, t) => {
+	let { parseClassName: n, getClassGroupId: r, getConflictingClassGroupIds: i, sortModifiers: a, postfixLookupClassGroupIds: o } = t, s = [], c = e.trim().split(Zt), l = "";
+	for (let e = c.length - 1; e >= 0; --e) {
+		let t = c[e], { isExternal: u, modifiers: d, hasImportantModifier: f, baseClassName: p, maybePostfixModifierPosition: m } = n(t);
+		if (u) {
+			l = t + (l.length > 0 ? " " + l : l);
+			continue;
+		}
+		let h = !!m, g;
+		if (h) {
+			g = r(p.substring(0, m));
+			let e = g && o[g] ? r(p) : void 0;
+			e && e !== g && (g = e, h = !1);
+		} else g = r(p);
+		if (!g) {
+			if (!h) {
+				l = t + (l.length > 0 ? " " + l : l);
+				continue;
+			}
+			if (g = r(p), !g) {
+				l = t + (l.length > 0 ? " " + l : l);
+				continue;
+			}
+			h = !1;
+		}
+		let _ = d.length === 0 ? "" : d.length === 1 ? d[0] : a(d).join(":"), v = f ? _ + Ut : _, y = v + g;
+		if (s.indexOf(y) > -1) continue;
+		s.push(y);
+		let b = i(g, h);
+		for (let e = 0; e < b.length; ++e) {
+			let t = b[e];
+			s.push(v + t);
+		}
+		l = t + (l.length > 0 ? " " + l : l);
+	}
+	return l;
+}, $t = (...e) => {
+	let t = 0, n, r, i = "";
+	for (; t < e.length;) (n = e[t++]) && (r = en(n)) && (i && (i += " "), i += r);
+	return i;
+}, en = (e) => {
+	if (typeof e == "string") return e;
+	let t, n = "";
+	for (let r = 0; r < e.length; r++) e[r] && (t = en(e[r])) && (n && (n += " "), n += t);
+	return n;
+}, tn = (e, ...t) => {
+	let n, r, i, a, o = (o) => (n = Yt(t.reduce((e, t) => t(e), e())), r = n.cache.get, i = n.cache.set, a = s, s(o)), s = (e) => {
+		let t = r(e);
+		if (t) return t;
+		let a = Qt(e, n);
+		return i(e, a), a;
+	};
+	return a = o, (...e) => a($t(...e));
+}, nn = [], W = (e) => {
+	let t = (t) => t[e] || nn;
+	return t.isThemeGetter = !0, t;
+}, rn = /^\[(?:(\w[\w-]*):)?(.+)\]$/i, an = /^\((?:(\w[\w-]*):)?(.+)\)$/i, on = /^\d+(?:\.\d+)?\/\d+(?:\.\d+)?$/, sn = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, cn = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/, ln = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/, un = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, dn = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, G = (e) => on.test(e), K = (e) => !!e && !Number.isNaN(Number(e)), q = (e) => !!e && Number.isInteger(Number(e)), fn = (e) => e.endsWith("%") && K(e.slice(0, -1)), J = (e) => sn.test(e), pn = () => !0, mn = (e) => cn.test(e) && !ln.test(e), hn = () => !1, gn = (e) => un.test(e), _n = (e) => dn.test(e), vn = (e) => !Y(e) && !Z(e), yn = (e) => e.startsWith("@container") && (e[10] === "/" && e[11] !== void 0 || e[11] === "s" && e[16] !== void 0 && e.startsWith("-size/", 10) || e[11] === "n" && e[18] !== void 0 && e.startsWith("-normal/", 10)), bn = (e) => Q(e, In, hn), Y = (e) => rn.test(e), X = (e) => Q(e, Ln, mn), xn = (e) => Q(e, Rn, K), Sn = (e) => Q(e, Bn, pn), Cn = (e) => Q(e, zn, hn), wn = (e) => Q(e, Pn, hn), Tn = (e) => Q(e, Fn, _n), En = (e) => Q(e, Vn, gn), Z = (e) => an.test(e), Dn = (e) => $(e, Ln), On = (e) => $(e, zn), kn = (e) => $(e, Pn), An = (e) => $(e, In), jn = (e) => $(e, Fn), Mn = (e) => $(e, Vn, !0), Nn = (e) => $(e, Bn, !0), Q = (e, t, n) => {
+	let r = rn.exec(e);
+	return r ? r[1] ? t(r[1]) : n(r[2]) : !1;
+}, $ = (e, t, n = !1) => {
+	let r = an.exec(e);
+	return r ? r[1] ? t(r[1]) : n : !1;
+}, Pn = (e) => e === "position" || e === "percentage", Fn = (e) => e === "image" || e === "url", In = (e) => e === "length" || e === "size" || e === "bg-size", Ln = (e) => e === "length", Rn = (e) => e === "number", zn = (e) => e === "family-name", Bn = (e) => e === "number" || e === "weight", Vn = (e) => e === "shadow", Hn = /*#__PURE__*/ tn(() => {
+	let e = W("color"), t = W("font"), n = W("text"), r = W("font-weight"), i = W("tracking"), a = W("leading"), o = W("breakpoint"), s = W("container"), c = W("spacing"), l = W("radius"), u = W("shadow"), d = W("inset-shadow"), f = W("text-shadow"), p = W("drop-shadow"), m = W("blur"), h = W("perspective"), g = W("aspect"), _ = W("ease"), v = W("animate"), y = () => [
+		"auto",
+		"avoid",
+		"all",
+		"avoid-page",
+		"page",
+		"left",
+		"right",
+		"column"
+	], b = () => [
+		"center",
+		"top",
+		"bottom",
+		"left",
+		"right",
+		"top-left",
+		"left-top",
+		"top-right",
+		"right-top",
+		"bottom-right",
+		"right-bottom",
+		"bottom-left",
+		"left-bottom"
+	], x = () => [
+		...b(),
+		Z,
+		Y
+	], S = () => [
+		"auto",
+		"hidden",
+		"clip",
+		"visible",
+		"scroll"
+	], ee = () => [
+		"auto",
+		"contain",
+		"none"
+	], C = () => [
+		Z,
+		Y,
+		c
+	], w = () => [
+		G,
+		"full",
+		"auto",
+		...C()
+	], T = () => [
+		q,
+		"none",
+		"subgrid",
+		Z,
+		Y
+	], E = () => [
+		"auto",
+		{ span: [
+			"full",
+			q,
+			Z,
+			Y
+		] },
+		q,
+		Z,
+		Y
+	], D = () => [
+		q,
+		"auto",
+		Z,
+		Y
+	], O = () => [
+		"auto",
+		"min",
+		"max",
+		"fr",
+		Z,
+		Y
+	], k = () => [
+		"start",
+		"end",
+		"center",
+		"between",
+		"around",
+		"evenly",
+		"stretch",
+		"baseline",
+		"center-safe",
+		"end-safe"
+	], A = () => [
+		"start",
+		"end",
+		"center",
+		"stretch",
+		"center-safe",
+		"end-safe"
+	], j = () => ["auto", ...C()], M = () => [
+		G,
+		"auto",
+		"full",
+		"dvw",
+		"dvh",
+		"lvw",
+		"lvh",
+		"svw",
+		"svh",
+		"min",
+		"max",
+		"fit",
+		...C()
+	], N = () => [
+		G,
+		"screen",
+		"full",
+		"dvw",
+		"lvw",
+		"svw",
+		"min",
+		"max",
+		"fit",
+		...C()
+	], te = () => [
+		G,
+		"screen",
+		"full",
+		"lh",
+		"dvh",
+		"lvh",
+		"svh",
+		"min",
+		"max",
+		"fit",
+		...C()
+	], P = () => [
+		e,
+		Z,
+		Y
+	], ne = () => [
+		...b(),
+		kn,
+		wn,
+		{ position: [Z, Y] }
+	], re = () => ["no-repeat", { repeat: [
+		"",
+		"x",
+		"y",
+		"space",
+		"round"
+	] }], ie = () => [
+		"auto",
+		"cover",
+		"contain",
+		An,
+		bn,
+		{ size: [Z, Y] }
+	], ae = () => [
+		fn,
+		Dn,
+		X
+	], F = () => [
+		"",
+		"none",
+		"full",
+		l,
+		Z,
+		Y
+	], I = () => [
+		"",
+		K,
+		Dn,
+		X
+	], oe = () => [
+		"solid",
+		"dashed",
+		"dotted",
+		"double"
+	], se = () => [
+		"normal",
+		"multiply",
+		"screen",
+		"overlay",
+		"darken",
+		"lighten",
+		"color-dodge",
+		"color-burn",
+		"hard-light",
+		"soft-light",
+		"difference",
+		"exclusion",
+		"hue",
+		"saturation",
+		"color",
+		"luminosity"
+	], L = () => [
+		K,
+		fn,
+		kn,
+		wn
+	], ce = () => [
+		"",
+		"none",
+		m,
+		Z,
+		Y
+	], le = () => [
+		"none",
+		K,
+		Z,
+		Y
+	], R = () => [
+		"none",
+		K,
+		Z,
+		Y
+	], ue = () => [
+		K,
+		Z,
+		Y
+	], de = () => [
+		G,
+		"full",
+		...C()
+	];
+	return {
+		cacheSize: 500,
+		theme: {
+			animate: [
+				"spin",
+				"ping",
+				"pulse",
+				"bounce"
+			],
+			aspect: ["video"],
+			blur: [J],
+			breakpoint: [J],
+			color: [pn],
+			container: [J],
+			"drop-shadow": [J],
+			ease: [
+				"in",
+				"out",
+				"in-out"
+			],
+			font: [vn],
+			"font-weight": [
+				"thin",
+				"extralight",
+				"light",
+				"normal",
+				"medium",
+				"semibold",
+				"bold",
+				"extrabold",
+				"black"
+			],
+			"inset-shadow": [J],
+			leading: [
+				"none",
+				"tight",
+				"snug",
+				"normal",
+				"relaxed",
+				"loose"
+			],
+			perspective: [
+				"dramatic",
+				"near",
+				"normal",
+				"midrange",
+				"distant",
+				"none"
+			],
+			radius: [J],
+			shadow: [J],
+			spacing: ["px", K],
+			text: [J],
+			"text-shadow": [J],
+			tracking: [
+				"tighter",
+				"tight",
+				"normal",
+				"wide",
+				"wider",
+				"widest"
+			]
+		},
+		classGroups: {
+			aspect: [{ aspect: [
+				"auto",
+				"square",
+				G,
+				Y,
+				Z,
+				g
+			] }],
+			container: ["container"],
+			"container-type": [{ "@container": [
+				"",
+				"normal",
+				"size",
+				Z,
+				Y
+			] }],
+			"container-named": [yn],
+			columns: [{ columns: [
+				K,
+				Y,
+				Z,
+				s
+			] }],
+			"break-after": [{ "break-after": y() }],
+			"break-before": [{ "break-before": y() }],
+			"break-inside": [{ "break-inside": [
+				"auto",
+				"avoid",
+				"avoid-page",
+				"avoid-column"
+			] }],
+			"box-decoration": [{ "box-decoration": ["slice", "clone"] }],
+			box: [{ box: ["border", "content"] }],
+			display: [
+				"block",
+				"inline-block",
+				"inline",
+				"flex",
+				"inline-flex",
+				"table",
+				"inline-table",
+				"table-caption",
+				"table-cell",
+				"table-column",
+				"table-column-group",
+				"table-footer-group",
+				"table-header-group",
+				"table-row-group",
+				"table-row",
+				"flow-root",
+				"grid",
+				"inline-grid",
+				"contents",
+				"list-item",
+				"hidden"
+			],
+			sr: ["sr-only", "not-sr-only"],
+			float: [{ float: [
+				"right",
+				"left",
+				"none",
+				"start",
+				"end"
+			] }],
+			clear: [{ clear: [
+				"left",
+				"right",
+				"both",
+				"none",
+				"start",
+				"end"
+			] }],
+			isolation: ["isolate", "isolation-auto"],
+			"object-fit": [{ object: [
+				"contain",
+				"cover",
+				"fill",
+				"none",
+				"scale-down"
+			] }],
+			"object-position": [{ object: x() }],
+			overflow: [{ overflow: S() }],
+			"overflow-x": [{ "overflow-x": S() }],
+			"overflow-y": [{ "overflow-y": S() }],
+			overscroll: [{ overscroll: ee() }],
+			"overscroll-x": [{ "overscroll-x": ee() }],
+			"overscroll-y": [{ "overscroll-y": ee() }],
+			position: [
+				"static",
+				"fixed",
+				"absolute",
+				"relative",
+				"sticky"
+			],
+			inset: [{ inset: w() }],
+			"inset-x": [{ "inset-x": w() }],
+			"inset-y": [{ "inset-y": w() }],
+			start: [{
+				"inset-s": w(),
+				start: w()
+			}],
+			end: [{
+				"inset-e": w(),
+				end: w()
+			}],
+			"inset-bs": [{ "inset-bs": w() }],
+			"inset-be": [{ "inset-be": w() }],
+			top: [{ top: w() }],
+			right: [{ right: w() }],
+			bottom: [{ bottom: w() }],
+			left: [{ left: w() }],
+			visibility: [
+				"visible",
+				"invisible",
+				"collapse"
+			],
+			z: [{ z: [
+				q,
+				"auto",
+				Z,
+				Y
+			] }],
+			basis: [{ basis: [
+				G,
+				"full",
+				"auto",
+				s,
+				...C()
+			] }],
+			"flex-direction": [{ flex: [
+				"row",
+				"row-reverse",
+				"col",
+				"col-reverse"
+			] }],
+			"flex-wrap": [{ flex: [
+				"nowrap",
+				"wrap",
+				"wrap-reverse"
+			] }],
+			flex: [{ flex: [
+				K,
+				G,
+				"auto",
+				"initial",
+				"none",
+				Y
+			] }],
+			grow: [{ grow: [
+				"",
+				K,
+				Z,
+				Y
+			] }],
+			shrink: [{ shrink: [
+				"",
+				K,
+				Z,
+				Y
+			] }],
+			order: [{ order: [
+				q,
+				"first",
+				"last",
+				"none",
+				Z,
+				Y
+			] }],
+			"grid-cols": [{ "grid-cols": T() }],
+			"col-start-end": [{ col: E() }],
+			"col-start": [{ "col-start": D() }],
+			"col-end": [{ "col-end": D() }],
+			"grid-rows": [{ "grid-rows": T() }],
+			"row-start-end": [{ row: E() }],
+			"row-start": [{ "row-start": D() }],
+			"row-end": [{ "row-end": D() }],
+			"grid-flow": [{ "grid-flow": [
+				"row",
+				"col",
+				"dense",
+				"row-dense",
+				"col-dense"
+			] }],
+			"auto-cols": [{ "auto-cols": O() }],
+			"auto-rows": [{ "auto-rows": O() }],
+			gap: [{ gap: C() }],
+			"gap-x": [{ "gap-x": C() }],
+			"gap-y": [{ "gap-y": C() }],
+			"justify-content": [{ justify: [...k(), "normal"] }],
+			"justify-items": [{ "justify-items": [...A(), "normal"] }],
+			"justify-self": [{ "justify-self": ["auto", ...A()] }],
+			"align-content": [{ content: ["normal", ...k()] }],
+			"align-items": [{ items: [...A(), { baseline: ["", "last"] }] }],
+			"align-self": [{ self: [
+				"auto",
+				...A(),
+				{ baseline: ["", "last"] }
+			] }],
+			"place-content": [{ "place-content": k() }],
+			"place-items": [{ "place-items": [...A(), "baseline"] }],
+			"place-self": [{ "place-self": ["auto", ...A()] }],
+			p: [{ p: C() }],
+			px: [{ px: C() }],
+			py: [{ py: C() }],
+			ps: [{ ps: C() }],
+			pe: [{ pe: C() }],
+			pbs: [{ pbs: C() }],
+			pbe: [{ pbe: C() }],
+			pt: [{ pt: C() }],
+			pr: [{ pr: C() }],
+			pb: [{ pb: C() }],
+			pl: [{ pl: C() }],
+			m: [{ m: j() }],
+			mx: [{ mx: j() }],
+			my: [{ my: j() }],
+			ms: [{ ms: j() }],
+			me: [{ me: j() }],
+			mbs: [{ mbs: j() }],
+			mbe: [{ mbe: j() }],
+			mt: [{ mt: j() }],
+			mr: [{ mr: j() }],
+			mb: [{ mb: j() }],
+			ml: [{ ml: j() }],
+			"space-x": [{ "space-x": C() }],
+			"space-x-reverse": ["space-x-reverse"],
+			"space-y": [{ "space-y": C() }],
+			"space-y-reverse": ["space-y-reverse"],
+			size: [{ size: M() }],
+			"inline-size": [{ inline: ["auto", ...N()] }],
+			"min-inline-size": [{ "min-inline": ["auto", ...N()] }],
+			"max-inline-size": [{ "max-inline": ["none", ...N()] }],
+			"block-size": [{ block: ["auto", ...te()] }],
+			"min-block-size": [{ "min-block": ["auto", ...te()] }],
+			"max-block-size": [{ "max-block": ["none", ...te()] }],
+			w: [{ w: [
+				s,
+				"screen",
+				...M()
+			] }],
+			"min-w": [{ "min-w": [
+				s,
+				"screen",
+				"none",
+				...M()
+			] }],
+			"max-w": [{ "max-w": [
+				s,
+				"screen",
+				"none",
+				"prose",
+				{ screen: [o] },
+				...M()
+			] }],
+			h: [{ h: [
+				"screen",
+				"lh",
+				...M()
+			] }],
+			"min-h": [{ "min-h": [
+				"screen",
+				"lh",
+				"none",
+				...M()
+			] }],
+			"max-h": [{ "max-h": [
+				"screen",
+				"lh",
+				...M()
+			] }],
+			"font-size": [{ text: [
+				"base",
+				n,
+				Dn,
+				X
+			] }],
+			"font-smoothing": ["antialiased", "subpixel-antialiased"],
+			"font-style": ["italic", "not-italic"],
+			"font-weight": [{ font: [
+				r,
+				Nn,
+				Sn
+			] }],
+			"font-stretch": [{ "font-stretch": [
+				"ultra-condensed",
+				"extra-condensed",
+				"condensed",
+				"semi-condensed",
+				"normal",
+				"semi-expanded",
+				"expanded",
+				"extra-expanded",
+				"ultra-expanded",
+				fn,
+				Y
+			] }],
+			"font-family": [{ font: [
+				On,
+				Cn,
+				t
+			] }],
+			"font-features": [{ "font-features": [Y] }],
+			"fvn-normal": ["normal-nums"],
+			"fvn-ordinal": ["ordinal"],
+			"fvn-slashed-zero": ["slashed-zero"],
+			"fvn-figure": ["lining-nums", "oldstyle-nums"],
+			"fvn-spacing": ["proportional-nums", "tabular-nums"],
+			"fvn-fraction": ["diagonal-fractions", "stacked-fractions"],
+			tracking: [{ tracking: [
+				i,
+				Z,
+				Y
+			] }],
+			"line-clamp": [{ "line-clamp": [
+				K,
+				"none",
+				Z,
+				xn
+			] }],
+			leading: [{ leading: [a, ...C()] }],
+			"list-image": [{ "list-image": [
+				"none",
+				Z,
+				Y
+			] }],
+			"list-style-position": [{ list: ["inside", "outside"] }],
+			"list-style-type": [{ list: [
+				"disc",
+				"decimal",
+				"none",
+				Z,
+				Y
+			] }],
+			"text-alignment": [{ text: [
+				"left",
+				"center",
+				"right",
+				"justify",
+				"start",
+				"end"
+			] }],
+			"placeholder-color": [{ placeholder: P() }],
+			"text-color": [{ text: P() }],
+			"text-decoration": [
+				"underline",
+				"overline",
+				"line-through",
+				"no-underline"
+			],
+			"text-decoration-style": [{ decoration: [...oe(), "wavy"] }],
+			"text-decoration-thickness": [{ decoration: [
+				K,
+				"from-font",
+				"auto",
+				Z,
+				X
+			] }],
+			"text-decoration-color": [{ decoration: P() }],
+			"underline-offset": [{ "underline-offset": [
+				K,
+				"auto",
+				Z,
+				Y
+			] }],
+			"text-transform": [
+				"uppercase",
+				"lowercase",
+				"capitalize",
+				"normal-case"
+			],
+			"text-overflow": [
+				"truncate",
+				"text-ellipsis",
+				"text-clip"
+			],
+			"text-wrap": [{ text: [
+				"wrap",
+				"nowrap",
+				"balance",
+				"pretty"
+			] }],
+			indent: [{ indent: C() }],
+			"tab-size": [{ tab: [
+				q,
+				Z,
+				Y
+			] }],
+			"vertical-align": [{ align: [
+				"baseline",
+				"top",
+				"middle",
+				"bottom",
+				"text-top",
+				"text-bottom",
+				"sub",
+				"super",
+				Z,
+				Y
+			] }],
+			whitespace: [{ whitespace: [
+				"normal",
+				"nowrap",
+				"pre",
+				"pre-line",
+				"pre-wrap",
+				"break-spaces"
+			] }],
+			break: [{ break: [
+				"normal",
+				"words",
+				"all",
+				"keep"
+			] }],
+			wrap: [{ wrap: [
+				"break-word",
+				"anywhere",
+				"normal"
+			] }],
+			hyphens: [{ hyphens: [
+				"none",
+				"manual",
+				"auto"
+			] }],
+			content: [{ content: [
+				"none",
+				Z,
+				Y
+			] }],
+			"bg-attachment": [{ bg: [
+				"fixed",
+				"local",
+				"scroll"
+			] }],
+			"bg-clip": [{ "bg-clip": [
+				"border",
+				"padding",
+				"content",
+				"text"
+			] }],
+			"bg-origin": [{ "bg-origin": [
+				"border",
+				"padding",
+				"content"
+			] }],
+			"bg-position": [{ bg: ne() }],
+			"bg-repeat": [{ bg: re() }],
+			"bg-size": [{ bg: ie() }],
+			"bg-image": [{ bg: [
+				"none",
+				{
+					linear: [
+						{ to: [
+							"t",
+							"tr",
+							"r",
+							"br",
+							"b",
+							"bl",
+							"l",
+							"tl"
+						] },
+						q,
+						Z,
+						Y
+					],
+					radial: [
+						"",
+						Z,
+						Y
+					],
+					conic: [
+						q,
+						Z,
+						Y
+					]
+				},
+				jn,
+				Tn
+			] }],
+			"bg-color": [{ bg: P() }],
+			"gradient-from-pos": [{ from: ae() }],
+			"gradient-via-pos": [{ via: ae() }],
+			"gradient-to-pos": [{ to: ae() }],
+			"gradient-from": [{ from: P() }],
+			"gradient-via": [{ via: P() }],
+			"gradient-to": [{ to: P() }],
+			rounded: [{ rounded: F() }],
+			"rounded-s": [{ "rounded-s": F() }],
+			"rounded-e": [{ "rounded-e": F() }],
+			"rounded-t": [{ "rounded-t": F() }],
+			"rounded-r": [{ "rounded-r": F() }],
+			"rounded-b": [{ "rounded-b": F() }],
+			"rounded-l": [{ "rounded-l": F() }],
+			"rounded-ss": [{ "rounded-ss": F() }],
+			"rounded-se": [{ "rounded-se": F() }],
+			"rounded-ee": [{ "rounded-ee": F() }],
+			"rounded-es": [{ "rounded-es": F() }],
+			"rounded-tl": [{ "rounded-tl": F() }],
+			"rounded-tr": [{ "rounded-tr": F() }],
+			"rounded-br": [{ "rounded-br": F() }],
+			"rounded-bl": [{ "rounded-bl": F() }],
+			"border-w": [{ border: I() }],
+			"border-w-x": [{ "border-x": I() }],
+			"border-w-y": [{ "border-y": I() }],
+			"border-w-s": [{ "border-s": I() }],
+			"border-w-e": [{ "border-e": I() }],
+			"border-w-bs": [{ "border-bs": I() }],
+			"border-w-be": [{ "border-be": I() }],
+			"border-w-t": [{ "border-t": I() }],
+			"border-w-r": [{ "border-r": I() }],
+			"border-w-b": [{ "border-b": I() }],
+			"border-w-l": [{ "border-l": I() }],
+			"divide-x": [{ "divide-x": I() }],
+			"divide-x-reverse": ["divide-x-reverse"],
+			"divide-y": [{ "divide-y": I() }],
+			"divide-y-reverse": ["divide-y-reverse"],
+			"border-style": [{ border: [
+				...oe(),
+				"hidden",
+				"none"
+			] }],
+			"divide-style": [{ divide: [
+				...oe(),
+				"hidden",
+				"none"
+			] }],
+			"border-color": [{ border: P() }],
+			"border-color-x": [{ "border-x": P() }],
+			"border-color-y": [{ "border-y": P() }],
+			"border-color-s": [{ "border-s": P() }],
+			"border-color-e": [{ "border-e": P() }],
+			"border-color-bs": [{ "border-bs": P() }],
+			"border-color-be": [{ "border-be": P() }],
+			"border-color-t": [{ "border-t": P() }],
+			"border-color-r": [{ "border-r": P() }],
+			"border-color-b": [{ "border-b": P() }],
+			"border-color-l": [{ "border-l": P() }],
+			"divide-color": [{ divide: P() }],
+			"outline-style": [{ outline: [
+				...oe(),
+				"none",
+				"hidden"
+			] }],
+			"outline-offset": [{ "outline-offset": [
+				K,
+				Z,
+				Y
+			] }],
+			"outline-w": [{ outline: [
+				"",
+				K,
+				Dn,
+				X
+			] }],
+			"outline-color": [{ outline: P() }],
+			shadow: [{ shadow: [
+				"",
+				"none",
+				u,
+				Mn,
+				En
+			] }],
+			"shadow-color": [{ shadow: P() }],
+			"inset-shadow": [{ "inset-shadow": [
+				"none",
+				d,
+				Mn,
+				En
+			] }],
+			"inset-shadow-color": [{ "inset-shadow": P() }],
+			"ring-w": [{ ring: I() }],
+			"ring-w-inset": ["ring-inset"],
+			"ring-color": [{ ring: P() }],
+			"ring-offset-w": [{ "ring-offset": [K, X] }],
+			"ring-offset-color": [{ "ring-offset": P() }],
+			"inset-ring-w": [{ "inset-ring": I() }],
+			"inset-ring-color": [{ "inset-ring": P() }],
+			"text-shadow": [{ "text-shadow": [
+				"none",
+				f,
+				Mn,
+				En
+			] }],
+			"text-shadow-color": [{ "text-shadow": P() }],
+			opacity: [{ opacity: [
+				K,
+				Z,
+				Y
+			] }],
+			"mix-blend": [{ "mix-blend": [
+				...se(),
+				"plus-darker",
+				"plus-lighter"
+			] }],
+			"bg-blend": [{ "bg-blend": se() }],
+			"mask-clip": [{ "mask-clip": [
+				"border",
+				"padding",
+				"content",
+				"fill",
+				"stroke",
+				"view"
+			] }, "mask-no-clip"],
+			"mask-composite": [{ mask: [
+				"add",
+				"subtract",
+				"intersect",
+				"exclude"
+			] }],
+			"mask-image-linear-pos": [{ "mask-linear": [K] }],
+			"mask-image-linear-from-pos": [{ "mask-linear-from": L() }],
+			"mask-image-linear-to-pos": [{ "mask-linear-to": L() }],
+			"mask-image-linear-from-color": [{ "mask-linear-from": P() }],
+			"mask-image-linear-to-color": [{ "mask-linear-to": P() }],
+			"mask-image-t-from-pos": [{ "mask-t-from": L() }],
+			"mask-image-t-to-pos": [{ "mask-t-to": L() }],
+			"mask-image-t-from-color": [{ "mask-t-from": P() }],
+			"mask-image-t-to-color": [{ "mask-t-to": P() }],
+			"mask-image-r-from-pos": [{ "mask-r-from": L() }],
+			"mask-image-r-to-pos": [{ "mask-r-to": L() }],
+			"mask-image-r-from-color": [{ "mask-r-from": P() }],
+			"mask-image-r-to-color": [{ "mask-r-to": P() }],
+			"mask-image-b-from-pos": [{ "mask-b-from": L() }],
+			"mask-image-b-to-pos": [{ "mask-b-to": L() }],
+			"mask-image-b-from-color": [{ "mask-b-from": P() }],
+			"mask-image-b-to-color": [{ "mask-b-to": P() }],
+			"mask-image-l-from-pos": [{ "mask-l-from": L() }],
+			"mask-image-l-to-pos": [{ "mask-l-to": L() }],
+			"mask-image-l-from-color": [{ "mask-l-from": P() }],
+			"mask-image-l-to-color": [{ "mask-l-to": P() }],
+			"mask-image-x-from-pos": [{ "mask-x-from": L() }],
+			"mask-image-x-to-pos": [{ "mask-x-to": L() }],
+			"mask-image-x-from-color": [{ "mask-x-from": P() }],
+			"mask-image-x-to-color": [{ "mask-x-to": P() }],
+			"mask-image-y-from-pos": [{ "mask-y-from": L() }],
+			"mask-image-y-to-pos": [{ "mask-y-to": L() }],
+			"mask-image-y-from-color": [{ "mask-y-from": P() }],
+			"mask-image-y-to-color": [{ "mask-y-to": P() }],
+			"mask-image-radial": [{ "mask-radial": [Z, Y] }],
+			"mask-image-radial-from-pos": [{ "mask-radial-from": L() }],
+			"mask-image-radial-to-pos": [{ "mask-radial-to": L() }],
+			"mask-image-radial-from-color": [{ "mask-radial-from": P() }],
+			"mask-image-radial-to-color": [{ "mask-radial-to": P() }],
+			"mask-image-radial-shape": [{ "mask-radial": ["circle", "ellipse"] }],
+			"mask-image-radial-size": [{ "mask-radial": [{
+				closest: ["side", "corner"],
+				farthest: ["side", "corner"]
+			}] }],
+			"mask-image-radial-pos": [{ "mask-radial-at": b() }],
+			"mask-image-conic-pos": [{ "mask-conic": [K] }],
+			"mask-image-conic-from-pos": [{ "mask-conic-from": L() }],
+			"mask-image-conic-to-pos": [{ "mask-conic-to": L() }],
+			"mask-image-conic-from-color": [{ "mask-conic-from": P() }],
+			"mask-image-conic-to-color": [{ "mask-conic-to": P() }],
+			"mask-mode": [{ mask: [
+				"alpha",
+				"luminance",
+				"match"
+			] }],
+			"mask-origin": [{ "mask-origin": [
+				"border",
+				"padding",
+				"content",
+				"fill",
+				"stroke",
+				"view"
+			] }],
+			"mask-position": [{ mask: ne() }],
+			"mask-repeat": [{ mask: re() }],
+			"mask-size": [{ mask: ie() }],
+			"mask-type": [{ "mask-type": ["alpha", "luminance"] }],
+			"mask-image": [{ mask: [
+				"none",
+				Z,
+				Y
+			] }],
+			filter: [{ filter: [
+				"",
+				"none",
+				Z,
+				Y
+			] }],
+			blur: [{ blur: ce() }],
+			brightness: [{ brightness: [
+				K,
+				Z,
+				Y
+			] }],
+			contrast: [{ contrast: [
+				K,
+				Z,
+				Y
+			] }],
+			"drop-shadow": [{ "drop-shadow": [
+				"",
+				"none",
+				p,
+				Mn,
+				En
+			] }],
+			"drop-shadow-color": [{ "drop-shadow": P() }],
+			grayscale: [{ grayscale: [
+				"",
+				K,
+				Z,
+				Y
+			] }],
+			"hue-rotate": [{ "hue-rotate": [
+				K,
+				Z,
+				Y
+			] }],
+			invert: [{ invert: [
+				"",
+				K,
+				Z,
+				Y
+			] }],
+			saturate: [{ saturate: [
+				K,
+				Z,
+				Y
+			] }],
+			sepia: [{ sepia: [
+				"",
+				K,
+				Z,
+				Y
+			] }],
+			"backdrop-filter": [{ "backdrop-filter": [
+				"",
+				"none",
+				Z,
+				Y
+			] }],
+			"backdrop-blur": [{ "backdrop-blur": ce() }],
+			"backdrop-brightness": [{ "backdrop-brightness": [
+				K,
+				Z,
+				Y
+			] }],
+			"backdrop-contrast": [{ "backdrop-contrast": [
+				K,
+				Z,
+				Y
+			] }],
+			"backdrop-grayscale": [{ "backdrop-grayscale": [
+				"",
+				K,
+				Z,
+				Y
+			] }],
+			"backdrop-hue-rotate": [{ "backdrop-hue-rotate": [
+				K,
+				Z,
+				Y
+			] }],
+			"backdrop-invert": [{ "backdrop-invert": [
+				"",
+				K,
+				Z,
+				Y
+			] }],
+			"backdrop-opacity": [{ "backdrop-opacity": [
+				K,
+				Z,
+				Y
+			] }],
+			"backdrop-saturate": [{ "backdrop-saturate": [
+				K,
+				Z,
+				Y
+			] }],
+			"backdrop-sepia": [{ "backdrop-sepia": [
+				"",
+				K,
+				Z,
+				Y
+			] }],
+			"border-collapse": [{ border: ["collapse", "separate"] }],
+			"border-spacing": [{ "border-spacing": C() }],
+			"border-spacing-x": [{ "border-spacing-x": C() }],
+			"border-spacing-y": [{ "border-spacing-y": C() }],
+			"table-layout": [{ table: ["auto", "fixed"] }],
+			caption: [{ caption: ["top", "bottom"] }],
+			transition: [{ transition: [
+				"",
+				"all",
+				"colors",
+				"opacity",
+				"shadow",
+				"transform",
+				"none",
+				Z,
+				Y
+			] }],
+			"transition-behavior": [{ transition: ["normal", "discrete"] }],
+			duration: [{ duration: [
+				K,
+				"initial",
+				Z,
+				Y
+			] }],
+			ease: [{ ease: [
+				"linear",
+				"initial",
+				_,
+				Z,
+				Y
+			] }],
+			delay: [{ delay: [
+				K,
+				Z,
+				Y
+			] }],
+			animate: [{ animate: [
+				"none",
+				v,
+				Z,
+				Y
+			] }],
+			backface: [{ backface: ["hidden", "visible"] }],
+			perspective: [{ perspective: [
+				h,
+				Z,
+				Y
+			] }],
+			"perspective-origin": [{ "perspective-origin": x() }],
+			rotate: [{ rotate: le() }],
+			"rotate-x": [{ "rotate-x": le() }],
+			"rotate-y": [{ "rotate-y": le() }],
+			"rotate-z": [{ "rotate-z": le() }],
+			scale: [{ scale: R() }],
+			"scale-x": [{ "scale-x": R() }],
+			"scale-y": [{ "scale-y": R() }],
+			"scale-z": [{ "scale-z": R() }],
+			"scale-3d": ["scale-3d"],
+			skew: [{ skew: ue() }],
+			"skew-x": [{ "skew-x": ue() }],
+			"skew-y": [{ "skew-y": ue() }],
+			transform: [{ transform: [
+				Z,
+				Y,
+				"",
+				"none",
+				"gpu",
+				"cpu"
+			] }],
+			"transform-origin": [{ origin: x() }],
+			"transform-style": [{ transform: ["3d", "flat"] }],
+			translate: [{ translate: de() }],
+			"translate-x": [{ "translate-x": de() }],
+			"translate-y": [{ "translate-y": de() }],
+			"translate-z": [{ "translate-z": de() }],
+			"translate-none": ["translate-none"],
+			zoom: [{ zoom: [
+				q,
+				Z,
+				Y
+			] }],
+			accent: [{ accent: P() }],
+			appearance: [{ appearance: ["none", "auto"] }],
+			"caret-color": [{ caret: P() }],
+			"color-scheme": [{ scheme: [
+				"normal",
+				"dark",
+				"light",
+				"light-dark",
+				"only-dark",
+				"only-light"
+			] }],
+			cursor: [{ cursor: [
+				"auto",
+				"default",
+				"pointer",
+				"wait",
+				"text",
+				"move",
+				"help",
+				"not-allowed",
+				"none",
+				"context-menu",
+				"progress",
+				"cell",
+				"crosshair",
+				"vertical-text",
+				"alias",
+				"copy",
+				"no-drop",
+				"grab",
+				"grabbing",
+				"all-scroll",
+				"col-resize",
+				"row-resize",
+				"n-resize",
+				"e-resize",
+				"s-resize",
+				"w-resize",
+				"ne-resize",
+				"nw-resize",
+				"se-resize",
+				"sw-resize",
+				"ew-resize",
+				"ns-resize",
+				"nesw-resize",
+				"nwse-resize",
+				"zoom-in",
+				"zoom-out",
+				Z,
+				Y
+			] }],
+			"field-sizing": [{ "field-sizing": ["fixed", "content"] }],
+			"pointer-events": [{ "pointer-events": ["auto", "none"] }],
+			resize: [{ resize: [
+				"none",
+				"",
+				"y",
+				"x"
+			] }],
+			"scroll-behavior": [{ scroll: ["auto", "smooth"] }],
+			"scrollbar-thumb-color": [{ "scrollbar-thumb": P() }],
+			"scrollbar-track-color": [{ "scrollbar-track": P() }],
+			"scrollbar-gutter": [{ "scrollbar-gutter": [
+				"auto",
+				"stable",
+				"both"
+			] }],
+			"scrollbar-w": [{ scrollbar: [
+				"auto",
+				"thin",
+				"none"
+			] }],
+			"scroll-m": [{ "scroll-m": C() }],
+			"scroll-mx": [{ "scroll-mx": C() }],
+			"scroll-my": [{ "scroll-my": C() }],
+			"scroll-ms": [{ "scroll-ms": C() }],
+			"scroll-me": [{ "scroll-me": C() }],
+			"scroll-mbs": [{ "scroll-mbs": C() }],
+			"scroll-mbe": [{ "scroll-mbe": C() }],
+			"scroll-mt": [{ "scroll-mt": C() }],
+			"scroll-mr": [{ "scroll-mr": C() }],
+			"scroll-mb": [{ "scroll-mb": C() }],
+			"scroll-ml": [{ "scroll-ml": C() }],
+			"scroll-p": [{ "scroll-p": C() }],
+			"scroll-px": [{ "scroll-px": C() }],
+			"scroll-py": [{ "scroll-py": C() }],
+			"scroll-ps": [{ "scroll-ps": C() }],
+			"scroll-pe": [{ "scroll-pe": C() }],
+			"scroll-pbs": [{ "scroll-pbs": C() }],
+			"scroll-pbe": [{ "scroll-pbe": C() }],
+			"scroll-pt": [{ "scroll-pt": C() }],
+			"scroll-pr": [{ "scroll-pr": C() }],
+			"scroll-pb": [{ "scroll-pb": C() }],
+			"scroll-pl": [{ "scroll-pl": C() }],
+			"snap-align": [{ snap: [
+				"start",
+				"end",
+				"center",
+				"align-none"
+			] }],
+			"snap-stop": [{ snap: ["normal", "always"] }],
+			"snap-type": [{ snap: [
+				"none",
+				"x",
+				"y",
+				"both"
+			] }],
+			"snap-strictness": [{ snap: ["mandatory", "proximity"] }],
+			touch: [{ touch: [
+				"auto",
+				"none",
+				"manipulation"
+			] }],
+			"touch-x": [{ "touch-pan": [
+				"x",
+				"left",
+				"right"
+			] }],
+			"touch-y": [{ "touch-pan": [
+				"y",
+				"up",
+				"down"
+			] }],
+			"touch-pz": ["touch-pinch-zoom"],
+			select: [{ select: [
+				"none",
+				"text",
+				"all",
+				"auto"
+			] }],
+			"will-change": [{ "will-change": [
+				"auto",
+				"scroll",
+				"contents",
+				"transform",
+				Z,
+				Y
+			] }],
+			fill: [{ fill: ["none", ...P()] }],
+			"stroke-w": [{ stroke: [
+				K,
+				Dn,
+				X,
+				xn
+			] }],
+			stroke: [{ stroke: ["none", ...P()] }],
+			"forced-color-adjust": [{ "forced-color-adjust": ["auto", "none"] }]
+		},
+		conflictingClassGroups: {
+			"container-named": ["container-type"],
+			overflow: ["overflow-x", "overflow-y"],
+			overscroll: ["overscroll-x", "overscroll-y"],
+			inset: [
+				"inset-x",
+				"inset-y",
+				"inset-bs",
+				"inset-be",
+				"start",
+				"end",
+				"top",
+				"right",
+				"bottom",
+				"left"
+			],
+			"inset-x": ["right", "left"],
+			"inset-y": ["top", "bottom"],
+			flex: [
+				"basis",
+				"grow",
+				"shrink"
+			],
+			gap: ["gap-x", "gap-y"],
+			p: [
+				"px",
+				"py",
+				"ps",
+				"pe",
+				"pbs",
+				"pbe",
+				"pt",
+				"pr",
+				"pb",
+				"pl"
+			],
+			px: ["pr", "pl"],
+			py: ["pt", "pb"],
+			m: [
+				"mx",
+				"my",
+				"ms",
+				"me",
+				"mbs",
+				"mbe",
+				"mt",
+				"mr",
+				"mb",
+				"ml"
+			],
+			mx: ["mr", "ml"],
+			my: ["mt", "mb"],
+			size: ["w", "h"],
+			"font-size": ["leading"],
+			"fvn-normal": [
+				"fvn-ordinal",
+				"fvn-slashed-zero",
+				"fvn-figure",
+				"fvn-spacing",
+				"fvn-fraction"
+			],
+			"fvn-ordinal": ["fvn-normal"],
+			"fvn-slashed-zero": ["fvn-normal"],
+			"fvn-figure": ["fvn-normal"],
+			"fvn-spacing": ["fvn-normal"],
+			"fvn-fraction": ["fvn-normal"],
+			"line-clamp": ["display", "overflow"],
+			rounded: [
+				"rounded-s",
+				"rounded-e",
+				"rounded-t",
+				"rounded-r",
+				"rounded-b",
+				"rounded-l",
+				"rounded-ss",
+				"rounded-se",
+				"rounded-ee",
+				"rounded-es",
+				"rounded-tl",
+				"rounded-tr",
+				"rounded-br",
+				"rounded-bl"
+			],
+			"rounded-s": ["rounded-ss", "rounded-es"],
+			"rounded-e": ["rounded-se", "rounded-ee"],
+			"rounded-t": ["rounded-tl", "rounded-tr"],
+			"rounded-r": ["rounded-tr", "rounded-br"],
+			"rounded-b": ["rounded-br", "rounded-bl"],
+			"rounded-l": ["rounded-tl", "rounded-bl"],
+			"border-spacing": ["border-spacing-x", "border-spacing-y"],
+			"border-w": [
+				"border-w-x",
+				"border-w-y",
+				"border-w-s",
+				"border-w-e",
+				"border-w-bs",
+				"border-w-be",
+				"border-w-t",
+				"border-w-r",
+				"border-w-b",
+				"border-w-l"
+			],
+			"border-w-x": ["border-w-r", "border-w-l"],
+			"border-w-y": ["border-w-t", "border-w-b"],
+			"border-color": [
+				"border-color-x",
+				"border-color-y",
+				"border-color-s",
+				"border-color-e",
+				"border-color-bs",
+				"border-color-be",
+				"border-color-t",
+				"border-color-r",
+				"border-color-b",
+				"border-color-l"
+			],
+			"border-color-x": ["border-color-r", "border-color-l"],
+			"border-color-y": ["border-color-t", "border-color-b"],
+			translate: [
+				"translate-x",
+				"translate-y",
+				"translate-none"
+			],
+			"translate-none": [
+				"translate",
+				"translate-x",
+				"translate-y",
+				"translate-z"
+			],
+			"scroll-m": [
+				"scroll-mx",
+				"scroll-my",
+				"scroll-ms",
+				"scroll-me",
+				"scroll-mbs",
+				"scroll-mbe",
+				"scroll-mt",
+				"scroll-mr",
+				"scroll-mb",
+				"scroll-ml"
+			],
+			"scroll-mx": ["scroll-mr", "scroll-ml"],
+			"scroll-my": ["scroll-mt", "scroll-mb"],
+			"scroll-p": [
+				"scroll-px",
+				"scroll-py",
+				"scroll-ps",
+				"scroll-pe",
+				"scroll-pbs",
+				"scroll-pbe",
+				"scroll-pt",
+				"scroll-pr",
+				"scroll-pb",
+				"scroll-pl"
+			],
+			"scroll-px": ["scroll-pr", "scroll-pl"],
+			"scroll-py": ["scroll-pt", "scroll-pb"],
+			touch: [
+				"touch-x",
+				"touch-y",
+				"touch-pz"
+			],
+			"touch-x": ["touch"],
+			"touch-y": ["touch"],
+			"touch-pz": ["touch"]
+		},
+		conflictingClassGroupModifiers: { "font-size": ["leading"] },
+		postfixLookupClassGroups: ["container-type"],
+		orderSensitiveModifiers: [
+			"*",
+			"**",
+			"after",
+			"backdrop",
+			"before",
+			"details-content",
+			"file",
+			"first-letter",
+			"first-line",
+			"marker",
+			"placeholder",
+			"selection"
+		]
+	};
+});
 //#endregion
-//#region src/ui/Flow.tsx
-var we = (e) => t(K, { get children() {
-	return t(Ce, e);
-} });
+//#region src/ui/utils.ts
+function Un(...e) {
+	return Hn(Ct(e));
+}
+//#endregion
+//#region src/ui/globals/helpers/espace.ts
+var Wn = (e) => e === "" ? "​" : e, Gn = ({ content: e, min: t, ...n }) => {
+	let r = n.rewind ?? !1, i = n.rewindDelay ?? 500, a = Math.min(t / 10 + e.length / 10, 10), [o, s] = O("​"), c, l = 0, u = !0, d = t + a, f = t, p = 1, m = () => {
+		u ? l < e.length ? (s((t) => t + e[l]), l++, c = setTimeout(m, f)) : r && (u = !1, p = 1, c = setTimeout(m, i)) : l > 0 ? (l--, s(Wn(e.substring(0, l))), c = setTimeout(m, f)) : (u = !0, p = 1, c = setTimeout(m, i)), f += p, f >= d ? p = -1 : f <= t && (p = 1);
+	};
+	return A(() => {
+		c !== void 0 && clearTimeout(c);
+	}), {
+		text: o,
+		type: m,
+		setText: s
+	};
+}, Kn = /*#__PURE__*/ b("<div>"), qn = (e) => {
+	let t = e.interval ?? 62, n = e.rewind ?? !1, r = e.rewindDelay ?? 500, i = e.children, a = D(() => e.disabled ? e.disabled() : !1, !1), { text: s, type: c, setText: d } = Gn({
+		content: i,
+		min: t,
+		rewind: n,
+		rewindDelay: r
+	});
+	return E(k(a, () => d("​"))), E(() => {
+		a() ? d(i) : c();
+	}), (() => {
+		var t = u(Kn);
+		return f(t, s), l(() => o(t, e.class)), t;
+	})();
+}, Jn = /*#__PURE__*/ b("<div class=\"mt-4 flex items-center justify-center space-x-4\">"), Yn = /*#__PURE__*/ b("<span aria-hidden=true>"), Xn = ({ count: e, innerProps: t = {}, duration: n = 500 }) => {
+	let [r, i] = M(t, ["class", "style"]);
+	return (() => {
+		var t = u(Jn);
+		return f(t, () => Array.from({ length: e }, (e, t) => (() => {
+			var e = u(Yn);
+			return v(e, m({
+				get class() {
+					return Un("rounded-full animate-out direction-alternate repeat-infinite fade-out-5 size-4  bg-gray-600", r.class);
+				},
+				get style() {
+					return {
+						...r.style,
+						"animation-duration": `${n}ms`,
+						"animation-delay": `${n / t}ms`
+					};
+				}
+			}, i), !1, !1), h(), e;
+		})())), t;
+	})();
+}, Zn = /*#__PURE__*/ b("<div role=status aria-live=polite aria-label=\"Chargement en cours\"><div class=relative><div aria-hidden=true></div><div aria-hidden=true></div></div><div class=text-center><!$><!/><!$><!/>"), Qn = (e) => {
+	let t = e.message ?? "Chargement en cours...", n = {
+		sm: "w-8 h-8",
+		md: "w-12 h-12",
+		lg: "w-16 h-16",
+		xl: "w-24 h-24"
+	}, r = e.size ?? "lg";
+	return (() => {
+		var i = u(Zn), a = i.firstChild, c = a.firstChild, p = c.nextSibling, m = a.nextSibling, h = m.firstChild, [_, v] = d(h.nextSibling), y = _.nextSibling, [b, x] = d(y.nextSibling);
+		return g(m, "aria-label", t), f(m, s(qn, {
+			class: "text-lg font-medium text-gray-700 md:text-xl dark:text-gray-300",
+			get interval() {
+				return e.interval ?? 80;
+			},
+			get rewind() {
+				return e.rewind ?? !0;
+			},
+			get rewindDelay() {
+				return e.rewindDelay ?? 2e3;
+			},
+			children: t
+		}), _, v), f(m, s(Xn, {
+			count: 5,
+			innerProps: { class: "bg-[#3d8091]" }
+		}), b, x), l((t) => {
+			var a = Un("flex flex-col items-center justify-center gap-6", "h-screen w-screen overflow-hidden p-4", e.class), s = Un(n[r], "rounded-full border-4 border-[#4B9CAD]/20", "animate-spin", "border-t-[#4B9CAD]"), l = Un("absolute inset-2", "rounded-full border-4 border-transparent", "border-b-[#4B9CAD]/40", "animate-spin", "animation-duration-[1.5s]", "direction-[reverse]");
+			return a !== t.e && o(i, t.e = a), s !== t.t && o(c, t.t = s), l !== t.a && o(p, t.a = l), t;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0
+		}), i;
+	})();
+}, $n = /*#__PURE__*/ b("<div class=\"relative flex h-full w-full rounded-lg border-2 border-gray-600 bg-white bg-size-[30px_30px]\"style=\"background-image:radial-gradient(circle, #b8b8b8bf 1px, rgba(0, 0, 0, 0) 1px)\">"), er = /*#__PURE__*/ b("<div class=\"relative flex flex-1 items-center justify-center\">"), tr = (e) => {
+	let [t, n] = O(!1);
+	return j(() => setTimeout(() => n(!0), e.delay)), (() => {
+		var n = u($n);
+		return f(n, s(C, {
+			get when() {
+				return t();
+			},
+			keyed: !0,
+			get fallback() {
+				return (() => {
+					var e = u(er);
+					return f(e, s(Qn, {
+						message: "Chart is loading...",
+						interval: 35,
+						rewind: !0,
+						rewindDelay: 1e3
+					})), e;
+				})();
+			},
+			get children() {
+				return s(Ge, { get children() {
+					return s(xt, e);
+				} });
+			}
+		})), n;
+	})();
+}, nr = (t = 270) => {
+	let n = H(), r = () => n.send("STOP_EDIT"), [i, a] = O(!1), o = n.sender("SET_NODE_DATA"), s = S(n, {
+		selector: ({ context: t }) => {
+			let n = t.editing;
+			if (!e(n)) return;
+			let r = t.data?.nodes?.find((e) => e.id === n);
+			if (e(r)) return {
+				id: r.id,
+				data: r.data
+			};
+		},
+		equals: P
+	});
+	return {
+		editing: s,
+		updateField: (e, t) => {
+			let n = s();
+			if (n) return o({
+				...n,
+				data: {
+					...n.data,
+					[e]: t
+				}
+			});
+		},
+		updateData: (e) => {
+			let t = s();
+			if (t) return o({
+				...t,
+				data: {
+					...t.data,
+					...e
+				}
+			});
+		},
+		close: () => {
+			a(!0), setTimeout(() => {
+				r(), a(!1);
+			}, t);
+		},
+		closing: i,
+		directClose: r
+	};
+}, rr = /*#__PURE__*/ b("<div><div class=\"flex flex-col gap-3\"><!$><!/><!$><!/>"), ir = /*#__PURE__*/ b("<div class=\"flex items-center justify-between border-b border-gray-100 pb-2\"><div class=\"flex items-center gap-2\"><h3 class=\"text-sm font-bold text-gray-800\">Edit</h3><span class=\"font-mono text-[11px] text-gray-400\"></span></div><button type=button title=\"Close editor\"aria-label=\"Close editor\"class=\"cursor-pointer rounded-full p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-700\"><svg class=size-4 viewBox=\"0 0 24 24\"fill=none stroke=currentColor stroke-width=2><path d=\"M18 6L6 18M6 6l12 12\">"), ar = (e) => {
+	let t = nr(e.timeout), n = () => e.classList instanceof Function ? e.classList(t) : e.classList;
+	return s(C, {
+		get when() {
+			return t.editing();
+		},
+		children: (r) => (() => {
+			var c = u(rr), p = c.firstChild, m = p.firstChild, [g, _] = d(m.nextSibling), v = g.nextSibling, [b, S] = d(v.nextSibling);
+			return x(nt, c, () => t.close), c.$$mousedown = (e) => e.stopPropagation(), f(p, s(C, {
+				get when() {
+					return e.header;
+				},
+				keyed: !0,
+				get fallback() {
+					return (() => {
+						var e = u(ir), n = e.firstChild, a = n.firstChild.nextSibling, o = n.nextSibling;
+						return f(a, () => r().id), i(o, "click", t.close, !0), h(), e;
+					})();
+				},
+				children: (e) => e({
+					id: r().id,
+					close: t.close
+				})
+			}), g, _), f(p, () => e.children(t), b, S), l((t) => {
+				var r = Un(`w-80 cursor-default rounded-2xl border border-gray-200 bg-white/95 p-4 shadow-xl backdrop-blur-md transition-all ${e.class ?? ""}`), i = n(), s = e.style;
+				return r !== t.e && o(c, t.e = r), t.t = a(c, i, t.t), t.a = y(c, s, t.a), t;
+			}, {
+				e: void 0,
+				t: void 0,
+				a: void 0
+			}), h(), c;
+		})()
+	});
+};
+c(["mousedown", "click"]);
 //#endregion
-export { M as CLASSES, we as Flow };
+export { B as BOUNDS_CONSTRAINTS, Ce as CANVAS_FACTOR, Ie as CLASSES, ye as CONTAINER_DIMENSIONS, R as DEFAULT_DATA, z as DEFAULT_INPUT_OFFSET, _e as DEFAULT_INPUT_OFFSET_X, ve as DEFAULT_INPUT_OFFSET_Y, Te as DEFAULT_NODES, le as DEFAULT_NODE_HEIGHT, ce as DEFAULT_NODE_WIDTH, L as DEFAULT_SIZE, ar as EditPanel, tr as Flow, xt as FlowChart, ge as HANDLE_CENTER_X_OFFSET, he as HANDLE_CENTER_Y, me as HANDLE_CONTAINER_OFFSET_X, pe as HANDLE_MARGIN_TOP, fe as HANDLE_RADIUS, de as HANDLE_SIZE, ue as NODE_BORDER_WIDTH, se as PARENT_CHILD_GAP_WIDTH, ht as Panels, Ge as Provider, we as SCROLL_MULTIPLIER, Se as TOOLBAR_BUFFER, xe as TOOLBAR_TOP_OFFSET, Fe as board, Le as clamp, nt as clickOutside, Re as createContext, ke as data, Me as dimension, je as edgeJSON, De as extremities, be as getDefaultOutputOffset, rt as mouseOut, Pe as newEdge, Oe as nodeDataValue, Ae as nodeJSON, Ee as nodeOffset, V as point, it as resize, H as useFlow, Ne as vector };