@captiveorigins/onetaxonomy-react 0.1.0-alpha.0 → 0.1.0-alpha.2

package/LICENSE

@@ -1,21 +1,75 @@
-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.
+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/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

@@ -18,7 +18,7 @@ export declare function useTaxonomyView(dataset: DatasetIndex, initial: Taxonomi
 }): 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 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;

package/dist/Explorer.js

@@ -1,9 +1,9 @@
 '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 { 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 } from './drag.js';
+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';
@@ -75,6 +75,25 @@ const LABELS = {
     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',
@@ -139,6 +158,7 @@ export function Explorer({ dataset, initialView, title, height = '32rem', labels
     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 ?? {};
@@ -152,6 +172,9 @@ export function Explorer({ dataset, initialView, title, height = '32rem', labels
     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)
@@ -196,7 +219,7 @@ export function Explorer({ dataset, initialView, title, height = '32rem', labels
             return;
         p.moved = true;
         const n = p.node ? projection.nodes.find((x) => x.id === p.node) : undefined;
-        if (n?.parent)
+        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 });
@@ -206,6 +229,12 @@ export function Explorer({ dataset, initialView, title, height = '32rem', labels
         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;
@@ -262,17 +291,20 @@ export function Explorer({ dataset, initialView, title, height = '32rem', labels
             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) => {
+    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: "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: () => {
+                                }, 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, 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))) })] }))] })] }));
+                        }, 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'];
 /**
@@ -315,3 +347,49 @@ export function Legend({ layout, highlights, labels: custom, trait, support, onR
     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}` })] })] })] }));
+}

package/dist/Lesson.d.ts

@@ -0,0 +1,35 @@
+import { type DatasetIndex } from '@captiveorigins/onetaxonomy-core';
+import { type Camera, type LessonDeck } from '@captiveorigins/onetaxonomy-education';
+import type { TreeLayout } from '@captiveorigins/onetaxonomy-layout';
+import { type ViewBox } from './TreeView.js';
+export type LessonMode = 
+/** Teacher presents: the drawing follows the lesson, step by step. */
+'present'
+/** Students explore from the current step with the full explorer (changes stay local). */
+ | 'explore'
+/** Authoring: build scenes from the explorer, annotate nodes. */
+ | 'studio';
+export type LessonLabels = Record<'previous' | 'next' | 'scene' | 'step' | 'present' | 'explore' | 'studio' | 'addScene' | 'sceneTitle' | 'annotate' | 'annotation' | 'remove' | 'notes' | 'selectToAnnotate' | 'modes', string>;
+/** The viewBox for a camera: centered on its node (or the whole tree), zoom 1 = fit. */
+export declare function cameraBox(layout: TreeLayout, camera: Camera | undefined, full?: ViewBox): ViewBox;
+export type LessonPlayerProps = {
+    dataset: DatasetIndex;
+    deck: LessonDeck;
+    /** Starting mode (default present). Studio needs `onChange`. */
+    mode?: LessonMode;
+    /** Modes offered in the switcher (default: present and explore, plus studio when `onChange` is given). */
+    modes?: LessonMode[];
+    /** Called with the edited lesson (studio). */
+    onChange?: (deck: LessonDeck) => void;
+    /** Show teacher notes (default false). */
+    showNotes?: boolean;
+    height?: string;
+    labels?: Partial<LessonLabels>;
+};
+/**
+ * Plays a lesson deck. Present mode draws exactly what the lesson says at each step
+ * (camera, reveals, annotations as numbered markers with their text beside the
+ * drawing); explore mode opens the full explorer at that point; studio mode lets an
+ * author add scenes from the explorer's current view and annotate taxa.
+ */
+export declare function LessonPlayer({ dataset, deck, mode: initialMode, modes, onChange, showNotes, height, labels: custom }: LessonPlayerProps): import("react").JSX.Element;

package/dist/Lesson.js

