@particle-academy/fancy-flow 0.40.3 → 0.41.0

package/dist/index.d.cts

@@ -1,21 +1,23 @@
 import * as react from 'react';
-import { ReactNode, CSSProperties, ComponentType } from 'react';
+import { ReactNode, CSSProperties, ComponentProps, ComponentType } from 'react';
 import { ReactFlowProps, Edge, BackgroundVariant, Connection, NodeProps, NodeTypes } from '@xyflow/react';
 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 { b as FlowNode, F as FlowGraph, e as NodeRunStatus, E as ExecutorRegistry } from './types-sOmpCitB.cjs';
 export { A as ActionNodeData, B as BaseNodeData, D as DecisionNodeData, a as FlowEdge, c as FlowNodeData, d as FlowNodeKind, N as NodeExecutor, f as NoteNodeData, O as OutputNodeData, P as PortDescriptor, R as RunEvent, S as SubgraphNodeData, T as TriggerNodeData } from './types-sOmpCitB.cjs';
+import { C as ConfigFieldRenderFn } from './ConfigFieldRenderer-4xK9hzvd.cjs';
+export { a as ConfigFieldRenderContext, b as ConfigFieldRenderer, c as ConfigFieldRendererProps } from './ConfigFieldRenderer-4xK9hzvd.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';
 export { AutoLayoutDirection } from './layout/index.cjs';
-import { c as NodeCategory, d as NodeKindDefinition, a as ConfigField } from './types-D8Dezh9v.cjs';
-export { D as DocumentConfigField, K as KeyValueConfigField, L as LEGACY_PAUSE_PREFIXES, h as PAUSE_PREFIX, P as PauseAwaiting, i as PauseSignal, j as PortSpec, R as RenderBodyContext, t as RepeaterConfigField, u as RepeaterRowField, m as decodePause, n as encodePause, o as isPause, p as pauseForHuman } from './types-D8Dezh9v.cjs';
+import { c as NodeCategory, d as NodeKindDefinition } from './types-cAdD1Og2.cjs';
+export { a as ConfigField, D as DocumentConfigField, K as KeyValueConfigField, L as LEGACY_PAUSE_PREFIXES, h as PAUSE_PREFIX, P as PauseAwaiting, i as PauseSignal, j as PortSpec, R as RenderBodyContext, t as RepeaterConfigField, u as RepeaterRowField, m as decodePause, n as encodePause, o as isPause, p as pauseForHuman } from './types-cAdD1Og2.cjs';
 export { F as FlowNodeStatus, a as FlowViewer, b as FlowViewerClassNames, c as FlowViewerProps } from './FlowViewer-nLqo7s2E.cjs';
 import { FlowRunFeedEntry } from './runtime/index.cjs';
 export { HistoryController, UseFlowHistoryReturn, UseFlowRunOptions, UseFlowRunReturn, UseFlowStateReturn, applyOutputsToNodes, applyStatusesToNodes, createHistory, useFlowHistory, useFlowRun, useFlowState } from './runtime/index.cjs';
 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';
