@eventcatalog/visualiser 4.0.0-beta.0 → 4.0.1

package/dist/index.js

@@ -108,9 +108,9 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/NodeGraph.tsx
-var import_react89 = require("react");
+var import_react90 = require("react");
 var import_react_dom = require("react-dom");
-var import_react90 = require("@xyflow/react");
+var import_react91 = require("@xyflow/react");
 var import_lucide_react37 = require("lucide-react");
 var DropdownMenu2 = __toESM(require("@radix-ui/react-dropdown-menu"));
 var import_html_to_image = require("html-to-image");
@@ -9959,9 +9959,109 @@ var NodeContextMenu_default = (0, import_react85.memo)(function NodeContextMenu(
   ] });
 });
 
+// src/utils/export-image.ts
+var import_react86 = require("@xyflow/react");
+var MIN_IMAGE_WIDTH = 1024;
+var MIN_IMAGE_HEIGHT = 768;
+var EXPORT_PADDING = 40;
+function getExportImageDimensions(nodesBounds) {
+  const paddedBounds = {
+    x: nodesBounds.x - EXPORT_PADDING,
+    y: nodesBounds.y - EXPORT_PADDING,
+    width: nodesBounds.width + EXPORT_PADDING * 2,
+    height: nodesBounds.height + EXPORT_PADDING * 2
+  };
+  const width = Math.max(MIN_IMAGE_WIDTH, Math.ceil(paddedBounds.width));
+  const height = Math.max(MIN_IMAGE_HEIGHT, Math.ceil(paddedBounds.height));
+  const viewport = (0, import_react86.getViewportForBounds)(paddedBounds, width, height, 0.5, 2, 0);
+  return { width, height, viewport };
+}
+function extractEcVarNames(cssText) {
+  return Array.from(new Set(cssText.match(/--ec-[a-z0-9-]+/g) ?? []));
+}
+function buildExportCss(themeVars) {
+  const varDeclarations = Object.entries(themeVars).map(([name, value]) => `${name}: ${value};`).join(" ");
+  return [
+    // Applied to every element so the variables reach the cloned SVG subtree
+    `* { ${varDeclarations} }`,
+    // Mirrors .react-flow__edge-path in styles.css, which is lost in the clone
+    `.react-flow__edge-path { stroke: var(--ec-edge-stroke, #6b7280); stroke-width: 1.5; fill: none; }`
+  ].join("\n");
+}
+function collectThemeCssVars(scope) {
+  const names = /* @__PURE__ */ new Set();
+  for (const sheet of Array.from(document.styleSheets)) {
+    let rules;
+    try {
+      rules = sheet.cssRules;
+    } catch {
+      continue;
+    }
+    for (const rule of Array.from(rules)) {
+      for (const name of extractEcVarNames(rule.cssText)) {
+        names.add(name);
+      }
+    }
+  }
+  const computed = window.getComputedStyle(scope);
+  const vars = {};
+  for (const name of names) {
+    const value = computed.getPropertyValue(name).trim();
+    if (value) vars[name] = value;
+  }
+  return vars;
+}
+var SVG_EXPORT_STYLE_PROPERTIES = [
+  "fill",
+  "fill-opacity",
+  "stroke",
+  "stroke-width",
+  "stroke-dasharray",
+  "stroke-linecap",
+  "stroke-linejoin",
+  "opacity",
+  "font-family",
+  "font-size",
+  "font-weight",
+  "letter-spacing",
+  "text-anchor",
+  "dominant-baseline"
+];
+function inlineSvgComputedStyles(viewport) {
+  const restores = [];
+  const svgElements = viewport.querySelectorAll("svg, svg *");
+  svgElements.forEach((element) => {
+    if (!(element instanceof SVGElement)) return;
+    const computed = window.getComputedStyle(element);
+    const originalStyle = element.getAttribute("style");
+    for (const property of SVG_EXPORT_STYLE_PROPERTIES) {
+      const value = computed.getPropertyValue(property);
+      if (value) element.style.setProperty(property, value);
+    }
+    restores.push(() => {
+      if (originalStyle === null) {
+        element.removeAttribute("style");
+      } else {
+        element.setAttribute("style", originalStyle);
+      }
+    });
+  });
+  return () => restores.forEach((restore) => restore());
+}
+function injectExportStyles(viewport) {
+  const styleElement = document.createElement("style");
+  styleElement.textContent = buildExportCss(collectThemeCssVars(viewport));
+  viewport.appendChild(styleElement);
+  const restoreSvgStyles = inlineSvgComputedStyles(viewport);
+  return () => {
+    restoreSvgStyles();
+    styleElement.remove();
+  };
+}
+
 // src/utils/layout.ts
 var import_dagre2 = __toESM(require("dagre"));
-var import_react86 = require("@xyflow/react");
+var import_react87 = require("@xyflow/react");
 var GROUP_HEADER_HEIGHT = 44;
 var GROUP_CONTENT_PADDING_TOP = 50;
 var GROUP_CONTENT_PADDING_BOTTOM = 30;
