@captiveorigins/onephylogeny-react 0.0.0-stage → 0.1.0-alpha.1

package/LICENSE

@@ -0,0 +1,75 @@
+Required Notice: Copyright 2026 Captive Origins (https://captiveorigins.com)
+
+# PolyForm Noncommercial License 1.0.0
+
+<https://polyformproject.org/licenses/noncommercial/1.0.0>
+
+## Acceptance
+
+In order to get any license under these terms, you must agree to them as both strict obligations and conditions to all your licenses.
+
+## Copyright License
+
+The licensor grants you a copyright license for the software to do everything you might do with the software that would otherwise infringe the licensor's copyright in it for any permitted purpose.  However, you may only distribute the software according to [Distribution License](#distribution-license) and make changes or new works based on the software according to [Changes and New Works License](#changes-and-new-works-license).
+
+## Distribution License
+
+The licensor grants you an additional copyright license to distribute copies of the software.  Your license to distribute covers distributing the software with changes and new works permitted by [Changes and New Works License](#changes-and-new-works-license).
+
+## Notices
+
+You must ensure that anyone who gets a copy of any part of the software from you also gets a copy of these terms or the URL for them above, as well as copies of any plain-text lines beginning with `Required Notice:` that the licensor provided with the software.  For example:
+
+> Required Notice: Copyright Yoyodyne, Inc. (http://example.com)
+
+## Changes and New Works License
+
+The licensor grants you an additional copyright license to make changes and new works based on the software for any permitted purpose.
+
+## Patent License
+
+The licensor grants you a patent license for the software that covers patent claims the licensor can license, or becomes able to license, that you would infringe by using the software.
+
+## Noncommercial Purposes
+
+Any noncommercial purpose is a permitted purpose.
+
+## Personal Uses
+
+Personal use for research, experiment, and testing for the benefit of public knowledge, personal study, private entertainment, hobby projects, amateur pursuits, or religious observance, without any anticipated commercial application, is use for a permitted purpose.
+
+## Noncommercial Organizations
+
+Use by any charitable organization, educational institution, public research organization, public safety or health organization, environmental protection organization, or government institution is use for a permitted purpose regardless of the source of funding or obligations resulting from the funding.
+
+## Fair Use
+
+You may have "fair use" rights for the software under the law. These terms do not limit them.
+
+## No Other Rights
+
+These terms do not allow you to sublicense or transfer any of your licenses to anyone else, or prevent the licensor from granting licenses to anyone else.  These terms do not imply any other licenses.
+
+## Patent Defense
+
+If you make any written claim that the software infringes or contributes to infringement of any patent, your patent license for the software granted under these terms ends immediately. If your company makes such a claim, your patent license ends immediately for work on behalf of your company.
+
+## Violations
+
+The first time you are notified in writing that you have violated any of these terms, or done anything with the software not covered by your licenses, your licenses can nonetheless continue if you come into full compliance with these terms, and take practical steps to correct past violations, within 32 days of receiving notice.  Otherwise, all your licenses end immediately.
+
+## No Liability
+
+***As far as the law allows, the software comes as is, without any warranty or condition, and the licensor will not be liable to you for any damages arising out of these terms or the use or nature of the software, under any kind of legal claim.***
+
+## Definitions
+
+The **licensor** is the individual or entity offering these terms, and the **software** is the software the licensor makes available under these terms.
+
+**You** refers to the individual or entity agreeing to these terms.
+
+**Your company** is any legal entity, sole proprietorship, or other kind of organization that you work for, plus all organizations that have control over, are under the control of, or are under common control with that organization.  **Control** means ownership of substantially all the assets of an entity, or the power to direct its management and policies by vote, contract, or otherwise.  Control can be direct or indirect.
+
+**Your licenses** are all the licenses granted to you for the software under these terms.
+
+**Use** means anything you do with the software requiring one of your licenses.

package/README.md

@@ -1,3 +1,7 @@
-# Temporary Holding Version
+# @captiveorigins/onephylogeny-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 views of sample results, panel coverage, validation, run logs and outgroup suggestions, with a compact lineage card for record pages.
+
+Import `@captiveorigins/onephylogeny-react/styles.css`. Colors are CSS variables prefixed `--ophy-`.
+
+See the [repository](https://github.com/CaptiveOrigins/onephylogeny) for documentation.

package/dist/canvas.d.ts

@@ -0,0 +1,19 @@
+import * as react from 'react';
+
+/** Makes tree markup open correctly on its own, in a browser or a drawing program. */
+declare function standaloneSvg(markup: string): string;
+type TreeCanvasProps = {
+    newick: string;
+    labelFor?: (tip: string) => string;
+    thresholds?: number[];
+    /** CSS height of the canvas. */
+    height?: string;
+    /** Where a saved SVG goes. By default the browser downloads it. */
+    onSaveSvg?: (svg: string) => void | Promise<void>;
+    /** How to print. By default `window.print()`, which does nothing in some Mac web views. */
+    onPrint?: () => void | Promise<void>;
+};
+/** The tree on a canvas: drag to pan, Ctrl/⌘ + wheel or pinch to zoom, `+` `-` `0` keys, Fit, Download SVG, Print (chart only). */
+declare function TreeCanvas({ newick, labelFor, thresholds, height, onSaveSvg, onPrint }: TreeCanvasProps): react.JSX.Element;
+
+export { TreeCanvas, type TreeCanvasProps, standaloneSvg };

package/dist/canvas.js

@@ -0,0 +1,132 @@
+"use client";
+import {
+  Icon
+} from "./chunk-YY252G72.js";
+import {
+  TreeFigure
+} from "./chunk-77BOVPO3.js";
+
+// src/canvas.tsx
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MIN_ZOOM = 0.25;
+var MAX_ZOOM = 8;
+var clampZoom = (k) => Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, k));
+var STANDALONE_STYLE = "<style>.ophy-tree-edge{fill:none;stroke:#91645d;stroke-width:1.2}.ophy-tree-tip{font:11px sans-serif;fill:#1d2330}.ophy-tree-support{font:8.5px sans-serif;fill:#5b6577}.ophy-tree-supported{fill:#1d6b47;font-weight:700}</style>";
+function standaloneSvg(markup) {
+  const open = markup.indexOf(">");
+  const head = markup.slice(0, open).replace(/\sstyle="[^"]*"/, "");
+  return `${head.includes("xmlns=") ? head : head.replace("<svg", '<svg xmlns="http://www.w3.org/2000/svg"')}>${STANDALONE_STYLE}${markup.slice(open + 1)}`;
+}
+function downloadInBrowser(svg) {
+  const url = URL.createObjectURL(new Blob([svg], { type: "image/svg+xml" }));
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = "tree.svg";
+  a.click();
+  URL.revokeObjectURL(url);
+}
+function TreeCanvas({ newick, labelFor, thresholds, height = "32rem", onSaveSvg, onPrint }) {
+  const canvas = useRef(null);
+  const [{ x, y, k }, setCamera] = useState({ x: 0, y: 0, k: 1 });
+  const drag = useRef(null);
+  const zoomBy = useCallback((factor, at) => {
+    setCamera((c) => {
+      const rect = canvas.current?.getBoundingClientRect();
+      const ax = at?.x ?? (rect ? rect.width / 2 : 0);
+      const ay = at?.y ?? (rect ? rect.height / 2 : 0);
+      const nk = clampZoom(c.k * factor);
+      return { k: nk, x: ax - (ax - c.x) * nk / c.k, y: ay - (ay - c.y) * nk / c.k };
+    });
+  }, []);
+  const fit = useCallback(() => {
+    setCamera((c) => {
+      const el = canvas.current;
+      const svg = el?.querySelector("svg");
+      if (!el || !svg) return { x: 0, y: 0, k: 1 };
+      const fullHeight = svg.getBoundingClientRect().height / c.k;
+      return { x: 0, y: 0, k: fullHeight ? clampZoom(Math.min(1, el.clientHeight / fullHeight)) : 1 };
+    });
+  }, []);
+  useEffect(() => {
+    const el = canvas.current;
+    if (!el) return;
+    const wheel = (e) => {
+      if (!e.ctrlKey && !e.metaKey) return;
+      e.preventDefault();
+      const rect = el.getBoundingClientRect();
+      zoomBy(Math.exp(-e.deltaY / 200), { x: e.clientX - rect.left, y: e.clientY - rect.top });
+    };
+    el.addEventListener("wheel", wheel, { passive: false });
+    return () => el.removeEventListener("wheel", wheel);
+  }, [zoomBy]);
+  useEffect(() => () => document.documentElement.removeAttribute("data-ophy-printing"), []);
+  const down = (e) => {
+    if (e.target.closest(".ophy-floating")) return;
+    drag.current = { id: e.pointerId, px: e.clientX, py: e.clientY };
+    e.currentTarget.setPointerCapture(e.pointerId);
+  };
+  const move = (e) => {
+    const d = drag.current;
+    if (!d || d.id !== e.pointerId) return;
+    const dx = e.clientX - d.px;
+    const dy = e.clientY - d.py;
+    drag.current = { ...d, px: e.clientX, py: e.clientY };
+    setCamera((c) => ({ ...c, x: c.x + dx, y: c.y + dy }));
+  };
+  const up = () => {
+    drag.current = null;
+  };
+  const keys = (e) => {
+    if (e.key === "+" || e.key === "=") zoomBy(1.25);
+    else if (e.key === "-") zoomBy(0.8);
+    else if (e.key === "0") fit();
+    else return;
+    e.preventDefault();
+  };
+  const save = () => {
+    const svg = canvas.current?.querySelector("svg.ophy-tree");
+    if (!svg) return;
+    const text = standaloneSvg(svg.outerHTML);
+    if (onSaveSvg) void onSaveSvg(text);
+    else downloadInBrowser(text);
+  };
+  const print = () => {
+    document.documentElement.setAttribute("data-ophy-printing", "");
+    if (onPrint) void onPrint();
+    else window.print();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: canvas,
+      className: "ophy-canvas",
+      style: { height },
+      tabIndex: 0,
+      role: "group",
+      "aria-label": "Tree canvas. Drag to pan. Press plus or minus to zoom, and 0 to fit.",
+      onPointerDown: down,
+      onPointerMove: move,
+      onPointerUp: up,
+      onPointerCancel: up,
+      onKeyDown: keys,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "ophy-canvas-content", style: { transform: `translate(${x}px, ${y}px) scale(${k})` }, children: /* @__PURE__ */ jsx(TreeFigure, { newick, ...labelFor ? { labelFor } : {}, ...thresholds ? { thresholds } : {} }) }),
+        /* @__PURE__ */ jsxs("div", { className: "ophy-floating", children: [
+          /* @__PURE__ */ jsx(ToolButton, { icon: "zoomIn", label: "Zoom in", onClick: () => zoomBy(1.25) }),
+          /* @__PURE__ */ jsx(ToolButton, { icon: "zoomOut", label: "Zoom out", onClick: () => zoomBy(0.8) }),
+          /* @__PURE__ */ jsx(ToolButton, { icon: "fit", label: "Fit", onClick: fit }),
+          /* @__PURE__ */ jsx(ToolButton, { icon: "download", label: "Download SVG", onClick: save }),
+          /* @__PURE__ */ jsx(ToolButton, { icon: "print", label: "Print", onClick: print })
+        ] })
+      ]
+    }
+  );
+}
+function ToolButton({ icon, label, onClick }) {
+  return /* @__PURE__ */ jsx("button", { type: "button", "aria-label": label, "data-tip": label, onClick, children: /* @__PURE__ */ jsx(Icon, { name: icon }) });
+}
+export {
+  TreeCanvas,
+  standaloneSvg
+};

