@ocelescope/resources 0.1.2 → 0.5.0

package/dist/index.js

@@ -2,19 +2,20 @@ import { ActionIcon, Alert, Badge, Box, Button, ButtonGroup, Code, Group, Loadin
 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 { saveAs } from "file-saver";
+import FileSaver from "file-saver";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
-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 { Background, BaseEdge, ControlButton, Controls, EdgeLabelRenderer, Handle, Position, ReactFlow, ReactFlowProvider, applyNodeChanges, getBezierPath, getSmoothStepPath, useInternalNode, useReactFlow } from "@xyflow/react";
 import { toPng, toSvg } from "html-to-image";
 import { jsPDF } from "jspdf";
+import ELK from "elkjs/lib/elk.bundled.js";
 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 { saveAs: saveAs$2 } = FileSaver;
 const SvgPanWrapper = ({ children, onDownload }) => {
 	return /* @__PURE__ */ jsx(Box, {
 		w: "100%",
@@ -69,7 +70,8 @@ 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 handleDownload = () => {
 		if (!cleanedSvg) return;
-		saveAs(new Blob([cleanedSvg], { type: "image/svg+xml;charset=utf-8" }), "resource.svg");
+		const blob = new Blob([cleanedSvg], { type: "image/svg+xml;charset=utf-8" });
+		saveAs$2(blob, "resource.svg");
 	};
 	const content = /* @__PURE__ */ jsx("div", {
 		style: {
@@ -86,6 +88,7 @@ const SvgViewer = ({ visualization, isPreview }) => {
 };
 //#endregion
 //#region src/components/ResourceView/Viewers/Dot.tsx
+const { saveAs: saveAs$1 } = FileSaver;
 const DotToSvgViewer = ({ isPreview, visualization }) => {
 	const [svg, setSvg] = useState(null);
 	const [error, setError] = useState(null);
@@ -114,7 +117,8 @@ const DotToSvgViewer = ({ isPreview, visualization }) => {
 	}, [svg]);
 	const handleDownload = () => {
 		if (!cleanedSvg) return;
-		saveAs(new Blob([cleanedSvg], { type: "image/svg+xml;charset=utf-8" }), "resource.svg");
+		const blob = new Blob([cleanedSvg], { type: "image/svg+xml;charset=utf-8" });
+		saveAs$1(blob, "resource.svg");
 	};
 	const content = /* @__PURE__ */ jsxs("div", {
 		style: {
@@ -156,15 +160,283 @@ const DotToSvgViewer = ({ isPreview, visualization }) => {
 	});
 };
 //#endregion
+//#region src/components/ResourceView/Viewers/GraphFlow/GraphControls.tsx
+const GraphControls = ({ onFitView, onDownloadPng, onDownloadSvg, onDownloadPdf, menuItems, isPreview }) => {
+	if (isPreview) return null;
+	return /* @__PURE__ */ jsxs(Controls, {
+		showInteractive: false,
+		showFitView: false,
+		children: [
+			/* @__PURE__ */ jsx(ControlButton, {
+				onClick: onFitView,
+				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: onDownloadPng,
+						children: "PNG"
+					}),
+					/* @__PURE__ */ jsx(Menu.Item, {
+						onClick: onDownloadSvg,
+						children: "SVG"
+					}),
+					/* @__PURE__ */ jsx(Menu.Item, {
+						onClick: onDownloadPdf,
+						children: "PDF"
+					})
+				] })]
+			}),
+			menuItems?.map((menuItem) => /* @__PURE__ */ jsx(ControlButton, {
+				onClick: menuItem.onClick,
+				title: menuItem.label,
+				children: menuItem.icon
+			}, menuItem.label))
+		]
+	});
+};
+//#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?.layout?.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 { saveAs } = FileSaver;
+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;
+	const dataUrl = await toPng(viewportEl, buildCaptureOptions(imageWidth, imageHeight, x, y, zoom));
+	saveAs(dataUrl, "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;
+	const dataUrl = await toSvg(viewportEl, buildCaptureOptions(imageWidth, imageHeight, x, y, zoom));
+	saveAs(dataUrl, "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/hooks/useGraphExport.ts
+const useGraphExport = (wrapperRef) => {
+	const { getNodes, getNodesBounds } = useReactFlow();
+	return {
+		downloadPng: useCallback(() => {
+			if (!wrapperRef.current) return;
+			downloadPng(wrapperRef.current, getNodes(), getNodesBounds);
+		}, [
+			wrapperRef,
+			getNodes,
+			getNodesBounds
+		]),
+		downloadSvg: useCallback(() => {
+			if (!wrapperRef.current) return;
+			downloadSvg(wrapperRef.current, getNodes(), getNodesBounds);
+		}, [
+			wrapperRef,
+			getNodes,
+			getNodesBounds
+		]),
+		downloadPdf: useCallback(() => {
+			if (!wrapperRef.current) return;
+			downloadPdf(wrapperRef.current, getNodes(), getNodesBounds);
+		}, [
+			wrapperRef,
+			getNodes,
+			getNodesBounds
+		])
+	};
+};
+//#endregion
 //#region src/components/ResourceView/Viewers/GraphFlow/model/types.ts
-var GraphVisualizationError = class extends Error {
+var GraphError = class extends Error {
 	details;
 	constructor(message, details) {
 		super(message);
-		this.name = "GraphVisualizationError";
+		this.name = "GraphError";
 		this.details = details;
 	}
 };
+const toGraphError = (error) => error instanceof GraphError ? error : new GraphError("Graph rendering failed.", [error instanceof Error ? error.message : String(error)]);
 const DEFAULT_COLORS = {
 	edge: "#555555",
 	place: "#aec6e8",
@@ -174,7 +446,7 @@ const DEFAULT_COLORS = {
 };
 const FIT_VIEW_PADDING = .15;
 //#endregion
-//#region src/components/ResourceView/Viewers/GraphFlow/model/buildModel.ts
+//#region src/components/ResourceView/Viewers/GraphFlow/layout/elk.ts
 const EDGE_ROUTINGS = /* @__PURE__ */ new Set([
 	"SPLINES",
 	"ORTHOGONAL",
@@ -182,252 +454,151 @@ const EDGE_ROUTINGS = /* @__PURE__ */ new Set([
 ]);
 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)}.`]);
+	if (typeof value !== "string") throw new GraphError("Invalid ELK edge routing.", [`Expected one of ${[...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(", ")}.`]);
+	if (!EDGE_ROUTINGS.has(normalized)) throw new GraphError("Invalid ELK edge routing.", [`Unknown edge routing "${value}". Supported values are ${[...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;
+const resolveGraphRouting = (options) => {
+	const routing = EDGE_ROUTING_KEYS.flatMap((key) => key in options ? [normalizeEdgeRouting(options[key])] : [])[0] ?? "POLYLINE";
+	const normalized = { ...options };
+	for (const key of EDGE_ROUTING_KEYS) if (key in normalized) normalized[key] = routing;
 	return {
-		edgeRouting,
-		elkOptions: normalizedOptions
+		routing,
+		options: normalized
 	};
 };
-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 sectionPoints = (section) => {
+	if (!section.startPoint || !section.endPoint) return [];
+	return [
+		section.startPoint,
+		...section.bendPoints ?? [],
+		section.endPoint
+	];
 };
-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) => {
+const isSplineControlList = (points) => points.length >= 4 && (points.length - 1) % 3 === 0;
+const routeSection = (section, routing) => {
+	const points = sectionPoints(section);
 	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}`;
+	if (routing === "SPLINES" && section.startPoint) {
+		const control = [section.startPoint, ...section.bendPoints ?? []];
+		if ((control.length - 1) % 3 === 2 && section.endPoint) control.push(section.endPoint);
+		if (isSplineControlList(control)) return {
+			kind: "spline",
+			points: control,
+			startAnchor: null,
+			endAnchor: null
+		};
 	}
-	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
-	]);
+	return {
+		kind: "polyline",
+		points,
+		startAnchor: null,
+		endAnchor: null
+	};
 };
 const sectionMidpoint = (section) => {
-	if (!section.startPoint || !section.endPoint) return null;
-	const points = [
-		section.startPoint,
-		...section.bendPoints ?? [],
-		section.endPoint
-	];
+	const points = sectionPoints(section);
 	const mid = points[Math.floor(points.length / 2)];
 	return mid ? {
 		x: mid.x,
 		y: mid.y
 	} : null;
 };
-const getEdgeLabelPosition = (label, section) => {
+const labelPosition = (edge, section) => {
+	const label = edge.labels?.[0];
 	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 edgeRoutingOf = (edge, fallback) => {
 	const options = edge.layoutOptions ?? {};
-	const edgeRouting = options["elk.edgeRouting"] ?? options["org.eclipse.elk.edgeRouting"];
-	return edgeRouting === void 0 ? fallback : normalizeEdgeRouting(edgeRouting);
+	const routing = options["elk.edgeRouting"] ?? options["org.eclipse.elk.edgeRouting"];
+	return routing === void 0 ? fallback : normalizeEdgeRouting(routing);
 };
-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 {
+const byId = (a, b) => a.id.localeCompare(b.id);
+const byEndpoints = (a, b) => a.source.localeCompare(b.source) || a.target.localeCompare(b.target) || a.id.localeCompare(b.id);
+const nodeSize = (node) => ({
+	width: node.width ?? 120,
+	height: node.height ?? 40
+});
+var ElkEngine = class ElkEngine {
+	config;
+	static elk = new ELK();
+	constructor(config) {
+		this.config = config;
+	}
+	async run(model) {
+		const { routing, options } = resolveGraphRouting(this.config.options);
+		const layoutOptions = model.nodes.some((node) => typeof node.rank === "number") ? {
+			"elk.partitioning.activate": true,
+			...options
+		} : options;
+		const graph = await ElkEngine.elk.layout({
+			id: "root",
+			layoutOptions,
+			children: [...model.nodes].sort(byId).map((node) => {
+				const { width, height } = nodeSize(node);
+				return {
+					id: node.id,
+					width,
+					height,
+					layoutOptions: this.nodeLayoutOptions(node)
+				};
+			}),
+			edges: [...model.edges].sort(byEndpoints).map((edge) => ({
 				id: edge.id,
 				sources: [edge.source],
 				targets: [edge.target],
-				layoutOptions: edgeData?.layout_attrs ?? {},
-				...edgeLabel ? { labels: [{
-					text: String(edgeLabel),
-					width: String(edgeLabel).length * 7 + 12,
+				layoutOptions: edge.layout_attrs ?? {},
+				...edge.label ? { labels: [{
+					text: String(edge.label),
+					width: String(edge.label).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)
+			positions: this.readPositions(graph.children),
+			routes: this.readRoutes(graph.edges, routing)
+		};
+	}
+	nodeLayoutOptions(node) {
+		const options = { ...node.layout_attrs ?? {} };
+		const rank = node.rank ?? null;
+		if (rank === "source") options["elk.layered.layering.layerConstraint"] = "FIRST";
+		else if (rank === "sink") options["elk.layered.layering.layerConstraint"] = "LAST";
+		else if (typeof rank === "number") options["elk.partitioning.partition"] = String(rank);
+		return options;
+	}
+	readPositions(children = []) {
+		const positions = {};
+		for (const child of children) if (child.id && child.x != null && child.y != null) positions[child.id] = {
+			x: child.x,
+			y: child.y
 		};
-	}, [nodesInitialized, measuredNodes]);
+		return positions;
+	}
+	readRoutes(edges = [], graphRouting) {
+		const routes = {};
+		for (const edge of edges) {
+			const section = edge.sections?.[0];
+			if (!edge.id || !section) continue;
+			const routed = routeSection(section, edgeRoutingOf(edge, graphRouting));
+			if (!routed) continue;
+			routes[edge.id] = {
+				...routed,
+				labelPosition: labelPosition(edge, section)
+			};
+		}
+		return routes;
+	}
 };
 //#endregion
-//#region src/components/ResourceView/Viewers/GraphFlow/hooks/useGraphvizLayout.ts
+//#region src/components/ResourceView/Viewers/GraphFlow/layout/graphviz.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(",");
@@ -439,38 +610,200 @@ const parsePoint = (value) => {
 	} : null;
 };
 const parseBoundingBoxHeight = (bb) => {
-	const height = (bb?.split(",").map((value) => Number.parseFloat(value)))?.[3];
+	const height = bb?.split(",").map((v) => Number.parseFloat(v))?.[3];
 	return Number.isFinite(height) ? height : 0;
 };
-const parseGraphvizDimension = (value) => {
+const parseDimension = (value) => {
 	if (value == null) return null;
 	const dimension = Number.parseFloat(String(value)) * GRAPHVIZ_DPI;
 	return Number.isFinite(dimension) ? dimension : null;
 };
-const parseGraphvizEdgePosition = (pos) => {
+const flipY = (point, graphHeight) => ({
+	x: point.x,
+	y: graphHeight - point.y
+});
+const parseEdgePosition = (pos) => {
 	const result = {
 		points: [],
-		startArrowPoint: null,
-		endArrowPoint: null
+		startArrow: null,
+		endArrow: null
 	};
 	if (!pos) return result;
-	const pointMatches = pos.matchAll(/(?:^|\s)(?:(s|e),)?(-?\d+(?:\.\d+)?),(-?\d+(?:\.\d+)?)/g);
-	for (const match of pointMatches) {
+	const matches = pos.matchAll(/(?:^|\s)(?:(s|e),)?(-?\d+(?:\.\d+)?),(-?\d+(?:\.\d+)?)/g);
+	for (const match of matches) {
 		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;
+		if (match[1] === "s") result.startArrow = point;
+		else if (match[1] === "e") result.endArrow = point;
 		else result.points.push(point);
 	}
 	return result;
 };
-const flipY = (point, graphHeight) => ({
-	x: point.x,
-	y: graphHeight - point.y
+const edgeEndpointKey = (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 quote = (value) => `"${value.replaceAll("\"", "\\\"")}"`;
+const attrsToDot = (attrs) => attrs ? Object.entries(attrs).filter(([, value]) => value != null).map(([key, value]) => typeof value === "string" ? `${key}=${quote(value)}` : `${key}=${String(value)}`).join(",") : "";
+const dotShape = (shape) => {
+	switch (shape) {
+		case "circle":
+		case "diamond":
+		case "hexagon":
+		case "triangle": return shape;
+		default: return "box";
+	}
+};
+var GraphvizEngine = class GraphvizEngine {
+	config;
+	static instance = null;
+	constructor(config) {
+		this.config = config;
+	}
+	static load() {
+		GraphvizEngine.instance ??= Graphviz.load();
+		return GraphvizEngine.instance;
+	}
+	async run(model) {
+		const graphviz = await GraphvizEngine.load();
+		const json = JSON.parse(graphviz.layout(this.toDot(model), "json", this.config.engine));
+		const graphHeight = parseBoundingBoxHeight(json.bb);
+		const gvidToName = /* @__PURE__ */ new Map();
+		const positions = {};
+		for (const object of json.objects ?? []) {
+			if (object._gvid != null && object.name) gvidToName.set(object._gvid, object.name);
+			if (!object.name) continue;
+			const center = parsePoint(object.pos);
+			if (!center) continue;
+			const node = model.nodes.find((candidate) => candidate.id === object.name);
+			const width = node?.width ?? parseDimension(object.width) ?? 0;
+			const height = node?.height ?? parseDimension(object.height) ?? 0;
+			const flipped = flipY(center, graphHeight);
+			positions[object.name] = {
+				x: flipped.x - width / 2,
+				y: flipped.y - height / 2
+			};
+		}
+		return {
+			positions,
+			routes: this.readRoutes(json.edges ?? [], graphHeight, model.edges, gvidToName)
+		};
+	}
+	readRoutes(graphvizEdges, graphHeight, modelEdges, gvidToName) {
+		const idsByKey = modelEdges.reduce((acc, edge) => {
+			const key = `${edge.source}->${edge.target}`;
+			acc[key] ??= [];
+			acc[key].push(edge.id);
+			return acc;
+		}, {});
+		const consumed = /* @__PURE__ */ new Map();
+		const routes = {};
+		for (const edge of graphvizEdges) {
+			const key = edgeEndpointKey(edge, gvidToName);
+			const index = key ? consumed.get(key) ?? 0 : 0;
+			const id = edge.id ?? (key ? idsByKey[key]?.[index] : void 0);
+			if (!id) continue;
+			if (key) consumed.set(key, index + 1);
+			const position = parseEdgePosition(edge.pos);
+			const points = position.points.map((point) => flipY(point, graphHeight));
+			const label = parsePoint(edge.lp);
+			routes[id] = {
+				kind: "spline",
+				points,
+				startAnchor: position.startArrow ? flipY(position.startArrow, graphHeight) : null,
+				endAnchor: position.endArrow ? flipY(position.endArrow, graphHeight) : null,
+				labelPosition: label ? flipY(label, graphHeight) : null
+			};
+		}
+		return routes;
+	}
+	toDot(model) {
+		const { graphAttrs, nodeAttrs, edgeAttrs } = this.config;
+		const lines = [
+			"digraph G {",
+			`graph [${attrsToDot(graphAttrs)}];`,
+			`node [${attrsToDot(nodeAttrs)}];`,
+			`edge [${attrsToDot(edgeAttrs)}];`
+		];
+		for (const node of model.nodes) {
+			const attrs = {
+				...node.layout_attrs,
+				label: node.label ?? "",
+				shape: dotShape(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(`${quote(node.id)} [${attrsToDot(attrs)}];`);
+		}
+		for (const edge of model.edges) {
+			const attrs = {
+				...edge.layout_attrs,
+				id: edge.id,
+				label: edge.label ?? void 0,
+				color: edge.color ?? void 0
+			};
+			lines.push(`${quote(edge.source)} -> ${quote(edge.target)} [${attrsToDot(attrs)}];`);
+		}
+		lines.push(...this.rankConstraints(model.nodes), "}");
+		return lines.join("\n");
+	}
+	rankConstraints(nodes) {
+		const ranks = nodes.filter((node) => node.rank != null).reduce((acc, node) => {
+			const key = node.rank;
+			acc[key] ??= [];
+			acc[key].push(quote(node.id));
+			return acc;
+		}, {});
+		return Object.entries(ranks).map(([rank, ids]) => `{ rank=${["source", "sink"].includes(rank) ? rank : "same"}; ${(ids ?? []).join(" ")} }`);
+	}
+};
+//#endregion
+//#region src/components/ResourceView/Viewers/GraphFlow/layout/engine.ts
+const selectEngine = (visualization) => {
+	const config = visualization.layout_config;
+	switch (config?.type) {
+		case "graphviz":
+			if (!config.engine) throw new GraphError("Invalid Graphviz layout config.", ["Missing Graphviz layout engine."]);
+			return new GraphvizEngine({
+				engine: config.engine,
+				graphAttrs: config.graphAttrs ?? {},
+				nodeAttrs: config.nodeAttrs ?? {},
+				edgeAttrs: config.edgeAttrs ?? {}
+			});
+		case "elk": return new ElkEngine({ options: config.options ?? {} });
+		default: throw new GraphError("Invalid graph layout config.", ["Expected an ELK or Graphviz layout config from the backend."]);
+	}
+};
+//#endregion
+//#region src/components/ResourceView/Viewers/GraphFlow/model/buildModel.ts
+const requireNodeId = (node, index) => {
+	if (!node.id) throw new GraphError("Invalid graph node.", [`Node at index ${index} is missing an id.`]);
+	return {
+		...node,
+		id: node.id
+	};
+};
+const requireEdgeId = (edge, index) => {
+	if (!edge.id) throw new GraphError("Invalid graph edge.", [`Edge at index ${index} is missing an id.`]);
+	return {
+		...edge,
+		id: edge.id
+	};
+};
+const buildGraphModel = (visualization) => ({
+	nodes: (visualization.nodes ?? []).map(requireNodeId),
+	edges: (visualization.edges ?? []).map(requireEdgeId)
 });
+//#endregion
+//#region src/components/ResourceView/Viewers/GraphFlow/render/routeToPath.ts
 const buildPolylinePath = (points) => {
 	if (points.length < 2) return null;
 	return points.map((point, index) => `${index === 0 ? "M" : "L"} ${point.x},${point.y}`).join(" ");
@@ -479,643 +812,168 @@ 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}`;
+		const c1 = points[index];
+		const c2 = points[index + 1];
+		const anchor = points[index + 2];
+		if (!c1 || !c2 || !anchor) return null;
+		path += ` C ${c1.x},${c1.y} ${c2.x},${c2.y} ${anchor.x},${anchor.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(" ");
+const stitchAnchors = (body, points, startAnchor, endAnchor) => [
+	startAnchor && points[0] ? `M ${startAnchor.x},${startAnchor.y} L ${points[0].x},${points[0].y}` : null,
+	startAnchor ? body.replace(/^M [^C]+/, "") : body,
+	endAnchor ? `L ${endAnchor.x},${endAnchor.y}` : null
+].filter(Boolean).join(" ");
+const routeToPath = (route) => {
+	const { kind, points, startAnchor, endAnchor } = route;
+	if (kind === "spline") {
+		const spline = buildSplinePath(points);
+		if (spline) return stitchAnchors(spline, points, startAnchor, endAnchor);
+	}
 	return buildPolylinePath([
-		...startArrowPoint ? [startArrowPoint] : [],
+		...startAnchor ? [startAnchor] : [],
 		...points,
-		...endArrowPoint ? [endArrowPoint] : []
+		...endAnchor ? [endAnchor] : []
 	]);
 };
-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,
+const midpoint = (a, b) => ({
+	x: (a.x + b.x) / 2,
+	y: (a.y + b.y) / 2
+});
+const isDegenerate = (a, b) => Math.hypot(a.x - b.x, a.y - b.y) < 1;
+const straightEdgeLayout = (source, target) => ({
+	path: `M ${source.x},${source.y} L ${target.x},${target.y}`,
+	startPoint: source,
+	endPoint: target,
+	labelPosition: midpoint(source, target)
+});
+//#endregion
+//#region src/components/ResourceView/Viewers/GraphFlow/render/project.ts
+const projectToRenderModel = (model, layout) => {
+	const centers = nodeCenters(model.nodes, layout.positions);
+	return {
+		nodes: model.nodes.map((node) => ({
+			id: node.id,
+			type: "node",
+			position: layout.positions[node.id] ?? {
+				x: node.x ?? 0,
+				y: node.y ?? 0
+			},
+			data: { model: node }
+		})),
+		edges: model.edges.map((edge) => ({
 			id: edge.id,
-			label: edge.label ?? void 0,
-			color: edge.color ?? void 0
+			source: edge.source,
+			target: edge.target,
+			type: "graphflow",
+			data: {
+				model: edge,
+				layout: finalizeEdge(layout.routes[edge.id], centers[edge.source], centers[edge.target])
+			}
+		}))
+	};
+};
+const sizeOf = (node) => ({
+	width: node.width ?? 120,
+	height: node.height ?? 40
+});
+const nodeCenters = (nodes, positions) => {
+	const centers = {};
+	for (const node of nodes) {
+		const position = positions[node.id];
+		if (!position) continue;
+		const { width, height } = sizeOf(node);
+		centers[node.id] = {
+			x: position.x + width / 2,
+			y: position.y + height / 2
 		};
-		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;
+	return centers;
 };
-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 finalizeEdge = (route, sourceCenter, targetCenter) => {
+	if (route) {
+		const layout = routeToEdgeLayout(route);
+		if (layout) return layout;
+	}
+	if (sourceCenter && targetCenter && !isDegenerate(sourceCenter, targetCenter)) return straightEdgeLayout(sourceCenter, targetCenter);
+	return null;
 };
-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();
+const routeToEdgeLayout = (route) => {
+	const path = routeToPath(route);
+	if (!path) return null;
 	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)
+		path,
+		startPoint: route.startAnchor ?? route.points[0] ?? null,
+		endPoint: route.endAnchor ?? route.points.at(-1) ?? null,
+		labelPosition: route.labelPosition
 	};
 };
-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) => {
+//#region src/components/ResourceView/Viewers/GraphFlow/hooks/useGraphLayout.ts
+const prepare = (visualization) => {
 	try {
 		return {
-			model: buildGraphFlowModel(visualization),
-			buildError: null
+			model: buildGraphModel(visualization),
+			engine: selectEngine(visualization),
+			error: null
 		};
 	} catch (err) {
 		return {
 			model: null,
-			buildError: toGraphError(err)
+			engine: null,
+			error: 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 useGraphLayout = (visualization) => {
+	const { model, engine, error: prepareError } = useMemo(() => prepare(visualization), [visualization]);
 	const [nodes, setNodes] = useState([]);
 	const [edges, setEdges] = useState([]);
-	const [layoutReady, setLayoutReady] = useState(false);
-	const [layoutError, setLayoutError] = useState(null);
+	const [ready, setReady] = useState(false);
+	const [runError, setRunError] = useState(null);
 	useEffect(() => {
-		setLayoutError(null);
-		setNodes(model?.nodes ?? []);
-		setEdges(model?.edges ?? []);
-		setLayoutReady(!model || model.nodes.length === 0);
-	}, [model]);
-	useEffect(() => {
-		if (!model || buildError || layoutReady) return;
+		setRunError(null);
+		if (!model || !engine) {
+			setNodes([]);
+			setEdges([]);
+			setReady(true);
+			return;
+		}
+		if (model.nodes.length === 0) {
+			setNodes([]);
+			setEdges([]);
+			setReady(true);
+			return;
+		}
+		setReady(false);
 		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);
+		engine.run(model).then((result) => {
+			if (cancelled) return;
+			const projected = projectToRenderModel(model, result);
+			setNodes(projected.nodes);
+			setEdges(projected.edges);
+			setReady(true);
 		}, (err) => {
 			if (cancelled) return;
-			setLayoutError(toGraphError(err));
-			setLayoutReady(true);
+			setRunError(toGraphError(err));
+			setReady(true);
 		});
 		return () => {
 			cancelled = true;
 		};
-	}, [
-		model,
-		buildError,
-		layoutReady,
-		runElkLayout,
-		runGraphvizLayout
-	]);
+	}, [model, engine]);
 	const onNodesChange = useCallback((changes) => setNodes((current) => applyNodeChanges(changes, current)), []);
 	return {
 		nodes,
 		edges,
-		layoutReady,
-		error: buildError ?? layoutError,
+		ready,
+		error: prepareError ?? runError,
 		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%",
-				backgroundColor: color,
-				borderRadius: shape === "rectangle" ? 3 : 0,
-				clipPath,
-				display: "flex",
-				alignItems: "center",
-				justifyContent: "center",
-				overflow: "hidden"
-			},
-			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
-		}
-	});
-};
+//#region src/components/ResourceView/Viewers/GraphFlow/render/edgeArrows.tsx
 const colorToId = (color) => color.replace(/[^a-zA-Z0-9]/g, "");
 const ArrowMarker = ({ id, type, color, isStart }) => {
 	if (!type) return null;
@@ -1282,6 +1140,69 @@ const getMarkerIds = ({ color, startArrow, endArrow }) => {
 		endMarkerId: endArrow ? `arrow-end-${endArrow}-${colorKey}` : null
 	};
 };
+//#endregion
+//#region src/components/ResourceView/Viewers/GraphFlow/render/annotation.tsx
+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 })
+			})]
+		})]
+	});
+};
+//#endregion
+//#region src/components/ResourceView/Viewers/GraphFlow/render/edgeLabels.tsx
 const EdgeLabel = ({ color, label, hasAnnotation, x, y }) => /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsxs("div", {
 	style: {
 		position: "absolute",
@@ -1316,8 +1237,6 @@ const EdgeEndLabel = ({ label, x, y }) => /* @__PURE__ */ jsx(EdgeLabelRenderer,
 	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;
@@ -1328,40 +1247,82 @@ const endLabelPositions = (start, end) => {
 	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
+			x: start.x + ux * 22 + px * 9,
+			y: start.y + uy * 22 + py * 9
 		},
 		end: {
-			x: end.x - ux * END_LABEL_INSET + px * END_LABEL_PERP,
-			y: end.y - uy * END_LABEL_INSET + py * END_LABEL_PERP
+			x: end.x - ux * 22 + px * 9,
+			y: end.y - uy * 22 + py * 9
 		}
 	};
 };
-const GraphFlowEdge = memo((props) => {
-	const { id, source, target, data, sourceX, sourceY, targetX, targetY } = props;
-	const sourceNode = useInternalNode(source);
-	const targetNode = useInternalNode(target);
+//#endregion
+//#region src/components/ResourceView/Viewers/GraphFlow/render/Edge.tsx
+const centerOf = ({ sourceX, sourceY, targetX, targetY }) => ({
+	x: (sourceX + targetX) / 2,
+	y: (sourceY + targetY) / 2
+});
+const selfLoopPath = (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 bezierFallback = (edge) => {
+	const [path, labelX, labelY] = getBezierPath(edge);
+	return {
+		path,
+		labelX,
+		labelY
+	};
+};
+const resolvePath = (edge, layout, sourceNode) => {
+	if (layout?.path) {
+		const center = centerOf(edge);
+		return {
+			path: layout.path,
+			labelX: layout.labelPosition?.x ?? center.x,
+			labelY: layout.labelPosition?.y ?? center.y
+		};
+	}
+	if (edge.source === edge.target && sourceNode) return selfLoopPath(sourceNode);
+	return bezierFallback(edge);
+};
+const GraphFlowEdge = memo((props) => {
+	const { id, source, data, sourceX, sourceY, targetX, targetY } = props;
+	const sourceNode = useInternalNode(source);
 	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 { model, layout } = data;
+	const color = model.color ?? "#555";
+	const dashed = model.style?.dashed ?? false;
+	const bold = model.style?.bold ?? false;
+	const startArrow = model.start_arrow ?? null;
+	const endArrow = model.end_arrow ?? null;
 	const { startMarkerId, endMarkerId } = getMarkerIds({
 		color,
 		startArrow,
 		endArrow
 	});
-	const edgePath = resolveEdgePath({
-		edge: props,
-		sourceNode,
-		targetNode
-	});
-	const startPos = data.startPoint ?? {
+	const resolved = resolvePath(props, layout, sourceNode);
+	const startPos = layout?.startPoint ?? {
 		x: sourceX,
 		y: sourceY
 	};
-	const endPos = data.endPoint ?? {
+	const endPos = layout?.endPoint ?? {
 		x: targetX,
 		y: targetY
 	};
@@ -1379,7 +1340,7 @@ const GraphFlowEdge = memo((props) => {
 		})] }),
 		/* @__PURE__ */ jsx(BaseEdge, {
 			id,
-			path: edgePath.path,
+			path: resolved.path,
 			...endMarkerId ? { markerEnd: `url(#${endMarkerId})` } : {},
 			...startMarkerId ? { markerStart: `url(#${startMarkerId})` } : {},
 			style: {
@@ -1388,21 +1349,21 @@ const GraphFlowEdge = memo((props) => {
 				strokeDasharray: dashed ? "6 3" : void 0
 			}
 		}),
-		(data.label || data.annotation) && /* @__PURE__ */ jsx(EdgeLabel, {
+		(model.label || model.annotation) && /* @__PURE__ */ jsx(EdgeLabel, {
 			color,
-			label: data.label,
-			hasAnnotation: Boolean(data.annotation),
-			x: edgePath.labelX,
-			y: edgePath.labelY
+			label: model.label,
+			hasAnnotation: Boolean(model.annotation),
+			x: resolved.labelX,
+			y: resolved.labelY
 		}),
-		(data.start_label || data.end_label) && (() => {
+		(model.start_label || model.end_label) && (() => {
 			const positions = endLabelPositions(startPos, endPos);
-			return /* @__PURE__ */ jsxs(Fragment, { children: [data.start_label && /* @__PURE__ */ jsx(EdgeEndLabel, {
-				label: data.start_label,
+			return /* @__PURE__ */ jsxs(Fragment, { children: [model.start_label && /* @__PURE__ */ jsx(EdgeEndLabel, {
+				label: model.start_label,
 				x: positions.start.x,
 				y: positions.start.y
-			}), data.end_label && /* @__PURE__ */ jsx(EdgeEndLabel, {
-				label: data.end_label,
+			}), model.end_label && /* @__PURE__ */ jsx(EdgeEndLabel, {
+				label: model.end_label,
 				x: positions.end.x,
 				y: positions.end.y
 			})] });
@@ -1411,201 +1372,242 @@ const GraphFlowEdge = memo((props) => {
 });
 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,
+//#region src/components/ResourceView/Viewers/GraphFlow/render/nodeShapes.tsx
+const InnerSymbol = ({ symbol, color }) => {
+	if (symbol === "triangle") return /* @__PURE__ */ jsx("div", { style: {
 		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;
-}
+		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%",
+				backgroundColor: color,
+				borderRadius: shape === "rectangle" ? 3 : 0,
+				clipPath,
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				overflow: "hidden"
+			},
+			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"
+		} })]
+	});
+};
 //#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,
+//#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 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 GraphFlowNode = memo(({ data }) => {
+	const { shape, label, color, border_color, annotation, label_pos, width, height, style } = data.model;
+	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: {
-			width: `${imageWidth}px`,
-			height: `${imageHeight}px`,
-			transform: `translate(${x}px, ${y}px) scale(${zoom})`
+			position: "relative",
+			width: shape === "circle" ? width ?? void 0 : void 0
 		},
-		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]
+		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 })
+		]
 	});
-	pdf.addImage(dataUrl, "PNG", 0, 0, imageWidth, imageHeight);
-	pdf.save("graph.pdf");
-}
+});
+GraphFlowNode.displayName = "GraphFlowNode";
 //#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 { nodes, edges, ready, error, onNodesChange } = useGraphLayout(visualization);
+	const { fitBounds, getNodes, getEdges } = useReactFlow();
 	const wrapperRef = useRef(null);
+	const { downloadPng, downloadSvg, downloadPdf } = useGraphExport(wrapperRef);
 	const fitViewWithEdges = useCallback(() => {
 		fitBounds(computeAutoFitBounds(getNodes(), getEdges()), { padding: FIT_VIEW_PADDING });
 	}, [
@@ -1613,19 +1615,16 @@ const GraphFlowCanvas = ({ visualization, isPreview, menuItems }) => {
 		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) {
+		if (!ready) {
 			wasReadyRef.current = false;
 			return;
 		}
 		if (wasReadyRef.current) return;
 		wasReadyRef.current = true;
 		fitViewWithEdges();
-	}, [layoutReady, fitViewWithEdges]);
+	}, [ready, fitViewWithEdges]);
 	if (error) return /* @__PURE__ */ jsx(Stack, {
 		h: "100%",
 		justify: "center",
@@ -1641,16 +1640,16 @@ const GraphFlowCanvas = ({ visualization, isPreview, menuItems }) => {
 		})
 	});
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(LoadingOverlay, {
-		visible: !layoutReady,
+		visible: !ready,
 		zIndex: 10
 	}), /* @__PURE__ */ jsx("div", {
 		ref: wrapperRef,
 		style: {
 			width: "100%",
 			height: "100%",
-			opacity: layoutReady ? 1 : 0
+			opacity: ready ? 1 : 0
 		},
-		children: /* @__PURE__ */ jsx(ReactFlow, {
+		children: /* @__PURE__ */ jsxs(ReactFlow, {
 			nodes,
 			edges,
 			nodeTypes,
@@ -1663,50 +1662,18 @@ const GraphFlowCanvas = ({ visualization, isPreview, menuItems }) => {
 			panOnDrag: !isPreview,
 			minZoom: .05,
 			maxZoom: 3,
-			children: !isPreview && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Background, {
+			children: [!isPreview && /* @__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
-					}))
-				]
-			})] })
+			}), /* @__PURE__ */ jsx(GraphControls, {
+				isPreview,
+				onFitView: fitViewWithEdges,
+				onDownloadPng: downloadPng,
+				onDownloadSvg: downloadSvg,
+				onDownloadPdf: downloadPdf,
+				menuItems
+			})]
 		})
 	})] });
 };