feat: v0.1.0 — scaffold + MapLibre map with EU airports

.env.example

@@ -1 +1 @@
-CESIUM_ION_TOKEN=your-cesium-ion-token-here
+# No environment variables required yet.

.gitignore

@@ -10,6 +10,9 @@ dist/
 test-results/
 *.tsbuildinfo
 
-# local data (DB + CSV cache) — keep folder marker
+# agent tooling state
-data/*
+.codenomad/
-!data/.gitkeep
+
+# runtime DB files in data/ are ignored; CSV datasets are committed seed data
+data/*.db
+data/*.sqlite*

CHANGELOG.md

@@ -0,0 +1,12 @@
+# Changelog
+
+## v0.1.0 — 2026-09-16 18:24
+- Scaffolded Next.js (App Router) + TypeScript project; dev server on port 3000 (`npm run dev`)
+- Full-viewport MapLibre GL map with OpenFreeMap "liberty" vector basemap (attribution included via style)
+- Zoom-driven camera controller: top-down at zoom ≤ 6, smoothstep tilt to 45° pitch by zoom ≥ 12; pitch is a pure function of zoom so it never fights pan/zoom gestures
+- Lite 3D terrain from AWS terrarium raster-DEM tiles (`map.setTerrain`); toggleable off via `?terrain=0` or `NEXT_PUBLIC_TERRAIN=0` (off in e2e for deterministic headless rendering)
+- EU airport seed data: OurAirports CSV (official mirror at davidmegginson.github.io/ourairports-data — the legacy ourairports.com/data URL now 404s) filtered to continent=EU with types small/medium/large_airport + seaplane_base → committed as `data/airports_eu.csv` (7445 airports; heliports, closed and balloon sites excluded — rationale documented in `lib/airports.ts`)
+- `GET /api/airports`: server-side CSV parse with in-memory cache, returns GeoJSON FeatureCollection (properties: name, icao, lat, lon)
+- Client renders airports as a GeoJSON circle layer (no DOM markers); click → popup with name + ICAO; header shows loaded airport count (`data-testid="airport-count"`)
+- MapLibre worker served from node_modules via `/api/mlworker/*` route — bundlers break the URL MapLibre derives for its worker, which silently hangs GeoJSON source updates
+- Tests: vitest unit suite (CSV parse/filter, GeoJSON build, pitch curve, API handler) + self-contained Playwright e2e suite (`webServer` auto-starts `npm run dev`; page load + airport count + marker click popup)

PLAN.md

@@ -13,7 +13,8 @@ Accept job → dispatch a plane → watch it fly the route on the map → earn m
 
 ## Map & rendering
 - MapLibre GL JS with vector tiles (OpenFreeMap/OSM-based) — crisp detail down to ~10–100 m/px at city zoom, smooth continent overview; no Cesium needed
-- Lite 3D: terrain/hillshade from free DEM tiles if it stays lightweight, otherwise flat 2D
+- Camera: top-down when zoomed out, tilts to ~45° as you zoom in (zoom-driven pitch transition)
+- Lite 3D once tilted: terrain/hillshade from free DEM tiles + building extrusion if it stays lightweight, otherwise flat 2D
 - Game-logic data (airports, runways, countries/regions): downloaded CSV dataset cached in `data/`
 
 ## Simulation engine

app/api/airports/route.ts

@@ -0,0 +1,5 @@
+import { airportsHandler } from '@/lib/airports';
+
+export async function GET() {
+  return airportsHandler();
+}

app/api/mlworker/[file]/route.ts

@@ -0,0 +1,20 @@
+import { promises as fs } from 'node:fs';
+import path from 'node:path';
+
+// Serves maplibre-gl dist files (worker + its relative imports) straight from
+// node_modules so they always match the installed version. MapLibre cannot derive
+// working URLs for these when bundled by Turbopack/webpack, and the worker script
+// uses a relative import ("./maplibre-gl-shared.mjs") that must resolve against
+// this same prefix.
+export async function GET(_req: Request, ctx: { params: Promise<{ file: string }> }) {
+  const { file } = await ctx.params;
+  if (!/^[\w.-]+\.mjs$/.test(file)) return new Response('not found', { status: 404 });
+  try {
+    const body = await fs.readFile(
+      path.join(process.cwd(), 'node_modules', 'maplibre-gl', 'dist', file),
+    );
+    return new Response(body, { headers: { 'content-type': 'text/javascript' } });
+  } catch {
+    return new Response('not found', { status: 404 });
+  }
+}

app/globals.css

@@ -0,0 +1,49 @@
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  height: 100%;
+  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
+}
+
+.map-wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+/* Higher specificity than maplibre-gl.css's .maplibregl-map{position:relative},
+   which MapLibre adds to the same element and would otherwise win on sheet order. */
+.map-wrap .map-container {
+  position: absolute;
+  inset: 0;
+}
+
+.app-header {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  padding: 8px 14px;
+  background: rgba(15, 23, 42, 0.75);
+  color: #f8fafc;
+  backdrop-filter: blur(4px);
+}
+
+.app-header h1 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+[data-testid='airport-count'] {
+  font-size: 12px;
+  color: #cbd5e1;
+}

