@burdenoff/fluidgrids-fe-sdk 2026.702.1 → 2026.703.2

package/dist/{chunk-WPCOE4Z5.js → chunk-5GIC24CM.js}

@@ -14,11 +14,11 @@ import { useParams, useNavigate } from 'react-router-dom';
 import { useShallow, shallow } from 'zustand/shallow';
 import * as React2 from 'react';
 import React2__default, { forwardRef, useState, useImperativeHandle, useRef, useEffect, useMemo, createContext, lazy, memo, useCallback, useContext, useLayoutEffect, Suspense, useDeferredValue } from 'react';
-import { Handle, Position, getBezierPath, MarkerType, useStore, useReactFlow, getConnectedEdges, useNodeId, ReactFlowProvider, ReactFlow, Background, useOnSelectionChange, MiniMap, getSmoothStepPath, EdgeLabelRenderer, getOutgoers, useNodes, useNodesState, useEdgesState, addEdge, Controls, Panel } from '@xyflow/react';
+import { Handle, Position, getBezierPath, MarkerType, useStore, useReactFlow, getConnectedEdges, useNodeId, ReactFlowProvider, ReactFlow, Background, useOnSelectionChange, MiniMap, EdgeLabelRenderer, getOutgoers, useNodes, useNodesState, useEdgesState, addEdge, Controls, Panel } from '@xyflow/react';
 import { produce } from 'immer';
 import { nanoid } from 'nanoid/non-secure';
 import { cn } from '@burdenoff/fe-libs/utils';
