@eventcatalog/visualiser 3.19.0 → 3.20.1

package/dist/index.js

@@ -104,7 +104,7 @@ module.exports = __toCommonJS(index_exports);
 var import_react79 = require("react");
 var import_react_dom = require("react-dom");
 var import_react80 = require("@xyflow/react");
-var import_lucide_react31 = require("lucide-react");
+var import_lucide_react32 = require("lucide-react");
 var DropdownMenu2 = __toESM(require("@radix-ui/react-dropdown-menu"));
 var import_html_to_image = require("html-to-image");
 
@@ -5088,138 +5088,291 @@ var GroupNode_default = (0, import_react45.memo)(function GroupNode({ data }) {
 });
 
 // src/nodes/Custom.tsx
-var import_react46 = require("@xyflow/react");
+var import_react46 = require("react");
+var import_react47 = require("@xyflow/react");
 var Icons = __toESM(require("@heroicons/react/24/solid"));
-var import_react47 = require("react");
 var ContextMenu4 = __toESM(require("@radix-ui/react-context-menu"));
-var Tooltip = __toESM(require("@radix-ui/react-tooltip"));
 var import_jsx_runtime24 = require("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 = (0, import_react47.memo)(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__ */ (0, import_jsx_runtime24.jsx)(
+    "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 = (0, import_react46.memo)(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 = (0, import_react47.useMemo)(() => 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 = (0, import_react46.useMemo)(() => Icons[icon] || Icons.CubeIcon, [icon]);
   const portalContainer = usePortalContainer();
+  const targetConnections = (0, import_react47.useNodeConnections)({ handleType: "target" });
+  const sourceConnections = (0, import_react47.useNodeConnections)({ handleType: "source" });
+  const propertyEntries = Object.entries(properties);
+  const contextMenuItems = url ? [{ label: `Open ${type.toLowerCase()}`, url }, ...menu] : menu;
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(ContextMenu4.Root, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ContextMenu4.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
       "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__ */ (0, import_jsx_runtime24.jsxs)(
-            "div",
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            import_react47.Handle,
+            {
+              type: "target",
+              position: import_react47.Position.Left,
+              style: HIDDEN_HANDLE_STYLE
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            import_react47.Handle,
+            {
+              type: "source",
+              position: import_react47.Position.Right,
+              style: HIDDEN_HANDLE_STYLE
+            }
+          ),
+          targetConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GlowHandle14, { side: "left", gradient: palette.glow }),
+          sourceConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GlowHandle14, { side: "right", gradient: palette.glow }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "absolute -top-3 left-2.5 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+            "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__ */ (0, import_jsx_runtime24.jsx)(IconComponent, { className: "w-4 h-4 opacity-90 text-white mt-1" }),
-                mode === "full" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Tooltip.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Tooltip.Root, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-                    "span",
-                    {
-                      className: "text-center text-[9px] text-white font-bold uppercase mb-4",
-                      style: ROTATED_LABEL_STYLE,
-                      children: displayType
-                    }
-                  ) }),
-                  isLongType && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Tooltip.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-                    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__ */ (0, import_jsx_runtime24.jsx)(Tooltip.Arrow, { className: "fill-slate-800" })
-                      ]
-                    }
-                  ) })
-                ] }) })
+                IconComponent && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconComponent, { className: "w-2.5 h-2.5", "aria-hidden": true }),
+                type
               ]
             }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "p-1 flex-1", children: [
-            targetPosition && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react46.Handle, { type: "target", position: targetPosition }),
-            sourcePosition && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react46.Handle, { type: "source", position: sourcePosition }),
-            (!summary || mode !== "full") && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-full ", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-sm font-bold block pb-0.5 w-full", children: title }) }),
-            summary && mode === "full" && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "px-3 pt-3.5 pb-2.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-[13px] font-semibold leading-snug text-[rgb(var(--ec-page-text))] truncate", children: title }) }),
+            mode === "full" && summary && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              "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__ */ (0, import_jsx_runtime24.jsx)("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__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("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__ */ (0, import_jsx_runtime24.jsx)(
+                "a",
+                {
+                  href: value,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: "block text-[8px] text-blue-500 underline truncate",
+                  title: value,
+                  children: value
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                 "div",
                 {
-                  className: classNames16(
-                    mode === "full" ? `border-b border-[rgb(var(--ec-page-border))]` : ""
-                  ),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("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__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] ", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "leading-3 py-1", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-[8px] font-light", children: summary }) }),
-                properties && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "grid grid-cols-2 gap-x-4 py-1", children: Object.entries(properties).map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-                  "span",
-                  {
-                    className: "text-xs",
-                    style: TINY_FONT_STYLE,
-                    children: [
-                      key,
-                      ":",
-                      " ",
-                      typeof value === "string" && value.startsWith("http") ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-                        "a",
-                        {
-                          href: value,
-                          target: "_blank",
-                          rel: "noopener noreferrer",
-                          className: "text-blue-500 underline",
-                          children: value
-                        }
-                      ) : value
-                    ]
-                  },
-                  key
-                )) })
-              ] })
-            ] })
+              )
+            ] }, key)) })
           ] })
         ]
       }
     ) }),
