@captiveorigins/onetaxonomy-react 0.0.0-stage → 0.1.0-alpha.0

package/LICENSE

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

package/README.md

@@ -1,3 +1,22 @@
-# Temporary Holding Version
+# @captiveorigins/onetaxonomy-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.
+React components for OneTaxonomy: a server-renderable SVG tree, an accessible keyboard outline of the same tree, and an explorer with undo/redo. Every interaction is a view action from `@captiveorigins/onetaxonomy-core`, so the scientific data never changes and views can be saved, shared and replayed.
+
+```tsx
+import { createView, indexDataset } from '@captiveorigins/onetaxonomy-core'
+import { Explorer } from '@captiveorigins/onetaxonomy-react'
+import '@captiveorigins/onetaxonomy-react/styles.css'
+
+const data = indexDataset(snapshot)
+const view = createView(data, { id: 'turtles', title: 'Turtles', target: { kind: 'classification', id: 'my-classification' } })
+
+<Explorer dataset={data} initialView={view} title="Turtles" onViewChange={save} />
+```
+
+- **`TreeView`**: SVG only, no effects: renders on the server. `role="img"` with a title and a description that says whether it is a classification or a phylogeny and how much is shown. Stable `ot-*` classes and `data-*` states (status, rank, collapsed, selected); extinct taxa are marked †.
+- **`TreeOutline`**: the WAI-ARIA tree pattern: one tab stop, arrows, Right/Left to open/close, Home/End, type-ahead, Space to select, **Alt+Up/Down to reorder** (the keyboard alternative to dragging). Folded descendants are announced ("12 not shown").
+- **`Explorer`**: toolbar (undo, redo, expand/collapse all, layout, living/extinct/unknown filter), drawing, outline and inspector (rank, status, highlights with *clade* or *group* and the hypothesis they were assessed against, flip children, show only this branch). Layouts the data can't support stay disabled with the reason. All text is replaceable through `labels`.
+- **`useTaxonomyView`**: the headless state (view, projection, dispatch, undo/redo) for your own UI.
+- Styles are optional (`styles.css`, CSS custom properties, dark mode, reduced motion).
+
+Try it: `pnpm build && pnpm --filter @captiveorigins/onetaxonomy-playground build`, then open `apps/playground/dist/index.html`.

package/dist/Explorer.d.ts

@@ -0,0 +1,48 @@
+import { type DatasetIndex, type Highlight, type Id, type LayoutKind, type Projection, type TaxonomicView, type TraitSet, type ViewAction } from '@captiveorigins/onetaxonomy-core';
+import { type TreeLayout } from '@captiveorigins/onetaxonomy-layout';
+import { type ReactNode } from 'react';
+export type UseTaxonomyView = {
+    view: TaxonomicView;
+    projection: Projection;
+    dispatch: (action: ViewAction) => void;
+    undo: () => void;
+    redo: () => void;
+    canUndo: boolean;
+    canRedo: boolean;
+    /** The last refused action's reason (e.g. a layout the data can't support). */
+    error: string | null;
+};
+/** View state with undo/redo. Every change goes through the pure core reducer. */
+export declare function useTaxonomyView(dataset: DatasetIndex, initial: TaxonomicView, { onChange }?: {
+    onChange?: (view: TaxonomicView) => void;
+}): UseTaxonomyView;
+/** Lays out a projection for a view's layout kind (sunburst is drawn as a rectangular outline here). */
+export declare function layoutFor(projection: Projection, kind: LayoutKind): TreeLayout;
+export type ExplorerLabels = Record<'undo' | 'redo' | 'expandAll' | 'collapseAll' | 'rotate' | 'layout' | 'status' | 'allStatuses' | 'outline' | 'details' | 'nothingSelected' | 'clade' | 'group' | 'hidden' | 'rank' | 'lifeStatus' | 'focus' | 'unfocus' | 'zoomIn' | 'zoomOut' | 'fit' | 'download' | 'print' | 'canvas' | 'controls' | 'dragHint' | 'overlays' | 'support' | 'extinction' | 'trait' | 'noTrait' | 'noStatedValue' | 'mixed' | 'weakSupport' | 'selection' | 'checkClade' | 'addHighlight' | 'highlightName' | 'checkAgainst' | 'clearSelection' | 'remove' | 'multiHint' | 'downloadSvg' | 'downloadPng' | 'downloadView' | 'about' | 'sources' | 'references' | 'synonyms' | 'commonNames' | 'age' | 'branchLength' | 'unmapped' | 'traits', string>;
+export type ExplorerProps = {
+    dataset: DatasetIndex;
+    initialView: TaxonomicView;
+    title: string;
+    /** Height of the drawing area (CSS length). Default 32rem. */
+    height?: string;
+    labels?: Partial<ExplorerLabels>;
+    onViewChange?: (view: TaxonomicView) => void;
+    /** Extra content in the inspector for the selected node (e.g. a link to its page). */
+    renderDetails?: (id: Id) => ReactNode;
+};
+/**
+ * Interactive explorer: the drawing, the accessible outline, a toolbar (undo,
+ * redo, expand/collapse, flip, layout, life-status filter) and an inspector. Every
+ * change is a view action over the pinned snapshot; the data itself never changes.
+ */
+export declare function Explorer({ dataset, initialView, title, height, labels: custom, onViewChange, renderDetails }: ExplorerProps): import("react").JSX.Element;
+/** What the drawing is (classification vs phylogeny) and what each highlight is. */
+export declare function Legend({ layout, highlights, labels: custom, trait, support, onRemoveHighlight, }: {
+    layout: TreeLayout;
+    highlights: Highlight[];
+    labels?: Partial<Pick<ExplorerLabels, 'clade' | 'group' | 'noStatedValue' | 'weakSupport' | 'mixed' | 'remove'>>;
+    /** The trait set the drawing is colored by (its states become legend entries). */
+    trait?: TraitSet | undefined;
+    support?: boolean;
+    onRemoveHighlight?: (id: Id) => void;
+}): import("react").JSX.Element;

package/dist/Explorer.js

