@particle-academy/fancy-flow 0.40.4 → 0.41.0

package/dist/ConfigFieldRenderer-4xK9hzvd.d.cts

@@ -0,0 +1,84 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { a as ConfigField } from './types-cAdD1Og2.cjs';
+
+/** What a host renderer is handed. */
+type ConfigFieldRenderContext = {
+    field: ConfigField;
+    value: unknown;
+    onChange: (next: unknown) => void;
+    /** The id the panel's `<label>` points at. Put it on your control. */
+    id?: string;
+};
+/**
+ * Render one field. Return `null` to fall back to the package's own rendering,
+ * so a host can claim a type conditionally instead of reimplementing every case.
+ *
+ * Named `...Fn` because `ConfigFieldRenderer` is already the component this
+ * module exports; two things with one name in a public API is a paper cut a
+ * consumer pays for, not us.
+ */
+type ConfigFieldRenderFn = (ctx: ConfigFieldRenderContext) => ReactNode;
+type ConfigFieldRendererProps = {
+    field: ConfigField;
+    value: unknown;
+    onChange: (value: unknown) => void;
+    /**
+     * DOM id for the control this renders.
+     *
+     * Supplied by the caller rather than generated here so the panel's `<label>`
+     * can point at it — a label beside a control is not a label attached to one.
+     * Also the agent-facing handle: the Human+ contract asks that every
+     * interactive element have a stable identity so an agent targets it instead
+     * of guessing at the DOM, and until this existed nothing in the editor had
+     * one.
+     */
+    id?: string;
+    renderCredentialField?: (props: {
+        credentialType: string;
+        value: unknown;
+        onChange: (next: unknown) => void;
+    }) => ReactNode;
+    /**
+     * Editor for `document` fields. fancy-flow stores the document but never
+     * interprets it — the host owns the editing surface, exactly as it does for
+     * `credential`. This is the seam for rich human-input steps (authored pages,
+     * required reading, multi-section forms) without the package depending on
+     * any particular document model.
+     */
+    renderDocumentField?: (props: {
+        documentType?: string;
+        value: unknown;
+        onChange: (next: unknown) => void;
+    }) => ReactNode;
+    /**
+     * Host renderers keyed by field `type`.
+     *
+     * The generic form of `renderDocumentField` / `renderCredentialField`: those
+     * cover two types the package deliberately does not interpret, this covers
+     * any type at all — including one the package has never heard of.
+     *
+     * Without it, a richer field had to be rendered OUTSIDE the panel, so that
+     * node's config stopped living where every other field does. An unknown type
+     * also fell through to `default:` and rendered nothing, so the schema said the
+     * field existed and the panel showed empty space.
+     *
+     * Consulted BEFORE the built-in switch, so a host can also replace a built-in
+     * (react-fancy inputs, say) through the same seam rather than a second one.
+     */
+    fieldRenderers?: Record<string, ConfigFieldRenderFn>;
+};
+/**
+ * ConfigFieldRenderer — dispatches to the right input element per field type.
+ *
+ * Plain HTML inputs styled via the package's CSS so the package stays
+ * standalone (no react-fancy import required) and every surface stays themeable
+ * through the `--ff-*` token layer. Hosts that want react-fancy form components
+ * can supply their own field renderers via the kind's `renderPanel`.
+ *
+ * Each control carries the caller's `id` and a `data-ff-field` handle keyed by
+ * the field, so a label can point at it and an agent can find it by name.
+ */
+declare function ConfigFieldRenderer({ field, value, onChange, id, renderCredentialField, renderDocumentField, fieldRenderers, }: ConfigFieldRendererProps): react.JSX.Element | null;
+
+export { type ConfigFieldRenderFn as C, type ConfigFieldRenderContext as a, ConfigFieldRenderer as b, type ConfigFieldRendererProps as c };

package/dist/ConfigFieldRenderer-D2TejNY1.d.ts

