@burdenoff/fluidgrids-fe-sdk 2026.701.8 → 2026.703.1

package/dist/{chunk-GX57DKBG.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, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, 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 } 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
     }
   ) });
@@ -7313,6 +7301,19 @@ function ArrayField({
     description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: description })
   ] });
 }
+function slimNodeDataToCurrentOperation(data) {
+  const nodeData = data.nodeData;
+  if (!nodeData) return data;
+  const opName = data.operation_name;
+  const rawOps = nodeData.operations;
+  const opsArray = Array.isArray(rawOps) ? rawOps : Array.isArray(rawOps?.operations) ? rawOps.operations : [];
+  const current = opName ? opsArray.find((o) => o?.name === opName) : void 0;
+  if (!current) {
+    const { nodeData: _omit, ...rest } = data;
+    return rest;
+  }
+  return { ...data, nodeData: { ...nodeData, operations: [current] } };
+}
 function useSaveWorkflow() {
   const [isSaving, setIsSaving] = useState(false);
   const params = useParams();
@@ -7335,9 +7336,12 @@ function useSaveWorkflow() {
       const preparedWorkflow = {
         ...workflow,
         nodes: workflow.nodes?.map((n) => {
-          const { nodeData: _ignoredNodeData, ...flattenedData } = n.data ?? {};
-          void _ignoredNodeData;
-          return { ...n, ...flattenedData };
+          const slimData = slimNodeDataToCurrentOperation(
+            n.data ?? {}
+          );
+          const { nodeData: _slimNodeData, ...flattenedData } = slimData;
+          void _slimNodeData;
+          return { ...n, data: slimData, ...flattenedData };
         })
       };
       const definitionJson = {
@@ -7764,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",
@@ -7984,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([
@@ -8773,7 +8814,7 @@ var getNodeMetadata = (value) => {
     }, [data?.isAdapterInstance, edges, id, nodeLookup]);
     const nodeType = value?.type;
     const meta = useMemo(() => getNodeDetail(nodeType), [nodeType]);
-    const { updateNode, getNode, setNodes } = useReactFlow();
+    const { setNodes } = useReactFlow();
     const [
       showNodePropertiesOf,
       isExecuting,
@@ -8832,81 +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" }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx("div", { className: "flex flex-col p-4", children: /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-card-foreground", children: "Select Operation" }) }),
-                value?.operations && /* @__PURE__ */ jsx("div", { className: "space-y-4 ", children: /* @__PURE__ */ jsxs(
-                  Select,
-                  {
-                    value: data?.operation_name,
-                    onValueChange: (val) => {
-                      const op = value?.operations?.find(
-                        (operation) => operation.name === val
-                      );
-                      if (op) {
-                        updateNode(id, {
-                          data: {
-                            ...getNode(id)?.data,
-                            operation_name: op.name,
-                            operation_type: op.type,
-                            args: {
-                              state: { ...op?.adaptive_card?.defaultValue },
-                              context: getNode(id)?.data?.args?.context
-                            }
-                          }
-                        });
-                      }
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select Operation" }) }),
-                      /* @__PURE__ */ jsx(SelectContent, { children: value?.operations?.map((operation) => /* @__PURE__ */ jsx(
-                        SelectItem,
-                        {
-                          value: operation.name,
-                          children: operation.name
-                        },
-                        operation.name
-                      )) })
-                    ]
-                  }
-                ) })
-              ] }),
-              /* @__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(
@@ -8915,7 +8943,8 @@ var getNodeMetadata = (value) => {
                 type: "source",
                 id: "source",
                 position: Position.Right,
-                isConnectable
+                isConnectable,
+                accent: roleAccent
               }
             )
           ]
@@ -9310,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;
@@ -11453,6 +11488,7 @@ gql$1`
 
 // src/builder/contants/symbols.ts
 var NODE_TYPE_DRAG_DATA_FORMAT = "application/flow-builder.node-type";
+var NODE_OPERATION_DRAG_DATA_FORMAT = "application/flow-builder.node-operation";
 function StoreNodeListItem({
   name,
   description,
@@ -11852,6 +11888,99 @@ var UninstallNodeDialog = ({
     ] })
   ] }) });
 };
+function isTriggerOperation(op) {
+  return op.role === "trigger" || !!op.delivery || op.type === "subscription";
+}
+function StoreNodeOperations({ nodeType }) {
+  const [, bump] = useState(0);
+  useEffect(() => onNodeTypesUpdate(() => bump((n) => n + 1)), []);
+  const config2 = nodeType ? NODE_CONFIGS.find((c) => c.type === nodeType) : void 0;
+  const operations = config2?.operations ?? [];
+  const handleDragStart = useCallback(
+    (e, opName) => {
+      if (!nodeType) return;
+      e.dataTransfer.setData(NODE_TYPE_DRAG_DATA_FORMAT, nodeType);
+      if (opName)
+        e.dataTransfer.setData(NODE_OPERATION_DRAG_DATA_FORMAT, opName);
+      e.dataTransfer.effectAllowed = "move";
+    },
+    [nodeType]
+  );
+  if (!nodeType) return null;
+  if (operations.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "px-3 pt-3 pb-1", children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        draggable: true,
+        onDragStart: (e) => handleDragStart(e),
+        title: "Drag to add to canvas",
+        className: "w-full flex items-center gap-2.5 px-2 py-2 rounded-md hover:bg-muted/60 transition-colors text-left group",
+        style: { cursor: "grab" },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "size-7 shrink-0 rounded-md bg-muted flex items-center justify-center", children: /* @__PURE__ */ jsx(Icon, { icon: "mynaui:plus", className: "size-3.5 text-primary" }) }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm font-medium text-foreground group-hover:text-primary transition-colors", children: "Add to canvas" }),
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              icon: "mynaui:drag-dots-vertical",
+              className: "size-4 shrink-0 text-foreground/40 group-hover:text-primary transition-colors"
+            }
+          )
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "px-3 pt-3 pb-1", children: [
+    /* @__PURE__ */ jsx("p", { className: "px-1 pb-2 text-xs font-medium text-muted-foreground", children: "Operations \u2014 drag one onto the canvas" }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5", children: operations.map((op) => {
+      const isTrigger = isTriggerOperation(op);
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          draggable: true,
+          onDragStart: (e) => handleDragStart(e, op.name),
+          title: `${op.name} \u2014 drag to add to canvas`,
+          className: "w-full flex items-center gap-2.5 px-2 py-2 rounded-md hover:bg-muted/60 transition-colors text-left group",
+          style: { cursor: "grab" },
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "size-7 shrink-0 rounded-md bg-muted flex items-center justify-center", children: /* @__PURE__ */ jsx(
+              Icon,
+              {
+                icon: isTrigger ? "solar:play-bold" : "mynaui:bolt",
+                className: "size-3.5 text-primary"
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground group-hover:text-primary transition-colors truncate", children: op.name }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "shrink-0 inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-semibold",
+                    style: {
+                      background: isTrigger ? "var(--color-status-info-bgSubtle)" : "var(--color-status-neutral-bgSubtle, var(--muted))",
+                      color: isTrigger ? "var(--color-status-info-text)" : "var(--muted-foreground)"
+                    },
+                    children: isTrigger ? "Trigger" : "Action"
+                  }
+                )
+              ] }),
+              op.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground truncate mt-0.5 leading-snug", children: op.description })
+            ] }),
+            /* @__PURE__ */ jsx(
+              Icon,
+              {
+                icon: "mynaui:drag-dots-vertical",
+                className: "size-4 shrink-0 text-foreground/40 group-hover:text-primary transition-colors"
+              }
+            )
+          ]
+        },
+        op.name
+      );
+    }) })
+  ] });
+}
 function formatDownloads(count2) {
   if (count2 >= 1e6) return `${(count2 / 1e6).toFixed(1)}M`;
   if (count2 >= 1e3) return `${(count2 / 1e3).toFixed(1)}k`;
@@ -11877,6 +12006,8 @@ function StoreNodeDetail({ node, onBack }) {
   const context = useContext(FluidGridsContext);
   const workspaceId = context?.workspaceId ?? getFluidGridsConfig().workspaceId;
   const isInstalled = installedAppIds.has(node.id);
+  const manifestNodeType = node.manifest?.nodeType;
+  const nodeType = manifestNodeType ?? (isInstalled ? `store/${node.slug}` : void 0);
   const installation = installationsMap.get(node.id);
   const installedVersion = installation?.installedVersion;
   const installationId = installation?.installationId;
@@ -12093,6 +12224,7 @@ function StoreNodeDetail({ node, onBack }) {
         ] })
       ] }),
       node.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground/80 leading-relaxed mb-4", children: node.description }),
