@particle-academy/fancy-flow 0.16.0 → 0.18.0

package/dist/index.d.cts

@@ -1,6 +1,8 @@
 import * as react from 'react';
 import { ReactNode, CSSProperties, ComponentType } from 'react';
 import { ReactFlowProps, Edge, BackgroundVariant, NodeProps, NodeTypes } from '@xyflow/react';
+import { ConnectionValidatorOptions } from './registry/index.cjs';
+export { ANY_PORT_TYPE, BUILTIN_KINDS, PortCompatibility, RegistryNode, RichInputAdapter, RichInputPreview, buildNodeTypes, categoryAccent, createConnectionValidator, defaultConfigFor, defaultPortCompatibility, getNodeKind, getRichInputAdapter, isRichInputEnabled, listNodeKinds, onNodeKindsChanged, onRichInputAdapterChanged, registerBuiltinKinds, registerNodeKind, registerRichInputAdapter, resolveNodePorts, resolvePortSpec, validateConfig } 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 { WorkflowSchema, WorkflowMetadata } from './schema/index.cjs';
@@ -9,7 +11,6 @@ import { N as NodeCategory, a as NodeKindDefinition, C as ConfigField } from './
 export { D as DocumentConfigField, K as KeyValueConfigField, P as PortSpec, R as RenderBodyContext, d as RepeaterConfigField, e as RepeaterRowField } from './types-D_jOR3Z2.cjs';
 import { FlowRunFeedEntry } from './runtime/index.cjs';
 export { UseFlowRunOptions, UseFlowRunReturn, UseFlowStateReturn, applyStatusesToNodes, useFlowRun, useFlowState } from './runtime/index.cjs';
-export { BUILTIN_KINDS, RegistryNode, RichInputAdapter, RichInputPreview, buildNodeTypes, categoryAccent, defaultConfigFor, getNodeKind, getRichInputAdapter, isRichInputEnabled, listNodeKinds, onNodeKindsChanged, onRichInputAdapterChanged, registerBuiltinKinds, registerNodeKind, registerRichInputAdapter, resolveNodePorts, resolvePortSpec, validateConfig } from './registry/index.cjs';
 export { R as RunOptions, a as RunResult, r as runFlow } from './run-flow-VKm57Hcj.cjs';
 export { L as LEGACY_PAUSE_PREFIXES, a as PAUSE_PREFIX, P as PauseAwaiting, b as PauseSignal, d as decodePause, e as encodePause, i as isPause, p as pauseForHuman } from './pause-9iT4tCEV.cjs';
 import './capabilities-ChE3Xi8R.cjs';
@@ -25,6 +26,14 @@ type FlowCanvasProps = Omit<ReactFlowProps<FlowNode, Edge>, "nodes" | "edges" |
     showMinimap?: boolean;
     /** Pixel height; FlowCanvas expects a sized container. Default 600. */
     height?: number | string;
+    /**
+     * Enforce port-type compatibility on new connections. `true` (default) uses
+     * the built-in validator: a connection is refused only when both ports
+     * declare a concrete, differing `type` (so untyped graphs are unaffected),
+     * and self-loops are blocked. Pass options to tune the rule, or `false` to
+     * disable. An `isValidConnection` you pass yourself always takes precedence.
+     */
+    validateConnections?: boolean | ConnectionValidatorOptions;
     /** Optional toolbar / palette etc. rendered above the canvas. */
     toolbar?: ReactNode;
     className?: string;
@@ -39,7 +48,7 @@ type FlowCanvasProps = Omit<ReactFlowProps<FlowNode, Edge>, "nodes" | "edges" |
  * (xyflow's standard pattern). The surrounding `useFlowState` hook in
  * `runtime/use-flow-state.ts` is a convenience that wires those for you.
  */
-declare function FlowCanvas({ nodes, edges, background, showControls, showMinimap, height, toolbar, nodeTypes, edgeTypes, className, style, ...rest }: FlowCanvasProps): react.JSX.Element;
+declare function FlowCanvas({ nodes, edges, background, showControls, showMinimap, height, validateConnections, isValidConnection, toolbar, nodeTypes, edgeTypes, className, style, ...rest }: FlowCanvasProps): react.JSX.Element;
 
 /**
  * Everything the editor knows and can do, handed to every extension point.
@@ -243,6 +252,15 @@ type NodeConfigPanelProps = {
     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. */
@@ -268,7 +286,7 @@ type NodeConfigPanelProps = {
  * 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, header, renderCredentialField, renderDocumentField, className, style, }: NodeConfigPanelProps): react.JSX.Element;