-export { N as NodeKindPresentation, c as categoryAccent, b as clearNodeKindOverrides, d as defaultConfigFor, g as getNodeKind, l as listNodeKinds, o as onNodeKindsChanged, e as overrideNodeKind, r as registerNodeKind, v as validateConfig } from './registry-BADFn97n.cjs';
+export { N as NodeKindPresentation, c as categoryAccent, b as clearNodeKindOverrides, d as defaultConfigFor, g as getNodeKind, l as listNodeKinds, o as onNodeKindsChanged, e as overrideNodeKind, r as registerNodeKind, v as validateConfig } from './registry-BNyT66SS.cjs';
 import './capabilities-BtJQTbnw.cjs';
 
 type FlowCanvasProps = Omit<ReactFlowProps<FlowNode, Edge>, "nodes" | "edges" | "height"> & {
@@ -67,6 +69,49 @@ type FlowCanvasProps = Omit<ReactFlowProps<FlowNode, Edge>, "nodes" | "edges" |
  */
 declare function FlowCanvas({ nodes, edges, background, showControls, showMinimap, height, validateConnections, isValidConnection, colorMode, showHelperLines, zoomOnWheel, onNodesChange, toolbar, nodeTypes, edgeTypes, className, style, ...rest }: FlowCanvasProps): react.JSX.Element;
 
+type NodeConfigPanelProps = {
+    /** Currently-selected node — pass null to render the empty state. */
+    node: FlowNode | null;
+    /** Called when the user edits the node label, description, or config. */
+    onChange: (next: FlowNode) => void;
+    /**
+     * Called when the user deletes the node from the panel. When provided, the
+     * panel renders a "Delete node" button while a node is selected — so the
+     * delete affordance lives WITH the panel (a dev composing their own editor
+     * gets it for free), rather than in a host toolbar it has to re-implement.
+     */
+    onDelete?: (node: FlowNode) => void;
+    /** Label for the delete button. Default "Delete node". */
+    deleteLabel?: string;
+    /** Optional header content (e.g. close button). */
+    header?: ReactNode;
+    /** Optional credential picker hook — host renders the picker. */
+    renderCredentialField?: (props: {
+        credentialType: string;
+        value: unknown;
+        onChange: (next: unknown) => void;
+    }) => ReactNode;
+    /**
+     * Optional document editor hook — host renders the editor for `document`
+     * fields. Lets rich authored content live in node config without fancy-flow
+     * taking on a document model.
+     */
+    /** Host renderers keyed by field `type`. See {@link ConfigFieldRenderer}. */
+    fieldRenderers?: Record<string, ConfigFieldRenderFn>;
+    renderDocumentField?: (props: {
+        documentType?: string;
+        value: unknown;
+        onChange: (next: unknown) => void;
+    }) => ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+};
+/**
+ * NodeConfigPanel — schema-driven form for the selected node. Defers to
+ * `kind.renderPanel` if the kind opts out of the auto-form.
+ */
+declare function NodeConfigPanel({ node, onChange, onDelete, deleteLabel, header, renderCredentialField, renderDocumentField, fieldRenderers, className, style, }: NodeConfigPanelProps): react.JSX.Element;
+
 /**
  * Clone a set of nodes AND the edges internal to that set, remapping every id.
  * This is the piece `duplicateNode` lacks: a copy/paste (or duplicate-selection)
@@ -273,6 +318,20 @@ type FlowEditorProps = {
     showPalette?: boolean;
     /** Show the config panel sidebar. Default true. */
     showPanel?: boolean;
+    /**
+     * Host renderers for config-field types, keyed by `type`, handed straight to
+     * `NodeConfigPanel`.
+     *
+     * Use it to claim a type the package renders plainly — the built-in `json`
+     * field is a bare textarea, and
+     * `@particle-academy/fancy-flow/fields/react-fancy` swaps it for a real typed
+     * editor — or to supply one the package has never heard of.
+     *
+     * This forwarding is the whole point: the seam existed on `NodeConfigPanel`
+     * and had no route through `FlowEditor`, so reaching it meant abandoning the
+     * editor and composing one by hand.
+     */
+    fieldRenderers?: ComponentProps<typeof NodeConfigPanel>["fieldRenderers"];
     /** Show run feed below the canvas. Default true. */
     showFeed?: boolean;
     /** Total editor height. Default 720. */
@@ -347,128 +406,6 @@ declare function paletteDropHandlers(onDrop: (kindName: string, evt: React.DragE
     onDrop: (e: React.DragEvent) => void;
 };
 
-/** 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;
-
-type NodeConfigPanelProps = {
-    /** Currently-selected node — pass null to render the empty state. */
-    node: FlowNode | null;
-    /** Called when the user edits the node label, description, or config. */
-    onChange: (next: FlowNode) => void;
-    /**
-     * Called when the user deletes the node from the panel. When provided, the
-     * panel renders a "Delete node" button while a node is selected — so the
-     * delete affordance lives WITH the panel (a dev composing their own editor
-     * gets it for free), rather than in a host toolbar it has to re-implement.
-     */
-    onDelete?: (node: FlowNode) => void;
-    /** Label for the delete button. Default "Delete node". */
-    deleteLabel?: string;
-    /** Optional header content (e.g. close button). */
-    header?: ReactNode;
-    /** Optional credential picker hook — host renders the picker. */
-    renderCredentialField?: (props: {
-        credentialType: string;
-        value: unknown;
-        onChange: (next: unknown) => void;
-    }) => ReactNode;
-    /**
-     * Optional document editor hook — host renders the editor for `document`
-     * fields. Lets rich authored content live in node config without fancy-flow
-     * taking on a document model.
-     */
-    /** Host renderers keyed by field `type`. See {@link ConfigFieldRenderer}. */
-    fieldRenderers?: Record<string, ConfigFieldRenderFn>;
-    renderDocumentField?: (props: {
-        documentType?: string;
-        value: unknown;
-        onChange: (next: unknown) => void;
-    }) => ReactNode;
-    className?: string;
-    style?: React.CSSProperties;
-};
-/**
- * NodeConfigPanel — schema-driven form for the selected node. Defers to
- * `kind.renderPanel` if the kind opts out of the auto-form.
- */
-declare function NodeConfigPanel({ node, onChange, onDelete, deleteLabel, header, renderCredentialField, renderDocumentField, fieldRenderers, className, style, }: NodeConfigPanelProps): react.JSX.Element;
-
 /** Entry-point node — outputs only, no inputs. */
 declare function TriggerNodeInner(props: NodeProps<FlowNode>): react.JSX.Element;
 declare const TriggerNode: react.MemoExoticComponent<typeof TriggerNodeInner>;
@@ -683,4 +620,4 @@ declare const flowKeys: {
     readonly run: (runId: string) => readonly ["flow", "runs", string];
 };
 
-export { ActionNode, type AlignEdge, AutoLayoutOptions, ConfigField, type ConfigFieldRenderContext, type ConfigFieldRenderFn, ConfigFieldRenderer, type ConfigFieldRendererProps, ConnectionValidatorOptions, DecisionNode, ExecutorRegistry, FlowCanvas, type FlowCanvasProps, FlowEditor, type FlowEditorAction, type FlowEditorApi, type FlowEditorBuiltins, type FlowEditorProps, type FlowEditorSlots, FlowGraph, FlowNode, type FlowNodeRenderProps, FlowRunControls, type FlowRunControlsProps, FlowRunFeed, FlowRunFeedEntry, type FlowRunFeedProps, LaneNode, NodeCategory, NodeConfigPanel, type NodeConfigPanelProps, NodeKindDefinition, NodePalette, type NodePaletteProps, NodePort, type NodePortProps, type NodePortSide, type NodePortType, NodeRunStatus, NodeShell, type NodeShellProps, NoteNode, OutputNode, SubgraphNode, TriggerNode, WorkflowMetadata, WorkflowSchema, alignNodes, cloneSubgraph, defaultNodeTypes, defineNode, distributeNodes, flowKeys, flowLive, paletteDropHandlers, reconnectEdge, useFlowEditor, useFlowEditorOptional };
+export { ActionNode, type AlignEdge, AutoLayoutOptions, ConfigFieldRenderFn, ConnectionValidatorOptions, DecisionNode, ExecutorRegistry, FlowCanvas, type FlowCanvasProps, FlowEditor, type FlowEditorAction, type FlowEditorApi, type FlowEditorBuiltins, type FlowEditorProps, type FlowEditorSlots, FlowGraph, FlowNode, type FlowNodeRenderProps, FlowRunControls, type FlowRunControlsProps, FlowRunFeed, FlowRunFeedEntry, type FlowRunFeedProps, LaneNode, NodeCategory, NodeConfigPanel, type NodeConfigPanelProps, NodeKindDefinition, NodePalette, type NodePaletteProps, NodePort, type NodePortProps, type NodePortSide, type NodePortType, NodeRunStatus, NodeShell, type NodeShellProps, NoteNode, OutputNode, SubgraphNode, TriggerNode, WorkflowMetadata, WorkflowSchema, alignNodes, cloneSubgraph, defaultNodeTypes, defineNode, distributeNodes, flowKeys, flowLive, paletteDropHandlers, reconnectEdge, useFlowEditor, useFlowEditorOptional };

package/dist/index.d.ts

@@ -1,21 +1,23 @@
 import * as react from 'react';
-import { ReactNode, CSSProperties, ComponentType } from 'react';
+import { ReactNode, CSSProperties, ComponentProps, ComponentType } from 'react';
 import { ReactFlowProps, Edge, BackgroundVariant, Connection, NodeProps, NodeTypes } from '@xyflow/react';
 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 { b as FlowNode, F as FlowGraph, e as NodeRunStatus, E as ExecutorRegistry } from './types-sOmpCitB.js';
 export { A as ActionNodeData, B as BaseNodeData, D as DecisionNodeData, a as FlowEdge, c as FlowNodeData, d as FlowNodeKind, N as NodeExecutor, f as NoteNodeData, O as OutputNodeData, P as PortDescriptor, R as RunEvent, S as SubgraphNodeData, T as TriggerNodeData } from './types-sOmpCitB.js';
+import { C as ConfigFieldRenderFn } from './ConfigFieldRenderer-D2TejNY1.js';
+export { a as ConfigFieldRenderContext, b as ConfigFieldRenderer, c as ConfigFieldRendererProps } from './ConfigFieldRenderer-D2TejNY1.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';
 export { AutoLayoutDirection } from './layout/index.js';
-import { c as NodeCategory, d as NodeKindDefinition, a as ConfigField } from './types-D6lsIGoe.js';
-export { D as DocumentConfigField, K as KeyValueConfigField, L as LEGACY_PAUSE_PREFIXES, h as PAUSE_PREFIX, P as PauseAwaiting, i as PauseSignal, j as PortSpec, R as RenderBodyContext, t as RepeaterConfigField, u as RepeaterRowField, m as decodePause, n as encodePause, o as isPause, p as pauseForHuman } from './types-D6lsIGoe.js';
+import { c as NodeCategory, d as NodeKindDefinition } from './types-Cf75IbxY.js';
+export { a as ConfigField, D as DocumentConfigField, K as KeyValueConfigField, L as LEGACY_PAUSE_PREFIXES, h as PAUSE_PREFIX, P as PauseAwaiting, i as PauseSignal, j as PortSpec, R as RenderBodyContext, t as RepeaterConfigField, u as RepeaterRowField, m as decodePause, n as encodePause, o as isPause, p as pauseForHuman } from './types-Cf75IbxY.js';
 export { F as FlowNodeStatus, a as FlowViewer, b as FlowViewerClassNames, c as FlowViewerProps } from './FlowViewer-C4QAVgWv.js';
 import { FlowRunFeedEntry } from './runtime/index.js';
 export { HistoryController, UseFlowHistoryReturn, UseFlowRunOptions, UseFlowRunReturn, UseFlowStateReturn, applyOutputsToNodes, applyStatusesToNodes, createHistory, useFlowHistory, useFlowRun, useFlowState } from './runtime/index.js';
 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';
-export { N as NodeKindPresentation, c as categoryAccent, b as clearNodeKindOverrides, d as defaultConfigFor, g as getNodeKind, l as listNodeKinds, o as onNodeKindsChanged, e as overrideNodeKind, r as registerNodeKind, v as validateConfig } from './registry-DYbFLEcW.js';
+export { N as NodeKindPresentation, c as categoryAccent, b as clearNodeKindOverrides, d as defaultConfigFor, g as getNodeKind, l as listNodeKinds, o as onNodeKindsChanged, e as overrideNodeKind, r as registerNodeKind, v as validateConfig } from './registry-CS7kjMto.js';
 import './capabilities-CkhKj_U_.js';
 
 type FlowCanvasProps = Omit<ReactFlowProps<FlowNode, Edge>, "nodes" | "edges" | "height"> & {
@@ -67,6 +69,49 @@ type FlowCanvasProps = Omit<ReactFlowProps<FlowNode, Edge>, "nodes" | "edges" |
  */
 declare function FlowCanvas({ nodes, edges, background, showControls, showMinimap, height, validateConnections, isValidConnection, colorMode, showHelperLines, zoomOnWheel, onNodesChange, toolbar, nodeTypes, edgeTypes, className, style, ...rest }: FlowCanvasProps): react.JSX.Element;
 
+type NodeConfigPanelProps = {
+    /** Currently-selected node — pass null to render the empty state. */
+    node: FlowNode | null;
+    /** Called when the user edits the node label, description, or config. */
+    onChange: (next: FlowNode) => void;
+    /**
+     * Called when the user deletes the node from the panel. When provided, the
+     * panel renders a "Delete node" button while a node is selected — so the
+     * delete affordance lives WITH the panel (a dev composing their own editor
+     * gets it for free), rather than in a host toolbar it has to re-implement.
+     */
+    onDelete?: (node: FlowNode) => void;
+    /** Label for the delete button. Default "Delete node". */
+    deleteLabel?: string;
+    /** Optional header content (e.g. close button). */
+    header?: ReactNode;
+    /** Optional credential picker hook — host renders the picker. */
+    renderCredentialField?: (props: {
+        credentialType: string;
+        value: unknown;
+        onChange: (next: unknown) => void;
+    }) => ReactNode;
+    /**
+     * Optional document editor hook — host renders the editor for `document`
+     * fields. Lets rich authored content live in node config without fancy-flow
+     * taking on a document model.
+     */
+    /** Host renderers keyed by field `type`. See {@link ConfigFieldRenderer}. */
+    fieldRenderers?: Record<string, ConfigFieldRenderFn>;
+    renderDocumentField?: (props: {
+        documentType?: string;
+        value: unknown;
+        onChange: (next: unknown) => void;
+    }) => ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+};
+/**
+ * NodeConfigPanel — schema-driven form for the selected node. Defers to
+ * `kind.renderPanel` if the kind opts out of the auto-form.
+ */
+declare function NodeConfigPanel({ node, onChange, onDelete, deleteLabel, header, renderCredentialField, renderDocumentField, fieldRenderers, className, style, }: NodeConfigPanelProps): react.JSX.Element;
+
 /**
  * Clone a set of nodes AND the edges internal to that set, remapping every id.
  * This is the piece `duplicateNode` lacks: a copy/paste (or duplicate-selection)
@@ -273,6 +318,20 @@ type FlowEditorProps = {
     showPalette?: boolean;
     /** Show the config panel sidebar. Default true. */
     showPanel?: boolean;
+    /**
+     * Host renderers for config-field types, keyed by `type`, handed straight to
+     * `NodeConfigPanel`.
+     *
+     * Use it to claim a type the package renders plainly — the built-in `json`
+     * field is a bare textarea, and
+     * `@particle-academy/fancy-flow/fields/react-fancy` swaps it for a real typed
+     * editor — or to supply one the package has never heard of.
+     *
+     * This forwarding is the whole point: the seam existed on `NodeConfigPanel`
+     * and had no route through `FlowEditor`, so reaching it meant abandoning the
+     * editor and composing one by hand.
+     */
+    fieldRenderers?: ComponentProps<typeof NodeConfigPanel>["fieldRenderers"];
     /** Show run feed below the canvas. Default true. */
     showFeed?: boolean;
     /** Total editor height. Default 720. */
@@ -347,128 +406,6 @@ declare function paletteDropHandlers(onDrop: (kindName: string, evt: React.DragE
     onDrop: (e: React.DragEvent) => void;
 };
 
-/** 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;
-
-type NodeConfigPanelProps = {
-    /** Currently-selected node — pass null to render the empty state. */
-    node: FlowNode | null;
-    /** Called when the user edits the node label, description, or config. */
-    onChange: (next: FlowNode) => void;
-    /**
-     * Called when the user deletes the node from the panel. When provided, the
-     * panel renders a "Delete node" button while a node is selected — so the
-     * delete affordance lives WITH the panel (a dev composing their own editor
-     * gets it for free), rather than in a host toolbar it has to re-implement.
-     */
-    onDelete?: (node: FlowNode) => void;
-    /** Label for the delete button. Default "Delete node". */
-    deleteLabel?: string;
-    /** Optional header content (e.g. close button). */
-    header?: ReactNode;
-    /** Optional credential picker hook — host renders the picker. */
-    renderCredentialField?: (props: {
-        credentialType: string;
-        value: unknown;
-        onChange: (next: unknown) => void;
-    }) => ReactNode;
-    /**
-     * Optional document editor hook — host renders the editor for `document`
-     * fields. Lets rich authored content live in node config without fancy-flow
-     * taking on a document model.
-     */
-    /** Host renderers keyed by field `type`. See {@link ConfigFieldRenderer}. */
-    fieldRenderers?: Record<string, ConfigFieldRenderFn>;
-    renderDocumentField?: (props: {
-        documentType?: string;
-        value: unknown;
-        onChange: (next: unknown) => void;
-    }) => ReactNode;
-    className?: string;
-    style?: React.CSSProperties;
-};
-/**
- * NodeConfigPanel — schema-driven form for the selected node. Defers to
- * `kind.renderPanel` if the kind opts out of the auto-form.
- */
-declare function NodeConfigPanel({ node, onChange, onDelete, deleteLabel, header, renderCredentialField, renderDocumentField, fieldRenderers, className, style, }: NodeConfigPanelProps): react.JSX.Element;
-
 /** Entry-point node — outputs only, no inputs. */
 declare function TriggerNodeInner(props: NodeProps<FlowNode>): react.JSX.Element;
 declare const TriggerNode: react.MemoExoticComponent<typeof TriggerNodeInner>;
@@ -683,4 +620,4 @@ declare const flowKeys: {
     readonly run: (runId: string) => readonly ["flow", "runs", string];
 };
 
-export { ActionNode, type AlignEdge, AutoLayoutOptions, ConfigField, type ConfigFieldRenderContext, type ConfigFieldRenderFn, ConfigFieldRenderer, type ConfigFieldRendererProps, ConnectionValidatorOptions, DecisionNode, ExecutorRegistry, FlowCanvas, type FlowCanvasProps, FlowEditor, type FlowEditorAction, type FlowEditorApi, type FlowEditorBuiltins, type FlowEditorProps, type FlowEditorSlots, FlowGraph, FlowNode, type FlowNodeRenderProps, FlowRunControls, type FlowRunControlsProps, FlowRunFeed, FlowRunFeedEntry, type FlowRunFeedProps, LaneNode, NodeCategory, NodeConfigPanel, type NodeConfigPanelProps, NodeKindDefinition, NodePalette, type NodePaletteProps, NodePort, type NodePortProps, type NodePortSide, type NodePortType, NodeRunStatus, NodeShell, type NodeShellProps, NoteNode, OutputNode, SubgraphNode, TriggerNode, WorkflowMetadata, WorkflowSchema, alignNodes, cloneSubgraph, defaultNodeTypes, defineNode, distributeNodes, flowKeys, flowLive, paletteDropHandlers, reconnectEdge, useFlowEditor, useFlowEditorOptional };
+export { ActionNode, type AlignEdge, AutoLayoutOptions, ConfigFieldRenderFn, ConnectionValidatorOptions, DecisionNode, ExecutorRegistry, FlowCanvas, type FlowCanvasProps, FlowEditor, type FlowEditorAction, type FlowEditorApi, type FlowEditorBuiltins, type FlowEditorProps, type FlowEditorSlots, FlowGraph, FlowNode, type FlowNodeRenderProps, FlowRunControls, type FlowRunControlsProps, FlowRunFeed, FlowRunFeedEntry, type FlowRunFeedProps, LaneNode, NodeCategory, NodeConfigPanel, type NodeConfigPanelProps, NodeKindDefinition, NodePalette, type NodePaletteProps, NodePort, type NodePortProps, type NodePortSide, type NodePortType, NodeRunStatus, NodeShell, type NodeShellProps, NoteNode, OutputNode, SubgraphNode, TriggerNode, WorkflowMetadata, WorkflowSchema, alignNodes, cloneSubgraph, defaultNodeTypes, defineNode, distributeNodes, flowKeys, flowLive, paletteDropHandlers, reconnectEdge, useFlowEditor, useFlowEditorOptional };

package/dist/index.js

@@ -1,5 +1,5 @@
-import { removeNodes, removeEdges, cloneSubgraph, alignNodes, distributeNodes, reconnectEdge, assignToLane, removeFromLane, duplicateNode, setEdgeLabel, FlowCanvas } from './chunk-5UCWY7G3.js';
-export { ActionNode, DecisionNode, FlowCanvas, FlowViewer, NodeShell, OutputNode, SubgraphNode, TriggerNode, alignNodes, cloneSubgraph, defaultNodeTypes, distributeNodes, reconnectEdge } from './chunk-5UCWY7G3.js';
+import { removeNodes, removeEdges, cloneSubgraph, alignNodes, distributeNodes, reconnectEdge, assignToLane, removeFromLane, duplicateNode, setEdgeLabel, FlowCanvas } from './chunk-WOO4B7M5.js';
+export { ActionNode, DecisionNode, FlowCanvas, FlowViewer, NodeShell, OutputNode, SubgraphNode, TriggerNode, alignNodes, cloneSubgraph, defaultNodeTypes, distributeNodes, reconnectEdge } from './chunk-WOO4B7M5.js';
 import { useFlowState, useFlowRun, useFlowHistory, applyOutputsToNodes, applyStatusesToNodes } from './chunk-A6RFLGWV.js';
 export { applyOutputsToNodes, applyStatusesToNodes, createHistory, useFlowHistory, useFlowRun, useFlowState } from './chunk-A6RFLGWV.js';
 export { runCohort } from './chunk-QZTGV3ZL.js';
@@ -195,7 +195,7 @@ function ConfigFieldRenderer({
         }
       );
     case "json":
-      return /* @__PURE__ */ jsx(JsonField, { value, onChange, rows: field.rows });
+      return /* @__PURE__ */ jsx(JsonField, { value, onChange, rows: field.rows, handle });
     case "expression":
       return /* @__PURE__ */ jsx(
         "textarea",
@@ -227,6 +227,7 @@ function ConfigFieldRenderer({
       return /* @__PURE__ */ jsx(
         RepeaterField,
         {
+          id,
           field,
           value,
           onChange,
@@ -236,7 +237,7 @@ function ConfigFieldRenderer({
         }
       );
     case "keyvalue":
-      return /* @__PURE__ */ jsx(KeyValueField, { field, value, onChange });
+      return /* @__PURE__ */ jsx(KeyValueField, { id, field, value, onChange });
     case "document":
       if (renderDocumentField) {
         return /* @__PURE__ */ jsx(Fragment, { children: renderDocumentField({ documentType: field.documentType, value, onChange }) });
@@ -281,6 +282,7 @@ function ChoiceField({
   );
 }
 function RepeaterField({
+  id,
   field,
   value,
   onChange,
@@ -315,7 +317,7 @@ function RepeaterField({
     if (typeof raw === "number" || typeof raw === "boolean") return String(raw);
     return `Item ${i + 1}`;
   };
-  return /* @__PURE__ */ jsxs("div", { className: "ff-repeater", "data-ff-repeater": field.key, children: [
+  return /* @__PURE__ */ jsxs("div", { id, role: "group", className: "ff-repeater", "data-ff-repeater": field.key, "data-ff-field": field.key, children: [
     rows.length === 0 && /* @__PURE__ */ jsx("p", { className: "ff-repeater__empty", children: "None yet." }),
     rows.map((row, i) => /* @__PURE__ */ jsxs("div", { className: "ff-repeater__row", "data-ff-repeater-row": i, children: [
       /* @__PURE__ */ jsxs("div", { className: "ff-repeater__row-head", children: [
@@ -390,6 +392,7 @@ function RepeaterField({
   ] });
 }
 function KeyValueField({
+  id,
   field,
   value,
   onChange
@@ -408,7 +411,7 @@ function KeyValueField({
   const setVal = (i, val) => commit(entries.map(([k, v], idx) => idx === i ? [k, val] : [k, v]));
   const remove = (i) => commit(entries.filter((_, idx) => idx !== i));
   const add = () => commit([...entries, ["", ""]]);
-  return /* @__PURE__ */ jsxs("div", { className: "ff-keyvalue", "data-ff-keyvalue": field.key, children: [
+  return /* @__PURE__ */ jsxs("div", { id, role: "group", className: "ff-keyvalue", "data-ff-keyvalue": field.key, "data-ff-field": field.key, children: [
     entries.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ff-keyvalue__head", children: [
       /* @__PURE__ */ jsx("span", { children: field.keyLabel ?? "Key" }),
       /* @__PURE__ */ jsx("span", { children: field.valueLabel ?? "Value" }),
@@ -464,34 +467,76 @@ function KeyValueField({
     ] })
   ] });
 }
-function JsonField({ value, onChange, rows }) {
-  const initial = useMemo(() => {
+function JsonField({
+  value,
+  onChange,
+  rows,
+  handle
+}) {
+  const serialized = useMemo(() => {
     try {
       return value === void 0 ? "" : JSON.stringify(value, null, 2);
     } catch {
       return "";
     }
   }, [value]);
-  return /* @__PURE__ */ 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] = useState(serialized);
+  const [error, setError] = useState(null);
+  const [touched, setTouched] = useState(false);
+  const lastProps = useRef(serialized);
+  const committed = 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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ 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__ */ jsxs("p", { className: "ff-panel__issue ff-panel__issue--field", id: errorId, role: "alert", children: [
+      "\u26A0 ",
+      error
+    ] })
+  ] });
 }
 function NodeConfigPanel({
   node,
@@ -810,6 +855,7 @@ function FlowEditorInner({
   metadata,
   showPalette = true,
   showPanel = true,
+  fieldRenderers,
   showFeed = true,
   extraToolbar,
   actions = [],
@@ -1369,6 +1415,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])
         }
       ),