@ocelescope/resources 0.0.0 → 0.1.2

package/dist/index.js

@@ -1,441 +1,19 @@
-import { n as useCytoscapeContext } from "./CytoscapeContext-DrvVpY9-.js";
-import { ActionIcon, Box, Button, ButtonGroup, Group, LoadingOverlay, Modal, Paper, Stack, ThemeIcon, Title } from "@mantine/core";
-import dynamic from "next/dynamic";
-import { DownloadIcon, EyeOffIcon, Maximize, MaximizeIcon, MinusIcon, PlusIcon, Save, Settings, XIcon } from "lucide-react";
-import { Fragment, useEffect, useMemo, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { arrow, flip, offset, shift, useFloating } from "@floating-ui/react";
+import { ActionIcon, Alert, Badge, Box, Button, ButtonGroup, Code, Group, LoadingOverlay, Menu, Modal, Popover, ScrollArea, Select, Stack, Text, ThemeIcon, Title } from "@mantine/core";
+import { useResource, useResources } from "@ocelescope/api-base";
+import { DownloadIcon, EyeOffIcon, Maximize2Icon, MaximizeIcon, MinusIcon, PlusIcon, XIcon } from "lucide-react";
 import { Graphviz } from "@hpcc-js/wasm-graphviz";
-import { isNil, omitBy } from "lodash";
-import { DataTable } from "mantine-datatable";
-import dayjs from "dayjs";
-import isBetween from "dayjs/plugin/isBetween";
 import { saveAs } from "file-saver";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
-import { useResource } from "@ocelescope/api-base";
-
-//#region src/components/Cytoscape/index.tsx
-var Cytoscape_default = dynamic(() => import("./Cytoscape-BpEZfi09.js"), { ssr: false });
-
-//#endregion
-//#region src/components/Cytoscape/components/ActionButtons.tsx
-const ActionButtons = ({ toggleOptions, onSave }) => {
-	const context = useCytoscapeContext();
-	const downloadGraphAsPng = () => {
-		const cytoscape = context?.cy.current;
-		if (!cytoscape) return;
-		const pngData = cytoscape.png({
-			full: true,
-			scale: 2,
-			bg: "#ffffff"
-		});
-		const a = document.createElement("a");
-		a.href = pngData;
-		a.download = "graph.png";
-		a.dispatchEvent(new MouseEvent("click", {
-			bubbles: true,
-			cancelable: true,
-			view: window
-		}));
-	};
-	return /* @__PURE__ */ jsxs(ButtonGroup, {
-		style: { zIndex: 2 },
-		orientation: "vertical",
-		pos: "absolute",
-		bottom: 0,
-		left: 0,
-		children: [
-			/* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
-				disabled: !context,
-				px: "xs",
-				variant: "default",
-				onClick: context && (() => {
-					if (context.cy.current) context.cy.current.fit();
-				}),
-				children: /* @__PURE__ */ jsx(Maximize, { size: 18 })
-			}), /* @__PURE__ */ jsx(Button, {
-				disabled: !context,
-				onClick: downloadGraphAsPng,
-				px: "xs",
-				variant: "default",
-				children: /* @__PURE__ */ jsx(DownloadIcon, { size: 18 })
-			})] }),
-			toggleOptions && /* @__PURE__ */ jsx(Button, {
-				onClick: toggleOptions,
-				px: "xs",
-				variant: "default",
-				children: /* @__PURE__ */ jsx(Settings, { size: 18 })
-			}),
-			onSave && /* @__PURE__ */ jsx(Button, {
-				onClick: onSave,
-				px: "xs",
-				variant: "default",
-				children: /* @__PURE__ */ jsx(Save, { size: 18 })
-			})
-		]
-	});
-};
-var ActionButtons_default = ActionButtons;
-
-//#endregion
-//#region src/components/Cytoscape/hooks/useEntityClick.ts
-const triggerActionToStartEvent = {
-	hover: "tapdragover",
-	rightClick: "cxttap",
-	leftClick: "tap",
-	doubleClick: "dbltap"
-};
-const useEntityClick = ({ trigger }) => {
-	const context = useCytoscapeContext();
-	const [entity, setEntity] = useState();
-	const containerRef = useRef(null);
-	useEffect(() => {
-		const cytoscape = context?.cy.current;
-		const container = cytoscape?.container();
-		if (!cytoscape || !container) return;
-		containerRef.current = container;
-		const handleEntitySelect = (event) => {
-			const target = event.target;
-			if (target.isNode()) setEntity({
-				type: "node",
-				id: target.id(),
-				boundingBox: target.renderedBoundingBox()
-			});
-			else if (target.isEdge()) {
-				const midpoint = target.renderedMidpoint();
-				setEntity({
-					type: "edge",
-					id: target.id(),
-					midpoint: {
-						x: midpoint.x,
-						y: midpoint.y
-					}
-				});
-			}
-		};
-		const handleClickOutside = (e) => {
-			if (e.target === context?.cy.current) setEntity(void 0);
-		};
-		const handleViewChange = () => {
-			setEntity((prev) => {
-				if (!prev) return prev;
-				const ele = context?.cy.current?.getElementById(prev.id);
-				if (!ele || ele.empty()) return prev;
-				if (prev.type === "node") return {
-					...prev,
-					boundingBox: ele.renderedBoundingBox()
-				};
-				const midpoint = ele.renderedMidpoint();
-				return {
-					...prev,
-					midpoint
-				};
-			});
-		};
-		cytoscape.on(triggerActionToStartEvent[trigger], "node, edge", handleEntitySelect);
-		cytoscape.on("pan zoom position", handleViewChange);
-		cytoscape.on("tap", handleClickOutside);
-		return () => {
-			cytoscape.removeListener(triggerActionToStartEvent[trigger], "node, edge", handleEntitySelect);
-			cytoscape.removeListener("pan zoom position", handleViewChange);
-			cytoscape.removeListener("tap", handleClickOutside);
-		};
-	}, [context, trigger]);
-	return {
-		entity,
-		container: containerRef,
-		resetEntity: () => setEntity(void 0)
-	};
-};
-var useEntityClick_default = useEntityClick;
-
-//#endregion
-//#region src/components/Cytoscape/components/FloatingAnnotation.tsx
-const FloatingAnnotation = ({ trigger = "leftClick", children }) => {
-	const { entity, container } = useEntityClick_default({ trigger });
-	const arrowRef = useRef(null);
-	const virtualRef = useMemo(() => {
-		const containerRect = container.current?.getBoundingClientRect();
-		if (!entity || !containerRect) return;
-		if (entity.type === "node") {
-			const b = entity.boundingBox;
-			const width = b.x2 - b.x1;
-			const height = b.y2 - b.y1;
-			const top = containerRect.top + b.y1;
-			const left = containerRect.left + b.x1;
-			return { getBoundingClientRect: () => ({
-				x: left,
-				y: top,
-				width,
-				height,
-				top,
-				left,
-				right: left + width,
-				bottom: top + height
-			}) };
-		}
-		const m = entity.midpoint;
-		const x$1 = containerRect.left + m.x;
-		const y$1 = containerRect.top + m.y;
-		return { getBoundingClientRect: () => ({
-			x: x$1,
-			y: y$1,
-			width: 0,
-			height: 0,
-			top: y$1,
-			left: x$1,
-			right: x$1,
-			bottom: y$1
-		}) };
-	}, [entity, container]);
-	const { x, y, refs, strategy } = useFloating({
-		placement: "right",
-		strategy: "fixed",
-		middleware: [
-			flip(),
-			offset(10),
-			shift({ padding: 8 }),
-			arrow({ element: arrowRef })
-		]
-	});
-	useEffect(() => {
-		refs.setReference(virtualRef);
-	}, [virtualRef, refs]);
-	const child = useMemo(() => entity ? children(entity) : void 0, [entity, children]);
-	if (!entity || !virtualRef || child == null) return null;
-	return /* @__PURE__ */ jsx(Paper, {
-		ref: refs.setFloating,
-		shadow: "md",
-		radius: "md",
-		p: "md",
-		withBorder: true,
-		style: {
-			position: strategy,
-			top: y ?? 0,
-			left: x ?? 0,
-			width: "min(90vw, 400px)",
-			height: "min(80vh, 300px)",
-			overflow: "auto",
-			zIndex: 9999
-		},
-		children: child
-	});
-};
-var FloatingAnnotation_default = FloatingAnnotation;
-
-//#endregion
-//#region src/hooks/useGraphvizLayout.ts
-const esc = (val) => {
-	return val.replaceAll("\"", "\\\"");
-};
-const safeId = (id) => id.replace(/[^a-zA-Z0-9_]/g, "_");
-const attrsToDot = (obj) => {
-	if (!obj) return "";
-	return Object.entries(obj).filter(([_, v]) => v !== null && v !== void 0).map(([k, v]) => typeof v === "string" ? `${k}="${esc(v)}"` : `${k}=${String(v)}`).join(",");
-};
-const toDot = (visualization) => {
-	const gAttrs = attrsToDot(visualization.layout_config?.graphAttrs ?? void 0);
-	const nAttrs = attrsToDot(visualization.layout_config?.nodeAttrs ?? void 0);
-	const eAttrs = attrsToDot(visualization.layout_config?.edgeAttrs ?? void 0);
-	const lines = [
-		"digraph G {",
-		`graph [${gAttrs}];`,
-		`node [${nAttrs}];`,
-		`edge [${eAttrs}];`
-	];
-	for (const node of visualization.nodes ?? []) {
-		const id = safeId(node?.id ?? "");
-		const attrs = {
-			...node.layout_attrs,
-			label: node.label ? esc(node.label) : void 0,
-			shape: node.shape,
-			color: node.color,
-			...node.width && { width: (node.width / 72).toFixed(4) },
-			...node.height && { height: (node.height / 72).toFixed(4) }
-		};
-		lines.push(`"${id}" [${attrsToDot(attrs)}];`);
-	}
-	for (const edge of visualization.edges ?? []) {
-		const attrs = {
-			...edge.layout_attrs,
-			label: edge.label ? esc(edge.label) : void 0,
-			color: edge.color
-		};
-		lines.push(`"${esc(safeId(edge.source))}" -> "${esc(safeId(edge.target))}" [${attrsToDot(attrs)}];`);
-	}
-	const ranks = (visualization.nodes ?? []).filter(({ rank }) => rank != null).reduce((acc, current) => {
-		const key = current.rank;
-		acc[key] ??= [];
-		acc[key].push(esc(safeId(current?.id ?? "")));
-		return acc;
-	}, {});
-	lines.push(...Object.entries(ranks).map(([key, value]) => `{ rank=${["source", "sink"].includes(key) ? key : "same"}; ${(value ?? []).join(" ")} } `));
-	lines.push("}");
-	return lines.join("\n");
-};
-const parsePos = (s) => {
-	if (s) {
-		const [xs, ys] = s.split(",");
-		const x = Number.parseFloat(xs ?? "0");
-		const y = Number.parseFloat(ys ?? "0");
-		if (Number.isFinite(x) && Number.isFinite(y)) return {
-			x,
-			y
-		};
-	}
-	return {
-		x: 0,
-		y: 0
-	};
-};
-const useGraphvizLayout = (visualization) => {
-	const [elements, setElements] = useState(null);
-	const [error, setError] = useState(null);
-	const cancelRef = useRef({ cancelled: false });
-	const dot = useMemo(() => toDot(visualization), [visualization]);
-	useEffect(() => {
-		cancelRef.current.cancelled = false;
-		setError(null);
-		(async () => {
-			try {
-				const jsonStr = (await Graphviz.load()).layout(dot, "json", visualization.layout_config?.engine ?? "dot");
-				const gvJson = JSON.parse(jsonStr);
-				const nodePos = {};
-				for (const o of gvJson.objects ?? []) {
-					if (!o.name || !o.pos) return;
-					const p = parsePos(o.pos);
-					if (!p) return;
-					nodePos[o.name] = {
-						...p,
-						width: o.width ? Number.parseFloat(o.width) * 72 : 0
-					};
-				}
-				const nodes = (visualization.nodes ?? []).map((node) => ({
-					data: {
-						...omitBy(node, isNil),
-						label: node.label ?? "",
-						shape: node.shape !== "circle" ? node.shape : "ellipse",
-						width: node.width ?? nodePos[safeId(node.id ?? "")]?.width,
-						height: node.height ?? 30
-					},
-					position: nodePos[safeId(node.id ?? "")] ?? {
-						x: 0,
-						y: 0
-					}
-				}));
-				const edges = (visualization.edges ?? []).map((edge) => ({ data: omitBy(edge, isNil) }));
-				if (!cancelRef.current.cancelled) setElements([...nodes, ...edges]);
-			} catch (e) {
-				if (!cancelRef.current.cancelled) {
-					setError(e?.message ?? "Graphviz layout failed.");
-					setElements(null);
-				}
-			}
-		})();
-		return () => {
-			cancelRef.current.cancelled = true;
-		};
-	}, [dot, visualization]);
-	return {
-		elements,
-		error
-	};
-};
-
-//#endregion
-//#region src/components/ResourceView/Viewers/Graph.tsx
-const GraphViewer = ({ visualization, isPreview }) => {
-	const { elements } = useGraphvizLayout(visualization);
-	return /* @__PURE__ */ jsx(Box, {
-		h: "100%",
-		w: "100%",
-		pos: "relative",
-		style: { overflow: "hidden" },
-		children: elements && /* @__PURE__ */ jsx(Cytoscape_default, {
-			userZoomingEnabled: !isPreview,
-			userPanningEnabled: !isPreview,
-			style: {
-				width: "100%",
-				height: "100%"
-			},
-			elements,
-			layout: { name: "preset" },
-			children: !isPreview && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ActionButtons_default, {}), /* @__PURE__ */ jsx(FloatingAnnotation_default, { children: (entity) => {
-				const visualizationEntity = visualization[entity.type === "edge" ? "edges" : "nodes"]?.find(({ id }) => id === entity.id);
-				if (!visualizationEntity?.annotation) return;
-				return /* @__PURE__ */ jsx(Visualization, {
-					visualization: visualizationEntity.annotation,
-					isPreview: true
-				});
-			} })] })
-		})
-	});
-};
-var Graph_default = GraphViewer;
-
-//#endregion
-//#region src/util/dayjs.ts
-dayjs.extend(isBetween);
-var dayjs_default = dayjs;
-const formatDateTime = (dateString) => dayjs(dateString).format("YYYY-MM-DD HH:mm");
-const formatDate = (dateString) => dayjs(dateString).format("YYYY-MM-DD");
-
-//#endregion
-//#region src/components/ResourceView/Viewers/Table.tsx
-const formatCell = (value, dataType) => {
-	if (value == null) return "";
-	switch (dataType) {
-		case "boolean": return value ? "✅" : "❌";
-		case "date": return dayjs_default(value).isValid() ? formatDate(value) : String(value);
-		case "datetime": return dayjs_default(value).isValid() ? formatDateTime(value) : String(value);
-		default: return String(value);
-	}
-};
-const PAGE_SIZES = [
-	20,
-	50,
-	75
-];
-const TableView = ({ visualization }) => {
-	const [pageSize, setPageSize] = useState(PAGE_SIZES[0]);
-	const columns = useMemo(() => visualization.columns.map((col) => ({
-		accessor: col.id,
-		title: col.label ?? col.id,
-		render: (record) => formatCell(record[col.id], col.data_type)
-	})), [visualization.columns]);
-	const [page, setPage] = useState(1);
-	const [records, setRecords] = useState(visualization.rows.slice(0, pageSize));
-	useEffect(() => {
-		const from = (page - 1) * pageSize;
-		const to = from + pageSize;
-		setRecords(visualization.rows.slice(from, to));
-	}, [
-		page,
-		pageSize,
-		visualization
-	]);
-	return /* @__PURE__ */ jsx(DataTable, {
-		records,
-		columns,
-		withTableBorder: true,
-		withColumnBorders: true,
-		withRowBorders: true,
-		...visualization.rows.length > PAGE_SIZES[0] ? {
-			totalRecords: visualization.rows.length,
-			recordsPerPage: pageSize,
-			onPageChange: (p) => setPage(p),
-			page,
-			recordsPerPageOptions: [...PAGE_SIZES],
-			onRecordsPerPageChange: (newPageSize) => {
-				setPageSize(newPageSize);
-				setPage(1);
-			}
-		} : {}
-	});
-};
-var Table_default = TableView;
-
-//#endregion
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Background, BaseEdge, ControlButton, Controls, EdgeLabelRenderer, Handle, Position, ReactFlow, ReactFlowProvider, applyNodeChanges, getBezierPath, getSmoothStepPath, useInternalNode, useNodes, useNodesInitialized, useReactFlow } from "@xyflow/react";
+import ELK from "elkjs/lib/elk.bundled.js";
+import { toPng, toSvg } from "html-to-image";
+import { jsPDF } from "jspdf";
+import dynamic from "next/dynamic.js";
+import { DataTable } from "mantine-datatable";
+import dayjs from "dayjs";
+import isBetween from "dayjs/plugin/isBetween.js";
 //#region src/components/ResourceView/Viewers/SVG.tsx
 const SvgPanWrapper = ({ children, onDownload }) => {
 	return /* @__PURE__ */ jsx(Box, {
@@ -447,7 +25,7 @@ const SvgPanWrapper = ({ children, onDownload }) => {
 			minScale: .1,
 			maxScale: 10,
 			centerOnInit: true,
-			children: ({ zoomIn, zoomOut, resetTransform }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TransformComponent, {
+			children: ({ zoomIn, zoomOut, resetTransform }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TransformComponent, {
 				wrapperStyle: {
 					width: "100%",
 					height: "100%"
@@ -464,24 +42,18 @@ const SvgPanWrapper = ({ children, onDownload }) => {
 				children: [
 					/* @__PURE__ */ jsx(Button, {
 						px: "xs",
-						children: /* @__PURE__ */ jsx(MaximizeIcon, {
-							width: 18,
-							onClick: () => resetTransform(0)
-						})
+						onClick: () => resetTransform(0),
+						children: /* @__PURE__ */ jsx(MaximizeIcon, { width: 18 })
 					}),
 					/* @__PURE__ */ jsx(Button, {
 						px: "xs",
-						children: /* @__PURE__ */ jsx(PlusIcon, {
-							width: 18,
-							onClick: () => zoomIn()
-						})
+						onClick: () => zoomIn(),
+						children: /* @__PURE__ */ jsx(PlusIcon, { width: 18 })
 					}),
 					/* @__PURE__ */ jsx(Button, {
 						px: "xs",
-						children: /* @__PURE__ */ jsx(MinusIcon, {
-							width: 18,
-							onClick: () => zoomOut()
-						})
+						onClick: () => zoomOut(),
+						children: /* @__PURE__ */ jsx(MinusIcon, { width: 18 })
 					}),
 					/* @__PURE__ */ jsx(Button, {
 						px: "xs",
@@ -495,24 +67,23 @@ const SvgPanWrapper = ({ children, onDownload }) => {
 };
 const SvgViewer = ({ visualization, isPreview }) => {
 	const cleanedSvg = visualization.svg.replace(/width="[^"]+"/, "width=\"100%\"").replace(/height="[^"]+"/, "height=\"100%\"").replace(/<svg(?![^>]*xmlns=)/, "<svg xmlns=\"http://www.w3.org/2000/svg\"");
-	const Wrapper = isPreview ? Fragment : SvgPanWrapper;
 	const handleDownload = () => {
 		if (!cleanedSvg) return;
 		saveAs(new Blob([cleanedSvg], { type: "image/svg+xml;charset=utf-8" }), "resource.svg");
 	};
-	return /* @__PURE__ */ jsx(Wrapper, {
+	const content = /* @__PURE__ */ jsx("div", {
+		style: {
+			width: "100%",
+			height: "100%"
+		},
+		dangerouslySetInnerHTML: { __html: cleanedSvg }
+	});
+	if (isPreview) return content;
+	return /* @__PURE__ */ jsx(SvgPanWrapper, {
 		onDownload: handleDownload,
-		children: /* @__PURE__ */ jsx("div", {
-			style: {
-				width: "100%",
-				height: "100%"
-			},
-			dangerouslySetInnerHTML: { __html: cleanedSvg }
-		})
+		children: content
 	});
 };
-var SVG_default = SvgViewer;
-
 //#endregion
 //#region src/components/ResourceView/Viewers/Dot.tsx
 const DotToSvgViewer = ({ isPreview, visualization }) => {
@@ -545,45 +116,1610 @@ const DotToSvgViewer = ({ isPreview, visualization }) => {
 		if (!cleanedSvg) return;
 		saveAs(new Blob([cleanedSvg], { type: "image/svg+xml;charset=utf-8" }), "resource.svg");
 	};
-	return /* @__PURE__ */ jsx(isPreview ? Fragment : SvgPanWrapper, {
+	const content = /* @__PURE__ */ jsxs("div", {
+		style: {
+			width: "100%",
+			height: "100%",
+			position: "relative"
+		},
+		children: [error && /* @__PURE__ */ jsxs("div", {
+			style: {
+				position: "absolute",
+				top: 8,
+				left: 8,
+				color: "red",
+				zIndex: 10
+			},
+			children: ["Graphviz error: ", error]
+		}), cleanedSvg ? /* @__PURE__ */ jsx("div", {
+			style: {
+				width: "100%",
+				height: "100%"
+			},
+			dangerouslySetInnerHTML: { __html: cleanedSvg }
+		}) : !error && /* @__PURE__ */ jsx("div", {
+			style: {
+				width: "100%",
+				height: "100%",
+				display: "grid",
+				placeItems: "center",
+				opacity: .6,
+				fontSize: 14
+			},
+			children: "Rendering…"
+		})]
+	});
+	if (isPreview) return content;
+	return /* @__PURE__ */ jsx(SvgPanWrapper, {
 		onDownload: handleDownload,
-		children: /* @__PURE__ */ jsxs("div", {
+		children: content
+	});
+};
+//#endregion
+//#region src/components/ResourceView/Viewers/GraphFlow/model/types.ts
+var GraphVisualizationError = class extends Error {
+	details;
+	constructor(message, details) {
+		super(message);
+		this.name = "GraphVisualizationError";
+		this.details = details;
+	}
+};
+const DEFAULT_COLORS = {
+	edge: "#555555",
+	place: "#aec6e8",
+	transition: "#ffffff",
+	transitionBorder: "#333",
+	text: "#1a1a1a"
+};
+const FIT_VIEW_PADDING = .15;
+//#endregion
+//#region src/components/ResourceView/Viewers/GraphFlow/model/buildModel.ts
+const EDGE_ROUTINGS = /* @__PURE__ */ new Set([
+	"SPLINES",
+	"ORTHOGONAL",
+	"POLYLINE"
+]);
+const EDGE_ROUTING_KEYS = ["elk.edgeRouting", "org.eclipse.elk.edgeRouting"];
+const normalizeEdgeRouting = (value) => {
+	if (typeof value !== "string") throw new GraphVisualizationError("Invalid ELK edge routing.", [`Expected one of ${Array.from(EDGE_ROUTINGS).join(", ")}, got ${String(value)}.`]);
+	const normalized = value.toUpperCase();
+	if (!EDGE_ROUTINGS.has(normalized)) throw new GraphVisualizationError("Invalid ELK edge routing.", [`Unknown edge routing "${value}". Supported values are ${Array.from(EDGE_ROUTINGS).join(", ")}.`]);
+	return normalized;
+};
+const normalizeElkOptions = (elkOptions) => {
+	const edgeRouting = EDGE_ROUTING_KEYS.flatMap((key) => key in elkOptions ? [normalizeEdgeRouting(elkOptions[key])] : [])[0] ?? "POLYLINE";
+	const normalizedOptions = { ...elkOptions };
+	for (const key of EDGE_ROUTING_KEYS) if (key in normalizedOptions) normalizedOptions[key] = edgeRouting;
+	return {
+		edgeRouting,
+		elkOptions: normalizedOptions
+	};
+};
+const mapNode = (node) => ({
+	id: node.id,
+	type: "node",
+	position: {
+		x: node.x ?? 0,
+		y: node.y ?? 0
+	},
+	data: node
+});
+const mapEdge = (edge) => ({
+	id: edge.id,
+	source: edge.source,
+	target: edge.target,
+	type: "graphflow",
+	data: edge
+});
+const createLayoutPlan = (visualization) => {
+	const layoutConfig = visualization.layout_config;
+	switch (layoutConfig?.type) {
+		case "graphviz":
+			if (!layoutConfig.engine) throw new GraphVisualizationError("Invalid Graphviz layout config.", ["Missing Graphviz layout engine."]);
+			return {
+				type: "graphviz",
+				engine: layoutConfig.engine,
+				graphAttrs: layoutConfig.graphAttrs ?? {},
+				nodeAttrs: layoutConfig.nodeAttrs ?? {},
+				edgeAttrs: layoutConfig.edgeAttrs ?? {}
+			};
+		case "elk": {
+			const normalized = normalizeElkOptions(layoutConfig.options ?? {});
+			return {
+				type: "elk",
+				elkOptions: normalized.elkOptions,
+				edgeRouting: normalized.edgeRouting
+			};
+		}
+		default: throw new GraphVisualizationError("Invalid graph layout config.", ["Expected an ELK or Graphviz layout config from the backend."]);
+	}
+};
+const buildGraphFlowModel = (visualization) => ({
+	nodes: (visualization.nodes ?? []).map(mapNode),
+	edges: (visualization.edges ?? []).map(mapEdge),
+	layoutPlan: createLayoutPlan(visualization)
+});
+//#endregion
+//#region src/components/ResourceView/Viewers/GraphFlow/model/runLayout.ts
+const toGraphError = (error) => {
+	if (error instanceof GraphVisualizationError) return error;
+	return new GraphVisualizationError("Graph layout failed.", [error instanceof Error ? error.message : String(error)]);
+};
+const measuredNodesMatchModel = (measuredNodes, model) => {
+	if (measuredNodes.length !== model.nodes.length) return false;
+	const measuredNodeIds = new Set(measuredNodes.map((node) => node.id));
+	return model.nodes.every((node) => measuredNodeIds.has(node.id));
+};
+const applyNodePositions = (nodes, positions) => nodes.map((node) => {
+	const position = positions[node.id];
+	return position ? {
+		...node,
+		position
+	} : node;
+});
+const applyEdgeLayouts = (edges, edgeLayouts) => edges.map((edge) => {
+	const layout = edgeLayouts[edge.id];
+	if (!layout) return edge;
+	return {
+		...edge,
+		data: {
+			...edge.data,
+			path: layout.path,
+			labelPosition: layout.labelPosition,
+			startPoint: layout.startPoint,
+			endPoint: layout.endPoint
+		}
+	};
+});
+//#endregion
+//#region src/components/ResourceView/Viewers/GraphFlow/hooks/useElkLayout.ts
+const buildPolylinePath$1 = (points) => {
+	if (points.length < 2) return null;
+	return points.map((point, index) => `${index === 0 ? "M" : "L"} ${point.x},${point.y}`).join(" ");
+};
+const buildSplinePath$1 = (section) => {
+	const start = section.startPoint;
+	const end = section.endPoint;
+	if (!start || !end) return null;
+	const bendPoints = section.bendPoints ?? [];
+	if (bendPoints.length === 0) return `M ${start.x},${start.y} L ${end.x},${end.y}`;
+	let path = `M ${start.x},${start.y}`;
+	for (let index = 0; index < bendPoints.length; index += 3) {
+		const cp1 = bendPoints[index];
+		const cp2 = bendPoints[index + 1];
+		if (!cp1 || !cp2) return null;
+		const anchor = bendPoints[index + 2] ?? end;
+		path += ` C ${cp1.x},${cp1.y} ${cp2.x},${cp2.y} ${anchor.x},${anchor.y}`;
+	}
+	return path;
+};
+const buildEdgePath = (section, routing) => {
+	if (routing === "SPLINES") return buildSplinePath$1(section);
+	const start = section.startPoint;
+	const end = section.endPoint;
+	if (!start || !end) return null;
+	return buildPolylinePath$1([
+		start,
+		...section.bendPoints ?? [],
+		end
+	]);
+};
+const sectionMidpoint = (section) => {
+	if (!section.startPoint || !section.endPoint) return null;
+	const points = [
+		section.startPoint,
+		...section.bendPoints ?? [],
+		section.endPoint
+	];
+	const mid = points[Math.floor(points.length / 2)];
+	return mid ? {
+		x: mid.x,
+		y: mid.y
+	} : null;
+};
+const getEdgeLabelPosition = (label, section) => {
+	if (label?.x != null && label?.y != null) return {
+		x: label.x + (label.width ?? 0) / 2,
+		y: label.y + (label.height ?? 0) / 2
+	};
+	return sectionMidpoint(section);
+};
+const elk = new ELK();
+const getEdgeRouting = (edge, fallback) => {
+	const options = edge.layoutOptions ?? {};
+	const edgeRouting = options["elk.edgeRouting"] ?? options["org.eclipse.elk.edgeRouting"];
+	return edgeRouting === void 0 ? fallback : normalizeEdgeRouting(edgeRouting);
+};
+const toPositionMap = (children = []) => children.reduce((acc, child) => {
+	if (child.id && child.x != null && child.y != null) acc[child.id] = {
+		x: child.x,
+		y: child.y
+	};
+	return acc;
+}, {});
+const toEdgeLayoutMap = (edges = [], graphRouting) => edges.reduce((acc, edge) => {
+	const section = edge.sections?.[0];
+	if (!edge.id || !section) return acc;
+	const path = buildEdgePath(section, getEdgeRouting(edge, graphRouting));
+	if (!path) return acc;
+	acc[edge.id] = {
+		path,
+		labelPosition: getEdgeLabelPosition(edge.labels?.[0], section),
+		startPoint: section.startPoint ? {
+			x: section.startPoint.x,
+			y: section.startPoint.y
+		} : null,
+		endPoint: section.endPoint ? {
+			x: section.endPoint.x,
+			y: section.endPoint.y
+		} : null
+	};
+	return acc;
+}, {});
+const compareById = (left, right) => left.id.localeCompare(right.id);
+const compareEdgesForLayout = (left, right) => left.source.localeCompare(right.source) || left.target.localeCompare(right.target) || left.id.localeCompare(right.id);
+const runElk = async ({ nodes, edges, layoutPlan }) => {
+	const mergedLayoutOptions = nodes.some((node) => typeof node.data.rank === "number") ? {
+		"elk.partitioning.activate": true,
+		...layoutPlan.elkOptions
+	} : layoutPlan.elkOptions;
+	const layoutNodes = [...nodes].sort(compareById);
+	const layoutEdges = [...edges].sort(compareEdgesForLayout);
+	const graph = await elk.layout({
+		id: "root",
+		layoutOptions: mergedLayoutOptions,
+		children: layoutNodes.map((node) => {
+			const nodeData = node.data;
+			const rank = nodeData.rank ?? null;
+			const layoutOptions = { ...nodeData.layout_attrs ?? {} };
+			if (rank === "source") layoutOptions["elk.layered.layering.layerConstraint"] = "FIRST";
+			else if (rank === "sink") layoutOptions["elk.layered.layering.layerConstraint"] = "LAST";
+			else if (typeof rank === "number") layoutOptions["elk.partitioning.partition"] = String(rank);
+			return {
+				id: node.id,
+				width: nodeData.width,
+				height: nodeData.height,
+				layoutOptions
+			};
+		}),
+		edges: layoutEdges.map((edge) => {
+			const edgeData = edge.data;
+			const edgeLabel = edgeData?.label;
+			return {
+				id: edge.id,
+				sources: [edge.source],
+				targets: [edge.target],
+				layoutOptions: edgeData?.layout_attrs ?? {},
+				...edgeLabel ? { labels: [{
+					text: String(edgeLabel),
+					width: String(edgeLabel).length * 7 + 12,
+					height: 18
+				}] } : {}
+			};
+		})
+	});
+	return {
+		positions: toPositionMap(graph.children),
+		edgeLayouts: toEdgeLayoutMap(graph.edges, layoutPlan.edgeRouting)
+	};
+};
+const useElkLayout = () => {
+	const measuredNodes = useNodes();
+	const nodesInitialized = useNodesInitialized();
+	return useCallback(async (model) => {
+		if (!nodesInitialized || !measuredNodesMatchModel(measuredNodes, model)) return null;
+		const layout = await runElk({
+			nodes: measuredNodes,
+			edges: model.edges,
+			layoutPlan: model.layoutPlan
+		});
+		return {
+			nodes: applyNodePositions(measuredNodes, layout.positions),
+			edges: applyEdgeLayouts(model.edges, layout.edgeLayouts)
+		};
+	}, [nodesInitialized, measuredNodes]);
+};
+//#endregion
+//#region src/components/ResourceView/Viewers/GraphFlow/hooks/useGraphvizLayout.ts
+const GRAPHVIZ_DPI = 72;
+const quoteDotValue = (value) => `"${value.replaceAll("\"", "\\\"")}"`;
+const attrsToDot = (attrs) => {
+	if (!attrs) return "";
+	return Object.entries(attrs).filter(([, value]) => value != null).map(([key, value]) => typeof value === "string" ? `${key}=${quoteDotValue(value)}` : `${key}=${String(value)}`).join(",");
+};
+const parsePoint = (value) => {
+	if (!value) return null;
+	const [xRaw, yRaw] = value.split(",");
+	const x = Number.parseFloat(xRaw ?? "");
+	const y = Number.parseFloat(yRaw ?? "");
+	return Number.isFinite(x) && Number.isFinite(y) ? {
+		x,
+		y
+	} : null;
+};
+const parseBoundingBoxHeight = (bb) => {
+	const height = (bb?.split(",").map((value) => Number.parseFloat(value)))?.[3];
+	return Number.isFinite(height) ? height : 0;
+};
+const parseGraphvizDimension = (value) => {
+	if (value == null) return null;
+	const dimension = Number.parseFloat(String(value)) * GRAPHVIZ_DPI;
+	return Number.isFinite(dimension) ? dimension : null;
+};
+const parseGraphvizEdgePosition = (pos) => {
+	const result = {
+		points: [],
+		startArrowPoint: null,
+		endArrowPoint: null
+	};
+	if (!pos) return result;
+	const pointMatches = pos.matchAll(/(?:^|\s)(?:(s|e),)?(-?\d+(?:\.\d+)?),(-?\d+(?:\.\d+)?)/g);
+	for (const match of pointMatches) {
+		const point = {
+			x: Number.parseFloat(match[2] ?? "0"),
+			y: Number.parseFloat(match[3] ?? "0")
+		};
+		if (!Number.isFinite(point.x) || !Number.isFinite(point.y)) continue;
+		if (match[1] === "s") result.startArrowPoint = point;
+		else if (match[1] === "e") result.endArrowPoint = point;
+		else result.points.push(point);
+	}
+	return result;
+};
+const flipY = (point, graphHeight) => ({
+	x: point.x,
+	y: graphHeight - point.y
+});
+const buildPolylinePath = (points) => {
+	if (points.length < 2) return null;
+	return points.map((point, index) => `${index === 0 ? "M" : "L"} ${point.x},${point.y}`).join(" ");
+};
+const buildSplinePath = (points) => {
+	if (points.length < 4 || (points.length - 1) % 3 !== 0) return null;
+	let path = `M ${points[0]?.x},${points[0]?.y}`;
+	for (let index = 1; index < points.length; index += 3) {
+		const cp1 = points[index];
+		const cp2 = points[index + 1];
+		const end = points[index + 2];
+		if (!cp1 || !cp2 || !end) return null;
+		path += ` C ${cp1.x},${cp1.y} ${cp2.x},${cp2.y} ${end.x},${end.y}`;
+	}
+	return path;
+};
+const buildGraphvizEdgePath = ({ points, startArrowPoint, endArrowPoint }) => {
+	const splinePath = buildSplinePath(points);
+	if (splinePath) return [
+		startArrowPoint && points[0] ? `M ${startArrowPoint.x},${startArrowPoint.y} L ${points[0].x},${points[0].y}` : null,
+		startArrowPoint ? splinePath.replace(/^M [^C]+/, "") : splinePath,
+		endArrowPoint ? `L ${endArrowPoint.x},${endArrowPoint.y}` : null
+	].filter(Boolean).join(" ");
+	return buildPolylinePath([
+		...startArrowPoint ? [startArrowPoint] : [],
+		...points,
+		...endArrowPoint ? [endArrowPoint] : []
+	]);
+};
+const graphvizShape = (shape) => {
+	switch (shape) {
+		case "circle": return "circle";
+		case "diamond": return "diamond";
+		case "hexagon": return "hexagon";
+		case "triangle": return "triangle";
+		default: return "box";
+	}
+};
+const toDot = (visualization, layoutPlan) => {
+	const lines = [
+		"digraph G {",
+		`graph [${attrsToDot(layoutPlan.graphAttrs)}];`,
+		`node [${attrsToDot(layoutPlan.nodeAttrs)}];`,
+		`edge [${attrsToDot(layoutPlan.edgeAttrs)}];`
+	];
+	for (const node of visualization.nodes ?? []) {
+		const attrs = {
+			...node.layout_attrs,
+			label: node.label ?? "",
+			shape: graphvizShape(node.shape),
+			color: node.border_color ?? node.color ?? void 0,
+			fillcolor: node.color ?? void 0,
+			style: node.color ? "filled" : void 0,
+			width: node.width ? (node.width / GRAPHVIZ_DPI).toFixed(4) : void 0,
+			height: node.height ? (node.height / GRAPHVIZ_DPI).toFixed(4) : void 0,
+			fixedsize: node.width && node.height ? true : void 0
+		};
+		lines.push(`${quoteDotValue(node.id)} [${attrsToDot(attrs)}];`);
+	}
+	for (const edge of visualization.edges ?? []) {
+		const attrs = {
+			...edge.layout_attrs,
+			id: edge.id,
+			label: edge.label ?? void 0,
+			color: edge.color ?? void 0
+		};
+		lines.push(`${quoteDotValue(edge.source)} -> ${quoteDotValue(edge.target)} [${attrsToDot(attrs)}];`);
+	}
+	const ranks = (visualization.nodes ?? []).filter(({ rank }) => rank != null).reduce((acc, node) => {
+		const key = node.rank;
+		acc[key] ??= [];
+		acc[key].push(quoteDotValue(node.id));
+		return acc;
+	}, {});
+	lines.push(...Object.entries(ranks).map(([rank, ids]) => `{ rank=${["source", "sink"].includes(rank) ? rank : "same"}; ${(ids ?? []).join(" ")} }`));
+	lines.push("}");
+	return lines.join("\n");
+};
+const getGraphvizEdgeKey = (edge, gvidToName) => {
+	const tail = typeof edge.tail === "number" ? gvidToName.get(edge.tail) : edge.tail;
+	const head = typeof edge.head === "number" ? gvidToName.get(edge.head) : edge.head;
+	return tail && head ? `${tail}->${head}` : null;
+};
+const buildGraphvizEdgeLayouts = (graphvizEdges, graphHeight, edges, gvidToName) => {
+	const fallbackCounts = /* @__PURE__ */ new Map();
+	const fallbackIds = edges.reduce((acc, edge) => {
+		const key = `${edge.source}->${edge.target}`;
+		acc[key] ??= [];
+		acc[key].push(edge.id);
+		return acc;
+	}, {});
+	return graphvizEdges.reduce((acc, edge) => {
+		const edgeKey = getGraphvizEdgeKey(edge, gvidToName);
+		const fallbackIdsForKey = edgeKey ? fallbackIds[edgeKey] : void 0;
+		const fallbackIndex = edgeKey ? fallbackCounts.get(edgeKey) ?? 0 : 0;
+		const edgeId = edge.id ?? fallbackIdsForKey?.[fallbackIndex];
+		if (!edgeId) return acc;
+		if (edgeKey) fallbackCounts.set(edgeKey, fallbackIndex + 1);
+		const position = parseGraphvizEdgePosition(edge.pos);
+		const points = position.points.map((point) => flipY(point, graphHeight));
+		const startArrowPoint = position.startArrowPoint ? flipY(position.startArrowPoint, graphHeight) : null;
+		const endArrowPoint = position.endArrowPoint ? flipY(position.endArrowPoint, graphHeight) : null;
+		const path = buildGraphvizEdgePath({
+			points,
+			startArrowPoint,
+			endArrowPoint
+		});
+		if (!path) return acc;
+		const labelPosition = parsePoint(edge.lp);
+		acc[edgeId] = {
+			path,
+			labelPosition: labelPosition ? flipY(labelPosition, graphHeight) : null,
+			startPoint: startArrowPoint ?? points[0] ?? null,
+			endPoint: endArrowPoint ?? points.at(-1) ?? null
+		};
+		return acc;
+	}, {});
+};
+const runGraphviz = async ({ visualization, nodes, edges, layoutPlan }) => {
+	const graphviz = await Graphviz.load();
+	const json = JSON.parse(graphviz.layout(toDot(visualization, layoutPlan), "json", layoutPlan.engine));
+	const graphHeight = parseBoundingBoxHeight(json.bb);
+	const gvidToName = /* @__PURE__ */ new Map();
+	return {
+		positions: (json.objects ?? []).reduce((acc, object) => {
+			if (object._gvid != null && object.name) gvidToName.set(object._gvid, object.name);
+			if (!object.name) return acc;
+			const center = parsePoint(object.pos);
+			if (!center) return acc;
+			const data = nodes.find((candidate) => candidate.id === object.name)?.data;
+			const width = data?.width ?? parseGraphvizDimension(object.width) ?? 0;
+			const height = data?.height ?? parseGraphvizDimension(object.height) ?? 0;
+			const flipped = flipY(center, graphHeight);
+			acc[object.name] = {
+				x: flipped.x - width / 2,
+				y: flipped.y - height / 2
+			};
+			return acc;
+		}, {}),
+		edgeLayouts: buildGraphvizEdgeLayouts(json.edges ?? [], graphHeight, edges, gvidToName)
+	};
+};
+const useGraphvizLayout = (visualization) => useCallback(async (model) => {
+	const layout = await runGraphviz({
+		visualization,
+		nodes: model.nodes,
+		edges: model.edges,
+		layoutPlan: model.layoutPlan
+	});
+	return {
+		nodes: applyNodePositions(model.nodes, layout.positions),
+		edges: applyEdgeLayouts(model.edges, layout.edgeLayouts)
+	};
+}, [visualization]);
+//#endregion
+//#region src/components/ResourceView/Viewers/GraphFlow/hooks/useLayout.ts
+const buildSafely = (visualization) => {
+	try {
+		return {
+			model: buildGraphFlowModel(visualization),
+			buildError: null
+		};
+	} catch (err) {
+		return {
+			model: null,
+			buildError: toGraphError(err)
+		};
+	}
+};
+const isElkModel = (model) => model.layoutPlan.type === "elk";
+const isGraphvizModel = (model) => model.layoutPlan.type === "graphviz";
+const useLayout = (visualization) => {
+	const { model, buildError } = useMemo(() => buildSafely(visualization), [visualization]);
+	const runElkLayout = useElkLayout();
+	const runGraphvizLayout = useGraphvizLayout(visualization);
+	const [nodes, setNodes] = useState([]);
+	const [edges, setEdges] = useState([]);
+	const [layoutReady, setLayoutReady] = useState(false);
+	const [layoutError, setLayoutError] = useState(null);
+	useEffect(() => {
+		setLayoutError(null);
+		setNodes(model?.nodes ?? []);
+		setEdges(model?.edges ?? []);
+		setLayoutReady(!model || model.nodes.length === 0);
+	}, [model]);
+	useEffect(() => {
+		if (!model || buildError || layoutReady) return;
+		let cancelled = false;
+		(isElkModel(model) ? runElkLayout(model) : isGraphvizModel(model) ? runGraphvizLayout(model) : Promise.resolve(null)).then((result) => {
+			if (cancelled || !result) return;
+			setNodes(result.nodes);
+			setEdges(result.edges);
+			setLayoutReady(true);
+		}, (err) => {
+			if (cancelled) return;
+			setLayoutError(toGraphError(err));
+			setLayoutReady(true);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		model,
+		buildError,
+		layoutReady,
+		runElkLayout,
+		runGraphvizLayout
+	]);
+	const onNodesChange = useCallback((changes) => setNodes((current) => applyNodeChanges(changes, current)), []);
+	return {
+		nodes,
+		edges,
+		layoutReady,
+		error: buildError ?? layoutError,
+		onNodesChange
+	};
+};
+//#endregion
+//#region src/components/ResourceView/Viewers/GraphFlow/render/Node.tsx
+const HIDDEN_HANDLE_STYLE = {
+	opacity: 0,
+	pointerEvents: "none"
+};
+const HiddenHandles = () => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Handle, {
+	type: "target",
+	position: Position.Left,
+	style: HIDDEN_HANDLE_STYLE
+}), /* @__PURE__ */ jsx(Handle, {
+	type: "source",
+	position: Position.Right,
+	style: HIDDEN_HANDLE_STYLE
+})] });
+const AnnotationBadge = () => /* @__PURE__ */ jsx(Badge, {
+	size: "xs",
+	variant: "filled",
+	color: "gray",
+	title: "This graph element has an annotation visualization.",
+	children: "i"
+});
+const NodeAnnotation = ({ annotation }) => {
+	const [opened, setOpened] = useState(false);
+	const toggle = useCallback((e) => {
+		e.stopPropagation();
+		setOpened((o) => !o);
+	}, []);
+	return /* @__PURE__ */ jsxs(Popover, {
+		opened,
+		onClose: () => setOpened(false),
+		position: "right",
+		withArrow: true,
+		withinPortal: true,
+		shadow: "md",
+		children: [/* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "nodrag nopan",
+			style: {
+				position: "absolute",
+				right: -8,
+				top: -8,
+				cursor: "pointer",
+				pointerEvents: "all",
+				zIndex: 10,
+				background: "none",
+				border: "none",
+				padding: 0
+			},
+			onClick: toggle,
+			onMouseDown: (e) => e.stopPropagation(),
+			children: /* @__PURE__ */ jsx(AnnotationBadge, {})
+		}) }), /* @__PURE__ */ jsxs(Popover.Dropdown, {
+			style: {
+				minWidth: 200,
+				maxWidth: 400
+			},
+			children: [/* @__PURE__ */ jsx(Group, {
+				justify: "flex-end",
+				mb: 4,
+				children: /* @__PURE__ */ jsx(ActionIcon, {
+					size: "xs",
+					variant: "subtle",
+					color: "gray",
+					onClick: () => setOpened(false),
+					children: /* @__PURE__ */ jsx(XIcon, { size: 12 })
+				})
+			}), /* @__PURE__ */ jsx(ScrollArea.Autosize, {
+				mah: 300,
+				children: /* @__PURE__ */ jsx(Visualization, { visualization: annotation })
+			})]
+		})]
+	});
+};
+const ExternalLabel = ({ children, placement }) => /* @__PURE__ */ jsx(Text, {
+	size: "xs",
+	fw: 600,
+	style: {
+		position: "absolute",
+		[placement === "top" ? "bottom" : "top"]: "100%",
+		left: "50%",
+		transform: `translate(-50%, ${placement === "top" ? "-4px" : "4px"})`,
+		whiteSpace: "nowrap",
+		color: DEFAULT_COLORS.text,
+		pointerEvents: "none",
+		letterSpacing: "0.01em"
+	},
+	children
+});
+const InnerSymbol = ({ symbol, color }) => {
+	if (symbol === "triangle") return /* @__PURE__ */ jsx("div", { style: {
+		width: 0,
+		height: 0,
+		borderTop: `${12 * .6}px solid transparent`,
+		borderBottom: `${12 * .6}px solid transparent`,
+		borderLeft: `12px solid ${color}`,
+		marginLeft: 2
+	} });
+	return /* @__PURE__ */ jsx("div", { style: {
+		width: 12,
+		height: 12,
+		backgroundColor: color
+	} });
+};
+const CLIP_PATH = {
+	triangle: "polygon(50% 0, 100% 100%, 0 100%)",
+	diamond: "polygon(50% 0, 100% 50%, 50% 100%, 0 50%)",
+	hexagon: "polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%)"
+};
+const CircleShape = ({ width, height, color, borderColor, doubleBorder, innerSymbol, initialTokens, finalTokens, centerLabel }) => /* @__PURE__ */ jsxs("div", {
+	style: {
+		position: "relative",
+		boxSizing: "border-box",
+		width,
+		height,
+		borderRadius: "50%",
+		backgroundColor: color,
+		border: borderColor ? `2px solid ${borderColor}` : "none",
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		justifyContent: "center",
+		gap: 2
+	},
+	children: [
+		doubleBorder && /* @__PURE__ */ jsx("div", { style: {
+			position: "absolute",
+			inset: 5,
+			borderRadius: "50%",
+			border: borderColor ? `2px solid ${borderColor}` : "none",
+			pointerEvents: "none"
+		} }),
+		initialTokens && !innerSymbol && (initialTokens === 1 ? /* @__PURE__ */ jsx("div", { style: {
+			width: 12,
+			height: 12,
+			borderRadius: "50%",
+			backgroundColor: "rgba(0,0,0,0.65)"
+		} }) : /* @__PURE__ */ jsx("span", {
 			style: {
+				color: "#111",
+				fontSize: 11,
+				fontWeight: 700,
+				lineHeight: 1
+			},
+			children: initialTokens
+		})),
+		finalTokens && finalTokens > 1 && /* @__PURE__ */ jsx("span", {
+			style: {
+				position: "absolute",
+				right: 4,
+				bottom: 3,
+				color: "#111",
+				fontSize: 9,
+				fontWeight: 700,
+				lineHeight: 1
+			},
+			children: finalTokens
+		}),
+		innerSymbol && /* @__PURE__ */ jsx(InnerSymbol, {
+			symbol: innerSymbol,
+			color: borderColor ?? "#111"
+		}),
+		centerLabel && /* @__PURE__ */ jsx("span", {
+			style: {
+				maxWidth: width - 6,
+				color: "#111",
+				fontSize: 10,
+				fontWeight: 600,
+				lineHeight: 1,
+				overflow: "hidden",
+				textAlign: "center",
+				textOverflow: "ellipsis",
+				whiteSpace: "nowrap"
+			},
+			children: centerLabel
+		})
+	]
+});
+const BoxShape = ({ shape, color, borderColor, doubleBorder, innerSymbol, width, height, children }) => {
+	const clipPath = CLIP_PATH[shape];
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			position: "relative",
+			boxSizing: "border-box",
+			width: width ?? void 0,
+			height: height ?? void 0,
+			padding: borderColor != null ? 2 : 0,
+			backgroundColor: borderColor ?? "transparent",
+			borderRadius: shape === "rectangle" ? 5 : 0,
+			clipPath
+		},
+		children: [/* @__PURE__ */ jsx("div", {
+			style: {
+				boxSizing: "border-box",
 				width: "100%",
 				height: "100%",
-				position: "relative"
+				backgroundColor: color,
+				borderRadius: shape === "rectangle" ? 3 : 0,
+				clipPath,
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				overflow: "hidden"
 			},
-			children: [error && /* @__PURE__ */ jsxs("div", {
-				style: {
-					position: "absolute",
-					top: 8,
-					left: 8,
-					color: "red",
-					zIndex: 10
-				},
-				children: ["Graphviz error: ", error]
-			}), cleanedSvg ? /* @__PURE__ */ jsx("div", {
-				style: {
-					width: "100%",
-					height: "100%"
-				},
-				dangerouslySetInnerHTML: { __html: cleanedSvg }
-			}) : !error && /* @__PURE__ */ jsx("div", {
-				style: {
-					width: "100%",
-					height: "100%",
-					display: "grid",
-					placeItems: "center",
-					opacity: .6,
-					fontSize: 14
-				},
-				children: "Rendering…"
+			children: innerSymbol && !children ? /* @__PURE__ */ jsx(InnerSymbol, {
+				symbol: innerSymbol,
+				color: "#111"
+			}) : children
+		}), doubleBorder && /* @__PURE__ */ jsx("div", { style: {
+			position: "absolute",
+			inset: 6,
+			border: borderColor ? `1.5px solid ${borderColor}` : "none",
+			borderRadius: shape === "rectangle" ? 3 : 0,
+			clipPath,
+			pointerEvents: "none"
+		} })]
+	});
+};
+const GraphFlowNode = memo(({ data }) => {
+	const { shape, label, color, border_color, annotation, label_pos, width, height, style } = data;
+	const doubleBorder = style?.double_border ?? null;
+	const innerSymbol = style?.inner_symbol ?? null;
+	const initialTokens = style?.initial_tokens ?? null;
+	const finalTokens = style?.final_tokens ?? null;
+	const isExternalLabel = Boolean(label && label_pos !== "center" && label_pos != null);
+	const maxLabelLines = height != null ? Math.max(1, Math.floor((height - 4) / (14 * 1.2))) : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			position: "relative",
+			width: shape === "circle" ? width ?? void 0 : void 0
+		},
+		children: [
+			/* @__PURE__ */ jsx(HiddenHandles, {}),
+			isExternalLabel && label_pos === "top" && /* @__PURE__ */ jsx(ExternalLabel, {
+				placement: "top",
+				children: label
+			}),
+			shape === "circle" ? /* @__PURE__ */ jsx(CircleShape, {
+				width,
+				height,
+				color: color ?? DEFAULT_COLORS.transition,
+				borderColor: border_color ?? null,
+				doubleBorder,
+				innerSymbol,
+				initialTokens,
+				finalTokens,
+				centerLabel: label_pos === "center" ? label ?? null : null
+			}) : /* @__PURE__ */ jsx(BoxShape, {
+				shape,
+				color: color ?? DEFAULT_COLORS.transition,
+				borderColor: border_color ?? null,
+				doubleBorder,
+				innerSymbol,
+				width: width ?? null,
+				height: height ?? null,
+				children: !isExternalLabel && label && /* @__PURE__ */ jsx(Text, {
+					size: "sm",
+					fw: 500,
+					ta: "center",
+					px: 12,
+					style: {
+						lineHeight: 1.2,
+						color: "#111",
+						maxWidth: width != null ? width : "100%",
+						boxSizing: "border-box",
+						overflow: "hidden",
+						overflowWrap: "anywhere",
+						...maxLabelLines != null ? {
+							display: "-webkit-box",
+							WebkitBoxOrient: "vertical",
+							WebkitLineClamp: maxLabelLines
+						} : { whiteSpace: "normal" }
+					},
+					children: label
+				})
+			}),
+			isExternalLabel && label_pos === "bottom" && /* @__PURE__ */ jsx(ExternalLabel, {
+				placement: "bottom",
+				children: label
+			}),
+			annotation && /* @__PURE__ */ jsx(NodeAnnotation, { annotation })
+		]
+	});
+});
+GraphFlowNode.displayName = "GraphFlowNode";
+//#endregion
+//#region src/components/ResourceView/Viewers/GraphFlow/render/Edge.tsx
+const placeBounds = (node) => {
+	const data = node.data;
+	const width = data.width ?? 0;
+	const height = data.height ?? 0;
+	return {
+		x: node.internals.positionAbsolute.x,
+		y: node.internals.positionAbsolute.y,
+		width,
+		height
+	};
+};
+const visualBounds = (node) => {
+	if (node.data.shape === "circle") return placeBounds(node);
+	return {
+		x: node.internals.positionAbsolute.x,
+		y: node.internals.positionAbsolute.y,
+		width: node.measured.width ?? 0,
+		height: node.measured.height ?? 0
+	};
+};
+const center = (node) => {
+	const bounds = visualBounds(node);
+	return {
+		x: bounds.x + bounds.width / 2,
+		y: bounds.y + bounds.height / 2
+	};
+};
+const rectBorderPoint = (node, other) => {
+	const bounds = visualBounds(node);
+	const hw = bounds.width / 2;
+	const hh = bounds.height / 2;
+	if (hw === 0 || hh === 0) return null;
+	const nc = center(node);
+	const oc = center(other);
+	const dx = oc.x - nc.x;
+	const dy = oc.y - nc.y;
+	const xx = dx / (2 * hw) - dy / (2 * hh);
+	const yy = dx / (2 * hw) + dy / (2 * hh);
+	const scale = 1 / (Math.abs(xx) + Math.abs(yy));
+	if (!Number.isFinite(scale)) return null;
+	return {
+		x: nc.x + hw * scale * (xx + yy),
+		y: nc.y + hh * scale * (-xx + yy)
+	};
+};
+const circleBorderPoint = (node, other) => {
+	const bounds = placeBounds(node);
+	const rx = bounds.width / 2;
+	const ry = bounds.height / 2;
+	if (rx === 0 || ry === 0) return null;
+	const nc = center(node);
+	const oc = center(other);
+	const angle = Math.atan2(oc.y - nc.y, oc.x - nc.x);
+	return {
+		x: nc.x + Math.cos(angle) * rx,
+		y: nc.y + Math.sin(angle) * ry
+	};
+};
+const borderPoint = (node, other) => node.data.shape === "circle" ? circleBorderPoint(node, other) : rectBorderPoint(node, other);
+const edgeSide = (node, pt) => {
+	const nc = center(node);
+	const dx = pt.x - nc.x;
+	const dy = pt.y - nc.y;
+	if (Math.abs(dx) >= Math.abs(dy)) return dx >= 0 ? Position.Right : Position.Left;
+	return dy >= 0 ? Position.Bottom : Position.Top;
+};
+const getEdgeParams = (source, target) => {
+	const sp = borderPoint(source, target);
+	const tp = borderPoint(target, source);
+	if (!sp || !tp) return null;
+	return {
+		sx: sp.x,
+		sy: sp.y,
+		tx: tp.x,
+		ty: tp.y,
+		sourcePos: edgeSide(source, sp),
+		targetPos: edgeSide(target, tp)
+	};
+};
+const fallbackLabelPosition = ({ sourceX, sourceY, targetX, targetY }) => ({
+	x: (sourceX + targetX) / 2,
+	y: (sourceY + targetY) / 2
+});
+const getSelfLoopPath = (sourceNode) => {
+	const width = sourceNode.measured.width ?? 60;
+	const height = sourceNode.measured.height ?? 34;
+	const position = sourceNode.internals.positionAbsolute;
+	const [path, labelX, labelY] = getSmoothStepPath({
+		sourceX: position.x + width,
+		sourceY: position.y + height * .25,
+		sourcePosition: "right",
+		targetX: position.x + width,
+		targetY: position.y + height * .75,
+		targetPosition: "right",
+		borderRadius: 20,
+		offset: 50
+	});
+	return {
+		path,
+		labelX,
+		labelY
+	};
+};
+const getFloatingPath = ({ sourceNode, targetNode, fallback }) => {
+	const params = sourceNode && targetNode ? getEdgeParams(sourceNode, targetNode) : null;
+	const [path, labelX, labelY] = getBezierPath(params ? {
+		sourceX: params.sx,
+		sourceY: params.sy,
+		sourcePosition: params.sourcePos,
+		targetX: params.tx,
+		targetY: params.ty,
+		targetPosition: params.targetPos
+	} : fallback);
+	return {
+		path,
+		labelX,
+		labelY
+	};
+};
+const resolveEdgePath = ({ edge, sourceNode, targetNode }) => {
+	const { data, source, target, sourceX, sourceY, targetX, targetY } = edge;
+	const customLabelPosition = fallbackLabelPosition(edge);
+	if (data?.path) return {
+		path: data.path,
+		labelX: data.labelPosition?.x ?? customLabelPosition.x,
+		labelY: data.labelPosition?.y ?? customLabelPosition.y
+	};
+	if (source === target && sourceNode) return getSelfLoopPath(sourceNode);
+	return getFloatingPath({
+		sourceNode,
+		targetNode,
+		fallback: {
+			sourceX,
+			sourceY,
+			sourcePosition: edge.sourcePosition,
+			targetX,
+			targetY,
+			targetPosition: edge.targetPosition
+		}
+	});
+};
+const colorToId = (color) => color.replace(/[^a-zA-Z0-9]/g, "");
+const ArrowMarker = ({ id, type, color, isStart }) => {
+	if (!type) return null;
+	const commonProps = {
+		id,
+		orient: isStart ? "auto-start-reverse" : "auto",
+		markerUnits: "strokeWidth"
+	};
+	switch (type) {
+		case "triangle": return /* @__PURE__ */ jsx("marker", {
+			...commonProps,
+			markerWidth: "8",
+			markerHeight: "6",
+			refX: "7",
+			refY: "3",
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M0,0 L0,6 L8,3 z",
+				fill: color
+			})
+		});
+		case "vee": return /* @__PURE__ */ jsx("marker", {
+			...commonProps,
+			markerWidth: "8",
+			markerHeight: "6",
+			refX: "6",
+			refY: "3",
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M0,0 L8,3 L0,6",
+				fill: "none",
+				stroke: color,
+				strokeWidth: "1.5"
+			})
+		});
+		case "chevron": return /* @__PURE__ */ jsx("marker", {
+			...commonProps,
+			markerWidth: "6",
+			markerHeight: "6",
+			refX: "5",
+			refY: "3",
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M0,0 L5,3 L0,6",
+				fill: "none",
+				stroke: color,
+				strokeWidth: "1.5"
+			})
+		});
+		case "tee": return /* @__PURE__ */ jsx("marker", {
+			...commonProps,
+			markerWidth: "3",
+			markerHeight: "6",
+			refX: "1",
+			refY: "3",
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M1,0 L1,6",
+				stroke: color,
+				strokeWidth: "1.5",
+				fill: "none"
+			})
+		});
+		case "circle": return /* @__PURE__ */ jsx("marker", {
+			...commonProps,
+			markerWidth: "7",
+			markerHeight: "6",
+			refX: "6",
+			refY: "3",
+			children: /* @__PURE__ */ jsx("circle", {
+				cx: "3",
+				cy: "3",
+				r: "2.5",
+				fill: color
+			})
+		});
+		case "circle-triangle": return /* @__PURE__ */ jsxs("marker", {
+			...commonProps,
+			markerWidth: "13",
+			markerHeight: "6",
+			refX: "12",
+			refY: "3",
+			children: [/* @__PURE__ */ jsx("circle", {
+				cx: "2.5",
+				cy: "3",
+				r: "2.5",
+				fill: color
+			}), /* @__PURE__ */ jsx("path", {
+				d: "M5,0 L5,6 L13,3 z",
+				fill: color
 			})]
+		});
+		case "triangle-backcurve": return /* @__PURE__ */ jsx("marker", {
+			...commonProps,
+			markerWidth: "8",
+			markerHeight: "6",
+			refX: "7",
+			refY: "3",
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M0,0 Q4,3 0,6 L8,3 z",
+				fill: color
+			})
+		});
+		case "triangle-tee": return /* @__PURE__ */ jsxs("marker", {
+			...commonProps,
+			markerWidth: "11",
+			markerHeight: "6",
+			refX: "10",
+			refY: "3",
+			children: [/* @__PURE__ */ jsx("path", {
+				d: "M0,0 L0,6",
+				stroke: color,
+				strokeWidth: "1.5",
+				fill: "none"
+			}), /* @__PURE__ */ jsx("path", {
+				d: "M2,0 L2,6 L10,3 z",
+				fill: color
+			})]
+		});
+		case "triangle-cross": return /* @__PURE__ */ jsxs("marker", {
+			...commonProps,
+			markerWidth: "11",
+			markerHeight: "6",
+			refX: "10",
+			refY: "3",
+			children: [/* @__PURE__ */ jsx("path", {
+				d: "M0,0 L4,6 M4,0 L0,6",
+				stroke: color,
+				strokeWidth: "1.5",
+				fill: "none"
+			}), /* @__PURE__ */ jsx("path", {
+				d: "M5,0 L5,6 L11,3 z",
+				fill: color
+			})]
+		});
+		case "square": return /* @__PURE__ */ jsx("marker", {
+			...commonProps,
+			markerWidth: "7",
+			markerHeight: "6",
+			refX: "6",
+			refY: "3",
+			children: /* @__PURE__ */ jsx("rect", {
+				x: "0",
+				y: "0",
+				width: "6",
+				height: "6",
+				fill: color
+			})
+		});
+		case "diamond": return /* @__PURE__ */ jsx("marker", {
+			...commonProps,
+			markerWidth: "9",
+			markerHeight: "6",
+			refX: "8",
+			refY: "3",
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M0,3 L4,0 L8,3 L4,6 z",
+				fill: color
+			})
+		});
+		default: return null;
+	}
+};
+const getMarkerIds = ({ color, startArrow, endArrow }) => {
+	const colorKey = colorToId(color);
+	return {
+		startMarkerId: startArrow ? `arrow-start-${startArrow}-${colorKey}` : null,
+		endMarkerId: endArrow ? `arrow-end-${endArrow}-${colorKey}` : null
+	};
+};
+const EdgeLabel = ({ color, label, hasAnnotation, x, y }) => /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsxs("div", {
+	style: {
+		position: "absolute",
+		transform: `translate(-50%, -50%) translate(${x}px, ${y}px)`,
+		pointerEvents: "all",
+		backgroundColor: color,
+		color: "#ffffff",
+		fontSize: 11,
+		fontFamily: "system-ui, -apple-system, sans-serif",
+		fontWeight: 500,
+		padding: "2px 6px",
+		borderRadius: 4,
+		whiteSpace: "nowrap",
+		display: "flex",
+		alignItems: "center",
+		gap: 4
+	},
+	className: "nodrag nopan",
+	children: [label, hasAnnotation && /* @__PURE__ */ jsx(AnnotationBadge, {})]
+}) });
+const EdgeEndLabel = ({ label, x, y }) => /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx("div", {
+	style: {
+		position: "absolute",
+		transform: `translate(-50%, -50%) translate(${x}px, ${y}px)`,
+		pointerEvents: "none",
+		color: "#444",
+		fontSize: 10,
+		fontFamily: "system-ui, -apple-system, sans-serif",
+		fontWeight: 500,
+		whiteSpace: "nowrap"
+	},
+	className: "nodrag nopan",
+	children: label
+}) });
+const END_LABEL_INSET = 22;
+const END_LABEL_PERP = 9;
+const endLabelPositions = (start, end) => {
+	const dx = end.x - start.x;
+	const dy = end.y - start.y;
+	const length = Math.hypot(dx, dy) || 1;
+	const ux = dx / length;
+	const uy = dy / length;
+	const px = -uy;
+	const py = ux;
+	return {
+		start: {
+			x: start.x + ux * END_LABEL_INSET + px * END_LABEL_PERP,
+			y: start.y + uy * END_LABEL_INSET + py * END_LABEL_PERP
+		},
+		end: {
+			x: end.x - ux * END_LABEL_INSET + px * END_LABEL_PERP,
+			y: end.y - uy * END_LABEL_INSET + py * END_LABEL_PERP
+		}
+	};
+};
+const GraphFlowEdge = memo((props) => {
+	const { id, source, target, data, sourceX, sourceY, targetX, targetY } = props;
+	const sourceNode = useInternalNode(source);
+	const targetNode = useInternalNode(target);
+	if (!data) return null;
+	const color = data.color ?? "#555";
+	const dashed = data.style?.dashed ?? false;
+	const bold = data.style?.bold ?? false;
+	const startArrow = data.start_arrow ?? null;
+	const endArrow = data.end_arrow ?? null;
+	const { startMarkerId, endMarkerId } = getMarkerIds({
+		color,
+		startArrow,
+		endArrow
+	});
+	const edgePath = resolveEdgePath({
+		edge: props,
+		sourceNode,
+		targetNode
+	});
+	const startPos = data.startPoint ?? {
+		x: sourceX,
+		y: sourceY
+	};
+	const endPos = data.endPoint ?? {
+		x: targetX,
+		y: targetY
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs("defs", { children: [endMarkerId && /* @__PURE__ */ jsx(ArrowMarker, {
+			id: endMarkerId,
+			type: endArrow,
+			color,
+			isStart: false
+		}), startMarkerId && /* @__PURE__ */ jsx(ArrowMarker, {
+			id: startMarkerId,
+			type: startArrow,
+			color,
+			isStart: true
+		})] }),
+		/* @__PURE__ */ jsx(BaseEdge, {
+			id,
+			path: edgePath.path,
+			...endMarkerId ? { markerEnd: `url(#${endMarkerId})` } : {},
+			...startMarkerId ? { markerStart: `url(#${startMarkerId})` } : {},
+			style: {
+				stroke: color,
+				strokeWidth: bold ? 3 : 1.5,
+				strokeDasharray: dashed ? "6 3" : void 0
+			}
+		}),
+		(data.label || data.annotation) && /* @__PURE__ */ jsx(EdgeLabel, {
+			color,
+			label: data.label,
+			hasAnnotation: Boolean(data.annotation),
+			x: edgePath.labelX,
+			y: edgePath.labelY
+		}),
+		(data.start_label || data.end_label) && (() => {
+			const positions = endLabelPositions(startPos, endPos);
+			return /* @__PURE__ */ jsxs(Fragment, { children: [data.start_label && /* @__PURE__ */ jsx(EdgeEndLabel, {
+				label: data.start_label,
+				x: positions.start.x,
+				y: positions.start.y
+			}), data.end_label && /* @__PURE__ */ jsx(EdgeEndLabel, {
+				label: data.end_label,
+				x: positions.end.x,
+				y: positions.end.y
+			})] });
+		})()
+	] });
+});
+GraphFlowEdge.displayName = "GraphFlowEdge";
+//#endregion
+//#region src/components/ResourceView/Viewers/GraphFlow/utils/bounds.ts
+function nodeBoundsFromData(nodes) {
+	if (nodes.length === 0) return {
+		x: 0,
+		y: 0,
+		width: 0,
+		height: 0
+	};
+	let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+	for (const node of nodes) {
+		const x = node.position.x;
+		const y = node.position.y;
+		const w = node.measured?.width ?? 0;
+		const h = node.measured?.height ?? 0;
+		minX = Math.min(minX, x);
+		minY = Math.min(minY, y);
+		maxX = Math.max(maxX, x + w);
+		maxY = Math.max(maxY, y + h);
+	}
+	return Number.isFinite(minX) ? {
+		x: minX,
+		y: minY,
+		width: maxX - minX,
+		height: maxY - minY
+	} : {
+		x: 0,
+		y: 0,
+		width: 0,
+		height: 0
+	};
+}
+function svgPathBounds(d) {
+	const nums = (d.match(/-?[\d.]+(?:e[+-]?\d+)?/gi) ?? []).map(parseFloat);
+	if (nums.length < 2) return null;
+	let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+	for (let i = 0; i + 1 < nums.length; i += 2) {
+		minX = Math.min(minX, nums[i]);
+		minY = Math.min(minY, nums[i + 1]);
+		maxX = Math.max(maxX, nums[i]);
+		maxY = Math.max(maxY, nums[i + 1]);
+	}
+	return Number.isFinite(minX) ? {
+		x: minX,
+		y: minY,
+		width: maxX - minX,
+		height: maxY - minY
+	} : null;
+}
+/**
+* Computes content bounds from graph data without touching the DOM.
+* Uses node positions/sizes and pre-computed ELK edge paths.
+* Safe to call immediately after layout with no timing concerns.
+*/
+function computeAutoFitBounds(nodes, edges) {
+	let combined = nodeBoundsFromData(nodes);
+	for (const edge of edges) {
+		const path = edge.data?.path;
+		if (!path) continue;
+		const eb = svgPathBounds(path);
+		if (eb) combined = unionRects(combined, eb);
+	}
+	return combined;
+}
+function unionRects(a, b) {
+	const x = Math.min(a.x, b.x);
+	const y = Math.min(a.y, b.y);
+	const right = Math.max(a.x + a.width, b.x + b.width);
+	const bottom = Math.max(a.y + a.height, b.y + b.height);
+	return {
+		x,
+		y,
+		width: right - x,
+		height: bottom - y
+	};
+}
+/**
+* Reads the viewport transform directly from the inline style React Flow writes:
+* `transform: translate(Xpx, Ypx) scale(Z)`
+*/
+function parseViewportTransform(viewportEl) {
+	const match = (viewportEl.style.transform ?? "").match(/translate\((-?[\d.]+)px,\s*(-?[\d.]+)px\)\s*scale\((-?[\d.]+)\)/);
+	if (!match) return null;
+	return {
+		x: parseFloat(match[1]),
+		y: parseFloat(match[2]),
+		zoom: parseFloat(match[3])
+	};
+}
+/**
+* Returns the bounding rect (in flow coordinates) of all nodes plus all
+* rendered edge paths. React Flow's built-in helpers only account for nodes;
+* curved or long edges can extend well outside the node bounds, causing them
+* to be clipped in exports and in fitView.
+*
+* In @xyflow/react v12 each edge is wrapped in its own <svg> (position:
+* absolute), so getBBox() coordinates are not reliably in flow space. Instead
+* we use getBoundingClientRect() on each .react-flow__edge-path element and
+* convert from screen coords back to flow coords via the inverse of the
+* viewport's CSS transform.
+*/
+function getContentBounds(nodes, viewportEl, getNodesBounds) {
+	const nodeBounds = getNodesBounds(nodes);
+	const vt = parseViewportTransform(viewportEl);
+	if (!vt || vt.zoom === 0) return nodeBounds;
+	const containerRect = viewportEl.parentElement?.getBoundingClientRect();
+	if (!containerRect) return nodeBounds;
+	const edgePaths = viewportEl.querySelectorAll(".react-flow__edge-path");
+	if (edgePaths.length === 0) return nodeBounds;
+	let combined = nodeBounds;
+	for (const path of Array.from(edgePaths)) {
+		const rect = path.getBoundingClientRect();
+		if (rect.width === 0 && rect.height === 0) continue;
+		const flowX = (rect.left - containerRect.left - vt.x) / vt.zoom;
+		const flowY = (rect.top - containerRect.top - vt.y) / vt.zoom;
+		const flowRight = (rect.right - containerRect.left - vt.x) / vt.zoom;
+		const flowBottom = (rect.bottom - containerRect.top - vt.y) / vt.zoom;
+		combined = unionRects(combined, {
+			x: flowX,
+			y: flowY,
+			width: flowRight - flowX,
+			height: flowBottom - flowY
+		});
+	}
+	return combined;
+}
+//#endregion
+//#region src/components/ResourceView/Viewers/GraphFlow/utils/download.ts
+const MAX_PX = 2048;
+const EXPORT_PADDING = .05;
+function buildCaptureOptions(imageWidth, imageHeight, x, y, zoom) {
+	return {
+		backgroundColor: "#ffffff",
+		width: imageWidth,
+		height: imageHeight,
+		skipFonts: true,
+		style: {
+			width: `${imageWidth}px`,
+			height: `${imageHeight}px`,
+			transform: `translate(${x}px, ${y}px) scale(${zoom})`
+		},
+		filter: (node) => !(node instanceof Element) || !node.classList.contains("react-flow__panel") && !node.classList.contains("react-flow__background")
+	};
+}
+function resolveViewport(container, nodes, getNodesBounds) {
+	if (nodes.length === 0) return null;
+	const viewportEl = container.querySelector(".react-flow__viewport");
+	if (!viewportEl) return null;
+	const bounds = getContentBounds(nodes, viewportEl, getNodesBounds);
+	const padX = bounds.width * EXPORT_PADDING;
+	const padY = bounds.height * EXPORT_PADDING;
+	const paddedWidth = bounds.width + 2 * padX;
+	const paddedHeight = bounds.height + 2 * padY;
+	const zoom = Math.min(MAX_PX / paddedWidth, MAX_PX / paddedHeight);
+	return {
+		viewportEl,
+		imageWidth: Math.round(paddedWidth * zoom),
+		imageHeight: Math.round(paddedHeight * zoom),
+		x: (padX - bounds.x) * zoom,
+		y: (padY - bounds.y) * zoom,
+		zoom
+	};
+}
+async function downloadPng(container, nodes, getNodesBounds) {
+	const capture = resolveViewport(container, nodes, getNodesBounds);
+	if (!capture) return;
+	const { viewportEl, imageWidth, imageHeight, x, y, zoom } = capture;
+	saveAs(await toPng(viewportEl, buildCaptureOptions(imageWidth, imageHeight, x, y, zoom)), "graph.png");
+}
+async function downloadSvg(container, nodes, getNodesBounds) {
+	const capture = resolveViewport(container, nodes, getNodesBounds);
+	if (!capture) return;
+	const { viewportEl, imageWidth, imageHeight, x, y, zoom } = capture;
+	saveAs(await toSvg(viewportEl, buildCaptureOptions(imageWidth, imageHeight, x, y, zoom)), "graph.svg");
+}
+async function downloadPdf(container, nodes, getNodesBounds) {
+	const capture = resolveViewport(container, nodes, getNodesBounds);
+	if (!capture) return;
+	const { viewportEl, imageWidth, imageHeight, x, y, zoom } = capture;
+	const dataUrl = await toPng(viewportEl, buildCaptureOptions(imageWidth, imageHeight, x, y, zoom));
+	const pdf = new jsPDF({
+		orientation: imageWidth >= imageHeight ? "landscape" : "portrait",
+		unit: "px",
+		format: [imageWidth, imageHeight]
+	});
+	pdf.addImage(dataUrl, "PNG", 0, 0, imageWidth, imageHeight);
+	pdf.save("graph.pdf");
+}
+//#endregion
+//#region src/components/ResourceView/Viewers/GraphFlow/index.tsx
+const nodeTypes = { node: GraphFlowNode };
+const edgeTypes = { graphflow: GraphFlowEdge };
+const GraphFlowCanvas = ({ visualization, isPreview, menuItems }) => {
+	const { nodes, edges, layoutReady, error, onNodesChange } = useLayout(visualization);
+	const { fitBounds, getNodes, getEdges, getNodesBounds } = useReactFlow();
+	const wrapperRef = useRef(null);
+	const fitViewWithEdges = useCallback(() => {
+		fitBounds(computeAutoFitBounds(getNodes(), getEdges()), { padding: FIT_VIEW_PADDING });
+	}, [
+		fitBounds,
+		getNodes,
+		getEdges
+	]);
+	const handleDownloadPng = useCallback(() => wrapperRef.current && downloadPng(wrapperRef.current, getNodes(), getNodesBounds), [getNodes, getNodesBounds]);
+	const handleDownloadSvg = useCallback(() => wrapperRef.current && downloadSvg(wrapperRef.current, getNodes(), getNodesBounds), [getNodes, getNodesBounds]);
+	const handleDownloadPdf = useCallback(() => wrapperRef.current && downloadPdf(wrapperRef.current, getNodes(), getNodesBounds), [getNodes, getNodesBounds]);
+	const wasReadyRef = useRef(false);
+	useEffect(() => {
+		if (!layoutReady) {
+			wasReadyRef.current = false;
+			return;
+		}
+		if (wasReadyRef.current) return;
+		wasReadyRef.current = true;
+		fitViewWithEdges();
+	}, [layoutReady, fitViewWithEdges]);
+	if (error) return /* @__PURE__ */ jsx(Stack, {
+		h: "100%",
+		justify: "center",
+		p: "md",
+		children: /* @__PURE__ */ jsx(Alert, {
+			color: "red",
+			title: error.message,
+			children: error.details?.map((detail) => /* @__PURE__ */ jsx(Code, {
+				display: "block",
+				mb: 4,
+				children: detail
+			}, detail))
 		})
 	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(LoadingOverlay, {
+		visible: !layoutReady,
+		zIndex: 10
+	}), /* @__PURE__ */ jsx("div", {
+		ref: wrapperRef,
+		style: {
+			width: "100%",
+			height: "100%",
+			opacity: layoutReady ? 1 : 0
+		},
+		children: /* @__PURE__ */ jsx(ReactFlow, {
+			nodes,
+			edges,
+			nodeTypes,
+			edgeTypes,
+			onNodesChange,
+			nodesDraggable: false,
+			nodesConnectable: false,
+			elementsSelectable: false,
+			zoomOnScroll: !isPreview,
+			panOnDrag: !isPreview,
+			minZoom: .05,
+			maxZoom: 3,
+			children: !isPreview && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Background, {
+				color: "#e5e7eb",
+				gap: 20,
+				size: 1
+			}), /* @__PURE__ */ jsxs(Controls, {
+				showInteractive: false,
+				showFitView: false,
+				children: [
+					/* @__PURE__ */ jsx(ControlButton, {
+						onClick: fitViewWithEdges,
+						title: "fit view",
+						children: /* @__PURE__ */ jsx(Maximize2Icon, { size: 11 })
+					}),
+					/* @__PURE__ */ jsxs(Menu, {
+						position: "right",
+						withinPortal: false,
+						children: [/* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(ActionIcon, {
+							variant: "transparent",
+							children: /* @__PURE__ */ jsx(DownloadIcon, {
+								color: "black",
+								size: 18
+							})
+						}) }), /* @__PURE__ */ jsxs(Menu.Dropdown, { children: [
+							/* @__PURE__ */ jsx(Menu.Item, {
+								onClick: handleDownloadPng,
+								children: "PNG"
+							}),
+							/* @__PURE__ */ jsx(Menu.Item, {
+								onClick: handleDownloadSvg,
+								children: "SVG"
+							}),
+							/* @__PURE__ */ jsx(Menu.Item, {
+								onClick: handleDownloadPdf,
+								children: "PDF"
+							})
+						] })]
+					}),
+					menuItems?.map((menuItem) => /* @__PURE__ */ jsx(ControlButton, {
+						onClick: menuItem.onClick,
+						title: menuItem.label,
+						children: menuItem.icon
+					}))
+				]
+			})] })
+		})
+	})] });
 };