@@ -10402,7 +10502,7 @@ function layoutGraph(nodes, edges, options = {}, style) {
     const isCalls = edge.type === "calls";
     const isBidirectional = edge.type === "reads-writes";
     const arrowMarker = {
-      type: import_react86.MarkerType.ArrowClosed,
+      type: import_react87.MarkerType.ArrowClosed,
       width: 20,
       height: 20,
       color: "rgb(var(--ec-page-text-muted))"
@@ -10460,7 +10560,7 @@ function flatLayout(nodes, edges, graphOpts, nodeSize, style) {
     const isCalls = edge.type === "calls";
     const isBidirectional = edge.type === "reads-writes";
     const arrowMarker = {
-      type: import_react86.MarkerType.ArrowClosed,
+      type: import_react87.MarkerType.ArrowClosed,
       width: 20,
       height: 20,
       color: "rgb(var(--ec-page-text-muted))"
@@ -10594,9 +10694,9 @@ var buildMessageGroupExpansionNodes = ({
 };
 
 // src/components/NotesToolbarButton.tsx
-var import_react87 = require("react");
+var import_react88 = require("react");
 var import_lucide_react36 = require("lucide-react");
-var import_react88 = require("@xyflow/react");
+var import_react89 = require("@xyflow/react");
 var Dialog4 = __toESM(require("@radix-ui/react-dialog"));
 var import_jsx_runtime48 = require("react/jsx-runtime");
 var NODE_TYPE_META = {
@@ -10859,12 +10959,12 @@ function AllNotesModal({
   onClose,
   nodes
 }) {
-  const { setCenter, getZoom } = (0, import_react88.useReactFlow)();
-  const [selectedIdx, setSelectedIdx] = (0, import_react87.useState)(0);
+  const { setCenter, getZoom } = (0, import_react89.useReactFlow)();
+  const [selectedIdx, setSelectedIdx] = (0, import_react88.useState)(0);
   const portalContainer = usePortalContainer();
   const totalNotes = noteGroups.reduce((sum, g) => sum + g.notes.length, 0);
   const selected = noteGroups[selectedIdx] || noteGroups[0];
-  const handleNavigate = (0, import_react87.useCallback)(
+  const handleNavigate = (0, import_react88.useCallback)(
     (nodeId) => {
       const node = nodes.find((n) => n.id === nodeId);
       if (!node) return;
@@ -11348,13 +11448,13 @@ var LEGEND_ICONS = {
   field: { Icon: import_lucide_react37.Box, colorClass: "text-cyan-600" }
 };
 var getLegendIcon = (key) => LEGEND_ICONS[key];
-var LegendPanel = (0, import_react89.memo)(function LegendPanel2({
+var LegendPanel = (0, import_react90.memo)(function LegendPanel2({
   legend,
   showMinimap,
   onLegendClick
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-    import_react90.Panel,
+    import_react91.Panel,
     {
       position: "bottom-right",
       style: showMinimap ? LEGEND_PANEL_STYLE_WITH_MINIMAP : void 0,
@@ -11395,7 +11495,7 @@ var GROUP_EDGE_STYLE = {
   stroke: "var(--ec-edge-stroke, #6b7280)"
 };
 var GROUP_EDGE_MARKER = {
-  type: import_react90.MarkerType.ArrowClosed,
+  type: import_react91.MarkerType.ArrowClosed,
   width: 20,
   height: 20
 };
@@ -11492,14 +11592,14 @@ var NodeGraphBuilder = ({
   onSaveLayout,
   onResetLayout
 }) => {
-  (0, import_react89.useEffect)(() => {
+  (0, import_react90.useEffect)(() => {
     if (onBuildUrl) {
       setBuildUrlFn(onBuildUrl);
     }
   }, []);
-  const nodeTypes = (0, import_react89.useMemo)(() => {
+  const nodeTypes = (0, import_react90.useMemo)(() => {
     const wrapWithContextMenu = (Component) => {
-      const Wrapped = (0, import_react89.memo)((props) => {
+      const Wrapped = (0, import_react90.memo)((props) => {
         const items = props.data?.contextMenu;
         if (!items?.length) return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Component, { ...props });
         return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(NodeContextMenu_default, { items, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Component, { ...props }) });
@@ -11544,14 +11644,14 @@ var NodeGraphBuilder = ({
       "data-products": wrapWithContextMenu(DataProduct_default),
       group: GroupNode_default,
       "system-group": SystemGroupNode_default,
-      note: (0, import_react89.memo)((props) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(NoteNode_default, { ...props, readOnly: true })),
+      note: (0, import_react90.memo)((props) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(NoteNode_default, { ...props, readOnly: true })),
       field: wrapWithContextMenu(FieldNode_default),
       messageGroup: MessageGroupNode_default,
       messageGroupExpanded: MessageGroupExpandedNode_default,
       flowExpanded: FlowExpandedNode_default
     };
   }, []);
-  const edgeTypes2 = (0, import_react89.useMemo)(
+  const edgeTypes2 = (0, import_react90.useMemo)(
     () => ({
       animated: AnimatedMessageEdge_default,
       multiline: MultilineEdgeLabel_default,
@@ -11559,47 +11659,48 @@ var NodeGraphBuilder = ({
     }),
     []
   );
-  const [nodes, setNodes, onNodesChange] = (0, import_react90.useNodesState)(initialNodes);
-  const [edges, setEdges, onEdgesChange] = (0, import_react90.useEdgesState)(initialEdges);
-  const { fitView, getNodes, getIntersectingNodes, getZoom, setCenter } = (0, import_react90.useReactFlow)();
-  (0, import_react89.useEffect)(() => {
+  const [nodes, setNodes, onNodesChange] = (0, import_react91.useNodesState)(initialNodes);
+  const [edges, setEdges, onEdgesChange] = (0, import_react91.useEdgesState)(initialEdges);
+  const { fitView, getNodes, getIntersectingNodes, getZoom, setCenter } = (0, import_react91.useReactFlow)();
+  const storeApi = (0, import_react91.useStoreApi)();
+  (0, import_react90.useEffect)(() => {
     setNodes(initialNodes);
     setEdges(initialEdges);
     requestAnimationFrame(() => {
       fitView({ duration: 300, padding: 0.2 });
     });
   }, [initialNodes, initialEdges, setNodes, setEdges, fitView]);
-  const [animateMessages, setAnimateMessages] = (0, import_react89.useState)(true);
-  const [_activeStepIndex, _setActiveStepIndex] = (0, import_react89.useState)(null);
-  const [_isFullscreen, _setIsFullscreen] = (0, import_react89.useState)(false);
-  const [isShareModalOpen, setIsShareModalOpen] = (0, import_react89.useState)(false);
-  const [shareUrlCopySuccess, setShareUrlCopySuccess] = (0, import_react89.useState)(false);
-  const [isMermaidView, setIsMermaidView] = (0, import_react89.useState)(false);
-  const [showMinimap, setShowMinimap] = (0, import_react89.useState)(false);
-  const [hasLayoutChanges, setHasLayoutChanges] = (0, import_react89.useState)(false);
-  const [isSavingLayout, setIsSavingLayout] = (0, import_react89.useState)(false);
-  const initialPositionsRef = (0, import_react89.useRef)(
+  const [animateMessages, setAnimateMessages] = (0, import_react90.useState)(true);
+  const [_activeStepIndex, _setActiveStepIndex] = (0, import_react90.useState)(null);
+  const [_isFullscreen, _setIsFullscreen] = (0, import_react90.useState)(false);
+  const [isShareModalOpen, setIsShareModalOpen] = (0, import_react90.useState)(false);
+  const [shareUrlCopySuccess, setShareUrlCopySuccess] = (0, import_react90.useState)(false);
+  const [isMermaidView, setIsMermaidView] = (0, import_react90.useState)(false);
+  const [showMinimap, setShowMinimap] = (0, import_react90.useState)(false);
+  const [hasLayoutChanges, setHasLayoutChanges] = (0, import_react90.useState)(false);
+  const [isSavingLayout, setIsSavingLayout] = (0, import_react90.useState)(false);
+  const initialPositionsRef = (0, import_react90.useRef)(
     {}
   );
-  const [focusModeOpen, setFocusModeOpen] = (0, import_react89.useState)(false);
-  const [focusedNodeId, setFocusedNodeId] = (0, import_react89.useState)(null);
-  const [isNotesModalOpen, setIsNotesModalOpen] = (0, import_react89.useState)(false);
-  const openNotesModal = (0, import_react89.useCallback)(() => setIsNotesModalOpen(true), []);
-  const interactionCountRef = (0, import_react89.useRef)(0);
-  const startInteraction = (0, import_react89.useCallback)(() => {
+  const [focusModeOpen, setFocusModeOpen] = (0, import_react90.useState)(false);
+  const [focusedNodeId, setFocusedNodeId] = (0, import_react90.useState)(null);
+  const [isNotesModalOpen, setIsNotesModalOpen] = (0, import_react90.useState)(false);
+  const openNotesModal = (0, import_react90.useCallback)(() => setIsNotesModalOpen(true), []);
+  const interactionCountRef = (0, import_react90.useRef)(0);
+  const startInteraction = (0, import_react90.useCallback)(() => {
     interactionCountRef.current += 1;
     if (interactionCountRef.current === 1) {
       reactFlowWrapperRef.current?.classList.add("ec-interaction-active");
     }
   }, []);
-  const endInteraction = (0, import_react89.useCallback)(() => {
+  const endInteraction = (0, import_react90.useCallback)(() => {
     interactionCountRef.current = Math.max(0, interactionCountRef.current - 1);
     if (interactionCountRef.current === 0) {
       reactFlowWrapperRef.current?.classList.remove("ec-interaction-active");
     }
   }, []);
-  const hoveredEdgeNodesRef = (0, import_react89.useRef)([]);
-  const handleEdgeMouseEnter = (0, import_react89.useCallback)(
+  const hoveredEdgeNodesRef = (0, import_react90.useRef)([]);
+  const handleEdgeMouseEnter = (0, import_react90.useCallback)(
     (_, edge) => {
       const wrapper = reactFlowWrapperRef.current;
       if (!wrapper) return;
@@ -11611,15 +11712,15 @@ var NodeGraphBuilder = ({
     },
     []
   );
-  const handleEdgeMouseLeave = (0, import_react89.useCallback)(() => {
+  const handleEdgeMouseLeave = (0, import_react90.useCallback)(() => {
     hoveredEdgeNodesRef.current.forEach(
       (el) => el.classList.remove("ec-edge-hover-node")
     );
     hoveredEdgeNodesRef.current = [];
   }, []);
-  const hoveredNodeEdgesRef = (0, import_react89.useRef)([]);
-  const hoveredNodePeersRef = (0, import_react89.useRef)([]);
-  const handleNodeMouseEnter = (0, import_react89.useCallback)(
+  const hoveredNodeEdgesRef = (0, import_react90.useRef)([]);
+  const hoveredNodePeersRef = (0, import_react90.useRef)([]);
+  const handleNodeMouseEnter = (0, import_react90.useCallback)(
     (_, node) => {
       const wrapper = reactFlowWrapperRef.current;
       if (!wrapper) return;
@@ -11648,7 +11749,7 @@ var NodeGraphBuilder = ({
     },
     []
   );
-  const handleNodeMouseLeave = (0, import_react89.useCallback)(() => {
+  const handleNodeMouseLeave = (0, import_react90.useCallback)(() => {
     hoveredNodeEdgesRef.current.forEach(
       (el) => el.classList.remove("ec-node-hover-edge")
     );
@@ -11658,7 +11759,7 @@ var NodeGraphBuilder = ({
     );
     hoveredNodePeersRef.current = [];
   }, []);
-  const hasChannels = (0, import_react89.useMemo)(
+  const hasChannels = (0, import_react90.useMemo)(
     () => initialNodes.some((node) => node.type === "channels"),
     [initialNodes]
   );
@@ -11669,39 +11770,39 @@ var NodeGraphBuilder = ({
     setEdges,
     skipProcessing: !hasChannels
   });
-  const searchRef = (0, import_react89.useRef)(null);
-  const reactFlowWrapperRef = (0, import_react89.useRef)(null);
-  const scrollableContainerRef = (0, import_react89.useRef)(null);
-  const nodesRef = (0, import_react89.useRef)(nodes);
+  const searchRef = (0, import_react90.useRef)(null);
+  const reactFlowWrapperRef = (0, import_react90.useRef)(null);
+  const scrollableContainerRef = (0, import_react90.useRef)(null);
+  const nodesRef = (0, import_react90.useRef)(nodes);
   nodesRef.current = nodes;
-  const edgesRef = (0, import_react89.useRef)(edges);
+  const edgesRef = (0, import_react90.useRef)(edges);
   edgesRef.current = edges;
-  const hideChannelsRef = (0, import_react89.useRef)(hideChannels);
+  const hideChannelsRef = (0, import_react90.useRef)(hideChannels);
   hideChannelsRef.current = hideChannels;
-  const wrapperNodeIds = (0, import_react89.useMemo)(() => {
+  const wrapperNodeIds = (0, import_react90.useMemo)(() => {
     const ids = /* @__PURE__ */ new Set();
     nodes.forEach((n) => {
       if (isExpandedWrapper(n.type)) ids.add(n.id);
     });
     return ids;
   }, [nodes]);
-  const walkthroughNodes = (0, import_react89.useMemo)(
+  const walkthroughNodes = (0, import_react90.useMemo)(
     () => wrapperNodeIds.size === 0 ? nodes : nodes.filter((n) => !wrapperNodeIds.has(n.id)),
     [nodes, wrapperNodeIds]
   );
-  const walkthroughEdges = (0, import_react89.useMemo)(
+  const walkthroughEdges = (0, import_react90.useMemo)(
     () => wrapperNodeIds.size === 0 ? edges : edges.filter(
       (e) => !wrapperNodeIds.has(e.source) && !wrapperNodeIds.has(e.target)
     ),
     [edges, wrapperNodeIds]
   );
-  const animateLayout = (0, import_react89.useCallback)(() => {
+  const animateLayout = (0, import_react90.useCallback)(() => {
     const wrapper = reactFlowWrapperRef.current;
     if (!wrapper) return;
     wrapper.classList.add("ec-animating-layout");
     setTimeout(() => wrapper.classList.remove("ec-animating-layout"), 400);
   }, []);
-  const relayoutGraph = (0, import_react89.useCallback)(
+  const relayoutGraph = (0, import_react90.useCallback)(
     (nextNodes, nextEdges, anchor) => {
       const g = new import_dagre3.default.graphlib.Graph({ compound: true });
       g.setGraph({ rankdir: "LR", ranksep: 300, nodesep: 50 });
@@ -11773,7 +11874,7 @@ var NodeGraphBuilder = ({
     },
     []
   );
-  const makeRoomForRenderedExpandedGroup = (0, import_react89.useCallback)(
+  const makeRoomForRenderedExpandedGroup = (0, import_react90.useCallback)(
     (groupNodeId, groupBounds) => {
       const padding = 80;
       const protectedBounds = {
@@ -11802,7 +11903,7 @@ var NodeGraphBuilder = ({
     },
     [getIntersectingNodes, setNodes]
   );
-  const layoutSubFlowChildren = (0, import_react89.useCallback)(
+  const layoutSubFlowChildren = (0, import_react90.useCallback)(
     (children, edges2, sizeOf, opts) => {
       const { padding, headerH, fallbackW = 240, fallbackH = 120 } = opts;
       const g = new import_dagre3.default.graphlib.Graph();
@@ -11852,7 +11953,7 @@ var NodeGraphBuilder = ({
     },
     []
   );
-  const handleCollapseGroup = (0, import_react89.useCallback)(
+  const handleCollapseGroup = (0, import_react90.useCallback)(
     (e) => {
       const target = e.target;
       const collapseBtn = target.closest(
@@ -11929,7 +12030,7 @@ var NodeGraphBuilder = ({
       animateLayout
     ]
   );
-  (0, import_react89.useEffect)(() => {
+  (0, import_react90.useEffect)(() => {
     if (isDevMode && initialNodes.length > 0) {
       const positions = {};
       initialNodes.forEach((node) => {
@@ -11938,7 +12039,7 @@ var NodeGraphBuilder = ({
       initialPositionsRef.current = positions;
     }
   }, [isDevMode, initialNodes]);
-  const checkForLayoutChanges = (0, import_react89.useCallback)(() => {
+  const checkForLayoutChanges = (0, import_react90.useCallback)(() => {
     if (!isDevMode) return;
     const initial = initialPositionsRef.current;
     if (Object.keys(initial).length === 0) return;
@@ -11948,7 +12049,7 @@ var NodeGraphBuilder = ({
     });
     setHasLayoutChanges(hasChanges);
   }, [isDevMode]);
-  const handleNodesChange = (0, import_react89.useCallback)(
+  const handleNodesChange = (0, import_react90.useCallback)(
     (changes) => {
       onNodesChange(changes);
       const hasDragEnd = changes.some(
@@ -11960,7 +12061,7 @@ var NodeGraphBuilder = ({
     },
     [onNodesChange, checkForLayoutChanges]
   );
-  const resetNodesAndEdges = (0, import_react89.useCallback)(() => {
+  const resetNodesAndEdges = (0, import_react90.useCallback)(() => {
     setNodes(
       (nds) => nds.map((node) => {
         node.style = { ...node.style, opacity: 1 };
@@ -11979,7 +12080,7 @@ var NodeGraphBuilder = ({
       })
     );
   }, [setNodes, setEdges, animateMessages]);
-  (0, import_react89.useEffect)(() => {
+  (0, import_react90.useEffect)(() => {
     if (!focusNodeId) return;
     const targetNode = nodesRef.current.find((node) => node.id === focusNodeId);
     if (!targetNode) return;
@@ -11997,13 +12098,13 @@ var NodeGraphBuilder = ({
       });
     });
   }, [focusNodeId, focusRequestId, fitView, setNodes]);
-  (0, import_react89.useEffect)(() => {
+  (0, import_react90.useEffect)(() => {
     if (fitRequestId == null) return;
     requestAnimationFrame(() => {
       fitView({ duration: 400, padding: 0.2 });
     });
   }, [fitRequestId, fitView]);
-  const handleNodeClick = (0, import_react89.useCallback)(
+  const handleNodeClick = (0, import_react90.useCallback)(
     (_, node) => {
       if (onNodeClick) {
         onNodeClick(node);
@@ -12402,7 +12503,7 @@ var NodeGraphBuilder = ({
       setCenter
     ]
   );
-  const toggleAnimateMessages = (0, import_react89.useCallback)(() => {
+  const toggleAnimateMessages = (0, import_react90.useCallback)(() => {
     setAnimateMessages((prev) => {
       const next = !prev;
       localStorage.setItem(
@@ -12412,10 +12513,10 @@ var NodeGraphBuilder = ({
       return next;
     });
   }, []);
-  const handleFitView = (0, import_react89.useCallback)(() => {
+  const handleFitView = (0, import_react90.useCallback)(() => {
     fitView({ duration: 400, padding: 0.2 });
   }, [fitView]);
-  (0, import_react89.useEffect)(() => {
+  (0, import_react90.useEffect)(() => {
     if (disableMessageAnimation) {
       setAnimateMessages(false);
       return;
@@ -12441,7 +12542,7 @@ var NodeGraphBuilder = ({
       }
     }
   }, [animated, disableMessageAnimation, initialNodes.length]);
-  (0, import_react89.useEffect)(() => {
+  (0, import_react90.useEffect)(() => {
     setEdges(
       (eds) => eds.map((edge) => {
         const preservesOwnRenderer = edge.type === "flow-edge" || edge.type === "multiline" || edge.type === "default" || edge.type === "step" || edge.type === "smoothstep" || edge.data?.animated === false;
@@ -12458,12 +12559,12 @@ var NodeGraphBuilder = ({
       })
     );
   }, [animateMessages]);
-  (0, import_react89.useEffect)(() => {
+  (0, import_react90.useEffect)(() => {
     setTimeout(() => {
       fitView({ duration: 800 });
     }, 150);
   }, []);
-  const generateMermaidCode = (0, import_react89.useCallback)(() => {
+  const generateMermaidCode = (0, import_react90.useCallback)(() => {
     try {
       return convertToMermaid(nodesRef.current, edgesRef.current, {
         includeStyles: true,
@@ -12474,7 +12575,7 @@ var NodeGraphBuilder = ({
       return "";
     }
   }, []);
-  (0, import_react89.useEffect)(() => {
+  (0, import_react90.useEffect)(() => {
     if (zoomOnScroll) return;
     const findScrollableContainer = () => {
       const selectors = [
@@ -12519,34 +12620,34 @@ var NodeGraphBuilder = ({
       };
     }
   }, [zoomOnScroll]);
-  const handlePaneClick = (0, import_react89.useCallback)(() => {
+  const handlePaneClick = (0, import_react90.useCallback)(() => {
     searchRef.current?.hideSuggestions();
     resetNodesAndEdges();
     fitView({ duration: 800 });
   }, [resetNodesAndEdges, fitView]);
-  const handleNodeSelect = (0, import_react89.useCallback)(
+  const handleNodeSelect = (0, import_react90.useCallback)(
     (node) => {
       handleNodeClick(null, node);
     },
     [handleNodeClick]
   );
-  const handleSearchClear = (0, import_react89.useCallback)(() => {
+  const handleSearchClear = (0, import_react90.useCallback)(() => {
     resetNodesAndEdges();
     fitView({ duration: 800 });
   }, [resetNodesAndEdges, fitView]);
-  const downloadImage = (0, import_react89.useCallback)((dataUrl, filename) => {
+  const downloadImage = (0, import_react90.useCallback)((dataUrl, filename) => {
     const a = document.createElement("a");
     a.setAttribute("download", `${filename || "eventcatalog"}.png`);
     a.setAttribute("href", dataUrl);
     a.click();
   }, []);
-  const openStudioModal = (0, import_react89.useCallback)(() => {
+  const openStudioModal = (0, import_react90.useCallback)(() => {
     setIsStudioModalOpen(true);
   }, [setIsStudioModalOpen]);
-  const openChat = (0, import_react89.useCallback)(() => {
+  const openChat = (0, import_react90.useCallback)(() => {
     window.dispatchEvent(new CustomEvent("eventcatalog:open-chat"));
   }, []);
-  const handleSaveLayout = (0, import_react89.useCallback)(async () => {
+  const handleSaveLayout = (0, import_react90.useCallback)(async () => {
     if (!resourceKey || !onSaveLayout) return false;
     const positions = {};
     nodesRef.current.forEach((node) => {
@@ -12557,11 +12658,11 @@ var NodeGraphBuilder = ({
     });
     return await onSaveLayout(resourceKey, positions);
   }, [resourceKey, onSaveLayout]);
-  const handleResetLayout = (0, import_react89.useCallback)(async () => {
+  const handleResetLayout = (0, import_react90.useCallback)(async () => {
     if (!resourceKey || !onResetLayout) return false;
     return await onResetLayout(resourceKey);
   }, [resourceKey, onResetLayout]);
-  const handleQuickSaveLayout = (0, import_react89.useCallback)(async () => {
+  const handleQuickSaveLayout = (0, import_react90.useCallback)(async () => {
     setIsSavingLayout(true);
     const success = await handleSaveLayout();
     setIsSavingLayout(false);
@@ -12574,17 +12675,17 @@ var NodeGraphBuilder = ({
       setHasLayoutChanges(false);
     }
   }, [handleSaveLayout]);
-  const handleCopyArchitectureCode = (0, import_react89.useCallback)(async () => {
+  const handleCopyArchitectureCode = (0, import_react90.useCallback)(async () => {
     const code = generateMermaidCode();
     await copyToClipboard(code);
   }, [generateMermaidCode]);
-  const handleCopyShareUrl = (0, import_react89.useCallback)(async () => {
+  const handleCopyShareUrl = (0, import_react90.useCallback)(async () => {
     const url = typeof window !== "undefined" ? window.location.href : "";
     await copyToClipboard(url);
     setShareUrlCopySuccess(true);
     setTimeout(() => setShareUrlCopySuccess(false), 2e3);
   }, []);
-  const toggleFullScreen = (0, import_react89.useCallback)(() => {
+  const toggleFullScreen = (0, import_react90.useCallback)(() => {
     if (!document.fullscreenElement) {
       reactFlowWrapperRef.current?.requestFullscreen().catch((err) => {
         console.error(
@@ -12595,7 +12696,7 @@ var NodeGraphBuilder = ({
       document.exitFullscreen();
     }
   }, []);
-  (0, import_react89.useEffect)(() => {
+  (0, import_react90.useEffect)(() => {
     const handleFullscreenChange = () => {
       _setIsFullscreen(!!document.fullscreenElement);
       setTimeout(() => {
@@ -12607,39 +12708,36 @@ var NodeGraphBuilder = ({
       document.removeEventListener("fullscreenchange", handleFullscreenChange);
     };
   }, [fitView]);
-  const handleExportVisual = (0, import_react89.useCallback)(() => {
-    const imageWidth = 1024;
-    const imageHeight = 768;
-    const nodesBounds = (0, import_react90.getNodesBounds)(getNodes());
-    const width = imageWidth > nodesBounds.width ? imageWidth : nodesBounds.width;
-    const height = imageHeight > nodesBounds.height ? imageHeight : nodesBounds.height;
-    const viewport = (0, import_react90.getViewportForBounds)(
-      nodesBounds,
-      width,
-      height,
-      0.5,
-      2,
-      0
-    );
+  const handleExportVisual = (0, import_react90.useCallback)(() => {
+    const nodesBounds = (0, import_react91.getNodesBounds)(getNodes(), {
+      nodeLookup: storeApi.getState().nodeLookup
+    });
+    const { width, height, viewport } = getExportImageDimensions(nodesBounds);
     const controls = document.querySelector(
       ".react-flow__controls"
     );
     if (controls) controls.style.display = "none";
-    (0, import_html_to_image.toPng)(document.querySelector(".react-flow__viewport"), {
+    const viewportElement = document.querySelector(
+      ".react-flow__viewport"
+    );
+    const removeExportStyles = injectExportStyles(viewportElement);
+    (0, import_html_to_image.toPng)(viewportElement, {
       backgroundColor: "#f1f1f1",
       width,
       height,
       style: {
-        width: width.toString(),
-        height: height.toString(),
+        width: `${width}px`,
+        height: `${height}px`,
         transform: `translate(${viewport.x}px, ${viewport.y}px) scale(${viewport.zoom})`
       }
     }).then((dataUrl) => {
       downloadImage(dataUrl, title);
+    }).finally(() => {
+      removeExportStyles();
       if (controls) controls.style.display = "block";
     });
-  }, [getNodes, downloadImage, title]);
-  const handleLegendClick = (0, import_react89.useCallback)(
+  }, [getNodes, storeApi, downloadImage, title]);
+  const handleLegendClick = (0, import_react90.useCallback)(
     (collectionType, groupId) => {
       const isLegendTarget = (node) => {
         if (groupId) {
@@ -12674,7 +12772,7 @@ var NodeGraphBuilder = ({
     },
     [nodes, edges, setNodes, setEdges, fitView]
   );
-  const getNodesByCollectionWithColors = (0, import_react89.useCallback)((nodes2) => {
+  const getNodesByCollectionWithColors = (0, import_react90.useCallback)((nodes2) => {
     const colorClasses = {
       events: "bg-orange-600",
       agent: "bg-sky-600",
@@ -12735,24 +12833,24 @@ var NodeGraphBuilder = ({
     );
     return { ...legendForDomains, ...legendForNodes };
   }, []);
-  const legendKeyRef = (0, import_react89.useRef)("");
+  const legendKeyRef = (0, import_react90.useRef)("");
   const computedLegendKey = nodes.map((n) => `${n.id}:${n.type}:${n.data.group?.id || ""}`).join(",");
   if (computedLegendKey !== legendKeyRef.current) {
     legendKeyRef.current = computedLegendKey;
   }
   const legendKey = legendKeyRef.current;
-  const legend = (0, import_react89.useMemo)(
+  const legend = (0, import_react90.useMemo)(
     () => getNodesByCollectionWithColors(nodes),
     [getNodesByCollectionWithColors, legendKey]
   );
-  const nodeIdsKeyRef = (0, import_react89.useRef)("");
+  const nodeIdsKeyRef = (0, import_react90.useRef)("");
   const computedNodeIdsKey = nodes.map((n) => n.id).join(",");
   if (computedNodeIdsKey !== nodeIdsKeyRef.current) {
     nodeIdsKeyRef.current = computedNodeIdsKey;
   }
   const nodeIdsKey = nodeIdsKeyRef.current;
-  const searchNodes = (0, import_react89.useMemo)(() => nodes, [nodeIdsKey]);
-  const allNoteGroups = (0, import_react89.useMemo)(() => {
+  const searchNodes = (0, import_react90.useMemo)(() => nodes, [nodeIdsKey]);
+  const allNoteGroups = (0, import_react90.useMemo)(() => {
     const groups = [];
     for (const node of nodes) {
       const result = getNotesFromNode(node);
@@ -12767,11 +12865,11 @@ var NodeGraphBuilder = ({
     }
     return groups;
   }, [nodeIdsKey]);
-  const totalNotesCount = (0, import_react89.useMemo)(
+  const totalNotesCount = (0, import_react90.useMemo)(
     () => allNoteGroups.reduce((sum, g) => sum + g.notes.length, 0),
     [allNoteGroups]
   );
-  const handleStepChange = (0, import_react89.useCallback)(
+  const handleStepChange = (0, import_react90.useCallback)(
     (nodeId, highlightPaths, shouldZoomOut) => {
       if (nodeId === null) {
         resetNodesAndEdges();
@@ -12846,7 +12944,7 @@ var NodeGraphBuilder = ({
     },
     [nodes, edges, setNodes, setEdges, resetNodesAndEdges, fitView]
   );
-  const isFlowVisualization = (0, import_react89.useMemo)(
+  const isFlowVisualization = (0, import_react90.useMemo)(
     () => edges.some((edge) => edge.type === "flow-edge"),
     [edges]
   );
@@ -12939,7 +13037,7 @@ var NodeGraphBuilder = ({
             }
           ) })
         ] }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
-          import_react90.ReactFlow,
+          import_react91.ReactFlow,
           {
             nodeTypes,
             edgeTypes: edgeTypes2,
@@ -12951,7 +13049,7 @@ var NodeGraphBuilder = ({
             onEdgesChange,
             onEdgeMouseEnter: handleEdgeMouseEnter,
             onEdgeMouseLeave: handleEdgeMouseLeave,
-            connectionLineType: import_react90.ConnectionLineType.SmoothStep,
+            connectionLineType: import_react91.ConnectionLineType.SmoothStep,
             nodeOrigin: NODE_ORIGIN,
             onNodeClick: handleNodeClick,
             onNodeMouseEnter: handleNodeMouseEnter,
@@ -12965,7 +13063,7 @@ var NodeGraphBuilder = ({
             className: "relative",
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
-                import_react90.Panel,
+                import_react91.Panel,
                 {
                   position: "top-center",
                   className: "w-full pr-6 pointer-events-none",
@@ -13083,10 +13181,10 @@ var NodeGraphBuilder = ({
                   ]
                 }
               ),
-              includeBackground && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react90.Background, { color: "var(--ec-bg-dots)", gap: 16 }),
-              includeBackground && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react90.Controls, {}),
+              includeBackground && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react91.Background, { color: "var(--ec-bg-dots)", gap: 16 }),
+              includeBackground && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react91.Controls, {}),
               showMinimap && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-                import_react90.MiniMap,
+                import_react91.MiniMap,
                 {
                   nodeStrokeWidth: 3,
                   zoomable: true,
@@ -13094,7 +13192,7 @@ var NodeGraphBuilder = ({
                   style: MINIMAP_STYLE
                 }
               ),
-              isFlowVisualization && showFlowWalkthrough && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react90.Panel, { position: "bottom-left", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+              isFlowVisualization && showFlowWalkthrough && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react91.Panel, { position: "bottom-left", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                 StepWalkthrough_default,
                 {
                   nodes: walkthroughNodes,
@@ -13105,7 +13203,7 @@ var NodeGraphBuilder = ({
                 }
               ) }),
               isDevMode && hasLayoutChanges && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-                import_react90.Panel,
+                import_react91.Panel,
                 {
                   position: "bottom-left",
                   style: isFlowVisualization && showFlowWalkthrough ? LAYOUT_CHANGE_PANEL_STYLE_WITH_WALKTHROUGH : LAYOUT_CHANGE_PANEL_STYLE_DEFAULT,
@@ -13266,7 +13364,7 @@ var NodeGraph = ({
   onSaveLayout,
   onResetLayout
 }) => {
-  const graphLayout = (0, import_react89.useMemo)(() => {
+  const graphLayout = (0, import_react90.useMemo)(() => {
     if (!graph) return null;
     return layoutGraph(
       graph.nodes,
@@ -13281,17 +13379,17 @@ var NodeGraph = ({
   const includeKey = includeKeyProp !== void 0 ? includeKeyProp : graph?.options?.legend !== false;
   const showSearch = showSearchProp !== void 0 ? showSearchProp : graph?.options?.search !== false;
   const animated = animatedProp ?? graph?.options?.animated;
-  const [elem, setElem] = (0, import_react89.useState)(null);
-  const [showFooter, setShowFooter] = (0, import_react89.useState)(true);
-  const [isStudioModalOpen, setIsStudioModalOpen] = (0, import_react89.useState)(false);
-  const openStudioModal = (0, import_react89.useCallback)(() => {
+  const [elem, setElem] = (0, import_react90.useState)(null);
+  const [showFooter, setShowFooter] = (0, import_react90.useState)(true);
+  const [isStudioModalOpen, setIsStudioModalOpen] = (0, import_react90.useState)(false);
+  const openStudioModal = (0, import_react90.useCallback)(() => {
     setIsStudioModalOpen(true);
   }, []);
   const containerToRenderInto = portalId || `${id}-portal`;
-  (0, import_react89.useEffect)(() => {
+  (0, import_react90.useEffect)(() => {
     setElem(document.getElementById(containerToRenderInto));
   }, []);
-  (0, import_react89.useEffect)(() => {
+  (0, import_react90.useEffect)(() => {
     const urlParams = new URLSearchParams(window.location.search);
     const embed = urlParams.get("embed");
     if (embed === "true") {
@@ -13300,7 +13398,7 @@ var NodeGraph = ({
   }, []);
   if (!elem) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { children: (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_react90.ReactFlowProvider, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_react91.ReactFlowProvider, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         NodeGraphBuilder,
         {