feat(voyage): add Space Voyage 3D mini-game at /voyage

src/components/voyage/SpaceVoyage.tsx

@@ -0,0 +1,63 @@
+// Main Space Voyage component for /voyage.
+// A flying star-galleon explores TanStack libraries scattered across three
+// altitude "dimensions" — a spacefaring cousin of the Island Explorer.
+
+import { useState } from 'react'
+import { VoyageScene } from './VoyageScene'
+import { VoyageHUD } from './ui/VoyageHUD'
+import type { VoyageEngine } from './engine/VoyageEngine'
+
+const LOADING_MESSAGES = [
+  ['Hoisting the solar sails...', 'Mind the cosmic wind'],
+  ['Charting the star lanes...', 'X marks the nebula'],
+  ['Waking the stardust crew...', 'They sleep in zero-g'],
+  ['Tuning the dimension drive...', 'High, low, and in between'],
+  ['Polishing the brass telescope...', 'For spotting distant worlds'],
+  ['Counting the constellations...', 'We lost count at infinity'],
+  ['Feeding the ship cat...', 'Even pirates need a navigator'],
+  ['Calibrating the gravity anchor...', 'Down is relative out here'],
+]
+
+function LoadingOverlay() {
+  const [messageIndex] = useState(() =>
+    Math.floor(Math.random() * LOADING_MESSAGES.length),
+  )
+  const [headline, subtext] = LOADING_MESSAGES[messageIndex]
+
+  return (
+    <div className="absolute inset-0 bg-gradient-to-b from-[#0a0820] via-[#070a1a] to-black flex items-center justify-center z-50">
+      <div className="text-center">
+        <div className="w-16 h-16 mx-auto mb-4 border-4 border-white/20 border-t-cyan-300 rounded-full animate-spin" />
+        <p className="text-white text-lg font-medium">{headline}</p>
+        <p className="text-white/50 text-sm mt-2">{subtext}</p>
+      </div>
+    </div>
+  )
+}
+
+export default function SpaceVoyage() {
+  const [isLoading, setIsLoading] = useState(true)
+  const [engine, setEngine] = useState<VoyageEngine | null>(null)
+
+  return (
+    <div className="relative w-full h-[calc(100dvh-var(--navbar-height))] bg-black overflow-hidden">
+      {isLoading && <LoadingOverlay />}
+
+      {/* 3D scene */}
+      <div className="absolute inset-0">
+        <VoyageScene onLoadingChange={setIsLoading} onEngineReady={setEngine} />
+      </div>
+
+      {/* Vignette for depth */}
+      <div
+        className="absolute inset-0 pointer-events-none"
+        style={{
+          background:
+            'radial-gradient(ellipse at center, transparent 45%, rgba(0,0,10,0.55) 100%)',
+        }}
+      />
+
+      {!isLoading && <VoyageHUD engine={engine} />}
+    </div>
+  )
+}

src/components/voyage/VoyageScene.tsx

@@ -0,0 +1,92 @@
+import { useEffect, useRef, useState } from 'react'
+import { VoyageEngine } from './engine/VoyageEngine'
+
+interface VoyageSceneProps {
+  onLoadingChange?: (loading: boolean) => void
+  onEngineReady?: (engine: VoyageEngine | null) => void
+}
+
+export function VoyageScene({
+  onLoadingChange,
+  onEngineReady,
+}: VoyageSceneProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const engineRef = useRef<VoyageEngine | null>(null)
+  const [isReady, setIsReady] = useState(false)
+
+  // Wait until the container has real dimensions before booting the engine.
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+
+    const checkSize = () => {
+      if (container.clientWidth > 0 && container.clientHeight > 0) {
+        setIsReady(true)
+      }
+    }
+
+    checkSize()
+    requestAnimationFrame(checkSize)
+
+    const observer = new ResizeObserver(checkSize)
+    observer.observe(container)
+    return () => observer.disconnect()
+  }, [])
+
+  useEffect(() => {
+    if (!isReady) return
+    const canvas = canvasRef.current
+    const container = containerRef.current
+    if (!canvas || !container) return
+
+    const width = container.clientWidth
+    const height = container.clientHeight
+    const dpr = Math.min(window.devicePixelRatio, 2)
+    canvas.width = width * dpr
+    canvas.height = height * dpr
+    canvas.style.width = `${width}px`
+    canvas.style.height = `${height}px`
+
+    const engine = new VoyageEngine(canvas)
+    engineRef.current = engine
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      const entry = entries[0]
+      if (entry && engineRef.current) {
+        const { width, height } = entry.contentRect
+        engineRef.current.resize(width, height)
+      }
+    })
+    resizeObserver.observe(container)
+
+    onLoadingChange?.(true)
+    engine
+      .init()
+      .then(() => {
+        engine.start()
+        onLoadingChange?.(false)
+        onEngineReady?.(engine)
+      })
+      .catch((err) => {
+        console.error('VoyageEngine init failed:', err)
+        onLoadingChange?.(false)
+      })
+
+    return () => {
+      resizeObserver.disconnect()
+      onEngineReady?.(null)
+      engine.dispose()
+      engineRef.current = null
+    }
+  }, [isReady, onLoadingChange, onEngineReady])
+
+  return (
+    <div ref={containerRef} style={{ width: '100%', height: '100%' }}>
+      <canvas
+        ref={canvasRef}
+        style={{ display: 'block', background: '#04060e' }}
+      />
+    </div>
+  )
+}