app/layout.tsx

@@ -0,0 +1,15 @@
+import type { Metadata } from 'next';
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: 'Flight Ops',
+  description: 'Run a small airplane transport company in Europe.',
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+const Map = dynamic(() => import('@/components/Map'), { ssr: false });
+
+export default function Home() {
+  return <Map />;
+}

components/Map.tsx

@@ -0,0 +1,121 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import * as maplibregl from 'maplibre-gl';
+import 'maplibre-gl/dist/maplibre-gl.css';
+import { pitchForZoom } from '@/lib/camera';
+
+const EUROPE_CENTER: [number, number] = [10, 52];
+const INITIAL_ZOOM = 4;
+const OPENFREEMAP_STYLE = 'https://tiles.openfreemap.org/styles/liberty';
+const TERRAIN_TILES = ['https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png'];
+
+function escapeHtml(s: string): string {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+export default function Map() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [airportCount, setAirportCount] = useState<number | null>(null);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    const terrainEnabled =
+      new URLSearchParams(window.location.search).get('terrain') !== '0' &&
+      process.env.NEXT_PUBLIC_TERRAIN !== '0';
+
+    // Bundlers (Turbopack) break MapLibre's derived worker URL, so point it at a
+    // route that serves the worker script (and its relative imports) from node_modules.
+    maplibregl.setWorkerUrl('/api/mlworker/maplibre-gl-worker.mjs');
+
+    const map = new maplibregl.Map({
+      container: containerRef.current,
+      style: OPENFREEMAP_STYLE,
+      center: EUROPE_CENTER,
+      zoom: INITIAL_ZOOM,
+      pitch: 0,
+    });
+    // Dev/e2e hook so tests can project coordinates to screen space.
+    (window as unknown as Record<string, unknown>).__flightMap = map;
+
+    map.on('move', () => {
+      const target = pitchForZoom(map.getZoom());
+      if (Math.abs(map.getPitch() - target) > 0.05) {
+        map.setPitch(target);
+      }
+    });
+
+    // Airports are GeoJSON, so they don't depend on basemap tiles: initialize as soon
+    // as the style is applied ('styledata') rather than waiting for 'load', which also
+    // requires all tile sources to finish.
+    let initialized = false;
+    const init = async () => {
+      if (initialized) return;
+      initialized = true;
+      try {
+        if (terrainEnabled) {
+          map.addSource('dem', {
+            type: 'raster-dem',
+            tiles: TERRAIN_TILES,
+            encoding: 'terrarium',
+            tileSize: 256,
+          });
+          map.setTerrain({ source: 'dem', exaggeration: 1.4 });
+        }
+
+        const res = await fetch('/api/airports');
+        if (!res.ok) return;
+        const data = (await res.json()) as { features: unknown[] };
+        setAirportCount(data.features.length);
+
+        map.addSource('airports', { type: 'geojson', data });
+        map.addLayer({
+          id: 'airports-circles',
+          type: 'circle',
+          source: 'airports',
+          paint: {
+            'circle-radius': 3,
+            'circle-color': '#e11d48',
+            'circle-stroke-width': 1,
+            'circle-stroke-color': '#ffffff',
+          },
+        });
+
+        map.on('click', 'airports-circles', (e) => {
+          const f = e.features?.[0];
+          if (!f) return;
+          const p = f.properties as { name: string; icao: string };
+          new maplibregl.Popup({ offset: 10 })
+            .setLngLat(f.geometry.coordinates as [number, number])
+            .setHTML(
+              `<div data-testid="airport-popup"><strong>${escapeHtml(p.name)}</strong><br/>${escapeHtml(p.icao)}</div>`,
+            )
+            .addTo(map);
+        });
+      } catch (err) {
+        console.error('failed to initialize map layers', err);
+      }
+    };
+
+    if (map.isStyleLoaded()) void init();
+    else map.on('styledata', () => void init());
+
+    return () => {
+      delete (window as unknown as Record<string, unknown>).__flightMap;
+      map.remove();
+    };
+  }, []);
+
+  return (
+    <div className="map-wrap">
+      <header data-testid="app-header" className="app-header">
+        <h1>Flight Ops</h1>
+        <span data-testid="airport-count">
+          {airportCount === null ? 'loading airports…' : `${airportCount} EU airports`}
+        </span>
+      </header>
+      <div ref={containerRef} data-testid="map" className="map-container" />
+    </div>
+  );
+}

