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

package/dist/icons.d.ts

@@ -0,0 +1,76 @@
+import type { SVGProps } from 'react';
+/**
+ * The brand family's line icons (brand/README.md), the same in OnePedigree and
+ * OneTaxonomy: drawings from Lucide (https://lucide.dev, ISC license, © Lucide
+ * Contributors), the set Captive Origins already uses, flattened to one path each.
+ * 24 × 24, 1.75 stroke, round caps and joins, currentColor. Decorative by default
+ * (aria-hidden): put the words in the button's text, or in aria-label plus a
+ * visible tooltip (`data-tip`) when the icon stands alone.
+ */
+export declare const ICON_PATHS: {
+    /** lucide: plus */
+    readonly plus: "M5 12h14M12 5v14";
+    /** lucide: minus */
+    readonly minus: "M5 12h14";
+    /** lucide: zoom-in */
+    readonly zoomIn: "M3 11a8 8 0 1 0 16 0a8 8 0 1 0 -16 0M21 21L16.65 16.65M11 8L11 14M8 11L14 11";
+    /** lucide: zoom-out */
+    readonly zoomOut: "M3 11a8 8 0 1 0 16 0a8 8 0 1 0 -16 0M21 21L16.65 16.65M8 11L14 11";
+    /** lucide: scan */
+    readonly fit: "M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2";
+    /** lucide: download */
+    readonly download: "M12 15V3M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4m7 10 5 5 5-5";
+    /** lucide: printer */
+    readonly print: "M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6M7 14h10a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-10a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1Z";
+    /** lucide: undo-2 */
+    readonly undo: "M9 14 4 9l5-5M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11";
+    /** lucide: redo-2 */
+    readonly redo: "m15 14 5-5-5-5M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13";
+    /** lucide: chevrons-up-down */
+    readonly expand: "m7 15 5 5 5-5m7 9 5-5 5 5";
+    /** lucide: chevrons-down-up */
+    readonly collapse: "m7 20 5-5 5 5m7 4 5 5 5-5";
+    /** lucide: arrow-down-up */
+    readonly flip: "m3 16 4 4 4-4M7 20V4m21 8-4-4-4 4M17 4v16";
+    /** lucide: focus */
+    readonly focus: "M9 12a3 3 0 1 0 6 0a3 3 0 1 0 -6 0M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2";
+    /** lucide: expand */
+    readonly unfocus: "m15 15 6 6m15 9 6-6M21 16v5h-5M21 8V3h-5M3 16v5h5m3 21 6-6M3 8V3h5M9 9 3 3";
+    /** lucide: network */
+    readonly layout: "M17 16h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1ZM3 16h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1ZM10 2h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1ZM5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3M12 12V8";
+    /** lucide: funnel */
+    readonly filter: "M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z";
+    /** lucide: palette */
+    readonly palette: "M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8zM13 6.5a0.5 0.5 0 1 0 1 0a0.5 0.5 0 1 0 -1 0M17 10.5a0.5 0.5 0 1 0 1 0a0.5 0.5 0 1 0 -1 0M6 12.5a0.5 0.5 0 1 0 1 0a0.5 0.5 0 1 0 -1 0M8 7.5a0.5 0.5 0 1 0 1 0a0.5 0.5 0 1 0 -1 0";
+    /** lucide: x */
+    readonly close: "M18 6 6 18m6 6 12 12";
+    /** lucide: external-link */
+    readonly open: "M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6";
+    /** lucide: grip-vertical */
+    readonly grip: "M8 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0M8 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0M8 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0M14 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0M14 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0M14 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0";
+    /** lucide: info */
+    readonly info: "M2 12a10 10 0 1 0 20 0a10 10 0 1 0 -20 0M12 16v-4M12 8h.01";
+    /** lucide: check */
+    readonly check: "M20 6 9 17l-5-5";
+    /** lucide: percent */
+    readonly support: "M19 5L5 19M4 6.5a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0 -5 0M15 17.5a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0 -5 0";
+    /** lucide: bone */
+    readonly fossil: "M17 10c.7-.7 1.69 0 2.5 0a2.5 2.5 0 1 0 0-5 .5.5 0 0 1-.5-.5 2.5 2.5 0 1 0-5 0c0 .81.7 1.8 0 2.5l-7 7c-.7.7-1.69 0-2.5 0a2.5 2.5 0 0 0 0 5c.28 0 .5.22.5.5a2.5 2.5 0 1 0 5 0c0-.81-.7-1.8 0-2.5Z";
+    /** lucide: image */
+    readonly image: "M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2ZM7 9a2 2 0 1 0 4 0a2 2 0 1 0 -4 0m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21";
+    /** lucide: file-json */
+    readonly file: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2zM14 2v5a1 1 0 0 0 1 1h5M10 12a1 1 0 0 0-1 1v1a1 1 0 0 1-1 1 1 1 0 0 1 1 1v1a1 1 0 0 0 1 1M14 18a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1 1 1 0 0 1-1-1v-1a1 1 0 0 0-1-1";
+    /** lucide: book-open */
+    readonly book: "M12 7v14M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z";
+    /** lucide: chevron-left */
+    readonly previous: "m15 18-6-6 6-6";
+    /** lucide: chevron-right */
+    readonly next: "m9 18 6-6-6-6";
+    /** lucide: dna */
+    readonly dna: "m10 16 1.5 1.5m14 8-1.5-1.5M15 2c-1.798 1.998-2.518 3.995-2.807 5.993m16.5 10.5 1 1m17 6-2.891-2.891M2 15c6.667-6 13.333 0 20-6m20 9 .891.891M3.109 14.109 4 15m6.5 12.5 1 1m7 18 2.891 2.891M9 22c1.798-1.998 2.518-3.995 2.807-5.993";
+};
+export type IconName = keyof typeof ICON_PATHS;
+export declare function Icon({ name, size, className, ...rest }: {
+    name: IconName;
+    size?: number;
+} & Omit<SVGProps<SVGSVGElement>, 'name'>): import("react").JSX.Element;

