@eventcatalog/visualiser 3.20.0 → 3.20.2

package/dist/index.d.mts

@@ -164,7 +164,7 @@ interface BaseNodeData {
 /**
  * Node types supported by the visualizer
  */
-type NodeType = "service" | "services" | "event" | "events" | "command" | "commands" | "query" | "queries" | "domain" | "domains" | "flow" | "flows" | "channel" | "channels" | "entity" | "entities" | "step" | "user" | "custom" | "externalSystem" | "external-system" | "data" | "view" | "actor" | "data-product" | "data-products" | "note";
+type NodeType = "service" | "services" | "event" | "events" | "command" | "commands" | "query" | "queries" | "domain" | "domains" | "flow" | "flows" | "channel" | "channels" | "entity" | "entities" | "step" | "user" | "custom" | "externalSystem" | "external-system" | "data" | "container" | "view" | "actor" | "data-product" | "data-products" | "note";
 /**
  * Edge types supported by the visualizer
  */

package/dist/index.d.ts

@@ -164,7 +164,7 @@ interface BaseNodeData {
 /**
  * Node types supported by the visualizer
  */
-type NodeType = "service" | "services" | "event" | "events" | "command" | "commands" | "query" | "queries" | "domain" | "domains" | "flow" | "flows" | "channel" | "channels" | "entity" | "entities" | "step" | "user" | "custom" | "externalSystem" | "external-system" | "data" | "view" | "actor" | "data-product" | "data-products" | "note";
+type NodeType = "service" | "services" | "event" | "events" | "command" | "commands" | "query" | "queries" | "domain" | "domains" | "flow" | "flows" | "channel" | "channels" | "entity" | "entities" | "step" | "user" | "custom" | "externalSystem" | "external-system" | "data" | "container" | "view" | "actor" | "data-product" | "data-products" | "note";
 /**
  * Edge types supported by the visualizer
  */

package/dist/index.js

@@ -5088,138 +5088,291 @@ var GroupNode_default = (0, import_react45.memo)(function GroupNode({ data }) {
 });
 
 // src/nodes/Custom.tsx
-var import_react46 = require("@xyflow/react");
+var import_react46 = require("react");
+var import_react47 = require("@xyflow/react");
 var Icons = __toESM(require("@heroicons/react/24/solid"));
-var import_react47 = require("react");
 var ContextMenu4 = __toESM(require("@radix-ui/react-context-menu"));
-var Tooltip = __toESM(require("@radix-ui/react-tooltip"));
 var import_jsx_runtime24 = require("react/jsx-runtime");
+var PALETTES = {
+  blue: {
+    border: "border-blue-500",
+    badge: "bg-blue-500",
+    ring: "ring-2 ring-blue-400/60 ring-offset-2",
+    shadow: "rgba(59, 130, 246, 0.15)",
+    glow: "linear-gradient(135deg, #3b82f6, #2563eb)",
+    pillBorder: "#3b82f6"
+  },
+  teal: {
+    border: "border-teal-500",
+    badge: "bg-teal-500",
+    ring: "ring-2 ring-teal-400/60 ring-offset-2",
+    shadow: "rgba(20, 184, 166, 0.15)",
+    glow: "linear-gradient(135deg, #14b8a6, #0f766e)",
+    pillBorder: "#14b8a6"
+  },
+  red: {
+    border: "border-red-500",
+    badge: "bg-red-500",
+    ring: "ring-2 ring-red-400/60 ring-offset-2",
+    shadow: "rgba(239, 68, 68, 0.15)",
+    glow: "linear-gradient(135deg, #ef4444, #b91c1c)",
+    pillBorder: "#ef4444"
+  },
+  green: {
+    border: "border-green-500",
+    badge: "bg-green-500",
+    ring: "ring-2 ring-green-400/60 ring-offset-2",
+    shadow: "rgba(34, 197, 94, 0.15)",
+    glow: "linear-gradient(135deg, #22c55e, #15803d)",
+    pillBorder: "#22c55e"
+  },
+  purple: {
+    border: "border-purple-500",
+    badge: "bg-purple-500",
+    ring: "ring-2 ring-purple-400/60 ring-offset-2",
+    shadow: "rgba(168, 85, 247, 0.15)",
+    glow: "linear-gradient(135deg, #a855f7, #7e22ce)",
+    pillBorder: "#a855f7"
+  },
+  orange: {
+    border: "border-orange-500",
+    badge: "bg-orange-500",
+    ring: "ring-2 ring-orange-400/60 ring-offset-2",
+    shadow: "rgba(251, 146, 60, 0.15)",
+    glow: "linear-gradient(135deg, #fb923c, #ea580c)",
+    pillBorder: "#fb923c"
+  },
+  pink: {
+    border: "border-pink-500",
+    badge: "bg-pink-500",
+    ring: "ring-2 ring-pink-400/60 ring-offset-2",
+    shadow: "rgba(236, 72, 153, 0.15)",
+    glow: "linear-gradient(135deg, #ec4899, #be185d)",
+    pillBorder: "#ec4899"
+  },
+  yellow: {
+    border: "border-yellow-500",
+    badge: "bg-yellow-500",
+    ring: "ring-2 ring-yellow-400/60 ring-offset-2",
+    shadow: "rgba(234, 179, 8, 0.15)",
+    glow: "linear-gradient(135deg, #eab308, #a16207)",
+    pillBorder: "#eab308"
+  },
+  gray: {
+    border: "border-gray-500",
+    badge: "bg-gray-500",
+    ring: "ring-2 ring-gray-400/60 ring-offset-2",
+    shadow: "rgba(107, 114, 128, 0.15)",
+    glow: "linear-gradient(135deg, #6b7280, #374151)",
+    pillBorder: "#6b7280"
+  },
+  indigo: {
+    border: "border-indigo-500",
+    badge: "bg-indigo-500",
+    ring: "ring-2 ring-indigo-400/60 ring-offset-2",
+    shadow: "rgba(99, 102, 241, 0.15)",
+    glow: "linear-gradient(135deg, #6366f1, #4338ca)",
+    pillBorder: "#6366f1"
+  },
+  cyan: {
+    border: "border-cyan-500",
+    badge: "bg-cyan-500",
+    ring: "ring-2 ring-cyan-400/60 ring-offset-2",
+    shadow: "rgba(6, 182, 212, 0.15)",
+    glow: "linear-gradient(135deg, #06b6d4, #0e7490)",
+    pillBorder: "#06b6d4"
+  },
+  slate: {
+    border: "border-slate-500",
+    badge: "bg-slate-500",
+    ring: "ring-2 ring-slate-400/60 ring-offset-2",
+    shadow: "rgba(100, 116, 139, 0.15)",
+    glow: "linear-gradient(135deg, #64748b, #334155)",
+    pillBorder: "#64748b"
+  },
+  amber: {
+    border: "border-amber-500",
+    badge: "bg-amber-500",
+    ring: "ring-2 ring-amber-400/60 ring-offset-2",
+    shadow: "rgba(245, 158, 11, 0.15)",
+    glow: "linear-gradient(135deg, #f59e0b, #b45309)",
+    pillBorder: "#f59e0b"
+  },
+  emerald: {
+    border: "border-emerald-500",
+    badge: "bg-emerald-500",
+    ring: "ring-2 ring-emerald-400/60 ring-offset-2",
+    shadow: "rgba(16, 185, 129, 0.15)",
+    glow: "linear-gradient(135deg, #10b981, #047857)",
+    pillBorder: "#10b981"
+  },
+  violet: {
+    border: "border-violet-500",
+    badge: "bg-violet-500",
+    ring: "ring-2 ring-violet-400/60 ring-offset-2",
+    shadow: "rgba(139, 92, 246, 0.15)",
+    glow: "linear-gradient(135deg, #8b5cf6, #6d28d9)",
+    pillBorder: "#8b5cf6"
+  },
+  rose: {
+    border: "border-rose-500",
+    badge: "bg-rose-500",
+    ring: "ring-2 ring-rose-400/60 ring-offset-2",
+    shadow: "rgba(244, 63, 94, 0.15)",
+    glow: "linear-gradient(135deg, #f43f5e, #be123c)",
+    pillBorder: "#f43f5e"
+  }
+};
 function classNames16(...classes) {
   return classes.filter(Boolean).join(" ");
 }
-var Custom_default = (0, import_react47.memo)(function UserNode2({
-  data,
-  sourcePosition,
-  targetPosition
+function getPalette(color) {
+  return PALETTES[color || "blue"] ?? PALETTES.blue;
+}
+function GlowHandle14({
+  side,
+  gradient
 }) {
-  const { mode, step, custom: customProps } = data;
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: "50%",
+        [side]: -6,
+        transform: "translateY(-50%)",
+        width: 12,
+        height: 12,
+        borderRadius: "50%",
+        background: gradient,
+        border: "2px solid rgb(var(--ec-page-bg))",
+        zIndex: 20,
+        animation: "ec-handle-pulse 2s ease-in-out infinite",
+        pointerEvents: "none"
+      }
+    }
+  );
+}
+var Custom_default = (0, import_react46.memo)(function CustomNode({ data, selected }) {
+  const { mode, custom: customProps, step } = data;
   const {
     color = "blue",
-    title = "Custom",
-    icon = "UserIcon",
-    type = "custom",
-    summary = "",
-    url: _url = "",
+    title = step?.title || "Custom",
+    icon = "CubeIcon",
+    type = "Custom",
+    summary = step?.summary || "",
+    url,
     properties = EMPTY_OBJECT,
     menu = EMPTY_ARRAY,
     height = 5
   } = customProps;
-  const IconComponent = (0, import_react47.useMemo)(() => Icons[icon], [icon]);
-  const { actor: { name: _name } = {} } = step;
-  const isLongType = type && type.length > 10;
-  const displayType = isLongType ? `${type.substring(0, 10)}...` : type;
+  const palette = getPalette(color);
+  const IconComponent = (0, import_react46.useMemo)(() => Icons[icon] || Icons.CubeIcon, [icon]);
   const portalContainer = usePortalContainer();
+  const targetConnections = (0, import_react47.useNodeConnections)({ handleType: "target" });
+  const sourceConnections = (0, import_react47.useNodeConnections)({ handleType: "source" });
+  const propertyEntries = Object.entries(properties);
+  const contextMenuItems = url ? [{ label: `Open ${type.toLowerCase()}`, url }, ...menu] : menu;
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(ContextMenu4.Root, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ContextMenu4.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
       "div",
       {
         className: classNames16(
-          `rounded-md border flex justify-start bg-[rgb(var(--ec-card-bg))] text-[rgb(var(--ec-page-text))] border-${color}-400`
+          "relative min-w-48 max-w-60 rounded-xl border-2 overflow-visible",
+          selected ? palette.ring : "",
+          palette.border
         ),
         style: {
-          minHeight: mode === "full" ? `${height}em` : "2em",
-          ...NODE_WIDTH_STYLE
+          background: "var(--ec-custom-node-bg, rgb(var(--ec-card-bg)))",
+          boxShadow: `0 2px 12px ${palette.shadow}`,
+          minHeight: mode === "full" ? `${height}em` : void 0
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-            "div",
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            import_react47.Handle,
+            {
+              type: "target",
+              position: import_react47.Position.Left,
+              style: HIDDEN_HANDLE_STYLE
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            import_react47.Handle,
+            {
+              type: "source",
+              position: import_react47.Position.Right,
+              style: HIDDEN_HANDLE_STYLE
+            }
+          ),
+          targetConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GlowHandle14, { side: "left", gradient: palette.glow }),
+          sourceConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GlowHandle14, { side: "right", gradient: palette.glow }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "absolute -top-3 left-2.5 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+            "span",
             {
               className: classNames16(
-                `bg-gradient-to-b from-${color}-400 to-${color}-600 relative flex flex-col items-center w-5 justify-between rounded-l-sm text-orange-100-500`,
-                `border-r-[1px] border-${color}`
+                "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
               ),
               children: [
-                IconComponent && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconComponent, { className: "w-4 h-4 opacity-90 text-white mt-1" }),
-                mode === "full" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Tooltip.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Tooltip.Root, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-                    "span",
-                    {
-                      className: "text-center text-[9px] text-white font-bold uppercase mb-4",
-                      style: ROTATED_LABEL_STYLE,
-                      children: displayType
-                    }
-                  ) }),
-                  isLongType && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Tooltip.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-                    Tooltip.Content,
-                    {
-                      className: "bg-slate-800 text-white rounded px-2 py-1 text-xs shadow-md z-50",
-                      side: "right",
-                      sideOffset: 5,
-                      children: [
-                        type,
-                        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Tooltip.Arrow, { className: "fill-slate-800" })
-                      ]
-                    }
-                  ) })
-                ] }) })
+                IconComponent && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconComponent, { className: "w-2.5 h-2.5", "aria-hidden": true }),
+                type
               ]
             }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "p-1 flex-1", 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 }),
