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

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

@@ -0,0 +1,61 @@
+import { type CSSProperties, type DragEvent, type ReactNode } from "react";
+export type FxItemKind = "function" | "variable";
+export interface FxPanelItem {
+    /** Stable key. */
+    id: string;
+    /** Display label — usually a function signature or variable name. */
+    label: string;
+    /** The string handed to `dataTransfer` / inserted into a field. */
+    insertValue: string;
+    /** Short one-line description shown under the label. */
+    description?: string;
+}
+export interface FxPanelCategory {
+    /** Stable key + accordion identity. */
+    id: string;
+    /** Section heading. */
+    label: string;
+    /** Drives the badge glyph + drag payload. Defaults to "function". */
+    kind?: FxItemKind;
+    items: FxPanelItem[];
+}
+export interface FxPanelProps {
+    /** Categorised entries. Empty categories are skipped from render. */
+    categories: FxPanelCategory[];
+    /** Header title. Default "FX / IO". */
+    title?: ReactNode;
+    /** Instructional line under the search. Pass `null` to hide it. */
+    hint?: ReactNode;
+    /** Controlled search term. */
+    search?: string;
+    /** Initial search term when uncontrolled. */
+    defaultSearch?: string;
+    onSearchChange?: (next: string) => void;
+    /** Controlled open category (single-open accordion). `null` = all closed. */
+    expandedCategory?: string | null;
+    /** Initial open category when uncontrolled. */
+    defaultExpandedCategory?: string | null;
+    onExpandedCategoryChange?: (id: string | null) => void;
+    /** Close (✕) handler. Omit to hide the close button. */
+    onClose?: () => void;
+    /**
+     * 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
+     */
+    onItemDragStart?: (item: FxPanelItem, category: FxPanelCategory, e: DragEvent<HTMLElement>) => void;
+    /** Fires on a plain click of an item (e.g. insert at cursor). */
+    onItemSelect?: (item: FxPanelItem, category: FxPanelCategory) => void;
+    /** Panel width (px). Default 292. */
+    width?: number;
+    /** Message shown when a search matches nothing. Default "No matches". */
+    emptyLabel?: ReactNode;
+    /** Placeholder for the search box. */
+    searchPlaceholder?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function FxPanel({ categories, title, hint, search: controlledSearch, defaultSearch, onSearchChange, expandedCategory: controlledExpanded, defaultExpandedCategory, onExpandedCategoryChange, onClose, onItemDragStart, onItemSelect, width, emptyLabel, searchPlaceholder, className, style, }: FxPanelProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FxPanel.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,9 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+export interface FxToggleButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    /** Whether the FxPanel is currently open. Drives `aria-pressed`. */
+    active?: boolean;
+    /** Visible label beside the glyph. Default "FX". Pass `null` for icon-only. */
+    label?: ReactNode;
+}
+export declare function FxToggleButton({ active, label, className, type, ...rest }: FxToggleButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FxToggleButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FxToggleButton.d.ts","sourceRoot":"","sources":["../../../../src/workflow/components/FxPanel/FxToggleButton.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlE,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACjE,oEAAoE;IACpE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,wBAAgB,cAAc,CAAC,EAC7B,MAAc,EACd,KAAY,EACZ,SAAS,EACT,IAAe,EACf,GAAG,IAAI,EACR,EAAE,mBAAmB,2CAoBrB"}

package/dist/workflow/index.d.ts

@@ -11,6 +11,8 @@ export { ConfigPanel, type ConfigPanelProps, type ConfigPanelSaveState, type Con
 export { FlowCanvas, type FlowCanvasProps } from "./components/FlowCanvas/FlowCanvas";
 export { FlowEdge, type FlowEdgeProps } from "./components/FlowEdge/FlowEdge";
 export { FlowNode, type FlowNodeProps } from "./components/FlowNode/FlowNode";
+export { FxPanel, type FxItemKind, type FxPanelCategory, type FxPanelItem, type FxPanelProps, } from "./components/FxPanel/FxPanel";
+export { FxToggleButton, type FxToggleButtonProps, } from "./components/FxPanel/FxToggleButton";
 export { type FlowNodeContextValue, useFlowNodeContext, } from "./components/FlowNode/FlowNodeContext";
 export { buildNodeKindRegistry, type NodeKindComponent, type NodeKindProps, type NodeKindRegistry, } from "./components/FlowNode/nodeKinds";
 export { Handle, type HandleProps } from "./components/Handle/Handle";

package/dist/workflow/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/workflow/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/workflow/index.ts"],"names":[],"mappings":"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"}

package/dist/workflow.cjs

@@ -31,6 +31,8 @@ __export(workflow_exports, {
   FlowEdge: () => FlowEdge,
   FlowNode: () => FlowNode,
   ForEachNode: () => ForEachNode,
+  FxPanel: () => FxPanel,
+  FxToggleButton: () => FxToggleButton,
   GroupNode: () => GroupNode,
   Handle: () => Handle,
   HttpRequestNode: () => HttpRequestNode,
@@ -3577,8 +3579,231 @@ var EdgesLayer = (0, import_react15.memo)(function EdgesLayer2({
   );
 });
 
-// src/workflow/components/NodeToolbar/NodeToolbar.tsx
+// src/workflow/components/FxPanel/FxPanel.tsx
+var import_react16 = require("react");
+var import_icons2 = require("@octaviaflow/icons");
 var import_jsx_runtime9 = require("react/jsx-runtime");
+var KIND_GLYPH = {
+  function: "\u0192",
+  variable: "\u2B21"
+};
+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 ",
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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] = (0, import_react16.useState)(defaultSearch);
+  const search = controlledSearch ?? internalSearch;
+  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 expanded = controlledExpanded ?? internalExpanded;
+  const setExpanded = (id) => {
+    if (controlledExpanded === void 0) setInternalExpanded(id);
+    onExpandedCategoryChange?.(id);
+  };
+  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 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__ */ (0, import_jsx_runtime9.jsxs)(
+    "aside",
+    {
+      className: cn("ods-flow-fx-panel", className),
+      style: { width, ...style },
+      "aria-label": typeof title === "string" ? title : "FX / IO",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("header", { className: "ods-flow-fx-panel__header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h3", { className: "ods-flow-fx-panel__title", children: title }),
+          onClose && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "ods-flow-fx-panel__close",
+              onClick: onClose,
+              "aria-label": "Close FX panel",
+              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons2.CloseIcon, { size: "sm" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ods-flow-fx-panel__search", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ods-flow-fx-panel__search-icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons2.SearchIcon, { size: "sm" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "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__ */ (0, import_jsx_runtime9.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "ods-flow-fx-panel__search-clear",
+              onClick: () => setSearch(""),
+              "aria-label": "Clear search",
+              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons2.CloseIcon, { size: "sm" })
+            }
+          )
+        ] }),
+        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;
+            const kind = cat.kind ?? "function";
+            return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ods-flow-fx-panel__category", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  className: "ods-flow-fx-panel__category-header",
+                  "aria-expanded": isOpen,
+                  onClick: () => setExpanded(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: 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
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ods-flow-fx-panel__count", children: cat.items.length })
+                  ]
+                }
+              ),
+              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)(
+                "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
+              )) })
+            ] }, cat.id);
+          }),
+          !hasResults && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "ods-flow-fx-panel__empty", children: emptyLabel })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/workflow/components/FxPanel/FxToggleButton.tsx
+var import_icons3 = require("@octaviaflow/icons");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function FxToggleButton({
+  active = false,
+  label = "FX",
+  className,
+  type = "button",
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "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__ */ (0, import_jsx_runtime10.jsx)(import_icons3.FunctionIcon, { size: "sm", className: "ods-flow-fx-toggle__icon" }),
+        label != null && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ods-flow-fx-toggle__label", children: label })
+      ]
+    }
+  );
+}
+
+// src/workflow/components/NodeToolbar/NodeToolbar.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function NodeToolbar({
   isVisible,
   position = "top",
@@ -3593,7 +3818,7 @@ function NodeToolbar({
   const show = isVisible ?? node.selected;
   if (!show) return null;
   const inverseScale = 1 / viewport.zoom;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "div",
     {
       className: cn("ods-node-toolbar", `ods-node-toolbar--${position}`, className),
@@ -3605,7 +3830,7 @@ function NodeToolbar({
       onPointerDown: (e) => e.stopPropagation(),
       onMouseDown: (e) => e.stopPropagation(),
       onClick: (e) => e.stopPropagation(),
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "div",
         {
           className: "ods-node-toolbar__inner",
@@ -3759,6 +3984,8 @@ function toggleGroupCollapse(groupId, nodes) {
   FlowEdge,
   FlowNode,
   ForEachNode,
+  FxPanel,
+  FxToggleButton,
   GroupNode,
   Handle,
   HttpRequestNode,