@@ -0,0 +1,104 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { projectView } from '@captiveorigins/onetaxonomy-core';
+import { sceneAt, sceneFromView } from '@captiveorigins/onetaxonomy-education';
+import { useMemo, useState } from 'react';
+import { Explorer, layoutFor } from './Explorer.js';
+import { Icon } from './icons.js';
+import { treeViewBox, TreeView } from './TreeView.js';
+const LABELS = {
+    previous: 'Previous',
+    next: 'Next',
+    scene: 'Scene',
+    step: 'Step',
+    present: 'Present',
+    explore: 'Explore',
+    studio: 'Studio',
+    addScene: 'Add scene from this view',
+    sceneTitle: 'Scene title',
+    annotate: 'Annotate the selected taxon',
+    annotation: 'Note',
+    remove: 'Remove',
+    notes: 'Teacher notes',
+    selectToAnnotate: 'Choose a taxon in the drawing to annotate it.',
+    modes: 'Lesson mode',
+};
+/** The viewBox for a camera: centered on its node (or the whole tree), zoom 1 = fit. */
+export function cameraBox(layout, camera, full = treeViewBox(layout)) {
+    const zoom = camera?.zoom && camera.zoom > 0 ? camera.zoom : 1;
+    const node = camera?.focus ? layout.nodes.find((n) => n.id === camera.focus) : undefined;
+    const cx = node ? node.x : full.x + full.width / 2;
+    const cy = node ? node.y : full.y + full.height / 2;
+    const width = full.width / zoom;
+    const height = full.height / zoom;
+    return { x: cx - width / 2, y: cy - height / 2, width, height };
+}
+/**
+ * Plays a lesson deck. Present mode draws exactly what the lesson says at each step
+ * (camera, reveals, annotations as numbered markers with their text beside the
+ * drawing); explore mode opens the full explorer at that point; studio mode lets an
+ * author add scenes from the explorer's current view and annotate taxa.
+ */
+export function LessonPlayer({ dataset, deck, mode: initialMode = 'present', modes, onChange, showNotes = false, height = '30rem', labels: custom }) {
+    const labels = { ...LABELS, ...custom };
+    const offered = modes ?? ['present', 'explore', ...(onChange ? ['studio'] : [])];
+    const [mode, setMode] = useState(initialMode);
+    const [sceneIndex, setSceneIndex] = useState(0);
+    const [step, setStep] = useState(0);
+    const scene = deck.scenes[Math.min(sceneIndex, deck.scenes.length - 1)];
+    const frame = useMemo(() => (scene ? sceneAt(scene, step, dataset) : null), [scene, step, dataset]);
+    const go = (delta) => {
+        if (!scene)
+            return;
+        const next = step + delta;
+        if (next >= 0 && next <= scene.steps.length)
+            return setStep(next);
+        const s = sceneIndex + delta;
+        if (s < 0 || s >= deck.scenes.length)
+            return;
+        setSceneIndex(s);
+        setStep(delta > 0 ? 0 : deck.scenes[s].steps.length);
+    };
+    return (_jsxs("div", { className: "ot-lesson", "data-mode": mode, children: [_jsxs("div", { className: "ot-toolbar", role: "toolbar", "aria-label": deck.title, children: [_jsx("div", { className: "ot-segmented", role: "radiogroup", "aria-label": labels.modes, children: offered.map((m) => (_jsx("button", { type: "button", role: "radio", "aria-checked": mode === m, onClick: () => setMode(m), children: labels[m] }, m))) }), _jsx("span", { className: "ot-toolbar-gap", "aria-hidden": "true" }), _jsxs("button", { type: "button", onClick: () => go(-1), disabled: sceneIndex === 0 && step === 0, children: [_jsx(Icon, { name: "previous" }), labels.previous] }), _jsxs("span", { className: "ot-lesson-position", "aria-live": "polite", children: [labels.scene, " ", deck.scenes.length ? sceneIndex + 1 : 0, "/", deck.scenes.length, scene && scene.steps.length > 0 ? ` · ${labels.step} ${step}/${scene.steps.length}` : ''] }), _jsxs("button", { type: "button", onClick: () => go(1), disabled: !scene || (sceneIndex === deck.scenes.length - 1 && step === scene.steps.length), children: [labels.next, _jsx(Icon, { name: "next" })] })] }), scene && frame && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "ot-lesson-title", children: scene.title }), frame.caption && _jsx("p", { className: "ot-lesson-caption", children: frame.caption }), mode === 'present' && _jsx(Present, { dataset: dataset, view: frame.view, camera: frame.camera, annotations: frame.annotations, title: scene.title, height: height }), mode === 'explore' && _jsx(Explorer, { dataset: dataset, initialView: frame.view, title: scene.title, height: height }, `${scene.id}:${step}`), mode === 'studio' && onChange && _jsx(Studio, { dataset: dataset, deck: deck, sceneIndex: sceneIndex, startView: frame.view, onChange: onChange, labels: labels, height: height, onAdded: (i) => { setSceneIndex(i); setStep(0); } }), showNotes && scene.notes && (_jsxs("aside", { className: "ot-lesson-notes", children: [_jsxs("strong", { children: [labels.notes, ":"] }), " ", scene.notes] }))] }))] }));
+}
+function Present({ dataset, view, camera, annotations, title, height }) {
+    const projection = useMemo(() => projectView(dataset, view), [dataset, view]);
+    const layout = useMemo(() => layoutFor(projection, view.layout.kind), [projection, view.layout.kind]);
+    const box = useMemo(() => cameraBox(layout, camera), [layout, camera]);
+    const badges = new Map();
+    annotations.forEach((a, i) => {
+        const target = a.target.kind === 'node' ? a.target.node : a.target.kind === 'group' ? a.target.members[0] : undefined;
+        if (target && !badges.has(target))
+            badges.set(target, String(i + 1));
+    });
+    return (_jsxs("div", { className: "ot-panes", children: [_jsx("div", { className: "ot-canvas ot-present", style: { height }, children: _jsx(TreeView, { projection: projection, layout: layout, highlights: view.highlights, title: title, viewBox: box, badges: badges }) }), annotations.length > 0 && (_jsx("ol", { className: "ot-annotations", children: annotations.map((a) => (_jsx("li", { "data-tone": a.tone ?? 'note', children: a.text }, a.id))) }))] }));
+}
+function Studio({ dataset, deck, sceneIndex, startView, onChange, labels, height, onAdded }) {
+    const [view, setView] = useState(startView);
+    const [title, setTitle] = useState('');
+    const [note, setNote] = useState('');
+    const scene = deck.scenes[sceneIndex];
+    const selected = view.selected[0];
+    const uid = (p) => `${p}-${Date.now().toString(36)}`;
+    const update = (fn) => {
+        const next = JSON.parse(JSON.stringify(deck));
+        fn(next);
+        onChange(next);
+    };
+    return (_jsxs("div", { className: "ot-studio", children: [_jsx(Explorer, { dataset: dataset, initialView: startView, title: scene?.title ?? deck.title, height: height, onViewChange: setView }, `${scene?.id ?? 'new'}`), _jsxs("div", { className: "ot-studio-tools", children: [_jsxs("form", { className: "ot-inspector-actions", onSubmit: (e) => {
+                            e.preventDefault();
+                            update((d) => {
+                                d.scenes.splice(sceneIndex + 1, 0, sceneFromView({ ...view, selected: [] }, { id: uid('scene'), title: title || `${labels.scene} ${d.scenes.length + 1}` }));
+                            });
+                            setTitle('');
+                            onAdded(sceneIndex + 1);
+                        }, children: [_jsxs("label", { className: "ot-select", children: [_jsx("span", { children: labels.sceneTitle }), _jsx("input", { value: title, onChange: (e) => setTitle(e.target.value) })] }), _jsxs("button", { type: "submit", children: [_jsx(Icon, { name: "plus" }), labels.addScene] })] }), scene && (_jsxs("form", { className: "ot-inspector-actions", onSubmit: (e) => {
+                            e.preventDefault();
+                            if (!selected || !note.trim())
+                                return;
+                            update((d) => {
+                                d.scenes[sceneIndex].annotations.push({ id: uid('note'), text: note.trim(), target: { kind: 'node', node: selected } });
+                            });
+                            setNote('');
+                        }, children: [_jsxs("label", { className: "ot-select", children: [_jsx("span", { children: labels.annotation }), _jsx("input", { value: note, onChange: (e) => setNote(e.target.value), disabled: !selected, placeholder: selected ? '' : labels.selectToAnnotate })] }), _jsxs("button", { type: "submit", disabled: !selected || !note.trim(), children: [_jsx(Icon, { name: "info" }), labels.annotate] })] })), scene && scene.annotations.length > 0 && (_jsx("ol", { className: "ot-annotations", children: scene.annotations.map((a) => (_jsxs("li", { children: [a.text, ' ', _jsx("button", { type: "button", className: "ot-remove", "aria-label": `${labels.remove}: ${a.text}`, onClick: () => update((d) => void (d.scenes[sceneIndex].annotations = d.scenes[sceneIndex].annotations.filter((x) => x.id !== a.id))), children: _jsx(Icon, { name: "close", size: 12 }) })] }, a.id))) }))] })] }));
+}

