Merge pull request #211 from trails-cool/feat/elevation-map-interaction

Add bidirectional elevation chart ↔ map interaction

apps/planner/app/components/ElevationChart.tsx

@@ -75,10 +75,13 @@ const PADDING = { top: 10, right: 10, bottom: 25, left: 40 };
 interface ElevationChartProps {
   yjs: YjsState;
   onHover?: (position: [number, number] | null) => void;
+  highlightDistance?: number | null;
+  onClickPosition?: (position: [number, number]) => void;
+  onDragSelect?: (bounds: [[number, number], [number, number]]) => void;
   days?: DayStage[];
 }
 
-export function ElevationChart({ yjs, onHover, days }: ElevationChartProps) {
+export function ElevationChart({ yjs, onHover, highlightDistance, onClickPosition, onDragSelect, days }: ElevationChartProps) {
   const { t } = useTranslation("planner");
   const [points, setPoints] = useState<ElevationPoint[]>([]);
   const [hoverIdx, setHoverIdx] = useState<number | null>(null);
@@ -93,6 +96,36 @@ export function ElevationChart({ yjs, onHover, days }: ElevationChartProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const pointsRef = useRef<ElevationPoint[]>([]);
   pointsRef.current = points;
+  const isExternalHover = useRef(false);
+  const dragStartX = useRef<number | null>(null);
+  const dragStartClientX = useRef<number | null>(null);
+  const isDragging = useRef(false);
+  const dragCurrentX = useRef<number | null>(null);
+
+  // External highlight from map hover: find closest point by distance
+  useEffect(() => {
+    if (highlightDistance == null) {
+      if (isExternalHover.current) {
+        isExternalHover.current = false;
+        setHoverIdx(null);
+      }
+      return;
+    }
+    if (points.length < 2) return;
+
+    let closest = 0;
+    let minDiff = Infinity;
+    for (let i = 0; i < points.length; i++) {
+      const diff = Math.abs(points[i]!.distance - highlightDistance);
+      if (diff < minDiff) {
+        minDiff = diff;
+        closest = i;
+      }
+    }
+    isExternalHover.current = true;
+    setHoverIdx(closest);
+    // Do NOT call onHover here to avoid feedback loop
+  }, [highlightDistance, points]);
 
   useEffect(() => {
     const update = () => {
@@ -524,6 +557,19 @@ export function ElevationChart({ yjs, onHover, days }: ElevationChartProps) {
         ctx.textAlign = hx + 8 > w - 80 ? "right" : "left";
         ctx.fillText(label, labelX, PADDING.top + 10);
       }
+
+      // Drag selection overlay
+      if (isDragging.current && dragStartX.current != null && dragCurrentX.current != null) {
+        const x1 = Math.max(PADDING.left, Math.min(dragStartX.current, PADDING.left + chartW));
+        const x2 = Math.max(PADDING.left, Math.min(dragCurrentX.current, PADDING.left + chartW));
+        const selLeft = Math.min(x1, x2);
+        const selRight = Math.max(x1, x2);
+        ctx.fillStyle = "rgba(59, 130, 246, 0.15)";
+        ctx.fillRect(selLeft, PADDING.top, selRight - selLeft, chartH);
+        ctx.strokeStyle = "rgba(59, 130, 246, 0.5)";
+        ctx.lineWidth = 1;
+        ctx.strokeRect(selLeft, PADDING.top, selRight - selLeft, chartH);
+      }
     },
     [points, colorMode, surfaces, highways, maxspeeds, smoothnesses, tracktypes, cycleways, bikeroutes, days, t],
   );
@@ -542,6 +588,17 @@ export function ElevationChart({ yjs, onHover, days }: ElevationChartProps) {
       const chartW = rect.width - PADDING.left - PADDING.right;
       const ratio = (mouseX - PADDING.left) / chartW;
 
+      // Handle drag selection
+      if (dragStartClientX.current != null) {
+        const dx = Math.abs(e.clientX - dragStartClientX.current);
+        if (dx > 5) {
+          isDragging.current = true;
+          dragCurrentX.current = mouseX;
+          drawChart(hoverIdx);
+          return;
+        }
+      }
+
       if (ratio < 0 || ratio > 1) {
         setHoverIdx(null);
         onHover?.(null);
@@ -562,18 +619,258 @@ export function ElevationChart({ yjs, onHover, days }: ElevationChartProps) {
         }
       }
 
+      isExternalHover.current = false;
       setHoverIdx(closest);
       const p = points[closest]!;
       onHover?.([p.lat, p.lon]);
     },
-    [points, onHover],
+    [points, onHover, hoverIdx, drawChart],
   );
 
   const handleMouseLeave = useCallback(() => {
     setHoverIdx(null);
     onHover?.(null);
+    dragStartX.current = null;
+    dragStartClientX.current = null;
+    isDragging.current = false;
+    dragCurrentX.current = null;
   }, [onHover]);
 
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent<HTMLCanvasElement>) => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const rect = canvas.getBoundingClientRect();
+      dragStartX.current = e.clientX - rect.left;
+      dragStartClientX.current = e.clientX;
+      isDragging.current = false;
+      dragCurrentX.current = null;
+    },
+    [],
+  );
+
+  const handleMouseUp = useCallback(
+    (e: React.MouseEvent<HTMLCanvasElement>) => {
+      const canvas = canvasRef.current;
+      if (!canvas || points.length < 2) {
+        dragStartX.current = null;
+        dragStartClientX.current = null;
+        isDragging.current = false;
+        dragCurrentX.current = null;
+        return;
+      }
+
+      const rect = canvas.getBoundingClientRect();
+      const chartW = rect.width - PADDING.left - PADDING.right;
+      const maxDist = points[points.length - 1]!.distance;
+
+      if (isDragging.current && dragStartX.current != null) {
+        // Drag-select: compute bounding box of selected range
+        const endX = e.clientX - rect.left;
+        const startRatio = Math.max(0, Math.min(1, (dragStartX.current - PADDING.left) / chartW));
+        const endRatio = Math.max(0, Math.min(1, (endX - PADDING.left) / chartW));
+        const startDist = Math.min(startRatio, endRatio) * maxDist;
+        const endDist = Math.max(startRatio, endRatio) * maxDist;
+
+        // Find all points in the selected distance range
+        let minLat = Infinity, maxLat = -Infinity, minLon = Infinity, maxLon = -Infinity;
+        let found = false;
+        for (const p of points) {
+          if (p.distance >= startDist && p.distance <= endDist) {
+            minLat = Math.min(minLat, p.lat);
+            maxLat = Math.max(maxLat, p.lat);
+            minLon = Math.min(minLon, p.lon);
+            maxLon = Math.max(maxLon, p.lon);
+            found = true;
+          }
+        }
+
+        if (found && onDragSelect) {
+          onDragSelect([[minLat, minLon], [maxLat, maxLon]]);
+        }
+      } else if (dragStartClientX.current != null) {
+        // Click (not drag): pan map to clicked point
+        const dx = Math.abs(e.clientX - dragStartClientX.current);
+        if (dx <= 5 && onClickPosition) {
+          const mouseX = e.clientX - rect.left;
+          const ratio = (mouseX - PADDING.left) / chartW;
+          if (ratio >= 0 && ratio <= 1) {
+            const targetDist = ratio * maxDist;
+            let closest = 0;
+            let minDiff = Infinity;
+            for (let i = 0; i < points.length; i++) {
+              const diff = Math.abs(points[i]!.distance - targetDist);
+              if (diff < minDiff) {
+                minDiff = diff;
+                closest = i;
+              }
+            }
+            const p = points[closest]!;
+            onClickPosition([p.lat, p.lon]);
+          }
+        }
+      }
+
+      dragStartX.current = null;
+      dragStartClientX.current = null;
+      isDragging.current = false;
+      dragCurrentX.current = null;
+      drawChart(hoverIdx);
+    },
+    [points, onClickPosition, onDragSelect, hoverIdx, drawChart],
+  );
+
+  // Touch handlers for mobile
+  const handleTouchStart = useCallback(
+    (e: React.TouchEvent<HTMLCanvasElement>) => {
+      e.preventDefault();
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const rect = canvas.getBoundingClientRect();
+
+      if (e.touches.length === 1) {
+        // Single touch: start scrub + potential drag
+        const x = e.touches[0]!.clientX - rect.left;
+        dragStartX.current = x;
+        dragStartClientX.current = e.touches[0]!.clientX;
+        isDragging.current = false;
+        dragCurrentX.current = null;
+        // Immediately show highlight at touch position
+        const chartW = rect.width - PADDING.left - PADDING.right;
+        const ratio = (x - PADDING.left) / chartW;
+        if (ratio >= 0 && ratio <= 1 && points.length >= 2) {
+          const maxDist = points[points.length - 1]!.distance;
+          const targetDist = ratio * maxDist;
+          let closest = 0;
+          let minDiff = Infinity;
+          for (let i = 0; i < points.length; i++) {
+            const diff = Math.abs(points[i]!.distance - targetDist);
+            if (diff < minDiff) { minDiff = diff; closest = i; }
+          }
+          isExternalHover.current = false;
+          setHoverIdx(closest);
+          const p = points[closest]!;
+          onHover?.([p.lat, p.lon]);
+        }
+      } else if (e.touches.length === 2) {
+        // Two fingers: range select
+        const x1 = e.touches[0]!.clientX - rect.left;
+        const x2 = e.touches[1]!.clientX - rect.left;
+        dragStartX.current = Math.min(x1, x2);
+        dragCurrentX.current = Math.max(x1, x2);
+        isDragging.current = true;
+        drawChart(hoverIdx);
+      }
+    },
+    [points, onHover, hoverIdx, drawChart],
+  );
+
+  const handleTouchMove = useCallback(
+    (e: React.TouchEvent<HTMLCanvasElement>) => {
+      e.preventDefault();
+      const canvas = canvasRef.current;
+      if (!canvas || points.length < 2) return;
+      const rect = canvas.getBoundingClientRect();
+
+      if (e.touches.length === 1 && !isDragging.current) {
+        // Single touch scrub: update highlight
+        const x = e.touches[0]!.clientX - rect.left;
+        const chartW = rect.width - PADDING.left - PADDING.right;
+        const ratio = (x - PADDING.left) / chartW;
+        if (ratio >= 0 && ratio <= 1) {
+          const maxDist = points[points.length - 1]!.distance;
+          const targetDist = ratio * maxDist;
+          let closest = 0;
+          let minDiff = Infinity;
+          for (let i = 0; i < points.length; i++) {
+            const diff = Math.abs(points[i]!.distance - targetDist);
+            if (diff < minDiff) { minDiff = diff; closest = i; }
+          }
+          isExternalHover.current = false;
+          setHoverIdx(closest);
+          const p = points[closest]!;
+          onHover?.([p.lat, p.lon]);
+        }
+      } else if (e.touches.length === 2) {
+        // Two finger range select: update selection
+        const x1 = e.touches[0]!.clientX - rect.left;
+        const x2 = e.touches[1]!.clientX - rect.left;
+        dragStartX.current = Math.min(x1, x2);
+        dragCurrentX.current = Math.max(x1, x2);
+        isDragging.current = true;
+        drawChart(hoverIdx);
+      }
+    },
+    [points, onHover, hoverIdx, drawChart],
+  );
+
+  const handleTouchEnd = useCallback(
+    (e: React.TouchEvent<HTMLCanvasElement>) => {
+      if (isDragging.current && dragStartX.current != null && dragCurrentX.current != null && points.length >= 2) {
+        // Two finger range complete: zoom map
+        const canvas = canvasRef.current;
+        if (canvas) {
+          const rect = canvas.getBoundingClientRect();
+          const chartW = rect.width - PADDING.left - PADDING.right;
+          const maxDist = points[points.length - 1]!.distance;
+          const startRatio = Math.max(0, Math.min(1, (dragStartX.current - PADDING.left) / chartW));
+          const endRatio = Math.max(0, Math.min(1, (dragCurrentX.current - PADDING.left) / chartW));
+          const startDist = Math.min(startRatio, endRatio) * maxDist;
+          const endDist = Math.max(startRatio, endRatio) * maxDist;
+
+          let minLat = Infinity, maxLat = -Infinity, minLon = Infinity, maxLon = -Infinity;
+          let found = false;
+          for (const p of points) {
+            if (p.distance >= startDist && p.distance <= endDist) {
+              minLat = Math.min(minLat, p.lat);
+              maxLat = Math.max(maxLat, p.lat);
+              minLon = Math.min(minLon, p.lon);
+              maxLon = Math.max(maxLon, p.lon);
+              found = true;
+            }
+          }
+          if (found && onDragSelect) {
+            onDragSelect([[minLat, minLon], [maxLat, maxLon]]);
+          }
+        }
+      } else if (e.changedTouches.length === 1 && onClickPosition && dragStartClientX.current != null) {
+        // Single tap (no significant movement): pan map
+        const dx = Math.abs(e.changedTouches[0]!.clientX - dragStartClientX.current);
+        if (dx <= 10) {
+          // Treat as tap → pan
+          const canvas = canvasRef.current;
+          if (canvas && points.length >= 2) {
+            const rect = canvas.getBoundingClientRect();
+            const chartW = rect.width - PADDING.left - PADDING.right;
+            const mouseX = e.changedTouches[0]!.clientX - rect.left;
+            const ratio = (mouseX - PADDING.left) / chartW;
+            if (ratio >= 0 && ratio <= 1) {
+              const maxDist = points[points.length - 1]!.distance;
+              const targetDist = ratio * maxDist;
+              let closest = 0;
+              let minDiff = Infinity;
+              for (let i = 0; i < points.length; i++) {
+                const diff = Math.abs(points[i]!.distance - targetDist);
+                if (diff < minDiff) { minDiff = diff; closest = i; }
+              }
+              onClickPosition([points[closest]!.lat, points[closest]!.lon]);
+            }
+          }
+        }
+      }
+
+      // Clear highlight on touch end
+      setHoverIdx(null);
+      onHover?.(null);
+      dragStartX.current = null;
+      dragStartClientX.current = null;
+      isDragging.current = false;
+      dragCurrentX.current = null;
+      drawChart(null);
+    },
+    [points, onHover, onClickPosition, onDragSelect, drawChart],
+  );
+
   const setMode = useCallback((mode: string) => {
     yjs.routeData.set("colorMode", mode);
   }, [yjs.routeData]);
