@bemedev/mind-flow 0.0.1

package/lib/server.es.js

@@ -0,0 +1,1056 @@
+import { createComponent, escape, ssr, ssrAttribute, ssrHydrationKey, ssrStyleProperty } from "solid-js/web";
+import { For, Show, createContext, createEffect, createMemo, createSignal, on, onCleanup, onMount, useContext } from "solid-js";
+import { createMachine, interpret } from "@bemedev/app";
+import { dequal } from "dequal/lite";
+import { produce } from "solid-js/store";
+import { type } from "@bemedev/app/bemedev";
+import { nanoid } from "nanoid";
+import { useState } from "@bemedev/app-solidjs";
+import { DragDropProvider, DragDropSensors, DragOverlay, createDraggable, useDragDropContext } from "@thisbeyond/solid-dnd";
+import { dequal as dequal$1 } from "dequal";
+//#region src/ui/components/classes.ts
+/**
+* List of Tailwind CSS class names used across flowchart UI components to
+* ensure compilation safelist.
+*/
+var CLASSES = [
+	"fill-transparent",
+	"cursor-pointer",
+	"relative",
+	"stroke-[rgba(168,168,168,0.4)]",
+	"stroke-3",
+	"stroke-[rgba(168,168,168,1)]",
+	"stroke-4",
+	"z-100",
+	"stroke-[rgba(168,168,168,0.8)]",
+	"pointer-events-all",
+	"w-[100px]",
+	"h-[100px]",
+	"bg-white",
+	"fill-white",
+	"pointer-events-none",
+	"absolute",
+	"top-0",
+	"w-full",
+	"h-full",
+	"overflow-hidden",
+	"overflow-scroll",
+	"h-[150vh]",
+	"w-[2160px]",
+	"bg-size-[30px_30px]",
+	"flex",
+	"flex-col",
+	"cursor-grab",
+	"rounded-md",
+	"shadow-[1px_1px_11px_-6px_rgba(0,0,0,0.75)]",
+	"select-none",
+	"transition-[border,box-shadow]",
+	"duration-200",
+	"ease-in-out",
+	"hover:shadow-[2px_2px_12px_-6px_rgba(0,0,0,0.75)]",
+	"draggable",
+	"border",
+	"border-[#e38c29]",
+	"z-[100]",
+	"border-[#e6d4be]",
+	"z-[1]",
+	"items-center",
+	"justify-end",
+	"-top-[30px]",
+	"right-0",
+	"transition-all",
+	"space-x-2",
+	"opacity-100",
+	"w-0",
+	"-right-3",
+	"opacity-0",
+	"w-6",
+	"h-6",
+	"fill-[#a11111]",
+	"rounded-full",
+	"size-6",
+	"bg-green-500",
+	"p-0.5",
+	"hover:bg-green-600",
+	"font-bold",
+	"text-center",
+	"overflow-visible",
+	"bg-blue-500",
+	"text-white",
+	"rounded-lg",
+	"hover:bg-blue-600",
+	"justify-center",
+	"p-3",
+	"border-b",
+	"border-[#f0f0f0]",
+	"cursor-default",
+	"z-[-3]",
+	"-left-[18px]",
+	"bg-[#e38b29]",
+	"w-3",
+	"h-3",
+	"my-3",
+	"-right-[18px]",
+	"cursor-crosshair",
+	"mt-3"
+];
+//#endregion
+//#region src/helpers/createContext.ts
+/**
+* Creates a Solid context provider component and a custom hook to consume
+* it.
+*
+* @template T - The type of the context value.
+*
+* @param context - Factory function returning a non-nullable context value
+*   of type `NonNullable<T>`.
+* @param options - Optional context configuration of type
+*   {@linkcode Options}.
+*
+* @returns A tuple containing the Provider component of type
+*   {@linkcode ParentComponent}, the accessor hook, and the Solid context
+*   object.
+*/
+var createContext$1 = (context, options) => {
+	const _context = createContext(context(), options);
+	const Provider = ({ children }) => _context.Provider({
+		value: _context.defaultValue,
+		children
+	});
+	const _useContext = () => useContext(_context);
+	return [
+		Provider,
+		_useContext,
+		_context
+	];
+};
+//#endregion
+//#region src/services/main.typings.ts
+/** Schema definition for 2D coordinates `(x, y)`. */
+var point = type({
+	x: "number",
+	y: "number"
+});
+type(({ optional, use }) => ({
+	input: optional(use(point)),
+	output: use(point)
+}));
+/** Schema definition for edge extremities */
+var extremities = type({
+	from: "string",
+	to: "string"
+});
+/** Schema definition for a serialized flowchart node entity. */
+var nodeJSON = type(({ optional, use }) => ({
+	position: use(point),
+	data: {
+		label: optional("string"),
+		content: "string"
+	},
+	input: "boolean"
+}));
+/** Schema definition for a serialized flowchart edge entity. */
+var edgeJSON = extremities;
+type(({ optional, use }) => ({
+	width: "number",
+	height: "number",
+	id: "string",
+	output: use(point),
+	input: optional(use(point))
+}));
+type({
+	x0: "number",
+	y0: "number",
+	x1: "number",
+	y1: "number"
+});
+//#endregion
+//#region src/services/main.machine.ts
+/**
+* Constructs a unique edge identifier string from source and destination
+* node IDs.
+*
+* @param out - The source node ID string.
+* @param _in - The destination node ID string.
+*
+* @returns Formatted edge identifier string.
+*/
+var buildEdgeId = (out, _in) => {
+	return `edge = ${out} => ${_in}`;
+};
+/**
+* Constructs a formatted node identifier string from a generated ID.
+*
+* @param generated - The generated unique ID string or `null`/`undefined`.
+*
+* @returns Formatted node identifier string.
+*/
+var buildNodeID = (generated) => {
+	return `node-${generated}`;
+};
+/**
+* State machine managing flowchart state transitions, nodes, edges,
+* selection, and layout actions.
+*/
+var machine = createMachine({
+	initial: "idle",
+	states: {
+		idle: { on: {
+			CONFIGURE: {
+				actions: ["configure"],
+				target: "/working"
+			},
+			CONFIGURE_EMPTY: "/working"
+		} },
+		construction: { always: {
+			actions: ["buildUI"],
+			target: "/working"
+		} },
+		working: { on: {
+			MOVE: {
+				actions: ["moveNode", "buildUI"],
+				target: "/construction"
+			},
+			MOVE_IMMEDIATE: { actions: [{
+				name: "buildImmediateUI",
+				description: "Must be in the ui"
+			}] },
+			UPDATE_UI: "/construction",
+			ADD_CHILD: {
+				actions: [
+					"generateID",
+					{
+						name: "placeChild",
+						description: "Must be in the ui"
+					},
+					"linkChild"
+				],
+				target: "/construction"
+			},
+			ADD_PARENT: {
+				actions: [
+					"generateID",
+					{
+						name: "placeParent",
+						description: "Must be in the ui"
+					},
+					"selectParent"
+				],
+				target: "/construction"
+			},
+			ADD_SIBLING: {
+				actions: [
+					"generateID",
+					{
+						name: "placeSibling",
+						description: "Must be in the ui"
+					},
+					"linkSibling"
+				],
+				target: "/construction"
+			},
+			ADD_EDGE: {
+				actions: ["addEdge"],
+				target: "/construction"
+			},
+			DELETE: {
+				actions: ["delete"],
+				target: "/construction"
+			},
+			SELECT: { actions: ["select"] },
+			DESELECT: { actions: ["deselect"] }
+		} }
+	}
+}, {
+	eventsMap: type(({ intersection, use, array }) => ({
+		CONFIGURE: {
+			nodes: array(intersection(use(nodeJSON), { id: "string" })),
+			edges: array(intersection(use(edgeJSON), { id: "string" }))
+		},
+		CONFIGURE_EMPTY: "never",
+		MOVE: {
+			id: "string",
+			x: "number",
+			y: "number"
+		},
+		MOVE_IMMEDIATE: {
+			id: "string",
+			x: "number",
+			y: "number"
+		},
+		ADD_CHILD: "string",
+		ADD_PARENT: "never",
+		ADD_SIBLING: "string",
+		DELETE: "string",
+		SELECT: "string",
+		DESELECT: "never",
+		ADD_EDGE: use(extremities)
+	})),
+	pContext: type(({ union }) => ({ generatedId: union("string", "null") })),
+	context: type(({ optional, use, array }) => ({
+		data: optional({
+			nodes: array({
+				...use(nodeJSON),
+				id: "string"
+			}),
+			edges: array({
+				...use(edgeJSON),
+				id: "string"
+			})
+		}),
+		selected: optional("string"),
+		updatingUI: optional("boolean")
+	})),
+	sync: true
+}).provideOptions(({ assign, batch, erase }) => ({ actions: {
+	configure: batch(assign("context.data", () => ({
+		nodes: [],
+		edges: []
+	})), assign("context.data.nodes", { CONFIGURE: ({ payload: { nodes } }) => nodes }), assign("context.data.edges", { CONFIGURE: ({ payload: { edges } }) => edges }), assign("context.updatingUI", () => false), assign("pContext.generatedId", () => null)),
+	generateID: assign("pContext.generatedId", () => nanoid()),
+	linkChild: batch(assign("context.data.edges", { ADD_CHILD: ({ context, pContext, payload }) => {
+		const data = context.data;
+		const from = payload;
+		const generatedId = pContext?.generatedId;
+		const to = buildNodeID(generatedId);
+		const id = buildEdgeId(from, to);
+		return [...data?.edges ?? [], {
+			id,
+			from,
+			to
+		}];
+	} }), assign("context.selected", ({ pContext: { generatedId } }) => buildNodeID(generatedId))),
+	linkSibling: batch(assign("context.data.edges", { ADD_SIBLING: ({ pContext, payload, context }) => {
+		const edges = context.data?.edges;
+		const generatedId = pContext?.generatedId;
+		const out = [...edges ?? []];
+		const from = edges?.find(({ to }) => to === payload)?.from;
+		if (!from) return out;
+		const to = buildNodeID(generatedId);
+		const id = buildEdgeId(from, to);
+		out.push({
+			from,
+			to,
+			id
+		});
+		return out;
+	} }), assign("context.selected", ({ pContext: { generatedId } }) => buildNodeID(generatedId))),
+	selectParent: assign("context.selected", ({ pContext: { generatedId } }) => buildNodeID(generatedId)),
+	moveNode: assign("context.data.nodes", { MOVE: ({ context: { data }, payload }) => {
+		const { id, x, y } = payload;
+		if (!id) return data?.nodes ?? [];
+		return data?.nodes?.map((d) => {
+			if (d.id === id) return {
+				...d,
+				position: {
+					x,
+					y
+				}
+			};
+			return d;
+		}) ?? [];
+	} }),
+	select: assign("context.selected", { SELECT: ({ payload }) => payload }),
+	delete: assign(["context.data.nodes", "context.data.edges"], { DELETE: ({ context: { data }, payload }) => {
+		return [data?.nodes?.filter(({ id }) => id !== payload), data?.edges?.filter(({ id, from, to }) => id !== payload && from !== payload && to !== payload)];
+	} }),
+	addEdge: assign("context.data.edges", { ADD_EDGE: ({ context, payload: { from, to } }) => {
+		const edges = context.data?.edges ?? [];
+		const id = buildEdgeId(from, to);
+		if (edges.some((e) => e.id === id)) return edges;
+		return [...edges, {
+			id,
+			from,
+			to
+		}];
+	} }),
+	deselect: erase("context.selected")
+} }));
+/** X-axis center offset in pixels from the node container edge. */
+var HANDLE_CENTER_X_OFFSET = 10.5;
+/** Default 2D offset coordinates for input connection handles. */
+var DEFAULT_INPUT_OFFSET = {
+	x: -10.5,
+	y: 18
+};
+/**
+* Computes default output handle offset coordinates given a node width.
+*
+* @param width - Node width in pixels, defaults to `0`.
+*
+* @returns 2D offset coordinates for the output handle.
+*/
+var getDefaultOutputOffset = (width = 0) => ({
+	x: width + HANDLE_CENTER_X_OFFSET,
+	y: 18
+});
+/**
+* Boundary padding constraints for node dragging and positioning within
+* the viewport.
+*/
+var BOUNDS_CONSTRAINTS = {
+	horizontal: 20,
+	vertical: 35
+};
+/** Default node items provided when no initial configuration is given. */
+var DEFAULT_NODES = [{
+	id: "node-0",
+	data: {
+		content: "Some text",
+		label: "Root node"
+	},
+	input: false,
+	position: {
+		x: 350,
+		y: 100
+	}
+}];
+//#endregion
+//#region src/ui/components/FlowChart.context.ts
+/**
+* Shared state machine interpreter service instance for flowchart state
+* management.
+*/
+var service = interpret(machine, {
+	context: {},
+	pContext: { generatedId: null }
+});
+/**
+* Solid Context Provider component and hook for accessing flowchart board
+* state, services, and zoom.
+*/
+var [Provider, useFlow] = createContext$1(() => {
+	const zoom = createSignal(1);
+	const newEdge = createSignal();
+	const [boardRef, setBoardRef] = createSignal();
+	const [dimensions, setDimensions] = createSignal({}, { equals: dequal });
+	const getBoardPoint = (clientX, clientY) => {
+		const el = boardRef();
+		if (!el) return {
+			x: clientX,
+			y: clientY
+		};
+		const rect = el.getBoundingClientRect();
+		const currentZoom = zoom[0]();
+		return {
+			x: (clientX - rect.left) / currentZoom,
+			y: (clientY - rect.top) / currentZoom
+		};
+	};
+	const [edgesPositions, setEdgesPositions] = createSignal({}, { equals: false });
+	const clampPosition = (x, y, nodeWidth = 192, nodeHeight = 50) => {
+		const container = boardRef()?.parentElement;
+		if (!container) return {
+			x,
+			y
+		};
+		const currentZoom = zoom[0]();
+		const minX = container.scrollLeft / currentZoom + BOUNDS_CONSTRAINTS.horizontal;
+		const maxX = Math.max(minX, (container.scrollLeft + container.clientWidth) / currentZoom - BOUNDS_CONSTRAINTS.horizontal - nodeWidth);
+		const minY = container.scrollTop / currentZoom + BOUNDS_CONSTRAINTS.vertical;
+		const maxY = Math.max(minY, (container.scrollTop + container.clientHeight) / currentZoom - BOUNDS_CONSTRAINTS.vertical - nodeHeight);
+		return {
+			x: Math.min(Math.max(x, minX), maxX),
+			y: Math.min(Math.max(y, minY), maxY)
+		};
+	};
+	service.addOptions(({ voidAction, batch, assign }) => ({ actions: {
+		placeChild: assign("context.data.nodes", { ADD_CHILD: ({ payload, context: { data }, pContext: { generatedId } }) => {
+			const nodes = data?.nodes ?? [];
+			if (!payload) return nodes;
+			const parentNode = nodes.find((node) => node.id === payload);
+			if (!parentNode) return nodes;
+			const id = `node-${generatedId}`;
+			const width = dimensions()[payload]?.width ?? 0;
+			const height = dimensions()[payload]?.height ?? 0;
+			const initialX = parentNode.position.x + width + 100;
+			const initialY = parentNode.position.y;
+			const position = clampPosition(initialX, initialY, width, height);
+			return [...nodes, {
+				id,
+				data: { content: "<Nouveau nœud>" },
+				input: true,
+				position
+			}];
+		} }),
+		placeParent: assign("context.data.nodes", { ADD_PARENT: ({ context: { data }, pContext: { generatedId } }) => {
+			const nodes = data?.nodes ?? [];
+			const id = `node-${generatedId}`;
+			const container = boardRef()?.parentElement;
+			const scrollLeft = container?.scrollLeft ?? 0;
+			const scrollTop = container?.scrollTop ?? 0;
+			const width = container?.clientWidth ?? 0;
+			const height = container?.clientHeight ?? 0;
+			const currentZoom = zoom[0]();
+			const x = (scrollLeft + width / 2) / currentZoom;
+			const y = (scrollTop + height / 2) / currentZoom;
+			return [...nodes, {
+				id,
+				data: { content: "<Nouveau nœud>" },
+				input: false,
+				position: {
+					x,
+					y
+				}
+			}];
+		} }),
+		placeSibling: assign("context.data.nodes", { ADD_SIBLING: ({ payload, context: { data }, pContext: { generatedId } }) => {
+			const edges = data?.edges ?? [];
+			const nodes = data?.nodes ?? [];
+			const parentID = edges.find((edge) => edge.to === payload)?.from;
+			if (!parentID) return nodes;
+			const parentNode = nodes.find((node) => node.id === parentID);
+			if (!parentNode) return nodes;
+			const id = `node-${generatedId}`;
+			const width = dimensions()[parentID]?.width ?? 0;
+			const height = dimensions()[parentID]?.height ?? 0;
+			const initialX = parentNode.position.x + width + 100;
+			const initialY = parentNode.position.y + 100;
+			const position = clampPosition(initialX, initialY, width, height);
+			return [...nodes, {
+				id,
+				data: { content: "<Nouveau nœud>" },
+				input: true,
+				position
+			}];
+		} }),
+		buildUI: batch(voidAction(({ context: { data } }) => {
+			const edges = data?.edges ?? [];
+			setEdgesPositions((data) => {
+				const array = Object.entries({ ...data }).filter(([id]) => {
+					return edges?.some((edge) => edge.id === id);
+				});
+				return Object.fromEntries(array);
+			});
+		}), voidAction({
+			else: ({ context: { data } }) => {
+				const edges = data?.edges ?? [];
+				setEdgesPositions(produce((next) => {
+					edges?.forEach(({ from, id, to }) => {
+						const output = dimensions()[from]?.output;
+						const input = dimensions()[to]?.input;
+						if (output && input) next[id] = {
+							x0: output.x,
+							y0: output.y,
+							x1: input.x,
+							y1: input.y
+						};
+					});
+				}));
+			},
+			MOVE: ({ context: { data }, payload }) => {
+				const edges = data?.edges ?? [];
+				setEdgesPositions(produce((next) => {
+					edges?.forEach(({ from, to, id }) => {
+						if (from === payload.id) {
+							const offset = dimensions()[payload.id]?.outputOffset ?? getDefaultOutputOffset(dimensions()[payload.id]?.width);
+							const x0 = payload.x + offset.x;
+							const y0 = payload.y + offset.y;
+							next[id] = {
+								...next[id],
+								x0,
+								y0
+							};
+							setDimensions(produce((data) => {
+								if (data[payload.id]) data[payload.id] = {
+									...data[payload.id],
+									output: {
+										x: x0,
+										y: y0
+									}
+								};
+							}));
+						}
+						if (to === payload.id) {
+							const offset = dimensions()[payload.id]?.inputOffset ?? DEFAULT_INPUT_OFFSET;
+							const x1 = payload.x + offset.x;
+							const y1 = payload.y + offset.y;
+							next[id] = {
+								...next[id],
+								x1,
+								y1
+							};
+							setDimensions(produce((data) => {
+								if (data[payload.id]) data[payload.id] = {
+									...data[payload.id],
+									input: {
+										x: x1,
+										y: y1
+									}
+								};
+							}));
+						}
+					});
+				}));
+			}
+		}), assign("context.updatingUI", () => true)),
+		buildImmediateUI: voidAction({ MOVE_IMMEDIATE: ({ context: { data }, payload }) => {
+			const edges = data?.edges ?? [];
+			setEdgesPositions(produce((next) => {
+				edges?.forEach(({ from, to, id }) => {
+					if (from === payload.id) {
+						const offset = dimensions()[payload.id]?.outputOffset ?? getDefaultOutputOffset(dimensions()[payload.id]?.width);
+						const x0 = payload.x + offset.x;
+						const y0 = payload.y + offset.y;
+						next[id] = {
+							...next[id],
+							x0,
+							y0
+						};
+						setDimensions(produce((data) => {
+							if (data[payload.id]) data[payload.id] = {
+								...data[payload.id],
+								output: {
+									x: x0,
+									y: y0
+								}
+							};
+						}));
+					}
+					if (to === payload.id) {
+						const offset = dimensions()[payload.id]?.inputOffset ?? DEFAULT_INPUT_OFFSET;
+						const x1 = payload.x + offset.x;
+						const y1 = payload.y + offset.y;
+						next[id] = {
+							...next[id],
+							x1,
+							y1
+						};
+						setDimensions(produce((data) => {
+							if (data[payload.id]) data[payload.id] = {
+								...data[payload.id],
+								input: {
+									x: x1,
+									y: y1
+								}
+							};
+						}));
+					}
+				});
+			}));
+		} })
+	} }));
+	service.start();
+	return {
+		dimensions: [dimensions, setDimensions],
+		newEdge,
+		board: [boardRef, setBoardRef],
+		getBoardPoint,
+		edgesPositions: [edgesPositions, setEdgesPositions],
+		service,
+		zoom
+	};
+}, { name: "FlowContext" });
+//#endregion
+//#region src/ui/components/Bounds.tsx
+/**
+* Drag boundary transformer component that clamps draggable nodes within
+* container scroll bounds.
+*
+* @returns `null` as this component performs side-effect transformer
+*   registrations only.
+*/
+var DragBounds = () => {
+	const { board: [ref], zoom: [zoom] } = useFlow();
+	const [state, { addTransformer, removeTransformer, onDragStart, onDragEnd }] = useDragDropContext();
+	const transformer = {
+		id: "clamp-to-container",
+		order: 100,
+		callback: (transform) => {
+			const container = ref()?.parentElement;
+			const activeDraggable = state.active.draggable;
+			if (!container || !activeDraggable) return transform;
+			const draggableLayout = activeDraggable.layout;
+			const containerRect = container.getBoundingClientRect();
+			const innerLeft = containerRect.left + container.clientLeft;
+			const innerTop = containerRect.top + container.clientTop;
+			const innerRight = innerLeft + container.clientWidth;
+			const innerBottom = innerTop + container.clientHeight;
+			const currentZoom = zoom();
+			const minX = innerLeft - draggableLayout.left + BOUNDS_CONSTRAINTS.horizontal * currentZoom;
+			const maxX = Math.max(minX, innerRight - draggableLayout.right - BOUNDS_CONSTRAINTS.horizontal * currentZoom);
+			const minY = innerTop - draggableLayout.top + BOUNDS_CONSTRAINTS.vertical * currentZoom;
+			const maxY = Math.max(minY, innerBottom - draggableLayout.bottom - BOUNDS_CONSTRAINTS.vertical * currentZoom);
+			return {
+				x: Math.min(Math.max(transform.x, minX), maxX),
+				y: Math.min(Math.max(transform.y, minY), maxY)
+			};
+		}
+	};
+	onDragStart(({ draggable }) => {
+		addTransformer("draggables", draggable.id, transformer);
+	});
+	onDragEnd(({ draggable }) => {
+		removeTransformer("draggables", draggable.id, transformer.id);
+	});
+	return null;
+};
+//#endregion
+//#region src/ui/components/EdgeComponent.tsx
+var _tmpl$$4 = [
+	"<path",
+	" class=\"",
+	"\" style=\"",
+	"\"",
+	"></path>"
+];
+var _tmpl$2$1 = [
+	"<g",
+	" cursor=\"pointer\" transform=\"",
+	"\" style=\"",
+	"\"><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\"></path></svg></g>"
+];
+/**
+* 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 `(x1, y1)`.
+*
+* @param vector - Vector coordinates of type {@linkcode Vector}.
+*
+* @returns SVG cubic bezier path string.
+*/
+var draw = ({ x0, y0, x1, y1 }) => {
+	return `M ${x0} ${y0} C ${x0 + calculateOffset(Math.abs(x1 - x0))} ${y0}, ${x1 - calculateOffset(Math.abs(x1 - x0))} ${y1}, ${x1} ${y1}`;
+};
+/**
+* SVG edge component rendering bezier curves and delete interaction
+* handles for node connections.
+*
+* @param props - Edge properties of type {@linkcode Props}.
+*
+* @returns The rendered SVG JSX elements.
+*/
+var EdgeComponent = (props) => {
+	const [middlePoint, setMiddlePoint] = createSignal({
+		x: props.x0 + (props.x1 - props.x0) / 2,
+		y: props.y0 + (props.y1 - props.y0) / 2
+	});
+	const { service } = useFlow();
+	createEffect(() => {
+		const middleX = props.x0 + (props.x1 - props.x0) / 2;
+		const middleY = props.y0 + (props.y1 - props.y0) / 2;
+		setMiddlePoint({
+			x: middleX,
+			y: middleY
+		});
+	});
+	const selected = useState(service, { selector: (s) => s.context.selected === props.id });
+	return [ssr(_tmpl$$4, 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(props), true), false)), createComponent(Show, {
+		get when() {
+			return selected();
+		},
+		get children() {
+			return ssr(_tmpl$2$1, 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$$3 = [
+	"<svg",
+	" class=\"pointer-events-none h-full w-full overflow-visible\"><!--$-->",
+	"<!--/--><!--$-->",
+	"<!--/--></svg>"
+];
+/**
+* SVG board overlay component that renders all active connecting edges and
+* ongoing edge creation previews.
+*
+* @returns The rendered SVG JSX element.
+*/
+var EdgesBoard = () => {
+	const [selected, setSelected] = createSignal();
+	const { newEdge: [newEdge], edgesPositions: [edgesPositions] } = useFlow();
+	const datas = createMemo(() => {
+		return Object.entries(edgesPositions()).map(([id, vector]) => ({
+			id,
+			...vector
+		}));
+	});
+	createEffect(() => {
+		if (selected() && newEdge()) setSelected();
+	});
+	return ssr(_tmpl$$3, ssrHydrationKey(), escape(createComponent(Show, {
+		get when() {
+			return newEdge();
+		},
+		children: (value) => createComponent(EdgeComponent, {
+			id: "__#new-edge#__TEMP",
+			isNew: true,
+			get x0() {
+				return value().x0;
+			},
+			get y0() {
+				return value().y0;
+			},
+			get x1() {
+				return value().x1;
+			},
+			get y1() {
+				return value().y1;
+			}
+		})
+	})), escape(createComponent(For, {
+		get each() {
+			return datas();
+		},
+		children: EdgeComponent
+	})));
+};
+//#endregion
+//#region src/ui/components/NodeComponent.tsx
+var _tmpl$$2 = [
+	"<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 = [
+	"<div",
+	" id=\"outputs\" 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>"
+];
+var _tmpl$3 = [
+	"<div",
+	" class=\"",
+	"\" style=\"",
+	"\"><div class=\"",
+	"\"><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=\"",
+	"\"><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\" style=\"",
+	"\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\"></path></svg></div><!--$-->",
+	"<!--/--><!--$-->",
+	"<!--/--><!--$-->",
+	"<!--/--><div id=\"inputs\" class=\"pointer-events-none absolute top-0 z-10 flex flex-col\" style=\"",
+	"\"><div class=\"cursor-crosshair rounded-full bg-[#e38b29] shadow-md\" style=\"",
+	"\"></div></div></div>"
+];
+var _tmpl$4 = [
+	"<span",
+	" class=\"min-w-max border-b border-[#f0f0f0] p-3 whitespace-nowrap text-red-600 select-none\">",
+	"</span>"
+];
+var _tmpl$5 = [
+	"<div",
+	" class=\"p-3 select-none\">",
+	"</div>"
+];
+/**
+* Interactive flowchart node component supporting dragging, selection,
+* handle connections, and child/sibling creation.
+*
+* @param props - Node rendering properties of type {@linkcode Props}.
+*
+* @returns The rendered Solid component.
+*/
+var NodeComponent = (props) => {
+	const [ref, setRef] = createSignal();
+	const { dimensions: [dimensions, setDimensions], newEdge: [newEdge, setNewEdge], getBoardPoint, service, zoom: [zoom] } = useFlow();
+	const selected = useState(service, { selector: (s) => s.context.selected === props.id });
+	createEffect(() => {
+		ref();
+		zoom();
+	});
+	const hasParent = useState(service, { selector: ({ context: { data } }) => {
+		const edges = data?.edges;
+		if (!edges) return false;
+		return Object.values(edges).some((edge) => edge.to === props.id);
+	} });
+	createDraggable(props.id);
+	return ssr(_tmpl$3, ssrHydrationKey() + ssrAttribute("id", escape(props.id, true), false), `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(props.y, true)}px`) + ssrStyleProperty(";left:", `${escape(props.x, true)}px`), `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$$2, 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.label;
+		},
+		keyed: true,
+		children: (label) => ssr(_tmpl$4, ssrHydrationKey(), escape(label))
+	})), escape(createComponent(Show, {
+		get when() {
+			return props.content;
+		},
+		keyed: true,
+		children: (content) => ssr(_tmpl$5, ssrHydrationKey(), escape(content))
+	})), escape(createComponent(Show, {
+		get when() {
+			return props.input || hasParent();
+		},
+		get children() {
+			return ssr(_tmpl$2, ssrHydrationKey(), 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"));
+};
+//#endregion
+//#region src/ui/components/NodesBoard.tsx
+var _tmpl$$1 = [
+	"<div",
+	" class=\"relative mx-auto h-[calc(100vh-64px)] w-[calc(100vw-32px)]\"><div class=\"relative h-full w-full overflow-scroll rounded-lg border-2 border-gray-600\"><!--$-->",
+	"<!--/--><!--$-->",
+	"<!--/--><div class=\"",
+	"\" style=\"",
+	"\"><!--$-->",
+	"<!--/--><!--$-->",
+	"<!--/--></div></div><div class=\"absolute right-4 bottom-4 z-50 flex items-center gap-2 rounded-xl border border-gray-200 bg-white/90 p-2 shadow-lg backdrop-blur-md\"><button type=\"button\" class=\"flex size-9 cursor-pointer items-center justify-center rounded-lg bg-gray-100 text-lg font-bold text-gray-700 shadow-sm transition-all duration-150 hover:bg-gray-200 active:scale-95\" title=\"Zoom out\" aria-label=\"Zoom out\">-</button><button type=\"button\" class=\"h-9 cursor-pointer rounded-lg px-2 text-xs font-semibold text-gray-700 transition-colors hover:bg-gray-100\" title=\"Reset zoom\" aria-label=\"Reset zoom\"><!--$-->",
+	"<!--/-->%</button><button type=\"button\" class=\"flex size-9 cursor-pointer items-center justify-center rounded-lg bg-gray-100 text-lg font-bold text-gray-700 shadow-sm transition-all duration-150 hover:bg-gray-200 active:scale-95\" title=\"Zoom in\" aria-label=\"Zoom in\">+</button><div class=\"h-5 w-px bg-gray-300\"></div><button type=\"button\" class=\"flex size-9 cursor-pointer items-center justify-center rounded-lg bg-blue-600 text-white shadow transition-all duration-150 hover:bg-blue-700 active:scale-95\" title=\"Add parent node\" aria-label=\"Add parent node\"><svg class=\"size-5\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\"></path></svg></button></div></div>"
+];
+/**
+* Interactive board component containing the drag-drop viewport, zoom
+* controls, panning gestures, and rendered nodes/edges.
+*
+* @returns The rendered Solid component.
+*/
+var NodesBoard = () => {
+	const [isPanning, setIsPanning] = createSignal(false);
+	const [transform, setTransform] = createSignal({
+		x: 0,
+		y: 0
+	});
+	const [id, setId] = createSignal("");
+	const [previousZoom, setPreviousZoom] = createSignal();
+	let cleanupPanning = () => {};
+	onCleanup(cleanupPanning);
+	const { board: [, setRef], service, newEdge: [newEdge], zoom: [zoom, setZoom] } = useFlow();
+	createEffect(on(zoom, () => {}, { defer: true }));
+	const selectedId = useState(service, { selector: (s) => s.context?.selected });
+	const selected = (id) => selectedId() === id;
+	const nodes = useState(service, {
+		selector: (s) => {
+			return (s.context.data?.nodes ?? []).map((item) => ({
+				id: item.id,
+				x: item.position.x,
+				y: item.position.y,
+				label: item.data.label,
+				content: item.data.content ?? "",
+				input: item.input
+			}));
+		},
+		equals: dequal$1
+	});
+	const cDim = () => {
+		const _zoom = zoom();
+		if (_zoom < 1) return 500 * _zoom;
+		return 500;
+	};
+	return createComponent(DragDropProvider, {
+		onDragMove: ({ draggable: { transform: _transform, node, id }, overlay }) => {
+			setId(id);
+			if (selected(id)) {
+				const x = node.offsetLeft + _transform.x / zoom();
+				const y = node.offsetTop + _transform.y / zoom();
+				overlay?.node.style.setProperty("top", y * 2 + "px");
+				overlay?.node.style.setProperty("left", x * 2 + "px");
+				const deltaX = _transform.x / zoom();
+				const deltaY = _transform.y / zoom();
+				node.style.setProperty("transform", `translate3d(${deltaX}px, ${deltaY}px, 0)`);
+				service.send({
+					type: "MOVE_IMMEDIATE",
+					payload: {
+						id: `${id}`,
+						x,
+						y
+					}
+				});
+				setTransform({ ..._transform });
+			}
+		},
+		onDragEnd: ({ draggable: { node, id } }) => {
+			if (!selected(id)) return;
+			const X = node.offsetLeft + transform().x / zoom();
+			const Y = node.offsetTop + transform().y / zoom();
+			node.style.setProperty("top", Y + "px");
+			node.style.setProperty("left", X + "px");
+			node.style.removeProperty("transform");
+			setTimeout(() => {
+				service.send({
+					type: "MOVE",
+					payload: {
+						id: `${id}`,
+						x: X,
+						y: Y
+					}
+				});
+				setTransform({
+					x: 0,
+					y: 0
+				});
+			}, 0);
+		},
+		get children() {
+			return [ssr(_tmpl$$1, ssrHydrationKey(), escape(createComponent(DragDropSensors, {})), escape(createComponent(DragBounds, {})), `relative cursor-crosshair ${isPanning() ? "cursor-grabbing" : ""}`, ssrStyleProperty("height:", `calc(${escape(cDim(), true)}vh - 85px)`) + ssrStyleProperty(";width:", `calc(${escape(cDim(), true)}vw - 53px)`) + ssrStyleProperty(";scale:", escape(zoom(), true)) + ssrStyleProperty(";transform-origin:", "top left"), escape(createComponent(EdgesBoard, {})), escape(createComponent(For, {
+				get each() {
+					return nodes();
+				},
+				children: NodeComponent
+			})), escape(Math.round(zoom() * 100))), createComponent(Show, {
+				get when() {
+					return !id() || !selected(id());
+				},
+				get children() {
+					return createComponent(DragOverlay, { children: "" });
+				}
+			})];
+		}
+	});
+};
+//#endregion
+//#region src/ui/components/FlowChart.tsx
+var _tmpl$ = [
+	"<div",
+	" class=\"relative h-full w-full\"><div class=\"relative h-full w-full bg-white bg-size-[30px_30px]\" style=\"",
+	"\">",
+	"</div></div>"
+];
+/**
+* Flowchart board canvas component that renders interactive nodes, edges,
+* pan/zoom, and toolbar controls.
+*
+* @param props - Flowchart configuration and event handlers of type
+*   {@linkcode FlowProps}.
+*
+* @returns The rendered Solid component.
+*/
+var FlowChart = (props) => {
+	const primaryNodes = props.config?.nodes ?? DEFAULT_NODES;
+	const primaryEdges = props.config?.edges;
+	const { service, newEdge: [newEdge, setNewEdge], getBoardPoint } = useFlow();
+	onMount(() => {
+		service.start();
+		service.send({
+			type: "CONFIGURE",
+			payload: {
+				nodes: primaryNodes,
+				edges: primaryEdges ?? []
+			}
+		});
+	});
+	onCleanup(service.stop);
+	return ssr(_tmpl$, ssrHydrationKey(), ssrStyleProperty("cursor:", newEdge() ? "inherit" : "crosshair") + ssrStyleProperty(";background-image:", "radial-gradient(circle, #b8b8b8bf 1px, rgba(0, 0, 0, 0) 1px)"), escape(createComponent(NodesBoard, {})));
+};
+//#endregion
+//#region src/ui/Flow.tsx
+/**
+* Root Flow component wrapping the {@linkcode FlowChart} inside the flow
+* context provider.
+*
+* @param props - Flow chart configuration and callbacks of type
+*   {@linkcode FlowProps}.
+*
+* @returns The rendered Solid component.
+*/
+var Flow = (props) => createComponent(Provider, { get children() {
+	return createComponent(FlowChart, props);
+} });
+//#endregion
+export { CLASSES, Flow };