-    menu?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ContextMenu4.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(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__ */ (0, import_jsx_runtime24.jsx)(
-        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__ */ (0, import_jsx_runtime24.jsx)("a", { href: item.url, children: item.label })
-        }
-      );
-    }) }) })
+    contextMenuItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ContextMenu4.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(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__ */ (0, import_jsx_runtime24.jsx)(
+      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__ */ (0, import_jsx_runtime24.jsx)(
+          "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 || ""}`
+    )) }) })
   ] });
 });
 
@@ -5256,7 +5409,7 @@ var import_react50 = require("react");
 var import_lucide_react22 = require("lucide-react");
 var import_react51 = require("@xyflow/react");
 var import_jsx_runtime26 = require("react/jsx-runtime");
-function GlowHandle14({ side }) {
+function GlowHandle15({ side }) {
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "div",
     {
@@ -5425,8 +5578,8 @@ function DefaultDataProduct(props) {
           }
         ),
         notes && notes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(NotesIndicator, { notes, resourceName: name }),
-        targetConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(GlowHandle14, { side: "left" }),
-        sourceConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(GlowHandle14, { side: "right" }),
+        targetConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(GlowHandle15, { side: "left" }),
+        sourceConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(GlowHandle15, { side: "right" }),
         /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "absolute -top-2.5 left-2.5 flex items-center gap-1.5 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
           "span",
           {
@@ -6101,7 +6254,64 @@ var FlowEdge_default = (0, import_react59.memo)(function CustomEdge({
 
 // src/components/VisualiserSearch.tsx
 var import_react61 = require("react");
+var import_lucide_react25 = require("lucide-react");
 var import_jsx_runtime32 = require("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 = (0, import_react61.memo)(
   (0, import_react61.forwardRef)(
     ({ nodes, onNodeSelect, onClear, onPaneClick: _onPaneClick }, ref) => {
@@ -6111,6 +6321,8 @@ var VisualiserSearch = (0, import_react61.memo)(
       const [selectedSuggestionIndex, setSelectedSuggestionIndex] = (0, import_react61.useState)(-1);
       const searchInputRef = (0, import_react61.useRef)(null);
       const containerRef = (0, import_react61.useRef)(null);
+      const suggestionsListRef = (0, import_react61.useRef)(null);
+      const suggestionItemRefs = (0, import_react61.useRef)([]);
       const hideSuggestions = (0, import_react61.useCallback)(() => {
         setShowSuggestions(false);
         setSelectedSuggestionIndex(-1);
@@ -6129,84 +6341,277 @@ var VisualiserSearch = (0, import_react61.memo)(
         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 = (0, import_react61.useCallback)((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 = (0, import_react61.useCallback)(
+        (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 = (0, import_react61.useCallback)(
+        (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 = (0, import_react61.useCallback)(
+        (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 = (0, import_react61.useCallback)((nodeType) => {
+        const meta = {
+          events: {
+            label: "Event",
+            Icon: import_lucide_react25.Zap,
+            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: import_lucide_react25.Zap,
+            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: import_lucide_react25.MessageSquare,
+            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: import_lucide_react25.MessageSquare,
+            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: import_lucide_react25.Search,
+            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: import_lucide_react25.Search,
+            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: import_lucide_react25.Server,
+            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: import_lucide_react25.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: import_lucide_react25.Workflow,
+            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: import_lucide_react25.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: import_lucide_react25.Database,
+            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: import_lucide_react25.Database,
+            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: import_lucide_react25.Server,
+            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: import_lucide_react25.User,
+            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: import_lucide_react25.User,
+            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: import_lucide_react25.Layers,
+            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: import_lucide_react25.Layers,
+            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: import_lucide_react25.Layers,
+          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 = (0, import_react61.useCallback)(
         (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 = (0, import_react61.useCallback)(() => {
-        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 = (0, import_react61.useCallback)(
-        (node) => {
-          setSearchQuery(getNodeDisplayName(node));
+        (suggestion) => {
+          setSearchQuery("");
+          setFilteredSuggestions([]);
           setShowSuggestions(false);
-          onNodeSelect(node);
+          setSelectedSuggestionIndex(-1);
+          onNodeSelect(suggestion.node);
         },
-        [onNodeSelect, getNodeDisplayName]
+        [onNodeSelect]
       );
       const handleSearchKeyDown = (0, import_react61.useCallback)(
         (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]
                 );
@@ -6235,6 +6640,31 @@ var VisualiserSearch = (0, import_react61.memo)(
           searchInputRef.current.focus();
         }
       }, [onClear]);
+      (0, import_react61.useEffect)(() => {
+        suggestionItemRefs.current = suggestionItemRefs.current.slice(
+          0,
+          filteredSuggestions.length
+        );
+      }, [filteredSuggestions.length]);
+      (0, import_react61.useEffect)(() => {
+        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
+      ]);
       (0, import_react61.useEffect)(() => {
         const handleClickOutside = (event) => {
           if (containerRef.current && !containerRef.current.contains(event.target)) {
@@ -6289,28 +6719,53 @@ var VisualiserSearch = (0, import_react61.memo)(
             }
           )
         ] }),
-        showSuggestions && filteredSuggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("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__ */ (0, import_jsx_runtime32.jsxs)(
-            "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__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-sm font-medium text-[rgb(var(--ec-page-text))]", children: nodeName }),
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-                  "span",
-                  {
-                    className: `text-xs capitalize px-2 py-1 rounded ${getNodeTypeColorClass(nodeType)}`,
-                    children: nodeType
-                  }
-                )
-              ]
-            },
-            node.id
-          );
-        }) })
+        showSuggestions && filteredSuggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          "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__ */ (0, import_jsx_runtime32.jsxs)(
+                "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__ */ (0, import_jsx_runtime32.jsx)(
+                      "span",
+                      {
+                        className: `mt-0.5 flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md border ${nodeTypeMeta.iconClass}`,
+                        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { className: "h-3.5 w-3.5" })
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "min-w-0 flex-1", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "block truncate text-sm font-medium text-[rgb(var(--ec-page-text))]", children: suggestion.label }),
+                      suggestion.isGroupedMessage && suggestion.groupName && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "mt-0.5 block truncate text-xs text-[rgb(var(--ec-page-text-muted))]", children: [
+                        "in ",
+                        suggestion.groupName
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                      "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}`
+              );
+            })
+          }
+        )
       ] });
     }
   )
@@ -6565,7 +7020,7 @@ var StepWalkthrough_default = (0, import_react62.memo)(function StepWalkthrough(
 // src/components/StudioModal.tsx
 var import_react63 = require("react");
 var Dialog2 = __toESM(require("@radix-ui/react-dialog"));
-var import_lucide_react25 = require("lucide-react");
+var import_lucide_react26 = require("lucide-react");
 var import_react64 = require("@xyflow/react");
 
 // src/utils/export-node-graph.ts
@@ -6690,10 +7145,10 @@ var StudioModal = ({ isOpen, onClose }) => {
               onClick: handleCopyToClipboard,
               className: `w-full flex items-center justify-center space-x-2 px-4 py-2 text-sm font-medium rounded-md border transition-colors ${copySuccess ? "bg-green-50 border-green-200 text-green-700" : "bg-white border-gray-300 text-gray-700 hover:bg-gray-50"}`,
               children: copySuccess ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react25.CheckIcon, { className: "w-4 h-4" }),
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react26.CheckIcon, { className: "w-4 h-4" }),
                 /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: "Copied!" })
               ] }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react25.ClipboardIcon, { className: "w-4 h-4" }),
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react26.ClipboardIcon, { className: "w-4 h-4" }),
                 /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: "Copy diagram to clipboard" })
               ] })
             }
