@burdenoff/fluidgrids-fe-sdk 2026.801.1 → 2026.801.2

package/dist/{chunk-2XMPJHCW.js → chunk-KOXWDM2E.js}

@@ -1,10 +1,10 @@
 import { Dialog as Dialog$1, DialogContent as DialogContent$1, DialogHeader as DialogHeader$1, DialogTitle as DialogTitle$1, DialogDescription as DialogDescription$1, Input as Input$1, DialogFooter } from './chunk-MRVS73S2.js';
 import { Badge as Badge$1, Button } from './chunk-DBOMRIP5.js';
-import { refetchStoreNodes, registerWorkflowNodeTypes, ensureNodeConfigsLoaded, onNodeTypesUpdate, NODE_TYPES, getNodeMetadata, AVAILABLE_NODES, useInsertNode, NODE_TYPE_DRAG_DATA_FORMAT, NODE_OPERATION_DRAG_DATA_FORMAT, useSaveWorkflow, STICKY_NOTE_TYPE, useNodeExecution, getNodeDetail, ConnectionSelector, mergeStickyNotes, buildStickyNode, NODES_METADATA, NODE_CONFIGS, isNodeConfigsInitialized, NODES, NodePropertyPanel } from './chunk-IVKT244I.js';
+import { refetchStoreNodes, registerWorkflowNodeTypes, ensureNodeConfigsLoaded, onNodeTypesUpdate, NODE_TYPES, getNodeMetadata, AVAILABLE_NODES, useInsertNode, NODE_TYPE_DRAG_DATA_FORMAT, NODE_OPERATION_DRAG_DATA_FORMAT, useSaveWorkflow, STICKY_NOTE_TYPE, useNodeExecution, getNodeDetail, mergeStickyNotes, buildStickyNode, ConnectionSelector, nodeAccent, NODES_METADATA, isNodeConfigsInitialized, NODE_CONFIGS, NODES, NodePropertyPanel, resolveInputHandles } from './chunk-XBMHUJYN.js';
 import { createGlobalStoreClient, setGlobalStoreClient, resetGlobalStoreClient, getGlobalStoreClient } from './chunk-BQXHJIER.js';
 import { BrowseWorkflowTemplatesDocument, InstallWorkflowNodeDocument, InstallPurchasedNodeDocument, GetMyNodeInstallationsDocument, BrowseWorkflowNodesDocument, UninstallWorkflowNodeDocument, CreateStoreOrderDocument } from './chunk-PNOA7CQV.js';
 import { useLazyWorkflowDefinition, useCreateWorkflow, useWorkflowVersions, useRestoreWorkflowVersion, useActivateWorkflow, useDeleteWorkflow, useDeactivateWorkflow } from './chunk-NMS2QUXG.js';
-import { useFlowStore } from './chunk-KU64CCSV.js';
+import { useFlowStore } from './chunk-WSBRI47P.js';
 import { SdkPermissionButton, FLUIDGRIDS_PERMISSIONS } from './chunk-UIY2HBWA.js';
 import { cn } from './chunk-3ZYUGTIT.js';
 import { throwIfResultError, NodeSchemaIntrospectionDocument, EventRegistrationsDocument, NodeUsageStatusDocument, RemoveNodeFromWorkflowsDocument } from './chunk-XEYNX7YJ.js';
@@ -2868,6 +2868,57 @@ var UninstallNodeDialog = ({
     ] })
   ] }) });
 };
+
+// src/builder/hooks/attach-node-helpers.ts
+var ATTACH_GAP_X = 120;
+var DEFAULT_NODE_WIDTH = 288;
+function computeAttachPosition(source) {
+  if (!source) return void 0;
+  const width = source.measured?.width ?? DEFAULT_NODE_WIDTH;
+  return {
+    x: source.position.x + width + ATTACH_GAP_X,
+    y: source.position.y
+  };
+}
+function firstInputHandleId(data) {
+  return resolveInputHandles(data)[0]?.id ?? "target";
+}
+
+// src/builder/hooks/use-attach-store-node.ts
+function useAddNodeFromStore() {
+  const { getNode } = useReactFlow();
+  const insertNode = useInsertNode();
+  return useCallback(
+    (nodeType, operationName) => {
+      const store = useFlowStore.getState();
+      const pending = store.workflow.pendingConnection;
+      if (!pending) {
+        insertNode(nodeType, void 0, operationName);
+        return { attached: false };
+      }
+      const source = getNode(pending.nodeId);
+      const created = insertNode(
+        nodeType,
+        computeAttachPosition(source),
+        operationName
+      );
+      if (created?.id && source) {
+        store.actions.edges.onConnect({
+          source: pending.nodeId,
+          sourceHandle: pending.handleId,
+          target: created.id,
+          targetHandle: firstInputHandleId(
+            created.data
+          )
+        });
+      }
+      store.actions.pendingConnection.clear();
+      store.actions.sidebar.setActivePanel("none");
+      return { attached: true };
+    },
+    [getNode, insertNode]
+  );
+}
 function isTriggerOperation(op) {
   return op.role === "trigger" || !!op.delivery || op.type === "subscription";
 }
