docs/OFFROUTE-ARCHITECTURE.md

@@ -1,427 +0,0 @@
-# OFFROUTE — Off-Network Effort-Based Routing Architecture
-
-**Status:** Draft  
-**Author:** Matt / Claude  
-**Date:** 2026-05-07  
-**Canonical location:** `matt/refactored-recon` alongside PROJECT-BIBLE.md, NAV-INTEGRATION-v4.md  
-
----
-
-## 1. Vision
-
-From any arbitrary point in the backcountry — no trails, no roads, no signal — route via effort cost and safety to the nearest trail, to a BLM/forest road, to a paved road, to home. Four segments, one continuous path, one GeoJSON response.
-
-The system serves two interfaces:
-- **Navi frontend** (`navi.echo6.co`) — visual route overlay on the map
-- **Aurora via Meshtastic** — text-based step-by-step directions for a lost person with no map display
-
-This capability does not exist in any open-source consumer product. CalTopo, OnX, Gaia GPS, AllTrails — all route on-network only. The military has Primordial Ground Guidance (closed-source ATAK plugin). We are building the open, self-hosted equivalent.
-
----
-
-## 2. The Routing Chain
-
-```
-[Lost person]
-     │
-     ▼
- ┌──────────────────────────────────────────┐
- │  Segment 1: WILDERNESS → TRAIL           │
- │  Engine: Raster cost-surface pathfinder   │
- │  Cost: slope effort + vegetation +        │
- │        water barriers + land ownership    │
- │  Output: lat/lon waypoint sequence        │
- └──────────────────────────────────────────┘
-     │ snap to nearest trail entry point
-     ▼
- ┌──────────────────────────────────────────┐
- │  Segment 2: TRAIL → BLM/FOREST ROAD     │
- │  Engine: Valhalla (pedestrian/MTB)       │
- │  Cost: elevation-aware hike/bike profile │
- └──────────────────────────────────────────┘
-     │ transition to road network
-     ▼
- ┌──────────────────────────────────────────┐
- │  Segment 3: BLM ROAD → PAVED ROAD       │
- │  Engine: Valhalla (auto/motorcycle)      │
- │  Cost: standard + surface preference     │
- └──────────────────────────────────────────┘
-     │
-     ▼
- ┌──────────────────────────────────────────┐
- │  Segment 4: PAVED ROAD → HOME            │
- │  Engine: Valhalla (auto)                  │
- │  Cost: standard routing                   │
- └──────────────────────────────────────────┘
-```
-
-Segments 2–4 already work today via Valhalla. **Segment 1 is the engineering gap.**
-
----
-
-## 3. Endpoint Design
-
-### `POST /api/offroute`
-
-**Request:**
-```json
-{
-  "start": { "lat": 43.512, "lon": -114.823 },
-  "destination": { "lat": 42.736, "lon": -114.514 },
-  "mode": "foot",
-  "max_search_km": 15
-}
-```
-
-**Modes:** `foot` | `mtb` | `atv`
-
-**Response:**
-```json
-{
-  "segments": [
-    {
-      "type": "wilderness",
-      "geometry": { "type": "LineString", "coordinates": [...] },
-      "distance_m": 4200,
-      "elevation_gain_m": 310,
-      "elevation_loss_m": 85,
-      "estimated_time_min": 72,
-      "surface": "cross-country",
-      "instructions": [
-        { "bearing": 245, "distance_m": 320, "terrain": "sagebrush slope", "grade_pct": 8 },
-        { "bearing": 260, "distance_m": 510, "terrain": "drainage crossing", "grade_pct": -12 }
-      ]
-    },
-    {
-      "type": "trail",
-      "geometry": { "type": "LineString", "coordinates": [...] },
-      "trail_name": "Pioneer Cabin Trail",
-      "distance_m": 6100,
-      "estimated_time_min": 85
-    },
-    {
-      "type": "road_unpaved",
-      "geometry": { "type": "LineString", "coordinates": [...] },
-      "road_name": "FR-227",
-      "distance_m": 12400,
-      "estimated_time_min": 22
-    },
-    {
-      "type": "road_paved",
-      "geometry": { "type": "LineString", "coordinates": [...] },
-      "distance_m": 34000,
-      "estimated_time_min": 28
-    }
-  ],
-  "total_distance_m": 56700,
-  "total_time_min": 207,
-  "confidence": 0.82
-}
-```
-
-**Aurora tool integration:** Add `offroute` to `nav_tools.py` alongside existing `route()` and `reverse_geocode()`. The semantic query router gets a new embedding for "I'm lost, help me get home" / "navigate to nearest road" type queries.
-
----
-
-## 4. Pathfinder Architecture (Segment 1)
-
-### 4.1 No Pre-Rendered Slope Rasters
-
-The pathfinder does NOT need pre-computed slope layers, GDAL processing, or reprojection. It reads elevation directly:
-
-1. Routing request arrives with a start point and search radius
-2. Determine which PMTiles z12 tiles cover the search area
-3. Fetch + decode Terrarium tiles from `planet-dem.pmtiles` → numpy elevation arrays
-4. Cache decoded arrays keyed by (z, x, y) — LRU, in-memory
-5. A* / Dijkstra runs on the elevation grid, computing grade between neighbors on the fly
-6. Cost function = `grade → effort model → multiply by land-cover friction → check barriers`
-
-### 4.2 Elevation Data Source
-
-**Primary:** `planet-dem.pmtiles` (658GB on pi-nas, served via nginx at `/tiles/planet-dem.pmtiles`)
-- Mapterhorn, Copernicus GLO-30 source, Terrarium encoding (lossless WebP)
-- z12 with 512px tiles = ~13–16m pixels at Idaho latitude
-- 30m effective resolution (upsampled from source)
-- Decode: `elevation = (R * 256 + G + B/256) - 32768` (metres, EGM2008)
-- Precision: ~3.9mm quantization — far below source noise (~4m RMSE)
-
-**Upgrade path:** USGS 3DEP 1/3 arc-second (10m bare-earth DTM, CONUS). Same architecture, denser grid. Free download. Address when/if 30m proves insufficient for safety.
-
-**Regional GeoTIFFs** (203GB on NAS at `/mnt/nas/nav/contour-rebuild/dem/`): Keep as insurance until this pipeline is validated, then delete.
-
-### 4.3 Cost Function
-
-For each candidate move from cell A to cell B:
-
-```python
-def travel_cost(elev_a, elev_b, distance_m, friction_ab):
-    grade = (elev_b - elev_a) / distance_m
-    
-    # Safety gate — impassable above threshold
-    slope_deg = math.degrees(math.atan(abs(grade)))
-    if slope_deg > MAX_SLOPE[mode]:  # foot=40°, mtb=25°, atv=30°
-        return INF
-    
-    # Effort model (speed in km/h)
-    if mode == "foot":
-        # Tobler off-path hiking function
-        speed = 0.6 * 6.0 * math.exp(-3.5 * abs(grade + 0.05))
-    elif mode == "mtb":
-        # Herzog wheeled-transport polynomial (crit_slope=8%)
-        speed = herzog_wheeled(grade, crit_slope=0.08, base_speed=12)
-    elif mode == "atv":
-        # Herzog with higher base speed and slope tolerance
-        speed = herzog_wheeled(grade, crit_slope=0.15, base_speed=25)
-    
-    # Time cost (seconds to traverse this cell)
-    time_s = (distance_m / 1000.0) / speed * 3600.0
-    
-    # Multiply by land-cover friction
-    time_s *= friction_ab
-    
-    return time_s
-```
-
-**Tobler off-path:** `W = 0.6 × 6 × exp(-3.5 × |S + 0.05|)` km/h  
-Peak speed 3.6 km/h at ~-2.86° (slight downhill). The 0.6 multiplier is the off-trail penalty.
-
-**Herzog wheeled-transport:** sixth-degree polynomial fitted to wheeled vehicle energy expenditure. Has a `crit_slope` parameter where switchbacks become more efficient than direct climb. Best published proxy for MTB/ATV in open-source literature.
-
-**Reference implementations:** R `leastcostpath` package contains 30+ validated cost functions including Tobler, Tobler off-path, Irmischer-Clarke (male/female/off-path, fitted to USMA cadets), Naismith-Langmuir, Herzog, Minetti, Campbell 2019 percentiles. Port as needed.
-
-### 4.4 Friction Layers (Cost Surface Inputs)
-
-All pre-computed offline, tiled, cached. Updated infrequently.
-
-| Layer | Source | Resolution | Purpose | Update Frequency |
-|---|---|---|---|---|
-| Elevation | planet-dem.pmtiles | ~30m (z12) | Slope/grade calculation | Static |
-| Land cover | NLCD | 30m | Vegetation traversal friction | ~Annual |
-| Waterways | OSM | Rasterized from vectors | Barrier (∞ cost) except at bridges/fords | Weekly from planet PBF |
-| Water bodies | OSM `natural=water` | Rasterized polygons | Barrier (∞) | Weekly |
-| Cliffs | OSM `natural=cliff` | Rasterized lines | Barrier (∞) | Weekly |
-| Land ownership | PAD-US | Polygon raster | Access restrictions per mode | ~Quarterly |
-| Trails/roads | OSM + USFS | Rasterized lines | Low-cost corridors (negative friction) | Weekly |
-
-**NLCD friction mapping (foot mode example):**
-
-| NLCD Class | Description | Friction Multiplier |
-|---|---|---|
-| 11 | Open Water | ∞ |
-| 21 | Developed, Open Space | 1.0 |
-| 22 | Developed, Low Intensity | 1.2 |
-| 31 | Barren Land | 1.1 |
-| 41 | Deciduous Forest | 1.8 |
-| 42 | Evergreen Forest | 2.0 |
-| 43 | Mixed Forest | 1.9 |
-| 52 | Shrub/Scrub | 1.5 |
-| 71 | Grassland/Herbaceous | 1.2 |
-| 90 | Woody Wetlands | 3.5 |
-| 95 | Emergent Herbaceous Wetlands | 4.0 |
-
-Mode-specific adjustments: MTB and ATV get higher penalties on forest/wetland. ATV gets ∞ on wilderness-designated areas (PAD-US `Des_Tp = WA`).
-
-**Trail burn-in:** Rasterize OSM trails/tracks as cells with reduced friction (trail cell = 0.5× base, track = 0.3×, road = 0.1×). The pathfinder naturally gravitates toward and follows these corridors without special logic.
-
-### 4.5 Engine Choice
-
-**Recommended: scikit-image `MCP_Geometric` for initial build.**
-
-- Cython Dijkstra, 1–5 seconds on 2–4M cell grids
-- `find_costs(start)` computes cumulative cost surface once; `traceback(target)` for any target is O(path length) — reuse for "nearest trail," "nearest road," and destination all in one pass
-- `MCP_Flexible` subclass allows overriding `_travel_cost()` for anisotropic costs (uphill ≠ downhill)
-- Pure Python integration with Flask backend
-- Memory OK up to ~20–40M cells on 24GB
-
-**Performance path: Rust `pathfinding` crate as a microservice.**
-
-- A*, Dijkstra, HPA* (hierarchical) all available
-- Custom successor function encodes anisotropic cost
-- Sub-second on 4M cells
-- `hierarchical_pathfinding` crate enables multi-resolution: coarse pass → refine in corridor
-- Wrap in Axum HTTP server, call from Flask
-
-**Decision:** Start with scikit-image Python. If latency is a problem, rewrite the inner loop in Rust. The cost function, data pipeline, and API don't change.
-
-### 4.6 Multi-Resolution Strategy
-
-For routes where the wilderness segment exceeds ~10km, full-resolution pathfinding on the entire search area gets expensive. Use the Primordial Ground Guidance approach:
-
-1. **Coarse pass:** Downsample cost grid 4× (120m cells). Solve A*. Sub-second.
-2. **Corridor extraction:** Buffer the coarse path by 200m.
-3. **Fine pass:** Re-solve at native 30m resolution only within the corridor. Sub-second.
-4. **Total:** <2 seconds for a 15km wilderness segment.
-
-### 4.7 Network Hand-Off
-
-The raster pathfinder needs to know where the trail/road network starts so it can stop:
-
-1. **Pre-compute trail entry points:** Extract from OSM all endpoints and intersections of `highway=path|track|footway|bridleway|unclassified|tertiary|secondary|primary`. Store as a PostGIS point table (or SQLite spatial index in `navi.db`).
-2. **Rasterize entry points** onto the cost grid as target cells.
-3. **Run `MCP.find_costs(start)`** — the Dijkstra wave expands until it reaches any entry-point cell. Use `goal_reached()` override in `MCP_Flexible` for early termination.
-4. **Snap** the reached entry point to its nearest Valhalla graph node.
-5. **Call Valhalla** from that node to destination with appropriate costing profile.
-6. **Concatenate** raster path + Valhalla path into one GeoJSON with per-segment metadata.
-
----
-
-## 5. Data Acquisition Checklist
-
-| Dataset | Status | Size | Action |
-|---|---|---|---|
-| DEM (planet-dem.pmtiles) | ✅ Have it | 658GB | Serving via nginx from pi-nas |
-| NLCD Land Cover (CONUS) | ❌ Not acquired | ~5GB | Download from USGS MRLC |
-| NLCD Tree Canopy (CONUS) | ❌ Not acquired | ~2GB | Optional — continuous friction surface |
-| OSM Planet PBF | ❌ Not acquired for this use | ~70GB | Extract waterways, cliffs, trails via osmium |
-| PAD-US | ✅ Have source | 1.6GB in /mnt/nav/padus/ | Rasterize by access class |
-| USFS Trail/Road layers | ✅ Have PMTiles | 848MB + 496MB | Need raw vectors for rasterization |
-| Trail entry points index | ❌ Not built | ~50MB | Extract from OSM + USFS |
-
-**First acquisition:** NLCD. It's the single most impactful layer after the DEM — without land cover, the pathfinder can't distinguish open meadow from dense forest.
-
----
-
-## 6. Safety Considerations
-
-This system may guide people through dangerous terrain. Design constraints:
-
-- **Hard slope cutoffs are non-negotiable.** No route segment should ever cross terrain above the mode's max slope threshold, regardless of how much faster the direct path would be.
-- **Confidence scoring:** Every response includes a `confidence` field (0.0–1.0) based on: DEM resolution vs route steepness, distance from nearest verified trail data, land cover data freshness, number of barrier crossings.
-- **Fallback behaviors:** If no safe route exists within `max_search_km`, return an error with the direction and distance to the nearest trail (as a bearing, not a route). Never hallucinate a route through impassable terrain.
-- **Per-step user confirmation (Aurora/Meshtastic):** In text mode, Aurora should confirm each major terrain transition ("You will cross a drainage heading southwest — confirm you can see safe footing"). A lost person should never blindly follow instructions into terrain they can't visually verify.
-- **DSM vs DTM caveat:** Copernicus GLO-30 is a Digital Surface Model (includes treetops, buildings). A flat meadow next to tall pines will show false slope at the treeline. The system should note this in Aurora's instructions for forested areas.
-- **30m resolution risk:** A 15m-wide cliff band can be smoothed into a single "steep but passable" cell. The safety gate catches obvious cliffs but may miss narrow features. Documented limitation; mitigated by upgrading to 10m USGS 3DEP in the future.
-
----
-
-## 7. Implementation Phases
-
-### Phase O1: Foundation
-- Acquire NLCD CONUS land cover
-- Build PMTiles elevation decoder + tile cache module
-- Implement Tobler off-path cost function
-- Prototype: scikit-image MCP on a small Idaho bbox (e.g., 20km × 20km around Sun Valley)
-- Validate: does the path avoid canyons, prefer gentle slopes, follow drainages?
-
-### Phase O2: Friction Integration
-- Rasterize NLCD into friction grid
-- Rasterize OSM waterways/cliffs as barriers
-- Rasterize PAD-US access restrictions
-- Burn OSM trails/roads as low-cost corridors
-- Combined cost surface for foot mode
-
-### Phase O3: Network Hand-Off
-- Build trail entry point index from OSM + USFS
-- Implement MCP → Valhalla stitching
-- `/api/offroute` endpoint (foot mode only)
-- GeoJSON response with per-segment metadata
-
-### Phase O4: Multi-Mode + Aurora
-- Add MTB cost function (Herzog wheeled-transport)
-- Add ATV cost function
-- Mode-specific barrier rules (wilderness restrictions for MTB/ATV)
-- Aurora tool integration — `offroute` in nav_tools.py
-- Meshtastic text-based instruction generation (bearings, terrain descriptions)
-
-### Phase O5: Performance + Polish
-- Multi-resolution pathfinding (coarse → corridor → fine)
-- Rust pathfinder microservice (if Python latency is insufficient)
-- Confidence scoring
-- Navi frontend route visualization with segment coloring
-- Elevation profile display per segment
-
-### Phase O6: Pi 5 Field Kit
-- Offline PMTiles elevation access
-- Pre-baked cost tiles for Idaho/CONUS-West
-- Bbox-filter packager for all spatial datasets
-- Full offline operation via Meshtastic ↔ Aurora ↔ offroute chain
-
----
-
-## 8. Infrastructure
-
-**Runtime services (VM 1130):**
-- `/api/offroute` — Flask endpoint in RECON dashboard
-- Tile cache — LRU in-memory decoded elevation arrays
-- Valhalla Docker :8002 — on-network routing (already running)
-
-**Data (VM 1130 /mnt/nav/):**
-- Pre-baked friction rasters (NLCD, barriers, trails) — tiled GeoTIFF or COG
-- Trail entry point index — SQLite spatial in navi.db
-
-**Data (pi-nas /mnt/nas/nav/):**
-- planet-dem.pmtiles — 658GB, served via nginx
-- Regional GeoTIFF DEMs — 203GB, insurance until pipeline validated
-
-**Compute (cortex or matt-desktop):**
-- One-time cost surface generation jobs (NLCD rasterization, OSM extraction, barrier tiling)
-
----
-
-## 9. Key Decisions Made
-
-| Decision | Rationale |
-|---|---|
-| No pre-rendered slope rasters | Pathfinder computes grade on the fly from cached elevation arrays. Simpler, no GDAL dependency at runtime. |
-| planet-dem.pmtiles as single elevation source | Same data already drives contours + hillshade. 30m sufficient for first build. Global coverage. |
-| scikit-image MCP for initial engine | Cython Dijkstra, proven on 2–4M cell grids, Python-native, anisotropic via MCP_Flexible. Rust upgrade path if needed. |
-| Tobler off-path as primary foot cost model | Best-validated off-trail hiking function. Inherently anisotropic. 0.6× off-trail multiplier built in. |
-| Trail burn-in (not separate hand-off logic) | Rasterizing trails as low-cost cells lets the pathfinder naturally follow them without mode-switching logic. |
-| Pre-baked friction rasters (offline) | NLCD, barriers, and land ownership change slowly. Build once, cache, update periodically. |
-| Multi-resolution for long routes | Coarse pass → corridor → fine pass. Standard technique from military route planning (Primordial Ground Guidance). |
-| Confidence scoring on every response | Safety-critical system. User must know when to trust vs. verify the route. |
-
----
-
-## 10. Open Questions
-
-- [ ] What is the right `max_slope` cutoff per mode? Needs field testing / literature review.
-- [ ] Should the pathfinder use A* (faster, needs admissible heuristic) or Dijkstra (guaranteed optimal, slower)? MCP uses Dijkstra; pyastar2d uses A*.
-- [ ] How to generate natural-language terrain descriptions for Aurora from raster data? (e.g., "sagebrush slope" vs. "forested drainage")
-- [ ] Should we pre-compute the full cost surface for Idaho/CONUS-West, or generate it on demand per request?
-- [ ] How to handle seasonal/weather variations? (Snow, spring runoff, wildfire closures)
-- [ ] Valhalla pedestrian elevation costing (PR #3234) — test and validate before relying on it for segments 2–4.
-- [ ] USFS MVUM (Motor Vehicle Use Maps) — authoritative ATV/4WD legal access layer. Acquire and integrate for ATV mode.
-
----
-
-## References
-
-- Tobler, W. (1993). Three Presentations on Geographical Analysis and Modeling. NCGIA TR 93-1.
-- Irmischer, I.J. & Clarke, K.C. (2018). Measuring and modeling the speed of human navigation. *Cartography and GIS*, 45(2), 177-186.
-- Herzog, I. (2020). Spatial Analysis Based on Cost Functions. In *Archaeological Spatial Analysis*.
-- Lewis, J. (2023). `leastcostpath` R package. CRAN.
-- GRASS GIS. `r.walk` manual. grass.osgeo.org.
-- Hoover, B. et al. (2019). CostMAP: An open-source software package for developing cost surfaces. LANL.
-- Mapterhorn project. mapterhorn.com. BSD-3.
-
-
----
-
-## 11. On-Network Traffic Intelligence
-
-Two features that affect Valhalla segments (2–4) of the offroute chain, not the wilderness pathfinder (segment 1):
-
-### Traffic-Aware Routing
-
-- Valhalla supports time-dependent costing via traffic speed tiles
-- TomTom traffic tiles already integrated in Navi at `/api/traffic/*` (currently visual overlay only)
-- **Integration path:** configure Valhalla `traffic_tile_dir` to consume TomTom speed data so route calculations account for live congestion
-- **Effect on offroute:** segments 2–4 (trail-to-road, road-to-road, road-to-home) would route around congested corridors
-- Does NOT affect segment 1 (wilderness pathfinder)
-
-### Idaho 511 Incident Feed
-
-- Idaho 511 API provides real-time construction zones, accidents, and road closures
-- Two integration points:
-  1. **Visual layer** — display incidents on Navi map as icons/overlays
-  2. **Routing barriers** — feed active closures to Valhalla as `avoid_locations` or edge exclusions so routes avoid closed roads
-- **Implementation:** polling daemon (5–10 min interval), stores active incidents in `navi.db`, expires automatically when cleared
-- Affects both standalone Valhalla routing and offroute segments 2–4
-- **Stretch goal:** ingest other state 511 feeds for cross-state trips
-
-### Sequencing
-
-- Both features are post-offroute-core (after Phase O3)
-- Can be built in parallel — traffic routing is Valhalla config, 511 is a new ingestion daemon + map layer
-- Neither blocks wilderness pathfinder development

docs/navi-feature-ideas.md

@@ -1,92 +0,0 @@
-# Navi Feature Ideas
-
-Planned features and enhancements for the Navi navigation platform.
-
----
-
-## Traffic & Incident Intelligence
-
-### Traffic-Aware Routing
-
-**Status:** Planned (post-Phase O3)
-
-Integrate TomTom traffic data into Valhalla routing calculations:
-
-- TomTom traffic tiles already available at `/api/traffic/*` (visual overlay)
-- Configure Valhalla `traffic_tile_dir` to consume speed data
-- Routes will account for live congestion on segments 2–4 of offroute chain
-- Does not affect wilderness pathfinder (segment 1)
-
-### Idaho 511 Incident Feed
-
-**Status:** Planned (post-Phase O3)
-
-Real-time road closure and incident integration:
-
-- Poll Idaho 511 API every 5–10 minutes
-- Store active incidents in `navi.db` with auto-expiration
-- Display incidents as map overlay (icons/markers)
-- Feed closures to Valhalla as `avoid_locations` for routing
-- Stretch: support other state 511 feeds for cross-state trips
-
----
-
-## Tracking & Situational Awareness
-
-### ADS-B Aircraft Tracking
-
-**Status:** Planned
-
-Display live aircraft positions from ADS-B receivers:
-
-- Integrate with local ADS-B receiver (dump1090/readsb)
-- Show aircraft positions, altitude, callsign on map
-- Useful for backcountry SAR coordination and general aviation awareness
-
-### AIS Vessel Tracking
-
-**Status:** Planned
-
-Display marine vessel positions:
-
-- Integrate with AIS receiver or feed
-- Show vessel positions, heading, name on map
-- Applicable for coastal/maritime navigation scenarios
-
----
-
-## TAK Integration
-
-### TAK Server + EUD Integration
-
-**Status:** Planned
-
-Connect Navi to the TAK ecosystem (ATAK, iTAK, WinTAK):
-
-- TAK Server integration for shared situational awareness
-- Push Navi routes to TAK clients as CoT (Cursor on Target)
-- Pull team member positions from TAK into Navi
-- Enable SAR/field team coordination through unified COP
-
----
-
-## Mobile & Offline
-
-### Native iOS App
-
-**Status:** Planned
-
-Native iOS application for offline-first navigation:
-
-- Full offline map tile access
-- Offline routing with pre-cached Valhalla tiles
-- Integration with Apple Watch for turn-by-turn
-- Meshtastic/LoRa mesh network support for off-grid comms
-
----
-
-## Notes
-
-- Features above Phase O3 depend on core offroute functionality being complete
-- Traffic and 511 features can be built in parallel
-- TAK integration useful for field coordination but not blocking core nav

package-lock.json

@@ -8,7 +8,6 @@
       "name": "navi",
       "version": "0.0.0",
       "dependencies": {
-        "@acalcutt/maplibre-contour-pmtiles": "^0.1.2",
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/sortable": "^10.0.0",
         "@dnd-kit/utilities": "^3.2.2",
@@ -38,12 +37,6 @@
         "vite": "^8.0.9"
       }
     },
