\n \n \n \n\n",[],[171,225],"f65e0409-99da-4f9c-aa80-5803f506304e","helpers.ts","9ffcae7c-78e0-11f1-896f-1607ee4eb77e",4,["D",1783304157723],"// Shared formatting + API helpers for the Garage frontend\n\nexport const EVENT_TYPES: Record = {\n service: { label: \"Service\", icon: \"🔧\", badge: \"text-sky-400 bg-sky-400/10 border-sky-400/20\", dot: \"bg-sky-400\" },\n mod: { label: \"Mod\", icon: \"⚡\", badge: \"text-purple-400 bg-purple-400/10 border-purple-400/20\", dot: \"bg-purple-400\" },\n repair: { label: \"Repair\", icon: \"🛠️\", badge: \"text-orange-400 bg-orange-400/10 border-orange-400/20\", dot: \"bg-orange-400\" },\n inspection: { label: \"Inspection\", icon: \"📋\", badge: \"text-emerald-400 bg-emerald-400/10 border-emerald-400/20\", dot: \"bg-emerald-400\" },\n purchase: { label: \"Purchased\", icon: \"🔑\", badge: \"text-amber-400 bg-amber-400/10 border-amber-400/20\", dot: \"bg-amber-400\" },\n sale: { label: \"Sold\", icon: \"🤝\", badge: \"text-rose-400 bg-rose-400/10 border-rose-400/20\", dot: \"bg-rose-400\" },\n other: { label: \"Other\", icon: \"📌\", badge: \"text-neutral-300 bg-neutral-400/10 border-neutral-500/30\", dot: \"bg-neutral-400\" },\n};\n\nexport function eventType(t: string) {\n return EVENT_TYPES[t] || EVENT_TYPES.other;\n}\n\nexport function carTitle(car: any) {\n return car.nickname || [car.year, car.make, car.model].filter(Boolean).join(\" \");\n}\n\nexport function carSubtitle(car: any) {\n const full = [car.year, car.make, car.model, car.trim].filter(Boolean).join(\" \");\n return car.nickname ? full : (car.trim || \"\");\n}\n\nexport function fmtDate(d?: string | null) {\n if (!d) return null;\n const [y, m, day] = String(d).split(\"-\").map(Number);\n if (!y || !m || !day) return String(d);\n return new Date(y, m - 1, day).toLocaleDateString(undefined, {\n year: \"numeric\",\n month: \"short\",\n day: \"numeric\",\n });\n}\n\nexport function fmtNum(n?: number | null) {\n return n == null ? null : Number(n).toLocaleString();\n}\n\nexport function fmtMoney(n?: number | null) {\n if (n == null) return null;\n const v = Number(n);\n return \"$\" + (Number.isInteger(v)\n ? v.toLocaleString()\n : v.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }));\n}\n\nexport function fmtBytes(n?: number | null) {\n if (n == null) return \"\";\n if (n < 1024) return n + \" B\";\n if (n < 1048576) return (n / 1024).toFixed(0) + \" KB\";\n return (n / 1048576).toFixed(1) + \" MB\";\n}\n\nexport function ownedFor(from?: string | null, to?: string | null) {\n if (!from) return null;\n const start = new Date(from);\n const end = to ? new Date(to) : new Date();\n let months = (end.getFullYear() - start.getFullYear()) * 12 + (end.getMonth() - start.getMonth());\n if (isNaN(months) || months < 0) return null;\n const y = Math.floor(months / 12);\n const m = months % 12;\n if (y && m) return `${y} yr ${m} mo`;\n if (y) return `${y} yr`;\n return m ? `${m} mo` : \"< 1 mo\";\n}\n\nexport async function api(path: string, opts: any = {}) {\n const headers: Record = { ...(opts.headers || {}) };\n if (opts.body && typeof opts.body === \"string\") headers[\"Content-Type\"] = \"application/json\";\n const res = await fetch(path, { ...opts, headers });\n if (!res.ok) {\n let msg = `Request failed (${res.status})`;\n try {\n const j = await res.json();\n if (j.error) msg = j.error;\n } catch { /* not json */ }\n throw new Error(msg);\n }\n return res.json();\n}\n\n// Downscale + JPEG-compress photos client-side before upload to save blob storage\nexport async function compressImage(file: File, maxDim = 1600, quality = 0.82): Promise {\n if (!file.type.startsWith(\"image/\")) return file;\n try {\n const bmp = await createImageBitmap(file);\n const scale = Math.min(1, maxDim / Math.max(bmp.width, bmp.height));\n const w = Math.round(bmp.width * scale);\n const h = Math.round(bmp.height * scale);\n const canvas = document.createElement(\"canvas\");\n canvas.width = w;\n canvas.height = h;\n canvas.getContext(\"2d\")!.drawImage(bmp, 0, 0, w, h);\n const out: Blob | null = await new Promise((r) => canvas.toBlob(r, \"image/jpeg\", quality));\n return out && out.size < file.size ? out : file;\n } catch {\n return file;\n }\n}\n",[],[171,233],"42f87b76-162c-4e7f-8007-67f70a2cb01a",["D",1783304331722],[],[171,33],"4f9db2ce-df53-4864-a659-7ea3875fba85","Timeline.tsx","ec757f86-78e0-11f1-af42-1607ee4eb77e","019f3530-a79e-72d4-b6fa-f3b35a448671",9,["D",1783304285998],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { api, EVENT_TYPES, eventType, fmtDate, fmtMoney, fmtNum } from \"../helpers.ts\";\n\nconst inputCls =\n \"w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:border-amber-500/70\";\n\nexport function Timeline({ car, events, onChange }: any) {\n const [adding, setAdding] = useState(false);\n const [editing, setEditing] = useState(null);\n\n const items = buildTimeline(car, events);\n\n async function remove(ev: any) {\n if (!confirm(`Delete \"${ev.title}\"?`)) return;\n await api(`/api/events/${ev.id}`, { method: \"DELETE\" });\n onChange();\n }\n\n return (\n

