@bemedev/mind-flow 0.3.1 → 1.0.0

package/lib/server.es.js

@@ -1,11 +1,189 @@
-import { createComponent, escape, ssr, ssrAttribute, ssrHydrationKey, ssrStyleProperty } from "solid-js/web";
+import { isDefined, toArray, type } from "@bemedev/app/bemedev";
+import { Dynamic, createComponent, escape, memo, mergeProps, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, ssrStyleProperty } from "solid-js/web";
 import { 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 { For, Show, createComponent as createComponent$1, createContext as createContext$1, createEffect, createMemo, createSignal, on, onCleanup, onMount, splitProps, useContext } from "solid-js";
+import { createMachine, deepEqual, interpret, toArray as toArray$1 } from "@bemedev/app";
 import { nanoid } from "nanoid";
 import { DragDropProvider, DragDropSensors, DragOverlay, createDraggable, useDragDropContext } from "@thisbeyond/solid-dnd";
 import { dequal } from "dequal";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+//#region src/services/main.machine.data.ts
+/** Horizontal gap in pixels between a parent node and newly created child node. */
+var PARENT_CHILD_GAP_WIDTH = 100;
+/** Default width and height dimensions for newly created flowchart nodes. */
+var DEFAULT_SIZE = {
+	width: 192,
+	height: 50
+};
+/** Default node width in pixels. */
+var DEFAULT_NODE_WIDTH = DEFAULT_SIZE.width;
+/** Default node height in pixels. */
+var DEFAULT_NODE_HEIGHT = DEFAULT_SIZE.height;
+/** Default node data payload applied when creating new nodes. */
+var DEFAULT_DATA = { content: "<Nouveau nœud>" };
+/** Border width in pixels for a node container. */
+var NODE_BORDER_WIDTH = 1.5;
+/** Diameter in pixels of a node connection handle. */
+var HANDLE_SIZE = 12;
+/** Radius in pixels of a node connection handle. */
+var HANDLE_RADIUS = 6;
+/** Top margin in pixels for positioning connection handles. */
+var HANDLE_MARGIN_TOP = 12;
+/** Horizontal container offset in pixels for handle placement. */
+var HANDLE_CONTAINER_OFFSET_X = 18;
+/** Y-axis center coordinate in pixels of a handle. */
+var HANDLE_CENTER_Y = 18;
+/** X-axis center offset in pixels from the node container edge. */
+var HANDLE_CENTER_X_OFFSET = 10.5;
+/** Default X offset in pixels for input connection handles. */
+var DEFAULT_INPUT_OFFSET_X = -10.5;
+/** Default Y offset in pixels for input connection handles. */
+var DEFAULT_INPUT_OFFSET_Y = 18;
+/** Default 2D offset coordinates for input connection handles. */
+var DEFAULT_INPUT_OFFSET = {
+	x: DEFAULT_INPUT_OFFSET_X,
+	y: 18
+};
+/** Dimensions representing width and height of the flow chart container canvas. */
+var CONTAINER_DIMENSIONS = {
+	WIDTH: 5e3,
+	HEIGHT: 3500
+};
+/**
+* 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
+});
+/** Top offset in pixels for node action toolbars. */
+var TOOLBAR_TOP_OFFSET = 30;
+/** Safety buffer in pixels applied above the toolbar. */
+var TOOLBAR_BUFFER = 5;
+/**
+* Boundary padding constraints for node dragging and positioning within the
+* viewport.
+*/
+var BOUNDS_CONSTRAINTS = {
+	horizontal: 55,
+	vertical: 40
+};
+/** Multiplier factor used to compute canvas virtual scroll dimensions. */
+var CANVAS_FACTOR = 5;
+/** Multiplier factor used to compute canvas scroll dimensions. */
+var SCROLL_MULTIPLIER = 3;
+/**
+* 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"
+	},
+	position: {
+		x: 350,
+		y: 100
+	}
+}];
+//#endregion
+//#region src/services/main.machine.typings.ts
+/** Schema definition for 2D coordinates `(x, y)`. */
+var point = type({
+	x: "number",
+	y: "number"
+});
+/**
+* Schema definition for node handle offsets (input and output).
+*
+* @see {@linkcode point}
+*/
+var nodeOffset = type(({ use }) => ({
+	input: use(point),
+	output: use(point)
+}));
+/** Schema definition for edge extremities. */
+var extremities = type({
+	from: "string",
+	to: "string"
+});
+/** Schema definition for primitive values allowed in node data. */
+var nodeDataValue = type(({ union }) => union("string", "boolean", "number"));
+/**
+* Schema definition for serialized node data dictionary.
+*
+* @see {@linkcode nodeDataValue}
+*/
+var data = type(({ record, use }) => record(use(nodeDataValue)));
+/**
+* Schema definition for a serialized flowchart node entity.
+*
+* @see {@linkcode point}, {@linkcode data}
+*/
+var nodeJSON = type(({ use }) => ({
+	position: use(point),
+	data: use(data)
+}));
+/**
+* Schema definition for a serialized flowchart edge entity.
+*
+* @see {@linkcode extremities}
+*/
+var edgeJSON = extremities;
+/**
+* Schema definition for layout dimensions and connection points of a node.
+*
+* @see {@linkcode point}
+*/
+var dimension = type(({ optional, use }) => ({
+	width: "number",
+	height: "number",
+	output: use(point),
+	input: optional(use(point)),
+	inputOffset: optional(use(point)),
+	outputOffset: optional(use(point))
+}));
+/**
+* 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"
+});
+/**
+* Schema definition for an ongoing new connection edge creation preview between
+* source node and cursor position.
+*
+* @see {@linkcode vector}
+*/
+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/ui/components/classes.ts
 /**
 * List of Tailwind CSS class names used across flowchart UI components to ensure
@@ -92,50 +270,11 @@ 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
+//#endregion
+//#region src/helpers/clamp.ts
+var clamp = (value, min, max) => {
+	return Math.min(Math.max(value, min), max);
 };
-/**
-* 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
 /**
@@ -152,13 +291,21 @@ var DEFAULT_NODES = [{
 *
 * @see {@linkcode createSolidContext}, {@linkcode useContext}
 */
-var createContext$1 = (context, options) => {
-	const _context = createContext(context(), options);
-	const Provider = ({ children }) => _context.Provider({
-		value: _context.defaultValue,
-		children
-	});
-	const _useContext = () => useContext(_context);
+var createContext = (context, options) => {
+	const _context = createContext$1(void 0, options);
+	const Provider = (props) => {
+		return createComponent$1(_context.Provider, {
+			value: context(),
+			get children() {
+				return props.children;
+			}
+		});
+	};
+	const _useContext = () => {
+		const __context = useContext(_context);
+		if (!__context) throw new Error("useContext must be used within a Provider");
+		return __context;
+	};
 	return [
 		Provider,
 		_useContext,
@@ -198,17 +345,17 @@ var buildNodeID = (generated) => {
 *
 * @returns Node layout dimension object of type {@linkcode Dimension}.
 *
-* @see {@linkcode getDefaultOutputOffset}, {@linkcode DEFAULT_INPUT_OFFSET}
+* @see {@linkcode getDefaultOutputOffset}, {@linkcode DEFAULT_INPUT_OFFSET}, {@linkcode DEFAULT_SIZE}
 */
 var calculateDimensions = (position, parentDimension = {
-	width: 192,
-	height: 50,
+	width: DEFAULT_SIZE.width,
+	height: DEFAULT_SIZE.height,
 	inputOffset: DEFAULT_INPUT_OFFSET
 }) => {
 	const width = parentDimension.width;
 	const height = parentDimension.height;
 	const outputOffset = parentDimension.outputOffset ?? getDefaultOutputOffset(width);
-	const inputOffset = parentDimension.inputOffset;
+	const inputOffset = parentDimension.inputOffset ?? DEFAULT_INPUT_OFFSET;
 	return {
 		width,
 		height,
@@ -225,92 +372,12 @@ var calculateDimensions = (position, parentDimension = {
 	};
 };
 //#endregion
-//#region src/services/main.machine.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.
-*
-* @see {@linkcode point}
-*/
-var nodeJSON = type(({ optional, use }) => ({
-	position: use(point),
-	data: {
-		label: optional("string"),
-		content: "string"
-	},
-	input: "boolean"
-}));
-/**
-* Schema definition for a serialized flowchart edge entity.
-*
-* @see {@linkcode extremities}
-*/
-var edgeJSON = extremities;
-/**
-* Schema definition for layout dimensions and connection points of a node.
-*
-* @see {@linkcode point}
-*/
-var dimension = type(({ optional, use }) => ({
-	width: "number",
-	height: "number",
-	output: use(point),
-	input: optional(use(point)),
-	inputOffset: optional(use(point)),
-	outputOffset: optional(use(point))
-}));
-/**
-* 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"
-});
-/**
-* Schema definition for an ongoing new connection edge creation preview between
-* source node and cursor position.
-*
-* @see {@linkcode vector}
-*/
-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}
+* @see {@linkcode calculateDimensions}, {@linkcode buildEdgeId}, {@linkcode buildNodeID}, {@linkcode getDefaultOutputOffset}, {@linkcode DEFAULT_INPUT_OFFSET}, {@linkcode DEFAULT_SIZE}, {@linkcode DEFAULT_DATA}
 */
 var machine = createMachine({
 	initial: "idle",
@@ -319,7 +386,7 @@ var machine = createMachine({
 		idle: { on: {
 			CONFIGURE: {
 				actions: ["configure"],
-				target: "/working"
+				target: "/construction"
 			},
 			CONFIGURE_EMPTY: "/working"
 		} },
@@ -328,6 +395,10 @@ var machine = createMachine({
 			target: "/working"
 		} },
 		working: { on: {
+			CONFIGURE: {
+				actions: ["configure"],
+				target: "/construction"
+			},
 			MOVE_IMMEDIATE: { actions: [{
 				name: "buildUI",
 				description: "Must be in the ui"
@@ -354,7 +425,6 @@ var machine = createMachine({
 				],
 				target: "/construction"
 			},
-			ADD_DIMENSION: { actions: ["addDimension"] },
 			ADD_SIBLING: {
 				actions: [
 					"generateID",
@@ -366,6 +436,7 @@ var machine = createMachine({
 				],
 				target: "/construction"
 			},
+			RESIZE: { actions: ["resize", "buildUI"] },
 			MOVE: {
 				actions: ["moveNode", "buildUI"],
 				target: "/construction"
@@ -385,14 +456,18 @@ var machine = createMachine({
 			DESELECT: { actions: ["deselect"] },
 			ZOOM: { actions: ["zoom"] },
 			TOGGLE_ZOOM: { actions: ["toggleZoom"] },
-			SET_BOARD: { actions: ["setBoard"] }
+			SET_BOARD: { actions: ["setBoard"] },
+			SET_NODE_DATA: { actions: ["setNodeData"] },
+			EDIT: { actions: ["edit"] },
+			STOP_EDIT: { actions: ["stopEdit"] }
 		} }
 	}
 }, {
-	eventsMap: type(({ intersection, use, array }) => ({
+	eventsMap: type(({ intersection, use, array, optional }) => ({
 		CONFIGURE: {
 			nodes: array(intersection(use(nodeJSON), { id: "string" })),
-			edges: array(intersection(use(edgeJSON), { id: "string" }))
+			edges: array(intersection(use(edgeJSON), { id: "string" })),
+			defaultData: optional(use(data))
 		},
 		SET_BOARD: use(board),
 		CONFIGURE_EMPTY: "never",
@@ -412,15 +487,24 @@ var machine = createMachine({
 		DELETE: "string",
 		SELECT: "string",
 		DESELECT: "never",
+		EDIT: "string",
+		STOP_EDIT: "never",
 		ADD_EDGE: use(extremities),
 		START_NEW_EDGE: "string",
 		MOVE_NEW_EDGE: use(point),
 		CLEAR_NEW_EDGE: "never",
 		ZOOM: "number",
 		TOGGLE_ZOOM: "never",
-		ADD_DIMENSION: {
+		RESIZE: {
+			id: "string",
+			size: {
+				width: "number",
+				height: "number"
+			}
+		},
+		SET_NODE_DATA: {
 			id: "string",
-			dimension: use(dimension)
+			data: use(data)
 		}
 	})),
 	sync: true,
@@ -428,6 +512,7 @@ var machine = createMachine({
 		generatedId: union("string", "null"),
 		previousZoom: optional("number"),
 		dimensions: record(use(dimension)),
+		defaultData: optional(use(data)),
 		getBoardPosition: custom(),
 		clampPosition: custom(),
 		calculateDimensions: custom()
@@ -447,18 +532,42 @@ var machine = createMachine({
 		edgesPositions: record(use(vector)),
 		newEdge: optional(use(newEdge)),
 		selected: optional("string"),
+		editing: optional("string"),
 		updatingUI: optional("boolean"),
 		zoom: "number",
 		bounds: use(point)
 	}))
 }).provideOptions(({ assign, batch, erase, filter, action }) => ({ actions: {
-	configure: batch(assign("data", { CONFIGURE: ({ payload }) => payload }), assign("newEdge", () => void 0), assign("updatingUI", () => false), action(({ pContext }) => {
+	configure: batch(assign("data", { CONFIGURE: ({ payload: { nodes, edges } }) => ({
+		nodes,
+		edges
+	}) }), assign("newEdge", () => void 0), assign("updatingUI", () => false), action(({ pContext }) => {
 		pContext.generatedId = null;
-	}), action({ CONFIGURE: ({ payload: { nodes }, pContext: { dimensions } }) => {
+	}), action({ CONFIGURE: ({ payload: { nodes, defaultData }, pContext }) => {
+		pContext.defaultData = defaultData;
 		nodes.forEach(({ id, position }) => {
-			dimensions[id] = calculateDimensions(position);
+			pContext.dimensions[id] = calculateDimensions(position);
 		});
 	} })),
+	setNodeData: assign("data.nodes", { SET_NODE_DATA: ({ context: { data }, payload: { id, data: newData } }) => {
+		return data?.nodes?.map((node) => {
+			if (node.id === id) return {
+				...node,
+				data: {
+					...node.data,
+					...newData
+				}
+			};
+			return node;
+		});
+	} }),
+	setBoard: assign("board", { SET_BOARD: ({ payload }) => payload }),
+	generateID: action(({ pContext }) => pContext.generatedId = nanoid()),
+	select: assign("selected", { SELECT: ({ payload }) => payload }),
+	clearNewEdge: erase("newEdge"),
+	deselect: batch(erase("selected"), erase("editing")),
+	edit: batch(assign("editing", { EDIT: ({ payload }) => payload }), assign("selected", { EDIT: ({ payload }) => payload })),
+	stopEdit: erase("editing"),
 	startNewEdge: assign("newEdge", { START_NEW_EDGE: ({ payload: from, pContext: { dimensions } }) => {
 		const { x, y } = dimensions[from].output;
 		return {
@@ -469,13 +578,13 @@ var machine = createMachine({
 			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;
+			if (!dimension) return;
+			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
@@ -484,44 +593,45 @@ var machine = createMachine({
 				x: payload.x + inputOffset.x,
 				y: payload.y + inputOffset.y
 			};
-			if (dimension) {
-				dimension.output = output;
-				dimension.input = input;
-			}
+			dimension.output = output;
+			dimension.input = input;
 			edges?.forEach(({ from, to, id }) => {
+				const edgePosition = edgesPositions[id];
+				if (!edgePosition) return;
 				if (from === payload.id) {
-					edgesPositions[id].x0 = output.x;
-					edgesPositions[id].y0 = output.y;
+					edgePosition.x0 = output.x;
+					edgePosition.y0 = output.y;
 				}
 				if (to === payload.id) {
-					edgesPositions[id].x1 = input.x;
-					edgesPositions[id].y1 = input.y;
+					edgePosition.x1 = input.x;
+					edgePosition.y1 = input.y;
 				}
 			});
 			return edgesPositions;
 		},
 		MOVE_IMMEDIATE: ({ context: { data, edgesPositions }, payload, pContext: { dimensions } }) => {
-			(data?.edges)?.forEach(({ from, to, id }) => {
+			data?.edges?.forEach(({ from, to, id }) => {
+				const dimension = dimensions[payload.id];
+				const edgePosition = edgesPositions[id];
+				if (!edgePosition || !dimension) return;
 				if (from === payload.id) {
-					const dimension = dimensions[payload.id];
-					const offset = dimension?.outputOffset ?? getDefaultOutputOffset(dimension?.width);
+					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;
-					}
+					edgePosition.x0 = x0;
+					edgePosition.y0 = y0;
+					dimension.output = {
+						x: x0,
+						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 = {
+					edgePosition.x1 = x1;
+					edgePosition.y1 = y1;
+					dimension.input = {
 						x: x1,
 						y: y1
 					};
@@ -529,32 +639,47 @@ var machine = createMachine({
 			});
 			return edgesPositions;
 		},
-		else: ({ context: { data, edgesPositions }, pContext: { dimensions } }) => {
-			const edges = data?.edges ?? [];
-			edgesPositions = {};
-			edges.forEach(({ from, id, to }) => {
+		else: ({ context: { data }, pContext: { dimensions } }) => {
+			const nextEdgesPositions = {};
+			data?.edges?.forEach(({ from, id, to }) => {
 				const output = dimensions[from]?.output;
 				const input = dimensions[to]?.input;
-				if (output && input) edgesPositions[id] = {
+				if (output && input) nextEdgesPositions[id] = {
 					x0: output.x,
 					y0: output.y,
 					x1: input.x,
 					y1: input.y
 				};
-				else delete edgesPositions[id];
 			});
-			return edgesPositions;
+			return nextEdgesPositions;
 		}
 	}), assign("updatingUI", () => true)),
-	addDimension: action({ ADD_DIMENSION: ({ payload: { id, dimension }, pContext: { dimensions } }) => {
-		dimensions[id] = dimension;
+	resize: action({ RESIZE: ({ payload: { id, size: { width, height } }, context: { data }, pContext: { dimensions } }) => {
+		const dimension = dimensions[id];
+		if (!dimension) return;
+		dimension.width = width;
+		dimension.height = height;
+		const node = data?.nodes?.find((n) => n.id === id);
+		const outputOffset = getDefaultOutputOffset(width);
+		const inputOffset = dimension.inputOffset ?? DEFAULT_INPUT_OFFSET;
+		dimension.outputOffset = outputOffset;
+		dimension.inputOffset = inputOffset;
+		if (node) {
+			dimension.output = {
+				x: node.position.x + outputOffset.x,
+				y: node.position.y + outputOffset.y
+			};
+			dimension.input = {
+				x: node.position.x + inputOffset.x,
+				y: node.position.y + inputOffset.y
+			};
+		} else dimension.output = {
+			x: dimension.output.x,
+			y: dimension.output.y
+		};
 	} }),
-	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;
+	linkChild: batch(assign("data.edges", { ADD_CHILD: ({ context: { data }, pContext, payload: from }) => {
+		const edges = toArray.typed(data?.edges);
 		const generatedId = pContext?.generatedId;
 		const to = buildNodeID(generatedId);
 		const id = buildEdgeId(from, to);
@@ -566,7 +691,7 @@ var machine = createMachine({
 		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 edges = toArray.typed(data?.edges);
 		const generatedId = pContext?.generatedId;
 		const from = edges.find(({ to }) => to === payload)?.from;
 		if (!from) return edges;
@@ -580,23 +705,21 @@ var machine = createMachine({
 		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;
-		return data?.nodes?.map((d) => {
-			if (d.id === id) return {
-				...d,
+	moveNode: assign("data.nodes", { MOVE: ({ context: { data }, payload: { id, x, y } }) => {
+		return data?.nodes?.map((node) => {
+			if (node.id === id) return {
+				...node,
 				position: {
 					x,
 					y
 				}
 			};
-			return d;
-		}) ?? [];
+			return node;
+		});
 	} }),
-	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 })),
+	} }), filter("data.nodes", { DELETE: ({ id }, _, { payload }) => id !== payload }), erase("editing")),
 	addEdge: batch(assign("data.edges", { ADD_EDGE: ({ context, payload: { from, to } }) => {
 		const edges = context.data?.edges ?? [];
 		const id = buildEdgeId(from, to);
@@ -607,11 +730,8 @@ var machine = createMachine({
 			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);
+		const clamped = clamp(zoom + payload, .1, 3);
 		pContext.previousZoom = void 0;
 		return clamped;
 	} }),
@@ -623,6 +743,84 @@ var machine = createMachine({
 		}
 		pContext.previousZoom = zoom;
 		return 1;
+	} }),
+	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);
+		if (!parentNode) return nodes;
+		const parentDimension = pContext.dimensions[payload];
+		const id = `node-${pContext.generatedId}`;
+		const width = parentDimension?.width ?? DEFAULT_SIZE.width;
+		const height = parentDimension?.height ?? DEFAULT_SIZE.height;
+		const initialX = parentNode.position.x + width + 100;
+		const initialY = parentNode.position.y;
+		const position = pContext.clampPosition(board, initialX, initialY, width, height);
+		const defaultData = pContext.defaultData ?? DEFAULT_DATA;
+		nodes?.push({
+			id,
+			data: { ...defaultData },
+			position
+		});
+		pContext.dimensions[id] = pContext.calculateDimensions(position, parentDimension ?? DEFAULT_SIZE);
+		return nodes;
+	} }),
+	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?.width ?? 0;
+		const height = container?.height ?? 0;
+		const currentZoom = zoom;
+		const x = (scrollLeft + width / 2) / currentZoom;
+		const y = (scrollTop + height / 2) / currentZoom;
+		const position = pContext.clampPosition(board, x, y, DEFAULT_SIZE.width, DEFAULT_SIZE.height);
+		const defaultData = pContext.defaultData ?? DEFAULT_DATA;
+		nodes?.push({
+			id,
+			data: { ...defaultData },
+			position
+		});
+		pContext.dimensions[id] = pContext.calculateDimensions(position, DEFAULT_SIZE);
+		return nodes;
+	} }),
+	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);
+		if (!parentNode) return nodes;
+		const parentDimension = pContext.dimensions[parentID];
+		const id = `node-${pContext.generatedId}`;
+		const width = parentDimension?.width ?? DEFAULT_SIZE.width;
+		const height = parentDimension?.height ?? DEFAULT_SIZE.height;
+		const initialX = parentNode.position.x + width + 100;
+		const initialY = parentNode.position.y + 100;
+		const position = pContext.clampPosition(board, initialX, initialY, width, height);
+		const defaultData = pContext.defaultData ?? DEFAULT_DATA;
+		nodes?.push({
+			id,
+			data: { ...defaultData },
+			position
+		});
+		pContext.dimensions[id] = pContext.calculateDimensions(position, parentDimension ?? DEFAULT_SIZE);
+		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
+		};
 	} })
 } }));
 //#endregion
@@ -633,7 +831,7 @@ var machine = createMachine({
 *
 * @see {@linkcode machine}, {@linkcode createContext}
 */
-var [Provider, useFlow] = createContext$1(() => {
+var [Provider, useFlow] = createContext(() => {
 	/** Shared service for flowchart state management. */
 	const service = interpret(machine, {
 		context: {
@@ -656,7 +854,7 @@ var [Provider, useFlow] = createContext$1(() => {
 			*
 			* @returns Calculated 2D coordinate of type {@linkcode Point}.
 			*/
-			getBoardPosition(clientX, clientY, el) {
+			getBoardPosition: (clientX, clientY, el) => {
 				if (!el) return {
 					x: clientX,
 					y: clientY
@@ -674,14 +872,15 @@ var [Provider, useFlow] = createContext$1(() => {
 			*   {@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`.
+			* @param nodeWidth - Node width in pixels, defaults to `DEFAULT_SIZE.width`.
+			* @param nodeHeight - Node height in pixels, defaults to
+			*   `DEFAULT_SIZE.height`.
 			*
 			* @returns Clamped coordinate of type {@linkcode Point}.
 			*
-			* @see {@linkcode BOUNDS_CONSTRAINTS}
+			* @see {@linkcode BOUNDS_CONSTRAINTS}, {@linkcode DEFAULT_SIZE}
 			*/
-			clampPosition(board, x, y, nodeWidth = 192, nodeHeight = 50) {
+			clampPosition: (board, x, y, nodeWidth = DEFAULT_SIZE.width, nodeHeight = DEFAULT_SIZE.height) => {
 				const container = board?.parent;
 				if (!container) return {
 					x,
@@ -693,8 +892,8 @@ var [Provider, useFlow] = createContext$1(() => {
 				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)
+					x: clamp(x, minX, maxX),
+					y: clamp(y, minY, maxY)
 				};
 			},
 			/**
@@ -705,17 +904,17 @@ var [Provider, useFlow] = createContext$1(() => {
 			*
 			* @returns Calculated dimension object of type {@linkcode Dimension}.
 			*
-			* @see {@linkcode DEFAULT_INPUT_OFFSET}, {@linkcode getDefaultOutputOffset}
+			* @see {@linkcode DEFAULT_INPUT_OFFSET}, {@linkcode getDefaultOutputOffset}, {@linkcode DEFAULT_SIZE}
 			*/
 			calculateDimensions: (position, parentDimension = {
-				width: 192,
-				height: 50,
+				width: DEFAULT_SIZE.width,
+				height: DEFAULT_SIZE.height,
 				inputOffset: DEFAULT_INPUT_OFFSET
 			}) => {
 				const width = parentDimension.width;
 				const height = parentDimension.height;
 				const outputOffset = parentDimension.outputOffset ?? getDefaultOutputOffset(width);
-				const inputOffset = parentDimension.inputOffset;
+				const inputOffset = parentDimension.inputOffset ?? DEFAULT_INPUT_OFFSET;
 				return {
 					width,
 					height,
@@ -733,89 +932,6 @@ var [Provider, useFlow] = createContext$1(() => {
 			}
 		}
 	});
-	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);
-			if (!parentNode) return nodes;
-			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 = 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("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?.width ?? 0;
-			const height = container?.height ?? 0;
-			const currentZoom = zoom;
-			const x = (scrollLeft + width / 2) / currentZoom;
-			const y = (scrollTop + height / 2) / currentZoom;
-			const position = pContext.clampPosition(board, x, y);
-			const dimension = pContext.calculateDimensions(position);
-			nodes?.push({
-				id,
-				data: { content: "<Nouveau nœud>" },
-				input: false,
-				position
-			});
-			pContext.dimensions[id] = dimension;
-			return nodes;
-		} }),
-		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);
-			if (!parentNode) return nodes;
-			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 = 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;
-		} }),
-		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 service;
 }, { name: "FlowContext" });
@@ -869,14 +985,14 @@ var DragBounds = () => {
 };
 //#endregion
 //#region src/ui/components/EdgeComponent.tsx
-var _tmpl$$4 = [
+var _tmpl$$10 = [
 	"<path",
 	" class=\"",
 	"\" style=\"",
 	"\"",
 	"></path>"
 ];
-var _tmpl$2$2 = [
+var _tmpl$2$5 = [
 	"<g",
 	" cursor=\"pointer\" transform=\"",
 	"\" style=\"",
@@ -889,6 +1005,13 @@ var _tmpl$2$2 = [
 *
 * @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
@@ -900,7 +1023,9 @@ var calculateOffset = (value) => value * 100 / 200;
 *
 * @see {@linkcode calculateOffset}
 */
-var draw = ({ x0, y0, x1, y1 }) => {
+var draw = (vector) => {
+	if (!vector) return "";
+	const { x0, y0, x1, y1 } = vector;
 	return `M ${x0} ${y0} C ${x0 + calculateOffset(Math.abs(x1 - x0))} ${y0}, ${x1 - calculateOffset(Math.abs(x1 - x0))} ${y1}, ${x1} ${y1}`;
 };
 /**
@@ -926,23 +1051,32 @@ var EdgeComponent = (props) => {
 	/** 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 [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(vector()), true), false)), createComponent(Show, {
+	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$$10, ssrHydrationKey(), `relative cursor-pointer fill-transparent ${!!props.isNew ? "stroke-[rgba(168,168,168,0.4)] stroke-3 z-200" : ""} ${selected() && !props.isNew ? "stroke-[rgba(168,168,168,1)] stroke-4 z-100" : ""} ${!selected() && !props.isNew ? "stroke-[rgba(168,168,168,0.8)] stroke-3" : ""}`, ssrStyleProperty("pointer-events:", props.isNew ? "none" : "all"), ssrAttribute("d", escape(draw(v()), true), false)), createComponent(Show, {
+			get when() {
+				return selected();
+			},
+			get children() {
+				return ssr(_tmpl$2$5, ssrHydrationKey(), `translate(${escape(middlePoint().x, true)}, ${escape(middlePoint().y, true)})`, ssrStyleProperty("pointer-events:", "all") + ssrStyleProperty(";z-index:", "30"));
+			}
+		})]
+	});
 };
 //#endregion
 //#region src/ui/components/EdgesBoard.tsx
-var _tmpl$$3 = [
+var _tmpl$$9 = [
 	"<svg",
 	" class=\"pointer-events-none h-full w-full overflow-visible\"><!--$-->",
 	"<!--/--><!--$-->",
@@ -960,10 +1094,10 @@ var EdgesBoard = () => {
 	const service = useFlow();
 	const hasNewEdge = createState(service, { selector: (s) => !!s.context.newEdge });
 	const edgeIds = createState(service, {
-		selector: ({ context }) => Object.keys(context.edgesPositions),
+		selector: ({ context }) => Object.keys(context.edgesPositions ?? {}),
 		equals: (prev, next) => prev.length === next.length
 	});
-	return ssr(_tmpl$$3, ssrHydrationKey(), escape(createComponent(Show, {
+	return ssr(_tmpl$$9, ssrHydrationKey(), escape(createComponent(Show, {
 		get when() {
 			return hasNewEdge();
 		},
@@ -982,18 +1116,12 @@ var EdgesBoard = () => {
 };
 //#endregion
 //#region src/ui/components/NodeComponent.tsx
-var _tmpl$$2 = [
+var _tmpl$$8 = [
 	"<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$1 = [
-	"<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$1 = [
+var _tmpl$2$4 = [
 	"<div",
 	" class=\"",
 	"\" style=\"",
@@ -1002,28 +1130,44 @@ var _tmpl$3$1 = [
 	"\"><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\" 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=\"",
+	"\"><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></div></div>"
 ];
+var _tmpl$3$2 = [
+	"<div",
+	" class=\"p-3 select-none\"><!--$-->",
+	"<!--/--><!--$-->",
+	"<!--/--><!--$-->",
+	"<!--/--></div>"
+];
 var _tmpl$4 = [
 	"<span",
-	" class=\"min-w-max border-b border-[#f0f0f0] p-3 whitespace-nowrap text-red-600 select-none\">",
+	" class=\"mb-2 block min-w-max border-b border-[#f0f0f0] pb-2 font-semibold whitespace-nowrap text-red-600 select-none\">",
 	"</span>"
 ];
 var _tmpl$5 = [
 	"<div",
-	" class=\"p-3 select-none\">",
+	" class=\"select-none\">",
 	"</div>"
 ];
+var _tmpl$6 = [
+	"<div",
+	"><span class=\"font-semibold\"><!--$-->",
+	"<!--/-->: </span><span>",
+	"</span></div>"
+];
 /**
 * Interactive flowchart node component supporting dragging, selection, handle
 * connections, and child/sibling creation.
 *
-* @param props - Node rendering properties of type {@linkcode Props}.
+* @template | {@linkcode NodeData} `D` - Custom node data dictionary type extending
+*   {@linkcode NodeData}.
+*
+* @param props - Node rendering properties of type {@linkcode NodeComponentProps}.
 *
 * @returns The rendered Solid component.
 *
@@ -1031,60 +1175,134 @@ var _tmpl$5 = [
 */
 var NodeComponent = (props) => {
 	const service = useFlow();
+	createState(service, { selector: (s) => s.context.newEdge });
+	createDraggable(props.id);
 	const node = createState(service, {
 		selector: ({ context }) => {
-			const item = toArray.typed(context.data?.nodes).find((n) => n.id === props.id);
+			const item = toArray$1.typed(context.data?.nodes).find((n) => n.id === props.id);
 			return {
-				x: item.position.x,
-				y: item.position.y,
-				label: item.data.label,
-				content: item.data.content ?? "",
-				input: item.input
+				x: item?.position.x ?? 0,
+				y: item?.position.y ?? 0,
+				data: item?.data ?? {}
 			};
 		},
 		equals: dequal
 	});
-	createState(service, { selector: (s) => s.context.newEdge });
-	const selected = createState(service, { selector: (s) => s.context.selected === props.id });
+	const selected = createState(service, { selector: ({ context }) => 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(), `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" : ""} min-w-48`, ssrStyleProperty("top:", `${escape(node().y, true)}px`) + ssrStyleProperty(";left:", `${escape(node().x, true)}px`), ssrAttribute("id", escape(props.id, true), false), `pointer-events-none absolute flex items-center justify-end -top-7.5 right-0 transition-all duration-200 ease-in-out space-x-2 ${selected() ? "w-full opacity-100" : ""} ${!selected() ? "w-0 -right-3 opacity-0 overflow-hidden" : ""}`, ssrStyleProperty("overflow:", "visible") + ssrStyleProperty(";pointer-events:", "all") + ssrStyleProperty(";width:", `${escape(12, true) * 2}px`) + ssrStyleProperty(";height:", `${escape(12, true) * 2}px`), escape(createComponent(Show, {
 		get when() {
 			return hasParent();
 		},
 		get children() {
-			return ssr(_tmpl$$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`));
+			return ssr(_tmpl$$8, ssrHydrationKey(), ssrStyleProperty("pointer-events:", "all") + ssrStyleProperty(";fill-rule:", "evenodd") + ssrStyleProperty(";clip-rule:", "evenodd") + ssrStyleProperty(";stroke-linejoin:", "round") + ssrStyleProperty(";stroke-miterlimit:", "2") + ssrStyleProperty(";width:", `${escape(12, true) * 2}px`) + ssrStyleProperty(";height:", `${escape(12, true) * 2}px`));
 		}
 	})), ssrStyleProperty("pointer-events:", "all") + ssrStyleProperty(";width:", `${escape(12, true) * 2}px`) + ssrStyleProperty(";height:", `${escape(12, true) * 2}px`), escape(createComponent(Show, {
 		get when() {
-			return node().label;
-		},
-		keyed: true,
-		children: (label) => ssr(_tmpl$4, ssrHydrationKey(), escape(label))
-	})), escape(createComponent(Show, {
-		get when() {
-			return node().content;
+			return props.children;
 		},
-		keyed: true,
-		children: (content) => ssr(_tmpl$5, ssrHydrationKey(), escape(content))
-	})), escape(createComponent(Show, {
-		get when() {
-			return node().input || hasParent();
+		get fallback() {
+			return ssr(_tmpl$3$2, ssrHydrationKey(), escape(createComponent(Show, {
+				get when() {
+					return node().data.label;
+				},
+				keyed: true,
+				children: (label) => ssr(_tmpl$4, ssrHydrationKey(), escape(String(label)))
+			})), escape(createComponent(Show, {
+				get when() {
+					return node().data.content;
+				},
+				keyed: true,
+				children: (content) => ssr(_tmpl$5, ssrHydrationKey(), escape(String(content)))
+			})), escape(createComponent(Show, {
+				get when() {
+					return memo(() => !!!node().data.label)() && !node().data.content;
+				},
+				get children() {
+					return createComponent(For, {
+						get each() {
+							return Object.entries(node().data);
+						},
+						children: ([key, val]) => ssr(_tmpl$6, ssrHydrationKey(), escape(key), escape(String(val)))
+					});
+				}
+			})));
 		},
 		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"));
+			return createComponent(Dynamic, mergeProps({ get component() {
+				return props.children;
+			} }, () => node().data));
 		}
-	})), 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`), 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/Panels.tsx
+var _tmpl$$7 = [
+	"<div",
+	" class=\"absolute top-4 left-4 z-50\">",
+	"</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>"
+];
+/**
+* Overlay container rendering custom panel slots positioned around the flowchart
+* canvas.
+*
+* @param props - Flow panels layout properties of type {@linkcode FlowPanels}.
+*
+* @returns Rendered overlay panels JSX elements.
+*/
+var Panels = (props) => {
+	return [
+		createComponent(Show, {
+			get when() {
+				return props.topLeft;
+			},
+			keyed: true,
+			children: (Panel) => {
+				const Component = typeof Panel === "function" ? createComponent(Panel, {}) : Panel;
+				return ssr(_tmpl$$7, ssrHydrationKey(), escape(Component));
+			}
+		}),
+		createComponent(Show, {
+			get when() {
+				return props.topRight;
+			},
+			keyed: true,
+			children: (Panel) => {
+				const Component = typeof Panel === "function" ? createComponent(Panel, {}) : Panel;
+				return ssr(_tmpl$2$3, ssrHydrationKey(), escape(Component));
+			}
+		}),
+		createComponent(Show, {
+			get when() {
+				return props.bottomLeft;
+			},
+			keyed: true,
+			children: (Panel) => {
+				const Component = typeof Panel === "function" ? createComponent(Panel, {}) : Panel;
+				return ssr(_tmpl$3$1, ssrHydrationKey(), escape(Component));
+			}
+		})
+	];
 };
 //#endregion
 //#region src/ui/components/NodesBoard.tsx
-var _tmpl$$1 = [
+var _tmpl$$6 = [
 	"<div",
-	" class=\"relative h-full w-full overflow-auto rounded-lg border-2 border-gray-600\"><!--$-->",
+	" class=\"relative h-full w-full overflow-auto\"><!--$-->",
 	"<!--/--><div class=\"",
 	"\" style=\"",
 	"\"><div class=\"relative h-full w-full\" style=\"",
@@ -1093,32 +1311,36 @@ var _tmpl$$1 = [
 	"<!--/--><!--$-->",
 	"<!--/--></div></div></div>"
 ];
-var _tmpl$2 = [
+var _tmpl$2$2 = [
 	"<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>"
 ];
 var _tmpl$3 = [
 	"<div",
-	" class=\"relative mx-auto h-[calc(100vh-64px)] w-[calc(100vw-32px)] overflow-hidden\">",
+	" class=\"relative mx-auto h-full w-full overflow-hidden\">",
 	"</div>"
 ];
 /**
 * Interactive board component containing the drag-drop viewport, zoom controls,
 * panning gestures, and rendered nodes/edges.
 *
+* @template | {@linkcode NodeData} `D` - Custom node data dictionary type extending
+*   {@linkcode NodeData}.
+*
+* @param props - Board component properties of type {@linkcode Props}.
+*
 * @returns The rendered Solid component.
 *
 * @see {@linkcode DragBounds}, {@linkcode EdgesBoard}, {@linkcode NodeComponent}, {@linkcode useFlow}, {@linkcode CANVAS_FACTOR}, {@linkcode SCROLL_MULTIPLIER}
 */
-var NodesBoard = () => {
+var NodesBoard = (props) => {
 	let containerRef;
 	const [isPanning, setIsPanning] = createSignal(false);
 	const [transform, setTransform] = createSignal({
 		x: 0,
 		y: 0
 	});
-	const [id, setId] = createSignal("");
 	const [ref, setRef] = createSignal();
 	let percentX = 0;
 	let percentY = 0;
@@ -1164,17 +1386,9 @@ var NodesBoard = () => {
 	}, { defer: true }));
 	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 nodeIds = createState(service, {
 		selector: ({ context }) => {
-			return toArray.typed(context.data?.nodes).map((item) => item.id);
+			return toArray$1.typed(context.data?.nodes).map((item) => item.id);
 		},
 		equals: (prev, next) => prev.length === next.length
 	});
@@ -1187,37 +1401,33 @@ var NodesBoard = () => {
 	const cHeight = () => `calc((${CANVAS_SIZE}vh - ${MARGIN_Y}px) * ${zoom()})`;
 	return ssr(_tmpl$3, ssrHydrationKey(), escape(createComponent(DragDropProvider, {
 		onDragMove: ({ draggable: { transform: _transform, node, id } }) => {
-			setId(id);
-			if (selected(id)) {
-				const grandParent = node.parentElement?.parentElement;
-				const currentZoom = zoom();
-				const minX = 0;
-				const maxX = grandParent ? Math.max(0, grandParent.clientWidth / currentZoom - node.offsetWidth) : Infinity;
-				const minY = 0;
-				const maxY = grandParent ? Math.max(0, grandParent.clientHeight / currentZoom - node.offsetHeight) : Infinity;
-				const targetX = node.offsetLeft + _transform.x / currentZoom;
-				const targetY = node.offsetTop + _transform.y / currentZoom;
-				const x = Math.min(Math.max(targetX, minX), maxX);
-				const y = Math.min(Math.max(targetY, minY), maxY);
-				const deltaX = x - node.offsetLeft;
-				const deltaY = y - node.offsetTop;
-				node.style.setProperty("transform", `translate3d(${deltaX}px, ${deltaY}px, 0)`);
-				service.send({
-					type: "MOVE_IMMEDIATE",
-					payload: {
-						id: `${id}`,
-						x,
-						y
-					}
-				});
-				setTransform({
-					x: deltaX * currentZoom,
-					y: deltaY * currentZoom
-				});
-			}
+			const grandParent = node.parentElement?.parentElement;
+			const currentZoom = zoom();
+			const minX = 0;
+			const maxX = grandParent ? Math.max(0, grandParent.clientWidth / currentZoom - node.offsetWidth) : Infinity;
+			const minY = 0;
+			const maxY = grandParent ? Math.max(0, grandParent.clientHeight / currentZoom - node.offsetHeight) : Infinity;
+			const targetX = node.offsetLeft + _transform.x / currentZoom;
+			const targetY = node.offsetTop + _transform.y / currentZoom;
+			const x = Math.min(Math.max(targetX, minX), maxX);
+			const y = Math.min(Math.max(targetY, minY), maxY);
+			const deltaX = x - node.offsetLeft;
+			const deltaY = y - node.offsetTop;
+			node.style.setProperty("transform", `translate3d(${deltaX}px, ${deltaY}px, 0)`);
+			service.send({
+				type: "MOVE_IMMEDIATE",
+				payload: {
+					id: `${id}`,
+					x,
+					y
+				}
+			});
+			setTransform({
+				x: deltaX * currentZoom,
+				y: deltaY * currentZoom
+			});
 		},
 		onDragEnd: ({ draggable: { node, id } }) => {
-			if (!selected(id)) return;
 			const grandParent = node.parentElement?.parentElement;
 			const currentZoom = zoom();
 			const minX = 0;
@@ -1248,16 +1458,22 @@ var NodesBoard = () => {
 		},
 		get children() {
 			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, {
+				ssr(_tmpl$$6, ssrHydrationKey(), escape(createComponent(DragDropSensors, {})), `relative cursor-crosshair overflow-hidden ${isPanning() ? "cursor-grabbing" : ""}`, ssrStyleProperty("height:", escape(cHeight(), true)) + ssrStyleProperty(";width:", escape(cWidth(), true)), ssrStyleProperty("scale:", escape(zoom(), true)) + ssrStyleProperty(";transform-origin:", "top left"), escape(createComponent(DragBounds, {})), escape(createComponent(EdgesBoard, {})), escape(createComponent(For, {
 					get each() {
 						return nodeIds();
 					},
-					children: (id) => createComponent(NodeComponent, { id })
+					children: (id) => createComponent(NodeComponent, {
+						id,
+						get children() {
+							return props.component;
+						}
+					})
 				}))),
-				ssr(_tmpl$2, ssrHydrationKey(), escape(Math.round(zoom() * 100))),
+				createComponent(Panels, mergeProps(() => props.panels)),
+				ssr(_tmpl$2$2, ssrHydrationKey(), escape(Math.round(zoom() * 100))),
 				createComponent(Show, {
 					get when() {
-						return !id() || !selected(id());
+						return !selectedId();
 					},
 					get children() {
 						return createComponent(DragOverlay, { children: "" });
@@ -1269,9 +1485,9 @@ var NodesBoard = () => {
 };
 //#endregion
 //#region src/ui/components/FlowChart.tsx
-var _tmpl$ = [
+var _tmpl$$5 = [
 	"<div",
-	" class=\"relative h-full w-full\"><div class=\"relative h-full w-full bg-white bg-size-[30px_30px]\" style=\"",
+	" class=\"relative h-full w-full\"><div class=\"h-full w-full\" style=\"",
 	"\">",
 	"</div></div>"
 ];
@@ -1279,6 +1495,9 @@ var _tmpl$ = [
 * Flowchart board canvas component that renders interactive nodes, edges, pan/zoom,
 * and toolbar controls.
 *
+* @template | {@linkcode NodeData} `D` - Custom node data dictionary type extending
+*   {@linkcode NodeData}.
+*
 * @param props - Flowchart configuration and event handlers of type
 *   {@linkcode FlowProps}.
 *
@@ -1291,34 +1510,503 @@ var FlowChart = (props) => {
 	const primaryEdges = props.config?.edges;
 	const service = useFlow();
 	const hasNewEdge = createState(service, { selector: (s) => !!s.context.newEdge });
+	onCleanup(service.pause);
 	onMount(() => {
 		service.resume();
 		service.send({
 			type: "CONFIGURE",
 			payload: {
 				nodes: primaryNodes,
-				edges: primaryEdges ?? []
+				edges: primaryEdges ?? [],
+				defaultData: props.defaultData
 			}
 		});
 	});
-	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, {})));
+	return ssr(_tmpl$$5, ssrHydrationKey(), ssrStyleProperty("cursor:", hasNewEdge() ? "inherit" : "crosshair"), escape(createComponent(NodesBoard, {
+		get panels() {
+			return props.panels;
+		},
+		get component() {
+			return props.component;
+		}
+	})));
+};
+//#endregion
+//#region src/ui/utils.ts
+/**
+* Merges conditional CSS class names using `clsx` and resolves Tailwind CSS class
+* conflicts with `twMerge`.
+*
+* @param inputs - Variable list of class values, objects, or arrays.
+*
+* @returns The resolved single class name string.
+*/
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+//#endregion
+//#region src/ui/globals/helpers/espace.ts
+/**
+* Returns a zero-width space if string is empty, preserving layout flow.
+*
+* @param newText - The input text string.
+*
+* @returns The input text or zero-width visible space placeholder.
+*/
+var espace = (newText) => {
+	if (newText === "") return "​";
+	return newText;
+};
+//#endregion
+//#region src/ui/globals/signals/createTyping.ts
+/**
+* Creates a reactive typewriter effect signal with oscillatory typing delay and
+* optional rewind.
+*
+* @param props - Configuration properties of type {@linkcode Props}.
+*
+* @returns An object containing the current text signal, type trigger, and text
+*   setter.
+*/
+var createTyping = ({ content, min, ...props }) => {
+	const rewind = props.rewind ?? false;
+	const rewindDelay = props.rewindDelay ?? 500;
+	const OSCILLATION = Math.min(min / 10 + content.length / 10, 10);
+	const [text, setText] = createSignal("​");
+	let timeoutId;
+	let index = 0;
+	let isTyping = true;
+	const max = min + OSCILLATION;
+	let interval = min;
+	let intervalDirection = 1;
+	const type = () => {
+		if (isTyping) {
+			if (index < content.length) {
+				setText((prev) => prev + content[index]);
+				index++;
+				timeoutId = setTimeout(type, interval);
+			} else if (rewind) {
+				isTyping = false;
+				intervalDirection = 1;
+				timeoutId = setTimeout(type, rewindDelay);
+			}
+		} else if (index > 0) {
+			index--;
+			setText(espace(content.substring(0, index)));
+			timeoutId = setTimeout(type, interval);
+		} else {
+			isTyping = true;
+			intervalDirection = 1;
+			timeoutId = setTimeout(type, rewindDelay);
+		}
+		interval += intervalDirection;
+		if (interval >= max) intervalDirection = -1;
+		else if (interval <= min) intervalDirection = 1;
+	};
+	onCleanup(() => {
+		if (timeoutId !== void 0) clearTimeout(timeoutId);
+	});
+	return {
+		text,
+		type,
+		setText
+	};
+};
+//#endregion
+//#region src/ui/globals/components/atoms/TypingText.tsx
+var _tmpl$$4 = [
+	"<div",
+	">",
+	"</div>"
+];
+/**
+* Renders animated text with a typewriter keystroke animation effect.
+*
+* @param props - Component configuration properties of type {@linkcode Props}.
+*
+* @returns Rendered animated typing text JSX container.
+*/
+var TypingText = (props) => {
+	const min = props.interval ?? 62;
+	const rewind = props.rewind ?? false;
+	const rewindDelay = props.rewindDelay ?? 500;
+	const content = props.children;
+	const disabled = createMemo(() => props.disabled ? props.disabled() : false, false);
+	const { text, type, setText } = createTyping({
+		content,
+		min,
+		rewind,
+		rewindDelay
+	});
+	createEffect(on(disabled, () => setText("​")));
+	createEffect(() => {
+		if (disabled()) setText(content);
+		else type();
+	});
+	return ssr(_tmpl$$4, ssrHydrationKey() + ssrAttribute("class", escape(props.class, true), false), escape(text()));
+};
+//#endregion
+//#region src/ui/globals/components/molecules/FadingDots.tsx
+var _tmpl$$3 = [
+	"<div",
+	" class=\"mt-4 flex items-center justify-center space-x-4\">",
+	"</div>"
+];
+/**
+* Loading animation component displaying animated pulsing dots.
+*
+* @param props - Fading dots configuration properties.
+* @param props.count - The number of dots to display.
+* @param props.duration - Animation duration in milliseconds. Defaults to 500.
+* @param props.innerProps - Additional properties and CSS styles applied to dot
+*   elements.
+*
+* @returns Rendered animated dots container JSX element.
+*/
+var FadingDots = ({ count: length, innerProps = {}, duration = 500 }) => {
+	const [local, rest] = splitProps(innerProps, ["class", "style"]);
+	return ssr(_tmpl$$3, ssrHydrationKey(), escape(Array.from({ length }, (_, i) => ssrElement("span", mergeProps({
+		get ["class"]() {
+			return cn("rounded-full animate-out direction-alternate repeat-infinite fade-out-5 size-4  bg-gray-600", local.class);
+		},
+		get style() {
+			return {
+				...local.style,
+				"animation-duration": `${duration}ms`,
+				"animation-delay": `${duration / i}ms`
+			};
+		},
+		"aria-hidden": "true"
+	}, rest), void 0, true))));
+};
+//#endregion
+//#region src/ui/globals/components/organisms/LoadingFallback.tsx
+var _tmpl$$2 = [
+	"<div",
+	" role=\"status\" aria-live=\"polite\" aria-label=\"Chargement en cours\"><div class=\"relative\"><div",
+	" aria-hidden=\"true\"></div><div",
+	" aria-hidden=\"true\"></div></div><div class=\"text-center\"",
+	"><!--$-->",
+	"<!--/--><!--$-->",
+	"<!--/--></div></div>"
+];
+/**
+* Fallback loading screen component displaying an animated spinner and typewriter
+* text.
+*
+* @example
+*   ```tsx
+*   <Show when={data()} fallback={<LoadingFallback />}>
+*     <DataComponent data={data()!} />
+*   </Show>;
+*   ```;
+*
+* @param props - Loading fallback properties of type
+*   {@linkcode LoadingFallbackProps}.
+*
+* @returns Rendered full-screen loading fallback JSX element.
+*/
+var LoadingFallback = (props) => {
+	const message = props.message ?? "Chargement en cours...";
+	const spinnerSizes = {
+		sm: "w-8 h-8",
+		md: "w-12 h-12",
+		lg: "w-16 h-16",
+		xl: "w-24 h-24"
+	};
+	const size = props.size ?? "lg";
+	return ssr(_tmpl$$2, ssrHydrationKey() + ssrAttribute("class", escape(cn("flex flex-col items-center justify-center gap-6", "h-screen w-screen overflow-hidden p-4", props.class), true), false), ssrAttribute("class", escape(cn(spinnerSizes[size], "rounded-full border-4 border-[#4B9CAD]/20", "animate-spin", "border-t-[#4B9CAD]"), true), false), ssrAttribute("class", escape(cn("absolute inset-2", "rounded-full border-4 border-transparent", "border-b-[#4B9CAD]/40", "animate-spin", "animation-duration-[1.5s]", "direction-[reverse]"), true), false), ssrAttribute("aria-label", escape(message, true), false), escape(createComponent(TypingText, {
+		"class": "text-lg font-medium text-gray-700 md:text-xl dark:text-gray-300",
+		get interval() {
+			return props.interval ?? 80;
+		},
+		get rewind() {
+			return props.rewind ?? true;
+		},
+		get rewindDelay() {
+			return props.rewindDelay ?? 2e3;
+		},
+		children: message
+	})), escape(createComponent(FadingDots, {
+		count: 5,
+		innerProps: { class: "bg-[#3d8091]" }
+	})));
 };
 //#endregion
 //#region src/ui/Flow.tsx
+var _tmpl$$1 = [
+	"<div",
+	" style=\"",
+	"\" class=\"relative flex h-full w-full rounded-lg border-2 border-gray-600 bg-white bg-size-[30px_30px]\">",
+	"</div>"
+];
+var _tmpl$2$1 = [
+	"<div",
+	" class=\"relative flex flex-1 items-center justify-center\">",
+	"</div>"
+];
 /**
 * Root Flow component wrapping the {@linkcode FlowChart} inside the flow context
 * provider.
 *
+* @template | {@linkcode NodeData} `D` - Custom node data dictionary type extending
+*   {@linkcode NodeData}.
+*
 * @param props - Flow chart configuration and callbacks of type
 *   {@linkcode FlowProps}.
 *
 * @returns The rendered Solid component.
 *
-* @see {@linkcode Provider}
+* @see {@linkcode Provider}, {@linkcode FlowChart}
+*/
+var Flow = (props) => {
+	const [isMounted, setIsMounted] = createSignal(false);
+	onMount(() => setTimeout(() => setIsMounted(true), props.delay));
+	return ssr(_tmpl$$1, ssrHydrationKey(), ssrStyleProperty("background-image:", "radial-gradient(circle, #b8b8b8bf 1px, rgba(0, 0, 0, 0) 1px)"), escape(createComponent(Show, {
+		get when() {
+			return isMounted();
+		},
+		keyed: true,
+		get fallback() {
+			return ssr(_tmpl$2$1, ssrHydrationKey(), escape(createComponent(LoadingFallback, {
+				message: "Chart is loading...",
+				interval: 35,
+				rewind: true,
+				rewindDelay: 1e3
+			})));
+		},
+		get children() {
+			return createComponent(Provider, { get children() {
+				return createComponent(FlowChart, props);
+			} });
+		}
+	})));
+};
+//#endregion
+//#region src/ui/globals/directives/clickOutside.ts
+/**
+* Solid custom directive that triggers a callback when a click occurs outside the
+* bound element.
+*
+* @param el - The bound DOM element.
+* @param accessor - Accessor returning the callback function to execute.
+*/
+var clickOutside = (el, accessor) => {
+	const onClick = (e) => {
+		if (!el.contains(e.target)) accessor()?.();
+	};
+	document.body.addEventListener("click", onClick);
+	onCleanup(() => document.body.removeEventListener("click", onClick));
+};
+//#endregion
+//#region src/ui/globals/directives/mouseOut.ts
+/**
+* Solid custom directive that triggers a callback when the mouse leaves the bound
+* element after a specified timer duration. If the user re-enters the component
+* before the timer expires, the timer is reset/cancelled.
+*
+* @param el - The bound DOM element.
+* @param accessor - Accessor returning a callback, tuple `[callback, delay]`, or
+*   type {@linkcode MouseOutOptions}.
+*/
+var mouseOut = (el, accessor) => {
+	let timer;
+	const clear = () => {
+		if (timer !== void 0) {
+			clearTimeout(timer);
+			timer = void 0;
+		}
+	};
+	const onMouseEnter = () => {
+		clear();
+	};
+	const onMouseLeave = (event) => {
+		clear();
+		const param = accessor();
+		if (!param) return;
+		let callback;
+		let delay = 0;
+		if (typeof param === "function") callback = param;
+		else if (Array.isArray(param)) {
+			callback = param[0];
+			delay = param[1] ?? 0;
+		} else if (typeof param === "object") {
+			callback = param.callback ?? param.onMouseOut;
+			delay = param.delay ?? 0;
+		}
+		if (!callback) return;
+		if (delay > 0) timer = setTimeout(() => {
+			callback?.(event);
+			timer = void 0;
+		}, delay);
+		else callback(event);
+	};
+	el.addEventListener("mouseleave", onMouseLeave);
+	el.addEventListener("mouseenter", onMouseEnter);
+	onCleanup(() => {
+		clear();
+		el.removeEventListener("mouseleave", onMouseLeave);
+		el.removeEventListener("mouseenter", onMouseEnter);
+	});
+};
+//#endregion
+//#region src/ui/globals/directives/resize.ts
+/**
+* Creates a ResizeObserver hook attached to the node content container element,
+* dispatching RESIZE events to update node dimensions and edge positioning in
+* real-time.
+*
+* @param id - Unique identifier of the flowchart node.
+*
+* @returns Ref callback attaching and cleaning up the observer on unmount.
+*/
+var resize = (id) => (el) => {
+	const service = useFlow();
+	const resize = new ResizeObserver((entries) => {
+		const entry = entries[0].target;
+		if (!entry) return;
+		const width = entry.clientWidth;
+		const height = entry.clientHeight;
+		if (width > 0 && height > 0) service.send({
+			type: "RESIZE",
+			payload: {
+				id,
+				size: {
+					width,
+					height
+				}
+			}
+		});
+	});
+	resize.observe(el);
+	return () => {
+		resize.unobserve(el);
+		resize.disconnect();
+	};
+};
+//#endregion
+//#region src/ui/components/EditPanel.hooks.ts
+/**
+* Hook providing reactive state and mutation helpers for editing flowchart node
+* data.
+*
+* @template | {@linkcode NodeData} `D` - Custom node data dictionary type extending
+*   {@linkcode NodeData}.
+*
+* @param timeout - Transition delay in milliseconds before closing the panel.
+*   Defaults to `270`.
+*
+* @returns An object containing reactive accessors and mutation callbacks for the
+*   active node.
+*
+* @see {@linkcode useFlow}
+*/
+var useHook = (timeout = 270) => {
+	const service = useFlow();
+	const directClose = () => service.send("STOP_EDIT");
+	const [closing, setClosing] = createSignal(false);
+	const senderData = service.sender("SET_NODE_DATA");
+	const _editing = createState(service, {
+		selector: ({ context }) => {
+			const editingId = context.editing;
+			if (!isDefined(editingId)) return;
+			const item = context.data?.nodes?.find((n) => n.id === editingId);
+			if (!isDefined(item)) return;
+			return {
+				id: item.id,
+				data: item.data
+			};
+		},
+		equals: deepEqual
+	});
+	const close = () => {
+		setClosing(true);
+		setTimeout(() => {
+			directClose();
+			setClosing(false);
+		}, timeout);
+	};
+	const updateField = (field, value) => {
+		const current = _editing();
+		if (!current) return;
+		return senderData({
+			...current,
+			data: {
+				...current.data,
+				[field]: value
+			}
+		});
+	};
+	const updateData = (data) => {
+		const current = _editing();
+		if (!current) return;
+		return senderData({
+			...current,
+			data: {
+				...current.data,
+				...data
+			}
+		});
+	};
+	return {
+		editing: _editing,
+		updateField,
+		updateData,
+		close,
+		closing,
+		directClose
+	};
+};
+//#endregion
+//#region src/ui/components/EditPanel.tsx
+var _tmpl$ = [
+	"<div",
+	" class=\"",
+	"\" style=\"",
+	"\"><div class=\"flex flex-col gap-3\"><!--$-->",
+	"<!--/--><!--$-->",
+	"<!--/--></div></div>"
+];
+var _tmpl$2 = [
+	"<div",
+	" class=\"flex items-center justify-between border-b border-gray-100 pb-2\"><div class=\"flex items-center gap-2\"><h3 class=\"text-sm font-bold text-gray-800\">Edit</h3><span class=\"font-mono text-[11px] text-gray-400\">",
+	"</span></div><button type=\"button\" title=\"Close editor\" aria-label=\"Close editor\" class=\"cursor-pointer rounded-full p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-700\"><svg class=\"size-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M18 6L6 18M6 6l12 12\"></path></svg></button></div>"
+];
+/**
+* Generic overlay edit panel component for modifying the data of the currently
+* active/double-clicked flowchart node.
+*
+* @template | {@linkcode NodeData} `D` - Custom node data dictionary type extending
+*   {@linkcode NodeData}.
+*
+* @param props - Edit panel configuration properties of type
+*   {@linkcode EditPanelProps}.
+*
+* @returns The rendered Solid component or `null` when no node is being edited.
+*
+* @see {@linkcode useHook}, {@linkcode clickOutside}
 */
-var Flow = (props) => createComponent(Provider, { get children() {
-	return createComponent(FlowChart, props);
-} });
+var EditPanel = (props) => {
+	const hooks = useHook(props.timeout);
+	const classList = () => props.classList instanceof Function ? props.classList(hooks) : props.classList;
+	return createComponent(Show, {
+		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, {
+			get when() {
+				return props.header;
+			},
+			keyed: true,
+			get fallback() {
+				return ssr(_tmpl$2, ssrHydrationKey(), escape(node().id));
+			},
+			children: (header) => header({
+				id: node().id,
+				close: hooks.close
+			})
+		})), escape(props.children(hooks)))
+	});
+};
 //#endregion
-export { CLASSES, Flow };
+export { BOUNDS_CONSTRAINTS, CANVAS_FACTOR, CLASSES, CONTAINER_DIMENSIONS, DEFAULT_DATA, DEFAULT_INPUT_OFFSET, DEFAULT_INPUT_OFFSET_X, DEFAULT_INPUT_OFFSET_Y, DEFAULT_NODES, DEFAULT_NODE_HEIGHT, DEFAULT_NODE_WIDTH, DEFAULT_SIZE, EditPanel, Flow, FlowChart, HANDLE_CENTER_X_OFFSET, HANDLE_CENTER_Y, HANDLE_CONTAINER_OFFSET_X, HANDLE_MARGIN_TOP, HANDLE_RADIUS, HANDLE_SIZE, NODE_BORDER_WIDTH, PARENT_CHILD_GAP_WIDTH, Panels, Provider, SCROLL_MULTIPLIER, TOOLBAR_BUFFER, TOOLBAR_TOP_OFFSET, board, clamp, clickOutside, createContext, data, dimension, edgeJSON, extremities, getDefaultOutputOffset, mouseOut, newEdge, nodeDataValue, nodeJSON, nodeOffset, point, resize, useFlow, vector };