@particle-academy/fancy-flow 0.24.0 → 0.26.0

package/dist/index.d.cts

@@ -9,8 +9,8 @@ import { WorkflowSchema, WorkflowMetadata } from './schema/index.cjs';
 export { ImportIssue, ImportOptions, ImportResult, WORKFLOW_SCHEMA_URL, WORKFLOW_SCHEMA_VERSION, WorkflowSchemaEdge, WorkflowSchemaNode, exportWorkflow, importWorkflow, migrateSchema, workflowToBlob } from './schema/index.cjs';
 import { AutoLayoutOptions } from './layout/index.cjs';
 export { AutoLayoutDirection } from './layout/index.cjs';
-import { N as NodeCategory, a as NodeKindDefinition, C as ConfigField } from './types-BekE5JTG.cjs';
-export { D as DocumentConfigField, K as KeyValueConfigField, P as PortSpec, R as RenderBodyContext, d as RepeaterConfigField, e as RepeaterRowField } from './types-BekE5JTG.cjs';
+import { N as NodeCategory, a as NodeKindDefinition, C as ConfigField } from './types-B_pxRqfw.cjs';
+export { D as DocumentConfigField, K as KeyValueConfigField, P as PortSpec, R as RenderBodyContext, d as RepeaterConfigField, e as RepeaterRowField } from './types-B_pxRqfw.cjs';
 import { FlowRunFeedEntry } from './runtime/index.cjs';
 export { HistoryController, UseFlowHistoryReturn, UseFlowRunOptions, UseFlowRunReturn, UseFlowStateReturn, applyOutputsToNodes, applyStatusesToNodes, createHistory, useFlowHistory, useFlowRun, useFlowState } from './runtime/index.cjs';
 export { R as RunOptions, a as RunResult, r as runFlow } from './run-flow-AXzOR-Wq.cjs';
@@ -423,12 +423,7 @@ declare const DecisionNode: react.MemoExoticComponent<typeof DecisionNodeInner>;
 declare function OutputNodeInner(props: NodeProps<FlowNode>): react.JSX.Element;
 declare const OutputNode: react.MemoExoticComponent<typeof OutputNodeInner>;
 
-/**
- * NoteNode — annotation card with no ports. Useful for documenting graphs.
- * Body is plain text; hosts can wire onChange via the editor's onNodesChange
- * if they want it editable.
- */
-declare function NoteNodeInner({ data, selected }: NodeProps<FlowNode>): react.JSX.Element;
+declare function NoteNodeInner(props: NodeProps<FlowNode>): react.JSX.Element;
 declare const NoteNode: react.MemoExoticComponent<typeof NoteNodeInner>;
 
 /**

package/dist/index.d.ts

@@ -9,8 +9,8 @@ import { WorkflowSchema, WorkflowMetadata } from './schema/index.js';
 export { ImportIssue, ImportOptions, ImportResult, WORKFLOW_SCHEMA_URL, WORKFLOW_SCHEMA_VERSION, WorkflowSchemaEdge, WorkflowSchemaNode, exportWorkflow, importWorkflow, migrateSchema, workflowToBlob } from './schema/index.js';
 import { AutoLayoutOptions } from './layout/index.js';
 export { AutoLayoutDirection } from './layout/index.js';
-import { N as NodeCategory, a as NodeKindDefinition, C as ConfigField } from './types-DwRpXXNy.js';
-export { D as DocumentConfigField, K as KeyValueConfigField, P as PortSpec, R as RenderBodyContext, d as RepeaterConfigField, e as RepeaterRowField } from './types-DwRpXXNy.js';
+import { N as NodeCategory, a as NodeKindDefinition, C as ConfigField } from './types-BGtR3k9J.js';
+export { D as DocumentConfigField, K as KeyValueConfigField, P as PortSpec, R as RenderBodyContext, d as RepeaterConfigField, e as RepeaterRowField } from './types-BGtR3k9J.js';
 import { FlowRunFeedEntry } from './runtime/index.js';
 export { HistoryController, UseFlowHistoryReturn, UseFlowRunOptions, UseFlowRunReturn, UseFlowStateReturn, applyOutputsToNodes, applyStatusesToNodes, createHistory, useFlowHistory, useFlowRun, useFlowState } from './runtime/index.js';
 export { R as RunOptions, a as RunResult, r as runFlow } from './run-flow-9U-gaYVF.js';
@@ -423,12 +423,7 @@ declare const DecisionNode: react.MemoExoticComponent<typeof DecisionNodeInner>;
 declare function OutputNodeInner(props: NodeProps<FlowNode>): react.JSX.Element;
 declare const OutputNode: react.MemoExoticComponent<typeof OutputNodeInner>;
 
-/**
- * NoteNode — annotation card with no ports. Useful for documenting graphs.
- * Body is plain text; hosts can wire onChange via the editor's onNodesChange
- * if they want it editable.
- */
-declare function NoteNodeInner({ data, selected }: NodeProps<FlowNode>): react.JSX.Element;
+declare function NoteNodeInner(props: NodeProps<FlowNode>): react.JSX.Element;
 declare const NoteNode: react.MemoExoticComponent<typeof NoteNodeInner>;
 
 /**

package/dist/index.js

@@ -1,19 +1,19 @@
-import { useFlowState, useFlowRun, useFlowHistory, applyOutputsToNodes, applyStatusesToNodes } from './chunk-ZS6DVGB3.js';
-export { applyOutputsToNodes, applyStatusesToNodes, createHistory, useFlowHistory, useFlowRun, useFlowState } from './chunk-ZS6DVGB3.js';
-import { buildNodeTypes, registerBuiltinKinds, createConnectionValidator } from './chunk-QAA4CA22.js';
-export { ANY_PORT_TYPE, BUILTIN_KINDS, LaneNode, RegistryNode, buildNodeTypes, createConnectionValidator, defaultPortCompatibility, registerBuiltinKinds } from './chunk-QAA4CA22.js';
+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-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';
-export { runFlow } from './chunk-KDHLKBL2.js';
-import { workflowToBlob, importWorkflow, exportWorkflow } from './chunk-OHVSEHDC.js';
-export { WORKFLOW_SCHEMA_URL, WORKFLOW_SCHEMA_VERSION, exportWorkflow, importWorkflow, migrateSchema, workflowToBlob } from './chunk-OHVSEHDC.js';
+export { runFlow } from './chunk-U2VJB7HR.js';
+import { workflowToBlob, importWorkflow, exportWorkflow } from './chunk-N5ICD2WZ.js';
+export { WORKFLOW_SCHEMA_URL, WORKFLOW_SCHEMA_VERSION, exportWorkflow, importWorkflow, migrateSchema, workflowToBlob } from './chunk-N5ICD2WZ.js';
 export { resolveNodePorts, resolvePortSpec } from './chunk-TITD5W4Y.js';
-import { onNodeKindsChanged, listNodeKinds, getNodeKind, defaultConfigFor, validateConfig, categoryAccent } from './chunk-YXRLIV7A.js';
-export { categoryAccent, defaultConfigFor, getNodeKind, listNodeKinds, onNodeKindsChanged, registerNodeKind, validateConfig } from './chunk-YXRLIV7A.js';
+import { onNodeKindsChanged, listNodeKinds, getNodeKind, defaultConfigFor, validateConfig, categoryAccent } from './chunk-Q6IPK64P.js';
+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, createContext, forwardRef, useState, useEffect, useMemo, useCallback, useRef, useImperativeHandle, useContext } from 'react';
+import { memo, forwardRef, useState, useMemo, useEffect, useCallback, useRef, useImperativeHandle } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function NodeShellInner({
@@ -108,14 +108,6 @@ function OutputNodeInner(props) {
   return /* @__PURE__ */ jsx(NodeShell, { node: props, accent: "#a855f7", tag: "OUTPUT", icon: "\u25CF", showOutputs: false });
 }
 var OutputNode = memo(OutputNodeInner);