-    "node_modules/@acalcutt/maplibre-contour-pmtiles": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/@acalcutt/maplibre-contour-pmtiles/-/maplibre-contour-pmtiles-0.1.2.tgz",
-      "integrity": "sha512-dCyJFLLM4NomLoJ22McRp7yETFmzUuA6iEMVJS6+mFyHoNk7Sv6RI4Hn0DhGKeyjcJgan3YnfSnzsqRinnXSug==",
-      "license": "BSD-3-Clause"
-    },
     "node_modules/@alloc/quick-lru": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",

package.json

@@ -10,7 +10,6 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@acalcutt/maplibre-contour-pmtiles": "^0.1.2",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",

src/App.jsx

@@ -1,7 +1,8 @@
 import { useEffect, useRef, useCallback } from 'react'
 import { useStore } from './store'
 import { useTheme } from './hooks/useTheme'
-import { fetchAuthState } from './api'
+import { requestRoute, fetchAuthState } from './api'
+import { decodePolyline } from './utils/decode'
 import MapView from './components/MapView'
 import Panel from './components/Panel'
 
@@ -11,10 +12,20 @@ import LocateButton from './components/LocateButton'
 
 export default function App() {
   const mapViewRef = useRef(null)
+  const routeDebounceRef = useRef(null)
 
   // Initialize theme system
   useTheme()
 
+  const stops = useStore((s) => s.stops)
+  const mode = useStore((s) => s.mode)
+  const route = useStore((s) => s.route)
+  const gpsOrigin = useStore((s) => s.gpsOrigin)
+  const geoPermission = useStore((s) => s.geoPermission)
+  const setRoute = useStore((s) => s.setRoute)
+  const setRouteLoading = useStore((s) => s.setRouteLoading)
+  const setRouteError = useStore((s) => s.setRouteError)
+  const clearRoute = useStore((s) => s.clearRoute)
   const setAuth = useStore((s) => s.setAuth)
 
   // Initialize auth state on app load (single fetch, no polling)
@@ -22,23 +33,71 @@ export default function App() {
     fetchAuthState().then(setAuth)
   }, [setAuth])
 
-  // Handle clear route from panel
+  // Fetch route when stops, mode, gpsOrigin, or geoPermission change (debounced 500ms)
-  const handleClearRoute = useCallback(() => {
+  useEffect(() => {
-    mapViewRef.current?.clearRoute?.()
+    if (routeDebounceRef.current) clearTimeout(routeDebounceRef.current)
-  }, [])
+
+    routeDebounceRef.current = setTimeout(async () => {
+      const { userLocation } = useStore.getState()
+
+      let effective = stops.map((s) => ({ lat: s.lat, lon: s.lon }))
+      if (gpsOrigin && geoPermission === 'granted' && userLocation) {
+        effective = [{ lat: userLocation.lat, lon: userLocation.lon }, ...effective]
+      }
+
+      if (effective.length < 2) {
+        clearRoute()
+        return
+      }
+
+      setRouteLoading(true)
+
+      try {
+        const data = await requestRoute(effective, mode)
+        if (data.trip) {
+          setRoute(data.trip)
+        } else {
+          setRouteError('No route returned')
+        }
+      } catch (e) {
+        setRouteError(e.message || 'Route request failed')
+      } finally {
+        setRouteLoading(false)
+      }
+    }, 500)
+
+    return () => {
+      if (routeDebounceRef.current) clearTimeout(routeDebounceRef.current)
+    }
+  }, [stops, mode, gpsOrigin, geoPermission, clearRoute, setRoute, setRouteLoading, setRouteError])
+
+  // Handle maneuver click
+  const handleManeuverClick = useCallback(
+    (maneuver) => {
+      if (!route || !route.legs) return
+
+      const legIdx = maneuver._legIndex || 0
+      const leg = route.legs[legIdx]
+      if (!leg || !leg.shape) return
+
+      const coords = decodePolyline(leg.shape, 6)
+      const idx = maneuver.begin_shape_index
+      if (idx >= 0 && idx < coords.length) {
+        const [lng, lat] = coords[idx]
+        mapViewRef.current?.flyTo(lat, lng, 15)
+      }
+    },
+    [route]
+  )
 
   return (
     <div className="relative w-screen h-screen overflow-hidden" style={{ background: 'var(--bg-base)' }}>
       <MapView ref={mapViewRef} />
-      <Panel onClearRoute={handleClearRoute} />
+      <Panel onManeuverClick={handleManeuverClick} />
       
       <ContactModal />
-
-      {/* Bottom-right map controls */}
-      <div className="map-controls-br">
-        <LocateButton mapRef={mapViewRef} />
       <LayerControl mapRef={mapViewRef} />
-      </div>
+      <LocateButton mapRef={mapViewRef} />
     </div>
   )
 }

src/api.js

@@ -321,70 +321,3 @@ export async function fetchAuthState() {
     return { authenticated: false, username: null }
   }
 }
-
-// ── Offroute API ──
-
-const OFFROUTE_URL = "/api/offroute"
-const MVUM_URL = "/api/mvum"
-
-/**
- * Request an offroute route from the pathfinder API.
- * @param {object} start - { lat, lon }
- * @param {object} end - { lat, lon }
- * @param {string} mode - foot | mtb | atv | vehicle
- * @param {string} boundaryMode - strict | pragmatic | emergency
- * @returns {Promise<object>} Offroute response with GeoJSON route
- */
-export async function requestOffroute(start, end, mode = "foot", boundaryMode = "strict") {
-  const body = {
-    start: [start.lat, start.lon],
-    end: [end.lat, end.lon],
-    mode,
-    boundary_mode: boundaryMode,
-  }
-  console.log('[TRACE-API] requestOffroute body:', JSON.stringify(body))
-
-  const controller = new AbortController()
-  const timeout = setTimeout(() => controller.abort(), 120000) // 2 min timeout for complex routes
-
-  try {
-    const resp = await fetch(OFFROUTE_URL, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(body),
-      signal: controller.signal,
-    })
-
-    if (!resp.ok) {
-      const errBody = await resp.json().catch(() => ({}))
-      throw new Error(errBody.message || 'Could not find a route. Try a different start point or mode.')
-    }
-
-    return resp.json()
-  } finally {
-    clearTimeout(timeout)
-  }
-}
-
-/**
- * Fetch MVUM (Motor Vehicle Use Map) info for a location.
- * @param {number} lat
- * @param {number} lon
- * @param {number} radius - Search radius in meters
- * @returns {Promise<object|null>} MVUM feature info or null
- */
-export async function fetchMvumInfo(lat, lon, radius = 500) {
-  try {
-    const params = new URLSearchParams({
-      lat: String(lat),
-      lon: String(lon),
-      radius: String(radius),
-    })
-    const resp = await fetch(`${MVUM_URL}?${params}`, { signal: AbortSignal.timeout(5000) })
-    if (!resp.ok) return null
-    const data = await resp.json()
-    return data.feature || null
-  } catch {
-    return null
-  }
-}

src/components/DirectionsPanel.jsx

@@ -1,417 +0,0 @@
-import { useEffect, useMemo } from "react"
-import { ArrowUpDown, Plus, X, Footprints, Bike, Car, Shield, AlertTriangle, Zap, Trash2, GripVertical } from "lucide-react"
-import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors } from "@dnd-kit/core"
-import { arrayMove, SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable"
-import { CSS } from "@dnd-kit/utilities"
-import { useStore } from "../store"
-import LocationInput from "./LocationInput"
-import ManeuverList from "./ManeuverList"
-
-const TRAVEL_MODES = [
-  { id: "auto", label: "Drive", Icon: Car },
-  { id: "foot", label: "Foot", Icon: Footprints },
-  { id: "mtb", label: "MTB", Icon: Bike },
-  { id: "atv", label: "ATV", Icon: Car },
-  { id: "vehicle", label: "4x4", Icon: Car },
-]
-
-const BOUNDARY_MODES = [
-  { id: "strict", label: "Strict", Icon: Shield, title: "Avoid barriers" },
-  { id: "pragmatic", label: "Cross", Icon: AlertTriangle, title: "Cross with penalty" },
-  { id: "emergency", label: "Ignore", Icon: Zap, title: "Ignore barriers" },
-]
-
-// Sortable row component
-function SortableRow({ id, children }) {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({ id })
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0.5 : 1,
-    zIndex: isDragging ? 1000 : 1,
-  }
-
-  return (
-    <div ref={setNodeRef} style={style} className="flex items-center gap-1">
-      {/* Drag handle */}
-      <button
-        {...attributes}
-        {...listeners}
-        className="p-1 rounded cursor-grab active:cursor-grabbing hover:bg-[var(--bg-overlay)] transition-colors shrink-0 touch-none"
-        title="Drag to reorder"
-      >
-        <GripVertical size={14} style={{ color: "var(--text-tertiary)" }} />
-      </button>
-      {children}
-    </div>
-  )
-}
-
-export default function DirectionsPanel({ onClose }) {
-  const routeStart = useStore((s) => s.routeStart)
-  const routeEnd = useStore((s) => s.routeEnd)
-  const routeMode = useStore((s) => s.routeMode)
-  const boundaryMode = useStore((s) => s.boundaryMode)
-  const routeResult = useStore((s) => s.routeResult)
-  const routeLoading = useStore((s) => s.routeLoading)
-  const routeError = useStore((s) => s.routeError)
-  const stops = useStore((s) => s.stops)
-  const userLocation = useStore((s) => s.userLocation)
-  const geoPermission = useStore((s) => s.geoPermission)
-
-  const setRouteStart = useStore((s) => s.setRouteStart)
-  const setRouteEnd = useStore((s) => s.setRouteEnd)
-  const setRouteMode = useStore((s) => s.setRouteMode)
-  const setBoundaryMode = useStore((s) => s.setBoundaryMode)
-  const computeRoute = useStore((s) => s.computeRoute)
-  const clearRoute = useStore((s) => s.clearRoute)
-  const setDirectionsMode = useStore((s) => s.setDirectionsMode)
-  const addIntermediateStop = useStore((s) => s.addIntermediateStop)
-  const updateStop = useStore((s) => s.updateStop)
-  const removeStop = useStore((s) => s.removeStop)
-  const setStops = useStore((s) => s.setStops)
-
-  // DnD sensors
-  const sensors = useSensors(
-    useSensor(PointerSensor, {
-      activationConstraint: {
-        distance: 8,
-      },
-    }),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    })
-  )
-
-  // Build unified list for drag-and-drop: origin + stops + destination
-  // Each item has: { id, type, data }
-  const unifiedList = useMemo(() => {
-    const items = []
-    if (routeStart) {
-      items.push({ id: "origin", type: "origin", data: routeStart })
-    }
-    stops.forEach((stop) => {
-      items.push({ id: stop.id, type: "stop", data: stop })
-    })
-    if (routeEnd) {
-      items.push({ id: "destination", type: "destination", data: routeEnd })
-    }
-    return items
-  }, [routeStart, stops, routeEnd])
-
-  const itemIds = useMemo(() => unifiedList.map((item) => item.id), [unifiedList])
-
-  // Auto-fill origin with GPS if available and origin is empty
-  useEffect(() => {
-    if (!routeStart && geoPermission === "granted" && userLocation) {
-      setRouteStart({
-        lat: userLocation.lat,
-        lon: userLocation.lon,
-        name: "Your location",
-        source: "gps",
-      })
-    }
-  }, [routeStart, geoPermission, userLocation, setRouteStart])
-
-  // Auto-compute route when both endpoints are set
-  useEffect(() => {
-    if (routeStart && routeEnd) {
-      computeRoute()
-    }
-  }, [routeStart?.lat, routeStart?.lon, routeEnd?.lat, routeEnd?.lon])
-
-  const handleClose = () => {
-    clearRoute()
-    setDirectionsMode(false)
-    onClose?.()
-  }
-
-  const handleAddStop = () => {
-    addIntermediateStop()
-  }
-
-  // Handle drag end - reorder the unified list
-  const handleDragEnd = (event) => {
-    const { active, over } = event
-    if (!over || active.id === over.id) return
-
-    const oldIndex = unifiedList.findIndex((item) => item.id === active.id)
-    const newIndex = unifiedList.findIndex((item) => item.id === over.id)
-
-    if (oldIndex === -1 || newIndex === -1) return
-
-    // Reorder the unified list
-    const reordered = arrayMove(unifiedList, oldIndex, newIndex)
-
-    // Extract new origin, stops, and destination from reordered list
-    // First item becomes origin, last becomes destination, middle are stops
-    if (reordered.length === 0) return
-
-    const newOriginItem = reordered[0]
-    const newDestItem = reordered.length > 1 ? reordered[reordered.length - 1] : null
-    const newStopItems = reordered.length > 2 ? reordered.slice(1, -1) : []
-
-    // Convert items to proper format
-    const newOrigin = newOriginItem.data ? {
-      lat: newOriginItem.data.lat,
-      lon: newOriginItem.data.lon,
-      name: newOriginItem.data.name,
-      source: newOriginItem.data.source,
-    } : null
-
-    const newDest = newDestItem?.data ? {
-      lat: newDestItem.data.lat,
-      lon: newDestItem.data.lon,
-      name: newDestItem.data.name,
-      source: newDestItem.data.source,
-    } : null
-
-    const newStops = newStopItems.map((item) => ({
-      id: item.id === "origin" || item.id === "destination" ? crypto.randomUUID() : item.id,
-      lat: item.data?.lat ?? null,
-      lon: item.data?.lon ?? null,
-      name: item.data?.name ?? "",
-    }))
-
-    // Update state
-    setRouteStart(newOrigin)
-    setRouteEnd(newDest)
-    setStops(newStops)
-
-    // Trigger route recalculation
-    setTimeout(() => computeRoute(), 0)
-  }
-
-  // Check if route has wilderness segments
-  const hasWilderness = routeResult?.summary?.wilderness_distance_km > 0
-
-  return (
-    <div className="flex flex-col gap-3">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <span className="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
-          Directions
-        </span>
-        <button
-          onClick={handleClose}
-          className="p-1.5 rounded-lg hover:bg-[var(--bg-overlay)] transition-colors"
-          title="Close directions"
-        >
-          <X size={18} style={{ color: "var(--text-tertiary)" }} />
-        </button>
-      </div>
-
-      {/* Drag-and-drop location list */}
-      <DndContext
-        sensors={sensors}
-        collisionDetection={closestCenter}
-        onDragEnd={handleDragEnd}
-      >
-        <SortableContext items={itemIds} strategy={verticalListSortingStrategy}>
-          <div className="flex flex-col gap-2">
-            {unifiedList.map((item, idx) => (
-              <SortableRow key={item.id} id={item.id}>
-                <div className="flex-1">
-                  {item.type === "origin" && (
-                    <LocationInput
-                      value={routeStart}
-                      onChange={setRouteStart}
-                      placeholder={geoPermission === "granted" ? "Your location" : "Choose starting point"}
-                      icon="origin"
-                      fieldId="origin"
-                      autoFocus={!routeStart}
-                    />
-                  )}
-                  {item.type === "destination" && (
-                    <LocationInput
-                      value={routeEnd}
-                      onChange={setRouteEnd}
-                      placeholder="Choose destination"
-                      icon="destination"
-                      fieldId="destination"
-                      autoFocus={routeStart && !routeEnd}
-                    />
-                  )}
-                  {item.type === "stop" && (
-                    <LocationInput
-                      value={item.data.lat != null ? { lat: item.data.lat, lon: item.data.lon, name: item.data.name } : null}
-                      onChange={(place) => {
-                        if (place) {
-                          updateStop(item.id, place)
-                        }
-                      }}
-                      placeholder={`Stop ${idx}`}
-                      icon="stop"
-                      fieldId={`stop-${item.id}`}
-                      autoFocus={item.data.lat == null}
-                    />
-                  )}
-                </div>
-                {/* Remove button for intermediate stops only */}
-                {item.type === "stop" && (
-                  <button
-                    onClick={() => removeStop(item.id)}
-                    className="p-1.5 rounded-lg hover:bg-[var(--bg-overlay)] transition-colors shrink-0"
-                    title="Remove stop"
-                  >
-                    <Trash2 size={14} style={{ color: "var(--text-tertiary)" }} />
-                  </button>
-                )}
-                {/* Spacer for origin/destination to align with stops that have remove button */}
-                {item.type !== "stop" && (
-                  <div className="w-[30px] shrink-0" />
-                )}
-              </SortableRow>
-            ))}
-
-            {/* Add stop button - only show when route exists */}
-            {routeStart && routeEnd && stops.length < 8 && (
-              <button
-                onClick={handleAddStop}
-                className="flex items-center justify-center gap-1.5 py-1.5 text-xs rounded-lg transition-colors ml-6"
-                style={{
-                  background: "var(--bg-overlay)",
-                  color: "var(--text-secondary)",
-                  border: "1px dashed var(--border)",
-                }}
-              >
-                <Plus size={14} />
-                <span>Add stop</span>
-              </button>
-            )}
-          </div>
-        </SortableContext>
-      </DndContext>
-
-      {/* Travel mode selector */}
-      <div className="flex gap-1">
-        {TRAVEL_MODES.map((m) => {
-          const active = routeMode === m.id
-          return (
-            <button
-              key={m.id}
-              onClick={() => setRouteMode(m.id)}
-              className="flex-1 flex items-center justify-center gap-1 py-2 text-xs rounded-lg transition-colors"
-              style={{
-                background: active ? "var(--accent-muted)" : "var(--bg-overlay)",
-                color: active ? "var(--accent)" : "var(--text-tertiary)",
-              }}
-              title={m.label}
-            >
-              <m.Icon size={16} />
-              <span className="hidden sm:inline">{m.label}</span>
-            </button>
-          )
-        })}
-      </div>
-
-      {/* Boundary mode selector (only for non-auto modes) */}
-      {routeMode !== "auto" && (
-        <div className="flex gap-1">
-          {BOUNDARY_MODES.map((m) => {
-            const active = boundaryMode === m.id
-            return (
-              <button
-                key={m.id}
-                onClick={() => setBoundaryMode(m.id)}
-                className="flex-1 flex items-center justify-center gap-1 py-1.5 text-xs rounded-lg transition-colors"
-                style={{
-                  background: active ? "var(--accent-muted)" : "var(--bg-overlay)",
-                  color: active ? "var(--accent)" : "var(--text-tertiary)",
-                }}
-                title={m.title}
-              >
-                <m.Icon size={14} />
-                <span className="hidden sm:inline">{m.label}</span>
-              </button>
-            )
-          })}
-        </div>
-      )}
-
-      {/* Loading indicator */}
-      {routeLoading && (
-        <div className="flex items-center justify-center gap-2 py-3">
-          <div
-            className="w-5 h-5 border-2 border-t-transparent rounded-full animate-spin"
-            style={{ borderColor: "var(--accent)", borderTopColor: "transparent" }}
-          />
-          <span className="text-sm" style={{ color: "var(--text-secondary)" }}>
-            Finding route...
-          </span>
-        </div>
-      )}
-
-      {/* Error message - friendly text, no "offroute" */}
-      {routeError && (
-        <div
-          className="px-3 py-2 rounded-lg text-sm"
-          style={{
-            background: "var(--error-bg, rgba(239, 68, 68, 0.1))",
-            color: "var(--error, #ef4444)",
-          }}
-        >
-          {routeError.includes("No route") || routeError.includes("not found")
-            ? "No route found. Try a different start point or mode."
-            : routeError.includes("entry point")
-            ? "No roads found nearby — try Foot mode for trails."
-            : routeError}
-        </div>
-      )}
-
-      {/* Route legend - only shown when route has wilderness segment */}
-      {routeResult && hasWilderness && !routeLoading && (
-        <div
-          className="flex items-center gap-4 px-3 py-2 rounded-lg text-xs"
-          style={{ background: "var(--bg-overlay)" }}
-        >
-          <div className="flex items-center gap-1.5">
-            <svg width="24" height="2" style={{ overflow: "visible" }}>
-              <line
-                x1="0" y1="1" x2="24" y2="1"
-                stroke="#f97316"
-                strokeWidth="3"
-                strokeDasharray="4,3"
-              />
-            </svg>
-            <span style={{ color: "var(--text-secondary)" }}>Wilderness (on foot)</span>
-          </div>
-          <div className="flex items-center gap-1.5">
-            <svg width="24" height="2" style={{ overflow: "visible" }}>
-              <line
-                x1="0" y1="1" x2="24" y2="1"
-                stroke="#3b82f6"
-                strokeWidth="3"
-              />
-            </svg>
-            <span style={{ color: "var(--text-secondary)" }}>Road/Trail</span>
-          </div>
-        </div>
-      )}
-
-      {/* Route summary and maneuvers */}
-      {routeResult && !routeLoading && (
-        <div className="border-t pt-3" style={{ borderColor: "var(--border)" }}>
-          <ManeuverList />
-        </div>
-      )}
-
-      {/* Hint when waiting for input */}
-      {!routeStart && !routeEnd && !routeLoading && (
-        <div className="text-center py-4">
-          <p className="text-xs" style={{ color: "var(--text-tertiary)" }}>
-            Enter addresses, paste coordinates, or click the map
-          </p>
-        </div>
-      )}
-    </div>
-  )
-}

src/components/LayerControl.jsx

@@ -1,8 +1,6 @@
 import { useState, useEffect, useRef } from 'react'
-import { Layers, Map, Satellite, Globe } from 'lucide-react'
+import { Layers, Trees, Mountain } from 'lucide-react'
 import { hasFeature, getConfig } from '../config'
-import { useConfig } from '../hooks/useConfig'
-import { useStore } from '../store'
 
 const STORAGE_KEY = 'navi-layer-prefs'
 