@@ -6708,7 +7163,7 @@ var StudioModal = ({ isOpen, onClose }) => {
               onClick: handleOpenStudio,
               className: "w-full flex items-center justify-center space-x-2 px-4 py-2 bg-[rgb(var(--ec-accent))] text-white text-sm font-medium rounded-md hover:bg-[rgb(var(--ec-accent-hover))] transition-colors",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react25.ExternalLinkIcon, { className: "w-4 h-4" }),
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react26.ExternalLinkIcon, { className: "w-4 h-4" }),
                 /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: "Open EventCatalog Studio" })
               ]
             }
@@ -6733,7 +7188,7 @@ var StudioModal_default = StudioModal;
 // src/components/FocusModeModal.tsx
 var import_react69 = require("react");
 var Dialog3 = __toESM(require("@radix-ui/react-dialog"));
-var import_lucide_react27 = require("lucide-react");
+var import_lucide_react28 = require("lucide-react");
 var import_react70 = require("@xyflow/react");
 
 // src/components/FocusMode/FocusModeContent.tsx
@@ -6847,7 +7302,7 @@ function getNodeDocUrl(node) {
 
 // src/components/FocusMode/FocusModeNodeActions.tsx
 var import_react65 = require("@xyflow/react");
-var import_lucide_react26 = require("lucide-react");
+var import_lucide_react27 = require("lucide-react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var FocusModeNodeActions = ({
   node,
@@ -6894,7 +7349,7 @@ var FocusModeNodeActions = ({
                 className: "flex items-center justify-center rounded-md text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-accent))] hover:bg-[rgb(var(--ec-accent-subtle))] transition-colors",
                 style: { width: buttonSize, height: buttonSize },
                 title: "View documentation",
-                children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react26.FileText, { style: { width: iconSize, height: iconSize } })
+                children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react27.FileText, { style: { width: iconSize, height: iconSize } })
               }
             )
           }