-function NoteNodeInner({ data, selected }) {
-  const noteData = data;
-  return /* @__PURE__ */ jsxs("div", { className: `ff-note ${selected ? "ff-note--selected" : ""}`, children: [
-    noteData.label && /* @__PURE__ */ jsx("div", { className: "ff-note__title", children: noteData.label }),
-    noteData.body && /* @__PURE__ */ jsx("p", { className: "ff-note__body", children: noteData.body })
-  ] });
-}
-var NoteNode = memo(NoteNodeInner);
 function SubgraphNodeInner(props) {
   const data = props.data;
   const childCount = data.childIds?.length ?? 0;
@@ -468,7 +460,7 @@ function FlowCanvas({
     }
   );
 }
-var CATEGORY_ORDER = ["trigger", "logic", "data", "ai", "io", "human", "output", "layout", "custom"];
+var CATEGORY_ORDER = ["trigger", "logic", "data", "ai", "io", "human", "output", "layout", "annotation", "custom"];
 var CATEGORY_LABELS = {
   trigger: "Triggers",
   logic: "Logic",
@@ -478,6 +470,7 @@ var CATEGORY_LABELS = {
   human: "Human",
   output: "Output",
   layout: "Layout",
+  annotation: "Notes",
   custom: "Custom"
 };
 function NodePalette({ categories, onPick, className, style }) {
@@ -1069,17 +1062,132 @@ 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)}`;
 }
-var FlowEditorContext = createContext(null);
-var FlowEditorProvider = FlowEditorContext.Provider;
-function useFlowEditor() {
-  const api = useContext(FlowEditorContext);
-  if (api === null) {
-    throw new Error("useFlowEditor() must be called inside <FlowEditor>.");
-  }
-  return api;
+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 useFlowEditorOptional() {
-  return useContext(FlowEditorContext);
+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(
@@ -1114,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);
@@ -1423,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,
@@ -1435,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 });
@@ -1609,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(
@@ -1769,6 +1916,6 @@ function NodePort({ side, type, id, style, title, className }) {
 // src/index.ts
 registerBuiltinKinds();
 
-export { ActionNode, ConfigFieldRenderer, DecisionNode, FlowCanvas, FlowEditor, FlowRunControls, FlowRunFeed, NodeConfigPanel, NodePalette, NodePort, NodeShell, NoteNode, OutputNode, SubgraphNode, TriggerNode, alignNodes, cloneSubgraph, defaultNodeTypes, defineNode, distributeNodes, paletteDropHandlers, reconnectEdge2 as reconnectEdge, useFlowEditor, useFlowEditorOptional };
+export { ActionNode, ConfigFieldRenderer, DecisionNode, FlowCanvas, FlowEditor, FlowRunControls, FlowRunFeed, NodeConfigPanel, NodePalette, NodePort, NodeShell, OutputNode, SubgraphNode, TriggerNode, alignNodes, cloneSubgraph, defaultNodeTypes, defineNode, distributeNodes, paletteDropHandlers, reconnectEdge2 as reconnectEdge };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map