@principal-ai/principal-view-react 0.13.21 → 0.13.23

package/dist/components/GraphRenderer.d.ts

@@ -64,6 +64,14 @@ export interface GraphRendererHandle {
     resetEditState: () => void;
     /** Check if there are unsaved changes */
     hasUnsavedChanges: () => boolean;
+    /** Whether there are changes that can be undone */
+    canUndo: () => boolean;
+    /** Whether there are changes that can be redone */
+    canRedo: () => boolean;
+    /** Undo the last change */
+    undo: () => void;
+    /** Redo the last undone change */
+    redo: () => void;
 }
 /** Base props shared by all render modes */
 interface GraphRendererBaseProps {

package/dist/components/GraphRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GraphRenderer.d.ts","sourceRoot":"","sources":["../../src/components/GraphRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAUN,MAAM,OAAO,CAAC;AAqBf,OAAO,8BAA8B,CAAC;AACtC,OAAO,KAAK,EAIV,SAAS,EACT,UAAU,EAIV,cAAc,EACd,gBAAgB,EACjB,MAAM,mCAAmC,CAAC;AAY3C;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,mCAA0C,CAAC;AAE5E,wDAAwD;AACxD,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACpC;AAED,wDAAwD;AACxD,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CAC/C;AAED,4CAA4C;AAC5C,MAAM,WAAW,cAAc;IAC7B,4BAA4B;IAC5B,eAAe,EAAE,kBAAkB,EAAE,CAAC;IACtC,6CAA6C;IAC7C,gBAAgB,EAAE,mBAAmB,EAAE,CAAC;IACxC,wCAAwC;IACxC,WAAW,EAAE,KAAK,CAAC;QACjB,MAAM,EAAE,MAAM,CAAC;QACf,OAAO,EAAE;YAAE,IAAI,CAAC,EAAE,MAAM,CAAC;YAAC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;SAAE,CAAC;KAC5D,CAAC,CAAC;IACH,uBAAuB;IACvB,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,0EAA0E;IAC1E,YAAY,EAAE,KAAK,CAAC;QAClB,IAAI,EAAE,MAAM,CAAC;QACb,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC,CAAC;IACH,mEAAmE;IACnE,YAAY,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAChE,oCAAoC;IACpC,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,wCAAwC;AACxC,MAAM,WAAW,mBAAmB;IAClC,8BAA8B;IAC9B,iBAAiB,EAAE,MAAM,cAAc,CAAC;IACxC,8CAA8C;IAC9C,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,yCAAyC;IACzC,iBAAiB,EAAE,MAAM,OAAO,CAAC;CAClC;AAED,4CAA4C;AAC5C,UAAU,sBAAsB;IAC9B,uCAAuC;IACvC,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC;IAEzB;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAElC;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IAEhC,qFAAqF;IACrF,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB,sBAAsB;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB,8BAA8B;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,+BAA+B;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,iCAAiC;IACjC,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;IAE/C;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B,sDAAsD;IACtD,MAAM,CAAC,EAAE,UAAU,EAAE,CAAC;IAEtB,mDAAmD;IACnD,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAE/C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,sBAAsB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvD;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAEhE;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IAEnC;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAE/B;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAE9E;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,eAAe,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAE9C;AAED,+CAA+C;AAC/C,MAAM,WAAW,kBAAmB,SAAQ,sBAAsB;IAChE,+BAA+B;IAC/B,MAAM,EAAE,cAAc,CAAC;IAEvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;CAC5B;AAy1DD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,aAAa,gGA4KxB,CAAC"}
+{"version":3,"file":"GraphRenderer.d.ts","sourceRoot":"","sources":["../../src/components/GraphRenderer.tsx"],"names":[],"mappings":"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"}

package/dist/components/GraphRenderer.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState, useEffect, useLayoutEffect, useCallback, useRef, useImperativeHandle, forwardRef, createContext, } from 'react';
 import { ReactFlow, Background, BackgroundVariant, Controls, MiniMap, ReactFlowProvider, useReactFlow, useUpdateNodeInternals, useViewport, applyNodeChanges, applyEdgeChanges, } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
