@eventcatalog/visualiser 3.19.0 → 3.20.0

package/dist/index.mjs

@@ -6043,7 +6043,75 @@ import {
   useImperativeHandle,
   memo as memo31
 } from "react";
+import {
+  Blocks,
+  Database as Database5,
+  Layers as Layers3,
+  ListTree,
+  MessageSquare as MessageSquare2,
+  Search as SearchIcon,
+  Server as Server2,
+  User as User3,
+  Workflow as Workflow2,
+  Zap as Zap4
+} from "lucide-react";
 import { jsx as jsx32, jsxs as jsxs30 } from "react/jsx-runtime";
+var formatVersionedName = (name, version) => {
+  if (version) {
+    const nameWithoutVersion = name.replace(
+      new RegExp(`-v?${version.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}$`),
+      ""
+    );
+    return `${nameWithoutVersion} (v${version})`;
+  }
+  const versionMatch = name.match(
+    /^(.+)-v?(\d+\.\d+\.\d+(?:[-+][0-9A-Za-z.-]+)?)$/
+  );
+  if (!versionMatch) return name;
+  return `${versionMatch[1]} (v${versionMatch[2]})`;
+};
+var normalizeCollectionType = (type) => {
+  const aliases = {
+    event: "events",
+    command: "commands",
+    query: "queries",
+    service: "services",
+    domain: "domains",
+    channel: "channels",
+    entity: "entities"
+  };
+  return aliases[type] || type;
+};
+var splitVersionedName = (name, version) => {
+  if (version) {
+    return {
+      id: name.replace(
+        new RegExp(`-v?${version.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}$`),
+        ""
+      ),
+      version
+    };
+  }
+  const versionMatch = name.match(
+    /^(.+)-v?(\d+\.\d+\.\d+(?:[-+][0-9A-Za-z.-]+)?)$/
+  );
+  if (!versionMatch) return { id: name, version: void 0 };
+  return { id: versionMatch[1], version: versionMatch[2] };
+};
+var getResourceKey = ({
+  type,
+  id,
+  name,
+  version
+}) => {
+  const parsed = splitVersionedName(id || name, version);
+  return `${normalizeCollectionType(type)}:${parsed.id}:${parsed.version || ""}`.toLowerCase();
+};
+var getNodeResourceData = (data, key) => {
+  const resource = data?.[key];
+  if (!resource || typeof resource !== "object") return void 0;
+  return "data" in resource && resource.data ? resource.data : resource;
+};
 var VisualiserSearch = memo31(
   forwardRef(
     ({ nodes, onNodeSelect, onClear, onPaneClick: _onPaneClick }, ref) => {
@@ -6053,6 +6121,8 @@ var VisualiserSearch = memo31(
       const [selectedSuggestionIndex, setSelectedSuggestionIndex] = useState5(-1);
       const searchInputRef = useRef2(null);
       const containerRef = useRef2(null);
+      const suggestionsListRef = useRef2(null);
+      const suggestionItemRefs = useRef2([]);
       const hideSuggestions = useCallback4(() => {
         setShowSuggestions(false);
         setSelectedSuggestionIndex(-1);
@@ -6071,84 +6141,277 @@ var VisualiserSearch = memo31(
         if (node.type === "messageGroupExpanded") {
           return node.data?.groupName || node.id;
         }
-        const name = node.data?.message?.data?.name || node.data?.service?.data?.name || node.data?.domain?.data?.name || node.data?.entity?.data?.name || node.data?.name || node.id;
-        const version = node.data?.message?.data?.version || node.data?.service?.data?.version || node.data?.domain?.data?.version || node.data?.entity?.data?.version || node.data?.version;
-        return version ? `${name} (v${version})` : name;
+        const message = getNodeResourceData(node.data, "message");
+        const service = getNodeResourceData(node.data, "service");
+        const domain = getNodeResourceData(node.data, "domain");
+        const entity = getNodeResourceData(node.data, "entity");
+        const channel = getNodeResourceData(node.data, "channel");
+        const dataProduct = getNodeResourceData(node.data, "dataProduct");
+        const data = getNodeResourceData(node.data, "data");
+        const name = message?.name || message?.id || service?.name || service?.id || domain?.name || domain?.id || entity?.name || entity?.id || channel?.name || channel?.id || dataProduct?.name || dataProduct?.id || data?.name || data?.id || node.data?.name || node.id;
+        const version = message?.version || service?.version || domain?.version || entity?.version || channel?.version || dataProduct?.version || data?.version || node.data?.version;
+        return formatVersionedName(name, version);
       }, []);
-      const getNodeTypeColorClass = useCallback4((nodeType) => {
-        const colorClasses = {
-          events: "bg-orange-600 text-white",
-          services: "bg-pink-600 text-white",
-          flows: "bg-teal-600 text-white",
-          commands: "bg-blue-600 text-white",
-          queries: "bg-green-600 text-white",
-          channels: "bg-gray-600 text-white",
-          domains: "bg-yellow-500 text-white",
-          externalSystem: "bg-pink-600 text-white",
-          actor: "bg-yellow-500 text-white",
-          step: "bg-gray-700 text-white",
-          user: "bg-yellow-500 text-white",
-          custom: "bg-gray-500 text-white",
-          field: "bg-cyan-600 text-white",
-          messageGroup: "bg-violet-600 text-white",
-          messageGroupExpanded: "bg-violet-600 text-white"
+      const getNodeResourceKey = useCallback4(
+        (node, label) => {
+          if (node.type === "messageGroup" || node.type === "messageGroupExpanded") {
+            return `${node.type}:${node.id}`.toLowerCase();
+          }
+          const data = node.data;
+          const resource = getNodeResourceData(data, "message") || getNodeResourceData(data, "service") || getNodeResourceData(data, "domain") || getNodeResourceData(data, "entity") || getNodeResourceData(data, "channel") || getNodeResourceData(data, "dataProduct") || data?.data || data;
+          return getResourceKey({
+            type: node.type || "unknown",
+            id: resource?.id,
+            name: resource?.name || resource?.id || label || node.id,
+            version: resource?.version || data?.version
+          });
+        },
+        []
+      );
+      const dedupeSearchSuggestions = useCallback4(
+        (suggestions) => {
+          const uniqueSuggestions = [];
+          const indexByResourceKey = /* @__PURE__ */ new Map();
+          suggestions.forEach((suggestion) => {
+            const existingIndex = indexByResourceKey.get(
+              suggestion.resourceKey
+            );
+            if (existingIndex === void 0) {
+              indexByResourceKey.set(
+                suggestion.resourceKey,
+                uniqueSuggestions.length
+              );
+              uniqueSuggestions.push(suggestion);
+              return;
+            }
+            if (suggestion.isGroupedMessage && !uniqueSuggestions[existingIndex].isGroupedMessage) {
+              uniqueSuggestions[existingIndex] = suggestion;
+            }
+          });
+          return uniqueSuggestions;
+        },
+        []
+      );
+      const getSearchSuggestions = useCallback4(
+        (nodesToIndex) => {
+          const suggestions = nodesToIndex.flatMap((node) => {
+            const nodeName = getNodeDisplayName(node);
+            const suggestions2 = [
+              {
+                key: node.id,
+                node,
+                label: nodeName,
+                searchText: nodeName,
+                type: node.type || "unknown",
+                resourceKey: getNodeResourceKey(node, nodeName)
+              }
+            ];
+            if (node.type !== "messageGroup") return suggestions2;
+            const groupName = node.data?.groupName || nodeName;
+            const groupedMessages = node.data?.messages || [];
+            groupedMessages.forEach((item, index) => {
+              const message = item.message;
+              const messageName = message?.data?.name || message?.data?.id;
+              if (!messageName) return;
+              const version = message?.data?.version;
+              const label = formatVersionedName(messageName, version);
+              suggestions2.push({
+                key: `${node.id}:${message?.data?.id || messageName}:${version || index}`,
+                node,
+                label,
+                searchText: `${label} ${groupName}`,
+                type: message?.collection || "message",
+                resourceKey: getResourceKey({
+                  type: message?.collection || "message",
+                  id: message?.data?.id,
+                  name: messageName,
+                  version
+                }),
+                groupName,
+                isGroupedMessage: true
+              });
+            });
+            return suggestions2;
+          });
+          return dedupeSearchSuggestions(suggestions);
+        },
+        [dedupeSearchSuggestions, getNodeDisplayName, getNodeResourceKey]
+      );
+      const getNodeTypeMeta = useCallback4((nodeType) => {
+        const meta = {
+          events: {
+            label: "Event",
+            Icon: Zap4,
+            iconClass: "border-orange-500/25 bg-orange-500/10 text-orange-500",
+            badgeClass: "border-orange-500/25 bg-orange-500/10 text-orange-700 dark:text-orange-300"
+          },
+          event: {
+            label: "Event",
+            Icon: Zap4,
+            iconClass: "border-orange-500/25 bg-orange-500/10 text-orange-500",
+            badgeClass: "border-orange-500/25 bg-orange-500/10 text-orange-700 dark:text-orange-300"
+          },
+          commands: {
+            label: "Command",
+            Icon: MessageSquare2,
+            iconClass: "border-blue-500/25 bg-blue-500/10 text-blue-500",
+            badgeClass: "border-blue-500/25 bg-blue-500/10 text-blue-700 dark:text-blue-300"
+          },
+          command: {
+            label: "Command",
+            Icon: MessageSquare2,
+            iconClass: "border-blue-500/25 bg-blue-500/10 text-blue-500",
+            badgeClass: "border-blue-500/25 bg-blue-500/10 text-blue-700 dark:text-blue-300"
+          },
+          queries: {
+            label: "Query",
+            Icon: SearchIcon,
+            iconClass: "border-green-500/25 bg-green-500/10 text-green-500",
+            badgeClass: "border-green-500/25 bg-green-500/10 text-green-700 dark:text-green-300"
+          },
+          query: {
+            label: "Query",
+            Icon: SearchIcon,
+            iconClass: "border-green-500/25 bg-green-500/10 text-green-500",
+            badgeClass: "border-green-500/25 bg-green-500/10 text-green-700 dark:text-green-300"
+          },
+          services: {
+            label: "Service",
+            Icon: Server2,
+            iconClass: "border-pink-500/25 bg-pink-500/10 text-pink-500",
+            badgeClass: "border-pink-500/25 bg-pink-500/10 text-pink-700 dark:text-pink-300"
+          },
+          domains: {
+            label: "Domain",
+            Icon: Blocks,
+            iconClass: "border-yellow-500/25 bg-yellow-500/10 text-yellow-600 dark:text-yellow-400",
+            badgeClass: "border-yellow-500/25 bg-yellow-500/10 text-yellow-700 dark:text-yellow-300"
+          },
+          flows: {
+            label: "Flow",
+            Icon: Workflow2,
+            iconClass: "border-teal-500/25 bg-teal-500/10 text-teal-500",
+            badgeClass: "border-teal-500/25 bg-teal-500/10 text-teal-700 dark:text-teal-300"
+          },
+          channels: {
+            label: "Channel",
+            Icon: ListTree,
+            iconClass: "border-gray-500/25 bg-gray-500/10 text-gray-500",
+            badgeClass: "border-gray-500/25 bg-gray-500/10 text-gray-700 dark:text-gray-300"
+          },
+          data: {
+            label: "Data",
+            Icon: Database5,
+            iconClass: "border-blue-500/25 bg-blue-500/10 text-blue-500",
+            badgeClass: "border-blue-500/25 bg-blue-500/10 text-blue-700 dark:text-blue-300"
+          },
+          entities: {
+            label: "Entity",
+            Icon: Database5,
+            iconClass: "border-blue-500/25 bg-blue-500/10 text-blue-500",
+            badgeClass: "border-blue-500/25 bg-blue-500/10 text-blue-700 dark:text-blue-300"
+          },
+          externalSystem: {
+            label: "External",
+            Icon: Server2,
+            iconClass: "border-pink-500/25 bg-pink-500/10 text-pink-500",
+            badgeClass: "border-pink-500/25 bg-pink-500/10 text-pink-700 dark:text-pink-300"
+          },
+          actor: {
+            label: "Actor",
+            Icon: User3,
+            iconClass: "border-yellow-500/25 bg-yellow-500/10 text-yellow-600 dark:text-yellow-400",
+            badgeClass: "border-yellow-500/25 bg-yellow-500/10 text-yellow-700 dark:text-yellow-300"
+          },
+          user: {
+            label: "User",
+            Icon: User3,
+            iconClass: "border-yellow-500/25 bg-yellow-500/10 text-yellow-600 dark:text-yellow-400",
+            badgeClass: "border-yellow-500/25 bg-yellow-500/10 text-yellow-700 dark:text-yellow-300"
+          },
+          messageGroup: {
+            label: "Group",
+            Icon: Layers3,
+            iconClass: "border-violet-500/25 bg-violet-500/10 text-violet-500",
+            badgeClass: "border-violet-500/25 bg-violet-500/10 text-violet-700 dark:text-violet-300"
+          },
+          messageGroupExpanded: {
+            label: "Group",
+            Icon: Layers3,
+            iconClass: "border-violet-500/25 bg-violet-500/10 text-violet-500",
+            badgeClass: "border-violet-500/25 bg-violet-500/10 text-violet-700 dark:text-violet-300"
+          }
+        };
+        return meta[nodeType] || {
+          label: nodeType,
+          Icon: Layers3,
+          iconClass: "border-gray-500/25 bg-gray-500/10 text-gray-500",
+          badgeClass: "border-gray-500/25 bg-gray-500/10 text-gray-700 dark:text-gray-300"
         };
-        return colorClasses[nodeType] || "bg-gray-100 text-gray-700";
       }, []);
       const handleSearchChange = useCallback4(
         (event) => {
           const query = event.target.value;
           setSearchQuery(query);
           if (query.length > 0) {
-            const filtered = nodes.filter((node) => {
-              const nodeName = getNodeDisplayName(node);
-              return nodeName.toLowerCase().includes(query.toLowerCase());
-            });
+            const search = query.toLowerCase();
+            const filtered = getSearchSuggestions(nodes).filter(
+              (suggestion) => suggestion.searchText.toLowerCase().includes(search)
+            );
             setFilteredSuggestions(filtered);
             setShowSuggestions(true);
             setSelectedSuggestionIndex(-1);
           } else {
-            setFilteredSuggestions(nodes);
+            setFilteredSuggestions(getSearchSuggestions(nodes));
             setShowSuggestions(true);
             setSelectedSuggestionIndex(-1);
           }
         },
-        [nodes, getNodeDisplayName]
+        [nodes, getSearchSuggestions]
       );
       const handleSearchFocus = useCallback4(() => {
-        if (searchQuery.length === 0) {
-          setFilteredSuggestions(nodes);
-        }
+        const suggestions = getSearchSuggestions(nodes);
+        const search = searchQuery.toLowerCase();
+        setFilteredSuggestions(
+          searchQuery.length === 0 ? suggestions : suggestions.filter(
+            (suggestion) => suggestion.searchText.toLowerCase().includes(search)
+          )
+        );
         setShowSuggestions(true);
         setSelectedSuggestionIndex(-1);
-      }, [nodes, searchQuery]);
+      }, [nodes, searchQuery, getSearchSuggestions]);
       const handleSuggestionClick = useCallback4(
-        (node) => {
-          setSearchQuery(getNodeDisplayName(node));
+        (suggestion) => {
+          setSearchQuery("");
+          setFilteredSuggestions([]);
           setShowSuggestions(false);
-          onNodeSelect(node);
+          setSelectedSuggestionIndex(-1);
+          onNodeSelect(suggestion.node);
         },
-        [onNodeSelect, getNodeDisplayName]
+        [onNodeSelect]
       );
       const handleSearchKeyDown = useCallback4(
         (event) => {
-          if (!showSuggestions || filteredSuggestions.length === 0) return;
           switch (event.key) {
             case "ArrowDown":
               event.preventDefault();
+              if (filteredSuggestions.length === 0) return;
+              setShowSuggestions(true);
               setSelectedSuggestionIndex(
                 (prev) => prev < filteredSuggestions.length - 1 ? prev + 1 : 0
               );
               break;
             case "ArrowUp":
               event.preventDefault();
+              if (filteredSuggestions.length === 0) return;
+              setShowSuggestions(true);
               setSelectedSuggestionIndex(
                 (prev) => prev > 0 ? prev - 1 : filteredSuggestions.length - 1
               );
               break;
             case "Enter":
               event.preventDefault();
-              if (selectedSuggestionIndex >= 0) {
+              if (showSuggestions && selectedSuggestionIndex >= 0 && selectedSuggestionIndex < filteredSuggestions.length) {
                 handleSuggestionClick(
                   filteredSuggestions[selectedSuggestionIndex]
                 );
@@ -6177,6 +6440,31 @@ var VisualiserSearch = memo31(
           searchInputRef.current.focus();
         }
       }, [onClear]);
+      useEffect2(() => {
+        suggestionItemRefs.current = suggestionItemRefs.current.slice(
+          0,
+          filteredSuggestions.length
+        );
+      }, [filteredSuggestions.length]);
+      useEffect2(() => {
+        if (!showSuggestions || selectedSuggestionIndex < 0) return;
+        const list = suggestionsListRef.current;
+        const item = suggestionItemRefs.current[selectedSuggestionIndex];
+        if (!list || !item) return;
+        const itemTop = item.offsetTop;
+        const itemBottom = itemTop + item.offsetHeight;
+        const visibleTop = list.scrollTop;
+        const visibleBottom = visibleTop + list.clientHeight;
+        if (itemTop < visibleTop) {
+          list.scrollTop = itemTop;
+        } else if (itemBottom > visibleBottom) {
+          list.scrollTop = itemBottom - list.clientHeight;
+        }
+      }, [
+        showSuggestions,
+        selectedSuggestionIndex,
+        filteredSuggestions.length
+      ]);
       useEffect2(() => {
         const handleClickOutside = (event) => {
           if (containerRef.current && !containerRef.current.contains(event.target)) {
@@ -6231,28 +6519,53 @@ var VisualiserSearch = memo31(
             }
           )
         ] }),
-        showSuggestions && filteredSuggestions.length > 0 && /* @__PURE__ */ jsx32("div", { className: "absolute top-full left-0 right-0 mt-1 bg-[rgb(var(--ec-card-bg))] border border-[rgb(var(--ec-page-border))] rounded-md shadow-lg z-50 max-h-60 overflow-y-auto", children: filteredSuggestions.map((node, index) => {
-          const nodeName = getNodeDisplayName(node);
-          const nodeType = node.type || "unknown";
-          return /* @__PURE__ */ jsxs30(
-            "div",
-            {
-              onClick: () => handleSuggestionClick(node),
-              className: `px-4 py-2 cursor-pointer flex items-center justify-between hover:bg-[rgb(var(--ec-page-border)/0.5)] ${index === selectedSuggestionIndex ? "bg-[rgb(var(--ec-accent-subtle))]" : ""}`,
-              children: [
-                /* @__PURE__ */ jsx32("span", { className: "text-sm font-medium text-[rgb(var(--ec-page-text))]", children: nodeName }),
-                /* @__PURE__ */ jsx32(
-                  "span",
-                  {
-                    className: `text-xs capitalize px-2 py-1 rounded ${getNodeTypeColorClass(nodeType)}`,
-                    children: nodeType
-                  }
-                )
-              ]
-            },
-            node.id
-          );
-        }) })
+        showSuggestions && filteredSuggestions.length > 0 && /* @__PURE__ */ jsx32(
+          "div",
+          {
+            ref: suggestionsListRef,
+            className: "absolute top-full left-0 right-0 mt-1 bg-[rgb(var(--ec-card-bg))] border border-[rgb(var(--ec-page-border))] rounded-md shadow-lg z-50 max-h-60 overflow-y-auto",
+            children: filteredSuggestions.map((suggestion, index) => {
+              const nodeTypeMeta = getNodeTypeMeta(suggestion.type);
+              const Icon = nodeTypeMeta.Icon;
+              const isSelected = index === selectedSuggestionIndex;
+              return /* @__PURE__ */ jsxs30(
+                "div",
+                {
+                  ref: (element) => {
+                    suggestionItemRefs.current[index] = element;
+                  },
+                  onClick: () => handleSuggestionClick(suggestion),
+                  onMouseEnter: () => setSelectedSuggestionIndex(index),
+                  className: `px-3 py-2 cursor-pointer flex items-start gap-3 ${isSelected ? "bg-[rgb(var(--ec-accent-subtle))] outline outline-1 -outline-offset-1 outline-[rgb(var(--ec-accent))]" : "hover:bg-[rgb(var(--ec-page-border)/0.5)]"}`,
+                  children: [
+                    /* @__PURE__ */ jsx32(
+                      "span",
+                      {
+                        className: `mt-0.5 flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md border ${nodeTypeMeta.iconClass}`,
+                        children: /* @__PURE__ */ jsx32(Icon, { className: "h-3.5 w-3.5" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs30("span", { className: "min-w-0 flex-1", children: [
+                      /* @__PURE__ */ jsx32("span", { className: "block truncate text-sm font-medium text-[rgb(var(--ec-page-text))]", children: suggestion.label }),
+                      suggestion.isGroupedMessage && suggestion.groupName && /* @__PURE__ */ jsxs30("span", { className: "mt-0.5 block truncate text-xs text-[rgb(var(--ec-page-text-muted))]", children: [
+                        "in ",
+                        suggestion.groupName
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsx32(
+                      "span",
+                      {
+                        className: `mt-0.5 flex-shrink-0 rounded border px-2 py-0.5 text-xs font-medium ${nodeTypeMeta.badgeClass}`,
+                        children: nodeTypeMeta.label
+                      }
+                    )
+                  ]
+                },
+                `${suggestion.key}:${index}`
+              );
+            })
+          }
+        )
       ] });
     }
   )
@@ -8083,7 +8396,7 @@ import {
   Maximize2 as Maximize23,
   Map as Map2,
   Sparkles,
-  Zap as Zap4,
+  Zap as Zap5,
   EyeOff,
   ExternalLink,
   Save,
@@ -8208,7 +8521,7 @@ var VisualizerDropdownContent = memo33(
                   onCheckedChange: toggleAnimateMessages,
                   className: "flex items-center px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer transition-colors gap-2",
                   children: [
-                    /* @__PURE__ */ jsx40(Zap4, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
+                    /* @__PURE__ */ jsx40(Zap5, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
                     /* @__PURE__ */ jsx40("span", { className: "flex-1 font-normal", children: "Simulate Messages" }),
                     /* @__PURE__ */ jsx40(
                       "div",
@@ -8992,6 +9305,120 @@ function flatLayout(nodes, edges, graphOpts, nodeSize, style) {
   return { nodes: layoutNodes, edges: layoutEdges };
 }
 
+// src/utils/local-packing.ts
+var toNumber = (value) => {
+  if (typeof value === "number") return value;
+  if (typeof value === "string") {
+    const parsed = Number.parseFloat(value);
+    return Number.isFinite(parsed) ? parsed : void 0;
+  }
+  return void 0;
+};
+var getPackableNodeSize = (node) => ({
+  width: toNumber(node.measured?.width) ?? toNumber(node.width) ?? toNumber(node.style?.width) ?? 260,
+  height: toNumber(node.measured?.height) ?? toNumber(node.height) ?? toNumber(node.style?.height) ?? 140
+});
+var rectsIntersect = (a, b, gap = 0) => a.x < b.x + b.width + gap && a.x + a.width + gap > b.x && a.y < b.y + b.height + gap && a.y + a.height + gap > b.y;
+var toRect = (node, y = node.position.y) => {
+  const size = getPackableNodeSize(node);
+  return {
+    x: node.position.x,
+    y,
+    width: size.width,
+    height: size.height
+  };
+};
+var packNodesAroundBounds = ({
+  nodes,
+  movableNodeIds,
+  protectedBounds,
+  groupNodeId,
+  gap = 40
+}) => {
+  const movableNodes = nodes.filter((node) => movableNodeIds.has(node.id)).sort((a, b) => a.position.y - b.position.y);
+  const movableIds = new Set(movableNodes.map((node) => node.id));
+  const occupiedRects = [
+    protectedBounds,
+    ...nodes.filter(
+      (node) => !node.parentId && node.id !== groupNodeId && !movableIds.has(node.id)
+    ).map((node) => toRect(node))
+  ];
+  const plannedPositions = /* @__PURE__ */ new Map();
+  const groupCenterY = protectedBounds.y + protectedBounds.height / 2;
+  const placeNode = (node) => {
+    const size = getPackableNodeSize(node);
+    const nodeCenterY = node.position.y + size.height / 2;
+    const moveDirection = nodeCenterY >= groupCenterY ? 1 : -1;
+    let y = moveDirection > 0 ? Math.max(
+      node.position.y,
+      protectedBounds.y + protectedBounds.height + gap
+    ) : Math.min(node.position.y, protectedBounds.y - size.height - gap);
+    let attempts = 0;
+    while (attempts < occupiedRects.length + 8) {
+      const rect = {
+        x: node.position.x,
+        y,
+        width: size.width,
+        height: size.height
+      };
+      const collision = occupiedRects.find(
+        (occupied) => rectsIntersect(rect, occupied, gap)
+      );
+      if (!collision) {
+        occupiedRects.push(rect);
+        plannedPositions.set(node.id, { ...node.position, y });
+        return;
+      }
+      y = moveDirection > 0 ? collision.y + collision.height + gap : collision.y - size.height - gap;
+      attempts += 1;
+    }
+    occupiedRects.push({
+      x: node.position.x,
+      y,
+      width: size.width,
+      height: size.height
+    });
+    plannedPositions.set(node.id, { ...node.position, y });
+  };
+  const below = movableNodes.filter((node) => {
+    const size = getPackableNodeSize(node);
+    return node.position.y + size.height / 2 >= groupCenterY;
+  });
+  const belowIds = new Set(below.map((node) => node.id));
+  const above = movableNodes.filter((node) => !belowIds.has(node.id)).reverse();
+  below.forEach(placeNode);
+  above.forEach(placeNode);
+  return plannedPositions;
+};
+
+// src/utils/message-group-expansion.ts
+var getExpandedMessageGroupNode = (nodes, groupNodeId) => nodes.find(
+  (node) => node.id === groupNodeId && node.type === "messageGroupExpanded"
+);
+var buildMessageGroupExpansionNodes = ({
+  currentNodes,
+  groupNodeId,
+  expandedContainerNode,
+  childNodes,
+  downstreamNodes,
+  getDownstreamPosition
+}) => {
+  const withoutExistingGroup = currentNodes.filter(
+    (node) => node.id !== groupNodeId && node.parentId !== groupNodeId
+  );
+  const existingIds = new Set(withoutExistingGroup.map((node) => node.id));
+  const newDownstream = downstreamNodes.filter((node) => !existingIds.has(node.id)).map((node, index) => ({
+    ...node,
+    position: getDownstreamPosition(node, index)
+  }));
+  return [
+    ...withoutExistingGroup,
+    expandedContainerNode,
+    ...childNodes,
+    ...newDownstream
+  ];
+};
+
 // src/components/NotesToolbarButton.tsx
 import { useState as useState13, useCallback as useCallback11 } from "react";
 import {
@@ -9001,14 +9428,14 @@ import {
   Locate,
   ChevronRight,
   ServerIcon as ServerIcon2,
-  Zap as Zap5,
-  MessageSquare as MessageSquare2,
+  Zap as Zap6,
+  MessageSquare as MessageSquare3,
   Search as Search3,
   ArrowRightLeft as ArrowRightLeft3,
-  Database as Database5,
+  Database as Database6,
   Package as Package2,
   Globe as Globe5,
-  User as User3,
+  User as User4,
   MonitorIcon as MonitorIcon2,
   BoxesIcon as BoxesIcon2
 } from "lucide-react";
@@ -9018,18 +9445,18 @@ import { Fragment as Fragment11, jsx as jsx42, jsxs as jsxs40 } from "react/jsx-
 var NODE_TYPE_META = {
   service: { icon: ServerIcon2, color: "#ec4899", label: "Service" },
   services: { icon: ServerIcon2, color: "#ec4899", label: "Service" },
-  event: { icon: Zap5, color: "#f97316", label: "Event" },
-  events: { icon: Zap5, color: "#f97316", label: "Event" },
-  command: { icon: MessageSquare2, color: "#3b82f6", label: "Command" },
-  commands: { icon: MessageSquare2, color: "#3b82f6", label: "Command" },
+  event: { icon: Zap6, color: "#f97316", label: "Event" },
+  events: { icon: Zap6, color: "#f97316", label: "Event" },
+  command: { icon: MessageSquare3, color: "#3b82f6", label: "Command" },
+  commands: { icon: MessageSquare3, color: "#3b82f6", label: "Command" },
   query: { icon: Search3, color: "#22c55e", label: "Query" },
   queries: { icon: Search3, color: "#22c55e", label: "Query" },
   channel: { icon: ArrowRightLeft3, color: "#6b7280", label: "Channel" },
   channels: { icon: ArrowRightLeft3, color: "#6b7280", label: "Channel" },
-  data: { icon: Database5, color: "#3b82f6", label: "Data" },
+  data: { icon: Database6, color: "#3b82f6", label: "Data" },
   "data-products": { icon: Package2, color: "#6366f1", label: "Data Product" },
   externalSystem: { icon: Globe5, color: "#ec4899", label: "External System" },
-  actor: { icon: User3, color: "#eab308", label: "Actor" },
+  actor: { icon: User4, color: "#eab308", label: "Actor" },
   view: { icon: MonitorIcon2, color: "#8b5cf6", label: "View" },
   domain: { icon: BoxesIcon2, color: "#14b8a6", label: "Domain" },
   domains: { icon: BoxesIcon2, color: "#14b8a6", label: "Domain" }
@@ -9931,7 +10358,7 @@ var NodeGraphBuilder = ({
   );
   const [nodes, setNodes, onNodesChange] = useNodesState2(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState2(initialEdges);
-  const { fitView, getNodes } = useReactFlow5();
+  const { fitView, getNodes, getIntersectingNodes, getZoom, setCenter } = useReactFlow5();
   useEffect8(() => {
     setNodes(initialNodes);
     setEdges(initialEdges);
@@ -10071,57 +10498,107 @@ var NodeGraphBuilder = ({
     wrapper.classList.add("ec-animating-layout");
     setTimeout(() => wrapper.classList.remove("ec-animating-layout"), 400);
   }, []);
-  const relayoutGraph = useCallback12((nextNodes, nextEdges) => {
-    const g = new dagre3.graphlib.Graph({ compound: true });
-    g.setGraph({ rankdir: "LR", ranksep: 300, nodesep: 50 });
-    g.setDefaultEdgeLabel(() => ({}));
-    nextNodes.forEach((node) => {
-      if (node.parentId) return;
-      const w = node.style?.width || (node.type === "messageGroupExpanded" ? 380 : 150);
-      const h = node.style?.height || (node.type === "messageGroupExpanded" ? 0 : 120);
-      if (node.type === "messageGroupExpanded") {
-        const children = nextNodes.filter((n) => n.parentId === node.id);
-        const childHeight = children.length * 190 + 100;
-        g.setNode(node.id, { width: w, height: childHeight });
-      } else {
-        g.setNode(node.id, { width: w, height: h });
-      }
-    });
-    nextEdges.forEach((edge) => {
-      const sourceNode = nextNodes.find((n) => n.id === edge.source);
-      const targetNode = nextNodes.find((n) => n.id === edge.target);
-      const sourceTop = sourceNode?.parentId || edge.source;
-      const targetTop = targetNode?.parentId || edge.target;
-      if (g.hasNode(sourceTop) && g.hasNode(targetTop) && sourceTop !== targetTop) {
-        g.setEdge(sourceTop, targetTop);
-      }
-    });
-    dagre3.layout(g);
-    const positioned = nextNodes.map((node) => {
-      if (node.parentId) {
-        const parent = nextNodes.find((n) => n.id === node.parentId);
-        if (parent?.type === "flowExpanded") {
-          return node;
+  const relayoutGraph = useCallback12(
+    (nextNodes, nextEdges, anchor) => {
+      const g = new dagre3.graphlib.Graph({ compound: true });
+      g.setGraph({ rankdir: "LR", ranksep: 300, nodesep: 50 });
+      g.setDefaultEdgeLabel(() => ({}));
+      nextNodes.forEach((node) => {
+        if (node.parentId) return;
+        const w = node.style?.width || (node.type === "messageGroupExpanded" ? 380 : 150);
+        const h = node.style?.height || (node.type === "messageGroupExpanded" ? 0 : 120);
+        if (node.type === "messageGroupExpanded") {
+          const children = nextNodes.filter((n) => n.parentId === node.id);
+          const childHeight = children.length * 190 + 100;
+          g.setNode(node.id, { width: w, height: childHeight });
+        } else {
+          g.setNode(node.id, { width: w, height: h });
+        }
+      });
+      nextEdges.forEach((edge) => {
+        const sourceNode = nextNodes.find((n) => n.id === edge.source);
+        const targetNode = nextNodes.find((n) => n.id === edge.target);
+        const sourceTop = sourceNode?.parentId || edge.source;
+        const targetTop = targetNode?.parentId || edge.target;
+        if (g.hasNode(sourceTop) && g.hasNode(targetTop) && sourceTop !== targetTop) {
+          g.setEdge(sourceTop, targetTop);
         }
-        const parentWidth = parent?.style?.width || 380;
-        const childWidth = 240;
-        const xOffset = Math.max(20, (parentWidth - childWidth) / 2);
-        const siblings = nextNodes.filter((n) => n.parentId === node.parentId);
-        const index = siblings.indexOf(node);
+      });
+      dagre3.layout(g);
+      const positioned = nextNodes.map((node) => {
+        if (node.parentId) {
+          const parent = nextNodes.find((n) => n.id === node.parentId);
+          if (parent?.type === "flowExpanded") {
+            return node;
+          }
+          const parentWidth = parent?.style?.width || 380;
+          const childWidth = 240;
+          const xOffset = Math.max(20, (parentWidth - childWidth) / 2);
+          const siblings = nextNodes.filter(
+            (n) => n.parentId === node.parentId
+          );
+          const index = siblings.indexOf(node);
+          return {
+            ...node,
+            position: { x: xOffset, y: 70 + index * 190 }
+          };
+        }
+        const pos = g.node(node.id);
+        if (!pos) return node;
         return {
           ...node,
-          position: { x: xOffset, y: 70 + index * 190 }
+          position: { x: pos.x - pos.width / 2, y: pos.y - pos.height / 2 }
         };
-      }
-      const pos = g.node(node.id);
-      if (!pos) return node;
-      return {
-        ...node,
-        position: { x: pos.x - pos.width / 2, y: pos.y - pos.height / 2 }
+      });
+      if (!anchor) return positioned;
+      const positionedAnchor = positioned.find((node) => node.id === anchor.id);
+      if (!positionedAnchor) return positioned;
+      const offset = {
+        x: anchor.position.x - positionedAnchor.position.x,
+        y: anchor.position.y - positionedAnchor.position.y
       };
-    });
-    return positioned;
-  }, []);
+      return positioned.map((node) => {
+        if (node.parentId) return node;
+        return {
+          ...node,
+          position: {
+            x: node.position.x + offset.x,
+            y: node.position.y + offset.y
+          }
+        };
+      });
+    },
+    []
+  );
+  const makeRoomForRenderedExpandedGroup = useCallback12(
+    (groupNodeId, groupBounds) => {
+      const padding = 80;
+      const protectedBounds = {
+        x: groupBounds.x - padding,
+        y: groupBounds.y - padding,
+        width: groupBounds.width + padding * 2,
+        height: groupBounds.height + padding * 2
+      };
+      const intersectingIds = new Set(
+        getIntersectingNodes(protectedBounds, true).filter((node) => node.id !== groupNodeId && !node.parentId).map((node) => node.id)
+      );
+      if (intersectingIds.size === 0) return;
+      setNodes((currentNodes) => {
+        const plannedPositions = packNodesAroundBounds({
+          nodes: currentNodes,
+          movableNodeIds: intersectingIds,
+          protectedBounds,
+          groupNodeId
+        });
+        return currentNodes.map((node) => {
+          const plannedPosition = plannedPositions.get(node.id);
+          if (!plannedPosition) return node;
+          return { ...node, position: plannedPosition };
+        });
+      });
+    },
+    [getIntersectingNodes, setNodes]
+  );
   const layoutSubFlowChildren = useCallback12(
     (children, edges2, sizeOf, opts) => {
       const { padding, headerH, fallbackW = 240, fallbackH = 120 } = opts;
@@ -10219,9 +10696,19 @@ var NodeGraphBuilder = ({
         }
         const without = prev.filter(
           (n) => n.id !== groupNodeId && !childNodeIds.has(n.id) && !(downstreamNodeIds.has(n.id) && !referencedByEdges.has(n.id))
-        );
-        const next = [...without, originalNode];
-        return relayoutGraph(next, nextEdges);
+        ).map((n) => {
+          const stashedPosition = stashed?.nodePositions?.[n.id];
+          if (!stashedPosition || n.parentId) return n;
+          return { ...n, position: stashedPosition };
+        });
+        const next = [
+          ...without,
+          {
+            ...originalNode,
+            position: stashed?.nodePositions?.[groupNodeId] ?? expandedNode.position
+          }
+        ];
+        return next;
       });
       setEdges((prev) => {
         const without = prev.filter(
@@ -10229,9 +10716,6 @@ var NodeGraphBuilder = ({
         );
         return [...without, ...originalEdges];
       });
-      requestAnimationFrame(() => {
-        fitView({ duration: 400, padding: 0.2 });
-      });
     },
     [
       initialNodes,
@@ -10239,8 +10723,7 @@ var NodeGraphBuilder = ({
       setNodes,
       setEdges,
       relayoutGraph,
-      animateLayout,
-      fitView
+      animateLayout
     ]
   );
   useEffect8(() => {
@@ -10323,9 +10806,6 @@ var NodeGraphBuilder = ({
         onNodeClick(node);
         return;
       }
-      if (linksToVisualiser && onNavigate) {
-        return;
-      }
       const isFlow = edgesRef.current.some(
         (edge) => edge.type === "flow-edge"
       );
@@ -10339,6 +10819,24 @@ var NodeGraphBuilder = ({
       if (node.type === "messageGroup") {
         const groupData = node.data;
         const groupNodeId = node.id;
+        const currentGroupNode = getExpandedMessageGroupNode(
+          nodesRef.current,
+          groupNodeId
+        );
+        if (currentGroupNode?.type === "messageGroupExpanded") {
+          const measured = currentGroupNode?.measured;
+          const width = measured?.width ?? currentGroupNode.style?.width ?? 380;
+          const height = measured?.height ?? currentGroupNode.style?.height ?? 300;
+          setCenter(
+            currentGroupNode.position.x + width / 2,
+            currentGroupNode.position.y + height / 2,
+            {
+              duration: 300,
+              zoom: Math.min(Math.max(getZoom(), 0.55), 1)
+            }
+          );
+          return;
+        }
         const serviceNodeId = `${groupData.service.id}-${groupData.service.version}`;
         const childCount = groupData.messages?.length || 0;
         const containerWidth = 380;
@@ -10347,6 +10845,9 @@ var NodeGraphBuilder = ({
           (e) => e.source === groupNodeId || e.target === groupNodeId
         );
         const preExpansionNodeIds = nodesRef.current.map((n) => n.id);
+        const preExpansionNodePositions = Object.fromEntries(
+          nodesRef.current.map((n) => [n.id, { ...n.position }])
+        );
         const expandedContainerNode = {
           id: groupNodeId,
           type: "messageGroupExpanded",
@@ -10359,7 +10860,8 @@ var NodeGraphBuilder = ({
             __preExpansion: {
               node,
               edges: preExpansionEdges,
-              nodeIds: preExpansionNodeIds
+              nodeIds: preExpansionNodeIds,
+              nodePositions: preExpansionNodePositions
             }
           },
           style: {
@@ -10420,24 +10922,19 @@ var NodeGraphBuilder = ({
         });
         animateLayout();
         setNodes((prev) => {
-          const without = prev.filter((n) => n.id !== groupNodeId);
-          const existingIds = new Set(without.map((n) => n.id));
-          const newDownstream = downstreamNodes.filter(
-            (n) => !existingIds.has(n.id)
-          );
-          const next = [
-            ...without,
+          const downstreamX = groupData.direction === "sends" ? node.position.x + containerWidth + 260 : node.position.x - 420;
+          const downstreamY = node.position.y + 40;
+          return buildMessageGroupExpansionNodes({
+            currentNodes: prev,
+            groupNodeId,
             expandedContainerNode,
-            ...childNodes,
-            ...newDownstream
-          ];
-          return relayoutGraph(next, [
-            ...edgesRef.current.filter(
-              (e) => e.source !== groupNodeId && e.target !== groupNodeId
-            ),
-            ...childEdges,
-            ...downstreamEdges
-          ]);
+            childNodes,
+            downstreamNodes,
+            getDownstreamPosition: (_downstreamNode, index) => ({
+              x: downstreamX,
+              y: downstreamY + index * 190
+            })
+          });
         });
         setEdges((prev) => {
           const without = prev.filter(
@@ -10446,6 +10943,12 @@ var NodeGraphBuilder = ({
           return [...without, ...childEdges, ...downstreamEdges];
         });
         requestAnimationFrame(() => {
+          let actualContainerBounds = {
+            x: node.position.x,
+            y: node.position.y,
+            width: containerWidth,
+            height: containerHeight
+          };
           setNodes((prev) => {
             const children = prev.filter((n) => n.parentId === groupNodeId);
             if (children.length === 0) return prev;
@@ -10465,8 +10968,20 @@ var NodeGraphBuilder = ({
             const totalChildH = measurements.reduce((sum, m) => sum + m.h, 0) + gap * (measurements.length - 1);
             const actualContainerH = headerH + totalChildH + padding * 2;
             let currentY = headerH + padding;
+            actualContainerBounds = {
+              x: node.position.x,
+              y: node.position.y,
+              width: containerWidth,
+              height: actualContainerH
+            };
             return prev.map((n) => {
               if (n.id === groupNodeId) {
+                actualContainerBounds = {
+                  x: n.position.x,
+                  y: n.position.y,
+                  width: containerWidth,
+                  height: actualContainerH
+                };
                 return {
                   ...n,
                   style: {
@@ -10484,9 +10999,23 @@ var NodeGraphBuilder = ({
               return { ...n, position: { x, y } };
             });
           });
-        });
-        requestAnimationFrame(() => {
-          fitView({ duration: 400, padding: 0.2 });
+          requestAnimationFrame(() => {
+            const groupNode = getNodes().find((n) => n.id === groupNodeId);
+            const measured = groupNode?.measured;
+            const width = measured?.width ?? groupNode?.style?.width ?? containerWidth;
+            const height = measured?.height ?? groupNode?.style?.height ?? actualContainerBounds.height;
+            const bounds = {
+              x: groupNode?.position.x ?? actualContainerBounds.x,
+              y: groupNode?.position.y ?? actualContainerBounds.y,
+              width,
+              height
+            };
+            makeRoomForRenderedExpandedGroup(groupNodeId, bounds);
+            setCenter(bounds.x + width / 2, bounds.y + height / 2, {
+              duration: 450,
+              zoom: Math.min(Math.max(getZoom(), 0.55), 1)
+            });
+          });
         });
         return;
       }
@@ -10651,10 +11180,21 @@ var NodeGraphBuilder = ({
         });
         return;
       }
+      if (linksToVisualiser && onNavigate) {
+        return;
+      }
       setFocusedNodeId(node.id);
       setFocusModeOpen(true);
     },
-    [onNodeClick, linksToVisualiser, onNavigate]
+    [
+      onNodeClick,
+      linksToVisualiser,
+      onNavigate,
+      makeRoomForRenderedExpandedGroup,
+      getNodes,
+      getZoom,
+      setCenter
+    ]
   );
   const toggleAnimateMessages = useCallback12(() => {
     setAnimateMessages((prev) => {
@@ -10884,13 +11424,15 @@ var NodeGraphBuilder = ({
   }, [getNodes, downloadImage, title]);
   const handleLegendClick = useCallback12(
     (collectionType, groupId) => {
+      const isLegendTarget = (node) => {
+        if (groupId) {
+          return node.data.group && node.data.group?.id === groupId;
+        }
+        return node.type === collectionType;
+      };
       const updatedNodes = nodes.map((node) => {
-        if (groupId && node.data.group && node.data.group?.id === groupId) {
+        if (isLegendTarget(node)) {
           return { ...node, style: { ...node.style, opacity: 1 } };
-        } else {
-          if (node.type === collectionType) {
-            return { ...node, style: { ...node.style, opacity: 1 } };
-          }
         }
         return { ...node, style: { ...node.style, opacity: 0.1 } };
       });
@@ -10905,10 +11447,12 @@ var NodeGraphBuilder = ({
       });
       setNodes(updatedNodes);
       setEdges(updatedEdges);
+      const targetNodes = updatedNodes.filter(isLegendTarget);
+      if (targetNodes.length === 0) return;
       fitView({
         padding: 0.2,
         duration: 800,
-        nodes: updatedNodes.filter((node) => node.type === collectionType)
+        nodes: targetNodes
       });
     },
     [nodes, edges, setNodes, setEdges, fitView]