tripkit 1.1.0 → 1.4.0

package/renderers/html/tripkit-renderer.html

@@ -9,11 +9,45 @@
 <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300;1,9..40,400&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
 <style>
 *{margin:0;padding:0;box-sizing:border-box}
-:root{--bg:#f4f1eb;--card:#fff;--text:#1a1a18;--muted:#7a7768;--subtle:#b5b1a4;
---accent:#1b5e3b;--accent-soft:#dceee4;--warn:#c44b25;--warn-soft:#fdeee8;
---blue:#2563a8;--blue-soft:#e8f0fa;--purple:#5b44b0;--purple-soft:#eeeafb;
---amber:#a16207;--amber-soft:#fdf4e3;--coral:#c44b25;
---border:rgba(0,0,0,.08);--font:'DM Sans',system-ui,sans-serif;--serif:'Instrument Serif',Georgia,serif;--r:10px}
+:root{
+  --bg:#f4f1eb;--card:#fff;--text:#1a1a18;--muted:#7a7768;--subtle:#b5b1a4;
+  --accent:#1b5e3b;--accent-soft:#dceee4;
+  --warn:#c44b25;--warn-soft:#fdeee8;
+  --blue:#2563a8;--blue-soft:#e8f0fa;
+  --purple:#5b44b0;--purple-soft:#eeeafb;
+  --amber:#a16207;--amber-soft:#fdf4e3;
+  --border:rgba(0,0,0,.08);
+  --shadow:0 2px 10px rgba(0,0,0,.08);
+  --shadow-lift:0 6px 18px rgba(0,0,0,.10);
+  --b-hike-bg:#dceee4;--b-hike-fg:#1b5e3b;
+  --b-scenic-bg:#e8f0fa;--b-scenic-fg:#2563a8;
+  --b-food-bg:#fdeee8;--b-food-fg:#c44b25;
+  --b-city-bg:#eeeafb;--b-city-fg:#5b44b0;
+  --b-activity-bg:#fdf4e3;--b-activity-fg:#a16207;
+  --b-beach-bg:#e0f7fa;--b-beach-fg:#00838f;
+  --b-museum-bg:#fce4ec;--b-museum-fg:#c62828;
+  --b-shopping-bg:#f3e5f5;--b-shopping-fg:#7b1fa2;
+  --font:'DM Sans',system-ui,sans-serif;--serif:'Instrument Serif',Georgia,serif;--r:10px
+}
+[data-theme="dark"]{
+  --bg:#14140f;--card:#1f1d18;--text:#f0ede4;--muted:#908a78;--subtle:#5a564a;
+  --accent:#5dad7d;--accent-soft:rgba(93,173,125,.15);
+  --warn:#e07555;--warn-soft:rgba(224,117,85,.13);
+  --blue:#5b9adc;--blue-soft:rgba(91,154,220,.13);
+  --purple:#9582d8;--purple-soft:rgba(149,130,216,.13);
+  --amber:#d4a444;--amber-soft:rgba(212,164,68,.13);
+  --border:rgba(255,255,255,.08);
+  --shadow:0 2px 12px rgba(0,0,0,.4);
+  --shadow-lift:0 8px 24px rgba(0,0,0,.5);
+  --b-hike-bg:rgba(93,173,125,.18);--b-hike-fg:#7dc99f;
+  --b-scenic-bg:rgba(91,154,220,.18);--b-scenic-fg:#7dadde;
+  --b-food-bg:rgba(224,117,85,.18);--b-food-fg:#ec9270;
+  --b-city-bg:rgba(149,130,216,.18);--b-city-fg:#b09fe0;
+  --b-activity-bg:rgba(212,164,68,.18);--b-activity-fg:#dcb966;
+  --b-beach-bg:rgba(50,180,200,.18);--b-beach-fg:#5fc8d8;
+  --b-museum-bg:rgba(220,90,120,.18);--b-museum-fg:#e08aa0;
+  --b-shopping-bg:rgba(180,100,200,.18);--b-shopping-fg:#c898d8;
+}
 html,body{height:100%;overflow:hidden}
 body{font-family:var(--font);background:var(--bg);color:var(--text)}
 .app{display:grid;grid-template-columns:460px 1fr;height:100vh}
@@ -37,6 +71,10 @@ body{font-family:var(--font);background:var(--bg);color:var(--text)}
 .day-btn:hover{background:var(--bg);color:var(--text)}
 .day-btn.active{background:var(--accent);color:#fff}
 .day-btn.has-alert{box-shadow:inset 0 -2px 0 var(--warn)}
+.day-btn[data-status="completed"]{opacity:.5}
+.day-btn[data-status="completed"].active{opacity:1}
+.day-btn[data-status="active"]::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block;margin-right:6px;vertical-align:middle}
+.day-btn[data-status="active"].active::before{background:#fff}
 .day-panel{display:none;padding:16px 22px 40px}
 .day-panel.active{display:block;animation:fadeIn .25s ease}
 @keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@@ -55,16 +93,16 @@ body{font-family:var(--font);background:var(--bg);color:var(--text)}
 .callout.sleep{background:var(--purple-soft);border-left:3px solid var(--purple)}
 .cl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px}
 .callout.warn .cl{color:var(--warn)}.callout.tip .cl{color:var(--accent)}.callout.weather .cl{color:var(--blue)}.callout.eat .cl{color:var(--amber)}.callout.sleep .cl{color:var(--purple)}
