@burdenoff/fluidgrids-fe-sdk 2026.918.1 → 2026.922.1

package/dist/{chunk-UVBJY5FB.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,
@@ -18780,11 +19168,59 @@ function useInsertStickyNote() {
     return sticky;
   }, [addNodes, getNodes, screenToFlowPosition, updateNode]);
 }
+
+// src/builder/components/flow-builder/components/controls/canvas-controls.drag.ts
+function clampDragOffset(baseLeft, baseTop, width, height, bounds, margin, rawOffset) {
+  const nextLeft = baseLeft + rawOffset.x;
+  const nextTop = baseTop + rawOffset.y;
+  const maxX = bounds.right - margin - width;
+  const maxY = bounds.bottom - margin - height;
+  const clampedLeft = Math.min(Math.max(nextLeft, bounds.left + margin), maxX);
+  const clampedTop = Math.min(Math.max(nextTop, bounds.top + margin), maxY);
+  return {
+    x: clampedLeft - baseLeft,
+    y: clampedTop - baseTop
+  };
+}
+var MINIMAP_WIDTH = 200;
+var MINIMAP_HEIGHT = 150;
+var MINIMAP_GAP = 4;
+function computeMinimapRect(panelRect, bounds, margin) {
+  let left = panelRect.left;
+  let top = panelRect.top - MINIMAP_HEIGHT - MINIMAP_GAP;
+  if (top < bounds.top + margin) {
+    top = panelRect.bottom + MINIMAP_GAP;
+  }
+  const maxLeft = bounds.right - margin - MINIMAP_WIDTH;
+  left = Math.min(Math.max(left, bounds.left + margin), maxLeft);
+  const maxTop = bounds.bottom - margin - MINIMAP_HEIGHT;
+  top = Math.min(Math.max(top, bounds.top + margin), maxTop);
+  return { left, top };
+}
 var ZOOM_DURATION = 500;
 var NODE_WIDTH = 220;
 var NODE_HEIGHT = 80;
 var H_GAP = 80;
 var V_GAP = 48;