@@ -6922,7 +7377,7 @@ var FocusModeNodeActions = ({
                 className: "flex items-center justify-center rounded-md text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-accent))] hover:bg-[rgb(var(--ec-accent-subtle))] transition-colors",
                 style: { width: buttonSize, height: buttonSize },
                 title: "View documentation",
-                children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react26.FileText, { style: { width: iconSize, height: iconSize } })
+                children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react27.FileText, { style: { width: iconSize, height: iconSize } })
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
@@ -6932,7 +7387,7 @@ var FocusModeNodeActions = ({
                 className: "flex items-center justify-center rounded-md text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-accent))] hover:bg-[rgb(var(--ec-accent-subtle))] transition-colors",
                 style: { width: buttonSize, height: buttonSize },
                 title: "Focus on this node",
-                children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react26.ArrowRightLeft, { style: { width: iconSize, height: iconSize } })
+                children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react27.ArrowRightLeft, { style: { width: iconSize, height: iconSize } })
               }
             )
           ]
@@ -7331,7 +7786,7 @@ var FocusModeModal = ({
                             background: isDark ? "rgba(59, 130, 246, 0.18)" : "rgba(59, 130, 246, 0.12)"
                           },
                           children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-                            import_lucide_react27.FocusIcon,
+                            import_lucide_react28.FocusIcon,
                             {
                               style: {
                                 width: 20,
@@ -7383,7 +7838,7 @@ var FocusModeModal = ({
                           color: isDark ? "#94a3b8" : "#64748b"
                         },
                         "aria-label": "Close",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react27.XIcon, { style: { width: 20, height: 20 } })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react28.XIcon, { style: { width: 20, height: 20 } })
                       }
                     ) })
                   ]
@@ -7411,7 +7866,7 @@ var FocusModeModal_default = FocusModeModal;
 
 // src/components/MermaidView.tsx
 var import_react71 = require("react");