-import { Textarea, Input, Button, Card, Badge, CardContent as CardContent$1, Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuItem, DropdownMenuSeparator, Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, Popover, PopoverTrigger, PopoverContent, Toaster, Tabs, TabsList, TabsTrigger, TabsContent, CardHeader as CardHeader$1, CardTitle as CardTitle$1, CardDescription as CardDescription$1, ScrollArea, TooltipProvider, Tooltip, TooltipTrigger, TooltipContent, Label, Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@burdenoff/fe-libs/ui';
+import { Textarea, Input, Button, Card, Badge, CardContent as CardContent$1, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuItem, DropdownMenuSeparator, Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, Popover, PopoverTrigger, PopoverContent, Toaster, Tabs, TabsList, TabsTrigger, TabsContent, CardHeader as CardHeader$1, CardTitle as CardTitle$1, CardDescription as CardDescription$1, ScrollArea, TooltipProvider, Tooltip, TooltipTrigger, TooltipContent, Label, Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@burdenoff/fe-libs/ui';
 import { Icon } from '@iconify/react';
 import * as AdaptiveCards from 'adaptivecards';
 import { formatDistanceToNow } from 'date-fns';
@@ -41,27 +41,6 @@ import { ErrorBoundary } from '@burdenoff/fe-libs/shared/components';
 function ThemeProvider({ children }) {
   return /* @__PURE__ */ jsx(ThemeProvider$1, { children });
 }
-
-// src/builder/components/flow-builder/components/blocks/types.ts
-var HeaderGradientColors = {
-  purple: "from-purple-700",
-  red: "from-red-700",
-  blue: "from-blue-700",
-  green: "from-green-700",
-  yellow: "from-yellow-700",
-  pink: "from-pink-700",
-  orange: "from-orange-700",
-  teal: "from-teal-700",
-  lime: "from-lime-700",
-  indigo: "from-indigo-700",
-  fuchsia: "from-fuchsia-700",
-  emerald: "from-emerald-700",
-  cyan: "from-cyan-700",
-  rose: "from-rose-700",
-  sky: "from-sky-700",
-  gray: "from-gray-200",
-  slate: "from-slate-700"
-};
 function useDeleteNode() {
   const { getNode, getEdges, deleteElements } = useReactFlow();
   const [deleteNode, deleteEdge] = useFlowStore(
@@ -88,6 +67,7 @@ function useDeleteNode() {
 function CustomHandle({
   className,
   isConnectable,
+  accent,
   ...props
 }) {
   const { nodeLookup, edges } = useStore(({ nodeLookup: nodeLookup2, edges: edges2 }) => ({
@@ -110,11 +90,19 @@ function CustomHandle({
     Handle,
     {
       className: cn(
-        "cursor-crosshair",
-        "size-3 hover:border-primary/50  border-2 border-card-foreground/40",
+        "cursor-crosshair transition-transform hover:scale-110",
+        !accent && "size-3 border-2 border-card-foreground/40 hover:border-primary/50",
         className
       ),
       isConnectable: isHandleConnectable,
+      style: accent ? {
+        width: 14,
+        height: 14,
+        borderRadius: "50%",
+        background: "var(--card, #fff)",
+        border: `2.5px solid ${accent}`,
+        boxShadow: `0 0 0 3px color-mix(in srgb, ${accent} 12%, transparent)`
+      } : void 0,
       ...props
     }
   ) });
@@ -7780,12 +7768,255 @@ function NodePropertyPanel({
     ] })
   ] });
 }
-var HeaderWithIcon = ({ icon, title }) => {
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ jsx(Icon, { icon, className: `size-4` }),
-    /* @__PURE__ */ jsx("div", { className: "ml-2.5 flex items-center text-xs font-medium leading-none tracking-wide uppercase opacity-80", children: /* @__PURE__ */ jsx("span", { className: "translate-y-px", children: title }) })
-  ] });
-};
+var BRAND_ACCENTS = [
+  [/gmail|google/, "#ea4335"],
+  [/slack/, "#611f69"],
+  [/github/, "#334155"],
+  [/gitlab/, "#fc6d26"],
+  [/stripe/, "#635bff"],
+  [/discord/, "#5865f2"],
+  [/notion/, "#111827"],
+  [/telegram/, "#2aabee"],
+  [/whatsapp/, "#25d366"],
+  [/openai/, "#10a37f"],
+  [/anthropic|claude/, "#d97757"],
+  [/twilio/, "#f22f46"],
+  [/sheet|excel/, "#21a366"],
+  [/http|api|webhook|rest/, "#6366f1"],
+  [/db|sql|postgres|mysql|mongo/, "#0ea5e9"]
+];
+var HASH_PALETTE = [
+  "#6366f1",
+  "#0ea5e9",
+  "#10b981",
+  "#f59e0b",
+  "#ef4444",
+  "#a855f7",
+  "#ec4899",
+  "#14b8a6",
+  "#f97316",
+  "#8b5cf6"
+];
+function nodeAccent(key) {
+  const k = (key || "").toLowerCase();
+  for (const [re, hex] of BRAND_ACCENTS) if (re.test(k)) return hex;
+  let h = 0;
+  for (let i = 0; i < k.length; i++) h = h * 31 + k.charCodeAt(i) >>> 0;
+  return HASH_PALETTE[h % HASH_PALETTE.length];
+}
+function tint(hex, pct = 14) {
+  return `color-mix(in srgb, ${hex} ${pct}%, transparent)`;
+}
+var NodeCard = React2.forwardRef(
+  ({
+    className,
+    selected = false,
+    executionStatus = "idle",
+    itemCount,
+    isTrigger = false,
+    accent = "#3b82f6",
+    onSettings,
+    onExecute,
+    onDelete,
+    isExecuting = false,
+    infoButton,
+    children,
+    ...props
+  }, ref) => {
+    const [hovered, setHovered] = React2.useState(false);
+    const statusRing = executionStatus === "running" ? "ring-2 ring-[var(--color-status-success-border)] animate-pulse-border" : executionStatus === "success" ? "ring-2 ring-[var(--color-status-success-border)]" : executionStatus === "error" ? "ring-2 ring-[var(--color-status-error-border)]" : "";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "group/node relative",
+        onMouseEnter: () => setHovered(true),
+        onMouseLeave: () => setHovered(false),
+        children: [
+          itemCount !== void 0 && itemCount > 0 && /* @__PURE__ */ jsx("div", { className: "absolute -top-7 left-1/2 -translate-x-1/2 z-10", children: /* @__PURE__ */ jsxs("div", { className: "rounded-full border border-border bg-card px-2 py-0.5 text-[10px] font-medium text-muted-foreground shadow-sm", children: [
+            itemCount,
+            " item",
+            itemCount !== 1 ? "s" : ""
+          ] }) }),
+          (onSettings || onExecute || onDelete || infoButton) && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "absolute right-1 z-20 flex items-center gap-0.5 rounded-lg border border-border bg-card p-0.5 shadow-md transition-all duration-150",
+                hovered ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"
+              ),
+              style: {
+                // Inline offset (not a `-top-*` class) so it survives the host
+                // app's Tailwind scan of fe-sdk source, which drops some spacing
+                // utilities. The toolbar is ~30px tall; top:-15px centers it on
+                // the card's top edge (half outside, half over the card).
+                top: -15,
+                transform: hovered ? "translateY(0)" : "translateY(4px)"
+              },
+              onDoubleClick: (e) => e.stopPropagation(),
+              children: [
+                onSettings && /* @__PURE__ */ jsx(ToolbarButton, { title: "Configure", onClick: onSettings, children: /* @__PURE__ */ jsx(Icon, { icon: "lucide:sliders-horizontal", className: "size-4" }) }),
+                onExecute && /* @__PURE__ */ jsx(
+                  ToolbarButton,
+                  {
+                    title: "Execute step",
+                    onClick: onExecute,
+                    disabled: isExecuting,
+                    children: isExecuting ? /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        icon: "svg-spinners:ring-resize",
+                        className: "size-4 text-[var(--color-status-success-text)]"
+                      }
+                    ) : /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        icon: "mdi:play",
+                        className: "size-4 text-[var(--color-status-success-text)]"
+                      }
+                    )
+                  }
+                ),
+                infoButton,
+                onDelete && /* @__PURE__ */ jsx(ToolbarButton, { title: "Delete", onClick: onDelete, children: /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    icon: "mynaui:trash",
+                    className: "size-4 text-[var(--color-status-error-text)]"
+                  }
+                ) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref,
+              "data-selected": selected,
+              className: cn(
+                "relative w-72 rounded-xl border border-border bg-card shadow-sm will-change-transform",
+                statusRing,
+                executionStatus === "success" && "animate-success-glow",
+                className
+              ),
+              style: {
+                borderTop: `3px solid ${accent}`,
+                transition: "transform 0.15s ease, box-shadow 0.15s ease",
+                transform: hovered ? "translateY(-2px)" : "none",
+                boxShadow: hovered ? "0 2px 4px rgba(16,24,40,0.06), 0 16px 34px -12px rgba(16,24,40,0.24)" : void 0
+              },
+              ...props,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "pointer-events-none absolute -inset-0.5 transition-opacity duration-150",
+                    style: {
+                      borderRadius: 14,
+                      opacity: selected || hovered ? 1 : 0,
+                      boxShadow: selected ? `0 0 0 2px ${accent}, 0 0 0 5px ${tint(accent, 18)}` : `0 0 0 2px ${accent}`
+                    }
+                  }
+                ),
+                isTrigger && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "absolute -top-2 -left-2 z-10 flex size-5 items-center justify-center rounded-full shadow-md ring-2 ring-card",
+                    style: { backgroundColor: "var(--color-status-success-text)" },
+                    children: /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        icon: "mdi:lightning-bolt",
+                        className: "size-3",
+                        style: { color: "var(--color-status-success-text-inverse)" }
+                      }
+                    )
+                  }
+                ),
+                children
+              ]
+            }
+          ),
+          executionStatus === "success" && /* @__PURE__ */ jsx(StatusCorner, { icon: "mdi:check", tone: "success" }),
+          executionStatus === "error" && /* @__PURE__ */ jsx(StatusCorner, { icon: "mdi:close", tone: "error" }),
+          executionStatus === "running" && /* @__PURE__ */ jsx(StatusCorner, { icon: "svg-spinners:ring-resize", tone: "success" })
+        ]
+      }
+    );
+  }
+);
+NodeCard.displayName = "NodeCard";
+function ToolbarButton({
+  title,
+  onClick,
+  disabled,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      title,
+      disabled,
+      onClick: (e) => {
+        e.stopPropagation();
+        onClick?.();
+      },
+      className: "flex size-6 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-50",
+      children
+    }
+  );
+}
+function StatusCorner({
+  icon,
+  tone
+}) {
+  const bg = tone === "success" ? "var(--color-status-success-bg)" : "var(--color-status-error-bg)";
+  const fg = tone === "success" ? "var(--color-status-success-text-inverse)" : "var(--color-status-error-text-inverse)";
+  return /* @__PURE__ */ jsx("div", { className: "absolute -bottom-1.5 -right-1.5 z-10", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "rounded-full p-0.5 shadow-md animate-in zoom-in duration-200",
+      style: { backgroundColor: bg },
+      children: /* @__PURE__ */ jsx(Icon, { icon, className: "size-3", style: { color: fg } })
+    }
+  ) });
+}
+var NodeCardHeader = React2.forwardRef(
+  ({ icon, appName, accentKey }, ref) => {
+    const accent = nodeAccent(accentKey);
+    return /* @__PURE__ */ jsxs("div", { ref, className: "flex items-center gap-2.5 px-3 pb-3 pt-4", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "flex size-8 shrink-0 items-center justify-center rounded-lg",
+          style: {
+            backgroundColor: tint(accent, 13),
+            color: accent,
+            border: `1px solid ${tint(accent, 26)}`
+          },
+          children: /* @__PURE__ */ jsx(Icon, { icon, className: "size-[18px]" })
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: appName })
+    ] });
+  }
+);
+NodeCardHeader.displayName = "NodeCardHeader";
+var NodeCardBody = React2.forwardRef(
+  ({ operationName, description }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: "rounded-b-xl border-t border-border/60 px-3 pb-3 pt-2.5",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: "Operation" }),
+        /* @__PURE__ */ jsx("div", { className: "mt-0.5 truncate font-mono text-[13px] font-bold text-card-foreground", children: operationName }),
+        description ? /* @__PURE__ */ jsx("p", { className: "mt-1 line-clamp-2 text-xs leading-snug text-muted-foreground", children: description }) : null
+      ]
+    }
+  )
+);
+NodeCardBody.displayName = "NodeCardBody";
 var nodeDetails = {
   node_type: "gmail_reader",
   version: "1.0.0",
@@ -8000,212 +8231,6 @@ function NodeInfoButtonWithModal({
     ] })
   ] });
 }