+var CANVAS_MARGIN = 12;
+function readCanvasBounds(el) {
+  if (!el) return null;
+  const cs = getComputedStyle(el);
+  const num = (value, fallback) => {
+    const n = parseFloat(value);
+    return Number.isFinite(n) ? n : fallback;
+  };
+  return {
+    left: num(cs.getPropertyValue("--canvas-left"), 0),
+    right: num(cs.getPropertyValue("--canvas-right"), window.innerWidth),
+    top: num(cs.getPropertyValue("--canvas-top"), 0),
+    bottom: num(cs.getPropertyValue("--canvas-bottom"), window.innerHeight)
+  };
+}
+function isInteractiveTarget(target) {
+  if (!(target instanceof Element)) return false;
+  return target.closest("button, input, a, [data-no-drag]") !== null;
+}
 function zoomSelector(s) {
   return {
     zoom: s.transform[2],
@@ -18821,6 +19257,10 @@ function CanvasControls() {
   const isReadOnly = searchParams.get("readonly") === "true";
   const [showMinimap, setShowMinimap] = useState(false);
   const [edgesHidden, setEdgesHidden] = useState(false);
+  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = useState(false);
+  const panelRef = useRef(null);
+  const dragState = useRef(null);
   const { zoom, minZoomReached, maxZoomReached } = useStore(
     zoomSelector,
     shallow
@@ -18900,6 +19340,59 @@ function CanvasControls() {
     );
     setTimeout(() => fitView({ duration: ZOOM_DURATION, padding: 0.15 }), 50);
   }, [getNodes, getEdges, setNodes, fitView]);
+  const handlePointerDown = useCallback(
+    (e) => {
+      if (isInteractiveTarget(e.target)) return;
+      const panel = panelRef.current;
+      if (!panel) return;
+      panel.setPointerCapture(e.pointerId);
+      const rect = panel.getBoundingClientRect();
+      dragState.current = {
+        startX: e.clientX,
+        startY: e.clientY,
+        startOffsetX: dragOffset.x,
+        startOffsetY: dragOffset.y,
+        baseLeft: rect.left - dragOffset.x,
+        baseTop: rect.top - dragOffset.y,
+        width: rect.width,
+        height: rect.height
+      };
+      setIsDragging(true);
+    },
+    [dragOffset]
+  );
+  const handlePointerMove = useCallback((e) => {
+    const ds = dragState.current;
+    if (!ds) return;
+    const bounds = readCanvasBounds(panelRef.current);
+    if (!bounds) return;
+    const rawOffset = {
+      x: ds.startOffsetX + (e.clientX - ds.startX),
+      y: ds.startOffsetY + (e.clientY - ds.startY)
+    };
+    setDragOffset(
+      clampDragOffset(
+        ds.baseLeft,
+        ds.baseTop,
+        ds.width,
+        ds.height,
+        bounds,
+        CANVAS_MARGIN,
+        rawOffset
+      )
+    );
+  }, []);
+  const handlePointerUp = useCallback((e) => {
+    if (!dragState.current) return;
+    if (panelRef.current?.hasPointerCapture(e.pointerId)) {
+      panelRef.current.releasePointerCapture(e.pointerId);
+    }
+    dragState.current = null;
+    setIsDragging(false);
+  }, []);
+  const panelRect = panelRef.current?.getBoundingClientRect();
+  const canvasBounds = readCanvasBounds(panelRef.current);
+  const minimapRect = panelRect && canvasBounds ? computeMinimapRect(panelRect, canvasBounds, CANVAS_MARGIN) : null;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     showMinimap && /* @__PURE__ */ jsx(
       MiniMap,
@@ -18907,9 +19400,9 @@ function CanvasControls() {
         position: "bottom-left",
         style: {
           position: "fixed",
-          bottom: 52,
-          left: "calc(var(--canvas-left, 64px) + 12px)",
-          marginBottom: 4,
+          left: minimapRect ? minimapRect.left : void 0,
+          bottom: minimapRect ? window.innerHeight - minimapRect.top - MINIMAP_HEIGHT : 52,
+          margin: 0,
           backgroundColor: "var(--color-card)"
         },
         className: "!rounded-lg !border !border-card-foreground/10 !shadow-lg",
@@ -18923,8 +19416,20 @@ function CanvasControls() {
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: "fixed bottom-3 z-50 flex items-center gap-1 rounded-xl border border-card-foreground/10 bg-card px-2 py-1.5 shadow-lg",
-        style: { left: "calc(var(--canvas-left, 64px) + 12px)" },
+        ref: panelRef,
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+        onPointerCancel: handlePointerUp,
+        className: [
+          "fixed bottom-3 z-50 flex items-center gap-1 rounded-xl border",
+          "border-card-foreground/10 bg-card px-2 py-1.5 shadow-lg touch-none",
+          isDragging ? "cursor-grabbing" : "cursor-grab"
+        ].join(" "),
+        style: {
+          left: "calc(var(--canvas-left, 64px) + 12px)",
+          transform: `translate3d(${dragOffset.x}px, ${dragOffset.y}px, 0)`
+        },
         children: [
           /* @__PURE__ */ jsx(
             ControlBtn,
@@ -23152,13 +23657,16 @@ var FlowBuilder = ({ readOnly = false }) => {
       {
         ref: (el) => {
           if (!el) return;
-          const update = () => el.style.setProperty(
-            "--canvas-left",
-            `${el.getBoundingClientRect().left}px`
-          );
+          const update = () => {
+            const rect = el.getBoundingClientRect();
+            el.style.setProperty("--canvas-left", `${rect.left}px`);
+            el.style.setProperty("--canvas-right", `${rect.right}px`);
+            el.style.setProperty("--canvas-top", `${rect.top}px`);
+            el.style.setProperty("--canvas-bottom", `${rect.bottom}px`);
+          };
           update();
           const ro = new ResizeObserver(update);
-          ro.observe(document.documentElement);
+          ro.observe(el);
           el._ro?.disconnect();
           el._ro = ro;
         },
@@ -23316,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-UVBJY5FB.js.map
-//# sourceMappingURL=chunk-UVBJY5FB.js.map
+//# sourceMappingURL=chunk-XASNLRFQ.js.map
+//# sourceMappingURL=chunk-XASNLRFQ.js.map