@captiveorigins/onepedigree-react 0.0.0-stage → 0.1.0-alpha.10

package/dist/PedigreeView.js

@@ -0,0 +1,153 @@
+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';
+import { GenotypeGlyph, GenotypeStrip, genotypeText, genotypeWord } from './genetics.js';
+const cx = (...c) => c.filter(Boolean).join(' ');
+const short = (s, n) => (s.length > n ? `${s.slice(0, n - 1)}…` : s);
+/** Junction glyph: circle = two-parent mode, diamond = single-parent mode, square = variable/other; hollow = incomplete. */
+function Junction({ s, x, y }) {
+    const shape = s.typicalStructure === 'pair' ? 'pair' : s.typicalStructure === 'single' ? 'single' : 'variable';
+    const common = {
+        className: 'op-junction',
+        'data-structure': shape,
+        'data-completeness': s.completeness,
+        'data-atypical': s.atypical || undefined,
+    };
+    const r = 5;
+    const glyph = shape === 'pair' ? (_jsx("circle", { cx: x, cy: y, r: r, ...common })) : shape === 'single' ? (_jsx("path", { d: `M ${x} ${y - r - 1} L ${x + r + 1} ${y} L ${x} ${y + r + 1} L ${x - r - 1} ${y} Z`, ...common })) : (_jsx("rect", { x: x - r, y: y - r, width: 2 * r, height: 2 * r, ...common }));
+    return (_jsxs("g", { "aria-hidden": "true", children: [glyph, _jsx("title", { children: describeStructure(s) })] }));
+}
+function DefaultIndividual({ individual, occurrence, node, structure, terms, gene, genotypes }) {
+    const label = labelOf(individual, terms);
+    // 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: genotypes ? (sub ? node.height / 2 - 9 : node.height / 2 - 3) : sub ? node.height / 2 - 3 : node.height / 2 + 4, children: short(label, chars) }), sub && (_jsx("text", { className: "op-sublabel", x: 10, y: genotypes ? node.height / 2 + 6 : 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 }), genotypes && (_jsx("g", { transform: `translate(10 ${node.height - 8})`, children: _jsx(GenotypeStrip, { display: genotypes, individualId: occurrence.individualId, r: 4 }) })), gene !== undefined && (_jsx("g", { transform: `translate(${node.width - 12} ${node.height - 12})`, children: _jsx(GenotypeGlyph, { mark: gene ?? undefined }) }))] }));
+}
+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)
+        return null;
+    const x = Math.min(...ns.map((n) => n.x)) - pad;
+    const y = Math.min(...ns.map((n) => n.y)) - pad;
+    return { x, y, width: Math.max(...ns.map((n) => n.x + n.width)) - x + pad, height: Math.max(...ns.map((n) => n.y + n.height)) - y + pad };
+}
+/**
+ * A pedigree view as SVG. Renders on the server with no client JavaScript;
+ * links stay ordinary links. Every node carries stable `.op-*` classes and
+ * `data-*` attributes for styling; color is never the only signal.
+ */
+export function PedigreeView(props) {
+    const { projection: p, layout, interactive } = props;
+    const terms = { ...DEFAULT_TERMS, ...props.terminology };
+    const pad = props.padding ?? 24;
+    const id = props.idPrefix ?? `op-${p.view}-${p.focalId.replace(/[^a-zA-Z0-9_-]/g, '_')}`;
+    const box = props.viewBox ?? { x: -pad, y: -pad, width: layout.bounds.width + 2 * pad, height: layout.bounds.height + 2 * pad };
+    const nodes = new Map(layout.nodes.map((n) => [n.occurrenceId, n]));
+    const occById = new Map(p.occurrences.map((o) => [o.occurrenceId, o]));
+    const title = props.title ?? `${VIEW_LABELS[p.view]}: ${labelOf(p.individuals[p.focalId], terms)}`;
+    const summary = describeProjection(p, terms);
+    const c = props.classNames ?? {};
+    return (_jsxs("svg", { ...props.svgProps, className: cx('op-root', `op-view-${p.view}`, props.className, c.root), style: { ...themeStyle(props.theme, p.view), ...props.svgProps?.style }, "data-theme": typeof props.theme === 'string' ? props.theme : props.theme?.id, viewBox: `${box.x} ${box.y} ${box.width} ${box.height}`, role: "group", "aria-labelledby": `${id}-title`, "aria-describedby": `${id}-desc`, "data-view": p.view, "data-orientation": layout.orientation, "data-occurrence-mode": p.occurrenceMode, xmlns: "http://www.w3.org/2000/svg", children: [_jsx("title", { id: `${id}-title`, children: title }), _jsx("desc", { id: `${id}-desc`, children: summary }), p.groups
+                .filter((g) => g.kind === 'cohort')
+                .map((g) => {
+                const b = groupBox(g, nodes);
+                if (!b)
+                    return null;
+                return (_jsx("g", { className: cx('op-cohort', c.cohort), "data-cohort": g.id.replace(/^cohort:/, '').replace(/#.*$/, ''), 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));
+            }), 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);
+                    return (_jsx("path", { className: cx('op-connector', c.connector), d: e.points.map((pt, i) => `${i ? 'L' : 'M'} ${pt.x} ${pt.y}`).join(' '), "data-role": e.role ?? undefined, "data-reproductive-mode": s?.reproductiveMode ?? undefined, "data-completeness": s?.completeness, "data-highlighted": highlighted || undefined }, e.id));
+                }) }), _jsx("g", { className: "op-nodes", children: layout.nodes.map((node) => {
+                    const occurrence = occById.get(node.occurrenceId);
+                    if (!occurrence)
+                        return null;
+                    const individual = p.individuals[occurrence.individualId];
+                    const structure = p.structures[occurrence.individualId];
+                    const selected = props.selectedIndividualId === occurrence.individualId;
+                    const highlighted = Boolean(props.highlightedOccurrenceIds?.has(node.occurrenceId) || occurrence.highlighted);
+                    const href = individual ? props.getIndividualHref?.(individual) : null;
+                    const label = labelOf(individual, terms);
+                    const aria = [
+                        label,
+                        individual?.sex,
+                        lifeLabel(lifeSpan(individual)) || null,
+                        occurrence.ahnentafel !== undefined ? `Ahnentafel ${occurrence.ahnentafel}` : null,
+                        occurrence.repeated ? terms.repeated : null,
+                        describeStructure(structure),
+                        props.geneOverlay ? `${props.geneOverlay.label}: ${genotypeWord(props.geneOverlay.marks.get(occurrence.individualId))}` : null,
+                        props.genotypes ? genotypeText(props.genotypes, occurrence.individualId) : null,
+                    ]
+                        .filter(Boolean)
+                        .join(', ');
+                    const slot = { individual, occurrence, node, structure, selected, highlighted, terms, ...(props.geneOverlay ? { gene: props.geneOverlay.marks.get(occurrence.individualId) ?? null } : {}), ...(props.genotypes ? { genotypes: props.genotypes } : {}) };
+                    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,
+                        'data-occurrence': occurrence.occurrenceId,
+                        'data-generation': occurrence.generation,
+                        'data-repeated': occurrence.repeated || undefined,
+                        'data-collapsed': occurrence.collapsedInto ? true : undefined,
+                        'data-cohort': individual?.parentage?.cohort ?? undefined,
+                        'data-reproductive-mode': structure?.reproductiveMode ?? undefined,
+                        'data-sex': individual?.sex ?? undefined,
+                        'data-focal': occurrence.individualId === p.focalId || undefined,
+                        'data-selected': selected || undefined,
+                        'data-highlighted': highlighted || undefined,
+                    };
+                    if (interactive)
+                        return (_jsx("g", { ...attrs, role: "button", tabIndex: 0, "aria-label": aria, "aria-pressed": selected, onClick: (e) => props.onNodeClick?.(occurrence, e), onKeyDown: (e) => props.onNodeKeyDown?.(occurrence, e), children: content }, node.occurrenceId));
+                    return (_jsx("g", { ...attrs, children: href ? (_jsx("a", { href: href, "aria-label": aria, children: content })) : (_jsxs(_Fragment, { children: [_jsx("title", { children: aria }), content] })) }, node.occurrenceId));
+                }) })] }));
+}

