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

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/TreeOutline.d.ts

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

package/dist/TreeOutline.js

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

package/dist/TreeView.d.ts

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

package/dist/TreeView.js

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

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

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

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

package/dist/export.js

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