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

package/dist/index.js

@@ -46,6 +46,7 @@ __export(index_exports, {
   DATA: () => DATA,
   Data: () => DataNode_default,
   DataProductNode: () => DataProduct_default,
+  DomainCardNode: () => DomainCard_default,
   DomainNode: () => Domain_default,
   ENTITY_TARGET_HANDLE_ID: () => ENTITY_TARGET_HANDLE_ID,
   EVENT: () => EVENT,
@@ -257,6 +258,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")
 };
@@ -3763,29 +3765,63 @@ var import_react26 = require("react");
 var import_lucide_react14 = require("lucide-react");
 var import_react27 = require("@xyflow/react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
-function classNames9(...classes) {
-  return classes.filter(Boolean).join(" ");
-}
+var VIEW_COLOR = "#0ea5e9";
+var GlowHandle13 = (0, import_react26.memo)(function GlowHandle14({
+  side
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "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 = (0, import_react26.memo)(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 = (0, import_react26.useMemo)(() => normalizeOwners(owners), [owners]);
+  const targetConnections = (0, import_react27.useNodeConnections)({ handleType: "target" });
+  const sourceConnections = (0, import_react27.useNodeConnections)({ handleType: "source" });
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "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__ */ (0, import_jsx_runtime15.jsx)(FocusedResourceIndicator, {}),
         /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           import_react27.Handle,
           {
             type: "target",
             position: import_react27.Position.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__ */ (0, import_jsx_runtime15.jsx)(
@@ -3793,53 +3829,59 @@ var ViewNode_default = (0, import_react26.memo)(function View(props) {
           {
             type: "source",
             position: import_react27.Position.Right,
-            className: "!right-[-1px] !w-2.5 !h-2.5 !bg-blue-500 !border !border-blue-600 !rounded-full !z-10"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-          "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__ */ (0, import_jsx_runtime15.jsx)(
-                import_lucide_react14.MonitorIcon,
-                {
-                  className: `w-4 h-4 opacity-90 text-white mt-1 ${mode === "full" ? "mb-2" : "mb-1"}`
-                }
-              ),
-              mode === "full" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                "span",
-                {
-                  className: "text-center text-[8px] text-white font-bold uppercase mb-4",
-                  style: ROTATED_LABEL_STYLE,
-                  children: nodeLabel
-                }
-              )
-            ]
+            style: HIDDEN_HANDLE_STYLE
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "p-1 flex-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "pb-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-xs font-bold block pt-0.5 pb-0.5", children: name }),
-            mode === "simple" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("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__ */ (0, import_jsx_runtime15.jsx)(NotesIndicator, { notes, resourceName: name }),
+        targetConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(GlowHandle13, { side: "left" }),
+        sourceConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(GlowHandle13, { 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", { 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_runtime15.jsx)(import_lucide_react14.MonitorIcon, { className: "w-2.5 h-2.5", strokeWidth: 2.5 }),
+          "View"
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "px-3 pt-3.5 pb-2.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-baseline gap-1 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              TruncatedResourceName,
+              {
+                value: name,
+                tooltipBorderColor: VIEW_COLOR,
+                className: "text-[13px] font-semibold leading-snug text-[rgb(var(--ec-page-text))] truncate",
+                children: name
+              }
+            ),
+            version && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "text-[10px] font-normal text-[rgb(var(--ec-page-text-muted))] shrink-0", children: [
+              "(v",
+              version,
+              ")"
+            ] })
           ] }),
-          summary && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          mode === "full" && summary && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "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__ */ (0, import_jsx_runtime15.jsx)("div", { className: "py-1", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          ),
+          mode === "full" && screenshot && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "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__ */ (0, import_jsx_runtime15.jsx)(
+            OwnerIndicator,
+            {
+              owners: ownersNormalized,
+              accentColor: "bg-sky-400",
+              borderColor: "rgba(14,165,233,0.08)",
+              iconClass: "text-sky-300"
+            }
+          )
         ] })
       ]
     }
