{(label || right || showPct) && (

{label && {label}} {right ? {right} : (showPct && {Math.round(clamped)}%)}

)}

); } // ─── Divider rule ──────────────────────────────────────── function Rule({ dashed = false, style = {} }) { return

; } // ─── Fine frame corner marks (editorial) ───────────────── function CornerMarks({ pad = 10, c, len = 12, w = 1 }) { const col = c || 'var(--ink-3)'; const s = { position: 'absolute', width: len, height: len }; return (<>

); } // ─── Tab bar (bottom nav) ──────────────────────────────── function TabBar({ current, go }) { const tabs = [ { k: 'home', label: 'Home', icon: I.home }, { k: 'explore', label: 'Explore', icon: I.compass }, { k: 'journal', label: 'Journal', icon: I.book }, { k: 'badges', label: 'Badges', icon: I.badge }, { k: 'profile', label: 'You', icon: I.user }, ]; return (

{tabs.map(t => { const active = current === t.k; return ( ); })}

); } // ─── Section title with mono eyebrow ───────────────────── function SectionHead({ eyebrow, title, meta }) { return (

{eyebrow && {eyebrow}}

{title}

{meta && {meta}}

); } // ─── Chip ──────────────────────────────────────────────── function Chip({ children, active = false, onClick, icon }) { return ( ); } // ─── Metric block (num + caps label) ──────────────────── function Metric({ n, l, align = 'left' }) { return (

{n}

{l}

); } // ─── Textured paper overlay ───────────────────────────── function PaperTexture({ opacity = 0.06 }) { return ( ); } // ─── Reading List (shared, session 29) ────────────────────────────────── // Self-contained: fetches and manages its own state, so it can be dropped // into any screen (Saved, Journal) without those screens needing to share // state. Per Jay's direction (session 29): shown in both places. function ReadingListSection() { const [reading, setReading] = React.useState([]); const [parkIndex, setParkIndex] = React.useState([]); const [rTitle, setRTitle] = React.useState(''); const [rAuthor, setRAuthor] = React.useState(''); const [rPark, setRPark] = React.useState(''); const [rSaving, setRSaving] = React.useState(false); const [loaded, setLoaded] = React.useState(false); const load = React.useCallback(async () => { const [rl, idx] = await Promise.all([window.PH.listReadingList(), window.PH.getParkIndex()]); setReading(rl); setParkIndex(idx); setLoaded(true); }, []); React.useEffect(() => { load(); }, [load]); const byd = Object.fromEntries(parkIndex.map(p => [p.slug, p])); const addBook = async () => { if (!rTitle.trim()) return; setRSaving(true); try { await window.PH.addReadingItem({ title: rTitle.trim(), author: rAuthor.trim() || null, park_slug: rPark || null }); setRTitle(''); setRAuthor(''); setReading(await window.PH.listReadingList()); } finally { setRSaving(false); } }; const setStatus = async (id, status) => { await window.PH.updateReadingItem(id, { status }); setReading(prev => prev.map(b => b.id === id ? { ...b, status } : b)); }; const remove = async (id) => { await window.PH.removeReadingItem(id); setReading(prev => prev.filter(b => b.id !== id)); }; if (!loaded) return null; return (

setRTitle(e.target.value)} placeholder="Book title" style={{ width: '100%', padding: '10px 12px', border: '1px solid var(--line)', borderRadius: 2, fontFamily: 'DM Sans, sans-serif', fontSize: 14, marginBottom: 8 }}/>

setRAuthor(e.target.value)} placeholder="Author (optional)" style={{ flex: 1, padding: '10px 12px', border: '1px solid var(--line)', borderRadius: 2, fontFamily: 'DM Sans, sans-serif', fontSize: 13 }}/>

{reading.length === 0 && (

No books yet. Add the ones you want to read before, during, or after the trip.

)} {reading.map(b => { const p = b.park_slug ? byd[b.park_slug] : null; return (

{b.title}

{[b.author, p ? p.name : null].filter(Boolean).join(' \u00b7 ')}

{['to_read', 'reading', 'finished'].map(s => ( ))}

); })}

); } /* ─── PassportMap — shared visited-parks map (spec §2.3). Self-contained: fetches its own map asset + visits, same independent-instance pattern as ReadingListSection. mode="card" = Home's compact tappable glance; mode="full" = the Passport screen's full-bleed picture. ─── */ function PassportMap({ mode = 'card', onOpen }) { const [loading, setLoading] = React.useState(true); const [asset, setAsset] = React.useState(null); const [visited, setVisited] = React.useState(new Set()); const [failed, setFailed] = React.useState(false); React.useEffect(() => { (async () => { try { const [a, visits] = await Promise.all([window.PH.getMapAsset(), window.PH.listVisits()]); setAsset(a); setVisited(new Set(visits.map(v => v.park_slug))); } catch (e) { setFailed(true); } finally { setLoading(false); } })(); }, []); const count = visited.size; if (loading) { return (

Loading map…

); } // Graceful fallback: never a blank box, even if the fetch failed. if (failed || !asset) { return (

Your Passport

{count === 0 ? "No parks stamped yet." : `${count} park${count === 1 ? '' : 's'} collected.`}

); } const svg = ( ); if (mode === 'full') { return (

{count} / 63

Parks stamped

{svg}

); } // mode === 'card' return ( ); } Object.assign(window, { I, Caps, Rule, CornerMarks, TabBar, SectionHead, Chip, Metric, ProgressBar, PaperTexture, ReadingListSection, PassportMap });