fix(ui): kill map flicker for real + keyless HD tiles (CARTO @2x)

Flicker: the memoised source wasn't the whole story — Leaflet fires `moveend`
repeatedly with the SAME centre during the modal slide-in and tile settle, and
each one flipped the label to "Locating…" and re-fired the reverse-geocode.
Dedupe on the rounded centre (5dp ~1m): identical centres are ignored, so no
setState, no re-render, no flicker. Reset the dedupe key when the sheet reopens.

HD: added keyless CARTO Voyager tiles (free, no signup) that serve @2x retina
via Leaflet's {r} token — noticeably sharper than OSM/TomTom basic. resolveTiles
now defaults to CARTO and only uses TomTom when explicitly asked (provider=tomtom),
so a stray EXPO_PUBLIC_TOMTOM_MAP_KEY no longer pins the map to low-res. Paid
@2x keys (MapTiler/Mapbox) still win when set.

12 ui tests (was 11), type-clean.

NOTE: JS-only (no native change) — just reload Metro to pick this up.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: Banyel3

packages/ui/src/MapPicker.tsx

@@ -35,12 +35,14 @@ export function MapPicker({
   const [label, setLabel] = useState<string>('Move the map to your pickup point');
   const [resolving, setResolving] = useState(false);
   const revTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const lastPosted = useRef<string>(''); // dedupe key of the last centre we acted on
 
   // Decide the starting centre once the sheet opens: passed-in point → device
   // GPS → fallback (Zamboanga).
   useEffect(() => {
     if (!visible) {
       setCenter(null);
+      lastPosted.current = '';
       return;
     }
     let cancelled = false;
@@ -78,6 +80,13 @@ export function MapPicker({
       } catch {
         return;
       }
+      // Leaflet emits `moveend` repeatedly with the SAME centre during the
+      // modal slide-in and tile settle. Ignore any message whose centre hasn't
+      // actually moved (rounded to ~1m) — otherwise each one flips the label to
+      // "Locating…" and re-fires the reverse-geocode: the flicker. Round to 5dp.
+      const key = `${c.lat.toFixed(5)},${c.lng.toFixed(5)}`;
+      if (key === lastPosted.current) return;
+      lastPosted.current = key;
       setCoords(c);
       // Debounce the reverse-geocode — one call after the map settles.
       if (revTimer.current) clearTimeout(revTimer.current);

packages/ui/src/leaflet-map.spec.ts

@@ -1,4 +1,5 @@
 import {
+  cartoTiles,
   leafletHtml,
   mapboxTiles,
   mapTilerTiles,
@@ -33,6 +34,13 @@ describe('tile presets', () => {
     expect(t.detectRetina).toBe(true);
   });
 
+  it('carto is keyless and uses the {r} retina token for @2x sharpness', () => {
+    const t = cartoTiles();
+    expect(t.url).toContain('cartocdn.com');
+    expect(t.url).toContain('{r}.png'); // Leaflet fills {r}=@2x on retina
+    expect(t.url).not.toContain('key=');
+  });
+
   it('osm is keyless', () => {
     expect(osmTiles().url).toContain('tile.openstreetmap.org');
   });
@@ -42,22 +50,25 @@ describe('resolveTiles', () => {
   it('honours an explicit provider when its key is present', () => {
     expect(resolveTiles({ provider: 'mapbox', mapboxToken: 't' }).url).toContain('mapbox');
     expect(resolveTiles({ provider: 'maptiler', mapTilerKey: 'k' }).url).toContain('maptiler');
+    expect(resolveTiles({ provider: 'tomtom', tomtomKey: 'tt' }).url).toContain('tomtom');
+    expect(resolveTiles({ provider: 'carto' }).url).toContain('cartocdn');
     expect(resolveTiles({ provider: 'osm' }).url).toContain('openstreetmap');
   });
 
-  it('ignores an explicit provider whose key is missing, falling through', () => {
-    // provider=mapbox but no token → falls to the best key we DO have (tomtom).
-    expect(resolveTiles({ provider: 'mapbox', tomtomKey: 'tt' }).url).toContain('tomtom');
+  it('ignores an explicit provider whose key is missing, falling to CARTO', () => {
+    // provider=mapbox but no token → default path → keyless CARTO (HD).
+    expect(resolveTiles({ provider: 'mapbox' }).url).toContain('cartocdn');
   });
 
-  it('with no provider, prefers the sharpest key available', () => {
+  it('with no provider, prefers a paid @2x key, else keyless CARTO', () => {
     expect(resolveTiles({ mapTilerKey: 'k', tomtomKey: 'tt' }).url).toContain('maptiler');
     expect(resolveTiles({ mapboxToken: 'm', tomtomKey: 'tt' }).url).toContain('mapbox');
-    expect(resolveTiles({ tomtomKey: 'tt' }).url).toContain('tomtom');
+    // A stray TomTom key must NOT pin us to low-res — CARTO wins by default.
+    expect(resolveTiles({ tomtomKey: 'tt' }).url).toContain('cartocdn');
   });
 
-  it('falls back to keyless OSM when nothing is configured', () => {
-    expect(resolveTiles({}).url).toContain('openstreetmap');
+  it('defaults to keyless CARTO (HD) when nothing is configured', () => {
+    expect(resolveTiles({}).url).toContain('cartocdn');
   });
 });
 

packages/ui/src/leaflet-map.ts

@@ -55,7 +55,20 @@ export function tomtomTiles(key: string): MapTiles {
   };
 }
 
-// Keyless OpenStreetMap raster — final fallback when no token/key is set.
+// CARTO Voyager — keyless, free, and serves @2x retina tiles (the `{r}` token
+// Leaflet fills with '@2x' on retina screens). Clean modern style, noticeably
+// sharper than OSM/TomTom basic, with NO signup. The default when no key is set.
+export function cartoTiles(): MapTiles {
+  return {
+    url: 'https://basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png',
+    tileSize: 256,
+    zoomOffset: 0,
+    detectRetina: false, // sharpness comes from the {r}=@2x token, not zoom-doubling
+    attribution: '© CARTO © OpenStreetMap',
+  };
+}
+
+// Keyless OpenStreetMap raster — last resort.
 export function osmTiles(): MapTiles {
   return {
     url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
@@ -75,14 +88,18 @@ export function resolveTiles(cfg: {
   tomtomKey?: string;
 }): MapTiles {
   const p = (cfg.provider ?? '').toLowerCase();
+  // Explicit provider wins (when its key, if any, is present).
   if (p === 'mapbox' && cfg.mapboxToken) return mapboxTiles(cfg.mapboxToken);
   if (p === 'maptiler' && cfg.mapTilerKey) return mapTilerTiles(cfg.mapTilerKey);
+  if (p === 'tomtom' && cfg.tomtomKey) return tomtomTiles(cfg.tomtomKey);
+  if (p === 'carto') return cartoTiles();
   if (p === 'osm') return osmTiles();
-  // No explicit provider: prefer the sharpest key we actually have.
+  // No explicit provider: prefer the sharpest source available. A paid @2x key
+  // beats keyless CARTO; CARTO (keyless @2x) beats TomTom basic — so a stray
+  // TomTom key doesn't pin us to low-res. TomTom is opt-in via provider=tomtom.
   if (cfg.mapTilerKey) return mapTilerTiles(cfg.mapTilerKey);
   if (cfg.mapboxToken) return mapboxTiles(cfg.mapboxToken);
-  if (cfg.tomtomKey) return tomtomTiles(cfg.tomtomKey);
-  return osmTiles();
+  return cartoTiles();
 }
 
 // Build the Leaflet page. mode 'pick' shows a fixed centre pin and posts the