@@ -3851,7 +3893,7 @@ var import_react28 = require("react");
 var import_lucide_react15 = require("lucide-react");
 var import_react29 = require("@xyflow/react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
-function GlowHandle13({ side }) {
+function GlowHandle15({ side }) {
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "div",
     {
@@ -3873,7 +3915,7 @@ function GlowHandle13({ side }) {
     }
   );
 }
-function classNames10(...classes) {
+function classNames9(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 function PostItActor(props) {
@@ -3882,7 +3924,7 @@ function PostItActor(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     "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" : ""
       ),
@@ -3950,7 +3992,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"
               ),
@@ -3981,7 +4023,7 @@ function DefaultActor(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     "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"
@@ -4008,12 +4050,12 @@ function DefaultActor(props) {
           }
         ),
         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" }),
+        targetConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GlowHandle15, { side: "left" }),
+        sourceConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GlowHandle15, { side: "right" }),
         /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "absolute -top-2.5 left-2.5 flex items-center gap-1.5 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
           "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"
             ),
@@ -4303,7 +4345,8 @@ var DomainCard_default = (0, import_react36.memo)(function DomainCardNode({ data
     systemsCount = 0,
     servicesCount = 0,
     entitiesCount = 0,
-    subdomain = false
+    subdomain = false,
+    navigable = true
   } = data;
   const { id, version, name, summary } = domain;
   const stats = [
@@ -4315,14 +4358,16 @@ var DomainCard_default = (0, import_react36.memo)(function DomainCardNode({ data
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "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__ */ (0, import_jsx_runtime19.jsx)(
@@ -4394,7 +4439,7 @@ var import_react37 = require("react");
 var import_lucide_react20 = require("lucide-react");
 var import_react38 = require("@xyflow/react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
-function GlowHandle14({ side }) {
+function GlowHandle16({ side }) {
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "div",
     {
@@ -4416,7 +4461,7 @@ function GlowHandle14({ side }) {
     }
   );
 }
-function classNames11(...classes) {
+function classNames10(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 function PostItExternalSystem(props) {
@@ -4425,7 +4470,7 @@ function PostItExternalSystem(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     "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" : ""
       ),
@@ -4493,7 +4538,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"
               ),
@@ -4528,7 +4573,7 @@ function DefaultExternalSystem(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     "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"
@@ -4555,12 +4600,12 @@ function DefaultExternalSystem(props) {
           }
         ),
         notes && notes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(NotesIndicator, { notes, resourceName: name }),
-        targetConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(GlowHandle14, { side: "left" }),
-        sourceConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(GlowHandle14, { side: "right" }),
+        targetConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(GlowHandle16, { side: "left" }),
+        sourceConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(GlowHandle16, { side: "right" }),
         /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "absolute -top-2.5 left-2.5 flex items-center gap-1.5 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
           "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"
             ),
@@ -4679,7 +4724,7 @@ var config_default4 = {
 var import_react40 = require("@xyflow/react");
 var import_react41 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
-function classNames12(...classes) {
+function classNames11(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 var AVAILABLE_COLORS = {
@@ -4846,7 +4891,7 @@ var NoteNode_default = (0, import_react41.memo)(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,
@@ -4860,7 +4905,7 @@ var NoteNode_default = (0, import_react41.memo)(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,
@@ -4879,7 +4924,7 @@ var NoteNode_default = (0, import_react41.memo)(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
@@ -4931,7 +4976,7 @@ var import_react42 = require("react");
 var import_lucide_react22 = require("lucide-react");
 var import_react43 = require("@xyflow/react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
-function GlowHandle15({ side }) {
+function GlowHandle17({ side }) {
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "div",
     {
@@ -4953,7 +4998,7 @@ function GlowHandle15({ side }) {
     }
   );
 }
-function classNames13(...classes) {
+function classNames12(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 var FieldNode_default = (0, import_react42.memo)(function Field(props) {
@@ -4965,7 +5010,7 @@ var FieldNode_default = (0, import_react42.memo)(function Field(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "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"
@@ -4991,8 +5036,8 @@ var FieldNode_default = (0, import_react42.memo)(function Field(props) {
             style: HIDDEN_HANDLE_STYLE
           }
         ),
-        targetConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(GlowHandle15, { side: "left" }),
-        sourceConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(GlowHandle15, { side: "right" }),
+        targetConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(GlowHandle17, { side: "left" }),
+        sourceConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(GlowHandle17, { side: "right" }),
         /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "absolute -top-2.5 left-2.5 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime22.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_runtime22.jsx)(import_lucide_react22.Database, { className: "w-2.5 h-2.5", strokeWidth: 2.5 }),
           "Field"
@@ -5167,7 +5212,7 @@ function getIcon(iconName) {
 
 // src/nodes/Flow.tsx
 var import_jsx_runtime24 = require("react/jsx-runtime");
-function classNames14(...classes) {
+function classNames13(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 var Flow_default = (0, import_react45.memo)(function FlowNode({
@@ -5211,7 +5256,7 @@ var Flow_default = (0, import_react45.memo)(function FlowNode({
           /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
             "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,
@@ -5219,7 +5264,7 @@ var Flow_default = (0, import_react45.memo)(function FlowNode({
                 /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                   "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`
                     ),
@@ -5242,7 +5287,7 @@ var Flow_default = (0, import_react45.memo)(function FlowNode({
                   /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                     "div",
                     {
-                      className: classNames14(
+                      className: classNames13(
                         mode === "full" ? `border-b border-[rgb(var(--ec-page-border))]` : ""
                       ),
                       children: [
@@ -5455,7 +5500,7 @@ var import_react49 = 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";
-function classNames15(...classes) {
+function classNames14(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 var getPropertyTypeLabel = (property) => {
@@ -5538,7 +5583,7 @@ var Entity_default = (0, import_react49.memo)(function EntityNode({
       /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
         "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"
           ),
@@ -5620,7 +5665,7 @@ var Entity_default = (0, import_react49.memo)(function EntityNode({
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ContextMenu2.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
       "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"
         ),
@@ -5628,7 +5673,7 @@ var Entity_default = (0, import_react49.memo)(function EntityNode({
           /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
             "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"
               ),
@@ -5717,7 +5762,7 @@ var import_react50 = require("react");
 var import_solid2 = require("@heroicons/react/20/solid");
 var import_react51 = require("@xyflow/react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
-function classNames16(...classes) {
+function classNames15(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 var User_default = (0, import_react50.memo)(function UserNode({
@@ -5736,7 +5781,7 @@ var User_default = (0, import_react50.memo)(function UserNode({
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     "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]"
       ),
@@ -5745,7 +5790,7 @@ var User_default = (0, import_react50.memo)(function UserNode({
         /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
           "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`
             ),
@@ -5782,7 +5827,7 @@ var User_default = (0, import_react50.memo)(function UserNode({
             /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               "div",
               {
-                className: classNames16(
+                className: classNames15(
                   mode === "full" ? `border-b border-[rgb(var(--ec-page-border))]` : ""
                 ),
                 children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
@@ -5809,7 +5854,7 @@ var User_default = (0, import_react50.memo)(function UserNode({
 var import_react52 = require("react");
 var import_react53 = require("@xyflow/react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
-function classNames17(...classes) {
+function classNames16(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 var Step_default = (0, import_react52.memo)(function StepNode({
@@ -5822,7 +5867,7 @@ var Step_default = (0, import_react52.memo)(function StepNode({
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     "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,
@@ -5830,7 +5875,7 @@ var Step_default = (0, import_react52.memo)(function StepNode({
         /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           "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`
             ),
@@ -5875,7 +5920,7 @@ var Step_default = (0, import_react52.memo)(function StepNode({
             /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               "div",
               {
-                className: classNames17(
+                className: classNames16(
                   mode === "full" ? `border-b border-[rgb(var(--ec-page-border))]` : ""
                 ),
                 children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
@@ -6068,7 +6113,7 @@ var import_react56 = require("@xyflow/react");
 var import_lucide_react27 = require("lucide-react");
 var import_react57 = require("react");
 var import_jsx_runtime30 = require("react/jsx-runtime");
-function classNames18(...classes) {
+function classNames17(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 var System_default = (0, import_react57.memo)(function SystemNode({ data }) {
@@ -6079,12 +6124,14 @@ var System_default = (0, import_react57.memo)(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: import_lucide_react27.Server, label: "Services", count: servicesCount },
     { icon: import_lucide_react27.MessageSquare, label: "Messages", count: messagesCount },
@@ -6098,7 +6145,7 @@ var System_default = (0, import_react57.memo)(function SystemNode({ data }) {
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     "div",
     {
-      ...isFlowStep ? {} : {
+      ...!opensMap ? {} : {
         role: "button",
         tabIndex: 0,
         onClick: goToMap,
@@ -6107,9 +6154,9 @@ var System_default = (0, import_react57.memo)(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: {
@@ -6158,7 +6205,7 @@ var System_default = (0, import_react57.memo)(function SystemNode({ data }) {
           mode === "full" && summary && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "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,
@@ -6428,13 +6475,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
 }) {
@@ -6483,7 +6530,7 @@ var Custom_default = (0, import_react59.memo)(function CustomNode({ data, select
     /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ContextMenu4.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
       "div",
       {
-        className: classNames19(
+        className: classNames18(
           "relative min-w-48 max-w-60 rounded-xl border-2 overflow-visible",
           selected ? palette.ring : "",
           palette.border
@@ -6510,12 +6557,12 @@ var Custom_default = (0, import_react59.memo)(function CustomNode({ data, select
               style: HIDDEN_HANDLE_STYLE
             }
           ),
-          targetConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(GlowHandle16, { side: "left", gradient: palette.glow }),
-          sourceConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(GlowHandle16, { side: "right", gradient: palette.glow }),
+          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 }),
           /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "absolute -top-3 left-2.5 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
             "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
               ),
@@ -6623,7 +6670,7 @@ var import_react63 = require("react");
 var import_lucide_react29 = require("lucide-react");
 var import_react64 = require("@xyflow/react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
-function GlowHandle17({ side }) {
+function GlowHandle19({ side }) {
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     "div",
     {
@@ -6645,7 +6692,7 @@ function GlowHandle17({ side }) {
     }
   );
 }
-function classNames20(...classes) {
+function classNames19(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 function PostItDataProduct(props) {
@@ -6655,7 +6702,7 @@ function PostItDataProduct(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "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" : ""
       ),
@@ -6732,7 +6779,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"
                 ),
@@ -6769,7 +6816,7 @@ function DefaultDataProduct(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "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"
@@ -6796,12 +6843,12 @@ function DefaultDataProduct(props) {
           }
         ),
         notes && notes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(NotesIndicator, { notes, resourceName: name }),
-        targetConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(GlowHandle17, { side: "left" }),
-        sourceConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(GlowHandle17, { side: "right" }),
+        targetConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(GlowHandle19, { side: "left" }),
+        sourceConnections.length > 0 && /* @__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",
           {
-            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"
             ),
@@ -15609,6 +15656,7 @@ var exportNodeGraphForStudio = (data) => {
   DATA,
   Data,
   DataProductNode,
+  DomainCardNode,
   DomainNode,
   ENTITY_TARGET_HANDLE_ID,
   EVENT,