@burdenoff/fluidgrids-fe-sdk 2026.703.2 → 2026.706.1

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

@@ -9,17 +9,17 @@ import { config, getFluidGridsConfig, validateTrustedOrigin, setFluidGridsConfig
 import { deepClone, applyTemplateInputs } from './chunk-XQP33UJR.js';
 import { cn as cn$1, Badge as Badge$1, Button as Button$1 } from './chunk-Z54K22LP.js';
 import { ThemeProvider as ThemeProvider$1 } from '@burdenoff/fe-libs/shared/providers/shell';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 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, EdgeLabelRenderer, getOutgoers, useNodes, useNodesState, useEdgesState, addEdge, Controls, Panel } from '@xyflow/react';
+import * as React from 'react';
+import React__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, useUpdateNodeInternals, 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 { Icon } from '@iconify/react';
 import { cn } from '@burdenoff/fe-libs/utils';
 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';
 import { gql } from '@apollo/client';
@@ -64,6 +64,255 @@ function useDeleteNode() {
     [deleteElements, getEdges, getNode, deleteNode, deleteEdge]
   );
 }
+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 = React.forwardRef(
+  ({
+    className,
+    selected = false,
+    executionStatus = "idle",
+    itemCount,
+    isTrigger = false,
+    accent = "#3b82f6",
+    onSettings,
+    onExecute,
+    onDelete,
+    isExecuting = false,
+    infoButton,
+    children,
+    ...props
+  }, ref) => {
+    const [hovered, setHovered] = React.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 = React.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 = React.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";
 function CustomHandle({
   className,
   isConnectable,
@@ -105,7 +354,259 @@ function CustomHandle({
       } : void 0,
       ...props
     }
-  ) });
+  ) });
+}
+var TONE_COLORS = {
+  success: "var(--color-status-success-text)",
+  error: "var(--color-status-error-text)",
+  warning: "var(--color-status-warning-text)",
+  info: "#3b82f6",
+  neutral: "var(--muted-foreground, #6b7280)"
+};
+function isDynamicSpec(spec) {
+  return !!spec && !Array.isArray(spec) && typeof spec.fromStateRecord === "string";
+}
+var DEFAULT_HANDLES = [{ id: "source", label: "" }];
+function resolveOutputHandles(data) {
+  const nodeData = data?.nodeData;
+  const spec = nodeData?.outputHandles ?? nodeData?.operations?.outputHandles;
+  if (!spec) return DEFAULT_HANDLES;
+  if (isDynamicSpec(spec)) {
+    const args = data?.args;
+    const record = args?.state?.[spec.fromStateRecord] ?? data?.[spec.fromStateRecord] ?? {};
+    const dynamic = Object.entries(record).filter(([, handleId]) => typeof handleId === "string" && handleId).map(([label, handleId]) => ({ id: handleId, label }));
+    return [...dynamic, ...spec.extra ?? []];
+  }
+  if (spec.length === 0) return DEFAULT_HANDLES;
+  return spec;
+}
+function OutputHandles({
+  nodeId,
+  handles,
+  accent,
+  isConnectable
+}) {
+  const updateNodeInternals = useUpdateNodeInternals();
+  const signature = useMemo(
+    () => handles.map((h) => h.id).join("|"),
+    [handles]
+  );
+  useEffect(() => {
+    updateNodeInternals(nodeId);
+  }, [nodeId, signature, updateNodeInternals]);
+  if (handles.length === 1) {
+    const handle = handles[0];
+    return /* @__PURE__ */ jsx(
+      CustomHandle,
+      {
+        type: "source",
+        id: handle.id,
+        position: Position.Right,
+        isConnectable,
+        accent: handle.tone ? TONE_COLORS[handle.tone] : accent
+      }
+    );
+  }
+  const total = handles.length;
+  return /* @__PURE__ */ jsx(Fragment, { children: handles.map((handle, index) => {
+    const top = `${(index + 1) / (total + 1) * 100}%`;
+    const color = handle.tone ? TONE_COLORS[handle.tone] : accent;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "absolute right-0",
+        style: { top, transform: "translateY(-50%)" },
+        children: [
+          /* @__PURE__ */ jsx(
+            CustomHandle,
+            {
+              type: "source",
+              id: handle.id,
+              position: Position.Right,
+              isConnectable,
+              accent: color
+            }
+          ),
+          handle.label && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "pointer-events-none absolute whitespace-nowrap text-[10px] font-medium leading-none",
+              style: {
+                color,
+                left: "100%",
+                marginLeft: 16,
+                top: "50%",
+                transform: "translateY(-50%)"
+              },
+              title: handle.label,
+              children: handle.label
+            }
+          )
+        ]
+      },
+      handle.id
+    );
+  }) });
+}
+var DEFAULT_INPUT_HANDLES = [{ id: "target", label: "" }];
+function resolveInputHandles(data) {
+  const nodeData = data?.nodeData;
+  const spec = nodeData?.inputHandles ?? nodeData?.operations?.inputHandles;
+  if (!Array.isArray(spec) || spec.length === 0) return DEFAULT_INPUT_HANDLES;
+  return spec;
+}
+function InputHandles({
+  nodeId,
+  handles,
+  accent,
+  isConnectable
+}) {
+  const updateNodeInternals = useUpdateNodeInternals();
+  const signature = useMemo(
+    () => handles.map((h) => h.id).join("|"),
+    [handles]
+  );
+  useEffect(() => {
+    updateNodeInternals(nodeId);
+  }, [nodeId, signature, updateNodeInternals]);
+  if (handles.length === 1) {
+    const handle = handles[0];
+    return /* @__PURE__ */ jsx(
+      CustomHandle,
+      {
+        type: "target",
+        id: handle.id,
+        position: Position.Left,
+        isConnectable,
+        accent: handle.tone ? TONE_COLORS[handle.tone] : accent
+      }
+    );
+  }
+  const total = handles.length;
+  return /* @__PURE__ */ jsx(Fragment, { children: handles.map((handle, index) => {
+    const top = `${(index + 1) / (total + 1) * 100}%`;
+    const color = handle.tone ? TONE_COLORS[handle.tone] : accent;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "absolute left-0",
+        style: { top, transform: "translateY(-50%)" },
+        children: [
+          /* @__PURE__ */ jsx(
+            CustomHandle,
+            {
+              type: "target",
+              id: handle.id,
+              position: Position.Left,
+              isConnectable,
+              accent: color
+            }
+          ),
+          handle.label && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "pointer-events-none absolute whitespace-nowrap text-[10px] font-medium leading-none",
+              style: {
+                color,
+                right: "100%",
+                marginRight: 16,
+                top: "50%",
+                transform: "translateY(-50%)"
+              },
+              title: handle.label,
+              children: handle.label
+            }
+          )
+        ]
+      },
+      handle.id
+    );
+  }) });
+}
+function outputHandlesSpacerHeight(count2) {
+  return count2 > 2 ? (count2 - 2) * 26 : 0;
+}
+function LogicNodeCard({
+  title,
+  subtitle,
+  icon,
+  accent,
+  selected,
+  executionStatus,
+  itemCount,
+  isTrigger,
+  isExecuting,
+  nodeId,
+  inputHandles,
+  outputHandles,
+  isConnectable,
+  onDoubleClick,
+  onSettings,
+  onExecute,
+  onDelete,
+  infoButton
+}) {
+  const minHeight = Math.max(
+    64,
+    Math.max(outputHandles.length, inputHandles.length) * 30 + 24
+  );
+  return /* @__PURE__ */ jsxs(
+    NodeCard,
+    {
+      className: "w-48",
+      "data-selected": selected,
+      selected,
+      onDoubleClick,
+      executionStatus,
+      itemCount,
+      isTrigger,
+      accent,
+      isExecuting,
+      onSettings,
+      onExecute,
+      onDelete,
+      infoButton,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex flex-col items-center justify-center gap-1 px-3 py-3 text-center",
+            style: { minHeight },
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "flex size-9 items-center justify-center rounded-lg bg-muted", children: /* @__PURE__ */ jsx(Icon, { icon, className: "size-5", style: { color: accent } }) }),
+              /* @__PURE__ */ jsx("span", { className: "max-w-full truncate text-sm font-semibold leading-tight", children: title }),
+              subtitle && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "max-w-full truncate font-mono text-[10px] text-muted-foreground",
+                  title: subtitle,
+                  children: subtitle
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          InputHandles,
+          {
+            nodeId,
+            handles: inputHandles,
+            accent,
+            isConnectable
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          OutputHandles,
+          {
+            nodeId,
+            handles: outputHandles,
+            accent,
+            isConnectable
+          }
+        )
+      ]
+    }
+  );
 }
 
 // src/modules/ui-blocks/registry.ts
