@burdenoff/fluidgrids-fe-sdk 2026.1101.1 → 2026.1101.3

package/dist/observability.js

@@ -1,12 +1,13 @@
-export { DataSinkDashboardPage, ErrorAnalyticsPage, InsightsPage } from './chunk-3M36XWAH.js';
-import './chunk-ALFMJSD6.js';
-import './chunk-RIHYPPMQ.js';
+export { DataSinkDashboardPage, ErrorAnalyticsPage, InsightsPage } from './chunk-IGRIN7NL.js';
+import './chunk-H7XPXONT.js';
+import './chunk-NLYQ3XDE.js';
 import './chunk-5ERAJC2I.js';
 import './chunk-GLYINMOR.js';
 import './chunk-7KKYIRLH.js';
-import './chunk-6ILIBJFH.js';
+import './chunk-NZJWKVER.js';
 import './chunk-ZUVFD5KV.js';
 import './chunk-JL7CASN5.js';
+import './chunk-OCJTTHTS.js';
 import './chunk-PXIFUMLA.js';
 import './chunk-6AMNEX2Y.js';
 import './chunk-G77IGC3Y.js';

package/dist/quick-config-panel-BRZZHOSI.js

@@ -0,0 +1,402 @@
+import { ReadOnlyFieldset, NodeParamsForm, NodeExecutionActions } from './chunk-472HJ3S3.js';
+import './chunk-AASHQI77.js';
+import { useNodeConfig, nodeSubtitle, nodeTitle, FieldTree } from './chunk-IA2ZCHNQ.js';
+import './chunk-GTEBQQ7J.js';
+import './chunk-YKFR7BZJ.js';
+import './chunk-JDLQ6QIB.js';
+import './chunk-7KKYIRLH.js';
+import { useFlowStore, useNodeExecution, getNodeDetail, nodeAccent, NodeTypeIcon } from './chunk-NZJWKVER.js';
+import './chunk-ZUVFD5KV.js';
+import './chunk-JL7CASN5.js';
+import './chunk-OCJTTHTS.js';
+import './chunk-PXIFUMLA.js';
+import './chunk-6AMNEX2Y.js';
+import './chunk-G77IGC3Y.js';
+import './chunk-IHEV5HTD.js';
+import { useTr } from './chunk-UULVIT25.js';
+import './chunk-NTWG3CJX.js';
+import './chunk-62GWEYJ5.js';
+import { useState, useRef, useLayoutEffect, useMemo, useEffect } from 'react';
+import { Icon } from '@iconify/react';
+import { useReactFlow, useStore } from '@xyflow/react';
+import { shallow } from 'zustand/shallow';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var PANEL_WIDTH = 380;
+var PANEL_EST_HEIGHT = 480;
+var MAPPER_WIDTH = 260;
+var VIEWPORT_MARGIN = 12;
+var NODE_GAP = 14;
+var MAPPER_GAP = 10;
+function useNodeScreenRect(nodeId) {
+  const { flowToScreenPosition } = useReactFlow();
+  const raw = useStore((s) => {
+    const n = s.nodeLookup.get(nodeId);
+    if (!n) return null;
+    const p = n.internals?.positionAbsolute ?? n.position;
+    return {
+      x: p.x,
+      y: p.y,
+      w: n.measured?.width ?? n.width ?? 288,
+      h: n.measured?.height ?? n.height ?? 120,
+      // Selecting the transform forces a re-render on pan/zoom.
+      tx: s.transform[0],
+      ty: s.transform[1],
+      z: s.transform[2]
+    };
+  }, shallow);
+  if (!raw) return null;
+  const tl = flowToScreenPosition({ x: raw.x, y: raw.y });
+  const br = flowToScreenPosition({ x: raw.x + raw.w, y: raw.y + raw.h });
+  return {
+    left: tl.x,
+    top: tl.y,
+    right: br.x,
+    bottom: br.y,
+    cy: (tl.y + br.y) / 2
+  };
+}
+var clamp = (v, lo, hi) => Math.min(Math.max(v, lo), Math.max(lo, hi));
+function QuickConfigPanel() {
+  const quickConfig = useFlowStore((s) => s.workflow.quickConfig);
+  if (!quickConfig) return null;
+  return (
+    // Remount per node so panel-local state (mapper open) resets naturally.
+    /* @__PURE__ */ jsx(
+      QuickConfigPanelInner,
+      {
+        nodeId: quickConfig.nodeId,
+        type: quickConfig.type
+      },
+      quickConfig.nodeId
+    )
+  );
+}
+function QuickConfigPanelInner({
+  nodeId,
+  type
+}) {
+  const close = useFlowStore((s) => s.actions.quickConfig.close);
+  const openNdv = useFlowStore((s) => s.actions.ndv.open);
+  const tr = useTr();
+  const { executeStep, executeFromNode } = useNodeExecution();
+  const workflow = useFlowStore((s) => s.workflow);
+  const execution = useFlowStore((s) => s.execution);
+  const config = useNodeConfig({ nodeId, type });
+  const {
+    node,
+    nodes,
+    sourceIds,
+    selectedSource,
+    setSelectedSource,
+    inputFields
+  } = config;
+  const [showMapper, setShowMapper] = useState(false);
+  const nodeRect = useNodeScreenRect(nodeId);
+  const cardRef = useRef(null);
+  const [panelH, setPanelH] = useState(PANEL_EST_HEIGHT);
+  useLayoutEffect(() => {
+    const el = cardRef.current;
+    if (!el) return;
+    const measure = () => setPanelH(el.offsetHeight);
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const placement = useMemo(() => {
+    const mapperCoords = (panelLeft, panelTop) => {
+      const leftPlacement = panelLeft - MAPPER_GAP - MAPPER_WIDTH;
+      const rightPlacement = panelLeft + PANEL_WIDTH + MAPPER_GAP;
+      const rawLeft2 = leftPlacement >= VIEWPORT_MARGIN ? leftPlacement : rightPlacement;
+      return {
+        mapperLeft: clamp(
+          rawLeft2,
+          VIEWPORT_MARGIN,
+          window.innerWidth - MAPPER_WIDTH - VIEWPORT_MARGIN
+        ),
+        mapperTop: panelTop
+      };
+    };
+    if (!nodeRect) {
+      const left2 = window.innerWidth / 2 - PANEL_WIDTH / 2;
+      const top2 = window.innerHeight / 4;
+      return {
+        side: "right",
+        left: left2,
+        top: top2,
+        connectorLeft: 0,
+        connectorWidth: 0,
+        connectorTop: 0,
+        hasConnector: false,
+        ...mapperCoords(left2, top2)
+      };
+    }
+    const need = PANEL_WIDTH + NODE_GAP + VIEWPORT_MARGIN;
+    const spaceRight = window.innerWidth - nodeRect.right;
+    const spaceLeft = nodeRect.left;
+    const side = spaceRight >= need ? "right" : spaceLeft >= need ? "left" : spaceRight >= spaceLeft ? "right" : "left";
+    const rawLeft = side === "right" ? nodeRect.right + NODE_GAP : nodeRect.left - NODE_GAP - PANEL_WIDTH;
+    const left = clamp(
+      rawLeft,
+      VIEWPORT_MARGIN,
+      window.innerWidth - PANEL_WIDTH - VIEWPORT_MARGIN
+    );
+    const top = clamp(
+      nodeRect.cy - panelH / 2,
+      VIEWPORT_MARGIN,
+      window.innerHeight - panelH - VIEWPORT_MARGIN
+    );
+    const connectorTop = clamp(nodeRect.cy, top + 6, top + panelH - 6);
+    const connectorLeft = side === "right" ? nodeRect.right : left + PANEL_WIDTH;
+    const connectorWidth = Math.max(
+      0,
+      side === "right" ? left - nodeRect.right : nodeRect.left - (left + PANEL_WIDTH)
+    );
+    return {
+      side,
+      left,
+      top,
+      connectorLeft,
+      connectorWidth,
+      connectorTop,
+      hasConnector: connectorWidth > 1,
+      ...mapperCoords(left, top)
+    };
+  }, [nodeRect, panelH]);
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === "Escape") close();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [close]);
+  useEffect(() => {
+    if (!nodes.some((n) => n.id === nodeId)) close();
+  }, [nodes, nodeId, close]);
+  if (!node) return null;
+  const meta = getNodeDetail(node.type);
+  const accent = nodeAccent(node.type || meta.title);
+  const subtitle = nodeSubtitle(node);
+  const expandToNdv = () => {
+    openNdv({ nodeId, type });
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    placement.hasConnector && /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": true,
+        className: "pointer-events-none fixed",
+        style: {
+          left: placement.connectorLeft,
+          top: placement.connectorTop - 1,
+          width: placement.connectorWidth,
+          height: 2,
+          background: accent,
+          opacity: 0.55,
+          zIndex: 299
+        }
+      }
+    ),
+    showMapper && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "fixed overflow-hidden rounded-xl border border-border bg-card shadow-xl",
+        style: {
+          left: placement.mapperLeft,
+          top: placement.mapperTop,
+          width: MAPPER_WIDTH,
+          maxHeight: "min(60vh, 480px)",
+          zIndex: 301,
+          display: "flex",
+          flexDirection: "column"
+        },
+        "data-testid": "quick-config-mapper",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2 border-b border-border px-3 py-2", children: [
+            /* @__PURE__ */ jsx(
+              Icon,
+              {
+                icon: "mdi:tray-arrow-down",
+                className: "size-3.5 text-muted-foreground"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-[11px] font-semibold uppercase tracking-[0.12em] text-muted-foreground", children: tr("fluidgrids.builder.quickConfigPanel.inputHeading", "Input") }),
+            sourceIds.length > 0 && /* @__PURE__ */ jsx(
+              "select",
+              {
+                className: "ml-auto max-w-[55%] truncate rounded-md border border-border-default bg-bg-surface px-1.5 py-0.5 text-[11px] text-text-primary scheme-normal dark:scheme-dark outline-none focus:border-action-primary-border [&_option]:bg-bg-surface [&_option]:text-text-primary",
+                value: selectedSource ?? "",
+                onChange: (e) => setSelectedSource(e.target.value),
+                "data-testid": "qc-source-selector",
+                children: sourceIds.map((sid) => {
+                  const sn = nodes.find((n) => n.id === sid);
+                  return /* @__PURE__ */ jsx("option", { value: sid, children: nodeTitle(sn) }, sid);
+                })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto px-2 py-2", children: inputFields.length > 0 ? /* @__PURE__ */ jsx(FieldTree, { fields: inputFields, draggable: true }) : /* @__PURE__ */ jsx("p", { className: "px-2 py-4 text-center text-xs text-muted-foreground", children: sourceIds.length === 0 ? tr(
+            "fluidgrids.builder.quickConfigPanel.noUpstreamNode",
+            "Connect an upstream node to map its fields."
+          ) : tr(
+            "fluidgrids.builder.quickConfigPanel.noOutputFields",
+            "The selected source has no declared output fields."
+          ) }) }),
+          /* @__PURE__ */ jsx("p", { className: "shrink-0 border-t border-border px-3 py-1.5 text-[10px] leading-snug text-muted-foreground", children: tr(
+            "fluidgrids.builder.quickConfigPanel.dragFieldHint",
+            "Drag a field onto a parameter to map it."
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed",
+        style: {
+          left: placement.left,
+          top: placement.top,
+          zIndex: 300,
+          width: PANEL_WIDTH
+        },
+        "data-testid": "quick-config-panel",
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: cardRef,
+            className: "flex flex-col overflow-hidden rounded-xl border border-border bg-card shadow-2xl animate-in fade-in zoom-in-95 duration-150",
+            style: {
+              maxHeight: "min(70vh, 560px)",
+              borderTop: `3px solid ${accent}`
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2.5 border-b border-border px-3 py-2.5 select-none", children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "flex size-7 shrink-0 items-center justify-center rounded-lg",
+                    style: {
+                      backgroundColor: `color-mix(in srgb, ${accent} 13%, transparent)`,
+                      color: accent,
+                      border: `1px solid color-mix(in srgb, ${accent} 26%, transparent)`
+                    },
+                    children: /* @__PURE__ */ jsx(NodeTypeIcon, { icon: meta.icon, className: "size-4" })
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-semibold leading-tight text-foreground", children: nodeTitle(node) }),
+                  subtitle && /* @__PURE__ */ jsx("p", { className: "truncate font-mono text-[11px] leading-tight text-muted-foreground", children: subtitle })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    title: showMapper ? tr(
+                      "fluidgrids.builder.quickConfigPanel.hideInputDataTooltip",
+                      "Hide input data"
+                    ) : tr(
+                      "fluidgrids.builder.quickConfigPanel.mapInputDataTooltip",
+                      "Map data from input"
+                    ),
+                    "aria-label": tr(
+                      "fluidgrids.builder.quickConfigPanel.toggleMapperAriaLabel",
+                      "Toggle input mapper"
+                    ),
+                    onClick: () => setShowMapper((v) => !v),
+                    className: `rounded-md p-1.5 transition-colors hover:bg-muted ${showMapper ? "text-primary" : "text-muted-foreground"} hover:text-foreground`,
+                    "data-testid": "qc-toggle-mapper",
+                    children: /* @__PURE__ */ jsx(Icon, { icon: "mdi:tray-arrow-down", className: "size-4" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    title: tr(
+                      "fluidgrids.builder.quickConfigPanel.openFullEditorTooltip",
+                      "Open full editor"
+                    ),
+                    "aria-label": tr(
+                      "fluidgrids.builder.quickConfigPanel.openFullEditorAriaLabel",
+                      "Open full editor"
+                    ),
+                    onClick: expandToNdv,
+                    className: "rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+                    "data-testid": "qc-expand",
+                    children: /* @__PURE__ */ jsx(Icon, { icon: "mdi:arrow-expand", className: "size-4" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    title: tr(
+                      "fluidgrids.builder.quickConfigPanel.closeTooltip",
+                      "Close"
+                    ),
+                    "aria-label": tr(
+                      "fluidgrids.builder.quickConfigPanel.closeAriaLabel",
+                      "Close"
+                    ),
+                    onClick: close,
+                    className: "rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+                    "data-testid": "qc-close",
+                    children: /* @__PURE__ */ jsx(Icon, { icon: "mdi:close", className: "size-4" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "min-h-0 flex-1 space-y-4 overflow-auto p-3",
+                  "data-testid": "qc-params",
+                  onFocusCapture: (e) => {
+                    const tag = e.target.tagName;
+                    if (sourceIds.length > 0 && (tag === "INPUT" || tag === "SELECT" || tag === "TEXTAREA")) {
+                      setShowMapper(true);
+                    }
+                  },
+                  children: /* @__PURE__ */ jsx(ReadOnlyFieldset, { className: "space-y-4", children: /* @__PURE__ */ jsx(
+                    NodeParamsForm,
+                    {
+                      config,
+                      nodeType: node.type,
+                      testIdPrefix: "qc"
+                    }
+                  ) })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                NodeExecutionActions,
+                {
+                  targetNodeId: nodeId,
+                  nodes: workflow.nodes,
+                  edges: workflow.edges,
+                  logs: execution.logs,
+                  workflowKey: workflow.workflowKey || workflow.id,
+                  workflowVersion: workflow.version || "1.0.0",
+                  sourceRun: execution.sourceRun,
+                  isExecuting: execution.isExecuting,
+                  onExecuteStep: async (targetId) => {
+                    await executeStep(targetId);
+                  },
+                  onContinueFromNode: async (sourceRunId, targetId) => {
+                    await executeFromNode(sourceRunId, targetId);
+                  },
+                  testIdPrefix: "qc"
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { className: "shrink-0 border-t border-border px-3 py-1.5 text-[10px] leading-snug text-muted-foreground", children: tr(
+                "fluidgrids.builder.quickConfigPanel.footerHint",
+                "Changes apply instantly \xB7 double-click the node for the full editor"
+              ) })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+
+export { QuickConfigPanel };

package/dist/settings.js

@@ -1,12 +1,13 @@
-export { SettingsPage } from './chunk-WNZV4SLU.js';
-import './chunk-AD7BICOT.js';
-import './chunk-RIHYPPMQ.js';
+export { SettingsPage } from './chunk-4QHCXTHW.js';
+import './chunk-YKFR7BZJ.js';
+import './chunk-JKBCLBHY.js';
+import './chunk-NLYQ3XDE.js';
 import './chunk-5ERAJC2I.js';
-import './chunk-YOLPHVOE.js';
 import './chunk-4VJ3MDOV.js';
-import './chunk-6ILIBJFH.js';
+import './chunk-NZJWKVER.js';
 import './chunk-ZUVFD5KV.js';
 import './chunk-JL7CASN5.js';
+import './chunk-OCJTTHTS.js';
 import './chunk-PXIFUMLA.js';
 import './chunk-6AMNEX2Y.js';
 import './chunk-G77IGC3Y.js';

package/dist/templates.js

@@ -1,24 +1,27 @@
-export { TemplatePreview, TemplatesPage } from './chunk-XKQMCPSB.js';
-import './chunk-S7XV65DB.js';
+export { TemplatePreview, TemplatesPage } from './chunk-T2UUYYVJ.js';
+import './chunk-DQ2ZCXYX.js';
 import './chunk-GEMNVFPK.js';
 import './chunk-B6CCE2RW.js';
 import './chunk-IEVSFCFS.js';
 import './chunk-YXMFRQYV.js';
 import './chunk-BQXVT32O.js';
-import './chunk-A47PSD7A.js';
-import './chunk-NMEI7TQW.js';
+import './chunk-MR2B67NW.js';
+import './chunk-CRDG2SQQ.js';
+import './chunk-WF6GMBR4.js';
+import './chunk-F7DD7BOB.js';
+import './chunk-JDLQ6QIB.js';
 import './chunk-PZ45H72P.js';
 import './chunk-Y53CVZVV.js';
 import './chunk-FNZZ5JJL.js';
-import './chunk-SEFOT2LD.js';
+import './chunk-LWLHPVIA.js';
 import './chunk-PJAWNFJV.js';
 import './chunk-GLYINMOR.js';
 import './chunk-7KKYIRLH.js';
-import './chunk-YOLPHVOE.js';
 import './chunk-4VJ3MDOV.js';
-import './chunk-6ILIBJFH.js';
+import './chunk-NZJWKVER.js';
 import './chunk-ZUVFD5KV.js';
 import './chunk-JL7CASN5.js';
+import './chunk-OCJTTHTS.js';
 import './chunk-PXIFUMLA.js';
 import './chunk-6AMNEX2Y.js';
 import './chunk-G77IGC3Y.js';

package/dist/workflow-builder.js

@@ -1,25 +1,28 @@
-export { WorkflowBuilder, WorkflowBuilderCore, WorkflowSearchRedirect } from './chunk-QPZCJKII.js';
-export { WorkflowBuilder as WorkflowBuilderPage } from './chunk-26NENGXA.js';
-import './chunk-77HIU3CX.js';
+export { WorkflowBuilder, WorkflowBuilderCore, WorkflowSearchRedirect } from './chunk-3ERT6FQK.js';
+export { WorkflowBuilder as WorkflowBuilderPage } from './chunk-YSXNJGCY.js';
+import './chunk-26HGYPBC.js';
 import './chunk-PIKYQE7P.js';
-import './chunk-S7XV65DB.js';
+import './chunk-DQ2ZCXYX.js';
 import './chunk-GEMNVFPK.js';
 import './chunk-B6CCE2RW.js';
 import './chunk-IEVSFCFS.js';
 import './chunk-YXMFRQYV.js';
 import './chunk-BQXVT32O.js';
-import './chunk-A47PSD7A.js';
-import './chunk-NMEI7TQW.js';
+import './chunk-MR2B67NW.js';
+import './chunk-CRDG2SQQ.js';
+import './chunk-WF6GMBR4.js';
+import './chunk-F7DD7BOB.js';
+import './chunk-JDLQ6QIB.js';
 import './chunk-PZ45H72P.js';
 import './chunk-Y53CVZVV.js';
-import './chunk-SEFOT2LD.js';
+import './chunk-LWLHPVIA.js';
 import './chunk-GLYINMOR.js';
 import './chunk-7KKYIRLH.js';
-import './chunk-YOLPHVOE.js';
 import './chunk-4VJ3MDOV.js';
-export { refetchStoreNodes, useFlowStore } from './chunk-6ILIBJFH.js';
+export { refetchStoreNodes, useFlowStore } from './chunk-NZJWKVER.js';
 import './chunk-ZUVFD5KV.js';
 import './chunk-JL7CASN5.js';
+import './chunk-OCJTTHTS.js';
 import './chunk-PXIFUMLA.js';
 import './chunk-6AMNEX2Y.js';
 import './chunk-G77IGC3Y.js';

package/dist/workflows-list.js

@@ -1,16 +1,17 @@
-export { WorkflowsList } from './chunk-BXR6BWXM.js';
-import './chunk-77HIU3CX.js';
-import './chunk-JWROEOG5.js';
+export { WorkflowsList } from './chunk-W7MTSATB.js';
+import './chunk-26HGYPBC.js';
+import './chunk-LYTR6IQO.js';
 import './chunk-5ERAJC2I.js';
-import './chunk-A47PSD7A.js';
+import './chunk-WF6GMBR4.js';
 import './chunk-FNZZ5JJL.js';
-import './chunk-SEFOT2LD.js';
+import './chunk-LWLHPVIA.js';
 import './chunk-PJAWNFJV.js';
 import './chunk-7KKYIRLH.js';
 import './chunk-4VJ3MDOV.js';
-import './chunk-6ILIBJFH.js';
+import './chunk-NZJWKVER.js';
 import './chunk-ZUVFD5KV.js';
 import './chunk-JL7CASN5.js';
+import './chunk-OCJTTHTS.js';
 import './chunk-PXIFUMLA.js';
 import './chunk-6AMNEX2Y.js';
 import './chunk-G77IGC3Y.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@burdenoff/fluidgrids-fe-sdk",
-  "version": "2026.1101.1",
+  "version": "2026.1101.3",
   "description": "FluidGrids Workflow Builder SDK - Embeddable visual workflow automation",
   "type": "module",
   "imports": {
@@ -56,6 +56,9 @@
     "dist",
     "README.md"
   ],
+  "sideEffects": [
+    "**/*.css"
+  ],
   "scripts": {
     "dev": "tsup --watch",
     "build": "tsup && cp src/styles/index.css dist/styles.css",