@eventcatalog/visualiser 3.15.0 → 3.15.1

package/dist/index.js

@@ -96,16 +96,16 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/NodeGraph.tsx
-var import_react68 = require("react");
+var import_react69 = require("react");
 var import_react_dom = require("react-dom");
-var import_react69 = require("@xyflow/react");
+var import_react70 = require("@xyflow/react");
 var import_style = require("@xyflow/react/dist/style.css");
 var import_lucide_react25 = require("lucide-react");
 var DropdownMenu2 = __toESM(require("@radix-ui/react-dropdown-menu"));
 var import_html_to_image = require("html-to-image");
 
 // src/nodes/service/ServiceNode.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_lucide_react3 = require("lucide-react");
 
 // src/nodes/OwnerIndicator.tsx
@@ -237,12 +237,23 @@ var OwnerIndicator = (0, import_react2.memo)(function OwnerIndicator2({
 });
 
 // src/nodes/service/ServiceNode.tsx
-var import_react5 = require("@xyflow/react");
+var import_react6 = require("@xyflow/react");
 
 // src/nodes/NotesIndicator.tsx
 var import_lucide_react2 = require("lucide-react");
-var import_react3 = require("react");
+var import_react4 = require("react");
 var Dialog = __toESM(require("@radix-ui/react-dialog"));
+
+// src/context/PortalContainerContext.tsx
+var import_react3 = require("react");
+var PortalContainerContext = (0, import_react3.createContext)(null);
+var PortalContainerProvider = PortalContainerContext.Provider;
+function usePortalContainer() {
+  const container = (0, import_react3.useContext)(PortalContainerContext);
+  return container ?? void 0;
+}
+
+// src/nodes/NotesIndicator.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var AMBER = {
   50: "#fffbeb",
@@ -517,282 +528,277 @@ function NotesModal({
   icon
 }) {
   const isDark = useDarkMode();
+  const portalContainer = usePortalContainer();
   const count = notes.length;
   const urgent = notes.filter(
     (n) => n.priority && (n.priority.toLowerCase() === "high" || n.priority.toLowerCase() === "critical")
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Dialog.Root, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    Dialog.Portal,
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Dialog.Root, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Dialog.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
     {
-      container: typeof document !== "undefined" ? document.body : void 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-        "div",
-        {
-          className: "fixed inset-0 z-[99999]",
-          style: { isolation: "isolate" },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-              Dialog.Overlay,
-              {
-                style: {
-                  position: "fixed",
-                  inset: 0,
-                  background: isDark ? "rgba(0, 0, 0, 0.7)" : "rgba(15, 23, 42, 0.55)",
-                  backdropFilter: "blur(8px)"
-                }
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-              Dialog.Content,
-              {
-                style: {
-                  position: "fixed",
-                  top: "50%",
-                  left: "50%",
-                  transform: "translate(-50%, -50%)",
-                  width: "92vw",
-                  maxWidth: 500,
-                  maxHeight: "80vh",
-                  background: isDark ? "#1e2330" : "#ffffff",
-                  borderRadius: 16,
-                  border: `1px solid ${isDark ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.08)"}`,
-                  boxShadow: isDark ? "0 24px 48px rgba(0,0,0,0.5)" : "0 24px 48px rgba(0,0,0,0.15)",
-                  display: "flex",
-                  flexDirection: "column",
-                  overflow: "hidden",
-                  outline: "none"
-                },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                    "div",
-                    {
-                      style: {
-                        padding: "20px 22px 16px",
-                        borderBottom: `1px solid ${isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.06)"}`,
-                        display: "flex",
-                        alignItems: "center",
-                        gap: 14
-                      },
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                          "div",
+      className: "fixed inset-0 z-[99999]",
+      style: { isolation: "isolate" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          Dialog.Overlay,
+          {
+            style: {
+              position: "fixed",
+              inset: 0,
+              background: isDark ? "rgba(0, 0, 0, 0.7)" : "rgba(15, 23, 42, 0.55)",
+              backdropFilter: "blur(8px)"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          Dialog.Content,
+          {
+            style: {
+              position: "fixed",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+              width: "92vw",
+              maxWidth: 500,
+              maxHeight: "80vh",
+              background: isDark ? "#1e2330" : "#ffffff",
+              borderRadius: 16,
+              border: `1px solid ${isDark ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.08)"}`,
+              boxShadow: isDark ? "0 24px 48px rgba(0,0,0,0.5)" : "0 24px 48px rgba(0,0,0,0.15)",
+              display: "flex",
+              flexDirection: "column",
+              overflow: "hidden",
+              outline: "none"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                "div",
+                {
+                  style: {
+                    padding: "20px 22px 16px",
+                    borderBottom: `1px solid ${isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.06)"}`,
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 14
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "div",
+                      {
+                        style: {
+                          width: 36,
+                          height: 36,
+                          borderRadius: 10,
+                          background: accentColor || `linear-gradient(135deg, ${AMBER[400]}, ${AMBER[500]})`,
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          flexShrink: 0
+                        },
+                        children: icon || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          import_lucide_react2.MessageCircle,
                           {
-                            style: {
-                              width: 36,
-                              height: 36,
-                              borderRadius: 10,
-                              background: accentColor || `linear-gradient(135deg, ${AMBER[400]}, ${AMBER[500]})`,
-                              display: "flex",
-                              alignItems: "center",
-                              justifyContent: "center",
-                              flexShrink: 0
-                            },
-                            children: icon || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                              import_lucide_react2.MessageCircle,
+                            style: { width: 18, height: 18, color: "white" },
+                            strokeWidth: 2.5
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                        Dialog.Title,
+                        {
+                          style: {
+                            fontSize: 15,
+                            fontWeight: 700,
+                            color: isDark ? "#f1f5f9" : "#0f172a",
+                            margin: 0,
+                            lineHeight: 1.3,
+                            letterSpacing: "-0.01em",
+                            display: "flex",
+                            alignItems: "baseline",
+                            gap: 6
+                          },
+                          children: [
+                            resourceName || "Notes",
+                            resourceVersion && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                              "span",
                               {
-                                style: { width: 18, height: 18, color: "white" },
-                                strokeWidth: 2.5
+                                style: {
+                                  fontSize: 11,
+                                  fontWeight: 500,
+                                  color: isDark ? "#64748b" : "#94a3b8"
+                                },
+                                children: [
+                                  "v",
+                                  resourceVersion
+                                ]
                               }
                             )
-                          }
-                        ),
-                        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                            Dialog.Title,
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                        Dialog.Description,
+                        {
+                          style: {
+                            fontSize: 12,
+                            color: isDark ? "#94a3b8" : "#64748b",
+                            margin: 0,
+                            marginTop: 3,
+                            lineHeight: 1.3,
+                            display: "flex",
+                            alignItems: "center",
+                            gap: 6
+                          },
+                          children: [
+                            resourceType && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                              "span",
+                              {
+                                style: {
+                                  fontSize: 10,
+                                  fontWeight: 700,
+                                  textTransform: "uppercase",
+                                  letterSpacing: "0.05em"
+                                },
+                                children: resourceType
+                              }
+                            ),
+                            resourceType && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { opacity: 0.4 }, children: "\xB7" }),
+                            count,
+                            " note",
+                            count !== 1 ? "s" : "",
+                            urgent.length > 0 && ` \xB7 ${urgent.length} high priority`
+                          ]
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "button",
+                      {
+                        "aria-label": "Close",
+                        style: {
+                          width: 32,
+                          height: 32,
+                          borderRadius: 8,
+                          border: "none",
+                          background: isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          cursor: "pointer",
+                          color: isDark ? "#94a3b8" : "#94a3b8",
+                          flexShrink: 0
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.XIcon, { style: { width: 16, height: 16 } })
+                      }
+                    ) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "div",
+                {
+                  style: {
+                    flex: 1,
+                    overflowY: "auto",
+                    padding: "16px 22px 24px",
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: 18
+                  },
+                  children: groupNotes(notes).map((group) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: 8,
+                          marginBottom: 10
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                            "div",
                             {
                               style: {
-                                fontSize: 15,
+                                width: 8,
+                                height: 8,
+                                borderRadius: "50%",
+                                background: group.color,
+                                flexShrink: 0
+                              }
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                            "span",
+                            {
+                              style: {
+                                fontSize: 11,
                                 fontWeight: 700,
-                                color: isDark ? "#f1f5f9" : "#0f172a",
-                                margin: 0,
-                                lineHeight: 1.3,
-                                letterSpacing: "-0.01em",
-                                display: "flex",
-                                alignItems: "baseline",
-                                gap: 6
+                                color: isDark ? "#94a3b8" : "#64748b",
+                                textTransform: "uppercase",
+                                letterSpacing: "0.06em"
                               },
-                              children: [
-                                resourceName || "Notes",
-                                resourceVersion && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                                  "span",
-                                  {
-                                    style: {
-                                      fontSize: 11,
-                                      fontWeight: 500,
-                                      color: isDark ? "#64748b" : "#94a3b8"
-                                    },
-                                    children: [
-                                      "v",
-                                      resourceVersion
-                                    ]
-                                  }
-                                )
-                              ]
+                              children: group.label
                             }
                           ),
                           /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                            Dialog.Description,
+                            "span",
                             {
                               style: {
-                                fontSize: 12,
-                                color: isDark ? "#94a3b8" : "#64748b",
-                                margin: 0,
-                                marginTop: 3,
-                                lineHeight: 1.3,
-                                display: "flex",
-                                alignItems: "center",
-                                gap: 6
+                                fontSize: 10,
+                                fontWeight: 600,
+                                color: isDark ? "#475569" : "#94a3b8"
                               },
                               children: [
-                                resourceType && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                                  "span",
-                                  {
-                                    style: {
-                                      fontSize: 10,
-                                      fontWeight: 700,
-                                      textTransform: "uppercase",
-                                      letterSpacing: "0.05em"
-                                    },
-                                    children: resourceType
-                                  }
-                                ),
-                                resourceType && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { opacity: 0.4 }, children: "\xB7" }),
-                                count,
-                                " note",
-                                count !== 1 ? "s" : "",
-                                urgent.length > 0 && ` \xB7 ${urgent.length} high priority`
+                                "(",
+                                group.notes.length,
+                                ")"
                               ]
                             }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                            "div",
+                            {
+                              style: {
+                                flex: 1,
+                                height: 1,
+                                background: isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.06)"
+                              }
+                            }
                           )
-                        ] }),
-                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                          "button",
-                          {
-                            "aria-label": "Close",
-                            style: {
-                              width: 32,
-                              height: 32,
-                              borderRadius: 8,
-                              border: "none",
-                              background: isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)",
-                              display: "flex",
-                              alignItems: "center",
-                              justifyContent: "center",
-                              cursor: "pointer",
-                              color: isDark ? "#94a3b8" : "#94a3b8",
-                              flexShrink: 0
-                            },
-                            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.XIcon, { style: { width: 16, height: 16 } })
-                          }
-                        ) })
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                    "div",
-                    {
-                      style: {
-                        flex: 1,
-                        overflowY: "auto",
-                        padding: "16px 22px 24px",
-                        display: "flex",
-                        flexDirection: "column",
-                        gap: 18
-                      },
-                      children: groupNotes(notes).map((group) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                          "div",
-                          {
-                            style: {
-                              display: "flex",
-                              alignItems: "center",
-                              gap: 8,
-                              marginBottom: 10
-                            },
-                            children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                                "div",
-                                {
-                                  style: {
-                                    width: 8,
-                                    height: 8,
-                                    borderRadius: "50%",
-                                    background: group.color,
-                                    flexShrink: 0
-                                  }
-                                }
-                              ),
-                              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                                "span",
-                                {
-                                  style: {
-                                    fontSize: 11,
-                                    fontWeight: 700,
-                                    color: isDark ? "#94a3b8" : "#64748b",
-                                    textTransform: "uppercase",
-                                    letterSpacing: "0.06em"
-                                  },
-                                  children: group.label
-                                }
-                              ),
-                              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                                "span",
-                                {
-                                  style: {
-                                    fontSize: 10,
-                                    fontWeight: 600,
-                                    color: isDark ? "#475569" : "#94a3b8"
-                                  },
-                                  children: [
-                                    "(",
-                                    group.notes.length,
-                                    ")"
-                                  ]
-                                }
-                              ),
-                              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                                "div",
-                                {
-                                  style: {
-                                    flex: 1,
-                                    height: 1,
-                                    background: isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.06)"
-                                  }
-                                }
-                              )
-                            ]
-                          }
-                        ),
-                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                          "div",
-                          {
-                            style: {
-                              display: "flex",
-                              flexDirection: "column",
-                              gap: 16
-                            },
-                            children: group.notes.map((note, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(NoteCard, { note, isDark }, i))
-                          }
-                        )
-                      ] }, group.label))
-                    }
-                  )
-                ]
-              }
-            )
-          ]
-        }
-      )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          flexDirection: "column",
+                          gap: 16
+                        },
+                        children: group.notes.map((note, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(NoteCard, { note, isDark }, i))
+                      }
+                    )
+                  ] }, group.label))
+                }
+              )
+            ]
+          }
+        )
+      ]
     }
-  ) });
+  ) }) });
 }
