@eventcatalog/visualiser 4.1.0 → 4.1.2

package/dist/index.mjs

@@ -1,10 +1,10 @@
 // src/components/NodeGraph.tsx
 import {
-  useEffect as useEffect9,
+  useEffect as useEffect10,
   useMemo as useMemo18,
   useState as useState15,
-  useCallback as useCallback12,
-  useRef as useRef7,
+  useCallback as useCallback13,
+  useRef as useRef8,
   memo as memo40
 } from "react";
 import { createPortal } from "react-dom";
@@ -5210,10 +5210,12 @@ var FlowExpandedNode_default = memo21(function FlowExpandedNode({
 });
 
 // src/nodes/Entity.tsx
-import { Handle as Handle16, Position as Position15 } from "@xyflow/react";
+import { Handle as Handle16, Position as Position15, useUpdateNodeInternals } from "@xyflow/react";
 import * as ContextMenu2 from "@radix-ui/react-context-menu";
-import { memo as memo22, useState as useState4, useMemo as useMemo9 } from "react";
+import { memo as memo22, useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo9, useRef as useRef3, useState as useState4 } from "react";
+import { ChevronDownIcon, ChevronRightIcon } from "@heroicons/react/20/solid";
 import { Fragment as Fragment5, jsx as jsx25, jsxs as jsxs23 } from "react/jsx-runtime";
+var ENTITY_TARGET_HANDLE_ID = "__eventcatalog-entity-target";
 function classNames15(...classes) {
   return classes.filter(Boolean).join(" ");
 }
@@ -5223,12 +5225,27 @@ var getPropertyTypeLabel = (property) => {
   }
   return property.type;
 };