@@ -30,18 +28,7 @@ export default function LayerControl({ mapRef }) {
   const [blmTrails, setBlmTrails] = useState(false)
   const panelRef = useRef(null)
 
-  // View mode: map | satellite | hybrid
+  // Initialize from localStorage or defaults on mount
-  const viewMode = useStore((s) => s.viewMode)
-  const setViewMode = useStore((s) => s.setViewMode)
-
-  // Auth state — Traffic tiles are auth-gated at the edge (Caddy @authed_api),
-  // so the toggle is only usable when authenticated. config drives re-init once
-  // /api/config resolves (so saved prefs hydrate against known feature flags).
-  const auth = useStore((s) => s.auth)
-  const config = useConfig()
-  const trafficDisabled = !auth.loaded || !auth.authenticated
-
-  // Initialize from localStorage or defaults on mount (re-runs when config loads)
   useEffect(() => {
     const saved = loadPrefs()
     const hsAvailable = hasFeature('has_hillshade')
@@ -55,7 +42,7 @@ export default function LayerControl({ mapRef }) {
 
     if (saved) {
       setHillshade(hsAvailable && (saved.hillshade ?? true))
-      setTraffic(trAvailable && auth.authenticated && (saved.traffic ?? false))
+      setTraffic(trAvailable && (saved.traffic ?? false))
       setPublicLands(plAvailable && (saved.publicLands ?? false))
       setContours(ctAvailable && (saved.contours ?? false))
       setContoursTest(ctTestAvailable && (saved.contoursTest ?? false))
@@ -72,14 +59,7 @@ export default function LayerControl({ mapRef }) {
       setContoursTest10ft(false)
       setUsfsTrails(false)
     }
-  }, [config])
+  }, [])
-
-  // Tear down traffic when the session goes anonymous (only after auth has
-  // loaded, so we don't tear down during the brief pre-whoami window on reload).
-  // Flipping the pref off drives the apply effect below -> removeTrafficLayer.
-  useEffect(() => {
-    if (auth.loaded && !auth.authenticated && traffic) setTraffic(false)
-  }, [auth.loaded, auth.authenticated])  // eslint-disable-line react-hooks/exhaustive-deps
 
   // Apply layers when prefs change
   useEffect(() => {
@@ -112,7 +92,7 @@ export default function LayerControl({ mapRef }) {
     if (!map) return
 
     const apply = () => {
-      if (traffic && hasFeature('has_traffic_overlay') && auth.authenticated) {
+      if (traffic && hasFeature('has_traffic_overlay')) {
         mapView.addTrafficLayer?.()
       } else {
         mapView.removeTrafficLayer?.()
@@ -126,7 +106,7 @@ export default function LayerControl({ mapRef }) {
     }
     savePrefs({ hillshade, traffic, publicLands, contours, contoursTest, contoursTest10ft, usfsTrails, blmTrails })
     return () => map.off('style.load', apply)
-  }, [traffic, mapRef, auth.authenticated])
+  }, [traffic, mapRef])
 
   useEffect(() => {
     const mapView = mapRef?.current
@@ -259,25 +239,6 @@ export default function LayerControl({ mapRef }) {
     savePrefs({ hillshade, traffic, publicLands, contours, contoursTest, contoursTest10ft, usfsTrails, blmTrails })
   }, [blmTrails, mapRef])
 
-  // Apply view mode changes
-  useEffect(() => {
-    const mapView = mapRef?.current
-    if (!mapView) return
-    const map = mapView.getMap?.()
-    if (!map) return
-
-    const apply = () => {
-      mapView.setViewMode?.(viewMode)
-    }
-
-    if (map.isStyleLoaded()) {
-      apply()
-    } else {
-      map.once('style.load', apply)
-    }
-    return () => map.off('style.load', apply)
-  }, [viewMode, mapRef])
-
   // Close on outside click
   useEffect(() => {
     if (!open) return
@@ -310,39 +271,11 @@ export default function LayerControl({ mapRef }) {
         title="Map layers"
         aria-label="Toggle map layers"
       >
-        <Layers size={20} />
+        <Layers size={18} />
       </button>
 
       {open && (
         <div className="layer-control-popover">
-          {/* View mode segmented control */}
-          <div className="view-mode-control">
-            <button
-              className={`view-mode-btn ${viewMode === 'map' ? 'active' : ''}`}
-              onClick={() => setViewMode('map')}
-              title="Map view"
-            >
-              <Map size={14} />
-              <span>Map</span>
-            </button>
-            <button
-              className={`view-mode-btn ${viewMode === 'satellite' ? 'active' : ''}`}
-              onClick={() => setViewMode('satellite')}
-              title="Satellite view"
-            >
-              <Satellite size={14} />
-              <span>Satellite</span>
-            </button>
-            <button
-              className={`view-mode-btn ${viewMode === 'hybrid' ? 'active' : ''}`}
-              onClick={() => setViewMode('hybrid')}
-              title="Hybrid view"
-            >
-              <Globe size={14} />
-              <span>Hybrid</span>
-            </button>
-          </div>
-          
           <div className="layer-control-header">Layers</div>
 
           {showHillshade && (
@@ -358,17 +291,12 @@ export default function LayerControl({ mapRef }) {
           )}
 
           {showTraffic && (
-            <label
+            <label className="layer-control-item">
-              className="layer-control-item"
-              title={trafficDisabled ? 'Sign in to enable traffic' : undefined}
-              style={trafficDisabled ? { opacity: 0.5, cursor: 'not-allowed' } : undefined}
-            >
               <span className="layer-control-label">Traffic</span>
               <input
                 type="checkbox"
                 className="layer-control-toggle"
                 checked={traffic}
-                disabled={trafficDisabled}
                 onChange={(e) => setTraffic(e.target.checked)}
               />
             </label>

src/components/LocateButton.jsx

@@ -48,7 +48,7 @@ export default function LocateButton({ mapRef }) {
       title="My location"
       aria-label="Center map on my location"
     >
-      <Locate size={20} />
+      <Locate size={18} />
     </button>
   )
 }

src/components/LocationInput.jsx

@@ -1,321 +0,0 @@
-import { useRef, useEffect, useCallback, useState } from "react"
-import { MapPin, Crosshair, X, Navigation2, User, Star, Coffee, Fuel, ShoppingBag, Hotel, Building2, Target } from "lucide-react"
-import toast from "react-hot-toast"
-import { useStore } from "../store"
-import { searchGeocode } from "../api"
-import { buildAddress } from "../utils/place"
-import { hasFeature } from "../config"
-
-/** Parse coordinate input like "42.35, -114.30" */
-function parseCoordinates(input) {
-  if (!input) return null
-  const pattern = /^(-?\d+\.?\d*)\s*[,\s]\s*(-?\d+\.?\d*)$/
-  const match = input.trim().match(pattern)
-  if (!match) return null
-  const lat = parseFloat(match[1])
-  const lon = parseFloat(match[2])
-  if (isNaN(lat) || isNaN(lon) || lat < -90 || lat > 90 || lon < -180 || lon > 180) return null
-  return { lat, lon }
-}
-
-function CategoryIcon({ result, size = 14 }) {
-  const type = result.type || ""
-  const source = result.source || ""
-  if (result._isContact) return <User size={size} />
-  if (source === "nickname") return <Star size={size} />
-  if (type === "coordinates") return <Crosshair size={size} />
-  if (type === "locality" || type === "city") return <Building2 size={size} />
-  const osmVal = result.raw?.osm_value || ""
-  if (osmVal.includes("cafe") || osmVal.includes("coffee")) return <Coffee size={size} />
-  if (osmVal.includes("fuel") || osmVal.includes("gas")) return <Fuel size={size} />
-  if (osmVal.includes("shop") || osmVal.includes("supermarket")) return <ShoppingBag size={size} />
-  if (osmVal.includes("hotel") || osmVal.includes("motel")) return <Hotel size={size} />
-  return <MapPin size={size} />
-}
-
-export default function LocationInput({
-  value,          // { lat, lon, name } or null
-  onChange,       // (place) => void
-  placeholder,
-  icon,           // "origin" | "destination" | "stop"
-  fieldId,        // unique id for this field (for map click targeting)
-  onFocus,        // () => void
-  autoFocus,
-}) {
-  const inputRef = useRef(null)
-  const [query, setQuery] = useState(value?.name || "")
-  const [results, setResults] = useState([])
-  const [loading, setLoading] = useState(false)
-  const [open, setOpen] = useState(false)
-  const [activeIndex, setActiveIndex] = useState(-1)
-  const debounceRef = useRef(null)
-  const abortRef = useRef(null)
-
-  const contacts = useStore((s) => s.contacts)
-  const activeDirectionsField = useStore((s) => s.activeDirectionsField)
-  const setActiveDirectionsField = useStore((s) => s.setActiveDirectionsField)
-  const pickingRouteField = useStore((s) => s.pickingRouteField)
-  const setPickingRouteField = useStore((s) => s.setPickingRouteField)
-
-  // Sync display value when external value changes
-  useEffect(() => {
-    if (value?.name && value.name !== query) {
-      setQuery(value.name)
-    } else if (!value && query && !open) {
-      // Value cleared externally
-      setQuery("")
-    }
-  }, [value?.name, value?.lat, value?.lon])
-
-  const doSearch = useCallback(async (q) => {
-    if (abortRef.current) abortRef.current.abort()
-
-    if (!q.trim()) {
-      setResults([])
-      setOpen(false)
-      setLoading(false)
-      return
-    }
-
-    // Check coordinates first
-    const coords = parseCoordinates(q)
-    if (coords) {
-      const coordResult = {
-        lat: coords.lat,
-        lon: coords.lon,
-        name: coords.lat.toFixed(5) + ", " + coords.lon.toFixed(5),
-        address: "Coordinates",
-        type: "coordinates",
-        source: "coordinates",
-        match_code: null,
-        raw: {},
-      }
-      setResults([coordResult])
-      setOpen(true)
-      setLoading(false)
-      return
-    }
-
-    // Contact matches
-    let contactResults = []
-    if (hasFeature("has_contacts") && contacts.length > 0) {
-      const lower = q.trim().toLowerCase()
-      contactResults = contacts
-        .filter((c) =>
-          (c.label || "").toLowerCase().startsWith(lower) ||
-          (c.name || "").toLowerCase().startsWith(lower) ||
-          (c.call_sign || "").toLowerCase().startsWith(lower)
-        )
-        .slice(0, 3)
-        .map((c) => ({
-          lat: c.lat,
-          lon: c.lon,
-          name: c.label,
-          address: c.address || c.name || "",
-          type: "contact",
-          source: "contacts",
-          match_code: null,
-          raw: { contact: c },
-          _isContact: true,
-        }))
-    }
-
-    const ctrl = new AbortController()
-    abortRef.current = ctrl
-    setLoading(true)
-
-    try {
-      const data = await searchGeocode(q.trim(), 5, ctrl.signal)
-      const combined = [...contactResults, ...(data.results || [])]
-      setResults(combined)
-      setOpen(combined.length > 0)
-      setActiveIndex(-1)
-    } catch (e) {
-      if (e.name !== "AbortError") {
-        if (contactResults.length > 0) {
-          setResults(contactResults)
-          setOpen(true)
-        } else {
-          setResults([])
-          setOpen(false)
-        }
-      }
-    } finally {
-      setLoading(false)
-    }
-  }, [contacts])
-
-  const handleChange = (e) => {
-    const val = e.target.value
-    setQuery(val)
-    if (debounceRef.current) clearTimeout(debounceRef.current)
-    debounceRef.current = setTimeout(() => doSearch(val), 150)
-  }
-
-  const handleClear = () => {
-    setQuery("")
-    setResults([])
-    setOpen(false)
-    onChange(null)
-    inputRef.current?.focus()
-  }
-
-  const selectResult = (result) => {
-    onChange({
-      lat: result.lat,
-      lon: result.lon,
-      name: result.name,
-      source: result.source,
-      matchCode: result.match_code,
-    })
-    setQuery(result.name)
-    setResults([])
-    setOpen(false)
-    setActiveIndex(-1)
-  }
-
-  const handleKeyDown = (e) => {
-    if (!open || results.length === 0) {
-      if (e.key === "Escape") setOpen(false)
-      return
-    }
-    switch (e.key) {
-      case "ArrowDown":
-        e.preventDefault()
-        setActiveIndex((prev) => Math.min(prev + 1, results.length - 1))
-        break
-      case "ArrowUp":
-        e.preventDefault()
-        setActiveIndex((prev) => Math.max(prev - 1, -1))
-        break
-      case "Enter":
-        e.preventDefault()
-        if (activeIndex >= 0 && activeIndex < results.length) {
-          selectResult(results[activeIndex])
-        }
-        break
-      case "Escape":
-        e.preventDefault()
-        setOpen(false)
-        setActiveIndex(-1)
-        break
-    }
-  }
-
-  const handleFocus = () => {
-    setActiveDirectionsField(fieldId)  // For styling only, not map clicks
-    if (results.length > 0) setOpen(true)
-    onFocus?.()
-  }
-
-  const handlePickFromMap = () => {
-    setPickingRouteField(fieldId)
-    toast("Click map to set location", { icon: "🎯", duration: 3000 })
-    inputRef.current?.blur()  // Unfocus input so user focuses on map
-  }
-
-  const isPicking = pickingRouteField === fieldId
-
-  const handleBlur = () => {
-    // Delay to allow click on dropdown
-    setTimeout(() => setOpen(false), 150)
-  }
-
-  const isActive = activeDirectionsField === fieldId
-
-  const iconColor = icon === "origin" ? "#22c55e" : icon === "destination" ? "#ef4444" : "var(--text-tertiary)"
-
-  return (
-    <div className="relative">
-      <div
-        className="flex items-center gap-2 px-3 py-2 rounded-lg transition-all"
-        style={{
-          background: "var(--bg-overlay)",
-          border: isActive ? "1px solid var(--accent)" : "1px solid var(--border)",
-        }}
-      >
-        {icon === "origin" ? (
-          <Navigation2 size={16} style={{ color: iconColor, transform: "rotate(45deg)" }} />
-        ) : (
-          <MapPin size={16} style={{ color: iconColor }} />
-        )}
-        <input
-          ref={inputRef}
-          type="text"
-          value={query}
-          onChange={handleChange}
-          onKeyDown={handleKeyDown}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          placeholder={placeholder}
-          autoFocus={autoFocus}
-          className="flex-1 bg-transparent text-sm outline-none"
-          style={{ color: "var(--text-primary)" }}
-        />
-        {/* Pick from map button */}
-        <button
-          onClick={handlePickFromMap}
-          className="p-1 rounded hover:bg-[var(--bg-overlay)] transition-colors"
-          style={{ color: isPicking ? "var(--accent)" : "var(--text-tertiary)" }}
-          title="Pick location from map"
-        >
-          <Target size={14} />
-        </button>
-        {loading ? (
-          <div
-            className="w-4 h-4 border-2 border-t-transparent rounded-full animate-spin"
-            style={{ borderColor: "var(--accent)", borderTopColor: "transparent" }}
-          />
-        ) : query ? (
-          <button onClick={handleClear} className="p-0.5" style={{ color: "var(--text-tertiary)" }}>
-            <X size={14} />
-          </button>
-        ) : null}
-      </div>
-
-      {open && results.length > 0 && (
-        <ul
-          className="absolute z-50 mt-1 w-full rounded-lg overflow-hidden max-h-48 overflow-y-auto"
-          style={{
-            background: "var(--bg-overlay)",
-            border: "1px solid var(--border)",
-            boxShadow: "var(--shadow-lg)",
-          }}
-        >
-          {results.map((r, i) => {
-            const isPoi = r.type === "poi" && r.raw?.name
-            const isContact = r._isContact
-            const primary = isContact ? r.name : isPoi ? r.raw.name : r.name
-            const secondary = isContact ? (r.address || "") : isPoi ? buildAddress(r) : null
-            return (
-              <li
-                key={`${r.lat}-${r.lon}-${i}`}
-                className="px-3 py-2 cursor-pointer text-sm"
-                style={{
-                  background: i === activeIndex ? "var(--accent-muted)" : "transparent",
-                  borderBottom: i < results.length - 1 ? "1px solid var(--border-subtle)" : "none",
-                }}
-                onClick={() => selectResult(r)}
-                onMouseEnter={() => setActiveIndex(i)}
-              >
-                <div className="flex items-center gap-2">
-                  <span style={{ color: isContact ? "var(--accent)" : "var(--text-tertiary)" }}>
-                    <CategoryIcon result={r} />
-                  </span>
-                  <span className="truncate flex-1" style={{ color: "var(--text-primary)" }}>
-                    {primary}
-                  </span>
-                </div>
-                {secondary && (
-                  <div className="text-[11px] mt-0.5 ml-6 truncate" style={{ color: "var(--text-tertiary)" }}>
-                    {secondary}
-                  </div>
-                )}
-              </li>
-            )
-          })}
-        </ul>
-      )}
-    </div>
-  )
-}

src/components/ManeuverList.jsx

@@ -1,87 +1,23 @@
 import {
   MoveRight, MoveUpRight, MoveDownRight, CornerUpRight, CornerUpLeft,
   MoveLeft, MoveUpLeft, MoveDownLeft, CircleDot, RotateCw,
-  GitMerge, CornerRightDown, CornerRightUp, Navigation, Mountain, Map, AlertTriangle,
+  GitMerge, CornerRightDown, CornerRightUp, Navigation
-  Compass, ArrowUp, ArrowUpRight, ArrowRight, ArrowDownRight, ArrowDown,
-  ArrowDownLeft, ArrowLeft, ArrowUpLeft, MapPin
 } from 'lucide-react'
 import { useStore } from '../store'
 
-/**
+function formatTime(seconds) {
- * Format distance with commas for feet, one decimal for miles.
+  if (seconds < 60) return `${Math.round(seconds)}s`
- * Under 1 mile: "2,640 ft"
+  if (seconds < 3600) return `${Math.round(seconds / 60)} min`
- * 1+ miles: "1.3 mi"
+  const h = Math.floor(seconds / 3600)
- */
+  const m = Math.round((seconds % 3600) / 60)
-function formatDistance(distanceM, distanceKm) {
+  return m > 0 ? `${h}h ${m}m` : `${h}h`
-  let meters = null
-  if (distanceM !== undefined && distanceM !== null) {
-    meters = distanceM
-  } else if (distanceKm !== undefined && distanceKm !== null) {
-    meters = distanceKm * 1000
 }
 
-  if (meters === null) return ''
+function formatDist(miles) {
-
+  if (miles < 0.1) return `${Math.round(miles * 5280)} ft`
-  const miles = meters / 1609.34
+  return `${miles.toFixed(1)} mi`
-  if (miles < 1) {
-    const feet = Math.round(meters * 3.28084)
-    return feet.toLocaleString() + ' ft'
-  }
-  return miles.toFixed(1) + ' mi'
 }
 
-function formatTimeMin(minutes) {
-  if (minutes < 60) return Math.round(minutes) + ' min'
-  const h = Math.floor(minutes / 60)
-  const m = Math.round(minutes % 60)
-  return m > 0 ? h + 'h ' + m + 'm' : h + 'h'
-}
-
-// Compass arrow icon based on cardinal direction with rotation
-function CompassIcon({ cardinal, bearing, size = 16 }) {
-  // Use bearing to rotate arrow, or fall back to cardinal-based icon
-  if (bearing !== undefined && bearing !== null) {
-    return (
-      <ArrowUp
-        size={size}
-        strokeWidth={2}
-        style={{ transform: `rotate(${bearing}deg)` }}
-      />
-    )
-  }
-
-  const props = { size, strokeWidth: 2 }
-  const arrowMap = {
-    'N': ArrowUp,
-    'NNE': ArrowUpRight,
-    'NE': ArrowUpRight,
-    'ENE': ArrowRight,
-    'E': ArrowRight,
-    'ESE': ArrowRight,
-    'SE': ArrowDownRight,
-    'SSE': ArrowDownRight,
-    'S': ArrowDown,
-    'SSW': ArrowDownLeft,
-    'SW': ArrowDownLeft,
-    'WSW': ArrowLeft,
-    'W': ArrowLeft,
-    'WNW': ArrowLeft,
-    'NW': ArrowUpLeft,
-    'NNW': ArrowUpLeft,
-  }
-  const Icon = arrowMap[cardinal] || Compass
-  return <Icon {...props} />
-}
-
-// Wilderness maneuver icon
-function WildernessIcon({ type, cardinal, bearing, size = 16 }) {
-  if (type === 'arrival') {
-    return <MapPin size={size} strokeWidth={1.5} />
-  }
-  return <CompassIcon cardinal={cardinal} bearing={bearing} size={size} />
-}
-
-// Network maneuver icon (Valhalla types)
 function ManeuverIcon({ type }) {
   const size = 16
   const props = { size, strokeWidth: 1.5 }
@@ -104,55 +40,10 @@ function ManeuverIcon({ type }) {
   }
 }
 
-/**
+export default function ManeuverList({ onManeuverClick }) {
- * Add transport mode prefix to network maneuver instruction.
+  const route = useStore((s) => s.route)
- * "Drive east on..." for auto, "Walk south on..." for foot, "Ride north on..." for mtb
- */
-function formatNetworkInstruction(instruction, mode) {
-  if (!instruction) return ''
-
-  // Get verb based on mode
-  const modeVerbs = {
-    'auto': 'Drive',
-    'foot': 'Walk',
-    'pedestrian': 'Walk',
-    'mtb': 'Ride',
-    'bicycle': 'Ride',
-    'atv': 'Drive',
-    'vehicle': 'Drive',
-  }
-  const verb = modeVerbs[mode] || 'Go'
-
-  // Check if instruction starts with a direction verb we should replace
-  const startsWithVerbs = [
-    'Turn left', 'Turn right', 'Bear left', 'Bear right',
-    'Keep left', 'Keep right', 'Continue', 'Head', 'Go',
-    'Proceed', 'Make a', 'Take a', 'Start', 'Merge', 'Exit'
-  ]
-
-  for (const v of startsWithVerbs) {
-    if (instruction.startsWith(v)) {
-      // Already has a verb, return as-is (Valhalla instructions are already good)
-      return instruction
-    }
-  }
-
-  // If instruction starts with direction (north, south, etc.), prepend verb
-  const directions = ['north', 'south', 'east', 'west', 'onto', 'on ']
-  for (const dir of directions) {
-    if (instruction.toLowerCase().startsWith(dir)) {
-      return `${verb} ${instruction}`
-    }
-  }
-
-  return instruction
-}
-
-export default function ManeuverList() {
-  const routeResult = useStore((s) => s.routeResult)
   const routeLoading = useStore((s) => s.routeLoading)
   const routeError = useStore((s) => s.routeError)
-  const routeMode = useStore((s) => s.routeMode)
 
   if (routeLoading) {
     return (
@@ -183,161 +74,67 @@ export default function ManeuverList() {
     )
   }
 
-  if (!routeResult?.summary) return null
+  if (!route || !route.legs) return null
 
-  const summary = routeResult.summary
+  const totalTime = route.summary?.time || 0
-  const features = routeResult.route?.features || []
+  const totalDist = route.summary?.length || 0
-  const networkMode = summary.network_mode || routeMode || 'foot'
 
-  // Extract maneuvers from each segment type
+  const allManeuvers = []
-  const wildernessStartFeature = features.find(f =>
+  let timeRemaining = totalTime
-    f.properties?.segment_type === 'wilderness' && f.properties?.segment_position === 'start'
-  )
-  const networkFeature = features.find(f => f.properties?.segment_type === 'network')
-  const wildernessEndFeature = features.find(f =>
-    f.properties?.segment_type === 'wilderness' && f.properties?.segment_position === 'end'
-  )
 
-  const wildernessStartManeuvers = wildernessStartFeature?.properties?.maneuvers || []
+  for (let legIdx = 0; legIdx < route.legs.length; legIdx++) {
-  const networkManeuvers = networkFeature?.properties?.maneuvers || []
+    const leg = route.legs[legIdx]
-  const wildernessEndManeuvers = wildernessEndFeature?.properties?.maneuvers || []
+    for (const man of leg.maneuvers || []) {
-
+      allManeuvers.push({ ...man, _legIndex: legIdx, timeRemaining })
-  const hasManeuvers = wildernessStartManeuvers.length > 0 ||
+      timeRemaining -= man.time || 0
-                       networkManeuvers.length > 0 ||
+    }
-                       wildernessEndManeuvers.length > 0
+  }
 
   return (
     <div className="flex flex-col">
-      {/* Total summary */}
+      {/* Route summary */}
       <div
         className="flex items-center justify-between px-3 py-2 rounded mb-2"
         style={{ background: 'var(--bg-overlay)', border: '1px solid var(--border-subtle)' }}
       >
         <span className="font-mono text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
-          {formatDistance(null, summary.total_distance_km)}
+          {formatDist(totalDist)}
         </span>
         <span className="font-mono text-sm" style={{ color: 'var(--text-secondary)' }}>
-          {formatTimeMin(summary.total_effort_minutes)}
+          {formatTime(totalTime)}
         </span>
       </div>
 
-      {/* Segment breakdown */}
+      {/* Maneuver steps */}
-      <div className="flex flex-col gap-1 px-2 mb-2">
+      <div className="flex flex-col max-h-[50vh] overflow-y-auto">
-        {summary.wilderness_distance_km > 0 && (
+        {allManeuvers.map((man, i) => (
-          <div className="flex items-center gap-2 text-sm">
+          <button
-            <Mountain size={14} style={{ color: '#f97316' }} />
+            key={i}
-            <span style={{ color: 'var(--text-secondary)' }}>Wilderness</span>
+            onClick={() => {
-            <span className="ml-auto font-mono text-xs" style={{ color: 'var(--text-tertiary)' }}>
+              if (man.begin_shape_index != null && onManeuverClick) onManeuverClick(man)
-              {formatDistance(null, summary.wilderness_distance_km)} / {formatTimeMin(summary.wilderness_effort_minutes)}
+            }}
-            </span>
+            className="flex items-start gap-2 px-2 py-2 text-left rounded transition-colors duration-75"
-          </div>
+            style={{ '--hover-bg': 'var(--bg-overlay)' }}
-        )}
+            onMouseEnter={(e) => e.currentTarget.style.background = 'var(--bg-overlay)'}
-        {summary.network_distance_km > 0 && (
+            onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
-          <div className="flex items-center gap-2 text-sm">
+          >
-            <Map size={14} style={{ color: '#3b82f6' }} />
-            <span style={{ color: 'var(--text-secondary)' }}>Road/Trail</span>
-            <span className="ml-auto font-mono text-xs" style={{ color: 'var(--text-tertiary)' }}>
-              {formatDistance(null, summary.network_distance_km)} / {formatTimeMin(summary.network_duration_minutes)}
-            </span>
-          </div>
-        )}
-      </div>
-
-      {/* Warnings */}
-      {(summary.barrier_crossings > 0 || summary.mvum_closed_crossings > 0) && (
-        <div className="px-2 mb-2 flex flex-col gap-1">
-          {summary.barrier_crossings > 0 && (
-            <div className="flex items-center gap-1 text-xs" style={{ color: 'var(--status-warning)' }}>
-              <AlertTriangle size={12} />
-              <span>{summary.barrier_crossings} barrier crossing{summary.barrier_crossings > 1 ? 's' : ''}</span>
-            </div>
-          )}
-          {summary.mvum_closed_crossings > 0 && (
-            <div className="flex items-center gap-1 text-xs" style={{ color: 'var(--status-warning)' }}>
-              <AlertTriangle size={12} />
-              <span>{summary.mvum_closed_crossings} MVUM closure{summary.mvum_closed_crossings > 1 ? 's' : ''}</span>
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* Turn-by-turn directions */}
-      {hasManeuvers && (
-        <div className="flex flex-col max-h-[40vh] overflow-y-auto">
-          <div className="text-xs px-2 mb-1" style={{ color: 'var(--text-tertiary)' }}>Directions</div>
-
-          {/* Wilderness start maneuvers */}
-          {wildernessStartManeuvers.length > 0 && (
-            <>
-              <div className="text-[10px] uppercase tracking-wide px-2 py-1 font-medium"
-                   style={{ color: '#f97316', background: 'rgba(249,115,22,0.1)' }}>
-                Wilderness — On Foot
-              </div>
-              {wildernessStartManeuvers.map((man, i) => (
-                <div key={`ws-${i}`} className="flex items-start gap-2 px-2 py-2 text-left">
-                  <span className="w-5 shrink-0 mt-0.5" style={{ color: '#f97316' }}>
-                    <WildernessIcon type={man.type} cardinal={man.cardinal} bearing={man.bearing} />
-                  </span>
-                  <div className="flex-1 min-w-0">
-                    <p className="text-sm leading-tight" style={{ color: 'var(--text-primary)' }}>
-                      {man.instruction}
-                    </p>
-                  </div>
-                </div>
-              ))}
-            </>
-          )}
-
-          {/* Network maneuvers */}
-          {networkManeuvers.length > 0 && (
-            <>
-              {wildernessStartManeuvers.length > 0 && (
-                <div className="text-[10px] uppercase tracking-wide px-2 py-1 font-medium"
-                     style={{ color: '#3b82f6', background: 'rgba(59,130,246,0.1)' }}>
-                  Road/Trail
-                </div>
-              )}
-              {networkManeuvers.map((man, i) => (
-                <div key={`net-${i}`} className="flex items-start gap-2 px-2 py-2 text-left">
             <span className="w-5 shrink-0 mt-0.5" style={{ color: 'var(--accent)' }}>
               <ManeuverIcon type={man.type} />
             </span>
             <div className="flex-1 min-w-0">
               <p className="text-sm leading-tight" style={{ color: 'var(--text-primary)' }}>
-                      {formatNetworkInstruction(man.instruction, networkMode)}
+                {man.instruction || man.verbal_pre_transition_instruction || 'Continue'}
               </p>
               <p className="font-mono text-[11px] mt-0.5" style={{ color: 'var(--text-tertiary)' }}>
-                      {formatDistance(null, man.distance_km)}
+                {formatDist(man.length || 0)}
+                {man.timeRemaining > 0 && (
+                  <span className="ml-2">{formatTime(man.timeRemaining)} left</span>
+                )}
               </p>
             </div>
-                </div>
+          </button>
         ))}
-            </>
-          )}
-
-          {/* Wilderness end maneuvers */}
-          {wildernessEndManeuvers.length > 0 && (
-            <>
-              <div className="text-[10px] uppercase tracking-wide px-2 py-1 font-medium"
-                   style={{ color: '#f97316', background: 'rgba(249,115,22,0.1)' }}>
-                Wilderness — On Foot
       </div>
-              {wildernessEndManeuvers.map((man, i) => (
-                <div key={`we-${i}`} className="flex items-start gap-2 px-2 py-2 text-left">
-                  <span className="w-5 shrink-0 mt-0.5" style={{ color: '#f97316' }}>
-                    <WildernessIcon type={man.type} cardinal={man.cardinal} bearing={man.bearing} />
-                  </span>
-                  <div className="flex-1 min-w-0">
-                    <p className="text-sm leading-tight" style={{ color: 'var(--text-primary)' }}>
-                      {man.instruction}
-                    </p>
-                  </div>
-                </div>
-              ))}
-            </>
-          )}
-        </div>
-      )}
     </div>
   )
 }

src/components/Panel.jsx

@@ -1,62 +1,53 @@
 import { useRef, useCallback, useEffect, useState } from 'react'
-import { LogIn, LogOut, Footprints, Bike, Car, Shield, AlertTriangle, Zap, X, MapPin, Target } from 'lucide-react'
+import { LogIn, LogOut } from 'lucide-react'
 import ThemePicker from './ThemePicker'
 import { useStore, usePanelState } from '../store'
 import { hasFeature } from '../config'
-import { useConfig } from '../hooks/useConfig'
 import SearchBar from './SearchBar'
+import StopList from './StopList'
+import ModeSelector from './ModeSelector'
 import ManeuverList from './ManeuverList'
 import ContactList from './ContactList'
 import { PlaceCard } from './PlaceCard'
-import DirectionsPanel from './DirectionsPanel'
+import { requestOptimizedRoute } from '../api'
-import PlaceDetail from './PlaceDetail'
 
-const TRAVEL_MODES = [
+export default function Panel({ onManeuverClick }) {
-  { id: 'auto', label: 'Drive', Icon: Car },
-  { id: 'foot', label: 'Foot', Icon: Footprints },
-  { id: 'mtb', label: 'MTB', Icon: Bike },
-  { id: 'atv', label: 'ATV', Icon: Car },
-  { id: 'vehicle', label: '4x4', Icon: Car },
-]
-
-const BOUNDARY_MODES = [
-  { id: 'strict', label: 'Strict', Icon: Shield, title: 'Avoid barriers' },
-  { id: 'pragmatic', label: 'Cross', Icon: AlertTriangle, title: 'Cross with penalty' },
-  { id: 'emergency', label: 'Ignore', Icon: Zap, title: 'Ignore barriers' },
-]
-
-export default function Panel({ onClearRoute }) {
   const selectedPlace = useStore((s) => s.selectedPlace)
+  const pendingDestination = useStore((s) => s.pendingDestination)
   const clearSelectedPlace = useStore((s) => s.clearSelectedPlace)
-  const routeStart = useStore((s) => s.routeStart)
+  const clearPendingDestination = useStore((s) => s.clearPendingDestination)
-  const routeEnd = useStore((s) => s.routeEnd)
+  const stops = useStore((s) => s.stops)
-  const routeMode = useStore((s) => s.routeMode)
+  const mode = useStore((s) => s.mode)
-  const boundaryMode = useStore((s) => s.boundaryMode)
+  const route = useStore((s) => s.route)
-  const routeResult = useStore((s) => s.routeResult)
   const routeLoading = useStore((s) => s.routeLoading)
-  const setRouteMode = useStore((s) => s.setRouteMode)
+  const routeError = useStore((s) => s.routeError)
-  const setBoundaryMode = useStore((s) => s.setBoundaryMode)
+  const setStops = useStore((s) => s.setStops)
-  const pickingRouteField = useStore((s) => s.pickingRouteField)
+  const setRoute = useStore((s) => s.setRoute)
-  const setPickingRouteField = useStore((s) => s.setPickingRouteField)
+  const setRouteError = useStore((s) => s.setRouteError)
-  const clearRoute = useStore((s) => s.clearRoute)
+  const setRouteLoading = useStore((s) => s.setRouteLoading)
   const sheetState = useStore((s) => s.sheetState)
   const setSheetState = useStore((s) => s.setSheetState)
+  const theme = useStore((s) => s.theme)
+  const themeOverride = useStore((s) => s.themeOverride)
+  const setThemeOverride = useStore((s) => s.setThemeOverride)
+  const gpsOrigin = useStore((s) => s.gpsOrigin)
+  const geoPermission = useStore((s) => s.geoPermission)
   const activeTab = useStore((s) => s.activeTab)
   const auth = useStore((s) => s.auth)
   const setActiveTab = useStore((s) => s.setActiveTab)
-  const directionsMode = useStore((s) => s.directionsMode)
-  const setDirectionsMode = useStore((s) => s.setDirectionsMode)
 
   const panelState = usePanelState()
 
   const [isMobile, setIsMobile] = useState(false)
+  const [optimizing, setOptimizing] = useState(false)
   const sheetRef = useRef(null)
   const dragStartY = useRef(0)
   const dragStartState = useRef('half')
 
+  // Show contacts tab only if feature enabled AND user is authenticated
   const showContacts = hasFeature('has_contacts') && auth.authenticated
-  const cfg = useConfig()
 
+  // Responsive detection
   useEffect(() => {
     const check = () => setIsMobile(window.innerWidth < 768)
     check()
@@ -64,13 +55,61 @@ export default function Panel({ onClearRoute }) {
     return () => window.removeEventListener('resize', check)
   }, [])
 
-  // Auth URLs come from /api/config (config.auth.*); the literals are the
+  // Auth handlers
-  // current home-profile values, kept as fallback for an older backend that
+  const handleLogin = () => { window.location.href = '/outpost.goauthentik.io/start?rd=%2F' }
-  // doesn't yet serve `auth`, or when FALLBACK_CONFIG is in use (offline).
+  const handleLogout = () => { window.location.href = 'https://auth.echo6.co/if/flow/default-invalidation-flow/?next=https://navi.echo6.co/' }
-  // TODO(navi): add tests when test infra lands — see extraction #2 PR-C
-  const handleLogin = () => { window.location.href = cfg?.auth?.login_url ?? '/outpost.goauthentik.io/start?rd=%2F' }
-  const handleLogout = () => { window.location.href = cfg?.auth?.logout_url ?? 'https://auth.echo6.co/if/flow/default-invalidation-flow/?next=https://navi.echo6.co/' }
 
+  // Optimize stops
+  const hasGpsOrigin = gpsOrigin && geoPermission === 'granted'
+  const effectiveCount = stops.length + (hasGpsOrigin ? 1 : 0)
+
+  const handleOptimize = useCallback(async () => {
+    if (effectiveCount < 3 || optimizing) return
+    setOptimizing(true)
+    try {
+      const { userLocation } = useStore.getState()
+      let locations = stops.map((s) => ({ lat: s.lat, lon: s.lon }))
+      if (hasGpsOrigin && userLocation) {
+        locations = [{ lat: userLocation.lat, lon: userLocation.lon }, ...locations]
+      }
+      const data = await requestOptimizedRoute(locations, mode)
+      if (data.trip) {
+        const wpOrder = hasGpsOrigin && userLocation
+          ? (data.trip.locations || []).slice(1)
+          : data.trip.locations
+        if (wpOrder && wpOrder.length === stops.length) {
+          const reordered = wpOrder.map((wp) => {
+            let closest = stops[0]
+            let minDist = Infinity
+            for (const s of stops) {
+              const d = Math.abs(s.lat - wp.lat) + Math.abs(s.lon - wp.lon)
+              if (d < minDist) {
+                minDist = d
+                closest = s
+              }
+            }
+            return closest
+          })
+          const seen = new Set()
+          const unique = reordered.filter((s) => {
+            if (seen.has(s.id)) return false
+            seen.add(s.id)
+            return true
+          })
+          if (unique.length === stops.length) {
+            setStops(unique)
+          }
+        }
+        setRoute(data.trip)
+      }
+    } catch (e) {
+      setRouteError(e.message)
+    } finally {
+      setOptimizing(false)
+    }
+  }, [stops, mode, optimizing, effectiveCount, hasGpsOrigin, setStops, setRoute, setRouteError])
+
+  // Mobile sheet drag handling
   const handleTouchStart = useCallback((e) => {
     dragStartY.current = e.touches[0].clientY
     dragStartState.current = sheetState
@@ -88,30 +127,21 @@ export default function Panel({ onClearRoute }) {
     }
   }, [setSheetState])
 
-  const handleClearRoute = () => {
+  const showOptimize = effectiveCount >= 3
-    clearRoute()
-    onClearRoute?.()
-  }
 
+  // Determine what to show based on panel state
   const showPreviewCard = panelState.startsWith('PREVIEW')
-  const hasRoutePoints = routeStart || routeEnd
+  const showRouteSection = ['ROUTING', 'ROUTE_CALCULATED', 'PREVIEW_ROUTING', 'PREVIEW_CALCULATED'].includes(panelState) || !!pendingDestination
-  const showRouteSection = hasRoutePoints || routeResult || routeLoading
+  const showManeuvers = panelState === 'ROUTE_CALCULATED' || panelState === 'PREVIEW_CALCULATED'
-  const showEmptyState = panelState === 'IDLE' && !hasRoutePoints
+  const showEmptyState = panelState === 'IDLE' && !pendingDestination
 
-  // Show side panel place card when building route (either mode) and place is selected
+  // Routes tab content - now state-driven
-  const showSidePlaceCard = (directionsMode || showRouteSection) && selectedPlace
+  const routesContent = (
-
-  const routesContent = directionsMode ? (
-    // Directions mode: just the directions panel, place card is shown in side panel
-    <DirectionsPanel onClose={() => {
-      setDirectionsMode(false)
-      onClearRoute?.()
-    }} />
-  ) : (
     <>
       <SearchBar />
 
-      {showPreviewCard && selectedPlace && !showRouteSection && (
+      {/* Preview card when place is selected */}
+      {showPreviewCard && selectedPlace && (
         <div className="mt-3">
           <PlaceCard
             place={selectedPlace}
@@ -122,100 +152,44 @@ export default function Panel({ onClearRoute }) {
         </div>
       )}
 
+      {/* Route section with stops */}
       {showRouteSection && (
+        <>
           <div className="mt-3">
-          <div className="flex items-center justify-between mb-2">
+            <StopList />
-            <span className="text-xs font-medium" style={{ color: 'var(--text-secondary)' }}>
-              Route
-            </span>
-            <button
-              onClick={handleClearRoute}
-              className="p-1 rounded hover:bg-[var(--bg-overlay)]"
-              title="Clear route"
-            >
-              <X size={14} style={{ color: 'var(--text-tertiary)' }} />
-            </button>
           </div>
 
-          <div className="flex flex-col gap-1 mb-3 text-xs">
+          <div className="mt-3 flex flex-col gap-2">
-            <div className="flex items-center gap-2">
+            <ModeSelector />
-              <MapPin size={12} style={{ color: '#22c55e' }} />
+            {showOptimize && (
-              <span className="flex-1" style={{ color: routeStart ? 'var(--text-primary)' : 'var(--text-tertiary)' }}>
-                {routeStart?.name || 'Click pin to pick start'}
-              </span>
               <button
-                onClick={() => setPickingRouteField('origin')}
+                onClick={handleOptimize}
-                className="p-1 rounded hover:bg-[var(--bg-overlay)] transition-colors"
+                disabled={optimizing || routeLoading}
-                style={{ color: pickingRouteField === 'origin' ? 'var(--accent)' : 'var(--text-tertiary)' }}
+                className="navi-btn-secondary w-full"
-                title="Pick start from map"
               >
-                <Target size={14} />
+                {optimizing ? 'Optimizing...' : 'Optimize stop order'}
               </button>
-            </div>
+            )}
-            <div className="flex items-center gap-2">
+            {pendingDestination && stops.length === 0 && (
-              <MapPin size={12} style={{ color: '#ef4444' }} />
-              <span className="flex-1" style={{ color: routeEnd ? 'var(--text-primary)' : 'var(--text-tertiary)' }}>
-                {routeEnd?.name || 'Click pin to pick destination'}
-              </span>
               <button
-                onClick={() => setPickingRouteField('destination')}
+                onClick={clearPendingDestination}
-                className="p-1 rounded hover:bg-[var(--bg-overlay)] transition-colors"
+                className="navi-btn-secondary w-full"
-                style={{ color: pickingRouteField === 'destination' ? 'var(--accent)' : 'var(--text-tertiary)' }}
-                title="Pick destination from map"
               >
-                <Target size={14} />
+                Cancel
               </button>
+            )}
           </div>
-          </div>
+        </>
+      )}
 
-          <div className="flex gap-1 mb-2">
+      {/* Maneuvers when route is calculated */}
-            {TRAVEL_MODES.map((m) => {
+      {showManeuvers && (route || routeLoading || routeError) && (
-              const active = routeMode === m.id
+        <div className="mt-3">
-              return (
+          <ManeuverList onManeuverClick={onManeuverClick} />
-                <button
-                  key={m.id}
-                  onClick={() => setRouteMode(m.id)}
-                  className="flex-1 flex items-center justify-center gap-1 py-1.5 text-xs rounded transition-colors"
-                  style={{
-                    background: active ? 'var(--accent-muted)' : 'var(--bg-overlay)',
-                    color: active ? 'var(--accent)' : 'var(--text-tertiary)',
-                  }}
-                  title={m.label}
-                >
-                  <m.Icon size={14} />
-                  <span className="hidden sm:inline">{m.label}</span>
-                </button>
-              )
-            })}
-          </div>
-
-          {routeMode !== 'auto' && (
-            <div className="flex gap-1 mb-3">
-              {BOUNDARY_MODES.map((m) => {
-                const active = boundaryMode === m.id
-                return (
-                  <button
-                    key={m.id}
-                    onClick={() => setBoundaryMode(m.id)}
-                    className="flex-1 flex items-center justify-center gap-1 py-1.5 text-xs rounded transition-colors"
-                    style={{
-                      background: active ? 'var(--accent-muted)' : 'var(--bg-overlay)',
-                      color: active ? 'var(--accent)' : 'var(--text-tertiary)',
-                    }}
-                    title={m.title}
-                  >
-                    <m.Icon size={14} />
-                    <span className="hidden sm:inline">{m.label}</span>
-                  </button>
-                )
-              })}
-            </div>
-          )}
-
-          <ManeuverList />
         </div>
       )}
 
+      {/* Empty state */}
       {showEmptyState && (
         <div className="mt-6 text-center text-xs" style={{ color: 'var(--text-tertiary)' }}>
           <p>Search or tap the map to explore</p>
@@ -229,13 +203,13 @@ export default function Panel({ onClearRoute }) {
       {showContacts && (
         <div className="navi-tab-bar mb-3">
           <button
-            className={"navi-tab " + (activeTab === 'routes' ? 'navi-tab-active' : '')}
+            className={`navi-tab ${activeTab === 'routes' ? 'navi-tab-active' : ''}`}
             onClick={() => setActiveTab('routes')}
           >
             Routes
           </button>
           <button
-            className={"navi-tab " + (activeTab === 'contacts' ? 'navi-tab-active' : '')}
+            className={`navi-tab ${activeTab === 'contacts' ? 'navi-tab-active' : ''}`}
             onClick={() => setActiveTab('contacts')}
           >
             Contacts
@@ -257,7 +231,7 @@ export default function Panel({ onClearRoute }) {
               onClick={handleLogout}
               className="flex items-center gap-1 px-2 py-1 rounded text-xs"
               style={{ color: 'var(--text-tertiary)' }}
-              title={"Logged in as " + auth.username + ". Click to log out."}
+              title={`Logged in as ${auth.username}. Click to log out.`}
             >
               <span className="hidden sm:inline">{auth.username}</span>
               <LogOut size={14} />
@@ -279,72 +253,9 @@ export default function Panel({ onClearRoute }) {
     </div>
   )
 
-  // Side panel for place card during directions mode (desktop only)
+  // Desktop: side panel (now 360px to accommodate PlaceCard)
-  const sidePlaceCardPanel = showSidePlaceCard && !isMobile && (
-    <div
-      className="absolute top-0 z-10 h-full overflow-y-auto p-4 flex flex-col"
-      style={{
-        left: '400px',
-        width: '300px',
-        background: 'var(--bg-raised)',
-        borderRight: '1px solid var(--border)',
-        boxShadow: 'inset 4px 0 8px -4px rgba(0,0,0,0.15)',
-      }}
-    >
-      <div className="flex items-center justify-between mb-3">
-        <span className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
-          {selectedPlace?.name || 'Place Info'}
-        </span>
-        <button
-          onClick={clearSelectedPlace}
-          className="p-1.5 rounded-lg hover:bg-[var(--bg-overlay)] transition-colors"
-          title="Close"
-        >
-          <X size={16} style={{ color: 'var(--text-tertiary)' }} />
-        </button>
-      </div>
-      {/* Use PlaceCard in compact preview mode */}
-      <PlaceCard
-        place={selectedPlace}
-        variant="preview"
-        expanded={true}
-        onClose={clearSelectedPlace}
-      />
-    </div>
-  )
-
-  // Mobile overlay for place card during directions mode
-  const mobilePlaceCardOverlay = showSidePlaceCard && isMobile && (
-    <div
-      className="absolute inset-0 z-20 flex flex-col rounded-t-2xl"
-      style={{ background: 'var(--bg-raised)' }}
-    >
-      <div className="flex items-center justify-between p-4 border-b" style={{ borderColor: 'var(--border)' }}>
-        <span className="text-sm font-medium truncate pr-2" style={{ color: 'var(--text-primary)' }}>
-          {selectedPlace?.name || 'Place Info'}
-        </span>
-        <button
-          onClick={clearSelectedPlace}
-          className="p-1.5 rounded-lg hover:bg-[var(--bg-overlay)] transition-colors shrink-0"
-          title="Close"
-        >
-          <X size={16} style={{ color: 'var(--text-tertiary)' }} />
-        </button>
-      </div>
-      <div className="flex-1 overflow-y-auto p-4">
-        <PlaceCard
-          place={selectedPlace}
-          variant="preview"
-          expanded={true}
-          onClose={clearSelectedPlace}
-        />
-      </div>
-    </div>
-  )
-
   if (!isMobile) {
     return (
-      <>
       <div
         className="absolute top-0 left-0 z-10 h-full overflow-y-auto p-4 flex flex-col"
         style={{
@@ -356,11 +267,10 @@ export default function Panel({ onClearRoute }) {
         {header}
         {content}
       </div>
-        {sidePlaceCardPanel}
-      </>
     )
   }
 
+  // Mobile: bottom sheet
   const sheetHeights = {
     collapsed: 'h-12',
     half: 'h-[45vh]',
@@ -370,12 +280,13 @@ export default function Panel({ onClearRoute }) {
   return (
     <div
       ref={sheetRef}
-      className={"absolute bottom-0 left-0 right-0 z-10 rounded-t-2xl transition-all duration-200 " + sheetHeights[sheetState]}
+      className={`absolute bottom-0 left-0 right-0 z-10 rounded-t-2xl transition-all duration-200 ${sheetHeights[sheetState]}`}
       style={{
         background: 'var(--bg-raised)',
         borderTop: '1px solid var(--border)',
       }}
     >
+      {/* Drag handle */}
       <div
         className="flex justify-center py-2 cursor-grab"
         onTouchStart={handleTouchStart}
@@ -390,10 +301,9 @@ export default function Panel({ onClearRoute }) {
       </div>
 
       {sheetState !== 'collapsed' && (
-        <div className="px-4 pb-4 overflow-y-auto overflow-x-hidden h-[calc(100%-2rem)] relative" style={{ paddingBottom: 'max(1rem, env(safe-area-inset-bottom))' }}>
+        <div className="px-4 pb-4 overflow-y-auto overflow-x-hidden h-[calc(100%-2rem)]" style={{ paddingBottom: 'max(1rem, env(safe-area-inset-bottom))' }}>
           {header}
           {content}
-          {mobilePlaceCardOverlay}
         </div>
       )}
     </div>

src/components/PlaceCard.jsx

@@ -352,9 +352,6 @@ export function PlaceCard({ place, variant = "preview", expanded = true, onToggl
     if (placeLat == null || placeLon == null) return
     // Skip for dropped pins - they get reverse geocoded by MapView
     if (place?.source === 'map_click') return
-    // Don't reverse geocode if we already identified the entity from a label click
-    // The basemap label provides name, kind, wikidata - reverse geocode would return wrong entity
-    if (place?.source === 'basemap_label' && place?.raw?.kind) return
     
     const controller = new AbortController()
     fetchReverse(placeLat, placeLon).then((result) => {
@@ -408,16 +405,6 @@ export function PlaceCard({ place, variant = "preview", expanded = true, onToggl
           osm_relation_id: data.osm_relation_id,
           extratags: { ...(prev && prev !== "loading" ? prev.extratags : {}), ...data.extratags },
         }))
-        // Set osm_type/osm_id from osm_relation_id to trigger Effect 3 (wiki summary fetch)
-        if (data?.osm_relation_id) {
-          const current = useStore.getState().selectedPlace
-          if (current && current.lat === placeLat && current.lon === placeLon) {
-            useStore.getState().setSelectedPlace({ 
-              ...current, 
-              raw: { ...current.raw, osm_type: 'R', osm_id: data.osm_relation_id }
-            })
-          }
-        }
         if (data?.boundary) {
           const current = useStore.getState().selectedPlace
           if (current && current.lat === placeLat && current.lon === placeLon) {
@@ -476,7 +463,6 @@ export function PlaceCard({ place, variant = "preview", expanded = true, onToggl
   const savedContact = contacts.find((c) => c.lat === place.lat && c.lon === place.lon)
 
   const handleDirections = () => {
-    console.log('[TRACE-DIRECTIONS] PlaceCard handleDirections, place:', { lat: place?.lat, lon: place?.lon, name: place?.name })
     // No toast - empty origin slot is the visual prompt
     startDirections(place)
   }

src/components/SearchBar.jsx

@@ -6,30 +6,6 @@ import { buildAddress } from '../utils/place'
 import { searchGeocode } from '../api'
 import { hasFeature } from '../config'
 
-
-/** Parse coordinate input like "42.35, -114.30" or "42.35 -114.30" */
-function parseCoordinates(input) {
-  if (!input) return null
-  const trimmed = input.trim()
-  
-  // Pattern: lat, lon or lat lon (with optional comma)
-  // Supports: "42.35, -114.30", "42.35 -114.30", "42.35,-114.30"
-  const pattern = /^(-?\d+\.?\d*)\s*[,\s]\s*(-?\d+\.?\d*)$/
-  const match = trimmed.match(pattern)
-  
-  if (!match) return null
-  
-  const lat = parseFloat(match[1])
-  const lon = parseFloat(match[2])
-  
-  // Validate ranges
-  if (isNaN(lat) || isNaN(lon)) return null
-  if (lat < -90 || lat > 90) return null
-  if (lon < -180 || lon > 180) return null
-  
-  return { lat, lon }
-}
-
 /** Get category icon based on result type/source */
 function CategoryIcon({ result }) {
   const type = result.type || ''
@@ -95,25 +71,6 @@ const SearchBar = forwardRef(function SearchBar(_, ref) {
         return
       }
 
-      // Check for coordinate input first
-      const coords = parseCoordinates(q)
-      if (coords) {
-        const coordResult = {
-          lat: coords.lat,
-          lon: coords.lon,
-          name: coords.lat.toFixed(5) + ", " + coords.lon.toFixed(5),
-          address: "Coordinates",
-          type: "coordinates",
-          source: "coordinates",
-          match_code: null,
-          raw: {},
-        }
-        setResults([coordResult])
-        setAutocompleteOpen(true)
-        setSearchLoading(false)
-        return
-      }
-
       // Prepend matching contacts
       let contactResults = []
       if (hasFeature('has_contacts') && contacts.length > 0) {

src/components/ThemePicker.jsx

@@ -1,5 +1,5 @@
 import { useState, useRef, useEffect } from 'react'
-
+import { Palette } from 'lucide-react'
 import { themeList } from '../themes/registry'
 import { useStore } from '../store'
 
@@ -78,27 +78,18 @@ export default function ThemePicker() {
 
   return (
     <div style={{ position: 'relative' }}>
-      {/* Trigger button - shows current theme name */}
+      {/* Trigger button */}
       <button
         ref={triggerRef}
         onClick={() => setIsOpen(!isOpen)}
-        style={{
+        className="p-1.5 rounded flex items-center justify-center"
-          background: 'transparent',
+        style={{ color: 'var(--text-secondary)' }}
-          border: 'none',
-          padding: '4px 8px',
-          cursor: 'pointer',
-          fontSize: 'var(--text-sm)',
-          color: 'var(--text-secondary)',
-          transition: 'color 0.15s',
-        }}
-        onMouseEnter={(e) => e.currentTarget.style.color = 'var(--text-primary)'}
-        onMouseLeave={(e) => e.currentTarget.style.color = 'var(--text-secondary)'}
         aria-label="Select theme"
         title="Select theme"
         aria-expanded={isOpen}
         aria-haspopup="true"
       >
-        {currentTheme.name}
+        <Palette size={16} />
       </button>
 
       {/* Popover */}
@@ -122,9 +113,9 @@ export default function ThemePicker() {
         >
           <div
             style={{
-              display: 'grid',
+              display: 'flex',
-              gridTemplateColumns: 'repeat(4, 1fr)',
+              gap: '16px',
-              gap: '12px',
+              justifyContent: 'center',
             }}
           >
             {themes.map((t) => (
@@ -154,7 +145,7 @@ export default function ThemePicker() {
               >
                 <ThemeSwatch
                   colors={t.swatch}
-                  size={28}
+                  size={32}
                   active={t.id === theme}
                 />
                 <span

src/config.js

@@ -10,7 +10,7 @@ const FALLBACK_CONFIG = {
   profile: 'home',
   region_name: 'North America',
   tileset: {
-    url: '/tiles/planet/current.pmtiles',
+    url: '/tiles/na.pmtiles',
     bounds: [-168, 14, -52, 72],
     max_zoom: 15,
     attribution: 'Protomaps © OSM',
@@ -21,10 +21,6 @@ const FALLBACK_CONFIG = {
     address_book: '/api/address_book',
     valhalla: '/valhalla',
   },
-  auth: {
-    login_url: '/outpost.goauthentik.io/start?rd=%2F',
-    logout_url: 'https://auth.echo6.co/if/flow/default-invalidation-flow/?next=https://navi.echo6.co/',
-  },
   features: {
     has_nominatim_details: false,
     has_kiwix_wiki: false,
@@ -34,6 +30,8 @@ const FALLBACK_CONFIG = {
     has_landclass: false,
     has_public_lands_layer: false,
     has_contours: true,
+    has_contours_test: true,
+    has_contours_test_10ft: false,
     has_address_book_write: false,
     has_usfs_trails: false,
     has_blm_trails: false,

src/index.css

@@ -236,117 +236,46 @@ body {
   opacity: 1;
 }
 
-/* ═══ BOTTOM-RIGHT MAP CONTROLS ═══ */
-.map-controls-br {
-  position: absolute;
-  bottom: 80px;
-  right: 10px;
-  z-index: 10;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.map-control-btn {
-  width: 44px;
-  height: 44px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--bg-raised);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  color: var(--text-secondary);
-  cursor: pointer;
-  box-shadow: var(--shadow);
-  transition: color 0.15s, border-color 0.15s, background 0.15s;
-}
-
-.map-control-btn:hover {
-  color: var(--text-primary);
-  border-color: var(--accent);
-  background: var(--bg-overlay);
-}
-
-.map-control-btn:active {
-  background: var(--bg-muted);
-}
-
 /* ═══ LAYER CONTROL ═══ */
 .layer-control {
-  position: relative;
+  position: absolute;
+  bottom: 32px;
+  right: 10px;
+  z-index: 10;
 }
 
 .layer-control-btn {
-  width: 44px;
+  width: 36px;
-  height: 44px;
+  height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--bg-raised);
   border: 1px solid var(--border);
-  border-radius: 10px;
+  border-radius: 8px;
   color: var(--text-secondary);
   cursor: pointer;
   box-shadow: var(--shadow);
-  transition: color 0.15s, border-color 0.15s, background 0.15s;
+  transition: color 0.1s, border-color 0.1s;
 }
 
 .layer-control-btn:hover {
   color: var(--text-primary);
   border-color: var(--accent);
-  background: var(--bg-overlay);
-}
-
-.layer-control-btn:active {
-  background: var(--bg-muted);
 }
 
 .layer-control-popover {
   position: absolute;
-  bottom: 0;
+  bottom: 44px;
-  right: 52px;
+  right: 0;
-  min-width: 180px;
+  min-width: 160px;
   background: var(--bg-raised);
   border: 1px solid var(--border);
-  border-radius: 10px;
+  border-radius: 8px;
   padding: 8px 0;
   box-shadow: var(--shadow-lg);
 }
 
-.view-mode-control {
-  display: flex;
-  gap: 2px;
-  padding: 8px;
-  border-bottom: 1px solid var(--border-subtle);
-}
-
-.view-mode-btn {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2px;
-  padding: 6px 8px;
-  border: none;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--text-secondary);
-  font-size: var(--text-xs);
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.view-mode-btn:hover {
-  background: var(--bg-overlay);
-  color: var(--text-primary);
-}
-
-.view-mode-btn.active {
-  background: var(--accent);
-  color: var(--text-inverse);
-}
-
 .layer-control-header {
   padding: 4px 12px 6px;
   font-size: var(--text-xs);
@@ -438,28 +367,27 @@ body {
 
 /* ═══ LOCATE BUTTON ═══ */
 .locate-btn {
-  width: 44px;
+  position: absolute;
-  height: 44px;
+  bottom: 80px;
+  right: 10px;
+  z-index: 10;
+  width: 36px;
+  height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--bg-raised);
   border: 1px solid var(--border);
-  border-radius: 10px;
+  border-radius: 8px;
   color: var(--text-secondary);
   cursor: pointer;
   box-shadow: var(--shadow);
-  transition: color 0.15s, border-color 0.15s, background 0.15s;
+  transition: color 0.1s, border-color 0.1s;
 }
 
 .locate-btn:hover {
   color: var(--text-primary);
   border-color: var(--accent);
-  background: var(--bg-overlay);
-}
-
-.locate-btn:active {
-  background: var(--bg-muted);
 }
 
 /* ═══ STOP REMOVE BUTTON (touch-friendly) ═══ */
@@ -478,15 +406,16 @@ body {
     overflow-x: hidden;
   }
 
-  .map-controls-br {
+  .layer-control {
-    bottom: 70px;
+    bottom: auto;
-    right: 8px;
+    top: 120px;
+    right: 10px;
   }
 
-  .layer-control-popover {
+  .locate-btn {
-    right: 52px;
+    bottom: auto;
-    max-height: 60vh;
+    top: 166px;
-    overflow-y: auto;
+    right: 10px;
   }
 
   .stop-remove-btn {
@@ -572,14 +501,3 @@ body {
   line-height: 1.5;
   text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
 }
-
-/* ═══ MAPLIBRE CONTROL POSITIONING ═══ */
-.maplibregl-ctrl-bottom-right {
-  bottom: 24px;
-  right: 10px;
-}
-
-.maplibregl-ctrl-bottom-right .maplibregl-ctrl-scale {
-  margin-right: 0;
-  margin-bottom: 0;
-}

src/store.js

@@ -1,9 +1,8 @@
-import { create } from "zustand"
+import { create } from 'zustand'
-import { requestOffroute } from "./api"
 
 export const useStore = create((set, get) => ({
   // ── Search state ──
-  query: "",
+  query: '',
   results: [],
   searchLoading: false,
   abortController: null,
@@ -13,9 +12,30 @@ export const useStore = create((set, get) => ({
   setSearchLoading: (loading) => set({ searchLoading: loading }),
   setAbortController: (ctrl) => set({ abortController: ctrl }),
 
+  // ── Stop list ──
+  stops: [],
+  // Each stop: { id, lat, lon, name, source, matchCode, isOrigin }
+
+  addStop: (stop) => {
+    const { stops } = get()
+    if (stops.length >= 10) return false
+    set({ stops: [...stops, { ...stop, id: crypto.randomUUID() }] })
+    return true
+  },
+
+  removeStop: (id) => {
+    set({ stops: get().stops.filter((s) => s.id !== id) })
+  },
+
+  reorderStops: (newStops) => set({ stops: newStops }),
+
+  clearStops: () => set({ stops: [] }),
+
+  setStops: (stops) => set({ stops }),
+
   // ── Geolocation ──
   userLocation: null, // { lat, lon }
-  geoPermission: "prompt", // "prompt" | "granted" | "denied"
+  geoPermission: 'prompt', // 'prompt' | 'granted' | 'denied'
 
   setUserLocation: (loc) => set({ userLocation: loc }),
   setGeoPermission: (p) => set({ geoPermission: p }),
@@ -24,260 +44,75 @@ export const useStore = create((set, get) => ({
   mapCenter: null, // { lat, lon, zoom }
   setMapCenter: (center) => set({ mapCenter: center }),
 
-  // ── Unified Route State ──
+  // ── Mode ──
-  // routeStart = origin (source of truth)
+  mode: 'auto', // 'auto' | 'pedestrian' | 'bicycle'
-  // routeEnd = destination (source of truth)
+  setMode: (mode) => set({ mode }),
-  // stops[] = ONLY intermediate waypoints (not origin/destination)
+
-  routeStart: null, // { lat, lon, name }
+  // ── Route ──
-  routeEnd: null, // { lat, lon, name }
+  route: null, // Valhalla response (trip object)
-  stops: [], // Intermediate waypoints only: [{ id, lat, lon, name }, ...]
-  routeMode: "auto", // foot | mtb | atv | vehicle
-  boundaryMode: "strict", // strict | pragmatic | emergency
-  routeResult: null, // Response from /api/offroute
   routeLoading: false,
   routeError: null,
 
-  // Map display callback - set by MapView
+  setRoute: (route) => set({ route, routeError: null }),
-  _updateRouteDisplay: null,
-  _clearRouteDisplay: null,
-  setRouteDisplayCallbacks: (update, clear) => set({ _updateRouteDisplay: update, _clearRouteDisplay: clear }),
-
-  setRouteStart: (place) => set({ routeStart: place, routeResult: null, routeError: null }),
-  setRouteEnd: (place) => set({ routeEnd: place }),
-  setRouteResult: (result) => set({ routeResult: result, routeError: null }),
   setRouteLoading: (loading) => set({ routeLoading: loading }),
-  setRouteError: (err) => set({ routeError: err, routeResult: null }),
+  setRouteError: (err) => set({ routeError: err, route: null }),
-
+  clearRoute: () => set({ route: null, routeError: null }),
-  // Mode/boundary setters that trigger recalculation
-  setRouteMode: (mode) => {
-    set({ routeMode: mode })
-    get().computeRoute()
-  },
-  setBoundaryMode: (mode) => {
-    set({ boundaryMode: mode })
-    get().computeRoute()
-  },
-
-  clearRoute: () => {
-    const { _clearRouteDisplay } = get()
-    if (_clearRouteDisplay) _clearRouteDisplay()
-    set({
-      routeStart: null,
-      routeEnd: null,
-      stops: [],
-      routeResult: null,
-      routeError: null,
-    })
-  },
-
-  // ── INTERMEDIATE STOPS MANAGEMENT ──
-  // stops[] contains ONLY intermediate waypoints, not origin/destination
-
-  // Add intermediate stop - can be called with or without place
-  // With place: creates pre-filled stop (from radial menu)
-  // Without place: creates empty placeholder (from Add Stop button)
-  addIntermediateStop: (place) => {
-    const { stops } = get()
-    if (stops.length >= 8) return false // Max 8 intermediate stops
-    const newStop = {
-      id: crypto.randomUUID(),
-      lat: place?.lat ?? null,
-      lon: place?.lon ?? null,
-      name: place?.name ?? "",
-    }
-    set({ stops: [...stops, newStop] })
-    return true
-  },
-
-  updateStop: (id, place) => {
-    const { stops } = get()
-    const newStops = stops.map((s) =>
-      s.id === id ? { ...s, lat: place.lat, lon: place.lon, name: place.name } : s
-    )
-    set({ stops: newStops })
-    // Trigger route recalculation if all waypoints have coordinates
-    get().computeRoute()
-  },
-
-  removeStop: (id) => {
-    const { stops } = get()
-    const newStops = stops.filter((s) => s.id !== id)
-    set({ stops: newStops })
-    // Recalculate route without this stop
-    get().computeRoute()
-  },
-
-  setStops: (stops) => set({ stops }),
-
-  // ── UNIFIED ROUTING TRIGGER ──
-  // Handles both 2-point and multi-point routing
-  computeRoute: async () => {
-    const { routeStart, routeEnd, stops, routeMode, boundaryMode, _updateRouteDisplay } = get()
-
-    // Need both endpoints to route
-    if (!routeStart || !routeEnd) return
-
-    // Filter out incomplete stops (no coordinates yet)
-    const validStops = stops.filter((s) => s.lat != null && s.lon != null)
-
-    // Build full waypoint list: [origin, ...intermediates, destination]
-    const waypoints = [
-      routeStart,
-      ...validStops,
-      routeEnd,
-    ]
-
-    console.log("[TRACE-ROUTE] computeRoute with waypoints:", waypoints.length, waypoints.map(w => w.name))
-
-    set({ routeLoading: true, routeError: null })
-
-    try {
-      if (waypoints.length === 2) {
-        // Simple 2-point routing
-        const data = await requestOffroute(routeStart, routeEnd, routeMode, boundaryMode)
-        if (data.status === "ok" && data.route) {
-          set({ routeResult: data, routeError: null })
-          if (_updateRouteDisplay) _updateRouteDisplay(data.route)
-        } else {
-          set({ routeError: data.message || data.error || "No route found", routeResult: null })
-        }
-      } else {
-        // Multi-point routing: chain sequential 2-point routes and merge
-        const segments = []
-        let totalDistanceKm = 0
-        let totalEffortMinutes = 0
-        let allFeatures = []
-
-        for (let i = 0; i < waypoints.length - 1; i++) {
-          const from = waypoints[i]
-          const to = waypoints[i + 1]
-          const segmentData = await requestOffroute(from, to, routeMode, boundaryMode)
-
-          if (segmentData.status !== "ok" || !segmentData.route) {
-            throw new Error("No route found between " + (from.name || "waypoint") + " and " + (to.name || "waypoint"))
-          }
-
-          segments.push(segmentData)
-
-          // Accumulate totals
-          if (segmentData.summary) {
-            totalDistanceKm += segmentData.summary.total_distance_km || 0
-            totalEffortMinutes += segmentData.summary.total_effort_minutes || 0
-          }
-
-          // Collect features
-          if (segmentData.route?.features) {
-            allFeatures.push(...segmentData.route.features)
-          }
-        }
-
-        // Build merged result
-        const mergedResult = {
-          status: "ok",
-          summary: {
-            total_distance_km: totalDistanceKm,
-            total_effort_minutes: totalEffortMinutes,
-            waypoint_count: waypoints.length,
-          },
-          route: {
-            type: "FeatureCollection",
-            features: allFeatures,
-          },
-        }
-
-        set({ routeResult: mergedResult, routeError: null })
-        if (_updateRouteDisplay) _updateRouteDisplay(mergedResult.route)
-      }
-    } catch (e) {
-      set({ routeError: e.message, routeResult: null })
-    } finally {
-      set({ routeLoading: false })
-    }
-  },
-
-  // ── Legacy compatibility ──
-  gpsOrigin: true,
-  pendingDestination: null,
-  setGpsOrigin: (val) => set({ gpsOrigin: val }),
-  setPendingDestination: (place) => set({ pendingDestination: place }),
-  clearPendingDestination: () => set({ pendingDestination: null }),
-
-  // Master startDirections - enters directions mode with destination pre-filled
-  startDirections: (place) => {
-    console.log("[TRACE-STORE] startDirections received place:", { lat: place?.lat, lon: place?.lon, name: place?.name })
-    const { geoPermission, userLocation, clearRoute } = get()
-    clearRoute()
-
-    const destination = {
-      lat: place.lat,
-      lon: place.lon,
-      name: place.name,
-      source: place.source,
-      matchCode: place.matchCode,
-    }
-
-    let origin = null
-    if (geoPermission === "granted" && userLocation) {
-      origin = {
-        lat: userLocation.lat,
-        lon: userLocation.lon,
-        name: "Your location",
-        source: "gps",
-      }
-    }
-
-    set({
-      routeEnd: destination,
-      routeStart: origin,
-      directionsMode: true,
-      activeDirectionsField: origin ? null : "origin",
-      selectedPlace: null,
-    })
-  },
 
   // ── Place detail ──
-  selectedPlace: null,
+  selectedPlace: null, // { lat, lon, name, address, type, source, matchCode, raw, mode?, featureId?, featureLayer?, wikidata? }
-  clickMarker: null,
+  clickMarker: null, // { lat, lon, circleRadiusPx } — visual marker for two-click selection
+  gpsOrigin: true, // whether GPS should be used as origin when available
+  pendingDestination: null, // place waiting for a starting point (GPS-denied Directions flow)
 
   setSelectedPlace: (place) => set({ selectedPlace: place }),
+
+  // Boundary rendering function - set by MapView, called by PlaceCard
   updateBoundary: null,
   setUpdateBoundary: (fn) => set({ updateBoundary: fn }),
   clearSelectedPlace: () => set({ selectedPlace: null, clickMarker: null }),
   setClickMarker: (marker) => set({ clickMarker: marker }),
   clearClickMarker: () => set({ clickMarker: null }),
+  setGpsOrigin: (val) => set({ gpsOrigin: val }),
+  setPendingDestination: (place) => set({ pendingDestination: place }),
+  clearPendingDestination: () => set({ pendingDestination: null }),
+
+  startDirections: (place) => {
+    const { geoPermission, stops, addStop, clearStops } = get()
+    if (geoPermission === 'granted') {
+      clearStops()
+      addStop({ lat: place.lat, lon: place.lon, name: place.name, source: place.source, matchCode: place.matchCode })
+      set({ gpsOrigin: true, selectedPlace: null })
+    } else if (stops.length > 0) {
+      const origin = stops[0]
+      clearStops()
+      addStop({ lat: origin.lat, lon: origin.lon, name: origin.name, source: origin.source, matchCode: origin.matchCode })
+      addStop({ lat: place.lat, lon: place.lon, name: place.name, source: place.source, matchCode: place.matchCode })
+      set({ selectedPlace: null })
+    } else {
+      // GPS denied, no stops: set pendingDestination only; origin-picker will add both
+      set({ pendingDestination: place, selectedPlace: null })
+    }
+  },
 
   // ── UI state ──
-  sheetState: "half",
+  sheetState: 'half', // 'collapsed' | 'half' | 'full'
   panelOpen: true,
   autocompleteOpen: false,
-  directionsMode: false,
+  theme: 'dark', // 'dark' | 'light' (resolved value — what's actually applied)
-  activeDirectionsField: null,
+  themeOverride: null, // null | 'dark' | 'light' (manual override, persisted)
-  pickingRouteField: null,
-  theme: "dark",
-  themeOverride: null,
-  viewMode: (typeof localStorage !== "undefined" && localStorage.getItem("navi-view-mode")) || "map",
 
   setSheetState: (s) => set({ sheetState: s }),
-  setViewMode: (mode) => {
-    set({ viewMode: mode })
-    localStorage.setItem("navi-view-mode", mode)
-  },
   setPanelOpen: (open) => set({ panelOpen: open }),
   setAutocompleteOpen: (open) => set({ autocompleteOpen: open }),
-  setDirectionsMode: (mode) => set({ directionsMode: mode, activeDirectionsField: mode ? "origin" : null }),
-  setActiveDirectionsField: (field) => set({ activeDirectionsField: field }),
-  setPickingRouteField: (field) => set({ pickingRouteField: field }),
-  clearPickingRouteField: () => set({ pickingRouteField: null }),
   setTheme: (theme) => set({ theme }),
   setThemeOverride: (override) => {
     set({ themeOverride: override })
     if (override) {
-      localStorage.setItem("navi-theme-override", override)
+      localStorage.setItem('navi-theme-override', override)
     } else {
-      localStorage.removeItem("navi-theme-override")
+      localStorage.removeItem('navi-theme-override')
     }
   },
-
   // ── Auth state ──
   auth: { authenticated: false, username: null, loaded: false },
   setAuth: (auth) => set({ auth: { ...auth, loaded: true } }),
@@ -285,9 +120,9 @@ export const useStore = create((set, get) => ({
   // ── Contacts ──
   contacts: [],
   contactsLoaded: false,
-  activeTab: "routes",
+  activeTab: 'routes', // 'routes' | 'contacts'
-  editingContact: null,
+  editingContact: null, // null=closed, {}=new, {id:N}=edit
-  pickingLocationFor: null,
+  pickingLocationFor: null, // form data while user picks location on map
 
   setContacts: (c) => set({ contacts: c, contactsLoaded: true }),
   setActiveTab: (tab) => set({ activeTab: tab }),
@@ -298,17 +133,18 @@ export const useStore = create((set, get) => ({
 }))
 
 // ── Panel state selector ──
+// Returns string state, prioritizing preview to allow it alongside any route state
 export const usePanelState = () => {
   return useStore((s) => {
     const hasPreview = !!s.selectedPlace
-    const hasRoute = !!s.routeResult
+    const hasRoute = !!s.route
-    const hasRoutePoints = !!s.routeStart || !!s.routeEnd
+    const hasStops = s.stops.length >= 1
 
     if (hasPreview && hasRoute) return "PREVIEW_CALCULATED"
-    if (hasPreview && hasRoutePoints) return "PREVIEW_ROUTING"
+    if (hasPreview && hasStops) return "PREVIEW_ROUTING"
     if (hasPreview) return "PREVIEW"
     if (hasRoute) return "ROUTE_CALCULATED"
-    if (hasRoutePoints) return "ROUTING"
+    if (hasStops) return "ROUTING"
     return "IDLE"
   })
 }

src/themes/clean.js

@@ -165,7 +165,6 @@ const cleanUI = {
   // Fonts
   '--font-sans': "'Inter', system-ui, -apple-system, sans-serif",
   '--font-mono': "'JetBrains Mono', ui-monospace, monospace",
-  '--font-heading': "'Inter', system-ui, -apple-system, sans-serif",
   // Backgrounds
   '--bg-base': '#f5f5f5',
   '--bg-raised': '#ffffff',

src/themes/cyberpunk.js

@@ -1,403 +0,0 @@
-/**
- * Cyberpunk Theme for Navi
- *
- * Inspired by Mapbox's "Terminal" cyberpunk style, Blade Runner, and Ghost in
- * the Shell. A tactical display in a neon-lit command center. Near-black base
- * with deep blue-purple undertones. Roads glow in hot magenta and electric cyan.
- * Water is inky dark. Vegetation is barely there — dark teal hints. Labels are
- * cool white with colored halos.
- *
- * The whole thing should feel like you're navigating Night City.
- *
- * CUSTOM FONTS:
- * - Heading: "Orbitron" — geometric, futuristic display font
- * - Body: "Share Tech Mono" — monospaced terminal feel for entire UI
- */
-
-// ═══════════════════════════════════════════════════════════════════════════
-// PALETTE
-// ═══════════════════════════════════════════════════════════════════════════
-//
-// base: #0a0a14         ← near-black with blue-purple undertone
-// surface: #10101e      ← panels, cards
-// surfaceAlt: #161628   ← secondary surfaces, hover states
-// border: #1e1e3a       ← subtle purple edges
-// text: #d0d0e8         ← cool white text
-// textSecondary: #8888aa ← lavender-gray
-// textMuted: #5a5a7a    ← dark purple-gray
-// textInverse: #0a0a14  ← text on neon backgrounds
-// accent: #ff2d6b       ← hot pink/magenta — primary actions
-// accentHover: #ff4d8b  ← lighter magenta
-// accentAlt: #00f0ff    ← electric cyan — secondary accent
-// success: #00ff88      ← neon green
-// warning: #ffaa00      ← amber
-// danger: #ff3333       ← neon red
-// water: #06061a        ← deep dark blue-black
-// waterLabel: #3a6a8a   ← muted blue for water labels
-// vegetation: #0a1a12   ← barely-there dark teal-green
-// forest: #0e1e14       ← slightly deeper
-// road: #1a1a3a         ← ghost purple minor roads
-// roadSecondary: #2a2a5a
-// roadPrimary: #8833aa  ← purple for primary
-// roadMotorway: #ff2d6b ← hot magenta for motorways
-// roadCasing: #0a0a14   ← dark casing
-// building: #141428     ← dark purple-gray buildings
-// contour: #1e1e3e      ← dark lines, just visible
-// contourLabel: #5a5a7a
-//
-// ═══════════════════════════════════════════════════════════════════════════
-
-/**
- * Map flavor colors - protomaps-themes-base schema
- * All 73 flat keys + pois + landcover nested objects
- */
-const cyberpunkColors = {
-  // Background & earth
-  background: '#08080f',
-  earth: '#0a0a14',
-
-  // Land use areas - dark with slight purple undertones
-  park_a: '#0a1a14',
-  park_b: '#0e1e18',
-  hospital: '#1a1020',
-  industrial: '#0e0e1a',
-  school: '#14101e',
-  wood_a: '#0a1a12',
-  wood_b: '#0e1e14',
-  pedestrian: '#0c0c18',
-  scrub_a: '#0a1410',
-  scrub_b: '#0c1812',
-  glacier: '#101020',
-  sand: '#12101a',
-  beach: '#14121c',
-  aerodrome: '#0a0a16',
-  runway: '#1a1a30',
-  water: '#06061a',
-  zoo: '#0c1614',
-  military: '#100a14',
-
-  // Tunnels - dark purple casings
-  tunnel_other_casing: '#0a0a14',
-  tunnel_minor_casing: '#0a0a14',
-  tunnel_link_casing: '#0a0a14',
-  tunnel_major_casing: '#0a0a14',
-  tunnel_highway_casing: '#0a0a14',
-  tunnel_other: '#161628',
-  tunnel_minor: '#161628',
-  tunnel_link: '#2a2050',
-  tunnel_major: '#4a2870',
-  tunnel_highway: '#801848',
-
-  // Pier & buildings
-  pier: '#1a1a30',
-  buildings: '#141428',
-
-  // Roads & casings - glowing neon progression
-  minor_service_casing: '#0a0a14',
-  minor_casing: '#0a0a14',
-  link_casing: '#0a0a14',
-  major_casing_late: '#0a0a14',
-  highway_casing_late: '#0a0a14',
-  other: '#1a1a3a',
-  minor_service: '#1a1a3a',
-  minor_a: '#2a2a5a',
-  minor_b: '#1a1a3a',
-  link: '#5a3888',
-  major_casing_early: '#0a0a14',
-  major: '#8833aa',
-  highway_casing_early: '#0a0a14',
-  highway: '#ff2d6b',
-  railway: '#2a2050',
-  boundaries: '#4a4a6a',
-
-  // Waterway label
-  waterway_label: '#3a6a8a',
-
-  // Bridges - same neon colors
-  bridges_other_casing: '#0c0c18',
-  bridges_minor_casing: '#0a0a14',
-  bridges_link_casing: '#0a0a14',
-  bridges_major_casing: '#0a0a14',
-  bridges_highway_casing: '#0a0a14',
-  bridges_other: '#1a1a3a',
-  bridges_minor: '#2a2a5a',
-  bridges_link: '#5a3888',
-  bridges_major: '#8833aa',
-  bridges_highway: '#ff2d6b',
-
-  // Labels - cool white with DARK halos
-  roads_label_minor: '#8888aa',
-  roads_label_minor_halo: '#0a0a14',
-  roads_label_major: '#a0a0c0',
-  roads_label_major_halo: '#0a0a14',
-  ocean_label: '#3a6a8a',
-  peak_label: '#8888aa',
-  subplace_label: '#8888aa',
-  subplace_label_halo: '#0a0a14',
-  city_label: '#d0d0e8',
-  city_label_halo: '#0a0a14',
-  state_label: '#5a5a7a',
-  state_label_halo: '#0a0a14',
-  country_label: '#7a7a9a',
-  address_label: '#8888aa',
-  address_label_halo: '#0a0a14',
-
-  // POI icon colors - neon palette
-  pois: {
-    blue: '#00a0ff',
-    green: '#00ff88',
-    lapis: '#6060ff',
-    pink: '#ff2d6b',
-    red: '#ff3333',
-    slategray: '#8888aa',
-    tangerine: '#ffaa00',
-    turquoise: '#00f0ff',
-  },
-
-  // Landcover fill colors - very dark, barely visible
-  landcover: {
-    grassland: 'rgba(10, 26, 18, 1)',
-    barren: 'rgba(18, 16, 26, 1)',
-    urban_area: 'rgba(14, 14, 26, 1)',
-    farmland: 'rgba(12, 24, 16, 1)',
-    glacier: 'rgba(16, 16, 32, 1)',
-    scrub: 'rgba(12, 20, 16, 1)',
-    forest: 'rgba(14, 30, 20, 1)',
-  },
-}
-
-/**
- * UI CSS custom properties - neon command center aesthetic
- * Dark translucent panels with magenta/cyan accents
- */
-const cyberpunkUI = {
-  // Fonts - monospace terminal feel
-  '--font-sans': "'Share Tech Mono', monospace",
-  '--font-mono': "'Share Tech Mono', monospace",
-  '--font-heading': "'Orbitron', sans-serif",
-  // Backgrounds - dark with blue-purple undertone
-  '--bg-base': '#0a0a14',
-  '--bg-raised': '#10101e',
-  '--bg-overlay': '#161628',
-  '--bg-input': '#0c0c18',
-  '--bg-inset': '#08080f',
-  '--bg-muted': '#12121e',
-  // Text - cool white spectrum
-  '--text-primary': '#d0d0e8',
-  '--text-secondary': '#8888aa',
-  '--text-tertiary': '#5a5a7a',
-  '--text-inverse': '#0a0a14',
-  // Borders - subtle purple edges
-  '--border': '#1e1e3a',
-  '--border-subtle': '#141428',
-  // Accent - hot magenta
-  '--accent': '#ff2d6b',
-  '--accent-hover': '#ff4d8b',
-  '--accent-muted': '#3a1828',
-  // Tan becomes cyan in this theme
-  '--tan': '#00f0ff',
-  '--tan-muted': '#0a2830',
-  // Pins - neon colors
-  '--pin-origin': '#ff2d6b',
-  '--pin-destination': '#00f0ff',
-  '--pin-intermediate': '#8833aa',
-  '--pin-stroke': '#0a0a14',
-  // Status - neon signals
-  '--status-success': '#00ff88',
-  '--status-warning': '#ffaa00',
-  '--status-danger': '#ff3333',
-  '--success': '#00ff88',
-  '--warning': '#ffaa00',
-  '--warning-muted': '#2a2010',
-  // Route - cyan for contrast with magenta UI
-  '--route-line': '#00f0ff',
-  // Shadows - subtle magenta glow
-  '--shadow': '0 2px 8px rgba(255, 45, 107, 0.25)',
-  '--shadow-lg': '0 4px 16px rgba(255, 45, 107, 0.35)',
-}
-
-/**
- * Overlay configuration - subtle, muted for dark theme
- */
-const cyberpunkOverlay = {
-  // Hillshade - dramatic shadows
-  hillshade: {
-    exaggeration: 0.6,
-    illuminationDirection: 315,
-    shadowColor: '#000000',
-    highlightColor: '#2a2a4a',
-  },
-
-  // Contours - very subtle dark purple-gray
-  contours: {
-    opacityMod: 1.0,
-    minorColor: "#1a5566",
-    minorOpacity: 0.5,
-    minorWidth: { z11: 0.5, z14: 1.0 },
-    intermediateColor: "#2a7788",
-    intermediateOpacity: 0.65,
-    intermediateWidth: { z8: 0.8, z14: 1.2 },
-    indexColor: "#3a99aa",
-    indexOpacity: 0.8,
-    indexWidth: { z4: 1.2, z14: 1.8 },
-    labelColor: "#55ccdd",
-    labelHaloColor: "#0a0a14",
-    labelHaloWidth: 1.5,
-    labelOpacity: 0.85,
-    labelSize: 10,
-    labelFont: ["Noto Sans Regular"],
-  },
-
-  // Contours Test - cyan variant
-  contoursTest: {
-    minorColor: '#1a3a4a',
-    intermediateColor: '#2a4a5a',
-    indexColor: '#3a5a6a',
-    labelColor: '#5a8a9a',
-  },
-
-  // Contours Test 10ft - purple variant
-  contoursTest10ft: {
-    minorColor: '#2a1a4a',
-    intermediateColor: '#3a2a5a',
-    indexColor: '#4a3a6a',
-    labelColor: '#7a6a9a',
-  },
-
-  // Public Lands - very muted fills
-  publicLands: {
-    opacityMod: 0.5,
-    // Fill colors - dark teal/purple tints
-    fillWA: '#1a2a20',
-    fillNPS: '#0a2a1a',
-    fillUSFS: '#102820',
-    fillBLM: '#1a2828',
-    fillFWS: '#0a2a2a',
-    fillSTAT: '#102028',
-    fillLOC: '#182028',
-    fillDefault: '#1a1a2a',
-    // Fill opacities - very low
-    fillOpacityWA: 0.25,
-    fillOpacityNPS: 0.25,
-    fillOpacityUSFS: 0.20,
-    fillOpacityBLM: 0.15,
-    fillOpacitySTAT: 0.20,
-    fillOpacityLOC: 0.15,
-    fillOpacityDefault: 0.10,
-    // Outline colors - subtle
-    outlineWA: '#2a3a30',
-    outlineNPS: '#1a3a2a',
-    outlineUSFS: '#203830',
-    outlineBLM: '#2a3838',
-    outlineFWS: '#1a3a3a',
-    outlineSTAT: '#203038',
-    outlineLOC: '#283038',
-    outlineDefault: '#2a2a3a',
-    // Outline opacities
-    outlineOpacityNPS: 0.5,
-    outlineOpacityUSFS: 0.4,
-    outlineOpacityDefault: 0.3,
-    // Outline width
-    outlineWidth: { z4: 0.3, z8: 0.6, z12: 1.0 },
-    // Labels - muted teal
-    labelColor: '#5a8a8a',
-    labelHaloColor: '#0a0a14',
-    labelHaloWidth: 1.5,
-    labelOpacity: 0.7,
-    labelSize: { z10: 10, z14: 12 },
-    labelFont: ['Noto Sans Regular'],
-  },
-
-  // USFS Trails - purple/magenta/cyan family instead of earthy browns
-  usfsTrails: {
-    // Roads - purple
-    roadsColor: '#8833aa',
-    roadsOpacity: 0.85,
-    roadsWidth: { z10: 1.5, z14: 2.5, z16: 3.5 },
-    // Trails - neon colors by use type
-    trailsMotorized: '#ff2d6b',
-    trailsBicycle: '#ffaa00',
-    trailsHiker: '#00ff88',
-    trailsDefault: '#8833aa',
-    trailsOpacity: 0.85,
-    trailsWidth: { z10: 2.0, z14: 3.0, z16: 4.0 },
-    trailsDash: [2, 1.5],
-    // Road labels
-    roadsLabelColor: '#a080c0',
-    roadsLabelHaloColor: '#0a0a14',
-    roadsLabelHaloWidth: 1.5,
-    roadsLabelOpacity: 0.85,
-    roadsLabelSize: 11,
-    // Trail labels
-    trailsLabelColor: '#a080c0',
-    trailsLabelHaloColor: '#0a0a14',
-    trailsLabelHaloWidth: 1.5,
-    trailsLabelOpacity: 0.85,
-    trailsLabelSize: 11,
-    labelFont: ['Noto Sans Regular'],
-    // Hit layer
-    hitWidth: 14,
-  },
-
-  // BLM Trails - purple/cyan/magenta family
-  blmTrails: {
-    // Route colors - neon family
-    color4wdHigh: '#ff2d6b',
-    color4wdLow: '#cc2288',
-    colorAtv: '#ff3333',
-    colorMotoSingle: '#aa44cc',
-    color2wdLow: '#8833aa',
-    colorNonMech: '#00ff88',
-    colorDefault: '#6644aa',
-    colorSnow: '#00f0ff',
-    lineOpacity: 0.85,
-    lineOpacityOther: 0.75,
-    lineWidth: { z10: 2.0, z14: 3.0, z16: 4.0 },
-    // Dash patterns
-    dashImproved: [4, 2],
-    dashAggregate: [1, 2],
-    dashSnow: [4, 2, 1, 2],
-    dashOther: [4, 2, 1, 2, 1, 2],
-    // Labels
-    labelColor: '#a080c0',
-    labelHaloColor: '#0a0a14',
-    labelHaloWidth: 1.5,
-    labelOpacity: 0.85,
-    labelSize: 11,
-    labelFont: ['Noto Sans Regular'],
-    // Hit layer
-    hitWidth: 14,
-  },
-}
-
-/**
- * Satellite adjustments - dark, desaturated, purple-shifted
- */
-const cyberpunkSatellite = {
-  opacity: 0.8,
-  brightnessMin: 0.0,
-  brightnessMax: 0.30,
-  contrast: 0.15,
-  saturation: -0.6,
-  hueRotate: 280,
-}
-
-/**
- * Cyberpunk theme configuration
- */
-const cyberpunkTheme = {
-  id: 'cyberpunk',
-  name: 'Cyberpunk',
-  dark: true,
-  swatch: ['#0a0a14', '#ff2d6b', '#00f0ff'],
-  fontImports: [
-    'https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&display=swap',
-    'https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap',
-  ],
-  colors: cyberpunkColors,
-  satellite: cyberpunkSatellite,
-  overlay: cyberpunkOverlay,
-  ui: cyberpunkUI,
-}
-
-export default cyberpunkTheme

src/themes/nightops.js

@@ -1,329 +0,0 @@
-/**
- * Night Ops Theme for Navi
- *
- * Black and red tactical night operations display optimized for absolute
- * darkness. Inspired by military cockpit instruments, submarine control
- * rooms, and ship bridge displays designed for total darkness.
- *
- * Red preserves scotopic (dark-adapted) vision better than any other color.
- * This is MORE aggressive than Tactical — zero ambient light, eyes fully
- * dark-adapted, any non-red light is unacceptable.
- *
- * Red-on-black rules:
- * - ONLY red and black. No green, no blue, no amber, no white, no gray.
- * - Text is red on black, not white on black.
- * - "Bright" means brighter red (#cc3333), "dim" means darker red (#551111).
- * - Water is pure black — no blue tint whatsoever.
- * - Vegetation is very dark red-brown, barely distinguishable from land.
- * - The ONLY contrast axis is light-red to dark-red to black.
- */
-
-/**
- * Map flavor colors - protomaps-themes-base schema
- * All 73 flat keys + pois + landcover nested objects
- */
-const nightopsColors = {
-  // Background & earth - pure black with faint red
-  background: "#0a0000",
-  earth: "#080000",
-
-  // Land use areas - very dark red-brown
-  park_a: "#120505",
-  park_b: "#150606",
-  hospital: "#100404",
-  industrial: "#0c0303",
-  school: "#100404",
-  wood_a: "#120505",
-  wood_b: "#150606",
-  pedestrian: "#0a0202",
-  scrub_a: "#100404",
-  scrub_b: "#120505",
-  glacier: "#0c0303",
-  sand: "#0c0303",
-  beach: "#100404",
-  aerodrome: "#0a0202",
-  runway: "#1a0808",
-  water: "#050000",
-  zoo: "#120505",
-  military: "#100404",
-
-  // Tunnels - black casings
-  tunnel_other_casing: "#080000",
-  tunnel_minor_casing: "#080000",
-  tunnel_link_casing: "#080000",
-  tunnel_major_casing: "#080000",
-  tunnel_highway_casing: "#080000",
-  tunnel_other: "#150606",
-  tunnel_minor: "#150606",
-  tunnel_link: "#1a0808",
-  tunnel_major: "#2a0a0a",
-  tunnel_highway: "#3a1010",
-
-  // Pier & buildings - very dark red-brown
-  pier: "#1a0808",
-  buildings: "#150606",
-
-  // Roads & casings - red spectrum by brightness
-  minor_service_casing: "#080000",
-  minor_casing: "#080000",
-  link_casing: "#080000",
-  major_casing_late: "#080000",
-  highway_casing_late: "#080000",
-  other: "#1a0808",
-  minor_service: "#1a0808",
-  minor_a: "#2a0a0a",
-  minor_b: "#1a0808",
-  link: "#3a1010",
-  major_casing_early: "#080000",
-  major: "#551515",
-  highway_casing_early: "#080000",
-  highway: "#772222",
-  railway: "#150606",
-  boundaries: "#3a1010",
-
-  // Waterway label - dim red on black water
-  waterway_label: "#551515",
-
-  // Bridges - same red spectrum
-  bridges_other_casing: "#0a0202",
-  bridges_minor_casing: "#080000",
-  bridges_link_casing: "#080000",
-  bridges_major_casing: "#080000",
-  bridges_highway_casing: "#080000",
-  bridges_other: "#1a0808",
-  bridges_minor: "#2a0a0a",
-  bridges_link: "#3a1010",
-  bridges_major: "#551515",
-  bridges_highway: "#772222",
-
-  // Labels - red with BLACK halos
-  roads_label_minor: "#441111",
-  roads_label_minor_halo: "#0a0000",
-  roads_label_major: "#551515",
-  roads_label_major_halo: "#0a0000",
-  ocean_label: "#551515",
-  peak_label: "#551515",
-  subplace_label: "#441111",
-  subplace_label_halo: "#0a0000",
-  city_label: "#cc3333",
-  city_label_halo: "#0a0000",
-  state_label: "#3a1010",
-  state_label_halo: "#0a0000",
-  country_label: "#551515",
-  address_label: "#441111",
-  address_label_halo: "#0a0000",
-
-  // POI icon colors - ALL red spectrum, differentiated by brightness
-  pois: {
-    blue: "#551515",
-    green: "#882222",
-    lapis: "#441111",
-    pink: "#772222",
-    red: "#cc3333",
-    slategray: "#3a1010",
-    tangerine: "#882222",
-    turquoise: "#551515",
-  },
-
-  // Landcover fill colors - very dark red-brown
-  landcover: {
-    grassland: "rgba(18, 5, 5, 1)",
-    barren: "rgba(12, 3, 3, 1)",
-    urban_area: "rgba(10, 2, 2, 1)",
-    farmland: "rgba(15, 4, 4, 1)",
-    glacier: "rgba(12, 3, 3, 1)",
-    scrub: "rgba(15, 5, 5, 1)",
-    forest: "rgba(21, 6, 6, 1)",
-  },
-}
-
-/**
- * UI CSS custom properties - red-on-black terminal
- */
-const nightopsUI = {
-  "--font-sans": "'Inter', system-ui, -apple-system, sans-serif",
-  "--font-mono": "'JetBrains Mono', ui-monospace, monospace",
-  "--font-heading": "'Inter', system-ui, -apple-system, sans-serif",
-  "--bg-base": "#0a0000",
-  "--bg-raised": "#120000",
-  "--bg-overlay": "#1a0505",
-  "--bg-input": "#0c0202",
-  "--bg-inset": "#080000",
-  "--bg-muted": "#150505",
-  "--text-primary": "#cc3333",
-  "--text-secondary": "#882222",
-  "--text-tertiary": "#551515",
-  "--text-inverse": "#0a0000",
-  "--border": "#2a0a0a",
-  "--border-subtle": "#1a0606",
-  "--accent": "#cc3333",
-  "--accent-hover": "#dd4444",
-  "--accent-muted": "#2a0a0a",
-  "--tan": "#aa2222",
-  "--tan-muted": "#1a0606",
-  "--pin-origin": "#cc3333",
-  "--pin-destination": "#aa2222",
-  "--pin-intermediate": "#882222",
-  "--pin-stroke": "#0a0000",
-  "--status-success": "#883322",
-  "--status-warning": "#cc4422",
-  "--status-danger": "#ff2222",
-  "--success": "#883322",
-  "--warning": "#cc4422",
-  "--warning-muted": "#2a0a05",
-  "--route-line": "#cc3333",
-  "--shadow": "0 2px 8px rgba(0, 0, 0, 0.8)",
-  "--shadow-lg": "0 4px 16px rgba(0, 0, 0, 0.9)",
-}
-
-/**
- * Overlay configuration - monochrome red
- */
-const nightopsOverlay = {
-  hillshade: {
-    exaggeration: 0.2,
-    illuminationDirection: 315,
-    shadowColor: "#000000",
-    highlightColor: "#0a0000",
-  },
-  traffic: {
-    opacity: 0.4,
-  },
-  contours: {
-    opacityMod: 0.8,
-    minorColor: "#2a0808",
-    minorOpacity: 0.5,
-    minorWidth: { z11: 0.5, z14: 1.0 },
-    intermediateColor: "#3a1010",
-    intermediateOpacity: 0.6,
-    intermediateWidth: { z8: 0.8, z14: 1.2 },
-    indexColor: "#441111",
-    indexOpacity: 0.8,
-    indexWidth: { z4: 1.2, z14: 1.8 },
-    labelColor: "#551515",
-    labelHaloColor: "#0a0000",
-    labelHaloWidth: 1.5,
-    labelOpacity: 0.8,
-    labelSize: 10,
-    labelFont: ["Noto Sans Regular"],
-  },
-  contoursTest: {
-    minorColor: "#2a0808",
-    intermediateColor: "#3a1010",
-    indexColor: "#441111",
-    labelColor: "#551515",
-  },
-  contoursTest10ft: {
-    minorColor: "#1a0606",
-    intermediateColor: "#2a0808",
-    indexColor: "#3a1010",
-    labelColor: "#441111",
-  },
-  publicLands: {
-    opacityMod: 0.4,
-    fillWA: "#150606",
-    fillNPS: "#120505",
-    fillUSFS: "#150606",
-    fillBLM: "#100404",
-    fillFWS: "#120505",
-    fillSTAT: "#150606",
-    fillLOC: "#100404",
-    fillDefault: "#0c0303",
-    fillOpacityWA: 0.20,
-    fillOpacityNPS: 0.20,
-    fillOpacityUSFS: 0.18,
-    fillOpacityBLM: 0.15,
-    fillOpacitySTAT: 0.18,
-    fillOpacityLOC: 0.15,
-    fillOpacityDefault: 0.10,
-    outlineWA: "#1a0808",
-    outlineNPS: "#1a0808",
-    outlineUSFS: "#1a0808",
-    outlineBLM: "#150606",
-    outlineFWS: "#1a0808",
-    outlineSTAT: "#1a0808",
-    outlineLOC: "#150606",
-    outlineDefault: "#150606",
-    outlineOpacityNPS: 0.5,
-    outlineOpacityUSFS: 0.4,
-    outlineOpacityDefault: 0.3,
-    outlineWidth: { z4: 0.3, z8: 0.6, z12: 0.9 },
-    labelColor: "#551515",
-    labelHaloColor: "#0a0000",
-    labelHaloWidth: 1.5,
-    labelOpacity: 0.7,
-    labelSize: { z10: 10, z14: 12 },
-    labelFont: ["Noto Sans Regular"],
-  },
-  usfsTrails: {
-    roadsColor: "#3a1010",
-    roadsOpacity: 0.8,
-    roadsWidth: { z10: 1.5, z14: 2.5, z16: 3.5 },
-    trailsMotorized: "#772222",
-    trailsBicycle: "#661818",
-    trailsHiker: "#551515",
-    trailsDefault: "#3a1010",
-    trailsOpacity: 0.8,
-    trailsWidth: { z10: 2.0, z14: 3.0, z16: 4.0 },
-    trailsDash: [2, 1.5],
-    roadsLabelColor: "#551515",
-    roadsLabelHaloColor: "#0a0000",
-    roadsLabelHaloWidth: 1.5,
-    roadsLabelOpacity: 0.8,
-    roadsLabelSize: 11,
-    trailsLabelColor: "#551515",
-    trailsLabelHaloColor: "#0a0000",
-    trailsLabelHaloWidth: 1.5,
-    trailsLabelOpacity: 0.8,
-    trailsLabelSize: 11,
-    labelFont: ["Noto Sans Regular"],
-    hitWidth: 14,
-  },
-  blmTrails: {
-    color4wdHigh: "#772222",
-    color4wdLow: "#661818",
-    colorAtv: "#772222",
-    colorMotoSingle: "#661818",
-    color2wdLow: "#551515",
-    colorNonMech: "#551515",
-    colorDefault: "#3a1010",
-    colorSnow: "#661818",
-    lineOpacity: 0.8,
-    lineOpacityOther: 0.7,
-    lineWidth: { z10: 2.0, z14: 3.0, z16: 4.0 },
-    dashImproved: [4, 2],
-    dashAggregate: [1, 2],
-    dashSnow: [4, 2, 1, 2],
-    dashOther: [4, 2, 1, 2, 1, 2],
-    labelColor: "#551515",
-    labelHaloColor: "#0a0000",
-    labelHaloWidth: 1.5,
-    labelOpacity: 0.8,
-    labelSize: 11,
-    labelFont: ["Noto Sans Regular"],
-    hitWidth: 14,
-  },
-}
-
-const nightopsSatellite = {
-  opacity: 0.5,
-  brightnessMin: 0.0,
-  brightnessMax: 0.15,
-  contrast: 0.0,
-  saturation: -1.0,
-  hueRotate: 0,
-}
-
-const nightopsTheme = {
-  id: "nightops",
-  name: "Night Ops",
-  dark: true,
-  swatch: ["#0a0000", "#cc3333", "#551515"],
-  fontImports: [],
-  colors: nightopsColors,
-  satellite: nightopsSatellite,
-  overlay: nightopsOverlay,
-  ui: nightopsUI,
-}
-
-export default nightopsTheme

src/themes/parchment.js

@@ -1,374 +0,0 @@
-/**
- * Parchment Theme for Navi
- *
- * Medieval manuscript cartography. An ancient vellum map unrolled on a table —
- * deep rich ultramarine water (not modern pale blue), warm aged parchment land,
- * dark sepia ink labels, burnt sienna roads. Forests are olive-gold tints, not
- * modern green. The feel of a map you'd find in a monastery scriptorium or a
- * leather-bound explorer's journal.
- *
- * CUSTOM FONT: IM Fell English — a revival of a 1672 Fell typeface.
- * Irregular, warm, distinctly pre-modern. Used for ALL text.
- *
- * Parchment rules:
- * - Water is DEEP ultramarine (#1a3a6a), not modern pale blue
- * - Land is warm parchment/vellum — aged, not white
- * - Vegetation is olive-gold, NOT modern green
- * - Roads are brown ink — darker = more important
- * - Labels are dark sepia ink with parchment halos
- * - Everything should feel handmade, warm, aged
- */
-
-/**
- * Map flavor colors - protomaps-themes-base schema
- * All 73 flat keys + pois + landcover nested objects
- */
-const parchmentColors = {
-  // Background & earth - warm parchment
-  background: "#c8b888",
-  earth: "#d8c8a0",
-
-  // Land use areas - warm parchment variations
-  park_a: "#c8c088",
-  park_b: "#b8b078",
-  hospital: "#d8c8a0",
-  industrial: "#c8b890",
-  school: "#d0c098",
-  wood_a: "#a8a060",
-  wood_b: "#8a8848",
-  pedestrian: "#d0c098",
-  scrub_a: "#b8b070",
-  scrub_b: "#a8a060",
-  glacier: "#e0d8c0",
-  sand: "#d8c8a0",
-  beach: "#e0d0a8",
-  aerodrome: "#c8c0a0",
-  runway: "#b8a888",
-  water: "#1a3a6a",
-  zoo: "#c0b880",
-  military: "#c8b898",
-
-  // Tunnels - parchment casings
-  tunnel_other_casing: "#b8a070",
-  tunnel_minor_casing: "#b8a070",
-  tunnel_link_casing: "#b8a070",
-  tunnel_major_casing: "#b8a070",
-  tunnel_highway_casing: "#b8a070",
-  tunnel_other: "#c8b898",
-  tunnel_minor: "#c8b898",
-  tunnel_link: "#b8a078",
-  tunnel_major: "#a89068",
-  tunnel_highway: "#988058",
-
-  // Pier & buildings - warm stone
-  pier: "#c0a878",
-  buildings: "#c0a878",
-
-  // Roads & casings - brown ink progression
-  minor_service_casing: "#b8a070",
-  minor_casing: "#b8a070",
-  link_casing: "#b8a070",
-  major_casing_late: "#b8a070",
-  highway_casing_late: "#b8a070",
-  other: "#a89068",
-  minor_service: "#a89068",
-  minor_a: "#9a8058",
-  minor_b: "#a89068",
-  link: "#8a6a3a",
-  major_casing_early: "#b8a070",
-  major: "#7a5a2a",
-  highway_casing_early: "#b8a070",
-  highway: "#6a3a1a",
-  railway: "#8a7050",
-  boundaries: "#8a6a3a",
-
-  // Waterway label - parchment on dark water
-  waterway_label: "#c8b890",
-
-  // Bridges - same brown ink colors
-  bridges_other_casing: "#c0a880",
-  bridges_minor_casing: "#b8a070",
-  bridges_link_casing: "#b8a070",
-  bridges_major_casing: "#b8a070",
-  bridges_highway_casing: "#b8a070",
-  bridges_other: "#a89068",
-  bridges_minor: "#9a8058",
-  bridges_link: "#8a6a3a",
-  bridges_major: "#7a5a2a",
-  bridges_highway: "#6a3a1a",
-
-  // Labels - dark sepia ink with PARCHMENT halos
-  roads_label_minor: "#6a4a20",
-  roads_label_minor_halo: "#d8c8a0",
-  roads_label_major: "#5a3a10",
-  roads_label_major_halo: "#d8c8a0",
-  ocean_label: "#c8b890",
-  peak_label: "#5a4020",
-  subplace_label: "#6a4a20",
-  subplace_label_halo: "#d8c8a0",
-  city_label: "#2a1a0a",
-  city_label_halo: "#d8c8a0",
-  state_label: "#8a7050",
-  state_label_halo: "#d8c8a0",
-  country_label: "#5a4020",
-  address_label: "#6a4a20",
-  address_label_halo: "#d8c8a0",
-
-  // POI icon colors - period-appropriate muted palette
-  pois: {
-    blue: "#1a3a6a",
-    green: "#4a6830",
-    lapis: "#2a4a7a",
-    pink: "#8a5040",
-    red: "#8b2500",
-    slategray: "#6a5a4a",
-    tangerine: "#8b4513",
-    turquoise: "#3a5a6a",
-  },
-
-  // Landcover fill colors - olive-gold tints, NOT modern green
-  landcover: {
-    grassland: "rgba(184, 176, 120, 1)",
-    barren: "rgba(200, 184, 136, 1)",
-    urban_area: "rgba(208, 192, 152, 1)",
-    farmland: "rgba(200, 184, 128, 1)",
-    glacier: "rgba(224, 216, 192, 1)",
-    scrub: "rgba(176, 168, 112, 1)",
-    forest: "rgba(138, 136, 72, 1)",
-  },
-}
-
-/**
- * UI CSS custom properties - medieval manuscript aesthetic
- * Warm parchment panels with dark sepia ink text
- */
-const parchmentUI = {
-  // Fonts - IM Fell English for everything
-  "--font-sans": "'IM Fell English', serif",
-  "--font-mono": "'IM Fell English', serif",
-  "--font-heading": "'IM Fell English', serif",
-  // Backgrounds - warm parchment
-  "--bg-base": "#d8c8a0",
-  "--bg-raised": "#e4d8b8",
-  "--bg-overlay": "#ddd0a8",
-  "--bg-input": "#e8dcc0",
-  "--bg-inset": "#d0c090",
-  "--bg-muted": "#e0d4b0",
-  // Text - dark sepia ink
-  "--text-primary": "#2a1a0a",
-  "--text-secondary": "#5a4020",
-  "--text-tertiary": "#8a7050",
-  "--text-inverse": "#e8d8b8",
-  // Borders - aged paper edge
-  "--border": "#b8a070",
-  "--border-subtle": "#c8b890",
-  // Accent - saddle brown
-  "--accent": "#8b4513",
-  "--accent-hover": "#a05520",
-  "--accent-muted": "#e0d0b0",
-  // Tan - brown ink variants
-  "--tan": "#7a5a2a",
-  "--tan-muted": "#e8d8c0",
-  // Pins - brown ink and ultramarine
-  "--pin-origin": "#8b4513",
-  "--pin-destination": "#1a3a6a",
-  "--pin-intermediate": "#6a5a40",
-  "--pin-stroke": "#2a1a0a",
-  // Status - period-appropriate colors
-  "--status-success": "#4a6830",
-  "--status-warning": "#b8860b",
-  "--status-danger": "#8b2500",
-  "--success": "#4a6830",
-  "--warning": "#b8860b",
-  "--warning-muted": "#e8d8b8",
-  // Route - saddle brown
-  "--route-line": "#8b4513",
-  // Shadows - warm brown tinted, subtle
-  "--shadow": "0 2px 8px rgba(42, 26, 10, 0.15)",
-  "--shadow-lg": "0 4px 16px rgba(42, 26, 10, 0.20)",
-}
-
-/**
- * Overlay configuration - warm brown ink on parchment
- */
-const parchmentOverlay = {
-  // Hillshade - warm dramatic terrain
-  hillshade: {
-    exaggeration: 0.6,
-    illuminationDirection: 315,
-    shadowColor: "#3a2a1a",
-    highlightColor: "#f0e8d8",
-  },
-
-  // Contours - brown ink elevation lines
-  contours: {
-    opacityMod: 1.0,
-    minorColor: "#a88060",
-    minorOpacity: 0.5,
-    minorWidth: { z11: 0.5, z14: 1.0 },
-    intermediateColor: "#8a6a3a",
-    intermediateOpacity: 0.7,
-    intermediateWidth: { z8: 0.8, z14: 1.2 },
-    indexColor: "#6a4a20",
-    indexOpacity: 0.9,
-    indexWidth: { z4: 1.2, z14: 1.8 },
-    labelColor: "#5a3a10",
-    labelHaloColor: "#d8c8a0",
-    labelHaloWidth: 1.5,
-    labelOpacity: 0.85,
-    labelSize: 10,
-    labelFont: ["Noto Sans Regular"],
-  },
-
-  // Contours Test - same warm brown
-  contoursTest: {
-    minorColor: "#a88060",
-    intermediateColor: "#8a6a3a",
-    indexColor: "#6a4a20",
-    labelColor: "#5a3a10",
-  },
-
-  // Contours Test 10ft - slightly lighter brown
-  contoursTest10ft: {
-    minorColor: "#b89070",
-    intermediateColor: "#9a7a4a",
-    indexColor: "#7a5a30",
-    labelColor: "#6a4a20",
-  },
-
-  // Public Lands - muted olive-gold fills
-  publicLands: {
-    opacityMod: 0.8,
-    // Fill colors - olive-gold tints
-    fillWA: "#b8b070",
-    fillNPS: "#a8a060",
-    fillUSFS: "#b0a868",
-    fillBLM: "#c0b080",
-    fillFWS: "#a0a058",
-    fillSTAT: "#b8b078",
-    fillLOC: "#c0b888",
-    fillDefault: "#c8c090",
-    // Fill opacities
-    fillOpacityWA: 0.25,
-    fillOpacityNPS: 0.25,
-    fillOpacityUSFS: 0.22,
-    fillOpacityBLM: 0.18,
-    fillOpacitySTAT: 0.22,
-    fillOpacityLOC: 0.18,
-    fillOpacityDefault: 0.15,
-    // Outline colors - brown ink
-    outlineWA: "#8a7040",
-    outlineNPS: "#7a6030",
-    outlineUSFS: "#8a7040",
-    outlineBLM: "#9a8050",
-    outlineFWS: "#7a6030",
-    outlineSTAT: "#8a7040",
-    outlineLOC: "#9a8050",
-    outlineDefault: "#a89060",
-    // Outline opacities
-    outlineOpacityNPS: 0.7,
-    outlineOpacityUSFS: 0.6,
-    outlineOpacityDefault: 0.5,
-    // Outline width
-    outlineWidth: { z4: 0.3, z8: 0.8, z12: 1.2 },
-    // Labels - sepia ink with parchment halo
-    labelColor: "#5a4020",
-    labelHaloColor: "#d8c8a0",
-    labelHaloWidth: 1.5,
-    labelOpacity: 0.85,
-    labelSize: { z10: 10, z14: 13 },
-    labelFont: ["Noto Sans Regular"],
-  },
-
-  // USFS Trails - brown/sienna/olive ink family
-  usfsTrails: {
-    // Roads - brown ink
-    roadsColor: "#7a5a2a",
-    roadsOpacity: 0.9,
-    roadsWidth: { z10: 1.5, z14: 2.5, z16: 3.5 },
-    // Trails - warm earth tones only
-    trailsMotorized: "#8b4513",
-    trailsBicycle: "#8a6a3a",
-    trailsHiker: "#6a5a40",
-    trailsDefault: "#7a5a2a",
-    trailsOpacity: 0.9,
-    trailsWidth: { z10: 2.0, z14: 3.0, z16: 4.0 },
-    trailsDash: [2, 1.5],
-    // Road labels
-    roadsLabelColor: "#5a4020",
-    roadsLabelHaloColor: "#d8c8a0",
-    roadsLabelHaloWidth: 1.5,
-    roadsLabelOpacity: 0.9,
-    roadsLabelSize: 11,
-    // Trail labels
-    trailsLabelColor: "#5a4020",
-    trailsLabelHaloColor: "#d8c8a0",
-    trailsLabelHaloWidth: 1.5,
-    trailsLabelOpacity: 0.9,
-    trailsLabelSize: 11,
-    labelFont: ["Noto Sans Regular"],
-    // Hit layer
-    hitWidth: 14,
-  },
-
-  // BLM Trails - brown/sienna/olive ink family
-  blmTrails: {
-    // Route colors - warm earth tones
-    color4wdHigh: "#8b4513",
-    color4wdLow: "#8a6a3a",
-    colorAtv: "#8b2500",
-    colorMotoSingle: "#7a5a2a",
-    color2wdLow: "#9a7a4a",
-    colorNonMech: "#6a5a40",
-    colorDefault: "#8a6a3a",
-    colorSnow: "#5a6a7a",
-    lineOpacity: 0.9,
-    lineOpacityOther: 0.85,
-    lineWidth: { z10: 2.0, z14: 3.0, z16: 4.0 },
-    // Dash patterns
-    dashImproved: [4, 2],
-    dashAggregate: [1, 2],
-    dashSnow: [4, 2, 1, 2],
-    dashOther: [4, 2, 1, 2, 1, 2],
-    // Labels
-    labelColor: "#5a4020",
-    labelHaloColor: "#d8c8a0",
-    labelHaloWidth: 1.5,
-    labelOpacity: 0.9,
-    labelSize: 11,
-    labelFont: ["Noto Sans Regular"],
-    // Hit layer
-    hitWidth: 14,
-  },
-}
-
-/**
- * Satellite adjustments - warm sepia shift
- */
-const parchmentSatellite = {
-  opacity: 0.85,
-  brightnessMin: 0.0,
-  brightnessMax: 0.85,
-  contrast: 0.15,
-  saturation: -0.4,
-  hueRotate: 30,
-}
-
-/**
- * Parchment theme configuration
- */
-const parchmentTheme = {
-  id: "parchment",
-  name: "Parchment",
-  dark: false,
-  swatch: ["#d8c8a0", "#8b4513", "#1a3a6a"],
-  fontImports: [
-    "https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&display=swap",
-  ],
-  colors: parchmentColors,
-  satellite: parchmentSatellite,
-  overlay: parchmentOverlay,
-  ui: parchmentUI,
-}
-
-export default parchmentTheme

src/themes/ranger.js

@@ -1,325 +0,0 @@
-/**
- * Ranger Theme for Navi
- *
- * Military topographic map meets NVG-compatible night display. Dark olive/charcoal
- * base with muted sage greens for text — readable but low-signature. Subdued amber
- * for roads and primary actions (amber preserves night vision better than blue/white).
- * Danger in muted red. Low contrast by design — intentional for night use.
- *
- * Water is dark blue-gray, land is dark olive. Contours are PROMINENT in olive-brown —
- * this is a topo-first theme. The feel is a ruggedized field tablet displaying a
- * mil-spec moving map.
- *
- * Designed for field use and eventual ATAK/iTAK integration.
- * Functional, not decorative.
- */
-
-/**
- * Map flavor colors - protomaps-themes-base schema
- * All 73 flat keys + pois + landcover nested objects
- */
-const rangerColors = {
-  // Background & earth - dark olive
-  background: "#0a0e0a",
-  earth: "#0d110d",
-
-  // Land use areas - olive family
-  park_a: "#141c14",
-  park_b: "#182418",
-  hospital: "#1a1818",
-  industrial: "#121612",
-  school: "#181814",
-  wood_a: "#141c14",
-  wood_b: "#182418",
-  pedestrian: "#101410",
-  scrub_a: "#161c16",
-  scrub_b: "#182018",
-  glacier: "#101814",
-  sand: "#181816",
-  beach: "#1c1c18",
-  aerodrome: "#101410",
-  runway: "#2a3028",
-  water: "#0a1018",
-  zoo: "#141c14",
-  military: "#181c18",
-
-  // Tunnels - dark olive casings
-  tunnel_other_casing: "#0d110d",
-  tunnel_minor_casing: "#0d110d",
-  tunnel_link_casing: "#0d110d",
-  tunnel_major_casing: "#0d110d",
-  tunnel_highway_casing: "#0d110d",
-  tunnel_other: "#1a201a",
-  tunnel_minor: "#1a201a",
-  tunnel_link: "#2a3328",
-  tunnel_major: "#4a4830",
-  tunnel_highway: "#6a6028",
-
-  // Pier & buildings - olive
-  pier: "#2a302a",
-  buildings: "#1a221a",
-
-  // Roads & casings - olive to amber progression
-  minor_service_casing: "#0d110d",
-  minor_casing: "#0d110d",
-  link_casing: "#0d110d",
-  major_casing_late: "#0d110d",
-  highway_casing_late: "#0d110d",
-  other: "#2a3328",
-  minor_service: "#2a3328",
-  minor_a: "#3a4338",
-  minor_b: "#2a3328",
-  link: "#5a5838",
-  major_casing_early: "#0d110d",
-  major: "#8a7a40",
-  highway_casing_early: "#0d110d",
-  highway: "#c89030",
-  railway: "#1a201a",
-  boundaries: "#4a5a48",
-
-  // Waterway label - muted steel blue
-  waterway_label: "#4a6a7a",
-
-  // Bridges - same olive/amber colors
-  bridges_other_casing: "#101410",
-  bridges_minor_casing: "#0d110d",
-  bridges_link_casing: "#0d110d",
-  bridges_major_casing: "#0d110d",
-  bridges_highway_casing: "#0d110d",
-  bridges_other: "#2a3328",
-  bridges_minor: "#3a4338",
-  bridges_link: "#5a5838",
-  bridges_major: "#8a7a40",
-  bridges_highway: "#c89030",
-
-  // Labels - sage green with DARK olive halos
-  roads_label_minor: "#6a7a60",
-  roads_label_minor_halo: "#0d110d",
-  roads_label_major: "#8a9a80",
-  roads_label_major_halo: "#0d110d",
-  ocean_label: "#4a6a7a",
-  peak_label: "#7a8a70",
-  subplace_label: "#6a7a60",
-  subplace_label_halo: "#0d110d",
-  city_label: "#a0b090",
-  city_label_halo: "#0d110d",
-  state_label: "#5a6a50",
-  state_label_halo: "#0d110d",
-  country_label: "#7a8a70",
-  address_label: "#6a7a60",
-  address_label_halo: "#0d110d",
-
-  // POI icon colors - olive/amber/sage family, NO bright blues
-  pois: {
-    blue: "#5a7a6a",
-    green: "#5a8a40",
-    lapis: "#6a7a50",
-    pink: "#8a6a60",
-    red: "#aa3333",
-    slategray: "#6a7a68",
-    tangerine: "#c89030",
-    turquoise: "#5a8a70",
-  },
-
-  // Landcover fill colors - dark olive family
-  landcover: {
-    grassland: "rgba(20, 30, 18, 1)",
-    barren: "rgba(24, 24, 20, 1)",
-    urban_area: "rgba(16, 20, 16, 1)",
-    farmland: "rgba(18, 26, 18, 1)",
-    glacier: "rgba(16, 24, 20, 1)",
-    scrub: "rgba(22, 28, 20, 1)",
-    forest: "rgba(24, 36, 28, 1)",
-  },
-}
-
-/**
- * UI CSS custom properties - ranger field display
- */
-const rangerUI = {
-  "--font-sans": "'Inter', system-ui, -apple-system, sans-serif",
-  "--font-mono": "'JetBrains Mono', ui-monospace, monospace",
-  "--font-heading": "'Inter', system-ui, -apple-system, sans-serif",
-  "--bg-base": "#0d110d",
-  "--bg-raised": "#141a14",
-  "--bg-overlay": "#1a2219",
-  "--bg-input": "#101410",
-  "--bg-inset": "#0a0e0a",
-  "--bg-muted": "#182018",
-  "--text-primary": "#a0b090",
-  "--text-secondary": "#7a8a70",
-  "--text-tertiary": "#5a6a50",
-  "--text-inverse": "#0d110d",
-  "--border": "#2a332a",
-  "--border-subtle": "#1a221a",
-  "--accent": "#c89030",
-  "--accent-hover": "#d8a040",
-  "--accent-muted": "#3a3020",
-  "--tan": "#a09060",
-  "--tan-muted": "#2a2818",
-  "--pin-origin": "#c89030",
-  "--pin-destination": "#8aaa70",
-  "--pin-intermediate": "#6a7a60",
-  "--pin-stroke": "#0d110d",
-  "--status-success": "#5a8a40",
-  "--status-warning": "#c89030",
-  "--status-danger": "#aa3333",
-  "--success": "#5a8a40",
-  "--warning": "#c89030",
-  "--warning-muted": "#2a2818",
-  "--route-line": "#c89030",
-  "--shadow": "0 2px 8px rgba(0, 0, 0, 0.5)",
-  "--shadow-lg": "0 4px 16px rgba(0, 0, 0, 0.6)",
-}
-
-/**
- * Overlay configuration - prominent contours, subdued everything else
- */
-const rangerOverlay = {
-  hillshade: {
-    exaggeration: 0.5,
-    illuminationDirection: 315,
-    shadowColor: "#000000",
-    highlightColor: "#1a221a",
-  },
-  traffic: {
-    opacity: 0.5,
-  },
-  contours: {
-    opacityMod: 1.0,
-    minorColor: "#6a5a38",
-    minorOpacity: 0.6,
-    minorWidth: { z11: 0.6, z14: 1.2 },
-    intermediateColor: "#7a6a42",
-    intermediateOpacity: 0.8,
-    intermediateWidth: { z8: 1.0, z14: 1.5 },
-    indexColor: "#8a7a4a",
-    indexOpacity: 1.0,
-    indexWidth: { z4: 1.5, z14: 2.2 },
-    labelColor: "#8a7a58",
-    labelHaloColor: "#0d110d",
-    labelHaloWidth: 1.5,
-    labelOpacity: 0.9,
-    labelSize: 10,
-    labelFont: ["Noto Sans Regular"],
-  },
-  contoursTest: {
-    minorColor: "#5a5a38",
-    intermediateColor: "#6a6a42",
-    indexColor: "#7a7a4a",
-    labelColor: "#8a8a58",
-  },
-  contoursTest10ft: {
-    minorColor: "#4a5a38",
-    intermediateColor: "#5a6a42",
-    indexColor: "#6a7a4a",
-    labelColor: "#7a8a58",
-  },
-  publicLands: {
-    opacityMod: 0.6,
-    fillWA: "#3a4030",
-    fillNPS: "#2a3a28",
-    fillUSFS: "#344030",
-    fillBLM: "#4a4a38",
-    fillFWS: "#2a4038",
-    fillSTAT: "#344838",
-    fillLOC: "#3a4a3a",
-    fillDefault: "#3a3a30",
-    fillOpacityWA: 0.25,
-    fillOpacityNPS: 0.25,
-    fillOpacityUSFS: 0.20,
-    fillOpacityBLM: 0.18,
-    fillOpacitySTAT: 0.22,
-    fillOpacityLOC: 0.18,
-    fillOpacityDefault: 0.12,
-    outlineWA: "#4a5040",
-    outlineNPS: "#3a4a38",
-    outlineUSFS: "#445040",
-    outlineBLM: "#5a5a48",
-    outlineFWS: "#3a5048",
-    outlineSTAT: "#445848",
-    outlineLOC: "#4a5a4a",
-    outlineDefault: "#4a4a40",
-    outlineOpacityNPS: 0.6,
-    outlineOpacityUSFS: 0.5,
-    outlineOpacityDefault: 0.4,
-    outlineWidth: { z4: 0.3, z8: 0.7, z12: 1.0 },
-    labelColor: "#8aaa70",
-    labelHaloColor: "#0d110d",
-    labelHaloWidth: 1.5,
-    labelOpacity: 0.8,
-    labelSize: { z10: 10, z14: 12 },
-    labelFont: ["Noto Sans Regular"],
-  },
-  usfsTrails: {
-    roadsColor: "#8a7a40",
-    roadsOpacity: 0.85,
-    roadsWidth: { z10: 1.5, z14: 2.5, z16: 3.5 },
-    trailsMotorized: "#c89030",
-    trailsBicycle: "#a09040",
-    trailsHiker: "#6a9a50",
-    trailsDefault: "#8a8a50",
-    trailsOpacity: 0.85,
-    trailsWidth: { z10: 2.0, z14: 3.0, z16: 4.0 },
-    trailsDash: [2, 1.5],
-    roadsLabelColor: "#9a9a70",
-    roadsLabelHaloColor: "#0d110d",
-    roadsLabelHaloWidth: 1.5,
-    roadsLabelOpacity: 0.85,
-    roadsLabelSize: 11,
-    trailsLabelColor: "#8a9a60",
-    trailsLabelHaloColor: "#0d110d",
-    trailsLabelHaloWidth: 1.5,
-    trailsLabelOpacity: 0.85,
-    trailsLabelSize: 11,
-    labelFont: ["Noto Sans Regular"],
-    hitWidth: 14,
-  },
-  blmTrails: {
-    color4wdHigh: "#c89030",
-    color4wdLow: "#a08030",
-    colorAtv: "#aa5030",
-    colorMotoSingle: "#8a7a50",
-    color2wdLow: "#b09040",
-    colorNonMech: "#6a9a50",
-    colorDefault: "#8a8a50",
-    colorSnow: "#6a8a7a",
-    lineOpacity: 0.85,
-    lineOpacityOther: 0.75,
-    lineWidth: { z10: 2.0, z14: 3.0, z16: 4.0 },
-    dashImproved: [4, 2],
-    dashAggregate: [1, 2],
-    dashSnow: [4, 2, 1, 2],
-    dashOther: [4, 2, 1, 2, 1, 2],
-    labelColor: "#9a9a70",
-    labelHaloColor: "#0d110d",
-    labelHaloWidth: 1.5,
-    labelOpacity: 0.85,
-    labelSize: 11,
-    labelFont: ["Noto Sans Regular"],
-    hitWidth: 14,
-  },
-}
-
-const rangerSatellite = {
-  opacity: 0.75,
-  brightnessMin: 0.0,
-  brightnessMax: 0.35,
-  contrast: 0.0,
-  saturation: -0.7,
-  hueRotate: 0,
-}
-
-const rangerTheme = {
-  id: "ranger",
-  name: "Ranger",
-  dark: true,
-  swatch: ["#0d110d", "#c89030", "#a0b090"],
-  fontImports: [],
-  colors: rangerColors,
-  satellite: rangerSatellite,
-  overlay: rangerOverlay,
-  ui: rangerUI,
-}
-
-export default rangerTheme

src/themes/registry.js

@@ -16,12 +16,8 @@
  *   fontImports: string[] - URLs for font CSS imports (empty for system fonts)
  */
 
+import { namedTheme } from 'protomaps-themes-base'
 import cleanTheme from './clean.js'
-import cyberpunkTheme from './cyberpunk.js'
-import rangerTheme from './ranger.js'
-import tacticalTheme from './tactical.js'
-import nightopsTheme from './nightops.js'
-import parchmentTheme from './parchment.js'
 
 // ═══════════════════════════════════════════════════════════════════════════
 // UI CSS CUSTOM PROPERTIES
@@ -35,7 +31,6 @@ const darkUI = {
   // Fonts
   '--font-sans': "'Inter', system-ui, -apple-system, sans-serif",
   '--font-mono': "'JetBrains Mono', ui-monospace, monospace",
-  '--font-heading': "'Inter', system-ui, -apple-system, sans-serif",
   // Backgrounds
   '--bg-base': '#1c1917',
   '--bg-raised': '#252220',
@@ -85,7 +80,6 @@ const lightUI = {
   // Fonts
   '--font-sans': "'Inter', system-ui, -apple-system, sans-serif",
   '--font-mono': "'JetBrains Mono', ui-monospace, monospace",
-  '--font-heading': "'Inter', system-ui, -apple-system, sans-serif",
   // Backgrounds
   '--bg-base': '#ddd2b9',
   '--bg-raised': '#e8dec8',
@@ -493,11 +487,6 @@ const themes = {
     swatch: ['#f5f5f5', '#1a73e8', '#34a853'],
     fontImports: [],
   },
-  cyberpunk: cyberpunkTheme,
-  ranger: rangerTheme,
-  tactical: tacticalTheme,
-  nightops: nightopsTheme,
-  parchment: parchmentTheme,
   // Custom themes go here. Example:
   // 'midnight': {
   //   id: 'midnight',
@@ -525,6 +514,21 @@ export function getTheme(id) {
   return themes[id] || themes.dark
 }
 
+/**
+ * Get the color flavor for a theme
+ * For built-in themes, calls namedTheme(). For custom themes, returns colors directly.
+ * @param {string} id - Theme ID
+ * @returns {object} Flavor object for use with protomaps layers()
+ */
+export function getThemeColors(id) {
+  const theme = getTheme(id)
+  if (theme.colors === null) {
+    // Built-in theme - use namedTheme from protomaps-themes-base
+    return namedTheme(id)
+  }
+  return theme.colors
+}
+
 /**
  * Get the sprite URL for a theme
  * Built-in themes use their own sprites. Custom themes fall back to

src/themes/tactical.js

@@ -1,328 +0,0 @@
-/**
- * Tactical Theme for Navi
- *
- * Green phosphor military display. The aesthetic of night vision goggles,
- * submarine sonar screens, 1980s radar consoles, and classic green-screen
- * terminals. Pure black background with ALL visual information in the green
- * spectrum only.
- *
- * Named "Tactical" because this is the recon/military working display —
- * matches the Echo6/RECON platform identity.
- *
- * Monochrome green rules:
- * - ONLY green and black. No red, no blue, no amber, no white.
- * - Text is green on black, not white on black.
- * - Water is pure black — no blue tint.
- * - The ONLY contrast axis is bright-green to dark-green to black.
- * - The green is warm phosphor green (#00cc44), not cold cyan-green.
- */
-
-/**
- * Map flavor colors - protomaps-themes-base schema
- * All 73 flat keys + pois + landcover nested objects
- */
-const tacticalColors = {
-  // Background & earth - pure black with faint green
-  background: "#000800",
-  earth: "#000a00",
-
-  // Land use areas - very dark green
-  park_a: "#001508",
-  park_b: "#001a0a",
-  hospital: "#001208",
-  industrial: "#001005",
-  school: "#001208",
-  wood_a: "#001508",
-  wood_b: "#001a0a",
-  pedestrian: "#000c03",
-  scrub_a: "#001206",
-  scrub_b: "#001508",
-  glacier: "#000e04",
-  sand: "#001005",
-  beach: "#001206",
-  aerodrome: "#000c03",
-  runway: "#002a0a",
-  water: "#000500",
-  zoo: "#001508",
-  military: "#001206",
-
-  // Tunnels - black casings
-  tunnel_other_casing: "#000a00",
-  tunnel_minor_casing: "#000a00",
-  tunnel_link_casing: "#000a00",
-  tunnel_major_casing: "#000a00",
-  tunnel_highway_casing: "#000a00",
-  tunnel_other: "#001a08",
-  tunnel_minor: "#001a08",
-  tunnel_link: "#002a0a",
-  tunnel_major: "#003a10",
-  tunnel_highway: "#004415",
-
-  // Pier & buildings - very dark green
-  pier: "#002a0a",
-  buildings: "#001a08",
-
-  // Roads & casings - green spectrum by brightness
-  minor_service_casing: "#000a00",
-  minor_casing: "#000a00",
-  link_casing: "#000a00",
-  major_casing_late: "#000a00",
-  highway_casing_late: "#000a00",
-  other: "#002a0a",
-  minor_service: "#002a0a",
-  minor_a: "#003a10",
-  minor_b: "#002a0a",
-  link: "#004415",
-  major_casing_early: "#000a00",
-  major: "#006622",
-  highway_casing_early: "#000a00",
-  highway: "#008830",
-  railway: "#001a08",
-  boundaries: "#004415",
-
-  // Waterway label - dim green on black water
-  waterway_label: "#006622",
-
-  // Bridges - same green spectrum
-  bridges_other_casing: "#000c03",
-  bridges_minor_casing: "#000a00",
-  bridges_link_casing: "#000a00",
-  bridges_major_casing: "#000a00",
-  bridges_highway_casing: "#000a00",
-  bridges_other: "#002a0a",
-  bridges_minor: "#003a10",
-  bridges_link: "#004415",
-  bridges_major: "#006622",
-  bridges_highway: "#008830",
-
-  // Labels - phosphor green with BLACK halos
-  roads_label_minor: "#005520",
-  roads_label_minor_halo: "#000a00",
-  roads_label_major: "#006622",
-  roads_label_major_halo: "#000a00",
-  ocean_label: "#006622",
-  peak_label: "#006622",
-  subplace_label: "#005520",
-  subplace_label_halo: "#000a00",
-  city_label: "#00cc44",
-  city_label_halo: "#000a00",
-  state_label: "#004415",
-  state_label_halo: "#000a00",
-  country_label: "#006622",
-  address_label: "#005520",
-  address_label_halo: "#000a00",
-
-  // POI icon colors - ALL green spectrum, differentiated by brightness
-  pois: {
-    blue: "#006622",
-    green: "#00aa33",
-    lapis: "#005520",
-    pink: "#008830",
-    red: "#00cc44",
-    slategray: "#004415",
-    tangerine: "#00aa33",
-    turquoise: "#006622",
-  },
-
-  // Landcover fill colors - very dark green
-  landcover: {
-    grassland: "rgba(0, 21, 8, 1)",
-    barren: "rgba(0, 16, 5, 1)",
-    urban_area: "rgba(0, 12, 3, 1)",
-    farmland: "rgba(0, 18, 6, 1)",
-    glacier: "rgba(0, 14, 4, 1)",
-    scrub: "rgba(0, 18, 8, 1)",
-    forest: "rgba(0, 26, 10, 1)",
-  },
-}
-
-/**
- * UI CSS custom properties - phosphor green terminal
- */
-const tacticalUI = {
-  "--font-sans": "'Inter', system-ui, -apple-system, sans-serif",
-  "--font-mono": "'JetBrains Mono', ui-monospace, monospace",
-  "--font-heading": "'Inter', system-ui, -apple-system, sans-serif",
-  "--bg-base": "#000a00",
-  "--bg-raised": "#001200",
-  "--bg-overlay": "#001a05",
-  "--bg-input": "#000c02",
-  "--bg-inset": "#000800",
-  "--bg-muted": "#001505",
-  "--text-primary": "#00cc44",
-  "--text-secondary": "#008830",
-  "--text-tertiary": "#005520",
-  "--text-inverse": "#000a00",
-  "--border": "#002a0a",
-  "--border-subtle": "#001a08",
-  "--accent": "#00cc44",
-  "--accent-hover": "#00dd55",
-  "--accent-muted": "#002a0a",
-  "--tan": "#00aa33",
-  "--tan-muted": "#001a08",
-  "--pin-origin": "#00cc44",
-  "--pin-destination": "#00aa33",
-  "--pin-intermediate": "#008830",
-  "--pin-stroke": "#000a00",
-  "--status-success": "#00aa33",
-  "--status-warning": "#88aa00",
-  "--status-danger": "#cc4400",
-  "--success": "#00aa33",
-  "--warning": "#88aa00",
-  "--warning-muted": "#1a1a00",
-  "--route-line": "#00cc44",
-  "--shadow": "0 2px 8px rgba(0, 0, 0, 0.8)",
-  "--shadow-lg": "0 4px 16px rgba(0, 0, 0, 0.9)",
-}
-
-/**
- * Overlay configuration - monochrome green
- */
-const tacticalOverlay = {
-  hillshade: {
-    exaggeration: 0.3,
-    illuminationDirection: 315,
-    shadowColor: "#000000",
-    highlightColor: "#001a08",
-  },
-  traffic: {
-    opacity: 0.4,
-  },
-  contours: {
-    opacityMod: 0.8,
-    minorColor: "#003311",
-    minorOpacity: 0.5,
-    minorWidth: { z11: 0.5, z14: 1.0 },
-    intermediateColor: "#004415",
-    intermediateOpacity: 0.6,
-    intermediateWidth: { z8: 0.8, z14: 1.2 },
-    indexColor: "#005520",
-    indexOpacity: 0.8,
-    indexWidth: { z4: 1.2, z14: 1.8 },
-    labelColor: "#006622",
-    labelHaloColor: "#000a00",
-    labelHaloWidth: 1.5,
-    labelOpacity: 0.8,
-    labelSize: 10,
-    labelFont: ["Noto Sans Regular"],
-  },
-  contoursTest: {
-    minorColor: "#003311",
-    intermediateColor: "#004415",
-    indexColor: "#005520",
-    labelColor: "#006622",
-  },
-  contoursTest10ft: {
-    minorColor: "#002a0a",
-    intermediateColor: "#003a10",
-    indexColor: "#004415",
-    labelColor: "#005520",
-  },
-  publicLands: {
-    opacityMod: 0.4,
-    fillWA: "#001a08",
-    fillNPS: "#001508",
-    fillUSFS: "#001a08",
-    fillBLM: "#001206",
-    fillFWS: "#001508",
-    fillSTAT: "#001a08",
-    fillLOC: "#001206",
-    fillDefault: "#001005",
-    fillOpacityWA: 0.20,
-    fillOpacityNPS: 0.20,
-    fillOpacityUSFS: 0.18,
-    fillOpacityBLM: 0.15,
-    fillOpacitySTAT: 0.18,
-    fillOpacityLOC: 0.15,
-    fillOpacityDefault: 0.10,
-    outlineWA: "#002a0a",
-    outlineNPS: "#002a0a",
-    outlineUSFS: "#002a0a",
-    outlineBLM: "#001a08",
-    outlineFWS: "#002a0a",
-    outlineSTAT: "#002a0a",
-    outlineLOC: "#001a08",
-    outlineDefault: "#001a08",
-    outlineOpacityNPS: 0.5,
-    outlineOpacityUSFS: 0.4,
-    outlineOpacityDefault: 0.3,
-    outlineWidth: { z4: 0.3, z8: 0.6, z12: 0.9 },
-    labelColor: "#006622",
-    labelHaloColor: "#000a00",
-    labelHaloWidth: 1.5,
-    labelOpacity: 0.7,
-    labelSize: { z10: 10, z14: 12 },
-    labelFont: ["Noto Sans Regular"],
-  },
-  usfsTrails: {
-    roadsColor: "#004415",
-    roadsOpacity: 0.8,
-    roadsWidth: { z10: 1.5, z14: 2.5, z16: 3.5 },
-    trailsMotorized: "#008830",
-    trailsBicycle: "#006622",
-    trailsHiker: "#005520",
-    trailsDefault: "#004415",
-    trailsOpacity: 0.8,
-    trailsWidth: { z10: 2.0, z14: 3.0, z16: 4.0 },
-    trailsDash: [2, 1.5],
-    roadsLabelColor: "#006622",
-    roadsLabelHaloColor: "#000a00",
-    roadsLabelHaloWidth: 1.5,
-    roadsLabelOpacity: 0.8,
-    roadsLabelSize: 11,
-    trailsLabelColor: "#006622",
-    trailsLabelHaloColor: "#000a00",
-    trailsLabelHaloWidth: 1.5,
-    trailsLabelOpacity: 0.8,
-    trailsLabelSize: 11,
-    labelFont: ["Noto Sans Regular"],
-    hitWidth: 14,
-  },
-  blmTrails: {
-    color4wdHigh: "#008830",
-    color4wdLow: "#006622",
-    colorAtv: "#008830",
-    colorMotoSingle: "#006622",
-    color2wdLow: "#005520",
-    colorNonMech: "#005520",
-    colorDefault: "#004415",
-    colorSnow: "#006622",
-    lineOpacity: 0.8,
-    lineOpacityOther: 0.7,
-    lineWidth: { z10: 2.0, z14: 3.0, z16: 4.0 },
-    dashImproved: [4, 2],
-    dashAggregate: [1, 2],
-    dashSnow: [4, 2, 1, 2],
-    dashOther: [4, 2, 1, 2, 1, 2],
-    labelColor: "#006622",
-    labelHaloColor: "#000a00",
-    labelHaloWidth: 1.5,
-    labelOpacity: 0.8,
-    labelSize: 11,
-    labelFont: ["Noto Sans Regular"],
-    hitWidth: 14,
-  },
-}
-
-const tacticalSatellite = {
-  opacity: 0.5,
-  brightnessMin: 0.0,
-  brightnessMax: 0.15,
-  contrast: 0.0,
-  saturation: -1.0,
-  hueRotate: 120,
-}
-
-const tacticalTheme = {
-  id: "tactical",
-  name: "Tactical",
-  dark: true,
-  swatch: ["#000a00", "#00cc44", "#005520"],
-  fontImports: [],
-  colors: tacticalColors,
-  satellite: tacticalSatellite,
-  overlay: tacticalOverlay,
-  ui: tacticalUI,
-}
-
-export default tacticalTheme