Het geslacht De Visser

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_271":272,"_273":274},"routes/_app.x.$handle.$name",{"_105":104,"_32":45,"_114":91,"_27":115,"_13":14,"_116":-5,"_11":117,"_118":119,"_120":121,"_122":123,"_124":125,"_20":-5,"_126":127,"_128":129,"_130":25,"_131":132,"_133":60,"_134":-5,"_135":-5,"_136":137},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":55,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":72,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":84,"_85":86,"_87":88,"_89":25},"version",19,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":20,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":33,"_34":20,"_35":36},"deleted",false,"deletedHere","path","frontend/index.html","latestPath","fileId","019f33f3-6797-71df-9472-cfe0137fb115","name","index.html","fileType","content","\n\n \n \n \n Het geslacht De Visser\n \n \n \n \n \n \n

\n \n \n \n","\n\n \n \n \n Het geslacht De Visser\n \n \n \n \n \n \n

\n \n \n \n","createdAt",["D",1783284041952],"branchVersion","branchId","83949173-0812-44b3-8c17-0d3bd34540cb","id","7e11a53e-5566-4d87-977d-91b5f4b38580","de-visser-stamboom",["D",1783283017517],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","De Visser family tree with auth and editing","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789556399&sig=39cf692678889e4858e1d3f239cccdbb768d0b4bdeeecb6f122e7581a8e69c0b","d4de366f-8281-484e-8856-3824b6bdfb0b","pinnedFileId","019f33f3-6797-71df-9472-df6c22f5cb8b","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","9bb2e2b6-8aa1-4b6a-b4ef-ad7adab2b868","tursoName","7e11a53e55664d87977d91b5f4b38580","tursoHostname","7e11a53e55664d87977d91b5f4b38580-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789523429989],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_105":104,"_113":109},"org",{"_105":104,"_106":107,"_108":109,"_18":56,"_110":111,"_112":25},"branch",{"_13":90,"_32":91,"_43":42,"_92":44,"_93":94,"_95":96,"_97":50,"_98":99,"_100":101,"_102":45,"_103":104},"isOwned",39,"main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",89,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","kamenxrider","handle","displayName","slimarmor","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ybFJkNm8zSzFzbGE5RzhsTUt3OGJMZFdGZFkifQ","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":266,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":55,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":267,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":268,"_85":269,"_87":270,"_89":25},"tree",[194,202,203,204],"files",[194,195,196,197,198,199,200,201,202,203,204],"counts",{"_184":64,"_185":160,"_186":64,"_187":188,"_189":190},"contents",[149,150,151,152],"upstreamProject",{"_43":99,"_32":145,"_52":146,"_54":55,"_49":50,"_83":147},"upstreamBranch",{"_43":94,"_38":138,"_139":140,"_32":91,"_92":99,"_13":141,"_93":-5,"_95":-5,"_142":143,"_47":-5,"_89":25,"_49":50,"_103":144,"_65":101,"_102":145},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],"updatedAt",["D",1785420707976],91,"lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","templates","react-hono-starter","Starter template with client-side React & Hono server",{"_105":144,"_113":148},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789556399&sig=d4d039bf60786a03d56ec8a29ec1b19630253aab318e490fcd07a6f24846b070",{"_43":178,"_32":179,"_30":180,"_156":-5,"_41":42,"_40":160,"_158":60,"_38":181,"_13":64,"_34":182,"_35":-5,"_24":25,"_163":-5,"_27":183},{"_43":172,"_32":173,"_30":174,"_156":-5,"_41":42,"_40":160,"_158":25,"_38":175,"_13":64,"_34":20,"_35":176,"_24":25,"_163":-5,"_27":177},{"_43":165,"_32":166,"_30":58,"_156":-5,"_41":42,"_40":167,"_158":25,"_38":168,"_13":160,"_34":169,"_35":170,"_24":25,"_163":-5,"_27":171},{"_43":153,"_32":154,"_30":155,"_156":-5,"_41":42,"_40":157,"_158":60,"_38":159,"_13":160,"_34":161,"_35":162,"_24":25,"_163":-5,"_27":164},"5e4e9f11-34c6-4a3d-9a4d-2e43cff0444f","seed.ts","f5c9b38a-78af-11f1-8c10-1607ee4eb77e","parentId",7,"latest",["D",1783283838121],1,"script","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","label",[154],"6047dded-22e5-4bfa-8fc7-45e434fa3539","index.ts",2,["D",1783283176199],"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/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 = {}) {\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 {\n const raw = Deno.env.get(\"AUTH_USERS_JSON\");\n if (!raw) return {};\n try {\n return JSON.parse(raw) as Record;\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();\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 {\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(\"/\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\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",[166],"7fbc2a17-cf92-4dc1-b866-945b3a6c6342","README.md","019f33f3-6797-71df-9472-dbfce642fe47",["D",1783283017517],"# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"index.html\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + API routes)\nfrontend/\n index.html ← HTML shell (loads Twind + React)\n index.tsx ← React entrypoint (mounts )\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (layout + view source link)\n Counter.tsx ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n frontend and any API routes you add.\n2. **`frontend/index.html`** loads Twind and the React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n a full-stack example with database, queries, and shared types\n",[173],"eb078953-a605-44f4-ac33-572b7401271f","frontend","019f33f3-6797-71df-9472-d66668d4f9f5",["D",1783283017517],"directory",[179],"pulls","branches","forks","envVars",{"_191":167,"_193":64},"connections",{"_191":64,"_192":64},"count","unfilledCount","emptyCount",{"_43":178,"_32":179,"_30":180,"_156":-5,"_41":42,"_40":160,"_158":60,"_38":263,"_13":64,"_34":182,"_35":-5,"_24":25,"_163":-5,"_206":264,"_27":265},{"_43":259,"_32":249,"_30":244,"_156":180,"_41":42,"_40":160,"_158":60,"_38":260,"_13":64,"_34":182,"_35":-5,"_24":25,"_163":-5,"_206":261,"_27":262},{"_43":250,"_32":251,"_30":252,"_156":244,"_41":42,"_40":253,"_158":25,"_38":254,"_13":255,"_34":161,"_35":256,"_24":25,"_163":-5,"_206":257,"_27":258},{"_43":241,"_32":242,"_30":243,"_156":244,"_41":42,"_40":160,"_158":25,"_38":245,"_13":64,"_34":161,"_35":246,"_24":25,"_163":-5,"_206":247,"_27":248},{"_43":234,"_32":235,"_30":236,"_156":180,"_41":42,"_40":160,"_158":60,"_38":237,"_13":64,"_34":20,"_35":238,"_24":25,"_163":-5,"_206":239,"_27":240},{"_43":230,"_32":33,"_30":31,"_156":180,"_41":42,"_40":14,"_158":25,"_38":231,"_13":167,"_34":20,"_35":37,"_24":25,"_163":-5,"_206":232,"_27":233},{"_43":223,"_32":224,"_30":225,"_156":180,"_41":42,"_40":160,"_158":60,"_38":226,"_13":64,"_34":161,"_35":227,"_24":25,"_163":-5,"_206":228,"_27":229},{"_43":215,"_32":216,"_30":217,"_156":180,"_41":42,"_40":218,"_158":25,"_38":219,"_13":64,"_34":20,"_35":220,"_24":25,"_163":-5,"_206":221,"_27":222},{"_43":172,"_32":173,"_30":174,"_156":-5,"_41":42,"_40":160,"_158":25,"_38":212,"_13":64,"_34":20,"_35":176,"_24":25,"_163":-5,"_206":213,"_27":214},{"_43":165,"_32":166,"_30":58,"_156":-5,"_41":42,"_40":167,"_158":25,"_38":209,"_13":160,"_34":169,"_35":170,"_24":25,"_163":-5,"_206":210,"_27":211},{"_43":153,"_32":154,"_30":155,"_156":-5,"_41":42,"_40":157,"_158":60,"_38":205,"_13":160,"_34":161,"_35":162,"_24":25,"_163":-5,"_206":207,"_27":208},["D",1783283838121],"children",[],[154],["D",1783283176199],[],[166],["D",1783283017517],[],[173],"8c039b3c-957e-49bd-a16d-47b0c9ea0a62","styles.css","49fc3dce-78b0-11f1-aca7-1607ee4eb77e",5,["D",1783283397594],":root {\n color-scheme: dark;\n --navy-950: oklch(0.15 0.055 236);\n --navy-900: oklch(0.19 0.06 231);\n --navy-820: oklch(0.25 0.055 224);\n --ink: oklch(0.93 0.018 87);\n --muted: oklch(0.74 0.03 87);\n --faded: oklch(0.62 0.033 90);\n --copper: oklch(0.71 0.125 68);\n --copper-strong: oklch(0.78 0.16 72);\n --jade: oklch(0.52 0.075 166);\n --paper: oklch(0.83 0.055 83);\n --paper-ink: oklch(0.24 0.04 75);\n --line: color-mix(in oklch, var(--copper) 56%, transparent);\n --panel: color-mix(in oklch, var(--navy-900) 90%, black 10%);\n --panel-soft: color-mix(in oklch, var(--navy-820) 66%, transparent);\n --danger: oklch(0.67 0.18 32);\n --success: oklch(0.74 0.12 145);\n}\n\n* { box-sizing: border-box; }\n\nhtml { min-height: 100%; background: var(--navy-950); }\n\nbody {\n margin: 0;\n min-height: 100vh;\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n color: var(--ink);\n background:\n radial-gradient(circle at 18% 16%, color-mix(in oklch, var(--jade) 18%, transparent), transparent 28rem),\n radial-gradient(circle at 82% 10%, color-mix(in oklch, var(--copper) 11%, transparent), transparent 30rem),\n linear-gradient(140deg, var(--navy-950) 0%, var(--navy-900) 52%, oklch(0.12 0.045 225) 100%);\n}\n\nbody::before {\n content: \"\";\n position: fixed;\n inset: 0;\n pointer-events: none;\n opacity: .22;\n background-image:\n linear-gradient(color-mix(in oklch, var(--copper) 22%, transparent) 1px, transparent 1px),\n linear-gradient(90deg, color-mix(in oklch, var(--copper) 18%, transparent) 1px, transparent 1px);\n background-size: 84px 84px;\n mask-image: radial-gradient(circle at 50% 34%, black, transparent 78%);\n}\n\nbutton, input, select, textarea { font: inherit; }\n\nbutton {\n cursor: pointer;\n border: 0;\n}\n\nbutton:disabled { cursor: not-allowed; opacity: .58; }\n\nsvg { display: block; }\n\na { color: inherit; }\n\n.app-shell { min-height: 100vh; position: relative; overflow-x: hidden; }\n\n.app-header {\n position: sticky;\n top: 0;\n z-index: 20;\n backdrop-filter: blur(20px);\n background: color-mix(in oklch, var(--navy-950) 78%, transparent);\n border-bottom: 1px solid color-mix(in oklch, var(--copper) 42%, transparent);\n}\n\n.header-main {\n display: grid;\n grid-template-columns: minmax(270px, 1fr) minmax(260px, 520px) auto;\n gap: 1rem;\n align-items: center;\n padding: .85rem clamp(1rem, 3vw, 2rem) .7rem;\n}\n\n.brand-lockup { display: flex; align-items: center; gap: .9rem; min-width: 0; }\n\n.crest {\n width: 3.35rem;\n height: 3.35rem;\n display: grid;\n place-items: center;\n color: var(--copper-strong);\n border: 1px solid var(--copper);\n border-radius: 11px;\n background: linear-gradient(160deg, color-mix(in oklch, var(--navy-820) 72%, transparent), color-mix(in oklch, black 30%, transparent));\n}\n\n.brand-title {\n font-family: Georgia, \"Times New Roman\", serif;\n font-size: clamp(1.55rem, 3vw, 2.65rem);\n line-height: .96;\n margin: 0;\n color: var(--copper-strong);\n letter-spacing: 0;\n text-wrap: balance;\n}\n\n.brand-subtitle { margin: .25rem 0 0; color: var(--muted); font-size: .95rem; }\n\n.search-wrap { position: relative; min-width: 0; }\n.search-wrap svg { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); color: var(--copper); width: 1.1rem; }\n.search-wrap input {\n width: 100%;\n height: 3rem;\n border: 1px solid color-mix(in oklch, var(--copper) 55%, transparent);\n border-radius: 10px;\n background: color-mix(in oklch, black 24%, transparent);\n color: var(--ink);\n padding: 0 1rem 0 2.75rem;\n outline: none;\n}\n.search-wrap input::placeholder { color: color-mix(in oklch, var(--muted) 82%, black); }\n.search-wrap input:focus { border-color: var(--copper-strong); box-shadow: 0 0 0 3px color-mix(in oklch, var(--copper) 22%, transparent); }\n\n.user-box {\n display: flex;\n align-items: center;\n gap: .7rem;\n justify-content: flex-end;\n color: var(--muted);\n min-width: 12rem;\n}\n\n.icon-button, .nav-button, .primary-button, .ghost-button, .small-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: .45rem;\n border-radius: 9px;\n transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;\n}\n\n.icon-button {\n width: 2.6rem;\n height: 2.6rem;\n color: var(--copper-strong);\n border: 1px solid color-mix(in oklch, var(--copper) 46%, transparent);\n background: color-mix(in oklch, black 22%, transparent);\n}\n.icon-button:hover { background: color-mix(in oklch, var(--copper) 18%, transparent); transform: translateY(-1px); }\n\n.nav-tabs {\n display: flex;\n align-items: center;\n gap: .35rem;\n overflow-x: auto;\n padding: 0 clamp(1rem, 3vw, 2rem);\n scrollbar-width: none;\n}\n.nav-tabs::-webkit-scrollbar { display: none; }\n.nav-button {\n min-height: 3rem;\n padding: 0 .85rem;\n color: var(--muted);\n background: transparent;\n border-bottom: 2px solid transparent;\n border-radius: 0;\n white-space: nowrap;\n}\n.nav-button svg { width: 1.1rem; color: var(--copper); }\n.nav-button:hover, .nav-button.active { color: var(--copper-strong); border-bottom-color: var(--copper-strong); }\n\n.workspace {\n display: grid;\n grid-template-columns: 17rem minmax(0, 1fr) 24rem;\n gap: 1rem;\n padding: 1rem clamp(1rem, 3vw, 2rem) 2rem;\n max-width: 1800px;\n margin: 0 auto;\n}\n\n.panel {\n position: relative;\n border: 1px solid color-mix(in oklch, var(--copper) 43%, transparent);\n border-radius: 12px;\n background: linear-gradient(180deg, color-mix(in oklch, var(--panel) 92%, transparent), color-mix(in oklch, black 20%, transparent));\n overflow: hidden;\n}\n\n.panel-pad { padding: 1rem; }\n\n.story-rail { display: flex; flex-direction: column; gap: 1rem; }\n.story-card h2, .section-title, .paper-card h2, .login-card h1 {\n font-family: Georgia, \"Times New Roman\", serif;\n letter-spacing: 0;\n}\n.story-card h2 { margin: .2rem 0 .65rem; color: var(--copper-strong); font-size: 1.35rem; line-height: 1.12; }\n.story-card p { margin: 0 0 .75rem; color: var(--muted); line-height: 1.5; font-size: .95rem; }\n\n.compass-card { min-height: 11.5rem; display: grid; place-items: center; }\n.compass-card svg { width: 8.5rem; color: var(--copper); opacity: .9; }\n\n.textile-card { display: grid; gap: .8rem; }\n.textile-swatch {\n position: relative;\n min-height: 10rem;\n border-radius: 10px;\n overflow: hidden;\n border: 1px solid color-mix(in oklch, var(--copper) 36%, transparent);\n background:\n radial-gradient(circle at 18% 20%, color-mix(in oklch, var(--paper) 48%, transparent), transparent 3.2rem),\n radial-gradient(circle at 70% 68%, color-mix(in oklch, var(--jade) 44%, transparent), transparent 4rem),\n linear-gradient(135deg, oklch(0.22 0.07 232), oklch(0.18 0.055 210));\n}\n.textile-swatch::before,\n.textile-swatch::after {\n content: \"\";\n position: absolute;\n inset: 12px;\n border: 1px solid color-mix(in oklch, var(--paper) 36%, transparent);\n border-radius: 999px 999px 14px 14px;\n}\n.textile-swatch::after {\n inset: auto 14px 12px;\n height: 34%;\n border-radius: 999px;\n background:\n radial-gradient(circle, color-mix(in oklch, var(--copper-strong) 84%, transparent) 0 2px, transparent 3px) 0 0 / 18px 18px,\n linear-gradient(90deg, transparent, color-mix(in oklch, var(--paper) 22%, transparent), transparent);\n}\n\n.main-stage { min-width: 0; display: flex; flex-direction: column; gap: 1rem; }\n.legend {\n display: flex;\n gap: .8rem;\n flex-wrap: wrap;\n justify-content: center;\n color: var(--muted);\n font-size: .88rem;\n}\n.legend span { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid color-mix(in oklch, var(--copper) 38%, transparent); border-radius: 999px; padding: .45rem .7rem; background: color-mix(in oklch, black 18%, transparent); }\n.legend svg { width: 1rem; color: var(--copper-strong); }\n\n.map-stage {\n position: relative;\n min-height: 46rem;\n padding: 1rem;\n background:\n radial-gradient(circle at 50% 44%, color-mix(in oklch, var(--jade) 16%, transparent), transparent 27rem),\n linear-gradient(180deg, color-mix(in oklch, var(--navy-820) 36%, transparent), transparent);\n}\n\n.map-ghost {\n position: absolute;\n inset: 1rem;\n opacity: .35;\n color: var(--copper);\n pointer-events: none;\n}\n.map-label {\n font-family: Georgia, \"Times New Roman\", serif;\n fill: color-mix(in oklch, var(--copper-strong) 82%, transparent);\n letter-spacing: .08em;\n}\n\n.tree-zone { position: relative; z-index: 2; display: grid; gap: 1rem; justify-items: center; }\n.ancestor-chain { display: grid; gap: .35rem; justify-items: center; min-width: min(100%, 24rem); }\n.ancestor-node {\n width: min(100%, 18rem);\n padding: .48rem .65rem;\n border: 1px solid var(--line);\n border-radius: 9px;\n color: var(--muted);\n background: color-mix(in oklch, black 30%, transparent);\n font-size: .78rem;\n text-align: center;\n}\n.ancestor-node.active { color: var(--copper-strong); border-color: var(--copper-strong); background: color-mix(in oklch, var(--copper) 14%, black 20%); }\n.chain-line { width: 1px; height: .5rem; background: var(--copper); opacity: .75; }\n\n.family-core { display: grid; grid-template-columns: minmax(14rem, 1fr) 4.5rem minmax(14rem, 1fr); gap: .55rem; align-items: center; width: min(100%, 54rem); }\n.union-mark { display: grid; justify-items: center; gap: .35rem; color: var(--copper-strong); font-size: .82rem; }\n.union-circle { width: 3.1rem; height: 3.1rem; border: 1px solid var(--copper-strong); border-radius: 999px; display: grid; place-items: center; background: color-mix(in oklch, black 28%, transparent); }\n\n.node-card {\n position: relative;\n min-height: 5.6rem;\n display: grid;\n grid-template-columns: auto minmax(0, 1fr);\n gap: .75rem;\n align-items: center;\n width: 100%;\n padding: .72rem;\n border: 1px solid color-mix(in oklch, var(--copper) 55%, transparent);\n border-radius: 11px;\n color: var(--ink);\n background: color-mix(in oklch, var(--navy-900) 78%, transparent);\n text-align: left;\n}\n.node-card:hover, .node-card.selected { border-color: var(--copper-strong); box-shadow: 0 0 0 1px color-mix(in oklch, var(--copper-strong) 48%, transparent); }\n.node-card.featured { background: linear-gradient(135deg, color-mix(in oklch, var(--jade) 30%, var(--navy-900)), color-mix(in oklch, black 16%, var(--navy-900))); }\n.node-card.user-added { border-color: color-mix(in oklch, var(--success) 70%, transparent); }\n.portrait {\n width: 4.1rem;\n height: 4.1rem;\n border-radius: 8px;\n display: grid;\n place-items: center;\n flex: none;\n color: var(--paper);\n background:\n radial-gradient(circle at 44% 30%, color-mix(in oklch, var(--paper) 48%, transparent), transparent 1.6rem),\n linear-gradient(145deg, color-mix(in oklch, var(--copper) 28%, transparent), color-mix(in oklch, black 40%, transparent));\n border: 1px solid color-mix(in oklch, var(--paper) 35%, transparent);\n font-family: Georgia, \"Times New Roman\", serif;\n font-size: 1.25rem;\n}\n.node-card h3 { margin: 0; font-family: Georgia, \"Times New Roman\", serif; font-size: 1rem; line-height: 1.14; color: var(--copper-strong); letter-spacing: 0; overflow-wrap: anywhere; }\n.node-card p { margin: .25rem 0 0; color: var(--muted); font-size: .82rem; line-height: 1.35; }\n\n.children-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .6rem; width: min(100%, 52rem); }\n.descendant-column { display: grid; gap: .45rem; width: min(100%, 20rem); }\n.vertical-link { width: 1px; height: 1rem; background: var(--copper); opacity: .75; }\n\n.detail-panel { position: sticky; top: 8.6rem; align-self: start; }\n.paper-card {\n color: var(--paper-ink);\n background:\n radial-gradient(circle at 82% 76%, color-mix(in oklch, var(--copper) 18%, transparent), transparent 8rem),\n linear-gradient(135deg, oklch(0.86 0.05 84), oklch(0.75 0.045 76));\n border-color: color-mix(in oklch, var(--copper) 64%, black 10%);\n}\n.paper-card::before {\n content: \"\";\n position: absolute;\n inset: .55rem;\n border: 1px solid color-mix(in oklch, var(--paper-ink) 25%, transparent);\n border-radius: 9px;\n pointer-events: none;\n}\n.paper-content { position: relative; padding: 1.35rem; }\n.paper-top { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 1rem; align-items: start; }\n.paper-portrait { width: 5.6rem; height: 5.6rem; border-radius: 9px; color: var(--paper); background: linear-gradient(145deg, oklch(0.32 0.04 75), oklch(0.52 0.035 85)); }\n.paper-card h2 { margin: 0; font-size: 1.55rem; line-height: 1.1; color: var(--paper-ink); }\n.detail-list { display: grid; gap: .85rem; margin-top: 1.2rem; }\n.detail-item { display: grid; grid-template-columns: 1.3rem minmax(0, 1fr); gap: .7rem; align-items: start; }\n.detail-item svg { width: 1.15rem; color: oklch(0.42 0.08 68); margin-top: .1rem; }\n.detail-item strong { display: block; margin-bottom: .2rem; }\n.detail-item span, .detail-item li { line-height: 1.45; }\n\n.dashboard-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }\n.info-card { min-height: 10rem; padding: 1rem; }\n.info-card h3 { margin: 0 0 .45rem; color: var(--copper-strong); font-family: Georgia, \"Times New Roman\", serif; font-size: 1.2rem; }\n.info-card p, .info-card li { color: var(--muted); font-size: .92rem; line-height: 1.48; }\n.info-card ul { margin: .45rem 0 0; padding-left: 1.1rem; columns: 2; }\n.timeline-line { display: flex; align-items: center; gap: .55rem; margin: 1rem 0; }\n.timeline-dot { width: .68rem; height: .68rem; border-radius: 50%; background: var(--copper-strong); }\n.timeline-rule { height: 1px; flex: 1; background: color-mix(in oklch, var(--copper) 66%, transparent); }\n\n.page-panel { grid-column: 1 / -1; min-height: 38rem; padding: clamp(1rem, 2vw, 1.5rem); }\n.section-title { margin: 0 0 1rem; color: var(--copper-strong); font-size: 1.8rem; }\n.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .8rem; }\n.record-card { padding: .9rem; border: 1px solid color-mix(in oklch, var(--copper) 35%, transparent); border-radius: 10px; background: color-mix(in oklch, black 18%, transparent); }\n.record-card h3 { margin: 0 0 .35rem; font-family: Georgia, \"Times New Roman\", serif; color: var(--copper-strong); font-size: 1.05rem; }\n.record-card p { margin: .15rem 0; color: var(--muted); font-size: .9rem; }\n\n.manage-layout { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1rem; align-items: start; }\n.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }\n.field { display: grid; gap: .35rem; }\n.field.full { grid-column: 1 / -1; }\n.field label { color: var(--muted); font-size: .86rem; }\n.field input, .field select, .field textarea {\n width: 100%;\n border: 1px solid color-mix(in oklch, var(--copper) 38%, transparent);\n border-radius: 9px;\n min-height: 2.75rem;\n color: var(--ink);\n background: color-mix(in oklch, black 22%, transparent);\n padding: .7rem .8rem;\n outline: none;\n}\n.field textarea { min-height: 6rem; resize: vertical; }\n.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--copper-strong); box-shadow: 0 0 0 3px color-mix(in oklch, var(--copper) 18%, transparent); }\n.primary-button, .ghost-button, .small-button { min-height: 2.75rem; padding: 0 .9rem; }\n.primary-button { color: oklch(0.17 0.04 70); background: var(--copper-strong); }\n.primary-button:hover { background: oklch(0.83 0.15 75); transform: translateY(-1px); }\n.ghost-button, .small-button { color: var(--copper-strong); border: 1px solid color-mix(in oklch, var(--copper) 48%, transparent); background: color-mix(in oklch, black 20%, transparent); }\n.ghost-button:hover, .small-button:hover { background: color-mix(in oklch, var(--copper) 16%, transparent); }\n.form-actions { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }\n.message { color: var(--success); font-size: .9rem; }\n.message.error { color: var(--danger); }\n\n.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 1.2rem; position: relative; }\n.login-card { width: min(100%, 58rem); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(20rem, .95fr); overflow: hidden; }\n.login-art { padding: clamp(1.2rem, 4vw, 2.4rem); background: radial-gradient(circle at 50% 36%, color-mix(in oklch, var(--jade) 25%, transparent), transparent 18rem); }\n.login-card h1 { margin: .9rem 0 .6rem; color: var(--copper-strong); font-size: clamp(2rem, 5vw, 4.2rem); line-height: .95; }\n.login-card p { color: var(--muted); line-height: 1.55; max-width: 33rem; }\n.login-form { padding: clamp(1.2rem, 4vw, 2.2rem); border-left: 1px solid color-mix(in oklch, var(--copper) 34%, transparent); background: color-mix(in oklch, black 18%, transparent); }\n.login-form h2 { margin: 0 0 1rem; font-family: Georgia, \"Times New Roman\", serif; color: var(--ink); }\n.login-note { margin-top: 1rem; color: var(--faded); font-size: .85rem; }\n\n.loading-screen { min-height: 100vh; display: grid; place-items: center; color: var(--copper-strong); }\n.spinner { width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 2px solid color-mix(in oklch, var(--copper) 22%, transparent); border-top-color: var(--copper-strong); animation: spin .9s linear infinite; }\n\n@keyframes spin { to { transform: rotate(360deg); } }\n\n@media (prefers-reduced-motion: reduce) {\n *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }\n}\n\n@media (max-width: 1180px) {\n .workspace { grid-template-columns: minmax(0, 1fr); }\n .story-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }\n .detail-panel { position: relative; top: auto; }\n .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n}\n\n@media (max-width: 820px) {\n .header-main { grid-template-columns: minmax(0, 1fr); }\n .user-box { justify-content: flex-start; min-width: 0; }\n .story-rail, .dashboard-grid, .manage-layout, .login-card { grid-template-columns: 1fr; }\n .login-form { border-left: 0; border-top: 1px solid color-mix(in oklch, var(--copper) 34%, transparent); }\n .family-core { grid-template-columns: 1fr; }\n .union-mark { order: 2; }\n .form-grid { grid-template-columns: 1fr; }\n .map-stage { min-height: auto; }\n .paper-top { grid-template-columns: 1fr; }\n}\n\n@media (max-width: 520px) {\n .brand-lockup { align-items: flex-start; }\n .crest { width: 2.7rem; height: 2.7rem; }\n .brand-title { font-size: 1.6rem; }\n .brand-subtitle { font-size: .83rem; }\n .workspace { padding-inline: .75rem; }\n .node-card { grid-template-columns: 1fr; }\n .portrait { width: 3.4rem; height: 3.4rem; }\n .nav-button { padding-inline: .65rem; }\n}\n",[],[179,216],"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();",[],[179,224],"96b81727-581f-4a20-912b-8b7989eccde2",["D",1783284041952],[],[179,33],"70d37630-680d-493e-b6c5-65f4a12080db","favicon.svg","019f33f3-6797-71df-9472-cbdac40c5906",["D",1783283017517],"\n",[],[179,235],"f748bc8e-e222-4a7b-b56c-49029fe54c95","Counter.tsx","019f33f3-6797-71df-9472-c121aa836c84","019f33f3-6797-71df-9472-c4d39f070420",["D",1783283017517],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Counter() {\n const [count, setCount] = useState(0);\n return (\n

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

\n );\n}\n",[],[179,249,242],"components","85ce4986-bedb-4282-a151-188f50db405d","App.tsx","019f33f3-6797-71df-9472-bfd84de1747d",18,["D",1783283999546],12,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useMemo, useState } from \"https://esm.sh/react@18.2.0\";\nimport {\n Anchor,\n BookOpen,\n Calendar,\n Clock3,\n Compass,\n HeartHandshake,\n Home,\n KeyRound,\n Link as LinkIcon,\n LogOut,\n Map as MapIcon,\n MapPin,\n Plus,\n Search,\n Settings,\n ShieldCheck,\n Sparkles,\n Star,\n TreePine,\n User,\n Users,\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: \"Overzicht\", icon: Home },\n { id: \"ancestors\", label: \"Voorouders\", icon: Users },\n { id: \"descendants\", label: \"Nazaten\", icon: TreePine },\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(\",\").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 lifeLine(person?: Person | null) {\n if (!person) return \"\";\n const born = [person.birth_date, person.birth_place && `te ${person.birth_place}`].filter(Boolean).join(\" \");\n const died = [person.death_date, person.death_place && `te ${person.death_place}`].filter(Boolean).join(\" \");\n if (born && died) return `${born} - ${died}`;\n return born || died || \"Nog geen datums bekend\";\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 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 WalcherenMap() {\n return (\n \n );\n}\n\nfunction Portrait({ person, paper = false }: { person: Person; paper?: boolean }) {\n return

{initials(person)}

;\n}\n\nfunction NodeCard({ person, selected, onSelect }: { person: Person; selected: boolean; onSelect: (id: string) => void }) {\n const classes = [\"node-card\", selected ? \"selected\" : \"\", hasTag(person, \"featured\") ? \"featured\" : \"\", hasTag(person, \"user-added\") ? \"user-added\" : \"\"].filter(Boolean).join(\" \");\n return (\n \n );\n}\n\nfunction DetailPanel({ person, peopleById, relationships }: { person: Person; peopleById: Map; relationships: Relationship[] }) {\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 = relationships\n .filter((rel) => rel.type === \"parent\" && rel.source_id === person.id)\n .map((rel) => peopleById.get(rel.target_id))\n .filter(Boolean) as Person[];\n\n return (\n

\n \n

{label(person)}

\n {person.occupation ?

{person.occupation}

: null}\n

Geboren{person.birth_date || \"Onbekend\"}{person.birth_place ? ` te ${person.birth_place}` : \"\"}

Overleden{person.death_date || \"Onbekend\"}{person.death_place ? ` te ${person.death_place}` : \"\"}

\n {spouses.length ? (\n

Getrouwd / partner{spouses.map(({ rel, person: spouse }) => {label(spouse)}{rel.date ? `, ${rel.date}` : \"\"}{rel.place ? ` te ${rel.place}` : \"\"}
)}

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

Kinderen

{label(child)}

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

Notitie{person.notes}

: null}\n

\n );\n}\n\nfunction ScrollTextIcon() {\n return ;\n}\n\nfunction StoryRail({ stats }: { stats: Record }) {\n return (\n \n );\n}\n\nfunction Overview({ tree, selected, setSelected, peopleById, relationships, query }: { tree: TreeData; selected: Person; setSelected: (id: string) => void; peopleById: Map; relationships: Relationship[]; query: string }) {\n const directLine = tree.people.filter((person) => hasTag(person, \"direct-line\")).sort(sortByLineage);\n const kees = lineagePerson(directLine, 16) || selected;\n const lenie = spouseOf(kees, peopleById, relationships);\n const children = childrenOf(kees, peopleById, relationships);\n const jozina = lineagePerson(directLine, 17);\n const lucas = spouseOf(jozina, peopleById, relationships);\n const fernand = lineagePerson(directLine, 18);\n const lola = lineagePerson(directLine, 19);\n const union = lenie ? relationships.find((rel) => rel.type === \"spouse\" && ((rel.source_id === kees.id && rel.target_id === lenie.id) || (rel.target_id === kees.id && rel.source_id === lenie.id))) : null;\n const matches = query.trim() ? tree.people.filter((person) => `${label(person)} ${person.birth_place || \"\"} ${person.death_place || \"\"}`.toLowerCase().includes(query.toLowerCase())).slice(0, 8) : [];\n\n return (\n <>\n \n

geboren getrouwd overleden nieuw toe te voegen via beheer

\n {matches.length ? : null}\n

\n \n

\n {directLine.slice(0, 16).map((person, index) => (\n \n \n {index < 15 ? : null}\n \n ))}\n

\n \n

{union?.date || \"Verbonden\"}

\n {lenie ? : null}\n

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

\n {jozina ? : null}\n {lucas ? : null}\n {fernand ? : null}\n {lola ? : null}\n

\n \n

\n \n \n );\n}\n\nfunction SearchResults({ matches, setSelected }: { matches: Person[]; setSelected: (id: string) => void }) {\n return (\n

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

\n );\n}\n\nfunction DashboardCards({ tree }: { tree: TreeData }) {\n const places = [...new Set(tree.people.flatMap((person) => [person.birth_place, person.death_place]).filter(Boolean) as string[])].slice(0, 10);\n const years = tree.people.flatMap((person) => [yearFrom(person.birth_date), yearFrom(person.death_date)]).filter(Boolean) as number[];\n const firstYear = years.length ? Math.min(...years) : null;\n const lastYear = years.length ? Math.max(...years) : null;\n return (\n

Tijdlijn

{firstYear && lastYear ? `Van ${firstYear} tot ${lastYear}. ` : \"\"}Bekijk de schakels per eeuw en klik door naar personen.

{firstYear || \"...\"}{lastYear || \"...\"}

Plaatsen

Belangrijke plekken in het verhaal.

{place}

Walcheren

Tussen land, zee, akkers en archiefstukken. Generaties lang thuis op Walcheren.

Bronnen

Onderzoek, archiefstukken, notities en bewijsstukken kunnen per persoon worden aangevuld.

\n );\n}\n\nfunction SimplePage({ title, children }: { title: string; children: any }) {\n return

{title}

{children}

;\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

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

;\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

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

;\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

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

;\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

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

{place}

{count} vermeldingen in geboorte- of overlijdensgegevens.

)}

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

{sources.map((source) =>

{source.title}

{source.detail}

{source.url ?

Open bron

: null}

)}

Bekijk / remix broncode

;\n}\n\nfunction ManagePage({ tree, selectedId, onCreated }: { tree: TreeData; selectedId: string; onCreated: (tree: TreeData, id: string) => 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: Event) {\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 } 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 return (\n \n

\n Naam update(\"name\", event.currentTarget.value)} placeholder=\"Nieuwe persoon\" required />\n Geslacht\n Beroep / rol update(\"occupation\", event.currentTarget.value)} placeholder=\"bijv. landbouwer\" />\n Geboortedatum update(\"birthDate\", event.currentTarget.value)} placeholder=\"dd-mm-jjjj of ca. 1700\" />\n Geboorteplaats update(\"birthPlace\", event.currentTarget.value)} placeholder=\"Aagtekerke\" />\n Overlijdensdatum update(\"deathDate\", event.currentTarget.value)} placeholder=\"dd-mm-jjjj\" />\n Overlijdensplaats update(\"deathPlace\", event.currentTarget.value)} placeholder=\"Vlissingen\" />\n Koppel aan\n Relatie\n Relatiedatum update(\"relationshipDate\", event.currentTarget.value)} placeholder=\"alleen bij partner\" />\n Relatieplaats update(\"relationshipPlace\", event.currentTarget.value)} placeholder=\"alleen bij partner\" />\n Notitie / bron

update(\"notes\", event.currentTarget.value)} placeholder=\"Akte, bron, onzekerheden of context\" /></label>\n          </div>\n          <div className=\"form-actions\"><button className=\"primary-button\" disabled={saving}><Plus />{saving ? \"Opslaan...\" : \"Entry opslaan\"}</button>{message ? <span className=\"message\">{message}</span> : null}{error ? <span className=\"message error\">{error}</span> : null}</div>\n        </form>\n        <aside className=\"panel panel-pad story-card\"><h2>Accounts</h2><p>Deze public val staat achter username/password auth. Accounts staan in de Val Town environment variable <strong>AUTH_USERS_JSON</strong>.</p><p>Nieuwe personen worden in Val Town SQLite opgeslagen en verschijnen direct in de boom en lijsten.</p></aside>\n      </div>\n    </SimplePage>\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: Event) {\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=\"panel login-card\">\n        <div className=\"login-art\">\n          <div className=\"crest\"><Anchor /></div>\n          <h1>Het geslacht De Visser</h1>\n          <p>Van De Krommebaan over Walcheren naar de families van nu. Een afgeschermd familiearchief met ruimte voor nieuwe vondsten.</p>\n          <div className=\"textile-swatch\" />\n        </div>\n        <form className=\"login-form\" onSubmit={submit as any}>\n          <h2>Familiepoort</h2>\n          <label className=\"field\"><span>Gebruikersnaam</span><input autoComplete=\"username\" value={username} onChange={(event) => setUsername(event.currentTarget.value)} placeholder=\"gebruikersnaam\" /></label>\n          <label className=\"field\"><span>Wachtwoord</span><input autoComplete=\"current-password\" type=\"password\" value={password} onChange={(event) => setPassword(event.currentTarget.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=\"login-note\"><ShieldCheck style={{ display: \"inline\", width: \"1rem\", verticalAlign: \"middle\" }} /> Public val, maar 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\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  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          <div className=\"brand-lockup\"><div className=\"crest\"><Anchor /></div><div><h1 className=\"brand-title\">Het geslacht De Visser</h1><p className=\"brand-subtitle\">Van De Krommebaan over Walcheren naar de families van nu</p></div></div>\n          <label className=\"search-wrap\"><Search /><input value={query} onChange={(event) => setQuery(event.currentTarget.value)} placeholder=\"Zoek persoon, plaats of bron...\" /></label>\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        <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} /> : null}\n        {activeTab === \"ancestors\" ? <AncestorsPage people={tree.people} setSelected={(id) => { setSelectedId(id); setActiveTab(\"overview\"); }} /> : null}\n        {activeTab === \"descendants\" ? <DescendantsPage tree={tree} setSelected={(id) => { setSelectedId(id); setActiveTab(\"overview\"); }} /> : null}\n        {activeTab === \"timeline\" ? <TimelinePage people={tree.people} setSelected={(id) => { setSelectedId(id); setActiveTab(\"overview\"); }} /> : 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    </div>\n  );\n}\n",[],[179,249,251],"eccae7a2-0ce4-448b-a356-b12e9f2180d8",["D",1783283017517],[196,197],[179,249],["D",1783283017517],[195,198,199,200,201],[179],["D",1783283017517],["D",1789523429989],{"_105":104,"_113":109},{"_105":104,"_106":107,"_108":109,"_18":56,"_110":111,"_112":25},{"_13":90,"_32":91,"_43":42,"_92":44,"_93":94,"_95":96,"_97":50,"_98":99,"_100":101,"_102":45,"_103":104},"ctx",{"_83":-5,"_135":304,"_305":306,"_307":308,"_309":25,"_310":25,"_311":25,"_312":60,"_313":-5,"_314":-7,"_315":-7,"_316":64,"_317":25,"_318":25,"_319":-5,"_320":25,"_321":25,"_322":25,"_323":-5},"ENV",{"_275":276,"_277":278,"_279":91,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291,"_292":293,"_294":295,"_296":297,"_298":299,"_300":301,"_302":303},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]
</article></body></html>

{label(person)}

{label(person)}

Tijdlijn

Plaatsen

Walcheren

Bronnen

{title}

{person.lineage_order}. {label(person)}

{label(person)}

{yearFrom(person.birth_date) || yearFrom(person.death_date)} · {label(person)}

{place}

{source.title}

Diff · v19