npm - tripkit - Versions diffs - 1.0.0 - Mend

tripkit 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/LICENSE +21 -0
package/README.md +213 -0
package/agent/AGENT-SKILL.md +105 -0
package/agent/questionnaire.yaml +182 -0
package/convert.js +65 -0
package/docs/README.md +1 -0
package/docs/screenshot.png +0 -0
package/examples/oregon-spring-2026.yaml +588 -0
package/package.json +52 -0
package/renderers/html/tripkit-renderer.html +446 -0
package/schema/tripkit.schema.yaml +132 -0

package/renderers/html/tripkit-renderer.html ADDED Viewed

@@ -0,0 +1,446 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>TripKit — Trip Visualizer</title>
+<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='13' r='6' fill='%231b5e3b'/%3E%3Ccircle cx='16' cy='13' r='2.2' fill='%23fff'/%3E%3Cpath d='M16 19 L11 28 L21 28 Z' fill='%231b5e3b'/%3E%3C/svg%3E"/>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css"/>
+<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}
+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}
+@media(max-width:960px){.app{grid-template-columns:1fr;grid-template-rows:55vh 45vh}}
+.sidebar{display:flex;flex-direction:column;background:var(--card);border-right:1px solid var(--border);overflow:hidden}
+.sidebar-scroll{overflow-y:auto;flex:1;scroll-behavior:smooth}
+.sidebar-scroll::-webkit-scrollbar{width:5px}
+.sidebar-scroll::-webkit-scrollbar-thumb{background:var(--subtle);border-radius:3px}
+.hero{position:relative;height:165px;overflow:hidden;flex-shrink:0}
+.hero img{width:100%;height:100%;object-fit:cover;transition:opacity .4s}
+.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 15%,rgba(0,0,0,.7))}
+.hero-text{position:absolute;bottom:0;left:0;right:0;padding:16px 22px;z-index:2;color:#fff}
+.hero-text h1{font-family:var(--serif);font-size:23px;font-weight:400;line-height:1.2}
+.hero-text p{font-size:11px;opacity:.8;margin-top:3px}
+.pills{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap}
+.pill{background:rgba(255,255,255,.16);backdrop-filter:blur(6px);padding:3px 9px;border-radius:16px;font-size:10px;font-weight:500;color:#fff;border:1px solid rgba(255,255,255,.2)}
+.day-nav{display:flex;gap:2px;padding:10px 16px;border-bottom:1px solid var(--border);overflow-x:auto;flex-shrink:0;background:var(--card)}
+.day-nav::-webkit-scrollbar{height:0}
+.day-btn{border:none;background:transparent;font-family:var(--font);font-size:11px;font-weight:500;color:var(--muted);padding:6px 10px;cursor:pointer;white-space:nowrap;transition:all .15s;border-radius:6px}
+.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-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}}
+.day-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px}
+.day-num{font-family:var(--serif);font-size:44px;font-weight:400;line-height:1;color:var(--accent);opacity:.6}
+.day-info h2{font-size:15px;font-weight:600;line-height:1.3}
+.day-info .date{font-size:12px;color:var(--muted)}
+.chips{display:flex;gap:5px;flex-wrap:wrap;margin:8px 0 12px}
+.chip{display:inline-flex;align-items:center;gap:3px;font-size:10px;color:var(--muted);background:var(--bg);padding:4px 9px;border-radius:5px}
+.chip b{color:var(--text);font-weight:500}
+.callout{border-radius:8px;padding:10px 12px;margin-bottom:10px;font-size:12px;line-height:1.5}
+.callout.warn{background:var(--warn-soft);border-left:3px solid var(--warn)}
+.callout.tip{background:var(--accent-soft);border-left:3px solid var(--accent)}
+.callout.weather{background:var(--blue-soft);border-left:3px solid var(--blue)}
+.callout.eat{background:var(--amber-soft);border-left:3px solid var(--amber)}
+.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: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}
+.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)}
+.map-wrap{position:relative;height:100%}
+#map{height:100%;z-index:1}
+.map-ctrl{position:absolute;top:12px;right:12px;z-index:1000;display:flex;gap:0}
+.mbtn{border:none;background:var(--card);font-family:var(--font);font-size:10px;font-weight:500;padding:6px 10px;cursor:pointer;color:var(--muted);border:1px solid var(--border);transition:all .12s}
+.mbtn:first-child{border-radius:5px 0 0 5px}.mbtn:last-child{border-radius:0 5px 5px 0}.mbtn:not(:first-child){border-left:none}
+.mbtn.active{background:var(--text);color:#fff;border-color:var(--text)}
+.legend{position:absolute;bottom:16px;left:12px;background:var(--card);border-radius:8px;padding:10px 14px;box-shadow:0 2px 10px rgba(0,0,0,.1);border:1px solid var(--border);z-index:1000;font-size:10px;line-height:1.8}
+.legend b{display:block;font-size:11px;margin-bottom:2px}
+.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{margin:0!important;width:280px!important;font-family:var(--font)!important}
+.leaflet-popup-tip{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:hover{transform:scale(1.2)}
+.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}
+</style>
+</head>
+<body>
+<div class="app">
+<div class="sidebar">
+<div class="hero"><img id="heroImg" alt="">
+<div class="hero-text"><h1 id="tripTitle"></h1><p id="tripSubtitle"></p>
+<div class="pills" id="tripPills"></div></div></div>
+<div class="day-nav" id="nav"></div>
+<div class="sidebar-scroll" id="scroll"></div>
+</div>
+<div class="map-wrap">
+<div id="map"></div>
+<div class="map-ctrl"><button class="mbtn active" data-s="topo">Terrain</button><button class="mbtn" data-s="sat">Satellite</button><button class="mbtn" data-s="natgeo">Nat Geo</button></div>
+<div class="legend" id="legend"></div>
+<button class="fullbtn" onclick="showAll()">Full route</button>
+</div></div>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
+<script>
+// ============================================================
+// TripKit Renderer v1.0
+// Reads TRIP_DATA (JSON) and renders interactive trip visualizer
+// ============================================================
+// ▼▼▼ PASTE YOUR TRIP DATA HERE (JSON format) ▼▼▼
+// The agent generates this from the YAML schema.
+// Replace the empty object below with your trip JSON.
+const TRIP_DATA = {};
+// ▲▲▲ END TRIP DATA ▲▲▲
+// ============================================================
+// RENDERING ENGINE — do not modify below this line
+// ============================================================
+(function TripKitRenderer(data) {
+  if (!data.trip || !data.days) {
+    document.body.innerHTML = '<div style="padding:40px;font-family:system-ui;text-align:center"><h2>No trip data loaded</h2><p>Paste your trip JSON into the TRIP_DATA variable, or load a YAML file.</p></div>';
+    return;
+  }
+  const trip = data.trip;
+  const days = data.days;
+  const routes = data.routes || [];
+  const theme = data.theme || {};
+  // --- Apply theme ---
+  if (theme.accent_color) document.documentElement.style.setProperty('--accent', theme.accent_color);
+  if (theme.font_family) document.documentElement.style.setProperty('--font', theme.font_family);
+  // --- Default hero images by stop type ---
+  const defaultImages = {
+    hike: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=640&h=320&fit=crop',
+    scenic: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=640&h=320&fit=crop',
+    food: 'https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=640&h=320&fit=crop',
+    city: 'https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=640&h=320&fit=crop',
+    activity: 'https://images.unsplash.com/photo-1472214103451-9374bd1c798e?w=640&h=320&fit=crop',
+    beach: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=640&h=320&fit=crop',
+    museum: 'https://images.unsplash.com/photo-1554907984-15263bfd63bd?w=640&h=320&fit=crop',
+    shopping: 'https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=640&h=320&fit=crop',
+    default: 'https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=640&h=320&fit=crop'
+  };
+  function getImage(stop) {
+    return stop.image || defaultImages[stop.type] || defaultImages.default;
+  }
+  function getDayHero(day) {
+    // Use first stop's image as day hero
+    if (day.stops && day.stops.length > 0) return getImage(day.stops[0]);
+    return defaultImages.default;
+  }
+  // --- Populate header ---
+  const hImg = document.getElementById('heroImg');
+  document.getElementById('tripTitle').textContent = trip.title;
+  document.getElementById('tripSubtitle').textContent = trip.subtitle || '';
+  hImg.src = getDayHero(days[0]);
+  const pillsEl = document.getElementById('tripPills');
+  pillsEl.innerHTML = [
+    `${trip.total_days} days · ${trip.dates}`,
+    trip.total_miles,
+    `${trip.total_stops} stops`
+  ].filter(Boolean).map(t => `<span class="pill">${t}</span>`).join('');
+  // --- Build sidebar ---
+  const nav = document.getElementById('nav');
+  const scr = document.getElementById('scroll');
+  days.forEach((d, i) => {
+    const hasAlerts = d.alerts && d.alerts.length > 0;
+    const statusIcon = d.status === 'completed' ? '✅ ' : d.status === 'active' ? '🔵 ' : '';
+    // Nav button
+    const b = document.createElement('button');
+    b.className = 'day-btn' + (i === 0 ? ' active' : '') + (hasAlerts ? ' has-alert' : '');
+    b.textContent = `Day ${d.number}`;
+    b.onclick = () => sel(i);
+    nav.appendChild(b);
+    // Day panel
+    const pan = document.createElement('div');
+    pan.className = 'day-panel' + (i === 0 ? ' active' : '');
+    pan.id = 'p' + i;
+    let h = '';
+    // Header
+    h += `<div class="day-head"><div class="day-num">${d.number}</div>`;
+    h += `<div class="day-info"><h2>${statusIcon}${d.title}</h2>`;
+    h += `<div class="date">${d.date}</div></div></div>`;
+    // Summary chips
+    if (d.summary) {
+      h += `<div class="chips">`;
+      if (d.summary.drive) h += `<span class="chip">🚗 <b>${d.summary.drive}</b></span>`;
+      if (d.summary.hike) h += `<span class="chip">🥾 <b>${d.summary.hike}</b></span>`;
+      if (d.summary.miles) h += `<span class="chip">📏 <b>${d.summary.miles}</b></span>`;
+      h += `</div>`;
+    }
+    // Weather
+    if (d.weather) {
+      h += `<div class="callout weather"><div class="cl">🌤 Weather</div>`;
+      h += `<b>${d.weather.high || ''}`;
+      if (d.weather.low) h += ` / ${d.weather.low}`;
+      h += `</b>`;
+      if (d.weather.sky) h += ` · ${d.weather.sky}`;
+      if (d.weather.rain_chance) h += ` · ${d.weather.rain_chance} rain`;
+      if (d.weather.note) h += `<br><span style="color:var(--muted)">${d.weather.note}</span>`;
+      h += `</div>`;
+    }
+    // Alerts
+    if (hasAlerts) {
+      d.alerts.forEach(a => {
+        h += `<div class="callout warn"><div class="cl">⚠ Heads up</div>${a}</div>`;
+      });
+    }
+    // Tips
+    if (d.tips && d.tips.length > 0) {
+      d.tips.forEach(t => {
+        h += `<div class="callout tip"><div class="cl">💡 Pro tip</div>${t}</div>`;
+      });
+    }
+    // Stops
+    if (d.stops && d.stops.length > 0) {
+      h += `<div class="sec-label">Stops</div>`;
+      d.stops.forEach((s, si) => {
+        const bc = 'b-' + (s.type || 'scenic');
+        const img = getImage(s);
+        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>`;
+        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 += `</div></div>`;
+      });
+    }
+    // Meals
+    h += `<div class="sec-label">Eat & sleep</div>`;
+    if (d.meals) {
+      h += `<div class="callout eat"><div class="cl">🍽 Where to eat</div>`;
+      for (const [k, v] of Object.entries(d.meals)) {
+        if (v) h += `<b style="text-transform:capitalize">${k}:</b> ${v}<br>`;
+      }
+      h += `</div>`;
+    }
+    // Lodging
+    if (d.lodging && d.lodging.name) {
+      h += `<div class="callout sleep"><div class="cl">🛏 Where to stay</div>`;
+      h += `<b>${d.lodging.name}</b>`;
+      if (d.lodging.location) h += `, ${d.lodging.location}`;
+      if (d.lodging.price_estimate) h += ` — ${d.lodging.price_estimate}`;
+      h += `<br>`;
+      if (d.lodging.booked && d.lodging.confirmation) {
+        h += `<span class="pp-conf" style="margin-top:4px;margin-bottom:4px">✅ BOOKED — Conf# ${d.lodging.confirmation}</span><br>`;
+      }
+      if (d.lodging.notes) h += `<span style="color:var(--muted)">${d.lodging.notes}</span>`;
+      if (d.lodging.navigate_url) h += `<br><a href="${d.lodging.navigate_url}" target="_blank" style="font-size:11px;color:var(--accent)">📍 Navigate</a>`;
+      h += `</div>`;
+    }
+    pan.innerHTML = h;
+    scr.appendChild(pan);
+  });
+  // === MAP ===
+  const tiles = {
+    topo: L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', { attribution: 'Esri, USGS', maxZoom: 18 }),
+    sat: L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { attribution: 'Esri, Maxar', maxZoom: 18 }),
+    natgeo: L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}', { attribution: 'Esri, NatGeo', maxZoom: 16 })
+  };
+  const defaultTile = (theme.map_style === 'satellite') ? 'sat' : (theme.map_style === 'topo') ? 'natgeo' : 'topo';
+  const map = L.map('map', { zoomControl: true }).setView([43, -122.5], 6);
+  let curTile = tiles[defaultTile];
+  curTile.addTo(map);
+  document.querySelectorAll('.mbtn').forEach(b => b.addEventListener('click', function () {
+    document.querySelectorAll('.mbtn').forEach(x => x.classList.remove('active'));
+    this.classList.add('active');
+    map.removeLayer(curTile);
+    curTile = tiles[this.dataset.s];
+    curTile.addTo(map);
+  }));
+  // --- Routes ---
+  if (routes.length > 0) {
+    // Use explicit routes from data
+    routes.forEach(r => {
+      L.polyline(r.points, { color: '#fff', weight: (r.width || 4) + 3, opacity: 0.4 }).addTo(map);
+      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);
+        }
+      }
+    });
+  }
+  // --- Stop markers ---
+  const markers = [];
+  days.forEach((d, di) => {
+    const dm = [];
+    d.stops.forEach((s, si) => {
+      if (!s.lat || !s.lng) return;
+      const icon = L.divIcon({
+        className: '',
+        html: `<div class="cm" style="background:${d.color || '#666'}">${d.number}</div>`,
+        iconSize: [26, 26], iconAnchor: [13, 13]
+      });
+      const m = L.marker([s.lat, s.lng], { icon }).addTo(map);
+      const img = getImage(s);
+      m.bindPopup(`<div>
+        <img class="pp-img" src="${img}" alt="${s.name}" 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>
+      </div>`, { maxWidth: 280 });
+      m.on('click', () => sel(di));
+      dm.push(m);
+    });
+    markers.push(dm);
+  });
+  // --- Hotel markers ---
+  const hotels = days
+    .filter(d => d.lodging && d.lodging.lat && d.lodging.lng && d.lodging.name !== 'Home')
+    .map((d, i) => ({
+      name: d.lodging.name,
+      loc: d.lodging.location || '',
+      lat: d.lodging.lat,
+      lng: d.lodging.lng,
+      conf: d.lodging.confirmation || '',
+      day: d.date,
+      night: i + 1,
+      booked: d.lodging.booked,
+      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 icon = L.divIcon({
+      className: '',
+      html: `<div class="hm">${hotelLabel}</div>`,
+      iconSize: [32, 32], iconAnchor: [16, 16]
+    });
+    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-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>`;
+    if (h.navigate_url) popupHTML += `<br><a href="${h.navigate_url}" target="_blank" style="font-size:11px;color:var(--accent);text-decoration:none">📍 Navigate →</a>`;
+    popupHTML += `</div>`;
+    m.bindPopup(popupHTML, { maxWidth: 280 });
+  });
+  // --- Legend ---
+  const legendEl = document.getElementById('legend');
+  let legendHTML = '<b>Route segments</b>';
+  days.forEach(d => {
+    legendHTML += `<div class="lr"><i style="background:${d.color || '#666'}"></i>Day ${d.number} · ${d.title.split('→')[0].replace('✅ ','').trim()}</div>`;
+  });
+  if (hotels.length > 0) {
+    legendHTML += `<div style="border-top:1px solid var(--border);margin:5px 0 3px;padding-top:5px">`;
+    legendHTML += `<div class="lr"><div style="width:18px;height:16px;border-radius:3px;border:1.5px solid #1b5e3b;background:#fff;font-size:7px;font-weight:700;color:#1b5e3b;display:flex;align-items:center;justify-content:center;flex-shrink:0">${hotelLabel}</div>`;
+    legendHTML += `Booked hotels (${hotels.length})</div></div>`;
+  }
+  legendEl.innerHTML = legendHTML;
+  // --- Fit bounds ---
+  const allPts = days.flatMap(d => (d.stops || []).filter(s => s.lat && s.lng).map(s => [s.lat, s.lng]));
+  const fullBounds = L.latLngBounds(allPts).pad(0.06);
+  map.fitBounds(fullBounds);
+  // --- Navigation ---
+  function sel(i) {
+    document.querySelectorAll('.day-btn').forEach((b, j) => b.classList.toggle('active', j === i));
+    document.querySelectorAll('.day-panel').forEach((p, j) => p.classList.toggle('active', j === i));
+    hImg.src = getDayHero(days[i]);
+    const d = days[i];
+    const pts = (d.stops || []).filter(s => s.lat && s.lng).map(s => [s.lat, s.lng]);
+    if (pts.length > 0) {
+      const bounds = L.latLngBounds(pts);
+      map.fitBounds(bounds.pad(0.3), { animate: true, maxZoom: 11 });
+    }
+    nav.querySelector('.day-btn.active')?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
+    scr.scrollTo({ top: 0, behavior: 'smooth' });
+  }
+  window.tripFocus = function (di, si) {
+    const s = days[di].stops[si];
+    if (s.lat && s.lng) {
+      map.setView([s.lat, s.lng], 12, { animate: true });
+      setTimeout(() => markers[di][si]?.openPopup(), 300);
+    }
+  };
+  window.showAll = function () {
+    map.fitBounds(fullBounds, { animate: true });
+  };
+  // Set page title
+  document.title = trip.title + ' — TripKit';
+})(TRIP_DATA);
+</script>
+</body>
+</html>

package/schema/tripkit.schema.yaml ADDED Viewed

@@ -0,0 +1,132 @@
+# TripKit Schema Specification v1.0
+# This file defines the data contract for trip plans.
+# Any renderer (HTML, React, mobile) can consume this format.
+# Any agent (Claude, GPT, Gemini, human) can produce it.
+# ============================================================
+# TRIP METADATA
+# ============================================================
+trip:
+  title: string              # e.g. "Oregon Spring Break 2026"
+  subtitle: string            # e.g. "Redwoods · Coast · Waterfalls"
+  dates: string               # e.g. "April 4–9, 2026"
+  total_days: integer
+  total_miles: string         # e.g. "~1,600 mi"
+  total_stops: integer
+  travelers:                  # Optional — for agent context
+    adults: integer
+    children: integer
+    ages: string              # e.g. "Kids: 14, 17"
+  origin: string              # e.g. "Folsom, CA"
+  vehicle: string             # e.g. "SUV", "Sedan", "RV"
+# ============================================================
+# DAYS — the core data structure
+# ============================================================
+days:
+  - number: integer           # 1, 2, 3...
+    title: string             # e.g. "Stout Grove → Boardman → Florence"
+    date: string              # e.g. "Sunday, April 5"
+    status: string            # "completed" | "active" | "upcoming"
+    color: string             # Hex color for map route, e.g. "#2e7db5"
+    summary:
+      drive: string           # e.g. "5–5.5 hrs"
+      hike: string            # e.g. "1–2 hrs" or "—"
+      miles: string           # e.g. "~230 mi"
+    weather:                  # Optional — filled by agent closer to trip
+      high: string            # e.g. "59°F"
+      low: string             # e.g. "37°F"
+      sky: string             # e.g. "Patchy fog AM, then sunny"
+      rain_chance: string     # e.g. "10%"
+      note: string            # Human-readable context
+    meals:
+      breakfast: string       # Restaurant name + note
+      lunch: string
+      dinner: string
+      snack: string           # Optional
+    lodging:
+      name: string            # e.g. "Best Western Plus Cascade Inn & Suites"
+      location: string        # e.g. "Troutdale, Oregon"
+      price_estimate: string  # e.g. "~$150/night"
+      confirmation: string    # e.g. "ABC123456" — filled after booking
+      booked: boolean         # true once reserved
+      lat: number
+      lng: number
+      notes: string           # Free-form: pool, breakfast, special features
+      navigate_url: string    # Google Maps nav link
+    alerts:                   # Optional array of important warnings
+      - string                # e.g. "⏰ Dad has a 7:30 PM meeting..."
+    tips:                     # Optional array of pro tips
+      - string                # e.g. "Stout Grove is 28 min via Howland Hill Road..."
+    stops:
+      - name: string          # e.g. "Multnomah Falls"
+        lat: number           # 45.576
+        lng: number           # -122.116
+        type: string          # "hike" | "scenic" | "food" | "city" | "activity" | "beach" | "museum" | "shopping"
+        label: string         # Short display label, e.g. "Hike", "Sunset", "Lunch"
+        description: string   # 2–3 sentence description with insider tips
+        duration: string      # e.g. "1–1.5 hrs", "30–45 min"
+        image: string         # URL or local path (optional)
+        parking_fee: string   # e.g. "$12" (optional)
+        reservation_required: boolean  # Optional
+        reservation_url: string        # Optional
+        navigate_url: string  # Google Maps nav link
+        hours: string         # e.g. "Dawn to dusk" (optional)
+        kid_friendly: boolean # Optional
+        accessibility: string # Optional — wheelchair, stroller notes
+# ============================================================
+# ROUTES — map polylines connecting stops
+# Optional: if omitted, renderer draws straight lines between stops
+# ============================================================
+routes:
+  - day: integer              # Which day this route belongs to
+    color: string             # Hex color (usually matches day color)
+    width: number             # Line width in pixels
+    points:                   # Array of [lat, lng] waypoints
+      - [number, number]
+# ============================================================
+# THEME — optional visual customization
+# ============================================================
+theme:
+  font_family: string         # e.g. "DM Sans, sans-serif"
+  accent_color: string        # Primary accent, e.g. "#2d7a50"
+  map_style: string           # "terrain" | "satellite" | "topo" | "street"
+  dark_mode: boolean          # Default: false
+  hero_style: string          # "photo" | "gradient" | "minimal"
+# ============================================================
+# AGENT CONTEXT — metadata for the planning agent
+# Not rendered, but preserved for refinement iterations
+# ============================================================
+agent_context:
+  preferences:
+    pace: string              # "relaxed" | "moderate" | "packed"
+    budget: string            # "budget" | "mid-range" | "luxury"
+    accommodation_chain: string  # e.g. "Best Western" (loyalty program)
+    interests:                # Ranked list
+      - string                # e.g. "waterfalls", "beaches", "food", "hiking"
+    dietary: string           # Optional
+    mobility: string          # Optional constraints
+  constraints:
+    max_drive_per_day: string # e.g. "6 hours"
+    must_see:                 # Non-negotiable stops
+      - string
+    avoid:                    # Things to skip
+      - string
+    schedule_blocks:          # Work meetings, commitments
+      - day: integer
+        time: string
+        duration: string
+        note: string
+  iteration_log:              # Track changes for context
+    - date: string
+      change: string          # e.g. "Swapped Seaside for Astoria — Goonies house"