@bemedev/mind-flow 0.1.0 → 0.3.0

package/lib/server.es.js

@@ -1,13 +1,11 @@
 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 { createState } from "@bemedev/app-solidjs";
+import { For, Show, createContext, createEffect, createSignal, on, onCleanup, onMount, useContext } from "solid-js";
+import { createMachine, interpret, toArray } from "@bemedev/app";
+import { toArray as toArray$1, 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";
+import { dequal } from "dequal";
 //#region src/ui/components/classes.ts
 /**
 * List of Tailwind CSS class names used across flowchart UI components to ensure
@@ -34,7 +32,7 @@ var CLASSES = [
 	"w-full",
 	"h-full",
 	"overflow-hidden",
-	"overflow-scroll",
+	"overflow-auto",
 	"h-[150vh]",
 	"w-[2160px]",
 	"bg-size-[30px_30px]",
@@ -94,12 +92,56 @@ var CLASSES = [
 	"cursor-crosshair",
 	"mt-3"
 ];
+/** 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.
+*
+* @see {@linkcode HANDLE_CENTER_X_OFFSET}, {@linkcode HANDLE_CENTER_Y}
+*/
+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: 55,
+	vertical: 40
+};
+/**
+* Default node items of type {@linkcode NodeProps} 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/helpers/createContext.ts
 /**
 * Creates a Solid context provider component and a custom hook to consume it.
 *
-* @template T - The type of the context value.
+* @template `T` - The type of the context value.
 *
 * @param context - Factory function returning a non-nullable context value of type
 *   `NonNullable<T>`.
@@ -107,6 +149,8 @@ var CLASSES = [
 *
 * @returns A tuple containing the Provider component of type
 *   {@linkcode ParentComponent}, the accessor hook, and the Solid context object.
+*
+* @see {@linkcode createSolidContext}, {@linkcode useContext}
 */
 var createContext$1 = (context, options) => {
 	const _context = createContext(context(), options);
@@ -122,7 +166,66 @@ var createContext$1 = (context, options) => {
 	];
 };
 //#endregion
