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

package/dist/icons.d.ts

@@ -0,0 +1,76 @@
+import type { SVGProps } from 'react';
+/**
+ * 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: {
+    /** lucide: plus */
+    readonly plus: "M5 12h14M12 5v14";
+    /** lucide: minus */
+    readonly minus: "M5 12h14";
+    /** lucide: zoom-in */
+    readonly zoomIn: "M3 11a8 8 0 1 0 16 0a8 8 0 1 0 -16 0M21 21L16.65 16.65M11 8L11 14M8 11L14 11";
+    /** lucide: zoom-out */
+    readonly zoomOut: "M3 11a8 8 0 1 0 16 0a8 8 0 1 0 -16 0M21 21L16.65 16.65M8 11L14 11";
+    /** lucide: scan */
+    readonly fit: "M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2";
+    /** lucide: download */
+    readonly download: "M12 15V3M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4m7 10 5 5 5-5";
+    /** lucide: printer */
+    readonly print: "M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6M7 14h10a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-10a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1Z";
+    /** lucide: undo-2 */
+    readonly undo: "M9 14 4 9l5-5M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11";
+    /** lucide: redo-2 */
+    readonly redo: "m15 14 5-5-5-5M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13";
+    /** lucide: chevrons-up-down */
+    readonly expand: "m7 15 5 5 5-5m7 9 5-5 5 5";
+    /** lucide: chevrons-down-up */
+    readonly collapse: "m7 20 5-5 5 5m7 4 5 5 5-5";
+    /** lucide: arrow-down-up */
+    readonly flip: "m3 16 4 4 4-4M7 20V4m21 8-4-4-4 4M17 4v16";
+    /** lucide: focus */
+    readonly focus: "M9 12a3 3 0 1 0 6 0a3 3 0 1 0 -6 0M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2";
+    /** lucide: expand */
+    readonly unfocus: "m15 15 6 6m15 9 6-6M21 16v5h-5M21 8V3h-5M3 16v5h5m3 21 6-6M3 8V3h5M9 9 3 3";
+    /** lucide: network */
+    readonly layout: "M17 16h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1ZM3 16h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1ZM10 2h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1ZM5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3M12 12V8";
+    /** lucide: funnel */
+    readonly filter: "M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z";
+    /** lucide: palette */
+    readonly palette: "M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8zM13 6.5a0.5 0.5 0 1 0 1 0a0.5 0.5 0 1 0 -1 0M17 10.5a0.5 0.5 0 1 0 1 0a0.5 0.5 0 1 0 -1 0M6 12.5a0.5 0.5 0 1 0 1 0a0.5 0.5 0 1 0 -1 0M8 7.5a0.5 0.5 0 1 0 1 0a0.5 0.5 0 1 0 -1 0";
+    /** lucide: x */
+    readonly close: "M18 6 6 18m6 6 12 12";
+    /** lucide: external-link */
+    readonly open: "M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6";
+    /** lucide: grip-vertical */
+    readonly grip: "M8 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0M8 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0M8 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0M14 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0M14 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0M14 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0";
+    /** lucide: info */
+    readonly info: "M2 12a10 10 0 1 0 20 0a10 10 0 1 0 -20 0M12 16v-4M12 8h.01";
+    /** lucide: check */
+    readonly check: "M20 6 9 17l-5-5";
+    /** lucide: percent */
+    readonly support: "M19 5L5 19M4 6.5a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0 -5 0M15 17.5a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0 -5 0";
+    /** lucide: bone */
+    readonly fossil: "M17 10c.7-.7 1.69 0 2.5 0a2.5 2.5 0 1 0 0-5 .5.5 0 0 1-.5-.5 2.5 2.5 0 1 0-5 0c0 .81.7 1.8 0 2.5l-7 7c-.7.7-1.69 0-2.5 0a2.5 2.5 0 0 0 0 5c.28 0 .5.22.5.5a2.5 2.5 0 1 0 5 0c0-.81-.7-1.8 0-2.5Z";
+    /** lucide: image */
+    readonly image: "M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2ZM7 9a2 2 0 1 0 4 0a2 2 0 1 0 -4 0m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21";
+    /** lucide: file-json */
+    readonly file: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2zM14 2v5a1 1 0 0 0 1 1h5M10 12a1 1 0 0 0-1 1v1a1 1 0 0 1-1 1 1 1 0 0 1 1 1v1a1 1 0 0 0 1 1M14 18a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1 1 1 0 0 1-1-1v-1a1 1 0 0 0-1-1";
+    /** lucide: book-open */
+    readonly book: "M12 7v14M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z";
+    /** lucide: chevron-left */
+    readonly previous: "m15 18-6-6 6-6";
+    /** lucide: chevron-right */
+    readonly next: "m9 18 6-6-6-6";
+    /** lucide: dna */
+    readonly dna: "m10 16 1.5 1.5m14 8-1.5-1.5M15 2c-1.798 1.998-2.518 3.995-2.807 5.993m16.5 10.5 1 1m17 6-2.891-2.891M2 15c6.667-6 13.333 0 20-6m20 9 .891.891M3.109 14.109 4 15m6.5 12.5 1 1m7 18 2.891 2.891M9 22c1.798-1.998 2.518-3.995 2.807-5.993";
+};
+export type IconName = keyof typeof ICON_PATHS;
+export declare function Icon({ name, size, className, ...rest }: {
+    name: IconName;
+    size?: number;
+} & Omit<SVGProps<SVGSVGElement>, 'name'>): import("react").JSX.Element;