-            (!summary || mode !== "full") && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-full ", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-sm font-bold block pb-0.5 w-full", children: title }) }),
-            summary && mode === "full" && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "px-3 pt-3.5 pb-2.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-[13px] font-semibold leading-snug text-[rgb(var(--ec-page-text))] truncate", children: title }) }),
+            mode === "full" && summary && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              "div",
+              {
+                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
+              }
+            ),
+            mode === "full" && propertyEntries.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "mt-2 pt-1.5 border-t border-[rgb(var(--ec-page-border))] grid grid-cols-2 gap-x-2 gap-y-1", children: propertyEntries.map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "text-[7px] font-bold uppercase tracking-wide text-[rgb(var(--ec-page-text-muted))] truncate", children: key }),
+              typeof value === "string" && value.startsWith("http") ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                "a",
+                {
+                  href: value,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: "block text-[8px] text-blue-500 underline truncate",
+                  title: value,
+                  children: value
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                 "div",
                 {
-                  className: classNames16(
-                    mode === "full" ? `border-b border-[rgb(var(--ec-page-border))]` : ""
-                  ),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-xs font-bold block pb-0.5", children: title })
+                  className: "text-[8px] text-[rgb(var(--ec-page-text))] truncate",
+                  title: String(value),
+                  children: value
                 }
-              ),
-              mode === "full" && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] ", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "leading-3 py-1", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-[8px] font-light", children: summary }) }),
-                properties && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "grid grid-cols-2 gap-x-4 py-1", children: Object.entries(properties).map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-                  "span",
-                  {
-                    className: "text-xs",
-                    style: TINY_FONT_STYLE,
-                    children: [
-                      key,
-                      ":",
-                      " ",
-                      typeof value === "string" && value.startsWith("http") ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-                        "a",
-                        {
-                          href: value,
-                          target: "_blank",
-                          rel: "noopener noreferrer",
-                          className: "text-blue-500 underline",
-                          children: value
-                        }
-                      ) : value
-                    ]
-                  },
-                  key
-                )) })
-              ] })
-            ] })
+              )
+            ] }, key)) })
           ] })
         ]
       }
     ) }),