package/dist/ThemeEditor.d.ts

@@ -0,0 +1,12 @@
+import type { PedigreeViewId } from '@captiveorigins/onepedigree-core';
+import { type PedigreeTheme } from './themes.js';
+export type ThemeEditorProps = {
+    value: PedigreeTheme;
+    /** The view being shown (for "this view only" changes and the preview of its accents). */
+    view: PedigreeViewId;
+    onChange: (theme: PedigreeTheme) => void;
+    presets?: readonly PedigreeTheme[];
+    labels?: Partial<Record<'title' | 'preset' | 'scope' | 'allViews' | 'thisView' | 'reset' | 'lowContrast' | 'invalid', string>>;
+};
+/** Pick a preset and adjust any color with a color picker or hex code, for all views or the current one. */
+export declare function ThemeEditor({ value, view, onChange, presets, labels: l }: ThemeEditorProps): import("react").JSX.Element;

package/dist/ThemeEditor.js

@@ -0,0 +1,50 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from 'react';
+import { VIEW_LABELS } from './describe.js';
+import { contrastRatio, isHexColor, presetTheme, resolveThemeColors, THEME_PRESETS, THEME_TOKENS, TOKEN_LABELS } from './themes.js';
+const LABELS = {
+    title: 'Colors',
+    preset: 'Preset',
+    scope: 'Apply changes to',
+    allViews: 'All views',
+    thisView: 'This view only',
+    reset: 'Reset to preset',
+    lowContrast: 'Low contrast with the card color',
+    invalid: 'Use a hex color like #1d2330',
+};
+const full = (hex) => (hex.length === 4 ? hex.replace(/^#(.)(.)(.)$/, '#$1$1$2$2$3$3') : hex).toLowerCase();
+/** Pick a preset and adjust any color with a color picker or hex code, for all views or the current one. */
+export function ThemeEditor({ value, view, onChange, presets = THEME_PRESETS, labels: l }) {
+    const labels = { ...LABELS, ...l };
+    const id = useId();
+    const [scope, setScope] = useState('all');
+    const [drafts, setDrafts] = useState({});
+    const colors = resolveThemeColors(value, view);
+    const base = presets.find((p) => p.id === value.id) ?? presetTheme(value.id);
+    const set = (token, hex) => {
+        setDrafts((d) => ({ ...d, [token]: hex }));
+        if (!isHexColor(hex))
+            return;
+        const color = full(hex);
+        onChange(scope === 'all'
+            ? { ...value, colors: { ...value.colors, [token]: color } }
+            : { ...value, views: { ...value.views, [view]: { ...value.views?.[view], [token]: color } } });
+        setDrafts((d) => ({ ...d, [token]: undefined }));
+    };
+    return (_jsxs("div", { className: "op-theme-editor", role: "group", "aria-labelledby": `${id}-title`, children: [_jsx("p", { id: `${id}-title`, className: "op-theme-editor-title", children: labels.title }), _jsxs("label", { className: "op-theme-row", children: [_jsx("span", { children: labels.preset }), _jsx("select", { value: value.id, onChange: (e) => {
+                            const p = presets.find((x) => x.id === e.target.value);
+                            if (p)
+                                onChange(structuredClone(p));
+                            setDrafts({});
+                        }, children: presets.map((p) => (_jsx("option", { value: p.id, children: p.label }, p.id))) })] }), _jsxs("fieldset", { className: "op-theme-scope", children: [_jsx("legend", { children: labels.scope }), _jsxs("label", { children: [_jsx("input", { type: "radio", name: `${id}-scope`, checked: scope === 'all', onChange: () => setScope('all') }), " ", labels.allViews] }), _jsxs("label", { children: [_jsx("input", { type: "radio", name: `${id}-scope`, checked: scope === 'view', onChange: () => setScope('view') }), " ", labels.thisView, " (", VIEW_LABELS[view], ")"] })] }), THEME_TOKENS.map((token) => {
+                const shown = drafts[token] ?? colors[token];
+                const invalid = drafts[token] !== undefined && !isHexColor(drafts[token]);
+                const low = (token === 'label' || token === 'sublabel' || token === 'nodeBackground') &&
+                    contrastRatio(token === 'nodeBackground' ? colors.label : colors[token], colors.nodeBackground) < (token === 'sublabel' ? 3 : 4.5);
+                return (_jsxs("div", { className: "op-theme-row", "data-token": token, children: [_jsx("label", { htmlFor: `${id}-${token}`, children: TOKEN_LABELS[token] }), _jsx("input", { type: "color", "aria-label": `${TOKEN_LABELS[token]} picker`, value: full(colors[token]), onChange: (e) => set(token, e.target.value) }), _jsx("input", { id: `${id}-${token}`, type: "text", inputMode: "text", spellCheck: false, maxLength: 7, value: shown, "aria-invalid": invalid || undefined, "aria-describedby": invalid || low ? `${id}-${token}-hint` : undefined, onChange: (e) => set(token, e.target.value.trim()) }), (invalid || low) && (_jsx("span", { id: `${id}-${token}-hint`, className: "op-theme-hint", children: invalid ? labels.invalid : labels.lowContrast }))] }, token));
+            }), base && (_jsx("button", { type: "button", onClick: () => {
+                    onChange(structuredClone(base));
+                    setDrafts({});
+                }, children: labels.reset }))] }));
+}

package/dist/describe.d.ts

@@ -0,0 +1,27 @@
+import type { Individual, PedigreeViewId, PedigreeViewProjection, ReproductiveStructure } from '@captiveorigins/onepedigree-core';
+export declare const VIEW_LABELS: Record<PedigreeViewId, string>;
+export type Terminology = {
+    individual: string;
+    individuals: string;
+    parent: string;
+    cohort: string;
+    repeated: string;
+    unknown: string;
+    privateRecord: string;
+};
+export declare const DEFAULT_TERMS: Terminology;
+/** Display name: the label, else the ID; anonymous placeholders (`data.private`) never show their ID. */
+export declare const labelOf: (individual: Individual | undefined, terms?: Terminology) => string;
+/** Words for an individual's origin, so color or shape is never the only signal. */
+export declare function describeStructure(s: ReproductiveStructure | undefined): string;
+/** A text summary of the current projection (screen readers, `<desc>`, print). */
+export declare function describeProjection(p: PedigreeViewProjection, terms?: Terminology): string;
+/** SVG path of a ring segment (fan chart); angles in radians, 0 = up, clockwise. */
+export declare function arcPath(a: {
+    cx: number;
+    cy: number;
+    innerRadius: number;
+    outerRadius: number;
+    startAngle: number;
+    endAngle: number;
+}): string;

package/dist/describe.js

@@ -0,0 +1,75 @@
+export const VIEW_LABELS = {
+    pedigree: 'Pedigree',
+    fan: 'Fan chart',
+    ahnentafel: 'Ahnentafel',
+    descendants: 'Descendants',
+    hourglass: 'Hourglass',
+    cohort: 'Cohort',
+    relationship: 'Relationship',
+    timeline: 'Timeline',
+    inbreeding: 'Inbreeding',
+    population: 'Population',
+    compact: 'Compact pedigree',
+    maternal: 'Maternal line',
+    paternal: 'Paternal line',
+};
+export const DEFAULT_TERMS = {
+    individual: 'individual',
+    individuals: 'individuals',
+    parent: 'parent',
+    cohort: 'cohort',
+    repeated: 'appears more than once',
+    unknown: 'Unknown',
+    privateRecord: 'Private record',
+};
+/** Display name: the label, else the ID; anonymous placeholders (`data.private`) never show their ID. */
+export const labelOf = (individual, terms = DEFAULT_TERMS) => individual?.data?.private ? terms.privateRecord : individual?.label || individual?.id || terms.unknown;
+const MODE_TEXT = {
+    sexual: 'sexual reproduction',
+    parthenogenesis: 'parthenogenesis',
+    self: 'self-fertilization',
+    asexual: 'asexual origin',
+    cloning: 'cloning',
+    other: 'other origin',
+};
+/** Words for an individual's origin, so color or shape is never the only signal. */
+export function describeStructure(s) {
+    if (!s)
+        return 'parentage not recorded';
+    const mode = s.reproductiveMode ? MODE_TEXT[s.reproductiveMode] : 'mode unknown';
+    const parents = `${s.recordedParentCount} recorded parent${s.recordedParentCount === 1 ? '' : 's'}`;
+    return [mode, parents, s.completeness === 'incomplete' ? 'incomplete' : null, s.atypical ? 'atypical' : null].filter(Boolean).join(', ');
+}
+/** A text summary of the current projection (screen readers, `<desc>`, print). */
+export function describeProjection(p, terms = DEFAULT_TERMS) {
+    const focal = labelOf(p.individuals[p.focalId], terms);
+    const identities = new Set(p.occurrences.map((o) => o.individualId)).size;
+    const gens = p.occurrences.map((o) => o.generation);
+    const span = gens.length ? Math.max(...gens) - Math.min(...gens) : 0;
+    const repeated = new Set(p.occurrences.filter((o) => o.repeated).map((o) => o.individualId)).size;
+    return [
+        `${VIEW_LABELS[p.view]} of ${focal}: ${identities} ${identities === 1 ? terms.individual : terms.individuals} across ${span + 1} generation${span ? 's' : ''}.`,
+        repeated ? `${repeated} ${repeated === 1 ? terms.individual : terms.individuals} ${terms.repeated}.` : null,
+        p.truncated ? 'The view is limited; more records exist.' : null,
+        ...p.issues.map((i) => i.message),
+    ]
+        .filter(Boolean)
+        .join(' ');
+}
+/** SVG path of a ring segment (fan chart); angles in radians, 0 = up, clockwise. */
+export function arcPath(a) {
+    const pt = (r, t) => `${(a.cx + r * Math.sin(t)).toFixed(2)} ${(a.cy - r * Math.cos(t)).toFixed(2)}`;
+    const large = a.endAngle - a.startAngle > Math.PI ? 1 : 0;
+    // The focal individual: a full disc at the center.
+    if (a.innerRadius <= 0) {
+        const r = a.outerRadius;
+        return `M ${a.cx - r} ${a.cy} A ${r} ${r} 0 1 0 ${a.cx + r} ${a.cy} A ${r} ${r} 0 1 0 ${a.cx - r} ${a.cy} Z`;
+    }
+    return [
+        `M ${pt(a.outerRadius, a.startAngle)}`,
+        `A ${a.outerRadius} ${a.outerRadius} 0 ${large} 1 ${pt(a.outerRadius, a.endAngle)}`,
+        `L ${pt(a.innerRadius, a.endAngle)}`,
+        `A ${a.innerRadius} ${a.innerRadius} 0 ${large} 0 ${pt(a.innerRadius, a.startAngle)}`,
+        'Z',
+    ].join(' ');
+}

package/dist/genetics.d.ts

@@ -0,0 +1,66 @@
+import type { GenotypeRecord, InheritanceMode, SexClass } from '@captiveorigins/onepedigree-core';
+/** One individual's state for the gene being shown (from its `GenotypeRecord`). */
+export type GenotypeMark = Pick<GenotypeRecord, 'state' | 'probability' | 'basis'>;
+/** Shows one heritable gene on every node with the usual genetic pedigree symbols. */
+export type GeneOverlay = {
+    /** The gene's name (legend title). */
+    label: string;
+    /** Marks by individual id; individuals without one are drawn as unknown. */
+    marks: ReadonlyMap<string, GenotypeMark>;
+    /** Recessive genes show het symbols; others show single/super. */
+    mode?: 'recessive' | 'incomplete-dominant' | 'dominant' | 'codominant' | 'polygenic' | 'unknown';
+};
+export type GenotypeWords = Record<'visual' | 'single' | 'super' | 'het' | 'claimedHet' | 'possibleHet' | 'nonCarrier' | 'unknown' | 'inferred', string>;
+export declare const GENOTYPE_WORDS: GenotypeWords;
+export declare function genotypeWord(mark: GenotypeMark | undefined, words?: GenotypeWords): string;
+/** The symbol (SVG, centered on 0,0). */
+export declare function GenotypeGlyph({ mark, words }: {
+    mark: GenotypeMark | undefined;
+    words?: GenotypeWords;
+}): import("react").JSX.Element;
+/** Legend for the overlay: every symbol with its meaning (also the tooltips). */
+export declare function GeneLegend({ overlay, words }: {
+    overlay: GeneOverlay;
+    words?: GenotypeWords;
+}): import("react").JSX.Element;
+/** A gene shown as allele dots, with its own color (to tell genes apart; meaning comes from shape). */
+export type GeneKey = {
+    id: string;
+    label: string;
+    color: string;
+    mode?: InheritanceMode;
+    linkage?: 'Z' | 'X';
+};
+/** Several genes on every node: two dots per gene, one per copy. */
+export type GenotypeDisplay = {
+    /** Genes to show, in order (up to four fit on a node). */
+    genes: readonly GeneKey[];
+    /** Each individual's records; a gene without a record is drawn as unknown. */
+    records: ReadonlyMap<string, readonly GenotypeRecord[]>;
+    /** Needed for sex-linked genes: the heterogametic sex has one copy (one dot). */
+    sexOf?: (individualId: string) => SexClass;
+};
+/** Allele dots for one gene (SVG, starting at 0,0, vertically centered on 0). */
+export declare function GenotypeDots({ gene, record, hemizygous, r, words }: {
+    gene: GeneKey;
+    record: GenotypeRecord | undefined;
+    hemizygous?: boolean;
+    r?: number;
+    words?: GenotypeWords;
+}): import("react").JSX.Element;
+/** Width of one gene's dots plus the gap after it. */
+export declare const dotsWidth: (r?: number) => number;
+/** The genotypes line for one individual (several genes side by side). */
+export declare function GenotypeStrip({ display, individualId, r, max }: {
+    display: GenotypeDisplay;
+    individualId: string;
+    r?: number;
+    max?: number;
+}): import("react").JSX.Element;
+/** Plain-language genotypes for an individual (screen readers, tooltips). */
+export declare function genotypeText(display: GenotypeDisplay, individualId: string, words?: GenotypeWords): string;
+/** Key for allele dots: each gene's color, and what the dots mean. */
+export declare function GenotypeKey({ display, labels }: {
+    display: GenotypeDisplay;
+    labels?: Partial<Record<'title' | 'two' | 'one' | 'none' | 'possible' | 'unknown' | 'suggested', string>>;
+}): import("react").JSX.Element;

package/dist/genetics.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const GENOTYPE_WORDS = {
+    visual: 'Visual: shows it',
+    single: 'One copy (shows)',
+    super: 'Two copies ("super")',
+    het: 'Het: carries one copy, proven',
+    claimedHet: 'Het: carries one copy, not proven',
+    possibleHet: 'Possible het (chance shown)',
+    nonCarrier: 'Does not carry it',
+    unknown: 'Unknown',
+    inferred: 'suggested from relatives',
+};
+export function genotypeWord(mark, words = GENOTYPE_WORDS) {
+    if (!mark)
+        return words.unknown;
+    const w = mark.state === 'visual' ? words.visual
+        : mark.state === 'single' ? words.single
+            : mark.state === 'super' ? words.super
+                : mark.state === 'het' ? (mark.basis === 'proven-breeding' || mark.basis === 'genetic-test' ? words.het : words.claimedHet)
+                    : mark.state === 'possible-het' ? `${words.possibleHet}${mark.probability !== undefined ? `: ${Math.round(mark.probability * 100)}%` : ''}`
+                        : mark.state === 'non-carrier' ? words.nonCarrier
+                            : words.unknown;
+    return mark.basis === 'inferred' ? `${w} (${words.inferred})` : w;
+}
+const R = 6;
+/** The symbol (SVG, centered on 0,0). */
+export function GenotypeGlyph({ mark, words }) {
+    const state = mark?.state ?? 'unknown';
+    const proven = mark?.basis === 'proven-breeding' || mark?.basis === 'genetic-test';
+    const half = `M 0 ${-R} A ${R} ${R} 0 0 0 0 ${R} Z`;
+    return (_jsxs("g", { className: "op-gene", "data-state": state, "data-basis": mark?.basis, "aria-hidden": "true", children: [_jsx("title", { children: genotypeWord(mark, words) }), state === 'super' && _jsx("circle", { className: "op-gene-ring", r: R + 3 }), _jsx("circle", { className: "op-gene-outline", r: R, "data-dashed": (state === 'het' && !proven) || state === 'unknown' || mark?.basis === 'inferred' || undefined }), (state === 'visual' || state === 'single' || state === 'super') && _jsx("circle", { className: "op-gene-fill", r: R }), state === 'het' && _jsx("path", { className: "op-gene-fill", d: half }), state === 'possible-het' && _jsx("circle", { className: "op-gene-fill", r: 2 }), state === 'possible-het' && mark?.probability !== undefined && (_jsxs("text", { className: "op-gene-text", x: -R - 3, y: 3.5, textAnchor: "end", children: [Math.round(mark.probability * 100), "%"] })), state === 'unknown' && (_jsx("text", { className: "op-gene-text", y: 3.5, textAnchor: "middle", children: "?" }))] }));
+}
+/** Legend for the overlay: every symbol with its meaning (also the tooltips). */
+export function GeneLegend({ overlay, words = GENOTYPE_WORDS }) {
+    const recessive = (overlay.mode ?? 'recessive') === 'recessive';
+    const items = recessive
+        ? [{ state: 'visual' }, { state: 'het', basis: 'proven-breeding' }, { state: 'het', basis: 'reported' }, { state: 'possible-het', probability: 0.66 }, { state: 'non-carrier' }, { state: 'unknown' }]
+        : [{ state: 'single' }, { state: 'super' }, { state: 'non-carrier' }, { state: 'unknown' }];
+    return (_jsxs("div", { className: "op-gene-legend", role: "group", "aria-label": overlay.label, children: [_jsx("strong", { children: overlay.label }), _jsx("ul", { children: items.map((m, i) => (_jsxs("li", { children: [_jsx("svg", { width: m.state === 'possible-het' ? 44 : 22, height: 22, viewBox: m.state === 'possible-het' ? '-33 -11 44 22' : '-11 -11 22 22', "aria-hidden": "true", children: _jsx(GenotypeGlyph, { mark: m, words: words }) }), genotypeWord(m, words)] }, i))) })] }));
+}
+/** How many of the two copies carry the variant: [filled, possible, unknown] out of `slots`. */
+function copies(record, mode, slots) {
+    const state = record?.state ?? 'unknown';
+    if (state === 'unknown')
+        return { filled: 0, possible: 0, unknown: slots };
+    if (state === 'non-carrier')
+        return { filled: 0, possible: 0, unknown: 0 };
+    if (state === 'possible-het')
+        return { filled: 0, possible: 1, unknown: 0 };
+    if (state === 'het' || state === 'single')
+        return { filled: 1, possible: 0, unknown: 0 };
+    if (state === 'super')
+        return { filled: slots, possible: 0, unknown: 0 };
+    // visual: two copies for a recessive (or one when hemizygous); one assumed otherwise
+    return { filled: slots === 1 || mode === 'recessive' ? slots : 1, possible: 0, unknown: 0 };
+}
+/** Allele dots for one gene (SVG, starting at 0,0, vertically centered on 0). */
+export function GenotypeDots({ gene, record, hemizygous = false, r = 4.5, words }) {
+    const slots = hemizygous ? 1 : 2;
+    const c = copies(record, gene.mode, slots);
+    const dots = [];
+    for (let i = 0; i < c.filled; i++)
+        dots.push('filled');
+    for (let i = 0; i < c.possible; i++)
+        dots.push('possible');
+    for (let i = 0; i < c.unknown; i++)
+        dots.push('unknown');
+    while (dots.length < slots)
+        dots.push('empty');
+    return (_jsxs("g", { className: "op-dots", "data-gene": gene.id, "aria-hidden": "true", children: [_jsx("title", { children: `${gene.label}: ${genotypeWord(record ? { state: record.state, ...(record.probability !== undefined ? { probability: record.probability } : {}), ...(record.basis ? { basis: record.basis } : {}) } : undefined, words)}` }), dots.map((d, i) => (_jsx("circle", { className: "op-dot", "data-dot": d, "data-inferred": d === 'filled' && record?.basis === 'inferred' ? '' : undefined, cx: r + i * (2 * r + 2), cy: 0, r: r, style: d === 'filled' ? { fill: gene.color } : undefined }, i)))] }));
+}
+/** Width of one gene's dots plus the gap after it. */
+export const dotsWidth = (r = 4.5) => 2 * (2 * r) + 2 + 8;
+/** The genotypes line for one individual (several genes side by side). */
+export function GenotypeStrip({ display, individualId, r = 4.5, max = 4 }) {
+    const recs = display.records.get(individualId) ?? [];
+    const sex = display.sexOf?.(individualId) ?? 'unknown';
+    return (_jsx("g", { className: "op-genotypes", children: display.genes.slice(0, max).map((g, i) => (_jsx("g", { transform: `translate(${i * dotsWidth(r)} 0)`, children: _jsx(GenotypeDots, { gene: g, record: recs.find((x) => x.gene === g.id), hemizygous: Boolean(g.linkage) && sex === 'heterogametic', r: r }) }, g.id))) }));
+}
+/** Plain-language genotypes for an individual (screen readers, tooltips). */
+export function genotypeText(display, individualId, words = GENOTYPE_WORDS) {
+    const recs = display.records.get(individualId) ?? [];
+    return display.genes
+        .map((g) => {
+        const r = recs.find((x) => x.gene === g.id);
+        return `${g.label}: ${genotypeWord(r ? { state: r.state, ...(r.probability !== undefined ? { probability: r.probability } : {}), ...(r.basis ? { basis: r.basis } : {}) } : undefined, words)}`;
+    })
+        .join('; ');
+}
+/** Key for allele dots: each gene's color, and what the dots mean. */
+export function GenotypeKey({ display, labels = {} }) {
+    const l = { title: 'Genes', two: 'two copies', one: 'one copy', none: 'none', possible: 'possible (dashed)', unknown: 'not known', suggested: 'suggested from relatives', ...labels };
+    const demo = { id: 'demo', label: '', color: '#7a625c', mode: 'recessive' };
+    const sample = (record, text) => (_jsxs("li", { children: [_jsx("svg", { width: 22, height: 12, viewBox: "0 -6 22 12", "aria-hidden": "true", children: _jsx(GenotypeDots, { gene: demo, record: record, r: 4 }) }), text] }));
+    return (_jsxs("div", { className: "op-gene-legend op-genotype-key", role: "group", "aria-label": l.title, children: [_jsx("strong", { children: l.title }), _jsx("ul", { children: display.genes.map((g) => (_jsxs("li", { children: [_jsx("span", { className: "op-gene-swatch", style: { background: g.color }, "aria-hidden": "true" }), g.label] }, g.id))) }), _jsxs("ul", { children: [sample({ gene: 'demo', state: 'super' }, l.two), sample({ gene: 'demo', state: 'het' }, l.one), sample({ gene: 'demo', state: 'het', basis: 'inferred' }, l.suggested), sample({ gene: 'demo', state: 'non-carrier' }, l.none), sample({ gene: 'demo', state: 'possible-het' }, l.possible), sample(undefined, l.unknown)] })] }));
+}

package/dist/headless.d.ts

@@ -0,0 +1,3 @@
+export { usePedigreeLayout, usePedigreeNavigation, usePedigreeProjection, usePedigreeSelection, useOccurrenceHighlighting, nearestNode, type Direction } from './hooks.js';
+export { arcPath, DEFAULT_TERMS, describeProjection, describeStructure, labelOf, VIEW_LABELS, type Terminology } from './describe.js';
+export { contrastRatio, isHexColor, presetTheme, resolveThemeColors, THEME_PRESETS, THEME_TOKENS, themeStyle, TOKEN_LABELS, type PedigreeTheme, type ThemeColors, type ThemeToken, } from './themes.js';

package/dist/headless.js

@@ -0,0 +1,3 @@
+export { usePedigreeLayout, usePedigreeNavigation, usePedigreeProjection, usePedigreeSelection, useOccurrenceHighlighting, nearestNode } from './hooks.js';
+export { arcPath, DEFAULT_TERMS, describeProjection, describeStructure, labelOf, VIEW_LABELS } from './describe.js';
+export { contrastRatio, isHexColor, presetTheme, resolveThemeColors, THEME_PRESETS, THEME_TOKENS, themeStyle, TOKEN_LABELS, } from './themes.js';

package/dist/hooks.d.ts

@@ -0,0 +1,21 @@
+import { type LayoutOptions, type LayoutResult, type PedigreeDocument, type PedigreeIndex, type PedigreeLayoutEngine, type PedigreeViewProjection, type ProjectionOptions } from '@captiveorigins/onepedigree-core';
+/** Memoized projection of a document (or index) for one view. */
+export declare function usePedigreeProjection(source: PedigreeDocument | PedigreeIndex, options: ProjectionOptions): PedigreeViewProjection;
+/**
+ * Geometry for a projection. The built-in engine runs synchronously (same
+ * result on server and client, so hydration matches); a custom engine (e.g.
+ * ELK) resolves asynchronously and returns null until ready.
+ */
+export declare function usePedigreeLayout(projection: PedigreeViewProjection, options?: LayoutOptions, engine?: PedigreeLayoutEngine): LayoutResult | null;
+/** Selected individual (an identity, not an occurrence). */
+export declare function usePedigreeSelection(initial?: string | null): {
+    selectedId: string | null;
+    select: (id: string | null) => void;
+    clear: () => void;
+};
+/** Every visible occurrence of the selected individual (repeated ancestors light up together). */
+export declare function useOccurrenceHighlighting(projection: PedigreeViewProjection, individualId: string | null): ReadonlySet<string>;
+export type Direction = 'up' | 'down' | 'left' | 'right';
+/** Spatial keyboard navigation: the nearest node in a direction from the current one. */
+export declare function nearestNode(layout: LayoutResult, from: string, direction: Direction): string | null;
+export declare function usePedigreeNavigation(layout: LayoutResult | null): (from: string, direction: Direction) => string | null;

package/dist/hooks.js

@@ -0,0 +1,68 @@
+import { layoutSync, projectPedigree, } from '@captiveorigins/onepedigree-core';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+/** Memoized projection of a document (or index) for one view. */
+export function usePedigreeProjection(source, options) {
+    const key = JSON.stringify(options);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    return useMemo(() => projectPedigree(source, options), [source, key]);
+}
+/**
+ * Geometry for a projection. The built-in engine runs synchronously (same
+ * result on server and client, so hydration matches); a custom engine (e.g.
+ * ELK) resolves asynchronously and returns null until ready.
+ */
+export function usePedigreeLayout(projection, options = {}, engine) {
+    const key = JSON.stringify(options);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const sync = useMemo(() => (engine ? null : layoutSync(projection, options)), [projection, key, engine]);
+    const [custom, setCustom] = useState(null);
+    useEffect(() => {
+        if (!engine)
+            return;
+        let live = true;
+        engine.layout(projection, options).then((r) => live && setCustom(r));
+        return () => {
+            live = false;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [projection, key, engine]);
+    return sync ?? custom;
+}
+/** Selected individual (an identity, not an occurrence). */
+export function usePedigreeSelection(initial = null) {
+    const [selectedId, setSelectedId] = useState(initial);
+    const select = useCallback((id) => setSelectedId(id), []);
+    const clear = useCallback(() => setSelectedId(null), []);
+    return { selectedId, select, clear };
+}
+/** Every visible occurrence of the selected individual (repeated ancestors light up together). */
+export function useOccurrenceHighlighting(projection, individualId) {
+    return useMemo(() => new Set(individualId ? projection.occurrences.filter((o) => o.individualId === individualId).map((o) => o.occurrenceId) : []), [projection, individualId]);
+}
+/** Spatial keyboard navigation: the nearest node in a direction from the current one. */
+export function nearestNode(layout, from, direction) {
+    const center = (n) => ({ x: n.x + n.width / 2, y: n.y + n.height / 2 });
+    const start = layout.nodes.find((n) => n.occurrenceId === from);
+    if (!start)
+        return layout.nodes[0]?.occurrenceId ?? null;
+    const a = center(start);
+    let best = null;
+    for (const n of layout.nodes) {
+        if (n === start)
+            continue;
+        const b = center(n);
+        const dx = b.x - a.x;
+        const dy = b.y - a.y;
+        const along = direction === 'up' ? -dy : direction === 'down' ? dy : direction === 'left' ? -dx : dx;
+        const across = direction === 'up' || direction === 'down' ? Math.abs(dx) : Math.abs(dy);
+        if (along <= 1)
+            continue;
+        const score = along + across * 2;
+        if (!best || score < best.score)
+            best = { id: n.occurrenceId, score };
+    }
+    return best?.id ?? null;
+}
+export function usePedigreeNavigation(layout) {
+    return useCallback((from, direction) => (layout ? nearestNode(layout, from, direction) : null), [layout]);
+}