-var import_lucide_react28 = require("lucide-react");
+var import_lucide_react29 = require("lucide-react");
 
 // src/utils/export-mermaid.ts
 var NODE_SHAPE_MAP = {
@@ -7805,7 +8260,7 @@ var MermaidView = ({
               onClick: handleCopyToClipboard,
               className: `p-2.5 rounded-md shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[rgb(var(--ec-accent))] transition-all duration-150 ${copySuccess ? "bg-green-500 text-white scale-110" : "bg-[rgb(var(--ec-card-bg))] hover:bg-[rgb(var(--ec-page-border))/0.5] text-[rgb(var(--ec-icon-color))] hover:scale-105"}`,
               "aria-label": copySuccess ? "Copied!" : "Copy Mermaid code",
-              children: copySuccess ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react28.CheckIcon, { className: "h-5 w-5" }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react28.ClipboardIcon, { className: "h-5 w-5" })
+              children: copySuccess ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react29.CheckIcon, { className: "h-5 w-5" }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react29.ClipboardIcon, { className: "h-5 w-5" })
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "absolute top-full right-0 mt-2 px-2 py-1 bg-[rgb(var(--ec-page-text))] text-[rgb(var(--ec-page-bg))] text-xs rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50", children: copySuccess ? "Copied!" : "Copy Mermaid code" })
@@ -8111,7 +8566,7 @@ var useChannelVisibility = ({
 // src/components/VisualizerDropdownContent.tsx
 var import_react74 = require("react");
 var DropdownMenu = __toESM(require("@radix-ui/react-dropdown-menu"));
-var import_lucide_react29 = require("lucide-react");
+var import_lucide_react30 = require("lucide-react");
 var import_outline2 = require("@heroicons/react/24/outline");
 var import_jsx_runtime40 = require("react/jsx-runtime");
 var VisualizerDropdownContent = (0, import_react74.memo)(
@@ -8166,7 +8621,7 @@ var VisualizerDropdownContent = (0, import_react74.memo)(
     return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(DropdownMenu.Sub, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(DropdownMenu.SubTrigger, { 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 outline-none", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react29.Grid3x3, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react30.Grid3x3, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
           /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "flex-1 font-normal", children: "Canvas" }),
           /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             "svg",
@@ -8201,7 +8656,7 @@ var VisualizerDropdownContent = (0, import_react74.memo)(
                   onCheckedChange: setIsMermaidView,
                   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__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react29.Code, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react30.Code, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
                     /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "flex-1 font-normal", children: "Render as mermaid" }),
                     /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                       "div",
@@ -8226,7 +8681,7 @@ var VisualizerDropdownContent = (0, import_react74.memo)(
                   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__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react29.Zap, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react30.Zap, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
                     /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "flex-1 font-normal", children: "Simulate Messages" }),
                     /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                       "div",
@@ -8250,7 +8705,7 @@ var VisualizerDropdownContent = (0, import_react74.memo)(
                   onCheckedChange: toggleChannelsVisibility,
                   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__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react29.EyeOff, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react30.EyeOff, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
                     /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "flex-1 font-normal", children: "Hide channels" }),
                     /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                       "div",
@@ -8274,7 +8729,7 @@ var VisualizerDropdownContent = (0, import_react74.memo)(
                   onCheckedChange: setShowMinimap,
                   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__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react29.Map, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react30.Map, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
                     /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "flex-1 font-normal", children: "Show minimap" }),
                     /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                       "div",
@@ -8298,7 +8753,7 @@ var VisualizerDropdownContent = (0, import_react74.memo)(
                   onClick: handleFitView,
                   className: "px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react29.Maximize2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react30.Maximize2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
                     /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "flex-1 font-normal", children: "Fit to view" })
                   ]
                 }
@@ -8317,7 +8772,7 @@ var VisualizerDropdownContent = (0, import_react74.memo)(
                   },
                   className: "px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react29.Search, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react30.Search, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
                     /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "flex-1 font-normal", children: "Find on canvas" })
                   ]
                 }
@@ -8332,7 +8787,7 @@ var VisualizerDropdownContent = (0, import_react74.memo)(
           onClick: onOpenNotes,
           className: "px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react29.MessageCircle, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react30.MessageCircle, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
             /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "flex-1 font-normal", children: [
               "View notes (",
               notesCount,
@@ -8343,7 +8798,7 @@ var VisualizerDropdownContent = (0, import_react74.memo)(
       ),
       isDevMode && onSaveLayout && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(DropdownMenu.Sub, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(DropdownMenu.SubTrigger, { 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 outline-none", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react29.Save, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react30.Save, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
           /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "flex-1 font-normal", children: "Layout" }),
           /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-[10px] text-amber-600 font-medium", children: "DEV" }),
           /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
@@ -8379,7 +8834,7 @@ var VisualizerDropdownContent = (0, import_react74.memo)(
                   disabled: layoutStatus !== "idle",
                   className: "px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
                   children: [
-                    layoutStatus === "saving" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react29.Loader2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react29.Save, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
+                    layoutStatus === "saving" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react30.Loader2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react30.Save, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
                     /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "flex-1 font-normal", children: layoutStatus === "saving" ? "Saving..." : "Save Layout" })
                   ]
                 }
@@ -8391,7 +8846,7 @@ var VisualizerDropdownContent = (0, import_react74.memo)(
                   disabled: layoutStatus !== "idle",
                   className: "px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
                   children: [
-                    layoutStatus === "resetting" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react29.Loader2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react29.RotateCcw, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
+                    layoutStatus === "resetting" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react30.Loader2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react30.RotateCcw, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
                     /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "flex-1 font-normal", children: layoutStatus === "resetting" ? "Resetting..." : "Reset Layout" })
                   ]
                 }
@@ -8408,7 +8863,7 @@ var VisualizerDropdownContent = (0, import_react74.memo)(
             onClick: openChat,
             className: "px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react29.Sparkles, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react30.Sparkles, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
               /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "flex-1 font-normal", children: "Ask a question" })
             ]
           }