package/dist/icons.js

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

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+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, 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

@@ -0,0 +1,8 @@
+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, 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

@@ -0,0 +1,183 @@
+/*
+ * OneTaxonomy default styles. Optional: skip this file and style the stable
+ * .ot-* classes and data-* attributes yourself, or override the custom properties.
+ */
+.ot-root,
+.ot-explorer,
+.ot-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;
+  --ot-text: #1d2330;
+  --ot-muted: #5b6577;
+  --ot-edge: #a08a83;
+  --ot-edge-width: 1.5px;
+  --ot-node: var(--ot-ink);
+  --ot-selected: #cf8137;
+  --ot-surface: #ffffff;
+  --ot-panel: #fbf7f4;
+  --ot-border: #eaddd6;
+  --ot-focus: #cf8137;
+  font-family: var(--ot-font);
+  color: var(--ot-text);
+}
+@media (prefers-color-scheme: dark) {
+  .ot-root,
+  .ot-explorer,
+  .ot-lesson {
+    --ot-ink: #eda9ac;
+    --ot-text: #eef1f6;
+    --ot-muted: #a7b0c0;
+    --ot-edge: #8a7470;
+    --ot-node: var(--ot-ink);
+    --ot-selected: #e7a066;
+    --ot-surface: #1c1311;
+    --ot-panel: #241916;
+    --ot-border: #3a2a26;
+    --ot-focus: #e7a066;
+  }
+}
+.ot-root { width: 100%; height: 100%; overflow: visible; }
+.ot-edge { fill: none; stroke: var(--ot-edge); stroke-width: var(--ot-edge-width); }
+.ot-node-dot, .ot-node-collapsed { fill: var(--ot-node); }
+.ot-node-halo { opacity: 0.35; }
+.ot-label { fill: var(--ot-text); font-size: 12px; }
+.ot-label[data-italic] { font-style: italic; }
+.ot-node[data-status='extinct'] .ot-node-dot { fill: none; stroke: var(--ot-node); }
+.ot-node[data-selected] .ot-label { fill: var(--ot-selected); font-weight: 600; }
+.ot-node[role='button'] { cursor: pointer; }
+.ot-node:focus { outline: none; }
+.ot-node:focus-visible { outline: 2px solid var(--ot-focus); }
+.ot-canvas { user-select: none; -webkit-user-select: none; }
+.ot-axis-line, .ot-axis-tick { stroke: var(--ot-muted); }
+/* Overlays (M5): only stated values are drawn. */
+.ot-trait { fill: var(--ot-muted); opacity: 0.85; }
+.ot-node[data-trait='mixed'] .ot-trait { fill: none; stroke: var(--ot-muted); stroke-dasharray: 2 2; }
+.ot-support { fill: var(--ot-muted); font-size: 10px; }
+.ot-support[data-weak] { fill: #b45309; }
+.ot-edge[data-weak] { stroke-dasharray: 5 4; }
+.ot-axis-label, .ot-axis-unit { fill: var(--ot-muted); font-size: 11px; }
+
+.ot-icon { flex: none; }
+/* Controls: 32 px, radius 8, 1 px border (shared with OnePedigree). */
+.ot-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
+.ot-toolbar-gap { width: 6px; }
+.ot-explorer button, .ot-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-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; }
+.ot-canvas:active { cursor: grabbing; }
+.ot-canvas > svg { display: block; width: 100%; height: 100%; }
+.ot-floating { position: absolute; top: 8px; right: 8px; z-index: 1; display: flex; gap: 4px; }
+.ot-floating button { width: 32px; padding: 0; justify-content: center; }
+.ot-node[data-dragging] { cursor: grabbing; }
+.ot-node[data-dragging] .ot-label { fill: var(--ot-selected); }
+.ot-edge[data-dragging] { stroke-dasharray: 4 3; }
+.ot-canvas[data-dragging] .ot-edge:not([data-dragging]) { opacity: 0.5; }
+.ot-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
+.ot-outline, .ot-inspector { border: 1px solid var(--ot-border); border-radius: 10px; background: var(--ot-panel); padding: 10px 12px; }
+.ot-outline, .ot-outline ul { list-style: none; margin: 0; padding-inline-start: 1rem; }
+.ot-outline { max-height: 20rem; overflow: auto; font-size: 14px; }
+.ot-outline-item:focus { outline: none; }
+.ot-outline-item:focus-visible > .ot-outline-row { outline: 2px solid var(--ot-focus); border-radius: 0.25rem; }
+.ot-outline-item[aria-selected='true'] > .ot-outline-row { font-weight: 600; color: var(--ot-selected); }
+.ot-outline-row { display: inline-flex; gap: 0.25rem; align-items: baseline; cursor: pointer; }
+.ot-outline-label[data-unnamed] { color: var(--ot-muted); font-style: italic; }
+.ot-outline-twisty { display: inline-block; width: 1rem; text-align: center; }
+.ot-outline-hidden, .ot-assessment, .ot-notice { color: var(--ot-muted); font-size: 0.875em; }
+.ot-inspector { font-size: 14px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06); }
+.ot-inspector-title { margin: 0; font-size: 15px; }
+.ot-hint { display: flex; gap: 8px; margin: 0; color: var(--ot-muted); }
+.ot-inspector dl { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.75rem; margin: 0.5rem 0; }
+.ot-inspector dt { color: var(--ot-muted); }
+.ot-inspector dd { margin: 0; }
+.ot-inspector-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+.ot-highlights { list-style: none; padding: 0; margin: 0.5rem 0; }
+.ot-swatch { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 50%; margin-inline-end: 0.375rem; background: var(--ot-muted); }
+.ot-error { color: #b91c1c; }
+.ot-explorer button[aria-pressed='true'] { border-color: var(--ot-selected); background: color-mix(in srgb, var(--ot-selected) 14%, var(--ot-surface)); }
+.ot-menu { position: relative; }
+.ot-menu-list { position: absolute; top: 36px; right: 0; display: flex; flex-direction: column; gap: 2px; padding: 4px; min-width: 12rem; border: 1px solid var(--ot-border); border-radius: 10px; background: var(--ot-surface); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12); }
+.ot-floating .ot-menu-list button { width: auto; justify-content: flex-start; padding: 0 10px; border-color: transparent; }
+.ot-facts { font-size: 13px; }
+.ot-facts p { margin: 0.375rem 0; }
+.ot-fact-label { color: var(--ot-muted); }
+.ot-citations { color: var(--ot-muted); overflow-wrap: anywhere; }
+.ot-legend { margin-top: 8px; }
+.ot-legend-traits { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 0; margin: 6px 0; font-size: 13px; }
+.ot-swatch[data-trait='mixed'] { background: transparent; border: 1px dashed var(--ot-muted); }
+.ot-swatch[data-trait='none'] { background: transparent; border: 1px solid var(--ot-border); }
+.ot-about { margin-top: 8px; font-size: 13px; color: var(--ot-muted); }
+.ot-about summary { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; color: var(--ot-text); }
+.ot-about h4 { margin: 8px 0 4px; font-size: 13px; color: var(--ot-text); }
+.ot-about ul { margin: 4px 0; padding-inline-start: 1.25rem; overflow-wrap: anywhere; }
+.ot-print-disclosure { display: none; }
+.ot-clade-check { display: flex; flex-direction: column; gap: 8px; }
+.ot-selection { margin: 0; font-size: 13px; }
+.ot-assessment-box { border-inline-start: 3px solid var(--ot-muted); padding: 4px 10px; background: var(--ot-surface); border-radius: 6px; }
+.ot-assessment-box p { margin: 4px 0; }
+.ot-clade-check[data-status='monophyletic'] .ot-assessment-box { border-color: #2f7d5c; }
+.ot-clade-check[data-status='not-monophyletic'] .ot-assessment-box { border-color: #b45309; }
+.ot-select input { font: inherit; border: 0; background: transparent; color: inherit; min-width: 6rem; }
+.ot-explorer .ot-remove { height: 20px; width: 20px; padding: 0; justify-content: center; margin-inline-start: 6px; vertical-align: middle; }
+@media print {
+  html[data-ot-printing] body * { visibility: hidden; }
+  html[data-ot-printing] [data-ot-printing], html[data-ot-printing] [data-ot-printing] * { visibility: visible; }
+  html[data-ot-printing] [data-ot-printing] { position: fixed; inset: 0; height: 100% !important; border: 0; border-radius: 0; }
+  .ot-floating { display: none; }
+  html[data-ot-printing] [data-ot-printing] { display: flex; flex-direction: column; }
+  html[data-ot-printing] [data-ot-printing] > svg { flex: 1; min-height: 0; }
+  .ot-print-disclosure { display: block; padding: 8px 12px; font-size: 9pt; color: #4c312c; }
+  .ot-print-disclosure p { margin: 0 0 2px; }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .ot-node:not([data-dragging]) { transition: transform 150ms ease; }
+}
+/* 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,67 @@
 {
   "name": "@captiveorigins/onetaxonomy-react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "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",
+    "phylogeny",
+    "react",
+    "svg",
+    "tree",
+    "accessibility",
+    "education"
+  ],
+  "homepage": "https://github.com/mgilardi/onetaxonomy#readme",
+  "bugs": {
+    "url": "https://github.com/mgilardi/onetaxonomy/issues"
+  },
+  "license": "PolyForm-Noncommercial-1.0.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mgilardi/onetaxonomy.git",
+    "directory": "packages/react"
+  },
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE",
+    "THIRD-PARTY-LICENSE-LUCIDE.txt"
+  ],
+  "engines": {
+    "node": ">=22"
+  },
+  "dependencies": {
+    "@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"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.3.3",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "jsdom": "^30.1.3",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1"
+  },
+  "scripts": {
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && cp src/styles.css dist/styles.css",
+    "typecheck": "tsc --noEmit && tsc --noEmit -p tsconfig.test.json",
+    "test": "vitest run"
+  }
 }