@@ -0,0 +1,84 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { a as ConfigField } from './types-Cf75IbxY.js';
+
+/** What a host renderer is handed. */
+type ConfigFieldRenderContext = {
+    field: ConfigField;
+    value: unknown;
+    onChange: (next: unknown) => void;
+    /** The id the panel's `<label>` points at. Put it on your control. */
+    id?: string;
+};
+/**
+ * Render one field. Return `null` to fall back to the package's own rendering,
+ * so a host can claim a type conditionally instead of reimplementing every case.
+ *
+ * Named `...Fn` because `ConfigFieldRenderer` is already the component this
+ * module exports; two things with one name in a public API is a paper cut a
+ * consumer pays for, not us.
+ */
+type ConfigFieldRenderFn = (ctx: ConfigFieldRenderContext) => ReactNode;
+type ConfigFieldRendererProps = {
+    field: ConfigField;
+    value: unknown;
+    onChange: (value: unknown) => void;
+    /**
+     * DOM id for the control this renders.
+     *
+     * Supplied by the caller rather than generated here so the panel's `<label>`
+     * can point at it — a label beside a control is not a label attached to one.
+     * Also the agent-facing handle: the Human+ contract asks that every
+     * interactive element have a stable identity so an agent targets it instead
+     * of guessing at the DOM, and until this existed nothing in the editor had
+     * one.
+     */
+    id?: string;
+    renderCredentialField?: (props: {
+        credentialType: string;
+        value: unknown;
+        onChange: (next: unknown) => void;
+    }) => ReactNode;
+    /**
+     * Editor for `document` fields. fancy-flow stores the document but never
+     * interprets it — the host owns the editing surface, exactly as it does for
+     * `credential`. This is the seam for rich human-input steps (authored pages,
+     * required reading, multi-section forms) without the package depending on
+     * any particular document model.
+     */
+    renderDocumentField?: (props: {
+        documentType?: string;
+        value: unknown;
+        onChange: (next: unknown) => void;
+    }) => ReactNode;
+    /**
+     * Host renderers keyed by field `type`.
+     *
+     * The generic form of `renderDocumentField` / `renderCredentialField`: those
+     * cover two types the package deliberately does not interpret, this covers
+     * any type at all — including one the package has never heard of.
+     *
+     * Without it, a richer field had to be rendered OUTSIDE the panel, so that
+     * node's config stopped living where every other field does. An unknown type
+     * also fell through to `default:` and rendered nothing, so the schema said the
+     * field existed and the panel showed empty space.
+     *
+     * Consulted BEFORE the built-in switch, so a host can also replace a built-in
+     * (react-fancy inputs, say) through the same seam rather than a second one.
+     */
+    fieldRenderers?: Record<string, ConfigFieldRenderFn>;
+};
+/**
+ * ConfigFieldRenderer — dispatches to the right input element per field type.
+ *
+ * Plain HTML inputs styled via the package's CSS so the package stays
+ * standalone (no react-fancy import required) and every surface stays themeable
+ * through the `--ff-*` token layer. Hosts that want react-fancy form components
+ * can supply their own field renderers via the kind's `renderPanel`.
+ *
+ * Each control carries the caller's `id` and a `data-ff-field` handle keyed by
+ * the field, so a label can point at it and an agent can find it by name.
+ */
+declare function ConfigFieldRenderer({ field, value, onChange, id, renderCredentialField, renderDocumentField, fieldRenderers, }: ConfigFieldRendererProps): react.JSX.Element | null;
+
+export { type ConfigFieldRenderFn as C, type ConfigFieldRenderContext as a, ConfigFieldRenderer as b, type ConfigFieldRendererProps as c };

package/dist/engine.d.cts

