@bemedev/mind-flow 1.4.0 → 1.4.1

package/lib/server.es.js

@@ -1,7 +1,7 @@
 import { isDefined, toArray, type } from "@bemedev/app/bemedev";
-import { Dynamic, createComponent, escape, memo, mergeProps, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, ssrStyleProperty } from "solid-js/web";
+import { Dynamic, createComponent, escape, memo, mergeProps, ssr, ssrAttribute, ssrClassList, ssrHydrationKey, ssrStyle, ssrStyleProperty } from "solid-js/web";
 import { createState } from "@bemedev/app-solidjs";
-import { For, Show, createComponent as createComponent$1, createContext as createContext$1, createEffect, createMemo, createSignal, on, onCleanup, onMount, splitProps, useContext } from "solid-js";
+import { For, Show, createComponent as createComponent$1, createContext as createContext$1, createEffect, createSignal, on, onCleanup, onMount, useContext } from "solid-js";
 import { createMachine, deepEqual, interpret, toArray as toArray$1 } from "@bemedev/app";
 import { nanoid } from "nanoid";
 import { DragDropProvider, DragDropSensors, DragOverlay, createDraggable, useDragDropContext } from "@thisbeyond/solid-dnd";
@@ -994,14 +994,14 @@ var DragBounds = () => {
 };
 //#endregion
 //#region src/ui/components/EdgeComponent.tsx
