@bemedev/mind-flow 0.0.1 → 0.1.1

package/lib/server.cjs.js

@@ -11,8 +11,8 @@ let _thisbeyond_solid_dnd = require("@thisbeyond/solid-dnd");
 let dequal = require("dequal");
 //#region src/ui/components/classes.ts
 /**
-* List of Tailwind CSS class names used across flowchart UI components to
-* ensure compilation safelist.
+* List of Tailwind CSS class names used across flowchart UI components to ensure
+* compilation safelist.
 */
 var CLASSES = [
 	"fill-transparent",
@@ -98,19 +98,16 @@ var CLASSES = [
 //#endregion
 //#region src/helpers/createContext.ts
 /**
-* Creates a Solid context provider component and a custom hook to consume
-* it.
+* Creates a Solid context provider component and a custom hook to consume it.
 *
-* @template T - The type of the context value.
+* @template `T` - The type of the context value.
 *
-* @param context - Factory function returning a non-nullable context value
-*   of type `NonNullable<T>`.
-* @param options - Optional context configuration of type
-*   {@linkcode Options}.
+* @param context - Factory function returning a non-nullable context value of type
+*   `NonNullable<T>`.
+* @param options - Optional context configuration of type {@linkcode Options}.
 *
-* @returns A tuple containing the Provider component of type
-*   {@linkcode ParentComponent}, the accessor hook, and the Solid context
-*   object.
+* @returns A tuple containing the Provider component of interface
+*   {@linkcode ParentComponent}, the accessor hook, and the Solid context object.
 */
 var createContext = (context, options) => {
 	const _context = (0, solid_js.createContext)(context(), options);
@@ -136,7 +133,7 @@ var point = (0, _bemedev_app_bemedev.type)({
 	input: optional(use(point)),
 	output: use(point)
 }));
-/** Schema definition for edge extremities */
+/** Schema definition for edge extremities. */
 var extremities = (0, _bemedev_app_bemedev.type)({
 	from: "string",
 	to: "string"
@@ -168,8 +165,7 @@ var edgeJSON = extremities;
 //#endregion
 //#region src/services/main.machine.ts
 /**
-* Constructs a unique edge identifier string from source and destination
-* node IDs.
+* Constructs a unique edge identifier string from source and destination node IDs.
 *
 * @param out - The source node ID string.
 * @param _in - The destination node ID string.
@@ -190,8 +186,8 @@ var buildNodeID = (generated) => {
 	return `node-${generated}`;
 };
 /**
-* State machine managing flowchart state transitions, nodes, edges,
-* selection, and layout actions.
+* State machine managing flowchart state transitions, nodes, edges, selection, and
+* layout actions.
 */
 var machine = (0, _bemedev_app.createMachine)({
 	initial: "idle",
@@ -208,15 +204,10 @@ var machine = (0, _bemedev_app.createMachine)({
 			target: "/working"
 		} },
 		working: { on: {
-			MOVE: {
-				actions: ["moveNode", "buildUI"],
-				target: "/construction"
-			},
 			MOVE_IMMEDIATE: { actions: [{
 				name: "buildImmediateUI",
 				description: "Must be in the ui"
 			}] },
-			UPDATE_UI: "/construction",
 			ADD_CHILD: {
 				actions: [
 					"generateID",
@@ -250,6 +241,10 @@ var machine = (0, _bemedev_app.createMachine)({
 				],
 				target: "/construction"
 			},
+			MOVE: {
+				actions: ["moveNode", "buildUI"],
+				target: "/construction"
+			},
 			ADD_EDGE: {
 				actions: ["addEdge"],
 				target: "/construction"
@@ -287,6 +282,7 @@ var machine = (0, _bemedev_app.createMachine)({
 		DESELECT: "never",
 		ADD_EDGE: use(extremities)
 	})),
+	sync: true,
 	pContext: (0, _bemedev_app_bemedev.type)(({ union }) => ({ generatedId: union("string", "null") })),
 	context: (0, _bemedev_app_bemedev.type)(({ optional, use, array }) => ({
 		data: optional({
@@ -301,8 +297,7 @@ var machine = (0, _bemedev_app.createMachine)({
 		}),
 		selected: optional("string"),
 		updatingUI: optional("boolean")
-	})),
-	sync: true
+	}))
 }).provideOptions(({ assign, batch, erase }) => ({ actions: {
 	configure: batch(assign("context.data", () => ({
 		nodes: [],
@@ -386,14 +381,17 @@ var getDefaultOutputOffset = (width = 0) => ({
 	y: 18
 });
 /**
-* Boundary padding constraints for node dragging and positioning within
-* the viewport.
+* Boundary padding constraints for node dragging and positioning within the
+* viewport.
 */
 var BOUNDS_CONSTRAINTS = {
-	horizontal: 20,
-	vertical: 35
+	horizontal: 55,
+	vertical: 40
 };
-/** Default node items provided when no initial configuration is given. */
+/**
+* Default node items of type {@linkcode NodeProps} provided when no initial
+* configuration is given.
+*/
 var DEFAULT_NODES = [{
 	id: "node-0",
 	data: {
@@ -409,22 +407,31 @@ var DEFAULT_NODES = [{
 //#endregion
 //#region src/ui/components/FlowChart.context.ts
 /**
-* Shared state machine interpreter service instance for flowchart state
-* management.
-*/
-var service = (0, _bemedev_app.interpret)(machine, {
-	context: {},
-	pContext: { generatedId: null }
-});
-/**
-* Solid Context Provider component and hook for accessing flowchart board
-* state, services, and zoom.
+* Solid Context Provider component and hook for accessing flowchart board state,
+* services, and zoom.
 */
 var [Provider, useFlow] = createContext(() => {
+	/**
+	* Shared state machine interpreter service instance for flowchart state
+	* management.
+	*/
+	const service = (0, _bemedev_app.interpret)(machine, {
+		context: {},
+		pContext: { generatedId: null }
+	});
 	const zoom = (0, solid_js.createSignal)(1);
 	const newEdge = (0, solid_js.createSignal)();
 	const [boardRef, setBoardRef] = (0, solid_js.createSignal)();
 	const [dimensions, setDimensions] = (0, solid_js.createSignal)({}, { equals: dequal_lite.dequal });
+	/**
+	* Converts client viewport coordinates to board canvas coordinates adjusted for
+	* zoom and scroll.
+	*
+	* @param clientX - Viewport horizontal coordinate.
+	* @param clientY - Viewport vertical coordinate.
+	*
+	* @returns Board coordinate point of type {@linkcode Point}.
+	*/
 	const getBoardPoint = (clientX, clientY) => {
 		const el = boardRef();
 		if (!el) return {
@@ -434,11 +441,21 @@ var [Provider, useFlow] = createContext(() => {
 		const rect = el.getBoundingClientRect();
 		const currentZoom = zoom[0]();
 		return {
-			x: (clientX - rect.left) / currentZoom,
-			y: (clientY - rect.top) / currentZoom
+			x: clientX - rect.left / currentZoom,
+			y: clientY - rect.top / currentZoom
 		};
 	};
 	const [edgesPositions, setEdgesPositions] = (0, solid_js.createSignal)({}, { equals: false });
+	/**
+	* Clamps node coordinates within the visible container boundaries.
+	*
+	* @param x - Desired horizontal X coordinate.
+	* @param y - Desired vertical Y coordinate.
+	* @param nodeWidth - Width of the node element in pixels, defaults to `192`.
+	* @param nodeHeight - Height of the node element in pixels, defaults to `50`.
+	*
+	* @returns Clamped coordinate point of type {@linkcode Point}.
+	*/
 	const clampPosition = (x, y, nodeWidth = 192, nodeHeight = 50) => {
 		const container = boardRef()?.parentElement;
 		if (!container) return {
@@ -518,9 +535,7 @@ var [Provider, useFlow] = createContext(() => {
 		buildUI: batch(voidAction(({ context: { data } }) => {
 			const edges = data?.edges ?? [];
 			setEdgesPositions((data) => {
-				const array = Object.entries({ ...data }).filter(([id]) => {
-					return edges?.some((edge) => edge.id === id);
-				});
+				const array = Object.entries({ ...data }).filter(([id]) => edges.some((edge) => edge.id === id));
 				return Object.fromEntries(array);
 			});
 		}), voidAction({
@@ -639,17 +654,18 @@ var [Provider, useFlow] = createContext(() => {
 		getBoardPoint,
 		edgesPositions: [edgesPositions, setEdgesPositions],
 		service,
-		zoom
+		zoom,
+		clampPosition
 	};
 }, { name: "FlowContext" });
 //#endregion
 //#region src/ui/components/Bounds.tsx
 /**
-* Drag boundary transformer component that clamps draggable nodes within
-* container scroll bounds.
+* Drag boundary transformer component that clamps draggable nodes within container
+* scroll bounds.
 *
-* @returns `null` as this component performs side-effect transformer
-*   registrations only.
+* @returns `null` as this component performs side-effect transformer registrations
+*   only.
 */
 var DragBounds = () => {
 	const { board: [ref], zoom: [zoom] } = useFlow();
@@ -658,23 +674,23 @@ var DragBounds = () => {
 		id: "clamp-to-container",
 		order: 100,
 		callback: (transform) => {
-			const container = ref()?.parentElement;
+			const container = ref();
 			const activeDraggable = state.active.draggable;
 			if (!container || !activeDraggable) return transform;
-			const draggableLayout = activeDraggable.layout;
-			const containerRect = container.getBoundingClientRect();
-			const innerLeft = containerRect.left + container.clientLeft;
-			const innerTop = containerRect.top + container.clientTop;
-			const innerRight = innerLeft + container.clientWidth;
-			const innerBottom = innerTop + container.clientHeight;
+			const node = activeDraggable.node;
+			if (!node) return transform;
 			const currentZoom = zoom();
-			const minX = innerLeft - draggableLayout.left + BOUNDS_CONSTRAINTS.horizontal * currentZoom;
-			const maxX = Math.max(minX, innerRight - draggableLayout.right - BOUNDS_CONSTRAINTS.horizontal * currentZoom);
-			const minY = innerTop - draggableLayout.top + BOUNDS_CONSTRAINTS.vertical * currentZoom;
-			const maxY = Math.max(minY, innerBottom - draggableLayout.bottom - BOUNDS_CONSTRAINTS.vertical * currentZoom);
+			const minBoardX = BOUNDS_CONSTRAINTS.horizontal;
+			const maxBoardX = Math.max(minBoardX, container.clientWidth / currentZoom - node.offsetWidth - BOUNDS_CONSTRAINTS.horizontal);
+			const minBoardY = BOUNDS_CONSTRAINTS.vertical;
+			const maxBoardY = Math.max(minBoardY, container.clientHeight / currentZoom - node.offsetHeight - BOUNDS_CONSTRAINTS.vertical);
+			const minTransformX = (minBoardX - node.offsetLeft) * currentZoom;
+			const maxTransformX = (maxBoardX - node.offsetLeft) * currentZoom;
+			const minTransformY = (minBoardY - node.offsetTop) * currentZoom;
+			const maxTransformY = (maxBoardY - node.offsetTop) * currentZoom;
 			return {
-				x: Math.min(Math.max(transform.x, minX), maxX),
-				y: Math.min(Math.max(transform.y, minY), maxY)
+				x: Math.min(Math.max(transform.x, minTransformX), maxTransformX),
+				y: Math.min(Math.max(transform.y, minTransformY), maxTransformY)
 			};
 		}
 	};
@@ -695,7 +711,7 @@ var _tmpl$$4 = [
 	"\"",
 	"></path>"
 ];
-var _tmpl$2$1 = [
+var _tmpl$2$2 = [
 	"<g",
 	" cursor=\"pointer\" transform=\"",
 	"\" style=\"",
@@ -710,8 +726,8 @@ var _tmpl$2$1 = [
 */
 var calculateOffset = (value) => value * 100 / 200;
 /**
-* Generates an SVG cubic bezier path `d` string between coordinates `(x0,
-* y0)` and `(x1, y1)`.
+* Generates an SVG cubic bezier path `d` string between coordinates `(x0, y0)` and
+* `(x1, y1)`.
 *
 * @param vector - Vector coordinates of type {@linkcode Vector}.
 *
@@ -721,8 +737,8 @@ var draw = ({ x0, y0, x1, y1 }) => {
 	return `M ${x0} ${y0} C ${x0 + calculateOffset(Math.abs(x1 - x0))} ${y0}, ${x1 - calculateOffset(Math.abs(x1 - x0))} ${y1}, ${x1} ${y1}`;
 };
 /**
-* SVG edge component rendering bezier curves and delete interaction
-* handles for node connections.
+* SVG edge component rendering bezier curves and delete interaction handles for node
+* connections.
 *
 * @param props - Edge properties of type {@linkcode Props}.
 *
@@ -748,7 +764,7 @@ var EdgeComponent = (props) => {
 			return selected();
 		},
 		get children() {
-			return (0, solid_js_web.ssr)(_tmpl$2$1, (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"));
+			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"));
 		}
 	})];
 };
@@ -761,8 +777,8 @@ var _tmpl$$3 = [
 	"<!--/--></svg>"
 ];
 /**
-* SVG board overlay component that renders all active connecting edges and
-* ongoing edge creation previews.
+* SVG board overlay component that renders all active connecting edges and ongoing
+* edge creation previews.
 *
 * @returns The rendered SVG JSX element.
 */
@@ -812,13 +828,13 @@ var _tmpl$$2 = [
 	" 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 = [
+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 = [
+var _tmpl$3$1 = [
 	"<div",
 	" class=\"",
 	"\" style=\"",
@@ -844,8 +860,8 @@ var _tmpl$5 = [
 	"</div>"
 ];
 /**
-* Interactive flowchart node component supporting dragging, selection,
-* handle connections, and child/sibling creation.
+* Interactive flowchart node component supporting dragging, selection, handle
+* connections, and child/sibling creation.
 *
 * @param props - Node rendering properties of type {@linkcode Props}.
 *
@@ -855,17 +871,17 @@ var NodeComponent = (props) => {
 	const [ref, setRef] = (0, solid_js.createSignal)();
 	const { dimensions: [dimensions, setDimensions], newEdge: [newEdge, setNewEdge], getBoardPoint, service, zoom: [zoom] } = useFlow();
 	const selected = (0, _bemedev_app_solidjs.useState)(service, { selector: (s) => s.context.selected === props.id });
-	(0, solid_js.createEffect)(() => {
+	(0, solid_js.onMount)(() => {
 		ref();
 		zoom();
 	});
 	const hasParent = (0, _bemedev_app_solidjs.useState)(service, { selector: ({ context: { data } }) => {
 		const edges = data?.edges;
 		if (!edges) return false;
-		return Object.values(edges).some((edge) => edge.to === props.id);
+		return edges.some(({ to }) => to === props.id);
 	} });
 	(0, _thisbeyond_solid_dnd.createDraggable)(props.id);
-	return (0, solid_js_web.ssr)(_tmpl$3, (0, solid_js_web.ssrHydrationKey)() + (0, solid_js_web.ssrAttribute)("id", (0, solid_js_web.escape)(props.id, true), false), `flex flex-col absolute cursor-grab bg-white rounded-md shadow-md select-none transition-[border,box-shadow] duration-200 ease-in-out hover:shadow-lg draggable ${selected() ? "border border-[#e38c29] z-[100]" : ""} ${!selected() ? "border border-[#e6d4be] z-[1]" : ""} min-w-48`, (0, solid_js_web.ssrStyleProperty)("top:", `${(0, solid_js_web.escape)(props.y, true)}px`) + (0, solid_js_web.ssrStyleProperty)(";left:", `${(0, solid_js_web.escape)(props.x, true)}px`), `pointer-events-none absolute flex items-center justify-end -top-7.5 right-0 transition-all duration-200 ease-in-out space-x-2 ${selected() ? "w-full opacity-100" : ""} ${!selected() ? "w-0 -right-3 opacity-0 overflow-hidden" : ""}`, (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$3$1, (0, solid_js_web.ssrHydrationKey)() + (0, solid_js_web.ssrAttribute)("id", (0, solid_js_web.escape)(props.id, true), false), `flex flex-col absolute cursor-grab bg-white rounded-md shadow-md select-none transition-[border,box-shadow] duration-200 ease-in-out hover:shadow-lg draggable ${selected() ? "border border-[#e38c29] z-[100]" : ""} ${!selected() ? "border border-[#e6d4be] z-[1]" : ""} min-w-48`, (0, solid_js_web.ssrStyleProperty)("top:", `${(0, solid_js_web.escape)(props.y, true)}px`) + (0, solid_js_web.ssrStyleProperty)(";left:", `${(0, solid_js_web.escape)(props.x, true)}px`), `pointer-events-none absolute flex items-center justify-end -top-7.5 right-0 transition-all duration-200 ease-in-out space-x-2 ${selected() ? "w-full opacity-100" : ""} ${!selected() ? "w-0 -right-3 opacity-0 overflow-hidden" : ""}`, (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();
 		},
@@ -889,7 +905,7 @@ var NodeComponent = (props) => {
 			return props.input || hasParent();
 		},
 		get children() {
-			return (0, solid_js_web.ssr)(_tmpl$2, (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.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"));
 		}
 	})), (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"));
 };
@@ -897,22 +913,33 @@ var NodeComponent = (props) => {
 //#region src/ui/components/NodesBoard.tsx
 var _tmpl$$1 = [
 	"<div",
-	" class=\"relative mx-auto h-[calc(100vh-64px)] w-[calc(100vw-32px)]\"><div class=\"relative h-full w-full overflow-scroll rounded-lg border-2 border-gray-600\"><!--$-->",
-	"<!--/--><!--$-->",
+	" class=\"relative h-full w-full overflow-scroll rounded-lg border-2 border-gray-600\"><!--$-->",
 	"<!--/--><div class=\"",
 	"\" style=\"",
+	"\"><div class=\"relative h-full w-full\" style=\"",
 	"\"><!--$-->",
 	"<!--/--><!--$-->",
-	"<!--/--></div></div><div class=\"absolute right-4 bottom-4 z-50 flex items-center gap-2 rounded-xl border border-gray-200 bg-white/90 p-2 shadow-lg backdrop-blur-md\"><button type=\"button\" class=\"flex size-9 cursor-pointer items-center justify-center rounded-lg bg-gray-100 text-lg font-bold text-gray-700 shadow-sm transition-all duration-150 hover:bg-gray-200 active:scale-95\" title=\"Zoom out\" aria-label=\"Zoom out\">-</button><button type=\"button\" class=\"h-9 cursor-pointer rounded-lg px-2 text-xs font-semibold text-gray-700 transition-colors hover:bg-gray-100\" title=\"Reset zoom\" aria-label=\"Reset zoom\"><!--$-->",
-	"<!--/-->%</button><button type=\"button\" class=\"flex size-9 cursor-pointer items-center justify-center rounded-lg bg-gray-100 text-lg font-bold text-gray-700 shadow-sm transition-all duration-150 hover:bg-gray-200 active:scale-95\" title=\"Zoom in\" aria-label=\"Zoom in\">+</button><div class=\"h-5 w-px bg-gray-300\"></div><button type=\"button\" class=\"flex size-9 cursor-pointer items-center justify-center rounded-lg bg-blue-600 text-white shadow transition-all duration-150 hover:bg-blue-700 active:scale-95\" title=\"Add parent node\" aria-label=\"Add parent node\"><svg class=\"size-5\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\"></path></svg></button></div></div>"
+	"<!--/--><!--$-->",
+	"<!--/--></div></div></div>"
+];
+var _tmpl$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\">",
+	"</div>"
 ];
 /**
-* Interactive board component containing the drag-drop viewport, zoom
-* controls, panning gestures, and rendered nodes/edges.
+* Interactive board component containing the drag-drop viewport, zoom controls,
+* panning gestures, and rendered nodes/edges.
 *
 * @returns The rendered Solid component.
 */
 var NodesBoard = () => {
+	let containerRef;
 	const [isPanning, setIsPanning] = (0, solid_js.createSignal)(false);
 	const [transform, setTransform] = (0, solid_js.createSignal)({
 		x: 0,
@@ -920,11 +947,23 @@ var NodesBoard = () => {
 	});
 	const [id, setId] = (0, solid_js.createSignal)("");
 	const [previousZoom, setPreviousZoom] = (0, solid_js.createSignal)();
-	let cleanupPanning = () => {};
-	(0, solid_js.onCleanup)(cleanupPanning);
+	let percentX = 0;
+	let percentY = 0;
 	const { board: [, setRef], service, newEdge: [newEdge], zoom: [zoom, setZoom] } = useFlow();
-	(0, solid_js.createEffect)((0, solid_js.on)(zoom, () => {}, { defer: true }));
+	(0, solid_js.createEffect)((0, solid_js.on)(zoom, () => {
+		const maxScrollX = containerRef.scrollWidth - containerRef.clientWidth;
+		const maxScrollY = containerRef.scrollHeight - containerRef.clientHeight;
+		if (maxScrollX > 0) containerRef.scrollLeft = percentX * maxScrollX;
+		if (maxScrollY > 0) containerRef.scrollTop = percentY * maxScrollY;
+	}, { defer: true }));
 	const selectedId = (0, _bemedev_app_solidjs.useState)(service, { selector: (s) => s.context?.selected });
+	/**
+	* Determines whether the given element ID matches the currently selected entity.
+	*
+	* @param id - The node or edge identifier to check.
+	*
+	* @returns `true` if the item is currently selected, otherwise `false`.
+	*/
 	const selected = (id) => selectedId() === id;
 	const nodes = (0, _bemedev_app_solidjs.useState)(service, {
 		selector: (s) => {
@@ -939,21 +978,27 @@ var NodesBoard = () => {
 		},
 		equals: dequal.dequal
 	});
-	const cDim = () => {
-		const _zoom = zoom();
-		if (_zoom < 1) return 500 * _zoom;
-		return 500;
-	};
-	return (0, solid_js_web.createComponent)(_thisbeyond_solid_dnd.DragDropProvider, {
-		onDragMove: ({ draggable: { transform: _transform, node, id }, overlay }) => {
+	const CANVAS_SIZE = 500;
+	const MARGIN_X = 265;
+	const MARGIN_Y = 425;
+	const cWidth = () => `calc((${CANVAS_SIZE}vw - ${MARGIN_X}px) * ${zoom()})`;
+	const cHeight = () => `calc((${CANVAS_SIZE}vh - ${MARGIN_Y}px) * ${zoom()})`;
+	return (0, solid_js_web.ssr)(_tmpl$3, (0, solid_js_web.ssrHydrationKey)(), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(_thisbeyond_solid_dnd.DragDropProvider, {
+		onDragMove: ({ draggable: { transform: _transform, node, id } }) => {
 			setId(id);
 			if (selected(id)) {
-				const x = node.offsetLeft + _transform.x / zoom();
-				const y = node.offsetTop + _transform.y / zoom();
-				overlay?.node.style.setProperty("top", y * 2 + "px");
-				overlay?.node.style.setProperty("left", x * 2 + "px");
-				const deltaX = _transform.x / zoom();
-				const deltaY = _transform.y / zoom();
+				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",
@@ -963,13 +1008,24 @@ var NodesBoard = () => {
 						y
 					}
 				});
-				setTransform({ ..._transform });
+				setTransform({
+					x: deltaX * currentZoom,
+					y: deltaY * currentZoom
+				});
 			}
 		},
 		onDragEnd: ({ draggable: { node, id } }) => {
 			if (!selected(id)) return;
-			const X = node.offsetLeft + transform().x / zoom();
-			const Y = node.offsetTop + transform().y / zoom();
+			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 rawX = node.offsetLeft + transform().x / currentZoom;
+			const rawY = node.offsetTop + transform().y / currentZoom;
+			const X = Math.min(Math.max(rawX, minX), maxX);
+			const Y = Math.min(Math.max(rawY, minY), maxY);
 			node.style.setProperty("top", Y + "px");
 			node.style.setProperty("left", X + "px");
 			node.style.removeProperty("transform");
@@ -989,21 +1045,25 @@ var NodesBoard = () => {
 			}, 0);
 		},
 		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, {})), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(DragBounds, {})), `relative cursor-crosshair ${isPanning() ? "cursor-grabbing" : ""}`, (0, solid_js_web.ssrStyleProperty)("height:", `calc(${(0, solid_js_web.escape)(cDim(), true)}vh - 85px)`) + (0, solid_js_web.ssrStyleProperty)(";width:", `calc(${(0, solid_js_web.escape)(cDim(), true)}vw - 53px)`) + (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)(EdgesBoard, {})), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(solid_js.For, {
-				get each() {
-					return nodes();
-				},
-				children: NodeComponent
-			})), (0, solid_js_web.escape)(Math.round(zoom() * 100))), (0, solid_js_web.createComponent)(solid_js.Show, {
-				get when() {
-					return !id() || !selected(id());
-				},
-				get children() {
-					return (0, solid_js_web.createComponent)(_thisbeyond_solid_dnd.DragOverlay, { 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, {
+					get each() {
+						return nodes();
+					},
+					children: NodeComponent
+				}))),
+				(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)(solid_js.Show, {
+					get when() {
+						return !id() || !selected(id());
+					},
+					get children() {
+						return (0, solid_js_web.createComponent)(_thisbeyond_solid_dnd.DragOverlay, { children: "" });
+					}
+				})
+			];
 		}
-	});
+	})));
 };
 //#endregion
 //#region src/ui/components/FlowChart.tsx
@@ -1014,8 +1074,8 @@ var _tmpl$ = [
 	"</div></div>"
 ];
 /**
-* Flowchart board canvas component that renders interactive nodes, edges,
-* pan/zoom, and toolbar controls.
+* Flowchart board canvas component that renders interactive nodes, edges, pan/zoom,
+* and toolbar controls.
 *
 * @param props - Flowchart configuration and event handlers of type
 *   {@linkcode FlowProps}.
@@ -1042,8 +1102,8 @@ var FlowChart = (props) => {
 //#endregion
 //#region src/ui/Flow.tsx
 /**
-* Root Flow component wrapping the {@linkcode FlowChart} inside the flow
-* context provider.
+* Root Flow component wrapping the {@linkcode FlowChart} inside the flow context
+* provider.
 *
 * @param props - Flow chart configuration and callbacks of type
 *   {@linkcode FlowProps}.