@@ -0,0 +1,317 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createHistory, describeAssessment, describeView, makeHighlight, dispatch as dispatchAction, inspectNode, nodeOverlays, serializeView, layoutProblem, projectView, redo as redoHistory, undo as undoHistory, } from '@captiveorigins/onetaxonomy-core';
+import { radial, rectangular } from '@captiveorigins/onetaxonomy-layout';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { dropOrder, drawnSubtree } from './drag.js';
+import { citationLine, disclosureLines, downloadBlob, standaloneSvg, svgToPng } from './export.js';
+import { Icon } from './icons.js';
+import { TreeOutline } from './TreeOutline.js';
+import { treeViewBox, TreeView } from './TreeView.js';
+/** View state with undo/redo. Every change goes through the pure core reducer. */
+export function useTaxonomyView(dataset, initial, { onChange } = {}) {
+    const [history, setHistory] = useState(() => createHistory(initial));
+    const [error, setError] = useState(null);
+    const update = useCallback((next) => setHistory((h) => {
+        const n = next(h);
+        if (n !== h)
+            onChange?.(n.present);
+        return n;
+    }), [onChange]);
+    const dispatch = useCallback((action) => {
+        try {
+            // Validate outside the state updater so the error can be shown.
+            dispatchAction(history, action, dataset);
+            setError(null);
+            update((h) => dispatchAction(h, action, dataset));
+        }
+        catch (e) {
+            setError(e.message);
+        }
+    }, [dataset, history, update]);
+    const projection = useMemo(() => projectView(dataset, history.present), [dataset, history.present]);
+    return {
+        view: history.present,
+        projection,
+        dispatch,
+        undo: () => update(undoHistory),
+        redo: () => update(redoHistory),
+        canUndo: history.past.length > 0,
+        canRedo: history.future.length > 0,
+        error,
+    };
+}
+/** Lays out a projection for a view's layout kind (sunburst is drawn as a rectangular outline here). */
+export function layoutFor(projection, kind) {
+    if (kind === 'radial')
+        return radial(projection);
+    if (kind === 'phylogram' || kind === 'time')
+        return rectangular(projection, { scale: kind, width: 640 });
+    return rectangular(projection);
+}
+const LABELS = {
+    undo: 'Undo',
+    redo: 'Redo',
+    expandAll: 'Expand all',
+    collapseAll: 'Collapse all',
+    rotate: 'Flip children',
+    layout: 'Layout',
+    status: 'Show',
+    allStatuses: 'Living, extinct and unknown',
+    outline: 'Tree outline',
+    details: 'Details',
+    nothingSelected: 'Choose a taxon in the tree or the outline.',
+    clade: 'Clade',
+    group: 'Group',
+    hidden: 'not shown',
+    rank: 'Rank',
+    lifeStatus: 'Status',
+    focus: 'Show only this branch',
+    unfocus: 'Show everything',
+    zoomIn: 'Zoom in',
+    zoomOut: 'Zoom out',
+    fit: 'Fit to view',
+    download: 'Download',
+    print: 'Print',
+    canvas: 'Tree drawing: drag to pan, Ctrl or ⌘ + scroll to zoom, drag a taxon to reorder it among its siblings, double-click to fold',
+    controls: 'Drawing controls',
+    dragHint: 'Drag a taxon up or down to reorder it among its siblings; double-click a branch to fold it.',
+    overlays: 'Overlays',
+    support: 'Support values',
+    extinction: 'Extinct and fossils',
+    trait: 'Color by',
+    noTrait: 'No trait',
+    noStatedValue: 'No stated value',
+    mixed: 'Mixed states',
+    weakSupport: 'Weak support (dashed)',
+    selection: 'Selected',
+    checkClade: 'Is this a clade?',
+    addHighlight: 'Highlight',
+    highlightName: 'Name',
+    checkAgainst: 'Check against',
+    clearSelection: 'Clear selection',
+    remove: 'Remove',
+    multiHint: 'Shift-click (or Ctrl/⌘) to select several taxa and check whether they form a clade.',
+    downloadSvg: 'Drawing (SVG)',
+    downloadPng: 'Image (PNG)',
+    downloadView: 'View file (JSON)',
+    about: 'About this diagram',
+    sources: 'Sources',
+    references: 'References',
+    synonyms: 'Synonyms',
+    commonNames: 'Common names',
+    age: 'Age',
+    branchLength: 'Branch length',
+    unmapped: 'Not linked to a named taxon (a sample, population or unnamed lineage).',
+    traits: 'Traits',
+};
+/** Prints only this drawing: everything else on the page is hidden while printing. */
+function printDrawing(el) {
+    if (!el)
+        return window.print();
+    el.setAttribute('data-ot-printing', '');
+    document.documentElement.setAttribute('data-ot-printing', '');
+    const done = () => {
+        el.removeAttribute('data-ot-printing');
+        document.documentElement.removeAttribute('data-ot-printing');
+        window.removeEventListener('afterprint', done);
+    };
+    window.addEventListener('afterprint', done);
+    window.print();
+}
+const LAYOUTS = ['rectangular', 'radial', 'phylogram', 'time'];
+const STATUS_FILTERS = [{ value: 'all' }, { value: 'extant', statuses: ['extant'] }, { value: 'extinct', statuses: ['extinct'] }, { value: 'unknown', statuses: ['unknown'] }];
+/**
+ * Interactive explorer: the drawing, the accessible outline, a toolbar (undo,
+ * redo, expand/collapse, flip, layout, life-status filter) and an inspector. Every
+ * change is a view action over the pinned snapshot; the data itself never changes.
+ */
+export function Explorer({ dataset, initialView, title, height = '32rem', labels: custom, onViewChange, renderDetails }) {
+    const labels = { ...LABELS, ...custom };
+    const t = useTaxonomyView(dataset, initialView, onViewChange ? { onChange: onViewChange } : {});
+    const { view, projection, dispatch } = t;
+    const layout = useMemo(() => layoutFor(projection, view.layout.kind), [projection, view.layout.kind]);
+    const selected = view.selected[0] ?? null;
+    const node = selected ? projection.nodes.find((n) => n.id === selected) : undefined;
+    const statusValue = STATUS_FILTERS.find((f) => JSON.stringify(f.statuses ?? null) === JSON.stringify(view.filter.status ?? null))?.value ?? 'all';
+    const hidden = (n) => `${n} ${labels.hidden}`;
+    const marks = useMemo(() => nodeOverlays(dataset, view, projection, { mixedLabel: labels.mixed }), [dataset, view, projection, labels.mixed]);
+    const disclosure = useMemo(() => describeView(dataset, view, projection), [dataset, view, projection]);
+    const details = useMemo(() => (selected && node ? inspectNode(dataset, view, selected) : null), [dataset, view, selected, node]);
+    const traits = dataset.snapshot.traits ?? [];
+    const hasSupport = projection.nodes.some((n) => n.support !== undefined);
+    const hasExtinct = projection.nodes.some((n) => n.status === 'extinct');
+    const overlays = view.overlays ?? {};
+    const setOverlays = (next) => dispatch({ type: 'setOverlays', overlays: next });
+    const choose = (id, additive = false) => dispatch({ type: 'select', nodes: additive ? (view.selected.includes(id) ? view.selected.filter((x) => x !== id) : [...view.selected, id]) : [id] });
+    // Pan and zoom (same controls as OnePedigree): the box resets when the layout or focus changes.
+    const full = useMemo(() => treeViewBox(layout), [layout]);
+    const [box, setBox] = useState(null);
+    const shown = box ?? full;
+    useEffect(() => setBox(null), [view.layout.kind, view.focus, view.target.id]);
+    const canvas = useRef(null);
+    const pointer = useRef(null);
+    const [drag, setDrag] = useState(null);
+    const scale = () => {
+        const r = canvas.current?.querySelector('svg.ot-root')?.getBoundingClientRect();
+        if (!r || !r.width || !r.height)
+            return 1;
+        return Math.max(shown.width / r.width, shown.height / r.height);
+    };
+    const zoom = (factor) => {
+        const cx = shown.x + shown.width / 2;
+        const cy = shown.y + shown.height / 2;
+        setBox({ x: cx - (shown.width * factor) / 2, y: cy - (shown.height * factor) / 2, width: shown.width * factor, height: shown.height * factor });
+    };
+    const pan = (fx, fy) => setBox({ ...shown, x: shown.x + shown.width * fx, y: shown.y + shown.height * fy });
+    const allChildren = (parent) => view.order[parent] ?? viewChildren(dataset, view, parent);
+    const move = (id, direction) => {
+        const n = projection.nodes.find((x) => x.id === id);
+        if (!n?.parent)
+            return;
+        const siblings = [...allChildren(n.parent)];
+        const i = siblings.indexOf(id);
+        const j = i + direction;
+        if (i < 0 || j < 0 || j >= siblings.length)
+            return;
+        [siblings[i], siblings[j]] = [siblings[j], siblings[i]];
+        dispatch({ type: 'reorder', node: n.parent, children: siblings });
+    };
+    const onPointerDown = (e) => {
+        const target = e.target;
+        if (target.closest('button, a, select, .ot-floating'))
+            return;
+        const nodeId = target.closest('.ot-node')?.getAttribute('data-id') ?? null;
+        pointer.current = { x: e.clientX, y: e.clientY, box: shown, node: nodeId, moved: false, additive: e.shiftKey || e.ctrlKey || e.metaKey };
+        e.currentTarget.setPointerCapture?.(e.pointerId);
+    };
+    const onPointerMove = (e) => {
+        const p = pointer.current;
+        if (!p)
+            return;
+        const k = scale();
+        const dx = (e.clientX - p.x) * k;
+        const dy = (e.clientY - p.y) * k;
+        if (!p.moved && Math.hypot(e.clientX - p.x, e.clientY - p.y) < 4)
+            return;
+        p.moved = true;
+        const n = p.node ? projection.nodes.find((x) => x.id === p.node) : undefined;
+        if (n?.parent)
+            setDrag({ id: n.id, ids: drag?.id === n.id ? drag.ids : drawnSubtree(projection, n.id), dx, dy });
+        else
+            setBox({ ...p.box, x: p.box.x - dx, y: p.box.y - dy });
+    };
+    const onPointerUp = () => {
+        const p = pointer.current;
+        pointer.current = null;
+        if (!p)
+            return;
+        if (drag) {
+            const parent = projection.nodes.find((n) => n.id === drag.id)?.parent;
+            const order = parent ? dropOrder(projection, layout, drag.id, drag, allChildren(parent)) : null;
+            setDrag(null);
+            if (order && parent)
+                dispatch({ type: 'reorder', node: parent, children: order });
+            return;
+        }
+        if (!p.moved && p.node)
+            choose(p.node, p.additive);
+    };
+    const onDoubleClick = (e) => {
+        const id = e.target.closest('.ot-node')?.getAttribute('data-id');
+        const n = id ? projection.nodes.find((x) => x.id === id) : undefined;
+        if (n && !n.isTip)
+            dispatch({ type: 'toggle', node: n.id });
+    };
+    const onWheel = (e) => {
+        // Zoom only with Ctrl/⌘ (and trackpad pinch, which sets ctrlKey); plain scrolling scrolls the page.
+        if (!e.ctrlKey && !e.metaKey)
+            return;
+        e.preventDefault();
+        zoom(e.deltaY > 0 ? 1.1 : 0.9);
+    };
+    const onKeyDown = (e) => {
+        if (e.target !== e.currentTarget)
+            return;
+        if (e.key === '+' || e.key === '=')
+            zoom(0.8);
+        else if (e.key === '-')
+            zoom(1.25);
+        else if (e.key === '0')
+            setBox(null);
+        else if (e.key.startsWith('Arrow')) {
+            e.preventDefault();
+            pan(e.key === 'ArrowLeft' ? -0.1 : e.key === 'ArrowRight' ? 0.1 : 0, e.key === 'ArrowUp' ? -0.1 : e.key === 'ArrowDown' ? 0.1 : 0);
+        }
+        else if (e.key === 'Escape')
+            dispatch({ type: 'select', nodes: [] });
+    };
+    const exported = () => {
+        const svg = canvas.current?.querySelector('svg.ot-root');
+        return svg ? standaloneSvg(svg, disclosure, { sourcesLabel: labels.sources }) : null;
+    };
+    const [menu, setMenu] = useState(false);
+    const download = async (kind) => {
+        setMenu(false);
+        if (kind === 'view')
+            return downloadBlob(new Blob([serializeView(view)], { type: 'application/json' }), `${view.id}.onetaxonomy-view.json`);
+        const text = exported();
+        if (!text)
+            return;
+        if (kind === 'svg')
+            return downloadBlob(new Blob([text], { type: 'image/svg+xml' }), `${view.id}.svg`);
+        downloadBlob(await svgToPng(text), `${view.id}.png`);
+    };
+    return (_jsxs("div", { className: "ot-explorer", children: [_jsxs("div", { className: "ot-toolbar", role: "toolbar", "aria-label": title, children: [_jsxs("button", { type: "button", onClick: t.undo, disabled: !t.canUndo, children: [_jsx(Icon, { name: "undo" }), labels.undo] }), _jsxs("button", { type: "button", onClick: t.redo, disabled: !t.canRedo, children: [_jsx(Icon, { name: "redo" }), labels.redo] }), _jsx("span", { className: "ot-toolbar-gap", "aria-hidden": "true" }), _jsxs("button", { type: "button", onClick: () => dispatch({ type: 'expandAll' }), children: [_jsx(Icon, { name: "expand" }), labels.expandAll] }), _jsxs("button", { type: "button", onClick: () => dispatch({ type: 'collapseAll' }), children: [_jsx(Icon, { name: "collapse" }), labels.collapseAll] }), _jsx("span", { className: "ot-toolbar-gap", "aria-hidden": "true" }), _jsxs("label", { className: "ot-select", children: [_jsx(Icon, { name: "layout" }), _jsx("span", { children: labels.layout }), _jsx("select", { value: view.layout.kind, onChange: (e) => dispatch({ type: 'setLayout', layout: e.target.value }), children: LAYOUTS.map((k) => {
+                                    const problem = layoutProblem(dataset, view.target, k);
+                                    return (_jsx("option", { value: k, disabled: Boolean(problem), title: problem ?? undefined, children: k }, k));
+                                }) })] }), _jsxs("label", { className: "ot-select", children: [_jsx(Icon, { name: "filter" }), _jsx("span", { children: labels.status }), _jsx("select", { value: statusValue, onChange: (e) => {
+                                    const f = STATUS_FILTERS.find((x) => x.value === e.target.value);
+                                    const { status: _, ...rest } = view.filter;
+                                    dispatch({ type: 'setFilter', filter: f.statuses ? { ...rest, status: f.statuses } : rest });
+                                }, children: STATUS_FILTERS.map((f) => (_jsx("option", { value: f.value, children: f.value === 'all' ? labels.allStatuses : f.value }, f.value))) })] }), (hasSupport || hasExtinct || traits.length > 0) && _jsx("span", { className: "ot-toolbar-gap", "aria-hidden": "true" }), hasSupport && (_jsxs("button", { type: "button", "aria-pressed": Boolean(overlays.support), onClick: () => { const { support, ...rest } = overlays; setOverlays(support ? rest : { ...rest, support: {} }); }, children: [_jsx(Icon, { name: "check" }), labels.support] })), hasExtinct && (_jsxs("button", { type: "button", "aria-pressed": Boolean(overlays.extinction), onClick: () => { const { extinction, ...rest } = overlays; setOverlays(extinction ? rest : { ...rest, extinction: true }); }, children: [_jsx(Icon, { name: "dagger" }), labels.extinction] })), traits.length > 0 && (_jsxs("label", { className: "ot-select", children: [_jsx(Icon, { name: "palette" }), _jsx("span", { children: labels.trait }), _jsxs("select", { value: overlays.trait ?? '', onChange: (e) => { const { trait: _, ...rest } = overlays; setOverlays(e.target.value ? { ...rest, trait: e.target.value } : rest); }, children: [_jsx("option", { value: "", children: labels.noTrait }), traits.map((tr) => (_jsx("option", { value: tr.id, children: tr.title }, tr.id)))] })] }))] }), t.error && (_jsx("p", { className: "ot-error", role: "status", children: t.error })), _jsxs("div", { className: "ot-panes", children: [_jsxs("div", { ref: canvas, className: "ot-canvas", style: { height }, tabIndex: 0, role: "group", "aria-label": labels.canvas, "data-dragging": drag ? '' : undefined, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: () => {
+                            pointer.current = null;
+                            setDrag(null);
+                        }, onDoubleClick: onDoubleClick, onWheel: onWheel, onKeyDown: onKeyDown, children: [_jsxs("div", { className: "ot-floating", role: "toolbar", "aria-label": labels.controls, children: [_jsx("button", { type: "button", onClick: () => zoom(0.8), "aria-label": labels.zoomIn, title: labels.zoomIn, children: _jsx(Icon, { name: "plus" }) }), _jsx("button", { type: "button", onClick: () => zoom(1.25), "aria-label": labels.zoomOut, title: labels.zoomOut, children: _jsx(Icon, { name: "minus" }) }), _jsx("button", { type: "button", onClick: () => setBox(null), "aria-label": labels.fit, title: labels.fit, children: _jsx(Icon, { name: "fit" }) }), _jsxs("div", { className: "ot-menu", children: [_jsx("button", { type: "button", onClick: () => setMenu((m) => !m), "aria-label": labels.download, title: labels.download, "aria-expanded": menu, "aria-haspopup": "menu", children: _jsx(Icon, { name: "download" }) }), menu && (_jsxs("div", { className: "ot-menu-list", role: "menu", onKeyDown: (e) => e.key === 'Escape' && setMenu(false), children: [_jsxs("button", { type: "button", role: "menuitem", onClick: () => download('svg'), children: [_jsx(Icon, { name: "download" }), labels.downloadSvg] }), _jsxs("button", { type: "button", role: "menuitem", onClick: () => download('png'), children: [_jsx(Icon, { name: "image" }), labels.downloadPng] }), _jsxs("button", { type: "button", role: "menuitem", onClick: () => download('view'), children: [_jsx(Icon, { name: "file" }), labels.downloadView] })] }))] }), _jsx("button", { type: "button", onClick: () => printDrawing(canvas.current), "aria-label": labels.print, title: labels.print, children: _jsx(Icon, { name: "print" }) })] }), _jsx(TreeView, { projection: projection, layout: layout, highlights: view.highlights, title: title, interactive: true, hiddenLabel: hidden, viewBox: shown, drag: drag, overlays: marks }), _jsx("div", { className: "ot-print-disclosure", "aria-hidden": "true", children: disclosureLines(disclosure, labels.sources).map((l, i) => (_jsx("p", { children: l }, i))) })] }), _jsxs("div", { className: "ot-side", children: [_jsx(TreeOutline, { projection: projection, label: labels.outline, hiddenLabel: hidden, onToggle: (id) => dispatch({ type: 'toggle', node: id }), onSelect: (id, o) => choose(id, o?.additive), onMove: move }), _jsx("section", { className: "ot-inspector", "aria-label": labels.details, children: view.selected.length > 1 ? (_jsx(CladeCheck, { dataset: dataset, view: view, projection: projection, dispatch: dispatch, labels: labels })) : node ? (_jsxs(_Fragment, { children: [_jsx("h3", { className: "ot-inspector-title", children: node.label }), _jsxs("dl", { children: [node.rank && (_jsxs(_Fragment, { children: [_jsx("dt", { children: labels.rank }), _jsx("dd", { children: node.rank })] })), _jsx("dt", { children: labels.lifeStatus }), _jsx("dd", { children: node.status }), details?.age && (_jsxs(_Fragment, { children: [_jsx("dt", { children: labels.age }), _jsxs("dd", { children: [details.age.value, details.age.min !== undefined && details.age.max !== undefined ? ` (${details.age.min}–${details.age.max})` : '', " ", details.age.unit !== 'unspecified' ? details.age.unit : ''] })] })), details?.support && (_jsxs(_Fragment, { children: [_jsx("dt", { children: labels.support }), _jsxs("dd", { children: [details.support.value, details.support.method ? ` (${details.support.method})` : ''] })] })), details?.branchLength && (_jsxs(_Fragment, { children: [_jsx("dt", { children: labels.branchLength }), _jsxs("dd", { children: [details.branchLength.value, " ", details.branchLength.unit !== 'unspecified' ? details.branchLength.unit : ''] })] }))] }), details && _jsx(NodeFacts, { details: details, labels: labels }), node.hiddenDescendants > 0 && _jsx("p", { children: hidden(node.hiddenDescendants) }), _jsx(HighlightList, { highlights: view.highlights.filter((h) => node.highlights.includes(h.id)), labels: labels }), _jsxs("div", { className: "ot-inspector-actions", children: [!node.isTip && (_jsxs("button", { type: "button", onClick: () => dispatch({ type: 'rotate', node: node.id }), children: [_jsx(Icon, { name: "flip" }), labels.rotate] })), _jsxs("button", { type: "button", onClick: () => dispatch({ type: 'focus', node: view.focus === node.id ? null : node.id }), children: [_jsx(Icon, { name: view.focus === node.id ? 'unfocus' : 'focus' }), view.focus === node.id ? labels.unfocus : labels.focus] })] }), (view.target.kind === 'classification' && dataset.snapshot.phylogenies.length > 0) && _jsx(CladeCheck, { dataset: dataset, view: view, projection: projection, dispatch: dispatch, labels: labels, single: true }), renderDetails?.(node.id)] })) : (_jsxs("p", { className: "ot-hint", children: [_jsx(Icon, { name: "info" }), labels.nothingSelected, " ", labels.dragHint, " ", labels.multiHint] })) })] })] }), _jsx(Legend, { layout: layout, highlights: view.highlights, labels: labels, trait: traits.find((tr) => tr.id === overlays.trait), support: Boolean(overlays.support), onRemoveHighlight: (id) => dispatch({ type: 'removeHighlight', id }) }), _jsxs("details", { className: "ot-about", children: [_jsxs("summary", { children: [_jsx(Icon, { name: "book" }), labels.about] }), _jsx("ul", { children: disclosure.lines.map((l, i) => (_jsx("li", { children: l }, i))) }), disclosure.citations.length > 0 && (_jsxs(_Fragment, { children: [_jsx("h4", { children: labels.sources }), _jsx("ul", { children: disclosure.citations.map((c) => (_jsx("li", { children: citationLine(c) }, c.source))) })] }))] })] }));
+}
+const PALETTE = ['#cf8137', '#2f7d5c', '#91645d', '#3b6fb6', '#b9a8d9', '#d9a400'];
+/**
+ * The clade selector: check whether the selected taxa form a clade in the hypothesis
+ * (or, for one taxon of a classification, in a chosen phylogeny), with the reason in
+ * words, then keep it as a highlight: a clade only when supported, otherwise a group.
+ */
+function CladeCheck({ dataset, view, projection, dispatch, labels, single = false }) {
+    const phylogenies = dataset.snapshot.phylogenies;
+    const [against, setAgainst] = useState(phylogenies[0]?.id ?? '');
+    const [name, setName] = useState('');
+    const members = view.selected;
+    const result = useMemo(() => {
+        if (view.target.kind === 'classification' && members.length !== 1)
+            return null;
+        return makeHighlight(dataset, view, { id: `h-${members.join('-')}`, label: name || members.map((m) => projection.nodes.find((n) => n.id === m)?.label ?? m).join(', '), members, ...(view.target.kind === 'classification' && against ? { hypothesis: against } : {}) });
+    }, [dataset, view, members, name, against, projection]);
+    const words = result?.assessment ? describeAssessment(dataset, result.assessment) : null;
+    const nameOf = (id) => projection.nodes.find((n) => n.id === id)?.label ?? id;
+    return (_jsxs("div", { className: "ot-clade-check", "data-status": result?.assessment?.status, children: [!single && (_jsxs(_Fragment, { children: [_jsxs("h3", { className: "ot-inspector-title", children: [labels.selection, " (", members.length, ")"] }), _jsx("p", { className: "ot-selection", children: members.map(nameOf).join(', ') })] })), view.target.kind === 'classification' && (_jsxs("label", { className: "ot-select", children: [_jsx("span", { children: labels.checkAgainst }), _jsx("select", { value: against, onChange: (e) => setAgainst(e.target.value), children: phylogenies.map((p) => (_jsx("option", { value: p.id, children: p.title }, p.id))) })] })), words && (_jsxs("div", { className: "ot-assessment-box", role: "status", children: [_jsxs("p", { children: [_jsx("strong", { children: labels.checkClade }), " ", words.headline] }), words.details.map((d, i) => (_jsx("p", { className: "ot-hint", children: d }, i)))] })), result && (_jsxs("form", { className: "ot-inspector-actions", onSubmit: (e) => {
+                    e.preventDefault();
+                    const id = `h${Date.now().toString(36)}`;
+                    dispatch({ type: 'addHighlight', highlight: { ...result, id, color: PALETTE[view.highlights.length % PALETTE.length] } });
+                    setName('');
+                }, children: [_jsxs("label", { className: "ot-select", children: [_jsx("span", { children: labels.highlightName }), _jsx("input", { value: name, onChange: (e) => setName(e.target.value), placeholder: result.label })] }), _jsxs("button", { type: "submit", children: [_jsx(Icon, { name: "palette" }), labels.addHighlight, " (", result.kind === 'clade' ? labels.clade : labels.group, ")"] })] })), !single && (_jsxs("button", { type: "button", onClick: () => dispatch({ type: 'select', nodes: [] }), children: [_jsx(Icon, { name: "close" }), labels.clearSelection] }))] }));
+}
+function NodeFacts({ details, labels }) {
+    const c = details.concepts.length === 1 ? details.concepts[0] : undefined;
+    const profile = c?.profile;
+    return (_jsxs("div", { className: "ot-facts", children: [details.unmapped && _jsx("p", { className: "ot-hint", children: labels.unmapped }), c?.authorship && _jsxs("p", { className: "ot-authorship", children: [c.name, " ", c.authorship] }), profile?.summary && _jsx("p", { children: profile.summary }), c && c.synonyms.length > 0 && (_jsxs("p", { children: [_jsxs("span", { className: "ot-fact-label", children: [labels.synonyms, ":"] }), " ", c.synonyms.join(', ')] })), c && c.commonNames.length > 0 && (_jsxs("p", { children: [_jsxs("span", { className: "ot-fact-label", children: [labels.commonNames, ":"] }), " ", c.commonNames.map((n) => `${n.name} (${n.locale})`).join(', ')] })), details.traits.length > 0 && (_jsxs("p", { children: [_jsxs("span", { className: "ot-fact-label", children: [labels.traits, ":"] }), " ", details.traits.map((tr) => `${tr.title}: ${tr.state}${tr.note ? ` (${tr.note})` : ''}`).join('; ')] })), details.references.length > 0 && (_jsxs("p", { children: [_jsxs("span", { className: "ot-fact-label", children: [labels.references, ":"] }), " ", details.references.join('; ')] })), details.citations.length > 0 && (_jsxs("p", { className: "ot-citations", children: [_jsxs("span", { className: "ot-fact-label", children: [labels.sources, ":"] }), " ", details.citations.map(citationLine).join('; ')] }))] }));
+}
+const viewChildren = (dataset, view, id) => (view.target.kind === 'classification' ? dataset.classification(view.target.id) : dataset.phylogeny(view.target.id)).children.get(id) ?? [];
+function HighlightList({ highlights, labels, onRemove }) {
+    if (!highlights.length)
+        return null;
+    return (_jsx("ul", { className: "ot-highlights", children: highlights.map((h) => (_jsxs("li", { "data-kind": h.kind, children: [_jsx("span", { className: "ot-swatch", style: h.color ? { background: h.color } : undefined, "aria-hidden": "true" }), h.label, " \u00B7 ", h.kind === 'clade' ? labels.clade : labels.group, h.assessment?.hypothesis && (_jsxs("span", { className: "ot-assessment", children: [' ', "(", h.assessment.status, ", ", h.assessment.hypothesis.id, " v", h.assessment.hypothesis.version, ")"] })), onRemove && (_jsx("button", { type: "button", className: "ot-remove", onClick: () => onRemove(h.id), "aria-label": `${labels.remove ?? 'Remove'} ${h.label}`, title: labels.remove, children: _jsx(Icon, { name: "close", size: 12 }) }))] }, h.id))) }));
+}
+/** What the drawing is (classification vs phylogeny) and what each highlight is. */
+export function Legend({ layout, highlights, labels: custom, trait, support, onRemoveHighlight, }) {
+    const labels = { clade: LABELS.clade, group: LABELS.group, noStatedValue: LABELS.noStatedValue, weakSupport: LABELS.weakSupport, mixed: LABELS.mixed, remove: LABELS.remove, ...custom };
+    return (_jsxs("div", { className: "ot-legend", children: [_jsx("p", { className: "ot-notice", children: layout.notice }), _jsx(HighlightList, { highlights: highlights, labels: labels, ...(onRemoveHighlight ? { onRemove: onRemoveHighlight } : {}) }), trait && (_jsxs("ul", { className: "ot-legend-traits", "aria-label": trait.title, children: [trait.states.map((s) => (_jsxs("li", { children: [_jsx("span", { className: "ot-swatch", "data-trait": s.id, style: s.color ? { background: s.color } : undefined, "aria-hidden": "true" }), s.label] }, s.id))), _jsxs("li", { children: [_jsx("span", { className: "ot-swatch", "data-trait": "mixed", "aria-hidden": "true" }), labels.mixed] }), _jsxs("li", { children: [_jsx("span", { className: "ot-swatch", "data-trait": "none", "aria-hidden": "true" }), labels.noStatedValue] })] })), support && _jsx("p", { className: "ot-notice", children: labels.weakSupport })] }));
+}

