@virentia/inspector 0.1.2

package/dist/index.mjs

@@ -0,0 +1,800 @@
+import { createElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createRoot } from "react-dom/client";
+import { Badge, Box, Button, Group, MantineProvider, Modal, Paper, ScrollArea, Stack, Switch, Text, Textarea, Title } from "@mantine/core";
+import { event, reaction, scope, store } from "@virentia/core";
+import { connectVirentiaInspector } from "@virentia/core/devtools";
+import { ScopeProvider, useUnit } from "@virentia/react";
+import { Background, Controls, Handle, Position, ReactFlow, ReactFlowProvider } from "@xyflow/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region lib/client/shared/api/devtools.ts
+const emptySnapshot = {
+	nodes: [],
+	edges: [],
+	scopes: [],
+	breakpoints: []
+};
+//#endregion
+//#region lib/client/shared/graph/index.ts
+function createReactiveSelection(snapshot, selectedNodeId) {
+	if (!selectedNodeId || !snapshot.nodes.some((node) => node.id === selectedNodeId)) return null;
+	const nextByNode = /* @__PURE__ */ new Map();
+	const previousByNode = /* @__PURE__ */ new Map();
+	const nodeIds = new Set([selectedNodeId]);
+	const edgeIds = /* @__PURE__ */ new Set();
+	for (const node of snapshot.nodes) {
+		nextByNode.set(node.id, []);
+		previousByNode.set(node.id, []);
+	}
+	for (const edge of snapshot.edges) {
+		nextByNode.get(edge.source)?.push(edge);
+		previousByNode.get(edge.target)?.push(edge);
+	}
+	walkForward(selectedNodeId, /* @__PURE__ */ new Set());
+	walkBackward(selectedNodeId, /* @__PURE__ */ new Set());
+	return {
+		nodeIds: [...nodeIds],
+		edgeIds: [...edgeIds]
+	};
+	function walkForward(nodeId, visited) {
+		if (visited.has(nodeId)) return;
+		visited.add(nodeId);
+		nodeIds.add(nodeId);
+		for (const edge of nextByNode.get(nodeId) ?? []) {
+			edgeIds.add(edge.id);
+			nodeIds.add(edge.target);
+			walkForward(edge.target, visited);
+		}
+	}
+	function walkBackward(nodeId, visited) {
+		if (visited.has(nodeId)) return;
+		visited.add(nodeId);
+		nodeIds.add(nodeId);
+		for (const edge of previousByNode.get(nodeId) ?? []) {
+			edgeIds.add(edge.id);
+			nodeIds.add(edge.source);
+			walkBackward(edge.source, visited);
+		}
+	}
+}
+function createFlowLayout(snapshot) {
+	const incoming = /* @__PURE__ */ new Map();
+	const nextByNode = /* @__PURE__ */ new Map();
+	for (const node of snapshot.nodes) {
+		incoming.set(node.id, 0);
+		nextByNode.set(node.id, []);
+	}
+	for (const edge of snapshot.edges) {
+		incoming.set(edge.target, (incoming.get(edge.target) ?? 0) + 1);
+		nextByNode.get(edge.source)?.push(edge.target);
+	}
+	const roots = snapshot.nodes.filter((node) => (incoming.get(node.id) ?? 0) === 0);
+	const queue = [...roots.length ? roots : snapshot.nodes].map((node) => node.id);
+	const levelByNode = /* @__PURE__ */ new Map();
+	for (const id of queue) levelByNode.set(id, 0);
+	while (queue.length) {
+		const nodeId = queue.shift();
+		const level = levelByNode.get(nodeId) ?? 0;
+		for (const next of nextByNode.get(nodeId) ?? []) {
+			const nextLevel = Math.max(levelByNode.get(next) ?? 0, level + 1);
+			if (nextLevel !== levelByNode.get(next)) {
+				levelByNode.set(next, nextLevel);
+				queue.push(next);
+			}
+		}
+	}
+	for (const node of snapshot.nodes) if (!levelByNode.has(node.id)) levelByNode.set(node.id, 0);
+	const levels = /* @__PURE__ */ new Map();
+	for (const node of snapshot.nodes) {
+		const level = levelByNode.get(node.id) ?? 0;
+		const group = levels.get(level) ?? [];
+		group.push(node);
+		levels.set(level, group);
+	}
+	return snapshot.nodes.map((node) => {
+		const level = levelByNode.get(node.id) ?? 0;
+		const index = (levels.get(level) ?? []).findIndex((item) => item.id === node.id);
+		return {
+			id: node.id,
+			x: level * 220,
+			y: index * 86
+		};
+	});
+}
+//#endregion
+//#region lib/client/shared/ui/node-label.tsx
+function NodeLabel(props) {
+	return /* @__PURE__ */ jsxs(Box, {
+		className: "virentia-inspector__node-label",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "virentia-inspector__node-name",
+			children: props.node.name
+		}), /* @__PURE__ */ jsx("span", {
+			className: "virentia-inspector__node-type",
+			children: props.node.type
+		})]
+	});
+}
+//#endregion
+//#region lib/client/shared/ui/flow-node.tsx
+function UnitFlowNode(props) {
+	const data = props.data;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "virentia-inspector__flow-node",
+		children: [
+			/* @__PURE__ */ jsx(Handle, {
+				className: "virentia-inspector__handle",
+				id: "target",
+				position: Position.Left,
+				type: "target"
+			}),
+			/* @__PURE__ */ jsx(NodeLabel, { node: data.node }),
+			/* @__PURE__ */ jsx(Handle, {
+				className: "virentia-inspector__handle",
+				id: "source",
+				position: Position.Right,
+				type: "source"
+			})
+		]
+	});
+}
+//#endregion
+//#region lib/client/shared/ui/timeline-row.tsx
+function TimelineRow(props) {
+	const color = props.event.breakpoint ? "red" : props.event.failed ? "red" : props.event.stopped ? "yellow" : "green";
+	return /* @__PURE__ */ jsxs(Box, {
+		className: "virentia-inspector__timeline-row",
+		children: [
+			/* @__PURE__ */ jsxs(Group, {
+				justify: "space-between",
+				gap: "xs",
+				wrap: "nowrap",
+				children: [/* @__PURE__ */ jsx(Text, {
+					size: "sm",
+					fw: 650,
+					lineClamp: 1,
+					children: props.event.nodeName
+				}), /* @__PURE__ */ jsx(Badge, {
+					color,
+					variant: "light",
+					children: props.event.breakpoint ? "break" : props.event.nodeType
+				})]
+			}),
+			/* @__PURE__ */ jsxs(Text, {
+				size: "xs",
+				c: "dimmed",
+				children: [
+					props.event.scopeName ?? "No scope",
+					" · ",
+					props.event.duration.toFixed(1),
+					" ms"
+				]
+			}),
+			/* @__PURE__ */ jsxs(Text, {
+				className: "virentia-inspector__payload",
+				children: ["payload: ", props.event.payload.preview]
+			}),
+			/* @__PURE__ */ jsxs(Text, {
+				className: "virentia-inspector__payload",
+				children: ["result: ", props.event.result.preview]
+			})
+		]
+	});
+}
+//#endregion
+//#region lib/client/modules/inspector/model.ts
+const recordingChanged = event("inspector.recordingChanged");
+const $recording = store(true, void 0, { name: "inspector.recording" });
+reaction({
+	on: recordingChanged,
+	name: "inspector.applyRecording",
+	run(value) {
+		$recording.value = value;
+	}
+});
+//#endregion
+//#region lib/client/modules/inspector/InspectorApp.tsx
+const nodeTypes = { unit: UnitFlowNode };
+const rightPanelLimits = {
+	default: 300,
+	min: 210,
+	max: 430
+};
+function VirentiaInspector(props) {
+	return /* @__PURE__ */ jsx(MantineProvider, {
+		defaultColorScheme: "dark",
+		forceColorScheme: "dark",
+		theme: { primaryColor: "green" },
+		children: /* @__PURE__ */ jsx(ScopeProvider, {
+			scope: useMemo(() => scope(), []),
+			children: /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(InspectorSurface, { channel: props.channel }) })
+		})
+	});
+}
+function InspectorSurface(props) {
+	const [snapshot, setSnapshot] = useState(emptySnapshot);
+	const [timeline, setTimeline] = useState([]);
+	const [selectedNodeId, setSelectedNodeId] = useState(null);
+	const [breakpointIds, setBreakpointIds] = useState([]);
+	const [showIsolatedUnits, setShowIsolatedUnits] = useState(false);
+	const [triggerNodeId, setTriggerNodeId] = useState(null);
+	const [triggerStage, setTriggerStage] = useState(null);
+	const [triggerModalOpened, setTriggerModalOpened] = useState(false);
+	const [payloadText, setPayloadText] = useState("");
+	const [draftBreakpointIds, setDraftBreakpointIds] = useState([]);
+	const [breakpointSelectionActive, setBreakpointSelectionActive] = useState(false);
+	const [triggerResult, setTriggerResult] = useState(null);
+	const [triggerError, setTriggerError] = useState(null);
+	const [contextMenu, setContextMenu] = useState(null);
+	const [rightPanelWidth, setRightPanelWidth] = useState(rightPanelLimits.default);
+	const recording = useUnit($recording);
+	const setRecording = useUnit(recordingChanged);
+	const clientRef = useRef(null);
+	const recordingRef = useRef(recording);
+	const breakpointPickerInitialIdsRef = useRef([]);
+	const breakpointPickerReturnStageRef = useRef("payload");
+	recordingRef.current = recording;
+	useEffect(() => {
+		const client = connectVirentiaInspector({ channel: props.channel });
+		clientRef.current = client;
+		const unsubscribe = client.subscribe((message) => {
+			if (message.type === "app") return;
+			if (message.type === "graph") {
+				setSnapshot(message.snapshot);
+				setBreakpointIds(message.snapshot.breakpoints);
+				return;
+			}
+			if (message.type === "timeline" && recordingRef.current) setTimeline((items) => [message.event, ...items].slice(0, 300));
+		});
+		client.requestGraph();
+		return () => {
+			unsubscribe();
+			client.dispose();
+			clientRef.current = null;
+		};
+	}, [props.channel]);
+	const visibleSnapshot = useMemo(() => showIsolatedUnits ? snapshot : hideIsolatedNodes(snapshot), [showIsolatedUnits, snapshot]);
+	const selectedFlow = useMemo(() => createReactiveSelection(visibleSnapshot, breakpointSelectionActive ? triggerNodeId : selectedNodeId), [
+		breakpointSelectionActive,
+		selectedNodeId,
+		triggerNodeId,
+		visibleSnapshot
+	]);
+	const breakpointEligibleNodeIds = useMemo(() => new Set(selectedFlow?.nodeIds ?? []), [selectedFlow]);
+	const flow = useFlowGraph(visibleSnapshot, selectedFlow, {
+		breakpointIds: useMemo(() => new Set(draftBreakpointIds), [draftBreakpointIds]),
+		breakpointSelectionActive,
+		eligibleNodeIds: breakpointEligibleNodeIds
+	});
+	const triggerNode = useMemo(() => snapshot.nodes.find((node) => node.id === triggerNodeId) ?? null, [snapshot.nodes, triggerNodeId]);
+	const selectedBreakpointNodes = useMemo(() => draftBreakpointIds.flatMap((id) => {
+		const node = snapshot.nodes.find((item) => item.id === id);
+		return node ? [node] : [];
+	}), [draftBreakpointIds, snapshot.nodes]);
+	const breakpointSummary = selectedBreakpointNodes.length ? /* @__PURE__ */ jsx(Group, {
+		gap: 4,
+		mt: 6,
+		children: selectedBreakpointNodes.map((node) => /* @__PURE__ */ jsx(Badge, {
+			color: "red",
+			size: "xs",
+			variant: "light",
+			children: node.name
+		}, node.id))
+	}) : /* @__PURE__ */ jsx(Text, {
+		size: "xs",
+		c: "dimmed",
+		mt: 6,
+		children: "None selected"
+	});
+	const shellStyle = useMemo(() => ({ "--virentia-right-panel-width": `${rightPanelWidth}px` }), [rightPanelWidth]);
+	useEffect(() => {
+		if (selectedNodeId && !visibleSnapshot.nodes.some((node) => node.id === selectedNodeId)) setSelectedNodeId(null);
+	}, [selectedNodeId, visibleSnapshot.nodes]);
+	const beginDrawerResize = useCallback((event) => {
+		event.preventDefault();
+		const startX = event.clientX;
+		const startWidth = rightPanelWidth;
+		const move = (moveEvent) => {
+			const nextWidth = startWidth - (moveEvent.clientX - startX);
+			setRightPanelWidth(Math.min(rightPanelLimits.max, Math.max(rightPanelLimits.min, nextWidth)));
+		};
+		const end = () => {
+			window.removeEventListener("pointermove", move);
+			window.removeEventListener("pointerup", end);
+		};
+		window.addEventListener("pointermove", move);
+		window.addEventListener("pointerup", end, { once: true });
+	}, [rightPanelWidth]);
+	const updateBreakpoints = (nodeIds) => {
+		setBreakpointIds(nodeIds);
+		clientRef.current?.setBreakpoints(nodeIds);
+	};
+	const openTriggerModal = (nodeId) => {
+		setContextMenu(null);
+		setTriggerNodeId(nodeId);
+		setPayloadText("");
+		setDraftBreakpointIds([]);
+		setTriggerResult(null);
+		setTriggerError(null);
+		setTriggerStage("payload");
+		setTriggerModalOpened(true);
+	};
+	const resetTriggerFlow = () => {
+		setTriggerNodeId(null);
+		setTriggerStage(null);
+		setTriggerModalOpened(false);
+		setPayloadText("");
+		setDraftBreakpointIds([]);
+		setBreakpointSelectionActive(false);
+		setTriggerResult(null);
+		setTriggerError(null);
+	};
+	const requestCloseTriggerFlow = () => {
+		setTriggerModalOpened(false);
+		setBreakpointSelectionActive(false);
+	};
+	const handleTriggerModalExited = () => {
+		if (!breakpointSelectionActive && !triggerModalOpened) resetTriggerFlow();
+	};
+	const parsePayload = () => {
+		try {
+			const payload = payloadText.trim() ? JSON.parse(payloadText) : void 0;
+			setTriggerError(null);
+			return {
+				ok: true,
+				payload
+			};
+		} catch (error) {
+			setTriggerError(error instanceof Error ? error.message : String(error));
+			return { ok: false };
+		}
+	};
+	const acceptPayload = () => {
+		if (!parsePayload().ok) return;
+		setTriggerStage("confirm");
+	};
+	const startBreakpointSelection = () => {
+		if (!triggerNodeId || !parsePayload().ok) return;
+		breakpointPickerInitialIdsRef.current = draftBreakpointIds;
+		breakpointPickerReturnStageRef.current = triggerStage ?? "payload";
+		setTriggerResult(null);
+		setTriggerModalOpened(false);
+		setBreakpointSelectionActive(true);
+		setSelectedNodeId(triggerNodeId);
+	};
+	const finishBreakpointSelection = (accepted) => {
+		if (!accepted) setDraftBreakpointIds(breakpointPickerInitialIdsRef.current);
+		setBreakpointSelectionActive(false);
+		setTriggerStage(breakpointPickerReturnStageRef.current);
+		setTriggerModalOpened(true);
+	};
+	const triggerSelectedNode = async () => {
+		if (!triggerNodeId) return;
+		const parsed = parsePayload();
+		if (!parsed.ok) return;
+		const previousBreakpoints = breakpointIds;
+		const scopeId = snapshot.scopes[0]?.id ?? null;
+		updateBreakpoints(draftBreakpointIds);
+		const result = await clientRef.current?.triggerUnit({
+			nodeId: triggerNodeId,
+			scopeId,
+			payload: parsed.payload
+		});
+		updateBreakpoints(previousBreakpoints);
+		setTriggerResult(result ?? { ok: false });
+		setTriggerStage("result");
+	};
+	const handleNodeClick = (_, node) => {
+		setContextMenu(null);
+		if (breakpointSelectionActive) {
+			if (!breakpointEligibleNodeIds.has(node.id)) return;
+			setDraftBreakpointIds((ids) => ids.includes(node.id) ? ids.filter((id) => id !== node.id) : [...ids, node.id]);
+			return;
+		}
+		setSelectedNodeId(node.id);
+	};
+	const handleNodeContextMenu = (event, node) => {
+		event.preventDefault();
+		if (breakpointSelectionActive) return;
+		setSelectedNodeId(node.id);
+		setContextMenu({
+			nodeId: node.id,
+			x: event.clientX,
+			y: event.clientY
+		});
+	};
+	return /* @__PURE__ */ jsxs(Box, {
+		className: "virentia-inspector",
+		children: [
+			/* @__PURE__ */ jsxs(Box, {
+				className: "virentia-inspector__shell",
+				style: shellStyle,
+				children: [/* @__PURE__ */ jsxs(Box, {
+					className: "virentia-inspector__main",
+					children: [/* @__PURE__ */ jsxs(Box, {
+						className: "virentia-inspector__topbar",
+						children: [
+							/* @__PURE__ */ jsx(Group, {
+								gap: "xs",
+								wrap: "nowrap",
+								children: /* @__PURE__ */ jsx(Title, {
+									order: 4,
+									children: "Virentia"
+								})
+							}),
+							/* @__PURE__ */ jsxs(Group, {
+								gap: "xs",
+								children: [
+									/* @__PURE__ */ jsx(Switch, {
+										checked: showIsolatedUnits,
+										color: "green",
+										label: "Show isolated",
+										onChange: (event) => setShowIsolatedUnits(event.currentTarget.checked),
+										size: "xs"
+									}),
+									/* @__PURE__ */ jsxs(Badge, {
+										color: visibleSnapshot.nodes.length ? "green" : "gray",
+										variant: "light",
+										children: [visibleSnapshot.nodes.length, " units"]
+									}),
+									/* @__PURE__ */ jsxs(Badge, {
+										variant: "light",
+										color: "gray",
+										children: [visibleSnapshot.edges.length, " links"]
+									}),
+									breakpointIds.length ? /* @__PURE__ */ jsxs(Badge, {
+										variant: "light",
+										color: "red",
+										children: [breakpointIds.length, " breakpoints"]
+									}) : null
+								]
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								color: "green",
+								size: "xs",
+								variant: "light",
+								onClick: () => clientRef.current?.requestGraph(),
+								children: "Refresh"
+							})
+						]
+					}), /* @__PURE__ */ jsx(Box, {
+						className: "virentia-inspector__flow",
+						children: /* @__PURE__ */ jsxs(ReactFlow, {
+							nodes: flow.nodes,
+							edges: flow.edges,
+							fitView: true,
+							nodeTypes,
+							minZoom: .15,
+							onNodeClick: handleNodeClick,
+							onNodeContextMenu: handleNodeContextMenu,
+							onPaneClick: () => {
+								setContextMenu(null);
+								if (!breakpointSelectionActive) setSelectedNodeId(null);
+							},
+							children: [/* @__PURE__ */ jsx(Background, {
+								gap: 18,
+								color: "#424242"
+							}), /* @__PURE__ */ jsx(Controls, {})]
+						})
+					})]
+				}), /* @__PURE__ */ jsxs(Stack, {
+					className: "virentia-inspector__drawer",
+					gap: "sm",
+					p: "sm",
+					children: [
+						/* @__PURE__ */ jsx("button", {
+							"aria-label": "Resize tools panel",
+							className: "virentia-inspector__resize-handle virentia-inspector__resize-handle--right",
+							onPointerDown: beginDrawerResize,
+							type: "button"
+						}),
+						/* @__PURE__ */ jsxs(Group, {
+							justify: "space-between",
+							children: [/* @__PURE__ */ jsx(Text, {
+								fw: 650,
+								size: "sm",
+								children: "Call history"
+							}), /* @__PURE__ */ jsxs(Group, {
+								gap: "xs",
+								children: [/* @__PURE__ */ jsx(Switch, {
+									checked: recording,
+									color: "green",
+									label: "Record",
+									onChange: (event) => setRecording(event.currentTarget.checked),
+									size: "xs"
+								}), /* @__PURE__ */ jsx(Button, {
+									color: "gray",
+									size: "xs",
+									variant: "subtle",
+									onClick: () => setTimeline([]),
+									children: "Clear"
+								})]
+							})]
+						}),
+						/* @__PURE__ */ jsx(ScrollArea, {
+							h: "calc(100vh - 66px)",
+							type: "auto",
+							children: timeline.map((item) => /* @__PURE__ */ jsx(TimelineRow, { event: item }, item.id))
+						})
+					]
+				})]
+			}),
+			contextMenu ? /* @__PURE__ */ jsx(Paper, {
+				className: "virentia-inspector__context-menu",
+				shadow: "md",
+				style: {
+					left: contextMenu.x,
+					top: contextMenu.y
+				},
+				withBorder: true,
+				children: /* @__PURE__ */ jsx("button", {
+					className: "virentia-inspector__context-menu-item",
+					onClick: () => openTriggerModal(contextMenu.nodeId),
+					type: "button",
+					children: "Trigger unit"
+				})
+			}) : null,
+			breakpointSelectionActive ? /* @__PURE__ */ jsxs(Box, {
+				className: "virentia-inspector__bottom-toolbar",
+				children: [/* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Text, {
+					fw: 650,
+					size: "sm",
+					children: "Select breakpoints"
+				}), /* @__PURE__ */ jsxs(Text, {
+					size: "xs",
+					c: "dimmed",
+					children: [
+						"Only units from the ",
+						triggerNode?.name ?? "",
+						" chain are available"
+					]
+				})] }), /* @__PURE__ */ jsxs(Group, {
+					gap: "xs",
+					children: [/* @__PURE__ */ jsx(Button, {
+						color: "gray",
+						size: "xs",
+						variant: "subtle",
+						onClick: () => finishBreakpointSelection(false),
+						children: "Cancel"
+					}), /* @__PURE__ */ jsx(Button, {
+						color: "green",
+						size: "xs",
+						onClick: () => finishBreakpointSelection(true),
+						children: "Apply"
+					})]
+				})]
+			}) : null,
+			/* @__PURE__ */ jsxs(Modal, {
+				centered: true,
+				classNames: {
+					body: "virentia-inspector__modal-body",
+					content: "virentia-inspector__modal-content",
+					header: "virentia-inspector__modal-header",
+					title: "virentia-inspector__modal-title"
+				},
+				opened: triggerModalOpened && triggerStage !== null,
+				onClose: requestCloseTriggerFlow,
+				onExitTransitionEnd: handleTriggerModalExited,
+				padding: "sm",
+				radius: "sm",
+				size: 420,
+				title: triggerNode ? `Trigger: ${triggerNode.name}` : "Trigger unit",
+				children: [
+					triggerStage === "payload" ? /* @__PURE__ */ jsxs(Stack, {
+						gap: "xs",
+						children: [
+							/* @__PURE__ */ jsx(Textarea, {
+								autosize: true,
+								minRows: 5,
+								label: "Payload JSON",
+								size: "xs",
+								value: payloadText,
+								onChange: (event) => setPayloadText(event.currentTarget.value)
+							}),
+							triggerError ? /* @__PURE__ */ jsx(Text, {
+								size: "xs",
+								c: "red",
+								children: triggerError
+							}) : null,
+							/* @__PURE__ */ jsxs(Paper, {
+								className: "virentia-inspector__modal-section",
+								withBorder: true,
+								children: [/* @__PURE__ */ jsxs(Group, {
+									align: "flex-start",
+									justify: "space-between",
+									gap: "xs",
+									wrap: "nowrap",
+									children: [/* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Text, {
+										fw: 650,
+										size: "xs",
+										children: "Breakpoints"
+									}), /* @__PURE__ */ jsx(Text, {
+										size: "xs",
+										c: "dimmed",
+										children: "The chain will stop after the selected units"
+									})] }), /* @__PURE__ */ jsx(Button, {
+										color: "green",
+										size: "xs",
+										variant: "light",
+										onClick: startBreakpointSelection,
+										children: "Select"
+									})]
+								}), breakpointSummary]
+							}),
+							/* @__PURE__ */ jsxs(Group, {
+								justify: "space-between",
+								mt: 4,
+								children: [/* @__PURE__ */ jsx(Button, {
+									color: "gray",
+									size: "xs",
+									variant: "subtle",
+									onClick: requestCloseTriggerFlow,
+									children: "Cancel"
+								}), /* @__PURE__ */ jsx(Button, {
+									color: "green",
+									size: "xs",
+									onClick: acceptPayload,
+									children: "Continue"
+								})]
+							})
+						]
+					}) : null,
+					triggerStage === "confirm" ? /* @__PURE__ */ jsxs(Stack, {
+						gap: "xs",
+						children: [
+							/* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Text, {
+								size: "xs",
+								c: "dimmed",
+								children: "Payload"
+							}), /* @__PURE__ */ jsx(Text, {
+								className: "virentia-inspector__payload",
+								children: payloadText.trim() || "undefined"
+							})] }),
+							/* @__PURE__ */ jsxs(Paper, {
+								className: "virentia-inspector__modal-section",
+								withBorder: true,
+								children: [/* @__PURE__ */ jsxs(Group, {
+									align: "flex-start",
+									justify: "space-between",
+									gap: "xs",
+									wrap: "nowrap",
+									children: [/* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Text, {
+										fw: 650,
+										size: "xs",
+										children: "Breakpoints"
+									}), /* @__PURE__ */ jsx(Text, {
+										size: "xs",
+										c: "dimmed",
+										children: "You can change them before triggering"
+									})] }), /* @__PURE__ */ jsx(Button, {
+										color: "green",
+										size: "xs",
+										variant: "light",
+										onClick: startBreakpointSelection,
+										children: "Select"
+									})]
+								}), breakpointSummary]
+							}),
+							triggerError ? /* @__PURE__ */ jsx(Text, {
+								size: "xs",
+								c: "red",
+								children: triggerError
+							}) : null,
+							/* @__PURE__ */ jsxs(Group, {
+								justify: "space-between",
+								mt: 4,
+								children: [/* @__PURE__ */ jsx(Button, {
+									color: "gray",
+									size: "xs",
+									variant: "subtle",
+									onClick: requestCloseTriggerFlow,
+									children: "Cancel"
+								}), /* @__PURE__ */ jsx(Button, {
+									color: "green",
+									size: "xs",
+									onClick: () => void triggerSelectedNode(),
+									children: "Trigger"
+								})]
+							})
+						]
+					}) : null,
+					triggerStage === "result" ? /* @__PURE__ */ jsxs(Stack, {
+						gap: "xs",
+						children: [/* @__PURE__ */ jsx(Badge, {
+							color: triggerResult?.ok ? "green" : "red",
+							size: "xs",
+							variant: "light",
+							children: triggerResult?.ok ? "Triggered successfully" : triggerResult?.error?.preview ?? "Error"
+						}), /* @__PURE__ */ jsx(Group, {
+							justify: "end",
+							children: /* @__PURE__ */ jsx(Button, {
+								color: "green",
+								size: "xs",
+								onClick: requestCloseTriggerFlow,
+								children: "Close"
+							})
+						})]
+					}) : null
+				]
+			})
+		]
+	});
+}
+function useFlowGraph(snapshot, selectedFlow, options) {
+	const selectedNodeIds = useMemo(() => new Set(selectedFlow?.nodeIds ?? []), [selectedFlow]);
+	const selectedEdgeIds = useMemo(() => new Set(selectedFlow?.edgeIds ?? []), [selectedFlow]);
+	return useMemo(() => {
+		const layout = new Map(createFlowLayout(snapshot).map((item) => [item.id, item]));
+		return {
+			nodes: snapshot.nodes.map((node) => {
+				const position = layout.get(node.id) ?? {
+					x: 0,
+					y: 0
+				};
+				const active = selectedNodeIds.has(node.id);
+				const eligible = options.eligibleNodeIds.has(node.id);
+				const breakpoint = options.breakpointIds.has(node.id);
+				return {
+					id: node.id,
+					className: [options.breakpointSelectionActive && !eligible ? "is-dimmed" : "", breakpoint ? "is-breakpoint" : ""].filter(Boolean).join(" "),
+					position: {
+						x: position.x,
+						y: position.y
+					},
+					type: "unit",
+					sourcePosition: Position.Right,
+					targetPosition: Position.Left,
+					selected: active,
+					data: { node }
+				};
+			}),
+			edges: snapshot.edges.map((edge) => {
+				const active = selectedEdgeIds.has(edge.id);
+				const owner = edge.kind === "owner";
+				const dimmed = options.breakpointSelectionActive && (!options.eligibleNodeIds.has(edge.source) || !options.eligibleNodeIds.has(edge.target));
+				return {
+					id: edge.id,
+					source: edge.source,
+					sourceHandle: "source",
+					target: edge.target,
+					targetHandle: "target",
+					animated: active,
+					type: "smoothstep",
+					style: {
+						opacity: dimmed ? .22 : 1,
+						stroke: active ? "var(--virentia-accent)" : owner ? "#424242" : "#696969",
+						strokeDasharray: owner ? "6 4" : void 0,
+						strokeWidth: active ? 3 : owner ? 1.1 : 1.4
+					}
+				};
+			})
+		};
+	}, [
+		options,
+		selectedEdgeIds,
+		selectedNodeIds,
+		snapshot
+	]);
+}
+function hideIsolatedNodes(snapshot) {
+	const connectedNodeIds = /* @__PURE__ */ new Set();
+	for (const edge of snapshot.edges) if (edge.kind === "reactive") {
+		connectedNodeIds.add(edge.source);
+		connectedNodeIds.add(edge.target);
+	}
+	for (const node of snapshot.nodes) if (node.parentId && connectedNodeIds.has(node.id)) connectedNodeIds.add(node.parentId);
+	return {
+		...snapshot,
+		breakpoints: snapshot.breakpoints.filter((id) => connectedNodeIds.has(id)),
+		edges: snapshot.edges.filter((edge) => connectedNodeIds.has(edge.source) && connectedNodeIds.has(edge.target)),
+		nodes: snapshot.nodes.filter((node) => connectedNodeIds.has(node.id))
+	};
+}
+//#endregion
+//#region lib/client/index.ts
+function mountVirentiaInspector(container, props = {}) {
+	const root = createRoot(container);
+	root.render(createElement(VirentiaInspector, props));
+	return root;
+}
+//#endregion
+export { VirentiaInspector, mountVirentiaInspector };