tripkit 1.0.1 → 1.1.0

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 All notable changes to TripKit are documented here. Versioning follows [SemVer](https://semver.org/).
 
+## [1.1.0] — 2026-04-30
+
+### Added
+- **`tripkit validate <trip.yaml>`** — schema validator that checks required fields, lat/lng ranges, valid stop types, hex colors, day numbering (sequential, status enum), `trip.total_days` / `trip.total_stops` consistency, optional routes structure, and theme fields. Warnings are advisory; errors block render.
+- Pre-render validation is now automatic. Pass `--no-validate` to bypass.
+- Mobile polish at iPhone widths (≤480px): collapsible map legend (tap to expand), tighter day-nav, smaller hero, repositioned map controls. No regression at desktop or tablet sizes.
+
+### Fixed
+- CSS cascade bug: previous mobile media query was placed before base `.legend` rules, so overrides silently lost the cascade. Moved to end of stylesheet where it belongs.
+
 ## [1.0.1] — 2026-04-30
 
 ### Fixed

package/README.md

@@ -65,6 +65,16 @@ node convert.js examples/oregon-spring-2026.yaml my-trip.html
 open my-trip.html
 ```
 
+### Validate before you render
+
+TripKit ships with a schema validator that catches data bugs before they reach the renderer:
+
+```bash
+npx tripkit validate my-trip.yaml
+```
+
+It checks required fields, lat/lng ranges, valid stop types, hex colors, day numbering, and warns when `trip.total_stops` doesn't match the actual count. Validation also runs automatically before each render — pass `--no-validate` to skip it.
+
 ### Option 3: With an AI Agent (everyone)
 
 1. Start a conversation with your preferred AI agent (Claude recommended)

package/convert.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 /**
- * TripKit CLI — Convert YAML trip data to interactive HTML
+ * TripKit CLI — Convert YAML trip data to interactive HTML, or validate a YAML file.
  */
 
 const fs = require('fs');
@@ -14,25 +14,31 @@ try {
   process.exit(1);
 }
 
+const { validate } = require('./validate');
+
 const invokedAs = path.basename(process.argv[1] || 'tripkit') === 'convert.js'
   ? 'node convert.js'
   : 'tripkit';
 
 const args = process.argv.slice(2);
-if (args.length === 0 || args[0] === '-h' || args[0] === '--help') {
+
+function printHelp() {
   console.log(`
-TripKit — Convert YAML trip data to interactive HTML
+TripKit — AI-friendly trip planning toolkit
 
 Usage:
-  ${invokedAs} <trip.yaml> [output.html]
-
-Example:
-  ${invokedAs} my-trip.yaml my-trip.html
+  ${invokedAs} <trip.yaml> [output.html]    Render YAML to interactive HTML
+  ${invokedAs} validate <trip.yaml>         Check a trip YAML for schema errors
 
 Flags:
   -h, --help       Show this help
   -v, --version    Show version
+  --no-validate    Skip the pre-render validation pass (renders even with warnings)
 `);
+}
+
+if (args.length === 0 || args[0] === '-h' || args[0] === '--help') {
+  printHelp();
   process.exit(0);
 }
 
@@ -41,12 +47,78 @@ if (args[0] === '-v' || args[0] === '--version') {
   process.exit(0);
 }
 
-const inputFile = args[0];
-const outputFile = args[1] || inputFile.replace(/\.ya?ml$/, '.html');
+// --- ANSI color helpers (auto-disabled when not a TTY or NO_COLOR is set) ---
+const useColor = process.stdout.isTTY && !process.env.NO_COLOR;
+const c = useColor
+  ? { red: s => `\x1b[31m${s}\x1b[0m`, yellow: s => `\x1b[33m${s}\x1b[0m`, green: s => `\x1b[32m${s}\x1b[0m`, dim: s => `\x1b[2m${s}\x1b[0m`, bold: s => `\x1b[1m${s}\x1b[0m` }
+  : { red: s => s, yellow: s => s, green: s => s, dim: s => s, bold: s => s };
+
+function loadYaml(inputFile) {
+  if (!fs.existsSync(inputFile)) {
+    console.error(c.red(`Error: file not found: ${inputFile}`));
+    process.exit(1);
+  }
+  try {
+    return yaml.load(fs.readFileSync(inputFile, 'utf8'));
+  } catch (e) {
+    console.error(c.red(`YAML parse error in ${inputFile}:`));
+    console.error(`  ${e.message}`);
+    process.exit(1);
+  }
+}
+
+function reportFindings(errors, warnings) {
+  errors.forEach(({ path: p, message }) => {
+    console.error(`  ${c.red('✖')} ${c.bold(p)} — ${message}`);
+  });
+  warnings.forEach(({ path: p, message }) => {
+    console.error(`  ${c.yellow('⚠')} ${c.bold(p)} — ${message}`);
+  });
+}
+
+// === SUBCOMMAND: validate ===
+if (args[0] === 'validate') {
+  const inputFile = args[1];
+  if (!inputFile) {
+    console.error(c.red('Usage: ') + `${invokedAs} validate <trip.yaml>`);
+    process.exit(1);
+  }
+  const tripData = loadYaml(inputFile);
+  const { errors, warnings } = validate(tripData);
+  if (errors.length === 0 && warnings.length === 0) {
+    console.log(c.green('✓') + ` ${inputFile} is valid`);
+    process.exit(0);
+  }
+  console.log(c.bold(`${inputFile}`));
+  reportFindings(errors, warnings);
+  console.log('');
+  console.log(`  ${errors.length} error${errors.length === 1 ? '' : 's'}, ${warnings.length} warning${warnings.length === 1 ? '' : 's'}`);
+  process.exit(errors.length > 0 ? 1 : 0);
+}
+
+// === DEFAULT: render ===
+const skipValidate = args.includes('--no-validate');
+const positional = args.filter(a => !a.startsWith('-'));
+const inputFile = positional[0];
+const outputFile = positional[1] || inputFile.replace(/\.ya?ml$/, '.html');
 
-// Read and parse YAML
-const yamlContent = fs.readFileSync(inputFile, 'utf8');
-const tripData = yaml.load(yamlContent);
+const tripData = loadYaml(inputFile);
+
+if (!skipValidate) {
+  const { errors, warnings } = validate(tripData);
+  if (errors.length > 0) {
+    console.error(c.red(`✖ Validation failed for ${inputFile}:`));
+    reportFindings(errors, warnings);
+    console.error('');
+    console.error(c.dim(`Fix the errors above, or pass --no-validate to render anyway.`));
+    process.exit(1);
+  }
+  if (warnings.length > 0) {
+    console.error(c.yellow(`⚠ Validation warnings for ${inputFile}:`));
+    reportFindings([], warnings);
+    console.error('');
+  }
+}
 
 // Read HTML template
 const templatePath = path.join(__dirname, 'renderers', 'html', 'tripkit-renderer.html');
@@ -59,7 +131,6 @@ template = template.replace(
   `const TRIP_DATA = ${jsonData};`
 );
 
-// Write output
 fs.writeFileSync(outputFile, template, 'utf8');
 console.log(`✅ Generated: ${outputFile}`);
 console.log(`   ${tripData.trip.title} — ${tripData.trip.total_days} days, ${tripData.trip.total_stops} stops`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tripkit",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Open-source framework for AI-assisted trip planning with beautiful interactive visualizers",
   "main": "convert.js",
   "bin": {
@@ -8,6 +8,7 @@
   },
   "files": [
     "convert.js",
+    "validate.js",
     "renderers/html/tripkit-renderer.html",
     "schema/tripkit.schema.yaml",
     "examples/oregon-spring-2026.yaml",

package/renderers/html/tripkit-renderer.html

@@ -18,6 +18,7 @@ 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}}
+.legend-toggle{display:none}
 .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}
@@ -93,6 +94,18 @@ body{font-family:var(--font);background:var(--bg);color:var(--text)}
   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}
+@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}
+  .day-panel{padding:12px 14px 32px}
+  .legend{bottom:auto;top:52px;left:8px;right:auto;padding:6px 10px;font-size:9px;line-height:1.6;max-width:60%}
+  .legend.collapsed .lr,.legend.collapsed > div:not(.legend-toggle){display:none}
+  .legend-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:10px;font-weight:600;user-select:none;color:var(--text)}
+  .legend-toggle::after{content:'▾';font-size:9px;transition:transform .15s;color:var(--muted)}
+  .legend.collapsed .legend-toggle::after{transform:rotate(-90deg)}
+  .map-ctrl{top:8px;right:8px}.mbtn{padding:5px 8px;font-size:9px}
+  .fullbtn{bottom:10px;right:8px;padding:5px 10px;font-size:10px}
+}
 </style>
 </head>
 <body>
@@ -394,7 +407,7 @@ const TRIP_DATA = {};
 
   // --- Legend ---
   const legendEl = document.getElementById('legend');
-  let legendHTML = '<b>Route segments</b>';
+  let legendHTML = '<div class="legend-toggle"><span>Route segments</span></div>';
   days.forEach(d => {
     legendHTML += `<div class="lr"><i style="background:${d.color || '#666'}"></i>Day ${d.number} · ${d.title.split('→')[0].replace('✅ ','').trim()}</div>`;
   });
@@ -404,6 +417,8 @@ const TRIP_DATA = {};
     legendHTML += `Booked hotels (${hotels.length})</div></div>`;
   }
   legendEl.innerHTML = legendHTML;
+  if (window.matchMedia('(max-width: 480px)').matches) legendEl.classList.add('collapsed');
+  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]));

package/validate.js

@@ -0,0 +1,159 @@
+/**
+ * TripKit YAML validator.
+ *
+ * Exports `validate(data)` returning { errors, warnings } — each is a list of
+ * { path, message } objects. Errors block render; warnings are advisory.
+ */
+
+const STOP_TYPES = new Set(['hike', 'scenic', 'food', 'city', 'activity', 'beach', 'museum', 'shopping']);
+const DAY_STATUS = new Set(['completed', 'active', 'upcoming']);
+const MAP_STYLES = new Set(['terrain', 'satellite', 'topo', 'street']);
+const HEX = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+
+function isFiniteNumber(n) { return typeof n === 'number' && Number.isFinite(n); }
+function isNonEmptyString(s) { return typeof s === 'string' && s.trim().length > 0; }
+
+function validate(data) {
+  const errors = [];
+  const warnings = [];
+  const err = (path, message) => errors.push({ path, message });
+  const warn = (path, message) => warnings.push({ path, message });
+
+  if (!data || typeof data !== 'object') {
+    err('(root)', 'YAML did not parse to an object');
+    return { errors, warnings };
+  }
+
+  // --- trip ---
+  const trip = data.trip;
+  if (!trip || typeof trip !== 'object') {
+    err('trip', 'missing trip metadata block');
+  } else {
+    if (!isNonEmptyString(trip.title)) err('trip.title', 'required, non-empty string');
+    if (trip.total_days != null && !Number.isInteger(trip.total_days)) {
+      err('trip.total_days', `must be an integer, got ${typeof trip.total_days}`);
+    }
+    if (trip.total_stops != null && !Number.isInteger(trip.total_stops)) {
+      err('trip.total_stops', `must be an integer, got ${typeof trip.total_stops}`);
+    }
+  }
+
+  // --- days ---
+  const days = data.days;
+  if (!Array.isArray(days) || days.length === 0) {
+    err('days', 'must be a non-empty array');
+    return { errors, warnings };
+  }
+
+  let actualStops = 0;
+  days.forEach((d, di) => {
+    const dp = `days[${di}]`;
+    if (!d || typeof d !== 'object') {
+      err(dp, 'must be an object');
+      return;
+    }
+    if (!Number.isInteger(d.number)) err(`${dp}.number`, 'required integer');
+    else if (d.number !== di + 1) warn(`${dp}.number`, `expected ${di + 1} (sequential), got ${d.number}`);
+    if (!isNonEmptyString(d.title)) err(`${dp}.title`, 'required, non-empty string');
+    if (!isNonEmptyString(d.date)) err(`${dp}.date`, 'required, non-empty string');
+    if (d.status != null && !DAY_STATUS.has(d.status)) {
+      err(`${dp}.status`, `must be one of ${[...DAY_STATUS].join(', ')}; got "${d.status}"`);
+    }
+    if (d.color != null && !HEX.test(d.color)) {
+      err(`${dp}.color`, `must be a hex color (#abc or #aabbcc); got "${d.color}"`);
+    }
+
+    // stops
+    if (d.stops != null) {
+      if (!Array.isArray(d.stops)) {
+        err(`${dp}.stops`, 'must be an array');
+      } else {
+        d.stops.forEach((s, si) => {
+          const sp = `${dp}.stops[${si}]`;
+          actualStops++;
+          if (!s || typeof s !== 'object') { err(sp, 'must be an object'); return; }
+          if (!isNonEmptyString(s.name)) err(`${sp}.name`, 'required, non-empty string');
+          if (!isFiniteNumber(s.lat)) err(`${sp}.lat`, 'required finite number');
+          else if (s.lat < -90 || s.lat > 90) err(`${sp}.lat`, `out of range [-90, 90]: ${s.lat}`);
+          if (!isFiniteNumber(s.lng)) err(`${sp}.lng`, 'required finite number');
+          else if (s.lng < -180 || s.lng > 180) err(`${sp}.lng`, `out of range [-180, 180]: ${s.lng}`);
+          if (s.type != null && !STOP_TYPES.has(s.type)) {
+            err(`${sp}.type`, `must be one of ${[...STOP_TYPES].join(', ')}; got "${s.type}"`);
+          }
+          if (s.kid_friendly != null && typeof s.kid_friendly !== 'boolean') {
+            err(`${sp}.kid_friendly`, 'must be boolean');
+          }
+        });
+      }
+    }
+
+    // lodging
+    if (d.lodging && typeof d.lodging === 'object') {
+      const lp = `${dp}.lodging`;
+      const { lat, lng } = d.lodging;
+      if (lat != null && (!isFiniteNumber(lat) || lat < -90 || lat > 90)) {
+        err(`${lp}.lat`, `must be a number in [-90, 90]; got ${lat}`);
+      }
+      if (lng != null && (!isFiniteNumber(lng) || lng < -180 || lng > 180)) {
+        err(`${lp}.lng`, `must be a number in [-180, 180]; got ${lng}`);
+      }
+      if (d.lodging.booked != null && typeof d.lodging.booked !== 'boolean') {
+        err(`${lp}.booked`, 'must be boolean');
+      }
+      const isHome = d.lodging.name === 'Home';
+      if (d.lodging.booked && !isHome && !isNonEmptyString(d.lodging.confirmation)) {
+        warn(`${lp}.confirmation`, 'lodging is marked booked but confirmation is empty');
+      }
+    }
+  });
+
+  // --- cross-check totals ---
+  if (trip && Number.isInteger(trip.total_days) && trip.total_days !== days.length) {
+    warn('trip.total_days', `declared ${trip.total_days}, actual days = ${days.length}`);
+  }
+  if (trip && Number.isInteger(trip.total_stops) && trip.total_stops !== actualStops) {
+    warn('trip.total_stops', `declared ${trip.total_stops}, actual stops = ${actualStops}`);
+  }
+
+  // --- routes (optional) ---
+  if (data.routes != null) {
+    if (!Array.isArray(data.routes)) {
+      err('routes', 'must be an array when present');
+    } else {
+      data.routes.forEach((r, ri) => {
+        const rp = `routes[${ri}]`;
+        if (!Number.isInteger(r.day)) err(`${rp}.day`, 'required integer');
+        else if (r.day < 1 || r.day > days.length) {
+          err(`${rp}.day`, `references day ${r.day}, but only ${days.length} days exist`);
+        }
+        if (r.color != null && !HEX.test(r.color)) err(`${rp}.color`, `must be hex; got "${r.color}"`);
+        if (!Array.isArray(r.points) || r.points.length < 2) {
+          err(`${rp}.points`, 'must be an array of at least 2 [lat, lng] pairs');
+        } else {
+          r.points.forEach((pt, pi) => {
+            if (!Array.isArray(pt) || pt.length !== 2 || !isFiniteNumber(pt[0]) || !isFiniteNumber(pt[1])) {
+              err(`${rp}.points[${pi}]`, 'must be [lat, lng] number pair');
+            }
+          });
+        }
+      });
+    }
+  }
+
+  // --- theme (optional) ---
+  if (data.theme && typeof data.theme === 'object') {
+    if (data.theme.accent_color != null && !HEX.test(data.theme.accent_color)) {
+      err('theme.accent_color', `must be hex; got "${data.theme.accent_color}"`);
+    }
+    if (data.theme.dark_mode != null && typeof data.theme.dark_mode !== 'boolean') {
+      err('theme.dark_mode', 'must be boolean');
+    }
+    if (data.theme.map_style != null && !MAP_STYLES.has(data.theme.map_style)) {
+      err('theme.map_style', `must be one of ${[...MAP_STYLES].join(', ')}; got "${data.theme.map_style}"`);
+    }
+  }
+
+  return { errors, warnings };
+}
+
+module.exports = { validate };