@@ -8421,7 +8876,7 @@ var VisualizerDropdownContent = (0, import_react74.memo)(
           onClick: handleCopyArchitectureCode,
           className: "px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react29.Code, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react30.Code, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
             /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "flex-1 font-normal", children: "Copy as mermaid" })
           ]
         }
@@ -8443,7 +8898,7 @@ var VisualizerDropdownContent = (0, import_react74.memo)(
           onClick: () => setIsShareModalOpen(true),
           className: "px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react29.Share2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react30.Share2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
             /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "flex-1 font-normal", children: "Share Link" })
           ]
         }
@@ -8467,7 +8922,7 @@ var VisualizerDropdownContent = (0, import_react74.memo)(
           onClick: openStudioModal,
           className: "px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react29.ExternalLink, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react30.ExternalLink, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
             /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "flex-1 font-normal", children: "Open in EventCatalog Studio" })
           ]
         }
@@ -9010,30 +9465,144 @@ 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
 var import_react77 = require("react");
-var import_lucide_react30 = require("lucide-react");
+var import_lucide_react31 = require("lucide-react");
 var import_react78 = require("@xyflow/react");
 var Dialog4 = __toESM(require("@radix-ui/react-dialog"));
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var NODE_TYPE_META = {
-  service: { icon: import_lucide_react30.ServerIcon, color: "#ec4899", label: "Service" },
-  services: { icon: import_lucide_react30.ServerIcon, color: "#ec4899", label: "Service" },
-  event: { icon: import_lucide_react30.Zap, color: "#f97316", label: "Event" },
-  events: { icon: import_lucide_react30.Zap, color: "#f97316", label: "Event" },
-  command: { icon: import_lucide_react30.MessageSquare, color: "#3b82f6", label: "Command" },
-  commands: { icon: import_lucide_react30.MessageSquare, color: "#3b82f6", label: "Command" },
-  query: { icon: import_lucide_react30.Search, color: "#22c55e", label: "Query" },
-  queries: { icon: import_lucide_react30.Search, color: "#22c55e", label: "Query" },
-  channel: { icon: import_lucide_react30.ArrowRightLeft, color: "#6b7280", label: "Channel" },
-  channels: { icon: import_lucide_react30.ArrowRightLeft, color: "#6b7280", label: "Channel" },
-  data: { icon: import_lucide_react30.Database, color: "#3b82f6", label: "Data" },
-  "data-products": { icon: import_lucide_react30.Package, color: "#6366f1", label: "Data Product" },
-  externalSystem: { icon: import_lucide_react30.Globe, color: "#ec4899", label: "External System" },
-  actor: { icon: import_lucide_react30.User, color: "#eab308", label: "Actor" },
-  view: { icon: import_lucide_react30.MonitorIcon, color: "#8b5cf6", label: "View" },
-  domain: { icon: import_lucide_react30.BoxesIcon, color: "#14b8a6", label: "Domain" },
-  domains: { icon: import_lucide_react30.BoxesIcon, color: "#14b8a6", label: "Domain" }
+  service: { icon: import_lucide_react31.ServerIcon, color: "#ec4899", label: "Service" },
+  services: { icon: import_lucide_react31.ServerIcon, color: "#ec4899", label: "Service" },
+  event: { icon: import_lucide_react31.Zap, color: "#f97316", label: "Event" },
+  events: { icon: import_lucide_react31.Zap, color: "#f97316", label: "Event" },
+  command: { icon: import_lucide_react31.MessageSquare, color: "#3b82f6", label: "Command" },
+  commands: { icon: import_lucide_react31.MessageSquare, color: "#3b82f6", label: "Command" },
+  query: { icon: import_lucide_react31.Search, color: "#22c55e", label: "Query" },
+  queries: { icon: import_lucide_react31.Search, color: "#22c55e", label: "Query" },
+  channel: { icon: import_lucide_react31.ArrowRightLeft, color: "#6b7280", label: "Channel" },
+  channels: { icon: import_lucide_react31.ArrowRightLeft, color: "#6b7280", label: "Channel" },
+  data: { icon: import_lucide_react31.Database, color: "#3b82f6", label: "Data" },
+  "data-products": { icon: import_lucide_react31.Package, color: "#6366f1", label: "Data Product" },
+  externalSystem: { icon: import_lucide_react31.Globe, color: "#ec4899", label: "External System" },
+  actor: { icon: import_lucide_react31.User, color: "#eab308", label: "Actor" },
+  view: { icon: import_lucide_react31.MonitorIcon, color: "#8b5cf6", label: "View" },
+  domain: { icon: import_lucide_react31.BoxesIcon, color: "#14b8a6", label: "Domain" },
+  domains: { icon: import_lucide_react31.BoxesIcon, color: "#14b8a6", label: "Domain" }
 };
 function getNodeMeta(nodeType) {
   if (!nodeType) return null;
@@ -9172,7 +9741,7 @@ function PriorityBadge({ priority }) {
         lineHeight: 1.4
       },
       children: [
-        isUrgent && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react30.AlertTriangle, { style: { width: 9, height: 9 }, strokeWidth: 2.5 }),
+        isUrgent && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react31.AlertTriangle, { style: { width: 9, height: 9 }, strokeWidth: 2.5 }),
         p.label
       ]
     }
