@particle-academy/fancy-flow 0.17.0 → 0.19.0

package/dist/index.cjs

@@ -10285,6 +10285,40 @@ var defaultNodeTypes = {
   note: NoteNode,
   subgraph: SubgraphNode
 };
+
+// src/registry/connection.ts
+var ANY_PORT_TYPE = "any";
+var defaultPortCompatibility = (source, target) => {
+  const s = source?.type;
+  const t = target?.type;
+  if (!s || !t) return true;
+  if (s === ANY_PORT_TYPE || t === ANY_PORT_TYPE) return true;
+  return s === t;
+};
+function portsFor(node, side) {
+  const kind = getNodeKind(node.data?.kind ?? node.type);
+  const resolved = resolveNodePorts(node, kind ?? void 0);
+  return resolved[side] ?? [];
+}
+function findPort(ports, handleId) {
+  if (handleId == null) return ports.length === 1 ? ports[0] : void 0;
+  return ports.find((p) => p.id === handleId);
+}
+function createConnectionValidator(getNodes, options = {}) {
+  const compatible = options.compatible ?? defaultPortCompatibility;
+  return (connection) => {
+    const { source, target, sourceHandle, targetHandle } = connection;
+    if (!source || !target) return false;
+    if (!options.allowSelfConnection && source === target) return false;
+    const nodes = getNodes();
+    const src = nodes.find((n) => n.id === source);
+    const tgt = nodes.find((n) => n.id === target);
+    if (!src || !tgt) return false;
+    const outPort = findPort(portsFor(src, "outputs"), sourceHandle);
+    const inPort = findPort(portsFor(tgt, "inputs"), targetHandle);
+    return compatible(outPort, inPort);
+  };
+}
 var DEFAULT_FIT_VIEW = { padding: 0.2 };
 var DEFAULT_EDGE_OPTIONS = {
   type: "smoothstep",
@@ -10297,6 +10331,8 @@ function FlowCanvas({
   showControls = true,
   showMinimap = false,
   height = 600,
+  validateConnections = true,
+  isValidConnection,
   toolbar,
   nodeTypes,
   edgeTypes,
@@ -10308,6 +10344,16 @@ function FlowCanvas({
     () => ({ ...defaultNodeTypes, ...nodeTypes ?? {} }),
     [nodeTypes]
   );
+  const nodesRef = ReactExports.useRef(nodes);
+  nodesRef.current = nodes;
+  const builtinValidator = ReactExports.useMemo(
+    () => validateConnections === false ? void 0 : createConnectionValidator(
+      () => nodesRef.current,
+      validateConnections === true ? void 0 : validateConnections
+    ),
+    [validateConnections]
+  );
+  const resolvedIsValidConnection = isValidConnection ?? builtinValidator;
   const mergedEdgeTypes = ReactExports.useMemo(
     () => edgeTypes ? { ...edgeTypes } : void 0,
     [edgeTypes]
@@ -10327,6 +10373,7 @@ function FlowCanvas({
         proOptions: { hideAttribution: true },
         zoomActivationKeyCode: "Shift",
         preventScrolling: false,
+        isValidConnection: resolvedIsValidConnection,
         ...rest,
         children: [
           background !== "none" && /* @__PURE__ */ jsxRuntime.jsx(Background, { variant: background, gap: 20, size: 1, color: "rgba(0,0,0,0.18)" }),
@@ -10949,8 +10996,117 @@ function useFlowState(initial) {
   const onConnect = ReactExports.useCallback((connection) => {
     setEdges((es) => addEdge2(connection, es));
   }, []);
+  const setGraph = ReactExports.useCallback((graph) => {
+    setNodes(graph.nodes);
+    setEdges(graph.edges);
+  }, []);
   const toGraph = ReactExports.useCallback(() => ({ nodes, edges }), [nodes, edges]);
-  return { nodes, edges, setNodes, setEdges, onNodesChange, onEdgesChange, onConnect, toGraph };
+  return { nodes, edges, setNodes, setEdges, setGraph, onNodesChange, onEdgesChange, onConnect, toGraph };
+}
+
+// src/runtime/history.ts
+function createHistory(limit = 100) {
+  let past = [];
+  let future = [];
+  return {
+    push(graph) {
+      past.push(graph);
+      if (past.length > limit) past.shift();
+      future = [];
+    },
+    undo(current) {
+      const prev = past.pop();
+      if (prev === void 0) return null;
+      future.push(current);
+      return prev;
+    },
+    redo(current) {
+      const next = future.pop();
+      if (next === void 0) return null;
+      past.push(current);
+      return next;
+    },
+    canUndo: () => past.length > 0,
+    canRedo: () => future.length > 0,
+    clear() {
+      past = [];
+      future = [];
+    },
+    size: () => ({ past: past.length, future: future.length })
+  };
+}
+
+// src/runtime/use-flow-history.ts
+function useFlowHistory(flow) {
+  const history = ReactExports.useRef(createHistory()).current;
+  const restoring = ReactExports.useRef(false);
+  const coalesced = ReactExports.useRef(false);
+  const [, bump] = ReactExports.useState(0);
+  const rerender = ReactExports.useCallback(() => bump((n) => n + 1), []);
+  const graphRef = ReactExports.useRef({ nodes: flow.nodes, edges: flow.edges });
+  graphRef.current = { nodes: flow.nodes, edges: flow.edges };
+  const capture = ReactExports.useCallback(() => {
+    if (restoring.current || coalesced.current) return;
+    coalesced.current = true;
+    queueMicrotask(() => {
+      coalesced.current = false;
+    });
+    history.push(graphRef.current);
+    rerender();
+  }, [history, rerender]);
+  const restore = ReactExports.useCallback(
+    (g) => {
+      if (!g) return;
+      restoring.current = true;
+      flow.setGraph(g);
+      queueMicrotask(() => {
+        restoring.current = false;
+      });
+      rerender();
+    },
+    [flow, rerender]
+  );
+  const undo = ReactExports.useCallback(() => restore(history.undo(graphRef.current)), [history, restore]);
+  const redo = ReactExports.useCallback(() => restore(history.redo(graphRef.current)), [history, restore]);
+  const wrapped = ReactExports.useMemo(
+    () => ({
+      ...flow,
+      setNodes: (next) => {
+        capture();
+        flow.setNodes(next);
+      },
+      setEdges: (next) => {
+        capture();
+        flow.setEdges(next);
+      },
+      setGraph: (g) => {
+        capture();
+        flow.setGraph(g);
+      },
+      onNodesChange: (changes) => {
+        if (!restoring.current && changes.some((c) => c.type === "remove")) capture();
+        flow.onNodesChange(changes);
+      },
+      onEdgesChange: (changes) => {
+        if (!restoring.current && changes.some((c) => c.type === "remove")) capture();
+        flow.onEdgesChange(changes);
+      },
+      onConnect: (conn) => {
+        capture();
+        flow.onConnect(conn);
+      }
+    }),
+    [flow, capture]
+  );
+  return {
+    flow: wrapped,
+    undo,
+    redo,
+    canUndo: history.canUndo(),
+    canRedo: history.canRedo(),
+    capture,
+    onNodeDragStart: capture
+  };
 }
 function useFlowRun({ maxFeed = 200 } = {}) {
   const [statuses, setStatuses] = ReactExports.useState({});
@@ -11406,13 +11562,16 @@ function FlowEditorInner({
   onSelectionChange,
   onDelete,
   onEdgeDelete,
+  confirmDelete,
   apiRef
 }) {
   const internal = useFlowState(initial);
   const runner = useFlowRun();
   const rf = useReactFlow();
   const controlled = value !== void 0;
-  const flow = controlled ? makeControlledFlowAdapter(value, onChange) : internal;
+  const baseFlow = controlled ? makeControlledFlowAdapter(value, onChange) : internal;
+  const hist = useFlowHistory(baseFlow);
+  const flow = hist.flow;
   const [, force] = ReactExports.useState(0);
   ReactExports.useEffect(() => onNodeKindsChanged(() => force((n) => n + 1)), []);
   const nodeTypes = ReactExports.useMemo(() => buildNodeTypes(), [listNodeKinds().length]);
@@ -11465,6 +11624,23 @@ function FlowEditorInner({
       window.removeEventListener("keydown", onKey);
     };
   }, [menu, labelEdit]);
+  ReactExports.useEffect(() => {
+    const onKey = (e) => {
+      const t = e.target;
+      if (t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable)) return;
+      if (!(e.ctrlKey || e.metaKey)) return;
+      const key = e.key.toLowerCase();
+      if (key === "z" && !e.shiftKey) {
+        e.preventDefault();
+        hist.undo();
+      } else if (key === "z" && e.shiftKey || key === "y") {
+        e.preventDefault();
+        hist.redo();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [hist]);
   ReactExports.useEffect(() => {
     if (!controlled) onChange?.({ nodes: flow.nodes, edges: flow.edges });
   }, [flow.nodes, flow.edges, onChange, controlled]);
@@ -11489,15 +11665,32 @@ function FlowEditorInner({
     [flow]
   );
   const deleteNodes = ReactExports.useCallback(
-    (ids) => {
+    async (ids) => {
       if (ids.length === 0) return;
+      const targets = flow.nodes.filter((n) => ids.includes(n.id));
+      if (targets.length === 0) return;
+      if (confirmDelete) {
+        const attached = flow.edges.filter((e) => ids.includes(e.source) || ids.includes(e.target));
+        if (!await confirmDelete({ nodes: targets, edges: attached })) return;
+      }
       const doomed = new Set(ids);
-      flow.setNodes((all) => removeNodes({ nodes: all, edges: [] }, ids).nodes);
-      flow.setEdges((all) => removeNodes({ nodes: [], edges: all }, ids).edges);
+      flow.setGraph(removeNodes({ nodes: flow.nodes, edges: flow.edges }, ids));
       setSelectedId((cur) => cur !== null && doomed.has(cur) ? null : cur);
       onDelete?.(ids);
     },
-    [flow, onDelete]
+    [flow, onDelete, confirmDelete]
+  );
+  const deleteEdges = ReactExports.useCallback(
+    async (ids) => {
+      if (ids.length === 0) return;
+      const targets = flow.edges.filter((e) => ids.includes(e.id));
+      if (targets.length === 0) return;
+      if (confirmDelete && !await confirmDelete({ nodes: [], edges: targets })) return;
+      flow.setEdges((all) => removeEdges(all, ids));
+      setSelectedEdgeId((cur) => cur !== null && ids.includes(cur) ? null : cur);
+      onEdgeDelete?.(ids);
+    },
+    [flow, onEdgeDelete, confirmDelete]
   );
   const api = ReactExports.useMemo(() => {
     const toWorkflow = () => exportWorkflow({ nodes: flow.nodes, edges: flow.edges }, metadata);
@@ -11517,18 +11710,8 @@ function FlowEditorInner({
       updateNode: (next) => flow.setNodes((all) => all.map((x) => x.id === next.id ? next : x)),
       deleteNodes,
       deleteSelected: () => deleteNodes(selectedId ? [selectedId] : []),
-      deleteEdges: (ids) => {
-        if (ids.length === 0) return;
-        flow.setEdges((all) => removeEdges(all, ids));
-        setSelectedEdgeId((cur) => cur !== null && ids.includes(cur) ? null : cur);
-        onEdgeDelete?.(ids);
-      },
-      deleteSelectedEdge: () => {
-        if (!selectedEdgeId) return;
-        flow.setEdges((all) => removeEdges(all, [selectedEdgeId]));
-        setSelectedEdgeId(null);
-        onEdgeDelete?.([selectedEdgeId]);
-      },
+      deleteEdges,
+      deleteSelectedEdge: () => deleteEdges(selectedEdgeId ? [selectedEdgeId] : []),
       setEdgeLabel: (id2, label) => flow.setEdges((all) => setEdgeLabel(all, id2, label)),
       duplicateNode: (id2) => {
         const src = flow.nodes.find((n) => n.id === id2);
@@ -11538,22 +11721,20 @@ function FlowEditorInner({
         setSelectedId(copy.id);
         return copy.id;
       },
-      setGraph: (graph) => {
-        flow.setNodes(graph.nodes);
-        flow.setEdges(graph.edges);
-      },
+      setGraph: (graph) => flow.setGraph(graph),
       run: () => runner.run({ nodes: flow.nodes, edges: flow.edges }, executors),
       cancel: runner.cancel,
       reset: runner.reset,
       toWorkflow,
       exportWorkflow: () => downloadWorkflow(toWorkflow(), metadata),
-      importWorkflow: () => pickWorkflow((graph) => {
-        flow.setNodes(graph.nodes);
-        flow.setEdges(graph.edges);
-      }),
-      fitView: () => rf.fitView({ padding: 0.2 })
+      importWorkflow: () => pickWorkflow((graph) => flow.setGraph(graph)),
+      fitView: () => rf.fitView({ padding: 0.2 }),
+      undo: hist.undo,
+      redo: hist.redo,
+      canUndo: hist.canUndo,
+      canRedo: hist.canRedo
     };
-  }, [flow, selectedId, selected2, runner, executors, metadata, addNode, deleteNodes, rf]);
+  }, [flow, selectedId, selected2, selectedEdgeId, selectedEdge, runner, executors, metadata, addNode, deleteNodes, deleteEdges, hist, rf]);
   ReactExports.useImperativeHandle(apiRef, () => api, [api]);
   const dropHandlers = paletteDropHandlers((kindName, evt) => {
     const point = rf.screenToFlowPosition({ x: evt.clientX, y: evt.clientY });
@@ -11564,6 +11745,31 @@ function FlowEditorInner({
   const toolbar = slots.toolbar ? slots.toolbar(api) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     startActions.map((a) => renderAction(a, api)),
     builtins.run !== false && /* @__PURE__ */ jsxRuntime.jsx(FlowRunControls, { running: api.running, onRun: api.run, onCancel: api.cancel, onReset: api.reset }),
+    builtins.history !== false && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ff-editor__sep" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          className: "ff-editor__btn",
+          "data-action": "undo",
+          title: "Undo (Ctrl+Z)",
+          disabled: !api.canUndo,
+          onClick: api.undo,
+          children: "\u21B6 Undo"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          className: "ff-editor__btn",
+          "data-action": "redo",
+          title: "Redo (Ctrl+Shift+Z)",
+          disabled: !api.canRedo,
+          onClick: api.redo,
+          children: "\u21B7 Redo"
+        }
+      )
+    ] }),
     (builtins.export !== false || builtins.import !== false) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ff-editor__sep" }),
     builtins.export !== false && /* @__PURE__ */ jsxRuntime.jsx("button", { className: "ff-editor__btn", "data-action": "export", onClick: api.exportWorkflow, children: "\u2193 Export" }),
     builtins.import !== false && /* @__PURE__ */ jsxRuntime.jsx("button", { className: "ff-editor__btn", "data-action": "import", onClick: api.importWorkflow, children: "\u2191 Import" }),
@@ -11588,12 +11794,14 @@ function FlowEditorInner({
           onNodesChange: flow.onNodesChange,
           onEdgesChange: flow.onEdgesChange,
           onConnect: flow.onConnect,
+          onNodeDragStart: hist.onNodeDragStart,
           onNodeClick: handleNodeClick2,
           onNodeContextMenu: builtins.contextMenu === false ? void 0 : handleNodeContextMenu,
           onEdgeClick: handleEdgeClick,
           onEdgeContextMenu: builtins.edgeContextMenu === false ? void 0 : handleEdgeContextMenu,
           onEdgesDelete: (deleted) => onEdgeDelete?.(deleted.map((e) => e.id)),
           onNodesDelete: (deleted) => onDelete?.(deleted.map((n) => n.id)),
+          onBeforeDelete: confirmDelete ? async ({ nodes, edges }) => confirmDelete({ nodes, edges }) : void 0,
           deleteKeyCode: ["Delete", "Backspace"],
           height: "100%",
           toolbar,
@@ -11764,6 +11972,8 @@ function makeControlledFlowAdapter(value, onChange) {
       const nextEdges = typeof next === "function" ? next(value.edges) : next;
       apply({ nodes: value.nodes, edges: nextEdges });
     },
+    // Atomic both-at-once commit — the reason this exists (see UseFlowStateReturn).
+    setGraph: (graph) => apply(graph),
     onNodesChange: (changes) => {
       apply({ nodes: applyNodeChanges(changes, value.nodes), edges: value.edges });
     },
@@ -11850,6 +12060,7 @@ function NodePort({ side, type, id: id2, style: style2, title, className }) {
 // src/index.ts
 registerBuiltinKinds();
 
+exports.ANY_PORT_TYPE = ANY_PORT_TYPE;
 exports.ActionNode = ActionNode;
 exports.BUILTIN_KINDS = BUILTIN_KINDS;
 exports.ConfigFieldRenderer = ConfigFieldRenderer;
@@ -11875,9 +12086,12 @@ exports.WORKFLOW_SCHEMA_VERSION = WORKFLOW_SCHEMA_VERSION;
 exports.applyStatusesToNodes = applyStatusesToNodes;
 exports.buildNodeTypes = buildNodeTypes;
 exports.categoryAccent = categoryAccent;
+exports.createConnectionValidator = createConnectionValidator;
+exports.createHistory = createHistory;
 exports.decodePause = decodePause;
 exports.defaultConfigFor = defaultConfigFor;
 exports.defaultNodeTypes = defaultNodeTypes;
+exports.defaultPortCompatibility = defaultPortCompatibility;
 exports.defineNode = defineNode;
 exports.encodePause = encodePause;
 exports.exportWorkflow = exportWorkflow;
@@ -11899,6 +12113,7 @@ exports.resolvePortSpec = resolvePortSpec;
 exports.runFlow = runFlow;
 exports.useFlowEditor = useFlowEditor;
 exports.useFlowEditorOptional = useFlowEditorOptional;
+exports.useFlowHistory = useFlowHistory;
 exports.useFlowRun = useFlowRun;
 exports.useFlowState = useFlowState;
 exports.validateConfig = validateConfig;