+declare function NodeConfigPanel({ node, onChange, onDelete, deleteLabel, header, renderCredentialField, renderDocumentField, className, style, }: NodeConfigPanelProps): react.JSX.Element;
 
 type ConfigFieldRendererProps = {
     field: ConfigField;
@@ -435,4 +453,4 @@ type FlowRunFeedProps = {
 /** FlowRunFeed — scrolling log panel. Auto-scrolls to bottom on new entries. */
 declare function FlowRunFeed({ entries, className, style }: FlowRunFeedProps): react.JSX.Element;
 
-export { ActionNode, ConfigField, ConfigFieldRenderer, type ConfigFieldRendererProps, 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, 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, defaultNodeTypes, defineNode, paletteDropHandlers, useFlowEditor, useFlowEditorOptional };
+export { ActionNode, 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, 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, defaultNodeTypes, defineNode, paletteDropHandlers, useFlowEditor, useFlowEditorOptional };

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 import * as react from 'react';
 import { ReactNode, CSSProperties, ComponentType } from 'react';
 import { ReactFlowProps, Edge, BackgroundVariant, NodeProps, NodeTypes } from '@xyflow/react';
+import { ConnectionValidatorOptions } from './registry/index.js';
+export { ANY_PORT_TYPE, BUILTIN_KINDS, PortCompatibility, RegistryNode, RichInputAdapter, RichInputPreview, buildNodeTypes, categoryAccent, createConnectionValidator, defaultConfigFor, defaultPortCompatibility, getNodeKind, getRichInputAdapter, isRichInputEnabled, listNodeKinds, onNodeKindsChanged, onRichInputAdapterChanged, registerBuiltinKinds, registerNodeKind, registerRichInputAdapter, resolveNodePorts, resolvePortSpec, validateConfig } 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 { WorkflowSchema, WorkflowMetadata } from './schema/index.js';
@@ -9,7 +11,6 @@ import { N as NodeCategory, a as NodeKindDefinition, C as ConfigField } from './
 export { D as DocumentConfigField, K as KeyValueConfigField, P as PortSpec, R as RenderBodyContext, d as RepeaterConfigField, e as RepeaterRowField } from './types-NerkPtHS.js';
 import { FlowRunFeedEntry } from './runtime/index.js';
 export { UseFlowRunOptions, UseFlowRunReturn, UseFlowStateReturn, applyStatusesToNodes, useFlowRun, useFlowState } from './runtime/index.js';
-export { BUILTIN_KINDS, RegistryNode, RichInputAdapter, RichInputPreview, buildNodeTypes, categoryAccent, defaultConfigFor, getNodeKind, getRichInputAdapter, isRichInputEnabled, listNodeKinds, onNodeKindsChanged, onRichInputAdapterChanged, registerBuiltinKinds, registerNodeKind, registerRichInputAdapter, resolveNodePorts, resolvePortSpec, validateConfig } from './registry/index.js';
 export { R as RunOptions, a as RunResult, r as runFlow } from './run-flow-ChBi6q-W.js';
 export { L as LEGACY_PAUSE_PREFIXES, a as PAUSE_PREFIX, P as PauseAwaiting, b as PauseSignal, d as decodePause, e as encodePause, i as isPause, p as pauseForHuman } from './pause-9iT4tCEV.js';
 import './capabilities-DUhAc-EJ.js';
@@ -25,6 +26,14 @@ type FlowCanvasProps = Omit<ReactFlowProps<FlowNode, Edge>, "nodes" | "edges" |
     showMinimap?: boolean;
     /** Pixel height; FlowCanvas expects a sized container. Default 600. */
     height?: number | string;
+    /**
+     * Enforce port-type compatibility on new connections. `true` (default) uses
+     * the built-in validator: a connection is refused only when both ports
+     * declare a concrete, differing `type` (so untyped graphs are unaffected),
+     * and self-loops are blocked. Pass options to tune the rule, or `false` to
+     * disable. An `isValidConnection` you pass yourself always takes precedence.
+     */
+    validateConnections?: boolean | ConnectionValidatorOptions;
     /** Optional toolbar / palette etc. rendered above the canvas. */
     toolbar?: ReactNode;
     className?: string;
@@ -39,7 +48,7 @@ type FlowCanvasProps = Omit<ReactFlowProps<FlowNode, Edge>, "nodes" | "edges" |
  * (xyflow's standard pattern). The surrounding `useFlowState` hook in
  * `runtime/use-flow-state.ts` is a convenience that wires those for you.
  */
-declare function FlowCanvas({ nodes, edges, background, showControls, showMinimap, height, toolbar, nodeTypes, edgeTypes, className, style, ...rest }: FlowCanvasProps): react.JSX.Element;
+declare function FlowCanvas({ nodes, edges, background, showControls, showMinimap, height, validateConnections, isValidConnection, toolbar, nodeTypes, edgeTypes, className, style, ...rest }: FlowCanvasProps): react.JSX.Element;
 
 /**
  * Everything the editor knows and can do, handed to every extension point.
@@ -243,6 +252,15 @@ type NodeConfigPanelProps = {
     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. */
@@ -268,7 +286,7 @@ type NodeConfigPanelProps = {
  * 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, header, renderCredentialField, renderDocumentField, className, style, }: NodeConfigPanelProps): react.JSX.Element;
+declare function NodeConfigPanel({ node, onChange, onDelete, deleteLabel, header, renderCredentialField, renderDocumentField, className, style, }: NodeConfigPanelProps): react.JSX.Element;
 
 type ConfigFieldRendererProps = {
     field: ConfigField;
@@ -435,4 +453,4 @@ type FlowRunFeedProps = {
 /** FlowRunFeed — scrolling log panel. Auto-scrolls to bottom on new entries. */
 declare function FlowRunFeed({ entries, className, style }: FlowRunFeedProps): react.JSX.Element;
 
-export { ActionNode, ConfigField, ConfigFieldRenderer, type ConfigFieldRendererProps, 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, 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, defaultNodeTypes, defineNode, paletteDropHandlers, useFlowEditor, useFlowEditorOptional };
+export { ActionNode, 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, 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, defaultNodeTypes, defineNode, paletteDropHandlers, useFlowEditor, useFlowEditorOptional };

package/dist/index.js

@@ -1,7 +1,7 @@
 import { useFlowState, useFlowRun, applyStatusesToNodes } from './chunk-MFMRTRPO.js';
 export { applyStatusesToNodes, useFlowRun, useFlowState } from './chunk-MFMRTRPO.js';
-import { buildNodeTypes, registerBuiltinKinds } from './chunk-M2QTDA3B.js';
-export { BUILTIN_KINDS, RegistryNode, buildNodeTypes, registerBuiltinKinds } from './chunk-M2QTDA3B.js';
+import { buildNodeTypes, registerBuiltinKinds, createConnectionValidator } from './chunk-FSC64BPD.js';
+export { ANY_PORT_TYPE, BUILTIN_KINDS, RegistryNode, buildNodeTypes, createConnectionValidator, defaultPortCompatibility, registerBuiltinKinds } from './chunk-FSC64BPD.js';
 import { ReactFlowProvider, useReactFlow, addEdge, applyEdgeChanges, applyNodeChanges, Position, Handle, index, BackgroundVariant, Background, Controls, MiniMap } from './chunk-NF6NPY5N.js';
 export { LEGACY_PAUSE_PREFIXES, PAUSE_PREFIX, decodePause, encodePause, isPause, pauseForHuman } from './chunk-UEOE6B52.js';
 export { runFlow } from './chunk-L4AX73Q6.js';
@@ -151,6 +151,8 @@ function FlowCanvas({
   showControls = true,
   showMinimap = false,
   height = 600,
+  validateConnections = true,
+  isValidConnection,
   toolbar,
   nodeTypes,
   edgeTypes,
@@ -162,6 +164,16 @@ function FlowCanvas({
     () => ({ ...defaultNodeTypes, ...nodeTypes ?? {} }),
     [nodeTypes]
   );
+  const nodesRef = useRef(nodes);
+  nodesRef.current = nodes;
+  const builtinValidator = useMemo(
+    () => validateConnections === false ? void 0 : createConnectionValidator(
+      () => nodesRef.current,
+      validateConnections === true ? void 0 : validateConnections
+    ),
+    [validateConnections]
+  );
+  const resolvedIsValidConnection = isValidConnection ?? builtinValidator;
   const mergedEdgeTypes = useMemo(
     () => edgeTypes ? { ...edgeTypes } : void 0,
     [edgeTypes]
@@ -181,6 +193,7 @@ function FlowCanvas({
         proOptions: { hideAttribution: true },
         zoomActivationKeyCode: "Shift",
         preventScrolling: false,
+        isValidConnection: resolvedIsValidConnection,
         ...rest,
         children: [
           background !== "none" && /* @__PURE__ */ jsx(Background, { variant: background, gap: 20, size: 1, color: "rgba(0,0,0,0.18)" }),
@@ -649,6 +662,8 @@ function JsonField({ value, onChange, rows }) {
 function NodeConfigPanel({
   node,
   onChange,
+  onDelete,
+  deleteLabel = "Delete node",
   header,
   renderCredentialField,
   renderDocumentField,
@@ -670,7 +685,21 @@ function NodeConfigPanel({
       /* @__PURE__ */ jsxs("p", { className: "ff-panel__empty", children: [
         "Unknown kind: ",
         kindName
-      ] })
+      ] }),
+      onDelete && /* @__PURE__ */ jsx("div", { className: "ff-panel__actions", children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "ff-panel__delete",
+          "data-action": "delete-node",
+          onClick: () => onDelete(node),
+          title: "Delete this node (Del / Backspace)",
+          children: [
+            "\u2715 ",
+            deleteLabel
+          ]
+        }
+      ) })
     ] });
   }
   const setLabel = (label) => onChange({ ...node, data: { ...node.data, label } });
@@ -736,7 +765,21 @@ function NodeConfigPanel({
     issues.length > 0 && /* @__PURE__ */ jsx("div", { className: "ff-panel__issues", children: issues.map((iss) => /* @__PURE__ */ jsxs("p", { className: "ff-panel__issue", children: [
       "\u26A0 ",
       iss.message
-    ] }, iss.key)) })
+    ] }, iss.key)) }),
+    onDelete && /* @__PURE__ */ jsx("div", { className: "ff-panel__actions", children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "ff-panel__delete",
+        "data-action": "delete-node",
+        onClick: () => onDelete(node),
+        title: "Delete this node (Del / Backspace)",
+        children: [
+          "\u2715 ",
+          deleteLabel
+        ]
+      }
+    ) })
   ] });
 }
 function FlowRunControls({ running, onRun, onCancel, onReset, className, style }) {
@@ -993,18 +1036,7 @@ function FlowEditorInner({
   const toolbar = slots.toolbar ? slots.toolbar(api) : /* @__PURE__ */ jsxs(Fragment, { children: [
     startActions.map((a) => renderAction(a, api)),
     builtins.run !== false && /* @__PURE__ */ jsx(FlowRunControls, { running: api.running, onRun: api.run, onCancel: api.cancel, onReset: api.reset }),
-    (builtins.delete !== false || builtins.export !== false || builtins.import !== false) && /* @__PURE__ */ jsx("span", { className: "ff-editor__sep" }),
-    builtins.delete !== false && /* @__PURE__ */ jsx(
-      "button",
-      {
-        className: "ff-editor__btn",
-        "data-action": "delete",
-        onClick: api.deleteSelected,
-        disabled: api.selected === null,
-        title: "Delete the selected node (Del / Backspace)",
-        children: "\u2715 Delete"
-      }
-    ),
+    (builtins.export !== false || builtins.import !== false) && /* @__PURE__ */ jsx("span", { className: "ff-editor__sep" }),
     builtins.export !== false && /* @__PURE__ */ jsx("button", { className: "ff-editor__btn", "data-action": "export", onClick: api.exportWorkflow, children: "\u2193 Export" }),
     builtins.import !== false && /* @__PURE__ */ jsx("button", { className: "ff-editor__btn", "data-action": "import", onClick: api.importWorkflow, children: "\u2191 Import" }),
     endActions.map((a) => renderAction(a, api)),
@@ -1135,7 +1167,15 @@ function FlowEditorInner({
       showFeed && (slots.feed ? slots.feed(api) : /* @__PURE__ */ jsx(FlowRunFeed, { entries: runner.feed, className: "ff-editor__feed" }))
     ] }),
     showPanel && (slots.panel ? slots.panel(api) : /* @__PURE__ */ jsxs("div", { className: "ff-editor__panel-wrap", children: [
-      /* @__PURE__ */ jsx(NodeConfigPanel, { className: "ff-editor__panel", node: api.selected, onChange: api.updateNode }),
+      /* @__PURE__ */ jsx(
+        NodeConfigPanel,
+        {
+          className: "ff-editor__panel",
+          node: api.selected,
+          onChange: api.updateNode,
+          onDelete: builtins.delete === false ? void 0 : (n) => api.deleteNodes([n.id])
+        }
+      ),
       slots.panelFooter && /* @__PURE__ */ jsx("div", { className: "ff-editor__panel-footer", children: slots.panelFooter(api) })
     ] }))
   ] });