ADV160 Maintenance

${d.name}` +\n `

` +\n (d.next_due_km != null ? `Due at ${Math.round(d.next_due_km).toLocaleString(\"en-US\")} km. ` : \"\") +\n (d.next_due_date != null ? `Due by ${fmtDate(d.next_due_date)}. ` : \"\") +\n (d.reason ? `${d.reason}.` : \"\") +\n `

`;\n\n const html =\n `

` +\n `

🏍️ Maintenance due

` +\n `

${vehicle.year ?? \"\"} ${vehicle.make} ${vehicle.model} · odometer ${currencyKm}

` +\n (overdue.length\n ? `

Overdue

${overdue.map((d) => htmlItem(d, \"#c0392b\")).join(\"\")}`\n : \"\") +\n (soon.length\n ? `

Due soon

${soon.map((d) => htmlItem(d, \"#b7791f\")).join(\"\")}`\n : \"\") +\n (actionableDocs.length\n ? `

Document renewals

${d.name || d.doc_type}
${d.doc_type}${d.expiry_date ? ` · ${d.status === \"expired\" ? \"expired\" : \"expires\"} ${d.expiry_date}` : \"\"}

`\n : \"\") +\n `

Open your maintenance tracker →

` +\n `

`;\n\n const totalCount = actionable.length + actionableDocs.length;\n await email({\n subject: `🏍️ ADV160: ${totalCount} item${totalCount === 1 ? \"\" : \"s\"} need attention`,\n text,\n html,\n });\n\n // Record that we reminded about these service types.\n const nowIso = new Date().toISOString();\n const updates = [\n ...actionable.map((d) => ({\n sql: \"UPDATE service_types SET last_reminder_sent_at = ? WHERE id = ?\",\n args: [nowIso, d.service_type_id],\n })),\n ...actionableDocs.map((d) => ({\n sql: \"UPDATE documents SET last_reminder_sent_at = ? WHERE id = ?\",\n args: [nowIso, d.id],\n })),\n ];\n if (updates.length) await sqlite.batch(updates);\n\n const included = [\n ...actionable.map((d) => d.name),\n ...actionableDocs.map((d) => d.name || d.doc_type),\n ];\n return { sent: true, reason: `Emailed ${included.length} item(s)`, included };\n}\n\n",[19,71],"4fbe2367-c276-426a-8023-ca726fcb0770","genicons.ts","c15a88bc-7f54-11f1-a763-1607ee4eb77e",157,["D",1784601391479],3,"// One-time generator: rasterizes the app icon to PNGs (192 & 512) and stores them\n// in val blob storage. Re-run with run_file if the icon design changes.\nimport { initWasm, Resvg } from \"npm:@resvg/resvg-wasm@2.6.2\";\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\n\n// Full-bleed version of frontend/icon.svg (no rounded corners — the OS masks the shape).\nconst SVG = ``;\n\nawait initWasm(fetch(\"https://unpkg.com/@resvg/resvg-wasm@2.6.2/index_bg.wasm\"));\n\nfor (const size of [192, 512]) {\n const resvg = new Resvg(SVG, { fitTo: { mode: \"width\", value: size } });\n const png = resvg.render().asPng();\n await blob.set(`icon-${size}.png`, png);\n console.log(`stored icon-${size}.png (${png.length} bytes)`);\n}\nconsole.log(\"done\");\n",[19,79],"67afc54c-fadb-4f58-831a-b6b6176c23d3","db.ts","38b648ae-7f0c-11f1-93a5-1607ee4eb77e",64,["D",1783985930346],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { DEFAULT_SERVICES } from \"../shared/schedule.ts\";\nimport type {\n DocItem,\n FuelLog,\n ServiceRecord,\n ServiceType,\n Settings,\n Vehicle,\n} from \"../shared/types.ts\";\n\n// ---- Schema + seed (idempotent, memoized so it runs once per warm instance) ----\n\nlet readyPromise: Promise | null = null;\n\nexport function ready(): Promise {\n if (!readyPromise) readyPromise = init();\n return readyPromise;\n}\n\nfunction today(): string {\n return new Date().toISOString().slice(0, 10);\n}\n\nasync function init(): Promise {\n await sqlite.batch([\n `CREATE TABLE IF NOT EXISTS vehicle (\n id INTEGER PRIMARY KEY,\n name TEXT NOT NULL DEFAULT '',\n make TEXT NOT NULL DEFAULT '',\n model TEXT NOT NULL DEFAULT '',\n year INTEGER,\n plate TEXT NOT NULL DEFAULT '',\n color TEXT NOT NULL DEFAULT '',\n baseline_odometer_km INTEGER NOT NULL DEFAULT 0,\n baseline_date TEXT NOT NULL,\n current_odometer_km INTEGER NOT NULL DEFAULT 0,\n odometer_updated_at TEXT NOT NULL\n )`,\n `CREATE TABLE IF NOT EXISTS settings (\n id INTEGER PRIMARY KEY,\n reminder_lead_days INTEGER NOT NULL DEFAULT 7,\n reminder_lead_km INTEGER NOT NULL DEFAULT 200,\n currency TEXT NOT NULL DEFAULT 'PHP',\n timezone TEXT NOT NULL DEFAULT 'Asia/Manila',\n email TEXT NOT NULL DEFAULT ''\n )`,\n `CREATE TABLE IF NOT EXISTS odometer_readings (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n km INTEGER NOT NULL,\n recorded_at TEXT NOT NULL\n )`,\n `CREATE TABLE IF NOT EXISTS service_types (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n service_key TEXT,\n name TEXT NOT NULL,\n category TEXT NOT NULL DEFAULT 'Other',\n interval_km INTEGER,\n interval_months INTEGER,\n first_km INTEGER,\n first_months INTEGER,\n enabled INTEGER NOT NULL DEFAULT 1,\n note TEXT NOT NULL DEFAULT '',\n last_reminder_sent_at TEXT\n )`,\n `CREATE TABLE IF NOT EXISTS service_records (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n service_type_id INTEGER,\n name TEXT NOT NULL,\n performed_at TEXT NOT NULL,\n odometer_km INTEGER,\n cost REAL,\n notes TEXT NOT NULL DEFAULT '',\n photo_keys TEXT NOT NULL DEFAULT '[]',\n created_at TEXT NOT NULL\n )`,\n `CREATE TABLE IF NOT EXISTS fuel_logs (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n filled_at TEXT NOT NULL,\n odometer_km INTEGER NOT NULL,\n liters REAL NOT NULL,\n price_per_liter REAL,\n total_cost REAL,\n is_full_tank INTEGER NOT NULL DEFAULT 1,\n notes TEXT NOT NULL DEFAULT '',\n created_at TEXT NOT NULL\n )`,\n `CREATE TABLE IF NOT EXISTS documents (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n doc_type TEXT NOT NULL DEFAULT 'Other',\n name TEXT NOT NULL DEFAULT '',\n reference TEXT NOT NULL DEFAULT '',\n issue_date TEXT,\n expiry_date TEXT,\n notes TEXT NOT NULL DEFAULT '',\n file_keys TEXT NOT NULL DEFAULT '[]',\n last_reminder_sent_at TEXT,\n created_at TEXT NOT NULL\n )`,\n ]);\n\n // Seed the single vehicle row.\n const v = await sqlite.execute(\"SELECT COUNT(*) AS n FROM vehicle\");\n if (Number(v.rows[0].n) === 0) {\n await sqlite.execute({\n sql: `INSERT INTO vehicle\n (id, name, make, model, year, plate, color, baseline_odometer_km, baseline_date, current_odometer_km, odometer_updated_at)\n VALUES (1, ?, 'Honda', 'ADV160', 2026, '', 'Pearl White', 0, ?, 0, ?)`,\n args: [\"My ADV160\", today(), new Date().toISOString()],\n });\n }\n\n // Seed settings.\n const s = await sqlite.execute(\"SELECT COUNT(*) AS n FROM settings\");\n if (Number(s.rows[0].n) === 0) {\n await sqlite.execute(\n \"INSERT INTO settings (id, reminder_lead_days, reminder_lead_km, currency, timezone, email) VALUES (1, 7, 200, 'PHP', 'Asia/Manila', '')\",\n );\n }\n\n // Seed the ADV160 service schedule.\n const st = await sqlite.execute(\"SELECT COUNT(*) AS n FROM service_types\");\n if (Number(st.rows[0].n) === 0) {\n await sqlite.batch(\n DEFAULT_SERVICES.map((d) => ({\n sql: `INSERT INTO service_types\n (service_key, name, category, interval_km, interval_months, first_km, first_months, enabled, note)\n VALUES (?, ?, ?, ?, ?, ?, ?, 1, ?)`,\n args: [\n d.key,\n d.name,\n d.category,\n d.interval_km,\n d.interval_months,\n d.first_km,\n d.first_months,\n d.note,\n ],\n })),\n );\n }\n}\n\n// ---- Row mappers ----\n\nfunction num(x: unknown): number {\n return x == null ? 0 : Number(x);\n}\nfunction maybeNum(x: unknown): number | null {\n return x == null ? null : Number(x);\n}\nfunction str(x: unknown): string {\n return x == null ? \"\" : String(x);\n}\n\nexport function mapVehicle(r: Record): Vehicle {\n return {\n id: num(r.id),\n name: str(r.name),\n make: str(r.make),\n model: str(r.model),\n year: maybeNum(r.year),\n plate: str(r.plate),\n color: str(r.color),\n baseline_odometer_km: num(r.baseline_odometer_km),\n baseline_date: str(r.baseline_date),\n current_odometer_km: num(r.current_odometer_km),\n odometer_updated_at: str(r.odometer_updated_at),\n };\n}\n\nexport function mapSettings(r: Record): Settings {\n return {\n id: num(r.id),\n reminder_lead_days: num(r.reminder_lead_days),\n reminder_lead_km: num(r.reminder_lead_km),\n currency: str(r.currency),\n timezone: str(r.timezone),\n email: str(r.email),\n };\n}\n\nexport function mapServiceType(r: Record): ServiceType {\n return {\n id: num(r.id),\n service_key: r.service_key == null ? null : str(r.service_key),\n name: str(r.name),\n category: str(r.category),\n interval_km: maybeNum(r.interval_km),\n interval_months: maybeNum(r.interval_months),\n first_km: maybeNum(r.first_km),\n first_months: maybeNum(r.first_months),\n enabled: num(r.enabled),\n note: str(r.note),\n last_reminder_sent_at: r.last_reminder_sent_at == null ? null : str(r.last_reminder_sent_at),\n };\n}\n\nexport function mapRecord(r: Record): ServiceRecord {\n let photos: string[] = [];\n try {\n photos = JSON.parse(str(r.photo_keys) || \"[]\");\n } catch (_) {\n photos = [];\n }\n return {\n id: num(r.id),\n service_type_id: maybeNum(r.service_type_id),\n name: str(r.name),\n performed_at: str(r.performed_at),\n odometer_km: maybeNum(r.odometer_km),\n cost: maybeNum(r.cost),\n notes: str(r.notes),\n photo_keys: photos,\n created_at: str(r.created_at),\n };\n}\n\nexport function mapFuel(r: Record): FuelLog {\n return {\n id: num(r.id),\n filled_at: str(r.filled_at),\n odometer_km: num(r.odometer_km),\n liters: num(r.liters),\n price_per_liter: maybeNum(r.price_per_liter),\n total_cost: maybeNum(r.total_cost),\n is_full_tank: num(r.is_full_tank),\n notes: str(r.notes),\n created_at: str(r.created_at),\n };\n}\n\n// ---- High-level reads used by both the API and the cron job ----\n\nexport async function getVehicle(): Promise {\n await ready();\n const r = await sqlite.execute(\"SELECT * FROM vehicle WHERE id = 1\");\n return mapVehicle(r.rows[0]);\n}\n\nexport async function getSettings(): Promise {\n await ready();\n const r = await sqlite.execute(\"SELECT * FROM settings WHERE id = 1\");\n return mapSettings(r.rows[0]);\n}\n\nexport async function getServiceTypes(): Promise {\n await ready();\n const r = await sqlite.execute(\n \"SELECT * FROM service_types ORDER BY category, name\",\n );\n return r.rows.map(mapServiceType);\n}\n\nexport async function getRecords(): Promise {\n await ready();\n const r = await sqlite.execute(\n \"SELECT * FROM service_records ORDER BY performed_at DESC, id DESC\",\n );\n return r.rows.map(mapRecord);\n}\n\nexport async function getFuelLogs(): Promise {\n await ready();\n const r = await sqlite.execute(\n \"SELECT * FROM fuel_logs ORDER BY odometer_km DESC, id DESC\",\n );\n return r.rows.map(mapFuel);\n}\n\nexport function mapDocument(r: Record): DocItem {\n let files: string[] = [];\n try {\n files = JSON.parse(str(r.file_keys) || \"[]\");\n } catch (_) {\n files = [];\n }\n return {\n id: num(r.id),\n doc_type: str(r.doc_type),\n name: str(r.name),\n reference: str(r.reference),\n issue_date: r.issue_date == null ? null : str(r.issue_date),\n expiry_date: r.expiry_date == null ? null : str(r.expiry_date),\n notes: str(r.notes),\n file_keys: files,\n last_reminder_sent_at: r.last_reminder_sent_at == null ? null : str(r.last_reminder_sent_at),\n created_at: str(r.created_at),\n };\n}\n\nexport async function getDocuments(): Promise {\n await ready();\n const r = await sqlite.execute(\n \"SELECT * FROM documents ORDER BY expiry_date IS NULL, expiry_date\",\n );\n return r.rows.map(mapDocument);\n}\n\nexport { sqlite };\n",[19,87],"dc27a954-22e0-47fc-b8ad-3b4d86ada28d",4,["D",1783982589287],"directory",[19],{"_38":93,"_13":19,"_41":44,"_43":-5,"_45":46,"_47":94,"_49":50,"_51":341,"_17":53,"_54":96,"_56":-5,"_58":59,"_60":-5,"_111":342,"_18":343},{"_38":327,"_13":328,"_41":329,"_43":-5,"_45":46,"_47":156,"_49":50,"_51":330,"_17":53,"_54":96,"_56":-5,"_58":59,"_60":-5,"_111":331,"_18":332},{"_38":138,"_13":139,"_41":140,"_43":-5,"_45":46,"_47":75,"_49":50,"_51":141,"_17":53,"_54":96,"_56":-5,"_58":59,"_60":-5,"_111":142,"_18":143},{"_38":114,"_13":115,"_41":116,"_43":-5,"_45":46,"_47":67,"_49":50,"_51":117,"_17":53,"_54":96,"_56":-5,"_58":59,"_60":-5,"_111":118,"_18":119},{"_38":103,"_13":104,"_41":105,"_43":-5,"_45":46,"_47":106,"_49":50,"_51":107,"_17":108,"_54":109,"_56":110,"_58":59,"_60":-5,"_111":112,"_18":113},"c177ff20-7bcd-45df-bd59-bb0f11e420a3","index.ts","0fdb1676-7f0c-11f1-8c45-1607ee4eb77e",99,["D",1784013804318],11,"http","/**\n * Honda ADV160 maintenance tracker — HTTP entry.\n * Serves the React PWA and a JSON API. All /api/* routes are gated by\n * \"Log in with Val Town\", restricted to the owner account.\n */\nimport { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport {\n getOAuthUserData,\n oauthMiddleware,\n} from \"https://esm.town/v/std/oauth/middleware.ts\";\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\nimport {\n getDocuments,\n getFuelLogs,\n getRecords,\n getServiceTypes,\n getSettings,\n getVehicle,\n ready,\n sqlite,\n} from \"./backend/db.ts\";\nimport { computeDocs, computeDue, dateOnly, estimateKmPerDay } from \"./backend/schedule.ts\";\nimport { runReminders } from \"./backend/reminders.ts\";\nimport { costSummary, fuelEconomy } from \"./backend/stats.ts\";\nimport { CATEGORIES, DOC_TYPES } from \"./shared/schedule.ts\";\n\nconst OWNER = \"joshuaballesta\";\n\nconst app = new Hono();\napp.onError((err) => Promise.reject(err));\n\n// ---------- Static frontend (public; contains no private data) ----------\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\napp.get(\"/shared/**/*\", (c) => serveFile(c.req.path));\napp.get(\"/sw.js\", () => serveFile(\"/frontend/sw.js\"));\napp.get(\"/manifest.json\", () => serveFile(\"/frontend/manifest.json\"));\napp.get(\"/icon-192.png\", () => serveIconPng(\"icon-192.png\"));\napp.get(\"/icon-512.png\", () => serveIconPng(\"icon-512.png\"));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\nasync function serveIconPng(key: string): Promise {\n const res = await blob.get(key);\n return new Response(await res.arrayBuffer(), {\n headers: { \"Content-Type\": \"image/png\", \"Cache-Control\": \"public, max-age=604800\" },\n });\n}\n\n// ---------- Auth gate for the whole API ----------\napp.use(\"/api/*\", async (c, next) => {\n const session = await getOAuthUserData(c.req.raw);\n if (!session?.user) {\n return c.json({ error: \"unauthorized\", login: \"/auth/login\" }, 401);\n }\n if (session.user.username !== OWNER) {\n return c.json({ error: \"forbidden\" }, 403);\n }\n await next();\n});\n\n// ---------- Helpers ----------\nfunction n(x: unknown): number | null {\n if (x === \"\" || x === null || x === undefined) return null;\n const v = Number(x);\n return Number.isFinite(v) ? v : null;\n}\nfunction reqNum(x: unknown, fallback = 0): number {\n const v = n(x);\n return v == null ? fallback : v;\n}\nfunction s(x: unknown): string {\n return x == null ? \"\" : String(x);\n}\n\nconst EXT_MIME: Record = {\n jpg: \"image/jpeg\",\n jpeg: \"image/jpeg\",\n png: \"image/png\",\n webp: \"image/webp\",\n gif: \"image/gif\",\n};\n\nfunction extFor(mime: string): string {\n if (mime.includes(\"png\")) return \"png\";\n if (mime.includes(\"webp\")) return \"webp\";\n if (mime.includes(\"gif\")) return \"gif\";\n return \"jpg\";\n}\n\nfunction dataUrlToBytes(dataUrl: string): { bytes: Uint8Array; mime: string } | null {\n const m = /^data:([^;]+);base64,(.*)$/s.exec(dataUrl);\n if (!m) return null;\n const mime = m[1];\n const bin = atob(m[2]);\n const bytes = new Uint8Array(bin.length);\n for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);\n return { bytes, mime };\n}\n\nasync function storePhotos(dataUrls: string[]): Promise {\n const keys: string[] = [];\n for (const url of dataUrls.slice(0, 6)) {\n const parsed = dataUrlToBytes(url);\n if (!parsed) continue;\n const ext = extFor(parsed.mime);\n const key = `photo:${Date.now()}-${Math.random().toString(36).slice(2, 8)}.${ext}`;\n await blob.set(key, parsed.bytes);\n keys.push(key);\n }\n return keys;\n}\n\nasync function deletePhotos(keys: string[]): Promise {\n for (const k of keys) {\n try {\n await blob.delete(k);\n } catch (_) { /* ignore missing */ }\n }\n}\n\n// Bump the vehicle's current odometer if a newer/higher reading arrives.\nasync function maybeAdvanceOdometer(km: number | null, when: string): Promise {\n if (km == null) return;\n const v = await getVehicle();\n if (km > v.current_odometer_km) {\n await sqlite.execute({\n sql: \"UPDATE vehicle SET current_odometer_km = ?, odometer_updated_at = ? WHERE id = 1\",\n args: [km, new Date().toISOString()],\n });\n await sqlite.execute({\n sql: \"INSERT INTO odometer_readings (km, recorded_at) VALUES (?, ?)\",\n args: [km, dateOnly(when) || new Date().toISOString().slice(0, 10)],\n });\n }\n}\n\n// Full application state — returned on load and after each mutation.\nasync function buildState() {\n await ready();\n const [vehicle, settings, serviceTypes, records, fuel, docs] = await Promise.all([\n getVehicle(),\n getSettings(),\n getServiceTypes(),\n getRecords(),\n getFuelLogs(),\n getDocuments(),\n ]);\n const readingsRes = await sqlite.execute(\n \"SELECT km, recorded_at FROM odometer_readings ORDER BY recorded_at\",\n );\n const readings = readingsRes.rows.map((r) => ({\n km: Number(r.km),\n recorded_at: String(r.recorded_at),\n }));\n const kmPerDay = estimateKmPerDay(vehicle, readings);\n const due = computeDue(vehicle, settings, serviceTypes, records, kmPerDay);\n return {\n vehicle,\n settings,\n service_types: serviceTypes,\n records,\n fuel,\n due,\n km_per_day: kmPerDay,\n fuel_economy: fuelEconomy(fuel),\n costs: costSummary(records, fuel, serviceTypes),\n documents: computeDocs(docs),\n categories: CATEGORIES,\n doc_types: DOC_TYPES,\n };\n}\n\n// ---------- API routes ----------\napp.get(\"/api/bootstrap\", async (c) => c.json(await buildState()));\n\napp.put(\"/api/vehicle\", async (c) => {\n const b = await c.req.json();\n await sqlite.execute({\n sql: `UPDATE vehicle SET name=?, make=?, model=?, year=?, plate=?, color=?,\n baseline_odometer_km=?, baseline_date=? WHERE id=1`,\n args: [\n s(b.name),\n s(b.make),\n s(b.model),\n n(b.year),\n s(b.plate),\n s(b.color),\n reqNum(b.baseline_odometer_km),\n dateOnly(s(b.baseline_date)) || new Date().toISOString().slice(0, 10),\n ],\n });\n return c.json(await buildState());\n});\n\napp.post(\"/api/odometer\", async (c) => {\n const b = await c.req.json();\n const km = n(b.km);\n if (km == null) return c.json({ error: \"km required\" }, 400);\n const when = dateOnly(s(b.recorded_at)) || new Date().toISOString().slice(0, 10);\n await sqlite.execute({\n sql: \"INSERT INTO odometer_readings (km, recorded_at) VALUES (?, ?)\",\n args: [km, when],\n });\n await sqlite.execute({\n sql: \"UPDATE vehicle SET current_odometer_km=?, odometer_updated_at=? WHERE id=1\",\n args: [km, new Date().toISOString()],\n });\n return c.json(await buildState());\n});\n\napp.post(\"/api/service-types\", async (c) => {\n const b = await c.req.json();\n await sqlite.execute({\n sql: `INSERT INTO service_types\n (service_key, name, category, interval_km, interval_months, first_km, first_months, enabled, note)\n VALUES (NULL, ?, ?, ?, ?, ?, ?, 1, ?)`,\n args: [\n s(b.name) || \"Custom service\",\n s(b.category) || \"Other\",\n n(b.interval_km),\n n(b.interval_months),\n n(b.first_km),\n n(b.first_months),\n s(b.note),\n ],\n });\n return c.json(await buildState());\n});\n\napp.put(\"/api/service-types/:id\", async (c) => {\n const id = Number(c.req.param(\"id\"));\n const b = await c.req.json();\n await sqlite.execute({\n sql: `UPDATE service_types SET name=?, category=?, interval_km=?, interval_months=?,\n first_km=?, first_months=?, enabled=?, note=? WHERE id=?`,\n args: [\n s(b.name),\n s(b.category) || \"Other\",\n n(b.interval_km),\n n(b.interval_months),\n n(b.first_km),\n n(b.first_months),\n b.enabled ? 1 : 0,\n s(b.note),\n id,\n ],\n });\n return c.json(await buildState());\n});\n\napp.delete(\"/api/service-types/:id\", async (c) => {\n const id = Number(c.req.param(\"id\"));\n await sqlite.execute({ sql: \"DELETE FROM service_types WHERE id=?\", args: [id] });\n return c.json(await buildState());\n});\n\n// Snooze reminders for a service type by 7 days (marks it reminded now).\napp.post(\"/api/service-types/:id/snooze\", async (c) => {\n const id = Number(c.req.param(\"id\"));\n await sqlite.execute({\n sql: \"UPDATE service_types SET last_reminder_sent_at=? WHERE id=?\",\n args: [new Date().toISOString(), id],\n });\n return c.json(await buildState());\n});\n\napp.post(\"/api/records\", async (c) => {\n const b = await c.req.json();\n const photos: string[] = Array.isArray(b.photos) ? b.photos : [];\n const keys = await storePhotos(photos);\n const km = n(b.odometer_km);\n const performed = dateOnly(s(b.performed_at)) || new Date().toISOString().slice(0, 10);\n await sqlite.execute({\n sql: `INSERT INTO service_records\n (service_type_id, name, performed_at, odometer_km, cost, notes, photo_keys, created_at)\n VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,\n args: [\n n(b.service_type_id),\n s(b.name) || \"Service\",\n performed,\n km,\n n(b.cost),\n s(b.notes),\n JSON.stringify(keys),\n new Date().toISOString(),\n ],\n });\n await maybeAdvanceOdometer(km, performed);\n return c.json(await buildState());\n});\n\napp.delete(\"/api/records/:id\", async (c) => {\n const id = Number(c.req.param(\"id\"));\n const r = await sqlite.execute({\n sql: \"SELECT photo_keys FROM service_records WHERE id=?\",\n args: [id],\n });\n if (r.rows[0]) {\n try {\n await deletePhotos(JSON.parse(String(r.rows[0].photo_keys) || \"[]\"));\n } catch (_) { /* ignore */ }\n }\n await sqlite.execute({ sql: \"DELETE FROM service_records WHERE id=?\", args: [id] });\n return c.json(await buildState());\n});\n\napp.put(\"/api/records/:id\", async (c) => {\n const id = Number(c.req.param(\"id\"));\n const b = await c.req.json();\n const existing = await sqlite.execute({\n sql: \"SELECT photo_keys FROM service_records WHERE id=?\",\n args: [id],\n });\n let current: string[] = [];\n try {\n current = JSON.parse(String(existing.rows[0]?.photo_keys ?? \"[]\"));\n } catch (_) {\n current = [];\n }\n const keep: string[] = Array.isArray(b.file_keys) ? b.file_keys : current;\n await deletePhotos(current.filter((k) => !keep.includes(k)));\n const newKeys = await storePhotos(Array.isArray(b.photos) ? b.photos : []);\n const km = n(b.odometer_km);\n const performed = dateOnly(s(b.performed_at)) || new Date().toISOString().slice(0, 10);\n await sqlite.execute({\n sql: `UPDATE service_records SET service_type_id=?, name=?, performed_at=?, odometer_km=?, cost=?, notes=?, photo_keys=? WHERE id=?`,\n args: [\n n(b.service_type_id),\n s(b.name) || \"Service\",\n performed,\n km,\n n(b.cost),\n s(b.notes),\n JSON.stringify([...keep, ...newKeys]),\n id,\n ],\n });\n await maybeAdvanceOdometer(km, performed);\n return c.json(await buildState());\n});\n\napp.post(\"/api/fuel\", async (c) => {\n const b = await c.req.json();\n const km = n(b.odometer_km);\n const liters = n(b.liters);\n if (km == null || liters == null) return c.json({ error: \"odometer_km and liters required\" }, 400);\n const ppl = n(b.price_per_liter);\n const total = n(b.total_cost) ?? (ppl != null ? ppl * liters : null);\n const filled = dateOnly(s(b.filled_at)) || new Date().toISOString().slice(0, 10);\n await sqlite.execute({\n sql: `INSERT INTO fuel_logs\n (filled_at, odometer_km, liters, price_per_liter, total_cost, is_full_tank, notes, created_at)\n VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,\n args: [\n filled,\n km,\n liters,\n ppl,\n total,\n b.is_full_tank === false ? 0 : 1,\n s(b.notes),\n new Date().toISOString(),\n ],\n });\n await maybeAdvanceOdometer(km, filled);\n return c.json(await buildState());\n});\n\napp.delete(\"/api/fuel/:id\", async (c) => {\n const id = Number(c.req.param(\"id\"));\n await sqlite.execute({ sql: \"DELETE FROM fuel_logs WHERE id=?\", args: [id] });\n return c.json(await buildState());\n});\n\napp.put(\"/api/fuel/:id\", async (c) => {\n const id = Number(c.req.param(\"id\"));\n const b = await c.req.json();\n const km = n(b.odometer_km);\n const liters = n(b.liters);\n if (km == null || liters == null) return c.json({ error: \"odometer_km and liters required\" }, 400);\n const ppl = n(b.price_per_liter);\n const total = n(b.total_cost) ?? (ppl != null ? ppl * liters : null);\n const filled = dateOnly(s(b.filled_at)) || new Date().toISOString().slice(0, 10);\n await sqlite.execute({\n sql: `UPDATE fuel_logs SET filled_at=?, odometer_km=?, liters=?, price_per_liter=?, total_cost=?, is_full_tank=?, notes=? WHERE id=?`,\n args: [\n filled,\n km,\n liters,\n ppl,\n total,\n b.is_full_tank === false ? 0 : 1,\n s(b.notes),\n id,\n ],\n });\n await maybeAdvanceOdometer(km, filled);\n return c.json(await buildState());\n});\n\napp.put(\"/api/settings\", async (c) => {\n const b = await c.req.json();\n await sqlite.execute({\n sql: `UPDATE settings SET reminder_lead_days=?, reminder_lead_km=?, currency=?, timezone=?, email=? WHERE id=1`,\n args: [\n reqNum(b.reminder_lead_days, 7),\n reqNum(b.reminder_lead_km, 200),\n s(b.currency) || \"PHP\",\n s(b.timezone) || \"Asia/Manila\",\n s(b.email),\n ],\n });\n return c.json(await buildState());\n});\n\n// ---- Documents & renewals ----\napp.post(\"/api/documents\", async (c) => {\n const b = await c.req.json();\n const keys = await storePhotos(Array.isArray(b.photos) ? b.photos : []);\n await sqlite.execute({\n sql: `INSERT INTO documents\n (doc_type, name, reference, issue_date, expiry_date, notes, file_keys, created_at)\n VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,\n args: [\n s(b.doc_type) || \"Other\",\n s(b.name),\n s(b.reference),\n dateOnly(s(b.issue_date)) || null,\n dateOnly(s(b.expiry_date)) || null,\n s(b.notes),\n JSON.stringify(keys),\n new Date().toISOString(),\n ],\n });\n return c.json(await buildState());\n});\n\napp.put(\"/api/documents/:id\", async (c) => {\n const id = Number(c.req.param(\"id\"));\n const b = await c.req.json();\n const existing = await sqlite.execute({\n sql: \"SELECT file_keys FROM documents WHERE id=?\",\n args: [id],\n });\n let current: string[] = [];\n try {\n current = JSON.parse(String(existing.rows[0]?.file_keys ?? \"[]\"));\n } catch (_) {\n current = [];\n }\n const keep: string[] = Array.isArray(b.file_keys) ? b.file_keys : current;\n await deletePhotos(current.filter((k) => !keep.includes(k)));\n const newKeys = await storePhotos(Array.isArray(b.photos) ? b.photos : []);\n await sqlite.execute({\n sql: `UPDATE documents SET doc_type=?, name=?, reference=?, issue_date=?, expiry_date=?, notes=?, file_keys=? WHERE id=?`,\n args: [\n s(b.doc_type) || \"Other\",\n s(b.name),\n s(b.reference),\n dateOnly(s(b.issue_date)) || null,\n dateOnly(s(b.expiry_date)) || null,\n s(b.notes),\n JSON.stringify([...keep, ...newKeys]),\n id,\n ],\n });\n return c.json(await buildState());\n});\n\napp.delete(\"/api/documents/:id\", async (c) => {\n const id = Number(c.req.param(\"id\"));\n const r = await sqlite.execute({\n sql: \"SELECT file_keys FROM documents WHERE id=?\",\n args: [id],\n });\n if (r.rows[0]) {\n try {\n await deletePhotos(JSON.parse(String(r.rows[0].file_keys) || \"[]\"));\n } catch (_) { /* ignore */ }\n }\n await sqlite.execute({ sql: \"DELETE FROM documents WHERE id=?\", args: [id] });\n return c.json(await buildState());\n});\n\n// Manually trigger the reminder email (for testing the email path).\napp.post(\"/api/send-reminder\", async (c) => {\n const result = await runReminders(true);\n return c.json(result);\n});\n\n// Full data export (JSON backup of everything).\napp.get(\"/api/export\", async (c) => {\n await ready();\n const [vehicle, settings, serviceTypes, records, fuel, docs] = await Promise.all([\n getVehicle(),\n getSettings(),\n getServiceTypes(),\n getRecords(),\n getFuelLogs(),\n getDocuments(),\n ]);\n const readings = await sqlite.execute(\n \"SELECT id, km, recorded_at FROM odometer_readings ORDER BY recorded_at\",\n );\n const data = {\n app: \"ADV160 Maintenance Tracker\",\n exported_at: new Date().toISOString(),\n vehicle,\n settings,\n service_types: serviceTypes,\n service_records: records,\n fuel_logs: fuel,\n documents: docs,\n odometer_readings: readings.rows,\n };\n const filename = `adv160-backup-${new Date().toISOString().slice(0, 10)}.json`;\n return new Response(JSON.stringify(data, null, 2), {\n headers: {\n \"Content-Type\": \"application/json; charset=utf-8\",\n \"Content-Disposition\": `attachment; filename=\"${filename}\"`,\n },\n });\n});\n\n// Serve a stored photo (auth-gated by the /api/* middleware).\napp.get(\"/api/photos/:key\", async (c) => {\n const key = c.req.param(\"key\");\n try {\n const res = await blob.get(key);\n const ext = key.split(\".\").pop()?.toLowerCase() ?? \"jpg\";\n const bytes = await res.arrayBuffer();\n return new Response(bytes, {\n headers: {\n \"Content-Type\": EXT_MIME[ext] ?? \"application/octet-stream\",\n \"Cache-Control\": \"private, max-age=86400\",\n },\n });\n } catch (_) {\n return c.json({ error: \"not found\" }, 404);\n }\n});\n\nexport default oauthMiddleware(app.fetch);\n","children",[],[104],"c4c3ea31-fbd0-44f4-8894-8c3685d3b941","shared","5d0b691e-d378-4a63-921e-5f1b6586c89e",["D",1783982540199],[120,121],[115],{"_38":131,"_13":63,"_41":132,"_43":116,"_45":46,"_47":133,"_49":50,"_51":134,"_17":67,"_54":55,"_56":135,"_58":59,"_60":-5,"_111":136,"_18":137},{"_38":122,"_13":123,"_41":124,"_43":116,"_45":46,"_47":125,"_49":50,"_51":126,"_17":127,"_54":55,"_56":128,"_58":59,"_60":-5,"_111":129,"_18":130},"c424881a-159e-4f2e-a33b-b6645f23f2dd","types.ts","1fb2d476-7f0c-11f1-b04b-1607ee4eb77e",58,["D",1783985852904],1,"// Shared TypeScript types used by both the backend and the browser frontend.\n\nexport interface Vehicle {\n id: number;\n name: string;\n make: string;\n model: string;\n year: number | null;\n plate: string;\n color: string;\n baseline_odometer_km: number;\n baseline_date: string; // ISO date (yyyy-mm-dd)\n current_odometer_km: number;\n odometer_updated_at: string; // ISO datetime\n}\n\nexport interface Settings {\n id: number;\n reminder_lead_days: number;\n reminder_lead_km: number;\n currency: string;\n timezone: string;\n email: string;\n}\n\nexport interface ServiceType {\n id: number;\n service_key: string | null;\n name: string;\n category: string;\n interval_km: number | null;\n interval_months: number | null;\n first_km: number | null;\n first_months: number | null;\n enabled: number; // 0 | 1\n note: string;\n last_reminder_sent_at: string | null;\n}\n\nexport interface ServiceRecord {\n id: number;\n service_type_id: number | null;\n name: string;\n performed_at: string; // ISO date\n odometer_km: number | null;\n cost: number | null;\n notes: string;\n photo_keys: string[];\n created_at: string;\n}\n\nexport interface FuelLog {\n id: number;\n filled_at: string; // ISO date\n odometer_km: number;\n liters: number;\n price_per_liter: number | null;\n total_cost: number | null;\n is_full_tank: number; // 0 | 1\n notes: string;\n created_at: string;\n}\n\nexport type DueStatus = \"overdue\" | \"due_soon\" | \"ok\" | \"unknown\";\n\nexport interface DueInfo {\n service_type_id: number;\n name: string;\n category: string;\n enabled: boolean;\n last_done_km: number | null;\n last_done_date: string | null;\n next_due_km: number | null;\n next_due_date: string | null;\n km_remaining: number | null;\n days_remaining: number | null;\n projected_due_date: string | null;\n status: DueStatus;\n reason: string;\n}\n\nexport interface DocItem {\n id: number;\n doc_type: string;\n name: string;\n reference: string;\n issue_date: string | null;\n expiry_date: string | null;\n notes: string;\n file_keys: string[];\n last_reminder_sent_at: string | null;\n created_at: string;\n}\n\nexport type DocStatus = \"expired\" | \"expiring_soon\" | \"ok\" | \"none\";\n\nexport interface DocInfo extends DocItem {\n status: DocStatus;\n days_remaining: number | null;\n}\n",[],[115,123],"ab4755df-5ea9-4e42-91b6-3dfbfe10035e","1b755bae-7f0c-11f1-84c2-1607ee4eb77e",59,["D",1783985855737],"// Default Honda ADV160 maintenance schedule.\n// \"confirmed\" = from Honda's official ADV160 owner's manual / maintenance schedule.\n// \"est.\" = sensible default; verify against your owner's manual (regional manuals differ)\n// and edit in Settings. Every interval here is user-editable in the app.\n\nexport interface DefaultService {\n key: string;\n name: string;\n category: string;\n interval_km: number | null;\n interval_months: number | null;\n first_km: number | null;\n first_months: number | null;\n note: string;\n}\n\nexport const DEFAULT_SERVICES: DefaultService[] = [\n {\n key: \"engine_oil\",\n name: \"Engine oil\",\n category: \"Engine\",\n interval_km: 6000,\n interval_months: 12,\n first_km: 1000,\n first_months: 1,\n note: \"Confirmed: first change at 1,000 km, then every 6,000 km. Time interval is a common default.\",\n },\n {\n key: \"oil_filter\",\n name: \"Engine oil filter\",\n category: \"Engine\",\n interval_km: 12000,\n interval_months: 24,\n first_km: 1000,\n first_months: null,\n note: \"Estimated — verify with owner's manual.\",\n },\n {\n key: \"valve_clearance\",\n name: \"Valve clearance (inspect)\",\n category: \"Engine\",\n interval_km: 24000,\n interval_months: null,\n first_km: null,\n first_months: null,\n note: \"Confirmed: inspect every 24,000 km.\",\n },\n {\n key: \"drive_belt\",\n name: \"Drive belt (inspect)\",\n category: \"Transmission\",\n interval_km: 24000,\n interval_months: null,\n first_km: null,\n first_months: null,\n note: \"Confirmed: inspect every 24,000 km.\",\n },\n {\n key: \"final_drive_oil\",\n name: \"Final drive (gear) oil\",\n category: \"Transmission\",\n interval_km: 12000,\n interval_months: 24,\n first_km: null,\n first_months: null,\n note: \"Time interval confirmed (every 2 years); km is a common default.\",\n },\n {\n key: \"spark_plug\",\n name: \"Spark plug\",\n category: \"Engine\",\n interval_km: 24000,\n interval_months: null,\n first_km: null,\n first_months: null,\n note: \"Estimated — verify with owner's manual.\",\n },\n {\n key: \"air_cleaner\",\n name: \"Air cleaner\",\n category: \"Engine\",\n interval_km: 12000,\n interval_months: null,\n first_km: null,\n first_months: null,\n note: \"Estimated — verify with owner's manual.\",\n },\n {\n key: \"brake_fluid\",\n name: \"Brake fluid\",\n category: \"Brakes\",\n interval_km: null,\n interval_months: 24,\n first_km: null,\n first_months: null,\n note: \"Every 2 years (common default).\",\n },\n {\n key: \"coolant\",\n name: \"Coolant\",\n category: \"Cooling\",\n interval_km: 24000,\n interval_months: 36,\n first_km: null,\n first_months: null,\n note: \"Estimated — verify with owner's manual.\",\n },\n {\n key: \"general_inspection\",\n name: \"General inspection (brakes, tires, lights, bolts)\",\n category: \"General\",\n interval_km: 6000,\n interval_months: 6,\n first_km: null,\n first_months: null,\n note: \"General periodic check-up default.\",\n },\n];\n\nexport const CATEGORIES = [\n \"Engine\",\n \"Transmission\",\n \"Brakes\",\n \"Cooling\",\n \"Suspension\",\n \"Electrical\",\n \"Accessories\",\n \"General\",\n \"Other\",\n];\n\nexport const DOC_TYPES = [\n \"Registration (OR/CR)\",\n \"Insurance\",\n \"Driver's License\",\n \"Warranty\",\n \"Emission Test\",\n \"Other\",\n];\n",[],[115,63],"0387f0c2-b02a-4a5d-b98e-8eecf3f47c0c","frontend","0a32be25-01b2-402c-8164-5bf113cfeef5",["D",1783982946331],[144,145,146,147,148,149,150],[139],{"_38":236,"_13":237,"_41":238,"_43":140,"_45":46,"_47":239,"_49":50,"_51":240,"_17":53,"_54":96,"_56":-5,"_58":59,"_60":-5,"_111":241,"_18":242},{"_38":193,"_13":194,"_41":195,"_43":140,"_45":46,"_47":196,"_49":50,"_51":197,"_17":53,"_54":96,"_56":-5,"_58":59,"_60":-5,"_111":198,"_18":199},{"_38":185,"_13":186,"_41":187,"_43":140,"_45":46,"_47":188,"_49":50,"_51":189,"_17":53,"_54":55,"_56":190,"_58":59,"_60":-5,"_111":191,"_18":192},{"_38":176,"_13":177,"_41":178,"_43":140,"_45":46,"_47":179,"_49":50,"_51":180,"_17":181,"_54":24,"_56":182,"_58":59,"_60":-5,"_111":183,"_18":184},{"_38":168,"_13":169,"_41":170,"_43":140,"_45":46,"_47":171,"_49":50,"_51":172,"_17":94,"_54":24,"_56":173,"_58":59,"_60":-5,"_111":174,"_18":175},{"_38":160,"_13":161,"_41":162,"_43":140,"_45":46,"_47":163,"_49":50,"_51":164,"_17":67,"_54":24,"_56":165,"_58":59,"_60":-5,"_111":166,"_18":167},{"_38":151,"_13":152,"_41":153,"_43":140,"_45":46,"_47":154,"_49":50,"_51":155,"_17":156,"_54":55,"_56":157,"_58":59,"_60":-5,"_111":158,"_18":159},"8b95ed86-9df4-45e2-aca0-7e4f5db97147","sw.js","13530b64-7f0d-11f1-8d0b-1607ee4eb77e",158,["D",1784601415847],9,"// Service worker: makes the app installable and openable offline.\n// Strategy: network-first for GET (so new code/data loads when online),\n// falling back to cache when offline. /api and /auth are never cached.\nconst CACHE = \"adv160-v10\";\nconst SHELL = [\"/\", \"/frontend/index.html\", \"/frontend/app.tsx\", \"/manifest.json\", \"/frontend/icon.svg\"];\n\nself.addEventListener(\"install\", (e) => {\n e.waitUntil(\n caches.open(CACHE).then((c) => c.addAll(SHELL)).then(() => self.skipWaiting()),\n );\n});\n\nself.addEventListener(\"activate\", (e) => {\n e.waitUntil(\n caches.keys()\n .then((keys) => Promise.all(keys.filter((k) => k !== CACHE).map((k) => caches.delete(k))))\n .then(() => self.clients.claim()),\n );\n});\n\nself.addEventListener(\"fetch\", (e) => {\n const url = new URL(e.request.url);\n if (e.request.method !== \"GET\") return;\n if (url.pathname.startsWith(\"/api/\") || url.pathname.startsWith(\"/auth/\")) return;\n\n e.respondWith(\n fetch(e.request)\n .then((res) => {\n const copy = res.clone();\n caches.open(CACHE).then((c) => c.put(e.request, copy)).catch(() => {});\n return res;\n })\n .catch(() =>\n caches.match(e.request).then((r) => r || caches.match(\"/\"))\n ),\n );\n});\n",[],[139,152],"bf35433e-c608-41fa-a19c-7325ed4de121","manifest.json","0f7b7c4c-7f0d-11f1-ba89-1607ee4eb77e",150,["D",1784050655329],"{\n \"name\": \"ADV160 Maintenance\",\n \"short_name\": \"ADV160\",\n \"description\": \"Maintenance tracker for a Honda ADV160 — service due dates, fuel, costs and email reminders.\",\n \"start_url\": \"/\",\n \"scope\": \"/\",\n \"display\": \"standalone\",\n \"background_color\": \"#ffffff\",\n \"theme_color\": \"#C8102E\",\n \"orientation\": \"portrait-primary\",\n \"icons\": [\n { \"src\": \"/icon-192.png?v=2\", \"sizes\": \"192x192\", \"type\": \"image/png\", \"purpose\": \"any\" },\n { \"src\": \"/icon-512.png?v=2\", \"sizes\": \"512x512\", \"type\": \"image/png\", \"purpose\": \"any\" },\n { \"src\": \"/icon-512.png?v=2\", \"sizes\": \"512x512\", \"type\": \"image/png\", \"purpose\": \"maskable\" },\n { \"src\": \"/frontend/icon.svg?v=2\", \"sizes\": \"any\", \"type\": \"image/svg+xml\", \"purpose\": \"any\" }\n ]\n}\n",[],[139,161],"a215aa27-ac04-4e46-8a40-85f0f5e42673","index.html","0d8a809a-7f0d-11f1-a074-1607ee4eb77e",151,["D",1784050658643],"\n\n \n \n \n ADV160 Maintenance\n \n \n \n \n \n \n \n \n \n \n \n

\n \n \n \n\n",[],[139,169],"25734b9c-3227-485d-93ea-4ff3cc7cc50c","icon.svg","16eae79c-7f0d-11f1-ae2e-1607ee4eb77e",156,["D",1784601371388],5,"\n",[],[139,177],"157a7bf9-a860-48da-b484-25ea0d1e612f","app.tsx","18adaf38-7f0d-11f1-b187-1607ee4eb77e",14,["D",1783982964999],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) throw new Error(\"No #root element\");\ncreateRoot(root).render();\n\n// Register the service worker for installability + offline shell.\nif (\"serviceWorker\" in navigator) {\n window.addEventListener(\"load\", () => {\n navigator.serviceWorker.register(\"/sw.js\").catch((e) => console.warn(\"SW failed\", e));\n });\n}\n",[],[139,186],"771dffc2-0eeb-4e2b-97e1-e1b1fe9a9852","lib","2ac53dcb-575d-4f9f-b0d8-7b720b7a17cc",15,["D",1783982984924],[200,201,202,203],[139,194],{"_38":228,"_13":229,"_41":230,"_43":195,"_45":46,"_47":231,"_49":50,"_51":232,"_17":94,"_54":55,"_56":233,"_58":59,"_60":-5,"_111":234,"_18":235},{"_38":220,"_13":221,"_41":222,"_43":195,"_45":46,"_47":223,"_49":50,"_51":224,"_17":53,"_54":55,"_56":225,"_58":59,"_60":-5,"_111":226,"_18":227},{"_38":212,"_13":213,"_41":214,"_43":195,"_45":46,"_47":215,"_49":50,"_51":216,"_17":53,"_54":55,"_56":217,"_58":59,"_60":-5,"_111":218,"_18":219},{"_38":204,"_13":205,"_41":206,"_43":195,"_45":46,"_47":207,"_49":50,"_51":208,"_17":53,"_54":55,"_56":209,"_58":59,"_60":-5,"_111":210,"_18":211},"03633853-c996-4d34-9d3b-67e5f884dabc","image.ts","2aee5742-7f0d-11f1-b1fc-1607ee4eb77e",17,["D",1783982995614],"// Downscale a picked image to keep uploads small (blob storage is limited).\n// Returns a JPEG data URL no larger than `max` px on its longest side.\nexport async function fileToDataUrl(file: File, max = 1024, quality = 0.72): Promise {\n const original = await readAsDataUrl(file);\n try {\n const img = await loadImage(original);\n const scale = Math.min(1, max / Math.max(img.width, img.height));\n const w = Math.max(1, Math.round(img.width * scale));\n const h = Math.max(1, Math.round(img.height * scale));\n const canvas = document.createElement(\"canvas\");\n canvas.width = w;\n canvas.height = h;\n const ctx = canvas.getContext(\"2d\");\n if (!ctx) return original;\n ctx.drawImage(img, 0, 0, w, h);\n return canvas.toDataURL(\"image/jpeg\", quality);\n } catch (_) {\n return original;\n }\n}\n\nfunction readAsDataUrl(file: File): Promise {\n return new Promise((resolve, reject) => {\n const fr = new FileReader();\n fr.onload = () => resolve(fr.result as string);\n fr.onerror = reject;\n fr.readAsDataURL(file);\n });\n}\n\nfunction loadImage(src: string): Promise {\n return new Promise((resolve, reject) => {\n const img = new Image();\n img.onload = () => resolve(img);\n img.onerror = reject;\n img.src = src;\n });\n}\n",[],[139,194,205],"0ae5cdf8-e47f-4e09-bffe-08ec848ada83","format.ts","27eb33b2-7f0d-11f1-a142-1607ee4eb77e",16,["D",1783982990612],"export function money(currency: string, v: number | null | undefined): string {\n if (v == null) return \"—\";\n try {\n return new Intl.NumberFormat(undefined, { style: \"currency\", currency, maximumFractionDigits: 2 })\n .format(v);\n } catch (_) {\n return `${currency} ${v.toFixed(2)}`;\n }\n}\n\nexport function km(v: number | null | undefined): string {\n if (v == null) return \"—\";\n return `${Math.round(v).toLocaleString()} km`;\n}\n\nexport function fdate(s: string | null | undefined): string {\n if (!s) return \"—\";\n const d = new Date(`${String(s).slice(0, 10)}T00:00:00`);\n if (isNaN(d.getTime())) return String(s);\n return d.toLocaleDateString(undefined, { year: \"numeric\", month: \"short\", day: \"numeric\" });\n}\n\nexport function monthLabel(ym: string): string {\n const d = new Date(`${ym}-01T00:00:00`);\n if (isNaN(d.getTime())) return ym;\n return d.toLocaleDateString(undefined, { year: \"numeric\", month: \"short\" });\n}\n\nexport function num(v: number | null | undefined, digits = 1): string {\n if (v == null) return \"—\";\n return v.toLocaleString(undefined, { maximumFractionDigits: digits });\n}\n\nexport function todayISO(): string {\n return new Date().toISOString().slice(0, 10);\n}\n",[],[139,194,213],"0b09da68-d810-4cf0-b2f1-74aa52039566","export.ts","11681d70-7f54-11f1-9faa-1607ee4eb77e",94,["D",1784013447105],"// Client-side file download helpers for exporting data.\n\ntype Cell = string | number | null | undefined;\n\nfunction escapeCsv(v: Cell): string {\n const s = v == null ? \"\" : String(v);\n return /[\",\\n]/.test(s) ? `\"${s.replace(/\"/g, '\"\"')}\"` : s;\n}\n\nexport function downloadCSV(filename: string, headers: string[], rows: Cell[][]): void {\n const lines = [headers, ...rows].map((r) => r.map(escapeCsv).join(\",\"));\n downloadBlob(filename, \"\" + lines.join(\"\\r\\n\"), \"text/csv;charset=utf-8\");\n}\n\nexport function downloadBlob(filename: string, content: string, type: string): void {\n const blob = new Blob([content], { type });\n const url = URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = filename;\n document.body.appendChild(a);\n a.click();\n a.remove();\n setTimeout(() => URL.revokeObjectURL(url), 1000);\n}\n",[],[139,194,221],"bb89fc65-b5b0-4542-8490-ae49e0703cf7","api.ts","249219b0-7f0d-11f1-b130-1607ee4eb77e",89,["D",1783986556808],"import type {\n DocInfo,\n DueInfo,\n FuelLog,\n ServiceRecord,\n ServiceType,\n Settings,\n Vehicle,\n} from \"../../shared/types.ts\";\n\nexport interface FuelSegment {\n from_km: number;\n to_km: number;\n distance: number;\n liters: number;\n km_per_l: number;\n date: string;\n}\nexport interface FuelEconomy {\n segments: FuelSegment[];\n average_km_per_l: number | null;\n}\nexport interface Costs {\n service_total: number;\n fuel_total: number;\n total: number;\n by_month: Record;\n by_category: Record;\n}\nexport interface AppState {\n vehicle: Vehicle;\n settings: Settings;\n service_types: ServiceType[];\n records: ServiceRecord[];\n fuel: FuelLog[];\n due: DueInfo[];\n km_per_day: number | null;\n fuel_economy: FuelEconomy;\n costs: Costs;\n documents: DocInfo[];\n categories: string[];\n doc_types: string[];\n}\n\nexport class AuthError extends Error {\n constructor(public status: number) {\n super(\"auth\");\n }\n}\n\nasync function fetchJSON(path: string, method = \"GET\", body?: unknown): Promise {\n const res = await fetch(path, {\n method,\n headers: body ? { \"Content-Type\": \"application/json\" } : undefined,\n body: body ? JSON.stringify(body) : undefined,\n });\n if (res.status === 401 || res.status === 403) throw new AuthError(res.status);\n if (!res.ok) throw new Error(`${method} ${path} -> ${res.status}`);\n return res.json() as Promise;\n}\n\nexport const api = {\n bootstrap: () => fetchJSON(\"/api/bootstrap\"),\n updateVehicle: (v: Record) => fetchJSON(\"/api/vehicle\", \"PUT\", v),\n addOdometer: (km: number, recorded_at?: string) =>\n fetchJSON(\"/api/odometer\", \"POST\", { km, recorded_at }),\n addServiceType: (t: Record) => fetchJSON(\"/api/service-types\", \"POST\", t),\n updateServiceType: (id: number, t: Record) =>\n fetchJSON(`/api/service-types/${id}`, \"PUT\", t),\n deleteServiceType: (id: number) => fetchJSON(`/api/service-types/${id}`, \"DELETE\"),\n snooze: (id: number) => fetchJSON(`/api/service-types/${id}/snooze`, \"POST\", {}),\n addRecord: (r: Record) => fetchJSON(\"/api/records\", \"POST\", r),\n updateRecord: (id: number, r: Record) =>\n fetchJSON(`/api/records/${id}`, \"PUT\", r),\n deleteRecord: (id: number) => fetchJSON(`/api/records/${id}`, \"DELETE\"),\n addFuel: (f: Record) => fetchJSON(\"/api/fuel\", \"POST\", f),\n updateFuel: (id: number, f: Record) =>\n fetchJSON(`/api/fuel/${id}`, \"PUT\", f),\n deleteFuel: (id: number) => fetchJSON(`/api/fuel/${id}`, \"DELETE\"),\n updateSettings: (s: Record) => fetchJSON(\"/api/settings\", \"PUT\", s),\n addDocument: (d: Record) => fetchJSON(\"/api/documents\", \"POST\", d),\n updateDocument: (id: number, d: Record) =>\n fetchJSON(`/api/documents/${id}`, \"PUT\", d),\n deleteDocument: (id: number) => fetchJSON(`/api/documents/${id}`, \"DELETE\"),\n sendReminder: () =>\n fetchJSON<{ sent: boolean; reason: string; included: string[] }>(\"/api/send-reminder\", \"POST\", {}),\n};\n\nexport function photoUrl(key: string): string {\n return `/api/photos/${encodeURIComponent(key)}`;\n}\n",[],[139,194,229],"c89cb1c7-d65d-4870-a93d-966767eb90fa","components","771e6092-b2b2-48a3-9a7c-58834e7466e2",18,["D",1783983031616],[243,244,245,246,247,248,249,250,251],[139,237],{"_38":319,"_13":320,"_41":321,"_43":238,"_45":46,"_47":322,"_49":50,"_51":323,"_17":239,"_54":55,"_56":324,"_58":59,"_60":-5,"_111":325,"_18":326},{"_38":311,"_13":312,"_41":313,"_43":238,"_45":46,"_47":314,"_49":50,"_51":315,"_17":127,"_54":55,"_56":316,"_58":59,"_60":-5,"_111":317,"_18":318},{"_38":303,"_13":304,"_41":305,"_43":238,"_45":46,"_47":306,"_49":50,"_51":307,"_17":181,"_54":55,"_56":308,"_58":59,"_60":-5,"_111":309,"_18":310},{"_38":295,"_13":296,"_41":297,"_43":238,"_45":46,"_47":298,"_49":50,"_51":299,"_17":266,"_54":55,"_56":300,"_58":59,"_60":-5,"_111":301,"_18":302},{"_38":287,"_13":288,"_41":289,"_43":238,"_45":46,"_47":290,"_49":50,"_51":291,"_17":75,"_54":55,"_56":292,"_58":59,"_60":-5,"_111":293,"_18":294},{"_38":278,"_13":279,"_41":280,"_43":238,"_45":46,"_47":281,"_49":50,"_51":282,"_17":283,"_54":55,"_56":284,"_58":59,"_60":-5,"_111":285,"_18":286},{"_38":270,"_13":271,"_41":272,"_43":238,"_45":46,"_47":273,"_49":50,"_51":274,"_17":94,"_54":55,"_56":275,"_58":59,"_60":-5,"_111":276,"_18":277},{"_38":261,"_13":262,"_41":263,"_43":238,"_45":46,"_47":264,"_49":50,"_51":265,"_17":266,"_54":55,"_56":267,"_58":59,"_60":-5,"_111":268,"_18":269},{"_38":252,"_13":253,"_41":254,"_43":238,"_45":46,"_47":255,"_49":50,"_51":256,"_17":257,"_54":55,"_56":258,"_58":59,"_60":-5,"_111":259,"_18":260},"71e9fff7-a6ce-4286-84ed-e2c8986f9469","ui.tsx","405db8b6-7f0d-11f1-a0da-1607ee4eb77e",130,["D",1784041869609],13,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport type { ReactNode } from \"https://esm.sh/react@18.2.0\";\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { DueStatus } from \"../../shared/types.ts\";\n\nexport const RED = \"#E4002B\";\n\nconst ICON_PATHS: Record = {\n home: (\n <>\n \n \n \n ),\n fuel: (\n <>\n \n \n \n \n \n ),\n costs: (\n <>\n \n \n \n \n ),\n history: (\n <>\n \n \n \n \n ),\n gear: (\n <>\n \n \n \n ),\n gauge: (\n <>\n \n \n \n ),\n plus: (\n <>\n \n \n \n ),\n wrench: (\n \n ),\n doc: (\n <>\n \n \n \n \n \n ),\n close: (\n <>\n \n \n \n ),\n camera: (\n <>\n \n \n \n ),\n chevron: ,\n check: ,\n};\n\nexport function Icon(\n { name, size = 22, strokeWidth = 1.8, className = \"\" }: {\n name: string;\n size?: number;\n strokeWidth?: number;\n className?: string;\n },\n) {\n return (\n \n {ICON_PATHS[name] ?? null}\n \n );\n}\n\nexport function Card({ children, className = \"\" }: { children: ReactNode; className?: string }) {\n return (\n

\n {children}\n

\n );\n}\n\nexport function Button(\n { children, onClick, variant = \"primary\", type = \"button\", disabled, className = \"\", full }: {\n children: ReactNode;\n onClick?: () => void;\n variant?: \"primary\" | \"secondary\" | \"ghost\" | \"danger\";\n type?: \"button\" | \"submit\";\n disabled?: boolean;\n className?: string;\n full?: boolean;\n },\n) {\n const base = \"inline-flex items-center justify-center gap-2 rounded-xl font-semibold text-sm px-4 py-2.5 transition active:scale-[.98] disabled:opacity-50 disabled:pointer-events-none\";\n const styles = {\n primary: \"text-white shadow-sm\",\n secondary: \"bg-white border border-neutral-300 text-neutral-800 hover:bg-neutral-50\",\n ghost: \"text-neutral-600 hover:bg-neutral-100\",\n danger: \"bg-red-50 text-red-700 hover:bg-red-100\",\n }[variant];\n return (\n \n {children}\n \n );\n}\n\nexport function Field({ label, children, hint }: { label: string; children: ReactNode; hint?: string }) {\n return (\n \n {label}\n {children}\n {hint ? {hint} : null}\n \n );\n}\n\nconst inputCls =\n \"w-full rounded-xl border border-neutral-300 px-3 py-2.5 text-[15px] bg-white focus:outline-none focus:ring-2 focus:ring-red-200 focus:border-red-400\";\n\nexport function Input(props: Record) {\n return ;\n}\nexport function Textarea(props: Record) {\n return

;\n}\nexport function Select({ children, ...props }: { children: ReactNode } & Record<string, unknown>) {\n  return (\n    <select {...props} className={`${inputCls} ${(props.className as string) ?? \"\"}`}>\n      {children}\n    </select>\n  );\n}\n\n// Clean photo-upload control (hidden native input behind a styled label).\nexport function FileButton(\n  { onChange, label = \"Add photos\" }: {\n    onChange: (e: { target: { files: FileList | null } }) => void;\n    label?: string;\n  },\n) {\n  return (\n    <label className=\"inline-flex items-center gap-2 cursor-pointer rounded-xl border border-dashed border-neutral-300 bg-neutral-50 hover:bg-neutral-100 hover:border-neutral-400 text-neutral-600 font-semibold text-sm px-4 py-2.5 transition select-none\">\n      <Icon name=\"camera\" size={18} />\n      {label}\n      <input type=\"file\" accept=\"image/*\" multiple onChange={onChange as never} className=\"hidden\" />\n    </label>\n  );\n}\n\n// Custom dropdown — avoids the bulky native mobile picker; matches the input styling.\nexport function Dropdown(\n  { value, onChange, options, placeholder = \"Select…\" }: {\n    value: string;\n    onChange: (v: string) => void;\n    options: { value: string; label: string }[];\n    placeholder?: string;\n  },\n) {\n  const [open, setOpen] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    if (!open) return;\n    const onDoc = (e: Event) => {\n      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);\n    };\n    document.addEventListener(\"pointerdown\", onDoc);\n    return () => document.removeEventListener(\"pointerdown\", onDoc);\n  }, [open]);\n  const selected = options.find((o) => o.value === value);\n  return (\n    <div className=\"relative\" ref={ref}>\n      <button\n        type=\"button\"\n        onClick={() => setOpen((o) => !o)}\n        className={`${inputCls} flex items-center justify-between text-left`}\n      >\n        <span className={`truncate ${selected ? \"text-neutral-800\" : \"text-neutral-400\"}`}>\n          {selected ? selected.label : placeholder}\n        </span>\n        <Icon name=\"chevron\" size={18} className={`shrink-0 ml-2 text-neutral-400 transition ${open ? \"rotate-180\" : \"\"}`} />\n      </button>\n      {open && (\n        <div className=\"absolute z-30 mt-1 w-full max-h-56 overflow-auto rounded-xl border border-neutral-200 bg-white shadow-xl py-1\">\n          {options.map((o) => (\n            <button\n              key={o.value}\n              type=\"button\"\n              onClick={() => {\n                onChange(o.value);\n                setOpen(false);\n              }}\n              className={`w-full text-left px-3.5 py-2.5 text-[15px] flex items-center justify-between hover:bg-neutral-50 ${\n                o.value === value ? \"font-semibold text-neutral-900\" : \"text-neutral-700\"\n              }`}\n            >\n              <span className=\"truncate\">{o.label}</span>\n              {o.value === value && <Icon name=\"check\" size={16} className=\"shrink-0 ml-2 text-[#E4002B]\" />}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\n// Clean on/off toggle switch.\nexport function Toggle(\n  { checked, onChange, label, hint }: {\n    checked: boolean;\n    onChange: (v: boolean) => void;\n    label: string;\n    hint?: string;\n  },\n) {\n  return (\n    <button\n      type=\"button\"\n      onClick={() => onChange(!checked)}\n      className=\"w-full flex items-center justify-between gap-3 rounded-xl border border-neutral-300 px-3.5 py-3 text-left hover:bg-neutral-50 transition\"\n    >\n      <div>\n        <div className=\"text-[15px] font-medium text-neutral-800\">{label}</div>\n        {hint ? <div className=\"text-xs text-neutral-400 mt-0.5\">{hint}</div> : null}\n      </div>\n      <span\n        className={`shrink-0 w-11 h-6 rounded-full relative transition ${checked ? \"\" : \"bg-neutral-300\"}`}\n        style={checked ? { backgroundColor: RED } : undefined}\n      >\n        <span className={`absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow transition ${checked ? \"translate-x-5\" : \"\"}`} />\n      </span>\n    </button>\n  );\n}\n\nexport function StatusPill({ status }: { status: DueStatus }) {\n  const map: Record<DueStatus, { label: string; cls: string }> = {\n    overdue: { label: \"Overdue\", cls: \"bg-red-100 text-red-700\" },\n    due_soon: { label: \"Due soon\", cls: \"bg-amber-100 text-amber-800\" },\n    ok: { label: \"OK\", cls: \"bg-emerald-100 text-emerald-700\" },\n    unknown: { label: \"No interval\", cls: \"bg-neutral-100 text-neutral-500\" },\n  };\n  const { label, cls } = map[status];\n  return <span className={`text-xs font-semibold px-2 py-0.5 rounded-full ${cls}`}>{label}</span>;\n}\n\nexport function Stat({ label, value, sub }: { label: string; value: ReactNode; sub?: ReactNode }) {\n  return (\n    <div className=\"flex-1 min-w-0\">\n      <div className=\"text-xs text-neutral-500 font-medium truncate\">{label}</div>\n      <div className=\"text-xl font-bold text-neutral-900 leading-tight\">{value}</div>\n      {sub ? <div className=\"text-xs text-neutral-400 truncate\">{sub}</div> : null}\n    </div>\n  );\n}\n\nexport function EmptyState({ icon, title, sub }: { icon: string; title: string; sub?: string }) {\n  return (\n    <div className=\"text-center py-10 px-4\">\n      <div className=\"mx-auto mb-3 w-14 h-14 rounded-full bg-neutral-100 text-neutral-400 flex items-center justify-center\">\n        <Icon name={icon} size={26} />\n      </div>\n      <div className=\"font-semibold text-neutral-700\">{title}</div>\n      {sub ? <div className=\"text-sm text-neutral-400 mt-1\">{sub}</div> : null}\n    </div>\n  );\n}\n\nexport function Modal(\n  { title, onClose, children }: { title: string; onClose: () => void; children: ReactNode },\n) {\n  useEffect(() => {\n    const onKey = (e: KeyboardEvent) => e.key === \"Escape\" && onClose();\n    document.addEventListener(\"keydown\", onKey);\n    document.body.style.overflow = \"hidden\";\n    return () => {\n      document.removeEventListener(\"keydown\", onKey);\n      document.body.style.overflow = \"\";\n    };\n  }, [onClose]);\n  return (\n    <div\n      className=\"modal-overlay fixed inset-0 z-50 bg-black/50 backdrop-blur-[2px] flex items-end sm:items-center justify-center sm:p-4\"\n      onClick={onClose}\n    >\n      <div\n        className=\"modal-panel bg-white w-full sm:max-w-md rounded-t-2xl sm:rounded-2xl max-h-[92vh] overflow-auto shadow-2xl\"\n        onClick={(e) => e.stopPropagation()}\n      >\n        <div className=\"sm:hidden pt-2.5 pb-1 flex justify-center\">\n          <div className=\"w-10 h-1 rounded-full bg-neutral-300\" />\n        </div>\n        <div className=\"sticky top-0 z-10 bg-white/90 backdrop-blur px-5 py-3.5 flex items-center justify-between border-b border-neutral-100\">\n          <h2 className=\"font-bold text-[17px] tracking-tight text-neutral-900\">{title}</h2>\n          <button\n            onClick={onClose}\n            aria-label=\"Close\"\n            className=\"shrink-0 -mr-1 w-8 h-8 rounded-full flex items-center justify-center text-neutral-400 hover:text-neutral-700 hover:bg-neutral-100 transition\"\n          >\n            <Icon name=\"close\" size={18} strokeWidth={2} />\n          </button>\n        </div>\n        <div className=\"px-5 py-4\">{children}</div>\n      </div>\n    </div>\n  );\n}\n\n// Compact confirmation dialog (for deletes) — much smaller than the form modals.\nexport function ConfirmDialog(\n  { open, title, message, confirmLabel = \"Delete\", onConfirm, onCancel }: {\n    open: boolean;\n    title: string;\n    message?: string;\n    confirmLabel?: string;\n    onConfirm: () => void;\n    onCancel: () => void;\n  },\n) {\n  useEffect(() => {\n    if (!open) return;\n    const onKey = (e: KeyboardEvent) => e.key === \"Escape\" && onCancel();\n    document.addEventListener(\"keydown\", onKey);\n    return () => document.removeEventListener(\"keydown\", onKey);\n  }, [open, onCancel]);\n  if (!open) return null;\n  return (\n    <div\n      className=\"modal-overlay fixed inset-0 z-[60] bg-black/50 backdrop-blur-[2px] flex items-center justify-center p-6\"\n      onClick={onCancel}\n    >\n      <div\n        className=\"modal-panel bg-white rounded-2xl shadow-2xl w-full max-w-[300px] p-5 text-center\"\n        onClick={(e) => e.stopPropagation()}\n      >\n        <h3 className=\"font-bold text-neutral-900\">{title}</h3>\n        {message ? <p className=\"text-sm text-neutral-500 mt-1.5\">{message}</p> : null}\n        <div className=\"flex gap-2 mt-5\">\n          <Button variant=\"secondary\" full onClick={onCancel}>Cancel</Button>\n          <Button variant=\"primary\" full onClick={onConfirm}>{confirmLabel}</Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n\n// Hook that provides a compact confirm() and the dialog element to render.\nexport function useConfirm() {\n  const [pending, setPending] = useState<\n    { title: string; message?: string; confirmLabel?: string; action: () => void } | null\n  >(null);\n  const confirm = (\n    title: string,\n    action: () => void,\n    opts?: { message?: string; confirmLabel?: string },\n  ) => setPending({ title, action, message: opts?.message, confirmLabel: opts?.confirmLabel });\n  const dialog = (\n    <ConfirmDialog\n      open={!!pending}\n      title={pending?.title ?? \"\"}\n      message={pending?.message}\n      confirmLabel={pending?.confirmLabel}\n      onCancel={() => setPending(null)}\n      onConfirm={() => {\n        pending?.action();\n        setPending(null);\n      }}\n    />\n  );\n  return { confirm, dialog };\n}\n",[],[139,237,253],"78e8dedd-146b-439f-9a65-03e53f733a33","Settings.tsx","db019784-7f0d-11f1-85ea-1607ee4eb77e",146,["D",1784042046463],7,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { api } from \"../lib/api.ts\";\nimport type { AppState } from \"../lib/api.ts\";\nimport type { ServiceType } from \"../../shared/types.ts\";\nimport { todayISO } from \"../lib/format.ts\";\nimport { downloadCSV } from \"../lib/export.ts\";\nimport { Button, Field, Input, Modal, Select, useConfirm } from \"./ui.tsx\";\nimport type { Mutate } from \"./App.tsx\";\n\nfunction Section({ title, children }: { title: string; children: unknown }) {\n  return (\n    <div className=\"mb-6\">\n      <h3 className=\"font-bold text-neutral-700 mb-2\">{title}</h3>\n      {children as never}\n    </div>\n  );\n}\n\nexport function SettingsView(\n  { state, mutate, onClose }: { state: AppState; mutate: Mutate; onClose: () => void },\n) {\n  return (\n    <Modal title=\"Settings\" onClose={onClose}>\n      <Section title=\"Motorcycle\">\n        <VehicleForm state={state} mutate={mutate} />\n      </Section>\n\n      <Section title=\"Reminders\">\n        <ReminderForm state={state} mutate={mutate} />\n      </Section>\n\n      <Section title=\"Service schedule\">\n        <p className=\"text-xs text-neutral-400 mb-2\">\n          Intervals seeded from the Honda ADV160 manual. Some are estimates — edit to match your\n          owner's manual. Turn a service off to stop tracking it.\n        </p>\n        <div className=\"space-y-2\">\n          {state.service_types.map((t) => (\n            <ServiceRow key={t.id} type={t} categories={state.categories} mutate={mutate} />\n          ))}\n        </div>\n        <AddService state={state} mutate={mutate} />\n      </Section>\n\n      <Section title=\"Data & backup\">\n        <DataBackup state={state} />\n      </Section>\n\n      <form method=\"POST\" action=\"/auth/logout\" className=\"pt-2 border-t border-neutral-100\">\n        <button type=\"submit\" className=\"text-sm text-neutral-500 hover:text-red-600 py-2\">\n          Log out\n        </button>\n      </form>\n    </Modal>\n  );\n}\n\nfunction VehicleForm({ state, mutate }: { state: AppState; mutate: Mutate }) {\n  const v = state.vehicle;\n  const [name, setName] = useState(v.name);\n  const [year, setYear] = useState(v.year != null ? String(v.year) : \"\");\n  const [plate, setPlate] = useState(v.plate);\n  const [color, setColor] = useState(v.color);\n  const [baseDate, setBaseDate] = useState(v.baseline_date);\n  const [baseKm, setBaseKm] = useState(String(v.baseline_odometer_km));\n  const [busy, setBusy] = useState(false);\n\n  async function save() {\n    setBusy(true);\n    await mutate(api.updateVehicle({\n      name, make: v.make, model: v.model,\n      year: year === \"\" ? null : Number(year),\n      plate, color,\n      baseline_date: baseDate,\n      baseline_odometer_km: baseKm === \"\" ? 0 : Number(baseKm),\n    }));\n    setBusy(false);\n  }\n\n  return (\n    <div>\n      <Field label=\"Name\"><Input value={name} onChange={(e: { target: { value: string } }) => setName(e.target.value)} /></Field>\n      <div className=\"grid grid-cols-2 gap-3\">\n        <Field label=\"Year\"><Input inputMode=\"numeric\" value={year} onChange={(e: { target: { value: string } }) => setYear(e.target.value)} /></Field>\n        <Field label=\"Color\"><Input value={color} onChange={(e: { target: { value: string } }) => setColor(e.target.value)} /></Field>\n      </div>\n      <Field label=\"Plate number\"><Input value={plate} onChange={(e: { target: { value: string } }) => setPlate(e.target.value)} /></Field>\n      <div className=\"grid grid-cols-2 gap-3\">\n        <Field label=\"Start date\" hint=\"When tracking began\"><Input type=\"date\" value={baseDate} onChange={(e: { target: { value: string } }) => setBaseDate(e.target.value)} /></Field>\n        <Field label=\"Start odometer\" hint=\"km at start date\"><Input inputMode=\"numeric\" value={baseKm} onChange={(e: { target: { value: string } }) => setBaseKm(e.target.value)} /></Field>\n      </div>\n      <Button onClick={save} disabled={busy}>{busy ? \"Saving…\" : \"Save motorcycle\"}</Button>\n    </div>\n  );\n}\n\nfunction ReminderForm({ state, mutate }: { state: AppState; mutate: Mutate }) {\n  const s = state.settings;\n  const [leadDays, setLeadDays] = useState(String(s.reminder_lead_days));\n  const [leadKm, setLeadKm] = useState(String(s.reminder_lead_km));\n  const [currency, setCurrency] = useState(s.currency);\n  const [busy, setBusy] = useState(false);\n  const [testing, setTesting] = useState(false);\n\n  async function save() {\n    setBusy(true);\n    await mutate(api.updateSettings({\n      reminder_lead_days: Number(leadDays) || 7,\n      reminder_lead_km: Number(leadKm) || 200,\n      currency: currency || \"PHP\",\n      timezone: s.timezone,\n      email: s.email,\n    }));\n    setBusy(false);\n  }\n\n  async function test() {\n    setTesting(true);\n    try {\n      const r = await api.sendReminder();\n      alert(r.sent ? `Sent! Included: ${r.included.join(\", \")}` : `No email sent: ${r.reason}`);\n    } catch (_) {\n      alert(\"Could not send the test reminder.\");\n    }\n    setTesting(false);\n  }\n\n  return (\n    <div>\n      <div className=\"grid grid-cols-2 gap-3\">\n        <Field label=\"Warn me within (days)\"><Input inputMode=\"numeric\" value={leadDays} onChange={(e: { target: { value: string } }) => setLeadDays(e.target.value)} /></Field>\n        <Field label=\"Warn me within (km)\"><Input inputMode=\"numeric\" value={leadKm} onChange={(e: { target: { value: string } }) => setLeadKm(e.target.value)} /></Field>\n      </div>\n      <Field label=\"Currency\" hint=\"e.g. PHP, USD\"><Input value={currency} onChange={(e: { target: { value: string } }) => setCurrency(e.target.value)} /></Field>\n      <p className=\"text-xs text-neutral-400 mb-3\">\n        A daily check emails you a digest of anything overdue or due soon (max once per 7 days per\n        item). Emails go to your Val Town account address.\n      </p>\n      <div className=\"flex gap-2\">\n        <Button onClick={save} disabled={busy}>{busy ? \"Saving…\" : \"Save reminders\"}</Button>\n        <Button variant=\"secondary\" onClick={test} disabled={testing}>{testing ? \"Sending…\" : \"Send test email\"}</Button>\n      </div>\n    </div>\n  );\n}\n\nfunction DataBackup({ state }: { state: AppState }) {\n  const catById = new Map(state.service_types.map((t) => [t.id, t.category]));\n\n  function exportServices() {\n    const rows = state.records.map((r) => [\n      r.performed_at,\n      r.name,\n      r.service_type_id != null ? (catById.get(r.service_type_id) ?? \"\") : \"\",\n      r.odometer_km ?? \"\",\n      r.cost ?? \"\",\n      r.notes,\n    ]);\n    downloadCSV(\n      `adv160-services-${todayISO()}.csv`,\n      [\"Date\", \"Service\", \"Category\", \"Odometer (km)\", \"Cost\", \"Notes\"],\n      rows,\n    );\n  }\n\n  function exportFuel() {\n    const rows = state.fuel.map((f) => [\n      f.filled_at,\n      f.odometer_km,\n      f.liters,\n      f.price_per_liter ?? \"\",\n      f.total_cost ?? \"\",\n      f.is_full_tank === 1 ? \"yes\" : \"no\",\n      f.notes,\n    ]);\n    downloadCSV(\n      `adv160-fuel-${todayISO()}.csv`,\n      [\"Date\", \"Odometer (km)\", \"Liters\", \"Price/L\", \"Total cost\", \"Full tank\", \"Notes\"],\n      rows,\n    );\n  }\n\n  return (\n    <div>\n      <p className=\"text-xs text-neutral-400 mb-3\">\n        Download your data anytime. The JSON backup contains everything; the CSVs open in Excel or\n        Google Sheets.\n      </p>\n      <a\n        href=\"/api/export\"\n        download={`adv160-backup-${todayISO()}.json`}\n        className=\"inline-flex w-full items-center justify-center rounded-xl font-semibold text-sm px-4 py-2.5 bg-white border border-neutral-300 text-neutral-800 hover:bg-neutral-50 mb-2\"\n      >\n        Download full backup (JSON)\n      </a>\n      <div className=\"grid grid-cols-2 gap-2\">\n        <Button variant=\"secondary\" onClick={exportServices} disabled={state.records.length === 0}>\n          Service log (CSV)\n        </Button>\n        <Button variant=\"secondary\" onClick={exportFuel} disabled={state.fuel.length === 0}>\n          Fuel log (CSV)\n        </Button>\n      </div>\n    </div>\n  );\n}\n\nfunction ServiceRow(\n  { type, categories, mutate }: { type: ServiceType; categories: string[]; mutate: Mutate },\n) {\n  const [open, setOpen] = useState(false);\n  const [name, setName] = useState(type.name);\n  const [category, setCategory] = useState(type.category);\n  const [ik, setIk] = useState(type.interval_km != null ? String(type.interval_km) : \"\");\n  const [im, setIm] = useState(type.interval_months != null ? String(type.interval_months) : \"\");\n  const [fk, setFk] = useState(type.first_km != null ? String(type.first_km) : \"\");\n  const [fm, setFm] = useState(type.first_months != null ? String(type.first_months) : \"\");\n  const [busy, setBusy] = useState(false);\n  const { confirm, dialog } = useConfirm();\n\n  const numOrNull = (x: string) => (x === \"\" ? null : Number(x));\n\n  async function toggle(enabled: boolean) {\n    await mutate(api.updateServiceType(type.id, {\n      name, category,\n      interval_km: numOrNull(ik), interval_months: numOrNull(im),\n      first_km: numOrNull(fk), first_months: numOrNull(fm),\n      enabled, note: type.note,\n    }));\n  }\n\n  async function save() {\n    setBusy(true);\n    await mutate(api.updateServiceType(type.id, {\n      name, category,\n      interval_km: numOrNull(ik), interval_months: numOrNull(im),\n      first_km: numOrNull(fk), first_months: numOrNull(fm),\n      enabled: type.enabled === 1, note: type.note,\n    }));\n    setBusy(false);\n    setOpen(false);\n  }\n\n  return (\n    <div className=\"border border-neutral-200 rounded-xl p-3\">\n      <div className=\"flex items-center justify-between gap-2\">\n        <label className=\"flex items-center gap-2 min-w-0\">\n          <input\n            type=\"checkbox\"\n            checked={type.enabled === 1}\n            onChange={(e: { target: { checked: boolean } }) => toggle(e.target.checked)}\n          />\n          <span className={`text-sm font-medium truncate ${type.enabled === 1 ? \"\" : \"text-neutral-400 line-through\"}`}>\n            {type.name}\n          </span>\n        </label>\n        <button onClick={() => setOpen((o) => !o)} className=\"text-xs text-neutral-500 shrink-0\">\n          {open ? \"Close\" : \"Edit\"}\n        </button>\n      </div>\n      <div className=\"text-xs text-neutral-400 mt-1\">\n        {type.interval_km != null ? `${type.interval_km.toLocaleString()} km` : \"\"}\n        {type.interval_km != null && type.interval_months != null ? \" · \" : \"\"}\n        {type.interval_months != null ? `${type.interval_months} mo` : \"\"}\n        {type.interval_km == null && type.interval_months == null ? \"no interval\" : \"\"}\n      </div>\n\n      {open && (\n        <div className=\"mt-3 pt-3 border-t border-neutral-100\">\n          <Field label=\"Name\"><Input value={name} onChange={(e: { target: { value: string } }) => setName(e.target.value)} /></Field>\n          <Field label=\"Category\">\n            <Select value={category} onChange={(e: { target: { value: string } }) => setCategory(e.target.value)}>\n              {categories.map((c) => <option key={c} value={c}>{c}</option>)}\n            </Select>\n          </Field>\n          <div className=\"grid grid-cols-2 gap-3\">\n            <Field label=\"Every (km)\"><Input inputMode=\"numeric\" value={ik} onChange={(e: { target: { value: string } }) => setIk(e.target.value)} /></Field>\n            <Field label=\"Every (months)\"><Input inputMode=\"numeric\" value={im} onChange={(e: { target: { value: string } }) => setIm(e.target.value)} /></Field>\n          </div>\n          <div className=\"grid grid-cols-2 gap-3\">\n            <Field label=\"First at (km)\" hint=\"Break-in, optional\"><Input inputMode=\"numeric\" value={fk} onChange={(e: { target: { value: string } }) => setFk(e.target.value)} /></Field>\n            <Field label=\"First at (months)\" hint=\"Optional\"><Input inputMode=\"numeric\" value={fm} onChange={(e: { target: { value: string } }) => setFm(e.target.value)} /></Field>\n          </div>\n          <div className=\"flex gap-2\">\n            <Button onClick={save} disabled={busy}>{busy ? \"Saving…\" : \"Save\"}</Button>\n            <Button variant=\"danger\" onClick={() => confirm(`Delete \"${type.name}\"?`, () => mutate(api.deleteServiceType(type.id)))}>Delete</Button>\n          </div>\n        </div>\n      )}\n      {dialog}\n    </div>\n  );\n}\n\nfunction AddService({ state, mutate }: { state: AppState; mutate: Mutate }) {\n  const [open, setOpen] = useState(false);\n  const [name, setName] = useState(\"\");\n  const [category, setCategory] = useState(state.categories[0] ?? \"Other\");\n  const [ik, setIk] = useState(\"\");\n  const [im, setIm] = useState(\"\");\n  const [busy, setBusy] = useState(false);\n  const numOrNull = (x: string) => (x === \"\" ? null : Number(x));\n\n  async function add() {\n    if (!name) return;\n    setBusy(true);\n    await mutate(api.addServiceType({\n      name, category,\n      interval_km: numOrNull(ik), interval_months: numOrNull(im),\n      first_km: null, first_months: null, note: \"\",\n    }));\n    setBusy(false);\n    setName(\"\"); setIk(\"\"); setIm(\"\"); setOpen(false);\n  }\n\n  if (!open) {\n    return (\n      <button onClick={() => setOpen(true)} className=\"mt-3 text-sm font-semibold text-neutral-600 hover:text-neutral-900\">\n        ＋ Add custom service\n      </button>\n    );\n  }\n\n  return (\n    <div className=\"mt-3 border border-dashed border-neutral-300 rounded-xl p-3\">\n      <Field label=\"Name\"><Input value={name} onChange={(e: { target: { value: string } }) => setName(e.target.value)} placeholder=\"e.g. Tires\" /></Field>\n      <Field label=\"Category\">\n        <Select value={category} onChange={(e: { target: { value: string } }) => setCategory(e.target.value)}>\n          {state.categories.map((c) => <option key={c} value={c}>{c}</option>)}\n        </Select>\n      </Field>\n      <div className=\"grid grid-cols-2 gap-3\">\n        <Field label=\"Every (km)\"><Input inputMode=\"numeric\" value={ik} onChange={(e: { target: { value: string } }) => setIk(e.target.value)} /></Field>\n        <Field label=\"Every (months)\"><Input inputMode=\"numeric\" value={im} onChange={(e: { target: { value: string } }) => setIm(e.target.value)} /></Field>\n      </div>\n      <div className=\"flex gap-2\">\n        <Button variant=\"secondary\" onClick={() => setOpen(false)}>Cancel</Button>\n        <Button onClick={add} disabled={busy}>{busy ? \"Adding…\" : \"Add\"}</Button>\n      </div>\n    </div>\n  );\n}\n",[],[139,237,262],"1421ea53-5649-4233-906c-5366c7fb61ad","LogService.tsx","74b72840-7f0d-11f1-8c1b-1607ee4eb77e",121,["D",1784039902574],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { api, photoUrl } from \"../lib/api.ts\";\nimport type { AppState } from \"../lib/api.ts\";\nimport type { ServiceRecord } from \"../../shared/types.ts\";\nimport { todayISO } from \"../lib/format.ts\";\nimport { fileToDataUrl } from \"../lib/image.ts\";\nimport { Button, Dropdown, Field, FileButton, Input, Modal, Textarea } from \"./ui.tsx\";\nimport type { Mutate } from \"./App.tsx\";\n\nexport function LogService(\n  { state, mutate, onClose, presetTypeId, record }: {\n    state: AppState;\n    mutate: Mutate;\n    onClose: () => void;\n    presetTypeId?: number | null;\n    record?: ServiceRecord | null;\n  },\n) {\n  const preset = presetTypeId != null ? state.service_types.find((t) => t.id === presetTypeId) : null;\n  const initialType = record\n    ? (record.service_type_id != null ? String(record.service_type_id) : \"custom\")\n    : (preset\n      ? String(preset.id)\n      : (state.service_types[0] ? String(state.service_types[0].id) : \"custom\"));\n\n  const [typeId, setTypeId] = useState<string>(initialType);\n  const [customName, setCustomName] = useState(\n    record && record.service_type_id == null ? record.name : \"\",\n  );\n  const [date, setDate] = useState(record ? record.performed_at : todayISO());\n  const [odo, setOdo] = useState<string>(\n    record\n      ? (record.odometer_km != null ? String(record.odometer_km) : \"\")\n      : String(state.vehicle.current_odometer_km || \"\"),\n  );\n  const [cost, setCost] = useState(record && record.cost != null ? String(record.cost) : \"\");\n  const [notes, setNotes] = useState(record?.notes ?? \"\");\n  const [keepKeys, setKeepKeys] = useState<string[]>(record?.photo_keys ?? []);\n  const [photos, setPhotos] = useState<string[]>([]);\n  const [busy, setBusy] = useState(false);\n\n  async function onPick(e: { target: { files: FileList | null } }) {\n    const files = Array.from(e.target.files ?? []);\n    const urls = await Promise.all(files.slice(0, 6).map((f) => fileToDataUrl(f)));\n    setPhotos((p) => [...p, ...urls].slice(0, 6));\n  }\n\n  async function submit() {\n    setBusy(true);\n    const chosen = typeId === \"custom\" ? null : Number(typeId);\n    const name = chosen != null\n      ? (state.service_types.find((t) => t.id === chosen)?.name ?? \"Service\")\n      : (customName || \"Other service\");\n    const payload = {\n      service_type_id: chosen,\n      name,\n      performed_at: date,\n      odometer_km: odo === \"\" ? null : Number(odo),\n      cost: cost === \"\" ? null : Number(cost),\n      notes,\n      photos,\n      file_keys: keepKeys,\n    };\n    await mutate(record ? api.updateRecord(record.id, payload) : api.addRecord(payload));\n    setBusy(false);\n    onClose();\n  }\n\n  return (\n    <Modal title={record ? \"Edit service\" : \"Log a service\"} onClose={onClose}>\n      <Field label=\"Service\">\n        <Dropdown\n          value={typeId}\n          onChange={setTypeId}\n          options={[\n            ...state.service_types.map((t) => ({ value: String(t.id), label: t.name })),\n            { value: \"custom\", label: \"Other / custom…\" },\n          ]}\n        />\n      </Field>\n\n      {typeId === \"custom\" && (\n        <Field label=\"Custom service name\">\n          <Input value={customName} onChange={(e: { target: { value: string } }) => setCustomName(e.target.value)} placeholder=\"e.g. New tires\" />\n        </Field>\n      )}\n\n      <div className=\"grid grid-cols-2 gap-3\">\n        <Field label=\"Date\">\n          <Input type=\"date\" value={date} onChange={(e: { target: { value: string } }) => setDate(e.target.value)} />\n        </Field>\n        <Field label=\"Odometer (km)\">\n          <Input inputMode=\"numeric\" value={odo} onChange={(e: { target: { value: string } }) => setOdo(e.target.value)} placeholder=\"e.g. 1200\" />\n        </Field>\n      </div>\n\n      <Field label={`Cost (${state.settings.currency})`} hint=\"Optional\">\n        <Input inputMode=\"decimal\" value={cost} onChange={(e: { target: { value: string } }) => setCost(e.target.value)} placeholder=\"0.00\" />\n      </Field>\n\n      <Field label=\"Notes\" hint=\"Optional — shop, parts, observations\">\n        <Textarea rows={2} value={notes} onChange={(e: { target: { value: string } }) => setNotes(e.target.value)} />\n      </Field>\n\n      <Field label=\"Photos\" hint=\"Receipts or parts — resized automatically\">\n        <FileButton onChange={onPick} />\n        {(keepKeys.length > 0 || photos.length > 0) && (\n          <div className=\"flex gap-2 flex-wrap mt-2\">\n            {keepKeys.map((k) => (\n              <div key={k} className=\"relative\">\n                <img src={photoUrl(k)} className=\"w-16 h-16 object-cover rounded-lg border border-neutral-200\" />\n                <button\n                  onClick={() => setKeepKeys((ks) => ks.filter((x) => x !== k))}\n                  className=\"absolute -top-1.5 -right-1.5 bg-neutral-800 text-white rounded-full w-5 h-5 text-xs leading-none\"\n                >×</button>\n              </div>\n            ))}\n            {photos.map((p, i) => (\n              <div key={i} className=\"relative\">\n                <img src={p} className=\"w-16 h-16 object-cover rounded-lg border border-neutral-200\" />\n                <button\n                  onClick={() => setPhotos((ps) => ps.filter((_, j) => j !== i))}\n                  className=\"absolute -top-1.5 -right-1.5 bg-neutral-800 text-white rounded-full w-5 h-5 text-xs leading-none\"\n                >×</button>\n              </div>\n            ))}\n          </div>\n        )}\n      </Field>\n\n      <div className=\"flex gap-2 mt-4\">\n        <Button variant=\"secondary\" full onClick={onClose}>Cancel</Button>\n        <Button full onClick={submit} disabled={busy}>\n          {busy ? \"Saving…\" : (record ? \"Save changes\" : \"Save service\")}\n        </Button>\n      </div>\n    </Modal>\n  );\n}\n",[],[139,237,271],"dedfea4e-867d-4e21-bf2b-f02f4d488ab7","History.tsx","b489e174-7f0d-11f1-ab46-1607ee4eb77e",134,["D",1784041904643],6,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { api, photoUrl } from \"../lib/api.ts\";\nimport type { ServiceRecord } from \"../../shared/types.ts\";\nimport { fdate, km, money } from \"../lib/format.ts\";\nimport { Button, Card, EmptyState, useConfirm } from \"./ui.tsx\";\nimport { LogService } from \"./LogService.tsx\";\nimport type { ViewProps } from \"./App.tsx\";\n\nexport function HistoryView({ state, mutate }: ViewProps) {\n  const cur = state.settings.currency;\n  const records = state.records;\n  const [editing, setEditing] = useState<ServiceRecord | null>(null);\n  const { confirm, dialog } = useConfirm();\n\n  if (records.length === 0) {\n    return (\n      <Card className=\"p-2\">\n        <EmptyState icon=\"history\" title=\"No service history yet\" sub=\"Logged services will appear here.\" />\n      </Card>\n    );\n  }\n\n  return (\n    <div className=\"space-y-2.5\">\n      {records.map((r) => (\n        <Card key={r.id} className=\"p-3.5\">\n          <div className=\"flex items-start justify-between gap-2\">\n            <div className=\"min-w-0\">\n              <div className=\"font-semibold text-neutral-800\">{r.name}</div>\n              <div className=\"text-xs text-neutral-500 mt-0.5\">\n                {fdate(r.performed_at)}{r.odometer_km != null ? ` · ${km(r.odometer_km)}` : \"\"}\n              </div>\n            </div>\n            {r.cost != null && <div className=\"font-semibold shrink-0\">{money(cur, r.cost)}</div>}\n          </div>\n          {r.notes && <div className=\"text-sm text-neutral-600 mt-2\">{r.notes}</div>}\n          {r.photo_keys.length > 0 && (\n            <div className=\"flex gap-2 flex-wrap mt-2\">\n              {r.photo_keys.map((k) => (\n                <a key={k} href={photoUrl(k)} target=\"_blank\" rel=\"noreferrer\">\n                  <img src={photoUrl(k)} className=\"w-16 h-16 object-cover rounded-lg border border-neutral-200\" />\n                </a>\n              ))}\n            </div>\n          )}\n          <div className=\"flex items-center gap-2 mt-3\">\n            <Button variant=\"secondary\" onClick={() => setEditing(r)} className=\"!py-2 text-xs\">Edit</Button>\n            <button\n              onClick={() => confirm(\"Delete this record?\", () => mutate(api.deleteRecord(r.id)))}\n              className=\"text-xs text-red-500 hover:underline ml-auto\"\n            >\n              Delete\n            </button>\n          </div>\n        </Card>\n      ))}\n\n      {editing && (\n        <LogService state={state} mutate={mutate} record={editing} onClose={() => setEditing(null)} />\n      )}\n      {dialog}\n    </div>\n  );\n}\n",[],[139,237,279],"10537445-1b7f-4aa5-befe-5a8a9ceeb1b7","Fuel.tsx","a4a6f7d8-7f0d-11f1-bf41-1607ee4eb77e",138,["D",1784041946122],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { api } from \"../lib/api.ts\";\nimport type { AppState } from \"../lib/api.ts\";\nimport type { FuelLog } from \"../../shared/types.ts\";\nimport { fdate, km, money, num, todayISO } from \"../lib/format.ts\";\nimport { Button, Card, EmptyState, Field, Icon, Input, Modal, Stat, Toggle, useConfirm } from \"./ui.tsx\";\nimport type { Mutate, ViewProps } from \"./App.tsx\";\n\nexport function FuelView({ state, mutate }: ViewProps) {\n  // undefined = closed, null = new fill-up, FuelLog = editing existing\n  const [editing, setEditing] = useState<FuelLog | null | undefined>(undefined);\n  const cur = state.settings.currency;\n  const eco = state.fuel_economy;\n  const segByToKm = new Map(eco.segments.map((s) => [s.to_km, s.km_per_l]));\n  const { confirm, dialog } = useConfirm();\n\n  return (\n    <div className=\"space-y-4\">\n      <Card className=\"p-4\">\n        <div className=\"flex gap-3\">\n          <Stat label=\"Avg economy\" value={eco.average_km_per_l != null ? `${num(eco.average_km_per_l, 1)}` : \"—\"} sub=\"km / L\" />\n          <Stat label=\"Fill-ups\" value={state.fuel.length} />\n          <Stat label=\"Fuel cost\" value={money(cur, state.costs.fuel_total)} />\n        </div>\n      </Card>\n\n      <Button full onClick={() => setEditing(null)}><Icon name=\"plus\" size={18} /> Add fuel fill-up</Button>\n\n      {state.fuel.length === 0\n        ? (\n          <Card className=\"p-2\">\n            <EmptyState icon=\"fuel\" title=\"No fuel logged yet\" sub=\"Add a fill-up to start tracking economy.\" />\n          </Card>\n        )\n        : (\n          <div className=\"space-y-2.5\">\n            {state.fuel.map((f) => {\n              const kmpl = f.is_full_tank === 1 ? segByToKm.get(f.odometer_km) : undefined;\n              return (\n                <Card key={f.id} className=\"p-3.5\">\n                  <div className=\"flex items-start justify-between\">\n                    <div>\n                      <div className=\"font-semibold text-neutral-800\">{km(f.odometer_km)}</div>\n                      <div className=\"text-xs text-neutral-500\">{fdate(f.filled_at)}</div>\n                    </div>\n                    <div className=\"text-right\">\n                      <div className=\"font-semibold\">{num(f.liters, 2)} L</div>\n                      <div className=\"text-xs text-neutral-500\">\n                        {f.total_cost != null ? money(cur, f.total_cost) : (f.price_per_liter != null ? `${money(cur, f.price_per_liter)}/L` : \"—\")}\n                      </div>\n                    </div>\n                  </div>\n                  <div className=\"flex items-center gap-2 text-xs mt-2\">\n                    {f.is_full_tank === 1\n                      ? <span className=\"bg-emerald-100 text-emerald-700 px-2 py-0.5 rounded-full font-semibold\">Full tank</span>\n                      : <span className=\"bg-neutral-100 text-neutral-500 px-2 py-0.5 rounded-full font-semibold\">Partial</span>}\n                    {kmpl != null && <span className=\"text-neutral-500\">{num(kmpl, 1)} km/L this tank</span>}\n                  </div>\n                  {f.notes && <div className=\"text-xs text-neutral-500 mt-1\">{f.notes}</div>}\n                  <div className=\"flex items-center gap-2 mt-3\">\n                    <Button variant=\"secondary\" onClick={() => setEditing(f)} className=\"!py-2 text-xs\">Edit</Button>\n                    <button\n                      onClick={() => confirm(\"Delete this fill-up?\", () => mutate(api.deleteFuel(f.id)))}\n                      className=\"text-xs text-red-500 hover:underline ml-auto\"\n                    >\n                      Delete\n                    </button>\n                  </div>\n                </Card>\n              );\n            })}\n          </div>\n        )}\n\n      {editing !== undefined && (\n        <FuelForm state={state} mutate={mutate} fuel={editing} onClose={() => setEditing(undefined)} />\n      )}\n      {dialog}\n    </div>\n  );\n}\n\nfunction FuelForm(\n  { state, mutate, fuel, onClose }: {\n    state: AppState;\n    mutate: Mutate;\n    fuel: FuelLog | null;\n    onClose: () => void;\n  },\n) {\n  const [date, setDate] = useState(fuel ? fuel.filled_at : todayISO());\n  const [odo, setOdo] = useState<string>(\n    fuel ? String(fuel.odometer_km) : String(state.vehicle.current_odometer_km || \"\"),\n  );\n  const [liters, setLiters] = useState(fuel ? String(fuel.liters) : \"\");\n  const [ppl, setPpl] = useState(fuel && fuel.price_per_liter != null ? String(fuel.price_per_liter) : \"\");\n  const [total, setTotal] = useState(fuel && fuel.total_cost != null ? String(fuel.total_cost) : \"\");\n  const [full, setFull] = useState(fuel ? fuel.is_full_tank === 1 : true);\n  const [notes, setNotes] = useState(fuel?.notes ?? \"\");\n  const [busy, setBusy] = useState(false);\n\n  async function submit() {\n    if (odo === \"\" || liters === \"\") return;\n    setBusy(true);\n    const payload = {\n      filled_at: date,\n      odometer_km: Number(odo),\n      liters: Number(liters),\n      price_per_liter: ppl === \"\" ? null : Number(ppl),\n      total_cost: total === \"\" ? null : Number(total),\n      is_full_tank: full,\n      notes,\n    };\n    await mutate(fuel ? api.updateFuel(fuel.id, payload) : api.addFuel(payload));\n    setBusy(false);\n    onClose();\n  }\n\n  return (\n    <Modal title={fuel ? \"Edit fill-up\" : \"Add fuel fill-up\"} onClose={onClose}>\n      <div className=\"grid grid-cols-2 gap-3\">\n        <Field label=\"Date\">\n          <Input type=\"date\" value={date} onChange={(e: { target: { value: string } }) => setDate(e.target.value)} />\n        </Field>\n        <Field label=\"Odometer (km)\">\n          <Input inputMode=\"numeric\" value={odo} onChange={(e: { target: { value: string } }) => setOdo(e.target.value)} />\n        </Field>\n      </div>\n      <div className=\"grid grid-cols-2 gap-3\">\n        <Field label=\"Liters\">\n          <Input inputMode=\"decimal\" value={liters} onChange={(e: { target: { value: string } }) => setLiters(e.target.value)} placeholder=\"e.g. 4.2\" />\n        </Field>\n        <Field label={`Total cost (${state.settings.currency})`} hint=\"or price/L below\">\n          <Input inputMode=\"decimal\" value={total} onChange={(e: { target: { value: string } }) => setTotal(e.target.value)} />\n        </Field>\n      </div>\n      <Field label={`Price per liter (${state.settings.currency})`} hint=\"Optional\">\n        <Input inputMode=\"decimal\" value={ppl} onChange={(e: { target: { value: string } }) => setPpl(e.target.value)} />\n      </Field>\n      <div className=\"mb-3\">\n        <Toggle\n          checked={full}\n          onChange={setFull}\n          label=\"Full tank\"\n          hint=\"Filled it all the way — needed to calculate fuel economy\"\n        />\n      </div>\n      <Field label=\"Notes\" hint=\"Optional\">\n        <Input value={notes} onChange={(e: { target: { value: string } }) => setNotes(e.target.value)} />\n      </Field>\n      <div className=\"flex gap-2 mt-2\">\n        <Button variant=\"secondary\" full onClick={onClose}>Cancel</Button>\n        <Button full onClick={submit} disabled={busy}>\n          {busy ? \"Saving…\" : (fuel ? \"Save changes\" : \"Save fill-up\")}\n        </Button>\n      </div>\n    </Modal>\n  );\n}\n",[],[139,237,288],"7d4da244-8baf-4cdb-903e-24369e7a0024","Documents.tsx","ca974dce-7f14-11f1-abf1-1607ee4eb77e",142,["D",1784041992247],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { api, photoUrl } from \"../lib/api.ts\";\nimport type { AppState } from \"../lib/api.ts\";\nimport type { DocInfo, DocStatus } from \"../../shared/types.ts\";\nimport { fdate } from \"../lib/format.ts\";\nimport { fileToDataUrl } from \"../lib/image.ts\";\nimport { Button, Card, Dropdown, EmptyState, Field, FileButton, Icon, Input, Modal, Textarea, useConfirm } from \"./ui.tsx\";\nimport type { Mutate, ViewProps } from \"./App.tsx\";\n\nconst STATUS_META: Record<DocStatus, { label: string; cls: string; accent: string }> = {\n  expired: { label: \"Expired\", cls: \"bg-red-100 text-red-700\", accent: \"border-l-red-500\" },\n  expiring_soon: { label: \"Renew soon\", cls: \"bg-amber-100 text-amber-800\", accent: \"border-l-amber-400\" },\n  ok: { label: \"Valid\", cls: \"bg-emerald-100 text-emerald-700\", accent: \"border-l-emerald-400\" },\n  none: { label: \"No expiry\", cls: \"bg-neutral-100 text-neutral-500\", accent: \"border-l-neutral-300\" },\n};\n\nexport function DocumentsView({ state, mutate }: ViewProps) {\n  // undefined = closed, null = new document, DocInfo = editing existing\n  const [editing, setEditing] = useState<DocInfo | null | undefined>(undefined);\n  const { confirm, dialog } = useConfirm();\n\n  return (\n    <div className=\"space-y-4\">\n      <Button full onClick={() => setEditing(null)}>\n        <Icon name=\"plus\" size={18} /> Add document\n      </Button>\n\n      {state.documents.length === 0\n        ? (\n          <Card className=\"p-2\">\n            <EmptyState\n              icon=\"doc\"\n              title=\"No documents yet\"\n              sub=\"Store your OR/CR, insurance and license — with renewal reminders.\"\n            />\n          </Card>\n        )\n        : (\n          <div className=\"space-y-2.5\">\n            {state.documents.map((d) => (\n              <DocCard\n                key={d.id}\n                d={d}\n                onEdit={() => setEditing(d)}\n                onDelete={() =>\n                  confirm(`Delete \"${d.name || d.doc_type}\"?`, () => mutate(api.deleteDocument(d.id)))}\n              />\n            ))}\n          </div>\n        )}\n\n      {editing !== undefined && (\n        <DocForm state={state} mutate={mutate} doc={editing} onClose={() => setEditing(undefined)} />\n      )}\n      {dialog}\n    </div>\n  );\n}\n\nfunction DocCard({ d, onEdit, onDelete }: { d: DocInfo; onEdit: () => void; onDelete: () => void }) {\n  const meta = STATUS_META[d.status];\n  return (\n    <Card className={`p-3.5 border-l-4 ${meta.accent}`}>\n      <div className=\"flex items-start justify-between gap-2\">\n        <div className=\"min-w-0\">\n          <div className=\"font-semibold text-neutral-800 truncate\">{d.name || d.doc_type}</div>\n          <div className=\"text-xs text-neutral-500 mt-0.5\">\n            {d.doc_type}{d.reference ? ` · ${d.reference}` : \"\"}\n          </div>\n        </div>\n        <span className={`text-xs font-semibold px-2 py-0.5 rounded-full shrink-0 ${meta.cls}`}>\n          {meta.label}\n        </span>\n      </div>\n\n      <div className=\"text-sm text-neutral-700 mt-2\">\n        {d.expiry_date\n          ? (\n            <span>\n              Expires {fdate(d.expiry_date)}\n              {d.days_remaining != null\n                ? (d.days_remaining < 0\n                  ? ` · ${-d.days_remaining} days ago`\n                  : ` · in ${d.days_remaining} days`)\n                : \"\"}\n            </span>\n          )\n          : <span className=\"text-neutral-400\">No expiry date</span>}\n      </div>\n      {d.notes && <div className=\"text-xs text-neutral-500 mt-1\">{d.notes}</div>}\n\n      {d.file_keys.length > 0 && (\n        <div className=\"flex gap-2 flex-wrap mt-2\">\n          {d.file_keys.map((k) => (\n            <a key={k} href={photoUrl(k)} target=\"_blank\" rel=\"noreferrer\">\n              <img src={photoUrl(k)} className=\"w-16 h-16 object-cover rounded-lg border border-neutral-200\" />\n            </a>\n          ))}\n        </div>\n      )}\n\n      <div className=\"flex items-center gap-2 mt-3\">\n        <Button variant=\"secondary\" onClick={onEdit} className=\"!py-2 text-xs\">Edit</Button>\n        <button onClick={onDelete} className=\"text-xs text-red-500 hover:underline ml-auto\">Delete</button>\n      </div>\n    </Card>\n  );\n}\n\nfunction DocForm(\n  { state, mutate, doc, onClose }: {\n    state: AppState;\n    mutate: Mutate;\n    doc: DocInfo | null;\n    onClose: () => void;\n  },\n) {\n  const [docType, setDocType] = useState(doc?.doc_type ?? state.doc_types[0] ?? \"Other\");\n  const [name, setName] = useState(doc?.name ?? \"\");\n  const [reference, setReference] = useState(doc?.reference ?? \"\");\n  const [issue, setIssue] = useState(doc?.issue_date ?? \"\");\n  const [expiry, setExpiry] = useState(doc?.expiry_date ?? \"\");\n  const [notes, setNotes] = useState(doc?.notes ?? \"\");\n  const [keepKeys, setKeepKeys] = useState<string[]>(doc?.file_keys ?? []);\n  const [newPhotos, setNewPhotos] = useState<string[]>([]);\n  const [busy, setBusy] = useState(false);\n\n  async function onPick(e: { target: { files: FileList | null } }) {\n    const files = Array.from(e.target.files ?? []);\n    const urls = await Promise.all(files.slice(0, 6).map((f) => fileToDataUrl(f)));\n    setNewPhotos((p) => [...p, ...urls].slice(0, 6));\n  }\n\n  async function submit() {\n    setBusy(true);\n    const payload = {\n      doc_type: docType,\n      name,\n      reference,\n      issue_date: issue,\n      expiry_date: expiry,\n      notes,\n      photos: newPhotos,\n      file_keys: keepKeys,\n    };\n    await mutate(doc ? api.updateDocument(doc.id, payload) : api.addDocument(payload));\n    setBusy(false);\n    onClose();\n  }\n\n  return (\n    <Modal title={doc ? \"Edit document\" : \"Add document\"} onClose={onClose}>\n      <Field label=\"Type\">\n        <Dropdown value={docType} onChange={setDocType} options={state.doc_types.map((t) => ({ value: t, label: t }))} />\n      </Field>\n      <Field label=\"Label\" hint=\"e.g. OR/CR 2026, Insurance – Malayan\">\n        <Input value={name} onChange={(e: { target: { value: string } }) => setName(e.target.value)} />\n      </Field>\n      <Field label=\"Reference #\" hint=\"Plate, policy #, MV file no. — optional\">\n        <Input value={reference} onChange={(e: { target: { value: string } }) => setReference(e.target.value)} />\n      </Field>\n      <div className=\"grid grid-cols-2 gap-3\">\n        <Field label=\"Issued\" hint=\"Optional\">\n          <Input type=\"date\" value={issue} onChange={(e: { target: { value: string } }) => setIssue(e.target.value)} />\n        </Field>\n        <Field label=\"Expires\" hint=\"Drives reminders\">\n          <Input type=\"date\" value={expiry} onChange={(e: { target: { value: string } }) => setExpiry(e.target.value)} />\n        </Field>\n      </div>\n      <Field label=\"Notes\" hint=\"Optional\">\n        <Textarea rows={2} value={notes} onChange={(e: { target: { value: string } }) => setNotes(e.target.value)} />\n      </Field>\n      <Field label=\"Photos\" hint=\"Photograph the document(s) — resized automatically\">\n        <FileButton onChange={onPick} />\n        {(keepKeys.length > 0 || newPhotos.length > 0) && (\n          <div className=\"flex gap-2 flex-wrap mt-2\">\n            {keepKeys.map((k) => (\n              <div key={k} className=\"relative\">\n                <img src={photoUrl(k)} className=\"w-16 h-16 object-cover rounded-lg border border-neutral-200\" />\n                <button\n                  onClick={() => setKeepKeys((ks) => ks.filter((x) => x !== k))}\n                  className=\"absolute -top-1.5 -right-1.5 bg-neutral-800 text-white rounded-full w-5 h-5 text-xs leading-none\"\n                >×</button>\n              </div>\n            ))}\n            {newPhotos.map((p, i) => (\n              <div key={i} className=\"relative\">\n                <img src={p} className=\"w-16 h-16 object-cover rounded-lg border border-neutral-200\" />\n                <button\n                  onClick={() => setNewPhotos((ps) => ps.filter((_, j) => j !== i))}\n                  className=\"absolute -top-1.5 -right-1.5 bg-neutral-800 text-white rounded-full w-5 h-5 text-xs leading-none\"\n                >×</button>\n              </div>\n            ))}\n          </div>\n        )}\n      </Field>\n      <div className=\"flex gap-2 mt-2\">\n        <Button variant=\"secondary\" full onClick={onClose}>Cancel</Button>\n        <Button full onClick={submit} disabled={busy}>{busy ? \"Saving…\" : \"Save document\"}</Button>\n      </div>\n    </Modal>\n  );\n}\n",[],[139,237,296],"e2665361-fed9-426f-a6c0-465c3049aa15","Dashboard.tsx","86405afa-7f0d-11f1-a307-1607ee4eb77e",107,["D",1784014821225],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { api } from \"../lib/api.ts\";\nimport type { DueInfo } from \"../../shared/types.ts\";\nimport { fdate, km, num } from \"../lib/format.ts\";\nimport { Button, Card, EmptyState, Icon, Input, StatusPill } from \"./ui.tsx\";\nimport { LogService } from \"./LogService.tsx\";\nimport type { ViewProps } from \"./App.tsx\";\n\nexport function Dashboard({ state, mutate }: ViewProps) {\n  const [logFor, setLogFor] = useState<number | null | undefined>(undefined); // undefined = closed\n  const [odo, setOdo] = useState(\"\");\n  const [savingOdo, setSavingOdo] = useState(false);\n\n  const dueItems = state.due.filter((d) => d.enabled);\n\n  async function saveOdo() {\n    if (odo === \"\") return;\n    setSavingOdo(true);\n    await mutate(api.addOdometer(Number(odo)));\n    setOdo(\"\");\n    setSavingOdo(false);\n  }\n\n  return (\n    <div className=\"space-y-4\">\n      {/* Odometer + log actions */}\n      <Card className=\"p-4\">\n        <div className=\"flex items-center gap-2\">\n          <Input\n            inputMode=\"numeric\"\n            value={odo}\n            onChange={(e: { target: { value: string } }) => setOdo(e.target.value)}\n            placeholder={`Update odometer (now ${km(state.vehicle.current_odometer_km)})`}\n          />\n          <Button onClick={saveOdo} disabled={savingOdo || odo === \"\"}>Save</Button>\n        </div>\n        <div className=\"mt-3\">\n          <Button full onClick={() => setLogFor(null)}><Icon name=\"plus\" size={18} /> Log a service</Button>\n        </div>\n        {state.km_per_day != null && (\n          <div className=\"text-xs text-neutral-400 mt-2 text-center\">\n            Average use ≈ {num(state.km_per_day, 1)} km/day\n          </div>\n        )}\n      </Card>\n\n      {/* Due list */}\n      <div className=\"flex items-center justify-between px-1\">\n        <h2 className=\"font-bold text-neutral-700\">Maintenance</h2>\n        <span className=\"text-xs text-neutral-400\">{dueItems.length} tracked</span>\n      </div>\n\n      {dueItems.length === 0\n        ? (\n          <Card className=\"p-2\">\n            <EmptyState icon=\"wrench\" title=\"No services enabled\" sub=\"Turn some on in Settings.\" />\n          </Card>\n        )\n        : (\n          <div className=\"space-y-2.5\">\n            {dueItems.map((d) => (\n              <DueCard\n                key={d.service_type_id}\n                d={d}\n                onLog={() => setLogFor(d.service_type_id)}\n                onSnooze={() => mutate(api.snooze(d.service_type_id))}\n              />\n            ))}\n          </div>\n        )}\n\n      {logFor !== undefined && (\n        <LogService\n          state={state}\n          mutate={mutate}\n          presetTypeId={logFor}\n          onClose={() => setLogFor(undefined)}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction DueCard(\n  { d, onLog, onSnooze }: { d: DueInfo; onLog: () => void; onSnooze: () => void },\n) {\n  const accent = d.status === \"overdue\"\n    ? \"border-l-[#E4002B]\"\n    : d.status === \"due_soon\"\n    ? \"border-l-amber-400\"\n    : \"border-l-neutral-300\";\n\n  const dueBits: string[] = [];\n  if (d.next_due_km != null) dueBits.push(km(d.next_due_km));\n  if (d.next_due_date != null) dueBits.push(`by ${fdate(d.next_due_date)}`);\n\n  return (\n    <Card className={`p-3.5 border-l-4 ${accent}`}>\n      <div className=\"flex items-start justify-between gap-2\">\n        <div className=\"min-w-0\">\n          <div className=\"font-semibold text-neutral-800 truncate\">{d.name}</div>\n          <div className=\"text-xs text-neutral-500 mt-0.5\">{d.category}</div>\n        </div>\n        <StatusPill status={d.status} />\n      </div>\n\n      <div className=\"mt-2 text-sm text-neutral-700\">\n        {dueBits.length ? <span>Next due: {dueBits.join(\" · \")}</span> : <span className=\"text-neutral-400\">No interval set</span>}\n      </div>\n      {d.reason && (\n        <div\n          className={`text-xs mt-0.5 ${\n            d.status === \"overdue\" ? \"text-red-600\" : d.status === \"due_soon\" ? \"text-amber-700\" : \"text-neutral-400\"\n          }`}\n        >\n          {d.reason}\n        </div>\n      )}\n      <div className=\"text-xs text-neutral-400 mt-1\">\n        {d.last_done_date\n          ? `Last done: ${fdate(d.last_done_date)}${d.last_done_km != null ? ` · ${km(d.last_done_km)}` : \"\"}`\n          : \"Never logged\"}\n      </div>\n\n      <div className=\"flex gap-2 mt-3\">\n        <Button variant=\"secondary\" onClick={onLog} className=\"!py-2 text-xs\">Log this</Button>\n        {(d.status === \"overdue\" || d.status === \"due_soon\") && (\n          <Button variant=\"ghost\" onClick={onSnooze} className=\"!py-2 text-xs\">Snooze 7d</Button>\n        )}\n      </div>\n    </Card>\n  );\n}\n",[],[139,237,304],"b4984de5-06fb-4214-ad58-b4739811343e","Costs.tsx","b04c37ec-7f0d-11f1-9fbe-1607ee4eb77e",52,["D",1783984958443],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { money, monthLabel } from \"../lib/format.ts\";\nimport { Card, EmptyState, Stat } from \"./ui.tsx\";\nimport { RED } from \"./ui.tsx\";\nimport type { ViewProps } from \"./App.tsx\";\n\nexport function CostsView({ state }: ViewProps) {\n  const cur = state.settings.currency;\n  const c = state.costs;\n  const months = Object.entries(c.by_month).sort(([a], [b]) => (a < b ? 1 : -1)).slice(0, 12);\n  const maxMonth = Math.max(1, ...months.map(([, v]) => v.service + v.fuel));\n  const cats = Object.entries(c.by_category).sort(([, a], [, b]) => b - a);\n\n  return (\n    <div className=\"space-y-4\">\n      <Card className=\"p-4\">\n        <div className=\"flex gap-3\">\n          <Stat label=\"Total spent\" value={money(cur, c.total)} />\n          <Stat label=\"Service\" value={money(cur, c.service_total)} />\n          <Stat label=\"Fuel\" value={money(cur, c.fuel_total)} />\n        </div>\n      </Card>\n\n      {c.total === 0\n        ? (\n          <Card className=\"p-2\">\n            <EmptyState icon=\"costs\" title=\"No costs recorded yet\" sub=\"Add costs when logging services or fuel.\" />\n          </Card>\n        )\n        : (\n          <>\n            <Card className=\"p-4\">\n              <h3 className=\"font-bold text-neutral-700 mb-3\">Monthly spend</h3>\n              <div className=\"space-y-2\">\n                {months.map(([m, v]) => {\n                  const total = v.service + v.fuel;\n                  return (\n                    <div key={m}>\n                      <div className=\"flex justify-between text-xs mb-1\">\n                        <span className=\"text-neutral-500\">{monthLabel(m)}</span>\n                        <span className=\"font-semibold\">{money(cur, total)}</span>\n                      </div>\n                      <div className=\"h-2.5 rounded-full bg-neutral-100 overflow-hidden flex\">\n                        <div style={{ width: `${(v.service / maxMonth) * 100}%`, backgroundColor: RED }} />\n                        <div style={{ width: `${(v.fuel / maxMonth) * 100}%`, backgroundColor: \"#f59e0b\" }} />\n                      </div>\n                    </div>\n                  );\n                })}\n              </div>\n              <div className=\"flex gap-4 mt-3 text-xs text-neutral-500\">\n                <span className=\"flex items-center gap-1\"><span className=\"w-2.5 h-2.5 rounded-full inline-block\" style={{ backgroundColor: RED }} />Service</span>\n                <span className=\"flex items-center gap-1\"><span className=\"w-2.5 h-2.5 rounded-full inline-block bg-amber-500\" />Fuel</span>\n              </div>\n            </Card>\n\n            {cats.length > 0 && (\n              <Card className=\"p-4\">\n                <h3 className=\"font-bold text-neutral-700 mb-3\">Service by category</h3>\n                <div className=\"space-y-2\">\n                  {cats.map(([cat, amt]) => (\n                    <div key={cat} className=\"flex justify-between text-sm\">\n                      <span className=\"text-neutral-600\">{cat}</span>\n                      <span className=\"font-semibold\">{money(cur, amt)}</span>\n                    </div>\n                  ))}\n                </div>\n              </Card>\n            )}\n          </>\n        )}\n    </div>\n  );\n}\n",[],[139,237,312],"32faeb64-4896-4e9d-a7ef-04099205ba86","App.tsx","5de39cc0-7f0d-11f1-a52a-1607ee4eb77e",113,["D",1784015977929],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useCallback, useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { api, AuthError } from \"../lib/api.ts\";\nimport type { AppState } from \"../lib/api.ts\";\nimport { km } from \"../lib/format.ts\";\nimport { Button, Icon, RED } from \"./ui.tsx\";\nimport { Dashboard } from \"./Dashboard.tsx\";\nimport { FuelView } from \"./Fuel.tsx\";\nimport { CostsView } from \"./Costs.tsx\";\nimport { HistoryView } from \"./History.tsx\";\nimport { SettingsView } from \"./Settings.tsx\";\nimport { DocumentsView } from \"./Documents.tsx\";\n\nexport type Mutate = (p: Promise<AppState>) => Promise<void>;\nexport interface ViewProps {\n  state: AppState;\n  mutate: Mutate;\n}\n\ntype Tab = \"dashboard\" | \"fuel\" | \"costs\" | \"history\" | \"documents\";\n\nconst TABS: { id: Tab; label: string; icon: string }[] = [\n  { id: \"dashboard\", label: \"Home\", icon: \"home\" },\n  { id: \"fuel\", label: \"Fuel\", icon: \"fuel\" },\n  { id: \"costs\", label: \"Costs\", icon: \"costs\" },\n  { id: \"history\", label: \"History\", icon: \"history\" },\n  { id: \"documents\", label: \"Docs\", icon: \"doc\" },\n];\n\nexport function App() {\n  const [state, setState] = useState<AppState | null>(null);\n  const [needLogin, setNeedLogin] = useState(false);\n  const [err, setErr] = useState<string | null>(null);\n  const [tab, setTab] = useState<Tab>(\"dashboard\");\n  const [showSettings, setShowSettings] = useState(false);\n\n  const load = useCallback(async () => {\n    setErr(null);\n    try {\n      setState(await api.bootstrap());\n      setNeedLogin(false);\n    } catch (e) {\n      if (e instanceof AuthError) setNeedLogin(true);\n      else setErr(String(e));\n    }\n  }, []);\n\n  useEffect(() => {\n    load();\n  }, [load]);\n\n  const mutate: Mutate = useCallback(async (p) => {\n    try {\n      setState(await p);\n    } catch (e) {\n      if (e instanceof AuthError) setNeedLogin(true);\n      else alert(\"Something went wrong. Please try again.\\n\\n\" + String(e));\n    }\n  }, []);\n\n  if (needLogin) return <Login />;\n  if (err) return <ErrorScreen msg={err} onRetry={load} />;\n  if (!state) return <Splash />;\n\n  const v = state.vehicle;\n  const overdue = state.due.filter((d) => d.enabled && d.status === \"overdue\").length;\n  const soon = state.due.filter((d) => d.enabled && d.status === \"due_soon\").length;\n  const docAlerts = state.documents.filter((d) => d.status === \"expired\" || d.status === \"expiring_soon\").length;\n\n  return (\n    <div className=\"min-h-screen max-w-lg mx-auto pb-24\">\n      {/* Header */}\n      <header\n        className=\"px-4 pt-5 pb-5 text-white shadow-sm\"\n        style={{ background: \"linear-gradient(135deg, #232323, #0a0a0a)\", borderBottom: `3px solid ${RED}` }}\n      >\n        <div className=\"flex items-start justify-between\">\n          <div className=\"min-w-0\">\n            <div className=\"text-white/80 text-xs font-semibold uppercase tracking-wide\">\n              {v.year ? `${v.year} ` : \"\"}{v.make} {v.model}\n            </div>\n            <div className=\"text-2xl font-extrabold truncate\">{v.name || \"My ADV160\"}</div>\n            <div className=\"text-white/80 text-xs mt-0.5\">\n              {v.color}{v.plate ? ` · ${v.plate}` : \"\"}\n            </div>\n          </div>\n          <button\n            onClick={() => setShowSettings(true)}\n            className=\"shrink-0 bg-white/10 hover:bg-white/20 rounded-full w-10 h-10 flex items-center justify-center text-white\"\n            aria-label=\"Settings\"\n          >\n            <Icon name=\"gear\" size={20} />\n          </button>\n        </div>\n        <div className=\"mt-4 flex items-end gap-4\">\n          <div>\n            <div className=\"text-white/70 text-xs\">Odometer</div>\n            <div className=\"text-3xl font-extrabold leading-none\">{km(v.current_odometer_km)}</div>\n          </div>\n          <div className=\"ml-auto flex flex-col items-end gap-1\">\n            {overdue > 0 && (\n              <span className=\"text-xs font-bold px-2.5 py-1 rounded-full bg-white/15\" style={{ color: \"#ff6b6b\" }}>\n                {overdue} overdue\n              </span>\n            )}\n            {soon > 0 && (\n              <span className=\"text-xs font-semibold px-2.5 py-1 rounded-full bg-amber-400/20 text-amber-300\">\n                {soon} due soon\n              </span>\n            )}\n          </div>\n        </div>\n      </header>\n\n      <main className=\"px-4 pt-4 space-y-4\">\n        {tab === \"dashboard\" && <Dashboard state={state} mutate={mutate} />}\n        {tab === \"fuel\" && <FuelView state={state} mutate={mutate} />}\n        {tab === \"costs\" && <CostsView state={state} mutate={mutate} />}\n        {tab === \"history\" && <HistoryView state={state} mutate={mutate} />}\n        {tab === \"documents\" && <DocumentsView state={state} mutate={mutate} />}\n\n        <div className=\"text-center pt-2\">\n          <a href=\"/source\" className=\"text-xs text-neutral-400 underline\">view source</a>\n        </div>\n      </main>\n\n      {/* Bottom nav */}\n      <nav className=\"fixed bottom-0 inset-x-0 z-40 border-t border-neutral-200 bg-white/95 backdrop-blur\">\n        <div className=\"max-w-lg mx-auto grid grid-cols-5\">\n          {TABS.map((t) => {\n            const active = tab === t.id;\n            return (\n              <button\n                key={t.id}\n                onClick={() => setTab(t.id)}\n                className=\"relative py-2.5 flex flex-col items-center gap-1 text-[11px] font-semibold\"\n                style={{ color: active ? RED : \"#9ca3af\" }}\n              >\n                {active && (\n                  <span\n                    className=\"absolute top-0 h-[3px] w-8 rounded-full\"\n                    style={{ backgroundColor: RED }}\n                  />\n                )}\n                <span className=\"relative\">\n                  <Icon name={t.icon} size={22} strokeWidth={active ? 2 : 1.8} />\n                  {t.id === \"documents\" && docAlerts > 0 && (\n                    <span\n                      className=\"absolute -top-0.5 -right-2 w-2 h-2 rounded-full\"\n                      style={{ backgroundColor: RED }}\n                    />\n                  )}\n                </span>\n                {t.label}\n              </button>\n            );\n          })}\n        </div>\n      </nav>\n\n      {showSettings && (\n        <SettingsView state={state} mutate={mutate} onClose={() => setShowSettings(false)} />\n      )}\n    </div>\n  );\n}\n\nfunction Login() {\n  return (\n    <div className=\"min-h-screen flex items-center justify-center p-6\">\n      <div className=\"bg-white rounded-3xl shadow-sm border border-neutral-200 p-7 max-w-sm w-full text-center\">\n        <div\n          className=\"mx-auto mb-4 w-16 h-16 rounded-2xl flex items-center justify-center text-white\"\n          style={{ backgroundColor: RED }}\n        >\n          <Icon name=\"gauge\" size={32} strokeWidth={2} />\n        </div>\n        <h1 className=\"text-xl font-extrabold\">ADV160 Maintenance</h1>\n        <p className=\"text-sm text-neutral-500 mt-2 mb-6\">\n          Your private maintenance log. Sign in with your Val Town account to continue.\n        </p>\n        <a\n          href=\"/auth/login\"\n          className=\"inline-flex w-full items-center justify-center rounded-xl text-white font-semibold py-3\"\n          style={{ backgroundColor: RED }}\n        >\n          Log in with Val Town\n        </a>\n      </div>\n    </div>\n  );\n}\n\nfunction Splash() {\n  return (\n    <div className=\"min-h-screen flex flex-col items-center justify-center gap-3 text-neutral-400\">\n      <div\n        className=\"w-10 h-10 rounded-full border-[3px] border-neutral-200 animate-spin\"\n        style={{ borderTopColor: RED }}\n        role=\"status\"\n        aria-label=\"Loading\"\n      />\n      <span className=\"text-sm font-medium\">Loading…</span>\n    </div>\n  );\n}\n\nfunction ErrorScreen({ msg, onRetry }: { msg: string; onRetry: () => void }) {\n  return (\n    <div className=\"min-h-screen flex items-center justify-center p-6\">\n      <div className=\"text-center max-w-sm\">\n        <div className=\"text-4xl mb-2\">⚠️</div>\n        <div className=\"font-semibold mb-1\">Couldn't load your data</div>\n        <div className=\"text-xs text-neutral-400 mb-4 break-words\">{msg}</div>\n        <Button onClick={onRetry}>Try again</Button>\n      </div>\n    </div>\n  );\n}\n",[],[139,237,320],"708696d0-6c9f-4e35-8a47-3219afefd46b","cron","4dbacbf6-905c-45ec-b40a-702b9456ef85",["D",1783982824101],[333],[328],{"_38":334,"_13":71,"_41":335,"_43":329,"_45":46,"_47":156,"_49":50,"_51":336,"_17":53,"_54":337,"_56":338,"_58":59,"_60":-5,"_111":339,"_18":340},"8b212fd4-43df-4663-a003-bb92fd201d54","c4ad43e4-7f0c-11f1-9765-1607ee4eb77e",["D",1783982824101],"interval","// Daily reminder job. Recomputes what's due and emails a throttled digest\n// (each service is reminded at most once per 7 days). Verify manually with run_file.\nimport { runReminders } from \"../backend/reminders.ts\";\n\nexport default async function (interval: Interval) {\n  const result = await runReminders(false);\n  console.log(\"reminder run:\", JSON.stringify(result));\n}\n",[],[328,71],["D",1783982589287],[344,345,346,347,348],[19],{"_38":86,"_13":87,"_41":88,"_43":44,"_45":46,"_47":89,"_49":50,"_51":361,"_17":83,"_54":55,"_56":91,"_58":59,"_60":-5,"_111":362,"_18":363},{"_38":78,"_13":79,"_41":80,"_43":44,"_45":46,"_47":81,"_49":50,"_51":358,"_17":83,"_54":55,"_56":84,"_58":59,"_60":-5,"_111":359,"_18":360},{"_38":70,"_13":71,"_41":72,"_43":44,"_45":46,"_47":73,"_49":50,"_51":355,"_17":75,"_54":55,"_56":76,"_58":59,"_60":-5,"_111":356,"_18":357},{"_38":62,"_13":63,"_41":64,"_43":44,"_45":46,"_47":65,"_49":50,"_51":352,"_17":67,"_54":55,"_56":68,"_58":59,"_60":-5,"_111":353,"_18":354},{"_38":39,"_13":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_51":349,"_17":53,"_54":55,"_56":57,"_58":59,"_60":-5,"_111":350,"_18":351},["D",1783983359126],[],[19,40],["D",1783985878920],[],[19,63],["D",1783986111698],[],[19,71],["D",1784601391479],[],[19,79],["D",1783985930346],[],[19,87],"1f303e60-ab6b-42ff-8f49-6eb8e87de881",["D",1783982520711],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Honda ADV160 maintenance tracker (PWA)","imageUrl","userId","49091ede-0c48-4a6b-bdf2-2c256984d2e3","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","019ef139-9657-71ac-a5f0-37f41375e2b5","tursoName","1f303e60ab6b42ff8f496eb8e87de881","tursoHostname","1f303e60ab6b42ff8f496eb8e87de881-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789489305251],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_421":417},"org",{"_11":12,"_414":415,"_416":417,"_374":375,"_418":419,"_420":59},"branch",{"_17":154,"_13":16,"_38":46,"_406":364,"_407":-5,"_408":-5,"_409":-5,"_410":-5,"_411":-5,"_412":14,"_413":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Joshua Ballesta","avatar","https://lh3.googleusercontent.com/a/ACg8ocIq5SbD8bqDShV77ZIQSf_McOeZWlWCW6SFQ5xEjysyl4FV0ftx=s96-c","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_38":364,"_13":14,"_51":560,"_366":-5,"_367":59,"_368":369,"_370":369,"_371":372,"_373":-5,"_374":375,"_376":-5,"_377":59,"_378":-5,"_379":-5,"_380":53,"_381":382,"_383":384,"_385":386,"_387":561,"_389":-5,"_390":391,"_392":391,"_393":394,"_395":394,"_396":394,"_397":391,"_398":391,"_399":562,"_401":563,"_403":564,"_405":59},[461,467,469,490,493],"files",[461,462,463,464,465,466,467,468,469,470,471,472,473,474,475,476,477,478,479,480,481,482,483,484,485,486,487,488,489,490,491,492,493],"counts",{"_452":53,"_453":127,"_454":53,"_32":455,"_456":457},[442,443,444,445,446],{"_38":93,"_13":19,"_41":44,"_43":-5,"_45":46,"_47":94,"_49":50,"_51":95,"_17":53,"_54":96,"_56":-5,"_58":59,"_60":-5,"_18":441},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[19],{"_38":86,"_13":87,"_41":88,"_43":44,"_45":46,"_47":89,"_49":50,"_51":90,"_17":83,"_54":55,"_56":91,"_58":59,"_60":-5,"_18":451},{"_38":78,"_13":79,"_41":80,"_43":44,"_45":46,"_47":81,"_49":50,"_51":82,"_17":83,"_54":55,"_56":84,"_58":59,"_60":-5,"_18":450},{"_38":70,"_13":71,"_41":72,"_43":44,"_45":46,"_47":73,"_49":50,"_51":74,"_17":75,"_54":55,"_56":76,"_58":59,"_60":-5,"_18":449},{"_38":62,"_13":63,"_41":64,"_43":44,"_45":46,"_47":65,"_49":50,"_51":66,"_17":67,"_54":55,"_56":68,"_58":59,"_60":-5,"_18":448},{"_38":39,"_13":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_51":52,"_17":53,"_54":55,"_56":57,"_58":59,"_60":-5,"_18":447},[19,40],[19,63],[19,71],[19,79],[19,87],"pulls","branches","forks",{"_458":127,"_460":53},"connections",{"_458":53,"_459":53},"count","unfilledCount","emptyCount",{"_38":93,"_13":19,"_41":44,"_43":-5,"_45":46,"_47":94,"_49":50,"_51":341,"_17":53,"_54":96,"_56":-5,"_58":59,"_60":-5,"_111":558,"_18":559},{"_38":86,"_13":87,"_41":88,"_43":44,"_45":46,"_47":89,"_49":50,"_51":361,"_17":83,"_54":55,"_56":91,"_58":59,"_60":-5,"_111":556,"_18":557},{"_38":78,"_13":79,"_41":80,"_43":44,"_45":46,"_47":81,"_49":50,"_51":358,"_17":83,"_54":55,"_56":84,"_58":59,"_60":-5,"_111":554,"_18":555},{"_38":70,"_13":71,"_41":72,"_43":44,"_45":46,"_47":73,"_49":50,"_51":355,"_17":75,"_54":55,"_56":76,"_58":59,"_60":-5,"_111":552,"_18":553},{"_38":62,"_13":63,"_41":64,"_43":44,"_45":46,"_47":65,"_49":50,"_51":352,"_17":67,"_54":55,"_56":68,"_58":59,"_60":-5,"_111":550,"_18":551},{"_38":39,"_13":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_51":349,"_17":53,"_54":55,"_56":57,"_58":59,"_60":-5,"_111":548,"_18":549},{"_38":327,"_13":328,"_41":329,"_43":-5,"_45":46,"_47":156,"_49":50,"_51":330,"_17":53,"_54":96,"_56":-5,"_58":59,"_60":-5,"_111":546,"_18":547},{"_38":334,"_13":71,"_41":335,"_43":329,"_45":46,"_47":156,"_49":50,"_51":336,"_17":53,"_54":337,"_56":338,"_58":59,"_60":-5,"_111":544,"_18":545},{"_38":138,"_13":139,"_41":140,"_43":-5,"_45":46,"_47":75,"_49":50,"_51":141,"_17":53,"_54":96,"_56":-5,"_58":59,"_60":-5,"_111":542,"_18":543},{"_38":236,"_13":237,"_41":238,"_43":140,"_45":46,"_47":239,"_49":50,"_51":240,"_17":53,"_54":96,"_56":-5,"_58":59,"_60":-5,"_111":540,"_18":541},{"_38":319,"_13":320,"_41":321,"_43":238,"_45":46,"_47":322,"_49":50,"_51":323,"_17":239,"_54":55,"_56":324,"_58":59,"_60":-5,"_111":538,"_18":539},{"_38":311,"_13":312,"_41":313,"_43":238,"_45":46,"_47":314,"_49":50,"_51":315,"_17":127,"_54":55,"_56":316,"_58":59,"_60":-5,"_111":536,"_18":537},{"_38":303,"_13":304,"_41":305,"_43":238,"_45":46,"_47":306,"_49":50,"_51":307,"_17":181,"_54":55,"_56":308,"_58":59,"_60":-5,"_111":534,"_18":535},{"_38":295,"_13":296,"_41":297,"_43":238,"_45":46,"_47":298,"_49":50,"_51":299,"_17":266,"_54":55,"_56":300,"_58":59,"_60":-5,"_111":532,"_18":533},{"_38":287,"_13":288,"_41":289,"_43":238,"_45":46,"_47":290,"_49":50,"_51":291,"_17":75,"_54":55,"_56":292,"_58":59,"_60":-5,"_111":530,"_18":531},{"_38":278,"_13":279,"_41":280,"_43":238,"_45":46,"_47":281,"_49":50,"_51":282,"_17":283,"_54":55,"_56":284,"_58":59,"_60":-5,"_111":528,"_18":529},{"_38":270,"_13":271,"_41":272,"_43":238,"_45":46,"_47":273,"_49":50,"_51":274,"_17":94,"_54":55,"_56":275,"_58":59,"_60":-5,"_111":526,"_18":527},{"_38":261,"_13":262,"_41":263,"_43":238,"_45":46,"_47":264,"_49":50,"_51":265,"_17":266,"_54":55,"_56":267,"_58":59,"_60":-5,"_111":524,"_18":525},{"_38":252,"_13":253,"_41":254,"_43":238,"_45":46,"_47":255,"_49":50,"_51":256,"_17":257,"_54":55,"_56":258,"_58":59,"_60":-5,"_111":522,"_18":523},{"_38":193,"_13":194,"_41":195,"_43":140,"_45":46,"_47":196,"_49":50,"_51":197,"_17":53,"_54":96,"_56":-5,"_58":59,"_60":-5,"_111":520,"_18":521},{"_38":228,"_13":229,"_41":230,"_43":195,"_45":46,"_47":231,"_49":50,"_51":232,"_17":94,"_54":55,"_56":233,"_58":59,"_60":-5,"_111":518,"_18":519},{"_38":220,"_13":221,"_41":222,"_43":195,"_45":46,"_47":223,"_49":50,"_51":224,"_17":53,"_54":55,"_56":225,"_58":59,"_60":-5,"_111":516,"_18":517},{"_38":212,"_13":213,"_41":214,"_43":195,"_45":46,"_47":215,"_49":50,"_51":216,"_17":53,"_54":55,"_56":217,"_58":59,"_60":-5,"_111":514,"_18":515},{"_38":204,"_13":205,"_41":206,"_43":195,"_45":46,"_47":207,"_49":50,"_51":208,"_17":53,"_54":55,"_56":209,"_58":59,"_60":-5,"_111":512,"_18":513},{"_38":185,"_13":186,"_41":187,"_43":140,"_45":46,"_47":188,"_49":50,"_51":189,"_17":53,"_54":55,"_56":190,"_58":59,"_60":-5,"_111":510,"_18":511},{"_38":176,"_13":177,"_41":178,"_43":140,"_45":46,"_47":179,"_49":50,"_51":180,"_17":181,"_54":24,"_56":182,"_58":59,"_60":-5,"_111":508,"_18":509},{"_38":168,"_13":169,"_41":170,"_43":140,"_45":46,"_47":171,"_49":50,"_51":172,"_17":94,"_54":24,"_56":173,"_58":59,"_60":-5,"_111":506,"_18":507},{"_38":160,"_13":161,"_41":162,"_43":140,"_45":46,"_47":163,"_49":50,"_51":164,"_17":67,"_54":24,"_56":165,"_58":59,"_60":-5,"_111":504,"_18":505},{"_38":151,"_13":152,"_41":153,"_43":140,"_45":46,"_47":154,"_49":50,"_51":155,"_17":156,"_54":55,"_56":157,"_58":59,"_60":-5,"_111":502,"_18":503},{"_38":114,"_13":115,"_41":116,"_43":-5,"_45":46,"_47":67,"_49":50,"_51":117,"_17":53,"_54":96,"_56":-5,"_58":59,"_60":-5,"_111":500,"_18":501},{"_38":131,"_13":63,"_41":132,"_43":116,"_45":46,"_47":133,"_49":50,"_51":134,"_17":67,"_54":55,"_56":135,"_58":59,"_60":-5,"_111":498,"_18":499},{"_38":122,"_13":123,"_41":124,"_43":116,"_45":46,"_47":125,"_49":50,"_51":126,"_17":127,"_54":55,"_56":128,"_58":59,"_60":-5,"_111":496,"_18":497},{"_38":103,"_13":104,"_41":105,"_43":-5,"_45":46,"_47":106,"_49":50,"_51":107,"_17":108,"_54":109,"_56":110,"_58":59,"_60":-5,"_111":494,"_18":495},[],[104],[],[115,123],[],[115,63],[491,492],[115],[],[139,152],[],[139,161],[],[139,169],[],[139,177],[],[139,186],[],[139,194,205],[],[139,194,213],[],[139,194,221],[],[139,194,229],[481,482,483,484],[139,194],[],[139,237,253],[],[139,237,262],[],[139,237,271],[],[139,237,279],[],[139,237,288],[],[139,237,296],[],[139,237,304],[],[139,237,312],[],[139,237,320],[471,472,473,474,475,476,477,478,479],[139,237],[470,480,485,486,487,488,489],[139],[],[328,71],[468],[328],[],[19,40],[],[19,63],[],[19,71],[],[19,79],[],[19,87],[462,463,464,465,466],[19],["D",1783982520711],["D",1789489305251],{"_11":12,"_421":417},{"_11":12,"_414":415,"_416":417,"_374":375,"_418":419,"_420":59},{"_17":154,"_13":16,"_38":46,"_406":364,"_407":-5,"_408":-5,"_409":-5,"_410":-5,"_411":-5,"_412":14,"_413":12},"ctx",{"_399":-5,"_438":598,"_599":600,"_601":602,"_603":59,"_604":59,"_605":59,"_606":50,"_607":-5,"_608":-7,"_609":-7,"_610":53,"_611":59,"_612":59,"_613":-5,"_614":59,"_615":59,"_616":59,"_617":-5},"ENV",{"_569":570,"_571":572,"_573":16,"_574":575,"_576":577,"_578":579,"_580":581,"_582":583,"_584":585,"_586":587,"_588":589,"_590":591,"_592":593,"_594":595,"_596":597},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]
</article></body></html>