package/dist/chunk-77BOVPO3.js

@@ -0,0 +1,456 @@
+// src/index.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var STATUS = {
+  consistent: { label: "Consistent", mark: "\u25CF" },
+  excluded_within_panel: { label: "Excluded within this panel", mark: "\xD7" },
+  not_evaluable: { label: "Not evaluable", mark: "\u2013" },
+  inconclusive: { label: "Inconclusive", mark: "?" }
+};
+var statusLabel = (status, labels) => labels?.[status] ?? STATUS[status].label;
+function StatusBadge({ status, labels }) {
+  return /* @__PURE__ */ jsxs("span", { className: `ophy-status ophy-status-${status}`, children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: STATUS[status].mark }),
+    " ",
+    statusLabel(status, labels)
+  ] });
+}
+var groupLabel = (panel, id) => panel.groups.find((g) => g.id === id)?.label ?? id;
+var ORDER = ["consistent", "inconclusive", "excluded_within_panel", "not_evaluable"];
+function summarizeResult(result, panel) {
+  const named = (status) => result.findings.filter((f) => f.status === status).map((f) => groupLabel(panel, f.group));
+  const consistent = named("consistent");
+  const untested = result.candidatesNotEvaluated.map((g) => groupLabel(panel, g));
+  if (result.findings.every((f) => f.status === "not_evaluable")) return "Not enough comparable data to evaluate any group";
+  const unknown = untested.length ? ` Not evaluated: ${untested.join(", ")}.` : "";
+  if (consistent.length === 1) return `Consistent with ${consistent[0]}.${unknown}`;
+  if (consistent.length) return `Can't separate: ${consistent.join(", ")}.${unknown}`;
+  if (result.novelty.closest) return `No evaluated group fits. Closest is ${groupLabel(panel, result.novelty.closest)}, which may mean an unsampled population.${unknown}`;
+  return "Inconclusive against this panel";
+}
+function CoverageBars({ panel, queryAligned, queryLabel = "This sample" }) {
+  const L = panel.reference.length;
+  const rowH = 26;
+  const labelW = 190;
+  const W = 700;
+  const x = (p) => labelW + p / L * (W - labelW - 8);
+  const queryWindows = [];
+  if (queryAligned) {
+    let start = -1;
+    for (let i = 0; i <= queryAligned.length; i++) {
+      const has = i < queryAligned.length && /[ACGTRYSWKMBDHVacgt]/.test(queryAligned[i]);
+      if (has && start < 0) start = i;
+      if (!has && start >= 0) {
+        queryWindows.push({ start, end: i });
+        start = -1;
+      }
+    }
+  }
+  const rows = [...queryAligned ? [{ id: "__q", label: queryLabel, windows: queryWindows }] : [], ...panel.groups.map((g) => ({ id: g.id, label: g.label, windows: g.coverage.flatMap((c) => c.columnsAtDepth.map(([start, end]) => ({ start, end }))) }))];
+  const H = rows.length * rowH + 24;
+  return /* @__PURE__ */ jsxs("svg", { className: "ophy-coverage", viewBox: `0 0 ${W} ${H}`, role: "img", "aria-label": `Coverage of each group across ${L} reference columns`, children: [
+    rows.map((r, i) => /* @__PURE__ */ jsxs("g", { transform: `translate(0 ${i * rowH})`, children: [
+      /* @__PURE__ */ jsx("text", { x: labelW - 8, y: 16, textAnchor: "end", className: "ophy-coverage-label", children: r.label }),
+      /* @__PURE__ */ jsx("rect", { x: x(0), y: 7, width: x(L) - x(0), height: 12, rx: 3, className: "ophy-coverage-track" }),
+      r.windows.map((w) => /* @__PURE__ */ jsx("rect", { x: x(w.start), y: 7, width: Math.max(2, x(w.end) - x(w.start)), height: 12, rx: 3, className: r.id === "__q" ? "ophy-coverage-query" : "ophy-coverage-group", children: /* @__PURE__ */ jsx("title", { children: `${r.label}: columns ${w.start + 1} to ${w.end}` }) }, w.start))
+    ] }, r.id)),
+    /* @__PURE__ */ jsx("text", { x: x(0), y: H - 6, className: "ophy-coverage-axis", children: "1" }),
+    /* @__PURE__ */ jsx("text", { x: x(L), y: H - 6, textAnchor: "end", className: "ophy-coverage-axis", children: L })
+  ] });
+}
+var PAIR_REASON = {
+  "decisive-sites": "Decisive sites agree",
+  "group-not-evaluable": "At least one group can't be compared here",
+  "no-sites-covered": "This sequence covers no site that separates them",
+  "too-few-decisive-sites": "Too few separating sites covered",
+  "sites-disagree": "Separating sites disagree",
+  "thin-group": "Sites favor one side, but the other has too few independent sites to rule out"
+};
+var PAIR_STATE = { resolved: "Resolved", not_resolved: "Not resolved", not_evaluable: "Not evaluable" };
+function PairTable({ result, panel }) {
+  if (!result.pairs.length) return null;
+  return /* @__PURE__ */ jsxs("table", { className: "ophy-table", children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("th", { children: "Pair" }),
+      /* @__PURE__ */ jsx("th", { children: "State" }),
+      /* @__PURE__ */ jsx("th", { children: "Sites covered" }),
+      /* @__PURE__ */ jsx("th", { children: "Why" })
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: result.pairs.map((p) => /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsxs("th", { scope: "row", children: [
+        groupLabel(panel, p.a),
+        " / ",
+        groupLabel(panel, p.b)
+      ] }),
+      /* @__PURE__ */ jsxs("td", { children: [
+        PAIR_STATE[p.state],
+        p.favors ? `: favors ${groupLabel(panel, p.favors)}` : ""
+      ] }),
+      /* @__PURE__ */ jsxs("td", { children: [
+        p.sitesCovered,
+        " (",
+        p.forA,
+        " and ",
+        p.forB,
+        p.neither ? `, ${p.neither} neither` : "",
+        ")"
+      ] }),
+      /* @__PURE__ */ jsx("td", { children: PAIR_REASON[p.reasonCode] })
+    ] }, `${p.a}|${p.b}`)) })
+  ] });
+}
+function ResultView({ result, panel, queryAligned, labels }) {
+  const findings = [...result.findings].sort((a, b) => ORDER.indexOf(a.status) - ORDER.indexOf(b.status));
+  return /* @__PURE__ */ jsxs("section", { className: "ophy-result", children: [
+    /* @__PURE__ */ jsx("h3", { children: summarizeResult(result, panel) }),
+    /* @__PURE__ */ jsxs("p", { className: "ophy-muted", children: [
+      "Tested against ",
+      panel.id,
+      " version ",
+      panel.version,
+      ", over ",
+      result.overlap,
+      " columns."
+    ] }),
+    result.outOfValidatedScope.length > 0 && /* @__PURE__ */ jsxs("p", { className: "ophy-warning", children: [
+      "Outside what this panel has been validated for: ",
+      result.outOfValidatedScope.join(". "),
+      "."
+    ] }),
+    /* @__PURE__ */ jsx(CoverageBars, { panel, ...queryAligned ? { queryAligned } : {} }),
+    /* @__PURE__ */ jsxs("table", { className: "ophy-table", children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { children: "Group" }),
+        /* @__PURE__ */ jsx("th", { children: "Status" }),
+        /* @__PURE__ */ jsx("th", { children: "Why" }),
+        /* @__PURE__ */ jsx("th", { children: "Nearest records" })
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: findings.map((f) => /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { scope: "row", children: groupLabel(panel, f.group) }),
+        /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(StatusBadge, { status: f.status, ...labels ? { labels } : {} }) }),
+        /* @__PURE__ */ jsx("td", { children: f.reason }),
+        /* @__PURE__ */ jsx("td", { children: f.evidence.join(", ") || "\u2013" })
+      ] }, f.group)) })
+    ] }),
+    /* @__PURE__ */ jsx(PairTable, { result, panel }),
+    result.novelty.neitherSideSites > 0 && /* @__PURE__ */ jsxs("p", { className: "ophy-muted", children: [
+      result.novelty.neitherSideSites,
+      " separating sites hold a base matching neither group."
+    ] }),
+    result.caveats.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("h4", { children: "What this can't tell you" }),
+      /* @__PURE__ */ jsx("ul", { className: "ophy-caveats", children: result.caveats.map((c) => /* @__PURE__ */ jsx("li", { children: c }, c)) })
+    ] })
+  ] });
+}
+function LineageCard({ result, panel, marker, title = "Maternal lineage", note = "Not evidence of where this animal was collected.", href }) {
+  return /* @__PURE__ */ jsxs("aside", { className: "ophy-card", children: [
+    /* @__PURE__ */ jsx("div", { className: "ophy-card-title", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "ophy-card-value", children: summarizeResult(result, panel) }),
+    /* @__PURE__ */ jsxs("div", { className: "ophy-muted", children: [
+      "Based on ",
+      marker,
+      ", compared with panel version ",
+      panel.version,
+      ". ",
+      note
+    ] }),
+    href && /* @__PURE__ */ jsx("a", { href, children: "See how we reached this" })
+  ] });
+}
+function PanelSummary({ panel }) {
+  return /* @__PURE__ */ jsxs("section", { children: [
+    /* @__PURE__ */ jsxs("table", { className: "ophy-table", children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { children: "Group" }),
+        /* @__PURE__ */ jsx("th", { children: "Region" }),
+        /* @__PURE__ */ jsx("th", { children: "Records" }),
+        /* @__PURE__ */ jsx("th", { children: "Can show location" }),
+        /* @__PURE__ */ jsx("th", { children: "Comparable in" }),
+        /* @__PURE__ */ jsx("th", { children: "Records still needed" })
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: panel.groups.map((g) => /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { scope: "row", children: g.label }),
+        /* @__PURE__ */ jsx("td", { children: g.region ?? "\u2013" }),
+        /* @__PURE__ */ jsx("td", { children: g.evidence.length }),
+        /* @__PURE__ */ jsx("td", { children: g.evidence.filter((e) => e.use === "lineage-and-location").length }),
+        /* @__PURE__ */ jsx("td", { children: g.coverage.filter((c) => c.columnsAtDepth.length).map((c) => c.window).join(", ") || "Nowhere yet" }),
+        /* @__PURE__ */ jsx("td", { children: g.coverage.filter((c) => c.recordsNeeded).map((c) => `${c.recordsNeeded} in ${c.window}`).join(", ") || "\u2013" })
+      ] }, g.id)) })
+    ] }),
+    /* @__PURE__ */ jsx(CoverageBars, { panel }),
+    /* @__PURE__ */ jsx("h4", { children: "What separates each pair" }),
+    /* @__PURE__ */ jsxs("table", { className: "ophy-table", children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { children: "Pair" }),
+        /* @__PURE__ */ jsx("th", { children: "Window" }),
+        /* @__PURE__ */ jsx("th", { children: "Sites" }),
+        /* @__PURE__ */ jsx("th", { children: "Records" }),
+        /* @__PURE__ */ jsx("th", { children: "Sites per side" })
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: panel.pairs.map((p) => /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsxs("th", { scope: "row", children: [
+          groupLabel(panel, p.a),
+          " / ",
+          groupLabel(panel, p.b)
+        ] }),
+        /* @__PURE__ */ jsx("td", { children: p.window }),
+        /* @__PURE__ */ jsx("td", { children: p.state === "not_evaluable" ? "Not evaluable" : p.sites.length }),
+        /* @__PURE__ */ jsxs("td", { children: [
+          p.records.a,
+          " and ",
+          p.records.b
+        ] }),
+        /* @__PURE__ */ jsxs("td", { children: [
+          p.blocks.a,
+          " and ",
+          p.blocks.b
+        ] })
+      ] }, `${p.a}|${p.b}|${p.window}`)) })
+    ] }),
+    panel.notCovered.length > 0 && /* @__PURE__ */ jsxs("p", { children: [
+      /* @__PURE__ */ jsx("strong", { children: "Not covered:" }),
+      " ",
+      panel.notCovered.join(", ")
+    ] }),
+    /* @__PURE__ */ jsxs("p", { className: "ophy-muted", children: [
+      "Checksum ",
+      panel.checksum
+    ] })
+  ] });
+}
+var pct = (a, b) => b ? `${a} of ${b}` : "\u2013";
+var SCHEME = {
+  "leave-one-record-out": "Each record (leak check only)",
+  "leave-one-haplotype-out": "Each exact haplotype",
+  "leave-one-block-out": "Each site (the default claim)",
+  "leave-one-study-out": "Each study",
+  "leave-one-group-out": "Each whole group"
+};
+function ClaimsView({ claims, panel }) {
+  const label = (id) => panel ? groupLabel(panel, id) : id;
+  const passed = claims.filter((c) => c.passed);
+  return /* @__PURE__ */ jsxs("section", { children: [
+    /* @__PURE__ */ jsx("h4", { children: "Claims tested" }),
+    /* @__PURE__ */ jsxs("p", { children: [
+      passed.length,
+      " of ",
+      claims.length,
+      " passed every gate. All are exploratory until tested on data that didn't shape this method."
+    ] }),
+    /* @__PURE__ */ jsxs("table", { className: "ophy-table", children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { children: "Pair" }),
+        /* @__PURE__ */ jsx("th", { children: "Window" }),
+        /* @__PURE__ */ jsx("th", { children: "Sites" }),
+        /* @__PURE__ */ jsx("th", { children: "Result" }),
+        /* @__PURE__ */ jsx("th", { children: "Stopped by" })
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: claims.map((c) => {
+        const failed = c.gates.filter((g) => g.ran && !g.passed);
+        return /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsxs("th", { scope: "row", children: [
+            label(c.a),
+            " / ",
+            label(c.b)
+          ] }),
+          /* @__PURE__ */ jsx("td", { children: c.window }),
+          /* @__PURE__ */ jsxs("td", { children: [
+            c.sites.a,
+            " and ",
+            c.sites.b
+          ] }),
+          /* @__PURE__ */ jsx("td", { children: c.passed ? `Passed, ${c.minColumns}+ columns` : "Not validated" }),
+          /* @__PURE__ */ jsx("td", { children: failed.map((g) => g.detail).join(". ") || "\u2013" })
+        ] }, `${c.a}|${c.b}|${c.window}`);
+      }) })
+    ] })
+  ] });
+}
+function ValidationView({ blocks, groups, ladder, claims, panel }) {
+  const noEvidence = groups.groups.reduce((sum, g) => sum + g.notEvaluable, 0);
+  return /* @__PURE__ */ jsxs("section", { children: [
+    /* @__PURE__ */ jsx("h4", { children: "Holding out each sampling site" }),
+    /* @__PURE__ */ jsxs("table", { className: "ophy-table", children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { children: "Group" }),
+        /* @__PURE__ */ jsx("th", { children: "Sites" }),
+        /* @__PURE__ */ jsx("th", { children: "True group consistent" }),
+        /* @__PURE__ */ jsx("th", { children: "Only the true group" }),
+        /* @__PURE__ */ jsx("th", { children: "Only the true group, all others compared" }),
+        /* @__PURE__ */ jsx("th", { children: "True group excluded" }),
+        /* @__PURE__ */ jsx("th", { children: "Inconclusive" }),
+        /* @__PURE__ */ jsx("th", { children: "Not evaluable" })
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: blocks.groups.map((g) => {
+        const s = blocks.sites?.find((x) => x.group === g.group);
+        return /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx("th", { scope: "row", children: g.group }),
+          /* @__PURE__ */ jsx("td", { children: s ? `${s.sitesRight} of ${s.sites} right${s.interval ? `, ${s.interval[0].toFixed(2)} to ${s.interval[1].toFixed(2)}` : ""}` : "\u2013" }),
+          /* @__PURE__ */ jsx("td", { children: pct(g.includedTruth, g.tested) }),
+          /* @__PURE__ */ jsx("td", { children: pct(g.onlyTruth, g.tested) }),
+          /* @__PURE__ */ jsx("td", { children: pct(g.onlyTruthAllEvaluated, g.tested) }),
+          /* @__PURE__ */ jsx("td", { children: pct(g.excludedTruth, g.tested) }),
+          /* @__PURE__ */ jsx("td", { children: pct(g.inconclusive, g.tested) }),
+          /* @__PURE__ */ jsx("td", { children: pct(g.notEvaluable, g.tested) })
+        ] }, g.group);
+      }) })
+    ] }),
+    blocks.untestedGroups.length > 0 && /* @__PURE__ */ jsxs("p", { className: "ophy-warning", children: [
+      "Not tested, because all their records come from one site: ",
+      blocks.untestedGroups.join(", "),
+      "."
+    ] }),
+    blocks.diagnostics.map((d) => /* @__PURE__ */ jsx("p", { className: "ophy-warning", children: d.message }, d.code)),
+    /* @__PURE__ */ jsx("h4", { children: "Removing each whole group" }),
+    /* @__PURE__ */ jsxs("p", { children: [
+      groups.falseConsistent ?? 0,
+      " of ",
+      groups.tested,
+      " records were wrongly called consistent with a remaining group. Lower is better, and this is how the panel behaves when a sample's true population is missing.",
+      noEvidence > 0 ? ` ${noEvidence} of them couldn't be compared with any remaining group, so they say nothing either way.` : ""
+    ] }),
+    ladder && ladder.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("h4", { children: "What was held out" }),
+      /* @__PURE__ */ jsx("p", { className: "ophy-muted", children: "Each row answers a different question, so these are never averaged." }),
+      /* @__PURE__ */ jsxs("table", { className: "ophy-table", children: [
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx("th", { children: "Held out" }),
+          /* @__PURE__ */ jsx("th", { children: "Tested" }),
+          /* @__PURE__ */ jsx("th", { children: "True group consistent" }),
+          /* @__PURE__ */ jsx("th", { children: "True group excluded" }),
+          /* @__PURE__ */ jsx("th", { children: "Not evaluable" })
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { children: ladder.map((r) => /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx("th", { scope: "row", children: SCHEME[r.scheme] }),
+          /* @__PURE__ */ jsx("td", { children: r.tested }),
+          /* @__PURE__ */ jsx("td", { children: r.groups.reduce((n, g) => n + g.includedTruth, 0) }),
+          /* @__PURE__ */ jsx("td", { children: r.groups.reduce((n, g) => n + g.excludedTruth, 0) }),
+          /* @__PURE__ */ jsx("td", { children: r.groups.reduce((n, g) => n + g.notEvaluable, 0) })
+        ] }, r.scheme)) })
+      ] })
+    ] }),
+    claims && /* @__PURE__ */ jsx(ClaimsView, { claims, ...panel ? { panel } : {} }),
+    /* @__PURE__ */ jsx("p", { className: "ophy-muted", children: "These are simple counts on a small reference panel, and they aren't calibrated probabilities." })
+  ] });
+}
+function EventLog({ events }) {
+  return /* @__PURE__ */ jsx("ol", { className: "ophy-log", "aria-label": "Run log", children: events.map((e, i) => /* @__PURE__ */ jsxs("li", { className: `ophy-log-${e.level}`, children: [
+    /* @__PURE__ */ jsx("time", { children: e.at.slice(11, 19) }),
+    " ",
+    /* @__PURE__ */ jsx("span", { className: "ophy-log-step", children: e.step }),
+    " ",
+    e.message
+  ] }, i)) });
+}
+function parseNewickForDisplay(text) {
+  let i = 0;
+  const s = text.trim().replace(/;$/, "");
+  const node = () => {
+    const children = [];
+    if (s[i] === "(") {
+      i++;
+      children.push(node());
+      while (s[i] === ",") {
+        i++;
+        children.push(node());
+      }
+      if (s[i] !== ")") throw new Error("Unbalanced Newick text");
+      i++;
+    }
+    let label = "";
+    while (i < s.length && !",():".includes(s[i])) label += s[i++];
+    let length = 0;
+    if (s[i] === ":") {
+      i++;
+      let num = "";
+      while (i < s.length && !",()".includes(s[i])) num += s[i++];
+      length = Number(num) || 0;
+    }
+    return { label, length, children };
+  };
+  return node();
+}
+function TreeFigure({ newick, labelFor, thresholds }) {
+  const root = parseNewickForDisplay(newick);
+  const tips = [];
+  let maxX = 0;
+  const pos = /* @__PURE__ */ new Map();
+  const walk = (n, x) => {
+    maxX = Math.max(maxX, x);
+    let y;
+    if (!n.children.length) {
+      y = tips.length;
+      tips.push(n);
+    } else {
+      const ys = n.children.map((c) => walk(c, x + c.length));
+      y = (ys[0] + ys[ys.length - 1]) / 2;
+    }
+    pos.set(n, { x, y });
+    return y;
+  };
+  walk(root, 0);
+  const rowH = 18;
+  const treeW = 460;
+  const labelW = 300;
+  const px = (x) => 12 + (maxX ? x / maxX : 0) * treeW;
+  const py = (y) => 14 + y * rowH;
+  const lines = [];
+  const labels = [];
+  const pass = (label) => {
+    if (!thresholds?.length) return false;
+    const parts = label.split("/").map(Number);
+    return parts.length === thresholds.length && parts.every((v, k) => v >= thresholds[k]);
+  };
+  for (const [n, p] of pos) {
+    for (const c of n.children) {
+      const q = pos.get(c);
+      lines.push({ key: `${p.x}-${q.y}-${q.x}`, d: `M${px(p.x)} ${py(p.y)}V${py(q.y)}H${px(q.x)}` });
+    }
+    if (n.children.length && n.label) labels.push({ key: `s${p.x}${p.y}`, x: px(p.x) + 3, y: py(p.y) - 3, text: n.label, passes: pass(n.label) });
+  }
+  return /* @__PURE__ */ jsxs("svg", { className: "ophy-tree", viewBox: `0 0 ${treeW + labelW + 24} ${tips.length * rowH + 24}`, role: "img", "aria-label": `Tree with ${tips.length} tips`, children: [
+    lines.map((l) => /* @__PURE__ */ jsx("path", { d: l.d, className: "ophy-tree-edge" }, l.key)),
+    labels.map((l) => /* @__PURE__ */ jsx("text", { x: l.x, y: l.y, className: l.passes ? "ophy-tree-support ophy-tree-supported" : "ophy-tree-support", children: l.text }, l.key)),
+    tips.map((t) => {
+      const p = pos.get(t);
+      return /* @__PURE__ */ jsx("text", { x: px(p.x) + 6, y: py(p.y) + 4, className: "ophy-tree-tip", children: labelFor?.(t.label) ?? t.label }, t.label);
+    })
+  ] });
+}
+function OutgroupLadderView({ steps, suggested, caveat }) {
+  return /* @__PURE__ */ jsxs("section", { children: [
+    /* @__PURE__ */ jsx("ol", { className: "ophy-ladder", children: steps.map((s) => /* @__PURE__ */ jsxs("li", { className: s.taxon.name === suggested ? "ophy-ladder-suggested" : "", children: [
+      /* @__PURE__ */ jsx("strong", { children: s.taxon.name }),
+      " ",
+      /* @__PURE__ */ jsxs("span", { className: "ophy-muted", children: [
+        "(",
+        s.taxon.rank || "no rank",
+        ")"
+      ] }),
+      ": ",
+      s.records,
+      " records, ",
+      s.species.length,
+      " species",
+      s.sufficient ? "" : ". Not enough, so looking further out"
+    ] }, s.taxon.name)) }),
+    /* @__PURE__ */ jsx("p", { className: "ophy-muted", children: caveat })
+  ] });
+}
+
+export {
+  statusLabel,
+  StatusBadge,
+  summarizeResult,
+  CoverageBars,
+  PairTable,
+  ResultView,
+  LineageCard,
+  PanelSummary,
+  ClaimsView,
+  ValidationView,
+  EventLog,
+  parseNewickForDisplay,
+  TreeFigure,
+  OutgroupLadderView
+};