package/dist/TreeView.d.ts

@@ -22,6 +22,10 @@ export type TreeViewProps = {
     } | null;
     /** Overlay marks per node (`nodeOverlays` from core): support, fossil ages, observed trait states. */
     overlays?: ReadonlyMap<Id, NodeOverlay>;
+    /** The node a dragged taxon would land on (Proposed mode). */
+    dropTarget?: Id | null;
+    /** Small numbered markers on nodes (e.g. lesson annotations), by node id. */
+    badges?: ReadonlyMap<Id, string>;
     /** Nodes are focusable and clickable. */
     interactive?: boolean;
     onNodeClick?: (id: Id, event: MouseEvent<SVGGElement>) => void;

package/dist/TreeView.js

@@ -44,7 +44,7 @@ export function TreeView(props) {
                     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
+                    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-moved": n.moved ? '' : undefined, "data-drop-target": props.dropTarget === ln.id ? '' : undefined, "data-status": n.status, "data-rank": n.rank, "data-trait": mark?.trait?.state, ...(interactive
                             ? {
                                 tabIndex: -1,
                                 role: 'button',
@@ -52,6 +52,6 @@ export function TreeView(props) {
                                 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));
+                            : {}), 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 }), props.badges?.has(ln.id) && (_jsxs("g", { className: "ot-badge", transform: "translate(-12 -12)", "aria-hidden": "true", children: [_jsx("circle", { r: 7 }), _jsx("text", { y: 3.5, textAnchor: "middle", children: props.badges.get(ln.id) })] })), 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

