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

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,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/THIRD-PARTY-LICENSE-LUCIDE.txt

@@ -0,0 +1,43 @@
+ISC License
+
+Copyright (c) 2026 Lucide Icons and Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+---
+
+The following Lucide icons are derived from the Feather project:
+
+airplay, alert-circle, alert-octagon, alert-triangle, aperture, arrow-down-circle, arrow-down-left, arrow-down-right, arrow-down, arrow-left-circle, arrow-left, arrow-right-circle, arrow-right, arrow-up-circle, arrow-up-left, arrow-up-right, arrow-up, at-sign, calendar, cast, check, chevron-down, chevron-left, chevron-right, chevron-up, chevrons-down, chevrons-left, chevrons-right, chevrons-up, circle, clipboard, clock, code, columns, command, compass, corner-down-left, corner-down-right, corner-left-down, corner-left-up, corner-right-down, corner-right-up, corner-up-left, corner-up-right, crosshair, database, divide-circle, divide-square, dollar-sign, download, external-link, feather, frown, hash, headphones, help-circle, info, italic, key, layout, life-buoy, link-2, link, loader, lock, log-in, log-out, maximize, meh, minimize, minimize-2, minus-circle, minus-square, minus, monitor, moon, more-horizontal, more-vertical, move, music, navigation-2, navigation, octagon, pause-circle, percent, plus-circle, plus-square, plus, power, radio, rss, search, server, share, shopping-bag, sidebar, smartphone, smile, square, table-2, tablet, target, terminal, trash-2, trash, triangle, tv, type, upload, x-circle, x-octagon, x-square, x, zoom-in, zoom-out
+
+The MIT License (MIT) (for the icons listed above)
+
+Copyright (c) 2013-present Cole Bemis
+
+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/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' | 'propose' | 'proposalTitle' | 'proposalAuthor' | 'proposalStart' | 'proposalCancel' | 'proposalHint' | 'proposalBy' | 'proposalLeave' | 'proposalNoMoves' | 'proposalUnder' | 'proposalRoot' | 'proposalRevert' | 'proposalAccepted' | 'proposalProposed' | 'proposalMoveUnder' | 'proposalGained' | 'proposalLost' | 'proposalCompare' | 'proposalDefaultTitle' | '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,395 @@
+'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, acceptedTree, compareHierarchies, viewTree, 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, dropTarget } 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',
+    propose: 'Propose changes',
+    proposalTitle: 'Name of this proposal',
+    proposalAuthor: 'Your name',
+    proposalStart: 'Start proposing',
+    proposalCancel: 'Cancel',
+    proposalHint: 'Drag a taxon onto its new parent, or select it and choose below. The accepted data never changes.',
+    proposalBy: 'Proposed by',
+    proposalLeave: 'Leave Proposed mode',
+    proposalNoMoves: 'No moves yet.',
+    proposalUnder: 'under',
+    proposalRoot: 'the top level',
+    proposalRevert: 'Revert',
+    proposalAccepted: 'Accepted',
+    proposalProposed: 'Proposed',
+    proposalMoveUnder: 'Move under',
+    proposalGained: 'Gains',
+    proposalLost: 'Loses',
+    proposalCompare: 'Compare with the accepted arrangement',
+    proposalDefaultTitle: 'My proposal',
+    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 isUnrooted = view.target.kind === 'phylogeny' && !dataset.phylogeny(view.target.id).rooted;
+    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 [proposing, setProposing] = useState(false);
+    const proposal = view.proposal;
+    const landing = proposal && drag ? dropTarget(layout, drag.id, drag.ids, drag) : 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 && (n.parent || proposal))
+            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 && landing) {
+            setDrag(null);
+            if (projection.nodes.find((n) => n.id === drag.id)?.parent !== landing)
+                dispatch({ type: 'proposeMove', node: drag.id, to: landing });
+            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] }), !proposal && !isUnrooted && (_jsxs("button", { type: "button", onClick: () => setProposing((v) => !v), "aria-expanded": proposing, children: [_jsx(Icon, { name: "grip" }), labels.propose] })), _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: "support" }), 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: "fossil" }), 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, "data-tip": labels.zoomIn, children: _jsx(Icon, { name: "zoomIn" }) }), _jsx("button", { type: "button", onClick: () => zoom(1.25), "aria-label": labels.zoomOut, "data-tip": labels.zoomOut, children: _jsx(Icon, { name: "zoomOut" }) }), _jsx("button", { type: "button", onClick: () => setBox(null), "aria-label": labels.fit, "data-tip": 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, "data-tip": 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, "data-tip": 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, dropTarget: landing ?? null, overlays: marks }), proposal && (_jsxs("p", { className: "ot-proposed-badge", role: "note", children: [labels.proposalBy, " ", proposal.author, ": ", proposal.title] })), _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: [proposing && !proposal && (_jsx(ProposalStart, { labels: labels, onCancel: () => setProposing(false), onStart: (title, author) => {
+                                    dispatch({ type: 'startProposal', proposal: { id: `p${Date.now().toString(36)}`, title, author, created: new Date().toISOString() } });
+                                    setProposing(false);
+                                } })), proposal && _jsx(ProposalPanel, { dataset: dataset, view: view, dispatch: dispatch, labels: labels }), _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 }), proposal && _jsx(ProposalNode, { dataset: dataset, view: view, node: node.id, projection: projection, dispatch: dispatch, labels: labels }), _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 }) }), proposal && proposal.moves.length > 0 && _jsx(ProposalCompare, { dataset: dataset, view: view, labels: labels, title: title }), _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 })] }));
+}
+const nodeName = (dataset, view, id, labels) => {
+    if (id === null)
+        return labels.proposalRoot;
+    if (view.target.kind === 'classification')
+        return dataset.nameOf(id) ?? id;
+    const n = dataset.phylogeny(view.target.id).node.get(id);
+    return n?.label ?? (n?.concepts?.[0] ? dataset.nameOf(n.concepts[0]) : undefined) ?? id;
+};
+/** Names a new proposal: a proposal always says whose it is. */
+function ProposalStart({ labels, onStart, onCancel }) {
+    const [title, setTitle] = useState('');
+    const [author, setAuthor] = useState('');
+    return (_jsxs("form", { className: "ot-proposal", onSubmit: (e) => {
+            e.preventDefault();
+            if (author.trim())
+                onStart(title.trim() || labels.proposalDefaultTitle, author.trim());
+        }, children: [_jsx("h3", { children: labels.propose }), _jsx("p", { className: "ot-hint", children: labels.proposalHint }), _jsxs("label", { children: [labels.proposalAuthor, _jsx("input", { value: author, onChange: (e) => setAuthor(e.target.value), required: true })] }), _jsxs("label", { children: [labels.proposalTitle, _jsx("input", { value: title, onChange: (e) => setTitle(e.target.value) })] }), _jsxs("div", { className: "ot-inspector-actions", children: [_jsx("button", { type: "submit", children: labels.proposalStart }), _jsx("button", { type: "button", onClick: onCancel, children: labels.proposalCancel })] })] }));
+}
+/** The moves so far, each reversible (undo and redo work too). */
+function ProposalPanel({ dataset, view, dispatch, labels }) {
+    const p = view.proposal;
+    return (_jsxs("section", { className: "ot-proposal", "aria-label": labels.propose, children: [_jsxs("h3", { children: [labels.proposalBy, " ", p.author, ": ", p.title] }), _jsx("p", { className: "ot-hint", children: labels.proposalHint }), p.moves.length ? (_jsx("ul", { children: p.moves.map((m) => (_jsxs("li", { children: [_jsxs("span", { children: [_jsx("strong", { children: nodeName(dataset, view, m.node, labels) }), " ", labels.proposalUnder, " ", nodeName(dataset, view, m.to, labels)] }), _jsx("button", { type: "button", onClick: () => dispatch({ type: 'revertMove', node: m.node }), children: labels.proposalRevert })] }, m.node))) })) : (_jsx("p", { className: "ot-hint", children: labels.proposalNoMoves })), _jsx("div", { className: "ot-inspector-actions", children: _jsx("button", { type: "button", onClick: () => dispatch({ type: 'endProposal' }), children: labels.proposalLeave }) })] }));
+}
+/** For the selected taxon: its accepted and proposed places, what its parent groups gain or lose, and a keyboard way to move it. */
+function ProposalNode({ dataset, view, node, projection, dispatch, labels }) {
+    const accepted = acceptedTree(dataset, view);
+    const proposed = viewTree(dataset, view);
+    const from = accepted.parent.get(node) ?? null;
+    const to = proposed.parent.get(node) ?? null;
+    const comparison = useMemo(() => compareHierarchies(accepted, proposed), [accepted, proposed]);
+    const change = comparison.changedGroups.find((g) => g.node === node);
+    const under = new Set(drawnSubtree(projection, node));
+    const name = (id) => nodeName(dataset, view, id, labels);
+    return (_jsxs("div", { className: "ot-proposal", children: [_jsxs("p", { children: [_jsxs("strong", { children: [labels.proposalAccepted, ":"] }), " ", labels.proposalUnder, " ", name(from), _jsx("br", {}), _jsxs("strong", { children: [labels.proposalProposed, ":"] }), " ", labels.proposalUnder, " ", name(to)] }), change && change.gained.length > 0 && (_jsxs("p", { children: [_jsxs("strong", { children: [labels.proposalGained, ":"] }), " ", change.gained.map(name).join(', ')] })), change && change.lost.length > 0 && (_jsxs("p", { children: [_jsxs("strong", { children: [labels.proposalLost, ":"] }), " ", change.lost.map(name).join(', ')] })), _jsxs("label", { children: [labels.proposalMoveUnder, _jsxs("select", { value: to ?? '', onChange: (e) => dispatch({ type: 'proposeMove', node, to: e.target.value || null }), children: [view.target.kind === 'classification' && _jsx("option", { value: "", children: labels.proposalRoot }), projection.nodes
+                                .filter((n) => !under.has(n.id) || n.id === to)
+                                .map((n) => (_jsx("option", { value: n.id, children: n.label }, n.id)))] })] })] }));
+}
+/** The accepted and proposed trees side by side, same folds and filters. */
+function ProposalCompare({ dataset, view, labels, title }) {
+    const accepted = useMemo(() => {
+        const { proposal: _p, ...rest } = view;
+        return projectView(dataset, { ...rest, order: {} });
+    }, [dataset, view]);
+    const proposed = useMemo(() => projectView(dataset, view), [dataset, view]);
+    return (_jsxs("details", { className: "ot-compare", children: [_jsx("summary", { children: labels.proposalCompare }), _jsxs("div", { className: "ot-compare-panes", children: [_jsxs("div", { children: [_jsx("h4", { children: labels.proposalAccepted }), _jsx(TreeView, { projection: accepted, layout: layoutFor(accepted, 'rectangular'), highlights: [], title: `${title}: ${labels.proposalAccepted}` })] }), _jsxs("div", { children: [_jsxs("h4", { children: [labels.proposalBy, " ", view.proposal.author] }), _jsx(TreeView, { projection: proposed, layout: layoutFor(proposed, 'rectangular'), highlights: [], title: `${title}: ${labels.proposalProposed}` })] })] })] }));
+}