package/dist/chunk-YY252G72.js

@@ -0,0 +1,89 @@
+// src/icons.tsx
+import { jsx } from "react/jsx-runtime";
+var 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"
+};
+function Icon({ name, size = 16, className, ...rest }) {
+  return /* @__PURE__ */ 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: ["ophy-icon", className].filter(Boolean).join(" "),
+      ...rest,
+      children: /* @__PURE__ */ jsx("path", { d: ICON_PATHS[name] })
+    }
+  );
+}
+
+export {
+  ICON_PATHS,
+  Icon
+};

package/dist/icons.d.ts

@@ -0,0 +1,80 @@
+import * as react from 'react';
+import { SVGProps } from 'react';
+
+/**
+ * The OneOrigin suite's line icons (brand/README.md), the same in OnePedigree, OneTaxonomy and
+ * OnePhylogeny: 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.
+ */
+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";
+};
+type IconName = keyof typeof ICON_PATHS;
+declare function Icon({ name, size, className, ...rest }: {
+    name: IconName;
+    size?: number;
+} & Omit<SVGProps<SVGSVGElement>, 'name'>): react.JSX.Element;
+
+export { ICON_PATHS, Icon, type IconName };

package/dist/icons.js

@@ -0,0 +1,8 @@
+import {
+  ICON_PATHS,
+  Icon
+} from "./chunk-YY252G72.js";
+export {
+  ICON_PATHS,
+  Icon
+};