@@ -7,6 +7,8 @@ import { useTheme } from '@principal-ade/industry-theme';
 import { CustomNode } from '../nodes/CustomNode';
 import { CustomEdge } from '../edges/CustomEdge';
 import { convertToXYFlowNodes, convertToXYFlowEdges, } from '../utils/graphConverter';
+import { GraphEditProvider } from '../contexts/GraphEditContext';
+import { useUndoRedo } from '../hooks/useUndoRedo';
 /**
  * Context for providing a portal target for tooltips.
  * This allows tooltips to be rendered within the graph container
@@ -84,7 +86,7 @@ const CenterIndicator = ({ color }) => {
 /**
  * Inner component that uses ReactFlow hooks
  */
-const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges, violations = [], configName: _configName, showMinimap = false, showControls = true, showBackground = true, backgroundVariant = 'lines', backgroundGap, showCenterIndicator = false, showTooltips = true, fitViewDuration = 200, highlightedNodeId, activeNodeIds, events = [], onEventProcessed, editable = false, onPendingChangesChange, onEditStateChange, editStateRef, onNodeClick: onNodeClickProp, fitViewToNodeIds, fitViewPadding = 0.2, draggableNodeIds, onNodeDragStop: onNodeDragStopProp, onCopy, }) => {
+const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges, violations = [], configName: _configName, showMinimap = false, showControls = true, showBackground = true, backgroundVariant = 'lines', backgroundGap, showCenterIndicator = false, showTooltips = true, fitViewDuration = 200, highlightedNodeId, activeNodeIds, events = [], onEventProcessed, editable = false, onPendingChangesChange, onEditStateChange, editStateRef, resetVisualStateRef, undoRedoFunctionsRef, pushHistory, clearHistory, undoFromStack, redoFromStack, onNodeClick: onNodeClickProp, fitViewToNodeIds, fitViewPadding = 0.2, draggableNodeIds, onNodeDragStop: onNodeDragStopProp, onCopy, }) => {
     const { fitView, fitBounds, getNodes } = useReactFlow();
     const updateNodeInternals = useUpdateNodeInternals();
     const { theme } = useTheme();
@@ -200,6 +202,8 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
             onPendingChangesChange?.(false);
             // Clear animation state to prevent stale animations from affecting new edges
             setAnimationState({ nodeAnimations: {}, edgeAnimations: {} });
+            // Clear undo/redo history when props change
+            clearHistory();
         }
     }, [propNodes, propEdges, editStateRef, onEditStateChange, onPendingChangesChange]);
     // When draggableNodeIds is provided, positions are managed externally
@@ -218,6 +222,10 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     // and receives state_changed event updates. localEdges only used in edit mode.
     const nodes = localNodes;
     const edges = editable ? localEdges : propEdges;