e2e/map.spec.ts

@@ -0,0 +1,56 @@
+import { test, expect, type Page } from '@playwright/test';
+
+// Terrain is disabled in e2e (?terrain=0) for deterministic headless rendering;
+// the terrain code path stays toggleable on by default in the app.
+const APP_URL = '/?terrain=0';
+
+async function waitForAirportCount(page: Page): Promise<number> {
+  const countEl = page.getByTestId('airport-count');
+  await expect.poll(async () => {
+    const text = (await countEl.textContent()) ?? '';
+    const m = text.match(/(\d+)/);
+    return m ? parseInt(m[1], 10) : -1;
+  }).toBeGreaterThan(0);
+  const text = (await countEl.textContent()) ?? '';
+  return parseInt(text.match(/(\d+)/)?.[1] ?? '0', 10);
+}
+
+test('page loads with the map and EU airport count', async ({ page }) => {
+  await page.goto(APP_URL);
+  await expect(page.getByTestId('map')).toBeVisible();
+  const count = await waitForAirportCount(page);
+  expect(count).toBeGreaterThan(0);
+});
+
+test('clicking an airport marker opens a popup with name and ICAO', async ({ page }) => {
+  await page.goto(APP_URL);
+  await waitForAirportCount(page);
+
+  // Wait until the map instance exists and airport circles are actually rendered
+  // (the GeoJSON source is parsed in a worker, so features arrive after addSource).
+  await expect.poll(async () =>
+    page.evaluate(
+      () =>
+        (window as any).__flightMap?.queryRenderedFeatures(undefined, {
+          layers: ['airports-circles'],
+        })?.length ?? 0,
+    ),
+    { timeout: 15_000 },
+  ).toBeGreaterThan(0);
+
+  // Project EKRN (Bornholm) to screen space via the dev hook, then click it.
+  // Bornholm is used because its nearest other airport is ~0.8° away (~19 px at the
+  // initial zoom), so its marker cannot be overlapped by a neighbouring circle.
+  const pt = await page.evaluate(() => {
+    const map = (window as any).__flightMap;
+    const p = map.project([14.7596, 55.063301]);
+    const rect = map.getContainer().getBoundingClientRect();
+    return { x: rect.left + p.x, y: rect.top + p.y };
+  });
+  await page.mouse.click(pt.x, pt.y);
+
+  const popup = page.getByTestId('airport-popup');
+  await expect(popup).toBeVisible();
+  await expect(popup).toContainText('Bornholm Airport');
+  await expect(popup).toContainText('EKRN');
+});

lib/airports.test.ts