package/dist/index.d.ts

@@ -0,0 +1,86 @@
+import * as react from 'react';
+import { ClaimReport, Panel, RunEvent, FindingStatus, Result, ValidationReport } from '@captiveorigins/onephylogeny-core';
+
+type Labels = Partial<Record<FindingStatus, string>>;
+declare const statusLabel: (status: FindingStatus, labels?: Labels) => string;
+/** A status always has words and a symbol, never color alone. */
+declare function StatusBadge({ status, labels }: {
+    status: FindingStatus;
+    labels?: Labels;
+}): react.JSX.Element;
+/** The headline in plain words, including when the honest answer is that nothing can be said. */
+declare function summarizeResult(result: Result, panel: Panel): string;
+/** Coverage across the reference: why a group can or can't be compared with this sample. */
+declare function CoverageBars({ panel, queryAligned, queryLabel }: {
+    panel: Panel;
+    queryAligned?: string;
+    queryLabel?: string;
+}): react.JSX.Element;
+/** Whether this sequence separates each pair of groups. "Not resolved" is a real answer. */
+declare function PairTable({ result, panel }: {
+    result: Result;
+    panel: Panel;
+}): react.JSX.Element | null;
+/** Everything behind a conclusion: each group, its status, and why. */
+declare function ResultView({ result, panel, queryAligned, labels }: {
+    result: Result;
+    panel: Panel;
+    queryAligned?: string;
+    labels?: Labels;
+}): react.JSX.Element;
+/** The calm version for a record page: one conclusion and a link to the detail. */
+declare function LineageCard({ result, panel, marker, title, note, href }: {
+    result: Result;
+    panel: Panel;
+    marker: string;
+    title?: string;
+    note?: string;
+    href?: string;
+}): react.JSX.Element;
+declare function PanelSummary({ panel }: {
+    panel: Panel;
+}): react.JSX.Element;
+/** A claim is one pair of groups in one window. Every gate shows, so a failed claim says what stopped it. */
+declare function ClaimsView({ claims, panel }: {
+    claims: ClaimReport[];
+    panel?: Panel;
+}): react.JSX.Element;
+declare function ValidationView({ blocks, groups, ladder, claims, panel }: {
+    blocks: ValidationReport;
+    groups: ValidationReport;
+    ladder?: ValidationReport[];
+    claims?: ClaimReport[];
+    panel?: Panel;
+}): react.JSX.Element;
+declare function EventLog({ events }: {
+    events: RunEvent[];
+}): react.JSX.Element;
+type TreeNode = {
+    label: string;
+    length: number;
+    children: TreeNode[];
+};
+/** Reads Newick for display only. Science lives elsewhere: a tree exported to OneTaxonomy uses its parser and checks. */
+declare function parseNewickForDisplay(text: string): TreeNode;
+/** A rectangular tree. Support labels stay as the source wrote them, such as 95.1/96. */
+declare function TreeFigure({ newick, labelFor, thresholds }: {
+    newick: string;
+    labelFor?: (tip: string) => string;
+    thresholds?: number[];
+}): react.JSX.Element;
+type LadderStep = {
+    taxon: {
+        name: string;
+        rank: string;
+    };
+    records: number;
+    species: string[];
+    sufficient: boolean;
+};
+declare function OutgroupLadderView({ steps, suggested, caveat }: {
+    steps: LadderStep[];
+    suggested?: string;
+    caveat: string;
+}): react.JSX.Element;
+
+export { ClaimsView, CoverageBars, EventLog, type Labels, type LadderStep, LineageCard, OutgroupLadderView, PairTable, PanelSummary, ResultView, StatusBadge, TreeFigure, type TreeNode, ValidationView, parseNewickForDisplay, statusLabel, summarizeResult };