@@ -16,3 +16,11 @@ export declare function dropOrder(projection: Projection, layout: TreeLayout, id
 }, 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>;
+/**
+ * Proposed mode: the node a dragged taxon is dropped onto (its new parent), or null when
+ * it wasn't dropped on one (a drop between siblings just reorders). A node can't land on itself or on what moves with it.
+ */
+export declare function dropTarget(layout: TreeLayout, id: Id, moving: ReadonlySet<Id>, delta: {
+    dx: number;
+    dy: number;
+}, reach?: number): Id | null;

package/dist/drag.js

@@ -60,3 +60,26 @@ export function drawnSubtree(projection, id) {
     }
     return out;
 }
+/**
+ * Proposed mode: the node a dragged taxon is dropped onto (its new parent), or null when
+ * it wasn't dropped on one (a drop between siblings just reorders). A node can't land on itself or on what moves with it.
+ */
+export function dropTarget(layout, id, moving, delta, reach = 9) {
+    const self = layout.nodes.find((n) => n.id === id);
+    if (!self)
+        return null;
+    const x = self.x + delta.dx;
+    const y = self.y + delta.dy;
+    let best = null;
+    let nearest = reach;
+    for (const n of layout.nodes) {
+        if (moving.has(n.id))
+            continue;
+        const d = Math.hypot(n.x - x, n.y - y);
+        if (d < nearest) {
+            nearest = d;
+            best = n.id;
+        }
+    }
+    return best;
+}