@@ -2879,6 +2930,9 @@ function userSelectableOperations(ops) {
 function StoreNodeOperations({ nodeType }) {
   const [, bump] = useState(0);
   useEffect(() => onNodeTypesUpdate(() => bump((n) => n + 1)), []);
+  const pendingConnection = useFlowStore((s) => s.workflow.pendingConnection);
+  const addNodeFromStore = useAddNodeFromStore();
+  const attachMode = !!pendingConnection;
   const config = nodeType ? NODE_CONFIGS.find((c) => c.type === nodeType) : void 0;
   const operations = userSelectableOperations(
     config?.operations
@@ -2893,6 +2947,13 @@ function StoreNodeOperations({ nodeType }) {
     },
     [nodeType]
   );
+  const handleClick = useCallback(
+    (opName) => {
+      if (!nodeType) return;
+      addNodeFromStore(nodeType, opName);
+    },
+    [nodeType, addNodeFromStore]
+  );
   if (!nodeType) return null;
   if (operations.length === 0) {
     return /* @__PURE__ */ jsx("div", { className: "px-3 pt-3 pb-1", children: /* @__PURE__ */ jsxs(
@@ -2900,12 +2961,14 @@ function StoreNodeOperations({ nodeType }) {
       {
         draggable: true,
         onDragStart: (e) => handleDragStart(e),
-        title: "Drag to add to canvas",
+        onClick: () => handleClick(),
+        title: attachMode ? "Click to attach to the selected output" : "Click to add, or drag onto the 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" },
+        style: { cursor: attachMode ? "pointer" : "grab" },
+        "data-testid": "store-op-add-to-canvas",
         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("span", { className: "flex-1 text-sm font-medium text-foreground group-hover:text-primary transition-colors", children: attachMode ? "Attach to canvas" : "Add to canvas" }),
           /* @__PURE__ */ jsx(
             Icon,
             {
@@ -2918,17 +2981,22 @@ function StoreNodeOperations({ nodeType }) {
     ) });
   }
   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("p", { className: "px-1 pb-2 text-xs font-medium text-muted-foreground", children: attachMode ? "Operations \u2014 click one to attach it" : "Operations \u2014 click to add, or drag onto the canvas" }),
     /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5", children: operations.map((op) => {
       const isTrigger = isTriggerOperation(op);
+      const attachBlocked = attachMode && isTrigger;
       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" },
+          onClick: attachBlocked ? void 0 : () => handleClick(op.name),
+          title: attachBlocked ? "Triggers start a flow \u2014 they can't be attached to an output" : attachMode ? `${op.name} \u2014 click to attach to the selected output` : `${op.name} \u2014 click to add, or drag onto the canvas`,
+          className: `w-full flex items-center gap-2.5 px-2 py-2 rounded-md transition-colors text-left group ${attachBlocked ? "opacity-45" : "hover:bg-muted/60"}`,
+          style: {
+            cursor: attachBlocked ? "not-allowed" : attachMode ? "pointer" : "grab"
+          },
+          "data-testid": `store-op-${op.name}`,
           children: [
             /* @__PURE__ */ jsx("div", { className: "size-7 shrink-0 rounded-md bg-muted flex items-center justify-center", children: /* @__PURE__ */ jsx(
               Icon,
@@ -3345,6 +3413,65 @@ function StoreNodeDetail({ node, onBack }) {
     )
   ] });
 }
+function AttachModeBanner() {
+  const pendingConnection = useFlowStore((s) => s.workflow.pendingConnection);
+  const nodes = useFlowStore((s) => s.workflow.nodes);
+  const clearPending = useFlowStore((s) => s.actions.pendingConnection.clear);
+  if (!pendingConnection) return null;
+  const source = nodes.find((n) => n.id === pendingConnection.nodeId);
+  const data = source?.data;
+  const sourceTitle = typeof data?.label === "string" && data.label || getNodeDetail(source?.type).title || pendingConnection.nodeId;
+  const handleLabel = pendingConnection.handleId === "source" || pendingConnection.handleId === "output" ? void 0 : pendingConnection.handleId;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "mx-3 mt-3 shrink-0 rounded-lg border px-3 py-2",
+      style: {
+        borderColor: "var(--color-status-info-border)",
+        background: "var(--color-status-info-bgSubtle)"
+      },
+      "data-testid": "store-attach-banner",
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: "mynaui:git-branch",
+            className: "size-4 shrink-0",
+            style: { color: "var(--color-status-info-text)" }
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs(
+            "p",
+            {
+              className: "text-xs font-semibold leading-tight",
+              style: { color: "var(--color-status-info-text)" },
+              children: [
+                "Attaching after \u201C",
+                sourceTitle,
+                "\u201D",
+                handleLabel ? ` \u2192 ${handleLabel}` : ""
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: "text-[11px] leading-snug text-muted-foreground", children: "Click an operation below to add & connect it." })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Cancel attach",
+            title: "Cancel attach",
+            onClick: clearPending,
+            className: "shrink-0 rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+            "data-testid": "store-attach-cancel",
+            children: /* @__PURE__ */ jsx(Icon, { icon: "mdi:close", className: "size-3.5" })
+          }
+        )
+      ] })
+    }
+  );
+}
 function StoreBrowsePanel() {
   const [view, setView] = useState({ type: "categories" });
   const [globalSearch, setGlobalSearch] = useState("");
@@ -3370,6 +3497,7 @@ function StoreBrowsePanel() {
     });
   }, []);
   return /* @__PURE__ */ jsxs(SidebarPanelWrapper, { children: [
+    /* @__PURE__ */ jsx(AttachModeBanner, {}),
     view.type === "categories" && /* @__PURE__ */ jsxs("div", { className: "px-4 pt-4 pb-2 shrink-0 flex items-center gap-2", children: [
       /* @__PURE__ */ jsx("div", { className: "size-7 flex items-center justify-center rounded-lg bg-primary", children: /* @__PURE__ */ jsx(Icon, { icon: "mynaui:store", className: "size-4 text-white" }) }),
       /* @__PURE__ */ jsxs("div", { children: [
@@ -4075,7 +4203,7 @@ function DesktopSidebarFragment({
           if (nodes) {
             const requiredNodeTypes = [];
             try {
-              const { NODE_CONFIGS: NODE_CONFIGS3, ensureNodeConfigsLoaded: ensureNodeConfigsLoaded2 } = await import('./blocks-K5JPCH3D.js');
+              const { NODE_CONFIGS: NODE_CONFIGS3, ensureNodeConfigsLoaded: ensureNodeConfigsLoaded2 } = await import('./blocks-QKAWYAOT.js');
               await ensureNodeConfigsLoaded2().catch(() => {
               });
               const workflowNodeTypes = [
@@ -12629,6 +12757,8 @@ function useWebhookRegistration(workflowKey, triggerNodeId, enabled = true) {
     refetch: fetchData
   };
 }
+
+// src/builder/components/ndv/use-node-config.ts
 function coerceNumber(type, raw) {
   if (raw.trim() === "") return void 0;
   const n = type === "integer" ? parseInt(raw, 10) : parseFloat(raw);
@@ -12673,66 +12803,32 @@ function nodeSubtitle(node) {
   const data = asRecord(node?.data);
   return typeof data?.operation_name === "string" ? data.operation_name : void 0;
 }
-var SECTION_LABEL2 = "text-[11px] font-semibold uppercase tracking-[0.12em] text-muted-foreground";
-function NodeDetailView() {
-  const ndv = useFlowStore((s) => s.workflow.ndv);
+function useNodeConfig(target, options) {
   const nodes = useFlowStore((s) => s.workflow.nodes);
   const edges = useFlowStore((s) => s.workflow.edges);
-  const closeNdv = useFlowStore((s) => s.actions.ndv.close);
-  const showNodePropertiesOf = useFlowStore(
-    (s) => s.actions.sidebar.showNodePropertiesOf
-  );
-  const open = !!ndv;
+  const workflowKey = useFlowStore((s) => s.workflow.workflowKey);
+  const nodeId = target?.nodeId;
   const node = useMemo(
-    () => ndv ? nodes.find((n) => n.id === ndv.nodeId) : void 0,
-    [ndv, nodes]
+    () => nodeId ? nodes.find((n) => n.id === nodeId) : void 0,
+    [nodeId, nodes]
   );
   const incoming = useMemo(
-    () => ndv ? edges.filter((e) => e.target === ndv.nodeId) : [],
-    [edges, ndv]
+    () => nodeId ? edges.filter((e) => e.target === nodeId) : [],
+    [edges, nodeId]
   );
   const sourceIds = useMemo(() => incoming.map((e) => e.source), [incoming]);
   const sourceKey = sourceIds.join(",");
   const [selectedSource, setSelectedSource] = useState();
-  const [tab, setTab] = useState("parameters");
-  const [outputView, setOutputView] = useState("schema");
   const [dragField, setDragField] = useState(null);
   const [modeByField, setModeByField] = useState({});
-  const panesRef = useRef(null);
-  const dragCleanupRef = useRef(null);
-  const [leftPct, setLeftPct] = useState(30);
-  const [rightPct, setRightPct] = useState(30);
-  const startDrag = (which) => (e) => {
-    e.preventDefault();
-    const el = panesRef.current;
-    if (!el) return;
-    const rect = el.getBoundingClientRect();
-    const onMove = (ev) => {
-      const pct = (ev.clientX - rect.left) / rect.width * 100;
-      if (which === "left") setLeftPct(Math.min(55, Math.max(15, pct)));
-      else setRightPct(Math.min(55, Math.max(15, 100 - pct)));
-    };
-    const cleanup = () => {
-      window.removeEventListener("mousemove", onMove);
-      window.removeEventListener("mouseup", cleanup);
-      dragCleanupRef.current = null;
-    };
-    dragCleanupRef.current = cleanup;
-    window.addEventListener("mousemove", onMove);
-    window.addEventListener("mouseup", cleanup);
-  };
-  useEffect(() => () => dragCleanupRef.current?.(), []);
   useEffect(() => {
     setSelectedSource(
       (prev) => prev && sourceIds.includes(prev) ? prev : sourceIds[0]
     );
-  }, [ndv?.nodeId, sourceKey, sourceIds]);
-  useEffect(() => {
-    if (open) setTab("parameters");
-  }, [open, ndv?.nodeId]);
+  }, [nodeId, sourceKey, sourceIds]);
   useEffect(() => {
     setModeByField({});
-  }, [ndv?.nodeId, selectedSource]);
+  }, [nodeId, selectedSource]);
   const sourceNode = useMemo(
     () => nodes.find((n) => n.id === selectedSource),
     [nodes, selectedSource]
@@ -12762,11 +12858,10 @@ function NodeDetailView() {
     () => !!asRecord(currentOp?.output_fields)?.webhookUrl,
     [currentOp]
   );
-  const workflowKey = useFlowStore((s) => s.workflow.workflowKey);
   const { webhookUrl, loading: webhookUrlLoading } = useWebhookRegistration(
     workflowKey || void 0,
     node?.id,
-    isWebhookTrigger && open
+    isWebhookTrigger && (options?.webhookEnabled ?? true)
   );
   const pickerFields = useMemo(() => flattenFields(inputFields), [inputFields]);
   const mapping = currentEdge?.mapping?.definition ?? {};
@@ -12799,10 +12894,10 @@ function NodeDetailView() {
     return fromList(args?.credentials, "id");
   }, [node]);
   const handleConnectionsChange = (connections) => {
-    if (!ndv) return;
+    if (!nodeId) return;
     const store = useFlowStore.getState();
     const next = store.workflow.nodes.map((n) => {
-      if (n.id !== ndv.nodeId) return n;
+      if (n.id !== nodeId) return n;
       const data = { ...asRecord(n.data) ?? {} };
       const args = { ...asRecord(data.args) ?? {} };
       delete args.credentials;
@@ -12828,19 +12923,19 @@ function NodeDetailView() {
         ...e,
         mapping: {
           definition: def,
-          comment: e.mapping?.comment ?? `Map ${selectedSource} \u2192 ${ndv?.nodeId ?? ""}`
+          comment: e.mapping?.comment ?? `Map ${selectedSource} \u2192 ${nodeId ?? ""}`
         }
       };
     });
     store.actions.edges.setEdges(next);
   };
   const clearMappingFromAllIncoming = (field) => {
-    if (!ndv) return;
+    if (!nodeId) return;
     const store = useFlowStore.getState();
     const fresh = store.workflow.edges;
     let changed = false;
     const next = fresh.map((e) => {
-      if (e.target !== ndv.nodeId || !e.mapping?.definition) return e;
+      if (e.target !== nodeId || !e.mapping?.definition) return e;
       if (!(field in e.mapping.definition)) return e;
       const def = { ...e.mapping.definition };
       delete def[field];
@@ -12850,10 +12945,10 @@ function NodeDetailView() {
     if (changed) store.actions.edges.setEdges(next);
   };
   const writeFixed = (field, value) => {
-    if (!ndv) return;
+    if (!nodeId) return;
     const store = useFlowStore.getState();
     const next = store.workflow.nodes.map((n) => {
-      if (n.id !== ndv.nodeId) return n;
+      if (n.id !== nodeId) return n;
       const data = { ...asRecord(n.data) ?? {} };
       const args = { ...asRecord(data.args) ?? {} };
       const state = { ...asRecord(args.state) ?? {} };
@@ -12887,6 +12982,279 @@ function NodeDetailView() {
       setModeByField((m) => ({ ...m, [field]: "expression" }));
     }
   };
+  return {
+    node,
+    nodes,
+    incoming,
+    sourceIds,
+    selectedSource,
+    setSelectedSource,
+    currentEdge,
+    currentOp,
+    params,
+    argsState,
+    mapping,
+    inputFields,
+    outputFields,
+    pickerFields,
+    connectionAdapters,
+    selectedConnections,
+    isWebhookTrigger,
+    webhookUrl,
+    webhookUrlLoading,
+    modeByField,
+    dragField,
+    setDragField,
+    writeFixed,
+    writeMapping,
+    handleConnectionsChange,
+    toggleMode,
+    handleDropOnParam
+  };
+}
+var SECTION_LABEL2 = "text-[11px] font-semibold uppercase tracking-[0.12em] text-muted-foreground";
+function NodeParamsForm({
+  config,
+  nodeType,
+  testIdPrefix = "ndv"
+}) {
+  const {
+    params,
+    argsState,
+    mapping,
+    pickerFields,
+    connectionAdapters,
+    selectedConnections,
+    isWebhookTrigger,
+    webhookUrl,
+    webhookUrlLoading,
+    currentEdge,
+    modeByField,
+    dragField,
+    setDragField,
+    writeFixed,
+    writeMapping,
+    handleConnectionsChange,
+    toggleMode,
+    handleDropOnParam
+  } = config;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isWebhookTrigger && /* @__PURE__ */ jsx(WebhookUrlField, { webhookUrl, loading: webhookUrlLoading }),
+    connectionAdapters.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-2", "data-testid": `${testIdPrefix}-connections`, children: [
+      /* @__PURE__ */ jsx("div", { className: SECTION_LABEL2, children: "Connections" }),
+      /* @__PURE__ */ jsx(
+        ConnectionSelector,
+        {
+          adapters: connectionAdapters,
+          selectedConnections,
+          onChange: handleConnectionsChange,
+          compact: true
+        }
+      )
+    ] }),
+    !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];
+      const isCodeParam = p.type === "code" || nodeType === "internal:code" && p.name === "code";
+      const highlight = dragField === p.name;
+      const inputCx = cn$1(
+        "w-full rounded-md border bg-background px-2.5 py-1.5 text-sm outline-none transition-colors disabled:opacity-50",
+        highlight ? "border-primary ring-1 ring-primary" : "border-input focus:border-primary"
+      );
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex flex-col gap-1.5",
+          onDragOver: (e) => e.preventDefault(),
+          onDragEnter: () => setDragField(p.name),
+          onDragLeave: () => setDragField((f) => f === p.name ? null : f),
+          onDrop: handleDropOnParam(p.name),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-foreground", children: p.name }),
+              p.required && /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" }),
+              /* @__PURE__ */ jsx("span", { className: "ml-auto text-[10px] uppercase tracking-wide text-muted-foreground", children: p.type }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => toggleMode(p.name, mode),
+                  title: mode === "expression" ? "Switch to a fixed value" : "Switch to an expression",
+                  "data-testid": `${testIdPrefix}-mode-${p.name}`,
+                  className: cn$1(
+                    "ml-1 rounded p-0.5 hover:text-foreground",
+                    mode === "expression" ? "text-primary" : "text-muted-foreground"
+                  ),
+                  children: /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      icon: mode === "expression" ? "mdi:variable" : "mdi:form-textbox",
+                      className: "size-3.5"
+                    }
+                  )
+                }
+              )
+            ] }),
+            mode === "expression" ? /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                value: exprValue,
+                placeholder: currentEdge ? "Drop a field or type ${output.\u2026}" : "Connect an upstream node to use expressions",
+                disabled: !currentEdge,
+                onChange: (e) => writeMapping(p.name, e.target.value),
+                "data-testid": `${testIdPrefix}-param-${p.name}`,
+                className: cn$1(inputCx, "font-mono text-primary")
+              }
+            ) : isCodeParam ? /* @__PURE__ */ jsx(
+              CodeEditorField,
+              {
+                value: typeof fixedValue === "string" ? fixedValue : "",
+                language: normalizeCodeLanguage(
+                  argsState.runtime ?? params.find((f) => f.name === "runtime")?.defaultValue
+                ),
+                placeholder: typeof p.defaultValue === "string" ? p.defaultValue : p.description,
+                onChange: (v) => writeFixed(p.name, v),
+                "data-testid": `${testIdPrefix}-param-${p.name}`
+              }
+            ) : p.type === "boolean" ? /* @__PURE__ */ jsxs("label", { className: "flex w-fit cursor-pointer items-center gap-2 text-sm", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: fixedValue === true,
+                  onChange: (e) => writeFixed(p.name, e.target.checked),
+                  "data-testid": `${testIdPrefix}-param-${p.name}`,
+                  className: "size-4"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: fixedValue === void 0 ? "Not set (default)" : fixedValue === true ? "true" : "false" })
+            ] }) : p.options && p.options.length > 0 ? /* @__PURE__ */ jsxs(
+              "select",
+              {
+                value: typeof fixedValue === "string" ? fixedValue : "",
+                onChange: (e) => writeFixed(p.name, e.target.value),
+                "data-testid": `${testIdPrefix}-param-${p.name}`,
+                className: inputCx,
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "", children: p.defaultValue !== void 0 ? `Default (${String(p.defaultValue)})` : "Select\u2026" }),
+                  p.options.map((o) => /* @__PURE__ */ jsx("option", { value: o, children: o }, o))
+                ]
+              }
+            ) : p.type === "integer" || p.type === "number" ? /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                step: p.type === "integer" ? "1" : "any",
+                value: typeof fixedValue === "number" ? String(fixedValue) : "",
+                placeholder: p.defaultValue !== void 0 ? `Default: ${String(p.defaultValue)}` : "Enter a number",
+                onChange: (e) => writeFixed(p.name, coerceNumber(p.type, e.target.value)),
+                "data-testid": `${testIdPrefix}-param-${p.name}`,
+                className: inputCx
+              }
+            ) : /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                value: fixedValue === void 0 || fixedValue === null ? "" : String(fixedValue),
+                placeholder: p.defaultValue !== void 0 ? `Default: ${String(p.defaultValue)}` : "Enter a value",
+                onChange: (e) => writeFixed(p.name, e.target.value),
+                "data-testid": `${testIdPrefix}-param-${p.name}`,
+                className: inputCx
+              }
+            ),
+            p.description && /* @__PURE__ */ jsx("span", { className: "text-[11px] leading-snug text-muted-foreground", children: p.description })
+          ]
+        },
+        p.name
+      );
+    })
+  ] });
+}
+var SECTION_LABEL3 = "text-[11px] font-semibold uppercase tracking-[0.12em] text-muted-foreground";
+function NodeDetailView() {
+  const ndv = useFlowStore((s) => s.workflow.ndv);
+  const closeNdv = useFlowStore((s) => s.actions.ndv.close);
+  const showNodePropertiesOf = useFlowStore(
+    (s) => s.actions.sidebar.showNodePropertiesOf
+  );
+  const open = !!ndv;
+  const config = useNodeConfig(ndv ?? null, { webhookEnabled: open });
+  const {
+    node,
+    nodes,
+    sourceIds,
+    selectedSource,
+    setSelectedSource,
+    currentOp,
+    inputFields,
+    outputFields
+  } = config;
+  const [tab, setTab] = useState("parameters");
+  const [outputView, setOutputView] = useState("schema");
+  const panesRef = useRef(null);
+  const dragCleanupRef = useRef(null);
+  const [leftPct, setLeftPct] = useState(30);
+  const [rightPct, setRightPct] = useState(30);
+  const startDrag = (which) => (e) => {
+    e.preventDefault();
+    const el = panesRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const onMove = (ev) => {
+      const pct = (ev.clientX - rect.left) / rect.width * 100;
+      if (which === "left") setLeftPct(Math.min(55, Math.max(15, pct)));
+      else setRightPct(Math.min(55, Math.max(15, 100 - pct)));
+    };
+    const cleanup = () => {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", cleanup);
+      dragCleanupRef.current = null;
+    };
+    dragCleanupRef.current = cleanup;
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", cleanup);
+  };
+  useEffect(() => () => dragCleanupRef.current?.(), []);
+  useEffect(() => {
+    if (open) setTab("parameters");
+  }, [open, ndv?.nodeId]);
   const openClassicPanel = () => {
     if (!ndv) return;
     showNodePropertiesOf({
@@ -12944,7 +13312,7 @@ function NodeDetailView() {
               className: "flex min-h-0 min-w-[180px] flex-col bg-card/40",
               children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-4 py-2.5", children: [
-                  /* @__PURE__ */ jsx("span", { className: SECTION_LABEL2, children: "Input" }),
+                  /* @__PURE__ */ jsx("span", { className: SECTION_LABEL3, children: "Input" }),
                   sourceIds.length > 0 && /* @__PURE__ */ jsx(
                     "select",
                     {
@@ -12997,188 +13365,19 @@ function NodeDetailView() {
                 }
               )
             ] }),
-            tab === "parameters" ? /* @__PURE__ */ jsxs(
+            tab === "parameters" ? /* @__PURE__ */ jsx(
               "div",
               {
                 className: "min-h-0 flex-1 space-y-4 overflow-auto p-4",
                 "data-testid": "ndv-params",
-                children: [
-                  isWebhookTrigger && /* @__PURE__ */ jsx(
-                    WebhookUrlField,
-                    {
-                      webhookUrl,
-                      loading: webhookUrlLoading
-                    }
-                  ),
-                  connectionAdapters.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-2", "data-testid": "ndv-connections", children: [
-                    /* @__PURE__ */ jsx("div", { className: SECTION_LABEL2, children: "Connections" }),
-                    /* @__PURE__ */ jsx(
-                      ConnectionSelector,
-                      {
-                        adapters: connectionAdapters,
-                        selectedConnections,
-                        onChange: handleConnectionsChange,
-                        compact: true
-                      }
-                    )
-                  ] }),
-                  !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];
-                    const isCodeParam = p.type === "code" || node?.type === "internal:code" && p.name === "code";
-                    const highlight = dragField === p.name;
-                    const inputCx = cn$1(
-                      "w-full rounded-md border bg-background px-2.5 py-1.5 text-sm outline-none transition-colors disabled:opacity-50",
-                      highlight ? "border-primary ring-1 ring-primary" : "border-input focus:border-primary"
-                    );
-                    return /* @__PURE__ */ jsxs(
-                      "div",
-                      {
-                        className: "flex flex-col gap-1.5",
-                        onDragOver: (e) => e.preventDefault(),
-                        onDragEnter: () => setDragField(p.name),
-                        onDragLeave: () => setDragField((f) => f === p.name ? null : f),
-                        onDrop: handleDropOnParam(p.name),
-                        children: [
-                          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-                            /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-foreground", children: p.name }),
-                            p.required && /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" }),
-                            /* @__PURE__ */ jsx("span", { className: "ml-auto text-[10px] uppercase tracking-wide text-muted-foreground", children: p.type }),
-                            /* @__PURE__ */ jsx(
-                              "button",
-                              {
-                                type: "button",
-                                onClick: () => toggleMode(p.name, mode),
-                                title: mode === "expression" ? "Switch to a fixed value" : "Switch to an expression",
-                                "data-testid": `ndv-mode-${p.name}`,
-                                className: cn$1(
-                                  "ml-1 rounded p-0.5 hover:text-foreground",
-                                  mode === "expression" ? "text-primary" : "text-muted-foreground"
-                                ),
-                                children: /* @__PURE__ */ jsx(
-                                  Icon,
-                                  {
-                                    icon: mode === "expression" ? "mdi:variable" : "mdi:form-textbox",
-                                    className: "size-3.5"
-                                  }
-                                )
-                              }
-                            )
-                          ] }),
-                          mode === "expression" ? /* @__PURE__ */ jsx(
-                            "input",
-                            {
-                              type: "text",
-                              value: exprValue,
-                              placeholder: currentEdge ? "Drop a field or type ${output.\u2026}" : "Connect an upstream node to use expressions",
-                              disabled: !currentEdge,
-                              onChange: (e) => writeMapping(p.name, e.target.value),
-                              "data-testid": `ndv-param-${p.name}`,
-                              className: cn$1(inputCx, "font-mono text-primary")
-                            }
-                          ) : isCodeParam ? /* @__PURE__ */ jsx(
-                            CodeEditorField,
-                            {
-                              value: typeof fixedValue === "string" ? fixedValue : "",
-                              language: normalizeCodeLanguage(
-                                argsState.runtime ?? params.find((f) => f.name === "runtime")?.defaultValue
-                              ),
-                              placeholder: typeof p.defaultValue === "string" ? p.defaultValue : p.description,
-                              onChange: (v) => writeFixed(p.name, v),
-                              "data-testid": `ndv-param-${p.name}`
-                            }
-                          ) : p.type === "boolean" ? /* @__PURE__ */ jsxs("label", { className: "flex w-fit cursor-pointer items-center gap-2 text-sm", children: [
-                            /* @__PURE__ */ jsx(
-                              "input",
-                              {
-                                type: "checkbox",
-                                checked: fixedValue === true,
-                                onChange: (e) => writeFixed(p.name, e.target.checked),
-                                "data-testid": `ndv-param-${p.name}`,
-                                className: "size-4"
-                              }
-                            ),
-                            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: fixedValue === void 0 ? "Not set (default)" : fixedValue === true ? "true" : "false" })
-                          ] }) : p.options && p.options.length > 0 ? /* @__PURE__ */ jsxs(
-                            "select",
-                            {
-                              value: typeof fixedValue === "string" ? fixedValue : "",
-                              onChange: (e) => writeFixed(p.name, e.target.value),
-                              "data-testid": `ndv-param-${p.name}`,
-                              className: inputCx,
-                              children: [
-                                /* @__PURE__ */ jsx("option", { value: "", children: p.defaultValue !== void 0 ? `Default (${String(p.defaultValue)})` : "Select\u2026" }),
-                                p.options.map((o) => /* @__PURE__ */ jsx("option", { value: o, children: o }, o))
-                              ]
-                            }
-                          ) : p.type === "integer" || p.type === "number" ? /* @__PURE__ */ jsx(
-                            "input",
-                            {
-                              type: "number",
-                              step: p.type === "integer" ? "1" : "any",
-                              value: typeof fixedValue === "number" ? String(fixedValue) : "",
-                              placeholder: p.defaultValue !== void 0 ? `Default: ${String(p.defaultValue)}` : "Enter a number",
-                              onChange: (e) => writeFixed(
-                                p.name,
-                                coerceNumber(p.type, e.target.value)
-                              ),
-                              "data-testid": `ndv-param-${p.name}`,
-                              className: inputCx
-                            }
-                          ) : /* @__PURE__ */ jsx(
-                            "input",
-                            {
-                              type: "text",
-                              value: fixedValue === void 0 || fixedValue === null ? "" : String(fixedValue),
-                              placeholder: p.defaultValue !== void 0 ? `Default: ${String(p.defaultValue)}` : "Enter a value",
-                              onChange: (e) => writeFixed(p.name, e.target.value),
-                              "data-testid": `ndv-param-${p.name}`,
-                              className: inputCx
-                            }
-                          ),
-                          p.description && /* @__PURE__ */ jsx("span", { className: "text-[11px] leading-snug text-muted-foreground", children: p.description })
-                        ]
-                      },
-                      p.name
-                    );
-                  })
-                ]
+                children: /* @__PURE__ */ jsx(
+                  NodeParamsForm,
+                  {
+                    config,
+                    nodeType: node?.type,
+                    testIdPrefix: "ndv"
+                  }
+                )
               }
             ) : /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto p-4 text-xs text-muted-foreground", children: "No additional settings for this node." })
           ] }),
