@particle-academy/fancy-flow 0.53.0 → 0.54.0

package/dist/{ConfigFieldRenderer-Bc9Txnql.d.cts → HumanPrompt-CPl-Spmp.d.cts}

@@ -89,4 +89,78 @@ type ConfigFieldRendererProps = {
  */
 declare function ConfigFieldRenderer({ field, value, onChange, id, renderCredentialField, renderDocumentField, fieldRenderers, graph, nodeId, }: ConfigFieldRendererProps): react.JSX.Element | null;
 
-export { type ConfigFieldRenderFn as C, type ConfigFieldRenderContext as a, ConfigFieldRenderer as b, type ConfigFieldRendererProps as c };
+/**
+ * The field vocabulary a `user_input` node declares, and the normalizer that
+ * turns whatever was actually written into something renderable.
+ *
+ * ## Why this is a separate module from `HumanPrompt.tsx`
+ *
+ * `src/registry/builtin.ts` needs `humanFieldType` for the `user_input` kind's
+ * `outputShape`, and `builtin.ts` is in the import graph of the `/engine`
+ * entry — the one `tests/core-nodes.test.ts` guards as React-free so a queue
+ * worker or a CLI can register kinds without dragging React in. Importing the
+ * modal's `.tsx` from there put a React module on that path and left the guard
+ * standing only because treeshaking happened to drop it.
+ *
+ * Pure functions over plain data, in a `.ts` file, so the headless path cannot
+ * regress on a future edit to the component.
+ */
+/**
+ * The control a field renders as, after {@link humanInputFields} has resolved
+ * whatever the author, a peer runtime or an agent actually wrote.
+ *
+ * These are the CANONICAL names. The vocabulary an author may write is wider —
+ * see {@link HUMAN_FIELD_TYPE_ALIASES} — because a `fields` array arrives from
+ * three places (the config panel, a hand-written workflow JSON, and the PHP /
+ * Python runtimes) and each has its own habits for spelling "boolean".
+ */
+type HumanFieldType = "text" | "textarea" | "number" | "select" | "switch" | "date" | "datetime" | "time" | "email" | "url" | "tel" | "password";
+/** One choice in a `select` field, after normalization. */
+type HumanFieldOption = {
+    value: string;
+    label: string;
+};
+/** A field the input modal renders. Mirrors a `user_input` `fields` row. */
+type HumanField = {
+    key: string;
+    label?: string;
+    type?: HumanFieldType;
+    required?: boolean;
+    placeholder?: string;
+    options?: HumanFieldOption[];
+    default?: unknown;
+};
+
+/** What a host renderer is handed for one field. */
+type HumanFieldRenderContext = {
+    field: HumanField;
+    /** The id the field's `<label>` points at — put it on your control. */
+    id: string;
+    value: unknown;
+    onChange: (v: unknown) => void;
+    /** Present only on the first field; attach it so the modal autofocuses. */
+    autoFocusRef?: React.RefObject<HTMLElement | null>;
+};
+/**
+ * Render one field, or return `null` to decline it.
+ *
+ * `null` means "not mine" and falls through to the built-in control. That is
+ * what makes a PARTIAL map safe to spread: a host handing over someone else's
+ * renderers does not silently lose every type that map does not cover.
+ */
+type HumanFieldRenderFn = (ctx: HumanFieldRenderContext) => ReactNode | null;
+/**
+ * Host overrides for pause-form controls, keyed by CANONICAL field type
+ * (`"switch"`, not `"boolean"` — aliases are normalised before the lookup, so
+ * one entry covers every spelling of that type).
+ *
+ * The built-ins are deliberately native `--ff-*`-themed elements rather than
+ * react-fancy primitives: react-fancy is an OPTIONAL peer and this modal ships
+ * in the main entry, so importing it here would break a standalone install and
+ * bypass the token layer a host themes `.ff-editor` with. This seam is how a
+ * host that HAS react-fancy gets Fancy controls anyway —
+ * `@particle-academy/fancy-flow/fields/react-fancy` exports a ready map.
+ */
+type HumanFieldRenderers = Partial<Record<HumanFieldType, HumanFieldRenderFn>>;
+
+export { type ConfigFieldRenderFn as C, type HumanFieldRenderers as H, type ConfigFieldRenderContext as a, ConfigFieldRenderer as b, type ConfigFieldRendererProps as c };

package/dist/{ConfigFieldRenderer-Bt3RGT7Z.d.ts → HumanPrompt-DlJSFi3F.d.ts}

@@ -89,4 +89,78 @@ type ConfigFieldRendererProps = {
  */
 declare function ConfigFieldRenderer({ field, value, onChange, id, renderCredentialField, renderDocumentField, fieldRenderers, graph, nodeId, }: ConfigFieldRendererProps): react.JSX.Element | null;
 
-export { type ConfigFieldRenderFn as C, type ConfigFieldRenderContext as a, ConfigFieldRenderer as b, type ConfigFieldRendererProps as c };
+/**
+ * The field vocabulary a `user_input` node declares, and the normalizer that
+ * turns whatever was actually written into something renderable.
+ *
+ * ## Why this is a separate module from `HumanPrompt.tsx`
+ *
+ * `src/registry/builtin.ts` needs `humanFieldType` for the `user_input` kind's
+ * `outputShape`, and `builtin.ts` is in the import graph of the `/engine`
+ * entry — the one `tests/core-nodes.test.ts` guards as React-free so a queue
+ * worker or a CLI can register kinds without dragging React in. Importing the
+ * modal's `.tsx` from there put a React module on that path and left the guard
+ * standing only because treeshaking happened to drop it.
+ *
+ * Pure functions over plain data, in a `.ts` file, so the headless path cannot
+ * regress on a future edit to the component.
+ */
+/**
+ * The control a field renders as, after {@link humanInputFields} has resolved
+ * whatever the author, a peer runtime or an agent actually wrote.
+ *
+ * These are the CANONICAL names. The vocabulary an author may write is wider —
+ * see {@link HUMAN_FIELD_TYPE_ALIASES} — because a `fields` array arrives from
+ * three places (the config panel, a hand-written workflow JSON, and the PHP /
+ * Python runtimes) and each has its own habits for spelling "boolean".
+ */
+type HumanFieldType = "text" | "textarea" | "number" | "select" | "switch" | "date" | "datetime" | "time" | "email" | "url" | "tel" | "password";
+/** One choice in a `select` field, after normalization. */
+type HumanFieldOption = {
+    value: string;
+    label: string;
+};
+/** A field the input modal renders. Mirrors a `user_input` `fields` row. */
+type HumanField = {
+    key: string;
+    label?: string;
+    type?: HumanFieldType;
+    required?: boolean;
+    placeholder?: string;
+    options?: HumanFieldOption[];
+    default?: unknown;
+};
+
+/** What a host renderer is handed for one field. */
+type HumanFieldRenderContext = {
+    field: HumanField;
+    /** The id the field's `<label>` points at — put it on your control. */
+    id: string;
+    value: unknown;
+    onChange: (v: unknown) => void;
+    /** Present only on the first field; attach it so the modal autofocuses. */
+    autoFocusRef?: React.RefObject<HTMLElement | null>;
+};
+/**
+ * Render one field, or return `null` to decline it.
+ *
+ * `null` means "not mine" and falls through to the built-in control. That is
+ * what makes a PARTIAL map safe to spread: a host handing over someone else's
+ * renderers does not silently lose every type that map does not cover.
+ */
+type HumanFieldRenderFn = (ctx: HumanFieldRenderContext) => ReactNode | null;
+/**
+ * Host overrides for pause-form controls, keyed by CANONICAL field type
+ * (`"switch"`, not `"boolean"` — aliases are normalised before the lookup, so
+ * one entry covers every spelling of that type).
+ *
+ * The built-ins are deliberately native `--ff-*`-themed elements rather than
+ * react-fancy primitives: react-fancy is an OPTIONAL peer and this modal ships
+ * in the main entry, so importing it here would break a standalone install and
+ * bypass the token layer a host themes `.ff-editor` with. This seam is how a
+ * host that HAS react-fancy gets Fancy controls anyway —
+ * `@particle-academy/fancy-flow/fields/react-fancy` exports a ready map.
+ */
+type HumanFieldRenderers = Partial<Record<HumanFieldType, HumanFieldRenderFn>>;
+
+export { type ConfigFieldRenderFn as C, type HumanFieldRenderers as H, type ConfigFieldRenderContext as a, ConfigFieldRenderer as b, type ConfigFieldRendererProps as c };

package/dist/fields/react-fancy.cjs

@@ -33,7 +33,73 @@ var jsonFieldRenderer = ({
 var reactFancyFieldRenderers = {
   json: jsonFieldRenderer
 };
+var humanFieldRenderers = {
+  text: ({ field, id, value, onChange, autoFocusRef }) => /* @__PURE__ */ jsxRuntime.jsx(
+    reactFancy.Input,
+    {
+      id,
+      "data-ff-field": field.key,
+      ref: autoFocusRef,
+      placeholder: field.placeholder,
+      value: String(value ?? ""),
+      onValueChange: onChange
+    }
+  ),
+  textarea: ({ field, id, value, onChange, autoFocusRef }) => /* @__PURE__ */ jsxRuntime.jsx(
+    reactFancy.Textarea,
+    {
+      id,
+      "data-ff-field": field.key,
+      ref: autoFocusRef,
+      placeholder: field.placeholder,
+      rows: 3,
+      value: String(value ?? ""),
+      onValueChange: onChange
+    }
+  ),
+  number: ({ field, id, value, onChange, autoFocusRef }) => /* @__PURE__ */ jsxRuntime.jsx(
+    reactFancy.Input,
+    {
+      id,
+      "data-ff-field": field.key,
+      ref: autoFocusRef,
+      type: "number",
+      placeholder: field.placeholder,
+      value: String(value ?? ""),
+      onValueChange: (v) => onChange(v === "" ? "" : Number(v))
+    }
+  ),
+  select: ({ field, id, value, onChange }) => /* @__PURE__ */ jsxRuntime.jsx(
+    reactFancy.Select,
+    {
+      id,
+      "data-ff-field": field.key,
+      list: (field.options ?? []).map((o) => ({ value: o.value, label: o.label })),
+      value: String(value ?? ""),
+      onValueChange: onChange
+    }
+  ),
+  switch: ({ field, id, value, onChange }) => /* @__PURE__ */ jsxRuntime.jsx(
+    reactFancy.Switch,
+    {
+      id,
+      "data-ff-field": field.key,
+      checked: !!value,
+      onCheckedChange: onChange
+    }
+  ),
+  date: ({ field, id, value, onChange }) => /* @__PURE__ */ jsxRuntime.jsx(
+    reactFancy.DatePicker,
+    {
+      id,
+      "data-ff-field": field.key,
+      value: String(value ?? ""),
+      onValueChange: onChange
+    }
+  )
+};
 
+exports.humanFieldRenderers = humanFieldRenderers;
 exports.jsonFieldRenderer = jsonFieldRenderer;
 exports.reactFancyFieldRenderers = reactFancyFieldRenderers;
 //# sourceMappingURL=react-fancy.cjs.map

package/dist/fields/react-fancy.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/fields/react-fancy.tsx"],"names":["jsx","JsonEditor"],"mappings":";;;;;;AA6CO,IAAM,oBAAyC,CAAC;AAAA,EACrD,KAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA,KAAgC;AAC9B,EAAA,IAAI,KAAA,CAAM,IAAA,KAAS,MAAA,EAAQ,OAAO,IAAA;AAElC,EAAA;AAAA;AAAA;AAAA;AAAA,oBAIEA,cAAA;AAAA,MAACC,qBAAA;AAAA,MAAA;AAAA,QAIC,EAAA;AAAA,QACA,iBAAe,KAAA,CAAM,GAAA;AAAA,QACrB,KAAA,EAAQ,SAAS,EAAC;AAAA,QAClB,QAAA,EAAU,CAAC,IAAA,KAAoB,QAAA,CAAS,IAAI,CAAA;AAAA,QAI5C,QAAQ,KAAA,CAAM,MAAA;AAAA,QACd,IAAA,EAAK,MAAA;AAAA,QACL,IAAA,EAAK,IAAA;AAAA,QACL,WAAW,KAAA,CAAM;AAAA;AAAA;AACnB;AAEJ;AAKO,IAAM,wBAAA,GAAgE;AAAA,EAC3E,IAAA,EAAM;AACR","file":"react-fancy.cjs","sourcesContent":["/**\n * `@particle-academy/fancy-flow/fields/react-fancy` — richer config fields for\n * hosts that already run react-fancy.\n *\n * ```tsx\n * import { reactFancyFieldRenderers } from \"@particle-academy/fancy-flow/fields/react-fancy\";\n *\n * <FlowEditor … fieldRenderers={reactFancyFieldRenderers} />\n * ```\n *\n * ## Why an opt-in subpath rather than the panel itself\n *\n * fancy-flow themes every surface through a `--ff-*` custom-property layer that\n * a host overrides on `.ff-editor`. react-fancy's primitives are hardcoded\n * Tailwind palette classes and read no custom properties — so building them\n * into the panel would trade the theming contract for a nicer widget, which is\n * the trade `panel-labels.test.tsx` already decided against.\n *\n * Making it a subpath keeps both: react-fancy stays an OPTIONAL peer, a\n * standalone install pays nothing, and a Tailwind host opts in with one prop.\n * Same shape as `/llm/vercel-ai` and `/rich-input`.\n *\n * ## What it currently covers\n *\n * Just `json`, because that is the only built-in whose fallback is a raw\n * textarea. The others are already purpose-built controls; replacing them would\n * be churn. This is a map, so a host can spread it and add their own:\n *\n * ```tsx\n * fieldRenderers={{ ...reactFancyFieldRenderers, \"trigger-filters\": myRenderer }}\n * ```\n */\nimport { JsonEditor, type JsonValue } from \"@particle-academy/react-fancy\";\nimport type {\n  ConfigFieldRenderContext,\n  ConfigFieldRenderFn,\n} from \"../components/NodeConfigPanel/ConfigFieldRenderer\";\n\n/**\n * Render a `json` config field as a react-fancy `JsonEditor`.\n *\n * Returns `null` for every other field type — the seam treats `null` as \"not\n * mine\", so this can be handed over wholesale without claiming controls it has\n * no business replacing.\n */\nexport const jsonFieldRenderer: ConfigFieldRenderFn = ({\n  field,\n  value,\n  onChange,\n  id,\n}: ConfigFieldRenderContext) => {\n  if (field.type !== \"json\") return null;\n\n  return (\n    // JSX rather than `createElement` for one concrete reason: `data-*` props\n    // are special-cased by JSX but hit excess-property checking in a\n    // `createElement` object literal, so the agent handle would not typecheck.\n    <JsonEditor\n      // The panel's `<label htmlFor>` points at this id, and the Human+\n      // contract wants a stable handle an agent can target without guessing at\n      // the DOM. Both reach the editor's root element via its rest spread.\n      id={id}\n      data-ff-field={field.key}\n      value={(value ?? {}) as JsonValue}\n      onChange={(next: JsonValue) => onChange(next)}\n      // `keyMap` is what makes this more than a prettier textarea: it declares\n      // a type per path, which picks the control and reports contradictions. A\n      // string by design, so it survives an MCP round-trip.\n      keyMap={field.keyMap}\n      mode=\"edit\"\n      size=\"sm\"\n      rootLabel={field.label}\n    />\n  );\n};\n\n/**\n * The full renderer map. Spread it to add your own types alongside.\n */\nexport const reactFancyFieldRenderers: Record<string, ConfigFieldRenderFn> = {\n  json: jsonFieldRenderer,\n};\n"]}
+{"version":3,"sources":["../../src/fields/react-fancy.tsx"],"names":["jsx","JsonEditor","Input","Textarea","Select","Switch","DatePicker"],"mappings":"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","file":"react-fancy.cjs","sourcesContent":["/**\n * `@particle-academy/fancy-flow/fields/react-fancy` — richer config fields for\n * hosts that already run react-fancy.\n *\n * ```tsx\n * import { reactFancyFieldRenderers } from \"@particle-academy/fancy-flow/fields/react-fancy\";\n *\n * <FlowEditor … fieldRenderers={reactFancyFieldRenderers} />\n * ```\n *\n * ## Why an opt-in subpath rather than the panel itself\n *\n * fancy-flow themes every surface through a `--ff-*` custom-property layer that\n * a host overrides on `.ff-editor`. react-fancy's primitives are hardcoded\n * Tailwind palette classes and read no custom properties — so building them\n * into the panel would trade the theming contract for a nicer widget, which is\n * the trade `panel-labels.test.tsx` already decided against.\n *\n * Making it a subpath keeps both: react-fancy stays an OPTIONAL peer, a\n * standalone install pays nothing, and a Tailwind host opts in with one prop.\n * Same shape as `/llm/vercel-ai` and `/rich-input`.\n *\n * ## What it currently covers\n *\n * Just `json`, because that is the only built-in whose fallback is a raw\n * textarea. The others are already purpose-built controls; replacing them would\n * be churn. This is a map, so a host can spread it and add their own:\n *\n * ```tsx\n * fieldRenderers={{ ...reactFancyFieldRenderers, \"trigger-filters\": myRenderer }}\n * ```\n */\nimport {\n  DatePicker,\n  Input,\n  JsonEditor,\n  Select,\n  Switch,\n  Textarea,\n  type JsonValue,\n} from \"@particle-academy/react-fancy\";\nimport type {\n  ConfigFieldRenderContext,\n  ConfigFieldRenderFn,\n} from \"../components/NodeConfigPanel/ConfigFieldRenderer\";\nimport type { HumanFieldRenderers } from \"../components/FlowEditor/HumanPrompt\";\n\n/**\n * Render a `json` config field as a react-fancy `JsonEditor`.\n *\n * Returns `null` for every other field type — the seam treats `null` as \"not\n * mine\", so this can be handed over wholesale without claiming controls it has\n * no business replacing.\n */\nexport const jsonFieldRenderer: ConfigFieldRenderFn = ({\n  field,\n  value,\n  onChange,\n  id,\n}: ConfigFieldRenderContext) => {\n  if (field.type !== \"json\") return null;\n\n  return (\n    // JSX rather than `createElement` for one concrete reason: `data-*` props\n    // are special-cased by JSX but hit excess-property checking in a\n    // `createElement` object literal, so the agent handle would not typecheck.\n    <JsonEditor\n      // The panel's `<label htmlFor>` points at this id, and the Human+\n      // contract wants a stable handle an agent can target without guessing at\n      // the DOM. Both reach the editor's root element via its rest spread.\n      id={id}\n      data-ff-field={field.key}\n      value={(value ?? {}) as JsonValue}\n      onChange={(next: JsonValue) => onChange(next)}\n      // `keyMap` is what makes this more than a prettier textarea: it declares\n      // a type per path, which picks the control and reports contradictions. A\n      // string by design, so it survives an MCP round-trip.\n      keyMap={field.keyMap}\n      mode=\"edit\"\n      size=\"sm\"\n      rootLabel={field.label}\n    />\n  );\n};\n\n/**\n * The full renderer map. Spread it to add your own types alongside.\n */\nexport const reactFancyFieldRenderers: Record<string, ConfigFieldRenderFn> = {\n  json: jsonFieldRenderer,\n};\n\n/* ------------------------------------------------------------------------- *\n * Pause-form controls\n * ------------------------------------------------------------------------- */\n\n/**\n * react-fancy controls for the `user_input` / `human_approval` pause form.\n *\n * ```tsx\n * import { humanFieldRenderers } from \"@particle-academy/fancy-flow/fields/react-fancy\";\n *\n * <FlowEditor … humanFieldRenderers={humanFieldRenderers} />\n * ```\n *\n * ## Why this is opt-in rather than the default\n *\n * Rule 2 of the suite says our surfaces compose react-fancy rather than\n * hand-rolling what a primitive already covers, and the pause form's built-ins\n * are native elements. That is not a gap in the kit — react-fancy has every\n * primitive needed — it is a PACKAGING constraint: react-fancy is an OPTIONAL\n * peer, `HumanPrompt` ships in the main entry, and importing it there would\n * make a standalone `npm install @particle-academy/fancy-flow` fail to resolve\n * at import time while bypassing the `--ff-*` token layer hosts theme\n * `.ff-editor` with.\n *\n * This map is how a host that HAS react-fancy gets the Fancy controls anyway,\n * with one prop and no cost to anyone else. Same shape and same reasoning as\n * `reactFancyFieldRenderers` above.\n *\n * ## What it covers, and what it deliberately does not\n *\n * `datetime` is absent: react-fancy's `DatePicker` is date-only, so claiming\n * the type here would render a control that silently drops the time half of a\n * value the field promised to collect. It falls through to the built-in\n * `<input type=\"datetime-local\">`, which does collect it. An honest gap beats a\n * control that looks right and loses data.\n */\nexport const humanFieldRenderers: HumanFieldRenderers = {\n  text: ({ field, id, value, onChange, autoFocusRef }) => (\n    <Input\n      id={id}\n      data-ff-field={field.key}\n      ref={autoFocusRef as React.RefObject<HTMLInputElement> | undefined}\n      placeholder={field.placeholder}\n      value={String(value ?? \"\")}\n      onValueChange={onChange}\n    />\n  ),\n\n  textarea: ({ field, id, value, onChange, autoFocusRef }) => (\n    <Textarea\n      id={id}\n      data-ff-field={field.key}\n      ref={autoFocusRef as React.RefObject<HTMLTextAreaElement> | undefined}\n      placeholder={field.placeholder}\n      rows={3}\n      value={String(value ?? \"\")}\n      onValueChange={onChange}\n    />\n  ),\n\n  number: ({ field, id, value, onChange, autoFocusRef }) => (\n    <Input\n      id={id}\n      data-ff-field={field.key}\n      ref={autoFocusRef as React.RefObject<HTMLInputElement> | undefined}\n      type=\"number\"\n      placeholder={field.placeholder}\n      value={String(value ?? \"\")}\n      // The built-in resolves a number field to a NUMBER, so this must too --\n      // the value here is what resumes the paused run, and handing the next\n      // node \"41\" where it resolved 41 before is a silent type change that no\n      // test downstream would attribute to a renderer swap.\n      onValueChange={(v) => onChange(v === \"\" ? \"\" : Number(v))}\n    />\n  ),\n\n  select: ({ field, id, value, onChange }) => (\n    <Select\n      id={id}\n      data-ff-field={field.key}\n      list={(field.options ?? []).map((o) => ({ value: o.value, label: o.label }))}\n      value={String(value ?? \"\")}\n      onValueChange={onChange}\n    />\n  ),\n\n  switch: ({ field, id, value, onChange }) => (\n    <Switch\n      id={id}\n      data-ff-field={field.key}\n      checked={!!value}\n      onCheckedChange={onChange}\n    />\n  ),\n\n  date: ({ field, id, value, onChange }) => (\n    <DatePicker\n      id={id}\n      data-ff-field={field.key}\n      value={String(value ?? \"\")}\n      onValueChange={onChange}\n    />\n  ),\n};\n\n/*\n * `time` and `datetime` are ABSENT on purpose, and for different reasons.\n *\n * `datetime`: react-fancy's `DatePicker` is date-only. Claiming the type here\n * would render a control that silently drops the time half of a value the field\n * promised to collect.\n *\n * `time`: `TimePicker` accepts NO `id` and no `data-*` passthrough --\n * `TimePickerProps` is a closed interface of nine props, none of them an\n * identifier. It therefore cannot satisfy the two handles every control in this\n * form owes: the `id` its `<label htmlFor>` points at, and the `data-ff-field`\n * an agent drives the surface by. Wrapping it in a handle-bearing div would put\n * the label on a non-focusable element, which is worse than not claiming it.\n *\n * Both fall through to the built-in `<input type=\"time\">` /\n * `<input type=\"datetime-local\">`, which do carry the handles and do collect\n * the whole value. An honest gap beats a control that looks right and loses\n * either data or its handle.\n *\n * The `TimePicker` half is a react-fancy FINDING rather than a fancy-flow\n * limitation -- per the suite's second rule, a missing primitive capability is\n * filed against the kit rather than routed around locally.\n */\n"]}

package/dist/fields/react-fancy.d.cts

@@ -1,4 +1,4 @@
-import { C as ConfigFieldRenderFn } from '../ConfigFieldRenderer-Bc9Txnql.cjs';
+import { H as HumanFieldRenderers, C as ConfigFieldRenderFn } from '../HumanPrompt-CPl-Spmp.cjs';
 import 'react';
 import '../types-JFYjPJAG.cjs';
 import '@xyflow/react';
@@ -17,5 +17,38 @@ declare const jsonFieldRenderer: ConfigFieldRenderFn;
  * The full renderer map. Spread it to add your own types alongside.
  */
 declare const reactFancyFieldRenderers: Record<string, ConfigFieldRenderFn>;
+/**
+ * react-fancy controls for the `user_input` / `human_approval` pause form.
+ *
+ * ```tsx
+ * import { humanFieldRenderers } from "@particle-academy/fancy-flow/fields/react-fancy";
+ *
+ * <FlowEditor … humanFieldRenderers={humanFieldRenderers} />
+ * ```
+ *
+ * ## Why this is opt-in rather than the default
+ *
+ * Rule 2 of the suite says our surfaces compose react-fancy rather than
+ * hand-rolling what a primitive already covers, and the pause form's built-ins
+ * are native elements. That is not a gap in the kit — react-fancy has every
+ * primitive needed — it is a PACKAGING constraint: react-fancy is an OPTIONAL
+ * peer, `HumanPrompt` ships in the main entry, and importing it there would
+ * make a standalone `npm install @particle-academy/fancy-flow` fail to resolve
+ * at import time while bypassing the `--ff-*` token layer hosts theme
+ * `.ff-editor` with.
+ *
+ * This map is how a host that HAS react-fancy gets the Fancy controls anyway,
+ * with one prop and no cost to anyone else. Same shape and same reasoning as
+ * `reactFancyFieldRenderers` above.
+ *
+ * ## What it covers, and what it deliberately does not
+ *
+ * `datetime` is absent: react-fancy's `DatePicker` is date-only, so claiming
+ * the type here would render a control that silently drops the time half of a
+ * value the field promised to collect. It falls through to the built-in
+ * `<input type="datetime-local">`, which does collect it. An honest gap beats a
+ * control that looks right and loses data.
+ */
+declare const humanFieldRenderers: HumanFieldRenderers;
 
-export { jsonFieldRenderer, reactFancyFieldRenderers };
+export { humanFieldRenderers, jsonFieldRenderer, reactFancyFieldRenderers };

package/dist/fields/react-fancy.d.ts

@@ -1,4 +1,4 @@
-import { C as ConfigFieldRenderFn } from '../ConfigFieldRenderer-Bt3RGT7Z.js';
+import { H as HumanFieldRenderers, C as ConfigFieldRenderFn } from '../HumanPrompt-DlJSFi3F.js';
 import 'react';
 import '../types-JFYjPJAG.js';
 import '@xyflow/react';
@@ -17,5 +17,38 @@ declare const jsonFieldRenderer: ConfigFieldRenderFn;
  * The full renderer map. Spread it to add your own types alongside.
  */
 declare const reactFancyFieldRenderers: Record<string, ConfigFieldRenderFn>;
+/**
+ * react-fancy controls for the `user_input` / `human_approval` pause form.
+ *
+ * ```tsx
+ * import { humanFieldRenderers } from "@particle-academy/fancy-flow/fields/react-fancy";
+ *
+ * <FlowEditor … humanFieldRenderers={humanFieldRenderers} />
+ * ```
+ *
+ * ## Why this is opt-in rather than the default
+ *
+ * Rule 2 of the suite says our surfaces compose react-fancy rather than
+ * hand-rolling what a primitive already covers, and the pause form's built-ins
+ * are native elements. That is not a gap in the kit — react-fancy has every
+ * primitive needed — it is a PACKAGING constraint: react-fancy is an OPTIONAL
+ * peer, `HumanPrompt` ships in the main entry, and importing it there would
+ * make a standalone `npm install @particle-academy/fancy-flow` fail to resolve
+ * at import time while bypassing the `--ff-*` token layer hosts theme
+ * `.ff-editor` with.
+ *
+ * This map is how a host that HAS react-fancy gets the Fancy controls anyway,
+ * with one prop and no cost to anyone else. Same shape and same reasoning as
+ * `reactFancyFieldRenderers` above.
+ *
+ * ## What it covers, and what it deliberately does not
+ *
+ * `datetime` is absent: react-fancy's `DatePicker` is date-only, so claiming
+ * the type here would render a control that silently drops the time half of a
+ * value the field promised to collect. It falls through to the built-in
+ * `<input type="datetime-local">`, which does collect it. An honest gap beats a
+ * control that looks right and loses data.
+ */
+declare const humanFieldRenderers: HumanFieldRenderers;
 
-export { jsonFieldRenderer, reactFancyFieldRenderers };
+export { humanFieldRenderers, jsonFieldRenderer, reactFancyFieldRenderers };

package/dist/fields/react-fancy.js

@@ -1,4 +1,4 @@
-import { JsonEditor } from '@particle-academy/react-fancy';
+import { JsonEditor, DatePicker, Switch, Select, Input, Textarea } from '@particle-academy/react-fancy';
 import { jsx } from 'react/jsx-runtime';
 
 // src/fields/react-fancy.tsx
@@ -31,7 +31,72 @@ var jsonFieldRenderer = ({
 var reactFancyFieldRenderers = {
   json: jsonFieldRenderer
 };
+var humanFieldRenderers = {
+  text: ({ field, id, value, onChange, autoFocusRef }) => /* @__PURE__ */ jsx(
+    Input,
+    {
+      id,
+      "data-ff-field": field.key,
+      ref: autoFocusRef,
+      placeholder: field.placeholder,
+      value: String(value ?? ""),
+      onValueChange: onChange
+    }
+  ),
+  textarea: ({ field, id, value, onChange, autoFocusRef }) => /* @__PURE__ */ jsx(
+    Textarea,
+    {
+      id,
+      "data-ff-field": field.key,
+      ref: autoFocusRef,
+      placeholder: field.placeholder,
+      rows: 3,
+      value: String(value ?? ""),
+      onValueChange: onChange
+    }
+  ),
+  number: ({ field, id, value, onChange, autoFocusRef }) => /* @__PURE__ */ jsx(
+    Input,
+    {
+      id,
+      "data-ff-field": field.key,
+      ref: autoFocusRef,
+      type: "number",
+      placeholder: field.placeholder,
+      value: String(value ?? ""),
+      onValueChange: (v) => onChange(v === "" ? "" : Number(v))
+    }
+  ),
+  select: ({ field, id, value, onChange }) => /* @__PURE__ */ jsx(
+    Select,
+    {
+      id,
+      "data-ff-field": field.key,
+      list: (field.options ?? []).map((o) => ({ value: o.value, label: o.label })),
+      value: String(value ?? ""),
+      onValueChange: onChange
+    }
+  ),
+  switch: ({ field, id, value, onChange }) => /* @__PURE__ */ jsx(
+    Switch,
+    {
+      id,
+      "data-ff-field": field.key,
+      checked: !!value,
+      onCheckedChange: onChange
+    }
+  ),
+  date: ({ field, id, value, onChange }) => /* @__PURE__ */ jsx(
+    DatePicker,
+    {
+      id,
+      "data-ff-field": field.key,
+      value: String(value ?? ""),
+      onValueChange: onChange
+    }
+  )
+};
 
-export { jsonFieldRenderer, reactFancyFieldRenderers };
+export { humanFieldRenderers, jsonFieldRenderer, reactFancyFieldRenderers };
 //# sourceMappingURL=react-fancy.js.map
 //# sourceMappingURL=react-fancy.js.map

package/dist/fields/react-fancy.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/fields/react-fancy.tsx"],"names":[],"mappings":";;;;AA6CO,IAAM,oBAAyC,CAAC;AAAA,EACrD,KAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA,KAAgC;AAC9B,EAAA,IAAI,KAAA,CAAM,IAAA,KAAS,MAAA,EAAQ,OAAO,IAAA;AAElC,EAAA;AAAA;AAAA;AAAA;AAAA,oBAIE,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QAIC,EAAA;AAAA,QACA,iBAAe,KAAA,CAAM,GAAA;AAAA,QACrB,KAAA,EAAQ,SAAS,EAAC;AAAA,QAClB,QAAA,EAAU,CAAC,IAAA,KAAoB,QAAA,CAAS,IAAI,CAAA;AAAA,QAI5C,QAAQ,KAAA,CAAM,MAAA;AAAA,QACd,IAAA,EAAK,MAAA;AAAA,QACL,IAAA,EAAK,IAAA;AAAA,QACL,WAAW,KAAA,CAAM;AAAA;AAAA;AACnB;AAEJ;AAKO,IAAM,wBAAA,GAAgE;AAAA,EAC3E,IAAA,EAAM;AACR","file":"react-fancy.js","sourcesContent":["/**\n * `@particle-academy/fancy-flow/fields/react-fancy` — richer config fields for\n * hosts that already run react-fancy.\n *\n * ```tsx\n * import { reactFancyFieldRenderers } from \"@particle-academy/fancy-flow/fields/react-fancy\";\n *\n * <FlowEditor … fieldRenderers={reactFancyFieldRenderers} />\n * ```\n *\n * ## Why an opt-in subpath rather than the panel itself\n *\n * fancy-flow themes every surface through a `--ff-*` custom-property layer that\n * a host overrides on `.ff-editor`. react-fancy's primitives are hardcoded\n * Tailwind palette classes and read no custom properties — so building them\n * into the panel would trade the theming contract for a nicer widget, which is\n * the trade `panel-labels.test.tsx` already decided against.\n *\n * Making it a subpath keeps both: react-fancy stays an OPTIONAL peer, a\n * standalone install pays nothing, and a Tailwind host opts in with one prop.\n * Same shape as `/llm/vercel-ai` and `/rich-input`.\n *\n * ## What it currently covers\n *\n * Just `json`, because that is the only built-in whose fallback is a raw\n * textarea. The others are already purpose-built controls; replacing them would\n * be churn. This is a map, so a host can spread it and add their own:\n *\n * ```tsx\n * fieldRenderers={{ ...reactFancyFieldRenderers, \"trigger-filters\": myRenderer }}\n * ```\n */\nimport { JsonEditor, type JsonValue } from \"@particle-academy/react-fancy\";\nimport type {\n  ConfigFieldRenderContext,\n  ConfigFieldRenderFn,\n} from \"../components/NodeConfigPanel/ConfigFieldRenderer\";\n\n/**\n * Render a `json` config field as a react-fancy `JsonEditor`.\n *\n * Returns `null` for every other field type — the seam treats `null` as \"not\n * mine\", so this can be handed over wholesale without claiming controls it has\n * no business replacing.\n */\nexport const jsonFieldRenderer: ConfigFieldRenderFn = ({\n  field,\n  value,\n  onChange,\n  id,\n}: ConfigFieldRenderContext) => {\n  if (field.type !== \"json\") return null;\n\n  return (\n    // JSX rather than `createElement` for one concrete reason: `data-*` props\n    // are special-cased by JSX but hit excess-property checking in a\n    // `createElement` object literal, so the agent handle would not typecheck.\n    <JsonEditor\n      // The panel's `<label htmlFor>` points at this id, and the Human+\n      // contract wants a stable handle an agent can target without guessing at\n      // the DOM. Both reach the editor's root element via its rest spread.\n      id={id}\n      data-ff-field={field.key}\n      value={(value ?? {}) as JsonValue}\n      onChange={(next: JsonValue) => onChange(next)}\n      // `keyMap` is what makes this more than a prettier textarea: it declares\n      // a type per path, which picks the control and reports contradictions. A\n      // string by design, so it survives an MCP round-trip.\n      keyMap={field.keyMap}\n      mode=\"edit\"\n      size=\"sm\"\n      rootLabel={field.label}\n    />\n  );\n};\n\n/**\n * The full renderer map. Spread it to add your own types alongside.\n */\nexport const reactFancyFieldRenderers: Record<string, ConfigFieldRenderFn> = {\n  json: jsonFieldRenderer,\n};\n"]}
+{"version":3,"sources":["../../src/fields/react-fancy.tsx"],"names":[],"mappings":"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","file":"react-fancy.js","sourcesContent":["/**\n * `@particle-academy/fancy-flow/fields/react-fancy` — richer config fields for\n * hosts that already run react-fancy.\n *\n * ```tsx\n * import { reactFancyFieldRenderers } from \"@particle-academy/fancy-flow/fields/react-fancy\";\n *\n * <FlowEditor … fieldRenderers={reactFancyFieldRenderers} />\n * ```\n *\n * ## Why an opt-in subpath rather than the panel itself\n *\n * fancy-flow themes every surface through a `--ff-*` custom-property layer that\n * a host overrides on `.ff-editor`. react-fancy's primitives are hardcoded\n * Tailwind palette classes and read no custom properties — so building them\n * into the panel would trade the theming contract for a nicer widget, which is\n * the trade `panel-labels.test.tsx` already decided against.\n *\n * Making it a subpath keeps both: react-fancy stays an OPTIONAL peer, a\n * standalone install pays nothing, and a Tailwind host opts in with one prop.\n * Same shape as `/llm/vercel-ai` and `/rich-input`.\n *\n * ## What it currently covers\n *\n * Just `json`, because that is the only built-in whose fallback is a raw\n * textarea. The others are already purpose-built controls; replacing them would\n * be churn. This is a map, so a host can spread it and add their own:\n *\n * ```tsx\n * fieldRenderers={{ ...reactFancyFieldRenderers, \"trigger-filters\": myRenderer }}\n * ```\n */\nimport {\n  DatePicker,\n  Input,\n  JsonEditor,\n  Select,\n  Switch,\n  Textarea,\n  type JsonValue,\n} from \"@particle-academy/react-fancy\";\nimport type {\n  ConfigFieldRenderContext,\n  ConfigFieldRenderFn,\n} from \"../components/NodeConfigPanel/ConfigFieldRenderer\";\nimport type { HumanFieldRenderers } from \"../components/FlowEditor/HumanPrompt\";\n\n/**\n * Render a `json` config field as a react-fancy `JsonEditor`.\n *\n * Returns `null` for every other field type — the seam treats `null` as \"not\n * mine\", so this can be handed over wholesale without claiming controls it has\n * no business replacing.\n */\nexport const jsonFieldRenderer: ConfigFieldRenderFn = ({\n  field,\n  value,\n  onChange,\n  id,\n}: ConfigFieldRenderContext) => {\n  if (field.type !== \"json\") return null;\n\n  return (\n    // JSX rather than `createElement` for one concrete reason: `data-*` props\n    // are special-cased by JSX but hit excess-property checking in a\n    // `createElement` object literal, so the agent handle would not typecheck.\n    <JsonEditor\n      // The panel's `<label htmlFor>` points at this id, and the Human+\n      // contract wants a stable handle an agent can target without guessing at\n      // the DOM. Both reach the editor's root element via its rest spread.\n      id={id}\n      data-ff-field={field.key}\n      value={(value ?? {}) as JsonValue}\n      onChange={(next: JsonValue) => onChange(next)}\n      // `keyMap` is what makes this more than a prettier textarea: it declares\n      // a type per path, which picks the control and reports contradictions. A\n      // string by design, so it survives an MCP round-trip.\n      keyMap={field.keyMap}\n      mode=\"edit\"\n      size=\"sm\"\n      rootLabel={field.label}\n    />\n  );\n};\n\n/**\n * The full renderer map. Spread it to add your own types alongside.\n */\nexport const reactFancyFieldRenderers: Record<string, ConfigFieldRenderFn> = {\n  json: jsonFieldRenderer,\n};\n\n/* ------------------------------------------------------------------------- *\n * Pause-form controls\n * ------------------------------------------------------------------------- */\n\n/**\n * react-fancy controls for the `user_input` / `human_approval` pause form.\n *\n * ```tsx\n * import { humanFieldRenderers } from \"@particle-academy/fancy-flow/fields/react-fancy\";\n *\n * <FlowEditor … humanFieldRenderers={humanFieldRenderers} />\n * ```\n *\n * ## Why this is opt-in rather than the default\n *\n * Rule 2 of the suite says our surfaces compose react-fancy rather than\n * hand-rolling what a primitive already covers, and the pause form's built-ins\n * are native elements. That is not a gap in the kit — react-fancy has every\n * primitive needed — it is a PACKAGING constraint: react-fancy is an OPTIONAL\n * peer, `HumanPrompt` ships in the main entry, and importing it there would\n * make a standalone `npm install @particle-academy/fancy-flow` fail to resolve\n * at import time while bypassing the `--ff-*` token layer hosts theme\n * `.ff-editor` with.\n *\n * This map is how a host that HAS react-fancy gets the Fancy controls anyway,\n * with one prop and no cost to anyone else. Same shape and same reasoning as\n * `reactFancyFieldRenderers` above.\n *\n * ## What it covers, and what it deliberately does not\n *\n * `datetime` is absent: react-fancy's `DatePicker` is date-only, so claiming\n * the type here would render a control that silently drops the time half of a\n * value the field promised to collect. It falls through to the built-in\n * `<input type=\"datetime-local\">`, which does collect it. An honest gap beats a\n * control that looks right and loses data.\n */\nexport const humanFieldRenderers: HumanFieldRenderers = {\n  text: ({ field, id, value, onChange, autoFocusRef }) => (\n    <Input\n      id={id}\n      data-ff-field={field.key}\n      ref={autoFocusRef as React.RefObject<HTMLInputElement> | undefined}\n      placeholder={field.placeholder}\n      value={String(value ?? \"\")}\n      onValueChange={onChange}\n    />\n  ),\n\n  textarea: ({ field, id, value, onChange, autoFocusRef }) => (\n    <Textarea\n      id={id}\n      data-ff-field={field.key}\n      ref={autoFocusRef as React.RefObject<HTMLTextAreaElement> | undefined}\n      placeholder={field.placeholder}\n      rows={3}\n      value={String(value ?? \"\")}\n      onValueChange={onChange}\n    />\n  ),\n\n  number: ({ field, id, value, onChange, autoFocusRef }) => (\n    <Input\n      id={id}\n      data-ff-field={field.key}\n      ref={autoFocusRef as React.RefObject<HTMLInputElement> | undefined}\n      type=\"number\"\n      placeholder={field.placeholder}\n      value={String(value ?? \"\")}\n      // The built-in resolves a number field to a NUMBER, so this must too --\n      // the value here is what resumes the paused run, and handing the next\n      // node \"41\" where it resolved 41 before is a silent type change that no\n      // test downstream would attribute to a renderer swap.\n      onValueChange={(v) => onChange(v === \"\" ? \"\" : Number(v))}\n    />\n  ),\n\n  select: ({ field, id, value, onChange }) => (\n    <Select\n      id={id}\n      data-ff-field={field.key}\n      list={(field.options ?? []).map((o) => ({ value: o.value, label: o.label }))}\n      value={String(value ?? \"\")}\n      onValueChange={onChange}\n    />\n  ),\n\n  switch: ({ field, id, value, onChange }) => (\n    <Switch\n      id={id}\n      data-ff-field={field.key}\n      checked={!!value}\n      onCheckedChange={onChange}\n    />\n  ),\n\n  date: ({ field, id, value, onChange }) => (\n    <DatePicker\n      id={id}\n      data-ff-field={field.key}\n      value={String(value ?? \"\")}\n      onValueChange={onChange}\n    />\n  ),\n};\n\n/*\n * `time` and `datetime` are ABSENT on purpose, and for different reasons.\n *\n * `datetime`: react-fancy's `DatePicker` is date-only. Claiming the type here\n * would render a control that silently drops the time half of a value the field\n * promised to collect.\n *\n * `time`: `TimePicker` accepts NO `id` and no `data-*` passthrough --\n * `TimePickerProps` is a closed interface of nine props, none of them an\n * identifier. It therefore cannot satisfy the two handles every control in this\n * form owes: the `id` its `<label htmlFor>` points at, and the `data-ff-field`\n * an agent drives the surface by. Wrapping it in a handle-bearing div would put\n * the label on a non-focusable element, which is worse than not claiming it.\n *\n * Both fall through to the built-in `<input type=\"time\">` /\n * `<input type=\"datetime-local\">`, which do carry the handles and do collect\n * the whole value. An honest gap beats a control that looks right and loses\n * either data or its handle.\n *\n * The `TimePicker` half is a react-fancy FINDING rather than a fancy-flow\n * limitation -- per the suite's second rule, a missing primitive capability is\n * filed against the kit rather than routed around locally.\n */\n"]}

package/dist/index.cjs

@@ -14696,7 +14696,11 @@ function initialValues(fields) {
   }
   return v2;
 }
-function HumanPrompt({ request, onCancel }) {
+function HumanPrompt({
+  request,
+  onCancel,
+  fieldRenderers
+}) {
   const firstRef = ReactExports.useRef(null);
   ReactExports.useEffect(() => {
     firstRef.current?.focus();
@@ -14708,7 +14712,7 @@ function HumanPrompt({ request, onCancel }) {
   }, [onCancel]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ff-prompt-overlay", role: "dialog", "aria-modal": "true", "aria-label": request.title, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ff-prompt", onClick: (e) => e.stopPropagation(), children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ff-prompt__title", children: request.title }),
-    request.kind === "approval" ? /* @__PURE__ */ jsxRuntime.jsx(ApprovalBody, { request, onCancel }) : /* @__PURE__ */ jsxRuntime.jsx(InputBody, { request, onCancel, firstRef })
+    request.kind === "approval" ? /* @__PURE__ */ jsxRuntime.jsx(ApprovalBody, { request, onCancel }) : /* @__PURE__ */ jsxRuntime.jsx(InputBody, { request, onCancel, firstRef, fieldRenderers })
   ] }) });
 }
 function ApprovalBody({ request, onCancel }) {
@@ -14724,7 +14728,8 @@ function ApprovalBody({ request, onCancel }) {
 function InputBody({
   request,
   onCancel,
-  firstRef
+  firstRef,
+  fieldRenderers
 }) {
   const [values, setValues] = ReactExports.useState(() => initialValues(request.fields));
   const set3 = (k2, v2) => setValues((prev) => ({ ...prev, [k2]: v2 }));
@@ -14760,7 +14765,8 @@ function InputBody({
               id: fieldId(f.key),
               value: values[f.key],
               onChange: (v2) => set3(f.key, v2),
-              autoFocusRef: i === 0 ? firstRef : void 0
+              autoFocusRef: i === 0 ? firstRef : void 0,
+              renderers: fieldRenderers
             }
           )
         ] }, f.key)) }),
