@octaviaflow/core 3.0.18-beta.22 → 3.0.18-beta.23

package/dist/workflow/components/FxPanel/FxPanel.d.ts

@@ -1,14 +1,28 @@
 import { type CSSProperties, type DragEvent, type ReactNode } from "react";
 export type FxItemKind = "function" | "variable";
+/** Data type of a Source-Data field — drives the colour-coded badge. */
+export type FxValueType = "string" | "number" | "boolean" | "object" | "array" | "date" | "any";
 export interface FxPanelItem {
-    /** Stable key. */
+    /** Stable key + tree/keyboard identity. */
     id: string;
-    /** Display label — usually a function signature or variable name. */
+    /** Display label — a function signature, variable name, or field key. */
     label: string;
-    /** The string handed to `dataTransfer` / inserted into a field. */
-    insertValue: string;
+    /**
+     * The string handed to `dataTransfer` / inserted into a field.
+     * Branches may still set it (drag the whole object/array reference).
+     */
+    insertValue?: string;
     /** Short one-line description shown under the label. */
     description?: string;
+    /** Data type — renders a colour-coded badge. Source-Data fields only. */
+    valueType?: FxValueType;
+    /** Sample value preview, shown dimmed at the end of the row. */
+    preview?: string;
+    /**
+     * Nested children. When present the item renders as an expandable
+     * branch — this is what powers the n-th-level Source-Data tree.
+     */
+    children?: FxPanelItem[];
 }
 export interface FxPanelCategory {
     /** Stable key + accordion identity. */
@@ -17,10 +31,11 @@ export interface FxPanelCategory {
     label: string;
     /** Drives the badge glyph + drag payload. Defaults to "function". */
     kind?: FxItemKind;
+    /** Items — flat for functions/variables, nested for Source Data. */
     items: FxPanelItem[];
 }
 export interface FxPanelProps {
-    /** Categorised entries. Empty categories are skipped from render. */
+    /** Categorised entries. Empty categories are dropped from render. */
     categories: FxPanelCategory[];
     /** Header title. Default "FX / IO". */
     title?: ReactNode;
@@ -31,7 +46,7 @@ export interface FxPanelProps {
     /** Initial search term when uncontrolled. */
     defaultSearch?: string;
     onSearchChange?: (next: string) => void;
-    /** Controlled open category (single-open accordion). `null` = all closed. */
+    /** Controlled open category (single-open accordion). `null` = closed. */
     expandedCategory?: string | null;
     /** Initial open category when uncontrolled. */
     defaultExpandedCategory?: string | null;
@@ -41,14 +56,14 @@ export interface FxPanelProps {
     /**
      * Fires when an item begins dragging. Use it to populate
      * `e.dataTransfer`. When omitted, FxPanel writes a sensible default:
-     *   - `text/plain`             → insertValue
-     *   - `application/x-fx-insert`→ insertValue
-     *   - `application/x-fx-type`  → category kind
+     *   - `text/plain`              → insertValue
+     *   - `application/x-fx-insert` → insertValue
+     *   - `application/x-fx-type`   → category kind
      */
     onItemDragStart?: (item: FxPanelItem, category: FxPanelCategory, e: DragEvent<HTMLElement>) => void;
-    /** Fires on a plain click of an item (e.g. insert at cursor). */
+    /** Fires on click / Enter of an item (insert at cursor). */
     onItemSelect?: (item: FxPanelItem, category: FxPanelCategory) => void;
-    /** Panel width (px). Default 292. */
+    /** Panel width (px). Default 300. */
     width?: number;
     /** Message shown when a search matches nothing. Default "No matches". */
     emptyLabel?: ReactNode;

package/dist/workflow/components/FxPanel/FxPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FxPanel.d.ts","sourceRoot":"","sources":["../../../../src/workflow/components/FxPanel/FxPanel.tsx"],"names":[],"mappings":"AAcA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,SAAS,EACd,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAQf,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,UAAU,CAAC;AAEjD,MAAM,WAAW,WAAW;IAC1B,kBAAkB;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,WAAW,EAAE,MAAM,CAAC;IACpB,wDAAwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B,uCAAuC;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,uBAAuB;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,WAAW,EAAE,CAAC;CACtB;AAED,MAAM,WAAW,YAAY;IAC3B,qEAAqE;IACrE,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,uCAAuC;IACvC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,mEAAmE;IACnE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,6EAA6E;IAC7E,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,+CAA+C;IAC/C,uBAAuB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxC,wBAAwB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACvD,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,CAChB,IAAI,EAAE,WAAW,EACjB,QAAQ,EAAE,eAAe,EACzB,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,KACtB,IAAI,CAAC;IACV,iEAAiE;IACjE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,eAAe,KAAK,IAAI,CAAC;IACtE,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,sCAAsC;IACtC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAOD,wBAAgB,OAAO,CAAC,EACtB,UAAU,EACV,KAAiB,EACjB,IAIC,EACD,MAAM,EAAE,gBAAgB,EACxB,aAAkB,EAClB,cAAc,EACd,gBAAgB,EAAE,kBAAkB,EACpC,uBAAuB,EACvB,wBAAwB,EACxB,OAAO,EACP,eAAe,EACf,YAAY,EACZ,KAAW,EACX,UAAyB,EACzB,iBAAmD,EACnD,SAAS,EACT,KAAK,GACN,EAAE,YAAY,2CA8Ld"}
+{"version":3,"file":"FxPanel.d.ts","sourceRoot":"","sources":["../../../../src/workflow/components/FxPanel/FxPanel.tsx"],"names":[],"mappings":"AAiBA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,SAAS,EAEd,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAcf,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,UAAU,CAAC;AAEjD,wEAAwE;AACxE,MAAM,MAAM,WAAW,GACnB,QAAQ,GACR,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,OAAO,GACP,MAAM,GACN,KAAK,CAAC;AAEV,MAAM,WAAW,WAAW;IAC1B,2CAA2C;IAC3C,EAAE,EAAE,MAAM,CAAC;IACX,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wDAAwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yEAAyE;IACzE,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,gEAAgE;IAChE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;CAC1B;AAED,MAAM,WAAW,eAAe;IAC9B,uCAAuC;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,uBAAuB;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,oEAAoE;IACpE,KAAK,EAAE,WAAW,EAAE,CAAC;CACtB;AAED,MAAM,WAAW,YAAY;IAC3B,qEAAqE;IACrE,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,uCAAuC;IACvC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,mEAAmE;IACnE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,+CAA+C;IAC/C,uBAAuB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxC,wBAAwB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACvD,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,CAChB,IAAI,EAAE,WAAW,EACjB,QAAQ,EAAE,eAAe,EACzB,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,KACtB,IAAI,CAAC;IACV,4DAA4D;IAC5D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,eAAe,KAAK,IAAI,CAAC;IACtE,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,sCAAsC;IACtC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AA8ED,wBAAgB,OAAO,CAAC,EACtB,UAAU,EACV,KAAiB,EACjB,IAKC,EACD,MAAM,EAAE,gBAAgB,EACxB,aAAkB,EAClB,cAAc,EACd,gBAAgB,EAAE,kBAAkB,EACpC,uBAAuB,EACvB,wBAAwB,EACxB,OAAO,EACP,eAAe,EACf,YAAY,EACZ,KAAW,EACX,UAAyB,EACzB,iBAA2D,EAC3D,SAAS,EACT,KAAK,GACN,EAAE,YAAY,2CAodd"}

package/dist/workflow.cjs

@@ -3587,13 +3587,48 @@ var KIND_GLYPH = {
   function: "\u0192",
   variable: "\u2B21"
 };
+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 = "FX / IO",
   hint = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-    "Drag items into any input field with the ",
+    "Drag a field into any input with the ",
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { children: "FX" }),
-    " indicator"
+    " badge, or click to insert."
   ] }),
   search: controlledSearch,
   defaultSearch = "",
