@burdenoff/fluidgrids-fe-sdk 2026.1109.9 → 2026.1110.2

package/dist/{chunk-U52PO4QQ.js → chunk-5V7PMLQN.js}

@@ -1,25 +1,62 @@
+import { asRecord, ConditionTreeBuilder, SwitchRulesEditor, casesFromRules, isStringOptionList, optionText, coerceNumber, paramsFromOperation, resolveLoadOptionsSpec, optionListValues, parseMappingValue, optionListText } from './chunk-PI4AW4T2.js';
 import { CodeEditorField, normalizeCodeLanguage } from './chunk-KZCNJAMK.js';
-import { Popover, PopoverTrigger, PopoverContent } from './chunk-GTEBQQ7J.js';
-import { asRecord, ConditionTreeBuilder, SwitchRulesEditor, casesFromRules, isStringOptionList, optionText, coerceNumber, paramsFromOperation, resolveLoadOptionsSpec, optionListValues, parseMappingValue, optionListText } from './chunk-NEB4Y7AX.js';
-import { AgentDefinitionSelectField } from './chunk-QTOPG7SR.js';
-import { isAgentNodeType } from './chunk-WZ3EJVS6.js';
 import { readAssertRulesSetting, rowsFromRules, normaliseAssertRules, ruleFromRow, describeAssertRuleProblem, operatorSpec, ASSERT_OPERATORS, emptyAssertRuleRow } from './chunk-JDLQ6QIB.js';
-import { isParamVisible, ConnectionSelector, structuredParameterType, useRunGuard, FluidGridsContext, ExpressionEditor, formatParameterValue, parseParameterValue, useFluidGridsAnalytics, openRunQuotaUpgradePrompt } from './chunk-VYXTP6YF.js';
+import { AgentDefinitionSelectField, ConnectionSelector } from './chunk-ZZBZPBO5.js';
+import { isAgentNodeType } from './chunk-WZ3EJVS6.js';
+import { FluidGridsContext, isParamVisible, structuredParameterType, useRunGuard, formatParameterValue, parseParameterValue, useFluidGridsAnalytics, openRunQuotaUpgradePrompt } from './chunk-DDINUPO3.js';
 import { useBuilderReadOnly } from './chunk-SDZEAIIE.js';
-import { useFlowStore } from './chunk-JXCJRBWD.js';
-import { useRunFromNodeEligibilityQuery, PreviewScheduleDocument, WebhookTestListenerDocument, StopWebhookTestListenerDocument, ListenForWebhookTestEventDocument } from './chunk-VAWYR6P4.js';
+import { useFlowStore } from './chunk-K2X63CR2.js';
+import { getGlobalStoreClient } from './chunk-TYI2XOSI.js';
+import { cn } from './chunk-JL7CASN5.js';
+import { useRunFromNodeEligibilityQuery, PreviewScheduleDocument, WebhookTestListenerDocument, StopWebhookTestListenerDocument, ListenForWebhookTestEventDocument } from './chunk-A6Q4FWB6.js';
 import { useTr } from './chunk-UULVIT25.js';
 import { getFluidGridsClientSafe, getFluidGridsClient } from './chunk-PDODDDHY.js';
 import { throwIfResultError, describeOperationError } from './chunk-JKLZ6YZ3.js';
-import { useId, useState, useMemo, useRef, useEffect, useContext, useCallback } from 'react';
+import { cn as cn$1 } from '@burdenoff/fe-libs/utils';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useContext, useId, useState, useMemo, useRef, useEffect, useCallback } from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { Icon } from '@iconify/react';
-import { cn } from '@burdenoff/fe-libs/utils';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { gql } from '@apollo/client';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuItem, Card, Button } from '@burdenoff/fe-libs/ui';
 import cronstrue from 'cronstrue';
 import { digest } from 'ohash';
 import { X, Plus } from 'lucide-react';
 
+function ReadOnlyFieldset({
+  className,
+  children
+}) {
+  const readOnly = useBuilderReadOnly();
+  return /* @__PURE__ */ jsx(
+    "fieldset",
+    {
+      disabled: readOnly,
+      "data-readonly": readOnly ? "true" : void 0,
+      className: cn$1("m-0 min-w-0 border-0 p-0", className),
+      children
+    }
+  );
+}
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    "data-slot": "popover-content",
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 w-72 rounded-card border border-border-subtle bg-bg-elevated p-4 text-text-primary shadow-elevation-3 outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+) }));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
 // src/builder/components/ndv/layering.ts
 var NDV_Z_INDEX = 1e3;
 var NDV_OVERLAY_Z_INDEX = NDV_Z_INDEX + 1;
