@burdenoff/fluidgrids-fe-sdk 2026.918.2 → 2026.922.2

package/dist/{chunk-HY7K7SLI.js → chunk-3RWKQIV4.js}

@@ -4,7 +4,7 @@ import { Badge as Badge$1, Button as Button$1 } from './chunk-DBOMRIP5.js';
 import { getGlobalStoreClient, createGlobalStoreClient, setGlobalStoreClient, resetGlobalStoreClient } from './chunk-BQXHJIER.js';
 import { GetMyNodeInstallationsDocument, BrowseWorkflowTemplatesDocument, InstallWorkflowNodeDocument, InstallPurchasedNodeDocument, BrowseWorkflowNodesDocument, UninstallWorkflowNodeDocument, CreateStoreOrderDocument, GetNodeInstallableVersionsDocument } from './chunk-6LXMUIR3.js';
 import { deepClone, applyTemplateInputs } from './chunk-XQP33UJR.js';
-import { useFlowStore, QuotaExhaustedDialog } from './chunk-KT72XMAB.js';
+import { useFlowStore, QuotaExhaustedDialog } from './chunk-I3WUYESA.js';
 import { SdkPermissionGate, FLUIDGRIDS_PERMISSIONS, SdkPermissionButton } from './chunk-UIY2HBWA.js';
 import { cn as cn$1 } from './chunk-3ZYUGTIT.js';
 import { useWorkflowVersions, useRestoreWorkflowVersion, useActivateWorkflow, useDeleteWorkflow, useDeactivateWorkflow } from './chunk-ELB3LXRJ.js';
@@ -37,7 +37,7 @@ import { ApolloProvider, useQuery, useMutation } from '@apollo/client/react';
 import { TagBadge, TagsWidget } from '@burdenoff/fe-libs/tag';
 import { gql as gql$1 } from '@apollo/client/core';
 import 'jszip';
-import { Sparkles, Star, Download, Eye, History, Loader2, Play, RotateCcw, Trash2, Maximize2, LayoutGrid, Plus, GitBranch, AlertCircle, Search, RefreshCw, CheckCircle2, Package, Info, Copy, BadgeCheck, DollarSign, Type, Code, Hash, List, Braces, Workflow, PlusCircle, ChevronDown, ChevronRight, Layers, X, AlertTriangle } from 'lucide-react';
+import { Sparkles, Star, Download, Eye, History, Loader2, Play, RotateCcw, Trash2, Maximize2, Undo2, Redo2, LayoutGrid, Keyboard, Plus, GitBranch, AlertCircle, Search, RefreshCw, CheckCircle2, Package, Info, Copy, BadgeCheck, DollarSign, Type, Code, Hash, List, Braces, Workflow, PlusCircle, ChevronDown, ChevronRight, Layers, X, AlertTriangle } from 'lucide-react';
 import { produce } from 'immer';
 import { isEmpty } from 'radash';
 import { animate, easeOut } from 'popmotion';
@@ -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 })
         ]
       }
     ),
