@eventcatalog/visualiser 3.17.1 → 3.18.1

package/dist/index.d.mts

@@ -58,6 +58,7 @@ type Service = {
     draft?: boolean;
     notes?: Note[];
     specifications?: unknown;
+    externalSystem?: boolean;
 };
 /**
  * Channel type

package/dist/index.d.ts

@@ -58,6 +58,7 @@ type Service = {
     draft?: boolean;
     notes?: Note[];
     specifications?: unknown;
+    externalSystem?: boolean;
 };
 /**
  * Channel type

package/dist/index.js

@@ -1121,7 +1121,8 @@ var ServiceMessageFlow = (0, import_react5.memo)(function ServiceMessageFlow2({
   );
 });
 var GlowHandle = (0, import_react5.memo)(function GlowHandle2({
-  side
+  side,
+  external
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "div",
@@ -1134,10 +1135,10 @@ var GlowHandle = (0, import_react5.memo)(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"
       }
     }
@@ -1146,16 +1147,86 @@ var GlowHandle = (0, import_react5.memo)(function GlowHandle2({
 function classNames(...classes) {
   return classes.filter(Boolean).join(" ");
 }
+var POST_IT_SERVICE = {
+  Icon: import_lucide_react3.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: import_lucide_react3.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: import_lucide_react3.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: import_lucide_react3.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__ */ (0, import_jsx_runtime3.jsxs)(
     "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__ */ (0, import_jsx_runtime3.jsx)(
@@ -1180,10 +1251,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__ */ (0, import_jsx_runtime3.jsx)("div", { style: FOLDED_CORNER_SHADOW_STYLE }),
@@ -1198,7 +1269,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
                   }
                 }
@@ -1209,14 +1280,8 @@ function PostItService(props) {
         /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative px-3.5 py-3", children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
             /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                import_lucide_react3.ServerIcon,
-                {
-                  className: "w-3 h-3 text-pink-900/50",
-                  strokeWidth: 2.5
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-[8px] font-bold text-pink-900/50 uppercase tracking-widest", children: "Service" })
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(p.Icon, { className: p.iconClass, strokeWidth: 2.5 }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: p.labelClass, children: p.label })
             ] }),
             draft && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("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" })
@@ -1226,19 +1291,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__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "text-[9px] text-pink-900/40 font-semibold mt-0.5", children: [
+          version && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: p.versionClass, children: [
             "v",
             version
           ] }),
           mode === "full" && summary && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "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
@@ -1251,7 +1316,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 = (0, import_react5.useMemo)(
     () => normalizeOwners(props.data.service.owners),
@@ -1261,17 +1335,20 @@ function DefaultService(props) {
   const sourceConnections = (0, import_react6.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__ */ (0, import_jsx_runtime3.jsxs)(
     "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__ */ (0, import_jsx_runtime3.jsx)(
@@ -1291,18 +1368,18 @@ function DefaultService(props) {
           }
         ),
         notes && notes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(NotesIndicator, { notes, resourceName: name }),
-        targetConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GlowHandle, { side: "left" }),
-        sourceConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GlowHandle, { side: "right" }),
+        targetConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GlowHandle, { side: "left", external: externalSystem }),
+        sourceConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GlowHandle, { side: "right", external: externalSystem }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute -top-2.5 left-2.5 flex items-center gap-1.5 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
           "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__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react3.ServerIcon, { className: "w-2.5 h-2.5", strokeWidth: 2.5 }),
-              "Service",
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(p.Icon, { className: "w-2.5 h-2.5", strokeWidth: 2.5 }),
+              p.label,
               draft && " (Draft)",
               deprecated && " (Deprecated)"
             ]
@@ -1331,9 +1408,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__ */ (0, import_jsx_runtime3.jsx)(SpecBadges, { specifications, isDark })
@@ -5421,6 +5498,7 @@ var AnimatedMessageEdge = (0, import_react53.memo)(
       [lines]
     );
     const labelWidth = Math.max(longestLine.length * 6.5 + 16, 50);
+    const firstLineDy = `${-((lines.length - 1) * 1.2) / 2}em`;
     return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         import_react54.BaseEdge,
@@ -5464,7 +5542,7 @@ var AnimatedMessageEdge = (0, import_react53.memo)(
               "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
               },
@@ -5509,6 +5587,16 @@ var MultilineEdgeLabel_default = (0, import_react55.memo)(function MultilineEdge
     targetPosition
   });
   const lines = (0, import_react55.useMemo)(() => String(label ?? "").split("\n"), [label]);
+  const firstLineDy = (0, import_react55.useMemo)(
+    () => `${-((lines.length - 1) * 1.2) / 2}em`,
+    [lines.length]
+  );
+  const longestLine = (0, import_react55.useMemo)(
+    () => 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__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "path",
@@ -5521,6 +5609,22 @@ var MultilineEdgeLabel_default = (0, import_react55.memo)(function MultilineEdge
         style
       }
     ),
+    label && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      "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__ */ (0, import_jsx_runtime28.jsx)(
       "text",
       {
@@ -5535,7 +5639,7 @@ var MultilineEdgeLabel_default = (0, import_react55.memo)(function MultilineEdge
           "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
           },
@@ -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"
                       }
                     )