package/dist/index.js

@@ -0,0 +1,32 @@
+import {
+  ClaimsView,
+  CoverageBars,
+  EventLog,
+  LineageCard,
+  OutgroupLadderView,
+  PairTable,
+  PanelSummary,
+  ResultView,
+  StatusBadge,
+  TreeFigure,
+  ValidationView,
+  parseNewickForDisplay,
+  statusLabel,
+  summarizeResult
+} from "./chunk-77BOVPO3.js";
+export {
+  ClaimsView,
+  CoverageBars,
+  EventLog,
+  LineageCard,
+  OutgroupLadderView,
+  PairTable,
+  PanelSummary,
+  ResultView,
+  StatusBadge,
+  TreeFigure,
+  ValidationView,
+  parseNewickForDisplay,
+  statusLabel,
+  summarizeResult
+};

package/package.json

@@ -1,6 +1,67 @@
 {
   "name": "@captiveorigins/onephylogeny-react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0-alpha.1",
+  "description": "OnePhylogeny for React: server-renderable views of sample results, panel coverage, validation, run logs, outgroup suggestions and a compact lineage card.",
+  "keywords": [
+    "phylogenetics",
+    "react",
+    "reference-panel"
+  ],
+  "homepage": "https://github.com/CaptiveOrigins/onephylogeny#readme",
+  "bugs": {
+    "url": "https://github.com/CaptiveOrigins/onephylogeny/issues"
+  },
+  "license": "PolyForm-Noncommercial-1.0.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/CaptiveOrigins/onephylogeny.git",
+    "directory": "packages/react"
+  },
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./canvas": {
+      "types": "./dist/canvas.d.ts",
+      "import": "./dist/canvas.js"
+    },
+    "./icons": {
+      "types": "./dist/icons.d.ts",
+      "import": "./dist/icons.js"
+    },
+    "./styles.css": "./src/styles.css"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src/styles.css",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=22"
+  },
+  "dependencies": {
+    "@captiveorigins/onephylogeny-core": "^0.1.0-alpha.1"
+  },
+  "peerDependencies": {
+    "react": "^19"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "scripts": {
+    "build": "tsup src/index.tsx src/canvas.tsx src/icons.tsx --format esm --dts --clean --target es2022 --external react",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  }
 }

