@eventcatalog/visualiser 3.20.0 → 3.20.1

package/dist/index.mjs

@@ -5018,144 +5018,297 @@ var GroupNode_default = memo22(function GroupNode({ data }) {
 });
 
 // src/nodes/Custom.tsx
-import { Handle as Handle17 } from "@xyflow/react";
-import * as Icons from "@heroicons/react/24/solid";
 import { memo as memo23, useMemo as useMemo10 } from "react";
+import { Handle as Handle17, Position as Position15, useNodeConnections as useNodeConnections10 } from "@xyflow/react";
+import * as Icons from "@heroicons/react/24/solid";
 import * as ContextMenu4 from "@radix-ui/react-context-menu";
-import * as Tooltip from "@radix-ui/react-tooltip";
 import { jsx as jsx24, jsxs as jsxs22 } from "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 = memo23(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__ */ jsx24(
+    "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 = memo23(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 = useMemo10(() => 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 = useMemo10(() => Icons[icon] || Icons.CubeIcon, [icon]);
   const portalContainer = usePortalContainer();
+  const targetConnections = useNodeConnections10({ handleType: "target" });
+  const sourceConnections = useNodeConnections10({ handleType: "source" });
+  const propertyEntries = Object.entries(properties);
+  const contextMenuItems = url ? [{ label: `Open ${type.toLowerCase()}`, url }, ...menu] : menu;
   return /* @__PURE__ */ jsxs22(ContextMenu4.Root, { children: [
     /* @__PURE__ */ jsx24(ContextMenu4.Trigger, { children: /* @__PURE__ */ jsxs22(
       "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__ */ jsxs22(
-            "div",
+          /* @__PURE__ */ jsx24(
+            Handle17,
+            {
+              type: "target",
+              position: Position15.Left,
+              style: HIDDEN_HANDLE_STYLE
+            }
+          ),
+          /* @__PURE__ */ jsx24(
+            Handle17,
+            {
+              type: "source",
+              position: Position15.Right,
+              style: HIDDEN_HANDLE_STYLE
+            }
+          ),
+          targetConnections.length > 0 && /* @__PURE__ */ jsx24(GlowHandle14, { side: "left", gradient: palette.glow }),
+          sourceConnections.length > 0 && /* @__PURE__ */ jsx24(GlowHandle14, { side: "right", gradient: palette.glow }),
+          /* @__PURE__ */ jsx24("div", { className: "absolute -top-3 left-2.5 z-10", children: /* @__PURE__ */ jsxs22(
+            "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__ */ jsx24(IconComponent, { className: "w-4 h-4 opacity-90 text-white mt-1" }),
-                mode === "full" && /* @__PURE__ */ jsx24(Tooltip.Provider, { children: /* @__PURE__ */ jsxs22(Tooltip.Root, { children: [
-                  /* @__PURE__ */ jsx24(Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ jsx24(
-                    "span",
-                    {
-                      className: "text-center text-[9px] text-white font-bold uppercase mb-4",
-                      style: ROTATED_LABEL_STYLE,
-                      children: displayType
-                    }
-                  ) }),
-                  isLongType && /* @__PURE__ */ jsx24(Tooltip.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs22(
-                    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__ */ jsx24(Tooltip.Arrow, { className: "fill-slate-800" })
-                      ]
-                    }
-                  ) })
-                ] }) })
+                IconComponent && /* @__PURE__ */ jsx24(IconComponent, { className: "w-2.5 h-2.5", "aria-hidden": true }),
+                type
               ]
             }
-          ),
-          /* @__PURE__ */ jsxs22("div", { className: "p-1 flex-1", children: [
-            targetPosition && /* @__PURE__ */ jsx24(Handle17, { type: "target", position: targetPosition }),
-            sourcePosition && /* @__PURE__ */ jsx24(Handle17, { type: "source", position: sourcePosition }),
-            (!summary || mode !== "full") && /* @__PURE__ */ jsx24("div", { className: "h-full ", children: /* @__PURE__ */ jsx24("span", { className: "text-sm font-bold block pb-0.5 w-full", children: title }) }),
-            summary && mode === "full" && /* @__PURE__ */ jsxs22("div", { children: [
-              /* @__PURE__ */ jsx24(
+          ) }),
+          /* @__PURE__ */ jsxs22("div", { className: "px-3 pt-3.5 pb-2.5", children: [
+            /* @__PURE__ */ jsx24("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx24("span", { className: "text-[13px] font-semibold leading-snug text-[rgb(var(--ec-page-text))] truncate", children: title }) }),
+            mode === "full" && summary && /* @__PURE__ */ jsx24(
+              "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__ */ jsx24("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__ */ jsxs22("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx24("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__ */ jsx24(
+                "a",
+                {
+                  href: value,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: "block text-[8px] text-blue-500 underline truncate",
+                  title: value,
+                  children: value
+                }
+              ) : /* @__PURE__ */ jsx24(
                 "div",
                 {
-                  className: classNames16(
-                    mode === "full" ? `border-b border-[rgb(var(--ec-page-border))]` : ""
-                  ),
-                  children: /* @__PURE__ */ jsx24("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__ */ jsxs22("div", { className: "divide-y divide-[rgb(var(--ec-page-border))] ", children: [
-                /* @__PURE__ */ jsx24("div", { className: "leading-3 py-1", children: /* @__PURE__ */ jsx24("span", { className: "text-[8px] font-light", children: summary }) }),
-                properties && /* @__PURE__ */ jsx24("div", { className: "grid grid-cols-2 gap-x-4 py-1", children: Object.entries(properties).map(([key, value]) => /* @__PURE__ */ jsxs22(
-                  "span",
-                  {
-                    className: "text-xs",
-                    style: TINY_FONT_STYLE,
-                    children: [
-                      key,
-                      ":",
-                      " ",
-                      typeof value === "string" && value.startsWith("http") ? /* @__PURE__ */ jsx24(
-                        "a",
-                        {
-                          href: value,
-                          target: "_blank",
-                          rel: "noopener noreferrer",
-                          className: "text-blue-500 underline",
-                          children: value
-                        }
-                      ) : value
-                    ]
-                  },
-                  key
-                )) })
-              ] })
-            ] })
+              )
+            ] }, key)) })
           ] })
         ]
       }
     ) }),