@@ -1,9 +1,9 @@
 export { C as CohortGuard, a as CohortOptions, b as CohortPolicy, c as CohortResult, R as RunOptions, d as RunResult, r as runCohort, e as runFlow } from './run-cohort-Bjv2ZU6g.cjs';
 import { F as FlowGraph, R as RunEvent, N as NodeExecutor } from './types-sOmpCitB.cjs';
 export { A as ActionNodeData, B as BaseNodeData, D as DecisionNodeData, E as ExecutorRegistry, a as FlowEdge, b as FlowNode, c as FlowNodeData, d as FlowNodeKind, e as NodeRunStatus, f as NoteNodeData, O as OutputNodeData, P as PortDescriptor, S as SubgraphNodeData, T as TriggerNodeData } from './types-sOmpCitB.cjs';
-export { d as defaultConfigFor, g as getNodeKind, k as kindIds, l as listNodeKinds, r as registerNodeKind, a as resolveKindId, v as validateConfig } from './registry-BADFn97n.cjs';
-import { P as PauseAwaiting } from './types-D8Dezh9v.cjs';
-export { C as CapabilityRequirement, a as ConfigField, L as LEGACY_PAUSE_PREFIXES, M as ManifestProblem, b as ManifestValidation, N as NODE_MANIFEST_SCHEMA_VERSION, c as NodeCategory, d as NodeKindDefinition, e as NodePackageManifest, f as NodeRuntimeId, g as NodeRuntimeSpec, h as PAUSE_PREFIX, i as PauseSignal, j as PortSpec, S as SideEffects, k as checkCapabilities, l as checkRuntimeSupport, m as decodePause, n as encodePause, o as isPause, p as pauseForHuman, s as satisfiesRange, v as validateNodeManifest } from './types-D8Dezh9v.cjs';
+export { d as defaultConfigFor, g as getNodeKind, k as kindIds, l as listNodeKinds, r as registerNodeKind, a as resolveKindId, v as validateConfig } from './registry-BNyT66SS.cjs';
+import { P as PauseAwaiting } from './types-cAdD1Og2.cjs';
+export { C as CapabilityRequirement, a as ConfigField, L as LEGACY_PAUSE_PREFIXES, M as ManifestProblem, b as ManifestValidation, N as NODE_MANIFEST_SCHEMA_VERSION, c as NodeCategory, d as NodeKindDefinition, e as NodePackageManifest, f as NodeRuntimeId, g as NodeRuntimeSpec, h as PAUSE_PREFIX, i as PauseSignal, j as PortSpec, S as SideEffects, k as checkCapabilities, l as checkRuntimeSupport, m as decodePause, n as encodePause, o as isPause, p as pauseForHuman, s as satisfiesRange, v as validateNodeManifest } from './types-cAdD1Og2.cjs';
 import '@xyflow/react';
 import 'react';
 

package/dist/engine.d.ts

@@ -1,9 +1,9 @@
 export { C as CohortGuard, a as CohortOptions, b as CohortPolicy, c as CohortResult, R as RunOptions, d as RunResult, r as runCohort, e as runFlow } from './run-cohort-BnP6ErHi.js';
 import { F as FlowGraph, R as RunEvent, N as NodeExecutor } from './types-sOmpCitB.js';
 export { A as ActionNodeData, B as BaseNodeData, D as DecisionNodeData, E as ExecutorRegistry, a as FlowEdge, b as FlowNode, c as FlowNodeData, d as FlowNodeKind, e as NodeRunStatus, f as NoteNodeData, O as OutputNodeData, P as PortDescriptor, S as SubgraphNodeData, T as TriggerNodeData } from './types-sOmpCitB.js';