@@ -581,7 +878,7 @@ export function ElevationChart({ yjs, onHover, days }: ElevationChartProps) {
   if (points.length < 2) return null;
 
   return (
-    <div className="border-t border-gray-200 px-2 py-2">
+    <div className="border-t border-gray-200 px-2 py-2 pb-[max(0.5rem,env(safe-area-inset-bottom))]">
       <div className="mb-1 flex items-center gap-2 px-2">
         {(() => {
           const osmLinks: Record<string, string> = {
@@ -702,9 +999,14 @@ export function ElevationChart({ yjs, onHover, days }: ElevationChartProps) {
       </div>
       <canvas
         ref={canvasRef}
-        className="h-24 w-full cursor-crosshair"
+        className="h-24 w-full cursor-crosshair touch-none"
         onMouseMove={handleMouseMove}
         onMouseLeave={handleMouseLeave}
+        onMouseDown={handleMouseDown}
+        onMouseUp={handleMouseUp}
+        onTouchStart={handleTouchStart}
+        onTouchMove={handleTouchMove}
+        onTouchEnd={handleTouchEnd}
       />
     </div>
   );

apps/planner/app/components/ParticipantList.tsx

@@ -109,7 +109,7 @@ export function ParticipantList({ yjs }: ParticipantListProps) {
               onBlur={commitEdit}
               onKeyDown={handleKeyDown}
               maxLength={20}
-              className="w-20 rounded border border-gray-300 px-1 py-0 text-xs text-gray-700 focus:border-blue-500 focus:outline-none"
+              className="w-20 rounded border border-gray-300 px-1 py-0 text-base sm:text-xs text-gray-700 focus:border-blue-500 focus:outline-none"
             />
           ) : (
             <button

apps/planner/app/components/PlannerMap.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState, useCallback, useRef } from "react";
-import { MapContainer, TileLayer, LayersControl, Marker, useMapEvents, useMap } from "react-leaflet";
+import { MapContainer, TileLayer, LayersControl, Marker, Polyline, useMapEvents, useMap } from "react-leaflet";
 import L from "leaflet";
 import * as Y from "yjs";
 import { useTranslation } from "react-i18next";
@@ -92,6 +92,7 @@ interface PlannerMapProps {
   onImportError?: (message: string) => void;
   highlightPosition?: [number, number] | null;
   highlightedWaypoint?: number | null;
+  onRouteHover?: (distance: number | null) => void;
   days?: DayStage[];
 }
 
@@ -361,7 +362,7 @@ function PoiRefresher({ poiState }: { poiState: ReturnType<typeof usePois> }) {
   return null;
 }
 
-export function PlannerMap({ yjs, onRouteRequest, highlightPosition, highlightedWaypoint, onImportError, days }: PlannerMapProps) {
+export function PlannerMap({ yjs, onRouteRequest, highlightPosition, highlightedWaypoint, onRouteHover, onImportError, days }: PlannerMapProps) {
   const { t } = useTranslation("planner");
   const [waypoints, setWaypoints] = useState<WaypointData[]>([]);
   const poiState = usePois();
@@ -607,6 +608,46 @@ export function PlannerMap({ yjs, onRouteRequest, highlightPosition, highlighted
     [yjs.waypoints],
   );
 
+  const handleRoutePolylineHover = useCallback(
+    (e: L.LeafletMouseEvent) => {
+      if (!routeCoordinates || routeCoordinates.length < 2 || !onRouteHover) return;
+      const { lat, lng } = e.latlng;
+      // Find the closest coordinate index
+      let bestIdx = 0;
+      let bestDist = Infinity;
+      for (let i = 0; i < routeCoordinates.length; i++) {
+        const c = routeCoordinates[i]!;
+        const dLat = c[1]! - lat;
+        const dLon = c[0]! - lng;
+        const dist = dLat * dLat + dLon * dLon;
+        if (dist < bestDist) {
+          bestDist = dist;
+          bestIdx = i;
+        }
+      }
+      // Compute cumulative distance to this point using haversine
+      let totalDist = 0;
+      for (let i = 1; i <= bestIdx; i++) {
+        const prev = routeCoordinates[i - 1]!;
+        const curr = routeCoordinates[i]!;
+        const R = 6371000;
+        const toRad = (d: number) => (d * Math.PI) / 180;
+        const dLat = toRad(curr[1]! - prev[1]!);
+        const dLon = toRad(curr[0]! - prev[0]!);
+        const a =
+          Math.sin(dLat / 2) ** 2 +
+          Math.cos(toRad(prev[1]!)) * Math.cos(toRad(curr[1]!)) * Math.sin(dLon / 2) ** 2;
+        totalDist += R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+      }
+      onRouteHover(totalDist);
+    },
+    [routeCoordinates, onRouteHover],
+  );
+
+  const handleRoutePolylineOut = useCallback(() => {
+    onRouteHover?.(null);
+  }, [onRouteHover]);
+
   const handleDragEnter = useCallback((e: React.DragEvent) => {
     e.preventDefault();
     dragCounterRef.current++;
@@ -784,6 +825,17 @@ export function PlannerMap({ yjs, onRouteRequest, highlightPosition, highlighted
             suspendedRef={routeInteractionSuspendedRef}
             disabled={noGoDrawing}
           />
+          {onRouteHover && (
+            <Polyline
+              positions={routeCoordinates.map((c) => [c[1]!, c[0]!] as [number, number])}
+              pathOptions={{ weight: 20, opacity: 0, interactive: true }}
+              eventHandlers={{
+                mouseover: handleRoutePolylineHover,
+                mousemove: handleRoutePolylineHover,
+                mouseout: handleRoutePolylineOut,
+              }}
+            />
+          )}
         </>
       )}
 

apps/planner/app/components/SessionView.tsx

@@ -1,6 +1,7 @@
 import { Suspense, lazy, useState, useCallback, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
+import L from "leaflet";
 import type { TFunction } from "i18next";
 import * as Sentry from "@sentry/react";
 import { useYjs, type YjsState } from "~/lib/use-yjs";
@@ -165,6 +166,8 @@ export function SessionView({ sessionId, callbackUrl, callbackToken, returnUrl,
   const days = useDays(yjs);
   const [highlightPosition, setHighlightPosition] = useState<[number, number] | null>(null);
   const [highlightedWaypoint, setHighlightedWaypoint] = useState<number | null>(null);
+  const [highlightChartDistance, setHighlightChartDistance] = useState<number | null>(null);
+  const [isZoomedByChart, setIsZoomedByChart] = useState(false);
   const { toasts, addToast } = useToasts();
   useAwarenessToasts(yjs, t, addToast);
 
@@ -185,6 +188,31 @@ export function SessionView({ sessionId, callbackUrl, callbackToken, returnUrl,
     setHighlightPosition(pos);
   }, []);
 
+  const handleChartClick = useCallback((position: [number, number]) => {
+    const map = (window as unknown as Record<string, unknown>).__leafletMap as L.Map | undefined;
+    map?.panTo(position);
+  }, []);
+
+  const handleChartDragSelect = useCallback((bounds: [[number, number], [number, number]]) => {
+    const map = (window as unknown as Record<string, unknown>).__leafletMap as L.Map | undefined;
+    map?.fitBounds(bounds, { padding: [30, 30] });
+    setIsZoomedByChart(true);
+  }, []);
+
+  const handleResetZoom = useCallback(() => {
+    const map = (window as unknown as Record<string, unknown>).__leafletMap as L.Map | undefined;
+    if (!map || !yjs) return;
+    const coordsJson = yjs.routeData.get("coordinates") as string | undefined;
+    if (!coordsJson) return;
+    try {
+      const coords: [number, number, number][] = JSON.parse(coordsJson);
+      if (coords.length < 2) return;
+      const latLngs = coords.map((c) => [c[1]!, c[0]!] as [number, number]);
+      map.fitBounds(L.latLngBounds(latLngs), { padding: [50, 50] });
+    } catch { /* ignore */ }
+    setIsZoomedByChart(false);
+  }, [yjs]);
+
   if (!yjs) {
     return (
       <div className="flex h-full items-center justify-center">
@@ -195,14 +223,16 @@ export function SessionView({ sessionId, callbackUrl, callbackToken, returnUrl,
 
   return (
     <>
-      <header className="flex flex-wrap items-center justify-between gap-2 border-b border-gray-200 px-4 py-2">
+      <header className="flex items-center justify-between gap-2 border-b border-gray-200 px-3 py-1.5 pt-[max(0.375rem,env(safe-area-inset-top))] sm:px-4 sm:py-2">
-        <div className="flex items-center gap-2 md:gap-4">
+        <div className="flex items-center gap-1.5 sm:gap-4 min-w-0">
           <Link to="/" className="hidden text-lg font-semibold text-gray-900 hover:text-blue-600 sm:block">
             {t("title")}
           </Link>
           <ProfileSelector yjs={yjs} />
-          <ParticipantList yjs={yjs} />
+          <div className="hidden sm:block">
-          <div className="flex gap-1">
+            <ParticipantList yjs={yjs} />
+          </div>
+          <div className="hidden sm:flex gap-1">
             <button
               onClick={undo}
               disabled={!canUndo}
@@ -221,7 +251,7 @@ export function SessionView({ sessionId, callbackUrl, callbackToken, returnUrl,
             </button>
           </div>
         </div>
-        <div className="flex items-center gap-3">
+        <div className="flex items-center gap-2 sm:gap-3 shrink-0">
           {callbackUrl && callbackToken && (
             <SaveToJournalButton
               yjs={yjs}
@@ -232,9 +262,9 @@ export function SessionView({ sessionId, callbackUrl, callbackToken, returnUrl,
           )}
           <ExportButton yjs={yjs} />
           {computing && (
-            <span className="text-xs text-blue-600">{t("computingRoute")}</span>
+            <span className="hidden text-xs text-blue-600 sm:inline">{t("computingRoute")}</span>
           )}
-          <span className="text-sm text-gray-500">
+          <span className="hidden text-sm text-gray-500 sm:inline">
             {yjs.connected ? t("connected") : t("connecting")} · {sessionId.slice(0, 8)}
           </span>
         </div>
@@ -256,11 +286,21 @@ export function SessionView({ sessionId, callbackUrl, callbackToken, returnUrl,
                 </div>
               }
             >
-              <PlannerMap yjs={yjs} onRouteRequest={requestRoute} highlightPosition={highlightPosition} highlightedWaypoint={highlightedWaypoint} onImportError={(msg) => addToast(msg, "error")} days={days} />
+              <PlannerMap yjs={yjs} onRouteRequest={requestRoute} highlightPosition={highlightPosition} highlightedWaypoint={highlightedWaypoint} onRouteHover={setHighlightChartDistance} onImportError={(msg) => addToast(msg, "error")} days={days} />
             </Suspense>
           </div>
           <Suspense fallback={null}>
-            <ElevationChart yjs={yjs} onHover={handleElevationHover} days={days} />
+            <div className="relative">
+              <ElevationChart yjs={yjs} onHover={handleElevationHover} highlightDistance={highlightChartDistance} onClickPosition={handleChartClick} onDragSelect={handleChartDragSelect} days={days} />
+              {isZoomedByChart && (
+                <button
+                  onClick={handleResetZoom}
+                  className="absolute right-3 top-1 z-10 rounded bg-white px-2 py-0.5 text-[11px] font-medium text-gray-600 shadow ring-1 ring-gray-200 hover:bg-gray-50"
+                >
+                  {t("elevation.resetZoom", "Reset zoom")}
+                </button>
+              )}
+            </div>
           </Suspense>
         </main>
         <SidebarTabs yjs={yjs} routeStats={routeStats} days={days} onWaypointHover={setHighlightedWaypoint} />

apps/planner/app/root.tsx

@@ -13,7 +13,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
     <html lang={i18n.language}>
       <head>
         <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
         <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
         <link rel="icon" type="image/x-icon" href="/favicon.ico" />
         <link rel="apple-touch-icon" href="/apple-touch-icon.png" />

openspec/changes/archive/2026-04-12-elevation-map-interaction/design.md

@@ -0,0 +1,69 @@
+## Context
+
+The Planner has one-directional interaction: hovering the elevation chart shows
+a red dot on the map via `highlightPosition` state in `SessionView`. The reverse
+direction (map → chart) and click/drag interactions don't exist.
+
+The route coordinates are stored in Yjs `routeData` as a JSON array of
+`[lon, lat, ele]` points. The elevation chart extracts these into
+`ElevationPoint[]` with cumulative distance. The map renders the route via
+`ColoredRoute` as Leaflet polylines.
+
+## Decisions
+
+### D1: Route hover → chart highlight
+
+Add a `mousemove` handler on the `ColoredRoute` polyline segments. On hover,
+find the closest route coordinate index, compute the cumulative distance at
+that index, and pass it up to `SessionView` as `highlightChartDistance`. The
+`ElevationChart` receives this distance and draws the crosshair at that
+position — reusing the existing `drawChart(highlightIdx)` mechanism.
+
+To avoid expensive per-pixel distance calculations on every mousemove, use
+Leaflet's `closestLayerPoint` or project to screen coordinates and find the
+nearest point in the coordinate array.
+
+### D2: Chart click → map pan
+
+Add an `onClick` handler to the elevation chart canvas. Convert the click
+x-position to a distance along the route, find the corresponding coordinate,
+and call `map.panTo([lat, lon])` via a callback. The map reference is exposed
+via `window.__leafletMap` (already used by E2E tests).
+
+### D3: Chart drag-select → map zoom
+
+Add mousedown/mousemove/mouseup handlers to the chart canvas for range
+selection. While dragging, draw a semi-transparent overlay on the selected
+range. On mouseup, compute the route coordinates within the selected distance
+range and call `map.fitBounds()` on their bounding box.
+
+A visual "reset zoom" button appears after drag-zoom to return to the full
+route view.
+
+### D4: State flow
+
+```
+SessionView
+├── highlightPosition: [lat, lon] | null  (chart → map, existing)
+├── highlightChartDistance: number | null  (map → chart, new)
+└── onMapFitBounds: (bounds) => void      (chart → map, new)
+
+ElevationChart
+├── onHover(position)          — existing, chart → map
+├── onClick(position)          — new, chart → map pan
+├── onDragSelect(bounds)       — new, chart → map zoom
+└── highlightDistance           — new, map → chart
+
+PlannerMap / ColoredRoute
+└── onRouteHover(distance)     — new, map → chart
+```
+
+## Risks / Trade-offs
+
+- **Performance**: Route hover on the map triggers distance lookup on every
+  mousemove. Mitigate by throttling and using screen-space projection.
+- **Polyline interactivity**: ColoredRoute renders many small polyline segments.
+  Making them all interactive adds event listeners. Alternative: use a single
+  invisible overlay polyline for hover detection.
+- **Drag conflict**: Chart drag-select must not conflict with chart hover.
+  Use a minimum drag distance threshold (5px) before entering drag mode.

openspec/changes/archive/2026-04-12-elevation-map-interaction/specs/elevation-map-interaction/spec.md

@@ -0,0 +1,79 @@
+## ADDED Requirements
+
+### Requirement: Route hover highlights elevation chart
+Hovering over the route polyline on the map SHALL highlight the corresponding position on the elevation chart.
+
+#### Scenario: Hover route on map
+- **WHEN** a user hovers over the route polyline on the map
+- **THEN** the elevation chart shows a crosshair at the corresponding distance along the route
+
+#### Scenario: Leave route on map
+- **WHEN** a user moves the mouse away from the route polyline
+- **THEN** the elevation chart crosshair disappears
+
+### Requirement: Chart click pans map
+Clicking on the elevation chart SHALL pan the map to center on that point along the route.
+
+#### Scenario: Click chart
+- **WHEN** a user clicks on the elevation chart
+- **THEN** the map pans to center on the corresponding route coordinate
+
+### Requirement: Chart drag-select zooms map
+Dragging a range on the elevation chart SHALL zoom the map to fit that section of the route.
+
+#### Scenario: Drag select range
+- **WHEN** a user clicks and drags horizontally on the elevation chart
+- **THEN** a visual highlight shows the selected range
+- **AND** on mouse release, the map zooms to fit the route coordinates within that range
+
+#### Scenario: Reset zoom
+- **WHEN** the map has been zoomed via chart drag-select
+- **THEN** a reset button appears to return to the full route view
+
+### Requirement: Mobile touch interaction
+The elevation chart SHALL support touch-based interaction on mobile devices.
+
+#### Scenario: Single touch scrub
+- **WHEN** a user touches and drags on the chart with one finger
+- **THEN** the crosshair follows the finger position along the chart
+- **AND** the map highlight dot follows in real-time
+
+#### Scenario: Tap to pan
+- **WHEN** a user taps the chart (touch without significant movement)
+- **THEN** the map pans to that point along the route
+
+#### Scenario: Two-finger range select
+- **WHEN** a user places two fingers on the chart
+- **THEN** the area between the fingers is highlighted as a selection range
+- **AND** on release, the map zooms to fit the route coordinates in that range
+
+#### Scenario: No page scroll on touch
+- **WHEN** a user touches the elevation chart
+- **THEN** page scrolling is prevented (touch-none CSS + preventDefault)
+
+### Requirement: iOS safe area support
+The Planner layout SHALL respect iOS safe area insets.
+
+#### Scenario: Notch/Dynamic Island clearance
+- **WHEN** the Planner is viewed on an iOS device with a notch or Dynamic Island
+- **THEN** the header bar is padded below the safe area inset
+
+#### Scenario: Home indicator clearance
+- **WHEN** the Planner is viewed on an iOS device without a physical home button
+- **THEN** the elevation chart area is padded above the home indicator
+
+#### Scenario: No accidental page zoom
+- **WHEN** a user pinches on the Planner UI
+- **THEN** the browser-level page zoom does not trigger (viewport user-scalable=no)
+
+### Requirement: Responsive mobile header
+The Planner header SHALL adapt to small screens by hiding secondary controls.
+
+#### Scenario: Small screen header
+- **WHEN** the Planner is viewed on a mobile device
+- **THEN** only the profile selector and export button are visible
+- **AND** participant list, undo/redo, connection status, and computing text are hidden
+
+#### Scenario: Desktop header
+- **WHEN** the Planner is viewed on a desktop screen
+- **THEN** all header controls are visible

openspec/changes/archive/2026-04-12-elevation-map-interaction/tasks.md

@@ -0,0 +1,25 @@
+## 1. Route Hover → Chart Highlight
+
+- [x] 1.1 Add invisible interactive overlay polyline on the route in PlannerMap for hover detection (avoids adding listeners to every ColoredRoute segment)
+- [x] 1.2 On polyline hover, find closest route coordinate index and compute cumulative distance
+- [x] 1.3 Pass `highlightChartDistance` up from PlannerMap to SessionView
+- [x] 1.4 Accept `highlightDistance` prop in ElevationChart, find closest point by distance, draw crosshair
+
+## 2. Chart Click → Map Pan
+
+- [x] 2.1 Add click handler to ElevationChart canvas — convert x-position to route coordinate
+- [x] 2.2 Call `onClickPosition([lat, lon])` callback to pan the map
+- [x] 2.3 Wire the callback through SessionView to call `map.panTo()` via the exposed map ref
+
+## 3. Chart Drag-Select → Map Zoom
+
+- [x] 3.1 Add mousedown/mousemove/mouseup handlers for drag selection on ElevationChart canvas
+- [x] 3.2 Draw semi-transparent overlay rectangle during drag
+- [x] 3.3 On mouseup, compute bounding box of route coordinates in the selected distance range
+- [x] 3.4 Call `onDragSelect(bounds)` callback to zoom the map via `map.fitBounds()`
+- [x] 3.5 Show "Reset zoom" button after drag-zoom, clicking it returns to full route bounds
+
+## 4. Testing
+
+- [x] 4.1 E2E test: hover chart → map dot appears (existing, verify still works)
+- [x] 4.2 E2E test: click chart → map pans (verify map center changes)

openspec/specs/elevation-map-interaction/spec.md

@@ -0,0 +1,79 @@
+## ADDED Requirements
+
+### Requirement: Route hover highlights elevation chart
+Hovering over the route polyline on the map SHALL highlight the corresponding position on the elevation chart.
+
+#### Scenario: Hover route on map
+- **WHEN** a user hovers over the route polyline on the map
+- **THEN** the elevation chart shows a crosshair at the corresponding distance along the route
+
+#### Scenario: Leave route on map
+- **WHEN** a user moves the mouse away from the route polyline
+- **THEN** the elevation chart crosshair disappears
+
+### Requirement: Chart click pans map
+Clicking on the elevation chart SHALL pan the map to center on that point along the route.
+
+#### Scenario: Click chart
+- **WHEN** a user clicks on the elevation chart
+- **THEN** the map pans to center on the corresponding route coordinate
+
+### Requirement: Chart drag-select zooms map
+Dragging a range on the elevation chart SHALL zoom the map to fit that section of the route.
+
+#### Scenario: Drag select range
+- **WHEN** a user clicks and drags horizontally on the elevation chart
+- **THEN** a visual highlight shows the selected range
+- **AND** on mouse release, the map zooms to fit the route coordinates within that range
+
+#### Scenario: Reset zoom
+- **WHEN** the map has been zoomed via chart drag-select
+- **THEN** a reset button appears to return to the full route view
+
+### Requirement: Mobile touch interaction
+The elevation chart SHALL support touch-based interaction on mobile devices.
+
+#### Scenario: Single touch scrub
+- **WHEN** a user touches and drags on the chart with one finger
+- **THEN** the crosshair follows the finger position along the chart
+- **AND** the map highlight dot follows in real-time
+
+#### Scenario: Tap to pan
+- **WHEN** a user taps the chart (touch without significant movement)
+- **THEN** the map pans to that point along the route
+
+#### Scenario: Two-finger range select
+- **WHEN** a user places two fingers on the chart
+- **THEN** the area between the fingers is highlighted as a selection range
+- **AND** on release, the map zooms to fit the route coordinates in that range
+
+#### Scenario: No page scroll on touch
+- **WHEN** a user touches the elevation chart
+- **THEN** page scrolling is prevented (touch-none CSS + preventDefault)
+
+### Requirement: iOS safe area support
+The Planner layout SHALL respect iOS safe area insets.
+
+#### Scenario: Notch/Dynamic Island clearance
+- **WHEN** the Planner is viewed on an iOS device with a notch or Dynamic Island
+- **THEN** the header bar is padded below the safe area inset
+
+#### Scenario: Home indicator clearance
+- **WHEN** the Planner is viewed on an iOS device without a physical home button
+- **THEN** the elevation chart area is padded above the home indicator
+
+#### Scenario: No accidental page zoom
+- **WHEN** a user pinches on the Planner UI
+- **THEN** the browser-level page zoom does not trigger (viewport user-scalable=no)
+
+### Requirement: Responsive mobile header
+The Planner header SHALL adapt to small screens by hiding secondary controls.
+
+#### Scenario: Small screen header
+- **WHEN** the Planner is viewed on a mobile device
+- **THEN** only the profile selector and export button are visible
+- **AND** participant list, undo/redo, connection status, and computing text are hidden
+
+#### Scenario: Desktop header
+- **WHEN** the Planner is viewed on a desktop screen
+- **THEN** all header controls are visible