@bemedev/mind-flow 1.3.0 → 1.4.1

package/lib/server.es.js

@@ -1,7 +1,7 @@
 import { isDefined, toArray, type } from "@bemedev/app/bemedev";
-import { Dynamic, createComponent, escape, memo, mergeProps, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, ssrStyleProperty } from "solid-js/web";
+import { Dynamic, createComponent, escape, memo, mergeProps, ssr, ssrAttribute, ssrClassList, ssrHydrationKey, ssrStyle, ssrStyleProperty } from "solid-js/web";
 import { createState } from "@bemedev/app-solidjs";
-import { For, Show, createComponent as createComponent$1, createContext as createContext$1, createEffect, createMemo, createSignal, on, onCleanup, onMount, splitProps, useContext } from "solid-js";
+import { For, Show, createComponent as createComponent$1, createContext as createContext$1, createEffect, createSignal, on, onCleanup, onMount, useContext } from "solid-js";
 import { createMachine, deepEqual, interpret, toArray as toArray$1 } from "@bemedev/app";
 import { nanoid } from "nanoid";
 import { DragDropProvider, DragDropSensors, DragOverlay, createDraggable, useDragDropContext } from "@thisbeyond/solid-dnd";
@@ -994,14 +994,14 @@ var DragBounds = () => {
 };
 //#endregion
 //#region src/ui/components/EdgeComponent.tsx