@@ -13190,7 +13389,7 @@ function NodeDetailView() {
               className: "flex min-h-0 min-w-[180px] flex-col bg-card/40",
               children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-4 py-2.5", children: [
-                  /* @__PURE__ */ jsx("span", { className: SECTION_LABEL2, children: "Output" }),
+                  /* @__PURE__ */ jsx("span", { className: SECTION_LABEL3, children: "Output" }),
                   outputFields.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-1", children: [
                     /* @__PURE__ */ jsx(
                       ToggleChip,
@@ -13292,6 +13491,255 @@ function EmptyState({
     /* @__PURE__ */ jsx("div", { className: "max-w-[14rem] text-xs text-muted-foreground", children: hint })
   ] });
 }
+var PANEL_WIDTH = 380;
+var PANEL_EST_HEIGHT = 480;
+var MAPPER_WIDTH = 260;
+var VIEWPORT_MARGIN = 12;
+function clampToViewport(pos) {
+  const maxX = window.innerWidth - PANEL_WIDTH - VIEWPORT_MARGIN;
+  const maxY = window.innerHeight - PANEL_EST_HEIGHT - VIEWPORT_MARGIN;
+  return {
+    x: Math.min(
+      Math.max(VIEWPORT_MARGIN, pos.x),
+      Math.max(VIEWPORT_MARGIN, maxX)
+    ),
+    y: Math.min(
+      Math.max(VIEWPORT_MARGIN, pos.y),
+      Math.max(VIEWPORT_MARGIN, maxY)
+    )
+  };
+}
+function QuickConfigPanel() {
+  const quickConfig = useFlowStore((s) => s.workflow.quickConfig);
+  if (!quickConfig) return null;
+  return (
+    // Remount per node so panel position/flyout state reset naturally.
+    /* @__PURE__ */ jsx(
+      QuickConfigPanelInner,
+      {
+        nodeId: quickConfig.nodeId,
+        type: quickConfig.type,
+        anchor: quickConfig.anchor
+      },
+      quickConfig.nodeId
+    )
+  );
+}
+function QuickConfigPanelInner({
+  nodeId,
+  type,
+  anchor
+}) {
+  const close = useFlowStore((s) => s.actions.quickConfig.close);
+  const openNdv = useFlowStore((s) => s.actions.ndv.open);
+  const config = useNodeConfig({ nodeId});
+  const {
+    node,
+    nodes,
+    sourceIds,
+    selectedSource,
+    setSelectedSource,
+    inputFields
+  } = config;
+  const [pos, setPos] = useState(
+    () => clampToViewport(
+      anchor ?? {
+        x: window.innerWidth / 2 - PANEL_WIDTH / 2,
+        y: window.innerHeight / 4
+      }
+    )
+  );
+  const [showMapper, setShowMapper] = useState(false);
+  const dragStateRef = useRef(null);
+  const handleHeaderPointerDown = useCallback(
+    (e) => {
+      if (e.target.closest("button")) return;
+      dragStateRef.current = {
+        startX: e.clientX,
+        startY: e.clientY,
+        baseX: pos.x,
+        baseY: pos.y
+      };
+      const onMove = (ev) => {
+        const s = dragStateRef.current;
+        if (!s) return;
+        setPos(
+          clampToViewport({
+            x: s.baseX + (ev.clientX - s.startX),
+            y: s.baseY + (ev.clientY - s.startY)
+          })
+        );
+      };
+      const onUp = () => {
+        dragStateRef.current = null;
+        window.removeEventListener("pointermove", onMove);
+        window.removeEventListener("pointerup", onUp);
+      };
+      window.addEventListener("pointermove", onMove);
+      window.addEventListener("pointerup", onUp);
+    },
+    [pos.x, pos.y]
+  );
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === "Escape") close();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [close]);
+  useEffect(() => {
+    if (!nodes.some((n) => n.id === nodeId)) close();
+  }, [nodes, nodeId, close]);
+  if (!node) return null;
+  const meta = getNodeDetail(node.type);
+  const accent = nodeAccent(node.type || meta.title);
+  const subtitle = nodeSubtitle(node);
+  const expandToNdv = () => {
+    openNdv({ nodeId, type });
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "fixed",
+      style: { left: pos.x, top: pos.y, zIndex: 300, width: PANEL_WIDTH },
+      "data-testid": "quick-config-panel",
+      children: [
+        showMapper && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "absolute overflow-hidden rounded-xl border border-border bg-card shadow-xl",
+            style: {
+              right: "100%",
+              marginRight: 10,
+              top: 0,
+              width: MAPPER_WIDTH,
+              maxHeight: "min(60vh, 480px)",
+              display: "flex",
+              flexDirection: "column"
+            },
+            "data-testid": "quick-config-mapper",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2 border-b border-border px-3 py-2", children: [
+                /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    icon: "mdi:tray-arrow-down",
+                    className: "size-3.5 text-muted-foreground"
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "text-[11px] font-semibold uppercase tracking-[0.12em] text-muted-foreground", children: "Input" }),
+                sourceIds.length > 0 && /* @__PURE__ */ jsx(
+                  "select",
+                  {
+                    className: "ml-auto max-w-[55%] truncate rounded-md border border-input bg-background px-1.5 py-0.5 text-[11px] text-foreground outline-none focus:border-primary",
+                    value: selectedSource ?? "",
+                    onChange: (e) => setSelectedSource(e.target.value),
+                    "data-testid": "qc-source-selector",
+                    children: sourceIds.map((sid) => {
+                      const sn = nodes.find((n) => n.id === sid);
+                      return /* @__PURE__ */ jsx("option", { value: sid, children: nodeTitle(sn) }, sid);
+                    })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto px-2 py-2", children: inputFields.length > 0 ? /* @__PURE__ */ jsx(FieldTree, { fields: inputFields, draggable: true }) : /* @__PURE__ */ jsx("p", { className: "px-2 py-4 text-center text-xs text-muted-foreground", children: sourceIds.length === 0 ? "Connect an upstream node to map its fields." : "The selected source has no declared output fields." }) }),
+              /* @__PURE__ */ jsx("p", { className: "shrink-0 border-t border-border px-3 py-1.5 text-[10px] leading-snug text-muted-foreground", children: "Drag a field onto a parameter to map it." })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex flex-col overflow-hidden rounded-xl border border-border bg-card shadow-2xl animate-in fade-in zoom-in-95 duration-150",
+            style: {
+              maxHeight: "min(70vh, 560px)",
+              borderTop: `3px solid ${accent}`
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "flex shrink-0 cursor-move items-center gap-2.5 border-b border-border px-3 py-2.5 select-none",
+                  onPointerDown: handleHeaderPointerDown,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "flex size-7 shrink-0 items-center justify-center rounded-lg",
+                        style: {
+                          backgroundColor: `color-mix(in srgb, ${accent} 13%, transparent)`,
+                          color: accent,
+                          border: `1px solid color-mix(in srgb, ${accent} 26%, transparent)`
+                        },
+                        children: /* @__PURE__ */ jsx(Icon, { icon: meta.icon, className: "size-4" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                      /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-semibold leading-tight text-foreground", children: nodeTitle(node) }),
+                      subtitle && /* @__PURE__ */ jsx("p", { className: "truncate font-mono text-[11px] leading-tight text-muted-foreground", children: subtitle })
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        title: showMapper ? "Hide input data" : "Map data from input",
+                        "aria-label": "Toggle input mapper",
+                        onClick: () => setShowMapper((v) => !v),
+                        className: `rounded-md p-1.5 transition-colors hover:bg-muted ${showMapper ? "text-primary" : "text-muted-foreground"} hover:text-foreground`,
+                        "data-testid": "qc-toggle-mapper",
+                        children: /* @__PURE__ */ jsx(Icon, { icon: "mdi:tray-arrow-down", className: "size-4" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        title: "Open full editor",
+                        "aria-label": "Open full editor",
+                        onClick: expandToNdv,
+                        className: "rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+                        "data-testid": "qc-expand",
+                        children: /* @__PURE__ */ jsx(Icon, { icon: "mdi:arrow-expand", className: "size-4" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        title: "Close",
+                        "aria-label": "Close",
+                        onClick: close,
+                        className: "rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+                        "data-testid": "qc-close",
+                        children: /* @__PURE__ */ jsx(Icon, { icon: "mdi:close", className: "size-4" })
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "min-h-0 flex-1 space-y-4 overflow-auto p-3",
+                  "data-testid": "qc-params",
+                  children: /* @__PURE__ */ jsx(
+                    NodeParamsForm,
+                    {
+                      config,
+                      nodeType: node.type,
+                      testIdPrefix: "qc"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { className: "shrink-0 border-t border-border px-3 py-1.5 text-[10px] leading-snug text-muted-foreground", children: "Changes apply instantly \xB7 double-click the node for the full editor" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
 var STATUS_STYLES = {
   DRAFT: { label: "Draft", variant: "secondary" },
   ACTIVE: { label: "Active", variant: "default" },
@@ -13786,6 +14234,7 @@ var FlowBuilder = ({ readOnly = false }) => {
       ];
     })
   );
+  const closeQuickConfig = useFlowStore((s) => s.actions.quickConfig.close);
   const [nodeTypesVersion, setNodeTypesVersion] = useState(0);
   useEffect(() => {
     return onNodeTypesUpdate(() => setNodeTypesVersion((v) => v + 1));
@@ -14040,6 +14489,7 @@ var FlowBuilder = ({ readOnly = false }) => {
               onNodeDragStop: (_, node) => {
                 autoAdjustNode(node);
               },
+              onPaneClick: closeQuickConfig,
               onNodesDelete,
               isValidConnection,
               nodesDraggable: !isReadOnly,
@@ -14072,6 +14522,7 @@ var FlowBuilder = ({ readOnly = false }) => {
     /* @__PURE__ */ jsx(ChatPanel, {}),
     /* @__PURE__ */ jsx(LogsPanel, {}),
     /* @__PURE__ */ jsx(NodeDetailView, {}),
+    /* @__PURE__ */ jsx(QuickConfigPanel, {}),
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -14310,7 +14761,7 @@ function WorkflowItem({
               };
               const requiredNodeTypes = [];
               try {
-                const { NODE_CONFIGS: NODE_CONFIGS3, ensureNodeConfigsLoaded: ensureNodeConfigsLoaded2 } = await import('./blocks-K5JPCH3D.js');
+                const { NODE_CONFIGS: NODE_CONFIGS3, ensureNodeConfigsLoaded: ensureNodeConfigsLoaded2 } = await import('./blocks-QKAWYAOT.js');
                 await ensureNodeConfigsLoaded2().catch(() => {
                 });
                 const workflowNodeTypes = [
@@ -14608,5 +15059,5 @@ function WorkflowBuilder() {
 }
 
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, FlowBuilderPage, FluidGridsProvider, TemplateCard, WorkflowBuilder, useFluidGridsContext, useImportWorkflowTemplate, useWorkflowTemplates };
-//# sourceMappingURL=chunk-2XMPJHCW.js.map
-//# sourceMappingURL=chunk-2XMPJHCW.js.map
+//# sourceMappingURL=chunk-KOXWDM2E.js.map
+//# sourceMappingURL=chunk-KOXWDM2E.js.map