@eventcatalog/visualiser 5.0.0-beta.5 → 5.0.0-beta.6

package/dist/index.js

@@ -28,8 +28,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var index_exports = {};
-__export(index_exports, {
+var src_exports = {};
+__export(src_exports, {
   ACTOR: () => ACTOR,
   AGENT: () => AGENT,
   AGENT_TOOL: () => AGENT_TOOL,
@@ -133,12 +133,12 @@ __export(index_exports, {
   normalizeOwners: () => normalizeOwners,
   pauseEdgeAnimations: () => pauseEdgeAnimations
 });
-module.exports = __toCommonJS(index_exports);
+module.exports = __toCommonJS(src_exports);
 
 // src/components/NodeGraph.tsx
-var import_react110 = require("react");
-var import_react_dom = require("react-dom");
-var import_react111 = require("@xyflow/react");
+var import_react112 = require("react");
+var import_react_dom2 = require("react-dom");
+var import_react113 = require("@xyflow/react");
 var import_lucide_react43 = require("lucide-react");
 var DropdownMenu3 = __toESM(require("@radix-ui/react-dropdown-menu"));
 var import_html_to_image = require("html-to-image");
@@ -492,7 +492,7 @@ var NoteNode_default = (0, import_react3.memo)(function NoteNodeComponent({
 });
 
 // src/nodes/service/ServiceNode.tsx
-var import_react9 = require("react");
+var import_react11 = require("react");
 var import_lucide_react4 = require("lucide-react");
 
 // src/utils/custom-icon.tsx
@@ -605,19 +605,33 @@ var OwnerIndicator = (0, import_react5.memo)(function OwnerIndicator2({
 });
 
 // src/nodes/service/ServiceNode.tsx
-var import_react10 = require("@xyflow/react");
+var import_react12 = require("@xyflow/react");
+
+// src/utils/node-connections.ts
+var import_react6 = require("react");
+var import_react7 = require("@xyflow/react");
+function useNodeHasConnections() {
+  const id = (0, import_react7.useNodeId)();
+  const keys = (0, import_react6.useMemo)(() => [`${id}-target`, `${id}-source`], [id]);
+  const selector = (0, import_react6.useCallback)(
+    (state) => (state.connectionLookup.get(keys[0])?.size ? 1 : 0) | (state.connectionLookup.get(keys[1])?.size ? 2 : 0),
+    [keys]
+  );
+  const connected = (0, import_react7.useStore)(selector);
+  return { target: (connected & 1) > 0, source: (connected & 2) > 0 };
+}
 
 // src/nodes/NotesIndicator.tsx
 var import_lucide_react2 = require("lucide-react");
-var import_react7 = require("react");
+var import_react9 = require("react");
 var Dialog = __toESM(require("@radix-ui/react-dialog"));
 
 // src/context/PortalContainerContext.tsx
-var import_react6 = require("react");
-var PortalContainerContext = (0, import_react6.createContext)(null);
+var import_react8 = require("react");
+var PortalContainerContext = (0, import_react8.createContext)(null);
 var PortalContainerProvider = PortalContainerContext.Provider;
 function usePortalContainer() {
-  const container = (0, import_react6.useContext)(PortalContainerContext);
+  const container = (0, import_react8.useContext)(PortalContainerContext);
   return container ?? void 0;
 }
 
@@ -1160,13 +1174,13 @@ function NotesModal({
     }
   ) }) });
 }
-var NotesIndicator = (0, import_react7.memo)(function NotesIndicator2({
+var NotesIndicator = (0, import_react9.memo)(function NotesIndicator2({
   notes,
   resourceName
 }) {
-  const [isHovered, setIsHovered] = (0, import_react7.useState)(false);
-  const [isModalOpen, setIsModalOpen] = (0, import_react7.useState)(false);
-  const handleClick = (0, import_react7.useCallback)((e) => {
+  const [isHovered, setIsHovered] = (0, import_react9.useState)(false);
+  const [isModalOpen, setIsModalOpen] = (0, import_react9.useState)(false);
+  const handleClick = (0, import_react9.useCallback)((e) => {
     e.stopPropagation();
     setIsHovered(false);
     setIsModalOpen(true);
@@ -1354,7 +1368,7 @@ var NotesIndicator = (0, import_react7.memo)(function NotesIndicator2({
 });
 
 // src/nodes/TruncatedResourceName.tsx
-var import_react8 = require("react");
+var import_react10 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function TruncatedResourceName({
   as: Component = "span",
@@ -1364,9 +1378,9 @@ function TruncatedResourceName({
   tooltipBorderColor = "rgb(var(--ec-page-border))",
   value
 }) {
-  const ref = (0, import_react8.useRef)(null);
-  const [isTruncated, setIsTruncated] = (0, import_react8.useState)(false);
-  (0, import_react8.useEffect)(() => {
+  const ref = (0, import_react10.useRef)(null);
+  const [isTruncated, setIsTruncated] = (0, import_react10.useState)(false);
+  (0, import_react10.useEffect)(() => {
     const element = ref.current;
     if (!element) return;
     const updateTruncation = () => {
@@ -1477,11 +1491,11 @@ function normalizeSpecTypes(specs) {
   }
   return Array.from(types);
 }
-var SpecBadges = (0, import_react9.memo)(function SpecBadges2({
+var SpecBadges = (0, import_react11.memo)(function SpecBadges2({
   specifications,
   isDark
 }) {
-  const specTypes = (0, import_react9.useMemo)(
+  const specTypes = (0, import_react11.useMemo)(
     () => normalizeSpecTypes(specifications),
     [specifications]
   );
@@ -1502,7 +1516,7 @@ var SpecBadges = (0, import_react9.memo)(function SpecBadges2({
     );
   }) });
 });
-var MiniEnvelope = (0, import_react9.memo)(function MiniEnvelope2({
+var MiniEnvelope = (0, import_react11.memo)(function MiniEnvelope2({
   side,
   delay
 }) {
@@ -1543,7 +1557,7 @@ var MiniEnvelope = (0, import_react9.memo)(function MiniEnvelope2({
     }
   );
 });
-var ServiceMessageFlow = (0, import_react9.memo)(function ServiceMessageFlow2({
+var ServiceMessageFlow = (0, import_react11.memo)(function ServiceMessageFlow2({
   side
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
@@ -1568,7 +1582,7 @@ var ServiceMessageFlow = (0, import_react9.memo)(function ServiceMessageFlow2({
     }
   );
 });
-var GlowHandle = (0, import_react9.memo)(function GlowHandle2({
+var GlowHandle = (0, import_react11.memo)(function GlowHandle2({
   side,
   external
 }) {
@@ -1686,18 +1700,18 @@ function PostItService(props) {
       children: [
         props.data.isFocused && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FocusedResourceIndicator, {}),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          import_react10.Handle,
+          import_react12.Handle,
           {
             type: "target",
-            position: import_react10.Position.Left,
+            position: import_react12.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          import_react10.Handle,
+          import_react12.Handle,
           {
             type: "source",
-            position: import_react10.Position.Right,
+            position: import_react12.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
@@ -1798,12 +1812,11 @@ function DefaultService(props) {
   } = props.data.service;
   const mode = props.data.mode || "simple";
   const customIcon = isIconPath(styles?.icon) ? styles.icon : void 0;
-  const owners = (0, import_react9.useMemo)(
+  const owners = (0, import_react11.useMemo)(
     () => normalizeOwners(props.data.service.owners),
     [props.data.service.owners]
   );
-  const targetConnections = (0, import_react10.useNodeConnections)({ handleType: "target" });
-  const sourceConnections = (0, import_react10.useNodeConnections)({ handleType: "source" });
+  const connected = useNodeHasConnections();
   const isDark = useDarkMode();
   const deprecatedStripe = isDark ? "rgba(239,68,68,0.25)" : "rgba(239,68,68,0.1)";
   const p = externalSystem ? DEFAULT_EXTERNAL : DEFAULT_SERVICE;
@@ -1824,24 +1837,24 @@ function DefaultService(props) {
       children: [
         props.data.isFocused && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FocusedResourceIndicator, {}),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          import_react10.Handle,
+          import_react12.Handle,
           {
             type: "target",
-            position: import_react10.Position.Left,
+            position: import_react12.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          import_react10.Handle,
+          import_react12.Handle,
           {
             type: "source",
-            position: import_react10.Position.Right,
+            position: import_react12.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         notes && notes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(NotesIndicator, { notes, resourceName: name }),
-        targetConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(GlowHandle, { side: "left", external: externalSystem }),
-        sourceConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(GlowHandle, { side: "right", external: externalSystem }),
+        connected.target && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(GlowHandle, { side: "left", external: externalSystem }),
+        connected.source && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(GlowHandle, { side: "right", external: externalSystem }),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "absolute -top-2.5 left-2.5 flex items-center gap-1.5 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
           "span",
           {
@@ -1910,7 +1923,7 @@ function DefaultService(props) {
     }
   );
 }
-var ServiceNode_default = (0, import_react9.memo)(function Service(props) {
+var ServiceNode_default = (0, import_react11.memo)(function Service(props) {
   const nodeStyle = props?.data?.style;
   if (nodeStyle === "post-it") {
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PostItService, { ...props });
@@ -1919,9 +1932,9 @@ var ServiceNode_default = (0, import_react9.memo)(function Service(props) {
 });
 
 // src/nodes/Agent.tsx
-var import_react11 = require("react");
+var import_react13 = require("react");
 var import_lucide_react5 = require("lucide-react");
-var import_react12 = require("@xyflow/react");
+var import_react14 = require("@xyflow/react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function classNames3(...classes) {
   return classes.filter(Boolean).join(" ");
@@ -1968,9 +1981,8 @@ function Agent(props) {
   } = props.data.agent;
   const mode = props.data.mode || "simple";
   const customIcon = isIconPath(styles?.icon) ? styles.icon : void 0;
-  const normalizedOwners = (0, import_react11.useMemo)(() => normalizeOwners(owners), [owners]);
-  const targetConnections = (0, import_react12.useNodeConnections)({ handleType: "target" });
-  const sourceConnections = (0, import_react12.useNodeConnections)({ handleType: "source" });
+  const normalizedOwners = (0, import_react13.useMemo)(() => normalizeOwners(owners), [owners]);
+  const connected = useNodeHasConnections();
   const isDark = useDarkMode();
   const deprecatedStripe = isDark ? "rgba(239,68,68,0.25)" : "rgba(239,68,68,0.1)";
   const draftStripe = isDark ? "rgba(14,165,233,0.25)" : "rgba(14,165,233,0.15)";
@@ -1991,24 +2003,24 @@ function Agent(props) {
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          import_react12.Handle,
+          import_react14.Handle,
           {
             type: "target",
-            position: import_react12.Position.Left,
+            position: import_react14.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          import_react12.Handle,
+          import_react14.Handle,
           {
             type: "source",
-            position: import_react12.Position.Right,
+            position: import_react14.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         notes && notes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(NotesIndicator, { notes, resourceName: name }),
-        targetConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(GlowHandle3, { side: "left" }),
-        sourceConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(GlowHandle3, { side: "right" }),
+        connected.target && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(GlowHandle3, { side: "left" }),
+        connected.source && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(GlowHandle3, { side: "right" }),
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "absolute -top-2.5 left-2.5 flex items-center gap-1.5 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           "span",
           {
@@ -2089,12 +2101,12 @@ function Agent(props) {
     }
   );
 }
-var Agent_default = (0, import_react11.memo)(Agent);
+var Agent_default = (0, import_react13.memo)(Agent);
 
 // src/nodes/AgentTool.tsx
-var import_react13 = require("react");
+var import_react15 = require("react");
 var import_lucide_react6 = require("lucide-react");
-var import_react14 = require("@xyflow/react");
+var import_react16 = require("@xyflow/react");
 
 // src/icons/protocols/mcp-dark.svg?raw
 var mcp_dark_default = '<svg fill="#ffffff" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>ModelContextProtocol</title><path d="M15.688 2.343a2.588 2.588 0 00-3.61 0l-9.626 9.44a.863.863 0 01-1.203 0 .823.823 0 010-1.18l9.626-9.44a4.313 4.313 0 016.016 0 4.116 4.116 0 011.204 3.54 4.3 4.3 0 013.609 1.18l.05.05a4.115 4.115 0 010 5.9l-8.706 8.537a.274.274 0 000 .393l1.788 1.754a.823.823 0 010 1.18.863.863 0 01-1.203 0l-1.788-1.753a1.92 1.92 0 010-2.754l8.706-8.538a2.47 2.47 0 000-3.54l-.05-.049a2.588 2.588 0 00-3.607-.003l-7.172 7.034-.002.002-.098.097a.863.863 0 01-1.204 0 .823.823 0 010-1.18l7.273-7.133a2.47 2.47 0 00-.003-3.537z"/><path d="M14.485 4.703a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a4.115 4.115 0 000 5.9 4.314 4.314 0 006.016 0l7.12-6.982a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a2.588 2.588 0 01-3.61 0 2.47 2.47 0 010-3.54l7.12-6.982z"/></svg>';
@@ -2151,8 +2163,7 @@ function GlowHandle4({ side }) {
 function AgentTool(props) {
   const { name, type, icon, url, description } = props.data.agentTool;
   const customIcon = isIconPath(icon) ? icon : void 0;
-  const targetConnections = (0, import_react14.useNodeConnections)({ handleType: "target" });
-  const sourceConnections = (0, import_react14.useNodeConnections)({ handleType: "source" });
+  const connected = useNodeHasConnections();
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
@@ -2166,23 +2177,23 @@ function AgentTool(props) {
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          import_react14.Handle,
+          import_react16.Handle,
           {
             type: "target",
-            position: import_react14.Position.Left,
+            position: import_react16.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          import_react14.Handle,
+          import_react16.Handle,
           {
             type: "source",
-            position: import_react14.Position.Right,
+            position: import_react16.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
-        targetConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(GlowHandle4, { side: "left" }),
-        sourceConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(GlowHandle4, { side: "right" }),
+        connected.target && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(GlowHandle4, { side: "left" }),
+        connected.source && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(GlowHandle4, { side: "right" }),
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "absolute -top-2.5 left-2.5 flex items-center gap-1.5 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "inline-flex items-center gap-1 text-[7px] font-bold uppercase tracking-widest text-white px-1.5 py-0.5 rounded shadow-sm bg-violet-500", children: [
           /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react6.Wrench, { className: "w-2.5 h-2.5", strokeWidth: 2.5 }),
           "Tool"
@@ -2225,15 +2236,15 @@ function AgentTool(props) {
     }
   );
 }
-var AgentTool_default = (0, import_react13.memo)(AgentTool);
+var AgentTool_default = (0, import_react15.memo)(AgentTool);
 
 // src/nodes/event/EventNode.tsx
-var import_react16 = require("react");
+var import_react18 = require("react");
 var import_lucide_react7 = require("lucide-react");
-var import_react17 = require("@xyflow/react");
+var import_react19 = require("@xyflow/react");
 
 // src/nodes/ApiInfo.tsx
-var import_react15 = require("react");
+var import_react17 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var METHOD_COLORS = {
   GET: { bg: "rgba(34,197,94,0.15)", text: "#22c55e" },
@@ -2254,7 +2265,7 @@ function getStatusColor(code) {
   const prefix = String(code)[0];
   return STATUS_COLORS[prefix] || STATUS_COLORS["2"];
 }
-var MethodBadge = (0, import_react15.memo)(function MethodBadge2({
+var MethodBadge = (0, import_react17.memo)(function MethodBadge2({
   method
 }) {
   const upper = method.toUpperCase();
@@ -2268,7 +2279,7 @@ var MethodBadge = (0, import_react15.memo)(function MethodBadge2({
     }
   );
 });
-var StatusCodes = (0, import_react15.memo)(function StatusCodes2({
+var StatusCodes = (0, import_react17.memo)(function StatusCodes2({
   codes
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex items-center gap-1 flex-wrap mt-1.5", children: codes.map((code) => {
@@ -2284,7 +2295,7 @@ var StatusCodes = (0, import_react15.memo)(function StatusCodes2({
     );
   }) });
 });
-var ApiPath = (0, import_react15.memo)(function ApiPath2({ path }) {
+var ApiPath = (0, import_react17.memo)(function ApiPath2({ path }) {
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "span",
     {
@@ -2297,7 +2308,7 @@ var ApiPath = (0, import_react15.memo)(function ApiPath2({ path }) {
 
 // src/nodes/event/EventNode.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var GlowHandle5 = (0, import_react16.memo)(function GlowHandle6({
+var GlowHandle5 = (0, import_react18.memo)(function GlowHandle6({
   side
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -2338,18 +2349,18 @@ function PostItEvent(props) {
       children: [
         props.data.isFocused && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(FocusedResourceIndicator, {}),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          import_react17.Handle,
+          import_react19.Handle,
           {
             type: "target",
-            position: import_react17.Position.Left,
+            position: import_react19.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          import_react17.Handle,
+          import_react19.Handle,
           {
             type: "source",
-            position: import_react17.Position.Right,
+            position: import_react19.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
@@ -2452,12 +2463,11 @@ function DefaultEvent(props) {
   const mode = props?.data?.mode || "simple";
   const hasApiInfo = !!(method || path);
   const customIcon = isIconPath(styles?.icon) ? styles.icon : void 0;
-  const owners = (0, import_react16.useMemo)(
+  const owners = (0, import_react18.useMemo)(
     () => normalizeOwners(props?.data?.message?.owners),
     [props?.data?.message?.owners]
   );
-  const targetConnections = (0, import_react17.useNodeConnections)({ handleType: "target" });
-  const sourceConnections = (0, import_react17.useNodeConnections)({ handleType: "source" });
+  const connected = useNodeHasConnections();
   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)(
@@ -2475,23 +2485,23 @@ function DefaultEvent(props) {
       children: [
         props.data.isFocused && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(FocusedResourceIndicator, {}),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          import_react17.Handle,
+          import_react19.Handle,
           {
             type: "target",
-            position: import_react17.Position.Left,
+            position: import_react19.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          import_react17.Handle,
+          import_react19.Handle,
           {
             type: "source",
-            position: import_react17.Position.Right,
+            position: import_react19.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
-        targetConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(GlowHandle5, { side: "left" }),
-        sourceConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(GlowHandle5, { side: "right" }),
+        connected.target && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(GlowHandle5, { side: "left" }),
+        connected.source && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(GlowHandle5, { side: "right" }),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "absolute -top-2.5 left-2.5 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
           "span",
           {
@@ -2583,7 +2593,7 @@ function DefaultEvent(props) {
     }
   );
 }
-var EventNode_default = (0, import_react16.memo)(function Event(props) {
+var EventNode_default = (0, import_react18.memo)(function Event(props) {
   const nodeStyle = props?.data?.style;
   if (nodeStyle === "post-it") {
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PostItEvent, { ...props });
@@ -2592,7 +2602,7 @@ var EventNode_default = (0, import_react16.memo)(function Event(props) {
 });
 
 // src/nodes/event/config.ts
-var import_react18 = require("@xyflow/react");
+var import_react20 = require("@xyflow/react");
 var import_lucide_react8 = require("lucide-react");
 
 // src/nodes/node-types.ts
@@ -2622,12 +2632,12 @@ var config_default = {
     if (EVENT.includes(connection.source) && SERVICE.includes(connection.target)) {
       return {
         label: "Publishes",
-        markerEnd: { type: import_react18.MarkerType.ArrowClosed, color: "#000000" }
+        markerEnd: { type: import_react20.MarkerType.ArrowClosed, color: "#000000" }
       };
     }
     return {
       label: "Subscribes",
-      markerEnd: { type: import_react18.MarkerType.ArrowClosed, color: "#000000" }
+      markerEnd: { type: import_react20.MarkerType.ArrowClosed, color: "#000000" }
     };
   },
   defaultData: {
@@ -2668,11 +2678,11 @@ var config_default = {
 };
 
 // src/nodes/query/QueryNode.tsx
-var import_react19 = require("react");
+var import_react21 = require("react");
 var import_lucide_react9 = require("lucide-react");
-var import_react20 = require("@xyflow/react");
+var import_react22 = require("@xyflow/react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var GlowHandle7 = (0, import_react19.memo)(function GlowHandle8({
+var GlowHandle7 = (0, import_react21.memo)(function GlowHandle8({
   side
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -2713,18 +2723,18 @@ function PostItQuery(props) {
       children: [
         props.data.isFocused && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FocusedResourceIndicator, {}),
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          import_react20.Handle,
+          import_react22.Handle,
           {
             type: "target",
-            position: import_react20.Position.Left,
+            position: import_react22.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          import_react20.Handle,
+          import_react22.Handle,
           {
             type: "source",
-            position: import_react20.Position.Right,
+            position: import_react22.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
@@ -2827,12 +2837,11 @@ function DefaultQuery(props) {
   const mode = props.data.mode || "simple";
   const hasApiInfo = !!(method || path);
   const customIcon = isIconPath(styles?.icon) ? styles.icon : void 0;
-  const owners = (0, import_react19.useMemo)(
+  const owners = (0, import_react21.useMemo)(
     () => normalizeOwners(props.data.message?.owners),
     [props.data.message?.owners]
   );
-  const targetConnections = (0, import_react20.useNodeConnections)({ handleType: "target" });
-  const sourceConnections = (0, import_react20.useNodeConnections)({ handleType: "source" });
+  const connected = useNodeHasConnections();
   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)(
@@ -2850,24 +2859,24 @@ function DefaultQuery(props) {
       children: [
         props.data.isFocused && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FocusedResourceIndicator, {}),
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          import_react20.Handle,
+          import_react22.Handle,
           {
             type: "target",
-            position: import_react20.Position.Left,
+            position: import_react22.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          import_react20.Handle,
+          import_react22.Handle,
           {
             type: "source",
-            position: import_react20.Position.Right,
+            position: import_react22.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         notes && notes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(NotesIndicator, { notes, resourceName: name }),
-        targetConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(GlowHandle7, { side: "left" }),
-        sourceConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(GlowHandle7, { side: "right" }),
+        connected.target && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(GlowHandle7, { side: "left" }),
+        connected.source && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(GlowHandle7, { side: "right" }),
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "absolute -top-2.5 left-2.5 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
           "span",
           {
@@ -2946,7 +2955,7 @@ function DefaultQuery(props) {
     }
   );
 }
-var QueryNode_default = (0, import_react19.memo)(function Query(props) {
+var QueryNode_default = (0, import_react21.memo)(function Query(props) {
   const nodeStyle = props?.data?.style;
   if (nodeStyle === "post-it") {
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PostItQuery, { ...props });
@@ -2955,11 +2964,11 @@ var QueryNode_default = (0, import_react19.memo)(function Query(props) {
 });
 
 // src/nodes/command/CommandNode.tsx
-var import_react21 = require("react");
+var import_react23 = require("react");
 var import_lucide_react10 = require("lucide-react");
-var import_react22 = require("@xyflow/react");
+var import_react24 = require("@xyflow/react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var GlowHandle9 = (0, import_react21.memo)(function GlowHandle10({
+var GlowHandle9 = (0, import_react23.memo)(function GlowHandle10({
   side
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
@@ -3000,18 +3009,18 @@ function PostItCommand(props) {
       children: [
         props.data.isFocused && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FocusedResourceIndicator, {}),
         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          import_react22.Handle,
+          import_react24.Handle,
           {
             type: "target",
-            position: import_react22.Position.Left,
+            position: import_react24.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          import_react22.Handle,
+          import_react24.Handle,
           {
             type: "source",
-            position: import_react22.Position.Right,
+            position: import_react24.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
@@ -3120,12 +3129,11 @@ function DefaultCommand(props) {
   const mode = props.data.mode || "simple";
   const hasApiInfo = !!(method || path);
   const customIcon = isIconPath(styles?.icon) ? styles.icon : void 0;
-  const owners = (0, import_react21.useMemo)(
+  const owners = (0, import_react23.useMemo)(
     () => normalizeOwners(props.data.message?.owners),
     [props.data.message?.owners]
   );
-  const targetConnections = (0, import_react22.useNodeConnections)({ handleType: "target" });
-  const sourceConnections = (0, import_react22.useNodeConnections)({ handleType: "source" });
+  const connected = useNodeHasConnections();
   const isDark = useDarkMode();
   const deprecatedStripe = isDark ? "rgba(239,68,68,0.25)" : "rgba(239,68,68,0.1)";
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
@@ -3143,24 +3151,24 @@ function DefaultCommand(props) {
       children: [
         props.data.isFocused && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FocusedResourceIndicator, {}),
         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          import_react22.Handle,
+          import_react24.Handle,
           {
             type: "target",
-            position: import_react22.Position.Left,
+            position: import_react24.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          import_react22.Handle,
+          import_react24.Handle,
           {
             type: "source",
-            position: import_react22.Position.Right,
+            position: import_react24.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         notes && notes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(NotesIndicator, { notes, resourceName: name }),
-        targetConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(GlowHandle9, { side: "left" }),
-        sourceConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(GlowHandle9, { side: "right" }),
+        connected.target && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(GlowHandle9, { side: "left" }),
+        connected.source && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(GlowHandle9, { side: "right" }),
         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "absolute -top-2.5 left-2.5 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
           "span",
           {
@@ -3239,7 +3247,7 @@ function DefaultCommand(props) {
     }
   );
 }
-var CommandNode_default = (0, import_react21.memo)(function Command(props) {
+var CommandNode_default = (0, import_react23.memo)(function Command(props) {
   const nodeStyle = props?.data?.style;
   if (nodeStyle === "post-it") {
     return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PostItCommand, { ...props });
@@ -3249,8 +3257,8 @@ var CommandNode_default = (0, import_react21.memo)(function Command(props) {
 
 // src/nodes/channel/ChannelNode.tsx
 var import_lucide_react11 = require("lucide-react");
-var import_react23 = require("@xyflow/react");
-var import_react24 = require("react");
+var import_react25 = require("@xyflow/react");
+var import_react26 = require("react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var DELIVERY_GUARANTEE_LABELS = {
   "at-most-once": "At most once",
@@ -3359,18 +3367,18 @@ function PostItChannel(props) {
       children: [
         props.data.isFocused && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FocusedResourceIndicator, {}),
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          import_react23.Handle,
+          import_react25.Handle,
           {
             type: "target",
-            position: import_react23.Position.Left,
+            position: import_react25.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          import_react23.Handle,
+          import_react25.Handle,
           {
             type: "source",
-            position: import_react23.Position.Right,
+            position: import_react25.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
@@ -3499,12 +3507,11 @@ function DefaultChannel(props) {
   } = data.channel;
   const mode = props.data.mode || "simple";
   const customIcon = isIconPath(styles?.icon) ? styles.icon : void 0;
-  const owners = (0, import_react24.useMemo)(
+  const owners = (0, import_react26.useMemo)(
     () => normalizeOwners(data.channel?.owners),
     [data.channel?.owners]
   );
-  const sourceConnections = (0, import_react23.useNodeConnections)({ handleType: "source" });
-  const targetConnections = (0, import_react23.useNodeConnections)({ handleType: "target" });
+  const connected = useNodeHasConnections();
   const isDark = useDarkMode();
   const deprecatedStripe = isDark ? "rgba(239,68,68,0.25)" : "rgba(239,68,68,0.1)";
   const guarantee = getGuarantee(deliveryGuarantee);
@@ -3523,24 +3530,24 @@ function DefaultChannel(props) {
       children: [
         props.data.isFocused && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FocusedResourceIndicator, {}),
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          import_react23.Handle,
+          import_react25.Handle,
           {
             type: "target",
-            position: import_react23.Position.Left,
+            position: import_react25.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          import_react23.Handle,
+          import_react25.Handle,
           {
             type: "source",
-            position: import_react23.Position.Right,
+            position: import_react25.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         notes && notes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(NotesIndicator, { notes, resourceName: name }),
-        targetConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GlowHandle11, { side: "left" }),
-        sourceConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GlowHandle11, { side: "right" }),
+        connected.target && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GlowHandle11, { side: "left" }),
+        connected.source && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GlowHandle11, { side: "right" }),
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "absolute -top-2.5 left-2.5 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
           "span",
           {
@@ -3646,7 +3653,7 @@ function DefaultChannel(props) {
     }
   );
 }
-var ChannelNode_default = (0, import_react24.memo)(function Channel(props) {
+var ChannelNode_default = (0, import_react26.memo)(function Channel(props) {
   const nodeStyle = props?.data?.style;
   if (nodeStyle === "post-it") {
     return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(PostItChannel, { ...props });
@@ -3655,9 +3662,9 @@ var ChannelNode_default = (0, import_react24.memo)(function Channel(props) {
 });
 
 // src/nodes/data/DataNode.tsx
-var import_react25 = require("react");
+var import_react27 = require("react");
 var import_lucide_react12 = require("lucide-react");
-var import_react26 = require("@xyflow/react");
+var import_react28 = require("@xyflow/react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function GlowHandle12({ side }) {
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
@@ -3724,18 +3731,18 @@ function PostItData(props) {
       children: [
         props.data.isFocused && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FocusedResourceIndicator, {}),
         /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          import_react26.Handle,
+          import_react28.Handle,
           {
             type: "target",
-            position: import_react26.Position.Left,
+            position: import_react28.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          import_react26.Handle,
+          import_react28.Handle,
           {
             type: "source",
-            position: import_react26.Position.Right,
+            position: import_react28.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
@@ -3844,9 +3851,8 @@ function DefaultData(props) {
   const typeLabel = getDataNodeTypeLabel(container_type, type);
   const mode = props.data.mode || "simple";
   const customIcon = isIconPath(styles?.icon) ? styles.icon : void 0;
-  const ownersNormalized = (0, import_react25.useMemo)(() => normalizeOwners(owners), [owners]);
-  const targetConnections = (0, import_react26.useNodeConnections)({ handleType: "target" });
-  const sourceConnections = (0, import_react26.useNodeConnections)({ handleType: "source" });
+  const ownersNormalized = (0, import_react27.useMemo)(() => normalizeOwners(owners), [owners]);
+  const connected = useNodeHasConnections();
   const isDark = useDarkMode();
   const deprecatedStripe = isDark ? "rgba(239,68,68,0.25)" : "rgba(239,68,68,0.1)";
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
@@ -3864,24 +3870,24 @@ function DefaultData(props) {
       children: [
         props.data.isFocused && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FocusedResourceIndicator, {}),
         /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          import_react26.Handle,
+          import_react28.Handle,
           {
             type: "target",
-            position: import_react26.Position.Left,
+            position: import_react28.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          import_react26.Handle,
+          import_react28.Handle,
           {
             type: "source",
-            position: import_react26.Position.Right,
+            position: import_react28.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         notes && notes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(NotesIndicator, { notes, resourceName: name }),
-        targetConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(GlowHandle12, { side: "left" }),
-        sourceConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(GlowHandle12, { side: "right" }),
+        connected.target && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(GlowHandle12, { side: "left" }),
+        connected.source && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(GlowHandle12, { side: "right" }),
         /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "absolute -top-2.5 left-2.5 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
           "span",
           {
@@ -3955,7 +3961,7 @@ function DefaultData(props) {
     }
   );
 }
-var DataNode_default = (0, import_react25.memo)(function Data(props) {
+var DataNode_default = (0, import_react27.memo)(function Data(props) {
   const nodeStyle = props?.data?.style;
   if (nodeStyle === "post-it") {
     return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PostItData, { ...props });
@@ -3964,7 +3970,7 @@ var DataNode_default = (0, import_react25.memo)(function Data(props) {
 });
 
 // src/nodes/data/config.ts
-var import_react27 = require("@xyflow/react");
+var import_react29 = require("@xyflow/react");
 var import_lucide_react13 = require("lucide-react");
 var config_default2 = {
   type: "data",
@@ -3979,18 +3985,18 @@ var config_default2 = {
     if (connection.source === "data" && connection.target === "service") {
       return {
         label: "Provides data to",
-        markerEnd: { type: import_react27.MarkerType.ArrowClosed, color: "#000000" }
+        markerEnd: { type: import_react29.MarkerType.ArrowClosed, color: "#000000" }
       };
     }
     if (connection.source === "service" && connection.target === "data") {
       return {
         label: "Stores data in",
-        markerEnd: { type: import_react27.MarkerType.ArrowClosed, color: "#000000" }
+        markerEnd: { type: import_react29.MarkerType.ArrowClosed, color: "#000000" }
       };
     }
     return {
       label: "Connected to",
-      markerEnd: { type: import_react27.MarkerType.ArrowClosed, color: "#000000" }
+      markerEnd: { type: import_react29.MarkerType.ArrowClosed, color: "#000000" }
     };
   },
   defaultData: {
@@ -4046,12 +4052,12 @@ var config_default2 = {
 };
 
 // src/nodes/view/ViewNode.tsx
-var import_react28 = require("react");
+var import_react30 = require("react");
 var import_lucide_react14 = require("lucide-react");
-var import_react29 = require("@xyflow/react");
+var import_react31 = require("@xyflow/react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var VIEW_COLOR = "#0ea5e9";
-var GlowHandle13 = (0, import_react28.memo)(function GlowHandle14({
+var GlowHandle13 = (0, import_react30.memo)(function GlowHandle14({
   side
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -4075,7 +4081,7 @@ var GlowHandle13 = (0, import_react28.memo)(function GlowHandle14({
     }
   );
 });
-var ViewNode_default = (0, import_react28.memo)(function View(props) {
+var ViewNode_default = (0, import_react30.memo)(function View(props) {
   const {
     name,
     version,
@@ -4085,9 +4091,8 @@ var ViewNode_default = (0, import_react28.memo)(function View(props) {
     notes
   } = props.data.view;
   const mode = props.data.mode || "simple";
-  const ownersNormalized = (0, import_react28.useMemo)(() => normalizeOwners(owners), [owners]);
-  const targetConnections = (0, import_react29.useNodeConnections)({ handleType: "target" });
-  const sourceConnections = (0, import_react29.useNodeConnections)({ handleType: "source" });
+  const ownersNormalized = (0, import_react30.useMemo)(() => normalizeOwners(owners), [owners]);
+  const connected = useNodeHasConnections();
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     "div",
     {
@@ -4102,24 +4107,24 @@ var ViewNode_default = (0, import_react28.memo)(function View(props) {
       children: [
         props.data.isFocused && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(FocusedResourceIndicator, {}),
         /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          import_react29.Handle,
+          import_react31.Handle,
           {
             type: "target",
-            position: import_react29.Position.Left,
+            position: import_react31.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          import_react29.Handle,
+          import_react31.Handle,
           {
             type: "source",
-            position: import_react29.Position.Right,
+            position: import_react31.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         notes && notes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(NotesIndicator, { notes, resourceName: name }),
-        targetConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GlowHandle13, { side: "left" }),
-        sourceConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GlowHandle13, { side: "right" }),
+        connected.target && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GlowHandle13, { side: "left" }),
+        connected.source && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GlowHandle13, { side: "right" }),
         /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "absolute -top-2.5 left-2.5 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "inline-flex items-center gap-1 text-[7px] font-bold uppercase tracking-widest text-white px-1.5 py-0.5 rounded shadow-sm bg-sky-500", children: [
           /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react14.MonitorIcon, { className: "w-2.5 h-2.5", strokeWidth: 2.5 }),
           "View"
@@ -4174,9 +4179,9 @@ var ViewNode_default = (0, import_react28.memo)(function View(props) {
 });
 
 // src/nodes/actor/ActorNode.tsx
-var import_react30 = require("react");
+var import_react32 = require("react");
 var import_lucide_react15 = require("lucide-react");
-var import_react31 = require("@xyflow/react");
+var import_react33 = require("@xyflow/react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 function GlowHandle15({ side }) {
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -4215,18 +4220,18 @@ function PostItActor(props) {
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-          import_react31.Handle,
+          import_react33.Handle,
           {
             type: "target",
-            position: import_react31.Position.Left,
+            position: import_react33.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-          import_react31.Handle,
+          import_react33.Handle,
           {
             type: "source",
-            position: import_react31.Position.Right,
+            position: import_react33.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
@@ -4301,8 +4306,7 @@ function PostItActor(props) {
 function DefaultActor(props) {
   const { name, summary, deprecated, draft, notes } = props?.data;
   const mode = props?.data?.mode || "simple";
-  const targetConnections = (0, import_react31.useNodeConnections)({ handleType: "target" });
-  const sourceConnections = (0, import_react31.useNodeConnections)({ handleType: "source" });
+  const connected = useNodeHasConnections();
   const isDark = useDarkMode();
   const deprecatedStripe = isDark ? "rgba(239,68,68,0.25)" : "rgba(239,68,68,0.1)";
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
@@ -4319,24 +4323,24 @@ function DefaultActor(props) {
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-          import_react31.Handle,
+          import_react33.Handle,
           {
             type: "target",
-            position: import_react31.Position.Left,
+            position: import_react33.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-          import_react31.Handle,
+          import_react33.Handle,
           {
             type: "source",
-            position: import_react31.Position.Right,
+            position: import_react33.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         notes && notes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(NotesIndicator, { notes, resourceName: name }),
-        targetConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(GlowHandle15, { side: "left" }),
-        sourceConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(GlowHandle15, { side: "right" }),
+        connected.target && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(GlowHandle15, { side: "left" }),
+        connected.source && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(GlowHandle15, { side: "right" }),
         /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "absolute -top-2.5 left-2.5 flex items-center gap-1.5 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
           "span",
           {
@@ -4377,7 +4381,7 @@ function DefaultActor(props) {
     }
   );
 }
-var ActorNode_default = (0, import_react30.memo)(function Actor(props) {
+var ActorNode_default = (0, import_react32.memo)(function Actor(props) {
   const nodeStyle = props?.data?.style;
   if (nodeStyle === "post-it") {
     return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(PostItActor, { ...props });
@@ -4386,7 +4390,7 @@ var ActorNode_default = (0, import_react30.memo)(function Actor(props) {
 });
 
 // src/nodes/actor/config.ts
-var import_react32 = require("@xyflow/react");
+var import_react34 = require("@xyflow/react");
 var import_lucide_react16 = require("lucide-react");
 var config_default3 = {
   type: "actor",
@@ -4412,7 +4416,7 @@ var config_default3 = {
   getEdgeOptions: (_connection) => {
     return {
       label: "Interacts",
-      markerEnd: { type: import_react32.MarkerType.ArrowClosed, color: "#000000" }
+      markerEnd: { type: import_react34.MarkerType.ArrowClosed, color: "#000000" }
     };
   },
   defaultData: {
@@ -4445,9 +4449,9 @@ var config_default3 = {
 };
 
 // src/nodes/field/FieldNode.tsx
-var import_react33 = require("react");
+var import_react35 = require("react");
 var import_lucide_react17 = require("lucide-react");
-var import_react34 = require("@xyflow/react");
+var import_react36 = require("@xyflow/react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 function GlowHandle16({ side }) {
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
@@ -4474,11 +4478,10 @@ function GlowHandle16({ side }) {
 function classNames11(...classes) {
   return classes.filter(Boolean).join(" ");
 }
-var FieldNode_default = (0, import_react33.memo)(function Field(props) {
+var FieldNode_default = (0, import_react35.memo)(function Field(props) {
   const { name, type: fieldType } = props.data;
   const mode = props.data.mode || "simple";
-  const targetConnections = (0, import_react34.useNodeConnections)({ handleType: "target" });
-  const sourceConnections = (0, import_react34.useNodeConnections)({ handleType: "source" });
+  const connected = useNodeHasConnections();
   const isDark = useDarkMode();
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "div",
@@ -4494,23 +4497,23 @@ var FieldNode_default = (0, import_react33.memo)(function Field(props) {
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-          import_react34.Handle,
+          import_react36.Handle,
           {
             type: "target",
-            position: import_react34.Position.Left,
+            position: import_react36.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-          import_react34.Handle,
+          import_react36.Handle,
           {
             type: "source",
-            position: import_react34.Position.Right,
+            position: import_react36.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
-        targetConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(GlowHandle16, { side: "left" }),
-        sourceConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(GlowHandle16, { side: "right" }),
+        connected.target && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(GlowHandle16, { side: "left" }),
+        connected.source && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(GlowHandle16, { side: "right" }),
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "absolute -top-2.5 left-2.5 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "inline-flex items-center gap-1 text-[7px] font-bold uppercase tracking-widest text-white px-1.5 py-0.5 rounded shadow-sm bg-cyan-600", children: [
           /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react17.Database, { className: "w-2.5 h-2.5", strokeWidth: 2.5 }),
           "Field"
@@ -4543,7 +4546,7 @@ var FieldNode_default = (0, import_react33.memo)(function Field(props) {
 });
 
 // src/nodes/field/config.ts
-var import_react35 = require("@xyflow/react");
+var import_react37 = require("@xyflow/react");
 var import_lucide_react18 = require("lucide-react");
 var config_default4 = {
   type: "field",
@@ -4554,7 +4557,7 @@ var config_default4 = {
   validateConnection: () => false,
   getEdgeOptions: () => ({
     label: "contains",
-    markerEnd: { type: import_react35.MarkerType.ArrowClosed, color: "#06b6d4" }
+    markerEnd: { type: import_react37.MarkerType.ArrowClosed, color: "#06b6d4" }
   }),
   defaultData: { name: "New Field", type: "string", mode: "full" },
   editor: {
@@ -4572,9 +4575,9 @@ var config_default4 = {
 };
 
 // src/nodes/external-system/ExternalSystem.tsx
-var import_react36 = require("react");
+var import_react38 = require("react");
 var import_lucide_react19 = require("lucide-react");
-var import_react37 = require("@xyflow/react");
+var import_react39 = require("@xyflow/react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function GlowHandle17({ side }) {
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
@@ -4613,18 +4616,18 @@ function PostItExternalSystem(props) {
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-          import_react37.Handle,
+          import_react39.Handle,
           {
             type: "target",
-            position: import_react37.Position.Left,
+            position: import_react39.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-          import_react37.Handle,
+          import_react39.Handle,
           {
             type: "source",
-            position: import_react37.Position.Right,
+            position: import_react39.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
@@ -4703,8 +4706,7 @@ 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_react37.useNodeConnections)({ handleType: "target" });
-  const sourceConnections = (0, import_react37.useNodeConnections)({ handleType: "source" });
+  const connected = useNodeHasConnections();
   const isDark = useDarkMode();
   const deprecatedStripe = isDark ? "rgba(239,68,68,0.25)" : "rgba(239,68,68,0.1)";
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
@@ -4721,24 +4723,24 @@ function DefaultExternalSystem(props) {
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-          import_react37.Handle,
+          import_react39.Handle,
           {
             type: "target",
-            position: import_react37.Position.Left,
+            position: import_react39.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-          import_react37.Handle,
+          import_react39.Handle,
           {
             type: "source",
-            position: import_react37.Position.Right,
+            position: import_react39.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         notes && notes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(NotesIndicator, { notes, resourceName: name }),
-        targetConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(GlowHandle17, { side: "left" }),
-        sourceConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(GlowHandle17, { side: "right" }),
+        connected.target && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(GlowHandle17, { side: "left" }),
+        connected.source && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(GlowHandle17, { side: "right" }),
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "absolute -top-2.5 left-2.5 flex items-center gap-1.5 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
           "span",
           {
@@ -4785,7 +4787,7 @@ function DefaultExternalSystem(props) {
     }
   );
 }
-var ExternalSystem_default = (0, import_react36.memo)(function ExternalSystem(props) {
+var ExternalSystem_default = (0, import_react38.memo)(function ExternalSystem(props) {
   const nodeStyle = props?.data?.style;
   if (nodeStyle === "post-it") {
     return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PostItExternalSystem, { ...props });
@@ -4794,7 +4796,7 @@ var ExternalSystem_default = (0, import_react36.memo)(function ExternalSystem(pr
 });
 
 // src/nodes/external-system/config.ts
-var import_react38 = require("@xyflow/react");
+var import_react40 = require("@xyflow/react");
 var import_lucide_react20 = require("lucide-react");
 var config_default5 = {
   type: "external-system",
@@ -4808,7 +4810,7 @@ var config_default5 = {
   getEdgeOptions: (connection) => {
     return {
       label: "Connects",
-      markerEnd: { type: import_react38.MarkerType.ArrowClosed, color: "#000000" }
+      markerEnd: { type: import_react40.MarkerType.ArrowClosed, color: "#000000" }
     };
   },
   defaultData: {
@@ -4858,11 +4860,11 @@ var config_default5 = {
 };
 
 // src/nodes/ContextActor.tsx
-var import_react39 = require("react");
-var import_react40 = require("@xyflow/react");
+var import_react41 = require("react");
+var import_react42 = require("@xyflow/react");
 var import_lucide_react21 = require("lucide-react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var ContextActor_default = (0, import_react39.memo)(function ContextActorNode({ data }) {
+var ContextActor_default = (0, import_react41.memo)(function ContextActorNode({ data }) {
   const { name } = data;
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     "div",
@@ -4871,18 +4873,18 @@ var ContextActor_default = (0, import_react39.memo)(function ContextActorNode({
       style: { boxShadow: "0 2px 12px rgba(234, 179, 8, 0.15)" },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_react40.Handle,
+          import_react42.Handle,
           {
             type: "target",
-            position: import_react40.Position.Left,
+            position: import_react42.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_react40.Handle,
+          import_react42.Handle,
           {
             type: "source",
-            position: import_react40.Position.Right,
+            position: import_react42.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
@@ -4903,8 +4905,8 @@ var ContextActor_default = (0, import_react39.memo)(function ContextActorNode({
 });
 
 // src/nodes/SystemGroupNode.tsx
-var import_react41 = require("react");
-var import_react42 = require("@xyflow/react");
+var import_react43 = require("react");
+var import_react44 = require("@xyflow/react");
 var import_lucide_react22 = require("lucide-react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var CONTAINER_STYLE = {
@@ -4981,7 +4983,7 @@ var DOMAIN_NAME_STYLE = {
   ...NAME_STYLE,
   color: "var(--ec-domain-group-text, rgb(var(--ec-page-text)))"
 };
-var SystemGroupNode_default = (0, import_react41.memo)(function SystemGroupNode({ data }) {
+var SystemGroupNode_default = (0, import_react43.memo)(function SystemGroupNode({ data }) {
   const { system, domain, subdomain, isFocused } = data;
   const isDomain = !!domain;
   const resource = domain ?? system;
@@ -4989,18 +4991,18 @@ var SystemGroupNode_default = (0, import_react41.memo)(function SystemGroupNode(
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: isDomain ? DOMAIN_CONTAINER_STYLE : CONTAINER_STYLE, children: [
     isFocused && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FocusedResourceIndicator, {}),
     /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-      import_react42.Handle,
+      import_react44.Handle,
       {
         type: "target",
-        position: import_react42.Position.Left,
+        position: import_react44.Position.Left,
         style: HIDDEN_HANDLE_STYLE
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-      import_react42.Handle,
+      import_react44.Handle,
       {
         type: "source",
-        position: import_react42.Position.Right,
+        position: import_react44.Position.Right,
         style: HIDDEN_HANDLE_STYLE
       }
     ),
@@ -5028,15 +5030,15 @@ var SystemGroupNode_default = (0, import_react41.memo)(function SystemGroupNode(
 });
 
 // src/nodes/DomainCard.tsx
-var import_react43 = require("@xyflow/react");
+var import_react45 = require("@xyflow/react");
 var import_lucide_react23 = require("lucide-react");
-var import_react44 = require("react");
+var import_react46 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var CARD_STYLE = {
   background: "var(--ec-domain-node-bg, rgb(var(--ec-card-bg)))",
   boxShadow: "0 2px 12px rgba(234, 179, 8, 0.15)"
 };
-var DomainCard_default = (0, import_react44.memo)(function DomainCardNode({ data }) {
+var DomainCard_default = (0, import_react46.memo)(function DomainCardNode({ data }) {
   const {
     domain,
     mode = "simple",
@@ -5069,18 +5071,18 @@ var DomainCard_default = (0, import_react44.memo)(function DomainCardNode({ data
       style: CARD_STYLE,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-          import_react43.Handle,
+          import_react45.Handle,
           {
             type: "target",
-            position: import_react43.Position.Left,
+            position: import_react45.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-          import_react43.Handle,
+          import_react45.Handle,
           {
             type: "source",
-            position: import_react43.Position.Right,
+            position: import_react45.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
@@ -5133,8 +5135,8 @@ var DomainCard_default = (0, import_react44.memo)(function DomainCardNode({ data
 });
 
 // src/nodes/Flow.tsx
-var import_react45 = require("react");
-var import_react46 = require("@xyflow/react");
+var import_react47 = require("react");
+var import_react48 = require("@xyflow/react");
 var import_lucide_react25 = require("lucide-react");
 var ContextMenu = __toESM(require("@radix-ui/react-context-menu"));
 
@@ -5249,7 +5251,7 @@ var import_jsx_runtime24 = require("react/jsx-runtime");
 function classNames13(...classes) {
   return classes.filter(Boolean).join(" ");
 }
-var Flow_default = (0, import_react45.memo)(function FlowNode({
+var Flow_default = (0, import_react47.memo)(function FlowNode({
   data,
   sourcePosition,
   targetPosition
@@ -5258,7 +5260,7 @@ var Flow_default = (0, import_react45.memo)(function FlowNode({
   const canExpand = Array.isArray(data?.expandedNodes) && data.expandedNodes.length > 0;
   const { id, version, owners = EMPTY_ARRAY, name, styles } = flow.data;
   const { node: { color = "teal", label } = {}, icon = "QueueListIcon" } = styles || {};
-  const Icon = (0, import_react45.useMemo)(() => getIcon(icon), [icon]);
+  const Icon = (0, import_react47.useMemo)(() => getIcon(icon), [icon]);
   const portalContainer = usePortalContainer();
   const nodeLabel = label || flow?.data?.sidebar?.badge || "Flow";
   const fontSize = nodeLabel.length > 10 ? "7px" : "9px";
@@ -5316,8 +5318,8 @@ var Flow_default = (0, import_react45.memo)(function FlowNode({
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "p-1 flex-1 min-w-0", children: [
-                  targetPosition && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react46.Handle, { type: "target", position: targetPosition }),
-                  sourcePosition && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react46.Handle, { type: "source", position: sourcePosition }),
+                  targetPosition && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react48.Handle, { type: "target", position: targetPosition }),
+                  sourcePosition && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react48.Handle, { type: "source", position: sourcePosition }),
                   /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                     "div",
                     {
@@ -5396,7 +5398,7 @@ var Flow_default = (0, import_react45.memo)(function FlowNode({
 });
 
 // src/nodes/FlowExpandedNode.tsx
-var import_react47 = require("react");
+var import_react49 = require("react");
 var import_lucide_react26 = require("lucide-react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var CONTAINER_STYLE2 = {
@@ -5474,7 +5476,7 @@ var COLLAPSE_BUTTON_STYLE = {
   fontWeight: 600,
   color: "white"
 };
-var FlowExpandedNode_default = (0, import_react47.memo)(function FlowExpandedNode({
+var FlowExpandedNode_default = (0, import_react49.memo)(function FlowExpandedNode({
   data
 }) {
   const { flowName, version } = data;
@@ -5528,9 +5530,9 @@ var FlowExpandedNode_default = (0, import_react47.memo)(function FlowExpandedNod
 });
 
 // src/nodes/Entity.tsx
-var import_react48 = require("@xyflow/react");
+var import_react50 = require("@xyflow/react");
 var ContextMenu2 = __toESM(require("@radix-ui/react-context-menu"));
-var import_react49 = require("react");
+var import_react51 = require("react");
 var import_solid = require("@heroicons/react/20/solid");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var ENTITY_TARGET_HANDLE_ID = "__eventcatalog-entity-target";
@@ -5550,7 +5552,7 @@ var getNestedEntityProperties = (property) => {
   }
   return [];
 };
-var Entity_default = (0, import_react49.memo)(function EntityNode({
+var Entity_default = (0, import_react51.memo)(function EntityNode({
   id,
   data,
   sourcePosition,
@@ -5576,19 +5578,19 @@ var Entity_default = (0, import_react49.memo)(function EntityNode({
     node: { color: _color = "blue", label: _label } = {},
     icon = "CubeIcon"
   } = styles || {};
-  const Icon = (0, import_react49.useMemo)(() => getIcon(icon), [icon]);
-  const [hoveredProperty, setHoveredProperty] = (0, import_react49.useState)(null);
-  const [expandedProperties, setExpandedProperties] = (0, import_react49.useState)(
+  const Icon = (0, import_react51.useMemo)(() => getIcon(icon), [icon]);
+  const [hoveredProperty, setHoveredProperty] = (0, import_react51.useState)(null);
+  const [expandedProperties, setExpandedProperties] = (0, import_react51.useState)(
     () => /* @__PURE__ */ new Set()
   );
-  const previousExpandedProperties = (0, import_react49.useRef)(expandedProperties);
-  const updateNodeInternals = (0, import_react48.useUpdateNodeInternals)();
+  const previousExpandedProperties = (0, import_react51.useRef)(expandedProperties);
+  const updateNodeInternals = (0, import_react50.useUpdateNodeInternals)();
   const portalContainer = usePortalContainer();
-  const referenceProperties = (0, import_react49.useMemo)(
+  const referenceProperties = (0, import_react51.useMemo)(
     () => new Set(referencePropertyNames),
     [referencePropertyNames]
   );
-  const toggleProperty = (0, import_react49.useCallback)((propertyPath) => {
+  const toggleProperty = (0, import_react51.useCallback)((propertyPath) => {
     setExpandedProperties((current) => {
       const next = new Set(current);
       if (next.has(propertyPath)) {
@@ -5599,7 +5601,7 @@ var Entity_default = (0, import_react49.memo)(function EntityNode({
       return next;
     });
   }, []);
-  (0, import_react49.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     if (previousExpandedProperties.current === expandedProperties) return;
     previousExpandedProperties.current = expandedProperties;
     updateNodeInternals(id);
@@ -5643,20 +5645,20 @@ var Entity_default = (0, import_react49.memo)(function EntityNode({
           children: [
             isTopLevel && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                import_react48.Handle,
+                import_react50.Handle,
                 {
                   type: "target",
-                  position: import_react48.Position.Left,
+                  position: import_react50.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_runtime26.jsx)(
-                import_react48.Handle,
+                import_react50.Handle,
                 {
                   type: "source",
-                  position: import_react48.Position.Right,
+                  position: import_react50.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
@@ -5713,10 +5715,10 @@ var Entity_default = (0, import_react49.memo)(function EntityNode({
               ),
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                  import_react48.Handle,
+                  import_react50.Handle,
                   {
                     type: "target",
-                    position: import_react48.Position.Left,
+                    position: import_react50.Position.Left,
                     id: entityTargetHandle,
                     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
@@ -5749,8 +5751,8 @@ var Entity_default = (0, import_react49.memo)(function EntityNode({
           ),
           properties.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] relative", children: renderPropertyRows(properties) }) : /* @__PURE__ */ (0, import_jsx_runtime26.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_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-            targetPosition && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react48.Handle, { type: "target", position: targetPosition }),
-            sourcePosition && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react48.Handle, { type: "source", position: sourcePosition })
+            targetPosition && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react50.Handle, { type: "target", position: targetPosition }),
+            sourcePosition && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react50.Handle, { type: "source", position: sourcePosition })
           ] })
         ]
       }
@@ -5792,14 +5794,14 @@ var Entity_default = (0, import_react49.memo)(function EntityNode({
 });
 
 // src/nodes/User.tsx
-var import_react50 = require("react");
+var import_react52 = require("react");
 var import_solid2 = require("@heroicons/react/20/solid");
-var import_react51 = require("@xyflow/react");
+var import_react53 = require("@xyflow/react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 function classNames15(...classes) {
   return classes.filter(Boolean).join(" ");
 }
-var User_default = (0, import_react50.memo)(function UserNode({
+var User_default = (0, import_react52.memo)(function UserNode({
   data,
   sourcePosition,
   targetPosition
@@ -5842,8 +5844,8 @@ var User_default = (0, import_react50.memo)(function UserNode({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "p-1 flex-1 min-w-0", children: [
-          targetPosition && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react51.Handle, { type: "target", position: targetPosition }),
-          sourcePosition && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react51.Handle, { type: "source", position: sourcePosition }),
+          targetPosition && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react53.Handle, { type: "target", position: targetPosition }),
+          sourcePosition && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react53.Handle, { type: "source", position: sourcePosition }),
           (!summary || mode !== "full") && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "h-full min-w-0", children: [
             /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               TruncatedResourceName,
@@ -5885,13 +5887,13 @@ var User_default = (0, import_react50.memo)(function UserNode({
 });
 
 // src/nodes/Step.tsx
-var import_react52 = require("react");
-var import_react53 = require("@xyflow/react");
+var import_react54 = require("react");
+var import_react55 = require("@xyflow/react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 function classNames16(...classes) {
   return classes.filter(Boolean).join(" ");
 }
-var Step_default = (0, import_react52.memo)(function StepNode({
+var Step_default = (0, import_react54.memo)(function StepNode({
   data,
   sourcePosition,
   targetPosition
@@ -5925,18 +5927,18 @@ var Step_default = (0, import_react52.memo)(function StepNode({
         ),
         /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "p-1 flex-1 min-w-0", children: [
           /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-            import_react53.Handle,
+            import_react55.Handle,
             {
               type: "target",
-              position: targetPosition || import_react53.Position.Left,
+              position: targetPosition || import_react55.Position.Left,
               style: HIDDEN_HANDLE_STYLE
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-            import_react53.Handle,
+            import_react55.Handle,
             {
               type: "source",
-              position: sourcePosition || import_react53.Position.Right,
+              position: sourcePosition || import_react55.Position.Right,
               style: HIDDEN_HANDLE_STYLE
             }
           ),
@@ -5978,28 +5980,28 @@ var Step_default = (0, import_react52.memo)(function StepNode({
 });
 
 // src/nodes/Domain.tsx
-var import_react54 = require("@xyflow/react");
+var import_react56 = require("@xyflow/react");
 var ContextMenu3 = __toESM(require("@radix-ui/react-context-menu"));
-var import_react55 = require("react");
+var import_react57 = require("react");
 var import_jsx_runtime29 = require("react/jsx-runtime");
-var Domain_default = (0, import_react55.memo)(function DomainNode({ data, id: nodeId }) {
+var Domain_default = (0, import_react57.memo)(function DomainNode({ data, id: nodeId }) {
   const { mode, domain } = data;
-  const reactFlow = (0, import_react54.useReactFlow)();
-  const [highlightedServices, setHighlightedServices] = (0, import_react55.useState)(
+  const reactFlow = (0, import_react56.useReactFlow)();
+  const [highlightedServices, setHighlightedServices] = (0, import_react57.useState)(
     /* @__PURE__ */ new Set()
   );
   const { id, version, name, services = [], styles } = domain.data;
   const { icon = "RectangleGroupIcon" } = styles || {};
-  const Icon = (0, import_react55.useMemo)(() => getIcon(icon), [icon]);
-  const ServerIcon6 = (0, import_react55.useMemo)(() => getIcon("ServerIcon"), []);
+  const Icon = (0, import_react57.useMemo)(() => getIcon(icon), [icon]);
+  const ServerIcon6 = (0, import_react57.useMemo)(() => getIcon("ServerIcon"), []);
   const portalContainer = usePortalContainer();
-  const highlight = (0, import_react55.useCallback)(
+  const highlight = (0, import_react57.useCallback)(
     (ids) => setHighlightedServices(
       (current) => current.size === ids.size && [...ids].every((id2) => current.has(id2)) ? current : ids
     ),
     []
   );
-  const handleSelectionChange = (0, import_react55.useCallback)(
+  const handleSelectionChange = (0, import_react57.useCallback)(
     ({ nodes: selectedNodes }) => {
       const selectedNode = selectedNodes[0];
       if (!selectedNode) {
@@ -6024,24 +6026,24 @@ var Domain_default = (0, import_react55.memo)(function DomainNode({ data, id: no
     },
     [nodeId, reactFlow, highlight]
   );
-  (0, import_react54.useOnSelectionChange)({
+  (0, import_react56.useOnSelectionChange)({
     onChange: handleSelectionChange
   });
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(ContextMenu3.Root, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ContextMenu3.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "w-full rounded-lg border-2 border-yellow-400 bg-[rgb(var(--ec-card-bg))] shadow-lg", children: [
       /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-        import_react54.Handle,
+        import_react56.Handle,
         {
           type: "target",
-          position: import_react54.Position.Left,
+          position: import_react56.Position.Left,
           style: HIDDEN_HANDLE_STYLE
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-        import_react54.Handle,
+        import_react56.Handle,
         {
           type: "source",
-          position: import_react54.Position.Right,
+          position: import_react56.Position.Right,
           style: HIDDEN_HANDLE_STYLE
         }
       ),
@@ -6064,20 +6066,20 @@ var Domain_default = (0, import_react55.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_runtime29.jsx)(
-                  import_react54.Handle,
+                  import_react56.Handle,
                   {
                     type: "target",
-                    position: import_react54.Position.Left,
+                    position: import_react56.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_runtime29.jsx)(
-                  import_react54.Handle,
+                  import_react56.Handle,
                   {
                     type: "source",
-                    position: import_react54.Position.Right,
+                    position: import_react56.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
@@ -6145,14 +6147,14 @@ var Domain_default = (0, import_react55.memo)(function DomainNode({ data, id: no
 });
 
 // src/nodes/System.tsx
-var import_react56 = require("@xyflow/react");
+var import_react58 = require("@xyflow/react");
 var import_lucide_react27 = require("lucide-react");
-var import_react57 = require("react");
+var import_react59 = require("react");
 var import_jsx_runtime30 = require("react/jsx-runtime");
 function classNames17(...classes) {
   return classes.filter(Boolean).join(" ");
 }
-var System_default = (0, import_react57.memo)(function SystemNode({ data }) {
+var System_default = (0, import_react59.memo)(function SystemNode({ data }) {
   const {
     system,
     mode = "simple",
@@ -6202,18 +6204,18 @@ var System_default = (0, import_react57.memo)(function SystemNode({ data }) {
       children: [
         isFocused && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(FocusedResourceIndicator, {}),
         /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-          import_react56.Handle,
+          import_react58.Handle,
           {
             type: "target",
-            position: import_react56.Position.Left,
+            position: import_react58.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-          import_react56.Handle,
+          import_react58.Handle,
           {
             type: "source",
-            position: import_react56.Position.Right,
+            position: import_react58.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
@@ -6268,7 +6270,7 @@ var System_default = (0, import_react57.memo)(function SystemNode({ data }) {
 });
 
 // src/nodes/GroupNode.tsx
-var import_react58 = require("react");
+var import_react60 = require("react");
 var import_lucide_react28 = require("lucide-react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var GROUP_CONTAINER_STYLE = {
@@ -6344,7 +6346,7 @@ var GROUP_VERSION_STYLE = {
 };
 var GROUP_ICON_COLOR_STYLE = { color: "#7c3aed" };
 var GROUP_ICON_WHITE_STYLE = { color: "white" };
-var GroupNode_default = (0, import_react58.memo)(function GroupNode({ data }) {
+var GroupNode_default = (0, import_react60.memo)(function GroupNode({ data }) {
   const { domain } = data;
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { style: GROUP_CONTAINER_STYLE, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { style: GROUP_HEADER_STYLE, children: [
     /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { style: GROUP_WATERMARK_STYLE, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react28.BoxesIcon, { size: 28, strokeWidth: 2, style: GROUP_ICON_COLOR_STYLE }) }),
@@ -6376,8 +6378,8 @@ var GroupNode_default = (0, import_react58.memo)(function GroupNode({ data }) {
 });
 
 // src/nodes/Custom.tsx
-var import_react59 = require("react");
-var import_react60 = require("@xyflow/react");
+var import_react61 = require("react");
+var import_react62 = require("@xyflow/react");
 var Icons = __toESM(require("@heroicons/react/24/solid"));
 var ContextMenu4 = __toESM(require("@radix-ui/react-context-menu"));
 var import_jsx_runtime32 = require("react/jsx-runtime");
@@ -6542,7 +6544,7 @@ function GlowHandle18({
     }
   );
 }
-var Custom_default = (0, import_react59.memo)(function CustomNode({ data, selected }) {
+var Custom_default = (0, import_react61.memo)(function CustomNode({ data, selected }) {
   const { mode, custom: customProps, step } = data;
   const {
     color = "blue",
@@ -6556,10 +6558,9 @@ var Custom_default = (0, import_react59.memo)(function CustomNode({ data, select
     height = 5
   } = customProps;
   const palette = getPalette(color);
-  const IconComponent = (0, import_react59.useMemo)(() => Icons[icon] || Icons.CubeIcon, [icon]);
+  const IconComponent = (0, import_react61.useMemo)(() => Icons[icon] || Icons.CubeIcon, [icon]);
   const portalContainer = usePortalContainer();
-  const targetConnections = (0, import_react60.useNodeConnections)({ handleType: "target" });
-  const sourceConnections = (0, import_react60.useNodeConnections)({ handleType: "source" });
+  const connected = useNodeHasConnections();
   const propertyEntries = Object.entries(properties);
   const contextMenuItems = url ? [{ label: `Open ${type.toLowerCase()}`, url }, ...menu] : menu;
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(ContextMenu4.Root, { children: [
@@ -6578,23 +6579,23 @@ var Custom_default = (0, import_react59.memo)(function CustomNode({ data, select
         },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-            import_react60.Handle,
+            import_react62.Handle,
             {
               type: "target",
-              position: import_react60.Position.Left,
+              position: import_react62.Position.Left,
               style: HIDDEN_HANDLE_STYLE
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-            import_react60.Handle,
+            import_react62.Handle,
             {
               type: "source",
-              position: import_react60.Position.Right,
+              position: import_react62.Position.Right,
               style: HIDDEN_HANDLE_STYLE
             }
           ),
-          targetConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(GlowHandle18, { side: "left", gradient: palette.glow }),
-          sourceConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(GlowHandle18, { side: "right", gradient: palette.glow }),
+          connected.target && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(GlowHandle18, { side: "left", gradient: palette.glow }),
+          connected.source && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(GlowHandle18, { side: "right", gradient: palette.glow }),
           /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "absolute -top-3 left-2.5 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
             "span",
             {
@@ -6674,25 +6675,25 @@ var Custom_default = (0, import_react59.memo)(function CustomNode({ data, select
 });
 
 // src/nodes/ExternalSystem2.tsx
-var import_react61 = require("react");
-var import_react62 = require("@xyflow/react");
+var import_react63 = require("react");
+var import_react64 = require("@xyflow/react");
 var import_jsx_runtime33 = require("react/jsx-runtime");
-var ExternalSystem2_default = (0, import_react61.memo)(function ExternalSystemNode(props) {
+var ExternalSystem2_default = (0, import_react63.memo)(function ExternalSystemNode(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "relative", children: [
     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-      import_react62.Handle,
+      import_react64.Handle,
       {
         type: "target",
-        position: import_react62.Position.Left,
+        position: import_react64.Position.Left,
         style: EXTERNAL_SYSTEM_HANDLE_STYLE,
         className: "bg-gray-500"
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-      import_react62.Handle,
+      import_react64.Handle,
       {
         type: "source",
-        position: import_react62.Position.Right,
+        position: import_react64.Position.Right,
         style: EXTERNAL_SYSTEM_HANDLE_STYLE,
         className: "bg-gray-500"
       }
@@ -6702,9 +6703,9 @@ var ExternalSystem2_default = (0, import_react61.memo)(function ExternalSystemNo
 });
 
 // src/nodes/DataProduct.tsx
-var import_react63 = require("react");
+var import_react65 = require("react");
 var import_lucide_react29 = require("lucide-react");
-var import_react64 = require("@xyflow/react");
+var import_react66 = require("@xyflow/react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 function GlowHandle19({ side }) {
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
@@ -6744,18 +6745,18 @@ function PostItDataProduct(props) {
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-          import_react64.Handle,
+          import_react66.Handle,
           {
             type: "target",
-            position: import_react64.Position.Left,
+            position: import_react66.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-          import_react64.Handle,
+          import_react66.Handle,
           {
             type: "source",
-            position: import_react64.Position.Right,
+            position: import_react66.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
@@ -6845,8 +6846,7 @@ function DefaultDataProduct(props) {
   const { version, name, summary, deprecated, draft, notes, styles } = props.data.dataProduct;
   const mode = props.data.mode || "simple";
   const customIcon = isIconPath(styles?.icon) ? styles.icon : void 0;
-  const targetConnections = (0, import_react64.useNodeConnections)({ handleType: "target" });
-  const sourceConnections = (0, import_react64.useNodeConnections)({ handleType: "source" });
+  const connected = useNodeHasConnections();
   const isDark = useDarkMode();
   const deprecatedStripe = isDark ? "rgba(239,68,68,0.25)" : "rgba(239,68,68,0.1)";
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
@@ -6863,24 +6863,24 @@ function DefaultDataProduct(props) {
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-          import_react64.Handle,
+          import_react66.Handle,
           {
             type: "target",
-            position: import_react64.Position.Left,
+            position: import_react66.Position.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-          import_react64.Handle,
+          import_react66.Handle,
           {
             type: "source",
-            position: import_react64.Position.Right,
+            position: import_react66.Position.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         notes && notes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(NotesIndicator, { notes, resourceName: name }),
-        targetConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(GlowHandle19, { side: "left" }),
-        sourceConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(GlowHandle19, { side: "right" }),
+        connected.target && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(GlowHandle19, { side: "left" }),
+        connected.source && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(GlowHandle19, { side: "right" }),
         /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "absolute -top-2.5 left-2.5 flex items-center gap-1.5 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
           "span",
           {
@@ -6937,7 +6937,7 @@ function DefaultDataProduct(props) {
     }
   );
 }
-var DataProduct_default = (0, import_react63.memo)(function DataProductNode(props) {
+var DataProduct_default = (0, import_react65.memo)(function DataProductNode(props) {
   const nodeStyle = props?.data?.style;
   if (nodeStyle === "post-it") {
     return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PostItDataProduct, { ...props });
@@ -6946,11 +6946,11 @@ var DataProduct_default = (0, import_react63.memo)(function DataProductNode(prop
 });
 
 // src/nodes/SwimlaneNode.tsx
-var import_react66 = require("react");
+var import_react68 = require("react");
 var import_lucide_react30 = require("lucide-react");
 
 // src/utils/utils/utils.ts
-var import_react65 = require("@xyflow/react");
+var import_react67 = require("@xyflow/react");
 var generateIdForNode = (node) => {
   return `${node.data.id}-${node.data.version}`;
 };
@@ -7015,7 +7015,7 @@ var createEdge = (edgeOptions) => {
     //   height: 40,
     // },
     markerEnd: {
-      type: import_react65.MarkerType.ArrowClosed,
+      type: import_react67.MarkerType.ArrowClosed,
       width: 40,
       height: 40,
       color: "rgb(var(--ec-page-text-muted))"
@@ -7030,8 +7030,8 @@ var createEdge = (edgeOptions) => {
 };
 var createNode = (values) => {
   return {
-    sourcePosition: import_react65.Position.Right,
-    targetPosition: import_react65.Position.Left,
+    sourcePosition: import_react67.Position.Right,
+    targetPosition: import_react67.Position.Left,
     ...values
   };
 };
@@ -7548,7 +7548,7 @@ var LABEL_STYLE = {
   letterSpacing: "0.01em",
   color: "rgb(var(--ec-page-text))"
 };
-var SwimlaneNode_default = (0, import_react66.memo)(function SwimlaneNode({ data }) {
+var SwimlaneNode_default = (0, import_react68.memo)(function SwimlaneNode({ data }) {
   const { label, level, kind, index, style } = data;
   const Icon = kind === "external" ? import_lucide_react30.Globe : kind === "unassigned" ? import_lucide_react30.HelpCircle : LANE_ICONS[level];
   const tint = kind === "lane" ? LANE_TINTS[level] : NEUTRAL_TINT;
@@ -7573,9 +7573,9 @@ var SwimlaneNode_default = (0, import_react66.memo)(function SwimlaneNode({ data
 });
 
 // src/nodes/message-group/MessageGroupNode.tsx
-var import_react67 = require("react");
+var import_react69 = require("react");
 var import_lucide_react31 = require("lucide-react");
-var import_react68 = require("@xyflow/react");
+var import_react70 = require("@xyflow/react");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var TYPE_ICONS = {
   events: import_lucide_react31.Zap,
@@ -7588,13 +7588,12 @@ var CARD_STYLE2 = {
   background: "var(--ec-message-group-node-bg, rgb(var(--ec-card-bg)))",
   pointerEvents: "none"
 };
-var MessageGroupNode_default = (0, import_react67.memo)(function MessageGroupNode(props) {
+var MessageGroupNode_default = (0, import_react69.memo)(function MessageGroupNode(props) {
   const { groupName, messageCount } = props.data;
   const isDark = useDarkMode();
-  const targetConnections = (0, import_react68.useNodeConnections)({ handleType: "target" });
-  const sourceConnections = (0, import_react68.useNodeConnections)({ handleType: "source" });
+  const connected = useNodeHasConnections();
   const stackDepth = messageCount >= 3 ? 3 : messageCount;
-  const typeBreakdown = (0, import_react67.useMemo)(() => {
+  const typeBreakdown = (0, import_react69.useMemo)(() => {
     const counts = {};
     props.data.messages.forEach(({ message }) => {
       const type = message?.collection || "unknown";
@@ -7637,22 +7636,22 @@ var MessageGroupNode_default = (0, import_react67.memo)(function MessageGroupNod
         },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-            import_react68.Handle,
+            import_react70.Handle,
             {
               type: "target",
-              position: import_react68.Position.Left,
+              position: import_react70.Position.Left,
               style: HIDDEN_HANDLE_STYLE
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-            import_react68.Handle,
+            import_react70.Handle,
             {
               type: "source",
-              position: import_react68.Position.Right,
+              position: import_react70.Position.Right,
               style: HIDDEN_HANDLE_STYLE
             }
           ),
-          targetConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          connected.target && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             "div",
             {
               className: "ec-handle-glow",
@@ -7672,7 +7671,7 @@ var MessageGroupNode_default = (0, import_react67.memo)(function MessageGroupNod
               }
             }
           ),
-          sourceConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          connected.source && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             "div",
             {
               className: "ec-handle-glow",
@@ -7750,7 +7749,7 @@ var MessageGroupNode_default = (0, import_react67.memo)(function MessageGroupNod
 });
 
 // src/nodes/message-group/MessageGroupExpandedNode.tsx
-var import_react69 = require("react");
+var import_react71 = require("react");
 var import_lucide_react32 = require("lucide-react");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var CONTAINER_STYLE3 = {
@@ -7821,7 +7820,7 @@ var COLLAPSE_BUTTON_STYLE2 = {
   fontWeight: 600,
   color: "white"
 };
-var MessageGroupExpandedNode_default = (0, import_react69.memo)(function MessageGroupExpandedNode({
+var MessageGroupExpandedNode_default = (0, import_react71.memo)(function MessageGroupExpandedNode({
   data
 }) {
   const { groupName, messageCount } = data;
@@ -7949,11 +7948,35 @@ var RESOURCE_NODE_TYPES = /* @__PURE__ */ new Set([
 ]);
 
 // src/edges/AnimatedMessageEdge.tsx
-var import_react73 = require("react");
-var import_react74 = require("@xyflow/react");
+var import_react75 = require("react");
+var import_react76 = require("@xyflow/react");
 
-// src/edges/EdgeLabel.tsx
-var import_react70 = require("@xyflow/react");
+// src/utils/flow-portals.tsx
+var import_react_dom = require("react-dom");
+var import_react72 = require("@xyflow/react");
+var layerSelector = (className) => {
+  const found = /* @__PURE__ */ new WeakMap();
+  return (state) => {
+    const root = state.domNode;
+    if (!root) return null;
+    let layer = found.get(root);
+    if (!layer?.isConnected) {
+      layer = root.querySelector(className);
+      found.set(root, layer);
+    }
+    return layer;
+  };
+};
+var selectEdgeLabelLayer = layerSelector(".react-flow__edgelabel-renderer");
+var selectViewportLayer = layerSelector(".react-flow__viewport-portal");
+function EdgeLabelPortal({ children }) {
+  const layer = (0, import_react72.useStore)(selectEdgeLabelLayer);
+  return layer ? (0, import_react_dom.createPortal)(children, layer) : null;
+}
+function CanvasPortal({ children }) {
+  const layer = (0, import_react72.useStore)(selectViewportLayer);
+  return layer ? (0, import_react_dom.createPortal)(children, layer) : null;
+}
 
 // src/edges/use-cross-domain.ts
 var CROSS_DOMAIN_CLASS = "ec-cross-domain";
@@ -7971,7 +7994,7 @@ function EdgeLabel({
 }) {
   if (label === void 0 || label === null || label === "") return null;
   const lines = String(label).split("\n");
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react70.EdgeLabelRenderer, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(EdgeLabelPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     "div",
     {
       className: `ec-edge-label ${crossDomain ? CROSS_DOMAIN_CLASS : ""} nodrag nopan rounded-md border border-[rgb(var(--ec-page-border))] px-2 py-1 text-center text-[10px] font-medium leading-tight text-[rgb(var(--ec-page-text))] shadow-sm`,
@@ -7996,8 +8019,8 @@ function EdgeLabel({
 }
 
 // src/edges/route.ts
-var import_react71 = require("react");
-var import_react72 = require("@xyflow/react");
+var import_react73 = require("react");
+var import_react74 = require("@xyflow/react");
 var ROUTE_TOLERANCE = { x: 60, y: 400 };
 var isStraight = (a, b) => a.x === b.x || a.y === b.y;
 var add = (a, b) => ({ x: a.x + b.x, y: a.y + b.y });
@@ -8082,8 +8105,8 @@ var useRoute = ({
   targetHandleId
 }, [path, labelX, labelY]) => {
   const route = data?.route;
-  const { moved, zIndex } = (0, import_react72.useStore)(
-    (0, import_react71.useCallback)(
+  const { moved, zIndex } = (0, import_react74.useStore)(
+    (0, import_react73.useCallback)(
       (state) => {
         const z = (nodeId) => {
           const node = state.nodeLookup.get(nodeId);
@@ -8136,7 +8159,7 @@ function messageColor(collection) {
       return "gray";
   }
 }
-var AnimatedMessageEdge = (0, import_react73.memo)(
+var AnimatedMessageEdge = (0, import_react75.memo)(
   ({
     id,
     sourceX,
@@ -8166,7 +8189,7 @@ var AnimatedMessageEdge = (0, import_react73.memo)(
         sourceHandleId,
         targetHandleId
       },
-      (0, import_react74.getSmoothStepPath)({
+      (0, import_react76.getSmoothStepPath)({
         sourceX,
         sourceY,
         sourcePosition,
@@ -8180,9 +8203,9 @@ var AnimatedMessageEdge = (0, import_react73.memo)(
     const customColor = data?.customColor || messageColor(collection ?? "default");
     const warning = data?.warning;
     const customColors = Array.isArray(customColor) ? customColor : [customColor];
-    const randomDelay = (0, import_react73.useMemo)(() => Math.random() * 1, []);
+    const randomDelay = (0, import_react75.useMemo)(() => Math.random() * 1, []);
     const opacityClass = opacity === 1 ? "z-30 opacity-100" : "z-30 opacity-10";
-    const animatedNodes = (0, import_react73.useMemo)(
+    const animatedNodes = (0, import_react75.useMemo)(
       () => customColors.map((color, index) => {
         const delay = randomDelay + index * 0.3;
         return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
@@ -8235,7 +8258,7 @@ var AnimatedMessageEdge = (0, import_react73.memo)(
     const crossDomain = isCrossDomain(data);
     return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-        import_react74.BaseEdge,
+        import_react76.BaseEdge,
         {
           id,
           path: edgePath,
@@ -8262,10 +8285,10 @@ var AnimatedMessageEdge = (0, import_react73.memo)(
 var AnimatedMessageEdge_default = AnimatedMessageEdge;
 
 // src/edges/MultilineEdgeLabel.tsx
-var import_react75 = require("react");
-var import_react76 = require("@xyflow/react");
+var import_react77 = require("react");
+var import_react78 = require("@xyflow/react");
 var import_jsx_runtime40 = require("react/jsx-runtime");
-var MultilineEdgeLabel_default = (0, import_react75.memo)(function MultilineEdgeLabel(props) {
+var MultilineEdgeLabel_default = (0, import_react77.memo)(function MultilineEdgeLabel(props) {
   const {
     id,
     sourceX,
@@ -8298,7 +8321,7 @@ var MultilineEdgeLabel_default = (0, import_react75.memo)(function MultilineEdge
       sourceHandleId,
       targetHandleId
     },
-    (0, import_react76.getSmoothStepPath)({
+    (0, import_react78.getSmoothStepPath)({
       sourceX,
       sourceY,
       targetX,
@@ -8334,8 +8357,8 @@ var MultilineEdgeLabel_default = (0, import_react75.memo)(function MultilineEdge
 });
 
 // src/edges/FlowEdge.tsx
-var import_react77 = require("react");
-var import_react78 = require("@xyflow/react");
+var import_react79 = require("react");
+var import_react80 = require("@xyflow/react");
 var import_jsx_runtime41 = require("react/jsx-runtime");
 function messageColor2(collection) {
   switch (collection) {
@@ -8350,7 +8373,7 @@ function messageColor2(collection) {
   }
 }
 var EMPTY_STYLE = {};
-var FlowEdge_default = (0, import_react77.memo)(function CustomEdge({
+var FlowEdge_default = (0, import_react79.memo)(function CustomEdge({
   id,
   sourceX,
   sourceY,
@@ -8380,7 +8403,7 @@ var FlowEdge_default = (0, import_react77.memo)(function CustomEdge({
       sourceHandleId,
       targetHandleId
     },
-    (0, import_react78.getSmoothStepPath)({
+    (0, import_react80.getSmoothStepPath)({
       sourceX,
       sourceY,
       sourcePosition,
@@ -8389,15 +8412,15 @@ var FlowEdge_default = (0, import_react77.memo)(function CustomEdge({
       targetPosition
     })
   );
-  const randomDelay = (0, import_react77.useMemo)(() => Math.random() * 1, []);
+  const randomDelay = (0, import_react79.useMemo)(() => Math.random() * 1, []);
   const collection = data?.message?.collection;
   const opacity = data?.opacity ?? 1;
-  const mergedStyle = (0, import_react77.useMemo)(
+  const mergedStyle = (0, import_react79.useMemo)(
     () => ({ ...EDGE_FLOW_BASE_STYLE, ...style }),
     [style]
   );
   const crossDomain = isCrossDomain(data);
-  const labelPositionStyle = (0, import_react77.useMemo)(
+  const labelPositionStyle = (0, import_react79.useMemo)(
     () => ({
       position: "absolute",
       transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
@@ -8408,7 +8431,7 @@ var FlowEdge_default = (0, import_react77.memo)(function CustomEdge({
   );
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-      import_react78.BaseEdge,
+      import_react80.BaseEdge,
       {
         path: edgePath,
         markerEnd,
@@ -8442,7 +8465,7 @@ var FlowEdge_default = (0, import_react77.memo)(function CustomEdge({
         )
       }
     ),
-    label && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react78.EdgeLabelRenderer, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    label && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(EdgeLabelPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       "div",
       {
         style: labelPositionStyle,
@@ -8454,8 +8477,8 @@ var FlowEdge_default = (0, import_react77.memo)(function CustomEdge({
 });
 
 // src/edges/LabelledEdge.tsx
-var import_react79 = require("@xyflow/react");
-var import_react80 = require("react");
+var import_react81 = require("@xyflow/react");
+var import_react82 = require("react");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 function LabelledEdge({
   pathType,
@@ -8500,7 +8523,7 @@ function LabelledEdge({
       sourceHandleId,
       targetHandleId
     },
-    pathType === "bezier" ? (0, import_react79.getBezierPath)(pathProps) : (0, import_react79.getSmoothStepPath)({
+    pathType === "bezier" ? (0, import_react81.getBezierPath)(pathProps) : (0, import_react81.getSmoothStepPath)({
       ...pathProps,
       ...pathType === "step" ? { borderRadius: 0 } : {}
     })
@@ -8508,7 +8531,7 @@ function LabelledEdge({
   const crossDomain = isCrossDomain(data);
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-      import_react79.BaseEdge,
+      import_react81.BaseEdge,
       {
         id,
         path: edgePath,
@@ -8531,18 +8554,18 @@ function LabelledEdge({
     )
   ] });
 }
-var LabelledDefaultEdge = (0, import_react80.memo)(function LabelledDefaultEdge2(props) {
+var LabelledDefaultEdge = (0, import_react82.memo)(function LabelledDefaultEdge2(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(LabelledEdge, { ...props, pathType: "bezier" });
 });
-var LabelledSmoothStepEdge = (0, import_react80.memo)(function LabelledSmoothStepEdge2(props) {
+var LabelledSmoothStepEdge = (0, import_react82.memo)(function LabelledSmoothStepEdge2(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(LabelledEdge, { ...props, pathType: "smoothstep" });
 });
-var LabelledStepEdge = (0, import_react80.memo)(function LabelledStepEdge2(props) {
+var LabelledStepEdge = (0, import_react82.memo)(function LabelledStepEdge2(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(LabelledEdge, { ...props, pathType: "step" });
 });
 
 // src/components/VisualiserSearch.tsx
-var import_react81 = require("react");
+var import_react83 = require("react");
 var import_lucide_react33 = require("lucide-react");
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var formatVersionedName = (name, version) => {
@@ -8602,29 +8625,29 @@ var getNodeResourceData = (data, key) => {
   if (!resource || typeof resource !== "object") return void 0;
   return "data" in resource && resource.data ? resource.data : resource;
 };
-var VisualiserSearch = (0, import_react81.memo)(
-  (0, import_react81.forwardRef)(
+var VisualiserSearch = (0, import_react83.memo)(
+  (0, import_react83.forwardRef)(
     ({ nodes, onNodeSelect, onClear, onPaneClick: _onPaneClick }, ref) => {
-      const [searchQuery, setSearchQuery] = (0, import_react81.useState)("");
-      const [filteredSuggestions, setFilteredSuggestions] = (0, import_react81.useState)([]);
-      const [showSuggestions, setShowSuggestions] = (0, import_react81.useState)(false);
-      const [selectedSuggestionIndex, setSelectedSuggestionIndex] = (0, import_react81.useState)(-1);
-      const searchInputRef = (0, import_react81.useRef)(null);
-      const containerRef = (0, import_react81.useRef)(null);
-      const suggestionsListRef = (0, import_react81.useRef)(null);
-      const suggestionItemRefs = (0, import_react81.useRef)([]);
-      const hideSuggestions = (0, import_react81.useCallback)(() => {
+      const [searchQuery, setSearchQuery] = (0, import_react83.useState)("");
+      const [filteredSuggestions, setFilteredSuggestions] = (0, import_react83.useState)([]);
+      const [showSuggestions, setShowSuggestions] = (0, import_react83.useState)(false);
+      const [selectedSuggestionIndex, setSelectedSuggestionIndex] = (0, import_react83.useState)(-1);
+      const searchInputRef = (0, import_react83.useRef)(null);
+      const containerRef = (0, import_react83.useRef)(null);
+      const suggestionsListRef = (0, import_react83.useRef)(null);
+      const suggestionItemRefs = (0, import_react83.useRef)([]);
+      const hideSuggestions = (0, import_react83.useCallback)(() => {
         setShowSuggestions(false);
         setSelectedSuggestionIndex(-1);
       }, []);
-      (0, import_react81.useImperativeHandle)(
+      (0, import_react83.useImperativeHandle)(
         ref,
         () => ({
           hideSuggestions
         }),
         [hideSuggestions]
       );
-      const getNodeDisplayName = (0, import_react81.useCallback)((node) => {
+      const getNodeDisplayName = (0, import_react83.useCallback)((node) => {
         if (node.type === "messageGroup") {
           return node.data?.groupName || node.id;
         }
@@ -8645,7 +8668,7 @@ var VisualiserSearch = (0, import_react81.memo)(
         const version = message?.version || agent?.version || agentTool?.version || service?.version || domain?.version || system?.version || entity?.version || channel?.version || dataProduct?.version || data?.version || node.data?.version;
         return formatVersionedName(name, version);
       }, []);
-      const getNodeResourceKey = (0, import_react81.useCallback)(
+      const getNodeResourceKey = (0, import_react83.useCallback)(
         (node, label) => {
           if (node.type === "messageGroup" || node.type === "messageGroupExpanded") {
             return `${node.type}:${node.id}`.toLowerCase();
@@ -8661,7 +8684,7 @@ var VisualiserSearch = (0, import_react81.memo)(
         },
         []
       );
-      const dedupeSearchSuggestions = (0, import_react81.useCallback)(
+      const dedupeSearchSuggestions = (0, import_react83.useCallback)(
         (suggestions) => {
           const uniqueSuggestions = [];
           const indexByResourceKey = /* @__PURE__ */ new Map();
@@ -8685,7 +8708,7 @@ var VisualiserSearch = (0, import_react81.memo)(
         },
         []
       );
-      const getSearchSuggestions = (0, import_react81.useCallback)(
+      const getSearchSuggestions = (0, import_react83.useCallback)(
         (nodesToIndex) => {
           const suggestions = nodesToIndex.flatMap((node) => {
             if (node.type === "system-group") return [];
@@ -8731,7 +8754,7 @@ var VisualiserSearch = (0, import_react81.memo)(
         },
         [dedupeSearchSuggestions, getNodeDisplayName, getNodeResourceKey]
       );
-      const getNodeTypeMeta = (0, import_react81.useCallback)((nodeType) => {
+      const getNodeTypeMeta = (0, import_react83.useCallback)((nodeType) => {
         const meta = {
           events: {
             label: "Event",
@@ -8879,7 +8902,7 @@ var VisualiserSearch = (0, import_react81.memo)(
           badgeClass: "border-gray-500/25 bg-gray-500/10 text-gray-700 dark:text-gray-300"
         };
       }, []);
-      const handleSearchChange = (0, import_react81.useCallback)(
+      const handleSearchChange = (0, import_react83.useCallback)(
         (event) => {
           const query = event.target.value;
           setSearchQuery(query);
@@ -8899,7 +8922,7 @@ var VisualiserSearch = (0, import_react81.memo)(
         },
         [nodes, getSearchSuggestions]
       );
-      const handleSearchFocus = (0, import_react81.useCallback)(() => {
+      const handleSearchFocus = (0, import_react83.useCallback)(() => {
         const suggestions = getSearchSuggestions(nodes);
         const search = searchQuery.toLowerCase();
         setFilteredSuggestions(
@@ -8910,7 +8933,7 @@ var VisualiserSearch = (0, import_react81.memo)(
         setShowSuggestions(true);
         setSelectedSuggestionIndex(-1);
       }, [nodes, searchQuery, getSearchSuggestions]);
-      const handleSuggestionClick = (0, import_react81.useCallback)(
+      const handleSuggestionClick = (0, import_react83.useCallback)(
         (suggestion) => {
           setSearchQuery("");
           setFilteredSuggestions([]);
@@ -8920,7 +8943,7 @@ var VisualiserSearch = (0, import_react81.memo)(
         },
         [onNodeSelect]
       );
-      const handleSearchKeyDown = (0, import_react81.useCallback)(
+      const handleSearchKeyDown = (0, import_react83.useCallback)(
         (event) => {
           switch (event.key) {
             case "ArrowDown":
@@ -8960,7 +8983,7 @@ var VisualiserSearch = (0, import_react81.memo)(
           handleSuggestionClick
         ]
       );
-      const clearSearch = (0, import_react81.useCallback)(() => {
+      const clearSearch = (0, import_react83.useCallback)(() => {
         setSearchQuery("");
         setShowSuggestions(false);
         setFilteredSuggestions([]);
@@ -8970,13 +8993,13 @@ var VisualiserSearch = (0, import_react81.memo)(
           searchInputRef.current.focus();
         }
       }, [onClear]);
-      (0, import_react81.useEffect)(() => {
+      (0, import_react83.useEffect)(() => {
         suggestionItemRefs.current = suggestionItemRefs.current.slice(
           0,
           filteredSuggestions.length
         );
       }, [filteredSuggestions.length]);
-      (0, import_react81.useEffect)(() => {
+      (0, import_react83.useEffect)(() => {
         if (!showSuggestions || selectedSuggestionIndex < 0) return;
         const list = suggestionsListRef.current;
         const item = suggestionItemRefs.current[selectedSuggestionIndex];
@@ -8995,7 +9018,7 @@ var VisualiserSearch = (0, import_react81.memo)(
         selectedSuggestionIndex,
         filteredSuggestions.length
       ]);
-      (0, import_react81.useEffect)(() => {
+      (0, import_react83.useEffect)(() => {
         const handleClickOutside = (event) => {
           if (containerRef.current && !containerRef.current.contains(event.target)) {
             setShowSuggestions(false);
@@ -9104,7 +9127,7 @@ VisualiserSearch.displayName = "VisualiserSearch";
 var VisualiserSearch_default = VisualiserSearch;
 
 // src/components/StepWalkthrough.tsx
-var import_react82 = require("react");
+var import_react84 = require("react");
 var import_lucide_react34 = require("lucide-react");
 
 // src/utils/keyboard.ts
@@ -9288,32 +9311,32 @@ var BUTTON = "flex items-center justify-center gap-1 h-7 text-xs rounded-md focu
 var PRIMARY_BUTTON = `${BUTTON} px-2.5 font-semibold text-white bg-[rgb(var(--ec-accent))] hover:bg-[rgb(var(--ec-accent-hover))]`;
 var QUIET_BUTTON = `${BUTTON} px-2 font-medium text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-page-border)/0.4)]`;
 var ICON_BUTTON = "flex items-center justify-center w-6 h-6 rounded text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-page-border)/0.4)]";
-var StepWalkthrough_default = (0, import_react82.memo)(function StepWalkthrough({
+var StepWalkthrough_default = (0, import_react84.memo)(function StepWalkthrough({
   nodes,
   edges,
   isFlowVisualization,
   onStepChange
 }) {
-  const [trail, setTrail] = (0, import_react82.useState)([]);
+  const [trail, setTrail] = (0, import_react84.useState)([]);
   const currentNodeId = trail[trail.length - 1] ?? null;
-  const [startNodeId, setStartNodeId] = (0, import_react82.useState)(null);
-  const nodeIdsKeyRef = (0, import_react82.useRef)("");
+  const [startNodeId, setStartNodeId] = (0, import_react84.useState)(null);
+  const nodeIdsKeyRef = (0, import_react84.useRef)("");
   const computedNodeIdsKey = nodes.map((n) => n.id).join(",");
   if (computedNodeIdsKey !== nodeIdsKeyRef.current) {
     nodeIdsKeyRef.current = computedNodeIdsKey;
   }
   const nodeIdsKey = nodeIdsKeyRef.current;
-  const edgeKeyRef = (0, import_react82.useRef)("");
+  const edgeKeyRef = (0, import_react84.useRef)("");
   const computedEdgeKey = edges.map((e) => `${e.source}-${e.target}`).join(",");
   if (computedEdgeKey !== edgeKeyRef.current) {
     edgeKeyRef.current = computedEdgeKey;
   }
   const edgeKey = edgeKeyRef.current;
-  const nodesById = (0, import_react82.useMemo)(
+  const nodesById = (0, import_react84.useMemo)(
     () => new Map(nodes.map((node) => [node.id, node])),
     [nodeIdsKey]
   );
-  (0, import_react82.useEffect)(() => {
+  (0, import_react84.useEffect)(() => {
     if (!isFlowVisualization || nodes.length === 0) return;
     const targets = new Set(edges.map((edge) => edge.target));
     const start2 = nodes.find((node) => !targets.has(node.id));
@@ -9321,10 +9344,10 @@ var StepWalkthrough_default = (0, import_react82.memo)(function StepWalkthrough(
       setStartNodeId(start2.id);
     }
   }, [nodeIdsKey, edgeKey, isFlowVisualization, startNodeId]);
-  (0, import_react82.useEffect)(() => {
+  (0, import_react84.useEffect)(() => {
     if (currentNodeId && !nodesById.has(currentNodeId)) setTrail([]);
   }, [currentNodeId, nodesById]);
-  const pathsFrom = (0, import_react82.useCallback)(
+  const pathsFrom = (0, import_react84.useCallback)(
     (nodeId) => nodeId ? edges.filter((edge) => edge.source === nodeId).map((edge) => ({
       targetId: edge.target,
       label: edge.label,
@@ -9332,11 +9355,11 @@ var StepWalkthrough_default = (0, import_react82.memo)(function StepWalkthrough(
     })).filter((path) => !!path.targetNode) : [],
     [edgeKey, nodesById]
   );
-  const availablePaths = (0, import_react82.useMemo)(
+  const availablePaths = (0, import_react84.useMemo)(
     () => pathsFrom(currentNodeId),
     [pathsFrom, currentNodeId]
   );
-  const stepsAfter = (0, import_react82.useCallback)(
+  const stepsAfter = (0, import_react84.useCallback)(
     (nodeId, walked) => {
       const seen = new Set(walked);
       let steps = 0;
@@ -9350,15 +9373,15 @@ var StepWalkthrough_default = (0, import_react82.memo)(function StepWalkthrough(
     },
     [pathsFrom]
   );
-  const totalSteps = (0, import_react82.useMemo)(
+  const totalSteps = (0, import_react84.useMemo)(
     () => currentNodeId ? trail.length + stepsAfter(currentNodeId, trail) : 0,
     [trail, currentNodeId, stepsAfter]
   );
-  const startSteps = (0, import_react82.useMemo)(
+  const startSteps = (0, import_react84.useMemo)(
     () => startNodeId ? 1 + stepsAfter(startNodeId, [startNodeId]) : 0,
     [startNodeId, stepsAfter]
   );
-  const goTo = (0, import_react82.useCallback)(
+  const goTo = (0, import_react84.useCallback)(
     (nextTrail) => {
       setTrail(nextTrail);
       const nodeId = nextTrail[nextTrail.length - 1];
@@ -9370,25 +9393,25 @@ var StepWalkthrough_default = (0, import_react82.memo)(function StepWalkthrough(
     },
     [onStepChange]
   );
-  const start = (0, import_react82.useCallback)(() => {
+  const start = (0, import_react84.useCallback)(() => {
     if (startNodeId) goTo([startNodeId]);
   }, [startNodeId, goTo]);
-  const [selectedPath, setSelectedPath] = (0, import_react82.useState)(0);
-  (0, import_react82.useEffect)(() => setSelectedPath(0), [currentNodeId]);
-  const next = (0, import_react82.useCallback)(
+  const [selectedPath, setSelectedPath] = (0, import_react84.useState)(0);
+  (0, import_react84.useEffect)(() => setSelectedPath(0), [currentNodeId]);
+  const next = (0, import_react84.useCallback)(
     (index = selectedPath) => {
       const path = availablePaths[index];
       if (path) goTo([...trail, path.targetId]);
     },
     [availablePaths, selectedPath, trail, goTo]
   );
-  const previous = (0, import_react82.useCallback)(() => goTo(trail.slice(0, -1)), [trail, goTo]);
-  const finish = (0, import_react82.useCallback)(() => {
+  const previous = (0, import_react84.useCallback)(() => goTo(trail.slice(0, -1)), [trail, goTo]);
+  const finish = (0, import_react84.useCallback)(() => {
     setTrail([]);
     onStepChange(null, true);
   }, [onStepChange]);
   const isWalking = trail.length > 0;
-  (0, import_react82.useEffect)(() => {
+  (0, import_react84.useEffect)(() => {
     if (!isWalking) return;
     const onKeyDown = (event) => {
       if (event.metaKey || event.ctrlKey || event.altKey) return;
@@ -9405,16 +9428,16 @@ var StepWalkthrough_default = (0, import_react82.memo)(function StepWalkthrough(
     return () => window.removeEventListener("keydown", onKeyDown);
   }, [isWalking, availablePaths, next, previous, finish]);
   const currentNode = currentNodeId ? nodesById.get(currentNodeId) : void 0;
-  const info = (0, import_react82.useMemo)(
+  const info = (0, import_react84.useMemo)(
     () => currentNode ? getStepInfo(currentNode) : void 0,
     [currentNode]
   );
-  const [expanded, setExpanded] = (0, import_react82.useState)(false);
-  const [isCut, setIsCut] = (0, import_react82.useState)(false);
-  const titleRef = (0, import_react82.useRef)(null);
-  const summaryRef = (0, import_react82.useRef)(null);
-  (0, import_react82.useEffect)(() => setExpanded(false), [currentNodeId]);
-  (0, import_react82.useLayoutEffect)(() => {
+  const [expanded, setExpanded] = (0, import_react84.useState)(false);
+  const [isCut, setIsCut] = (0, import_react84.useState)(false);
+  const titleRef = (0, import_react84.useRef)(null);
+  const summaryRef = (0, import_react84.useRef)(null);
+  (0, import_react84.useEffect)(() => setExpanded(false), [currentNodeId]);
+  (0, import_react84.useLayoutEffect)(() => {
     if (expanded) return;
     const title = titleRef.current;
     const summary = summaryRef.current;
@@ -9422,7 +9445,7 @@ var StepWalkthrough_default = (0, import_react82.memo)(function StepWalkthrough(
       !!info?.detail || !!title && title.scrollWidth > title.clientWidth || !!summary && summary.scrollHeight > summary.clientHeight + 1
     );
   }, [info, expanded]);
-  const startInfo = (0, import_react82.useMemo)(() => {
+  const startInfo = (0, import_react84.useMemo)(() => {
     const startNode = startNodeId ? nodesById.get(startNodeId) : void 0;
     return startNode ? getStepInfo(startNode) : void 0;
   }, [startNodeId, nodesById]);
@@ -9620,16 +9643,16 @@ var StepWalkthrough_default = (0, import_react82.memo)(function StepWalkthrough(
 });
 
 // src/components/WalkthroughBadges.tsx
-var import_react83 = require("react");
-var import_react84 = require("@xyflow/react");
+var import_react85 = require("react");
+var import_react86 = require("@xyflow/react");
 var import_jsx_runtime45 = require("react/jsx-runtime");
 var BADGE_SIZE = 30;
-var Badge = (0, import_react83.memo)(function Badge2({
+var Badge = (0, import_react85.memo)(function Badge2({
   nodeId,
   number,
   current
 }) {
-  const node = (0, import_react84.useInternalNode)(nodeId);
+  const node = (0, import_react86.useInternalNode)(nodeId);
   if (!node) return null;
   const { x, y } = node.internals.positionAbsolute;
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
@@ -9649,12 +9672,12 @@ var Badge = (0, import_react83.memo)(function Badge2({
     }
   );
 });
-var WalkthroughBadges_default = (0, import_react83.memo)(function WalkthroughBadges({ trail }) {
+var WalkthroughBadges_default = (0, import_react85.memo)(function WalkthroughBadges({ trail }) {
   if (trail.length === 0) return null;
   const numbers = /* @__PURE__ */ new Map();
   trail.forEach((nodeId, index) => numbers.set(nodeId, index + 1));
   const current = trail[trail.length - 1];
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react84.ViewportPortal, { children: [...numbers].map(([nodeId, number]) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(CanvasPortal, { children: [...numbers].map(([nodeId, number]) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     Badge,
     {
       nodeId,
@@ -9666,8 +9689,8 @@ var WalkthroughBadges_default = (0, import_react83.memo)(function WalkthroughBad
 });
 
 // src/components/CanvasToolbar.tsx
-var import_react85 = require("react");
-var import_react86 = require("@xyflow/react");
+var import_react87 = require("react");
+var import_react88 = require("@xyflow/react");
 var import_lucide_react35 = require("lucide-react");
 
 // src/components/Tip.tsx
@@ -9726,10 +9749,10 @@ var ToolbarButton = ({
     }
   ) });
 };
-var ZoomLevel = (0, import_react85.memo)(function ZoomLevel2({
+var ZoomLevel = (0, import_react87.memo)(function ZoomLevel2({
   className = ""
 }) {
-  const zoom = (0, import_react86.useStore)((state) => Math.round(state.transform[2] * 100));
+  const zoom = (0, import_react88.useStore)((state) => Math.round(state.transform[2] * 100));
   return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
     "div",
     {
@@ -9743,7 +9766,7 @@ var ZoomLevel = (0, import_react85.memo)(function ZoomLevel2({
 });
 var ToolbarDivider = () => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "w-px h-5 mx-1 bg-[rgb(var(--ec-page-border))]" });
 var Toolbar = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "flex items-center gap-0.5 p-1 rounded-lg border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg))] shadow-md", children }) });
-var CanvasToolbar = (0, import_react85.memo)(function CanvasToolbar2({
+var CanvasToolbar = (0, import_react87.memo)(function CanvasToolbar2({
   levels,
   tools = [],
   animateMessages,
@@ -9753,7 +9776,7 @@ var CanvasToolbar = (0, import_react85.memo)(function CanvasToolbar2({
   setShowMinimap,
   handleFitView
 }) {
-  const { zoomIn, zoomOut } = (0, import_react86.useReactFlow)();
+  const { zoomIn, zoomOut } = (0, import_react88.useReactFlow)();
   const groups = [
     /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ToolbarButton, { label: "Fit view", onClick: handleFitView, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react35.Maximize, { className: "w-4 h-4" }) }),
@@ -9829,7 +9852,7 @@ var CanvasToolbar = (0, import_react85.memo)(function CanvasToolbar2({
       )
     ] })
   ].filter(Boolean);
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react86.Panel, { position: "bottom-center", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Toolbar, { children: groups.map((group, index) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_react85.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react88.Panel, { position: "bottom-center", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Toolbar, { children: groups.map((group, index) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_react87.Fragment, { children: [
     index > 0 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ToolbarDivider, {}),
     group
   ] }, index)) }) });
@@ -9837,7 +9860,7 @@ var CanvasToolbar = (0, import_react85.memo)(function CanvasToolbar2({
 var CanvasToolbar_default = CanvasToolbar;
 
 // src/components/SwimlanePicker.tsx
-var import_react87 = require("react");
+var import_react89 = require("react");
 var DropdownMenu = __toESM(require("@radix-ui/react-dropdown-menu"));
 var import_lucide_react36 = require("lucide-react");
 var import_jsx_runtime48 = require("react/jsx-runtime");
@@ -10015,7 +10038,7 @@ var STYLES = [
   { value: "boxes", label: "Boxes", Preview: BoxesPreview },
   { value: "lanes", label: "Lanes", Preview: LanesPreview }
 ];
-var SwimlanePicker_default = (0, import_react87.memo)(function SwimlanePicker({
+var SwimlanePicker_default = (0, import_react89.memo)(function SwimlanePicker({
   options,
   counts,
   value,
@@ -10023,8 +10046,8 @@ var SwimlanePicker_default = (0, import_react87.memo)(function SwimlanePicker({
   onChange
 }) {
   const portalContainer = usePortalContainer();
-  const [open, setOpen] = (0, import_react87.useState)(false);
-  (0, import_react87.useEffect)(() => {
+  const [open, setOpen] = (0, import_react89.useState)(false);
+  (0, import_react89.useEffect)(() => {
     const onKeyDown = (event) => {
       if (event.key.toLowerCase() !== "g" || event.metaKey || event.ctrlKey || event.altKey || isTyping(event.target))
         return;
@@ -10178,18 +10201,18 @@ var SwimlanePicker_default = (0, import_react87.memo)(function SwimlanePicker({
 });
 
 // src/components/FocusModeModal.tsx
-var import_react93 = require("react");
+var import_react95 = require("react");
 var Dialog2 = __toESM(require("@radix-ui/react-dialog"));
 var import_lucide_react38 = require("lucide-react");
-var import_react94 = require("@xyflow/react");
+var import_react96 = require("@xyflow/react");
 
 // src/components/FocusMode/FocusModeContent.tsx
-var import_react91 = require("react");
-var import_react92 = require("@xyflow/react");
+var import_react93 = require("react");
+var import_react94 = require("@xyflow/react");
 
 // src/components/FocusMode/FocusModeNodeActions.tsx
-var import_react88 = require("react");
-var import_react89 = require("@xyflow/react");
+var import_react90 = require("react");
+var import_react91 = require("@xyflow/react");
 var import_lucide_react37 = require("lucide-react");
 var import_jsx_runtime49 = require("react/jsx-runtime");
 var selectScaleFactor = (state) => Math.max(0.4, Math.min(1, state.transform[2]));
@@ -10198,7 +10221,7 @@ var FocusModeNodeActions = ({
   isCenter,
   onSwitch
 }) => {
-  const scaleFactor = (0, import_react89.useStore)(selectScaleFactor);
+  const scaleFactor = (0, import_react91.useStore)(selectScaleFactor);
   if (node.type === "placeholder") return null;
   const docUrl = getNodeDocUrl(node);
   const direction = (node.position?.x ?? 0) < 0 ? "left" : "right";
@@ -10219,10 +10242,10 @@ var FocusModeNodeActions = ({
   if (isCenter) {
     if (!docUrl) return null;
     return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-      import_react89.NodeToolbar,
+      import_react91.NodeToolbar,
       {
         nodeId: node.id,
-        position: import_react89.Position.Bottom,
+        position: import_react91.Position.Bottom,
         isVisible: true,
         offset: -16,
         children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
@@ -10246,10 +10269,10 @@ var FocusModeNodeActions = ({
     );
   }
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-    import_react89.NodeToolbar,
+    import_react91.NodeToolbar,
     {
       nodeId: node.id,
-      position: import_react89.Position.Bottom,
+      position: import_react91.Position.Bottom,
       isVisible: true,
       offset: -16,
       children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
@@ -10284,10 +10307,10 @@ var FocusModeNodeActions = ({
     }
   );
 };
-var FocusModeNodeActions_default = (0, import_react88.memo)(FocusModeNodeActions);
+var FocusModeNodeActions_default = (0, import_react90.memo)(FocusModeNodeActions);
 
 // src/components/FocusMode/FocusModePlaceholder.tsx
-var import_react90 = require("@xyflow/react");
+var import_react92 = require("@xyflow/react");
 var import_jsx_runtime50 = require("react/jsx-runtime");
 var FocusModePlaceholder = ({
   data
@@ -10300,19 +10323,19 @@ var FocusModePlaceholder = ({
       style: { opacity: 0.6, minHeight: "130px" },
       children: [
         side === "right" && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-          import_react90.Handle,
+          import_react92.Handle,
           {
             type: "target",
-            position: import_react90.Position.Left,
+            position: import_react92.Position.Left,
             style: { visibility: "hidden" }
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "text-center text-sm text-[rgb(var(--ec-page-text-muted))] italic", children: label }),
         side === "left" && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-          import_react90.Handle,
+          import_react92.Handle,
           {
             type: "source",
-            position: import_react90.Position.Right,
+            position: import_react92.Position.Right,
             style: { visibility: "hidden" }
           }
         )
@@ -10336,21 +10359,21 @@ var FocusModeContent = ({
   edgeTypes: edgeTypes2,
   onSwitchCenter
 }) => {
-  const { fitView } = (0, import_react92.useReactFlow)();
-  const [isAnimating, setIsAnimating] = (0, import_react91.useState)(false);
-  const [needsFitView, setNeedsFitView] = (0, import_react91.useState)(false);
-  const [hoveredEdgeId, setHoveredEdgeId] = (0, import_react91.useState)(null);
-  const [isReady, setIsReady] = (0, import_react91.useState)(false);
-  const reactFlowInitialized = (0, import_react91.useRef)(false);
-  const animationTimeoutRef = (0, import_react91.useRef)(null);
-  (0, import_react91.useEffect)(() => {
+  const { fitView } = (0, import_react94.useReactFlow)();
+  const [isAnimating, setIsAnimating] = (0, import_react93.useState)(false);
+  const [needsFitView, setNeedsFitView] = (0, import_react93.useState)(false);
+  const [hoveredEdgeId, setHoveredEdgeId] = (0, import_react93.useState)(null);
+  const [isReady, setIsReady] = (0, import_react93.useState)(false);
+  const reactFlowInitialized = (0, import_react93.useRef)(false);
+  const animationTimeoutRef = (0, import_react93.useRef)(null);
+  (0, import_react93.useEffect)(() => {
     return () => {
       if (animationTimeoutRef.current) {
         clearTimeout(animationTimeoutRef.current);
       }
     };
   }, []);
-  const calculateFocusedGraph = (0, import_react91.useCallback)(
+  const calculateFocusedGraph = (0, import_react93.useCallback)(
     (centerId) => {
       const centerNode = allNodes.find((n) => n.id === centerId);
       if (!centerNode) {
@@ -10433,19 +10456,19 @@ var FocusModeContent = ({
     },
     [allNodes, allEdges]
   );
-  const initialGraph = (0, import_react91.useMemo)(
+  const initialGraph = (0, import_react93.useMemo)(
     () => calculateFocusedGraph(centerNodeId),
     [centerNodeId, calculateFocusedGraph]
   );
-  const [displayNodes, setDisplayNodes] = (0, import_react92.useNodesState)(initialGraph.nodes);
-  const [displayEdges, setDisplayEdges] = (0, import_react92.useEdgesState)(initialGraph.edges);
-  (0, import_react91.useEffect)(() => {
+  const [displayNodes, setDisplayNodes] = (0, import_react94.useNodesState)(initialGraph.nodes);
+  const [displayEdges, setDisplayEdges] = (0, import_react94.useEdgesState)(initialGraph.edges);
+  (0, import_react93.useEffect)(() => {
     const { nodes, edges } = calculateFocusedGraph(centerNodeId);
     setDisplayNodes(nodes);
     setDisplayEdges(edges);
     setNeedsFitView(true);
   }, [centerNodeId, calculateFocusedGraph, setDisplayNodes, setDisplayEdges]);
-  (0, import_react91.useEffect)(() => {
+  (0, import_react93.useEffect)(() => {
     if (needsFitView && reactFlowInitialized.current) {
       const timer = setTimeout(() => {
         fitView({ padding: 0.2, duration: 300 });
@@ -10454,14 +10477,14 @@ var FocusModeContent = ({
       return () => clearTimeout(timer);
     }
   }, [needsFitView, displayNodes, fitView]);
-  const handleInit = (0, import_react91.useCallback)(() => {
+  const handleInit = (0, import_react93.useCallback)(() => {
     reactFlowInitialized.current = true;
     requestAnimationFrame(() => {
       fitView({ padding: 0.2, duration: 0 });
       setIsReady(true);
     });
   }, [fitView]);
-  const handleSwitchNode = (0, import_react91.useCallback)(
+  const handleSwitchNode = (0, import_react93.useCallback)(
     (nodeId, direction) => {
       if (nodeId === centerNodeId || isAnimating) return;
       setIsAnimating(true);
@@ -10497,7 +10520,7 @@ var FocusModeContent = ({
     },
     [centerNodeId, isAnimating, setDisplayNodes, onSwitchCenter]
   );
-  const handleNodeClick = (0, import_react91.useCallback)(
+  const handleNodeClick = (0, import_react93.useCallback)(
     (_, clickedNode) => {
       if (clickedNode.id === centerNodeId || isAnimating) return;
       const direction = (clickedNode.position?.x ?? 0) < 0 ? "left" : "right";
@@ -10505,16 +10528,16 @@ var FocusModeContent = ({
     },
     [centerNodeId, isAnimating, handleSwitchNode]
   );
-  const handleEdgeMouseEnter = (0, import_react91.useCallback)(
+  const handleEdgeMouseEnter = (0, import_react93.useCallback)(
     (_, edge) => {
       setHoveredEdgeId(edge.id);
     },
     []
   );
-  const handleEdgeMouseLeave = (0, import_react91.useCallback)(() => {
+  const handleEdgeMouseLeave = (0, import_react93.useCallback)(() => {
     setHoveredEdgeId(null);
   }, []);
-  const edgesWithHover = (0, import_react91.useMemo)(() => {
+  const edgesWithHover = (0, import_react93.useMemo)(() => {
     return displayEdges.map((edge) => {
       if (edge.id === hoveredEdgeId) {
         return {
@@ -10525,7 +10548,7 @@ var FocusModeContent = ({
       return edge;
     });
   }, [displayEdges, hoveredEdgeId]);
-  const mergedNodeTypes = (0, import_react91.useMemo)(
+  const mergedNodeTypes = (0, import_react93.useMemo)(
     () => ({
       ...nodeTypes,
       placeholder: FocusModePlaceholder_default
@@ -10541,7 +10564,7 @@ var FocusModeContent = ({
       className: "h-full w-full focus-mode-container",
       style: { opacity: isReady ? 1 : 0 },
       children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
-        import_react92.ReactFlow,
+        import_react94.ReactFlow,
         {
           nodes: displayNodes,
           edges: edgesWithHover,
@@ -10560,8 +10583,8 @@ var FocusModeContent = ({
           minZoom: 0.3,
           maxZoom: 2,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react92.Background, { color: "rgb(var(--ec-page-border))", gap: 20 }),
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react92.Controls, { showInteractive: false }),
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react94.Background, { color: "rgb(var(--ec-page-border))", gap: 20 }),
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react94.Controls, { showInteractive: false }),
             displayNodes.map((node, index) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
               FocusModeNodeActions_default,
               {
@@ -10590,17 +10613,17 @@ var FocusModeModal = ({
   nodeTypes,
   edgeTypes: edgeTypes2
 }) => {
-  const [centerNodeId, setCenterNodeId] = (0, import_react93.useState)(
+  const [centerNodeId, setCenterNodeId] = (0, import_react95.useState)(
     initialNodeId
   );
   const isDark = useDarkMode();
   const portalContainer = usePortalContainer();
-  (0, import_react93.useEffect)(() => {
+  (0, import_react95.useEffect)(() => {
     if (isOpen && initialNodeId) {
       setCenterNodeId(initialNodeId);
     }
   }, [isOpen, initialNodeId]);
-  const handleSwitchCenter = (0, import_react93.useCallback)(
+  const handleSwitchCenter = (0, import_react95.useCallback)(
     (newCenterNodeId, _direction) => {
       setCenterNodeId(newCenterNodeId);
     },
@@ -10733,7 +10756,7 @@ var FocusModeModal = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { style: { flex: 1, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react94.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { style: { flex: 1, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react96.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
                 FocusModeContent_default,
                 {
                   centerNodeId,
@@ -10754,17 +10777,17 @@ var FocusModeModal = ({
 var FocusModeModal_default = FocusModeModal;
 
 // src/components/DiagramBackground.tsx
-var import_react95 = require("react");
-var import_react96 = require("@xyflow/react");
+var import_react97 = require("react");
+var import_react98 = require("@xyflow/react");
 var import_jsx_runtime53 = require("react/jsx-runtime");
-var DiagramBackground = (0, import_react95.memo)(function DiagramBackground2() {
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react96.Background, { color: "var(--ec-bg-dots)", gap: 16 });
+var DiagramBackground = (0, import_react97.memo)(function DiagramBackground2() {
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react98.Background, { color: "var(--ec-bg-dots)", gap: 16 });
 });
 var DiagramBackground_default = DiagramBackground;
 
 // src/components/Legend.tsx
-var import_react97 = require("react");
-var import_react98 = require("@xyflow/react");
+var import_react99 = require("react");
+var import_react100 = require("@xyflow/react");
 var import_lucide_react39 = require("lucide-react");
 var import_jsx_runtime54 = require("react/jsx-runtime");
 var GROUP_NODE_TYPES = ["group", "system-group", "domain-group", "swimlane"];
@@ -10859,7 +10882,7 @@ var getLegend = (nodes) => {
   return legend;
 };
 var LEGEND_PANEL_STYLE_WITH_MINIMAP = { marginRight: "230px" };
-var LegendPanel = (0, import_react97.memo)(function LegendPanel2({
+var LegendPanel = (0, import_react99.memo)(function LegendPanel2({
   legend,
   hiddenKeys,
   showMinimap = false,
@@ -10867,7 +10890,7 @@ var LegendPanel = (0, import_react97.memo)(function LegendPanel2({
 }) {
   if (Object.keys(legend).length === 0) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-    import_react98.Panel,
+    import_react100.Panel,
     {
       position: "bottom-right",
       style: showMinimap ? LEGEND_PANEL_STYLE_WITH_MINIMAP : void 0,
@@ -10911,7 +10934,7 @@ var DIAGRAM_FIT_VIEW_OPTIONS = {
 };
 
 // src/components/MermaidView.tsx
-var import_react99 = require("react");
+var import_react101 = require("react");
 var import_lucide_react40 = require("lucide-react");
 
 // src/utils/export-mermaid.ts
@@ -11211,22 +11234,22 @@ var MermaidView = ({
   edges,
   maxTextSize = 1e5
 }) => {
-  const [copySuccess, setCopySuccess] = (0, import_react99.useState)(false);
-  const [mermaidCode, setMermaidCode] = (0, import_react99.useState)("");
-  const [previewSvg, setPreviewSvg] = (0, import_react99.useState)(null);
-  const [previewError, setPreviewError] = (0, import_react99.useState)(null);
-  const [isRendering, setIsRendering] = (0, import_react99.useState)(true);
-  const containerRef = (0, import_react99.useRef)(null);
-  const svgContainerRef = (0, import_react99.useRef)(null);
-  const panZoomInstanceRef = (0, import_react99.useRef)(null);
-  (0, import_react99.useEffect)(() => {
+  const [copySuccess, setCopySuccess] = (0, import_react101.useState)(false);
+  const [mermaidCode, setMermaidCode] = (0, import_react101.useState)("");
+  const [previewSvg, setPreviewSvg] = (0, import_react101.useState)(null);
+  const [previewError, setPreviewError] = (0, import_react101.useState)(null);
+  const [isRendering, setIsRendering] = (0, import_react101.useState)(true);
+  const containerRef = (0, import_react101.useRef)(null);
+  const svgContainerRef = (0, import_react101.useRef)(null);
+  const panZoomInstanceRef = (0, import_react101.useRef)(null);
+  (0, import_react101.useEffect)(() => {
     const code = convertToMermaid(nodes, edges, {
       includeStyles: true,
       direction: "LR"
     });
     setMermaidCode(code);
   }, [nodes, edges]);
-  (0, import_react99.useEffect)(() => {
+  (0, import_react101.useEffect)(() => {
     if (!mermaidCode) return;
     let cancelled = false;
     setIsRendering(true);
@@ -11271,7 +11294,7 @@ var MermaidView = ({
       cancelled = true;
     };
   }, [mermaidCode]);
-  (0, import_react99.useEffect)(() => {
+  (0, import_react101.useEffect)(() => {
     if (!previewSvg || !svgContainerRef.current) return;
     const initZoom = async () => {
       const svgElement = svgContainerRef.current?.querySelector("svg");
@@ -11310,7 +11333,7 @@ var MermaidView = ({
       }
     };
   }, [previewSvg]);
-  const handleCopyToClipboard = (0, import_react99.useCallback)(async () => {
+  const handleCopyToClipboard = (0, import_react101.useCallback)(async () => {
     await copyToClipboard(mermaidCode);
     setCopySuccess(true);
     setTimeout(() => setCopySuccess(false), 2e3);
@@ -11423,11 +11446,11 @@ var MermaidView = ({
 var MermaidView_default = MermaidView;
 
 // src/hooks/use-node-visibility.ts
-var import_react101 = require("react");
-var import_react102 = require("@xyflow/react");
+var import_react103 = require("react");
+var import_react104 = require("@xyflow/react");
 
 // src/utils/hide-messages.ts
-var import_react100 = require("@xyflow/react");
+var import_react102 = require("@xyflow/react");
 var MESSAGE_NODE_TYPES = [...MESSAGE, "messageGroup", "messageGroupExpanded"];
 var isMessageNode = (node) => MESSAGE_NODE_TYPES.includes(node.type || "");
 var getCollection = (type = "") => {
@@ -11549,7 +11572,7 @@ var hideNodes = (nodes, edges, isHidden) => {
       label: getMessagesLabel(bridged.messages),
       // The same size arrow as the rest of the graph's edges
       markerEnd: {
-        type: import_react100.MarkerType.ArrowClosed,
+        type: import_react102.MarkerType.ArrowClosed,
         width: 20,
         height: 20,
         color: "rgb(var(--ec-page-text-muted))"
@@ -11811,7 +11834,7 @@ var useNodeVisibility = ({
 }) => {
   const hideMessagesKey = `EventCatalog:hideMessages${preferenceScope ? `:${preferenceScope}` : ""}`;
   const hideChannelsKey = `EventCatalog:hideChannels${preferenceScope ? `:${preferenceScope}` : ""}`;
-  const [urlLevel] = (0, import_react101.useState)(() => {
+  const [urlLevel] = (0, import_react103.useState)(() => {
     if (ignoreSavedLevel) return 3;
     const level = Number(
       new URLSearchParams(window.location.search).get("level")
@@ -11819,25 +11842,25 @@ var useNodeVisibility = ({
     if (level === 1 || level === 2) return 2;
     return level === 3 ? 3 : void 0;
   });
-  const [hideChannels, setHideChannels] = (0, import_react101.useState)(
+  const [hideChannels, setHideChannels] = (0, import_react103.useState)(
     () => !ignoreSavedLevel && !urlLevel && localStorage.getItem(hideChannelsKey) === "true"
   );
-  const [hideMessages, setHideMessages] = (0, import_react101.useState)(
+  const [hideMessages, setHideMessages] = (0, import_react103.useState)(
     () => urlLevel ? urlLevel === 2 : localStorage.getItem(hideMessagesKey) === "true"
   );
-  const fullGraph = (0, import_react101.useRef)({ nodes, edges });
-  const { fitView, fitBounds } = (0, import_react102.useReactFlow)();
-  const animateNextChange = (0, import_react101.useRef)(false);
-  const isAnimating = (0, import_react101.useRef)(false);
-  const cancelAnimation = (0, import_react101.useRef)(void 0);
+  const fullGraph = (0, import_react103.useRef)({ nodes, edges });
+  const { fitView, fitBounds } = (0, import_react104.useReactFlow)();
+  const animateNextChange = (0, import_react103.useRef)(false);
+  const isAnimating = (0, import_react103.useRef)(false);
+  const cancelAnimation = (0, import_react103.useRef)(void 0);
   const messagesHidden = hideMessages && hasMessages;
   const channelsHidden = hasChannels && (hideChannels || messagesHidden);
-  const [hiddenLegendKeys, setHiddenLegendKeys] = (0, import_react101.useState)(
+  const [hiddenLegendKeys, setHiddenLegendKeys] = (0, import_react103.useState)(
     initialHiddenLegendKeys
   );
-  const onHiddenLegendKeysChangeRef = (0, import_react101.useRef)(onHiddenLegendKeysChange);
+  const onHiddenLegendKeysChangeRef = (0, import_react103.useRef)(onHiddenLegendKeysChange);
   onHiddenLegendKeysChangeRef.current = onHiddenLegendKeysChange;
-  const toggleLegendKey = (0, import_react101.useCallback)(
+  const toggleLegendKey = (0, import_react103.useCallback)(
     (key) => {
       animateNextChange.current = true;
       const keys = hiddenLegendKeys.includes(key) ? hiddenLegendKeys.filter((hiddenKey) => hiddenKey !== key) : [...hiddenLegendKeys, key];
@@ -11846,14 +11869,14 @@ var useNodeVisibility = ({
     },
     [hiddenLegendKeys]
   );
-  const matchesLegendKeyRef = (0, import_react101.useRef)(matchesLegendKey);
+  const matchesLegendKeyRef = (0, import_react103.useRef)(matchesLegendKey);
   matchesLegendKeyRef.current = matchesLegendKey;
   const isHiddenByLegend = (node) => hiddenLegendKeys.some((key) => matchesLegendKeyRef.current(node, key));
   const legendHidden = fullGraph.current.nodes.some(isHiddenByLegend);
-  const [highlightCrossDomain, setHighlightCrossDomain] = (0, import_react101.useState)(
+  const [highlightCrossDomain, setHighlightCrossDomain] = (0, import_react103.useState)(
     () => localStorage.getItem("EventCatalog:highlightCrossDomain") === "true"
   );
-  const toggleHighlightCrossDomain = (0, import_react101.useCallback)(() => {
+  const toggleHighlightCrossDomain = (0, import_react103.useCallback)(() => {
     const highlight = !highlightCrossDomain;
     setHighlightCrossDomain(highlight);
     localStorage.setItem(
@@ -11861,7 +11884,7 @@ var useNodeVisibility = ({
       JSON.stringify(highlight)
     );
   }, [highlightCrossDomain]);
-  (0, import_react101.useEffect)(() => {
+  (0, import_react103.useEffect)(() => {
     if (isAnimating.current) return;
     const containsHiddenNodes = nodes.some(
       (node) => channelsHidden && node.type === "channels" || messagesHidden && isMessageNode(node) || legendHidden && isHiddenByLegend(node)
@@ -11870,20 +11893,20 @@ var useNodeVisibility = ({
       fullGraph.current = { nodes, edges };
     }
   }, [nodes, edges]);
-  const toggleChannelsVisibility = (0, import_react101.useCallback)(() => {
+  const toggleChannelsVisibility = (0, import_react103.useCallback)(() => {
     animateNextChange.current = true;
     const hide = !hideChannels;
     setHideChannels(hide);
     localStorage.setItem(hideChannelsKey, JSON.stringify(hide));
   }, [hideChannels]);
-  const toggleMessagesVisibility = (0, import_react101.useCallback)(() => {
+  const toggleMessagesVisibility = (0, import_react103.useCallback)(() => {
     animateNextChange.current = true;
     const hide = !hideMessages;
     setHideMessages(hide);
     localStorage.setItem(hideMessagesKey, JSON.stringify(hide));
     setLevelInUrl(hide ? 2 : 3);
   }, [hideMessages]);
-  const setDetailLevel = (0, import_react101.useCallback)((level) => {
+  const setDetailLevel = (0, import_react103.useCallback)((level) => {
     animateNextChange.current = true;
     const hide = level === 2;
     setHideMessages(hide);
@@ -11894,20 +11917,20 @@ var useNodeVisibility = ({
     }
     setLevelInUrl(level);
   }, []);
-  const nodesRef = (0, import_react101.useRef)(nodes);
+  const nodesRef = (0, import_react103.useRef)(nodes);
   nodesRef.current = nodes;
-  const edgesRef = (0, import_react101.useRef)(edges);
+  const edgesRef = (0, import_react103.useRef)(edges);
   edgesRef.current = edges;
-  const prepareEdgesRef = (0, import_react101.useRef)(prepareEdges);
+  const prepareEdgesRef = (0, import_react103.useRef)(prepareEdges);
   prepareEdgesRef.current = prepareEdges;
-  const beforeLayoutRef = (0, import_react101.useRef)(beforeLayout);
+  const beforeLayoutRef = (0, import_react103.useRef)(beforeLayout);
   beforeLayoutRef.current = beforeLayout;
-  const afterLayoutRef = (0, import_react101.useRef)(afterLayout);
+  const afterLayoutRef = (0, import_react103.useRef)(afterLayout);
   afterLayoutRef.current = afterLayout;
-  const latestRun = (0, import_react101.useRef)(0);
-  const [isLayingOut, setIsLayingOut] = (0, import_react101.useState)(false);
-  const isFirstRun = (0, import_react101.useRef)(true);
-  (0, import_react101.useLayoutEffect)(() => {
+  const latestRun = (0, import_react103.useRef)(0);
+  const [isLayingOut, setIsLayingOut] = (0, import_react103.useState)(false);
+  const isFirstRun = (0, import_react103.useRef)(true);
+  (0, import_react103.useLayoutEffect)(() => {
     const firstRun = isFirstRun.current;
     isFirstRun.current = false;
     const from = firstRun ? transitionFrom : void 0;
@@ -12025,7 +12048,7 @@ var shouldAnimateMessages = ({
 };
 
 // src/components/VisualizerDropdownContent.tsx
-var import_react103 = require("react");
+var import_react105 = require("react");
 var DropdownMenu2 = __toESM(require("@radix-ui/react-dropdown-menu"));
 var import_lucide_react41 = require("lucide-react");
 var import_outline = require("@heroicons/react/24/outline");
@@ -12043,7 +12066,7 @@ var DIAGRAM_MENU_SEPARATOR = "my-1 h-px bg-[rgb(var(--ec-page-border))]";
 
 // src/components/VisualizerDropdownContent.tsx
 var import_jsx_runtime56 = require("react/jsx-runtime");
-var VisualizerDropdownContent = (0, import_react103.memo)(
+var VisualizerDropdownContent = (0, import_react105.memo)(
   ({
     isMermaidView,
     setIsMermaidView,
@@ -12073,7 +12096,7 @@ var VisualizerDropdownContent = (0, import_react103.memo)(
     onOpenNotes,
     onOpenInStudio
   }) => {
-    const [layoutStatus, setLayoutStatus] = (0, import_react103.useState)("idle");
+    const [layoutStatus, setLayoutStatus] = (0, import_react105.useState)("idle");
     const portalContainer = usePortalContainer();
     const handleSaveLayout = async () => {
       if (!onSaveLayout) return;
@@ -12446,10 +12469,10 @@ VisualizerDropdownContent.displayName = "VisualizerDropdownContent";
 var VisualizerDropdownContent_default = VisualizerDropdownContent;
 
 // src/components/NodeContextMenu.tsx
-var import_react104 = require("react");
+var import_react106 = require("react");
 var ContextMenu5 = __toESM(require("@radix-ui/react-context-menu"));
 var import_jsx_runtime57 = require("react/jsx-runtime");
-var NodeContextMenu_default = (0, import_react104.memo)(function NodeContextMenu({
+var NodeContextMenu_default = (0, import_react106.memo)(function NodeContextMenu({
   items,
   children
 }) {
@@ -12487,7 +12510,7 @@ var NodeContextMenu_default = (0, import_react104.memo)(function NodeContextMenu
 });
 
 // src/utils/node-memo.ts
-var import_react105 = require("react");
+var import_react107 = require("react");
 var POSITION_PROPS = /* @__PURE__ */ new Set(["positionAbsoluteX", "positionAbsoluteY"]);
 var equalExceptPosition = (previous, next) => {
   const keys = /* @__PURE__ */ new Set([...Object.keys(previous), ...Object.keys(next)]);
@@ -12501,7 +12524,7 @@ var equalExceptPosition = (previous, next) => {
   }
   return true;
 };
-var memoNode = (Component) => (0, import_react105.memo)(Component, equalExceptPosition);
+var memoNode = (Component) => (0, import_react107.memo)(Component, equalExceptPosition);
 
 // src/utils/edge-animations.ts
 var pauseEdgeAnimations = (canvas, paused) => canvas?.querySelectorAll(".react-flow__edges > svg").forEach(
@@ -12509,7 +12532,7 @@ var pauseEdgeAnimations = (canvas, paused) => canvas?.querySelectorAll(".react-f
 );
 
 // src/utils/export-image.ts
-var import_react106 = require("@xyflow/react");
+var import_react108 = require("@xyflow/react");
 var MIN_IMAGE_WIDTH = 1024;
 var MIN_IMAGE_HEIGHT = 768;
 var EXPORT_PADDING = 40;
@@ -12522,7 +12545,7 @@ function getExportImageDimensions(nodesBounds) {
   };
   const width = Math.max(MIN_IMAGE_WIDTH, Math.ceil(paddedBounds.width));
   const height = Math.max(MIN_IMAGE_HEIGHT, Math.ceil(paddedBounds.height));
-  const viewport = (0, import_react106.getViewportForBounds)(paddedBounds, width, height, 0.5, 2, 0);
+  const viewport = (0, import_react108.getViewportForBounds)(paddedBounds, width, height, 0.5, 2, 0);
   return { width, height, viewport };
 }
 function extractEcVarNames(cssText) {
@@ -12609,7 +12632,7 @@ function injectExportStyles(viewport) {
 }
 
 // src/utils/layout.ts
-var import_react107 = require("@xyflow/react");
+var import_react109 = require("@xyflow/react");
 var EMPTY_GROUP_WIDTH = 200;
 var EMPTY_GROUP_HEIGHT = 80;
 var defaultSizes = {
@@ -12799,7 +12822,7 @@ async function layoutGraph(nodes, edges, { style } = {}) {
     const isCalls = edge.type === "calls";
     const isBidirectional = edge.type === "reads-writes";
     const arrowMarker = {
-      type: import_react107.MarkerType.ArrowClosed,
+      type: import_react109.MarkerType.ArrowClosed,
       width: 20,
       height: 20,
       color: "rgb(var(--ec-page-text-muted))"
@@ -12948,9 +12971,9 @@ var buildMessageGroupExpansionNodes = ({
 };
 
 // src/components/NotesToolbarButton.tsx
-var import_react108 = require("react");
+var import_react110 = require("react");
 var import_lucide_react42 = require("lucide-react");
-var import_react109 = require("@xyflow/react");
+var import_react111 = require("@xyflow/react");
 var Dialog3 = __toESM(require("@radix-ui/react-dialog"));
 var import_jsx_runtime58 = require("react/jsx-runtime");
 var NODE_TYPE_META = {
@@ -13213,12 +13236,12 @@ function AllNotesModal({
   onClose,
   nodes
 }) {
-  const { setCenter, getZoom } = (0, import_react109.useReactFlow)();
-  const [selectedIdx, setSelectedIdx] = (0, import_react108.useState)(0);
+  const { setCenter, getZoom } = (0, import_react111.useReactFlow)();
+  const [selectedIdx, setSelectedIdx] = (0, import_react110.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_react108.useCallback)(
+  const handleNavigate = (0, import_react110.useCallback)(
     (nodeId) => {
       const node = nodes.find((n) => n.id === nodeId);
       if (!node) return;
@@ -13821,7 +13844,7 @@ var GROUP_EDGE_STYLE = {
   stroke: "var(--ec-edge-stroke, #6b7280)"
 };
 var GROUP_EDGE_MARKER = {
-  type: import_react111.MarkerType.ArrowClosed,
+  type: import_react113.MarkerType.ArrowClosed,
   width: 20,
   height: 20
 };
@@ -13927,12 +13950,12 @@ var NodeGraphBuilder = ({
   onOpenInStudio,
   studioGraphs
 }) => {
-  (0, import_react110.useEffect)(() => {
+  (0, import_react112.useEffect)(() => {
     if (onBuildUrl) {
       setBuildUrlFn(onBuildUrl);
     }
   }, []);
-  const nodeTypes = (0, import_react110.useMemo)(() => {
+  const nodeTypes = (0, import_react112.useMemo)(() => {
     const wrapWithContextMenu = (Component) => {
       const Wrapped = (props) => {
         const items = props.data?.contextMenu;
@@ -13960,7 +13983,7 @@ var NodeGraphBuilder = ({
       ])
     );
   }, []);
-  const edgeTypes2 = (0, import_react110.useMemo)(
+  const edgeTypes2 = (0, import_react112.useMemo)(
     () => ({
       animated: AnimatedMessageEdge_default,
       multiline: MultilineEdgeLabel_default,
@@ -13971,20 +13994,20 @@ var NodeGraphBuilder = ({
     }),
     []
   );
-  const [animateMessages, setAnimateMessages] = (0, import_react110.useState)(
+  const [animateMessages, setAnimateMessages] = (0, import_react112.useState)(
     () => shouldAnimateMessages({
       disabled: disableMessageAnimation,
       animated,
       nodeCount: initialNodes.length
     })
   );
-  const prepareEdges = (0, import_react110.useCallback)(
+  const prepareEdges = (0, import_react112.useCallback)(
     (eds) => applyMessageAnimation(eds, animateMessages),
     [animateMessages]
   );
-  const [firstEdges] = (0, import_react110.useState)(() => prepareEdges(initialEdges));
-  const [nodes, setNodes, onNodesChange] = (0, import_react111.useNodesState)(initialNodes);
-  const [edges, setEdges, onEdgesChange] = (0, import_react111.useEdgesState)(firstEdges);
+  const [firstEdges] = (0, import_react112.useState)(() => prepareEdges(initialEdges));
+  const [nodes, setNodes, onNodesChange] = (0, import_react113.useNodesState)(initialNodes);
+  const [edges, setEdges, onEdgesChange] = (0, import_react113.useEdgesState)(firstEdges);
   const {
     fitView,
     getNodes,
@@ -13995,13 +14018,13 @@ var NodeGraphBuilder = ({
     getViewport,
     setViewport,
     getInternalNode
-  } = (0, import_react111.useReactFlow)();
-  const storeApi = (0, import_react111.useStoreApi)();
-  const previousGraphInputRef = (0, import_react110.useRef)({
+  } = (0, import_react113.useReactFlow)();
+  const storeApi = (0, import_react113.useStoreApi)();
+  const previousGraphInputRef = (0, import_react112.useRef)({
     nodes: initialNodes,
     edges: initialEdges
   });
-  (0, import_react110.useEffect)(() => {
+  (0, import_react112.useEffect)(() => {
     const previousGraphInput = previousGraphInputRef.current;
     previousGraphInputRef.current = {
       nodes: initialNodes,
@@ -14016,43 +14039,43 @@ var NodeGraphBuilder = ({
       fitView({ duration: 300, padding: 0.2 });
     });
   }, [initialNodes, initialEdges, setNodes, setEdges, fitView, prepareEdges]);
-  const [_activeStepIndex, _setActiveStepIndex] = (0, import_react110.useState)(null);
-  const [_isFullscreen, _setIsFullscreen] = (0, import_react110.useState)(false);
-  const [isShareModalOpen, setIsShareModalOpen] = (0, import_react110.useState)(false);
-  const [shareUrlCopySuccess, setShareUrlCopySuccess] = (0, import_react110.useState)(false);
-  const [isMermaidView, setIsMermaidView] = (0, import_react110.useState)(false);
-  const [showMinimap, setShowMinimap] = (0, import_react110.useState)(false);
-  const [hasLayoutChanges, setHasLayoutChanges] = (0, import_react110.useState)(false);
-  const [isSavingLayout, setIsSavingLayout] = (0, import_react110.useState)(false);
-  const initialPositionsRef = (0, import_react110.useRef)(
+  const [_activeStepIndex, _setActiveStepIndex] = (0, import_react112.useState)(null);
+  const [_isFullscreen, _setIsFullscreen] = (0, import_react112.useState)(false);
+  const [isShareModalOpen, setIsShareModalOpen] = (0, import_react112.useState)(false);
+  const [shareUrlCopySuccess, setShareUrlCopySuccess] = (0, import_react112.useState)(false);
+  const [isMermaidView, setIsMermaidView] = (0, import_react112.useState)(false);
+  const [showMinimap, setShowMinimap] = (0, import_react112.useState)(false);
+  const [hasLayoutChanges, setHasLayoutChanges] = (0, import_react112.useState)(false);
+  const [isSavingLayout, setIsSavingLayout] = (0, import_react112.useState)(false);
+  const initialPositionsRef = (0, import_react112.useRef)(
     {}
   );
-  const [focusModeOpen, setFocusModeOpen] = (0, import_react110.useState)(false);
-  const [focusedNodeId, setFocusedNodeId] = (0, import_react110.useState)(null);
-  const [swimlanes, setSwimlanes] = (0, import_react110.useState)(null);
-  const swimlanesRef = (0, import_react110.useRef)(null);
-  const [swimlaneStyle, setSwimlaneStyle] = (0, import_react110.useState)("boxes");
-  const swimlaneStyleRef = (0, import_react110.useRef)("boxes");
-  const unlanedGraphRef = (0, import_react110.useRef)(null);
-  const [isNotesModalOpen, setIsNotesModalOpen] = (0, import_react110.useState)(false);
-  const openNotesModal = (0, import_react110.useCallback)(() => setIsNotesModalOpen(true), []);
-  const interactionCountRef = (0, import_react110.useRef)(0);
-  const startInteraction = (0, import_react110.useCallback)(() => {
+  const [focusModeOpen, setFocusModeOpen] = (0, import_react112.useState)(false);
+  const [focusedNodeId, setFocusedNodeId] = (0, import_react112.useState)(null);
+  const [swimlanes, setSwimlanes] = (0, import_react112.useState)(null);
+  const swimlanesRef = (0, import_react112.useRef)(null);
+  const [swimlaneStyle, setSwimlaneStyle] = (0, import_react112.useState)("boxes");
+  const swimlaneStyleRef = (0, import_react112.useRef)("boxes");
+  const unlanedGraphRef = (0, import_react112.useRef)(null);
+  const [isNotesModalOpen, setIsNotesModalOpen] = (0, import_react112.useState)(false);
+  const openNotesModal = (0, import_react112.useCallback)(() => setIsNotesModalOpen(true), []);
+  const interactionCountRef = (0, import_react112.useRef)(0);
+  const startInteraction = (0, import_react112.useCallback)(() => {
     interactionCountRef.current += 1;
     if (interactionCountRef.current === 1) {
       reactFlowWrapperRef.current?.classList.add("ec-interaction-active");
       pauseEdgeAnimations(reactFlowWrapperRef.current, true);
     }
   }, []);
-  const endInteraction = (0, import_react110.useCallback)(() => {
+  const endInteraction = (0, import_react112.useCallback)(() => {
     interactionCountRef.current = Math.max(0, interactionCountRef.current - 1);
     if (interactionCountRef.current === 0) {
       reactFlowWrapperRef.current?.classList.remove("ec-interaction-active");
       pauseEdgeAnimations(reactFlowWrapperRef.current, false);
     }
   }, []);
-  const hoveredEdgeNodesRef = (0, import_react110.useRef)([]);
-  const handleEdgeMouseEnter = (0, import_react110.useCallback)(
+  const hoveredEdgeNodesRef = (0, import_react112.useRef)([]);
+  const handleEdgeMouseEnter = (0, import_react112.useCallback)(
     (_, edge) => {
       const wrapper = reactFlowWrapperRef.current;
       if (!wrapper) return;
@@ -14064,15 +14087,15 @@ var NodeGraphBuilder = ({
     },
     []
   );
-  const handleEdgeMouseLeave = (0, import_react110.useCallback)(() => {
+  const handleEdgeMouseLeave = (0, import_react112.useCallback)(() => {
     hoveredEdgeNodesRef.current.forEach(
       (el) => el.classList.remove("ec-edge-hover-node")
     );
     hoveredEdgeNodesRef.current = [];
   }, []);
-  const hoveredNodeEdgesRef = (0, import_react110.useRef)([]);
-  const hoveredNodePeersRef = (0, import_react110.useRef)([]);
-  const handleNodeMouseEnter = (0, import_react110.useCallback)(
+  const hoveredNodeEdgesRef = (0, import_react112.useRef)([]);
+  const hoveredNodePeersRef = (0, import_react112.useRef)([]);
+  const handleNodeMouseEnter = (0, import_react112.useCallback)(
     (_, node) => {
       const wrapper = reactFlowWrapperRef.current;
       if (!wrapper) return;
@@ -14101,7 +14124,7 @@ var NodeGraphBuilder = ({
     },
     []
   );
-  const handleNodeMouseLeave = (0, import_react110.useCallback)(() => {
+  const handleNodeMouseLeave = (0, import_react112.useCallback)(() => {
     hoveredNodeEdgesRef.current.forEach(
       (el) => el.classList.remove("ec-node-hover-edge")
     );
@@ -14111,30 +14134,30 @@ var NodeGraphBuilder = ({
     );
     hoveredNodePeersRef.current = [];
   }, []);
-  const hasChannels = (0, import_react110.useMemo)(
+  const hasChannels = (0, import_react112.useMemo)(
     () => initialNodes.some((node) => node.type === "channels"),
     [initialNodes]
   );
-  const hasMessages = (0, import_react110.useMemo)(
+  const hasMessages = (0, import_react112.useMemo)(
     () => initialNodes.some(isMessageNode),
     [initialNodes]
   );
-  const isFlowGraph = (0, import_react110.useMemo)(
+  const isFlowGraph = (0, import_react112.useMemo)(
     () => initialEdges.some((edge) => edge.type === "flow-edge"),
     [initialEdges]
   );
-  const renderedSizeOf = (0, import_react110.useCallback)(
+  const renderedSizeOf = (0, import_react112.useCallback)(
     (node) => {
       const measured = storeApi.getState().nodeLookup.get(node.id)?.measured;
       return measured?.width && measured?.height ? { width: measured.width, height: measured.height } : getNodeSize(node);
     },
     [storeApi]
   );
-  const beforeLayout = (0, import_react110.useCallback)(
+  const beforeLayout = (0, import_react112.useCallback)(
     (graph) => swimlaneStyleRef.current === "lanes" ? removeSwimlanes(graph) : graph,
     []
   );
-  const afterLayout = (0, import_react110.useCallback)((graph) => {
+  const afterLayout = (0, import_react112.useCallback)((graph) => {
     const groupBy = swimlanesRef.current;
     const style = swimlaneStyleRef.current;
     const current = getGrouping(graph.nodes);
@@ -14146,24 +14169,24 @@ var NodeGraphBuilder = ({
     unlanedGraphRef.current = unlaned;
     return layoutSwimlanes(unlaned, groupBy, { sizeOf: renderedSizeOf });
   }, []);
-  const hasLevels = (0, import_react110.useMemo)(
+  const hasLevels = (0, import_react112.useMemo)(
     () => initialNodes.some(
       (node) => LEVEL_NODE_TYPES.includes(node.type || "")
     ),
     [initialNodes]
   );
-  const isContextGraph = (0, import_react110.useMemo)(
+  const isContextGraph = (0, import_react112.useMemo)(
     () => initialNodes.every(
       (node) => CONTEXT_NODE_TYPES.includes(node.type || "")
     ),
     [initialNodes]
   );
-  const hasOtherDomains = (0, import_react110.useMemo)(
+  const hasOtherDomains = (0, import_react112.useMemo)(
     () => mode === "full" && initialNodes.some((node) => !!node.data?.otherDomain),
     [initialNodes, mode]
   );
-  const legendRef = (0, import_react110.useRef)({});
-  const matchesLegendKey = (0, import_react110.useCallback)((node, key) => {
+  const legendRef = (0, import_react112.useRef)({});
+  const matchesLegendKey = (0, import_react112.useCallback)((node, key) => {
     const groupId = legendRef.current[key]?.groupId;
     return groupId ? node.data?.group?.id === groupId : node.type === key;
   }, []);
@@ -14199,7 +14222,7 @@ var NodeGraphBuilder = ({
     beforeLayout,
     afterLayout
   });
-  const switchGraph = (0, import_react110.useCallback)(
+  const switchGraph = (0, import_react112.useCallback)(
     (showOverview) => onShowOverview?.(showOverview, {
       nodes: getNodes(),
       edges: getEdges(),
@@ -14207,7 +14230,7 @@ var NodeGraphBuilder = ({
     }),
     [onShowOverview, getNodes, getEdges, getViewport]
   );
-  const levels = (0, import_react110.useMemo)(() => {
+  const levels = (0, import_react112.useMemo)(() => {
     if (isFlowGraph) return [];
     if (!overviewLabel && !isContextGraph && !hasLevels) return [];
     const selectDetailLevel = (level) => {
@@ -14249,7 +14272,7 @@ var NodeGraphBuilder = ({
     setDetailLevel,
     switchGraph
   ]);
-  const canvasTools = (0, import_react110.useMemo)(
+  const canvasTools = (0, import_react112.useMemo)(
     () => hasOtherDomains ? [
       {
         label: highlightCrossDomain ? "Stop highlighting cross-domain communication" : "Highlight cross-domain communication",
@@ -14260,23 +14283,23 @@ var NodeGraphBuilder = ({
     ] : [],
     [hasOtherDomains, highlightCrossDomain, toggleHighlightCrossDomain]
   );
-  const searchRef = (0, import_react110.useRef)(null);
-  const reactFlowWrapperRef = (0, import_react110.useRef)(null);
-  const scrollableContainerRef = (0, import_react110.useRef)(null);
-  const nodesRef = (0, import_react110.useRef)(nodes);
+  const searchRef = (0, import_react112.useRef)(null);
+  const reactFlowWrapperRef = (0, import_react112.useRef)(null);
+  const scrollableContainerRef = (0, import_react112.useRef)(null);
+  const nodesRef = (0, import_react112.useRef)(nodes);
   nodesRef.current = nodes;
-  const edgesRef = (0, import_react110.useRef)(edges);
+  const edgesRef = (0, import_react112.useRef)(edges);
   edgesRef.current = edges;
-  const subFlowLayoutRun = (0, import_react110.useRef)(0);
-  const hideChannelsRef = (0, import_react110.useRef)(hideChannels);
+  const subFlowLayoutRun = (0, import_react112.useRef)(0);
+  const hideChannelsRef = (0, import_react112.useRef)(hideChannels);
   hideChannelsRef.current = hideChannels;
-  const walkthroughKeyRef = (0, import_react110.useRef)("");
+  const walkthroughKeyRef = (0, import_react112.useRef)("");
   const computedWalkthroughKey = `${nodes.map((n) => `${n.id}:${n.type}`).join(",")}|${edges.map((e) => `${e.source}>${e.target}`).join(",")}`;
   if (computedWalkthroughKey !== walkthroughKeyRef.current) {
     walkthroughKeyRef.current = computedWalkthroughKey;
   }
   const walkthroughKey = walkthroughKeyRef.current;
-  const { walkthroughNodes, walkthroughEdges } = (0, import_react110.useMemo)(() => {
+  const { walkthroughNodes, walkthroughEdges } = (0, import_react112.useMemo)(() => {
     const wrapperNodeIds = new Set(
       nodes.filter((n) => isExpandedWrapper(n.type) || isSwimlaneNode(n)).map((n) => n.id)
     );
@@ -14287,13 +14310,13 @@ var NodeGraphBuilder = ({
       )
     };
   }, [walkthroughKey]);
-  const animateLayout2 = (0, import_react110.useCallback)(() => {
+  const animateLayout2 = (0, import_react112.useCallback)(() => {
     const wrapper = reactFlowWrapperRef.current;
     if (!wrapper) return;
     wrapper.classList.add("ec-animating-layout");
     setTimeout(() => wrapper.classList.remove("ec-animating-layout"), 400);
   }, []);
-  const makeRoomForRenderedExpandedGroup = (0, import_react110.useCallback)(
+  const makeRoomForRenderedExpandedGroup = (0, import_react112.useCallback)(
     (groupNodeId, groupBounds) => {
       const padding = 80;
       const protectedBounds = {
@@ -14322,7 +14345,7 @@ var NodeGraphBuilder = ({
     },
     [getIntersectingNodes, setNodes]
   );
-  const handleCollapseGroup = (0, import_react110.useCallback)(
+  const handleCollapseGroup = (0, import_react112.useCallback)(
     (e) => {
       const target = e.target;
       const collapseBtn = target.closest(
@@ -14396,7 +14419,7 @@ var NodeGraphBuilder = ({
     },
     [initialNodes, initialEdges, setNodes, setEdges, animateLayout2]
   );
-  (0, import_react110.useEffect)(() => {
+  (0, import_react112.useEffect)(() => {
     if (isDevMode && initialNodes.length > 0) {
       const positions = {};
       initialNodes.forEach((node) => {
@@ -14405,7 +14428,7 @@ var NodeGraphBuilder = ({
       initialPositionsRef.current = positions;
     }
   }, [isDevMode, initialNodes]);
-  const checkForLayoutChanges = (0, import_react110.useCallback)(() => {
+  const checkForLayoutChanges = (0, import_react112.useCallback)(() => {
     if (!isDevMode) return;
     const initial = initialPositionsRef.current;
     if (Object.keys(initial).length === 0) return;
@@ -14415,7 +14438,7 @@ var NodeGraphBuilder = ({
     });
     setHasLayoutChanges(hasChanges);
   }, [isDevMode]);
-  const handleNodesChange = (0, import_react110.useCallback)(
+  const handleNodesChange = (0, import_react112.useCallback)(
     (changes) => {
       onNodesChange(changes);
       const hasDragEnd = changes.some(
@@ -14427,13 +14450,13 @@ var NodeGraphBuilder = ({
     },
     [onNodesChange, checkForLayoutChanges]
   );
-  const resetNodesAndEdges = (0, import_react110.useCallback)(() => {
+  const resetNodesAndEdges = (0, import_react112.useCallback)(() => {
     setNodes((nds) => mapChanged(nds, unpickedNode));
     setEdges(
       (eds) => mapChanged(eds, (edge) => unpickedEdge(edge, animateMessages))
     );
   }, [setNodes, setEdges, animateMessages]);
-  (0, import_react110.useEffect)(() => {
+  (0, import_react112.useEffect)(() => {
     if (!focusNodeId) return;
     const targetNode = nodesRef.current.find((node) => node.id === focusNodeId);
     if (!targetNode) return;
@@ -14451,13 +14474,13 @@ var NodeGraphBuilder = ({
       });
     });
   }, [focusNodeId, focusRequestId, fitView, setNodes]);
-  (0, import_react110.useEffect)(() => {
+  (0, import_react112.useEffect)(() => {
     if (fitRequestId == null) return;
     requestAnimationFrame(() => {
       fitView({ duration: 400, padding: 0.2 });
     });
   }, [fitRequestId, fitView]);
-  const handleNodeClick = (0, import_react110.useCallback)(
+  const handleNodeClick = (0, import_react112.useCallback)(
     (_, node) => {
       if (onNodeClick) {
         onNodeClick(node);
@@ -14805,17 +14828,17 @@ var NodeGraphBuilder = ({
       prepareEdges
     ]
   );
-  const toggleAnimateMessages = (0, import_react110.useCallback)(() => {
+  const toggleAnimateMessages = (0, import_react112.useCallback)(() => {
     setAnimateMessages((prev) => {
       const next = !prev;
       localStorage.setItem(ANIMATE_MESSAGES_STORAGE_KEY, JSON.stringify(next));
       return next;
     });
   }, []);
-  const handleFitView = (0, import_react110.useCallback)(() => {
+  const handleFitView = (0, import_react112.useCallback)(() => {
     fitView({ ...DIAGRAM_FIT_VIEW_OPTIONS, duration: 400 });
   }, [fitView]);
-  (0, import_react110.useEffect)(() => {
+  (0, import_react112.useEffect)(() => {
     setAnimateMessages(
       shouldAnimateMessages({
         disabled: disableMessageAnimation,
@@ -14824,19 +14847,19 @@ var NodeGraphBuilder = ({
       })
     );
   }, [animated, disableMessageAnimation, initialNodes.length]);
-  const animatedEdgesFor = (0, import_react110.useRef)(animateMessages);
-  (0, import_react110.useEffect)(() => {
+  const animatedEdgesFor = (0, import_react112.useRef)(animateMessages);
+  (0, import_react112.useEffect)(() => {
     if (animatedEdgesFor.current === animateMessages) return;
     animatedEdgesFor.current = animateMessages;
     setEdges((eds) => applyMessageAnimation(eds, animateMessages));
   }, [animateMessages]);
-  (0, import_react110.useEffect)(() => {
+  (0, import_react112.useEffect)(() => {
     if (transitionFrom) return;
     setTimeout(() => {
       fitView({ maxZoom: 1, duration: 800 });
     }, 150);
   }, []);
-  const generateMermaidCode = (0, import_react110.useCallback)(() => {
+  const generateMermaidCode = (0, import_react112.useCallback)(() => {
     try {
       return convertToMermaid(nodesRef.current, edgesRef.current, {
         includeStyles: true,
@@ -14847,7 +14870,7 @@ var NodeGraphBuilder = ({
       return "";
     }
   }, []);
-  (0, import_react110.useEffect)(() => {
+  (0, import_react112.useEffect)(() => {
     if (zoomOnScroll) return;
     const findScrollableContainer = () => {
       const selectors = [
@@ -14892,31 +14915,31 @@ var NodeGraphBuilder = ({
       };
     }
   }, [zoomOnScroll]);
-  const handlePaneClick = (0, import_react110.useCallback)(() => {
+  const handlePaneClick = (0, import_react112.useCallback)(() => {
     searchRef.current?.hideSuggestions();
     resetNodesAndEdges();
     fitView({ maxZoom: 1, duration: 800 });
   }, [resetNodesAndEdges, fitView]);
-  const handleNodeSelect = (0, import_react110.useCallback)(
+  const handleNodeSelect = (0, import_react112.useCallback)(
     (node) => {
       handleNodeClick(null, node);
     },
     [handleNodeClick]
   );
-  const handleSearchClear = (0, import_react110.useCallback)(() => {
+  const handleSearchClear = (0, import_react112.useCallback)(() => {
     resetNodesAndEdges();
     fitView({ maxZoom: 1, duration: 800 });
   }, [resetNodesAndEdges, fitView]);
-  const downloadImage = (0, import_react110.useCallback)((dataUrl, filename) => {
+  const downloadImage = (0, import_react112.useCallback)((dataUrl, filename) => {
     const a = document.createElement("a");
     a.setAttribute("download", `${filename || "eventcatalog"}.png`);
     a.setAttribute("href", dataUrl);
     a.click();
   }, []);
-  const openChat = (0, import_react110.useCallback)(() => {
+  const openChat = (0, import_react112.useCallback)(() => {
     window.dispatchEvent(new CustomEvent("eventcatalog:open-chat"));
   }, []);
-  const handleSaveLayout = (0, import_react110.useCallback)(async () => {
+  const handleSaveLayout = (0, import_react112.useCallback)(async () => {
     if (!resourceKey || !onSaveLayout) return false;
     if (swimlanesRef.current) return false;
     const positions = {};
@@ -14929,7 +14952,7 @@ var NodeGraphBuilder = ({
     });
     return await onSaveLayout(resourceKey, positions);
   }, [resourceKey, onSaveLayout]);
-  const getStudioSnapshot = (0, import_react110.useCallback)(async () => {
+  const getStudioSnapshot = (0, import_react112.useCallback)(async () => {
     const { detail, overview, hiddenMessages } = studioGraphs;
     const level = levels.findIndex((entry) => entry.active) + 1 || 3;
     const shown = {
@@ -14990,15 +15013,15 @@ var NodeGraphBuilder = ({
     getEdges,
     getInternalNode
   ]);
-  const handleOpenInStudio = (0, import_react110.useCallback)(() => {
+  const handleOpenInStudio = (0, import_react112.useCallback)(() => {
     if (onOpenInStudio && studioGraphs)
       onOpenInStudio({ title, getSnapshot: getStudioSnapshot });
   }, [onOpenInStudio, studioGraphs, title, getStudioSnapshot]);
-  const handleResetLayout = (0, import_react110.useCallback)(async () => {
+  const handleResetLayout = (0, import_react112.useCallback)(async () => {
     if (!resourceKey || !onResetLayout) return false;
     return await onResetLayout(resourceKey);
   }, [resourceKey, onResetLayout]);
-  const handleQuickSaveLayout = (0, import_react110.useCallback)(async () => {
+  const handleQuickSaveLayout = (0, import_react112.useCallback)(async () => {
     setIsSavingLayout(true);
     const success = await handleSaveLayout();
     setIsSavingLayout(false);
@@ -15011,17 +15034,17 @@ var NodeGraphBuilder = ({
       setHasLayoutChanges(false);
     }
   }, [handleSaveLayout]);
-  const handleCopyArchitectureCode = (0, import_react110.useCallback)(async () => {
+  const handleCopyArchitectureCode = (0, import_react112.useCallback)(async () => {
     const code = generateMermaidCode();
     await copyToClipboard(code);
   }, [generateMermaidCode]);
-  const handleCopyShareUrl = (0, import_react110.useCallback)(async () => {
+  const handleCopyShareUrl = (0, import_react112.useCallback)(async () => {
     const url = typeof window !== "undefined" ? window.location.href : "";
     await copyToClipboard(url);
     setShareUrlCopySuccess(true);
     setTimeout(() => setShareUrlCopySuccess(false), 2e3);
   }, []);
-  const toggleFullScreen = (0, import_react110.useCallback)(() => {
+  const toggleFullScreen = (0, import_react112.useCallback)(() => {
     if (!document.fullscreenElement) {
       reactFlowWrapperRef.current?.requestFullscreen().catch((err) => {
         console.error(
@@ -15032,7 +15055,7 @@ var NodeGraphBuilder = ({
       document.exitFullscreen();
     }
   }, []);
-  (0, import_react110.useEffect)(() => {
+  (0, import_react112.useEffect)(() => {
     const handleFullscreenChange = () => {
       _setIsFullscreen(!!document.fullscreenElement);
       setTimeout(() => {
@@ -15044,8 +15067,8 @@ var NodeGraphBuilder = ({
       document.removeEventListener("fullscreenchange", handleFullscreenChange);
     };
   }, [fitView]);
-  const handleExportVisual = (0, import_react110.useCallback)(() => {
-    const nodesBounds = (0, import_react111.getNodesBounds)(getNodes(), {
+  const handleExportVisual = (0, import_react112.useCallback)(() => {
+    const nodesBounds = (0, import_react113.getNodesBounds)(getNodes(), {
       nodeLookup: storeApi.getState().nodeLookup
     });
     const { width, height, viewport } = getExportImageDimensions(nodesBounds);
@@ -15073,15 +15096,15 @@ var NodeGraphBuilder = ({
       if (controls) controls.style.display = "block";
     });
   }, [getNodes, storeApi, downloadImage, title]);
-  const legendKeyRef = (0, import_react110.useRef)("");
+  const legendKeyRef = (0, import_react112.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 graphLegend = (0, import_react110.useMemo)(() => getLegend(nodes), [legendKey]);
-  const legendEntries = (0, import_react110.useRef)(null);
-  const legend = (0, import_react110.useMemo)(() => {
+  const graphLegend = (0, import_react112.useMemo)(() => getLegend(nodes), [legendKey]);
+  const legendEntries = (0, import_react112.useRef)(null);
+  const legend = (0, import_react112.useMemo)(() => {
     legendEntries.current ?? (legendEntries.current = getLegend(initialNodes));
     Object.assign(legendEntries.current, graphLegend);
     return Object.fromEntries(
@@ -15091,17 +15114,17 @@ var NodeGraphBuilder = ({
     );
   }, [graphLegend, hiddenLegendKeys]);
   legendRef.current = legend;
-  const nodeIdsKeyRef = (0, import_react110.useRef)("");
+  const nodeIdsKeyRef = (0, import_react112.useRef)("");
   const computedNodeIdsKey = nodes.map((n) => n.id).join(",");
   if (computedNodeIdsKey !== nodeIdsKeyRef.current) {
     nodeIdsKeyRef.current = computedNodeIdsKey;
   }
   const nodeIdsKey = nodeIdsKeyRef.current;
-  const searchNodes = (0, import_react110.useMemo)(
+  const searchNodes = (0, import_react112.useMemo)(
     () => nodes.filter((node) => !isSwimlaneNode(node)),
     [nodeIdsKey]
   );
-  const allNoteGroups = (0, import_react110.useMemo)(() => {
+  const allNoteGroups = (0, import_react112.useMemo)(() => {
     const groups = [];
     for (const node of nodes) {
       const result = getNotesFromNode(node);
@@ -15116,13 +15139,13 @@ var NodeGraphBuilder = ({
     }
     return groups;
   }, [nodeIdsKey]);
-  const totalNotesCount = (0, import_react110.useMemo)(
+  const totalNotesCount = (0, import_react112.useMemo)(
     () => allNoteGroups.reduce((sum, g) => sum + g.notes.length, 0),
     [allNoteGroups]
   );
-  const [walkthroughTrail, setWalkthroughTrail] = (0, import_react110.useState)([]);
-  const walkthroughTrailRef = (0, import_react110.useRef)([]);
-  const handleStepChange = (0, import_react110.useCallback)(
+  const [walkthroughTrail, setWalkthroughTrail] = (0, import_react112.useState)([]);
+  const walkthroughTrailRef = (0, import_react112.useRef)([]);
+  const handleStepChange = (0, import_react112.useCallback)(
     (nodeId, shouldZoomOut, trail = nodeId ? [nodeId] : []) => {
       if (nodeId === null) {
         resetNodesAndEdges();
@@ -15180,12 +15203,12 @@ var NodeGraphBuilder = ({
       walkthroughTrailRef.current = trail;
       const canvas = reactFlowWrapperRef.current?.getBoundingClientRect();
       if (!canvas) return;
-      const bounds = (0, import_react111.getNodesBounds)([nodeId, ...nextNodeIds], {
+      const bounds = (0, import_react113.getNodesBounds)([nodeId, ...nextNodeIds], {
         nodeLookup: storeApi.getState().nodeLookup
       });
       const cardSpace = Math.min(WALKTHROUGH_CARD_SPACE, canvas.height * 0.35);
       setViewport(
-        (0, import_react111.getViewportForBounds)(
+        (0, import_react113.getViewportForBounds)(
           bounds,
           canvas.width,
           canvas.height - cardSpace,
@@ -15198,13 +15221,13 @@ var NodeGraphBuilder = ({
     },
     [setNodes, setEdges, resetNodesAndEdges, setViewport, storeApi]
   );
-  const swimlaneOptions = (0, import_react110.useMemo)(
+  const swimlaneOptions = (0, import_react112.useMemo)(
     () => isFlowGraph ? FLOW_GROUP_BYS.filter(
       (groupBy) => hasSwimlanes(initialNodes, groupBy)
     ) : [],
     [isFlowGraph, initialNodes]
   );
-  const swimlaneCounts = (0, import_react110.useMemo)(
+  const swimlaneCounts = (0, import_react112.useMemo)(
     () => Object.fromEntries(
       swimlaneOptions.map((groupBy) => [
         groupBy,
@@ -15213,9 +15236,9 @@ var NodeGraphBuilder = ({
     ),
     [swimlaneOptions, initialNodes]
   );
-  const [groupingShown, setGroupingShown] = (0, import_react110.useState)(0);
-  const groupingRun = (0, import_react110.useRef)(0);
-  const handleSwimlanesChange = (0, import_react110.useCallback)(
+  const [groupingShown, setGroupingShown] = (0, import_react112.useState)(0);
+  const groupingRun = (0, import_react112.useRef)(0);
+  const handleSwimlanesChange = (0, import_react112.useCallback)(
     (requested, style = swimlaneStyleRef.current) => {
       const groupBy = style === "lanes" && requested === "domain-system" ? "domain" : requested;
       if (groupBy === swimlanesRef.current && style === swimlaneStyleRef.current)
@@ -15246,7 +15269,7 @@ var NodeGraphBuilder = ({
     },
     [animateLayout2, setNodes, setEdges, renderedSizeOf]
   );
-  (0, import_react110.useEffect)(() => {
+  (0, import_react112.useEffect)(() => {
     if (groupingShown === 0) return;
     const trail = walkthroughTrailRef.current;
     if (trail.length > 0) {
@@ -15256,9 +15279,9 @@ var NodeGraphBuilder = ({
       fitView({ duration: 400, padding: 0.1 });
     }
   }, [groupingShown]);
-  const nodesInitialized = (0, import_react111.useNodesInitialized)();
-  const groupedOnLoad = (0, import_react110.useRef)(false);
-  (0, import_react110.useEffect)(() => {
+  const nodesInitialized = (0, import_react113.useNodesInitialized)();
+  const groupedOnLoad = (0, import_react112.useRef)(false);
+  (0, import_react112.useEffect)(() => {
     if (!nodesInitialized || groupedOnLoad.current) return;
     groupedOnLoad.current = true;
     const fromUrl = readGroupFromUrl();
@@ -15360,7 +15383,7 @@ var NodeGraphBuilder = ({
             }
           ) })
         ] }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
-          import_react111.ReactFlow,
+          import_react113.ReactFlow,
           {
             nodeTypes,
             proOptions: hideAttribution ? HIDE_ATTRIBUTION2 : void 0,
@@ -15375,7 +15398,7 @@ var NodeGraphBuilder = ({
             onEdgesChange,
             onEdgeMouseEnter: handleEdgeMouseEnter,
             onEdgeMouseLeave: handleEdgeMouseLeave,
-            connectionLineType: import_react111.ConnectionLineType.SmoothStep,
+            connectionLineType: import_react113.ConnectionLineType.SmoothStep,
             nodeOrigin: NODE_ORIGIN,
             elevateNodesOnSelect: false,
             onNodeClick: handleNodeClick,
@@ -15390,7 +15413,7 @@ var NodeGraphBuilder = ({
             className: `relative${isLayingOut ? " ec-laying-out" : ""}${hasOtherDomains && highlightCrossDomain ? " ec-highlight-cross-domain" : ""}`,
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
-                import_react111.Panel,
+                import_react113.Panel,
                 {
                   position: "top-center",
                   className: "w-full pr-6 pointer-events-none",
@@ -15512,7 +15535,7 @@ var NodeGraphBuilder = ({
                 }
               ),
               includeBackground && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DiagramBackground_default, {}),
-              includeBackground && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react111.Controls, {}),
+              includeBackground && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react113.Controls, {}),
               mode === "full" && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                 CanvasToolbar_default,
                 {
@@ -15527,7 +15550,7 @@ var NodeGraphBuilder = ({
                 }
               ),
               showMinimap && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-                import_react111.MiniMap,
+                import_react113.MiniMap,
                 {
                   nodeStrokeWidth: 3,
                   zoomable: true,
@@ -15536,7 +15559,7 @@ var NodeGraphBuilder = ({
                 }
               ),
               swimlaneOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-                import_react111.Panel,
+                import_react113.Panel,
                 {
                   position: "top-right",
                   style: mode === "full" && showSearch ? SWIMLANE_PICKER_PANEL_STYLE_UNDER_SEARCH : void 0,
@@ -15553,7 +15576,7 @@ var NodeGraphBuilder = ({
                 }
               ),
               isFlowGraph && showFlowWalkthrough && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(WalkthroughBadges_default, { trail: walkthroughTrail }),
-              isFlowGraph && showFlowWalkthrough && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react111.Panel, { position: "bottom-left", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+              isFlowGraph && showFlowWalkthrough && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react113.Panel, { position: "bottom-left", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                 StepWalkthrough_default,
                 {
                   nodes: walkthroughNodes,
@@ -15564,7 +15587,7 @@ var NodeGraphBuilder = ({
                 }
               ) }),
               isDevMode && hasLayoutChanges && !swimlanes && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-                import_react111.Panel,
+                import_react113.Panel,
                 {
                   position: "bottom-left",
                   style: isFlowGraph && showFlowWalkthrough ? LAYOUT_CHANGE_PANEL_STYLE_WITH_WALKTHROUGH : LAYOUT_CHANGE_PANEL_STYLE_DEFAULT,
@@ -15728,8 +15751,8 @@ var NodeGraph = ({
   onResetLayout,
   onOpenInStudio
 }) => {
-  const [graphLayout, setGraphLayout] = (0, import_react110.useState)(null);
-  (0, import_react110.useEffect)(() => {
+  const [graphLayout, setGraphLayout] = (0, import_react112.useState)(null);
+  (0, import_react112.useEffect)(() => {
     if (!graph) return setGraphLayout(null);
     let current = true;
     layoutGraph(graph.nodes, graph.edges, {
@@ -15743,7 +15766,7 @@ var NodeGraph = ({
   }, [graph]);
   const nodes = graphLayout?.nodes ?? nodesProp ?? NO_NODES;
   const edges = graphLayout?.edges ?? edgesProp ?? NO_EDGES;
-  const studioGraphs = (0, import_react110.useMemo)(
+  const studioGraphs = (0, import_react112.useMemo)(
     () => ({
       detail: { nodes, edges },
       overview: overviewGraph,
@@ -15755,16 +15778,16 @@ 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_react110.useState)(null);
-  const [showFooter, setShowFooter] = (0, import_react110.useState)(true);
+  const [elem, setElem] = (0, import_react112.useState)(null);
+  const [showFooter, setShowFooter] = (0, import_react112.useState)(true);
   const containerToRenderInto = portalId || `${id}-portal`;
-  const [showOverview, setShowOverview] = (0, import_react110.useState)(() => {
+  const [showOverview, setShowOverview] = (0, import_react112.useState)(() => {
     if (!overviewGraph) return false;
     const level = new URLSearchParams(window.location.search).get("level");
     return level === null || level === "1";
   });
-  const [transitionFrom, setTransitionFrom] = (0, import_react110.useState)();
-  const handleShowOverview = (0, import_react110.useCallback)(
+  const [transitionFrom, setTransitionFrom] = (0, import_react112.useState)();
+  const handleShowOverview = (0, import_react112.useCallback)(
     (show, from) => {
       setTransitionFrom(from);
       setShowOverview(show);
@@ -15773,14 +15796,14 @@ var NodeGraph = ({
     []
   );
   const overview = showOverview ? overviewGraph : void 0;
-  const hiddenLegendKeys = (0, import_react110.useRef)([]);
-  const handleHiddenLegendKeysChange = (0, import_react110.useCallback)((keys) => {
+  const hiddenLegendKeys = (0, import_react112.useRef)([]);
+  const handleHiddenLegendKeysChange = (0, import_react112.useCallback)((keys) => {
     hiddenLegendKeys.current = keys;
   }, []);
-  (0, import_react110.useEffect)(() => {
+  (0, import_react112.useEffect)(() => {
     setElem(document.getElementById(containerToRenderInto));
   }, []);
-  (0, import_react110.useEffect)(() => {
+  (0, import_react112.useEffect)(() => {
     const urlParams = new URLSearchParams(window.location.search);
     const embed = urlParams.get("embed");
     if (embed === "true") {
@@ -15788,9 +15811,9 @@ var NodeGraph = ({
     }
   }, []);
   if (!elem || graph && !graphLayout) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { children: (0, import_react_dom.createPortal)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { children: (0, import_react_dom2.createPortal)(
     // Remount when switching graphs so each starts from a clean state
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react111.ReactFlowProvider, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react113.ReactFlowProvider, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
         NodeGraphBuilder,
         {