@@ -3604,44 +3639,85 @@ function FxPanel({
   onClose,
   onItemDragStart,
   onItemSelect,
-  width = 292,
+  width = 300,
   emptyLabel = "No matches",
-  searchPlaceholder = "Search functions & variables\u2026",
+  searchPlaceholder = "Search fields, functions & variables\u2026",
   className,
   style
 }) {
   const [internalSearch, setInternalSearch] = (0, import_react16.useState)(defaultSearch);
   const search = controlledSearch ?? internalSearch;
+  const query = search.trim().toLowerCase();
   const setSearch = (next) => {
     if (controlledSearch === void 0) setInternalSearch(next);
     onSearchChange?.(next);
   };
-  const [internalExpanded, setInternalExpanded] = (0, import_react16.useState)(
-    defaultExpandedCategory !== void 0 ? defaultExpandedCategory : categories.find((c) => c.items.length > 0)?.id ?? null
+  const visibleCategories = (0, import_react16.useMemo)(
+    () => categories.filter((c) => c.items.length > 0),
+    [categories]
   );
-  const expanded = controlledExpanded ?? internalExpanded;
-  const setExpanded = (id) => {
-    if (controlledExpanded === void 0) setInternalExpanded(id);
+  const [internalCat, setInternalCat] = (0, import_react16.useState)(
+    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] = (0, import_react16.useState)(() => {
+    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);
+      }
+    }
+    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;
+    });
+  };
+  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);
+      }
+      return next;
+    });
+  };
   const [draggingId, setDraggingId] = (0, import_react16.useState)(null);