+      isInstalled && /* @__PURE__ */ jsx("div", { className: "mb-4 -mx-3 rounded-lg border border-border/50", children: /* @__PURE__ */ jsx(StoreNodeOperations, { nodeType }) }),
       node.publisher && /* @__PURE__ */ jsxs("div", { className: "mb-4 p-2.5 rounded-lg bg-muted/50 flex items-center gap-2", children: [
         /* @__PURE__ */ jsx("div", { className: "size-6 rounded bg-muted flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-muted-foreground", children: node.publisher.name.charAt(0) }) }),
         /* @__PURE__ */ jsx("span", { className: "text-xs text-foreground font-medium flex-1 min-w-0 truncate", children: node.publisher.name }),
@@ -18337,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,
@@ -18353,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);
@@ -18909,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(
@@ -18945,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",
       {
@@ -19132,10 +19282,31 @@ var useAddNodeOnEdgeDropStore = create()(
     }
   })
 );
+function buildOperationSeed(type, operationName, existingData) {
+  const config2 = NODE_CONFIGS.find((c) => c.type === type);
+  if (!config2) return null;
+  const operations = config2.operations ?? [];
+  const op = operations.find((o) => o.name === operationName);
+  if (!op) return null;
+  const manifest = config2.defaultData?.nodeData;
+  const prevArgs = existingData.args ?? {};
+  return {
+    ...existingData,
+    operation_name: op.name,
+    operation_type: op.type,
+    args: {
+      // Preserve default context/credentials; seed state from the op defaults.
+      ...prevArgs,
+      state: { ...op.adaptive_card?.defaultValue ?? {} }
+    },
+    // Slim manifest: keep node-level metadata but only the pinned operation.
+    nodeData: { ...manifest ?? {}, operations: [op] }
+  };
+}
 function useInsertNode() {
   const { addNodes, screenToFlowPosition, getNodes, updateNode } = useReactFlow();
   return useCallback(
-    (type, pos) => {
+    (type, pos, operationName) => {
       const _pos = pos || screenToFlowPosition({
         x: window.innerWidth / 2,
         y: window.innerHeight / 2
@@ -19149,6 +19320,14 @@ function useInsertNode() {
         position: _pos,
         selected: true
       });
+      if (operationName) {
+        const seeded = buildOperationSeed(
+          type,
+          operationName,
+          newNode.data ?? {}
+        );
+        if (seeded) newNode.data = seeded;
+      }
       addNodes(newNode);
       return newNode;
     },
@@ -19254,12 +19433,14 @@ function useDragDropFlowBuilder() {
       e.preventDefault();
       const type = e.dataTransfer.getData(NODE_TYPE_DRAG_DATA_FORMAT);
       if (typeof type === "undefined" || !type) return;
+      const operationName = e.dataTransfer.getData(NODE_OPERATION_DRAG_DATA_FORMAT) || void 0;
       insertNode(
         type,
         screenToFlowPosition({
           x: e.clientX,
           y: e.clientY
-        })
+        }),
+        operationName
       );
     },
     [insertNode, screenToFlowPosition]
@@ -19550,9 +19731,12 @@ function AddNodeFloatingMenu({
       };
     });
     const fromHandleId = _incomingNodeMetadetails?.fromHandle?.id;
+    const connectableNodes = AVAILABLE_NODES.filter(
+      (node) => node.publishType !== "STORE"
+    );
     return {
       availableNodes: mapNodesWithMetadata(
-        fromHandleId === "source" || fromHandleId === "target" ? AVAILABLE_NODES.map((node) => node.type) : AVAILABLE_NODES.filter(
+        fromHandleId === "source" || fromHandleId === "target" ? connectableNodes.map((node) => node.type) : connectableNodes.filter(
           (node) => node?.manifest?.kind?.includes(fromHandleId ?? "")
         ).map((node) => node.type)
       ),
@@ -21528,7 +21712,7 @@ var edgeTypes2 = {
   deletable: CustomDeletableEdge
 };
 var edgeOptions = {
-  type: "smoothstep",
+  type: "deletable",
   markerEnd: {
     type: MarkerType.ArrowClosed,
     width: 21,
@@ -21741,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,
@@ -21762,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 })
             }
@@ -22036,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-GX57DKBG.js.map
-//# sourceMappingURL=chunk-GX57DKBG.js.map
+//# sourceMappingURL=chunk-5GIC24CM.js.map
+//# sourceMappingURL=chunk-5GIC24CM.js.map