@@ -173,27 +674,27 @@ function ExpressionEditor({
               "button",
               {
                 type: "button",
-                onClick: () => insertTemplate("{{input.}}"),
+                onClick: () => insertTemplate("${TriggerInput.}"),
                 className: "text-xs px-2 py-0.5 rounded bg-primary/10 text-primary hover:bg-primary/20 transition-colors",
-                children: "{{input}}"
+                children: "${TriggerInput}"
               }
             ),
             /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
-                onClick: () => insertTemplate("{{output.}}"),
+                onClick: () => insertTemplate("${output.}"),
                 className: "text-xs px-2 py-0.5 rounded bg-primary/10 text-primary hover:bg-primary/20 transition-colors",
-                children: "{{output}}"
+                children: "${output}"
               }
             ),
             /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
-                onClick: () => insertTemplate("{{$node['']}}"),
+                onClick: () => insertTemplate("${WorkflowState[''].output}"),
                 className: "text-xs px-2 py-0.5 rounded bg-primary/10 text-primary hover:bg-primary/20 transition-colors",
-                children: "{{$node}}"
+                children: "${WorkflowState}"
               }
             )
           ] }),
@@ -7752,271 +8253,22 @@ function NodePropertyPanel({
         /* @__PURE__ */ jsx("div", { className: "font-medium text-card-foreground", children: "Connection handled automatically" }),
         /* @__PURE__ */ jsx("div", { children: "This node uses the workspace BigConsole app connection at run time. You only need to configure the DataSink target below." })
       ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex pt-5 flex-col", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-xs text-card-foreground/60 font-semibold", children: "Properties" }),