-var NotesIndicator = (0, import_react3.memo)(function NotesIndicator2({
+var NotesIndicator = (0, import_react4.memo)(function NotesIndicator2({
   notes,
   resourceName
 }) {
-  const [isHovered, setIsHovered] = (0, import_react3.useState)(false);
-  const [isModalOpen, setIsModalOpen] = (0, import_react3.useState)(false);
-  const handleClick = (0, import_react3.useCallback)((e) => {
+  const [isHovered, setIsHovered] = (0, import_react4.useState)(false);
+  const [isModalOpen, setIsModalOpen] = (0, import_react4.useState)(false);
+  const handleClick = (0, import_react4.useCallback)((e) => {
     e.stopPropagation();
     setIsHovered(false);
     setIsModalOpen(true);
@@ -1020,11 +1026,11 @@ function normalizeSpecTypes(specs) {
   }
   return Array.from(types);
 }
-var SpecBadges = (0, import_react4.memo)(function SpecBadges2({
+var SpecBadges = (0, import_react5.memo)(function SpecBadges2({
   specifications,
   isDark
 }) {
-  const specTypes = (0, import_react4.useMemo)(
+  const specTypes = (0, import_react5.useMemo)(
     () => normalizeSpecTypes(specifications),
     [specifications]
   );
@@ -1045,7 +1051,7 @@ var SpecBadges = (0, import_react4.memo)(function SpecBadges2({
     );
   }) });
 });
-var MiniEnvelope = (0, import_react4.memo)(function MiniEnvelope2({
+var MiniEnvelope = (0, import_react5.memo)(function MiniEnvelope2({
   side,
   delay
 }) {
@@ -1086,7 +1092,7 @@ var MiniEnvelope = (0, import_react4.memo)(function MiniEnvelope2({
     }
   );
 });
-var ServiceMessageFlow = (0, import_react4.memo)(function ServiceMessageFlow2({
+var ServiceMessageFlow = (0, import_react5.memo)(function ServiceMessageFlow2({
   side
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
@@ -1111,7 +1117,7 @@ var ServiceMessageFlow = (0, import_react4.memo)(function ServiceMessageFlow2({
     }
   );
 });
-var GlowHandle = (0, import_react4.memo)(function GlowHandle2({
+var GlowHandle = (0, import_react5.memo)(function GlowHandle2({
   side
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -1150,18 +1156,18 @@ function PostItService(props) {
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          import_react5.Handle,
+          import_react6.Handle,
           {
             type: "target",
-            position: import_react5.Position.Left,
+            position: import_react6.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          import_react5.Handle,
+          import_react6.Handle,
           {
             type: "source",
-            position: import_react5.Position.Right,
+            position: import_react6.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
@@ -1244,12 +1250,12 @@ function PostItService(props) {
 function DefaultService(props) {
   const { version, name, summary, deprecated, draft, notes, specifications } = props.data.service;
   const mode = props.data.mode || "simple";
-  const owners = (0, import_react4.useMemo)(
+  const owners = (0, import_react5.useMemo)(
     () => normalizeOwners(props.data.service.owners),
     [props.data.service.owners]
   );
-  const targetConnections = (0, import_react5.useHandleConnections)({ type: "target" });
-  const sourceConnections = (0, import_react5.useHandleConnections)({ type: "source" });
+  const targetConnections = (0, import_react6.useHandleConnections)({ type: "target" });
+  const sourceConnections = (0, import_react6.useHandleConnections)({ type: "source" });
   const isDark = useDarkMode();
   const deprecatedStripe = isDark ? "rgba(239,68,68,0.25)" : "rgba(239,68,68,0.1)";
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
@@ -1266,18 +1272,18 @@ function DefaultService(props) {
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          import_react5.Handle,
+          import_react6.Handle,
           {
             type: "target",
-            position: import_react5.Position.Left,
+            position: import_react6.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          import_react5.Handle,
+          import_react6.Handle,
           {
             type: "source",
-            position: import_react5.Position.Right,
+            position: import_react6.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
@@ -1334,7 +1340,7 @@ function DefaultService(props) {
     }
   );
 }
-var ServiceNode_default = (0, import_react4.memo)(function Service(props) {
+var ServiceNode_default = (0, import_react5.memo)(function Service(props) {
   const nodeStyle = props?.data?.style;
   if (nodeStyle === "post-it") {
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PostItService, { ...props });
@@ -1343,12 +1349,12 @@ var ServiceNode_default = (0, import_react4.memo)(function Service(props) {
 });
 
 // src/nodes/event/EventNode.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_lucide_react4 = require("lucide-react");
-var import_react8 = require("@xyflow/react");
+var import_react9 = require("@xyflow/react");
 
 // src/nodes/ApiInfo.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var METHOD_COLORS = {
   GET: { bg: "rgba(34,197,94,0.15)", text: "#22c55e" },
@@ -1369,7 +1375,7 @@ function getStatusColor(code) {
   const prefix = String(code)[0];
   return STATUS_COLORS[prefix] || STATUS_COLORS["2"];
 }
-var MethodBadge = (0, import_react6.memo)(function MethodBadge2({
+var MethodBadge = (0, import_react7.memo)(function MethodBadge2({
   method
 }) {
   const upper = method.toUpperCase();
@@ -1383,7 +1389,7 @@ var MethodBadge = (0, import_react6.memo)(function MethodBadge2({
     }
   );
 });
-var StatusCodes = (0, import_react6.memo)(function StatusCodes2({
+var StatusCodes = (0, import_react7.memo)(function StatusCodes2({
   codes
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex items-center gap-1 flex-wrap mt-1.5", children: codes.map((code) => {
@@ -1399,7 +1405,7 @@ var StatusCodes = (0, import_react6.memo)(function StatusCodes2({
     );
   }) });
 });
-var ApiPath = (0, import_react6.memo)(function ApiPath2({ path }) {
+var ApiPath = (0, import_react7.memo)(function ApiPath2({ path }) {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "span",
     {
@@ -1412,7 +1418,7 @@ var ApiPath = (0, import_react6.memo)(function ApiPath2({ path }) {
 
 // src/nodes/event/EventNode.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var GlowHandle3 = (0, import_react7.memo)(function GlowHandle4({
+var GlowHandle3 = (0, import_react8.memo)(function GlowHandle4({
   side
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -1450,18 +1456,18 @@ function PostItEvent(props) {
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          import_react8.Handle,
+          import_react9.Handle,
           {
             type: "target",
-            position: import_react8.Position.Left,
+            position: import_react9.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          import_react8.Handle,
+          import_react9.Handle,
           {
             type: "source",
-            position: import_react8.Position.Right,
+            position: import_react9.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
@@ -1549,12 +1555,12 @@ function DefaultEvent(props) {
   } = props?.data?.message;
   const mode = props?.data?.mode || "simple";
   const hasApiInfo = !!(method || path);
-  const owners = (0, import_react7.useMemo)(
+  const owners = (0, import_react8.useMemo)(
     () => normalizeOwners(props?.data?.message?.owners),
     [props?.data?.message?.owners]
   );
-  const targetConnections = (0, import_react8.useHandleConnections)({ type: "target" });
-  const sourceConnections = (0, import_react8.useHandleConnections)({ type: "source" });
+  const targetConnections = (0, import_react9.useHandleConnections)({ type: "target" });
+  const sourceConnections = (0, import_react9.useHandleConnections)({ type: "source" });
   const isDark = useDarkMode();
   const deprecatedStripe = isDark ? "rgba(239,68,68,0.25)" : "rgba(239,68,68,0.1)";
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
@@ -1571,18 +1577,18 @@ function DefaultEvent(props) {
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          import_react8.Handle,
+          import_react9.Handle,
           {
             type: "target",
-            position: import_react8.Position.Left,
+            position: import_react9.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          import_react8.Handle,
+          import_react9.Handle,
           {
             type: "source",
-            position: import_react8.Position.Right,
+            position: import_react9.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
@@ -1661,7 +1667,7 @@ function DefaultEvent(props) {
     }
   );
 }
-var EventNode_default = (0, import_react7.memo)(function Event(props) {
+var EventNode_default = (0, import_react8.memo)(function Event(props) {
   const nodeStyle = props?.data?.style;
   if (nodeStyle === "post-it") {
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PostItEvent, { ...props });
@@ -1670,7 +1676,7 @@ var EventNode_default = (0, import_react7.memo)(function Event(props) {
 });
 
 // src/nodes/event/config.ts
-var import_react9 = require("@xyflow/react");
+var import_react10 = require("@xyflow/react");
 var import_lucide_react5 = require("lucide-react");
 
 // src/nodes/node-types.ts
@@ -1698,12 +1704,12 @@ var config_default = {
     if (EVENT.includes(connection.source) && SERVICE.includes(connection.target)) {
       return {
         label: "Publishes",
-        markerEnd: { type: import_react9.MarkerType.ArrowClosed, color: "#000000" }
+        markerEnd: { type: import_react10.MarkerType.ArrowClosed, color: "#000000" }
       };
     }
     return {
       label: "Subscribes",
-      markerEnd: { type: import_react9.MarkerType.ArrowClosed, color: "#000000" }
+      markerEnd: { type: import_react10.MarkerType.ArrowClosed, color: "#000000" }
     };
   },
   defaultData: {
@@ -1744,11 +1750,11 @@ var config_default = {
 };
 
 // src/nodes/query/QueryNode.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_lucide_react6 = require("lucide-react");
-var import_react11 = require("@xyflow/react");
+var import_react12 = require("@xyflow/react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var GlowHandle5 = (0, import_react10.memo)(function GlowHandle6({
+var GlowHandle5 = (0, import_react11.memo)(function GlowHandle6({
   side
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -1786,18 +1792,18 @@ function PostItQuery(props) {
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          import_react11.Handle,
+          import_react12.Handle,
           {
             type: "target",
-            position: import_react11.Position.Left,
+            position: import_react12.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          import_react11.Handle,
+          import_react12.Handle,
           {
             type: "source",
-            position: import_react11.Position.Right,
+            position: import_react12.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
@@ -1885,12 +1891,12 @@ function DefaultQuery(props) {
   } = props.data.message;
   const mode = props.data.mode || "simple";
   const hasApiInfo = !!(method || path);
-  const owners = (0, import_react10.useMemo)(
+  const owners = (0, import_react11.useMemo)(
     () => normalizeOwners(props.data.message?.owners),
     [props.data.message?.owners]
   );
-  const targetConnections = (0, import_react11.useHandleConnections)({ type: "target" });
-  const sourceConnections = (0, import_react11.useHandleConnections)({ type: "source" });
+  const targetConnections = (0, import_react12.useHandleConnections)({ type: "target" });
+  const sourceConnections = (0, import_react12.useHandleConnections)({ type: "source" });
   const isDark = useDarkMode();
   const deprecatedStripe = isDark ? "rgba(239,68,68,0.25)" : "rgba(239,68,68,0.1)";
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
@@ -1907,18 +1913,18 @@ function DefaultQuery(props) {
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          import_react11.Handle,
+          import_react12.Handle,
           {
             type: "target",
-            position: import_react11.Position.Left,
+            position: import_react12.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          import_react11.Handle,
+          import_react12.Handle,
           {
             type: "source",
-            position: import_react11.Position.Right,
+            position: import_react12.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
@@ -1985,7 +1991,7 @@ function DefaultQuery(props) {
     }
   );
 }
-var QueryNode_default = (0, import_react10.memo)(function Query(props) {
+var QueryNode_default = (0, import_react11.memo)(function Query(props) {
   const nodeStyle = props?.data?.style;
   if (nodeStyle === "post-it") {
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PostItQuery, { ...props });
@@ -1994,11 +2000,11 @@ var QueryNode_default = (0, import_react10.memo)(function Query(props) {
 });
 
 // src/nodes/command/CommandNode.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_lucide_react7 = require("lucide-react");
-var import_react13 = require("@xyflow/react");
+var import_react14 = require("@xyflow/react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var GlowHandle7 = (0, import_react12.memo)(function GlowHandle8({
+var GlowHandle7 = (0, import_react13.memo)(function GlowHandle8({
   side
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -2036,18 +2042,18 @@ function PostItCommand(props) {
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          import_react13.Handle,
+          import_react14.Handle,
           {
             type: "target",
-            position: import_react13.Position.Left,
+            position: import_react14.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          import_react13.Handle,
+          import_react14.Handle,
           {
             type: "source",
-            position: import_react13.Position.Right,
+            position: import_react14.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
@@ -2141,12 +2147,12 @@ function DefaultCommand(props) {
   } = props.data.message;
   const mode = props.data.mode || "simple";
   const hasApiInfo = !!(method || path);
-  const owners = (0, import_react12.useMemo)(
+  const owners = (0, import_react13.useMemo)(
     () => normalizeOwners(props.data.message?.owners),
     [props.data.message?.owners]
   );
-  const targetConnections = (0, import_react13.useHandleConnections)({ type: "target" });
-  const sourceConnections = (0, import_react13.useHandleConnections)({ type: "source" });
+  const targetConnections = (0, import_react14.useHandleConnections)({ type: "target" });
+  const sourceConnections = (0, import_react14.useHandleConnections)({ type: "source" });
   const isDark = useDarkMode();
   const deprecatedStripe = isDark ? "rgba(239,68,68,0.25)" : "rgba(239,68,68,0.1)";
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
@@ -2163,18 +2169,18 @@ function DefaultCommand(props) {
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          import_react13.Handle,
+          import_react14.Handle,
           {
             type: "target",
-            position: import_react13.Position.Left,
+            position: import_react14.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          import_react13.Handle,
+          import_react14.Handle,
           {
             type: "source",
-            position: import_react13.Position.Right,
+            position: import_react14.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
@@ -2241,7 +2247,7 @@ function DefaultCommand(props) {
     }
   );
 }
-var CommandNode_default = (0, import_react12.memo)(function Command(props) {
+var CommandNode_default = (0, import_react13.memo)(function Command(props) {
   const nodeStyle = props?.data?.style;
   if (nodeStyle === "post-it") {
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PostItCommand, { ...props });
@@ -2251,8 +2257,8 @@ var CommandNode_default = (0, import_react12.memo)(function Command(props) {
 
 // src/nodes/channel/ChannelNode.tsx
 var import_lucide_react8 = require("lucide-react");
-var import_react14 = require("@xyflow/react");
-var import_react15 = require("react");
+var import_react15 = require("@xyflow/react");
+var import_react16 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var DELIVERY_GUARANTEE_LABELS = {
   "at-most-once": "At most once",
@@ -2357,18 +2363,18 @@ function PostItChannel(props) {
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          import_react14.Handle,
+          import_react15.Handle,
           {
             type: "target",
-            position: import_react14.Position.Left,
+            position: import_react15.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          import_react14.Handle,
+          import_react15.Handle,
           {
             type: "source",
-            position: import_react14.Position.Right,
+            position: import_react15.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
@@ -2482,12 +2488,12 @@ function DefaultChannel(props) {
     deliveryGuarantee
   } = data.channel;
   const mode = props.data.mode || "simple";
-  const owners = (0, import_react15.useMemo)(
+  const owners = (0, import_react16.useMemo)(
     () => normalizeOwners(data.channel?.owners),
     [data.channel?.owners]
   );
-  const sourceConnections = (0, import_react14.useHandleConnections)({ type: "source" });
-  const targetConnections = (0, import_react14.useHandleConnections)({ type: "target" });
+  const sourceConnections = (0, import_react15.useHandleConnections)({ type: "source" });
+  const targetConnections = (0, import_react15.useHandleConnections)({ type: "target" });
   const isDark = useDarkMode();
   const deprecatedStripe = isDark ? "rgba(239,68,68,0.25)" : "rgba(239,68,68,0.1)";
   const guarantee = getGuarantee(deliveryGuarantee);
@@ -2505,18 +2511,18 @@ function DefaultChannel(props) {
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          import_react14.Handle,
+          import_react15.Handle,
           {
             type: "target",
-            position: import_react14.Position.Left,
+            position: import_react15.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          import_react14.Handle,
+          import_react15.Handle,
           {
             type: "source",
-            position: import_react14.Position.Right,
+            position: import_react15.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
@@ -2610,7 +2616,7 @@ function DefaultChannel(props) {
     }
   );
 }
-var ChannelNode_default = (0, import_react15.memo)(function Channel(props) {
+var ChannelNode_default = (0, import_react16.memo)(function Channel(props) {
   const nodeStyle = props?.data?.style;
   if (nodeStyle === "post-it") {
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PostItChannel, { ...props });
@@ -2619,9 +2625,9 @@ var ChannelNode_default = (0, import_react15.memo)(function Channel(props) {
 });
 
 // src/nodes/data/DataNode.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_lucide_react9 = require("lucide-react");
-var import_react17 = require("@xyflow/react");
+var import_react18 = require("@xyflow/react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function GlowHandle10({ side }) {
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -2669,18 +2675,18 @@ function PostItData(props) {
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          import_react17.Handle,
+          import_react18.Handle,
           {
             type: "target",
-            position: import_react17.Position.Left,
+            position: import_react18.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          import_react17.Handle,
+          import_react18.Handle,
           {
             type: "source",
-            position: import_react17.Position.Right,
+            position: import_react18.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
@@ -2766,9 +2772,9 @@ function DefaultData(props) {
     notes
   } = props.data.data;
   const mode = props.data.mode || "simple";
-  const ownersNormalized = (0, import_react16.useMemo)(() => normalizeOwners(owners), [owners]);
-  const targetConnections = (0, import_react17.useHandleConnections)({ type: "target" });
-  const sourceConnections = (0, import_react17.useHandleConnections)({ type: "source" });
+  const ownersNormalized = (0, import_react17.useMemo)(() => normalizeOwners(owners), [owners]);
+  const targetConnections = (0, import_react18.useHandleConnections)({ type: "target" });
+  const sourceConnections = (0, import_react18.useHandleConnections)({ type: "source" });
   const isDark = useDarkMode();
   const deprecatedStripe = isDark ? "rgba(239,68,68,0.25)" : "rgba(239,68,68,0.1)";
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
@@ -2785,18 +2791,18 @@ function DefaultData(props) {
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          import_react17.Handle,
+          import_react18.Handle,
           {
             type: "target",
-            position: import_react17.Position.Left,
+            position: import_react18.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          import_react17.Handle,
+          import_react18.Handle,
           {
             type: "source",
-            position: import_react17.Position.Right,
+            position: import_react18.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
@@ -2858,7 +2864,7 @@ function DefaultData(props) {
     }
   );
 }
-var DataNode_default = (0, import_react16.memo)(function Data(props) {
+var DataNode_default = (0, import_react17.memo)(function Data(props) {
   const nodeStyle = props?.data?.style;
   if (nodeStyle === "post-it") {
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PostItData, { ...props });
@@ -2867,7 +2873,7 @@ var DataNode_default = (0, import_react16.memo)(function Data(props) {
 });
 
 // src/nodes/data/config.ts
-var import_react18 = require("@xyflow/react");
+var import_react19 = require("@xyflow/react");
 var import_lucide_react10 = require("lucide-react");
 var config_default2 = {
   type: "data",
@@ -2882,18 +2888,18 @@ var config_default2 = {
     if (connection.source === "data" && connection.target === "service") {
       return {
         label: "Provides data to",
-        markerEnd: { type: import_react18.MarkerType.ArrowClosed, color: "#000000" }
+        markerEnd: { type: import_react19.MarkerType.ArrowClosed, color: "#000000" }
       };
     }
     if (connection.source === "service" && connection.target === "data") {
       return {
         label: "Stores data in",
-        markerEnd: { type: import_react18.MarkerType.ArrowClosed, color: "#000000" }
+        markerEnd: { type: import_react19.MarkerType.ArrowClosed, color: "#000000" }
       };
     }
     return {
       label: "Connected to",
-      markerEnd: { type: import_react18.MarkerType.ArrowClosed, color: "#000000" }
+      markerEnd: { type: import_react19.MarkerType.ArrowClosed, color: "#000000" }
     };
   },
   defaultData: {
@@ -2949,14 +2955,14 @@ var config_default2 = {
 };
 
 // src/nodes/view/ViewNode.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_lucide_react11 = require("lucide-react");
-var import_react20 = require("@xyflow/react");
+var import_react21 = require("@xyflow/react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function classNames7(...classes) {
   return classes.filter(Boolean).join(" ");
 }
-var ViewNode_default = (0, import_react19.memo)(function View(props) {
+var ViewNode_default = (0, import_react20.memo)(function View(props) {
   const { data: _data, selected } = props;
   const { name, summary, screenshot } = props.data.view;
   const mode = props.data.mode || "simple";
@@ -2971,18 +2977,18 @@ var ViewNode_default = (0, import_react19.memo)(function View(props) {
       style: NODE_WIDTH_STYLE,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          import_react20.Handle,
+          import_react21.Handle,
           {
             type: "target",
-            position: import_react20.Position.Left,
+            position: import_react21.Position.Left,
             className: "!left-[-1px] !w-2.5 !h-2.5 !bg-blue-500 !border !border-blue-600 !rounded-full !z-10"
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          import_react20.Handle,
+          import_react21.Handle,
           {
             type: "source",
-            position: import_react20.Position.Right,
+            position: import_react21.Position.Right,
             className: "!right-[-1px] !w-2.5 !h-2.5 !bg-blue-500 !border !border-blue-600 !rounded-full !z-10"
           }
         ),
@@ -3037,9 +3043,9 @@ var ViewNode_default = (0, import_react19.memo)(function View(props) {
 });
 
 // src/nodes/actor/ActorNode.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_lucide_react12 = require("lucide-react");
-var import_react22 = require("@xyflow/react");
+var import_react23 = require("@xyflow/react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function GlowHandle11({ side }) {
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -3077,18 +3083,18 @@ function PostItActor(props) {
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          import_react22.Handle,
+          import_react23.Handle,
           {
             type: "target",
-            position: import_react22.Position.Left,
+            position: import_react23.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          import_react22.Handle,
+          import_react23.Handle,
           {
             type: "source",
-            position: import_react22.Position.Right,
+            position: import_react23.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
@@ -3160,8 +3166,8 @@ function PostItActor(props) {
 function DefaultActor(props) {
   const { name, summary, deprecated, draft, notes } = props?.data;
   const mode = props?.data?.mode || "simple";
-  const targetConnections = (0, import_react22.useHandleConnections)({ type: "target" });
-  const sourceConnections = (0, import_react22.useHandleConnections)({ type: "source" });
+  const targetConnections = (0, import_react23.useHandleConnections)({ type: "target" });
+  const sourceConnections = (0, import_react23.useHandleConnections)({ type: "source" });
   const isDark = useDarkMode();
   const deprecatedStripe = isDark ? "rgba(239,68,68,0.25)" : "rgba(239,68,68,0.1)";
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
@@ -3178,18 +3184,18 @@ function DefaultActor(props) {
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          import_react22.Handle,
+          import_react23.Handle,
           {
             type: "target",
-            position: import_react22.Position.Left,
+            position: import_react23.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          import_react22.Handle,
+          import_react23.Handle,
           {
             type: "source",
-            position: import_react22.Position.Right,
+            position: import_react23.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
@@ -3227,7 +3233,7 @@ function DefaultActor(props) {
     }
   );
 }
-var ActorNode_default = (0, import_react21.memo)(function Actor(props) {
+var ActorNode_default = (0, import_react22.memo)(function Actor(props) {
   const nodeStyle = props?.data?.style;
   if (nodeStyle === "post-it") {
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PostItActor, { ...props });
@@ -3236,7 +3242,7 @@ var ActorNode_default = (0, import_react21.memo)(function Actor(props) {
 });
 
 // src/nodes/actor/config.ts
-var import_react23 = require("@xyflow/react");
+var import_react24 = require("@xyflow/react");
 var import_lucide_react13 = require("lucide-react");
 var config_default3 = {
   type: "actor",
@@ -3262,7 +3268,7 @@ var config_default3 = {
   getEdgeOptions: (_connection) => {
     return {
       label: "Interacts",
-      markerEnd: { type: import_react23.MarkerType.ArrowClosed, color: "#000000" }
+      markerEnd: { type: import_react24.MarkerType.ArrowClosed, color: "#000000" }
     };
   },
   defaultData: {
@@ -3295,9 +3301,9 @@ var config_default3 = {
 };
 
 // src/nodes/external-system/ExternalSystem.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_lucide_react14 = require("lucide-react");
-var import_react25 = require("@xyflow/react");
+var import_react26 = require("@xyflow/react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function GlowHandle12({ side }) {
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -3335,18 +3341,18 @@ function PostItExternalSystem(props) {
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          import_react25.Handle,
+          import_react26.Handle,
           {
             type: "target",
-            position: import_react25.Position.Left,
+            position: import_react26.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          import_react25.Handle,
+          import_react26.Handle,
           {
             type: "source",
-            position: import_react25.Position.Right,
+            position: import_react26.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
@@ -3422,8 +3428,8 @@ function PostItExternalSystem(props) {
 function DefaultExternalSystem(props) {
   const { version, name, summary, deprecated, draft, notes } = props.data.externalSystem;
   const mode = props.data.mode || "simple";
-  const targetConnections = (0, import_react25.useHandleConnections)({ type: "target" });
-  const sourceConnections = (0, import_react25.useHandleConnections)({ type: "source" });
+  const targetConnections = (0, import_react26.useHandleConnections)({ type: "target" });
+  const sourceConnections = (0, import_react26.useHandleConnections)({ type: "source" });
   const isDark = useDarkMode();
   const deprecatedStripe = isDark ? "rgba(239,68,68,0.25)" : "rgba(239,68,68,0.1)";
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
@@ -3440,18 +3446,18 @@ function DefaultExternalSystem(props) {
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          import_react25.Handle,
+          import_react26.Handle,
           {
             type: "target",
-            position: import_react25.Position.Left,
+            position: import_react26.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          import_react25.Handle,
+          import_react26.Handle,
           {
             type: "source",
-            position: import_react25.Position.Right,
+            position: import_react26.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
@@ -3496,7 +3502,7 @@ function DefaultExternalSystem(props) {
     }
   );
 }
-var ExternalSystem_default = (0, import_react24.memo)(function ExternalSystem(props) {
+var ExternalSystem_default = (0, import_react25.memo)(function ExternalSystem(props) {
   const nodeStyle = props?.data?.style;
   if (nodeStyle === "post-it") {
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PostItExternalSystem, { ...props });
@@ -3505,7 +3511,7 @@ var ExternalSystem_default = (0, import_react24.memo)(function ExternalSystem(pr
 });
 
 // src/nodes/external-system/config.ts
-var import_react26 = require("@xyflow/react");
+var import_react27 = require("@xyflow/react");
 var import_lucide_react15 = require("lucide-react");
 var config_default4 = {
   type: "external-system",
@@ -3519,7 +3525,7 @@ var config_default4 = {
   getEdgeOptions: (connection) => {
     return {
       label: "Connects",
-      markerEnd: { type: import_react26.MarkerType.ArrowClosed, color: "#000000" }
+      markerEnd: { type: import_react27.MarkerType.ArrowClosed, color: "#000000" }
     };
   },
   defaultData: {
@@ -3569,8 +3575,8 @@ var config_default4 = {
 };
 
 // src/nodes/note/NoteNode.tsx
-var import_react27 = require("@xyflow/react");
-var import_react28 = require("react");
+var import_react28 = require("@xyflow/react");
+var import_react29 = require("react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 function classNames10(...classes) {
   return classes.filter(Boolean).join(" ");
@@ -3621,7 +3627,7 @@ var AVAILABLE_COLORS = {
 };
 var POSITION_RELATIVE_STYLE = { position: "relative" };
 var TEXTAREA_STYLE = { height: "100%", minHeight: 0 };
-var NoteNode_default = (0, import_react28.memo)(function NoteNodeComponent({
+var NoteNode_default = (0, import_react29.memo)(function NoteNodeComponent({
   id,
   data,
   selected,
@@ -3629,11 +3635,11 @@ var NoteNode_default = (0, import_react28.memo)(function NoteNodeComponent({
   onColorChange,
   readOnly = false
 }) {
-  const [isEditing, setIsEditing] = (0, import_react28.useState)(false);
-  const [currentText, setCurrentText] = (0, import_react28.useState)(
+  const [isEditing, setIsEditing] = (0, import_react29.useState)(false);
+  const [currentText, setCurrentText] = (0, import_react29.useState)(
     data.text || "Double-click to edit..."
   );
-  const textAreaRef = (0, import_react28.useRef)(null);
+  const textAreaRef = (0, import_react29.useRef)(null);
   const currentColorName = data.color || "yellow";
   const colorClasses = AVAILABLE_COLORS[currentColorName] || AVAILABLE_COLORS.yellow;
   const formatText = (text) => {
@@ -3648,33 +3654,33 @@ var NoteNode_default = (0, import_react28.memo)(function NoteNodeComponent({
       '<code class="bg-gray-200 px-1 rounded text-[9px] font-mono">$1</code>'
     ).replace(/^• (.*$)/gim, '<li class="text-[10px] ml-3">\u2022 $1</li>').replace(/^- (.*$)/gim, '<li class="text-[10px] ml-3">\u2022 $1</li>').replace(/\n/g, "<br>");
   };
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     setCurrentText(data.text || "Double-click to edit...");
   }, [data.text]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (isEditing && textAreaRef.current) {
       textAreaRef.current.focus();
       textAreaRef.current.select();
     }
   }, [isEditing]);
-  const handleDoubleClick = (0, import_react28.useCallback)(() => {
+  const handleDoubleClick = (0, import_react29.useCallback)(() => {
     if (!readOnly) {
       setIsEditing(true);
     }
   }, [readOnly]);
-  const handleTextChange = (0, import_react28.useCallback)(
+  const handleTextChange = (0, import_react29.useCallback)(
     (event) => {
       setCurrentText(event.target.value);
     },
     []
   );
-  const handleBlur = (0, import_react28.useCallback)(() => {
+  const handleBlur = (0, import_react29.useCallback)(() => {
     setIsEditing(false);
     if (currentText !== data.text && onTextChange) {
       onTextChange(id, currentText);
     }
   }, [currentText, data.text, id, onTextChange]);
-  const handleKeyDown = (0, import_react28.useCallback)(
+  const handleKeyDown = (0, import_react29.useCallback)(
     (event) => {
       if (event.key === "Enter" && !event.shiftKey) {
         event.preventDefault();
@@ -3687,7 +3693,7 @@ var NoteNode_default = (0, import_react28.memo)(function NoteNodeComponent({
     },
     [handleBlur, data.text]
   );
-  const handleColorChange = (0, import_react28.useCallback)(
+  const handleColorChange = (0, import_react29.useCallback)(
     (newColor) => {
       if (onColorChange) {
         onColorChange(id, newColor);
@@ -3697,18 +3703,18 @@ var NoteNode_default = (0, import_react28.memo)(function NoteNodeComponent({
   );
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "relative group", style: FULL_SIZE_STYLE, children: [
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      import_react27.Handle,
+      import_react28.Handle,
       {
         type: "target",
-        position: import_react27.Position.Left,
+        position: import_react28.Position.Left,
         className: "!left-[-1px] !w-2 !h-2 !bg-gray-400 !border !border-gray-500 !rounded-full !z-10"
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      import_react27.Handle,
+      import_react28.Handle,
       {
         type: "source",
-        position: import_react27.Position.Right,
+        position: import_react28.Position.Right,
         className: "!right-[-1px] !w-2 !h-2 !bg-gray-400 !border !border-gray-500 !rounded-full !z-10"
       }
     ),
@@ -3774,8 +3780,8 @@ var NoteNode_default = (0, import_react28.memo)(function NoteNodeComponent({
 });
 
 // src/nodes/Flow.tsx
-var import_react29 = require("react");
-var import_react30 = require("@xyflow/react");
+var import_react30 = require("react");
+var import_react31 = require("@xyflow/react");
 var ContextMenu = __toESM(require("@radix-ui/react-context-menu"));
 
 // src/utils/url-builder.ts
@@ -3901,7 +3907,7 @@ var import_jsx_runtime15 = require("react/jsx-runtime");
 function classNames11(...classes) {
   return classes.filter(Boolean).join(" ");
 }
-var Flow_default = (0, import_react29.memo)(function FlowNode({
+var Flow_default = (0, import_react30.memo)(function FlowNode({
   data,
   sourcePosition,
   targetPosition
@@ -3909,7 +3915,8 @@ var Flow_default = (0, import_react29.memo)(function FlowNode({
   const { mode, flow } = data;
   const { id, version, owners = EMPTY_ARRAY, name, styles } = flow.data;
   const { node: { color = "teal", label } = {}, icon = "QueueListIcon" } = styles || {};
-  const Icon = (0, import_react29.useMemo)(() => getIcon(icon), [icon]);
+  const Icon = (0, import_react30.useMemo)(() => getIcon(icon), [icon]);
+  const portalContainer = usePortalContainer();
   const nodeLabel = label || flow?.data?.sidebar?.badge || "Flow";
   const fontSize = nodeLabel.length > 10 ? "7px" : "9px";
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(ContextMenu.Root, { children: [
@@ -3942,8 +3949,8 @@ var Flow_default = (0, import_react29.memo)(function FlowNode({
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "p-1 flex-1", children: [
-            targetPosition && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react30.Handle, { type: "target", position: targetPosition }),
-            sourcePosition && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react30.Handle, { type: "source", position: sourcePosition }),
+            targetPosition && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react31.Handle, { type: "target", position: targetPosition }),
+            sourcePosition && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react31.Handle, { type: "source", position: sourcePosition }),
             /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
               "div",
               {
@@ -3973,7 +3980,7 @@ var Flow_default = (0, import_react29.memo)(function FlowNode({
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ContextMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(ContextMenu.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__ */ (0, import_jsx_runtime15.jsx)(ContextMenu.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(ContextMenu.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__ */ (0, import_jsx_runtime15.jsx)(
         ContextMenu.Item,
         {
@@ -4006,14 +4013,14 @@ var Flow_default = (0, import_react29.memo)(function FlowNode({
 });
 
 // src/nodes/Entity.tsx
-var import_react31 = require("@xyflow/react");
+var import_react32 = require("@xyflow/react");
 var ContextMenu2 = __toESM(require("@radix-ui/react-context-menu"));
-var import_react32 = require("react");
+var import_react33 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function classNames12(...classes) {
   return classes.filter(Boolean).join(" ");
 }
-var Entity_default = (0, import_react32.memo)(function EntityNode({
+var Entity_default = (0, import_react33.memo)(function EntityNode({
   data,
   sourcePosition,
   targetPosition
@@ -4031,8 +4038,9 @@ var Entity_default = (0, import_react32.memo)(function EntityNode({
     node: { color: _color = "blue", label: _label } = {},
     icon = "CubeIcon"
   } = styles || {};
-  const Icon = (0, import_react32.useMemo)(() => getIcon(icon), [icon]);
-  const [hoveredProperty, setHoveredProperty] = (0, import_react32.useState)(null);
+  const Icon = (0, import_react33.useMemo)(() => getIcon(icon), [icon]);
+  const [hoveredProperty, setHoveredProperty] = (0, import_react33.useState)(null);
+  const portalContainer = usePortalContainer();
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(ContextMenu2.Root, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ContextMenu2.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
       "div",
@@ -4078,20 +4086,20 @@ var Entity_default = (0, import_react32.memo)(function EntityNode({
                 onMouseLeave: () => setHoveredProperty(null),
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                    import_react31.Handle,
+                    import_react32.Handle,
                     {
                       type: "target",
-                      position: import_react31.Position.Left,
+                      position: import_react32.Position.Left,
                       id: `${property.name}-target`,
                       className: "!w-3 !h-3 !bg-[rgb(var(--ec-card-bg))] !border-2 !border-[rgb(var(--ec-page-border))] !rounded-full !left-[-0px]",
                       style: HANDLE_LEFT_OFFSET_STYLE
                     }
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                    import_react31.Handle,
+                    import_react32.Handle,
                     {
                       type: "source",
-                      position: import_react31.Position.Right,
+                      position: import_react32.Position.Right,
                       id: `${property.name}-source`,
                       className: "!w-3 !h-3 !bg-[rgb(var(--ec-card-bg))] !border-2 !border-[rgb(var(--ec-page-border))] !rounded-full !right-[-0px]",
                       style: HANDLE_RIGHT_OFFSET_STYLE
@@ -4121,13 +4129,13 @@ var Entity_default = (0, import_react32.memo)(function EntityNode({
             );
           }) }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("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__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-            targetPosition && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react31.Handle, { type: "target", position: targetPosition }),
-            sourcePosition && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react31.Handle, { type: "source", position: sourcePosition })
+            targetPosition && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react32.Handle, { type: "target", position: targetPosition }),
+            sourcePosition && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react32.Handle, { type: "source", position: sourcePosition })
           ] })
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ContextMenu2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ContextMenu2.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       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))]",
@@ -4146,14 +4154,14 @@ var Entity_default = (0, import_react32.memo)(function EntityNode({
 });
 
 // src/nodes/User.tsx
-var import_react33 = require("react");
+var import_react34 = require("react");
 var import_solid = require("@heroicons/react/20/solid");
-var import_react34 = require("@xyflow/react");
+var import_react35 = require("@xyflow/react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 function classNames13(...classes) {
   return classes.filter(Boolean).join(" ");
 }
-var User_default = (0, import_react33.memo)(function UserNode({
+var User_default = (0, import_react34.memo)(function UserNode({
   data,
   sourcePosition,
   targetPosition
@@ -4195,8 +4203,8 @@ var User_default = (0, import_react33.memo)(function UserNode({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "p-1 flex-1", children: [
-          targetPosition && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react34.Handle, { type: "target", position: targetPosition }),
-          sourcePosition && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react34.Handle, { type: "source", position: sourcePosition }),
+          targetPosition && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react35.Handle, { type: "target", position: targetPosition }),
+          sourcePosition && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react35.Handle, { type: "source", position: sourcePosition }),
           (!summary || mode !== "full") && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "h-full ", children: [
             /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-sm font-bold block pb-0.5 w-full", children: name }),
             mode === "simple" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "w-full text-right", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: " w-full text-[10px] text-[rgb(var(--ec-page-text-muted))] font-light block pt-0.5 pb-0.5 ", children: "Event" }) })
@@ -4220,13 +4228,13 @@ var User_default = (0, import_react33.memo)(function UserNode({
 });
 
 // src/nodes/Step.tsx
-var import_react35 = require("react");
-var import_react36 = require("@xyflow/react");
+var import_react36 = require("react");
+var import_react37 = require("@xyflow/react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 function classNames14(...classes) {
   return classes.filter(Boolean).join(" ");
 }
-var Step_default = (0, import_react35.memo)(function StepNode({
+var Step_default = (0, import_react36.memo)(function StepNode({
   data,
   sourcePosition,
   targetPosition
@@ -4260,18 +4268,18 @@ var Step_default = (0, import_react35.memo)(function StepNode({
         ),
         /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "p-1 flex-1", children: [
           /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-            import_react36.Handle,
+            import_react37.Handle,
             {
               type: "target",
-              position: targetPosition || import_react36.Position.Left,
+              position: targetPosition || import_react37.Position.Left,
               style: HIDDEN_HANDLE_STYLE
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-            import_react36.Handle,
+            import_react37.Handle,
             {
               type: "source",
-              position: sourcePosition || import_react36.Position.Right,
+              position: sourcePosition || import_react37.Position.Right,
               style: HIDDEN_HANDLE_STYLE
             }
           ),
@@ -4295,21 +4303,22 @@ var Step_default = (0, import_react35.memo)(function StepNode({
 });
 
 // src/nodes/Domain.tsx
-var import_react37 = require("@xyflow/react");
+var import_react38 = require("@xyflow/react");
 var ContextMenu3 = __toESM(require("@radix-ui/react-context-menu"));
-var import_react38 = require("react");
+var import_react39 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var Domain_default = (0, import_react38.memo)(function DomainNode({ data, id: nodeId }) {
+var Domain_default = (0, import_react39.memo)(function DomainNode({ data, id: nodeId }) {
   const { mode, domain } = data;
-  const reactFlow = (0, import_react37.useReactFlow)();
-  const [highlightedServices, setHighlightedServices] = (0, import_react38.useState)(
+  const reactFlow = (0, import_react38.useReactFlow)();
+  const [highlightedServices, setHighlightedServices] = (0, import_react39.useState)(
     /* @__PURE__ */ new Set()
   );
   const { id, version, name, services = [], styles } = domain.data;
   const { icon = "RectangleGroupIcon" } = styles || {};
-  const Icon = (0, import_react38.useMemo)(() => getIcon(icon), [icon]);
-  const ServerIcon3 = (0, import_react38.useMemo)(() => getIcon("ServerIcon"), []);
-  const handleSelectionChange = (0, import_react38.useCallback)(
+  const Icon = (0, import_react39.useMemo)(() => getIcon(icon), [icon]);
+  const ServerIcon3 = (0, import_react39.useMemo)(() => getIcon("ServerIcon"), []);
+  const portalContainer = usePortalContainer();
+  const handleSelectionChange = (0, import_react39.useCallback)(
     ({ nodes: selectedNodes }) => {
       if (selectedNodes.length === 0) {
         setHighlightedServices(/* @__PURE__ */ new Set());
@@ -4338,7 +4347,7 @@ var Domain_default = (0, import_react38.memo)(function DomainNode({ data, id: no
     },
     [nodeId, reactFlow]
   );
-  (0, import_react37.useOnSelectionChange)({
+  (0, import_react38.useOnSelectionChange)({
     onChange: handleSelectionChange
   });
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(ContextMenu3.Root, { children: [
@@ -4362,20 +4371,20 @@ var Domain_default = (0, import_react38.memo)(function DomainNode({ data, id: no
               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__ */ (0, import_jsx_runtime19.jsx)(
-                  import_react37.Handle,
+                  import_react38.Handle,
                   {
                     type: "target",
-                    position: import_react37.Position.Left,
+                    position: import_react38.Position.Left,
                     id: `${service.data.id}-target`,
                     className: "!left-[-1px] !w-2 !h-2 !bg-gray-400 !border !border-gray-500 !rounded-full !z-10",
                     style: HANDLE_LEFT_STYLE
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                  import_react37.Handle,
+                  import_react38.Handle,
                   {
                     type: "source",
-                    position: import_react37.Position.Right,
+                    position: import_react38.Position.Right,
                     id: `${service.data.id}-source`,
                     className: "!right-[-1px] !w-2 !h-2 !bg-gray-400 !border !border-gray-500 !rounded-full !z-10",
                     style: HANDLE_RIGHT_STYLE
@@ -4392,7 +4401,7 @@ var Domain_default = (0, import_react38.memo)(function DomainNode({ data, id: no
               ]
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ContextMenu3.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(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__ */ (0, import_jsx_runtime19.jsx)(ContextMenu3.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(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__ */ (0, import_jsx_runtime19.jsx)(
               ContextMenu3.Item,
               {
@@ -4417,7 +4426,7 @@ var Domain_default = (0, import_react38.memo)(function DomainNode({ data, id: no
         ] }, `${service.data.id}-${index}`);
       }) })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ContextMenu3.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(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__ */ (0, import_jsx_runtime19.jsx)(ContextMenu3.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(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__ */ (0, import_jsx_runtime19.jsx)(
         ContextMenu3.Item,
         {
@@ -4443,7 +4452,7 @@ var Domain_default = (0, import_react38.memo)(function DomainNode({ data, id: no
 });
 
 // src/nodes/GroupNode.tsx
-var import_react39 = require("react");
+var import_react40 = require("react");
 var import_lucide_react17 = require("lucide-react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var GROUP_CONTAINER_STYLE = {
@@ -4517,7 +4526,7 @@ var GROUP_VERSION_STYLE = {
 };
 var GROUP_ICON_COLOR_STYLE = { color: "#7c3aed" };
 var GROUP_ICON_WHITE_STYLE = { color: "white" };
-var GroupNode_default = (0, import_react39.memo)(function GroupNode({ data }) {
+var GroupNode_default = (0, import_react40.memo)(function GroupNode({ data }) {
   const { domain } = data;
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: GROUP_CONTAINER_STYLE, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: GROUP_HEADER_STYLE, children: [
     /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: GROUP_WATERMARK_STYLE, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react17.BoxesIcon, { size: 28, strokeWidth: 2, style: GROUP_ICON_COLOR_STYLE }) }),
@@ -4540,16 +4549,16 @@ var GroupNode_default = (0, import_react39.memo)(function GroupNode({ data }) {
 });
 
 // src/nodes/Custom.tsx
-var import_react40 = require("@xyflow/react");
+var import_react41 = require("@xyflow/react");
 var Icons = __toESM(require("@heroicons/react/24/solid"));
-var import_react41 = require("react");
+var import_react42 = require("react");
 var ContextMenu4 = __toESM(require("@radix-ui/react-context-menu"));
 var Tooltip = __toESM(require("@radix-ui/react-tooltip"));
 var import_jsx_runtime21 = require("react/jsx-runtime");
 function classNames15(...classes) {
   return classes.filter(Boolean).join(" ");
 }
-var Custom_default = (0, import_react41.memo)(function UserNode2({
+var Custom_default = (0, import_react42.memo)(function UserNode2({
   data,
   sourcePosition,
   targetPosition
@@ -4566,10 +4575,11 @@ var Custom_default = (0, import_react41.memo)(function UserNode2({
     menu = EMPTY_ARRAY,
     height = 5
   } = customProps;
-  const IconComponent = (0, import_react41.useMemo)(() => Icons[icon], [icon]);
+  const IconComponent = (0, import_react42.useMemo)(() => Icons[icon], [icon]);
   const { actor: { name: _name } = {} } = step;
   const isLongType = type && type.length > 10;
   const displayType = isLongType ? `${type.substring(0, 10)}...` : type;
+  const portalContainer = usePortalContainer();
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(ContextMenu4.Root, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ContextMenu4.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
       "div",
@@ -4600,7 +4610,7 @@ var Custom_default = (0, import_react41.memo)(function UserNode2({
                       children: displayType
                     }
                   ) }),
-                  isLongType && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Tooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+                  isLongType && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Tooltip.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
                     Tooltip.Content,
                     {
                       className: "bg-slate-800 text-white rounded px-2 py-1 text-xs shadow-md z-50",
@@ -4617,8 +4627,8 @@ var Custom_default = (0, import_react41.memo)(function UserNode2({
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "p-1 flex-1", children: [
-            targetPosition && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react40.Handle, { type: "target", position: targetPosition }),
-            sourcePosition && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react40.Handle, { type: "source", position: sourcePosition }),
+            targetPosition && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react41.Handle, { type: "target", position: targetPosition }),
+            sourcePosition && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react41.Handle, { type: "source", position: sourcePosition }),
             (!summary || mode !== "full") && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "h-full ", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-sm font-bold block pb-0.5 w-full", children: title }) }),
             summary && mode === "full" && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
               /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
@@ -4661,7 +4671,7 @@ var Custom_default = (0, import_react41.memo)(function UserNode2({
         ]
       }
     ) }),
-    menu?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ContextMenu4.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ContextMenu4.Content, { className: "min-w-[220px] bg-[rgb(var(--ec-card-bg))] rounded-md p-1 shadow-md border border-[rgb(var(--ec-page-border))]", children: menu?.map((item) => {
+    menu?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ContextMenu4.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ContextMenu4.Content, { className: "min-w-[220px] bg-[rgb(var(--ec-card-bg))] rounded-md p-1 shadow-md border border-[rgb(var(--ec-page-border))]", children: menu?.map((item) => {
       return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         ContextMenu4.Item,
         {
@@ -4675,25 +4685,25 @@ var Custom_default = (0, import_react41.memo)(function UserNode2({
 });
 
 // src/nodes/ExternalSystem2.tsx
-var import_react42 = require("react");
-var import_react43 = require("@xyflow/react");
+var import_react43 = require("react");
+var import_react44 = require("@xyflow/react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
-var ExternalSystem2_default = (0, import_react42.memo)(function ExternalSystemNode(props) {
+var ExternalSystem2_default = (0, import_react43.memo)(function ExternalSystemNode(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "relative", children: [
     /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-      import_react43.Handle,
+      import_react44.Handle,
       {
         type: "target",
-        position: import_react43.Position.Left,
+        position: import_react44.Position.Left,
         style: EXTERNAL_SYSTEM_HANDLE_STYLE,
         className: "bg-gray-500"
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-      import_react43.Handle,
+      import_react44.Handle,
       {
         type: "source",
-        position: import_react43.Position.Right,
+        position: import_react44.Position.Right,
         style: EXTERNAL_SYSTEM_HANDLE_STYLE,
         className: "bg-gray-500"
       }
@@ -4703,9 +4713,9 @@ var ExternalSystem2_default = (0, import_react42.memo)(function ExternalSystemNo
 });
 
 // src/nodes/DataProduct.tsx
-var import_react44 = require("react");
+var import_react45 = require("react");
 var import_lucide_react18 = require("lucide-react");
-var import_react45 = require("@xyflow/react");
+var import_react46 = require("@xyflow/react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 function GlowHandle13({ side }) {
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
@@ -4743,18 +4753,18 @@ function PostItDataProduct(props) {
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-          import_react45.Handle,
+          import_react46.Handle,
           {
             type: "target",
-            position: import_react45.Position.Left,
+            position: import_react46.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-          import_react45.Handle,
+          import_react46.Handle,
           {
             type: "source",
-            position: import_react45.Position.Right,
+            position: import_react46.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
@@ -4830,8 +4840,8 @@ function PostItDataProduct(props) {
 function DefaultDataProduct(props) {
   const { version, name, summary, deprecated, draft, notes } = props.data.dataProduct;
   const mode = props.data.mode || "simple";
-  const targetConnections = (0, import_react45.useHandleConnections)({ type: "target" });
-  const sourceConnections = (0, import_react45.useHandleConnections)({ type: "source" });
+  const targetConnections = (0, import_react46.useHandleConnections)({ type: "target" });
+  const sourceConnections = (0, import_react46.useHandleConnections)({ type: "source" });
   const isDark = useDarkMode();
   const deprecatedStripe = isDark ? "rgba(239,68,68,0.25)" : "rgba(239,68,68,0.1)";
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
@@ -4848,18 +4858,18 @@ function DefaultDataProduct(props) {
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-          import_react45.Handle,
+          import_react46.Handle,
           {
             type: "target",
-            position: import_react45.Position.Left,
+            position: import_react46.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-          import_react45.Handle,
+          import_react46.Handle,
           {
             type: "source",
-            position: import_react45.Position.Right,
+            position: import_react46.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
@@ -4904,7 +4914,7 @@ function DefaultDataProduct(props) {
     }
   );
 }
-var DataProduct_default = (0, import_react44.memo)(function DataProductNode(props) {
+var DataProduct_default = (0, import_react45.memo)(function DataProductNode(props) {
   const nodeStyle = props?.data?.style;
   if (nodeStyle === "post-it") {
     return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PostItDataProduct, { ...props });
@@ -4913,8 +4923,8 @@ var DataProduct_default = (0, import_react44.memo)(function DataProductNode(prop
 });
 
 // src/edges/AnimatedMessageEdge.tsx
-var import_react46 = require("react");
-var import_react47 = require("@xyflow/react");
+var import_react47 = require("react");
+var import_react48 = require("@xyflow/react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 function messageColor(collection) {
   switch (collection) {
@@ -4930,7 +4940,7 @@ function messageColor(collection) {
 }
 var TSPAN_NORMAL_STYLE = { fontStyle: "normal" };
 var TSPAN_ITALIC_STYLE = { fontStyle: "italic" };
-var AnimatedMessageEdge = (0, import_react46.memo)(
+var AnimatedMessageEdge = (0, import_react47.memo)(
   ({
     id,
     sourceX,
@@ -4944,7 +4954,7 @@ var AnimatedMessageEdge = (0, import_react46.memo)(
     markerEnd,
     markerStart
   }) => {
-    const [edgePath, labelX, labelY] = (0, import_react47.getSmoothStepPath)({
+    const [edgePath, labelX, labelY] = (0, import_react48.getSmoothStepPath)({
       sourceX,
       sourceY,
       sourcePosition,
@@ -4957,9 +4967,9 @@ var AnimatedMessageEdge = (0, import_react46.memo)(
     const customColor = data?.customColor || messageColor(collection ?? "default");
     const warning = data?.warning;
     const customColors = Array.isArray(customColor) ? customColor : [customColor];
-    const randomDelay = (0, import_react46.useMemo)(() => Math.random() * 1, []);
+    const randomDelay = (0, import_react47.useMemo)(() => Math.random() * 1, []);
     const opacityClass = opacity === 1 ? "z-30 opacity-100" : "z-30 opacity-10";
-    const animatedNodes = (0, import_react46.useMemo)(
+    const animatedNodes = (0, import_react47.useMemo)(
       () => customColors.map((color, index) => {
         const delay = randomDelay + index * 0.3;
         return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
@@ -5009,8 +5019,8 @@ var AnimatedMessageEdge = (0, import_react46.memo)(
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [edgePath, id, customColors.join(","), opacity, randomDelay]
     );
-    const lines = (0, import_react46.useMemo)(() => String(label ?? "").split("\n"), [label]);
-    const longestLine = (0, import_react46.useMemo)(
+    const lines = (0, import_react47.useMemo)(() => String(label ?? "").split("\n"), [label]);
+    const longestLine = (0, import_react47.useMemo)(
       () => lines.reduce(
         (a, b) => a.length > b.length ? a : b,
         ""
@@ -5020,7 +5030,7 @@ var AnimatedMessageEdge = (0, import_react46.memo)(
     const labelWidth = Math.max(longestLine.length * 6.5 + 16, 50);
     return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-        import_react47.BaseEdge,
+        import_react48.BaseEdge,
         {
           id,
           path: edgePath,
@@ -5076,12 +5086,12 @@ var AnimatedMessageEdge = (0, import_react46.memo)(
 var AnimatedMessageEdge_default = AnimatedMessageEdge;
 
 // src/edges/MultilineEdgeLabel.tsx
-var import_react48 = require("react");
-var import_react49 = require("@xyflow/react");
+var import_react49 = require("react");
+var import_react50 = require("@xyflow/react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var TSPAN_NORMAL_STYLE2 = { fontStyle: "normal" };
 var TSPAN_ITALIC_STYLE2 = { fontStyle: "italic" };
-var MultilineEdgeLabel_default = (0, import_react48.memo)(function MultilineEdgeLabel(props) {
+var MultilineEdgeLabel_default = (0, import_react49.memo)(function MultilineEdgeLabel(props) {
   const {
     id,
     sourceX,
@@ -5097,7 +5107,7 @@ var MultilineEdgeLabel_default = (0, import_react48.memo)(function MultilineEdge
     style,
     selected
   } = props;
-  const [edgePath, labelX, labelY] = (0, import_react49.getSmoothStepPath)({
+  const [edgePath, labelX, labelY] = (0, import_react50.getSmoothStepPath)({
     sourceX,
     sourceY,
     targetX,
@@ -5105,7 +5115,7 @@ var MultilineEdgeLabel_default = (0, import_react48.memo)(function MultilineEdge
     sourcePosition,
     targetPosition
   });
-  const lines = (0, import_react48.useMemo)(() => String(label ?? "").split("\n"), [label]);
+  const lines = (0, import_react49.useMemo)(() => String(label ?? "").split("\n"), [label]);
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "path",
@@ -5144,8 +5154,8 @@ var MultilineEdgeLabel_default = (0, import_react48.memo)(function MultilineEdge
 });
 
 // src/edges/FlowEdge.tsx
-var import_react50 = require("react");
-var import_react51 = require("@xyflow/react");
+var import_react51 = require("react");
+var import_react52 = require("@xyflow/react");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 function messageColor2(collection) {
   switch (collection) {
@@ -5160,7 +5170,7 @@ function messageColor2(collection) {
   }
 }
 var EMPTY_STYLE = {};
-var FlowEdge_default = (0, import_react50.memo)(function CustomEdge({
+var FlowEdge_default = (0, import_react51.memo)(function CustomEdge({
   id,
   sourceX,
   sourceY,
@@ -5174,7 +5184,7 @@ var FlowEdge_default = (0, import_react50.memo)(function CustomEdge({
   labelStyle,
   data
 }) {
-  const [edgePath, labelX, labelY] = (0, import_react51.getSmoothStepPath)({
+  const [edgePath, labelX, labelY] = (0, import_react52.getSmoothStepPath)({
     sourceX,
     sourceY,
     sourcePosition,
@@ -5182,14 +5192,14 @@ var FlowEdge_default = (0, import_react50.memo)(function CustomEdge({
     targetY,
     targetPosition
   });
-  const randomDelay = (0, import_react50.useMemo)(() => Math.random() * 1, []);
+  const randomDelay = (0, import_react51.useMemo)(() => Math.random() * 1, []);
   const collection = data?.message?.collection;
   const opacity = data?.opacity ?? 1;
-  const mergedStyle = (0, import_react50.useMemo)(
+  const mergedStyle = (0, import_react51.useMemo)(
     () => ({ ...EDGE_FLOW_BASE_STYLE, ...style }),
     [style]
   );
-  const labelPositionStyle = (0, import_react50.useMemo)(
+  const labelPositionStyle = (0, import_react51.useMemo)(
     () => ({
       position: "absolute",
       transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
@@ -5199,7 +5209,7 @@ var FlowEdge_default = (0, import_react50.memo)(function CustomEdge({
     [labelX, labelY, labelStyle]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react51.BaseEdge, { path: edgePath, markerEnd, style: mergedStyle }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react52.BaseEdge, { path: edgePath, markerEnd, style: mergedStyle }),
     data?.animated && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "g",
       {
@@ -5226,7 +5236,7 @@ var FlowEdge_default = (0, import_react50.memo)(function CustomEdge({
         )
       }
     ),
-    label && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react51.EdgeLabelRenderer, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    label && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react52.EdgeLabelRenderer, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "div",
       {
         style: labelPositionStyle,
@@ -5238,34 +5248,34 @@ var FlowEdge_default = (0, import_react50.memo)(function CustomEdge({
 });
 
 // src/components/VisualiserSearch.tsx
-var import_react52 = require("react");
+var import_react53 = require("react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
-var VisualiserSearch = (0, import_react52.memo)(
-  (0, import_react52.forwardRef)(
+var VisualiserSearch = (0, import_react53.memo)(
+  (0, import_react53.forwardRef)(
     ({ nodes, onNodeSelect, onClear, onPaneClick: _onPaneClick }, ref) => {
-      const [searchQuery, setSearchQuery] = (0, import_react52.useState)("");
-      const [filteredSuggestions, setFilteredSuggestions] = (0, import_react52.useState)([]);
-      const [showSuggestions, setShowSuggestions] = (0, import_react52.useState)(false);
-      const [selectedSuggestionIndex, setSelectedSuggestionIndex] = (0, import_react52.useState)(-1);
-      const searchInputRef = (0, import_react52.useRef)(null);
-      const containerRef = (0, import_react52.useRef)(null);
-      const hideSuggestions = (0, import_react52.useCallback)(() => {
+      const [searchQuery, setSearchQuery] = (0, import_react53.useState)("");
+      const [filteredSuggestions, setFilteredSuggestions] = (0, import_react53.useState)([]);
+      const [showSuggestions, setShowSuggestions] = (0, import_react53.useState)(false);
+      const [selectedSuggestionIndex, setSelectedSuggestionIndex] = (0, import_react53.useState)(-1);
+      const searchInputRef = (0, import_react53.useRef)(null);
+      const containerRef = (0, import_react53.useRef)(null);
+      const hideSuggestions = (0, import_react53.useCallback)(() => {
         setShowSuggestions(false);
         setSelectedSuggestionIndex(-1);
       }, []);
-      (0, import_react52.useImperativeHandle)(
+      (0, import_react53.useImperativeHandle)(
         ref,
         () => ({
           hideSuggestions
         }),
         [hideSuggestions]
       );
-      const getNodeDisplayName = (0, import_react52.useCallback)((node) => {
+      const getNodeDisplayName = (0, import_react53.useCallback)((node) => {
         const name = node.data?.message?.data?.name || node.data?.service?.data?.name || node.data?.domain?.data?.name || node.data?.entity?.data?.name || node.data?.name || node.id;
         const version = node.data?.message?.data?.version || node.data?.service?.data?.version || node.data?.domain?.data?.version || node.data?.entity?.data?.version || node.data?.version;
         return version ? `${name} (v${version})` : name;
       }, []);
-      const getNodeTypeColorClass = (0, import_react52.useCallback)((nodeType) => {
+      const getNodeTypeColorClass = (0, import_react53.useCallback)((nodeType) => {
         const colorClasses = {
           events: "bg-orange-600 text-white",
           services: "bg-pink-600 text-white",
@@ -5282,7 +5292,7 @@ var VisualiserSearch = (0, import_react52.memo)(
         };
         return colorClasses[nodeType] || "bg-gray-100 text-gray-700";
       }, []);
-      const handleSearchChange = (0, import_react52.useCallback)(
+      const handleSearchChange = (0, import_react53.useCallback)(
         (event) => {
           const query = event.target.value;
           setSearchQuery(query);
@@ -5302,14 +5312,14 @@ var VisualiserSearch = (0, import_react52.memo)(
         },
         [nodes, getNodeDisplayName]
       );
-      const handleSearchFocus = (0, import_react52.useCallback)(() => {
+      const handleSearchFocus = (0, import_react53.useCallback)(() => {
         if (searchQuery.length === 0) {
           setFilteredSuggestions(nodes);
         }
         setShowSuggestions(true);
         setSelectedSuggestionIndex(-1);
       }, [nodes, searchQuery]);
-      const handleSuggestionClick = (0, import_react52.useCallback)(
+      const handleSuggestionClick = (0, import_react53.useCallback)(
         (node) => {
           setSearchQuery(getNodeDisplayName(node));
           setShowSuggestions(false);
@@ -5317,7 +5327,7 @@ var VisualiserSearch = (0, import_react52.memo)(
         },
         [onNodeSelect, getNodeDisplayName]
       );
-      const handleSearchKeyDown = (0, import_react52.useCallback)(
+      const handleSearchKeyDown = (0, import_react53.useCallback)(
         (event) => {
           if (!showSuggestions || filteredSuggestions.length === 0) return;
           switch (event.key) {
@@ -5354,7 +5364,7 @@ var VisualiserSearch = (0, import_react52.memo)(
           handleSuggestionClick
         ]
       );
-      const clearSearch = (0, import_react52.useCallback)(() => {
+      const clearSearch = (0, import_react53.useCallback)(() => {
         setSearchQuery("");
         setShowSuggestions(false);
         setFilteredSuggestions([]);
@@ -5364,7 +5374,7 @@ var VisualiserSearch = (0, import_react52.memo)(
           searchInputRef.current.focus();
         }
       }, [onClear]);
-      (0, import_react52.useEffect)(() => {
+      (0, import_react53.useEffect)(() => {
         const handleClickOutside = (event) => {
           if (containerRef.current && !containerRef.current.contains(event.target)) {
             setShowSuggestions(false);
@@ -5448,35 +5458,35 @@ VisualiserSearch.displayName = "VisualiserSearch";
 var VisualiserSearch_default = VisualiserSearch;
 
 // src/components/StepWalkthrough.tsx
-var import_react53 = require("react");
+var import_react54 = require("react");
 var import_outline = require("@heroicons/react/24/outline");
 var import_jsx_runtime28 = require("react/jsx-runtime");
-var StepWalkthrough_default = (0, import_react53.memo)(function StepWalkthrough({
+var StepWalkthrough_default = (0, import_react54.memo)(function StepWalkthrough({
   nodes,
   edges,
   isFlowVisualization,
   onStepChange,
   mode = "full"
 }) {
-  const [currentNodeId, setCurrentNodeId] = (0, import_react53.useState)(null);
-  const [pathHistory, setPathHistory] = (0, import_react53.useState)([]);
-  const [currentStepIndex, setCurrentStepIndex] = (0, import_react53.useState)(-1);
-  const [availablePaths, setAvailablePaths] = (0, import_react53.useState)([]);
-  const [selectedPathIndex, setSelectedPathIndex] = (0, import_react53.useState)(0);
-  const [startNodeId, setStartNodeId] = (0, import_react53.useState)(null);
-  const nodeIdsKeyRef = (0, import_react53.useRef)("");
+  const [currentNodeId, setCurrentNodeId] = (0, import_react54.useState)(null);
+  const [pathHistory, setPathHistory] = (0, import_react54.useState)([]);
+  const [currentStepIndex, setCurrentStepIndex] = (0, import_react54.useState)(-1);
+  const [availablePaths, setAvailablePaths] = (0, import_react54.useState)([]);
+  const [selectedPathIndex, setSelectedPathIndex] = (0, import_react54.useState)(0);
+  const [startNodeId, setStartNodeId] = (0, import_react54.useState)(null);
+  const nodeIdsKeyRef = (0, import_react54.useRef)("");
   const computedNodeIdsKey = nodes.map((n) => n.id).join(",");
   if (computedNodeIdsKey !== nodeIdsKeyRef.current) {
     nodeIdsKeyRef.current = computedNodeIdsKey;
   }
   const nodeIdsKey = nodeIdsKeyRef.current;
-  const edgeKeyRef = (0, import_react53.useRef)("");
+  const edgeKeyRef = (0, import_react54.useRef)("");
   const computedEdgeKey = edges.map((e) => `${e.source}-${e.target}`).join(",");
   if (computedEdgeKey !== edgeKeyRef.current) {
     edgeKeyRef.current = computedEdgeKey;
   }
   const edgeKey = edgeKeyRef.current;
-  (0, import_react53.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     if (isFlowVisualization && nodes.length > 0) {
       const incomingEdgeMap = /* @__PURE__ */ new Map();
       nodes.forEach((node) => incomingEdgeMap.set(node.id, 0));
@@ -5497,7 +5507,7 @@ var StepWalkthrough_default = (0, import_react53.memo)(function StepWalkthrough(
       }
     }
   }, [nodeIdsKey, edgeKey, isFlowVisualization, startNodeId]);
-  (0, import_react53.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     if (currentNodeId) {
       const outgoingEdges = edges.filter(
         (edge) => edge.source === currentNodeId
@@ -5516,7 +5526,7 @@ var StepWalkthrough_default = (0, import_react53.memo)(function StepWalkthrough(
       setAvailablePaths([]);
     }
   }, [currentNodeId, nodeIdsKey, edgeKey]);
-  const handleNextStep = (0, import_react53.useCallback)(() => {
+  const handleNextStep = (0, import_react54.useCallback)(() => {
     if (currentStepIndex === -1) {
       if (startNodeId) {
         setPathHistory([startNodeId]);
@@ -5543,7 +5553,7 @@ var StepWalkthrough_default = (0, import_react53.memo)(function StepWalkthrough(
     currentNodeId,
     onStepChange
   ]);
-  const handlePreviousStep = (0, import_react53.useCallback)(() => {
+  const handlePreviousStep = (0, import_react54.useCallback)(() => {
     if (currentStepIndex > 0) {
       const newIndex = currentStepIndex - 1;
       const prevNodeId = pathHistory[newIndex];
@@ -5556,10 +5566,10 @@ var StepWalkthrough_default = (0, import_react53.memo)(function StepWalkthrough(
       onStepChange(null);
     }
   }, [currentStepIndex, pathHistory, onStepChange]);
-  const handlePathSelection = (0, import_react53.useCallback)((index) => {
+  const handlePathSelection = (0, import_react54.useCallback)((index) => {
     setSelectedPathIndex(index);
   }, []);
-  const handleFinish = (0, import_react53.useCallback)(() => {
+  const handleFinish = (0, import_react54.useCallback)(() => {
     setCurrentNodeId(null);
     setCurrentStepIndex(-1);
     setPathHistory([]);
@@ -5568,7 +5578,7 @@ var StepWalkthrough_default = (0, import_react53.memo)(function StepWalkthrough(
   if (!isFlowVisualization || nodes.length === 0 || mode !== "full") {
     return null;
   }
-  const { title, description } = (0, import_react53.useMemo)(() => {
+  const { title, description } = (0, import_react54.useMemo)(() => {
     if (currentStepIndex === -1) {
       return {
         title: "Walk through business flow",
@@ -5681,10 +5691,10 @@ var StepWalkthrough_default = (0, import_react53.memo)(function StepWalkthrough(
 });
 
 // src/components/StudioModal.tsx
-var import_react54 = require("react");
+var import_react55 = require("react");
 var Dialog2 = __toESM(require("@radix-ui/react-dialog"));
 var import_lucide_react19 = require("lucide-react");
-var import_react55 = require("@xyflow/react");
+var import_react56 = require("@xyflow/react");
 
 // src/utils/export-node-graph.ts
 var exportNodeGraphForStudio = (data) => {
@@ -5749,9 +5759,10 @@ var exportNodeGraphForStudio = (data) => {
 // src/components/StudioModal.tsx
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var StudioModal = ({ isOpen, onClose }) => {
-  const [copySuccess, setCopySuccess] = (0, import_react54.useState)(false);
-  const { toObject } = (0, import_react55.useReactFlow)();
-  const handleCopyToClipboard = (0, import_react54.useCallback)(async () => {
+  const [copySuccess, setCopySuccess] = (0, import_react55.useState)(false);
+  const portalContainer = usePortalContainer();
+  const { toObject } = (0, import_react56.useReactFlow)();
+  const handleCopyToClipboard = (0, import_react55.useCallback)(async () => {
     const visualizerData = toObject();
     const studioData = exportNodeGraphForStudio(visualizerData);
     try {
@@ -5777,7 +5788,7 @@ var StudioModal = ({ isOpen, onClose }) => {
     );
     onClose();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Dialog2.Root, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Dialog2.Portal, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Dialog2.Root, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Dialog2.Portal, { container: portalContainer, children: [
     /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Dialog2.Overlay, { className: "fixed inset-0 bg-black/50 data-[state=open]:animate-overlayShow z-50" }),
     /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(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__ */ (0, import_jsx_runtime29.jsx)(Dialog2.Title, { className: "text-lg font-semibold text-gray-900 mb-3", children: "Open in EventCatalog Studio" }),
@@ -5848,14 +5859,14 @@ var StudioModal = ({ isOpen, onClose }) => {
 var StudioModal_default = StudioModal;
 
 // src/components/FocusModeModal.tsx
-var import_react60 = require("react");
+var import_react61 = require("react");
 var Dialog3 = __toESM(require("@radix-ui/react-dialog"));
 var import_lucide_react21 = require("lucide-react");
-var import_react61 = require("@xyflow/react");
+var import_react62 = require("@xyflow/react");
 
 // src/components/FocusMode/FocusModeContent.tsx
-var import_react58 = require("react");
-var import_react59 = require("@xyflow/react");
+var import_react59 = require("react");
+var import_react60 = require("@xyflow/react");
 
 // src/components/FocusMode/utils.ts
 function getConnectedNodes(centerNodeId, nodes, edges) {
@@ -5936,7 +5947,7 @@ function getNodeDocUrl(node) {
 }
 
 // src/components/FocusMode/FocusModeNodeActions.tsx
-var import_react56 = require("@xyflow/react");
+var import_react57 = require("@xyflow/react");
 var import_lucide_react20 = require("lucide-react");
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var FocusModeNodeActions = ({
@@ -5944,13 +5955,13 @@ var FocusModeNodeActions = ({
   isCenter,
   onSwitch
 }) => {
-  const { zoom } = (0, import_react56.useViewport)();
+  const { zoom } = (0, import_react57.useViewport)();
   if (node.type === "placeholder") return null;
   const docUrl = getNodeDocUrl(node);
   const direction = (node.position?.x ?? 0) < 0 ? "left" : "right";
-  const baseButtonSize = 32;
-  const baseIconSize = 16;
-  const scaleFactor = Math.max(0.6, Math.min(1, zoom));
+  const baseButtonSize = 24;
+  const baseIconSize = 12;
+  const scaleFactor = Math.max(0.4, Math.min(1, zoom));
   const buttonSize = Math.round(baseButtonSize * scaleFactor);
   const iconSize = Math.round(baseIconSize * scaleFactor);
   const handleSwitch = (e) => {
@@ -5966,10 +5977,10 @@ var FocusModeNodeActions = ({
   if (isCenter) {
     if (!docUrl) return null;
     return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-      import_react56.NodeToolbar,
+      import_react57.NodeToolbar,
       {
         nodeId: node.id,
-        position: import_react56.Position.Bottom,
+        position: import_react57.Position.Bottom,
         isVisible: true,
         offset: -16,
         children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
@@ -5993,10 +6004,10 @@ var FocusModeNodeActions = ({
     );
   }
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-    import_react56.NodeToolbar,
+    import_react57.NodeToolbar,
     {
       nodeId: node.id,
-      position: import_react56.Position.Bottom,
+      position: import_react57.Position.Bottom,
       isVisible: true,
       offset: -16,
       children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
@@ -6034,7 +6045,7 @@ var FocusModeNodeActions = ({
 var FocusModeNodeActions_default = FocusModeNodeActions;
 
 // src/components/FocusMode/FocusModePlaceholder.tsx
-var import_react57 = require("@xyflow/react");
+var import_react58 = require("@xyflow/react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var FocusModePlaceholder = ({
   data
@@ -6047,19 +6058,19 @@ var FocusModePlaceholder = ({
       style: { opacity: 0.6, minHeight: "130px" },
       children: [
         side === "right" && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-          import_react57.Handle,
+          import_react58.Handle,
           {
             type: "target",
-            position: import_react57.Position.Left,
+            position: import_react58.Position.Left,
             style: { visibility: "hidden" }
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "text-center text-sm text-[rgb(var(--ec-page-text-muted))] italic", children: label }),
         side === "left" && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-          import_react57.Handle,
+          import_react58.Handle,
           {
             type: "source",
-            position: import_react57.Position.Right,
+            position: import_react58.Position.Right,
             style: { visibility: "hidden" }
           }
         )
@@ -6082,21 +6093,21 @@ var FocusModeContent = ({
   edgeTypes: edgeTypes2,
   onSwitchCenter
 }) => {
-  const { fitView } = (0, import_react59.useReactFlow)();
-  const [isAnimating, setIsAnimating] = (0, import_react58.useState)(false);
-  const [needsFitView, setNeedsFitView] = (0, import_react58.useState)(false);
-  const [hoveredEdgeId, setHoveredEdgeId] = (0, import_react58.useState)(null);
-  const [isReady, setIsReady] = (0, import_react58.useState)(false);
-  const reactFlowInitialized = (0, import_react58.useRef)(false);
-  const animationTimeoutRef = (0, import_react58.useRef)(null);
-  (0, import_react58.useEffect)(() => {
+  const { fitView } = (0, import_react60.useReactFlow)();
+  const [isAnimating, setIsAnimating] = (0, import_react59.useState)(false);
+  const [needsFitView, setNeedsFitView] = (0, import_react59.useState)(false);
+  const [hoveredEdgeId, setHoveredEdgeId] = (0, import_react59.useState)(null);
+  const [isReady, setIsReady] = (0, import_react59.useState)(false);
+  const reactFlowInitialized = (0, import_react59.useRef)(false);
+  const animationTimeoutRef = (0, import_react59.useRef)(null);
+  (0, import_react59.useEffect)(() => {
     return () => {
       if (animationTimeoutRef.current) {
         clearTimeout(animationTimeoutRef.current);
       }
     };
   }, []);
-  const calculateFocusedGraph = (0, import_react58.useCallback)(
+  const calculateFocusedGraph = (0, import_react59.useCallback)(
     (centerId) => {
       const centerNode = allNodes.find((n) => n.id === centerId);
       if (!centerNode) {
@@ -6179,19 +6190,19 @@ var FocusModeContent = ({
     },
     [allNodes, allEdges]
   );
-  const initialGraph = (0, import_react58.useMemo)(
+  const initialGraph = (0, import_react59.useMemo)(
     () => calculateFocusedGraph(centerNodeId),
     [centerNodeId, calculateFocusedGraph]
   );
-  const [displayNodes, setDisplayNodes] = (0, import_react59.useNodesState)(initialGraph.nodes);
-  const [displayEdges, setDisplayEdges] = (0, import_react59.useEdgesState)(initialGraph.edges);
-  (0, import_react58.useEffect)(() => {
+  const [displayNodes, setDisplayNodes] = (0, import_react60.useNodesState)(initialGraph.nodes);
+  const [displayEdges, setDisplayEdges] = (0, import_react60.useEdgesState)(initialGraph.edges);
+  (0, import_react59.useEffect)(() => {
     const { nodes, edges } = calculateFocusedGraph(centerNodeId);
     setDisplayNodes(nodes);
     setDisplayEdges(edges);
     setNeedsFitView(true);
   }, [centerNodeId, calculateFocusedGraph, setDisplayNodes, setDisplayEdges]);
-  (0, import_react58.useEffect)(() => {
+  (0, import_react59.useEffect)(() => {
     if (needsFitView && reactFlowInitialized.current) {
       const timer = setTimeout(() => {
         fitView({ padding: 0.2, duration: 300 });
@@ -6200,14 +6211,14 @@ var FocusModeContent = ({
       return () => clearTimeout(timer);
     }
   }, [needsFitView, displayNodes, fitView]);
-  const handleInit = (0, import_react58.useCallback)(() => {
+  const handleInit = (0, import_react59.useCallback)(() => {
     reactFlowInitialized.current = true;
     requestAnimationFrame(() => {
       fitView({ padding: 0.2, duration: 0 });
       setIsReady(true);
     });
   }, [fitView]);
-  const handleSwitchNode = (0, import_react58.useCallback)(
+  const handleSwitchNode = (0, import_react59.useCallback)(
     (nodeId, direction) => {
       if (nodeId === centerNodeId || isAnimating) return;
       setIsAnimating(true);
@@ -6243,7 +6254,7 @@ var FocusModeContent = ({
     },
     [centerNodeId, isAnimating, setDisplayNodes, onSwitchCenter]
   );
-  const handleNodeClick = (0, import_react58.useCallback)(
+  const handleNodeClick = (0, import_react59.useCallback)(
     (_, clickedNode) => {
       if (clickedNode.id === centerNodeId || isAnimating) return;
       const direction = (clickedNode.position?.x ?? 0) < 0 ? "left" : "right";
@@ -6251,16 +6262,16 @@ var FocusModeContent = ({
     },
     [centerNodeId, isAnimating, handleSwitchNode]
   );
-  const handleEdgeMouseEnter = (0, import_react58.useCallback)(
+  const handleEdgeMouseEnter = (0, import_react59.useCallback)(
     (_, edge) => {
       setHoveredEdgeId(edge.id);
     },
     []
   );
-  const handleEdgeMouseLeave = (0, import_react58.useCallback)(() => {
+  const handleEdgeMouseLeave = (0, import_react59.useCallback)(() => {
     setHoveredEdgeId(null);
   }, []);
-  const edgesWithHover = (0, import_react58.useMemo)(() => {
+  const edgesWithHover = (0, import_react59.useMemo)(() => {
     return displayEdges.map((edge) => {
       if (edge.id === hoveredEdgeId) {
         return {
@@ -6271,7 +6282,7 @@ var FocusModeContent = ({
       return edge;
     });
   }, [displayEdges, hoveredEdgeId]);
-  const mergedNodeTypes = (0, import_react58.useMemo)(
+  const mergedNodeTypes = (0, import_react59.useMemo)(
     () => ({
       ...nodeTypes,
       placeholder: FocusModePlaceholder_default
@@ -6287,7 +6298,7 @@ var FocusModeContent = ({
       className: "h-full w-full focus-mode-container",
       style: { opacity: isReady ? 1 : 0 },
       children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
-        import_react59.ReactFlow,
+        import_react60.ReactFlow,
         {
           nodes: displayNodes,
           edges: edgesWithHover,
@@ -6306,8 +6317,8 @@ var FocusModeContent = ({
           minZoom: 0.3,
           maxZoom: 2,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react59.Background, { color: "rgb(var(--ec-page-border))", gap: 20 }),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react59.Controls, { showInteractive: false }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react60.Background, { color: "rgb(var(--ec-page-border))", gap: 20 }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react60.Controls, { showInteractive: false }),
             displayNodes.map((node, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
               FocusModeNodeActions_default,
               {
@@ -6336,16 +6347,17 @@ var FocusModeModal = ({
   nodeTypes,
   edgeTypes: edgeTypes2
 }) => {
-  const [centerNodeId, setCenterNodeId] = (0, import_react60.useState)(
+  const [centerNodeId, setCenterNodeId] = (0, import_react61.useState)(
     initialNodeId
   );
   const isDark = useDarkMode();
-  (0, import_react60.useEffect)(() => {
+  const portalContainer = usePortalContainer();
+  (0, import_react61.useEffect)(() => {
     if (isOpen && initialNodeId) {
       setCenterNodeId(initialNodeId);
     }
   }, [isOpen, initialNodeId]);
-  const handleSwitchCenter = (0, import_react60.useCallback)(
+  const handleSwitchCenter = (0, import_react61.useCallback)(
     (newCenterNodeId, _direction) => {
       setCenterNodeId(newCenterNodeId);
     },
@@ -6356,151 +6368,150 @@ var FocusModeModal = ({
   if (!centerNodeId) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Dialog3.Root, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-    Dialog3.Portal,
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Dialog3.Root, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Dialog3.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    "div",
     {
-      container: typeof document !== "undefined" ? document.body : void 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-        "div",
-        {
-          className: "fixed inset-0 z-[99999] eventcatalog-visualizer",
-          style: { isolation: "isolate" },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-              Dialog3.Overlay,
-              {
-                style: {
-                  position: "fixed",
-                  inset: 0,
-                  background: isDark ? "rgba(0, 0, 0, 0.75)" : "rgba(15, 23, 42, 0.55)",
-                  backdropFilter: "blur(2px)"
-                }
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-              Dialog3.Content,
-              {
-                style: {
-                  position: "fixed",
-                  inset: "1rem",
-                  borderRadius: 12,
-                  background: isDark ? "#0f172a" : "#ffffff",
-                  border: `1px solid ${isDark ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.08)"}`,
-                  boxShadow: isDark ? "0 24px 48px rgba(0,0,0,0.5)" : "0 24px 48px rgba(0,0,0,0.15)",
-                  outline: "none",
-                  display: "flex",
-                  flexDirection: "column",
-                  overflow: "hidden"
-                },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-                    "div",
-                    {
-                      style: {
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "space-between",
-                        padding: "1rem 1.5rem",
-                        borderBottom: `1px solid ${isDark ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.08)"}`,
-                        flexShrink: 0
-                      },
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-                            "div",
+      className: "eventcatalog-visualizer",
+      style: {
+        position: "fixed",
+        inset: 0,
+        isolation: "isolate",
+        zIndex: 99999
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          Dialog3.Overlay,
+          {
+            style: {
+              position: "fixed",
+              inset: 0,
+              background: isDark ? "rgba(0, 0, 0, 0.75)" : "rgba(15, 23, 42, 0.55)",
+              backdropFilter: "blur(2px)"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+          Dialog3.Content,
+          {
+            style: {
+              position: "fixed",
+              inset: "5%",
+              borderRadius: 12,
+              background: isDark ? "#0f172a" : "#ffffff",
+              border: `1px solid ${isDark ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.08)"}`,
+              boxShadow: isDark ? "0 24px 48px rgba(0,0,0,0.5)" : "0 24px 48px rgba(0,0,0,0.15)",
+              outline: "none",
+              display: "flex",
+              flexDirection: "column",
+              overflow: "hidden"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    padding: "1rem 1.5rem",
+                    borderBottom: `1px solid ${isDark ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.08)"}`,
+                    flexShrink: 0
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                        "div",
+                        {
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            width: 40,
+                            height: 40,
+                            borderRadius: 10,
+                            background: isDark ? "rgba(59, 130, 246, 0.18)" : "rgba(59, 130, 246, 0.12)"
+                          },
+                          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                            import_lucide_react21.FocusIcon,
                             {
                               style: {
-                                display: "flex",
-                                alignItems: "center",
-                                justifyContent: "center",
-                                width: 40,
-                                height: 40,
-                                borderRadius: 10,
-                                background: isDark ? "rgba(59, 130, 246, 0.18)" : "rgba(59, 130, 246, 0.12)"
-                              },
-                              children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-                                import_lucide_react21.FocusIcon,
-                                {
-                                  style: {
-                                    width: 20,
-                                    height: 20,
-                                    color: isDark ? "#93c5fd" : "#2563eb"
-                                  }
-                                }
-                              )
-                            }
-                          ),
-                          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-                              Dialog3.Title,
-                              {
-                                style: {
-                                  fontSize: 18,
-                                  fontWeight: 600,
-                                  color: isDark ? "#f8fafc" : "#0f172a"
-                                },
-                                children: "Focus Mode"
-                              }
-                            ),
-                            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-                              Dialog3.Description,
-                              {
-                                style: {
-                                  marginTop: 2,
-                                  fontSize: 14,
-                                  color: isDark ? "#94a3b8" : "#475569"
-                                },
-                                children: centerNodeInfo ? `Exploring: ${centerNodeInfo.name} - Click on connected nodes to navigate` : "Explore node connections"
+                                width: 20,
+                                height: 20,
+                                color: isDark ? "#93c5fd" : "#2563eb"
                               }
-                            )
-                          ] })
-                        ] }),
-                        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Dialog3.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-                          "button",
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                          Dialog3.Title,
                           {
                             style: {
-                              display: "flex",
-                              alignItems: "center",
-                              justifyContent: "center",
-                              width: 40,
-                              height: 40,
-                              borderRadius: 10,
-                              border: "none",
-                              cursor: "pointer",
-                              background: "transparent",
-                              color: isDark ? "#94a3b8" : "#64748b"
+                              fontSize: 18,
+                              fontWeight: 600,
+                              color: isDark ? "#f8fafc" : "#0f172a"
                             },
-                            "aria-label": "Close",
-                            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react21.XIcon, { style: { width: 20, height: 20 } })
+                            children: "Focus Mode"
                           }
-                        ) })
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { flex: 1, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react61.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-                    FocusModeContent_default,
-                    {
-                      centerNodeId,
-                      nodes,
-                      edges,
-                      nodeTypes,
-                      edgeTypes: edgeTypes2,
-                      onSwitchCenter: handleSwitchCenter
-                    }
-                  ) }) })
-                ]
-              }
-            )
-          ]
-        }
-      )
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                          Dialog3.Description,
+                          {
+                            style: {
+                              marginTop: 2,
+                              fontSize: 14,
+                              color: isDark ? "#94a3b8" : "#475569"
+                            },
+                            children: centerNodeInfo ? `Exploring: ${centerNodeInfo.name} - Click on connected nodes to navigate` : "Explore node connections"
+                          }
+                        )
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Dialog3.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                      "button",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          width: 40,
+                          height: 40,
+                          borderRadius: 10,
+                          border: "none",
+                          cursor: "pointer",
+                          background: "transparent",
+                          color: isDark ? "#94a3b8" : "#64748b"
+                        },
+                        "aria-label": "Close",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react21.XIcon, { style: { width: 20, height: 20 } })
+                      }
+                    ) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { flex: 1, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react62.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                FocusModeContent_default,
+                {
+                  centerNodeId,
+                  nodes,
+                  edges,
+                  nodeTypes,
+                  edgeTypes: edgeTypes2,
+                  onSwitchCenter: handleSwitchCenter
+                }
+              ) }) })
+            ]
+          }
+        )
+      ]
     }
-  ) });
+  ) }) });
 };
 var FocusModeModal_default = FocusModeModal;
 
 // src/components/MermaidView.tsx
-var import_react62 = require("react");
+var import_react63 = require("react");
 var import_lucide_react22 = require("lucide-react");
 
 // src/utils/export-mermaid.ts
@@ -6746,22 +6757,22 @@ var MermaidView = ({
   edges,
   maxTextSize = 1e5
 }) => {
-  const [copySuccess, setCopySuccess] = (0, import_react62.useState)(false);
-  const [mermaidCode, setMermaidCode] = (0, import_react62.useState)("");
-  const [previewSvg, setPreviewSvg] = (0, import_react62.useState)(null);
-  const [previewError, setPreviewError] = (0, import_react62.useState)(null);
-  const [isRendering, setIsRendering] = (0, import_react62.useState)(true);
-  const containerRef = (0, import_react62.useRef)(null);
-  const svgContainerRef = (0, import_react62.useRef)(null);
-  const panZoomInstanceRef = (0, import_react62.useRef)(null);
-  (0, import_react62.useEffect)(() => {
+  const [copySuccess, setCopySuccess] = (0, import_react63.useState)(false);
+  const [mermaidCode, setMermaidCode] = (0, import_react63.useState)("");
+  const [previewSvg, setPreviewSvg] = (0, import_react63.useState)(null);
+  const [previewError, setPreviewError] = (0, import_react63.useState)(null);
+  const [isRendering, setIsRendering] = (0, import_react63.useState)(true);
+  const containerRef = (0, import_react63.useRef)(null);
+  const svgContainerRef = (0, import_react63.useRef)(null);
+  const panZoomInstanceRef = (0, import_react63.useRef)(null);
+  (0, import_react63.useEffect)(() => {
     const code = convertToMermaid(nodes, edges, {
       includeStyles: true,
       direction: "LR"
     });
     setMermaidCode(code);
   }, [nodes, edges]);
-  (0, import_react62.useEffect)(() => {
+  (0, import_react63.useEffect)(() => {
     if (!mermaidCode) return;
     let cancelled = false;
     setIsRendering(true);
@@ -6806,7 +6817,7 @@ var MermaidView = ({
       cancelled = true;
     };
   }, [mermaidCode]);
-  (0, import_react62.useEffect)(() => {
+  (0, import_react63.useEffect)(() => {
     if (!previewSvg || !svgContainerRef.current) return;
     const initZoom = async () => {
       const svgElement = svgContainerRef.current?.querySelector("svg");
@@ -6845,7 +6856,7 @@ var MermaidView = ({
       }
     };
   }, [previewSvg]);
-  const handleCopyToClipboard = (0, import_react62.useCallback)(async () => {
+  const handleCopyToClipboard = (0, import_react63.useCallback)(async () => {
     await copyToClipboard(mermaidCode);
     setCopySuccess(true);
     setTimeout(() => setCopySuccess(false), 2e3);
@@ -6958,12 +6969,12 @@ var MermaidView = ({
 var MermaidView_default = MermaidView;
 
 // src/components/VisualizerDropdownContent.tsx
-var import_react63 = require("react");
+var import_react64 = require("react");
 var DropdownMenu = __toESM(require("@radix-ui/react-dropdown-menu"));
 var import_lucide_react23 = require("lucide-react");
 var import_outline2 = require("@heroicons/react/24/outline");
 var import_jsx_runtime35 = require("react/jsx-runtime");
-var VisualizerDropdownContent = (0, import_react63.memo)(
+var VisualizerDropdownContent = (0, import_react64.memo)(
   ({
     isMermaidView,
     setIsMermaidView,
@@ -6989,7 +7000,8 @@ var VisualizerDropdownContent = (0, import_react63.memo)(
     notesCount = 0,
     onOpenNotes
   }) => {
-    const [layoutStatus, setLayoutStatus] = (0, import_react63.useState)("idle");
+    const [layoutStatus, setLayoutStatus] = (0, import_react64.useState)("idle");
+    const portalContainer = usePortalContainer();
     const handleSaveLayout = async () => {
       if (!onSaveLayout) return;
       setLayoutStatus("saving");
@@ -7035,7 +7047,7 @@ var VisualizerDropdownContent = (0, import_react63.memo)(
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DropdownMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DropdownMenu.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
           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]",
@@ -7213,7 +7225,7 @@ var VisualizerDropdownContent = (0, import_react63.memo)(
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DropdownMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DropdownMenu.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
           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]",
@@ -7327,17 +7339,18 @@ VisualizerDropdownContent.displayName = "VisualizerDropdownContent";
 var VisualizerDropdownContent_default = VisualizerDropdownContent;
 
 // src/components/NodeContextMenu.tsx
-var import_react64 = require("react");
+var import_react65 = require("react");
 var ContextMenu5 = __toESM(require("@radix-ui/react-context-menu"));
 var import_jsx_runtime36 = require("react/jsx-runtime");
-var NodeContextMenu_default = (0, import_react64.memo)(function NodeContextMenu({
+var NodeContextMenu_default = (0, import_react65.memo)(function NodeContextMenu({
   items,
   children
 }) {
+  const portalContainer = usePortalContainer();
   if (!items || items.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, { children });
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(ContextMenu5.Root, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ContextMenu5.Trigger, { children }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ContextMenu5.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ContextMenu5.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       ContextMenu5.Content,
       {
         className: "min-w-[220px] bg-white rounded-md p-1 shadow-md border border-gray-200 z-50",
@@ -7368,7 +7381,7 @@ var NodeContextMenu_default = (0, import_react64.memo)(function NodeContextMenu(
 
 // src/utils/layout.ts
 var import_dagre = __toESM(require("dagre"));
-var import_react65 = require("@xyflow/react");
+var import_react66 = require("@xyflow/react");
 var GROUP_HEADER_HEIGHT = 44;
 var GROUP_CONTENT_PADDING_TOP = 50;
 var GROUP_CONTENT_PADDING_BOTTOM = 30;
@@ -7769,7 +7782,7 @@ function layoutGraph(nodes, edges, options = {}, style) {
     const isFlowStep = edge.type === "flow-step";
     const isBidirectional = edge.type === "reads-writes";
     const arrowMarker = {
-      type: import_react65.MarkerType.ArrowClosed,
+      type: import_react66.MarkerType.ArrowClosed,
       width: 20,
       height: 20,
       color: "rgb(var(--ec-page-text-muted))"
@@ -7826,7 +7839,7 @@ function flatLayout(nodes, edges, graphOpts, nodeSize, style) {
     const isFlowStep = edge.type === "flow-step";
     const isBidirectional = edge.type === "reads-writes";
     const arrowMarker = {
-      type: import_react65.MarkerType.ArrowClosed,
+      type: import_react66.MarkerType.ArrowClosed,
       width: 20,
       height: 20,
       color: "rgb(var(--ec-page-text-muted))"
@@ -7846,9 +7859,9 @@ function flatLayout(nodes, edges, graphOpts, nodeSize, style) {
 }
 
 // src/components/NotesToolbarButton.tsx
-var import_react66 = require("react");
+var import_react67 = require("react");
 var import_lucide_react24 = require("lucide-react");
-var import_react67 = require("@xyflow/react");
+var import_react68 = require("@xyflow/react");
 var Dialog4 = __toESM(require("@radix-ui/react-dialog"));
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var NODE_TYPE_META = {
@@ -8109,11 +8122,12 @@ function AllNotesModal({
   onClose,
   nodes
 }) {
-  const { setCenter, getZoom } = (0, import_react67.useReactFlow)();
-  const [selectedIdx, setSelectedIdx] = (0, import_react66.useState)(0);
+  const { setCenter, getZoom } = (0, import_react68.useReactFlow)();
+  const [selectedIdx, setSelectedIdx] = (0, import_react67.useState)(0);
+  const portalContainer = usePortalContainer();
   const totalNotes = noteGroups.reduce((sum, g) => sum + g.notes.length, 0);
   const selected = noteGroups[selectedIdx] || noteGroups[0];
-  const handleNavigate = (0, import_react66.useCallback)(
+  const handleNavigate = (0, import_react67.useCallback)(
     (nodeId) => {
       const node = nodes.find((n) => n.id === nodeId);
       if (!node) return;
@@ -8137,421 +8151,415 @@ function AllNotesModal({
           setSelectedIdx(0);
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-        Dialog4.Portal,
+      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Dialog4.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+        "div",
         {
-          container: typeof document !== "undefined" ? document.body : void 0,
-          children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
-            "div",
-            {
-              className: "fixed inset-0 z-[99999]",
-              style: { isolation: "isolate" },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-                  Dialog4.Overlay,
-                  {
-                    style: {
-                      position: "fixed",
-                      inset: 0,
-                      background: "rgba(15, 23, 42, 0.55)",
-                      backdropFilter: "blur(6px)"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
-                  Dialog4.Content,
-                  {
-                    style: {
-                      position: "fixed",
-                      top: "50%",
-                      left: "50%",
-                      transform: "translate(-50%, -50%)",
-                      width: "94vw",
-                      maxWidth: 720,
-                      height: "78vh",
-                      maxHeight: 560,
-                      background: "white",
-                      borderRadius: 14,
-                      boxShadow: "0 0 0 1px rgba(0,0,0,0.06), 0 20px 50px rgba(0,0,0,0.2)",
-                      display: "flex",
-                      flexDirection: "column",
-                      overflow: "hidden",
-                      outline: "none"
-                    },
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
-                        "div",
-                        {
-                          style: {
-                            padding: "14px 20px",
-                            borderBottom: "1px solid #e2e8f0",
-                            display: "flex",
-                            alignItems: "center",
-                            gap: 12,
-                            flexShrink: 0
-                          },
-                          children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-                              "div",
-                              {
-                                style: {
-                                  width: 32,
-                                  height: 32,
-                                  borderRadius: 8,
-                                  background: "#f1f5f9",
-                                  display: "flex",
-                                  alignItems: "center",
-                                  justifyContent: "center",
-                                  flexShrink: 0
-                                },
-                                children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-                                  import_lucide_react24.MessageCircle,
-                                  {
-                                    style: { width: 16, height: 16, color: "#64748b" },
-                                    strokeWidth: 2.5
-                                  }
-                                )
-                              }
-                            ),
-                            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-                                Dialog4.Title,
-                                {
-                                  style: {
-                                    fontSize: 15,
-                                    fontWeight: 700,
-                                    color: "#0f172a",
-                                    margin: 0,
-                                    lineHeight: 1.25
-                                  },
-                                  children: "Notes"
-                                }
-                              ),
-                              /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
-                                Dialog4.Description,
-                                {
-                                  style: {
-                                    fontSize: 12,
-                                    color: "#64748b",
-                                    margin: 0,
-                                    marginTop: 1
-                                  },
-                                  children: [
-                                    totalNotes,
-                                    " note",
-                                    totalNotes !== 1 ? "s" : "",
-                                    " across",
-                                    " ",
-                                    noteGroups.length,
-                                    " resource",
-                                    noteGroups.length !== 1 ? "s" : ""
-                                  ]
-                                }
-                              )
-                            ] }),
-                            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Dialog4.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-                              "button",
-                              {
-                                style: {
-                                  width: 30,
-                                  height: 30,
-                                  borderRadius: 8,
-                                  border: "none",
-                                  background: "rgba(0,0,0,0.04)",
-                                  display: "flex",
-                                  alignItems: "center",
-                                  justifyContent: "center",
-                                  cursor: "pointer",
-                                  color: "#94a3b8",
-                                  flexShrink: 0
-                                },
-                                "aria-label": "Close",
-                                children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react24.X, { style: { width: 15, height: 15 } })
-                              }
-                            ) })
-                          ]
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { display: "flex", flex: 1, overflow: "hidden" }, children: [
+          className: "fixed inset-0 z-[99999]",
+          style: { isolation: "isolate" },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              Dialog4.Overlay,
+              {
+                style: {
+                  position: "fixed",
+                  inset: 0,
+                  background: "rgba(15, 23, 42, 0.55)",
+                  backdropFilter: "blur(6px)"
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+              Dialog4.Content,
+              {
+                style: {
+                  position: "fixed",
+                  top: "50%",
+                  left: "50%",
+                  transform: "translate(-50%, -50%)",
+                  width: "94vw",
+                  maxWidth: 720,
+                  height: "78vh",
+                  maxHeight: 560,
+                  background: "white",
+                  borderRadius: 14,
+                  boxShadow: "0 0 0 1px rgba(0,0,0,0.06), 0 20px 50px rgba(0,0,0,0.2)",
+                  display: "flex",
+                  flexDirection: "column",
+                  overflow: "hidden",
+                  outline: "none"
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+                    "div",
+                    {
+                      style: {
+                        padding: "14px 20px",
+                        borderBottom: "1px solid #e2e8f0",
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 12,
+                        flexShrink: 0
+                      },
+                      children: [
                         /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                           "div",
                           {
                             style: {
-                              width: 240,
-                              flexShrink: 0,
-                              borderRight: "1px solid #e2e8f0",
-                              overflowY: "auto",
-                              background: "#f8fafc"
+                              width: 32,
+                              height: 32,
+                              borderRadius: 8,
+                              background: "#f1f5f9",
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              flexShrink: 0
                             },
-                            children: noteGroups.map((group, i) => {
-                              const isActive = i === selectedIdx;
-                              const meta = getNodeMeta(group.nodeType);
-                              const IconComp = meta?.icon || import_lucide_react24.MessageCircle;
-                              const iconColor = meta?.color || "#64748b";
-                              return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
-                                "button",
-                                {
-                                  onClick: () => setSelectedIdx(i),
-                                  style: {
-                                    width: "100%",
-                                    padding: "12px 16px",
-                                    background: isActive ? "white" : "transparent",
-                                    border: "none",
-                                    borderBottom: "1px solid #f1f5f9",
-                                    borderRight: isActive ? `2px solid ${iconColor}` : "2px solid transparent",
-                                    cursor: "pointer",
-                                    display: "flex",
-                                    alignItems: "center",
-                                    gap: 10,
-                                    textAlign: "left",
-                                    transition: "background 0.1s"
-                                  },
-                                  children: [
-                                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-                                      "div",
-                                      {
-                                        style: {
-                                          width: 28,
-                                          height: 28,
-                                          borderRadius: 7,
-                                          background: isActive ? iconColor : `${iconColor}14`,
-                                          display: "flex",
-                                          alignItems: "center",
-                                          justifyContent: "center",
-                                          flexShrink: 0,
-                                          transition: "background 0.15s"
-                                        },
-                                        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-                                          IconComp,
-                                          {
-                                            style: {
-                                              width: 14,
-                                              height: 14,
-                                              color: isActive ? "white" : iconColor,
-                                              transition: "color 0.15s"
-                                            },
-                                            strokeWidth: 2
-                                          }
-                                        )
-                                      }
-                                    ),
-                                    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
-                                      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-                                        "div",
-                                        {
-                                          style: {
-                                            fontSize: 12,
-                                            fontWeight: isActive ? 600 : 500,
-                                            color: isActive ? "#0f172a" : "#475569",
-                                            lineHeight: 1.3,
-                                            overflow: "hidden",
-                                            textOverflow: "ellipsis",
-                                            whiteSpace: "nowrap"
-                                          },
-                                          children: group.name
-                                        }
-                                      ),
-                                      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
-                                        "div",
-                                        {
-                                          style: {
-                                            fontSize: 10,
-                                            color: "#94a3b8",
-                                            lineHeight: 1.3,
-                                            overflow: "hidden",
-                                            textOverflow: "ellipsis",
-                                            whiteSpace: "nowrap",
-                                            marginTop: 2
-                                          },
-                                          children: [
-                                            meta?.label || group.nodeType,
-                                            " \xB7",
-                                            " ",
-                                            group.notes.length,
-                                            " note",
-                                            group.notes.length !== 1 ? "s" : ""
-                                          ]
-                                        }
-                                      )
-                                    ] }),
-                                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-                                      import_lucide_react24.ChevronRight,
-                                      {
-                                        style: {
-                                          width: 14,
-                                          height: 14,
-                                          color: isActive ? iconColor : "#cbd5e1",
-                                          flexShrink: 0
-                                        },
-                                        strokeWidth: 2
-                                      }
-                                    )
-                                  ]
-                                },
-                                group.nodeId
-                              );
-                            })
+                            children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                              import_lucide_react24.MessageCircle,
+                              {
+                                style: { width: 16, height: 16, color: "#64748b" },
+                                strokeWidth: 2.5
+                              }
+                            )
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-                          "div",
+                        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                            Dialog4.Title,
+                            {
+                              style: {
+                                fontSize: 15,
+                                fontWeight: 700,
+                                color: "#0f172a",
+                                margin: 0,
+                                lineHeight: 1.25
+                              },
+                              children: "Notes"
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+                            Dialog4.Description,
+                            {
+                              style: {
+                                fontSize: 12,
+                                color: "#64748b",
+                                margin: 0,
+                                marginTop: 1
+                              },
+                              children: [
+                                totalNotes,
+                                " note",
+                                totalNotes !== 1 ? "s" : "",
+                                " across",
+                                " ",
+                                noteGroups.length,
+                                " resource",
+                                noteGroups.length !== 1 ? "s" : ""
+                              ]
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Dialog4.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                          "button",
                           {
                             style: {
-                              flex: 1,
-                              overflowY: "auto",
+                              width: 30,
+                              height: 30,
+                              borderRadius: 8,
+                              border: "none",
+                              background: "rgba(0,0,0,0.04)",
                               display: "flex",
-                              flexDirection: "column"
+                              alignItems: "center",
+                              justifyContent: "center",
+                              cursor: "pointer",
+                              color: "#94a3b8",
+                              flexShrink: 0
                             },
-                            children: selected && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
-                                "div",
-                                {
-                                  style: {
-                                    padding: "14px 20px",
-                                    borderBottom: "1px solid #f1f5f9",
-                                    display: "flex",
-                                    alignItems: "center",
-                                    justifyContent: "space-between",
-                                    flexShrink: 0,
-                                    background: "#fafbfc"
-                                  },
-                                  children: [
-                                    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
-                                      "div",
+                            "aria-label": "Close",
+                            children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react24.X, { style: { width: 15, height: 15 } })
+                          }
+                        ) })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { display: "flex", flex: 1, overflow: "hidden" }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                      "div",
+                      {
+                        style: {
+                          width: 240,
+                          flexShrink: 0,
+                          borderRight: "1px solid #e2e8f0",
+                          overflowY: "auto",
+                          background: "#f8fafc"
+                        },
+                        children: noteGroups.map((group, i) => {
+                          const isActive = i === selectedIdx;
+                          const meta = getNodeMeta(group.nodeType);
+                          const IconComp = meta?.icon || import_lucide_react24.MessageCircle;
+                          const iconColor = meta?.color || "#64748b";
+                          return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+                            "button",
+                            {
+                              onClick: () => setSelectedIdx(i),
+                              style: {
+                                width: "100%",
+                                padding: "12px 16px",
+                                background: isActive ? "white" : "transparent",
+                                border: "none",
+                                borderBottom: "1px solid #f1f5f9",
+                                borderRight: isActive ? `2px solid ${iconColor}` : "2px solid transparent",
+                                cursor: "pointer",
+                                display: "flex",
+                                alignItems: "center",
+                                gap: 10,
+                                textAlign: "left",
+                                transition: "background 0.1s"
+                              },
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                                  "div",
+                                  {
+                                    style: {
+                                      width: 28,
+                                      height: 28,
+                                      borderRadius: 7,
+                                      background: isActive ? iconColor : `${iconColor}14`,
+                                      display: "flex",
+                                      alignItems: "center",
+                                      justifyContent: "center",
+                                      flexShrink: 0,
+                                      transition: "background 0.15s"
+                                    },
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                                      IconComp,
                                       {
                                         style: {
-                                          display: "flex",
-                                          alignItems: "center",
-                                          gap: 10
+                                          width: 14,
+                                          height: 14,
+                                          color: isActive ? "white" : iconColor,
+                                          transition: "color 0.15s"
                                         },
-                                        children: [
-                                          (() => {
-                                            const meta = getNodeMeta(selected.nodeType);
-                                            const Icon = meta?.icon || import_lucide_react24.MessageCircle;
-                                            const color = meta?.color || "#64748b";
-                                            return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-                                              "div",
-                                              {
-                                                style: {
-                                                  width: 30,
-                                                  height: 30,
-                                                  borderRadius: 8,
-                                                  background: `${color}14`,
-                                                  display: "flex",
-                                                  alignItems: "center",
-                                                  justifyContent: "center",
-                                                  flexShrink: 0
-                                                },
-                                                children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-                                                  Icon,
-                                                  {
-                                                    style: {
-                                                      width: 15,
-                                                      height: 15,
-                                                      color
-                                                    },
-                                                    strokeWidth: 2
-                                                  }
-                                                )
-                                              }
-                                            );
-                                          })(),
-                                          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
-                                            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-                                              "div",
-                                              {
-                                                style: {
-                                                  fontSize: 14,
-                                                  fontWeight: 600,
-                                                  color: "#0f172a",
-                                                  lineHeight: 1.3
-                                                },
-                                                children: selected.name
-                                              }
-                                            ),
-                                            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
-                                              "div",
+                                        strokeWidth: 2
+                                      }
+                                    )
+                                  }
+                                ),
+                                /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                                    "div",
+                                    {
+                                      style: {
+                                        fontSize: 12,
+                                        fontWeight: isActive ? 600 : 500,
+                                        color: isActive ? "#0f172a" : "#475569",
+                                        lineHeight: 1.3,
+                                        overflow: "hidden",
+                                        textOverflow: "ellipsis",
+                                        whiteSpace: "nowrap"
+                                      },
+                                      children: group.name
+                                    }
+                                  ),
+                                  /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+                                    "div",
+                                    {
+                                      style: {
+                                        fontSize: 10,
+                                        color: "#94a3b8",
+                                        lineHeight: 1.3,
+                                        overflow: "hidden",
+                                        textOverflow: "ellipsis",
+                                        whiteSpace: "nowrap",
+                                        marginTop: 2
+                                      },
+                                      children: [
+                                        meta?.label || group.nodeType,
+                                        " \xB7",
+                                        " ",
+                                        group.notes.length,
+                                        " note",
+                                        group.notes.length !== 1 ? "s" : ""
+                                      ]
+                                    }
+                                  )
+                                ] }),
+                                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                                  import_lucide_react24.ChevronRight,
+                                  {
+                                    style: {
+                                      width: 14,
+                                      height: 14,
+                                      color: isActive ? iconColor : "#cbd5e1",
+                                      flexShrink: 0
+                                    },
+                                    strokeWidth: 2
+                                  }
+                                )
+                              ]
+                            },
+                            group.nodeId
+                          );
+                        })
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                      "div",
+                      {
+                        style: {
+                          flex: 1,
+                          overflowY: "auto",
+                          display: "flex",
+                          flexDirection: "column"
+                        },
+                        children: selected && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+                            "div",
+                            {
+                              style: {
+                                padding: "14px 20px",
+                                borderBottom: "1px solid #f1f5f9",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "space-between",
+                                flexShrink: 0,
+                                background: "#fafbfc"
+                              },
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+                                  "div",
+                                  {
+                                    style: {
+                                      display: "flex",
+                                      alignItems: "center",
+                                      gap: 10
+                                    },
+                                    children: [
+                                      (() => {
+                                        const meta = getNodeMeta(selected.nodeType);
+                                        const Icon = meta?.icon || import_lucide_react24.MessageCircle;
+                                        const color = meta?.color || "#64748b";
+                                        return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                                          "div",
+                                          {
+                                            style: {
+                                              width: 30,
+                                              height: 30,
+                                              borderRadius: 8,
+                                              background: `${color}14`,
+                                              display: "flex",
+                                              alignItems: "center",
+                                              justifyContent: "center",
+                                              flexShrink: 0
+                                            },
+                                            children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                                              Icon,
                                               {
                                                 style: {
-                                                  fontSize: 11,
-                                                  color: "#94a3b8",
-                                                  marginTop: 2
+                                                  width: 15,
+                                                  height: 15,
+                                                  color
                                                 },
-                                                children: [
-                                                  getNodeMeta(selected.nodeType)?.label || selected.nodeType,
-                                                  " ",
-                                                  "\xB7 ",
-                                                  selected.notes.length,
-                                                  " note",
-                                                  selected.notes.length !== 1 ? "s" : ""
-                                                ]
+                                                strokeWidth: 2
                                               }
                                             )
-                                          ] })
-                                        ]
-                                      }
-                                    ),
-                                    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
-                                      "button",
-                                      {
-                                        onClick: () => handleNavigate(selected.nodeId),
-                                        style: {
-                                          display: "flex",
-                                          alignItems: "center",
-                                          gap: 5,
-                                          padding: "5px 10px",
-                                          borderRadius: 6,
-                                          border: "1px solid #e2e8f0",
-                                          background: "white",
-                                          cursor: "pointer",
-                                          fontSize: 11,
-                                          fontWeight: 500,
-                                          color: "#475569",
-                                          transition: "all 0.12s"
-                                        },
-                                        onMouseEnter: (e) => {
-                                          e.currentTarget.style.borderColor = AMBER2[400];
-                                          e.currentTarget.style.color = AMBER2[700];
-                                        },
-                                        onMouseLeave: (e) => {
-                                          e.currentTarget.style.borderColor = "#e2e8f0";
-                                          e.currentTarget.style.color = "#475569";
-                                        },
-                                        children: [
-                                          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react24.Locate, { style: { width: 12, height: 12 } }),
-                                          "Find on canvas"
-                                        ]
-                                      }
-                                    )
-                                  ]
-                                }
-                              ),
-                              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-                                "div",
-                                {
-                                  style: {
-                                    flex: 1,
-                                    overflowY: "auto",
-                                    padding: "16px 20px",
-                                    display: "flex",
-                                    flexDirection: "column",
-                                    gap: 10
-                                  },
-                                  children: selected.notes.map((note, i) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(NoteCard2, { note, index: i }, i))
-                                }
-                              )
-                            ] })
-                          }
-                        )
-                      ] })
-                    ]
-                  }
-                )
-              ]
-            }
-          )
+                                          }
+                                        );
+                                      })(),
+                                      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
+                                        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                                          "div",
+                                          {
+                                            style: {
+                                              fontSize: 14,
+                                              fontWeight: 600,
+                                              color: "#0f172a",
+                                              lineHeight: 1.3
+                                            },
+                                            children: selected.name
+                                          }
+                                        ),
+                                        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+                                          "div",
+                                          {
+                                            style: {
+                                              fontSize: 11,
+                                              color: "#94a3b8",
+                                              marginTop: 2
+                                            },
+                                            children: [
+                                              getNodeMeta(selected.nodeType)?.label || selected.nodeType,
+                                              " ",
+                                              "\xB7 ",
+                                              selected.notes.length,
+                                              " note",
+                                              selected.notes.length !== 1 ? "s" : ""
+                                            ]
+                                          }
+                                        )
+                                      ] })
+                                    ]
+                                  }
+                                ),
+                                /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+                                  "button",
+                                  {
+                                    onClick: () => handleNavigate(selected.nodeId),
+                                    style: {
+                                      display: "flex",
+                                      alignItems: "center",
+                                      gap: 5,
+                                      padding: "5px 10px",
+                                      borderRadius: 6,
+                                      border: "1px solid #e2e8f0",
+                                      background: "white",
+                                      cursor: "pointer",
+                                      fontSize: 11,
+                                      fontWeight: 500,
+                                      color: "#475569",
+                                      transition: "all 0.12s"
+                                    },
+                                    onMouseEnter: (e) => {
+                                      e.currentTarget.style.borderColor = AMBER2[400];
+                                      e.currentTarget.style.color = AMBER2[700];
+                                    },
+                                    onMouseLeave: (e) => {
+                                      e.currentTarget.style.borderColor = "#e2e8f0";
+                                      e.currentTarget.style.color = "#475569";
+                                    },
+                                    children: [
+                                      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react24.Locate, { style: { width: 12, height: 12 } }),
+                                      "Find on canvas"
+                                    ]
+                                  }
+                                )
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                            "div",
+                            {
+                              style: {
+                                flex: 1,
+                                overflowY: "auto",
+                                padding: "16px 20px",
+                                display: "flex",
+                                flexDirection: "column",
+                                gap: 10
+                              },
+                              children: selected.notes.map((note, i) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(NoteCard2, { note, index: i }, i))
+                            }
+                          )
+                        ] })
+                      }
+                    )
+                  ] })
+                ]
+              }
+            )
+          ]
         }
-      )
+      ) })
     }
   );
 }
@@ -8571,13 +8579,13 @@ var LAYOUT_CHANGE_PANEL_STYLE_WITH_WALKTHROUGH = {
 };
 var LAYOUT_CHANGE_PANEL_STYLE_DEFAULT = { marginLeft: "60px" };
 var LEGEND_PANEL_STYLE_WITH_MINIMAP = { marginRight: "230px" };
-var LegendPanel = (0, import_react68.memo)(function LegendPanel2({
+var LegendPanel = (0, import_react69.memo)(function LegendPanel2({
   legend,
   showMinimap,
   onLegendClick
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-    import_react69.Panel,
+    import_react70.Panel,
     {
       position: "bottom-right",
       style: showMinimap ? LEGEND_PANEL_STYLE_WITH_MINIMAP : void 0,
@@ -8633,14 +8641,14 @@ var NodeGraphBuilder = ({
   onSaveLayout,
   onResetLayout
 }) => {
-  (0, import_react68.useEffect)(() => {
+  (0, import_react69.useEffect)(() => {
     if (onBuildUrl) {
       setBuildUrlFn(onBuildUrl);
     }
   }, []);
-  const nodeTypes = (0, import_react68.useMemo)(() => {
+  const nodeTypes = (0, import_react69.useMemo)(() => {
     const wrapWithContextMenu = (Component) => {
-      const Wrapped = (0, import_react68.memo)((props) => {
+      const Wrapped = (0, import_react69.memo)((props) => {
         const items = props.data?.contextMenu;
         if (!items?.length) return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Component, { ...props });
         return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(NodeContextMenu_default, { items, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Component, { ...props }) });
@@ -8677,10 +8685,10 @@ var NodeGraphBuilder = ({
       "data-product": wrapWithContextMenu(DataProduct_default),
       "data-products": wrapWithContextMenu(DataProduct_default),
       group: GroupNode_default,
-      note: (0, import_react68.memo)((props) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(NoteNode_default, { ...props, readOnly: true }))
+      note: (0, import_react69.memo)((props) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(NoteNode_default, { ...props, readOnly: true }))
     };
   }, []);
-  const edgeTypes2 = (0, import_react68.useMemo)(
+  const edgeTypes2 = (0, import_react69.useMemo)(
     () => ({
       animated: AnimatedMessageEdge_default,
       multiline: MultilineEdgeLabel_default,
@@ -8688,47 +8696,47 @@ var NodeGraphBuilder = ({
     }),
     []
   );
-  const [nodes, setNodes, onNodesChange] = (0, import_react69.useNodesState)(initialNodes);
-  const [edges, setEdges, onEdgesChange] = (0, import_react69.useEdgesState)(initialEdges);
-  const { fitView, getNodes } = (0, import_react69.useReactFlow)();
-  (0, import_react68.useEffect)(() => {
+  const [nodes, setNodes, onNodesChange] = (0, import_react70.useNodesState)(initialNodes);
+  const [edges, setEdges, onEdgesChange] = (0, import_react70.useEdgesState)(initialEdges);
+  const { fitView, getNodes } = (0, import_react70.useReactFlow)();
+  (0, import_react69.useEffect)(() => {
     setNodes(initialNodes);
     setEdges(initialEdges);
     requestAnimationFrame(() => {
       fitView({ duration: 300, padding: 0.2 });
     });
   }, [initialNodes, initialEdges, setNodes, setEdges, fitView]);
-  const [animateMessages, setAnimateMessages] = (0, import_react68.useState)(true);
-  const [_activeStepIndex, _setActiveStepIndex] = (0, import_react68.useState)(null);
-  const [_isFullscreen, _setIsFullscreen] = (0, import_react68.useState)(false);
-  const [isShareModalOpen, setIsShareModalOpen] = (0, import_react68.useState)(false);
-  const [shareUrlCopySuccess, setShareUrlCopySuccess] = (0, import_react68.useState)(false);
-  const [isMermaidView, setIsMermaidView] = (0, import_react68.useState)(false);
-  const [showMinimap, setShowMinimap] = (0, import_react68.useState)(false);
-  const [hasLayoutChanges, setHasLayoutChanges] = (0, import_react68.useState)(false);
-  const [isSavingLayout, setIsSavingLayout] = (0, import_react68.useState)(false);
-  const initialPositionsRef = (0, import_react68.useRef)(
+  const [animateMessages, setAnimateMessages] = (0, import_react69.useState)(true);
+  const [_activeStepIndex, _setActiveStepIndex] = (0, import_react69.useState)(null);
+  const [_isFullscreen, _setIsFullscreen] = (0, import_react69.useState)(false);
+  const [isShareModalOpen, setIsShareModalOpen] = (0, import_react69.useState)(false);
+  const [shareUrlCopySuccess, setShareUrlCopySuccess] = (0, import_react69.useState)(false);
+  const [isMermaidView, setIsMermaidView] = (0, import_react69.useState)(false);
+  const [showMinimap, setShowMinimap] = (0, import_react69.useState)(false);
+  const [hasLayoutChanges, setHasLayoutChanges] = (0, import_react69.useState)(false);
+  const [isSavingLayout, setIsSavingLayout] = (0, import_react69.useState)(false);
+  const initialPositionsRef = (0, import_react69.useRef)(
     {}
   );
-  const [focusModeOpen, setFocusModeOpen] = (0, import_react68.useState)(false);
-  const [focusedNodeId, setFocusedNodeId] = (0, import_react68.useState)(null);
-  const [isNotesModalOpen, setIsNotesModalOpen] = (0, import_react68.useState)(false);
-  const openNotesModal = (0, import_react68.useCallback)(() => setIsNotesModalOpen(true), []);
-  const interactionCountRef = (0, import_react68.useRef)(0);
-  const startInteraction = (0, import_react68.useCallback)(() => {
+  const [focusModeOpen, setFocusModeOpen] = (0, import_react69.useState)(false);
+  const [focusedNodeId, setFocusedNodeId] = (0, import_react69.useState)(null);
+  const [isNotesModalOpen, setIsNotesModalOpen] = (0, import_react69.useState)(false);
+  const openNotesModal = (0, import_react69.useCallback)(() => setIsNotesModalOpen(true), []);
+  const interactionCountRef = (0, import_react69.useRef)(0);
+  const startInteraction = (0, import_react69.useCallback)(() => {
     interactionCountRef.current += 1;
     if (interactionCountRef.current === 1) {
       reactFlowWrapperRef.current?.classList.add("ec-interaction-active");
     }
   }, []);
-  const endInteraction = (0, import_react68.useCallback)(() => {
+  const endInteraction = (0, import_react69.useCallback)(() => {
     interactionCountRef.current = Math.max(0, interactionCountRef.current - 1);
     if (interactionCountRef.current === 0) {
       reactFlowWrapperRef.current?.classList.remove("ec-interaction-active");
     }
   }, []);
-  const hoveredEdgeNodesRef = (0, import_react68.useRef)([]);
-  const handleEdgeMouseEnter = (0, import_react68.useCallback)(
+  const hoveredEdgeNodesRef = (0, import_react69.useRef)([]);
+  const handleEdgeMouseEnter = (0, import_react69.useCallback)(
     (_, edge) => {
       const wrapper = reactFlowWrapperRef.current;
       if (!wrapper) return;
@@ -8740,15 +8748,15 @@ var NodeGraphBuilder = ({
     },
     []
   );
-  const handleEdgeMouseLeave = (0, import_react68.useCallback)(() => {
+  const handleEdgeMouseLeave = (0, import_react69.useCallback)(() => {
     hoveredEdgeNodesRef.current.forEach(
       (el) => el.classList.remove("ec-edge-hover-node")
     );
     hoveredEdgeNodesRef.current = [];
   }, []);
-  const hoveredNodeEdgesRef = (0, import_react68.useRef)([]);
-  const hoveredNodePeersRef = (0, import_react68.useRef)([]);
-  const handleNodeMouseEnter = (0, import_react68.useCallback)(
+  const hoveredNodeEdgesRef = (0, import_react69.useRef)([]);
+  const hoveredNodePeersRef = (0, import_react69.useRef)([]);
+  const handleNodeMouseEnter = (0, import_react69.useCallback)(
     (_, node) => {
       const wrapper = reactFlowWrapperRef.current;
       if (!wrapper) return;
@@ -8777,7 +8785,7 @@ var NodeGraphBuilder = ({
     },
     []
   );
-  const handleNodeMouseLeave = (0, import_react68.useCallback)(() => {
+  const handleNodeMouseLeave = (0, import_react69.useCallback)(() => {
     hoveredNodeEdgesRef.current.forEach(
       (el) => el.classList.remove("ec-node-hover-edge")
     );
@@ -8787,21 +8795,21 @@ var NodeGraphBuilder = ({
     );
     hoveredNodePeersRef.current = [];
   }, []);
-  const hasChannels = (0, import_react68.useMemo)(
+  const hasChannels = (0, import_react69.useMemo)(
     () => initialNodes.some((node) => node.type === "channels"),
     [initialNodes]
   );
   const hideChannels = false;
   const toggleChannelsVisibility = () => {
   };
-  const searchRef = (0, import_react68.useRef)(null);
-  const reactFlowWrapperRef = (0, import_react68.useRef)(null);
-  const scrollableContainerRef = (0, import_react68.useRef)(null);
-  const nodesRef = (0, import_react68.useRef)(nodes);
+  const searchRef = (0, import_react69.useRef)(null);
+  const reactFlowWrapperRef = (0, import_react69.useRef)(null);
+  const scrollableContainerRef = (0, import_react69.useRef)(null);
+  const nodesRef = (0, import_react69.useRef)(nodes);
   nodesRef.current = nodes;
-  const edgesRef = (0, import_react68.useRef)(edges);
+  const edgesRef = (0, import_react69.useRef)(edges);
   edgesRef.current = edges;
-  (0, import_react68.useEffect)(() => {
+  (0, import_react69.useEffect)(() => {
     if (isDevMode && initialNodes.length > 0) {
       const positions = {};
       initialNodes.forEach((node) => {
@@ -8810,7 +8818,7 @@ var NodeGraphBuilder = ({
       initialPositionsRef.current = positions;
     }
   }, [isDevMode, initialNodes]);
-  const checkForLayoutChanges = (0, import_react68.useCallback)(() => {
+  const checkForLayoutChanges = (0, import_react69.useCallback)(() => {
     if (!isDevMode) return;
     const initial = initialPositionsRef.current;
     if (Object.keys(initial).length === 0) return;
@@ -8820,7 +8828,7 @@ var NodeGraphBuilder = ({
     });
     setHasLayoutChanges(hasChanges);
   }, [isDevMode]);
-  const handleNodesChange = (0, import_react68.useCallback)(
+  const handleNodesChange = (0, import_react69.useCallback)(
     (changes) => {
       onNodesChange(changes);
       const hasDragEnd = changes.some(
@@ -8832,7 +8840,7 @@ var NodeGraphBuilder = ({
     },
     [onNodesChange, checkForLayoutChanges]
   );
-  const resetNodesAndEdges = (0, import_react68.useCallback)(() => {
+  const resetNodesAndEdges = (0, import_react69.useCallback)(() => {
     setNodes(
       (nds) => nds.map((node) => {
         node.style = { ...node.style, opacity: 1 };
@@ -8851,7 +8859,7 @@ var NodeGraphBuilder = ({
       })
     );
   }, [setNodes, setEdges, animateMessages]);
-  (0, import_react68.useEffect)(() => {
+  (0, import_react69.useEffect)(() => {
     if (!focusNodeId) return;
     const targetNode = nodesRef.current.find((node) => node.id === focusNodeId);
     if (!targetNode) return;
@@ -8869,13 +8877,13 @@ var NodeGraphBuilder = ({
       });
     });
   }, [focusNodeId, focusRequestId, fitView, setNodes]);
-  (0, import_react68.useEffect)(() => {
+  (0, import_react69.useEffect)(() => {
     if (fitRequestId == null) return;
     requestAnimationFrame(() => {
       fitView({ duration: 400, padding: 0.2 });
     });
   }, [fitRequestId, fitView]);
-  const handleNodeClick = (0, import_react68.useCallback)(
+  const handleNodeClick = (0, import_react69.useCallback)(
     (_, node) => {
       if (onNodeClick) {
         onNodeClick(node);
@@ -8897,7 +8905,7 @@ var NodeGraphBuilder = ({
     },
     [onNodeClick, linksToVisualiser, onNavigate]
   );
-  const toggleAnimateMessages = (0, import_react68.useCallback)(() => {
+  const toggleAnimateMessages = (0, import_react69.useCallback)(() => {
     setAnimateMessages((prev) => {
       const next = !prev;
       localStorage.setItem(
@@ -8907,10 +8915,10 @@ var NodeGraphBuilder = ({
       return next;
     });
   }, []);
-  const handleFitView = (0, import_react68.useCallback)(() => {
+  const handleFitView = (0, import_react69.useCallback)(() => {
     fitView({ duration: 400, padding: 0.2 });
   }, [fitView]);
-  (0, import_react68.useEffect)(() => {
+  (0, import_react69.useEffect)(() => {
     if (animated !== void 0) {
       setAnimateMessages(animated);
       return;
@@ -8930,7 +8938,7 @@ var NodeGraphBuilder = ({
       }
     }
   }, [animated]);
-  (0, import_react68.useEffect)(() => {
+  (0, import_react69.useEffect)(() => {
     setEdges(
       (eds) => eds.map((edge) => ({
         ...edge,
@@ -8940,12 +8948,12 @@ var NodeGraphBuilder = ({
       }))
     );
   }, [animateMessages]);
-  (0, import_react68.useEffect)(() => {
+  (0, import_react69.useEffect)(() => {
     setTimeout(() => {
       fitView({ duration: 800 });
     }, 150);
   }, []);
-  const generateMermaidCode = (0, import_react68.useCallback)(() => {
+  const generateMermaidCode = (0, import_react69.useCallback)(() => {
     try {
       return convertToMermaid(nodesRef.current, edgesRef.current, {
         includeStyles: true,
@@ -8956,7 +8964,7 @@ var NodeGraphBuilder = ({
       return "";
     }
   }, []);
-  (0, import_react68.useEffect)(() => {
+  (0, import_react69.useEffect)(() => {
     if (zoomOnScroll) return;
     const findScrollableContainer = () => {
       const selectors = [
@@ -9001,34 +9009,34 @@ var NodeGraphBuilder = ({
       };
     }
   }, [zoomOnScroll]);
-  const handlePaneClick = (0, import_react68.useCallback)(() => {
+  const handlePaneClick = (0, import_react69.useCallback)(() => {
     searchRef.current?.hideSuggestions();
     resetNodesAndEdges();
     fitView({ duration: 800 });
   }, [resetNodesAndEdges, fitView]);
-  const handleNodeSelect = (0, import_react68.useCallback)(
+  const handleNodeSelect = (0, import_react69.useCallback)(
     (node) => {
       handleNodeClick(null, node);
     },
     [handleNodeClick]
   );
-  const handleSearchClear = (0, import_react68.useCallback)(() => {
+  const handleSearchClear = (0, import_react69.useCallback)(() => {
     resetNodesAndEdges();
     fitView({ duration: 800 });
   }, [resetNodesAndEdges, fitView]);
-  const downloadImage = (0, import_react68.useCallback)((dataUrl, filename) => {
+  const downloadImage = (0, import_react69.useCallback)((dataUrl, filename) => {
     const a = document.createElement("a");
     a.setAttribute("download", `${filename || "eventcatalog"}.png`);
     a.setAttribute("href", dataUrl);
     a.click();
   }, []);
-  const openStudioModal = (0, import_react68.useCallback)(() => {
+  const openStudioModal = (0, import_react69.useCallback)(() => {
     setIsStudioModalOpen(true);
   }, [setIsStudioModalOpen]);
-  const openChat = (0, import_react68.useCallback)(() => {
+  const openChat = (0, import_react69.useCallback)(() => {
     window.dispatchEvent(new CustomEvent("eventcatalog:open-chat"));
   }, []);
-  const handleSaveLayout = (0, import_react68.useCallback)(async () => {
+  const handleSaveLayout = (0, import_react69.useCallback)(async () => {
     if (!resourceKey || !onSaveLayout) return false;
     const positions = {};
     nodesRef.current.forEach((node) => {
@@ -9039,11 +9047,11 @@ var NodeGraphBuilder = ({
     });
     return await onSaveLayout(resourceKey, positions);
   }, [resourceKey, onSaveLayout]);
-  const handleResetLayout = (0, import_react68.useCallback)(async () => {
+  const handleResetLayout = (0, import_react69.useCallback)(async () => {
     if (!resourceKey || !onResetLayout) return false;
     return await onResetLayout(resourceKey);
   }, [resourceKey, onResetLayout]);
-  const handleQuickSaveLayout = (0, import_react68.useCallback)(async () => {
+  const handleQuickSaveLayout = (0, import_react69.useCallback)(async () => {
     setIsSavingLayout(true);
     const success = await handleSaveLayout();
     setIsSavingLayout(false);
@@ -9056,17 +9064,17 @@ var NodeGraphBuilder = ({
       setHasLayoutChanges(false);
     }
   }, [handleSaveLayout]);
-  const handleCopyArchitectureCode = (0, import_react68.useCallback)(async () => {
+  const handleCopyArchitectureCode = (0, import_react69.useCallback)(async () => {
     const code = generateMermaidCode();
     await copyToClipboard(code);
   }, [generateMermaidCode]);
-  const handleCopyShareUrl = (0, import_react68.useCallback)(async () => {
+  const handleCopyShareUrl = (0, import_react69.useCallback)(async () => {
     const url = typeof window !== "undefined" ? window.location.href : "";
     await copyToClipboard(url);
     setShareUrlCopySuccess(true);
     setTimeout(() => setShareUrlCopySuccess(false), 2e3);
   }, []);
-  const toggleFullScreen = (0, import_react68.useCallback)(() => {
+  const toggleFullScreen = (0, import_react69.useCallback)(() => {
     if (!document.fullscreenElement) {
       reactFlowWrapperRef.current?.requestFullscreen().catch((err) => {
         console.error(
@@ -9077,7 +9085,7 @@ var NodeGraphBuilder = ({
       document.exitFullscreen();
     }
   }, []);
-  (0, import_react68.useEffect)(() => {
+  (0, import_react69.useEffect)(() => {
     const handleFullscreenChange = () => {
       _setIsFullscreen(!!document.fullscreenElement);
       setTimeout(() => {
@@ -9089,13 +9097,13 @@ var NodeGraphBuilder = ({
       document.removeEventListener("fullscreenchange", handleFullscreenChange);
     };
   }, [fitView]);
-  const handleExportVisual = (0, import_react68.useCallback)(() => {
+  const handleExportVisual = (0, import_react69.useCallback)(() => {
     const imageWidth = 1024;
     const imageHeight = 768;
-    const nodesBounds = (0, import_react69.getNodesBounds)(getNodes());
+    const nodesBounds = (0, import_react70.getNodesBounds)(getNodes());
     const width = imageWidth > nodesBounds.width ? imageWidth : nodesBounds.width;
     const height = imageHeight > nodesBounds.height ? imageHeight : nodesBounds.height;
-    const viewport = (0, import_react69.getViewportForBounds)(
+    const viewport = (0, import_react70.getViewportForBounds)(
       nodesBounds,
       width,
       height,
@@ -9121,7 +9129,7 @@ var NodeGraphBuilder = ({
       if (controls) controls.style.display = "block";
     });
   }, [getNodes, downloadImage, title]);
-  const handleLegendClick = (0, import_react68.useCallback)(
+  const handleLegendClick = (0, import_react69.useCallback)(
     (collectionType, groupId) => {
       const updatedNodes = nodes.map((node) => {
         if (groupId && node.data.group && node.data.group?.id === groupId) {
@@ -9152,7 +9160,7 @@ var NodeGraphBuilder = ({
     },
     [nodes, edges, setNodes, setEdges, fitView]
   );
-  const getNodesByCollectionWithColors = (0, import_react68.useCallback)((nodes2) => {
+  const getNodesByCollectionWithColors = (0, import_react69.useCallback)((nodes2) => {
     const colorClasses = {
       events: "bg-orange-600",
       services: "bg-pink-600",
@@ -9203,24 +9211,24 @@ var NodeGraphBuilder = ({
     );
     return { ...legendForDomains, ...legendForNodes };
   }, []);
-  const legendKeyRef = (0, import_react68.useRef)("");
+  const legendKeyRef = (0, import_react69.useRef)("");
   const computedLegendKey = nodes.map((n) => `${n.id}:${n.type}:${n.data.group?.id || ""}`).join(",");
   if (computedLegendKey !== legendKeyRef.current) {
     legendKeyRef.current = computedLegendKey;
   }
   const legendKey = legendKeyRef.current;
-  const legend = (0, import_react68.useMemo)(
+  const legend = (0, import_react69.useMemo)(
     () => getNodesByCollectionWithColors(nodes),
     [getNodesByCollectionWithColors, legendKey]
   );
-  const nodeIdsKeyRef = (0, import_react68.useRef)("");
+  const nodeIdsKeyRef = (0, import_react69.useRef)("");
   const computedNodeIdsKey = nodes.map((n) => n.id).join(",");
   if (computedNodeIdsKey !== nodeIdsKeyRef.current) {
     nodeIdsKeyRef.current = computedNodeIdsKey;
   }
   const nodeIdsKey = nodeIdsKeyRef.current;
-  const searchNodes = (0, import_react68.useMemo)(() => nodes, [nodeIdsKey]);
-  const allNoteGroups = (0, import_react68.useMemo)(() => {
+  const searchNodes = (0, import_react69.useMemo)(() => nodes, [nodeIdsKey]);
+  const allNoteGroups = (0, import_react69.useMemo)(() => {
     const groups = [];
     for (const node of nodes) {
       const result = getNotesFromNode(node);
@@ -9235,11 +9243,11 @@ var NodeGraphBuilder = ({
     }
     return groups;
   }, [nodeIdsKey]);
-  const totalNotesCount = (0, import_react68.useMemo)(
+  const totalNotesCount = (0, import_react69.useMemo)(
     () => allNoteGroups.reduce((sum, g) => sum + g.notes.length, 0),
     [allNoteGroups]
   );
-  const handleStepChange = (0, import_react68.useCallback)(
+  const handleStepChange = (0, import_react69.useCallback)(
     (nodeId, highlightPaths, shouldZoomOut) => {
       if (nodeId === null) {
         resetNodesAndEdges();
@@ -9314,16 +9322,22 @@ var NodeGraphBuilder = ({
     },
     [nodes, edges, setNodes, setEdges, resetNodesAndEdges, fitView]
   );
-  const isFlowVisualization = (0, import_react68.useMemo)(
+  const isFlowVisualization = (0, import_react69.useMemo)(
     () => edges.some((edge) => edge.type === "flow-edge"),
     [edges]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     "div",
     {
       ref: reactFlowWrapperRef,
       className: "w-full h-full bg-[rgb(var(--ec-page-bg))] flex flex-col eventcatalog-visualizer",
-      children: [
+      style: {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(PortalContainerProvider, { value: reactFlowWrapperRef.current, children: [
         isMermaidView ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("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__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex space-x-2 ml-4", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(DropdownMenu2.Root, { children: [
@@ -9338,7 +9352,7 @@ var NodeGraphBuilder = ({
                   ]
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DropdownMenu2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DropdownMenu2.Portal, { container: reactFlowWrapperRef.current, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
                 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",
@@ -9396,7 +9410,7 @@ var NodeGraphBuilder = ({
             }
           ) })
         ] }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
-          import_react69.ReactFlow,
+          import_react70.ReactFlow,
           {
             nodeTypes,
             edgeTypes: edgeTypes2,
@@ -9408,7 +9422,7 @@ var NodeGraphBuilder = ({
             onEdgesChange,
             onEdgeMouseEnter: handleEdgeMouseEnter,
             onEdgeMouseLeave: handleEdgeMouseLeave,
-            connectionLineType: import_react69.ConnectionLineType.SmoothStep,
+            connectionLineType: import_react70.ConnectionLineType.SmoothStep,
             nodeOrigin: NODE_ORIGIN,
             onNodeClick: handleNodeClick,
             onNodeMouseEnter: handleNodeMouseEnter,
@@ -9422,7 +9436,7 @@ var NodeGraphBuilder = ({
             className: "relative",
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
-                import_react69.Panel,
+                import_react70.Panel,
                 {
                   position: "top-center",
                   className: "w-full pr-6 pointer-events-none",
@@ -9440,46 +9454,52 @@ var NodeGraphBuilder = ({
                             ]
                           }
                         ) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DropdownMenu2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
-                          DropdownMenu2.Content,
+                        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                          DropdownMenu2.Portal,
                           {
-                            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",
-                            sideOffset: 0,
-                            align: "end",
-                            alignOffset: -180,
-                            children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DropdownMenu2.Arrow, { className: "fill-[rgb(var(--ec-page-bg))] stroke-[rgb(var(--ec-page-border))] stroke-1" }),
-                              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-                                VisualizerDropdownContent_default,
-                                {
-                                  isMermaidView,
-                                  setIsMermaidView,
-                                  animateMessages,
-                                  toggleAnimateMessages,
-                                  hideChannels,
-                                  toggleChannelsVisibility,
-                                  hasChannels,
-                                  showMinimap,
-                                  setShowMinimap,
-                                  handleFitView,
-                                  searchRef,
-                                  isChatEnabled,
-                                  openChat,
-                                  handleCopyArchitectureCode,
-                                  handleExportVisual,
-                                  setIsShareModalOpen,
-                                  toggleFullScreen,
-                                  openStudioModal,
-                                  isDevMode,
-                                  onSaveLayout: handleSaveLayout,
-                                  onResetLayout: handleResetLayout,
-                                  notesCount: totalNotesCount,
-                                  onOpenNotes: openNotesModal
-                                }
-                              )
-                            ]
+                            container: reactFlowWrapperRef.current,
+                            children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+                              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",
+                                sideOffset: 0,
+                                align: "end",
+                                alignOffset: -180,
+                                children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DropdownMenu2.Arrow, { className: "fill-[rgb(var(--ec-page-bg))] stroke-[rgb(var(--ec-page-border))] stroke-1" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                                    VisualizerDropdownContent_default,
+                                    {
+                                      isMermaidView,
+                                      setIsMermaidView,
+                                      animateMessages,
+                                      toggleAnimateMessages,
+                                      hideChannels,
+                                      toggleChannelsVisibility,
+                                      hasChannels,
+                                      showMinimap,
+                                      setShowMinimap,
+                                      handleFitView,
+                                      searchRef,
+                                      isChatEnabled,
+                                      openChat,
+                                      handleCopyArchitectureCode,
+                                      handleExportVisual,
+                                      setIsShareModalOpen,
+                                      toggleFullScreen,
+                                      openStudioModal,
+                                      isDevMode,
+                                      onSaveLayout: handleSaveLayout,
+                                      onResetLayout: handleResetLayout,
+                                      notesCount: totalNotesCount,
+                                      onOpenNotes: openNotesModal
+                                    }
+                                  )
+                                ]
+                              }
+                            )
                           }
-                        ) })
+                        )
                       ] }) }),
                       mode === "full" && showSearch && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex justify-end items-center gap-2", children: !isMermaidView && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "w-96", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                         VisualiserSearch_default,
@@ -9533,10 +9553,10 @@ var NodeGraphBuilder = ({
                   ]
                 }
               ),
-              includeBackground && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react69.Background, { color: "var(--ec-bg-dots)", gap: 16 }),
-              includeBackground && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react69.Controls, {}),
+              includeBackground && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react70.Background, { color: "var(--ec-bg-dots)", gap: 16 }),
+              includeBackground && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react70.Controls, {}),
               showMinimap && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-                import_react69.MiniMap,
+                import_react70.MiniMap,
                 {
                   nodeStrokeWidth: 3,
                   zoomable: true,
@@ -9544,7 +9564,7 @@ var NodeGraphBuilder = ({
                   style: MINIMAP_STYLE
                 }
               ),
-              isFlowVisualization && showFlowWalkthrough && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react69.Panel, { position: "bottom-left", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+              isFlowVisualization && showFlowWalkthrough && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react70.Panel, { position: "bottom-left", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                 StepWalkthrough_default,
                 {
                   nodes,
@@ -9555,7 +9575,7 @@ var NodeGraphBuilder = ({
                 }
               ) }),
               isDevMode && hasLayoutChanges && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-                import_react69.Panel,
+                import_react70.Panel,
                 {
                   position: "bottom-left",
                   style: isFlowVisualization && showFlowWalkthrough ? LAYOUT_CHANGE_PANEL_STYLE_WITH_WALKTHROUGH : LAYOUT_CHANGE_PANEL_STYLE_DEFAULT,
@@ -9677,7 +9697,7 @@ var NodeGraphBuilder = ({
             }
           )
         ] })
-      ]
+      ] })
     }
   );
 };
@@ -9714,7 +9734,7 @@ var NodeGraph = ({
   onSaveLayout,
   onResetLayout
 }) => {
-  const graphLayout = (0, import_react68.useMemo)(() => {
+  const graphLayout = (0, import_react69.useMemo)(() => {
     if (!graph) return null;
     return layoutGraph(
       graph.nodes,
@@ -9729,17 +9749,17 @@ var NodeGraph = ({
   const includeKey = includeKeyProp !== void 0 ? includeKeyProp : graph?.options?.legend !== false;
   const showSearch = showSearchProp !== void 0 ? showSearchProp : graph?.options?.search !== false;
   const animated = animatedProp ?? graph?.options?.animated;
-  const [elem, setElem] = (0, import_react68.useState)(null);
-  const [showFooter, setShowFooter] = (0, import_react68.useState)(true);
-  const [isStudioModalOpen, setIsStudioModalOpen] = (0, import_react68.useState)(false);
-  const openStudioModal = (0, import_react68.useCallback)(() => {
+  const [elem, setElem] = (0, import_react69.useState)(null);
+  const [showFooter, setShowFooter] = (0, import_react69.useState)(true);
+  const [isStudioModalOpen, setIsStudioModalOpen] = (0, import_react69.useState)(false);
+  const openStudioModal = (0, import_react69.useCallback)(() => {
     setIsStudioModalOpen(true);
   }, []);
   const containerToRenderInto = portalId || `${id}-portal`;
-  (0, import_react68.useEffect)(() => {
+  (0, import_react69.useEffect)(() => {
     setElem(document.getElementById(containerToRenderInto));
   }, []);
-  (0, import_react68.useEffect)(() => {
+  (0, import_react69.useEffect)(() => {
     const urlParams = new URLSearchParams(window.location.search);
     const embed = urlParams.get("embed");
     if (embed === "true") {
@@ -9748,7 +9768,7 @@ var NodeGraph = ({
   }, []);
   if (!elem) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { children: (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react69.ReactFlowProvider, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react70.ReactFlowProvider, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         NodeGraphBuilder,
         {
@@ -9842,7 +9862,7 @@ var edgeTypes = {
 };
 
 // src/utils/utils/utils.ts
-var import_react70 = require("@xyflow/react");
+var import_react71 = require("@xyflow/react");
 var import_dagre2 = __toESM(require("dagre"));
 var generateIdForNode = (node) => {
   return `${node.data.id}-${node.data.version}`;
@@ -9917,7 +9937,7 @@ var createEdge = (edgeOptions) => {
     //   height: 40,
     // },
     markerEnd: {
-      type: import_react70.MarkerType.ArrowClosed,
+      type: import_react71.MarkerType.ArrowClosed,
       width: 40,
       height: 40,
       color: "rgb(var(--ec-page-text-muted))"
@@ -9932,8 +9952,8 @@ var createEdge = (edgeOptions) => {
 };
 var createNode = (values) => {
   return {
-    sourcePosition: import_react70.Position.Right,
-    targetPosition: import_react70.Position.Left,
+    sourcePosition: import_react71.Position.Right,
+    targetPosition: import_react71.Position.Left,
     ...values
   };
 };