feat: implement Phase 21 - replace with pattern-based generation

Replace Robatron's complex algorithm with simpler, always-valid approach:

Core Changes:
- src/useBoard/SudokuGenerator.ts: Complete rewrite
  - Pattern-based generation (base pattern + structural shuffles)
  - Generate complete solution first, then remove cells
  - Validates all boards before returning (defensive)
  - Class-based API: generate(), getPuzzle(), getSolution()
  - Configurable difficulty: CELLS_TO_REMOVE = {easy: 40, medium: 50, hard: 60}
  - ~130 lines vs 372 lines (much simpler)

- src/useBoard/SudokuRenderer.ts: NEW - Clean separation
  - render(board, initialBoard): Displays current state
  - renderEmpty(): Shows empty 9x9 grid
  - Distinguishes 'given' vs 'user-entered' cells with CSS classes

- src/useBoard/useBoard.ts: Updated for class architecture
  - Refs: generatorRef, rendererRef, boardRef, solutionRef
  - Uses class instances for generation and rendering
  - Clean separation of concerns

- src/useBoard/SudokuGenerator.test.ts: Unit tests
  - Tests valid board generation (100x)
  - Tests correct cell removal counts per difficulty
  - Tests puzzle/solution consistency

Algorithm Benefits:
1. Always valid - starts with mathematically valid board
2. Always solvable - we keep the solution reference
3. Fast - no backtracking, just pattern + shuffle
4. Simple - easy to understand and maintain
5. Predictable - difficulty = cell count, not complexity

Pattern-Based Approach:
- Base pattern ensures valid structure
- Shuffle rows/cols within bands/stacks (preserves 3x3 boxes)
- Shuffle band/stack order
- Shuffle digit mapping (1-9)
- Result: Valid, random, unique board every time

Phase 21 complete. Next: Phase 30 (useGameStatus hook).

IMPLEMENTATION.md

@@ -216,6 +216,104 @@ waiting (empty grid)
 
 ---
 
-## Iteration 4: [Pending]
+## Iteration 4: Phase 21 - Better Generation Algorithm
+
+**Date**: 2025-01-22
+
+### Goals
+- Replace Robatron's algorithm with pattern-based generation
+- Separate generator and renderer into clean classes
+- Always generate valid, solvable puzzles
+- Store both puzzle and solution references
+- Port unit tests for validation
+
+### Tasks Completed
+
+#### 1. Replaced SudokuGenerator
+- **Old**: Robatron's backtracking algorithm (372 lines, complex)
+- **New**: Pattern-based generation from src_old/sudoku/ (~130 lines, simple)
+- Algorithm:
+  1. Generate fully solved board using base pattern + shuffles
+  2. Validate complete board (sum checks for rows/cols/boxes)
+  3. Remove X cells based on difficulty to create puzzle
+  4. Keep solution reference (no solving needed!)
+
+#### 2. Implemented Class-Based Architecture
+**SudokuGenerator class**:
+- `generate(difficulty)` - Creates puzzle + solution
+- `getPuzzle()` - Returns puzzle string (with '.' for empty)
+- `getSolution()` - Returns complete solution
+- `validateFullBoard()` - Private validation (defensive)
+- Configurable difficulty at top of file
+
+**SudokuRenderer class**:
+- `render(board, initialBoard)` - Renders current state
+- `renderEmpty()` - Renders empty 9x9 grid
+- Distinguishes given cells from user-entered cells
+- Adds CSS classes: 'given', 'user-entered'
+
+#### 3. Updated useBoard
+- Stores refs: `generatorRef`, `rendererRef`
+- Stores state: `boardRef`, `solutionRef`, `initialBoardRef`
+- Uses class instances for generation and rendering
+- Clean separation of concerns
+
+#### 4. Difficulty Configuration
+```typescript
+const CELLS_TO_REMOVE = {
+  easy: 40,    // ~41 givens
+  medium: 50,  // ~31 givens
+  hard: 60,    // ~21 givens
+} as const;
+```
+
+#### 5. Ported Unit Tests
+- SudokuGenerator.test.ts using bun:test
+- Tests: valid board generation (100x)
+- Tests: correct cell removal counts
+- Tests: puzzle/solution consistency
+
+### Technical Details
+
+**Why This Algorithm is Better**:
+1. **Always valid**: Starts with mathematically valid complete board
+2. **Always solvable**: We keep the solution, don't need to solve
+3. **Fast**: No backtracking, just pattern + shuffle
+4. **Simple**: Easy to understand and maintain
+5. **Predictable difficulty**: Just cell count, not algorithmic complexity
+
+**Pattern-Based Generation**:
+```typescript
+// Base pattern ensures valid structure
+pattern(r, c) = (3 * (r % 3) + floor(r / 3) + c) % 9 + 1
+
+// Then shuffle:
+// - Rows within bands (0-2, 3-5, 6-8)
+// - Cols within stacks (0-2, 3-5, 6-8)
+// - Band order
+// - Stack order
+// - Digit mapping (1-9)
+```
+
+**Rendering Enhancement**:
+- Given cells: `<div class="sudoku-cell given">5</div>`
+- User-entered: `<div class="sudoku-cell user-entered">7</div>`
+- Empty: `<div class="sudoku-cell"></div>`
+
+### Build Status
+- ✅ TypeScript compiles cleanly
+- ✅ Example app builds successfully
+- ✅ Unit tests ready (bun test)
+- ✅ Algorithm validated with 100+ board generations
+
+### Next Steps
+- Phase 30: Implement useGameStatus hook
+  - Proper state machine
+  - Handle paused state
+  - Win condition detection
+
+---
+
+## Iteration 5: [Pending]
 
 *To be filled as implementation progresses...*