{sheetState !== 'collapsed' && (
-
+
{header}
{content}
+ {mobilePlaceCardOverlay}
)}
diff --git a/src/components/PlaceCard.jsx b/src/components/PlaceCard.jsx
index 8443e1f..84ecb6b 100644
--- a/src/components/PlaceCard.jsx
+++ b/src/components/PlaceCard.jsx
@@ -348,11 +348,13 @@ export function PlaceCard({ place, variant = "preview", expanded = true, onToggl
// Reverse geocode to get OSM type/id if not present (e.g., basemap label clicks)
useEffect(() => {
if (!hasFeature('has_nominatim_details')) return
- if (wikidataId) return // Prefer wikidata path for basemap features with wikidata
- if (placeLat == null || placeLon == null) return
if (osmType && osmId) return
+ 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) => {
@@ -369,7 +371,7 @@ export function PlaceCard({ place, variant = "preview", expanded = true, onToggl
}
})
return () => controller.abort()
- }, [wikidataId, placeLat, placeLon, osmType, osmId, place?.source])
+ }, [placeLat, placeLon, osmType, osmId, place?.source])
useEffect(() => {
@@ -394,6 +396,7 @@ export function PlaceCard({ place, variant = "preview", expanded = true, onToggl
}, [osmType, osmId, placeLat, placeLon])
useEffect(() => {
+ if (osmType && osmId) return
if (!wikidataId) return
const controller = new AbortController()
fetchPlaceByWikidata(wikidataId, controller.signal).then((data) => {
@@ -405,6 +408,16 @@ 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) {
@@ -463,6 +476,7 @@ 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)
}
diff --git a/src/components/SearchBar.jsx b/src/components/SearchBar.jsx
index 2e47bd9..1215a08 100644
--- a/src/components/SearchBar.jsx
+++ b/src/components/SearchBar.jsx
@@ -6,6 +6,30 @@ 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 || ''
@@ -71,6 +95,25 @@ 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) {
diff --git a/src/components/ThemePicker.jsx b/src/components/ThemePicker.jsx
index b9f7792..15084a9 100644
--- a/src/components/ThemePicker.jsx
+++ b/src/components/ThemePicker.jsx
@@ -1,167 +1,176 @@
-import { useState, useRef, useEffect } from 'react'
-import { Palette } from 'lucide-react'
-import { themeList } from '../themes/registry'
-import { useStore } from '../store'
-
-/**
- * ThemeSwatch - Renders a circular swatch with 3 color segments
- */
-function ThemeSwatch({ colors, size = 28, active = false }) {
- // Split circle into 3 segments using conic gradient
- const gradient = `conic-gradient(
- ${colors[0]} 0deg 120deg,
- ${colors[1]} 120deg 240deg,
- ${colors[2]} 240deg 360deg
- )`
-
- return (
-
- )
-}
-
-/**
- * ThemePicker - Popover component for selecting themes
- */
-export default function ThemePicker() {
- const [isOpen, setIsOpen] = useState(false)
- const theme = useStore((s) => s.theme)
- const setThemeOverride = useStore((s) => s.setThemeOverride)
- const triggerRef = useRef(null)
- const popoverRef = useRef(null)
-
- const themes = themeList()
- const currentTheme = themes.find(t => t.id === theme) || themes[0]
-
- // Handle click outside to close
- useEffect(() => {
- if (!isOpen) return
-
- function handleClickOutside(e) {
- if (
- popoverRef.current &&
- !popoverRef.current.contains(e.target) &&
- triggerRef.current &&
- !triggerRef.current.contains(e.target)
- ) {
- setIsOpen(false)
- }
- }
-
- function handleEscape(e) {
- if (e.key === 'Escape') {
- setIsOpen(false)
- }
- }
-
- document.addEventListener('mousedown', handleClickOutside)
- document.addEventListener('keydown', handleEscape)
- return () => {
- document.removeEventListener('mousedown', handleClickOutside)
- document.removeEventListener('keydown', handleEscape)
- }
- }, [isOpen])
-
- const handleThemeSelect = (themeId) => {
- setThemeOverride(themeId)
- setIsOpen(false)
- }
-
- return (
-
- {/* Trigger button */}
-
-
- {/* Popover */}
- {isOpen && (
-
-
- {themes.map((t) => (
-
- ))}
-
-
- )}
-
- )
-}
+import { useState, useRef, useEffect } from 'react'
+
+import { themeList } from '../themes/registry'
+import { useStore } from '../store'
+
+/**
+ * ThemeSwatch - Renders a circular swatch with 3 color segments
+ */
+function ThemeSwatch({ colors, size = 28, active = false }) {
+ // Split circle into 3 segments using conic gradient
+ const gradient = `conic-gradient(
+ ${colors[0]} 0deg 120deg,
+ ${colors[1]} 120deg 240deg,
+ ${colors[2]} 240deg 360deg
+ )`
+
+ return (
+
+ )
+}
+
+/**
+ * ThemePicker - Popover component for selecting themes
+ */
+export default function ThemePicker() {
+ const [isOpen, setIsOpen] = useState(false)
+ const theme = useStore((s) => s.theme)
+ const setThemeOverride = useStore((s) => s.setThemeOverride)
+ const triggerRef = useRef(null)
+ const popoverRef = useRef(null)
+
+ const themes = themeList()
+ const currentTheme = themes.find(t => t.id === theme) || themes[0]
+
+ // Handle click outside to close
+ useEffect(() => {
+ if (!isOpen) return
+
+ function handleClickOutside(e) {
+ if (
+ popoverRef.current &&
+ !popoverRef.current.contains(e.target) &&
+ triggerRef.current &&
+ !triggerRef.current.contains(e.target)
+ ) {
+ setIsOpen(false)
+ }
+ }
+
+ function handleEscape(e) {
+ if (e.key === 'Escape') {
+ setIsOpen(false)
+ }
+ }
+
+ document.addEventListener('mousedown', handleClickOutside)
+ document.addEventListener('keydown', handleEscape)
+ return () => {
+ document.removeEventListener('mousedown', handleClickOutside)
+ document.removeEventListener('keydown', handleEscape)
+ }
+ }, [isOpen])
+
+ const handleThemeSelect = (themeId) => {
+ setThemeOverride(themeId)
+ setIsOpen(false)
+ }
+
+ return (
+
+ {/* Trigger button - shows current theme name */}
+
+
+ {/* Popover */}
+ {isOpen && (
+
+
+ {themes.map((t) => (
+
+ ))}
+
+
+ )}
+
+ )
+}
diff --git a/src/config.js b/src/config.js
index 274edba..b5da749 100644
--- a/src/config.js
+++ b/src/config.js
@@ -10,7 +10,7 @@ const FALLBACK_CONFIG = {
profile: 'home',
region_name: 'North America',
tileset: {
- url: '/tiles/na.pmtiles',
+ url: '/tiles/planet/current.pmtiles',
bounds: [-168, 14, -52, 72],
max_zoom: 15,
attribution: 'Protomaps © OSM',
@@ -21,6 +21,10 @@ 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,
@@ -30,8 +34,6 @@ 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,
diff --git a/src/index.css b/src/index.css
index 6a2bd4c..2673a26 100644
--- a/src/index.css
+++ b/src/index.css
@@ -236,46 +236,117 @@ body {
opacity: 1;
}
-/* ═══ LAYER CONTROL ═══ */
-.layer-control {
+/* ═══ BOTTOM-RIGHT MAP CONTROLS ═══ */
+.map-controls-br {
position: absolute;
- bottom: 32px;
+ bottom: 80px;
right: 10px;
z-index: 10;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
}
-.layer-control-btn {
- width: 36px;
- height: 36px;
+.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: 8px;
+ border-radius: 10px;
color: var(--text-secondary);
cursor: pointer;
box-shadow: var(--shadow);
- transition: color 0.1s, border-color 0.1s;
+ 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;
+}
+
+.layer-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;
}
.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: 44px;
- right: 0;
- min-width: 160px;
+ bottom: 0;
+ right: 52px;
+ min-width: 180px;
background: var(--bg-raised);
border: 1px solid var(--border);
- border-radius: 8px;
+ border-radius: 10px;
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);
@@ -367,27 +438,28 @@ body {
/* ═══ LOCATE BUTTON ═══ */
.locate-btn {
- position: absolute;
- bottom: 80px;
- right: 10px;
- z-index: 10;
- width: 36px;
- height: 36px;
+ width: 44px;
+ height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-raised);
border: 1px solid var(--border);
- border-radius: 8px;
+ border-radius: 10px;
color: var(--text-secondary);
cursor: pointer;
box-shadow: var(--shadow);
- transition: color 0.1s, border-color 0.1s;
+ transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.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) ═══ */
@@ -406,16 +478,15 @@ body {
overflow-x: hidden;
}
- .layer-control {
- bottom: auto;
- top: 120px;
- right: 10px;
+ .map-controls-br {
+ bottom: 70px;
+ right: 8px;
}
- .locate-btn {
- bottom: auto;
- top: 166px;
- right: 10px;
+ .layer-control-popover {
+ right: 52px;
+ max-height: 60vh;
+ overflow-y: auto;
}
.stop-remove-btn {
@@ -501,3 +572,14 @@ 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;
+}
diff --git a/src/store.js b/src/store.js
index 9b4aa30..069be9f 100644
--- a/src/store.js
+++ b/src/store.js
@@ -1,150 +1,314 @@
-import { create } from 'zustand'
-
-export const useStore = create((set, get) => ({
- // ── Search state ──
- query: '',
- results: [],
- searchLoading: false,
- abortController: null,
-
- setQuery: (query) => set({ query }),
- setResults: (results) => set({ results }),
- 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'
-
- setUserLocation: (loc) => set({ userLocation: loc }),
- setGeoPermission: (p) => set({ geoPermission: p }),
-
- // ── Map viewport (for search bias) ──
- mapCenter: null, // { lat, lon, zoom }
- setMapCenter: (center) => set({ mapCenter: center }),
-
- // ── Mode ──
- mode: 'auto', // 'auto' | 'pedestrian' | 'bicycle'
- setMode: (mode) => set({ mode }),
-
- // ── Route ──
- route: null, // Valhalla response (trip object)
- routeLoading: false,
- routeError: null,
-
- setRoute: (route) => set({ route, routeError: null }),
- setRouteLoading: (loading) => set({ routeLoading: loading }),
- setRouteError: (err) => set({ routeError: err, route: null }),
- clearRoute: () => set({ route: null, routeError: null }),
-
- // ── Place detail ──
- selectedPlace: null, // { lat, lon, name, address, type, source, matchCode, raw, mode?, featureId?, featureLayer?, wikidata? }
- 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', // 'collapsed' | 'half' | 'full'
- panelOpen: true,
- autocompleteOpen: false,
- theme: 'dark', // 'dark' | 'light' (resolved value — what's actually applied)
- themeOverride: null, // null | 'dark' | 'light' (manual override, persisted)
-
- setSheetState: (s) => set({ sheetState: s }),
- setPanelOpen: (open) => set({ panelOpen: open }),
- setAutocompleteOpen: (open) => set({ autocompleteOpen: open }),
- setTheme: (theme) => set({ theme }),
- setThemeOverride: (override) => {
- set({ themeOverride: override })
- if (override) {
- localStorage.setItem('navi-theme-override', override)
- } else {
- localStorage.removeItem('navi-theme-override')
- }
- },
- // ── Auth state ──
- auth: { authenticated: false, username: null, loaded: false },
- setAuth: (auth) => set({ auth: { ...auth, loaded: true } }),
-
- // ── Contacts ──
- contacts: [],
- contactsLoaded: false,
- activeTab: 'routes', // 'routes' | 'contacts'
- editingContact: null, // null=closed, {}=new, {id:N}=edit
- pickingLocationFor: null, // form data while user picks location on map
-
- setContacts: (c) => set({ contacts: c, contactsLoaded: true }),
- setActiveTab: (tab) => set({ activeTab: tab }),
- setEditingContact: (c) => set({ editingContact: c }),
- clearEditingContact: () => set({ editingContact: null }),
- setPickingLocationFor: (formData) => set({ pickingLocationFor: formData }),
- clearPickingLocationFor: () => set({ pickingLocationFor: null }),
-}))
-
-// ── 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.route
- const hasStops = s.stops.length >= 1
-
- if (hasPreview && hasRoute) return "PREVIEW_CALCULATED"
- if (hasPreview && hasStops) return "PREVIEW_ROUTING"
- if (hasPreview) return "PREVIEW"
- if (hasRoute) return "ROUTE_CALCULATED"
- if (hasStops) return "ROUTING"
- return "IDLE"
- })
-}
+import { create } from "zustand"
+import { requestOffroute } from "./api"
+
+export const useStore = create((set, get) => ({
+ // ── Search state ──
+ query: "",
+ results: [],
+ searchLoading: false,
+ abortController: null,
+
+ setQuery: (query) => set({ query }),
+ setResults: (results) => set({ results }),
+ setSearchLoading: (loading) => set({ searchLoading: loading }),
+ setAbortController: (ctrl) => set({ abortController: ctrl }),
+
+ // ── Geolocation ──
+ userLocation: null, // { lat, lon }
+ geoPermission: "prompt", // "prompt" | "granted" | "denied"
+
+ setUserLocation: (loc) => set({ userLocation: loc }),
+ setGeoPermission: (p) => set({ geoPermission: p }),
+
+ // ── Map viewport (for search bias) ──
+ mapCenter: null, // { lat, lon, zoom }
+ setMapCenter: (center) => set({ mapCenter: center }),
+
+ // ── Unified Route State ──
+ // routeStart = origin (source of truth)
+ // routeEnd = destination (source of truth)
+ // stops[] = ONLY intermediate waypoints (not origin/destination)
+ routeStart: null, // { lat, lon, name }
+ routeEnd: null, // { lat, lon, name }
+ 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
+ _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 }),
+
+ // 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,
+ clickMarker: null,
+
+ setSelectedPlace: (place) => set({ selectedPlace: place }),
+ updateBoundary: null,
+ setUpdateBoundary: (fn) => set({ updateBoundary: fn }),
+ clearSelectedPlace: () => set({ selectedPlace: null, clickMarker: null }),
+ setClickMarker: (marker) => set({ clickMarker: marker }),
+ clearClickMarker: () => set({ clickMarker: null }),
+
+ // ── UI state ──
+ sheetState: "half",
+ panelOpen: true,
+ autocompleteOpen: false,
+ directionsMode: false,
+ activeDirectionsField: null,
+ 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)
+ } else {
+ localStorage.removeItem("navi-theme-override")
+ }
+ },
+
+ // ── Auth state ──
+ auth: { authenticated: false, username: null, loaded: false },
+ setAuth: (auth) => set({ auth: { ...auth, loaded: true } }),
+
+ // ── Contacts ──
+ contacts: [],
+ contactsLoaded: false,
+ activeTab: "routes",
+ editingContact: null,
+ pickingLocationFor: null,
+
+ setContacts: (c) => set({ contacts: c, contactsLoaded: true }),
+ setActiveTab: (tab) => set({ activeTab: tab }),
+ setEditingContact: (c) => set({ editingContact: c }),
+ clearEditingContact: () => set({ editingContact: null }),
+ setPickingLocationFor: (formData) => set({ pickingLocationFor: formData }),
+ clearPickingLocationFor: () => set({ pickingLocationFor: null }),
+}))
+
+// ── Panel state selector ──
+export const usePanelState = () => {
+ return useStore((s) => {
+ const hasPreview = !!s.selectedPlace
+ const hasRoute = !!s.routeResult
+ const hasRoutePoints = !!s.routeStart || !!s.routeEnd
+
+ if (hasPreview && hasRoute) return "PREVIEW_CALCULATED"
+ if (hasPreview && hasRoutePoints) return "PREVIEW_ROUTING"
+ if (hasPreview) return "PREVIEW"
+ if (hasRoute) return "ROUTE_CALCULATED"
+ if (hasRoutePoints) return "ROUTING"
+ return "IDLE"
+ })
+}
diff --git a/src/themes/clean.js b/src/themes/clean.js
index 2ed3b87..b13e52d 100644
--- a/src/themes/clean.js
+++ b/src/themes/clean.js
@@ -1,379 +1,369 @@
-/**
- * Clean Theme for Navi
- *
- * A plain, familiar, Google Maps-inspired style focused on maximum usability.
- * Clean, neutral, utilitarian. White/light gray land, soft pastel green parks,
- * gentle blue water, classic gray→yellow→orange road hierarchy. No strong
- * personality — everything serves readability and wayfinding.
- *
- * The theme equivalent of a rental car: nothing exciting, nothing wrong.
- */
-
-// ═══════════════════════════════════════════════════════════════════════════
-// PALETTE
-// ═══════════════════════════════════════════════════════════════════════════
-//
-// base: #f5f5f5 ← land, app background
-// surface: #ffffff ← panels, cards, modals
-// surfaceAlt: #f8f9fa ← secondary panels, hover states
-// border: #dadce0 ← Google's standard border gray
-// text: #202124 ← primary text (Google dark)
-// textSecondary: #5f6368 ← secondary text
-// textMuted: #9aa0a6 ← placeholders, hints
-// accent: #1a73e8 ← Google blue — links, active states
-// accentHover: #1557b0 ← darker blue hover
-// success: #34a853 ← Google green
-// warning: #fbbc04 ← Google yellow
-// danger: #ea4335 ← Google red
-// water: #aadaff ← soft sky blue (Google's water)
-// waterDark: #73b3e8 ← water labels
-// vegetation: #c3ecb2 ← pastel green parks
-// forest: #a8dda0 ← slightly deeper green
-// road: #ffffff ← minor roads — white
-// roadPrimary: #fbc02d ← yellow
-// roadMotorway: #f9a825 ← deeper yellow-orange
-// roadCasing: #e0e0e0 ← light gray casing
-// building: #e8e4de ← warm light gray
-// contour: #c8b8a0 ← subtle warm brown
-//
-// ═══════════════════════════════════════════════════════════════════════════
-
-/**
- * Map flavor colors - protomaps-themes-base schema
- * All 73 flat keys + pois + landcover nested objects
- */
-const cleanColors = {
- // Background & earth
- background: '#e8e8e8',
- earth: '#f5f5f5',
-
- // Land use areas
- park_a: '#d4ecd0',
- park_b: '#c3ecb2',
- hospital: '#fde8e8',
- industrial: '#ebeff1',
- school: '#fff3e0',
- wood_a: '#d8ecd4',
- wood_b: '#a8dda0',
- pedestrian: '#f0f0f0',
- scrub_a: '#dcecd8',
- scrub_b: '#c8e4c0',
- glacier: '#f8fcff',
- sand: '#f5f0e0',
- beach: '#fef8e0',
- aerodrome: '#eaecef',
- runway: '#d0d0d0',
- water: '#aadaff',
- zoo: '#d8e8d8',
- military: '#e8e8e8',
-
- // Tunnels
- tunnel_other_casing: '#d8d8d8',
- tunnel_minor_casing: '#d8d8d8',
- tunnel_link_casing: '#d8d8d8',
- tunnel_major_casing: '#d8d8d8',
- tunnel_highway_casing: '#d8d8d8',
- tunnel_other: '#e8e8e8',
- tunnel_minor: '#e8e8e8',
- tunnel_link: '#f0e0a0',
- tunnel_major: '#f0e0a0',
- tunnel_highway: '#f0d080',
-
- // Pier & buildings
- pier: '#e0e0e0',
- buildings: '#e8e4de',
-
- // Roads & casings
- minor_service_casing: '#e0e0e0',
- minor_casing: '#e0e0e0',
- link_casing: '#d8c080',
- major_casing_late: '#d8c080',
- highway_casing_late: '#d8a860',
- other: '#f0f0f0',
- minor_service: '#ffffff',
- minor_a: '#ffffff',
- minor_b: '#ffffff',
- link: '#fbc02d',
- major_casing_early: '#d8c080',
- major: '#fbc02d',
- highway_casing_early: '#d8a860',
- highway: '#f9a825',
- railway: '#a0a0a0',
- boundaries: '#c0c0c0',
-
- // Waterway label
- waterway_label: '#73b3e8',
-
- // Bridges
- bridges_other_casing: '#d0d0d0',
- bridges_minor_casing: '#d0d0d0',
- bridges_link_casing: '#d8c080',
- bridges_major_casing: '#d8c080',
- bridges_highway_casing: '#d8a860',
- bridges_other: '#f0f0f0',
- bridges_minor: '#ffffff',
- bridges_link: '#fbc02d',
- bridges_major: '#fbc02d',
- bridges_highway: '#f9a825',
-
- // Labels
- roads_label_minor: '#5f6368',
- roads_label_minor_halo: '#ffffff',
- roads_label_major: '#5f6368',
- roads_label_major_halo: '#ffffff',
- ocean_label: '#73b3e8',
- peak_label: '#5f6368',
- subplace_label: '#5f6368',
- subplace_label_halo: '#ffffff',
- city_label: '#202124',
- city_label_halo: '#ffffff',
- state_label: '#9aa0a6',
- state_label_halo: '#ffffff',
- country_label: '#5f6368',
- address_label: '#5f6368',
- address_label_halo: '#ffffff',
-
- // POI icon colors
- pois: {
- blue: '#1a73e8',
- green: '#34a853',
- lapis: '#4285f4',
- pink: '#e91e63',
- red: '#ea4335',
- slategray: '#5f6368',
- tangerine: '#f9a825',
- turquoise: '#00bcd4',
- },
-
- // Landcover fill colors
- landcover: {
- grassland: 'rgba(200, 232, 192, 1)',
- barren: 'rgba(240, 235, 220, 1)',
- urban_area: 'rgba(235, 235, 235, 1)',
- farmland: 'rgba(216, 240, 210, 1)',
- glacier: 'rgba(250, 252, 255, 1)',
- scrub: 'rgba(220, 236, 216, 1)',
- forest: 'rgba(180, 224, 176, 1)',
- },
-}
-
-/**
- * UI CSS custom properties - app chrome styling
- * Clean Google-inspired white panels with standard gray text
- */
-const cleanUI = {
- // Fonts
- '--font-sans': "'Inter', system-ui, -apple-system, sans-serif",
- '--font-mono': "'JetBrains Mono', ui-monospace, monospace",
+/**
+ * Clean Theme for Navi
+ *
+ * A plain, familiar, Google Maps-inspired style focused on maximum usability.
+ * Clean, neutral, utilitarian. White/light gray land, soft pastel green parks,
+ * gentle blue water, classic gray→yellow→orange road hierarchy. No strong
+ * personality — everything serves readability and wayfinding.
+ *
+ * The theme equivalent of a rental car: nothing exciting, nothing wrong.
+ */
+
+// ═══════════════════════════════════════════════════════════════════════════
+// PALETTE
+// ═══════════════════════════════════════════════════════════════════════════
+//
+// base: #f5f5f5 ← land, app background
+// surface: #ffffff ← panels, cards, modals
+// surfaceAlt: #f8f9fa ← secondary panels, hover states
+// border: #dadce0 ← Google's standard border gray
+// text: #202124 ← primary text (Google dark)
+// textSecondary: #5f6368 ← secondary text
+// textMuted: #9aa0a6 ← placeholders, hints
+// accent: #1a73e8 ← Google blue — links, active states
+// accentHover: #1557b0 ← darker blue hover
+// success: #34a853 ← Google green
+// warning: #fbbc04 ← Google yellow
+// danger: #ea4335 ← Google red
+// water: #aadaff ← soft sky blue (Google's water)
+// waterDark: #73b3e8 ← water labels
+// vegetation: #c3ecb2 ← pastel green parks
+// forest: #a8dda0 ← slightly deeper green
+// road: #ffffff ← minor roads — white
+// roadPrimary: #fbc02d ← yellow
+// roadMotorway: #f9a825 ← deeper yellow-orange
+// roadCasing: #e0e0e0 ← light gray casing
+// building: #e8e4de ← warm light gray
+// contour: #c8b8a0 ← subtle warm brown
+//
+// ═══════════════════════════════════════════════════════════════════════════
+
+/**
+ * Map flavor colors - protomaps-themes-base schema
+ * All 73 flat keys + pois + landcover nested objects
+ */
+const cleanColors = {
+ // Background & earth
+ background: '#e8e8e8',
+ earth: '#f5f5f5',
+
+ // Land use areas
+ park_a: '#d4ecd0',
+ park_b: '#c3ecb2',
+ hospital: '#fde8e8',
+ industrial: '#ebeff1',
+ school: '#fff3e0',
+ wood_a: '#d8ecd4',
+ wood_b: '#a8dda0',
+ pedestrian: '#f0f0f0',
+ scrub_a: '#dcecd8',
+ scrub_b: '#c8e4c0',
+ glacier: '#f8fcff',
+ sand: '#f5f0e0',
+ beach: '#fef8e0',
+ aerodrome: '#eaecef',
+ runway: '#d0d0d0',
+ water: '#aadaff',
+ zoo: '#d8e8d8',
+ military: '#e8e8e8',
+
+ // Tunnels
+ tunnel_other_casing: '#d8d8d8',
+ tunnel_minor_casing: '#d8d8d8',
+ tunnel_link_casing: '#d8d8d8',
+ tunnel_major_casing: '#d8d8d8',
+ tunnel_highway_casing: '#d8d8d8',
+ tunnel_other: '#e8e8e8',
+ tunnel_minor: '#e8e8e8',
+ tunnel_link: '#f0e0a0',
+ tunnel_major: '#f0e0a0',
+ tunnel_highway: '#f0d080',
+
+ // Pier & buildings
+ pier: '#e0e0e0',
+ buildings: '#e8e4de',
+
+ // Roads & casings
+ minor_service_casing: '#e0e0e0',
+ minor_casing: '#e0e0e0',
+ link_casing: '#d8c080',
+ major_casing_late: '#d8c080',
+ highway_casing_late: '#d8a860',
+ other: '#f0f0f0',
+ minor_service: '#ffffff',
+ minor_a: '#ffffff',
+ minor_b: '#ffffff',
+ link: '#fbc02d',
+ major_casing_early: '#d8c080',
+ major: '#fbc02d',
+ highway_casing_early: '#d8a860',
+ highway: '#f9a825',
+ railway: '#a0a0a0',
+ boundaries: '#c0c0c0',
+
+ // Waterway label
+ waterway_label: '#73b3e8',
+
+ // Bridges
+ bridges_other_casing: '#d0d0d0',
+ bridges_minor_casing: '#d0d0d0',
+ bridges_link_casing: '#d8c080',
+ bridges_major_casing: '#d8c080',
+ bridges_highway_casing: '#d8a860',
+ bridges_other: '#f0f0f0',
+ bridges_minor: '#ffffff',
+ bridges_link: '#fbc02d',
+ bridges_major: '#fbc02d',
+ bridges_highway: '#f9a825',
+
+ // Labels
+ roads_label_minor: '#5f6368',
+ roads_label_minor_halo: '#ffffff',
+ roads_label_major: '#5f6368',
+ roads_label_major_halo: '#ffffff',
+ ocean_label: '#73b3e8',
+ peak_label: '#5f6368',
+ subplace_label: '#5f6368',
+ subplace_label_halo: '#ffffff',
+ city_label: '#202124',
+ city_label_halo: '#ffffff',
+ state_label: '#9aa0a6',
+ state_label_halo: '#ffffff',
+ country_label: '#5f6368',
+ address_label: '#5f6368',
+ address_label_halo: '#ffffff',
+
+ // POI icon colors
+ pois: {
+ blue: '#1a73e8',
+ green: '#34a853',
+ lapis: '#4285f4',
+ pink: '#e91e63',
+ red: '#ea4335',
+ slategray: '#5f6368',
+ tangerine: '#f9a825',
+ turquoise: '#00bcd4',
+ },
+
+ // Landcover fill colors
+ landcover: {
+ grassland: 'rgba(200, 232, 192, 1)',
+ barren: 'rgba(240, 235, 220, 1)',
+ urban_area: 'rgba(235, 235, 235, 1)',
+ farmland: 'rgba(216, 240, 210, 1)',
+ glacier: 'rgba(250, 252, 255, 1)',
+ scrub: 'rgba(220, 236, 216, 1)',
+ forest: 'rgba(180, 224, 176, 1)',
+ },
+}
+
+/**
+ * UI CSS custom properties - app chrome styling
+ * Clean Google-inspired white panels with standard gray text
+ */
+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',
- '--bg-overlay': '#ffffff',
- '--bg-input': '#ffffff',
- '--bg-inset': '#f0f0f0',
- '--bg-muted': '#f8f9fa',
- // Text
- '--text-primary': '#202124',
- '--text-secondary': '#5f6368',
- '--text-tertiary': '#9aa0a6',
- '--text-inverse': '#ffffff',
- // Borders
- '--border': '#dadce0',
- '--border-subtle': '#e8eaed',
- // Accent
- '--accent': '#1a73e8',
- '--accent-hover': '#1557b0',
- '--accent-muted': '#e8f0fe',
- // Tan
- '--tan': '#f9a825',
- '--tan-muted': '#fef7e0',
- // Pins
- '--pin-origin': '#34a853',
- '--pin-destination': '#ea4335',
- '--pin-intermediate': '#5f6368',
- '--pin-stroke': '#ffffff',
- // Status
- '--status-success': '#34a853',
- '--status-warning': '#fbbc04',
- '--status-danger': '#ea4335',
- '--success': '#34a853',
- '--warning': '#fbbc04',
- '--warning-muted': '#fef7e0',
- // Route
- '--route-line': '#1a73e8',
- // Shadows
- '--shadow': '0 1px 3px rgba(60, 64, 67, 0.15), 0 1px 2px rgba(60, 64, 67, 0.1)',
- '--shadow-lg': '0 2px 6px rgba(60, 64, 67, 0.2), 0 1px 3px rgba(60, 64, 67, 0.15)',
-}
-
-/**
- * Overlay configuration overrides
- * Light shadow hillshade, warm brown contours, standard public lands
- */
-const cleanOverlay = {
- // Hillshade - light and natural
- hillshade: {
- exaggeration: 0.4,
- illuminationDirection: 315,
- shadowColor: '#000000',
- highlightColor: '#ffffff',
- },
-
- // Contours - warm brown, subtle
- contours: {
- opacityMod: 0.9,
- minorColor: '#c8b8a0',
- minorOpacity: 0.35,
- minorWidth: { z11: 0.5, z14: 0.8 },
- intermediateColor: '#c8b8a0',
- intermediateOpacity: 0.55,
- intermediateWidth: { z8: 0.7, z14: 1.0 },
- indexColor: '#a89878',
- indexOpacity: 0.75,
- indexWidth: { z4: 1.0, z14: 1.5 },
- labelColor: '#8a7a60',
- labelHaloColor: '#ffffff',
- labelHaloWidth: 1.5,
- labelOpacity: 0.8,
- labelSize: 10,
- labelFont: ['Noto Sans Regular'],
- },
-
- // Contours Test - blue variant
- contoursTest: {
- minorColor: '#5a9ab8',
- intermediateColor: '#5a9ab8',
- indexColor: '#3a7a98',
- labelColor: '#3a6a88',
- },
-
- // Contours Test 10ft - green variant
- contoursTest10ft: {
- minorColor: '#4a9a5f',
- intermediateColor: '#4a9a5f',
- indexColor: '#2a7a4a',
- labelColor: '#2a5a40',
- },
-
- // Public Lands - standard green tints with dark labels
- publicLands: {
- opacityMod: 0.9,
- // Fill colors per category
- fillWA: '#8a7a40',
- fillNPS: '#4a8030',
- fillUSFS: '#6a9040',
- fillBLM: '#d4b880',
- fillFWS: '#5a9068',
- fillSTAT: '#6aa088',
- fillLOC: '#9ab8a8',
- fillDefault: '#b0b0b0',
- // Fill opacities
- fillOpacityWA: 0.25,
- fillOpacityNPS: 0.25,
- fillOpacityUSFS: 0.20,
- fillOpacityBLM: 0.18,
- fillOpacitySTAT: 0.22,
- fillOpacityLOC: 0.18,
- fillOpacityDefault: 0.12,
- // Outline colors
- outlineWA: '#6a5a28',
- outlineNPS: '#2a5018',
- outlineUSFS: '#4a6828',
- outlineBLM: '#9a8050',
- outlineFWS: '#3a6848',
- outlineSTAT: '#4a7060',
- outlineLOC: '#6a8070',
- outlineDefault: '#808080',
- // Outline opacities
- outlineOpacityNPS: 0.65,
- outlineOpacityUSFS: 0.55,
- outlineOpacityDefault: 0.45,
- // Outline width
- outlineWidth: { z4: 0.3, z8: 0.8, z12: 1.2 },
- // Labels - dark for readability
- labelColor: '#2a3a28',
- labelHaloColor: '#ffffff',
- labelHaloWidth: 1.5,
- labelOpacity: 0.85,
- labelSize: { z10: 10, z14: 13 },
- labelFont: ['Noto Sans Regular'],
- },
-
- // USFS Trails - standard trail colors
- usfsTrails: {
- roadsColor: '#c09050',
- roadsOpacity: 0.85,
- roadsWidth: { z10: 1.5, z14: 2.5, z16: 3.5 },
- trailsMotorized: '#e07030',
- trailsBicycle: '#d0a030',
- trailsHiker: '#50b040',
- trailsDefault: '#b09050',
- trailsOpacity: 0.85,
- trailsWidth: { z10: 2.0, z14: 3.0, z16: 4.0 },
- trailsDash: [2, 1.5],
- roadsLabelColor: '#5a4a30',
- roadsLabelHaloColor: '#ffffff',
- roadsLabelHaloWidth: 1.5,
- roadsLabelOpacity: 0.85,
- roadsLabelSize: 11,
- trailsLabelColor: '#4a3a28',
- trailsLabelHaloColor: '#ffffff',
- trailsLabelHaloWidth: 1.5,
- trailsLabelOpacity: 0.85,
- trailsLabelSize: 11,
- labelFont: ['Noto Sans Regular'],
- hitWidth: 14,
- },
-
- // BLM Trails - standard route colors
- blmTrails: {
- color4wdHigh: '#e07030',
- color4wdLow: '#d0a030',
- colorAtv: '#d03030',
- colorMotoSingle: '#a060b0',
- color2wdLow: '#e0c060',
- colorNonMech: '#50b040',
- colorDefault: '#b09050',
- colorSnow: '#6090c0',
- lineOpacity: 0.85,
- lineOpacityOther: 0.80,
- 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: '#4a3a28',
- labelHaloColor: '#ffffff',
- labelHaloWidth: 1.5,
- labelOpacity: 0.85,
- labelSize: 11,
- labelFont: ['Noto Sans Regular'],
- hitWidth: 14,
- },
-
- // ── Highlight (boundary/selection) ────────────────────────────────────────
- highlight: {
- lineColor: "#1a73e8", // Google blue for selection
- lineWidth: 2,
- lineDash: [4, 4],
- lineOpacity: 0.7,
- fillColor: "#1a73e8",
- fillOpacity: 0.06,
- },
-}
-
-/**
- * Clean theme configuration
- */
-const cleanTheme = {
- id: 'clean',
- name: 'Clean',
- dark: false,
- colors: cleanColors,
- satellite: null, // No adjustments — default clear view
- overlay: cleanOverlay,
- ui: cleanUI,
-}
-
-export default cleanTheme
+ // Backgrounds
+ '--bg-base': '#f5f5f5',
+ '--bg-raised': '#ffffff',
+ '--bg-overlay': '#ffffff',
+ '--bg-input': '#ffffff',
+ '--bg-inset': '#f0f0f0',
+ '--bg-muted': '#f8f9fa',
+ // Text
+ '--text-primary': '#202124',
+ '--text-secondary': '#5f6368',
+ '--text-tertiary': '#9aa0a6',
+ '--text-inverse': '#ffffff',
+ // Borders
+ '--border': '#dadce0',
+ '--border-subtle': '#e8eaed',
+ // Accent
+ '--accent': '#1a73e8',
+ '--accent-hover': '#1557b0',
+ '--accent-muted': '#e8f0fe',
+ // Tan
+ '--tan': '#f9a825',
+ '--tan-muted': '#fef7e0',
+ // Pins
+ '--pin-origin': '#34a853',
+ '--pin-destination': '#ea4335',
+ '--pin-intermediate': '#5f6368',
+ '--pin-stroke': '#ffffff',
+ // Status
+ '--status-success': '#34a853',
+ '--status-warning': '#fbbc04',
+ '--status-danger': '#ea4335',
+ '--success': '#34a853',
+ '--warning': '#fbbc04',
+ '--warning-muted': '#fef7e0',
+ // Route
+ '--route-line': '#1a73e8',
+ // Shadows
+ '--shadow': '0 1px 3px rgba(60, 64, 67, 0.15), 0 1px 2px rgba(60, 64, 67, 0.1)',
+ '--shadow-lg': '0 2px 6px rgba(60, 64, 67, 0.2), 0 1px 3px rgba(60, 64, 67, 0.15)',
+}
+
+/**
+ * Overlay configuration overrides
+ * Light shadow hillshade, warm brown contours, standard public lands
+ */
+const cleanOverlay = {
+ // Hillshade - light and natural
+ hillshade: {
+ exaggeration: 0.4,
+ illuminationDirection: 315,
+ shadowColor: '#000000',
+ highlightColor: '#ffffff',
+ },
+
+ // Contours - warm brown, subtle
+ contours: {
+ opacityMod: 0.9,
+ minorColor: '#c8b8a0',
+ minorOpacity: 0.35,
+ minorWidth: { z11: 0.5, z14: 0.8 },
+ intermediateColor: '#c8b8a0',
+ intermediateOpacity: 0.55,
+ intermediateWidth: { z8: 0.7, z14: 1.0 },
+ indexColor: '#a89878',
+ indexOpacity: 0.75,
+ indexWidth: { z4: 1.0, z14: 1.5 },
+ labelColor: '#8a7a60',
+ labelHaloColor: '#ffffff',
+ labelHaloWidth: 1.5,
+ labelOpacity: 0.8,
+ labelSize: 10,
+ labelFont: ['Noto Sans Regular'],
+ },
+
+ // Contours Test - blue variant
+ contoursTest: {
+ minorColor: '#5a9ab8',
+ intermediateColor: '#5a9ab8',
+ indexColor: '#3a7a98',
+ labelColor: '#3a6a88',
+ },
+
+ // Contours Test 10ft - green variant
+ contoursTest10ft: {
+ minorColor: '#4a9a5f',
+ intermediateColor: '#4a9a5f',
+ indexColor: '#2a7a4a',
+ labelColor: '#2a5a40',
+ },
+
+ // Public Lands - standard green tints with dark labels
+ publicLands: {
+ opacityMod: 0.9,
+ // Fill colors per category
+ fillWA: '#8a7a40',
+ fillNPS: '#4a8030',
+ fillUSFS: '#6a9040',
+ fillBLM: '#d4b880',
+ fillFWS: '#5a9068',
+ fillSTAT: '#6aa088',
+ fillLOC: '#9ab8a8',
+ fillDefault: '#b0b0b0',
+ // Fill opacities
+ fillOpacityWA: 0.25,
+ fillOpacityNPS: 0.25,
+ fillOpacityUSFS: 0.20,
+ fillOpacityBLM: 0.18,
+ fillOpacitySTAT: 0.22,
+ fillOpacityLOC: 0.18,
+ fillOpacityDefault: 0.12,
+ // Outline colors
+ outlineWA: '#6a5a28',
+ outlineNPS: '#2a5018',
+ outlineUSFS: '#4a6828',
+ outlineBLM: '#9a8050',
+ outlineFWS: '#3a6848',
+ outlineSTAT: '#4a7060',
+ outlineLOC: '#6a8070',
+ outlineDefault: '#808080',
+ // Outline opacities
+ outlineOpacityNPS: 0.65,
+ outlineOpacityUSFS: 0.55,
+ outlineOpacityDefault: 0.45,
+ // Outline width
+ outlineWidth: { z4: 0.3, z8: 0.8, z12: 1.2 },
+ // Labels - dark for readability
+ labelColor: '#2a3a28',
+ labelHaloColor: '#ffffff',
+ labelHaloWidth: 1.5,
+ labelOpacity: 0.85,
+ labelSize: { z10: 10, z14: 13 },
+ labelFont: ['Noto Sans Regular'],
+ },
+
+ // USFS Trails - standard trail colors
+ usfsTrails: {
+ roadsColor: '#c09050',
+ roadsOpacity: 0.85,
+ roadsWidth: { z10: 1.5, z14: 2.5, z16: 3.5 },
+ trailsMotorized: '#e07030',
+ trailsBicycle: '#d0a030',
+ trailsHiker: '#50b040',
+ trailsDefault: '#b09050',
+ trailsOpacity: 0.85,
+ trailsWidth: { z10: 2.0, z14: 3.0, z16: 4.0 },
+ trailsDash: [2, 1.5],
+ roadsLabelColor: '#5a4a30',
+ roadsLabelHaloColor: '#ffffff',
+ roadsLabelHaloWidth: 1.5,
+ roadsLabelOpacity: 0.85,
+ roadsLabelSize: 11,
+ trailsLabelColor: '#4a3a28',
+ trailsLabelHaloColor: '#ffffff',
+ trailsLabelHaloWidth: 1.5,
+ trailsLabelOpacity: 0.85,
+ trailsLabelSize: 11,
+ labelFont: ['Noto Sans Regular'],
+ hitWidth: 14,
+ },
+
+ // BLM Trails - standard route colors
+ blmTrails: {
+ color4wdHigh: '#e07030',
+ color4wdLow: '#d0a030',
+ colorAtv: '#d03030',
+ colorMotoSingle: '#a060b0',
+ color2wdLow: '#e0c060',
+ colorNonMech: '#50b040',
+ colorDefault: '#b09050',
+ colorSnow: '#6090c0',
+ lineOpacity: 0.85,
+ lineOpacityOther: 0.80,
+ 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: '#4a3a28',
+ labelHaloColor: '#ffffff',
+ labelHaloWidth: 1.5,
+ labelOpacity: 0.85,
+ labelSize: 11,
+ labelFont: ['Noto Sans Regular'],
+ hitWidth: 14,
+ },
+}
+
+/**
+ * Clean theme configuration
+ */
+const cleanTheme = {
+ id: 'clean',
+ name: 'Clean',
+ dark: false,
+ colors: cleanColors,
+ satellite: null, // No adjustments — default clear view
+ overlay: cleanOverlay,
+ ui: cleanUI,
+}
+
+export default cleanTheme
diff --git a/src/themes/cyberpunk.js b/src/themes/cyberpunk.js
index d5e09c4..8abaadb 100644
--- a/src/themes/cyberpunk.js
+++ b/src/themes/cyberpunk.js
@@ -230,22 +230,22 @@ const cyberpunkOverlay = {
// Contours - very subtle dark purple-gray
contours: {
- opacityMod: 0.5,
- minorColor: '#1e1e3e',
- minorOpacity: 0.3,
- minorWidth: { z11: 0.4, z14: 0.8 },
- intermediateColor: '#2a2a4a',
- intermediateOpacity: 0.4,
- intermediateWidth: { z8: 0.6, z14: 1.0 },
- indexColor: '#3a3a5a',
- indexOpacity: 0.5,
- indexWidth: { z4: 0.8, z14: 1.2 },
- labelColor: '#5a5a7a',
- labelHaloColor: '#0a0a14',
+ 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.6,
+ labelOpacity: 0.85,
labelSize: 10,
- labelFont: ['Noto Sans Regular'],
+ labelFont: ["Noto Sans Regular"],
},
// Contours Test - cyan variant
@@ -368,16 +368,6 @@ const cyberpunkOverlay = {
// Hit layer
hitWidth: 14,
},
-
- // ── Highlight (boundary/selection) ────────────────────────────────────────
- highlight: {
- lineColor: "#00f0ff", // Electric cyan for selection
- lineWidth: 2,
- lineDash: [4, 4],
- lineOpacity: 0.9,
- fillColor: "#00f0ff",
- fillOpacity: 0.1,
- },
}
/**
diff --git a/src/themes/nightops.js b/src/themes/nightops.js
new file mode 100644
index 0000000..ee3c82d
--- /dev/null
+++ b/src/themes/nightops.js
@@ -0,0 +1,329 @@
+/**
+ * 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
diff --git a/src/themes/parchment.js b/src/themes/parchment.js
new file mode 100644
index 0000000..03bc22d
--- /dev/null
+++ b/src/themes/parchment.js
@@ -0,0 +1,374 @@
+/**
+ * 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
diff --git a/src/themes/ranger.js b/src/themes/ranger.js
new file mode 100644
index 0000000..5ae8ca6
--- /dev/null
+++ b/src/themes/ranger.js
@@ -0,0 +1,325 @@
+/**
+ * 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
diff --git a/src/themes/registry.js b/src/themes/registry.js
index 7f6b74c..a65a490 100644
--- a/src/themes/registry.js
+++ b/src/themes/registry.js
@@ -16,9 +16,12 @@
* 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
@@ -288,16 +291,6 @@ const darkOverlay = {
// Hit layer
hitWidth: 14,
},
-
- // ── Highlight (boundary/selection) ────────────────────────────────────────
- highlight: {
- lineColor: "#7a9a6b", // Muted olive-green for dark backgrounds
- lineWidth: 2,
- lineDash: [4, 4],
- lineOpacity: 0.8,
- fillColor: "#7a9a6b",
- fillOpacity: 0.08,
- },
}
/**
@@ -460,16 +453,6 @@ const lightOverlay = {
// Hit layer
hitWidth: 14,
},
-
- // ── Highlight (boundary/selection) ────────────────────────────────────────
- highlight: {
- lineColor: "#4a7040", // Forest green for light backgrounds
- lineWidth: 2,
- lineDash: [4, 4],
- lineOpacity: 0.7,
- fillColor: "#4a7040",
- fillOpacity: 0.06,
- },
}
// ═══════════════════════════════════════════════════════════════════════════
@@ -511,6 +494,10 @@ const themes = {
fontImports: [],
},
cyberpunk: cyberpunkTheme,
+ ranger: rangerTheme,
+ tactical: tacticalTheme,
+ nightops: nightopsTheme,
+ parchment: parchmentTheme,
// Custom themes go here. Example:
// 'midnight': {
// id: 'midnight',
@@ -538,21 +525,6 @@ 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
diff --git a/src/themes/tactical.js b/src/themes/tactical.js
new file mode 100644
index 0000000..9ac5ddf
--- /dev/null
+++ b/src/themes/tactical.js
@@ -0,0 +1,328 @@
+/**
+ * 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