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

package/dist/workflow.js

@@ -619,12 +619,20 @@ function ConfigPanel({
 
 // src/workflow/components/FxPanel/FxPanel.tsx
 import {
+  useEffect as useEffect3,
   useMemo as useMemo2,
+  useRef as useRef4,
   useState as useState4
 } from "react";
 import {
+  CheckmarkIcon,
+  ChevronDownIcon,
   ChevronRightIcon,
   CloseIcon,
+  CollapseAllIcon,
+  CopyIcon,
+  DraggableIcon,
+  ExpandAllIcon,
   SearchIcon
 } from "@octaviaflow/icons";
 import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -632,13 +640,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__ */ jsxs2(Fragment2, { children: [
-    "Drag items into any input field with the ",
+    "Drag a field into any input with the ",
     /* @__PURE__ */ jsx2("strong", { children: "FX" }),
-    " indicator"
+    " badge, or click to insert."
   ] }),
   search: controlledSearch,
   defaultSearch = "",
@@ -649,44 +692,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] = useState4(defaultSearch);
   const search = controlledSearch ?? internalSearch;
+  const query = search.trim().toLowerCase();
   const setSearch = (next) => {
     if (controlledSearch === void 0) setInternalSearch(next);
     onSearchChange?.(next);
   };
-  const [internalExpanded, setInternalExpanded] = useState4(
-    defaultExpandedCategory !== void 0 ? defaultExpandedCategory : categories.find((c) => c.items.length > 0)?.id ?? null
+  const visibleCategories = useMemo2(
+    () => categories.filter((c) => c.items.length > 0),
+    [categories]
+  );
+  const [internalCat, setInternalCat] = useState4(
+    defaultExpandedCategory !== void 0 ? defaultExpandedCategory : visibleCategories[0]?.id ?? null
   );
-  const expanded = controlledExpanded ?? internalExpanded;
-  const setExpanded = (id) => {
-    if (controlledExpanded === void 0) setInternalExpanded(id);
+  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);
+      }
+    }
+    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] = useState4(null);
-  const filtered = useMemo2(() => {
-    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] = useState4(null);
+  const [focusedId, setFocusedId] = useState4(null);
+  const copyTimer = useRef4(null);
+  useEffect3(
+    () => () => {
+      if (copyTimer.current) clearTimeout(copyTimer.current);
+    },
+    []
+  );
+  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 {
+    } else if (item.insertValue) {
       e.dataTransfer.setData("text/plain", item.insertValue);
       e.dataTransfer.setData("application/x-fx-insert", item.insertValue);
       e.dataTransfer.setData(
@@ -696,6 +780,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 = useRef4(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__ */ 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: 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__ */ 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.preview !== void 0 && /* @__PURE__ */ jsx2("span", { className: "ods-flow-fx-panel__preview", title: item.preview, children: item.preview })
+            ] }),
+            (item.description || opts.crumb) && /* @__PURE__ */ jsxs2("span", { className: "ods-flow-fx-panel__row-sub", children: [
+              opts.crumb && /* @__PURE__ */ jsx2("span", { className: "ods-flow-fx-panel__crumb", children: opts.crumb }),
+              item.description
+            ] })
+          ] }),
+          item.insertValue && /* @__PURE__ */ jsx2(
+            "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__ */ jsx2(CheckmarkIcon, { size: "sm" }) : /* @__PURE__ */ jsx2(CopyIcon, { size: "sm" })
+            }
+          )
+        ]
+      },
+      item.id
+    );
+  };
   return /* @__PURE__ */ jsxs2(
     "aside",
     {
@@ -724,7 +946,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)
             }
@@ -740,76 +962,116 @@ function FxPanel({
             }
           )
         ] }),
-        hint && /* @__PURE__ */ jsx2("p", { className: "ods-flow-fx-panel__hint", children: hint }),
-        /* @__PURE__ */ jsxs2("div", { className: "ods-flow-fx-panel__list", children: [
-          filtered.map((cat) => {
-            const isOpen = expanded === cat.id;
+        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 }) => 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__ */ 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 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(
-                "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__ */ jsx2(
-                      ChevronRightIcon,
-                      {
-                        size: "sm",
-                        className: cn(
-                          "ods-flow-fx-panel__chevron",
-                          isOpen && "ods-flow-fx-panel__chevron--open"
-                        )
-                      }
-                    ),
                     /* @__PURE__ */ jsxs2(
-                      "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__ */ jsx2(
+                            ChevronRightIcon,
+                            {
+                              size: "sm",
+                              className: cn(
+                                "ods-flow-fx-panel__chevron",
+                                isOpen && "ods-flow-fx-panel__chevron--open"
+                              )
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs2(
                             "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__ */ jsx2(
+                                  "span",
+                                  {
+                                    className: "ods-flow-fx-panel__badge-glyph",
+                                    "aria-hidden": "true",
+                                    children: KIND_GLYPH[kind]
+                                  }
+                                ),
+                                cat.label
+                              ]
                             }
                           ),
-                          cat.label
+                          /* @__PURE__ */ jsx2("span", { className: "ods-flow-fx-panel__count", children: countLeaves(cat.items) })
                         ]
                       }
                     ),
-                    /* @__PURE__ */ jsx2("span", { className: "ods-flow-fx-panel__count", children: cat.items.length })
+                    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__items", children: cat.items.map((item) => /* @__PURE__ */ jsxs2(
+              isOpen && /* @__PURE__ */ jsx2(
                 "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__ */ jsx2("code", { className: "ods-flow-fx-panel__item-label", children: item.label }),
-                    item.description && /* @__PURE__ */ jsx2("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__ */ jsx2("div", { className: "ods-flow-fx-panel__empty", children: emptyLabel })
+          })
         ] })
       ]
     }