@particle-academy/fancy-flow 0.19.0 → 0.21.0

package/dist/index.cjs

@@ -2,7 +2,7 @@
 
 var ReactExports = require('react');
 var jsxRuntime = require('react/jsx-runtime');
-require('react-dom');
+var reactDom = require('react-dom');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -1388,9 +1388,9 @@ function creator_default(name) {
 // node_modules/d3-selection/src/selector.js
 function none() {
 }
-function selector_default(selector) {
-  return selector == null ? none : function() {
-    return this.querySelector(selector);
+function selector_default(selector2) {
+  return selector2 == null ? none : function() {
+    return this.querySelector(selector2);
   };
 }
 
@@ -1417,9 +1417,9 @@ function array(x) {
 function empty() {
   return [];
 }
-function selectorAll_default(selector) {
-  return selector == null ? empty : function() {
-    return this.querySelectorAll(selector);
+function selectorAll_default(selector2) {
+  return selector2 == null ? empty : function() {
+    return this.querySelectorAll(selector2);
   };
 }
 
@@ -1444,14 +1444,14 @@ function selectAll_default(select) {
 }
 
 // node_modules/d3-selection/src/matcher.js
-function matcher_default(selector) {
+function matcher_default(selector2) {
   return function() {
-    return this.matches(selector);
+    return this.matches(selector2);
   };
 }
-function childMatcher(selector) {
+function childMatcher(selector2) {
   return function(node) {
-    return node.matches(selector);
+    return node.matches(selector2);
   };
 }
 
@@ -1520,11 +1520,11 @@ EnterNode.prototype = {
   insertBefore: function(child, next) {
     return this._parent.insertBefore(child, next);
   },
-  querySelector: function(selector) {
-    return this._parent.querySelector(selector);
+  querySelector: function(selector2) {
+    return this._parent.querySelector(selector2);
   },
-  querySelectorAll: function(selector) {
-    return this._parent.querySelectorAll(selector);
+  querySelectorAll: function(selector2) {
+    return this._parent.querySelectorAll(selector2);
   }
 };
 
@@ -2135,8 +2135,8 @@ Selection.prototype = selection.prototype = {
 var selection_default = selection;
 
 // node_modules/d3-selection/src/select.js
-function select_default2(selector) {
-  return typeof selector === "string" ? new Selection([[document.querySelector(selector)]], [document.documentElement]) : new Selection([[selector]], root);
+function select_default2(selector2) {
+  return typeof selector2 === "string" ? new Selection([[document.querySelector(selector2)]], [document.documentElement]) : new Selection([[selector2]], root);
 }
 
 // node_modules/d3-selection/src/sourceEvent.js
@@ -4871,6 +4871,28 @@ var addEdge = (edgeParams, edges, options = {}) => {
   }
   return edges.concat(edge);
 };
+var reconnectEdge = (oldEdge, newConnection, edges, options = { shouldReplaceId: true }) => {
+  const { id: oldEdgeId, ...rest } = oldEdge;
+  if (!newConnection.source || !newConnection.target) {
+    options.onError?.("006", errorMessages["error006"]());
+    return edges;
+  }
+  const foundEdge = edges.find((e) => e.id === oldEdge.id);
+  if (!foundEdge) {
+    options.onError?.("007", errorMessages["error007"](oldEdgeId));
+    return edges;
+  }
+  const edgeIdGenerator = options.getEdgeId || getEdgeId;
+  const edge = {
+    ...rest,
+    id: options.shouldReplaceId ? edgeIdGenerator(newConnection) : oldEdgeId,
+    source: newConnection.source,
+    target: newConnection.target,
+    sourceHandle: newConnection.sourceHandle,
+    targetHandle: newConnection.targetHandle
+  };
+  return edges.filter((e) => e.id !== oldEdgeId).concat(edge);
+};
 function getStraightPath({ sourceX, sourceY, targetX, targetY }) {
   const [labelX, labelY, offsetX, offsetY] = getEdgeCenter({
     sourceX,
@@ -5128,6 +5150,40 @@ function createMarkerIds(edges, { id: id2, defaultColor, defaultMarkerStart, def
     return markers;
   }, []).sort((a, b) => a.id.localeCompare(b.id));
 }
+function getNodeToolbarTransform(nodeRect, viewport, position, offset, align) {
+  let alignmentOffset = 0.5;
+  if (align === "start") {
+    alignmentOffset = 0;
+  } else if (align === "end") {
+    alignmentOffset = 1;
+  }
+  let pos = [
+    (nodeRect.x + nodeRect.width * alignmentOffset) * viewport.zoom + viewport.x,
+    nodeRect.y * viewport.zoom + viewport.y - offset
+  ];
+  let shift = [-100 * alignmentOffset, -100];
+  switch (position) {
+    case Position.Right:
+      pos = [
+        (nodeRect.x + nodeRect.width) * viewport.zoom + viewport.x + offset,
+        (nodeRect.y + nodeRect.height * alignmentOffset) * viewport.zoom + viewport.y
+      ];
+      shift = [0, -100 * alignmentOffset];
+      break;
+    case Position.Bottom:
+      pos[1] = (nodeRect.y + nodeRect.height) * viewport.zoom + viewport.y + offset;
+      shift[1] = 0;
+      break;
+    case Position.Left:
+      pos = [
+        nodeRect.x * viewport.zoom + viewport.x - offset,
+        (nodeRect.y + nodeRect.height * alignmentOffset) * viewport.zoom + viewport.y
+      ];
+      shift = [-100, -100 * alignmentOffset];
+      break;
+  }
+  return `translate(${pos[0]}px, ${pos[1]}px) translate(${shift[0]}%, ${shift[1]}%)`;
+}
 var SELECTED_NODE_Z = 1e3;
 var ROOT_PARENT_Z_INCREMENT = 10;
 var defaultOptions = {
@@ -5495,10 +5551,10 @@ function isParentSelected(node, nodeLookup) {
   }
   return isParentSelected(parentNode, nodeLookup);
 }
-function hasSelector(target, selector, domNode) {
+function hasSelector(target, selector2, domNode) {
   let current = target;
   do {
-    if (current?.matches?.(selector))
+    if (current?.matches?.(selector2))
       return true;
     if (current === domNode)
       return false;
@@ -6456,6 +6512,8 @@ var ResizeControlVariant;
   ResizeControlVariant2["Line"] = "line";
   ResizeControlVariant2["Handle"] = "handle";
 })(ResizeControlVariant || (ResizeControlVariant = {}));
+var XY_RESIZER_HANDLE_POSITIONS = ["top-left", "top-right", "bottom-left", "bottom-right"];
+var XY_RESIZER_LINE_POSITIONS = ["top", "right", "bottom", "left"];
 function getResizeDirection({ width, prevWidth, height, prevHeight, affectsX, affectsY }) {
   const deltaWidth = width - prevWidth;
   const deltaHeight = height - prevHeight;
@@ -6812,7 +6870,7 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
     destroy
   };
 }
-function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
+function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnapshot, selector2, isEqual) {
   const instRef = ReactExports.useRef(null);
   let inst;
   if (instRef.current === null) {
@@ -6829,7 +6887,7 @@ function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnaps
       if (!hasMemo) {
         hasMemo = true;
         memoizedSnapshot = nextSnapshot;
-        const nextSelection2 = selector(nextSnapshot);
+        const nextSelection2 = selector2(nextSnapshot);
         if (isEqual !== void 0 && inst.hasValue) {
           const currentSelection = inst.value;
           if (isEqual(currentSelection, nextSelection2)) {
@@ -6845,7 +6903,7 @@ function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnaps
       if (Object.is(prevSnapshot, nextSnapshot)) {
         return prevSelection;
       }
-      const nextSelection = selector(nextSnapshot);
+      const nextSelection = selector2(nextSnapshot);
       if (isEqual !== void 0 && isEqual(prevSelection, nextSelection)) {
         memoizedSnapshot = nextSnapshot;
         return prevSelection;
@@ -6858,7 +6916,7 @@ function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnaps
     const getSnapshotWithSelector = () => memoizedSelector(getSnapshot());
     const getServerSnapshotWithSelector = maybeGetServerSnapshot === null ? void 0 : () => memoizedSelector(maybeGetServerSnapshot());
     return [getSnapshotWithSelector, getServerSnapshotWithSelector];
-  }, [getSnapshot, getServerSnapshot, selector, isEqual]);
+  }, [getSnapshot, getServerSnapshot, selector2, isEqual]);
   const value = ReactExports.useSyncExternalStore(subscribe, getSelection, getServerSelection);
   ReactExports.useEffect(() => {
     inst.hasValue = true;
@@ -6905,12 +6963,12 @@ var createStore = (createState) => createState ? createStoreImpl(createState) :
 var { useDebugValue: useDebugValue2 } = ReactExports__default.default;
 var { useSyncExternalStoreWithSelector: useSyncExternalStoreWithSelector2 } = use_sync_external_store_with_selector_default;
 var identity3 = (arg) => arg;
-function useStoreWithEqualityFn(api, selector = identity3, equalityFn) {
+function useStoreWithEqualityFn(api, selector2 = identity3, equalityFn) {
   const slice = useSyncExternalStoreWithSelector2(
     api.subscribe,
     api.getState,
     api.getServerState || api.getInitialState,
-    selector,
+    selector2,
     equalityFn
   );
   useDebugValue2(slice);
@@ -6918,7 +6976,7 @@ function useStoreWithEqualityFn(api, selector = identity3, equalityFn) {
 }
 var createWithEqualityFnImpl = (createState, defaultEqualityFn) => {
   const api = createStore(createState);
-  const useBoundStoreWithEqualityFn = (selector, equalityFn = defaultEqualityFn) => useStoreWithEqualityFn(api, selector, equalityFn);
+  const useBoundStoreWithEqualityFn = (selector2, equalityFn = defaultEqualityFn) => useStoreWithEqualityFn(api, selector2, equalityFn);
   Object.assign(useBoundStoreWithEqualityFn, api);
   return useBoundStoreWithEqualityFn;
 };
@@ -6964,12 +7022,12 @@ function shallow$1(objA, objB) {
 var StoreContext = ReactExports.createContext(null);
 var Provider$1 = StoreContext.Provider;
 var zustandErrorMessage = errorMessages["error001"]("react");
-function useStore(selector, equalityFn) {
+function useStore(selector2, equalityFn) {
   const store = ReactExports.useContext(StoreContext);
   if (store === null) {
     throw new Error(zustandErrorMessage);
   }
-  return useStoreWithEqualityFn(store, selector, equalityFn);
+  return useStoreWithEqualityFn(store, selector2, equalityFn);
 }
 function useStoreApi() {
   const store = ReactExports.useContext(StoreContext);
@@ -7509,6 +7567,12 @@ function addEdge2(edgeParams, edges, options = {}) {
     onError: options.onError ?? defaultOnError
   });
 }
+function reconnectEdge2(oldEdge, newConnection, edges, options = { shouldReplaceId: true }) {
+  return reconnectEdge(oldEdge, newConnection, edges, {
+    ...options,
+    onError: options.onError ?? defaultOnError
+  });
+}
 var isNode = (element) => isNodeBase(element);
 var isEdge = (element) => isEdgeBase(element);
 function fixedForwardRef(render) {
@@ -10161,7 +10225,69 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
     ...color2 && { [isHandleControl ? "backgroundColor" : "borderColor"]: color2 }
   }, children: children2 });
 }
-ReactExports.memo(ResizeControl);
+var NodeResizeControl = ReactExports.memo(ResizeControl);
+function NodeResizer({ nodeId, isVisible = true, handleClassName, handleStyle, lineClassName, lineStyle, color: color2, minWidth = 10, minHeight = 10, maxWidth = Number.MAX_VALUE, maxHeight = Number.MAX_VALUE, keepAspectRatio = false, autoScale = true, shouldResize, onResizeStart, onResize, onResizeEnd }) {
+  if (!isVisible) {
+    return null;
+  }
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [XY_RESIZER_LINE_POSITIONS.map((position) => jsxRuntime.jsx(NodeResizeControl, { className: lineClassName, style: lineStyle, nodeId, position, variant: ResizeControlVariant.Line, color: color2, minWidth, minHeight, maxWidth, maxHeight, onResizeStart, keepAspectRatio, autoScale, shouldResize, onResize, onResizeEnd }, position)), XY_RESIZER_HANDLE_POSITIONS.map((position) => jsxRuntime.jsx(NodeResizeControl, { className: handleClassName, style: handleStyle, nodeId, position, color: color2, minWidth, minHeight, maxWidth, maxHeight, onResizeStart, keepAspectRatio, autoScale, shouldResize, onResize, onResizeEnd }, position))] });
+}
+var selector = (state) => state.domNode?.querySelector(".react-flow__renderer");
+function NodeToolbarPortal({ children: children2 }) {
+  const wrapperRef = useStore(selector);
+  if (!wrapperRef) {
+    return null;
+  }
+  return reactDom.createPortal(children2, wrapperRef);
+}
+var nodeEqualityFn = (a, b) => a?.internals.positionAbsolute.x !== b?.internals.positionAbsolute.x || a?.internals.positionAbsolute.y !== b?.internals.positionAbsolute.y || a?.measured.width !== b?.measured.width || a?.measured.height !== b?.measured.height || a?.selected !== b?.selected || a?.internals.z !== b?.internals.z;
+var nodesEqualityFn = (a, b) => {
+  if (a.size !== b.size) {
+    return false;
+  }
+  for (const [key, node] of a) {
+    if (nodeEqualityFn(node, b.get(key))) {
+      return false;
+    }
+  }
+  return true;
+};
+var storeSelector = (state) => ({
+  x: state.transform[0],
+  y: state.transform[1],
+  zoom: state.transform[2],
+  selectedNodesCount: state.nodes.filter((node) => node.selected).length
+});
+function NodeToolbar({ nodeId, children: children2, className, style: style2, isVisible, position = Position.Top, offset = 10, align = "center", ...rest }) {
+  const contextNodeId = useNodeId();
+  const nodesSelector = ReactExports.useCallback((state) => {
+    const nodeIds = Array.isArray(nodeId) ? nodeId : [nodeId || contextNodeId || ""];
+    const internalNodes = nodeIds.reduce((res, id2) => {
+      const node = state.nodeLookup.get(id2);
+      if (node) {
+        res.set(node.id, node);
+      }
+      return res;
+    }, /* @__PURE__ */ new Map());
+    return internalNodes;
+  }, [nodeId, contextNodeId]);
+  const nodes = useStore(nodesSelector, nodesEqualityFn);
+  const { x, y, zoom, selectedNodesCount } = useStore(storeSelector, shallow$1);
+  const isActive = typeof isVisible === "boolean" ? isVisible : nodes.size === 1 && nodes.values().next().value?.selected && selectedNodesCount === 1;
+  if (!isActive || !nodes.size) {
+    return null;
+  }
+  const nodeRect = getInternalNodesBounds(nodes);
+  const nodesArray = Array.from(nodes.values());
+  const zIndex = Math.max(...nodesArray.map((node) => node.internals.z + 1));
+  const wrapperStyle2 = {
+    position: "absolute",
+    transform: getNodeToolbarTransform(nodeRect, { x, y, zoom }, position, offset, align),
+    zIndex,
+    ...style2
+  };
+  return jsxRuntime.jsx(NodeToolbarPortal, { children: jsxRuntime.jsx("div", { style: wrapperStyle2, className: cc(["react-flow__node-toolbar", className]), ...rest, "data-id": nodesArray.reduce((acc, node) => `${acc}${node.id} `, "").trim(), children: children2 }) });
+}
 function NodeShellInner({
   node,
   accent,
@@ -11219,6 +11345,7 @@ function toSchemaNode(n) {
   const data = n.data ?? {};
   const kindName = data.kind ?? n.type ?? "custom";
   const ports = resolveNodePorts(n, getNodeKind(kindName) ?? void 0);
+  const node = n;
   return {
     id: n.id,
     kind: kindName,
@@ -11227,7 +11354,14 @@ function toSchemaNode(n) {
     description: data.description,
     config: data.config,
     inputs: ports.inputs,
-    outputs: ports.outputs
+    outputs: ports.outputs,
+    // Visual layout — only when explicitly set (never persist auto-`measured`
+    // dimensions, which are derived, not authored).
+    ...node.parentId ? { parentId: node.parentId } : {},
+    ...node.extent ? { extent: node.extent } : {},
+    ...typeof node.width === "number" ? { width: node.width } : {},
+    ...typeof node.height === "number" ? { height: node.height } : {},
+    ...node.style ? { style: node.style } : {}
   };
 }
 function toSchemaEdge(e) {
@@ -11240,9 +11374,13 @@ function toSchemaEdge(e) {
     label: typeof e.label === "string" ? e.label : void 0
   };
 }
+function migrateSchema(schema) {
+  return schema;
+}
 function importWorkflow(schema, options = {}) {
   const issues = [];
   const lenient = options.lenient === true;
+  schema = migrateSchema(schema);
   if (!schema || typeof schema !== "object") {
     return { ok: false, graph: { nodes: [], edges: [] }, issues: [{ level: "error", message: "Schema is not an object." }] };
   }
@@ -11276,6 +11414,12 @@ function importWorkflow(schema, options = {}) {
       id: n.id,
       type: kindId,
       position: { x: n.position?.x ?? 0, y: n.position?.y ?? 0 },
+      // Rehydrate visual layout onto the node's top level (where xyflow reads it).
+      ...n.parentId ? { parentId: n.parentId } : {},
+      ...n.extent ? { extent: n.extent } : {},
+      ...typeof n.width === "number" ? { width: n.width } : {},
+      ...typeof n.height === "number" ? { height: n.height } : {},
+      ...n.style ? { style: n.style } : {},
       data: {
         kind: kindId,
         label: n.label ?? kind?.label ?? n.kind,
@@ -11380,10 +11524,20 @@ function RegistryNodeInner(props) {
         "ff-node",
         `ff-node--status-${status}`,
         `ff-node--cat-${kind.category}`,
-        props.selected ? "ff-node--selected" : ""
+        props.selected ? "ff-node--selected" : "",
+        kind.resizable ? "ff-node--resizable" : ""
       ].filter(Boolean).join(" "),
       style: { borderColor: props.selected ? accent : void 0 },
       children: [
+        kind.resizable && /* @__PURE__ */ jsxRuntime.jsx(
+          NodeResizer,
+          {
+            isVisible: props.selected ?? false,
+            color: accent,
+            ...typeof kind.resizable === "object" ? kind.resizable : {}
+          }
+        ),
+        kind.toolbar && /* @__PURE__ */ jsxRuntime.jsx(NodeToolbar, { isVisible: props.selected ?? false, children: kind.toolbar({ nodeId: props.id, config, selected: props.selected ?? false }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "ff-node__header", style: { background: accent }, children: [
           kind.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ff-node__icon", "aria-hidden": true, children: kind.icon }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ff-node__tag", children: kind.label.toUpperCase() }),
@@ -11523,6 +11677,65 @@ function duplicateNode(node, id2, offset = 40) {
     data: JSON.parse(JSON.stringify(node.data ?? {}))
   };
 }
+function cloneSubgraph(nodes, edges, opts) {
+  const offset = opts.offset ?? 40;
+  const idMap = /* @__PURE__ */ new Map();
+  for (const n of nodes) idMap.set(n.id, opts.makeId());
+  const clonedNodes = nodes.map((n) => {
+    const cloned = duplicateNode(n, idMap.get(n.id), offset);
+    const parentId = n.parentId;
+    if (parentId && idMap.has(parentId)) cloned.parentId = idMap.get(parentId);
+    else if (parentId) delete cloned.parentId;
+    return cloned;
+  });
+  const clonedEdges = edges.filter((e) => idMap.has(e.source) && idMap.has(e.target)).map((e) => ({ ...e, id: opts.makeId(), source: idMap.get(e.source), target: idMap.get(e.target) }));
+  return { nodes: clonedNodes, edges: clonedEdges, idMap };
+}
+function reconnectEdge3(edges, oldEdge, newConnection) {
+  return reconnectEdge2(oldEdge, newConnection, edges, { shouldReplaceId: false });
+}
+var nodeW = (n) => n.width ?? n.measured?.width ?? 0;
+var nodeH = (n) => n.height ?? n.measured?.height ?? 0;
+function alignNodes(nodes, edge) {
+  if (nodes.length < 2) return nodes;
+  const minL = Math.min(...nodes.map((n) => n.position.x));
+  const maxR = Math.max(...nodes.map((n) => n.position.x + nodeW(n)));
+  const minT = Math.min(...nodes.map((n) => n.position.y));
+  const maxB = Math.max(...nodes.map((n) => n.position.y + nodeH(n)));
+  const cx = (minL + maxR) / 2;
+  const cy = (minT + maxB) / 2;
+  return nodes.map((n) => {
+    let { x, y } = n.position;
+    if (edge === "left") x = minL;
+    else if (edge === "right") x = maxR - nodeW(n);
+    else if (edge === "hcenter") x = cx - nodeW(n) / 2;
+    else if (edge === "top") y = minT;
+    else if (edge === "bottom") y = maxB - nodeH(n);
+    else if (edge === "vcenter") y = cy - nodeH(n) / 2;
+    return { ...n, position: { x, y } };
+  });
+}
+function distributeNodes(nodes, axis) {
+  if (nodes.length < 3) return nodes;
+  const size = (n) => axis === "h" ? nodeW(n) : nodeH(n);
+  const coord = (n) => axis === "h" ? n.position.x : n.position.y;
+  const sorted = [...nodes].sort((a, b) => coord(a) - coord(b));
+  const start2 = coord(sorted[0]);
+  const last = sorted[sorted.length - 1];
+  const end = coord(last) + size(last);
+  const totalSize = sorted.reduce((s, n) => s + size(n), 0);
+  const gap = (end - start2 - totalSize) / (sorted.length - 1);
+  const posById = /* @__PURE__ */ new Map();
+  let cursor = start2;
+  for (const n of sorted) {
+    posById.set(n.id, cursor);
+    cursor += size(n) + gap;
+  }
+  return nodes.map((n) => {
+    const p = posById.get(n.id);
+    return { ...n, position: axis === "h" ? { ...n.position, x: p } : { ...n.position, y: p } };
+  });
+}
 var FlowEditorContext = ReactExports.createContext(null);
 var FlowEditorProvider = FlowEditorContext.Provider;
 function useFlowEditor() {
@@ -11692,6 +11905,89 @@ function FlowEditorInner({
     },
     [flow, onEdgeDelete, confirmDelete]
   );
+  const selectedNodes = ReactExports.useMemo(() => flow.nodes.filter((n) => n.selected), [flow.nodes]);
+  const selectedIds = ReactExports.useMemo(() => selectedNodes.map((n) => n.id), [selectedNodes]);
+  const clipboard = ReactExports.useRef(null);
+  const copySelection = ReactExports.useCallback(() => {
+    const sel = flow.nodes.filter((n) => n.selected);
+    if (sel.length === 0) return;
+    const ids = new Set(sel.map((n) => n.id));
+    const edges = flow.edges.filter((e) => ids.has(e.source) && ids.has(e.target));
+    clipboard.current = { nodes: sel.map((n) => ({ ...n })), edges: edges.map((e) => ({ ...e })) };
+  }, [flow]);
+  const pasteClipboard = ReactExports.useCallback(
+    (at) => {
+      const clip = clipboard.current;
+      if (!clip || clip.nodes.length === 0) return;
+      const { nodes: clones, edges: cloneEdges } = cloneSubgraph(clip.nodes, clip.edges, { makeId: newNodeId, offset: 40 });
+      let placed = clones;
+      if (at) {
+        const minX = Math.min(...clones.map((n) => n.position.x));
+        const minY = Math.min(...clones.map((n) => n.position.y));
+        placed = clones.map((n) => ({ ...n, position: { x: n.position.x - minX + at.x, y: n.position.y - minY + at.y } }));
+      }
+      flow.setGraph({
+        nodes: [...flow.nodes.map((n) => ({ ...n, selected: false })), ...placed.map((n) => ({ ...n, selected: true }))],
+        edges: [...flow.edges, ...cloneEdges]
+      });
+    },
+    [flow]
+  );
+  const duplicateSelected = ReactExports.useCallback(() => {
+    const sel = flow.nodes.filter((n) => n.selected);
+    if (sel.length === 0) return;
+    const ids = new Set(sel.map((n) => n.id));
+    const internal2 = flow.edges.filter((e) => ids.has(e.source) && ids.has(e.target));
+    const { nodes: clones, edges: cloneEdges } = cloneSubgraph(sel, internal2, { makeId: newNodeId, offset: 40 });
+    flow.setGraph({
+      nodes: [...flow.nodes.map((n) => ({ ...n, selected: false })), ...clones.map((n) => ({ ...n, selected: true }))],
+      edges: [...flow.edges, ...cloneEdges]
+    });
+  }, [flow]);
+  const alignSelected = ReactExports.useCallback(
+    (edge) => {
+      const sel = flow.nodes.filter((n) => n.selected);
+      if (sel.length < 2) return;
+      const byId = new Map(alignNodes(sel, edge).map((n) => [n.id, n]));
+      flow.setNodes((all) => all.map((n) => byId.get(n.id) ?? n));
+    },
+    [flow]
+  );
+  const distributeSelected = ReactExports.useCallback(
+    (axis) => {
+      const sel = flow.nodes.filter((n) => n.selected);
+      if (sel.length < 3) return;
+      const byId = new Map(distributeNodes(sel, axis).map((n) => [n.id, n]));
+      flow.setNodes((all) => all.map((n) => byId.get(n.id) ?? n));
+    },
+    [flow]
+  );
+  const onReconnect = ReactExports.useCallback(
+    (oldEdge, conn) => flow.setEdges((eds) => reconnectEdge3(eds, oldEdge, conn)),
+    [flow]
+  );
+  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 === "c") copySelection();
+      else if (key === "x") {
+        e.preventDefault();
+        copySelection();
+        deleteNodes(selectedIds);
+      } else if (key === "v") {
+        e.preventDefault();
+        pasteClipboard();
+      } else if (key === "d") {
+        e.preventDefault();
+        duplicateSelected();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [copySelection, pasteClipboard, duplicateSelected, deleteNodes, selectedIds]);
   const api = ReactExports.useMemo(() => {
     const toWorkflow = () => exportWorkflow({ nodes: flow.nodes, edges: flow.edges }, metadata);
     return {
@@ -11702,6 +11998,8 @@ function FlowEditorInner({
       selected: selected2,
       selectedEdgeId,
       selectedEdge,
+      selectedIds,
+      selectedNodes,
       running: runner.running,
       statuses: runner.statuses,
       select: setSelectedId,
@@ -11722,6 +12020,15 @@ function FlowEditorInner({
         return copy.id;
       },
       setGraph: (graph) => flow.setGraph(graph),
+      duplicateSelected,
+      alignSelected,
+      distributeSelected,
+      copy: copySelection,
+      cut: () => {
+        copySelection();
+        deleteNodes(selectedIds);
+      },
+      paste: pasteClipboard,
       run: () => runner.run({ nodes: flow.nodes, edges: flow.edges }, executors),
       cancel: runner.cancel,
       reset: runner.reset,
@@ -11734,7 +12041,7 @@ function FlowEditorInner({
       canUndo: hist.canUndo,
       canRedo: hist.canRedo
     };
-  }, [flow, selectedId, selected2, selectedEdgeId, selectedEdge, runner, executors, metadata, addNode, deleteNodes, deleteEdges, hist, rf]);
+  }, [flow, selectedId, selected2, selectedEdgeId, selectedEdge, selectedIds, selectedNodes, runner, executors, metadata, addNode, deleteNodes, deleteEdges, duplicateSelected, alignSelected, distributeSelected, copySelection, pasteClipboard, hist, rf]);
   ReactExports.useImperativeHandle(apiRef, () => api, [api]);
   const dropHandlers = paletteDropHandlers((kindName, evt) => {
     const point = rf.screenToFlowPosition({ x: evt.clientX, y: evt.clientY });
@@ -11794,6 +12101,8 @@ function FlowEditorInner({
           onNodesChange: flow.onNodesChange,
           onEdgesChange: flow.onEdgesChange,
           onConnect: flow.onConnect,
+          onReconnect,
+          edgesReconnectable: true,
           onNodeDragStart: hist.onNodeDragStart,
           onNodeClick: handleNodeClick2,
           onNodeContextMenu: builtins.contextMenu === false ? void 0 : handleNodeContextMenu,
@@ -12083,9 +12392,11 @@ exports.SubgraphNode = SubgraphNode;
 exports.TriggerNode = TriggerNode;
 exports.WORKFLOW_SCHEMA_URL = WORKFLOW_SCHEMA_URL;
 exports.WORKFLOW_SCHEMA_VERSION = WORKFLOW_SCHEMA_VERSION;
+exports.alignNodes = alignNodes;
 exports.applyStatusesToNodes = applyStatusesToNodes;
 exports.buildNodeTypes = buildNodeTypes;
 exports.categoryAccent = categoryAccent;
+exports.cloneSubgraph = cloneSubgraph;
 exports.createConnectionValidator = createConnectionValidator;
 exports.createHistory = createHistory;
 exports.decodePause = decodePause;
@@ -12093,6 +12404,7 @@ exports.defaultConfigFor = defaultConfigFor;
 exports.defaultNodeTypes = defaultNodeTypes;
 exports.defaultPortCompatibility = defaultPortCompatibility;
 exports.defineNode = defineNode;
+exports.distributeNodes = distributeNodes;
 exports.encodePause = encodePause;
 exports.exportWorkflow = exportWorkflow;
 exports.getNodeKind = getNodeKind;
@@ -12101,10 +12413,12 @@ exports.importWorkflow = importWorkflow;
 exports.isPause = isPause;
 exports.isRichInputEnabled = isRichInputEnabled;
 exports.listNodeKinds = listNodeKinds;
+exports.migrateSchema = migrateSchema;
 exports.onNodeKindsChanged = onNodeKindsChanged;
 exports.onRichInputAdapterChanged = onRichInputAdapterChanged;
 exports.paletteDropHandlers = paletteDropHandlers;
 exports.pauseForHuman = pauseForHuman;
+exports.reconnectEdge = reconnectEdge3;
 exports.registerBuiltinKinds = registerBuiltinKinds;
 exports.registerNodeKind = registerNodeKind;
 exports.registerRichInputAdapter = registerRichInputAdapter;