Het geslacht De Visser

\n \n \n \n`;\n return new Response(html, {\n headers: {\n \"content-type\": \"text/html; charset=utf-8\",\n \"cache-control\": \"no-cache\",\n },\n });\n});\n\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\napp.get(\"/api/session\", async (c) => {\n const user = await readSession(c.req.raw);\n if (!user) return json({ authenticated: false });\n return json({ authenticated: true, user: { username: user.username, displayName: user.displayName, role: user.role } });\n});\n\napp.post(\"/api/login\", async (c) => {\n const users = getAuthUsers();\n let payload: { username?: string; password?: string } = {};\n try {\n payload = await c.req.json();\n } catch (_error) {\n return json({ error: \"Ongeldige login-aanvraag.\" }, 400);\n }\n const username = String(payload.username || \"\").trim().toLowerCase();\n const password = String(payload.password || \"\");\n const record = users[username];\n if (!record || !password) return json({ error: \"Controleer gebruikersnaam en wachtwoord.\" }, 401);\n\n const hash = await sha256Hex(`${record.salt}:${password}`);\n if (!constantTimeEqual(hash, record.hash)) return json({ error: \"Controleer gebruikersnaam en wachtwoord.\" }, 401);\n\n const session = await createSession({\n username,\n displayName: record.displayName || username,\n role: record.role || \"editor\",\n exp: Date.now() + oneWeek * 1000,\n });\n return json(\n { ok: true, user: { username, displayName: record.displayName || username, role: record.role || \"editor\" } },\n 200,\n { \"set-cookie\": sessionCookieHeader(session) },\n );\n});\n\napp.post(\"/api/logout\", () => json({ ok: true }, 200, { \"set-cookie\": clearCookieHeader() }));\n\napp.get(\"/api/tree\", async (c) => {\n const user = await requireUser(c.req.raw);\n if (!user) return json({ error: \"Niet ingelogd.\" }, 401);\n return json(await readTree());\n});\n\napp.post(\"/api/people\", async (c) => {\n const user = await requireUser(c.req.raw);\n if (!user) return json({ error: \"Niet ingelogd.\" }, 401);\n let body: Record = {};\n try {\n body = await c.req.json();\n } catch (_error) {\n return json({ error: \"Ongeldige invoer.\" }, 400);\n }\n\n const name = String(body.name || \"\").trim();\n if (name.length < 2) return json({ error: \"Vul minimaal een naam in.\" }, 400);\n\n await initDb();\n const id = `person-${crypto.randomUUID()}`;\n const relationshipId = `rel-${crypto.randomUUID()}`;\n const connectTo = String(body.connectTo || \"\").trim();\n const relation = String(body.relation || \"child-of\");\n const notes = String(body.notes || \"\").trim();\n\n const inserts = [\n {\n sql: `INSERT INTO people (\n id, name, display_name, gender, birth_date, birth_place, death_date, death_place,\n occupation, notes, tags, lineage_order\n ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,\n args: [\n id,\n name,\n String(body.displayName || \"\").trim() || null,\n String(body.gender || \"\").trim() || null,\n String(body.birthDate || \"\").trim() || null,\n String(body.birthPlace || \"\").trim() || null,\n String(body.deathDate || \"\").trim() || null,\n String(body.deathPlace || \"\").trim() || null,\n String(body.occupation || \"\").trim() || null,\n notes || null,\n \"user-added\",\n null,\n ],\n },\n ];\n\n if (connectTo) {\n if (relation === \"parent-of\") {\n inserts.push({\n sql: \"INSERT INTO relationships (id, source_id, target_id, type, date, place, notes) VALUES (?, ?, ?, ?, ?, ?, ?)\",\n args: [relationshipId, id, connectTo, \"parent\", null, null, \"Toegevoegd via beheer\"],\n });\n } else if (relation === \"spouse-of\") {\n inserts.push({\n sql: \"INSERT INTO relationships (id, source_id, target_id, type, date, place, notes) VALUES (?, ?, ?, ?, ?, ?, ?)\",\n args: [relationshipId, connectTo, id, \"spouse\", String(body.relationshipDate || \"\").trim() || null, String(body.relationshipPlace || \"\").trim() || null, \"Toegevoegd via beheer\"],\n });\n } else {\n inserts.push({\n sql: \"INSERT INTO relationships (id, source_id, target_id, type, date, place, notes) VALUES (?, ?, ?, ?, ?, ?, ?)\",\n args: [relationshipId, connectTo, id, \"parent\", null, null, \"Toegevoegd via beheer\"],\n });\n }\n }\n\n await sqlite.batch(inserts);\n return json({ ok: true, personId: id, tree: await readTree() }, 201);\n});\n\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","label","children",[75],"contentHash","75e531764d1e63fb986d09244a04eba9847bb381764fcd23d57d7fe6684e9f7a","5edba328-3996-11f1-bbdd-42b51c65c3df","a9b2b20a-f528-11ef-9e98-569c3dd06744",76,["D",1776345342438],15,"import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;\n",[75],"9be69b2abae3e8948e1fd732628dddd372fcaab9141c0726b75f429830bde151","frontend/index.html",{"_32":121,"_13":110,"_81":122,"_83":123,"_84":33,"_85":124,"_86":48,"_34":125,"_40":126,"_89":116,"_91":127,"_66":48,"_93":-5,"_94":-7,"_74":128,"_96":129},{"_32":109,"_13":110,"_81":111,"_83":112,"_84":58,"_85":113,"_86":26,"_34":114,"_40":115,"_89":116,"_91":117,"_66":48,"_93":-5,"_94":-7,"_74":118,"_96":119},"aa8e9755-604e-4807-b327-399524f589e0","index.html","019f33f3-6797-71df-9472-cfe0137fb115","019f33f3-6797-71df-9472-d66668d4f9f5",26,["D",1789164609310],3,"file","\n\n \n \n \n Het geslacht De Visser\n \n \n \n \n \n \n \n \n \n

\n \n \n \n\n",[120,110],"4e8dbab3c7cbec0a4b8a5201bc176abbf10e62e38e4c5ad54533888eed8f989e","frontend","5c059140-3996-11f1-a04c-42b51c65c3df","5404b440-f52b-11ef-99f0-569c3dd06744","a59cbf44-f528-11ef-ae42-569c3dd06744",74,["D",1776345337676],8,"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[120,110],"1ea8b3da4e18d579298229ba24af91b14b14ae02565f57c996f9acaa1f8333bc","frontend/components/App.tsx",{"_32":145,"_13":134,"_81":146,"_83":147,"_84":33,"_85":148,"_86":26,"_34":149,"_40":88,"_89":140,"_91":150,"_66":48,"_93":-5,"_94":-7,"_74":151,"_96":152},{"_32":133,"_13":134,"_81":135,"_83":136,"_84":58,"_85":137,"_86":26,"_34":138,"_40":139,"_89":140,"_91":141,"_66":48,"_93":-5,"_94":-7,"_74":142,"_96":143},"9111e41a-9aa1-4910-ac45-540b57f60032","App.tsx","019f33f3-6797-71df-9472-bfd84de1747d","019f33f3-6797-71df-9472-c4d39f070420",29,["D",1789164612674],18,"script","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useMemo, useState } from \"https://esm.sh/react@18.2.0\";\nimport {\n Anchor,\n Archive,\n BookOpen,\n Calendar,\n Check,\n ChevronRight,\n Clock3,\n Compass,\n FilePlus2,\n Fingerprint,\n HeartHandshake,\n Home,\n KeyRound,\n Landmark,\n Link as LinkIcon,\n ListFilter,\n LogOut,\n Map as MapIcon,\n MapPin,\n Network,\n NotebookTabs,\n Plus,\n Route,\n Search,\n Settings,\n ShieldCheck,\n Sparkles,\n Star,\n TreePine,\n User,\n Users,\n X,\n} from \"https://esm.sh/lucide-react@0.468.0?deps=react@18.2.0\";\n\ntype Person = {\n id: string;\n name: string;\n display_name?: string | null;\n gender?: string | null;\n birth_date?: string | null;\n birth_place?: string | null;\n death_date?: string | null;\n death_place?: string | null;\n occupation?: string | null;\n notes?: string | null;\n tags?: string | null;\n lineage_order?: number | null;\n created_at?: string | null;\n};\n\ntype Relationship = {\n id: string;\n source_id: string;\n target_id: string;\n type: \"parent\" | \"spouse\" | string;\n date?: string | null;\n place?: string | null;\n notes?: string | null;\n};\n\ntype Source = { id: string; title: string; detail?: string | null; url?: string | null };\ntype TreeData = { people: Person[]; relationships: Relationship[]; sources: Source[]; stats: Record };\ntype Session = { username: string; displayName: string; role: string };\ntype Tab = \"overview\" | \"ancestors\" | \"descendants\" | \"timeline\" | \"places\" | \"sources\" | \"manage\";\n\nconst navItems: Array<{ id: Tab; label: string; icon: any }> = [\n { id: \"overview\", label: \"Atlas\", icon: Home },\n { id: \"ancestors\", label: \"Voorouders\", icon: Route },\n { id: \"descendants\", label: \"Nazaten\", icon: Network },\n { id: \"timeline\", label: \"Tijdlijn\", icon: Clock3 },\n { id: \"places\", label: \"Plaatsen\", icon: MapPin },\n { id: \"sources\", label: \"Bronnen\", icon: BookOpen },\n { id: \"manage\", label: \"Beheer\", icon: Settings },\n];\n\nasync function requestJson(path: string, init?: RequestInit) {\n const response = await fetch(path, {\n ...init,\n headers: { \"content-type\": \"application/json\", ...(init?.headers || {}) },\n });\n const data = await response.json().catch(() => ({}));\n if (!response.ok) throw new Error(data.error || \"Er ging iets mis.\");\n return data;\n}\n\nfunction label(person?: Person | null) {\n return person?.display_name || person?.name || \"Onbekend\";\n}\n\nfunction hasTag(person: Person | null | undefined, tag: string) {\n return String(person?.tags || \"\").split(\",\").map((part) => part.trim()).includes(tag);\n}\n\nfunction initials(person: Person) {\n return label(person)\n .replace(/\$[^)]*\$/g, \"\")\n .split(/\\s+/)\n .filter(Boolean)\n .slice(0, 2)\n .map((part) => part[0]?.toUpperCase())\n .join(\"\");\n}\n\nfunction placeLine(prefix: string, date?: string | null, place?: string | null) {\n if (!date && !place) return \"\";\n return [prefix, date, place ? `te ${place}` : \"\"].filter(Boolean).join(\" \");\n}\n\nfunction lifeLine(person?: Person | null) {\n if (!person) return \"\";\n const born = placeLine(\"Geboren\", person.birth_date, person.birth_place);\n const died = placeLine(\"Overleden\", person.death_date, person.death_place);\n if (born && died) return `${born} - ${died}`;\n return born || died || \"Nog geen datums vastgelegd\";\n}\n\nfunction yearFrom(value?: string | null) {\n const match = String(value || \"\").match(/(\\d{4})/);\n return match ? Number(match[1]) : null;\n}\n\nfunction yearLabel(person: Person) {\n const born = yearFrom(person.birth_date);\n const died = yearFrom(person.death_date);\n if (born && died) return `${born}-${died}`;\n if (born) return String(born);\n if (died) return `-${died}`;\n return \"zonder datum\";\n}\n\nfunction sortByLineage(a: Person, b: Person) {\n return Number(a.lineage_order || 999) - Number(b.lineage_order || 999) || label(a).localeCompare(label(b));\n}\n\nfunction lineagePerson(people: Person[], order: number) {\n return people.find((person) => Number(person.lineage_order) === order) || null;\n}\n\nfunction featuredDefault(people: Person[]) {\n return lineagePerson(people, 16) || people.find((person) => hasTag(person, \"featured\")) || people[0] || null;\n}\n\nfunction uniquePeople(people: Array) {\n const seen = new Set();\n return people.filter((person): person is Person => {\n if (!person || seen.has(person.id)) return false;\n seen.add(person.id);\n return true;\n });\n}\n\nfunction spouseOf(person: Person | null | undefined, peopleById: Map, relationships: Relationship[]) {\n if (!person) return null;\n const rel = relationships.find((entry) => entry.type === \"spouse\" && (entry.source_id === person.id || entry.target_id === person.id));\n return rel ? peopleById.get(rel.source_id === person.id ? rel.target_id : rel.source_id) || null : null;\n}\n\nfunction childrenOf(person: Person | null | undefined, peopleById: Map, relationships: Relationship[]) {\n if (!person) return [];\n return uniquePeople(relationships.filter((rel) => rel.type === \"parent\" && rel.source_id === person.id).map((rel) => peopleById.get(rel.target_id))).sort(sortByLineage);\n}\n\nfunction allPlaces(people: Person[]) {\n return [...new Set(people.flatMap((person) => [person.birth_place, person.death_place]).filter(Boolean) as string[])].sort((a, b) => a.localeCompare(b));\n}\n\nfunction AtlasBackdrop() {\n return (\n \n );\n}\n\nfunction CrestMark() {\n return (\n

\n \n

\n );\n}\n\nfunction Portrait({ person, paper = false }: { person: Person; paper?: boolean }) {\n return {initials(person)};\n}\n\nfunction PersonTile({ person, selected, onSelect, scale = \"normal\" }: { person: Person; selected: boolean; onSelect: (id: string) => void; scale?: \"normal\" | \"hero\" | \"compact\" }) {\n const classes = [\"person-tile\", `scale-${scale}`, selected ? \"selected\" : \"\", hasTag(person, \"featured\") ? \"featured\" : \"\", hasTag(person, \"user-added\") ? \"user-added\" : \"\"].filter(Boolean).join(\" \");\n return (\n \n );\n}\n\nfunction DossierPanel({ person, peopleById, relationships, openEntry }: { person: Person; peopleById: Map; relationships: Relationship[]; openEntry: () => void }) {\n const spouses = relationships\n .filter((rel) => rel.type === \"spouse\" && (rel.source_id === person.id || rel.target_id === person.id))\n .map((rel) => ({ rel, person: peopleById.get(rel.source_id === person.id ? rel.target_id : rel.source_id) }))\n .filter((entry) => entry.person) as Array<{ rel: Relationship; person: Person }>;\n const children = childrenOf(person, peopleById, relationships);\n const hasDeath = Boolean(person.death_date || person.death_place);\n\n return (\n

record

\n \n

{label(person)}

{person.occupation || \"Geen beroep of rol vastgelegd\"}

\n {(person.birth_date || person.birth_place) ? (\n

Geboren{[person.birth_date, person.birth_place && `te ${person.birth_place}`].filter(Boolean).join(\" \")}

\n ) : null}\n {hasDeath ? (\n

Overleden{[person.death_date, person.death_place && `te ${person.death_place}`].filter(Boolean).join(\" \")}

\n ) : null}\n {spouses.length ? (\n

\n \n \n Verbonden met\n {spouses.map(({ rel, person: spouse }) => (\n {label(spouse)}{rel.date ? ` - ${rel.date}` : \"\"}{rel.place ? ` te ${rel.place}` : \"\"}\n ))}\n \n

\n ) : null}\n {children.length ? (\n

\n \n \n Kinderen\n {children.map((child) => {label(child)})}\n \n

\n ) : null}\n {person.notes ?

Notitie{person.notes}

: null}\n

\n \n

\n );\n}\n\nfunction LineageRail({ people, selectedId, setSelected }: { people: Person[]; selectedId: string; setSelected: (id: string) => void }) {\n const directLine = people.filter((person) => hasTag(person, \"direct-line\")).sort(sortByLineage);\n return (\n \n );\n}\n\nfunction SearchDock({ matches, setSelected }: { matches: Person[]; setSelected: (id: string) => void }) {\n if (!matches.length) return null;\n return (\n

Zoekresultaten

\n {matches.map((person) => (\n \n ))}\n

\n );\n}\n\nfunction AtlasScene({ tree, selected, setSelected, peopleById, relationships, openEntry, query }: { tree: TreeData; selected: Person; setSelected: (id: string) => void; peopleById: Map; relationships: Relationship[]; openEntry: () => void; query: string }) {\n const directLine = tree.people.filter((person) => hasTag(person, \"direct-line\")).sort(sortByLineage);\n const focus = lineagePerson(directLine, 16) || selected;\n const partner = spouseOf(focus, peopleById, relationships);\n const children = childrenOf(focus, peopleById, relationships);\n const branchStart = lineagePerson(directLine, 17);\n const branchPartner = spouseOf(branchStart, peopleById, relationships);\n const recent = uniquePeople([branchStart, branchPartner, lineagePerson(directLine, 18), lineagePerson(directLine, 19)]);\n const union = partner ? relationships.find((rel) => rel.type === \"spouse\" && ((rel.source_id === focus.id && rel.target_id === partner.id) || (rel.target_id === focus.id && rel.source_id === partner.id))) : null;\n const matches = query.trim() ? tree.people.filter((person) => `${label(person)} ${person.birth_place || \"\"} ${person.death_place || \"\"} ${person.notes || \"\"}`.toLowerCase().includes(query.toLowerCase())).slice(0, 7) : [];\n const places = allPlaces(tree.people).slice(0, 8);\n\n return (\n

\n {tree.stats.people || 0} personen\n {tree.stats.directLine || 0} directe schakels\n {tree.stats.places || places.length} plaatsen\n \n

\n \n

\n \n Walcheren als herkomstlaag\n

\n \n Dossierlaag\n

\n {directLine.slice(Math.max(0, directLine.length - 8), directLine.length - 3).map((person) => (\n \n ))}\n

\n \n

\n \n \n {union?.date || \"verbonden\"}\n \n

\n {partner ? : }\n

kinderen

\n {children.map((person) => )}\n

lijn naar nu

\n {recent.map((person) => )}\n

\n {places.map((place) => {place})}\n

\n );\n}\n\nfunction Overview({ tree, selected, setSelected, peopleById, relationships, query, openEntry }: { tree: TreeData; selected: Person; setSelected: (id: string) => void; peopleById: Map; relationships: Relationship[]; query: string; openEntry: () => void }) {\n return (\n

\n \n \n \n

\n );\n}\n\nfunction ArchivePage({ title, subtitle, icon: Icon, children }: { title: string; subtitle?: string; icon: any; children: any }) {\n return (\n

\n \n

{title}

\n {subtitle ?

{subtitle}

: null}\n

\n {children}\n

\n );\n}\n\nfunction RecordButton({ person, onSelect, meta }: { person: Person; onSelect: (id: string) => void; meta?: string }) {\n return (\n \n );\n}\n\nfunction AncestorsPage({ people, setSelected }: { people: Person[]; setSelected: (id: string) => void }) {\n const directLine = people.filter((person) => hasTag(person, \"direct-line\")).sort(sortByLineage);\n return (\n \n

{directLine.map((person) => )}

\n \n );\n}\n\nfunction DescendantsPage({ tree, setSelected }: { tree: TreeData; setSelected: (id: string) => void }) {\n const peopleById = new Map(tree.people.map((person) => [person.id, person] as const));\n const directLine = tree.people.filter((person) => hasTag(person, \"direct-line\")).sort(sortByLineage);\n const familyHead = lineagePerson(directLine, 16);\n const recentDirect = directLine.filter((person) => Number(person.lineage_order || 0) >= 16);\n const household = familyHead ? childrenOf(familyHead, peopleById, tree.relationships) : [];\n const partners = recentDirect.map((person) => spouseOf(person, peopleById, tree.relationships));\n const added = tree.people.filter((person) => hasTag(person, \"user-added\"));\n const people = uniquePeople([...recentDirect, ...household, ...partners, ...added]);\n return (\n \n

{people.map((person) => )}

\n \n );\n}\n\nfunction TimelinePage({ people, setSelected }: { people: Person[]; setSelected: (id: string) => void }) {\n const dated = people.filter((person) => yearFrom(person.birth_date) || yearFrom(person.death_date)).sort((a, b) => Number(yearFrom(a.birth_date) || yearFrom(a.death_date)) - Number(yearFrom(b.birth_date) || yearFrom(b.death_date)));\n return (\n \n

\n {dated.map((person) => (\n \n ))}\n

\n \n );\n}\n\nfunction PlacesPage({ people }: { people: Person[] }) {\n const counts = new Map();\n for (const person of people) for (const place of [person.birth_place, person.death_place].filter(Boolean) as string[]) counts.set(place, (counts.get(place) || 0) + 1);\n const places = [...counts.entries()].sort((a, b) => b[1] - a[1]);\n return (\n \n

{places.map(([place, count]) =>

{place}{count} vermeldingen

)}

\n \n );\n}\n\nfunction SourcesPage({ sources }: { sources: Source[] }) {\n return (\n \n

\n {sources.map((source) => (\n

\n \n

{source.title}

{source.detail}

\n {source.url ? Open bron : null}\n

\n ))}\n

Bekijk / remix broncode

\n \n );\n}\n\nfunction EntryForm({ tree, selectedId, onCreated, onDone }: { tree: TreeData; selectedId: string; onCreated: (tree: TreeData, id: string) => void; onDone?: () => void }) {\n const [draft, setDraft] = useState({ name: \"\", gender: \"\", birthDate: \"\", birthPlace: \"\", deathDate: \"\", deathPlace: \"\", occupation: \"\", notes: \"\", connectTo: selectedId, relation: \"child-of\", relationshipDate: \"\", relationshipPlace: \"\" });\n const [saving, setSaving] = useState(false);\n const [message, setMessage] = useState(\"\");\n const [error, setError] = useState(\"\");\n\n useEffect(() => setDraft((current) => ({ ...current, connectTo: current.connectTo || selectedId })), [selectedId]);\n\n async function submit(event: any) {\n event.preventDefault();\n setSaving(true);\n setMessage(\"\");\n setError(\"\");\n try {\n const data = await requestJson(\"/api/people\", { method: \"POST\", body: JSON.stringify(draft) });\n setMessage(\"Nieuwe entry opgeslagen.\");\n setDraft({ name: \"\", gender: \"\", birthDate: \"\", birthPlace: \"\", deathDate: \"\", deathPlace: \"\", occupation: \"\", notes: \"\", connectTo: selectedId, relation: \"child-of\", relationshipDate: \"\", relationshipPlace: \"\" });\n onCreated(data.tree, data.personId);\n if (onDone) setTimeout(onDone, 450);\n } catch (err) {\n setError(err instanceof Error ? err.message : \"Opslaan mislukt.\");\n } finally {\n setSaving(false);\n }\n }\n\n function update(field: string, value: string) {\n setDraft((current) => ({ ...current, [field]: value }));\n }\n\n const people = [...tree.people].sort((a, b) => label(a).localeCompare(label(b)));\n const selectedPerson = people.find((person) => person.id === draft.connectTo);\n\n return (\n

\n conceptrecord\n {draft.name || \"Nieuwe persoon\"}\n {selectedPerson ? `gekoppeld aan ${label(selectedPerson)}` : \"nog niet gekoppeld\"}\n

\n Naam update(\"name\", (event.target as any).value)} placeholder=\"Volledige naam\" required />\n Geslacht\n Beroep / rol update(\"occupation\", (event.target as any).value)} placeholder=\"bijv. landbouwer\" />\n Geboortedatum update(\"birthDate\", (event.target as any).value)} placeholder=\"dd-mm-jjjj of ca. 1700\" />\n Geboorteplaats update(\"birthPlace\", (event.target as any).value)} placeholder=\"Aagtekerke\" />\n Overlijdensdatum update(\"deathDate\", (event.target as any).value)} placeholder=\"alleen invullen wanneer bekend\" />\n Overlijdensplaats update(\"deathPlace\", (event.target as any).value)} placeholder=\"alleen invullen wanneer bekend\" />\n Koppel aan\n Relatie\n Relatiedatum update(\"relationshipDate\", (event.target as any).value)} placeholder=\"bij partnerrelatie\" />\n Relatieplaats update(\"relationshipPlace\", (event.target as any).value)} placeholder=\"bij partnerrelatie\" />\n Notitie / bron

update(\"notes\", (event.target as any).value)} placeholder=\"Akte, bron, onzekerheid of context\" /></label>\n      </div>\n      <div className=\"form-actions\">\n        <button className=\"primary-button\" disabled={saving}><FilePlus2 />{saving ? \"Opslaan...\" : \"Entry opslaan\"}</button>\n        {message ? <span className=\"message\"><Check /> {message}</span> : null}\n        {error ? <span className=\"message error\">{error}</span> : null}\n      </div>\n    </form>\n  );\n}\n\nfunction EntryDrawer({ open, onClose, tree, selectedId, onCreated }: { open: boolean; onClose: () => void; tree: TreeData; selectedId: string; onCreated: (tree: TreeData, id: string) => void }) {\n  if (!open) return null;\n  return (\n    <div className=\"entry-drawer-shell open\">\n      <button className=\"drawer-scrim\" onClick={onClose} aria-label=\"Sluit entry paneel\" />\n      <aside className=\"entry-drawer\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Nieuwe entry\">\n        <div className=\"drawer-head\">\n          <div><h2>Nieuwe entry</h2><p>Beheer van personen en relaties</p></div>\n          <button className=\"icon-button\" onClick={onClose} aria-label=\"Sluiten\"><X /></button>\n        </div>\n        <EntryForm tree={tree} selectedId={selectedId} onCreated={onCreated} onDone={onClose} />\n      </aside>\n    </div>\n  );\n}\n\nfunction ManagePage({ tree, selectedId, onCreated }: { tree: TreeData; selectedId: string; onCreated: (tree: TreeData, id: string) => void }) {\n  return (\n    <ArchivePage title=\"Beheer\" subtitle=\"Voeg personen toe en koppel ze direct aan bestaande familieleden.\" icon={Settings}>\n      <div className=\"manage-grid\">\n        <EntryForm tree={tree} selectedId={selectedId} onCreated={onCreated} />\n        <aside className=\"auth-note\">\n          <ShieldCheck />\n          <h3>Public met poort</h3>\n          <p>De Val blijft public, maar de data en beheeracties zitten achter de sessiecookie. Accounts staan in <strong>AUTH_USERS_JSON</strong>.</p>\n          <p>Laat overlijdensvelden leeg zolang iemand niet overleden is of er geen bewijs is.</p>\n        </aside>\n      </div>\n    </ArchivePage>\n  );\n}\n\nfunction LoginScreen({ onLogin }: { onLogin: (session: Session) => void }) {\n  const [username, setUsername] = useState(\"\");\n  const [password, setPassword] = useState(\"\");\n  const [error, setError] = useState(\"\");\n  const [loading, setLoading] = useState(false);\n\n  async function submit(event: any) {\n    event.preventDefault();\n    setError(\"\");\n    setLoading(true);\n    try {\n      const data = await requestJson(\"/api/login\", { method: \"POST\", body: JSON.stringify({ username, password }) });\n      onLogin(data.user);\n    } catch (err) {\n      setError(err instanceof Error ? err.message : \"Inloggen mislukt.\");\n    } finally {\n      setLoading(false);\n    }\n  }\n\n  return (\n    <main className=\"login-screen\">\n      <section className=\"login-card\">\n        <div className=\"login-atlas\">\n          <AtlasBackdrop />\n          <div className=\"login-brand\">\n            <CrestMark />\n            <h1>Het geslacht De Visser</h1>\n            <p>Familiearchief Walcheren — kust, akte, naam en familie bij elkaar achter een rustige familiepoort.</p>\n          </div>\n        </div>\n        <form className=\"login-form\" onSubmit={submit}>\n          <h2>Familiepoort</h2>\n          <label className=\"field\"><span>Gebruikersnaam</span><input autoComplete=\"username\" value={username} onChange={(event) => setUsername((event.target as any).value)} placeholder=\"gebruikersnaam\" /></label>\n          <label className=\"field\"><span>Wachtwoord</span><input autoComplete=\"current-password\" type=\"password\" value={password} onChange={(event) => setPassword((event.target as any).value)} /></label>\n          <div className=\"form-actions\"><button className=\"primary-button\" disabled={loading}><KeyRound />{loading ? \"Controleren...\" : \"Inloggen\"}</button></div>\n          {error ? <p className=\"message error\">{error}</p> : null}\n          <p className=\"source-note\"><ShieldCheck /> Public val, data/API achter sessiecookie. <a href=\"/source\">View source</a>.</p>\n        </form>\n      </section>\n    </main>\n  );\n}\n\nfunction LoadingScreen() {\n  return <main className=\"loading-screen\"><div className=\"spinner\" aria-label=\"Laden\" /></main>;\n}\n\nexport function App() {\n  const [loading, setLoading] = useState(true);\n  const [session, setSession] = useState<Session | null>(null);\n  const [tree, setTree] = useState<TreeData | null>(null);\n  const [selectedId, setSelectedId] = useState(\"\");\n  const [activeTab, setActiveTab] = useState<Tab>(\"overview\");\n  const [query, setQuery] = useState(\"\");\n  const [entryOpen, setEntryOpen] = useState(false);\n\n  async function loadTree() {\n    const data = await requestJson(\"/api/tree\");\n    setTree(data);\n    const fallback = featuredDefault(data.people);\n    if ((!selectedId || !data.people.some((person: Person) => person.id === selectedId)) && fallback) setSelectedId(fallback.id);\n  }\n\n  useEffect(() => {\n    (async () => {\n      try {\n        const data = await requestJson(\"/api/session\");\n        if (data.authenticated) {\n          setSession(data.user);\n          const treeData = await requestJson(\"/api/tree\");\n          setTree(treeData);\n          const fallback = featuredDefault(treeData.people);\n          if (fallback) setSelectedId(fallback.id);\n        }\n      } finally {\n        setLoading(false);\n      }\n    })();\n  }, []);\n\n  const peopleById = useMemo(() => new Map((tree?.people || []).map((person) => [person.id, person] as const)), [tree]);\n  const selected = peopleById.get(selectedId) || featuredDefault(tree?.people || []) || null;\n\n  async function logout() {\n    await requestJson(\"/api/logout\", { method: \"POST\", body: \"{}\" });\n    setSession(null);\n    setTree(null);\n  }\n\n  function selectAndOverview(id: string) {\n    setSelectedId(id);\n    setActiveTab(\"overview\");\n  }\n\n  if (loading) return <LoadingScreen />;\n  if (!session) return <LoginScreen onLogin={(user) => { setSession(user); loadTree(); }} />;\n  if (!tree || !selected) return <LoadingScreen />;\n\n  return (\n    <div className=\"app-shell\">\n      <header className=\"app-header\">\n        <div className=\"header-main\">\n          <button className=\"brand-lockup\" onClick={() => setActiveTab(\"overview\")} aria-label=\"Ga naar atlas\">\n            <CrestMark />\n            <span>\n              <strong>Het geslacht De Visser</strong>\n              <em>Walcheren - familie - archief</em>\n            </span>\n          </button>\n          <label className=\"search-wrap\"><Search /><input value={query} onChange={(event) => setQuery((event.target as any).value)} placeholder=\"Zoek persoon, plaats of bron...\" /></label>\n          <div className=\"header-actions\">\n            <button className=\"primary-button\" onClick={() => setEntryOpen(true)}><FilePlus2 /> Nieuwe entry</button>\n            <div className=\"user-box\"><User /> <span>{session.displayName}</span><button className=\"icon-button\" onClick={logout} aria-label=\"Uitloggen\"><LogOut /></button></div>\n          </div>\n        </div>\n        <nav className=\"nav-tabs\" aria-label=\"Hoofdnavigatie\">\n          {navItems.map(({ id, label: itemLabel, icon: Icon }) => <button key={id} className={`nav-button ${activeTab === id ? \"active\" : \"\"}`} onClick={() => setActiveTab(id)}><Icon />{itemLabel}</button>)}\n        </nav>\n      </header>\n      <div className=\"workspace\">\n        {activeTab === \"overview\" ? <Overview tree={tree} selected={selected} setSelected={setSelectedId} peopleById={peopleById} relationships={tree.relationships} query={query} openEntry={() => setEntryOpen(true)} /> : null}\n        {activeTab === \"ancestors\" ? <AncestorsPage people={tree.people} setSelected={selectAndOverview} /> : null}\n        {activeTab === \"descendants\" ? <DescendantsPage tree={tree} setSelected={selectAndOverview} /> : null}\n        {activeTab === \"timeline\" ? <TimelinePage people={tree.people} setSelected={selectAndOverview} /> : null}\n        {activeTab === \"places\" ? <PlacesPage people={tree.people} /> : null}\n        {activeTab === \"sources\" ? <SourcesPage sources={tree.sources} /> : null}\n        {activeTab === \"manage\" ? <ManagePage tree={tree} selectedId={selectedId} onCreated={(nextTree, id) => { setTree(nextTree); setSelectedId(id); setActiveTab(\"overview\"); }} /> : null}\n      </div>\n      <EntryDrawer open={entryOpen} onClose={() => setEntryOpen(false)} tree={tree} selectedId={selectedId} onCreated={(nextTree, id) => { setTree(nextTree); setSelectedId(id); setActiveTab(\"overview\"); }} />\n    </div>\n  );\n}\n",[120,144,134],"4019e209121ff9f5d2d150a29943d02e5f89461db182bc09267a813ce0f56359","components","5d7e5e30-3996-11f1-bbdd-42b51c65c3df","6e585892-f52b-11ef-a8e1-569c3dd06744","69ed66bc-f52b-11ef-9dac-569c3dd06744",75,["D",1776345339930],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Counter } from \"./Counter.tsx\";\n\nexport function App() {\n  return (\n    <div class=\"max-w-md mx-auto mt-12\">\n      <h1 class=\"text-3xl font-bold mb-6\">React + Hono Starter</h1>\n      <Counter />\n      <p class=\"mt-8 text-sm text-gray-500\">\n        <a href=\"/source\" class=\"underline hover:text-gray-700\">View source</a>\n      </p>\n    </div>\n  );\n}\n",[120,144,134],"de0a7e5fc76c6fd6135aff964af1a5835e04e2758b23f3d0c7d9fabffe514df7","README.md",{"_32":164,"_13":153,"_81":165,"_83":-5,"_84":33,"_85":60,"_86":48,"_34":166,"_40":167,"_89":116,"_91":168,"_66":48,"_93":-5,"_94":-7,"_74":169,"_96":170},{"_32":156,"_13":153,"_81":157,"_83":-5,"_84":58,"_85":158,"_86":26,"_34":159,"_40":160,"_89":116,"_91":161,"_66":48,"_93":-5,"_94":-7,"_74":162,"_96":163},"e1750414-e168-4cea-a951-23a582055c84","019f33f3-6797-71df-9472-dbfce642fe47",37,["D",1789164639003],1,"# Het geslacht De Visser\n\nAfgeschermde familystamboom voor het geslacht De Visser (Walcheren): atlas, dossier, tijdlijn, plaatsen, bronnen en beheer voor nieuwe entries.\n\n**Live:** de HTTP-endpoint van deze val (login vereist voor de boom).\n\n## Stack\n\n- **Hono** HTTP API + sessie-auth (`AUTH_USERS_JSON`, `SESSION_SECRET`)\n- **SQLite** voor people / relationships / sources\n- **React 18.2** SPA + Twind + eigen CSS (Fraunces / Source Sans 3)\n- Frontend assets via `serveImmutableFile` + `immutableFileUrl`\n\n## Structuur\n\n```\nindex.ts                 ← Hono: auth, /api/*, stamped HTML shell\nseed.ts                  ← publieke seed-stubs (echte data blijft in SQLite)\nfrontend/\n  index.html             ← referentie-shell (runtime shell komt uit index.ts)\n  index.tsx              ← React mount\n  styles.css             ← Walcheren-thema\n  components/App.tsx     ← SPA\n```\n\n## Auth\n\nZet in Val Town env:\n\n- `AUTH_USERS_JSON` — map van username → `{ displayName, role, salt, hash }` (SHA-256 van `salt:password`)\n- `SESSION_SECRET` — HMAC-geheim voor de cookie\n\n## Broncode\n\n`/source` redirect naar de Val Town-pagina van dit project.\n",[153],"2d2f4b5425ccdbfcbff3c7722dfbb9c6b6edd17df68d00e899a1d763696de7a9","b9c749c0-59e1-11f1-bb5f-ee650bb23af1","a50c3760-f53e-11ef-bd6d-569c3dd06744",["D",1779896144390],31,"# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n    Browser -->|\"GET /\"| Hono[\"index.ts<br/>(Hono server)\"]\n    Hono -->|serves| HTML[\"index.html\"]\n    HTML -->|loads| Entry[\"index.tsx\"]\n    Entry -->|renders| App[\"App.tsx\"]\n    App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts              ← Hono backend (serves frontend + API routes)\nfrontend/\n  index.html          ← HTML shell (loads Twind + React)\n  index.tsx           ← React entrypoint (mounts <App />)\n  favicon.svg         ← App icon\n  components/\n    App.tsx            ← Root component (layout + view source link)\n    Counter.tsx        ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n   frontend and any API routes you add.\n2. **`frontend/index.html`** loads Twind and the React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n   alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n   replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n  [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n  a full-stack example with database, queries, and shared types\n",[153],"aaa4f5cc8e5bd01528335cdd2066e164bf95353ce2fe37c616b3e6406f49331e",{"_74":172,"_76":173,"_78":-7},"frontend/components/Counter.tsx",{"_32":174,"_13":175,"_81":176,"_83":147,"_84":33,"_85":177,"_86":26,"_34":178,"_40":179,"_89":140,"_91":180,"_66":48,"_93":-5,"_94":-7,"_74":181,"_96":182},"57a8cc52-3996-11f1-8db6-42b51c65c3df","Counter.tsx","57a8cd2e-3996-11f1-8db6-42b51c65c3df",73,["D",1776345330366],0,"/** @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    <div class=\"flex items-center gap-3\">\n      <span class=\"text-lg\">Clicked</span>\n      <button\n        onClick={() => 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      </button>\n      <span class=\"text-lg\">times</span>\n    </div>\n  );\n}\n",[120,144,175],"10ce4fbd7e41af337e504c3877201698031249b437d941845f0f7cdc52a79e66",{"_74":194,"_76":-7,"_78":195},{"_74":185,"_76":-7,"_78":186},"seed.ts",{"_32":187,"_13":185,"_81":188,"_83":-5,"_84":58,"_85":189,"_86":26,"_34":190,"_40":160,"_89":140,"_91":191,"_66":48,"_93":-5,"_94":-7,"_74":192,"_96":193},"5e4e9f11-34c6-4a3d-9a4d-2e43cff0444f","f5c9b38a-78af-11f1-8c10-1607ee4eb77e",7,["D",1783283838121],"export type SeedPerson = {\n  id: string;\n  name: string;\n  displayName?: string;\n  gender?: string;\n  birthDate?: string;\n  birthPlace?: string;\n  deathDate?: string;\n  deathPlace?: string;\n  occupation?: string;\n  notes?: string;\n  tags?: string;\n  lineageOrder?: number;\n};\n\nexport type SeedRelationship = {\n  id: string;\n  sourceId: string;\n  targetId: string;\n  type: \"parent\" | \"spouse\" | \"source\";\n  date?: string;\n  place?: string;\n  notes?: string;\n};\n\nexport type SeedSource = {\n  id: string;\n  title: string;\n  detail?: string;\n  url?: string;\n};\n\n// The initial family data was imported once into Val Town SQLite.\n// Keep this public val source free of private genealogy records.\nexport const seedPeople: SeedPerson[] = [];\nexport const seedRelationships: SeedRelationship[] = [];\nexport const seedSources: SeedSource[] = [];\n",[185],"75f4013f4662adc922c74c3bdbcd3b5cea7f706cbadb289937b880e712500881","frontend/styles.css",{"_32":196,"_13":197,"_81":198,"_83":112,"_84":58,"_85":199,"_86":26,"_34":200,"_40":189,"_89":116,"_91":201,"_66":48,"_93":-5,"_94":-7,"_74":202,"_96":203},"3d4cf1c0-4a8b-4132-98c1-e3c2aaea358a","styles.css","49fc3dce-78b0-11f1-aca7-1607ee4eb77e",36,["D",1789164631973],":root {\n  color-scheme: dark;\n  --font-display: \"Fraunces\", ui-serif, Georgia, \"Times New Roman\", serif;\n  --font-body: \"Source Sans 3\", ui-sans-serif, system-ui, sans-serif;\n  --void: oklch(0.105 0.035 235);\n  --basin: oklch(0.16 0.045 224);\n  --basin-2: oklch(0.205 0.042 214);\n  --ink: oklch(0.94 0.018 89);\n  --muted: oklch(0.74 0.026 88);\n  --quiet: oklch(0.62 0.026 92);\n  --brass: oklch(0.74 0.14 72);\n  --brass-2: oklch(0.84 0.145 78);\n  --sea: oklch(0.58 0.105 171);\n  --madder: oklch(0.58 0.17 25);\n  --reed: oklch(0.68 0.096 128);\n  --paper: oklch(0.86 0.04 84);\n  --paper-dark: oklch(0.32 0.042 74);\n  --paper-ink: oklch(0.22 0.035 73);\n  --field: color-mix(in oklch, var(--basin-2) 72%, black 28%);\n  --field-2: color-mix(in oklch, var(--basin) 82%, black 18%);\n  --line: color-mix(in oklch, var(--brass) 44%, transparent);\n  --hair: color-mix(in oklch, var(--ink) 14%, transparent);\n  --focus: 0 0 0 3px color-mix(in oklch, var(--sea) 35%, transparent);\n  --danger: oklch(0.68 0.18 28);\n  --success: oklch(0.72 0.13 145);\n  --shadow: 0 10px 28px color-mix(in oklch, black 40%, transparent);\n}\n\n* { box-sizing: border-box; }\n\nhtml {\n  min-height: 100%;\n  background: var(--void);\n}\n\nbody {\n  margin: 0;\n  min-height: 100vh;\n  font-family: var(--font-body);\n  font-optical-sizing: auto;\n  color: var(--ink);\n  background:\n    linear-gradient(115deg, color-mix(in oklch, var(--madder) 10%, transparent), transparent 32%),\n    linear-gradient(210deg, color-mix(in oklch, var(--sea) 12%, transparent), transparent 38%),\n    linear-gradient(180deg, var(--basin) 0%, var(--void) 58%, oklch(0.08 0.026 230) 100%);\n  caret-color: var(--brass-2);\n}\n\n::selection {\n  background: color-mix(in oklch, var(--brass) 42%, transparent);\n  color: var(--ink);\n}\n\nbody::before {\n  content: \"\";\n  position: fixed;\n  inset: 0;\n  pointer-events: none;\n  opacity: .28;\n  background-image:\n    linear-gradient(color-mix(in oklch, var(--brass) 16%, transparent) 1px, transparent 1px),\n    linear-gradient(90deg, color-mix(in oklch, var(--brass) 12%, transparent) 1px, transparent 1px);\n  background-size: 72px 72px;\n  mask-image: linear-gradient(180deg, black, transparent 82%);\n}\n\nbody::after {\n  content: \"\";\n  position: fixed;\n  inset: 0;\n  pointer-events: none;\n  opacity: .18;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23d5a65d' stroke-opacity='.35' stroke-width='1'%3E%3Cpath d='M18 132c24-42 46-42 70 0 24-42 46-42 70 0'/%3E%3Cpath d='M26 138h128M46 138v16M90 138v22M134 138v16'/%3E%3Cpath d='M18 48c24 42 46 42 70 0 24 42 46 42 70 0'/%3E%3C/g%3E%3C/svg%3E\");\n  background-size: 220px 220px;\n  mix-blend-mode: screen;\n}\n\nbutton,\ninput,\nselect,\ntextarea {\n  font: inherit;\n}\n\nbutton {\n  cursor: pointer;\n  border: 0;\n}\n\nbutton:disabled {\n  cursor: not-allowed;\n  opacity: .6;\n}\n\nsvg {\n  display: block;\n}\n\na {\n  color: inherit;\n  text-decoration-thickness: 1px;\n  text-underline-offset: 3px;\n}\n\n.app-shell {\n  min-height: 100vh;\n  position: relative;\n  overflow-x: clip;\n}\n\n.app-header {\n  position: sticky;\n  top: 0;\n  z-index: 30;\n  border-bottom: 1px solid var(--line);\n  background:\n    linear-gradient(180deg, color-mix(in oklch, var(--void) 93%, transparent), color-mix(in oklch, var(--void) 82%, transparent));\n  backdrop-filter: blur(18px);\n}\n\n.header-main {\n  min-height: 4.8rem;\n  display: grid;\n  grid-template-columns: minmax(16rem, 1fr) minmax(18rem, 34rem) auto;\n  gap: 1rem;\n  align-items: center;\n  padding: .78rem clamp(.9rem, 2vw, 1.5rem) .58rem;\n}\n\n.brand-lockup {\n  min-width: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: .78rem;\n  color: var(--ink);\n  text-align: left;\n  background: transparent;\n}\n\n.brand-lockup strong {\n  display: block;\n  font-family: var(--font-display);\n  font-size: clamp(1.25rem, 2vw, 1.85rem);\n  font-weight: 650;\n  line-height: 1;\n  letter-spacing: 0;\n  color: var(--brass-2);\n}\n\n.brand-lockup em {\n  display: block;\n  margin-top: .25rem;\n  color: var(--muted);\n  font-style: normal;\n  font-size: .86rem;\n}\n\n.crest {\n  width: 3rem;\n  height: 3rem;\n  display: grid;\n  place-items: center;\n  flex: none;\n  color: var(--brass-2);\n  border: 1px solid var(--line);\n  border-radius: 10px;\n  background:\n    linear-gradient(145deg, color-mix(in oklch, var(--brass) 12%, transparent), transparent),\n    color-mix(in oklch, black 22%, transparent);\n}\n\n.crest svg {\n  width: 1.55rem;\n}\n\n.search-wrap {\n  position: relative;\n  min-width: 0;\n}\n\n.search-wrap svg {\n  position: absolute;\n  left: .92rem;\n  top: 50%;\n  width: 1.05rem;\n  transform: translateY(-50%);\n  color: var(--sea);\n}\n\n.search-wrap input {\n  width: 100%;\n  height: 2.85rem;\n  border: 1px solid color-mix(in oklch, var(--sea) 46%, var(--line));\n  border-radius: 999px;\n  background: color-mix(in oklch, black 26%, transparent);\n  color: var(--ink);\n  outline: none;\n  padding: 0 1rem 0 2.65rem;\n}\n\n.search-wrap input::placeholder {\n  color: color-mix(in oklch, var(--muted) 76%, black);\n}\n\n.search-wrap input:focus {\n  border-color: var(--sea);\n  box-shadow: var(--focus);\n}\n\n.header-actions {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: .75rem;\n  min-width: 0;\n}\n\n.user-box {\n  height: 2.85rem;\n  display: inline-flex;\n  align-items: center;\n  gap: .55rem;\n  color: var(--muted);\n  white-space: nowrap;\n}\n\n.user-box > svg {\n  width: 1rem;\n  color: var(--quiet);\n}\n\n.icon-button,\n.primary-button,\n.dossier-action,\n.nav-button,\n.atlas-statusbar button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: .48rem;\n  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;\n}\n\n.icon-button {\n  width: 2.45rem;\n  height: 2.45rem;\n  border-radius: 8px;\n  color: var(--brass-2);\n  border: 1px solid var(--line);\n  background: color-mix(in oklch, black 20%, transparent);\n}\n\n.icon-button:hover {\n  transform: translateY(-1px);\n  background: color-mix(in oklch, var(--brass) 13%, transparent);\n}\n\n.primary-button {\n  min-height: 2.7rem;\n  padding: 0 .95rem;\n  border-radius: 9px;\n  color: oklch(0.16 0.036 70);\n  background: linear-gradient(180deg, var(--brass-2), var(--brass));\n  box-shadow: 0 5px 12px color-mix(in oklch, black 22%, transparent);\n}\n\n.primary-button svg {\n  width: 1rem;\n}\n\n.primary-button:hover {\n  transform: translateY(-1px);\n}\n\n.nav-tabs {\n  display: flex;\n  align-items: center;\n  gap: .25rem;\n  overflow-x: auto;\n  padding: 0 clamp(.75rem, 2vw, 1.5rem);\n  scrollbar-width: none;\n}\n\n.nav-tabs::-webkit-scrollbar {\n  display: none;\n}\n\n.nav-button {\n  min-height: 2.95rem;\n  padding: 0 .85rem;\n  color: var(--muted);\n  border-radius: 0;\n  border-bottom: 2px solid transparent;\n  background: transparent;\n  white-space: nowrap;\n}\n\n.nav-button svg {\n  width: 1.02rem;\n  color: var(--quiet);\n}\n\n.nav-button:hover,\n.nav-button.active {\n  color: var(--brass-2);\n  border-bottom-color: var(--brass);\n}\n\n.nav-button.active svg {\n  color: var(--brass-2);\n}\n\n.workspace {\n  width: min(100%, 1840px);\n  margin: 0 auto;\n  padding: clamp(.8rem, 1.8vw, 1.35rem);\n}\n\n.overview-grid {\n  display: grid;\n  grid-template-columns: 17.5rem minmax(0, 1fr) 24rem;\n  gap: .85rem;\n  align-items: start;\n}\n\n.lineage-rail,\n.dossier-panel {\n  position: sticky;\n  top: 8.35rem;\n  align-self: start;\n}\n\n.lineage-rail {\n  min-height: calc(100vh - 9.75rem);\n  display: flex;\n  flex-direction: column;\n  border: 1px solid var(--hair);\n  background:\n    linear-gradient(180deg, color-mix(in oklch, var(--field) 90%, transparent), color-mix(in oklch, black 24%, transparent));\n  border-radius: 10px;\n  overflow: hidden;\n}\n\n.rail-head {\n  display: grid;\n  grid-template-columns: 2rem minmax(0, 1fr);\n  gap: .65rem;\n  align-items: center;\n  padding: .95rem .95rem .8rem;\n  border-bottom: 1px solid var(--hair);\n}\n\n.rail-head svg {\n  width: 1.4rem;\n  color: var(--brass-2);\n}\n\n.rail-head h2,\n.rail-head p {\n  margin: 0;\n}\n\n.rail-head h2 {\n  font-size: .98rem;\n  color: var(--ink);\n}\n\n.rail-head p {\n  margin-top: .15rem;\n  color: var(--quiet);\n  font-size: .8rem;\n}\n\n.rail-list {\n  overflow: auto;\n  padding: .35rem;\n}\n\n.rail-person {\n  width: 100%;\n  min-height: 3.35rem;\n  display: grid;\n  grid-template-columns: 2.2rem minmax(0, 1fr);\n  grid-template-areas: \"n name\" \"n years\";\n  align-items: center;\n  gap: 0 .55rem;\n  padding: .45rem .5rem;\n  border-radius: 8px;\n  color: var(--muted);\n  text-align: left;\n  background: transparent;\n}\n\n.rail-person span {\n  grid-area: n;\n  width: 1.9rem;\n  height: 1.9rem;\n  display: grid;\n  place-items: center;\n  color: var(--quiet);\n  border: 1px solid var(--hair);\n  border-radius: 50%;\n  font-size: .72rem;\n  font-variant-numeric: tabular-nums;\n}\n\n.rail-person strong {\n  grid-area: name;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: inherit;\n  font-size: .88rem;\n}\n\n.rail-person em {\n  grid-area: years;\n  color: var(--quiet);\n  font-size: .75rem;\n  font-style: normal;\n}\n\n.rail-person:hover,\n.rail-person.active {\n  color: var(--ink);\n  background: color-mix(in oklch, var(--sea) 14%, transparent);\n}\n\n.rail-person.active span {\n  color: var(--brass-2);\n  border-color: var(--brass);\n}\n\n.atlas-scene {\n  min-width: 0;\n  display: grid;\n  gap: .72rem;\n}\n\n.atlas-statusbar {\n  min-height: 2.9rem;\n  display: flex;\n  align-items: center;\n  gap: .45rem;\n  flex-wrap: wrap;\n}\n\n.atlas-statusbar span,\n.atlas-statusbar button {\n  min-height: 2.35rem;\n  display: inline-flex;\n  align-items: center;\n  gap: .42rem;\n  padding: 0 .7rem;\n  border: 1px solid var(--hair);\n  border-radius: 999px;\n  color: var(--muted);\n  background: color-mix(in oklch, black 16%, transparent);\n  font-size: .82rem;\n}\n\n.atlas-statusbar svg {\n  width: .96rem;\n  color: var(--sea);\n}\n\n.atlas-statusbar button {\n  color: var(--brass-2);\n  border-color: var(--line);\n}\n\n.atlas-canvas {\n  position: relative;\n  min-height: clamp(36rem, 66vh, 52rem);\n  overflow: hidden;\n  border: 1px solid color-mix(in oklch, var(--brass) 30%, var(--hair));\n  border-radius: 10px;\n  background:\n    linear-gradient(145deg, color-mix(in oklch, var(--sea) 9%, transparent), transparent 38%),\n    linear-gradient(25deg, color-mix(in oklch, var(--madder) 7%, transparent), transparent 44%),\n    linear-gradient(180deg, color-mix(in oklch, var(--field) 94%, transparent), color-mix(in oklch, black 18%, transparent));\n}\n\n.atlas-canvas::before {\n  content: \"\";\n  position: absolute;\n  inset: .7rem;\n  border: 1px solid color-mix(in oklch, var(--brass) 18%, transparent);\n  pointer-events: none;\n}\n\n.atlas-backdrop {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  color: var(--brass);\n  opacity: .38;\n  pointer-events: none;\n}\n\n.coastline {\n  stroke-dasharray: 1320;\n  stroke-dashoffset: 1320;\n  animation: drawCoast 1.45s cubic-bezier(.16, 1, .3, 1) forwards;\n}\n\n.map-title {\n  font-family: var(--font-display);\n  fill: color-mix(in oklch, var(--brass-2) 86%, transparent);\n  font-size: 36px;\n  letter-spacing: .1em;\n}\n\n.map-small,\n.map-axis {\n  fill: color-mix(in oklch, var(--brass-2) 76%, transparent);\n  font-size: 15px;\n}\n\n.map-axis {\n  fill: color-mix(in oklch, var(--muted) 62%, transparent);\n  font-size: 13px;\n  letter-spacing: .08em;\n}\n\n.map-points {\n  fill: currentColor;\n}\n\n.map-note {\n  position: absolute;\n  display: inline-flex;\n  align-items: center;\n  gap: .4rem;\n  min-height: 2.1rem;\n  padding: 0 .58rem;\n  color: var(--muted);\n  border: 1px solid var(--hair);\n  border-radius: 999px;\n  background: color-mix(in oklch, var(--void) 72%, transparent);\n  font-size: .78rem;\n  backdrop-filter: blur(8px);\n}\n\n.map-note svg {\n  width: .92rem;\n  color: var(--brass-2);\n}\n\n.top-left {\n  top: 1rem;\n  left: 1rem;\n}\n\n.bottom-right {\n  right: 1rem;\n  bottom: 1rem;\n}\n\n.family-route {\n  position: relative;\n  z-index: 2;\n  min-height: inherit;\n  display: grid;\n  grid-template-rows: auto 1fr auto auto;\n  align-content: center;\n  gap: 1.05rem;\n  padding: clamp(1rem, 3vw, 2rem);\n}\n\n.ancestor-strip {\n  display: flex;\n  justify-content: center;\n  gap: .42rem;\n  flex-wrap: wrap;\n}\n\n.route-chip {\n  min-height: 2.15rem;\n  display: inline-flex;\n  align-items: center;\n  gap: .38rem;\n  padding: 0 .58rem;\n  color: var(--muted);\n  border: 1px solid var(--hair);\n  border-radius: 999px;\n  background: color-mix(in oklch, black 20%, transparent);\n  font-size: .76rem;\n}\n\n.route-chip span {\n  color: var(--brass-2);\n  font-variant-numeric: tabular-nums;\n}\n\n.route-chip:hover,\n.route-chip.active {\n  color: var(--ink);\n  border-color: var(--brass);\n  background: color-mix(in oklch, var(--brass) 12%, transparent);\n}\n\n.couple-stage {\n  display: grid;\n  grid-template-columns: minmax(15rem, 24rem) 5.2rem minmax(15rem, 24rem);\n  gap: .7rem;\n  justify-content: center;\n  align-items: center;\n}\n\n.union-spine {\n  min-height: 8rem;\n  display: grid;\n  grid-template-rows: 1fr auto auto 1fr;\n  justify-items: center;\n  gap: .38rem;\n  color: var(--brass-2);\n}\n\n.union-spine span {\n  width: 1px;\n  min-height: 1.5rem;\n  background: linear-gradient(180deg, transparent, var(--brass), transparent);\n}\n\n.union-spine svg {\n  width: 2.3rem;\n  padding: .45rem;\n  border: 1px solid var(--brass);\n  border-radius: 50%;\n  background: color-mix(in oklch, black 28%, transparent);\n}\n\n.union-spine em {\n  font-style: normal;\n  color: var(--muted);\n  font-size: .78rem;\n  text-align: center;\n}\n\n.person-tile {\n  position: relative;\n  width: 100%;\n  min-height: 5rem;\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  gap: .78rem;\n  align-items: center;\n  padding: .72rem;\n  color: var(--ink);\n  text-align: left;\n  border: 1px solid color-mix(in oklch, var(--brass) 34%, var(--hair));\n  border-radius: 10px;\n  background:\n    linear-gradient(135deg, color-mix(in oklch, var(--sea) 10%, transparent), transparent 50%),\n    color-mix(in oklch, var(--field-2) 88%, transparent);\n}\n\n.person-tile::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  border-radius: inherit;\n  opacity: 0;\n  background: linear-gradient(115deg, transparent, color-mix(in oklch, var(--brass-2) 18%, transparent), transparent);\n  transition: opacity .18s ease;\n}\n\n.person-tile:hover,\n.person-tile.selected {\n  border-color: var(--brass-2);\n  transform: translateY(-1px);\n}\n\n.person-tile:hover::after,\n.person-tile.selected::after {\n  opacity: 1;\n}\n\n.person-tile.featured {\n  border-color: color-mix(in oklch, var(--sea) 58%, var(--brass));\n  background:\n    linear-gradient(135deg, color-mix(in oklch, var(--sea) 22%, transparent), transparent 55%),\n    color-mix(in oklch, var(--field) 90%, black 10%);\n}\n\n.person-tile.user-added {\n  border-color: color-mix(in oklch, var(--success) 70%, var(--brass));\n}\n\n.scale-hero {\n  min-height: 7.6rem;\n  padding: .92rem;\n}\n\n.scale-compact {\n  min-height: 4.35rem;\n}\n\n.portrait {\n  width: 3.85rem;\n  height: 3.85rem;\n  display: grid;\n  place-items: center;\n  border: 1px solid color-mix(in oklch, var(--brass-2) 38%, transparent);\n  border-radius: 8px;\n  color: var(--paper);\n  background:\n    linear-gradient(150deg, color-mix(in oklch, var(--brass) 24%, transparent), transparent),\n    linear-gradient(180deg, color-mix(in oklch, var(--paper-dark) 70%, black), oklch(0.16 0.032 220));\n  font-family: var(--font-display);\n  font-size: 1.16rem;\n  font-weight: 650;\n}\n\n.scale-hero .portrait {\n  width: 4.85rem;\n  height: 4.85rem;\n  font-size: 1.35rem;\n}\n\n.tile-copy {\n  min-width: 0;\n  display: grid;\n  gap: .22rem;\n}\n\n.tile-copy strong {\n  color: var(--brass-2);\n  font-family: var(--font-display);\n  font-size: 1.02rem;\n  line-height: 1.14;\n  overflow-wrap: anywhere;\n}\n\n.scale-hero .tile-copy strong {\n  font-size: 1.28rem;\n}\n\n.tile-copy span {\n  color: var(--muted);\n  font-size: .82rem;\n  line-height: 1.24;\n}\n\n.children-cluster,\n.continuation-cluster {\n  width: min(100%, 56rem);\n  display: grid;\n  gap: .48rem;\n  justify-self: center;\n}\n\n.children-cluster {\n  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));\n}\n\n.continuation-cluster {\n  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));\n}\n\n.cluster-label {\n  grid-column: 1 / -1;\n  display: inline-flex;\n  align-items: center;\n  gap: .38rem;\n  width: fit-content;\n  color: var(--quiet);\n  font-size: .78rem;\n}\n\n.cluster-label svg {\n  width: .92rem;\n  color: var(--brass-2);\n}\n\n.empty-tile {\n  min-height: 7.6rem;\n  display: grid;\n  place-items: center;\n  gap: .35rem;\n  color: var(--muted);\n  border: 1px dashed var(--line);\n  border-radius: 10px;\n  background: color-mix(in oklch, black 16%, transparent);\n}\n\n.empty-tile svg {\n  width: 1.4rem;\n  color: var(--brass-2);\n}\n\n.place-ribbon {\n  display: flex;\n  gap: .45rem;\n  flex-wrap: wrap;\n}\n\n.place-ribbon span {\n  padding: .45rem .6rem;\n  color: var(--muted);\n  border: 1px solid var(--hair);\n  border-radius: 8px;\n  background: color-mix(in oklch, black 14%, transparent);\n  font-size: .8rem;\n}\n\n.search-dock {\n  border: 1px solid color-mix(in oklch, var(--sea) 42%, var(--hair));\n  border-radius: 10px;\n  background: color-mix(in oklch, var(--field) 88%, black 12%);\n  overflow: hidden;\n}\n\n.search-dock-head {\n  display: flex;\n  align-items: center;\n  gap: .45rem;\n  min-height: 2.6rem;\n  padding: 0 .85rem;\n  color: var(--ink);\n  border-bottom: 1px solid var(--hair);\n}\n\n.search-dock-head svg {\n  width: 1rem;\n  color: var(--sea);\n}\n\n.search-dock-list {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));\n  gap: 1px;\n  background: var(--hair);\n}\n\n.search-dock-list button {\n  min-height: 3.2rem;\n  display: grid;\n  align-content: center;\n  gap: .15rem;\n  padding: .55rem .75rem;\n  color: var(--muted);\n  text-align: left;\n  background: var(--field-2);\n}\n\n.search-dock-list span {\n  color: var(--brass-2);\n  font-weight: 650;\n}\n\n.search-dock-list em {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-style: normal;\n  font-size: .78rem;\n}\n\n.dossier-panel {\n  color: var(--paper-ink);\n}\n\n.dossier-paper {\n  position: relative;\n  min-height: calc(100vh - 9.75rem);\n  padding: 1.05rem;\n  border: 1px solid color-mix(in oklch, var(--brass) 55%, black 10%);\n  border-radius: 10px;\n  overflow: hidden;\n  background:\n    linear-gradient(150deg, color-mix(in oklch, var(--madder) 8%, transparent), transparent 45%),\n    linear-gradient(180deg, var(--paper), oklch(0.77 0.04 78));\n  box-shadow: var(--shadow);\n}\n\n.dossier-paper::before {\n  content: \"\";\n  position: absolute;\n  inset: .55rem;\n  border: 1px solid color-mix(in oklch, var(--paper-ink) 22%, transparent);\n  pointer-events: none;\n}\n\n.dossier-paper::after {\n  content: \"\";\n  position: absolute;\n  right: -1.5rem;\n  bottom: -1rem;\n  width: 12rem;\n  height: 12rem;\n  opacity: .26;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%238b6334' stroke-width='2'%3E%3Cpath d='M80 8v144M8 80h144'/%3E%3Ccircle cx='80' cy='80' r='42'/%3E%3Cpath d='M42 42c30 7 47 28 76 76M118 42c-30 7-47 28-76 76'/%3E%3C/g%3E%3C/svg%3E\");\n}\n\n.dossier-stamp {\n  position: relative;\n  z-index: 1;\n  width: fit-content;\n  display: inline-flex;\n  align-items: center;\n  gap: .38rem;\n  color: color-mix(in oklch, var(--paper-ink) 70%, transparent);\n  border: 1px solid color-mix(in oklch, var(--paper-ink) 22%, transparent);\n  padding: .32rem .48rem;\n  font-size: .78rem;\n}\n\n.dossier-stamp svg {\n  width: .88rem;\n}\n\n.dossier-head {\n  position: relative;\n  z-index: 1;\n  display: grid;\n  grid-template-columns: 5.2rem minmax(0, 1fr);\n  gap: .85rem;\n  align-items: start;\n  margin-top: 1.05rem;\n}\n\n.paper-portrait {\n  width: 5.2rem;\n  height: 5.2rem;\n  border-color: color-mix(in oklch, var(--paper-ink) 30%, transparent);\n}\n\n.dossier-head h2 {\n  margin: 0;\n  color: var(--paper-ink);\n  font-family: var(--font-display);\n  font-size: 1.55rem;\n  line-height: 1.08;\n  letter-spacing: 0;\n  text-wrap: balance;\n}\n\n.dossier-head p {\n  margin: .35rem 0 0;\n  line-height: 1.35;\n}\n\n.dossier-facts {\n  position: relative;\n  z-index: 1;\n  display: grid;\n  gap: .82rem;\n  margin-top: 1.35rem;\n}\n\n.fact-row {\n  display: grid;\n  grid-template-columns: 1.35rem minmax(0, 1fr);\n  gap: .65rem;\n  align-items: start;\n  padding-top: .82rem;\n  border-top: 1px solid color-mix(in oklch, var(--paper-ink) 17%, transparent);\n}\n\n.fact-row:first-child {\n  border-top: 0;\n  padding-top: 0;\n}\n\n.fact-row > svg {\n  width: 1.08rem;\n  margin-top: .15rem;\n  color: color-mix(in oklch, var(--madder) 68%, var(--paper-ink));\n}\n\n.fact-row strong {\n  display: block;\n  margin-bottom: .18rem;\n}\n\n.fact-row span {\n  line-height: 1.45;\n}\n\n.fact-line {\n  display: block;\n}\n\n.dossier-action {\n  position: relative;\n  z-index: 1;\n  width: 100%;\n  min-height: 2.75rem;\n  margin-top: 1.35rem;\n  color: var(--paper);\n  border-radius: 8px;\n  background: var(--paper-dark);\n}\n\n.dossier-action svg {\n  width: 1rem;\n}\n\n.dossier-action:hover {\n  transform: translateY(-1px);\n  background: color-mix(in oklch, var(--paper-dark) 82%, black);\n}\n\n.archive-page {\n  min-height: calc(100vh - 8.8rem);\n  border: 1px solid var(--hair);\n  border-radius: 10px;\n  background:\n    linear-gradient(135deg, color-mix(in oklch, var(--sea) 8%, transparent), transparent 48%),\n    color-mix(in oklch, var(--field) 90%, black 10%);\n  overflow: hidden;\n}\n\n.page-heading {\n  min-height: 6.8rem;\n  display: grid;\n  grid-template-columns: 3.2rem minmax(0, 1fr);\n  gap: .85rem;\n  align-items: center;\n  padding: clamp(1rem, 2.5vw, 1.6rem);\n  border-bottom: 1px solid var(--hair);\n}\n\n.page-heading > span {\n  width: 3.2rem;\n  height: 3.2rem;\n  display: grid;\n  place-items: center;\n  color: var(--brass-2);\n  border: 1px solid var(--line);\n  border-radius: 8px;\n  background: color-mix(in oklch, black 18%, transparent);\n}\n\n.page-heading svg {\n  width: 1.55rem;\n}\n\n.page-heading h2 {\n  margin: 0;\n  color: var(--brass-2);\n  font-family: var(--font-display);\n  font-size: clamp(1.6rem, 3vw, 2.55rem);\n  letter-spacing: 0;\n}\n\n.page-heading p {\n  max-width: 65ch;\n  margin: .25rem 0 0;\n  color: var(--muted);\n  line-height: 1.45;\n}\n\n.record-list,\n.timeline-list,\n.place-board,\n.source-list {\n  padding: clamp(.8rem, 1.8vw, 1.35rem);\n}\n\n.record-list {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));\n  gap: .55rem;\n}\n\n.record-button {\n  min-height: 5.1rem;\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr) 1rem;\n  align-items: center;\n  gap: .75rem;\n  padding: .65rem .72rem;\n  color: var(--muted);\n  text-align: left;\n  border: 1px solid var(--hair);\n  border-radius: 9px;\n  background: color-mix(in oklch, black 13%, transparent);\n}\n\n.record-button strong,\n.record-button em {\n  display: block;\n}\n\n.record-button strong {\n  color: var(--brass-2);\n}\n\n.record-button em {\n  margin-top: .22rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--quiet);\n  font-size: .82rem;\n  font-style: normal;\n}\n\n.record-button > svg {\n  width: 1rem;\n  color: var(--quiet);\n}\n\n.record-button:hover {\n  border-color: var(--brass);\n  background: color-mix(in oklch, var(--brass) 9%, transparent);\n}\n\n.timeline-list {\n  display: grid;\n  gap: 1px;\n  background: var(--hair);\n}\n\n.timeline-list button {\n  min-height: 4rem;\n  display: grid;\n  grid-template-columns: 5.8rem minmax(0, 1fr);\n  gap: .85rem;\n  align-items: center;\n  padding: .65rem .85rem;\n  color: var(--muted);\n  text-align: left;\n  background: var(--field-2);\n}\n\n.timeline-list time {\n  color: var(--brass-2);\n  font-variant-numeric: tabular-nums;\n  font-weight: 720;\n}\n\n.timeline-list strong,\n.timeline-list em {\n  display: block;\n}\n\n.timeline-list strong {\n  color: var(--ink);\n}\n\n.timeline-list em {\n  color: var(--quiet);\n  font-size: .84rem;\n  font-style: normal;\n}\n\n.place-board {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));\n  gap: .55rem;\n}\n\n.place-board article {\n  min-height: 8rem;\n  display: grid;\n  align-content: end;\n  gap: .38rem;\n  padding: .9rem;\n  border: 1px solid var(--hair);\n  border-radius: 9px;\n  background:\n    linear-gradient(145deg, color-mix(in oklch, var(--sea) 12%, transparent), transparent 55%),\n    color-mix(in oklch, black 13%, transparent);\n}\n\n.place-board svg {\n  width: 1.1rem;\n  color: var(--sea);\n}\n\n.place-board strong {\n  color: var(--brass-2);\n}\n\n.place-board span {\n  color: var(--quiet);\n  font-size: .84rem;\n}\n\n.source-list {\n  display: grid;\n  gap: .65rem;\n}\n\n.source-list article {\n  display: grid;\n  grid-template-columns: 2.3rem minmax(0, 1fr);\n  gap: .8rem;\n  padding: .9rem;\n  border: 1px solid var(--hair);\n  border-radius: 9px;\n  background: color-mix(in oklch, black 13%, transparent);\n}\n\n.source-list article > svg {\n  width: 1.3rem;\n  color: var(--brass-2);\n}\n\n.source-list h3 {\n  margin: 0 0 .3rem;\n  color: var(--ink);\n}\n\n.source-list p {\n  margin: 0 0 .55rem;\n  color: var(--muted);\n  line-height: 1.45;\n}\n\n.source-list a {\n  display: inline-flex;\n  align-items: center;\n  gap: .35rem;\n  color: var(--brass-2);\n}\n\n.source-list a svg {\n  width: .95rem;\n}\n\n.source-note {\n  display: inline-flex;\n  align-items: center;\n  gap: .35rem;\n  margin: .85rem clamp(.8rem, 1.8vw, 1.35rem) 1.35rem;\n  color: var(--quiet);\n  font-size: .86rem;\n}\n\n.source-note svg {\n  width: .95rem;\n}\n\n.manage-grid {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 21rem;\n  gap: .85rem;\n  padding: clamp(.8rem, 1.8vw, 1.35rem);\n}\n\n.entry-form {\n  border: 1px solid var(--hair);\n  border-radius: 10px;\n  background: color-mix(in oklch, black 12%, transparent);\n  overflow: hidden;\n}\n\n.form-strip {\n  min-height: 4.4rem;\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  grid-template-areas: \"tag title\" \"tag meta\";\n  gap: .18rem .75rem;\n  align-items: center;\n  padding: .75rem .9rem;\n  border-bottom: 1px solid var(--hair);\n  background: linear-gradient(90deg, color-mix(in oklch, var(--sea) 13%, transparent), transparent);\n}\n\n.form-strip span {\n  grid-area: tag;\n  display: inline-flex;\n  align-items: center;\n  gap: .36rem;\n  padding: .35rem .5rem;\n  color: var(--sea);\n  border: 1px solid color-mix(in oklch, var(--sea) 42%, transparent);\n  border-radius: 999px;\n  font-size: .76rem;\n}\n\n.form-strip svg {\n  width: .88rem;\n}\n\n.form-strip strong {\n  grid-area: title;\n  color: var(--brass-2);\n}\n\n.form-strip em {\n  grid-area: meta;\n  color: var(--quiet);\n  font-style: normal;\n  font-size: .84rem;\n}\n\n.form-grid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: .75rem;\n  padding: .9rem;\n}\n\n.field {\n  display: grid;\n  gap: .34rem;\n  min-width: 0;\n}\n\n.field.full {\n  grid-column: 1 / -1;\n}\n\n.field span {\n  color: var(--muted);\n  font-size: .82rem;\n}\n\n.field input,\n.field select,\n.field textarea {\n  width: 100%;\n  min-height: 2.7rem;\n  border: 1px solid color-mix(in oklch, var(--sea) 24%, var(--hair));\n  border-radius: 8px;\n  outline: none;\n  color: var(--ink);\n  background: color-mix(in oklch, black 20%, transparent);\n  padding: .68rem .72rem;\n}\n\n.field textarea {\n  min-height: 6rem;\n  resize: vertical;\n}\n\n.field input::placeholder,\n.field textarea::placeholder {\n  color: color-mix(in oklch, var(--quiet) 76%, black);\n}\n\n.field input:focus,\n.field select:focus,\n.field textarea:focus {\n  border-color: var(--sea);\n  box-shadow: var(--focus);\n}\n\n.form-actions {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: .68rem;\n  padding: 0 .9rem .9rem;\n}\n\n.message {\n  display: inline-flex;\n  align-items: center;\n  gap: .35rem;\n  color: var(--success);\n  font-size: .86rem;\n}\n\n.message svg {\n  width: .9rem;\n}\n\n.message.error {\n  color: var(--danger);\n}\n\n.auth-note {\n  min-height: 16rem;\n  padding: .95rem;\n  border: 1px solid var(--hair);\n  border-radius: 10px;\n  background:\n    linear-gradient(145deg, color-mix(in oklch, var(--madder) 10%, transparent), transparent 48%),\n    color-mix(in oklch, black 12%, transparent);\n}\n\n.auth-note > svg {\n  width: 1.45rem;\n  color: var(--brass-2);\n}\n\n.auth-note h3 {\n  margin: .75rem 0 .45rem;\n  color: var(--ink);\n}\n\n.auth-note p {\n  color: var(--muted);\n  line-height: 1.5;\n}\n\n.entry-drawer-shell {\n  position: fixed;\n  inset: 0;\n  z-index: 80;\n  pointer-events: none;\n}\n\n.entry-drawer-shell.open {\n  pointer-events: auto;\n}\n\n.drawer-scrim {\n  position: absolute;\n  inset: 0;\n  opacity: 0;\n  background: color-mix(in oklch, black 42%, transparent);\n  transition: opacity .2s ease;\n}\n\n.entry-drawer-shell.open .drawer-scrim {\n  opacity: 1;\n}\n\n.entry-drawer {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: min(100%, 38rem);\n  height: 100%;\n  overflow: auto;\n  color: var(--ink);\n  border-left: 1px solid var(--line);\n  background:\n    linear-gradient(180deg, color-mix(in oklch, var(--basin-2) 95%, black), var(--void));\n  box-shadow: -16px 0 36px color-mix(in oklch, black 44%, transparent);\n  transform: translateX(105%);\n  transition: transform .24s cubic-bezier(.16, 1, .3, 1);\n}\n\n.entry-drawer-shell.open .entry-drawer {\n  transform: translateX(0);\n}\n\n.drawer-head {\n  min-height: 5.8rem;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: .9rem;\n  padding: 1rem;\n  border-bottom: 1px solid var(--hair);\n}\n\n.drawer-head p,\n.drawer-head h2 {\n  margin: 0;\n}\n\n.drawer-head h2 {\n  color: var(--brass-2);\n  font-family: var(--font-display);\n  font-size: 2rem;\n}\n\n.drawer-head p {\n  margin-top: .28rem;\n  color: var(--muted);\n  font-size: .9rem;\n}\n\n.entry-drawer .entry-form {\n  margin: 1rem;\n}\n\n.login-screen {\n  min-height: 100vh;\n  display: grid;\n  place-items: center;\n  padding: 1rem;\n}\n\n.login-card {\n  width: min(100%, 68rem);\n  min-height: min(42rem, calc(100vh - 2rem));\n  display: grid;\n  grid-template-columns: minmax(0, 1.15fr) minmax(20rem, .85fr);\n  overflow: hidden;\n  border: 1px solid var(--line);\n  border-radius: 12px;\n  background: color-mix(in oklch, var(--field) 92%, black 8%);\n  box-shadow: var(--shadow);\n}\n\n.login-atlas {\n  position: relative;\n  min-height: 32rem;\n  overflow: hidden;\n  background:\n    linear-gradient(145deg, color-mix(in oklch, var(--sea) 10%, transparent), transparent),\n    color-mix(in oklch, black 10%, transparent);\n}\n\n.login-atlas .atlas-backdrop {\n  opacity: .5;\n}\n\n.login-brand {\n  position: relative;\n  z-index: 1;\n  width: min(100%, 39rem);\n  padding: clamp(1.4rem, 4vw, 3rem);\n}\n\n.login-brand h1 {\n  margin: 0;\n  color: var(--brass-2);\n  font-family: var(--font-display);\n  font-size: clamp(2.5rem, 7vw, 5.25rem);\n  line-height: .94;\n  letter-spacing: 0;\n  text-wrap: balance;\n}\n\n.login-brand p:last-child {\n  max-width: 34rem;\n  margin: 1rem 0 0;\n  color: var(--muted);\n  line-height: 1.55;\n  font-size: 1.02rem;\n}\n\n.login-form {\n  display: grid;\n  align-content: center;\n  gap: .78rem;\n  padding: clamp(1.1rem, 3vw, 2rem);\n  border-left: 1px solid var(--hair);\n  background: color-mix(in oklch, black 13%, transparent);\n}\n\n.login-form h2 {\n  margin: 0 0 .35rem;\n  color: var(--ink);\n  font-family: var(--font-display);\n  font-size: 2rem;\n}\n\n.loading-screen {\n  min-height: 100vh;\n  display: grid;\n  place-items: center;\n}\n\n.spinner {\n  width: 2.7rem;\n  height: 2.7rem;\n  border: 2px solid color-mix(in oklch, var(--brass) 22%, transparent);\n  border-top-color: var(--brass-2);\n  border-radius: 50%;\n  animation: spin .85s linear infinite;\n}\n\n@keyframes spin {\n  to { transform: rotate(360deg); }\n}\n\n@keyframes drawCoast {\n  to { stroke-dashoffset: 0; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    animation-duration: .01ms !important;\n    transition-duration: .01ms !important;\n    scroll-behavior: auto !important;\n  }\n\n  .coastline {\n    stroke-dashoffset: 0;\n  }\n}\n\n@media (max-width: 1260px) {\n  .overview-grid {\n    grid-template-columns: 16rem minmax(0, 1fr);\n  }\n\n  .dossier-panel {\n    grid-column: 1 / -1;\n    position: relative;\n    top: auto;\n  }\n\n  .dossier-paper {\n    min-height: 0;\n  }\n}\n\n@media (max-width: 1020px) {\n  .header-main {\n    grid-template-columns: minmax(0, 1fr);\n  }\n\n  .header-actions {\n    justify-content: space-between;\n  }\n\n  .overview-grid {\n    grid-template-columns: minmax(0, 1fr);\n  }\n\n  .lineage-rail {\n    position: relative;\n    top: auto;\n    min-height: 0;\n  }\n\n  .rail-list {\n    display: flex;\n    overflow-x: auto;\n    padding: .55rem;\n  }\n\n  .rail-person {\n    width: 14rem;\n    flex: 0 0 14rem;\n  }\n\n  .couple-stage {\n    grid-template-columns: minmax(0, 1fr);\n  }\n\n  .union-spine {\n    min-height: 3rem;\n    grid-template-rows: auto;\n    grid-template-columns: 1fr auto auto 1fr;\n    align-items: center;\n  }\n\n  .union-spine span {\n    width: 100%;\n    height: 1px;\n    min-height: 1px;\n    background: linear-gradient(90deg, transparent, var(--brass), transparent);\n  }\n\n  .manage-grid,\n  .login-card {\n    grid-template-columns: 1fr;\n  }\n\n  .login-form {\n    border-left: 0;\n    border-top: 1px solid var(--hair);\n  }\n}\n\n@media (max-width: 680px) {\n  .workspace {\n    padding: .65rem;\n  }\n\n  .brand-lockup strong {\n    font-size: 1.22rem;\n  }\n\n  .brand-lockup em {\n    font-size: .78rem;\n  }\n\n  .crest {\n    width: 2.55rem;\n    height: 2.55rem;\n  }\n\n  .header-actions {\n    align-items: stretch;\n    flex-direction: column;\n  }\n\n  .user-box {\n    justify-content: space-between;\n  }\n\n  .nav-button {\n    padding-inline: .65rem;\n  }\n\n  .atlas-statusbar {\n    gap: .35rem;\n  }\n\n  .atlas-statusbar span,\n  .atlas-statusbar button {\n    min-height: 2.15rem;\n    font-size: .75rem;\n  }\n\n  .atlas-canvas {\n    min-height: 0;\n  }\n\n  .family-route {\n    padding: .75rem;\n  }\n\n  .map-note {\n    position: relative;\n    inset: auto;\n    margin: .5rem;\n    width: fit-content;\n  }\n\n  .top-left,\n  .bottom-right {\n    top: auto;\n    right: auto;\n    bottom: auto;\n    left: auto;\n  }\n\n  .children-cluster,\n  .continuation-cluster,\n  .record-list,\n  .place-board {\n    grid-template-columns: 1fr;\n  }\n\n  .person-tile,\n  .record-button {\n    grid-template-columns: auto minmax(0, 1fr);\n  }\n\n  .record-button > svg {\n    display: none;\n  }\n\n  .scale-hero .portrait,\n  .portrait {\n    width: 3.6rem;\n    height: 3.6rem;\n  }\n\n  .dossier-head {\n    grid-template-columns: 1fr;\n  }\n\n  .paper-portrait {\n    width: 4.4rem;\n    height: 4.4rem;\n  }\n\n  .form-grid {\n    grid-template-columns: 1fr;\n  }\n\n  .form-strip {\n    grid-template-columns: 1fr;\n    grid-template-areas: \"tag\" \"title\" \"meta\";\n  }\n\n  .entry-drawer {\n    width: 100%;\n  }\n\n  .login-card {\n    min-height: 0;\n  }\n\n  .login-brand h1 {\n    font-size: 2.55rem;\n  }\n}\n",[120,197],"c094f00e701cced6d61c888b5bdce99a56ca7a05aa07ee96cb95fe11bdcb3efc",["D",1783283017517],"legacyEnvVars","httpPrivacy","description","De Visser family tree with auth and editing","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789577999&sig=2ab81189fced4fb576e9436da67acbaf730951eef80212e8dc3c2bf0f6be2f57","userId","d4de366f-8281-484e-8856-3824b6bdfb0b","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","9bb2e2b6-8aa1-4b6a-b4ef-ad7adab2b868","tursoName","7e11a53e55664d87977d91b5f4b38580","tursoHostname","7e11a53e55664d87977d91b5f4b38580-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789523429989],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_247":243},"org",{"_11":12,"_240":241,"_242":243,"_211":212,"_244":245,"_246":48},"branch","displayName","slimarmor","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ybFJkNm8zSzFzbGE5RzhsTUt3OGJMZFdGZFkifQ","tier","pro","canRestrictVals","profileImageUrl","","adoptOrgId",{"_32":59,"_13":14,"_34":343,"_46":-5,"_205":48,"_49":50,"_206":50,"_207":208,"_209":210,"_211":212,"_213":82,"_214":26,"_215":-5,"_216":-5,"_217":179,"_53":218,"_219":220,"_221":222,"_223":344,"_225":-5,"_226":227,"_228":227,"_229":230,"_231":230,"_232":230,"_233":227,"_234":227,"_235":345,"_237":346,"_239":347,"_47":48},"tree",[300,307,308,309],"files",[300,301,302,303,304,305,306,307,308,309],"counts",{"_290":179,"_291":160,"_292":179,"_293":294,"_295":296},"contents",[276,277,278,279],"upstreamProject",{"_32":39,"_13":56,"_207":273,"_209":210,"_49":50,"_235":274},"upstreamBranch",{"_32":33,"_34":271,"_36":272,"_13":16,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],["D",1785420707976],"Starter template with client-side React & Hono server",{"_11":52,"_247":275},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789577999&sig=aa7aec25480c67f41f9650e8445afc21cf1a6c5fd3969752b90fbd3f6a604c46",{"_32":286,"_13":120,"_81":112,"_83":-5,"_84":58,"_85":160,"_86":26,"_34":287,"_40":179,"_89":288,"_91":-5,"_66":48,"_93":-5,"_74":289},{"_32":156,"_13":153,"_81":157,"_83":-5,"_84":58,"_85":158,"_86":26,"_34":284,"_40":160,"_89":116,"_91":161,"_66":48,"_93":-5,"_74":285},{"_32":80,"_13":75,"_81":82,"_83":-5,"_84":58,"_85":57,"_86":26,"_34":282,"_40":88,"_89":90,"_91":92,"_66":48,"_93":-5,"_74":283},{"_32":187,"_13":185,"_81":188,"_83":-5,"_84":58,"_85":189,"_86":26,"_34":280,"_40":160,"_89":140,"_91":191,"_66":48,"_93":-5,"_74":281},["D",1783283838121],[185],["D",1789164667275],[75],["D",1789164639003],[153],"eb078953-a605-44f4-ac33-572b7401271f",["D",1783283017517],"directory",[120],"pulls","branches","forks","envVars",{"_297":22,"_299":179},"connections",{"_297":179,"_298":179},"count","unfilledCount","emptyCount",{"_32":286,"_13":120,"_81":112,"_83":-5,"_84":58,"_85":160,"_86":26,"_34":340,"_40":179,"_89":288,"_91":-5,"_66":48,"_93":-5,"_94":341,"_74":342},{"_32":336,"_13":144,"_81":136,"_83":112,"_84":58,"_85":160,"_86":26,"_34":337,"_40":179,"_89":288,"_91":-5,"_66":48,"_93":-5,"_94":338,"_74":339},{"_32":133,"_13":134,"_81":135,"_83":136,"_84":58,"_85":137,"_86":26,"_34":138,"_40":139,"_89":140,"_91":141,"_66":48,"_93":-5,"_94":334,"_74":335},{"_32":327,"_13":328,"_81":329,"_83":112,"_84":58,"_85":160,"_86":26,"_34":330,"_40":179,"_89":116,"_91":331,"_66":48,"_93":-5,"_94":332,"_74":333},{"_32":109,"_13":110,"_81":111,"_83":112,"_84":58,"_85":113,"_86":26,"_34":114,"_40":115,"_89":116,"_91":117,"_66":48,"_93":-5,"_94":325,"_74":326},{"_32":318,"_13":319,"_81":320,"_83":112,"_84":58,"_85":160,"_86":26,"_34":321,"_40":179,"_89":140,"_91":322,"_66":48,"_93":-5,"_94":323,"_74":324},{"_32":196,"_13":197,"_81":198,"_83":112,"_84":58,"_85":199,"_86":26,"_34":200,"_40":189,"_89":116,"_91":201,"_66":48,"_93":-5,"_94":316,"_74":317},{"_32":156,"_13":153,"_81":157,"_83":-5,"_84":58,"_85":158,"_86":26,"_34":159,"_40":160,"_89":116,"_91":161,"_66":48,"_93":-5,"_94":314,"_74":315},{"_32":80,"_13":75,"_81":82,"_83":-5,"_84":58,"_85":57,"_86":26,"_34":87,"_40":88,"_89":90,"_91":92,"_66":48,"_93":-5,"_94":312,"_74":313},{"_32":187,"_13":185,"_81":188,"_83":-5,"_84":58,"_85":189,"_86":26,"_34":190,"_40":160,"_89":140,"_91":191,"_66":48,"_93":-5,"_94":310,"_74":311},[],[185],[],[75],[],[153],[],[120,197],"19b817ac-706f-4dcf-b282-c7cb8435fd9c","index.tsx","019f33f3-6797-71df-9472-d2bf1e8e146f",["D",1783283017517],"/** @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) {\n  throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render(<App />);",[],[120,319],[],[120,110],"70d37630-680d-493e-b6c5-65f4a12080db","favicon.svg","019f33f3-6797-71df-9472-cbdac40c5906",["D",1783283017517],"<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\">\n  <rect x=\"4\" y=\"4\" width=\"24\" height=\"24\" rx=\"6\" fill=\"#4a90e2\" />\n  <circle cx=\"16\" cy=\"16\" r=\"8\" fill=\"#ffffff\" opacity=\"0.3\" />\n</svg>",[],[120,328],[],[120,144,134],"eccae7a2-0ce4-448b-a356-b12e9f2180d8",["D",1783283017517],[302],[120,144],["D",1783283017517],[301,303,304,305,306],[120],["D",1783283017517],["D",1789523429989],{"_11":12,"_247":243},{"_11":12,"_240":241,"_242":243,"_211":212,"_244":245,"_246":48},{"_40":57,"_13":16,"_32":58,"_38":59,"_42":33,"_43":60,"_61":50,"_62":39,"_63":54,"_55":14,"_51":12},"ctx",{"_235":-5,"_268":381,"_382":383,"_384":385,"_386":48,"_387":48,"_388":48,"_389":26,"_390":-5,"_391":-7,"_392":-7,"_393":179,"_394":48,"_395":48,"_396":-5,"_397":48,"_398":48,"_399":48,"_400":-5},"ENV",{"_352":353,"_354":355,"_356":16,"_357":358,"_359":360,"_361":362,"_363":364,"_365":366,"_367":368,"_369":370,"_371":372,"_373":374,"_375":376,"_377":378,"_379":380},"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>

Compare

Mergekamenxrider/mainintotemplates/main

README.md+22-50

frontend/components/App.tsx+724-7

frontend/index.html+10-7

Hindex.ts+374-12

frontend/styles.css+1770-0

seed.ts+37-0

frontend/components/Counter.tsx+0-18