package/dist/icons.d.ts

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

package/dist/icons.js

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

package/dist/index.d.ts

@@ -2,6 +2,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 { dropOrder, dropTarget, drawnSubtree } from './drag.js';
 export { Icon, ICON_PATHS, type IconName } from './icons.js';
 export { citationLine, disclosureLines, downloadBlob, standaloneSvg, svgToPng } from './export.js';
+export { cameraBox, LessonPlayer, type LessonLabels, type LessonMode, type LessonPlayerProps } from './Lesson.js';

package/dist/index.js

@@ -2,6 +2,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 { dropOrder, dropTarget, drawnSubtree } from './drag.js';
 export { Icon, ICON_PATHS } from './icons.js';
 export { citationLine, disclosureLines, downloadBlob, standaloneSvg, svgToPng } from './export.js';
+export { cameraBox, LessonPlayer } from './Lesson.js';

package/dist/styles.css

@@ -3,7 +3,8 @@
  * .ot-* classes and data-* attributes yourself, or override the custom properties.
  */
 .ot-root,
-.ot-explorer {
+.ot-explorer,
+.ot-lesson {
   --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;
@@ -22,7 +23,8 @@
 }
 @media (prefers-color-scheme: dark) {
   .ot-root,
-  .ot-explorer {
+  .ot-explorer,
+  .ot-lesson {
     --ot-ink: #eda9ac;
     --ot-text: #eef1f6;
     --ot-muted: #a7b0c0;
@@ -60,14 +62,14 @@
 /* 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 {
+.ot-explorer button, .ot-lesson 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-explorer button:hover:not(:disabled), .ot-lesson button:hover:not(:disabled), .ot-select:hover { border-color: var(--ot-ink); }
+.ot-explorer button:disabled, .ot-lesson button:disabled { opacity: 0.45; cursor: default; }
+.ot-explorer button:focus-visible, .ot-lesson 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; }
@@ -138,3 +140,44 @@
 @media (prefers-reduced-motion: no-preference) {
   .ot-node:not([data-dragging]) { transition: transform 150ms ease; }
 }
+/* Visible tooltips for icon-only buttons, on hover and on keyboard focus (title= shows on hover only). */
+.ot-floating [data-tip] { position: relative; }
+.ot-floating [data-tip]:is(:hover, :focus-visible)::after {
+  content: attr(data-tip); position: absolute; top: calc(100% + 6px); right: 0; z-index: 2; white-space: nowrap; pointer-events: none;
+  padding: 4px 8px; border-radius: 6px; background: var(--ot-ink); color: var(--ot-surface); font-size: 12px; line-height: 1.3;
+}
+.ot-floating .ot-menu:has(.ot-menu-list) [data-tip]::after { display: none; }
+/* Lessons */
+.ot-lesson { font-family: var(--ot-font); color: var(--ot-text); }
+.ot-segmented { display: inline-flex; border: 1px solid var(--ot-border); border-radius: 8px; overflow: hidden; }
+.ot-lesson .ot-segmented button { border: 0; border-radius: 0; }
+.ot-lesson .ot-segmented button[aria-checked='true'] { background: color-mix(in srgb, var(--ot-selected) 16%, var(--ot-surface)); font-weight: 600; }
+.ot-lesson-position { font-size: 13px; color: var(--ot-muted); min-width: 9rem; text-align: center; }
+.ot-lesson-title { margin: 8px 0 2px; font-size: 18px; }
+.ot-lesson-caption { margin: 0 0 8px; color: var(--ot-muted); }
+.ot-present { cursor: default; }
+.ot-annotations { align-self: start; margin: 0; padding: 10px 12px 10px 2rem; border: 1px solid var(--ot-border); border-radius: 10px; background: var(--ot-panel); font-size: 14px; }
+.ot-annotations li { margin: 4px 0; }
+.ot-annotations li[data-tone='question'] { font-style: italic; }
+.ot-annotations li[data-tone='caution'] { color: #b45309; }
+.ot-badge circle { fill: var(--ot-selected); }
+.ot-badge text { fill: #fff; font-size: 9px; font-weight: 700; }
+.ot-lesson-notes { margin-top: 8px; padding: 8px 12px; border-inline-start: 3px solid var(--ot-muted); font-size: 13px; color: var(--ot-muted); }
+.ot-studio-tools { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
+
+/* Proposed mode: always visibly someone's proposal, never the accepted arrangement. */
+.ot-node[data-moved] .ot-label { font-style: italic; text-decoration: underline dashed; text-underline-offset: 3px; }
+.ot-node[data-moved] .ot-node-dot { stroke: var(--ot-selected); stroke-width: 2; stroke-dasharray: 2 2; }
+.ot-node[data-drop-target] .ot-node-dot { r: 8px; fill: var(--ot-selected); }
+.ot-node[data-drop-target] .ot-label { fill: var(--ot-selected); font-weight: 600; }
+.ot-proposed-badge { position: absolute; bottom: 8px; inset-inline-start: 8px; z-index: 2; max-width: 70%; padding: 4px 8px; border: 1px dashed var(--ot-selected); border-radius: 6px; background: var(--ot-bg, #fff); color: var(--ot-selected); font-size: 12px; font-weight: 600; }
+.ot-proposal { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px dashed var(--ot-selected); border-radius: 8px; margin-block-end: 8px; }
+.ot-proposal h3 { margin: 0; font-size: 14px; }
+.ot-proposal label { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
+.ot-proposal input, .ot-proposal textarea { padding: 4px 6px; font: inherit; border: 1px solid var(--ot-border, #ccc); border-radius: 4px; background: transparent; color: inherit; }
+.ot-proposal ul { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
+.ot-proposal li { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
+.ot-compare { margin-block-start: 8px; }
+.ot-compare-panes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-block-start: 8px; }
+.ot-compare-panes h4 { margin: 0 0 4px; font-size: 13px; }
+.ot-compare-panes svg { width: 100%; height: auto; max-height: 28rem; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@captiveorigins/onetaxonomy-react",
-  "version": "0.1.0-alpha.0",
+  "version": "0.1.0-alpha.2",
   "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",
@@ -15,7 +15,7 @@
   "bugs": {
     "url": "https://github.com/mgilardi/onetaxonomy/issues"
   },
-  "license": "MIT",
+  "license": "PolyForm-Noncommercial-1.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/mgilardi/onetaxonomy.git",
@@ -37,14 +37,16 @@
   "files": [
     "dist",
     "README.md",
-    "LICENSE"
+    "LICENSE",
+    "THIRD-PARTY-LICENSE-LUCIDE.txt"
   ],
   "engines": {
     "node": ">=22"
   },
   "dependencies": {
-    "@captiveorigins/onetaxonomy-core": "^0.1.0-alpha.0",
-    "@captiveorigins/onetaxonomy-layout": "^0.1.0-alpha.0"
+    "@captiveorigins/onetaxonomy-layout": "^0.1.0-alpha.2",
+    "@captiveorigins/onetaxonomy-education": "^0.1.0-alpha.2",
+    "@captiveorigins/onetaxonomy-core": "^0.1.0-alpha.2"
   },
   "peerDependencies": {
     "react": ">=18.2"