-var _tmpl$$10 = [
+var _tmpl$$7 = [
 	"<path",
 	" class=\"",
 	"\" style=\"",
 	"\"",
 	"></path>"
 ];
-var _tmpl$2$5 = [
+var _tmpl$2$4 = [
 	"<g",
 	" cursor=\"pointer\" transform=\"",
 	"\" style=\"",
@@ -1066,19 +1066,19 @@ var EdgeComponent = (props) => {
 		get when() {
 			return vector();
 		},
-		children: (v) => [ssr(_tmpl$$10, ssrHydrationKey(), `relative cursor-pointer fill-transparent ${!!props.isNew ? "stroke-[rgba(168,168,168,0.4)] stroke-3 z-200" : ""} ${selected() && !props.isNew ? "stroke-[rgba(168,168,168,1)] stroke-4 z-100" : ""} ${!selected() && !props.isNew ? "stroke-[rgba(168,168,168,0.8)] stroke-3" : ""}`, ssrStyleProperty("pointer-events:", props.isNew ? "none" : "all"), ssrAttribute("d", escape(draw(v()), true), false)), createComponent(Show, {
+		children: (v) => [ssr(_tmpl$$7, ssrHydrationKey(), `relative cursor-pointer fill-transparent ${!!props.isNew ? "stroke-[rgba(168,168,168,0.4)] stroke-3 z-200" : ""} ${selected() && !props.isNew ? "stroke-[rgba(168,168,168,1)] stroke-4 z-100" : ""} ${!selected() && !props.isNew ? "stroke-[rgba(168,168,168,0.8)] stroke-3" : ""}`, ssrStyleProperty("pointer-events:", props.isNew ? "none" : "all"), ssrAttribute("d", escape(draw(v()), true), false)), createComponent(Show, {
 			get when() {
 				return selected();
 			},
 			get children() {
-				return ssr(_tmpl$2$5, ssrHydrationKey(), `translate(${escape(middlePoint().x, true)}, ${escape(middlePoint().y, true)})`, ssrStyleProperty("pointer-events:", "all") + ssrStyleProperty(";z-index:", "30"));
+				return ssr(_tmpl$2$4, ssrHydrationKey(), `translate(${escape(middlePoint().x, true)}, ${escape(middlePoint().y, true)})`, ssrStyleProperty("pointer-events:", "all") + ssrStyleProperty(";z-index:", "30"));
 			}
 		})]
 	});
 };
 //#endregion
 //#region src/ui/components/EdgesBoard.tsx
-var _tmpl$$9 = [
+var _tmpl$$6 = [
 	"<svg",
 	" class=\"pointer-events-none h-full w-full overflow-visible\"><!--$-->",
 	"<!--/--><!--$-->",
@@ -1099,7 +1099,7 @@ var EdgesBoard = () => {
 		selector: ({ context }) => Object.keys(context.edgesPositions ?? {}),
 		equals: (prev, next) => prev.length === next.length
 	});
-	return ssr(_tmpl$$9, ssrHydrationKey(), escape(createComponent(Show, {
+	return ssr(_tmpl$$6, ssrHydrationKey(), escape(createComponent(Show, {
 		get when() {
 			return hasNewEdge();
 		},
@@ -1118,12 +1118,12 @@ var EdgesBoard = () => {
 };
 //#endregion
 //#region src/ui/components/NodeComponent.tsx
-var _tmpl$$8 = [
+var _tmpl$$5 = [
 	"<svg",
 	" class=\"cursor-pointer overflow-visible rounded-full bg-green-500 p-0.5 text-center font-bold hover:bg-green-600\" style=\"",
 	"\" viewBox=\"0 0 1024 1024\" preserveAspectRatio=\"xMaxYMax\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"white\"><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\"></path></g></svg>"
 ];
-var _tmpl$2$4 = [
+var _tmpl$2$3 = [
 	"<div",
 	" class=\"",
 	"\" style=\"",
@@ -1133,17 +1133,15 @@ var _tmpl$2$4 = [
 	"\"><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=\"",
 	"\"><path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\"></path></svg></div><div>",
-	"</div><div id=\"inputs\" data-handle-type=\"input\"",
-	" class=\"pointer-events-none absolute top-0 z-10 flex cursor-default flex-col\" style=\"",
+	"</div><div id=\"inputs\" class=\"pointer-events-none absolute top-0 z-10 flex cursor-default flex-col\" style=\"",
 	"\"><div data-handle-type=\"input\"",
-	" class=\"cursor-default rounded-full bg-[#e38b29] shadow-md transition-transform\" style=\"",
-	"\"></div></div><div id=\"outputs\" data-handle-type=\"output\"",
-	" style=\"",
+	" class=\"cursor-default rounded-full bg-[#e38b29] shadow-md transition-transform duration-150 ease-in-out hover:scale-150\" style=\"",
+	"\"></div></div><div id=\"outputs\" style=\"",
 	"\" class=\"pointer-events-none absolute top-0 z-10 flex flex-col\"><div data-handle-type=\"output\"",
-	" class=\"cursor-crosshair rounded-full bg-[#e38b29] shadow-md transition-transform\" style=\"",
+	" class=\"cursor-crosshair rounded-full bg-[#e38b29] shadow-md transition-transform duration-150 ease-in-out hover:scale-150\" style=\"",
 	"\"></div></div></div>"
 ];
-var _tmpl$3$2 = [
+var _tmpl$3$1 = [
 	"<div",
 	" class=\"p-3 select-none\"><!--$-->",
 	"<!--/--><!--$-->",
@@ -1200,19 +1198,19 @@ var NodeComponent = (props) => {
 		if (!edges) return false;
 		return edges.some(({ to }) => to === props.id);
 	} });
-	return ssr(_tmpl$2$4, ssrHydrationKey(), `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 ${selected() ? "border border-[#e38c29] z-100" : ""} ${!selected() ? "border border-[#e6d4be] z-1" : ""} group min-w-48`, ssrStyleProperty("top:", `${escape(node().y, true)}px`) + ssrStyleProperty(";left:", `${escape(node().x, true)}px`), ssrAttribute("id", escape(props.id, true), false), `pointer-events-none absolute flex items-center justify-end -top-7.5 right-0 transition-all duration-200 ease-in-out space-x-2 ${selected() ? "w-full opacity-100" : ""} ${!selected() ? "w-0 -right-3 opacity-0 overflow-hidden" : ""}`, ssrStyleProperty("overflow:", "visible") + ssrStyleProperty(";pointer-events:", "all") + ssrStyleProperty(";width:", `${escape(12, true) * 2}px`) + ssrStyleProperty(";height:", `${escape(12, true) * 2}px`), escape(createComponent(Show, {
+	return ssr(_tmpl$2$3, ssrHydrationKey(), `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 ${selected() ? "border border-[#e38c29] z-100" : ""} ${!selected() ? "border border-[#e6d4be] z-1" : ""} group min-w-48`, ssrStyleProperty("top:", `${escape(node().y, true)}px`) + ssrStyleProperty(";left:", `${escape(node().x, true)}px`), ssrAttribute("id", escape(props.id, true), false), `pointer-events-none absolute flex items-center justify-end -top-7.5 right-0 transition-all duration-200 ease-in-out space-x-2 ${selected() ? "w-full opacity-100" : ""} ${!selected() ? "w-0 -right-3 opacity-0 overflow-hidden" : ""}`, ssrStyleProperty("overflow:", "visible") + ssrStyleProperty(";pointer-events:", "all") + ssrStyleProperty(";width:", `${escape(12, true) * 2}px`) + ssrStyleProperty(";height:", `${escape(12, true) * 2}px`), escape(createComponent(Show, {
 		get when() {
 			return hasParent();
 		},
 		get children() {
-			return ssr(_tmpl$$8, ssrHydrationKey(), ssrStyleProperty("pointer-events:", "all") + ssrStyleProperty(";fill-rule:", "evenodd") + ssrStyleProperty(";clip-rule:", "evenodd") + ssrStyleProperty(";stroke-linejoin:", "round") + ssrStyleProperty(";stroke-miterlimit:", "2") + ssrStyleProperty(";width:", `${escape(12, true) * 2}px`) + ssrStyleProperty(";height:", `${escape(12, true) * 2}px`));
+			return ssr(_tmpl$$5, ssrHydrationKey(), ssrStyleProperty("pointer-events:", "all") + ssrStyleProperty(";fill-rule:", "evenodd") + ssrStyleProperty(";clip-rule:", "evenodd") + ssrStyleProperty(";stroke-linejoin:", "round") + ssrStyleProperty(";stroke-miterlimit:", "2") + ssrStyleProperty(";width:", `${escape(12, true) * 2}px`) + ssrStyleProperty(";height:", `${escape(12, true) * 2}px`));
 		}
 	})), ssrStyleProperty("pointer-events:", "all") + ssrStyleProperty(";width:", `${escape(12, true) * 2}px`) + ssrStyleProperty(";height:", `${escape(12, true) * 2}px`), escape(createComponent(Show, {
 		get when() {
 			return props.children;
 		},
 		get fallback() {
-			return ssr(_tmpl$3$2, ssrHydrationKey(), escape(createComponent(Show, {
+			return ssr(_tmpl$3$1, ssrHydrationKey(), escape(createComponent(Show, {
 				get when() {
 					return node().data.label;
 				},
@@ -1243,26 +1241,57 @@ var NodeComponent = (props) => {
 				return props.children;
 			} }, () => node().data));
 		}
-	})), ssrAttribute("data-node-id", escape(props.id, true), false), ssrStyleProperty("left:", `-${escape(18, true)}px`), ssrAttribute("data-node-id", escape(props.id, true), false), ssrStyleProperty("width:", `${escape(12, true)}px`) + ssrStyleProperty(";height:", `${escape(12, true)}px`) + ssrStyleProperty(";margin-top:", `${escape(12, true)}px`) + ssrStyleProperty(";pointer-events:", "all"), ssrAttribute("data-node-id", escape(props.id, true), false), ssrStyleProperty("right:", `-${escape(18, true)}px`), ssrAttribute("data-node-id", escape(props.id, true), false), ssrStyleProperty("width:", `${escape(12, true)}px`) + ssrStyleProperty(";height:", `${escape(12, true)}px`) + ssrStyleProperty(";margin-top:", `${escape(12, true)}px`) + ssrStyleProperty(";pointer-events:", "all"));
+	})), ssrStyleProperty("left:", `-${escape(18, true)}px`), ssrAttribute("data-node-id", escape(props.id, true), false), ssrStyleProperty("width:", `${escape(12, true)}px`) + ssrStyleProperty(";height:", `${escape(12, true)}px`) + ssrStyleProperty(";margin-top:", `${escape(12, true)}px`) + ssrStyleProperty(";pointer-events:", "all"), ssrStyleProperty("right:", `-${escape(18, true)}px`), ssrAttribute("data-node-id", escape(props.id, true), false), ssrStyleProperty("width:", `${escape(12, true)}px`) + ssrStyleProperty(";height:", `${escape(12, true)}px`) + ssrStyleProperty(";margin-top:", `${escape(12, true)}px`) + ssrStyleProperty(";pointer-events:", "all"));
 };
 //#endregion
+//#region src/ui/utils.ts
+/**
+* Merges conditional CSS class names using `clsx` and resolves Tailwind CSS class
+* conflicts with `twMerge`.
+*
+* @param inputs - Variable list of class values, objects, or arrays.
+*
+* @returns The resolved single class name string.
+*/
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+//#endregion
 //#region src/ui/components/Panels.tsx
-var _tmpl$$7 = [
-	"<div",
-	" class=\"absolute top-4 left-4 z-50\">",
-	"</div>"
-];
-var _tmpl$2$3 = [
+var _tmpl$$4 = [
 	"<div",
-	" class=\"absolute top-4 right-4 z-50\">",
+	" class=\"",
+	"\">",
 	"</div>"
 ];
-var _tmpl$3$1 = [
+var _tmpl$2$2 = [
 	"<div",
-	" class=\"absolute bottom-4 left-4 z-50\">",
-	"</div>"
+	" class=\"pointer-events-none absolute inset-0\"><!--$-->",
+	"<!--/--><!--$-->",
+	"<!--/--><!--$-->",
+	"<!--/--></div>"
 ];
 /**
+* Overlay slot component rendering an optional panel component with z-index
+* positioning.
+*
+* @param props - Panel properties of type {@linkcode PanelProps}.
+*
+* @returns The rendered panel container element or fallback.
+*
+* @see {@linkcode cn}
+*/
+var Panel = (props) => {
+	const exists = isDefined(props.children);
+	return createComponent(Show, {
+		get when() {
+			return props.children;
+		},
+		keyed: true,
+		children: (Children) => ssr(_tmpl$$4, ssrHydrationKey(), `${escape(cn(props.class) || "", true)} ${exists ? "z-50" : ""}`, escape(createComponent(Children, {})))
+	});
+};
+/**
 * Overlay container rendering custom panel slots positioned around the flowchart
 * canvas.
 *
@@ -1271,33 +1300,26 @@ var _tmpl$3$1 = [
 * @returns Rendered overlay panels JSX elements.
 */
 var Panels = (props) => {
-	return [
-		createComponent(Show, {
-			get when() {
-				return props.topLeft;
-			},
-			keyed: true,
-			children: (Panel) => ssr(_tmpl$$7, ssrHydrationKey(), escape(createComponent(Panel, {})))
-		}),
-		createComponent(Show, {
-			get when() {
-				return props.topRight;
-			},
-			keyed: true,
-			children: (Panel) => ssr(_tmpl$2$3, ssrHydrationKey(), escape(createComponent(Panel, {})))
-		}),
-		createComponent(Show, {
-			get when() {
-				return props.bottomLeft;
-			},
-			keyed: true,
-			children: (Panel) => ssr(_tmpl$3$1, ssrHydrationKey(), escape(createComponent(Panel, {})))
-		})
-	];
+	return ssr(_tmpl$2$2, ssrHydrationKey(), escape(createComponent(Panel, {
+		get children() {
+			return props.topLeft;
+		},
+		"class": "absolute top-4 left-4"
+	})), escape(createComponent(Panel, {
+		get children() {
+			return props.topRight;
+		},
+		"class": "absolute top-4 right-4"
+	})), escape(createComponent(Panel, {
+		get children() {
+			return props.bottomLeft;
+		},
+		"class": "absolute bottom-4 left-4"
+	})));
 };
 //#endregion
 //#region src/ui/components/NodesBoard.tsx
-var _tmpl$$6 = [
+var _tmpl$$3 = [
 	"<div",
 	" class=\"relative h-full w-full overflow-auto\"><!--$-->",
 	"<!--/--><div class=\"",
@@ -1308,7 +1330,7 @@ var _tmpl$$6 = [
 	"<!--/--><!--$-->",
 	"<!--/--></div></div></div>"
 ];
-var _tmpl$2$2 = [
+var _tmpl$2$1 = [
 	"<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\"></path></svg></button></div>"
@@ -1455,7 +1477,7 @@ var NodesBoard = (props) => {
 		},
 		get children() {
 			return [
-				ssr(_tmpl$$6, ssrHydrationKey(), escape(createComponent(DragDropSensors, {})), `relative cursor-crosshair overflow-hidden ${isPanning() ? "cursor-grabbing" : ""}`, ssrStyleProperty("height:", escape(cHeight(), true)) + ssrStyleProperty(";width:", escape(cWidth(), true)), ssrStyleProperty("scale:", escape(zoom(), true)) + ssrStyleProperty(";transform-origin:", "top left"), escape(createComponent(DragBounds, {})), escape(createComponent(EdgesBoard, {})), escape(createComponent(For, {
+				ssr(_tmpl$$3, ssrHydrationKey(), escape(createComponent(DragDropSensors, {})), `relative cursor-crosshair overflow-hidden ${isPanning() ? "cursor-grabbing" : ""}`, ssrStyleProperty("height:", escape(cHeight(), true)) + ssrStyleProperty(";width:", escape(cWidth(), true)), ssrStyleProperty("scale:", escape(zoom(), true)) + ssrStyleProperty(";transform-origin:", "top left"), escape(createComponent(DragBounds, {})), escape(createComponent(EdgesBoard, {})), escape(createComponent(For, {
 					get each() {
 						return nodeIds();
 					},
@@ -1467,7 +1489,7 @@ var NodesBoard = (props) => {
 					})
 				}))),
 				createComponent(Panels, mergeProps(() => props.panels)),
-				ssr(_tmpl$2$2, ssrHydrationKey(), escape(Math.round(zoom() * 100))),
+				ssr(_tmpl$2$1, ssrHydrationKey(), escape(Math.round(zoom() * 100))),
 				createComponent(Show, {
 					get when() {
 						return !selectedId();
@@ -1482,7 +1504,7 @@ var NodesBoard = (props) => {
 };
 //#endregion
 //#region src/ui/components/FlowChart.tsx
-var _tmpl$$5 = [
+var _tmpl$$2 = [
 	"<div",
 	" class=\"relative h-full w-full\"><div class=\"h-full w-full\" style=\"",
 	"\">",
@@ -1506,7 +1528,7 @@ var FlowChart = (props) => {
 	const primaryNodes = props.config?.nodes ?? DEFAULT_NODES;
 	const primaryEdges = props.config?.edges;
 	const service = useFlow();
-	const hasNewEdge = createState(service, { selector: (s) => !!s.context.newEdge });
+	const fromSignal = createState(service, { selector: (s) => s.context.newEdge?.from });
 	onCleanup(service.pause);
 	onMount(() => {
 		service.resume();
@@ -1519,39 +1541,59 @@ var FlowChart = (props) => {
 			}
 		});
 	});
-	createEffect(() => {
-		if (!hasNewEdge()) return;
-		const handlePointerMove = (e) => {
-			service.send({
-				type: "MOVE_NEW_EDGE",
-				payload: {
-					x: e.clientX,
-					y: e.clientY
-				}
-			});
-		};
-		const handlePointerUp = (e) => {
-			const from = service.state.context.newEdge?.from;
-			if (from) {
-				const targetId = (document.elementFromPoint(e.clientX, e.clientY)?.closest("[data-handle-type=\"input\"]"))?.getAttribute("data-node-id");
-				if (targetId && targetId !== from) service.send({
-					type: "ADD_EDGE",
-					payload: {
-						from,
-						to: targetId
-					}
-				});
+	let added = false;
+	let activeHandle = null;
+	const clearActiveHandle = () => {
+		if (activeHandle) {
+			activeHandle.classList.remove("scale-150");
+			activeHandle = null;
+			added = false;
+		}
+	};
+	const handlePointerMove = (e) => {
+		service.send({
+			type: "MOVE_NEW_EDGE",
+			payload: {
+				x: e.clientX,
+				y: e.clientY
 			}
-			service.send("CLEAR_NEW_EDGE");
-		};
+		});
+		const inputHandle = document.elementsFromPoint(e.clientX, e.clientY).map((el) => el.closest(".rounded-full[data-handle-type=\"input\"]")).find((handle) => Boolean(handle && handle.id !== "inputs"));
+		if (activeHandle && activeHandle !== inputHandle) clearActiveHandle();
+		if (inputHandle) {
+			if (activeHandle !== inputHandle) {
+				inputHandle.classList.add("scale-150");
+				activeHandle = inputHandle;
+				added = true;
+			}
+		}
+	};
+	const createHandlePointerUp = (from) => (e) => {
+		const inputHandle = document.elementsFromPoint(e.clientX, e.clientY).map((el) => el.closest(".rounded-full[data-handle-type=\"input\"]")).find((handle) => Boolean(handle && handle.id !== "inputs"));
+		const to = inputHandle?.getAttribute("data-node-id");
+		if (inputHandle && to) service.send({
+			type: "ADD_EDGE",
+			payload: {
+				from,
+				to
+			}
+		});
+		clearActiveHandle();
+		service.send("CLEAR_NEW_EDGE");
+	};
+	createEffect(() => {
+		const from = fromSignal();
+		if (!from || added) return;
+		const handlePointerUp = createHandlePointerUp(from);
 		window.addEventListener("pointermove", handlePointerMove);
 		window.addEventListener("pointerup", handlePointerUp);
 		onCleanup(() => {
+			clearActiveHandle();
 			window.removeEventListener("pointermove", handlePointerMove);
 			window.removeEventListener("pointerup", handlePointerUp);
 		});
 	});
-	return ssr(_tmpl$$5, ssrHydrationKey(), ssrStyleProperty("cursor:", hasNewEdge() ? "inherit" : "crosshair"), escape(createComponent(NodesBoard, {
+	return ssr(_tmpl$$2, ssrHydrationKey(), ssrStyleProperty("cursor:", fromSignal() ? "inherit" : "crosshair"), escape(createComponent(NodesBoard, {
 		get panels() {
 			return props.panels;
 		},
@@ -1561,207 +1603,6 @@ var FlowChart = (props) => {
 	})));
 };
 //#endregion
-//#region src/ui/utils.ts
-/**
-* Merges conditional CSS class names using `clsx` and resolves Tailwind CSS class
-* conflicts with `twMerge`.
-*
-* @param inputs - Variable list of class values, objects, or arrays.
-*
-* @returns The resolved single class name string.
-*/
-function cn(...inputs) {
-	return twMerge(clsx(inputs));
-}
-//#endregion
-//#region src/ui/globals/helpers/espace.ts
-/**
-* Returns a zero-width space if string is empty, preserving layout flow.
-*
-* @param newText - The input text string.
-*
-* @returns The input text or zero-width visible space placeholder.
-*/
-var espace = (newText) => {
-	if (newText === "") return "​";
-	return newText;
-};
-//#endregion
-//#region src/ui/globals/signals/createTyping.ts
-/**
-* Creates a reactive typewriter effect signal with oscillatory typing delay and
-* optional rewind.
-*
-* @param props - Configuration properties of type {@linkcode Props}.
-*
-* @returns An object containing the current text signal, type trigger, and text
-*   setter.
-*/
-var createTyping = ({ content, min, ...props }) => {
-	const rewind = props.rewind ?? false;
-	const rewindDelay = props.rewindDelay ?? 500;
-	const OSCILLATION = Math.min(min / 10 + content.length / 10, 10);
-	const [text, setText] = createSignal("​");
-	let timeoutId;
-	let index = 0;
-	let isTyping = true;
-	const max = min + OSCILLATION;
-	let interval = min;
-	let intervalDirection = 1;
-	const type = () => {
-		if (isTyping) {
-			if (index < content.length) {
-				setText((prev) => prev + content[index]);
-				index++;
-				timeoutId = setTimeout(type, interval);
-			} else if (rewind) {
-				isTyping = false;
-				intervalDirection = 1;
-				timeoutId = setTimeout(type, rewindDelay);
-			}
-		} else if (index > 0) {
-			index--;
-			setText(espace(content.substring(0, index)));
-			timeoutId = setTimeout(type, interval);
-		} else {
-			isTyping = true;
-			intervalDirection = 1;
-			timeoutId = setTimeout(type, rewindDelay);
-		}
-		interval += intervalDirection;
-		if (interval >= max) intervalDirection = -1;
-		else if (interval <= min) intervalDirection = 1;
-	};
-	onCleanup(() => {
-		if (timeoutId !== void 0) clearTimeout(timeoutId);
-	});
-	return {
-		text,
-		type,
-		setText
-	};
-};
-//#endregion
-//#region src/ui/globals/components/atoms/TypingText.tsx
-var _tmpl$$4 = [
-	"<div",
-	">",
-	"</div>"
-];
-/**
-* Renders animated text with a typewriter keystroke animation effect.
-*
-* @param props - Component configuration properties of type {@linkcode Props}.
-*
-* @returns Rendered animated typing text JSX container.
-*/
-var TypingText = (props) => {
-	const min = props.interval ?? 62;
-	const rewind = props.rewind ?? false;
-	const rewindDelay = props.rewindDelay ?? 500;
-	const content = props.children;
-	const disabled = createMemo(() => props.disabled ? props.disabled() : false, false);
-	const { text, type, setText } = createTyping({
-		content,
-		min,
-		rewind,
-		rewindDelay
-	});
-	createEffect(on(disabled, () => setText("​")));
-	createEffect(() => {
-		if (disabled()) setText(content);
-		else type();
-	});
-	return ssr(_tmpl$$4, ssrHydrationKey() + ssrAttribute("class", escape(props.class, true), false), escape(text()));
-};
-//#endregion
-//#region src/ui/globals/components/molecules/FadingDots.tsx
-var _tmpl$$3 = [
-	"<div",
-	" class=\"mt-4 flex items-center justify-center space-x-4\">",
-	"</div>"
-];
-/**
-* Loading animation component displaying animated pulsing dots.
-*
-* @param props - Fading dots configuration properties.
-* @param props.count - The number of dots to display.
-* @param props.duration - Animation duration in milliseconds. Defaults to 500.
-* @param props.innerProps - Additional properties and CSS styles applied to dot
-*   elements.
-*
-* @returns Rendered animated dots container JSX element.
-*/
-var FadingDots = ({ count: length, innerProps = {}, duration = 500 }) => {
-	const [local, rest] = splitProps(innerProps, ["class", "style"]);
-	return ssr(_tmpl$$3, ssrHydrationKey(), escape(Array.from({ length }, (_, i) => ssrElement("span", mergeProps({
-		get ["class"]() {
-			return cn("rounded-full animate-out direction-alternate repeat-infinite fade-out-5 size-4  bg-gray-600", local.class);
-		},
-		get style() {
-			return {
-				...local.style,
-				"animation-duration": `${duration}ms`,
-				"animation-delay": `${duration / i}ms`
-			};
-		},
-		"aria-hidden": "true"
-	}, rest), void 0, true))));
-};
-//#endregion
-//#region src/ui/globals/components/organisms/LoadingFallback.tsx
-var _tmpl$$2 = [
-	"<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\"",
-	"><!--$-->",
-	"<!--/--><!--$-->",
-	"<!--/--></div></div>"
-];
-/**
-* Fallback loading screen component displaying an animated spinner and typewriter
-* text.
-*
-* @example
-*   ```tsx
-*   <Show when={data()} fallback={<LoadingFallback />}>
-*     <DataComponent data={data()!} />
-*   </Show>;
-*   ```;
-*
-* @param props - Loading fallback properties of type
-*   {@linkcode LoadingFallbackProps}.
-*
-* @returns Rendered full-screen loading fallback JSX element.
-*/
-var LoadingFallback = (props) => {
-	const message = props.message ?? "Chargement en cours...";
-	const spinnerSizes = {
-		sm: "w-8 h-8",
-		md: "w-12 h-12",
-		lg: "w-16 h-16",
-		xl: "w-24 h-24"
-	};
-	const size = props.size ?? "lg";
-	return ssr(_tmpl$$2, ssrHydrationKey() + ssrAttribute("class", escape(cn("flex flex-col items-center justify-center gap-6", "h-screen w-screen overflow-hidden p-4", props.class), true), false), ssrAttribute("class", escape(cn(spinnerSizes[size], "rounded-full border-4 border-[#4B9CAD]/20", "animate-spin", "border-t-[#4B9CAD]"), true), false), ssrAttribute("class", escape(cn("absolute inset-2", "rounded-full border-4 border-transparent", "border-b-[#4B9CAD]/40", "animate-spin", "animation-duration-[1.5s]", "direction-[reverse]"), true), false), ssrAttribute("aria-label", escape(message, true), false), escape(createComponent(TypingText, {
-		"class": "text-lg font-medium text-gray-700 md:text-xl dark:text-gray-300",
-		get interval() {
-			return props.interval ?? 80;
-		},
-		get rewind() {
-			return props.rewind ?? true;
-		},
-		get rewindDelay() {
-			return props.rewindDelay ?? 2e3;
-		},
-		children: message
-	})), escape(createComponent(FadingDots, {
-		count: 5,
-		innerProps: { class: "bg-[#3d8091]" }
-	})));
-};
-//#endregion
 //#region src/ui/Flow.tsx
 var _tmpl$$1 = [
 	"<div",
@@ -1769,47 +1610,24 @@ var _tmpl$$1 = [
 	"\" class=\"relative flex h-full w-full rounded-lg border-2 border-gray-600 bg-white bg-size-[30px_30px]\">",
 	"</div>"
 ];
-var _tmpl$2$1 = [
-	"<div",
-	" class=\"relative flex flex-1 items-center justify-center\">",
-	"</div>"
-];
 /**
 * Root Flow component wrapping the {@linkcode FlowChart} inside the flow context
 * provider.
 *
-* @template | {@linkcode NodeData} `D` - Custom node data dictionary type extending
-*   {@linkcode NodeData}.
+* @template | Type {@linkcode NodeData} `D` - Custom node data dictionary type
+*   extending type {@linkcode NodeData}.
 *
 * @param props - Flow chart configuration and callbacks of type
 *   {@linkcode FlowProps}.
 *
 * @returns The rendered Solid component.
 *
-* @see {@linkcode Provider}, {@linkcode FlowChart}
+* @see {@linkcode Provider}
 */
 var Flow = (props) => {
-	const [isMounted, setIsMounted] = createSignal(false);
-	onMount(() => setTimeout(() => setIsMounted(true), props.delay));
-	return ssr(_tmpl$$1, ssrHydrationKey(), ssrStyleProperty("background-image:", "radial-gradient(circle, #b8b8b8bf 1px, rgba(0, 0, 0, 0) 1px)"), escape(createComponent(Show, {
-		get when() {
-			return isMounted();
-		},
-		keyed: true,
-		get fallback() {
-			return ssr(_tmpl$2$1, ssrHydrationKey(), escape(createComponent(LoadingFallback, {
-				message: "Chart is loading...",
-				interval: 35,
-				rewind: true,
-				rewindDelay: 1e3
-			})));
-		},
-		get children() {
-			return createComponent(Provider, { get children() {
-				return createComponent(FlowChart, props);
-			} });
-		}
-	})));
+	return ssr(_tmpl$$1, ssrHydrationKey(), ssrStyleProperty("background-image:", "radial-gradient(circle, #b8b8b8bf 1px, rgba(0, 0, 0, 0) 1px)"), escape(createComponent(Provider, { get children() {
+		return createComponent(FlowChart, props);
+	} })));
 };
 //#endregion
 //#region src/ui/globals/directives/clickOutside.ts
@@ -2045,7 +1863,11 @@ var EditPanel = (props) => {
 		get when() {
 			return hooks.editing();
 		},
-		children: (node) => ssr(_tmpl$, ssrHydrationKey(), `${escape(cn(`w-80 cursor-default rounded-2xl border border-gray-200 bg-white/95 p-4 shadow-xl backdrop-blur-md transition-all ${props.class ?? ""}`) || "", true)} ${escape(ssrClassList(classList()) || "", true)}`, ssrStyle(props.style), escape(createComponent(Show, {
+		children: (node) => ssr(_tmpl$, ssrHydrationKey(), `${escape(cn(`w-80 cursor-default rounded-2xl border border-gray-200 bg-white/95 p-4 shadow-xl backdrop-blur-md transition-all ${props.class ?? ""}`) || "", true)} ${escape(ssrClassList({
+			...classList(),
+			"pointer-events-none! -z-10": !hooks.editing(),
+			"pointer-events-all! z-50": !!hooks.editing()
+		}) || "", true)}`, ssrStyle(props.style), escape(createComponent(Show, {
 			get when() {
 				return props.header;
 			},

package/lib/ui/Flow.d.ts

@@ -5,15 +5,15 @@ import { FlowProps } from './components/FlowChart.types';
  * Root Flow component wrapping the {@linkcode FlowChart} inside the flow context
  * provider.
  *
- * @template | {@linkcode NodeData} `D` - Custom node data dictionary type extending
- *   {@linkcode NodeData}.
+ * @template | Type {@linkcode NodeData} `D` - Custom node data dictionary type
+ *   extending type {@linkcode NodeData}.
  *
  * @param props - Flow chart configuration and callbacks of type
  *   {@linkcode FlowProps}.
  *
  * @returns The rendered Solid component.
  *
- * @see {@linkcode Provider}, {@linkcode FlowChart}
+ * @see {@linkcode Provider}
  */
 export declare const Flow: <D extends NodeData = NodeData>(props: FlowProps<D>) => JSX.Element;
 //# sourceMappingURL=Flow.d.ts.map