@@ -4021,6 +4409,72 @@ function nodeAccent(key) {
 function tint(hex, pct = 14) {
   return `color-mix(in srgb, ${hex} ${pct}%, transparent)`;
 }
+function InlineEditableLabel({
+  value,
+  placeholder,
+  editing,
+  onStartEdit,
+  onCommit,
+  onCancel,
+  className,
+  inputClassName
+}) {
+  const tr = useTr();
+  const [draft, setDraft] = React2.useState(value);
+  const inputRef = React2.useRef(null);
+  React2.useEffect(() => {
+    if (!editing) return;
+    setDraft(value);
+    const raf = requestAnimationFrame(() => {
+      inputRef.current?.focus();
+      inputRef.current?.select();
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [editing, value]);
+  if (editing) {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        value: draft,
+        onChange: (e) => setDraft(e.target.value),
+        onClick: (e) => e.stopPropagation(),
+        onDoubleClick: (e) => e.stopPropagation(),
+        onMouseDown: (e) => e.stopPropagation(),
+        onKeyDown: (e) => {
+          e.stopPropagation();
+          if (e.key === "Enter") {
+            e.preventDefault();
+            onCommit(draft.trim());
+          } else if (e.key === "Escape") {
+            e.preventDefault();
+            onCancel();
+          }
+        },
+        onBlur: () => onCommit(draft.trim()),
+        className: cn(
+          "min-w-0 flex-1 rounded border border-primary/50 bg-card px-1 text-inherit outline-none",
+          inputClassName
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("cursor-text truncate", className),
+      title: tr(
+        "fluidgrids.builder.nodeCard.renameTooltip",
+        "Double-click or press F2 to rename"
+      ),
+      onDoubleClick: (e) => {
+        e.stopPropagation();
+        onStartEdit();
+      },
+      children: value || placeholder
+    }
+  );
+}
 var NodeCard = React2.forwardRef(
   ({
     className,
@@ -4034,6 +4488,8 @@ var NodeCard = React2.forwardRef(
     onDelete,
     isExecuting = false,
     infoButton,
+    disabled = false,
+    onToggleDisabled,
     children,
     ...props
   }, ref) => {
@@ -4052,7 +4508,7 @@ var NodeCard = React2.forwardRef(
             " ",
             itemCount !== 1 ? tr("fluidgrids.builder.nodeCard.itemCountOther", "items") : tr("fluidgrids.builder.nodeCard.itemCountOne", "item")
           ] }) }),
-          (onSettings || onExecute || onDelete || infoButton) && /* @__PURE__ */ jsxs(
+          (onSettings || onExecute || onDelete || onToggleDisabled || infoButton) && /* @__PURE__ */ jsxs(
             "div",
             {
               className: cn(
@@ -4106,6 +4562,29 @@ var NodeCard = React2.forwardRef(
                   }
                 ),
                 infoButton,
+                onToggleDisabled && /* @__PURE__ */ jsx(
+                  ToolbarButton2,
+                  {
+                    title: disabled ? tr(
+                      "fluidgrids.builder.nodeCard.enableTooltip",
+                      "Enable node"
+                    ) : tr(
+                      "fluidgrids.builder.nodeCard.disableTooltip",
+                      "Disable node (skip on run)"
+                    ),
+                    onClick: onToggleDisabled,
+                    children: /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        icon: disabled ? "mdi:power" : "mdi:power-off",
+                        className: cn(
+                          "size-4",
+                          disabled ? "text-[var(--color-status-warning-text)]" : "text-muted-foreground"
+                        )
+                      }
+                    )
+                  }
+                ),
                 onDelete && /* @__PURE__ */ jsx(
                   ToolbarButton2,
                   {
@@ -4126,6 +4605,10 @@ var NodeCard = React2.forwardRef(
               ]
             }
           ),
+          disabled && /* @__PURE__ */ jsx("div", { className: "absolute -top-2 right-2 z-10", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 rounded-full border border-[var(--color-status-warning-border)] bg-[var(--color-status-warning-bg)] px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-[var(--color-status-warning-text)] shadow-sm", children: [
+            /* @__PURE__ */ jsx(Icon, { icon: "mdi:power-off", className: "size-2.5" }),
+            tr("fluidgrids.builder.nodeCard.disabledBadge", "Disabled")
+          ] }) }),
           /* @__PURE__ */ jsxs(
             "div",
             {
@@ -4135,6 +4618,7 @@ var NodeCard = React2.forwardRef(
                 "relative w-72 rounded-xl border border-border bg-card shadow-sm will-change-transform",
                 statusRing,
                 executionStatus === "success" && "animate-success-glow",
+                disabled && "opacity-50 grayscale-[0.6]",
                 className
               ),
               style: {
@@ -4221,7 +4705,17 @@ function StatusCorner({
   ) });
 }
 var NodeCardHeader = React2.forwardRef(
-  ({ icon, appName, accentKey, missingCredentials = false }, ref) => {
+  ({
+    icon,
+    appName,
+    accentKey,
+    missingCredentials = false,
+    label,
+    isRenaming = false,
+    onStartRename,
+    onCommitRename,
+    onCancelRename
+  }, ref) => {
     const tr = useTr();
     const accent = nodeAccent(accentKey);
     return /* @__PURE__ */ jsxs("div", { ref, className: "flex items-center gap-2.5 px-3 pb-3 pt-4", children: [
@@ -4237,7 +4731,19 @@ var NodeCardHeader = React2.forwardRef(
           children: /* @__PURE__ */ jsx(NodeTypeIcon, { icon, alt: appName, className: "size-[18px]" })
         }
       ),
-      /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: appName }),
+      onStartRename && onCommitRename && onCancelRename ? /* @__PURE__ */ jsx(
+        InlineEditableLabel,
+        {
+          value: label ?? "",
+          placeholder: appName,
+          editing: isRenaming,
+          onStartEdit: onStartRename,
+          onCommit: onCommitRename,
+          onCancel: onCancelRename,
+          className: "min-w-0 flex-1 truncate text-[11px] font-semibold uppercase tracking-wide text-muted-foreground",
+          inputClassName: "text-[11px] font-semibold uppercase tracking-wide"
+        }
+      ) : /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: label || appName }),
       missingCredentials && /* @__PURE__ */ jsx(
         "span",
         {
@@ -4607,7 +5113,13 @@ function LogicNodeCard({
   onSettings,
   onExecute,
   onDelete,
-  infoButton
+  infoButton,
+  disabled = false,
+  onToggleDisabled,
+  isRenaming = false,
+  onStartRename,
+  onCommitRename,
+  onCancelRename
 }) {
   const minHeight = Math.max(
     64,
@@ -4630,6 +5142,8 @@ function LogicNodeCard({
       onExecute,
       onDelete,
       infoButton,
+      disabled,
+      onToggleDisabled,
       children: [
         /* @__PURE__ */ jsxs(
           "div",
@@ -4638,7 +5152,19 @@ function LogicNodeCard({
             style: { minHeight },
             children: [
               /* @__PURE__ */ jsx("div", { className: "flex size-9 items-center justify-center rounded-lg bg-muted", children: /* @__PURE__ */ jsx(Icon, { icon, className: "size-5", style: { color: accent } }) }),
-              /* @__PURE__ */ jsx("span", { className: "max-w-full truncate text-sm font-semibold leading-tight", children: title }),
+              onStartRename && onCommitRename && onCancelRename ? /* @__PURE__ */ jsx(
+                InlineEditableLabel,
+                {
+                  value: title,
+                  placeholder: title,
+                  editing: isRenaming,
+                  onStartEdit: onStartRename,
+                  onCommit: onCommitRename,
+                  onCancel: onCancelRename,
+                  className: "max-w-full truncate text-sm font-semibold leading-tight",
+                  inputClassName: "text-sm font-semibold text-center"
+                }
+              ) : /* @__PURE__ */ jsx("span", { className: "max-w-full truncate text-sm font-semibold leading-tight", children: title }),
               subtitle && /* @__PURE__ */ jsx(
                 "span",
                 {
@@ -5927,14 +6453,24 @@ var getNodeMetadata = (value) => {
       executingNodeId,
       nodeStatuses,
       nodeItemCounts,
-      zustandSetNodes
+      zustandSetNodes,
+      renamingNodeId,
+      toggleNodeDisabled,
+      renameNode,
+      startRename,
+      endRename
     ] = useFlowStore(
       useShallow((s) => [
         s.execution.isExecuting,
         s.execution.executingNodeId,
         s.execution.nodeStatuses,
         s.execution.nodeItemCounts,
-        s.actions.nodes.setNodes
+        s.actions.nodes.setNodes,
+        s.workflow.renamingNodeId,
+        s.actions.nodes.toggleDisabled,
+        s.actions.nodes.renameNode,
+        s.actions.nodes.startRename,
+        s.actions.nodes.endRename
       ])
     );
     useEffect(() => {
@@ -5958,6 +6494,22 @@ var getNodeMetadata = (value) => {
     const handleDeleteNode = () => {
       deleteNode(id);
     };
+    const handleToggleDisabled = useCallback(() => {
+      toggleNodeDisabled(id);
+    }, [id, toggleNodeDisabled]);
+    const isRenamingThisNode = renamingNodeId === id;
+    const handleStartRename = useCallback(() => {
+      startRename(id);
+    }, [id, startRename]);
+    const handleCommitRename = useCallback(
+      (value2) => {
+        renameNode(id, value2);
+      },
+      [id, renameNode]
+    );
+    const handleCancelRename = useCallback(() => {
+      endRename();
+    }, [endRename]);
     const openNdv = useFlowStore((s) => s.actions.ndv.open);
     const openQuickConfig = useFlowStore((s) => s.actions.quickConfig.open);
     const clickTimerRef = useRef(null);
@@ -6020,6 +6572,8 @@ var getNodeMetadata = (value) => {
     const nodeStatus = nodeStatuses[id] || "idle";
     const executionStatus = nodeStatus === "success" ? "success" : nodeStatus === "error" ? "error" : nodeStatus === "running" ? "running" : "idle";
     const itemCount = nodeItemCounts[id];
+    const isDisabled = data?.disabled === true;
+    const nodeLabel = data?.label || "";
     const nodeKinds = data?.nodeData?.kind;
     const pinnedOpType = (data?.operation_type || "").toLowerCase();
     const isTrigger = pinnedOpType === "trigger" || (value?.type || "").toLowerCase().includes("trigger") || // Kind-based detection only when NO operation is pinned: dual-role
@@ -6084,7 +6638,13 @@ var getNodeMetadata = (value) => {
             onSettings: handleOpenNdv,
             onExecute: handleExecuteStep,
             onDelete: handleDeleteNode,
-            infoButton: /* @__PURE__ */ jsx(NodeInfoButtonWithModal, { metadata: nodeInfoMetadata })
+            infoButton: /* @__PURE__ */ jsx(NodeInfoButtonWithModal, { metadata: nodeInfoMetadata }),
+            disabled: isDisabled,
+            onToggleDisabled: handleToggleDisabled,
+            isRenaming: isRenamingThisNode,
+            onStartRename: handleStartRename,
+            onCommitRename: handleCommitRename,
+            onCancelRename: handleCancelRename
           }
         ),
         /* @__PURE__ */ jsx(
@@ -6113,6 +6673,8 @@ var getNodeMetadata = (value) => {
           onExecute: handleExecuteStep,
           onDelete: handleDeleteNode,
           infoButton: /* @__PURE__ */ jsx(NodeInfoButtonWithModal, { metadata: nodeInfoMetadata }),
+          disabled: isDisabled,
+          onToggleDisabled: handleToggleDisabled,
           children: [
             /* @__PURE__ */ jsx(
               NodeCardHeader,
@@ -6120,7 +6682,12 @@ var getNodeMetadata = (value) => {
                 icon: meta.icon,
                 appName,
                 accentKey: value?.type || meta.title,
-                missingCredentials
+                missingCredentials,
+                label: nodeLabel,
+                isRenaming: isRenamingThisNode,
+                onStartRename: handleStartRename,
+                onCommitRename: handleCommitRename,
+                onCancelRename: handleCancelRename
               }
             ),
             operationDisplay === "execute" && (value?.type || "").startsWith("internal:") || isTrigger ? (
@@ -13819,7 +14386,7 @@ var DEFAULT_CONFIG = {
   maxTemplateLength: 1e4,
   debug: false
 };
-var SAFE_GLOBALS = {
+var SAFE_GLOBALS2 = {
   // Type conversion
   parseInt,
   parseFloat,
@@ -13866,7 +14433,7 @@ function parseTemplate(template) {
 }
 function buildSandbox(scope) {
   return {
-    ...SAFE_GLOBALS,
+    ...SAFE_GLOBALS2,
     output: scope.output,
     TriggerInput: scope.TriggerInput,
     WorkflowState: scope.WorkflowState,
@@ -17518,6 +18085,10 @@ function CustomDeletableEdge(props) {
   const nodeStatuses = useFlowStore(
     useShallow((s) => s.execution.nodeStatuses)
   );
+  const nodeItemCounts = useFlowStore(
+    useShallow((s) => s.execution.nodeItemCounts)
+  );
+  const sourceItemCount = nodeItemCounts[source];
   const sourceNodeStatus = nodeStatuses[source] || "idle";
   const isRunning = sourceNodeStatus === "running";
   const isSuccess = sourceNodeStatus === "success";
@@ -18417,6 +18988,26 @@ function CustomDeletableEdge(props) {
       }
     ),
     /* @__PURE__ */ jsxs(EdgeLabelRenderer, { children: [
+      sourceItemCount !== void 0 && sourceItemCount > 0 && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "pointer-events-none absolute z-[999]",
+          style: {
+            transform: `translate(${labelX}px, ${labelY}px) translate(-50%, -100%) translateY(-10px)`
+          },
+          children: /* @__PURE__ */ jsxs("div", { className: "rounded-full border border-border bg-card px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground shadow-sm", children: [
+            sourceItemCount,
+            " ",
+            sourceItemCount !== 1 ? tr(
+              "fluidgrids.builder.edges.customDeletableEdge.itemCountOther",
+              "items"
+            ) : tr(
+              "fluidgrids.builder.edges.customDeletableEdge.itemCountOne",
+              "item"
+            )
+          ] })
+        }
+      ),
       /* @__PURE__ */ jsxs(
         "div",
         {
@@ -18809,6 +19400,276 @@ function computeMinimapRect(panelRect, bounds, margin) {
   top = Math.min(Math.max(top, bounds.top + margin), maxTop);
   return { left, top };
 }
+var SHORTCUT_ROWS = [
+  {
+    labelKey: "fluidgrids.builder.shortcutsHelp.undo",
+    labelDefault: "Undo",
+    mac: "\u2318Z",
+    other: "Ctrl+Z"
+  },
+  {
+    labelKey: "fluidgrids.builder.shortcutsHelp.redo",
+    labelDefault: "Redo",
+    mac: "\u2318\u21E7Z",
+    other: "Ctrl+Shift+Z / Ctrl+Y"
+  },
+  {
+    labelKey: "fluidgrids.builder.shortcutsHelp.copy",
+    labelDefault: "Copy selected node(s)",
+    mac: "\u2318C",
+    other: "Ctrl+C"
+  },
+  {
+    labelKey: "fluidgrids.builder.shortcutsHelp.cut",
+    labelDefault: "Cut selected node(s)",
+    mac: "\u2318X",
+    other: "Ctrl+X"
+  },
+  {
+    labelKey: "fluidgrids.builder.shortcutsHelp.paste",
+    labelDefault: "Paste \u2014 works across workflows/tabs",
+    mac: "\u2318V",
+    other: "Ctrl+V"
+  },
+  {
+    labelKey: "fluidgrids.builder.shortcutsHelp.duplicate",
+    labelDefault: "Duplicate selected node(s)",
+    mac: "\u2318D",
+    other: "Ctrl+D"
+  },
+  {
+    labelKey: "fluidgrids.builder.shortcutsHelp.delete",
+    labelDefault: "Delete selected node(s)/connection(s)",
+    mac: "\u232B / Delete",
+    other: "Backspace / Delete"
+  },
+  {
+    labelKey: "fluidgrids.builder.shortcutsHelp.rename",
+    labelDefault: "Rename the selected node",
+    mac: "F2 or double-click its title",
+    other: "F2 or double-click its title"
+  },
+  {
+    labelKey: "fluidgrids.builder.shortcutsHelp.multiSelectClick",
+    labelDefault: "Add a node to the selection",
+    mac: "\u2318-click / \u2303-click",
+    other: "Ctrl-click"
+  },
+  {
+    labelKey: "fluidgrids.builder.shortcutsHelp.multiSelectBox",
+    labelDefault: "Box-select multiple nodes",
+    mac: "\u21E7-drag on empty canvas",
+    other: "Shift-drag on empty canvas"
+  },
+  {
+    labelKey: "fluidgrids.builder.shortcutsHelp.stickyNote",
+    labelDefault: "Add a sticky note",
+    mac: "\u21E7S",
+    other: "Shift+S"
+  },
+  {
+    labelKey: "fluidgrids.builder.shortcutsHelp.cancel",
+    labelDefault: "Close a panel / cancel an edit",
+    mac: "Esc",
+    other: "Esc"
+  },
+  {
+    labelKey: "fluidgrids.builder.shortcutsHelp.help",
+    labelDefault: "Open this shortcuts panel",
+    mac: "?",
+    other: "?"
+  }
+];
+function Kbd({ children }) {
+  return /* @__PURE__ */ jsx("kbd", { className: "rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-[11px] font-medium text-muted-foreground", children });
+}
+function ShortcutsHelpPanel({
+  open,
+  onOpenChange
+}) {
+  const tr = useTr();
+  const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform ?? "");
+  return /* @__PURE__ */ jsx(Dialog$1, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent$1, { className: "max-w-lg", children: [
+    /* @__PURE__ */ jsxs(DialogHeader$1, { children: [
+      /* @__PURE__ */ jsx(DialogTitle$1, { children: tr("fluidgrids.builder.shortcutsHelp.title", "Keyboard shortcuts") }),
+      /* @__PURE__ */ jsx(DialogDescription$1, { children: tr(
+        "fluidgrids.builder.shortcutsHelp.description",
+        "Speed up editing the workflow canvas."
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "max-h-[60vh] space-y-0.5 overflow-y-auto pr-1", children: SHORTCUT_ROWS.map((row) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex items-center justify-between gap-4 rounded-md px-2 py-1.5 text-sm hover:bg-muted/50",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "text-foreground/80", children: tr(row.labelKey, row.labelDefault) }),
+          /* @__PURE__ */ jsx(Kbd, { children: isMac ? row.mac : row.other })
+        ]
+      },
+      row.labelKey
+    )) })
+  ] }) });
+}
+
+// src/builder/lib/clipboard-payload.ts
+var CLIPBOARD_MARKER = "fluidgrids/flow-clipboard@1";
+function buildClipboardPayload(nodes, edges) {
+  const selected = nodes.filter((n) => n.selected);
+  const idSet = new Set(selected.map((n) => n.id));
+  const internalEdges = edges.filter(
+    (e) => idSet.has(e.source) && idSet.has(e.target)
+  );
+  return { marker: CLIPBOARD_MARKER, nodes: selected, edges: internalEdges };
+}
+function parseClipboardPayload(text) {
+  if (!text) return null;
+  let parsed;
+  try {
+    parsed = JSON.parse(text);
+  } catch {
+    return null;
+  }
+  if (!parsed || typeof parsed !== "object") return null;
+  const rec = parsed;
+  if (rec.marker !== CLIPBOARD_MARKER || !Array.isArray(rec.nodes)) {
+    return null;
+  }
+  return {
+    marker: CLIPBOARD_MARKER,
+    nodes: rec.nodes,
+    edges: Array.isArray(rec.edges) ? rec.edges : []
+  };
+}
+
+// src/builder/hooks/use-flow-clipboard.ts
+function useFlowClipboard() {
+  const { getNodes, getEdges } = useReactFlow();
+  const pasteNodes = useFlowStore((s) => s.actions.nodes.pasteNodes);
+  const deleteNodes = useFlowStore((s) => s.actions.nodes.deleteNodes);
+  const copySelection = useCallback(async () => {
+    const payload = buildClipboardPayload(getNodes(), getEdges());
+    if (payload.nodes.length === 0) return false;
+    try {
+      await navigator.clipboard.writeText(JSON.stringify(payload));
+      return true;
+    } catch {
+      return false;
+    }
+  }, [getNodes, getEdges]);
+  const cutSelection = useCallback(async () => {
+    const selected = getNodes().filter((n) => n.selected);
+    if (selected.length === 0) return false;
+    const copied = await copySelection();
+    if (!copied) return false;
+    deleteNodes(selected);
+    return true;
+  }, [copySelection, deleteNodes, getNodes]);
+  const pasteFromClipboard = useCallback(async () => {
+    let text;
+    try {
+      text = await navigator.clipboard.readText();
+    } catch {
+      return false;
+    }
+    const payload = parseClipboardPayload(text);
+    if (!payload || payload.nodes.length === 0) return false;
+    pasteNodes({ nodes: payload.nodes, edges: payload.edges });
+    return true;
+  }, [pasteNodes]);
+  return { copySelection, cutSelection, pasteFromClipboard };
+}
+
+// src/builder/hooks/use-editor-shortcuts.ts
+function isEditableTarget(target) {
+  const el = target;
+  if (!el) return false;
+  return el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT" || el.isContentEditable;
+}
+function hasTextSelection() {
+  const sel = typeof window !== "undefined" ? window.getSelection?.() : null;
+  return !!sel && sel.toString().length > 0;
+}
+function useEditorShortcuts(options) {
+  const readOnly = options?.readOnly ?? false;
+  const onOpenHelp = options?.onOpenHelp;
+  const { getNodes } = useReactFlow();
+  const undo = useFlowStore((s) => s.actions.history.undo);
+  const redo = useFlowStore((s) => s.actions.history.redo);
+  const duplicateNodes = useFlowStore((s) => s.actions.nodes.duplicateNodes);
+  const startRename = useFlowStore((s) => s.actions.nodes.startRename);
+  const { copySelection, cutSelection, pasteFromClipboard } = useFlowClipboard();
+  const insertStickyNote = useInsertStickyNote();
+  useEffect(() => {
+    if (readOnly) return;
+    const onKeyDown = (e) => {
+      const editable = isEditableTarget(e.target);
+      const mod = e.metaKey || e.ctrlKey;
+      if (!mod && !e.altKey && e.shiftKey && e.key.toLowerCase() === "s" && !editable) {
+        e.preventDefault();
+        insertStickyNote();
+        return;
+      }
+      if (!mod && !editable && onOpenHelp && (e.key === "?" || e.shiftKey && e.key === "/")) {
+        e.preventDefault();
+        onOpenHelp();
+        return;
+      }
+      if (!mod && !editable && e.key === "F2") {
+        const selected = getNodes().filter((n) => n.selected);
+        if (selected.length === 1 && selected[0]) {
+          e.preventDefault();
+          startRename(selected[0].id);
+        }
+        return;
+      }
+      if (!mod || editable) return;
+      const key = e.key.toLowerCase();
+      if (key === "z") {
+        e.preventDefault();
+        if (e.shiftKey) redo();
+        else undo();
+        return;
+      }
+      if (key === "y") {
+        e.preventDefault();
+        redo();
+        return;
+      }
+      if ((key === "c" || key === "x") && !hasTextSelection()) {
+        const hasSelection = getNodes().some((n) => n.selected);
+        if (!hasSelection) return;
+        e.preventDefault();
+        void (key === "c" ? copySelection() : cutSelection());
+        return;
+      }
+      if (key === "v") {
+        e.preventDefault();
+        void pasteFromClipboard();
+        return;
+      }
+      if (key === "d") {
+        const selectedIds = getNodes().filter((n) => n.selected).map((n) => n.id);
+        if (selectedIds.length === 0) return;
+        e.preventDefault();
+        duplicateNodes(selectedIds);
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [
+    readOnly,
+    getNodes,
+    undo,
+    redo,
+    duplicateNodes,
+    startRename,
+    copySelection,
+    cutSelection,
+    pasteFromClipboard,
+    insertStickyNote,
+    onOpenHelp
+  ]);
+}
 var ZOOM_DURATION = 500;
 var NODE_WIDTH = 220;
 var NODE_HEIGHT = 80;
@@ -18869,6 +19730,7 @@ function CanvasControls() {
   const isReadOnly = searchParams.get("readonly") === "true";
   const [showMinimap, setShowMinimap] = useState(false);
   const [edgesHidden, setEdgesHidden] = useState(false);
+  const [shortcutsHelpOpen, setShortcutsHelpOpen] = useState(false);
   const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
   const [isDragging, setIsDragging] = useState(false);
   const panelRef = useRef(null);
@@ -18878,6 +19740,18 @@ function CanvasControls() {
     shallow
   );
   const { zoomIn, zoomOut, fitView, setEdges, getEdges, getNodes, setNodes } = useReactFlow();
+  const [canUndo, canRedo, undo, redo] = useFlowStore(
+    useShallow((s) => [
+      s.history.past.length > 0,
+      s.history.future.length > 0,
+      s.actions.history.undo,
+      s.actions.history.redo
+    ])
+  );
+  useEditorShortcuts({
+    readOnly: isReadOnly,
+    onOpenHelp: () => setShortcutsHelpOpen(true)
+  });
   const toggleEdges = useCallback(() => {
     setEdgesHidden((prev) => {
       const next = !prev;
@@ -18886,20 +19760,6 @@ function CanvasControls() {
     });
   }, [setEdges]);
   const insertStickyNote = useInsertStickyNote();
-  useEffect(() => {
-    if (isReadOnly) return;
-    const onKeyDown = (e) => {
-      if (!e.shiftKey || e.key.toLowerCase() !== "s") return;
-      if (e.metaKey || e.ctrlKey || e.altKey) return;
-      const t = e.target;
-      if (t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable))
-        return;
-      e.preventDefault();
-      insertStickyNote();
-    };
-    window.addEventListener("keydown", onKeyDown);
-    return () => window.removeEventListener("keydown", onKeyDown);
-  }, [insertStickyNote, isReadOnly]);
   const tidyUp = useCallback(() => {
     const nodes = getNodes().filter((n) => n.type !== STICKY_NOTE_TYPE);
     const edges = getEdges();
@@ -19101,6 +19961,31 @@ function CanvasControls() {
             }
           ),
           !isReadOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "w-px h-5 bg-card-foreground/10 mx-0.5" }),
+            /* @__PURE__ */ jsx(
+              ControlBtn,
+              {
+                title: tr(
+                  "fluidgrids.builder.canvasControls.undo",
+                  "Undo (Ctrl/Cmd+Z)"
+                ),
+                disabled: !canUndo,
+                onClick: undo,
+                children: /* @__PURE__ */ jsx(Undo2, { className: "size-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ControlBtn,
+              {
+                title: tr(
+                  "fluidgrids.builder.canvasControls.redo",
+                  "Redo (Ctrl/Cmd+Shift+Z)"
+                ),
+                disabled: !canRedo,
+                onClick: redo,
+                children: /* @__PURE__ */ jsx(Redo2, { className: "size-4" })
+              }
+            ),
             /* @__PURE__ */ jsx("div", { className: "w-px h-5 bg-card-foreground/10 mx-0.5" }),
             /* @__PURE__ */ jsx(
               ControlBtn,
@@ -19144,10 +20029,29 @@ function CanvasControls() {
                 onClick: insertStickyNote,
                 children: /* @__PURE__ */ jsx(Icon, { icon: "mdi:note-plus-outline", className: "size-4" })
               }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "w-px h-5 bg-card-foreground/10 mx-0.5" }),
+            /* @__PURE__ */ jsx(
+              ControlBtn,
+              {
+                title: tr(
+                  "fluidgrids.builder.canvasControls.shortcutsHelp",
+                  "Keyboard shortcuts (?)"
+                ),
+                onClick: () => setShortcutsHelpOpen(true),
+                children: /* @__PURE__ */ jsx(Keyboard, { className: "size-4" })
+              }
             )
           ] })
         ]
       }
+    ),
+    !isReadOnly && /* @__PURE__ */ jsx(
+      ShortcutsHelpPanel,
+      {
+        open: shortcutsHelpOpen,
+        onOpenChange: setShortcutsHelpOpen
+      }
     )
   ] });
 }
@@ -23310,7 +24214,7 @@ var FlowBuilder = ({ readOnly = false }) => {
               nodesDraggable: !isReadOnly,
               nodesConnectable: !isReadOnly,
               elementsSelectable: !isReadOnly,
-              multiSelectionKeyCode: null,
+              multiSelectionKeyCode: isReadOnly ? null : ["Meta", "Control"],
               deleteKeyCode: isReadOnly ? null : deleteKeyCode,
               snapGrid: [16, 16],
               snapToGrid: true,
@@ -23436,5 +24340,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-3RWKQIV4.js.map
+//# sourceMappingURL=chunk-3RWKQIV4.js.map