\n {!adding && (\n {\n setAdding(true);\n setEditing(null);\n }}\n className=\"mb-4 bg-amber-500 hover:bg-amber-400 text-neutral-950 font-semibold px-4 py-2 rounded-xl text-sm\"\n >\n + Log event\n \n )}\n {(adding || editing) && (\n {\n setAdding(false);\n setEditing(null);\n }}\n onSaved={() => {\n setAdding(false);\n setEditing(null);\n onChange();\n }}\n />\n )}\n\n {items.length === 0 && (\n

\n No history yet. Log services, mods, repairs — anything that happens to this car.\n

\n )}\n\n

\n {items.map((ev: any, i: number) => {\n const t = eventType(ev.type);\n const meta = [fmtDate(ev.date), ev.mileage != null ? `${fmtNum(ev.mileage)} mi` : null, fmtMoney(ev.cost)]\n .filter(Boolean);\n return (\n \n \n

\n \n {t.icon} {t.label}\n \n

{ev.title}

\n {meta.length > 0 &&

{meta.join(\" · \")}

}\n {ev.description && (\n

{ev.description}

\n )}\n

\n {!ev.synthetic && (\n

\n {\n setEditing(ev);\n setAdding(false);\n }}\n title=\"Edit\"\n className=\"text-neutral-500 hover:text-neutral-200 px-1.5\"\n >\n ✎\n \n \n

\n )}\n

\n );\n })}\n

\n \n );\n}\n\n// Merge real events with synthetic purchase/sale entries derived from the car itself\nfunction buildTimeline(car: any, events: any[]) {\n const items: any[] = events.map((e) => ({ ...e }));\n if (car.purchase_date || car.purchase_price != null || car.purchase_mileage != null) {\n items.push({\n id: \"purchase\",\n synthetic: true,\n type: \"purchase\",\n title: \"Purchased\",\n date: car.purchase_date,\n mileage: car.purchase_mileage,\n cost: car.purchase_price,\n });\n }\n if (car.status === \"previous\" && (car.sold_date || car.sold_price != null)) {\n items.push({\n id: \"sale\",\n synthetic: true,\n type: \"sale\",\n title: \"Sold\",\n date: car.sold_date,\n cost: car.sold_price,\n });\n }\n return items.sort((a, b) =>\n String(b.date || \"9999-12-31\").localeCompare(String(a.date || \"9999-12-31\")) ||\n (Number(b.id) || Infinity) - (Number(a.id) || Infinity)\n );\n}\n\nfunction EventForm({ carId, initial, onClose, onSaved }: any) {\n const [form, setForm] = useState({\n type: initial?.type || \"service\",\n title: initial?.title || \"\",\n date: initial?.date || \"\",\n mileage: initial?.mileage ?? \"\",\n cost: initial?.cost ?? \"\",\n description: initial?.description || \"\",\n });\n const [saving, setSaving] = useState(false);\n const [error, setError] = useState(\"\");\n const set = (k: string) => (e: any) => setForm((f: any) => ({ ...f, [k]: e.target.value }));\n\n async function submit(e: any) {\n e.preventDefault();\n if (!form.title.trim()) {\n setError(\"Give the event a title\");\n return;\n }\n setSaving(true);\n setError(\"\");\n const payload = {\n type: form.type,\n title: form.title.trim(),\n date: form.date || null,\n mileage: form.mileage === \"\" ? null : Number(form.mileage),\n cost: form.cost === \"\" ? null : Number(form.cost),\n description: form.description.trim() || null,\n };\n try {\n if (initial) {\n await api(`/api/events/${initial.id}`, { method: \"PUT\", body: JSON.stringify(payload) });\n } else {\n await api(`/api/cars/${carId}/events`, { method: \"POST\", body: JSON.stringify(payload) });\n }\n onSaved();\n } catch (err: any) {\n setError(err.message);\n setSaving(false);\n }\n }\n\n return (\n \n );\n}\n",[],[171,253,245],"components","b9d65a74-1133-40d1-acfb-4296adf677bd","MediaSections.tsx","fe9e6d12-78e0-11f1-9c8f-1607ee4eb77e",10,["D",1783304316490],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { api, compressImage, fmtBytes, fmtDate } from \"../helpers.ts\";\n\nfunction useUploader(carId: number, kind: \"photo\" | \"document\", onChange: () => void) {\n const inputRef = useRef(null);\n const [busy, setBusy] = useState<{ done: number; total: number } | null>(null);\n\n async function onPick(e: any) {\n const files: File[] = Array.from(e.target.files || []);\n e.target.value = \"\";\n if (!files.length) return;\n setBusy({ done: 0, total: files.length });\n let err = \"\";\n for (let i = 0; i < files.length; i++) {\n try {\n const f = files[i];\n let payload: Blob = f;\n let name = f.name;\n if (kind === \"photo\") {\n payload = await compressImage(f);\n if (payload !== f) name = f.name.replace(/\\.[^.]+$/, \"\") + \".jpg\";\n }\n const fd = new FormData();\n fd.append(\"file\", payload, name);\n fd.append(\"kind\", kind);\n await api(`/api/cars/${carId}/files`, { method: \"POST\", body: fd });\n } catch (e2: any) {\n err = e2.message;\n }\n setBusy({ done: i + 1, total: files.length });\n }\n setBusy(null);\n if (err) alert(\"Some uploads failed: \" + err);\n onChange();\n }\n\n return { inputRef, busy, onPick, open: () => inputRef.current?.click() };\n}\n\nexport function PhotosSection({ carId, photos, coverId, onChange }: any) {\n const up = useUploader(carId, \"photo\", onChange);\n const [lightbox, setLightbox] = useState(null);\n\n async function setCover(f: any) {\n await api(`/api/cars/${carId}`, { method: \"PUT\", body: JSON.stringify({ cover_file_id: f.id }) });\n onChange();\n }\n async function remove(f: any) {\n if (!confirm(`Delete ${f.filename}?`)) return;\n await api(`/api/files/${f.id}`, { method: \"DELETE\" });\n onChange();\n }\n\n return (\n

