@captiveorigins/onepedigree-react 0.1.0-alpha.8 → 0.1.0-alpha.9

package/README.md

@@ -26,6 +26,19 @@ All 13 views of the core: `pedigree`, `fan`, `ahnentafel`, `descendants`, `hourg
 `paternal`. Repeated individuals follow the projection's `merge`, `separate` or `hybrid` mode;
 selecting one occurrence highlights every occurrence of that individual.
 
+## Rearranging by drag
+
+In views where order is a choice (descendants, hourglass, cohort, population, relationship), people can drag a node sideways to reorder it among its siblings. Ancestor charts keep the father/mother convention. A node only moves within its own drawn groups (a clutch or litter frame) and among individuals with the same parents, so frames and family lines stay truthful. The data never changes: the order is a layout option you keep (and may save).
+
+```tsx
+const [nodeOrder, setNodeOrder] = useState<string[]>([])
+const layout = useMemo(() => layoutSync(projection, { nodeOrder }), [projection, nodeOrder])
+
+<PedigreeExplorer projection={projection} layout={layout} nodeOrder={nodeOrder} onNodeOrderChange={setNodeOrder} />
+```
+
+`dropNodeOrder(layout, occurrenceId, delta, current, groupOf)` is exported for custom UIs.
+
 ## Themes and colors
 
 Seven presets, each with its own per-view accents (e.g. warm maternal and cool paternal
@@ -43,6 +56,10 @@ below WCAG AA. `onThemeChange` receives the edited theme (a plain object) to sto
 back as `theme`. `ThemeEditor` is also exported for use in your own settings pages. Themes are
 rendered as inline custom properties, so they work in server rendering.
 
+## Brand family
+
+OnePedigree and OneTaxonomy share a backbone (`brand/README.md`): the same line icons (`Icon`, `ICON_PATHS`), 32 px controls, a floating canvas toolbar and a Captive Origins orange focus ring, while each keeps its own views and character.
+
 ## Styling
 
 - Default stylesheet `styles.css` (optional; leave it out for unstyled mode).

package/dist/PedigreeExplorer.d.ts

@@ -1,4 +1,4 @@
-import type { Individual, IndividualOccurrence } from '@captiveorigins/onepedigree-core';
+import { type Individual, type IndividualOccurrence } from '@captiveorigins/onepedigree-core';
 import { type ReactNode } from 'react';
 import { type PedigreeViewProps } from './PedigreeView.js';
 import { type PedigreeTheme } from './themes.js';
@@ -27,6 +27,14 @@ export type PedigreeExplorerProps = Omit<PedigreeViewProps, 'interactive' | 'vie
         paternal: string;
         maternal: string;
     };
+    /**
+     * Turns on click-and-drag rearranging in views where order is a choice
+     * (REORDERABLE_VIEWS: descendants, hourglass, cohort, population, relationship).
+     * Called with the new order; pass it back as `layoutSync(projection, { nodeOrder })`.
+     */
+    onNodeOrderChange?: (nodeOrder: string[]) => void;
+    /** The current chosen order (what you passed to the layout), so a drag extends it. */
+    nodeOrder?: readonly string[];
     /** Accessible labels for the controls. */
     labels?: Partial<Record<'zoomIn' | 'zoomOut' | 'fit' | 'download' | 'print' | 'close' | 'open' | 'controls' | 'colors', string>>;
 };

package/dist/PedigreeExplorer.js

@@ -1,10 +1,13 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { REORDERABLE_VIEWS } from '@captiveorigins/onepedigree-core';
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { AhnentafelList } from './AhnentafelList.js';
 import { DEFAULT_TERMS, describeStructure, labelOf } from './describe.js';
 import { nearestNode, useOccurrenceHighlighting, usePedigreeSelection } from './hooks.js';
 import { PedigreeView } from './PedigreeView.js';
+import { Icon } from './icons.js';
+import { dropNodeOrder } from './reorder.js';
 import { ThemeEditor } from './ThemeEditor.js';
 import { presetTheme, THEME_PRESETS, themeStyle } from './themes.js';
 const LABELS = {
@@ -65,6 +68,10 @@ export function PedigreeExplorer(props) {
         props.onThemeChange?.(t);
     };
     const drag = useRef(null);
+    // Dragging a node (rearranging) moves the element directly while the pointer is down: no re-render per frame.
+    const nodeDrag = useRef(null);
+    const suppressClick = useRef(false);
+    const reorderable = Boolean(props.onNodeOrderChange) && REORDERABLE_VIEWS.has(projection.view);
     const choose = useCallback((occ) => {
         select(occ?.individualId ?? null);
         setSelectedOccurrence(occ?.occurrenceId ?? null);
@@ -83,7 +90,7 @@ export function PedigreeExplorer(props) {
     }, [full]);
     const pan = (dx, dy) => setBox((b) => ({ ...b, x: b.x + dx * b.width, y: b.y + dy * b.height }));
     const svgPoint = (e) => {
-        const svg = root.current?.querySelector('svg');
+        const svg = root.current?.querySelector('svg.op-root');
         const r = svg?.getBoundingClientRect();
         if (!r || !r.width || !r.height)
             return undefined;
@@ -128,24 +135,73 @@ export function PedigreeExplorer(props) {
             return;
         zoom(e.deltaY > 0 ? 1.1 : 0.9, svgPoint(e));
     };
+    const svgScale = () => {
+        const r = root.current?.querySelector('svg.op-root')?.getBoundingClientRect();
+        return r?.width ? Math.max(box.width / r.width, box.height / r.height) : 1;
+    };
     const onPointerDown = (e) => {
-        if (e.target.closest('.op-node, button, a'))
+        const target = e.target;
+        if (target.closest('button, a, .op-toolbar, .op-quick-view, .op-theme-panel'))
+            return;
+        const nodeEl = target.closest('.op-node');
+        if (nodeEl) {
+            const id = nodeEl.getAttribute('data-occurrence');
+            if (reorderable && id)
+                nodeDrag.current = { x: e.clientX, y: e.clientY, id, el: nodeEl, moved: false };
             return;
+        }
         drag.current = { x: e.clientX, y: e.clientY, box };
         e.currentTarget.setPointerCapture?.(e.pointerId);
     };
     const onPointerMove = (e) => {
+        const n = nodeDrag.current;
+        if (n) {
+            if (!n.moved && Math.hypot(e.clientX - n.x, e.clientY - n.y) < 4)
+                return;
+            if (!n.moved)
+                e.currentTarget.setPointerCapture?.(e.pointerId);
+            n.moved = true;
+            const k = svgScale();
+            n.el.style.translate = `${(e.clientX - n.x) * k}px ${(e.clientY - n.y) * k}px`;
+            n.el.setAttribute('data-dragging', '');
+            return;
+        }
         const d = drag.current;
-        const r = root.current?.querySelector('svg')?.getBoundingClientRect();
+        const r = root.current?.querySelector('svg.op-root')?.getBoundingClientRect();
         if (!d || !r?.width)
             return;
         setBox({ ...d.box, x: d.box.x - ((e.clientX - d.x) / r.width) * d.box.width, y: d.box.y - ((e.clientY - d.y) / r.height) * d.box.height });
     };
-    const onPointerUp = () => {
+    const onPointerUp = (e) => {
         drag.current = null;
+        const n = nodeDrag.current;
+        nodeDrag.current = null;
+        if (!n?.moved)
+            return;
+        n.el.style.translate = '';
+        n.el.removeAttribute('data-dragging');
+        suppressClick.current = true;
+        const k = svgScale();
+        // Only among nodes in the same drawn groups (clutch/litter frames, other-parent groups) and with the same
+        // parents, so frames and family lines stay truthful.
+        const groupOf = (id) => [
+            ...(projection.groups ?? []).filter((g) => g.occurrenceIds.includes(id)).map((g) => g.id),
+            projection.edges.filter((ed) => ed.target === id).map((ed) => ed.source).sort().join('+'),
+        ].join('|');
+        const order = dropNodeOrder(layout, n.id, { dx: (e.clientX - n.x) * k, dy: (e.clientY - n.y) * k }, props.nodeOrder, groupOf);
+        if (order)
+            props.onNodeOrderChange(order);
+    };
+    const onPointerCancel = () => {
+        drag.current = null;
+        if (nodeDrag.current) {
+            nodeDrag.current.el.style.translate = '';
+            nodeDrag.current.el.removeAttribute('data-dragging');
+        }
+        nodeDrag.current = null;
     };
     const download = () => {
-        const svg = root.current?.querySelector('svg');
+        const svg = root.current?.querySelector('svg.op-root');
         if (!svg)
             return;
         const clone = svg.cloneNode(true);
@@ -177,5 +233,11 @@ export function PedigreeExplorer(props) {
     const individual = occurrence ? projection.individuals[occurrence.individualId] : undefined;
     const href = individual ? (props.getIndividualHref?.(individual) ?? null) : null;
     const close = () => choose(null);
-    return (_jsxs("div", { ref: root, className: "op-explorer", style: { height: props.height ?? '32rem', ...(theme ? { ...themeStyle(theme, projection.view), background: 'var(--op-background)' } : {}) }, onKeyDown: onKeyDown, onWheel: onWheel, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, children: [_jsxs("div", { className: "op-toolbar", role: "toolbar", "aria-label": labels.controls, children: [_jsx("button", { type: "button", onClick: () => zoom(0.8), "aria-label": labels.zoomIn, title: labels.zoomIn, children: "+" }), _jsx("button", { type: "button", onClick: () => zoom(1.25), "aria-label": labels.zoomOut, title: labels.zoomOut, children: "\u2212" }), _jsx("button", { type: "button", onClick: () => setBox(full), "aria-label": labels.fit, title: labels.fit, children: "\u2922" }), _jsx("button", { type: "button", onClick: download, "aria-label": labels.download, title: labels.download, children: "\u2913" }), _jsx("button", { type: "button", onClick: () => (props.onPrint ? props.onPrint() : printChart(root.current)), "aria-label": labels.print, title: labels.print, children: "\u2399" }), props.themeEditor && (_jsx("button", { type: "button", onClick: () => setEditing((v) => !v), "aria-label": labels.colors, title: labels.colors, "aria-expanded": editing, children: "\u25D0" })), props.toolbar] }), props.themeEditor && editing && (_jsx("div", { className: "op-theme-panel", children: _jsx(ThemeEditor, { value: theme ?? structuredClone(THEME_PRESETS[0]), view: projection.view, onChange: changeTheme }) })), projection.view === 'ahnentafel' ? (_jsx(AhnentafelList, { projection: projection, terminology: props.terminology, parentWords: props.parentWords, getIndividualHref: props.getIndividualHref, selectedIndividualId: selectedId, onSelect: (individualId) => choose(projection.occurrences.find((o) => o.individualId === individualId) ?? null) })) : (_jsx(PedigreeView, { ...props, theme: theme, interactive: true, viewBox: box, selectedIndividualId: selectedId, highlightedOccurrenceIds: highlighted, onNodeClick: (occ) => choose(selectedOccurrence === occ.occurrenceId ? null : occ), onNodeKeyDown: onNodeKeyDown, svgProps: { ...props.svgProps, width: '100%', height: '100%', preserveAspectRatio: 'xMidYMid meet' } })), occurrence && (_jsx("div", { className: "op-quick-view", role: "dialog", "aria-label": labelOf(individual, terms), children: props.renderQuickView ? (props.renderQuickView({ individual, occurrence, href, close })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "op-quick-view-title", children: labelOf(individual, terms) }), individual?.sex && _jsx("p", { children: individual.sex }), _jsx("p", { children: describeStructure(projection.structures[occurrence.individualId]) }), occurrence.repeated && _jsx("p", { children: terms.repeated }), _jsxs("div", { className: "op-quick-view-actions", children: [href && _jsx("a", { href: href, children: labels.open }), _jsx("button", { type: "button", onClick: close, children: labels.close })] })] })) }))] }));
+    return (_jsxs("div", { ref: root, className: "op-explorer", style: { height: props.height ?? '32rem', ...(theme ? { ...themeStyle(theme, projection.view), background: 'var(--op-background)' } : {}) }, onKeyDown: onKeyDown, onWheel: onWheel, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerCancel, onClickCapture: (e) => {
+            // A drag ends with a click on the node: don't let it select.
+            if (suppressClick.current) {
+                suppressClick.current = false;
+                e.stopPropagation();
+            }
+        }, "data-reorderable": reorderable ? '' : undefined, children: [_jsxs("div", { className: "op-toolbar", 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(full), "aria-label": labels.fit, title: labels.fit, children: _jsx(Icon, { name: "fit" }) }), _jsx("button", { type: "button", onClick: download, "aria-label": labels.download, title: labels.download, children: _jsx(Icon, { name: "download" }) }), _jsx("button", { type: "button", onClick: () => (props.onPrint ? props.onPrint() : printChart(root.current)), "aria-label": labels.print, title: labels.print, children: _jsx(Icon, { name: "print" }) }), props.themeEditor && (_jsx("button", { type: "button", onClick: () => setEditing((v) => !v), "aria-label": labels.colors, title: labels.colors, "aria-expanded": editing, children: _jsx(Icon, { name: "palette" }) })), props.toolbar] }), props.themeEditor && editing && (_jsx("div", { className: "op-theme-panel", children: _jsx(ThemeEditor, { value: theme ?? structuredClone(THEME_PRESETS[0]), view: projection.view, onChange: changeTheme }) })), projection.view === 'ahnentafel' ? (_jsx(AhnentafelList, { projection: projection, terminology: props.terminology, parentWords: props.parentWords, getIndividualHref: props.getIndividualHref, selectedIndividualId: selectedId, onSelect: (individualId) => choose(projection.occurrences.find((o) => o.individualId === individualId) ?? null) })) : (_jsx(PedigreeView, { ...props, theme: theme, interactive: true, viewBox: box, selectedIndividualId: selectedId, highlightedOccurrenceIds: highlighted, onNodeClick: (occ) => choose(selectedOccurrence === occ.occurrenceId ? null : occ), onNodeKeyDown: onNodeKeyDown, svgProps: { ...props.svgProps, width: '100%', height: '100%', preserveAspectRatio: 'xMidYMid meet' } })), occurrence && (_jsx("div", { className: "op-quick-view", role: "dialog", "aria-label": labelOf(individual, terms), children: props.renderQuickView ? (props.renderQuickView({ individual, occurrence, href, close })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "op-quick-view-title", children: labelOf(individual, terms) }), individual?.sex && _jsx("p", { children: individual.sex }), _jsx("p", { children: describeStructure(projection.structures[occurrence.individualId]) }), occurrence.repeated && _jsx("p", { children: terms.repeated }), _jsxs("div", { className: "op-quick-view-actions", children: [href && (_jsxs("a", { href: href, children: [_jsx(Icon, { name: "open" }), labels.open] })), _jsxs("button", { type: "button", onClick: close, children: [_jsx(Icon, { name: "close" }), labels.close] })] })] })) }))] }));
 }

package/dist/icons.d.ts

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

package/dist/index.d.ts

@@ -3,3 +3,5 @@ export { PedigreeExplorer, type PedigreeExplorerProps, type QuickViewProps } fro
 export * from './headless.js';
 export { ThemeEditor, type ThemeEditorProps } from './ThemeEditor.js';
 export { AhnentafelList, ahnentafelRelation, type AhnentafelListProps } from './AhnentafelList.js';
+export { Icon, ICON_PATHS, type IconName } from './icons.js';
+export { dropNodeOrder } from './reorder.js';

package/dist/index.js

@@ -3,3 +3,5 @@ export { PedigreeExplorer } from './PedigreeExplorer.js';
 export * from './headless.js';
 export { ThemeEditor } from './ThemeEditor.js';
 export { AhnentafelList, ahnentafelRelation } from './AhnentafelList.js';
+export { Icon, ICON_PATHS } from './icons.js';
+export { dropNodeOrder } from './reorder.js';

package/dist/reorder.d.ts

@@ -0,0 +1,14 @@
+import type { LayoutResult } from '@captiveorigins/onepedigree-core';
+/**
+ * Where a dragged node lands in its row (click-and-drag rearranging, shared idea with
+ * OneTaxonomy). Rows are generations: same y in vertical charts, same x in horizontal
+ * ones. Returns the new `nodeOrder` for `layoutSync` (the row's order replaces any
+ * earlier choice for those nodes), or null when nothing changes. The layout applies
+ * it only where order is a choice (REORDERABLE_VIEWS), e.g. among siblings.
+ */
+export declare function dropNodeOrder(layout: LayoutResult, occurrenceId: string, delta: {
+    dx: number;
+    dy: number;
+}, current?: readonly string[], 
+/** Nodes only move among others of the same group (e.g. the same clutch), so grouped frames stay truthful. */
+groupOf?: (occurrenceId: string) => string | null | undefined): string[] | null;

package/dist/reorder.js

@@ -0,0 +1,28 @@
+/**
+ * Where a dragged node lands in its row (click-and-drag rearranging, shared idea with
+ * OneTaxonomy). Rows are generations: same y in vertical charts, same x in horizontal
+ * ones. Returns the new `nodeOrder` for `layoutSync` (the row's order replaces any
+ * earlier choice for those nodes), or null when nothing changes. The layout applies
+ * it only where order is a choice (REORDERABLE_VIEWS), e.g. among siblings.
+ */
+export function dropNodeOrder(layout, occurrenceId, delta, current = [], 
+/** Nodes only move among others of the same group (e.g. the same clutch), so grouped frames stay truthful. */
+groupOf) {
+    const vertical = layout.orientation === 'vertical';
+    const self = layout.nodes.find((n) => n.occurrenceId === occurrenceId);
+    if (!self)
+        return null;
+    const rowOf = (n) => (vertical ? n.y : n.x);
+    const along = (n) => (vertical ? n.x + n.width / 2 : n.y + n.height / 2);
+    const group = groupOf?.(occurrenceId);
+    const row = layout.nodes.filter((n) => Math.abs(rowOf(n) - rowOf(self)) < 0.5 && (!groupOf || groupOf(n.occurrenceId) === group));
+    if (row.length < 2)
+        return null;
+    const before = [...row].sort((a, b) => along(a) - along(b)).map((n) => n.occurrenceId);
+    const moved = along(self) + (vertical ? delta.dx : delta.dy);
+    const after = [...row].sort((a, b) => (a === self ? moved : along(a)) - (b === self ? moved : along(b))).map((n) => n.occurrenceId);
+    if (after.every((id, i) => id === before[i]))
+        return null;
+    const inRow = new Set(after);
+    return [...current.filter((id) => !inRow.has(id)), ...after];
+}

package/dist/styles.css

@@ -86,10 +86,18 @@
 .op-explorer > svg:active { cursor: grabbing; }
 .op-toolbar { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; z-index: 1; }
 .op-toolbar button {
+  display: inline-flex; align-items: center; justify-content: center;
   min-width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--op-node-border, #6b7a90);
   background: var(--op-node-background, #fff); color: inherit; font: inherit; cursor: pointer;
 }
-.op-toolbar button:focus-visible { outline: 2px solid #f0b35a; outline-offset: 2px; }
+/* Brand family (brand/README.md): shared line icons, Captive Origins orange focus ring. */
+.op-icon { flex: none; }
+.op-explorer[data-reorderable] .op-node { cursor: grab; }
+.op-node[data-dragging] { cursor: grabbing; opacity: 0.85; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.18)); }
+.op-toolbar button:focus-visible, .op-quick-view-actions :is(a, button):focus-visible { outline: 2px solid #cf8137; outline-offset: 2px; }
+@media (prefers-color-scheme: dark) {
+  .op-toolbar button:focus-visible, .op-quick-view-actions :is(a, button):focus-visible { outline-color: #e7a066; }
+}
 .op-quick-view {
   position: absolute; left: 8px; bottom: 8px; max-width: 18rem; padding: 12px 14px; border-radius: 10px;
   background: var(--op-node-background, #fff); border: 1px solid var(--op-node-border, #6b7a90);
@@ -98,6 +106,7 @@
 .op-quick-view p { margin: 0 0 4px; }
 .op-quick-view-title { font-weight: 600; }
 .op-quick-view-actions { display: flex; gap: 8px; margin-top: 8px; }
+.op-quick-view-actions :is(a, button) { display: inline-flex; align-items: center; gap: 4px; }
 .op-theme-panel {
   position: absolute; top: 48px; right: 8px; z-index: 2; max-height: calc(100% - 56px); overflow: auto; width: 20rem;
   padding: 12px; border-radius: 10px; background: var(--op-node-background, #fff); color: var(--op-label, #1d2330);

package/package.json

@@ -1,7 +1,11 @@
 {
   "name": "@captiveorigins/onepedigree-react",
-  "version": "0.1.0-alpha.8",
-  "description": "OnePedigree for React: server-renderable SVG pedigree views (all 13), interactive explorer, headless hooks and CSS-variable styling.",
+  "version": "0.1.0-alpha.9",
+  "description": "OnePedigree for React: server-renderable SVG pedigree views (all 13), an interactive explorer, headless hooks and CSS-variable styling.",
+  "homepage": "https://github.com/mgilardi/onepedigree#readme",
+  "bugs": {
+    "url": "https://github.com/mgilardi/onepedigree/issues"
+  },
   "keywords": [
     "pedigree",
     "genealogy",
@@ -42,7 +46,7 @@
     "node": ">=22"
   },
   "dependencies": {
-    "@captiveorigins/onepedigree-core": "^0.1.0-alpha.8"
+    "@captiveorigins/onepedigree-core": "^0.1.0-alpha.9"
   },
   "peerDependencies": {
     "react": ">=18.2"