fix: Camera presets now track actual celestial body positions

Instead of hardcoded camera positions, each preset now:
- Targets the actual current position of the celestial body (Moon, Sun)
- Uses an offset from that body for camera placement
- Moon/Sun views now correctly follow the bodies in their orbits

This ensures clicking "Moon" always shows the Moon regardless of
where it is in its orbit.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: cjw6k

tidal-harmonics/src/components/canvas/CameraController.tsx

@@ -1,39 +1,57 @@
-import { useRef, useEffect } from 'react';
+import { useRef, useEffect, useMemo } from 'react';
 import { useThree, useFrame } from '@react-three/fiber';
 import { OrbitControls } from '@react-three/drei';
 import { Vector3, PerspectiveCamera } from 'three';
 import type { OrbitControls as OrbitControlsImpl } from 'three-stdlib';
-import { useCameraStore } from '@/stores/cameraStore';
+import { useCameraStore, CAMERA_PRESET_CONFIGS } from '@/stores/cameraStore';
+import { useCelestialPositions } from '@/hooks/useCelestialPositions';
 
 export function CameraController() {
   const controlsRef = useRef<OrbitControlsImpl>(null);
   const { camera } = useThree();
   const preset = useCameraStore((s) => s.preset);
-  const presets = useCameraStore((s) => s.presets);
   const isTransitioning = useCameraStore((s) => s.isTransitioning);
   const setTransitioning = useCameraStore((s) => s.setTransitioning);
 
-  const targetPreset = presets[preset];
+  const { earth, moon, sun } = useCelestialPositions();
+  const presetConfig = CAMERA_PRESET_CONFIGS[preset];
+
+  // Compute actual target position based on which body we're viewing
+  const targetBodyPosition = useMemo(() => {
+    switch (preset) {
+      case 'moon':
+        return new Vector3(...moon);
+      case 'sun':
+        return new Vector3(...sun);
+      case 'earth':
+      case 'overview':
+      default:
+        return new Vector3(...earth);
+    }
+  }, [preset, earth, moon, sun]);
+
+  // Camera position = body position + offset
+  const targetCameraPosition = useMemo(() => {
+    const offset = new Vector3(...presetConfig.offset);
+    return targetBodyPosition.clone().add(offset);
+  }, [targetBodyPosition, presetConfig.offset]);
 
   useEffect(() => {
-    if (targetPreset?.fov !== undefined && camera instanceof PerspectiveCamera) {
-      camera.fov = targetPreset.fov;
+    if (presetConfig?.fov !== undefined && camera instanceof PerspectiveCamera) {
+      camera.fov = presetConfig.fov;
       camera.updateProjectionMatrix();
     }
-  }, [camera, targetPreset]);
+  }, [camera, presetConfig]);
 
   useFrame(() => {
     if (!controlsRef.current) return;
 
     if (isTransitioning) {
-      const targetPosition = new Vector3(...targetPreset.position);
-      const targetTarget = new Vector3(...targetPreset.target);
-
-      camera.position.lerp(targetPosition, 0.05);
-      controlsRef.current.target.lerp(targetTarget, 0.05);
+      camera.position.lerp(targetCameraPosition, 0.05);
+      controlsRef.current.target.lerp(targetBodyPosition, 0.05);
 
-      const positionDistance = camera.position.distanceTo(targetPosition);
-      const targetDistance = controlsRef.current.target.distanceTo(targetTarget);
+      const positionDistance = camera.position.distanceTo(targetCameraPosition);
+      const targetDistance = controlsRef.current.target.distanceTo(targetBodyPosition);
 
       if (positionDistance < 0.1 && targetDistance < 0.1) {
         setTransitioning(false);

tidal-harmonics/src/hooks/useCamera.ts

@@ -1,9 +1,9 @@
-import { useCameraStore } from '@/stores/cameraStore';
+import { useCameraStore, CAMERA_PRESET_CONFIGS } from '@/stores/cameraStore';
 
 export function useCamera() {
   const store = useCameraStore();
 
-  const currentPresetConfig = store.presets[store.preset];
+  const currentPresetConfig = CAMERA_PRESET_CONFIGS[store.preset];
 
   return {
     ...store,

tidal-harmonics/src/stores/cameraStore.ts

@@ -1,41 +1,42 @@
 import { create } from 'zustand';
-import type { CameraPreset, CameraTarget } from '@/types';
+import type { CameraPreset } from '@/types';
+
+// Camera offset from target body (not absolute position)
+interface CameraPresetConfig {
+  offset: [number, number, number]; // Offset from the target body
+  fov: number;
+}
 
 interface CameraState {
   preset: CameraPreset;
   isTransitioning: boolean;
-  presets: Record<CameraPreset, CameraTarget>;
   setPreset: (preset: CameraPreset) => void;
   setTransitioning: (transitioning: boolean) => void;
 }
 
-const CAMERA_PRESETS: Record<CameraPreset, CameraTarget> = {
+// Offsets are relative to the target body's position
+export const CAMERA_PRESET_CONFIGS: Record<CameraPreset, CameraPresetConfig> = {
   overview: {
-    position: [50, 30, 50],
-    target: [0, 0, 0],
+    offset: [50, 30, 50], // Offset from Earth (origin)
     fov: 60,
   },
   earth: {
-    position: [0, 0, 8],
-    target: [0, 0, 0],
+    offset: [0, 3, 8], // Close orbit around Earth
     fov: 45,
   },
   moon: {
-    position: [35, 5, 5],
-    target: [30, 0, 0],
+    offset: [3, 2, 5], // Offset from Moon's current position
     fov: 45,
   },
   sun: {
-    position: [-188, 10, 10],
-    target: [-200, 0, 0],
+    offset: [12, 8, 12], // Offset from Sun's current position
     fov: 45,
   },
 };
 
 export const useCameraStore = create<CameraState>((set) => ({
   preset: 'overview',
   isTransitioning: false,
-  presets: CAMERA_PRESETS,
 
   setPreset: (preset) =>
     set({