@eventcatalog/visualiser 4.1.4 → 4.1.5

package/dist/index.mjs

@@ -5841,6 +5841,7 @@ var System_default = memo26(function SystemNode({ data }) {
   const { id, version, name, summary, scope } = system;
   const isExternal = scope === "external";
   const isDark = useDarkMode();
+  const isFlowStep = Boolean(data.step);
   const stats = [
     { icon: ServerIcon2, label: "Services", count: servicesCount },
     { icon: MessageSquareIcon, label: "Messages", count: messagesCount },
@@ -5854,15 +5855,18 @@ var System_default = memo26(function SystemNode({ data }) {
   return /* @__PURE__ */ jsxs27(
     "div",
     {
-      role: "button",
-      tabIndex: 0,
-      onClick: goToMap,
-      onKeyDown: (e) => {
-        if (e.key === "Enter" || e.key === " ") goToMap();
+      ...isFlowStep ? {} : {
+        role: "button",
+        tabIndex: 0,
+        onClick: goToMap,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") goToMap();
+        },
+        title: `Open the ${name} map`
       },
-      title: `Open the ${name} map`,
       className: classNames18(
-        "relative min-w-48 max-w-60 rounded-xl border-2 overflow-visible cursor-pointer",
+        "relative min-w-48 max-w-60 rounded-xl border-2 overflow-visible",
+        !isFlowStep && "cursor-pointer",
         isExternal ? "border-dashed border-violet-400" : "border-violet-500"
       ),
       style: {
@@ -8999,6 +9003,8 @@ var NODE_SHAPE_MAP = {
   flows: ["([", "])"],
   // stadium (rounded)
   flow: ["([", "])"],
+  systems: ["[[", "]]"],
+  system: ["[[", "]]"],
   step: ["[", "]"],
   // rectangle
   user: ["((", "))"],
@@ -9048,6 +9054,8 @@ var NODE_STYLE_CLASSES = {
   domain: "fill:#eab308,stroke:#a16207,color:#000",
   flows: "fill:#14b8a6,stroke:#0f766e,color:#fff",
   flow: "fill:#14b8a6,stroke:#0f766e,color:#fff",
+  systems: "fill:#8b5cf6,stroke:#6d28d9,color:#fff",
+  system: "fill:#8b5cf6,stroke:#6d28d9,color:#fff",
   step: "fill:#374151,stroke:#1f2937,color:#fff",
   user: "fill:#8b5cf6,stroke:#6d28d9,color:#fff",
   actor: "fill:#eab308,stroke:#a16207,color:#000",
@@ -9119,6 +9127,12 @@ function getNodeLabel(node) {
     const version = domainData?.version || domain?.version;
     return formatLabelWithVersion(name, version);
   }
+  if (type === "systems" || type === "system") {
+    const system = data.system;
+    const name = system?.name || system?.id || node.id;
+    const version = system?.data?.version || system?.version;
+    return formatLabelWithVersion(name, version);
+  }
   if (type === "flows" || type === "flow") {
     const flow = data.flow;
     const name = flow?.name || flow?.id || node.id;