+    // Ref to track current xyflow nodes for undo/redo (set later via useEffect)
+    const xyflowNodesRef = useRef([]);
+    // Ref to capture node positions at drag start (for accurate undo "before" values)
+    const dragStartPositionsRef = useRef(new Map());
     // Helper to check if there are pending changes
     const checkHasChanges = useCallback((state) => {
         return (state.positionChanges.size > 0 ||
@@ -244,6 +252,34 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
         onEditStateChange?.(newState);
         onPendingChangesChange?.(hasChanges);
     }, [editStateRef, onEditStateChange, onPendingChangesChange, checkHasChanges]);
+    // Handler for node resize end - called from CustomNode via context
+    const handleNodeResizeEnd = useCallback((nodeId, dimensions) => {
+        if (!editable)
+            return;
+        // Capture before dimensions for undo
+        const currentNode = xyflowNodesRef.current.find((n) => n.id === nodeId);
+        const beforeDimensions = currentNode
+            ? { width: currentNode.width ?? 0, height: currentNode.height ?? 0 }
+            : { width: 0, height: 0 };
+        // Push to history
+        pushHistory([
+            {
+                type: 'dimension',
+                nodeId,
+                before: beforeDimensions,
+                after: dimensions,
+            },
+        ]);
+        updateEditState((prev) => {
+            const newDimensions = new Map(prev.dimensionChanges);
+            newDimensions.set(nodeId, dimensions);
+            return { ...prev, dimensionChanges: newDimensions };
+        });
+    }, [editable, updateEditState, pushHistory]);
+    // Memoize the context value to prevent unnecessary re-renders
+    const graphEditContextValue = useMemo(() => ({
+        onNodeResizeEnd: handleNodeResizeEnd,
+    }), [handleNodeResizeEnd]);
     // ============================================
     // ALIGNMENT GUIDES
     // ============================================
@@ -491,6 +527,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     // Create edge helper
     const createEdge = useCallback((from, to, type, sourceHandle, targetHandle) => {
         const edgeId = `${from}-${to}-${type}-${Date.now()}`;
+        const now = Date.now();
         // Add to local state with handle information
         const newEdge = {
             id: edgeId,
@@ -498,12 +535,19 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
             from,
             to,
             data: {},
-            createdAt: Date.now(),
-            updatedAt: Date.now(),
+            createdAt: now,
+            updatedAt: now,
             sourceHandle,
             targetHandle,
         };
         setLocalEdges((prev) => [...prev, newEdge]);
+        // Push to history for undo
+        pushHistory([
+            {
+                type: 'edgeCreate',
+                edge: newEdge,
+            },
+        ]);
         // Track the change
         updateEditState((prev) => ({
             ...prev,
@@ -512,7 +556,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
                 { id: edgeId, from, to, type, sourceHandle, targetHandle },
             ],
         }));
-    }, [updateEditState]);
+    }, [updateEditState, pushHistory]);
     // Handle new connection from drag
     const handleConnect = useCallback((connection) => {
         if (!editable || !connection.source || !connection.target)
@@ -837,6 +881,10 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     }, [edges]);
     // Local xyflow nodes state for dragging
     const [xyflowLocalNodes, setXyflowLocalNodes] = useState(xyflowNodesBase);
+    // Keep xyflowNodesRef in sync for undo/redo access to current node state
+    useEffect(() => {
+        xyflowNodesRef.current = xyflowLocalNodes;
+    }, [xyflowLocalNodes]);
     // Sync when base node IDs change
     const prevBaseNodesKeyRef = useRef(baseNodesKey);
     useEffect(() => {
@@ -915,6 +963,165 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
             onNodeDragStopProp(node.id, node.position);
         }
     }, [onNodeDragStopProp]);