package/dist/TreeOutline.d.ts

@@ -0,0 +1,27 @@
+import type { Id, Projection, ProjectedNode } from '@captiveorigins/onetaxonomy-core';
+import { type ReactNode } from 'react';
+export type TreeOutlineProps = {
+    projection: Projection;
+    /** Accessible name of the tree. */
+    label: string;
+    /** Expand or collapse a node (Enter on a branch, Left/Right arrows). */
+    onToggle?: (id: Id) => void;
+    /** Choose a node (Space, click). `additive` (Shift/Ctrl/⌘) adds or removes it from a multiple selection. */
+    onSelect?: (id: Id, options?: {
+        additive: boolean;
+    }) => void;
+    /** Move a node among its siblings (Alt+Up/Down): a keyboard alternative to dragging. */
+    onMove?: (id: Id, direction: -1 | 1) => void;
+    /** Extra text after a node's name, e.g. its rank. */
+    renderMeta?: (node: ProjectedNode) => ReactNode;
+    hiddenLabel?: (count: number) => string;
+    /** Shown for nodes without a name (e.g. unlabelled internal nodes of a tree). */
+    unnamedLabel?: string;
+};
+/**
+ * The same tree as an accessible outline (WAI-ARIA tree pattern): one tab stop,
+ * arrows to move, Right/Left to open and close, Home/End, type-ahead, Space to
+ * select, Alt+Up/Down to reorder. Screen-reader users get the whole structure;
+ * everyone gets a keyboard path to every drawing interaction.
+ */
+export declare function TreeOutline({ projection, label, onToggle, onSelect, onMove, renderMeta, hiddenLabel, unnamedLabel }: TreeOutlineProps): import("react").JSX.Element;