-    menu?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ContextMenu4.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ContextMenu4.Content, { className: "min-w-[220px] bg-[rgb(var(--ec-card-bg))] rounded-md p-1 shadow-md border border-[rgb(var(--ec-page-border))]", children: menu?.map((item) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-        ContextMenu4.Item,
-        {
-          asChild: true,
-          className: "text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center",
-          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("a", { href: item.url, children: item.label })
-        }
-      );
-    }) }) })
+    contextMenuItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ContextMenu4.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ContextMenu4.Content, { className: "min-w-[220px] bg-[rgb(var(--ec-card-bg))] rounded-md p-1 shadow-md border border-[rgb(var(--ec-page-border))]", children: contextMenuItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      ContextMenu4.Item,
+      {
+        asChild: true,
+        className: "text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center",
+        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          "a",
+          {
+            href: item.url,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "text-[rgb(var(--ec-page-text))] no-underline",
+            children: item.label
+          }
+        )
+      },
+      `${item.label}-${item.url || ""}`
+    )) }) })
   ] });
 });
 
@@ -5256,7 +5409,7 @@ var import_react50 = require("react");
 var import_lucide_react22 = require("lucide-react");
 var import_react51 = require("@xyflow/react");
 var import_jsx_runtime26 = require("react/jsx-runtime");
-function GlowHandle14({ side }) {
+function GlowHandle15({ side }) {
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "div",
     {
@@ -5425,8 +5578,8 @@ function DefaultDataProduct(props) {
           }
         ),
         notes && notes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(NotesIndicator, { notes, resourceName: name }),
-        targetConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(GlowHandle14, { side: "left" }),
-        sourceConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(GlowHandle14, { side: "right" }),
+        targetConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(GlowHandle15, { side: "left" }),
+        sourceConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(GlowHandle15, { side: "right" }),
         /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "absolute -top-2.5 left-2.5 flex items-center gap-1.5 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
           "span",
           {