@particle-academy/fancy-flow 0.52.0 → 0.54.0

package/dist/index.d.cts

@@ -5,8 +5,8 @@ import { ConnectionValidatorOptions } from './registry/index.cjs';
 export { ANY_PORT_TYPE, BUILTIN_KINDS, PortCompatibility, RegistryNode, RichInputAdapter, RichInputPreview, buildNodeTypes, createConnectionValidator, defaultPortCompatibility, getRichInputAdapter, isRichInputEnabled, onRichInputAdapterChanged, registerBuiltinKinds, registerRichInputAdapter, resolveNodePorts, resolvePortSpec } from './registry/index.cjs';
 import { a as FlowNode, F as FlowGraph, g as NodeRunStatus, E as ExecutorRegistry } from './types-JFYjPJAG.cjs';
 export { A as ActionNodeData, B as BaseNodeData, D as DecisionNodeData, d as FlowEdge, e as FlowNodeData, f as FlowNodeKind, N as NodeExecutor, h as NoteNodeData, O as OutputNodeData, P as PortDescriptor, R as RunEvent, S as SubgraphNodeData, T as TriggerNodeData } from './types-JFYjPJAG.cjs';
-import { C as ConfigFieldRenderFn } from './ConfigFieldRenderer-Bc9Txnql.cjs';
-export { a as ConfigFieldRenderContext, b as ConfigFieldRenderer, c as ConfigFieldRendererProps } from './ConfigFieldRenderer-Bc9Txnql.cjs';
+import { C as ConfigFieldRenderFn, H as HumanFieldRenderers } from './HumanPrompt-CPl-Spmp.cjs';
+export { a as ConfigFieldRenderContext, b as ConfigFieldRenderer, c as ConfigFieldRendererProps } from './HumanPrompt-CPl-Spmp.cjs';
 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';