package/dist/TreeOutline.js

@@ -0,0 +1,113 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+const DEFAULT_HIDDEN = (n) => `${n} not shown`;
+/**
+ * The same tree as an accessible outline (WAI-ARIA tree pattern): one tab stop,
+ * arrows to move, Right/Left to open and close, Home/End, type-ahead, Space to
+ * select, Alt+Up/Down to reorder. Screen-reader users get the whole structure;
+ * everyone gets a keyboard path to every drawing interaction.
+ */
+export function TreeOutline({ projection, label, onToggle, onSelect, onMove, renderMeta, hiddenLabel = DEFAULT_HIDDEN, unnamedLabel = 'Unnamed node' }) {
+    const byId = useMemo(() => new Map(projection.nodes.map((n) => [n.id, n])), [projection]);
+    const order = useMemo(() => projection.nodes.map((n) => n.id), [projection]); // preorder = visual order
+    const [active, setActive] = useState(projection.roots[0] ?? null);
+    const refs = useRef(new Map());
+    const typed = useRef({ text: '', at: 0 });
+    const current = active && byId.has(active) ? active : (projection.roots[0] ?? null);
+    const [focusPending, setFocusPending] = useState(false);
+    useEffect(() => {
+        if (focusPending && current) {
+            refs.current.get(current)?.focus();
+            setFocusPending(false);
+        }
+    }, [focusPending, current]);
+    const go = (id) => {
+        if (!id)
+            return;
+        setActive(id);
+        setFocusPending(true);
+    };
+    const onKeyDown = (e, n) => {
+        e.stopPropagation();
+        const i = order.indexOf(n.id);
+        const branch = !n.isTip;
+        const open = branch && !n.collapsed;
+        const siblings = n.parent ? byId.get(n.parent).children : projection.roots;
+        const handled = () => e.preventDefault();
+        if (e.altKey && (e.key === 'ArrowUp' || e.key === 'ArrowDown') && onMove && n.parent) {
+            handled();
+            onMove(n.id, e.key === 'ArrowUp' ? -1 : 1);
+            setFocusPending(true);
+            return;
+        }
+        switch (e.key) {
+            case 'ArrowDown':
+                handled();
+                return go(order[i + 1]);
+            case 'ArrowUp':
+                handled();
+                return go(order[i - 1]);
+            case 'Home':
+                handled();
+                return go(order[0]);
+            case 'End':
+                handled();
+                return go(order.at(-1));
+            case 'ArrowRight':
+                handled();
+                if (branch && !open)
+                    return onToggle?.(n.id);
+                return go(n.children[0]);
+            case 'ArrowLeft':
+                handled();
+                if (open && onToggle)
+                    return onToggle(n.id);
+                return go(n.parent);
+            case 'Enter':
+                handled();
+                if (branch)
+                    onToggle?.(n.id);
+                else
+                    onSelect?.(n.id);
+                return;
+            case ' ':
+                handled();
+                return onSelect?.(n.id, { additive: e.shiftKey || e.ctrlKey || e.metaKey });
+            case '*':
+                handled();
+                for (const s of siblings)
+                    if (byId.get(s).collapsed)
+                        onToggle?.(s);
+                return;
+            default:
+                if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+                    const now = Date.now();
+                    typed.current = { text: (now - typed.current.at < 700 ? typed.current.text : '') + e.key.toLowerCase(), at: now };
+                    const from = [...order.slice(i + 1), ...order.slice(0, i + 1)];
+                    go(from.find((id) => byId.get(id).label.toLowerCase().startsWith(typed.current.text)));
+                }
+        }
+    };
+    const item = (id) => {
+        const n = byId.get(id);
+        const branch = !n.isTip;
+        const siblings = n.parent ? byId.get(n.parent).children : projection.roots;
+        return (_jsxs("li", { ref: (el) => {
+                if (el)
+                    refs.current.set(id, el);
+                else
+                    refs.current.delete(id);
+            }, role: "treeitem", className: "ot-outline-item", "aria-level": n.depth + 1, "aria-setsize": siblings.length, "aria-posinset": siblings.indexOf(id) + 1, "aria-expanded": branch ? !n.collapsed : undefined, "aria-selected": n.selected, tabIndex: id === current ? 0 : -1, onKeyDown: (e) => onKeyDown(e, n), onFocus: (e) => {
+                if (e.target === e.currentTarget)
+                    setActive(id);
+            }, "data-status": n.status, children: [_jsxs("span", { className: "ot-outline-row", onClick: (e) => {
+                        setActive(id);
+                        onSelect?.(id, { additive: e.shiftKey || e.ctrlKey || e.metaKey });
+                    }, children: [branch ? (_jsx("span", { className: "ot-outline-twisty", "aria-hidden": "true", onClick: (e) => {
+                                e.stopPropagation();
+                                onToggle?.(id);
+                            }, children: n.collapsed ? '▸' : '▾' })) : (_jsx("span", { className: "ot-outline-twisty", "aria-hidden": "true" })), _jsxs("span", { className: "ot-outline-label", "data-unnamed": n.label ? undefined : '', children: [n.label || unnamedLabel, n.status === 'extinct' ? ' †' : ''] }), renderMeta?.(n), n.hiddenDescendants > 0 && _jsxs("span", { className: "ot-outline-hidden", children: [" \u00B7 ", hiddenLabel(n.hiddenDescendants)] })] }), branch && !n.collapsed && n.children.length > 0 && _jsx("ul", { role: "group", children: n.children.map(item) })] }, id));
+    };
+    return (_jsx("ul", { className: "ot-outline", role: "tree", "aria-label": label, children: projection.roots.map(item) }));
+}

