@eventcatalog/visualiser 3.19.0 → 3.20.1

package/dist/index.mjs

@@ -5018,144 +5018,297 @@ var GroupNode_default = memo22(function GroupNode({ data }) {
 });
 
 // src/nodes/Custom.tsx
-import { Handle as Handle17 } from "@xyflow/react";
-import * as Icons from "@heroicons/react/24/solid";
 import { memo as memo23, useMemo as useMemo10 } from "react";
+import { Handle as Handle17, Position as Position15, useNodeConnections as useNodeConnections10 } from "@xyflow/react";
+import * as Icons from "@heroicons/react/24/solid";
 import * as ContextMenu4 from "@radix-ui/react-context-menu";
-import * as Tooltip from "@radix-ui/react-tooltip";
 import { jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
+var PALETTES = {
+  blue: {
+    border: "border-blue-500",
+    badge: "bg-blue-500",
+    ring: "ring-2 ring-blue-400/60 ring-offset-2",
+    shadow: "rgba(59, 130, 246, 0.15)",
+    glow: "linear-gradient(135deg, #3b82f6, #2563eb)",
+    pillBorder: "#3b82f6"
+  },
+  teal: {
+    border: "border-teal-500",
+    badge: "bg-teal-500",
+    ring: "ring-2 ring-teal-400/60 ring-offset-2",
+    shadow: "rgba(20, 184, 166, 0.15)",
+    glow: "linear-gradient(135deg, #14b8a6, #0f766e)",
+    pillBorder: "#14b8a6"
+  },
+  red: {
+    border: "border-red-500",
+    badge: "bg-red-500",
+    ring: "ring-2 ring-red-400/60 ring-offset-2",
+    shadow: "rgba(239, 68, 68, 0.15)",
+    glow: "linear-gradient(135deg, #ef4444, #b91c1c)",
+    pillBorder: "#ef4444"
+  },
+  green: {
+    border: "border-green-500",
+    badge: "bg-green-500",
+    ring: "ring-2 ring-green-400/60 ring-offset-2",
+    shadow: "rgba(34, 197, 94, 0.15)",
+    glow: "linear-gradient(135deg, #22c55e, #15803d)",
+    pillBorder: "#22c55e"
+  },
+  purple: {
+    border: "border-purple-500",
+    badge: "bg-purple-500",
+    ring: "ring-2 ring-purple-400/60 ring-offset-2",
+    shadow: "rgba(168, 85, 247, 0.15)",
+    glow: "linear-gradient(135deg, #a855f7, #7e22ce)",
+    pillBorder: "#a855f7"
+  },
+  orange: {
+    border: "border-orange-500",
+    badge: "bg-orange-500",
+    ring: "ring-2 ring-orange-400/60 ring-offset-2",
+    shadow: "rgba(251, 146, 60, 0.15)",
+    glow: "linear-gradient(135deg, #fb923c, #ea580c)",
+    pillBorder: "#fb923c"
+  },
+  pink: {
+    border: "border-pink-500",
+    badge: "bg-pink-500",
+    ring: "ring-2 ring-pink-400/60 ring-offset-2",
+    shadow: "rgba(236, 72, 153, 0.15)",
+    glow: "linear-gradient(135deg, #ec4899, #be185d)",
+    pillBorder: "#ec4899"
+  },
+  yellow: {
+    border: "border-yellow-500",
+    badge: "bg-yellow-500",
+    ring: "ring-2 ring-yellow-400/60 ring-offset-2",
+    shadow: "rgba(234, 179, 8, 0.15)",
+    glow: "linear-gradient(135deg, #eab308, #a16207)",
+    pillBorder: "#eab308"
+  },
+  gray: {
+    border: "border-gray-500",
+    badge: "bg-gray-500",
+    ring: "ring-2 ring-gray-400/60 ring-offset-2",
+    shadow: "rgba(107, 114, 128, 0.15)",
+    glow: "linear-gradient(135deg, #6b7280, #374151)",
+    pillBorder: "#6b7280"
+  },
+  indigo: {
+    border: "border-indigo-500",
+    badge: "bg-indigo-500",
+    ring: "ring-2 ring-indigo-400/60 ring-offset-2",
+    shadow: "rgba(99, 102, 241, 0.15)",
+    glow: "linear-gradient(135deg, #6366f1, #4338ca)",
+    pillBorder: "#6366f1"
+  },
+  cyan: {
+    border: "border-cyan-500",
+    badge: "bg-cyan-500",
+    ring: "ring-2 ring-cyan-400/60 ring-offset-2",
+    shadow: "rgba(6, 182, 212, 0.15)",
+    glow: "linear-gradient(135deg, #06b6d4, #0e7490)",
+    pillBorder: "#06b6d4"
+  },
+  slate: {
+    border: "border-slate-500",
+    badge: "bg-slate-500",
+    ring: "ring-2 ring-slate-400/60 ring-offset-2",
+    shadow: "rgba(100, 116, 139, 0.15)",
+    glow: "linear-gradient(135deg, #64748b, #334155)",
+    pillBorder: "#64748b"
+  },
+  amber: {
+    border: "border-amber-500",
+    badge: "bg-amber-500",
+    ring: "ring-2 ring-amber-400/60 ring-offset-2",
+    shadow: "rgba(245, 158, 11, 0.15)",
+    glow: "linear-gradient(135deg, #f59e0b, #b45309)",
+    pillBorder: "#f59e0b"
+  },
+  emerald: {
+    border: "border-emerald-500",
+    badge: "bg-emerald-500",
+    ring: "ring-2 ring-emerald-400/60 ring-offset-2",
+    shadow: "rgba(16, 185, 129, 0.15)",
+    glow: "linear-gradient(135deg, #10b981, #047857)",
+    pillBorder: "#10b981"
+  },
+  violet: {
+    border: "border-violet-500",
+    badge: "bg-violet-500",
+    ring: "ring-2 ring-violet-400/60 ring-offset-2",
+    shadow: "rgba(139, 92, 246, 0.15)",
+    glow: "linear-gradient(135deg, #8b5cf6, #6d28d9)",
+    pillBorder: "#8b5cf6"
+  },
+  rose: {
+    border: "border-rose-500",
+    badge: "bg-rose-500",
+    ring: "ring-2 ring-rose-400/60 ring-offset-2",
+    shadow: "rgba(244, 63, 94, 0.15)",
+    glow: "linear-gradient(135deg, #f43f5e, #be123c)",
+    pillBorder: "#f43f5e"
+  }
+};
 function classNames16(...classes) {
   return classes.filter(Boolean).join(" ");
 }
-var Custom_default = memo23(function UserNode2({
-  data,
-  sourcePosition,
-  targetPosition
+function getPalette(color) {
+  return PALETTES[color || "blue"] ?? PALETTES.blue;
+}
+function GlowHandle14({
+  side,
+  gradient
 }) {
-  const { mode, step, custom: customProps } = data;
+  return /* @__PURE__ */ jsx24(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: "50%",
+        [side]: -6,
+        transform: "translateY(-50%)",
+        width: 12,
+        height: 12,
+        borderRadius: "50%",
+        background: gradient,
+        border: "2px solid rgb(var(--ec-page-bg))",
+        zIndex: 20,
+        animation: "ec-handle-pulse 2s ease-in-out infinite",
+        pointerEvents: "none"
+      }
+    }
+  );
+}
+var Custom_default = memo23(function CustomNode({ data, selected }) {
+  const { mode, custom: customProps, step } = data;
   const {
     color = "blue",
-    title = "Custom",
-    icon = "UserIcon",
-    type = "custom",
-    summary = "",
-    url: _url = "",
+    title = step?.title || "Custom",
+    icon = "CubeIcon",
+    type = "Custom",
+    summary = step?.summary || "",
+    url,
     properties = EMPTY_OBJECT,
     menu = EMPTY_ARRAY,
     height = 5
   } = customProps;
-  const IconComponent = useMemo10(() => Icons[icon], [icon]);
-  const { actor: { name: _name } = {} } = step;
-  const isLongType = type && type.length > 10;
-  const displayType = isLongType ? `${type.substring(0, 10)}...` : type;
+  const palette = getPalette(color);
+  const IconComponent = useMemo10(() => Icons[icon] || Icons.CubeIcon, [icon]);
   const portalContainer = usePortalContainer();
+  const targetConnections = useNodeConnections10({ handleType: "target" });
+  const sourceConnections = useNodeConnections10({ handleType: "source" });
+  const propertyEntries = Object.entries(properties);
+  const contextMenuItems = url ? [{ label: `Open ${type.toLowerCase()}`, url }, ...menu] : menu;
   return /* @__PURE__ */ jsxs22(ContextMenu4.Root, { children: [
     /* @__PURE__ */ jsx24(ContextMenu4.Trigger, { children: /* @__PURE__ */ jsxs22(
       "div",
       {
         className: classNames16(
-          `rounded-md border flex justify-start bg-[rgb(var(--ec-card-bg))] text-[rgb(var(--ec-page-text))] border-${color}-400`
+          "relative min-w-48 max-w-60 rounded-xl border-2 overflow-visible",
+          selected ? palette.ring : "",
+          palette.border
         ),
         style: {
-          minHeight: mode === "full" ? `${height}em` : "2em",
-          ...NODE_WIDTH_STYLE
+          background: "var(--ec-custom-node-bg, rgb(var(--ec-card-bg)))",
+          boxShadow: `0 2px 12px ${palette.shadow}`,
+          minHeight: mode === "full" ? `${height}em` : void 0
         },
         children: [
-          /* @__PURE__ */ jsxs22(
-            "div",
+          /* @__PURE__ */ jsx24(
+            Handle17,
+            {
+              type: "target",
+              position: Position15.Left,
+              style: HIDDEN_HANDLE_STYLE
+            }
+          ),
+          /* @__PURE__ */ jsx24(
+            Handle17,
+            {
+              type: "source",
+              position: Position15.Right,
+              style: HIDDEN_HANDLE_STYLE
+            }
+          ),
+          targetConnections.length > 0 && /* @__PURE__ */ jsx24(GlowHandle14, { side: "left", gradient: palette.glow }),
+          sourceConnections.length > 0 && /* @__PURE__ */ jsx24(GlowHandle14, { side: "right", gradient: palette.glow }),
+          /* @__PURE__ */ jsx24("div", { className: "absolute -top-3 left-2.5 z-10", children: /* @__PURE__ */ jsxs22(
+            "span",
             {
               className: classNames16(
-                `bg-gradient-to-b from-${color}-400 to-${color}-600 relative flex flex-col items-center w-5 justify-between rounded-l-sm text-orange-100-500`,
-                `border-r-[1px] border-${color}`
+                "inline-flex items-center gap-1 text-[7px] font-bold uppercase tracking-widest text-white px-1.5 py-0.5 rounded shadow-sm",
+                palette.badge
               ),
               children: [
-                IconComponent && /* @__PURE__ */ jsx24(IconComponent, { className: "w-4 h-4 opacity-90 text-white mt-1" }),
-                mode === "full" && /* @__PURE__ */ jsx24(Tooltip.Provider, { children: /* @__PURE__ */ jsxs22(Tooltip.Root, { children: [
-                  /* @__PURE__ */ jsx24(Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ jsx24(
-                    "span",
-                    {
-                      className: "text-center text-[9px] text-white font-bold uppercase mb-4",
-                      style: ROTATED_LABEL_STYLE,
-                      children: displayType
-                    }
-                  ) }),
-                  isLongType && /* @__PURE__ */ jsx24(Tooltip.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs22(
-                    Tooltip.Content,
-                    {
-                      className: "bg-slate-800 text-white rounded px-2 py-1 text-xs shadow-md z-50",
-                      side: "right",
-                      sideOffset: 5,
-                      children: [
-                        type,
-                        /* @__PURE__ */ jsx24(Tooltip.Arrow, { className: "fill-slate-800" })
-                      ]
-                    }
-                  ) })
-                ] }) })
+                IconComponent && /* @__PURE__ */ jsx24(IconComponent, { className: "w-2.5 h-2.5", "aria-hidden": true }),
+                type
               ]
             }
-          ),
-          /* @__PURE__ */ jsxs22("div", { className: "p-1 flex-1", children: [
-            targetPosition && /* @__PURE__ */ jsx24(Handle17, { type: "target", position: targetPosition }),
-            sourcePosition && /* @__PURE__ */ jsx24(Handle17, { type: "source", position: sourcePosition }),
-            (!summary || mode !== "full") && /* @__PURE__ */ jsx24("div", { className: "h-full ", children: /* @__PURE__ */ jsx24("span", { className: "text-sm font-bold block pb-0.5 w-full", children: title }) }),
-            summary && mode === "full" && /* @__PURE__ */ jsxs22("div", { children: [
-              /* @__PURE__ */ jsx24(
+          ) }),
+          /* @__PURE__ */ jsxs22("div", { className: "px-3 pt-3.5 pb-2.5", children: [
+            /* @__PURE__ */ jsx24("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx24("span", { className: "text-[13px] font-semibold leading-snug text-[rgb(var(--ec-page-text))] truncate", children: title }) }),
+            mode === "full" && summary && /* @__PURE__ */ jsx24(
+              "div",
+              {
+                className: "mt-1.5 text-[9px] text-[rgb(var(--ec-page-text-muted))] leading-relaxed overflow-hidden",
+                style: LINE_CLAMP_STYLE,
+                title: summary,
+                children: summary
+              }
+            ),
+            mode === "full" && propertyEntries.length > 0 && /* @__PURE__ */ jsx24("div", { className: "mt-2 pt-1.5 border-t border-[rgb(var(--ec-page-border))] grid grid-cols-2 gap-x-2 gap-y-1", children: propertyEntries.map(([key, value]) => /* @__PURE__ */ jsxs22("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx24("div", { className: "text-[7px] font-bold uppercase tracking-wide text-[rgb(var(--ec-page-text-muted))] truncate", children: key }),
+              typeof value === "string" && value.startsWith("http") ? /* @__PURE__ */ jsx24(
+                "a",
+                {
+                  href: value,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: "block text-[8px] text-blue-500 underline truncate",
+                  title: value,
+                  children: value
+                }
+              ) : /* @__PURE__ */ jsx24(
                 "div",
                 {
-                  className: classNames16(
-                    mode === "full" ? `border-b border-[rgb(var(--ec-page-border))]` : ""
-                  ),
-                  children: /* @__PURE__ */ jsx24("span", { className: "text-xs font-bold block pb-0.5", children: title })
+                  className: "text-[8px] text-[rgb(var(--ec-page-text))] truncate",
+                  title: String(value),
+                  children: value
                 }
-              ),
-              mode === "full" && /* @__PURE__ */ jsxs22("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] ", children: [
-                /* @__PURE__ */ jsx24("div", { className: "leading-3 py-1", children: /* @__PURE__ */ jsx24("span", { className: "text-[8px] font-light", children: summary }) }),
-                properties && /* @__PURE__ */ jsx24("div", { className: "grid grid-cols-2 gap-x-4 py-1", children: Object.entries(properties).map(([key, value]) => /* @__PURE__ */ jsxs22(
-                  "span",
-                  {
-                    className: "text-xs",
-                    style: TINY_FONT_STYLE,
-                    children: [
-                      key,
-                      ":",
-                      " ",
-                      typeof value === "string" && value.startsWith("http") ? /* @__PURE__ */ jsx24(
-                        "a",
-                        {
-                          href: value,
-                          target: "_blank",
-                          rel: "noopener noreferrer",
-                          className: "text-blue-500 underline",
-                          children: value
-                        }
-                      ) : value
-                    ]
-                  },
-                  key
-                )) })
-              ] })
-            ] })
+              )
+            ] }, key)) })
           ] })
         ]
       }
     ) }),
-    menu?.length > 0 && /* @__PURE__ */ jsx24(ContextMenu4.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx24(ContextMenu4.Content, { className: "min-w-[220px] bg-[rgb(var(--ec-card-bg))] rounded-md p-1 shadow-md border border-[rgb(var(--ec-page-border))]", children: menu?.map((item) => {
-      return /* @__PURE__ */ jsx24(
-        ContextMenu4.Item,
-        {
-          asChild: true,
-          className: "text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center",
-          children: /* @__PURE__ */ jsx24("a", { href: item.url, children: item.label })
-        }
-      );
-    }) }) })
+    contextMenuItems.length > 0 && /* @__PURE__ */ jsx24(ContextMenu4.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx24(ContextMenu4.Content, { className: "min-w-[220px] bg-[rgb(var(--ec-card-bg))] rounded-md p-1 shadow-md border border-[rgb(var(--ec-page-border))]", children: contextMenuItems.map((item) => /* @__PURE__ */ jsx24(
+      ContextMenu4.Item,
+      {
+        asChild: true,
+        className: "text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center",
+        children: /* @__PURE__ */ jsx24(
+          "a",
+          {
+            href: item.url,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "text-[rgb(var(--ec-page-text))] no-underline",
+            children: item.label
+          }
+        )
+      },
+      `${item.label}-${item.url || ""}`
+    )) }) })
   ] });
 });
 
 // src/nodes/ExternalSystem2.tsx
 import { memo as memo24 } from "react";