-      resolvedUi ? /* @__PURE__ */ jsx(
-        BlocksRenderer,
-        {
-          spec: resolvedUi.spec,
-          synthesized: resolvedUi.synthesized,
-          state: sampleData2,
-          onApply: submittedData
-        },
-        `${id}:${data?.operation_name ?? ""}`
-      ) : /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground py-2", children: "No Properties" })
-    ] })
-  ] });
-}
-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",
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex pt-5 flex-col", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-xs text-card-foreground/60 font-semibold", children: "Properties" }),
+      resolvedUi ? /* @__PURE__ */ jsx(
+        BlocksRenderer,
         {
-          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";
+          spec: resolvedUi.spec,
+          synthesized: resolvedUi.synthesized,
+          state: sampleData2,
+          onApply: submittedData
+        },
+        `${id}:${data?.operation_name ?? ""}`
+      ) : /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground py-2", children: "No Properties" })
+    ] })
+  ] });
+}
 var nodeDetails = {
   node_type: "gmail_reader",
   version: "1.0.0",
@@ -8873,7 +9125,12 @@ 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 nodeKinds = data?.nodeData?.kind;
+    const pinnedOpType = (data?.operation_type || "").toLowerCase();
+    const isTrigger = pinnedOpType === "trigger" || (value?.type || "").toLowerCase().includes("trigger") || // Kind-based detection only when NO operation is pinned: dual-role
+    // nodes (e.g. Gmail: trigger kind + action operations) must follow
+    // their pinned operation's role, not the manifest kind.
+    Array.isArray(nodeKinds) && nodeKinds.includes("trigger") && pinnedOpType === "";
     const appName = (meta.title || nodeType || "Node").split(/\s+/)[0].toUpperCase();
     const operationDisplay = nodeType === "integration/channel" ? (() => {
       const explicitRole = data.args?.state?.role;
@@ -8885,6 +9142,65 @@ var getNodeMetadata = (value) => {
       (value?.type || "").toLowerCase()
     );
     const roleAccent = isTrigger ? "#10b981" : isLogicNode ? "#f59e0b" : "#3b82f6";
+    const outputHandles = resolveOutputHandles(
+      data
+    );
+    const inputHandles = resolveInputHandles(
+      data
+    );
+    const handleSpacer = outputHandlesSpacerHeight(
+      Math.max(outputHandles.length, inputHandles.length)
+    );
+    const manifestKind = data?.nodeData?.kind;
+    const isControlFlowNode = (value?.type || "").startsWith("internal:") && (Array.isArray(manifestKind) ? manifestKind.includes("control") : isLogicNode);
+    if (isControlFlowNode) {
+      const argsState = data?.args?.state;
+      const rules = argsState?.rules;
+      const mode = argsState?.mode;
+      const logicSubtitle = Array.isArray(rules) ? `${rules.length} rule${rules.length === 1 ? "" : "s"}` : typeof mode === "string" ? mode : void 0;
+      return /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          LogicNodeCard,
+          {
+            nodeId: id,
+            title: data?.label || meta.title,
+            subtitle: logicSubtitle,
+            icon: meta.icon,
+            accent: roleAccent,
+            selected: !!selected,
+            executionStatus,
+            itemCount,
+            isTrigger,
+            isExecuting: isThisNodeExecuting,
+            inputHandles,
+            outputHandles,
+            isConnectable: typeof isConnectable === "boolean" ? isConnectable : void 0,
+            onDoubleClick: handleOpenNdv,
+            onSettings: handleShowNodeProperties,
+            onExecute: handleExecuteStep,
+            onDelete: handleDeleteNode,
+            infoButton: /* @__PURE__ */ jsx(
+              NodeInfoButtonWithModal,
+              {
+                metadata: {
+                  icon: meta.icon,
+                  title: meta.title,
+                  description: nodeDescription,
+                  gradientColor: meta.gradientColor
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          AdapterConnectors,
+          {
+            nodeId: id,
+            adapters: data?.nodeData?.nodeAdapters
+          }
+        )
+      ] });
+    }
     return /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsxs(
         NodeCard,
@@ -8920,31 +9236,35 @@ var getNodeMetadata = (value) => {
                 accentKey: value?.type || meta.title
               }
             ),
-            /* @__PURE__ */ jsx(
+            operationDisplay === "execute" && (value?.type || "").startsWith("internal:") || isTrigger ? (
+              // Internal single-op nodes ('execute') and triggers: the operation
+              // name is an implementation detail, not a user choice — show only
+              // the description (n8n-style).
+              /* @__PURE__ */ jsx("div", { className: "rounded-b-xl border-t border-border/60 px-3 pb-3 pt-2.5", children: /* @__PURE__ */ jsx("p", { className: "line-clamp-2 text-xs leading-snug text-muted-foreground", children: nodeDescription }) })
+            ) : /* @__PURE__ */ jsx(
               NodeCardBody,
               {
                 operationName: operationDisplay,
                 description: nodeDescription
               }
             ),
-            /* @__PURE__ */ jsx(
-              CustomHandle,
+            handleSpacer > 0 && /* @__PURE__ */ jsx("div", { style: { height: handleSpacer } }),
+            !isTrigger && /* @__PURE__ */ jsx(
+              InputHandles,
               {
-                type: "target",
-                id: "target",
-                position: Position.Left,
-                isConnectable,
-                accent: roleAccent
+                nodeId: id,
+                handles: inputHandles,
+                accent: roleAccent,
+                isConnectable: typeof isConnectable === "boolean" ? isConnectable : void 0
               }
             ),
             /* @__PURE__ */ jsx(
-              CustomHandle,
+              OutputHandles,
               {
-                type: "source",
-                id: "source",
-                position: Position.Right,
-                isConnectable,
-                accent: roleAccent
+                nodeId: id,
+                handles: outputHandles,
+                accent: roleAccent,
+                isConnectable: typeof isConnectable === "boolean" ? isConnectable : void 0
               }
             )
           ]
@@ -12490,7 +12810,7 @@ function TemplateCard({
   onClick,
   onUseTemplate
 }) {
-  const [imageError, setImageError] = React2__default.useState(false);
+  const [imageError, setImageError] = React__default.useState(false);
   const previewImage = template.screenshots?.[0] || template.icon || void 0;
   const hasPreview = Boolean(previewImage) && !imageError;
   const handleUseTemplate = (e) => {
@@ -13350,7 +13670,7 @@ function ThemeProvider2({
   defaultTheme = "system",
   storageKey = "vite-ui-theme"
 }) {
-  React2.useEffect(() => {
+  React.useEffect(() => {
     if (typeof window !== "undefined") {
       try {
         localStorage.removeItem(storageKey);
@@ -14270,8 +14590,8 @@ function toast5({ ...props }) {
   };
 }
 function useToast() {
-  const [state, setState] = React2.useState(memoryState);
-  React2.useEffect(() => {
+  const [state, setState] = React.useState(memoryState);
+  React.useEffect(() => {
     listeners.push(setState);
     return () => {
       const index = listeners.indexOf(setState);
@@ -19290,6 +19610,9 @@ function buildOperationSeed(type, operationName, existingData) {
   if (!op) return null;
   const manifest = config2.defaultData?.nodeData;
   const prevArgs = existingData.args ?? {};
+  const manifestOps = manifest?.operations;
+  const outputHandles = manifest?.outputHandles ?? manifestOps?.outputHandles;
+  const inputHandles = manifest?.inputHandles ?? manifestOps?.inputHandles;
   return {
     ...existingData,
     operation_name: op.name,
@@ -19300,7 +19623,12 @@ function buildOperationSeed(type, operationName, existingData) {
       state: { ...op.adaptive_card?.defaultValue ?? {} }
     },
     // Slim manifest: keep node-level metadata but only the pinned operation.
-    nodeData: { ...manifest ?? {}, operations: [op] }
+    nodeData: {
+      ...manifest ?? {},
+      ...outputHandles !== void 0 ? { outputHandles } : {},
+      ...inputHandles !== void 0 ? { inputHandles } : {},
+      operations: [op]
+    }
   };
 }
 function useInsertNode() {
@@ -19320,10 +19648,18 @@ function useInsertNode() {
         position: _pos,
         selected: true
       });
-      if (operationName) {
+      let pinTo = operationName;
+      if (!pinTo) {
+        const config2 = NODE_CONFIGS.find((c) => c.type === type);
+        const ops = config2?.operations ?? [];
+        if (ops.length === 1 && ops[0]?.name) {
+          pinTo = ops[0].name;
+        }
+      }
+      if (pinTo) {
         const seeded = buildOperationSeed(
           type,
-          operationName,
+          pinTo,
           newNode.data ?? {}
         );
         if (seeded) newNode.data = seeded;
@@ -20907,6 +21243,449 @@ function FieldTree({
     field.path
   )) });
 }
+function emptyGroup() {
+  return { type: "group", combinator: "AND", children: [] };
+}
+function emptyRule(field = "") {
+  return { type: "rule", field, operator: "==", value: "" };
+}
+var OPERATORS2 = {
+  string: [
+    { value: "==", label: "equals", needsValue: true },
+    { value: "!=", label: "not equals", needsValue: true },
+    { value: "contains", label: "contains", needsValue: true },
+    { value: "notContains", label: "does not contain", needsValue: true },
+    { value: "startsWith", label: "starts with", needsValue: true },
+    { value: "endsWith", label: "ends with", needsValue: true },
+    { value: "regex", label: "matches regex", needsValue: true },
+    { value: "isEmpty", label: "is empty", needsValue: false },
+    { value: "isNotEmpty", label: "is not empty", needsValue: false },
+    { value: "isNull", label: "is null", needsValue: false },
+    { value: "isNotNull", label: "is not null", needsValue: false }
+  ],
+  number: [
+    { value: "==", label: "equals", needsValue: true },
+    { value: "!=", label: "not equals", needsValue: true },
+    { value: ">", label: "greater than", needsValue: true },
+    { value: ">=", label: "greater or equal", needsValue: true },
+    { value: "<", label: "less than", needsValue: true },
+    { value: "<=", label: "less or equal", needsValue: true },
+    { value: "isNull", label: "is null", needsValue: false },
+    { value: "isNotNull", label: "is not null", needsValue: false }
+  ],
+  boolean: [
+    { value: "isTrue", label: "is true", needsValue: false },
+    { value: "isFalse", label: "is false", needsValue: false },
+    { value: "isNull", label: "is null", needsValue: false },
+    { value: "isNotNull", label: "is not null", needsValue: false }
+  ],
+  array: [
+    { value: "contains", label: "contains", needsValue: true },
+    { value: "notContains", label: "does not contain", needsValue: true },
+    { value: "isEmpty", label: "is empty", needsValue: false },
+    { value: "isNotEmpty", label: "is not empty", needsValue: false },
+    { value: "isNull", label: "is null", needsValue: false },
+    { value: "isNotNull", label: "is not null", needsValue: false }
+  ],
+  object: [
+    { value: "hasProperty", label: "has property", needsValue: true },
+    { value: "isEmpty", label: "is empty", needsValue: false },
+    { value: "isNotEmpty", label: "is not empty", needsValue: false },
+    { value: "isNull", label: "is null", needsValue: false },
+    { value: "isNotNull", label: "is not null", needsValue: false }
+  ],
+  any: [
+    { value: "==", label: "equals", needsValue: true },
+    { value: "!=", label: "not equals", needsValue: true },
+    { value: ">", label: "greater than", needsValue: true },
+    { value: "<", label: "less than", needsValue: true },
+    { value: "contains", label: "contains", needsValue: true },
+    { value: "isEmpty", label: "is empty", needsValue: false },
+    { value: "isNotEmpty", label: "is not empty", needsValue: false },
+    { value: "isNull", label: "is null", needsValue: false },
+    { value: "isNotNull", label: "is not null", needsValue: false }
+  ]
+};
+function operatorsFor(type) {
+  return OPERATORS2[type ?? "any"] ?? OPERATORS2.any;
+}
+function flattenFields(nodes) {
+  const out = [];
+  const walk = (list) => {
+    for (const node of list) {
+      if (node.path) out.push({ path: node.path, type: node.type ?? "any" });
+      if (Array.isArray(node.children)) walk(node.children);
+    }
+  };
+  walk(nodes);
+  return out.sort((a, b) => a.path.localeCompare(b.path));
+}
+var rowInput = "rounded-md border border-input bg-background px-2 py-1 text-xs outline-none focus:border-primary";
+function RuleRow({
+  rule,
+  fields,
+  onChange,
+  onRemove
+}) {
+  const fieldType = fields.find((f) => f.path === rule.field)?.type ?? "any";
+  const ops = operatorsFor(fieldType);
+  const currentOp = ops.find((o) => o.value === rule.operator) ?? ops[0];
+  const knownField = fields.some((f) => f.path === rule.field);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex flex-wrap items-center gap-1.5",
+      "data-testid": "condition-rule",
+      children: [
+        fields.length > 0 && (knownField || rule.field === "") ? /* @__PURE__ */ jsxs(
+          "select",
+          {
+            value: rule.field,
+            onChange: (e) => {
+              const nextField = e.target.value;
+              const nextType = fields.find((f) => f.path === nextField)?.type ?? "any";
+              const nextOps = operatorsFor(nextType);
+              const operator = nextOps.some((o) => o.value === rule.operator) ? rule.operator : nextOps[0].value;
+              onChange({ ...rule, field: nextField, operator });
+            },
+            className: cn(rowInput, "max-w-[180px] flex-1"),
+            "data-testid": "condition-field",
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "", children: "Select field\u2026" }),
+              fields.map((f) => /* @__PURE__ */ jsxs("option", { value: f.path, children: [
+                f.path,
+                " (",
+                f.type,
+                ")"
+              ] }, f.path)),
+              /* @__PURE__ */ jsx("option", { value: "__custom__", children: "Custom path\u2026" })
+            ]
+          }
+        ) : /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            value: rule.field === "__custom__" ? "" : rule.field,
+            placeholder: "field.path",
+            onChange: (e) => onChange({ ...rule, field: e.target.value }),
+            className: cn(rowInput, "max-w-[180px] flex-1 font-mono"),
+            "data-testid": "condition-field"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "select",
+          {
+            value: currentOp.value,
+            onChange: (e) => onChange({ ...rule, operator: e.target.value }),
+            className: rowInput,
+            "data-testid": "condition-operator",
+            children: ops.map((o) => /* @__PURE__ */ jsx("option", { value: o.value, children: o.label }, o.value))
+          }
+        ),
+        currentOp.needsValue && /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: fieldType === "number" ? "number" : "text",
+            value: rule.value === null || rule.value === void 0 ? "" : String(rule.value),
+            placeholder: "value",
+            onChange: (e) => {
+              const raw = e.target.value;
+              const value = fieldType === "number" && raw.trim() !== "" && !Number.isNaN(Number(raw)) ? Number(raw) : raw;
+              onChange({ ...rule, value });
+            },
+            className: cn(rowInput, "min-w-[90px] flex-1"),
+            "data-testid": "condition-value"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onRemove,
+            title: "Remove condition",
+            className: "rounded p-1 text-muted-foreground hover:text-[var(--color-status-error-text)]",
+            children: /* @__PURE__ */ jsx(Icon, { icon: "mynaui:trash", className: "size-3.5" })
+          }
+        )
+      ]
+    }
+  );
+}
+function GroupEditor({
+  group,
+  fields,
+  depth,
+  onChange,
+  onRemove
+}) {
+  const setChild = (index, child) => {
+    const children = group.children.slice();
+    children[index] = child;
+    onChange({ ...group, children });
+  };
+  const removeChild = (index) => {
+    onChange({
+      ...group,
+      children: group.children.filter((_, i) => i !== index)
+    });
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col gap-1.5 rounded-md",
+        depth > 0 && "border border-border/70 bg-muted/20 p-2"
+      ),
+      "data-testid": `condition-group-depth-${depth}`,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex overflow-hidden rounded-md border border-input text-[10px] font-semibold", children: ["AND", "OR"].map((c) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onChange({ ...group, combinator: c }),
+              className: cn(
+                "px-2 py-0.5",
+                group.combinator === c ? "bg-primary text-primary-foreground" : "bg-background text-muted-foreground hover:text-foreground"
+              ),
+              "data-testid": `combinator-${c}`,
+              children: c
+            },
+            c
+          )) }),
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: group.combinator === "AND" ? "all conditions must match" : "any condition may match" }),
+          onRemove && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onRemove,
+              title: "Remove group",
+              className: "ml-auto rounded p-1 text-muted-foreground hover:text-[var(--color-status-error-text)]",
+              children: /* @__PURE__ */ jsx(Icon, { icon: "mynaui:trash", className: "size-3.5" })
+            }
+          )
+        ] }),
+        group.children.map(
+          (child, index) => child.type === "rule" ? /* @__PURE__ */ jsx(
+            RuleRow,
+            {
+              rule: child,
+              fields,
+              onChange: (next) => setChild(index, next),
+              onRemove: () => removeChild(index)
+            },
+            index
+          ) : /* @__PURE__ */ jsx(
+            GroupEditor,
+            {
+              group: child,
+              fields,
+              depth: depth + 1,
+              onChange: (next) => setChild(index, next),
+              onRemove: () => removeChild(index)
+            },
+            index
+          )
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => onChange({
+                ...group,
+                children: [...group.children, emptyRule(fields[0]?.path ?? "")]
+              }),
+              className: "flex items-center gap-1 text-[11px] font-medium text-primary hover:underline",
+              "data-testid": "add-condition",
+              children: [
+                /* @__PURE__ */ jsx(Icon, { icon: "basil:add-solid", className: "size-3.5" }),
+                " Add condition"
+              ]
+            }
+          ),
+          depth < 2 && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => onChange({
+                ...group,
+                children: [...group.children, emptyGroup()]
+              }),
+              className: "flex items-center gap-1 text-[11px] font-medium text-muted-foreground hover:text-foreground",
+              "data-testid": "add-group",
+              children: [
+                /* @__PURE__ */ jsx(Icon, { icon: "basil:add-solid", className: "size-3.5" }),
+                " Add group"
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function ConditionTreeBuilder({
+  value,
+  fields,
+  onChange
+}) {
+  const tree = value && typeof value === "object" && value.type === "group" ? value : emptyGroup();
+  return /* @__PURE__ */ jsx("div", { "data-testid": "condition-tree-builder", children: /* @__PURE__ */ jsx(
+    GroupEditor,
+    {
+      group: tree,
+      fields,
+      depth: 0,
+      onChange: (next) => onChange(next.children.length === 0 ? void 0 : next)
+    }
+  ) });
+}
+function newRuleHandle(existing) {
+  let n = existing.length;
+  const taken = new Set(existing.map((r) => r.handle));
+  let handle = `rule-${n}`;
+  while (taken.has(handle)) handle = `rule-${++n}`;
+  return handle;
+}
+function casesFromRules(rules) {
+  const cases = {};
+  rules.forEach((rule, index) => {
+    cases[rule.name || `Rule ${index + 1}`] = rule.handle;
+  });
+  return cases;
+}
+function SwitchRulesEditor({
+  rules,
+  fallbackHandle,
+  fields,
+  onChange
+}) {
+  const setRule = (index, rule) => {
+    const next = rules.slice();
+    next[index] = rule;
+    onChange({ rules: next, fallbackHandle });
+  };
+  const move = (index, dir) => {
+    const target = index + dir;
+    if (target < 0 || target >= rules.length) return;
+    const next = rules.slice();
+    const tmp = next[index];
+    next[index] = next[target];
+    next[target] = tmp;
+    onChange({ rules: next, fallbackHandle });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", "data-testid": "switch-rules-editor", children: [
+    rules.map((rule, index) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "rounded-md border border-border/70 bg-muted/10 p-2",
+        "data-testid": `switch-rule-${index}`,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "mb-1.5 flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsxs("span", { className: "text-[10px] font-semibold text-muted-foreground", children: [
+              index + 1,
+              "."
+            ] }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                value: rule.name,
+                placeholder: `Rule ${index + 1}`,
+                onChange: (e) => setRule(index, { ...rule, name: e.target.value }),
+                className: cn(rowInput, "flex-1 font-medium"),
+                "data-testid": "switch-rule-name"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => move(index, -1),
+                disabled: index === 0,
+                title: "Move up",
+                className: "rounded p-0.5 text-muted-foreground hover:text-foreground disabled:opacity-30",
+                children: /* @__PURE__ */ jsx(Icon, { icon: "mdi:chevron-up", className: "size-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => move(index, 1),
+                disabled: index === rules.length - 1,
+                title: "Move down",
+                className: "rounded p-0.5 text-muted-foreground hover:text-foreground disabled:opacity-30",
+                children: /* @__PURE__ */ jsx(Icon, { icon: "mdi:chevron-down", className: "size-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => onChange({
+                  rules: rules.filter((_, i) => i !== index),
+                  fallbackHandle
+                }),
+                title: "Remove rule",
+                className: "rounded p-0.5 text-muted-foreground hover:text-[var(--color-status-error-text)]",
+                children: /* @__PURE__ */ jsx(Icon, { icon: "mynaui:trash", className: "size-3.5" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            ConditionTreeBuilder,
+            {
+              value: rule.conditionTree,
+              fields,
+              onChange: (tree) => setRule(index, { ...rule, conditionTree: tree ?? emptyGroup() })
+            }
+          )
+        ]
+      },
+      rule.handle
+    )),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => onChange({
+          rules: [
+            ...rules,
+            {
+              name: `Rule ${rules.length + 1}`,
+              handle: newRuleHandle(rules),
+              conditionTree: emptyGroup()
+            }
+          ],
+          fallbackHandle
+        }),
+        className: "flex w-fit items-center gap-1 text-[11px] font-medium text-primary hover:underline",
+        "data-testid": "add-switch-rule",
+        children: [
+          /* @__PURE__ */ jsx(Icon, { icon: "basil:add-solid", className: "size-3.5" }),
+          " Add rule"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground", children: "Fallback output (no rule matches):" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          value: fallbackHandle,
+          placeholder: "default",
+          onChange: (e) => onChange({ rules, fallbackHandle: e.target.value }),
+          className: cn(rowInput, "w-28"),
+          "data-testid": "switch-fallback"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "text-[10px] leading-snug text-muted-foreground", children: "Rules are checked top-down; the first matching rule routes the item to its output. Each rule renders as an output handle on the node." })
+  ] });
+}
 function coerceNumber(type, raw) {
   if (raw.trim() === "") return void 0;
   const n = type === "integer" ? parseInt(raw, 10) : parseFloat(raw);
@@ -21036,6 +21815,7 @@ function NodeDetailView() {
     [currentOp]
   );
   const params = useMemo(() => paramsFromOperation(currentOp), [currentOp]);
+  const pickerFields = useMemo(() => flattenFields(inputFields), [inputFields]);
   const mapping = currentEdge?.mapping?.definition ?? {};
   const argsState = useMemo(() => {
     const data = asRecord(node?.data);
@@ -21284,6 +22064,40 @@ function NodeDetailView() {
                   ] }),
                   !currentEdge && /* @__PURE__ */ jsx("div", { className: "rounded-md border border-dashed border-border bg-muted/40 px-3 py-2 text-xs text-muted-foreground", children: "No upstream node connected \u2014 set fixed values below, or connect a node to map fields with expressions." }),
                   params.length === 0 ? /* @__PURE__ */ jsx("div", { className: "py-6 text-center text-xs text-muted-foreground", children: "This operation has no input parameters." }) : params.map((p) => {
+                    if (p.type === "condition") {
+                      return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+                        /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-foreground", children: p.name === "conditionTree" ? "Conditions" : p.name }),
+                        /* @__PURE__ */ jsx(
+                          ConditionTreeBuilder,
+                          {
+                            value: argsState[p.name],
+                            fields: pickerFields,
+                            onChange: (tree) => writeFixed(p.name, tree)
+                          }
+                        ),
+                        p.description && /* @__PURE__ */ jsx("span", { className: "text-[11px] leading-snug text-muted-foreground", children: p.description })
+                      ] }, p.name);
+                    }
+                    if (p.type === "switch-rules") {
+                      const rules = Array.isArray(argsState[p.name]) ? argsState[p.name] : [];
+                      const fallbackHandle = typeof argsState.fallbackHandle === "string" ? argsState.fallbackHandle : "default";
+                      return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+                        /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-foreground", children: "Routing rules" }),
+                        /* @__PURE__ */ jsx(
+                          SwitchRulesEditor,
+                          {
+                            rules,
+                            fallbackHandle,
+                            fields: pickerFields,
+                            onChange: (next) => {
+                              writeFixed(p.name, next.rules);
+                              writeFixed("cases", casesFromRules(next.rules));
+                              writeFixed("fallbackHandle", next.fallbackHandle);
+                            }
+                          }
+                        )
+                      ] }, p.name);
+                    }
                     const mode = modeByField[p.name] ?? (mapping[p.name] !== void 0 ? "expression" : "fixed");
                     const exprValue = mapping[p.name] ?? "";
                     const fixedValue = argsState[p.name];
@@ -22221,5 +23035,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-5GIC24CM.js.map
-//# sourceMappingURL=chunk-5GIC24CM.js.map
+//# sourceMappingURL=chunk-DPD5ILMD.js.map
+//# sourceMappingURL=chunk-DPD5ILMD.js.map