@captiveorigins/onepedigree-react 0.1.0-alpha.6 → 0.1.0-alpha.9

package/README.md

@@ -26,6 +26,19 @@ All 13 views of the core: `pedigree`, `fan`, `ahnentafel`, `descendants`, `hourg
 `paternal`. Repeated individuals follow the projection's `merge`, `separate` or `hybrid` mode;
 selecting one occurrence highlights every occurrence of that individual.
 
+## Rearranging by drag
+
+In views where order is a choice (descendants, hourglass, cohort, population, relationship), people can drag a node sideways to reorder it among its siblings. Ancestor charts keep the father/mother convention. A node only moves within its own drawn groups (a clutch or litter frame) and among individuals with the same parents, so frames and family lines stay truthful. The data never changes: the order is a layout option you keep (and may save).
+
+```tsx
+const [nodeOrder, setNodeOrder] = useState<string[]>([])
+const layout = useMemo(() => layoutSync(projection, { nodeOrder }), [projection, nodeOrder])
+
+<PedigreeExplorer projection={projection} layout={layout} nodeOrder={nodeOrder} onNodeOrderChange={setNodeOrder} />
+```
+
+`dropNodeOrder(layout, occurrenceId, delta, current, groupOf)` is exported for custom UIs.
+
 ## Themes and colors
 
 Seven presets, each with its own per-view accents (e.g. warm maternal and cool paternal
@@ -43,6 +56,10 @@ below WCAG AA. `onThemeChange` receives the edited theme (a plain object) to sto
 back as `theme`. `ThemeEditor` is also exported for use in your own settings pages. Themes are
 rendered as inline custom properties, so they work in server rendering.
 
+## Brand family
+
+OnePedigree and OneTaxonomy share a backbone (`brand/README.md`): the same line icons (`Icon`, `ICON_PATHS`), 32 px controls, a floating canvas toolbar and a Captive Origins orange focus ring, while each keeps its own views and character.
+
 ## Styling
 
 - Default stylesheet `styles.css` (optional; leave it out for unstyled mode).

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

@@ -1,4 +1,4 @@
-import type { Individual, IndividualOccurrence } from '@captiveorigins/onepedigree-core';
+import { type Individual, type IndividualOccurrence } from '@captiveorigins/onepedigree-core';
 import { type ReactNode } from 'react';
 import { type PedigreeViewProps } from './PedigreeView.js';
 import { type PedigreeTheme } from './themes.js';
@@ -20,6 +20,21 @@ 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;
+    };
+    /**
+     * Turns on click-and-drag rearranging in views where order is a choice
+     * (REORDERABLE_VIEWS: descendants, hourglass, cohort, population, relationship).
+     * Called with the new order; pass it back as `layoutSync(projection, { nodeOrder })`.
+     */
+    onNodeOrderChange?: (nodeOrder: string[]) => void;
+    /** The current chosen order (what you passed to the layout), so a drag extends it. */
+    nodeOrder?: readonly string[];
     /** Accessible labels for the controls. */
     labels?: Partial<Record<'zoomIn' | 'zoomOut' | 'fit' | 'download' | 'print' | 'close' | 'open' | 'controls' | 'colors', string>>;
 };

package/dist/PedigreeExplorer.js

@@ -1,9 +1,13 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { REORDERABLE_VIEWS } from '@captiveorigins/onepedigree-core';
 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';
+import { Icon } from './icons.js';
+import { dropNodeOrder } from './reorder.js';
 import { ThemeEditor } from './ThemeEditor.js';
 import { presetTheme, THEME_PRESETS, themeStyle } from './themes.js';
 const LABELS = {
@@ -17,6 +21,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),
@@ -48,6 +68,10 @@ export function PedigreeExplorer(props) {
         props.onThemeChange?.(t);
     };
     const drag = useRef(null);
+    // Dragging a node (rearranging) moves the element directly while the pointer is down: no re-render per frame.
+    const nodeDrag = useRef(null);
+    const suppressClick = useRef(false);
+    const reorderable = Boolean(props.onNodeOrderChange) && REORDERABLE_VIEWS.has(projection.view);
     const choose = useCallback((occ) => {
         select(occ?.individualId ?? null);
         setSelectedOccurrence(occ?.occurrenceId ?? null);
@@ -66,7 +90,7 @@ export function PedigreeExplorer(props) {
     }, [full]);
     const pan = (dx, dy) => setBox((b) => ({ ...b, x: b.x + dx * b.width, y: b.y + dy * b.height }));
     const svgPoint = (e) => {
-        const svg = root.current?.querySelector('svg');
+        const svg = root.current?.querySelector('svg.op-root');
         const r = svg?.getBoundingClientRect();
         if (!r || !r.width || !r.height)
             return undefined;
@@ -111,28 +135,93 @@ export function PedigreeExplorer(props) {
             return;
         zoom(e.deltaY > 0 ? 1.1 : 0.9, svgPoint(e));
     };
+    const svgScale = () => {
+        const r = root.current?.querySelector('svg.op-root')?.getBoundingClientRect();
+        return r?.width ? Math.max(box.width / r.width, box.height / r.height) : 1;
+    };
     const onPointerDown = (e) => {
-        if (e.target.closest('.op-node, button, a'))
+        const target = e.target;
+        if (target.closest('button, a, .op-toolbar, .op-quick-view, .op-theme-panel'))
+            return;
+        const nodeEl = target.closest('.op-node');
+        if (nodeEl) {
+            const id = nodeEl.getAttribute('data-occurrence');
+            if (reorderable && id)
+                nodeDrag.current = { x: e.clientX, y: e.clientY, id, el: nodeEl, moved: false };
             return;
+        }
         drag.current = { x: e.clientX, y: e.clientY, box };
         e.currentTarget.setPointerCapture?.(e.pointerId);
     };
     const onPointerMove = (e) => {
+        const n = nodeDrag.current;
+        if (n) {
+            if (!n.moved && Math.hypot(e.clientX - n.x, e.clientY - n.y) < 4)
+                return;
+            if (!n.moved)
+                e.currentTarget.setPointerCapture?.(e.pointerId);
+            n.moved = true;
+            const k = svgScale();
+            n.el.style.translate = `${(e.clientX - n.x) * k}px ${(e.clientY - n.y) * k}px`;
+            n.el.setAttribute('data-dragging', '');
+            return;
+        }
         const d = drag.current;
-        const r = root.current?.querySelector('svg')?.getBoundingClientRect();
+        const r = root.current?.querySelector('svg.op-root')?.getBoundingClientRect();
         if (!d || !r?.width)
             return;
         setBox({ ...d.box, x: d.box.x - ((e.clientX - d.x) / r.width) * d.box.width, y: d.box.y - ((e.clientY - d.y) / r.height) * d.box.height });
     };
-    const onPointerUp = () => {
+    const onPointerUp = (e) => {
         drag.current = null;
+        const n = nodeDrag.current;
+        nodeDrag.current = null;
+        if (!n?.moved)
+            return;
+        n.el.style.translate = '';
+        n.el.removeAttribute('data-dragging');
+        suppressClick.current = true;
+        const k = svgScale();
+        // Only among nodes in the same drawn groups (clutch/litter frames, other-parent groups) and with the same
+        // parents, so frames and family lines stay truthful.
+        const groupOf = (id) => [
+            ...(projection.groups ?? []).filter((g) => g.occurrenceIds.includes(id)).map((g) => g.id),
+            projection.edges.filter((ed) => ed.target === id).map((ed) => ed.source).sort().join('+'),
+        ].join('|');
+        const order = dropNodeOrder(layout, n.id, { dx: (e.clientX - n.x) * k, dy: (e.clientY - n.y) * k }, props.nodeOrder, groupOf);
+        if (order)
+            props.onNodeOrderChange(order);
+    };
+    const onPointerCancel = () => {
+        drag.current = null;
+        if (nodeDrag.current) {
+            nodeDrag.current.el.style.translate = '';
+            nodeDrag.current.el.removeAttribute('data-dragging');
+        }
+        nodeDrag.current = null;
     };
     const download = () => {
-        const svg = root.current?.querySelector('svg');
+        const svg = root.current?.querySelector('svg.op-root');
         if (!svg)
             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 +233,11 @@ 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: onPointerCancel, onClickCapture: (e) => {
+            // A drag ends with a click on the node: don't let it select.
+            if (suppressClick.current) {
+                suppressClick.current = false;
+                e.stopPropagation();
+            }
+        }, "data-reorderable": reorderable ? '' : undefined, 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(Icon, { name: "plus" }) }), _jsx("button", { type: "button", onClick: () => zoom(1.25), "aria-label": labels.zoomOut, title: labels.zoomOut, children: _jsx(Icon, { name: "minus" }) }), _jsx("button", { type: "button", onClick: () => setBox(full), "aria-label": labels.fit, title: labels.fit, children: _jsx(Icon, { name: "fit" }) }), _jsx("button", { type: "button", onClick: download, "aria-label": labels.download, title: labels.download, children: _jsx(Icon, { name: "download" }) }), _jsx("button", { type: "button", onClick: () => (props.onPrint ? props.onPrint() : printChart(root.current)), "aria-label": labels.print, title: labels.print, children: _jsx(Icon, { name: "print" }) }), props.themeEditor && (_jsx("button", { type: "button", onClick: () => setEditing((v) => !v), "aria-label": labels.colors, title: labels.colors, "aria-expanded": editing, children: _jsx(Icon, { name: "palette" }) })), 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 && (_jsxs("a", { href: href, children: [_jsx(Icon, { name: "open" }), labels.open] })), _jsxs("button", { type: "button", onClick: close, children: [_jsx(Icon, { name: "close" }), 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/icons.d.ts

@@ -0,0 +1,33 @@
+import type { SVGProps } from 'react';
+/**
+ * The brand family's line icons (brand/README.md): 24 × 24, 1.75 stroke, round
+ * caps and joins, currentColor. The same drawings ship in OnePedigree and
+ * OneTaxonomy. Decorative by default (aria-hidden): put the words in the button's
+ * text or aria-label.
+ */
+export declare const ICON_PATHS: {
+    readonly plus: "M12 5v14M5 12h14";
+    readonly minus: "M5 12h14";
+    readonly fit: "M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5";
+    readonly download: "M12 4v11M7 10l5 5 5-5M5 20h14";
+    readonly print: "M7 9V4h10v5M7 17H5a1 1 0 0 1-1-1v-5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5a1 1 0 0 1-1 1h-2M7 14h10v6H7z";
+    readonly undo: "M9 14 4 9l5-5M4 9h10.5a5.5 5.5 0 0 1 0 11H11";
+    readonly redo: "m15 14 5-5-5-5M20 9H9.5a5.5 5.5 0 0 0 0 11H13";
+    readonly expand: "m7 15 5 5 5-5M7 9l5-5 5 5";
+    readonly collapse: "m7 20 5-5 5 5M7 4l5 5 5-5";
+    readonly flip: "M7 4v16M4 7l3-3 3 3M17 20V4m-3 13 3 3 3-3";
+    readonly focus: "M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM12 2v4M12 18v4M2 12h4M18 12h4";
+    readonly unfocus: "M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5M9 12h6";
+    readonly layout: "M4 12h4M8 6v12M8 6h5M8 18h5M8 12h9M15 4v4M15 16v4";
+    readonly filter: "M4 5h16l-6 8v6l-4 2v-8z";
+    readonly palette: "M12 3a9 9 0 1 0 0 18c1.1 0 1.5-.8 1.2-1.6-.4-1 .2-2.4 1.6-2.4H17a4 4 0 0 0 4-4c0-5.5-4-10-9-10zM7.5 11.5h.01M10 7.5h.01M15 7.5h.01";
+    readonly close: "M6 6l12 12M18 6 6 18";
+    readonly open: "M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5";
+    readonly grip: "M9 6h.01M15 6h.01M9 12h.01M15 12h.01M9 18h.01M15 18h.01";
+    readonly info: "M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM12 11v6M12 7.5h.01";
+};
+export type IconName = keyof typeof ICON_PATHS;
+export declare function Icon({ name, size, className, ...rest }: {
+    name: IconName;
+    size?: number;
+} & Omit<SVGProps<SVGSVGElement>, 'name'>): import("react").JSX.Element;

package/dist/icons.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The brand family's line icons (brand/README.md): 24 × 24, 1.75 stroke, round
+ * caps and joins, currentColor. The same drawings ship in OnePedigree and
+ * OneTaxonomy. Decorative by default (aria-hidden): put the words in the button's
+ * text or aria-label.
+ */
+export const ICON_PATHS = {
+    plus: 'M12 5v14M5 12h14',
+    minus: 'M5 12h14',
+    fit: 'M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5',
+    download: 'M12 4v11M7 10l5 5 5-5M5 20h14',
+    print: 'M7 9V4h10v5M7 17H5a1 1 0 0 1-1-1v-5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5a1 1 0 0 1-1 1h-2M7 14h10v6H7z',
+    undo: 'M9 14 4 9l5-5M4 9h10.5a5.5 5.5 0 0 1 0 11H11',
+    redo: 'm15 14 5-5-5-5M20 9H9.5a5.5 5.5 0 0 0 0 11H13',
+    expand: 'm7 15 5 5 5-5M7 9l5-5 5 5',
+    collapse: 'm7 20 5-5 5 5M7 4l5 5 5-5',
+    flip: 'M7 4v16M4 7l3-3 3 3M17 20V4m-3 13 3 3 3-3',
+    focus: 'M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM12 2v4M12 18v4M2 12h4M18 12h4',
+    unfocus: 'M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5M9 12h6',
+    layout: 'M4 12h4M8 6v12M8 6h5M8 18h5M8 12h9M15 4v4M15 16v4',
+    filter: 'M4 5h16l-6 8v6l-4 2v-8z',
+    palette: 'M12 3a9 9 0 1 0 0 18c1.1 0 1.5-.8 1.2-1.6-.4-1 .2-2.4 1.6-2.4H17a4 4 0 0 0 4-4c0-5.5-4-10-9-10zM7.5 11.5h.01M10 7.5h.01M15 7.5h.01',
+    close: 'M6 6l12 12M18 6 6 18',
+    open: 'M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5',
+    grip: 'M9 6h.01M15 6h.01M9 12h.01M15 12h.01M9 18h.01M15 18h.01',
+    info: 'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM12 11v6M12 7.5h.01',
+};
+export function Icon({ name, size = 16, className, ...rest }) {
+    return (_jsx("svg", { viewBox: "0 0 24 24", width: size, height: size, fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", className: ["op-icon", className].filter(Boolean).join(" "), ...rest, children: _jsx("path", { d: ICON_PATHS[name] }) }));
+}

package/dist/index.d.ts

@@ -2,3 +2,6 @@ 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';
+export { Icon, ICON_PATHS, type IconName } from './icons.js';
+export { dropNodeOrder } from './reorder.js';

package/dist/index.js

@@ -2,3 +2,6 @@ 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';
+export { Icon, ICON_PATHS } from './icons.js';
+export { dropNodeOrder } from './reorder.js';

package/dist/reorder.d.ts

@@ -0,0 +1,14 @@
+import type { LayoutResult } from '@captiveorigins/onepedigree-core';
+/**
+ * Where a dragged node lands in its row (click-and-drag rearranging, shared idea with
+ * OneTaxonomy). Rows are generations: same y in vertical charts, same x in horizontal
+ * ones. Returns the new `nodeOrder` for `layoutSync` (the row's order replaces any
+ * earlier choice for those nodes), or null when nothing changes. The layout applies
+ * it only where order is a choice (REORDERABLE_VIEWS), e.g. among siblings.
+ */
+export declare function dropNodeOrder(layout: LayoutResult, occurrenceId: string, delta: {
+    dx: number;
+    dy: number;
+}, current?: readonly string[], 
+/** Nodes only move among others of the same group (e.g. the same clutch), so grouped frames stay truthful. */
+groupOf?: (occurrenceId: string) => string | null | undefined): string[] | null;

package/dist/reorder.js

@@ -0,0 +1,28 @@
+/**
+ * Where a dragged node lands in its row (click-and-drag rearranging, shared idea with
+ * OneTaxonomy). Rows are generations: same y in vertical charts, same x in horizontal
+ * ones. Returns the new `nodeOrder` for `layoutSync` (the row's order replaces any
+ * earlier choice for those nodes), or null when nothing changes. The layout applies
+ * it only where order is a choice (REORDERABLE_VIEWS), e.g. among siblings.
+ */
+export function dropNodeOrder(layout, occurrenceId, delta, current = [], 
+/** Nodes only move among others of the same group (e.g. the same clutch), so grouped frames stay truthful. */
+groupOf) {
+    const vertical = layout.orientation === 'vertical';
+    const self = layout.nodes.find((n) => n.occurrenceId === occurrenceId);
+    if (!self)
+        return null;
+    const rowOf = (n) => (vertical ? n.y : n.x);
+    const along = (n) => (vertical ? n.x + n.width / 2 : n.y + n.height / 2);
+    const group = groupOf?.(occurrenceId);
+    const row = layout.nodes.filter((n) => Math.abs(rowOf(n) - rowOf(self)) < 0.5 && (!groupOf || groupOf(n.occurrenceId) === group));
+    if (row.length < 2)
+        return null;
+    const before = [...row].sort((a, b) => along(a) - along(b)).map((n) => n.occurrenceId);
+    const moved = along(self) + (vertical ? delta.dx : delta.dy);
+    const after = [...row].sort((a, b) => (a === self ? moved : along(a)) - (b === self ? moved : along(b))).map((n) => n.occurrenceId);
+    if (after.every((id, i) => id === before[i]))
+        return null;
+    const inRow = new Set(after);
+    return [...current.filter((id) => !inRow.has(id)), ...after];
+}

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; }
 
@@ -81,10 +86,18 @@
 .op-explorer > svg:active { cursor: grabbing; }
 .op-toolbar { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; z-index: 1; }
 .op-toolbar button {
+  display: inline-flex; align-items: center; justify-content: center;
   min-width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--op-node-border, #6b7a90);
   background: var(--op-node-background, #fff); color: inherit; font: inherit; cursor: pointer;
 }
-.op-toolbar button:focus-visible { outline: 2px solid #f0b35a; outline-offset: 2px; }
+/* Brand family (brand/README.md): shared line icons, Captive Origins orange focus ring. */
+.op-icon { flex: none; }
+.op-explorer[data-reorderable] .op-node { cursor: grab; }
+.op-node[data-dragging] { cursor: grabbing; opacity: 0.85; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.18)); }
+.op-toolbar button:focus-visible, .op-quick-view-actions :is(a, button):focus-visible { outline: 2px solid #cf8137; outline-offset: 2px; }
+@media (prefers-color-scheme: dark) {
+  .op-toolbar button:focus-visible, .op-quick-view-actions :is(a, button):focus-visible { outline-color: #e7a066; }
+}
 .op-quick-view {
   position: absolute; left: 8px; bottom: 8px; max-width: 18rem; padding: 12px 14px; border-radius: 10px;
   background: var(--op-node-background, #fff); border: 1px solid var(--op-node-border, #6b7a90);
@@ -93,11 +106,20 @@
 .op-quick-view p { margin: 0 0 4px; }
 .op-quick-view-title { font-weight: 600; }
 .op-quick-view-actions { display: flex; gap: 8px; margin-top: 8px; }
+.op-quick-view-actions :is(a, button) { display: inline-flex; align-items: center; gap: 4px; }
 .op-theme-panel {
   position: absolute; top: 48px; right: 8px; z-index: 2; max-height: calc(100% - 56px); overflow: auto; width: 20rem;
   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 +133,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,7 +1,11 @@
 {
   "name": "@captiveorigins/onepedigree-react",
-  "version": "0.1.0-alpha.6",
-  "description": "OnePedigree for React: server-renderable SVG pedigree views (all 13), interactive explorer, headless hooks and CSS-variable styling.",
+  "version": "0.1.0-alpha.9",
+  "description": "OnePedigree for React: server-renderable SVG pedigree views (all 13), an interactive explorer, headless hooks and CSS-variable styling.",
+  "homepage": "https://github.com/mgilardi/onepedigree#readme",
+  "bugs": {
+    "url": "https://github.com/mgilardi/onepedigree/issues"
+  },
   "keywords": [
     "pedigree",
     "genealogy",
@@ -42,7 +46,7 @@
     "node": ">=22"
   },
   "dependencies": {
-    "@captiveorigins/onepedigree-core": "^0.1.0-alpha.6"
+    "@captiveorigins/onepedigree-core": "^0.1.0-alpha.9"
   },
   "peerDependencies": {
     "react": ">=18.2"