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

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,71 @@
-# 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.
+
+## 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.
+
+## 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/PedigreeExplorer.d.ts

@@ -0,0 +1,32 @@
+import type { Individual, 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;
+    /** 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,148 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { DEFAULT_TERMS, describeStructure, labelOf } from './describe.js';
+import { nearestNode, useOccurrenceHighlighting, usePedigreeSelection } from './hooks.js';
+import { PedigreeView } from './PedigreeView.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',
+};
+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);
+    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');
+        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 onPointerDown = (e) => {
+        if (e.target.closest('.op-node, button, a'))
+            return;
+        drag.current = { x: e.clientX, y: e.clientY, box };
+        e.currentTarget.setPointerCapture?.(e.pointerId);
+    };
+    const onPointerMove = (e) => {
+        const d = drag.current;
+        const r = root.current?.querySelector('svg')?.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 = () => {
+        drag.current = null;
+    };
+    const download = () => {
+        const svg = root.current?.querySelector('svg');
+        if (!svg)
+            return;
+        const clone = svg.cloneNode(true);
+        clone.setAttribute('viewBox', `${full.x} ${full.y} ${full.width} ${full.height}`);
+        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: 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 })] })] })) }))] }));
+}

package/dist/PedigreeView.d.ts

@@ -0,0 +1,62 @@
+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';
+export type IndividualSlotProps = {
+    individual: Individual | undefined;
+    occurrence: IndividualOccurrence;
+    node: PositionedNode;
+    structure: ReproductiveStructure | undefined;
+    selected: boolean;
+    highlighted: boolean;
+    terms: Terminology;
+};
+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'>;
+    /** 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;

package/dist/PedigreeView.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { arcPath, DEFAULT_TERMS, describeProjection, describeStructure, labelOf, VIEW_LABELS } from './describe.js';
+import { themeStyle } from './themes.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 }) {
+    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));
+    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 })] }));
+}
+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:/, ''), 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) => {
+                    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,
+                        occurrence.ahnentafel !== undefined ? `Ahnentafel ${occurrence.ahnentafel}` : null,
+                        occurrence.repeated ? terms.repeated : null,
+                        describeStructure(structure),
+                    ]
+                        .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 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/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]);
+}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { PedigreeView, type CohortMarkerSlotProps, type IndividualSlotProps, type PedigreeClassNames, type PedigreeViewProps } from './PedigreeView.js';
+export { PedigreeExplorer, type PedigreeExplorerProps, type QuickViewProps } from './PedigreeExplorer.js';
+export * from './headless.js';
+export { ThemeEditor, type ThemeEditorProps } from './ThemeEditor.js';

package/dist/index.js

@@ -0,0 +1,4 @@
+export { PedigreeView } from './PedigreeView.js';
+export { PedigreeExplorer } from './PedigreeExplorer.js';
+export * from './headless.js';
+export { ThemeEditor } from './ThemeEditor.js';

package/dist/styles.css

@@ -0,0 +1,117 @@
+/*
+ * OnePedigree default styles. Optional: skip this file for unstyled mode and
+ * style the stable .op-* classes and data-* attributes yourself, or override
+ * the custom properties below.
+ */
+.op-root {
+  --op-font: system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --op-node-background: #ffffff;
+  --op-node-border: #6b7a90;
+  --op-node-border-width: 1.5px;
+  --op-node-border-style: solid;
+  --op-label: #1d2330;
+  --op-sublabel: #5b6577;
+  --op-connector: #8892a6;
+  --op-connector-width: 1.5px;
+  --op-focal-border: #2f7d5c;
+  --op-selected-ring: #f0b35a;
+  --op-highlight: #d97706;
+  --op-cohort-border: #9aa5b8;
+  --op-cohort-label: #5b6577;
+  --op-junction: #5b6577;
+  --op-fan-fill: #eef2f7;
+  --op-fan-fill-alt: #e3e9f1;
+  font-family: var(--op-font);
+  overflow: visible;
+}
+@media (prefers-color-scheme: dark) {
+  .op-root {
+    --op-node-background: #161a22;
+    --op-node-border: #7dc4a5;
+    --op-label: #eef1f6;
+    --op-sublabel: #a7b0c0;
+    --op-connector: #8892a6;
+    --op-cohort-border: #4b5567;
+    --op-cohort-label: #a7b0c0;
+    --op-junction: #c3cad6;
+    --op-fan-fill: #1d2330;
+    --op-fan-fill-alt: #232a37;
+  }
+}
+.op-node-box {
+  fill: var(--op-node-background);
+  stroke: var(--op-node-border);
+  stroke-width: var(--op-node-border-width);
+  stroke-dasharray: var(--op-node-border-dash, none);
+}
+.op-label { fill: var(--op-label); font-size: 13px; font-weight: 600; }
+.op-sublabel { fill: var(--op-sublabel); font-size: 11px; }
+.op-repeat-marker { fill: var(--op-highlight); font-size: 13px; }
+.op-connector { fill: none; stroke: var(--op-connector); stroke-width: var(--op-connector-width); }
+/* Reproductive mode by line pattern (never color alone). */
+.op-connector[data-reproductive-mode='parthenogenesis'] { stroke-dasharray: 6 4; }
+.op-connector[data-reproductive-mode='self'] { stroke-dasharray: 2 3; }
+.op-connector[data-reproductive-mode='asexual'],
+.op-connector[data-reproductive-mode='cloning'] { stroke-dasharray: 1 4; stroke-linecap: round; }
+.op-connector[data-completeness='incomplete'] { stroke-opacity: 0.6; }
+.op-connector[data-highlighted] { stroke: var(--op-highlight); stroke-width: 2.5px; }
+.op-junction { fill: var(--op-junction); stroke: var(--op-junction); stroke-width: 1.5px; }
+.op-junction[data-completeness='incomplete'] { fill: var(--op-node-background); }
+.op-individual[data-repeated] { --op-node-border-dash: 5 3; }
+.op-individual[data-focal] .op-node-box { stroke: var(--op-focal-border); stroke-width: 2.5px; }
+.op-individual[data-highlighted] .op-node-box,
+.op-individual[data-highlighted] .op-fan-segment { stroke: var(--op-highlight); stroke-width: 2.5px; }
+.op-individual[data-selected] .op-node-box,
+.op-individual[data-selected] .op-fan-segment { stroke: var(--op-selected-ring); stroke-width: 3.5px; }
+.op-individual[data-collapsed] { opacity: 0.75; }
+.op-individual[role='button'] { cursor: pointer; }
+.op-individual:focus { outline: none; }
+.op-individual:focus-visible .op-node-box,
+.op-individual:focus-visible .op-fan-segment { stroke: var(--op-selected-ring); stroke-width: 3px; stroke-dasharray: 3 2; }
+.op-individual a:focus-visible .op-node-box { stroke: var(--op-selected-ring); stroke-width: 3px; }
+.op-fan-segment { fill: var(--op-fan-fill); stroke: var(--op-node-border); stroke-width: 1px; }
+.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-cohort-box { fill: none; stroke: var(--op-cohort-border); stroke-dasharray: 4 4; }
+.op-cohort-label { fill: var(--op-cohort-label); font-size: 11px; }
+
+.op-explorer { position: relative; overflow: hidden; touch-action: none; border-radius: 12px; }
+.op-explorer > svg { display: block; width: 100%; height: 100%; cursor: grab; }
+.op-explorer > svg:active { cursor: grabbing; }
+.op-toolbar { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; z-index: 1; }
+.op-toolbar button {
+  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; }
+.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);
+  font: 13px/1.4 system-ui, sans-serif; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
+}
+.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-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-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; }
+.op-theme-row input[type='color'] { width: 2.25rem; height: 1.75rem; padding: 0; border: 1px solid #aab; border-radius: 6px; background: none; }
+.op-theme-row input[type='text'] { font: 12px ui-monospace, monospace; padding: 3px 6px; border: 1px solid #aab; border-radius: 6px; }
+.op-theme-row input[aria-invalid='true'] { border-color: #c00; }
+.op-theme-hint { grid-column: 1 / 4; font-size: 11px; color: #b45309; }
+.op-theme-scope { border: 0; padding: 0; margin: 6px 0; display: flex; flex-wrap: wrap; gap: 4px 12px; }
+.op-theme-scope legend { width: 100%; margin-bottom: 2px; }
+@media (prefers-reduced-motion: reduce) {
+  .op-root * { transition: none !important; animation: none !important; }
+}
+@media print {
+  .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/dist/themes.d.ts

@@ -0,0 +1,24 @@
+import type { PedigreeViewId } from '@captiveorigins/onepedigree-core';
+import type { CSSProperties } from 'react';
+/** Colors a theme sets; each maps to a `--op-*` custom property. */
+export declare const THEME_TOKENS: readonly ["background", "nodeBackground", "nodeBorder", "label", "sublabel", "connector", "focalBorder", "selectedRing", "highlight", "cohortBorder", "junction", "fanFill", "fanFillAlt"];
+export type ThemeToken = (typeof THEME_TOKENS)[number];
+export type ThemeColors = Record<ThemeToken, string>;
+export declare const TOKEN_LABELS: Record<ThemeToken, string>;
+export type PedigreeTheme = {
+    id: string;
+    label: string;
+    colors: ThemeColors;
+    /** Per-view adjustments on top of `colors` (e.g. warm maternal, cool paternal lines). */
+    views?: Partial<Record<PedigreeViewId, Partial<ThemeColors>>>;
+};
+export declare const isHexColor: (v: unknown) => v is string;
+/** Built-in presets, each with its own per-view accents. */
+export declare const THEME_PRESETS: readonly PedigreeTheme[];
+export declare const presetTheme: (id: string) => PedigreeTheme | undefined;
+/** Colors for one view: preset, then its view accents, then the theme's own overrides; invalid hex values are ignored. */
+export declare function resolveThemeColors(themeOrId: PedigreeTheme | string | undefined, view: PedigreeViewId): ThemeColors;
+/** Inline custom properties for a view (works in server rendering). No theme: none (the stylesheet decides). */
+export declare function themeStyle(themeOrId: PedigreeTheme | string | undefined, view: PedigreeViewId): CSSProperties | undefined;
+/** WCAG contrast ratio of two hex colors (1–21). */
+export declare function contrastRatio(a: string, b: string): number;

package/dist/themes.js

@@ -0,0 +1,216 @@
+/** Colors a theme sets; each maps to a `--op-*` custom property. */
+export const THEME_TOKENS = [
+    'background',
+    'nodeBackground',
+    'nodeBorder',
+    'label',
+    'sublabel',
+    'connector',
+    'focalBorder',
+    'selectedRing',
+    'highlight',
+    'cohortBorder',
+    'junction',
+    'fanFill',
+    'fanFillAlt',
+];
+export const TOKEN_LABELS = {
+    background: 'Background',
+    nodeBackground: 'Card',
+    nodeBorder: 'Card border',
+    label: 'Name text',
+    sublabel: 'Detail text',
+    connector: 'Lines',
+    focalBorder: 'Focal individual',
+    selectedRing: 'Selection',
+    highlight: 'Highlight',
+    cohortBorder: 'Cohort outline',
+    junction: 'Junctions',
+    fanFill: 'Fan rings',
+    fanFillAlt: 'Fan rings (alternate)',
+};
+const VAR = {
+    background: '--op-background',
+    nodeBackground: '--op-node-background',
+    nodeBorder: '--op-node-border',
+    label: '--op-label',
+    sublabel: '--op-sublabel',
+    connector: '--op-connector',
+    focalBorder: '--op-focal-border',
+    selectedRing: '--op-selected-ring',
+    highlight: '--op-highlight',
+    cohortBorder: '--op-cohort-border',
+    junction: '--op-junction',
+    fanFill: '--op-fan-fill',
+    fanFillAlt: '--op-fan-fill-alt',
+};
+export const isHexColor = (v) => typeof v === 'string' && /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.test(v);
+const theme = (id, label, colors, views) => ({ id, label, colors, views });
+/** Built-in presets, each with its own per-view accents. */
+export const THEME_PRESETS = [
+    theme('classic', 'Classic', {
+        background: '#ffffff',
+        nodeBackground: '#ffffff',
+        nodeBorder: '#6b7a90',
+        label: '#1d2330',
+        sublabel: '#5b6577',
+        connector: '#8892a6',
+        focalBorder: '#2f7d5c',
+        selectedRing: '#f0b35a',
+        highlight: '#d97706',
+        cohortBorder: '#9aa5b8',
+        junction: '#5b6577',
+        fanFill: '#eef2f7',
+        fanFillAlt: '#e3e9f1',
+    }, {
+        maternal: { focalBorder: '#b4436c', connector: '#c76b8e', nodeBorder: '#c76b8e' },
+        paternal: { focalBorder: '#2b6cb0', connector: '#5a8fd0', nodeBorder: '#5a8fd0' },
+        inbreeding: { highlight: '#c2410c' },
+        relationship: { highlight: '#7c3aed' },
+        fan: { fanFill: '#e8f1ec', fanFillAlt: '#d7e8de' },
+        timeline: { connector: '#a7b0c0' },
+        population: { connector: '#b4bccb' },
+    }),
+    theme('midnight', 'Midnight', {
+        background: '#0e1117',
+        nodeBackground: '#161a22',
+        nodeBorder: '#7dc4a5',
+        label: '#eef1f6',
+        sublabel: '#a7b0c0',
+        connector: '#8892a6',
+        focalBorder: '#7dc4a5',
+        selectedRing: '#f0b35a',
+        highlight: '#f59e0b',
+        cohortBorder: '#4b5567',
+        junction: '#c3cad6',
+        fanFill: '#1d2330',
+        fanFillAlt: '#232a37',
+    }, {
+        maternal: { nodeBorder: '#f29bb9', connector: '#f29bb9', focalBorder: '#f29bb9' },
+        paternal: { nodeBorder: '#8ab8f0', connector: '#8ab8f0', focalBorder: '#8ab8f0' },
+        inbreeding: { highlight: '#fb923c' },
+        relationship: { highlight: '#c4b5fd' },
+        fan: { fanFill: '#18232a', fanFillAlt: '#1f2e35' },
+    }),
+    theme('forest', 'Forest', {
+        background: '#f6f8f3',
+        nodeBackground: '#ffffff',
+        nodeBorder: '#5d7a52',
+        label: '#1f2a1c',
+        sublabel: '#56654f',
+        connector: '#8aa07e',
+        focalBorder: '#2f5d2a',
+        selectedRing: '#d9a441',
+        highlight: '#b45309',
+        cohortBorder: '#a3b398',
+        junction: '#56654f',
+        fanFill: '#e6efdf',
+        fanFillAlt: '#d6e4cb',
+    }, {
+        maternal: { nodeBorder: '#8f5e3b', connector: '#a8774f' },
+        paternal: { nodeBorder: '#3d6b62', connector: '#5b8a80' },
+        relationship: { highlight: '#9a3412' },
+    }),
+    theme('ocean', 'Ocean', {
+        background: '#f3f8fb',
+        nodeBackground: '#ffffff',
+        nodeBorder: '#4c7a99',
+        label: '#122533',
+        sublabel: '#4b6475',
+        connector: '#7fa3bb',
+        focalBorder: '#0f5e8c',
+        selectedRing: '#f2a65a',
+        highlight: '#e07a2e',
+        cohortBorder: '#9fbccf',
+        junction: '#4b6475',
+        fanFill: '#e2eef6',
+        fanFillAlt: '#d0e3ef',
+    }, {
+        maternal: { nodeBorder: '#a35a8a', connector: '#bb7aa4' },
+        paternal: { nodeBorder: '#1f6fa3', connector: '#4f92c0' },
+        inbreeding: { highlight: '#c2410c' },
+    }),
+    theme('terracotta', 'Terracotta', {
+        background: '#fbf6f1',
+        nodeBackground: '#fffdfa',
+        nodeBorder: '#a0674a',
+        label: '#2d1d14',
+        sublabel: '#6e5446',
+        connector: '#c49a83',
+        focalBorder: '#8a3f1f',
+        selectedRing: '#3f7f6f',
+        highlight: '#3f7f6f',
+        cohortBorder: '#d9bba8',
+        junction: '#6e5446',
+        fanFill: '#f5e6da',
+        fanFillAlt: '#ecd5c4',
+    }, {
+        maternal: { nodeBorder: '#b0546b', connector: '#c57789' },
+        paternal: { nodeBorder: '#4f6f8a', connector: '#7290a8' },
+    }),
+    theme('high-contrast', 'High contrast', {
+        background: '#ffffff',
+        nodeBackground: '#ffffff',
+        nodeBorder: '#000000',
+        label: '#000000',
+        sublabel: '#1a1a1a',
+        connector: '#000000',
+        focalBorder: '#0000cc',
+        selectedRing: '#cc0000',
+        highlight: '#cc0000',
+        cohortBorder: '#000000',
+        junction: '#000000',
+        fanFill: '#ffffff',
+        fanFillAlt: '#e6e6e6',
+    }, {}),
+    theme('print', 'Print (grayscale)', {
+        background: '#ffffff',
+        nodeBackground: '#ffffff',
+        nodeBorder: '#444444',
+        label: '#000000',
+        sublabel: '#333333',
+        connector: '#555555',
+        focalBorder: '#000000',
+        selectedRing: '#000000',
+        highlight: '#000000',
+        cohortBorder: '#888888',
+        junction: '#333333',
+        fanFill: '#f2f2f2',
+        fanFillAlt: '#e0e0e0',
+    }, {}),
+];
+export const presetTheme = (id) => THEME_PRESETS.find((t) => t.id === id);
+/** Colors for one view: preset, then its view accents, then the theme's own overrides; invalid hex values are ignored. */
+export function resolveThemeColors(themeOrId, view) {
+    const t = typeof themeOrId === 'string' ? presetTheme(themeOrId) : themeOrId;
+    // Invalid or missing values fall back to the theme's own preset (else Classic).
+    const preset = (t && presetTheme(t.id)) ?? THEME_PRESETS[0];
+    const out = { ...preset.colors };
+    for (const layer of [preset !== t ? preset.views?.[view] : undefined, t?.colors, t?.views?.[view]])
+        for (const k of THEME_TOKENS) {
+            const v = layer?.[k];
+            if (isHexColor(v))
+                out[k] = v;
+        }
+    return out;
+}
+/** Inline custom properties for a view (works in server rendering). No theme: none (the stylesheet decides). */
+export function themeStyle(themeOrId, view) {
+    if (!themeOrId)
+        return undefined;
+    const colors = resolveThemeColors(themeOrId, view);
+    return Object.fromEntries(THEME_TOKENS.map((k) => [VAR[k], colors[k]]));
+}
+/** WCAG contrast ratio of two hex colors (1–21). */
+export function contrastRatio(a, b) {
+    const lum = (hex) => {
+        const h = hex.length === 4 ? hex.replace(/^#(.)(.)(.)$/, '#$1$1$2$2$3$3') : hex;
+        const [r, g, bl] = [1, 3, 5].map((i) => {
+            const c = parseInt(h.slice(i, i + 2), 16) / 255;
+            return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+        });
+        return 0.2126 * r + 0.7152 * g + 0.0722 * bl;
+    };
+    const [x, y] = [lum(a), lum(b)].sort((m, n) => n - m);
+    return (x + 0.05) / (y + 0.05);
+}

package/package.json

@@ -1,6 +1,63 @@
 {
   "name": "@captiveorigins/onepedigree-react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0-alpha.5",
+  "description": "OnePedigree for React: server-renderable SVG pedigree views (all 13), interactive explorer, headless hooks and CSS-variable styling.",
+  "keywords": [
+    "pedigree",
+    "genealogy",
+    "family-tree",
+    "react",
+    "svg",
+    "breeding"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mgilardi/onepedigree.git",
+    "directory": "packages/react"
+  },
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./headless": {
+      "types": "./dist/headless.d.ts",
+      "import": "./dist/headless.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=22"
+  },
+  "dependencies": {
+    "@captiveorigins/onepedigree-core": "^0.1.0-alpha.5"
+  },
+  "peerDependencies": {
+    "react": ">=18.2"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.3.3",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "jsdom": "^30.1.3",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1"
+  },
+  "scripts": {
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && cp src/styles.css dist/styles.css",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  }
 }