package/dist/TreeView.d.ts

@@ -0,0 +1,50 @@
+import type { Highlight, Id, NodeOverlay, Projection } from '@captiveorigins/onetaxonomy-core';
+import { type TreeLayout } from '@captiveorigins/onetaxonomy-layout';
+import { type KeyboardEvent, type MouseEvent } from 'react';
+export type TreeViewProps = {
+    projection: Projection;
+    layout: TreeLayout;
+    /** Highlights from the view (colors and clade/group kind). */
+    highlights?: Highlight[];
+    /** Accessible title of the drawing. */
+    title: string;
+    /** Space around the drawing, in layout units. Default 16. */
+    padding?: number;
+    /** Room for labels to the right of leaves (rectangular layouts). Default 220. */
+    labelWidth?: number;
+    /** Override the viewBox (zoom and pan). */
+    viewBox?: ViewBox;
+    /** A node being dragged: it and its drawn subtree are shown offset (layout units). */
+    drag?: {
+        ids: ReadonlySet<Id>;
+        dx: number;
+        dy: number;
+    } | null;
+    /** Overlay marks per node (`nodeOverlays` from core): support, fossil ages, observed trait states. */
+    overlays?: ReadonlyMap<Id, NodeOverlay>;
+    /** Nodes are focusable and clickable. */
+    interactive?: boolean;
+    onNodeClick?: (id: Id, event: MouseEvent<SVGGElement>) => void;
+    onNodeKeyDown?: (id: Id, event: KeyboardEvent<SVGGElement>) => void;
+    /** Word for folded descendants, e.g. "+12 hidden". */
+    hiddenLabel?: (count: number) => string;
+    className?: string;
+};
+export type ViewBox = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+/** The box that shows the whole drawing with room for labels (the "fit" view). */
+export declare function treeViewBox(layout: TreeLayout, { padding, labelWidth }?: {
+    padding?: number;
+    labelWidth?: number;
+}): ViewBox;
+/**
+ * The tree as SVG. Renders on the server (no effects, no measuring) and in the
+ * browser. Classes are stable (`ot-*`) and states are data attributes, so it can
+ * be styled with the bundled stylesheet or entirely your own. The legend notice
+ * (classification vs phylogeny) is part of the accessible description.
+ */
+export declare function TreeView(props: TreeViewProps): import("react").JSX.Element;