@@ -85,7 +122,7 @@ function WaitResumeUrlField() {
         {
           type: "button",
           onClick: handleCopy,
-          className: cn(
+          className: cn$1(
             "inline-flex shrink-0 items-center gap-1.5 rounded-md border border-border px-3 py-2 text-xs font-medium transition-colors",
             copied ? "border-primary bg-primary/10 text-primary" : "bg-background text-foreground hover:bg-muted"
           ),
@@ -326,7 +363,7 @@ function CopyableUrl({
       {
         type: "button",
         onClick: handleCopy,
-        className: cn(
+        className: cn$1(
           "inline-flex shrink-0 items-center gap-1.5 rounded-md border border-border px-3 py-2 text-xs font-medium transition-colors",
           copied ? "border-primary bg-primary/10 text-primary" : "bg-background text-foreground hover:bg-muted"
         ),
@@ -668,7 +705,7 @@ function WorkflowPickerField({
         onClick: () => setOpen((o) => !o),
         className: "flex items-center justify-between gap-2 rounded-md border border-input bg-background px-2.5 py-1.5 text-left text-sm outline-none transition-colors hover:border-primary",
         children: [
-          /* @__PURE__ */ jsx("span", { className: cn("truncate", !value && "text-muted-foreground"), children: selected ? `${selected.name} (${selected.workflowKey.slice(0, 8)}\u2026)` : value || tr(
+          /* @__PURE__ */ jsx("span", { className: cn$1("truncate", !value && "text-muted-foreground"), children: selected ? `${selected.name} (${selected.workflowKey.slice(0, 8)}\u2026)` : value || tr(
             "fluidgrids.builder.workflowPicker.placeholder",
             "Select a workflow to call"
           ) }),
@@ -713,7 +750,7 @@ function WorkflowPickerField({
             setOpen(false);
             setSearch("");
           },
-          className: cn(
+          className: cn$1(
             "flex w-full flex-col items-start gap-0.5 rounded px-2 py-1.5 text-left hover:bg-muted",
             workflow.workflowKey === value && "bg-muted"
           ),
@@ -1006,7 +1043,7 @@ function NodeLoadOptionsSelect({
           disabled: loading,
           "aria-label": label ?? fieldName,
           "data-testid": testId,
-          className: cn(className, loading && "opacity-60"),
+          className: cn$1(className, loading && "opacity-60"),
           children: [
             !multiple && /* @__PURE__ */ jsx("option", { value: "", children: loading ? tr(
               "fluidgrids.builder.nodeParamsForm.loadOptionsLoading",
@@ -1144,6 +1181,499 @@ function StructuredParameterInput({
     )
   ] });
 }
+
+// src/builder/components/lib/expression-preview.ts
+var PURE_EXPRESSION_REGEX = /^\{\{(.*)\}\}$/s;
+var PURE_LEGACY_REGEX = /^\$\{(.*)\}$/s;
+function containsExpressionSyntax(str) {
+  return typeof str === "string" && str.includes("{{");
+}
+function findEmbeddedExpressions(str) {
+  const matches = [];
+  let searchFrom = 0;
+  while (searchFrom < str.length) {
+    const start = str.indexOf("{{", searchFrom);
+    if (start === -1) break;
+    const end = str.indexOf("}}", start + 2);
+    if (end === -1) break;
+    matches.push({
+      full: str.slice(start, end + 2),
+      expression: str.slice(start + 2, end).trim()
+    });
+    searchFrom = end + 2;
+  }
+  return matches;
+}
+function toItems(value) {
+  if (value === void 0 || value === null) return [];
+  if (Array.isArray(value)) return value.map((entry) => ({ json: entry }));
+  return [{ json: value }];
+}
+var SAFE_GLOBALS = {
+  parseInt,
+  parseFloat,
+  isNaN,
+  isFinite,
+  Number,
+  String,
+  Boolean,
+  JSON,
+  Date,
+  Math,
+  Array,
+  Object,
+  console: {
+    log: () => void 0,
+    error: () => void 0,
+    warn: () => void 0
+  }
+};
+function buildExpressionSandbox(scope) {
+  const inputItems = toItems(scope.input);
+  const currentItem = inputItems[0] ?? { json: {} };
+  const itemsForNode = (nodeName) => toItems(scope.nodeOutputs[nodeName]);
+  const dollarNode = (nodeName) => {
+    const items = itemsForNode(nodeName);
+    const at = items[0] ?? { json: {} };
+    return {
+      item: at.json,
+      all: () => items,
+      first: () => items[0]?.json ?? {},
+      last: () => items[items.length - 1]?.json ?? {}
+    };
+  };
+  const nodeObject = {};
+  for (const nodeName of Object.keys(scope.nodeOutputs)) {
+    nodeObject[nodeName] = dollarNode(nodeName);
+  }
+  const now = /* @__PURE__ */ new Date();
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  return {
+    ...SAFE_GLOBALS,
+    $json: currentItem.json,
+    $node: nodeObject,
+    $: dollarNode,
+    $items: (nodeName) => nodeName ? itemsForNode(nodeName) : inputItems,
+    $input: {
+      item: currentItem.json,
+      all: () => inputItems,
+      first: () => inputItems[0]?.json ?? {},
+      last: () => inputItems[inputItems.length - 1]?.json ?? {}
+    },
+    $workflow: {
+      id: scope.workflowKey,
+      name: scope.workflowKey,
+      version: scope.version
+    },
+    $execution: { id: scope.runId },
+    // Stubbed pending BOFF-7517 (Variables model) — mirrors the backend stub.
+    $vars: {},
+    // Never real env vars in the browser preview.
+    $env: {},
+    $now: now,
+    $today: today
+  };
+}
+function evaluateBare(expression, sandbox) {
+  const paramNames = Object.keys(sandbox);
+  const paramValues = Object.values(sandbox);
+  const fn = new Function(
+    ...paramNames,
+    `"use strict"; return (${expression});`
+  );
+  return fn(...paramValues);
+}
+function stringifyForInterpolation(value) {
+  if (value === null || value === void 0) return "";
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+function previewNewSyntax(str, scope) {
+  const sandbox = buildExpressionSandbox(scope);
+  const pure = PURE_EXPRESSION_REGEX.exec(str);
+  try {
+    if (pure) {
+      const expression = pure[1]?.trim();
+      if (!expression) {
+        return { isTemplate: true, error: "Empty expression" };
+      }
+      return { isTemplate: true, value: evaluateBare(expression, sandbox) };
+    }
+    let result = str;
+    for (const match of findEmbeddedExpressions(str)) {
+      if (!match.expression) continue;
+      const value = evaluateBare(match.expression, sandbox);
+      result = result.replace(match.full, stringifyForInterpolation(value));
+    }
+    return { isTemplate: true, value: result };
+  } catch (error) {
+    return {
+      isTemplate: true,
+      error: error instanceof Error ? error.message : String(error)
+    };
+  }
+}
+function previewLegacySyntax(str, scope) {
+  const sandbox = {
+    ...SAFE_GLOBALS,
+    output: scope.input,
+    TriggerInput: {},
+    WorkflowState: Object.fromEntries(
+      Object.entries(scope.nodeOutputs).map(([nodeId, output]) => [
+        nodeId,
+        { output, status: "COMPLETED" }
+      ])
+    ),
+    RunContext: {
+      runId: scope.runId ?? "preview",
+      workflowKey: scope.workflowKey ?? "preview",
+      version: scope.version ?? "1.0.0"
+    }
+  };
+  const pure = PURE_LEGACY_REGEX.exec(str);
+  try {
+    if (pure) {
+      const expression = pure[1]?.trim();
+      if (!expression) return { isTemplate: true, error: "Empty expression" };
+      return { isTemplate: true, value: evaluateBare(expression, sandbox) };
+    }
+    if (!str.includes("${")) {
+      return { isTemplate: false };
+    }
+    let result = str;
+    const templateRegex = /\$\{([^}]+)\}/g;
+    for (const match of str.matchAll(templateRegex)) {
+      const expression = match[1]?.trim();
+      if (!expression) continue;
+      const value = evaluateBare(expression, sandbox);
+      result = result.replace(match[0], stringifyForInterpolation(value));
+    }
+    return { isTemplate: true, value: result };
+  } catch (error) {
+    return {
+      isTemplate: true,
+      error: error instanceof Error ? error.message : String(error)
+    };
+  }
+}
+function evaluateExpressionPreview(str, scope) {
+  if (typeof str !== "string" || str.trim() === "") {
+    return { isTemplate: false };
+  }
+  if (containsExpressionSyntax(str)) {
+    return previewNewSyntax(str, scope);
+  }
+  return previewLegacySyntax(str, scope);
+}
+var EXPRESSION_BUILTINS = [
+  { insert: "$json", label: "$json", description: "Current item's data" },
+  {
+    insert: '$node["NodeName"]',
+    label: '$node["NodeName"]',
+    description: "Another node's current item"
+  },
+  {
+    insert: '$("NodeName")',
+    label: '$("NodeName")',
+    description: "Lineage helper: .item / .all() / .first() / .last()"
+  },
+  {
+    insert: "$items()",
+    label: "$items()",
+    description: "This node's input as a list of items"
+  },
+  {
+    insert: "$input",
+    label: "$input",
+    description: "Input helper: .item / .all() / .first() / .last()"
+  },
+  {
+    insert: "$workflow",
+    label: "$workflow",
+    description: "Workflow id / name / version"
+  },
+  {
+    insert: "$execution",
+    label: "$execution",
+    description: "Current execution id"
+  },
+  {
+    insert: "$vars",
+    label: "$vars",
+    description: "Workflow variables (coming soon)"
+  },
+  {
+    insert: "$env",
+    label: "$env",
+    description: "Allowlisted environment values"
+  },
+  { insert: "$now", label: "$now", description: "Current date/time" },
+  { insert: "$today", label: "$today", description: "Start of today" }
+];
+var AUTOCOMPLETE_LOOKBACK = 40;
+function openExpressionPrefix(value, cursor) {
+  const windowStart = Math.max(0, cursor - AUTOCOMPLETE_LOOKBACK);
+  const before = value.slice(windowStart, cursor);
+  const openIndex = before.lastIndexOf("{{");
+  if (openIndex === -1) return null;
+  const between = before.slice(openIndex + 2);
+  if (between.includes("}}")) return null;
+  return between.trimStart();
+}
+function ExpressionEditor({
+  value,
+  onChange,
+  placeholder,
+  className,
+  rows = 4,
+  label,
+  ariaLabel,
+  helpText,
+  nodeId
+}) {
+  const tr = useTr();
+  const editorRef = useRef(null);
+  const [isFocused, setIsFocused] = useState(false);
+  const [suggestionsOpen, setSuggestionsOpen] = useState(false);
+  const handleChange = useCallback(
+    (e) => {
+      onChange(e.target.value);
+      const cursor = e.target.selectionStart;
+      setSuggestionsOpen(openExpressionPrefix(e.target.value, cursor) !== null);
+    },
+    [onChange]
+  );
+  const insertTemplate = useCallback(
+    (template) => {
+      const textarea = editorRef.current;
+      if (!textarea) return;
+      const start = textarea.selectionStart;
+      const end = textarea.selectionEnd;
+      const newValue = value.substring(0, start) + template + value.substring(end);
+      onChange(newValue);
+      setTimeout(() => {
+        textarea.focus();
+        textarea.setSelectionRange(
+          start + template.length,
+          start + template.length
+        );
+      }, 0);
+    },
+    [value, onChange]
+  );
+  const applySuggestion = useCallback(
+    (insert) => {
+      const textarea = editorRef.current;
+      if (!textarea) {
+        insertTemplate(`{{ ${insert} }}`);
+        return;
+      }
+      const cursor = textarea.selectionStart;
+      const windowStart = Math.max(0, cursor - AUTOCOMPLETE_LOOKBACK);
+      const before = value.slice(windowStart, cursor);
+      const openIndex = before.lastIndexOf("{{");
+      if (openIndex === -1) {
+        insertTemplate(`{{ ${insert} }}`);
+        return;
+      }
+      const replaceStart = windowStart + openIndex;
+      const newValue = value.slice(0, replaceStart) + `{{ ${insert} }}` + value.slice(cursor);
+      onChange(newValue);
+      setSuggestionsOpen(false);
+      const cursorAfter = replaceStart + `{{ ${insert} }}`.length;
+      setTimeout(() => {
+        textarea.focus();
+        textarea.setSelectionRange(cursorAfter, cursorAfter);
+      }, 0);
+    },
+    [value, onChange, insertTemplate]
+  );
+  const cursorPos = editorRef.current?.selectionStart ?? value.length;
+  const filterText = suggestionsOpen ? openExpressionPrefix(value, cursorPos) ?? "" : "";
+  const suggestions = useMemo(() => {
+    if (!suggestionsOpen) return [];
+    const needle = filterText.toLowerCase();
+    return EXPRESSION_BUILTINS.filter(
+      (b) => b.label.toLowerCase().startsWith(needle || "$")
+    ).slice(0, 8);
+  }, [suggestionsOpen, filterText]);
+  const logs = useFlowStore((s) => s.execution.logs);
+  const workflowKey = useFlowStore((s) => s.workflow.workflowKey);
+  const workflowVersion = useFlowStore((s) => s.workflow.version);
+  const previewScope = useMemo(() => {
+    const nodeOutputs = {};
+    let input = {};
+    let runId;
+    for (const log of logs) {
+      if (log.status !== "completed" || !log.output) continue;
+      nodeOutputs[log.nodeId] = log.output;
+      if (log.nodeId === nodeId) {
+        input = log.inputArgs ?? {};
+        runId = log.runId;
+      }
+    }
+    return { input, nodeOutputs, workflowKey, version: workflowVersion, runId };
+  }, [logs, nodeId, workflowKey, workflowVersion]);
+  const hasPreviewData = Object.keys(previewScope.input).length > 0;
+  const [preview, setPreview] = useState(null);
+  useEffect(() => {
+    if (!nodeId || !value.trim()) {
+      setPreview(null);
+      return;
+    }
+    const timer = setTimeout(() => {
+      setPreview(evaluateExpressionPreview(value, previewScope));
+    }, 200);
+    return () => clearTimeout(timer);
+  }, [value, previewScope, nodeId]);
+  const previewText = useMemo(() => {
+    if (!preview) return null;
+    if (!preview.isTemplate) return null;
+    if (preview.error) return null;
+    if (preview.value === void 0) return "undefined";
+    if (typeof preview.value === "string") return preview.value;
+    try {
+      return JSON.stringify(preview.value);
+    } catch {
+      return String(preview.value);
+    }
+  }, [preview]);
+  return /* @__PURE__ */ jsxs("div", { className: cn$1("space-y-2", className), children: [
+    label && /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-foreground", children: label }),
+    /* @__PURE__ */ jsxs(
+      Card,
+      {
+        className: cn$1(
+          "relative overflow-hidden transition-all",
+          isFocused && "ring-2 ring-primary ring-offset-1"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1 px-2 py-1.5 border-b bg-muted/30", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground mr-2", children: tr("fluidgrids.builder.expressionEditor.insertLabel", "Insert:") }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => insertTemplate("${TriggerInput.}"),
+                className: "text-xs px-2 py-0.5 rounded bg-primary/10 text-primary hover:bg-primary/20 transition-colors",
+                children: "${TriggerInput}"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                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}"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                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: "${WorkflowState}"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "mx-1 h-4 w-px bg-border", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => insertTemplate("{{ $json. }}"),
+                className: "text-xs px-2 py-0.5 rounded bg-secondary/40 text-secondary-foreground hover:bg-secondary/60 transition-colors",
+                children: "{{ $json }}"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                ref: editorRef,
+                "aria-label": ariaLabel,
+                value,
+                onChange: handleChange,
+                onKeyUp: (e) => {
+                  const target = e.currentTarget;
+                  setSuggestionsOpen(
+                    openExpressionPrefix(target.value, target.selectionStart) !== null
+                  );
+                },
+                onFocus: () => setIsFocused(true),
+                onBlur: () => {
+                  setIsFocused(false);
+                  setTimeout(() => setSuggestionsOpen(false), 150);
+                },
+                placeholder: placeholder ?? tr(
+                  "fluidgrids.builder.expressionEditor.defaultPlaceholder",
+                  "Enter expression..."
+                ),
+                rows,
+                spellCheck: false,
+                className: cn$1(
+                  "w-full p-3 font-mono text-sm bg-background resize-none",
+                  "focus:outline-none",
+                  "placeholder:text-muted-foreground/50"
+                )
+              }
+            ),
+            suggestionsOpen && suggestions.length > 0 && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "absolute z-20 left-2 right-2 top-full mt-1 rounded-md border bg-popover shadow-md overflow-hidden",
+                role: "listbox",
+                "aria-label": tr(
+                  "fluidgrids.builder.expressionEditor.autocompleteLabel",
+                  "Expression variable suggestions"
+                ),
+                children: suggestions.map((s) => /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    role: "option",
+                    "aria-selected": false,
+                    onMouseDown: (e) => {
+                      e.preventDefault();
+                      applySuggestion(s.insert);
+                    },
+                    className: "flex w-full items-baseline gap-2 px-3 py-1.5 text-left hover:bg-accent",
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "font-mono text-xs text-primary", children: s.label }),
+                      /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground truncate", children: s.description })
+                    ]
+                  },
+                  s.insert
+                ))
+              }
+            )
+          ] }),
+          nodeId && value.trim() && /* @__PURE__ */ jsx("div", { className: "border-t bg-muted/20 px-3 py-1.5 text-xs", children: preview?.error ? /* @__PURE__ */ jsxs("span", { className: "text-destructive", children: [
+            tr(
+              "fluidgrids.builder.expressionEditor.previewError",
+              "Preview error:"
+            ),
+            " ",
+            preview.error
+          ] }) : previewText !== null ? /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+            tr(
+              "fluidgrids.builder.expressionEditor.previewLabel",
+              "Preview:"
+            ),
+            " ",
+            /* @__PURE__ */ jsx("span", { className: "font-mono text-foreground", children: previewText })
+          ] }) : !hasPreviewData ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/70 italic", children: tr(
+            "fluidgrids.builder.expressionEditor.previewNoData",
+            'Run "Execute step" on this node to preview real values.'
+          ) }) : null })
+        ]
+      }
+    ),
+    helpText && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: helpText })
+  ] });
+}
 function JsonMappingInput({
   name,
   label,
@@ -1610,7 +2140,7 @@ function CronExpressionField({
         "aria-invalid": invalid,
         spellCheck: false,
         "data-testid": testId,
-        className: cn(className, "font-mono", invalid && "border-destructive")
+        className: cn$1(className, "font-mono", invalid && "border-destructive")
       }
     ),
     description && /* @__PURE__ */ jsx(
@@ -1863,7 +2393,7 @@ function ScheduleRulesEditor({
                   return /* @__PURE__ */ jsxs(
                     "label",
                     {
-                      className: cn(
+                      className: cn$1(
                         "flex flex-col gap-1",
                         (isCron || spec.type === "multiOptions") && "sm:col-span-2"
                       ),
@@ -1877,7 +2407,7 @@ function ScheduleRulesEditor({
                           {
                             value: stringValue(row[spec.name]),
                             onChange: (value) => patchRow(index, spec.name, value),
-                            className: cn(rowInput, "w-full"),
+                            className: cn$1(rowInput, "w-full"),
                             testId,
                             ariaLabel: label
                           }
@@ -1937,7 +2467,7 @@ function ScheduleRulesEditor({
                             ),
                             "aria-label": label,
                             "data-testid": testId,
-                            className: cn(rowInput, selectCx),
+                            className: cn$1(rowInput, selectCx),
                             children: spec.options.map((option) => /* @__PURE__ */ jsx("option", { value: option, children: spec.optionLabels?.[option] ?? option }, option))
                           }
                         ) : spec.type === "integer" || spec.type === "number" ? /* @__PURE__ */ jsx(
@@ -2107,7 +2637,7 @@ function AssertRulesEditor({
                 Array.isArray(value) ? readAssertRulesSetting(event.target.value) ?? value : event.target.value
               );
             },
-            className: cn(rowInput2, "w-full font-mono"),
+            className: cn$1(rowInput2, "w-full font-mono"),
             "data-testid": `${testIdPrefix}-assert-rules-json`
           }
         ) : /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -2142,7 +2672,7 @@ function AssertRulesEditor({
                           "Path"
                         ),
                         onChange: (event) => setRow(index, { path: event.target.value }),
-                        className: cn(rowInput2, "min-w-0 flex-1 font-mono")
+                        className: cn$1(rowInput2, "min-w-0 flex-1 font-mono")
                       }
                     ),
                     /* @__PURE__ */ jsx(
@@ -2192,7 +2722,7 @@ function AssertRulesEditor({
                         "Expected"
                       ),
                       onChange: (event) => setRow(index, { expected: event.target.value }),
-                      className: cn(rowInput2, "mt-1.5 w-full font-mono")
+                      className: cn$1(rowInput2, "mt-1.5 w-full font-mono")
                     }
                   ),
                   operand === "range" && /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex gap-1.5", children: [
@@ -2211,7 +2741,7 @@ function AssertRulesEditor({
                           "min"
                         ),
                         onChange: (event) => setRow(index, { min: event.target.value }),
-                        className: cn(rowInput2, "w-full")
+                        className: cn$1(rowInput2, "w-full")
                       }
                     ),
                     /* @__PURE__ */ jsx(
@@ -2229,7 +2759,7 @@ function AssertRulesEditor({
                           "max"
                         ),
                         onChange: (event) => setRow(index, { max: event.target.value }),
-                        className: cn(rowInput2, "w-full")
+                        className: cn$1(rowInput2, "w-full")
                       }
                     )
                   ] }),
@@ -2247,7 +2777,7 @@ function AssertRulesEditor({
                         "Message"
                       ),
                       onChange: (event) => setRow(index, { message: event.target.value }),
-                      className: cn(rowInput2, "mt-1.5 w-full")
+                      className: cn$1(rowInput2, "mt-1.5 w-full")
                     }
                   )
                 ]
@@ -2559,7 +3089,7 @@ function TimezoneSelect({
               "Timezone"
             ),
             "data-testid": testId,
-            className: cn(
+            className: cn$1(
               className,
               "flex items-center justify-between gap-2 text-left"
             ),
@@ -2640,7 +3170,7 @@ function TimezoneSelect({
                         onClick: () => select(zone),
                         "data-testid": testId ? `${testId}-option` : void 0,
                         "data-value": zone,
-                        className: cn(
+                        className: cn$1(
                           "flex w-full cursor-pointer items-center justify-between gap-2 px-3 py-1.5 text-left text-sm hover:bg-muted",
                           zone === current && "bg-muted/60"
                         ),
@@ -2813,12 +3343,12 @@ function PlatformEventSourceSelect({
               "aria-haspopup": "listbox",
               "aria-label": fieldLabel,
               "data-testid": testId,
-              className: cn(
+              className: cn$1(
                 className,
                 "flex items-center justify-between gap-2 text-left"
               ),
               children: [
-                /* @__PURE__ */ jsx("span", { className: cn("truncate", !value && "text-muted-foreground"), children: value || emptyText }),
+                /* @__PURE__ */ jsx("span", { className: cn$1("truncate", !value && "text-muted-foreground"), children: value || emptyText }),
                 /* @__PURE__ */ jsx(
                   Icon,
                   {
@@ -2884,7 +3414,7 @@ function PlatformEventSourceSelect({
                           type: "button",
                           onClick: () => select(""),
                           "data-testid": testId ? `${testId}-any` : void 0,
-                          className: cn(
+                          className: cn$1(
                             "flex w-full cursor-pointer items-center justify-between gap-2 px-3 py-1.5 text-left text-sm italic text-muted-foreground hover:bg-muted",
                             value === "" && "bg-muted/60"
                           ),
@@ -2911,7 +3441,7 @@ function PlatformEventSourceSelect({
                             onClick: () => select(name),
                             "data-testid": testId ? `${testId}-option` : void 0,
                             "data-value": name,
-                            className: cn(
+                            className: cn$1(
                               "flex w-full cursor-pointer items-center justify-between gap-2 px-3 py-1.5 text-left text-sm hover:bg-muted",
                               name === value && "bg-muted/60"
                             ),
@@ -3125,7 +3655,7 @@ function PickRow({
       disabled,
       "data-testid": testId,
       "data-value": value,
-      className: cn(ROW_CX, picked && "bg-muted/60", className),
+      className: cn$1(ROW_CX, picked && "bg-muted/60", className),
       children: [
         /* @__PURE__ */ jsx(
           Icon,
@@ -3203,7 +3733,7 @@ function TimeCampusTriggerSelect({
               "aria-controls": listId,
               "aria-label": fieldLabel,
               "data-testid": testId,
-              className: cn(
+              className: cn$1(
                 className,
                 "flex items-center justify-between gap-2 text-left"
               ),
@@ -3211,7 +3741,7 @@ function TimeCampusTriggerSelect({
                 /* @__PURE__ */ jsx(
                   "span",
                   {
-                    className: cn(
+                    className: cn$1(
                       "truncate",
                       selected.length === 0 && "text-muted-foreground"
                     ),
@@ -3342,6 +3872,735 @@ function TimeCampusTriggerSelect({
     notice && /* @__PURE__ */ jsx("span", { className: "text-[11px] leading-snug text-muted-foreground", children: notice })
   ] });
 }
+function useGlobalStoreClient() {
+  const context = useContext(FluidGridsContext);
+  if (context?.globalClient) {
+    return context.globalClient;
+  }
+  const singletonClient = getGlobalStoreClient();
+  if (singletonClient) {
+    return singletonClient;
+  }
+  throw new Error(
+    "useGlobalStoreClient: No global client available. Either wrap your component tree with <FluidGridsProvider globalClient={...}> or call setGlobalStoreClient(client) before rendering."
+  );
+}
+
+// src/modules/channels/hooks/useChannels.ts
+var CHANNEL_SUMMARY_FIELDS = gql`
+  fragment ChannelSummaryFields on Channel {
+    id
+    name
+    platform
+    channelType
+    status
+    connectionHealth
+    isConnected
+    description
+    adapterType
+    createdAt
+  }
+`;
+var CHANNEL_DETAIL_FIELDS = gql`
+  fragment ChannelDetailFields on Channel {
+    id
+    name
+    platform
+    channelType
+    status
+    connectionHealth
+    isConnected
+    description
+    adapterType
+    messageCount24h
+    config {
+      enableThreading
+      enableReactions
+      enablePresence
+      rateLimitPerMinute
+    }
+    createdAt
+    updatedAt
+  }
+`;
+var GET_CHANNELS = gql`
+  ${CHANNEL_SUMMARY_FIELDS}
+  query GetChannels(
+    $filter: ChannelFilterInput
+    $pagination: ChannelPaginationInput
+  ) {
+    getChannels(filter: $filter, pagination: $pagination) {
+      items {
+        ...ChannelSummaryFields
+      }
+      total
+      hasMore
+    }
+  }
+`;
+var GET_CHANNEL = gql`
+  ${CHANNEL_DETAIL_FIELDS}
+  query GetChannel($id: ID!) {
+    getChannel(id: $id) {
+      ...ChannelDetailFields
+    }
+  }
+`;
+var PLATFORM_TO_PROVIDER_KEY = {
+  SLACK: "slack",
+  TEAMS: "microsoft-teams",
+  DISCORD: "discord",
+  EMAIL: "email",
+  WHATSAPP: "whatsapp",
+  WEBCHAT: "webchat",
+  WEBHOOK: "webhook",
+  SMS: "sms",
+  PUSH: "push"
+};
+var PLATFORM_ICONS = {
+  SLACK: "mdi:slack",
+  TEAMS: "mdi:microsoft-teams",
+  DISCORD: "mdi:discord",
+  EMAIL: "mdi:email",
+  SMS: "mdi:message-text",
+  PUSH: "mdi:bell-ring",
+  WEBCHAT: "mdi:chat",
+  WEBHOOK: "mdi:webhook",
+  WHATSAPP: "mdi:whatsapp"
+};
+var STATUS_COLORS = {
+  ACTIVE: "text-[var(--color-status-success-text)]",
+  INACTIVE: "text-muted-foreground",
+  ERROR: "text-[var(--color-status-error-text)]",
+  ARCHIVED: "text-muted-foreground",
+  SUSPENDED: "text-[var(--color-status-warning-text)]"
+};
+var HEALTH_COLORS = {
+  HEALTHY: "text-[var(--color-status-success-text)]",
+  DEGRADED: "text-[var(--color-status-warning-text)]",
+  UNHEALTHY: "text-[var(--color-status-error-text)]",
+  UNKNOWN: "text-muted-foreground"
+};
+var HEALTH_ICONS = {
+  HEALTHY: "mdi:check-circle",
+  DEGRADED: "mdi:alert-circle",
+  UNHEALTHY: "mdi:close-circle",
+  UNKNOWN: "mdi:help-circle"
+};
+function useChannels(filter) {
+  const apolloClient = useGlobalStoreClient();
+  const [channels, setChannels] = useState([]);
+  const [total, setTotal] = useState(0);
+  const [hasMore, setHasMore] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const filterKey = JSON.stringify(filter);
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const parsedFilter = filterKey ? JSON.parse(filterKey) : void 0;
+      const PAGE_SIZE = 100;
+      let offset = 0;
+      let allItems = [];
+      let totalCount = 0;
+      let more = true;
+      while (more) {
+        const result = await apolloClient.query({
+          query: GET_CHANNELS,
+          variables: {
+            filter: parsedFilter,
+            pagination: { limit: PAGE_SIZE, offset }
+          },
+          fetchPolicy: "network-only"
+        });
+        const page = result.data?.getChannels;
+        const pageItems = page?.items ?? [];
+        totalCount = page?.total ?? totalCount;
+        allItems = allItems.concat(pageItems);
+        more = (page?.hasMore ?? false) && pageItems.length === PAGE_SIZE;
+        offset += PAGE_SIZE;
+      }
+      setChannels(allItems);
+      setTotal(totalCount);
+      setHasMore(false);
+    } catch (err) {
+      setError(err);
+    } finally {
+      setLoading(false);
+    }
+  }, [apolloClient, filterKey]);
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+  return {
+    channels,
+    total,
+    hasMore,
+    loading,
+    error,
+    refetch: fetchData
+  };
+}
+function useChannel(channelId) {
+  const apolloClient = useGlobalStoreClient();
+  const [channel, setChannel] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const fetchData = useCallback(
+    async (policy = "cache-first") => {
+      if (!channelId) return void 0;
+      try {
+        return await apolloClient.query({
+          query: GET_CHANNEL,
+          variables: { id: channelId },
+          fetchPolicy: policy
+        });
+      } catch (err) {
+        return err;
+      }
+    },
+    [apolloClient, channelId]
+  );
+  const applyResult = useCallback(
+    (result) => {
+      if (result instanceof Error) {
+        setError(result);
+      } else if (result) {
+        setChannel(result.data?.getChannel ?? null);
+      } else {
+        setChannel(null);
+      }
+      setLoading(false);
+    },
+    []
+  );
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    fetchData().then((result) => {
+      if (cancelled) return;
+      applyResult(result);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [fetchData, applyResult]);
+  const refetch = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    const result = await fetchData("network-only");
+    applyResult(result);
+  }, [fetchData, applyResult]);
+  return {
+    channel,
+    loading,
+    error,
+    refetch
+  };
+}
+
+// src/builder/components/ndv/channel-fields.ts
+var CHANNEL_ID_FIELD = "channelId";
+var CHANNEL_PLATFORM_FIELD = "platform";
+var CHANNEL_INTEGRATION_FIELD = "integrationId";
+var CHANNEL_NODE_TYPE = /(?:^|[:/])(?:integration\/channel|channel_node)(?:@[\w.-]+)?$/;
+function isChannelNodeType(nodeType) {
+  return !!nodeType && CHANNEL_NODE_TYPE.test(nodeType);
+}
+function isChannelPickerField(nodeType, fieldName) {
+  return fieldName === CHANNEL_ID_FIELD && isChannelNodeType(nodeType);
+}
+function channelSelectionWrites(channel, declaredFieldNames) {
+  const writes = [[CHANNEL_ID_FIELD, channel.id]];
+  if (channel.platform && declaredFieldNames.includes(CHANNEL_PLATFORM_FIELD)) {
+    writes.push([CHANNEL_PLATFORM_FIELD, channel.platform]);
+  }
+  return writes;
+}
+function channelSelectionHandler(declaredFieldNames, write) {
+  return (channel) => {
+    for (const [field, value] of channelSelectionWrites(
+      channel,
+      declaredFieldNames
+    )) {
+      write(field, value);
+    }
+  };
+}
+function channelLinkState(argsState, declaredFieldNames) {
+  const integration = argsState[CHANNEL_INTEGRATION_FIELD];
+  return {
+    integrationId: typeof integration === "string" ? integration : void 0,
+    linkable: declaredFieldNames.includes(CHANNEL_INTEGRATION_FIELD)
+  };
+}
+function channelAuthUrl(providerKey, returnTo, nodeId) {
+  const params = new URLSearchParams({ providerKey, returnTo });
+  if (nodeId) params.set("channelNodeId", nodeId);
+  return `/integrations/connections/add?${params.toString()}`;
+}
+var LINK_INTEGRATION_MUTATION = gql`
+  mutation LinkIntegrationConnection(
+    $integrationConnectionId: ID!
+    $channelId: ID!
+  ) {
+    linkIntegrationConnection(
+      integrationConnectionId: $integrationConnectionId
+      channelId: $channelId
+    ) {
+      id
+    }
+  }
+`;
+function platformLabel(platform) {
+  return platform.charAt(0) + platform.slice(1).toLowerCase();
+}
+function ChannelPickerField({
+  value,
+  onSelect,
+  integrationId,
+  linkable,
+  nodeId,
+  label,
+  className,
+  testId
+}) {
+  const tr = useTr();
+  const [open, setOpen] = useState(false);
+  const { channels, loading, error } = useChannels({
+    channelType: "COMMUNICATION"
+  });
+  const listed = channels.find((c) => c.id === value);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", "data-testid": testId, children: [
+    /* @__PURE__ */ jsxs(DropdownMenu, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          "aria-label": label,
+          className: cn$1(
+            className,
+            "flex items-center justify-between gap-2 text-left"
+          ),
+          "data-testid": testId ? `${testId}-trigger` : void 0,
+          children: [
+            listed ? /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  icon: PLATFORM_ICONS[listed.platform] || "mdi:antenna",
+                  className: "size-4 shrink-0"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: listed.name }),
+              /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  icon: HEALTH_ICONS[listed.connectionHealth],
+                  className: cn$1(
+                    "size-3.5 shrink-0",
+                    HEALTH_COLORS[listed.connectionHealth]
+                  )
+                }
+              )
+            ] }) : /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2 text-muted-foreground", children: [
+              /* @__PURE__ */ jsx(Icon, { icon: "mdi:antenna", className: "size-4 shrink-0" }),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: value || tr(
+                "fluidgrids.builder.channelSelector.selectPlaceholder",
+                "Select channel"
+              ) })
+            ] }),
+            /* @__PURE__ */ jsx(
+              Icon,
+              {
+                icon: "mdi:chevron-down",
+                className: "size-4 shrink-0 text-muted-foreground"
+              }
+            )
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        DropdownMenuContent,
+        {
+          align: "start",
+          className: "max-h-[350px] w-[260px] overflow-y-auto",
+          children: loading ? /* @__PURE__ */ jsxs("div", { className: "p-4 text-center text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(
+              Icon,
+              {
+                icon: "mdi:loading",
+                className: "mx-auto mb-2 size-5 animate-spin"
+              }
+            ),
+            /* @__PURE__ */ jsx("p", { children: tr(
+              "fluidgrids.builder.channelSelector.loading",
+              "Loading channels..."
+            ) })
+          ] }) : error ? /* @__PURE__ */ jsxs("div", { className: "p-4 text-center text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(
+              Icon,
+              {
+                icon: "mdi:alert-circle",
+                className: "mx-auto mb-2 size-5 text-[var(--color-status-error-text)]"
+              }
+            ),
+            /* @__PURE__ */ jsx("p", { children: tr(
+              "fluidgrids.builder.channelSelector.loadError",
+              "Failed to load channels"
+            ) }),
+            /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs", children: error.message })
+          ] }) : channels.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "p-4 text-center text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(
+              Icon,
+              {
+                icon: "mdi:antenna-off",
+                className: "mx-auto mb-2 size-6 opacity-50"
+              }
+            ),
+            /* @__PURE__ */ jsx("p", { children: tr(
+              "fluidgrids.builder.channelSelector.emptyTitle",
+              "No channels found"
+            ) }),
+            /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs", children: tr(
+              "fluidgrids.builder.channelSelector.emptyHint",
+              "Create one in the Channels settings"
+            ) })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: tr(
+              "fluidgrids.builder.channelSelector.availableChannelsHeading",
+              "Available Channels"
+            ) }),
+            /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+            channels.map((channel) => {
+              const isSelected = channel.id === value;
+              return /* @__PURE__ */ jsxs(
+                DropdownMenuItem,
+                {
+                  onClick: () => {
+                    onSelect(channel);
+                    setOpen(false);
+                  },
+                  className: cn$1(
+                    "flex cursor-pointer items-center justify-between",
+                    isSelected && "bg-primary/10"
+                  ),
+                  "data-testid": testId ? `${testId}-option-${channel.id}` : void 0,
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+                      /* @__PURE__ */ jsx(
+                        Icon,
+                        {
+                          icon: PLATFORM_ICONS[channel.platform] || "mdi:antenna",
+                          className: "size-4 shrink-0"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
+                        /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium", children: channel.name }),
+                        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
+                          /* @__PURE__ */ jsx("span", { className: STATUS_COLORS[channel.status], children: channel.status.toLowerCase() }),
+                          /* @__PURE__ */ jsx("span", { children: "\xB7" }),
+                          /* @__PURE__ */ jsx("span", { children: channel.platform.toLowerCase() })
+                        ] })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+                      /* @__PURE__ */ jsx(
+                        Icon,
+                        {
+                          icon: HEALTH_ICONS[channel.connectionHealth],
+                          className: cn$1(
+                            "size-3.5",
+                            HEALTH_COLORS[channel.connectionHealth]
+                          )
+                        }
+                      ),
+                      isSelected && /* @__PURE__ */ jsx(
+                        Icon,
+                        {
+                          icon: "mdi:check",
+                          className: "size-4 text-primary"
+                        }
+                      )
+                    ] })
+                  ]
+                },
+                channel.id
+              );
+            })
+          ] })
+        }
+      )
+    ] }),
+    value && /* @__PURE__ */ jsx(
+      ChannelSummary,
+      {
+        channelId: value,
+        integrationId,
+        linkable,
+        nodeId,
+        testId
+      },
+      value
+    )
+  ] });
+}
+function ChannelSummary({
+  channelId,
+  integrationId,
+  linkable,
+  nodeId,
+  testId
+}) {
+  const tr = useTr();
+  const { channel, loading, error } = useChannel(channelId);
+  if (loading) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-md border border-border p-3 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(Icon, { icon: "mdi:loading", className: "size-4 animate-spin" }),
+      tr(
+        "fluidgrids.builder.channelDetails.loading",
+        "Loading channel details\u2026"
+      )
+    ] });
+  }
+  if (error || !channel) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-md border border-[var(--color-status-error-border)] bg-[var(--color-status-error-bg-subtle)] p-3 text-xs text-[var(--color-status-error-text)]", children: [
+      /* @__PURE__ */ jsx(Icon, { icon: "mdi:alert-circle", className: "size-4" }),
+      error ? error.message : tr(
+        "fluidgrids.builder.channelDetails.notFound",
+        "Channel not found"
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex flex-col gap-2.5 rounded-md border border-border p-3",
+      "data-testid": testId ? `${testId}-details` : void 0,
+      children: [
+        /* @__PURE__ */ jsx(ChannelStatus, { channel }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 border-t border-border pt-2", children: [
+          /* @__PURE__ */ jsx(ChannelAuthButton, { channel, nodeId, testId }),
+          linkable && /* @__PURE__ */ jsx(
+            ChannelLinkAction,
+            {
+              channelId: channel.id,
+              integrationId,
+              testId
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function ChannelStatus({ channel }) {
+  const tr = useTr();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex size-8 items-center justify-center rounded-md bg-primary/10", children: /* @__PURE__ */ jsx(
+        Icon,
+        {
+          icon: PLATFORM_ICONS[channel.platform] || "mdi:antenna",
+          className: "size-5 text-primary"
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
+        /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium", children: channel.name }),
+        /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+          channel.platform.toLowerCase(),
+          " \xB7",
+          " ",
+          channel.channelType.toLowerCase()
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2 text-xs", children: [
+      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: tr("fluidgrids.builder.channelDetails.statusLabel", "Status") }),
+        /* @__PURE__ */ jsx("span", { className: cn$1("font-medium", STATUS_COLORS[channel.status]), children: channel.status.toLowerCase() })
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: tr("fluidgrids.builder.channelDetails.healthLabel", "Health") }),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: cn$1(
+              "flex items-center gap-1 font-medium",
+              HEALTH_COLORS[channel.connectionHealth]
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  icon: HEALTH_ICONS[channel.connectionHealth],
+                  className: "size-3.5"
+                }
+              ),
+              channel.connectionHealth.toLowerCase()
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 border-t border-border pt-2 text-xs text-muted-foreground", children: [
+      channel.isConnected ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-[var(--color-status-success-text)]", children: [
+        /* @__PURE__ */ jsx(Icon, { icon: "mdi:link", className: "size-3.5" }),
+        tr("fluidgrids.builder.channelDetails.connected", "Connected")
+      ] }) : /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(Icon, { icon: "mdi:link-off", className: "size-3.5" }),
+        tr(
+          "fluidgrids.builder.channelDetails.notConnected",
+          "Not connected"
+        )
+      ] }),
+      channel.messageCount24h !== void 0 && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(Icon, { icon: "mdi:message-text", className: "size-3.5" }),
+        tr(
+          "fluidgrids.builder.channelDetails.messageCount",
+          "{{count}} messages in 24h",
+          { count: channel.messageCount24h }
+        )
+      ] })
+    ] }),
+    channel.description && /* @__PURE__ */ jsx("p", { className: "border-t border-border pt-2 text-xs text-muted-foreground", children: channel.description })
+  ] });
+}
+function ChannelAuthButton({
+  channel,
+  nodeId,
+  testId
+}) {
+  const tr = useTr();
+  const providerKey = PLATFORM_TO_PROVIDER_KEY[channel.platform] || channel.platform.toLowerCase();
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      type: "button",
+      variant: "outline",
+      size: "sm",
+      className: "w-full justify-start gap-2",
+      onClick: () => window.open(
+        channelAuthUrl(providerKey, window.location.pathname, nodeId),
+        "_blank",
+        "noopener,noreferrer"
+      ),
+      "data-testid": testId ? `${testId}-authenticate` : void 0,
+      children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: PLATFORM_ICONS[channel.platform] || "mdi:key",
+            className: "size-4"
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { children: [
+          tr(
+            "fluidgrids.builder.channelAuth.authenticateWithPrefix",
+            "Authenticate with"
+          ),
+          " ",
+          platformLabel(channel.platform)
+        ] }),
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: "mdi:open-in-new",
+            className: "ml-auto size-3.5 text-muted-foreground"
+          }
+        )
+      ]
+    }
+  );
+}
+function useChannelLink(channelId) {
+  const tr = useTr();
+  const globalClient = useGlobalStoreClient();
+  const [state, setState] = useState({ kind: "idle" });
+  const link = async (integrationConnectionId) => {
+    setState({ kind: "linking" });
+    try {
+      throwIfResultError(
+        await globalClient.mutate({
+          mutation: LINK_INTEGRATION_MUTATION,
+          variables: { integrationConnectionId, channelId },
+          refetchQueries: [
+            { query: GET_CHANNEL, variables: { id: channelId } }
+          ],
+          awaitRefetchQueries: true
+        })
+      );
+      setState({ kind: "linked" });
+    } catch (err) {
+      setState({
+        kind: "failed",
+        message: err instanceof Error ? err.message : tr(
+          "fluidgrids.builder.channelLink.failed",
+          "The channel could not be linked."
+        )
+      });
+    }
+  };
+  return { state, link };
+}
+var LINK_ICON = {
+  idle: "mdi:link-variant",
+  failed: "mdi:link-variant",
+  linking: "mdi:loading",
+  linked: "mdi:check-circle"
+};
+function ChannelLinkAction({
+  channelId,
+  integrationId,
+  testId
+}) {
+  const tr = useTr();
+  const { state, link } = useChannelLink(channelId);
+  const integration = integrationId?.trim() ?? "";
+  const linking = state.kind === "linking";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        className: "w-full justify-start gap-2",
+        onClick: () => void link(integration),
+        disabled: !integration || linking,
+        title: integration ? void 0 : tr(
+          "fluidgrids.builder.channelLink.needsIntegration",
+          "Enter an integration connection ID first."
+        ),
+        "data-testid": testId ? `${testId}-link` : void 0,
+        children: [
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              icon: LINK_ICON[state.kind],
+              className: cn$1("size-4", linking && "animate-spin")
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { children: linking ? tr("fluidgrids.builder.channelLink.linking", "Linking\u2026") : tr(
+            "fluidgrids.builder.channelLink.linkButton",
+            "Link integration to channel"
+          ) })
+        ]
+      }
+    ),
+    state.kind === "linked" && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-[var(--color-status-success-text)]", children: tr(
+      "fluidgrids.builder.channelLink.linked",
+      "Linked. A welcome message was sent."
+    ) }),
+    state.kind === "failed" && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-destructive", children: state.message }),
+    !integration && /* @__PURE__ */ jsx("p", { className: "text-[11px] leading-snug text-muted-foreground", children: tr(
+      "fluidgrids.builder.channelLink.integrationHint",
+      "Complete the OAuth flow, then enter the integration connection ID below to link it."
+    ) })
+  ] });
+}
 var SECTION_LABEL3 = "text-[11px] font-semibold uppercase tracking-[0.12em] text-muted-foreground";
 function NodeParamsForm({
   config,
@@ -3621,10 +4880,11 @@ function NodeParamsForm({
       const optionList = Boolean(p.loadOptions) && isStringOptionList(p.schema ?? p.type);
       const booleanChecked = p.type === "boolean" && booleanParameterValue(fixedValue) === true;
       const isCodeParam = p.type === "code" || nodeType === "internal:code" && p.name === "code";
+      const isChannelPicker = isChannelPickerField(nodeType, p.name);
       const highlight = dragField === p.name;
       const controlId = `${formId}-param-${p.name}`;
-      const nativeControl = mode !== "expression" && !isCodeParam && !(structuredType && !optionList) && !p.loadOptions && p.type !== PLATFORM_EVENT_MODULE_FIELD && p.type !== PLATFORM_EVENT_RECORD_TYPE_FIELD && p.type !== TIMECAMPUS_TIME_TRIGGER_FIELD;
-      const inputCx = cn(
+      const nativeControl = mode !== "expression" && !isCodeParam && !(structuredType && !optionList) && !p.loadOptions && !isChannelPicker && p.type !== PLATFORM_EVENT_MODULE_FIELD && p.type !== PLATFORM_EVENT_RECORD_TYPE_FIELD && p.type !== TIMECAMPUS_TIME_TRIGGER_FIELD;
+      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"
       );
@@ -3662,7 +4922,7 @@ function NodeParamsForm({
                     "Switch to an expression"
                   ),
                   "data-testid": `${testIdPrefix}-mode-${p.name}`,
-                  className: cn(
+                  className: cn$1(
                     "ml-1 rounded p-0.5 hover:text-foreground",
                     mode === "expression" ? "text-primary" : "text-muted-foreground"
                   ),
@@ -3680,7 +4940,7 @@ function NodeParamsForm({
               "div",
               {
                 "data-testid": `${testIdPrefix}-param-${p.name}`,
-                className: cn(
+                className: cn$1(
                   !currentEdge && "pointer-events-none opacity-50"
                 ),
                 children: /* @__PURE__ */ jsx(
@@ -3722,7 +4982,7 @@ function NodeParamsForm({
                 schema: p.schema ?? p.type,
                 value: fixedValue,
                 onChange: (value) => writeFixed(p.name, value),
-                className: cn(inputCx, "font-mono"),
+                className: cn$1(inputCx, "font-mono"),
                 testId: `${testIdPrefix}-param-${p.name}`
               },
               `${config.node?.id}:${config.currentOp?.name}:${p.name}`
@@ -3756,6 +5016,23 @@ function NodeParamsForm({
                 className: inputCx,
                 testId: `${testIdPrefix}-param-${p.name}`
               }
+            ) : isChannelPicker ? /* @__PURE__ */ jsx(
+              ChannelPickerField,
+              {
+                value: typeof fixedValue === "string" && fixedValue ? fixedValue : void 0,
+                onSelect: channelSelectionHandler(
+                  params.map((f) => f.name),
+                  writeFixed
+                ),
+                ...channelLinkState(
+                  argsState,
+                  params.map((f) => f.name)
+                ),
+                nodeId: config.node?.id,
+                label: p.label ?? p.name,
+                className: inputCx,
+                testId: `${testIdPrefix}-param-${p.name}`
+              }
             ) : p.type === "boolean" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
               /* @__PURE__ */ jsxs("label", { className: "flex w-fit cursor-pointer items-center gap-2 text-sm", children: [
                 /* @__PURE__ */ jsx(
@@ -3901,7 +5178,7 @@ function NodeParamsForm({
                 "aria-label": p.label ?? p.name,
                 id: controlId,
                 "data-testid": `${testIdPrefix}-param-${p.name}`,
-                className: cn(
+                className: cn$1(
                   inputCx,
                   "scheme-normal dark:scheme-dark [&_option]:bg-bg-surface [&_option]:text-text-primary"
                 ),
@@ -3942,7 +5219,7 @@ function NodeParamsForm({
                 "aria-label": p.label ?? p.name,
                 id: controlId,
                 "data-testid": `${testIdPrefix}-param-${p.name}`,
-                className: cn(inputCx, "min-h-24 resize-y")
+                className: cn$1(inputCx, "min-h-24 resize-y")
               }
             ) : /* @__PURE__ */ jsx(
               "input",
@@ -3970,21 +5247,6 @@ function NodeParamsForm({
     })
   ] });
 }
-function ReadOnlyFieldset({
-  className,
-  children
-}) {
-  const readOnly = useBuilderReadOnly();
-  return /* @__PURE__ */ jsx(
-    "fieldset",
-    {
-      disabled: readOnly,
-      "data-readonly": readOnly ? "true" : void 0,
-      className: cn("m-0 min-w-0 border-0 p-0", className),
-      children
-    }
-  );
-}
 
 // src/builder/lib/continuation.ts
 var BLOCKED = {
@@ -4244,7 +5506,7 @@ function NodeExecutionActions({
   return /* @__PURE__ */ jsxs(
     "section",
     {
-      className: cn(
+      className: cn$1(
         "shrink-0 border-t border-border bg-muted/20 px-3 py-2",
         className
       ),
@@ -4329,4 +5591,4 @@ function NodeExecutionActions({
   );
 }
 
-export { NDV_Z_INDEX, NodeExecutionActions, NodeParamsForm, ReadOnlyFieldset };
+export { NDV_Z_INDEX, NodeExecutionActions, NodeParamsForm, Popover, PopoverContent, PopoverTrigger, ReadOnlyFieldset, useGlobalStoreClient };