@bemedev/mind-flow 1.2.0 → 1.4.0

package/lib/server.es.js

@@ -272,6 +272,15 @@ var CLASSES = [
 ];
 //#endregion
 //#region src/helpers/clamp.ts
+/**
+* Restricts a number to be within the specified minimum and maximum bounds.
+*
+* @param value - The numerical value to clamp.
+* @param min - The lower boundary limit.
+* @param max - The upper boundary limit.
+*
+* @returns The clamped numerical value between `min` and `max`.
+*/
 var clamp = (value, min, max) => {
 	return Math.min(Math.max(value, min), max);
 };
@@ -1005,13 +1014,6 @@ var _tmpl$2$5 = [
 *
 * @returns Offset distance in pixels for bezier curvature.
 */
-/**
-* Computes bezier curve control point offset based on horizontal distance.
-*
-* @param value - Absolute horizontal delta between start and end points.
-*
-* @returns Offset distance in pixels for bezier curvature.
-*/
 var calculateOffset = (value) => value * 100 / 200;
 /**
 * Generates an SVG cubic bezier path `d` string between coordinates `(x0, y0)` and
@@ -1132,12 +1134,14 @@ var _tmpl$2$4 = [
 	"<!--/--><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\" class=\"pointer-events-none absolute top-0 z-10 flex cursor-default flex-col\" style=\"",
-	"\"><div class=\"cursor-default rounded-full bg-[#e38b29] shadow-md\" style=\"",
-	"\"></div></div><div id=\"outputs\" class=\"pointer-events-none absolute top-0 z-10 flex flex-col\" style=\"",
-	"\"><div class=\"cursor-crosshair rounded-full bg-[#e38b29] shadow-md\" style=\"",
+	"\"><div data-handle-type=\"input\"",
+	" 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 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\"><!--$-->",
 	"<!--/--><!--$-->",
@@ -1194,7 +1198,7 @@ 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" : ""} 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$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, {
 		get when() {
 			return hasParent();
 		},
@@ -1206,7 +1210,7 @@ var NodeComponent = (props) => {
 			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;
 				},
@@ -1237,26 +1241,57 @@ var NodeComponent = (props) => {
 				return props.children;
 			} }, () => node().data));
 		}
-	})), ssrStyleProperty("left:", `-${escape(18, true)}px`), 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`), 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\">",
+	" class=\"",
+	"\">",
 	"</div>"
 ];
 var _tmpl$2$3 = [
 	"<div",
-	" class=\"absolute top-4 right-4 z-50\">",
-	"</div>"
-];
-var _tmpl$3$1 = [
-	"<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$$7, ssrHydrationKey(), `${escape(cn(props.class) || "", true)} ${exists ? "z-50" : ""}`, escape(createComponent(Children, {})))
+	});
+};
+/**
 * Overlay container rendering custom panel slots positioned around the flowchart
 * canvas.
 *
@@ -1265,29 +1300,22 @@ 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$3, 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
@@ -1500,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();
@@ -1513,7 +1541,59 @@ var FlowChart = (props) => {
 			}
 		});
 	});
-	return ssr(_tmpl$$5, ssrHydrationKey(), ssrStyleProperty("cursor:", hasNewEdge() ? "inherit" : "crosshair"), escape(createComponent(NodesBoard, {
+	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
+			}
+		});
+		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:", fromSignal() ? "inherit" : "crosshair"), escape(createComponent(NodesBoard, {
 		get panels() {
 			return props.panels;
 		},
@@ -1523,19 +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.
@@ -2007,7 +2074,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/components/EdgeComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EdgeComponent.d.ts","sourceRoot":"","sources":["../../../src/ui/components/EdgeComponent.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAQ,MAAM,UAAU,CAAC;AAM3C,0EAA0E;AAC1E,KAAK,KAAK,GAAG;IACX,qCAAqC;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,gEAAgE;IAChE,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAkCF;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa,EAAE,SAAS,CAAC,KAAK,CAwE1C,CAAC"}
+{"version":3,"file":"EdgeComponent.d.ts","sourceRoot":"","sources":["../../../src/ui/components/EdgeComponent.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAQ,MAAM,UAAU,CAAC;AAM3C,0EAA0E;AAC1E,KAAK,KAAK,GAAG;IACX,qCAAqC;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,gEAAgE;IAChE,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AA2BF;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa,EAAE,SAAS,CAAC,KAAK,CAwE1C,CAAC"}

package/lib/ui/components/EditPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditPanel.d.ts","sourceRoot":"","sources":["../../../src/ui/components/EditPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAQ,MAAM,UAAU,CAAC;AAE1C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAK/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,QAAQ,GAAG,QAAQ,EACrD,OAAO,cAAc,CAAC,CAAC,CAAC,KACvB,GAAG,CAAC,OA+DN,CAAC"}
+{"version":3,"file":"EditPanel.d.ts","sourceRoot":"","sources":["../../../src/ui/components/EditPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAQ,MAAM,UAAU,CAAC;AAE1C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAK/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,QAAQ,GAAG,QAAQ,EACrD,OAAO,cAAc,CAAC,CAAC,CAAC,KACvB,GAAG,CAAC,OAoEN,CAAC"}

package/lib/ui/components/FlowChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FlowChart.d.ts","sourceRoot":"","sources":["../../../src/ui/components/FlowChart.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,GAAG,EAAsB,MAAM,UAAU,CAAC;AAGxD,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAG1E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAGnD,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC;AAIpC;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,QAAQ,GAAG,QAAQ,EACrD,OAAO,SAAS,CAAC,CAAC,CAAC,KAClB,GAAG,CAAC,OAuCN,CAAC"}
+{"version":3,"file":"FlowChart.d.ts","sourceRoot":"","sources":["../../../src/ui/components/FlowChart.tsx"],"names":[],"mappings":"AACA,OAAO,EAAgB,KAAK,GAAG,EAAsB,MAAM,UAAU,CAAC;AAGtE,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAG1E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAGnD,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC;AAIpC;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,QAAQ,GAAG,QAAQ,EACrD,OAAO,SAAS,CAAC,CAAC,CAAC,KAClB,GAAG,CAAC,OAuGN,CAAC"}

package/lib/ui/components/NodeComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeComponent.d.ts","sourceRoot":"","sources":["../../../src/ui/components/NodeComponent.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAO,KAAK,GAAG,EAAQ,MAAM,UAAU,CAAC;AAQ/D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAK/D,uEAAuE;AACvE,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ,IAAI;IAC9D,qCAAqC;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,iEAAiE;IACjE,QAAQ,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,QAAQ,GAAG,QAAQ,EACzD,OAAO,kBAAkB,CAAC,CAAC,CAAC,KAC3B,GAAG,CAAC,OAwNN,CAAC"}
+{"version":3,"file":"NodeComponent.d.ts","sourceRoot":"","sources":["../../../src/ui/components/NodeComponent.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAO,KAAK,GAAG,EAAQ,MAAM,UAAU,CAAC;AAQ/D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAK/D,uEAAuE;AACvE,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ,IAAI;IAC9D,qCAAqC;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,iEAAiE;IACjE,QAAQ,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,QAAQ,GAAG,QAAQ,EACzD,OAAO,kBAAkB,CAAC,CAAC,CAAC,KAC3B,GAAG,CAAC,OA4NN,CAAC"}

package/lib/ui/components/Panels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Panels.d.ts","sourceRoot":"","sources":["../../../src/ui/components/Panels.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,UAAU,CAAC;AAEhD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAEpD;;;;;;;GAOG;AACH,eAAO,MAAM,MAAM,EAAE,SAAS,CAAC,UAAU,CAkBxC,CAAC"}
+{"version":3,"file":"Panels.d.ts","sourceRoot":"","sources":["../../../src/ui/components/Panels.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,UAAU,CAAC;AAGhD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAiCpD;;;;;;;GAOG;AACH,eAAO,MAAM,MAAM,EAAE,SAAS,CAAC,UAAU,CAQxC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bemedev/mind-flow",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "Flow Chart UI library for Solid.js applications",
   "keywords": [
     "diagram",
@@ -65,13 +65,13 @@
     "@bemedev/app": "^2.5.0",
     "@bemedev/app-cli": "^2.5.0",
     "@bemedev/app-solidjs": "^2.5.1",
-    "@bemedev/dev-utils": "^1.2.0",
+    "@bemedev/dev-utils": "^1.3.1",
     "@rollup/plugin-babel": "^7.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@size-limit/file": "^13.0.3",
     "@tailwindcss/cli": "^4.3.3",
     "@tailwindcss/vite": "^4.3.3",
-    "@types/node": "^26.3.0",
+    "@types/node": "^26.4.0",
     "@vitest/coverage-v8": "^4.1.11",
     "glob": "^13.0.6",
     "globals": "^17.11.0",
@@ -81,7 +81,7 @@
     "oxlint": "^1.80.0",
     "pretty-quick": "^4.2.2",
     "rimraf": "^6.1.3",
-    "rolldown": "^1.2.5",
+    "rolldown": "^1.2.6",
     "rollup-preset-solid": "^3.0.0",
     "size-limit": "^13.0.3",
     "solid-js": "^1.9.15",
@@ -113,7 +113,8 @@
     "node": ">=22"
   },
   "scripts": {
-    "build": "pnpm rm:lib && pnpm run build:server && pnpm run build:client && pnpm run build:css",
+    "build": "pnpm rm:lib && pnpm run build:dev",
+    "build:dev": "pnpm run build:server && pnpm run build:client && pnpm run build:css",
     "build:client": "vite build",
     "build:server": "vite build --mode server",
     "build:css": "pnpx @tailwindcss/cli -i ./input.css -o ../lib/output.css --minify --cwd ./src",

package/src/helpers/clamp.ts

@@ -1,3 +1,12 @@
+/**
+ * Restricts a number to be within the specified minimum and maximum bounds.
+ *
+ * @param value - The numerical value to clamp.
+ * @param min - The lower boundary limit.
+ * @param max - The upper boundary limit.
+ *
+ * @returns The clamped numerical value between `min` and `max`.
+ */
 export const clamp = (value: number, min: number, max: number) => {
   return Math.min(Math.max(value, min), max);
 };

package/src/ui/components/EdgeComponent.tsx

@@ -14,13 +14,6 @@ type Props = {
   isNew?: boolean;
 };
 
-/**
- * Computes bezier curve control point offset based on horizontal distance.
- *
- * @param value - Absolute horizontal delta between start and end points.
- *
- * @returns Offset distance in pixels for bezier curvature.
- */
 /**
  * Computes bezier curve control point offset based on horizontal distance.
  *

package/src/ui/components/EditPanel.tsx

@@ -25,6 +25,7 @@ export const EditPanel = <D extends NodeData = NodeData>(
   props: EditPanelProps<D>,
 ): JSX.Element => {
   void clickOutside;
+  // const editing
   const hooks = useHook<D>(props.timeout);
   const classList = () =>
     props.classList instanceof Function ? props.classList(hooks) : props.classList;
@@ -36,7 +37,11 @@ export const EditPanel = <D extends NodeData = NodeData>(
           class={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 ?? ''}`,
           )}
-          classList={classList()}
+          classList={{
+            ...classList(),
+            'pointer-events-none! -z-10': !hooks.editing(),
+            'pointer-events-all! z-50': !!hooks.editing(),
+          }}
           style={props.style}
           onMouseDown={e => e.stopPropagation()}
           use:clickOutside={hooks.close}

package/src/ui/components/FlowChart.tsx

@@ -1,5 +1,5 @@
 import { createState } from '@bemedev/app-solidjs';
-import { type JSX, onCleanup, onMount } from 'solid-js';
+import { createEffect, type JSX, onCleanup, onMount } from 'solid-js';
 
 import { DEFAULT_NODES } from '#services/main.machine.data';
 import type { NodeData, NodeProps } from '#services/main.machine.typings';
@@ -32,7 +32,9 @@ export const FlowChart = <D extends NodeData = NodeData>(
   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(() => {
@@ -47,21 +49,83 @@ export const FlowChart = <D extends NodeData = NodeData>(
     });
   });
 
+  let added = false;
+
+  // Track the currently enlarged handle during edge drag
+  let activeHandle: HTMLElement | null = null;
+
+  const clearActiveHandle = () => {
+    if (activeHandle) {
+      activeHandle.classList.remove('scale-150');
+      activeHandle = null;
+      added = false;
+    }
+  };
+
+  const handlePointerMove = (e: MouseEvent | PointerEvent) => {
+    service.send({ type: 'MOVE_NEW_EDGE', payload: { x: e.clientX, y: e.clientY } });
+
+    const elements = document.elementsFromPoint(e.clientX, e.clientY);
+    const inputHandle = elements
+      .map(el => el.closest<HTMLElement>('.rounded-full[data-handle-type="input"]'))
+      .find((handle): handle is HTMLElement =>
+        Boolean(handle && handle.id !== 'inputs'),
+      );
+
+    // If cursor moved away from previous handle, reset its scale
+    if (activeHandle && activeHandle !== inputHandle) {
+      clearActiveHandle();
+    }
+
+    // If cursor entered a valid target handle, enlarge it
+    if (inputHandle) {
+      if (activeHandle !== inputHandle) {
+        inputHandle.classList.add('scale-150');
+        activeHandle = inputHandle;
+        added = true;
+      }
+    }
+  };
+
+  const createHandlePointerUp = (from: string) => (e: MouseEvent | PointerEvent) => {
+    const elements = document.elementsFromPoint(e.clientX, e.clientY);
+    const inputHandle = elements
+      .map(el => el.closest<HTMLElement>('.rounded-full[data-handle-type="input"]'))
+      .find((handle): handle is HTMLElement =>
+        Boolean(handle && handle.id !== 'inputs'),
+      );
+    const to = inputHandle?.getAttribute('data-node-id');
+
+    if (inputHandle && to) {
+      service.send({ type: 'ADD_EDGE', payload: { from, to } });
+    }
+
+    // Cleanup on release
+    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(() => {
+      // Cleanup on effect disposal
+      clearActiveHandle();
+      window.removeEventListener('pointermove', handlePointerMove);
+      window.removeEventListener('pointerup', handlePointerUp);
+    });
+  });
+
   return (
-    <div
-      class='relative h-full w-full'
-      onMouseUp={() => service.send('CLEAR_NEW_EDGE')}
-      onMouseMove={({ clientX, clientY }) => {
-        if (hasNewEdge())
-          service.send({
-            type: 'MOVE_NEW_EDGE',
-            payload: { x: clientX, y: clientY },
-          });
-      }}
-    >
+    <div class='relative h-full w-full'>
       <div
         class='h-full w-full'
-        style={{ cursor: hasNewEdge() ? 'inherit' : 'crosshair' }}
+        style={{ cursor: fromSignal() ? 'inherit' : 'crosshair' }}
       >
         <NodesBoard panels={props.panels} component={props.component} />
       </div>

package/src/ui/components/NodeComponent.tsx

@@ -78,7 +78,7 @@ export const NodeComponent = <D extends NodeData = NodeData>(
       }}
 
       style={{ top: `${node().y}px`, left: `${node().x}px` }}
-      class='min-w-48'
+      class='group min-w-48'
       use:draggable={{ skipTransform: true }}
       id={props.id}
 
@@ -204,7 +204,12 @@ export const NodeComponent = <D extends NodeData = NodeData>(
         style={{ left: `-${HANDLE_CONTAINER_OFFSET_X}px` }}
       >
         <div
-          class='cursor-default rounded-full bg-[#e38b29] shadow-md'
+          data-handle-type='input'
+          data-node-id={props.id}
+          onMouseDown={event => event.stopPropagation()}
+          onPointerDown={e => e.stopPropagation()}
+
+          class='cursor-default rounded-full bg-[#e38b29] shadow-md transition-transform duration-150 ease-in-out hover:scale-150'
 
           style={{
             width: `${HANDLE_SIZE}px`,
@@ -213,43 +218,42 @@ export const NodeComponent = <D extends NodeData = NodeData>(
             'pointer-events': 'all',
           }}
 
-          onMouseDown={event => {
-            event.stopPropagation();
-          }}
-
-          onPointerDown={e => e.stopPropagation()}
-
           onMouseUp={event => {
             event.stopPropagation();
             const from = newEdge()?.from;
 
-            if (from) {
+            if (from && from !== props.id) {
               service.send({ type: 'ADD_EDGE', payload: { from, to: props.id } });
-              // service.send('CLEAR_NEW_EDGE');
-            } else service.send('CLEAR_NEW_EDGE');
+            }
+            service.send('CLEAR_NEW_EDGE');
           }}
         ></div>
       </div>
       <div
         id='outputs'
-        class='pointer-events-none absolute top-0 z-10 flex flex-col'
+
         style={{ right: `-${HANDLE_CONTAINER_OFFSET_X}px` }}
+
+        class='pointer-events-none absolute top-0 z-10 flex flex-col'
       >
         <div
-          class='cursor-crosshair rounded-full bg-[#e38b29] shadow-md'
-
+          data-handle-type='output'
+          data-node-id={props.id}
+          class='cursor-crosshair rounded-full bg-[#e38b29] shadow-md transition-transform duration-150 ease-in-out hover:scale-150'
           style={{
             width: `${HANDLE_SIZE}px`,
             height: `${HANDLE_SIZE}px`,
             'margin-top': `${HANDLE_MARGIN_TOP}px`,
             'pointer-events': 'all',
           }}
-
           onMouseDown={event => {
             event.stopPropagation();
             service.send('DESELECT');
             service.send({ type: 'START_NEW_EDGE', payload: props.id });
           }}
+          onPointerDown={event => {
+            event.stopPropagation();
+          }}
         ></div>
       </div>
     </div>

package/src/ui/components/Panels.tsx

@@ -1,7 +1,40 @@
+import { isDefined } from '@bemedev/app/bemedev';
 import { Show, type Component } from 'solid-js';
 
+import { cn } from '../utils';
 import type { FlowPanels } from './FlowChart.types';
 
+/** Properties for the internal {@linkcode Panel} wrapper component. */
+type PanelProps = {
+  /** Optional component to render inside the panel container. */
+  children?: Component;
+  /** CSS class names for positioning and layout. */
+  class: string;
+};
+
+/**
+ * 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}
+ */
+const Panel: Component<PanelProps> = props => {
+  const exists = isDefined(props.children);
+  return (
+    <Show when={props.children} keyed>
+      {Children => (
+        <div class={cn(props.class)} classList={{ 'z-50': exists }}>
+          <Children />
+        </div>
+      )}
+    </Show>
+  );
+};
+
 /**
  * Overlay container rendering custom panel slots positioned around the flowchart
  * canvas.
@@ -12,20 +45,10 @@ import type { FlowPanels } from './FlowChart.types';
  */
 export const Panels: Component<FlowPanels> = props => {
   return (
-    <>
-      <Show when={props.topLeft} keyed>
-        {Panel => <div class='absolute top-4 left-4 z-50'>{<Panel />}</div>}
-      </Show>
-
-      {/* Top-Right Panel */}
-      <Show when={props.topRight} keyed>
-        {Panel => <div class='absolute top-4 right-4 z-50'>{<Panel />}</div>}
-      </Show>
-
-      {/* Bottom-Left Panel */}
-      <Show when={props.bottomLeft} keyed>
-        {Panel => <div class='absolute bottom-4 left-4 z-50'>{<Panel />}</div>}
-      </Show>
-    </>
+    <div class='pointer-events-none absolute inset-0'>
+      <Panel children={props.topLeft} class='absolute top-4 left-4' />
+      <Panel children={props.topRight} class='absolute top-4 right-4' />
+      <Panel children={props.bottomLeft} class='absolute bottom-4 left-4' />
+    </div>
   );
 };