-  const filtered = (0, import_react16.useMemo)(() => {
-    const q = search.trim().toLowerCase();
-    const matched = q ? categories.map((cat) => {
-      if (cat.label.toLowerCase().includes(q)) return cat;
-      const items = cat.items.filter(
-        (it) => it.label.toLowerCase().includes(q) || (it.description?.toLowerCase().includes(q) ?? false)
-      );
-      return { ...cat, items };
-    }) : categories;
-    return matched.filter((cat) => cat.items.length > 0);
-  }, [categories, search]);
-  const hasResults = filtered.length > 0;
+  const [copiedId, setCopiedId] = (0, import_react16.useState)(null);
+  const [focusedId, setFocusedId] = (0, import_react16.useState)(null);
+  const copyTimer = (0, import_react16.useRef)(null);
+  (0, import_react16.useEffect)(
+    () => () => {
+      if (copyTimer.current) clearTimeout(copyTimer.current);
+    },
+    []
+  );
+  const hits = (0, import_react16.useMemo)(() => {
+    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 {
+    } else if (item.insertValue) {
       e.dataTransfer.setData("text/plain", item.insertValue);
       e.dataTransfer.setData("application/x-fx-insert", item.insertValue);
       e.dataTransfer.setData(
@@ -3651,6 +3727,144 @@ function FxPanel({
       e.dataTransfer.effectAllowed = "copy";
     }
   };
+  const handleCopy = (item) => {
+    if (!item.insertValue || typeof navigator === "undefined") return;
+    void navigator.clipboard?.writeText(item.insertValue);
+    setCopiedId(item.id);
+    if (copyTimer.current) clearTimeout(copyTimer.current);
+    copyTimer.current = setTimeout(() => setCopiedId(null), 1400);
+  };
+  const listRef = (0, import_react16.useRef)(null);
+  const focusRow = (id) => {
+    setFocusedId(id);
+    requestAnimationFrame(() => {
+      listRef.current?.querySelector(`[data-fx-row="${CSS.escape(id)}"]`)?.focus();
+    });
+  };
+  const onRowKeyDown = (e, rows, row) => {
+    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 {
+          const cat = visibleCategories.find((c) => c.id === openCategoryId);
+          if (cat) onItemSelect?.(row.item, cat);
+        }
+        break;
+      default:
+        break;
+    }
+  };
+  const renderRow = (row, category, rows, opts = {}) => {
+    const { item, depth, hasChildren, expanded } = row;
+    const mono = category.kind === "function";
+    const draggable = !!item.insertValue;
+    const isFocused = focusedId === item.id;
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      "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: opts.searching ? void 0 : (e) => onRowKeyDown(e, rows, row),
+        onClick: () => {
+          if (hasChildren) toggleItem(item.id);
+          else onItemSelect?.(item, category);
+        },
+        title: item.insertValue,
+        children: [
+          Array.from({ length: depth }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ods-flow-fx-panel__indent", "aria-hidden": "true" }, i)),
+          hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ods-flow-fx-panel__twisty", "aria-hidden": "true", children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons2.ChevronDownIcon, { size: "sm" }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons2.ChevronRightIcon, { size: "sm" }) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ods-flow-fx-panel__grip", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons2.DraggableIcon, { size: "sm" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "ods-flow-fx-panel__row-main", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "ods-flow-fx-panel__row-line", children: [
+              mono ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("code", { className: "ods-flow-fx-panel__row-label ods-flow-fx-panel__row-label--mono", children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ods-flow-fx-panel__row-label", children: item.label }),
+              item.valueType && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                "span",
+                {
+                  className: cn(
+                    "ods-flow-fx-panel__type",
+                    `ods-flow-fx-panel__type--${item.valueType}`
+                  ),
+                  children: item.valueType
+                }
+              ),
+              item.preview !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ods-flow-fx-panel__preview", title: item.preview, children: item.preview })
+            ] }),
+            (item.description || opts.crumb) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "ods-flow-fx-panel__row-sub", children: [
+              opts.crumb && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ods-flow-fx-panel__crumb", children: opts.crumb }),
+              item.description
+            ] })
+          ] }),
+          item.insertValue && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "ods-flow-fx-panel__copy",
+              "aria-label": `Copy ${item.label}`,
+              onClick: (e) => {
+                e.stopPropagation();
+                handleCopy(item);
+              },
+              children: copiedId === item.id ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons2.CheckmarkIcon, { size: "sm" }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons2.CopyIcon, { size: "sm" })
+            }
+          )
+        ]
+      },
+      item.id
+    );
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "aside",
     {
@@ -3679,7 +3893,7 @@ function FxPanel({
               type: "text",
               className: "ods-flow-fx-panel__search-input",
               placeholder: searchPlaceholder,
-              "aria-label": "Search functions and variables",
+              "aria-label": "Search fields, functions and variables",
               value: search,
               onChange: (e) => setSearch(e.target.value)
             }
@@ -3695,76 +3909,116 @@ function FxPanel({
             }
           )
         ] }),
