layout update

src/App.svelte

@@ -13,6 +13,7 @@
   let journeyProgress = $state(null);
   let inDetail = $state(false);
   let pendingCountry = $state('');
+  let journeyMode = $state('map');
 
   function onNavigate(s) {
     screen = s;
@@ -56,10 +57,10 @@
       <div class="worldmap-page">
         <div class="map-area">
           {#if journeyActive}
-            <JourneyView onclose={endJourney} onprogress={onJourneyProgress} />
+            <JourneyView onclose={endJourney} onprogress={onJourneyProgress} mode={journeyMode} onmodechange={(m) => journeyMode = m} />
           {:else}
             <WorldMap onCountryClick={handleCountryClick} />
-            <button class="journey-play-btn" onclick={startJourney}>▶</button>
+            <button class="journey-play-btn" onclick={startJourney}>▶ Replay My Trips</button>
           {/if}
         </div>
         <StatsPanel />
@@ -115,14 +116,14 @@
     bottom: 24px;
     right: 24px;
     z-index: 10;
-    width: 44px;
-    height: 44px;
-    border-radius: 50%;
+    padding: 12px 28px;
+    border-radius: 24px;
     border: none;
     background: #8b5cf6;
     color: #fff;
-    font-size: 20px;
-    line-height: 1;
+    font-size: 15px;
+    font-weight: 600;
+    gap: 6px;
     cursor: pointer;
     display: flex;
     align-items: center;

src/lib/layout/TopBar.svelte

@@ -29,8 +29,8 @@
         class="slider"
         style="transform: translateX({screen === 'worldmap' ? 0 : 100}%);"
       ></div>
-      <button onclick={() => onNavigate('worldmap')}>Worldmap</button>
-      <button onclick={() => onNavigate('timeline')}>Timeline</button>
+      <button class:active={screen === 'worldmap'} onclick={() => onNavigate('worldmap')}>Worldmap</button>
+      <button class:active={screen === 'timeline'} onclick={() => onNavigate('timeline')}>Timeline</button>
     </div>
   </div>
 
@@ -103,18 +103,18 @@
     display: flex;
     background: var(--bg-subtle);
     border: 1px solid var(--border);
-    border-radius: 8px;
-    padding: 3px;
+    border-radius: 9999px;
+    padding: 4px;
   }
 
   .slider {
     position: absolute;
-    top: 3px;
-    left: 3px;
-    width: calc(50% - 3px);
-    height: calc(100% - 6px);
-    background: var(--bg);
-    border-radius: 6px;
+    top: 4px;
+    left: 4px;
+    width: calc(50% - 4px);
+    height: calc(100% - 8px);
+    background: var(--accent);
+    border-radius: 9999px;
     box-shadow: 0 1px 4px rgba(0,0,0,0.08);
     transition: transform 0.25s ease;
     pointer-events: none;
@@ -124,15 +124,20 @@
     position: relative;
     z-index: 1;
     flex: 1;
-    padding: 4px 18px;
+    padding: 6px 24px;
     border: none;
     background: none;
     cursor: pointer;
     font-family: var(--sans);
-    font-size: 13px;
+    font-size: 14px;
     font-weight: 300;
     color: var(--text);
     letter-spacing: 0.01em;
+    transition: color 0.2s ease;
+  }
+
+  .segmented button.active {
+    color: #fff;
   }
   .right {
     display: flex;

src/lib/world-map/JourneyView.svelte

@@ -4,7 +4,7 @@
   import { feature } from 'topojson-client';
   import worldData from 'world-atlas/countries-50m.json';
 
-  let { onclose, onprogress } = $props();
+  let { onclose, onprogress, mode = 'map', onmodechange } = $props();
 
   const HOME_CODE = '203';
 
@@ -15,13 +15,16 @@
     { countryName: 'United States', countryCode: '840', date: '2025-01-05', city: 'New York' },
     { countryName: 'Thailand', countryCode: '764', date: '2025-04-18', city: 'Bangkok' },
     { countryName: 'Australia', countryCode: '036', date: '2025-08-22', city: 'Sydney' },
+    { countryName: 'Kenya', countryCode: '404', date: '2021-11-10', city: 'Nairobi' },
+    { countryName: 'South Africa', countryCode: '710', date: '2026-02-05', city: 'Cape Town' },
   ];
 
   const HOME_COLOR = '#8b5cf6';
   const VISITED_COLOR = '#22c55e';
-  const ARC_COLOR = '#000000';
+  const ARC_COLOR = '#666666';
   const PLANE_COLOR = '#7c3aed';
-  const PLANE_PATH = 'M14,0 L4,-3 L0,-7 L-3,-5 L0,-2 L-5,-1 L-9,-5 L-11,-4 L-7,0 L-11,4 L-9,5 L-5,1 L0,2 L-3,5 L0,7 L4,3 Z';
+  const PLANE_IMG = '/airplane.png';
+  const PLANE_SIZE = 28;
   const UNVISITED = '#ffffff';
 
   const TERRITORY_PARENT = {
@@ -40,18 +43,22 @@
   }
 
   let frameEl;
-  let svg, g, pathFn, projection;
+  let svg, gBase, gCountries, gAnim, pathFn, projection;
   let countryPaths;
   let homeFeature;
   let featuresById = {};
+  let countriesData = [];
   let isCancelled = false;
   let isPlaying = $state(false);
   let isFinished = $state(false);
+  let visitedCodes = new Set();
+  let animId = 0;
+  let currentDateLabel = $state('');
 
-  function fitProjection(proj, w, h) {
-    proj.fitSize([w, h], { type: 'Sphere' });
-    const s = proj.scale() * 1.5;
-    proj.scale(s).translate([w / 2, h * 0.70]);
+  function formatDateLabel(dateStr) {
+    const d = new Date(dateStr);
+    const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+    return `${months[d.getMonth()]} ${d.getFullYear()}`;
   }
 
   function computeArc(p1, p2) {
@@ -87,7 +94,11 @@
     return Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;
   }
 
-  function animateStroke(pathEl, tipEl, startOffset, endOffset, duration) {
+  function planeTransform(x, y, angle, flip) {
+    return `translate(${x},${y}) rotate(${angle})${flip ? ' scale(1,-1)' : ''}`;
+  }
+
+  function animateStroke(pathEl, tipEl, startOffset, endOffset, duration, flip = false, maskEl = null) {
     return new Promise((resolve) => {
       const node = pathEl.node();
       if (!node) { resolve(); return; }
@@ -102,15 +113,15 @@
         const offset = startOffset + (endOffset - startOffset) * t;
 
         pathEl.attr('stroke-dashoffset', offset);
+        if (maskEl) maskEl.attr('stroke-dashoffset', offset);
 
         const drawn = totalLength - offset;
         const clamped = Math.max(0, Math.min(drawn, totalLength));
         try {
           const pt = node.getPointAtLength(clamped);
           const angle = getAngleAtLength(node, clamped);
-          tipEl.attr('transform', `translate(${pt.x}, ${pt.y}) rotate(${angle}) scale(1.4)`).attr('opacity', 1);
+          tipEl.attr('transform', planeTransform(pt.x, pt.y, angle, flip)).attr('opacity', 1);
         } catch (e) {
-          // ignore SVG errors
         }
 
         if (t >= 1) {
@@ -128,58 +139,237 @@
     });
   }
 
+  function setupProjection(width, height) {
+    if (mode === 'map') {
+      projection = d3.geoMercator();
+      projection.fitSize([width, height], { type: 'Sphere' });
+      const s = projection.scale() * 1.5;
+      projection.scale(s).translate([width / 2, height * 0.70]);
+    } else {
+      const size = Math.min(width, height) * 0.92;
+      projection = d3.geoOrthographic()
+        .rotate([0, 0])
+        .fitSize([size, size], { type: 'Sphere' })
+        .translate([width / 2, height / 2]);
+    }
+    pathFn = d3.geoPath().projection(projection);
+  }
+
+  function renderMap() {
+    gBase.selectAll('*').remove();
+    gCountries.selectAll('*').remove();
+    gAnim.selectAll('*').remove();
+
+    const fillFn = d => {
+      const id = effId(d);
+      if (id === HOME_CODE) return visitedCodes.has(id) ? VISITED_COLOR : HOME_COLOR;
+      if (visitedCodes.has(id)) return VISITED_COLOR;
+      return UNVISITED;
+    };
+
+    if (mode === 'globe') {
+      gBase.append('path')
+        .attr('class', 'sphere')
+        .datum({ type: 'Sphere' })
+        .attr('d', pathFn)
+        .attr('fill', '#a4c8e0')
+        .attr('stroke', '#8b9bb0')
+        .attr('stroke-width', 1.5);
+
+    }
+
+    countryPaths = gCountries.selectAll('path')
+      .data(countriesData, d => effId(d))
+      .join('path')
+      .attr('d', pathFn)
+      .attr('fill', fillFn)
+      .attr('stroke', mode === 'globe' ? '#4a6a8c' : '#d4d4d4')
+      .attr('stroke-width', mode === 'globe' ? 0.3 : 0.5);
+
+    if (mode === 'map') {
+      renderMicrostates();
+    }
+  }
+
+  function renderMicrostates() {
+    gBase.selectAll('.micro-state-j').remove();
+    const threshold = 4;
+    const fillFn = d => {
+      const id = effId(d);
+      if (id === HOME_CODE) return visitedCodes.has(id) ? VISITED_COLOR : HOME_COLOR;
+      if (visitedCodes.has(id)) return VISITED_COLOR;
+      return UNVISITED;
+    };
+    countryPaths.each(function (d) {
+      if (effId(d) !== d.id) return;
+      const { width, height } = this.getBBox();
+      if (width < threshold && height < threshold) {
+        const [cx, cy] = pathFn.centroid(d);
+        gBase.append('circle')
+          .attr('class', 'micro-state-j')
+          .datum(d)
+          .attr('cx', cx)
+          .attr('cy', cy)
+          .attr('r', 2)
+          .attr('fill', fillFn(d))
+          .attr('stroke', '#94a3b8')
+          .attr('stroke-width', 0.5);
+      }
+    });
+  }
+
+  function redrawBase() {
+    countryPaths.attr('d', pathFn);
+    if (mode === 'globe') {
+      gBase.select('.sphere').attr('d', pathFn);
+    }
+  }
+
+  function rotateGlobeTo(lon, lat, duration = 1500) {
+    return new Promise((resolve) => {
+      if (isCancelled) { resolve(); return; }
+
+      const current = projection.rotate();
+      const from = [-current[0], -current[1]];
+      const to = [lon, lat];
+
+      const interpolate = d3.geoInterpolate(from, to);
+
+      const timer = d3.timer(elapsed => {
+        if (isCancelled) { timer.stop(); resolve(); return true; }
+
+        const t = Math.min(elapsed / duration, 1);
+        const point = interpolate(t);
+        projection.rotate([-point[0], -point[1]]);
+        redrawBase();
+
+        if (t >= 1) {
+          timer.stop();
+          resolve();
+          return true;
+        }
+      });
+    });
+  }
+
+  function animateIncrementalPath(el, tip, pts, duration, flip = false) {
+    return new Promise((resolve) => {
+      const steps = pts.length - 1;
+      const lineGen = d3.line().curve(d3.curveBasis);
+
+      d3.timer(elapsed => {
+        if (isCancelled) { resolve(); return true; }
+
+        const t = Math.min(elapsed / duration, 1);
+        const count = Math.max(2, Math.floor(t * steps) + 1);
+        const visible = pts.slice(0, count);
+
+        if (visible.length >= 2) {
+          el.attr('d', lineGen(visible));
+        }
+
+        if (visible.length > 0) {
+          const last = visible[visible.length - 1];
+          let angle = 0;
+          if (visible.length >= 2) {
+            const prev = visible[visible.length - 2];
+            angle = Math.atan2(last[1] - prev[1], last[0] - prev[0]) * 180 / Math.PI;
+          }
+          tip.attr('transform', planeTransform(last[0], last[1], angle, flip)).attr('opacity', 1);
+        }
+
+        if (t >= 1) {
+          resolve();
+          return true;
+        }
+      });
+    });
+  }
+
+  function animateReprojectingArc(el, tip, geoPts, lineGen, duration, flip = false) {
+    return new Promise((resolve) => {
+      const steps = geoPts.length - 1;
+
+      const timer = d3.timer(elapsed => {
+        if (isCancelled) { timer.stop(); resolve(); return true; }
+
+        const t = Math.min(elapsed / duration, 1);
+        const count = Math.max(2, Math.floor(t * steps) + 1);
+        const visible = geoPts.slice(0, count);
+        const screenPts = [];
+        for (const p of visible) {
+          const pt = projection(p);
+          if (pt) screenPts.push(pt);
+        }
+
+        if (screenPts.length >= 2) {
+          el.attr('d', lineGen(screenPts));
+        }
+
+        if (screenPts.length > 0) {
+          const last = screenPts[screenPts.length - 1];
+          let angle = 0;
+          if (screenPts.length >= 2) {
+            const prev = screenPts[screenPts.length - 2];
+            angle = Math.atan2(last[1] - prev[1], last[0] - prev[0]) * 180 / Math.PI;
+          }
+          tip.attr('transform', planeTransform(last[0], last[1], angle, flip)).attr('opacity', 1);
+        }
+
+        if (t >= 1) {
+          timer.stop();
+          resolve();
+          return true;
+        }
+      });
+    });
+  }
+
   async function animateTrip(destCode, destFeature) {
     if (!homeFeature || !destFeature) return;
 
     const homeCentroid = d3.geoCentroid(homeFeature);
     const destCentroid = d3.geoCentroid(destFeature);
 
+    if (mode === 'map') {
+      await animateMapTrip(homeCentroid, destCentroid, destCode);
+    } else {
+      await animateGlobeTrip(homeCentroid, destCentroid, destCode);
+    }
+  }
+
+  async function animateMapTrip(homeCentroid, destCentroid, destCode) {
     const pts = computeArc(homeCentroid, destCentroid);
     if (pts.length < 2) return;
 
-    const lineGen = d3.line().curve(d3.curveBasis);
-    const pathData = lineGen(pts);
+    const outFlip = pts[pts.length - 1][0] < pts[0][0];
 
-    if (!pathData) return;
-
-    function createArc(pathData) {
-      const el = g.append('path')
-        .attr('d', pathData)
+    const outEl = gAnim.append('path')
       .attr('fill', 'none')
       .attr('stroke', ARC_COLOR)
       .attr('stroke-width', 2.5)
       .attr('stroke-opacity', 0.8)
-        .attr('stroke-linecap', 'round');
-      const tip = g.append('path')
-        .attr('d', PLANE_PATH)
-        .attr('fill', PLANE_COLOR)
+      .attr('stroke-linecap', 'round')
+      .attr('stroke-dasharray', '10, 6');
+    const outTip = gAnim.append('image')
+      .attr('href', PLANE_IMG)
+      .attr('width', PLANE_SIZE)
+      .attr('height', PLANE_SIZE)
+      .attr('x', -PLANE_SIZE / 2)
+      .attr('y', -PLANE_SIZE / 2)
+      .attr('preserveAspectRatio', 'xMidYMid meet')
       .attr('opacity', 0);
-      return { el, tip };
-    }
 
-    // --- Outbound: home -> dest ---
-    let { el: outEl, tip: outTip } = createArc(pathData);
-    const outLen = outEl.node().getTotalLength();
-    outEl.attr('stroke-dasharray', outLen).attr('stroke-dashoffset', outLen);
-
-    const homeDot = g.append('circle')
-      .attr('r', 4)
-      .attr('fill', PLANE_COLOR)
-      .attr('cx', pts[0][0])
-      .attr('cy', pts[0][1])
-      .attr('opacity', 1);
-
-    await animateStroke(outEl, outTip, outLen, 0, 2500);
+    await animateIncrementalPath(outEl, outTip, pts, 2500, outFlip);
     if (isCancelled) return;
 
     outEl.remove();
     outTip.remove();
-    homeDot.remove();
 
-    // Color the destination country
     const targetPath = countryPaths.filter(d => effId(d) === destCode);
     targetPath.transition().duration(500).attr('fill', VISITED_COLOR);
-    g.selectAll('.micro-state-j')
+    visitedCodes.add(destCode);
+    gBase.selectAll('.micro-state-j')
       .filter(d => effId(d) === destCode)
       .transition().duration(500)
       .attr('fill', VISITED_COLOR);
@@ -187,42 +377,148 @@
     await delay(800);
     if (isCancelled) return;
 
-    // --- Return: dest -> home ---
     const revPts = [...pts].reverse();
-    const revData = d3.line().curve(d3.curveBasis)(revPts);
-    let { el: retEl, tip: retTip } = createArc(revData);
-    const retLen = retEl.node().getTotalLength();
-    retEl.attr('stroke-dasharray', retLen).attr('stroke-dashoffset', retLen);
+    const retFlip = revPts[revPts.length - 1][0] < revPts[0][0];
 
-    const destDot = g.append('circle')
-      .attr('r', 4)
-      .attr('fill', PLANE_COLOR)
-      .attr('cx', revPts[0][0])
-      .attr('cy', revPts[0][1])
-      .attr('opacity', 1);
+    const retEl = gAnim.append('path')
+      .attr('fill', 'none')
+      .attr('stroke', ARC_COLOR)
+      .attr('stroke-width', 2.5)
+      .attr('stroke-opacity', 0.8)
+      .attr('stroke-linecap', 'round')
+      .attr('stroke-dasharray', '10, 6');
+    const retTip = gAnim.append('image')
+      .attr('href', PLANE_IMG)
+      .attr('width', PLANE_SIZE)
+      .attr('height', PLANE_SIZE)
+      .attr('x', -PLANE_SIZE / 2)
+      .attr('y', -PLANE_SIZE / 2)
+      .attr('preserveAspectRatio', 'xMidYMid meet')
+      .attr('opacity', 0);
 
-    await animateStroke(retEl, retTip, retLen, 0, 2200);
+    await animateIncrementalPath(retEl, retTip, revPts, 2200, retFlip);
+    if (isCancelled) return;
+
+    retEl.remove();
+    retTip.remove();
+
+    await delay(300);
+  }
+
+  async function animateGlobeTrip(homeCentroid, destCentroid, destCode) {
+    const interp = d3.geoInterpolate(homeCentroid, destCentroid);
+    const steps = 80;
+    const geoPts = [];
+    for (let i = 0; i <= steps; i++) {
+      geoPts.push(interp(i / steps));
+    }
+
+    const dist = d3.geoDistance(homeCentroid, destCentroid);
+    const dur = Math.round(1500 + dist * 2500);
+
+    const lineGen = d3.line().curve(d3.curveBasis);
+
+    const outEl = gAnim.append('path')
+      .attr('fill', 'none')
+      .attr('stroke', ARC_COLOR)
+      .attr('stroke-width', 2.5)
+      .attr('stroke-opacity', 0.8)
+      .attr('stroke-linecap', 'round')
+      .attr('stroke-dasharray', '10, 6');
+    const outTip = gAnim.append('image')
+      .attr('href', PLANE_IMG)
+      .attr('width', PLANE_SIZE)
+      .attr('height', PLANE_SIZE)
+      .attr('x', -PLANE_SIZE / 2)
+      .attr('y', -PLANE_SIZE / 2)
+      .attr('preserveAspectRatio', 'xMidYMid meet')
+      .attr('opacity', 0);
+
+    const outGcs = geoPts.map(p => projection(p)).filter(Boolean);
+    const outFlipGlobe = outGcs.length >= 2 && outGcs[outGcs.length - 1][0] < outGcs[0][0];
+
+    await Promise.all([
+      rotateGlobeTo(destCentroid[0], destCentroid[1], dur),
+      animateReprojectingArc(outEl, outTip, geoPts, lineGen, dur, outFlipGlobe)
+    ]);
+    if (isCancelled) return;
+
+    outEl.remove();
+    outTip.remove();
+
+    const targetPath = countryPaths.filter(d => effId(d) === destCode);
+    targetPath.transition().duration(500).attr('fill', VISITED_COLOR);
+    visitedCodes.add(destCode);
+
+    await delay(600);
+    if (isCancelled) return;
+
+    const revGeoPts = [...geoPts].reverse();
+
+    const retEl = gAnim.append('path')
+      .attr('fill', 'none')
+      .attr('stroke', ARC_COLOR)
+      .attr('stroke-width', 2.5)
+      .attr('stroke-opacity', 0.8)
+      .attr('stroke-linecap', 'round')
+      .attr('stroke-dasharray', '10, 6');
+    const retTip = gAnim.append('image')
+      .attr('href', PLANE_IMG)
+      .attr('width', PLANE_SIZE)
+      .attr('height', PLANE_SIZE)
+      .attr('x', -PLANE_SIZE / 2)
+      .attr('y', -PLANE_SIZE / 2)
+      .attr('preserveAspectRatio', 'xMidYMid meet')
+      .attr('opacity', 0);
+
+    const retGcs = revGeoPts.map(p => projection(p)).filter(Boolean);
+    const retFlipGlobe = retGcs.length >= 2 && retGcs[retGcs.length - 1][0] < retGcs[0][0];
+
+    await Promise.all([
+      rotateGlobeTo(homeCentroid[0], homeCentroid[1], dur),
+      animateReprojectingArc(retEl, retTip, revGeoPts, lineGen, dur, retFlipGlobe)
+    ]);
     if (isCancelled) return;
 
     retEl.remove();
     retTip.remove();
-    destDot.remove();
 
     await delay(300);
   }
 
   async function startJourney() {
+    const myId = ++animId;
     isPlaying = true;
     isFinished = false;
     isCancelled = false;
+    visitedCodes = new Set();
+
+    const width = frameEl.clientWidth;
+    const height = frameEl.clientHeight;
+
+    svg.selectAll('*').remove();
+    gBase = svg.append('g');
+    gCountries = svg.append('g');
+    gAnim = svg.append('g');
+
+    setupProjection(width, height);
+
+    if (mode === 'globe' && homeFeature) {
+      const c = d3.geoCentroid(homeFeature);
+      projection.rotate([-c[0], -c[1]]);
+      pathFn = d3.geoPath().projection(projection);
+    }
+
+    renderMap();
 
     const trips = MOCK_TRIPS;
     const total = trips.length;
 
     for (let i = 0; i < total; i++) {
-      if (isCancelled) break;
+      if (isCancelled || myId !== animId) break;
 
       const trip = trips[i];
+      currentDateLabel = formatDateLabel(trip.date);
       const destFeature = featuresById[trip.countryCode];
       if (!destFeature) continue;
 
@@ -232,11 +528,11 @@
       await animateTrip(trip.countryCode, destFeature);
     }
 
-    if (!isCancelled) {
+    if (!isCancelled && myId === animId) {
       isFinished = true;
       isPlaying = false;
       if (onprogress) onprogress({ index: trips.length, total: trips.length, label: 'Journey complete!' });
-    } else {
+    } else if (myId === animId) {
       isPlaying = false;
     }
   }
@@ -246,23 +542,37 @@
     isPlaying = false;
   }
 
+  function replay() {
+    stopJourney();
+    setTimeout(() => startJourney(), 100);
+  }
+
+  function switchMode(target) {
+    if (target === mode) return;
+    onmodechange?.(target);
+    stopJourney();
+    setTimeout(() => startJourney(), 100);
+  }
+
+  function close() {
+    stopJourney();
+    onclose?.();
+  }
+
   onMount(() => {
     const width = frameEl.clientWidth;
     const height = frameEl.clientHeight;
 
-    projection = d3.geoMercator();
-    fitProjection(projection, width, height);
+    setupProjection(width, height);
 
-    pathFn = d3.geoPath().projection(projection);
-
-    const countries = feature(worldData, worldData.objects.countries)
+    countriesData = feature(worldData, worldData.objects.countries)
       .features.filter(f => (f.id || f.properties.name === 'Kosovo') && f.id !== '010');
 
-    countries.forEach(f => {
+    countriesData.forEach(f => {
       if (!f.id) f.id = 'XK';
     });
 
-    for (const f of countries) {
+    for (const f of countriesData) {
       featuresById[effId(f)] = f;
     }
 
@@ -274,46 +584,32 @@
       .attr('height', height)
       .style('cursor', 'default');
 
-    g = svg.append('g');
+    gBase = svg.append('g');
+    gCountries = svg.append('g');
+    gAnim = svg.append('g');
 
-    countryPaths = g.selectAll('path')
-      .data(countries)
-      .join('path')
-      .attr('d', pathFn)
-      .attr('fill', d => effId(d) === HOME_CODE ? HOME_COLOR : UNVISITED)
-      .attr('stroke', '#d4d4d4')
-      .attr('stroke-width', 0.5);
-
-    function renderMicrostates() {
-      g.selectAll('.micro-state-j').remove();
-      const threshold = 4;
-      countryPaths.each(function (d) {
-        if (effId(d) !== d.id) return;
-        const { width, height } = this.getBBox();
-        if (width < threshold && height < threshold) {
-          const [cx, cy] = pathFn.centroid(d);
-          g.append('circle')
-            .attr('class', 'micro-state-j')
-            .datum(d)
-            .attr('cx', cx)
-            .attr('cy', cy)
-            .attr('r', 2)
-            .attr('fill', effId(d) === HOME_CODE ? HOME_COLOR : UNVISITED)
-            .attr('stroke', '#94a3b8')
-            .attr('stroke-width', 0.5);
-        }
-      });
-    }
-
-    renderMicrostates();
+    renderMap();
 
     const observer = new ResizeObserver((entries) => {
       for (const entry of entries) {
         const { width, height } = entry.contentRect;
         svg.attr('width', width).attr('height', height);
-        fitProjection(projection, width, height);
-        countryPaths.attr('d', pathFn);
-        renderMicrostates();
+        const prevProj = projection;
+        if (mode === 'map') {
+          projection = d3.geoMercator();
+          projection.fitSize([width, height], { type: 'Sphere' });
+          const s = projection.scale() * 1.5;
+          projection.scale(s).translate([width / 2, height * 0.70]);
+        } else {
+          const size = Math.min(width, height) * 0.92;
+          projection = d3.geoOrthographic()
+            .rotate(prevProj.rotate())
+            .fitSize([size, size], { type: 'Sphere' })
+            .translate([width / 2, height / 2]);
+        }
+        pathFn = d3.geoPath().projection(projection);
+        redrawBase();
+        if (mode === 'map') renderMicrostates();
       }
     });
 
@@ -329,12 +625,26 @@
   });
 </script>
 
-<div bind:this={frameEl} class="journey-frame">
-  <button class="close-btn" onclick={() => { stopJourney(); onclose?.(); }}>✕</button>
+<div bind:this={frameEl} class="journey-frame" class:globe-mode={mode === 'globe'}>
+  <div class="top-label">
     {#if isFinished}
-    <div class="done-badge">Journey complete!</div>
+      Journey complete!
+    {:else if currentDateLabel}
+      {currentDateLabel}
     {/if}
   </div>
+  <div class="control-bar">
+    <button class="control-btn" onclick={replay}>
+      ⟳ Replay
+    </button>
+    <button class="control-btn" onclick={() => switchMode(mode === 'map' ? 'globe' : 'map')}>
+      {mode === 'map' ? 'Globe animation' : 'Map animation'}
+    </button>
+    <button class="control-btn" onclick={close}>
+      ✕ Back to Journaling
+    </button>
+  </div>
+</div>
 
 <style>
   .journey-frame {
@@ -345,47 +655,59 @@
     background: #a4c8e0;
   }
 
+  .journey-frame.globe-mode {
+    background: #ffffff;
+  }
+
   .journey-frame :global(svg) {
     display: block;
   }
 
-  .close-btn {
+  .top-label {
     position: absolute;
-    top: 12px;
-    right: 12px;
-    z-index: 10;
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    border: none;
-    background: rgba(0,0,0,0.55);
-    color: #fff;
-    font-size: 18px;
-    line-height: 1;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: background 0.15s ease;
-  }
-
-  .close-btn:hover {
-    background: rgba(0,0,0,0.75);
-  }
-
-  .done-badge {
-    position: absolute;
-    bottom: 24px;
-    left: 50%;
-    transform: translateX(-50%);
+    top: 16px;
+    left: 16px;
     z-index: 10;
     background: rgba(0,0,0,0.65);
     color: #fff;
     font-family: var(--heading, sans-serif);
     font-size: 16px;
+    font-weight: 600;
     padding: 10px 24px;
     border-radius: 24px;
     white-space: nowrap;
     letter-spacing: 0.04em;
+    min-width: 200px;
+    text-align: center;
+    box-sizing: border-box;
+  }
+
+  .control-bar {
+    position: absolute;
+    bottom: 24px;
+    right: 24px;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    align-items: flex-end;
+  }
+
+  .control-btn {
+    padding: 10px 24px;
+    border: none;
+    border-radius: 24px;
+    background: #8b5cf6;
+    color: #fff;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.15s ease;
+    white-space: nowrap;
+    font-family: inherit;
+  }
+
+  .control-btn:hover {
+    background: #7c3aed;
   }
 </style>

src/lib/world-map/StatsPanel.svelte

@@ -1,18 +1,46 @@
 <script>
   import { CONTINENTS, getContinent, continentTotals } from './continents.js';
-  import { getSelected } from '../layout/selection.svelte.js';
+  import { getSelected, getTotalCount } from '../layout/selection.svelte.js';
+  import worldData from 'world-atlas/countries-50m.json';
 
-  let hoveredSeg = $state(null);
+  let collapsed = $state(false);
 
   const continentColors = {
-    'Europe': '#6366f1',
-    'Asia': '#f43f5e',
-    'Africa': '#fb923c',
-    'N. America': '#06b6d4',
-    'S. America': '#f59e0b',
-    'Oceania': '#8b5cf6'
+    'Europe': '#3b82f6',
+    'Asia': '#ef4444',
+    'Africa': '#f97316',
+    'N. America': '#ec4899',
+    'S. America': '#eab308',
+    'Oceania': '#a16207'
   };
 
+  const countryNameById = $derived.by(() => {
+    const map = { XK: 'Kosovo' };
+    for (const g of worldData.objects.countries.geometries) {
+      map[g.id] = g.properties?.name || g.id;
+    }
+    return map;
+  });
+
+  let visitedCountries = $derived(
+    [...getSelected()].map(id => countryNameById[id]).filter(Boolean).sort()
+  );
+
+  let visitedByContinent = $derived.by(() => {
+    const map = {};
+    for (const id of getSelected()) {
+      const cont = getContinent(id);
+      if (cont) {
+        if (!map[cont]) map[cont] = [];
+        map[cont].push(countryNameById[id] || id);
+      }
+    }
+    for (const cont of Object.keys(map)) {
+      map[cont].sort();
+    }
+    return map;
+  });
+
   let counts = $derived.by(() => {
     const c = {};
     for (const cont of CONTINENTS) c[cont] = 0;
@@ -36,9 +64,11 @@
       if (angle > 0) {
         const startDeg = deg;
         const endDeg = deg + angle;
+        const midDeg = (startDeg + endDeg) / 2;
+        const rad = (midDeg - 90) * Math.PI / 180;
         const sr = (startDeg - 90) * Math.PI / 180;
         const er = (endDeg - 90) * Math.PI / 180;
-        const cx = 50, cy = 50, outerR = 44, innerR = 22;
+        const cx = 90, cy = 90, outerR = 65, innerR = 30;
         const x1 = cx + outerR * Math.cos(sr);
         const y1 = cy + outerR * Math.sin(sr);
         const x2 = cx + outerR * Math.cos(er);
@@ -49,7 +79,9 @@
         const y4 = cy + innerR * Math.sin(sr);
         const largeArc = angle > 180 ? 1 : 0;
         const path = `M ${x1} ${y1} A ${outerR} ${outerR} 0 ${largeArc} 1 ${x2} ${y2} L ${x3} ${y3} A ${innerR} ${innerR} 0 ${largeArc} 0 ${x4} ${y4} Z`;
-        segs.push({ cont, color: continentColors[cont], path, angle });
+        const lx = cx + 82 * Math.cos(rad);
+        const ly = cy + 82 * Math.sin(rad);
+        segs.push({ cont, color: continentColors[cont], path, lx, ly, angle });
         deg += angle;
       }
     }
@@ -57,199 +89,296 @@
   });
 </script>
 
-<div class="card">
-  <!-- count -->
-  <div class="stat-block">
-    <span class="big-num">{total}</span>
-    <span class="stat-sub">countries visited</span>
+<div class="panel" class:collapsed>
+  <button class="collapse-btn" onclick={() => collapsed = !collapsed} data-tip={collapsed ? 'see statistics' : 'close statistics'}>
+    {collapsed ? '◀' : '▶'}
+  </button>
+
+  {#if !collapsed}
+    <div class="panel-content">
+      <h2 class="headline">your statistics</h2>
+
+      <div class="total-bar-bg">
+        <div class="total-bar-fill" style="width: {pct}%"></div>
+        <span class="bar-pct">{pct}%</span>
       </div>
+      <span class="total-bar-text">{total} / {grandTotal} countries visited</span>
 
-  <div class="vdivider"></div>
+      <div class="divider"></div>
 
-  <!-- world % -->
-  <div class="stat-block">
-    <span class="big-num accent">{pct}%</span>
-    <span class="stat-sub">of the world</span>
+      <span class="bar-label">by continent</span>
+      {#each CONTINENTS as continent}
+        {@const contTotal = continentTotals[continent]}
+        <div class="row tooltip-wrap">
+          <span class="dot" style="background: {continentColors[continent]}"></span>
+          <span class="label">{continent}</span>
+          <span class="value">{counts[continent]}<span class="total">/{contTotal}</span></span>
+          {#if visitedByContinent[continent]?.length > 0}
+            <div class="tooltip-list">
+              {#each visitedByContinent[continent].slice(0, 10) as country}
+                <span class="tooltip-item">{country}</span>
+              {/each}
+              {#if visitedByContinent[continent].length > 10}
+                <span class="tooltip-item tooltip-more">...</span>
+              {/if}
             </div>
+          {/if}
+        </div>
+      {/each}
 
-  <div class="vdivider"></div>
-
-  <!-- donut -->
-  <div class="donut-block">
-    <svg viewBox="0 0 100 100" class="donut-svg">
+      <div class="donut-wrap">
         {#if segments.length > 0}
+          <svg viewBox="-25 -25 230 230" class="donut-svg">
             {#each segments as seg}
-          <g class="seg-group"
-             onmouseenter={() => hoveredSeg = seg}
-             onmouseleave={() => hoveredSeg = null}>
+              <g class="seg-group">
                 <path d={seg.path} fill={seg.color} />
+                <text x={seg.lx} y={seg.ly} text-anchor="middle" dominant-baseline="middle" class="donut-label" style="font-size: {seg.angle < 20 ? 12 : 15}px">{seg.cont}</text>
               </g>
             {/each}
-        <circle cx="50" cy="50" r="22" fill="#fff" />
-      {:else}
-        <circle cx="50" cy="50" r="44" fill="#f1f5f9" />
-        <circle cx="50" cy="50" r="22" fill="#fff" />
-      {/if}
+            <circle cx="90" cy="90" r="30" fill="var(--bg-raised)" />
           </svg>
-
-    <div class="donut-info">
-      <span class="section-label">by continent</span>
-      {#if hoveredSeg}
-        <div class="tooltip" style="--dot:{hoveredSeg.color}">
-          <span class="tt-name">{hoveredSeg.cont}</span>
-          <span class="tt-val">{counts[hoveredSeg.cont]} / {continentTotals[hoveredSeg.cont]}</span>
-        </div>
         {:else}
-        <span class="hint">hover a slice</span>
+          <svg viewBox="-25 -25 230 230" class="donut-svg">
+            <circle cx="90" cy="90" r="65" fill="var(--border)" />
+            <circle cx="90" cy="90" r="30" fill="var(--bg-raised)" />
+          </svg>
         {/if}
       </div>
-  </div>
 
-  <div class="vdivider"></div>
+      <div class="divider"></div>
 
-  <!-- progress bar -->
-  <div class="bar-block">
-      <span class="section-label" style="margin-bottom:6px">world coverage</span>
-    <div class="bar-bg">
-      <div class="bar-fill" style="width:{pct}%"></div>
-    </div>
-    <span class="disclaimer">All UN countries · Kosovo · HK · Taiwan</span>
+      <div class="disclaimer">Contains all UN countries, Kosovo, Hong Kong and Taiwan</div>
     </div>
+  {/if}
 </div>
 
 <style>
-  .card {
-    position: absolute;
-    top: 16px;
-    left: 50%;
-    transform: translateX(-50%);
-    background: #fff;
-    border-radius: 16px;
-    box-shadow: 0 4px 20px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
-    border: 1px solid rgba(0,0,0,0.06);
+  .panel {
+    flex: 0 0 min(360px, 25vw);
+    background: var(--bg-raised);
+    border-left: 1px solid var(--border);
     display: flex;
     flex-direction: row;
-    align-items: center;
-    gap: 0;
-    padding: 0 4px;
-    height: 110px;
-    z-index: 10;
     font-family: var(--sans);
-    white-space: nowrap;
+    transition: flex-basis 0.25s ease;
   }
 
-  .stat-block {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 4px;
-    padding: 0 36px;
+  .panel.collapsed {
+    flex: 0 0 28px;
+    border-left: none;
   }
 
-  .big-num {
-    font-size: 40px;
-    font-weight: 300;
-    letter-spacing: -2px;
-    color: var(--text-h);
+  .panel-content {
+    flex: 1;
+    padding: 24px 28px;
+    overflow-y: auto;
+    min-width: 0;
+  }
+
+  .collapse-btn {
+    flex: 0 0 auto;
+    align-self: flex-start;
+    background: var(--accent-bg);
+    border: none;
+    border-radius: 0 8px 8px 0;
+    padding: 14px 5px;
+    cursor: pointer;
+    font-size: 16px;
     line-height: 1;
+    color: var(--accent);
+    transition: background 0.15s ease, padding 0.15s ease;
+    margin-top: 24px;
+    position: relative;
   }
-  .big-num.accent { color: var(--accent); }
 
-  .stat-sub {
+  .collapse-btn:hover {
+    background: var(--lavender-bg);
+    padding-right: 8px;
+  }
+
+  .collapse-btn::after {
+    content: attr(data-tip);
+    position: absolute;
+    right: calc(100% + 8px);
+    top: 50%;
+    transform: translateY(-50%);
+    background: var(--text-h);
+    color: var(--bg-raised);
+    font-family: var(--sans);
     font-size: 12px;
     font-weight: 300;
-    color: var(--text-sub);
-    letter-spacing: 0.03em;
+    padding: 6px 12px;
+    border-radius: 6px;
+    white-space: nowrap;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.15s ease;
   }
 
-  .vdivider {
-    width: 1px;
-    height: 56px;
-    background: var(--border);
-    flex-shrink: 0;
+  .collapse-btn:hover::after {
+    opacity: 1;
   }
 
-  /* donut */
-  .donut-block {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 14px;
-    padding: 0 28px;
-  }
-  .donut-svg {
-    width: 72px;
-    height: 72px;
-    flex-shrink: 0;
-  }
-  .seg-group { cursor: pointer; }
-  .seg-group:hover path { opacity: 0.8; }
-
-  .donut-info {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    min-width: 130px;
-  }
-
-  .tooltip {
-    display: flex;
-    align-items: center;
-    gap: 7px;
-    font-size: 13px;
-  }
-  .tooltip::before {
-    content: '';
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: var(--dot);
-    flex-shrink: 0;
-  }
-  .tt-name { font-weight: 400; color: var(--text-h); }
-  .tt-val  { font-weight: 300; color: var(--text-sub); }
-
-  .section-label {
-    font-size: 10px;
-    font-weight: 500;
-    letter-spacing: 0.14em;
+  .headline {
+    font-family: var(--heading);
+    font-size: var(--text-sm);
+    font-weight: 400;
     text-transform: uppercase;
-    color: var(--text-sub);
+    letter-spacing: 0.1em;
+    color: var(--accent);
+    margin: 0 0 20px 0;
   }
 
-  .hint {
-    font-size: 12px;
+  .bar-label {
+    font-family: var(--sans);
+    font-size: var(--text-xs);
+    font-weight: 400;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
     color: var(--text-sub);
-    opacity: 0.45;
+    display: block;
+    margin-bottom: 8px;
   }
 
-  /* bar */
-  .bar-block {
-    display: flex;
-    flex-direction: column;
-    padding: 0 28px;
-    gap: 0;
-    min-width: 160px;
-  }
-  .bar-bg {
-    width: 100%;
-    height: 5px;
-    background: var(--bg-subtle);
-    border-radius: 4px;
+  .total-bar-bg {
+    position: relative;
+    height: 28px;
+    background: var(--accent-bg);
+    border-radius: 10px;
     overflow: hidden;
-    margin-bottom: 10px;
   }
-  .bar-fill {
+
+  .total-bar-fill {
     height: 100%;
-    background: linear-gradient(90deg, var(--accent), #a78bfa);
-    border-radius: 4px;
+    background: linear-gradient(90deg, var(--accent-dark), var(--lavender));
+    border-radius: 10px;
     transition: width 0.3s ease;
     min-width: 0;
   }
-  .disclaimer {
-    font-size: 11px;
+
+  .bar-pct {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--text-sm);
+    font-weight: 500;
+    color: var(--text-h);
+  }
+
+  .total-bar-text {
+    display: block;
+    text-align: center;
+    font-size: var(--text-sm);
+    font-weight: 400;
+    color: var(--text-h);
+    margin-top: 6px;
+  }
+
+  .divider {
+    height: 1px;
+    background: var(--border);
+    margin: 16px 0;
+  }
+
+  .row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 0;
+  }
+
+  .dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .label {
+    flex: 1;
+    font-size: var(--text-sm);
+    font-weight: 300;
+    color: var(--text);
+  }
+
+  .value {
+    font-size: var(--text-sm);
+    font-weight: 400;
+    color: var(--text-h);
+  }
+
+  .total {
+    font-weight: 400;
     color: var(--text-sub);
-    opacity: 0.5;
-    letter-spacing: 0.02em;
+    font-size: var(--text-xs);
+  }
+
+  .donut-wrap {
+    display: flex;
+    justify-content: center;
+    margin: 8px 0 20px;
+  }
+
+  .donut-svg {
+    width: 180px;
+    height: 180px;
+    filter: drop-shadow(0 2px 8px rgba(99,102,241,0.15));
+  }
+
+  .donut-label {
+    fill: var(--text-h);
+    font-family: var(--sans);
+    font-weight: 300;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.15s ease;
+  }
+
+  .seg-group:hover .donut-label {
+    opacity: 1;
+  }
+
+  .tooltip-wrap {
+    position: relative;
+  }
+
+  .tooltip-list {
+    display: none;
+    position: absolute;
+    top: calc(100% + 6px);
+    left: 0;
+    background: var(--text-h);
+    color: var(--bg-raised);
+    font-family: var(--sans);
+    font-size: 12px;
+    line-height: 1.5;
+    padding: 8px 12px;
+    border-radius: 8px;
+    box-shadow: var(--shadow);
+    z-index: 20;
+    white-space: nowrap;
+    min-width: 120px;
+  }
+
+  .tooltip-wrap:hover .tooltip-list {
+    display: block;
+  }
+
+  .tooltip-item {
+    display: block;
+    padding: 2px 0;
+  }
+
+  .tooltip-item + .tooltip-item {
+    border-top: 1px solid rgba(255, 255, 255, 0.06);
+  }
+
+  .disclaimer {
+    font-size: var(--text-xs);
+    color: var(--text-sub);
+    line-height: 1.5;
+    text-align: center;
   }
 </style>