\n \n \n {up.busy ? `Uploading ${up.busy.done}/${up.busy.total}…` : \"+ Upload photos\"}\n \n\n {photos.length === 0 && !up.busy && (\n

No photos yet. Uploads are resized automatically to save space.

\n )}\n\n

\n {photos.map((f: any) => (\n

\n setLightbox(f)}\n />\n {coverId === f.id && (\n \n ★ Cover\n \n )}\n

\n {coverId !== f.id && (\n setCover(f)}\n className=\"text-[11px] px-2 py-1 rounded-lg bg-black/70 border border-neutral-600 hover:border-amber-500/60\"\n >\n ★ Set cover\n \n )}\n remove(f)}\n className=\"text-[11px] px-2 py-1 rounded-lg bg-black/70 border border-neutral-600 text-rose-400 hover:border-rose-500/60\"\n >\n ✕\n \n

\n ))}\n

\n\n {lightbox && (\n setLightbox(null)}\n >\n e.stopPropagation()}\n />\n

{lightbox.filename} · {fmtDate(String(lightbox.created_at).slice(0, 10))}

\n \n

\n )}\n \n );\n}\n\nexport function DocsSection({ carId, docs, onChange }: any) {\n const up = useUploader(carId, \"document\", onChange);\n\n async function remove(f: any) {\n if (!confirm(`Delete ${f.filename}?`)) return;\n await api(`/api/files/${f.id}`, { method: \"DELETE\" });\n onChange();\n }\n\n function icon(f: any) {\n const m = String(f.mime_type || \"\");\n if (m.includes(\"pdf\")) return \"📕\";\n if (m.startsWith(\"image/\")) return \"🖼️\";\n if (m.includes(\"sheet\") || m.includes(\"csv\") || m.includes(\"excel\")) return \"📊\";\n return \"📄\";\n }\n\n return (\n

\n \n \n {up.busy ? `Uploading ${up.busy.done}/${up.busy.total}…` : \"+ Upload documents\"}\n \n\n {docs.length === 0 && !up.busy && (\n

\n No documents yet. Keep titles, receipts, window stickers, insurance docs — anything tied to this car.\n

\n )}\n\n

\n {docs.map((f: any) => (\n

\n {icon(f)}\n

{f.filename}

\n {fmtBytes(f.size)} · {fmtDate(String(f.created_at).slice(0, 10))}\n

\n \n Open\n \n \n ↓\n \n remove(f)}\n className=\"px-2.5 py-1.5 rounded-lg border border-neutral-700 text-rose-400 hover:bg-rose-950/50\"\n >\n ✕\n \n

\n ))}\n