-        hint && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "ods-flow-fx-panel__hint", children: hint }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ods-flow-fx-panel__list", children: [
-          filtered.map((cat) => {
-            const isOpen = expanded === cat.id;
+        hint && !query && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "ods-flow-fx-panel__hint", children: hint }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ods-flow-fx-panel__list", ref: listRef, role: "tree", children: [
+          query && hits && (hits.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ods-flow-fx-panel__results", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ods-flow-fx-panel__results-count", children: [
+              hits.length,
+              " ",
+              hits.length === 1 ? "match" : "matches"
+            ] }),
+            hits.map(
+              ({ category, hit }) => renderRow(
+                { item: hit.item, depth: 0, hasChildren: false, expanded: false },
+                category,
+                hits.map((h) => ({
+                  item: h.hit.item,
+                  depth: 0,
+                  hasChildren: false,
+                  expanded: false
+                })),
+                {
+                  searching: true,
+                  crumb: hit.ancestors.length ? hit.ancestors.join(" / ") : category.label
+                }
+              )
+            )
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "ods-flow-fx-panel__empty", children: emptyLabel })),
+          !query && visibleCategories.map((cat) => {
+            const isOpen = openCategoryId === cat.id;
             const kind = cat.kind ?? "function";
+            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__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ods-flow-fx-panel__category", children: [
               /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-                "button",
+                "div",
                 {
-                  type: "button",
-                  className: "ods-flow-fx-panel__category-header",
-                  "aria-expanded": isOpen,
-                  onClick: () => setExpanded(isOpen ? null : cat.id),
+                  className: cn(
+                    "ods-flow-fx-panel__cat-header",
+                    isOpen && "ods-flow-fx-panel__cat-header--open"
+                  ),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                      import_icons2.ChevronRightIcon,
-                      {
-                        size: "sm",
-                        className: cn(
-                          "ods-flow-fx-panel__chevron",
-                          isOpen && "ods-flow-fx-panel__chevron--open"
-                        )
-                      }
-                    ),
                     /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-                      "span",
+                      "button",
                       {
-                        className: cn(
-                          "ods-flow-fx-panel__badge",
-                          `ods-flow-fx-panel__badge--${kind}`
-                        ),
+                        type: "button",
+                        className: "ods-flow-fx-panel__cat-toggle",
+                        "aria-expanded": isOpen,
+                        onClick: () => setOpenCategory(isOpen ? null : cat.id),
                         children: [
                           /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                            import_icons2.ChevronRightIcon,
+                            {
+                              size: "sm",
+                              className: cn(
+                                "ods-flow-fx-panel__chevron",
+                                isOpen && "ods-flow-fx-panel__chevron--open"
+                              )
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                             "span",
                             {
-                              className: "ods-flow-fx-panel__badge-glyph",
-                              "aria-hidden": "true",
-                              children: KIND_GLYPH[kind]
+                              className: cn(
+                                "ods-flow-fx-panel__badge",
+                                `ods-flow-fx-panel__badge--${kind}`
+                              ),
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                                  "span",
+                                  {
+                                    className: "ods-flow-fx-panel__badge-glyph",
+                                    "aria-hidden": "true",
+                                    children: KIND_GLYPH[kind]
+                                  }
+                                ),
+                                cat.label
+                              ]
                             }
                           ),
-                          cat.label
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ods-flow-fx-panel__count", children: countLeaves(cat.items) })
                         ]
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ods-flow-fx-panel__count", children: cat.items.length })
+                    isOpen && hasTree && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      "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__ */ (0, import_jsx_runtime9.jsx)(import_icons2.CollapseAllIcon, { size: "sm" }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons2.ExpandAllIcon, { size: "sm" })
+                      }
+                    )
                   ]
                 }
               ),
-              isOpen && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "ods-flow-fx-panel__items", children: cat.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+              isOpen && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "div",
                 {
-                  className: cn(
-                    "ods-flow-fx-panel__item",
-                    draggingId === item.id && "ods-flow-fx-panel__item--dragging"
-                  ),
-                  draggable: true,
-                  title: item.insertValue,
-                  onDragStart: handleDragStart(item, cat),
-                  onDragEnd: () => setDraggingId(null),
-                  onClick: onItemSelect ? () => onItemSelect(item, cat) : void 0,
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("code", { className: "ods-flow-fx-panel__item-label", children: item.label }),
-                    item.description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ods-flow-fx-panel__item-desc", children: item.description })
-                  ]
-                },
-                item.id
-              )) })
+                  className: "ods-flow-fx-panel__rows",
+                  role: "group",
+                  "aria-label": cat.label,
+                  children: rows.map((row) => renderRow(row, cat, rows))
+                }
+              )
             ] }, cat.id);
-          }),
-          !hasResults && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "ods-flow-fx-panel__empty", children: emptyLabel })
+          })
         ] })
       ]
     }