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",[152],"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",[159],"eb078953-a605-44f4-ac33-572b7401271f","frontend","019f33f3-6797-71df-9472-d66668d4f9f5",["D",1783283017517],"directory",[166],"pulls","branches","forks","envVars",{"_178":180,"_181":43},"connections",{"_178":43,"_179":43},"count","unfilledCount",2,"emptyCount",{"_18":165,"_20":166,"_135":167,"_137":-5,"_138":72,"_139":143,"_141":39,"_22":248,"_69":43,"_144":169,"_146":-5,"_148":26,"_149":-5,"_193":249,"_94":250},{"_18":244,"_20":243,"_135":236,"_137":167,"_138":72,"_139":143,"_141":39,"_22":245,"_69":43,"_144":169,"_146":-5,"_148":26,"_149":-5,"_193":246,"_94":247},{"_18":233,"_20":234,"_135":235,"_137":236,"_138":72,"_139":237,"_141":39,"_22":238,"_69":239,"_144":145,"_146":240,"_148":26,"_149":-5,"_193":241,"_94":242},{"_18":226,"_20":227,"_135":228,"_137":167,"_138":72,"_139":143,"_141":39,"_22":229,"_69":43,"_144":105,"_146":230,"_148":26,"_149":-5,"_193":231,"_94":232},{"_18":217,"_20":218,"_135":219,"_137":167,"_138":72,"_139":220,"_141":39,"_22":221,"_69":222,"_144":105,"_146":223,"_148":26,"_149":-5,"_193":224,"_94":225},{"_18":210,"_20":211,"_135":212,"_137":167,"_138":72,"_139":143,"_141":39,"_22":213,"_69":43,"_144":145,"_146":214,"_148":26,"_149":-5,"_193":215,"_94":216},{"_18":202,"_20":203,"_135":204,"_137":167,"_138":72,"_139":205,"_141":39,"_22":206,"_69":140,"_144":105,"_146":207,"_148":26,"_149":-5,"_193":208,"_94":209},{"_18":158,"_20":159,"_135":160,"_137":-5,"_138":72,"_139":161,"_141":39,"_22":199,"_69":143,"_144":105,"_146":163,"_148":26,"_149":-5,"_193":200,"_94":201},{"_18":151,"_20":152,"_135":37,"_137":-5,"_138":72,"_139":70,"_141":39,"_22":196,"_69":154,"_144":155,"_146":156,"_148":26,"_149":-5,"_193":197,"_94":198},{"_18":133,"_20":134,"_135":136,"_137":-5,"_138":72,"_139":140,"_141":39,"_22":192,"_69":143,"_144":145,"_146":147,"_148":26,"_149":-5,"_193":194,"_94":195},["D",1783283838121],"children",[],[134],["D",1789164667275],[],[152],["D",1789164639003],[],[159],"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",[],[166,203],"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();",[],[166,211],"aa8e9755-604e-4807-b327-399524f589e0","index.html","019f33f3-6797-71df-9472-cfe0137fb115",26,["D",1789164609310],3,"\n\n \n \n \n Het geslacht De Visser\n \n \n \n \n \n \n \n \n \n

\n \n \n \n\n",[],[166,218],"70d37630-680d-493e-b6c5-65f4a12080db","favicon.svg","019f33f3-6797-71df-9472-cbdac40c5906",["D",1783283017517],"\n",[],[166,227],"9111e41a-9aa1-4910-ac45-540b57f60032","App.tsx","019f33f3-6797-71df-9472-bfd84de1747d","019f33f3-6797-71df-9472-c4d39f070420",29,["D",1789164612674],18,"/** @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",[],[166,243,234],"components","eccae7a2-0ce4-448b-a356-b12e9f2180d8",["D",1783283017517],[184],[166,243],["D",1783283017517],[183,185,186,187,188],[166],["D",1783283017517],["D",1789523429989],{"_16":17,"_92":88},{"_16":17,"_85":86,"_87":88,"_34":35,"_89":90,"_91":26},{"_69":70,"_20":71,"_18":72,"_73":19,"_74":75,"_76":77,"_78":28,"_79":80,"_81":82,"_83":21,"_84":17},"ctx",{"_62":-5,"_115":289,"_290":291,"_292":293,"_294":26,"_295":26,"_296":26,"_297":39,"_298":-5,"_299":-7,"_300":-7,"_301":43,"_302":26,"_303":26,"_304":-5,"_305":26,"_306":26,"_307":26,"_308":-5},"ENV",{"_260":261,"_262":263,"_264":71,"_265":266,"_267":268,"_269":270,"_271":272,"_273":274,"_275":276,"_277":278,"_279":280,"_281":282,"_283":284,"_285":286,"_287":288},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","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>