+    // ============================================
+    // UNDO/REDO APPLY FUNCTIONS
+    // ============================================
+    // Apply undo - reverse the effects of history entries
+    const applyUndo = useCallback(() => {
+        const batch = undoFromStack();
+        if (!batch)
+            return;
+        // Process entries in reverse order for undo
+        for (const entry of batch.slice().reverse()) {
+            switch (entry.type) {
+                case 'position':
+                    // Restore previous position
+                    setXyflowLocalNodes((nodes) => nodes.map((n) => n.id === entry.nodeId
+                        ? { ...n, position: entry.before }
+                        : n));
+                    // Update edit state
+                    updateEditState((prev) => {
+                        const newPositions = new Map(prev.positionChanges);
+                        newPositions.set(entry.nodeId, entry.before);
+                        return { ...prev, positionChanges: newPositions };
+                    });
+                    break;
+                case 'dimension':
+                    // Restore previous dimensions
+                    setXyflowLocalNodes((nodes) => nodes.map((n) => n.id === entry.nodeId
+                        ? { ...n, width: entry.before.width, height: entry.before.height }
+                        : n));
+                    // Update edit state
+                    updateEditState((prev) => {
+                        const newDimensions = new Map(prev.dimensionChanges);
+                        newDimensions.set(entry.nodeId, entry.before);
+                        return { ...prev, dimensionChanges: newDimensions };
+                    });
+                    break;
+                case 'edgeCreate':
+                    // Remove the created edge
+                    setLocalEdges((edges) => edges.filter((e) => e.id !== entry.edge.id));
+                    // Update edit state
+                    updateEditState((prev) => ({
+                        ...prev,
+                        createdEdges: prev.createdEdges.filter((e) => e.id !== entry.edge.id),
+                    }));
+                    break;
+                case 'edgeDelete':
+                    // Restore the deleted edge
+                    setLocalEdges((edges) => [...edges, entry.edge]);
+                    // Update edit state
+                    updateEditState((prev) => ({
+                        ...prev,
+                        deletedEdges: prev.deletedEdges.filter((e) => e.id !== entry.edge.id),
+                    }));
+                    break;
+            }
+        }
+    }, [undoFromStack, updateEditState]);
+    // Apply redo - re-apply the effects of history entries
+    const applyRedo = useCallback(() => {
+        const batch = redoFromStack();
+        if (!batch)
+            return;
+        // Process entries in original order for redo
+        for (const entry of batch) {
+            switch (entry.type) {
+                case 'position':
+                    // Apply new position
+                    setXyflowLocalNodes((nodes) => nodes.map((n) => n.id === entry.nodeId
+                        ? { ...n, position: entry.after }
+                        : n));
+                    // Update edit state
+                    updateEditState((prev) => {
+                        const newPositions = new Map(prev.positionChanges);
+                        newPositions.set(entry.nodeId, entry.after);
+                        return { ...prev, positionChanges: newPositions };
+                    });
+                    break;
+                case 'dimension':
+                    // Apply new dimensions
+                    setXyflowLocalNodes((nodes) => nodes.map((n) => n.id === entry.nodeId
+                        ? { ...n, width: entry.after.width, height: entry.after.height }
+                        : n));
+                    // Update edit state
+                    updateEditState((prev) => {
+                        const newDimensions = new Map(prev.dimensionChanges);
+                        newDimensions.set(entry.nodeId, entry.after);
+                        return { ...prev, dimensionChanges: newDimensions };
+                    });
+                    break;
+                case 'edgeCreate':
+                    // Re-create the edge
+                    setLocalEdges((edges) => [...edges, entry.edge]);
+                    // Update edit state
+                    updateEditState((prev) => ({
+                        ...prev,
+                        createdEdges: [
+                            ...prev.createdEdges,
+                            {
+                                id: entry.edge.id,
+                                from: entry.edge.from,
+                                to: entry.edge.to,
+                                type: entry.edge.type,
+                                sourceHandle: entry.edge.sourceHandle,
+                                targetHandle: entry.edge.targetHandle,
+                            },
+                        ],
+                    }));
+                    break;
+                case 'edgeDelete':
+                    // Re-delete the edge
+                    setLocalEdges((edges) => edges.filter((e) => e.id !== entry.edge.id));
+                    // Update edit state
+                    updateEditState((prev) => ({
+                        ...prev,
+                        deletedEdges: [
+                            ...prev.deletedEdges,
+                            {
+                                id: entry.edge.id,
+                                from: entry.edge.from,
+                                to: entry.edge.to,
+                                type: entry.edge.type,
+                            },
+                        ],
+                    }));
+                    break;
+            }
+        }
+    }, [redoFromStack, updateEditState]);
+    // Keyboard shortcuts for undo/redo
+    useEffect(() => {
+        if (!editable)
+            return;
+        const handleKeyDown = (e) => {
+            // Cmd+Z (Mac) or Ctrl+Z (Windows/Linux) for undo
+            if ((e.metaKey || e.ctrlKey) && e.key === 'z') {
+                e.preventDefault();
+                if (e.shiftKey) {
+                    // Cmd+Shift+Z for redo
+                    applyRedo();
+                }
+                else {
+                    applyUndo();
+                }
+            }
+            // Ctrl+Y for redo (Windows)
+            if (e.ctrlKey && e.key === 'y') {
+                e.preventDefault();
+                applyRedo();
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [editable, applyUndo, applyRedo]);
+    // Set undo/redo functions in ref for outer component access
+    useEffect(() => {
+        undoRedoFunctionsRef.current = {
+            applyUndo,
+            applyRedo,
+        };
+    }, [applyUndo, applyRedo, undoRedoFunctionsRef]);
     // Handle node changes (drag and resize events)
     const handleNodesChange = useCallback((changes) => {
         const hasDraggableNodes = draggableNodeIds && draggableNodeIds.size > 0;
@@ -979,33 +1186,50 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
                 }));
             });
         }