-var Dot_default = DotToSvgViewer;
-
+const GraphFlow = (props) => /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(GraphFlowCanvas, { ...props }) });
+//#endregion
+//#region src/components/ResourceView/Viewers/Graph.tsx
+const GraphViewer = (props) => /* @__PURE__ */ jsx(Box, {
+	h: "100%",
+	w: "100%",
+	pos: "relative",
+	style: { overflow: "hidden" },
+	children: /* @__PURE__ */ jsx(GraphFlow, { ...props })
+});
 //#endregion
 //#region src/components/ResourceView/Viewers/Plotly.tsx
 const Plot = dynamic(() => import("react-plotly.js"), { ssr: false });
@@ -605,22 +1741,80 @@ const PlotlyViewer = ({ visualization, isPreview }) => {
 		}
 	});
 };
-var Plotly_default = PlotlyViewer;
-
+//#endregion
+//#region src/util/dayjs.ts
+dayjs.extend(isBetween);
+var dayjs_default = dayjs;
+const formatDateTime = (dateString) => dayjs(dateString).format("YYYY-MM-DD HH:mm");
+const formatDate = (dateString) => dayjs(dateString).format("YYYY-MM-DD");
+//#endregion
+//#region src/components/ResourceView/Viewers/Table.tsx
+const formatCell = (value, dataType) => {
+	if (value == null) return "";
+	switch (dataType) {
+		case "boolean": return value ? "✅" : "❌";
+		case "date": return dayjs_default(value).isValid() ? formatDate(value) : String(value);
+		case "datetime": return dayjs_default(value).isValid() ? formatDateTime(value) : String(value);
+		default: return String(value);
+	}
+};
+const PAGE_SIZES = [
+	20,
+	50,
+	75
+];
+const TableView = ({ visualization }) => {
+	const [pageSize, setPageSize] = useState(PAGE_SIZES[0]);
+	const columns = useMemo(() => visualization.columns.map((col) => ({
+		accessor: col.id,
+		title: col.label ?? col.id,
+		render: (record) => formatCell(record[col.id], col.data_type)
+	})), [visualization.columns]);
+	const [page, setPage] = useState(1);
+	const [records, setRecords] = useState(visualization.rows.slice(0, pageSize));
+	useEffect(() => {
+		const from = (page - 1) * pageSize;
+		const to = from + pageSize;
+		setRecords(visualization.rows.slice(from, to));
+	}, [
+		page,
+		pageSize,
+		visualization
+	]);
+	return /* @__PURE__ */ jsx(DataTable, {
+		records,
+		columns,
+		withTableBorder: true,
+		withColumnBorders: true,
+		withRowBorders: true,
+		...visualization.rows.length > PAGE_SIZES[0] ? {
+			totalRecords: visualization.rows.length,
+			recordsPerPage: pageSize,
+			onPageChange: (p) => setPage(p),
+			page,
+			recordsPerPageOptions: [...PAGE_SIZES],
+			onRecordsPerPageChange: (newPageSize) => {
+				setPageSize(newPageSize);
+				setPage(1);
+			}
+		} : {}
+	});
+};
 //#endregion
 //#region src/components/ResourceView/index.tsx
