@particle-academy/fancy-flow 0.40.4 → 0.42.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-LotNHeG8.cjs';
+export { a as ConfigFieldRenderContext, b as ConfigFieldRenderer, c as ConfigFieldRendererProps } from './ConfigFieldRenderer-LotNHeG8.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-B78Rm69S.cjs';
+export { A as AvailableVariable, a as ConfigField, D as DocumentConfigField, z as ExpressionForm, B as ExpressionGrammarHelp, K as KeyValueConfigField, L as LEGACY_PAUSE_PREFIXES, O as OutputField, F as OutputShape, h as PAUSE_PREFIX, P as PauseAwaiting, i as PauseSignal, j as PortSpec, R as RenderBodyContext, t as RepeaterConfigField, u as RepeaterRowField, G as availableVariables, H as baseVariables, m as decodePause, I as describeExpressionGrammar, n as encodePause, o as isPause, Q as outputFieldsFor, p as pauseForHuman } from './types-B78Rm69S.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-C9KMVpn7.cjs';
 import './capabilities-BtJQTbnw.cjs';
 
 type FlowCanvasProps = Omit<ReactFlowProps<FlowNode, Edge>, "nodes" | "edges" | "height"> & {
@@ -67,6 +69,56 @@ 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>;
+    /**
+     * The graph the node lives in. Supplying it is what makes the `{{ }}` variable
+     * picker context-aware — it reads the UPSTREAM node's declared `outputShape`
+     * to list what is actually reachable here (issue #5). Without it the picker
+     * still opens, but can only offer the whole input.
+     */
+    graph?: FlowGraph;
+    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, graph, 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 +325,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 +413,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 +627,38 @@ 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 };
+type ExpressionFieldProps = {
+    value: string;
+    onChange: (next: string) => void;
+    placeholder?: string;
+    rows?: number;
+    /** The panel's field id + agent handle. */
+    handle: {
+        id?: string;
+        "data-ff-field": string;
+    };
+    /**
+     * The graph and the node being edited. Both are needed to answer "what can I
+     * write here" — without them the picker can still offer `{{ $json }}` but
+     * nothing node-specific, which is the static list issue #5 asked us not to
+     * ship.
+     */
+    graph?: FlowGraph;
+    nodeId?: string;
+};
+/**
+ * ExpressionField — a `{{ }}` field that tells the author what it accepts.
+ *
+ * Issue #5: the panel rendered a bare textarea with a placeholder and nothing
+ * else, so writing an expression required already knowing both the grammar and
+ * the exact shape of the upstream node's output. Two affordances close that:
+ * typing `{{ ` opens a picker of the variables actually reachable at THIS node,
+ * and a reference toggle explains the grammar.
+ *
+ * The picker deliberately lists only what the resolver can reach — see
+ * `availableVariables`. A suggestion that resolves to `null` at runtime is
+ * worse than no suggestion, because the author has no reason to doubt it.
+ */
+declare function ExpressionField({ value, onChange, placeholder, rows, handle, graph, nodeId, }: ExpressionFieldProps): react.JSX.Element;
+
+export { ActionNode, type AlignEdge, AutoLayoutOptions, ConfigFieldRenderFn, ConnectionValidatorOptions, DecisionNode, ExecutorRegistry, ExpressionField, type ExpressionFieldProps, 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-BHQDZer6.js';
+export { a as ConfigFieldRenderContext, b as ConfigFieldRenderer, c as ConfigFieldRendererProps } from './ConfigFieldRenderer-BHQDZer6.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-JViq8reb.js';
+export { A as AvailableVariable, a as ConfigField, D as DocumentConfigField, z as ExpressionForm, B as ExpressionGrammarHelp, K as KeyValueConfigField, L as LEGACY_PAUSE_PREFIXES, O as OutputField, F as OutputShape, h as PAUSE_PREFIX, P as PauseAwaiting, i as PauseSignal, j as PortSpec, R as RenderBodyContext, t as RepeaterConfigField, u as RepeaterRowField, G as availableVariables, H as baseVariables, m as decodePause, I as describeExpressionGrammar, n as encodePause, o as isPause, Q as outputFieldsFor, p as pauseForHuman } from './types-JViq8reb.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-FGCBprcn.js';
 import './capabilities-CkhKj_U_.js';
 
 type FlowCanvasProps = Omit<ReactFlowProps<FlowNode, Edge>, "nodes" | "edges" | "height"> & {
@@ -67,6 +69,56 @@ 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>;
+    /**
+     * The graph the node lives in. Supplying it is what makes the `{{ }}` variable
+     * picker context-aware — it reads the UPSTREAM node's declared `outputShape`
+     * to list what is actually reachable here (issue #5). Without it the picker
+     * still opens, but can only offer the whole input.
+     */
+    graph?: FlowGraph;
+    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, graph, 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 +325,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 +413,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 +627,38 @@ 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 };
+type ExpressionFieldProps = {
+    value: string;
+    onChange: (next: string) => void;
+    placeholder?: string;
+    rows?: number;
+    /** The panel's field id + agent handle. */
+    handle: {
+        id?: string;
+        "data-ff-field": string;
+    };
+    /**
+     * The graph and the node being edited. Both are needed to answer "what can I
+     * write here" — without them the picker can still offer `{{ $json }}` but
+     * nothing node-specific, which is the static list issue #5 asked us not to
+     * ship.
+     */
+    graph?: FlowGraph;
+    nodeId?: string;
+};
+/**
+ * ExpressionField — a `{{ }}` field that tells the author what it accepts.
+ *
+ * Issue #5: the panel rendered a bare textarea with a placeholder and nothing
+ * else, so writing an expression required already knowing both the grammar and
+ * the exact shape of the upstream node's output. Two affordances close that:
+ * typing `{{ ` opens a picker of the variables actually reachable at THIS node,
+ * and a reference toggle explains the grammar.
+ *
+ * The picker deliberately lists only what the resolver can reach — see
+ * `availableVariables`. A suggestion that resolves to `null` at runtime is
+ * worse than no suggestion, because the author has no reason to doubt it.
+ */
+declare function ExpressionField({ value, onChange, placeholder, rows, handle, graph, nodeId, }: ExpressionFieldProps): react.JSX.Element;
+
+export { ActionNode, type AlignEdge, AutoLayoutOptions, ConfigFieldRenderFn, ConnectionValidatorOptions, DecisionNode, ExecutorRegistry, ExpressionField, type ExpressionFieldProps, 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 };