-        // Track position changes on drag end
+        // Capture positions at drag START for accurate undo "before" values
+        const dragStartChanges = changes.filter((change) => change.type === 'position' &&
+            'id' in change &&
+            'dragging' in change &&
+            change.dragging === true);
+        // For each node that just started dragging, capture its current position
+        for (const change of dragStartChanges) {
+            if (!dragStartPositionsRef.current.has(change.id)) {
+                const currentNode = xyflowNodesRef.current.find((n) => n.id === change.id);
+                if (currentNode) {
+                    dragStartPositionsRef.current.set(change.id, {
+                        x: currentNode.position.x,
+                        y: currentNode.position.y,
+                    });
+                }
+            }
+        }
+        // Track position changes on drag END
         const positionChanges = changes.filter((change) => change.type === 'position' &&
+            'id' in change &&
             'position' in change &&
             change.position !== undefined &&
             'dragging' in change &&
             change.dragging === false);
-        // Track dimension changes (from NodeResizer)
-        const dimensionChanges = changes.filter((change) => change.type === 'dimensions' &&
-            'dimensions' in change &&
-            change.dimensions !== undefined &&
-            'resizing' in change &&
-            change.resizing === false);
-        if (dimensionChanges.length > 0) {
-            updateEditState((prev) => {
-                const newDimensions = new Map(prev.dimensionChanges);
-                for (const change of dimensionChanges) {
-                    if (change.dimensions) {
-                        newDimensions.set(change.id, {
-                            width: Math.round(change.dimensions.width),
-                            height: Math.round(change.dimensions.height),
-                        });
-                    }
-                }
-                return { ...prev, dimensionChanges: newDimensions };
-            });
-        }
+        // Note: Dimension changes are tracked via onResizeEnd callback in GraphEditContext,
+        // not through onNodesChange (which only fires with resizing=true during drag).
         if (positionChanges.length > 0) {
+            // Use positions captured at drag start for accurate undo
+            const historyEntries = [];
+            for (const change of positionChanges) {
+                const beforePos = dragStartPositionsRef.current.get(change.id) ?? { x: 0, y: 0 };
+                historyEntries.push({
+                    type: 'position',
+                    nodeId: change.id,
+                    before: beforePos,
+                    after: {
+                        x: Math.round(change.position.x),
+                        y: Math.round(change.position.y),
+                    },
+                });
+                // Clear the drag start position for this node
+                dragStartPositionsRef.current.delete(change.id);
+            }
+            pushHistory(historyEntries);
             updateEditState((prev) => {
                 const newPositions = new Map(prev.positionChanges);
                 for (const change of positionChanges) {
@@ -1017,7 +1241,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
                 return { ...prev, positionChanges: newPositions };
             });
         }
-    }, [editable, updateEditState, selectedNodeIds, draggableNodeIds]);
+    }, [editable, updateEditState, selectedNodeIds, draggableNodeIds, pushHistory]);
     const xyflowEdgesBase = useMemo(() => {
         const converted = convertToXYFlowEdges(edges, configuration, violations);
         // Filter out edges connected to inactive or hidden nodes
@@ -1078,6 +1302,16 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
             setXyflowLocalEdges(xyflowEdgesBase);
         }
     }, [baseEdgesKey, xyflowEdgesBase]);
+    // Set the reset visual state function for use by resetEditState
+    // This resets both nodes and edges to their original state
+    useEffect(() => {
+        resetVisualStateRef.current = () => {
+            setXyflowLocalNodes(xyflowNodesBase);
+            setXyflowLocalEdges(xyflowEdgesBase);
+            // Notify parent that changes have been cleared
+            onPendingChangesChange?.(false);
+        };
+    }, [xyflowNodesBase, xyflowEdgesBase, onPendingChangesChange]);
     // Use local edges in edit mode, base edges otherwise
     const xyflowEdges = editable ? xyflowLocalEdges : xyflowEdgesBase;
     // Handle edge changes (selection, reconnection, etc.)
@@ -1144,7 +1378,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     // ============================================
     // RENDER
     // ============================================
