@particle-academy/fancy-flow 0.25.0 → 0.26.0

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({
@@ -1062,6 +1062,133 @@ 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 +1222,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 +1566,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 +1578,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 +1752,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, 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(