-.stop{display:flex;gap:10px;padding:10px 0;border-top:1px solid var(--border);cursor:pointer;transition:background .12s}
-.stop:hover{background:var(--bg);margin:0 -10px;padding:10px;border-radius:8px}
+.stop{display:flex;gap:10px;padding:10px 0;border-top:1px solid var(--border);cursor:pointer;transition:background .15s,transform .15s,box-shadow .15s}
+.stop:hover{background:var(--bg);margin:0 -10px;padding:10px;border-radius:8px;box-shadow:var(--shadow-lift);transform:translateY(-1px)}
 .stop:first-of-type{border-top:none}
 .stop-img{width:72px;height:54px;border-radius:7px;object-fit:cover;flex-shrink:0;background:linear-gradient(135deg,var(--accent-soft),var(--blue-soft))}
 .stop-body{flex:1;min-width:0}
 .stop-name{font-weight:500;font-size:13px;display:flex;align-items:center;gap:6px}
 .badge{font-size:8px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:2px 6px;border-radius:3px;flex-shrink:0}
-.b-hike{background:#dceee4;color:#1b5e3b}.b-scenic{background:#e8f0fa;color:#2563a8}.b-food{background:#fdeee8;color:#c44b25}
-.b-city{background:#eeeafb;color:#5b44b0}.b-activity{background:#fdf4e3;color:#a16207}.b-beach{background:#e0f7fa;color:#00838f}
-.b-museum{background:#fce4ec;color:#c62828}.b-shopping{background:#f3e5f5;color:#7b1fa2}
+.b-hike{background:var(--b-hike-bg);color:var(--b-hike-fg)}.b-scenic{background:var(--b-scenic-bg);color:var(--b-scenic-fg)}.b-food{background:var(--b-food-bg);color:var(--b-food-fg)}
+.b-city{background:var(--b-city-bg);color:var(--b-city-fg)}.b-activity{background:var(--b-activity-bg);color:var(--b-activity-fg)}.b-beach{background:var(--b-beach-bg);color:var(--b-beach-fg)}
+.b-museum{background:var(--b-museum-bg);color:var(--b-museum-fg)}.b-shopping{background:var(--b-shopping-bg);color:var(--b-shopping-fg)}
 .stop-desc{font-size:11px;color:var(--muted);line-height:1.45;margin-top:2px}
 .stop-meta{display:flex;gap:8px;margin-top:3px;font-size:10px;color:var(--subtle)}
 .sec-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--subtle);margin:14px 0 6px;padding-top:6px;border-top:1px solid var(--border)}
@@ -79,21 +117,59 @@ body{font-family:var(--font);background:var(--bg);color:var(--text)}
 .lr{display:flex;align-items:center;gap:6px}.lr i{width:16px;height:3px;border-radius:2px;display:inline-block}
 .fullbtn{position:absolute;bottom:16px;right:12px;z-index:1000;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:6px 12px;font-family:var(--font);font-size:11px;font-weight:500;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.1)}
 .fullbtn:hover{background:var(--text);color:#fff}
-.leaflet-popup-content-wrapper{border-radius:10px!important;box-shadow:0 4px 16px rgba(0,0,0,.12)!important;border:1px solid var(--border)!important;padding:0!important;overflow:hidden}
+.leaflet-popup-content-wrapper{border-radius:10px!important;box-shadow:0 4px 16px rgba(0,0,0,.18)!important;border:1px solid var(--border)!important;padding:0!important;overflow:hidden;background:var(--card)!important;color:var(--text)!important}
 .leaflet-popup-content{margin:0!important;width:280px!important;font-family:var(--font)!important}
-.leaflet-popup-tip{border-top-color:var(--card)!important}
+.leaflet-popup-tip{background:var(--card)!important;border-top-color:var(--card)!important}
 .pp-img{width:100%;height:140px;object-fit:cover;display:block;background:linear-gradient(135deg,var(--accent-soft),var(--blue-soft))}
 .pp-body{padding:12px 14px}
 .pp-day{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:3px}
 .pp-name{font-family:var(--serif);font-size:16px;line-height:1.25;margin-bottom:5px}
 .pp-desc{font-size:11px;color:var(--muted);line-height:1.5}
-.cm{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;font-weight:600;font-size:10px;color:#fff;box-shadow:0 2px 5px rgba(0,0,0,.3);border:2px solid #fff;font-family:var(--font);cursor:pointer;transition:transform .12s}
+.cm{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;font-weight:600;font-size:10px;color:#fff;box-shadow:0 2px 5px rgba(0,0,0,.3);border:2px solid #fff;font-family:var(--font);cursor:pointer;transition:transform .12s;position:relative}
 .cm:hover{transform:scale(1.2)}
+/* Media cue on a stop marker: camera + count, clickable straight to the lightbox. */
+.cm-media{position:absolute;top:-7px;right:-9px;display:flex;align-items:center;gap:1px;height:15px;padding:0 4px;border-radius:8px;background:#fff;color:var(--accent);font-size:9px;font-weight:700;line-height:1;box-shadow:0 1px 4px rgba(0,0,0,.35);border:1.5px solid var(--accent);cursor:pointer;transition:transform .12s}
+.cm-media:hover{transform:scale(1.18)}
+.cm-media .ic{font-size:8px;line-height:1}
 .hm{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;
   font-weight:700;font-size:9px;color:#1b5e3b;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.35);
   border:2px solid #1b5e3b;font-family:var(--font);cursor:pointer;transition:transform .12s;letter-spacing:-.02em}
 .hm:hover{transform:scale(1.15)}
 .pp-conf{font-size:11px;font-weight:600;color:var(--accent);background:var(--accent-soft);padding:4px 8px;border-radius:4px;display:inline-block;margin-top:6px;letter-spacing:.02em}
+.endpin{display:flex;align-items:center;justify-content:center;width:28px;height:34px;font-size:11px;font-weight:700;color:#fff;font-family:var(--font);border-radius:14px 14px 14px 2px;transform:rotate(-45deg);box-shadow:0 2px 6px rgba(0,0,0,.35);border:2px solid #fff;cursor:pointer}
+.endpin span{transform:rotate(45deg);letter-spacing:.02em}
+.endpin.start{background:#1b5e3b}
+.endpin.end{background:#7a1f1f}
+/* --- Media gallery (sidebar strip + count badge) --- */
+.stop-media{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
+.stop-media .gthumb{width:46px;height:46px;border-radius:6px;object-fit:cover;cursor:pointer;background:var(--bg);border:1px solid var(--border);transition:transform .12s}
+.stop-media .gthumb:hover{transform:scale(1.06)}
+.stop-media .gmore{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:6px;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:600;cursor:pointer;border:1px solid var(--border)}
+.gthumb-wrap{position:relative;display:inline-block;line-height:0}
+.gthumb-wrap .vbadge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:0;height:0;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;filter:drop-shadow(0 0 2px rgba(0,0,0,.6));pointer-events:none}
+.pp-media{display:flex;gap:4px;padding:8px 14px 0;flex-wrap:wrap}
+.pp-media .gthumb{width:40px;height:40px;border-radius:5px;object-fit:cover;cursor:pointer;border:1px solid var(--border)}
+.media-count{display:inline-flex;align-items:center;gap:3px;font-size:9px;font-weight:600;color:var(--accent);background:var(--accent-soft);padding:1px 6px;border-radius:10px;margin-left:4px}
+/* --- Photo-pin marker --- */
+.photopin{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.4);cursor:pointer;transition:transform .12s}
+.photopin:hover{transform:scale(1.35)}
+.mbtn.toggle.active{background:var(--accent);color:#fff;border-color:var(--accent)}
+/* --- Lightbox --- */
+.lightbox{position:fixed;inset:0;z-index:5000;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;flex-direction:column}
+.lightbox.open{display:flex;animation:lbFade .2s ease}
+@keyframes lbFade{from{opacity:0}to{opacity:1}}
+.lb-stage{position:relative;max-width:92vw;max-height:78vh;display:flex;align-items:center;justify-content:center}
+.lb-stage img,.lb-stage video{max-width:92vw;max-height:78vh;border-radius:8px;box-shadow:0 8px 40px rgba(0,0,0,.6);object-fit:contain;background:#000}
+.lb-cap{color:#f0ede4;font-family:var(--font);font-size:13px;text-align:center;margin-top:14px;max-width:80vw;line-height:1.5;min-height:18px}
+.lb-meta{color:#908a78;font-size:11px;margin-top:4px}
+.lb-count{position:absolute;top:20px;left:0;right:0;text-align:center;color:#cbc8bd;font-size:12px;font-family:var(--font);letter-spacing:.04em;pointer-events:none}
+.lb-close{position:absolute;top:16px;right:22px;width:38px;height:38px;border:none;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:20px;cursor:pointer;line-height:1;z-index:2}
+.lb-close:hover{background:rgba(255,255,255,.24)}
+.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border:none;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center}
+.lb-nav:hover{background:rgba(255,255,255,.24)}
+.lb-prev{left:18px}.lb-next{right:18px}
+.lb-nav[disabled]{opacity:.25;cursor:default}
+@media(max-width:480px){.lb-nav{width:40px;height:40px;font-size:20px}.lb-close{top:10px;right:12px}}
 @media(max-width:480px){
   .hero{height:140px}.hero-text{padding:12px 14px}.hero-text h1{font-size:20px}
   .day-nav{padding:8px 10px;gap:1px}.day-btn{padding:5px 8px;font-size:10px}
@@ -123,6 +199,15 @@ body{font-family:var(--font);background:var(--bg);color:var(--text)}
 <div class="legend" id="legend"></div>
 <button class="fullbtn" onclick="showAll()">Full route</button>
 </div></div>
+<div class="lightbox" id="lightbox" role="dialog" aria-modal="true" aria-label="Photo viewer">
+  <button class="lb-close" id="lbClose" aria-label="Close">×</button>
+  <div class="lb-count" id="lbCount"></div>
+  <button class="lb-nav lb-prev" id="lbPrev" aria-label="Previous">‹</button>
+  <div class="lb-stage" id="lbStage"></div>
+  <button class="lb-nav lb-next" id="lbNext" aria-label="Next">›</button>
+  <div class="lb-cap" id="lbCap"></div>
+  <div class="lb-meta" id="lbMeta"></div>
+</div>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
 <script>
 // ============================================================
@@ -152,6 +237,7 @@ const TRIP_DATA = {};
   const theme = data.theme || {};
 
   // --- Apply theme ---
+  if (theme.dark_mode) document.documentElement.setAttribute('data-theme', 'dark');
   if (theme.accent_color) document.documentElement.style.setProperty('--accent', theme.accent_color);
   if (theme.font_family) document.documentElement.style.setProperty('--font', theme.font_family);
 
@@ -172,6 +258,39 @@ const TRIP_DATA = {};
     return stop.image || defaultImages[stop.type] || defaultImages.default;
   }
 
+  // --- Post-trip media helpers ---
+  // Normalize a stop's media[] into a clean list. `src`/`thumb` may be a relative
+  // path or a URL; the renderer just assigns them as element src/href either way.
+  function getStopMedia(stop) {
+    if (!Array.isArray(stop.media)) return [];
+    return stop.media.filter(m => m && m.src).map(m => ({
+      src: m.src,
+      thumb: m.thumb || m.src,
+      type: m.type === 'video' ? 'video' : 'photo',
+      caption: m.caption || '',
+      lat: Number.isFinite(m.lat) ? m.lat : null,
+      lng: Number.isFinite(m.lng) ? m.lng : null,
+      taken_at: m.taken_at || ''
+    }));
+  }
+  function escAttr(s) { return String(s).replace(/"/g, '&quot;'); }
+  function escHtml(s) { return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); }
+
+  // Build the sidebar thumbnail strip for a stop's media (up to 4 shown + "+N").
+  function mediaStripHTML(di, si, media) {
+    if (!media.length) return '';
+    const MAX = 4;
+    let html = '<div class="stop-media">';
+    media.slice(0, MAX).forEach((m, mi) => {
+      html += `<span class="gthumb-wrap"><img class="gthumb" src="${escAttr(m.thumb)}" alt="${escAttr(m.caption || 'photo')}" loading="lazy" onclick="event.stopPropagation();openLightbox(${di},${si},${mi})" onerror="this.style.opacity=.25">${m.type === 'video' ? '<span class="vbadge"></span>' : ''}</span>`;
+    });
+    if (media.length > MAX) {
+      html += `<span class="gmore" onclick="event.stopPropagation();openLightbox(${di},${si},${MAX})">+${media.length - MAX}</span>`;
+    }
+    html += '</div>';
+    return html;
+  }
+
   function getDayHero(day) {
     // Use first stop's image as day hero
     if (day.stops && day.stops.length > 0) return getImage(day.stops[0]);
@@ -202,6 +321,7 @@ const TRIP_DATA = {};
     // Nav button
     const b = document.createElement('button');
     b.className = 'day-btn' + (i === 0 ? ' active' : '') + (hasAlerts ? ' has-alert' : '');
+    if (d.status) b.dataset.status = d.status;
     b.textContent = `Day ${d.number}`;
     b.onclick = () => sel(i);
     nav.appendChild(b);
@@ -262,13 +382,16 @@ const TRIP_DATA = {};
         h += `<div class="stop" onclick="tripFocus(${i},${si})">`;
         h += `<img class="stop-img" src="${img}" alt="${s.name}" loading="lazy" onerror="this.style.opacity=0">`;
         h += `<div class="stop-body">`;
-        h += `<div class="stop-name"><span class="badge ${bc}">${s.label || s.type}</span>${s.name}</div>`;
+        const sMedia = getStopMedia(s);
+        const countBadge = sMedia.length ? `<span class="media-count">📷 ${sMedia.length}</span>` : '';
+        h += `<div class="stop-name"><span class="badge ${bc}">${s.label || s.type}</span>${s.name}${countBadge}</div>`;
         h += `<div class="stop-desc">${s.description || ''}</div>`;
         const meta = [];
         if (s.duration) meta.push(`⏱ ${s.duration}`);
         if (s.parking_fee) meta.push(`🅿 ${s.parking_fee}`);
         if (s.kid_friendly === false) meta.push(`⚠ Not kid-friendly`);
         if (meta.length) h += `<div class="stop-meta">${meta.map(m => `<span>${m}</span>`).join('')}</div>`;
+        h += mediaStripHTML(i, si, sMedia);
         h += `</div></div>`;
       });
     }
@@ -329,14 +452,33 @@ const TRIP_DATA = {};
       L.polyline(r.points, { color: r.color || '#666', weight: r.width || 4, opacity: 0.8 }).addTo(map);
     });
   } else {
-    // Auto-generate routes from consecutive stops
-    days.forEach(d => {
-      if (d.stops && d.stops.length > 1) {
-        const pts = d.stops.filter(s => s.lat && s.lng).map(s => [s.lat, s.lng]);
-        if (pts.length > 1) {
-          L.polyline(pts, { color: '#fff', weight: 7, opacity: 0.4 }).addTo(map);
-          L.polyline(pts, { color: d.color || '#666', weight: 4, opacity: 0.8 }).addTo(map);
-        }
+    // Auto-generate routes. For each day, the polyline runs:
+    //   prev day's lodging (if any) → today's stops → today's lodging (if any)
+    // This stitches consecutive days together so the map reads as one continuous trip.
+    // Day 1 also anchors to trip.origin, and the final day returns to the
+    // destination (or origin, for a round trip), so the Start/End pins connect to
+    // the route instead of floating unattached.
+    const isAnchorLodging = (l) => l && l.lat && l.lng && l.name !== 'Home';
+    const hasOrigin = Number.isFinite(trip.origin_lat) && Number.isFinite(trip.origin_lng);
+    const destLat = Number.isFinite(trip.destination_lat) ? trip.destination_lat : (hasOrigin ? trip.origin_lat : null);
+    const destLng = Number.isFinite(trip.destination_lng) ? trip.destination_lng : (hasOrigin ? trip.origin_lng : null);
+    const pushUnique = (pts, p) => {
+      const last = pts[pts.length - 1];
+      if (!last || last[0] !== p[0] || last[1] !== p[1]) pts.push(p);
+    };
+    days.forEach((d, di) => {
+      const pts = [];
+      if (di === 0 && hasOrigin) pts.push([trip.origin_lat, trip.origin_lng]);
+      const prevLodging = di > 0 ? days[di - 1].lodging : null;
+      if (isAnchorLodging(prevLodging)) pushUnique(pts, [prevLodging.lat, prevLodging.lng]);
+      (d.stops || []).forEach(s => { if (s.lat && s.lng) pushUnique(pts, [s.lat, s.lng]); });
+      if (isAnchorLodging(d.lodging)) pushUnique(pts, [d.lodging.lat, d.lodging.lng]);
+      // On the last day, close the loop back to the destination/origin so the trip
+      // visibly returns home (covers the common `lodging.name: "Home"` last day).
+      if (di === days.length - 1 && destLat != null && destLng != null) pushUnique(pts, [destLat, destLng]);
+      if (pts.length > 1) {
+        L.polyline(pts, { color: '#fff', weight: 7, opacity: 0.4 }).addTo(map);
+        L.polyline(pts, { color: d.color || '#666', weight: 4, opacity: 0.8 }).addTo(map);
       }
     });
   }
@@ -347,21 +489,37 @@ const TRIP_DATA = {};
     const dm = [];
     d.stops.forEach((s, si) => {
       if (!s.lat || !s.lng) return;
+      const sMedia = getStopMedia(s);
+      // When a stop has media, overlay a camera+count badge on its marker that jumps
+      // straight to the lightbox (the badge stops propagation so the popup stays put).
+      const mediaBadge = sMedia.length
+        ? `<span class="cm-media" title="${sMedia.length} photo${sMedia.length === 1 ? '' : 's'}/video" onclick="event.stopPropagation();openLightbox(${di},${si},0)"><span class="ic">📷</span>${sMedia.length}</span>`
+        : '';
       const icon = L.divIcon({
         className: '',
-        html: `<div class="cm" style="background:${d.color || '#666'}">${d.number}</div>`,
+        html: `<div class="cm" style="background:${d.color || '#666'}">${d.number}${mediaBadge}</div>`,
         iconSize: [26, 26], iconAnchor: [13, 13]
       });
       const m = L.marker([s.lat, s.lng], { icon }).addTo(map);
-      const img = getImage(s);
+      // Lead the popup with the first real photo when available; else the hero/Unsplash image.
+      const img = sMedia.length ? sMedia[0].thumb : getImage(s);
+      let ppMedia = '';
+      if (sMedia.length) {
+        ppMedia = '<div class="pp-media">';
+        sMedia.slice(0, 5).forEach((mm, mi) => {
+          ppMedia += `<span class="gthumb-wrap"><img class="gthumb" src="${escAttr(mm.thumb)}" alt="${escAttr(mm.caption || 'photo')}" onclick="openLightbox(${di},${si},${mi})" onerror="this.style.opacity=.25">${mm.type === 'video' ? '<span class="vbadge"></span>' : ''}</span>`;
+        });
+        ppMedia += '</div>';
+      }
       m.bindPopup(`<div>
-        <img class="pp-img" src="${img}" alt="${s.name}" onerror="this.style.opacity=0">
+        <img class="pp-img" src="${escAttr(img)}" alt="${escAttr(s.name)}" ${sMedia.length ? `style="cursor:pointer" onclick="openLightbox(${di},${si},0)"` : ''} onerror="this.style.opacity=0">
         <div class="pp-body">
           <div class="pp-day">Day ${d.number} · ${d.date}</div>
           <div class="pp-name">${s.name}</div>
           <div class="pp-desc">${s.description || ''}</div>
           ${s.navigate_url ? `<a href="${s.navigate_url}" target="_blank" style="display:inline-block;margin-top:6px;font-size:11px;color:var(--accent);text-decoration:none">📍 Navigate →</a>` : ''}
         </div>
+        ${ppMedia}
       </div>`, { maxWidth: 280 });
       m.on('click', () => sel(di));
       dm.push(m);
@@ -369,8 +527,34 @@ const TRIP_DATA = {};
     markers.push(dm);
   });
 
+  // --- Start / End pins (origin & destination) ---
+  function endpoint(lat, lng, kind, name) {
+    const labelTxt = kind === 'start' ? 'A' : 'B';
+    const titleTxt = kind === 'start' ? 'Start' : 'End';
+    const icon = L.divIcon({
+      className: '',
+      html: `<div class="endpin ${kind}"><span>${labelTxt}</span></div>`,
+      iconSize: [28, 34], iconAnchor: [4, 32]
+    });
+    const m = L.marker([lat, lng], { icon, zIndexOffset: 800 }).addTo(map);
+    m.bindPopup(`<div class="pp-body" style="padding:14px">
+      <div class="pp-day">${titleTxt}</div>
+      <div class="pp-name">${name || titleTxt}</div>
+    </div>`, { maxWidth: 240 });
+  }
+  if (Number.isFinite(trip.origin_lat) && Number.isFinite(trip.origin_lng)) {
+    endpoint(trip.origin_lat, trip.origin_lng, 'start', trip.origin);
+    const destLat = Number.isFinite(trip.destination_lat) ? trip.destination_lat : trip.origin_lat;
+    const destLng = Number.isFinite(trip.destination_lng) ? trip.destination_lng : trip.origin_lng;
+    // Suppress the "End" pin if it's at the same coords as the Start (round trip).
+    if (Math.abs(destLat - trip.origin_lat) > 0.001 || Math.abs(destLng - trip.origin_lng) > 0.001) {
+      endpoint(destLat, destLng, 'end', trip.destination || trip.origin);
+    }
+  }
+
   // --- Hotel markers ---
-  const hotels = days
+  // Build per-night list, then dedupe by lat/lng so multi-night stays render as one marker.
+  const nights = days
     .filter(d => d.lodging && d.lodging.lat && d.lodging.lng && d.lodging.name !== 'Home')
     .map((d, i) => ({
       name: d.lodging.name,
@@ -384,11 +568,24 @@ const TRIP_DATA = {};
       navigate_url: d.lodging.navigate_url
     }));
 
-  const hotelLabel = (hotels.length > 0 && data.agent_context?.preferences?.accommodation_chain)
-    ? data.agent_context.preferences.accommodation_chain.split(' ')[0].substring(0, 3).toUpperCase()
-    : '🏨';
-
-  hotels.forEach(h => {
+  const hotelGroups = new Map();
+  nights.forEach(n => {
+    const key = n.lat.toFixed(4) + ',' + n.lng.toFixed(4);
+    if (!hotelGroups.has(key)) hotelGroups.set(key, []);
+    hotelGroups.get(key).push(n);
+  });
+  const hotels = Array.from(hotelGroups.values());
+
+  const hotelLabel = theme.hotel_label
+    || (data.agent_context?.preferences?.accommodation_chain
+        ? data.agent_context.preferences.accommodation_chain.split(' ')[0].substring(0, 3).toUpperCase()
+        : '🏨');
+
+  hotels.forEach(group => {
+    const h = group[0];
+    const ns = group.map(g => g.night);
+    const nightLabel = ns.length === 1 ? `Night ${ns[0]}` : `Nights ${ns[0]}–${ns[ns.length - 1]}`;
+    const dateLabel = group.length === 1 ? h.day : `${h.day} – ${group[group.length - 1].day}`;
     const icon = L.divIcon({
       className: '',
       html: `<div class="hm">${hotelLabel}</div>`,
@@ -396,7 +593,7 @@ const TRIP_DATA = {};
     });
     const m = L.marker([h.lat, h.lng], { icon, zIndexOffset: 1000 }).addTo(map);
     let popupHTML = `<div class="pp-body" style="padding:16px">
-      <div class="pp-day">Night ${h.night} · ${h.day}</div>
+      <div class="pp-day">${nightLabel} · ${dateLabel}</div>
       <div class="pp-name">${h.name}</div>
       <div style="font-size:12px;color:var(--muted);margin-bottom:6px">${h.loc}</div>`;
     if (h.booked && h.conf) popupHTML += `<div class="pp-conf">Conf# ${h.conf}</div>`;
@@ -421,7 +618,13 @@ const TRIP_DATA = {};
   legendEl.querySelector('.legend-toggle')?.addEventListener('click', () => legendEl.classList.toggle('collapsed'));
 
   // --- Fit bounds ---
-  const allPts = days.flatMap(d => (d.stops || []).filter(s => s.lat && s.lng).map(s => [s.lat, s.lng]));
+  // Include stops, hotels, and origin/destination pins so the initial fit covers everything.
+  const allPts = [
+    ...days.flatMap(d => (d.stops || []).filter(s => s.lat && s.lng).map(s => [s.lat, s.lng])),
+    ...days.flatMap(d => (d.lodging && d.lodging.lat && d.lodging.lng && d.lodging.name !== 'Home') ? [[d.lodging.lat, d.lodging.lng]] : []),
+  ];
+  if (Number.isFinite(trip.origin_lat) && Number.isFinite(trip.origin_lng)) allPts.push([trip.origin_lat, trip.origin_lng]);
+  if (Number.isFinite(trip.destination_lat) && Number.isFinite(trip.destination_lng)) allPts.push([trip.destination_lat, trip.destination_lng]);
   const fullBounds = L.latLngBounds(allPts).pad(0.06);
   map.fitBounds(fullBounds);
 
@@ -452,6 +655,111 @@ const TRIP_DATA = {};
     map.fitBounds(fullBounds, { animate: true });
   };
 
+  // === LIGHTBOX ===
+  // Resolve a stop's media list on demand so it always reflects current data.
+  const lb = document.getElementById('lightbox');
+  const lbStage = document.getElementById('lbStage');
+  const lbCap = document.getElementById('lbCap');
+  const lbMeta = document.getElementById('lbMeta');
+  const lbCount = document.getElementById('lbCount');
+  const lbPrev = document.getElementById('lbPrev');
+  const lbNext = document.getElementById('lbNext');
+  let lbList = [];
+  let lbIdx = 0;
+
+  function lbRender() {
+    const m = lbList[lbIdx];
+    if (!m) return;
+    lbStage.innerHTML = m.type === 'video'
+      ? `<video src="${escAttr(m.src)}" controls autoplay playsinline></video>`
+      : `<img src="${escAttr(m.src)}" alt="${escAttr(m.caption || 'photo')}">`;
+    lbCap.textContent = m.caption || '';
+    const meta = [];
+    if (m.taken_at) meta.push(new Date(m.taken_at).toString() !== 'Invalid Date' ? new Date(m.taken_at).toLocaleString() : m.taken_at);
+    if (m.lat != null && m.lng != null) meta.push(`${m.lat.toFixed(4)}, ${m.lng.toFixed(4)}`);
+    lbMeta.textContent = meta.join('  ·  ');
+    lbCount.textContent = lbList.length > 1 ? `${lbIdx + 1} / ${lbList.length}` : '';
+    lbPrev.disabled = lbIdx === 0;
+    lbNext.disabled = lbIdx === lbList.length - 1;
+  }
+  function lbStep(delta) {
+    const n = lbIdx + delta;
+    if (n < 0 || n >= lbList.length) return;
+    lbIdx = n;
+    lbRender();
+  }
+  function lbClose() {
+    lb.classList.remove('open');
+    lbStage.innerHTML = ''; // stop any playing video
+  }
+  // Open from a stop (di, si) at media index mi, or from an explicit list.
+  window.openLightbox = function (di, si, mi) {
+    lbList = getStopMedia(days[di].stops[si]);
+    if (!lbList.length) return;
+    lbIdx = Math.max(0, Math.min(mi || 0, lbList.length - 1));
+    lb.classList.add('open');
+    lbRender();
+  };
+  window.openLightboxList = function (list, idx) {
+    lbList = list;
+    if (!lbList.length) return;
+    lbIdx = Math.max(0, Math.min(idx || 0, lbList.length - 1));
+    lb.classList.add('open');
+    lbRender();
+  };
+  lbPrev.onclick = () => lbStep(-1);
+  lbNext.onclick = () => lbStep(1);
+  document.getElementById('lbClose').onclick = lbClose;
+  lb.addEventListener('click', (e) => { if (e.target === lb) lbClose(); });
+  document.addEventListener('keydown', (e) => {
+    if (!lb.classList.contains('open')) return;
+    if (e.key === 'Escape') lbClose();
+    else if (e.key === 'ArrowLeft') lbStep(-1);
+    else if (e.key === 'ArrowRight') lbStep(1);
+  });
+  // Basic swipe nav on touch devices.
+  let touchX = null;
+  lbStage.addEventListener('touchstart', (e) => { touchX = e.changedTouches[0].clientX; }, { passive: true });
+  lbStage.addEventListener('touchend', (e) => {
+    if (touchX == null) return;
+    const dx = e.changedTouches[0].clientX - touchX;
+    if (Math.abs(dx) > 40) lbStep(dx < 0 ? 1 : -1);
+    touchX = null;
+  }, { passive: true });
+
+  // === PHOTO-PIN LAYER ===
+  // Each media item that carries its own EXIF lat/lng becomes a small pin,
+  // distinct from the day-numbered stop markers. Toggleable via the map control.
+  const photoLayer = L.layerGroup();
+  let photoLayerOn = false;
+  days.forEach((d, di) => {
+    (d.stops || []).forEach((s, si) => {
+      getStopMedia(s).forEach((m, mi) => {
+        if (m.lat == null || m.lng == null) return;
+        const icon = L.divIcon({ className: '', html: '<div class="photopin"></div>', iconSize: [14, 14], iconAnchor: [7, 7] });
+        const pin = L.marker([m.lat, m.lng], { icon });
+        pin.on('click', () => window.openLightbox(di, si, mi));
+        photoLayer.addLayer(pin);
+      });
+    });
+  });
+  const photoPinCount = photoLayer.getLayers().length;
+  if (photoPinCount > 0) {
+    const btn = document.createElement('button');
+    btn.className = 'mbtn toggle';
+    btn.style.marginLeft = '6px';
+    btn.style.borderRadius = '5px';
+    btn.style.borderLeft = '1px solid var(--border)';
+    btn.textContent = `📷 Photos`;
+    btn.title = `${photoPinCount} geotagged media`;
+    btn.addEventListener('click', () => {
+      photoLayerOn = !photoLayerOn;
+      btn.classList.toggle('active', photoLayerOn);
+      if (photoLayerOn) photoLayer.addTo(map); else map.removeLayer(photoLayer);
+    });
+    document.querySelector('.map-ctrl').appendChild(btn);
+  }
+
   // Set page title
   document.title = trip.title + ' — TripKit';
 

package/schema/tripkit.schema.yaml

@@ -18,6 +18,10 @@ trip:
     children: integer
     ages: string              # e.g. "Kids: 14, 17"
   origin: string              # e.g. "Folsom, CA"
+  origin_lat: number          # Optional — if set with origin_lng, renders a "Start" pin on the map
+  origin_lng: number
+  destination_lat: number     # Optional — if absent, defaults to origin coords (round trip)
+  destination_lng: number     # Set explicitly only if the trip ends somewhere different from where it started
   vehicle: string             # e.g. "SUV", "Sedan", "RV"
 
 # ============================================================
@@ -58,6 +62,7 @@ days:
       lng: number
       notes: string           # Free-form: pool, breakfast, special features
       navigate_url: string    # Google Maps nav link
+      media:                  # Optional — same shape as stops[].media (see below). Post-trip photos of the stay.
 
     alerts:                   # Optional array of important warnings
       - string                # e.g. "⏰ Dad has a 7:30 PM meeting..."
@@ -82,6 +87,23 @@ days:
         kid_friendly: boolean # Optional
         accessibility: string # Optional — wheelchair, stroller notes
 
+        # POST-TRIP MEDIA (optional) — actual photos/videos captured at this stop.
+        # Populated by `tripkit media <folder> <trip.yaml>` from geotagged files,
+        # reviewed/captioned, then merged with `tripkit media apply`. Purely additive:
+        # stops without `media` render exactly as before. `image` above remains the
+        # single hero/primary image; `media` is the gallery shown in cards, popups,
+        # the lightbox, and (when items carry lat/lng) the toggleable photo-pin layer.
+        media:
+          - src: string         # Relative path (e.g. "media/IMG_2401.jpg") OR full URL.
+                                #   URLs keep the output a shareable single file.
+            type: string        # "photo" | "video"
+            thumb: string       # Optional pre-generated thumbnail path/URL (sharp, if available);
+                                #   renderer falls back to `src` when absent.
+            caption: string     # Optional human/agent caption shown in the lightbox
+            lat: number         # Optional — original EXIF GPS; drives the photo-pin map layer
+            lng: number
+            taken_at: string    # Optional — EXIF timestamp (ISO 8601), used for day matching
+
 # ============================================================
 # ROUTES — map polylines connecting stops
 # Optional: if omitted, renderer draws straight lines between stops
@@ -102,6 +124,9 @@ theme:
   map_style: string           # "terrain" | "satellite" | "topo" | "street"
   dark_mode: boolean          # Default: false
   hero_style: string          # "photo" | "gradient" | "minimal"
+  hotel_label: string         # Optional 1–4 char label for hotel markers (e.g. "MAR", "BW", "INN").
+                              # Falls back to first 3 chars of agent_context.preferences.accommodation_chain,
+                              # then 🏨 emoji.
 
 # ============================================================
 # AGENT CONTEXT — metadata for the planning agent

package/scripts/check-skill-coverage.js

@@ -0,0 +1,66 @@
+#!/usr/bin/env node
+/**
+ * Coverage check: every renderer-meaningful schema field must be mentioned
+ * by name in the agent skill. Prevents drift when fields are added.
+ *
+ * Run: node scripts/check-skill-coverage.js
+ * (also wired into `npm test`)
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const ROOT = path.join(__dirname, '..');
+const skill = fs.readFileSync(path.join(ROOT, 'agent', 'SKILL.md'), 'utf8');
+
+// Hand-curated list of fields the agent must know about. When you add a renderer-
+// meaningful field, add it here and to agent/SKILL.md in the same change.
+const REQUIRED_FIELDS = [
+  // trip
+  'trip.title', 'trip.dates', 'trip.total_days', 'trip.total_stops',
+  'trip.origin', 'trip.origin_lat', 'trip.origin_lng',
+  'trip.destination_lat', 'trip.destination_lng',
+  // days
+  'days[].number', 'days[].title', 'days[].date', 'days[].status', 'days[].color',
+  'days[].summary', 'days[].weather', 'days[].meals', 'days[].lodging',
+  'days[].alerts', 'days[].tips', 'days[].stops',
+  // stops
+  'stops[].name', 'stops[].lat', 'stops[].lng', 'stops[].type', 'stops[].label',
+  'stops[].description', 'stops[].kid_friendly', 'stops[].reservation_required',
+  'stops[].navigate_url', 'stops[].media',
+  // lodging
+  'lodging.name', 'lodging.lat', 'lodging.lng', 'lodging.confirmation', 'lodging.booked',
+  // routes
+  'routes[]',
+  // theme
+  'theme.font_family', 'theme.accent_color', 'theme.map_style', 'theme.dark_mode',
+  'theme.hotel_label',
+  // agent_context
+  'agent_context.preferences', 'agent_context.constraints', 'agent_context.iteration_log',
+];
+
+// Each entry above resolves to one or more "tokens" the skill must contain.
+// Strip the path prefix so the lookup is forgiving across formats like
+// `trip.origin_lat`, ``trip.origin_lat``, or just `origin_lat`.
+function lookupTokens(field) {
+  const leaf = field.replace(/^.*\./, '').replace(/\[\]$/, '');
+  return [field, leaf];
+}
+
+const missing = [];
+for (const field of REQUIRED_FIELDS) {
+  const tokens = lookupTokens(field);
+  const found = tokens.some(t => skill.includes(t));
+  if (!found) missing.push(field);
+}
+
+if (missing.length === 0) {
+  console.log(`✓ agent/SKILL.md covers all ${REQUIRED_FIELDS.length} required fields`);
+  process.exit(0);
+}
+
+console.error(`✖ agent/SKILL.md is missing references to ${missing.length} required field(s):`);
+for (const f of missing) console.error(`  - ${f}`);
+console.error('');
+console.error('Either add a mention to agent/agent/SKILL.md, or remove it from REQUIRED_FIELDS in this script if the field is no longer renderer-meaningful.');
+process.exit(1);