\n );\n}\n",[],[171,253,255],"24e33441-cd0d-4674-ae3e-957081249c40","GarageView.tsx","b4aa603a-78e0-11f1-8076-1607ee4eb77e",6,["D",1783304192415],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { api, carSubtitle, carTitle, fmtDate, fmtNum } from \"../helpers.ts\";\nimport { CarForm } from \"./CarForm.tsx\";\n\nexport function GarageView() {\n const [cars, setCars] = useState(null);\n const [error, setError] = useState(\"\");\n const [showForm, setShowForm] = useState(false);\n\n async function load() {\n try {\n const data = await api(\"/api/cars\");\n setCars(data.cars);\n } catch (e: any) {\n setError(e.message);\n }\n }\n useEffect(() => {\n load();\n }, []);\n\n if (error) return

Couldn't load the garage: {error}

;\n if (!cars) return

Opening the garage…

;\n\n const current = cars.filter((c) => c.status === \"current\");\n const previous = cars.filter((c) => c.status !== \"current\");\n\n return (\n

My Garage

\n {current.length} in the garage · {previous.length} previously owned\n

\n setShowForm(true)}\n className=\"bg-amber-500 hover:bg-amber-400 text-neutral-950 font-semibold px-4 py-2 rounded-xl text-sm transition-colors\"\n >\n + Add car\n \n

\n\n {cars.length === 0 && (\n

🚗

The garage is empty

Add your first car to start tracking its history.

\n setShowForm(true)}\n className=\"bg-amber-500 hover:bg-amber-400 text-neutral-950 font-semibold px-4 py-2 rounded-xl text-sm\"\n >\n + Add your first car\n \n

\n )}\n\n {current.length > 0 && (\n

\n {current.map((car) => )}\n

\n )}\n {previous.length > 0 && (\n

\n {previous.map((car) => )}\n

\n )}\n\n {showForm && (\n setShowForm(false)}\n onSaved={(car: any) => {\n setShowForm(false);\n window.location.hash = `#/car/${car.id}`;\n }}\n />\n )}\n

