@particle-academy/fancy-flow 0.25.0 → 0.27.0

package/dist/index.d.cts

@@ -538,10 +538,19 @@ declare function FlowRunControls({ running, onRun, onCancel, onReset, className,
 
 type FlowRunFeedProps = {
     entries: FlowRunFeedEntry[];
+    /** Show the header bar (title + running badge + event count). Default true. */
+    showHeader?: boolean;
+    /** Header title. Default "Run feed". */
+    title?: string;
+    /** When true, a "running" badge shows in the header. */
+    running?: boolean;
     className?: string;
     style?: CSSProperties;
 };
-/** FlowRunFeed — scrolling log panel. Auto-scrolls to bottom on new entries. */
-declare function FlowRunFeed({ entries, className, style }: FlowRunFeedProps): react.JSX.Element;
+/**
+ * FlowRunFeed — scrolling run log with a header (title + live event count).
+ * Auto-scrolls its body to the bottom on new entries.
+ */
+declare function FlowRunFeed({ entries, showHeader, title, running, className, style }: FlowRunFeedProps): react.JSX.Element;
 
 export { ActionNode, type AlignEdge, AutoLayoutOptions, ConfigField, ConfigFieldRenderer, type ConfigFieldRendererProps, ConnectionValidatorOptions, DecisionNode, ExecutorRegistry, FlowCanvas, type FlowCanvasProps, FlowEditor, type FlowEditorAction, type FlowEditorApi, type FlowEditorBuiltins, type FlowEditorProps, type FlowEditorSlots, FlowGraph, FlowNode, type FlowNodeRenderProps, FlowRunControls, type FlowRunControlsProps, FlowRunFeed, FlowRunFeedEntry, type FlowRunFeedProps, LaneNode, NodeCategory, NodeConfigPanel, type NodeConfigPanelProps, NodeKindDefinition, NodePalette, type NodePaletteProps, NodePort, type NodePortProps, type NodePortSide, type NodePortType, NodeRunStatus, NodeShell, type NodeShellProps, NoteNode, OutputNode, SubgraphNode, TriggerNode, WorkflowMetadata, WorkflowSchema, alignNodes, cloneSubgraph, defaultNodeTypes, defineNode, distributeNodes, paletteDropHandlers, reconnectEdge, useFlowEditor, useFlowEditorOptional };

package/dist/index.d.ts

@@ -538,10 +538,19 @@ declare function FlowRunControls({ running, onRun, onCancel, onReset, className,
 
 type FlowRunFeedProps = {
     entries: FlowRunFeedEntry[];
+    /** Show the header bar (title + running badge + event count). Default true. */
+    showHeader?: boolean;
+    /** Header title. Default "Run feed". */
+    title?: string;
+    /** When true, a "running" badge shows in the header. */
+    running?: boolean;
     className?: string;
     style?: CSSProperties;
 };
-/** FlowRunFeed — scrolling log panel. Auto-scrolls to bottom on new entries. */
-declare function FlowRunFeed({ entries, className, style }: FlowRunFeedProps): react.JSX.Element;
+/**
+ * FlowRunFeed — scrolling run log with a header (title + live event count).
+ * Auto-scrolls its body to the bottom on new entries.
+ */
+declare function FlowRunFeed({ entries, showHeader, title, running, className, style }: FlowRunFeedProps): react.JSX.Element;
 
 export { ActionNode, type AlignEdge, AutoLayoutOptions, ConfigField, ConfigFieldRenderer, type ConfigFieldRendererProps, ConnectionValidatorOptions, DecisionNode, ExecutorRegistry, FlowCanvas, type FlowCanvasProps, FlowEditor, type FlowEditorAction, type FlowEditorApi, type FlowEditorBuiltins, type FlowEditorProps, type FlowEditorSlots, FlowGraph, FlowNode, type FlowNodeRenderProps, FlowRunControls, type FlowRunControlsProps, FlowRunFeed, FlowRunFeedEntry, type FlowRunFeedProps, LaneNode, NodeCategory, NodeConfigPanel, type NodeConfigPanelProps, NodeKindDefinition, NodePalette, type NodePaletteProps, NodePort, type NodePortProps, type NodePortSide, type NodePortType, NodeRunStatus, NodeShell, type NodeShellProps, NoteNode, OutputNode, SubgraphNode, TriggerNode, WorkflowMetadata, WorkflowSchema, alignNodes, cloneSubgraph, defaultNodeTypes, defineNode, distributeNodes, paletteDropHandlers, reconnectEdge, useFlowEditor, useFlowEditorOptional };

package/dist/index.js

@@ -1,7 +1,7 @@
 import { useFlowState, useFlowRun, useFlowHistory, applyOutputsToNodes, applyStatusesToNodes } from './chunk-OFW7GN3Y.js';
 export { applyOutputsToNodes, applyStatusesToNodes, createHistory, useFlowHistory, useFlowRun, useFlowState } from './chunk-OFW7GN3Y.js';
-import { buildNodeTypes, FlowEditorProvider, registerBuiltinKinds, NoteNode, createConnectionValidator } from './chunk-ATQXZEVD.js';
-export { ANY_PORT_TYPE, BUILTIN_KINDS, LaneNode, NoteNode, RegistryNode, buildNodeTypes, createConnectionValidator, defaultPortCompatibility, registerBuiltinKinds, useFlowEditor, useFlowEditorOptional } from './chunk-ATQXZEVD.js';
+import { buildNodeTypes, FlowEditorProvider, registerBuiltinKinds, NoteNode, createConnectionValidator } from './chunk-YOFCVO2W.js';
+export { ANY_PORT_TYPE, BUILTIN_KINDS, LaneNode, NoteNode, RegistryNode, buildNodeTypes, createConnectionValidator, defaultPortCompatibility, registerBuiltinKinds, useFlowEditor, useFlowEditorOptional } from './chunk-YOFCVO2W.js';
 import { ReactFlowProvider, useReactFlow, addEdge, applyEdgeChanges, applyNodeChanges, Position, Handle, reconnectEdge, index, BackgroundVariant, Background, Controls, MiniMap, ViewportPortal } from './chunk-OWENS2H5.js';
 export { LEGACY_PAUSE_PREFIXES, PAUSE_PREFIX, decodePause, encodePause, isPause, pauseForHuman } from './chunk-UEOE6B52.js';
 import './chunk-USL4FMFU.js';
@@ -13,7 +13,7 @@ import { onNodeKindsChanged, listNodeKinds, getNodeKind, defaultConfigFor, valid
 export { categoryAccent, defaultConfigFor, getNodeKind, listNodeKinds, onNodeKindsChanged, registerNodeKind, validateConfig } from './chunk-Q6IPK64P.js';
 import { getRichInputAdapter } from './chunk-F5RPRB7A.js';
 export { RichInputPreview, getRichInputAdapter, isRichInputEnabled, onRichInputAdapterChanged, registerRichInputAdapter } from './chunk-F5RPRB7A.js';
-import { memo, forwardRef, useState, useEffect, useMemo, useCallback, useRef, useImperativeHandle } from 'react';
+import { memo, forwardRef, useState, useMemo, useEffect, useCallback, useRef, useImperativeHandle } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function NodeShellInner({
@@ -969,9 +969,13 @@ function NodeConfigPanel({
   return /* @__PURE__ */ jsxs("aside", { className: ["ff-panel", className ?? ""].filter(Boolean).join(" "), style, children: [
     header,
     /* @__PURE__ */ jsxs("header", { className: "ff-panel__header", children: [
-      /* @__PURE__ */ jsx("span", { className: "ff-panel__kind-tag", children: kind.label }),
-      kind.description && /* @__PURE__ */ jsx("p", { className: "ff-panel__kind-desc", children: kind.description })
+      /* @__PURE__ */ jsx("span", { className: "ff-panel__head-icon", style: { background: kind.accent ?? categoryAccent(kind.category) }, "aria-hidden": true, children: kind.icon }),
+      /* @__PURE__ */ jsxs("span", { className: "ff-panel__head-text", children: [
+        /* @__PURE__ */ jsx("span", { className: "ff-panel__head-kind", children: kind.label }),
+        /* @__PURE__ */ jsx("span", { className: "ff-panel__head-name", children: node.data.label || kind.label })
+      ] })
     ] }),
+    kind.description && /* @__PURE__ */ jsx("p", { className: "ff-panel__kind-desc", children: kind.description }),
     /* @__PURE__ */ jsxs("div", { className: "ff-panel__field", children: [
       /* @__PURE__ */ jsx("label", { className: "ff-panel__label", children: "Label" }),
       /* @__PURE__ */ jsx(
@@ -1046,22 +1050,161 @@ function FlowRunControls({ running, onRun, onCancel, onReset, className, style }
     onReset && /* @__PURE__ */ jsx("button", { type: "button", className: "ff-run-controls__btn ff-run-controls__btn--reset", onClick: onReset, disabled: running, children: "Reset" })
   ] });
 }
-function FlowRunFeed({ entries, className, style }) {
+function FlowRunFeed({ entries, showHeader = true, title = "Run feed", running, className, style }) {
   const scrollRef = useRef(null);
   useEffect(() => {
     const el = scrollRef.current;
     if (el) el.scrollTop = el.scrollHeight;
   }, [entries.length]);
-  return /* @__PURE__ */ jsx("div", { className: ["ff-run-feed", className ?? ""].filter(Boolean).join(" "), style, ref: scrollRef, children: entries.length === 0 ? /* @__PURE__ */ jsx("p", { className: "ff-run-feed__empty", children: "No run events yet." }) : entries.map((e) => /* @__PURE__ */ jsxs("div", { className: `ff-run-feed__row ff-run-feed__row--${e.level}`, children: [
-    /* @__PURE__ */ jsx("span", { className: "ff-run-feed__time", children: formatTime(e.at) }),
-    e.nodeId && /* @__PURE__ */ jsx("span", { className: "ff-run-feed__node", children: e.nodeId }),
-    /* @__PURE__ */ jsx("span", { className: "ff-run-feed__text", children: e.text })
-  ] }, e.id)) });
+  return /* @__PURE__ */ jsxs("div", { className: ["ff-run-feed", className ?? ""].filter(Boolean).join(" "), style, children: [
+    showHeader && /* @__PURE__ */ jsxs("div", { className: "ff-run-feed__header", children: [
+      /* @__PURE__ */ jsx("span", { className: "ff-run-feed__title", "aria-hidden": true, children: "\u25B8" }),
+      /* @__PURE__ */ jsx("span", { className: "ff-run-feed__title-text", children: title }),
+      running && /* @__PURE__ */ jsx("span", { className: "ff-run-feed__badge", children: "running" }),
+      /* @__PURE__ */ jsxs("span", { className: "ff-run-feed__count", children: [
+        entries.length,
+        " ",
+        entries.length === 1 ? "event" : "events"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "ff-run-feed__body", ref: scrollRef, children: entries.length === 0 ? /* @__PURE__ */ jsx("p", { className: "ff-run-feed__empty", children: "No run events yet." }) : entries.map((e) => /* @__PURE__ */ jsxs("div", { className: `ff-run-feed__row ff-run-feed__row--${e.level}`, children: [
+      /* @__PURE__ */ jsx("span", { className: "ff-run-feed__time", children: formatTime(e.at) }),
+      e.nodeId && /* @__PURE__ */ jsx("span", { className: "ff-run-feed__node", children: e.nodeId }),
+      /* @__PURE__ */ jsx("span", { className: "ff-run-feed__text", children: e.text })
+    ] }, e.id)) })
+  ] });
 }
 function formatTime(at) {
   const d = new Date(at);
   return `${d.getMinutes().toString().padStart(2, "0")}:${d.getSeconds().toString().padStart(2, "0")}.${Math.floor(d.getMilliseconds() / 100)}`;
 }
+function humanInputFields(config) {
+  const raw = Array.isArray(config?.fields) ? config.fields : [];
+  const fields = raw.filter((f) => f && typeof f === "object" && typeof f.key === "string" && f.key).map((f) => ({
+    key: f.key,
+    label: typeof f.label === "string" && f.label ? f.label : f.key,
+    type: ["text", "textarea", "number", "select", "switch"].includes(f.type) ? f.type : "text",
+    required: !!f.required,
+    placeholder: typeof f.placeholder === "string" ? f.placeholder : void 0,
+    options: Array.isArray(f.options) ? f.options : void 0,
+    default: f.default
+  }));
+  if (fields.length) return fields;
+  const title = typeof config?.title === "string" && config.title ? config.title : "Your answer";
+  return [{ key: "value", label: title, type: "textarea", required: true }];
+}
+function initialValues(fields) {
+  const v = {};
+  for (const f of fields) v[f.key] = f.type === "switch" ? !!f.default : f.default ?? "";
+  return v;
+}
+function HumanPrompt({ request, onCancel }) {
+  const firstRef = useRef(null);
+  useEffect(() => {
+    firstRef.current?.focus();
+    const onKey = (e) => {
+      if (e.key === "Escape") onCancel();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onCancel]);
+  return /* @__PURE__ */ jsx("div", { className: "ff-prompt-overlay", role: "dialog", "aria-modal": "true", "aria-label": request.title, children: /* @__PURE__ */ jsxs("div", { className: "ff-prompt", onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsx("div", { className: "ff-prompt__title", children: request.title }),
+    request.kind === "approval" ? /* @__PURE__ */ jsx(ApprovalBody, { request, onCancel }) : /* @__PURE__ */ jsx(InputBody, { request, onCancel, firstRef })
+  ] }) });
+}
+function ApprovalBody({ request, onCancel }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    request.description && /* @__PURE__ */ jsx("p", { className: "ff-prompt__desc", children: request.description }),
+    /* @__PURE__ */ jsxs("div", { className: "ff-prompt__actions", children: [
+      /* @__PURE__ */ jsx("button", { type: "button", className: "ff-prompt__btn ff-prompt__btn--ghost", onClick: onCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "ff-prompt__btn ff-prompt__btn--danger", onClick: () => request.resolve(false), children: "Deny" }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "ff-prompt__btn ff-prompt__btn--primary", onClick: () => request.resolve(true), children: "Approve" })
+    ] })
+  ] });
+}
+function InputBody({
+  request,
+  onCancel,
+  firstRef
+}) {
+  const [values, setValues] = useState(() => initialValues(request.fields));
+  const set = (k, v) => setValues((prev) => ({ ...prev, [k]: v }));
+  const missing = request.fields.filter((f) => f.required && (values[f.key] === void 0 || values[f.key] === ""));
+  const submit = () => {
+    if (missing.length === 0) request.resolve(values);
+  };
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      onSubmit: (e) => {
+        e.preventDefault();
+        submit();
+      },
+      onKeyDown: (e) => {
+        if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+          e.preventDefault();
+          submit();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "ff-prompt__fields", children: request.fields.map((f, i) => /* @__PURE__ */ jsxs("label", { className: "ff-prompt__field", children: [
+          /* @__PURE__ */ jsxs("span", { className: "ff-prompt__label", children: [
+            f.label ?? f.key,
+            f.required && /* @__PURE__ */ jsx("span", { className: "ff-prompt__req", children: " *" })
+          ] }),
+          renderControl(f, values[f.key], (v) => set(f.key, v), i === 0 ? firstRef : void 0)
+        ] }, f.key)) }),
+        /* @__PURE__ */ jsxs("div", { className: "ff-prompt__actions", children: [
+          /* @__PURE__ */ jsx("button", { type: "button", className: "ff-prompt__btn ff-prompt__btn--ghost", onClick: onCancel, children: "Cancel" }),
+          /* @__PURE__ */ jsx("button", { type: "submit", className: "ff-prompt__btn ff-prompt__btn--primary", disabled: missing.length > 0, children: request.submitLabel || "Continue" })
+        ] })
+      ]
+    }
+  );
+}
+function renderControl(f, value, onChange, ref) {
+  const common = { className: "ff-prompt__input", placeholder: f.placeholder };
+  if (f.type === "textarea") {
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ...common,
+        ref,
+        rows: 3,
+        value: String(value ?? ""),
+        onChange: (e) => onChange(e.target.value)
+      }
+    );
+  }
+  if (f.type === "switch") {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "checkbox",
+        className: "ff-prompt__switch",
+        checked: !!value,
+        onChange: (e) => onChange(e.target.checked)
+      }
+    );
+  }
+  if (f.type === "select" && f.options && f.options.length) {
+    return /* @__PURE__ */ jsxs("select", { className: "ff-prompt__input", value: String(value ?? ""), onChange: (e) => onChange(e.target.value), children: [
+      /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Choose\u2026" }),
+      f.options.map((o) => /* @__PURE__ */ jsx("option", { value: o.value, children: o.label }, o.value))
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...common,
+      ref,
+      type: f.type === "number" ? "number" : "text",
+      value: String(value ?? ""),
+      onChange: (e) => onChange(f.type === "number" ? e.target.value === "" ? "" : Number(e.target.value) : e.target.value)
+    }
+  );
+}
 var FlowEditor = forwardRef(function FlowEditor2(props, ref) {
   return /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(
     "div",
@@ -1095,6 +1238,41 @@ function FlowEditorInner({
   const internal = useFlowState(initial);
   const runner = useFlowRun();
   const rf = useReactFlow();
+  const [prompt, setPrompt] = useState(null);
+  const humanExecutors = useMemo(
+    () => ({
+      user_input: ({ node }) => new Promise((resolve) => {
+        const cfg = node.data?.config ?? {};
+        setPrompt({
+          kind: "input",
+          title: typeof cfg.title === "string" && cfg.title || "Your input",
+          submitLabel: typeof cfg.submitLabel === "string" ? cfg.submitLabel : void 0,
+          fields: humanInputFields(cfg),
+          resolve: (values) => {
+            setPrompt(null);
+            resolve(values);
+          }
+        });
+      }),
+      human_approval: ({ node }) => new Promise((resolve) => {
+        const cfg = node.data?.config ?? {};
+        setPrompt({
+          kind: "approval",
+          title: typeof cfg.title === "string" && cfg.title || "Approve action",
+          description: typeof cfg.description === "string" ? cfg.description : void 0,
+          resolve: (approved) => {
+            setPrompt(null);
+            resolve({ branch: approved ? "approved" : "denied" });
+          }
+        });
+      })
+    }),
+    []
+  );
+  const runExecutors = useMemo(() => ({ ...humanExecutors, ...executors }), [humanExecutors, executors]);
+  useEffect(() => {
+    if (!runner.running) setPrompt(null);
+  }, [runner.running]);
   const controlled = value !== void 0;
   const baseFlow = controlled ? makeControlledFlowAdapter(value, onChange) : internal;
   const hist = useFlowHistory(baseFlow);
@@ -1404,7 +1582,7 @@ function FlowEditorInner({
           ({ autoLayout }) => flow.setGraph({ nodes: autoLayout({ nodes: flow.nodes, edges: flow.edges }, { scope: laneId }), edges: flow.edges })
         );
       },
-      run: () => runner.run({ nodes: flow.nodes, edges: flow.edges }, executors),
+      run: () => runner.run({ nodes: flow.nodes, edges: flow.edges }, runExecutors),
       cancel: runner.cancel,
       reset: runner.reset,
       toWorkflow,
@@ -1416,7 +1594,7 @@ function FlowEditorInner({
       canUndo: hist.canUndo,
       canRedo: hist.canRedo
     };
-  }, [flow, selectedId, selected, selectedEdgeId, selectedEdge, selectedIds, selectedNodes, runner, executors, metadata, addNode, deleteNodes, deleteEdges, duplicateSelected, alignSelected, distributeSelected, copySelection, pasteClipboard, addLane, hist, rf]);
+  }, [flow, selectedId, selected, selectedEdgeId, selectedEdge, selectedIds, selectedNodes, runner, runExecutors, metadata, addNode, deleteNodes, deleteEdges, duplicateSelected, alignSelected, distributeSelected, copySelection, pasteClipboard, addLane, hist, rf]);
   useImperativeHandle(apiRef, () => api, [api]);
   const dropHandlers = paletteDropHandlers((kindName, evt) => {
     const point = rf.screenToFlowPosition({ x: evt.clientX, y: evt.clientY });
@@ -1590,7 +1768,11 @@ function FlowEditorInner({
           onCancel: () => setLabelEdit(null)
         }
       ),
-      showFeed && (slots.feed ? slots.feed(api) : /* @__PURE__ */ jsx(FlowRunFeed, { entries: runner.feed, className: "ff-editor__feed" }))
+      showFeed && (slots.feed ? slots.feed(api) : /* @__PURE__ */ jsx(FlowRunFeed, { entries: runner.feed, running: api.running, className: "ff-editor__feed" })),
+      prompt && /* @__PURE__ */ jsx(HumanPrompt, { request: prompt, onCancel: () => {
+        setPrompt(null);
+        runner.cancel();
+      } })
     ] }),
     showPanel && (slots.panel ? slots.panel(api) : /* @__PURE__ */ jsxs("div", { className: "ff-editor__panel-wrap", children: [
       /* @__PURE__ */ jsx(