\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",[347,247,93],"pulls","branches","forks","envVars",{"_100":101,"_361":26},"connections",{"_100":26,"_360":26},"unfilledCount","emptyCount",{"_52":434,"_13":347,"_91":340,"_62":-5,"_54":55,"_341":59,"_342":24,"_56":435,"_58":26,"_94":248,"_344":-5,"_96":30,"_345":-5,"_378":436,"_17":437},{"_52":339,"_13":247,"_91":246,"_62":340,"_54":55,"_341":59,"_342":24,"_56":431,"_58":26,"_94":248,"_344":-5,"_96":30,"_345":-5,"_378":432,"_17":433},{"_52":349,"_13":93,"_91":92,"_62":246,"_54":55,"_341":233,"_342":24,"_56":428,"_58":186,"_94":95,"_344":351,"_96":30,"_345":-5,"_378":429,"_17":430},{"_52":421,"_13":422,"_91":423,"_62":340,"_54":55,"_341":59,"_342":24,"_56":424,"_58":26,"_94":21,"_344":425,"_96":30,"_345":-5,"_378":426,"_17":427},{"_52":412,"_13":413,"_91":414,"_62":340,"_54":55,"_341":415,"_342":24,"_56":416,"_58":417,"_94":21,"_344":418,"_96":30,"_345":-5,"_378":419,"_17":420},{"_52":405,"_13":406,"_91":407,"_62":340,"_54":55,"_341":59,"_342":24,"_56":408,"_58":26,"_94":95,"_344":409,"_96":30,"_345":-5,"_378":410,"_17":411},{"_52":397,"_13":398,"_91":399,"_62":340,"_54":55,"_341":400,"_342":24,"_56":401,"_58":375,"_94":21,"_344":402,"_96":30,"_345":-5,"_378":403,"_17":404},{"_52":389,"_13":390,"_91":391,"_62":-5,"_54":55,"_341":392,"_342":24,"_56":393,"_58":59,"_94":21,"_344":394,"_96":30,"_345":-5,"_378":395,"_17":396},{"_52":381,"_13":382,"_91":261,"_62":-5,"_54":55,"_341":288,"_342":24,"_56":383,"_58":384,"_94":385,"_344":386,"_96":30,"_345":-5,"_378":387,"_17":388},{"_52":372,"_13":373,"_91":374,"_62":-5,"_54":55,"_341":375,"_342":24,"_56":376,"_58":59,"_94":95,"_344":377,"_96":30,"_345":-5,"_378":379,"_17":380},"5e4e9f11-34c6-4a3d-9a4d-2e43cff0444f","seed.ts","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","children",[],[373],"e8562739-0ba9-44ae-b251-9656e56e1c79","index.ts",["D",1789164667275],5,"http","import { parseVal, serveImmutableFile, immutableFileUrl } from \"https://esm.town/v/std/utils@285-main/index.ts\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { Hono } from \"npm:hono\";\nimport { seedPeople, seedRelationships, seedSources } from \"./seed.ts\";\n\ntype UserRecord = {\n  displayName: string;\n  role: string;\n  salt: string;\n  hash: string;\n};\n\ntype SessionUser = {\n  username: string;\n  displayName: string;\n  role: string;\n  exp: number;\n};\n\nconst app = new Hono();\nconst encoder = new TextEncoder();\nconst sessionCookie = \"dv_session\";\nconst oneWeek = 60 * 60 * 24 * 7;\n\nfunction json(body: unknown, status = 200, headers: Record<string, string> = {}) {\n  return new Response(JSON.stringify(body), {\n    status,\n    headers: {\n      \"content-type\": \"application/json; charset=utf-8\",\n      ...headers,\n    },\n  });\n}\n\nfunction getAuthUsers(): Record<string, UserRecord> {\n  const raw = Deno.env.get(\"AUTH_USERS_JSON\");\n  if (!raw) return {};\n  try {\n    return JSON.parse(raw) as Record<string, UserRecord>;\n  } catch (_error) {\n    return {};\n  }\n}\n\nfunction getSessionSecret() {\n  return Deno.env.get(\"SESSION_SECRET\") || \"dev-only-change-me\";\n}\n\nfunction base64Url(bytes: Uint8Array) {\n  let binary = \"\";\n  for (const byte of bytes) binary += String.fromCharCode(byte);\n  return btoa(binary).replaceAll(\"+\", \"-\").replaceAll(\"/\", \"_\").replaceAll(\"=\", \"\");\n}\n\nfunction base64UrlToBytes(value: string) {\n  const padded = value.replaceAll(\"-\", \"+\").replaceAll(\"_\", \"/\") + \"===\".slice((value.length + 3) % 4);\n  const binary = atob(padded);\n  const bytes = new Uint8Array(binary.length);\n  for (let i = 0; i < binary.length; i += 1) bytes[i] = binary.charCodeAt(i);\n  return bytes;\n}\n\nasync function sha256Hex(value: string) {\n  const digest = await crypto.subtle.digest(\"SHA-256\", encoder.encode(value));\n  return Array.from(new Uint8Array(digest)).map((byte) => byte.toString(16).padStart(2, \"0\")).join(\"\");\n}\n\nasync function hmac(value: string) {\n  const key = await crypto.subtle.importKey(\n    \"raw\",\n    encoder.encode(getSessionSecret()),\n    { name: \"HMAC\", hash: \"SHA-256\" },\n    false,\n    [\"sign\"],\n  );\n  const signature = await crypto.subtle.sign(\"HMAC\", key, encoder.encode(value));\n  return base64Url(new Uint8Array(signature));\n}\n\nfunction constantTimeEqual(a: string, b: string) {\n  if (a.length !== b.length) return false;\n  let result = 0;\n  for (let i = 0; i < a.length; i += 1) result |= a.charCodeAt(i) ^ b.charCodeAt(i);\n  return result === 0;\n}\n\nfunction parseCookies(req: Request) {\n  const header = req.headers.get(\"cookie\") || \"\";\n  const cookies = new Map<string, string>();\n  for (const part of header.split(\";\")) {\n    const [name, ...rest] = part.trim().split(\"=\");\n    if (name) cookies.set(name, rest.join(\"=\"));\n  }\n  return cookies;\n}\n\nasync function createSession(user: SessionUser) {\n  const payload = base64Url(encoder.encode(JSON.stringify(user)));\n  const signature = await hmac(payload);\n  return `${payload}.${signature}`;\n}\n\nasync function readSession(req: Request): Promise<SessionUser | null> {\n  const token = parseCookies(req).get(sessionCookie);\n  if (!token || !token.includes(\".\")) return null;\n  const [payload, signature] = token.split(\".\");\n  const expected = await hmac(payload);\n  if (!constantTimeEqual(signature, expected)) return null;\n  try {\n    const user = JSON.parse(new TextDecoder().decode(base64UrlToBytes(payload))) as SessionUser;\n    if (!user.exp || user.exp < Date.now()) return null;\n    return user;\n  } catch (_error) {\n    return null;\n  }\n}\n\nasync function requireUser(req: Request) {\n  const user = await readSession(req);\n  if (!user) return null;\n  return user;\n}\n\nfunction sessionCookieHeader(token: string) {\n  return `${sessionCookie}=${token}; Path=/; HttpOnly; Secure; SameSite=Lax; Max-Age=${oneWeek}`;\n}\n\nfunction clearCookieHeader() {\n  return `${sessionCookie}=; Path=/; HttpOnly; Secure; SameSite=Lax; Max-Age=0`;\n}\n\nasync function initDb() {\n  await sqlite.batch([\n    {\n      sql: `CREATE TABLE IF NOT EXISTS people (\n        id TEXT PRIMARY KEY,\n        name TEXT NOT NULL,\n        display_name TEXT,\n        gender TEXT,\n        birth_date TEXT,\n        birth_place TEXT,\n        death_date TEXT,\n        death_place TEXT,\n        occupation TEXT,\n        notes TEXT,\n        tags TEXT,\n        lineage_order INTEGER,\n        created_at TEXT DEFAULT CURRENT_TIMESTAMP\n      )`,\n      args: [],\n    },\n    {\n      sql: `CREATE TABLE IF NOT EXISTS relationships (\n        id TEXT PRIMARY KEY,\n        source_id TEXT NOT NULL,\n        target_id TEXT NOT NULL,\n        type TEXT NOT NULL,\n        date TEXT,\n        place TEXT,\n        notes TEXT,\n        created_at TEXT DEFAULT CURRENT_TIMESTAMP\n      )`,\n      args: [],\n    },\n    {\n      sql: `CREATE TABLE IF NOT EXISTS sources (\n        id TEXT PRIMARY KEY,\n        title TEXT NOT NULL,\n        detail TEXT,\n        url TEXT\n      )`,\n      args: [],\n    },\n  ]);\n\n  const count = await sqlite.execute(\"SELECT COUNT(*) as count FROM people\");\n  if (Number(count.rows[0]?.count || 0) > 0) return;\n\n  const statements = [\n    ...seedPeople.map((person) => ({\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        person.id,\n        person.name,\n        person.displayName || null,\n        person.gender || null,\n        person.birthDate || null,\n        person.birthPlace || null,\n        person.deathDate || null,\n        person.deathPlace || null,\n        person.occupation || null,\n        person.notes || null,\n        person.tags || null,\n        person.lineageOrder ?? null,\n      ],\n    })),\n    ...seedRelationships.map((relationship) => ({\n      sql: `INSERT INTO relationships (id, source_id, target_id, type, date, place, notes)\n        VALUES (?, ?, ?, ?, ?, ?, ?)`,\n      args: [\n        relationship.id,\n        relationship.sourceId,\n        relationship.targetId,\n        relationship.type,\n        relationship.date || null,\n        relationship.place || null,\n        relationship.notes || null,\n      ],\n    })),\n    ...seedSources.map((source) => ({\n      sql: \"INSERT INTO sources (id, title, detail, url) VALUES (?, ?, ?, ?)\",\n      args: [source.id, source.title, source.detail || null, source.url || null],\n    })),\n  ];\n  await sqlite.batch(statements);\n}\n\nasync function readTree() {\n  await initDb();\n  const [people, relationships, sources] = await Promise.all([\n    sqlite.execute(\"SELECT * FROM people ORDER BY COALESCE(lineage_order, 999), birth_date, name\"),\n    sqlite.execute(\"SELECT * FROM relationships ORDER BY created_at, id\"),\n    sqlite.execute(\"SELECT * FROM sources ORDER BY title\"),\n  ]);\n  return {\n    people: people.rows,\n    relationships: relationships.rows,\n    sources: sources.rows,\n    stats: {\n      people: people.rows.length,\n      relationships: relationships.rows.length,\n      directLine: people.rows.filter((row) => String(row.tags || \"\").includes(\"direct-line\")).length,\n      places: new Set(people.rows.flatMap((row) => [row.birth_place, row.death_place]).filter(Boolean)).size,\n    },\n  };\n}\n\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/frontend/**/*\", (c) => serveImmutableFile(c.req.path));\n\napp.get(\"/\", () => {\n  const html = `<!DOCTYPE html>\n<html lang=\"nl\">\n  <head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Het geslacht De Visser</title>\n    <meta name=\"description\" content=\"Interactieve, afgeschermde familystamboom met Walcheren-erfgoed en beheer voor nieuwe entries.\">\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n    <link href=\"https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,650;9..144,700&family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap\" rel=\"stylesheet\">\n    <script src=\"https://cdn.twind.style\" crossorigin></script>\n    <link rel=\"stylesheet\" href=\"${immutableFileUrl(\"/frontend/styles.css\")}\">\n    <link rel=\"icon\" href=\"${immutableFileUrl(\"/frontend/favicon.svg\")}\" type=\"image/svg+xml\">\n  </head>\n  <body>\n    <div id=\"root\"></div>\n    <script src=\"https://esm.town/v/std/catch\"></script>\n    <script src=\"${immutableFileUrl(\"/frontend/index.tsx\")}\" type=\"module\"></script>\n  </body>\n</html>`;\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<string, string> = {};\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",[],[382],"e1750414-e168-4cea-a951-23a582055c84","README.md","019f33f3-6797-71df-9472-dbfce642fe47",37,["D",1789164639003],"# 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",[],[390],"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",[],[347,398],"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 />);",[],[347,406],"aa8e9755-604e-4807-b327-399524f589e0","index.html","019f33f3-6797-71df-9472-cfe0137fb115",26,["D",1789164609310],3,"<!DOCTYPE html>\n<html lang=\"nl\">\n  <head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Het geslacht De Visser</title>\n    <meta name=\"description\" content=\"Interactieve, afgeschermde familystamboom met Walcheren-erfgoed en beheer voor nieuwe entries.\">\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n    <link href=\"https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,650;9..144,700&family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap\" rel=\"stylesheet\">\n    <script src=\"https://cdn.twind.style\" crossorigin></script>\n    <link rel=\"stylesheet\" href=\"/frontend/styles.css\">\n    <link rel=\"icon\" href=\"/frontend/favicon.svg\" type=\"image/svg+xml\">\n  </head>\n  <body>\n    <div id=\"root\"></div>\n    <script src=\"https://esm.town/v/std/catch\"></script>\n    <script src=\"/frontend/index.tsx\" type=\"module\"></script>\n  </body>\n</html>\n",[],[347,413],"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>",[],[347,422],["D",1789164612674],[],[347,247,93],["D",1783283017517],[364],[347,247],"eb078953-a605-44f4-ac33-572b7401271f",["D",1783283017517],[363,365,366,367,368],[347],["D",1783283017517],["D",1789523429989],{"_11":12,"_305":99},{"_11":12,"_300":301,"_98":99,"_31":97,"_302":303,"_304":30},{"_58":288,"_13":16,"_52":55,"_289":250,"_290":88,"_291":292,"_293":254,"_294":295,"_296":297,"_298":14,"_299":12},"ctx",{"_71":-5,"_326":476,"_477":478,"_479":480,"_481":30,"_482":30,"_483":30,"_484":24,"_485":-5,"_486":-7,"_487":-7,"_488":26,"_489":30,"_490":30,"_491":-5,"_492":30,"_493":30,"_494":30,"_495":-5},"ENV",{"_447":448,"_449":450,"_451":16,"_452":453,"_454":455,"_456":457,"_458":459,"_460":461,"_462":463,"_464":465,"_466":467,"_468":469,"_470":471,"_472":473,"_474":475},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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>

History · components