kinsite 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 chrismo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,67 @@
-# Temporary Holding Version
+# kinsite
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A static family-tree website generator. Give it a GEDCOM file; get back plain HTML
+pages for every person, with a readable family chart, that you can host anywhere.
+
+**Status: early.** The generator works and has tests, but the config format and
+output may still change.
+
+## Usage
+
+Needs Node 22 or later; no dependencies.
+
+```sh
+node build.mjs sample/kinsite.config.json   # build the fictional sample tree into site/
+open site/index.html
+npm test
+```
+
+For your own tree, write a `kinsite.config.json` next to your GEDCOM:
+
+```json
+{
+  "gedcom": "my-tree.ged",
+  "title": "My Family Tree",
+  "focus": "I1",
+  "out": "site",
+  "mediaRoot": "."
+}
+```
+
+| Key         | Meaning                                                                       | Default                |
+|-------------|-------------------------------------------------------------------------------|------------------------|
+| `gedcom`    | GEDCOM 7.0 file to read (required)                                            |                        |
+| `title`     | Site title on the index page                                                  | `Family Tree`          |
+| `focus`     | ID of the person the site centers on: home-page chart and every "Path to ..." | first person           |
+| `out`       | Output directory (deleted and rebuilt on each run)                            | `site`                 |
+| `mediaRoot` | Base directory for relative `FILE` paths of photos and documents              | the config's directory |
+
+Relative paths resolve against the config file's directory. `FOCUS=I3` or `OUT=dir` in
+the environment override the config for one run.
+
+Everything in `sample/` is invented: names, places, dates, numbers and addresses.
+
+## Goals
+
+- **Static output only.** No server, no database. JavaScript in the browser is fine,
+  but every page must be readable without it.
+- **No contact details.** The build removes phone numbers, email addresses, street
+  addresses and PO boxes from places and notes; never reads contact fields (`ADDR`,
+  `PHON`, `EMAIL`); and hides events marked `RESN PRIVACY` or `CONFIDENTIAL`.
+- **Living people suited to the audience.** Living people are not detected, so
+  their names and pages appear. That's fine for a site behind proper authorization.
+  For a public site, leave them out of the GEDCOM you build from, or at least set
+  `RESN PRIVACY` on their events.
+- **A chart that stays readable.** A focused neighborhood around one person, never a
+  whole tree shrunk until the text is useless.
+- **Works on a phone.**
+- **Stable URLs.** A person keeps the same page address across rebuilds.
+
+## Contributing
+
+Ideas, bugs and design notes are welcome as issues. Please don't paste real genealogy
+data of living people into an issue; invent a sample instead.
+
+## License
+
+[MIT](LICENSE)

package/build.mjs

@@ -0,0 +1,21 @@
+#!/usr/bin/env node
+// Static HTML family-tree site from a GEDCOM file.
+//
+// Usage:
+//   node build.mjs path/to/kinsite.config.json
+//   FOCUS=I3 node build.mjs kinsite.config.json   # re-center on another person
+//   OUT=/tmp/site node build.mjs kinsite.config.json
+import { loadConfig } from './lib/config.mjs'
+import { buildSite } from './lib/build.mjs'
+
+const file = process.argv[2]
+if (!file) {
+  console.error('usage: node build.mjs path/to/kinsite.config.json')
+  process.exit(2)
+}
+try {
+  buildSite(loadConfig(file, { focus: process.env.FOCUS, out: process.env.OUT }))
+} catch (e) {
+  console.error(`error: ${e.message}`)
+  process.exit(1)
+}

package/lib/build.mjs

@@ -0,0 +1,71 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { parseGedcom } from './gedcom.mjs'
+import { Kin } from './kin.mjs'
+import { Renderer } from './render.mjs'
+import { CSS } from './css.mjs'
+
+export function buildSite(config, { log = console.log } = {}) {
+  const { gedcom, out, mediaRoot, title, focus } = config
+  if (!fs.statSync(gedcom, { throwIfNoEntry: false })?.isFile()) throw new Error(`GEDCOM not found: ${gedcom}`)
+  const mediaOut = path.join(out, 'media')
+  const inside = (dir, f) => {
+    const rel = path.relative(dir, f)
+    return !path.isAbsolute(rel) && rel.split(path.sep)[0] !== '..'
+  }
+  for (const keep of [gedcom, mediaRoot]) {
+    if (inside(out, keep)) throw new Error(`refusing to delete ${out}: it contains ${keep}`)
+  }
+
+  log(`Building site from: ${gedcom}`)
+  log(`             into : ${out}`)
+  fs.rmSync(out, { recursive: true, force: true })
+  fs.mkdirSync(mediaOut, { recursive: true })
+
+  const { indi, fam } = parseGedcom(fs.readFileSync(gedcom, 'utf8'))
+
+  const copied = new Map()
+  const isFile = f => fs.statSync(f, { throwIfNoEntry: false })?.isFile() ?? false
+  for (const p of indi.values()) {
+    for (const md of p.media) {
+      const f = md.file
+      if (!f || copied.has(f)) continue
+      const src = path.isAbsolute(f) && fs.existsSync(f) ? f : path.join(mediaRoot, f)
+      if (!isFile(src)) continue
+      const base = path.basename(f)
+      let dst = path.join(mediaOut, base)
+      for (let n = 2; fs.existsSync(dst); n++) {
+        const ext = path.extname(base)
+        dst = path.join(mediaOut, `${base.slice(0, base.length - ext.length)}-${n}${ext}`)
+      }
+      fs.copyFileSync(src, dst)
+      const { atime, mtime } = fs.statSync(src)
+      fs.utimesSync(dst, atime, mtime)
+      copied.set(f, 'media/' + path.basename(dst))
+    }
+  }
+
+  fs.writeFileSync(path.join(out, 'style.css'), CSS)
+
+  const kin = new Kin(indi, fam, focus)
+  const r = new Renderer({ indi, fam, kin, copied, title, source: path.basename(gedcom) })
+  let withPhoto = 0
+  for (const pid of indi.keys()) {
+    const page = r.personPage(pid)
+    if (page.withPhoto) withPhoto++
+    fs.writeFileSync(path.join(out, `${pid}.html`), page.html)
+  }
+  fs.writeFileSync(path.join(out, 'index.html'), r.indexPage())
+
+  const stats = {
+    individuals: indi.size, families: fam.size, withPhoto, media: copied.size,
+    pages: fs.readdirSync(out).filter(f => f.endsWith('.html')).length,
+  }
+  log(`  individuals : ${stats.individuals}`)
+  log(`  families    : ${stats.families}`)
+  log(`  with photos : ${stats.withPhoto}`)
+  log(`  media copied: ${stats.media}`)
+  log(`Wrote ${stats.pages} HTML pages.`)
+  log(`Open it:  open "${path.join(out, 'index.html')}"`)
+  return stats
+}

