@captiveorigins/onepedigree-react 0.1.0-alpha.5 → 0.1.0-alpha.8

package/dist/AhnentafelList.d.ts

@@ -0,0 +1,26 @@
+import { type Individual, type PedigreeViewProjection } from '@captiveorigins/onepedigree-core';
+import { type Terminology } from './describe.js';
+export type AhnentafelListProps = {
+    projection: PedigreeViewProjection;
+    terminology?: Partial<Terminology>;
+    /** Words for the two parents (default Father/Mother), e.g. Sire/Dam. */
+    parentWords?: {
+        paternal: string;
+        maternal: string;
+    };
+    getIndividualHref?: (individual: Individual) => string | null | undefined;
+    onSelect?: (individualId: string) => void;
+    selectedIndividualId?: string | null;
+    className?: string;
+};
+/** "Father’s mother" for Ahnentafel number 6: each bit after the first is a step (0 = paternal, 1 = maternal). */
+export declare function ahnentafelRelation(n: number, words?: {
+    paternal: string;
+    maternal: string;
+}): string;
+/**
+ * The Ahnentafel as genealogists use it: a numbered list of ancestors by
+ * generation (1 = the focal individual, 2n = father, 2n + 1 = mother), with
+ * life years and the relationship spelled out. Server-renderable.
+ */
+export declare function AhnentafelList(props: AhnentafelListProps): import("react").JSX.Element;

package/dist/AhnentafelList.js

@@ -0,0 +1,36 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { lifeLabel, lifeSpan } from '@captiveorigins/onepedigree-core';
+import { DEFAULT_TERMS, labelOf } from './describe.js';
+/** "Father’s mother" for Ahnentafel number 6: each bit after the first is a step (0 = paternal, 1 = maternal). */
+export function ahnentafelRelation(n, words = { paternal: 'Father', maternal: 'Mother' }) {
+    if (n <= 1)
+        return '';
+    const steps = n
+        .toString(2)
+        .slice(1)
+        .split('')
+        .map((b) => (b === '0' ? words.paternal : words.maternal));
+    return steps.map((w, i) => (i === 0 ? w : w.toLowerCase())).join('’s ');
+}
+/**
+ * The Ahnentafel as genealogists use it: a numbered list of ancestors by
+ * generation (1 = the focal individual, 2n = father, 2n + 1 = mother), with
+ * life years and the relationship spelled out. Server-renderable.
+ */
+export function AhnentafelList(props) {
+    const terms = { ...DEFAULT_TERMS, ...props.terminology };
+    const rows = props.projection.occurrences.filter((o) => o.ahnentafel !== undefined).sort((a, b) => a.ahnentafel - b.ahnentafel);
+    const generations = new Map();
+    for (const r of rows) {
+        const g = Math.floor(Math.log2(r.ahnentafel)) + 1;
+        generations.set(g, [...(generations.get(g) ?? []), r]);
+    }
+    const unnumbered = props.projection.occurrences.filter((o) => o.ahnentafel === undefined);
+    return (_jsxs("div", { className: ['op-ahnentafel', props.className].filter(Boolean).join(' '), children: [[...generations].map(([g, list]) => (_jsxs("section", { className: "op-ahnentafel-generation", "aria-label": `Generation ${g}`, children: [_jsxs("h3", { children: ["Generation ", g] }), _jsx("ol", { children: list.map((o) => {
+                            const individual = props.projection.individuals[o.individualId];
+                            const href = individual ? props.getIndividualHref?.(individual) : null;
+                            const name = labelOf(individual, terms);
+                            const years = lifeLabel(lifeSpan(individual));
+                            return (_jsxs("li", { value: o.ahnentafel, "data-selected": props.selectedIndividualId === o.individualId || undefined, children: [_jsxs("span", { className: "op-ahnentafel-number", children: [o.ahnentafel, "."] }), ' ', href ? (_jsx("a", { href: href, children: name })) : props.onSelect ? (_jsx("button", { type: "button", onClick: () => props.onSelect(o.individualId), children: name })) : (_jsx("span", { children: name })), years && _jsxs("span", { className: "op-ahnentafel-years", children: [" ", years] }), o.ahnentafel > 1 && _jsxs("span", { className: "op-ahnentafel-relation", children: [" \u00B7 ", ahnentafelRelation(o.ahnentafel, props.parentWords)] })] }, o.occurrenceId));
+                        }) })] }, g))), unnumbered.length > 0 && (_jsxs("p", { className: "op-ahnentafel-note", children: [unnumbered.length, " ", unnumbered.length === 1 ? terms.individual : terms.individuals, " without a mother/father role are not numbered."] }))] }));
+}