-var NodeCard = React2.forwardRef(
-  ({ className, executionStatus = "idle", itemCount, children, ...props }, ref) => {
-    const statusClasses = {
-      idle: "",
-      running: "ring-2 ring-[var(--color-status-success-border)] animate-pulse-border",
-      success: "ring-2 ring-[var(--color-status-success-border)]",
-      error: "ring-2 ring-[var(--color-status-error-border)]"
-    };
-    return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      itemCount !== void 0 && itemCount > 0 && /* @__PURE__ */ jsx("div", { className: "absolute -top-6 left-1/2 -translate-x-1/2 z-10", children: /* @__PURE__ */ jsxs("div", { className: "bg-card border border-card-foreground/20 px-2 py-0.5 rounded text-[10px] text-card-foreground/70 whitespace-nowrap shadow-sm", children: [
-        itemCount,
-        " item",
-        itemCount !== 1 ? "s" : ""
-      ] }) }),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          ref,
-          className: cn(
-            "w-72 border border-card-foreground/10 rounded-sm bg-card/50 shadow-sm backdrop-blur-xl transition-all duration-200 divide-y divide-card-foreground/10 data-[selected=true]:border-border-primary hover:border-border-primary",
-            statusClasses[executionStatus],
-            executionStatus === "success" && "animate-success-glow",
-            className
-          ),
-          ...props,
-          children
-        }
-      ),
-      executionStatus === "success" && /* @__PURE__ */ jsx("div", { className: "absolute -bottom-1.5 -right-1.5 z-10", children: /* @__PURE__ */ jsx("div", { className: "bg-[var(--color-status-success-bg)] rounded-full p-0.5 shadow-md animate-in zoom-in duration-200", children: /* @__PURE__ */ jsx(
-        Icon,
-        {
-          icon: "mdi:check",
-          className: "size-3 text-[var(--color-status-success-text-inverse)]"
-        }
-      ) }) }),
-      executionStatus === "error" && /* @__PURE__ */ jsx("div", { className: "absolute -bottom-1.5 -right-1.5 z-10", children: /* @__PURE__ */ jsx("div", { className: "bg-[var(--color-status-error-bg)] rounded-full p-0.5 shadow-md animate-in zoom-in duration-200", children: /* @__PURE__ */ jsx(
-        Icon,
-        {
-          icon: "mdi:close",
-          className: "size-3 text-[var(--color-status-error-text-inverse)]"
-        }
-      ) }) }),
-      executionStatus === "running" && /* @__PURE__ */ jsx("div", { className: "absolute -bottom-1.5 -right-1.5 z-10", children: /* @__PURE__ */ jsx("div", { className: "bg-[var(--color-status-success-bg)] rounded-full p-0.5 shadow-md", children: /* @__PURE__ */ jsx(
-        Icon,
-        {
-          icon: "svg-spinners:ring-resize",
-          className: "size-3 text-[var(--color-status-success-text-inverse)]"
-        }
-      ) }) })
-    ] });
-  }
-);
-NodeCard.displayName = "NodeCard";
-var NodeCardHeader = React2.forwardRef(
-  ({
-    className,
-    icon,
-    title,
-    handleDeleteNode,
-    handleShowNodeProperties,
-    handleExecuteStep,
-    isExecuting,
-    executionStatus,
-    gradientColor,
-    ...props
-  }, ref) => {
-    const gradientColorClass = HeaderGradientColors[gradientColor];
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        className: `relative overflow-clip rounded-sm bg-card/50 ${className}`,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: `absolute h-full w-3/5 ${gradientColor ? gradientColorClass : "from-primary/40"} to-transparent bg-gradient-to-r`
-            }
-          ) }),
-          /* @__PURE__ */ jsxs("div", { className: "relative h-9 flex items-center justify-between gap-x-4 px-0.5 py-0.5", children: [
-            /* @__PURE__ */ jsx("div", { className: "flex grow items-center pl-1 gap-2", children: /* @__PURE__ */ jsx(HeaderWithIcon, { icon, title }) }),
-            /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-x-0.5 pr-0.5", children: [
-              /* @__PURE__ */ jsx("div", { className: "mx-1 h-4 w-px bg-card-foreground/10" }),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  type: "button",
-                  size: "icon",
-                  variant: "ghost",
-                  className: "size-7",
-                  onClick: handleShowNodeProperties,
-                  children: /* @__PURE__ */ jsx(Icon, { icon: "mynaui:cog-solid", className: "size-4" })
-                }
-              ),
-              handleExecuteStep && /* @__PURE__ */ jsx(
-                Button,
-                {
-                  type: "button",
-                  size: "icon",
-                  variant: "ghost",
-                  className: "size-7 transition-transform hover:scale-110",
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    handleExecuteStep();
-                  },
-                  disabled: isExecuting,
-                  title: "Execute step",
-                  children: isExecuting ? /* @__PURE__ */ jsx(
-                    Icon,
-                    {
-                      icon: "svg-spinners:ring-resize",
-                      className: "size-4 text-accent"
-                    }
-                  ) : executionStatus === "success" ? /* @__PURE__ */ jsx(
-                    Icon,
-                    {
-                      icon: "mdi:check-circle",
-                      className: "size-4 text-[var(--color-status-success-text)]"
-                    }
-                  ) : executionStatus === "error" ? /* @__PURE__ */ jsx(
-                    Icon,
-                    {
-                      icon: "mdi:close-circle",
-                      className: "size-4 text-[var(--color-status-error-text)]"
-                    }
-                  ) : /* @__PURE__ */ jsx(
-                    Icon,
-                    {
-                      icon: "mdi:play",
-                      className: "size-4 text-[var(--color-status-warning-text)]"
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  type: "button",
-                  variant: "ghost",
-                  size: "icon",
-                  className: "size-7 transition-transform hover:scale-110",
-                  onClick: handleDeleteNode,
-                  children: /* @__PURE__ */ jsx(
-                    Icon,
-                    {
-                      icon: "basil:trash-solid",
-                      className: "size-4 text-[var(--color-status-error-text)]"
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                NodeInfoButtonWithModal,
-                {
-                  metadata: {
-                    className,
-                    icon,
-                    title,
-                    handleDeleteNode,
-                    handleShowNodeProperties,
-                    gradientColor,
-                    ...props
-                  }
-                }
-              )
-            ] })
-          ] })
-        ]
-      }
-    );
-  }
-);
-NodeCardHeader.displayName = "NodeCardHeader";
-var NodeCardDescription = React2.forwardRef(({ className, description, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("px-4 py-2", className), ...props, children: /* @__PURE__ */ jsx("div", { className: "text-xs text-card-foreground", children: description }) }));
-NodeCardDescription.displayName = "NodeCardDescription";
-var NodeCardContent = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    ref,
-    className: cn(
-      "flex flex-col divide-y divide-card-foreground/10",
-      className
-    ),
-    ...props
-  }
-));
-NodeCardContent.displayName = "NodeCardContent";
-var NodeCardFooter = React2.forwardRef(
-  ({ className, nodeId, ...props }, ref) => /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      className: `bg-card-foreground/10 overflow-clip rounded-sm px-4 py-2 text-[10px] text-card-foreground/50 ${className}`,
-      ...props,
-      children: [
-        "Node: ",
-        /* @__PURE__ */ jsxs("span", { className: "font-semibold", children: [
-          "#",
-          nodeId
-        ] })
-      ]
-    }
-  )
-);
-NodeCardFooter.displayName = "NodeCardFooter";
 var TRIGGER_WORKFLOW = TriggerWorkflowDocument;
 var WORKFLOW_RUN = WorkflowRunDocument;
 var TERMINAL_STATUSES = /* @__PURE__ */ new Set([
@@ -8848,52 +8873,68 @@ var getNodeMetadata = (value) => {
     const nodeStatus = nodeStatuses[id] || "idle";
     const executionStatus = nodeStatus === "success" ? "success" : nodeStatus === "error" ? "error" : nodeStatus === "running" ? "running" : "idle";
     const itemCount = nodeItemCounts[id];
+    const isTrigger = (data?.operation_type || "").toLowerCase() === "trigger" || (value?.type || "").toLowerCase().includes("trigger");
+    const appName = (meta.title || nodeType || "Node").split(/\s+/)[0].toUpperCase();
+    const operationDisplay = nodeType === "integration/channel" ? (() => {
+      const explicitRole = data.args?.state?.role;
+      const isAction = explicitRole === "action" || !explicitRole && edges.some((e) => e.target === id);
+      return isAction ? "sendChannelMessage" : "onChannelMessageReceived";
+    })() : nodeType === "store/conversation" ? "storeAndForward" : data?.operation_name || "Not configured";
+    const nodeDescription = data?.nodeData?.description || meta?.description || "";
+    const isLogicNode = /(^|[:/])(if|switch|merge|loop|filter|branch|router|condition|aggregate)/.test(
+      (value?.type || "").toLowerCase()
+    );
+    const roleAccent = isTrigger ? "#10b981" : isLogicNode ? "#f59e0b" : "#3b82f6";
     return /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsxs(
         NodeCard,
         {
           "data-selected": selected,
+          selected,
           onDoubleClick: handleOpenNdv,
           executionStatus,
           itemCount,
+          isTrigger,
+          accent: roleAccent,
+          isExecuting: isThisNodeExecuting,
+          onSettings: handleShowNodeProperties,
+          onExecute: handleExecuteStep,
+          onDelete: handleDeleteNode,
+          infoButton: /* @__PURE__ */ jsx(
+            NodeInfoButtonWithModal,
+            {
+              metadata: {
+                icon: meta.icon,
+                title: meta.title,
+                description: nodeDescription,
+                gradientColor: meta.gradientColor
+              }
+            }
+          ),
           children: [
             /* @__PURE__ */ jsx(
               NodeCardHeader,
               {
                 icon: meta.icon,
-                title: meta.title,
-                handleDeleteNode,
-                handleShowNodeProperties,
-                handleExecuteStep,
-                isExecuting: isThisNodeExecuting,
-                executionStatus,
-                gradientColor: meta.gradientColor
+                appName,
+                accentKey: value?.type || meta.title
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              NodeCardBody,
+              {
+                operationName: operationDisplay,
+                description: nodeDescription
               }
             ),
-            /* @__PURE__ */ jsxs(NodeCardContent, { children: [
-              nodeType === "integration/channel" || nodeType === "store/conversation" ? /* @__PURE__ */ jsx("div", { className: "flex flex-col p-4", children: /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-card-foreground", children: nodeType === "integration/channel" ? (() => {
-                const explicitRole = data.args?.state?.role;
-                const isAction = explicitRole === "action" || !explicitRole && edges.some((e) => e.target === id);
-                return isAction ? "Send Message" : "Receive Messages";
-              })() : "Store & Forward" }) }) : (
-                // Operation is chosen in the Node Store (drag a specific
-                // operation onto the canvas), so the card just shows which one
-                // this node is pinned to — no in-card operation dropdown.
-                /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-4", children: [
-                  /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-muted-foreground", children: "Operation" }),
-                  /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-card-foreground mt-0.5 truncate", children: data?.operation_name || "Not configured" })
-                ] })
-              ),
-              /* @__PURE__ */ jsx(NodeCardDescription, { description: meta?.description ?? "" }),
-              /* @__PURE__ */ jsx(NodeCardFooter, { nodeId: id })
-            ] }),
             /* @__PURE__ */ jsx(
               CustomHandle,
               {
                 type: "target",
                 id: "target",
                 position: Position.Left,
-                isConnectable
+                isConnectable,
+                accent: roleAccent
               }
             ),
             /* @__PURE__ */ jsx(
@@ -8902,7 +8943,8 @@ var getNodeMetadata = (value) => {
                 type: "source",
                 id: "source",
                 position: Position.Right,
-                isConnectable
+                isConnectable,
+                accent: roleAccent
               }
             )
           ]