-    return (_jsxs(_Fragment, { children: [_jsxs(ReactFlow, { nodes: xyflowNodes, edges: xyflowEdges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, minZoom: 0.1, maxZoom: 4, defaultEdgeOptions: { type: 'custom' }, onEdgeClick: onEdgeClick, onNodeClick: onNodeClick, onNodeDoubleClick: onNodeDoubleClick, onNodeDrag: handleNodeDrag, onNodeDragStop: handleNodeDragStop, proOptions: { hideAttribution: true }, nodesDraggable: editable || (draggableNodeIds && draggableNodeIds.size > 0), elementsSelectable: editable, selectNodesOnDrag: false, nodesConnectable: editable, edgesReconnectable: editable, reconnectRadius: 25, elevateEdgesOnSelect: true, onNodesChange: handleNodesChange, onEdgesChange: handleEdgesChange, onConnect: handleConnect, onReconnectStart: handleReconnectStart, onReconnect: handleReconnect, onReconnectEnd: handleReconnectEnd, onPaneClick: onPaneClick, onSelectionChange: handleSelectionChange, panOnDrag: !editable, panOnScroll: true, zoomOnScroll: false, zoomOnPinch: true, zoomOnDoubleClick: false, selectionOnDrag: false, selectionKeyCode: null, multiSelectionKeyCode: "Shift", children: [showBackground && (_jsx(Background, { color: backgroundVariant === 'dots' ? theme.colors.border : theme.colors.textMuted, gap: backgroundGap ?? (backgroundVariant === 'dots' ? 16 : 50), size: backgroundVariant === 'dots' ? 1 : 0.5, variant: backgroundVariant === 'dots'
+    return (_jsxs(GraphEditProvider, { value: graphEditContextValue, children: [_jsxs(ReactFlow, { nodes: xyflowNodes, edges: xyflowEdges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, minZoom: 0.1, maxZoom: 4, defaultEdgeOptions: { type: 'custom' }, onEdgeClick: onEdgeClick, onNodeClick: onNodeClick, onNodeDoubleClick: onNodeDoubleClick, onNodeDrag: handleNodeDrag, onNodeDragStop: handleNodeDragStop, proOptions: { hideAttribution: true }, nodesDraggable: editable || (draggableNodeIds && draggableNodeIds.size > 0), elementsSelectable: editable, selectNodesOnDrag: false, nodesConnectable: editable, edgesReconnectable: editable, reconnectRadius: 25, elevateEdgesOnSelect: true, onNodesChange: handleNodesChange, onEdgesChange: handleEdgesChange, onConnect: handleConnect, onReconnectStart: handleReconnectStart, onReconnect: handleReconnect, onReconnectEnd: handleReconnectEnd, onPaneClick: onPaneClick, onSelectionChange: handleSelectionChange, panOnDrag: !editable, panOnScroll: true, zoomOnScroll: false, zoomOnPinch: true, zoomOnDoubleClick: false, selectionOnDrag: false, selectionKeyCode: null, multiSelectionKeyCode: "Shift", children: [showBackground && (_jsx(Background, { color: backgroundVariant === 'dots' ? theme.colors.border : theme.colors.textMuted, gap: backgroundGap ?? (backgroundVariant === 'dots' ? 16 : 50), size: backgroundVariant === 'dots' ? 1 : 0.5, variant: backgroundVariant === 'dots'
                             ? BackgroundVariant.Dots
                             : backgroundVariant === 'lines'
                                 ? BackgroundVariant.Lines
@@ -1369,6 +1603,12 @@ export const GraphRenderer = forwardRef((props, ref) => {
     }
     // Internal edit state ref - must be before any conditional returns
     const editStateRef = useRef(createEmptyEditState());
+    // Ref to hold the reset visual state function - will be set after xyflowLocalNodes is defined
+    const resetVisualStateRef = useRef(null);
+    // Undo/redo management
+    const { canUndo: canUndoState, canRedo: canRedoState, undo: undoFromStack, redo: redoFromStack, pushHistory, clearHistory, } = useUndoRedo();
+    // Ref to hold undo/redo apply functions - will be set by inner component
+    const undoRedoFunctionsRef = useRef(null);
     // Expose imperative handle - must be before any conditional returns
     useImperativeHandle(ref, () => ({
         getPendingChanges: () => {
@@ -1405,6 +1645,10 @@ export const GraphRenderer = forwardRef((props, ref) => {
         },
         resetEditState: () => {
             editStateRef.current = createEmptyEditState();
+            // Also reset visual state (node positions/dimensions) if available
+            resetVisualStateRef.current?.();
+            // Clear undo/redo history
+            clearHistory();
         },
         hasUnsavedChanges: () => {
             const state = editStateRef.current;
@@ -1415,7 +1659,11 @@ export const GraphRenderer = forwardRef((props, ref) => {
                 state.createdEdges.length > 0 ||
                 state.deletedEdges.length > 0);
         },
-    }), []);
+        canUndo: () => canUndoState,
+        canRedo: () => canRedoState,
+        undo: () => undoRedoFunctionsRef.current?.applyUndo(),
+        redo: () => undoRedoFunctionsRef.current?.applyRedo(),
+    }), [canUndoState, canRedoState, clearHistory]);
     // Validate we have required data
     if (!canvasData) {
         return (_jsx("div", { className: className, style: {
@@ -1431,7 +1679,7 @@ export const GraphRenderer = forwardRef((props, ref) => {
     const { configuration, nodes, edges } = canvasData;
     // Extract only the props that inner component needs
     const { violations, configName, showMinimap, showControls, showBackground, backgroundVariant, backgroundGap, showCenterIndicator, showTooltips, fitViewDuration, highlightedNodeId, activeNodeIds, events, onEventProcessed, editable, onPendingChangesChange, onNodeClick, fitViewToNodeIds, fitViewPadding, draggableNodeIds, onNodeDragStop, onCopy, } = props;
-    return (_jsx("div", { ref: containerRef, className: className, style: { width, height, position: 'relative' }, children: _jsx(TooltipPortalContext.Provider, { value: portalTarget, children: _jsx(ReactFlowProvider, { children: _jsx(GraphRendererInner, { configuration: configuration, nodes: nodes, edges: edges, violations: violations, configName: configName, showMinimap: showMinimap, showControls: showControls, showBackground: showBackground, backgroundVariant: backgroundVariant, backgroundGap: backgroundGap, showCenterIndicator: showCenterIndicator, showTooltips: showTooltips, fitViewDuration: fitViewDuration, highlightedNodeId: highlightedNodeId, activeNodeIds: activeNodeIds, events: events, onEventProcessed: onEventProcessed, editable: editable, onPendingChangesChange: onPendingChangesChange, editStateRef: editStateRef, onNodeClick: onNodeClick, fitViewToNodeIds: fitViewToNodeIds, fitViewPadding: fitViewPadding, draggableNodeIds: draggableNodeIds, onNodeDragStop: onNodeDragStop, onCopy: onCopy }) }) }) }));
+    return (_jsx("div", { ref: containerRef, className: className, style: { width, height, position: 'relative' }, children: _jsx(TooltipPortalContext.Provider, { value: portalTarget, children: _jsx(ReactFlowProvider, { children: _jsx(GraphRendererInner, { configuration: configuration, nodes: nodes, edges: edges, violations: violations, configName: configName, showMinimap: showMinimap, showControls: showControls, showBackground: showBackground, backgroundVariant: backgroundVariant, backgroundGap: backgroundGap, showCenterIndicator: showCenterIndicator, showTooltips: showTooltips, fitViewDuration: fitViewDuration, highlightedNodeId: highlightedNodeId, activeNodeIds: activeNodeIds, events: events, onEventProcessed: onEventProcessed, editable: editable, onPendingChangesChange: onPendingChangesChange, editStateRef: editStateRef, resetVisualStateRef: resetVisualStateRef, undoRedoFunctionsRef: undoRedoFunctionsRef, pushHistory: pushHistory, clearHistory: clearHistory, undoFromStack: undoFromStack, redoFromStack: redoFromStack, onNodeClick: onNodeClick, fitViewToNodeIds: fitViewToNodeIds, fitViewPadding: fitViewPadding, draggableNodeIds: draggableNodeIds, onNodeDragStop: onNodeDragStop, onCopy: onCopy }) }) }) }));
 });
 GraphRenderer.displayName = 'GraphRenderer';
 //# sourceMappingURL=GraphRenderer.js.map