@@ -321,6 +321,17 @@ type FlowEditorProps = {
     value?: FlowGraph;
     /** Executor registry passed to runFlow. Each kind name maps to an executor. */
     executors?: ExecutorRegistry;
+    /**
+     * Host controls for the `user_input` / `human_approval` pause form, keyed by
+     * canonical field type. A renderer returning `null` declines that field and
+     * falls through to the built-in, so a PARTIAL map is safe to spread.
+     *
+     * The built-ins are native `--ff-*`-themed elements because react-fancy is an
+     * OPTIONAL peer and this component ships in the main entry. A host that has
+     * react-fancy opts into its primitives with
+     * `humanFieldRenderers` from `@particle-academy/fancy-flow/fields/react-fancy`.
+     */
+    humanFieldRenderers?: HumanFieldRenderers;
     /** Saved metadata for export. */
     metadata?: WorkflowMetadata;
     /** Show the palette sidebar. Default true. */

package/dist/index.d.ts

@@ -5,8 +5,8 @@ import { ConnectionValidatorOptions } from './registry/index.js';
 export { ANY_PORT_TYPE, BUILTIN_KINDS, PortCompatibility, RegistryNode, RichInputAdapter, RichInputPreview, buildNodeTypes, createConnectionValidator, defaultPortCompatibility, getRichInputAdapter, isRichInputEnabled, onRichInputAdapterChanged, registerBuiltinKinds, registerRichInputAdapter, resolveNodePorts, resolvePortSpec } from './registry/index.js';
 import { a as FlowNode, F as FlowGraph, g as NodeRunStatus, E as ExecutorRegistry } from './types-JFYjPJAG.js';
 export { A as ActionNodeData, B as BaseNodeData, D as DecisionNodeData, d as FlowEdge, e as FlowNodeData, f as FlowNodeKind, N as NodeExecutor, h as NoteNodeData, O as OutputNodeData, P as PortDescriptor, R as RunEvent, S as SubgraphNodeData, T as TriggerNodeData } from './types-JFYjPJAG.js';
-import { C as ConfigFieldRenderFn } from './ConfigFieldRenderer-Bt3RGT7Z.js';
-export { a as ConfigFieldRenderContext, b as ConfigFieldRenderer, c as ConfigFieldRendererProps } from './ConfigFieldRenderer-Bt3RGT7Z.js';
+import { C as ConfigFieldRenderFn, H as HumanFieldRenderers } from './HumanPrompt-DlJSFi3F.js';
+export { a as ConfigFieldRenderContext, b as ConfigFieldRenderer, c as ConfigFieldRendererProps } from './HumanPrompt-DlJSFi3F.js';
 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';
@@ -321,6 +321,17 @@ type FlowEditorProps = {
     value?: FlowGraph;
     /** Executor registry passed to runFlow. Each kind name maps to an executor. */
     executors?: ExecutorRegistry;
+    /**
+     * Host controls for the `user_input` / `human_approval` pause form, keyed by
+     * canonical field type. A renderer returning `null` declines that field and
+     * falls through to the built-in, so a PARTIAL map is safe to spread.
+     *
+     * The built-ins are native `--ff-*`-themed elements because react-fancy is an
+     * OPTIONAL peer and this component ships in the main entry. A host that has
+     * react-fancy opts into its primitives with
+     * `humanFieldRenderers` from `@particle-academy/fancy-flow/fields/react-fancy`.
+     */
+    humanFieldRenderers?: HumanFieldRenderers;
     /** Saved metadata for export. */
     metadata?: WorkflowMetadata;
     /** Show the palette sidebar. Default true. */

package/dist/index.js

@@ -1,16 +1,16 @@
-import { removeNodes, removeEdges, cloneSubgraph, alignNodes, distributeNodes, reconnectEdge, assignToLane, removeFromLane, duplicateNode, setEdgeLabel, FlowCanvas } from './chunk-PWIHOR57.js';
-export { ActionNode, DecisionNode, FlowCanvas, FlowViewer, NodeShell, OutputNode, SubgraphNode, TriggerNode, alignNodes, cloneSubgraph, defaultNodeTypes, distributeNodes, reconnectEdge } from './chunk-PWIHOR57.js';
-import { useFlowState, useFlowRun, useFlowHistory, applyOutputsToNodes, applyStatusesToNodes } from './chunk-PEX3ZGCO.js';
-export { applyOutputsToNodes, applyStatusesToNodes, createHistory, useFlowHistory, useFlowRun, useFlowState } from './chunk-PEX3ZGCO.js';
-export { runCohort } from './chunk-RR7A6IUW.js';
+import { removeNodes, removeEdges, cloneSubgraph, alignNodes, distributeNodes, reconnectEdge, assignToLane, removeFromLane, duplicateNode, setEdgeLabel, FlowCanvas } from './chunk-FTGVVKWX.js';
+export { ActionNode, DecisionNode, FlowCanvas, FlowViewer, NodeShell, OutputNode, SubgraphNode, TriggerNode, alignNodes, cloneSubgraph, defaultNodeTypes, distributeNodes, reconnectEdge } from './chunk-FTGVVKWX.js';
+import { useFlowState, useFlowRun, useFlowHistory, applyOutputsToNodes, applyStatusesToNodes } from './chunk-FG3C7LIG.js';
+export { applyOutputsToNodes, applyStatusesToNodes, createHistory, useFlowHistory, useFlowRun, useFlowState } from './chunk-FG3C7LIG.js';
+export { runCohort } from './chunk-WCFRKXH5.js';
 export { evaluateConfig, evaluateExpression, resolvePath, text, truthy } from './chunk-BHM5HGXH.js';
-import { buildNodeTypes } from './chunk-I7ZDPY7C.js';
-export { ANY_PORT_TYPE, RegistryNode, buildNodeTypes, createConnectionValidator, defaultPortCompatibility } from './chunk-I7ZDPY7C.js';
+import { buildNodeTypes } from './chunk-VWANLNL5.js';
+export { ANY_PORT_TYPE, RegistryNode, buildNodeTypes, createConnectionValidator, defaultPortCompatibility } from './chunk-VWANLNL5.js';
 export { LEGACY_PAUSE_PREFIXES, PAUSE_PREFIX, decodePause, encodePause, isPause, pauseForHuman } from './chunk-UEOE6B52.js';
-import { workflowToBlob, importWorkflow, exportWorkflow } from './chunk-PU3CLTAG.js';
-export { WORKFLOW_SCHEMA_URL, WORKFLOW_SCHEMA_VERSION, exportWorkflow, importWorkflow, migrateSchema, workflowToBlob } from './chunk-PU3CLTAG.js';
-import { ReactFlowProvider, useReactFlow, onNodeKindsChanged, listNodeKinds, getNodeKind, defaultConfigFor, FlowEditorProvider, addEdge, applyEdgeChanges, applyNodeChanges, Position, ensureBuiltinKinds, validateConfig, categoryAccent, Handle } from './chunk-JOXMAWAI.js';
-export { BUILTIN_KINDS, LaneNode, NoteNode, categoryAccent, clearNodeKindOverrides, defaultConfigFor, ensureBuiltinKinds, getNodeKind, listNodeKinds, onNodeKindsChanged, overrideNodeKind, registerBuiltinKinds, registerNodeKind, resolveNodePorts, resolvePortSpec, runFlow, useFlowEditor, useFlowEditorOptional, validateConfig } from './chunk-JOXMAWAI.js';
+import { workflowToBlob, importWorkflow, exportWorkflow } from './chunk-FH6MWLKD.js';
+export { WORKFLOW_SCHEMA_URL, WORKFLOW_SCHEMA_VERSION, exportWorkflow, importWorkflow, migrateSchema, workflowToBlob } from './chunk-FH6MWLKD.js';
+import { ReactFlowProvider, useReactFlow, humanInputFields, onNodeKindsChanged, listNodeKinds, getNodeKind, defaultConfigFor, FlowEditorProvider, addEdge, applyEdgeChanges, applyNodeChanges, Position, ensureBuiltinKinds, validateConfig, categoryAccent, Handle } from './chunk-CIBW5ATA.js';
+export { BUILTIN_KINDS, LaneNode, NoteNode, categoryAccent, clearNodeKindOverrides, defaultConfigFor, ensureBuiltinKinds, getNodeKind, listNodeKinds, onNodeKindsChanged, overrideNodeKind, registerBuiltinKinds, registerNodeKind, resolveNodePorts, resolvePortSpec, runFlow, useFlowEditor, useFlowEditorOptional, validateConfig } from './chunk-CIBW5ATA.js';
 import { getRichInputAdapter } from './chunk-F5RPRB7A.js';
 export { RichInputPreview, getRichInputAdapter, isRichInputEnabled, onRichInputAdapterChanged, registerRichInputAdapter } from './chunk-F5RPRB7A.js';
 import './chunk-USL4FMFU.js';
@@ -974,27 +974,35 @@ 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 }];
-}
+var INPUT_TYPE = {
+  text: "text",
+  number: "number",
+  date: "date",
+  datetime: "datetime-local",
+  time: "time",
+  email: "email",
+  url: "url",
+  tel: "tel",
+  password: "password"
+};
 function initialValues(fields) {
   const v = {};
-  for (const f of fields) v[f.key] = f.type === "switch" ? !!f.default : f.default ?? "";
+  for (const f of fields) {
+    if (f.type === "switch") {
+      v[f.key] = !!f.default;
+    } else if (f.type === "number") {
+      v[f.key] = typeof f.default === "number" ? f.default : f.default === void 0 || f.default === "" ? "" : Number(f.default);
+    } else {
+      v[f.key] = f.default ?? "";
+    }
+  }
   return v;
 }