@@ -9367,7 +9936,7 @@ function AllNotesModal({
                               flexShrink: 0
                             },
                             children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-                              import_lucide_react30.MessageCircle,
+                              import_lucide_react31.MessageCircle,
                               {
                                 style: { width: 16, height: 16, color: "#64748b" },
                                 strokeWidth: 2.5
@@ -9428,7 +9997,7 @@ function AllNotesModal({
                               flexShrink: 0
                             },
                             "aria-label": "Close",
-                            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react30.X, { style: { width: 15, height: 15 } })
+                            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react31.X, { style: { width: 15, height: 15 } })
                           }
                         ) })
                       ]
@@ -9448,7 +10017,7 @@ function AllNotesModal({
                         children: noteGroups.map((group, i) => {
                           const isActive = i === selectedIdx;
                           const meta = getNodeMeta(group.nodeType);
-                          const IconComp = meta?.icon || import_lucide_react30.MessageCircle;
+                          const IconComp = meta?.icon || import_lucide_react31.MessageCircle;
                           const iconColor = meta?.color || "#64748b";
                           return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
                             "button",
@@ -9537,7 +10106,7 @@ function AllNotesModal({
                                   )
                                 ] }),
                                 /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-                                  import_lucide_react30.ChevronRight,
+                                  import_lucide_react31.ChevronRight,
                                   {
                                     style: {
                                       width: 14,
@@ -9589,7 +10158,7 @@ function AllNotesModal({
                                     children: [
                                       (() => {
                                         const meta = getNodeMeta(selected.nodeType);
-                                        const Icon = meta?.icon || import_lucide_react30.MessageCircle;
+                                        const Icon = meta?.icon || import_lucide_react31.MessageCircle;
                                         const color = meta?.color || "#64748b";
                                         return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                                           "div",
@@ -9680,7 +10249,7 @@ function AllNotesModal({
                                       e.currentTarget.style.color = "#475569";
                                     },
                                     children: [
-                                      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react30.Locate, { style: { width: 12, height: 12 } }),
+                                      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react31.Locate, { style: { width: 12, height: 12 } }),
                                       "Find on canvas"
                                     ]
                                   }
@@ -9932,7 +10501,7 @@ var NodeGraphBuilder = ({
   );
   const [nodes, setNodes, onNodesChange] = (0, import_react80.useNodesState)(initialNodes);
   const [edges, setEdges, onEdgesChange] = (0, import_react80.useEdgesState)(initialEdges);
-  const { fitView, getNodes } = (0, import_react80.useReactFlow)();
+  const { fitView, getNodes, getIntersectingNodes, getZoom, setCenter } = (0, import_react80.useReactFlow)();
   (0, import_react79.useEffect)(() => {
     setNodes(initialNodes);
     setEdges(initialEdges);
@@ -10072,57 +10641,107 @@ var NodeGraphBuilder = ({
     wrapper.classList.add("ec-animating-layout");
     setTimeout(() => wrapper.classList.remove("ec-animating-layout"), 400);
   }, []);
-  const relayoutGraph = (0, import_react79.useCallback)((nextNodes, nextEdges) => {
-    const g = new import_dagre3.default.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);
-      }
-    });
-    import_dagre3.default.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 = (0, import_react79.useCallback)(
+    (nextNodes, nextEdges, anchor) => {
+      const g = new import_dagre3.default.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);
+      });
+      import_dagre3.default.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 = (0, import_react79.useCallback)(
+    (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 = (0, import_react79.useCallback)(
     (children, edges2, sizeOf, opts) => {
       const { padding, headerH, fallbackW = 240, fallbackH = 120 } = opts;
@@ -10220,9 +10839,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(
@@ -10230,9 +10859,6 @@ var NodeGraphBuilder = ({
         );
         return [...without, ...originalEdges];
       });
-      requestAnimationFrame(() => {
-        fitView({ duration: 400, padding: 0.2 });
-      });
     },
     [
       initialNodes,
@@ -10240,8 +10866,7 @@ var NodeGraphBuilder = ({
       setNodes,
       setEdges,
       relayoutGraph,
-      animateLayout,
-      fitView
+      animateLayout
     ]
   );
   (0, import_react79.useEffect)(() => {
@@ -10324,9 +10949,6 @@ var NodeGraphBuilder = ({
         onNodeClick(node);
         return;
       }
-      if (linksToVisualiser && onNavigate) {
-        return;
-      }
       const isFlow = edgesRef.current.some(
         (edge) => edge.type === "flow-edge"
       );
@@ -10340,6 +10962,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;
@@ -10348,6 +10988,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",
@@ -10360,7 +11003,8 @@ var NodeGraphBuilder = ({
             __preExpansion: {
               node,
               edges: preExpansionEdges,
-              nodeIds: preExpansionNodeIds
+              nodeIds: preExpansionNodeIds,
+              nodePositions: preExpansionNodePositions
             }
           },
           style: {
@@ -10421,24 +11065,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(
@@ -10447,6 +11086,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;
@@ -10466,8 +11111,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: {
@@ -10485,9 +11142,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;
       }
@@ -10652,10 +11323,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 = (0, import_react79.useCallback)(() => {
     setAnimateMessages((prev) => {
@@ -10885,13 +11567,15 @@ var NodeGraphBuilder = ({
   }, [getNodes, downloadImage, title]);
   const handleLegendClick = (0, import_react79.useCallback)(
     (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 } };
       });
@@ -10906,10 +11590,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]
@@ -11106,7 +11792,7 @@ var NodeGraphBuilder = ({
                   "aria-label": "Open menu",
                   children: [
                     title && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "text-base font-medium text-[rgb(var(--ec-page-text))] leading-tight", children: title }),
-                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react31.MoreVertical, { className: "h-5 w-5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 group-hover:text-[rgb(var(--ec-accent))] transition-colors duration-150" })
+                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react32.MoreVertical, { className: "h-5 w-5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 group-hover:text-[rgb(var(--ec-accent))] transition-colors duration-150" })
                   ]
                 }
               ) }),
@@ -11208,7 +11894,7 @@ var NodeGraphBuilder = ({
                             "aria-label": "Open menu",
                             children: [
                               title && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "text-base font-medium text-[rgb(var(--ec-page-text))] leading-tight", children: title }),
-                              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react31.MoreVertical, { className: "h-5 w-5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 group-hover:text-[rgb(var(--ec-accent))] transition-colors duration-150" })
+                              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react32.MoreVertical, { className: "h-5 w-5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 group-hover:text-[rgb(var(--ec-accent))] transition-colors duration-150" })
                             ]
                           }
                         ) }),
@@ -11270,7 +11956,7 @@ var NodeGraphBuilder = ({
                       ) }) })
                     ] }),
                     links.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex justify-end mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "relative flex items-center -mt-1", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "absolute left-2 pointer-events-none flex items-center h-full", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react31.HistoryIcon, { className: "h-4 w-4 text-[rgb(var(--ec-page-text-muted))]" }) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "absolute left-2 pointer-events-none flex items-center h-full", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react32.HistoryIcon, { className: "h-4 w-4 text-[rgb(var(--ec-page-text-muted))]" }) }),
                       /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                         "select",
                         {
@@ -11425,7 +12111,7 @@ var NodeGraphBuilder = ({
                       onClick: () => setIsShareModalOpen(false),
                       className: "text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))] transition-colors",
                       "aria-label": "Close modal",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react31.ExternalLink, { className: "w-5 h-5 rotate-180" })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react32.ExternalLink, { className: "w-5 h-5 rotate-180" })
                     }
                   )
                 ] }),
@@ -11447,7 +12133,7 @@ var NodeGraphBuilder = ({
                       className: `px-4 py-2.5 rounded-md font-medium transition-all duration-200 flex items-center gap-2 ${shareUrlCopySuccess ? "bg-green-500 text-white" : "bg-[rgb(var(--ec-accent))] text-white hover:opacity-90"}`,
                       "aria-label": shareUrlCopySuccess ? "Copied!" : "Copy link",
                       children: [
-                        shareUrlCopySuccess ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react31.CheckIcon, { className: "w-4 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react31.ClipboardIcon, { className: "w-4 h-4" }),
+                        shareUrlCopySuccess ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react32.CheckIcon, { className: "w-4 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react32.ClipboardIcon, { className: "w-4 h-4" }),
                         /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { children: shareUrlCopySuccess ? "Copied!" : "Copy" })
                       ]
                     }