-export { d as defaultConfigFor, g as getNodeKind, k as kindIds, l as listNodeKinds, r as registerNodeKind, a as resolveKindId, v as validateConfig } from './registry-DYbFLEcW.js';
-import { P as PauseAwaiting } from './types-D6lsIGoe.js';
-export { C as CapabilityRequirement, a as ConfigField, L as LEGACY_PAUSE_PREFIXES, M as ManifestProblem, b as ManifestValidation, N as NODE_MANIFEST_SCHEMA_VERSION, c as NodeCategory, d as NodeKindDefinition, e as NodePackageManifest, f as NodeRuntimeId, g as NodeRuntimeSpec, h as PAUSE_PREFIX, i as PauseSignal, j as PortSpec, S as SideEffects, k as checkCapabilities, l as checkRuntimeSupport, m as decodePause, n as encodePause, o as isPause, p as pauseForHuman, s as satisfiesRange, v as validateNodeManifest } from './types-D6lsIGoe.js';
+export { d as defaultConfigFor, g as getNodeKind, k as kindIds, l as listNodeKinds, r as registerNodeKind, a as resolveKindId, v as validateConfig } from './registry-CS7kjMto.js';
+import { P as PauseAwaiting } from './types-Cf75IbxY.js';
+export { C as CapabilityRequirement, a as ConfigField, L as LEGACY_PAUSE_PREFIXES, M as ManifestProblem, b as ManifestValidation, N as NODE_MANIFEST_SCHEMA_VERSION, c as NodeCategory, d as NodeKindDefinition, e as NodePackageManifest, f as NodeRuntimeId, g as NodeRuntimeSpec, h as PAUSE_PREFIX, i as PauseSignal, j as PortSpec, S as SideEffects, k as checkCapabilities, l as checkRuntimeSupport, m as decodePause, n as encodePause, o as isPause, p as pauseForHuman, s as satisfiesRange, v as validateNodeManifest } from './types-Cf75IbxY.js';
 import '@xyflow/react';
 import 'react';
 

package/dist/fields/react-fancy.cjs

@@ -0,0 +1,40 @@
+'use strict';
+
+var reactFancy = require('@particle-academy/react-fancy');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/fields/react-fancy.tsx
+var jsonFieldRenderer = ({
+  field,
+  value,
+  onChange,
+  id
+}) => {
+  if (field.type !== "json") return null;
+  return (
+    // JSX rather than `createElement` for one concrete reason: `data-*` props
+    // are special-cased by JSX but hit excess-property checking in a
+    // `createElement` object literal, so the agent handle would not typecheck.
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactFancy.JsonEditor,
+      {
+        id,
+        "data-ff-field": field.key,
+        value: value ?? {},
+        onChange: (next) => onChange(next),
+        keyMap: field.keyMap,
+        mode: "edit",
+        size: "sm",
+        rootLabel: field.label
+      }
+    )
+  );
+};
+var reactFancyFieldRenderers = {
+  json: jsonFieldRenderer
+};
+
+exports.jsonFieldRenderer = jsonFieldRenderer;
+exports.reactFancyFieldRenderers = reactFancyFieldRenderers;
+//# sourceMappingURL=react-fancy.cjs.map
+//# sourceMappingURL=react-fancy.cjs.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,20 @@
+import { C as ConfigFieldRenderFn } from '../ConfigFieldRenderer-4xK9hzvd.cjs';
+import 'react';
+import '../types-cAdD1Og2.cjs';
+import '@xyflow/react';
+import '../types-sOmpCitB.cjs';
+
+/**
+ * Render a `json` config field as a react-fancy `JsonEditor`.
+ *
+ * Returns `null` for every other field type — the seam treats `null` as "not
+ * mine", so this can be handed over wholesale without claiming controls it has
+ * no business replacing.
+ */
+declare const jsonFieldRenderer: ConfigFieldRenderFn;
+/**
+ * The full renderer map. Spread it to add your own types alongside.
+ */
+declare const reactFancyFieldRenderers: Record<string, ConfigFieldRenderFn>;
+
+export { jsonFieldRenderer, reactFancyFieldRenderers };

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

