@bemedev/mind-flow 0.0.1 → 0.1.1

package/lib/server.es.js

@@ -10,8 +10,8 @@ import { DragDropProvider, DragDropSensors, DragOverlay, createDraggable, useDra
 import { dequal as dequal$1 } from "dequal";
 //#region src/ui/components/classes.ts
 /**
-* List of Tailwind CSS class names used across flowchart UI components to
-* ensure compilation safelist.
+* List of Tailwind CSS class names used across flowchart UI components to ensure
+* compilation safelist.
 */
 var CLASSES = [
 	"fill-transparent",
@@ -97,19 +97,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$1 = (context, options) => {
 	const _context = createContext(context(), options);
@@ -135,7 +132,7 @@ type(({ optional, use }) => ({
 	input: optional(use(point)),
 	output: use(point)
 }));
-/** Schema definition for edge extremities */
+/** Schema definition for edge extremities. */
 var extremities = type({
 	from: "string",
 	to: "string"
@@ -167,8 +164,7 @@ type({
 //#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.
@@ -189,8 +185,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 = createMachine({
 	initial: "idle",
@@ -207,15 +203,10 @@ var machine = 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",
@@ -249,6 +240,10 @@ var machine = createMachine({
 				],
 				target: "/construction"
 			},
+			MOVE: {
+				actions: ["moveNode", "buildUI"],
+				target: "/construction"
+			},
 			ADD_EDGE: {
 				actions: ["addEdge"],
 				target: "/construction"
@@ -286,6 +281,7 @@ var machine = createMachine({
 		DESELECT: "never",
 		ADD_EDGE: use(extremities)
 	})),
+	sync: true,
 	pContext: type(({ union }) => ({ generatedId: union("string", "null") })),
 	context: type(({ optional, use, array }) => ({
 		data: optional({
@@ -300,8 +296,7 @@ var machine = createMachine({
 		}),
 		selected: optional("string"),
 		updatingUI: optional("boolean")
-	})),
-	sync: true
+	}))
 }).provideOptions(({ assign, batch, erase }) => ({ actions: {
 	configure: batch(assign("context.data", () => ({
 		nodes: [],
@@ -385,14 +380,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: {
@@ -408,22 +406,31 @@ var DEFAULT_NODES = [{
 //#endregion
 //#region src/ui/components/FlowChart.context.ts
 /**
-* Shared state machine interpreter service instance for flowchart state
-* management.
-*/
-var service = interpret(machine, {
-	context: {},
-	pContext: { generatedId: null }
-});
-/**
-* Solid Context Provider component and hook for accessing flowchart board
-* state, services, and zoom.
+* Solid Context Provider component and hook for accessing flowchart board state,
+* services, and zoom.
 */
 var [Provider, useFlow] = createContext$1(() => {
+	/**
+	* Shared state machine interpreter service instance for flowchart state
+	* management.
+	*/
+	const service = interpret(machine, {
+		context: {},
+		pContext: { generatedId: null }
+	});
 	const zoom = createSignal(1);
 	const newEdge = createSignal();
 	const [boardRef, setBoardRef] = createSignal();
 	const [dimensions, setDimensions] = createSignal({}, { equals: 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 {
@@ -433,11 +440,21 @@ var [Provider, useFlow] = createContext$1(() => {
 		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] = 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 {
@@ -517,9 +534,7 @@ var [Provider, useFlow] = createContext$1(() => {
 		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({
@@ -638,17 +653,18 @@ var [Provider, useFlow] = createContext$1(() => {
 		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();
@@ -657,23 +673,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)
 			};
 		}
 	};
@@ -694,7 +710,7 @@ var _tmpl$$4 = [
 	"\"",
 	"></path>"
 ];
-var _tmpl$2$1 = [
+var _tmpl$2$2 = [
 	"<g",
 	" cursor=\"pointer\" transform=\"",
 	"\" style=\"",
@@ -709,8 +725,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}.
 *
@@ -720,8 +736,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}.
 *
@@ -747,7 +763,7 @@ var EdgeComponent = (props) => {
 			return selected();
 		},
 		get children() {
-			return ssr(_tmpl$2$1, ssrHydrationKey(), `translate(${escape(middlePoint().x, true)}, ${escape(middlePoint().y, true)})`, ssrStyleProperty("pointer-events:", "all") + ssrStyleProperty(";z-index:", "30"));
+			return ssr(_tmpl$2$2, ssrHydrationKey(), `translate(${escape(middlePoint().x, true)}, ${escape(middlePoint().y, true)})`, ssrStyleProperty("pointer-events:", "all") + ssrStyleProperty(";z-index:", "30"));
 		}
 	})];
 };
@@ -760,8 +776,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.
 */
@@ -811,13 +827,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=\"",
@@ -843,8 +859,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}.
 *
@@ -854,17 +870,17 @@ var NodeComponent = (props) => {
 	const [ref, setRef] = createSignal();
 	const { dimensions: [dimensions, setDimensions], newEdge: [newEdge, setNewEdge], getBoardPoint, service, zoom: [zoom] } = useFlow();
 	const selected = useState(service, { selector: (s) => s.context.selected === props.id });
-	createEffect(() => {
+	onMount(() => {
 		ref();
 		zoom();
 	});
 	const hasParent = useState(service, { selector: ({ context: { data } }) => {
 		const edges = data?.edges;
 		if (!edges) return false;
-		return Object.values(edges).some((edge) => edge.to === props.id);
+		return edges.some(({ to }) => to === props.id);
 	} });
 	createDraggable(props.id);
-	return ssr(_tmpl$3, ssrHydrationKey() + ssrAttribute("id", escape(props.id, true), false), `flex flex-col absolute cursor-grab bg-white rounded-md shadow-md select-none transition-[border,box-shadow] duration-200 ease-in-out hover:shadow-lg draggable ${selected() ? "border border-[#e38c29] z-[100]" : ""} ${!selected() ? "border border-[#e6d4be] z-[1]" : ""} min-w-48`, ssrStyleProperty("top:", `${escape(props.y, true)}px`) + ssrStyleProperty(";left:", `${escape(props.x, true)}px`), `pointer-events-none absolute flex items-center justify-end -top-7.5 right-0 transition-all duration-200 ease-in-out space-x-2 ${selected() ? "w-full opacity-100" : ""} ${!selected() ? "w-0 -right-3 opacity-0 overflow-hidden" : ""}`, ssrStyleProperty("overflow:", "visible") + ssrStyleProperty(";pointer-events:", "all") + ssrStyleProperty(";width:", `${escape(12, true) * 2}px`) + ssrStyleProperty(";height:", `${escape(12, true) * 2}px`), escape(createComponent(Show, {
+	return ssr(_tmpl$3$1, ssrHydrationKey() + ssrAttribute("id", escape(props.id, true), false), `flex flex-col absolute cursor-grab bg-white rounded-md shadow-md select-none transition-[border,box-shadow] duration-200 ease-in-out hover:shadow-lg draggable ${selected() ? "border border-[#e38c29] z-[100]" : ""} ${!selected() ? "border border-[#e6d4be] z-[1]" : ""} min-w-48`, ssrStyleProperty("top:", `${escape(props.y, true)}px`) + ssrStyleProperty(";left:", `${escape(props.x, true)}px`), `pointer-events-none absolute flex items-center justify-end -top-7.5 right-0 transition-all duration-200 ease-in-out space-x-2 ${selected() ? "w-full opacity-100" : ""} ${!selected() ? "w-0 -right-3 opacity-0 overflow-hidden" : ""}`, ssrStyleProperty("overflow:", "visible") + ssrStyleProperty(";pointer-events:", "all") + ssrStyleProperty(";width:", `${escape(12, true) * 2}px`) + ssrStyleProperty(";height:", `${escape(12, true) * 2}px`), escape(createComponent(Show, {
 		get when() {
 			return hasParent();
 		},
@@ -888,7 +904,7 @@ var NodeComponent = (props) => {
 			return props.input || hasParent();
 		},
 		get children() {
-			return ssr(_tmpl$2, ssrHydrationKey(), ssrStyleProperty("left:", `-${escape(18, true)}px`), ssrStyleProperty("width:", `${escape(12, true)}px`) + ssrStyleProperty(";height:", `${escape(12, true)}px`) + ssrStyleProperty(";margin-top:", `${escape(12, true)}px`) + ssrStyleProperty(";pointer-events:", "all"));
+			return ssr(_tmpl$2$1, ssrHydrationKey(), ssrStyleProperty("left:", `-${escape(18, true)}px`), ssrStyleProperty("width:", `${escape(12, true)}px`) + ssrStyleProperty(";height:", `${escape(12, true)}px`) + ssrStyleProperty(";margin-top:", `${escape(12, true)}px`) + ssrStyleProperty(";pointer-events:", "all"));
 		}
 	})), ssrStyleProperty("right:", `-${escape(18, true)}px`), ssrStyleProperty("width:", `${escape(12, true)}px`) + ssrStyleProperty(";height:", `${escape(12, true)}px`) + ssrStyleProperty(";margin-top:", `${escape(12, true)}px`) + ssrStyleProperty(";pointer-events:", "all"));
 };
@@ -896,22 +912,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] = createSignal(false);
 	const [transform, setTransform] = createSignal({
 		x: 0,
@@ -919,11 +946,23 @@ var NodesBoard = () => {
 	});
 	const [id, setId] = createSignal("");
 	const [previousZoom, setPreviousZoom] = createSignal();
-	let cleanupPanning = () => {};
-	onCleanup(cleanupPanning);
+	let percentX = 0;
+	let percentY = 0;
 	const { board: [, setRef], service, newEdge: [newEdge], zoom: [zoom, setZoom] } = useFlow();
-	createEffect(on(zoom, () => {}, { defer: true }));
+	createEffect(on(zoom, () => {
+		const maxScrollX = containerRef.scrollWidth - containerRef.clientWidth;
+		const maxScrollY = containerRef.scrollHeight - containerRef.clientHeight;
+		if (maxScrollX > 0) containerRef.scrollLeft = percentX * maxScrollX;
+		if (maxScrollY > 0) containerRef.scrollTop = percentY * maxScrollY;
+	}, { defer: true }));
 	const selectedId = useState(service, { selector: (s) => s.context?.selected });
+	/**
+	* Determines whether the given element ID matches the currently selected entity.
+	*
+	* @param id - The node or edge identifier to check.
+	*
+	* @returns `true` if the item is currently selected, otherwise `false`.
+	*/
 	const selected = (id) => selectedId() === id;
 	const nodes = useState(service, {
 		selector: (s) => {
@@ -938,21 +977,27 @@ var NodesBoard = () => {
 		},
 		equals: dequal$1
 	});
-	const cDim = () => {
-		const _zoom = zoom();
-		if (_zoom < 1) return 500 * _zoom;
-		return 500;
-	};
-	return createComponent(DragDropProvider, {
-		onDragMove: ({ draggable: { transform: _transform, node, id }, overlay }) => {
+	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 ssr(_tmpl$3, ssrHydrationKey(), escape(createComponent(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",
@@ -962,13 +1007,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");
@@ -988,21 +1044,25 @@ var NodesBoard = () => {
 			}, 0);
 		},
 		get children() {
-			return [ssr(_tmpl$$1, ssrHydrationKey(), escape(createComponent(DragDropSensors, {})), escape(createComponent(DragBounds, {})), `relative cursor-crosshair ${isPanning() ? "cursor-grabbing" : ""}`, ssrStyleProperty("height:", `calc(${escape(cDim(), true)}vh - 85px)`) + ssrStyleProperty(";width:", `calc(${escape(cDim(), true)}vw - 53px)`) + ssrStyleProperty(";scale:", escape(zoom(), true)) + ssrStyleProperty(";transform-origin:", "top left"), escape(createComponent(EdgesBoard, {})), escape(createComponent(For, {
-				get each() {
-					return nodes();
-				},
-				children: NodeComponent
-			})), escape(Math.round(zoom() * 100))), createComponent(Show, {
-				get when() {
-					return !id() || !selected(id());
-				},
-				get children() {
-					return createComponent(DragOverlay, { children: "" });
-				}
-			})];
+			return [
+				ssr(_tmpl$$1, ssrHydrationKey(), escape(createComponent(DragDropSensors, {})), `relative cursor-crosshair overflow-hidden ${isPanning() ? "cursor-grabbing" : ""}`, ssrStyleProperty("height:", escape(cHeight(), true)) + ssrStyleProperty(";width:", escape(cWidth(), true)), ssrStyleProperty("scale:", escape(zoom(), true)) + ssrStyleProperty(";transform-origin:", "top left"), escape(createComponent(DragBounds, {})), escape(createComponent(EdgesBoard, {})), escape(createComponent(For, {
+					get each() {
+						return nodes();
+					},
+					children: NodeComponent
+				}))),
+				ssr(_tmpl$2, ssrHydrationKey(), escape(Math.round(zoom() * 100))),
+				createComponent(Show, {
+					get when() {
+						return !id() || !selected(id());
+					},
+					get children() {
+						return createComponent(DragOverlay, { children: "" });
+					}
+				})
+			];
 		}
-	});
+	})));
 };
 //#endregion
 //#region src/ui/components/FlowChart.tsx
@@ -1013,8 +1073,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}.
@@ -1041,8 +1101,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}.

package/lib/services/main.machine.d.ts

@@ -1,6 +1,5 @@
 /**
- * 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.
@@ -17,8 +16,8 @@ export declare const buildEdgeId: (out: string, _in: string) => string;
  */
 export declare const buildNodeID: (generated?: string | null) => string;
 /**
- * State machine managing flowchart state transitions, nodes, edges,
- * selection, and layout actions.
+ * State machine managing flowchart state transitions, nodes, edges, selection, and
+ * layout actions.
  */
 export declare const machine: import('@bemedev/app').SyncMachine<{
     readonly initial: "idle";
@@ -40,17 +39,12 @@ export declare const machine: import('@bemedev/app').SyncMachine<{
         };
         readonly working: {
             readonly on: {
-                readonly MOVE: {
-                    readonly actions: readonly ["moveNode", "buildUI"];
-                    readonly target: "/construction";
-                };
                 readonly MOVE_IMMEDIATE: {
                     readonly actions: readonly [{
                         readonly name: "buildImmediateUI";
                         readonly description: "Must be in the ui";
                     }];
                 };
-                readonly UPDATE_UI: "/construction";
                 readonly ADD_CHILD: {
                     readonly actions: readonly ["generateID", {
                         readonly name: "placeChild";
@@ -72,6 +66,10 @@ export declare const machine: import('@bemedev/app').SyncMachine<{
                     }, "linkSibling"];
                     readonly target: "/construction";
                 };
+                readonly MOVE: {
+                    readonly actions: readonly ["moveNode", "buildUI"];
+                    readonly target: "/construction";
+                };
                 readonly ADD_EDGE: {
                     readonly actions: readonly ["addEdge"];
                     readonly target: "/construction";

package/lib/services/main.machine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"main.machine.d.ts","sourceRoot":"","sources":["../../src/services/main.machine.ts"],"names":[],"mappings":"AAKA;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW,GAAI,KAAK,MAAM,EAAE,KAAK,MAAM,WAEnD,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,GAAI,YAAY,MAAM,GAAG,IAAI,WAEpD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqNjB,CAAC"}
+{"version":3,"file":"main.machine.d.ts","sourceRoot":"","sources":["../../src/services/main.machine.ts"],"names":[],"mappings":"AAMA;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,GAAI,KAAK,MAAM,EAAE,KAAK,MAAM,WAEnD,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,GAAI,YAAY,MAAM,GAAG,IAAI,WAEpD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyLjB,CAAC"}

package/lib/services/main.typings.d.ts

@@ -17,7 +17,7 @@ export declare const nodeOffset: import('@bemedev/typings').inferSh<{
         y: "number";
     };
 }>;
-/** Schema definition for edge extremities */
+/** Schema definition for edge extremities. */
 export declare const extremities: import('@bemedev/typings').inferSh<{
     from: "string";
     to: "string";
@@ -54,8 +54,8 @@ export declare const dimensions: import('@bemedev/typings').inferSh<{
     }>;
 }>;
 /**
- * Schema definition for a 2D line vector representing edge coordinates
- * `(x0, y0)` to `(x1, y1)`.
+ * Schema definition for a 2D line vector representing edge coordinates `(x0, y0)` to
+ * `(x1, y1)`.
  */
 export declare const vector: import('@bemedev/typings').inferSh<{
     x0: "number";