package/dist/icons.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The brand family's line icons (brand/README.md), the same in OnePedigree and
+ * OneTaxonomy: drawings from Lucide (https://lucide.dev, ISC license, © Lucide
+ * Contributors), the set Captive Origins already uses, flattened to one path each.
+ * 24 × 24, 1.75 stroke, round caps and joins, currentColor. Decorative by default
+ * (aria-hidden): put the words in the button's text, or in aria-label plus a
+ * visible tooltip (`data-tip`) when the icon stands alone.
+ */
+export const ICON_PATHS = {
+    /** lucide: plus */
+    plus: 'M5 12h14M12 5v14',
+    /** lucide: minus */
+    minus: 'M5 12h14',
+    /** lucide: zoom-in */
+    zoomIn: 'M3 11a8 8 0 1 0 16 0a8 8 0 1 0 -16 0M21 21L16.65 16.65M11 8L11 14M8 11L14 11',
+    /** lucide: zoom-out */
+    zoomOut: 'M3 11a8 8 0 1 0 16 0a8 8 0 1 0 -16 0M21 21L16.65 16.65M8 11L14 11',
+    /** lucide: scan */
+    fit: 'M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2',
+    /** lucide: download */
+    download: 'M12 15V3M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4m7 10 5 5 5-5',
+    /** lucide: printer */
+    print: 'M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6M7 14h10a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-10a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1Z',
+    /** lucide: undo-2 */
+    undo: 'M9 14 4 9l5-5M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11',
+    /** lucide: redo-2 */
+    redo: 'm15 14 5-5-5-5M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13',
+    /** lucide: chevrons-up-down */
+    expand: 'm7 15 5 5 5-5m7 9 5-5 5 5',
+    /** lucide: chevrons-down-up */
+    collapse: 'm7 20 5-5 5 5m7 4 5 5 5-5',
+    /** lucide: arrow-down-up */
+    flip: 'm3 16 4 4 4-4M7 20V4m21 8-4-4-4 4M17 4v16',
+    /** lucide: focus */
+    focus: 'M9 12a3 3 0 1 0 6 0a3 3 0 1 0 -6 0M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2',
+    /** lucide: expand */
+    unfocus: 'm15 15 6 6m15 9 6-6M21 16v5h-5M21 8V3h-5M3 16v5h5m3 21 6-6M3 8V3h5M9 9 3 3',
+    /** lucide: network */
+    layout: 'M17 16h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1ZM3 16h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1ZM10 2h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1ZM5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3M12 12V8',
+    /** lucide: funnel */
+    filter: 'M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z',
+    /** lucide: palette */
+    palette: 'M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8zM13 6.5a0.5 0.5 0 1 0 1 0a0.5 0.5 0 1 0 -1 0M17 10.5a0.5 0.5 0 1 0 1 0a0.5 0.5 0 1 0 -1 0M6 12.5a0.5 0.5 0 1 0 1 0a0.5 0.5 0 1 0 -1 0M8 7.5a0.5 0.5 0 1 0 1 0a0.5 0.5 0 1 0 -1 0',
+    /** lucide: x */
+    close: 'M18 6 6 18m6 6 12 12',
+    /** lucide: external-link */
+    open: 'M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6',
+    /** lucide: grip-vertical */
+    grip: 'M8 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0M8 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0M8 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0M14 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0M14 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0M14 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0',
+    /** lucide: info */
+    info: 'M2 12a10 10 0 1 0 20 0a10 10 0 1 0 -20 0M12 16v-4M12 8h.01',
+    /** lucide: check */
+    check: 'M20 6 9 17l-5-5',
+    /** lucide: percent */
+    support: 'M19 5L5 19M4 6.5a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0 -5 0M15 17.5a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0 -5 0',
+    /** lucide: bone */
+    fossil: 'M17 10c.7-.7 1.69 0 2.5 0a2.5 2.5 0 1 0 0-5 .5.5 0 0 1-.5-.5 2.5 2.5 0 1 0-5 0c0 .81.7 1.8 0 2.5l-7 7c-.7.7-1.69 0-2.5 0a2.5 2.5 0 0 0 0 5c.28 0 .5.22.5.5a2.5 2.5 0 1 0 5 0c0-.81-.7-1.8 0-2.5Z',
+    /** lucide: image */
+    image: 'M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2ZM7 9a2 2 0 1 0 4 0a2 2 0 1 0 -4 0m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21',
+    /** lucide: file-json */
+    file: 'M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2zM14 2v5a1 1 0 0 0 1 1h5M10 12a1 1 0 0 0-1 1v1a1 1 0 0 1-1 1 1 1 0 0 1 1 1v1a1 1 0 0 0 1 1M14 18a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1 1 1 0 0 1-1-1v-1a1 1 0 0 0-1-1',
+    /** lucide: book-open */
+    book: 'M12 7v14M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z',
+    /** lucide: chevron-left */
+    previous: 'm15 18-6-6 6-6',
+    /** lucide: chevron-right */
+    next: 'm9 18 6-6-6-6',
+    /** lucide: dna */
+    dna: 'm10 16 1.5 1.5m14 8-1.5-1.5M15 2c-1.798 1.998-2.518 3.995-2.807 5.993m16.5 10.5 1 1m17 6-2.891-2.891M2 15c6.667-6 13.333 0 20-6m20 9 .891.891M3.109 14.109 4 15m6.5 12.5 1 1m7 18 2.891 2.891M9 22c1.798-1.998 2.518-3.995 2.807-5.993',
+};
+export function Icon({ name, size = 16, className, ...rest }) {
+    return (_jsx("svg", { viewBox: "0 0 24 24", width: size, height: size, fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", className: ["op-icon", className].filter(Boolean).join(" "), ...rest, children: _jsx("path", { d: ICON_PATHS[name] }) }));
+}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+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';
+export { AhnentafelList, ahnentafelRelation, type AhnentafelListProps } from './AhnentafelList.js';
+export { Icon, ICON_PATHS, type IconName } from './icons.js';
+export { dropNodeOrder } from './reorder.js';
+export { dotsWidth, GeneLegend, GenotypeDots, GenotypeGlyph, GenotypeKey, GenotypeStrip, genotypeText, genotypeWord, GENOTYPE_WORDS, type GeneKey, type GeneOverlay, type GenotypeDisplay, type GenotypeMark, type GenotypeWords } from './genetics.js';

package/dist/index.js

@@ -0,0 +1,8 @@
+export { PedigreeView } from './PedigreeView.js';
+export { PedigreeExplorer } from './PedigreeExplorer.js';
+export * from './headless.js';
+export { ThemeEditor } from './ThemeEditor.js';
+export { AhnentafelList, ahnentafelRelation } from './AhnentafelList.js';
+export { Icon, ICON_PATHS } from './icons.js';
+export { dropNodeOrder } from './reorder.js';
+export { dotsWidth, GeneLegend, GenotypeDots, GenotypeGlyph, GenotypeKey, GenotypeStrip, genotypeText, genotypeWord, GENOTYPE_WORDS } from './genetics.js';

package/dist/reorder.d.ts

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

package/dist/reorder.js

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

package/dist/styles.css

@@ -0,0 +1,176 @@
+/*
+ * 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-fan-label { pointer-events: none; }
+.op-life-bar[data-open] { stroke-dasharray: 4 3; }
+.op-axis-line { stroke: var(--op-connector); stroke-width: 1px; }
+.op-axis-tick { stroke: var(--op-connector); stroke-opacity: 0.18; stroke-width: 1px; }
+.op-view-timeline .op-connector { stroke-opacity: 0.55; }
+.op-cohort-box { fill: none; stroke: var(--op-cohort-border); stroke-dasharray: 4 4; }
+.op-cohort-label { fill: var(--op-cohort-label); font-size: 11px; }
+
+.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 {
+  display: inline-flex; align-items: center; justify-content: center;
+  min-width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--op-node-border, #6b7a90);
+  background: var(--op-node-background, #fff); color: inherit; font: inherit; cursor: pointer;
+}
+/* Brand family (brand/README.md): shared line icons, Captive Origins orange focus ring. */
+.op-icon { flex: none; }
+.op-explorer[data-reorderable] .op-node { cursor: grab; }
+.op-node[data-dragging] { cursor: grabbing; opacity: 0.85; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.18)); }
+.op-toolbar button:focus-visible, .op-quick-view-actions :is(a, button):focus-visible { outline: 2px solid #cf8137; outline-offset: 2px; }
+@media (prefers-color-scheme: dark) {
+  .op-toolbar button:focus-visible, .op-quick-view-actions :is(a, button):focus-visible { outline-color: #e7a066; }
+}
+.op-quick-view {
+  position: absolute; left: 8px; bottom: 8px; max-width: 18rem; padding: 12px 14px; border-radius: 10px;
+  background: var(--op-node-background, #fff); border: 1px solid var(--op-node-border, #6b7a90);
+  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-quick-view-actions :is(a, button) { display: inline-flex; align-items: center; gap: 4px; }
+.op-theme-panel {
+  position: absolute; top: 48px; right: 8px; z-index: 2; max-height: calc(100% - 56px); overflow: auto; width: 20rem;
+  padding: 12px; border-radius: 10px; background: var(--op-node-background, #fff); color: var(--op-label, #1d2330);
+  border: 1px solid var(--op-node-border, #6b7a90); font: 13px/1.4 system-ui, sans-serif; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
+}
+.op-ahnentafel { padding: 56px 20px 20px; overflow: auto; height: 100%; box-sizing: border-box; color: var(--op-label, #1d2330); font: 14px/1.5 var(--op-font, system-ui, sans-serif); }
+.op-ahnentafel h3 { margin: 16px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--op-sublabel, #5b6577); }
+.op-ahnentafel ol { list-style: none; margin: 0; padding: 0; columns: 18rem; column-gap: 24px; }
+.op-ahnentafel li { break-inside: avoid; padding: 2px 0; }
+.op-ahnentafel li[data-selected] { font-weight: 600; }
+.op-ahnentafel button { all: unset; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
+.op-ahnentafel-number { display: inline-block; min-width: 2.5em; text-align: end; color: var(--op-sublabel, #5b6577); font-variant-numeric: tabular-nums; }
+.op-ahnentafel-years, .op-ahnentafel-relation, .op-ahnentafel-note { color: var(--op-sublabel, #5b6577); font-size: 13px; }
+.op-theme-editor-title { font-weight: 600; margin: 0 0 8px; }
+.op-theme-row { display: grid; grid-template-columns: 1fr 2.25rem 5.5rem; align-items: center; gap: 6px; margin: 4px 0; }
+.op-theme-row select { grid-column: 2 / 4; }
+.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 {
+  html[data-op-printing] body * { visibility: hidden; }
+  html[data-op-printing] [data-op-printing], html[data-op-printing] [data-op-printing] * { visibility: visible; }
+  html[data-op-printing] [data-op-printing] { position: fixed; inset: 0; height: 100% !important; border-radius: 0; }
+  .op-toolbar, .op-quick-view, .op-theme-panel { display: none; }
+  .op-explorer { height: auto !important; overflow: visible; }
+  .op-root { --op-node-background: #fff; --op-label: #000; --op-connector: #555; }
+}
+
+/* Heritable trait overlay: genetic pedigree symbols (filled = visual, half = het, dot = possible het, open = not carrying). */
+.op-gene-outline { fill: var(--op-node-background, #fff); stroke: var(--op-label, #4c312c); stroke-width: 1.5px; }
+.op-gene-outline[data-dashed] { stroke-dasharray: 2 2; }
+.op-gene-fill { fill: var(--op-label, #4c312c); }
+.op-gene-ring { fill: none; stroke: var(--op-label, #4c312c); stroke-width: 1.25px; }
+.op-gene-text { font-size: 9px; fill: var(--op-label, #4c312c); }
+.op-gene[data-state='unknown'] .op-gene-outline { stroke: #9a8f8b; }
+.op-gene[data-state='unknown'] .op-gene-text { fill: #9a8f8b; }
+.op-gene-legends { position: absolute; left: 8px; bottom: 8px; z-index: 1; max-width: calc(100% - 16px); display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; }
+.op-gene-legend { padding: 6px 10px; border: 1px solid #eaddd6; border-radius: 10px; background: rgba(255, 255, 255, 0.94); font-size: 12px; color: #4c312c; }
+.op-gene-legend ul { list-style: none; display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 4px 0 0; padding: 0; }
+.op-gene-legend li { display: inline-flex; align-items: center; gap: 4px; }
+/* Visible tooltips for icon-only buttons, on hover and on keyboard focus (title= shows on hover only). */
+.op-toolbar [data-tip] { position: relative; }
+.op-toolbar [data-tip]:is(:hover, :focus-visible)::after {
+  content: attr(data-tip); position: absolute; top: calc(100% + 6px); right: 0; z-index: 2; white-space: nowrap; pointer-events: none;
+  padding: 4px 8px; border-radius: 6px; background: #4c312c; color: #fff; font-size: 12px; line-height: 1.3;
+}
+
+/* Allele dots: two per gene, one per copy. Filled = carries it (gene color), empty = normal copy,
+   dashed = possible, grey dashed = not known. Shape carries the meaning, not color. */
+.op-dot { fill: var(--op-node-background, #fff); stroke: var(--op-label, #4c312c); stroke-width: 1.25px; }
+.op-dot[data-dot='possible'] { stroke-dasharray: 1.6 1.6; }
+/* Suggested from relatives (not proven): the copy is drawn with a dashed edge. */
+.op-dot[data-inferred] { stroke-dasharray: 2 1.4; stroke-width: 1.5px; }
+.op-dot[data-dot='unknown'] { stroke: #9a8f8b; stroke-dasharray: 1.6 1.6; }
+.op-gene-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--op-label, #4c312c); }
+.op-genotype-key ul + ul { margin-top: 2px; }
+
+/* With a gene legend, the legend sits under the drawing instead of covering it. */
+.op-explorer[data-legend] { display: flex; flex-direction: column; }
+.op-explorer[data-legend] > svg { flex: 1; min-height: 0; height: auto; }
+.op-explorer[data-legend] .op-gene-legends { position: static; margin: 0 8px 8px; max-width: none; }

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);
+}