familytree

app.js (60244B)

---

 /* ── State ── */
 const state = {
   username: '',
   email: '',
   trees: [],
   activeTreeId: null,
   graph: { people: [], partnerships: [], parentLinks: [] },
   selectedPersonId: null,
   canEdit: false,
   _editingPersonId: null,
   _editingPartnershipId: null,
   _ctxTreeId: null,
   _connectingPersonId: null,
   _siblingMode: false,
   _siblingModePersonId: null,
 };
 
 /* ── API helpers ── */
 async function api(method, path, body) {
   const opts = { method, headers: {} };
   if (body !== undefined) {
     opts.headers['Content-Type'] = 'application/json';
     opts.body = JSON.stringify(body);
   }
   const r = await fetch(path, opts);
   if (!r.ok) {
     const err = await r.json().catch(() => ({ detail: r.statusText }));
     throw new Error(err.detail || r.statusText);
   }
   if (r.status === 204) return null;
   return r.json();
 }
 
 function showError(msg) {
   console.error(msg);
   const el = document.createElement('div');
   el.style.cssText = 'position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);background:var(--red);color:#fff;padding:0.6rem 1.2rem;border-radius:8px;font-size:0.875rem;z-index:9999;box-shadow:0 4px 16px rgba(0,0,0,0.4);white-space:nowrap';
   el.textContent = msg;
   document.body.appendChild(el);
   setTimeout(() => el.remove(), 4000);
 }
 
 /* ── Boot ── */
 async function boot() {
   try {
     const me = await api('GET', '/api/me');
     state.username = me.username;
     state.email = me.email;
     document.getElementById('topbarUsername').textContent = me.display_name || me.username;
     await loadTrees();
   } catch(e) {
     showError('Failed to load: ' + e.message);
   }
 }
 
 async function loadTrees() {
   state.trees = await api('GET', '/api/trees');
   renderSidebar();
   if (state.activeTreeId) {
     const still = state.trees.find(t => t.id === state.activeTreeId);
     if (still) await loadGraph(state.activeTreeId);
     else selectTree(null);
   } else if (state.trees.length) {
     const saved = parseInt(localStorage.getItem('activeTreeId'));
     const match = saved && state.trees.find(t => t.id === saved);
     if (match) await selectTree(match.id);
     else if (state.trees.length === 1) await selectTree(state.trees[0].id);
   }
 }
 
 /* ── Sidebar ── */
 function renderSidebar() {
   const list = document.getElementById('treeList');
   list.innerHTML = '';
   for (const t of state.trees) {
     const item = document.createElement('div');
     item.className = 'tree-item' + (t.id === state.activeTreeId ? ' active' : '');
     item.dataset.id = t.id;
     item.innerHTML = `
       <svg class="tree-item-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
         <circle cx="12" cy="5" r="2.5"/>
         <line x1="12" y1="7.5" x2="12" y2="11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
         <line x1="12" y1="11" x2="7" y2="16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
         <line x1="12" y1="11" x2="17" y2="16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
         <circle cx="7" cy="18" r="2"/>
         <circle cx="17" cy="18" r="2"/>
       </svg>
       <span class="tree-item-name">${esc(t.name)}</span>
       <span class="tree-item-role">${t.role}</span>`;
     item.addEventListener('click', () => selectTree(t.id));
     item.addEventListener('contextmenu', e => openCtxMenu(e, t.id));
     list.appendChild(item);
   }
 }
 
 async function selectTree(id) {
   state.activeTreeId = id;
   if (id) localStorage.setItem('activeTreeId', id);
   else localStorage.removeItem('activeTreeId');
   closeDetailPanel();
   renderSidebar();
   if (!id) { showEmptyState(); return; }
   try {
     await loadGraph(id);
   } catch(e) {
     showError('Could not load tree: ' + e.message);
   }
 }
 
 async function loadGraph(treeId) {
   const data = await api('GET', `/api/trees/${treeId}/graph`);
   state.graph = {
     people: data.people,
     partnerships: data.partnerships,
     parentLinks: data.parent_links,
   };
   const tree = state.trees.find(t => t.id === treeId);
   state.canEdit = tree && (tree.role === 'owner' || tree.role === 'editor');
   renderCanvas();
 }
 
 /* ── Canvas / D3 ── */
 let svg, gMain, zoom;
 const NODE_W = 160, NODE_H = 62, GEN_Y = 130, COUPLE_GAP = 40;
 
 function showEmptyState() {
   document.getElementById('emptyState').style.display = 'flex';
   document.getElementById('treeCanvas').style.display = 'none';
   document.getElementById('canvasToolbar').style.display = 'none';
 }
 
 function renderCanvas() {
   document.getElementById('emptyState').style.display = 'none';
   document.getElementById('canvasToolbar').style.display = 'flex';
   document.getElementById('btnAddPerson').style.display = state.canEdit ? '' : 'none';
 
   const canvasSvg = document.getElementById('treeCanvas');
   canvasSvg.style.display = 'block';
 
   if (!svg) {
     svg = d3.select('#treeCanvas');
     gMain = svg.append('g').attr('class', 'canvas-root');
     zoom = d3.zoom().scaleExtent([0.1, 3]).on('zoom', e => gMain.attr('transform', e.transform));
     svg.call(zoom);
   }
 
   gMain.selectAll('*').remove();
 
   if (state.graph.people.length === 0) {
     gMain.append('text')
       .attr('x', 0).attr('y', 0)
       .attr('text-anchor', 'middle')
       .attr('fill', 'var(--polar4)')
       .attr('font-size', 14)
       .attr('font-family', 'Inter, sans-serif')
       .text(t('no-people-yet'));
     requestAnimationFrame(fitCanvas);
     return;
   }
 
   const positions = computeLayout(state.graph);
   drawEdges(positions);
   drawNodes(positions);
   // Defer so the browser lays out the SVG before we measure bounding boxes
   requestAnimationFrame(fitCanvas);
 }
 
 /* ── fitCanvas: reads dimensions from the parent div, not the SVG element ── */
 function fitCanvas() {
   const area = document.getElementById('canvasArea');
   const W = area.clientWidth, H = area.clientHeight;
   if (!W || !H) return;
   const bb = gMain.node().getBBox();
   if (!bb.width || !bb.height) {
     svg.call(zoom.transform, d3.zoomIdentity.translate(W / 2, H / 2));
     return;
   }
   const scale = Math.min(0.9, Math.min(W / (bb.width + 80), H / (bb.height + 80)));
   const tx = W / 2 - scale * (bb.x + bb.width / 2);
   const ty = H / 2 - scale * (bb.y + bb.height / 2);
   svg.call(zoom.transform, d3.zoomIdentity.translate(tx, ty).scale(scale));
 }
 
 function buildAcyclicParentLinks(people, partnerships, parentLinks) {
   function getParents(pl) {
     if (pl.partnership_id) {
       const ps = partnerships.find(p => p.id === pl.partnership_id);
       return ps ? [ps.person1_id, ps.person2_id] : [];
     }
     return pl.parent_id != null ? [pl.parent_id] : [];
   }
 
   const adj = new Map(people.map(p => [p.id, new Set()]));
 
   function canReachAny(from, targets) {
     const q = [from], seen = new Set([from]);
     while (q.length) {
       const cur = q.shift();
       for (const next of (adj.get(cur) || [])) {
         if (targets.has(next)) return true;
         if (!seen.has(next)) { seen.add(next); q.push(next); }
       }
     }
     return false;
   }
 
   const sorted = [...parentLinks].sort((a, b) => a.id - b.id);
   const safe = [];
 
   for (const pl of sorted) {
     const parents = getParents(pl);
     if (parents.length && canReachAny(pl.child_id, new Set(parents))) {
       console.warn(`Layout: skipping cyclic parent link id=${pl.id} (child=${pl.child_id} would create cycle)`);
     } else {
       safe.push(pl);
       for (const pid of parents) {
         if (adj.has(pid)) adj.get(pid).add(pl.child_id);
       }
     }
   }
   return safe;
 }
 
 function computeLayout({ people, partnerships, parentLinks: rawLinks }, opts = {}) {
   const parentLinks = buildAcyclicParentLinks(people, partnerships, rawLinks);
   const pos = {};
   const _NW = opts.nodeW ?? NODE_W;
   const _CG = opts.coupleGap ?? COUPLE_GAP;
   const _GY = opts.genY ?? GEN_Y;
 
   const partnershipChildren = {};
   const singleParentChildren = {};
   for (const pl of parentLinks) {
     if (pl.partnership_id) {
       if (!partnershipChildren[pl.partnership_id]) partnershipChildren[pl.partnership_id] = [];
       partnershipChildren[pl.partnership_id].push(pl.child_id);
     } else if (pl.parent_id) {
       if (!singleParentChildren[pl.parent_id]) singleParentChildren[pl.parent_id] = [];
       singleParentChildren[pl.parent_id].push(pl.child_id);
     }
   }
 
   const childIds = new Set(parentLinks.map(pl => pl.child_id));
   const gen = {};
   const roots = people.filter(p => !childIds.has(p.id));
   const queue = roots.map(p => ({ id: p.id, g: 0 }));
   const visited = new Set();
 
   while (queue.length) {
     const { id, g } = queue.shift();
     if (visited.has(id)) continue;
     visited.add(id);
     gen[id] = g;
     for (const ps of partnerships) {
       if (ps.person1_id === id || ps.person2_id === id) {
         for (const cid of (partnershipChildren[ps.id] || [])) {
           if (!visited.has(cid)) queue.push({ id: cid, g: g + 1 });
         }
       }
     }
     for (const cid of (singleParentChildren[id] || [])) {
       if (!visited.has(cid)) queue.push({ id: cid, g: g + 1 });
     }
   }
   for (const p of people) { if (gen[p.id] === undefined) gen[p.id] = 0; }
 
   // Iteratively fix generations until stable:
   // 1. Align partners to the same row (max of the two).
   // 2. Push children to be exactly one row below their parents.
   // 3. Pull parents down so they are exactly one row above their children
   //    (handles the case where a newly-added ancestor level pushes one side
   //    of a partnership down but leaves the other side's ancestors too high).
   let changed = true;
   let _safetyIter = 0;
   while (changed && _safetyIter++ < people.length * 4) {
     changed = false;
     // Step 1 – partner alignment
     for (const ps of partnerships) {
       const g1 = gen[ps.person1_id] ?? 0, g2 = gen[ps.person2_id] ?? 0;
       if (g1 !== g2) {
         const maxG = Math.max(g1, g2);
         if (!childIds.has(ps.person1_id)) { gen[ps.person1_id] = maxG; changed = true; }
         else if (!childIds.has(ps.person2_id)) { gen[ps.person2_id] = maxG; changed = true; }
         else {
           // Both have parents — push the lower one down to match the higher
           if (g1 < maxG) { gen[ps.person1_id] = maxG; changed = true; }
           else { gen[ps.person2_id] = maxG; changed = true; }
         }
       }
     }
     // Step 2 – push children down
     for (const pl of parentLinks) {
       let parentGen;
       if (pl.partnership_id) {
         const ps = partnerships.find(p => p.id === pl.partnership_id);
         if (ps) parentGen = Math.max(gen[ps.person1_id] ?? 0, gen[ps.person2_id] ?? 0);
       } else if (pl.parent_id != null) {
         parentGen = gen[pl.parent_id] ?? 0;
       }
       if (parentGen !== undefined) {
         const expected = parentGen + 1;
         if ((gen[pl.child_id] ?? 0) < expected) { gen[pl.child_id] = expected; changed = true; }
       }
     }
     // Step 3 – pull parents down (increase their gen so they sit exactly one
     // row above their child, not two or three rows above)
     for (const pl of parentLinks) {
       const expectedParentGen = (gen[pl.child_id] ?? 0) - 1;
       if (pl.partnership_id) {
         const ps = partnerships.find(p => p.id === pl.partnership_id);
         if (ps) {
           for (const pid of [ps.person1_id, ps.person2_id]) {
             if ((gen[pid] ?? 0) < expectedParentGen) { gen[pid] = expectedParentGen; changed = true; }
           }
         }
       } else if (pl.parent_id != null) {
         if ((gen[pl.parent_id] ?? 0) < expectedParentGen) { gen[pl.parent_id] = expectedParentGen; changed = true; }
       }
     }
   }
 
   const byGen = {};
   for (const p of people) {
     const g = gen[p.id];
     if (!byGen[g]) byGen[g] = [];
     byGen[g].push(p.id);
   }
 
   // ── Horizontal layout ──────────────────────────────────────────────────────
   // Two-phase approach:
   //   Phase 1 – ordering only (Sugiyama barycentric): alternating downward and
   //             upward sweeps determine a crossing-free left-to-right order for
   //             every generation, including childless intermediate groups.
   //   Phase 2 – coordinates only: seed rough positions from the Phase-1 order,
   //             then refine bottom-up so each parent row centres over its children.
 
   const MARGIN = opts.margin ?? 30;
   const grpW = grp => grp.length === 2 ? _NW * 2 + _CG : _NW;
 
   // Each person belongs to exactly one layout group: their couple, or themselves.
   const genGroups = {};
   for (const g of Object.keys(byGen).sort((a, b) => Number(a) - Number(b))) {
     const ids = byGen[g];
     const placed = new Set();
     const groups = [];
     for (const id of ids) {
       if (placed.has(id)) continue;
       const ps = partnerships.find(p =>
         (p.person1_id === id || p.person2_id === id) &&
         gen[p.person1_id] === gen[p.person2_id]
       );
       if (ps) {
         const other = ps.person1_id === id ? ps.person2_id : ps.person1_id;
         if (!placed.has(other) && ids.includes(other)) {
           groups.push([id, other]); placed.add(id); placed.add(other); continue;
         }
       }
       groups.push([id]); placed.add(id);
     }
     genGroups[Number(g)] = groups;
   }
 
   const personGroup = new Map();
   for (const gs of Object.values(genGroups))
     for (const grp of gs) for (const id of grp) personGroup.set(id, grp);
 
   function childGroupsOf(grp) {
     const seen = new Set(); const result = [];
     for (const id of grp) {
       const cids = [];
       for (const ps of partnerships)
         if (ps.person1_id === id || ps.person2_id === id)
           cids.push(...(partnershipChildren[ps.id] || []));
       cids.push(...(singleParentChildren[id] || []));
       for (const cid of cids) {
         const cg = personGroup.get(cid);
         if (cg && !seen.has(cg)) { seen.add(cg); result.push(cg); }
       }
     }
     return result;
   }
 
   const childrenOf = new Map();
   for (const gs of Object.values(genGroups))
     for (const grp of gs) childrenOf.set(grp, childGroupsOf(grp));
 
   // parentsOf: reverse of childrenOf — needed for the downward sweep.
   const parentsOf = new Map();
   for (const [grp, ch] of childrenOf)
     for (const cg of ch) {
       if (!parentsOf.has(cg)) parentsOf.set(cg, []);
       parentsOf.get(cg).push(grp);
     }
 
   // groupChildSlot: slot (0 = left, 1 = right) through which parentGrp reaches childGrp.
   // Breaks ordering ties: parents of the left person of a couple sort left of
   // parents of the right person when both share the same leftmost child.
   const groupChildSlot = new Map();
   for (const pl of parentLinks) {
     const parentPs = pl.partnership_id != null
       ? partnerships.find(p => p.id === pl.partnership_id) : null;
     const parentGrp = parentPs
       ? personGroup.get(parentPs.person1_id)
       : (pl.parent_id != null ? personGroup.get(pl.parent_id) : null);
     if (!parentGrp) continue;
     const childGrp = personGroup.get(pl.child_id);
     if (!childGrp) continue;
     const slot = childGrp.indexOf(pl.child_id);
     if (slot === -1) continue;
     if (!groupChildSlot.has(parentGrp)) groupChildSlot.set(parentGrp, new Map());
     const m = groupChildSlot.get(parentGrp);
     if (!m.has(childGrp) || slot < m.get(childGrp)) m.set(childGrp, slot);
   }
 
   const maxG = Object.keys(genGroups).length
     ? Math.max(...Object.keys(genGroups).map(Number)) : 0;
 
   // ── Phase 1: crossing-minimisation (Sugiyama barycentric) ─────────────────
   // Start from DB insertion order and run 4 passes of alternating sweeps.
   // Downward sweep: each generation sorted by the leftmost-rank of its parent
   //   groups in the layer above — this correctly orders childless groups by
   //   where their parents are, not by where their (absent) children would be.
   // Upward sweep: each generation sorted by the leftmost-rank of its child
   //   groups in the layer below, with a slot tiebreaker so parents of the left
   //   person of a couple end up left of parents of the right person.
 
   const genOrdered = {};
   for (let g = 0; g <= maxG; g++) genOrdered[g] = [...(genGroups[g] || [])];
 
   for (let pass = 0; pass < 4; pass++) {
     // Downward sweep
     for (let g = 1; g <= maxG; g++) {
       if (!genOrdered[g].length) continue;
       const rank = new Map(genOrdered[g - 1].map((grp, i) => [grp, i]));
       genOrdered[g] = [...genOrdered[g]].sort((a, b) => {
         const pA = parentsOf.get(a) || [], pB = parentsOf.get(b) || [];
         const minA = pA.length ? Math.min(...pA.map(pg => rank.get(pg) ?? Infinity)) : Infinity;
         const minB = pB.length ? Math.min(...pB.map(pg => rank.get(pg) ?? Infinity)) : Infinity;
         if (minA !== minB) return minA - minB;
         // Tiebreak: a group whose rightmost parent is further right also goes right.
         // This handles the case where one group is a shared child of two parents
         // (one left, one right) while another group only has the left parent — the
         // shared child must sit right of the single-parent group to avoid crossings.
         const maxA = pA.length ? Math.max(...pA.map(pg => rank.get(pg) ?? -Infinity)) : -Infinity;
         const maxB = pB.length ? Math.max(...pB.map(pg => rank.get(pg) ?? -Infinity)) : -Infinity;
         return maxA - maxB;
       });
     }
     // Upward sweep
     for (let g = maxG - 1; g >= 0; g--) {
       if (!genOrdered[g].length) continue;
       const rank = new Map(genOrdered[g + 1].map((grp, i) => [grp, i]));
       const downRank = new Map(genOrdered[g].map((grp, i) => [grp, i]));
       genOrdered[g] = [...genOrdered[g]].sort((a, b) => {
         const cA = childrenOf.get(a) || [], cB = childrenOf.get(b) || [];
         // HIGHEST PRIORITY: if both share any child, use the slot (left/right)
         // of that shared child to immediately fix parent ordering. This fires
         // before any rank comparison so it cannot be blocked by childless groups.
         if (cA.length && cB.length) {
           const aSet = new Set(cA);
           for (const cg of cB) {
             if (aSet.has(cg)) {
               const sA = groupChildSlot.get(a)?.get(cg) ?? Infinity;
               const sB = groupChildSlot.get(b)?.get(cg) ?? Infinity;
               if (sA !== sB && sA !== Infinity && sB !== Infinity) return sA - sB;
             }
           }
         }
         // SECOND: leftmost child rank (only when both have children)
         if (cA.length && cB.length) {
           const rA = Math.min(...cA.map(cg => rank.get(cg) ?? Infinity));
           const rB = Math.min(...cB.map(cg => rank.get(cg) ?? Infinity));
           if (rA !== rB) return rA - rB;
         }
         // FALLBACK: preserve downward-sweep order (keeps childless groups near
         // their parents rather than drifting to the end of the layer).
         return (downRank.get(a) ?? 0) - (downRank.get(b) ?? 0);
       });
     }
   }
 
   // ── Phase 2: coordinate assignment ────────────────────────────────────────
   // Seed rough positions: equal spacing in the Phase-1 order.
   // These serve as the ideal fallback for groups with no children so the
   // bottom-up sweep never pushes them to the far right.
 
   const roughCx = new Map();
   for (let g = 0; g <= maxG; g++) {
     const groups = genOrdered[g] || [];
     const totalW = groups.reduce((s, grp, i) => s + grpW(grp) + (i > 0 ? MARGIN : 0), 0);
     let x = -totalW / 2;
     for (const grp of groups) {
       roughCx.set(grp, x + grpW(grp) / 2);
       x += grpW(grp) + MARGIN;
     }
   }
 
   // Refine bottom-up: centre each parent row over its children.
   const assignedCx = new Map(roughCx);
 
   for (let g = maxG - 1; g >= 0; g--) {
     const groups = genOrdered[g] || [];
     if (!groups.length) continue;
 
     const idealOf = new Map();
     for (const grp of groups) {
       const ch = (childrenOf.get(grp) || []).filter(cg => assignedCx.has(cg));
       if (ch.length) {
         const cxs = ch.map(cg => assignedCx.get(cg));
         idealOf.set(grp, (Math.min(...cxs) + Math.max(...cxs)) / 2);
       } else {
         idealOf.set(grp, roughCx.get(grp));
       }
     }
 
     // Sweep in Phase-1 order — never re-sort by ideal, that would undo the
     // crossing-free ordering. Only push groups right to avoid overlap.
     const result = [];
     let prevRight = null;
     for (const grp of groups) {
       const ideal = idealOf.get(grp);
       const half = grpW(grp) / 2;
       const cx = prevRight === null
         ? ideal
         : Math.max(ideal, prevRight + MARGIN + half);
       result.push([grp, cx]);
       prevRight = cx + half;
     }
 
     // Re-centre: shift so groups-with-children sit at their true ideal on average.
     const withCh = result.filter(([grp]) => (childrenOf.get(grp) || []).some(cg => assignedCx.has(cg)));
     if (withCh.length) {
       const trueIdeal = grp => {
         const cxs = (childrenOf.get(grp) || []).filter(cg => assignedCx.has(cg)).map(cg => assignedCx.get(cg));
         return (Math.min(...cxs) + Math.max(...cxs)) / 2;
       };
       const avgI = withCh.reduce((s, [grp]) => s + trueIdeal(grp), 0) / withCh.length;
       const avgP = withCh.reduce((s, [, cx]) => s + cx, 0) / withCh.length;
       const shift = avgI - avgP;
       for (const e of result) e[1] += shift;
     }
 
     for (const [grp, cx] of result) assignedCx.set(grp, cx);
   }
 
   // Translate group centers to per-person x positions.
   const assignedX = {};
   for (const [grp, cx] of assignedCx) {
     if (grp.length === 2) {
       assignedX[grp[0]] = cx - _NW / 2 - _CG / 2;
       assignedX[grp[1]] = cx + _NW / 2 + _CG / 2;
     } else {
       assignedX[grp[0]] = cx;
     }
   }
 
   for (const p of people) {
     pos[p.id] = { x: assignedX[p.id] ?? 0, y: gen[p.id] * _GY };
   }
   return pos;
 }
 
 function drawEdges(pos) {
   const g = gMain.append('g').attr('class', 'edges');
   const { partnerships, parentLinks } = state.graph;
 
   for (const ps of partnerships) {
     const p1 = pos[ps.person1_id], p2 = pos[ps.person2_id];
     if (!p1 || !p2) continue;
     const mx = (p1.x + p2.x) / 2;
     const midY = p1.y + NODE_H / 2;
 
     g.append('line').attr('class', 'edge-line')
       .attr('x1', p1.x + NODE_W / 2).attr('y1', midY)
       .attr('x2', p2.x - NODE_W / 2).attr('y2', midY);
 
     const dot = g.append('circle').attr('class', 'partner-dot')
       .attr('cx', mx).attr('cy', midY).attr('r', 6);
     dot.on('click', () => state.canEdit && openPartnershipDetail(ps));
 
     const children = parentLinks.filter(pl => pl.partnership_id === ps.id).map(pl => pl.child_id);
     if (children.length) {
       const dropY = midY + 40;
       const childXs = children.map(cid => pos[cid]?.x ?? mx);
       if (children.length === 1 && Math.abs(childXs[0] - mx) > 1) {
         // Single child not directly below this couple: draw a bezier curve so
         // the connector doesn't sit at the same horizontal level as sibling bars
         // from other families, which would make unrelated people look like siblings.
         const cp = pos[children[0]];
         if (cp) {
           g.append('path').attr('class', 'edge-line').attr('fill', 'none')
             .attr('d', `M${mx},${midY + 6} C${mx},${midY + 70} ${cp.x},${cp.y - 70} ${cp.x},${cp.y}`);
         }
       } else {
         // Standard comb: vertical stem → horizontal sibling bar → drops to children.
         g.append('line').attr('class', 'edge-line')
           .attr('x1', mx).attr('y1', midY + 6)
           .attr('x2', mx).attr('y2', dropY);
         if (children.length > 1) {
           const barMin = Math.min(mx, ...childXs);
           const barMax = Math.max(mx, ...childXs);
           g.append('line').attr('class', 'edge-line')
             .attr('x1', barMin).attr('y1', dropY)
             .attr('x2', barMax).attr('y2', dropY);
         }
         for (const cid of children) {
           const cp = pos[cid]; if (!cp) continue;
           g.append('line').attr('class', 'edge-line')
             .attr('x1', cp.x).attr('y1', dropY)
             .attr('x2', cp.x).attr('y2', cp.y);
         }
       }
     }
   }
 
   for (const pl of parentLinks.filter(p => p.parent_id)) {
     const pp = pos[pl.parent_id], cp = pos[pl.child_id];
     if (!pp || !cp) continue;
     g.append('path').attr('class', 'edge-line')
       .attr('d', `M${pp.x},${pp.y + NODE_H} C${pp.x},${pp.y + NODE_H + 40} ${cp.x},${cp.y - 40} ${cp.x},${cp.y}`);
   }
 }
 
 function drawNodes(pos) {
   const g = gMain.append('g').attr('class', 'nodes');
   for (const person of state.graph.people) {
     const { x, y } = pos[person.id] ?? { x: 0, y: 0 };
     const grp = g.append('g')
       .attr('transform', `translate(${x - NODE_W / 2},${y})`)
       .attr('cursor', 'pointer')
       .on('click', () => openDetailPanel(person.id));
 
     const rect = grp.append('rect')
       .attr('width', NODE_W).attr('height', NODE_H)
       .attr('rx', 8).attr('ry', 8)
       .attr('fill', 'var(--polar3)')
       .attr('stroke', person.id === state.selectedPersonId ? 'var(--lightblue)' : 'var(--polar4)')
       .attr('stroke-width', 1);
 
     grp.on('mouseenter', () => rect.attr('stroke', 'var(--lightblue)'))
        .on('mouseleave', () => rect.attr('stroke', person.id === state.selectedPersonId ? 'var(--lightblue)' : 'var(--polar4)'));
 
     const fullName = [person.first_name, person.last_name].filter(Boolean).join(' ');
     grp.append('text')
       .attr('x', NODE_W / 2).attr('y', 22)
       .attr('text-anchor', 'middle')
       .attr('font-family', "'EB Garamond', Georgia, serif")
       .attr('font-size', 14).attr('font-weight', 600)
       .attr('fill', 'var(--snow3)')
       .text(truncate(fullName, 20));
 
     const dateStr = formatDateRange(person.birth_date, person.death_date);
     if (dateStr) {
       grp.append('text')
         .attr('x', NODE_W / 2).attr('y', 40)
         .attr('text-anchor', 'middle')
         .attr('font-family', "'Inter', sans-serif")
         .attr('font-size', 11).attr('fill', 'var(--snow1)').attr('opacity', 0.55)
         .text(dateStr);
     }
 
     if (person.burial_place) {
       grp.append('text')
         .attr('x', NODE_W / 2).attr('y', dateStr ? 54 : 40)
         .attr('text-anchor', 'middle')
         .attr('font-family', "'Inter', sans-serif")
         .attr('font-size', 10).attr('fill', 'var(--snow1)').attr('opacity', 0.35)
         .text('⚰ ' + truncate(person.burial_place, 18));
     }
   }
 }
 
 /* ── PDF export ── */
 function wrapText(text, maxChars, maxLines) {
   const words = text.split(/\s+/);
   const lines = [];
   let cur = '';
   for (const word of words) {
     const test = cur ? cur + ' ' + word : word;
     if (test.length <= maxChars) {
       cur = test;
     } else {
       if (cur) lines.push(cur);
       if (lines.length >= maxLines) break;
       cur = word.slice(0, maxChars);
     }
   }
   if (cur && lines.length < maxLines) lines.push(cur);
   return lines;
 }
 
 function drawPrintEdges(g, pos, { partnerships, parentLinks }, NW, NH) {
   const edgeG = g.append('g');
   const lineAttr = sel => sel.attr('stroke', '#444').attr('stroke-width', 1.5).attr('fill', 'none');
 
   for (const ps of partnerships) {
     const p1 = pos[ps.person1_id], p2 = pos[ps.person2_id];
     if (!p1 || !p2) continue;
     const mx = (p1.x + p2.x) / 2;
     const midY = p1.y + NH / 2;
 
     lineAttr(edgeG.append('line'))
       .attr('x1', p1.x + NW / 2).attr('y1', midY)
       .attr('x2', p2.x - NW / 2).attr('y2', midY);
 
     edgeG.append('circle').attr('cx', mx).attr('cy', midY).attr('r', 5).attr('fill', '#444');
 
     const children = parentLinks.filter(pl => pl.partnership_id === ps.id).map(pl => pl.child_id);
     if (children.length) {
       const childXs = children.map(cid => pos[cid]?.x ?? mx);
       const childYs = children.map(cid => pos[cid]?.y).filter(y => y !== undefined);
       const nearestChildY = childYs.length ? Math.min(...childYs) : p1.y + NH * 2;
       const dropY = p1.y + NH + Math.round((nearestChildY - p1.y - NH) * 0.35);
       if (children.length === 1 && Math.abs(childXs[0] - mx) > 1) {
         const cp = pos[children[0]];
         if (cp) lineAttr(edgeG.append('path'))
           .attr('d', `M${mx},${midY + 5} C${mx},${dropY + 50} ${cp.x},${cp.y - 50} ${cp.x},${cp.y}`);
       } else {
         lineAttr(edgeG.append('line')).attr('x1', mx).attr('y1', midY + 5).attr('x2', mx).attr('y2', dropY);
         if (children.length > 1) {
           lineAttr(edgeG.append('line'))
             .attr('x1', Math.min(mx, ...childXs)).attr('y1', dropY)
             .attr('x2', Math.max(mx, ...childXs)).attr('y2', dropY);
         }
         for (const cid of children) {
           const cp = pos[cid]; if (!cp) continue;
           lineAttr(edgeG.append('line')).attr('x1', cp.x).attr('y1', dropY).attr('x2', cp.x).attr('y2', cp.y);
         }
       }
     }
   }
 
   for (const pl of parentLinks.filter(p => p.parent_id)) {
     const pp = pos[pl.parent_id], cp = pos[pl.child_id];
     if (!pp || !cp) continue;
     lineAttr(edgeG.append('path'))
       .attr('d', `M${pp.x},${pp.y + NH} C${pp.x},${pp.y + NH + 55} ${cp.x},${cp.y - 55} ${cp.x},${cp.y}`);
   }
 }
 
 function drawPrintNodes(g, pos, people, NW, NH) {
   const nodeG = g.append('g');
   for (const person of people) {
     const { x, y } = pos[person.id] ?? { x: 0, y: 0 };
     const grp = nodeG.append('g').attr('transform', `translate(${x - NW / 2},${y})`);
 
     grp.append('rect')
       .attr('width', NW).attr('height', NH).attr('rx', 6).attr('ry', 6)
       .attr('fill', 'white').attr('stroke', '#333').attr('stroke-width', 1);
 
     const fullName = [person.first_name, person.last_name].filter(Boolean).join(' ');
     grp.append('text')
       .attr('x', NW / 2).attr('y', 20)
       .attr('text-anchor', 'middle')
       .attr('font-family', "'EB Garamond', Georgia, serif")
       .attr('font-size', 14).attr('font-weight', 600).attr('fill', '#111')
       .text(fullName);
 
     grp.append('line')
       .attr('x1', 8).attr('y1', 26).attr('x2', NW - 8).attr('y2', 26)
       .attr('stroke', '#ccc').attr('stroke-width', 0.5);
 
     let lineY = 40;
     const addLine = (label, value, color = '#333') => {
       if (lineY > NH - 8) return;
       grp.append('text')
         .attr('x', 10).attr('y', lineY)
         .attr('font-family', 'Inter, sans-serif')
         .attr('font-size', 10).attr('fill', color)
         .text(label + value);
       lineY += 14;
     };
 
     const bornParts = [person.birth_date, person.birth_place].filter(Boolean);
     if (bornParts.length) addLine('* ', bornParts.join(' · '));
     if (person.death_date) addLine('† ', person.death_date);
     if (person.burial_place) addLine('⚰ ', truncate(person.burial_place, 26), '#555');
     if (person.bio && lineY <= NH - 14) {
       const linesAvail = Math.floor((NH - lineY - 4) / 12);
       if (linesAvail >= 1) {
         const bioLines = wrapText(person.bio, 28, linesAvail);
         for (const line of bioLines) {
           if (lineY > NH - 8) break;
           grp.append('text')
             .attr('x', 10).attr('y', lineY)
             .attr('font-family', 'Inter, sans-serif')
             .attr('font-size', 9).attr('fill', '#555').attr('font-style', 'italic')
             .text(line);
           lineY += 12;
         }
       }
     }
   }
 }
 
 function downloadPDF() {
   if (!state.activeTreeId) return;
   const tree = state.trees.find(t => t.id === state.activeTreeId);
   const NW = 225, NH = 130, GY = 280, CG = 52;
 
   const pos = computeLayout(state.graph, { nodeW: NW, genY: GY, coupleGap: CG, margin: 48 });
 
   const container = document.createElement('div');
   container.style.cssText = 'position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden';
   document.body.appendChild(container);
 
   const printSvg = d3.select(container).append('svg').attr('xmlns', 'http://www.w3.org/2000/svg');
   const printG = printSvg.append('g');
 
   drawPrintEdges(printG, pos, state.graph, NW, NH);
   drawPrintNodes(printG, pos, state.graph.people, NW, NH);
 
   const bb = printG.node().getBBox();
   const pad = 48;
   printSvg
     .attr('viewBox', `${bb.x - pad} ${bb.y - pad} ${bb.width + pad * 2} ${bb.height + pad * 2}`)
     .attr('width', bb.width + pad * 2)
     .attr('height', bb.height + pad * 2);
 
   const svgStr = new XMLSerializer().serializeToString(printSvg.node());
   document.body.removeChild(container);
 
   const html = `<!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8">
   <title>Stammbaum</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=EB+Garamond:wght@400;600&display=swap" rel="stylesheet">
   <style>
     @page { size: landscape; margin: 0; }
     * { box-sizing: border-box; }
     body { margin: 8mm; background: white; display: flex; flex-direction: column; align-items: center; }
     h1 { font-family: 'EB Garamond', Georgia, serif; font-size: 22px; font-weight: 600; color: #111; margin: 0 0 6mm; }
     svg { width: 100%; height: auto; display: block; }
   </style>
 </head>
 <body>
   <h1>Stammbaum</h1>
   ${svgStr}
 </body>
 </html>`;
 
   const blob = new Blob([html], { type: 'text/html;charset=utf-8' });
   const url = URL.createObjectURL(blob);
   const tab = window.open(url, '_blank');
   if (!tab) showError('Popup blocked — allow popups for this site.');
   setTimeout(() => URL.revokeObjectURL(url), 30000);
 }
 
 /* ── Detail panel ── */
 function openDetailPanel(personId) {
   state.selectedPersonId = personId;
   const person = state.graph.people.find(p => p.id === personId);
   if (!person) return;
 
   renderCanvas();
 
   const panel = document.getElementById('detailPanel');
   panel.classList.add('open');
 
   const fullName = [person.first_name, person.last_name].filter(Boolean).join(' ');
   document.getElementById('detailName').textContent = fullName;
   document.getElementById('btnEditPerson').style.display = state.canEdit ? '' : 'none';
   document.getElementById('btnDeletePerson').style.display = state.canEdit ? '' : 'none';
 
   let html = '';
 
   if (person.birth_date || person.birth_place)
     html += field(t('born'), [person.birth_date, person.birth_place].filter(Boolean).join(' · '));
   if (person.death_date) html += field(t('died'), person.death_date);
   if (person.burial_place) html += field(t('buried'), person.burial_place);
   if (person.bio) html += field(t('biography'), person.bio);
 
   const myPartnerships = state.graph.partnerships.filter(
     ps => ps.person1_id === personId || ps.person2_id === personId
   );
   if (myPartnerships.length) {
     html += `<p class="detail-section-title">${t('partnerships')}</p>`;
     for (const ps of myPartnerships) {
       const otherId = ps.person1_id === personId ? ps.person2_id : ps.person1_id;
       const other = state.graph.people.find(p => p.id === otherId);
       const otherName = other ? [other.first_name, other.last_name].filter(Boolean).join(' ') : '—';
       const label = { married: t('rel-married'), separated: t('rel-separated'), partnered: t('rel-partner') }[ps.union_type] ?? ps.union_type;
       html += `<div class="detail-rel-item" onclick="openDetailPanel(${otherId})">
         <span>${esc(otherName)}</span>
         <span class="detail-rel-badge">${label}${ps.union_date ? ' ' + ps.union_date.slice(0, 4) : ''}</span>
       </div>`;
     }
   }
 
   const childIds = [...new Set([
     ...myPartnerships.flatMap(ps => state.graph.parentLinks.filter(pl => pl.partnership_id === ps.id).map(pl => pl.child_id)),
     ...state.graph.parentLinks.filter(pl => pl.parent_id === personId).map(pl => pl.child_id),
   ])];
   if (childIds.length) {
     html += `<p class="detail-section-title">${t('children')}</p>`;
     for (const cid of childIds) {
       const child = state.graph.people.find(p => p.id === cid);
       if (!child) continue;
       html += `<div class="detail-rel-item" onclick="openDetailPanel(${cid})">
         <span>${esc([child.first_name, child.last_name].filter(Boolean).join(' '))}</span>
       </div>`;
     }
   }
 
   const myParentLinks = state.graph.parentLinks.filter(pl => pl.child_id === personId);
   const parentPeople = [];
   for (const pl of myParentLinks) {
     if (pl.partnership_id) {
       const ps = state.graph.partnerships.find(p => p.id === pl.partnership_id);
       if (ps) [ps.person1_id, ps.person2_id].forEach(pid => { if (!parentPeople.includes(pid)) parentPeople.push(pid); });
     } else if (pl.parent_id && !parentPeople.includes(pl.parent_id)) {
       parentPeople.push(pl.parent_id);
     }
   }
   if (parentPeople.length) {
     html += `<p class="detail-section-title">${t('parents')}</p>`;
     for (const pid of parentPeople) {
       const parent = state.graph.people.find(p => p.id === pid);
       if (!parent) continue;
       html += `<div class="detail-rel-item" onclick="openDetailPanel(${pid})">
         <span>${esc([parent.first_name, parent.last_name].filter(Boolean).join(' '))}</span>
       </div>`;
     }
   }
 
   // Siblings: people who share a parent link with this person
   const siblingIds = [];
   for (const pl of myParentLinks) {
     const sharedLinks = state.graph.parentLinks.filter(spl =>
       spl.child_id !== personId &&
       ((pl.partnership_id && spl.partnership_id === pl.partnership_id) ||
        (pl.parent_id && spl.parent_id === pl.parent_id))
     );
     for (const spl of sharedLinks) {
       if (!siblingIds.includes(spl.child_id)) siblingIds.push(spl.child_id);
     }
   }
   if (siblingIds.length) {
     html += `<p class="detail-section-title">${t('siblings')}</p>`;
     for (const sid of siblingIds) {
       const sib = state.graph.people.find(p => p.id === sid);
       if (!sib) continue;
       html += `<div class="detail-rel-item" onclick="openDetailPanel(${sid})">
         <span>${esc([sib.first_name, sib.last_name].filter(Boolean).join(' '))}</span>
       </div>`;
     }
   }
 
   if (state.canEdit) {
     html += `<p class="detail-section-title">${t('add-relationship')}</p>`;
     if (!myPartnerships.length) {
       html += `<button class="btn" style="width:100%;margin-bottom:0.5rem" onclick="openAddPartnershipModal(${personId})">${t('add-partnership-btn')}</button>`;
     }
     html += `<button class="btn" style="width:100%;margin-bottom:0.5rem" onclick="openAddParentLinkModal(${personId},'child')">${t('set-parents-btn')}</button>
       <button class="btn" style="width:100%" onclick="openAddParentLinkModal(null,'parent',${personId})">${t('add-child-btn')}</button>`;
   }
 
   document.getElementById('detailBody').innerHTML = html;
 }
 
 function closeDetailPanel() {
   state.selectedPersonId = null;
   document.getElementById('detailPanel').classList.remove('open');
 }
 
 function field(label, value) {
   return `<div class="detail-field">
     <div class="detail-field-label">${esc(label)}</div>
     <div class="detail-field-value">${esc(String(value))}</div>
   </div>`;
 }
 
 /* ── Partnership detail (dot click) ── */
 function openPartnershipDetail(ps) {
   state._editingPartnershipId = ps.id;
   const p1 = state.graph.people.find(p => p.id === ps.person1_id);
   const p2 = state.graph.people.find(p => p.id === ps.person2_id);
   const n1 = p1 ? [p1.first_name, p1.last_name].filter(Boolean).join(' ') : '?';
   const n2 = p2 ? [p2.first_name, p2.last_name].filter(Boolean).join(' ') : '?';
   document.getElementById('modalPartnershipTitle').textContent = `${n1} & ${n2}`;
   document.getElementById('partnerPerson2').closest('.form-group').style.display = '';
   document.getElementById('partnerType').closest('.form-group').style.display = '';
   document.getElementById('partnerStart').closest('.form-row').style.display = '';
   document.getElementById('btnPartnerSave').textContent = t('save');
   state._siblingMode = false;
   populatePersonSelects('partnerPerson1', 'partnerPerson2');
   document.getElementById('partnerPerson1').value = ps.person1_id;
   document.getElementById('partnerPerson2').value = ps.person2_id;
   document.getElementById('partnerType').value = ps.union_type;
   document.getElementById('partnerStart').value = ps.union_date ?? '';
   document.getElementById('partnerEnd').value = ps.union_end_date ?? '';
   openModal('modalPartnership');
 }
 
 /* ── Context menu ── */
 function openCtxMenu(e, treeId) {
   e.preventDefault();
   state._ctxTreeId = treeId;
   const tree = state.trees.find(t => t.id === treeId);
   const isOwner = tree?.role === 'owner';
   const menu = document.getElementById('ctxMenu');
   document.getElementById('ctxRename').style.display = isOwner ? '' : 'none';
   document.getElementById('ctxDelete').style.display = isOwner ? '' : 'none';
   document.getElementById('ctxLeave').style.display = isOwner ? 'none' : '';
   menu.style.left = e.clientX + 'px';
   menu.style.top = e.clientY + 'px';
   menu.classList.add('open');
 }
 
 document.addEventListener('click', () => document.getElementById('ctxMenu').classList.remove('open'));
 
 /* ── Modal helpers ── */
 function openModal(id) { document.getElementById(id).classList.add('open'); }
 function closeModal(id) { document.getElementById(id).classList.remove('open'); }
 
 function populatePersonSelects(...ids) {
   const options = state.graph.people.map(p => {
     const name = [p.first_name, p.last_name].filter(Boolean).join(' ');
     return `<option value="${p.id}">${esc(name)}</option>`;
   }).join('');
   for (const id of ids) document.getElementById(id).innerHTML = options;
 }
 
 /* ── Tree modals ── */
 document.getElementById('btnNewTree').addEventListener('click', openNewTreeModal);
 document.getElementById('emptyNewTree').addEventListener('click', openNewTreeModal);
 
 function openNewTreeModal() {
   state._editingTreeId = null;
   document.getElementById('modalTreeTitle').textContent = t('new-tree-title');
   document.getElementById('btnTreeSave').textContent = t('create');
   document.getElementById('treeNameInput').value = '';
   openModal('modalTree');
   setTimeout(() => document.getElementById('treeNameInput').focus(), 50);
 }
 
 document.getElementById('btnTreeCancel').addEventListener('click', () => closeModal('modalTree'));
 document.getElementById('btnTreeSave').addEventListener('click', async () => {
   const name = document.getElementById('treeNameInput').value.trim();
   if (!name) return;
   try {
     if (state._editingTreeId) {
       await api('PATCH', `/api/trees/${state._editingTreeId}`, { name });
     } else {
       const t = await api('POST', '/api/trees', { name });
       state.activeTreeId = t.id;
     }
     closeModal('modalTree');
     await loadTrees();
     if (state.activeTreeId) await loadGraph(state.activeTreeId);
   } catch(e) { showError(e.message); }
 });
 
 /* ── Context menu actions ── */
 document.getElementById('ctxRename').addEventListener('click', () => {
   const tree = state.trees.find(t => t.id === state._ctxTreeId);
   if (!tree) return;
   state._editingTreeId = tree.id;
   document.getElementById('modalTreeTitle').textContent = t('rename-tree-title');
   document.getElementById('btnTreeSave').textContent = t('save');
   document.getElementById('treeNameInput').value = tree.name;
   openModal('modalTree');
 });
 
 document.getElementById('ctxMembers').addEventListener('click', () => openMembersModal(state._ctxTreeId));
 
 document.getElementById('ctxDelete').addEventListener('click', async () => {
   if (!confirm(t('confirm-delete-tree'))) return;
   try {
     await api('DELETE', `/api/trees/${state._ctxTreeId}`);
     if (state.activeTreeId === state._ctxTreeId) selectTree(null);
     await loadTrees();
   } catch(e) { showError(e.message); }
 });
 
 document.getElementById('ctxLeave').addEventListener('click', async () => {
   if (!confirm(t('confirm-leave-tree'))) return;
   try {
     await api('DELETE', `/api/trees/${state._ctxTreeId}/leave`);
     if (state.activeTreeId === state._ctxTreeId) selectTree(null);
     await loadTrees();
   } catch(e) { showError(e.message); }
 });
 
 /* ── Add/edit person modal ── */
 document.getElementById('btnAddPerson').addEventListener('click', () => openPersonModal(null));
 
 function openPersonModal(person) {
   state._editingPersonId = person?.id ?? null;
   document.getElementById('modalPersonTitle').textContent = person ? t('edit-person-title') : t('add-person-title');
   document.getElementById('personFirstName').value = person?.first_name ?? '';
   document.getElementById('personLastName').value = person?.last_name ?? '';
   document.getElementById('personBirthDate').value = person?.birth_date ?? '';
   document.getElementById('personDeathDate').value = person?.death_date ?? '';
   document.getElementById('personBirthPlace').value = person?.birth_place ?? '';
   document.getElementById('personBurialPlace').value = person?.burial_place ?? '';
   document.getElementById('personBio').value = person?.bio ?? '';
   openModal('modalPerson');
   setTimeout(() => document.getElementById('personFirstName').focus(), 50);
 }
 
 document.getElementById('btnPersonCancel').addEventListener('click', () => closeModal('modalPerson'));
 
 document.getElementById('btnPersonSave').addEventListener('click', async () => {
   const body = {
     first_name: document.getElementById('personFirstName').value.trim(),
     last_name: document.getElementById('personLastName').value.trim() || null,
     birth_date: document.getElementById('personBirthDate').value.trim() || null,
     death_date: document.getElementById('personDeathDate').value.trim() || null,
     birth_place: document.getElementById('personBirthPlace').value.trim() || null,
     burial_place: document.getElementById('personBurialPlace').value.trim() || null,
     bio: document.getElementById('personBio').value.trim() || null,
   };
   if (!body.first_name) { alert(t('alert-first-name-req')); return; }
   try {
     const isNew = !state._editingPersonId;
     let saved;
     if (state._editingPersonId) {
       saved = await api('PATCH', `/api/trees/${state.activeTreeId}/people/${state._editingPersonId}`, body);
     } else {
       saved = await api('POST', `/api/trees/${state.activeTreeId}/people`, body);
     }
     closeModal('modalPerson');
     await loadGraph(state.activeTreeId);
     // After creating (not editing) a person, offer to connect them if others exist
     if (isNew && state.graph.people.length > 1) {
       openConnectModal(saved.id);
     }
   } catch(e) {
     showError('Could not save: ' + e.message);
   }
 });
 
 /* ── Edit / delete from detail panel ── */
 document.getElementById('btnEditPerson').addEventListener('click', () => {
   const person = state.graph.people.find(p => p.id === state.selectedPersonId);
   if (person) openPersonModal(person);
 });
 
 document.getElementById('btnDeletePerson').addEventListener('click', async () => {
   if (!confirm(t('confirm-delete-person'))) return;
   try {
     await api('DELETE', `/api/trees/${state.activeTreeId}/people/${state.selectedPersonId}`);
     closeDetailPanel();
     await loadGraph(state.activeTreeId);
   } catch(e) { showError(e.message); }
 });
 
 document.getElementById('btnCloseDetail').addEventListener('click', closeDetailPanel);
 
 /* ── Connect modal ── */
 function openConnectModal(personId) {
   state._connectingPersonId = personId;
   const person = state.graph.people.find(p => p.id === personId);
   const name = person ? [person.first_name, person.last_name].filter(Boolean).join(' ') : '';
   document.getElementById('connectPersonName').textContent = name;
   openModal('modalConnect');
 }
 
 document.getElementById('connectAsPartner').addEventListener('click', () => {
   closeModal('modalConnect');
   openAddPartnershipModal(state._connectingPersonId);
 });
 
 document.getElementById('connectAsChild').addEventListener('click', () => {
   closeModal('modalConnect');
   openAddParentLinkModal(state._connectingPersonId, 'child');
 });
 
 document.getElementById('connectAsParent').addEventListener('click', () => {
   closeModal('modalConnect');
   openAddParentLinkModal(null, 'parent', state._connectingPersonId);
 });
 
 document.getElementById('connectAsSibling').addEventListener('click', () => {
   closeModal('modalConnect');
   openSiblingModal(state._connectingPersonId);
 });
 
 document.getElementById('btnConnectSkip').addEventListener('click', () => closeModal('modalConnect'));
 
 /* ── Sibling modal: select an existing person → inherit their parent links ── */
 function openSiblingModal(newPersonId) {
   const others = state.graph.people.filter(p => p.id !== newPersonId);
   if (!others.length) { showError('No other people in the tree.'); return; }
   state._siblingMode = true;
   state._siblingModePersonId = newPersonId;
   document.getElementById('modalPartnershipTitle').textContent = t('sibling-of-title');
   // Show only person1 select; hide partner/date fields
   populatePersonSelects('partnerPerson1');
   Array.from(document.getElementById('partnerPerson1').options)
     .forEach(o => { if (Number(o.value) === newPersonId) o.remove(); });
   document.getElementById('partnerPerson2').closest('.form-group').style.display = 'none';
   document.getElementById('partnerType').closest('.form-group').style.display = 'none';
   document.getElementById('partnerStart').closest('.form-row').style.display = 'none';
   document.getElementById('btnPartnerSave').textContent = t('add-sibling-btn');
   openModal('modalPartnership');
 }
 
 /* ── Partnership modal ── */
 function openAddPartnershipModal(preselectedPersonId) {
   if (state.graph.people.length < 2) { alert(t('alert-add-two-people')); return; }
   state._editingPartnershipId = null;
   state._siblingMode = false;
   document.getElementById('modalPartnershipTitle').textContent = t('add-partnership-title');
   document.getElementById('partnerPerson2').closest('.form-group').style.display = '';
   document.getElementById('partnerType').closest('.form-group').style.display = '';
   document.getElementById('partnerStart').closest('.form-row').style.display = '';
   document.getElementById('btnPartnerSave').textContent = t('save');
   populatePersonSelects('partnerPerson1', 'partnerPerson2');
   if (preselectedPersonId) document.getElementById('partnerPerson1').value = preselectedPersonId;
   document.getElementById('partnerType').value = 'partnered';
   document.getElementById('partnerStart').value = '';
   document.getElementById('partnerEnd').value = '';
   openModal('modalPartnership');
 }
 
 document.getElementById('btnPartnerCancel').addEventListener('click', () => {
   state._siblingMode = false;
   // Restore hidden fields
   document.getElementById('partnerPerson2').closest('.form-group').style.display = '';
   document.getElementById('partnerType').closest('.form-group').style.display = '';
   document.getElementById('partnerStart').closest('.form-row').style.display = '';
   closeModal('modalPartnership');
 });
 
 document.getElementById('btnPartnerSave').addEventListener('click', async () => {
   if (state._siblingMode) {
     const siblingId = parseInt(document.getElementById('partnerPerson1').value);
     const newPersonId = state._siblingModePersonId;
     state._siblingMode = false;
     document.getElementById('partnerPerson2').closest('.form-group').style.display = '';
     document.getElementById('partnerType').closest('.form-group').style.display = '';
     document.getElementById('partnerStart').closest('.form-row').style.display = '';
     closeModal('modalPartnership');
     try {
       const siblingLinks = state.graph.parentLinks.filter(pl => pl.child_id === siblingId);
       if (!siblingLinks.length) {
         showError(t('alert-no-parents'));
         return;
       }
       for (const pl of siblingLinks) {
         await api('POST', `/api/trees/${state.activeTreeId}/parentlinks`, {
           child_id: newPersonId,
           partnership_id: pl.partnership_id ?? null,
           parent_id: pl.parent_id ?? null,
         });
       }
       await loadGraph(state.activeTreeId);
     } catch(e) { showError(e.message); }
     return;
   }
 
   const p1 = parseInt(document.getElementById('partnerPerson1').value);
   const p2 = parseInt(document.getElementById('partnerPerson2').value);
   if (p1 === p2) { alert(t('alert-select-diff')); return; }
   const body = {
     person1_id: p1, person2_id: p2,
     union_type: document.getElementById('partnerType').value,
     union_date: document.getElementById('partnerStart').value.trim() || null,
     union_end_date: document.getElementById('partnerEnd').value.trim() || null,
   };
   try {
     if (state._editingPartnershipId) {
       await api('PATCH', `/api/trees/${state.activeTreeId}/partnerships/${state._editingPartnershipId}`, {
         union_type: body.union_type, union_date: body.union_date, union_end_date: body.union_end_date,
       });
     } else {
       await api('POST', `/api/trees/${state.activeTreeId}/partnerships`, body);
     }
     closeModal('modalPartnership');
     await loadGraph(state.activeTreeId);
     if (state.selectedPersonId) openDetailPanel(state.selectedPersonId);
   } catch(e) { showError(e.message); }
 });
 
 /* ── Parent link modal ── */
 function openAddParentLinkModal(childPreselect, mode, parentPreselect) {
   populatePersonSelects('linkChild', 'linkParent');
 
   if (mode === 'child' && childPreselect != null) {
     Array.from(document.getElementById('linkParent').options)
       .forEach(o => { if (Number(o.value) === childPreselect) o.remove(); });
     document.getElementById('linkChild').value = childPreselect;
   }
   if (mode === 'parent' && parentPreselect != null) {
     Array.from(document.getElementById('linkChild').options)
       .forEach(o => { if (Number(o.value) === parentPreselect) o.remove(); });
   }
 
   const psSelect = document.getElementById('linkPartnership');
   psSelect.innerHTML = state.graph.partnerships.map(ps => {
     const p1 = state.graph.people.find(p => p.id === ps.person1_id);
     const p2 = state.graph.people.find(p => p.id === ps.person2_id);
     const n1 = p1 ? [p1.first_name, p1.last_name].filter(Boolean).join(' ') : '?';
     const n2 = p2 ? [p2.first_name, p2.last_name].filter(Boolean).join(' ') : '?';
     return `<option value="${ps.id}">${esc(n1)} & ${esc(n2)}</option>`;
   }).join('');
 
   if (!psSelect.options.length) {
     document.getElementById('linkViaType').value = 'single';
     document.getElementById('linkPartnershipGroup').style.display = 'none';
     document.getElementById('linkParentGroup').style.display = '';
     if (mode === 'parent' && parentPreselect != null)
       document.getElementById('linkParent').value = parentPreselect;
   } else {
     document.getElementById('linkViaType').value = 'partnership';
     document.getElementById('linkPartnershipGroup').style.display = '';
     document.getElementById('linkParentGroup').style.display = 'none';
   }
 
   openModal('modalParentLink');
 }
 
 window.app = {
   onLinkViaTypeChange() {
     const via = document.getElementById('linkViaType').value;
     document.getElementById('linkPartnershipGroup').style.display = via === 'partnership' ? '' : 'none';
     document.getElementById('linkParentGroup').style.display = via === 'single' ? '' : 'none';
   }
 };
 
 document.getElementById('btnLinkCancel').addEventListener('click', () => closeModal('modalParentLink'));
 document.getElementById('btnLinkSave').addEventListener('click', async () => {
   const childId = parseInt(document.getElementById('linkChild').value);
   const via = document.getElementById('linkViaType').value;
   const body = { child_id: childId };
   if (via === 'partnership') {
     body.partnership_id = parseInt(document.getElementById('linkPartnership').value);
   } else {
     body.parent_id = parseInt(document.getElementById('linkParent').value);
   }
   try {
     await api('POST', `/api/trees/${state.activeTreeId}/parentlinks`, body);
     closeModal('modalParentLink');
     await loadGraph(state.activeTreeId);
     if (state.selectedPersonId) openDetailPanel(state.selectedPersonId);
   } catch(e) { showError(e.message); }
 });
 
 /* ── Members modal ── */
 async function openMembersModal(treeId) {
   state._ctxTreeId = treeId;
   await loadTrees();
   renderMembersModal(treeId);
   openModal('modalMembers');
 }
 
 function renderMembersModal(treeId) {
   const tree = state.trees.find(t => t.id === treeId);
   if (!tree) return;
   const isOwner = tree.role === 'owner';
 
   document.getElementById('membersList').innerHTML = tree.members.map(m => `
     <div class="member-row">
       <span class="member-username">${esc(m.display_name || m.username)}</span>
       <span class="member-role">${m.role}</span>
       ${isOwner && m.role !== 'owner' ? `
         <button class="btn-icon danger" title="${t('remove')}" onclick="removeMember(${treeId},'${esc(m.username)}')">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
         </button>` : ''}
     </div>`).join('');
 
   document.getElementById('pendingList').innerHTML = tree.pending_invitations?.length ? (
     `<p class="form-label" style="margin-top:1rem;margin-bottom:0.4rem">${t('pending')}</p>` +
     tree.pending_invitations.map(inv => `
       <div class="pending-row">
         <span>${esc(inv.email)} <em style="opacity:0.5">(${inv.role})</em></span>
         ${isOwner ? `<button class="btn-icon danger" onclick="revokeInvitation(${treeId},'${esc(inv.email)}')">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
         </button>` : ''}
       </div>`).join('')
   ) : '';
 
   document.querySelector('.members-invite-section').style.display = isOwner ? '' : 'none';
 }
 
 window.removeMember = async (treeId, username) => {
   if (!confirm(`${t('remove')} ${username}?`)) return;
   try {
     await api('DELETE', `/api/trees/${treeId}/members/${username}`);
     await loadTrees(); renderMembersModal(treeId);
   } catch(e) { showError(e.message); }
 };
 
 window.revokeInvitation = async (treeId, email) => {
   try {
     await api('DELETE', `/api/trees/${treeId}/invitations/${encodeURIComponent(email)}`);
     await loadTrees(); renderMembersModal(treeId);
   } catch(e) { showError(e.message); }
 };
 
 document.getElementById('btnInviteSend').addEventListener('click', async () => {
   const username = document.getElementById('inviteUsername').value.trim();
   const role = document.getElementById('inviteRole').value;
   if (!username) return;
   try {
     await api('POST', `/api/trees/${state._ctxTreeId}/members`, { username, role });
     document.getElementById('inviteUsername').value = '';
     await loadTrees(); renderMembersModal(state._ctxTreeId);
   } catch(e) { showError(e.message); }
 });
 
 document.getElementById('btnDownloadPDF').addEventListener('click', downloadPDF);
 
 document.getElementById('btnMembersClose').addEventListener('click', () => closeModal('modalMembers'));
 
 /* ── Toolbar ── */
 document.getElementById('btnZoomIn').addEventListener('click', () => svg?.transition().call(zoom.scaleBy, 1.3));
 document.getElementById('btnZoomOut').addEventListener('click', () => svg?.transition().call(zoom.scaleBy, 1 / 1.3));
 document.getElementById('btnFit').addEventListener('click', fitCanvas);
 document.getElementById('sidebarToggle').addEventListener('click', () => {
   document.getElementById('sidebar').classList.toggle('collapsed');
 });
 
 /* ── Close modals on backdrop / Escape ── */
 document.querySelectorAll('.modal-overlay').forEach(overlay => {
   overlay.addEventListener('click', e => { if (e.target === overlay) overlay.classList.remove('open'); });
 });
 document.addEventListener('keydown', e => {
   if (e.key === 'Escape') {
     document.querySelectorAll('.modal-overlay.open').forEach(m => m.classList.remove('open'));
     document.getElementById('ctxMenu').classList.remove('open');
   }
 });
 
 /* ── Helpers ── */
 function esc(s) {
   return String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
 }
 function truncate(s, n) { return s.length > n ? s.slice(0, n - 1) + '…' : s; }
 function formatDateRange(birth, death) {
   if (!birth && !death) return '';
   const year = d => d.slice(-4);
   const b = birth ? year(birth) : '?';
   return death ? `${b} – ${year(death)}` : b;
 }
 
 /* ── Language change ── */
 document.addEventListener('langchange', () => {
   if (state.trees.length) renderSidebar();
   if (state.activeTreeId) renderCanvas();
   if (state.selectedPersonId) openDetailPanel(state.selectedPersonId);
 });
 
 /* ── Init ── */
 showEmptyState();
 boot().catch(console.error);