@@ -0,0 +1,125 @@
+import { describe, expect, it } from 'vitest';
+import { parseCsv, filterEuAirports, toGeoJson, airportsHandler } from './airports';
+
+const HEADER =
+  '"id","ident","type","name","latitude_deg","longitude_deg","elevation_ft","continent","iso_country","iso_region","municipality","scheduled_service","icao_code","iata_code","gps_code","local_code","home_link","wikipedia_link","keywords"';
+
+function row(over: Record<string, string> = {}): string {
+  const base: Record<string, string> = {
+    id: '1',
+    ident: 'XXXX',
+    type: 'small_airport',
+    name: 'Test Field',
+    latitude_deg: '50.0',
+    longitude_deg: '8.0',
+    elevation_ft: '',
+    continent: 'EU',
+    iso_country: 'DE',
+    iso_region: 'DE-BE',
+    municipality: 'Nowhere',
+    scheduled_service: 'no',
+    icao_code: 'XXXX',
+    iata_code: '',
+    gps_code: '',
+    local_code: '',
+    home_link: '',
+    wikipedia_link: '',
+    keywords: '',
+  };
+  return Object.entries({ ...base, ...over })
+    .map(([, v]) => `"${v.replace(/"/g, '""')}"`)
+    .join(',');
+}
+
+describe('parseCsv', () => {
+  it('parses simple rows into objects keyed by header', () => {
+    const text = [HEADER, row()].join('\n');
+    const rows = parseCsv(text);
+    expect(rows).toHaveLength(1);
+    expect(rows[0].ident).toBe('XXXX');
+    expect(rows[0].continent).toBe('EU');
+  });
+
+  it('handles quoted fields containing commas and escaped quotes', () => {
+    const text = [HEADER, row({ name: 'A, B "South" Field' })].join('\n');
+    const rows = parseCsv(text);
+    expect(rows[0].name).toBe('A, B "South" Field');
+  });
+
+  it('handles CRLF line endings and trailing newline', () => {
+    const text = [HEADER, row(), row({ ident: 'YYYY' })].join('\r\n') + '\r\n';
+    const rows = parseCsv(text);
+    expect(rows.map((r) => r.ident)).toEqual(['XXXX', 'YYYY']);
+  });
+});
+
+describe('filterEuAirports', () => {
+  it('keeps EU fixed-wing airports and seaplane bases, drops the rest', () => {
+    const rows = parseCsv(
+      [
+        HEADER,
+        row({ ident: 'EU-SMALL', type: 'small_airport' }),
+        row({ ident: 'EU-MED', type: 'medium_airport' }),
+        row({ ident: 'EU-LRG', type: 'large_airport' }),
+        row({ ident: 'EU-SEA', type: 'seaplane_base' }),
+        row({ ident: 'EU-LEGACY', type: 'airport' }),
+        row({ ident: 'EU-Helio', type: 'heliport' }),
+        row({ ident: 'EU-CLOSED', type: 'closed' }),
+        row({ ident: 'EU-BALLOON', type: 'balloonport' }),
+        row({ ident: 'NA-SMALL', continent: 'NA' }),
+        row({ ident: 'AS-LRG', continent: 'AS', type: 'large_airport' }),
+      ].join('\n'),
+    );
+    const kept = filterEuAirports(rows).map((r) => r.ident);
+    expect(kept.sort()).toEqual(['EU-LEGACY', 'EU-LRG', 'EU-MED', 'EU-SEA', 'EU-SMALL']);
+  });
+});
+
+describe('toGeoJson', () => {
+  it('builds a FeatureCollection with [lon, lat] coordinates and expected properties', () => {
+    const fc = toGeoJson(parseCsv([HEADER, row({ ident: 'EDDF', icao_code: 'EDDF', name: 'Frankfurt Main Airport' })].join('\n')));
+    expect(fc.type).toBe('FeatureCollection');
+    expect(fc.features).toHaveLength(1);
+    const f = fc.features[0];
+    expect(f.geometry).toEqual({ type: 'Point', coordinates: [8.0, 50.0] });
+    expect(f.properties).toMatchObject({ name: 'Frankfurt Main Airport', icao: 'EDDF', lat: 50.0, lon: 8.0 });
+  });
+
+  it('falls back to ident when icao_code is empty and skips rows without valid coordinates', () => {
+    const fc = toGeoJson(
+      parseCsv(
+        [
+          HEADER,
+          row({ ident: 'NOICAO', icao_code: '' }),
+          row({ ident: 'BADLAT', latitude_deg: 'not-a-number' }),
+          row({ ident: 'NONAME', name: '' }),
+        ].join('\n'),
+      ),
+    );
+    expect(fc.features).toHaveLength(1);
+    expect(fc.features[0].properties.icao).toBe('NOICAO');
+  });
+});
+
+describe('/api/airports handler', () => {
+  it('returns a valid GeoJSON FeatureCollection of EU airports', async () => {
+    const res = await airportsHandler();
+    expect(res.status).toBe(200);
+    expect(res.headers.get('content-type')).toContain('application/json');
+    const fc = (await res.json()) as { type: string; features: Array<{ properties: Record<string, unknown> }> };
+    expect(fc.type).toBe('FeatureCollection');
+    expect(fc.features.length).toBeGreaterThan(0);
+    for (const f of fc.features.slice(0, 50)) {
+      expect(f.properties.name).toBeTruthy();
+      expect(f.properties.icao).toBeTruthy();
+      expect(typeof f.properties.lat).toBe('number');
+      expect(typeof f.properties.lon).toBe('number');
+    }
+  });
+
+  it('caches the parsed dataset in memory', async () => {
+    const a = await airportsHandler();
+    const b = await airportsHandler();
+    expect(await a.json()).toEqual(await b.json());
+  });
+});