package/lib/config.mjs

@@ -0,0 +1,25 @@
+// Site config: a JSON file whose relative paths resolve against its own directory.
+import fs from 'node:fs'
+import path from 'node:path'
+import { DEFAULT_TITLE } from './render.mjs'
+
+export const DEFAULTS = {
+  title: DEFAULT_TITLE,
+  focus: null,
+  out: 'site',
+  mediaRoot: '.',
+}
+const PATHS = ['gedcom', 'out', 'mediaRoot']
+
+export function loadConfig(file, overrides = {}) {
+  const raw = JSON.parse(fs.readFileSync(file, 'utf8'))
+  for (const k of Object.keys(raw)) {
+    if (k !== 'gedcom' && !(k in DEFAULTS)) throw new Error(`unknown config key: ${k} (in ${file})`)
+  }
+  const set = Object.fromEntries(Object.entries(overrides).filter(([, v]) => v !== undefined))
+  const c = { ...DEFAULTS, ...raw, ...set }
+  if (!c.gedcom) throw new Error(`config needs a "gedcom" path (in ${file})`)
+  const base = path.dirname(path.resolve(file))
+  for (const k of PATHS) c[k] = path.resolve(base, c[k])
+  return c
+}

package/lib/css.mjs

@@ -0,0 +1,56 @@
+export const CSS = `
+:root{--ink:#222;--mut:#777;--line:#e3e0d8;--bg:#faf8f4;--accent:#7a5c3e}
+*{box-sizing:border-box}
+body{font:16px/1.55 -apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);
+ background:var(--bg);margin:0}
+.wrap{max-width:820px;margin:0 auto;padding:24px}
+h1{font-family:Georgia,serif;font-weight:700;margin:.2em 0}
+a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
+.sub{color:var(--mut);margin:0 0 1.2em}
+.back{font-size:.9em}
+.card{background:#fff;border:1px solid var(--line);border-radius:10px;
+ padding:18px 20px;margin:14px 0}
+.evt{margin:.15em 0}.lbl{display:inline-block;min-width:64px;color:var(--mut);
+ font-size:.85em;text-transform:uppercase;letter-spacing:.04em}
+.yr{color:var(--mut);font-size:.9em}
+.unknown{color:var(--mut)}
+h2{font-size:.95em;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);
+ border-bottom:1px solid var(--line);padding-bottom:4px;margin:1.4em 0 .6em}
+ul.rel{list-style:none;padding:0;margin:0}ul.rel li{margin:.2em 0}
+.photos{display:flex;flex-wrap:wrap;gap:12px;margin:.4em 0}
+.photos figure{margin:0;width:200px}
+.photos img{width:100%;border:1px solid var(--line);border-radius:6px;display:block}
+.photos figcaption{font-size:.8em;color:var(--mut);margin-top:4px}
+.docs a{display:inline-block;margin:.2em .6em .2em 0}
+#q{width:100%;padding:10px 12px;font-size:1em;border:1px solid var(--line);
+ border-radius:8px;margin:.6em 0 .4em}
+.only{display:block;color:var(--mut);font-size:.9em;margin:0 0 1em;cursor:pointer}
+.cam{font-size:.85em}
+ul.people{list-style:none;padding:0;margin:0;columns:2;column-gap:28px}
+@media(max-width:640px){ul.people{columns:1}}
+ul.people li{margin:.12em 0;break-inside:avoid}
+details{margin:.5em 0}summary{cursor:pointer;color:var(--mut)}
+.note{white-space:pre-wrap;font-size:.92em;color:#444;border-left:3px solid var(--line);
+ padding-left:10px;margin:.4em 0}
+footer{color:var(--mut);font-size:.85em;margin:2em 0 1em;border-top:1px solid var(--line);
+ padding-top:10px}
+.pedwrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:#fff;
+ padding:12px;margin:.5em 0}
+svg.hg{display:block}
+svg.hg text{font:12px -apple-system,Segoe UI,sans-serif;fill:var(--ink)}
+svg.hg .hg-yr{fill:var(--mut);font-size:11px}
+svg.hg path{fill:none;stroke:#d3c4ad;stroke-width:1.5}
+svg.hg rect{fill:#fbf7f0;stroke:#d8cdbb}
+svg.hg .hg-self{fill:#efe3d2;stroke:var(--accent);stroke-width:1.6}
+svg.hg a{cursor:pointer}svg.hg a:hover rect{fill:#f3e9d9}
+svg.hg .hg-stub rect,svg.hg .hg-more rect{fill:none;stroke-dasharray:4 3}
+svg.hg .hg-stub text,svg.hg .hg-more text{fill:var(--mut);font-style:italic}
+.descent{background:#f1ece2;border:1px solid var(--line);border-radius:8px;
+ padding:9px 13px;margin:.5em 0;font-size:.95em;line-height:1.7}
+.descent .lbl{display:block;color:var(--mut);font-size:.8em;text-transform:uppercase;
+ letter-spacing:.04em;margin-bottom:3px}
+.descent .hop{color:var(--accent);font-weight:700;padding:0 1px}
+ul.tree{list-style:none;margin:.2em 0;padding-left:15px;border-left:1px solid var(--line)}
+ul.tree ul.tree{margin-left:2px}
+ul.tree li{margin:.16em 0}
+`