@@ -14777,8 +14783,14 @@ function FieldControl({
   id: id2,
   value,
   onChange,
-  autoFocusRef
+  autoFocusRef,
+  renderers
 }) {
+  const override = renderers?.[field.type ?? "text"];
+  if (override) {
+    const rendered = override({ field, id: id2, value, onChange, autoFocusRef });
+    if (rendered !== null && rendered !== void 0) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: rendered });
+  }
   const handle = { id: id2, "data-ff-field": field.key };
   if (field.type === "textarea") {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -14866,6 +14878,7 @@ function FlowEditorInner({
   onDelete,
   onEdgeDelete,
   confirmDelete,
+  humanFieldRenderers,
   apiRef
 }) {
   const internal = useFlowState(initial);
@@ -15402,10 +15415,17 @@ function FlowEditorInner({
         }
       ),
       showFeed && (slots.feed ? slots.feed(api) : /* @__PURE__ */ jsxRuntime.jsx(FlowRunFeed, { entries: runner.feed, running: api.running, className: "ff-editor__feed" })),
-      prompt && /* @__PURE__ */ jsxRuntime.jsx(HumanPrompt, { request: prompt, onCancel: () => {
-        setPrompt(null);
-        runner.cancel();
-      } })
+      prompt && /* @__PURE__ */ jsxRuntime.jsx(
+        HumanPrompt,
+        {
+          request: prompt,
+          onCancel: () => {
+            setPrompt(null);
+            runner.cancel();
+          },
+          fieldRenderers: humanFieldRenderers
+        }
+      )
     ] }),
     showPanel && (slots.panel ? slots.panel(api) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ff-editor__panel-wrap", children: [
       /* @__PURE__ */ jsxRuntime.jsx(