@eventcatalog/visualiser 3.18.3 → 3.19.0

package/dist/index.mjs

@@ -5,7 +5,7 @@ import {
   useState as useState14,
   useCallback as useCallback12,
   useRef as useRef6,
-  memo as memo34
+  memo as memo35
 } from "react";
 import { createPortal } from "react-dom";
 import {
@@ -4114,6 +4114,7 @@ var config_default5 = {
 // src/nodes/Flow.tsx
 import { memo as memo16, useMemo as useMemo7 } from "react";
 import { Handle as Handle12 } from "@xyflow/react";
+import { Maximize2 } from "lucide-react";
 import * as ContextMenu from "@radix-ui/react-context-menu";
 
 // src/utils/badges.tsx
@@ -4223,7 +4224,7 @@ function getIcon(iconName) {
 }
 
 // src/nodes/Flow.tsx
-import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
 function classNames12(...classes) {
   return classes.filter(Boolean).join(" ");
 }
@@ -4233,6 +4234,7 @@ var Flow_default = memo16(function FlowNode({
   targetPosition
 }) {
   const { mode, flow } = data;
+  const canExpand = Array.isArray(data?.expandedNodes) && data.expandedNodes.length > 0;
   const { id, version, owners = EMPTY_ARRAY, name, styles } = flow.data;
   const { node: { color = "teal", label } = {}, icon = "QueueListIcon" } = styles || {};
   const Icon = useMemo7(() => getIcon(icon), [icon]);
@@ -4243,60 +4245,91 @@ var Flow_default = memo16(function FlowNode({
     /* @__PURE__ */ jsx17(ContextMenu.Trigger, { children: /* @__PURE__ */ jsxs15(
       "div",
       {
-        className: classNames12(
-          `rounded-md border flex justify-start bg-[rgb(var(--ec-card-bg))] text-[rgb(var(--ec-page-text))] border-${color}-400`
-        ),
-        style: NODE_WIDTH_STYLE,
+        className: "relative",
+        style: { isolation: "isolate", ...NODE_WIDTH_STYLE },
         children: [
+          canExpand && /* @__PURE__ */ jsxs15(Fragment2, { children: [
+            /* @__PURE__ */ jsx17(
+              "div",
+              {
+                className: `absolute inset-0 rounded-md border border-${color}-400 bg-[rgb(var(--ec-card-bg))]`,
+                style: { transform: "translate(6px, 6px)", opacity: 0.5 },
+                "aria-hidden": true
+              }
+            ),
+            /* @__PURE__ */ jsx17(
+              "div",
+              {
+                className: `absolute inset-0 rounded-md border border-${color}-400 bg-[rgb(var(--ec-card-bg))]`,
+                style: { transform: "translate(3px, 3px)", opacity: 0.7 },
+                "aria-hidden": true
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsxs15(
             "div",
             {
               className: classNames12(
-                `bg-gradient-to-b from-${color}-500 to-${color}-700 relative flex flex-col items-center w-5 justify-between rounded-l-sm text-${color}-100`,
-                `border-r-[1px] border-${color}-500`
+                `relative rounded-md border flex justify-start bg-[rgb(var(--ec-card-bg))] text-[rgb(var(--ec-page-text))] border-${color}-400`
               ),
+              style: NODE_WIDTH_STYLE,
               children: [
-                Icon && /* @__PURE__ */ jsx17(Icon, { className: "w-4 h-4 opacity-90 text-white mt-1" }),
-                mode === "full" && /* @__PURE__ */ jsx17(
-                  "span",
+                /* @__PURE__ */ jsxs15(
+                  "div",
                   {
-                    className: `text-center text-[${fontSize}] text-white font-bold uppercase mb-4`,
-                    style: ROTATED_LABEL_STYLE,
-                    children: nodeLabel
+                    className: classNames12(
+                      `bg-gradient-to-b from-${color}-500 to-${color}-700 relative flex flex-col items-center w-5 justify-between rounded-l-sm text-${color}-100`,
+                      `border-r-[1px] border-${color}-500`
+                    ),
+                    children: [
+                      Icon && /* @__PURE__ */ jsx17(Icon, { className: "w-4 h-4 opacity-90 text-white mt-1" }),
+                      mode === "full" && /* @__PURE__ */ jsx17(
+                        "span",
+                        {
+                          className: `text-center text-[${fontSize}] text-white font-bold uppercase mb-4`,
+                          style: ROTATED_LABEL_STYLE,
+                          children: nodeLabel
+                        }
+                      )
+                    ]
                   }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs15("div", { className: "p-1 flex-1", children: [
-            targetPosition && /* @__PURE__ */ jsx17(Handle12, { type: "target", position: targetPosition }),
-            sourcePosition && /* @__PURE__ */ jsx17(Handle12, { type: "source", position: sourcePosition }),
-            /* @__PURE__ */ jsxs15(
-              "div",
-              {
-                className: classNames12(
-                  mode === "full" ? `border-b border-[rgb(var(--ec-page-border))]` : ""
                 ),
-                children: [
-                  /* @__PURE__ */ jsx17("span", { className: "text-xs font-bold block pt-0.5 pb-0.5", children: name }),
-                  /* @__PURE__ */ jsxs15("div", { className: "flex justify-between", children: [
-                    /* @__PURE__ */ jsxs15("span", { className: "text-[10px] font-light block pt-0.5 pb-0.5 ", children: [
-                      "v",
-                      version
-                    ] }),
-                    mode === "simple" && /* @__PURE__ */ jsx17("span", { className: "text-[10px] text-[rgb(var(--ec-page-text-muted))] font-light block pt-0.5 pb-0.5 ", children: nodeLabel })
+                /* @__PURE__ */ jsxs15("div", { className: "p-1 flex-1", children: [
+                  targetPosition && /* @__PURE__ */ jsx17(Handle12, { type: "target", position: targetPosition }),
+                  sourcePosition && /* @__PURE__ */ jsx17(Handle12, { type: "source", position: sourcePosition }),
+                  /* @__PURE__ */ jsxs15(
+                    "div",
+                    {
+                      className: classNames12(
+                        mode === "full" ? `border-b border-[rgb(var(--ec-page-border))]` : ""
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx17("span", { className: "text-xs font-bold block pt-0.5 pb-0.5", children: name }),
+                        /* @__PURE__ */ jsxs15("div", { className: "flex justify-between", children: [
+                          /* @__PURE__ */ jsxs15("span", { className: "text-[10px] font-light block pt-0.5 pb-0.5 ", children: [
+                            "v",
+                            version
+                          ] }),
+                          mode === "simple" && /* @__PURE__ */ jsx17("span", { className: "text-[10px] text-[rgb(var(--ec-page-text-muted))] font-light block pt-0.5 pb-0.5 ", children: nodeLabel })
+                        ] })
+                      ]
+                    }
+                  ),
+                  mode === "full" && /* @__PURE__ */ jsxs15("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] ", children: [
+                    /* @__PURE__ */ jsx17("div", { className: "leading-3 py-1", children: /* @__PURE__ */ jsx17("span", { className: "text-[8px] font-light", children: flow.data.summary }) }),
+                    /* @__PURE__ */ jsx17("div", { className: "grid grid-cols-2 gap-x-4 py-1", children: /* @__PURE__ */ jsxs15("span", { className: "text-xs", style: TINY_FONT_STYLE, children: [
+                      "Owners: ",
+                      owners.length
+                    ] }) })
+                  ] }),
+                  canExpand && /* @__PURE__ */ jsxs15("div", { className: "mt-1 flex items-center gap-1 text-[8px] text-[rgb(var(--ec-page-text-muted))]", children: [
+                    /* @__PURE__ */ jsx17(Maximize2, { className: "w-2.5 h-2.5" }),
+                    "Click to explore"
                   ] })
-                ]
-              }
-            ),
-            mode === "full" && /* @__PURE__ */ jsxs15("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] ", children: [
-              /* @__PURE__ */ jsx17("div", { className: "leading-3 py-1", children: /* @__PURE__ */ jsx17("span", { className: "text-[8px] font-light", children: flow.data.summary }) }),
-              /* @__PURE__ */ jsx17("div", { className: "grid grid-cols-2 gap-x-4 py-1", children: /* @__PURE__ */ jsxs15("span", { className: "text-xs", style: TINY_FONT_STYLE, children: [
-                "Owners: ",
-                owners.length
-              ] }) })
-            ] })
-          ] })
+                ] })
+              ]
+            }
+          )
         ]
       }
     ) }),
@@ -4332,15 +4365,126 @@ var Flow_default = memo16(function FlowNode({
   ] });
 });
 
+// src/nodes/FlowExpandedNode.tsx
+import { memo as memo17 } from "react";
+import { Workflow, Minimize2 } from "lucide-react";
+import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+var CONTAINER_STYLE = {
+  width: "100%",
+  height: "100%",
+  borderRadius: 12,
+  border: "2px solid rgba(20, 184, 166, 0.5)",
+  backgroundColor: "rgba(20, 184, 166, 0.08)",
+  boxShadow: "0 2px 12px rgba(20, 184, 166, 0.12)",
+  position: "relative",
+  overflow: "visible"
+};
+var HEADER_STYLE = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  height: 44,
+  borderTopLeftRadius: 10,
+  borderTopRightRadius: 10,
+  background: "rgba(20, 184, 166, 0.12)",
+  borderBottom: "1px solid rgba(20, 184, 166, 0.3)",
+  overflow: "visible"
+};
+var BADGE_STYLE = {
+  position: "absolute",
+  top: -10,
+  left: 12,
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 3,
+  padding: "2px 8px",
+  borderRadius: 4,
+  background: "#0d9488",
+  boxShadow: "0 1px 3px rgba(0,0,0,0.15)",
+  zIndex: 10,
+  fontSize: 8,
+  fontWeight: 700,
+  letterSpacing: "0.08em",
+  textTransform: "uppercase",
+  color: "white"
+};
+var HEADER_CONTENT_STYLE = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  height: "100%",
+  padding: "0 12px 0 14px"
+};
+var FLOW_NAME_STYLE = {
+  fontSize: 11,
+  fontWeight: 700,
+  color: "rgb(var(--ec-page-text))",
+  letterSpacing: "0.04em",
+  textTransform: "uppercase",
+  whiteSpace: "nowrap"
+};
+var VERSION_STYLE = {
+  fontSize: 10,
+  fontWeight: 500,
+  color: "#5eead4",
+  marginLeft: 8
+};
+var COLLAPSE_BUTTON_STYLE = {
+  background: "#0d9488",
+  border: "1px solid #5eead4",
+  borderRadius: 6,
+  padding: "4px 10px",
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  gap: 4,
+  fontSize: 10,
+  fontWeight: 600,
+  color: "white"
+};
+var FlowExpandedNode_default = memo17(function FlowExpandedNode({
+  data
+}) {
+  const { flowName, version } = data;
+  return /* @__PURE__ */ jsx18("div", { style: CONTAINER_STYLE, children: /* @__PURE__ */ jsxs16("div", { style: HEADER_STYLE, children: [
+    /* @__PURE__ */ jsxs16("div", { style: BADGE_STYLE, children: [
+      /* @__PURE__ */ jsx18(Workflow, { size: 10, strokeWidth: 2.5 }),
+      "Sub-flow"
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { style: HEADER_CONTENT_STYLE, children: [
+      /* @__PURE__ */ jsxs16("div", { style: { display: "flex", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsx18("span", { style: FLOW_NAME_STYLE, children: flowName || "Flow" }),
+        version && /* @__PURE__ */ jsxs16("span", { style: VERSION_STYLE, children: [
+          "v",
+          version
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs16(
+        "button",
+        {
+          style: COLLAPSE_BUTTON_STYLE,
+          className: "ec-collapse-flow-btn nodrag nopan",
+          onMouseDown: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsx18(Minimize2, { size: 12, strokeWidth: 2.5 }),
+            "Collapse"
+          ]
+        }
+      )
+    ] })
+  ] }) });
+});
+
 // src/nodes/Entity.tsx
 import { Handle as Handle13, Position as Position12 } from "@xyflow/react";
 import * as ContextMenu2 from "@radix-ui/react-context-menu";
-import { memo as memo17, useState as useState3, useMemo as useMemo8 } from "react";
-import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+import { memo as memo18, useState as useState3, useMemo as useMemo8 } from "react";
+import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
 function classNames13(...classes) {
   return classes.filter(Boolean).join(" ");
 }
-var Entity_default = memo17(function EntityNode({
+var Entity_default = memo18(function EntityNode({
   data,
   sourcePosition,
   targetPosition
@@ -4361,8 +4505,8 @@ var Entity_default = memo17(function EntityNode({
   const Icon = useMemo8(() => getIcon(icon), [icon]);
   const [hoveredProperty, setHoveredProperty] = useState3(null);
   const portalContainer = usePortalContainer();
-  return /* @__PURE__ */ jsxs16(ContextMenu2.Root, { children: [
-    /* @__PURE__ */ jsx18(ContextMenu2.Trigger, { children: /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(ContextMenu2.Root, { children: [
+    /* @__PURE__ */ jsx19(ContextMenu2.Trigger, { children: /* @__PURE__ */ jsxs17(
       "div",
       {
         className: classNames13(
@@ -4370,7 +4514,7 @@ var Entity_default = memo17(function EntityNode({
           externalToDomain ? "border-amber-500/60" : "border-blue-400/50"
         ),
         children: [
-          /* @__PURE__ */ jsxs16(
+          /* @__PURE__ */ jsxs17(
             "div",
             {
               className: classNames13(
@@ -4378,34 +4522,34 @@ var Entity_default = memo17(function EntityNode({
                 externalToDomain ? "bg-amber-500/20" : "bg-blue-500/15"
               ),
               children: [
-                /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-2", children: [
-                  Icon && /* @__PURE__ */ jsx18(Icon, { className: "w-4 h-4 text-[rgb(var(--ec-page-text-muted))]" }),
-                  /* @__PURE__ */ jsx18("span", { className: "font-semibold text-[rgb(var(--ec-page-text))] text-sm", children: name }),
-                  aggregateRoot && /* @__PURE__ */ jsx18("span", { className: "text-xs bg-amber-500/20 text-amber-600 dark:text-amber-400 px-1.5 py-0.5 rounded font-medium", children: "AR" })
+                /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2", children: [
+                  Icon && /* @__PURE__ */ jsx19(Icon, { className: "w-4 h-4 text-[rgb(var(--ec-page-text-muted))]" }),
+                  /* @__PURE__ */ jsx19("span", { className: "font-semibold text-[rgb(var(--ec-page-text))] text-sm", children: name }),
+                  aggregateRoot && /* @__PURE__ */ jsx19("span", { className: "text-xs bg-amber-500/20 text-amber-600 dark:text-amber-400 px-1.5 py-0.5 rounded font-medium", children: "AR" })
                 ] }),
-                domainName && /* @__PURE__ */ jsxs16("div", { className: "text-xs text-[rgb(var(--ec-page-text-muted))] font-medium mt-1", children: [
+                domainName && /* @__PURE__ */ jsxs17("div", { className: "text-xs text-[rgb(var(--ec-page-text-muted))] font-medium mt-1", children: [
                   "from ",
                   domainName,
                   " domain"
                 ] }),
-                mode === "full" && /* @__PURE__ */ jsxs16("div", { className: "text-xs text-[rgb(var(--ec-page-text-muted))] mt-1", children: [
+                mode === "full" && /* @__PURE__ */ jsxs17("div", { className: "text-xs text-[rgb(var(--ec-page-text-muted))] mt-1", children: [
                   "v",
                   version
                 ] })
               ]
             }
           ),
-          properties.length > 0 ? /* @__PURE__ */ jsx18("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] relative", children: properties.map((property, index) => {
+          properties.length > 0 ? /* @__PURE__ */ jsx19("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] relative", children: properties.map((property, index) => {
             const propertyKey = `${property.name}-${index}`;
             const isHovered = hoveredProperty === propertyKey;
-            return /* @__PURE__ */ jsxs16(
+            return /* @__PURE__ */ jsxs17(
               "div",
               {
                 className: "relative flex items-center justify-between px-4 py-2 hover:bg-[rgb(var(--ec-page-border)/0.2)]",
                 onMouseEnter: () => property.description && setHoveredProperty(propertyKey),
                 onMouseLeave: () => setHoveredProperty(null),
                 children: [
-                  /* @__PURE__ */ jsx18(
+                  /* @__PURE__ */ jsx19(
                     Handle13,
                     {
                       type: "target",
@@ -4415,7 +4559,7 @@ var Entity_default = memo17(function EntityNode({
                       style: HANDLE_LEFT_OFFSET_STYLE
                     }
                   ),
-                  /* @__PURE__ */ jsx18(
+                  /* @__PURE__ */ jsx19(
                     Handle13,
                     {
                       type: "source",
@@ -4425,47 +4569,47 @@ var Entity_default = memo17(function EntityNode({
                       style: HANDLE_RIGHT_OFFSET_STYLE
                     }
                   ),
-                  /* @__PURE__ */ jsxs16("div", { className: "flex-1 flex items-center justify-between", children: [
-                    /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-1", children: [
-                      /* @__PURE__ */ jsx18("span", { className: "text-sm font-medium text-[rgb(var(--ec-page-text))]", children: property.name }),
-                      property.required && /* @__PURE__ */ jsx18("span", { className: "text-red-500 text-xs", children: "*" })
+                  /* @__PURE__ */ jsxs17("div", { className: "flex-1 flex items-center justify-between", children: [
+                    /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-1", children: [
+                      /* @__PURE__ */ jsx19("span", { className: "text-sm font-medium text-[rgb(var(--ec-page-text))]", children: property.name }),
+                      property.required && /* @__PURE__ */ jsx19("span", { className: "text-red-500 text-xs", children: "*" })
                     ] }),
-                    /* @__PURE__ */ jsx18("span", { className: "text-sm text-[rgb(var(--ec-page-text-muted))] font-mono", children: property.type })
+                    /* @__PURE__ */ jsx19("span", { className: "text-sm text-[rgb(var(--ec-page-text-muted))] font-mono", children: property.type })
                   ] }),
-                  property.references && /* @__PURE__ */ jsx18("div", { className: "absolute right-2 top-1/2 transform -translate-y-1/2", children: /* @__PURE__ */ jsx18(
+                  property.references && /* @__PURE__ */ jsx19("div", { className: "absolute right-2 top-1/2 transform -translate-y-1/2", children: /* @__PURE__ */ jsx19(
                     "div",
                     {
                       className: "w-2 h-2 bg-blue-500 rounded-full",
                       title: `References ${property.references}`
                     }
                   ) }),
-                  isHovered && property.description && /* @__PURE__ */ jsxs16("div", { className: "absolute left-full ml-2 top-1/2 transform -translate-y-1/2 z-[9999] w-[200px] bg-gray-900 text-white text-xs rounded-lg py-2 px-3 pointer-events-none shadow-xl max-w-xl opacity-100", children: [
-                    /* @__PURE__ */ jsx18("div", { className: "text-gray-200 whitespace-normal break-words", children: property.description }),
-                    /* @__PURE__ */ jsx18("div", { className: "absolute right-full top-1/2 transform -translate-y-1/2 border-4 border-transparent border-r-gray-900" })
+                  isHovered && property.description && /* @__PURE__ */ jsxs17("div", { className: "absolute left-full ml-2 top-1/2 transform -translate-y-1/2 z-[9999] w-[200px] bg-gray-900 text-white text-xs rounded-lg py-2 px-3 pointer-events-none shadow-xl max-w-xl opacity-100", children: [
+                    /* @__PURE__ */ jsx19("div", { className: "text-gray-200 whitespace-normal break-words", children: property.description }),
+                    /* @__PURE__ */ jsx19("div", { className: "absolute right-full top-1/2 transform -translate-y-1/2 border-4 border-transparent border-r-gray-900" })
                   ] })
                 ]
               },
               propertyKey
             );
-          }) }) : /* @__PURE__ */ jsx18("div", { className: "px-4 py-3 text-sm text-[rgb(var(--ec-page-text-muted))] text-center", children: "No properties defined" }),
-          properties.length === 0 && /* @__PURE__ */ jsxs16(Fragment2, { children: [
-            targetPosition && /* @__PURE__ */ jsx18(Handle13, { type: "target", position: targetPosition }),
-            sourcePosition && /* @__PURE__ */ jsx18(Handle13, { type: "source", position: sourcePosition })
+          }) }) : /* @__PURE__ */ jsx19("div", { className: "px-4 py-3 text-sm text-[rgb(var(--ec-page-text-muted))] text-center", children: "No properties defined" }),
+          properties.length === 0 && /* @__PURE__ */ jsxs17(Fragment3, { children: [
+            targetPosition && /* @__PURE__ */ jsx19(Handle13, { type: "target", position: targetPosition }),
+            sourcePosition && /* @__PURE__ */ jsx19(Handle13, { type: "source", position: sourcePosition })
           ] })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx18(ContextMenu2.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx19(ContextMenu2.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx19(
       ContextMenu2.Content,
       {
         className: "min-w-[220px] bg-[rgb(var(--ec-card-bg))] rounded-md p-1 shadow-md border border-[rgb(var(--ec-page-border))]",
         onClick: (e) => e.stopPropagation(),
-        children: /* @__PURE__ */ jsx18(
+        children: /* @__PURE__ */ jsx19(
           ContextMenu2.Item,
           {
             asChild: true,
             className: "text-sm text-[rgb(var(--ec-page-text))] px-2 py-1.5 outline-none cursor-pointer hover:bg-[rgb(var(--ec-accent-subtle))] rounded-sm flex items-center",
-            children: /* @__PURE__ */ jsx18("a", { href: buildUrl(`/docs/entities/${entity.data.id}/${version}`), children: "Read documentation" })
+            children: /* @__PURE__ */ jsx19("a", { href: buildUrl(`/docs/entities/${entity.data.id}/${version}`), children: "Read documentation" })
           }
         )
       }
@@ -4474,14 +4618,14 @@ var Entity_default = memo17(function EntityNode({
 });
 
 // src/nodes/User.tsx
-import { memo as memo18 } from "react";
+import { memo as memo19 } from "react";
 import { UserIcon as UserIcon2 } from "@heroicons/react/20/solid";
 import { Handle as Handle14 } from "@xyflow/react";
-import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
 function classNames14(...classes) {
   return classes.filter(Boolean).join(" ");
 }
-var User_default = memo18(function UserNode({
+var User_default = memo19(function UserNode({
   data,
   sourcePosition,
   targetPosition
@@ -4493,7 +4637,7 @@ var User_default = memo18(function UserNode({
     showSource: _showSource = true
   } = data;
   const { summary, actor: { name } = {} } = step;
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(
     "div",
     {
       className: classNames14(
@@ -4502,7 +4646,7 @@ var User_default = memo18(function UserNode({
       ),
       style: NODE_WIDTH_STYLE,
       children: [
-        /* @__PURE__ */ jsxs17(
+        /* @__PURE__ */ jsxs18(
           "div",
           {
             className: classNames14(
@@ -4510,8 +4654,8 @@ var User_default = memo18(function UserNode({
               `border-r-[1px] border-yellow-500`
             ),
             children: [
-              /* @__PURE__ */ jsx19(UserIcon2, { className: "w-4 h-4 opacity-90 text-white mt-1" }),
-              mode === "full" && /* @__PURE__ */ jsx19(
+              /* @__PURE__ */ jsx20(UserIcon2, { className: "w-4 h-4 opacity-90 text-white mt-1" }),
+              mode === "full" && /* @__PURE__ */ jsx20(
                 "span",
                 {
                   className: "text-center text-[9px] text-white font-bold uppercase mb-4",
@@ -4522,24 +4666,24 @@ var User_default = memo18(function UserNode({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs17("div", { className: "p-1 flex-1", children: [
-          targetPosition && /* @__PURE__ */ jsx19(Handle14, { type: "target", position: targetPosition }),
-          sourcePosition && /* @__PURE__ */ jsx19(Handle14, { type: "source", position: sourcePosition }),
-          (!summary || mode !== "full") && /* @__PURE__ */ jsxs17("div", { className: "h-full ", children: [
-            /* @__PURE__ */ jsx19("span", { className: "text-sm font-bold block pb-0.5 w-full", children: name }),
-            mode === "simple" && /* @__PURE__ */ jsx19("div", { className: "w-full text-right", children: /* @__PURE__ */ jsx19("span", { className: " w-full text-[10px] text-[rgb(var(--ec-page-text-muted))] font-light block pt-0.5 pb-0.5 ", children: "Event" }) })
+        /* @__PURE__ */ jsxs18("div", { className: "p-1 flex-1", children: [
+          targetPosition && /* @__PURE__ */ jsx20(Handle14, { type: "target", position: targetPosition }),
+          sourcePosition && /* @__PURE__ */ jsx20(Handle14, { type: "source", position: sourcePosition }),
+          (!summary || mode !== "full") && /* @__PURE__ */ jsxs18("div", { className: "h-full ", children: [
+            /* @__PURE__ */ jsx20("span", { className: "text-sm font-bold block pb-0.5 w-full", children: name }),
+            mode === "simple" && /* @__PURE__ */ jsx20("div", { className: "w-full text-right", children: /* @__PURE__ */ jsx20("span", { className: " w-full text-[10px] text-[rgb(var(--ec-page-text-muted))] font-light block pt-0.5 pb-0.5 ", children: "Event" }) })
           ] }),
-          summary && mode === "full" && /* @__PURE__ */ jsxs17("div", { children: [
-            /* @__PURE__ */ jsx19(
+          summary && mode === "full" && /* @__PURE__ */ jsxs18("div", { children: [
+            /* @__PURE__ */ jsx20(
               "div",
               {
                 className: classNames14(
                   mode === "full" ? `border-b border-[rgb(var(--ec-page-border))]` : ""
                 ),
-                children: /* @__PURE__ */ jsx19("span", { className: "text-xs font-bold block pb-0.5", children: name })
+                children: /* @__PURE__ */ jsx20("span", { className: "text-xs font-bold block pb-0.5", children: name })
               }
             ),
-            mode === "full" && /* @__PURE__ */ jsx19("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] ", children: /* @__PURE__ */ jsx19("div", { className: "leading-3 py-1", children: /* @__PURE__ */ jsx19("span", { className: "text-[8px] font-light", children: summary }) }) })
+            mode === "full" && /* @__PURE__ */ jsx20("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] ", children: /* @__PURE__ */ jsx20("div", { className: "leading-3 py-1", children: /* @__PURE__ */ jsx20("span", { className: "text-[8px] font-light", children: summary }) }) })
           ] })
         ] })
       ]
@@ -4548,20 +4692,20 @@ var User_default = memo18(function UserNode({
 });
 
 // src/nodes/Step.tsx
-import { memo as memo19 } from "react";
+import { memo as memo20 } from "react";
 import { Handle as Handle15, Position as Position13 } from "@xyflow/react";
-import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
 function classNames15(...classes) {
   return classes.filter(Boolean).join(" ");
 }
-var Step_default = memo19(function StepNode({
+var Step_default = memo20(function StepNode({
   data,
   sourcePosition,
   targetPosition
 }) {
   const { mode, step } = data;
   const { title, summary } = step;
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     "div",
     {
       className: classNames15(
@@ -4569,14 +4713,14 @@ var Step_default = memo19(function StepNode({
       ),
       style: NODE_WIDTH_STYLE,
       children: [
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx21(
           "div",
           {
             className: classNames15(
               "bg-gradient-to-b from-gray-700 to-gray-700 relative flex flex-col items-center w-5 justify-end rounded-l-sm text-orange-100-500",
               `border-r-[1px] border-gray-500`
             ),
-            children: mode === "full" && /* @__PURE__ */ jsx20(
+            children: mode === "full" && /* @__PURE__ */ jsx21(
               "span",
               {
                 className: "text-center text-[9px] text-white font-bold uppercase mb-4",
@@ -4586,8 +4730,8 @@ var Step_default = memo19(function StepNode({
             )
           }
         ),
-        /* @__PURE__ */ jsxs18("div", { className: "p-1 flex-1", children: [
-          /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsxs19("div", { className: "p-1 flex-1", children: [
+          /* @__PURE__ */ jsx21(
             Handle15,
             {
               type: "target",
@@ -4595,7 +4739,7 @@ var Step_default = memo19(function StepNode({
               style: HIDDEN_HANDLE_STYLE
             }
           ),
-          /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsx21(
             Handle15,
             {
               type: "source",
@@ -4603,18 +4747,18 @@ var Step_default = memo19(function StepNode({
               style: HIDDEN_HANDLE_STYLE
             }
           ),
-          !summary && /* @__PURE__ */ jsx20("div", { className: "h-full flex items-center", children: /* @__PURE__ */ jsx20("span", { className: "text-sm font-bold block pb-0.5", children: title }) }),
-          summary && /* @__PURE__ */ jsxs18("div", { children: [
-            /* @__PURE__ */ jsx20(
+          !summary && /* @__PURE__ */ jsx21("div", { className: "h-full flex items-center", children: /* @__PURE__ */ jsx21("span", { className: "text-sm font-bold block pb-0.5", children: title }) }),
+          summary && /* @__PURE__ */ jsxs19("div", { children: [
+            /* @__PURE__ */ jsx21(
               "div",
               {
                 className: classNames15(
                   mode === "full" ? `border-b border-[rgb(var(--ec-page-border))]` : ""
                 ),
-                children: /* @__PURE__ */ jsx20("span", { className: "text-xs font-bold block pb-0.5", children: title })
+                children: /* @__PURE__ */ jsx21("span", { className: "text-xs font-bold block pb-0.5", children: title })
               }
             ),
-            mode === "full" && /* @__PURE__ */ jsx20("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] ", children: /* @__PURE__ */ jsx20("div", { className: "leading-3 py-1", children: /* @__PURE__ */ jsx20("span", { className: "text-[8px] font-light", children: summary }) }) })
+            mode === "full" && /* @__PURE__ */ jsx21("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] ", children: /* @__PURE__ */ jsx21("div", { className: "leading-3 py-1", children: /* @__PURE__ */ jsx21("span", { className: "text-[8px] font-light", children: summary }) }) })
           ] })
         ] })
       ]
@@ -4630,9 +4774,9 @@ import {
   Position as Position14
 } from "@xyflow/react";
 import * as ContextMenu3 from "@radix-ui/react-context-menu";
-import { memo as memo20, useState as useState4, useCallback as useCallback3, useMemo as useMemo9 } from "react";
-import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
-var Domain_default = memo20(function DomainNode({ data, id: nodeId }) {
+import { memo as memo21, useState as useState4, useCallback as useCallback3, useMemo as useMemo9 } from "react";
+import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
+var Domain_default = memo21(function DomainNode({ data, id: nodeId }) {
   const { mode, domain } = data;
   const reactFlow = useReactFlow();
   const [highlightedServices, setHighlightedServices] = useState4(
@@ -4675,27 +4819,27 @@ var Domain_default = memo20(function DomainNode({ data, id: nodeId }) {
   useOnSelectionChange({
     onChange: handleSelectionChange
   });
-  return /* @__PURE__ */ jsxs19(ContextMenu3.Root, { children: [
-    /* @__PURE__ */ jsx21(ContextMenu3.Trigger, { children: /* @__PURE__ */ jsxs19("div", { className: "w-full rounded-lg border-2 border-yellow-400 bg-[rgb(var(--ec-card-bg))] shadow-lg", children: [
-      /* @__PURE__ */ jsxs19("div", { className: "bg-[rgb(var(--ec-domain-header-bg,253_224_71)/0.2)] px-3 py-2 flex items-center space-x-2", children: [
-        Icon && /* @__PURE__ */ jsx21(Icon, { className: "w-4 h-4 text-yellow-500" }),
-        /* @__PURE__ */ jsxs19("div", { children: [
-          /* @__PURE__ */ jsx21("span", { className: "text-sm font-bold text-[rgb(var(--ec-page-text))]", children: name }),
-          /* @__PURE__ */ jsxs19("span", { className: "text-xs text-yellow-500 ml-2", children: [
+  return /* @__PURE__ */ jsxs20(ContextMenu3.Root, { children: [
+    /* @__PURE__ */ jsx22(ContextMenu3.Trigger, { children: /* @__PURE__ */ jsxs20("div", { className: "w-full rounded-lg border-2 border-yellow-400 bg-[rgb(var(--ec-card-bg))] shadow-lg", children: [
+      /* @__PURE__ */ jsxs20("div", { className: "bg-[rgb(var(--ec-domain-header-bg,253_224_71)/0.2)] px-3 py-2 flex items-center space-x-2", children: [
+        Icon && /* @__PURE__ */ jsx22(Icon, { className: "w-4 h-4 text-yellow-500" }),
+        /* @__PURE__ */ jsxs20("div", { children: [
+          /* @__PURE__ */ jsx22("span", { className: "text-sm font-bold text-[rgb(var(--ec-page-text))]", children: name }),
+          /* @__PURE__ */ jsxs20("span", { className: "text-xs text-yellow-500 ml-2", children: [
             "v",
             version
           ] })
         ] })
       ] }),
-      mode === "full" && services.length > 0 && /* @__PURE__ */ jsx21("div", { children: services.map((service, index) => {
+      mode === "full" && services.length > 0 && /* @__PURE__ */ jsx22("div", { children: services.map((service, index) => {
         const isHighlighted = highlightedServices.has(service.data.id);
-        return /* @__PURE__ */ jsxs19(ContextMenu3.Root, { children: [
-          /* @__PURE__ */ jsx21(ContextMenu3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs19(
+        return /* @__PURE__ */ jsxs20(ContextMenu3.Root, { children: [
+          /* @__PURE__ */ jsx22(ContextMenu3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs20(
             "div",
             {
               className: `relative flex items-center justify-between px-3 py-2 cursor-pointer ${index !== services.length - 1 ? "border-b border-[rgb(var(--ec-page-border))]" : ""} ${isHighlighted ? "bg-pink-100 border-pink-300" : ""}`,
               children: [
-                /* @__PURE__ */ jsx21(
+                /* @__PURE__ */ jsx22(
                   Handle16,
                   {
                     type: "target",
@@ -4705,7 +4849,7 @@ var Domain_default = memo20(function DomainNode({ data, id: nodeId }) {
                     style: HANDLE_LEFT_STYLE
                   }
                 ),
-                /* @__PURE__ */ jsx21(
+                /* @__PURE__ */ jsx22(
                   Handle16,
                   {
                     type: "source",
@@ -4715,19 +4859,19 @@ var Domain_default = memo20(function DomainNode({ data, id: nodeId }) {
                     style: HANDLE_RIGHT_STYLE
                   }
                 ),
-                /* @__PURE__ */ jsxs19("div", { className: "flex items-center space-x-3", children: [
-                  /* @__PURE__ */ jsx21("div", { className: "flex items-center justify-center w-5 h-5 bg-pink-500 rounded", children: ServerIcon3 && /* @__PURE__ */ jsx21(ServerIcon3, { className: "w-3 h-3 text-white" }) }),
-                  /* @__PURE__ */ jsx21("span", { className: "text-sm font-medium text-[rgb(var(--ec-page-text))]", children: service.data.name || service.data.id })
+                /* @__PURE__ */ jsxs20("div", { className: "flex items-center space-x-3", children: [
+                  /* @__PURE__ */ jsx22("div", { className: "flex items-center justify-center w-5 h-5 bg-pink-500 rounded", children: ServerIcon3 && /* @__PURE__ */ jsx22(ServerIcon3, { className: "w-3 h-3 text-white" }) }),
+                  /* @__PURE__ */ jsx22("span", { className: "text-sm font-medium text-[rgb(var(--ec-page-text))]", children: service.data.name || service.data.id })
                 ] }),
-                /* @__PURE__ */ jsx21("div", { className: "flex items-center space-x-4 text-sm text-[rgb(var(--ec-page-text-muted))]", children: /* @__PURE__ */ jsxs19("span", { className: "text-xs", children: [
+                /* @__PURE__ */ jsx22("div", { className: "flex items-center space-x-4 text-sm text-[rgb(var(--ec-page-text-muted))]", children: /* @__PURE__ */ jsxs20("span", { className: "text-xs", children: [
                   "v",
                   service.data.version
                 ] }) })
               ]
             }
           ) }),
-          /* @__PURE__ */ jsx21(ContextMenu3.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs19(ContextMenu3.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: [
-            /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx22(ContextMenu3.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs20(ContextMenu3.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: [
+            /* @__PURE__ */ jsx22(
               ContextMenu3.Item,
               {
                 className: "text-sm text-[rgb(var(--ec-page-text))] px-2 py-1.5 outline-none cursor-pointer hover:bg-[rgb(var(--ec-page-border)/0.5)] rounded-sm flex items-center",
@@ -4737,7 +4881,7 @@ var Domain_default = memo20(function DomainNode({ data, id: nodeId }) {
                 children: "View Service Documentation"
               }
             ),
-            /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsx22(
               ContextMenu3.Item,
               {
                 className: "text-sm text-[rgb(var(--ec-page-text))] px-2 py-1.5 outline-none cursor-pointer hover:bg-[rgb(var(--ec-page-border)/0.5)] rounded-sm flex items-center",
@@ -4751,8 +4895,8 @@ var Domain_default = memo20(function DomainNode({ data, id: nodeId }) {
         ] }, `${service.data.id}-${index}`);
       }) })
     ] }) }),
-    /* @__PURE__ */ jsx21(ContextMenu3.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs19(ContextMenu3.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: [
-      /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx22(ContextMenu3.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs20(ContextMenu3.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: [
+      /* @__PURE__ */ jsx22(
         ContextMenu3.Item,
         {
           className: "text-sm text-[rgb(var(--ec-page-text))] px-2 py-1.5 outline-none cursor-pointer hover:bg-[rgb(var(--ec-page-border)/0.5)] rounded-sm flex items-center",
@@ -4762,7 +4906,7 @@ var Domain_default = memo20(function DomainNode({ data, id: nodeId }) {
           children: "View Domain Documentation"
         }
       ),
-      /* @__PURE__ */ jsx21(
+      /* @__PURE__ */ jsx22(
         ContextMenu3.Item,
         {
           className: "text-sm text-[rgb(var(--ec-page-text))] px-2 py-1.5 outline-none cursor-pointer hover:bg-[rgb(var(--ec-page-border)/0.5)] rounded-sm flex items-center",
@@ -4777,9 +4921,9 @@ var Domain_default = memo20(function DomainNode({ data, id: nodeId }) {
 });
 
 // src/nodes/GroupNode.tsx
-import { memo as memo21 } from "react";
+import { memo as memo22 } from "react";
 import { BoxesIcon } from "lucide-react";
-import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
 var GROUP_CONTAINER_STYLE = {
   width: "100%",
   height: "100%",
@@ -4851,11 +4995,11 @@ var GROUP_VERSION_STYLE = {
 };
 var GROUP_ICON_COLOR_STYLE = { color: "#7c3aed" };
 var GROUP_ICON_WHITE_STYLE = { color: "white" };
-var GroupNode_default = memo21(function GroupNode({ data }) {
+var GroupNode_default = memo22(function GroupNode({ data }) {
   const { domain } = data;
-  return /* @__PURE__ */ jsx22("div", { style: GROUP_CONTAINER_STYLE, children: /* @__PURE__ */ jsxs20("div", { style: GROUP_HEADER_STYLE, children: [
-    /* @__PURE__ */ jsx22("div", { style: GROUP_WATERMARK_STYLE, children: /* @__PURE__ */ jsx22(BoxesIcon, { size: 28, strokeWidth: 2, style: GROUP_ICON_COLOR_STYLE }) }),
-    /* @__PURE__ */ jsx22("div", { style: GROUP_ICON_CIRCLE_STYLE, children: /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23("div", { style: GROUP_CONTAINER_STYLE, children: /* @__PURE__ */ jsxs21("div", { style: GROUP_HEADER_STYLE, children: [
+    /* @__PURE__ */ jsx23("div", { style: GROUP_WATERMARK_STYLE, children: /* @__PURE__ */ jsx23(BoxesIcon, { size: 28, strokeWidth: 2, style: GROUP_ICON_COLOR_STYLE }) }),
+    /* @__PURE__ */ jsx23("div", { style: GROUP_ICON_CIRCLE_STYLE, children: /* @__PURE__ */ jsx23(
       BoxesIcon,
       {
         size: 16,
@@ -4863,9 +5007,9 @@ var GroupNode_default = memo21(function GroupNode({ data }) {
         style: GROUP_ICON_WHITE_STYLE
       }
     ) }),
-    /* @__PURE__ */ jsx22("div", { style: GROUP_BANNER_CONTENT_STYLE, children: /* @__PURE__ */ jsxs20("div", { style: GROUP_BANNER_INNER_STYLE, children: [
-      /* @__PURE__ */ jsx22("span", { style: GROUP_DOMAIN_NAME_STYLE, children: domain?.name || "Domain" }),
-      domain?.version && /* @__PURE__ */ jsxs20("span", { style: GROUP_VERSION_STYLE, children: [
+    /* @__PURE__ */ jsx23("div", { style: GROUP_BANNER_CONTENT_STYLE, children: /* @__PURE__ */ jsxs21("div", { style: GROUP_BANNER_INNER_STYLE, children: [
+      /* @__PURE__ */ jsx23("span", { style: GROUP_DOMAIN_NAME_STYLE, children: domain?.name || "Domain" }),
+      domain?.version && /* @__PURE__ */ jsxs21("span", { style: GROUP_VERSION_STYLE, children: [
         "v",
         domain.version
       ] })
@@ -4876,14 +5020,14 @@ var GroupNode_default = memo21(function GroupNode({ data }) {
 // src/nodes/Custom.tsx
 import { Handle as Handle17 } from "@xyflow/react";
 import * as Icons from "@heroicons/react/24/solid";
-import { memo as memo22, useMemo as useMemo10 } from "react";
+import { memo as memo23, useMemo as useMemo10 } from "react";
 import * as ContextMenu4 from "@radix-ui/react-context-menu";
 import * as Tooltip from "@radix-ui/react-tooltip";
-import { jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
 function classNames16(...classes) {
   return classes.filter(Boolean).join(" ");
 }
-var Custom_default = memo22(function UserNode2({
+var Custom_default = memo23(function UserNode2({
   data,
   sourcePosition,
   targetPosition
@@ -4905,8 +5049,8 @@ var Custom_default = memo22(function UserNode2({
   const isLongType = type && type.length > 10;
   const displayType = isLongType ? `${type.substring(0, 10)}...` : type;
   const portalContainer = usePortalContainer();
-  return /* @__PURE__ */ jsxs21(ContextMenu4.Root, { children: [
-    /* @__PURE__ */ jsx23(ContextMenu4.Trigger, { children: /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(ContextMenu4.Root, { children: [
+    /* @__PURE__ */ jsx24(ContextMenu4.Trigger, { children: /* @__PURE__ */ jsxs22(
       "div",
       {
         className: classNames16(
@@ -4917,7 +5061,7 @@ var Custom_default = memo22(function UserNode2({
           ...NODE_WIDTH_STYLE
         },
         children: [
-          /* @__PURE__ */ jsxs21(
+          /* @__PURE__ */ jsxs22(
             "div",
             {
               className: classNames16(
@@ -4925,9 +5069,9 @@ var Custom_default = memo22(function UserNode2({
                 `border-r-[1px] border-${color}`
               ),
               children: [
-                IconComponent && /* @__PURE__ */ jsx23(IconComponent, { className: "w-4 h-4 opacity-90 text-white mt-1" }),
-                mode === "full" && /* @__PURE__ */ jsx23(Tooltip.Provider, { children: /* @__PURE__ */ jsxs21(Tooltip.Root, { children: [
-                  /* @__PURE__ */ jsx23(Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ jsx23(
+                IconComponent && /* @__PURE__ */ jsx24(IconComponent, { className: "w-4 h-4 opacity-90 text-white mt-1" }),
+                mode === "full" && /* @__PURE__ */ jsx24(Tooltip.Provider, { children: /* @__PURE__ */ jsxs22(Tooltip.Root, { children: [
+                  /* @__PURE__ */ jsx24(Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ jsx24(
                     "span",
                     {
                       className: "text-center text-[9px] text-white font-bold uppercase mb-4",
@@ -4935,7 +5079,7 @@ var Custom_default = memo22(function UserNode2({
                       children: displayType
                     }
                   ) }),
-                  isLongType && /* @__PURE__ */ jsx23(Tooltip.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs21(
+                  isLongType && /* @__PURE__ */ jsx24(Tooltip.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs22(
                     Tooltip.Content,
                     {
                       className: "bg-slate-800 text-white rounded px-2 py-1 text-xs shadow-md z-50",
@@ -4943,7 +5087,7 @@ var Custom_default = memo22(function UserNode2({
                       sideOffset: 5,
                       children: [
                         type,
-                        /* @__PURE__ */ jsx23(Tooltip.Arrow, { className: "fill-slate-800" })
+                        /* @__PURE__ */ jsx24(Tooltip.Arrow, { className: "fill-slate-800" })
                       ]
                     }
                   ) })
@@ -4951,23 +5095,23 @@ var Custom_default = memo22(function UserNode2({
               ]
             }
           ),
-          /* @__PURE__ */ jsxs21("div", { className: "p-1 flex-1", children: [
-            targetPosition && /* @__PURE__ */ jsx23(Handle17, { type: "target", position: targetPosition }),
-            sourcePosition && /* @__PURE__ */ jsx23(Handle17, { type: "source", position: sourcePosition }),
-            (!summary || mode !== "full") && /* @__PURE__ */ jsx23("div", { className: "h-full ", children: /* @__PURE__ */ jsx23("span", { className: "text-sm font-bold block pb-0.5 w-full", children: title }) }),
-            summary && mode === "full" && /* @__PURE__ */ jsxs21("div", { children: [
-              /* @__PURE__ */ jsx23(
+          /* @__PURE__ */ jsxs22("div", { className: "p-1 flex-1", children: [
+            targetPosition && /* @__PURE__ */ jsx24(Handle17, { type: "target", position: targetPosition }),
+            sourcePosition && /* @__PURE__ */ jsx24(Handle17, { type: "source", position: sourcePosition }),
+            (!summary || mode !== "full") && /* @__PURE__ */ jsx24("div", { className: "h-full ", children: /* @__PURE__ */ jsx24("span", { className: "text-sm font-bold block pb-0.5 w-full", children: title }) }),
+            summary && mode === "full" && /* @__PURE__ */ jsxs22("div", { children: [
+              /* @__PURE__ */ jsx24(
                 "div",
                 {
                   className: classNames16(
                     mode === "full" ? `border-b border-[rgb(var(--ec-page-border))]` : ""
                   ),
-                  children: /* @__PURE__ */ jsx23("span", { className: "text-xs font-bold block pb-0.5", children: title })
+                  children: /* @__PURE__ */ jsx24("span", { className: "text-xs font-bold block pb-0.5", children: title })
                 }
               ),
-              mode === "full" && /* @__PURE__ */ jsxs21("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] ", children: [
-                /* @__PURE__ */ jsx23("div", { className: "leading-3 py-1", children: /* @__PURE__ */ jsx23("span", { className: "text-[8px] font-light", children: summary }) }),
-                properties && /* @__PURE__ */ jsx23("div", { className: "grid grid-cols-2 gap-x-4 py-1", children: Object.entries(properties).map(([key, value]) => /* @__PURE__ */ jsxs21(
+              mode === "full" && /* @__PURE__ */ jsxs22("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] ", children: [
+                /* @__PURE__ */ jsx24("div", { className: "leading-3 py-1", children: /* @__PURE__ */ jsx24("span", { className: "text-[8px] font-light", children: summary }) }),
+                properties && /* @__PURE__ */ jsx24("div", { className: "grid grid-cols-2 gap-x-4 py-1", children: Object.entries(properties).map(([key, value]) => /* @__PURE__ */ jsxs22(
                   "span",
                   {
                     className: "text-xs",
@@ -4976,7 +5120,7 @@ var Custom_default = memo22(function UserNode2({
                       key,
                       ":",
                       " ",
-                      typeof value === "string" && value.startsWith("http") ? /* @__PURE__ */ jsx23(
+                      typeof value === "string" && value.startsWith("http") ? /* @__PURE__ */ jsx24(
                         "a",
                         {
                           href: value,
@@ -4996,13 +5140,13 @@ var Custom_default = memo22(function UserNode2({
         ]
       }
     ) }),
-    menu?.length > 0 && /* @__PURE__ */ jsx23(ContextMenu4.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx23(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__ */ jsx23(
+    menu?.length > 0 && /* @__PURE__ */ jsx24(ContextMenu4.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx24(ContextMenu4.Content, { className: "min-w-[220px] bg-[rgb(var(--ec-card-bg))] rounded-md p-1 shadow-md border border-[rgb(var(--ec-page-border))]", children: menu?.map((item) => {
+      return /* @__PURE__ */ jsx24(
         ContextMenu4.Item,
         {
           asChild: true,
           className: "text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center",
-          children: /* @__PURE__ */ jsx23("a", { href: item.url, children: item.label })
+          children: /* @__PURE__ */ jsx24("a", { href: item.url, children: item.label })
         }
       );
     }) }) })
@@ -5010,12 +5154,12 @@ var Custom_default = memo22(function UserNode2({
 });
 
 // src/nodes/ExternalSystem2.tsx
-import { memo as memo23 } from "react";
+import { memo as memo24 } from "react";
 import { Handle as Handle18, Position as Position15 } from "@xyflow/react";
-import { jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
-var ExternalSystem2_default = memo23(function ExternalSystemNode(props) {
-  return /* @__PURE__ */ jsxs22("div", { className: "relative", children: [
-    /* @__PURE__ */ jsx24(
+import { jsx as jsx25, jsxs as jsxs23 } from "react/jsx-runtime";
+var ExternalSystem2_default = memo24(function ExternalSystemNode(props) {
+  return /* @__PURE__ */ jsxs23("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx25(
       Handle18,
       {
         type: "target",
@@ -5024,7 +5168,7 @@ var ExternalSystem2_default = memo23(function ExternalSystemNode(props) {
         className: "bg-gray-500"
       }
     ),
-    /* @__PURE__ */ jsx24(
+    /* @__PURE__ */ jsx25(
       Handle18,
       {
         type: "source",
@@ -5033,17 +5177,17 @@ var ExternalSystem2_default = memo23(function ExternalSystemNode(props) {
         className: "bg-gray-500"
       }
     ),
-    /* @__PURE__ */ jsx24(ExternalSystem_default, { ...props })
+    /* @__PURE__ */ jsx25(ExternalSystem_default, { ...props })
   ] });
 });
 
 // src/nodes/DataProduct.tsx
-import { memo as memo24 } from "react";
+import { memo as memo25 } from "react";
 import { Package } from "lucide-react";
 import { Handle as Handle19, Position as Position16, useNodeConnections as useNodeConnections10 } from "@xyflow/react";
-import { jsx as jsx25, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs24 } from "react/jsx-runtime";
 function GlowHandle14({ side }) {
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       style: {
@@ -5070,7 +5214,7 @@ function PostItDataProduct(props) {
   const { version, name, summary, deprecated, draft, notes, styles } = props.data.dataProduct;
   const mode = props.data.mode || "simple";
   const customIcon = isIconPath(styles?.icon) ? styles.icon : void 0;
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     "div",
     {
       className: classNames17(
@@ -5078,7 +5222,7 @@ function PostItDataProduct(props) {
         props?.selected ? "ring-2 ring-indigo-400/60 ring-offset-1" : ""
       ),
       children: [
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx26(
           Handle19,
           {
             type: "target",
@@ -5086,7 +5230,7 @@ function PostItDataProduct(props) {
             style: HIDDEN_HANDLE_STYLE
           }
         ),
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx26(
           Handle19,
           {
             type: "source",
@@ -5094,8 +5238,8 @@ function PostItDataProduct(props) {
             style: HIDDEN_HANDLE_STYLE
           }
         ),
-        notes && notes.length > 0 && /* @__PURE__ */ jsx25(NotesIndicator, { notes, resourceName: name }),
-        /* @__PURE__ */ jsxs23(
+        notes && notes.length > 0 && /* @__PURE__ */ jsx26(NotesIndicator, { notes, resourceName: name }),
+        /* @__PURE__ */ jsxs24(
           "div",
           {
             className: "absolute inset-0",
@@ -5106,8 +5250,8 @@ function PostItDataProduct(props) {
               border: deprecated ? "2px dashed rgba(239, 68, 68, 0.5)" : draft ? "2px dashed rgba(99, 102, 241, 0.5)" : "none"
             },
             children: [
-              /* @__PURE__ */ jsx25("div", { style: FOLDED_CORNER_SHADOW_STYLE }),
-              /* @__PURE__ */ jsx25(
+              /* @__PURE__ */ jsx26("div", { style: FOLDED_CORNER_SHADOW_STYLE }),
+              /* @__PURE__ */ jsx26(
                 "div",
                 {
                   style: {
@@ -5126,17 +5270,17 @@ function PostItDataProduct(props) {
             ]
           }
         ),
-        /* @__PURE__ */ jsxs23("div", { className: "relative px-3.5 py-3", children: [
-          /* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-between mb-2", children: [
-            /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsx25(Package, { className: "w-3 h-3 text-indigo-900/50", strokeWidth: 2.5 }),
-              /* @__PURE__ */ jsx25("span", { className: "text-[8px] font-bold text-indigo-900/50 uppercase tracking-widest", children: "Data Product" })
+        /* @__PURE__ */ jsxs24("div", { className: "relative px-3.5 py-3", children: [
+          /* @__PURE__ */ jsxs24("div", { className: "flex items-center justify-between mb-2", children: [
+            /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx26(Package, { className: "w-3 h-3 text-indigo-900/50", strokeWidth: 2.5 }),
+              /* @__PURE__ */ jsx26("span", { className: "text-[8px] font-bold text-indigo-900/50 uppercase tracking-widest", children: "Data Product" })
             ] }),
-            draft && /* @__PURE__ */ jsx25("span", { className: "text-[8px] font-extrabold text-amber-900 bg-amber-100 border border-dashed border-amber-400 px-1.5 py-0.5 rounded uppercase", children: "Draft" }),
-            deprecated && /* @__PURE__ */ jsx25("span", { className: "text-[7px] font-bold text-white bg-red-500 border border-red-600 px-1.5 py-0.5 rounded uppercase", children: "Deprecated" })
+            draft && /* @__PURE__ */ jsx26("span", { className: "text-[8px] font-extrabold text-amber-900 bg-amber-100 border border-dashed border-amber-400 px-1.5 py-0.5 rounded uppercase", children: "Draft" }),
+            deprecated && /* @__PURE__ */ jsx26("span", { className: "text-[7px] font-bold text-white bg-red-500 border border-red-600 px-1.5 py-0.5 rounded uppercase", children: "Deprecated" })
           ] }),
-          /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2", children: [
-            customIcon && /* @__PURE__ */ jsx25(
+          /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-2", children: [
+            customIcon && /* @__PURE__ */ jsx26(
               CustomIcon,
               {
                 src: customIcon,
@@ -5144,7 +5288,7 @@ function PostItDataProduct(props) {
                 className: mode === "full" ? "w-[26px] h-[26px] shrink-0" : "w-4 h-4 shrink-0 -my-1"
               }
             ),
-            /* @__PURE__ */ jsx25(
+            /* @__PURE__ */ jsx26(
               "div",
               {
                 className: classNames17(
@@ -5155,11 +5299,11 @@ function PostItDataProduct(props) {
               }
             )
           ] }),
-          version && /* @__PURE__ */ jsxs23("div", { className: "text-[9px] text-indigo-900/40 font-semibold mt-0.5", children: [
+          version && /* @__PURE__ */ jsxs24("div", { className: "text-[9px] text-indigo-900/40 font-semibold mt-0.5", children: [
             "v",
             version
           ] }),
-          mode === "full" && summary && /* @__PURE__ */ jsx25(
+          mode === "full" && summary && /* @__PURE__ */ jsx26(
             "div",
             {
               className: "mt-2 pt-1.5 border-t border-indigo-900/10 text-[9px] text-indigo-950/60 leading-relaxed overflow-hidden",
@@ -5181,7 +5325,7 @@ function DefaultDataProduct(props) {
   const sourceConnections = useNodeConnections10({ handleType: "source" });
   const isDark = useDarkMode();
   const deprecatedStripe = isDark ? "rgba(239,68,68,0.25)" : "rgba(239,68,68,0.1)";
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     "div",
     {
       className: classNames17(
@@ -5194,7 +5338,7 @@ function DefaultDataProduct(props) {
         boxShadow: "0 2px 12px rgba(99, 102, 241, 0.15)"
       },
       children: [
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx26(
           Handle19,
           {
             type: "target",
@@ -5202,7 +5346,7 @@ function DefaultDataProduct(props) {
             style: HIDDEN_HANDLE_STYLE
           }
         ),
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx26(
           Handle19,
           {
             type: "source",
@@ -5210,10 +5354,10 @@ function DefaultDataProduct(props) {
             style: HIDDEN_HANDLE_STYLE
           }
         ),
-        notes && notes.length > 0 && /* @__PURE__ */ jsx25(NotesIndicator, { notes, resourceName: name }),
-        targetConnections.length > 0 && /* @__PURE__ */ jsx25(GlowHandle14, { side: "left" }),
-        sourceConnections.length > 0 && /* @__PURE__ */ jsx25(GlowHandle14, { side: "right" }),
-        /* @__PURE__ */ jsx25("div", { className: "absolute -top-2.5 left-2.5 flex items-center gap-1.5 z-10", children: /* @__PURE__ */ jsxs23(
+        notes && notes.length > 0 && /* @__PURE__ */ jsx26(NotesIndicator, { notes, resourceName: name }),
+        targetConnections.length > 0 && /* @__PURE__ */ jsx26(GlowHandle14, { side: "left" }),
+        sourceConnections.length > 0 && /* @__PURE__ */ jsx26(GlowHandle14, { side: "right" }),
+        /* @__PURE__ */ jsx26("div", { className: "absolute -top-2.5 left-2.5 flex items-center gap-1.5 z-10", children: /* @__PURE__ */ jsxs24(
           "span",
           {
             className: classNames17(
@@ -5221,16 +5365,16 @@ function DefaultDataProduct(props) {
               deprecated ? "bg-red-500" : "bg-indigo-500"
             ),
             children: [
-              /* @__PURE__ */ jsx25(Package, { className: "w-2.5 h-2.5", strokeWidth: 2.5 }),
+              /* @__PURE__ */ jsx26(Package, { className: "w-2.5 h-2.5", strokeWidth: 2.5 }),
               "Data Product",
               draft && " (Draft)",
               deprecated && " (Deprecated)"
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxs23("div", { className: "px-3 pt-3.5 pb-2.5", children: [
-          /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2", children: [
-            customIcon && /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsxs24("div", { className: "px-3 pt-3.5 pb-2.5", children: [
+          /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-2", children: [
+            customIcon && /* @__PURE__ */ jsx26(
               CustomIcon,
               {
                 src: customIcon,
@@ -5238,16 +5382,16 @@ function DefaultDataProduct(props) {
                 className: mode === "full" ? "w-[26px] h-[26px] shrink-0" : "w-4 h-4 shrink-0 -my-1"
               }
             ),
-            /* @__PURE__ */ jsxs23("div", { className: "flex items-baseline gap-1 min-w-0", children: [
-              /* @__PURE__ */ jsx25("span", { className: "text-[13px] font-semibold leading-snug text-[rgb(var(--ec-page-text))] truncate", children: name }),
-              version && /* @__PURE__ */ jsxs23("span", { className: "text-[10px] font-normal text-[rgb(var(--ec-page-text-muted))] shrink-0", children: [
+            /* @__PURE__ */ jsxs24("div", { className: "flex items-baseline gap-1 min-w-0", children: [
+              /* @__PURE__ */ jsx26("span", { className: "text-[13px] font-semibold leading-snug text-[rgb(var(--ec-page-text))] truncate", children: name }),
+              version && /* @__PURE__ */ jsxs24("span", { className: "text-[10px] font-normal text-[rgb(var(--ec-page-text-muted))] shrink-0", children: [
                 "(v",
                 version,
                 ")"
               ] })
             ] })
           ] }),
-          mode === "full" && summary && /* @__PURE__ */ jsx25(
+          mode === "full" && summary && /* @__PURE__ */ jsx26(
             "div",
             {
               className: "mt-1.5 text-[9px] text-[rgb(var(--ec-page-text-muted))] leading-relaxed overflow-hidden",
@@ -5261,19 +5405,19 @@ function DefaultDataProduct(props) {
     }
   );
 }
-var DataProduct_default = memo24(function DataProductNode(props) {
+var DataProduct_default = memo25(function DataProductNode(props) {
   const nodeStyle = props?.data?.style;
   if (nodeStyle === "post-it") {
-    return /* @__PURE__ */ jsx25(PostItDataProduct, { ...props });
+    return /* @__PURE__ */ jsx26(PostItDataProduct, { ...props });
   }
-  return /* @__PURE__ */ jsx25(DefaultDataProduct, { ...props });
+  return /* @__PURE__ */ jsx26(DefaultDataProduct, { ...props });
 });
 
 // src/nodes/message-group/MessageGroupNode.tsx
-import { memo as memo25, useMemo as useMemo11 } from "react";
-import { Layers, Zap as Zap3, Terminal, HelpCircle, Maximize2 } from "lucide-react";
+import { memo as memo26, useMemo as useMemo11 } from "react";
+import { Layers, Zap as Zap3, Terminal, HelpCircle, Maximize2 as Maximize22 } from "lucide-react";
 import { Handle as Handle20, Position as Position17, useNodeConnections as useNodeConnections11 } from "@xyflow/react";
-import { jsx as jsx26, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs25 } from "react/jsx-runtime";
 var TYPE_ICONS = {
   events: Zap3,
   commands: Terminal,
@@ -5285,7 +5429,7 @@ var CARD_STYLE = {
   background: "var(--ec-message-group-node-bg, rgb(var(--ec-card-bg)))",
   pointerEvents: "none"
 };
-var MessageGroupNode_default = memo25(function MessageGroupNode(props) {
+var MessageGroupNode_default = memo26(function MessageGroupNode(props) {
   const { groupName, messageCount } = props.data;
   const isDark = useDarkMode();
   const targetConnections = useNodeConnections11({ handleType: "target" });
@@ -5299,8 +5443,8 @@ var MessageGroupNode_default = memo25(function MessageGroupNode(props) {
     });
     return counts;
   }, [props.data.messages]);
-  return /* @__PURE__ */ jsxs24("div", { className: "relative", style: { isolation: "isolate" }, children: [
-    stackDepth >= 3 && /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsxs25("div", { className: "relative", style: { isolation: "isolate" }, children: [
+    stackDepth >= 3 && /* @__PURE__ */ jsx27(
       "div",
       {
         style: {
@@ -5312,7 +5456,7 @@ var MessageGroupNode_default = memo25(function MessageGroupNode(props) {
         }
       }
     ),
-    stackDepth >= 2 && /* @__PURE__ */ jsx26(
+    stackDepth >= 2 && /* @__PURE__ */ jsx27(
       "div",
       {
         style: {
@@ -5324,7 +5468,7 @@ var MessageGroupNode_default = memo25(function MessageGroupNode(props) {
         }
       }
     ),
-    /* @__PURE__ */ jsxs24(
+    /* @__PURE__ */ jsxs25(
       "div",
       {
         className: `relative min-w-48 max-w-60 rounded-xl border-2 overflow-visible ${props.selected ? "ring-2 ring-violet-400/60 ring-offset-2" : ""} border-violet-500`,
@@ -5333,7 +5477,7 @@ var MessageGroupNode_default = memo25(function MessageGroupNode(props) {
           boxShadow: "0 2px 12px rgba(139, 92, 246, 0.15)"
         },
         children: [
-          /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsx27(
             Handle20,
             {
               type: "target",
@@ -5341,7 +5485,7 @@ var MessageGroupNode_default = memo25(function MessageGroupNode(props) {
               style: HIDDEN_HANDLE_STYLE
             }
           ),
-          /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsx27(
             Handle20,
             {
               type: "source",
@@ -5349,7 +5493,7 @@ var MessageGroupNode_default = memo25(function MessageGroupNode(props) {
               style: HIDDEN_HANDLE_STYLE
             }
           ),
-          targetConnections.length > 0 && /* @__PURE__ */ jsx26(
+          targetConnections.length > 0 && /* @__PURE__ */ jsx27(
             "div",
             {
               style: {
@@ -5368,7 +5512,7 @@ var MessageGroupNode_default = memo25(function MessageGroupNode(props) {
               }
             }
           ),
-          sourceConnections.length > 0 && /* @__PURE__ */ jsx26(
+          sourceConnections.length > 0 && /* @__PURE__ */ jsx27(
             "div",
             {
               style: {
@@ -5387,14 +5531,14 @@ var MessageGroupNode_default = memo25(function MessageGroupNode(props) {
               }
             }
           ),
-          /* @__PURE__ */ jsx26("div", { className: "absolute -top-2.5 left-2.5 z-10", children: /* @__PURE__ */ jsxs24("span", { className: "inline-flex items-center gap-1 text-[7px] font-bold uppercase tracking-widest text-white px-1.5 py-0.5 rounded shadow-sm bg-violet-600", children: [
-            /* @__PURE__ */ jsx26(Layers, { className: "w-2.5 h-2.5", strokeWidth: 2.5 }),
+          /* @__PURE__ */ jsx27("div", { className: "absolute -top-2.5 left-2.5 z-10", children: /* @__PURE__ */ jsxs25("span", { className: "inline-flex items-center gap-1 text-[7px] font-bold uppercase tracking-widest text-white px-1.5 py-0.5 rounded shadow-sm bg-violet-600", children: [
+            /* @__PURE__ */ jsx27(Layers, { className: "w-2.5 h-2.5", strokeWidth: 2.5 }),
             "Group"
           ] }) }),
-          /* @__PURE__ */ jsxs24("div", { className: "px-3 pt-3.5 pb-2.5", children: [
-            /* @__PURE__ */ jsx26("div", { className: "text-[13px] font-semibold leading-snug text-[rgb(var(--ec-page-text))]", children: groupName }),
-            /* @__PURE__ */ jsxs24("div", { className: "mt-1.5 flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxs24(
+          /* @__PURE__ */ jsxs25("div", { className: "px-3 pt-3.5 pb-2.5", children: [
+            /* @__PURE__ */ jsx27("div", { className: "text-[13px] font-semibold leading-snug text-[rgb(var(--ec-page-text))]", children: groupName }),
+            /* @__PURE__ */ jsxs25("div", { className: "mt-1.5 flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxs25(
                 "span",
                 {
                   className: "text-[10px] font-medium px-1.5 py-0.5 rounded",
@@ -5409,14 +5553,14 @@ var MessageGroupNode_default = memo25(function MessageGroupNode(props) {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx26("div", { className: "flex items-center gap-1", children: Object.entries(typeBreakdown).map(([type, count]) => {
+              /* @__PURE__ */ jsx27("div", { className: "flex items-center gap-1", children: Object.entries(typeBreakdown).map(([type, count]) => {
                 const Icon = TYPE_ICONS[type] || HelpCircle;
-                return /* @__PURE__ */ jsxs24(
+                return /* @__PURE__ */ jsxs25(
                   "span",
                   {
                     className: "flex items-center gap-0.5 text-[9px] text-[rgb(var(--ec-page-text-muted))]",
                     children: [
-                      /* @__PURE__ */ jsx26(Icon, { className: "w-2.5 h-2.5", strokeWidth: 2 }),
+                      /* @__PURE__ */ jsx27(Icon, { className: "w-2.5 h-2.5", strokeWidth: 2 }),
                       count
                     ]
                   },
@@ -5424,8 +5568,8 @@ var MessageGroupNode_default = memo25(function MessageGroupNode(props) {
                 );
               }) })
             ] }),
-            /* @__PURE__ */ jsxs24("div", { className: "mt-1.5 flex items-center gap-1 text-[8px] text-[rgb(var(--ec-page-text-muted))]", children: [
-              /* @__PURE__ */ jsx26(Maximize2, { className: "w-2.5 h-2.5" }),
+            /* @__PURE__ */ jsxs25("div", { className: "mt-1.5 flex items-center gap-1 text-[8px] text-[rgb(var(--ec-page-text-muted))]", children: [
+              /* @__PURE__ */ jsx27(Maximize22, { className: "w-2.5 h-2.5" }),
               "Click to explore"
             ] })
           ] })
@@ -5436,10 +5580,10 @@ var MessageGroupNode_default = memo25(function MessageGroupNode(props) {
 });
 
 // src/nodes/message-group/MessageGroupExpandedNode.tsx
-import { memo as memo26 } from "react";
-import { Layers as Layers2, Minimize2 } from "lucide-react";
-import { jsx as jsx27, jsxs as jsxs25 } from "react/jsx-runtime";
-var CONTAINER_STYLE = {
+import { memo as memo27 } from "react";
+import { Layers as Layers2, Minimize2 as Minimize22 } from "lucide-react";
+import { jsx as jsx28, jsxs as jsxs26 } from "react/jsx-runtime";
+var CONTAINER_STYLE2 = {
   width: "100%",
   height: "100%",
   borderRadius: 12,
@@ -5448,7 +5592,7 @@ var CONTAINER_STYLE = {
   position: "relative",
   overflow: "visible"
 };
-var HEADER_STYLE = {
+var HEADER_STYLE2 = {
   position: "absolute",
   top: 0,
   left: 0,
@@ -5460,7 +5604,7 @@ var HEADER_STYLE = {
   borderBottom: "1px solid rgba(139, 92, 246, 0.3)",
   overflow: "visible"
 };
-var BADGE_STYLE = {
+var BADGE_STYLE2 = {
   position: "absolute",
   top: -10,
   left: 12,
@@ -5478,7 +5622,7 @@ var BADGE_STYLE = {
   textTransform: "uppercase",
   color: "white"
 };
-var HEADER_CONTENT_STYLE = {
+var HEADER_CONTENT_STYLE2 = {
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
@@ -5493,7 +5637,7 @@ var GROUP_NAME_STYLE = {
   textTransform: "uppercase",
   whiteSpace: "nowrap"
 };
-var COLLAPSE_BUTTON_STYLE = {
+var COLLAPSE_BUTTON_STYLE2 = {
   background: "#7c3aed",
   border: "1px solid #a78bfa",
   borderRadius: 6,
@@ -5506,25 +5650,25 @@ var COLLAPSE_BUTTON_STYLE = {
   fontWeight: 600,
   color: "white"
 };
-var MessageGroupExpandedNode_default = memo26(function MessageGroupExpandedNode({
+var MessageGroupExpandedNode_default = memo27(function MessageGroupExpandedNode({
   data
 }) {
   const { groupName, messageCount } = data;
-  return /* @__PURE__ */ jsx27("div", { style: CONTAINER_STYLE, children: /* @__PURE__ */ jsxs25("div", { style: HEADER_STYLE, children: [
-    /* @__PURE__ */ jsxs25("div", { style: BADGE_STYLE, children: [
-      /* @__PURE__ */ jsx27(Layers2, { size: 10, strokeWidth: 2.5 }),
+  return /* @__PURE__ */ jsx28("div", { style: CONTAINER_STYLE2, children: /* @__PURE__ */ jsxs26("div", { style: HEADER_STYLE2, children: [
+    /* @__PURE__ */ jsxs26("div", { style: BADGE_STYLE2, children: [
+      /* @__PURE__ */ jsx28(Layers2, { size: 10, strokeWidth: 2.5 }),
       "Group"
     ] }),
-    /* @__PURE__ */ jsxs25("div", { style: HEADER_CONTENT_STYLE, children: [
-      /* @__PURE__ */ jsx27("div", { style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx27("span", { style: GROUP_NAME_STYLE, children: groupName || "Group" }) }),
-      /* @__PURE__ */ jsxs25(
+    /* @__PURE__ */ jsxs26("div", { style: HEADER_CONTENT_STYLE2, children: [
+      /* @__PURE__ */ jsx28("div", { style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx28("span", { style: GROUP_NAME_STYLE, children: groupName || "Group" }) }),
+      /* @__PURE__ */ jsxs26(
         "button",
         {
-          style: COLLAPSE_BUTTON_STYLE,
+          style: COLLAPSE_BUTTON_STYLE2,
           className: "ec-collapse-group-btn nodrag nopan",
           onMouseDown: (e) => e.stopPropagation(),
           children: [
-            /* @__PURE__ */ jsx27(Minimize2, { size: 12, strokeWidth: 2.5 }),
+            /* @__PURE__ */ jsx28(Minimize22, { size: 12, strokeWidth: 2.5 }),
             "Collapse"
           ]
         }
@@ -5534,9 +5678,9 @@ var MessageGroupExpandedNode_default = memo26(function MessageGroupExpandedNode(
 });
 
 // src/edges/AnimatedMessageEdge.tsx
-import { memo as memo27, useMemo as useMemo12 } from "react";
+import { memo as memo28, useMemo as useMemo12 } from "react";
 import { BaseEdge, getSmoothStepPath } from "@xyflow/react";
-import { Fragment as Fragment3, jsx as jsx28, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx29, jsxs as jsxs27 } from "react/jsx-runtime";
 function messageColor(collection) {
   switch (collection) {
     case "events":
@@ -5551,7 +5695,7 @@ function messageColor(collection) {
 }
 var TSPAN_NORMAL_STYLE = { fontStyle: "normal" };
 var TSPAN_ITALIC_STYLE = { fontStyle: "italic" };
-var AnimatedMessageEdge = memo27(
+var AnimatedMessageEdge = memo28(
   ({
     id,
     sourceX,
@@ -5583,12 +5727,12 @@ var AnimatedMessageEdge = memo27(
     const animatedNodes = useMemo12(
       () => customColors.map((color, index) => {
         const delay = randomDelay + index * 0.3;
-        return /* @__PURE__ */ jsx28(
+        return /* @__PURE__ */ jsx29(
           "g",
           {
             className: `ec-animated-msg ${opacityClass}`,
-            children: /* @__PURE__ */ jsxs26("g", { children: [
-              /* @__PURE__ */ jsx28(
+            children: /* @__PURE__ */ jsxs27("g", { children: [
+              /* @__PURE__ */ jsx29(
                 "rect",
                 {
                   x: "-7",
@@ -5600,7 +5744,7 @@ var AnimatedMessageEdge = memo27(
                   fill: color
                 }
               ),
-              /* @__PURE__ */ jsx28(
+              /* @__PURE__ */ jsx29(
                 "path",
                 {
                   d: "M-7,-5 L0,1 L7,-5",
@@ -5610,7 +5754,7 @@ var AnimatedMessageEdge = memo27(
                   strokeLinejoin: "round"
                 }
               ),
-              /* @__PURE__ */ jsx28(
+              /* @__PURE__ */ jsx29(
                 "animateMotion",
                 {
                   dur: "2s",
@@ -5618,7 +5762,7 @@ var AnimatedMessageEdge = memo27(
                   path: edgePath,
                   rotate: "auto",
                   begin: `${delay}s`,
-                  children: /* @__PURE__ */ jsx28("mpath", { href: `#${id}` })
+                  children: /* @__PURE__ */ jsx29("mpath", { href: `#${id}` })
                 }
               )
             ] })
@@ -5640,8 +5784,8 @@ var AnimatedMessageEdge = memo27(
     );
     const labelWidth = Math.max(longestLine.length * 6.5 + 16, 50);
     const firstLineDy = `${-((lines.length - 1) * 1.2) / 2}em`;
-    return /* @__PURE__ */ jsxs26(Fragment3, { children: [
-      /* @__PURE__ */ jsx28(
+    return /* @__PURE__ */ jsxs27(Fragment4, { children: [
+      /* @__PURE__ */ jsx29(
         BaseEdge,
         {
           id,
@@ -5652,8 +5796,8 @@ var AnimatedMessageEdge = memo27(
         }
       ),
       animatedNodes,
-      /* @__PURE__ */ jsxs26("g", { children: [
-        label && /* @__PURE__ */ jsx28(
+      /* @__PURE__ */ jsxs27("g", { children: [
+        label && /* @__PURE__ */ jsx29(
           "rect",
           {
             x: labelX - labelWidth / 2,
@@ -5668,7 +5812,7 @@ var AnimatedMessageEdge = memo27(
             ry: 5
           }
         ),
-        /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx29(
           "text",
           {
             x: labelX,
@@ -5679,7 +5823,7 @@ var AnimatedMessageEdge = memo27(
             fontWeight: 500,
             fill: "rgb(var(--ec-page-text))",
             pointerEvents: "none",
-            children: lines.map((line, i) => /* @__PURE__ */ jsx28(
+            children: lines.map((line, i) => /* @__PURE__ */ jsx29(
               "tspan",
               {
                 x: labelX,
@@ -5698,12 +5842,12 @@ var AnimatedMessageEdge = memo27(
 var AnimatedMessageEdge_default = AnimatedMessageEdge;
 
 // src/edges/MultilineEdgeLabel.tsx
-import { memo as memo28, useMemo as useMemo13 } from "react";
+import { memo as memo29, useMemo as useMemo13 } from "react";
 import { getSmoothStepPath as getSmoothStepPath2 } from "@xyflow/react";
-import { Fragment as Fragment4, jsx as jsx29, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx30, jsxs as jsxs28 } from "react/jsx-runtime";
 var TSPAN_NORMAL_STYLE2 = { fontStyle: "normal" };
 var TSPAN_ITALIC_STYLE2 = { fontStyle: "italic" };
-var MultilineEdgeLabel_default = memo28(function MultilineEdgeLabel(props) {
+var MultilineEdgeLabel_default = memo29(function MultilineEdgeLabel(props) {
   const {
     id,
     sourceX,
@@ -5738,8 +5882,8 @@ var MultilineEdgeLabel_default = memo28(function MultilineEdgeLabel(props) {
   );
   const labelWidth = Math.max(longestLine.length * 5.5 + 14, 44);
   const labelHeight = lines.length * 12 + 4;
-  return /* @__PURE__ */ jsxs27(Fragment4, { children: [
-    /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsxs28(Fragment5, { children: [
+    /* @__PURE__ */ jsx30(
       "path",
       {
         id,
@@ -5750,7 +5894,7 @@ var MultilineEdgeLabel_default = memo28(function MultilineEdgeLabel(props) {
         style
       }
     ),
-    label && /* @__PURE__ */ jsx29(
+    label && /* @__PURE__ */ jsx30(
       "rect",
       {
         x: labelX - labelWidth / 2,
@@ -5766,7 +5910,7 @@ var MultilineEdgeLabel_default = memo28(function MultilineEdgeLabel(props) {
         pointerEvents: "none"
       }
     ),
-    /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx30(
       "text",
       {
         x: labelX,
@@ -5776,7 +5920,7 @@ var MultilineEdgeLabel_default = memo28(function MultilineEdgeLabel(props) {
         fontSize: "10px",
         fill: "rgb(var(--ec-page-text))",
         pointerEvents: "none",
-        children: lines.map((line, i) => /* @__PURE__ */ jsx29(
+        children: lines.map((line, i) => /* @__PURE__ */ jsx30(
           "tspan",
           {
             x: labelX,
@@ -5792,13 +5936,13 @@ var MultilineEdgeLabel_default = memo28(function MultilineEdgeLabel(props) {
 });
 
 // src/edges/FlowEdge.tsx
-import { memo as memo29, useMemo as useMemo14 } from "react";
+import { memo as memo30, useMemo as useMemo14 } from "react";
 import {
   BaseEdge as BaseEdge2,
   EdgeLabelRenderer,
   getSmoothStepPath as getSmoothStepPath3
 } from "@xyflow/react";
-import { Fragment as Fragment5, jsx as jsx30, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx31, jsxs as jsxs29 } from "react/jsx-runtime";
 function messageColor2(collection) {
   switch (collection) {
     case "events":
@@ -5812,7 +5956,7 @@ function messageColor2(collection) {
   }
 }
 var EMPTY_STYLE = {};
-var FlowEdge_default = memo29(function CustomEdge({
+var FlowEdge_default = memo30(function CustomEdge({
   id,
   sourceX,
   sourceY,
@@ -5850,20 +5994,20 @@ var FlowEdge_default = memo29(function CustomEdge({
     }),
     [labelX, labelY, labelStyle]
   );
-  return /* @__PURE__ */ jsxs28(Fragment5, { children: [
-    /* @__PURE__ */ jsx30(BaseEdge2, { path: edgePath, markerEnd, style: mergedStyle }),
-    data?.animated && /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsxs29(Fragment6, { children: [
+    /* @__PURE__ */ jsx31(BaseEdge2, { path: edgePath, markerEnd, style: mergedStyle }),
+    data?.animated && /* @__PURE__ */ jsx31(
       "g",
       {
         className: `ec-animated-msg z-30 ${opacity === 1 ? "opacity-100" : "opacity-10"}`,
-        children: /* @__PURE__ */ jsx30(
+        children: /* @__PURE__ */ jsx31(
           "circle",
           {
             cx: "0",
             cy: "0",
             r: "7",
             fill: messageColor2(collection || "default"),
-            children: /* @__PURE__ */ jsx30(
+            children: /* @__PURE__ */ jsx31(
               "animateMotion",
               {
                 dur: "2s",
@@ -5871,14 +6015,14 @@ var FlowEdge_default = memo29(function CustomEdge({
                 path: edgePath,
                 rotate: "auto",
                 begin: `${randomDelay}s`,
-                children: /* @__PURE__ */ jsx30("mpath", { href: `#${id}` })
+                children: /* @__PURE__ */ jsx31("mpath", { href: `#${id}` })
               }
             )
           }
         )
       }
     ),
-    label && /* @__PURE__ */ jsx30(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx30(
+    label && /* @__PURE__ */ jsx31(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx31(
       "div",
       {
         style: labelPositionStyle,
@@ -5897,10 +6041,10 @@ import {
   useEffect as useEffect2,
   forwardRef,
   useImperativeHandle,
-  memo as memo30
+  memo as memo31
 } from "react";
-import { jsx as jsx31, jsxs as jsxs29 } from "react/jsx-runtime";
-var VisualiserSearch = memo30(
+import { jsx as jsx32, jsxs as jsxs30 } from "react/jsx-runtime";
+var VisualiserSearch = memo31(
   forwardRef(
     ({ nodes, onNodeSelect, onClear, onPaneClick: _onPaneClick }, ref) => {
       const [searchQuery, setSearchQuery] = useState5("");
@@ -6045,9 +6189,9 @@ var VisualiserSearch = memo30(
           document.removeEventListener("mousedown", handleClickOutside);
         };
       }, []);
-      return /* @__PURE__ */ jsxs29("div", { ref: containerRef, className: "w-full max-w-md mx-auto relative", children: [
-        /* @__PURE__ */ jsxs29("div", { className: "relative", children: [
-          /* @__PURE__ */ jsx31(
+      return /* @__PURE__ */ jsxs30("div", { ref: containerRef, className: "w-full max-w-md mx-auto relative", children: [
+        /* @__PURE__ */ jsxs30("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx32(
             "input",
             {
               ref: searchInputRef,
@@ -6060,20 +6204,20 @@ var VisualiserSearch = memo30(
               className: "w-full px-4 py-2 pr-10 bg-[rgb(var(--ec-input-bg))] border border-[rgb(var(--ec-input-border))] text-[rgb(var(--ec-input-text))] placeholder:text-[rgb(var(--ec-page-text-muted))] rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:border-transparent"
             }
           ),
-          searchQuery && /* @__PURE__ */ jsx31(
+          searchQuery && /* @__PURE__ */ jsx32(
             "button",
             {
               onClick: clearSearch,
               className: "absolute right-2 top-1/2 transform -translate-y-1/2 text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))]",
               "aria-label": "Clear search",
-              children: /* @__PURE__ */ jsx31(
+              children: /* @__PURE__ */ jsx32(
                 "svg",
                 {
                   className: "w-5 h-5",
                   fill: "none",
                   stroke: "currentColor",
                   viewBox: "0 0 24 24",
-                  children: /* @__PURE__ */ jsx31(
+                  children: /* @__PURE__ */ jsx32(
                     "path",
                     {
                       strokeLinecap: "round",
@@ -6087,17 +6231,17 @@ var VisualiserSearch = memo30(
             }
           )
         ] }),
-        showSuggestions && filteredSuggestions.length > 0 && /* @__PURE__ */ jsx31("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) => {
+        showSuggestions && filteredSuggestions.length > 0 && /* @__PURE__ */ jsx32("div", { className: "absolute top-full left-0 right-0 mt-1 bg-[rgb(var(--ec-card-bg))] border border-[rgb(var(--ec-page-border))] rounded-md shadow-lg z-50 max-h-60 overflow-y-auto", children: filteredSuggestions.map((node, index) => {
           const nodeName = getNodeDisplayName(node);
           const nodeType = node.type || "unknown";
-          return /* @__PURE__ */ jsxs29(
+          return /* @__PURE__ */ jsxs30(
             "div",
             {
               onClick: () => handleSuggestionClick(node),
               className: `px-4 py-2 cursor-pointer flex items-center justify-between hover:bg-[rgb(var(--ec-page-border)/0.5)] ${index === selectedSuggestionIndex ? "bg-[rgb(var(--ec-accent-subtle))]" : ""}`,
               children: [
-                /* @__PURE__ */ jsx31("span", { className: "text-sm font-medium text-[rgb(var(--ec-page-text))]", children: nodeName }),
-                /* @__PURE__ */ jsx31(
+                /* @__PURE__ */ jsx32("span", { className: "text-sm font-medium text-[rgb(var(--ec-page-text))]", children: nodeName }),
+                /* @__PURE__ */ jsx32(
                   "span",
                   {
                     className: `text-xs capitalize px-2 py-1 rounded ${getNodeTypeColorClass(nodeType)}`,
@@ -6123,11 +6267,11 @@ import {
   useCallback as useCallback5,
   useMemo as useMemo15,
   useRef as useRef3,
-  memo as memo31
+  memo as memo32
 } from "react";
 import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
-import { Fragment as Fragment6, jsx as jsx32, jsxs as jsxs30 } from "react/jsx-runtime";
-var StepWalkthrough_default = memo31(function StepWalkthrough({
+import { Fragment as Fragment7, jsx as jsx33, jsxs as jsxs31 } from "react/jsx-runtime";
+var StepWalkthrough_default = memo32(function StepWalkthrough({
   nodes,
   edges,
   isFlowVisualization,
@@ -6167,7 +6311,8 @@ var StepWalkthrough_default = memo31(function StepWalkthrough({
       const startNodes = nodes.filter(
         (node) => incomingEdgeMap.get(node.id) === 0
       );
-      if (startNodes.length > 0 && !startNodeId) {
+      const cachedStartStillValid = startNodeId && nodes.some((n) => n.id === startNodeId);
+      if (startNodes.length > 0 && !cachedStartStillValid) {
         const firstStartNode = startNodes[0];
         setStartNodeId(firstStartNode.id);
       }
@@ -6175,6 +6320,16 @@ var StepWalkthrough_default = memo31(function StepWalkthrough({
   }, [nodeIdsKey, edgeKey, isFlowVisualization, startNodeId]);
   useEffect3(() => {
     if (currentNodeId) {
+      const currentExists = nodes.some(
+        (n) => n.id === currentNodeId
+      );
+      if (!currentExists) {
+        setCurrentNodeId(null);
+        setCurrentStepIndex(-1);
+        setPathHistory([]);
+        setAvailablePaths([]);
+        return;
+      }
       const outgoingEdges = edges.filter(
         (edge) => edge.source === currentNodeId
       );
@@ -6286,14 +6441,14 @@ var StepWalkthrough_default = memo31(function StepWalkthrough({
     }
     return { title: title2, description: description2 };
   }, [currentStepIndex, currentNodeId, nodeIdsKey]);
-  return /* @__PURE__ */ jsxs30("div", { className: "ml-12 bg-[rgb(var(--ec-card-bg))] rounded-lg shadow-sm px-4 py-2 z-30 border border-[rgb(var(--ec-page-border))] w-[350px]", children: [
-    /* @__PURE__ */ jsxs30("div", { className: "mb-2", children: [
-      /* @__PURE__ */ jsx32("h3", { className: "text-sm font-semibold text-[rgb(var(--ec-page-text))]", children: title }),
-      description && /* @__PURE__ */ jsx32("p", { className: "text-xs text-[rgb(var(--ec-page-text-muted))] mt-1", children: description })
+  return /* @__PURE__ */ jsxs31("div", { className: "ml-12 bg-[rgb(var(--ec-card-bg))] rounded-lg shadow-sm px-4 py-2 z-30 border border-[rgb(var(--ec-page-border))] w-[350px]", children: [
+    /* @__PURE__ */ jsxs31("div", { className: "mb-2", children: [
+      /* @__PURE__ */ jsx33("h3", { className: "text-sm font-semibold text-[rgb(var(--ec-page-text))]", children: title }),
+      description && /* @__PURE__ */ jsx33("p", { className: "text-xs text-[rgb(var(--ec-page-text-muted))] mt-1", children: description })
     ] }),
-    currentNodeId && availablePaths.length > 1 && /* @__PURE__ */ jsxs30("div", { className: "mb-3", children: [
-      /* @__PURE__ */ jsx32("label", { className: "block text-xs font-medium text-[rgb(var(--ec-page-text-muted))] mb-2", children: "Choose next path:" }),
-      /* @__PURE__ */ jsx32(
+    currentNodeId && availablePaths.length > 1 && /* @__PURE__ */ jsxs31("div", { className: "mb-3", children: [
+      /* @__PURE__ */ jsx33("label", { className: "block text-xs font-medium text-[rgb(var(--ec-page-text-muted))] mb-2", children: "Choose next path:" }),
+      /* @__PURE__ */ jsx33(
         "select",
         {
           value: selectedPathIndex,
@@ -6301,16 +6456,16 @@ var StepWalkthrough_default = memo31(function StepWalkthrough({
           className: "w-full px-3 py-2 text-xs border border-[rgb(var(--ec-input-border))] rounded-md bg-[rgb(var(--ec-input-bg))] text-[rgb(var(--ec-input-text))] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:border-[rgb(var(--ec-accent))]",
           children: availablePaths.map((path, index) => {
             const nodeLabel = path.targetNode.data.step?.title || path.targetNode.data.service?.name || path.targetNode.data.message?.name || path.targetNode.data.flow?.data?.name || path.targetNode.data.custom?.title || path.targetNode.data.custom?.label || path.targetNode.data.externalSystem?.label || path.targetNode.data.label || "Unknown";
-            return /* @__PURE__ */ jsx32("option", { value: index, children: path.label ? `${path.label}: ${nodeLabel}` : nodeLabel }, path.targetId);
+            return /* @__PURE__ */ jsx33("option", { value: index, children: path.label ? `${path.label}: ${nodeLabel}` : nodeLabel }, path.targetId);
           })
         }
       )
     ] }),
-    /* @__PURE__ */ jsx32("div", { className: "flex items-center justify-between", children: currentStepIndex === -1 ? (
+    /* @__PURE__ */ jsx33("div", { className: "flex items-center justify-between", children: currentStepIndex === -1 ? (
       // Initial state - show only Start button on the right
-      /* @__PURE__ */ jsxs30(Fragment6, { children: [
-        /* @__PURE__ */ jsx32("div", { className: "flex-1" }),
-        /* @__PURE__ */ jsx32(
+      /* @__PURE__ */ jsxs31(Fragment7, { children: [
+        /* @__PURE__ */ jsx33("div", { className: "flex-1" }),
+        /* @__PURE__ */ jsx33(
           "button",
           {
             onClick: handleNextStep,
@@ -6321,29 +6476,29 @@ var StepWalkthrough_default = memo31(function StepWalkthrough({
       ] })
     ) : (
       // In walkthrough - show Previous on left, Next on right (only if paths available)
-      /* @__PURE__ */ jsxs30(Fragment6, { children: [
-        /* @__PURE__ */ jsxs30(
+      /* @__PURE__ */ jsxs31(Fragment7, { children: [
+        /* @__PURE__ */ jsxs31(
           "button",
           {
             onClick: handlePreviousStep,
             className: "flex items-center justify-center px-4 py-2 text-xs font-medium bg-[rgb(var(--ec-accent))] text-white rounded-md hover:bg-[rgb(var(--ec-accent-hover))] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:ring-offset-2 transition-colors",
             children: [
-              /* @__PURE__ */ jsx32(ChevronLeftIcon, { className: "w-4 h-4 mr-1" }),
+              /* @__PURE__ */ jsx33(ChevronLeftIcon, { className: "w-4 h-4 mr-1" }),
               "Previous"
             ]
           }
         ),
-        availablePaths.length > 0 ? /* @__PURE__ */ jsxs30(
+        availablePaths.length > 0 ? /* @__PURE__ */ jsxs31(
           "button",
           {
             onClick: handleNextStep,
             className: "flex items-center justify-center px-4 py-2 text-xs font-medium bg-[rgb(var(--ec-accent))] text-white rounded-md hover:bg-[rgb(var(--ec-accent-hover))] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:ring-offset-2 transition-colors",
             children: [
               "Next",
-              /* @__PURE__ */ jsx32(ChevronRightIcon, { className: "w-4 h-4 ml-1" })
+              /* @__PURE__ */ jsx33(ChevronRightIcon, { className: "w-4 h-4 ml-1" })
             ]
           }
-        ) : /* @__PURE__ */ jsx32(
+        ) : /* @__PURE__ */ jsx33(
           "button",
           {
             onClick: handleFinish,
@@ -6423,7 +6578,7 @@ var exportNodeGraphForStudio = (data) => {
 };
 
 // src/components/StudioModal.tsx
-import { Fragment as Fragment7, jsx as jsx33, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx34, jsxs as jsxs32 } from "react/jsx-runtime";
 var StudioModal = ({ isOpen, onClose }) => {
   const [copySuccess, setCopySuccess] = useState7(false);
   const portalContainer = usePortalContainer();
@@ -6454,14 +6609,14 @@ var StudioModal = ({ isOpen, onClose }) => {
     );
     onClose();
   };
-  return /* @__PURE__ */ jsx33(Dialog2.Root, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsxs31(Dialog2.Portal, { container: portalContainer, children: [
-    /* @__PURE__ */ jsx33(Dialog2.Overlay, { className: "fixed inset-0 bg-black/50 data-[state=open]:animate-overlayShow z-50" }),
-    /* @__PURE__ */ jsxs31(Dialog2.Content, { className: "fixed top-1/2 left-1/2 w-[90vw] max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg bg-white p-6 shadow-xl focus:outline-none data-[state=open]:animate-contentShow z-[100]", children: [
-      /* @__PURE__ */ jsx33(Dialog2.Title, { className: "text-lg font-semibold text-gray-900 mb-3", children: "Open in EventCatalog Studio" }),
-      /* @__PURE__ */ jsxs31(Dialog2.Description, { className: "text-sm text-gray-600 mb-6", children: [
+  return /* @__PURE__ */ jsx34(Dialog2.Root, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsxs32(Dialog2.Portal, { container: portalContainer, children: [
+    /* @__PURE__ */ jsx34(Dialog2.Overlay, { className: "fixed inset-0 bg-black/50 data-[state=open]:animate-overlayShow z-50" }),
+    /* @__PURE__ */ jsxs32(Dialog2.Content, { className: "fixed top-1/2 left-1/2 w-[90vw] max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg bg-white p-6 shadow-xl focus:outline-none data-[state=open]:animate-contentShow z-[100]", children: [
+      /* @__PURE__ */ jsx34(Dialog2.Title, { className: "text-lg font-semibold text-gray-900 mb-3", children: "Open in EventCatalog Studio" }),
+      /* @__PURE__ */ jsxs32(Dialog2.Description, { className: "text-sm text-gray-600 mb-6", children: [
         "Import your diagram into",
         " ",
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx34(
           "a",
           {
             href: "https://eventcatalog.studio",
@@ -6474,43 +6629,43 @@ var StudioModal = ({ isOpen, onClose }) => {
         " ",
         "to create designs from your visualization of your architecture."
       ] }),
-      /* @__PURE__ */ jsxs31("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ jsxs31("div", { className: "bg-gray-50 rounded-lg p-4 border border-gray-200", children: [
-          /* @__PURE__ */ jsx33("h4", { className: "text-sm font-bold text-gray-900 mb-2", children: "Step 1: Copy diagram" }),
-          /* @__PURE__ */ jsx33("p", { className: "text-xs text-gray-600 mb-3", children: "Copy your diagram data to your clipboard." }),
-          /* @__PURE__ */ jsx33(
+      /* @__PURE__ */ jsxs32("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs32("div", { className: "bg-gray-50 rounded-lg p-4 border border-gray-200", children: [
+          /* @__PURE__ */ jsx34("h4", { className: "text-sm font-bold text-gray-900 mb-2", children: "Step 1: Copy diagram" }),
+          /* @__PURE__ */ jsx34("p", { className: "text-xs text-gray-600 mb-3", children: "Copy your diagram data to your clipboard." }),
+          /* @__PURE__ */ jsx34(
             "button",
             {
               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__ */ jsxs31(Fragment7, { children: [
-                /* @__PURE__ */ jsx33(CheckIcon, { className: "w-4 h-4" }),
-                /* @__PURE__ */ jsx33("span", { children: "Copied!" })
-              ] }) : /* @__PURE__ */ jsxs31(Fragment7, { children: [
-                /* @__PURE__ */ jsx33(ClipboardIcon, { className: "w-4 h-4" }),
-                /* @__PURE__ */ jsx33("span", { children: "Copy diagram to clipboard" })
+              children: copySuccess ? /* @__PURE__ */ jsxs32(Fragment8, { children: [
+                /* @__PURE__ */ jsx34(CheckIcon, { className: "w-4 h-4" }),
+                /* @__PURE__ */ jsx34("span", { children: "Copied!" })
+              ] }) : /* @__PURE__ */ jsxs32(Fragment8, { children: [
+                /* @__PURE__ */ jsx34(ClipboardIcon, { className: "w-4 h-4" }),
+                /* @__PURE__ */ jsx34("span", { children: "Copy diagram to clipboard" })
               ] })
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs31("div", { className: "bg-[rgb(var(--ec-accent-subtle))] rounded-lg p-4 border border-[rgb(var(--ec-accent)/0.3)]", children: [
-          /* @__PURE__ */ jsx33("h4", { className: "text-sm font-bold text-gray-900 mb-2", children: "Step 2: Open EventCatalog Studio" }),
-          /* @__PURE__ */ jsx33("p", { className: "text-xs text-gray-600 mb-3", children: 'Go to EventCatalog Studio and import your design using the "Import from EventCatalog" button.' }),
-          /* @__PURE__ */ jsxs31(
+        /* @__PURE__ */ jsxs32("div", { className: "bg-[rgb(var(--ec-accent-subtle))] rounded-lg p-4 border border-[rgb(var(--ec-accent)/0.3)]", children: [
+          /* @__PURE__ */ jsx34("h4", { className: "text-sm font-bold text-gray-900 mb-2", children: "Step 2: Open EventCatalog Studio" }),
+          /* @__PURE__ */ jsx34("p", { className: "text-xs text-gray-600 mb-3", children: 'Go to EventCatalog Studio and import your design using the "Import from EventCatalog" button.' }),
+          /* @__PURE__ */ jsxs32(
             "button",
             {
               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__ */ jsx33(ExternalLinkIcon, { className: "w-4 h-4" }),
-                /* @__PURE__ */ jsx33("span", { children: "Open EventCatalog Studio" })
+                /* @__PURE__ */ jsx34(ExternalLinkIcon, { className: "w-4 h-4" }),
+                /* @__PURE__ */ jsx34("span", { children: "Open EventCatalog Studio" })
               ]
             }
           ),
-          /* @__PURE__ */ jsx33("p", { className: "text-[12px] text-gray-500  italic mt-4 mb-0", children: "Don't worry, none of your data is stored by EventCatalog Studio, everything is local to your browser." })
+          /* @__PURE__ */ jsx34("p", { className: "text-[12px] text-gray-500  italic mt-4 mb-0", children: "Don't worry, none of your data is stored by EventCatalog Studio, everything is local to your browser." })
         ] })
       ] }),
-      /* @__PURE__ */ jsx33("div", { className: "mt-6 flex justify-end", children: /* @__PURE__ */ jsx33(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ jsx33(
+      /* @__PURE__ */ jsx34("div", { className: "mt-6 flex justify-end", children: /* @__PURE__ */ jsx34(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ jsx34(
         "button",
         {
           type: "button",
@@ -6657,7 +6812,7 @@ function getNodeDocUrl(node) {
 // src/components/FocusMode/FocusModeNodeActions.tsx
 import { NodeToolbar, Position as Position18, useViewport } from "@xyflow/react";
 import { ArrowRightLeft as ArrowRightLeft2, FileText } from "lucide-react";
-import { jsx as jsx34, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs33 } from "react/jsx-runtime";
 var FocusModeNodeActions = ({
   node,
   isCenter,
@@ -6684,26 +6839,26 @@ var FocusModeNodeActions = ({
   };
   if (isCenter) {
     if (!docUrl) return null;
-    return /* @__PURE__ */ jsx34(
+    return /* @__PURE__ */ jsx35(
       NodeToolbar,
       {
         nodeId: node.id,
         position: Position18.Bottom,
         isVisible: true,
         offset: -16,
-        children: /* @__PURE__ */ jsx34(
+        children: /* @__PURE__ */ jsx35(
           "div",
           {
             className: "flex items-center gap-1 bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-lg shadow-md",
             style: { padding: Math.round(4 * scaleFactor) },
-            children: /* @__PURE__ */ jsx34(
+            children: /* @__PURE__ */ jsx35(
               "button",
               {
                 onClick: handleDocClick,
                 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__ */ jsx34(FileText, { style: { width: iconSize, height: iconSize } })
+                children: /* @__PURE__ */ jsx35(FileText, { style: { width: iconSize, height: iconSize } })
               }
             )
           }
@@ -6711,37 +6866,37 @@ var FocusModeNodeActions = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     NodeToolbar,
     {
       nodeId: node.id,
       position: Position18.Bottom,
       isVisible: true,
       offset: -16,
-      children: /* @__PURE__ */ jsxs32(
+      children: /* @__PURE__ */ jsxs33(
         "div",
         {
           className: "flex items-center gap-1 bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-lg shadow-md",
           style: { padding: Math.round(4 * scaleFactor) },
           children: [
-            docUrl && /* @__PURE__ */ jsx34(
+            docUrl && /* @__PURE__ */ jsx35(
               "button",
               {
                 onClick: handleDocClick,
                 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__ */ jsx34(FileText, { style: { width: iconSize, height: iconSize } })
+                children: /* @__PURE__ */ jsx35(FileText, { style: { width: iconSize, height: iconSize } })
               }
             ),
-            /* @__PURE__ */ jsx34(
+            /* @__PURE__ */ jsx35(
               "button",
               {
                 onClick: handleSwitch,
                 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__ */ jsx34(ArrowRightLeft2, { style: { width: iconSize, height: iconSize } })
+                children: /* @__PURE__ */ jsx35(ArrowRightLeft2, { style: { width: iconSize, height: iconSize } })
               }
             )
           ]
@@ -6754,18 +6909,18 @@ var FocusModeNodeActions_default = FocusModeNodeActions;
 
 // src/components/FocusMode/FocusModePlaceholder.tsx
 import { Handle as Handle21, Position as Position19 } from "@xyflow/react";
-import { jsx as jsx35, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs34 } from "react/jsx-runtime";
 var FocusModePlaceholder = ({
   data
 }) => {
   const { label, side } = data;
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs34(
     "div",
     {
       className: "px-4 py-4 rounded-lg border-2 border-dashed border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-bg)/0.5)] max-w-[280px] flex items-center justify-center",
       style: { opacity: 0.6, minHeight: "130px" },
       children: [
-        side === "right" && /* @__PURE__ */ jsx35(
+        side === "right" && /* @__PURE__ */ jsx36(
           Handle21,
           {
             type: "target",
@@ -6773,8 +6928,8 @@ var FocusModePlaceholder = ({
             style: { visibility: "hidden" }
           }
         ),
-        /* @__PURE__ */ jsx35("div", { className: "text-center text-sm text-[rgb(var(--ec-page-text-muted))] italic", children: label }),
-        side === "left" && /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx36("div", { className: "text-center text-sm text-[rgb(var(--ec-page-text-muted))] italic", children: label }),
+        side === "left" && /* @__PURE__ */ jsx36(
           Handle21,
           {
             type: "source",
@@ -6789,7 +6944,7 @@ var FocusModePlaceholder = ({
 var FocusModePlaceholder_default = FocusModePlaceholder;
 
 // src/components/FocusMode/FocusModeContent.tsx
-import { jsx as jsx36, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs35 } from "react/jsx-runtime";
 var HORIZONTAL_SPACING = 450;
 var VERTICAL_SPACING = 200;
 var SLIDE_DURATION = 300;
@@ -6998,14 +7153,14 @@ var FocusModeContent = ({
     [nodeTypes]
   );
   if (displayNodes.length === 0) {
-    return /* @__PURE__ */ jsx36("div", { className: "flex items-center justify-center h-full text-[rgb(var(--ec-page-text-muted))]", children: "Node not found" });
+    return /* @__PURE__ */ jsx37("div", { className: "flex items-center justify-center h-full text-[rgb(var(--ec-page-text-muted))]", children: "Node not found" });
   }
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     "div",
     {
       className: "h-full w-full focus-mode-container",
       style: { opacity: isReady ? 1 : 0 },
-      children: /* @__PURE__ */ jsxs34(
+      children: /* @__PURE__ */ jsxs35(
         ReactFlow,
         {
           nodes: displayNodes,
@@ -7025,9 +7180,9 @@ var FocusModeContent = ({
           minZoom: 0.3,
           maxZoom: 2,
           children: [
-            /* @__PURE__ */ jsx36(Background, { color: "rgb(var(--ec-page-border))", gap: 20 }),
-            /* @__PURE__ */ jsx36(Controls, { showInteractive: false }),
-            displayNodes.map((node, index) => /* @__PURE__ */ jsx36(
+            /* @__PURE__ */ jsx37(Background, { color: "rgb(var(--ec-page-border))", gap: 20 }),
+            /* @__PURE__ */ jsx37(Controls, { showInteractive: false }),
+            displayNodes.map((node, index) => /* @__PURE__ */ jsx37(
               FocusModeNodeActions_default,
               {
                 node,
@@ -7045,7 +7200,7 @@ var FocusModeContent = ({
 var FocusModeContent_default = FocusModeContent;
 
 // src/components/FocusModeModal.tsx
-import { jsx as jsx37, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs36 } from "react/jsx-runtime";
 var FocusModeModal = ({
   isOpen,
   onClose,
@@ -7076,7 +7231,7 @@ var FocusModeModal = ({
   if (!centerNodeId) {
     return null;
   }
-  return /* @__PURE__ */ jsx37(Dialog3.Root, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsx37(Dialog3.Portal, { children: /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsx38(Dialog3.Root, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsx38(Dialog3.Portal, { children: /* @__PURE__ */ jsxs36(
     "div",
     {
       className: "eventcatalog-visualizer",
@@ -7087,7 +7242,7 @@ var FocusModeModal = ({
         zIndex: 99999
       },
       children: [
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx38(
           Dialog3.Overlay,
           {
             style: {
@@ -7098,7 +7253,7 @@ var FocusModeModal = ({
             }
           }
         ),
-        /* @__PURE__ */ jsxs35(
+        /* @__PURE__ */ jsxs36(
           Dialog3.Content,
           {
             style: {
@@ -7114,7 +7269,7 @@ var FocusModeModal = ({
               overflow: "hidden"
             },
             children: [
-              /* @__PURE__ */ jsxs35(
+              /* @__PURE__ */ jsxs36(
                 "div",
                 {
                   style: {
@@ -7126,8 +7281,8 @@ var FocusModeModal = ({
                     flexShrink: 0
                   },
                   children: [
-                    /* @__PURE__ */ jsxs35("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
-                      /* @__PURE__ */ jsx37(
+                    /* @__PURE__ */ jsxs36("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+                      /* @__PURE__ */ jsx38(
                         "div",
                         {
                           style: {
@@ -7139,7 +7294,7 @@ var FocusModeModal = ({
                             borderRadius: 10,
                             background: isDark ? "rgba(59, 130, 246, 0.18)" : "rgba(59, 130, 246, 0.12)"
                           },
-                          children: /* @__PURE__ */ jsx37(
+                          children: /* @__PURE__ */ jsx38(
                             FocusIcon,
                             {
                               style: {
@@ -7151,8 +7306,8 @@ var FocusModeModal = ({
                           )
                         }
                       ),
-                      /* @__PURE__ */ jsxs35("div", { children: [
-                        /* @__PURE__ */ jsx37(
+                      /* @__PURE__ */ jsxs36("div", { children: [
+                        /* @__PURE__ */ jsx38(
                           Dialog3.Title,
                           {
                             style: {
@@ -7163,7 +7318,7 @@ var FocusModeModal = ({
                             children: "Focus Mode"
                           }
                         ),
-                        /* @__PURE__ */ jsx37(
+                        /* @__PURE__ */ jsx38(
                           Dialog3.Description,
                           {
                             style: {
@@ -7176,7 +7331,7 @@ var FocusModeModal = ({
                         )
                       ] })
                     ] }),
-                    /* @__PURE__ */ jsx37(Dialog3.Close, { asChild: true, children: /* @__PURE__ */ jsx37(
+                    /* @__PURE__ */ jsx38(Dialog3.Close, { asChild: true, children: /* @__PURE__ */ jsx38(
                       "button",
                       {
                         style: {
@@ -7192,13 +7347,13 @@ var FocusModeModal = ({
                           color: isDark ? "#94a3b8" : "#64748b"
                         },
                         "aria-label": "Close",
-                        children: /* @__PURE__ */ jsx37(XIcon2, { style: { width: 20, height: 20 } })
+                        children: /* @__PURE__ */ jsx38(XIcon2, { style: { width: 20, height: 20 } })
                       }
                     ) })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx37("div", { style: { flex: 1, overflow: "hidden" }, children: /* @__PURE__ */ jsx37(ReactFlowProvider, { children: /* @__PURE__ */ jsx37(
+              /* @__PURE__ */ jsx38("div", { style: { flex: 1, overflow: "hidden" }, children: /* @__PURE__ */ jsx38(ReactFlowProvider, { children: /* @__PURE__ */ jsx38(
                 FocusModeContent_default,
                 {
                   centerNodeId,
@@ -7484,7 +7639,7 @@ async function copyToClipboard(text) {
 }
 
 // src/components/MermaidView.tsx
-import { jsx as jsx38, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs37 } from "react/jsx-runtime";
 var MermaidView = ({
   nodes,
   edges,
@@ -7594,51 +7749,51 @@ var MermaidView = ({
     setCopySuccess(true);
     setTimeout(() => setCopySuccess(false), 2e3);
   }, [mermaidCode]);
-  return /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs37(
     "div",
     {
       ref: containerRef,
       className: "absolute inset-0 bg-[rgb(var(--ec-page-bg))]",
       style: { animation: "fadeIn 200ms ease-out" },
       children: [
-        /* @__PURE__ */ jsx38("style", { children: `
+        /* @__PURE__ */ jsx39("style", { children: `
         @keyframes fadeIn {
           from { opacity: 0; }
           to { opacity: 1; }
         }
       ` }),
-        /* @__PURE__ */ jsx38("div", { className: "absolute top-[10px] right-4 z-20", children: /* @__PURE__ */ jsxs36("div", { className: "relative group", children: [
-          /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx39("div", { className: "absolute top-[10px] right-4 z-20", children: /* @__PURE__ */ jsxs37("div", { className: "relative group", children: [
+          /* @__PURE__ */ jsx39(
             "button",
             {
               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__ */ jsx38(CheckIcon2, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx38(ClipboardIcon2, { className: "h-5 w-5" })
+              children: copySuccess ? /* @__PURE__ */ jsx39(CheckIcon2, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx39(ClipboardIcon2, { className: "h-5 w-5" })
             }
           ),
-          /* @__PURE__ */ jsx38("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" })
+          /* @__PURE__ */ jsx39("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" })
         ] }) }),
-        /* @__PURE__ */ jsxs36("div", { className: "absolute inset-0 overflow-hidden", children: [
-          isRendering && /* @__PURE__ */ jsx38("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs36("div", { className: "relative", children: [
-            /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-4 opacity-40", children: [
-              /* @__PURE__ */ jsx38("div", { className: "w-24 h-10 bg-[rgb(var(--ec-page-border))] rounded animate-pulse" }),
-              /* @__PURE__ */ jsx38("div", { className: "w-12 h-0.5 bg-[rgb(var(--ec-page-border))] animate-pulse" }),
-              /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsxs37("div", { className: "absolute inset-0 overflow-hidden", children: [
+          isRendering && /* @__PURE__ */ jsx39("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs37("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-4 opacity-40", children: [
+              /* @__PURE__ */ jsx39("div", { className: "w-24 h-10 bg-[rgb(var(--ec-page-border))] rounded animate-pulse" }),
+              /* @__PURE__ */ jsx39("div", { className: "w-12 h-0.5 bg-[rgb(var(--ec-page-border))] animate-pulse" }),
+              /* @__PURE__ */ jsx39(
                 "div",
                 {
                   className: "w-20 h-10 bg-[rgb(var(--ec-page-border))] rounded-full animate-pulse",
                   style: { animationDelay: "75ms" }
                 }
               ),
-              /* @__PURE__ */ jsx38(
+              /* @__PURE__ */ jsx39(
                 "div",
                 {
                   className: "w-12 h-0.5 bg-[rgb(var(--ec-page-border))] animate-pulse",
                   style: { animationDelay: "150ms" }
                 }
               ),
-              /* @__PURE__ */ jsx38(
+              /* @__PURE__ */ jsx39(
                 "div",
                 {
                   className: "w-24 h-10 bg-[rgb(var(--ec-page-border))] rounded animate-pulse",
@@ -7646,14 +7801,14 @@ var MermaidView = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx38("p", { className: "text-center text-sm text-[rgb(var(--ec-page-text-muted))] mt-4", children: "Rendering diagram..." })
+            /* @__PURE__ */ jsx39("p", { className: "text-center text-sm text-[rgb(var(--ec-page-text-muted))] mt-4", children: "Rendering diagram..." })
           ] }) }),
-          previewError && !isRendering && /* @__PURE__ */ jsxs36("div", { className: "w-full h-full flex flex-col items-center justify-center p-4", children: [
-            /* @__PURE__ */ jsx38("div", { className: "text-red-500 text-sm mb-2", children: "Failed to render diagram" }),
-            /* @__PURE__ */ jsx38("div", { className: "text-[rgb(var(--ec-page-text-muted))] text-xs font-mono bg-[rgb(var(--ec-code-bg))] p-2 rounded max-w-lg overflow-auto", children: previewError }),
-            /* @__PURE__ */ jsxs36("div", { className: "mt-4 text-sm text-[rgb(var(--ec-page-text-muted))]", children: [
-              /* @__PURE__ */ jsx38("p", { children: "You can still copy the Mermaid code and paste it into" }),
-              /* @__PURE__ */ jsx38(
+          previewError && !isRendering && /* @__PURE__ */ jsxs37("div", { className: "w-full h-full flex flex-col items-center justify-center p-4", children: [
+            /* @__PURE__ */ jsx39("div", { className: "text-red-500 text-sm mb-2", children: "Failed to render diagram" }),
+            /* @__PURE__ */ jsx39("div", { className: "text-[rgb(var(--ec-page-text-muted))] text-xs font-mono bg-[rgb(var(--ec-code-bg))] p-2 rounded max-w-lg overflow-auto", children: previewError }),
+            /* @__PURE__ */ jsxs37("div", { className: "mt-4 text-sm text-[rgb(var(--ec-page-text-muted))]", children: [
+              /* @__PURE__ */ jsx39("p", { children: "You can still copy the Mermaid code and paste it into" }),
+              /* @__PURE__ */ jsx39(
                 "a",
                 {
                   href: "https://mermaid.live",
@@ -7665,7 +7820,7 @@ var MermaidView = ({
               )
             ] })
           ] }),
-          previewSvg && !isRendering && !previewError && /* @__PURE__ */ jsx38(
+          previewSvg && !isRendering && !previewError && /* @__PURE__ */ jsx39(
             "div",
             {
               ref: svgContainerRef,
@@ -7674,15 +7829,15 @@ var MermaidView = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx38("div", { className: "absolute bottom-4 left-4 z-20", children: /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2 bg-[rgb(var(--ec-card-bg))]/90 backdrop-blur-sm px-3 py-1.5 rounded-md shadow-sm border border-[rgb(var(--ec-page-border))]", children: [
-          /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx39("div", { className: "absolute bottom-4 left-4 z-20", children: /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-2 bg-[rgb(var(--ec-card-bg))]/90 backdrop-blur-sm px-3 py-1.5 rounded-md shadow-sm border border-[rgb(var(--ec-page-border))]", children: [
+          /* @__PURE__ */ jsx39(
             "svg",
             {
               className: "w-3.5 h-3.5 text-[rgb(var(--ec-icon-color))]",
               fill: "none",
               viewBox: "0 0 24 24",
               stroke: "currentColor",
-              children: /* @__PURE__ */ jsx38(
+              children: /* @__PURE__ */ jsx39(
                 "path",
                 {
                   strokeLinecap: "round",
@@ -7693,7 +7848,7 @@ var MermaidView = ({
               )
             }
           ),
-          /* @__PURE__ */ jsx38("span", { className: "text-xs text-[rgb(var(--ec-page-text-muted))]", children: "Scroll to zoom \xB7 Drag to pan" })
+          /* @__PURE__ */ jsx39("span", { className: "text-xs text-[rgb(var(--ec-page-text-muted))]", children: "Scroll to zoom \xB7 Drag to pan" })
         ] }) })
       ]
     }
@@ -7918,14 +8073,14 @@ var useChannelVisibility = ({
 };
 
 // src/components/VisualizerDropdownContent.tsx
-import { useState as useState12, memo as memo32 } from "react";
+import { useState as useState12, memo as memo33 } from "react";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import {
   Code,
   Share2,
   Search as Search2,
   Grid3x3,
-  Maximize2 as Maximize22,
+  Maximize2 as Maximize23,
   Map as Map2,
   Sparkles,
   Zap as Zap4,
@@ -7940,8 +8095,8 @@ import {
   DocumentArrowDownIcon,
   PresentationChartLineIcon
 } from "@heroicons/react/24/outline";
-import { Fragment as Fragment8, jsx as jsx39, jsxs as jsxs37 } from "react/jsx-runtime";
-var VisualizerDropdownContent = memo32(
+import { Fragment as Fragment9, jsx as jsx40, jsxs as jsxs38 } from "react/jsx-runtime";
+var VisualizerDropdownContent = memo33(
   ({
     isMermaidView,
     setIsMermaidView,
@@ -7990,19 +8145,19 @@ var VisualizerDropdownContent = memo32(
         setLayoutStatus("idle");
       }
     };
-    return /* @__PURE__ */ jsxs37(Fragment8, { children: [
-      /* @__PURE__ */ jsxs37(DropdownMenu.Sub, { children: [
-        /* @__PURE__ */ jsxs37(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__ */ jsx39(Grid3x3, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
-          /* @__PURE__ */ jsx39("span", { className: "flex-1 font-normal", children: "Canvas" }),
-          /* @__PURE__ */ jsx39(
+    return /* @__PURE__ */ jsxs38(Fragment9, { children: [
+      /* @__PURE__ */ jsxs38(DropdownMenu.Sub, { children: [
+        /* @__PURE__ */ jsxs38(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__ */ jsx40(Grid3x3, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
+          /* @__PURE__ */ jsx40("span", { className: "flex-1 font-normal", children: "Canvas" }),
+          /* @__PURE__ */ jsx40(
             "svg",
             {
               className: "w-3 h-3 text-[rgb(var(--ec-page-text-muted))]",
               fill: "none",
               viewBox: "0 0 24 24",
               stroke: "currentColor",
-              children: /* @__PURE__ */ jsx39(
+              children: /* @__PURE__ */ jsx40(
                 "path",
                 {
                   strokeLinecap: "round",
@@ -8014,27 +8169,27 @@ var VisualizerDropdownContent = memo32(
             }
           )
         ] }),
-        /* @__PURE__ */ jsx39(DropdownMenu.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs37(
+        /* @__PURE__ */ jsx40(DropdownMenu.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs38(
           DropdownMenu.SubContent,
           {
             className: "min-w-[200px] bg-[rgb(var(--ec-card-bg))] rounded-lg shadow-xl border border-[rgb(var(--ec-page-border))] py-1.5 z-[60]",
             sideOffset: 8,
             alignOffset: -8,
             children: [
-              /* @__PURE__ */ jsxs37(
+              /* @__PURE__ */ jsxs38(
                 DropdownMenu.CheckboxItem,
                 {
                   checked: isMermaidView,
                   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__ */ jsx39(Code, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
-                    /* @__PURE__ */ jsx39("span", { className: "flex-1 font-normal", children: "Render as mermaid" }),
-                    /* @__PURE__ */ jsx39(
+                    /* @__PURE__ */ jsx40(Code, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
+                    /* @__PURE__ */ jsx40("span", { className: "flex-1 font-normal", children: "Render as mermaid" }),
+                    /* @__PURE__ */ jsx40(
                       "div",
                       {
                         className: `w-7 h-4 rounded-full transition-all duration-200 flex-shrink-0 relative ${isMermaidView ? "bg-[rgb(var(--ec-accent))]" : "bg-[rgb(var(--ec-page-border))]"}`,
-                        children: /* @__PURE__ */ jsx39(
+                        children: /* @__PURE__ */ jsx40(
                           "div",
                           {
                             className: `absolute top-0.5 w-3 h-3 rounded-full bg-white shadow-sm transition-all duration-200 ${isMermaidView ? "left-3.5" : "left-0.5"}`
@@ -8045,21 +8200,21 @@ var VisualizerDropdownContent = memo32(
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx39(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
-              /* @__PURE__ */ jsxs37(
+              /* @__PURE__ */ jsx40(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
+              /* @__PURE__ */ jsxs38(
                 DropdownMenu.CheckboxItem,
                 {
                   checked: animateMessages,
                   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__ */ jsx39(Zap4, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
-                    /* @__PURE__ */ jsx39("span", { className: "flex-1 font-normal", children: "Simulate Messages" }),
-                    /* @__PURE__ */ jsx39(
+                    /* @__PURE__ */ jsx40(Zap4, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
+                    /* @__PURE__ */ jsx40("span", { className: "flex-1 font-normal", children: "Simulate Messages" }),
+                    /* @__PURE__ */ jsx40(
                       "div",
                       {
                         className: `w-7 h-4 rounded-full transition-all duration-200 flex-shrink-0 relative ${animateMessages ? "bg-[rgb(var(--ec-accent))]" : "bg-[rgb(var(--ec-page-border))]"}`,
-                        children: /* @__PURE__ */ jsx39(
+                        children: /* @__PURE__ */ jsx40(
                           "div",
                           {
                             className: `absolute top-0.5 w-3 h-3 rounded-full bg-white shadow-sm transition-all duration-200 ${animateMessages ? "left-3.5" : "left-0.5"}`
@@ -8070,20 +8225,20 @@ var VisualizerDropdownContent = memo32(
                   ]
                 }
               ),
-              hasChannels && /* @__PURE__ */ jsxs37(
+              hasChannels && /* @__PURE__ */ jsxs38(
                 DropdownMenu.CheckboxItem,
                 {
                   checked: hideChannels,
                   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__ */ jsx39(EyeOff, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
-                    /* @__PURE__ */ jsx39("span", { className: "flex-1 font-normal", children: "Hide channels" }),
-                    /* @__PURE__ */ jsx39(
+                    /* @__PURE__ */ jsx40(EyeOff, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
+                    /* @__PURE__ */ jsx40("span", { className: "flex-1 font-normal", children: "Hide channels" }),
+                    /* @__PURE__ */ jsx40(
                       "div",
                       {
                         className: `w-7 h-4 rounded-full transition-all duration-200 flex-shrink-0 relative ${hideChannels ? "bg-[rgb(var(--ec-accent))]" : "bg-[rgb(var(--ec-page-border))]"}`,
-                        children: /* @__PURE__ */ jsx39(
+                        children: /* @__PURE__ */ jsx40(
                           "div",
                           {
                             className: `absolute top-0.5 w-3 h-3 rounded-full bg-white shadow-sm transition-all duration-200 ${hideChannels ? "left-3.5" : "left-0.5"}`
@@ -8094,20 +8249,20 @@ var VisualizerDropdownContent = memo32(
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs37(
+              /* @__PURE__ */ jsxs38(
                 DropdownMenu.CheckboxItem,
                 {
                   checked: showMinimap,
                   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__ */ jsx39(Map2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
-                    /* @__PURE__ */ jsx39("span", { className: "flex-1 font-normal", children: "Show minimap" }),
-                    /* @__PURE__ */ jsx39(
+                    /* @__PURE__ */ jsx40(Map2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
+                    /* @__PURE__ */ jsx40("span", { className: "flex-1 font-normal", children: "Show minimap" }),
+                    /* @__PURE__ */ jsx40(
                       "div",
                       {
                         className: `w-7 h-4 rounded-full transition-all duration-200 flex-shrink-0 relative ${showMinimap ? "bg-[rgb(var(--ec-accent))]" : "bg-[rgb(var(--ec-page-border))]"}`,
-                        children: /* @__PURE__ */ jsx39(
+                        children: /* @__PURE__ */ jsx40(
                           "div",
                           {
                             className: `absolute top-0.5 w-3 h-3 rounded-full bg-white shadow-sm transition-all duration-200 ${showMinimap ? "left-3.5" : "left-0.5"}`
@@ -8118,19 +8273,19 @@ var VisualizerDropdownContent = memo32(
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx39(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
-              /* @__PURE__ */ jsxs37(
+              /* @__PURE__ */ jsx40(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
+              /* @__PURE__ */ jsxs38(
                 DropdownMenu.Item,
                 {
                   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__ */ jsx39(Maximize22, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
-                    /* @__PURE__ */ jsx39("span", { className: "flex-1 font-normal", children: "Fit to view" })
+                    /* @__PURE__ */ jsx40(Maximize23, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
+                    /* @__PURE__ */ jsx40("span", { className: "flex-1 font-normal", children: "Fit to view" })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs37(
+              /* @__PURE__ */ jsxs38(
                 DropdownMenu.Item,
                 {
                   onClick: () => {
@@ -8144,8 +8299,8 @@ var VisualizerDropdownContent = memo32(
                   },
                   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__ */ jsx39(Search2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
-                    /* @__PURE__ */ jsx39("span", { className: "flex-1 font-normal", children: "Find on canvas" })
+                    /* @__PURE__ */ jsx40(Search2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
+                    /* @__PURE__ */ jsx40("span", { className: "flex-1 font-normal", children: "Find on canvas" })
                   ]
                 }
               )
@@ -8153,14 +8308,14 @@ var VisualizerDropdownContent = memo32(
           }
         ) })
       ] }),
-      notesCount > 0 && onOpenNotes && /* @__PURE__ */ jsxs37(
+      notesCount > 0 && onOpenNotes && /* @__PURE__ */ jsxs38(
         DropdownMenu.Item,
         {
           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__ */ jsx39(MessageCircle2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
-            /* @__PURE__ */ jsxs37("span", { className: "flex-1 font-normal", children: [
+            /* @__PURE__ */ jsx40(MessageCircle2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
+            /* @__PURE__ */ jsxs38("span", { className: "flex-1 font-normal", children: [
               "View notes (",
               notesCount,
               ")"
@@ -8168,19 +8323,19 @@ var VisualizerDropdownContent = memo32(
           ]
         }
       ),
-      isDevMode && onSaveLayout && /* @__PURE__ */ jsxs37(DropdownMenu.Sub, { children: [
-        /* @__PURE__ */ jsxs37(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__ */ jsx39(Save, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
-          /* @__PURE__ */ jsx39("span", { className: "flex-1 font-normal", children: "Layout" }),
-          /* @__PURE__ */ jsx39("span", { className: "text-[10px] text-amber-600 font-medium", children: "DEV" }),
-          /* @__PURE__ */ jsx39(
+      isDevMode && onSaveLayout && /* @__PURE__ */ jsxs38(DropdownMenu.Sub, { children: [
+        /* @__PURE__ */ jsxs38(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__ */ jsx40(Save, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
+          /* @__PURE__ */ jsx40("span", { className: "flex-1 font-normal", children: "Layout" }),
+          /* @__PURE__ */ jsx40("span", { className: "text-[10px] text-amber-600 font-medium", children: "DEV" }),
+          /* @__PURE__ */ jsx40(
             "svg",
             {
               className: "w-3 h-3 text-[rgb(var(--ec-page-text-muted))]",
               fill: "none",
               viewBox: "0 0 24 24",
               stroke: "currentColor",
-              children: /* @__PURE__ */ jsx39(
+              children: /* @__PURE__ */ jsx40(
                 "path",
                 {
                   strokeLinecap: "round",
@@ -8192,34 +8347,34 @@ var VisualizerDropdownContent = memo32(
             }
           )
         ] }),
-        /* @__PURE__ */ jsx39(DropdownMenu.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs37(
+        /* @__PURE__ */ jsx40(DropdownMenu.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs38(
           DropdownMenu.SubContent,
           {
             className: "min-w-[180px] bg-[rgb(var(--ec-card-bg))] rounded-lg shadow-xl border border-[rgb(var(--ec-page-border))] py-1.5 z-[60]",
             sideOffset: 8,
             alignOffset: -8,
             children: [
-              /* @__PURE__ */ jsxs37(
+              /* @__PURE__ */ jsxs38(
                 DropdownMenu.Item,
                 {
                   onClick: handleSaveLayout,
                   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__ */ jsx39(Loader2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 animate-spin" }) : /* @__PURE__ */ jsx39(Save, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
-                    /* @__PURE__ */ jsx39("span", { className: "flex-1 font-normal", children: layoutStatus === "saving" ? "Saving..." : "Save Layout" })
+                    layoutStatus === "saving" ? /* @__PURE__ */ jsx40(Loader2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 animate-spin" }) : /* @__PURE__ */ jsx40(Save, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
+                    /* @__PURE__ */ jsx40("span", { className: "flex-1 font-normal", children: layoutStatus === "saving" ? "Saving..." : "Save Layout" })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs37(
+              /* @__PURE__ */ jsxs38(
                 DropdownMenu.Item,
                 {
                   onClick: handleResetLayout,
                   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__ */ jsx39(Loader2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 animate-spin" }) : /* @__PURE__ */ jsx39(RotateCcw, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
-                    /* @__PURE__ */ jsx39("span", { className: "flex-1 font-normal", children: layoutStatus === "resetting" ? "Resetting..." : "Reset Layout" })
+                    layoutStatus === "resetting" ? /* @__PURE__ */ jsx40(Loader2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 animate-spin" }) : /* @__PURE__ */ jsx40(RotateCcw, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
+                    /* @__PURE__ */ jsx40("span", { className: "flex-1 font-normal", children: layoutStatus === "resetting" ? "Resetting..." : "Reset Layout" })
                   ]
                 }
               )
@@ -8227,75 +8382,75 @@ var VisualizerDropdownContent = memo32(
           }
         ) })
       ] }),
-      isChatEnabled && /* @__PURE__ */ jsxs37(Fragment8, { children: [
-        /* @__PURE__ */ jsx39(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
-        /* @__PURE__ */ jsxs37(
+      isChatEnabled && /* @__PURE__ */ jsxs38(Fragment9, { children: [
+        /* @__PURE__ */ jsx40(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
+        /* @__PURE__ */ jsxs38(
           DropdownMenu.Item,
           {
             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__ */ jsx39(Sparkles, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
-              /* @__PURE__ */ jsx39("span", { className: "flex-1 font-normal", children: "Ask a question" })
+              /* @__PURE__ */ jsx40(Sparkles, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
+              /* @__PURE__ */ jsx40("span", { className: "flex-1 font-normal", children: "Ask a question" })
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ jsx39(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
-      /* @__PURE__ */ jsxs37(
+      /* @__PURE__ */ jsx40(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
+      /* @__PURE__ */ jsxs38(
         DropdownMenu.Item,
         {
           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__ */ jsx39(Code, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
-            /* @__PURE__ */ jsx39("span", { className: "flex-1 font-normal", children: "Copy as mermaid" })
+            /* @__PURE__ */ jsx40(Code, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
+            /* @__PURE__ */ jsx40("span", { className: "flex-1 font-normal", children: "Copy as mermaid" })
           ]
         }
       ),
-      /* @__PURE__ */ jsxs37(
+      /* @__PURE__ */ jsxs38(
         DropdownMenu.Item,
         {
           onClick: handleExportVisual,
           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__ */ jsx39(DocumentArrowDownIcon, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
-            /* @__PURE__ */ jsx39("span", { className: "flex-1 font-normal", children: "Export image" })
+            /* @__PURE__ */ jsx40(DocumentArrowDownIcon, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
+            /* @__PURE__ */ jsx40("span", { className: "flex-1 font-normal", children: "Export image" })
           ]
         }
       ),
-      /* @__PURE__ */ jsxs37(
+      /* @__PURE__ */ jsxs38(
         DropdownMenu.Item,
         {
           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__ */ jsx39(Share2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
-            /* @__PURE__ */ jsx39("span", { className: "flex-1 font-normal", children: "Share Link" })
+            /* @__PURE__ */ jsx40(Share2, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
+            /* @__PURE__ */ jsx40("span", { className: "flex-1 font-normal", children: "Share Link" })
           ]
         }
       ),
-      /* @__PURE__ */ jsx39(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
-      /* @__PURE__ */ jsxs37(
+      /* @__PURE__ */ jsx40(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
+      /* @__PURE__ */ jsxs38(
         DropdownMenu.Item,
         {
           onClick: toggleFullScreen,
           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__ */ jsx39(PresentationChartLineIcon, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
-            /* @__PURE__ */ jsx39("span", { className: "flex-1 font-normal", children: "Start Presentation" })
+            /* @__PURE__ */ jsx40(PresentationChartLineIcon, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
+            /* @__PURE__ */ jsx40("span", { className: "flex-1 font-normal", children: "Start Presentation" })
           ]
         }
       ),
-      /* @__PURE__ */ jsx39(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
-      /* @__PURE__ */ jsxs37(
+      /* @__PURE__ */ jsx40(DropdownMenu.Separator, { className: "my-1 h-px bg-[rgb(var(--ec-page-border))]" }),
+      /* @__PURE__ */ jsxs38(
         DropdownMenu.Item,
         {
           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__ */ jsx39(ExternalLink, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
-            /* @__PURE__ */ jsx39("span", { className: "flex-1 font-normal", children: "Open in EventCatalog Studio" })
+            /* @__PURE__ */ jsx40(ExternalLink, { className: "w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" }),
+            /* @__PURE__ */ jsx40("span", { className: "flex-1 font-normal", children: "Open in EventCatalog Studio" })
           ]
         }
       )
@@ -8306,30 +8461,30 @@ VisualizerDropdownContent.displayName = "VisualizerDropdownContent";
 var VisualizerDropdownContent_default = VisualizerDropdownContent;
 
 // src/components/NodeContextMenu.tsx
-import { memo as memo33 } from "react";
+import { memo as memo34 } from "react";
 import * as ContextMenu5 from "@radix-ui/react-context-menu";
-import { Fragment as Fragment9, jsx as jsx40, jsxs as jsxs38 } from "react/jsx-runtime";
-var NodeContextMenu_default = memo33(function NodeContextMenu({
+import { Fragment as Fragment10, jsx as jsx41, jsxs as jsxs39 } from "react/jsx-runtime";
+var NodeContextMenu_default = memo34(function NodeContextMenu({
   items,
   children
 }) {
   const portalContainer = usePortalContainer();
-  if (!items || items.length === 0) return /* @__PURE__ */ jsx40(Fragment9, { children });
-  return /* @__PURE__ */ jsxs38(ContextMenu5.Root, { children: [
-    /* @__PURE__ */ jsx40(ContextMenu5.Trigger, { children }),
-    /* @__PURE__ */ jsx40(ContextMenu5.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx40(
+  if (!items || items.length === 0) return /* @__PURE__ */ jsx41(Fragment10, { children });
+  return /* @__PURE__ */ jsxs39(ContextMenu5.Root, { children: [
+    /* @__PURE__ */ jsx41(ContextMenu5.Trigger, { children }),
+    /* @__PURE__ */ jsx41(ContextMenu5.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx41(
       ContextMenu5.Content,
       {
         className: "min-w-[220px] bg-white rounded-md p-1 shadow-md border border-gray-200 z-50",
         onClick: (e) => e.stopPropagation(),
-        children: items.map((item, index) => /* @__PURE__ */ jsxs38("div", { children: [
-          item.separator && index > 0 && /* @__PURE__ */ jsx40(ContextMenu5.Separator, { className: "h-[1px] bg-gray-200 m-1" }),
-          /* @__PURE__ */ jsx40(
+        children: items.map((item, index) => /* @__PURE__ */ jsxs39("div", { children: [
+          item.separator && index > 0 && /* @__PURE__ */ jsx41(ContextMenu5.Separator, { className: "h-[1px] bg-gray-200 m-1" }),
+          /* @__PURE__ */ jsx41(
             ContextMenu5.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__ */ jsx40(
+              className: "text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center text-gray-900 hover:text-gray-900 visited:text-gray-900 no-underline hover:no-underline visited:no-underline",
+              children: /* @__PURE__ */ jsx41(
                 "a",
                 {
                   href: item.href,
@@ -8859,7 +9014,7 @@ import {
 } from "lucide-react";
 import { useReactFlow as useReactFlow4 } from "@xyflow/react";
 import * as Dialog4 from "@radix-ui/react-dialog";
-import { Fragment as Fragment10, jsx as jsx41, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx42, jsxs as jsxs40 } from "react/jsx-runtime";
 var NODE_TYPE_META = {
   service: { icon: ServerIcon2, color: "#ec4899", label: "Service" },
   services: { icon: ServerIcon2, color: "#ec4899", label: "Service" },
@@ -8965,7 +9120,7 @@ function hashStr2(s) {
 function Avatar2({ name, size = 28 }) {
   const initials = name.split(/\s+/).map((w) => w[0]).join("").toUpperCase().slice(0, 2);
   const [c1, c2] = AVATAR_PALETTES2[hashStr2(name) % AVATAR_PALETTES2.length];
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     "div",
     {
       style: {
@@ -8978,7 +9133,7 @@ function Avatar2({ name, size = 28 }) {
         justifyContent: "center",
         flexShrink: 0
       },
-      children: /* @__PURE__ */ jsx41(
+      children: /* @__PURE__ */ jsx42(
         "span",
         {
           style: {
@@ -8997,7 +9152,7 @@ function PriorityBadge({ priority }) {
   const p = PRIORITY2[priority.toLowerCase()];
   if (!p) return null;
   const isUrgent = priority === "high" || priority === "critical";
-  return /* @__PURE__ */ jsxs39(
+  return /* @__PURE__ */ jsxs40(
     "span",
     {
       style: {
@@ -9016,7 +9171,7 @@ function PriorityBadge({ priority }) {
         lineHeight: 1.4
       },
       children: [
-        isUrgent && /* @__PURE__ */ jsx41(AlertTriangle2, { style: { width: 9, height: 9 }, strokeWidth: 2.5 }),
+        isUrgent && /* @__PURE__ */ jsx42(AlertTriangle2, { style: { width: 9, height: 9 }, strokeWidth: 2.5 }),
         p.label
       ]
     }
@@ -9024,7 +9179,7 @@ function PriorityBadge({ priority }) {
 }
 function NoteCard2({ note, index }) {
   const prioStyle = note.priority ? PRIORITY2[note.priority.toLowerCase()] : null;
-  return /* @__PURE__ */ jsxs39(
+  return /* @__PURE__ */ jsxs40(
     "div",
     {
       style: {
@@ -9036,7 +9191,7 @@ function NoteCard2({ note, index }) {
         boxShadow: "0 1px 3px rgba(0,0,0,0.04)"
       },
       children: [
-        prioStyle && /* @__PURE__ */ jsx41(
+        prioStyle && /* @__PURE__ */ jsx42(
           "div",
           {
             style: {
@@ -9050,7 +9205,7 @@ function NoteCard2({ note, index }) {
             }
           }
         ),
-        /* @__PURE__ */ jsxs39(
+        /* @__PURE__ */ jsxs40(
           "div",
           {
             style: {
@@ -9060,7 +9215,7 @@ function NoteCard2({ note, index }) {
               marginBottom: 8
             },
             children: [
-              note.author ? /* @__PURE__ */ jsx41(Avatar2, { name: note.author, size: 24 }) : /* @__PURE__ */ jsx41(
+              note.author ? /* @__PURE__ */ jsx42(Avatar2, { name: note.author, size: 24 }) : /* @__PURE__ */ jsx42(
                 "div",
                 {
                   style: {
@@ -9074,10 +9229,10 @@ function NoteCard2({ note, index }) {
                     justifyContent: "center",
                     flexShrink: 0
                   },
-                  children: /* @__PURE__ */ jsx41("span", { style: { fontSize: 10, fontWeight: 700, color: AMBER2[700] }, children: index + 1 })
+                  children: /* @__PURE__ */ jsx42("span", { style: { fontSize: 10, fontWeight: 700, color: AMBER2[700] }, children: index + 1 })
                 }
               ),
-              /* @__PURE__ */ jsx41("div", { style: { flex: 1, minWidth: 0 }, children: note.author && /* @__PURE__ */ jsx41(
+              /* @__PURE__ */ jsx42("div", { style: { flex: 1, minWidth: 0 }, children: note.author && /* @__PURE__ */ jsx42(
                 "span",
                 {
                   style: {
@@ -9089,11 +9244,11 @@ function NoteCard2({ note, index }) {
                   children: note.author
                 }
               ) }),
-              note.priority && /* @__PURE__ */ jsx41(PriorityBadge, { priority: note.priority })
+              note.priority && /* @__PURE__ */ jsx42(PriorityBadge, { priority: note.priority })
             ]
           }
         ),
-        /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsx42(
           "p",
           {
             style: {
@@ -9137,7 +9292,7 @@ function AllNotesModal({
     [nodes, setCenter, getZoom, onClose]
   );
   if (totalNotes === 0) return null;
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     Dialog4.Root,
     {
       open: isOpen,
@@ -9147,13 +9302,13 @@ function AllNotesModal({
           setSelectedIdx(0);
         }
       },
-      children: /* @__PURE__ */ jsx41(Dialog4.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs39(
+      children: /* @__PURE__ */ jsx42(Dialog4.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs40(
         "div",
         {
           className: "fixed inset-0 z-[99999]",
           style: { isolation: "isolate" },
           children: [
-            /* @__PURE__ */ jsx41(
+            /* @__PURE__ */ jsx42(
               Dialog4.Overlay,
               {
                 style: {
@@ -9164,7 +9319,7 @@ function AllNotesModal({
                 }
               }
             ),
-            /* @__PURE__ */ jsxs39(
+            /* @__PURE__ */ jsxs40(
               Dialog4.Content,
               {
                 style: {
@@ -9185,7 +9340,7 @@ function AllNotesModal({
                   outline: "none"
                 },
                 children: [
-                  /* @__PURE__ */ jsxs39(
+                  /* @__PURE__ */ jsxs40(
                     "div",
                     {
                       style: {
@@ -9197,7 +9352,7 @@ function AllNotesModal({
                         flexShrink: 0
                       },
                       children: [
-                        /* @__PURE__ */ jsx41(
+                        /* @__PURE__ */ jsx42(
                           "div",
                           {
                             style: {
@@ -9210,7 +9365,7 @@ function AllNotesModal({
                               justifyContent: "center",
                               flexShrink: 0
                             },
-                            children: /* @__PURE__ */ jsx41(
+                            children: /* @__PURE__ */ jsx42(
                               MessageCircle3,
                               {
                                 style: { width: 16, height: 16, color: "#64748b" },
@@ -9219,8 +9374,8 @@ function AllNotesModal({
                             )
                           }
                         ),
-                        /* @__PURE__ */ jsxs39("div", { style: { flex: 1, minWidth: 0 }, children: [
-                          /* @__PURE__ */ jsx41(
+                        /* @__PURE__ */ jsxs40("div", { style: { flex: 1, minWidth: 0 }, children: [
+                          /* @__PURE__ */ jsx42(
                             Dialog4.Title,
                             {
                               style: {
@@ -9233,7 +9388,7 @@ function AllNotesModal({
                               children: "Notes"
                             }
                           ),
-                          /* @__PURE__ */ jsxs39(
+                          /* @__PURE__ */ jsxs40(
                             Dialog4.Description,
                             {
                               style: {
@@ -9255,7 +9410,7 @@ function AllNotesModal({
                             }
                           )
                         ] }),
-                        /* @__PURE__ */ jsx41(Dialog4.Close, { asChild: true, children: /* @__PURE__ */ jsx41(
+                        /* @__PURE__ */ jsx42(Dialog4.Close, { asChild: true, children: /* @__PURE__ */ jsx42(
                           "button",
                           {
                             style: {
@@ -9272,14 +9427,14 @@ function AllNotesModal({
                               flexShrink: 0
                             },
                             "aria-label": "Close",
-                            children: /* @__PURE__ */ jsx41(X, { style: { width: 15, height: 15 } })
+                            children: /* @__PURE__ */ jsx42(X, { style: { width: 15, height: 15 } })
                           }
                         ) })
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsxs39("div", { style: { display: "flex", flex: 1, overflow: "hidden" }, children: [
-                    /* @__PURE__ */ jsx41(
+                  /* @__PURE__ */ jsxs40("div", { style: { display: "flex", flex: 1, overflow: "hidden" }, children: [
+                    /* @__PURE__ */ jsx42(
                       "div",
                       {
                         style: {
@@ -9294,7 +9449,7 @@ function AllNotesModal({
                           const meta = getNodeMeta(group.nodeType);
                           const IconComp = meta?.icon || MessageCircle3;
                           const iconColor = meta?.color || "#64748b";
-                          return /* @__PURE__ */ jsxs39(
+                          return /* @__PURE__ */ jsxs40(
                             "button",
                             {
                               onClick: () => setSelectedIdx(i),
@@ -9313,7 +9468,7 @@ function AllNotesModal({
                                 transition: "background 0.1s"
                               },
                               children: [
-                                /* @__PURE__ */ jsx41(
+                                /* @__PURE__ */ jsx42(
                                   "div",
                                   {
                                     style: {
@@ -9327,7 +9482,7 @@ function AllNotesModal({
                                       flexShrink: 0,
                                       transition: "background 0.15s"
                                     },
-                                    children: /* @__PURE__ */ jsx41(
+                                    children: /* @__PURE__ */ jsx42(
                                       IconComp,
                                       {
                                         style: {
@@ -9341,8 +9496,8 @@ function AllNotesModal({
                                     )
                                   }
                                 ),
-                                /* @__PURE__ */ jsxs39("div", { style: { flex: 1, minWidth: 0 }, children: [
-                                  /* @__PURE__ */ jsx41(
+                                /* @__PURE__ */ jsxs40("div", { style: { flex: 1, minWidth: 0 }, children: [
+                                  /* @__PURE__ */ jsx42(
                                     "div",
                                     {
                                       style: {
@@ -9357,7 +9512,7 @@ function AllNotesModal({
                                       children: group.name
                                     }
                                   ),
-                                  /* @__PURE__ */ jsxs39(
+                                  /* @__PURE__ */ jsxs40(
                                     "div",
                                     {
                                       style: {
@@ -9380,7 +9535,7 @@ function AllNotesModal({
                                     }
                                   )
                                 ] }),
-                                /* @__PURE__ */ jsx41(
+                                /* @__PURE__ */ jsx42(
                                   ChevronRight,
                                   {
                                     style: {
@@ -9399,7 +9554,7 @@ function AllNotesModal({
                         })
                       }
                     ),
-                    /* @__PURE__ */ jsx41(
+                    /* @__PURE__ */ jsx42(
                       "div",
                       {
                         style: {
@@ -9408,8 +9563,8 @@ function AllNotesModal({
                           display: "flex",
                           flexDirection: "column"
                         },
-                        children: selected && /* @__PURE__ */ jsxs39(Fragment10, { children: [
-                          /* @__PURE__ */ jsxs39(
+                        children: selected && /* @__PURE__ */ jsxs40(Fragment11, { children: [
+                          /* @__PURE__ */ jsxs40(
                             "div",
                             {
                               style: {
@@ -9422,7 +9577,7 @@ function AllNotesModal({
                                 background: "#fafbfc"
                               },
                               children: [
-                                /* @__PURE__ */ jsxs39(
+                                /* @__PURE__ */ jsxs40(
                                   "div",
                                   {
                                     style: {
@@ -9435,7 +9590,7 @@ function AllNotesModal({
                                         const meta = getNodeMeta(selected.nodeType);
                                         const Icon = meta?.icon || MessageCircle3;
                                         const color = meta?.color || "#64748b";
-                                        return /* @__PURE__ */ jsx41(
+                                        return /* @__PURE__ */ jsx42(
                                           "div",
                                           {
                                             style: {
@@ -9448,7 +9603,7 @@ function AllNotesModal({
                                               justifyContent: "center",
                                               flexShrink: 0
                                             },
-                                            children: /* @__PURE__ */ jsx41(
+                                            children: /* @__PURE__ */ jsx42(
                                               Icon,
                                               {
                                                 style: {
@@ -9462,8 +9617,8 @@ function AllNotesModal({
                                           }
                                         );
                                       })(),
-                                      /* @__PURE__ */ jsxs39("div", { children: [
-                                        /* @__PURE__ */ jsx41(
+                                      /* @__PURE__ */ jsxs40("div", { children: [
+                                        /* @__PURE__ */ jsx42(
                                           "div",
                                           {
                                             style: {
@@ -9475,7 +9630,7 @@ function AllNotesModal({
                                             children: selected.name
                                           }
                                         ),
-                                        /* @__PURE__ */ jsxs39(
+                                        /* @__PURE__ */ jsxs40(
                                           "div",
                                           {
                                             style: {
@@ -9497,7 +9652,7 @@ function AllNotesModal({
                                     ]
                                   }
                                 ),
-                                /* @__PURE__ */ jsxs39(
+                                /* @__PURE__ */ jsxs40(
                                   "button",
                                   {
                                     onClick: () => handleNavigate(selected.nodeId),
@@ -9524,7 +9679,7 @@ function AllNotesModal({
                                       e.currentTarget.style.color = "#475569";
                                     },
                                     children: [
-                                      /* @__PURE__ */ jsx41(Locate, { style: { width: 12, height: 12 } }),
+                                      /* @__PURE__ */ jsx42(Locate, { style: { width: 12, height: 12 } }),
                                       "Find on canvas"
                                     ]
                                   }
@@ -9532,7 +9687,7 @@ function AllNotesModal({
                               ]
                             }
                           ),
-                          /* @__PURE__ */ jsx41(
+                          /* @__PURE__ */ jsx42(
                             "div",
                             {
                               style: {
@@ -9543,7 +9698,7 @@ function AllNotesModal({
                                 flexDirection: "column",
                                 gap: 10
                               },
-                              children: selected.notes.map((note, i) => /* @__PURE__ */ jsx41(NoteCard2, { note, index: i }, i))
+                              children: selected.notes.map((note, i) => /* @__PURE__ */ jsx42(NoteCard2, { note, index: i }, i))
                             }
                           )
                         ] })
@@ -9562,7 +9717,7 @@ function AllNotesModal({
 
 // src/components/NodeGraph.tsx
 import dagre3 from "dagre";
-import { Fragment as Fragment11, jsx as jsx42, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx43, jsxs as jsxs41 } from "react/jsx-runtime";
 var POSITION_CHANGE_THRESHOLD = 1;
 var LARGE_GRAPH_NODE_THRESHOLD = 30;
 var NODE_ORIGIN = [0.1, 0.1];
@@ -9573,29 +9728,34 @@ var MINIMAP_STYLE = {
 };
 var LAYOUT_CHANGE_PANEL_STYLE_WITH_WALKTHROUGH = {
   marginBottom: "20px",
-  marginLeft: "410px"
+  marginLeft: "420px"
 };
 var LAYOUT_CHANGE_PANEL_STYLE_DEFAULT = { marginLeft: "60px" };
 var LEGEND_PANEL_STYLE_WITH_MINIMAP = { marginRight: "230px" };
-var LegendPanel = memo34(function LegendPanel2({
+var EXPANDED_WRAPPER_TYPES = /* @__PURE__ */ new Set([
+  "flowExpanded",
+  "messageGroupExpanded"
+]);
+var isExpandedWrapper = (type) => type != null && EXPANDED_WRAPPER_TYPES.has(type);
+var LegendPanel = memo35(function LegendPanel2({
   legend,
   showMinimap,
   onLegendClick
 }) {
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     Panel,
     {
       position: "bottom-right",
       style: showMinimap ? LEGEND_PANEL_STYLE_WITH_MINIMAP : void 0,
-      children: /* @__PURE__ */ jsx42("div", { className: "bg-[rgb(var(--ec-card-bg))] border border-[rgb(var(--ec-page-border))] font-light px-4 text-[12px] shadow-md py-1 rounded-md", children: /* @__PURE__ */ jsx42("ul", { className: "m-0 p-0 ", children: Object.entries(legend).map(
-        ([key, { count, colorClass, groupId }]) => /* @__PURE__ */ jsxs40(
+      children: /* @__PURE__ */ jsx43("div", { className: "bg-[rgb(var(--ec-card-bg))] border border-[rgb(var(--ec-page-border))] font-light px-4 text-[12px] shadow-md py-1 rounded-md", children: /* @__PURE__ */ jsx43("ul", { className: "m-0 p-0 ", children: Object.entries(legend).map(
+        ([key, { count, colorClass, groupId }]) => /* @__PURE__ */ jsxs41(
           "li",
           {
             className: "flex space-x-2 items-center text-[10px] cursor-pointer text-[rgb(var(--ec-page-text))] hover:text-[rgb(var(--ec-accent))] hover:underline",
             onClick: () => onLegendClick(key, groupId),
             children: [
-              /* @__PURE__ */ jsx42("span", { className: `w-2 h-2 block ${colorClass}` }),
-              /* @__PURE__ */ jsxs40("span", { className: "block capitalize", children: [
+              /* @__PURE__ */ jsx43("span", { className: `w-2 h-2 block ${colorClass}` }),
+              /* @__PURE__ */ jsxs41("span", { className: "block capitalize", children: [
                 key,
                 " (",
                 count,
@@ -9717,10 +9877,10 @@ var NodeGraphBuilder = ({
   }, []);
   const nodeTypes = useMemo18(() => {
     const wrapWithContextMenu = (Component) => {
-      const Wrapped = memo34((props) => {
+      const Wrapped = memo35((props) => {
         const items = props.data?.contextMenu;
-        if (!items?.length) return /* @__PURE__ */ jsx42(Component, { ...props });
-        return /* @__PURE__ */ jsx42(NodeContextMenu_default, { items, children: /* @__PURE__ */ jsx42(Component, { ...props }) });
+        if (!items?.length) return /* @__PURE__ */ jsx43(Component, { ...props });
+        return /* @__PURE__ */ jsx43(NodeContextMenu_default, { items, children: /* @__PURE__ */ jsx43(Component, { ...props }) });
       });
       Wrapped.displayName = `WithContextMenu(${Component.displayName || Component.name || "Component"})`;
       return Wrapped;
@@ -9754,10 +9914,11 @@ var NodeGraphBuilder = ({
       "data-product": wrapWithContextMenu(DataProduct_default),
       "data-products": wrapWithContextMenu(DataProduct_default),
       group: GroupNode_default,
-      note: memo34((props) => /* @__PURE__ */ jsx42(NoteNode_default, { ...props, readOnly: true })),
+      note: memo35((props) => /* @__PURE__ */ jsx43(NoteNode_default, { ...props, readOnly: true })),
       field: wrapWithContextMenu(FieldNode_default),
       messageGroup: MessageGroupNode_default,
-      messageGroupExpanded: MessageGroupExpandedNode_default
+      messageGroupExpanded: MessageGroupExpandedNode_default,
+      flowExpanded: FlowExpandedNode_default
     };
   }, []);
   const edgeTypes2 = useMemo18(
@@ -9887,6 +10048,23 @@ var NodeGraphBuilder = ({
   edgesRef.current = edges;
   const hideChannelsRef = useRef6(hideChannels);
   hideChannelsRef.current = hideChannels;
+  const wrapperNodeIds = useMemo18(() => {
+    const ids = /* @__PURE__ */ new Set();
+    nodes.forEach((n) => {
+      if (isExpandedWrapper(n.type)) ids.add(n.id);
+    });
+    return ids;
+  }, [nodes]);
+  const walkthroughNodes = useMemo18(
+    () => wrapperNodeIds.size === 0 ? nodes : nodes.filter((n) => !wrapperNodeIds.has(n.id)),
+    [nodes, wrapperNodeIds]
+  );
+  const walkthroughEdges = useMemo18(
+    () => wrapperNodeIds.size === 0 ? edges : edges.filter(
+      (e) => !wrapperNodeIds.has(e.source) && !wrapperNodeIds.has(e.target)
+    ),
+    [edges, wrapperNodeIds]
+  );
   const animateLayout = useCallback12(() => {
     const wrapper = reactFlowWrapperRef.current;
     if (!wrapper) return;
@@ -9922,6 +10100,9 @@ var NodeGraphBuilder = ({
     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);
@@ -9941,10 +10122,62 @@ var NodeGraphBuilder = ({
     });
     return positioned;
   }, []);
+  const layoutSubFlowChildren = useCallback12(
+    (children, edges2, sizeOf, opts) => {
+      const { padding, headerH, fallbackW = 240, fallbackH = 120 } = opts;
+      const g = new dagre3.graphlib.Graph();
+      g.setGraph({ rankdir: "LR", ranksep: 360, nodesep: 200 });
+      g.setDefaultEdgeLabel(() => ({}));
+      const childIds = new Set(children.map((c) => c.id));
+      children.forEach((c) => {
+        const { w, h } = sizeOf(c);
+        g.setNode(c.id, { width: w, height: h });
+      });
+      edges2.forEach((e) => {
+        if (childIds.has(e.source) && childIds.has(e.target)) {
+          g.setEdge(e.source, e.target);
+        }
+      });
+      dagre3.layout(g);
+      let minX = Infinity;
+      let minY = Infinity;
+      let maxX = -Infinity;
+      let maxY = -Infinity;
+      const positions = /* @__PURE__ */ new Map();
+      children.forEach((c) => {
+        const pos = g.node(c.id);
+        if (!pos) return;
+        const x = pos.x - pos.width / 2;
+        const y = pos.y - pos.height / 2;
+        positions.set(c.id, { x, y });
+        minX = Math.min(minX, x);
+        minY = Math.min(minY, y);
+        maxX = Math.max(maxX, x + pos.width);
+        maxY = Math.max(maxY, y + pos.height);
+      });
+      const offsetX = padding - (Number.isFinite(minX) ? minX : 0);
+      const offsetY = headerH + padding - (Number.isFinite(minY) ? minY : 0);
+      const positioned = children.map((c) => {
+        const p = positions.get(c.id);
+        if (!p) return c;
+        return { ...c, position: { x: p.x + offsetX, y: p.y + offsetY } };
+      });
+      const finalPositions = /* @__PURE__ */ new Map();
+      positions.forEach(
+        (p, id) => finalPositions.set(id, { x: p.x + offsetX, y: p.y + offsetY })
+      );
+      const width = Number.isFinite(minX) ? maxX - minX + padding * 2 : fallbackW + padding * 2;
+      const height = Number.isFinite(minY) ? maxY - minY + headerH + padding * 2 : fallbackH + headerH + padding * 2;
+      return { positioned, positions: finalPositions, width, height };
+    },
+    []
+  );
   const handleCollapseGroup = useCallback12(
     (e) => {
       const target = e.target;
-      const collapseBtn = target.closest(".ec-collapse-group-btn");
+      const collapseBtn = target.closest(
+        ".ec-collapse-group-btn, .ec-collapse-flow-btn"
+      );
       if (!collapseBtn) return;
       e.stopPropagation();
       const nodeWrapper = target.closest("[data-id]");
@@ -9954,23 +10187,26 @@ var NodeGraphBuilder = ({
       const currentNodes = nodesRef.current;
       const currentEdges = edgesRef.current;
       const expandedNode = currentNodes.find((n) => n.id === groupNodeId);
-      if (!expandedNode || expandedNode.type !== "messageGroupExpanded") return;
+      if (!expandedNode || !isExpandedWrapper(expandedNode.type)) return;
+      const stashed = expandedNode.data.__preExpansion;
+      const originalNode = stashed?.node ?? initialNodes.find(
+        (n) => n.id === groupNodeId && (n.type === "messageGroup" || n.type === "flows" || n.type === "flow")
+      );
+      if (!originalNode) return;
+      const originalEdges = stashed?.edges ?? initialEdges.filter(
+        (edge) => edge.source === groupNodeId || edge.target === groupNodeId
+      );
       const childNodeIds = new Set(
         currentNodes.filter((n) => n.parentId === groupNodeId).map((n) => n.id)
       );
-      const originalNode = initialNodes.find(
-        (n) => n.id === groupNodeId && n.type === "messageGroup"
-      );
-      if (!originalNode) return;
       const originalData = originalNode.data;
-      const initialNodeIds = new Set(initialNodes.map((n) => n.id));
+      const preExistingIds = new Set(
+        stashed ? stashed.nodeIds : initialNodes.map((n) => n.id)
+      );
       const downstreamNodeIds = new Set(
-        (originalData.expandedNodes || []).map((n) => n.id).filter((id) => !initialNodeIds.has(id))
+        (originalData.expandedNodes || []).map((n) => n.id).filter((id) => !preExistingIds.has(id))
       );
       const isDownstreamEdge = (edge) => edge.id.startsWith(`${groupNodeId}__`);
-      const originalEdges = initialEdges.filter(
-        (edge) => edge.source === groupNodeId || edge.target === groupNodeId
-      );
       animateLayout();
       setNodes((prev) => {
         const nextEdges = currentEdges.filter(
@@ -9993,6 +10229,9 @@ var NodeGraphBuilder = ({
         );
         return [...without, ...originalEdges];
       });
+      requestAnimationFrame(() => {
+        fitView({ duration: 400, padding: 0.2 });
+      });
     },
     [
       initialNodes,
@@ -10000,7 +10239,8 @@ var NodeGraphBuilder = ({
       setNodes,
       setEdges,
       relayoutGraph,
-      animateLayout
+      animateLayout,
+      fitView
     ]
   );
   useEffect8(() => {
@@ -10092,9 +10332,10 @@ var NodeGraphBuilder = ({
       const isEntityVisualizer = nodesRef.current.some(
         (n) => n.type === "entities"
       );
-      if (isFlow || isEntityVisualizer) return;
+      const isExpandableFlow = (node.type === "flows" || node.type === "flow") && Array.isArray(node.data?.expandedNodes) && node.data.expandedNodes.length > 0;
+      if ((isFlow || isEntityVisualizer) && !isExpandableFlow) return;
       if (node.type === "domain" || node.type === "domains") return;
-      if (node.type === "messageGroupExpanded") return;
+      if (isExpandedWrapper(node.type)) return;
       if (node.type === "messageGroup") {
         const groupData = node.data;
         const groupNodeId = node.id;
@@ -10102,17 +10343,24 @@ var NodeGraphBuilder = ({
         const childCount = groupData.messages?.length || 0;
         const containerWidth = 380;
         const containerHeight = childCount * 190 + 100;
+        const preExpansionEdges = edgesRef.current.filter(
+          (e) => e.source === groupNodeId || e.target === groupNodeId
+        );
+        const preExpansionNodeIds = nodesRef.current.map((n) => n.id);
         const expandedContainerNode = {
           id: groupNodeId,
-          // reuse the same ID
           type: "messageGroupExpanded",
           position: node.position,
-          // will be recalculated by dagre
           data: {
             groupName: groupData.groupName,
             direction: groupData.direction,
             messageCount: childCount,
-            onCollapse: groupNodeId
+            onCollapse: groupNodeId,
+            __preExpansion: {
+              node,
+              edges: preExpansionEdges,
+              nodeIds: preExpansionNodeIds
+            }
           },
           style: {
             width: containerWidth,
@@ -10237,6 +10485,170 @@ var NodeGraphBuilder = ({
             });
           });
         });
+        requestAnimationFrame(() => {
+          fitView({ duration: 400, padding: 0.2 });
+        });
+        return;
+      }
+      if (isExpandableFlow) {
+        const flowData = node.data;
+        const flowNodeId = node.id;
+        const subFlowNodes = flowData.expandedNodes || [];
+        const subFlowEdges = flowData.expandedEdges || [];
+        const initialChildNodes = subFlowNodes.map((child) => ({
+          ...child,
+          parentId: flowNodeId,
+          extent: "parent",
+          position: { x: 0, y: 0 }
+        }));
+        const CHILD_PADDING = 60;
+        const HEADER_H = 60;
+        const EST_W = 240;
+        const EST_H = 120;
+        const {
+          positioned: childNodes,
+          width: containerWidth,
+          height: containerHeight
+        } = layoutSubFlowChildren(
+          initialChildNodes,
+          subFlowEdges,
+          () => ({ w: EST_W, h: EST_H }),
+          { padding: CHILD_PADDING, headerH: HEADER_H }
+        );
+        const preExpansionEdges = edgesRef.current.filter(
+          (e) => e.source === flowNodeId || e.target === flowNodeId
+        );
+        const preExpansionNodeIds = nodesRef.current.map((n) => n.id);
+        const expandedContainerNode = {
+          id: flowNodeId,
+          type: "flowExpanded",
+          position: node.position,
+          data: {
+            flowName: flowData.flow?.name || flowData.flow?.data?.name,
+            version: flowData.flow?.version || flowData.flow?.data?.version,
+            __preExpansion: {
+              node,
+              edges: preExpansionEdges,
+              nodeIds: preExpansionNodeIds
+            }
+          },
+          style: {
+            width: containerWidth,
+            height: containerHeight,
+            background: "transparent",
+            border: "none",
+            padding: 0,
+            overflow: "visible"
+          }
+        };
+        const childIds = new Set(childNodes.map((n) => n.id));
+        const hasIncoming = /* @__PURE__ */ new Set();
+        const hasOutgoing = /* @__PURE__ */ new Set();
+        for (const e of subFlowEdges) {
+          if (childIds.has(e.target)) hasIncoming.add(e.target);
+          if (childIds.has(e.source)) hasOutgoing.add(e.source);
+        }
+        const entryChildIds = childNodes.map((n) => n.id).filter((id) => !hasIncoming.has(id));
+        const terminalChildIds = childNodes.map((n) => n.id).filter((id) => !hasOutgoing.has(id));
+        const currentEdges = edgesRef.current;
+        const predecessorEdges = currentEdges.filter(
+          (e) => e.target === flowNodeId
+        );
+        const successorEdges = currentEdges.filter(
+          (e) => e.source === flowNodeId
+        );
+        const stitchedPredecessors = [];
+        for (const e of predecessorEdges) {
+          for (const entryId of entryChildIds.length > 0 ? entryChildIds : [flowNodeId]) {
+            stitchedPredecessors.push({
+              ...e,
+              id: `${e.id}__to__${entryId}`,
+              target: entryId
+            });
+          }
+        }
+        const stitchedSuccessors = [];
+        for (const e of successorEdges) {
+          for (const terminalId of terminalChildIds.length > 0 ? terminalChildIds : [flowNodeId]) {
+            stitchedSuccessors.push({
+              ...e,
+              id: `${e.id}__from__${terminalId}`,
+              source: terminalId
+            });
+          }
+        }
+        animateLayout();
+        setNodes((prev) => {
+          const without = prev.filter((n) => n.id !== flowNodeId);
+          const next = [...without, expandedContainerNode, ...childNodes];
+          const nextEdges = [
+            ...currentEdges.filter(
+              (e) => e.source !== flowNodeId && e.target !== flowNodeId
+            ),
+            ...subFlowEdges,
+            ...stitchedPredecessors,
+            ...stitchedSuccessors
+          ];
+          return relayoutGraph(next, nextEdges);
+        });
+        setEdges((prev) => {
+          const without = prev.filter(
+            (e) => e.source !== flowNodeId && e.target !== flowNodeId
+          );
+          return [
+            ...without,
+            ...subFlowEdges,
+            ...stitchedPredecessors,
+            ...stitchedSuccessors
+          ];
+        });
+        requestAnimationFrame(() => {
+          const currentChildren = nodesRef.current.filter(
+            (n) => n.parentId === flowNodeId
+          );
+          if (currentChildren.length === 0) return;
+          const measurements = /* @__PURE__ */ new Map();
+          currentChildren.forEach((n) => {
+            const el = document.querySelector(
+              `[data-id="${n.id}"]`
+            );
+            measurements.set(n.id, {
+              w: el?.offsetWidth ?? EST_W,
+              h: el?.offsetHeight ?? EST_H
+            });
+          });
+          const {
+            positions,
+            width: actualContainerW,
+            height: actualContainerH
+          } = layoutSubFlowChildren(
+            currentChildren,
+            subFlowEdges,
+            (n) => measurements.get(n.id) ?? { w: EST_W, h: EST_H },
+            { padding: CHILD_PADDING, headerH: HEADER_H }
+          );
+          setNodes(
+            (prev) => prev.map((n) => {
+              if (n.id === flowNodeId) {
+                return {
+                  ...n,
+                  style: {
+                    ...n.style,
+                    width: actualContainerW,
+                    height: actualContainerH
+                  }
+                };
+              }
+              if (n.parentId !== flowNodeId) return n;
+              const p = positions.get(n.id);
+              if (!p) return n;
+              return { ...n, position: { x: p.x, y: p.y } };
+            })
+          );
+        });
+        requestAnimationFrame(() => {
+          fitView({ duration: 400, padding: 0.2 });
+        });
         return;
       }
       setFocusedNodeId(node.id);
@@ -10670,7 +11082,7 @@ var NodeGraphBuilder = ({
     () => edges.some((edge) => edge.type === "flow-edge"),
     [edges]
   );
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     "div",
     {
       ref: reactFlowWrapperRef,
@@ -10682,22 +11094,22 @@ var NodeGraphBuilder = ({
         display: "flex",
         flexDirection: "column"
       },
-      children: /* @__PURE__ */ jsxs40(PortalContainerProvider, { value: reactFlowWrapperRef.current, children: [
-        isMermaidView ? /* @__PURE__ */ jsxs40(Fragment11, { children: [
-          /* @__PURE__ */ jsxs40("div", { className: "w-full pr-6 flex space-x-2 justify-between items-center bg-[rgb(var(--ec-page-bg))] border-b border-[rgb(var(--ec-page-border))] p-4", children: [
-            /* @__PURE__ */ jsx42("div", { className: "flex space-x-2 ml-4", children: /* @__PURE__ */ jsxs40(DropdownMenu2.Root, { children: [
-              /* @__PURE__ */ jsx42(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs40(
+      children: /* @__PURE__ */ jsxs41(PortalContainerProvider, { value: reactFlowWrapperRef.current, children: [
+        isMermaidView ? /* @__PURE__ */ jsxs41(Fragment12, { children: [
+          /* @__PURE__ */ jsxs41("div", { className: "w-full pr-6 flex space-x-2 justify-between items-center bg-[rgb(var(--ec-page-bg))] border-b border-[rgb(var(--ec-page-border))] p-4", children: [
+            /* @__PURE__ */ jsx43("div", { className: "flex space-x-2 ml-4", children: /* @__PURE__ */ jsxs41(DropdownMenu2.Root, { children: [
+              /* @__PURE__ */ jsx43(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs41(
                 "button",
                 {
                   className: "py-2.5 px-4 bg-[rgb(var(--ec-page-bg))] hover:bg-[rgb(var(--ec-accent-subtle)/0.4)] border border-[rgb(var(--ec-page-border))] rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[rgb(var(--ec-accent))] flex items-center gap-3 transition-all duration-200 hover:border-[rgb(var(--ec-accent)/0.3)] group whitespace-nowrap",
                   "aria-label": "Open menu",
                   children: [
-                    title && /* @__PURE__ */ jsx42("span", { className: "text-base font-medium text-[rgb(var(--ec-page-text))] leading-tight", children: title }),
-                    /* @__PURE__ */ jsx42(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" })
+                    title && /* @__PURE__ */ jsx43("span", { className: "text-base font-medium text-[rgb(var(--ec-page-text))] leading-tight", children: title }),
+                    /* @__PURE__ */ jsx43(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__ */ jsx42(DropdownMenu2.Portal, { container: reactFlowWrapperRef.current, children: /* @__PURE__ */ jsxs40(
+              /* @__PURE__ */ jsx43(DropdownMenu2.Portal, { container: reactFlowWrapperRef.current, children: /* @__PURE__ */ jsxs41(
                 DropdownMenu2.Content,
                 {
                   className: "min-w-56 bg-[rgb(var(--ec-page-bg))] border border-[rgb(var(--ec-page-border))] rounded-lg shadow-xl z-50 py-1.5 animate-in fade-in zoom-in-95 duration-200",
@@ -10705,8 +11117,8 @@ var NodeGraphBuilder = ({
                   align: "end",
                   alignOffset: -180,
                   children: [
-                    /* @__PURE__ */ jsx42(DropdownMenu2.Arrow, { className: "fill-[rgb(var(--ec-page-bg))] stroke-[rgb(var(--ec-page-border))] stroke-1" }),
-                    /* @__PURE__ */ jsx42(
+                    /* @__PURE__ */ jsx43(DropdownMenu2.Arrow, { className: "fill-[rgb(var(--ec-page-bg))] stroke-[rgb(var(--ec-page-border))] stroke-1" }),
+                    /* @__PURE__ */ jsx43(
                       VisualizerDropdownContent_default,
                       {
                         isMermaidView,
@@ -10736,7 +11148,7 @@ var NodeGraphBuilder = ({
                 }
               ) })
             ] }) }),
-            mode === "full" && showSearch && /* @__PURE__ */ jsx42("div", { className: "flex justify-end items-center gap-2", children: !isMermaidView && /* @__PURE__ */ jsx42("div", { className: "w-96", children: /* @__PURE__ */ jsx42(
+            mode === "full" && showSearch && /* @__PURE__ */ jsx43("div", { className: "flex justify-end items-center gap-2", children: !isMermaidView && /* @__PURE__ */ jsx43("div", { className: "w-96", children: /* @__PURE__ */ jsx43(
               VisualiserSearch_default,
               {
                 ref: searchRef,
@@ -10746,7 +11158,7 @@ var NodeGraphBuilder = ({
               }
             ) }) })
           ] }),
-          /* @__PURE__ */ jsx42("div", { className: "flex-1 overflow-hidden relative", children: /* @__PURE__ */ jsx42(
+          /* @__PURE__ */ jsx43("div", { className: "flex-1 overflow-hidden relative", children: /* @__PURE__ */ jsx43(
             MermaidView_default,
             {
               nodes,
@@ -10754,7 +11166,7 @@ var NodeGraphBuilder = ({
               maxTextSize
             }
           ) })
-        ] }) : /* @__PURE__ */ jsxs40(
+        ] }) : /* @__PURE__ */ jsxs41(
           ReactFlow2,
           {
             nodeTypes,
@@ -10780,30 +11192,30 @@ var NodeGraphBuilder = ({
             zoomOnScroll,
             className: "relative",
             children: [
-              /* @__PURE__ */ jsxs40(
+              /* @__PURE__ */ jsxs41(
                 Panel,
                 {
                   position: "top-center",
                   className: "w-full pr-6 pointer-events-none",
                   children: [
-                    /* @__PURE__ */ jsxs40("div", { className: "flex space-x-2 justify-between items-center pointer-events-auto", children: [
-                      /* @__PURE__ */ jsx42("div", { className: "flex space-x-2 ml-4", children: /* @__PURE__ */ jsxs40(DropdownMenu2.Root, { children: [
-                        /* @__PURE__ */ jsx42(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs40(
+                    /* @__PURE__ */ jsxs41("div", { className: "flex space-x-2 justify-between items-center pointer-events-auto", children: [
+                      /* @__PURE__ */ jsx43("div", { className: "flex space-x-2 ml-4", children: /* @__PURE__ */ jsxs41(DropdownMenu2.Root, { children: [
+                        /* @__PURE__ */ jsx43(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs41(
                           "button",
                           {
                             className: "py-2.5 px-4 bg-[rgb(var(--ec-page-bg))] hover:bg-[rgb(var(--ec-accent-subtle)/0.4)] border border-[rgb(var(--ec-page-border))] rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[rgb(var(--ec-accent))] flex items-center gap-3 transition-all duration-200 hover:border-[rgb(var(--ec-accent)/0.3)] group whitespace-nowrap",
                             "aria-label": "Open menu",
                             children: [
-                              title && /* @__PURE__ */ jsx42("span", { className: "text-base font-medium text-[rgb(var(--ec-page-text))] leading-tight", children: title }),
-                              /* @__PURE__ */ jsx42(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" })
+                              title && /* @__PURE__ */ jsx43("span", { className: "text-base font-medium text-[rgb(var(--ec-page-text))] leading-tight", children: title }),
+                              /* @__PURE__ */ jsx43(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__ */ jsx42(
+                        /* @__PURE__ */ jsx43(
                           DropdownMenu2.Portal,
                           {
                             container: reactFlowWrapperRef.current,
-                            children: /* @__PURE__ */ jsxs40(
+                            children: /* @__PURE__ */ jsxs41(
                               DropdownMenu2.Content,
                               {
                                 className: "min-w-56 bg-[rgb(var(--ec-page-bg))] border border-[rgb(var(--ec-page-border))] rounded-lg shadow-xl z-50 py-1.5 animate-in fade-in zoom-in-95 duration-200",
@@ -10811,8 +11223,8 @@ var NodeGraphBuilder = ({
                                 align: "end",
                                 alignOffset: -180,
                                 children: [
-                                  /* @__PURE__ */ jsx42(DropdownMenu2.Arrow, { className: "fill-[rgb(var(--ec-page-bg))] stroke-[rgb(var(--ec-page-border))] stroke-1" }),
-                                  /* @__PURE__ */ jsx42(
+                                  /* @__PURE__ */ jsx43(DropdownMenu2.Arrow, { className: "fill-[rgb(var(--ec-page-bg))] stroke-[rgb(var(--ec-page-border))] stroke-1" }),
+                                  /* @__PURE__ */ jsx43(
                                     VisualizerDropdownContent_default,
                                     {
                                       isMermaidView,
@@ -10846,7 +11258,7 @@ var NodeGraphBuilder = ({
                           }
                         )
                       ] }) }),
-                      mode === "full" && showSearch && /* @__PURE__ */ jsx42("div", { className: "flex justify-end items-center gap-2", children: !isMermaidView && /* @__PURE__ */ jsx42("div", { className: "w-96", children: /* @__PURE__ */ jsx42(
+                      mode === "full" && showSearch && /* @__PURE__ */ jsx43("div", { className: "flex justify-end items-center gap-2", children: !isMermaidView && /* @__PURE__ */ jsx43("div", { className: "w-96", children: /* @__PURE__ */ jsx43(
                         VisualiserSearch_default,
                         {
                           ref: searchRef,
@@ -10856,9 +11268,9 @@ var NodeGraphBuilder = ({
                         }
                       ) }) })
                     ] }),
-                    links.length > 0 && /* @__PURE__ */ jsx42("div", { className: "flex justify-end mt-3", children: /* @__PURE__ */ jsxs40("div", { className: "relative flex items-center -mt-1", children: [
-                      /* @__PURE__ */ jsx42("span", { className: "absolute left-2 pointer-events-none flex items-center h-full", children: /* @__PURE__ */ jsx42(HistoryIcon, { className: "h-4 w-4 text-[rgb(var(--ec-page-text-muted))]" }) }),
-                      /* @__PURE__ */ jsx42(
+                    links.length > 0 && /* @__PURE__ */ jsx43("div", { className: "flex justify-end mt-3", children: /* @__PURE__ */ jsxs41("div", { className: "relative flex items-center -mt-1", children: [
+                      /* @__PURE__ */ jsx43("span", { className: "absolute left-2 pointer-events-none flex items-center h-full", children: /* @__PURE__ */ jsx43(HistoryIcon, { className: "h-4 w-4 text-[rgb(var(--ec-page-text-muted))]" }) }),
+                      /* @__PURE__ */ jsx43(
                         "select",
                         {
                           value: links.find(
@@ -10873,10 +11285,10 @@ var NodeGraphBuilder = ({
                           },
                           className: "appearance-none pl-7 pr-6 py-0 text-[14px] bg-[rgb(var(--ec-card-bg))] text-[rgb(var(--ec-page-text))] rounded-md border border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-page-border)/0.5)] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[rgb(var(--ec-accent))]",
                           style: { minWidth: 120, height: "26px" },
-                          children: links.map((link) => /* @__PURE__ */ jsx42("option", { value: link.url, children: link.label }, link.url))
+                          children: links.map((link) => /* @__PURE__ */ jsx43("option", { value: link.url, children: link.label }, link.url))
                         }
                       ),
-                      /* @__PURE__ */ jsx42("span", { className: "absolute right-2 pointer-events-none", children: /* @__PURE__ */ jsx42(
+                      /* @__PURE__ */ jsx43("span", { className: "absolute right-2 pointer-events-none", children: /* @__PURE__ */ jsx43(
                         "svg",
                         {
                           className: "w-4 h-4 text-[rgb(var(--ec-page-text-muted))]",
@@ -10884,7 +11296,7 @@ var NodeGraphBuilder = ({
                           stroke: "currentColor",
                           strokeWidth: "2",
                           viewBox: "0 0 24 24",
-                          children: /* @__PURE__ */ jsx42(
+                          children: /* @__PURE__ */ jsx43(
                             "path",
                             {
                               strokeLinecap: "round",
@@ -10898,9 +11310,9 @@ var NodeGraphBuilder = ({
                   ]
                 }
               ),
-              includeBackground && /* @__PURE__ */ jsx42(Background2, { color: "var(--ec-bg-dots)", gap: 16 }),
-              includeBackground && /* @__PURE__ */ jsx42(Controls2, {}),
-              showMinimap && /* @__PURE__ */ jsx42(
+              includeBackground && /* @__PURE__ */ jsx43(Background2, { color: "var(--ec-bg-dots)", gap: 16 }),
+              includeBackground && /* @__PURE__ */ jsx43(Controls2, {}),
+              showMinimap && /* @__PURE__ */ jsx43(
                 MiniMap,
                 {
                   nodeStrokeWidth: 3,
@@ -10909,24 +11321,24 @@ var NodeGraphBuilder = ({
                   style: MINIMAP_STYLE
                 }
               ),
-              isFlowVisualization && showFlowWalkthrough && /* @__PURE__ */ jsx42(Panel, { position: "bottom-left", children: /* @__PURE__ */ jsx42(
+              isFlowVisualization && showFlowWalkthrough && /* @__PURE__ */ jsx43(Panel, { position: "bottom-left", children: /* @__PURE__ */ jsx43(
                 StepWalkthrough_default,
                 {
-                  nodes,
-                  edges,
+                  nodes: walkthroughNodes,
+                  edges: walkthroughEdges,
                   isFlowVisualization,
                   onStepChange: handleStepChange,
                   mode
                 }
               ) }),
-              isDevMode && hasLayoutChanges && /* @__PURE__ */ jsx42(
+              isDevMode && hasLayoutChanges && /* @__PURE__ */ jsx43(
                 Panel,
                 {
                   position: "bottom-left",
                   style: isFlowVisualization && showFlowWalkthrough ? LAYOUT_CHANGE_PANEL_STYLE_WITH_WALKTHROUGH : LAYOUT_CHANGE_PANEL_STYLE_DEFAULT,
-                  children: /* @__PURE__ */ jsxs40("div", { className: "bg-[rgb(var(--ec-card-bg))] border border-[rgb(var(--ec-page-border))] rounded-lg shadow-md px-3 py-2 flex items-center gap-3", children: [
-                    /* @__PURE__ */ jsx42("span", { className: "text-xs text-[rgb(var(--ec-page-text-muted))]", children: "Layout changed" }),
-                    /* @__PURE__ */ jsx42(
+                  children: /* @__PURE__ */ jsxs41("div", { className: "bg-[rgb(var(--ec-card-bg))] border border-[rgb(var(--ec-page-border))] rounded-lg shadow-md px-3 py-2 flex items-center gap-3", children: [
+                    /* @__PURE__ */ jsx43("span", { className: "text-xs text-[rgb(var(--ec-page-text-muted))]", children: "Layout changed" }),
+                    /* @__PURE__ */ jsx43(
                       "button",
                       {
                         onClick: handleQuickSaveLayout,
@@ -10938,7 +11350,7 @@ var NodeGraphBuilder = ({
                   ] })
                 }
               ),
-              includeKey && /* @__PURE__ */ jsx42(
+              includeKey && /* @__PURE__ */ jsx43(
                 LegendPanel,
                 {
                   legend,
@@ -10949,14 +11361,14 @@ var NodeGraphBuilder = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx42(
+        /* @__PURE__ */ jsx43(
           StudioModal_default,
           {
             isOpen: isStudioModalOpen || false,
             onClose: () => setIsStudioModalOpen(false)
           }
         ),
-        /* @__PURE__ */ jsx42(
+        /* @__PURE__ */ jsx43(
           FocusModeModal_default,
           {
             isOpen: focusModeOpen,
@@ -10970,7 +11382,7 @@ var NodeGraphBuilder = ({
             edgeTypes: edgeTypes2
           }
         ),
-        /* @__PURE__ */ jsx42(
+        /* @__PURE__ */ jsx43(
           AllNotesModal,
           {
             noteGroups: allNoteGroups,
@@ -10979,8 +11391,8 @@ var NodeGraphBuilder = ({
             nodes
           }
         ),
-        isShareModalOpen && /* @__PURE__ */ jsxs40(Fragment11, { children: [
-          /* @__PURE__ */ jsx42(
+        isShareModalOpen && /* @__PURE__ */ jsxs41(Fragment12, { children: [
+          /* @__PURE__ */ jsx43(
             "div",
             {
               className: "fixed inset-0 bg-black/20 z-40",
@@ -10988,13 +11400,13 @@ var NodeGraphBuilder = ({
               style: { animation: "fadeIn 150ms ease-out" }
             }
           ),
-          /* @__PURE__ */ jsxs40(
+          /* @__PURE__ */ jsxs41(
             "div",
             {
               className: "fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-[rgb(var(--ec-page-bg))] rounded-lg shadow-xl z-50 w-full max-w-md p-6 border border-[rgb(var(--ec-page-border))]",
               style: { animation: "slideInCenter 250ms ease-out" },
               children: [
-                /* @__PURE__ */ jsx42("style", { children: `
+                /* @__PURE__ */ jsx43("style", { children: `
               @keyframes fadeIn {
                 from { opacity: 0; }
                 to { opacity: 1; }
@@ -11004,21 +11416,21 @@ var NodeGraphBuilder = ({
                 to { opacity: 1; transform: translate(-50%, -50%); }
               }
             ` }),
-                /* @__PURE__ */ jsxs40("div", { className: "flex justify-between items-start mb-4", children: [
-                  /* @__PURE__ */ jsx42("h3", { className: "text-lg font-semibold text-[rgb(var(--ec-page-text))]", children: "Share Link" }),
-                  /* @__PURE__ */ jsx42(
+                /* @__PURE__ */ jsxs41("div", { className: "flex justify-between items-start mb-4", children: [
+                  /* @__PURE__ */ jsx43("h3", { className: "text-lg font-semibold text-[rgb(var(--ec-page-text))]", children: "Share Link" }),
+                  /* @__PURE__ */ jsx43(
                     "button",
                     {
                       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__ */ jsx42(ExternalLink2, { className: "w-5 h-5 rotate-180" })
+                      children: /* @__PURE__ */ jsx43(ExternalLink2, { className: "w-5 h-5 rotate-180" })
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsx42("p", { className: "text-sm text-[rgb(var(--ec-page-text-muted))] mb-4", children: "Share this link with your team to let them view this visualization." }),
-                /* @__PURE__ */ jsxs40("div", { className: "flex gap-2", children: [
-                  /* @__PURE__ */ jsx42(
+                /* @__PURE__ */ jsx43("p", { className: "text-sm text-[rgb(var(--ec-page-text-muted))] mb-4", children: "Share this link with your team to let them view this visualization." }),
+                /* @__PURE__ */ jsxs41("div", { className: "flex gap-2", children: [
+                  /* @__PURE__ */ jsx43(
                     "input",
                     {
                       type: "text",
@@ -11027,15 +11439,15 @@ var NodeGraphBuilder = ({
                       className: "flex-1 px-3 py-2.5 bg-[rgb(var(--ec-input-bg))] border border-[rgb(var(--ec-input-border))] rounded-md text-[rgb(var(--ec-input-text))] text-sm focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))]"
                     }
                   ),
-                  /* @__PURE__ */ jsxs40(
+                  /* @__PURE__ */ jsxs41(
                     "button",
                     {
                       onClick: handleCopyShareUrl,
                       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__ */ jsx42(CheckIcon3, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx42(ClipboardIcon3, { className: "w-4 h-4" }),
-                        /* @__PURE__ */ jsx42("span", { children: shareUrlCopySuccess ? "Copied!" : "Copy" })
+                        shareUrlCopySuccess ? /* @__PURE__ */ jsx43(CheckIcon3, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx43(ClipboardIcon3, { className: "w-4 h-4" }),
+                        /* @__PURE__ */ jsx43("span", { children: shareUrlCopySuccess ? "Copied!" : "Copy" })
                       ]
                     }
                   )
@@ -11114,9 +11526,9 @@ var NodeGraph = ({
     }
   }, []);
   if (!elem) return null;
-  return /* @__PURE__ */ jsx42("div", { children: createPortal(
-    /* @__PURE__ */ jsxs40(ReactFlowProvider2, { children: [
-      /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43("div", { children: createPortal(
+    /* @__PURE__ */ jsxs41(ReactFlowProvider2, { children: [
+      /* @__PURE__ */ jsx43(
         NodeGraphBuilder,
         {
           edges,
@@ -11148,11 +11560,11 @@ var NodeGraph = ({
           onResetLayout
         }
       ),
-      showFooter && /* @__PURE__ */ jsxs40("div", { className: "flex justify-between", id: "visualiser-footer", children: [
-        footerLabel && /* @__PURE__ */ jsx42("div", { className: "py-2 w-full text-left ", children: /* @__PURE__ */ jsx42("span", { className: " text-sm no-underline py-2 text-[rgb(var(--ec-page-text-muted))]", children: footerLabel }) }),
-        href && /* @__PURE__ */ jsxs40("div", { className: "py-2 w-full text-right flex justify-between", children: [
-          /* @__PURE__ */ jsx42("span", {}),
-          /* @__PURE__ */ jsxs40(
+      showFooter && /* @__PURE__ */ jsxs41("div", { className: "flex justify-between", id: "visualiser-footer", children: [
+        footerLabel && /* @__PURE__ */ jsx43("div", { className: "py-2 w-full text-left ", children: /* @__PURE__ */ jsx43("span", { className: " text-sm no-underline py-2 text-[rgb(var(--ec-page-text-muted))]", children: footerLabel }) }),
+        href && /* @__PURE__ */ jsxs41("div", { className: "py-2 w-full text-right flex justify-between", children: [
+          /* @__PURE__ */ jsx43("span", {}),
+          /* @__PURE__ */ jsxs41(
             "a",
             {
               className: " text-sm underline text-[rgb(var(--ec-page-text))] hover:text-[rgb(var(--ec-accent))]",
@@ -11189,6 +11601,7 @@ var nodeComponents = {
   domain: Domain_default,
   entity: Entity_default,
   flow: Flow_default,
+  flowExpanded: FlowExpandedNode_default,
   group: GroupNode_default,
   step: Step_default,
   user: User_default,
@@ -11231,6 +11644,7 @@ export {
   ExternalSystem2_default as ExternalSystem2Node,
   FieldNode_default as Field,
   FlowEdge_default as FlowEdge,
+  FlowExpandedNode_default as FlowExpandedNode,
   Flow_default as FlowNode,
   FocusModeModal_default as FocusModeModal,
   GroupNode_default as GroupNode,