package/lib/dates.mjs

@@ -0,0 +1,7 @@
+export const yr = d => (d || '').match(/\d{4}/)?.[0] ?? ''
+
+/** Sort key by birth year; people without one sort last and keep their order. */
+export const byBirth = indi => (a, b) => {
+  const ya = yr(indi.get(a)?.birt?.date), yb = yr(indi.get(b)?.birt?.date)
+  return (ya ? Number(ya) : Infinity) - (yb ? Number(yb) : Infinity)
+}

package/lib/gedcom.mjs

@@ -0,0 +1,103 @@
+// Minimal GEDCOM 7.0 reader: only what the site renders.
+
+const EVENTS = new Set(['BIRT', 'CHR', 'BAPM', 'DEAT', 'BURI', 'RESI', 'EMIG', 'OCCU', 'EVEN'])
+
+export function parseGedcom(text) {
+  const indi = new Map(), fam = new Map(), obje = new Map()
+  let cur = null, ctype = null, evt = null, media = null, note = false, sub = null
+
+  for (const ln of text.replace(/\r\n?/g, '\n').split('\n')) {
+    if (!ln.trim()) continue
+    const m = ln.match(/^(\d+) ([^\n]*)$/)
+    if (!m) continue
+    const lvl = Number(m[1]), rest = m[2]
+    if (lvl === 0) {
+      cur = ctype = evt = media = null
+      note = false
+      const r = rest.match(/^@(\w+)@ (\w+)$/)
+      if (r && r[2] === 'INDI') {
+        ctype = 'INDI'
+        if (!indi.has(r[1])) indi.set(r[1], {
+          id: r[1], name: '', surn: '', giv: '', sex: '',
+          birt: {}, deat: {}, events: [], famc: null, fams: [], media: [], notes: [],
+        })
+        cur = indi.get(r[1])
+      } else if (r && r[2] === 'FAM') {
+        ctype = 'FAM'
+        if (!fam.has(r[1])) fam.set(r[1], { id: r[1], husb: null, wife: null, chil: [], marr: {} })
+        cur = fam.get(r[1])
+      } else if (r && r[2] === 'OBJE') {
+        ctype = 'OBJE'
+        cur = { file: '', title: '', form: '' }
+        obje.set(r[1], cur)
+      }
+      continue
+    }
+    if (cur === null) continue
+    const sp = rest.indexOf(' ')
+    const tag = sp < 0 ? rest : rest.slice(0, sp)
+    let val = sp < 0 ? '' : rest.slice(sp + 1)
+    if (val.startsWith('@@')) val = val.slice(1)
+    if (lvl === 2) sub = tag
+    const phrase = lvl === 3 && sub === 'DATE' && tag === 'PHRASE'
+    if (ctype === 'OBJE') {
+      if (lvl === 1) {
+        media = tag === 'FILE' && !cur.file ? cur : null
+        if (media) media.file = val.trim()
+      } else if (lvl === 2 && media) {
+        if (tag === 'TITL') media.title = val.trim()
+        else if (tag === 'FORM') media.form = val.trim()
+      }
+    } else if (ctype === 'INDI') {
+      if (lvl === 1) {
+        evt = null
+        note = false
+        if (tag === 'NAME' && !cur.name) {
+          cur.name = val.replaceAll('/', '').trim()
+          const s = val.match(/\/([^/]*)\//)
+          cur.surn = s ? s[1].trim() : ''
+          cur.giv = val.replace(/\/[^/]*\//g, '').trim()
+        } else if (tag === 'SEX') cur.sex = val.trim()
+        else if (EVENTS.has(tag)) {
+          evt = { tag, val: val.trim() }
+          cur.events.push(evt)
+          if (tag === 'BIRT' && !cur.birt.tag) cur.birt = evt
+          if (tag === 'DEAT' && !cur.deat.tag) cur.deat = evt
+        } else if (tag === 'FAMC') cur.famc = stripAt(val)
+        else if (tag === 'FAMS') cur.fams.push(stripAt(val))
+        else if (tag === 'OBJE') cur.media.push(stripAt(val))
+        else if (tag === 'NOTE') {
+          cur.notes.push(val)
+          note = true
+        }
+      } else if (evt && lvl === 2) {
+        if (tag === 'DATE') evt.date = val.trim()
+        else if (tag === 'PLAC') evt.plac = val.trim()
+        else if (tag === 'TYPE') evt.type = val.trim()
+        else if (tag === 'RESN') evt.resn = val.trim()
+      } else if (evt && phrase) {
+        evt.phrase = val.trim()
+      } else if (note && tag === 'CONT') {
+        cur.notes[cur.notes.length - 1] += '\n' + val
+      }
+    } else {
+      if (lvl === 1) {
+        evt = null
+        if (tag === 'HUSB') cur.husb = stripAt(val)
+        else if (tag === 'WIFE') cur.wife = stripAt(val)
+        else if (tag === 'CHIL') cur.chil.push(stripAt(val))
+        else if (tag === 'MARR') evt = cur.marr
+      } else if (evt && lvl === 2) {
+        if (tag === 'DATE') evt.date = val.trim()
+        else if (tag === 'PLAC') evt.plac = val.trim()
+        else if (tag === 'RESN') evt.resn = val.trim()
+      } else if (evt && phrase) evt.phrase = val.trim()
+    }
+  }
+  for (const p of indi.values()) {
+    p.media = p.media.flatMap(id => obje.get(id) ?? [])
+  }
+  return { indi, fam }
+}
+
+const stripAt = s => s.replace(/^@+|@+$/g, '')

package/lib/hourglass.mjs

@@ -0,0 +1,141 @@
+// Static SVG hourglass chart for one person: grandparents and parents above,
+// siblings and spouses beside, children below. Long lists collapse into a
+// "+N more" box so the chart stays a readable neighbourhood, never a whole tree.
+import { esc } from './html.mjs'
+import { byBirth } from './dates.mjs'
+
+export const BOX = { w: 150, h: 44 }
+export const CAPS = { sibs: 3, spouses: 2, kids: 4 } // sibs is per side of the focus
+const HGAP = 18, VGAP = 34, PAD = 8
+const STEP = BOX.w + HGAP
+const NAME_CHARS = 22
+
+// Up to `cap` boxes, keeping the ones nearest the focus; the rest become one "+N more".
+function capped(list, cap, nearestLast = false) {
+  if (list.length <= cap) return { shown: list, more: 0 }
+  const n = cap - 1
+  return { shown: nearestLast ? list.slice(-n) : list.slice(0, n), more: list.length - n }
+}
+
+export function hourglassLayout(pid, { indi, fam }, caps = CAPS) {
+  const has = id => (id && indi.has(id) ? id : null)
+  const parentsOf = id => {
+    const f = fam.get(indi.get(id)?.famc)
+    return f ? [has(f.husb), has(f.wife)].filter(Boolean) : []
+  }
+  const parents = parentsOf(pid)
+  const chil = (fam.get(indi.get(pid)?.famc)?.chil ?? []).filter(c => c === pid || indi.has(c)).sort(byBirth(indi))
+  const older = chil.slice(0, chil.indexOf(pid)), younger = chil.slice(chil.indexOf(pid) + 1)
+  const spouses = [], kids = []
+  for (const fid of indi.get(pid)?.fams ?? []) {
+    const f = fam.get(fid)
+    if (!f) continue
+    const sp = has(f.husb === pid ? f.wife : f.husb)
+    if (sp) spouses.push(sp)
+    kids.push(...f.chil.filter(c => indi.has(c)))
+  }
+  kids.sort(byBirth(indi))
+  const grands = parents.map(parentsOf)
+
+  // cx is the box centre relative to the focus at 0, resolved to x once every row is placed.
+  const boxes = [], edges = []
+  const put = (row, cx, props) => {
+    const b = { row, cx, ...props }
+    boxes.push(b)
+    return b
+  }
+  const person = (row, cx, id) => put(row, cx, { id, kind: 'person' })
+  const more = (row, cx, n) => put(row, cx, { id: null, kind: 'more', text: `+${n} more` })
+
+  // Focus row: [+N more] older siblings | focus | spouses [+N more] | younger siblings [+N more]
+  const self = put('focus', 0, { id: pid, kind: 'self' })
+  const O = capped(older, caps.sibs, true)
+  const sibBoxes = O.shown.map((id, i) => person('focus', -(O.shown.length - i) * STEP, id))
+  if (O.more) sibBoxes.unshift(more('focus', -(O.shown.length + 1) * STEP, O.more))
+  const W = capped(spouses, caps.spouses)
+  const spBoxes = W.shown.map((id, i) => person('focus', (i + 1) * STEP, id))
+  if (W.more) spBoxes.push(more('focus', (W.shown.length + 1) * STEP, W.more))
+  const Y = capped(younger, caps.sibs)
+  let col = spBoxes.length
+  for (const id of Y.shown) sibBoxes.push(person('focus', ++col * STEP, id))
+  if (Y.more) sibBoxes.push(more('focus', ++col * STEP, Y.more))
+
+  const K = capped(kids, caps.kids), nK = K.shown.length + (K.more ? 1 : 0)
+  const kidX = i => (spouses.length === 1 ? STEP / 2 : 0) + (i - (nK - 1) / 2) * STEP
+  const kidBoxes = K.shown.map((id, i) => person('child', kidX(i), id))
+  if (K.more) kidBoxes.push(more('child', kidX(K.shown.length), K.more))
+
+  let parBoxes = []
+  if (parents.length === 2) {
+    const spread = grands.some(g => g.length) ? 2 * STEP : STEP
+    parBoxes = [person('parent', -spread / 2, parents[0]), person('parent', spread / 2, parents[1])]
+  } else if (parents.length === 1) {
+    parBoxes = [person('parent', 0, parents[0])]
+  } else {
+    put('parent', 0, { id: null, kind: 'stub', text: 'no parents recorded' })
+  }
+  const grandBoxes = parBoxes.map((pb, i) => {
+    const g = grands[i]
+    if (g.length === 2) return [person('grand', pb.cx - STEP / 2, g[0]), person('grand', pb.cx + STEP / 2, g[1])]
+    return g.map(id => person('grand', pb.cx, id))
+  })
+
+  const rowNames = ['grand', 'parent', 'focus', 'child'].filter(r => boxes.some(b => b.row === r))
+  const rowY = Object.fromEntries(rowNames.map((r, i) => [r, PAD + i * (BOX.h + VGAP)]))
+  const shift = PAD + BOX.w / 2 - Math.min(...boxes.map(b => b.cx))
+  for (const b of boxes) {
+    b.x = b.cx + shift - BOX.w / 2
+    b.y = rowY[b.row]
+    delete b.cx
+  }
+  const width = Math.max(...boxes.map(b => b.x)) + BOX.w + PAD
+  const height = PAD + rowNames.length * BOX.h + (rowNames.length - 1) * VGAP + PAD
+
+  const mid = b => b.x + BOX.w / 2
+  const midY = b => b.y + BOX.h / 2
+  const couple = pair => {
+    if (pair.length === 2) edges.push([pair[0].x + BOX.w, midY(pair[0]), pair[1].x, midY(pair[1])])
+  }
+  const descend = (from, children) => {
+    if (!from.length || !children.length) return
+    const x0 = from.length === 2 ? (mid(from[0]) + mid(from[1])) / 2 : mid(from[0])
+    const y0 = from.length === 2 ? midY(from[0]) : from[0].y + BOX.h
+    const bus = children[0].y - VGAP / 2
+    const xs = children.map(mid)
+    edges.push([x0, y0, x0, bus])
+    edges.push([Math.min(x0, ...xs), bus, Math.max(x0, ...xs), bus])
+    for (const c of children) edges.push([mid(c), bus, mid(c), c.y])
+  }
+  grandBoxes.forEach((g, i) => { couple(g); descend(g, [parBoxes[i]]) })
+  couple(parBoxes)
+  descend(parBoxes, [...sibBoxes, self])
+  const row = [self, ...spBoxes]
+  for (let i = 1; i < row.length; i++) couple([row[i - 1], row[i]])
+  descend(spouses.length === 1 ? [self, spBoxes[0]] : [self], kidBoxes)
+
+  return { boxes, edges, width, height }
+}
+
+const chars = s => Array.from(s)
+const trunc = s => (chars(s).length <= NAME_CHARS ? s : chars(s).slice(0, NAME_CHARS - 1).join('').trimEnd() + '…')
+const f1 = n => (Number.isInteger(n) ? String(n) : n.toFixed(1))
+
+/** label(id) -> [name, years] */
+export function hourglassSvg({ boxes, edges, width, height }, label) {
+  const out = edges.map(([x1, y1, x2, y2]) =>
+    `<path d="M${f1(x1)},${f1(y1)} L${f1(x2)},${f1(y2)}"/>`)
+  for (const b of boxes) {
+    const rect = cls => `<rect${cls ? ` class="${cls}"` : ''} x="${f1(b.x)}" y="${f1(b.y)}" width="${BOX.w}" height="${BOX.h}" rx="3"/>`
+    if (b.id === null) {
+      out.push(`<g class="hg-${b.kind}">${rect()}` +
+        `<text x="${f1(b.x + BOX.w / 2)}" y="${f1(b.y + BOX.h / 2 + 4)}" text-anchor="middle">${esc(b.text)}</text></g>`)
+      continue
+    }
+    const [name, years] = label(b.id)
+    out.push(`<a href="${b.id}.html">${rect(b.kind === 'self' ? 'hg-self' : 'hg-box')}<title>${esc(name)}</title>` +
+      `<text x="${f1(b.x + 8)}" y="${f1(b.y + 18)}">${esc(trunc(name))}</text>` +
+      `<text x="${f1(b.x + 8)}" y="${f1(b.y + 34)}" class="hg-yr">${esc(years)}</text></a>`)
+  }
+  return `<div class="pedwrap"><svg viewBox="0 0 ${f1(width)} ${f1(height)}" width="${f1(width)}" ` +
+    `height="${f1(height)}" xmlns="http://www.w3.org/2000/svg" class="hg">${out.join('')}</svg></div>`
+}

package/lib/html.mjs

@@ -0,0 +1,2 @@
+const ESCAPES = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#x27;' }
+export const esc = s => (s || '').replace(/[&<>"']/g, c => ESCAPES[c])

package/lib/kin.mjs

@@ -0,0 +1,58 @@
+// Shortest parent/child path from anyone to the primary person (BFS).
+
+export class Kin {
+  constructor(indi, fam, primaryId) {
+    this.indi = indi
+    this.fam = fam
+    this.primary = indi.has(primaryId) ? primaryId : indi.has('I1') ? 'I1' : (indi.keys().next().value ?? null)
+    this.prev = new Map()
+    if (this.primary === null) return
+    this.prev.set(this.primary, null)
+    const queue = [this.primary]
+    for (let i = 0; i < queue.length; i++) {
+      for (const v of this.neighbors(queue[i])) {
+        if (!this.prev.has(v)) {
+          this.prev.set(v, queue[i])
+          queue.push(v)
+        }
+      }
+    }
+  }
+
+  parentsOf(pid) {
+    const p = this.indi.get(pid)
+    if (p && this.fam.has(p.famc)) {
+      const f = this.fam.get(p.famc)
+      return [f.husb, f.wife]
+    }
+    return [null, null]
+  }
+
+  childrenOf(pid) {
+    const kids = []
+    for (const fid of this.indi.get(pid)?.fams ?? []) {
+      const f = this.fam.get(fid)
+      if (f) kids.push(...f.chil)
+    }
+    return kids
+  }
+
+  neighbors(pid) {
+    return [...this.parentsOf(pid).filter(Boolean), ...this.childrenOf(pid)]
+  }
+
+  /** [x, ..., primary], or null for the primary person and the unconnected */
+  relPath(x) {
+    if (x === this.primary || !this.prev.has(x)) return null
+    const chain = [x]
+    while (chain.at(-1) !== this.primary) chain.push(this.prev.get(chain.at(-1)))
+    return chain
+  }
+
+  /** direction of b relative to a */
+  hop(a, b) {
+    if (this.parentsOf(a).includes(b)) return '&uarr;'
+    if (this.parentsOf(b).includes(a)) return '&darr;'
+    return '&middot;'
+  }
+}

package/lib/pii.mjs

@@ -0,0 +1,36 @@
+// Contact details recorded in the GEDCOM must never reach the built site.
+import fs from 'node:fs'
+import path from 'node:path'
+import { esc } from './html.mjs'
+import { CONTACT } from './redact.mjs'
+
+const PII_TAGS = new Set(['ADDR', 'ADR1', 'POST', 'PHON', 'EMAIL'])
+const TEXT_EXT = new Set(['.html', '.css', '.js', '.txt'])
+
+const textFiles = dir => fs.readdirSync(dir, { recursive: true }).sort()
+  .filter(f => TEXT_EXT.has(path.extname(f)) && fs.statSync(path.join(dir, f)).isFile())
+
+export function piiValues(gedText) {
+  const values = new Set()
+  for (const ln of gedText.split(/\r\n?|\n/)) {
+    const m = ln.match(/^\d+ (\w+) (.*\S)/)
+    if (m && PII_TAGS.has(m[1])) values.add(m[2].trim())
+  }
+  return [...values]
+}
+
+export function findLeaks(values, dir) {
+  const leaks = []
+  for (const file of textFiles(dir)) {
+    const text = fs.readFileSync(path.join(dir, file), 'utf8')
+    for (const value of values) {
+      if (text.includes(value) || text.includes(esc(value))) leaks.push({ file, value })
+    }
+  }
+  return leaks
+}
+
+export function findContactText(dir) {
+  return textFiles(dir).flatMap(file =>
+    [...fs.readFileSync(path.join(dir, file), 'utf8').matchAll(CONTACT)].map(m => ({ file, value: m[0] })))
+}

package/lib/redact.mjs

@@ -0,0 +1,24 @@
+// PII stays in the GEDCOM; the site shows places to city level and no contact details.
+
+const EMAIL = /[\w.%+-]+@[\w-]+(?:\.[\w-]+)+/g
+const PHONE = /(?:\+?1[-. ])?\(?\b\d{3}\)?[-. ]\d{3}[-. ]\d{4}\b/g
+const STREET = /#?\b\d{1,5}\s+(?:[A-Z][\w']*\.?\s+){1,3}?(?:St|Ave|Dr|Rd|Blvd|Ct|Ln|Way|Pl|Street|Avenue|Drive|Road|Lane|Trail)\b\.?/g
+const BOX = /\b(?:(?:Rt|Route|RR)\.?\s?\d+,?\s+)?(?:HCRT|P\.?\s?O\.?\s?Box|Box)\s?\d+/g
+const ZIP = /\b([A-Z]{2}) \d{5}(?:-\d{4})?\b/g
+
+export const CONTACT = new RegExp([EMAIL, PHONE, STREET, BOX].map(r => r.source).join('|'), 'g')
+
+export const redact = s => s
+  .replace(EMAIL, '[email]')
+  .replace(PHONE, '[phone]')
+  .replace(BOX, '[address]')
+  .replace(STREET, '[address]')
+  .replace(ZIP, '$1 [address]')
+
+export function place(s) {
+  const t = s.replace(STREET, '').replace(BOX, '')
+  if (t === s && !/^\s*#?\d/.test(s)) return s
+  const segs = t.split(',')
+  if (!segs[0].trim() || /^\s*#?\d/.test(segs[0])) segs.shift()
+  return segs.join(',').replace(/\s{2,}/g, ' ').trim()
+}

package/lib/render.mjs

@@ -0,0 +1,211 @@
+// HTML for the person pages and the index. Output is pinned by test/golden.test.mjs.
+import path from 'node:path'
+import { place, redact } from './redact.mjs'
+import { esc } from './html.mjs'
+import { yr, byBirth } from './dates.mjs'
+import { hourglassLayout, hourglassSvg } from './hourglass.mjs'
+
+export { esc, yr }
+export const DEFAULT_TITLE = 'Family Tree'
+export const IMG_EXT = new Set(['.jpg', '.jpeg', '.png', '.gif', '.webp'])
+
+const known = s => ((s ?? '').trim() === '?' ? '' : s ?? '')
+const restricted = e => (e.resn ?? '').toUpperCase().split(/[\s,]+/).some(t => t === 'PRIVACY' || t === 'CONFIDENTIAL')
+
+export function life(p) {
+  const b = restricted(p.birt) ? '' : yr(p.birt.date), d = restricted(p.deat) ? '' : yr(p.deat.date)
+  return b || d ? `${b}–${d}` : ''
+}
+
+const QUALIFIERS = { ABT: 'about', BEF: 'before', AFT: 'after', CAL: 'calculated', EST: 'estimated', FROM: 'from', TO: 'to' }
+
+function readable(date) {
+  const range = date.match(/^(?:BET (.+) AND|FROM (.+) TO) (.+)$/)
+  if (range) return `${range[1] ?? range[2]} – ${range[3]}`
+  const [, q, rest] = date.match(/^(\w+) (.+)$/) ?? []
+  return QUALIFIERS[q] ? `${QUALIFIERS[q]} ${rest}` : date
+}
+
+const yearPair = s => /^\d{4}\/\d{1,4}$/.test(s ?? '')
+
+export function when(e) {
+  const date = e.date ? readable(e.date) : ''
+  if (!e.phrase || (date && yearPair(e.phrase))) return date
+  return date ? `${date} (${e.phrase})` : e.phrase
+}
+
+const LABELS = {
+  BIRT: 'Born', CHR: 'Christened', BAPM: 'Baptized', DEAT: 'Died', BURI: 'Buried',
+  RESI: 'Residence', EMIG: 'Emigrated', OCCU: 'Occupation',
+}
+const ORDER = { BIRT: -3, CHR: -2, BAPM: -1, DEAT: 1, BURI: 2 }
+
+export class Renderer {
+  constructor({ indi, fam, kin, copied, title = DEFAULT_TITLE, source = '' }) {
+    Object.assign(this, { indi, fam, kin, copied, title, source })
+  }
+
+  page(title, body) {
+    return `<!doctype html><html lang=en><head><meta charset=utf-8>` +
+      `<meta name=viewport content='width=device-width,initial-scale=1'>` +
+      `<title>${esc(title)}</title><link rel=stylesheet href=style.css></head>` +
+      `<body><div class=wrap>${body}` +
+      `<footer>Generated ${this.source ? `from <code>${esc(this.source)}</code> ` : ''}by kinsite ` +
+      `&middot; ${this.indi.size} individuals &middot; ${this.fam.size} families</footer>` +
+      `</div></body></html>`
+  }
+
+  plink(pid) {
+    const p = this.indi.get(pid)
+    if (!p) return '<span class=unknown>(unknown)</span>'
+    const l = life(p)
+    return `<a href="${pid}.html">${esc(p.name || '(unnamed)')}</a>` + (l ? ` <span class=yr>(${l})</span>` : '')
+  }
+
+  evtHtml(title, e) {
+    const bits = [], val = known(e.val), plac = place(known(e.plac))
+    if (val && val !== 'Y') bits.push(esc(redact(val)))
+    if (when(e)) bits.push(esc(when(e)))
+    if (plac) bits.push(esc(plac.replace(/[, ]+$/, '')))
+    if (!bits.length) {
+      if (e.tag !== 'BIRT' && e.tag !== 'DEAT') return ''
+      bits.push('date unknown')
+    }
+    return `<div class="evt"><span class="lbl">${title}</span> ${bits.join(' &middot; ')}</div>`
+  }
+
+  eventsHtml(p) {
+    const label = e => (e.tag !== 'EVEN' ? LABELS[e.tag] : e.type === 'Living' ? 'Residence' : esc(e.type || 'Event'))
+    return p.events.filter(e => !restricted(e)).sort((a, b) => (ORDER[a.tag] ?? 0) - (ORDER[b.tag] ?? 0))
+      .map(e => this.evtHtml(label(e), e)).join('')
+  }
+
+  marriageHtml(mar) {
+    const text = [when(mar), place(known(mar.plac))].filter(Boolean).join(' ').trim()
+    return text && !restricted(mar) ? ` <span class=yr>(m. ${esc(text)})</span>` : ''
+  }
+
+  chartSvg(pid) {
+    const label = id => {
+      const p = this.indi.get(id)
+      return [p.name || '(unnamed)', life(p)]
+    }
+    return hourglassSvg(hourglassLayout(pid, this), label)
+  }
+
+  descendantsHtml(pid, depth) {
+    const kids = depth > 0 ? this.kin.childrenOf(pid).sort(byBirth(this.indi)) : []
+    if (!kids.length) return ''
+    return '<ul class=tree>' +
+      kids.map(c => `<li>${this.plink(c)}${this.descendantsHtml(c, depth - 1)}</li>`).join('') + '</ul>'
+  }
+
+  attachments(p) {
+    const pairs = p.media.filter(md => this.copied.has(md.file)).map(md => [md, this.copied.get(md.file)])
+    const isImg = ([md]) => IMG_EXT.has(path.extname(md.file).toLowerCase())
+    return { imgs: pairs.filter(isImg), docs: pairs.filter(x => !isImg(x)) }
+  }
+
+  personPage(pid) {
+    const p = this.indi.get(pid), { kin, fam } = this
+    const b = ['<p class=back><a href="index.html">&larr; All people</a></p>',
+      `<h1>${esc(p.name || '(unnamed)')}</h1>`]
+    const meta = [{ M: 'Male', F: 'Female' }[p.sex] ?? '', life(p)].filter(Boolean).join(' &middot; ')
+    if (meta) b.push(`<p class=sub>${meta}</p>`)
+
+    if (pid !== kin.primary) {
+      const rp = kin.relPath(pid)
+      if (rp && rp.length > 1) {
+        let crumb = this.plink(rp[0])
+        for (let i = 0; i + 1 < rp.length; i++) {
+          crumb += ` <span class=hop>${kin.hop(rp[i], rp[i + 1])}</span> ` + this.plink(rp[i + 1])
+        }
+        b.push(`<div class=descent><span class=lbl>Path to ` +
+          `${esc(this.indi.get(kin.primary).name)} (${rp.length - 1} steps)</span>${crumb}</div>`)
+      }
+    }
+
+    const { imgs, docs } = this.attachments(p)
+    if (imgs.length) {
+      const cells = imgs.map(([md, src]) =>
+        `<figure><a href="${esc(src)}"><img src="${esc(src)}" alt="${esc(md.title)}"></a>` +
+        `<figcaption>${esc(md.title)}</figcaption></figure>`).join('')
+      b.push(`<div class="photos">${cells}</div>`)
+    }
+
+    const vit = this.eventsHtml(p)
+    if (vit) b.push(`<div class=card>${vit}</div>`)
+
+    b.push('<h2>Family</h2>' + this.chartSvg(pid))
+
+    const rel = []
+    const par = []
+    if (p.famc && fam.has(p.famc)) {
+      const f = fam.get(p.famc)
+      for (const who of [f.husb, f.wife]) if (who) par.push(this.plink(who))
+    }
+    if (par.length) rel.push('<h2>Parents</h2><ul class=rel>' + par.map(x => `<li>${x}</li>`).join('') + '</ul>')
+    for (const fid of p.fams) {
+      const f = fam.get(fid)
+      if (!f) continue
+      const spouse = f.husb === pid ? f.wife : f.husb
+      const sp = []
+      if (spouse) {
+        sp.push(`<li>${this.plink(spouse)}${this.marriageHtml(f.marr)}</li>`)
+      }
+      const kids = [...f.chil].sort(byBirth(this.indi)).map(c => `<li>${this.plink(c)}</li>`)
+      rel.push('<h2>Spouse &amp; children</h2><ul class=rel>' + sp.join('') + kids.join('') + '</ul>')
+    }
+    if (rel.length) b.push(rel.join(''))
+
+    const sibs = p.famc ? (fam.get(p.famc)?.chil ?? []).filter(c => c !== pid).sort(byBirth(this.indi)) : []
+    if (sibs.length) b.push('<h2>Siblings</h2><ul class=rel>' + sibs.map(c => `<li>${this.plink(c)}</li>`).join('') + '</ul>')
+
+    const desc = this.descendantsHtml(pid, 3)
+    if (desc) b.push('<h2>Descendants</h2>' + desc)
+
+    if (docs.length) {
+      const links = docs.map(([md, src]) => `<a href="${esc(src)}">${esc(md.title || path.basename(src))}</a>`).join('')
+      b.push(`<h2>Documents</h2><div class=docs>${links}</div>`)
+    }
+
+    const notes = p.notes.filter(n => n.trim())
+    if (notes.length) b.push('<h2>Notes</h2>' + notes.map(n => `<div class=note>${esc(redact(n))}</div>`).join(''))
+
+    return { html: this.page(p.name || pid, b.join('')), withPhoto: imgs.length > 0 }
+  }
+
+  indexPage() {
+    const lower = s => s.toLowerCase()
+    const cmp = (a, b) => (a < b ? -1 : a > b ? 1 : 0)
+    const people = [...this.indi.values()].sort((a, b) =>
+      cmp(lower(a.surn), lower(b.surn)) || cmp(lower(a.giv), lower(b.giv)) || cmp(a.id, b.id))
+    const hasPhoto = p => this.attachments(p).imgs.length > 0
+    const withphoto = people.filter(hasPhoto).length
+    const items = people.map(p => {
+      const disp = p.surn ? `${esc(p.surn)}, ${esc(p.giv)}` : esc(p.name || '(unnamed)')
+      const l = life(p)
+      const photo = hasPhoto(p)
+      return `<li data-n="${esc(p.name.toLowerCase())}"${photo ? ' data-photo' : ''}>` +
+        `<a href="${p.id}.html">${disp}</a>` + (l ? ` <span class=yr>${l}</span>` : '') +
+        (photo ? ' <span class=cam title="Has photos">📷</span>' : '') + '</li>'
+    })
+    const root = this.kin.primary ?? people[0]?.id ?? null
+    const hero = root ? `<h2>Family of ${esc(this.indi.get(root).name)}</h2>${this.chartSvg(root)}` : ''
+    const body = `<h1>${esc(this.title)}</h1>` +
+      `<p class=sub>${this.indi.size} individuals &middot; ${this.fam.size} families ` +
+      `&middot; ${withphoto} with photos</p>` +
+      hero +
+      '<h2>All people</h2>' +
+      '<input id=q placeholder="Filter by name…" autocomplete=off>' +
+      `<label class=only><input type=checkbox id=photos> Only people with photos (${withphoto})</label>` +
+      `<ul class=people id=list>${items.join('')}</ul>` +
+      "<script>var q=document.getElementById('q'),ph=document.getElementById('photos')," +
+      "L=document.getElementById('list').children;" +
+      "function f(){var v=q.value.toLowerCase();" +
+      'for(var i=0;i<L.length;i++){L[i].style.display=' +
+      "L[i].getAttribute('data-n').indexOf(v)>-1&&(!ph.checked||L[i].hasAttribute('data-photo'))?'':'none';}}" +
+      "q.addEventListener('input',f);ph.addEventListener('change',f);f();</script>"
+    return this.page(this.title, body)
+  }
+}

package/package.json

@@ -1,6 +1,36 @@
 {
   "name": "kinsite",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Static HTML family-tree site from a GEDCOM file",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chrismo/kinsite.git"
+  },
+  "homepage": "https://github.com/chrismo/kinsite#readme",
+  "bugs": {
+    "url": "https://github.com/chrismo/kinsite/issues"
+  },
+  "keywords": [
+    "gedcom",
+    "genealogy",
+    "family-tree",
+    "static-site"
+  ],
+  "engines": {
+    "node": ">=22"
+  },
+  "files": [
+    "lib/",
+    "build.mjs"
+  ],
+  "bin": {
+    "kinsite": "build.mjs"
+  },
+  "scripts": {
+    "build": "node build.mjs",
+    "sample": "node build.mjs sample/kinsite.config.json",
+    "test": "node --test 'test/*.test.mjs'"
+  }
+}