Leaflet camera tracking, SSR isolation, and coordinate heading synchronization

Leaflet accesses global browser APIs (window, document) directly during module evaluation. Importing Leaflet into Next.js React Server Components triggers runtime ReferenceError: window is not defined exceptions and hydration mismatches.

1. Zero-Side-Effect Drop-In Isolation

<ArtemisFlightSimulator /> encapsulates Leaflet via client-only dynamic loading with a theme-aware skeleton fallback:

const MapComponent = dynamic<MapProps>(() => import('./Map'), {
  ssr: false,
  loading: () => <MapLoadingFallback themeId="nasa-dark" />
});

2. Spherical Heading Alignment

Instantaneous spacecraft heading $\theta$ is derived from lookahead vector $\mathbf{P}(p + \epsilon)$:

$\theta = \operatorname{atan2}(\sin\Delta\lambda \cos\phi_2, \, \cos\phi_1 \sin\phi_2 - \sin\phi_1 \cos\phi_2 \cos\Delta\lambda)$

The bearing angle is applied directly to the L.divIcon DOM element via CSS transform: rotate(${heading}deg) to keep the nosecone aligned to the flight trajectory in real time.