@octaviaflow/core 3.0.18-beta.3 → 3.0.18-beta.30

package/dist/workflow.js

@@ -12,6 +12,7 @@ import {
   GroupNode,
   Handle,
   HttpRequestNode,
+  NodeResizer,
   OutputNode,
   ParallelNode,
   StickyNode,
@@ -35,10 +36,21 @@ import {
   smoothStepPath,
   stepPath,
   straightPath,
+  useConnection,
+  useEdgeById,
+  useEdges,
   useFlow,
   useFlowNodeContext,
-  useFlowStore
-} from "./chunk-2RD5OERK.js";
+  useFlowSelector,
+  useIsEdgeSelected,
+  useIsNodeSelected,
+  useNodeById,
+  useNodeData,
+  useNodes,
+  useSelection,
+  useViewport,
+  useViewportOrNull
+} from "./chunk-6QDYERZD.js";
 import {
   cn
 } from "./chunk-ZAUUGK2Y.js";
@@ -339,60 +351,6 @@ function createElkEngine(elk, defaults = {}) {
   };
 }
 
-// src/workflow/store/selectors.ts
-import { useMemo as useMemo2, useSyncExternalStore } from "react";
-function useFlowSelector(selector, isEqual = Object.is) {
-  void isEqual;
-  const store = useFlowStore();
-  return useSyncExternalStore(
-    store.subscribe,
-    () => selector(store.getSnapshot()),
-    () => selector(store.getSnapshot())
-  );
-}
-function useNodes() {
-  return useFlowSelector((s) => s.nodes);
-}
-function useEdges() {
-  return useFlowSelector((s) => s.edges);
-}
-function useViewport() {
-  return useFlowSelector((s) => s.viewport);
-}
-function useNodeById(id) {
-  return useFlowSelector((s) => s.nodes.find((n) => n.id === id));
-}
-function useNodeData(id) {
-  return useFlowSelector(
-    (s) => s.nodes.find((n) => n.id === id)?.data ?? void 0
-  );
-}
-function useEdgeById(id) {
-  return useFlowSelector((s) => s.edges.find((e) => e.id === id));
-}
-function useIsNodeSelected(id) {
-  return useFlowSelector((s) => s.selectedNodeIds.has(id));
-}
-function useIsEdgeSelected(id) {
-  return useFlowSelector((s) => s.selectedEdgeIds.has(id));
-}
-function useConnection() {
-  return useFlowSelector((s) => s.connection);
-}
-function useSelection() {
-  const nodes = useNodes();
-  const edges = useEdges();
-  const selectedNodeIds = useFlowSelector((s) => s.selectedNodeIds);
-  const selectedEdgeIds = useFlowSelector((s) => s.selectedEdgeIds);
-  return useMemo2(
-    () => ({
-      nodes: nodes.filter((n) => selectedNodeIds.has(n.id)),
-      edges: edges.filter((e) => selectedEdgeIds.has(e.id))
-    }),
-    [nodes, edges, selectedNodeIds, selectedEdgeIds]
-  );
-}
-
 // src/workflow/components/ConfigPanel/ConfigPanel.tsx
 import {
   useCallback as useCallback3,
@@ -400,7 +358,7 @@ import {
   useRef as useRef3,
   useState as useState3
 } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var SAVE_STATE_LABEL = {
   clean: "Saved",
   dirty: "Unsaved changes",
@@ -418,26 +376,27 @@ var SAVE_STATE_DOT = {
 function ConfigPanel({
   open = true,
   title,
-  kindLabel,
   icon,
+  headerActions,
   banner,
   tabs,
   activeTab: controlledActive,
   defaultActiveTab,
   onTabChange,
-  saveState = "clean",
+  saveState,
   onTitleChange,
   onClose,
   onSave,
   onCancel,
+  padding = 12,
   resizable = true,
-  defaultWidth = 360,
-  minWidth = 280,
+  defaultWidth = 400,
+  minWidth = 400,
   maxWidth = 720,
   maxWidthContainerInset = 80,
   variant = "pinned",
   children,
-  footer,
+  footerActions,
   className,
   style
 }) {
@@ -534,55 +493,53 @@ function ConfigPanel({
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ jsxs("header", { className: "ods-flow-config-panel__header", children: [
-          kindLabel && /* @__PURE__ */ jsx("span", { className: "ods-flow-config-panel__breadcrumb", children: kindLabel }),
-          /* @__PURE__ */ jsxs("div", { className: "ods-flow-config-panel__title-row", children: [
-            icon && /* @__PURE__ */ jsx("span", { className: "ods-flow-config-panel__icon", children: icon }),
-            editingTitle ? /* @__PURE__ */ jsx(
-              "input",
-              {
-                className: "ods-flow-config-panel__title-input",
-                value: draftTitle,
-                autoFocus: true,
-                onChange: (e) => setDraftTitle(e.target.value),
-                onBlur: () => commitTitle(draftTitle),
-                onKeyDown: titleKeyDown,
-                "aria-label": "Edit title"
-              }
-            ) : /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: "ods-flow-config-panel__title",
-                onDoubleClick: () => {
-                  if (!onTitleChange) return;
-                  setDraftTitle(title ?? "");
-                  setEditingTitle(true);
-                },
-                title: onTitleChange ? "Double-click to rename" : void 0,
-                children: title ?? "Untitled"
-              }
-            ),
-            onClose && /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: "ods-flow-config-panel__close",
-                onClick: onClose,
-                "aria-label": "Close panel",
-                children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
-                  "path",
-                  {
-                    d: "M3 3l8 8M11 3l-8 8",
-                    stroke: "currentColor",
-                    strokeWidth: "1.5",
-                    strokeLinecap: "round"
-                  }
-                ) })
-              }
-            )
-          ] })
-        ] }),
+        /* @__PURE__ */ jsx("header", { className: "ods-flow-config-panel__header", children: /* @__PURE__ */ jsxs("div", { className: "ods-flow-config-panel__title-row", children: [
+          icon && /* @__PURE__ */ jsx("span", { className: "ods-flow-config-panel__icon", children: icon }),
+          editingTitle ? /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: "ods-flow-config-panel__title-input",
+              value: draftTitle,
+              autoFocus: true,
+              onChange: (e) => setDraftTitle(e.target.value),
+              onBlur: () => commitTitle(draftTitle),
+              onKeyDown: titleKeyDown,
+              "aria-label": "Edit title"
+            }
+          ) : /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ods-flow-config-panel__title",
+              onDoubleClick: () => {
+                if (!onTitleChange) return;
+                setDraftTitle(title ?? "");
+                setEditingTitle(true);
+              },
+              title: onTitleChange ? "Double-click to rename" : void 0,
+              children: title ?? "Untitled"
+            }
+          ),
+          headerActions && /* @__PURE__ */ jsx("div", { className: "ods-flow-config-panel__header-actions", children: headerActions }),
+          onClose && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ods-flow-config-panel__close",
+              onClick: onClose,
+              "aria-label": "Close panel",
+              children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M3 3l8 8M11 3l-8 8",
+                  stroke: "currentColor",
+                  strokeWidth: "1.5",
+                  strokeLinecap: "round"
+                }
+              ) })
+            }
+          )
+        ] }) }),
         tabs && tabs.length > 1 && /* @__PURE__ */ jsx("nav", { className: "ods-flow-config-panel__tabs", role: "tablist", children: tabs.map((t) => /* @__PURE__ */ jsxs(
           "button",
           {
@@ -603,9 +560,17 @@ function ConfigPanel({
           t.id
         )) }),
         banner && /* @__PURE__ */ jsx("div", { className: "ods-flow-config-panel__banner", children: banner }),
-        /* @__PURE__ */ jsx("div", { className: "ods-flow-config-panel__body", role: "tabpanel", children: tabs ? activeTab?.content : children }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "ods-flow-config-panel__body",
+            role: "tabpanel",
+            style: { padding },
+            children: tabs ? activeTab?.content : children
+          }
+        ),
         /* @__PURE__ */ jsxs("footer", { className: "ods-flow-config-panel__footer", children: [
-          /* @__PURE__ */ jsxs(
+          saveState && /* @__PURE__ */ jsxs(
             "span",
             {
               className: cn(
@@ -625,7 +590,7 @@ function ConfigPanel({
               ]
             }
           ),
-          footer ?? /* @__PURE__ */ jsxs("div", { className: "ods-flow-config-panel__footer-actions", children: [
+          /* @__PURE__ */ jsx("div", { className: "ods-flow-config-panel__footer-actions", children: footerActions ?? /* @__PURE__ */ jsxs(Fragment, { children: [
             onCancel && /* @__PURE__ */ jsx(
               "button",
               {
@@ -641,164 +606,481 @@ function ConfigPanel({
                 type: "button",
                 className: "ods-flow-config-panel__btn ods-flow-config-panel__btn--primary",
                 onClick: onSave,
-                disabled: saveState === "saving" || saveState === "clean",
+                disabled: saveState === "saving",
                 children: saveState === "saving" ? "Saving\u2026" : "Save"
               }
             )
-          ] })
+          ] }) })
         ] })
       ]
     }
   );
 }
 
-// src/workflow/components/NodeResizer/NodeResizer.tsx
-import { useRef as useRef4 } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
-function NodeResizer({
-  isVisible,
-  minWidth = 80,
-  minHeight = 60,
-  maxWidth,
-  maxHeight,
-  keepAspectRatio = false,
-  onResize,
-  onResizeEnd,
-  color
+// src/workflow/components/FxPanel/FxPanel.tsx
+import {
+  useMemo as useMemo2,
+  useRef as useRef4,
+  useState as useState4
+} from "react";
+import {
+  ChevronDownIcon,
+  ChevronRightIcon,
+  CloseIcon,
+  CollapseAllIcon,
+  DraggableIcon,
+  ExpandAllIcon,
+  FunctionMathIcon,
+  SearchIcon,
+  ValueVariableIcon
+} from "@octaviaflow/icons";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var KIND_ICON = {
+  function: FunctionMathIcon,
+  variable: ValueVariableIcon
+};
+function countLeaves(items) {
+  let n = 0;
+  for (const it of items) {
+    if (it.children && it.children.length > 0) n += countLeaves(it.children);
+    else n += 1;
+  }
+  return n;
+}
+function collectBranchIds(items, out) {
+  for (const it of items) {
+    if (it.children && it.children.length > 0) {
+      out.add(it.id);
+      collectBranchIds(it.children, out);
+    }
+  }
+}
+function flattenTree(items, depth, expandedItems, out) {
+  for (const it of items) {
+    const hasChildren = !!it.children && it.children.length > 0;
+    const expanded = hasChildren && expandedItems.has(it.id);
+    out.push({ item: it, depth, hasChildren, expanded });
+    if (expanded) flattenTree(it.children, depth + 1, expandedItems, out);
+  }
+}
+function collectHits(items, ancestors, q, out) {
+  for (const it of items) {
+    if (it.children && it.children.length > 0) {
+      collectHits(it.children, [...ancestors, it.label], q, out);
+    } else {
+      const path = [...ancestors, it.label].join(" / ");
+      const hay = `${it.label} ${it.description ?? ""} ${path} ${it.insertValue ?? ""}`.toLowerCase();
+      if (hay.includes(q)) out.push({ item: it, ancestors });
+    }
+  }
+}
+function FxPanel({
+  categories,
+  title = "Data References",
+  hint = "Drag onto a field, or click an item to insert it.",
+  search: controlledSearch,
+  defaultSearch = "",
+  onSearchChange,
+  expandedCategory: controlledExpanded,
+  defaultExpandedCategory,
+  onExpandedCategoryChange,
+  onClose,
+  onItemDragStart,
+  onItemSelect,
+  width = 300,
+  emptyLabel = "No matches",
+  searchPlaceholder = "Search fields, functions & variables\u2026",
+  className,
+  style
 }) {
-  const { node, selected } = useFlowNodeContext();
-  const viewport = useViewport();
-  const flow = useFlow();
-  const dragRef = useRef4(null);
-  const show = isVisible ?? selected;
-  if (!show) return null;
-  const beginResize = (e, corner) => {
-    e.preventDefault();
-    e.stopPropagation();
-    e.target.setPointerCapture(e.pointerId);
-    const w = node.width ?? DEFAULT_NODE_WIDTH;
-    const h = node.height ?? DEFAULT_NODE_HEIGHT;
-    dragRef.current = {
-      pointerId: e.pointerId,
-      corner,
-      startClientX: e.clientX,
-      startClientY: e.clientY,
-      startWidth: w,
-      startHeight: h,
-      startX: node.position.x,
-      startY: node.position.y,
-      aspect: w / Math.max(1, h)
-    };
+  const [internalSearch, setInternalSearch] = useState4(defaultSearch);
+  const search = controlledSearch ?? internalSearch;
+  const query = search.trim().toLowerCase();
+  const setSearch = (next) => {
+    if (controlledSearch === void 0) setInternalSearch(next);
+    onSearchChange?.(next);
   };
-  const onMove = (e) => {
-    const drag = dragRef.current;
-    if (!drag || drag.pointerId !== e.pointerId) return;
-    const dx = (e.clientX - drag.startClientX) / viewport.zoom;
-    const dy = (e.clientY - drag.startClientY) / viewport.zoom;
-    let nextW = drag.startWidth;
-    let nextH = drag.startHeight;
-    let nextX = drag.startX;
-    let nextY = drag.startY;
-    switch (drag.corner) {
-      case "se":
-        nextW = drag.startWidth + dx;
-        nextH = drag.startHeight + dy;
-        break;
-      case "sw":
-        nextW = drag.startWidth - dx;
-        nextH = drag.startHeight + dy;
-        nextX = drag.startX + dx;
-        break;
-      case "ne":
-        nextW = drag.startWidth + dx;
-        nextH = drag.startHeight - dy;
-        nextY = drag.startY + dy;
-        break;
-      case "nw":
-        nextW = drag.startWidth - dx;
-        nextH = drag.startHeight - dy;
-        nextX = drag.startX + dx;
-        nextY = drag.startY + dy;
-        break;
-    }
-    if (keepAspectRatio) {
-      nextH = nextW / drag.aspect;
-      if (drag.corner === "nw" || drag.corner === "ne") {
-        nextY = drag.startY + (drag.startHeight - nextH);
+  const visibleCategories = useMemo2(
+    () => categories.filter((c) => c.items.length > 0),
+    [categories]
+  );
+  const [internalCat, setInternalCat] = useState4(
+    defaultExpandedCategory !== void 0 ? defaultExpandedCategory : visibleCategories[0]?.id ?? null
+  );
+  const openCategoryId = controlledExpanded ?? internalCat;
+  const setOpenCategory = (id) => {
+    if (controlledExpanded === void 0) setInternalCat(id);
+    onExpandedCategoryChange?.(id);
+  };
+  const [expandedItems, setExpandedItems] = useState4(() => {
+    const ids = /* @__PURE__ */ new Set();
+    for (const cat of categories) {
+      for (const item of cat.items) {
+        if (item.children && item.children.length > 0) ids.add(item.id);
       }
     }
-    nextW = Math.max(minWidth, maxWidth ? Math.min(maxWidth, nextW) : nextW);
-    nextH = Math.max(minHeight, maxHeight ? Math.min(maxHeight, nextH) : nextH);
-    flow.updateNode(node.id, {
-      width: nextW,
-      height: nextH,
-      position: { x: nextX, y: nextY }
+    return ids;
+  });
+  const toggleItem = (id) => {
+    setExpandedItems((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
     });
-    onResize?.({ width: nextW, height: nextH });
   };
-  const onUp = (e) => {
-    if (dragRef.current?.pointerId === e.pointerId) {
-      const cur = flow.getNode(node.id);
-      if (cur) {
-        onResizeEnd?.({
-          width: cur.width ?? DEFAULT_NODE_WIDTH,
-          height: cur.height ?? DEFAULT_NODE_HEIGHT
-        });
+  const setCategoryExpansion = (cat, expand) => {
+    const branchIds = /* @__PURE__ */ new Set();
+    collectBranchIds(cat.items, branchIds);
+    setExpandedItems((prev) => {
+      const next = new Set(prev);
+      for (const id of branchIds) {
+        if (expand) next.add(id);
+        else next.delete(id);
       }
-      dragRef.current = null;
+      return next;
+    });
+  };
+  const [draggingId, setDraggingId] = useState4(null);
+  const [focusedId, setFocusedId] = useState4(null);
+  const hits = useMemo2(() => {
+    if (!query) return null;
+    const all = [];
+    for (const cat of visibleCategories) {
+      const out = [];
+      collectHits(cat.items, [], query, out);
+      for (const hit of out) all.push({ category: cat, hit });
+    }
+    return all;
+  }, [query, visibleCategories]);
+  const handleDragStart = (item, category) => (e) => {
+    setDraggingId(item.id);
+    if (onItemDragStart) {
+      onItemDragStart(item, category, e);
+    } else if (item.insertValue) {
+      e.dataTransfer.setData("text/plain", item.insertValue);
+      e.dataTransfer.setData("application/x-fx-insert", item.insertValue);
+      e.dataTransfer.setData(
+        "application/x-fx-type",
+        category.kind ?? "function"
+      );
+      e.dataTransfer.effectAllowed = "copy";
     }
   };
-  const handleColor = color ?? "var(--ods-accent)";
-  const handleStyle = (corner) => {
-    const base = {
-      position: "absolute",
-      width: 12,
-      height: 12,
-      background: "var(--ods-surface-canvas)",
-      border: `2px solid ${handleColor}`,
-      borderRadius: 2,
-      cursor: cursorFor(corner),
-      touchAction: "none",
-      // Place each handle so its CENTRE sits on the corresponding corner.
-      transform: "translate(-50%, -50%)"
-    };
-    switch (corner) {
-      case "nw":
-        return { ...base, top: 0, left: 0 };
-      case "ne":
-        return { ...base, top: 0, left: "100%" };
-      case "sw":
-        return { ...base, top: "100%", left: 0 };
-      case "se":
-        return { ...base, top: "100%", left: "100%" };
+  const listRef = useRef4(null);
+  const focusRow = (id) => {
+    setFocusedId(id);
+    requestAnimationFrame(() => {
+      listRef.current?.querySelector(`[data-fx-row="${CSS.escape(id)}"]`)?.focus();
+    });
+  };
+  const onRowKeyDown = (e, rows, row, category) => {
+    const idx = rows.findIndex((r) => r.item.id === row.item.id);
+    if (idx < 0) return;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        if (idx < rows.length - 1) focusRow(rows[idx + 1].item.id);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        if (idx > 0) focusRow(rows[idx - 1].item.id);
+        break;
+      case "ArrowRight":
+        if (row.hasChildren) {
+          e.preventDefault();
+          if (!row.expanded) toggleItem(row.item.id);
+          else if (idx < rows.length - 1) focusRow(rows[idx + 1].item.id);
+        }
+        break;
+      case "ArrowLeft":
+        if (row.hasChildren && row.expanded) {
+          e.preventDefault();
+          toggleItem(row.item.id);
+        } else {
+          for (let i = idx - 1; i >= 0; i--) {
+            if (rows[i].depth < row.depth) {
+              e.preventDefault();
+              focusRow(rows[i].item.id);
+              break;
+            }
+          }
+        }
+        break;
+      case "Home":
+        e.preventDefault();
+        if (rows.length) focusRow(rows[0].item.id);
+        break;
+      case "End":
+        e.preventDefault();
+        if (rows.length) focusRow(rows[rows.length - 1].item.id);
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        if (row.hasChildren) toggleItem(row.item.id);
+        else onItemSelect?.(row.item, category);
+        break;
+      default:
+        break;
     }
   };
-  return /* @__PURE__ */ jsx2("div", { className: cn("ods-node-resizer"), "data-flow-no-drag": "true", children: ["nw", "ne", "sw", "se"].map((corner) => /* @__PURE__ */ jsx2(
-    "div",
+  const searchRows = useMemo2(
+    () => hits ? hits.map(({ hit }) => ({
+      item: hit.item,
+      depth: 0,
+      hasChildren: false,
+      expanded: false
+    })) : [],
+    [hits]
+  );
+  const renderRow = (row, category, rows, crumb) => {
+    const { item, depth, hasChildren, expanded } = row;
+    const mono = category.kind === "function";
+    const draggable = !!item.insertValue;
+    const isFocused = focusedId === item.id;
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        "data-fx-row": item.id,
+        className: cn(
+          "ods-flow-fx-panel__row",
+          hasChildren ? "ods-flow-fx-panel__row--branch" : "ods-flow-fx-panel__row--leaf",
+          draggingId === item.id && "ods-flow-fx-panel__row--dragging",
+          isFocused && "ods-flow-fx-panel__row--focused"
+        ),
+        role: "treeitem",
+        "aria-expanded": hasChildren ? expanded : void 0,
+        "aria-level": depth + 1,
+        tabIndex: isFocused || focusedId === null && rows[0]?.item.id === item.id ? 0 : -1,
+        draggable,
+        onDragStart: draggable ? handleDragStart(item, category) : void 0,
+        onDragEnd: () => setDraggingId(null),
+        onFocus: () => setFocusedId(item.id),
+        onKeyDown: (e) => onRowKeyDown(e, rows, row, category),
+        onClick: () => {
+          if (hasChildren) toggleItem(item.id);
+          else onItemSelect?.(item, category);
+        },
+        title: item.insertValue,
+        children: [
+          Array.from({ length: depth }, (_, i) => /* @__PURE__ */ jsx2("span", { className: "ods-flow-fx-panel__indent", "aria-hidden": "true" }, i)),
+          hasChildren ? /* @__PURE__ */ jsx2("span", { className: "ods-flow-fx-panel__twisty", "aria-hidden": "true", children: expanded ? /* @__PURE__ */ jsx2(ChevronDownIcon, { size: "sm" }) : /* @__PURE__ */ jsx2(ChevronRightIcon, { size: "sm" }) }) : /* @__PURE__ */ jsx2("span", { className: "ods-flow-fx-panel__grip", "aria-hidden": "true", children: /* @__PURE__ */ jsx2(DraggableIcon, { size: "sm" }) }),
+          /* @__PURE__ */ jsxs2("span", { className: "ods-flow-fx-panel__row-main", children: [
+            /* @__PURE__ */ jsxs2("span", { className: "ods-flow-fx-panel__row-line", children: [
+              mono ? /* @__PURE__ */ jsx2("code", { className: "ods-flow-fx-panel__row-label ods-flow-fx-panel__row-label--mono", children: item.label }) : /* @__PURE__ */ jsx2("span", { className: "ods-flow-fx-panel__row-label", children: item.label }),
+              item.valueType && /* @__PURE__ */ jsx2(
+                "span",
+                {
+                  className: cn(
+                    "ods-flow-fx-panel__type",
+                    `ods-flow-fx-panel__type--${item.valueType}`
+                  ),
+                  children: item.valueType
+                }
+              )
+            ] }),
+            (item.description || crumb) && /* @__PURE__ */ jsxs2("span", { className: "ods-flow-fx-panel__row-sub", children: [
+              crumb && /* @__PURE__ */ jsx2("span", { className: "ods-flow-fx-panel__crumb", children: crumb }),
+              item.description
+            ] })
+          ] })
+        ]
+      },
+      item.id
+    );
+  };
+  return /* @__PURE__ */ jsxs2(
+    "aside",
     {
-      style: handleStyle(corner),
-      onPointerDown: (e) => beginResize(e, corner),
-      onPointerMove: onMove,
-      onPointerUp: onUp,
-      onPointerCancel: onUp,
-      "aria-label": `Resize ${corner}`
-    },
-    corner
-  )) });
+      className: cn("ods-flow-fx-panel", className),
+      style: { width, ...style },
+      "aria-label": typeof title === "string" ? title : "Data References",
+      children: [
+        /* @__PURE__ */ jsxs2("header", { className: "ods-flow-fx-panel__header", children: [
+          /* @__PURE__ */ jsx2("h3", { className: "ods-flow-fx-panel__title", children: title }),
+          onClose && /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              className: "ods-flow-fx-panel__close",
+              onClick: onClose,
+              "aria-label": "Close data references",
+              children: /* @__PURE__ */ jsx2(CloseIcon, { size: "sm" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "ods-flow-fx-panel__search", children: [
+          /* @__PURE__ */ jsx2("span", { className: "ods-flow-fx-panel__search-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx2(SearchIcon, { size: "sm" }) }),
+          /* @__PURE__ */ jsx2(
+            "input",
+            {
+              type: "text",
+              className: "ods-flow-fx-panel__search-input",
+              placeholder: searchPlaceholder,
+              "aria-label": "Search fields, functions and variables",
+              value: search,
+              onChange: (e) => setSearch(e.target.value)
+            }
+          ),
+          search && /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              className: "ods-flow-fx-panel__search-clear",
+              onClick: () => setSearch(""),
+              "aria-label": "Clear search",
+              children: /* @__PURE__ */ jsx2(CloseIcon, { size: "sm" })
+            }
+          )
+        ] }),
+        hint && !query && /* @__PURE__ */ jsx2("p", { className: "ods-flow-fx-panel__hint", children: hint }),
+        /* @__PURE__ */ jsxs2("div", { className: "ods-flow-fx-panel__list", ref: listRef, role: "tree", children: [
+          query && hits && (hits.length > 0 ? /* @__PURE__ */ jsxs2("div", { className: "ods-flow-fx-panel__results", children: [
+            /* @__PURE__ */ jsxs2("div", { className: "ods-flow-fx-panel__results-count", children: [
+              hits.length,
+              " ",
+              hits.length === 1 ? "match" : "matches"
+            ] }),
+            hits.map(
+              ({ category, hit }, i) => renderRow(
+                searchRows[i],
+                category,
+                searchRows,
+                hit.ancestors.length ? hit.ancestors.join(" / ") : category.label
+              )
+            )
+          ] }) : /* @__PURE__ */ jsx2("div", { className: "ods-flow-fx-panel__empty", children: emptyLabel })),
+          !query && visibleCategories.map((cat) => {
+            const isOpen = openCategoryId === cat.id;
+            const kind = cat.kind ?? "function";
+            const KindIcon = KIND_ICON[kind];
+            const branchIds = /* @__PURE__ */ new Set();
+            collectBranchIds(cat.items, branchIds);
+            const hasTree = branchIds.size > 0;
+            const rows = [];
+            if (isOpen) flattenTree(cat.items, 0, expandedItems, rows);
+            const allExpanded = hasTree && [...branchIds].every((id) => expandedItems.has(id));
+            return /* @__PURE__ */ jsxs2("div", { className: "ods-flow-fx-panel__category", children: [
+              /* @__PURE__ */ jsxs2(
+                "div",
+                {
+                  className: cn(
+                    "ods-flow-fx-panel__cat-header",
+                    isOpen && "ods-flow-fx-panel__cat-header--open"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxs2(
+                      "button",
+                      {
+                        type: "button",
+                        className: "ods-flow-fx-panel__cat-toggle",
+                        "aria-expanded": isOpen,
+                        onClick: () => setOpenCategory(isOpen ? null : cat.id),
+                        children: [
+                          /* @__PURE__ */ jsx2(
+                            ChevronRightIcon,
+                            {
+                              size: "sm",
+                              className: cn(
+                                "ods-flow-fx-panel__chevron",
+                                isOpen && "ods-flow-fx-panel__chevron--open"
+                              )
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs2(
+                            "span",
+                            {
+                              className: cn(
+                                "ods-flow-fx-panel__badge",
+                                `ods-flow-fx-panel__badge--${kind}`
+                              ),
+                              children: [
+                                /* @__PURE__ */ jsx2(
+                                  KindIcon,
+                                  {
+                                    size: "sm",
+                                    className: "ods-flow-fx-panel__badge-icon"
+                                  }
+                                ),
+                                cat.label
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsx2("span", { className: "ods-flow-fx-panel__count", children: countLeaves(cat.items) })
+                        ]
+                      }
+                    ),
+                    isOpen && hasTree && /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        type: "button",
+                        className: "ods-flow-fx-panel__cat-action",
+                        "aria-label": allExpanded ? "Collapse all" : "Expand all",
+                        title: allExpanded ? "Collapse all" : "Expand all",
+                        onClick: () => setCategoryExpansion(cat, !allExpanded),
+                        children: allExpanded ? /* @__PURE__ */ jsx2(CollapseAllIcon, { size: "sm" }) : /* @__PURE__ */ jsx2(ExpandAllIcon, { size: "sm" })
+                      }
+                    )
+                  ]
+                }
+              ),
+              isOpen && /* @__PURE__ */ jsx2(
+                "div",
+                {
+                  className: "ods-flow-fx-panel__rows",
+                  role: "group",
+                  "aria-label": cat.label,
+                  children: rows.map((row) => renderRow(row, cat, rows))
+                }
+              )
+            ] }, cat.id);
+          })
+        ] })
+      ]
+    }
+  );
 }
-function cursorFor(corner) {
-  switch (corner) {
-    case "nw":
-    case "se":
-      return "nwse-resize";
-    case "ne":
-    case "sw":
-      return "nesw-resize";
-  }
+
+// src/workflow/components/FxPanel/DataRefButton.tsx
+import { DataReferenceIcon } from "@octaviaflow/icons";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function DataRefButton({
+  active = false,
+  label = "Data ref",
+  className,
+  type = "button",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs3(
+    "button",
+    {
+      ...rest,
+      type,
+      className: cn(
+        "ods-flow-dataref-button",
+        active && "ods-flow-dataref-button--active",
+        label == null && "ods-flow-dataref-button--icon-only",
+        className
+      ),
+      "aria-pressed": active,
+      title: active ? "Hide data references" : "Show data references",
+      children: [
+        /* @__PURE__ */ jsx3(
+          DataReferenceIcon,
+          {
+            size: "sm",
+            className: "ods-flow-dataref-button__icon"
+          }
+        ),
+        label != null && /* @__PURE__ */ jsx3("span", { className: "ods-flow-dataref-button__label", children: label })
+      ]
+    }
+  );
 }
 
 // src/workflow/components/NodeToolbar/NodeToolbar.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function NodeToolbar({
   isVisible,
   position = "top",
@@ -813,7 +1095,7 @@ function NodeToolbar({
   const show = isVisible ?? node.selected;
   if (!show) return null;
   const inverseScale = 1 / viewport.zoom;
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       className: cn("ods-node-toolbar", `ods-node-toolbar--${position}`, className),
@@ -825,7 +1107,7 @@ function NodeToolbar({
       onPointerDown: (e) => e.stopPropagation(),
       onMouseDown: (e) => e.stopPropagation(),
       onClick: (e) => e.stopPropagation(),
-      children: /* @__PURE__ */ jsx3(
+      children: /* @__PURE__ */ jsx4(
         "div",
         {
           className: "ods-node-toolbar__inner",
@@ -973,11 +1255,13 @@ export {
   DEFAULT_NODE_HEIGHT,
   DEFAULT_NODE_KINDS,
   DEFAULT_NODE_WIDTH,
+  DataRefButton,
   ErrorNode,
   FlowCanvas,
   FlowEdge,
   FlowNode,
   ForEachNode,
+  FxPanel,
   GroupNode,
   Handle,
   HttpRequestNode,
@@ -1024,6 +1308,7 @@ export {
   useNodeData,
   useNodes,
   useSelection,
-  useViewport
+  useViewport,
+  useViewportOrNull
 };
 //# sourceMappingURL=workflow.js.map