@eventcatalog/visualiser 3.20.2 → 3.21.0

package/dist/index.js

@@ -2881,7 +2881,7 @@ function GlowHandle10({ side }) {
         width: 12,
         height: 12,
         borderRadius: "50%",
-        background: "linear-gradient(135deg, #3b82f6, #2563eb)",
+        background: "linear-gradient(135deg, #6366f1, #4f46e5)",
         border: "2px solid rgb(var(--ec-page-bg))",
         zIndex: 20,
         animation: "ec-data-handle-pulse 2s ease-in-out infinite",
@@ -2928,7 +2928,7 @@ function PostItData(props) {
     {
       className: classNames6(
         "relative min-w-44 max-w-56 min-h-[120px]",
-        props?.selected ? "ring-2 ring-blue-400/60 ring-offset-1" : ""
+        props?.selected ? "ring-2 ring-indigo-400/60 ring-offset-1" : ""
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
@@ -2953,10 +2953,10 @@ function PostItData(props) {
           {
             className: "absolute inset-0",
             style: {
-              background: "linear-gradient(135deg, #bfdbfe 0%, #93c5fd 40%, #3b82f6 100%)",
+              background: "linear-gradient(135deg, #c7d2fe 0%, #a5b4fc 40%, #6366f1 100%)",
               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(59, 130, 246, 0.5)" : "none"
+              border: deprecated ? "2px dashed rgba(239, 68, 68, 0.5)" : draft ? "2px dashed rgba(99, 102, 241, 0.5)" : "none"
             },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: FOLDED_CORNER_SHADOW_STYLE }),
@@ -2971,7 +2971,7 @@ function PostItData(props) {
                     height: 0,
                     borderStyle: "solid",
                     borderWidth: "18px 0 0 18px",
-                    borderColor: "#2563eb transparent transparent transparent",
+                    borderColor: "#4f46e5 transparent transparent transparent",
                     opacity: 0.3
                   }
                 }
@@ -2982,8 +2982,14 @@ function PostItData(props) {
         /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "relative px-3.5 py-3", children: [
           /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
             /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react9.Database, { className: "w-3 h-3 text-blue-900/50", strokeWidth: 2.5 }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[8px] font-bold text-blue-900/50 uppercase tracking-widest", children: "Data" })
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                import_lucide_react9.Database,
+                {
+                  className: "w-3 h-3 text-indigo-950/50",
+                  strokeWidth: 2.5
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[8px] font-bold text-indigo-950/50 uppercase tracking-widest", children: "Data" })
             ] }),
             draft && /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.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" })
@@ -3002,20 +3008,20 @@ function PostItData(props) {
               {
                 className: classNames6(
                   "text-[13px] font-bold leading-snug min-w-0 truncate",
-                  deprecated ? "text-blue-950/40 line-through" : "text-blue-950"
+                  deprecated ? "text-indigo-950/40 line-through" : "text-indigo-950"
                 ),
                 children: name
               }
             )
           ] }),
