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

package/dist/workflow.js

@@ -617,8 +617,238 @@ function ConfigPanel({
   );
 }
 
+// src/workflow/components/FxPanel/FxPanel.tsx
+import {
+  useMemo as useMemo2,
+  useState as useState4
+} from "react";
+import {
+  ChevronRightIcon,
+  CloseIcon,
+  SearchIcon
+} from "@octaviaflow/icons";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var KIND_GLYPH = {
+  function: "\u0192",
+  variable: "\u2B21"
+};
+function FxPanel({
+  categories,
+  title = "FX / IO",
+  hint = /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    "Drag items into any input field with the ",
+    /* @__PURE__ */ jsx2("strong", { children: "FX" }),
+    " indicator"
+  ] }),
+  search: controlledSearch,
+  defaultSearch = "",
+  onSearchChange,
+  expandedCategory: controlledExpanded,
+  defaultExpandedCategory,
+  onExpandedCategoryChange,
+  onClose,
+  onItemDragStart,
+  onItemSelect,
+  width = 292,
+  emptyLabel = "No matches",
+  searchPlaceholder = "Search functions & variables\u2026",
+  className,
+  style
+}) {
+  const [internalSearch, setInternalSearch] = useState4(defaultSearch);
+  const search = controlledSearch ?? internalSearch;
+  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 expanded = controlledExpanded ?? internalExpanded;
+  const setExpanded = (id) => {
+    if (controlledExpanded === void 0) setInternalExpanded(id);
+    onExpandedCategoryChange?.(id);
+  };
+  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 handleDragStart = (item, category) => (e) => {
+    setDraggingId(item.id);
+    if (onItemDragStart) {
+      onItemDragStart(item, category, e);
+    } else {
+      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";
+    }
+  };
+  return /* @__PURE__ */ jsxs2(
+    "aside",
+    {
+      className: cn("ods-flow-fx-panel", className),
+      style: { width, ...style },
+      "aria-label": typeof title === "string" ? title : "FX / IO",
+      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 FX panel",
+              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 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 && /* @__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;
+            const kind = cat.kind ?? "function";
+            return /* @__PURE__ */ jsxs2("div", { className: "ods-flow-fx-panel__category", children: [
+              /* @__PURE__ */ jsxs2(
+                "button",
+                {
+                  type: "button",
+                  className: "ods-flow-fx-panel__category-header",
+                  "aria-expanded": isOpen,
+                  onClick: () => setExpanded(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(
+                            "span",
+                            {
+                              className: "ods-flow-fx-panel__badge-glyph",
+                              "aria-hidden": "true",
+                              children: KIND_GLYPH[kind]
+                            }
+                          ),
+                          cat.label
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2("span", { className: "ods-flow-fx-panel__count", children: cat.items.length })
+                  ]
+                }
+              ),
+              isOpen && /* @__PURE__ */ jsx2("div", { className: "ods-flow-fx-panel__items", children: cat.items.map((item) => /* @__PURE__ */ jsxs2(
+                "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
+              )) })
+            ] }, cat.id);
+          }),
+          !hasResults && /* @__PURE__ */ jsx2("div", { className: "ods-flow-fx-panel__empty", children: emptyLabel })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/workflow/components/FxPanel/FxToggleButton.tsx
+import { FunctionIcon } from "@octaviaflow/icons";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function FxToggleButton({
+  active = false,
+  label = "FX",
+  className,
+  type = "button",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs3(
+    "button",
+    {
+      ...rest,
+      type,
+      className: cn(
+        "ods-flow-fx-toggle",
+        active && "ods-flow-fx-toggle--active",
+        label == null && "ods-flow-fx-toggle--icon-only",
+        className
+      ),
+      "aria-pressed": active,
+      title: active ? "Hide FX / IO" : "Show FX / IO",
+      children: [
+        /* @__PURE__ */ jsx3(FunctionIcon, { size: "sm", className: "ods-flow-fx-toggle__icon" }),
+        label != null && /* @__PURE__ */ jsx3("span", { className: "ods-flow-fx-toggle__label", children: label })
+      ]
+    }
+  );
+}
+
 // src/workflow/components/NodeToolbar/NodeToolbar.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function NodeToolbar({
   isVisible,
   position = "top",
@@ -633,7 +863,7 @@ function NodeToolbar({
   const show = isVisible ?? node.selected;
   if (!show) return null;
   const inverseScale = 1 / viewport.zoom;
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       className: cn("ods-node-toolbar", `ods-node-toolbar--${position}`, className),
@@ -645,7 +875,7 @@ function NodeToolbar({
       onPointerDown: (e) => e.stopPropagation(),
       onMouseDown: (e) => e.stopPropagation(),
       onClick: (e) => e.stopPropagation(),
-      children: /* @__PURE__ */ jsx2(
+      children: /* @__PURE__ */ jsx4(
         "div",
         {
           className: "ods-node-toolbar__inner",
@@ -798,6 +1028,8 @@ export {
   FlowEdge,
   FlowNode,
   ForEachNode,
+  FxPanel,
+  FxToggleButton,
   GroupNode,
   Handle,
   HttpRequestNode,