package/src/styles.css

@@ -0,0 +1,52 @@
+.ophy-muted { color: var(--ophy-muted, #5b6577); font-size: 0.92em; }
+.ophy-warning { color: var(--ophy-warning, #8a5a14); }
+.ophy-table { border-collapse: collapse; width: 100%; font-size: 13px; margin: 8px 0; }
+.ophy-table th, .ophy-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--ophy-border, #eaddd6); vertical-align: top; font-weight: 400; }
+.ophy-table thead th { font-weight: 600; color: var(--ophy-muted, #5b6577); }
+.ophy-table tbody th { font-weight: 600; }
+.ophy-status { display: inline-block; white-space: nowrap; padding: 1px 8px; border-radius: 999px; border: 1px solid currentColor; font-size: 12px; }
+.ophy-status-consistent { color: var(--ophy-good, #1d6b47); }
+.ophy-status-excluded_within_panel { color: var(--ophy-muted, #5b6577); }
+.ophy-status-not_evaluable { color: var(--ophy-muted, #5b6577); border-style: dashed; }
+.ophy-status-inconclusive { color: var(--ophy-warning, #8a5a14); }
+.ophy-coverage { width: 100%; max-width: 760px; display: block; margin: 8px 0; }
+.ophy-coverage-label { font-size: 12px; fill: currentColor; }
+.ophy-coverage-axis { font-size: 10px; fill: var(--ophy-muted, #5b6577); }
+.ophy-coverage-track { fill: var(--ophy-border, #eaddd6); opacity: 0.5; }
+.ophy-coverage-group { fill: var(--ophy-ink, #91645d); }
+.ophy-coverage-query { fill: var(--ophy-accent, #cf8137); }
+.ophy-caveats { margin: 4px 0; padding-inline-start: 18px; font-size: 13px; }
+.ophy-card { border: 1px solid var(--ophy-border, #eaddd6); border-radius: 10px; padding: 12px 14px; max-width: 440px; }
+.ophy-card-title { font-size: 12px; color: var(--ophy-muted, #5b6577); }
+.ophy-card-value { font-size: 17px; font-weight: 600; margin: 2px 0 6px; }
+.ophy-log { list-style: none; margin: 0; padding: 8px; font: 12px/1.5 ui-monospace, Menlo, monospace; max-height: 260px; overflow: auto; border: 1px solid var(--ophy-border, #eaddd6); border-radius: 8px; }
+.ophy-log time, .ophy-log-step { color: var(--ophy-muted, #5b6577); }
+.ophy-log-warning { color: var(--ophy-warning, #8a5a14); }
+.ophy-log-error { color: var(--ophy-flag, #a23a3d); font-weight: 600; }
+.ophy-tree { width: 100%; display: block; color: inherit; }
+.ophy-tree-edge { fill: none; stroke: var(--ophy-ink, #91645d); stroke-width: 1.2; }
+.ophy-tree-tip { font-size: 11px; fill: currentColor; }
+.ophy-tree-support { font-size: 8.5px; fill: var(--ophy-muted, #5b6577); }
+.ophy-tree-supported { fill: var(--ophy-good, #1d6b47); font-weight: 700; }
+.ophy-ladder { padding-inline-start: 20px; margin: 6px 0; }
+.ophy-ladder-suggested { font-weight: 600; }
+/* Tree canvas and floating toolbar, as in OnePedigree and OneTaxonomy. */
+.ophy-icon { flex: none; }
+.ophy-canvas { position: relative; overflow: hidden; touch-action: none; cursor: grab; border: 1px solid var(--ophy-border, #eaddd6); border-radius: 10px; }
+.ophy-canvas:active { cursor: grabbing; }
+.ophy-canvas:focus-visible { outline: 2px solid var(--ophy-accent, #cf8137); outline-offset: 1px; }
+.ophy-canvas-content { transform-origin: 0 0; will-change: transform; }
+.ophy-floating { position: absolute; top: 8px; right: 8px; z-index: 1; display: flex; gap: 4px; }
+.ophy-floating button { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; cursor: pointer; }
+.ophy-floating [data-tip] { position: relative; }
+.ophy-floating [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: var(--ophy-ink, #91645d); color: #fff; font-size: 12px; line-height: 1.3;
+}
+@media print {
+  html[data-ophy-printing] body * { visibility: hidden; }
+  html[data-ophy-printing] .ophy-canvas, html[data-ophy-printing] .ophy-canvas * { visibility: visible; }
+  html[data-ophy-printing] .ophy-canvas { position: absolute; inset: 0; height: auto !important; overflow: visible; border: 0; }
+  html[data-ophy-printing] .ophy-canvas-content { transform: none !important; }
+  .ophy-floating { display: none; }
+}