@@ -9297,6 +9339,12 @@ function SidebarPanelHeading({
     }
   );
 }
+var HeaderWithIcon = ({ icon, title }) => {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ jsx(Icon, { icon, className: `size-4` }),
+    /* @__PURE__ */ jsx("div", { className: "ml-2.5 flex items-center text-xs font-medium leading-none tracking-wide uppercase opacity-80", children: /* @__PURE__ */ jsx("span", { className: "translate-y-px", children: title }) })
+  ] });
+};
 function truncateMiddle(text, maxLength) {
   if (text.length <= maxLength) return text;
   const half = maxLength / 2;
@@ -18421,15 +18469,7 @@ function CustomDeletableEdge(props) {
   const isRunning = sourceNodeStatus === "running";
   const isSuccess = sourceNodeStatus === "success";
   const isError = sourceNodeStatus === "error";
-  const [edgePath] = getSmoothStepPath({
-    sourceX,
-    sourceY,
-    sourcePosition,
-    targetX,
-    targetY,
-    targetPosition
-  });
-  const bezierResult = getBezierPath({
+  const [edgePath, labelX, labelY] = getBezierPath({
     sourceX,
     sourceY,
     sourcePosition,
@@ -18437,8 +18477,6 @@ function CustomDeletableEdge(props) {
     targetY,
     targetPosition
   });
-  const labelX = bezierResult[1];
-  const labelY = bezierResult[2];
   useEffect(() => {
     const edges = getEdges();
     const currentEdge = edges?.find((e) => e.id === id);
@@ -18993,10 +19031,18 @@ function CustomDeletableEdge(props) {
     return {
       stroke: "var(--color-text-tertiary)",
       // Theme-aware default color
-      strokeWidth: 1.5
+      strokeWidth: 2
     };
   };
   const edgeStyle = getEdgeStyle();
+  const isIdle = !isRunning && !isSuccess && !isError;
+  const srcType = (sourceNodeData?.type || "").toLowerCase();
+  const srcOpType = (sourceNodeData?.data?.operation_type || "").toLowerCase();
+  const srcIsTrigger = srcOpType === "trigger" || srcType.includes("trigger");
+  const srcIsLogic = /(if|switch|merge|loop|filter|branch|router|condition|aggregate)/.test(
+    srcType
+  );
+  const flowAccent = srcIsTrigger ? "#10b981" : srcIsLogic ? "#f59e0b" : "#3b82f6";
   const edgeClassName = [isRunning && "animated-edge edge-glow"].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -19029,10 +19075,30 @@ function CustomDeletableEdge(props) {
         className: edgeClassName,
         d: edgePath,
         fill: "none",
-        style: edgeStyle,
+        style: isIdle ? { stroke: flowAccent, strokeWidth: 1.25, strokeOpacity: 0.22 } : edgeStyle,
         markerEnd
       }
     ),
+    isIdle && /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: edgePath,
+        fill: "none",
+        stroke: flowAccent,
+        strokeWidth: 2,
+        strokeDasharray: "6 8",
+        style: { pointerEvents: "none" },
+        children: /* @__PURE__ */ jsx(
+          "animate",
+          {
+            attributeName: "stroke-dashoffset",
+            values: "0;-14",
+            dur: "0.55s",
+            repeatCount: "indefinite"
+          }
+        )
+      }
+    ),
     isRunning && /* @__PURE__ */ jsx(
       "path",
       {
@@ -21646,7 +21712,7 @@ var edgeTypes2 = {
   deletable: CustomDeletableEdge
 };
 var edgeOptions = {
-  type: "smoothstep",
+  type: "deletable",
   markerEnd: {
     type: MarkerType.ArrowClosed,
     width: 21,
@@ -21859,7 +21925,7 @@ var FlowBuilder = () => {
             ReactFlow,
             {
               proOptions: { hideAttribution: true },
-              onInit: ({ fitView }) => fitView().then(),
+              onInit: ({ fitView }) => fitView({ minZoom: 1, maxZoom: 1 }).then(),
               nodeTypes: nodeTypes3,
               nodes,
               onNodesChange: handleNodesChange,
@@ -21880,6 +21946,7 @@ var FlowBuilder = () => {
               snapGrid: [16, 16],
               snapToGrid: true,
               fitView: true,
+              fitViewOptions: { minZoom: 1, maxZoom: 1 },
               defaultEdgeOptions: edgeOptions,
               children: /* @__PURE__ */ jsx(Background, { gap: 24 })
             }
@@ -22154,5 +22221,5 @@ function WorkflowBuilder() {
 }
 
 export { Card2 as Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ConfigSchemaForm, ConnectionFormDialog, ConnectionSelector, FluidGridsProvider, ProviderPicker, TemplateCard, WorkflowBuilder, getProviderForm, listCustomBlocks, refetchStoreNodes, registerCustomBlock, resolveUiSpec, stripSubmitActions, useConnection, useConnectionDialog, useConnections, useConnectionsByProvider, useCreateConnection, useFluidGridsContext, useImportWorkflowTemplate, useInitiateOAuth, useNodeExecution, useProviderByKey, useProviderCatalog, useProviders, useWorkflowTemplates };
-//# sourceMappingURL=chunk-WPCOE4Z5.js.map
-//# sourceMappingURL=chunk-WPCOE4Z5.js.map
+//# sourceMappingURL=chunk-5GIC24CM.js.map
+//# sourceMappingURL=chunk-5GIC24CM.js.map