@burdenoff/fluidgrids-fe-sdk 2026.918.2 → 2026.922.1

package/dist/{chunk-HY7K7SLI.js → chunk-XASNLRFQ.js}

@@ -224,6 +224,245 @@ function stripSubmitActions(card) {
   }
   return result;
 }
+
+// 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,
@@ -231,14 +470,18 @@ function ExpressionEditor({
   className,
   rows = 4,
   label,
-  helpText
+  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]
   );
@@ -260,6 +503,83 @@ function ExpressionEditor({
     },
     [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("space-y-2", className), children: [
     label && /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-foreground", children: label }),
     /* @__PURE__ */ jsxs(
@@ -270,7 +590,7 @@ function ExpressionEditor({
           isFocused && "ring-2 ring-primary ring-offset-1"
         ),
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 px-2 py-1.5 border-b bg-muted/30", 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",
@@ -298,29 +618,97 @@ function ExpressionEditor({
                 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__ */ jsx(
-            "textarea",
-            {
-              ref: editorRef,
-              value,
-              onChange: handleChange,
-              onFocus: () => setIsFocused(true),
-              onBlur: () => setIsFocused(false),
-              placeholder: placeholder ?? tr(
-                "fluidgrids.builder.expressionEditor.defaultPlaceholder",
-                "Enter expression..."
-              ),
-              rows,
-              spellCheck: false,
-              className: cn(
-                "w-full p-3 font-mono text-sm bg-background resize-none",
-                "focus:outline-none",
-                "placeholder:text-muted-foreground/50"
-              )
-            }
-          )
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                ref: editorRef,
+                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(
+                  "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 })
         ]
       }
     ),
@@ -13819,7 +14207,7 @@ var DEFAULT_CONFIG = {
   maxTemplateLength: 1e4,
   debug: false
 };
-var SAFE_GLOBALS = {
+var SAFE_GLOBALS2 = {
   // Type conversion
   parseInt,
   parseFloat,
@@ -13866,7 +14254,7 @@ function parseTemplate(template) {
 }
 function buildSandbox(scope) {
   return {
-    ...SAFE_GLOBALS,
+    ...SAFE_GLOBALS2,
     output: scope.output,
     TriggerInput: scope.TriggerInput,
     WorkflowState: scope.WorkflowState,
@@ -23436,5 +23824,5 @@ var FlowBuilderPage = ({
 };
 
 export { Card2 as Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ConnectionFormDialog, ConnectionSelector, EntityTagPicker, FLUIDGRIDS_ENTITY_TYPES, FlowBuilderPage, FluidGridsProvider, ProviderPicker, SchemaConnectionForm, ScopePicker, TemplateCard, buildNodeCheck, buildRequiredNodeTypes, listCustomBlocks, mergeStickyNotes, refetchStoreNodes, registerCustomBlock, resolveUiSpec, stripSubmitActions, tagLabel, useAvailableTags, useConnection, useConnectionDialog, useConnections, useConnectionsByProvider, useCreateConnection, useCreateTag, useDraftEntityTags, useEntityTags, useFluidGridsContext, useImportWorkflowTemplate, useInitiateOAuth, useInstalledNodes, useNodeExecution, useProviderByKey, useProviderCatalog, useProviders, useReplaceEntityTags, useSearchTags, useTagEntity, useUntagEntity, useWorkflowTemplates };
-//# sourceMappingURL=chunk-HY7K7SLI.js.map
-//# sourceMappingURL=chunk-HY7K7SLI.js.map
+//# sourceMappingURL=chunk-XASNLRFQ.js.map
+//# sourceMappingURL=chunk-XASNLRFQ.js.map