-function HumanPrompt({ request, onCancel }) {
+function HumanPrompt({
+  request,
+  onCancel,
+  fieldRenderers
+}) {
   const firstRef = useRef(null);
   useEffect(() => {
     firstRef.current?.focus();
@@ -1006,7 +1014,7 @@ function HumanPrompt({ request, onCancel }) {
   }, [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 })
+    request.kind === "approval" ? /* @__PURE__ */ jsx(ApprovalBody, { request, onCancel }) : /* @__PURE__ */ jsx(InputBody, { request, onCancel, firstRef, fieldRenderers })
   ] }) });
 }
 function ApprovalBody({ request, onCancel }) {
@@ -1022,10 +1030,13 @@ function ApprovalBody({ request, onCancel }) {
 function InputBody({
   request,
   onCancel,
-  firstRef
+  firstRef,
+  fieldRenderers
 }) {
   const [values, setValues] = useState(() => initialValues(request.fields));
   const set = (k, v) => setValues((prev) => ({ ...prev, [k]: v }));
+  const uid = useId();
+  const fieldId = (key) => `${uid}-${key}`;
   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);
@@ -1044,12 +1055,22 @@ function InputBody({
         }
       },
       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: [
+        /* @__PURE__ */ jsx("div", { className: "ff-prompt__fields", children: request.fields.map((f, i) => /* @__PURE__ */ jsxs("div", { className: "ff-prompt__field", children: [
+          /* @__PURE__ */ jsxs("label", { className: "ff-prompt__label", htmlFor: fieldId(f.key), children: [
             f.label ?? f.key,
-            f.required && /* @__PURE__ */ jsx("span", { className: "ff-prompt__req", children: " *" })
+            f.required && /* @__PURE__ */ jsx("span", { className: "ff-prompt__req", "aria-hidden": "true", children: " *" })
           ] }),
-          renderControl(f, values[f.key], (v) => set(f.key, v), i === 0 ? firstRef : void 0)
+          /* @__PURE__ */ jsx(
+            FieldControl,
+            {
+              field: f,
+              id: fieldId(f.key),
+              value: values[f.key],
+              onChange: (v) => set(f.key, v),
+              autoFocusRef: i === 0 ? firstRef : void 0,
+              renderers: fieldRenderers
+            }
+          )
         ] }, 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" }),
@@ -1059,45 +1080,74 @@ function InputBody({
     }
   );
 }
-function renderControl(f, value, onChange, ref) {
-  const common = { className: "ff-prompt__input", placeholder: f.placeholder };
-  if (f.type === "textarea") {
+function FieldControl({
+  field,
+  id,
+  value,
+  onChange,
+  autoFocusRef,
+  renderers
+}) {
+  const override = renderers?.[field.type ?? "text"];
+  if (override) {
+    const rendered = override({ field, id, value, onChange, autoFocusRef });
+    if (rendered !== null && rendered !== void 0) return /* @__PURE__ */ jsx(Fragment, { children: rendered });
+  }
+  const handle = { id, "data-ff-field": field.key };
+  if (field.type === "textarea") {
     return /* @__PURE__ */ jsx(
       "textarea",
       {
-        ...common,
-        ref,
+        ...handle,
+        className: "ff-prompt__input",
+        placeholder: field.placeholder,
+        ref: autoFocusRef,
         rows: 3,
         value: String(value ?? ""),
         onChange: (e) => onChange(e.target.value)
       }
     );
   }
-  if (f.type === "switch") {
+  if (field.type === "switch") {
     return /* @__PURE__ */ jsx(
       "input",
       {
+        ...handle,
         type: "checkbox",
         className: "ff-prompt__switch",
+        ref: autoFocusRef,
         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))
-    ] });
+  if (field.type === "select") {
+    const options = field.options ?? [];
+    return /* @__PURE__ */ jsxs(
+      "select",
+      {
+        ...handle,
+        className: "ff-prompt__input",
+        ref: autoFocusRef,
+        value: String(value ?? ""),
+        onChange: (e) => onChange(e.target.value),
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: options.length ? "Choose\u2026" : "No choices configured" }),
+          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",
+      ...handle,
+      className: "ff-prompt__input",
+      placeholder: field.placeholder,
+      ref: autoFocusRef,
+      type: INPUT_TYPE[field.type ?? "text"] ?? "text",
       value: String(value ?? ""),
-      onChange: (e) => onChange(f.type === "number" ? e.target.value === "" ? "" : Number(e.target.value) : e.target.value)
+      onChange: (e) => onChange(field.type === "number" ? e.target.value === "" ? "" : Number(e.target.value) : e.target.value)
     }
   );
 }
@@ -1130,6 +1180,7 @@ function FlowEditorInner({
   onDelete,
   onEdgeDelete,
   confirmDelete,
+  humanFieldRenderers,
   apiRef
 }) {
   const internal = useFlowState(initial);
@@ -1666,10 +1717,17 @@ function FlowEditorInner({
         }
       ),
       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();
-      } })
+      prompt && /* @__PURE__ */ jsx(
+        HumanPrompt,
+        {
+          request: prompt,
+          onCancel: () => {
+            setPrompt(null);
+            runner.cancel();
+          },
+          fieldRenderers: humanFieldRenderers
+        }
+      )
     ] }),
     showPanel && (slots.panel ? slots.panel(api) : /* @__PURE__ */ jsxs("div", { className: "ff-editor__panel-wrap", children: [
       /* @__PURE__ */ jsx(