package/dist/PedigreeExplorer.d.ts

@@ -20,6 +20,13 @@ export type PedigreeExplorerProps = Omit<PedigreeViewProps, 'interactive' | 'vie
     themeEditor?: boolean;
     /** Called with the edited theme (e.g. to save it). */
     onThemeChange?: (theme: PedigreeTheme) => void;
+    /** Print the chart (default: the browser's print, showing only the chart). Desktop shells can supply their own. */
+    onPrint?: () => void;
+    /** Ahnentafel words for the two parents (default Father/Mother). */
+    parentWords?: {
+        paternal: string;
+        maternal: string;
+    };
     /** Accessible labels for the controls. */
     labels?: Partial<Record<'zoomIn' | 'zoomOut' | 'fit' | 'download' | 'print' | 'close' | 'open' | 'controls' | 'colors', string>>;
 };

package/dist/PedigreeExplorer.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useMemo, useRef, useState } from 'react';
+import { AhnentafelList } from './AhnentafelList.js';
 import { DEFAULT_TERMS, describeStructure, labelOf } from './describe.js';
 import { nearestNode, useOccurrenceHighlighting, usePedigreeSelection } from './hooks.js';
 import { PedigreeView } from './PedigreeView.js';
@@ -17,6 +18,22 @@ const LABELS = {
     controls: 'Pedigree controls',
     colors: 'Colors',
 };