\n );\n}\n\nfunction Section({ title, count, children }: any) {\n return (\n

\n {title} · {count}\n

{children}

\n );\n}\n\nfunction CarCard({ car }: any) {\n return (\n \n

\n {car.cover_file_id\n ? (\n \n )\n : (\n

\n 🚗\n

\n )}\n {car.status !== \"current\" && (\n \n Sold{car.sold_date ? ` · ${fmtDate(car.sold_date)}` : \"\"}\n \n )}\n

{carTitle(car)}

\n {carSubtitle(car) &&

{carSubtitle(car)}

}\n

\n {car.current_mileage != null && 🛞 {fmtNum(car.current_mileage)} mi}\n {car.avg_mpg != null && ⛽ {car.avg_mpg} mpg}\n 📖 {car.event_count} {car.event_count === 1 ? \"event\" : \"events\"}\n {car.photo_count > 0 && 📷 {car.photo_count}}\n

\n \n );\n}\n",[],[171,253,263],"b105d6de-6dec-406f-bcdd-6a0d801c1be4","Counter.tsx","019f3530-a79e-72d4-b6fa-ef3a67345c73",["D",1783303808467],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Counter() {\n const [count, setCount] = useState(0);\n return (\n

\n Clicked\n setCount((c) => c + 1)}\n class=\"bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n >\n {count}\n \n times\n

\n );\n}\n",[],[171,253,271],"3185c535-0968-46f6-a5e1-8e928cb44014","CarForm.tsx","c5fae364-78e0-11f1-aba5-1607ee4eb77e",7,["D",1783304221455],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { api } from \"../helpers.ts\";\n\nconst EMPTY: Record = {\n nickname: \"\",\n year: \"\",\n make: \"\",\n model: \"\",\n trim: \"\",\n color: \"\",\n vin: \"\",\n status: \"current\",\n purchase_date: \"\",\n purchase_price: \"\",\n purchase_mileage: \"\",\n current_mileage: \"\",\n avg_mpg: \"\",\n sold_date: \"\",\n sold_price: \"\",\n notes: \"\",\n};\n\nconst inputCls =\n \"w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:border-amber-500/70\";\n\nexport function CarForm({ initial, onClose, onSaved }: any) {\n const [form, setForm] = useState(() => {\n const f = { ...EMPTY };\n if (initial) for (const k of Object.keys(EMPTY)) f[k] = initial[k] ?? \"\";\n return f;\n });\n const [saving, setSaving] = useState(false);\n const [error, setError] = useState(\"\");\n\n const set = (k: string) => (e: any) => setForm((f: any) => ({ ...f, [k]: e.target.value }));\n const num = (v: any) => (v === \"\" || v == null ? null : Number(v));\n const str = (v: any) => (v === \"\" || v == null ? null : String(v).trim() || null);\n\n async function submit(e: any) {\n e.preventDefault();\n if (!form.make.trim() || !form.model.trim()) {\n setError(\"Make and model are required\");\n return;\n }\n setSaving(true);\n setError(\"\");\n const payload = {\n nickname: str(form.nickname),\n year: num(form.year),\n make: form.make.trim(),\n model: form.model.trim(),\n trim: str(form.trim),\n color: str(form.color),\n vin: str(form.vin),\n status: form.status,\n purchase_date: str(form.purchase_date),\n purchase_price: num(form.purchase_price),\n purchase_mileage: num(form.purchase_mileage),\n current_mileage: num(form.current_mileage),\n avg_mpg: num(form.avg_mpg),\n sold_date: form.status === \"previous\" ? str(form.sold_date) : null,\n sold_price: form.status === \"previous\" ? num(form.sold_price) : null,\n notes: str(form.notes),\n };\n try {\n const data = initial\n ? await api(`/api/cars/${initial.id}`, { method: \"PUT\", body: JSON.stringify(payload) })\n : await api(\"/api/cars\", { method: \"POST\", body: JSON.stringify(payload) });\n onSaved(data.car);\n } catch (err: any) {\n setError(err.message);\n setSaving(false);\n }\n }\n\n return (\n \n e.stopPropagation()}\n onSubmit={submit}\n className=\"w-full max-w-xl bg-neutral-900 border border-neutral-800 rounded-2xl p-5 my-8\"\n >\n

