@particle-academy/fancy-flow 0.39.0 → 0.40.0

package/dist/index.d.cts

@@ -347,47 +347,23 @@ declare function paletteDropHandlers(onDrop: (kindName: string, evt: React.DragE
     onDrop: (e: React.DragEvent) => void;
 };
 
-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.
-     */
-    renderDocumentField?: (props: {
-        documentType?: string;
-        value: unknown;
-        onChange: (next: unknown) => void;
-    }) => ReactNode;
-    className?: string;
-    style?: React.CSSProperties;
+/** 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;
 };
 /**
- * NodeConfigPanel — schema-driven form for the selected node. Defers to
- * `kind.renderPanel` if the kind opts out of the auto-form.
+ * 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.
  */
-declare function NodeConfigPanel({ node, onChange, onDelete, deleteLabel, header, renderCredentialField, renderDocumentField, className, style, }: NodeConfigPanelProps): react.JSX.Element;
-
+type ConfigFieldRenderFn = (ctx: ConfigFieldRenderContext) => ReactNode;
 type ConfigFieldRendererProps = {
     field: ConfigField;
     value: unknown;
@@ -420,6 +396,22 @@ type ConfigFieldRendererProps = {
         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.
@@ -432,7 +424,50 @@ type ConfigFieldRendererProps = {
  * 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, }: ConfigFieldRendererProps): react.JSX.Element | null;
+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;
@@ -648,4 +683,4 @@ declare const flowKeys: {
     readonly run: (runId: string) => readonly ["flow", "runs", string];
 };
 
-export { ActionNode, type AlignEdge, AutoLayoutOptions, ConfigField, 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, 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 };

package/dist/index.d.ts

@@ -347,47 +347,23 @@ declare function paletteDropHandlers(onDrop: (kindName: string, evt: React.DragE
     onDrop: (e: React.DragEvent) => void;
 };
 
-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.
-     */
-    renderDocumentField?: (props: {
-        documentType?: string;
-        value: unknown;
-        onChange: (next: unknown) => void;
-    }) => ReactNode;
-    className?: string;
-    style?: React.CSSProperties;
+/** 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;
 };
 /**
- * NodeConfigPanel — schema-driven form for the selected node. Defers to
- * `kind.renderPanel` if the kind opts out of the auto-form.
+ * 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.
  */
-declare function NodeConfigPanel({ node, onChange, onDelete, deleteLabel, header, renderCredentialField, renderDocumentField, className, style, }: NodeConfigPanelProps): react.JSX.Element;
-
+type ConfigFieldRenderFn = (ctx: ConfigFieldRenderContext) => ReactNode;
 type ConfigFieldRendererProps = {
     field: ConfigField;
     value: unknown;
@@ -420,6 +396,22 @@ type ConfigFieldRendererProps = {
         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.
@@ -432,7 +424,50 @@ type ConfigFieldRendererProps = {
  * 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, }: ConfigFieldRendererProps): react.JSX.Element | null;
+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;
@@ -648,4 +683,4 @@ declare const flowKeys: {
     readonly run: (runId: string) => readonly ["flow", "runs", string];
 };
 
-export { ActionNode, type AlignEdge, AutoLayoutOptions, ConfigField, 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, 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 };

package/dist/index.js

@@ -115,9 +115,15 @@ function ConfigFieldRenderer({
   onChange,
   id,
   renderCredentialField,
-  renderDocumentField
+  renderDocumentField,
+  fieldRenderers
 }) {
   const handle = { id, "data-ff-field": field.key };
+  const custom = fieldRenderers?.[field.type];
+  if (custom) {
+    const rendered = custom({ field, value, onChange, id });
+    if (rendered !== null && rendered !== void 0) return /* @__PURE__ */ jsx(Fragment, { children: rendered });
+  }
   switch (field.type) {
     case "text": {
       if (field.choices?.length) {
@@ -225,7 +231,8 @@ function ConfigFieldRenderer({
           value,
           onChange,
           renderCredentialField,
-          renderDocumentField
+          renderDocumentField,
+          fieldRenderers
         }
       );
     case "keyvalue":
@@ -278,7 +285,8 @@ function RepeaterField({
   value,
   onChange,
   renderCredentialField,
-  renderDocumentField
+  renderDocumentField,
+  fieldRenderers
 }) {
   const rows = Array.isArray(value) ? value : [];
   const max = field.maxItems ?? Infinity;
@@ -360,7 +368,8 @@ function RepeaterField({
             value: row[sub.key],
             onChange: (cell) => setCell(i, sub.key, cell),
             renderCredentialField,
-            renderDocumentField
+            renderDocumentField,
+            fieldRenderers
           }
         )
       ] }, sub.key))
@@ -492,6 +501,7 @@ function NodeConfigPanel({
   header,
   renderCredentialField,
   renderDocumentField,
+  fieldRenderers,
   className,
   style
 }) {
@@ -596,7 +606,8 @@ function NodeConfigPanel({
             value: config[field.key],
             onChange: (v) => setConfigValue(field.key, v),
             renderCredentialField,
-            renderDocumentField: documentField
+            renderDocumentField: documentField,
+            fieldRenderers
           }
         )
       ] }, field.key))