feat: unified routing UI with wilderness + network segments

- Single routing system (removed duplicate Valhalla-only flow)
- Unified radial menu: From here, To here, Clear, Save, Measure
- Removed "Offroute" section from panel (single directions display)
- Better error messages without technical "Offroute" prefix
- ManeuverList shows wilderness + network breakdown
- PlaceCard integration for previews

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/App.jsx

@@ -1,8 +1,7 @@
 import { useEffect, useRef, useCallback } from 'react'
 import { useStore } from './store'
 import { useTheme } from './hooks/useTheme'
-import { requestRoute, fetchAuthState } from './api'
+import { fetchAuthState } from './api'
-import { decodePolyline } from './utils/decode'
 import MapView from './components/MapView'
 import Panel from './components/Panel'
 
@@ -12,20 +11,10 @@ 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)
@@ -33,67 +22,15 @@ export default function App() {
     fetchAuthState().then(setAuth)
   }, [setAuth])
 
-  // Fetch route when stops, mode, gpsOrigin, or geoPermission change (debounced 500ms)
+  // Handle clear route from panel
-  useEffect(() => {
+  const handleClearRoute = useCallback(() => {
-    if (routeDebounceRef.current) clearTimeout(routeDebounceRef.current)
+    mapViewRef.current?.clearRoute?.()
-
+  }, [])
-    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 onManeuverClick={handleManeuverClick} />
+      <Panel onClearRoute={handleClearRoute} />
 
       <ContactModal />
 

src/api.js

@@ -321,3 +321,69 @@ 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,
+  }
+
+  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/ManeuverList.jsx

@@ -1,21 +1,21 @@
 import {
   MoveRight, MoveUpRight, MoveDownRight, CornerUpRight, CornerUpLeft,
   MoveLeft, MoveUpLeft, MoveDownLeft, CircleDot, RotateCw,
-  GitMerge, CornerRightDown, CornerRightUp, Navigation
+  GitMerge, CornerRightDown, CornerRightUp, Navigation, Mountain, Map, AlertTriangle
 } from 'lucide-react'
 import { useStore } from '../store'
 
-function formatTime(seconds) {
+function formatDistKm(km) {
-  if (seconds < 60) return `${Math.round(seconds)}s`
+  const miles = km * 0.621371
-  if (seconds < 3600) return `${Math.round(seconds / 60)} min`
+  if (miles < 0.1) return Math.round(miles * 5280) + ' ft'
-  const h = Math.floor(seconds / 3600)
+  return miles.toFixed(1) + ' mi'
-  const m = Math.round((seconds % 3600) / 60)
-  return m > 0 ? `${h}h ${m}m` : `${h}h`
 }
 
-function formatDist(miles) {
+function formatTimeMin(minutes) {
-  if (miles < 0.1) return `${Math.round(miles * 5280)} ft`
+  if (minutes < 60) return Math.round(minutes) + ' min'
-  return `${miles.toFixed(1)} mi`
+  const h = Math.floor(minutes / 60)
+  const m = Math.round(minutes % 60)
+  return m > 0 ? h + 'h ' + m + 'm' : h + 'h'
 }
 
 function ManeuverIcon({ type }) {
@@ -40,8 +40,8 @@ function ManeuverIcon({ type }) {
   }
 }
 
-export default function ManeuverList({ onManeuverClick }) {
+export default function ManeuverList() {
-  const route = useStore((s) => s.route)
+  const routeResult = useStore((s) => s.routeResult)
   const routeLoading = useStore((s) => s.routeLoading)
   const routeError = useStore((s) => s.routeError)
 
@@ -74,67 +74,91 @@ export default function ManeuverList({ onManeuverClick }) {
     )
   }
 
-  if (!route || !route.legs) return null
+  if (!routeResult?.summary) return null
 
-  const totalTime = route.summary?.time || 0
+  const summary = routeResult.summary
-  const totalDist = route.summary?.length || 0
+  const networkFeature = routeResult.route?.features?.find(f => f.properties?.segment_type === 'network')
-
+  const maneuvers = networkFeature?.properties?.maneuvers || []
-  const allManeuvers = []
-  let timeRemaining = totalTime
-
-  for (let legIdx = 0; legIdx < route.legs.length; legIdx++) {
-    const leg = route.legs[legIdx]
-    for (const man of leg.maneuvers || []) {
-      allManeuvers.push({ ...man, _legIndex: legIdx, timeRemaining })
-      timeRemaining -= man.time || 0
-    }
-  }
 
   return (
     <div className="flex flex-col">
-      {/* Route summary */}
+      {/* Total 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)' }}>
-          {formatDist(totalDist)}
+          {formatDistKm(summary.total_distance_km)}
         </span>
         <span className="font-mono text-sm" style={{ color: 'var(--text-secondary)' }}>
-          {formatTime(totalTime)}
+          {formatTimeMin(summary.total_effort_minutes)}
         </span>
       </div>
 
-      {/* Maneuver steps */}
+      {/* Segment breakdown */}
-      <div className="flex flex-col max-h-[50vh] overflow-y-auto">
+      <div className="flex flex-col gap-1 px-2 mb-2">
-        {allManeuvers.map((man, i) => (
+        {summary.wilderness_distance_km > 0 && (
-          <button
+          <div className="flex items-center gap-2 text-sm">
+            <Mountain size={14} style={{ color: '#f97316' }} />
+            <span style={{ color: 'var(--text-secondary)' }}>Wilderness</span>
+            <span className="ml-auto font-mono text-xs" style={{ color: 'var(--text-tertiary)' }}>
+              {formatDistKm(summary.wilderness_distance_km)} / {formatTimeMin(summary.wilderness_effort_minutes)}
+            </span>
+          </div>
+        )}
+        {summary.network_distance_km > 0 && (
+          <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)' }}>
+              {formatDistKm(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 */}
+      {maneuvers.length > 0 && (
+        <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>
+          {maneuvers.map((man, i) => (
+            <div
               key={i}
-            onClick={() => {
+              className="flex items-start gap-2 px-2 py-2 text-left"
-              if (man.begin_shape_index != null && onManeuverClick) onManeuverClick(man)
-            }}
-            className="flex items-start gap-2 px-2 py-2 text-left rounded transition-colors duration-75"
-            style={{ '--hover-bg': 'var(--bg-overlay)' }}
-            onMouseEnter={(e) => e.currentTarget.style.background = 'var(--bg-overlay)'}
-            onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
             >
               <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)' }}>
-                {man.instruction || man.verbal_pre_transition_instruction || 'Continue'}
+                  {man.instruction}
                 </p>
                 <p className="font-mono text-[11px] mt-0.5" style={{ color: 'var(--text-tertiary)' }}>
-                {formatDist(man.length || 0)}
+                  {formatDistKm(man.distance_km)}
-                {man.timeRemaining > 0 && (
-                  <span className="ml-2">{formatTime(man.timeRemaining)} left</span>
-                )}
                 </p>
               </div>
-          </button>
+            </div>
           ))}
         </div>
+      )}
     </div>
   )
 }

src/components/MapView.jsx

@@ -6,9 +6,9 @@ import { layers, namedTheme } from 'protomaps-themes-base'
 import { getTheme, getThemeSprite, getOverlayConfig } from '../themes/registry'
 import { useStore } from '../store'
 import { decodePolyline } from '../utils/decode'
-import { fetchReverse } from '../api'
+import { fetchReverse, requestOffroute } from '../api'
 import { getConfig, hasFeature } from '../config'
-import { MapPin, Navigation, ArrowUpRight, ArrowDownLeft, Plus, Star, Ruler, X } from 'lucide-react'
+import { MapPin, Navigation, ArrowUpRight, ArrowDownLeft, Star, Ruler, X, Trash2 } from 'lucide-react'
 import RadialMenu from './RadialMenu'
 import useContextMenu from '../hooks/useContextMenu'
 import toast from 'react-hot-toast'
@@ -27,6 +27,10 @@ const BOUNDARY_SOURCE = 'boundary-source'
 const BOUNDARY_LAYER = 'boundary-layer'
 const STATE_BOUNDARIES_LAYER = 'state-boundaries-z4-z7'
 const ROUTE_LAYER_PREFIX = 'route-layer-'
+const OFFROUTE_SOURCE = 'offroute-source'
+const OFFROUTE_WILDERNESS_LAYER = 'offroute-wilderness'
+const OFFROUTE_NETWORK_LAYER = 'offroute-network'
+const OFFROUTE_MARKERS_LAYER = 'offroute-markers'
 const HILLSHADE_SOURCE = 'hillshade-dem'
 const HILLSHADE_LAYER = 'hillshade-layer'
 const TRAFFIC_SOURCE = 'traffic-tiles'
@@ -1122,6 +1126,7 @@ function isProtectedLayer(id) {
   return id.startsWith('public-lands') ||
          id.startsWith('boundary') ||
          id.startsWith('route') ||
+         id.startsWith('offroute') ||
          id.startsWith('measure') ||
          id.startsWith('contour') ||
          id.startsWith('usfs') ||
@@ -1327,6 +1332,83 @@ function removeStateBoundaries(map) {
   }
 }
 
+
+/** Clear offroute display layers */
+function clearRouteDisplay(map) {
+  if (!map) return
+  if (map.getLayer(OFFROUTE_WILDERNESS_LAYER)) map.removeLayer(OFFROUTE_WILDERNESS_LAYER)
+  if (map.getLayer(OFFROUTE_NETWORK_LAYER)) map.removeLayer(OFFROUTE_NETWORK_LAYER)
+  if (map.getLayer(OFFROUTE_MARKERS_LAYER)) map.removeLayer(OFFROUTE_MARKERS_LAYER)
+  if (map.getSource(OFFROUTE_SOURCE)) map.removeSource(OFFROUTE_SOURCE)
+}
+
+/** Update offroute display with route GeoJSON */
+function updateRouteDisplay(map, routeGeojson) {
+  if (!map || !routeGeojson) return
+  
+  // Clear existing layers
+  clearRouteDisplay(map)
+  
+  // Add source with route features
+  map.addSource(OFFROUTE_SOURCE, {
+    type: "geojson",
+    data: routeGeojson,
+  })
+  
+  // Find first symbol layer for proper z-ordering
+  let beforeId = undefined
+  for (const layer of map.getStyle().layers) {
+    if (layer.type === "symbol") {
+      beforeId = layer.id
+      break
+    }
+  }
+  
+  // Wilderness segment - dashed orange line
+  map.addLayer({
+    id: OFFROUTE_WILDERNESS_LAYER,
+    type: "line",
+    source: OFFROUTE_SOURCE,
+    filter: ["==", ["get", "segment_type"], "wilderness"],
+    layout: { "line-join": "round", "line-cap": "round" },
+    paint: {
+      "line-color": "#f97316", // orange-500
+      "line-width": 4,
+      "line-opacity": 0.9,
+      "line-dasharray": [8, 4],
+    },
+  }, beforeId)
+  
+  // Network segment - solid blue line
+  map.addLayer({
+    id: OFFROUTE_NETWORK_LAYER,
+    type: "line",
+    source: OFFROUTE_SOURCE,
+    filter: ["==", ["get", "segment_type"], "network"],
+    layout: { "line-join": "round", "line-cap": "round" },
+    paint: {
+      "line-color": "#3b82f6", // blue-500
+      "line-width": 5,
+      "line-opacity": 0.85,
+    },
+  }, beforeId)
+  
+  // Fit bounds to route
+  const features = routeGeojson.features || []
+  const allCoords = features
+    .filter(f => f.geometry?.coordinates)
+    .flatMap(f => f.geometry.coordinates)
+  
+  if (allCoords.length > 0) {
+    const bounds = allCoords.reduce(
+      (b, c) => b.extend(c),
+      new maplibregl.LngLatBounds(allCoords[0], allCoords[0])
+    )
+    const leftPad = 420
+    map.fitBounds(bounds, { padding: { top: 60, bottom: 60, left: leftPad, right: 60 } })
+  }
+}
+
 const MapView = forwardRef(function MapView(_, ref) {
   const mapRef = useRef(null)
   const mapInstance = useRef(null)
@@ -1348,14 +1430,11 @@ const MapView = forwardRef(function MapView(_, ref) {
   const measuringRef = useRef({ active: false, points: [] })
   const measureLabelsRef = useRef([]) // HTML label elements
 
-  const stops = useStore((s) => s.stops)
-  const route = useStore((s) => s.route)
   const theme = useStore((s) => s.theme)
   const selectedPlace = useStore((s) => s.selectedPlace)
   const clickMarker = useStore((s) => s.clickMarker)
   const setClickMarker = useStore((s) => s.setClickMarker)
   const clearClickMarker = useStore((s) => s.clearClickMarker)
-  const gpsOrigin = useStore((s) => s.gpsOrigin)
   const geoPermission = useStore((s) => s.geoPermission)
   const setSheetState = useStore((s) => s.setSheetState)
   const setMapCenter = useStore((s) => s.setMapCenter)
@@ -1580,7 +1659,7 @@ const MapView = forwardRef(function MapView(_, ref) {
 
   const radialWedges = [
     {
-      id: "directions-to",
+      id: "to-here",
       label: "To here",
       icon: ArrowDownLeft,
       onSelect: () => {
@@ -1589,54 +1668,53 @@ const MapView = forwardRef(function MapView(_, ref) {
           lat: radialMenu.lat,
           lon: radialMenu.lon,
           name: radialMenu.centerLabel || radialMenu.lat.toFixed(5) + ", " + radialMenu.lon.toFixed(5),
-          source: "radial_menu",
-          matchCode: null,
         }
-        useStore.getState().startDirections(place)
+        const { routeStart, setRouteEnd, setRouteLoading, setRouteResult, setRouteError, routeMode, boundaryMode } = useStore.getState()
+        setRouteEnd(place)
+        if (routeStart) {
+          setRouteLoading(true)
+          requestOffroute(routeStart, place, routeMode, boundaryMode)
+            .then((data) => {
+              if (data.status === "ok" && data.route) {
+                setRouteResult(data)
+                updateRouteDisplay(mapInstance.current, data.route)
+              } else {
+                setRouteError(data.error || "No route found")
+              }
+            })
+            .catch((e) => setRouteError(e.message))
+            .finally(() => setRouteLoading(false))
+        } else {
+          toast("Set starting point first")
+        }
       },
     },
     {
-      id: "directions-from",
+      id: "from-here",
       label: "From here",
       icon: ArrowUpRight,
       onSelect: () => {
         setRadialMenu((m) => ({ ...m, open: false }))
-        const { clearStops, addStop } = useStore.getState()
-        clearStops()
         const place = {
           lat: radialMenu.lat,
           lon: radialMenu.lon,
           name: radialMenu.centerLabel || radialMenu.lat.toFixed(5) + ", " + radialMenu.lon.toFixed(5),
-          source: "radial_menu",
-          matchCode: null,
         }
-        addStop(place)
+        const { clearRoute, setRouteStart } = useStore.getState()
-        useStore.setState({ gpsOrigin: false })
+        clearRoute()
+        clearRouteDisplay(mapInstance.current)
+        setRouteStart(place)
+        toast("Now tap destination")
       },
     },
     {
-      id: "add-stop",
+      id: "clear-route",
-      label: "Add stop",
+      label: "Clear",
-      icon: Plus,
+      icon: Trash2,
       onSelect: () => {
         setRadialMenu((m) => ({ ...m, open: false }))
-        const { stops, addStop, clearStops } = useStore.getState()
+        useStore.getState().clearRoute()
-        const place = {
+        clearRouteDisplay(mapInstance.current)
-          lat: radialMenu.lat,
-          lon: radialMenu.lon,
-          name: radialMenu.centerLabel || radialMenu.lat.toFixed(5) + ", " + radialMenu.lon.toFixed(5),
-          source: "radial_menu",
-          matchCode: null,
-        }
-        if (stops.length === 0) {
-          addStop(place)
-          useStore.setState({ gpsOrigin: false })
-        } else {
-          const success = addStop(place)
-          if (!success) {
-            toast("Maximum 10 stops reached")
-          }
-        }
       },
     },
     {
@@ -1805,6 +1883,14 @@ const MapView = forwardRef(function MapView(_, ref) {
       updateSatellitePaint(map, currentThemeRef.current)
     },
 
+    // Clear offroute route from map
+    clearRoute() {
+      const map = mapInstance.current
+      if (!map) return
+      clearRouteDisplay(map)
+      useStore.getState().clearRoute()
+    },
+
   }))
 
   // Initialize map
@@ -2464,10 +2550,8 @@ const MapView = forwardRef(function MapView(_, ref) {
       originalPaintValues = {}
 
       // Restore view
-      map.jumpTo({ center, zoom, bearing, pitch })
+      const currentRoute = useStore.getState().routeResult
-      // Re-render route if exists
+      if (currentRoute?.route) updateRouteDisplay(map, currentRoute.route)
-      const currentRoute = useStore.getState().route
-      if (currentRoute) updateRoute(map, currentRoute)
     })
   }, [theme])
 
@@ -2560,168 +2644,6 @@ const MapView = forwardRef(function MapView(_, ref) {
     return () => document.removeEventListener('keydown', handleKeyDown)
   }, [selectedPlace])
 
-  // Update route polyline when route changes
-  useEffect(() => {
-    const map = mapInstance.current
-    if (!map) return
-    if (!map.isStyleLoaded()) {
-      const handler = () => updateRoute(map, route)
-      map.once('idle', handler)
-      return () => map.off('idle', handler)
-    }
-    updateRoute(map, route)
-  }, [route])
-
-  function updateRoute(map, routeData) {
-    if (!map) return
-
-    // Remove old route layers
-    const style = map.getStyle()
-    if (style) {
-      for (const layer of style.layers) {
-        if (layer.id.startsWith(ROUTE_LAYER_PREFIX)) {
-          map.removeLayer(layer.id)
-        }
-      }
-    }
-
-    if (!routeData || !routeData.legs) {
-      if (map.getSource(ROUTE_SOURCE)) {
-        map.getSource(ROUTE_SOURCE).setData({ type: 'FeatureCollection', features: [] })
-      }
-      return
-    }
-
-    const features = []
-    for (let i = 0; i < routeData.legs.length; i++) {
-      const leg = routeData.legs[i]
-      if (!leg.shape) continue
-      const coords = decodePolyline(leg.shape, 6)
-      features.push({
-        type: 'Feature',
-        properties: { legIndex: i },
-        geometry: { type: 'LineString', coordinates: coords },
-      })
-    }
-
-    const source = map.getSource(ROUTE_SOURCE)
-    if (source) {
-      source.setData({ type: 'FeatureCollection', features })
-    } else {
-      map.addSource(ROUTE_SOURCE, {
-        type: 'geojson',
-        data: { type: 'FeatureCollection', features },
-      })
-    }
-
-    // Use CSS variable for route color (read computed value)
-    const routeColor = getComputedStyle(document.documentElement).getPropertyValue('--route-line').trim()
-
-    for (let i = 0; i < features.length; i++) {
-      const layerId = `${ROUTE_LAYER_PREFIX}${i}`
-      if (!map.getLayer(layerId)) {
-        map.addLayer({
-          id: layerId,
-          type: 'line',
-          source: ROUTE_SOURCE,
-          filter: ['==', ['get', 'legIndex'], i],
-          layout: { 'line-join': 'round', 'line-cap': 'round' },
-          paint: {
-            'line-color': routeColor || '#7a9a6b',
-            'line-width': 5,
-            'line-opacity': 0.85,
-          },
-        })
-      }
-    }
-
-    // Fit bounds to route
-    if (features.length > 0) {
-      const allCoords = features.flatMap((f) => f.geometry.coordinates)
-      const bounds = allCoords.reduce(
-        (b, c) => b.extend(c),
-        new maplibregl.LngLatBounds(allCoords[0], allCoords[0])
-      )
-      // Single-panel: no floating detail
-      const leftPad = 420  // 360px panel + margin
-      map.fitBounds(bounds, { padding: { top: 60, bottom: 60, left: leftPad, right: 60 } })
-    }
-  }
-
-  // Update stop markers when stops change
-  useEffect(() => {
-    const map = mapInstance.current
-    if (!map) return
-
-    // Remove old markers
-    for (const m of markersRef.current) m.remove()
-    markersRef.current = []
-    if (popupRef.current) {
-      popupRef.current.remove()
-      popupRef.current = null
-    }
-
-    const hasGpsOrigin = gpsOrigin && geoPermission === 'granted'
-    const indexOffset = hasGpsOrigin ? 1 : 0
-
-    stops.forEach((stop, i) => {
-      const displayIndex = i + indexOffset
-      const effectiveTotal = stops.length + indexOffset
-
-      let pinClass = 'navi-pin navi-pin--intermediate'
-      if (displayIndex === 0) pinClass = 'navi-pin navi-pin--origin'
-      else if (displayIndex === effectiveTotal - 1 && effectiveTotal > 1) pinClass = 'navi-pin navi-pin--destination'
-
-      const label = String.fromCharCode(65 + Math.min(displayIndex, 25))
-
-      const el = document.createElement('div')
-      el.className = pinClass
-      el.textContent = label
-
-      el.addEventListener('click', (e) => {
-        e.stopPropagation()
-        // Flag so the map-level click handler doesn't fire
-        pinClickedRef.current = true
-        if (popupRef.current) popupRef.current.remove()
-        const popup = new maplibregl.Popup({ offset: 20, closeButton: true })
-          .setLngLat([stop.lon, stop.lat])
-          .setHTML(
-            `<div style="font-size:12px;max-width:200px">
-              <strong>${stop.name}</strong>
-              <br/><button id="remove-stop-${stop.id}" style="margin-top:4px;padding:2px 8px;background:var(--status-danger);border:none;border-radius:4px;color:white;cursor:pointer;font-size:11px">Remove</button>
-            </div>`
-          )
-          .addTo(map)
-
-        popup.getElement().querySelector(`#remove-stop-${stop.id}`)?.addEventListener('click', () => {
-          useStore.getState().removeStop(stop.id)
-          popup.remove()
-        })
-        popupRef.current = popup
-      })
-
-      const marker = new maplibregl.Marker({ element: el })
-        .setLngLat([stop.lon, stop.lat])
-        .addTo(map)
-
-      markersRef.current.push(marker)
-    })
-
-    // If stops but no route yet, fit to stops
-    if (stops.length > 0 && !route) {
-      if (stops.length === 1) {
-        map.flyTo({ center: [stops[0].lon, stops[0].lat], zoom: 13 })
-      } else {
-        const bounds = stops.reduce(
-          (b, s) => b.extend([s.lon, s.lat]),
-          new maplibregl.LngLatBounds([stops[0].lon, stops[0].lat], [stops[0].lon, stops[0].lat])
-        )
-        map.fitBounds(bounds, { padding: { top: 60, bottom: 60, left: 420, right: 60 } })
-      }
-    }
-  }, [stops, route, gpsOrigin, geoPermission])
-
-
   // ESC key handler for measurement mode
   useEffect(() => {
     const handleKeyDown = (e) => {

src/components/Panel.jsx

@@ -1,37 +1,40 @@
 import { useRef, useCallback, useEffect, useState } from 'react'
-import { LogIn, LogOut } from 'lucide-react'
+import { LogIn, LogOut, Footprints, Bike, Car, Shield, AlertTriangle, Zap, X, MapPin } from 'lucide-react'
 import ThemePicker from './ThemePicker'
 import { useStore, usePanelState } from '../store'
 import { hasFeature } from '../config'
 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 { requestOptimizedRoute } from '../api'
 
-export default function Panel({ onManeuverClick }) {
+const TRAVEL_MODES = [
+  { 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 clearPendingDestination = useStore((s) => s.clearPendingDestination)
+  const routeStart = useStore((s) => s.routeStart)
-  const stops = useStore((s) => s.stops)
+  const routeEnd = useStore((s) => s.routeEnd)
-  const mode = useStore((s) => s.mode)
+  const routeMode = useStore((s) => s.routeMode)
-  const route = useStore((s) => s.route)
+  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 setRouteMode = useStore((s) => s.setRouteMode)
-  const setStops = useStore((s) => s.setStops)
+  const setBoundaryMode = useStore((s) => s.setBoundaryMode)
-  const setRoute = useStore((s) => s.setRoute)
+  const clearRoute = useStore((s) => s.clearRoute)
-  const setRouteError = useStore((s) => s.setRouteError)
-  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)
@@ -39,15 +42,12 @@ export default function Panel({ onManeuverClick }) {
   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
 
-  // Responsive detection
   useEffect(() => {
     const check = () => setIsMobile(window.innerWidth < 768)
     check()
@@ -55,61 +55,9 @@ export default function Panel({ onManeuverClick }) {
     return () => window.removeEventListener('resize', check)
   }, [])
 
-  // Auth handlers
   const handleLogin = () => { window.location.href = '/outpost.goauthentik.io/start?rd=%2F' }
   const handleLogout = () => { window.location.href = '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
@@ -127,20 +75,20 @@ export default function Panel({ onManeuverClick }) {
     }
   }, [setSheetState])
 
-  const showOptimize = effectiveCount >= 3
+  const handleClearRoute = () => {
+    clearRoute()
+    onClearRoute?.()
+  }
 
-  // Determine what to show based on panel state
   const showPreviewCard = panelState.startsWith('PREVIEW')
-  const showRouteSection = ['ROUTING', 'ROUTE_CALCULATED', 'PREVIEW_ROUTING', 'PREVIEW_CALCULATED'].includes(panelState) || !!pendingDestination
+  const hasRoutePoints = routeStart || routeEnd
-  const showManeuvers = panelState === 'ROUTE_CALCULATED' || panelState === 'PREVIEW_CALCULATED'
+  const showRouteSection = hasRoutePoints || routeResult || routeLoading
-  const showEmptyState = panelState === 'IDLE' && !pendingDestination
+  const showEmptyState = panelState === 'IDLE' && !hasRoutePoints
 
-  // Routes tab content - now state-driven
   const routesContent = (
     <>
       <SearchBar />
 
-      {/* Preview card when place is selected */}
       {showPreviewCard && selectedPlace && (
         <div className="mt-3">
           <PlaceCard
@@ -152,44 +100,82 @@ export default function Panel({ onManeuverClick }) {
         </div>
       )}
 
-      {/* Route section with stops */}
       {showRouteSection && (
-        <>
         <div className="mt-3">
-            <StopList />
+          <div className="flex items-center justify-between mb-2">
-          </div>
+            <span className="text-xs font-medium" style={{ color: 'var(--text-secondary)' }}>
-
+              Route
-          <div className="mt-3 flex flex-col gap-2">
+            </span>
-            <ModeSelector />
-            {showOptimize && (
             <button
-                onClick={handleOptimize}
+              onClick={handleClearRoute}
-                disabled={optimizing || routeLoading}
+              className="p-1 rounded hover:bg-[var(--bg-overlay)]"
-                className="navi-btn-secondary w-full"
+              title="Clear route"
             >
-                {optimizing ? 'Optimizing...' : 'Optimize stop order'}
+              <X size={14} style={{ color: 'var(--text-tertiary)' }} />
             </button>
-            )}
+          </div>
-            {pendingDestination && stops.length === 0 && (
+
+          <div className="flex flex-col gap-1 mb-3 text-xs">
+            <div className="flex items-center gap-2">
+              <MapPin size={12} style={{ color: '#22c55e' }} />
+              <span style={{ color: routeStart ? 'var(--text-primary)' : 'var(--text-tertiary)' }}>
+                {routeStart?.name || 'Right-click to set start'}
+              </span>
+            </div>
+            <div className="flex items-center gap-2">
+              <MapPin size={12} style={{ color: '#ef4444' }} />
+              <span style={{ color: routeEnd ? 'var(--text-primary)' : 'var(--text-tertiary)' }}>
+                {routeEnd?.name || 'Right-click to set destination'}
+              </span>
+            </div>
+          </div>
+
+          <div className="flex gap-1 mb-2">
+            {TRAVEL_MODES.map((m) => {
+              const active = routeMode === m.id
+              return (
                 <button
-                onClick={clearPendingDestination}
+                  key={m.id}
-                className="navi-btn-secondary w-full"
+                  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}
                 >
-                Cancel
+                  <m.Icon size={14} />
+                  <span className="hidden sm:inline">{m.label}</span>
                 </button>
-            )}
+              )
+            })}
           </div>
-        </>
-      )}
 
-      {/* Maneuvers when route is calculated */}
+          <div className="flex gap-1 mb-3">
-      {showManeuvers && (route || routeLoading || routeError) && (
+            {BOUNDARY_MODES.map((m) => {
-        <div className="mt-3">
+              const active = boundaryMode === m.id
-          <ManeuverList onManeuverClick={onManeuverClick} />
+              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>
@@ -203,13 +189,13 @@ export default function Panel({ onManeuverClick }) {
       {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
@@ -231,7 +217,7 @@ export default function Panel({ onManeuverClick }) {
               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} />
@@ -253,7 +239,6 @@ export default function Panel({ onManeuverClick }) {
     </div>
   )
 
-  // Desktop: side panel (now 360px to accommodate PlaceCard)
   if (!isMobile) {
     return (
       <div
@@ -270,7 +255,6 @@ export default function Panel({ onManeuverClick }) {
     )
   }
 
-  // Mobile: bottom sheet
   const sheetHeights = {
     collapsed: 'h-12',
     half: 'h-[45vh]',
@@ -280,13 +264,12 @@ export default function Panel({ onManeuverClick }) {
   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}

src/store.js

@@ -12,27 +12,6 @@ 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'
@@ -44,63 +23,92 @@ export const useStore = create((set, get) => ({
   mapCenter: null, // { lat, lon, zoom }
   setMapCenter: (center) => set({ mapCenter: center }),
 
-  // ── Mode ──
+  // ── Unified Route State ──
-  mode: 'auto', // 'auto' | 'pedestrian' | 'bicycle'
+  // Single routing system - all routes go through /api/offroute
-  setMode: (mode) => set({ mode }),
+  routeStart: null, // { lat, lon, name }
-
+  routeEnd: null, // { lat, lon, name }
-  // ── Route ──
+  routeMode: "foot", // foot | mtb | atv | vehicle
-  route: null, // Valhalla response (trip object)
+  boundaryMode: "strict", // strict | pragmatic | emergency
+  routeResult: null, // Response from /api/offroute
   routeLoading: false,
   routeError: null,
 
-  setRoute: (route) => set({ route, routeError: null }),
+  setRouteStart: (place) => set({ routeStart: place, routeResult: null, routeError: null }),
+  setRouteEnd: (place) => set({ routeEnd: place }),
+  setRouteMode: (mode) => set({ routeMode: mode }),
+  setBoundaryMode: (mode) => set({ boundaryMode: mode }),
+  setRouteResult: (result) => set({ routeResult: result, routeError: null }),
   setRouteLoading: (loading) => set({ routeLoading: loading }),
-  setRouteError: (err) => set({ routeError: err, route: null }),
+  setRouteError: (err) => set({ routeError: err, routeResult: null }),
-  clearRoute: () => set({ route: null, routeError: null }),
+  clearRoute: () => set({
+    routeStart: null,
+    routeEnd: null,
+    routeResult: null,
+    routeError: null
+  }),
 
-  // ── Place detail ──
+  // ── Legacy compatibility (for components not yet migrated) ──
-  selectedPlace: null, // { lat, lon, name, address, type, source, matchCode, raw, mode?, featureId?, featureLayer?, wikidata? }
+  stops: [],
-  clickMarker: null, // { lat, lon, circleRadiusPx } — visual marker for two-click selection
+  gpsOrigin: false,
-  gpsOrigin: true, // whether GPS should be used as origin when available
+  pendingDestination: null,
-  pendingDestination: null, // place waiting for a starting point (GPS-denied Directions flow)
+  route: null,
 
-  setSelectedPlace: (place) => set({ selectedPlace: place }),
+  addStop: (stop) => {
-
+    // Legacy: just set as route end point
-  // Boundary rendering function - set by MapView, called by PlaceCard
+    const { routeStart, setRouteEnd } = get()
-  updateBoundary: null,
+    const place = { lat: stop.lat, lon: stop.lon, name: stop.name }
-  setUpdateBoundary: (fn) => set({ updateBoundary: fn }),
+    if (!routeStart) {
-  clearSelectedPlace: () => set({ selectedPlace: null, clickMarker: null }),
+      set({ routeStart: place, stops: [{ ...stop, id: crypto.randomUUID() }] })
-  setClickMarker: (marker) => set({ clickMarker: marker }),
+    } else {
-  clearClickMarker: () => set({ clickMarker: null }),
+      setRouteEnd(place)
+      set({ stops: [...get().stops, { ...stop, id: crypto.randomUUID() }] })
+    }
+    return true
+  },
+  removeStop: (id) => {
+    const { stops } = get()
+    const newStops = stops.filter((s) => s.id !== id)
+    set({ stops: newStops })
+    if (newStops.length === 0) {
+      get().clearRoute()
+    }
+  },
+  clearStops: () => set({ stops: [], routeStart: null, routeEnd: null }),
+  setStops: (stops) => set({ stops }),
+  reorderStops: (newStops) => set({ stops: newStops }),
   setGpsOrigin: (val) => set({ gpsOrigin: val }),
   setPendingDestination: (place) => set({ pendingDestination: place }),
   clearPendingDestination: () => set({ pendingDestination: null }),
 
   startDirections: (place) => {
-    const { geoPermission, stops, addStop, clearStops } = get()
+    // Legacy: set as destination
-    if (geoPermission === 'granted') {
+    const { routeStart, setRouteEnd, clearRoute } = get()
-      clearStops()
+    clearRoute()
-      addStop({ lat: place.lat, lon: place.lon, name: place.name, source: place.source, matchCode: place.matchCode })
+    set({
-      set({ gpsOrigin: true, selectedPlace: null })
+      routeEnd: { lat: place.lat, lon: place.lon, name: place.name },
-    } else if (stops.length > 0) {
+      stops: [{ ...place, id: crypto.randomUUID() }],
-      const origin = stops[0]
+      selectedPlace: null
-      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 })
-    }
   },
 
+  // ── 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', // 'collapsed' | 'half' | 'full'
+  sheetState: 'half',
   panelOpen: true,
   autocompleteOpen: false,
-  theme: 'dark', // 'dark' | 'light' (resolved value — what's actually applied)
+  theme: 'dark',
-  themeOverride: null, // null | 'dark' | 'light' (manual override, persisted)
+  themeOverride: null,
-  viewMode: (typeof localStorage !== 'undefined' && localStorage.getItem('navi-view-mode')) || 'map', // 'map' | 'satellite' | 'hybrid'
+  viewMode: (typeof localStorage !== 'undefined' && localStorage.getItem('navi-view-mode')) || 'map',
 
   setSheetState: (s) => set({ sheetState: s }),
   setViewMode: (mode) => {
@@ -118,6 +126,7 @@ export const useStore = create((set, get) => ({
       localStorage.removeItem('navi-theme-override')
     }
   },
+
   // ── Auth state ──
   auth: { authenticated: false, username: null, loaded: false },
   setAuth: (auth) => set({ auth: { ...auth, loaded: true } }),
@@ -125,9 +134,9 @@ export const useStore = create((set, get) => ({
   // ── Contacts ──
   contacts: [],
   contactsLoaded: false,
-  activeTab: 'routes', // 'routes' | 'contacts'
+  activeTab: 'routes',
-  editingContact: null, // null=closed, {}=new, {id:N}=edit
+  editingContact: null,
-  pickingLocationFor: null, // form data while user picks location on map
+  pickingLocationFor: null,
 
   setContacts: (c) => set({ contacts: c, contactsLoaded: true }),
   setActiveTab: (tab) => set({ activeTab: tab }),
@@ -138,18 +147,17 @@ 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.route
+    const hasRoute = !!s.routeResult
-    const hasStops = s.stops.length >= 1
+    const hasRoutePoints = !!s.routeStart || !!s.routeEnd
 
     if (hasPreview && hasRoute) return "PREVIEW_CALCULATED"
-    if (hasPreview && hasStops) return "PREVIEW_ROUTING"
+    if (hasPreview && hasRoutePoints) return "PREVIEW_ROUTING"
     if (hasPreview) return "PREVIEW"
     if (hasRoute) return "ROUTE_CALCULATED"
-    if (hasStops) return "ROUTING"
+    if (hasRoutePoints) return "ROUTING"
     return "IDLE"
   })
 }