{initial ? \"Edit car\" : \"Add a car\"}

\n \n

\n\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {form.status === \"previous\" && (\n \n \n \n )}\n {form.status === \"previous\" && (\n \n \n \n )}\n \n \n \n

\n\n {error &&

{error}

}\n\n

\n \n Cancel\n \n \n {saving ? \"Saving…\" : initial ? \"Save changes\" : \"Add car\"}\n \n

\n \n \n );\n}\n\nfunction Field({ label, children, span }: any) {\n return (\n \n {label}\n {children}\n \n );\n}\n",[],[171,253,278],"45190010-a98c-4aa0-96f7-51398cb48a05","CarDetail.tsx","d7dd0b70-78e0-11f1-af42-1607ee4eb77e",8,["D",1783304251459],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { api, carSubtitle, carTitle, fmtDate, fmtMoney, fmtNum, ownedFor } from \"../helpers.ts\";\nimport { CarForm } from \"./CarForm.tsx\";\nimport { Timeline } from \"./Timeline.tsx\";\nimport { DocsSection, PhotosSection } from \"./MediaSections.tsx\";\n\nexport function CarDetail({ carId }: { carId: number }) {\n const [data, setData] = useState(null);\n const [error, setError] = useState(\"\");\n const [tab, setTab] = useState(\"timeline\");\n const [editing, setEditing] = useState(false);\n\n async function load() {\n try {\n const d = await api(`/api/cars/${carId}`);\n setData(d);\n } catch (e: any) {\n setError(e.message);\n }\n }\n useEffect(() => {\n load();\n }, [carId]);\n\n if (error) return

Couldn't load this car: {error}

;\n if (!data) return

Pulling it out of the garage…

;\n\n const { car, events, files } = data;\n const photos = files.filter((f: any) => f.kind === \"photo\");\n const docs = files.filter((f: any) => f.kind === \"document\");\n const cover = car.cover_file_id ? photos.find((p: any) => p.id === car.cover_file_id) : null;\n const milesDriven = car.current_mileage != null && car.purchase_mileage != null\n ? car.current_mileage - car.purchase_mileage\n : null;\n const owned = ownedFor(car.purchase_date, car.status === \"previous\" ? car.sold_date : null);\n\n async function deleteCar() {\n if (!confirm(`Delete ${carTitle(car)} and all its events, photos, and documents? This can't be undone.`)) return;\n await api(`/api/cars/${car.id}`, { method: \"DELETE\" });\n window.location.hash = \"#/\";\n }\n\n const tabs = [\n { id: \"timeline\", label: `History · ${events.length}` },\n { id: \"photos\", label: `Photos · ${photos.length}` },\n { id: \"docs\", label: `Documents · ${docs.length}` },\n ];\n\n return (\n

\n \n ← Back to garage\n \n\n {/* Hero */}\n

\n {cover\n ?

\n : (\n

\n 🚗\n

\n )}\n

{carTitle(car)}

\n {car.status !== \"current\" && (\n \n Previously owned\n \n )}\n

\n {carSubtitle(car) &&

{carSubtitle(car)}

}\n

\n {car.color && {car.color}}\n {car.vin && VIN {car.vin}}\n

\n setEditing(true)}\n className=\"px-3 py-1.5 rounded-lg text-sm bg-neutral-800/90 border border-neutral-700 hover:bg-neutral-700\"\n >\n ✎ Edit\n \n \n Delete\n \n

\n\n {/* Stats */}\n

\n {car.current_mileage != null && (\n = 0 ? `+${fmtNum(milesDriven)} while owned` : undefined}\n />\n )}\n {car.avg_mpg != null && }\n {(car.purchase_date || car.purchase_price != null) && (\n \n )}\n {car.status === \"previous\" && (car.sold_date || car.sold_price != null) && (\n \n )}\n {owned && }\n

\n\n {car.notes && (\n

\n {car.notes}\n

\n )}\n\n {/* Tabs */}\n

\n {tabs.map((t) => (\n setTab(t.id)}\n className={`px-3 py-1.5 rounded-lg text-sm border transition-colors ${\n tab === t.id\n ? \"bg-amber-500/10 text-amber-400 border-amber-500/40\"\n : \"border-neutral-800 text-neutral-400 hover:text-neutral-200 hover:border-neutral-600\"\n }`}\n >\n {t.label}\n \n ))}\n

\n\n {tab === \"timeline\" && }\n {tab === \"photos\" && }\n {tab === \"docs\" && }\n\n {editing && (\n setEditing(false)}\n onSaved={() => {\n setEditing(false);\n load();\n }}\n />\n )}\n

\n );\n}\n\nfunction Stat({ label, value, sub }: any) {\n return (\n

{label}

{value}

\n {sub &&

{sub}

}\n

\n );\n}\n",[],[171,253,286],"d41feaf9-07b4-44a4-8a46-73e08b247bc1","App.tsx","019f3530-a79e-72d4-b6fa-eb9c37956012",5,["D",1783304169266],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { GarageView } from \"./GarageView.tsx\";\nimport { CarDetail } from \"./CarDetail.tsx\";\n\nfunction useHashRoute() {\n const [hash, setHash] = useState(window.location.hash);\n useEffect(() => {\n const fn = () => setHash(window.location.hash);\n window.addEventListener(\"hashchange\", fn);\n return () => window.removeEventListener(\"hashchange\", fn);\n }, []);\n return hash;\n}\n\nexport function App() {\n const route = useHashRoute();\n const carMatch = route.match(/^#\\/car\\/(\\d+)/);\n\n return (\n

