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

package/LICENSE

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

package/README.md

@@ -1,3 +1,88 @@
-# Temporary Holding Version
+# @captiveorigins/onepedigree-react
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Server-renderable SVG pedigree views for React, built on
+[`@captiveorigins/onepedigree-core`](../core).
+
+```tsx
+import { layoutPedigree, projectPedigree } from '@captiveorigins/onepedigree-core'
+import { PedigreeExplorer, PedigreeView } from '@captiveorigins/onepedigree-react'
+import '@captiveorigins/onepedigree-react/styles.css'
+
+// Static (server component, no client JavaScript; nodes are ordinary links):
+export async function AnimalPedigree({ document, focalId }) {
+  const projection = projectPedigree(document, { focalId, view: 'pedigree', ancestorDepth: 4, maxNodes: 500 })
+  const layout = await layoutPedigree(projection, { orientation: 'vertical' })
+  return <PedigreeView projection={projection} layout={layout} getIndividualHref={(a) => `/animals/${a.id}`} />
+}
+
+// Interactive (client): pan, zoom, fit, selection, highlighting, keyboard, quick view, SVG/print export.
+<PedigreeExplorer projection={projection} layout={layout} height="32rem" />
+```
+
+## Views
+
+All 13 views of the core: `pedigree`, `fan`, `ahnentafel`, `descendants`, `hourglass`,
+`cohort`, `relationship`, `timeline`, `inbreeding`, `population`, `compact`, `maternal`,
+`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
+lines, distinct highlights for the relationship and inbreeding views, fan ring shading):
+`classic`, `midnight`, `forest`, `ocean`, `terracotta`, `high-contrast`, `print`.
+
+```tsx
+<PedigreeView projection={projection} layout={layout} theme="forest" />
+<PedigreeExplorer projection={projection} layout={layout} theme="ocean" themeEditor onThemeChange={save} />
+```
+
+`themeEditor` adds a Colors button: choose a preset and adjust any color with a color picker
+or hex code, for all views or only the current one, with a warning when text contrast drops
+below WCAG AA. `onThemeChange` receives the edited theme (a plain object) to store; pass it
+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).
+- CSS custom properties: `--op-node-background`, `--op-node-border`, `--op-connector`,
+  `--op-selected-ring`, `--op-highlight`, `--op-focal-border`, `--op-label`, …
+- Stable classes (`.op-root`, `.op-node`, `.op-individual`, `.op-connector`, `.op-junction`,
+  `.op-cohort`, `.op-fan-segment`) and data attributes (`data-individual`, `data-occurrence`,
+  `data-repeated`, `data-generation`, `data-cohort`, `data-reproductive-mode`, `data-sex`,
+  `data-focal`, `data-selected`, `data-highlighted`).
+- `classNames` overrides, and render slots `renderIndividual`, `renderCohortMarker`,
+  `renderQuickView`.
+- Headless: `@captiveorigins/onepedigree-react/headless` (hooks `usePedigreeProjection`,
+  `usePedigreeLayout`, `usePedigreeSelection`, `usePedigreeNavigation`,
+  `useOccurrenceHighlighting`, and `describeProjection`) for your own renderer.
+
+## Accessibility
+
+Semantic SVG with `<title>`/`<desc>` summaries, accessible names per node, keyboard
+navigation (arrows between nodes, Enter to select, Escape to clear, +/−/0 to zoom, Shift+arrows
+to pan), visible focus, reduced-motion support, and non-color cues: junction shapes (circle =
+two-parent mode, diamond = single-parent mode, square = variable; hollow = incomplete), line
+patterns per reproductive mode, and a ↻ marker plus dashed border on repeated individuals.
+
+## License
+
+MIT

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

@@ -0,0 +1,47 @@
+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';
+export type QuickViewProps = {
+    individual: Individual | undefined;
+    occurrence: IndividualOccurrence;
+    href: string | null;
+    close: () => void;
+};
+export type PedigreeExplorerProps = Omit<PedigreeViewProps, 'interactive' | 'viewBox' | 'selectedIndividualId' | 'highlightedOccurrenceIds' | 'onNodeClick' | 'onNodeKeyDown'> & {
+    /** Height of the viewport (CSS length). Default 32rem. */
+    height?: string;
+    /** Replace the default quick-view card. */
+    renderQuickView?: (props: QuickViewProps) => ReactNode;
+    onSelectIndividual?: (individualId: string | null) => void;
+    /** Extra toolbar content (e.g. a view switcher). */
+    toolbar?: ReactNode;
+    /** Show the Colors button: pick a preset and adjust colors with hex codes. */
+    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>>;
+};
+/**
+ * Interactive pedigree: pan (drag, Shift+arrows), zoom (wheel, +/-, buttons),
+ * fit, selection with highlighting of every occurrence of the selected
+ * individual, arrow-key navigation between nodes, a quick-view card, SVG
+ * download and print. Starts from the same markup as the server render.
+ */
+export declare function PedigreeExplorer(props: PedigreeExplorerProps): import("react").JSX.Element;

package/dist/PedigreeExplorer.js

@@ -0,0 +1,244 @@
+'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 { GeneLegend, GenotypeKey } from './genetics.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 = {
+    zoomIn: 'Zoom in',
+    zoomOut: 'Zoom out',
+    fit: 'Fit to view',
+    download: 'Download SVG',
+    print: 'Print',
+    close: 'Close',
+    open: 'Open profile',
+    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),
+ * fit, selection with highlighting of every occurrence of the selected
+ * individual, arrow-key navigation between nodes, a quick-view card, SVG
+ * download and print. Starts from the same markup as the server render.
+ */
+export function PedigreeExplorer(props) {
+    const { projection, layout } = props;
+    const labels = { ...LABELS, ...props.labels };
+    const terms = { ...DEFAULT_TERMS, ...props.terminology };
+    const pad = props.padding ?? 24;
+    const full = useMemo(() => ({ x: -pad, y: -pad, width: layout.bounds.width + 2 * pad, height: layout.bounds.height + 2 * pad }), [layout, pad]);
+    const [box, setBox] = useState(full);
+    const [fitted, setFitted] = useState(full);
+    if (fitted !== full) {
+        setFitted(full);
+        setBox(full);
+    }
+    const { selectedId, select } = usePedigreeSelection();
+    const [selectedOccurrence, setSelectedOccurrence] = useState(null);
+    const highlighted = useOccurrenceHighlighting(projection, selectedId);
+    const root = useRef(null);
+    const initialTheme = typeof props.theme === 'string' ? presetTheme(props.theme) : props.theme;
+    const [theme, setTheme] = useState(initialTheme);
+    const [editing, setEditing] = useState(false);
+    const changeTheme = (t) => {
+        setTheme(t);
+        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);
+        props.onSelectIndividual?.(occ?.individualId ?? null);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [select, props.onSelectIndividual]);
+    const zoom = useCallback((factor, at) => {
+        setBox((b) => {
+            const width = Math.min(Math.max(b.width * factor, 80), full.width * 8);
+            const height = (b.height * width) / b.width;
+            const fx = at ? (at.x - b.x) / b.width : 0.5;
+            const fy = at ? (at.y - b.y) / b.height : 0.5;
+            return { x: b.x + (b.width - width) * fx, y: b.y + (b.height - height) * fy, width, height };
+        });
+    }, [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.op-root');
+        const r = svg?.getBoundingClientRect();
+        if (!r || !r.width || !r.height)
+            return undefined;
+        return { x: box.x + ((e.clientX - r.left) / r.width) * box.width, y: box.y + ((e.clientY - r.top) / r.height) * box.height };
+    };
+    const focusOccurrence = (occurrenceId) => {
+        const el = root.current?.querySelector(`[data-occurrence="${CSS.escape(occurrenceId)}"]`);
+        el?.focus();
+    };
+    const onNodeKeyDown = (occ, e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            choose(selectedId === occ.individualId && selectedOccurrence === occ.occurrenceId ? null : occ);
+            return;
+        }
+        const direction = KEY_DIRECTION[e.key];
+        if (direction && !e.shiftKey) {
+            e.preventDefault();
+            const next = nearestNode(layout, occ.occurrenceId, direction);
+            if (next)
+                focusOccurrence(next);
+        }
+    };
+    const onKeyDown = (e) => {
+        if (e.key === 'Escape')
+            choose(null);
+        else if (e.key === '+' || e.key === '=')
+            zoom(0.8);
+        else if (e.key === '-')
+            zoom(1.25);
+        else if (e.key === '0')
+            setBox(full);
+        else if (e.shiftKey && KEY_DIRECTION[e.key]) {
+            e.preventDefault();
+            const d = KEY_DIRECTION[e.key];
+            pan(d === 'left' ? -0.1 : d === 'right' ? 0.1 : 0, d === 'up' ? -0.1 : d === 'down' ? 0.1 : 0);
+        }
+    };
+    const onWheel = (e) => {
+        // Zoom only with Ctrl/⌘ (and trackpad pinch, which sets ctrlKey); plain scrolling scrolls the page.
+        if (!e.ctrlKey && !e.metaKey)
+            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) => {
+        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.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 = (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.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);
+        a.download = `${projection.view}-${projection.focalId}.svg`;
+        a.click();
+        URL.revokeObjectURL(a.href);
+    };
+    const occurrence = projection.occurrences.find((o) => o.occurrenceId === selectedOccurrence);
+    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: 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, "data-tip": labels.zoomIn, children: _jsx(Icon, { name: "zoomIn" }) }), _jsx("button", { type: "button", onClick: () => zoom(1.25), "aria-label": labels.zoomOut, "data-tip": labels.zoomOut, children: _jsx(Icon, { name: "zoomOut" }) }), _jsx("button", { type: "button", onClick: () => setBox(full), "aria-label": labels.fit, "data-tip": labels.fit, children: _jsx(Icon, { name: "fit" }) }), _jsx("button", { type: "button", onClick: download, "aria-label": labels.download, "data-tip": labels.download, children: _jsx(Icon, { name: "download" }) }), _jsx("button", { type: "button", onClick: () => (props.onPrint ? props.onPrint() : printChart(root.current)), "aria-label": labels.print, "data-tip": labels.print, children: _jsx(Icon, { name: "print" }) }), props.themeEditor && (_jsx("button", { type: "button", onClick: () => setEditing((v) => !v), "aria-label": labels.colors, "data-tip": 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] })] })] })) })), (props.geneOverlay || props.genotypes) && (_jsxs("div", { className: "op-gene-legends", children: [props.genotypes && _jsx(GenotypeKey, { display: props.genotypes }), props.geneOverlay && _jsx(GeneLegend, { overlay: props.geneOverlay })] }))] }));
+}

package/dist/PedigreeView.d.ts

@@ -0,0 +1,71 @@
+import type { Individual, IndividualOccurrence, LayoutResult, PedigreeViewProjection, PositionedNode, ProjectionGroup, ReproductiveStructure } from '@captiveorigins/onepedigree-core';
+import type { KeyboardEvent, MouseEvent, ReactNode, SVGProps } from 'react';
+import { type Terminology } from './describe.js';
+import { type PedigreeTheme } from './themes.js';
+import { type GenotypeDisplay, type GenotypeMark, type GeneOverlay } from './genetics.js';
+export type IndividualSlotProps = {
+    individual: Individual | undefined;
+    occurrence: IndividualOccurrence;
+    node: PositionedNode;
+    structure: ReproductiveStructure | undefined;
+    selected: boolean;
+    highlighted: boolean;
+    terms: Terminology;
+    /** The shown gene's mark for this individual, when a gene overlay is on (null = unknown). */
+    gene?: GenotypeMark | null;
+    /** Allele dots for several genes, when `genotypes` is on. */
+    genotypes?: GenotypeDisplay;
+};
+export type CohortMarkerSlotProps = {
+    group: ProjectionGroup;
+    box: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+};
+export type PedigreeClassNames = Partial<Record<'root' | 'node' | 'nodeBox' | 'label' | 'connector' | 'cohort' | 'fanSegment', string>>;
+export type PedigreeViewProps = {
+    projection: PedigreeViewProjection;
+    layout: LayoutResult;
+    /** Accessible title (default: the view name and focal individual). */
+    title?: string;
+    className?: string;
+    classNames?: PedigreeClassNames;
+    terminology?: Partial<Terminology>;
+    /** Profile URL for an individual (server-resolved). Nodes become ordinary links. */
+    getIndividualHref?: (individual: Individual) => string | null | undefined;
+    /** Replace the default node content (SVG, drawn in the node's box at 0,0). */
+    renderIndividual?: (props: IndividualSlotProps) => ReactNode;
+    renderCohortMarker?: (props: CohortMarkerSlotProps) => ReactNode;
+    selectedIndividualId?: string | null;
+    highlightedOccurrenceIds?: ReadonlySet<string>;
+    /** Interactive explorer: nodes are focusable buttons. */
+    interactive?: boolean;
+    onNodeClick?: (occurrence: IndividualOccurrence, event: MouseEvent) => void;
+    onNodeKeyDown?: (occurrence: IndividualOccurrence, event: KeyboardEvent) => void;
+    /** Visible region (pan/zoom); default: the whole layout. */
+    viewBox?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    padding?: number;
+    /** Unique prefix for element IDs when several views share a page. */
+    idPrefix?: string;
+    svgProps?: Omit<SVGProps<SVGSVGElement>, 'viewBox' | 'children'>;
+    /** Show several genes on every node as allele dots (two per gene, one per copy). */
+    genotypes?: GenotypeDisplay;
+    /** Show one heritable gene on every node (genetic pedigree symbols; see GeneLegend). */
+    geneOverlay?: GeneOverlay;
+    /** A preset id ('classic', 'midnight', 'forest', 'ocean', 'terracotta', 'high-contrast', 'print') or a custom theme. */
+    theme?: PedigreeTheme | string;
+};
+/**
+ * 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 declare function PedigreeView(props: PedigreeViewProps): import("react").JSX.Element;