complete overhaul

app/web/static/route.js

@@ -7,9 +7,140 @@ document.addEventListener('DOMContentLoaded', function() {
     var points = [];
     var markers = [];
     var routePolyline = null;
+    var snapLines = [];
+    var originalPoints = [];
+    var lastRouteLatLngs = null; // concatenated
+    var lastRtePoints = []; // for GPX <rtept>
+    var waypointListEl = document.getElementById('waypointList');
+    var nextBanner = document.getElementById('nextManeuverBanner');
+    var voiceToggle = document.getElementById('voiceToggle');
+    var exportModeSel = document.getElementById('exportMode');
+    var roundTripToggle = document.getElementById('roundTripToggle');
+    var roundTripKmInput = document.getElementById('roundTripKm');
+    var roundTripBtn = document.getElementById('roundTripBtn');
+
+    function renderWaypointList() {
+        if (!waypointListEl) return;
+        waypointListEl.innerHTML = '';
+        points.forEach(function(p, idx){
+            var li = document.createElement('li');
+            li.className = 'list-group-item d-flex justify-content-between align-items-center';
+            var label = (idx === 0) ? 'Start' : (idx === points.length - 1 ? 'End' : `WP ${idx}`);
+            var coords = `${p.lat.toFixed(5)}, ${p.lng.toFixed(5)}`;
+            li.innerHTML = `<span>${label}<br><small class="text-secondary">${coords}</small></span>`;
+            var btns = document.createElement('div');
+            btns.className = 'btn-group btn-group-sm';
+            var up = document.createElement('button'); up.className = 'btn btn-outline-secondary'; up.textContent = '↑'; up.disabled = (idx === 0);
+            var down = document.createElement('button'); down.className = 'btn btn-outline-secondary'; down.textContent = '↓'; down.disabled = (idx === points.length - 1);
+            var del = document.createElement('button'); del.className = 'btn btn-outline-danger'; del.textContent = '✕';
+            up.onclick = function(){ if (idx > 0) { swapWaypoints(idx, idx-1); } };
+            down.onclick = function(){ if (idx < points.length - 1) { swapWaypoints(idx, idx+1); } };
+            del.onclick = function(){ removeWaypoint(idx); };
+            btns.appendChild(up); btns.appendChild(down); btns.appendChild(del);
+            li.appendChild(btns);
+            waypointListEl.appendChild(li);
+        });
+    }
+
+    function swapWaypoints(i, j) {
+        var tmp = points[i]; points[i] = points[j]; points[j] = tmp;
+        var tmpo = originalPoints[i]; originalPoints[i] = originalPoints[j]; originalPoints[j] = tmpo;
+        var tmpm = markers[i]; markers[i] = markers[j]; markers[j] = tmpm;
+        renderWaypointList();
+        calculateRoute();
+    }
+
+    function removeWaypoint(i) {
+        if (markers[i]) { map.removeLayer(markers[i]); }
+        markers.splice(i,1);
+        points.splice(i,1);
+        originalPoints.splice(i,1);
+        renderWaypointList();
+        calculateRoute();
+    }
+
+    // Geo helpers for round trip generation
+    function toRad(d){ return d * Math.PI / 180; }
+    function toDeg(r){ return r * 180 / Math.PI; }
+    function destPoint(lat, lon, distanceMeters, bearingDeg) {
+        var R = 6371000; // meters
+        var br = toRad(bearingDeg);
+        var φ1 = toRad(lat), λ1 = toRad(lon);
+        var δ = distanceMeters / R;
+        var sinφ1 = Math.sin(φ1), cosφ1 = Math.cos(φ1);
+        var sinδ = Math.sin(δ), cosδ = Math.cos(δ);
+        var sinφ2 = sinφ1 * cosδ + cosφ1 * sinδ * Math.cos(br);
+        var φ2 = Math.asin(sinφ2);
+        var y = Math.sin(br) * sinδ * cosφ1;
+        var x = cosδ - sinφ1 * sinφ2;
+        var λ2 = λ1 + Math.atan2(y, x);
+        return { lat: toDeg(φ2), lng: ((toDeg(λ2) + 540) % 360) - 180 };
+    }
+
+    function generateRoundTripWaypoints(start) {
+        var km = parseFloat(roundTripKmInput && roundTripKmInput.value ? roundTripKmInput.value : '100');
+        if (isNaN(km) || km < 5) km = 50;
+        // Approximate radius for a loop with 3 intermediate waypoints: perimeter ≈ 4 * chord ≈ distance
+        // Use radius r ≈ distance / (2π)
+        var meters = km * 1000;
+        var r = Math.max(500, meters / (2 * Math.PI));
+        // Bearings spaced around circle with a random offset to vary loops
+        var base = (Math.random() * 360) | 0;
+        var noRepeat = localStorage.getItem('freemoto-roundtrip-norepeat') === '1';
+        var bearings = noRepeat
+            ? [0, 72, 144, 216, 288].map(function(d){ return base + d; }) // 5 WPs ~ evenly spaced to reduce overlap
+            : [45, 165, 285].map(function(d){ return base + d; });
+        var wps = bearings.map(function(b){ return destPoint(start.lat, start.lng, r, b); });
+        // Ensure endpoints list: start -> wps -> start
+        var routePts = [start].concat(wps).concat([start]);
+        return routePts;
+    }
+
+    function createRoundTrip() {
+        if (!roundTripToggle || !roundTripToggle.checked) return;
+        // Determine start point: prefer first existing point, else sourceInput coords
+        var start = null;
+        if (points.length > 0) {
+            start = { lat: points[0].lat, lng: points[0].lng };
+        } else {
+            var sourceInput = document.getElementById('sourceInput');
+            var sLat = parseFloat(sourceInput && sourceInput.dataset.lat);
+            var sLon = parseFloat(sourceInput && sourceInput.dataset.lon);
+            if (!isNaN(sLat) && !isNaN(sLon)) {
+                start = { lat: sLat, lng: sLon };
+            } else {
+                // fallback: map center
+                var c = map.getCenter();
+                start = { lat: c.lat, lng: c.lng };
+            }
+        }
+
+        // Clear existing markers/lines
+        markers.forEach(function(m){ map.removeLayer(m); });
+        markers = [];
+        points = [];
+        originalPoints = [];
+        if (routePolyline) { map.removeLayer(routePolyline); routePolyline = null; }
+        if (snapLines && snapLines.length) { snapLines.forEach(function(sl){ map.removeLayer(sl); }); snapLines = []; }
+
+        var pts = generateRoundTripWaypoints(start);
+        pts.forEach(function(p, idx){
+            var marker = L.marker(p, { draggable: true }).addTo(map);
+            marker.bindPopup(idx === 0 ? 'Start/End' : `WP ${idx}`).openPopup();
+            marker.on('dragend', function(ev){
+                var m = ev.target; var newLL = m.getLatLng(); var i = markers.indexOf(m);
+                if (i >= 0) { points[i] = { lat: newLL.lat, lng: newLL.lng }; originalPoints[i] = { lat: newLL.lat, lng: newLL.lng }; renderWaypointList(); calculateRoute(); }
+            });
+            markers.push(marker);
+            points.push({ lat: p.lat, lng: p.lng });
+            originalPoints.push({ lat: p.lat, lng: p.lng });
+        });
+        renderWaypointList();
+        calculateRoute();
+    }
 
     function calculateRoute() {
-        if (points.length === 2) {
+        if (points.length >= 2) {
             var moto = {};
             // Avoid highways -> lower highway usage weight
             if (avoidHighwaysCheckbox && avoidHighwaysCheckbox.checked) {
@@ -28,13 +159,31 @@ document.addEventListener('DOMContentLoaded', function() {
                 moto.exclude_tolls = true;
             }
 
+            // Twistiness slider from localStorage: 0 (straight/fast) .. 100 (very twisty)
+            try {
+                var twistVal = parseInt(localStorage.getItem('freemoto-twistiness') || '50', 10);
+                if (!isNaN(twistVal)) {
+                    // Map 0..100 to highway preference 1.0..0.0 (inverse)
+                    var hw = Math.max(0, Math.min(1, 1 - (twistVal / 100)));
+                    // If user also checked avoidHighways, keep the stronger effect (min)
+                    moto.use_highways = (typeof moto.use_highways === 'number') ? Math.min(moto.use_highways, hw) : hw;
+                }
+            } catch (_) {}
+
+            // Highway preference slider directly sets use_highways proportionally
+            try {
+                var hwp = parseInt(localStorage.getItem('freemoto-highways') || '50', 10);
+                if (!isNaN(hwp)) {
+                    var hw2 = Math.max(0, Math.min(1, hwp / 100));
+                    // Combine with existing (take max so user can prefer highways even if twistiness low)
+                    moto.use_highways = (typeof moto.use_highways === 'number') ? Math.max(moto.use_highways, hw2) : hw2;
+                }
+            } catch (_) {}
+
             var costing_options = { motorcycle: moto };
 
             var requestBody = {
-                locations: [
-                    { lat: points[0].lat, lon: points[0].lng },
-                    { lat: points[1].lat, lon: points[1].lng }
-                ],
+                locations: points.map(function(p){ return { lat: p.lat, lon: p.lng }; }),
                 costing: "motorcycle",
                 costing_options: costing_options,
                 units: "kilometers"
@@ -50,47 +199,256 @@ document.addEventListener('DOMContentLoaded', function() {
             })
             .then(response => response.json())
             .then(data => {
-                var leg = data.trip && data.trip.legs && data.trip.legs[0];
+                var legs = (data.trip && Array.isArray(data.trip.legs)) ? data.trip.legs : [];
                 var infoCard = document.getElementById('routeInfoCard');
-                if (leg && leg.summary && typeof leg.summary.length === 'number' && typeof leg.summary.time === 'number') {
-                    var distanceKm = (leg.summary.length).toFixed(1); // already in km
-                    var durationMin = Math.round(leg.summary.time / 60); // seconds to minutes
+                // Sum summaries across legs if needed
+                var totalLen = 0, totalTime = 0;
+                legs.forEach(function(leg){
+                    if (leg && leg.summary) {
+                        if (typeof leg.summary.length === 'number') totalLen += leg.summary.length;
+                        if (typeof leg.summary.time === 'number') totalTime += leg.summary.time;
+                    }
+                });
+                if (legs.length > 0) {
+                    var distanceKm = (totalLen).toFixed(1);
+                    var durationMin = Math.round(totalTime / 60);
                     var info = `<strong>Distance:</strong> ${distanceKm} km<br>
                                 <strong>Estimated Time:</strong> ${durationMin} min<br>
                                 <strong>Motorcycle Profile</strong>`;
                     infoCard.innerHTML = info;
                     infoCard.classList.remove('d-none');
+
+                    // Update summary pill in app bar
+                    var pill = document.getElementById('summaryPill');
+                    if (pill) {
+                        pill.textContent = `${distanceKm} km · ${durationMin} min`;
+                        pill.classList.remove('d-none');
+                    }
                 } else {
                     infoCard.innerHTML = `<strong>Route info unavailable.</strong>`;
                     infoCard.classList.remove('d-none');
                     console.log('Valhalla response:', data);
                 }
-                var latlngs = decodePolyline6(leg.shape);
+                // Draw route across all legs
+                var latlngs = [];
+                var legsLatLngs = [];
+                legs.forEach(function(leg){
+                    var lls = decodePolyline6(leg.shape || '');
+                    legsLatLngs.push(lls);
+                    if (latlngs.length && lls.length) {
+                        // avoid duplicating the joint point
+                        latlngs = latlngs.concat(lls.slice(1));
+                    } else {
+                        latlngs = latlngs.concat(lls);
+                    }
+                });
                 if (routePolyline) {
                     map.removeLayer(routePolyline);
                 }
                 routePolyline = L.polyline(latlngs, { color: 'red', weight: 5}).addTo(map);
                 map.fitBounds(routePolyline.getBounds());
+
+                // Build directions bottom sheet and next maneuver banner/voice
+                try {
+                    var directionsSheet = document.getElementById('directionsSheet');
+                    var directionsList = document.getElementById('directionsList');
+                    directionsList.innerHTML = '';
+                    lastRouteLatLngs = latlngs;
+                    lastRtePoints = [];
+                    // Aggregate maneuvers from all legs and render
+                    legs.forEach(function(leg, li){
+                        var maneuvers = leg.maneuvers || [];
+                        var lls = legsLatLngs[li] || [];
+                        maneuvers.forEach(function(m) {
+                            var liEl = document.createElement('li');
+                            liEl.className = 'list-group-item d-flex justify-content-between align-items-center';
+                            var text = m.instruction || m.street_names?.join(', ') || 'Continue';
+                            var meta = [];
+                            if (typeof m.length === 'number') meta.push((m.length).toFixed(1) + ' km');
+                            if (typeof m.time === 'number') meta.push(Math.round(m.time / 60) + ' min');
+                            liEl.innerHTML = `<span>${text}</span><small class="text-secondary ms-2">${meta.join(' · ')}</small>`;
+                            directionsList.appendChild(liEl);
+                            // Store rte point for GPX
+                            var idx = (typeof m.begin_shape_index === 'number') ? m.begin_shape_index : 0;
+                            idx = Math.max(0, Math.min(idx, lls.length - 1));
+                            var coord = lls[idx] || lls[0];
+                            if (coord) {
+                                lastRtePoints.push({ lat: coord[0], lon: coord[1], name: text });
+                            }
+                        });
+                    });
+
+                    // Next maneuver banner (first item)
+                    if (directionsList.children.length > 0) {
+                        var first = directionsList.children[0].querySelector('span');
+                        if (first && nextBanner) {
+                            nextBanner.textContent = first.textContent;
+                            nextBanner.classList.remove('d-none');
+                        }
+                        // Voice prompt
+                        if (voiceToggle && voiceToggle.checked && 'speechSynthesis' in window) {
+                            try {
+                                var utter = new SpeechSynthesisUtterance(first.textContent);
+                                window.speechSynthesis.cancel();
+                                window.speechSynthesis.speak(utter);
+                            } catch (_) {}
+                        }
+                    } else if (nextBanner) {
+                        nextBanner.classList.add('d-none');
+                    }
+                    
+                    if (directionsList.children.length > 0) {
+                        directionsSheet.style.display = 'block';
+                        // default to collapsed to avoid covering full map
+                        directionsSheet.classList.add('collapsed');
+                        // Toggle collapse on handle click
+                        var handle = directionsSheet.querySelector('.handle');
+                        if (handle) {
+                            handle.onclick = function() {
+                                directionsSheet.classList.toggle('collapsed');
+                            };
+
+                            // Drag-to-resize
+                            var sheetCard = directionsSheet.querySelector('.sheet-card');
+                            var sheetBody = directionsSheet.querySelector('.sheet-body');
+                            var dragging = false;
+                            var startY = 0;
+                            var startHeight = 0;
+                            var vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
+
+                            function px(val) { return `${val}px`; }
+                            function clamp(val, min, max) { return Math.max(min, Math.min(max, val)); }
+
+                            function onMove(clientY) {
+                                var dy = startY - clientY; // drag up to expand
+                                var newHeight = clamp(startHeight + dy, 0.28 * vh, 0.8 * vh);
+                                sheetCard.style.maxHeight = px(newHeight);
+                                if (sheetBody) sheetBody.style.maxHeight = px(newHeight - 42);
+                                directionsSheet.classList.remove('collapsed');
+                            }
+
+                            handle.addEventListener('mousedown', function(ev) {
+                                dragging = true;
+                                startY = ev.clientY;
+                                startHeight = sheetCard.getBoundingClientRect().height;
+                                document.body.style.userSelect = 'none';
+                            });
+                            window.addEventListener('mousemove', function(ev) {
+                                if (!dragging) return;
+                                onMove(ev.clientY);
+                            });
+                            window.addEventListener('mouseup', function() {
+                                if (dragging) {
+                                    dragging = false;
+                                    document.body.style.userSelect = '';
+                                }
+                            });
+                            // Touch
+                            handle.addEventListener('touchstart', function(ev) {
+                                dragging = true;
+                                startY = ev.touches[0].clientY;
+                                startHeight = sheetCard.getBoundingClientRect().height;
+                            }, {passive: true});
+                            window.addEventListener('touchmove', function(ev) {
+                                if (!dragging) return;
+                                onMove(ev.touches[0].clientY);
+                            }, {passive: true});
+                            window.addEventListener('touchend', function() { dragging = false; });
+                        }
+                    }
+                } catch (e) {
+                    console.warn('Failed to render directions sheet', e);
+                }
+
+                // Snap-to-roads visualization for all waypoints: snapped points are
+                // first of leg0, then last point of each leg i (for waypoint i)
+                try {
+                    // Clear previous snap lines
+                    if (snapLines && snapLines.length) {
+                        snapLines.forEach(function(sl){ map.removeLayer(sl); });
+                        snapLines = [];
+                    }
+                    var snapped = [];
+                    if (legsLatLngs.length > 0) {
+                        snapped[0] = legsLatLngs[0][0];
+                        for (var i = 1; i < legsLatLngs.length; i++) {
+                            var lseg = legsLatLngs[i];
+                            if (lseg && lseg.length) {
+                                snapped[i] = lseg[lseg.length - 1];
+                            }
+                        }
+                    }
+                    for (var j = 0; j < markers.length && j < snapped.length; j++) {
+                        if (!snapped[j]) continue;
+                        if (originalPoints[j]) {
+                            var sl = L.polyline([originalPoints[j], snapped[j]], { color: '#0d6efd', weight: 2, dashArray: '6,6', opacity: 0.7 });
+                            sl.addTo(map);
+                            snapLines.push(sl);
+                        }
+                        markers[j].setLatLng(snapped[j]);
+                    }
+                } catch (e) { console.warn('Snap-to-roads viz failed', e); }
             });
         }
     }
 
-    map.on('click', function(e) {
-        if (points.length < 2) {
-            var marker = L.marker(e.latlng).addTo(map);
-            markers.push(marker);
-            points.push(e.latlng);
-            marker.bindPopup(points.length === 1 ? "Start" : "End").openPopup();
+    // Visual pulse effect at a latlng
+    function pulseAt(latlng) {
+        try {
+            var pulse = L.circle(latlng, { radius: 5, color: '#0d6efd', weight: 2, opacity: 0.8, fillOpacity: 0.2 });
+            pulse.addTo(map);
+            var steps = 10;
+            var i = 0;
+            var interval = setInterval(function() {
+                i++;
+                pulse.setRadius(5 + i * 20);
+                pulse.setStyle({ opacity: Math.max(0, 0.8 - i * 0.08), fillOpacity: Math.max(0, 0.2 - i * 0.02) });
+                if (i >= steps) {
+                    clearInterval(interval);
+                    map.removeLayer(pulse);
+                }
+            }, 30);
+        } catch (_) {}
+    }
 
-            // Reverse geocode and fill address field
-            if (points.length === 1) {
-                reverseGeocode(e.latlng.lat, e.latlng.lng, 'sourceInput');
-            } else if (points.length === 2) {
-                reverseGeocode(e.latlng.lat, e.latlng.lng, 'destInput');
+    function placePoint(latlng) {
+        if (points.length >= 10) { alert('Maximum of 10 waypoints.'); return; }
+        var marker = L.marker(latlng, { draggable: true }).addTo(map);
+        markers.push(marker);
+        points.push(latlng);
+        originalPoints.push({ lat: latlng.lat, lng: latlng.lng });
+        marker.bindPopup(points.length === 1 ? 'Start' : 'End').openPopup();
+        marker.on('dragend', function(ev){
+            var m = ev.target;
+            var newLL = m.getLatLng();
+            var idx = markers.indexOf(m);
+            if (idx >= 0) {
+                points[idx] = { lat: newLL.lat, lng: newLL.lng };
+                originalPoints[idx] = { lat: newLL.lat, lng: newLL.lng };
+                renderWaypointList();
+                calculateRoute();
             }
+        });
+        pulseAt(latlng);
+        if (points.length === 1) {
+            reverseGeocode(latlng.lat, latlng.lng, 'sourceInput');
+        } else if (points.length === 2) {
+            reverseGeocode(latlng.lat, latlng.lng, 'destInput');
         }
         calculateRoute();
-    });
+        renderWaypointList();
+    }
+
+    function isTouchDevice() {
+        return (window.matchMedia && window.matchMedia('(pointer: coarse)').matches) || ('ontouchstart' in window);
+    }
+
+    var placeHandler = function(e) { placePoint(e.latlng); };
+    if (isTouchDevice()) {
+        map.on('click', placeHandler); // single tap on mobile
+    } else {
+        map.on('dblclick', placeHandler); // double click on desktop
+    }
 
     // Listen for changes on all checkboxes
     [
@@ -156,10 +514,16 @@ document.addEventListener('DOMContentLoaded', function() {
         });
         markers = [];
         points = [];
+        originalPoints = [];
         if (routePolyline) {
             map.removeLayer(routePolyline);
             routePolyline = null;
         }
+        if (snapLines && snapLines.length) {
+            snapLines.forEach(function(sl){ map.removeLayer(sl); });
+            snapLines = [];
+        }
+        if (waypointListEl) waypointListEl.innerHTML = '';
         // Clear address fields
         var sourceInput = document.getElementById('sourceInput');
         var destInput = document.getElementById('destInput');
@@ -169,6 +533,16 @@ document.addEventListener('DOMContentLoaded', function() {
         delete sourceInput.dataset.lon;
         delete destInput.dataset.lat;
         delete destInput.dataset.lon;
+
+        // Hide and clear directions
+        var directionsSheet = document.getElementById('directionsSheet');
+        var directionsList = document.getElementById('directionsList');
+        if (directionsSheet) directionsSheet.style.display = 'none';
+        if (directionsList) directionsList.innerHTML = '';
+
+        // Hide summary pill
+        var pill = document.getElementById('summaryPill');
+        if (pill) pill.classList.add('d-none');
     }
 
     // Make resetMarkers available globally
@@ -208,12 +582,15 @@ document.addEventListener('DOMContentLoaded', function() {
             .then(response => response.json())
             .then(data => {
                 var input = document.getElementById(inputId);
-                if (data && data.address) {
-                    // Use the same format as your autocomplete
-                    input.value = formatAddress(data);
-                } else {
-                    input.value = `${lat}, ${lon}`;
-                }
+                if (!input) return;
+                input.value = (data && (data.display_name || (data.address && (data.address.road || data.address.city)))) || `${lat}, ${lon}`;
+                input.dataset.lat = lat;
+                input.dataset.lon = lon;
+            })
+            .catch(() => {
+                var input = document.getElementById(inputId);
+                if (!input) return;
+                input.value = `${lat}, ${lon}`;
                 input.dataset.lat = lat;
                 input.dataset.lon = lon;
             });
@@ -224,18 +601,35 @@ document.addEventListener('DOMContentLoaded', function() {
             alert("No route to export.");
             return;
         }
-        let gpx =
-`<?xml version="1.0" encoding="UTF-8"?>
-<gpx version="1.1" creator="FreeMoto" xmlns="http://www.topografix.com/GPX/1/1">
-  <trk>
-    <name>FreeMoto Route</name>
-    <trkseg>
-${latlngs.map(pt => `      <trkpt lat="${pt[0]}" lon="${pt[1]}"></trkpt>`).join('\n')}
-    </trkseg>
-  </trk>
-</gpx>`;
+        const now = new Date().toISOString();
+        // Build <rte> using Valhalla maneuvers (snap to their begin shape indices)
+        var rtepts = '';
+        if (Array.isArray(lastRtePoints) && lastRtePoints.length) {
+            rtepts = lastRtePoints.map(function(p){
+                var safe = (p.name || 'Step').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+                return `      <rtept lat="${p.lat}" lon="${p.lon}"><name>${safe}</name></rtept>`;
+            }).join('\n');
+        }
 
-        let blob = new Blob([gpx], {type: "application/gpx+xml"});
+        var mode = exportModeSel ? (exportModeSel.value || 'both') : 'both';
+        var parts = [];
+        parts.push(`<?xml version="1.0" encoding="UTF-8"?>`);
+        parts.push(`<gpx version="1.1" creator="FreeMoto" xmlns="http://www.topografix.com/GPX/1/1">`);
+        parts.push(`  <metadata>\n    <name>FreeMoto Route</name>\n    <time>${now}</time>\n  </metadata>`);
+        if (mode === 'route' || mode === 'both') {
+            parts.push(`  <rte>\n    <name>FreeMoto Directions</name>`);
+            parts.push(rtepts);
+            parts.push(`  </rte>`);
+        }
+        if (mode === 'track' || mode === 'both') {
+            parts.push(`  <trk>\n    <name>FreeMoto Route</name>\n    <type>motorcycle</type>\n    <trkseg>`);
+            parts.push(latlngs.map(pt => `      <trkpt lat="${pt[0]}" lon="${pt[1]}"><time>${now}</time></trkpt>`).join('\n'));
+            parts.push(`    </trkseg>\n  </trk>`);
+        }
+        parts.push(`</gpx>`);
+        let gpx = parts.join('\n');
+
+        let blob = new Blob([gpx], {type: 'application/gpx+xml'});
         let url = URL.createObjectURL(blob);
 
         // iOS workaround: open in new tab instead of triggering download
@@ -244,7 +638,7 @@ ${latlngs.map(pt => `      <trkpt lat="${pt[0]}" lon="${pt[1]}"></trkpt>`).join(
         } else {
             let a = document.createElement('a');
             a.href = url;
-            a.download = "freemoto-route.gpx";
+            a.download = 'freemoto-route.gpx';
             document.body.appendChild(a);
             a.click();
             document.body.removeChild(a);
@@ -252,13 +646,34 @@ ${latlngs.map(pt => `      <trkpt lat="${pt[0]}" lon="${pt[1]}"></trkpt>`).join(
         setTimeout(() => URL.revokeObjectURL(url), 1000);
     }
 
-    document.getElementById('exportGpxBtn').addEventListener('click', function() {
-        if (routePolyline) {
-            // routePolyline.getLatLngs() returns array of LatLng objects
-            let latlngs = routePolyline.getLatLngs().map(ll => [ll.lat, ll.lng]);
-            exportRouteAsGPX(latlngs);
-        } else {
-            alert("No route to export.");
-        }
+    // Bind all GPX export buttons
+    document.querySelectorAll('.export-gpx').forEach(function(btn){
+        btn.addEventListener('click', function() {
+            if (routePolyline) {
+                let latlngs = routePolyline.getLatLngs().map(ll => [ll.lat, ll.lng]);
+                exportRouteAsGPX(latlngs);
+            } else {
+                alert('No route to export.');
+            }
+        });
     });
+
+    // Close directions sheet
+    var closeBtn = document.getElementById('closeDirections');
+    if (closeBtn) {
+        closeBtn.addEventListener('click', function() {
+            var sheet = document.getElementById('directionsSheet');
+            if (sheet) sheet.style.display = 'none';
+        });
+    }
+
+    // Also hide summary pill when sheet closed manually
+    var pill = document.getElementById('summaryPill');
+    if (closeBtn && pill) {
+        closeBtn.addEventListener('click', function(){ pill.classList.add('d-none'); });
+    }
+
+    // Expose recalc for twistiness changes
+    window.recalculateRoute = function(){ calculateRoute(); };
+    window.createRoundTrip = function(){ createRoundTrip(); };
 });