-const visulizationMap = {
-	table: Table_default,
-	svg: SVG_default,
-	graph: Graph_default,
-	dot: Dot_default,
-	plotly: Plotly_default
-};
-const Visualization = ({ visualization, isPreview = false }) => {
-	const Component = visulizationMap[visualization.type];
+const visualizationMap = {
+	table: TableView,
+	svg: SvgViewer,
+	graph: GraphViewer,
+	dot: DotToSvgViewer,
+	plotly: PlotlyViewer
+};
+const Visualization = ({ visualization, isPreview = false, menuItems }) => {
+	const Component = visualizationMap[visualization.type];
 	return /* @__PURE__ */ jsx(Component, {
 		visualization,
-		isPreview
+		isPreview,
+		...menuItems && { menuItems }
 	});
 };
 const ResourceViewer = ({ id, isPreview = false }) => {
@@ -646,7 +1840,6 @@ const ResourceViewer = ({ id, isPreview = false }) => {
 		isPreview
 	});
 };
-
 //#endregion
 //#region src/components/ResourceModal/ResourceModal.tsx
 const ResourceModal = ({ id, onClose }) => {
@@ -689,6 +1882,18 @@ const ResourceModal = ({ id, onClose }) => {
 		})
 	});
 };
-
 //#endregion
-export { ResourceModal, ResourceViewer, Visualization };
+//#region src/components/ResourceSelect/ResourceSelect.tsx
+const ResourceSelect = ({ type, value, ...props }) => {
+	const { data: resources = [] } = useResources({ resource_type: type });
+	return /* @__PURE__ */ jsx(Select, {
+		...props,
+		value: value ?? null,
+		data: resources.map(({ name, id }) => ({
+			value: id,
+			label: name
+		}))
+	});
+};
+//#endregion
+export { ResourceModal, ResourceSelect, ResourceViewer, Visualization };