-var _tmpl$$10 = [
+var _tmpl$$7 = [
 	"<path",
 	" class=\"",
 	"\" style=\"",
 	"\"",
 	"></path>"
 ];
-var _tmpl$2$5 = [
+var _tmpl$2$4 = [
 	"<g",
 	" cursor=\"pointer\" transform=\"",
 	"\" style=\"",
@@ -1066,19 +1066,19 @@ var EdgeComponent = (props) => {
 		get when() {
 			return vector();
 		},
-		children: (v) => [ssr(_tmpl$$10, ssrHydrationKey(), `relative cursor-pointer fill-transparent ${!!props.isNew ? "stroke-[rgba(168,168,168,0.4)] stroke-3 z-200" : ""} ${selected() && !props.isNew ? "stroke-[rgba(168,168,168,1)] stroke-4 z-100" : ""} ${!selected() && !props.isNew ? "stroke-[rgba(168,168,168,0.8)] stroke-3" : ""}`, ssrStyleProperty("pointer-events:", props.isNew ? "none" : "all"), ssrAttribute("d", escape(draw(v()), true), false)), createComponent(Show, {
+		children: (v) => [ssr(_tmpl$$7, ssrHydrationKey(), `relative cursor-pointer fill-transparent ${!!props.isNew ? "stroke-[rgba(168,168,168,0.4)] stroke-3 z-200" : ""} ${selected() && !props.isNew ? "stroke-[rgba(168,168,168,1)] stroke-4 z-100" : ""} ${!selected() && !props.isNew ? "stroke-[rgba(168,168,168,0.8)] stroke-3" : ""}`, ssrStyleProperty("pointer-events:", props.isNew ? "none" : "all"), ssrAttribute("d", escape(draw(v()), true), false)), createComponent(Show, {
 			get when() {
 				return selected();
 			},
 			get children() {
-				return ssr(_tmpl$2$5, ssrHydrationKey(), `translate(${escape(middlePoint().x, true)}, ${escape(middlePoint().y, true)})`, ssrStyleProperty("pointer-events:", "all") + ssrStyleProperty(";z-index:", "30"));
+				return ssr(_tmpl$2$4, ssrHydrationKey(), `translate(${escape(middlePoint().x, true)}, ${escape(middlePoint().y, true)})`, ssrStyleProperty("pointer-events:", "all") + ssrStyleProperty(";z-index:", "30"));
 			}
 		})]
 	});
 };
 //#endregion
 //#region src/ui/components/EdgesBoard.tsx
-var _tmpl$$9 = [
+var _tmpl$$6 = [
 	"<svg",
 	" class=\"pointer-events-none h-full w-full overflow-visible\"><!--$-->",
 	"<!--/--><!--$-->",
@@ -1099,7 +1099,7 @@ var EdgesBoard = () => {
 		selector: ({ context }) => Object.keys(context.edgesPositions ?? {}),
 		equals: (prev, next) => prev.length === next.length
 	});
-	return ssr(_tmpl$$9, ssrHydrationKey(), escape(createComponent(Show, {
+	return ssr(_tmpl$$6, ssrHydrationKey(), escape(createComponent(Show, {
 		get when() {
 			return hasNewEdge();
 		},
@@ -1118,12 +1118,12 @@ var EdgesBoard = () => {
 };
 //#endregion
 //#region src/ui/components/NodeComponent.tsx
-var _tmpl$$8 = [
+var _tmpl$$5 = [
 	"<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$4 = [
+var _tmpl$2$3 = [
 	"<div",
 	" class=\"",
 	"\" style=\"",
@@ -1198,12 +1198,12 @@ var NodeComponent = (props) => {
 		if (!edges) return false;
 		return edges.some(({ to }) => to === props.id);
 	} });
-	return ssr(_tmpl$2$4, ssrHydrationKey(), `flex flex-col absolute cursor-grab bg-white rounded-md shadow-md select-none transition-[border,box-shadow] duration-200 ease-in-out hover:shadow-lg draggable ${selected() ? "border border-[#e38c29] z-100" : ""} ${!selected() ? "border border-[#e6d4be] z-1" : ""} group min-w-48`, ssrStyleProperty("top:", `${escape(node().y, true)}px`) + ssrStyleProperty(";left:", `${escape(node().x, true)}px`), ssrAttribute("id", escape(props.id, true), false), `pointer-events-none absolute flex items-center justify-end -top-7.5 right-0 transition-all duration-200 ease-in-out space-x-2 ${selected() ? "w-full opacity-100" : ""} ${!selected() ? "w-0 -right-3 opacity-0 overflow-hidden" : ""}`, ssrStyleProperty("overflow:", "visible") + ssrStyleProperty(";pointer-events:", "all") + ssrStyleProperty(";width:", `${escape(12, true) * 2}px`) + ssrStyleProperty(";height:", `${escape(12, true) * 2}px`), escape(createComponent(Show, {
+	return ssr(_tmpl$2$3, 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" : ""} group min-w-48`, ssrStyleProperty("top:", `${escape(node().y, true)}px`) + ssrStyleProperty(";left:", `${escape(node().x, true)}px`), ssrAttribute("id", escape(props.id, true), false), `pointer-events-none absolute flex items-center justify-end -top-7.5 right-0 transition-all duration-200 ease-in-out space-x-2 ${selected() ? "w-full opacity-100" : ""} ${!selected() ? "w-0 -right-3 opacity-0 overflow-hidden" : ""}`, ssrStyleProperty("overflow:", "visible") + ssrStyleProperty(";pointer-events:", "all") + ssrStyleProperty(";width:", `${escape(12, true) * 2}px`) + ssrStyleProperty(";height:", `${escape(12, true) * 2}px`), escape(createComponent(Show, {
 		get when() {
 			return hasParent();
 		},
 		get children() {
-			return ssr(_tmpl$$8, ssrHydrationKey(), ssrStyleProperty("pointer-events:", "all") + ssrStyleProperty(";fill-rule:", "evenodd") + ssrStyleProperty(";clip-rule:", "evenodd") + ssrStyleProperty(";stroke-linejoin:", "round") + ssrStyleProperty(";stroke-miterlimit:", "2") + ssrStyleProperty(";width:", `${escape(12, true) * 2}px`) + ssrStyleProperty(";height:", `${escape(12, true) * 2}px`));
+			return ssr(_tmpl$$5, ssrHydrationKey(), ssrStyleProperty("pointer-events:", "all") + ssrStyleProperty(";fill-rule:", "evenodd") + ssrStyleProperty(";clip-rule:", "evenodd") + ssrStyleProperty(";stroke-linejoin:", "round") + ssrStyleProperty(";stroke-miterlimit:", "2") + ssrStyleProperty(";width:", `${escape(12, true) * 2}px`) + ssrStyleProperty(";height:", `${escape(12, true) * 2}px`));
 		}
 	})), ssrStyleProperty("pointer-events:", "all") + ssrStyleProperty(";width:", `${escape(12, true) * 2}px`) + ssrStyleProperty(";height:", `${escape(12, true) * 2}px`), escape(createComponent(Show, {
 		get when() {
@@ -1258,13 +1258,13 @@ function cn(...inputs) {
 }
 //#endregion
 //#region src/ui/components/Panels.tsx
-var _tmpl$$7 = [
+var _tmpl$$4 = [
 	"<div",
 	" class=\"",
 	"\">",
 	"</div>"
 ];
-var _tmpl$2$3 = [
+var _tmpl$2$2 = [
 	"<div",
 	" class=\"pointer-events-none absolute inset-0\"><!--$-->",
 	"<!--/--><!--$-->",
@@ -1288,7 +1288,7 @@ var Panel = (props) => {
 			return props.children;
 		},
 		keyed: true,
-		children: (Children) => ssr(_tmpl$$7, ssrHydrationKey(), `${escape(cn(props.class) || "", true)} ${exists ? "z-50" : ""}`, escape(createComponent(Children, {})))
+		children: (Children) => ssr(_tmpl$$4, ssrHydrationKey(), `${escape(cn(props.class) || "", true)} ${exists ? "z-50" : ""}`, escape(createComponent(Children, {})))
 	});
 };
 /**
@@ -1300,7 +1300,7 @@ var Panel = (props) => {
 * @returns Rendered overlay panels JSX elements.
 */
 var Panels = (props) => {
-	return ssr(_tmpl$2$3, ssrHydrationKey(), escape(createComponent(Panel, {
+	return ssr(_tmpl$2$2, ssrHydrationKey(), escape(createComponent(Panel, {
 		get children() {
 			return props.topLeft;
 		},
@@ -1319,7 +1319,7 @@ var Panels = (props) => {
 };
 //#endregion
 //#region src/ui/components/NodesBoard.tsx
-var _tmpl$$6 = [
+var _tmpl$$3 = [
 	"<div",
 	" class=\"relative h-full w-full overflow-auto\"><!--$-->",
 	"<!--/--><div class=\"",
@@ -1330,7 +1330,7 @@ var _tmpl$$6 = [
 	"<!--/--><!--$-->",
 	"<!--/--></div></div></div>"
 ];
-var _tmpl$2$2 = [
+var _tmpl$2$1 = [
 	"<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>"
@@ -1477,7 +1477,7 @@ var NodesBoard = (props) => {
 		},
 		get children() {
 			return [
-				ssr(_tmpl$$6, ssrHydrationKey(), escape(createComponent(DragDropSensors, {})), `relative cursor-crosshair overflow-hidden ${isPanning() ? "cursor-grabbing" : ""}`, ssrStyleProperty("height:", escape(cHeight(), true)) + ssrStyleProperty(";width:", escape(cWidth(), true)), ssrStyleProperty("scale:", escape(zoom(), true)) + ssrStyleProperty(";transform-origin:", "top left"), escape(createComponent(DragBounds, {})), escape(createComponent(EdgesBoard, {})), escape(createComponent(For, {
+				ssr(_tmpl$$3, ssrHydrationKey(), escape(createComponent(DragDropSensors, {})), `relative cursor-crosshair overflow-hidden ${isPanning() ? "cursor-grabbing" : ""}`, ssrStyleProperty("height:", escape(cHeight(), true)) + ssrStyleProperty(";width:", escape(cWidth(), true)), ssrStyleProperty("scale:", escape(zoom(), true)) + ssrStyleProperty(";transform-origin:", "top left"), escape(createComponent(DragBounds, {})), escape(createComponent(EdgesBoard, {})), escape(createComponent(For, {
 					get each() {
 						return nodeIds();
 					},
@@ -1489,7 +1489,7 @@ var NodesBoard = (props) => {
 					})
 				}))),
 				createComponent(Panels, mergeProps(() => props.panels)),
-				ssr(_tmpl$2$2, ssrHydrationKey(), escape(Math.round(zoom() * 100))),
+				ssr(_tmpl$2$1, ssrHydrationKey(), escape(Math.round(zoom() * 100))),
 				createComponent(Show, {
 					get when() {
 						return !selectedId();
@@ -1504,7 +1504,7 @@ var NodesBoard = (props) => {
 };
 //#endregion
 //#region src/ui/components/FlowChart.tsx
-var _tmpl$$5 = [
+var _tmpl$$2 = [
 	"<div",
 	" class=\"relative h-full w-full\"><div class=\"h-full w-full\" style=\"",
 	"\">",
@@ -1593,7 +1593,7 @@ var FlowChart = (props) => {
 			window.removeEventListener("pointerup", handlePointerUp);
 		});
 	});
-	return ssr(_tmpl$$5, ssrHydrationKey(), ssrStyleProperty("cursor:", fromSignal() ? "inherit" : "crosshair"), escape(createComponent(NodesBoard, {
+	return ssr(_tmpl$$2, ssrHydrationKey(), ssrStyleProperty("cursor:", fromSignal() ? "inherit" : "crosshair"), escape(createComponent(NodesBoard, {
 		get panels() {
 			return props.panels;
 		},
@@ -1603,194 +1603,6 @@ var FlowChart = (props) => {
 	})));
 };
 //#endregion
-//#region src/ui/globals/helpers/espace.ts
-/**
-* Returns a zero-width space if string is empty, preserving layout flow.
-*
-* @param newText - The input text string.
-*
-* @returns The input text or zero-width visible space placeholder.
-*/
-var espace = (newText) => {
-	if (newText === "") return "​";
-	return newText;
-};
-//#endregion
-//#region src/ui/globals/signals/createTyping.ts
-/**
-* Creates a reactive typewriter effect signal with oscillatory typing delay and
-* optional rewind.
-*
-* @param props - Configuration properties of type {@linkcode Props}.
-*
-* @returns An object containing the current text signal, type trigger, and text
-*   setter.
-*/
-var createTyping = ({ content, min, ...props }) => {
-	const rewind = props.rewind ?? false;
-	const rewindDelay = props.rewindDelay ?? 500;
-	const OSCILLATION = Math.min(min / 10 + content.length / 10, 10);
-	const [text, setText] = createSignal("​");
-	let timeoutId;
-	let index = 0;
-	let isTyping = true;
-	const max = min + OSCILLATION;
-	let interval = min;
-	let intervalDirection = 1;
-	const type = () => {
-		if (isTyping) {
-			if (index < content.length) {
-				setText((prev) => prev + content[index]);
-				index++;
-				timeoutId = setTimeout(type, interval);
-			} else if (rewind) {
-				isTyping = false;
-				intervalDirection = 1;
-				timeoutId = setTimeout(type, rewindDelay);
-			}
-		} else if (index > 0) {
-			index--;
-			setText(espace(content.substring(0, index)));
-			timeoutId = setTimeout(type, interval);
-		} else {
-			isTyping = true;
-			intervalDirection = 1;
-			timeoutId = setTimeout(type, rewindDelay);
-		}
-		interval += intervalDirection;
-		if (interval >= max) intervalDirection = -1;
-		else if (interval <= min) intervalDirection = 1;
-	};
-	onCleanup(() => {
-		if (timeoutId !== void 0) clearTimeout(timeoutId);
-	});
-	return {
-		text,
-		type,
-		setText
-	};
-};
-//#endregion
-//#region src/ui/globals/components/atoms/TypingText.tsx
-var _tmpl$$4 = [
-	"<div",
-	">",
-	"</div>"
-];
-/**
-* Renders animated text with a typewriter keystroke animation effect.
-*
-* @param props - Component configuration properties of type {@linkcode Props}.
-*
-* @returns Rendered animated typing text JSX container.
-*/
-var TypingText = (props) => {
-	const min = props.interval ?? 62;
-	const rewind = props.rewind ?? false;
-	const rewindDelay = props.rewindDelay ?? 500;
-	const content = props.children;
-	const disabled = createMemo(() => props.disabled ? props.disabled() : false, false);
-	const { text, type, setText } = createTyping({
-		content,
-		min,
-		rewind,
-		rewindDelay
-	});
-	createEffect(on(disabled, () => setText("​")));
-	createEffect(() => {
-		if (disabled()) setText(content);
-		else type();
-	});
-	return ssr(_tmpl$$4, ssrHydrationKey() + ssrAttribute("class", escape(props.class, true), false), escape(text()));
-};
-//#endregion
-//#region src/ui/globals/components/molecules/FadingDots.tsx
-var _tmpl$$3 = [
-	"<div",
-	" class=\"mt-4 flex items-center justify-center space-x-4\">",
-	"</div>"
-];
-/**
-* Loading animation component displaying animated pulsing dots.
-*
-* @param props - Fading dots configuration properties.
-* @param props.count - The number of dots to display.
-* @param props.duration - Animation duration in milliseconds. Defaults to 500.
-* @param props.innerProps - Additional properties and CSS styles applied to dot
-*   elements.
-*
-* @returns Rendered animated dots container JSX element.
-*/
-var FadingDots = ({ count: length, innerProps = {}, duration = 500 }) => {
-	const [local, rest] = splitProps(innerProps, ["class", "style"]);
-	return ssr(_tmpl$$3, ssrHydrationKey(), escape(Array.from({ length }, (_, i) => ssrElement("span", mergeProps({
-		get ["class"]() {
-			return cn("rounded-full animate-out direction-alternate repeat-infinite fade-out-5 size-4  bg-gray-600", local.class);
-		},
-		get style() {
-			return {
-				...local.style,
-				"animation-duration": `${duration}ms`,
-				"animation-delay": `${duration / i}ms`
-			};
-		},
-		"aria-hidden": "true"
-	}, rest), void 0, true))));
-};
-//#endregion
-//#region src/ui/globals/components/organisms/LoadingFallback.tsx
-var _tmpl$$2 = [
-	"<div",
-	" role=\"status\" aria-live=\"polite\" aria-label=\"Chargement en cours\"><div class=\"relative\"><div",
-	" aria-hidden=\"true\"></div><div",
-	" aria-hidden=\"true\"></div></div><div class=\"text-center\"",
-	"><!--$-->",
-	"<!--/--><!--$-->",
-	"<!--/--></div></div>"
-];
-/**
-* Fallback loading screen component displaying an animated spinner and typewriter
-* text.
-*
-* @example
-*   ```tsx
-*   <Show when={data()} fallback={<LoadingFallback />}>
-*     <DataComponent data={data()!} />
-*   </Show>;
-*   ```;
-*
-* @param props - Loading fallback properties of type
-*   {@linkcode LoadingFallbackProps}.
-*
-* @returns Rendered full-screen loading fallback JSX element.
-*/
-var LoadingFallback = (props) => {
-	const message = props.message ?? "Chargement en cours...";
-	const spinnerSizes = {
-		sm: "w-8 h-8",
-		md: "w-12 h-12",
-		lg: "w-16 h-16",
-		xl: "w-24 h-24"
-	};
-	const size = props.size ?? "lg";
-	return ssr(_tmpl$$2, ssrHydrationKey() + ssrAttribute("class", escape(cn("flex flex-col items-center justify-center gap-6", "h-screen w-screen overflow-hidden p-4", props.class), true), false), ssrAttribute("class", escape(cn(spinnerSizes[size], "rounded-full border-4 border-[#4B9CAD]/20", "animate-spin", "border-t-[#4B9CAD]"), true), false), ssrAttribute("class", escape(cn("absolute inset-2", "rounded-full border-4 border-transparent", "border-b-[#4B9CAD]/40", "animate-spin", "animation-duration-[1.5s]", "direction-[reverse]"), true), false), ssrAttribute("aria-label", escape(message, true), false), escape(createComponent(TypingText, {
-		"class": "text-lg font-medium text-gray-700 md:text-xl dark:text-gray-300",
-		get interval() {
-			return props.interval ?? 80;
-		},
-		get rewind() {
-			return props.rewind ?? true;
-		},
-		get rewindDelay() {
-			return props.rewindDelay ?? 2e3;
-		},
-		children: message
-	})), escape(createComponent(FadingDots, {
-		count: 5,
-		innerProps: { class: "bg-[#3d8091]" }
-	})));
-};
-//#endregion
 //#region src/ui/Flow.tsx
 var _tmpl$$1 = [
 	"<div",
@@ -1798,47 +1610,24 @@ var _tmpl$$1 = [
 	"\" 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}.
+* @template | Type {@linkcode NodeData} `D` - Custom node data dictionary type
+*   extending type {@linkcode NodeData}.
 *
 * @param props - Flow chart configuration and callbacks of type
 *   {@linkcode FlowProps}.
 *
 * @returns The rendered Solid component.
 *
-* @see {@linkcode Provider}, {@linkcode FlowChart}
+* @see {@linkcode Provider}
 */
 var Flow = (props) => {
-	const [isMounted, setIsMounted] = createSignal(false);
-	onMount(() => setTimeout(() => setIsMounted(true), props.delay));
-	return ssr(_tmpl$$1, ssrHydrationKey(), ssrStyleProperty("background-image:", "radial-gradient(circle, #b8b8b8bf 1px, rgba(0, 0, 0, 0) 1px)"), escape(createComponent(Show, {
-		get when() {
-			return isMounted();
-		},
-		keyed: true,
-		get fallback() {
-			return ssr(_tmpl$2$1, ssrHydrationKey(), escape(createComponent(LoadingFallback, {
-				message: "Chart is loading...",
-				interval: 35,
-				rewind: true,
-				rewindDelay: 1e3
-			})));
-		},
-		get children() {
-			return createComponent(Provider, { get children() {
-				return createComponent(FlowChart, props);
-			} });
-		}
-	})));
+	return ssr(_tmpl$$1, ssrHydrationKey(), ssrStyleProperty("background-image:", "radial-gradient(circle, #b8b8b8bf 1px, rgba(0, 0, 0, 0) 1px)"), escape(createComponent(Provider, { get children() {
+		return createComponent(FlowChart, props);
+	} })));
 };
 //#endregion
 //#region src/ui/globals/directives/clickOutside.ts

package/lib/ui/Flow.d.ts

@@ -5,15 +5,15 @@ import { FlowProps } from './components/FlowChart.types';
  * Root Flow component wrapping the {@linkcode FlowChart} inside the flow context
  * provider.
  *
- * @template | {@linkcode NodeData} `D` - Custom node data dictionary type extending
- *   {@linkcode NodeData}.
+ * @template | Type {@linkcode NodeData} `D` - Custom node data dictionary type
+ *   extending type {@linkcode NodeData}.
  *
  * @param props - Flow chart configuration and callbacks of type
  *   {@linkcode FlowProps}.
  *
  * @returns The rendered Solid component.
  *
- * @see {@linkcode Provider}, {@linkcode FlowChart}
+ * @see {@linkcode Provider}
  */
 export declare const Flow: <D extends NodeData = NodeData>(props: FlowProps<D>) => JSX.Element;
 //# sourceMappingURL=Flow.d.ts.map

package/lib/ui/Flow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Flow.d.ts","sourceRoot":"","sources":["../../src/ui/Flow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,GAAG,EAAE,MAAM,UAAU,CAAC;AAGjE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAG9D;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,IAAI,GAAI,CAAC,SAAS,QAAQ,GAAG,QAAQ,EAChD,OAAO,SAAS,CAAC,CAAC,CAAC,KAClB,GAAG,CAAC,OAkCN,CAAC"}
+{"version":3,"file":"Flow.d.ts","sourceRoot":"","sources":["../../src/ui/Flow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAE,MAAM,UAAU,CAAC;AAEpC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAE9D;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,IAAI,GAAI,CAAC,SAAS,QAAQ,GAAG,QAAQ,EAChD,OAAO,SAAS,CAAC,CAAC,CAAC,KAClB,GAAG,CAAC,OAeN,CAAC"}

package/lib/ui/components/FlowChart.types.d.ts

@@ -15,8 +15,8 @@ export type FlowPanels = {
  * Configuration options and callback handlers for the {@linkcode FlowChart}
  * component.
  *
- * @template | {@linkcode NodeData} `D` - Custom node data dictionary type extending
- *   {@linkcode NodeData}.
+ * @template | Type {@linkcode NodeData} `D` - Custom node data dictionary type
+ *   extending type {@linkcode NodeData}.
  */
 export type FlowProps<D extends NodeData = NodeData> = {
     /** Optional delay in milliseconds before mounting the flowchart canvas. */
@@ -64,24 +64,24 @@ export type FlowProps<D extends NodeData = NodeData> = {
 /**
  * Type alias extracting the non-undefined flowchart configuration object.
  *
- * @template | {@linkcode NodeData} `D` - Custom node data dictionary type extending
- *   {@linkcode NodeData}.
+ * @template | Type {@linkcode NodeData} `D` - Custom node data dictionary type
+ *   extending type {@linkcode NodeData}.
  */
 export type ConfigFrom<D extends NodeData = NodeData> = NotUndefined<FlowProps<D>['config']>;
 /**
  * Type alias extracting the non-undefined list of nodes from flowchart
  * configuration.
  *
- * @template | {@linkcode NodeData} `D` - Custom node data dictionary type extending
- *   {@linkcode NodeData}.
+ * @template | Type {@linkcode NodeData} `D` - Custom node data dictionary type
+ *   extending type {@linkcode NodeData}.
  */
 export type NodesFrom<D extends NodeData> = NotUndefined<ConfigFrom<D>['nodes']>;
 /**
  * Type alias extracting the non-undefined list of edges from flowchart
  * configuration.
  *
- * @template | {@linkcode NodeData} `D` - Custom node data dictionary type extending
- *   {@linkcode NodeData}.
+ * @template | Type {@linkcode NodeData} `D` - Custom node data dictionary type
+ *   extending type {@linkcode NodeData}.
  */
 export type EdgesFrom<D extends NodeData> = NotUndefined<ConfigFrom<D>['edges']>;
 //# sourceMappingURL=FlowChart.types.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bemedev/mind-flow",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Flow Chart UI library for Solid.js applications",
   "keywords": [
     "diagram",
@@ -65,7 +65,7 @@
     "@bemedev/app": "^2.5.0",
     "@bemedev/app-cli": "^2.5.0",
     "@bemedev/app-solidjs": "^2.5.1",
-    "@bemedev/dev-utils": "^1.3.1",
+    "@bemedev/dev-utils": "^1.5.0",
     "@rollup/plugin-babel": "^7.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@size-limit/file": "^13.0.3",

package/src/ui/Flow.tsx

@@ -1,33 +1,27 @@
-import { createSignal, onMount, Show, type JSX } from 'solid-js';
-import {} from 'solid-js/web';
+import { type JSX } from 'solid-js';
 
 import type { NodeData } from '../services/main.machine.typings';
 import { FlowChart } from './components/FlowChart';
 import { Provider } from './components/FlowChart.context';
 import type { FlowProps } from './components/FlowChart.types';
-import { LoadingFallback } from './globals/components/organisms/LoadingFallback';
 
 /**
  * Root Flow component wrapping the {@linkcode FlowChart} inside the flow context
  * provider.
  *
- * @template | {@linkcode NodeData} `D` - Custom node data dictionary type extending
- *   {@linkcode NodeData}.
+ * @template | Type {@linkcode NodeData} `D` - Custom node data dictionary type
+ *   extending type {@linkcode NodeData}.
  *
  * @param props - Flow chart configuration and callbacks of type
  *   {@linkcode FlowProps}.
  *
  * @returns The rendered Solid component.
  *
- * @see {@linkcode Provider}, {@linkcode FlowChart}
+ * @see {@linkcode Provider}
  */
 export const Flow = <D extends NodeData = NodeData>(
   props: FlowProps<D>,
 ): JSX.Element => {
-  const [isMounted, setIsMounted] = createSignal(false);
-
-  // onMount never runs on the server, only in the browser
-  onMount(() => setTimeout(() => setIsMounted(true), props.delay));
   return (
     <div
       style={{
@@ -37,24 +31,9 @@ export const Flow = <D extends NodeData = NodeData>(
 
       class='relative flex h-full w-full rounded-lg border-2 border-gray-600 bg-white bg-size-[30px_30px]'
     >
-      <Show
-        when={isMounted()}
-        keyed
-        fallback={
-          <div class='relative flex flex-1 items-center justify-center'>
-            <LoadingFallback
-              message='Chart is loading...'
-              interval={35}
-              rewind
-              rewindDelay={1_000}
-            />
-          </div>
-        }
-      >
-        <Provider>
-          <FlowChart {...props} />
-        </Provider>
-      </Show>
+      <Provider>
+        <FlowChart {...props} />
+      </Provider>
     </div>
   );
 };

package/src/ui/components/FlowChart.types.ts

@@ -19,8 +19,8 @@ export type FlowPanels = {
  * Configuration options and callback handlers for the {@linkcode FlowChart}
  * component.
  *
- * @template | {@linkcode NodeData} `D` - Custom node data dictionary type extending
- *   {@linkcode NodeData}.
+ * @template | Type {@linkcode NodeData} `D` - Custom node data dictionary type
+ *   extending type {@linkcode NodeData}.
  */
 export type FlowProps<D extends NodeData = NodeData> = {
   /** Optional delay in milliseconds before mounting the flowchart canvas. */
@@ -66,8 +66,8 @@ export type FlowProps<D extends NodeData = NodeData> = {
 /**
  * Type alias extracting the non-undefined flowchart configuration object.
  *
- * @template | {@linkcode NodeData} `D` - Custom node data dictionary type extending
- *   {@linkcode NodeData}.
+ * @template | Type {@linkcode NodeData} `D` - Custom node data dictionary type
+ *   extending type {@linkcode NodeData}.
  */
 export type ConfigFrom<D extends NodeData = NodeData> = NotUndefined<
   FlowProps<D>['config']
@@ -77,8 +77,8 @@ export type ConfigFrom<D extends NodeData = NodeData> = NotUndefined<
  * Type alias extracting the non-undefined list of nodes from flowchart
  * configuration.
  *
- * @template | {@linkcode NodeData} `D` - Custom node data dictionary type extending
- *   {@linkcode NodeData}.
+ * @template | Type {@linkcode NodeData} `D` - Custom node data dictionary type
+ *   extending type {@linkcode NodeData}.
  */
 export type NodesFrom<D extends NodeData> = NotUndefined<ConfigFrom<D>['nodes']>;
 
@@ -86,7 +86,7 @@ export type NodesFrom<D extends NodeData> = NotUndefined<ConfigFrom<D>['nodes']>
  * Type alias extracting the non-undefined list of edges from flowchart
  * configuration.
  *
- * @template | {@linkcode NodeData} `D` - Custom node data dictionary type extending
- *   {@linkcode NodeData}.
+ * @template | Type {@linkcode NodeData} `D` - Custom node data dictionary type
+ *   extending type {@linkcode NodeData}.
  */
 export type EdgesFrom<D extends NodeData> = NotUndefined<ConfigFrom<D>['edges']>;