@eventcatalog/visualiser 3.17.1 → 3.18.1

package/dist/index.mjs

@@ -35,7 +35,7 @@ import { toPng } from "html-to-image";
 
 // src/nodes/service/ServiceNode.tsx
 import { memo as memo3, useMemo } from "react";
-import { ServerIcon } from "lucide-react";
+import { ServerIcon, Globe } from "lucide-react";
 
 // src/nodes/OwnerIndicator.tsx
 import { memo } from "react";
@@ -1047,7 +1047,8 @@ var ServiceMessageFlow = memo3(function ServiceMessageFlow2({
   );
 });
 var GlowHandle = memo3(function GlowHandle2({
-  side
+  side,
+  external
 }) {
   return /* @__PURE__ */ jsx3(
     "div",
@@ -1060,10 +1061,10 @@ var GlowHandle = memo3(function GlowHandle2({
         width: 12,
         height: 12,
         borderRadius: "50%",
-        background: "linear-gradient(135deg, #ec4899, #be185d)",
+        background: external ? "linear-gradient(135deg, #a855f7, #7e22ce)" : "linear-gradient(135deg, #ec4899, #be185d)",
         border: "2px solid rgb(var(--ec-page-bg))",
         zIndex: 20,
-        animation: "ec-service-handle-pulse 2s ease-in-out infinite",
+        animation: external ? "ec-external-handle-pulse 2s ease-in-out infinite" : "ec-service-handle-pulse 2s ease-in-out infinite",
         pointerEvents: "none"
       }
     }
@@ -1072,16 +1073,86 @@ var GlowHandle = memo3(function GlowHandle2({
 function classNames(...classes) {
   return classes.filter(Boolean).join(" ");
 }
+var POST_IT_SERVICE = {
+  Icon: ServerIcon,
+  label: "Service",
+  gradient: "linear-gradient(135deg, #fbcfe8 0%, #f9a8d4 40%, #ec4899 100%)",
+  draftBorder: "rgba(236, 72, 153, 0.5)",
+  corner: "#db2777",
+  ring: "ring-2 ring-pink-400/60 ring-offset-1",
+  iconClass: "w-3 h-3 text-pink-900/50",
+  labelClass: "text-[8px] font-bold text-pink-900/50 uppercase tracking-widest",
+  nameText: "text-pink-950",
+  nameTextDeprecated: "text-pink-950/40 line-through",
+  versionClass: "text-[9px] text-pink-900/40 font-semibold mt-0.5",
+  summaryClass: "mt-2 pt-1.5 border-t border-pink-900/10 text-[9px] text-pink-950/60 leading-relaxed overflow-hidden"
+};
+var POST_IT_EXTERNAL = {
+  Icon: Globe,
+  label: "External System",
+  gradient: "linear-gradient(135deg, #e9d5ff 0%, #c084fc 40%, #a855f7 100%)",
+  draftBorder: "rgba(168, 85, 247, 0.5)",
+  corner: "#7e22ce",
+  ring: "ring-2 ring-purple-400/60 ring-offset-1",
+  iconClass: "w-3 h-3 text-purple-900/50",
+  labelClass: "text-[8px] font-bold text-purple-900/50 uppercase tracking-widest",
+  nameText: "text-purple-950",
+  nameTextDeprecated: "text-purple-950/40 line-through",
+  versionClass: "text-[9px] text-purple-900/40 font-semibold mt-0.5",
+  summaryClass: "mt-2 pt-1.5 border-t border-purple-900/10 text-[9px] text-purple-950/60 leading-relaxed overflow-hidden"
+};
+var DEFAULT_SERVICE = {
+  Icon: ServerIcon,
+  label: "Service",
+  ring: "ring-2 ring-pink-400/60 ring-offset-2",
+  borderSolid: "border-pink-500",
+  borderDraftDark: "border-dashed border-pink-400",
+  borderDraftLight: "border-dashed border-pink-400/60",
+  draftStripeDark: "rgba(236,72,153,0.25)",
+  draftStripeLight: "rgba(236,72,153,0.15)",
+  nodeBgVar: "var(--ec-service-node-bg, rgb(var(--ec-card-bg)))",
+  shadowColor: "rgba(236, 72, 153, 0.15)",
+  badgeBg: "bg-pink-500",
+  ownerAccent: "bg-pink-400",
+  ownerBorder: "rgba(236,72,153,0.08)",
+  ownerIcon: "text-pink-300"
+};
+var DEFAULT_EXTERNAL = {
+  Icon: Globe,
+  label: "External System",
+  ring: "ring-2 ring-purple-400/60 ring-offset-2",
+  borderSolid: "border-purple-500",
+  borderDraftDark: "border-dashed border-purple-400",
+  borderDraftLight: "border-dashed border-purple-400/60",
+  draftStripeDark: "rgba(168,85,247,0.25)",
+  draftStripeLight: "rgba(168,85,247,0.15)",
+  nodeBgVar: "var(--ec-external-node-bg, rgb(var(--ec-card-bg)))",
+  shadowColor: "rgba(168, 85, 247, 0.15)",
+  badgeBg: "bg-purple-500",
+  ownerAccent: "bg-purple-400",
+  ownerBorder: "rgba(168,85,247,0.08)",
+  ownerIcon: "text-purple-300"
+};
 function PostItService(props) {
-  const { version, name, summary, deprecated, draft, notes, specifications } = props.data.service;
+  const {
+    version,
+    name,
+    summary,
+    deprecated,
+    draft,
+    notes,
+    specifications,
+    externalSystem
+  } = props.data.service;
   const mode = props.data.mode || "simple";
   const isDark = useDarkMode();
+  const p = externalSystem ? POST_IT_EXTERNAL : POST_IT_SERVICE;
   return /* @__PURE__ */ jsxs3(
     "div",
     {
       className: classNames(
         "relative min-w-44 max-w-56 min-h-[120px]",
-        props?.selected ? "ring-2 ring-pink-400/60 ring-offset-1" : ""
+        props?.selected ? p.ring : ""
       ),
       children: [
         /* @__PURE__ */ jsx3(
@@ -1106,10 +1177,10 @@ function PostItService(props) {
           {
             className: "absolute inset-0",
             style: {
-              background: draft ? "repeating-linear-gradient(135deg, #fbcfe8 0%, #f9a8d4 40%, #ec4899 100%)" : "linear-gradient(135deg, #fbcfe8 0%, #f9a8d4 40%, #ec4899 100%)",
+              background: p.gradient,
               boxShadow: "1px 1px 3px rgba(0,0,0,0.15), 3px 4px 8px rgba(0,0,0,0.08)",
               transform: "rotate(1deg)",
-              border: deprecated ? "2px dashed rgba(239, 68, 68, 0.5)" : draft ? "2px dashed rgba(236, 72, 153, 0.5)" : "none"
+              border: deprecated ? "2px dashed rgba(239, 68, 68, 0.5)" : draft ? `2px dashed ${p.draftBorder}` : "none"
             },
             children: [
               /* @__PURE__ */ jsx3("div", { style: FOLDED_CORNER_SHADOW_STYLE }),
@@ -1124,7 +1195,7 @@ function PostItService(props) {
                     height: 0,
                     borderStyle: "solid",
                     borderWidth: "18px 0 0 18px",
-                    borderColor: "#db2777 transparent transparent transparent",
+                    borderColor: `${p.corner} transparent transparent transparent`,
                     opacity: 0.3
                   }
                 }
@@ -1135,14 +1206,8 @@ function PostItService(props) {
         /* @__PURE__ */ jsxs3("div", { className: "relative px-3.5 py-3", children: [
           /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between mb-2", children: [
             /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsx3(
-                ServerIcon,
-                {
-                  className: "w-3 h-3 text-pink-900/50",
-                  strokeWidth: 2.5
-                }
-              ),
-              /* @__PURE__ */ jsx3("span", { className: "text-[8px] font-bold text-pink-900/50 uppercase tracking-widest", children: "Service" })
+              /* @__PURE__ */ jsx3(p.Icon, { className: p.iconClass, strokeWidth: 2.5 }),
+              /* @__PURE__ */ jsx3("span", { className: p.labelClass, children: p.label })
             ] }),
             draft && /* @__PURE__ */ jsx3("span", { className: "text-[8px] font-extrabold text-amber-900 bg-amber-100 border border-dashed border-amber-400 px-1.5 py-0.5 rounded uppercase", children: "Draft" }),
             deprecated && /* @__PURE__ */ jsx3("span", { className: "text-[7px] font-bold text-white bg-red-500 border border-red-600 px-1.5 py-0.5 rounded uppercase", children: "Deprecated" })
@@ -1152,19 +1217,19 @@ function PostItService(props) {
             {
               className: classNames(
                 "text-[13px] font-bold leading-snug",
-                deprecated ? "text-pink-950/40 line-through" : "text-pink-950"
+                deprecated ? p.nameTextDeprecated : p.nameText
               ),
               children: name
             }
           ),
-          version && /* @__PURE__ */ jsxs3("div", { className: "text-[9px] text-pink-900/40 font-semibold mt-0.5", children: [
+          version && /* @__PURE__ */ jsxs3("div", { className: p.versionClass, children: [
             "v",
             version
           ] }),
           mode === "full" && summary && /* @__PURE__ */ jsx3(
             "div",
             {
-              className: "mt-2 pt-1.5 border-t border-pink-900/10 text-[9px] text-pink-950/60 leading-relaxed overflow-hidden",
+              className: p.summaryClass,
               style: LINE_CLAMP_STYLE,
               title: summary,
               children: summary
@@ -1177,7 +1242,16 @@ function PostItService(props) {
   );
 }
 function DefaultService(props) {
-  const { version, name, summary, deprecated, draft, notes, specifications } = props.data.service;
+  const {
+    version,
+    name,
+    summary,
+    deprecated,
+    draft,
+    notes,
+    specifications,
+    externalSystem
+  } = props.data.service;
   const mode = props.data.mode || "simple";
   const owners = useMemo(
     () => normalizeOwners(props.data.service.owners),
@@ -1187,17 +1261,20 @@ function DefaultService(props) {
   const sourceConnections = useNodeConnections({ handleType: "source" });
   const isDark = useDarkMode();
   const deprecatedStripe = isDark ? "rgba(239,68,68,0.25)" : "rgba(239,68,68,0.1)";
+  const p = externalSystem ? DEFAULT_EXTERNAL : DEFAULT_SERVICE;
+  const draftStripe = isDark ? p.draftStripeDark : p.draftStripeLight;
+  const borderDraft = isDark ? p.borderDraftDark : p.borderDraftLight;
   return /* @__PURE__ */ jsxs3(
     "div",
     {
       className: classNames(
         "relative min-w-48 max-w-60 rounded-xl border-2 overflow-visible",
-        props?.selected ? "ring-2 ring-pink-400/60 ring-offset-2" : "",
-        deprecated ? "border-dashed border-red-500" : draft ? `border-dashed ${isDark ? "border-pink-400" : "border-pink-400/60"}` : "border-pink-500"
+        props?.selected ? p.ring : "",
+        deprecated ? "border-dashed border-red-500" : draft ? borderDraft : p.borderSolid
       ),
       style: {
-        background: deprecated ? `repeating-linear-gradient(135deg, transparent, transparent 6px, ${deprecatedStripe} 6px, ${deprecatedStripe} 7px), var(--ec-service-node-bg, rgb(var(--ec-card-bg)))` : draft ? `repeating-linear-gradient(135deg, transparent, transparent 4px, ${isDark ? "rgba(236,72,153,0.25)" : "rgba(236,72,153,0.15)"} 4px, ${isDark ? "rgba(236,72,153,0.25)" : "rgba(236,72,153,0.15)"} 4.5px), repeating-linear-gradient(45deg, transparent, transparent 4px, ${isDark ? "rgba(236,72,153,0.25)" : "rgba(236,72,153,0.15)"} 4px, ${isDark ? "rgba(236,72,153,0.25)" : "rgba(236,72,153,0.15)"} 4.5px), var(--ec-service-node-bg, rgb(var(--ec-card-bg)))` : "var(--ec-service-node-bg, rgb(var(--ec-card-bg)))",
-        boxShadow: "0 2px 12px rgba(236, 72, 153, 0.15)"
+        background: deprecated ? `repeating-linear-gradient(135deg, transparent, transparent 6px, ${deprecatedStripe} 6px, ${deprecatedStripe} 7px), ${p.nodeBgVar}` : draft ? `repeating-linear-gradient(135deg, transparent, transparent 4px, ${draftStripe} 4px, ${draftStripe} 4.5px), repeating-linear-gradient(45deg, transparent, transparent 4px, ${draftStripe} 4px, ${draftStripe} 4.5px), ${p.nodeBgVar}` : p.nodeBgVar,
+        boxShadow: `0 2px 12px ${p.shadowColor}`
       },
       children: [
         /* @__PURE__ */ jsx3(
@@ -1217,18 +1294,18 @@ function DefaultService(props) {
           }
         ),
         notes && notes.length > 0 && /* @__PURE__ */ jsx3(NotesIndicator, { notes, resourceName: name }),
-        targetConnections.length > 0 && /* @__PURE__ */ jsx3(GlowHandle, { side: "left" }),
-        sourceConnections.length > 0 && /* @__PURE__ */ jsx3(GlowHandle, { side: "right" }),
+        targetConnections.length > 0 && /* @__PURE__ */ jsx3(GlowHandle, { side: "left", external: externalSystem }),
+        sourceConnections.length > 0 && /* @__PURE__ */ jsx3(GlowHandle, { side: "right", external: externalSystem }),
         /* @__PURE__ */ jsx3("div", { className: "absolute -top-2.5 left-2.5 flex items-center gap-1.5 z-10", children: /* @__PURE__ */ jsxs3(
           "span",
           {
             className: classNames(
               "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-pink-500"
+              deprecated ? "bg-red-500" : p.badgeBg
             ),
             children: [
-              /* @__PURE__ */ jsx3(ServerIcon, { className: "w-2.5 h-2.5", strokeWidth: 2.5 }),
-              "Service",
+              /* @__PURE__ */ jsx3(p.Icon, { className: "w-2.5 h-2.5", strokeWidth: 2.5 }),
+              p.label,
               draft && " (Draft)",
               deprecated && " (Deprecated)"
             ]
@@ -1257,9 +1334,9 @@ function DefaultService(props) {
               OwnerIndicator,
               {
                 owners,
-                accentColor: "bg-pink-400",
-                borderColor: "rgba(236,72,153,0.08)",
-                iconClass: "text-pink-300"
+                accentColor: p.ownerAccent,
+                borderColor: p.ownerBorder,
+                iconClass: p.ownerIcon
               }
             ),
             !!specifications && /* @__PURE__ */ jsx3(SpecBadges, { specifications, isDark })
@@ -3231,7 +3308,7 @@ var config_default3 = {
 
 // src/nodes/external-system/ExternalSystem.tsx
 import { memo as memo12 } from "react";
-import { Globe } from "lucide-react";
+import { Globe as Globe2 } from "lucide-react";
 import { Handle as Handle9, Position as Position9, useNodeConnections as useNodeConnections8 } from "@xyflow/react";
 import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function GlowHandle12({ side }) {
@@ -3320,7 +3397,7 @@ function PostItExternalSystem(props) {
         /* @__PURE__ */ jsxs11("div", { className: "relative px-3.5 py-3", children: [
           /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between mb-2", children: [
             /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsx12(Globe, { className: "w-3 h-3 text-purple-900/50", strokeWidth: 2.5 }),
+              /* @__PURE__ */ jsx12(Globe2, { className: "w-3 h-3 text-purple-900/50", strokeWidth: 2.5 }),
               /* @__PURE__ */ jsx12("span", { className: "text-[8px] font-bold text-purple-900/50 uppercase tracking-widest", children: "External" })
             ] }),
             draft && /* @__PURE__ */ jsx12("span", { className: "text-[8px] font-extrabold text-amber-900 bg-amber-100 border border-dashed border-amber-400 px-1.5 py-0.5 rounded uppercase", children: "Draft" }),
@@ -3401,7 +3478,7 @@ function DefaultExternalSystem(props) {
               deprecated ? "bg-red-500" : "bg-purple-500"
             ),
             children: [
-              /* @__PURE__ */ jsx12(Globe, { className: "w-2.5 h-2.5", strokeWidth: 2.5 }),
+              /* @__PURE__ */ jsx12(Globe2, { className: "w-2.5 h-2.5", strokeWidth: 2.5 }),
               "External System",
               draft && " (Draft)",
               deprecated && " (Deprecated)"
@@ -3441,10 +3518,10 @@ var ExternalSystem_default = memo12(function ExternalSystem(props) {
 
 // src/nodes/external-system/config.ts
 import { MarkerType as MarkerType4 } from "@xyflow/react";
-import { Globe as Globe2 } from "lucide-react";
+import { Globe as Globe3 } from "lucide-react";
 var config_default4 = {
   type: "external-system",
-  icon: Globe2,
+  icon: Globe3,
   color: "pink",
   targetCanConnectTo: [...SERVICE, ...CHANNEL, ...MESSAGE, ...ACTOR],
   sourceCanConnectTo: [...SERVICE, ...CHANNEL, ...MESSAGE, ...ACTOR],
@@ -3855,7 +3932,7 @@ function buildUrl(path) {
 import * as HeroIcons from "@heroicons/react/24/outline";
 
 // src/utils/protocols.tsx
-import { Server, Radio, Wifi, Network, Globe as Globe3, Cloud } from "lucide-react";
+import { Server, Radio, Wifi, Network, Globe as Globe4, Cloud } from "lucide-react";
 import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 function AwsEventBridge({ className }) {
   return /* @__PURE__ */ jsxs14("svg", { viewBox: "0 0 40 40", className, children: [
@@ -3915,8 +3992,8 @@ var protocolIconMap = {
   // Messaging protocols
   mqtt: { component: Wifi, type: "lucide" },
   amqp: { component: Network, type: "lucide" },
-  grpc: { component: Globe3, type: "lucide" },
-  graphql: { component: Globe3, type: "lucide" },
+  grpc: { component: Globe4, type: "lucide" },
+  graphql: { component: Globe4, type: "lucide" },
   // Message brokers
   kafka: { component: Network, type: "lucide" },
   rabbitmq: { component: Network, type: "lucide" },
@@ -5352,6 +5429,7 @@ var AnimatedMessageEdge = memo26(
       [lines]
     );
     const labelWidth = Math.max(longestLine.length * 6.5 + 16, 50);
+    const firstLineDy = `${-((lines.length - 1) * 1.2) / 2}em`;
     return /* @__PURE__ */ jsxs26(Fragment3, { children: [
       /* @__PURE__ */ jsx27(
         BaseEdge,
@@ -5395,7 +5473,7 @@ var AnimatedMessageEdge = memo26(
               "tspan",
               {
                 x: labelX,
-                dy: i === 0 ? 0 : "1.2em",
+                dy: i === 0 ? firstLineDy : "1.2em",
                 style: i === 0 ? TSPAN_NORMAL_STYLE : TSPAN_ITALIC_STYLE,
                 children: line
               },
@@ -5440,6 +5518,16 @@ var MultilineEdgeLabel_default = memo27(function MultilineEdgeLabel(props) {
     targetPosition
   });
   const lines = useMemo13(() => String(label ?? "").split("\n"), [label]);
+  const firstLineDy = useMemo13(
+    () => `${-((lines.length - 1) * 1.2) / 2}em`,
+    [lines.length]
+  );
+  const longestLine = useMemo13(
+    () => lines.reduce((a, b) => a.length > b.length ? a : b, ""),
+    [lines]
+  );
+  const labelWidth = Math.max(longestLine.length * 5.5 + 14, 44);
+  const labelHeight = lines.length * 12 + 4;
   return /* @__PURE__ */ jsxs27(Fragment4, { children: [
     /* @__PURE__ */ jsx28(
       "path",
@@ -5452,6 +5540,22 @@ var MultilineEdgeLabel_default = memo27(function MultilineEdgeLabel(props) {
         style
       }
     ),
+    label && /* @__PURE__ */ jsx28(
+      "rect",
+      {
+        x: labelX - labelWidth / 2,
+        y: labelY - labelHeight / 2,
+        width: labelWidth,
+        height: labelHeight,
+        fill: "rgb(var(--ec-card-bg))",
+        fillOpacity: 0.95,
+        stroke: "rgb(var(--ec-page-border))",
+        strokeWidth: 0.75,
+        rx: 5,
+        ry: 5,
+        pointerEvents: "none"
+      }
+    ),
     /* @__PURE__ */ jsx28(
       "text",
       {
@@ -5466,7 +5570,7 @@ var MultilineEdgeLabel_default = memo27(function MultilineEdgeLabel(props) {
           "tspan",
           {
             x: labelX,
-            dy: i === 0 ? 0 : "1.2em",
+            dy: i === 0 ? firstLineDy : "1.2em",
             style: i === 0 ? TSPAN_NORMAL_STYLE2 : TSPAN_ITALIC_STYLE2,
             children: line
           },
@@ -8538,7 +8642,7 @@ import {
   ArrowRightLeft as ArrowRightLeft3,
   Database as Database5,
   Package as Package2,
-  Globe as Globe4,
+  Globe as Globe5,
   User as User3,
   MonitorIcon as MonitorIcon2,
   BoxesIcon as BoxesIcon2
@@ -8559,7 +8663,7 @@ var NODE_TYPE_META = {
   channels: { icon: ArrowRightLeft3, color: "#6b7280", label: "Channel" },
   data: { icon: Database5, color: "#3b82f6", label: "Data" },
   "data-products": { icon: Package2, color: "#6366f1", label: "Data Product" },
-  externalSystem: { icon: Globe4, color: "#ec4899", label: "External System" },
+  externalSystem: { icon: Globe5, color: "#ec4899", label: "External System" },
   actor: { icon: User3, color: "#eab308", label: "Actor" },
   view: { icon: MonitorIcon2, color: "#8b5cf6", label: "View" },
   domain: { icon: BoxesIcon2, color: "#14b8a6", label: "Domain" },
@@ -10614,7 +10718,7 @@ var NodeGraphBuilder = ({
                       {
                         onClick: handleQuickSaveLayout,
                         disabled: isSavingLayout,
-                        className: "text-xs font-medium text-[rgb(var(--ec-accent-text))] bg-[rgb(var(--ec-accent-subtle))] hover:bg-[rgb(var(--ec-accent-subtle)/0.7)] px-2 py-1 rounded transition-colors disabled:opacity-50",
+                        className: "text-xs font-medium text-white bg-[rgb(var(--ec-accent))] hover:bg-[rgb(var(--ec-accent-hover))] px-2 py-1 rounded transition-colors disabled:opacity-50",
                         children: isSavingLayout ? "Saving..." : "Save"
                       }
                     )