@bemedev/mind-flow 0.3.2 → 1.1.0

package/lib/server.cjs.js

@@ -1,12 +1,190 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let _bemedev_app_bemedev = require("@bemedev/app/bemedev");
 let solid_js_web = require("solid-js/web");
 let _bemedev_app_solidjs = require("@bemedev/app-solidjs");
 let solid_js = require("solid-js");
 let _bemedev_app = require("@bemedev/app");
-let _bemedev_app_bemedev = require("@bemedev/app/bemedev");
 let nanoid = require("nanoid");
 let _thisbeyond_solid_dnd = require("@thisbeyond/solid-dnd");
 let dequal = require("dequal");
+let clsx = require("clsx");
+let tailwind_merge = require("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 = (0, _bemedev_app_bemedev.type)({
+	x: "number",
+	y: "number"
+});
+/**
+* Schema definition for node handle offsets (input and output).
+*
+* @see {@linkcode point}
+*/
+var nodeOffset = (0, _bemedev_app_bemedev.type)(({ use }) => ({
+	input: use(point),
+	output: use(point)
+}));
+/** Schema definition for edge extremities. */
+var extremities = (0, _bemedev_app_bemedev.type)({
+	from: "string",
+	to: "string"
+});
+/** Schema definition for primitive values allowed in node data. */
+var nodeDataValue = (0, _bemedev_app_bemedev.type)(({ union }) => union("string", "boolean", "number"));
+/**
+* Schema definition for serialized node data dictionary.
+*
+* @see {@linkcode nodeDataValue}
+*/
+var data = (0, _bemedev_app_bemedev.type)(({ record, use }) => record(use(nodeDataValue)));
+/**
+* Schema definition for a serialized flowchart node entity.
+*
+* @see {@linkcode point}, {@linkcode data}
+*/
+var nodeJSON = (0, _bemedev_app_bemedev.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 = (0, _bemedev_app_bemedev.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 = (0, _bemedev_app_bemedev.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 = (0, _bemedev_app_bemedev.type)(({ intersection, use }) => intersection({ from: "string" }, use(vector)));
+/** Schema definition for flowchart board geometry and container scroll dimensions. */
+var board = (0, _bemedev_app_bemedev.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
@@ -93,50 +271,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
 /**
@@ -154,12 +293,20 @@ var DEFAULT_NODES = [{
 * @see {@linkcode createSolidContext}, {@linkcode useContext}
 */
 var createContext = (context, options) => {
-	const _context = (0, solid_js.createContext)(context(), options);
-	const Provider = ({ children }) => _context.Provider({
-		value: _context.defaultValue,
-		children
-	});
-	const _useContext = () => (0, solid_js.useContext)(_context);
+	const _context = (0, solid_js.createContext)(void 0, options);
+	const Provider = (props) => {
+		return (0, solid_js.createComponent)(_context.Provider, {
+			value: context(),
+			get children() {
+				return props.children;
+			}
+		});
+	};
+	const _useContext = () => {
+		const __context = (0, solid_js.useContext)(_context);
+		if (!__context) throw new Error("useContext must be used within a Provider");
+		return __context;
+	};
 	return [
 		Provider,
 		_useContext,
@@ -199,17 +346,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,
@@ -226,92 +373,12 @@ var calculateDimensions = (position, parentDimension = {
 	};
 };
 //#endregion
-//#region src/services/main.machine.typings.ts
-/** Schema definition for 2D coordinates `(x, y)`. */
-var point = (0, _bemedev_app_bemedev.type)({
-	x: "number",
-	y: "number"
-});
-(0, _bemedev_app_bemedev.type)(({ optional, use }) => ({
-	input: optional(use(point)),
-	output: use(point)
-}));
-/** Schema definition for edge extremities. */
-var extremities = (0, _bemedev_app_bemedev.type)({
-	from: "string",
-	to: "string"
-});
-/**
-* Schema definition for a serialized flowchart node entity.
-*
-* @see {@linkcode point}
-*/
-var nodeJSON = (0, _bemedev_app_bemedev.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 = (0, _bemedev_app_bemedev.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 = (0, _bemedev_app_bemedev.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 = (0, _bemedev_app_bemedev.type)(({ intersection, use }) => intersection({ from: "string" }, use(vector)));
-/** Schema definition for flowchart board geometry and container scroll dimensions. */
-var board = (0, _bemedev_app_bemedev.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 = (0, _bemedev_app.createMachine)({
 	initial: "idle",
@@ -320,7 +387,7 @@ var machine = (0, _bemedev_app.createMachine)({
 		idle: { on: {
 			CONFIGURE: {
 				actions: ["configure"],
-				target: "/working"
+				target: "/construction"
 			},
 			CONFIGURE_EMPTY: "/working"
 		} },
@@ -329,6 +396,10 @@ var machine = (0, _bemedev_app.createMachine)({
 			target: "/working"
 		} },
 		working: { on: {
+			CONFIGURE: {
+				actions: ["configure"],
+				target: "/construction"
+			},
 			MOVE_IMMEDIATE: { actions: [{
 				name: "buildUI",
 				description: "Must be in the ui"
@@ -355,7 +426,6 @@ var machine = (0, _bemedev_app.createMachine)({
 				],
 				target: "/construction"
 			},
-			ADD_DIMENSION: { actions: ["addDimension"] },
 			ADD_SIBLING: {
 				actions: [
 					"generateID",
@@ -367,6 +437,7 @@ var machine = (0, _bemedev_app.createMachine)({
 				],
 				target: "/construction"
 			},
+			RESIZE: { actions: ["resize", "buildUI"] },
 			MOVE: {
 				actions: ["moveNode", "buildUI"],
 				target: "/construction"
@@ -386,14 +457,18 @@ var machine = (0, _bemedev_app.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: (0, _bemedev_app_bemedev.type)(({ intersection, use, array }) => ({
+	eventsMap: (0, _bemedev_app_bemedev.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",
@@ -413,15 +488,24 @@ var machine = (0, _bemedev_app.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,
@@ -429,6 +513,7 @@ var machine = (0, _bemedev_app.createMachine)({
 		generatedId: union("string", "null"),
 		previousZoom: optional("number"),
 		dimensions: record(use(dimension)),
+		defaultData: optional(use(data)),
 		getBoardPosition: custom(),
 		clampPosition: custom(),
 		calculateDimensions: custom()
@@ -448,23 +533,42 @@ var machine = (0, _bemedev_app.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 = (0, nanoid.nanoid)()),
 	select: assign("selected", { SELECT: ({ payload }) => payload }),
 	clearNewEdge: erase("newEdge"),
-	deselect: erase("selected"),
+	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 {
@@ -479,8 +583,9 @@ var machine = (0, _bemedev_app.createMachine)({
 		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
@@ -489,24 +594,24 @@ var machine = (0, _bemedev_app.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;
@@ -535,29 +640,47 @@ var machine = (0, _bemedev_app.createMachine)({
 			});
 			return edgesPositions;
 		},
-		else: ({ context: { data, edgesPositions }, pContext: { dimensions } }) => {
-			const edges = _bemedev_app_bemedev.toArray.typed(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
+		};
 	} }),
-	linkChild: batch(assign("data.edges", { ADD_CHILD: ({ context: { data }, pContext, payload }) => {
+	linkChild: batch(assign("data.edges", { ADD_CHILD: ({ context: { data }, pContext, payload: from }) => {
 		const edges = _bemedev_app_bemedev.toArray.typed(data?.edges);
-		const from = payload;
 		const generatedId = pContext?.generatedId;
 		const to = buildNodeID(generatedId);
 		const id = buildEdgeId(from, to);
@@ -597,7 +720,7 @@ var machine = (0, _bemedev_app.createMachine)({
 	} }),
 	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);
@@ -609,8 +732,7 @@ var machine = (0, _bemedev_app.createMachine)({
 		}];
 	} }), erase("newEdge")),
 	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;
 	} }),
@@ -631,19 +753,18 @@ var machine = (0, _bemedev_app.createMachine)({
 		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 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 dimension = pContext.calculateDimensions(position, parentDimension);
+		const defaultData = pContext.defaultData ?? DEFAULT_DATA;
 		nodes?.push({
 			id,
-			data: { content: "<Nouveau nœud>" },
-			input: true,
+			data: { ...defaultData },
 			position
 		});
-		pContext.dimensions[id] = dimension;
+		pContext.dimensions[id] = pContext.calculateDimensions(position, parentDimension ?? DEFAULT_SIZE);
 		return nodes;
 	} }),
 	placeParent: assign("data.nodes", { ADD_PARENT: ({ context: { data, zoom = 1, board }, pContext }) => {
@@ -658,15 +779,14 @@ var machine = (0, _bemedev_app.createMachine)({
 		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);
+		const position = pContext.clampPosition(board, x, y, DEFAULT_SIZE.width, DEFAULT_SIZE.height);
+		const defaultData = pContext.defaultData ?? DEFAULT_DATA;
 		nodes?.push({
 			id,
-			data: { content: "<Nouveau nœud>" },
-			input: false,
+			data: { ...defaultData },
 			position
 		});
-		pContext.dimensions[id] = dimension;
+		pContext.dimensions[id] = pContext.calculateDimensions(position, DEFAULT_SIZE);
 		return nodes;
 	} }),
 	placeSibling: assign("data.nodes", { ADD_SIBLING: ({ payload, context: { data, board }, pContext }) => {
@@ -679,19 +799,18 @@ var machine = (0, _bemedev_app.createMachine)({
 		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 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 dimension = pContext.calculateDimensions(position, parentDimension);
+		const defaultData = pContext.defaultData ?? DEFAULT_DATA;
 		nodes?.push({
 			id,
-			data: { content: "<Nouveau nœud>" },
-			input: true,
+			data: { ...defaultData },
 			position
 		});
-		pContext.dimensions[id] = dimension;
+		pContext.dimensions[id] = pContext.calculateDimensions(position, parentDimension ?? DEFAULT_SIZE);
 		return nodes;
 	} }),
 	moveNewEdge: assign("newEdge", { MOVE_NEW_EDGE: ({ context: { newEdge, board }, payload, pContext }) => {
@@ -754,14 +873,15 @@ var [Provider, useFlow] = createContext(() => {
 			*   {@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,
@@ -773,8 +893,8 @@ var [Provider, useFlow] = createContext(() => {
 				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)
 				};
 			},
 			/**
@@ -785,17 +905,17 @@ var [Provider, useFlow] = createContext(() => {
 			*
 			* @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,
@@ -866,14 +986,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=\"",
@@ -886,6 +1006,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
@@ -897,7 +1024,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}`;
 };
 /**
@@ -923,23 +1052,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 [(0, solid_js_web.ssr)(_tmpl$$4, (0, solid_js_web.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" : ""}`, (0, solid_js_web.ssrStyleProperty)("pointer-events:", props.isNew ? "none" : "all"), (0, solid_js_web.ssrAttribute)("d", (0, solid_js_web.escape)(draw(vector()), true), false)), (0, solid_js_web.createComponent)(solid_js.Show, {
+	return (0, solid_js_web.createComponent)(solid_js.Show, {
 		get when() {
-			return selected();
+			return vector();
 		},
-		get children() {
-			return (0, solid_js_web.ssr)(_tmpl$2$2, (0, solid_js_web.ssrHydrationKey)(), `translate(${(0, solid_js_web.escape)(middlePoint().x, true)}, ${(0, solid_js_web.escape)(middlePoint().y, true)})`, (0, solid_js_web.ssrStyleProperty)("pointer-events:", "all") + (0, solid_js_web.ssrStyleProperty)(";z-index:", "30"));
-		}
-	})];
+		children: (v) => [(0, solid_js_web.ssr)(_tmpl$$10, (0, solid_js_web.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" : ""}`, (0, solid_js_web.ssrStyleProperty)("pointer-events:", props.isNew ? "none" : "all"), (0, solid_js_web.ssrAttribute)("d", (0, solid_js_web.escape)(draw(v()), true), false)), (0, solid_js_web.createComponent)(solid_js.Show, {
+			get when() {
+				return selected();
+			},
+			get children() {
+				return (0, solid_js_web.ssr)(_tmpl$2$5, (0, solid_js_web.ssrHydrationKey)(), `translate(${(0, solid_js_web.escape)(middlePoint().x, true)}, ${(0, solid_js_web.escape)(middlePoint().y, true)})`, (0, solid_js_web.ssrStyleProperty)("pointer-events:", "all") + (0, solid_js_web.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\"><!--$-->",
 	"<!--/--><!--$-->",
@@ -957,10 +1095,10 @@ var EdgesBoard = () => {
 	const service = useFlow();
 	const hasNewEdge = (0, _bemedev_app_solidjs.createState)(service, { selector: (s) => !!s.context.newEdge });
 	const edgeIds = (0, _bemedev_app_solidjs.createState)(service, {
-		selector: ({ context }) => Object.keys(context.edgesPositions),
+		selector: ({ context }) => Object.keys(context.edgesPositions ?? {}),
 		equals: (prev, next) => prev.length === next.length
 	});
-	return (0, solid_js_web.ssr)(_tmpl$$3, (0, solid_js_web.ssrHydrationKey)(), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(solid_js.Show, {
+	return (0, solid_js_web.ssr)(_tmpl$$9, (0, solid_js_web.ssrHydrationKey)(), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(solid_js.Show, {
 		get when() {
 			return hasNewEdge();
 		},
@@ -979,18 +1117,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=\"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>"
-];
-var _tmpl$3$1 = [
+var _tmpl$2$4 = [
 	"<div",
 	" class=\"",
 	"\" style=\"",
@@ -999,28 +1131,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=\"outputs\" 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.
 *
@@ -1034,11 +1182,9 @@ var NodeComponent = (props) => {
 		selector: ({ context }) => {
 			const item = _bemedev_app.toArray.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.dequal
@@ -1049,39 +1195,106 @@ var NodeComponent = (props) => {
 		if (!edges) return false;
 		return edges.some(({ to }) => to === props.id);
 	} });
-	return (0, solid_js_web.ssr)(_tmpl$3$1, (0, solid_js_web.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`, (0, solid_js_web.ssrStyleProperty)("top:", `${(0, solid_js_web.escape)(node().y, true)}px`) + (0, solid_js_web.ssrStyleProperty)(";left:", `${(0, solid_js_web.escape)(node().x, true)}px`), (0, solid_js_web.ssrAttribute)("id", (0, solid_js_web.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" : ""}`, (0, solid_js_web.ssrStyleProperty)("overflow:", "visible") + (0, solid_js_web.ssrStyleProperty)(";pointer-events:", "all") + (0, solid_js_web.ssrStyleProperty)(";width:", `${(0, solid_js_web.escape)(12, true) * 2}px`) + (0, solid_js_web.ssrStyleProperty)(";height:", `${(0, solid_js_web.escape)(12, true) * 2}px`), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(solid_js.Show, {
+	return (0, solid_js_web.ssr)(_tmpl$2$4, (0, solid_js_web.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`, (0, solid_js_web.ssrStyleProperty)("top:", `${(0, solid_js_web.escape)(node().y, true)}px`) + (0, solid_js_web.ssrStyleProperty)(";left:", `${(0, solid_js_web.escape)(node().x, true)}px`), (0, solid_js_web.ssrAttribute)("id", (0, solid_js_web.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" : ""}`, (0, solid_js_web.ssrStyleProperty)("overflow:", "visible") + (0, solid_js_web.ssrStyleProperty)(";pointer-events:", "all") + (0, solid_js_web.ssrStyleProperty)(";width:", `${(0, solid_js_web.escape)(12, true) * 2}px`) + (0, solid_js_web.ssrStyleProperty)(";height:", `${(0, solid_js_web.escape)(12, true) * 2}px`), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(solid_js.Show, {
 		get when() {
 			return hasParent();
 		},
 		get children() {
-			return (0, solid_js_web.ssr)(_tmpl$$2, (0, solid_js_web.ssrHydrationKey)(), (0, solid_js_web.ssrStyleProperty)("pointer-events:", "all") + (0, solid_js_web.ssrStyleProperty)(";fill-rule:", "evenodd") + (0, solid_js_web.ssrStyleProperty)(";clip-rule:", "evenodd") + (0, solid_js_web.ssrStyleProperty)(";stroke-linejoin:", "round") + (0, solid_js_web.ssrStyleProperty)(";stroke-miterlimit:", "2") + (0, solid_js_web.ssrStyleProperty)(";width:", `${(0, solid_js_web.escape)(12, true) * 2}px`) + (0, solid_js_web.ssrStyleProperty)(";height:", `${(0, solid_js_web.escape)(12, true) * 2}px`));
+			return (0, solid_js_web.ssr)(_tmpl$$8, (0, solid_js_web.ssrHydrationKey)(), (0, solid_js_web.ssrStyleProperty)("pointer-events:", "all") + (0, solid_js_web.ssrStyleProperty)(";fill-rule:", "evenodd") + (0, solid_js_web.ssrStyleProperty)(";clip-rule:", "evenodd") + (0, solid_js_web.ssrStyleProperty)(";stroke-linejoin:", "round") + (0, solid_js_web.ssrStyleProperty)(";stroke-miterlimit:", "2") + (0, solid_js_web.ssrStyleProperty)(";width:", `${(0, solid_js_web.escape)(12, true) * 2}px`) + (0, solid_js_web.ssrStyleProperty)(";height:", `${(0, solid_js_web.escape)(12, true) * 2}px`));
 		}
 	})), (0, solid_js_web.ssrStyleProperty)("pointer-events:", "all") + (0, solid_js_web.ssrStyleProperty)(";width:", `${(0, solid_js_web.escape)(12, true) * 2}px`) + (0, solid_js_web.ssrStyleProperty)(";height:", `${(0, solid_js_web.escape)(12, true) * 2}px`), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(solid_js.Show, {
 		get when() {
-			return node().label;
+			return props.children;
 		},
-		keyed: true,
-		children: (label) => (0, solid_js_web.ssr)(_tmpl$4, (0, solid_js_web.ssrHydrationKey)(), (0, solid_js_web.escape)(label))
-	})), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(solid_js.Show, {
-		get when() {
-			return node().content;
-		},
-		keyed: true,
-		children: (content) => (0, solid_js_web.ssr)(_tmpl$5, (0, solid_js_web.ssrHydrationKey)(), (0, solid_js_web.escape)(content))
-	})), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(solid_js.Show, {
-		get when() {
-			return node().input || hasParent();
+		get fallback() {
+			return (0, solid_js_web.ssr)(_tmpl$3$2, (0, solid_js_web.ssrHydrationKey)(), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(solid_js.Show, {
+				get when() {
+					return node().data.label;
+				},
+				keyed: true,
+				children: (label) => (0, solid_js_web.ssr)(_tmpl$4, (0, solid_js_web.ssrHydrationKey)(), (0, solid_js_web.escape)(String(label)))
+			})), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(solid_js.Show, {
+				get when() {
+					return node().data.content;
+				},
+				keyed: true,
+				children: (content) => (0, solid_js_web.ssr)(_tmpl$5, (0, solid_js_web.ssrHydrationKey)(), (0, solid_js_web.escape)(String(content)))
+			})), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(solid_js.Show, {
+				get when() {
+					return (0, solid_js_web.memo)(() => !!!node().data.label)() && !node().data.content;
+				},
+				get children() {
+					return (0, solid_js_web.createComponent)(solid_js.For, {
+						get each() {
+							return Object.entries(node().data);
+						},
+						children: ([key, val]) => (0, solid_js_web.ssr)(_tmpl$6, (0, solid_js_web.ssrHydrationKey)(), (0, solid_js_web.escape)(key), (0, solid_js_web.escape)(String(val)))
+					});
+				}
+			})));
 		},
 		get children() {
-			return (0, solid_js_web.ssr)(_tmpl$2$1, (0, solid_js_web.ssrHydrationKey)(), (0, solid_js_web.ssrStyleProperty)("left:", `-${(0, solid_js_web.escape)(18, true)}px`), (0, solid_js_web.ssrStyleProperty)("width:", `${(0, solid_js_web.escape)(12, true)}px`) + (0, solid_js_web.ssrStyleProperty)(";height:", `${(0, solid_js_web.escape)(12, true)}px`) + (0, solid_js_web.ssrStyleProperty)(";margin-top:", `${(0, solid_js_web.escape)(12, true)}px`) + (0, solid_js_web.ssrStyleProperty)(";pointer-events:", "all"));
+			return (0, solid_js_web.createComponent)(solid_js_web.Dynamic, (0, solid_js_web.mergeProps)({ get component() {
+				return props.children;
+			} }, () => node().data));
 		}
-	})), (0, solid_js_web.ssrStyleProperty)("right:", `-${(0, solid_js_web.escape)(18, true)}px`), (0, solid_js_web.ssrStyleProperty)("width:", `${(0, solid_js_web.escape)(12, true)}px`) + (0, solid_js_web.ssrStyleProperty)(";height:", `${(0, solid_js_web.escape)(12, true)}px`) + (0, solid_js_web.ssrStyleProperty)(";margin-top:", `${(0, solid_js_web.escape)(12, true)}px`) + (0, solid_js_web.ssrStyleProperty)(";pointer-events:", "all"));
+	})), (0, solid_js_web.ssrStyleProperty)("left:", `-${(0, solid_js_web.escape)(18, true)}px`), (0, solid_js_web.ssrStyleProperty)("width:", `${(0, solid_js_web.escape)(12, true)}px`) + (0, solid_js_web.ssrStyleProperty)(";height:", `${(0, solid_js_web.escape)(12, true)}px`) + (0, solid_js_web.ssrStyleProperty)(";margin-top:", `${(0, solid_js_web.escape)(12, true)}px`) + (0, solid_js_web.ssrStyleProperty)(";pointer-events:", "all"), (0, solid_js_web.ssrStyleProperty)("right:", `-${(0, solid_js_web.escape)(18, true)}px`), (0, solid_js_web.ssrStyleProperty)("width:", `${(0, solid_js_web.escape)(12, true)}px`) + (0, solid_js_web.ssrStyleProperty)(";height:", `${(0, solid_js_web.escape)(12, true)}px`) + (0, solid_js_web.ssrStyleProperty)(";margin-top:", `${(0, solid_js_web.escape)(12, true)}px`) + (0, solid_js_web.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 [
+		(0, solid_js_web.createComponent)(solid_js.Show, {
+			get when() {
+				return props.topLeft;
+			},
+			keyed: true,
+			children: (Panel) => (0, solid_js_web.ssr)(_tmpl$$7, (0, solid_js_web.ssrHydrationKey)(), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(Panel, {})))
+		}),
+		(0, solid_js_web.createComponent)(solid_js.Show, {
+			get when() {
+				return props.topRight;
+			},
+			keyed: true,
+			children: (Panel) => (0, solid_js_web.ssr)(_tmpl$2$3, (0, solid_js_web.ssrHydrationKey)(), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(Panel, {})))
+		}),
+		(0, solid_js_web.createComponent)(solid_js.Show, {
+			get when() {
+				return props.bottomLeft;
+			},
+			keyed: true,
+			children: (Panel) => (0, solid_js_web.ssr)(_tmpl$3$1, (0, solid_js_web.ssrHydrationKey)(), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(Panel, {})))
+		})
+	];
 };
 //#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=\"",
@@ -1090,25 +1303,30 @@ 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] = (0, solid_js.createSignal)(false);
 	const [transform, setTransform] = (0, solid_js.createSignal)({
@@ -1232,13 +1450,19 @@ var NodesBoard = () => {
 		},
 		get children() {
 			return [
-				(0, solid_js_web.ssr)(_tmpl$$1, (0, solid_js_web.ssrHydrationKey)(), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(_thisbeyond_solid_dnd.DragDropSensors, {})), `relative cursor-crosshair overflow-hidden ${isPanning() ? "cursor-grabbing" : ""}`, (0, solid_js_web.ssrStyleProperty)("height:", (0, solid_js_web.escape)(cHeight(), true)) + (0, solid_js_web.ssrStyleProperty)(";width:", (0, solid_js_web.escape)(cWidth(), true)), (0, solid_js_web.ssrStyleProperty)("scale:", (0, solid_js_web.escape)(zoom(), true)) + (0, solid_js_web.ssrStyleProperty)(";transform-origin:", "top left"), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(DragBounds, {})), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(EdgesBoard, {})), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(solid_js.For, {
+				(0, solid_js_web.ssr)(_tmpl$$6, (0, solid_js_web.ssrHydrationKey)(), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(_thisbeyond_solid_dnd.DragDropSensors, {})), `relative cursor-crosshair overflow-hidden ${isPanning() ? "cursor-grabbing" : ""}`, (0, solid_js_web.ssrStyleProperty)("height:", (0, solid_js_web.escape)(cHeight(), true)) + (0, solid_js_web.ssrStyleProperty)(";width:", (0, solid_js_web.escape)(cWidth(), true)), (0, solid_js_web.ssrStyleProperty)("scale:", (0, solid_js_web.escape)(zoom(), true)) + (0, solid_js_web.ssrStyleProperty)(";transform-origin:", "top left"), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(DragBounds, {})), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(EdgesBoard, {})), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(solid_js.For, {
 					get each() {
 						return nodeIds();
 					},
-					children: (id) => (0, solid_js_web.createComponent)(NodeComponent, { id })
+					children: (id) => (0, solid_js_web.createComponent)(NodeComponent, {
+						id,
+						get children() {
+							return props.component;
+						}
+					})
 				}))),
-				(0, solid_js_web.ssr)(_tmpl$2, (0, solid_js_web.ssrHydrationKey)(), (0, solid_js_web.escape)(Math.round(zoom() * 100))),
+				(0, solid_js_web.createComponent)(Panels, (0, solid_js_web.mergeProps)(() => props.panels)),
+				(0, solid_js_web.ssr)(_tmpl$2$2, (0, solid_js_web.ssrHydrationKey)(), (0, solid_js_web.escape)(Math.round(zoom() * 100))),
 				(0, solid_js_web.createComponent)(solid_js.Show, {
 					get when() {
 						return !selectedId();
@@ -1253,9 +1477,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>"
 ];
@@ -1263,6 +1487,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}.
 *
@@ -1282,28 +1509,541 @@ var FlowChart = (props) => {
 			type: "CONFIGURE",
 			payload: {
 				nodes: primaryNodes,
-				edges: primaryEdges ?? []
+				edges: primaryEdges ?? [],
+				defaultData: props.defaultData
 			}
 		});
 	});
-	return (0, solid_js_web.ssr)(_tmpl$, (0, solid_js_web.ssrHydrationKey)(), (0, solid_js_web.ssrStyleProperty)("cursor:", hasNewEdge() ? "inherit" : "crosshair") + (0, solid_js_web.ssrStyleProperty)(";background-image:", "radial-gradient(circle, #b8b8b8bf 1px, rgba(0, 0, 0, 0) 1px)"), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(NodesBoard, {})));
+	return (0, solid_js_web.ssr)(_tmpl$$5, (0, solid_js_web.ssrHydrationKey)(), (0, solid_js_web.ssrStyleProperty)("cursor:", hasNewEdge() ? "inherit" : "crosshair"), (0, solid_js_web.escape)((0, solid_js_web.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 (0, tailwind_merge.twMerge)((0, clsx.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] = (0, solid_js.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;
+	};
+	(0, solid_js.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 = (0, solid_js.createMemo)(() => props.disabled ? props.disabled() : false, false);
+	const { text, type, setText } = createTyping({
+		content,
+		min,
+		rewind,
+		rewindDelay
+	});
+	(0, solid_js.createEffect)((0, solid_js.on)(disabled, () => setText("​")));
+	(0, solid_js.createEffect)(() => {
+		if (disabled()) setText(content);
+		else type();
+	});
+	return (0, solid_js_web.ssr)(_tmpl$$4, (0, solid_js_web.ssrHydrationKey)() + (0, solid_js_web.ssrAttribute)("class", (0, solid_js_web.escape)(props.class, true), false), (0, solid_js_web.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] = (0, solid_js.splitProps)(innerProps, ["class", "style"]);
+	return (0, solid_js_web.ssr)(_tmpl$$3, (0, solid_js_web.ssrHydrationKey)(), (0, solid_js_web.escape)(Array.from({ length }, (_, i) => (0, solid_js_web.ssrElement)("span", (0, solid_js_web.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 (0, solid_js_web.ssr)(_tmpl$$2, (0, solid_js_web.ssrHydrationKey)() + (0, solid_js_web.ssrAttribute)("class", (0, solid_js_web.escape)(cn("flex flex-col items-center justify-center gap-6", "h-screen w-screen overflow-hidden p-4", props.class), true), false), (0, solid_js_web.ssrAttribute)("class", (0, solid_js_web.escape)(cn(spinnerSizes[size], "rounded-full border-4 border-[#4B9CAD]/20", "animate-spin", "border-t-[#4B9CAD]"), true), false), (0, solid_js_web.ssrAttribute)("class", (0, solid_js_web.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), (0, solid_js_web.ssrAttribute)("aria-label", (0, solid_js_web.escape)(message, true), false), (0, solid_js_web.escape)((0, solid_js_web.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
+	})), (0, solid_js_web.escape)((0, solid_js_web.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) => (0, solid_js_web.createComponent)(Provider, { get children() {
-	return (0, solid_js_web.createComponent)(FlowChart, props);
-} });
+var Flow = (props) => {
+	const [isMounted, setIsMounted] = (0, solid_js.createSignal)(false);
+	(0, solid_js.onMount)(() => setTimeout(() => setIsMounted(true), props.delay));
+	return (0, solid_js_web.ssr)(_tmpl$$1, (0, solid_js_web.ssrHydrationKey)(), (0, solid_js_web.ssrStyleProperty)("background-image:", "radial-gradient(circle, #b8b8b8bf 1px, rgba(0, 0, 0, 0) 1px)"), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(solid_js.Show, {
+		get when() {
+			return isMounted();
+		},
+		keyed: true,
+		get fallback() {
+			return (0, solid_js_web.ssr)(_tmpl$2$1, (0, solid_js_web.ssrHydrationKey)(), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(LoadingFallback, {
+				message: "Chart is loading...",
+				interval: 35,
+				rewind: true,
+				rewindDelay: 1e3
+			})));
+		},
+		get children() {
+			return (0, solid_js_web.createComponent)(Provider, { get children() {
+				return (0, solid_js_web.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);
+	(0, solid_js.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);
+	(0, solid_js.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] = (0, solid_js.createSignal)(false);
+	const senderData = service.sender("SET_NODE_DATA");
+	const _editing = (0, _bemedev_app_solidjs.createState)(service, {
+		selector: ({ context }) => {
+			const editingId = context.editing;
+			if (!(0, _bemedev_app_bemedev.isDefined)(editingId)) return;
+			const item = context.data?.nodes?.find((n) => n.id === editingId);
+			if (!(0, _bemedev_app_bemedev.isDefined)(item)) return;
+			return {
+				id: item.id,
+				data: item.data
+			};
+		},
+		equals: _bemedev_app.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 EditPanel = (props) => {
+	const hooks = useHook(props.timeout);
+	const classList = () => props.classList instanceof Function ? props.classList(hooks) : props.classList;
+	return (0, solid_js_web.createComponent)(solid_js.Show, {
+		get when() {
+			return hooks.editing();
+		},
+		children: (node) => (0, solid_js_web.ssr)(_tmpl$, (0, solid_js_web.ssrHydrationKey)(), `${(0, solid_js_web.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)} ${(0, solid_js_web.escape)((0, solid_js_web.ssrClassList)(classList()) || "", true)}`, (0, solid_js_web.ssrStyle)(props.style), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(solid_js.Show, {
+			get when() {
+				return props.header;
+			},
+			keyed: true,
+			get fallback() {
+				return (0, solid_js_web.ssr)(_tmpl$2, (0, solid_js_web.ssrHydrationKey)(), (0, solid_js_web.escape)(node().id));
+			},
+			children: (header) => header({
+				id: node().id,
+				close: hooks.close
+			})
+		})), (0, solid_js_web.escape)(props.children(hooks)))
+	});
+};
 //#endregion
+exports.BOUNDS_CONSTRAINTS = BOUNDS_CONSTRAINTS;
+exports.CANVAS_FACTOR = CANVAS_FACTOR;
 exports.CLASSES = CLASSES;
+exports.CONTAINER_DIMENSIONS = CONTAINER_DIMENSIONS;
+exports.DEFAULT_DATA = DEFAULT_DATA;
+exports.DEFAULT_INPUT_OFFSET = DEFAULT_INPUT_OFFSET;
+exports.DEFAULT_INPUT_OFFSET_X = DEFAULT_INPUT_OFFSET_X;
+exports.DEFAULT_INPUT_OFFSET_Y = DEFAULT_INPUT_OFFSET_Y;
+exports.DEFAULT_NODES = DEFAULT_NODES;
+exports.DEFAULT_NODE_HEIGHT = DEFAULT_NODE_HEIGHT;
+exports.DEFAULT_NODE_WIDTH = DEFAULT_NODE_WIDTH;
+exports.DEFAULT_SIZE = DEFAULT_SIZE;
+exports.EditPanel = EditPanel;
 exports.Flow = Flow;
+exports.FlowChart = FlowChart;
+exports.HANDLE_CENTER_X_OFFSET = HANDLE_CENTER_X_OFFSET;
+exports.HANDLE_CENTER_Y = HANDLE_CENTER_Y;
+exports.HANDLE_CONTAINER_OFFSET_X = HANDLE_CONTAINER_OFFSET_X;
+exports.HANDLE_MARGIN_TOP = HANDLE_MARGIN_TOP;
+exports.HANDLE_RADIUS = HANDLE_RADIUS;
+exports.HANDLE_SIZE = HANDLE_SIZE;
+exports.NODE_BORDER_WIDTH = NODE_BORDER_WIDTH;
+exports.PARENT_CHILD_GAP_WIDTH = PARENT_CHILD_GAP_WIDTH;
+exports.Panels = Panels;
+exports.Provider = Provider;
+exports.SCROLL_MULTIPLIER = SCROLL_MULTIPLIER;
+exports.TOOLBAR_BUFFER = TOOLBAR_BUFFER;
+exports.TOOLBAR_TOP_OFFSET = TOOLBAR_TOP_OFFSET;
+exports.board = board;
+exports.clamp = clamp;
+exports.clickOutside = clickOutside;
+exports.createContext = createContext;
+exports.data = data;
+exports.dimension = dimension;
+exports.edgeJSON = edgeJSON;
+exports.extremities = extremities;
+exports.getDefaultOutputOffset = getDefaultOutputOffset;
+exports.mouseOut = mouseOut;
+exports.newEdge = newEdge;
+exports.nodeDataValue = nodeDataValue;
+exports.nodeJSON = nodeJSON;
+exports.nodeOffset = nodeOffset;
+exports.point = point;
+exports.resize = resize;
+exports.useFlow = useFlow;
+exports.vector = vector;