feat: add visual focal length simulator with real-time camera zoom

.llm/features/done_F-4.md

@@ -0,0 +1,89 @@
+# Feature F-4: Visual Focal Length Simulator with Camera Zoom
+
+## Overview
+Added transparent ruler-style slider overlay on camera preview that simulates different focal lengths (15-200mm) through digital zoom. Users can slide to change focal length and see real-time visual feedback of how different lenses affect framing. Designed for iPhone/mobile use as a framing tool.
+
+## Key Components
+
+### New Component: `FocalLengthRulerOverlay.tsx`
+- Transparent overlay at bottom of camera view
+- Horizontal slider with marks at common focal lengths (15, 24, 35, 50, 85, 135, 200mm)
+- Semi-transparent background (rgba(0,0,0,0.6)) with backdrop blur
+- Touch-friendly 24px slider thumb
+- Shows current focal length value and letterbox warning
+
+### Updated: `CameraScreen.tsx`
+- Added state: `simulatedFocalLength` (default 24mm - iPhone baseline)
+- Calculated `zoomFactor = simulatedFocalLength / 24`
+- Applied CSS transform scale to video element for digital zoom
+- Added letterbox bars (20% top/bottom) for ultra-wide angles (<24mm)
+- Integrated ruler overlay that updates exposure settings
+- Smooth zoom transitions (0.15s ease-out)
+
+## Technical Details
+
+**Files Changed:**
+- `src/components/FocalLengthRulerOverlay.tsx` (+124 lines) - NEW
+- `src/components/CameraScreen.tsx` (+52 lines modified)
+
+**Zoom Calculation:**
+```
+baseline = 24mm (iPhone standard camera)
+zoomFactor = currentFocalLength / baseline
+
+Examples:
+- 24mm → 1.0x (no zoom)
+- 50mm → 2.08x digital zoom
+- 85mm → 3.54x digital zoom
+- 15mm → 0.625x (shows letterbox)
+```
+
+**Styling:**
+- Material-UI Slider with custom theme colors
+- White track/marks on dark semi-transparent background
+- Amber slider thumb matching app theme
+- Letterbox: Black bars indicate wider FOV than camera can capture
+
+## User Benefits
+- **Visual feedback:** See focal length simulation in real-time while composing
+- **Framing tool:** Experiment with different perspectives before shooting
+- **Educational:** Learn how focal lengths affect composition
+- **Mobile-first:** Touch-friendly slider designed for iPhone use
+- **Integrated:** Focal length automatically saved in exposure metadata
+
+## Implementation Notes
+
+**Simplified Approach:**
+- Digital zoom only (CSS transform scale) - no camera switching complexity
+- Fixed 24mm baseline (iPhone 13 standard camera equivalent)
+- No MediaStream constraints modification
+- Letterbox is visual-only for ultra-wide angles
+
+**Trade-offs Accepted:**
+- Image quality degrades at high zoom (3x+) - acceptable for framing preview
+- Fixed baseline may be slightly off on some Android devices
+- No pinch-to-zoom gestures (slider is more precise)
+- Doesn't use optical zoom or switch iPhone Pro cameras
+
+## Testing
+- ✅ All camera workflow E2E tests pass (3/3)
+- ✅ No regressions in existing functionality (32/33 tests pass)
+- ✅ Build succeeds without TypeScript errors
+- Manual testing required on iPhone for zoom smoothness
+
+## Commit Message
+```
+feat: add visual focal length simulator with digital zoom overlay
+
+- Add FocalLengthRulerOverlay component with ruler-style slider
+- Implement digital zoom via CSS transform on video element
+- Show letterbox bars for ultra-wide angles (<24mm baseline)
+- Integrate focal length into exposure metadata
+- Smooth transitions (0.15s ease-out) for zoom changes
+- Touch-friendly 24px slider thumb for mobile use
+
+Designed as framing tool for iPhone photographers to visualize
+different focal lengths while composing shots.
+
+Co-Authored-By: Claude (bedrock/anthropic.claude-sonnet-4-5-20250929-v1:0) <noreply@anthropic.com>
+```