@eventcatalog/visualiser 5.0.0-beta.2 → 5.0.0-beta.4

package/dist/index.mjs

@@ -1,7 +1,7 @@
 // src/components/NodeGraph.tsx
 import {
   useEffect as useEffect11,
-  useMemo as useMemo17,
+  useMemo as useMemo18,
   useState as useState15,
   useCallback as useCallback13,
   useRef as useRef9,
@@ -187,6 +187,7 @@ var HANDLE_GLOW = {
   actor: glow("234, 179, 8"),
   external: glow("168, 85, 247"),
   dataProduct: glow("99, 102, 241"),
+  view: glow("14, 165, 233"),
   // Nodes without a colour of their own (fields, message groups, custom steps)
   generic: glow("251, 146, 60")
 };
@@ -3693,33 +3694,67 @@ var config_default2 = {
 };
 
 // src/nodes/view/ViewNode.tsx
-import { memo as memo13 } from "react";
+import { memo as memo13, useMemo as useMemo8 } from "react";
 import { MonitorIcon } from "lucide-react";
-import { Handle as Handle9, Position as Position9 } from "@xyflow/react";
+import { Handle as Handle9, Position as Position9, useNodeConnections as useNodeConnections9 } from "@xyflow/react";
 import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
-function classNames9(...classes) {
-  return classes.filter(Boolean).join(" ");
-}
+var VIEW_COLOR = "#0ea5e9";
+var GlowHandle13 = memo13(function GlowHandle14({
+  side
+}) {
+  return /* @__PURE__ */ jsx15(
+    "div",
+    {
+      className: "ec-handle-glow",
+      style: {
+        position: "absolute",
+        top: "50%",
+        [side]: -6,
+        transform: "translateY(-50%)",
+        width: 12,
+        height: 12,
+        borderRadius: "50%",
+        background: "linear-gradient(135deg, #38bdf8, #0284c7)",
+        border: "2px solid rgb(var(--ec-page-bg))",
+        zIndex: 20,
+        ...HANDLE_GLOW.view,
+        pointerEvents: "none"
+      }
+    }
+  );
+});
 var ViewNode_default = memo13(function View(props) {
-  const { data: _data, selected } = props;
-  const { name, summary, screenshot } = props.data.view;
+  const {
+    name,
+    version,
+    summary,
+    screenshot,
+    owners = EMPTY_ARRAY,
+    notes
+  } = props.data.view;
   const mode = props.data.mode || "simple";
-  const nodeLabel = "View";
+  const ownersNormalized = useMemo8(() => normalizeOwners(owners), [owners]);
+  const targetConnections = useNodeConnections9({ handleType: "target" });
+  const sourceConnections = useNodeConnections9({ handleType: "source" });
   return /* @__PURE__ */ jsxs13(
     "div",
     {
-      className: classNames9(
-        "rounded-md border flex justify-start bg-[rgb(var(--ec-card-bg))] text-[rgb(var(--ec-page-text))] min-h-[100px] relative",
-        selected ? "border-blue-600 ring-2 ring-blue-500 shadow-lg" : "border-blue-400"
-      ),
-      style: NODE_WIDTH_STYLE,
+      className: [
+        "relative min-w-48 max-w-60 rounded-xl border-2 border-sky-500 overflow-visible",
+        props.selected ? "ring-2 ring-sky-400/60 ring-offset-2" : ""
+      ].join(" "),
+      style: {
+        background: "rgb(var(--ec-card-bg))",
+        boxShadow: "0 2px 12px rgba(14, 165, 233, 0.15)"
+      },
       children: [
+        props.data.isFocused && /* @__PURE__ */ jsx15(FocusedResourceIndicator, {}),
         /* @__PURE__ */ jsx15(
           Handle9,
           {
             type: "target",
             position: Position9.Left,
-            className: "!left-[-1px] !w-2.5 !h-2.5 !bg-blue-500 !border !border-blue-600 !rounded-full !z-10"
+            style: HIDDEN_HANDLE_STYLE
           }
         ),
         /* @__PURE__ */ jsx15(
@@ -3727,53 +3762,59 @@ var ViewNode_default = memo13(function View(props) {
           {
             type: "source",
             position: Position9.Right,
-            className: "!right-[-1px] !w-2.5 !h-2.5 !bg-blue-500 !border !border-blue-600 !rounded-full !z-10"
-          }
-        ),
-        /* @__PURE__ */ jsxs13(
-          "div",
-          {
-            className: `bg-gradient-to-b from-blue-500 to-blue-700 relative flex flex-col items-center w-5 justify-between rounded-l-sm text-blue-100 border-r-[1px] border-blue-500`,
-            children: [
-              /* @__PURE__ */ jsx15(
-                MonitorIcon,
-                {
-                  className: `w-4 h-4 opacity-90 text-white mt-1 ${mode === "full" ? "mb-2" : "mb-1"}`
-                }
-              ),
-              mode === "full" && /* @__PURE__ */ jsx15(
-                "span",
-                {
-                  className: "text-center text-[8px] text-white font-bold uppercase mb-4",
-                  style: ROTATED_LABEL_STYLE,
-                  children: nodeLabel
-                }
-              )
-            ]
+            style: HIDDEN_HANDLE_STYLE
           }
         ),
-        /* @__PURE__ */ jsxs13("div", { className: "p-1 flex-1", children: [
-          /* @__PURE__ */ jsxs13("div", { className: "pb-1", children: [
-            /* @__PURE__ */ jsx15("span", { className: "text-xs font-bold block pt-0.5 pb-0.5", children: name }),
-            mode === "simple" && /* @__PURE__ */ jsx15("span", { className: "text-[10px] text-[rgb(var(--ec-page-text-muted))] font-light block pt-0.5 pb-0.5", children: nodeLabel })
+        notes && notes.length > 0 && /* @__PURE__ */ jsx15(NotesIndicator, { notes, resourceName: name }),
+        targetConnections.length > 0 && /* @__PURE__ */ jsx15(GlowHandle13, { side: "left" }),
+        sourceConnections.length > 0 && /* @__PURE__ */ jsx15(GlowHandle13, { side: "right" }),
+        /* @__PURE__ */ jsx15("div", { className: "absolute -top-2.5 left-2.5 z-10", children: /* @__PURE__ */ jsxs13("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__ */ jsx15(MonitorIcon, { className: "w-2.5 h-2.5", strokeWidth: 2.5 }),
+          "View"
+        ] }) }),
+        /* @__PURE__ */ jsxs13("div", { className: "px-3 pt-3.5 pb-2.5", children: [
+          /* @__PURE__ */ jsxs13("div", { className: "flex items-baseline gap-1 min-w-0", children: [
+            /* @__PURE__ */ jsx15(
+              TruncatedResourceName,
+              {
+                value: name,
+                tooltipBorderColor: VIEW_COLOR,
+                className: "text-[13px] font-semibold leading-snug text-[rgb(var(--ec-page-text))] truncate",
+                children: name
+              }
+            ),
+            version && /* @__PURE__ */ jsxs13("span", { className: "text-[10px] font-normal text-[rgb(var(--ec-page-text-muted))] shrink-0", children: [
+              "(v",
+              version,
+              ")"
+            ] })
           ] }),
-          summary && /* @__PURE__ */ jsx15("div", { className: "pb-1", children: /* @__PURE__ */ jsx15(
+          mode === "full" && summary && /* @__PURE__ */ jsx15(
             "div",
             {
-              className: "text-[8px] font-light text-[rgb(var(--ec-page-text-muted))] block leading-tight overflow-hidden",
+              className: "mt-1.5 text-[9px] text-[rgb(var(--ec-page-text-muted))] leading-relaxed overflow-hidden",
               style: LINE_CLAMP_STYLE,
               title: summary,
               children: summary
             }
-          ) }),
-          screenshot && /* @__PURE__ */ jsx15("div", { className: "py-1", children: /* @__PURE__ */ jsx15(
+          ),
+          mode === "full" && screenshot && /* @__PURE__ */ jsx15(
             "img",
             {
               src: screenshot,
               alt: `${name} screenshot`,
-              className: "w-full max-w-40 h-20 object-cover rounded border border-[rgb(var(--ec-page-border))]"
+              className: "mt-2 w-full h-24 object-cover rounded-md border border-[rgb(var(--ec-page-border))]"
             }
-          ) })
+          ),
+          /* @__PURE__ */ jsx15(
+            OwnerIndicator,
+            {
+              owners: ownersNormalized,
+              accentColor: "bg-sky-400",
+              borderColor: "rgba(14,165,233,0.08)",
+              iconClass: "text-sky-300"
+            }
+          )
         ] })
       ]
     }
@@ -3783,9 +3824,9 @@ var ViewNode_default = memo13(function View(props) {
 // src/nodes/actor/ActorNode.tsx
 import { memo as memo14 } from "react";
 import { User } from "lucide-react";
-import { Handle as Handle10, Position as Position10, useNodeConnections as useNodeConnections9 } from "@xyflow/react";
+import { Handle as Handle10, Position as Position10, useNodeConnections as useNodeConnections10 } from "@xyflow/react";
 import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
-function GlowHandle13({ side }) {
+function GlowHandle15({ side }) {
   return /* @__PURE__ */ jsx16(
     "div",
     {
@@ -3807,7 +3848,7 @@ function GlowHandle13({ side }) {
     }
   );
 }
-function classNames10(...classes) {
+function classNames9(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 function PostItActor(props) {
@@ -3816,7 +3857,7 @@ function PostItActor(props) {
   return /* @__PURE__ */ jsxs14(
     "div",
     {
-      className: classNames10(
+      className: classNames9(
         "relative min-w-44 max-w-56 min-h-[120px]",
         props?.selected ? "ring-2 ring-yellow-400/60 ring-offset-1" : ""
       ),
@@ -3884,7 +3925,7 @@ function PostItActor(props) {
               as: "div",
               value: name,
               tooltipBorderColor: "#eab308",
-              className: classNames10(
+              className: classNames9(
                 "text-[13px] font-bold leading-snug truncate",
                 deprecated ? "text-yellow-950/40 line-through" : "text-yellow-950"
               ),
@@ -3908,14 +3949,14 @@ function PostItActor(props) {
 function DefaultActor(props) {
   const { name, summary, deprecated, draft, notes } = props?.data;
   const mode = props?.data?.mode || "simple";
-  const targetConnections = useNodeConnections9({ handleType: "target" });
-  const sourceConnections = useNodeConnections9({ handleType: "source" });
+  const targetConnections = useNodeConnections10({ handleType: "target" });
+  const sourceConnections = useNodeConnections10({ handleType: "source" });
   const isDark = useDarkMode();
   const deprecatedStripe = isDark ? "rgba(239,68,68,0.25)" : "rgba(239,68,68,0.1)";
   return /* @__PURE__ */ jsxs14(
     "div",
     {
-      className: classNames10(
+      className: classNames9(
         "relative min-w-48 max-w-60 rounded-xl border-2 overflow-visible",
         props?.selected ? "ring-2 ring-yellow-400/60 ring-offset-2" : "",
         deprecated ? "border-dashed border-red-500" : draft ? `border-dashed ${isDark ? "border-yellow-400" : "border-yellow-400/60"}` : "border-yellow-500"
@@ -3942,12 +3983,12 @@ function DefaultActor(props) {
           }
         ),
         notes && notes.length > 0 && /* @__PURE__ */ jsx16(NotesIndicator, { notes, resourceName: name }),
-        targetConnections.length > 0 && /* @__PURE__ */ jsx16(GlowHandle13, { side: "left" }),
-        sourceConnections.length > 0 && /* @__PURE__ */ jsx16(GlowHandle13, { side: "right" }),
+        targetConnections.length > 0 && /* @__PURE__ */ jsx16(GlowHandle15, { side: "left" }),
+        sourceConnections.length > 0 && /* @__PURE__ */ jsx16(GlowHandle15, { side: "right" }),
         /* @__PURE__ */ jsx16("div", { className: "absolute -top-2.5 left-2.5 flex items-center gap-1.5 z-10", children: /* @__PURE__ */ jsxs14(
           "span",
           {
-            className: classNames10(
+            className: classNames9(
               "inline-flex items-center gap-1 text-[7px] font-bold uppercase tracking-widest text-white px-1.5 py-0.5 rounded shadow-sm",
               deprecated ? "bg-red-500" : "bg-yellow-500"
             ),
@@ -4242,7 +4283,8 @@ var DomainCard_default = memo17(function DomainCardNode({ data }) {
     systemsCount = 0,
     servicesCount = 0,
     entitiesCount = 0,
-    subdomain = false
+    subdomain = false,
+    navigable = true
   } = data;
   const { id, version, name, summary } = domain;
   const stats = [
@@ -4254,14 +4296,16 @@ var DomainCard_default = memo17(function DomainCardNode({ data }) {
   return /* @__PURE__ */ jsxs17(
     "div",
     {
-      role: "button",
-      tabIndex: 0,
-      onClick: goToDiagram,
-      onKeyDown: (e) => {
-        if (e.key === "Enter" || e.key === " ") goToDiagram();
-      },
-      title: `Open the ${name} diagram`,
-      className: "relative min-w-48 max-w-60 rounded-xl border-2 border-yellow-400 overflow-visible cursor-pointer",
+      ...navigable ? {
+        role: "button",
+        tabIndex: 0,
+        onClick: goToDiagram,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") goToDiagram();
+        },
+        title: `Open the ${name} diagram`
+      } : {},
+      className: `relative min-w-48 max-w-60 rounded-xl border-2 border-yellow-400 overflow-visible${navigable ? " cursor-pointer" : ""}`,
       style: CARD_STYLE,
       children: [
         /* @__PURE__ */ jsx19(
@@ -4331,9 +4375,9 @@ var DomainCard_default = memo17(function DomainCardNode({ data }) {
 // src/nodes/external-system/ExternalSystem.tsx
 import { memo as memo18 } from "react";
 import { Globe as Globe2 } from "lucide-react";
-import { Handle as Handle14, Position as Position14, useNodeConnections as useNodeConnections10 } from "@xyflow/react";
+import { Handle as Handle14, Position as Position14, useNodeConnections as useNodeConnections11 } from "@xyflow/react";
 import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
-function GlowHandle14({ side }) {
+function GlowHandle16({ side }) {
   return /* @__PURE__ */ jsx20(
     "div",
     {
@@ -4355,7 +4399,7 @@ function GlowHandle14({ side }) {
     }
   );
 }
-function classNames11(...classes) {
+function classNames10(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 function PostItExternalSystem(props) {
@@ -4364,7 +4408,7 @@ function PostItExternalSystem(props) {
   return /* @__PURE__ */ jsxs18(
     "div",
     {
-      className: classNames11(
+      className: classNames10(
         "relative min-w-44 max-w-56 min-h-[120px]",
         props?.selected ? "ring-2 ring-purple-400/60 ring-offset-1" : ""
       ),
@@ -4432,7 +4476,7 @@ function PostItExternalSystem(props) {
               as: "div",
               value: name,
               tooltipBorderColor: "#a855f7",
-              className: classNames11(
+              className: classNames10(
                 "text-[13px] font-bold leading-snug truncate",
                 deprecated ? "text-purple-950/40 line-through" : "text-purple-950"
               ),
@@ -4460,14 +4504,14 @@ function PostItExternalSystem(props) {
 function DefaultExternalSystem(props) {
   const { version, name, summary, deprecated, draft, notes } = props.data.externalSystem;
   const mode = props.data.mode || "simple";
-  const targetConnections = useNodeConnections10({ handleType: "target" });
-  const sourceConnections = useNodeConnections10({ handleType: "source" });
+  const targetConnections = useNodeConnections11({ handleType: "target" });
+  const sourceConnections = useNodeConnections11({ handleType: "source" });
   const isDark = useDarkMode();
   const deprecatedStripe = isDark ? "rgba(239,68,68,0.25)" : "rgba(239,68,68,0.1)";
   return /* @__PURE__ */ jsxs18(
     "div",
     {
-      className: classNames11(
+      className: classNames10(
         "relative min-w-48 max-w-60 rounded-xl border-2 overflow-visible",
         props?.selected ? "ring-2 ring-purple-400/60 ring-offset-2" : "",
         deprecated ? "border-dashed border-red-500" : draft ? `border-dashed ${isDark ? "border-purple-400" : "border-purple-400/60"}` : "border-purple-500"
@@ -4494,12 +4538,12 @@ function DefaultExternalSystem(props) {
           }
         ),
         notes && notes.length > 0 && /* @__PURE__ */ jsx20(NotesIndicator, { notes, resourceName: name }),
-        targetConnections.length > 0 && /* @__PURE__ */ jsx20(GlowHandle14, { side: "left" }),
-        sourceConnections.length > 0 && /* @__PURE__ */ jsx20(GlowHandle14, { side: "right" }),
+        targetConnections.length > 0 && /* @__PURE__ */ jsx20(GlowHandle16, { side: "left" }),
+        sourceConnections.length > 0 && /* @__PURE__ */ jsx20(GlowHandle16, { side: "right" }),
         /* @__PURE__ */ jsx20("div", { className: "absolute -top-2.5 left-2.5 flex items-center gap-1.5 z-10", children: /* @__PURE__ */ jsxs18(
           "span",
           {
-            className: classNames11(
+            className: classNames10(
               "inline-flex items-center gap-1 text-[7px] font-bold uppercase tracking-widest text-white px-1.5 py-0.5 rounded shadow-sm",
               deprecated ? "bg-red-500" : "bg-purple-500"
             ),
@@ -4618,7 +4662,7 @@ var config_default4 = {
 import { Handle as Handle15, Position as Position15 } from "@xyflow/react";
 import { memo as memo19, useState as useState3, useEffect as useEffect2, useRef as useRef2, useCallback as useCallback2 } from "react";
 import { Fragment as Fragment3, jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
-function classNames12(...classes) {
+function classNames11(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 var AVAILABLE_COLORS = {
@@ -4785,7 +4829,7 @@ var NoteNode_default = memo19(function NoteNodeComponent({
       "button",
       {
         onClick: () => handleColorChange(colorKey),
-        className: classNames12(
+        className: classNames11(
           "w-6 h-6 rounded-full border-2",
           AVAILABLE_COLORS[colorKey].bg,
           AVAILABLE_COLORS[colorKey].border,
@@ -4799,7 +4843,7 @@ var NoteNode_default = memo19(function NoteNodeComponent({
       "div",
       {
         onDoubleClick: handleDoubleClick,
-        className: classNames12(
+        className: classNames11(
           "w-full h-full rounded-lg border p-3 flex flex-col min-w-[150px] min-h-[150px] relative",
           colorClasses.bg,
           colorClasses.border,
@@ -4818,7 +4862,7 @@ var NoteNode_default = memo19(function NoteNodeComponent({
               onChange: handleTextChange,
               onBlur: handleBlur,
               onKeyDown: handleKeyDown,
-              className: classNames12(
+              className: classNames11(
                 "w-full flex-1 bg-transparent border-none outline-none resize-none text-[10px] p-0 m-0",
                 colorClasses.text,
                 colorClasses.placeholder
@@ -4868,9 +4912,9 @@ var NoteNode_default = memo19(function NoteNodeComponent({
 // src/nodes/field/FieldNode.tsx
 import { memo as memo20 } from "react";
 import { Database as Database3 } from "lucide-react";
-import { Handle as Handle16, Position as Position16, useNodeConnections as useNodeConnections11 } from "@xyflow/react";
+import { Handle as Handle16, Position as Position16, useNodeConnections as useNodeConnections12 } from "@xyflow/react";
 import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
-function GlowHandle15({ side }) {
+function GlowHandle17({ side }) {
   return /* @__PURE__ */ jsx22(
     "div",
     {
@@ -4892,19 +4936,19 @@ function GlowHandle15({ side }) {
     }
   );
 }
-function classNames13(...classes) {
+function classNames12(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 var FieldNode_default = memo20(function Field(props) {
   const { name, type: fieldType } = props.data;
   const mode = props.data.mode || "simple";
-  const targetConnections = useNodeConnections11({ handleType: "target" });
-  const sourceConnections = useNodeConnections11({ handleType: "source" });
+  const targetConnections = useNodeConnections12({ handleType: "target" });
+  const sourceConnections = useNodeConnections12({ handleType: "source" });
   const isDark = useDarkMode();
   return /* @__PURE__ */ jsxs20(
     "div",
     {
-      className: classNames13(
+      className: classNames12(
         "relative min-w-48 max-w-60 rounded-xl border-2 overflow-visible",
         props?.selected ? "ring-2 ring-cyan-400/60 ring-offset-2" : "",
         "border-cyan-500"
@@ -4930,8 +4974,8 @@ var FieldNode_default = memo20(function Field(props) {
             style: HIDDEN_HANDLE_STYLE
           }
         ),
-        targetConnections.length > 0 && /* @__PURE__ */ jsx22(GlowHandle15, { side: "left" }),
-        sourceConnections.length > 0 && /* @__PURE__ */ jsx22(GlowHandle15, { side: "right" }),
+        targetConnections.length > 0 && /* @__PURE__ */ jsx22(GlowHandle17, { side: "left" }),
+        sourceConnections.length > 0 && /* @__PURE__ */ jsx22(GlowHandle17, { side: "right" }),
         /* @__PURE__ */ jsx22("div", { className: "absolute -top-2.5 left-2.5 z-10", children: /* @__PURE__ */ jsxs20("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__ */ jsx22(Database3, { className: "w-2.5 h-2.5", strokeWidth: 2.5 }),
           "Field"
@@ -4993,7 +5037,7 @@ var config_default5 = {
 };
 
 // src/nodes/Flow.tsx
-import { memo as memo21, useMemo as useMemo8 } from "react";
+import { memo as memo21, useMemo as useMemo9 } from "react";
 import { Handle as Handle17 } from "@xyflow/react";
 import { Maximize2 } from "lucide-react";
 import * as ContextMenu from "@radix-ui/react-context-menu";
@@ -5106,7 +5150,7 @@ function getIcon(iconName) {
 
 // src/nodes/Flow.tsx
 import { Fragment as Fragment4, jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
-function classNames14(...classes) {
+function classNames13(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 var Flow_default = memo21(function FlowNode({
@@ -5118,7 +5162,7 @@ var Flow_default = memo21(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 = useMemo8(() => getIcon(icon), [icon]);
+  const Icon = useMemo9(() => getIcon(icon), [icon]);
   const portalContainer = usePortalContainer();
   const nodeLabel = label || flow?.data?.sidebar?.badge || "Flow";
   const fontSize = nodeLabel.length > 10 ? "7px" : "9px";
@@ -5150,7 +5194,7 @@ var Flow_default = memo21(function FlowNode({
           /* @__PURE__ */ jsxs22(
             "div",
             {
-              className: classNames14(
+              className: classNames13(
                 `relative rounded-md border flex justify-start bg-[rgb(var(--ec-card-bg))] text-[rgb(var(--ec-page-text))] border-${color}-400`
               ),
               style: NODE_WIDTH_STYLE,
@@ -5158,7 +5202,7 @@ var Flow_default = memo21(function FlowNode({
                 /* @__PURE__ */ jsxs22(
                   "div",
                   {
-                    className: classNames14(
+                    className: classNames13(
                       `bg-gradient-to-b from-${color}-500 to-${color}-700 relative flex flex-col items-center w-5 justify-between rounded-l-sm text-${color}-100`,
                       `border-r-[1px] border-${color}-500`
                     ),
@@ -5181,7 +5225,7 @@ var Flow_default = memo21(function FlowNode({
                   /* @__PURE__ */ jsxs22(
                     "div",
                     {
-                      className: classNames14(
+                      className: classNames13(
                         mode === "full" ? `border-b border-[rgb(var(--ec-page-border))]` : ""
                       ),
                       children: [
@@ -5390,11 +5434,11 @@ var FlowExpandedNode_default = memo22(function FlowExpandedNode({
 // src/nodes/Entity.tsx
 import { Handle as Handle18, Position as Position17, useUpdateNodeInternals } from "@xyflow/react";
 import * as ContextMenu2 from "@radix-ui/react-context-menu";
-import { memo as memo23, useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo9, useRef as useRef3, useState as useState4 } from "react";
+import { memo as memo23, useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo10, useRef as useRef3, useState as useState4 } from "react";
 import { ChevronDownIcon, ChevronRightIcon } from "@heroicons/react/20/solid";
 import { Fragment as Fragment5, jsx as jsx26, jsxs as jsxs24 } from "react/jsx-runtime";
 var ENTITY_TARGET_HANDLE_ID = "__eventcatalog-entity-target";
-function classNames15(...classes) {
+function classNames14(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 var getPropertyTypeLabel = (property) => {
@@ -5436,7 +5480,7 @@ var Entity_default = memo23(function EntityNode({
     node: { color: _color = "blue", label: _label } = {},
     icon = "CubeIcon"
   } = styles || {};
-  const Icon = useMemo9(() => getIcon(icon), [icon]);
+  const Icon = useMemo10(() => getIcon(icon), [icon]);
   const [hoveredProperty, setHoveredProperty] = useState4(null);
   const [expandedProperties, setExpandedProperties] = useState4(
     () => /* @__PURE__ */ new Set()
@@ -5444,7 +5488,7 @@ var Entity_default = memo23(function EntityNode({
   const previousExpandedProperties = useRef3(expandedProperties);
   const updateNodeInternals = useUpdateNodeInternals();
   const portalContainer = usePortalContainer();
-  const referenceProperties = useMemo9(
+  const referenceProperties = useMemo10(
     () => new Set(referencePropertyNames),
     [referencePropertyNames]
   );
@@ -5477,7 +5521,7 @@ var Entity_default = memo23(function EntityNode({
       /* @__PURE__ */ jsxs24(
         "div",
         {
-          className: classNames15(
+          className: classNames14(
             "relative flex items-center justify-between py-2 pr-4 hover:bg-[rgb(var(--ec-page-border)/0.2)]",
             isExpandable && "nodrag nopan cursor-pointer"
           ),
@@ -5559,7 +5603,7 @@ var Entity_default = memo23(function EntityNode({
     /* @__PURE__ */ jsx26(ContextMenu2.Trigger, { children: /* @__PURE__ */ jsxs24(
       "div",
       {
-        className: classNames15(
+        className: classNames14(
           "bg-[rgb(var(--ec-card-bg))] border rounded-lg shadow-sm min-w-[200px]",
           externalToDomain ? "border-amber-500/60" : "border-blue-400/50"
         ),
@@ -5567,7 +5611,7 @@ var Entity_default = memo23(function EntityNode({
           /* @__PURE__ */ jsxs24(
             "div",
             {
-              className: classNames15(
+              className: classNames14(
                 "relative px-4 py-2 rounded-t-lg border-b border-[rgb(var(--ec-page-border))]",
                 externalToDomain ? "bg-amber-500/20" : "bg-blue-500/15"
               ),
@@ -5656,7 +5700,7 @@ import { memo as memo24 } from "react";
 import { UserIcon as UserIcon2 } from "@heroicons/react/20/solid";
 import { Handle as Handle19 } from "@xyflow/react";
 import { jsx as jsx27, jsxs as jsxs25 } from "react/jsx-runtime";
-function classNames16(...classes) {
+function classNames15(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 var User_default = memo24(function UserNode({
@@ -5675,7 +5719,7 @@ var User_default = memo24(function UserNode({
   return /* @__PURE__ */ jsxs25(
     "div",
     {
-      className: classNames16(
+      className: classNames15(
         `rounded-md border flex justify-start bg-[rgb(var(--ec-card-bg))] text-[rgb(var(--ec-page-text))] border-yellow-400`,
         mode === "full" ? "min-h-[5em]" : "min-h-[2em]"
       ),
@@ -5684,7 +5728,7 @@ var User_default = memo24(function UserNode({
         /* @__PURE__ */ jsxs25(
           "div",
           {
-            className: classNames16(
+            className: classNames15(
               "bg-gradient-to-b from-yellow-400 to-yellow-600 relative flex flex-col items-center w-5 justify-between rounded-l-sm text-orange-100-500",
               `border-r-[1px] border-yellow-500`
             ),
@@ -5721,7 +5765,7 @@ var User_default = memo24(function UserNode({
             /* @__PURE__ */ jsx27(
               "div",
               {
-                className: classNames16(
+                className: classNames15(
                   mode === "full" ? `border-b border-[rgb(var(--ec-page-border))]` : ""
                 ),
                 children: /* @__PURE__ */ jsx27(
@@ -5748,7 +5792,7 @@ var User_default = memo24(function UserNode({
 import { memo as memo25 } from "react";
 import { Handle as Handle20, Position as Position18 } from "@xyflow/react";
 import { jsx as jsx28, jsxs as jsxs26 } from "react/jsx-runtime";
-function classNames17(...classes) {
+function classNames16(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 var Step_default = memo25(function StepNode({
@@ -5761,7 +5805,7 @@ var Step_default = memo25(function StepNode({
   return /* @__PURE__ */ jsxs26(
     "div",
     {
-      className: classNames17(
+      className: classNames16(
         "rounded-md border flex justify-start bg-[rgb(var(--ec-card-bg))] text-[rgb(var(--ec-page-text))] border-blue-400 min-h-[3em]"
       ),
       style: NODE_WIDTH_STYLE,
@@ -5769,7 +5813,7 @@ var Step_default = memo25(function StepNode({
         /* @__PURE__ */ jsx28(
           "div",
           {
-            className: classNames17(
+            className: classNames16(
               "bg-gradient-to-b from-gray-700 to-gray-700 relative flex flex-col items-center w-5 justify-end rounded-l-sm text-orange-100-500",
               `border-r-[1px] border-gray-500`
             ),
@@ -5814,7 +5858,7 @@ var Step_default = memo25(function StepNode({
             /* @__PURE__ */ jsx28(
               "div",
               {
-                className: classNames17(
+                className: classNames16(
                   mode === "full" ? `border-b border-[rgb(var(--ec-page-border))]` : ""
                 ),
                 children: /* @__PURE__ */ jsx28(
@@ -5845,7 +5889,7 @@ import {
   Position as Position19
 } from "@xyflow/react";
 import * as ContextMenu3 from "@radix-ui/react-context-menu";
-import { memo as memo26, useState as useState5, useCallback as useCallback4, useMemo as useMemo10 } from "react";
+import { memo as memo26, useState as useState5, useCallback as useCallback4, useMemo as useMemo11 } from "react";
 import { jsx as jsx29, jsxs as jsxs27 } from "react/jsx-runtime";
 var Domain_default = memo26(function DomainNode({ data, id: nodeId }) {
   const { mode, domain } = data;
@@ -5855,8 +5899,8 @@ var Domain_default = memo26(function DomainNode({ data, id: nodeId }) {
   );
   const { id, version, name, services = [], styles } = domain.data;
   const { icon = "RectangleGroupIcon" } = styles || {};
-  const Icon = useMemo10(() => getIcon(icon), [icon]);
-  const ServerIcon6 = useMemo10(() => getIcon("ServerIcon"), []);
+  const Icon = useMemo11(() => getIcon(icon), [icon]);
+  const ServerIcon6 = useMemo11(() => getIcon("ServerIcon"), []);
   const portalContainer = usePortalContainer();
   const handleSelectionChange = useCallback4(
     ({ nodes: selectedNodes }) => {
@@ -6018,7 +6062,7 @@ import {
 } from "lucide-react";
 import { memo as memo27 } from "react";
 import { jsx as jsx30, jsxs as jsxs28 } from "react/jsx-runtime";
-function classNames18(...classes) {
+function classNames17(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 var System_default = memo27(function SystemNode({ data }) {
@@ -6029,12 +6073,14 @@ var System_default = memo27(function SystemNode({ data }) {
     entitiesCount = 0,
     containersCount = 0,
     messagesCount = 0,
-    isFocused = false
+    isFocused = false,
+    navigable = true
   } = data;
   const { id, version, name, summary, scope } = system;
   const isExternal = scope === "external";
   const isDark = useDarkMode();
   const isFlowStep = Boolean(data.step);
+  const opensMap = navigable && !isFlowStep;
   const stats = [
     { icon: ServerIcon3, label: "Services", count: servicesCount },
     { icon: MessageSquareIcon, label: "Messages", count: messagesCount },
@@ -6048,7 +6094,7 @@ var System_default = memo27(function SystemNode({ data }) {
   return /* @__PURE__ */ jsxs28(
     "div",
     {
-      ...isFlowStep ? {} : {
+      ...!opensMap ? {} : {
         role: "button",
         tabIndex: 0,
         onClick: goToMap,
@@ -6057,9 +6103,9 @@ var System_default = memo27(function SystemNode({ data }) {
         },
         title: `Open the ${name} map`
       },
-      className: classNames18(
+      className: classNames17(
         "relative min-w-48 max-w-60 rounded-xl border-2 overflow-visible",
-        !isFlowStep && "cursor-pointer",
+        opensMap && "cursor-pointer",
         isExternal ? "border-dashed border-violet-400" : "border-violet-500"
       ),
       style: {
@@ -6108,7 +6154,7 @@ var System_default = memo27(function SystemNode({ data }) {
           mode === "full" && summary && /* @__PURE__ */ jsx30(
             "div",
             {
-              className: classNames18(
+              className: classNames17(
                 "mt-1.5 text-[9px] text-[rgb(var(--ec-page-text-muted))] leading-relaxed overflow-hidden"
               ),
               style: LINE_CLAMP_STYLE,
@@ -6243,8 +6289,8 @@ var GroupNode_default = memo28(function GroupNode({ data }) {
 });
 
 // src/nodes/Custom.tsx
-import { memo as memo29, useMemo as useMemo11 } from "react";
-import { Handle as Handle23, Position as Position21, useNodeConnections as useNodeConnections12 } from "@xyflow/react";
+import { memo as memo29, useMemo as useMemo12 } from "react";
+import { Handle as Handle23, Position as Position21, useNodeConnections as useNodeConnections13 } from "@xyflow/react";
 import * as Icons from "@heroicons/react/24/solid";
 import * as ContextMenu4 from "@radix-ui/react-context-menu";
 import { jsx as jsx32, jsxs as jsxs30 } from "react/jsx-runtime";
@@ -6378,13 +6424,13 @@ var PALETTES = {
     pillBorder: "#f43f5e"
   }
 };
-function classNames19(...classes) {
+function classNames18(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 function getPalette(color) {
   return PALETTES[color || "blue"] ?? PALETTES.blue;
 }
-function GlowHandle16({
+function GlowHandle18({
   side,
   gradient
 }) {
@@ -6423,17 +6469,17 @@ var Custom_default = memo29(function CustomNode({ data, selected }) {
     height = 5
   } = customProps;
   const palette = getPalette(color);
-  const IconComponent = useMemo11(() => Icons[icon] || Icons.CubeIcon, [icon]);
+  const IconComponent = useMemo12(() => Icons[icon] || Icons.CubeIcon, [icon]);
   const portalContainer = usePortalContainer();
-  const targetConnections = useNodeConnections12({ handleType: "target" });
-  const sourceConnections = useNodeConnections12({ handleType: "source" });
+  const targetConnections = useNodeConnections13({ handleType: "target" });
+  const sourceConnections = useNodeConnections13({ handleType: "source" });
   const propertyEntries = Object.entries(properties);
   const contextMenuItems = url ? [{ label: `Open ${type.toLowerCase()}`, url }, ...menu] : menu;
   return /* @__PURE__ */ jsxs30(ContextMenu4.Root, { children: [
     /* @__PURE__ */ jsx32(ContextMenu4.Trigger, { children: /* @__PURE__ */ jsxs30(
       "div",
       {
-        className: classNames19(
+        className: classNames18(
           "relative min-w-48 max-w-60 rounded-xl border-2 overflow-visible",
           selected ? palette.ring : "",
           palette.border
@@ -6460,12 +6506,12 @@ var Custom_default = memo29(function CustomNode({ data, selected }) {
               style: HIDDEN_HANDLE_STYLE
             }
           ),
-          targetConnections.length > 0 && /* @__PURE__ */ jsx32(GlowHandle16, { side: "left", gradient: palette.glow }),
-          sourceConnections.length > 0 && /* @__PURE__ */ jsx32(GlowHandle16, { side: "right", gradient: palette.glow }),
+          targetConnections.length > 0 && /* @__PURE__ */ jsx32(GlowHandle18, { side: "left", gradient: palette.glow }),
+          sourceConnections.length > 0 && /* @__PURE__ */ jsx32(GlowHandle18, { side: "right", gradient: palette.glow }),
           /* @__PURE__ */ jsx32("div", { className: "absolute -top-3 left-2.5 z-10", children: /* @__PURE__ */ jsxs30(
             "span",
             {
-              className: classNames19(
+              className: classNames18(
                 "inline-flex items-center gap-1 text-[7px] font-bold uppercase tracking-widest text-white px-1.5 py-0.5 rounded shadow-sm",
                 palette.badge
               ),
@@ -6571,9 +6617,9 @@ var ExternalSystem2_default = memo30(function ExternalSystemNode(props) {
 // src/nodes/DataProduct.tsx
 import { memo as memo31 } from "react";
 import { Package } from "lucide-react";
-import { Handle as Handle25, Position as Position23, useNodeConnections as useNodeConnections13 } from "@xyflow/react";
+import { Handle as Handle25, Position as Position23, useNodeConnections as useNodeConnections14 } from "@xyflow/react";
 import { jsx as jsx34, jsxs as jsxs32 } from "react/jsx-runtime";
-function GlowHandle17({ side }) {
+function GlowHandle19({ side }) {
   return /* @__PURE__ */ jsx34(
     "div",
     {
@@ -6595,7 +6641,7 @@ function GlowHandle17({ side }) {
     }
   );
 }
-function classNames20(...classes) {
+function classNames19(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 function PostItDataProduct(props) {
@@ -6605,7 +6651,7 @@ function PostItDataProduct(props) {
   return /* @__PURE__ */ jsxs32(
     "div",
     {
-      className: classNames20(
+      className: classNames19(
         "relative min-w-44 max-w-56 min-h-[120px]",
         props?.selected ? "ring-2 ring-indigo-400/60 ring-offset-1" : ""
       ),
@@ -6682,7 +6728,7 @@ function PostItDataProduct(props) {
                 as: "div",
                 value: name,
                 tooltipBorderColor: "#6366f1",
-                className: classNames20(
+                className: classNames19(
                   "text-[13px] font-bold leading-snug min-w-0 truncate",
                   deprecated ? "text-indigo-950/40 line-through" : "text-indigo-950"
                 ),
@@ -6712,14 +6758,14 @@ 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 = useNodeConnections13({ handleType: "target" });
-  const sourceConnections = useNodeConnections13({ handleType: "source" });
+  const targetConnections = useNodeConnections14({ handleType: "target" });
+  const sourceConnections = useNodeConnections14({ handleType: "source" });
   const isDark = useDarkMode();
   const deprecatedStripe = isDark ? "rgba(239,68,68,0.25)" : "rgba(239,68,68,0.1)";
   return /* @__PURE__ */ jsxs32(
     "div",
     {
-      className: classNames20(
+      className: classNames19(
         "relative min-w-48 max-w-60 rounded-xl border-2 overflow-visible",
         props?.selected ? "ring-2 ring-indigo-400/60 ring-offset-2" : "",
         deprecated ? "border-dashed border-red-500" : draft ? `border-dashed ${isDark ? "border-indigo-400" : "border-indigo-400/60"}` : "border-indigo-500"
@@ -6746,12 +6792,12 @@ function DefaultDataProduct(props) {
           }
         ),
         notes && notes.length > 0 && /* @__PURE__ */ jsx34(NotesIndicator, { notes, resourceName: name }),
-        targetConnections.length > 0 && /* @__PURE__ */ jsx34(GlowHandle17, { side: "left" }),
-        sourceConnections.length > 0 && /* @__PURE__ */ jsx34(GlowHandle17, { side: "right" }),
+        targetConnections.length > 0 && /* @__PURE__ */ jsx34(GlowHandle19, { side: "left" }),
+        sourceConnections.length > 0 && /* @__PURE__ */ jsx34(GlowHandle19, { side: "right" }),
         /* @__PURE__ */ jsx34("div", { className: "absolute -top-2.5 left-2.5 flex items-center gap-1.5 z-10", children: /* @__PURE__ */ jsxs32(
           "span",
           {
-            className: classNames20(
+            className: classNames19(
               "inline-flex items-center gap-1 text-[7px] font-bold uppercase tracking-widest text-white px-1.5 py-0.5 rounded shadow-sm",
               deprecated ? "bg-red-500" : "bg-indigo-500"
             ),
@@ -6813,9 +6859,9 @@ var DataProduct_default = memo31(function DataProductNode(props) {
 });
 
 // src/nodes/message-group/MessageGroupNode.tsx
-import { memo as memo32, useMemo as useMemo12 } from "react";
+import { memo as memo32, useMemo as useMemo13 } from "react";
 import { Layers, Zap as Zap3, Terminal, HelpCircle, Maximize2 as Maximize22 } from "lucide-react";
-import { Handle as Handle26, Position as Position24, useNodeConnections as useNodeConnections14 } from "@xyflow/react";
+import { Handle as Handle26, Position as Position24, useNodeConnections as useNodeConnections15 } from "@xyflow/react";
 import { jsx as jsx35, jsxs as jsxs33 } from "react/jsx-runtime";
 var TYPE_ICONS = {
   events: Zap3,
@@ -6831,10 +6877,10 @@ var CARD_STYLE2 = {
 var MessageGroupNode_default = memo32(function MessageGroupNode(props) {
   const { groupName, messageCount } = props.data;
   const isDark = useDarkMode();
-  const targetConnections = useNodeConnections14({ handleType: "target" });
-  const sourceConnections = useNodeConnections14({ handleType: "source" });
+  const targetConnections = useNodeConnections15({ handleType: "target" });
+  const sourceConnections = useNodeConnections15({ handleType: "source" });
   const stackDepth = messageCount >= 3 ? 3 : messageCount;
-  const typeBreakdown = useMemo12(() => {
+  const typeBreakdown = useMemo13(() => {
     const counts = {};
     props.data.messages.forEach(({ message }) => {
       const type = message?.collection || "unknown";
@@ -7109,7 +7155,7 @@ var MessageGroupExpandedNode_default = memo33(function MessageGroupExpandedNode(
 });
 
 // src/edges/AnimatedMessageEdge.tsx
-import { memo as memo34, useMemo as useMemo13 } from "react";
+import { memo as memo34, useMemo as useMemo14 } from "react";
 import { BaseEdge, getSmoothStepPath } from "@xyflow/react";
 
 // src/edges/EdgeLabel.tsx
@@ -7340,9 +7386,9 @@ var AnimatedMessageEdge = memo34(
     const customColor = data?.customColor || messageColor(collection ?? "default");
     const warning = data?.warning;
     const customColors = Array.isArray(customColor) ? customColor : [customColor];
-    const randomDelay = useMemo13(() => Math.random() * 1, []);
+    const randomDelay = useMemo14(() => Math.random() * 1, []);
     const opacityClass = opacity === 1 ? "z-30 opacity-100" : "z-30 opacity-10";
-    const animatedNodes = useMemo13(
+    const animatedNodes = useMemo14(
       () => customColors.map((color, index) => {
         const delay = randomDelay + index * 0.3;
         return /* @__PURE__ */ jsx38(
@@ -7494,7 +7540,7 @@ var MultilineEdgeLabel_default = memo35(function MultilineEdgeLabel(props) {
 });
 
 // src/edges/FlowEdge.tsx
-import { memo as memo36, useMemo as useMemo14 } from "react";
+import { memo as memo36, useMemo as useMemo15 } from "react";
 import {
   BaseEdge as BaseEdge2,
   EdgeLabelRenderer as EdgeLabelRenderer2,
@@ -7553,15 +7599,15 @@ var FlowEdge_default = memo36(function CustomEdge({
       targetPosition
     })
   );
-  const randomDelay = useMemo14(() => Math.random() * 1, []);
+  const randomDelay = useMemo15(() => Math.random() * 1, []);
   const collection = data?.message?.collection;
   const opacity = data?.opacity ?? 1;
-  const mergedStyle = useMemo14(
+  const mergedStyle = useMemo15(
     () => ({ ...EDGE_FLOW_BASE_STYLE, ...style }),
     [style]
   );
   const crossDomain = isCrossDomain(data);
-  const labelPositionStyle = useMemo14(
+  const labelPositionStyle = useMemo15(
     () => ({
       position: "absolute",
       transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
@@ -8298,7 +8344,7 @@ import {
   useEffect as useEffect5,
   useLayoutEffect,
   useCallback as useCallback7,
-  useMemo as useMemo15,
+  useMemo as useMemo16,
   useRef as useRef5,
   memo as memo38
 } from "react";
@@ -8513,7 +8559,7 @@ var StepWalkthrough_default = memo38(function StepWalkthrough({
     edgeKeyRef.current = computedEdgeKey;
   }
   const edgeKey = edgeKeyRef.current;
-  const nodesById = useMemo15(
+  const nodesById = useMemo16(
     () => new Map(nodes.map((node) => [node.id, node])),
     [nodeIdsKey]
   );
@@ -8536,7 +8582,7 @@ var StepWalkthrough_default = memo38(function StepWalkthrough({
     })).filter((path) => !!path.targetNode) : [],
     [edgeKey, nodesById]
   );
-  const availablePaths = useMemo15(
+  const availablePaths = useMemo16(
     () => pathsFrom(currentNodeId),
     [pathsFrom, currentNodeId]
   );
@@ -8554,11 +8600,11 @@ var StepWalkthrough_default = memo38(function StepWalkthrough({
     },
     [pathsFrom]
   );
-  const totalSteps = useMemo15(
+  const totalSteps = useMemo16(
     () => currentNodeId ? trail.length + stepsAfter(currentNodeId, trail) : 0,
     [trail, currentNodeId, stepsAfter]
   );
-  const startSteps = useMemo15(
+  const startSteps = useMemo16(
     () => startNodeId ? 1 + stepsAfter(startNodeId, [startNodeId]) : 0,
     [startNodeId, stepsAfter]
   );
@@ -8609,7 +8655,7 @@ var StepWalkthrough_default = memo38(function StepWalkthrough({
     return () => window.removeEventListener("keydown", onKeyDown);
   }, [isWalking, availablePaths, next, previous, finish]);
   const currentNode = currentNodeId ? nodesById.get(currentNodeId) : void 0;
-  const info = useMemo15(
+  const info = useMemo16(
     () => currentNode ? getStepInfo(currentNode) : void 0,
     [currentNode]
   );
@@ -8626,7 +8672,7 @@ var StepWalkthrough_default = memo38(function StepWalkthrough({
       !!info?.detail || !!title && title.scrollWidth > title.clientWidth || !!summary && summary.scrollHeight > summary.clientHeight + 1
     );
   }, [info, expanded]);
-  const startInfo = useMemo15(() => {
+  const startInfo = useMemo16(() => {
     const startNode = startNodeId ? nodesById.get(startNodeId) : void 0;
     return startNode ? getStepInfo(startNode) : void 0;
   }, [startNodeId, nodesById]);
@@ -9964,7 +10010,7 @@ import {
 
 // src/components/FocusMode/FocusModeContent.tsx
 import {
-  useMemo as useMemo16,
+  useMemo as useMemo17,
   useCallback as useCallback8,
   useEffect as useEffect7,
   useState as useState9,
@@ -10223,7 +10269,7 @@ var FocusModeContent = ({
     },
     [allNodes, allEdges]
   );
-  const initialGraph = useMemo16(
+  const initialGraph = useMemo17(
     () => calculateFocusedGraph(centerNodeId),
     [centerNodeId, calculateFocusedGraph]
   );
@@ -10304,7 +10350,7 @@ var FocusModeContent = ({
   const handleEdgeMouseLeave = useCallback8(() => {
     setHoveredEdgeId(null);
   }, []);
-  const edgesWithHover = useMemo16(() => {
+  const edgesWithHover = useMemo17(() => {
     return displayEdges.map((edge) => {
       if (edge.id === hoveredEdgeId) {
         return {
@@ -10315,7 +10361,7 @@ var FocusModeContent = ({
       return edge;
     });
   }, [displayEdges, hoveredEdgeId]);
-  const mergedNodeTypes = useMemo16(
+  const mergedNodeTypes = useMemo17(
     () => ({
       ...nodeTypes,
       placeholder: FocusModePlaceholder_default
@@ -13558,7 +13604,7 @@ var NodeGraphBuilder = ({
       setBuildUrlFn(onBuildUrl);
     }
   }, []);
-  const nodeTypes = useMemo17(() => {
+  const nodeTypes = useMemo18(() => {
     const wrapWithContextMenu = (Component) => {
       const Wrapped = (props) => {
         const items = props.data?.contextMenu;
@@ -13623,7 +13669,7 @@ var NodeGraphBuilder = ({
       ])
     );
   }, []);
-  const edgeTypes2 = useMemo17(
+  const edgeTypes2 = useMemo18(
     () => ({
       animated: AnimatedMessageEdge_default,
       multiline: MultilineEdgeLabel_default,
@@ -13764,15 +13810,15 @@ var NodeGraphBuilder = ({
     );
     hoveredNodePeersRef.current = [];
   }, []);
-  const hasChannels = useMemo17(
+  const hasChannels = useMemo18(
     () => initialNodes.some((node) => node.type === "channels"),
     [initialNodes]
   );
-  const hasMessages = useMemo17(
+  const hasMessages = useMemo18(
     () => initialNodes.some(isMessageNode),
     [initialNodes]
   );
-  const isFlowGraph = useMemo17(
+  const isFlowGraph = useMemo18(
     () => initialEdges.some((edge) => edge.type === "flow-edge"),
     [initialEdges]
   );
@@ -13799,19 +13845,19 @@ var NodeGraphBuilder = ({
     unlanedGraphRef.current = unlaned;
     return layoutSwimlanes(unlaned, groupBy, { sizeOf: renderedSizeOf });
   }, []);
-  const hasLevels = useMemo17(
+  const hasLevels = useMemo18(
     () => initialNodes.some(
       (node) => LEVEL_NODE_TYPES.includes(node.type || "")
     ),
     [initialNodes]
   );
-  const isContextGraph = useMemo17(
+  const isContextGraph = useMemo18(
     () => initialNodes.every(
       (node) => CONTEXT_NODE_TYPES.includes(node.type || "")
     ),
     [initialNodes]
   );
-  const hasOtherDomains = useMemo17(
+  const hasOtherDomains = useMemo18(
     () => mode === "full" && initialNodes.some((node) => !!node.data?.otherDomain),
     [initialNodes, mode]
   );
@@ -13860,7 +13906,7 @@ var NodeGraphBuilder = ({
     }),
     [onShowOverview, getNodes, getEdges, getViewport]
   );
-  const levels = useMemo17(() => {
+  const levels = useMemo18(() => {
     if (isFlowGraph) return [];
     if (!overviewLabel && !isContextGraph && !hasLevels) return [];
     const selectDetailLevel = (level) => {
@@ -13902,7 +13948,7 @@ var NodeGraphBuilder = ({
     setDetailLevel,
     switchGraph
   ]);
-  const canvasTools = useMemo17(
+  const canvasTools = useMemo18(
     () => hasOtherDomains ? [
       {
         label: highlightCrossDomain ? "Stop highlighting cross-domain communication" : "Highlight cross-domain communication",
@@ -13929,7 +13975,7 @@ var NodeGraphBuilder = ({
     walkthroughKeyRef.current = computedWalkthroughKey;
   }
   const walkthroughKey = walkthroughKeyRef.current;
-  const { walkthroughNodes, walkthroughEdges } = useMemo17(() => {
+  const { walkthroughNodes, walkthroughEdges } = useMemo18(() => {
     const wrapperNodeIds = new Set(
       nodes.filter((n) => isExpandedWrapper(n.type) || isSwimlaneNode(n)).map((n) => n.id)
     );
@@ -14760,12 +14806,12 @@ var NodeGraphBuilder = ({
     legendKeyRef.current = computedLegendKey;
   }
   const legendKey = legendKeyRef.current;
-  const graphLegend = useMemo17(
+  const graphLegend = useMemo18(
     () => getNodesByCollectionWithColors(nodes),
     [getNodesByCollectionWithColors, legendKey]
   );
   const legendEntries = useRef9(null);
-  const legend = useMemo17(() => {
+  const legend = useMemo18(() => {
     legendEntries.current ?? (legendEntries.current = getNodesByCollectionWithColors(initialNodes));
     Object.assign(legendEntries.current, graphLegend);
     return Object.fromEntries(
@@ -14781,11 +14827,11 @@ var NodeGraphBuilder = ({
     nodeIdsKeyRef.current = computedNodeIdsKey;
   }
   const nodeIdsKey = nodeIdsKeyRef.current;
-  const searchNodes = useMemo17(
+  const searchNodes = useMemo18(
     () => nodes.filter((node) => !isSwimlaneNode(node)),
     [nodeIdsKey]
   );
-  const allNoteGroups = useMemo17(() => {
+  const allNoteGroups = useMemo18(() => {
     const groups = [];
     for (const node of nodes) {
       const result = getNotesFromNode(node);
@@ -14800,7 +14846,7 @@ var NodeGraphBuilder = ({
     }
     return groups;
   }, [nodeIdsKey]);
-  const totalNotesCount = useMemo17(
+  const totalNotesCount = useMemo18(
     () => allNoteGroups.reduce((sum, g) => sum + g.notes.length, 0),
     [allNoteGroups]
   );
@@ -14882,13 +14928,13 @@ var NodeGraphBuilder = ({
     },
     [setNodes, setEdges, resetNodesAndEdges, setViewport, storeApi]
   );
-  const swimlaneOptions = useMemo17(
+  const swimlaneOptions = useMemo18(
     () => isFlowGraph ? FLOW_GROUP_BYS.filter(
       (groupBy) => hasSwimlanes(initialNodes, groupBy)
     ) : [],
     [isFlowGraph, initialNodes]
   );
-  const swimlaneCounts = useMemo17(
+  const swimlaneCounts = useMemo18(
     () => Object.fromEntries(
       swimlaneOptions.map((groupBy) => [
         groupBy,
@@ -15659,6 +15705,7 @@ export {
   DATA,
   DataNode_default as Data,
   DataProduct_default as DataProductNode,
+  DomainCard_default as DomainCardNode,
   Domain_default as DomainNode,
   ENTITY_TARGET_HANDLE_ID,
   EVENT,