# DataTable Surgical Migration Plan (Safety First)

## Current Status: Clean Baseline
- Source: v1.0.1
- Performance: ~16ms Keyed Refresh (verified)
- Frame: @web/state v1.0.11 (Node Recycling enabled)

## Phase 1: Zero-Interaction Infrastructure
- [ ] **Step 1.1: Column Width Pre-computation**. Move `width` calculation from template to `fields` watch. No logic change.
- [ ] **Step 1.2: Column Pinning Pre-computation**. Move `left/right` offset logic to `fields` watch.
- [ ] **Step 1.3: Apply Pre-computed Styles**. Update template to use `f._preStyle`. 
  - *Checkpoint*: Verify scrolling smoothness.

## Phase 2: Primitive Interaction (Selection)
- [ ] **Step 2.1: Top-level Coordinate State**. Add `activeCell: { rIdx, fIdx }` to state.
- [ ] **Step 2.2: Safe MouseDown Listener**. Add listener that only sets `activeCell` without touching `state.list`.
- [ ] **Step 2.3: Orderly MouseUp Cleanup**. Implement global listener to terminate selection mode.
  - *Checkpoint*: Verify click doesn't "stick" and no lag.

## Phase 3: Advanced Features (Port one by one)
- [ ] **Step 3.1: Resizer Integration**.
- [ ] **Step 3.2: JIT Row Proxying for Edit**. (Discuss implementation details first).
- [ ] **Step 3.3: Metadata & Icons**.

## Mandatory Procedure
1. Implement ONE step.
2. Run `npm run test` + Manual browser check.
3. Report Benchmark & Interaction status.
4. WAIT for user confirmation.