-import { Handle as Handle18, Position as Position15 } from "@xyflow/react";
+import { Handle as Handle18, Position as Position16 } from "@xyflow/react";
 import { jsx as jsx25, jsxs as jsxs23 } from "react/jsx-runtime";
 var ExternalSystem2_default = memo24(function ExternalSystemNode(props) {
   return /* @__PURE__ */ jsxs23("div", { className: "relative", children: [
@@ -5163,7 +5316,7 @@ var ExternalSystem2_default = memo24(function ExternalSystemNode(props) {
       Handle18,
       {
         type: "target",
-        position: Position15.Left,
+        position: Position16.Left,
         style: EXTERNAL_SYSTEM_HANDLE_STYLE,
         className: "bg-gray-500"
       }
@@ -5172,7 +5325,7 @@ var ExternalSystem2_default = memo24(function ExternalSystemNode(props) {
       Handle18,
       {
         type: "source",
-        position: Position15.Right,
+        position: Position16.Right,
         style: EXTERNAL_SYSTEM_HANDLE_STYLE,
         className: "bg-gray-500"
       }
@@ -5184,9 +5337,9 @@ var ExternalSystem2_default = memo24(function ExternalSystemNode(props) {
 // src/nodes/DataProduct.tsx
 import { memo as memo25 } from "react";
 import { Package } from "lucide-react";
-import { Handle as Handle19, Position as Position16, useNodeConnections as useNodeConnections10 } from "@xyflow/react";
+import { Handle as Handle19, Position as Position17, useNodeConnections as useNodeConnections11 } from "@xyflow/react";
 import { jsx as jsx26, jsxs as jsxs24 } from "react/jsx-runtime";
-function GlowHandle14({ side }) {
+function GlowHandle15({ side }) {
   return /* @__PURE__ */ jsx26(
     "div",
     {
@@ -5226,7 +5379,7 @@ function PostItDataProduct(props) {
           Handle19,
           {
             type: "target",
-            position: Position16.Left,
+            position: Position17.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
@@ -5234,7 +5387,7 @@ function PostItDataProduct(props) {
           Handle19,
           {
             type: "source",
-            position: Position16.Right,
+            position: Position17.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
@@ -5321,8 +5474,8 @@ function DefaultDataProduct(props) {
   const { version, name, summary, deprecated, draft, notes, styles } = props.data.dataProduct;
   const mode = props.data.mode || "simple";
   const customIcon = isIconPath(styles?.icon) ? styles.icon : void 0;
-  const targetConnections = useNodeConnections10({ handleType: "target" });
-  const sourceConnections = useNodeConnections10({ handleType: "source" });
+  const targetConnections = useNodeConnections11({ handleType: "target" });
+  const sourceConnections = useNodeConnections11({ handleType: "source" });
   const isDark = useDarkMode();
   const deprecatedStripe = isDark ? "rgba(239,68,68,0.25)" : "rgba(239,68,68,0.1)";
   return /* @__PURE__ */ jsxs24(
@@ -5342,7 +5495,7 @@ function DefaultDataProduct(props) {
           Handle19,
           {
             type: "target",
-            position: Position16.Left,
+            position: Position17.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
@@ -5350,13 +5503,13 @@ function DefaultDataProduct(props) {
           Handle19,
           {
             type: "source",
-            position: Position16.Right,
+            position: Position17.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         notes && notes.length > 0 && /* @__PURE__ */ jsx26(NotesIndicator, { notes, resourceName: name }),
-        targetConnections.length > 0 && /* @__PURE__ */ jsx26(GlowHandle14, { side: "left" }),
-        sourceConnections.length > 0 && /* @__PURE__ */ jsx26(GlowHandle14, { side: "right" }),
+        targetConnections.length > 0 && /* @__PURE__ */ jsx26(GlowHandle15, { side: "left" }),
+        sourceConnections.length > 0 && /* @__PURE__ */ jsx26(GlowHandle15, { side: "right" }),
         /* @__PURE__ */ jsx26("div", { className: "absolute -top-2.5 left-2.5 flex items-center gap-1.5 z-10", children: /* @__PURE__ */ jsxs24(
           "span",
           {
@@ -5416,7 +5569,7 @@ var DataProduct_default = memo25(function DataProductNode(props) {
 // src/nodes/message-group/MessageGroupNode.tsx
 import { memo as memo26, useMemo as useMemo11 } from "react";
 import { Layers, Zap as Zap3, Terminal, HelpCircle, Maximize2 as Maximize22 } from "lucide-react";
-import { Handle as Handle20, Position as Position17, useNodeConnections as useNodeConnections11 } from "@xyflow/react";
+import { Handle as Handle20, Position as Position18, useNodeConnections as useNodeConnections12 } from "@xyflow/react";
 import { jsx as jsx27, jsxs as jsxs25 } from "react/jsx-runtime";
 var TYPE_ICONS = {
   events: Zap3,
@@ -5432,8 +5585,8 @@ var CARD_STYLE = {
 var MessageGroupNode_default = memo26(function MessageGroupNode(props) {
   const { groupName, messageCount } = props.data;
   const isDark = useDarkMode();
-  const targetConnections = useNodeConnections11({ handleType: "target" });
-  const sourceConnections = useNodeConnections11({ handleType: "source" });
+  const targetConnections = useNodeConnections12({ handleType: "target" });
+  const sourceConnections = useNodeConnections12({ handleType: "source" });
   const stackDepth = messageCount >= 3 ? 3 : messageCount;
   const typeBreakdown = useMemo11(() => {
     const counts = {};
@@ -5481,7 +5634,7 @@ var MessageGroupNode_default = memo26(function MessageGroupNode(props) {
             Handle20,
             {
               type: "target",
-              position: Position17.Left,
+              position: Position18.Left,
               style: HIDDEN_HANDLE_STYLE
             }
           ),
@@ -5489,7 +5642,7 @@ var MessageGroupNode_default = memo26(function MessageGroupNode(props) {
             Handle20,
             {
               type: "source",
-              position: Position17.Right,
+              position: Position18.Right,
               style: HIDDEN_HANDLE_STYLE
             }
           ),
@@ -6043,7 +6196,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 +6274,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 +6294,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 +6593,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 +6672,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}`
+              );
+            })
+          }
+        )
       ] });
     }
   )
@@ -6810,7 +7276,7 @@ function getNodeDocUrl(node) {
 }
 
 // src/components/FocusMode/FocusModeNodeActions.tsx
-import { NodeToolbar, Position as Position18, useViewport } from "@xyflow/react";
+import { NodeToolbar, Position as Position19, useViewport } from "@xyflow/react";
 import { ArrowRightLeft as ArrowRightLeft2, FileText } from "lucide-react";
 import { jsx as jsx35, jsxs as jsxs33 } from "react/jsx-runtime";
 var FocusModeNodeActions = ({
@@ -6843,7 +7309,7 @@ var FocusModeNodeActions = ({
       NodeToolbar,
       {
         nodeId: node.id,
-        position: Position18.Bottom,
+        position: Position19.Bottom,
         isVisible: true,
         offset: -16,
         children: /* @__PURE__ */ jsx35(
@@ -6870,7 +7336,7 @@ var FocusModeNodeActions = ({
     NodeToolbar,
     {
       nodeId: node.id,
-      position: Position18.Bottom,
+      position: Position19.Bottom,
       isVisible: true,
       offset: -16,
       children: /* @__PURE__ */ jsxs33(
@@ -6908,7 +7374,7 @@ var FocusModeNodeActions = ({
 var FocusModeNodeActions_default = FocusModeNodeActions;
 
 // src/components/FocusMode/FocusModePlaceholder.tsx
-import { Handle as Handle21, Position as Position19 } from "@xyflow/react";
+import { Handle as Handle21, Position as Position20 } from "@xyflow/react";
 import { jsx as jsx36, jsxs as jsxs34 } from "react/jsx-runtime";
 var FocusModePlaceholder = ({
   data
@@ -6924,7 +7390,7 @@ var FocusModePlaceholder = ({
           Handle21,
           {
             type: "target",
-            position: Position19.Left,
+            position: Position20.Left,
             style: { visibility: "hidden" }
           }
         ),
@@ -6933,7 +7399,7 @@ var FocusModePlaceholder = ({
           Handle21,
           {
             type: "source",
-            position: Position19.Right,
+            position: Position20.Right,
             style: { visibility: "hidden" }
           }
         )
@@ -7860,7 +8326,7 @@ var MermaidView_default = MermaidView;
 import { useCallback as useCallback10, useMemo as useMemo17, useState as useState11, useEffect as useEffect7 } from "react";
 
 // src/utils/utils/utils.ts
-import { MarkerType as MarkerType6, Position as Position20 } from "@xyflow/react";
+import { MarkerType as MarkerType6, Position as Position21 } from "@xyflow/react";
 import dagre from "dagre";
 var generateIdForNode = (node) => {
   return `${node.data.id}-${node.data.version}`;
@@ -7950,8 +8416,8 @@ var createEdge = (edgeOptions) => {
 };
 var createNode = (values) => {
   return {
-    sourcePosition: Position20.Right,
-    targetPosition: Position20.Left,
+    sourcePosition: Position21.Right,
+    targetPosition: Position21.Left,
     ...values
   };
 };
@@ -8083,7 +8549,7 @@ import {
   Maximize2 as Maximize23,
   Map as Map2,
   Sparkles,
-  Zap as Zap4,
+  Zap as Zap5,
   EyeOff,
   ExternalLink,
   Save,
@@ -8208,7 +8674,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 +9458,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 +9581,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 +9598,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 +10511,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 +10651,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 +10849,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 +10869,6 @@ var NodeGraphBuilder = ({
         );
         return [...without, ...originalEdges];
       });
-      requestAnimationFrame(() => {
-        fitView({ duration: 400, padding: 0.2 });
-      });
     },
     [
       initialNodes,
@@ -10239,8 +10876,7 @@ var NodeGraphBuilder = ({
       setNodes,
       setEdges,
       relayoutGraph,
-      animateLayout,
-      fitView
+      animateLayout
     ]
   );
   useEffect8(() => {
@@ -10323,9 +10959,6 @@ var NodeGraphBuilder = ({
         onNodeClick(node);
         return;
       }
-      if (linksToVisualiser && onNavigate) {
-        return;
-      }
       const isFlow = edgesRef.current.some(
         (edge) => edge.type === "flow-edge"
       );
@@ -10339,6 +10972,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 +10998,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 +11013,8 @@ var NodeGraphBuilder = ({
             __preExpansion: {
               node,
               edges: preExpansionEdges,
-              nodeIds: preExpansionNodeIds
+              nodeIds: preExpansionNodeIds,
+              nodePositions: preExpansionNodePositions
             }
           },
           style: {
@@ -10420,24 +11075,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 +11096,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 +11121,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 +11152,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 +11333,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 +11577,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 +11600,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]