lib/airports.ts

@@ -0,0 +1,114 @@
+import { promises as fs } from 'node:fs';
+import path from 'node:path';
+
+export type CsvRow = Record<string, string>;
+
+// Minimal RFC-4180-ish parser: quoted fields, escaped quotes (""), CRLF.
+export function parseCsv(text: string): CsvRow[] {
+  const rows: string[][] = [];
+  let row: string[] = [];
+  let field = '';
+  let inQuotes = false;
+
+  for (let i = 0; i < text.length; i++) {
+    const c = text[i];
+    if (inQuotes) {
+      if (c === '"') {
+        if (text[i + 1] === '"') {
+          field += '"';
+          i++;
+        } else {
+          inQuotes = false;
+        }
+      } else {
+        field += c;
+      }
+    } else if (c === '"') {
+      inQuotes = true;
+    } else if (c === ',') {
+      row.push(field);
+      field = '';
+    } else if (c === '\n') {
+      row.push(field);
+      rows.push(row);
+      row = [];
+      field = '';
+    } else if (c !== '\r') {
+      field += c;
+    }
+  }
+  if (field.length > 0 || row.length > 0) {
+    row.push(field);
+    rows.push(row);
+  }
+
+  const [header, ...rest] = rows;
+  return rest
+    .filter((r) => r.length === header.length && !(r.length === 1 && r[0] === ''))
+    .map((r) => Object.fromEntries(header.map((h, i) => [h, r[i]])));
+}
+
+// OurAirports types kept for the sim: all fixed-wing airports plus seaplane bases.
+// The 2026 schema splits "airport" into small/medium/large_airport (older dumps used a
+// single "airport" type + category column) — both spellings are accepted. Heliports are
+// excluded — no fixed-wing transport ops; other types (closed, balloonport, ...) are
+// irrelevant to an airline-ops game.
+const INCLUDED_TYPES = new Set(['airport', 'small_airport', 'medium_airport', 'large_airport', 'seaplane_base']);
+
+export function filterEuAirports(rows: CsvRow[]): CsvRow[] {
+  return rows.filter((r) => r.continent === 'EU' && INCLUDED_TYPES.has(r.type));
+}
+
+export interface AirportProperties {
+  name: string;
+  icao: string;
+  lat: number;
+  lon: number;
+}
+
+export interface GeoJsonFeature {
+  type: 'Feature';
+  geometry: { type: 'Point'; coordinates: [number, number] };
+  properties: AirportProperties;
+}
+
+export interface GeoJsonFeatureCollection {
+  type: 'FeatureCollection';
+  features: GeoJsonFeature[];
+}
+
+export function toGeoJson(rows: CsvRow[]): GeoJsonFeatureCollection {
+  const features: GeoJsonFeature[] = [];
+  for (const r of rows) {
+    // OurAirports schema: latitude_deg / longitude_deg; ICAO in icao_code, ident as fallback.
+    const lat = Number(r.latitude_deg);
+    const lon = Number(r.longitude_deg);
+    if (!r.ident || !r.name || !Number.isFinite(lat) || !Number.isFinite(lon)) continue;
+    features.push({
+      type: 'Feature',
+      geometry: { type: 'Point', coordinates: [lon, lat] },
+      properties: { name: r.name, icao: r.icao_code || r.ident, lat, lon },
+    });
+  }
+  return { type: 'FeatureCollection', features };
+}
+
+let cached: GeoJsonFeatureCollection | null = null;
+
+export async function loadAirportsGeoJson(): Promise<GeoJsonFeatureCollection> {
+  if (cached) return cached;
+  const file = path.join(process.cwd(), 'data', 'airports_eu.csv');
+  const text = await fs.readFile(file, 'utf8');
+  cached = toGeoJson(filterEuAirports(parseCsv(text)));
+  return cached;
+}
+
+export async function airportsHandler(): Promise<Response> {
+  try {
+    const fc = await loadAirportsGeoJson();
+    return Response.json(fc);
+  } catch (err) {
+    console.error('failed to load airport data', err);
+    return Response.json({ error: 'failed to load airport data' }, { status: 500 });
+  }
+}