\n \n 🏁\n Garage\n \n \n view source\n \n

\n {carMatch ? : }\n

\n );\n}\n",[],[171,253,294],"8530d7fc-e53c-48e0-9d35-5e1c489f4208",["D",1783303808467],[196,197,198,199,200,201,202],[171,253],["D",1783303808467],[195,203,204,205,206],[171],"a5544958-540d-4e23-b5f7-0189d88d4b58","db.ts","7b886d06-78e0-11f1-afce-1607ee4eb77e",["D",1783304096563],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nexport { sqlite };\n\nexport async function initDb() {\n await sqlite.batch([\n {\n sql: `CREATE TABLE IF NOT EXISTS cars (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n nickname TEXT,\n year INTEGER,\n make TEXT NOT NULL,\n model TEXT NOT NULL,\n trim TEXT,\n color TEXT,\n vin TEXT,\n status TEXT NOT NULL DEFAULT 'current',\n purchase_date TEXT,\n purchase_price REAL,\n purchase_mileage INTEGER,\n current_mileage INTEGER,\n avg_mpg REAL,\n sold_date TEXT,\n sold_price REAL,\n notes TEXT,\n cover_file_id INTEGER,\n created_at TEXT NOT NULL DEFAULT (datetime('now'))\n )`,\n },\n {\n sql: `CREATE TABLE IF NOT EXISTS events (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n car_id INTEGER NOT NULL,\n type TEXT NOT NULL DEFAULT 'service',\n title TEXT NOT NULL,\n description TEXT,\n date TEXT,\n mileage INTEGER,\n cost REAL,\n created_at TEXT NOT NULL DEFAULT (datetime('now'))\n )`,\n },\n {\n sql: `CREATE TABLE IF NOT EXISTS files (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n car_id INTEGER NOT NULL,\n kind TEXT NOT NULL,\n filename TEXT NOT NULL,\n mime_type TEXT,\n size INTEGER,\n blob_key TEXT NOT NULL,\n caption TEXT,\n created_at TEXT NOT NULL DEFAULT (datetime('now'))\n )`,\n },\n ]);\n}\n",[],[177,309],["D",1783304096563],[193],[177],["D",1783303808467],["D",1789524079207],{"_105":104,"_113":109},{"_105":104,"_106":107,"_108":109,"_18":56,"_110":111,"_112":25},{"_13":90,"_32":91,"_43":42,"_92":44,"_93":94,"_95":96,"_97":50,"_98":99,"_100":101,"_102":45,"_103":104},"ctx",{"_83":-5,"_135":356,"_357":358,"_359":360,"_361":25,"_362":25,"_363":25,"_364":60,"_365":-5,"_366":-7,"_367":-7,"_368":64,"_369":25,"_370":25,"_371":-5,"_372":25,"_373":25,"_374":25,"_375":-5},"ENV",{"_327":328,"_329":330,"_331":91,"_332":333,"_334":335,"_336":337,"_338":339,"_340":341,"_342":343,"_344":345,"_346":347,"_348":349,"_350":351,"_352":353,"_354":355},"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"]

Diff · v12