@eventcatalog/visualiser 5.0.0-beta.1 → 5.0.0-beta.3

package/dist/index.js

@@ -46,6 +46,7 @@ __export(index_exports, {
   DATA: () => DATA,
   Data: () => DataNode_default,
   DataProductNode: () => DataProduct_default,
+  DomainCardNode: () => DomainCard_default,
   DomainNode: () => Domain_default,
   ENTITY_TARGET_HANDLE_ID: () => ENTITY_TARGET_HANDLE_ID,
   EVENT: () => EVENT,
@@ -113,9 +114,9 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/NodeGraph.tsx
-var import_react103 = require("react");
+var import_react104 = require("react");
 var import_react_dom = require("react-dom");
-var import_react104 = require("@xyflow/react");
+var import_react105 = require("@xyflow/react");
 var import_lucide_react42 = require("lucide-react");
 var DropdownMenu3 = __toESM(require("@radix-ui/react-dropdown-menu"));
 var import_html_to_image = require("html-to-image");
@@ -1085,10 +1086,13 @@ function TruncatedResourceName({
     const updateTruncation = () => {
       setIsTruncated(element.scrollWidth > element.clientWidth);
     };
-    updateTruncation();
     if (typeof ResizeObserver === "undefined") {
+      const frame = requestAnimationFrame(updateTruncation);
       window.addEventListener("resize", updateTruncation);
-      return () => window.removeEventListener("resize", updateTruncation);
+      return () => {
+        cancelAnimationFrame(frame);
+        window.removeEventListener("resize", updateTruncation);
+      };
     }
     const observer = new ResizeObserver(updateTruncation);
     observer.observe(element);
@@ -4300,7 +4304,8 @@ var DomainCard_default = (0, import_react36.memo)(function DomainCardNode({ data
     systemsCount = 0,
     servicesCount = 0,
     entitiesCount = 0,
-    subdomain = false
+    subdomain = false,
+    navigable = true
   } = data;
   const { id, version, name, summary } = domain;
   const stats = [
@@ -4312,14 +4317,16 @@ var DomainCard_default = (0, import_react36.memo)(function DomainCardNode({ data
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "div",
     {
-      role: "button",
-      tabIndex: 0,
-      onClick: goToDiagram,
-      onKeyDown: (e) => {
-        if (e.key === "Enter" || e.key === " ") goToDiagram();
-      },
-      title: `Open the ${name} diagram`,
-      className: "relative min-w-48 max-w-60 rounded-xl border-2 border-yellow-400 overflow-visible cursor-pointer",
+      ...navigable ? {
+        role: "button",
+        tabIndex: 0,
+        onClick: goToDiagram,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") goToDiagram();
+        },
+        title: `Open the ${name} diagram`
+      } : {},
+      className: `relative min-w-48 max-w-60 rounded-xl border-2 border-yellow-400 overflow-visible${navigable ? " cursor-pointer" : ""}`,
       style: CARD_STYLE,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
@@ -6076,12 +6083,14 @@ var System_default = (0, import_react57.memo)(function SystemNode({ data }) {
     entitiesCount = 0,
     containersCount = 0,
     messagesCount = 0,
-    isFocused = false
+    isFocused = false,
+    navigable = true
   } = data;
   const { id, version, name, summary, scope } = system;
   const isExternal = scope === "external";
   const isDark = useDarkMode();
   const isFlowStep = Boolean(data.step);
+  const opensMap = navigable && !isFlowStep;
   const stats = [
     { icon: import_lucide_react27.Server, label: "Services", count: servicesCount },
     { icon: import_lucide_react27.MessageSquare, label: "Messages", count: messagesCount },
@@ -6095,7 +6104,7 @@ var System_default = (0, import_react57.memo)(function SystemNode({ data }) {
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     "div",
     {
-      ...isFlowStep ? {} : {
+      ...!opensMap ? {} : {
         role: "button",
         tabIndex: 0,
         onClick: goToMap,
@@ -6106,7 +6115,7 @@ var System_default = (0, import_react57.memo)(function SystemNode({ data }) {
       },
       className: classNames18(
         "relative min-w-48 max-w-60 rounded-xl border-2 overflow-visible",
-        !isFlowStep && "cursor-pointer",
+        opensMap && "cursor-pointer",
         isExternal ? "border-dashed border-violet-400" : "border-violet-500"
       ),
       style: {
@@ -11240,6 +11249,7 @@ var animateLayout = ({
   toEdges,
   setNodes,
   setEdges,
+  getCurrentNodes,
   morphs = [],
   nodeOrigin = [0, 0],
   onDone
@@ -11309,7 +11319,18 @@ var animateLayout = ({
     );
     return [...nodes, ...exitingNodes];
   };
-  setNodes(frame(0));
+  const setNodesKeepingSize = (nodes) => {
+    const measured = new Map(
+      getCurrentNodes().map((node) => [node.id, node.measured])
+    );
+    setNodes(
+      nodes.map((node) => {
+        const measuredSize = measured.get(node.id);
+        return measuredSize ? { ...node, measured: measuredSize } : node;
+      })
+    );
+  };
+  setNodesKeepingSize(frame(0));
   setEdges([
     ...toEdges.map(
       (edge) => fromEdgeIds.has(edge.id) ? edge : { ...edge, className: "ec-enter" }
@@ -11320,11 +11341,11 @@ var animateLayout = ({
   let animationFrame = requestAnimationFrame(function tick(now) {
     const t = Math.min(1, (now - start) / LAYOUT_ANIMATION_DURATION);
     if (t < 1) {
-      setNodes(frame(easeInOut(t)));
+      setNodesKeepingSize(frame(easeInOut(t)));
       animationFrame = requestAnimationFrame(tick);
       return;
     }
-    setNodes(toNodes);
+    setNodesKeepingSize(toNodes);
     setEdges(
       (edges) => edges.filter((edge) => toEdgeIds.has(edge.id)).map(
         (edge) => edge.className === "ec-enter" ? { ...edge, className: void 0 } : edge
@@ -11555,6 +11576,7 @@ var useNodeVisibility = ({
         toEdges: target.edges,
         setNodes,
         setEdges,
+        getCurrentNodes: () => nodesRef.current,
         // When switching graphs, systems expand into their group (or back), e.g.
         // a system in its context diagram
         morphs: from ? getSystemMorphs(from.nodes, target.nodes) : [],
@@ -12043,8 +12065,25 @@ var NodeContextMenu_default = (0, import_react98.memo)(function NodeContextMenu(
   ] });
 });
 
+// src/utils/node-memo.ts
+var import_react99 = require("react");
+var POSITION_PROPS = /* @__PURE__ */ new Set(["positionAbsoluteX", "positionAbsoluteY"]);
+var equalExceptPosition = (previous, next) => {
+  const keys = /* @__PURE__ */ new Set([...Object.keys(previous), ...Object.keys(next)]);
+  for (const key of keys) {
+    if (POSITION_PROPS.has(key)) continue;
+    if (!Object.is(
+      previous[key],
+      next[key]
+    ))
+      return false;
+  }
+  return true;
+};
+var memoNode = (Component) => (0, import_react99.memo)(Component, equalExceptPosition);
+
 // src/utils/export-image.ts
-var import_react99 = require("@xyflow/react");
+var import_react100 = require("@xyflow/react");
 var MIN_IMAGE_WIDTH = 1024;
 var MIN_IMAGE_HEIGHT = 768;
 var EXPORT_PADDING = 40;
@@ -12057,7 +12096,7 @@ function getExportImageDimensions(nodesBounds) {
   };
   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_react99.getViewportForBounds)(paddedBounds, width, height, 0.5, 2, 0);
+  const viewport = (0, import_react100.getViewportForBounds)(paddedBounds, width, height, 0.5, 2, 0);
   return { width, height, viewport };
 }
 function extractEcVarNames(cssText) {
@@ -12144,7 +12183,7 @@ function injectExportStyles(viewport) {
 }
 
 // src/utils/layout.ts
-var import_react100 = require("@xyflow/react");
+var import_react101 = require("@xyflow/react");
 var EMPTY_GROUP_WIDTH = 200;
 var EMPTY_GROUP_HEIGHT = 80;
 var defaultSizes = {
@@ -12334,7 +12373,7 @@ async function layoutGraph(nodes, edges, { style } = {}) {
     const isCalls = edge.type === "calls";
     const isBidirectional = edge.type === "reads-writes";
     const arrowMarker = {
-      type: import_react100.MarkerType.ArrowClosed,
+      type: import_react101.MarkerType.ArrowClosed,
       width: 20,
       height: 20,
       color: "rgb(var(--ec-page-text-muted))"
@@ -12483,9 +12522,9 @@ var buildMessageGroupExpansionNodes = ({
 };
 
 // src/components/NotesToolbarButton.tsx
-var import_react101 = require("react");
+var import_react102 = require("react");
 var import_lucide_react41 = require("lucide-react");
-var import_react102 = require("@xyflow/react");
+var import_react103 = require("@xyflow/react");
 var Dialog3 = __toESM(require("@radix-ui/react-dialog"));
 var import_jsx_runtime55 = require("react/jsx-runtime");
 var NODE_TYPE_META = {
@@ -12748,12 +12787,12 @@ function AllNotesModal({
   onClose,
   nodes
 }) {
-  const { setCenter, getZoom } = (0, import_react102.useReactFlow)();
-  const [selectedIdx, setSelectedIdx] = (0, import_react101.useState)(0);
+  const { setCenter, getZoom } = (0, import_react103.useReactFlow)();
+  const [selectedIdx, setSelectedIdx] = (0, import_react102.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_react101.useCallback)(
+  const handleNavigate = (0, import_react102.useCallback)(
     (nodeId) => {
       const node = nodes.find((n) => n.id === nodeId);
       if (!node) return;
@@ -13314,7 +13353,7 @@ var LEGEND_ICONS = {
   field: { Icon: import_lucide_react42.Box, colorClass: "text-cyan-600" }
 };
 var getLegendIcon = (key) => LEGEND_ICONS[key];
-var LegendPanel = (0, import_react103.memo)(function LegendPanel2({
+var LegendPanel = (0, import_react104.memo)(function LegendPanel2({
   legend,
   hiddenKeys,
   showMinimap,
@@ -13322,7 +13361,7 @@ var LegendPanel = (0, import_react103.memo)(function LegendPanel2({
 }) {
   if (Object.keys(legend).length === 0) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-    import_react104.Panel,
+    import_react105.Panel,
     {
       position: "bottom-right",
       style: showMinimap ? LEGEND_PANEL_STYLE_WITH_MINIMAP : void 0,
@@ -13363,7 +13402,7 @@ var GROUP_EDGE_STYLE = {
   stroke: "var(--ec-edge-stroke, #6b7280)"
 };
 var GROUP_EDGE_MARKER = {
-  type: import_react104.MarkerType.ArrowClosed,
+  type: import_react105.MarkerType.ArrowClosed,
   width: 20,
   height: 20
 };
@@ -13469,22 +13508,24 @@ var NodeGraphBuilder = ({
   onSaveLayout,
   onResetLayout
 }) => {
-  (0, import_react103.useEffect)(() => {
+  (0, import_react104.useEffect)(() => {
     if (onBuildUrl) {
       setBuildUrlFn(onBuildUrl);
     }
   }, []);
-  const nodeTypes = (0, import_react103.useMemo)(() => {
+  const nodeTypes = (0, import_react104.useMemo)(() => {
     const wrapWithContextMenu = (Component) => {
-      const Wrapped = (0, import_react103.memo)((props) => {
+      const Wrapped = (props) => {
         const items = props.data?.contextMenu;
         if (!items?.length) return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Component, { ...props });
         return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(NodeContextMenu_default, { items, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Component, { ...props }) });
-      });
+      };
       Wrapped.displayName = `WithContextMenu(${Component.displayName || Component.name || "Component"})`;
       return Wrapped;
     };
-    return {
+    const ReadOnlyNoteNode = (props) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(NoteNode_default, { ...props, readOnly: true });
+    ReadOnlyNoteNode.displayName = "ReadOnlyNoteNode";
+    const types = {
       service: wrapWithContextMenu(ServiceNode_default),
       services: wrapWithContextMenu(ServiceNode_default),
       agent: wrapWithContextMenu(Agent_default),
@@ -13523,15 +13564,21 @@ var NodeGraphBuilder = ({
       "system-group": SystemGroupNode_default,
       "domain-group": SystemGroupNode_default,
       "context-domain": DomainCard_default,
-      note: (0, import_react103.memo)((props) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(NoteNode_default, { ...props, readOnly: true })),
+      note: ReadOnlyNoteNode,
       field: wrapWithContextMenu(FieldNode_default),
       messageGroup: MessageGroupNode_default,
       messageGroupExpanded: MessageGroupExpandedNode_default,
       flowExpanded: FlowExpandedNode_default,
       swimlane: SwimlaneNode_default
     };
+    return Object.fromEntries(
+      Object.entries(types).map(([type, Component]) => [
+        type,
+        memoNode(Component)
+      ])
+    );
   }, []);
-  const edgeTypes2 = (0, import_react103.useMemo)(
+  const edgeTypes2 = (0, import_react104.useMemo)(
     () => ({
       animated: AnimatedMessageEdge_default,
       multiline: MultilineEdgeLabel_default,
@@ -13542,8 +13589,8 @@ var NodeGraphBuilder = ({
     }),
     []
   );
-  const [nodes, setNodes, onNodesChange] = (0, import_react104.useNodesState)(initialNodes);
-  const [edges, setEdges, onEdgesChange] = (0, import_react104.useEdgesState)(initialEdges);
+  const [nodes, setNodes, onNodesChange] = (0, import_react105.useNodesState)(initialNodes);
+  const [edges, setEdges, onEdgesChange] = (0, import_react105.useEdgesState)(initialEdges);
   const {
     fitView,
     getNodes,
@@ -13553,13 +13600,13 @@ var NodeGraphBuilder = ({
     getEdges,
     getViewport,
     setViewport
-  } = (0, import_react104.useReactFlow)();
-  const storeApi = (0, import_react104.useStoreApi)();
-  const previousGraphInputRef = (0, import_react103.useRef)({
+  } = (0, import_react105.useReactFlow)();
+  const storeApi = (0, import_react105.useStoreApi)();
+  const previousGraphInputRef = (0, import_react104.useRef)({
     nodes: initialNodes,
     edges: initialEdges
   });
-  (0, import_react103.useEffect)(() => {
+  (0, import_react104.useEffect)(() => {
     const previousGraphInput = previousGraphInputRef.current;
     previousGraphInputRef.current = {
       nodes: initialNodes,
@@ -13574,46 +13621,46 @@ var NodeGraphBuilder = ({
       fitView({ duration: 300, padding: 0.2 });
     });
   }, [initialNodes, initialEdges, setNodes, setEdges, fitView]);
-  const [animateMessages, setAnimateMessages] = (0, import_react103.useState)(true);
-  const prepareEdges = (0, import_react103.useCallback)(
+  const [animateMessages, setAnimateMessages] = (0, import_react104.useState)(true);
+  const prepareEdges = (0, import_react104.useCallback)(
     (eds) => applyMessageAnimation(eds, animateMessages),
     [animateMessages]
   );
-  const [_activeStepIndex, _setActiveStepIndex] = (0, import_react103.useState)(null);
-  const [_isFullscreen, _setIsFullscreen] = (0, import_react103.useState)(false);
-  const [isShareModalOpen, setIsShareModalOpen] = (0, import_react103.useState)(false);
-  const [shareUrlCopySuccess, setShareUrlCopySuccess] = (0, import_react103.useState)(false);
-  const [isMermaidView, setIsMermaidView] = (0, import_react103.useState)(false);
-  const [showMinimap, setShowMinimap] = (0, import_react103.useState)(false);
-  const [hasLayoutChanges, setHasLayoutChanges] = (0, import_react103.useState)(false);
-  const [isSavingLayout, setIsSavingLayout] = (0, import_react103.useState)(false);
-  const initialPositionsRef = (0, import_react103.useRef)(
+  const [_activeStepIndex, _setActiveStepIndex] = (0, import_react104.useState)(null);
+  const [_isFullscreen, _setIsFullscreen] = (0, import_react104.useState)(false);
+  const [isShareModalOpen, setIsShareModalOpen] = (0, import_react104.useState)(false);
+  const [shareUrlCopySuccess, setShareUrlCopySuccess] = (0, import_react104.useState)(false);
+  const [isMermaidView, setIsMermaidView] = (0, import_react104.useState)(false);
+  const [showMinimap, setShowMinimap] = (0, import_react104.useState)(false);
+  const [hasLayoutChanges, setHasLayoutChanges] = (0, import_react104.useState)(false);
+  const [isSavingLayout, setIsSavingLayout] = (0, import_react104.useState)(false);
+  const initialPositionsRef = (0, import_react104.useRef)(
     {}
   );
-  const [focusModeOpen, setFocusModeOpen] = (0, import_react103.useState)(false);
-  const [focusedNodeId, setFocusedNodeId] = (0, import_react103.useState)(null);
-  const [swimlanes, setSwimlanes] = (0, import_react103.useState)(null);
-  const swimlanesRef = (0, import_react103.useRef)(null);
-  const [swimlaneStyle, setSwimlaneStyle] = (0, import_react103.useState)("boxes");
-  const swimlaneStyleRef = (0, import_react103.useRef)("boxes");
-  const unlanedGraphRef = (0, import_react103.useRef)(null);
-  const [isNotesModalOpen, setIsNotesModalOpen] = (0, import_react103.useState)(false);
-  const openNotesModal = (0, import_react103.useCallback)(() => setIsNotesModalOpen(true), []);
-  const interactionCountRef = (0, import_react103.useRef)(0);
-  const startInteraction = (0, import_react103.useCallback)(() => {
+  const [focusModeOpen, setFocusModeOpen] = (0, import_react104.useState)(false);
+  const [focusedNodeId, setFocusedNodeId] = (0, import_react104.useState)(null);
+  const [swimlanes, setSwimlanes] = (0, import_react104.useState)(null);
+  const swimlanesRef = (0, import_react104.useRef)(null);
+  const [swimlaneStyle, setSwimlaneStyle] = (0, import_react104.useState)("boxes");
+  const swimlaneStyleRef = (0, import_react104.useRef)("boxes");
+  const unlanedGraphRef = (0, import_react104.useRef)(null);
+  const [isNotesModalOpen, setIsNotesModalOpen] = (0, import_react104.useState)(false);
+  const openNotesModal = (0, import_react104.useCallback)(() => setIsNotesModalOpen(true), []);
+  const interactionCountRef = (0, import_react104.useRef)(0);
+  const startInteraction = (0, import_react104.useCallback)(() => {
     interactionCountRef.current += 1;
     if (interactionCountRef.current === 1) {
       reactFlowWrapperRef.current?.classList.add("ec-interaction-active");
     }
   }, []);
-  const endInteraction = (0, import_react103.useCallback)(() => {
+  const endInteraction = (0, import_react104.useCallback)(() => {
     interactionCountRef.current = Math.max(0, interactionCountRef.current - 1);
     if (interactionCountRef.current === 0) {
       reactFlowWrapperRef.current?.classList.remove("ec-interaction-active");
     }
   }, []);
-  const hoveredEdgeNodesRef = (0, import_react103.useRef)([]);
-  const handleEdgeMouseEnter = (0, import_react103.useCallback)(
+  const hoveredEdgeNodesRef = (0, import_react104.useRef)([]);
+  const handleEdgeMouseEnter = (0, import_react104.useCallback)(
     (_, edge) => {
       const wrapper = reactFlowWrapperRef.current;
       if (!wrapper) return;
@@ -13625,15 +13672,15 @@ var NodeGraphBuilder = ({
     },
     []
   );
-  const handleEdgeMouseLeave = (0, import_react103.useCallback)(() => {
+  const handleEdgeMouseLeave = (0, import_react104.useCallback)(() => {
     hoveredEdgeNodesRef.current.forEach(
       (el) => el.classList.remove("ec-edge-hover-node")
     );
     hoveredEdgeNodesRef.current = [];
   }, []);
-  const hoveredNodeEdgesRef = (0, import_react103.useRef)([]);
-  const hoveredNodePeersRef = (0, import_react103.useRef)([]);
-  const handleNodeMouseEnter = (0, import_react103.useCallback)(
+  const hoveredNodeEdgesRef = (0, import_react104.useRef)([]);
+  const hoveredNodePeersRef = (0, import_react104.useRef)([]);
+  const handleNodeMouseEnter = (0, import_react104.useCallback)(
     (_, node) => {
       const wrapper = reactFlowWrapperRef.current;
       if (!wrapper) return;
@@ -13662,7 +13709,7 @@ var NodeGraphBuilder = ({
     },
     []
   );
-  const handleNodeMouseLeave = (0, import_react103.useCallback)(() => {
+  const handleNodeMouseLeave = (0, import_react104.useCallback)(() => {
     hoveredNodeEdgesRef.current.forEach(
       (el) => el.classList.remove("ec-node-hover-edge")
     );
@@ -13672,30 +13719,30 @@ var NodeGraphBuilder = ({
     );
     hoveredNodePeersRef.current = [];
   }, []);
-  const hasChannels = (0, import_react103.useMemo)(
+  const hasChannels = (0, import_react104.useMemo)(
     () => initialNodes.some((node) => node.type === "channels"),
     [initialNodes]
   );
-  const hasMessages = (0, import_react103.useMemo)(
+  const hasMessages = (0, import_react104.useMemo)(
     () => initialNodes.some(isMessageNode),
     [initialNodes]
   );
-  const isFlowGraph = (0, import_react103.useMemo)(
+  const isFlowGraph = (0, import_react104.useMemo)(
     () => initialEdges.some((edge) => edge.type === "flow-edge"),
     [initialEdges]
   );
-  const renderedSizeOf = (0, import_react103.useCallback)(
+  const renderedSizeOf = (0, import_react104.useCallback)(
     (node) => {
       const measured = storeApi.getState().nodeLookup.get(node.id)?.measured;
       return measured?.width && measured?.height ? { width: measured.width, height: measured.height } : getNodeSize(node);
     },
     [storeApi]
   );
-  const beforeLayout = (0, import_react103.useCallback)(
+  const beforeLayout = (0, import_react104.useCallback)(
     (graph) => swimlaneStyleRef.current === "lanes" ? removeSwimlanes(graph) : graph,
     []
   );
-  const afterLayout = (0, import_react103.useCallback)((graph) => {
+  const afterLayout = (0, import_react104.useCallback)((graph) => {
     const groupBy = swimlanesRef.current;
     const style = swimlaneStyleRef.current;
     const current = getGrouping(graph.nodes);
@@ -13707,24 +13754,24 @@ var NodeGraphBuilder = ({
     unlanedGraphRef.current = unlaned;
     return layoutSwimlanes(unlaned, groupBy, { sizeOf: renderedSizeOf });
   }, []);
-  const hasLevels = (0, import_react103.useMemo)(
+  const hasLevels = (0, import_react104.useMemo)(
     () => initialNodes.some(
       (node) => LEVEL_NODE_TYPES.includes(node.type || "")
     ),
     [initialNodes]
   );
-  const isContextGraph = (0, import_react103.useMemo)(
+  const isContextGraph = (0, import_react104.useMemo)(
     () => initialNodes.every(
       (node) => CONTEXT_NODE_TYPES.includes(node.type || "")
     ),
     [initialNodes]
   );
-  const hasOtherDomains = (0, import_react103.useMemo)(
+  const hasOtherDomains = (0, import_react104.useMemo)(
     () => mode === "full" && initialNodes.some((node) => !!node.data?.otherDomain),
     [initialNodes, mode]
   );
-  const legendRef = (0, import_react103.useRef)({});
-  const matchesLegendKey = (0, import_react103.useCallback)((node, key) => {
+  const legendRef = (0, import_react104.useRef)({});
+  const matchesLegendKey = (0, import_react104.useCallback)((node, key) => {
     const groupId = legendRef.current[key]?.groupId;
     return groupId ? node.data?.group?.id === groupId : node.type === key;
   }, []);
@@ -13760,7 +13807,7 @@ var NodeGraphBuilder = ({
     beforeLayout,
     afterLayout
   });
-  const switchGraph = (0, import_react103.useCallback)(
+  const switchGraph = (0, import_react104.useCallback)(
     (showOverview) => onShowOverview?.(showOverview, {
       nodes: getNodes(),
       edges: getEdges(),
@@ -13768,7 +13815,7 @@ var NodeGraphBuilder = ({
     }),
     [onShowOverview, getNodes, getEdges, getViewport]
   );
-  const levels = (0, import_react103.useMemo)(() => {
+  const levels = (0, import_react104.useMemo)(() => {
     if (isFlowGraph) return [];
     if (!overviewLabel && !isContextGraph && !hasLevels) return [];
     const selectDetailLevel = (level) => {
@@ -13810,7 +13857,7 @@ var NodeGraphBuilder = ({
     setDetailLevel,
     switchGraph
   ]);
-  const canvasTools = (0, import_react103.useMemo)(
+  const canvasTools = (0, import_react104.useMemo)(
     () => hasOtherDomains ? [
       {
         label: highlightCrossDomain ? "Stop highlighting cross-domain communication" : "Highlight cross-domain communication",
@@ -13821,23 +13868,23 @@ var NodeGraphBuilder = ({
     ] : [],
     [hasOtherDomains, highlightCrossDomain, toggleHighlightCrossDomain]
   );
-  const searchRef = (0, import_react103.useRef)(null);
-  const reactFlowWrapperRef = (0, import_react103.useRef)(null);
-  const scrollableContainerRef = (0, import_react103.useRef)(null);
-  const nodesRef = (0, import_react103.useRef)(nodes);
+  const searchRef = (0, import_react104.useRef)(null);
+  const reactFlowWrapperRef = (0, import_react104.useRef)(null);
+  const scrollableContainerRef = (0, import_react104.useRef)(null);
+  const nodesRef = (0, import_react104.useRef)(nodes);
   nodesRef.current = nodes;
-  const edgesRef = (0, import_react103.useRef)(edges);
+  const edgesRef = (0, import_react104.useRef)(edges);
   edgesRef.current = edges;
-  const subFlowLayoutRun = (0, import_react103.useRef)(0);
-  const hideChannelsRef = (0, import_react103.useRef)(hideChannels);
+  const subFlowLayoutRun = (0, import_react104.useRef)(0);
+  const hideChannelsRef = (0, import_react104.useRef)(hideChannels);
   hideChannelsRef.current = hideChannels;
-  const walkthroughKeyRef = (0, import_react103.useRef)("");
+  const walkthroughKeyRef = (0, import_react104.useRef)("");
   const computedWalkthroughKey = `${nodes.map((n) => `${n.id}:${n.type}`).join(",")}|${edges.map((e) => `${e.source}>${e.target}`).join(",")}`;
   if (computedWalkthroughKey !== walkthroughKeyRef.current) {
     walkthroughKeyRef.current = computedWalkthroughKey;
   }
   const walkthroughKey = walkthroughKeyRef.current;
-  const { walkthroughNodes, walkthroughEdges } = (0, import_react103.useMemo)(() => {
+  const { walkthroughNodes, walkthroughEdges } = (0, import_react104.useMemo)(() => {
     const wrapperNodeIds = new Set(
       nodes.filter((n) => isExpandedWrapper(n.type) || isSwimlaneNode(n)).map((n) => n.id)
     );
@@ -13848,13 +13895,13 @@ var NodeGraphBuilder = ({
       )
     };
   }, [walkthroughKey]);
-  const animateLayout2 = (0, import_react103.useCallback)(() => {
+  const animateLayout2 = (0, import_react104.useCallback)(() => {
     const wrapper = reactFlowWrapperRef.current;
     if (!wrapper) return;
     wrapper.classList.add("ec-animating-layout");
     setTimeout(() => wrapper.classList.remove("ec-animating-layout"), 400);
   }, []);
-  const makeRoomForRenderedExpandedGroup = (0, import_react103.useCallback)(
+  const makeRoomForRenderedExpandedGroup = (0, import_react104.useCallback)(
     (groupNodeId, groupBounds) => {
       const padding = 80;
       const protectedBounds = {
@@ -13883,7 +13930,7 @@ var NodeGraphBuilder = ({
     },
     [getIntersectingNodes, setNodes]
   );
-  const handleCollapseGroup = (0, import_react103.useCallback)(
+  const handleCollapseGroup = (0, import_react104.useCallback)(
     (e) => {
       const target = e.target;
       const collapseBtn = target.closest(
@@ -13957,7 +14004,7 @@ var NodeGraphBuilder = ({
     },
     [initialNodes, initialEdges, setNodes, setEdges, animateLayout2]
   );
-  (0, import_react103.useEffect)(() => {
+  (0, import_react104.useEffect)(() => {
     if (isDevMode && initialNodes.length > 0) {
       const positions = {};
       initialNodes.forEach((node) => {
@@ -13966,7 +14013,7 @@ var NodeGraphBuilder = ({
       initialPositionsRef.current = positions;
     }
   }, [isDevMode, initialNodes]);
-  const checkForLayoutChanges = (0, import_react103.useCallback)(() => {
+  const checkForLayoutChanges = (0, import_react104.useCallback)(() => {
     if (!isDevMode) return;
     const initial = initialPositionsRef.current;
     if (Object.keys(initial).length === 0) return;
@@ -13976,7 +14023,7 @@ var NodeGraphBuilder = ({
     });
     setHasLayoutChanges(hasChanges);
   }, [isDevMode]);
-  const handleNodesChange = (0, import_react103.useCallback)(
+  const handleNodesChange = (0, import_react104.useCallback)(
     (changes) => {
       onNodesChange(changes);
       const hasDragEnd = changes.some(
@@ -13988,7 +14035,7 @@ var NodeGraphBuilder = ({
     },
     [onNodesChange, checkForLayoutChanges]
   );
-  const resetNodesAndEdges = (0, import_react103.useCallback)(() => {
+  const resetNodesAndEdges = (0, import_react104.useCallback)(() => {
     setNodes(
       (nds) => nds.map((node) => {
         node.style = { ...node.style, opacity: 1 };
@@ -14012,7 +14059,7 @@ var NodeGraphBuilder = ({
       })
     );
   }, [setNodes, setEdges, animateMessages]);
-  (0, import_react103.useEffect)(() => {
+  (0, import_react104.useEffect)(() => {
     if (!focusNodeId) return;
     const targetNode = nodesRef.current.find((node) => node.id === focusNodeId);
     if (!targetNode) return;
@@ -14030,13 +14077,13 @@ var NodeGraphBuilder = ({
       });
     });
   }, [focusNodeId, focusRequestId, fitView, setNodes]);
-  (0, import_react103.useEffect)(() => {
+  (0, import_react104.useEffect)(() => {
     if (fitRequestId == null) return;
     requestAnimationFrame(() => {
       fitView({ duration: 400, padding: 0.2 });
     });
   }, [fitRequestId, fitView]);
-  const handleNodeClick = (0, import_react103.useCallback)(
+  const handleNodeClick = (0, import_react104.useCallback)(
     (_, node) => {
       if (onNodeClick) {
         onNodeClick(node);
@@ -14381,7 +14428,7 @@ var NodeGraphBuilder = ({
       setCenter
     ]
   );
-  const toggleAnimateMessages = (0, import_react103.useCallback)(() => {
+  const toggleAnimateMessages = (0, import_react104.useCallback)(() => {
     setAnimateMessages((prev) => {
       const next = !prev;
       localStorage.setItem(
@@ -14391,10 +14438,10 @@ var NodeGraphBuilder = ({
       return next;
     });
   }, []);
-  const handleFitView = (0, import_react103.useCallback)(() => {
+  const handleFitView = (0, import_react104.useCallback)(() => {
     fitView({ maxZoom: 1, duration: 400, padding: 0.2 });
   }, [fitView]);
-  (0, import_react103.useEffect)(() => {
+  (0, import_react104.useEffect)(() => {
     if (disableMessageAnimation) {
       setAnimateMessages(false);
       return;
@@ -14420,16 +14467,16 @@ var NodeGraphBuilder = ({
       }
     }
   }, [animated, disableMessageAnimation, initialNodes.length]);
-  (0, import_react103.useEffect)(() => {
+  (0, import_react104.useEffect)(() => {
     setEdges((eds) => applyMessageAnimation(eds, animateMessages));
   }, [animateMessages]);
-  (0, import_react103.useEffect)(() => {
+  (0, import_react104.useEffect)(() => {
     if (transitionFrom) return;
     setTimeout(() => {
       fitView({ maxZoom: 1, duration: 800 });
     }, 150);
   }, []);
-  const generateMermaidCode = (0, import_react103.useCallback)(() => {
+  const generateMermaidCode = (0, import_react104.useCallback)(() => {
     try {
       return convertToMermaid(nodesRef.current, edgesRef.current, {
         includeStyles: true,
@@ -14440,7 +14487,7 @@ var NodeGraphBuilder = ({
       return "";
     }
   }, []);
-  (0, import_react103.useEffect)(() => {
+  (0, import_react104.useEffect)(() => {
     if (zoomOnScroll) return;
     const findScrollableContainer = () => {
       const selectors = [
@@ -14485,31 +14532,31 @@ var NodeGraphBuilder = ({
       };
     }
   }, [zoomOnScroll]);
-  const handlePaneClick = (0, import_react103.useCallback)(() => {
+  const handlePaneClick = (0, import_react104.useCallback)(() => {
     searchRef.current?.hideSuggestions();
     resetNodesAndEdges();
     fitView({ maxZoom: 1, duration: 800 });
   }, [resetNodesAndEdges, fitView]);
-  const handleNodeSelect = (0, import_react103.useCallback)(
+  const handleNodeSelect = (0, import_react104.useCallback)(
     (node) => {
       handleNodeClick(null, node);
     },
     [handleNodeClick]
   );
-  const handleSearchClear = (0, import_react103.useCallback)(() => {
+  const handleSearchClear = (0, import_react104.useCallback)(() => {
     resetNodesAndEdges();
     fitView({ maxZoom: 1, duration: 800 });
   }, [resetNodesAndEdges, fitView]);
-  const downloadImage = (0, import_react103.useCallback)((dataUrl, filename) => {
+  const downloadImage = (0, import_react104.useCallback)((dataUrl, filename) => {
     const a = document.createElement("a");
     a.setAttribute("download", `${filename || "eventcatalog"}.png`);
     a.setAttribute("href", dataUrl);
     a.click();
   }, []);
-  const openChat = (0, import_react103.useCallback)(() => {
+  const openChat = (0, import_react104.useCallback)(() => {
     window.dispatchEvent(new CustomEvent("eventcatalog:open-chat"));
   }, []);
-  const handleSaveLayout = (0, import_react103.useCallback)(async () => {
+  const handleSaveLayout = (0, import_react104.useCallback)(async () => {
     if (!resourceKey || !onSaveLayout) return false;
     if (swimlanesRef.current) return false;
     const positions = {};
@@ -14522,11 +14569,11 @@ var NodeGraphBuilder = ({
     });
     return await onSaveLayout(resourceKey, positions);
   }, [resourceKey, onSaveLayout]);
-  const handleResetLayout = (0, import_react103.useCallback)(async () => {
+  const handleResetLayout = (0, import_react104.useCallback)(async () => {
     if (!resourceKey || !onResetLayout) return false;
     return await onResetLayout(resourceKey);
   }, [resourceKey, onResetLayout]);
-  const handleQuickSaveLayout = (0, import_react103.useCallback)(async () => {
+  const handleQuickSaveLayout = (0, import_react104.useCallback)(async () => {
     setIsSavingLayout(true);
     const success = await handleSaveLayout();
     setIsSavingLayout(false);
@@ -14539,17 +14586,17 @@ var NodeGraphBuilder = ({
       setHasLayoutChanges(false);
     }
   }, [handleSaveLayout]);
-  const handleCopyArchitectureCode = (0, import_react103.useCallback)(async () => {
+  const handleCopyArchitectureCode = (0, import_react104.useCallback)(async () => {
     const code = generateMermaidCode();
     await copyToClipboard(code);
   }, [generateMermaidCode]);
-  const handleCopyShareUrl = (0, import_react103.useCallback)(async () => {
+  const handleCopyShareUrl = (0, import_react104.useCallback)(async () => {
     const url = typeof window !== "undefined" ? window.location.href : "";
     await copyToClipboard(url);
     setShareUrlCopySuccess(true);
     setTimeout(() => setShareUrlCopySuccess(false), 2e3);
   }, []);
-  const toggleFullScreen = (0, import_react103.useCallback)(() => {
+  const toggleFullScreen = (0, import_react104.useCallback)(() => {
     if (!document.fullscreenElement) {
       reactFlowWrapperRef.current?.requestFullscreen().catch((err) => {
         console.error(
@@ -14560,7 +14607,7 @@ var NodeGraphBuilder = ({
       document.exitFullscreen();
     }
   }, []);
-  (0, import_react103.useEffect)(() => {
+  (0, import_react104.useEffect)(() => {
     const handleFullscreenChange = () => {
       _setIsFullscreen(!!document.fullscreenElement);
       setTimeout(() => {
@@ -14572,8 +14619,8 @@ var NodeGraphBuilder = ({
       document.removeEventListener("fullscreenchange", handleFullscreenChange);
     };
   }, [fitView]);
-  const handleExportVisual = (0, import_react103.useCallback)(() => {
-    const nodesBounds = (0, import_react104.getNodesBounds)(getNodes(), {
+  const handleExportVisual = (0, import_react104.useCallback)(() => {
+    const nodesBounds = (0, import_react105.getNodesBounds)(getNodes(), {
       nodeLookup: storeApi.getState().nodeLookup
     });
     const { width, height, viewport } = getExportImageDimensions(nodesBounds);
@@ -14601,7 +14648,7 @@ var NodeGraphBuilder = ({
       if (controls) controls.style.display = "block";
     });
   }, [getNodes, storeApi, downloadImage, title]);
-  const getNodesByCollectionWithColors = (0, import_react103.useCallback)((nodes2) => {
+  const getNodesByCollectionWithColors = (0, import_react104.useCallback)((nodes2) => {
     const colorClasses = {
       events: "bg-orange-600",
       agent: "bg-sky-600",
@@ -14662,18 +14709,18 @@ var NodeGraphBuilder = ({
     );
     return { ...legendForDomains, ...legendForNodes };
   }, []);
-  const legendKeyRef = (0, import_react103.useRef)("");
+  const legendKeyRef = (0, import_react104.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 graphLegend = (0, import_react103.useMemo)(
+  const graphLegend = (0, import_react104.useMemo)(
     () => getNodesByCollectionWithColors(nodes),
     [getNodesByCollectionWithColors, legendKey]
   );
-  const legendEntries = (0, import_react103.useRef)(null);
-  const legend = (0, import_react103.useMemo)(() => {
+  const legendEntries = (0, import_react104.useRef)(null);
+  const legend = (0, import_react104.useMemo)(() => {
     legendEntries.current ?? (legendEntries.current = getNodesByCollectionWithColors(initialNodes));
     Object.assign(legendEntries.current, graphLegend);
     return Object.fromEntries(
@@ -14683,17 +14730,17 @@ var NodeGraphBuilder = ({
     );
   }, [graphLegend, hiddenLegendKeys]);
   legendRef.current = legend;
-  const nodeIdsKeyRef = (0, import_react103.useRef)("");
+  const nodeIdsKeyRef = (0, import_react104.useRef)("");
   const computedNodeIdsKey = nodes.map((n) => n.id).join(",");
   if (computedNodeIdsKey !== nodeIdsKeyRef.current) {
     nodeIdsKeyRef.current = computedNodeIdsKey;
   }
   const nodeIdsKey = nodeIdsKeyRef.current;
-  const searchNodes = (0, import_react103.useMemo)(
+  const searchNodes = (0, import_react104.useMemo)(
     () => nodes.filter((node) => !isSwimlaneNode(node)),
     [nodeIdsKey]
   );
-  const allNoteGroups = (0, import_react103.useMemo)(() => {
+  const allNoteGroups = (0, import_react104.useMemo)(() => {
     const groups = [];
     for (const node of nodes) {
       const result = getNotesFromNode(node);
@@ -14708,13 +14755,13 @@ var NodeGraphBuilder = ({
     }
     return groups;
   }, [nodeIdsKey]);
-  const totalNotesCount = (0, import_react103.useMemo)(
+  const totalNotesCount = (0, import_react104.useMemo)(
     () => allNoteGroups.reduce((sum, g) => sum + g.notes.length, 0),
     [allNoteGroups]
   );
-  const [walkthroughTrail, setWalkthroughTrail] = (0, import_react103.useState)([]);
-  const walkthroughTrailRef = (0, import_react103.useRef)([]);
-  const handleStepChange = (0, import_react103.useCallback)(
+  const [walkthroughTrail, setWalkthroughTrail] = (0, import_react104.useState)([]);
+  const walkthroughTrailRef = (0, import_react104.useRef)([]);
+  const handleStepChange = (0, import_react104.useCallback)(
     (nodeId, shouldZoomOut, trail = nodeId ? [nodeId] : []) => {
       if (nodeId === null) {
         resetNodesAndEdges();
@@ -14772,12 +14819,12 @@ var NodeGraphBuilder = ({
       walkthroughTrailRef.current = trail;
       const canvas = reactFlowWrapperRef.current?.getBoundingClientRect();
       if (!canvas) return;
-      const bounds = (0, import_react104.getNodesBounds)([nodeId, ...nextNodeIds], {
+      const bounds = (0, import_react105.getNodesBounds)([nodeId, ...nextNodeIds], {
         nodeLookup: storeApi.getState().nodeLookup
       });
       const cardSpace = Math.min(WALKTHROUGH_CARD_SPACE, canvas.height * 0.35);
       setViewport(
-        (0, import_react104.getViewportForBounds)(
+        (0, import_react105.getViewportForBounds)(
           bounds,
           canvas.width,
           canvas.height - cardSpace,
@@ -14790,13 +14837,13 @@ var NodeGraphBuilder = ({
     },
     [setNodes, setEdges, resetNodesAndEdges, setViewport, storeApi]
   );
-  const swimlaneOptions = (0, import_react103.useMemo)(
+  const swimlaneOptions = (0, import_react104.useMemo)(
     () => isFlowGraph ? FLOW_GROUP_BYS.filter(
       (groupBy) => hasSwimlanes(initialNodes, groupBy)
     ) : [],
     [isFlowGraph, initialNodes]
   );
-  const swimlaneCounts = (0, import_react103.useMemo)(
+  const swimlaneCounts = (0, import_react104.useMemo)(
     () => Object.fromEntries(
       swimlaneOptions.map((groupBy) => [
         groupBy,
@@ -14805,9 +14852,9 @@ var NodeGraphBuilder = ({
     ),
     [swimlaneOptions, initialNodes]
   );
-  const [groupingShown, setGroupingShown] = (0, import_react103.useState)(0);
-  const groupingRun = (0, import_react103.useRef)(0);
-  const handleSwimlanesChange = (0, import_react103.useCallback)(
+  const [groupingShown, setGroupingShown] = (0, import_react104.useState)(0);
+  const groupingRun = (0, import_react104.useRef)(0);
+  const handleSwimlanesChange = (0, import_react104.useCallback)(
     (requested, style = swimlaneStyleRef.current) => {
       const groupBy = style === "lanes" && requested === "domain-system" ? "domain" : requested;
       if (groupBy === swimlanesRef.current && style === swimlaneStyleRef.current)
@@ -14838,7 +14885,7 @@ var NodeGraphBuilder = ({
     },
     [animateLayout2, setNodes, setEdges, renderedSizeOf]
   );
-  (0, import_react103.useEffect)(() => {
+  (0, import_react104.useEffect)(() => {
     if (groupingShown === 0) return;
     const trail = walkthroughTrailRef.current;
     if (trail.length > 0) {
@@ -14848,9 +14895,9 @@ var NodeGraphBuilder = ({
       fitView({ duration: 400, padding: 0.1 });
     }
   }, [groupingShown]);
-  const nodesInitialized = (0, import_react104.useNodesInitialized)();
-  const groupedOnLoad = (0, import_react103.useRef)(false);
-  (0, import_react103.useEffect)(() => {
+  const nodesInitialized = (0, import_react105.useNodesInitialized)();
+  const groupedOnLoad = (0, import_react104.useRef)(false);
+  (0, import_react104.useEffect)(() => {
     if (!nodesInitialized || groupedOnLoad.current) return;
     groupedOnLoad.current = true;
     const fromUrl = readGroupFromUrl();
@@ -14951,7 +14998,7 @@ var NodeGraphBuilder = ({
             }
           ) })
         ] }) : /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
-          import_react104.ReactFlow,
+          import_react105.ReactFlow,
           {
             nodeTypes,
             proOptions: hideAttribution ? HIDE_ATTRIBUTION : void 0,
@@ -14966,7 +15013,7 @@ var NodeGraphBuilder = ({
             onEdgesChange,
             onEdgeMouseEnter: handleEdgeMouseEnter,
             onEdgeMouseLeave: handleEdgeMouseLeave,
-            connectionLineType: import_react104.ConnectionLineType.SmoothStep,
+            connectionLineType: import_react105.ConnectionLineType.SmoothStep,
             nodeOrigin: NODE_ORIGIN,
             elevateNodesOnSelect: false,
             onNodeClick: handleNodeClick,
@@ -14981,7 +15028,7 @@ var NodeGraphBuilder = ({
             className: `relative${isLayingOut ? " ec-laying-out" : ""}${hasOtherDomains && highlightCrossDomain ? " ec-highlight-cross-domain" : ""}`,
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
-                import_react104.Panel,
+                import_react105.Panel,
                 {
                   position: "top-center",
                   className: "w-full pr-6 pointer-events-none",
@@ -15101,8 +15148,8 @@ var NodeGraphBuilder = ({
                   ]
                 }
               ),
-              includeBackground && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react104.Background, { color: "var(--ec-bg-dots)", gap: 16 }),
-              includeBackground && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react104.Controls, {}),
+              includeBackground && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react105.Background, { color: "var(--ec-bg-dots)", gap: 16 }),
+              includeBackground && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react105.Controls, {}),
               mode === "full" && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                 CanvasToolbar_default,
                 {
@@ -15117,7 +15164,7 @@ var NodeGraphBuilder = ({
                 }
               ),
               showMinimap && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-                import_react104.MiniMap,
+                import_react105.MiniMap,
                 {
                   nodeStrokeWidth: 3,
                   zoomable: true,
@@ -15126,7 +15173,7 @@ var NodeGraphBuilder = ({
                 }
               ),
               swimlaneOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-                import_react104.Panel,
+                import_react105.Panel,
                 {
                   position: "top-right",
                   style: mode === "full" && showSearch ? SWIMLANE_PICKER_PANEL_STYLE_UNDER_SEARCH : void 0,
@@ -15143,7 +15190,7 @@ var NodeGraphBuilder = ({
                 }
               ),
               isFlowGraph && showFlowWalkthrough && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(WalkthroughBadges_default, { trail: walkthroughTrail }),
-              isFlowGraph && showFlowWalkthrough && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react104.Panel, { position: "bottom-left", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+              isFlowGraph && showFlowWalkthrough && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react105.Panel, { position: "bottom-left", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                 StepWalkthrough_default,
                 {
                   nodes: walkthroughNodes,
@@ -15154,7 +15201,7 @@ var NodeGraphBuilder = ({
                 }
               ) }),
               isDevMode && hasLayoutChanges && !swimlanes && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-                import_react104.Panel,
+                import_react105.Panel,
                 {
                   position: "bottom-left",
                   style: isFlowGraph && showFlowWalkthrough ? LAYOUT_CHANGE_PANEL_STYLE_WITH_WALKTHROUGH : LAYOUT_CHANGE_PANEL_STYLE_DEFAULT,
@@ -15317,8 +15364,8 @@ var NodeGraph = ({
   onSaveLayout,
   onResetLayout
 }) => {
-  const [graphLayout, setGraphLayout] = (0, import_react103.useState)(null);
-  (0, import_react103.useEffect)(() => {
+  const [graphLayout, setGraphLayout] = (0, import_react104.useState)(null);
+  (0, import_react104.useEffect)(() => {
     if (!graph) return setGraphLayout(null);
     let current = true;
     layoutGraph(graph.nodes, graph.edges, {
@@ -15336,16 +15383,16 @@ 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_react103.useState)(null);
-  const [showFooter, setShowFooter] = (0, import_react103.useState)(true);
+  const [elem, setElem] = (0, import_react104.useState)(null);
+  const [showFooter, setShowFooter] = (0, import_react104.useState)(true);
   const containerToRenderInto = portalId || `${id}-portal`;
-  const [showOverview, setShowOverview] = (0, import_react103.useState)(() => {
+  const [showOverview, setShowOverview] = (0, import_react104.useState)(() => {
     if (!overviewGraph) return false;
     const level = new URLSearchParams(window.location.search).get("level");
     return level === null || level === "1";
   });
-  const [transitionFrom, setTransitionFrom] = (0, import_react103.useState)();
-  const handleShowOverview = (0, import_react103.useCallback)(
+  const [transitionFrom, setTransitionFrom] = (0, import_react104.useState)();
+  const handleShowOverview = (0, import_react104.useCallback)(
     (show, from) => {
       setTransitionFrom(from);
       setShowOverview(show);
@@ -15354,14 +15401,14 @@ var NodeGraph = ({
     []
   );
   const overview = showOverview ? overviewGraph : void 0;
-  const hiddenLegendKeys = (0, import_react103.useRef)([]);
-  const handleHiddenLegendKeysChange = (0, import_react103.useCallback)((keys) => {
+  const hiddenLegendKeys = (0, import_react104.useRef)([]);
+  const handleHiddenLegendKeysChange = (0, import_react104.useCallback)((keys) => {
     hiddenLegendKeys.current = keys;
   }, []);
-  (0, import_react103.useEffect)(() => {
+  (0, import_react104.useEffect)(() => {
     setElem(document.getElementById(containerToRenderInto));
   }, []);
-  (0, import_react103.useEffect)(() => {
+  (0, import_react104.useEffect)(() => {
     const urlParams = new URLSearchParams(window.location.search);
     const embed = urlParams.get("embed");
     if (embed === "true") {
@@ -15371,7 +15418,7 @@ var NodeGraph = ({
   if (!elem || graph && !graphLayout) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { children: (0, import_react_dom.createPortal)(
     // Remount when switching graphs so each starts from a clean state
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_react104.ReactFlowProvider, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_react105.ReactFlowProvider, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
         NodeGraphBuilder,
         {
@@ -15568,6 +15615,7 @@ var exportNodeGraphForStudio = (data) => {
   DATA,
   Data,
   DataProductNode,
+  DomainCardNode,
   DomainNode,
   ENTITY_TARGET_HANDLE_ID,
   EVENT,