package/dist/TreeView.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { edgePath } from '@captiveorigins/onetaxonomy-layout';
+import { useId } from 'react';
+const DEFAULT_HIDDEN = (n) => `+${n} not shown`;
+/** The box that shows the whole drawing with room for labels (the "fit" view). */
+export function treeViewBox(layout, { padding = 16, labelWidth } = {}) {
+    const radialLayout = layout.kind === 'radial';
+    const lw = labelWidth ?? (radialLayout ? 160 : 220);
+    const xs = layout.nodes.map((n) => n.x);
+    const ys = layout.nodes.map((n) => n.y);
+    const minX = Math.min(0, ...xs) - padding - (radialLayout ? lw : 0);
+    const minY = Math.min(0, ...ys) - padding - (radialLayout ? lw / 2 : 0);
+    const maxX = Math.max(0, ...xs) + padding + lw;
+    const maxY = Math.max(0, ...ys) + padding + (layout.axis ? 36 : 0) + (radialLayout ? lw / 2 : 0);
+    return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+/**
+ * The tree as SVG. Renders on the server (no effects, no measuring) and in the
+ * browser. Classes are stable (`ot-*`) and states are data attributes, so it can
+ * be styled with the bundled stylesheet or entirely your own. The legend notice
+ * (classification vs phylogeny) is part of the accessible description.
+ */
+export function TreeView(props) {
+    const { projection, layout, highlights = [], title, padding = 16, interactive = false } = props;
+    const titleId = useId();
+    const descId = useId();
+    const radialLayout = layout.kind === 'radial';
+    const box = props.viewBox ?? treeViewBox(layout, { padding, ...(props.labelWidth !== undefined ? { labelWidth: props.labelWidth } : {}) });
+    const node = new Map(projection.nodes.map((n) => [n.id, n]));
+    const color = new Map(highlights.map((h) => [h.id, h.color]));
+    const hidden = props.hiddenLabel ?? DEFAULT_HIDDEN;
+    const moving = (id) => Boolean(props.drag?.ids.has(id));
+    const offset = props.drag ? `translate(${props.drag.dx} ${props.drag.dy})` : undefined;
+    const marks = props.overlays;
+    return (_jsxs("svg", { className: ['ot-root', props.className].filter(Boolean).join(' '), viewBox: `${box.x} ${box.y} ${box.width} ${box.height}`, role: "img", "aria-labelledby": titleId, "aria-describedby": descId, "data-diagram": layout.diagram, "data-layout": layout.kind, children: [_jsx("title", { id: titleId, children: title }), _jsx("desc", { id: descId, children: `${layout.notice} ${projection.counts.shown} of ${projection.counts.total} shown.` }), _jsx("g", { className: "ot-edges", children: layout.edges.map((e) => (_jsx("path", { className: "ot-edge", d: edgePath(e), "data-highlighted": node.get(e.child)?.highlights.length ? '' : undefined, "data-weak": marks?.get(e.child)?.support?.weak ? '' : undefined, "data-dragging": moving(e.child) ? '' : undefined, transform: moving(e.child) ? offset : undefined }, `${e.parent}>${e.child}`))) }), layout.axis && (_jsxs("g", { className: "ot-axis", "aria-hidden": "true", children: [_jsx("line", { className: "ot-axis-line", x1: Math.min(...layout.axis.ticks.map((t) => t.x)), x2: Math.max(...layout.axis.ticks.map((t) => t.x)), y1: layout.height + 16, y2: layout.height + 16 }), layout.axis.ticks.map((t) => (_jsxs("g", { transform: `translate(${t.x} ${layout.height + 16})`, children: [_jsx("line", { className: "ot-axis-tick", y2: 5 }), _jsx("text", { className: "ot-axis-label", y: 18, textAnchor: "middle", children: t.value })] }, t.value))), _jsx("text", { className: "ot-axis-unit", x: layout.width, y: layout.height + 50, textAnchor: "end", children: layout.axis.direction === 'before-present' ? `${layout.axis.unit} before present` : layout.axis.unit })] })), _jsx("g", { className: "ot-nodes", children: layout.nodes.map((ln) => {
+                    const n = node.get(ln.id);
+                    if (!n)
+                        return null;
+                    const hl = n.highlights.map((h) => color.get(h)).find(Boolean);
+                    const angle = ln.angle ?? 0;
+                    const flip = radialLayout && Math.cos(angle) < 0;
+                    const labelTransform = radialLayout ? `rotate(${(-angle * 180) / Math.PI + (flip ? 180 : 0)})` : undefined;
+                    const mark = marks?.get(ln.id);
+                    const fossil = mark?.fossilAge ? ` ${mark.fossilAge.value}${mark.fossilAge.unit && mark.fossilAge.unit !== 'unspecified' ? ` ${mark.fossilAge.unit}` : ''}` : '';
+                    const name = `${n.label}${n.status === 'extinct' ? ` †${fossil}` : ''}`;
+                    const text = n.collapsed && n.hiddenDescendants ? `${name} (${hidden(n.hiddenDescendants)})` : name;
+                    return (_jsxs("g", { className: "ot-node", transform: `translate(${ln.x + (moving(ln.id) ? props.drag.dx : 0)} ${ln.y + (moving(ln.id) ? props.drag.dy : 0)})`, "data-dragging": moving(ln.id) ? '' : undefined, "data-id": ln.id, "data-leaf": ln.leaf ? '' : undefined, "data-collapsed": n.collapsed ? '' : undefined, "data-selected": n.selected ? '' : undefined, "data-status": n.status, "data-rank": n.rank, "data-trait": mark?.trait?.state, ...(interactive
+                            ? {
+                                tabIndex: -1,
+                                role: 'button',
+                                'aria-label': text,
+                                onClick: props.onNodeClick ? (e) => props.onNodeClick(ln.id, e) : undefined,
+                                onKeyDown: props.onNodeKeyDown ? (e) => props.onNodeKeyDown(ln.id, e) : undefined,
+                            }
+                            : {}), children: [hl && _jsx("circle", { className: "ot-node-halo", r: 7, style: { fill: hl } }), mark?.trait && _jsx("circle", { className: "ot-trait", r: 5.5, style: 'color' in mark.trait && mark.trait.color ? { fill: mark.trait.color } : undefined }), mark?.support && (_jsx("text", { className: "ot-support", x: -5, y: -5, textAnchor: "end", "data-weak": mark.support.weak ? '' : undefined, children: mark.support.value })), n.collapsed ? _jsx("path", { className: "ot-node-collapsed", d: "M0 0 L12 -6 L12 6 Z" }) : _jsx("circle", { className: "ot-node-dot", r: ln.leaf ? 3 : 2.5 }), (ln.leaf || !radialLayout) && text && (_jsx("text", { className: "ot-label", x: ln.leaf ? (flip ? -8 : 8) : 4, y: ln.leaf ? 4 : -6, textAnchor: ln.leaf && flip ? 'end' : 'start', transform: ln.leaf ? labelTransform : undefined, "data-italic": /^(genus|species|subspecies|variety|form)$/i.test(n.rank ?? '') ? '' : undefined, children: text }))] }, ln.id));
+                }) })] }));
+}

package/dist/drag.d.ts

@@ -0,0 +1,18 @@
+import type { Id, Projection } from '@captiveorigins/onetaxonomy-core';
+import type { TreeLayout } from '@captiveorigins/onetaxonomy-layout';
+/**
+ * Where a dragged node lands among its siblings (click-and-drag rearranging).
+ * Only the display order of one parent's children changes, never the tree: the
+ * node can't be dropped under another parent. Rectangular layouts order siblings
+ * by height, radial layouts by angle.
+ *
+ * `allChildren` is the parent's full child order (including children hidden by
+ * filters or the user); hidden ones keep their place relative to their neighbours.
+ * Returns the new full order, or null when nothing changes.
+ */
+export declare function dropOrder(projection: Projection, layout: TreeLayout, id: Id, delta: {
+    dx: number;
+    dy: number;
+}, allChildren: readonly Id[]): Id[] | null;
+/** The node and everything drawn below it (moves together while dragging). */
+export declare function drawnSubtree(projection: Projection, id: Id): Set<Id>;

package/dist/drag.js

@@ -0,0 +1,62 @@
+/**
+ * Where a dragged node lands among its siblings (click-and-drag rearranging).
+ * Only the display order of one parent's children changes, never the tree: the
+ * node can't be dropped under another parent. Rectangular layouts order siblings
+ * by height, radial layouts by angle.
+ *
+ * `allChildren` is the parent's full child order (including children hidden by
+ * filters or the user); hidden ones keep their place relative to their neighbours.
+ * Returns the new full order, or null when nothing changes.
+ */
+export function dropOrder(projection, layout, id, delta, allChildren) {
+    const node = projection.nodes.find((n) => n.id === id);
+    if (!node?.parent)
+        return null;
+    const parent = projection.nodes.find((n) => n.id === node.parent);
+    const at = new Map(layout.nodes.map((n) => [n.id, n]));
+    const self = at.get(id);
+    if (!self)
+        return null;
+    const radial = layout.kind === 'radial';
+    const coord = (x, y, near) => {
+        if (!radial)
+            return y;
+        let a = Math.atan2(-y, x);
+        // Unwrap to the turn closest to the original angle so siblings around 0/2π compare correctly.
+        if (near !== undefined)
+            while (a - near > Math.PI)
+                a -= 2 * Math.PI;
+        if (near !== undefined)
+            while (near - a > Math.PI)
+                a += 2 * Math.PI;
+        return a;
+    };
+    const original = radial ? (self.angle ?? coord(self.x, self.y)) : self.y;
+    const dropped = coord(self.x + delta.dx, self.y + delta.dy, original);
+    const siblings = parent.children;
+    const position = (s) => (s === id ? dropped : radial ? (at.get(s).angle ?? 0) : at.get(s).y);
+    const visible = [...siblings].sort((a, b) => position(a) - position(b));
+    if (visible.every((s, i) => s === siblings[i]))
+        return null;
+    const full = allChildren.filter((c) => c !== id);
+    const next = visible[visible.indexOf(id) + 1];
+    if (next !== undefined)
+        full.splice(full.indexOf(next), 0, id);
+    else
+        full.splice(full.indexOf(visible[visible.length - 2]) + 1, 0, id);
+    return full;
+}
+/** The node and everything drawn below it (moves together while dragging). */
+export function drawnSubtree(projection, id) {
+    const byId = new Map(projection.nodes.map((n) => [n.id, n]));
+    const out = new Set();
+    const stack = [id];
+    while (stack.length) {
+        const x = stack.pop();
+        out.add(x);
+        const n = byId.get(x);
+        if (n && !n.collapsed)
+            stack.push(...n.children);
+    }
+    return out;
+}

package/dist/export.d.ts

@@ -0,0 +1,19 @@
+import type { Citation, ViewDisclosure } from '@captiveorigins/onetaxonomy-core';
+export declare const citationLine: (c: Citation) => string;
+/** The disclosure as plain lines: what the diagram is, what is hidden, the data and sources. */
+export declare const disclosureLines: (d: ViewDisclosure, sourcesLabel?: string) => string[];
+/**
+ * A self-contained copy of a drawing: computed styles inlined, the viewBox kept, and
+ * the disclosure written underneath, so the file can't travel without saying whether
+ * it is a classification or a phylogeny and what was left out (I13).
+ */
+export declare function standaloneSvg(svg: SVGSVGElement, disclosure: ViewDisclosure, { lineHeight, fontSize, sourcesLabel }?: {
+    lineHeight?: number;
+    fontSize?: number;
+    sourcesLabel?: string;
+}): string;
+/** Rasterizes a standalone SVG (from `standaloneSvg`) to PNG in the browser. */
+export declare function svgToPng(svgText: string, { scale }?: {
+    scale?: number;
+}): Promise<Blob>;
+export declare function downloadBlob(blob: Blob, filename: string): void;

package/dist/export.js

@@ -0,0 +1,79 @@
+/** Properties copied into exported SVGs (they carry no stylesheet). */
+const INLINE = ['fill', 'fill-opacity', 'stroke', 'stroke-width', 'stroke-dasharray', 'opacity', 'font-family', 'font-size', 'font-weight', 'font-style', 'visibility', 'display'];
+const NS = 'http://www.w3.org/2000/svg';
+export const citationLine = (c) => [c.text, c.version && `version ${c.version}`, c.license, c.url, c.illustrative && 'illustrative data'].filter(Boolean).join(' · ');
+/** The disclosure as plain lines: what the diagram is, what is hidden, the data and sources. */
+export const disclosureLines = (d, sourcesLabel = 'Sources') => [...d.lines, ...(d.citations.length ? [`${sourcesLabel}:`, ...d.citations.map((c) => `  ${citationLine(c)}`)] : [])];
+/**
+ * A self-contained copy of a drawing: computed styles inlined, the viewBox kept, and
+ * the disclosure written underneath, so the file can't travel without saying whether
+ * it is a classification or a phylogeny and what was left out (I13).
+ */
+export function standaloneSvg(svg, disclosure, { lineHeight = 15, fontSize = 11, sourcesLabel } = {}) {
+    const copy = svg.cloneNode(true);
+    const src = svg.querySelectorAll('*');
+    copy.querySelectorAll('*').forEach((el, i) => {
+        const cs = getComputedStyle(src[i]);
+        for (const prop of INLINE) {
+            const v = cs.getPropertyValue(prop);
+            if (v)
+                el.style.setProperty(prop, v);
+        }
+    });
+    const [x, y, w, h] = (copy.getAttribute('viewBox') ?? '0 0 600 400').split(/\s+/).map(Number);
+    const lines = disclosureLines(disclosure, sourcesLabel);
+    const g = document.createElementNS(NS, 'g');
+    g.setAttribute('class', 'ot-disclosure');
+    lines.forEach((line, i) => {
+        const t = document.createElementNS(NS, 'text');
+        t.setAttribute('x', String(x + 8));
+        t.setAttribute('y', String(y + h + 12 + (i + 1) * lineHeight));
+        t.setAttribute('style', `font-family: system-ui, sans-serif; font-size: ${fontSize}px; fill: #4c312c`);
+        t.textContent = line;
+        g.appendChild(t);
+    });
+    copy.appendChild(g);
+    const total = h + 24 + lines.length * lineHeight;
+    copy.setAttribute('viewBox', `${x} ${y} ${w} ${total}`);
+    copy.setAttribute('width', String(Math.round(w)));
+    copy.setAttribute('height', String(Math.round(total)));
+    copy.setAttribute('xmlns', NS);
+    copy.removeAttribute('style');
+    // A white page behind the drawing, so PNGs and dark-mode exports stay legible.
+    const bg = document.createElementNS(NS, 'rect');
+    for (const [k, v] of Object.entries({ x, y, width: w, height: total, fill: '#ffffff' }))
+        bg.setAttribute(k, String(v));
+    copy.insertBefore(bg, copy.firstChild);
+    return new XMLSerializer().serializeToString(copy);
+}
+/** Rasterizes a standalone SVG (from `standaloneSvg`) to PNG in the browser. */
+export async function svgToPng(svgText, { scale = 2 } = {}) {
+    const url = URL.createObjectURL(new Blob([svgText], { type: 'image/svg+xml' }));
+    try {
+        const img = new Image();
+        img.decoding = 'async';
+        await new Promise((resolve, reject) => {
+            img.onload = () => resolve();
+            img.onerror = () => reject(new Error('Could not render the drawing as an image'));
+            img.src = url;
+        });
+        const canvas = document.createElement('canvas');
+        canvas.width = Math.ceil(img.naturalWidth * scale);
+        canvas.height = Math.ceil(img.naturalHeight * scale);
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            throw new Error('Canvas is not available');
+        ctx.scale(scale, scale);
+        ctx.drawImage(img, 0, 0);
+        return await new Promise((resolve, reject) => canvas.toBlob((b) => (b ? resolve(b) : reject(new Error('PNG export failed'))), 'image/png'));
+    }
+    finally {
+        URL.revokeObjectURL(url);
+    }
+}
+export function downloadBlob(blob, filename) {
+    const url = URL.createObjectURL(blob);
+    const a = Object.assign(document.createElement('a'), { href: url, download: filename });
+    a.click();
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+}

package/dist/icons.d.ts

@@ -0,0 +1,38 @@
+import type { SVGProps } from 'react';
+/**
+ * The brand family's line icons (brand/README.md): 24 × 24, 1.75 stroke, round
+ * caps and joins, currentColor. The same drawings ship in OnePedigree and
+ * OneTaxonomy. Decorative by default (aria-hidden): put the words in the button's
+ * text or aria-label.
+ */
+export declare const ICON_PATHS: {
+    readonly plus: "M12 5v14M5 12h14";
+    readonly minus: "M5 12h14";
+    readonly fit: "M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5";
+    readonly download: "M12 4v11M7 10l5 5 5-5M5 20h14";
+    readonly print: "M7 9V4h10v5M7 17H5a1 1 0 0 1-1-1v-5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5a1 1 0 0 1-1 1h-2M7 14h10v6H7z";
+    readonly undo: "M9 14 4 9l5-5M4 9h10.5a5.5 5.5 0 0 1 0 11H11";
+    readonly redo: "m15 14 5-5-5-5M20 9H9.5a5.5 5.5 0 0 0 0 11H13";
+    readonly expand: "m7 15 5 5 5-5M7 9l5-5 5 5";
+    readonly collapse: "m7 20 5-5 5 5M7 4l5 5 5-5";
+    readonly flip: "M7 4v16M4 7l3-3 3 3M17 20V4m-3 13 3 3 3-3";
+    readonly focus: "M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM12 2v4M12 18v4M2 12h4M18 12h4";
+    readonly unfocus: "M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5M9 12h6";
+    readonly layout: "M4 12h4M8 6v12M8 6h5M8 18h5M8 12h9M15 4v4M15 16v4";
+    readonly filter: "M4 5h16l-6 8v6l-4 2v-8z";
+    readonly palette: "M12 3a9 9 0 1 0 0 18c1.1 0 1.5-.8 1.2-1.6-.4-1 .2-2.4 1.6-2.4H17a4 4 0 0 0 4-4c0-5.5-4-10-9-10zM7.5 11.5h.01M10 7.5h.01M15 7.5h.01";
+    readonly close: "M6 6l12 12M18 6 6 18";
+    readonly open: "M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5";
+    readonly grip: "M9 6h.01M15 6h.01M9 12h.01M15 12h.01M9 18h.01M15 18h.01";
+    readonly info: "M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM12 11v6M12 7.5h.01";
+    readonly check: "M5 12.5 9.5 17 19 7";
+    readonly dagger: "M12 3v18M7 8h10";
+    readonly image: "M4 5h16v14H4zM4 16l5-5 4 4 3-3 4 4M15.5 9h.01";
+    readonly file: "M7 3h7l5 5v13H7zM14 3v5h5";
+    readonly book: "M5 5.5A2.5 2.5 0 0 1 7.5 3H19v15H7.5A2.5 2.5 0 0 0 5 20.5zM5 20.5A2.5 2.5 0 0 0 7.5 23H19v-5";
+};
+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,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The brand family's line icons (brand/README.md): 24 × 24, 1.75 stroke, round
+ * caps and joins, currentColor. The same drawings ship in OnePedigree and
+ * OneTaxonomy. Decorative by default (aria-hidden): put the words in the button's
+ * text or aria-label.
+ */
+export const ICON_PATHS = {
+    plus: 'M12 5v14M5 12h14',
+    minus: 'M5 12h14',
+    fit: 'M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5',
+    download: 'M12 4v11M7 10l5 5 5-5M5 20h14',
+    print: 'M7 9V4h10v5M7 17H5a1 1 0 0 1-1-1v-5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5a1 1 0 0 1-1 1h-2M7 14h10v6H7z',
+    undo: 'M9 14 4 9l5-5M4 9h10.5a5.5 5.5 0 0 1 0 11H11',
+    redo: 'm15 14 5-5-5-5M20 9H9.5a5.5 5.5 0 0 0 0 11H13',
+    expand: 'm7 15 5 5 5-5M7 9l5-5 5 5',
+    collapse: 'm7 20 5-5 5 5M7 4l5 5 5-5',
+    flip: 'M7 4v16M4 7l3-3 3 3M17 20V4m-3 13 3 3 3-3',
+    focus: 'M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM12 2v4M12 18v4M2 12h4M18 12h4',
+    unfocus: 'M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5M9 12h6',
+    layout: 'M4 12h4M8 6v12M8 6h5M8 18h5M8 12h9M15 4v4M15 16v4',
+    filter: 'M4 5h16l-6 8v6l-4 2v-8z',
+    palette: 'M12 3a9 9 0 1 0 0 18c1.1 0 1.5-.8 1.2-1.6-.4-1 .2-2.4 1.6-2.4H17a4 4 0 0 0 4-4c0-5.5-4-10-9-10zM7.5 11.5h.01M10 7.5h.01M15 7.5h.01',
+    close: 'M6 6l12 12M18 6 6 18',
+    open: 'M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5',
+    grip: 'M9 6h.01M15 6h.01M9 12h.01M15 12h.01M9 18h.01M15 18h.01',
+    info: 'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM12 11v6M12 7.5h.01',
+    check: 'M5 12.5 9.5 17 19 7',
+    dagger: 'M12 3v18M7 8h10',
+    image: 'M4 5h16v14H4zM4 16l5-5 4 4 3-3 4 4M15.5 9h.01',
+    file: 'M7 3h7l5 5v13H7zM14 3v5h5',
+    book: 'M5 5.5A2.5 2.5 0 0 1 7.5 3H19v15H7.5A2.5 2.5 0 0 0 5 20.5zM5 20.5A2.5 2.5 0 0 0 7.5 23H19v-5',
+};
+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: ["ot-icon", className].filter(Boolean).join(" "), ...rest, children: _jsx("path", { d: ICON_PATHS[name] }) }));
+}

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { TreeView, type TreeViewProps } from './TreeView.js';
+export { TreeOutline, type TreeOutlineProps } from './TreeOutline.js';
+export { Explorer, Legend, layoutFor, useTaxonomyView, type ExplorerProps, type ExplorerLabels, type UseTaxonomyView } from './Explorer.js';
+export { treeViewBox, type ViewBox } from './TreeView.js';
+export { dropOrder, drawnSubtree } from './drag.js';
+export { Icon, ICON_PATHS, type IconName } from './icons.js';
+export { citationLine, disclosureLines, downloadBlob, standaloneSvg, svgToPng } from './export.js';

