Implemented a clean, working undo/redo system using useRef to avoid React state management issues.
## Features Added
- **Undo**: Ctrl+Z (Cmd+Z on Mac) to undo the last action
- **Redo**: Ctrl+Shift+Z (Cmd+Shift+Z on Mac) to redo
- **Delete**: Delete key to remove selected shape
- **Escape**: Escape key to deselect
- UI buttons for undo/redo with proper enabled/disabled states
## Technical Implementation
- Uses `useRef` instead of `useState` for history to avoid stale closures
- Deep clones shapes when saving to prevent reference issues
- Maintains up to 50 history states (auto-prunes oldest)
- Properly initializes history with current canvas state on mount
- Uses `e.code === 'KeyZ'` for keyboard detection (shift-independent)
- Includes propagator cleanup when deleting arrows via Delete key
## Key Design Decisions
- **useRef over useState**: Avoids complex state synchronization and stale closure bugs
- **Deep cloning**: JSON.parse(JSON.stringify()) ensures each history entry is independent
- **Initialization guard**: Prevents saving to history before component fully initializes
- **Force re-render**: Uses dummy state update to refresh button disabled states
## Architecture
```typescript
historyRef.current = [state0, state1, state2, ...]
historyIndexRef.current = currentIndex
```
Operations:
- saveToHistory(): Truncates future, adds new state, increments index
- undo(): Decrements index, restores previous state
- redo(): Increments index, restores next state
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Shawn Anderson
v0