Add tree visualization modes matching Ancestry.com

Implements 5 view modes for ancestry tree visualization:
- Fan Chart: radial pedigree with lineage-colored wedges (default)
- Horizontal: root left, ancestors right (Ancestry-style)
- Vertical: ancestors top, root middle with generation labels
- Columns/Focus: existing views retained

URL-based routing enables deep-linking to specific views.
Fixed classic view bugs with dynamic centering using ResizeObserver.

Author: atomantic

.changelog/v0.6.x.md

@@ -50,6 +50,17 @@ This release normalizes FamilySearch as a downstream provider (equal to Ancestry
 
 ## Improvements
 
+### Tree Visualization Parity with Ancestry.com (v0.6.x)
+- Added 5 tree view modes matching Ancestry.com functionality
+- **Fan Chart** (default): Radial pedigree with lineage-colored wedges (paternal=blue/teal, maternal=red/coral)
+- **Horizontal Pedigree**: Root left, ancestors right with expandable nodes
+- **Vertical Family**: Ancestors top, root middle with generation labels
+- **Columns** and **Focus**: Existing views retained
+- URL-based routing: `/tree/:dbId/:personId/:viewMode`
+- New shared components: TreeCanvas (D3 zoom/pan), TreeControls, AncestorNode
+- New utilities: lineageColors, treeLayout, arcGenerator
+- Fixed classic view bugs: dynamic centering, ResizeObserver instead of setTimeout
+
 ### Avatar Placeholders (v0.6.x)
 - Replaced emoji-based avatar placeholders with proper SVG components throughout tree views
 - New `AvatarPlaceholder` component renders gender-aware silhouettes (male/female/unknown profiles)

PLAN.md

@@ -463,6 +463,61 @@ Separated provider data download from automatic application to prevent data corr
 - `scripts/migrate-fs-photos.ts` - **NEW** photo migration
 - `scripts/migrate-legacy-cache.ts` - **NEW** cache migration
 
+### Phase 15.21: Tree Visualization Parity with Ancestry.com
+
+Enhanced tree views matching Ancestry.com visualization modes:
+
+**New View Modes (5 total):**
+1. **Fan Chart** (default) - Radial chart with lineage-colored wedges
+   - Paternal line: cool colors (blue/teal)
+   - Maternal line: warm colors (red/coral)
+   - SVG-based with zoom/pan support
+2. **Horizontal Pedigree** - Root left, ancestors right (Ancestry-style)
+   - DOM-based cards with SVG connector lines
+   - Expandable nodes for loading more ancestors
+3. **Vertical Family** - Ancestors top, root middle (classic family tree)
+   - Generation labels ("Michael's parents", "Michael's grandparents")
+   - Clean CSS-based connecting lines
+4. **Columns** - Horizontal generational columns (existing)
+5. **Focus** - Single person navigator (existing)
+
+**URL-Based Routing:**
+- `/tree/:dbId/:personId/fan` - Fan chart (default)
+- `/tree/:dbId/:personId/horizontal` - Horizontal pedigree
+- `/tree/:dbId/:personId/vertical` - Vertical family view
+- `/tree/:dbId/:personId/columns` - Generational columns
+- `/tree/:dbId/:personId/focus` - Focus navigator
+
+**Shared Components:**
+- `TreeCanvas.tsx` - D3 zoom/pan wrapper with hooks
+- `TreeControls.tsx` - Generation selector, zoom buttons
+- `AncestorNode.tsx` - Reusable person card with lineage colors
+
+**Utilities:**
+- `lineageColors.ts` - Paternal/maternal color schemes
+- `treeLayout.ts` - Node positioning calculations
+- `arcGenerator.ts` - Fan chart arc path generation
+
+**Bug Fixes:**
+- Replaced hardcoded initial transform with dynamic centering
+- Replaced `setTimeout` with `ResizeObserver` for layout calculations
+
+**Files Created:**
+- `client/src/components/ancestry-tree/utils/lineageColors.ts`
+- `client/src/components/ancestry-tree/utils/treeLayout.ts`
+- `client/src/components/ancestry-tree/utils/arcGenerator.ts`
+- `client/src/components/ancestry-tree/shared/TreeCanvas.tsx`
+- `client/src/components/ancestry-tree/shared/TreeControls.tsx`
+- `client/src/components/ancestry-tree/shared/AncestorNode.tsx`
+- `client/src/components/ancestry-tree/views/HorizontalPedigreeView.tsx`
+- `client/src/components/ancestry-tree/views/FanChartView.tsx`
+- `client/src/components/ancestry-tree/views/VerticalFamilyView.tsx`
+
+**Files Modified:**
+- `client/src/App.tsx` - Added view mode route
+- `client/src/components/ancestry-tree/AncestryTreeView.tsx` - View switcher dropdown, URL routing
+- `client/src/index.css` - Lineage color CSS variables
+
 ### Phase 16: Multi-Platform Sync (Remaining Items)
 
 - ~~Provider cache structure~~ (completed in 15.11)

client/src/App.tsx

@@ -21,8 +21,10 @@ function App() {
     <Routes>
       <Route path="/" element={<Layout />}>
         <Route index element={<Dashboard />} />
+        {/* Tree routes with view mode support */}
         <Route path="tree/:dbId" element={<AncestryTreeView />} />
         <Route path="tree/:dbId/:personId" element={<AncestryTreeView />} />
+        <Route path="tree/:dbId/:personId/:viewMode" element={<AncestryTreeView />} />
         <Route path="person/:dbId/:personId" element={<PersonDetail />} />
         <Route path="search/:dbId" element={<SearchPage />} />
         <Route path="path/:dbId" element={<PathFinder />} />