package/dist/index.js

@@ -0,0 +1,7 @@
+export { TreeView } from './TreeView.js';
+export { TreeOutline } from './TreeOutline.js';
+export { Explorer, Legend, layoutFor, useTaxonomyView } from './Explorer.js';
+export { treeViewBox } from './TreeView.js';
+export { dropOrder, drawnSubtree } from './drag.js';
+export { Icon, ICON_PATHS } from './icons.js';
+export { citationLine, disclosureLines, downloadBlob, standaloneSvg, svgToPng } from './export.js';

package/dist/styles.css

@@ -0,0 +1,140 @@
+/*
+ * OneTaxonomy default styles. Optional: skip this file and style the stable
+ * .ot-* classes and data-* attributes yourself, or override the custom properties.
+ */
+.ot-root,
+.ot-explorer {
+  --ot-font: system-ui, -apple-system, 'Segoe UI', sans-serif;
+  /* Brand family tokens (brand/README.md): Captive Origins brown ink, orange for selection and focus. */
+  --ot-ink: #4c312c;
+  --ot-text: #1d2330;
+  --ot-muted: #5b6577;
+  --ot-edge: #a08a83;
+  --ot-edge-width: 1.5px;
+  --ot-node: var(--ot-ink);
+  --ot-selected: #cf8137;
+  --ot-surface: #ffffff;
+  --ot-panel: #fbf7f4;
+  --ot-border: #eaddd6;
+  --ot-focus: #cf8137;
+  font-family: var(--ot-font);
+  color: var(--ot-text);
+}
+@media (prefers-color-scheme: dark) {
+  .ot-root,
+  .ot-explorer {
+    --ot-ink: #eda9ac;
+    --ot-text: #eef1f6;
+    --ot-muted: #a7b0c0;
+    --ot-edge: #8a7470;
+    --ot-node: var(--ot-ink);
+    --ot-selected: #e7a066;
+    --ot-surface: #1c1311;
+    --ot-panel: #241916;
+    --ot-border: #3a2a26;
+    --ot-focus: #e7a066;
+  }
+}
+.ot-root { width: 100%; height: 100%; overflow: visible; }
+.ot-edge { fill: none; stroke: var(--ot-edge); stroke-width: var(--ot-edge-width); }
+.ot-node-dot, .ot-node-collapsed { fill: var(--ot-node); }
+.ot-node-halo { opacity: 0.35; }
+.ot-label { fill: var(--ot-text); font-size: 12px; }
+.ot-label[data-italic] { font-style: italic; }
+.ot-node[data-status='extinct'] .ot-node-dot { fill: none; stroke: var(--ot-node); }
+.ot-node[data-selected] .ot-label { fill: var(--ot-selected); font-weight: 600; }
+.ot-node[role='button'] { cursor: pointer; }
+.ot-node:focus { outline: none; }
+.ot-node:focus-visible { outline: 2px solid var(--ot-focus); }
+.ot-canvas { user-select: none; -webkit-user-select: none; }
+.ot-axis-line, .ot-axis-tick { stroke: var(--ot-muted); }
+/* Overlays (M5): only stated values are drawn. */
+.ot-trait { fill: var(--ot-muted); opacity: 0.85; }
+.ot-node[data-trait='mixed'] .ot-trait { fill: none; stroke: var(--ot-muted); stroke-dasharray: 2 2; }
+.ot-support { fill: var(--ot-muted); font-size: 10px; }
+.ot-support[data-weak] { fill: #b45309; }
+.ot-edge[data-weak] { stroke-dasharray: 5 4; }
+.ot-axis-label, .ot-axis-unit { fill: var(--ot-muted); font-size: 11px; }
+
+.ot-icon { flex: none; }
+/* Controls: 32 px, radius 8, 1 px border (shared with OnePedigree). */
+.ot-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
+.ot-toolbar-gap { width: 6px; }
+.ot-explorer button, .ot-select {
+  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 8px;
+  border: 1px solid var(--ot-border); background: var(--ot-surface); color: inherit; font: inherit; font-size: 13px; cursor: pointer;
+}
+.ot-select select { font: inherit; border: 0; background: transparent; color: inherit; cursor: pointer; }
+.ot-explorer button:hover:not(:disabled), .ot-select:hover { border-color: var(--ot-ink); }
+.ot-explorer button:disabled { opacity: 0.45; cursor: default; }
+.ot-explorer button:focus-visible, .ot-select:focus-within, .ot-canvas:focus-visible { outline: 2px solid var(--ot-focus); outline-offset: 2px; }
+.ot-panes { display: grid; grid-template-columns: minmax(0, 2fr) minmax(15rem, 1fr); gap: 12px; }
+@media (max-width: 48rem) { .ot-panes { grid-template-columns: 1fr; } }
+.ot-canvas { position: relative; overflow: hidden; touch-action: none; border: 1px solid var(--ot-border); border-radius: 12px; background: var(--ot-surface); cursor: grab; }
+.ot-canvas:active { cursor: grabbing; }
+.ot-canvas > svg { display: block; width: 100%; height: 100%; }
+.ot-floating { position: absolute; top: 8px; right: 8px; z-index: 1; display: flex; gap: 4px; }
+.ot-floating button { width: 32px; padding: 0; justify-content: center; }
+.ot-node[data-dragging] { cursor: grabbing; }
+.ot-node[data-dragging] .ot-label { fill: var(--ot-selected); }
+.ot-edge[data-dragging] { stroke-dasharray: 4 3; }
+.ot-canvas[data-dragging] .ot-edge:not([data-dragging]) { opacity: 0.5; }
+.ot-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
+.ot-outline, .ot-inspector { border: 1px solid var(--ot-border); border-radius: 10px; background: var(--ot-panel); padding: 10px 12px; }
+.ot-outline, .ot-outline ul { list-style: none; margin: 0; padding-inline-start: 1rem; }
+.ot-outline { max-height: 20rem; overflow: auto; font-size: 14px; }
+.ot-outline-item:focus { outline: none; }
+.ot-outline-item:focus-visible > .ot-outline-row { outline: 2px solid var(--ot-focus); border-radius: 0.25rem; }
+.ot-outline-item[aria-selected='true'] > .ot-outline-row { font-weight: 600; color: var(--ot-selected); }
+.ot-outline-row { display: inline-flex; gap: 0.25rem; align-items: baseline; cursor: pointer; }
+.ot-outline-label[data-unnamed] { color: var(--ot-muted); font-style: italic; }
+.ot-outline-twisty { display: inline-block; width: 1rem; text-align: center; }
+.ot-outline-hidden, .ot-assessment, .ot-notice { color: var(--ot-muted); font-size: 0.875em; }
+.ot-inspector { font-size: 14px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06); }
+.ot-inspector-title { margin: 0; font-size: 15px; }
+.ot-hint { display: flex; gap: 8px; margin: 0; color: var(--ot-muted); }
+.ot-inspector dl { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.75rem; margin: 0.5rem 0; }
+.ot-inspector dt { color: var(--ot-muted); }
+.ot-inspector dd { margin: 0; }
+.ot-inspector-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+.ot-highlights { list-style: none; padding: 0; margin: 0.5rem 0; }
+.ot-swatch { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 50%; margin-inline-end: 0.375rem; background: var(--ot-muted); }
+.ot-error { color: #b91c1c; }
+.ot-explorer button[aria-pressed='true'] { border-color: var(--ot-selected); background: color-mix(in srgb, var(--ot-selected) 14%, var(--ot-surface)); }
+.ot-menu { position: relative; }
+.ot-menu-list { position: absolute; top: 36px; right: 0; display: flex; flex-direction: column; gap: 2px; padding: 4px; min-width: 12rem; border: 1px solid var(--ot-border); border-radius: 10px; background: var(--ot-surface); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12); }
+.ot-floating .ot-menu-list button { width: auto; justify-content: flex-start; padding: 0 10px; border-color: transparent; }
+.ot-facts { font-size: 13px; }
+.ot-facts p { margin: 0.375rem 0; }
+.ot-fact-label { color: var(--ot-muted); }
+.ot-citations { color: var(--ot-muted); overflow-wrap: anywhere; }
+.ot-legend { margin-top: 8px; }
+.ot-legend-traits { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 0; margin: 6px 0; font-size: 13px; }
+.ot-swatch[data-trait='mixed'] { background: transparent; border: 1px dashed var(--ot-muted); }
+.ot-swatch[data-trait='none'] { background: transparent; border: 1px solid var(--ot-border); }
+.ot-about { margin-top: 8px; font-size: 13px; color: var(--ot-muted); }
+.ot-about summary { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; color: var(--ot-text); }
+.ot-about h4 { margin: 8px 0 4px; font-size: 13px; color: var(--ot-text); }
+.ot-about ul { margin: 4px 0; padding-inline-start: 1.25rem; overflow-wrap: anywhere; }
+.ot-print-disclosure { display: none; }
+.ot-clade-check { display: flex; flex-direction: column; gap: 8px; }
+.ot-selection { margin: 0; font-size: 13px; }
+.ot-assessment-box { border-inline-start: 3px solid var(--ot-muted); padding: 4px 10px; background: var(--ot-surface); border-radius: 6px; }
+.ot-assessment-box p { margin: 4px 0; }
+.ot-clade-check[data-status='monophyletic'] .ot-assessment-box { border-color: #2f7d5c; }
+.ot-clade-check[data-status='not-monophyletic'] .ot-assessment-box { border-color: #b45309; }
+.ot-select input { font: inherit; border: 0; background: transparent; color: inherit; min-width: 6rem; }
+.ot-explorer .ot-remove { height: 20px; width: 20px; padding: 0; justify-content: center; margin-inline-start: 6px; vertical-align: middle; }
+@media print {
+  html[data-ot-printing] body * { visibility: hidden; }
+  html[data-ot-printing] [data-ot-printing], html[data-ot-printing] [data-ot-printing] * { visibility: visible; }
+  html[data-ot-printing] [data-ot-printing] { position: fixed; inset: 0; height: 100% !important; border: 0; border-radius: 0; }
+  .ot-floating { display: none; }
+  html[data-ot-printing] [data-ot-printing] { display: flex; flex-direction: column; }
+  html[data-ot-printing] [data-ot-printing] > svg { flex: 1; min-height: 0; }
+  .ot-print-disclosure { display: block; padding: 8px 12px; font-size: 9pt; color: #4c312c; }
+  .ot-print-disclosure p { margin: 0 0 2px; }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .ot-node:not([data-dragging]) { transition: transform 150ms ease; }
+}

package/package.json

@@ -1,6 +1,65 @@
 {
   "name": "@captiveorigins/onetaxonomy-react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0-alpha.0",
+  "description": "OneTaxonomy for React: a server-renderable SVG tree, an accessible keyboard tree outline, and an explorer with undo/redo, filters, layouts and an inspector that keeps clades and groups apart.",
+  "keywords": [
+    "taxonomy",
+    "phylogeny",
+    "react",
+    "svg",
+    "tree",
+    "accessibility",
+    "education"
+  ],
+  "homepage": "https://github.com/mgilardi/onetaxonomy#readme",
+  "bugs": {
+    "url": "https://github.com/mgilardi/onetaxonomy/issues"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mgilardi/onetaxonomy.git",
+    "directory": "packages/react"
+  },
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=22"
+  },
+  "dependencies": {
+    "@captiveorigins/onetaxonomy-core": "^0.1.0-alpha.0",
+    "@captiveorigins/onetaxonomy-layout": "^0.1.0-alpha.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.2"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.3.3",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "jsdom": "^30.1.3",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1"
+  },
+  "scripts": {
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && cp src/styles.css dist/styles.css",
+    "typecheck": "tsc --noEmit && tsc --noEmit -p tsconfig.test.json",
+    "test": "vitest run"
+  }
 }