+var getNestedEntityProperties = (property) => {
+  if (property.properties?.length) return property.properties;
+  if (property.type === "array" && property.items?.properties?.length) {
+    return property.items.properties;
+  }
+  return [];
+};
 var Entity_default = memo22(function EntityNode({
+  id,
   data,
   sourcePosition,
   targetPosition
 }) {
-  const { mode, entity, externalToDomain, domainName } = data;
+  const {
+    mode,
+    entity,
+    externalToDomain,
+    domainName,
+    entityTargetHandle = ENTITY_TARGET_HANDLE_ID,
+    referencePropertyNames = EMPTY_ARRAY
+  } = data;
   const {
     name,
     version,
@@ -5243,7 +5260,123 @@ var Entity_default = memo22(function EntityNode({
   } = styles || {};
   const Icon = useMemo9(() => getIcon(icon), [icon]);
   const [hoveredProperty, setHoveredProperty] = useState4(null);
+  const [expandedProperties, setExpandedProperties] = useState4(
+    () => /* @__PURE__ */ new Set()
+  );
+  const previousExpandedProperties = useRef3(expandedProperties);
+  const updateNodeInternals = useUpdateNodeInternals();
   const portalContainer = usePortalContainer();
+  const referenceProperties = useMemo9(
+    () => new Set(referencePropertyNames),
+    [referencePropertyNames]
+  );
+  const toggleProperty = useCallback3((propertyPath) => {
+    setExpandedProperties((current) => {
+      const next = new Set(current);
+      if (next.has(propertyPath)) {
+        next.delete(propertyPath);
+      } else {
+        next.add(propertyPath);
+      }
+      return next;
+    });
+  }, []);
+  useEffect3(() => {
+    if (previousExpandedProperties.current === expandedProperties) return;
+    previousExpandedProperties.current = expandedProperties;
+    updateNodeInternals(id);
+  }, [expandedProperties, id, updateNodeInternals]);
+  const renderPropertyRows = (entityProperties, depth = 0, parentPath = "") => entityProperties.map((property, index) => {
+    const propertyPath = parentPath ? `${parentPath}.${property.name}` : property.name;
+    const propertyKey = `${propertyPath}-${index}`;
+    const isHovered = hoveredProperty === propertyKey;
+    const nestedProperties = getNestedEntityProperties(property);
+    const isExpandable = nestedProperties.length > 0;
+    const isExpanded = expandedProperties.has(propertyPath);
+    const isTopLevel = depth === 0;
+    const referencedEntityId = property.references || (isTopLevel && referenceProperties.has(property.name) ? property.items?.type : void 0);
+    return /* @__PURE__ */ jsxs23("div", { children: [
+      /* @__PURE__ */ jsxs23(
+        "div",
+        {
+          className: classNames15(
+            "relative flex items-center justify-between py-2 pr-4 hover:bg-[rgb(var(--ec-page-border)/0.2)]",
+            isExpandable && "nodrag nopan cursor-pointer"
+          ),
+          style: { paddingLeft: `${16 + depth * 16}px` },
+          role: isExpandable ? "button" : void 0,
+          tabIndex: isExpandable ? 0 : void 0,
+          "aria-label": isExpandable ? `${isExpanded ? "Collapse" : "Expand"} ${property.name}` : void 0,
+          "aria-expanded": isExpandable ? isExpanded : void 0,
+          onClick: (event) => {
+            if (!isExpandable) return;
+            const target = event.target;
+            if (target.closest(".react-flow__handle")) return;
+            toggleProperty(propertyPath);
+          },
+          onKeyDown: (event) => {
+            if (!isExpandable || event.key !== "Enter" && event.key !== " ")
+              return;
+            event.preventDefault();
+            toggleProperty(propertyPath);
+          },
+          onMouseEnter: () => property.description && setHoveredProperty(propertyKey),
+          onMouseLeave: () => setHoveredProperty(null),
+          children: [
+            isTopLevel && /* @__PURE__ */ jsxs23(Fragment5, { children: [
+              /* @__PURE__ */ jsx25(
+                Handle16,
+                {
+                  type: "target",
+                  position: Position15.Left,
+                  id: `${property.name}-target`,
+                  className: "!w-3 !h-3 !bg-[rgb(var(--ec-card-bg))] !border-2 !border-[rgb(var(--ec-page-border))] !rounded-full !left-[-0px]",
+                  style: HANDLE_LEFT_OFFSET_STYLE
+                }
+              ),
+              /* @__PURE__ */ jsx25(
+                Handle16,
+                {
+                  type: "source",
+                  position: Position15.Right,
+                  id: `${property.name}-source`,
+                  className: "!w-3 !h-3 !bg-[rgb(var(--ec-card-bg))] !border-2 !border-[rgb(var(--ec-page-border))] !rounded-full !right-[-0px]",
+                  style: HANDLE_RIGHT_OFFSET_STYLE
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs23("div", { className: "flex-1 flex items-center justify-between gap-3 min-w-0", children: [
+              /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-1 min-w-0", children: [
+                isExpandable && /* @__PURE__ */ jsx25(
+                  "span",
+                  {
+                    className: "shrink-0 text-[rgb(var(--ec-page-text-muted))]",
+                    "aria-hidden": "true",
+                    children: isExpanded ? /* @__PURE__ */ jsx25(ChevronDownIcon, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx25(ChevronRightIcon, { className: "h-3.5 w-3.5" })
+                  }
+                ),
+                /* @__PURE__ */ jsx25("span", { className: "text-sm font-medium text-[rgb(var(--ec-page-text))] truncate", children: property.name }),
+                property.required && /* @__PURE__ */ jsx25("span", { className: "text-red-500 text-xs", children: "*" })
+              ] }),
+              /* @__PURE__ */ jsx25("span", { className: "text-sm text-[rgb(var(--ec-page-text-muted))] font-mono shrink-0", children: getPropertyTypeLabel(property) })
+            ] }),
+            referencedEntityId && /* @__PURE__ */ jsx25("div", { className: "absolute right-2 top-1/2 transform -translate-y-1/2", children: /* @__PURE__ */ jsx25(
+              "div",
+              {
+                className: "w-2 h-2 bg-blue-500 rounded-full",
+                title: `References ${referencedEntityId}`
+              }
+            ) }),
+            isHovered && property.description && /* @__PURE__ */ jsxs23("div", { className: "absolute left-full ml-2 top-1/2 transform -translate-y-1/2 z-[9999] w-[200px] bg-gray-900 text-white text-xs rounded-lg py-2 px-3 pointer-events-none shadow-xl max-w-xl opacity-100", children: [
+              /* @__PURE__ */ jsx25("div", { className: "text-gray-200 whitespace-normal break-words", children: property.description }),
+              /* @__PURE__ */ jsx25("div", { className: "absolute right-full top-1/2 transform -translate-y-1/2 border-4 border-transparent border-r-gray-900" })
+            ] })
+          ]
+        }
+      ),
+      isExpandable && isExpanded && /* @__PURE__ */ jsx25("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] border-t border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-content-hover)/0.18)]", children: renderPropertyRows(nestedProperties, depth + 1, propertyPath) })
+    ] }, propertyKey);
+  });
   return /* @__PURE__ */ jsxs23(ContextMenu2.Root, { children: [
     /* @__PURE__ */ jsx25(ContextMenu2.Trigger, { children: /* @__PURE__ */ jsxs23(
       "div",
@@ -5257,10 +5390,20 @@ var Entity_default = memo22(function EntityNode({
             "div",
             {
               className: classNames15(
-                "px-4 py-2 rounded-t-lg border-b border-[rgb(var(--ec-page-border))]",
+                "relative px-4 py-2 rounded-t-lg border-b border-[rgb(var(--ec-page-border))]",
                 externalToDomain ? "bg-amber-500/20" : "bg-blue-500/15"
               ),
               children: [
+                /* @__PURE__ */ jsx25(
+                  Handle16,
+                  {
+                    type: "target",
+                    position: Position15.Left,
+                    id: entityTargetHandle,
+                    className: "!w-3 !h-3 !bg-[rgb(var(--ec-card-bg))] !border-2 !border-[rgb(var(--ec-page-border))] !rounded-full !left-[-0px]",
+                    style: HANDLE_LEFT_OFFSET_STYLE
+                  }
+                ),
                 /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2 min-w-0", children: [
                   Icon && /* @__PURE__ */ jsx25(Icon, { className: "w-4 h-4 text-[rgb(var(--ec-page-text-muted))]" }),
                   /* @__PURE__ */ jsx25(
@@ -5286,59 +5429,7 @@ var Entity_default = memo22(function EntityNode({
               ]
             }
           ),
-          properties.length > 0 ? /* @__PURE__ */ jsx25("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] relative", children: properties.map((property, index) => {
-            const propertyKey = `${property.name}-${index}`;
-            const isHovered = hoveredProperty === propertyKey;
-            return /* @__PURE__ */ jsxs23(
-              "div",
-              {
-                className: "relative flex items-center justify-between px-4 py-2 hover:bg-[rgb(var(--ec-page-border)/0.2)]",
-                onMouseEnter: () => property.description && setHoveredProperty(propertyKey),
-                onMouseLeave: () => setHoveredProperty(null),
-                children: [
-                  /* @__PURE__ */ jsx25(
-                    Handle16,
-                    {
-                      type: "target",
-                      position: Position15.Left,
-                      id: `${property.name}-target`,
-                      className: "!w-3 !h-3 !bg-[rgb(var(--ec-card-bg))] !border-2 !border-[rgb(var(--ec-page-border))] !rounded-full !left-[-0px]",
-                      style: HANDLE_LEFT_OFFSET_STYLE
-                    }
-                  ),
-                  /* @__PURE__ */ jsx25(
-                    Handle16,
-                    {
-                      type: "source",
-                      position: Position15.Right,
-                      id: `${property.name}-source`,
-                      className: "!w-3 !h-3 !bg-[rgb(var(--ec-card-bg))] !border-2 !border-[rgb(var(--ec-page-border))] !rounded-full !right-[-0px]",
-                      style: HANDLE_RIGHT_OFFSET_STYLE
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs23("div", { className: "flex-1 flex items-center justify-between", children: [
-                    /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-1", children: [
-                      /* @__PURE__ */ jsx25("span", { className: "text-sm font-medium text-[rgb(var(--ec-page-text))]", children: property.name }),
-                      property.required && /* @__PURE__ */ jsx25("span", { className: "text-red-500 text-xs", children: "*" })
-                    ] }),
-                    /* @__PURE__ */ jsx25("span", { className: "text-sm text-[rgb(var(--ec-page-text-muted))] font-mono", children: getPropertyTypeLabel(property) })
-                  ] }),
-                  (property.references || property.type === "array" && property.items?.type) && /* @__PURE__ */ jsx25("div", { className: "absolute right-2 top-1/2 transform -translate-y-1/2", children: /* @__PURE__ */ jsx25(
-                    "div",
-                    {
-                      className: "w-2 h-2 bg-blue-500 rounded-full",
-                      title: `References ${property.references || property.items.type}`
-                    }
-                  ) }),
-                  isHovered && property.description && /* @__PURE__ */ jsxs23("div", { className: "absolute left-full ml-2 top-1/2 transform -translate-y-1/2 z-[9999] w-[200px] bg-gray-900 text-white text-xs rounded-lg py-2 px-3 pointer-events-none shadow-xl max-w-xl opacity-100", children: [
-                    /* @__PURE__ */ jsx25("div", { className: "text-gray-200 whitespace-normal break-words", children: property.description }),
-                    /* @__PURE__ */ jsx25("div", { className: "absolute right-full top-1/2 transform -translate-y-1/2 border-4 border-transparent border-r-gray-900" })
-                  ] })
-                ]
-              },
-              propertyKey
-            );
-          }) }) : /* @__PURE__ */ jsx25("div", { className: "px-4 py-3 text-sm text-[rgb(var(--ec-page-text-muted))] text-center", children: "No properties defined" }),
+          properties.length > 0 ? /* @__PURE__ */ jsx25("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] relative", children: renderPropertyRows(properties) }) : /* @__PURE__ */ jsx25("div", { className: "px-4 py-3 text-sm text-[rgb(var(--ec-page-text-muted))] text-center", children: "No properties defined" }),
           properties.length === 0 && /* @__PURE__ */ jsxs23(Fragment5, { children: [
             targetPosition && /* @__PURE__ */ jsx25(Handle16, { type: "target", position: targetPosition }),
             sourcePosition && /* @__PURE__ */ jsx25(Handle16, { type: "source", position: sourcePosition })
@@ -5576,7 +5667,7 @@ import {
   Position as Position17
 } from "@xyflow/react";
 import * as ContextMenu3 from "@radix-ui/react-context-menu";
-import { memo as memo25, useState as useState5, useCallback as useCallback3, useMemo as useMemo10 } from "react";
+import { memo as memo25, useState as useState5, useCallback as useCallback4, useMemo as useMemo10 } from "react";
 import { jsx as jsx28, jsxs as jsxs26 } from "react/jsx-runtime";
 var Domain_default = memo25(function DomainNode({ data, id: nodeId }) {
   const { mode, domain } = data;
@@ -5589,7 +5680,7 @@ var Domain_default = memo25(function DomainNode({ data, id: nodeId }) {
   const Icon = useMemo10(() => getIcon(icon), [icon]);
   const ServerIcon5 = useMemo10(() => getIcon("ServerIcon"), []);
   const portalContainer = usePortalContainer();
-  const handleSelectionChange = useCallback3(
+  const handleSelectionChange = useCallback4(
     ({ nodes: selectedNodes }) => {
       if (selectedNodes.length === 0) {
         setHighlightedServices(/* @__PURE__ */ new Set());
@@ -7177,9 +7268,9 @@ function LabelledStepEdge(props) {
 // src/components/VisualiserSearch.tsx
 import {
   useState as useState6,
-  useCallback as useCallback4,
-  useRef as useRef3,
-  useEffect as useEffect3,
+  useCallback as useCallback5,
+  useRef as useRef4,
+  useEffect as useEffect4,
   forwardRef,
   useImperativeHandle,
   memo as memo36
@@ -7264,11 +7355,11 @@ var VisualiserSearch = memo36(
       const [filteredSuggestions, setFilteredSuggestions] = useState6([]);
       const [showSuggestions, setShowSuggestions] = useState6(false);
       const [selectedSuggestionIndex, setSelectedSuggestionIndex] = useState6(-1);
-      const searchInputRef = useRef3(null);
-      const containerRef = useRef3(null);
-      const suggestionsListRef = useRef3(null);
-      const suggestionItemRefs = useRef3([]);
-      const hideSuggestions = useCallback4(() => {
+      const searchInputRef = useRef4(null);
+      const containerRef = useRef4(null);
+      const suggestionsListRef = useRef4(null);
+      const suggestionItemRefs = useRef4([]);
+      const hideSuggestions = useCallback5(() => {
         setShowSuggestions(false);
         setSelectedSuggestionIndex(-1);
       }, []);
@@ -7279,7 +7370,7 @@ var VisualiserSearch = memo36(
         }),
         [hideSuggestions]
       );
-      const getNodeDisplayName = useCallback4((node) => {
+      const getNodeDisplayName = useCallback5((node) => {
         if (node.type === "messageGroup") {
           return node.data?.groupName || node.id;
         }
@@ -7300,7 +7391,7 @@ var VisualiserSearch = memo36(
         const version = message?.version || agent?.version || agentTool?.version || service?.version || domain?.version || system?.version || entity?.version || channel?.version || dataProduct?.version || data?.version || node.data?.version;
         return formatVersionedName(name, version);
       }, []);
-      const getNodeResourceKey = useCallback4(
+      const getNodeResourceKey = useCallback5(
         (node, label) => {
           if (node.type === "messageGroup" || node.type === "messageGroupExpanded") {
             return `${node.type}:${node.id}`.toLowerCase();
@@ -7316,7 +7407,7 @@ var VisualiserSearch = memo36(
         },
         []
       );
-      const dedupeSearchSuggestions = useCallback4(
+      const dedupeSearchSuggestions = useCallback5(
         (suggestions) => {
           const uniqueSuggestions = [];
           const indexByResourceKey = /* @__PURE__ */ new Map();
@@ -7340,7 +7431,7 @@ var VisualiserSearch = memo36(
         },
         []
       );
-      const getSearchSuggestions = useCallback4(
+      const getSearchSuggestions = useCallback5(
         (nodesToIndex) => {
           const suggestions = nodesToIndex.flatMap((node) => {
             if (node.type === "system-group") return [];
@@ -7386,7 +7477,7 @@ var VisualiserSearch = memo36(
         },
         [dedupeSearchSuggestions, getNodeDisplayName, getNodeResourceKey]
       );
-      const getNodeTypeMeta = useCallback4((nodeType) => {
+      const getNodeTypeMeta = useCallback5((nodeType) => {
         const meta = {
           events: {
             label: "Event",
@@ -7534,7 +7625,7 @@ var VisualiserSearch = memo36(
           badgeClass: "border-gray-500/25 bg-gray-500/10 text-gray-700 dark:text-gray-300"
         };
       }, []);
-      const handleSearchChange = useCallback4(
+      const handleSearchChange = useCallback5(
         (event) => {
           const query = event.target.value;
           setSearchQuery(query);
@@ -7554,7 +7645,7 @@ var VisualiserSearch = memo36(
         },
         [nodes, getSearchSuggestions]
       );
-      const handleSearchFocus = useCallback4(() => {
+      const handleSearchFocus = useCallback5(() => {
         const suggestions = getSearchSuggestions(nodes);
         const search = searchQuery.toLowerCase();
         setFilteredSuggestions(
@@ -7565,7 +7656,7 @@ var VisualiserSearch = memo36(
         setShowSuggestions(true);
         setSelectedSuggestionIndex(-1);
       }, [nodes, searchQuery, getSearchSuggestions]);
-      const handleSuggestionClick = useCallback4(
+      const handleSuggestionClick = useCallback5(
         (suggestion) => {
           setSearchQuery("");
           setFilteredSuggestions([]);
@@ -7575,7 +7666,7 @@ var VisualiserSearch = memo36(
         },
         [onNodeSelect]
       );
-      const handleSearchKeyDown = useCallback4(
+      const handleSearchKeyDown = useCallback5(
         (event) => {
           switch (event.key) {
             case "ArrowDown":
@@ -7615,7 +7706,7 @@ var VisualiserSearch = memo36(
           handleSuggestionClick
         ]
       );
-      const clearSearch = useCallback4(() => {
+      const clearSearch = useCallback5(() => {
         setSearchQuery("");
         setShowSuggestions(false);
         setFilteredSuggestions([]);
@@ -7625,13 +7716,13 @@ var VisualiserSearch = memo36(
           searchInputRef.current.focus();
         }
       }, [onClear]);
-      useEffect3(() => {
+      useEffect4(() => {
         suggestionItemRefs.current = suggestionItemRefs.current.slice(
           0,
           filteredSuggestions.length
         );
       }, [filteredSuggestions.length]);
-      useEffect3(() => {
+      useEffect4(() => {
         if (!showSuggestions || selectedSuggestionIndex < 0) return;
         const list = suggestionsListRef.current;
         const item = suggestionItemRefs.current[selectedSuggestionIndex];
@@ -7650,7 +7741,7 @@ var VisualiserSearch = memo36(
         selectedSuggestionIndex,
         filteredSuggestions.length
       ]);
-      useEffect3(() => {
+      useEffect4(() => {
         const handleClickOutside = (event) => {
           if (containerRef.current && !containerRef.current.contains(event.target)) {
             setShowSuggestions(false);
@@ -7761,13 +7852,13 @@ var VisualiserSearch_default = VisualiserSearch;
 // src/components/StepWalkthrough.tsx
 import {
   useState as useState7,
-  useEffect as useEffect4,
-  useCallback as useCallback5,
+  useEffect as useEffect5,
+  useCallback as useCallback6,
   useMemo as useMemo15,
-  useRef as useRef4,
+  useRef as useRef5,
   memo as memo37
 } from "react";
-import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
+import { ChevronLeftIcon, ChevronRightIcon as ChevronRightIcon2 } from "@heroicons/react/24/outline";
 import { Fragment as Fragment10, jsx as jsx42, jsxs as jsxs39 } from "react/jsx-runtime";
 var StepWalkthrough_default = memo37(function StepWalkthrough({
   nodes,
@@ -7781,19 +7872,19 @@ var StepWalkthrough_default = memo37(function StepWalkthrough({
   const [availablePaths, setAvailablePaths] = useState7([]);
   const [selectedPathIndex, setSelectedPathIndex] = useState7(0);
   const [startNodeId, setStartNodeId] = useState7(null);
-  const nodeIdsKeyRef = useRef4("");
+  const nodeIdsKeyRef = useRef5("");
   const computedNodeIdsKey = nodes.map((n) => n.id).join(",");
   if (computedNodeIdsKey !== nodeIdsKeyRef.current) {
     nodeIdsKeyRef.current = computedNodeIdsKey;
   }
   const nodeIdsKey = nodeIdsKeyRef.current;
-  const edgeKeyRef = useRef4("");
+  const edgeKeyRef = useRef5("");
   const computedEdgeKey = edges.map((e) => `${e.source}-${e.target}`).join(",");
   if (computedEdgeKey !== edgeKeyRef.current) {
     edgeKeyRef.current = computedEdgeKey;
   }
   const edgeKey = edgeKeyRef.current;
-  useEffect4(() => {
+  useEffect5(() => {
     if (isFlowVisualization && nodes.length > 0) {
       const incomingEdgeMap = /* @__PURE__ */ new Map();
       nodes.forEach((node) => incomingEdgeMap.set(node.id, 0));
@@ -7815,7 +7906,7 @@ var StepWalkthrough_default = memo37(function StepWalkthrough({
       }
     }
   }, [nodeIdsKey, edgeKey, isFlowVisualization, startNodeId]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (currentNodeId) {
       const currentExists = nodes.some(
         (n) => n.id === currentNodeId
@@ -7844,7 +7935,7 @@ var StepWalkthrough_default = memo37(function StepWalkthrough({
       setAvailablePaths([]);
     }
   }, [currentNodeId, nodeIdsKey, edgeKey]);
-  const handleNextStep = useCallback5(() => {
+  const handleNextStep = useCallback6(() => {
     if (currentStepIndex === -1) {
       if (startNodeId) {
         setPathHistory([startNodeId]);
@@ -7871,7 +7962,7 @@ var StepWalkthrough_default = memo37(function StepWalkthrough({
     currentNodeId,
     onStepChange
   ]);
-  const handlePreviousStep = useCallback5(() => {
+  const handlePreviousStep = useCallback6(() => {
     if (currentStepIndex > 0) {
       const newIndex = currentStepIndex - 1;
       const prevNodeId = pathHistory[newIndex];
@@ -7884,10 +7975,10 @@ var StepWalkthrough_default = memo37(function StepWalkthrough({
       onStepChange(null);
     }
   }, [currentStepIndex, pathHistory, onStepChange]);
-  const handlePathSelection = useCallback5((index) => {
+  const handlePathSelection = useCallback6((index) => {
     setSelectedPathIndex(index);
   }, []);
-  const handleFinish = useCallback5(() => {
+  const handleFinish = useCallback6(() => {
     setCurrentNodeId(null);
     setCurrentStepIndex(-1);
     setPathHistory([]);
@@ -7992,7 +8083,7 @@ var StepWalkthrough_default = memo37(function StepWalkthrough({
             className: "flex items-center justify-center px-4 py-2 text-xs font-medium bg-[rgb(var(--ec-accent))] text-white rounded-md hover:bg-[rgb(var(--ec-accent-hover))] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:ring-offset-2 transition-colors",
             children: [
               "Next",
-              /* @__PURE__ */ jsx42(ChevronRightIcon, { className: "w-4 h-4 ml-1" })
+              /* @__PURE__ */ jsx42(ChevronRightIcon2, { className: "w-4 h-4 ml-1" })
             ]
           }
         ) : /* @__PURE__ */ jsx42(
@@ -8009,7 +8100,7 @@ var StepWalkthrough_default = memo37(function StepWalkthrough({
 });
 
 // src/components/StudioModal.tsx
-import { useState as useState8, useCallback as useCallback6 } from "react";
+import { useState as useState8, useCallback as useCallback7 } from "react";
 import * as Dialog2 from "@radix-ui/react-dialog";
 import { CheckIcon, ClipboardIcon, ExternalLinkIcon } from "lucide-react";
 import { useReactFlow as useReactFlow2 } from "@xyflow/react";
@@ -8082,7 +8173,7 @@ var StudioModal = ({ isOpen, onClose }) => {
   const [copySuccess, setCopySuccess] = useState8(false);
   const portalContainer = usePortalContainer();
   const { toObject } = useReactFlow2();
-  const handleCopyToClipboard = useCallback6(async () => {
+  const handleCopyToClipboard = useCallback7(async () => {
     const visualizerData = toObject();
     const studioData = exportNodeGraphForStudio(visualizerData);
     try {
@@ -8179,7 +8270,7 @@ var StudioModal = ({ isOpen, onClose }) => {
 var StudioModal_default = StudioModal;
 
 // src/components/FocusModeModal.tsx
-import { useState as useState10, useCallback as useCallback8, useEffect as useEffect6 } from "react";
+import { useState as useState10, useCallback as useCallback9, useEffect as useEffect7 } from "react";
 import * as Dialog3 from "@radix-ui/react-dialog";
 import { XIcon as XIcon2, FocusIcon } from "lucide-react";
 import {
@@ -8189,10 +8280,10 @@ import {
 // src/components/FocusMode/FocusModeContent.tsx
 import {
   useMemo as useMemo16,
-  useCallback as useCallback7,
-  useEffect as useEffect5,
+  useCallback as useCallback8,
+  useEffect as useEffect6,
   useState as useState9,
-  useRef as useRef5
+  useRef as useRef6
 } from "react";
 import {
   ReactFlow,
@@ -8463,16 +8554,16 @@ var FocusModeContent = ({
   const [needsFitView, setNeedsFitView] = useState9(false);
   const [hoveredEdgeId, setHoveredEdgeId] = useState9(null);
   const [isReady, setIsReady] = useState9(false);
-  const reactFlowInitialized = useRef5(false);
-  const animationTimeoutRef = useRef5(null);
-  useEffect5(() => {
+  const reactFlowInitialized = useRef6(false);
+  const animationTimeoutRef = useRef6(null);
+  useEffect6(() => {
     return () => {
       if (animationTimeoutRef.current) {
         clearTimeout(animationTimeoutRef.current);
       }
     };
   }, []);
-  const calculateFocusedGraph = useCallback7(
+  const calculateFocusedGraph = useCallback8(
     (centerId) => {
       const centerNode = allNodes.find((n) => n.id === centerId);
       if (!centerNode) {
@@ -8561,13 +8652,13 @@ var FocusModeContent = ({
   );
   const [displayNodes, setDisplayNodes] = useNodesState(initialGraph.nodes);
   const [displayEdges, setDisplayEdges] = useEdgesState(initialGraph.edges);
-  useEffect5(() => {
+  useEffect6(() => {
     const { nodes, edges } = calculateFocusedGraph(centerNodeId);
     setDisplayNodes(nodes);
     setDisplayEdges(edges);
     setNeedsFitView(true);
   }, [centerNodeId, calculateFocusedGraph, setDisplayNodes, setDisplayEdges]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (needsFitView && reactFlowInitialized.current) {
       const timer = setTimeout(() => {
         fitView({ padding: 0.2, duration: 300 });
@@ -8576,14 +8667,14 @@ var FocusModeContent = ({
       return () => clearTimeout(timer);
     }
   }, [needsFitView, displayNodes, fitView]);
-  const handleInit = useCallback7(() => {
+  const handleInit = useCallback8(() => {
     reactFlowInitialized.current = true;
     requestAnimationFrame(() => {
       fitView({ padding: 0.2, duration: 0 });
       setIsReady(true);
     });
   }, [fitView]);
-  const handleSwitchNode = useCallback7(
+  const handleSwitchNode = useCallback8(
     (nodeId, direction) => {
       if (nodeId === centerNodeId || isAnimating) return;
       setIsAnimating(true);
@@ -8619,7 +8710,7 @@ var FocusModeContent = ({
     },
     [centerNodeId, isAnimating, setDisplayNodes, onSwitchCenter]
   );
-  const handleNodeClick = useCallback7(
+  const handleNodeClick = useCallback8(
     (_, clickedNode) => {
       if (clickedNode.id === centerNodeId || isAnimating) return;
       const direction = (clickedNode.position?.x ?? 0) < 0 ? "left" : "right";
@@ -8627,13 +8718,13 @@ var FocusModeContent = ({
     },
     [centerNodeId, isAnimating, handleSwitchNode]
   );
-  const handleEdgeMouseEnter = useCallback7(
+  const handleEdgeMouseEnter = useCallback8(
     (_, edge) => {
       setHoveredEdgeId(edge.id);
     },
     []
   );
-  const handleEdgeMouseLeave = useCallback7(() => {
+  const handleEdgeMouseLeave = useCallback8(() => {
     setHoveredEdgeId(null);
   }, []);
   const edgesWithHover = useMemo16(() => {
@@ -8717,12 +8808,12 @@ var FocusModeModal = ({
   );
   const isDark = useDarkMode();
   const portalContainer = usePortalContainer();
-  useEffect6(() => {
+  useEffect7(() => {
     if (isOpen && initialNodeId) {
       setCenterNodeId(initialNodeId);
     }
   }, [isOpen, initialNodeId]);
-  const handleSwitchCenter = useCallback8(
+  const handleSwitchCenter = useCallback9(
     (newCenterNodeId, _direction) => {
       setCenterNodeId(newCenterNodeId);
     },
@@ -8876,7 +8967,7 @@ var FocusModeModal = ({
 var FocusModeModal_default = FocusModeModal;
 
 // src/components/MermaidView.tsx
-import { useState as useState11, useEffect as useEffect7, useRef as useRef6, useCallback as useCallback9 } from "react";
+import { useState as useState11, useEffect as useEffect8, useRef as useRef7, useCallback as useCallback10 } from "react";
 import { CheckIcon as CheckIcon2, ClipboardIcon as ClipboardIcon2 } from "lucide-react";
 
 // src/utils/export-mermaid.ts
@@ -9170,17 +9261,17 @@ var MermaidView = ({
   const [previewSvg, setPreviewSvg] = useState11(null);
   const [previewError, setPreviewError] = useState11(null);
   const [isRendering, setIsRendering] = useState11(true);
-  const containerRef = useRef6(null);
-  const svgContainerRef = useRef6(null);
-  const panZoomInstanceRef = useRef6(null);
-  useEffect7(() => {
+  const containerRef = useRef7(null);
+  const svgContainerRef = useRef7(null);
+  const panZoomInstanceRef = useRef7(null);
+  useEffect8(() => {
     const code = convertToMermaid(nodes, edges, {
       includeStyles: true,
       direction: "LR"
     });
     setMermaidCode(code);
   }, [nodes, edges]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!mermaidCode) return;
     let cancelled = false;
     setIsRendering(true);
@@ -9225,7 +9316,7 @@ var MermaidView = ({
       cancelled = true;
     };
   }, [mermaidCode]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!previewSvg || !svgContainerRef.current) return;
     const initZoom = async () => {
       const svgElement = svgContainerRef.current?.querySelector("svg");
@@ -9264,7 +9355,7 @@ var MermaidView = ({
       }
     };
   }, [previewSvg]);
-  const handleCopyToClipboard = useCallback9(async () => {
+  const handleCopyToClipboard = useCallback10(async () => {
     await copyToClipboard(mermaidCode);
     setCopySuccess(true);
     setTimeout(() => setCopySuccess(false), 2e3);
@@ -9377,7 +9468,7 @@ var MermaidView = ({
 var MermaidView_default = MermaidView;
 
 // src/hooks/use-channel-visibility.ts
-import { useCallback as useCallback10, useMemo as useMemo17, useState as useState12, useEffect as useEffect8 } from "react";
+import { useCallback as useCallback11, useMemo as useMemo17, useState as useState12, useEffect as useEffect9 } from "react";
 
 // src/utils/utils/utils.ts
 import { MarkerType as MarkerType6, Position as Position25 } from "@xyflow/react";
@@ -9505,7 +9596,7 @@ var useChannelVisibility = ({
   const [hideChannels, setHideChannels] = useState12(false);
   const [initialNodes, setInitialNodes] = useState12(nodes);
   const [initialEdges, setInitialEdges] = useState12(edges);
-  useEffect8(() => {
+  useEffect9(() => {
     const storedHideChannels = localStorage.getItem(
       "EventCatalog:hideChannels"
     );
@@ -9513,14 +9604,14 @@ var useChannelVisibility = ({
       setHideChannels(storedHideChannels === "true");
     }
   }, []);
-  useEffect8(() => {
+  useEffect9(() => {
     const hasChannels = nodes.some((node) => node.type === "channels");
     if (!hideChannels || hasChannels) {
       setInitialNodes(nodes);
       setInitialEdges(edges);
     }
   }, [nodes, edges, hideChannels]);
-  const toggleChannelsVisibility = useCallback10(() => {
+  const toggleChannelsVisibility = useCallback11(() => {
     setHideChannels((prev) => {
       const newValue = !prev;
       localStorage.setItem(
@@ -9570,7 +9661,7 @@ var useChannelVisibility = ({
       (edge, index, self) => index === self.findIndex((t) => t.id === edge.id)
     );
   }, [edges, channels]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (skipProcessing) {
       return;
     }
@@ -10759,7 +10850,7 @@ var buildMessageGroupExpansionNodes = ({
 };
 
 // src/components/NotesToolbarButton.tsx
-import { useState as useState14, useCallback as useCallback11 } from "react";
+import { useState as useState14, useCallback as useCallback12 } from "react";
 import {
   MessageCircle as MessageCircle3,
   AlertTriangle as AlertTriangle2,
@@ -11047,7 +11138,7 @@ function AllNotesModal({
   const portalContainer = usePortalContainer();
   const totalNotes = noteGroups.reduce((sum, g) => sum + g.notes.length, 0);
   const selected = noteGroups[selectedIdx] || noteGroups[0];
-  const handleNavigate = useCallback11(
+  const handleNavigate = useCallback12(
     (nodeId) => {
       const node = nodes.find((n) => n.id === nodeId);
       if (!node) return;
@@ -11490,6 +11581,7 @@ import { Fragment as Fragment15, jsx as jsx52, jsxs as jsxs49 } from "react/jsx-
 var POSITION_CHANGE_THRESHOLD = 1;
 var LARGE_GRAPH_NODE_THRESHOLD = 30;
 var NODE_ORIGIN = [0.1, 0.1];
+var INITIAL_FIT_VIEW_OPTIONS = { padding: 0.2, duration: 0 };
 var MINIMAP_STYLE = {
   backgroundColor: "rgb(var(--ec-page-bg))",
   border: "1px solid rgb(var(--ec-page-border))",
@@ -11675,7 +11767,7 @@ var NodeGraphBuilder = ({
   onSaveLayout,
   onResetLayout
 }) => {
-  useEffect9(() => {
+  useEffect10(() => {
     if (onBuildUrl) {
       setBuildUrlFn(onBuildUrl);
     }
@@ -11749,7 +11841,19 @@ var NodeGraphBuilder = ({
   const [edges, setEdges, onEdgesChange] = useEdgesState2(initialEdges);
   const { fitView, getNodes, getIntersectingNodes, getZoom, setCenter } = useReactFlow5();
   const storeApi = useStoreApi();
-  useEffect9(() => {
+  const previousGraphInputRef = useRef8({
+    nodes: initialNodes,
+    edges: initialEdges
+  });
+  useEffect10(() => {
+    const previousGraphInput = previousGraphInputRef.current;
+    previousGraphInputRef.current = {
+      nodes: initialNodes,
+      edges: initialEdges
+    };
+    if (previousGraphInput.nodes === initialNodes && previousGraphInput.edges === initialEdges) {
+      return;
+    }
     setNodes(initialNodes);
     setEdges(initialEdges);
     requestAnimationFrame(() => {
@@ -11765,28 +11869,28 @@ var NodeGraphBuilder = ({
   const [showMinimap, setShowMinimap] = useState15(false);
   const [hasLayoutChanges, setHasLayoutChanges] = useState15(false);
   const [isSavingLayout, setIsSavingLayout] = useState15(false);
-  const initialPositionsRef = useRef7(
+  const initialPositionsRef = useRef8(
     {}
   );
   const [focusModeOpen, setFocusModeOpen] = useState15(false);
   const [focusedNodeId, setFocusedNodeId] = useState15(null);
   const [isNotesModalOpen, setIsNotesModalOpen] = useState15(false);
-  const openNotesModal = useCallback12(() => setIsNotesModalOpen(true), []);
-  const interactionCountRef = useRef7(0);
-  const startInteraction = useCallback12(() => {
+  const openNotesModal = useCallback13(() => setIsNotesModalOpen(true), []);
+  const interactionCountRef = useRef8(0);
+  const startInteraction = useCallback13(() => {
     interactionCountRef.current += 1;
     if (interactionCountRef.current === 1) {
       reactFlowWrapperRef.current?.classList.add("ec-interaction-active");
     }
   }, []);
-  const endInteraction = useCallback12(() => {
+  const endInteraction = useCallback13(() => {
     interactionCountRef.current = Math.max(0, interactionCountRef.current - 1);
     if (interactionCountRef.current === 0) {
       reactFlowWrapperRef.current?.classList.remove("ec-interaction-active");
     }
   }, []);
-  const hoveredEdgeNodesRef = useRef7([]);
-  const handleEdgeMouseEnter = useCallback12(
+  const hoveredEdgeNodesRef = useRef8([]);
+  const handleEdgeMouseEnter = useCallback13(
     (_, edge) => {
       const wrapper = reactFlowWrapperRef.current;
       if (!wrapper) return;
@@ -11798,15 +11902,15 @@ var NodeGraphBuilder = ({
     },
     []
   );
-  const handleEdgeMouseLeave = useCallback12(() => {
+  const handleEdgeMouseLeave = useCallback13(() => {
     hoveredEdgeNodesRef.current.forEach(
       (el) => el.classList.remove("ec-edge-hover-node")
     );
     hoveredEdgeNodesRef.current = [];
   }, []);
-  const hoveredNodeEdgesRef = useRef7([]);
-  const hoveredNodePeersRef = useRef7([]);
-  const handleNodeMouseEnter = useCallback12(
+  const hoveredNodeEdgesRef = useRef8([]);
+  const hoveredNodePeersRef = useRef8([]);
+  const handleNodeMouseEnter = useCallback13(
     (_, node) => {
       const wrapper = reactFlowWrapperRef.current;
       if (!wrapper) return;
@@ -11835,7 +11939,7 @@ var NodeGraphBuilder = ({
     },
     []
   );
-  const handleNodeMouseLeave = useCallback12(() => {
+  const handleNodeMouseLeave = useCallback13(() => {
     hoveredNodeEdgesRef.current.forEach(
       (el) => el.classList.remove("ec-node-hover-edge")
     );
@@ -11856,14 +11960,14 @@ var NodeGraphBuilder = ({
     setEdges,
     skipProcessing: !hasChannels
   });
-  const searchRef = useRef7(null);
-  const reactFlowWrapperRef = useRef7(null);
-  const scrollableContainerRef = useRef7(null);
-  const nodesRef = useRef7(nodes);
+  const searchRef = useRef8(null);
+  const reactFlowWrapperRef = useRef8(null);
+  const scrollableContainerRef = useRef8(null);
+  const nodesRef = useRef8(nodes);
   nodesRef.current = nodes;
-  const edgesRef = useRef7(edges);
+  const edgesRef = useRef8(edges);
   edgesRef.current = edges;
-  const hideChannelsRef = useRef7(hideChannels);
+  const hideChannelsRef = useRef8(hideChannels);
   hideChannelsRef.current = hideChannels;
   const wrapperNodeIds = useMemo18(() => {
     const ids = /* @__PURE__ */ new Set();
@@ -11882,13 +11986,13 @@ var NodeGraphBuilder = ({
     ),
     [edges, wrapperNodeIds]
   );
-  const animateLayout = useCallback12(() => {
+  const animateLayout = useCallback13(() => {
     const wrapper = reactFlowWrapperRef.current;
     if (!wrapper) return;
     wrapper.classList.add("ec-animating-layout");
     setTimeout(() => wrapper.classList.remove("ec-animating-layout"), 400);
   }, []);
-  const relayoutGraph = useCallback12(
+  const relayoutGraph = useCallback13(
     (nextNodes, nextEdges, anchor) => {
       const g = new dagre3.graphlib.Graph({ compound: true });
       g.setGraph({ rankdir: "LR", ranksep: 300, nodesep: 50 });
@@ -11960,7 +12064,7 @@ var NodeGraphBuilder = ({
     },
     []
   );
-  const makeRoomForRenderedExpandedGroup = useCallback12(
+  const makeRoomForRenderedExpandedGroup = useCallback13(
     (groupNodeId, groupBounds) => {
       const padding = 80;
       const protectedBounds = {
@@ -11989,7 +12093,7 @@ var NodeGraphBuilder = ({
     },
     [getIntersectingNodes, setNodes]
   );
-  const layoutSubFlowChildren = useCallback12(
+  const layoutSubFlowChildren = useCallback13(
     (children, edges2, sizeOf, opts) => {
       const { padding, headerH, fallbackW = 240, fallbackH = 120 } = opts;
       const g = new dagre3.graphlib.Graph();
@@ -12039,7 +12143,7 @@ var NodeGraphBuilder = ({
     },
     []
   );
-  const handleCollapseGroup = useCallback12(
+  const handleCollapseGroup = useCallback13(
     (e) => {
       const target = e.target;
       const collapseBtn = target.closest(
@@ -12116,7 +12220,7 @@ var NodeGraphBuilder = ({
       animateLayout
     ]
   );
-  useEffect9(() => {
+  useEffect10(() => {
     if (isDevMode && initialNodes.length > 0) {
       const positions = {};
       initialNodes.forEach((node) => {
@@ -12125,7 +12229,7 @@ var NodeGraphBuilder = ({
       initialPositionsRef.current = positions;
     }
   }, [isDevMode, initialNodes]);
-  const checkForLayoutChanges = useCallback12(() => {
+  const checkForLayoutChanges = useCallback13(() => {
     if (!isDevMode) return;
     const initial = initialPositionsRef.current;
     if (Object.keys(initial).length === 0) return;
@@ -12135,7 +12239,7 @@ var NodeGraphBuilder = ({
     });
     setHasLayoutChanges(hasChanges);
   }, [isDevMode]);
-  const handleNodesChange = useCallback12(
+  const handleNodesChange = useCallback13(
     (changes) => {
       onNodesChange(changes);
       const hasDragEnd = changes.some(
@@ -12147,7 +12251,7 @@ var NodeGraphBuilder = ({
     },
     [onNodesChange, checkForLayoutChanges]
   );
-  const resetNodesAndEdges = useCallback12(() => {
+  const resetNodesAndEdges = useCallback13(() => {
     setNodes(
       (nds) => nds.map((node) => {
         node.style = { ...node.style, opacity: 1 };
@@ -12166,7 +12270,7 @@ var NodeGraphBuilder = ({
       })
     );
   }, [setNodes, setEdges, animateMessages]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!focusNodeId) return;
     const targetNode = nodesRef.current.find((node) => node.id === focusNodeId);
     if (!targetNode) return;
@@ -12184,13 +12288,13 @@ var NodeGraphBuilder = ({
       });
     });
   }, [focusNodeId, focusRequestId, fitView, setNodes]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (fitRequestId == null) return;
     requestAnimationFrame(() => {
       fitView({ duration: 400, padding: 0.2 });
     });
   }, [fitRequestId, fitView]);
-  const handleNodeClick = useCallback12(
+  const handleNodeClick = useCallback13(
     (_, node) => {
       if (onNodeClick) {
         onNodeClick(node);
@@ -12589,7 +12693,7 @@ var NodeGraphBuilder = ({
       setCenter
     ]
   );
-  const toggleAnimateMessages = useCallback12(() => {
+  const toggleAnimateMessages = useCallback13(() => {
     setAnimateMessages((prev) => {
       const next = !prev;
       localStorage.setItem(
@@ -12599,10 +12703,10 @@ var NodeGraphBuilder = ({
       return next;
     });
   }, []);
-  const handleFitView = useCallback12(() => {
+  const handleFitView = useCallback13(() => {
     fitView({ duration: 400, padding: 0.2 });
   }, [fitView]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (disableMessageAnimation) {
       setAnimateMessages(false);
       return;
@@ -12628,7 +12732,7 @@ var NodeGraphBuilder = ({
       }
     }
   }, [animated, disableMessageAnimation, initialNodes.length]);
-  useEffect9(() => {
+  useEffect10(() => {
     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;
@@ -12645,12 +12749,12 @@ var NodeGraphBuilder = ({
       })
     );
   }, [animateMessages]);
-  useEffect9(() => {
+  useEffect10(() => {
     setTimeout(() => {
       fitView({ duration: 800 });
     }, 150);
   }, []);
-  const generateMermaidCode = useCallback12(() => {
+  const generateMermaidCode = useCallback13(() => {
     try {
       return convertToMermaid(nodesRef.current, edgesRef.current, {
         includeStyles: true,
@@ -12661,7 +12765,7 @@ var NodeGraphBuilder = ({
       return "";
     }
   }, []);
-  useEffect9(() => {
+  useEffect10(() => {
     if (zoomOnScroll) return;
     const findScrollableContainer = () => {
       const selectors = [
@@ -12706,34 +12810,34 @@ var NodeGraphBuilder = ({
       };
     }
   }, [zoomOnScroll]);
-  const handlePaneClick = useCallback12(() => {
+  const handlePaneClick = useCallback13(() => {
     searchRef.current?.hideSuggestions();
     resetNodesAndEdges();
     fitView({ duration: 800 });
   }, [resetNodesAndEdges, fitView]);
-  const handleNodeSelect = useCallback12(
+  const handleNodeSelect = useCallback13(
     (node) => {
       handleNodeClick(null, node);
     },
     [handleNodeClick]
   );
-  const handleSearchClear = useCallback12(() => {
+  const handleSearchClear = useCallback13(() => {
     resetNodesAndEdges();
     fitView({ duration: 800 });
   }, [resetNodesAndEdges, fitView]);
-  const downloadImage = useCallback12((dataUrl, filename) => {
+  const downloadImage = useCallback13((dataUrl, filename) => {
     const a = document.createElement("a");
     a.setAttribute("download", `${filename || "eventcatalog"}.png`);
     a.setAttribute("href", dataUrl);
     a.click();
   }, []);
-  const openStudioModal = useCallback12(() => {
+  const openStudioModal = useCallback13(() => {
     setIsStudioModalOpen(true);
   }, [setIsStudioModalOpen]);
-  const openChat = useCallback12(() => {
+  const openChat = useCallback13(() => {
     window.dispatchEvent(new CustomEvent("eventcatalog:open-chat"));
   }, []);
-  const handleSaveLayout = useCallback12(async () => {
+  const handleSaveLayout = useCallback13(async () => {
     if (!resourceKey || !onSaveLayout) return false;
     const positions = {};
     nodesRef.current.forEach((node) => {
@@ -12744,11 +12848,11 @@ var NodeGraphBuilder = ({
     });
     return await onSaveLayout(resourceKey, positions);
   }, [resourceKey, onSaveLayout]);
-  const handleResetLayout = useCallback12(async () => {
+  const handleResetLayout = useCallback13(async () => {
     if (!resourceKey || !onResetLayout) return false;
     return await onResetLayout(resourceKey);
   }, [resourceKey, onResetLayout]);
-  const handleQuickSaveLayout = useCallback12(async () => {
+  const handleQuickSaveLayout = useCallback13(async () => {
     setIsSavingLayout(true);
     const success = await handleSaveLayout();
     setIsSavingLayout(false);
@@ -12761,17 +12865,17 @@ var NodeGraphBuilder = ({
       setHasLayoutChanges(false);
     }
   }, [handleSaveLayout]);
-  const handleCopyArchitectureCode = useCallback12(async () => {
+  const handleCopyArchitectureCode = useCallback13(async () => {
     const code = generateMermaidCode();
     await copyToClipboard(code);
   }, [generateMermaidCode]);
-  const handleCopyShareUrl = useCallback12(async () => {
+  const handleCopyShareUrl = useCallback13(async () => {
     const url = typeof window !== "undefined" ? window.location.href : "";
     await copyToClipboard(url);
     setShareUrlCopySuccess(true);
     setTimeout(() => setShareUrlCopySuccess(false), 2e3);
   }, []);
-  const toggleFullScreen = useCallback12(() => {
+  const toggleFullScreen = useCallback13(() => {
     if (!document.fullscreenElement) {
       reactFlowWrapperRef.current?.requestFullscreen().catch((err) => {
         console.error(
@@ -12782,7 +12886,7 @@ var NodeGraphBuilder = ({
       document.exitFullscreen();
     }
   }, []);
-  useEffect9(() => {
+  useEffect10(() => {
     const handleFullscreenChange = () => {
       _setIsFullscreen(!!document.fullscreenElement);
       setTimeout(() => {
@@ -12794,7 +12898,7 @@ var NodeGraphBuilder = ({
       document.removeEventListener("fullscreenchange", handleFullscreenChange);
     };
   }, [fitView]);
-  const handleExportVisual = useCallback12(() => {
+  const handleExportVisual = useCallback13(() => {
     const nodesBounds = getNodesBounds(getNodes(), {
       nodeLookup: storeApi.getState().nodeLookup
     });
@@ -12823,7 +12927,7 @@ var NodeGraphBuilder = ({
       if (controls) controls.style.display = "block";
     });
   }, [getNodes, storeApi, downloadImage, title]);
-  const handleLegendClick = useCallback12(
+  const handleLegendClick = useCallback13(
     (collectionType, groupId) => {
       const isLegendTarget = (node) => {
         if (groupId) {
@@ -12858,7 +12962,7 @@ var NodeGraphBuilder = ({
     },
     [nodes, edges, setNodes, setEdges, fitView]
   );
-  const getNodesByCollectionWithColors = useCallback12((nodes2) => {
+  const getNodesByCollectionWithColors = useCallback13((nodes2) => {
     const colorClasses = {
       events: "bg-orange-600",
       agent: "bg-sky-600",
@@ -12919,7 +13023,7 @@ var NodeGraphBuilder = ({
     );
     return { ...legendForDomains, ...legendForNodes };
   }, []);
-  const legendKeyRef = useRef7("");
+  const legendKeyRef = useRef8("");
   const computedLegendKey = nodes.map((n) => `${n.id}:${n.type}:${n.data.group?.id || ""}`).join(",");
   if (computedLegendKey !== legendKeyRef.current) {
     legendKeyRef.current = computedLegendKey;
@@ -12929,7 +13033,7 @@ var NodeGraphBuilder = ({
     () => getNodesByCollectionWithColors(nodes),
     [getNodesByCollectionWithColors, legendKey]
   );
-  const nodeIdsKeyRef = useRef7("");
+  const nodeIdsKeyRef = useRef8("");
   const computedNodeIdsKey = nodes.map((n) => n.id).join(",");
   if (computedNodeIdsKey !== nodeIdsKeyRef.current) {
     nodeIdsKeyRef.current = computedNodeIdsKey;
@@ -12955,7 +13059,7 @@ var NodeGraphBuilder = ({
     () => allNoteGroups.reduce((sum, g) => sum + g.notes.length, 0),
     [allNoteGroups]
   );
-  const handleStepChange = useCallback12(
+  const handleStepChange = useCallback13(
     (nodeId, highlightPaths, shouldZoomOut) => {
       if (nodeId === null) {
         resetNodesAndEdges();
@@ -13131,6 +13235,7 @@ var NodeGraphBuilder = ({
             nodes,
             edges,
             fitView: true,
+            fitViewOptions: INITIAL_FIT_VIEW_OPTIONS,
             onNodesChange: handleNodesChange,
             onEdgesChange,
             onEdgeMouseEnter: handleEdgeMouseEnter,
@@ -13468,14 +13573,14 @@ var NodeGraph = ({
   const [elem, setElem] = useState15(null);
   const [showFooter, setShowFooter] = useState15(true);
   const [isStudioModalOpen, setIsStudioModalOpen] = useState15(false);
-  const openStudioModal = useCallback12(() => {
+  const openStudioModal = useCallback13(() => {
     setIsStudioModalOpen(true);
   }, []);
   const containerToRenderInto = portalId || `${id}-portal`;
-  useEffect9(() => {
+  useEffect10(() => {
     setElem(document.getElementById(containerToRenderInto));
   }, []);
-  useEffect9(() => {
+  useEffect10(() => {
     const urlParams = new URLSearchParams(window.location.search);
     const embed = urlParams.get("embed");
     if (embed === "true") {
@@ -13608,6 +13713,7 @@ export {
   DataNode_default as Data,
   DataProduct_default as DataProductNode,
   Domain_default as DomainNode,
+  ENTITY_TARGET_HANDLE_ID,
   EVENT,
   Entity_default as EntityNode,
   EventNode_default as Event,
@@ -13663,7 +13769,9 @@ export {
   getColorFromString,
   getEdgeLabelForMessageAsSource,
   getEdgeLabelForServiceAsTarget,
+  getNestedEntityProperties,
   getNodesAndEdgesFromDagre,
+  getPropertyTypeLabel,
   layoutGraph,
   nodeComponents,
   nodeConfigs,