lib/camera.test.ts

@@ -0,0 +1,33 @@
+import { describe, expect, it } from 'vitest';
+import { pitchForZoom, smoothstep, PITCH_ZOOM_MIN, PITCH_ZOOM_MAX, MAX_PITCH_DEG } from './camera';
+
+describe('smoothstep', () => {
+  it('clamps outside the edges and is 0.5 at the midpoint', () => {
+    expect(smoothstep(0, 1, -5)).toBe(0);
+    expect(smoothstep(0, 1, 2)).toBe(1);
+    expect(smoothstep(0, 1, 0.5)).toBeCloseTo(0.5);
+  });
+});
+
+describe('pitchForZoom', () => {
+  it('is 0 at and below the lower zoom threshold', () => {
+    expect(pitchForZoom(PITCH_ZOOM_MIN)).toBe(0);
+    expect(pitchForZoom(4)).toBe(0);
+    expect(pitchForZoom(0)).toBe(0);
+  });
+
+  it('is max pitch at and above the upper zoom threshold', () => {
+    expect(pitchForZoom(PITCH_ZOOM_MAX)).toBe(MAX_PITCH_DEG);
+    expect(pitchForZoom(15)).toBe(MAX_PITCH_DEG);
+  });
+
+  it('rises smoothly between thresholds (monotonic, midpoint = half max)', () => {
+    expect(pitchForZoom((PITCH_ZOOM_MIN + PITCH_ZOOM_MAX) / 2)).toBeCloseTo(MAX_PITCH_DEG / 2);
+    let prev = -1;
+    for (let z = PITCH_ZOOM_MIN; z <= PITCH_ZOOM_MAX; z += 0.25) {
+      const p = pitchForZoom(z);
+      expect(p).toBeGreaterThan(prev);
+      prev = p;
+    }
+  });
+});

lib/camera.ts

@@ -0,0 +1,13 @@
+export const PITCH_ZOOM_MIN = 6;
+export const PITCH_ZOOM_MAX = 12;
+export const MAX_PITCH_DEG = 45;
+
+export function smoothstep(edge0: number, edge1: number, x: number): number {
+  const t = Math.min(1, Math.max(0, (x - edge0) / (edge1 - edge0)));
+  return t * t * (3 - 2 * t);
+}
+
+// Pitch is a pure function of zoom so it never fights user pan/zoom gestures.
+export function pitchForZoom(zoom: number): number {
+  return smoothstep(PITCH_ZOOM_MIN, PITCH_ZOOM_MAX, zoom) * MAX_PITCH_DEG;
+}

next-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
+import "./.next/dev/types/root-params.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.ts

@@ -0,0 +1,5 @@
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {};
+
+export default nextConfig;

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "flight-ops",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p 3000",
+    "build": "next build",
+    "start": "next start -p 3000",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "maplibre-gl": "^6.10.0",
+    "next": "^16.3.5",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.20.3",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "typescript": "^7.0.2",
+    "vitest": "^5.0.1"
+  }
+}

playwright.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e',
+  timeout: 30_000,
+  retries: 1,
+  use: {
+    baseURL: 'http://localhost:3000',
+    trace: 'on-first-retry',
+  },
+  webServer: {
+    command: 'npm run dev',
+    url: 'http://localhost:3000/api/airports',
+    reuseExistingServer: true,
+    timeout: 120_000,
+  },
+});

tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

vitest.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vitest/config';
+import path from 'node:path';
+
+export default defineConfig({
+  resolve: {
+    alias: { '@': path.resolve(process.cwd()) },
+  },
+  test: {
+    environment: 'node',
+    include: ['**/*.test.ts'],
+  },
+});