@@ -0,0 +1,20 @@
+import { C as ConfigFieldRenderFn } from '../ConfigFieldRenderer-D2TejNY1.js';
+import 'react';
+import '../types-Cf75IbxY.js';
+import '@xyflow/react';
+import '../types-sOmpCitB.js';
+
+/**
+ * Render a `json` config field as a react-fancy `JsonEditor`.
+ *
+ * Returns `null` for every other field type — the seam treats `null` as "not
+ * mine", so this can be handed over wholesale without claiming controls it has
+ * no business replacing.
+ */
+declare const jsonFieldRenderer: ConfigFieldRenderFn;
+/**
+ * The full renderer map. Spread it to add your own types alongside.
+ */
+declare const reactFancyFieldRenderers: Record<string, ConfigFieldRenderFn>;
+
+export { jsonFieldRenderer, reactFancyFieldRenderers };

package/dist/fields/react-fancy.js

@@ -0,0 +1,37 @@
+import { JsonEditor } from '@particle-academy/react-fancy';
+import { jsx } from 'react/jsx-runtime';
+
+// src/fields/react-fancy.tsx
+var jsonFieldRenderer = ({
+  field,
+  value,
+  onChange,
+  id
+}) => {
+  if (field.type !== "json") return null;
+  return (
+    // JSX rather than `createElement` for one concrete reason: `data-*` props
+    // are special-cased by JSX but hit excess-property checking in a
+    // `createElement` object literal, so the agent handle would not typecheck.
+    /* @__PURE__ */ jsx(
+      JsonEditor,
+      {
+        id,
+        "data-ff-field": field.key,
+        value: value ?? {},
+        onChange: (next) => onChange(next),
+        keyMap: field.keyMap,
+        mode: "edit",
+        size: "sm",
+        rootLabel: field.label
+      }
+    )
+  );
+};
+var reactFancyFieldRenderers = {
+  json: jsonFieldRenderer
+};
+
+export { jsonFieldRenderer, reactFancyFieldRenderers };
+//# sourceMappingURL=react-fancy.js.map
+//# sourceMappingURL=react-fancy.js.map

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

@@ -0,0 +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"]}

package/dist/index.cjs

@@ -12897,7 +12897,7 @@ function ConfigFieldRenderer({
         }
       );
     case "json":