-//#region src/services/main.typings.ts
+//#region src/services/main.machine.helpers.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}`;
+};
+/**
+* Calculates node dimensions, connection points, and handle offsets from position
+* and optional parent dimension.
+*
+* @param position - Node position in board coordinates of type {@linkcode Point}.
+* @param parentDimension - Optional parent node dimension of type
+*   {@linkcode Dimension} to inherit sizing and offsets from.
+*
+* @returns Node layout dimension object of type {@linkcode Dimension}.
+*
+* @see {@linkcode getDefaultOutputOffset}, {@linkcode DEFAULT_INPUT_OFFSET}
+*/
+var calculateDimensions = (position, parentDimension = {
+	width: 192,
+	height: 50,
+	inputOffset: DEFAULT_INPUT_OFFSET
+}) => {
+	const width = parentDimension.width;
+	const height = parentDimension.height;
+	const outputOffset = parentDimension.outputOffset ?? getDefaultOutputOffset(width);
+	const inputOffset = parentDimension.inputOffset;
+	return {
+		width,
+		height,
+		output: {
+			x: position.x + outputOffset.x,
+			y: position.y + outputOffset.y
+		},
+		input: {
+			x: position.x + inputOffset.x,
+			y: position.y + inputOffset.y
+		},
+		outputOffset,
+		inputOffset
+	};
+};
+//#endregion
+//#region src/services/main.machine.typings.ts
 /** Schema definition for 2D coordinates `(x, y)`. */
 var point = type({
 	x: "number",
@@ -132,12 +235,16 @@ type(({ optional, use }) => ({
 	input: optional(use(point)),
 	output: use(point)
 }));
-/** Schema definition for edge extremities */
+/** Schema definition for edge extremities. */
 var extremities = type({
 	from: "string",
 	to: "string"
 });
-/** Schema definition for a serialized flowchart node entity. */
+/**
+* Schema definition for a serialized flowchart node entity.
+*
+* @see {@linkcode point}
+*/
 var nodeJSON = type(({ optional, use }) => ({
 	position: use(point),
 	data: {
@@ -146,50 +253,68 @@ var nodeJSON = type(({ optional, use }) => ({
 	},
 	input: "boolean"
 }));
-/** Schema definition for a serialized flowchart edge entity. */
+/**
+* Schema definition for a serialized flowchart edge entity.
+*
+* @see {@linkcode extremities}
+*/
 var edgeJSON = extremities;
-type(({ optional, use }) => ({
+/**
+* Schema definition for layout dimensions and connection points of a node.
+*
+* @see {@linkcode point}
+*/
+var dimension = type(({ optional, use }) => ({
 	width: "number",
 	height: "number",
-	id: "string",
 	output: use(point),
-	input: optional(use(point))
+	input: optional(use(point)),
+	inputOffset: optional(use(point)),
+	outputOffset: optional(use(point))
 }));
-type({
+/**
+* Schema definition for a 2D line vector representing edge coordinates `(x0, y0)` to
+* `(x1, y1)`.
+*/
+var vector = 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`.
+* Schema definition for an ongoing new connection edge creation preview between
+* source node and cursor position.
 *
-* @returns Formatted node identifier string.
+* @see {@linkcode vector}
 */
-var buildNodeID = (generated) => {
-	return `node-${generated}`;
-};
+var newEdge = type(({ intersection, use }) => intersection({ from: "string" }, use(vector)));
+/** Schema definition for flowchart board geometry and container scroll dimensions. */
+var board = type(({ optional }) => ({
+	self: {
+		left: "number",
+		top: "number",
+		width: "number",
+		height: "number"
+	},
+	parent: optional({
+		scrollLeft: "number",
+		scrollTop: "number",
+		height: "number",
+		width: "number"
+	})
+}));
+//#endregion
+//#region src/services/main.machine.ts
 /**
 * State machine managing flowchart state transitions, nodes, edges, selection, and
 * layout actions.
+*
+* @see {@linkcode calculateDimensions}, {@linkcode buildEdgeId}, {@linkcode buildNodeID}, {@linkcode getDefaultOutputOffset}, {@linkcode DEFAULT_INPUT_OFFSET}
 */
 var machine = createMachine({
 	initial: "idle",
+	on: { SET_BOARD: { actions: ["setBoard"] } },
 	states: {
 		idle: { on: {
 			CONFIGURE: {
@@ -204,7 +329,7 @@ var machine = createMachine({
 		} },
 		working: { on: {
 			MOVE_IMMEDIATE: { actions: [{
-				name: "buildImmediateUI",
+				name: "buildUI",
 				description: "Must be in the ui"
 			}] },
 			ADD_CHILD: {
@@ -229,6 +354,7 @@ var machine = createMachine({
 				],
 				target: "/construction"
 			},
+			ADD_DIMENSION: { actions: ["addDimension"] },
 			ADD_SIBLING: {
 				actions: [
 					"generateID",
@@ -248,12 +374,18 @@ var machine = createMachine({
 				actions: ["addEdge"],
 				target: "/construction"
 			},
+			START_NEW_EDGE: { actions: ["startNewEdge"] },
+			MOVE_NEW_EDGE: { actions: ["moveNewEdge"] },
+			CLEAR_NEW_EDGE: { actions: ["clearNewEdge"] },
 			DELETE: {
 				actions: ["delete"],
 				target: "/construction"
 			},
 			SELECT: { actions: ["select"] },
-			DESELECT: { actions: ["deselect"] }
+			DESELECT: { actions: ["deselect"] },
+			ZOOM: { actions: ["zoom"] },
+			TOGGLE_ZOOM: { actions: ["toggleZoom"] },
+			SET_BOARD: { actions: ["setBoard"] }
 		} }
 	}
 }, {
@@ -262,6 +394,7 @@ var machine = createMachine({
 			nodes: array(intersection(use(nodeJSON), { id: "string" })),
 			edges: array(intersection(use(edgeJSON), { id: "string" }))
 		},
+		SET_BOARD: use(board),
 		CONFIGURE_EMPTY: "never",
 		MOVE: {
 			id: "string",
@@ -279,11 +412,27 @@ var machine = createMachine({
 		DELETE: "string",
 		SELECT: "string",
 		DESELECT: "never",
-		ADD_EDGE: use(extremities)
+		ADD_EDGE: use(extremities),
+		START_NEW_EDGE: "string",
+		MOVE_NEW_EDGE: use(point),
+		CLEAR_NEW_EDGE: "never",
+		ZOOM: "number",
+		TOGGLE_ZOOM: "never",
+		ADD_DIMENSION: {
+			id: "string",
+			dimension: use(dimension)
+		}
 	})),
 	sync: true,
-	pContext: type(({ union }) => ({ generatedId: union("string", "null") })),
-	context: type(({ optional, use, array }) => ({
+	pContext: type(({ union, optional, record, use, custom }) => ({
+		generatedId: union("string", "null"),
+		previousZoom: optional("number"),
+		dimensions: record(use(dimension)),
+		getBoardPosition: custom(),
+		clampPosition: custom(),
+		calculateDimensions: custom()
+	})),
+	context: type(({ optional, use, array, record }) => ({
 		data: optional({
 			nodes: array({
 				...use(nodeJSON),
@@ -294,46 +443,145 @@ var machine = createMachine({
 				id: "string"
 			})
 		}),
+		board: optional(use(board)),
+		edgesPositions: record(use(vector)),
+		newEdge: optional(use(newEdge)),
 		selected: optional("string"),
-		updatingUI: optional("boolean")
+		updatingUI: optional("boolean"),
+		zoom: "number",
+		bounds: use(point)
 	}))
-}).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;
+}).provideOptions(({ assign, batch, erase, filter, action }) => ({ actions: {
+	configure: batch(assign("data", { CONFIGURE: ({ payload }) => payload }), assign("newEdge", () => void 0), assign("updatingUI", () => false), action(({ pContext }) => {
+		pContext.generatedId = null;
+	}), action({ CONFIGURE: ({ payload: { nodes }, pContext: { dimensions } }) => {
+		nodes.forEach(({ id, position }) => {
+			dimensions[id] = calculateDimensions(position);
+		});
+	} })),
+	startNewEdge: assign("newEdge", { START_NEW_EDGE: ({ payload: from, pContext: { dimensions } }) => {
+		const { x, y } = dimensions[from].output;
+		return {
+			from,
+			x0: x,
+			y0: y,
+			x1: x,
+			y1: y
+		};
+	} }),
+	setBoard: assign("board", { SET_BOARD: ({ payload }) => payload }),
+	buildUI: batch(assign("edgesPositions", {
+		MOVE: ({ context: { data, edgesPositions }, payload, pContext: { dimensions } }) => {
+			const edges = data?.edges;
+			const dimension = dimensions[payload.id];
+			const outputOffset = dimension?.outputOffset ?? getDefaultOutputOffset(dimension?.width);
+			const inputOffset = dimension?.inputOffset ?? DEFAULT_INPUT_OFFSET;
+			const output = {
+				x: payload.x + outputOffset.x,
+				y: payload.y + outputOffset.y
+			};
+			const input = {
+				x: payload.x + inputOffset.x,
+				y: payload.y + inputOffset.y
+			};
+			if (dimension) {
+				dimension.output = output;
+				dimension.input = input;
+			}
+			edges?.forEach(({ from, to, id }) => {
+				if (from === payload.id) {
+					edgesPositions[id].x0 = output.x;
+					edgesPositions[id].y0 = output.y;
+				}
+				if (to === payload.id) {
+					edgesPositions[id].x1 = input.x;
+					edgesPositions[id].y1 = input.y;
+				}
+			});
+			return edgesPositions;
+		},
+		MOVE_IMMEDIATE: ({ context: { data, edgesPositions }, payload, pContext: { dimensions } }) => {
+			(data?.edges)?.forEach(({ from, to, id }) => {
+				if (from === payload.id) {
+					const dimension = dimensions[payload.id];
+					const offset = dimension?.outputOffset ?? getDefaultOutputOffset(dimension?.width);
+					const x0 = payload.x + offset.x;
+					const y0 = payload.y + offset.y;
+					edgesPositions[id].x0 = x0;
+					edgesPositions[id].y0 = y0;
+					if (dimension) {
+						dimension.output.x = x0;
+						dimension.output.y = y0;
+					}
+				}
+				if (to === payload.id) {
+					const dimension = dimensions[payload.id];
+					const offset = dimension?.inputOffset ?? DEFAULT_INPUT_OFFSET;
+					const x1 = payload.x + offset.x;
+					const y1 = payload.y + offset.y;
+					edgesPositions[id].x1 = x1;
+					edgesPositions[id].y1 = y1;
+					if (dimension) dimension.input = {
+						x: x1,
+						y: y1
+					};
+				}
+			});
+			return edgesPositions;
+		},
+		else: ({ context: { data, edgesPositions }, pContext: { dimensions } }) => {
+			const edges = data?.edges ?? [];
+			edgesPositions = {};
+			edges.forEach(({ from, id, to }) => {
+				const output = dimensions[from]?.output;
+				const input = dimensions[to]?.input;
+				if (output && input) edgesPositions[id] = {
+					x0: output.x,
+					y0: output.y,
+					x1: input.x,
+					y1: input.y
+				};
+				else delete edgesPositions[id];
+			});
+			return edgesPositions;
+		}
+	}), assign("updatingUI", () => true)),
+	addDimension: action({ ADD_DIMENSION: ({ payload: { id, dimension }, pContext: { dimensions } }) => {
+		dimensions[id] = dimension;
+	} }),
+	generateID: action(({ pContext }) => {
+		pContext.generatedId = nanoid();
+	}),
+	linkChild: batch(assign("data.edges", { ADD_CHILD: ({ context: { data }, pContext, payload }) => {
+		const edges = toArray$1.typed(data?.edges);
 		const from = payload;
 		const generatedId = pContext?.generatedId;
 		const to = buildNodeID(generatedId);
 		const id = buildEdgeId(from, to);
-		return [...data?.edges ?? [], {
+		edges.push({
 			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;
+		});
+		return edges;
+	} }), assign("selected", ({ pContext: { generatedId } }) => buildNodeID(generatedId))),
+	linkSibling: batch(assign("data.edges", { ADD_SIBLING: ({ pContext, payload, context: { data } }) => {
+		const edges = toArray$1.typed(data?.edges);
 		const generatedId = pContext?.generatedId;
-		const out = [...edges ?? []];
-		const from = edges?.find(({ to }) => to === payload)?.from;
-		if (!from) return out;
+		const from = edges.find(({ to }) => to === payload)?.from;
+		if (!from) return edges;
 		const to = buildNodeID(generatedId);
 		const id = buildEdgeId(from, to);
-		out.push({
+		edges.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 }) => {
+		return edges;
+	} }), assign("selected", ({ pContext: { generatedId } }) => buildNodeID(generatedId))),
+	selectParent: assign("selected", ({ pContext: { generatedId } }) => buildNodeID(generatedId)),
+	moveNode: assign("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,
@@ -345,11 +593,11 @@ var machine = createMachine({
 			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 } }) => {
+	select: assign("selected", { SELECT: ({ payload }) => payload }),
+	delete: batch(filter("data.edges", { DELETE: ({ id, from, to }, _, { payload }) => {
+		return id !== payload && from !== payload && to !== payload;
+	} }), filter("data.nodes", { DELETE: ({ id }, _, { payload }) => id !== payload })),
+	addEdge: batch(assign("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;
@@ -358,282 +606,218 @@ var machine = createMachine({
 			from,
 			to
 		}];
+	} }), erase("newEdge")),
+	clearNewEdge: erase("newEdge"),
+	deselect: erase("selected"),
+	zoom: assign("zoom", { ZOOM: ({ context: { zoom }, payload, pContext }) => {
+		const next = zoom + payload;
+		const clamped = Math.min(Math.max(Number(next.toFixed(2)), .2), 3);
+		pContext.previousZoom = void 0;
+		return clamped;
 	} }),
-	deselect: erase("context.selected")
+	toggleZoom: assign("zoom", { TOGGLE_ZOOM: ({ context: { zoom }, pContext }) => {
+		const previous = pContext.previousZoom;
+		if (previous !== void 0) {
+			pContext.previousZoom = void 0;
+			return previous;
+		}
+		pContext.previousZoom = zoom;
+		return 1;
+	} })
 } }));
-/** 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: 55,
-	vertical: 40
-};
-/** 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
 /**
 * Solid Context Provider component and hook for accessing flowchart board state,
 * services, and zoom.
+*
+* @see {@linkcode machine}, {@linkcode createContext}
 */
 var [Provider, useFlow] = createContext$1(() => {
-	/**
-	* Shared state machine interpreter service instance for flowchart state
-	* management.
-	*/
+	/** Shared service for flowchart state management. */
 	const service = interpret(machine, {
-		context: {},
-		pContext: { generatedId: null }
+		context: {
+			zoom: 1,
+			edgesPositions: {},
+			bounds: {
+				x: 0,
+				y: 0
+			}
+		},
+		pContext: {
+			generatedId: null,
+			dimensions: {},
+			/**
+			* Converts viewport screen coordinates to unscaled board coordinates.
+			*
+			* @param clientX - Client X coordinate in pixels.
+			* @param clientY - Client Y coordinate in pixels.
+			* @param el - Board layout details of type {@linkcode Board}.
+			*
+			* @returns Calculated 2D coordinate of type {@linkcode Point}.
+			*/
+			getBoardPosition(clientX, clientY, el) {
+				if (!el) return {
+					x: clientX,
+					y: clientY
+				};
+				const currentZoom = service.state.context.zoom;
+				return {
+					x: (clientX - el.self.left) / currentZoom,
+					y: (clientY - el.self.top) / currentZoom
+				};
+			},
+			/**
+			* Clamps given coordinates within board boundaries.
+			*
+			* @param board - Board layout and container details of type
+			*   {@linkcode Board}.
+			* @param x - Desired X position in pixels.
+			* @param y - Desired Y position in pixels.
+			* @param nodeWidth - Node width in pixels, defaults to `192`.
+			* @param nodeHeight - Node height in pixels, defaults to `50`.
+			*
+			* @returns Clamped coordinate of type {@linkcode Point}.
+			*
+			* @see {@linkcode BOUNDS_CONSTRAINTS}
+			*/
+			clampPosition(board, x, y, nodeWidth = 192, nodeHeight = 50) {
+				const container = board?.parent;
+				if (!container) return {
+					x,
+					y
+				};
+				const currentZoom = service.state.context.zoom ?? 1;
+				const minX = container.scrollLeft / currentZoom + BOUNDS_CONSTRAINTS.horizontal;
+				const maxX = Math.max(minX, (container.scrollLeft + container.width) / currentZoom - BOUNDS_CONSTRAINTS.horizontal - nodeWidth);
+				const minY = container.scrollTop / currentZoom + BOUNDS_CONSTRAINTS.vertical;
+				const maxY = Math.max(minY, (container.scrollTop + container.height) / currentZoom - BOUNDS_CONSTRAINTS.vertical - nodeHeight);
+				return {
+					x: Math.min(Math.max(x, minX), maxX),
+					y: Math.min(Math.max(y, minY), maxY)
+				};
+			},
+			/**
+			* Computes node dimension, connection points, and handle offsets.
+			*
+			* @param position - Node position of type {@linkcode Point}.
+			* @param parentDimension - Optional sizing and offsets to inherit.
+			*
+			* @returns Calculated dimension object of type {@linkcode Dimension}.
+			*
+			* @see {@linkcode DEFAULT_INPUT_OFFSET}, {@linkcode getDefaultOutputOffset}
+			*/
+			calculateDimensions: (position, parentDimension = {
+				width: 192,
+				height: 50,
+				inputOffset: DEFAULT_INPUT_OFFSET
+			}) => {
+				const width = parentDimension.width;
+				const height = parentDimension.height;
+				const outputOffset = parentDimension.outputOffset ?? getDefaultOutputOffset(width);
+				const inputOffset = parentDimension.inputOffset;
+				return {
+					width,
+					height,
+					output: {
+						x: position.x + outputOffset.x,
+						y: position.y + outputOffset.y
+					},
+					input: {
+						x: position.x + inputOffset.x,
+						y: position.y + inputOffset.y
+					},
+					outputOffset,
+					inputOffset
+				};
+			}
+		}
 	});
-	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 ?? [];
+	service.addOptions(({ assign }) => ({ actions: {
+		placeChild: assign("data.nodes", { ADD_CHILD: ({ payload, context: { data, board }, pContext }) => {
+			if (!board) return data?.nodes;
+			const nodes = data?.nodes;
 			if (!payload) return nodes;
-			const parentNode = nodes.find((node) => node.id === payload);
+			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 parentDimension = pContext.dimensions[payload];
+			const id = `node-${pContext.generatedId}`;
+			const width = parentDimension?.width ?? 192;
+			const height = parentDimension?.height ?? 50;
 			const initialX = parentNode.position.x + width + 100;
 			const initialY = parentNode.position.y;
-			const position = clampPosition(initialX, initialY, width, height);
-			return [...nodes, {
+			const position = pContext.clampPosition(board, initialX, initialY, width, height);
+			const dimension = pContext.calculateDimensions(position, parentDimension);
+			nodes?.push({
 				id,
 				data: { content: "<Nouveau nœud>" },
 				input: true,
 				position
-			}];
+			});
+			pContext.dimensions[id] = dimension;
+			return nodes;
 		} }),
-		placeParent: assign("context.data.nodes", { ADD_PARENT: ({ context: { data }, pContext: { generatedId } }) => {
-			const nodes = data?.nodes ?? [];
-			const id = `node-${generatedId}`;
-			const container = boardRef()?.parentElement;
+		placeParent: assign("data.nodes", { ADD_PARENT: ({ context: { data, zoom = 1, board }, pContext }) => {
+			if (!board) return data?.nodes;
+			const nodes = data?.nodes;
+			const id = `node-${pContext.generatedId}`;
+			const container = board.parent;
 			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 width = container?.width ?? 0;
+			const height = container?.height ?? 0;
+			const currentZoom = zoom;
 			const x = (scrollLeft + width / 2) / currentZoom;
 			const y = (scrollTop + height / 2) / currentZoom;
-			return [...nodes, {
+			const position = pContext.clampPosition(board, x, y);
+			const dimension = pContext.calculateDimensions(position);
+			nodes?.push({
 				id,
 				data: { content: "<Nouveau nœud>" },
 				input: false,
-				position: {
-					x,
-					y
-				}
-			}];
+				position
+			});
+			pContext.dimensions[id] = dimension;
+			return nodes;
 		} }),
-		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;
+		placeSibling: assign("data.nodes", { ADD_SIBLING: ({ payload, context: { data, board }, pContext }) => {
+			if (!board) return data?.nodes;
+			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);
+			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 parentDimension = pContext.dimensions[parentID];
+			const id = `node-${pContext.generatedId}`;
+			const width = parentDimension?.width ?? 192;
+			const height = parentDimension?.height ?? 50;
 			const initialX = parentNode.position.x + width + 100;
 			const initialY = parentNode.position.y + 100;
-			const position = clampPosition(initialX, initialY, width, height);
-			return [...nodes, {
+			const position = pContext.clampPosition(board, initialX, initialY, width, height);
+			const dimension = pContext.calculateDimensions(position, parentDimension);
+			nodes?.push({
 				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]) => 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
-								}
-							};
-						}));
-					}
-				});
-			}));
+			pContext.dimensions[id] = dimension;
+			return nodes;
+		} }),
+		moveNewEdge: assign("newEdge", { MOVE_NEW_EDGE: ({ context: { newEdge, board }, payload, pContext }) => {
+			if (!board) return void 0;
+			if (!newEdge) return void 0;
+			const { x: x1, y: y1 } = pContext.getBoardPosition(payload.x, payload.y, board);
+			return {
+				...newEdge,
+				x1,
+				y1
+			};
 		} })
 	} }));
 	service.start();
-	return {
-		dimensions: [dimensions, setDimensions],
-		newEdge,
-		board: [boardRef, setBoardRef],
-		getBoardPoint,
-		edgesPositions: [edgesPositions, setEdgesPositions],
-		service,
-		zoom,
-		clampPosition
-	};
+	return service;
 }, { name: "FlowContext" });
 //#endregion
 //#region src/ui/components/Bounds.tsx
@@ -643,24 +827,28 @@ var [Provider, useFlow] = createContext$1(() => {
 *
 * @returns `null` as this component performs side-effect transformer registrations
 *   only.
+*
+* @see {@linkcode useFlow}, {@linkcode BOUNDS_CONSTRAINTS}
 */
 var DragBounds = () => {
-	const { board: [ref], zoom: [zoom] } = useFlow();
+	const service = useFlow();
+	const zoom = createState(service, { selector: ({ context }) => context.zoom });
+	const board = createState(service, { selector: ({ context }) => context.board });
 	const [state, { addTransformer, removeTransformer, onDragStart, onDragEnd }] = useDragDropContext();
 	const transformer = {
 		id: "clamp-to-container",
 		order: 100,
 		callback: (transform) => {
-			const container = ref();
+			const container = board()?.self;
 			const activeDraggable = state.active.draggable;
 			if (!container || !activeDraggable) return transform;
 			const node = activeDraggable.node;
 			if (!node) return transform;
 			const currentZoom = zoom();
 			const minBoardX = BOUNDS_CONSTRAINTS.horizontal;
-			const maxBoardX = Math.max(minBoardX, container.clientWidth / currentZoom - node.offsetWidth - BOUNDS_CONSTRAINTS.horizontal);
+			const maxBoardX = Math.max(minBoardX, container.width / currentZoom - node.offsetWidth - BOUNDS_CONSTRAINTS.horizontal);
 			const minBoardY = BOUNDS_CONSTRAINTS.vertical;
-			const maxBoardY = Math.max(minBoardY, container.clientHeight / currentZoom - node.offsetHeight - BOUNDS_CONSTRAINTS.vertical);
+			const maxBoardY = Math.max(minBoardY, container.height / currentZoom - node.offsetHeight - BOUNDS_CONSTRAINTS.vertical);
 			const minTransformX = (minBoardX - node.offsetLeft) * currentZoom;
 			const maxTransformX = (maxBoardX - node.offsetLeft) * currentZoom;
 			const minTransformY = (minBoardY - node.offsetTop) * currentZoom;
@@ -709,6 +897,8 @@ var calculateOffset = (value) => value * 100 / 200;
 * @param vector - Vector coordinates of type {@linkcode Vector}.
 *
 * @returns SVG cubic bezier path string.
+*
+* @see {@linkcode calculateOffset}
 */
 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}`;
@@ -720,30 +910,53 @@ var draw = ({ x0, y0, x1, y1 }) => {
 * @param props - Edge properties of type {@linkcode Props}.
 *
 * @returns The rendered SVG JSX elements.
+*
+* @see {@linkcode draw}, {@linkcode useFlow}
 */
 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 service = useFlow();
+	const vector = createState(service, {
+		selector: ({ context }) => {
+			if (props.isNew) {
+				const edge = context.newEdge;
+				if (!edge) return void 0;
+				return {
+					x0: edge.x0,
+					y0: edge.y0,
+					x1: edge.x1,
+					y1: edge.y1
+				};
+			}
+			return context.edgesPositions[props.id];
+		},
+		equals: dequal
 	});
-	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, {
+	const selected = createState(service, { selector: (s) => s.context.selected === props.id });
+	/** Computes the 2D midpoint coordinate of the edge curve for handle placement. */
+	const middlePoint = () => {
+		const v = vector();
+		if (!v) return {
+			x: 0,
+			y: 0
+		};
+		return {
+			x: v.x0 + (v.x1 - v.x0) / 2,
+			y: v.y0 + (v.y1 - v.y0) / 2
+		};
+	};
+	return createComponent(Show, {
 		get when() {
-			return selected();
+			return vector();
 		},
-		get children() {
-			return ssr(_tmpl$2$2, ssrHydrationKey(), `translate(${escape(middlePoint().x, true)}, ${escape(middlePoint().y, true)})`, ssrStyleProperty("pointer-events:", "all") + ssrStyleProperty(";z-index:", "30"));
-		}
-	})];
+		children: (v) => [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(v()), true), false)), createComponent(Show, {
+			get when() {
+				return selected();
+			},
+			get children() {
+				return ssr(_tmpl$2$2, 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
@@ -758,44 +971,31 @@ var _tmpl$$3 = [
 * edge creation previews.
 *
 * @returns The rendered SVG JSX element.
+*
+* @see {@linkcode EdgeComponent}, {@linkcode useFlow}
 */
 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();
+	const service = useFlow();
+	const hasNewEdge = createState(service, { selector: (s) => !!s.context.newEdge });
+	const edgeIds = createState(service, {
+		selector: ({ context }) => Object.keys(context.edgesPositions),
+		equals: (prev, next) => prev.length === next.length
 	});
 	return ssr(_tmpl$$3, ssrHydrationKey(), escape(createComponent(Show, {
 		get when() {
-			return newEdge();
+			return hasNewEdge();
 		},
-		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;
-			}
-		})
+		get children() {
+			return createComponent(EdgeComponent, {
+				id: "__#new-edge#__TEMP",
+				isNew: true
+			});
+		}
 	})), escape(createComponent(For, {
 		get each() {
-			return datas();
+			return edgeIds();
 		},
-		children: EdgeComponent
+		children: (id) => createComponent(EdgeComponent, { id })
 	})));
 };
 //#endregion
@@ -815,11 +1015,12 @@ var _tmpl$3$1 = [
 	"<div",
 	" class=\"",
 	"\" style=\"",
-	"\"><div class=\"",
+	"\"",
+	"><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><!--$-->",
+	"<!--/--><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 id=\"inputs\" class=\"pointer-events-none absolute top-0 z-10 flex flex-col\" style=\"",
@@ -843,22 +1044,34 @@ var _tmpl$5 = [
 * @param props - Node rendering properties of type {@linkcode Props}.
 *
 * @returns The rendered Solid component.
+*
+* @see {@linkcode useFlow}, {@linkcode HANDLE_CONTAINER_OFFSET_X}, {@linkcode HANDLE_MARGIN_TOP}, {@linkcode HANDLE_SIZE}
 */
 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 });
-	onMount(() => {
-		ref();
-		zoom();
+	const service = useFlow();
+	const node = createState(service, {
+		selector: ({ context }) => {
+			const item = toArray.typed(context.data?.nodes).find((n) => n.id === props.id);
+			if (!item) return void 0;
+			return {
+				x: item.position.x,
+				y: item.position.y,
+				label: item.data.label,
+				content: item.data.content ?? "",
+				input: item.input
+			};
+		},
+		equals: dequal
 	});
-	const hasParent = useState(service, { selector: ({ context: { data } }) => {
+	createState(service, { selector: (s) => s.context.newEdge });
+	const selected = createState(service, { selector: (s) => s.context.selected === props.id });
+	const hasParent = createState(service, { selector: ({ context: { data } }) => {
 		const edges = data?.edges;
 		if (!edges) return false;
 		return edges.some(({ to }) => to === props.id);
 	} });
 	createDraggable(props.id);
-	return ssr(_tmpl$3$1, 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, {
+	return ssr(_tmpl$3$1, 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 ?? 0, true)}px`) + ssrStyleProperty(";left:", `${escape(node()?.x ?? 0, 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();
 		},
@@ -867,19 +1080,19 @@ var NodeComponent = (props) => {
 		}
 	})), 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;
+			return node()?.label;
 		},
 		keyed: true,
 		children: (label) => ssr(_tmpl$4, ssrHydrationKey(), escape(label))
 	})), escape(createComponent(Show, {
 		get when() {
-			return props.content;
+			return node()?.content;
 		},
 		keyed: true,
 		children: (content) => ssr(_tmpl$5, ssrHydrationKey(), escape(content))
 	})), escape(createComponent(Show, {
 		get when() {
-			return props.input || hasParent();
+			return node()?.input || hasParent();
 		},
 		get children() {
 			return ssr(_tmpl$2$1, 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"));
@@ -890,7 +1103,7 @@ var NodeComponent = (props) => {
 //#region src/ui/components/NodesBoard.tsx
 var _tmpl$$1 = [
 	"<div",
-	" class=\"relative h-full w-full overflow-scroll rounded-lg border-2 border-gray-600\"><!--$-->",
+	" class=\"relative h-full w-full overflow-auto rounded-lg border-2 border-gray-600\"><!--$-->",
 	"<!--/--><div class=\"",
 	"\" style=\"",
 	"\"><div class=\"relative h-full w-full\" style=\"",
@@ -914,6 +1127,8 @@ var _tmpl$3 = [
 * panning gestures, and rendered nodes/edges.
 *
 * @returns The rendered Solid component.
+*
+* @see {@linkcode DragBounds}, {@linkcode EdgesBoard}, {@linkcode NodeComponent}, {@linkcode useFlow}, {@linkcode CANVAS_FACTOR}, {@linkcode SCROLL_MULTIPLIER}
 */
 var NodesBoard = () => {
 	let containerRef;
@@ -923,35 +1138,71 @@ var NodesBoard = () => {
 		y: 0
 	});
 	const [id, setId] = createSignal("");
-	const [previousZoom, setPreviousZoom] = createSignal();
+	const [ref, setRef] = createSignal();
 	let percentX = 0;
 	let percentY = 0;
-	const { board: [, setRef], service, newEdge: [newEdge], zoom: [zoom, setZoom] } = useFlow();
+	const service = useFlow();
+	createState(service, {
+		selector: (s) => s.context.newEdge,
+		equals: dequal
+	});
+	const zoom = createState(service, { selector: (s) => s.context.zoom ?? 1 });
+	/**
+	* Dispatches the current board geometry and parent container dimensions to the
+	* state machine service.
+	*/
+	const sendBoard = () => {
+		const el = ref();
+		if (!el) return;
+		const rect = el.getBoundingClientRect();
+		const parent = () => ref()?.parentElement;
+		const payload = {
+			self: {
+				left: rect.left,
+				top: rect.top,
+				width: el.clientWidth,
+				height: el.clientHeight
+			},
+			parent: parent() ? {
+				scrollLeft: parent().scrollLeft,
+				scrollTop: parent().scrollTop,
+				height: parent().clientHeight,
+				width: parent().clientWidth
+			} : void 0
+		};
+		service.send({
+			type: "SET_BOARD",
+			payload
+		});
+	};
 	createEffect(on(zoom, () => {
 		const maxScrollX = containerRef.scrollWidth - containerRef.clientWidth;
 		const maxScrollY = containerRef.scrollHeight - containerRef.clientHeight;
 		if (maxScrollX > 0) containerRef.scrollLeft = percentX * maxScrollX;
 		if (maxScrollY > 0) containerRef.scrollTop = percentY * maxScrollY;
 	}, { defer: true }));
-	const selectedId = useState(service, { selector: (s) => s.context?.selected });
+	onMount(sendBoard);
+	const selectedId = createState(service, { selector: (s) => s.context?.selected });
+	/**
+	* Determines whether the given element ID matches the currently selected entity.
+	*
+	* @param id - The node or edge identifier to check.
+	*
+	* @returns `true` if the item is currently selected, otherwise `false`.
+	*/
 	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
-			}));
+	const nodeIds = createState(service, {
+		selector: ({ context }) => {
+			return toArray.typed(context.data?.nodes).map((item) => item.id);
 		},
-		equals: dequal$1
+		equals: (prev, next) => prev.length === next.length
 	});
 	const CANVAS_SIZE = 500;
 	const MARGIN_X = 265;
 	const MARGIN_Y = 425;
+	/** Computes the dynamic canvas width string in CSS units adjusted for zoom. */
 	const cWidth = () => `calc((${CANVAS_SIZE}vw - ${MARGIN_X}px) * ${zoom()})`;
+	/** Computes the dynamic canvas height string in CSS units adjusted for zoom. */
 	const cHeight = () => `calc((${CANVAS_SIZE}vh - ${MARGIN_Y}px) * ${zoom()})`;
 	return ssr(_tmpl$3, ssrHydrationKey(), escape(createComponent(DragDropProvider, {
 		onDragMove: ({ draggable: { transform: _transform, node, id } }) => {
@@ -999,15 +1250,15 @@ var NodesBoard = () => {
 			node.style.setProperty("top", Y + "px");
 			node.style.setProperty("left", X + "px");
 			node.style.removeProperty("transform");
+			service.send({
+				type: "MOVE",
+				payload: {
+					id: `${id}`,
+					x: X,
+					y: Y
+				}
+			});
 			setTimeout(() => {
-				service.send({
-					type: "MOVE",
-					payload: {
-						id: `${id}`,
-						x: X,
-						y: Y
-					}
-				});
 				setTransform({
 					x: 0,
 					y: 0
@@ -1018,9 +1269,9 @@ var NodesBoard = () => {
 			return [
 				ssr(_tmpl$$1, 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 nodes();
+						return nodeIds();
 					},
-					children: NodeComponent
+					children: (id) => createComponent(NodeComponent, { id })
 				}))),
 				ssr(_tmpl$2, ssrHydrationKey(), escape(Math.round(zoom() * 100))),
 				createComponent(Show, {
@@ -1051,13 +1302,16 @@ var _tmpl$ = [
 *   {@linkcode FlowProps}.
 *
 * @returns The rendered Solid component.
+*
+* @see {@linkcode NodesBoard}, {@linkcode useFlow}, {@linkcode DEFAULT_NODES}
 */
 var FlowChart = (props) => {
 	const primaryNodes = props.config?.nodes ?? DEFAULT_NODES;
 	const primaryEdges = props.config?.edges;
-	const { service, newEdge: [newEdge, setNewEdge], getBoardPoint } = useFlow();
+	const service = useFlow();
+	const hasNewEdge = createState(service, { selector: (s) => !!s.context.newEdge });
 	onMount(() => {
-		service.start();
+		service.resume();
 		service.send({
 			type: "CONFIGURE",
 			payload: {
@@ -1066,8 +1320,8 @@ var FlowChart = (props) => {
 			}
 		});
 	});
-	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, {})));
+	onCleanup(service.pause);
+	return ssr(_tmpl$, ssrHydrationKey(), ssrStyleProperty("cursor:", hasNewEdge() ? "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
@@ -1079,6 +1333,8 @@ var FlowChart = (props) => {
 *   {@linkcode FlowProps}.
 *
 * @returns The rendered Solid component.
+*
+* @see {@linkcode Provider}
 */
 var Flow = (props) => createComponent(Provider, { get children() {
 	return createComponent(FlowChart, props);