-          version && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "text-[9px] text-blue-900/40 font-semibold mt-0.5", children: [
+          version && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "text-[9px] text-indigo-950/40 font-semibold mt-0.5", children: [
             "v",
             version
           ] }),
           mode === "full" && summary && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "div",
             {
-              className: "mt-2 pt-1.5 border-t border-blue-900/10 text-[9px] text-blue-950/60 leading-relaxed overflow-hidden",
+              className: "mt-2 pt-1.5 border-t border-indigo-950/10 text-[9px] text-indigo-950/60 leading-relaxed overflow-hidden",
               style: LINE_CLAMP_STYLE,
               title: summary,
               children: summary
@@ -3053,12 +3059,12 @@ function DefaultData(props) {
     {
       className: classNames6(
         "relative min-w-48 max-w-60 rounded-xl border-2 overflow-visible",
-        props?.selected ? "ring-2 ring-blue-400/60 ring-offset-2" : "",
-        deprecated ? "border-dashed border-red-500" : draft ? `border-dashed ${isDark ? "border-blue-400" : "border-blue-400/60"}` : "border-blue-500"
+        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"
       ),
       style: {
-        background: deprecated ? `repeating-linear-gradient(135deg, transparent, transparent 6px, ${deprecatedStripe} 6px, ${deprecatedStripe} 7px), var(--ec-data-node-bg, rgb(var(--ec-card-bg)))` : draft ? `repeating-linear-gradient(135deg, transparent, transparent 4px, ${isDark ? "rgba(59,130,246,0.25)" : "rgba(59,130,246,0.15)"} 4px, ${isDark ? "rgba(59,130,246,0.25)" : "rgba(59,130,246,0.15)"} 4.5px), repeating-linear-gradient(45deg, transparent, transparent 4px, ${isDark ? "rgba(59,130,246,0.25)" : "rgba(59,130,246,0.15)"} 4px, ${isDark ? "rgba(59,130,246,0.25)" : "rgba(59,130,246,0.15)"} 4.5px), var(--ec-data-node-bg, rgb(var(--ec-card-bg)))` : "var(--ec-data-node-bg, rgb(var(--ec-card-bg)))",
-        boxShadow: "0 2px 12px rgba(59, 130, 246, 0.15)"
+        background: deprecated ? `repeating-linear-gradient(135deg, transparent, transparent 6px, ${deprecatedStripe} 6px, ${deprecatedStripe} 7px), var(--ec-data-node-bg, rgb(var(--ec-card-bg)))` : draft ? `repeating-linear-gradient(135deg, transparent, transparent 4px, ${isDark ? "rgba(99,102,241,0.25)" : "rgba(99,102,241,0.15)"} 4px, ${isDark ? "rgba(99,102,241,0.25)" : "rgba(99,102,241,0.15)"} 4.5px), repeating-linear-gradient(45deg, transparent, transparent 4px, ${isDark ? "rgba(99,102,241,0.25)" : "rgba(99,102,241,0.15)"} 4px, ${isDark ? "rgba(99,102,241,0.25)" : "rgba(99,102,241,0.15)"} 4.5px), var(--ec-data-node-bg, rgb(var(--ec-card-bg)))` : "var(--ec-data-node-bg, rgb(var(--ec-card-bg)))",
+        boxShadow: "0 2px 12px rgba(99, 102, 241, 0.15)"
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
@@ -3085,7 +3091,7 @@ function DefaultData(props) {
           {
             className: classNames6(
               "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-blue-500"
+              deprecated ? "bg-red-500" : "bg-indigo-500"
             ),
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react9.Database, { className: "w-2.5 h-2.5", strokeWidth: 2.5 }),
@@ -3098,7 +3104,7 @@ function DefaultData(props) {
         typeLabel && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "span",
           {
-            className: "z-10 text-[7px] font-semibold text-[rgb(var(--ec-page-text))] bg-[rgb(var(--ec-card-bg))] border border-blue-500 rounded-full px-1.5 py-0.5 uppercase tracking-wide",
+            className: "z-10 text-[7px] font-semibold text-[rgb(var(--ec-page-text))] bg-[rgb(var(--ec-card-bg))] border border-indigo-500 rounded-full px-1.5 py-0.5 uppercase tracking-wide",
             style: { position: "absolute", top: -8, right: 10 },
             children: typeLabel
           }
@@ -3135,9 +3141,9 @@ function DefaultData(props) {
             OwnerIndicator,
             {
               owners: ownersNormalized,
-              accentColor: "bg-blue-400",
-              borderColor: "rgba(59,130,246,0.08)",
-              iconClass: "text-blue-300"
+              accentColor: "bg-indigo-400",
+              borderColor: "rgba(99,102,241,0.08)",
+              iconClass: "text-indigo-300"
             }
           )
         ] })
@@ -3159,7 +3165,7 @@ var import_lucide_react10 = require("lucide-react");
 var config_default2 = {
   type: "data",
   icon: import_lucide_react10.Database,
-  color: "blue",
+  color: "indigo",
   targetCanConnectTo: [...SERVICE, ...CHANNEL, "external-system", ...ACTOR],
   sourceCanConnectTo: [...SERVICE, ...CHANNEL, "external-system", ...ACTOR],
   validateConnection: (connection) => {
@@ -6781,8 +6787,7 @@ var StepWalkthrough_default = (0, import_react62.memo)(function StepWalkthrough(
   nodes,
   edges,
   isFlowVisualization,
-  onStepChange,
-  mode = "full"
+  onStepChange
 }) {
   const [currentNodeId, setCurrentNodeId] = (0, import_react62.useState)(null);
   const [pathHistory, setPathHistory] = (0, import_react62.useState)([]);
@@ -6902,7 +6907,7 @@ var StepWalkthrough_default = (0, import_react62.memo)(function StepWalkthrough(
     setPathHistory([]);
     onStepChange(null, [], true);
   }, [onStepChange]);
-  if (!isFlowVisualization || nodes.length === 0 || mode !== "full") {
+  if (!isFlowVisualization || nodes.length === 0) {
     return null;
   }
   const { title, description } = (0, import_react62.useMemo)(() => {
@@ -11769,6 +11774,9 @@ var NodeGraphBuilder = ({
     () => edges.some((edge) => edge.type === "flow-edge"),
     [edges]
   );
+  const isCompactMenuButton = !title;
+  const menuButtonClassName = isCompactMenuButton ? "h-9 w-9 p-0 bg-[rgb(var(--ec-card-bg))] hover:bg-[rgb(var(--ec-accent-subtle))] border border-[rgb(var(--ec-page-border))] rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[rgb(var(--ec-accent))] flex items-center justify-center transition-colors duration-150 hover:border-[rgb(var(--ec-accent)/0.3)] group" : "py-2.5 px-4 bg-[rgb(var(--ec-card-bg))] hover:bg-[rgb(var(--ec-accent-subtle))] border border-[rgb(var(--ec-page-border))] rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[rgb(var(--ec-accent))] flex items-center gap-3 transition-colors duration-150 hover:border-[rgb(var(--ec-accent)/0.3)] group whitespace-nowrap";
+  const menuIconClassName = isCompactMenuButton ? "h-4 w-4 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 group-hover:text-[rgb(var(--ec-accent))] transition-colors duration-150" : "h-5 w-5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 group-hover:text-[rgb(var(--ec-accent))] transition-colors duration-150";
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     "div",
     {
@@ -11788,11 +11796,11 @@ var NodeGraphBuilder = ({
               /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
                 "button",
                 {
-                  className: "py-2.5 px-4 bg-[rgb(var(--ec-page-bg))] hover:bg-[rgb(var(--ec-accent-subtle)/0.4)] border border-[rgb(var(--ec-page-border))] rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[rgb(var(--ec-accent))] flex items-center gap-3 transition-all duration-200 hover:border-[rgb(var(--ec-accent)/0.3)] group whitespace-nowrap",
+                  className: menuButtonClassName,
                   "aria-label": "Open menu",
                   children: [
                     title && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "text-base font-medium text-[rgb(var(--ec-page-text))] leading-tight", children: title }),
-                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react32.MoreVertical, { className: "h-5 w-5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 group-hover:text-[rgb(var(--ec-accent))] transition-colors duration-150" })
+                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react32.MoreVertical, { className: menuIconClassName })
                   ]
                 }
               ) }),
@@ -11890,11 +11898,11 @@ var NodeGraphBuilder = ({
                         /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
                           "button",
                           {
-                            className: "py-2.5 px-4 bg-[rgb(var(--ec-page-bg))] hover:bg-[rgb(var(--ec-accent-subtle)/0.4)] border border-[rgb(var(--ec-page-border))] rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[rgb(var(--ec-accent))] flex items-center gap-3 transition-all duration-200 hover:border-[rgb(var(--ec-accent)/0.3)] group whitespace-nowrap",
+                            className: menuButtonClassName,
                             "aria-label": "Open menu",
                             children: [
                               title && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "text-base font-medium text-[rgb(var(--ec-page-text))] leading-tight", children: title }),
-                              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react32.MoreVertical, { className: "h-5 w-5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 group-hover:text-[rgb(var(--ec-accent))] transition-colors duration-150" })
+                              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react32.MoreVertical, { className: menuIconClassName })
                             ]
                           }
                         ) }),