-      return /* @__PURE__ */ jsxRuntime.jsx(JsonField, { value, onChange, rows: field.rows });
+      return /* @__PURE__ */ jsxRuntime.jsx(JsonField, { value, onChange, rows: field.rows, handle });
     case "expression":
       return /* @__PURE__ */ jsxRuntime.jsx(
         "textarea",
@@ -12929,6 +12929,7 @@ function ConfigFieldRenderer({
       return /* @__PURE__ */ jsxRuntime.jsx(
         RepeaterField,
         {
+          id: id2,
           field,
           value,
           onChange,
@@ -12938,7 +12939,7 @@ function ConfigFieldRenderer({
         }
       );
     case "keyvalue":
-      return /* @__PURE__ */ jsxRuntime.jsx(KeyValueField, { field, value, onChange });
+      return /* @__PURE__ */ jsxRuntime.jsx(KeyValueField, { id: id2, field, value, onChange });
     case "document":
       if (renderDocumentField) {
         return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderDocumentField({ documentType: field.documentType, value, onChange }) });
@@ -12983,6 +12984,7 @@ function ChoiceField({
   );
 }
 function RepeaterField({
+  id: id2,
   field,
   value,
   onChange,
@@ -13017,7 +13019,7 @@ function RepeaterField({
     if (typeof raw === "number" || typeof raw === "boolean") return String(raw);
     return `Item ${i + 1}`;
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ff-repeater", "data-ff-repeater": field.key, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { id: id2, role: "group", className: "ff-repeater", "data-ff-repeater": field.key, "data-ff-field": field.key, children: [
     rows.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ff-repeater__empty", children: "None yet." }),
     rows.map((row, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ff-repeater__row", "data-ff-repeater-row": i, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ff-repeater__row-head", children: [
@@ -13092,6 +13094,7 @@ function RepeaterField({
   ] });
 }
 function KeyValueField({
+  id: id2,
   field,
   value,
   onChange
@@ -13110,7 +13113,7 @@ function KeyValueField({
   const setVal = (i, val) => commit(entries.map(([k2, v2], idx) => idx === i ? [k2, val] : [k2, v2]));
   const remove2 = (i) => commit(entries.filter((_2, idx) => idx !== i));
   const add = () => commit([...entries, ["", ""]]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ff-keyvalue", "data-ff-keyvalue": field.key, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { id: id2, role: "group", className: "ff-keyvalue", "data-ff-keyvalue": field.key, "data-ff-field": field.key, children: [
     entries.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ff-keyvalue__head", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: field.keyLabel ?? "Key" }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: field.valueLabel ?? "Value" }),
@@ -13166,34 +13169,76 @@ function KeyValueField({
     ] })
   ] });
 }
-function JsonField({ value, onChange, rows }) {
-  const initial = ReactExports.useMemo(() => {
+function JsonField({
+  value,
+  onChange,
+  rows,
+  handle
+}) {
+  const serialized = ReactExports.useMemo(() => {
     try {
       return value === void 0 ? "" : JSON.stringify(value, null, 2);
     } catch {
       return "";
     }
   }, [value]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "textarea",
-    {
-      className: "ff-panel__input ff-panel__input--json",
-      rows: rows ?? 6,
-      defaultValue: initial,
-      spellCheck: false,
-      onBlur: (e) => {
-        const text = e.target.value.trim();
-        if (text === "") {
-          onChange(void 0);
-          return;
-        }
-        try {
-          onChange(JSON.parse(text));
-        } catch {
+  const [text, setText] = ReactExports.useState(serialized);
+  const [error, setError] = ReactExports.useState(null);
+  const [touched, setTouched] = ReactExports.useState(false);
+  const lastProps = ReactExports.useRef(serialized);
+  const committed = ReactExports.useRef(null);
+  if (serialized !== lastProps.current) {
+    lastProps.current = serialized;
+    if (serialized !== committed.current) {
+      setText(serialized);
+      setError(null);
+      setTouched(false);
+    }
+  }
+  const commit = (next) => {
+    const trimmed = next.trim();
+    if (trimmed === "") {
+      committed.current = "";
+      onChange(void 0);
+      return null;
+    }
+    try {
+      const parsed = JSON.parse(trimmed);
+      committed.current = JSON.stringify(parsed, null, 2);
+      onChange(parsed);
+      return null;
+    } catch (e) {
+      return e instanceof Error ? e.message : "Invalid JSON";
+    }
+  };
+  const errorId = handle.id ? `${handle.id}-error` : void 0;
+  const showError = touched && error !== null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        ...handle,
+        className: "ff-panel__input ff-panel__input--json",
+        rows: rows ?? 6,
+        value: text,
+        spellCheck: false,
+        "aria-invalid": showError || void 0,
+        "aria-describedby": showError ? errorId : void 0,
+        onChange: (e) => {
+          setText(e.target.value);
+          setError(commit(e.target.value));
+        },
+        onBlur: (e) => {
+          setTouched(true);
+          setError(commit(e.target.value));
         }
       }
-    }
-  );
+    ),
+    showError && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "ff-panel__issue ff-panel__issue--field", id: errorId, role: "alert", children: [
+      "\u26A0 ",
+      error
+    ] })
+  ] });
 }
 function NodeConfigPanel({
   node,
@@ -14061,6 +14106,7 @@ function FlowEditorInner({
   metadata,
   showPalette = true,
   showPanel = true,
+  fieldRenderers,
   showFeed = true,
   extraToolbar,
   actions = [],
@@ -14620,6 +14666,7 @@ function FlowEditorInner({
           className: "ff-editor__panel",
           node: api.selected,
           onChange: api.updateNode,
+          fieldRenderers,
           onDelete: builtins.delete === false ? void 0 : (n) => api.deleteNodes([n.id])
         }
       ),