-    menu?.length > 0 && /* @__PURE__ */ jsx24(ContextMenu4.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx24(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__ */ jsx24(
-        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__ */ jsx24("a", { href: item.url, children: item.label })
-        }
-      );
-    }) }) })
+    contextMenuItems.length > 0 && /* @__PURE__ */ jsx24(ContextMenu4.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx24(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__ */ jsx24(
+      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__ */ jsx24(
+          "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 || ""}`
+    )) }) })
   ] });
 });
 
 // src/nodes/ExternalSystem2.tsx
 import { memo as memo24 } from "react";
-import { Handle as Handle18, Position as Position15 } from "@xyflow/react";
+import { Handle as Handle18, Position as Position16 } from "@xyflow/react";
 import { jsx as jsx25, jsxs as jsxs23 } from "react/jsx-runtime";
 var ExternalSystem2_default = memo24(function ExternalSystemNode(props) {
   return /* @__PURE__ */ jsxs23("div", { className: "relative", children: [
@@ -5163,7 +5316,7 @@ var ExternalSystem2_default = memo24(function ExternalSystemNode(props) {
       Handle18,
       {
         type: "target",
-        position: Position15.Left,
+        position: Position16.Left,
         style: EXTERNAL_SYSTEM_HANDLE_STYLE,
         className: "bg-gray-500"
       }
@@ -5172,7 +5325,7 @@ var ExternalSystem2_default = memo24(function ExternalSystemNode(props) {
       Handle18,
       {
         type: "source",
-        position: Position15.Right,
+        position: Position16.Right,
         style: EXTERNAL_SYSTEM_HANDLE_STYLE,
         className: "bg-gray-500"
       }
@@ -5184,9 +5337,9 @@ var ExternalSystem2_default = memo24(function ExternalSystemNode(props) {
 // src/nodes/DataProduct.tsx
 import { memo as memo25 } from "react";
 import { Package } from "lucide-react";
-import { Handle as Handle19, Position as Position16, useNodeConnections as useNodeConnections10 } from "@xyflow/react";
+import { Handle as Handle19, Position as Position17, useNodeConnections as useNodeConnections11 } from "@xyflow/react";
 import { jsx as jsx26, jsxs as jsxs24 } from "react/jsx-runtime";
-function GlowHandle14({ side }) {
+function GlowHandle15({ side }) {
   return /* @__PURE__ */ jsx26(
     "div",
     {
@@ -5226,7 +5379,7 @@ function PostItDataProduct(props) {
           Handle19,
           {
             type: "target",
-            position: Position16.Left,
+            position: Position17.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
@@ -5234,7 +5387,7 @@ function PostItDataProduct(props) {
           Handle19,
           {
             type: "source",
-            position: Position16.Right,
+            position: Position17.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
@@ -5321,8 +5474,8 @@ function DefaultDataProduct(props) {
   const { version, name, summary, deprecated, draft, notes, styles } = props.data.dataProduct;
   const mode = props.data.mode || "simple";
   const customIcon = isIconPath(styles?.icon) ? styles.icon : void 0;
-  const targetConnections = useNodeConnections10({ handleType: "target" });
-  const sourceConnections = useNodeConnections10({ handleType: "source" });
+  const targetConnections = useNodeConnections11({ handleType: "target" });
+  const sourceConnections = useNodeConnections11({ handleType: "source" });
   const isDark = useDarkMode();
   const deprecatedStripe = isDark ? "rgba(239,68,68,0.25)" : "rgba(239,68,68,0.1)";
   return /* @__PURE__ */ jsxs24(
@@ -5342,7 +5495,7 @@ function DefaultDataProduct(props) {
           Handle19,
           {
             type: "target",
-            position: Position16.Left,
+            position: Position17.Left,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
@@ -5350,13 +5503,13 @@ function DefaultDataProduct(props) {
           Handle19,
           {
             type: "source",
-            position: Position16.Right,
+            position: Position17.Right,
             style: HIDDEN_HANDLE_STYLE
           }
         ),
         notes && notes.length > 0 && /* @__PURE__ */ jsx26(NotesIndicator, { notes, resourceName: name }),
-        targetConnections.length > 0 && /* @__PURE__ */ jsx26(GlowHandle14, { side: "left" }),
-        sourceConnections.length > 0 && /* @__PURE__ */ jsx26(GlowHandle14, { side: "right" }),
+        targetConnections.length > 0 && /* @__PURE__ */ jsx26(GlowHandle15, { side: "left" }),
+        sourceConnections.length > 0 && /* @__PURE__ */ jsx26(GlowHandle15, { side: "right" }),
         /* @__PURE__ */ jsx26("div", { className: "absolute -top-2.5 left-2.5 flex items-center gap-1.5 z-10", children: /* @__PURE__ */ jsxs24(
           "span",
           {
@@ -5416,7 +5569,7 @@ var DataProduct_default = memo25(function DataProductNode(props) {
 // src/nodes/message-group/MessageGroupNode.tsx
 import { memo as memo26, useMemo as useMemo11 } from "react";
 import { Layers, Zap as Zap3, Terminal, HelpCircle, Maximize2 as Maximize22 } from "lucide-react";
-import { Handle as Handle20, Position as Position17, useNodeConnections as useNodeConnections11 } from "@xyflow/react";
+import { Handle as Handle20, Position as Position18, useNodeConnections as useNodeConnections12 } from "@xyflow/react";
 import { jsx as jsx27, jsxs as jsxs25 } from "react/jsx-runtime";
 var TYPE_ICONS = {
   events: Zap3,
@@ -5432,8 +5585,8 @@ var CARD_STYLE = {
 var MessageGroupNode_default = memo26(function MessageGroupNode(props) {
   const { groupName, messageCount } = props.data;
   const isDark = useDarkMode();
-  const targetConnections = useNodeConnections11({ handleType: "target" });
-  const sourceConnections = useNodeConnections11({ handleType: "source" });
+  const targetConnections = useNodeConnections12({ handleType: "target" });
+  const sourceConnections = useNodeConnections12({ handleType: "source" });
   const stackDepth = messageCount >= 3 ? 3 : messageCount;
   const typeBreakdown = useMemo11(() => {
     const counts = {};
@@ -5481,7 +5634,7 @@ var MessageGroupNode_default = memo26(function MessageGroupNode(props) {
             Handle20,
             {
               type: "target",
-              position: Position17.Left,
+              position: Position18.Left,
               style: HIDDEN_HANDLE_STYLE
             }
           ),
@@ -5489,7 +5642,7 @@ var MessageGroupNode_default = memo26(function MessageGroupNode(props) {
             Handle20,
             {
               type: "source",
-              position: Position17.Right,
+              position: Position18.Right,
               style: HIDDEN_HANDLE_STYLE
             }
           ),
@@ -7123,7 +7276,7 @@ function getNodeDocUrl(node) {
 }
 
 // src/components/FocusMode/FocusModeNodeActions.tsx
-import { NodeToolbar, Position as Position18, useViewport } from "@xyflow/react";
+import { NodeToolbar, Position as Position19, useViewport } from "@xyflow/react";
 import { ArrowRightLeft as ArrowRightLeft2, FileText } from "lucide-react";
 import { jsx as jsx35, jsxs as jsxs33 } from "react/jsx-runtime";
 var FocusModeNodeActions = ({
@@ -7156,7 +7309,7 @@ var FocusModeNodeActions = ({
       NodeToolbar,
       {
         nodeId: node.id,
-        position: Position18.Bottom,
+        position: Position19.Bottom,
         isVisible: true,
         offset: -16,
         children: /* @__PURE__ */ jsx35(
@@ -7183,7 +7336,7 @@ var FocusModeNodeActions = ({
     NodeToolbar,
     {
       nodeId: node.id,
-      position: Position18.Bottom,
+      position: Position19.Bottom,
       isVisible: true,
       offset: -16,
       children: /* @__PURE__ */ jsxs33(
@@ -7221,7 +7374,7 @@ var FocusModeNodeActions = ({
 var FocusModeNodeActions_default = FocusModeNodeActions;
 
 // src/components/FocusMode/FocusModePlaceholder.tsx
-import { Handle as Handle21, Position as Position19 } from "@xyflow/react";
+import { Handle as Handle21, Position as Position20 } from "@xyflow/react";
 import { jsx as jsx36, jsxs as jsxs34 } from "react/jsx-runtime";
 var FocusModePlaceholder = ({
   data
@@ -7237,7 +7390,7 @@ var FocusModePlaceholder = ({
           Handle21,
           {
             type: "target",
-            position: Position19.Left,
+            position: Position20.Left,
             style: { visibility: "hidden" }
           }
         ),
@@ -7246,7 +7399,7 @@ var FocusModePlaceholder = ({
           Handle21,
           {
             type: "source",
-            position: Position19.Right,
+            position: Position20.Right,
             style: { visibility: "hidden" }
           }
         )
@@ -8173,7 +8326,7 @@ var MermaidView_default = MermaidView;
 import { useCallback as useCallback10, useMemo as useMemo17, useState as useState11, useEffect as useEffect7 } from "react";
 
 // src/utils/utils/utils.ts
-import { MarkerType as MarkerType6, Position as Position20 } from "@xyflow/react";
+import { MarkerType as MarkerType6, Position as Position21 } from "@xyflow/react";
 import dagre from "dagre";
 var generateIdForNode = (node) => {
   return `${node.data.id}-${node.data.version}`;
@@ -8263,8 +8416,8 @@ var createEdge = (edgeOptions) => {
 };
 var createNode = (values) => {
   return {
-    sourcePosition: Position20.Right,
-    targetPosition: Position20.Left,
+    sourcePosition: Position21.Right,
+    targetPosition: Position21.Left,
     ...values
   };
 };