@particle-academy/fancy-flow 0.16.0 → 0.17.0

package/dist/index.d.cts

@@ -243,6 +243,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 +277,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;

package/dist/index.d.ts

@@ -243,6 +243,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 +277,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;

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 } from './chunk-532A5QA3.js';
+export { BUILTIN_KINDS, RegistryNode, buildNodeTypes, registerBuiltinKinds } from './chunk-532A5QA3.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';
@@ -649,6 +649,8 @@ function JsonField({ value, onChange, rows }) {
 function NodeConfigPanel({
   node,
   onChange,
+  onDelete,
+  deleteLabel = "Delete node",
   header,
   renderCredentialField,
   renderDocumentField,
@@ -670,7 +672,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 +752,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 +1023,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 +1154,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) })
     ] }))
   ] });