+/** Properties copied into downloaded SVGs (they have no stylesheet). */
+const INLINE = ['fill', 'fill-opacity', 'stroke', 'stroke-width', 'stroke-dasharray', 'stroke-opacity', 'opacity', 'font-family', 'font-size', 'font-weight', 'font-style', 'visibility', 'display'];
+/** Prints only this chart: everything else on the page is hidden while printing. */
+function printChart(el) {
+    if (!el)
+        return window.print();
+    el.setAttribute('data-op-printing', '');
+    document.documentElement.setAttribute('data-op-printing', '');
+    const done = () => {
+        el.removeAttribute('data-op-printing');
+        document.documentElement.removeAttribute('data-op-printing');
+        window.removeEventListener('afterprint', done);
+    };
+    window.addEventListener('afterprint', done);
+    window.print();
+}
 const KEY_DIRECTION = { ArrowUp: 'up', ArrowDown: 'down', ArrowLeft: 'left', ArrowRight: 'right' };
 /**
  * Interactive pedigree: pan (drag, Shift+arrows), zoom (wheel, +/-, buttons),
@@ -133,6 +150,22 @@ export function PedigreeExplorer(props) {
             return;
         const clone = svg.cloneNode(true);
         clone.setAttribute('viewBox', `${full.x} ${full.y} ${full.width} ${full.height}`);
+        clone.setAttribute('width', String(full.width));
+        clone.setAttribute('height', String(full.height));
+        // A downloaded file has no stylesheet: copy each element's computed colors and fonts into it.
+        const source = [svg, ...svg.querySelectorAll('*')];
+        const target = [clone, ...clone.querySelectorAll('*')];
+        source.forEach((el, i) => {
+            const cs = getComputedStyle(el);
+            target[i]?.setAttribute('style', INLINE.map((prop) => `${prop}:${cs.getPropertyValue(prop)}`).join(';'));
+        });
+        const bg = getComputedStyle(root.current).backgroundColor;
+        if (bg && bg !== 'rgba(0, 0, 0, 0)') {
+            const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+            for (const [k, v] of Object.entries({ x: full.x, y: full.y, width: full.width, height: full.height, fill: bg }))
+                rect.setAttribute(k, String(v));
+            clone.insertBefore(rect, clone.firstChild);
+        }
         const blob = new Blob([new XMLSerializer().serializeToString(clone)], { type: 'image/svg+xml' });
         const a = document.createElement('a');
         a.href = URL.createObjectURL(blob);
@@ -144,5 +177,5 @@ export function PedigreeExplorer(props) {
     const individual = occurrence ? projection.individuals[occurrence.individualId] : undefined;
     const href = individual ? (props.getIndividualHref?.(individual) ?? null) : null;
     const close = () => choose(null);
-    return (_jsxs("div", { ref: root, className: "op-explorer", style: { height: props.height ?? '32rem', ...(theme ? { ...themeStyle(theme, projection.view), background: 'var(--op-background)' } : {}) }, onKeyDown: onKeyDown, onWheel: onWheel, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, children: [_jsxs("div", { className: "op-toolbar", role: "toolbar", "aria-label": labels.controls, children: [_jsx("button", { type: "button", onClick: () => zoom(0.8), "aria-label": labels.zoomIn, title: labels.zoomIn, children: "+" }), _jsx("button", { type: "button", onClick: () => zoom(1.25), "aria-label": labels.zoomOut, title: labels.zoomOut, children: "\u2212" }), _jsx("button", { type: "button", onClick: () => setBox(full), "aria-label": labels.fit, title: labels.fit, children: "\u2922" }), _jsx("button", { type: "button", onClick: download, "aria-label": labels.download, title: labels.download, children: "\u2913" }), _jsx("button", { type: "button", onClick: () => window.print(), "aria-label": labels.print, title: labels.print, children: "\u2399" }), props.themeEditor && (_jsx("button", { type: "button", onClick: () => setEditing((v) => !v), "aria-label": labels.colors, title: labels.colors, "aria-expanded": editing, children: "\u25D0" })), props.toolbar] }), props.themeEditor && editing && (_jsx("div", { className: "op-theme-panel", children: _jsx(ThemeEditor, { value: theme ?? structuredClone(THEME_PRESETS[0]), view: projection.view, onChange: changeTheme }) })), _jsx(PedigreeView, { ...props, theme: theme, interactive: true, viewBox: box, selectedIndividualId: selectedId, highlightedOccurrenceIds: highlighted, onNodeClick: (occ) => choose(selectedOccurrence === occ.occurrenceId ? null : occ), onNodeKeyDown: onNodeKeyDown, svgProps: { ...props.svgProps, width: '100%', height: '100%', preserveAspectRatio: 'xMidYMid meet' } }), occurrence && (_jsx("div", { className: "op-quick-view", role: "dialog", "aria-label": labelOf(individual, terms), children: props.renderQuickView ? (props.renderQuickView({ individual, occurrence, href, close })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "op-quick-view-title", children: labelOf(individual, terms) }), individual?.sex && _jsx("p", { children: individual.sex }), _jsx("p", { children: describeStructure(projection.structures[occurrence.individualId]) }), occurrence.repeated && _jsx("p", { children: terms.repeated }), _jsxs("div", { className: "op-quick-view-actions", children: [href && _jsx("a", { href: href, children: labels.open }), _jsx("button", { type: "button", onClick: close, children: labels.close })] })] })) }))] }));
+    return (_jsxs("div", { ref: root, className: "op-explorer", style: { height: props.height ?? '32rem', ...(theme ? { ...themeStyle(theme, projection.view), background: 'var(--op-background)' } : {}) }, onKeyDown: onKeyDown, onWheel: onWheel, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, children: [_jsxs("div", { className: "op-toolbar", role: "toolbar", "aria-label": labels.controls, children: [_jsx("button", { type: "button", onClick: () => zoom(0.8), "aria-label": labels.zoomIn, title: labels.zoomIn, children: "+" }), _jsx("button", { type: "button", onClick: () => zoom(1.25), "aria-label": labels.zoomOut, title: labels.zoomOut, children: "\u2212" }), _jsx("button", { type: "button", onClick: () => setBox(full), "aria-label": labels.fit, title: labels.fit, children: "\u2922" }), _jsx("button", { type: "button", onClick: download, "aria-label": labels.download, title: labels.download, children: "\u2913" }), _jsx("button", { type: "button", onClick: () => (props.onPrint ? props.onPrint() : printChart(root.current)), "aria-label": labels.print, title: labels.print, children: "\u2399" }), props.themeEditor && (_jsx("button", { type: "button", onClick: () => setEditing((v) => !v), "aria-label": labels.colors, title: labels.colors, "aria-expanded": editing, children: "\u25D0" })), props.toolbar] }), props.themeEditor && editing && (_jsx("div", { className: "op-theme-panel", children: _jsx(ThemeEditor, { value: theme ?? structuredClone(THEME_PRESETS[0]), view: projection.view, onChange: changeTheme }) })), projection.view === 'ahnentafel' ? (_jsx(AhnentafelList, { projection: projection, terminology: props.terminology, parentWords: props.parentWords, getIndividualHref: props.getIndividualHref, selectedIndividualId: selectedId, onSelect: (individualId) => choose(projection.occurrences.find((o) => o.individualId === individualId) ?? null) })) : (_jsx(PedigreeView, { ...props, theme: theme, interactive: true, viewBox: box, selectedIndividualId: selectedId, highlightedOccurrenceIds: highlighted, onNodeClick: (occ) => choose(selectedOccurrence === occ.occurrenceId ? null : occ), onNodeKeyDown: onNodeKeyDown, svgProps: { ...props.svgProps, width: '100%', height: '100%', preserveAspectRatio: 'xMidYMid meet' } })), occurrence && (_jsx("div", { className: "op-quick-view", role: "dialog", "aria-label": labelOf(individual, terms), children: props.renderQuickView ? (props.renderQuickView({ individual, occurrence, href, close })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "op-quick-view-title", children: labelOf(individual, terms) }), individual?.sex && _jsx("p", { children: individual.sex }), _jsx("p", { children: describeStructure(projection.structures[occurrence.individualId]) }), occurrence.repeated && _jsx("p", { children: terms.repeated }), _jsxs("div", { className: "op-quick-view-actions", children: [href && _jsx("a", { href: href, children: labels.open }), _jsx("button", { type: "button", onClick: close, children: labels.close })] })] })) }))] }));
 }

package/dist/PedigreeView.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { estimateNodeWidth, lifeLabel, lifeSpan, nodeSublabel } from '@captiveorigins/onepedigree-core';
 import { arcPath, DEFAULT_TERMS, describeProjection, describeStructure, labelOf, VIEW_LABELS } from './describe.js';
 import { themeStyle } from './themes.js';
 const cx = (...c) => c.filter(Boolean).join(' ');
@@ -18,10 +19,58 @@ function Junction({ s, x, y }) {
 }
 function DefaultIndividual({ individual, occurrence, node, structure, terms }) {
     const label = labelOf(individual, terms);
-    const sub = [individual?.sex, occurrence.ahnentafel !== undefined ? `#${occurrence.ahnentafel}` : null].filter(Boolean).join(' · ');
-    const chars = Math.max(6, Math.floor(node.width / 7.5));
+    // Sex mark and life years ("♂ 1950 – 2010"), plus the Ahnentafel number where it applies.
+    const sub = [nodeSublabel(individual), occurrence.ahnentafel !== undefined ? `#${occurrence.ahnentafel}` : null].filter(Boolean).join(' · ');
+    // Nodes are sized to their names; names are only shortened when a host made the node narrower (or past the widest node).
+    const fits = node.width >= estimateNodeWidth(label, sub) - 1;
+    const chars = fits ? Infinity : Math.max(6, Math.floor((node.width - 20) / 7.4));
+    if (node.life)
+        return (_jsxs(_Fragment, { children: [_jsx("rect", { className: "op-node-box op-life-bar", width: node.width, height: node.height, rx: 6, ry: 6, "data-open": node.life.open || undefined }), _jsx("text", { className: "op-label", x: node.life.undated || node.width >= label.length * 7.4 + 16 ? 8 : node.width + 6, y: node.height / 2 + 4, children: label })] }));
     return (_jsxs(_Fragment, { children: [_jsx("rect", { className: "op-node-box", width: node.width, height: node.height, rx: 8, ry: 8 }), _jsx("text", { className: "op-label", x: 10, y: sub ? node.height / 2 - 3 : node.height / 2 + 4, children: short(label, chars) }), sub && (_jsx("text", { className: "op-sublabel", x: 10, y: node.height / 2 + 13, children: short(sub, chars) })), occurrence.repeated && (_jsx("text", { className: "op-repeat-marker", x: node.width - 8, y: 14, textAnchor: "end", children: "\u21BB" })), structure && _jsx(Junction, { s: structure, x: node.width / 2, y: 0 })] }));
 }
+const RAD = 180 / Math.PI;
+/**
+ * Fan labels follow the fan: along the arc in the wide inner rings (with life
+ * years when there is room), along the radius in the narrow outer ones; always
+ * upright, never upside down.
+ */
+function FanLabel({ arc, label, years, id }) {
+    const { cx: x0, cy: y0, innerRadius: r0, outerRadius: r1, startAngle: a0, endAngle: a1 } = arc;
+    if (r0 <= 0)
+        return (_jsxs("text", { className: "op-label op-fan-label", x: x0, y: y0 + (years ? -2 : 4), textAnchor: "middle", children: [short(label, Math.floor((2 * r1) / 7)), years && (_jsx("tspan", { className: "op-sublabel", x: x0, dy: 15, children: years }))] }));
+    const mid = (a0 + a1) / 2;
+    const r = (r0 + r1) / 2;
+    const ring = r1 - r0;
+    const arcLength = r * (a1 - a0);
+    const pt = (radius, t) => `${(x0 + radius * Math.sin(t)).toFixed(2)} ${(y0 - radius * Math.cos(t)).toFixed(2)}`;
+    if (arcLength >= ring * 1.2) {
+        // Along the arc; on the lower half the path runs the other way so the text stays upright.
+        const lower = Math.cos(mid) < 0;
+        const path = (radius) => lower ? `M ${pt(radius, a1)} A ${radius} ${radius} 0 0 0 ${pt(radius, a0)}` : `M ${pt(radius, a0)} A ${radius} ${radius} 0 0 1 ${pt(radius, a1)}`;
+        const yearsR = r + (Math.cos(mid) < 0 ? 9 : -9);
+        // Years only where they fit in the segment (never spilling into the next one).
+        const showYears = Boolean(years) && ring >= 46 && years.length * 6.4 + 8 <= yearsR * (a1 - a0);
+        const nameR = showYears ? r + (lower ? -7 : 7) : r + (lower ? -4 : 4);
+        return (_jsxs(_Fragment, { children: [_jsxs("defs", { children: [_jsx("path", { id: `${id}-n`, d: path(nameR) }), showYears && _jsx("path", { id: `${id}-y`, d: path(yearsR) })] }), _jsx("text", { className: "op-label op-fan-label", children: _jsx("textPath", { href: `#${id}-n`, startOffset: "50%", textAnchor: "middle", children: short(label, Math.floor((nameR * (a1 - a0)) / 7.2)) }) }), showYears && (_jsx("text", { className: "op-sublabel op-fan-label", children: _jsx("textPath", { href: `#${id}-y`, startOffset: "50%", textAnchor: "middle", children: years }) }))] }));
+    }
+    // Along the radius, reading outward on the right half and inward on the left.
+    const left = Math.sin(mid) < 0;
+    const [px, py] = pt(r, mid).split(' ').map(Number);
+    const rotate = mid * RAD - 90 + (left ? 180 : 0);
+    const size = Math.min(13, Math.max(8, arcLength * 0.6));
+    return (_jsx("text", { className: "op-label op-fan-label", x: px, y: py, textAnchor: "middle", dominantBaseline: "central", transform: `rotate(${rotate.toFixed(2)} ${px} ${py})`, style: { fontSize: size }, children: short(label, Math.floor((ring - 8) / (size * 0.56))) }));
+}
+/** The timeline's year axis: ticks every 1, 2, 5, 10, 25, 50 or 100 years, whichever keeps them readable. */
+function TimelineAxis({ axis, width }) {
+    const step = [1, 2, 5, 10, 25, 50, 100, 250].find((s) => s * axis.pxPerYear >= 60) ?? 500;
+    const ticks = [];
+    for (let y = Math.ceil(axis.from / step) * step; y <= axis.to; y += step)
+        ticks.push(y);
+    return (_jsxs("g", { className: "op-timeline-axis", "aria-hidden": "true", children: [_jsx("line", { className: "op-axis-line", x1: 0, x2: width, y1: 22, y2: 22 }), ticks.map((y) => {
+                const x = (y - axis.from) * axis.pxPerYear;
+                return (_jsxs("g", { children: [_jsx("line", { className: "op-axis-tick", x1: x, x2: x, y1: 18, y2: axis.undatedY ?? 100000 }), _jsx("text", { className: "op-sublabel", x: x, y: 12, textAnchor: "middle", children: y })] }, y));
+            })] }));
+}
 function groupBox(group, nodes, pad = 10) {
     const ns = group.occurrenceIds.map((id) => nodes.get(id)).filter((n) => Boolean(n));
     if (!ns.length)
@@ -53,7 +102,7 @@ export function PedigreeView(props) {
                 if (!b)
                     return null;
                 return (_jsx("g", { className: cx('op-cohort', c.cohort), "data-cohort": g.id.replace(/^cohort:/, ''), children: props.renderCohortMarker ? (props.renderCohortMarker({ group: g, box: b })) : (_jsxs(_Fragment, { children: [_jsx("rect", { className: "op-cohort-box", x: b.x, y: b.y, width: b.width, height: b.height, rx: 12, ry: 12 }), _jsx("text", { className: "op-cohort-label", x: b.x + 10, y: b.y + b.height + 14, children: g.label ?? terms.cohort })] })) }, g.id));
-            }), _jsx("g", { className: "op-connectors", children: layout.edges.map((e) => {
+            }), layout.axis && _jsx(TimelineAxis, { axis: layout.axis, width: layout.bounds.width }), _jsx("g", { className: "op-connectors", children: layout.edges.map((e) => {
                     const child = occById.get(e.target);
                     const s = child ? p.structures[child.individualId] : undefined;
                     const highlighted = props.highlightedOccurrenceIds?.has(e.source) && props.highlightedOccurrenceIds?.has(e.target);
@@ -71,6 +120,7 @@ export function PedigreeView(props) {
                     const aria = [
                         label,
                         individual?.sex,
+                        lifeLabel(lifeSpan(individual)) || null,
                         occurrence.ahnentafel !== undefined ? `Ahnentafel ${occurrence.ahnentafel}` : null,
                         occurrence.repeated ? terms.repeated : null,
                         describeStructure(structure),
@@ -78,7 +128,7 @@ export function PedigreeView(props) {
                         .filter(Boolean)
                         .join(', ');
                     const slot = { individual, occurrence, node, structure, selected, highlighted, terms };
-                    const content = node.arc ? (_jsxs(_Fragment, { children: [_jsx("path", { className: cx('op-fan-segment', c.fanSegment), d: arcPath(node.arc) }), _jsx("text", { className: "op-label", x: node.x + node.width / 2, y: node.y + node.height / 2 + 4, textAnchor: "middle", children: short(label, Math.max(4, Math.floor((node.arc.outerRadius - node.arc.innerRadius) / 7))) })] })) : (_jsx("g", { transform: `translate(${node.x} ${node.y})`, children: props.renderIndividual ? props.renderIndividual(slot) : _jsx(DefaultIndividual, { ...slot }) }));
+                    const content = node.arc ? (_jsxs(_Fragment, { children: [_jsx("path", { className: cx('op-fan-segment', c.fanSegment), d: arcPath(node.arc) }), _jsx(FanLabel, { arc: node.arc, label: label, years: nodeSublabel(individual), id: `${id}-arc-${node.occurrenceId.replace(/[^a-zA-Z0-9_-]/g, '_')}` })] })) : (_jsx("g", { transform: `translate(${node.x} ${node.y})`, children: props.renderIndividual ? props.renderIndividual(slot) : _jsx(DefaultIndividual, { ...slot }) }));
                     const attrs = {
                         className: cx('op-node', 'op-individual', c.node),
                         'data-individual': occurrence.individualId,

package/dist/index.d.ts

@@ -2,3 +2,4 @@ export { PedigreeView, type CohortMarkerSlotProps, type IndividualSlotProps, typ
 export { PedigreeExplorer, type PedigreeExplorerProps, type QuickViewProps } from './PedigreeExplorer.js';
 export * from './headless.js';
 export { ThemeEditor, type ThemeEditorProps } from './ThemeEditor.js';
+export { AhnentafelList, ahnentafelRelation, type AhnentafelListProps } from './AhnentafelList.js';

package/dist/index.js

@@ -2,3 +2,4 @@ export { PedigreeView } from './PedigreeView.js';
 export { PedigreeExplorer } from './PedigreeExplorer.js';
 export * from './headless.js';
 export { ThemeEditor } from './ThemeEditor.js';
+export { AhnentafelList, ahnentafelRelation } from './AhnentafelList.js';

package/dist/styles.css

@@ -73,6 +73,11 @@
 .op-individual[data-generation='1'] .op-fan-segment,
 .op-individual[data-generation='3'] .op-fan-segment,
 .op-individual[data-generation='5'] .op-fan-segment { fill: var(--op-fan-fill-alt); }
+.op-fan-label { pointer-events: none; }
+.op-life-bar[data-open] { stroke-dasharray: 4 3; }
+.op-axis-line { stroke: var(--op-connector); stroke-width: 1px; }
+.op-axis-tick { stroke: var(--op-connector); stroke-opacity: 0.18; stroke-width: 1px; }
+.op-view-timeline .op-connector { stroke-opacity: 0.55; }
 .op-cohort-box { fill: none; stroke: var(--op-cohort-border); stroke-dasharray: 4 4; }
 .op-cohort-label { fill: var(--op-cohort-label); font-size: 11px; }
 
@@ -98,6 +103,14 @@
   padding: 12px; border-radius: 10px; background: var(--op-node-background, #fff); color: var(--op-label, #1d2330);
   border: 1px solid var(--op-node-border, #6b7a90); font: 13px/1.4 system-ui, sans-serif; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
 }
+.op-ahnentafel { padding: 56px 20px 20px; overflow: auto; height: 100%; box-sizing: border-box; color: var(--op-label, #1d2330); font: 14px/1.5 var(--op-font, system-ui, sans-serif); }
+.op-ahnentafel h3 { margin: 16px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--op-sublabel, #5b6577); }
+.op-ahnentafel ol { list-style: none; margin: 0; padding: 0; columns: 18rem; column-gap: 24px; }
+.op-ahnentafel li { break-inside: avoid; padding: 2px 0; }
+.op-ahnentafel li[data-selected] { font-weight: 600; }
+.op-ahnentafel button { all: unset; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
+.op-ahnentafel-number { display: inline-block; min-width: 2.5em; text-align: end; color: var(--op-sublabel, #5b6577); font-variant-numeric: tabular-nums; }
+.op-ahnentafel-years, .op-ahnentafel-relation, .op-ahnentafel-note { color: var(--op-sublabel, #5b6577); font-size: 13px; }
 .op-theme-editor-title { font-weight: 600; margin: 0 0 8px; }
 .op-theme-row { display: grid; grid-template-columns: 1fr 2.25rem 5.5rem; align-items: center; gap: 6px; margin: 4px 0; }
 .op-theme-row select { grid-column: 2 / 4; }
@@ -111,6 +124,9 @@
   .op-root * { transition: none !important; animation: none !important; }
 }
 @media print {
+  html[data-op-printing] body * { visibility: hidden; }
+  html[data-op-printing] [data-op-printing], html[data-op-printing] [data-op-printing] * { visibility: visible; }
+  html[data-op-printing] [data-op-printing] { position: fixed; inset: 0; height: 100% !important; border-radius: 0; }
   .op-toolbar, .op-quick-view, .op-theme-panel { display: none; }
   .op-explorer { height: auto !important; overflow: visible; }
   .op-root { --op-node-background: #fff; --op-label: #000; --op-connector: #555; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@captiveorigins/onepedigree-react",
-  "version": "0.1.0-alpha.5",
+  "version": "0.1.0-alpha.8",
   "description": "OnePedigree for React: server-renderable SVG pedigree views (all 13), interactive explorer, headless hooks and CSS-variable styling.",
   "keywords": [
     "pedigree",
@@ -42,7 +42,7 @@
     "node": ">=22"
   },
   "dependencies": {
-    "@captiveorigins/onepedigree-core": "^0.1.0-alpha.5"
+    "@captiveorigins/onepedigree-core": "^0.1.0-alpha.8"
   },
   "peerDependencies": {
     "react": ">=18.2"