@softov/scena 0.1.2

package/dist/ui/data/Listable.d.ts

@@ -0,0 +1,60 @@
+import { type CSSProperties, type DragEvent as ReactDragEvent, type ReactNode } from 'react';
+import type { BindingPath } from '../../types/component-graph.js';
+import './Listable.css';
+export interface ListableRenderContext {
+    tableMode: boolean;
+    containerWidth: number;
+}
+export interface ListableCellProps {
+    style?: CSSProperties;
+    className?: string;
+}
+export interface ListableTitleProps {
+    title?: string;
+    hidden?: boolean;
+    style?: CSSProperties;
+    className?: string;
+}
+export interface ListableColumn<T> {
+    key: string;
+    label: ReactNode;
+    render: (item: T, ctx: ListableRenderContext) => ReactNode;
+    hidden?: boolean;
+    mode?: 'list' | 'table';
+    visible?: (item: T) => boolean;
+    sortable?: boolean | ((a: T, b: T) => number);
+    cellProps?: (item: T, ctx: ListableRenderContext) => ListableCellProps;
+    titleProps?: (item: T | undefined, ctx: ListableRenderContext) => ListableTitleProps;
+    align?: 'left' | 'right';
+    width?: string | ((ctx: ListableRenderContext) => string);
+    showAt?: number;
+    style?: CSSProperties;
+}
+export interface ListableSort {
+    key: string;
+    direction: 'asc' | 'desc';
+}
+export interface ListableProps<T> {
+    items: T[];
+    columns: ListableColumn<T>[];
+    getKey: (item: T) => string;
+    title?: ReactNode;
+    toolbar?: ReactNode;
+    selectedKey?: string | null;
+    onSelect?: (item: T) => void;
+    onActivate?: (item: T) => void;
+    initialSort?: ListableSort;
+    sort?: ListableSort | null;
+    onSortChange?: (next: ListableSort | null) => void;
+    tableBreakpoint?: number;
+    renderListRow?: (item: T) => ReactNode;
+    contextMenuSlot?: string;
+    contextFor?: (item: T) => Record<string, unknown>;
+    contextDataContext?: BindingPath;
+    onRowDragStart?: (e: ReactDragEvent<HTMLElement>, item: T) => void;
+    emptyState?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    manageKeys?: boolean;
+}
+export declare function Listable<T>({ items, columns, getKey, title, toolbar, selectedKey, onSelect, onActivate, initialSort, sort, onSortChange, tableBreakpoint, renderListRow, contextMenuSlot, contextFor, contextDataContext, onRowDragStart, emptyState, className, style, manageKeys, }: ListableProps<T>): ReactNode;

package/dist/ui/data/Listable.js

@@ -0,0 +1,209 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState, } from 'react';
+import { ContextMenu } from '../menu/ContextMenu.js';
+import './Listable.css';
+function getValueAt(item, key) {
+    if (item == null || typeof item !== 'object')
+        return undefined;
+    return item[key];
+}
+function defaultCompare(a, b, key) {
+    const va = getValueAt(a, key);
+    const vb = getValueAt(b, key);
+    if (va == null && vb == null)
+        return 0;
+    if (va == null)
+        return -1;
+    if (vb == null)
+        return 1;
+    if (typeof va === 'number' && typeof vb === 'number')
+        return va - vb;
+    return String(va).localeCompare(String(vb));
+}
+function sortItems(items, columns, sort) {
+    if (!sort)
+        return items;
+    const col = columns.find((c) => c.key === sort.key);
+    if (!col || !col.sortable)
+        return items;
+    const cmp = typeof col.sortable === 'function'
+        ? col.sortable
+        : (a, b) => defaultCompare(a, b, col.key);
+    const sign = sort.direction === 'asc' ? 1 : -1;
+    return [...items].sort((a, b) => sign * cmp(a, b));
+}
+const DEFAULT_TABLE_BREAKPOINT = 480;
+export function Listable({ items, columns, getKey, title, toolbar, selectedKey, onSelect, onActivate, initialSort, sort, onSortChange, tableBreakpoint = DEFAULT_TABLE_BREAKPOINT, renderListRow, contextMenuSlot, contextFor, contextDataContext, onRowDragStart, emptyState, className, style, manageKeys = false, }) {
+    const rootRef = useRef(null);
+    const [containerWidth, setContainerWidth] = useState(0);
+    const [internalSort, setInternalSort] = useState(initialSort ?? null);
+    useEffect(() => {
+        const el = rootRef.current;
+        if (!el)
+            return;
+        const ro = new ResizeObserver(([entry]) => {
+            if (entry)
+                setContainerWidth(entry.contentRect.width);
+        });
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, []);
+    const tableMode = containerWidth >= tableBreakpoint;
+    const sortControlled = sort !== undefined;
+    const activeSort = sortControlled ? sort : internalSort;
+    const visibleColumns = useMemo(() => columns.filter((c) => !c.hidden &&
+        (tableMode || c.mode !== 'table') &&
+        (c.showAt == null || containerWidth >= c.showAt)), [columns, tableMode, containerWidth]);
+    // Declared before the track template, which now depends on it: a column's
+    // width may be a function of the measured container.
+    const renderCtx = useMemo(() => ({ tableMode, containerWidth }), [tableMode, containerWidth]);
+    // One track per visible column, in order — so a cell's position in the row
+    // is exactly its position in `columns` and nothing has to be placed by hand.
+    const gridTemplate = useMemo(() => visibleColumns
+        .map((c) => (typeof c.width === 'function' ? c.width(renderCtx) : c.width))
+        .map((track) => track ?? 'minmax(0, 1fr)')
+        .join(' '), [visibleColumns, renderCtx]);
+    const sortedItems = useMemo(() => sortItems(items, columns, activeSort ?? null), [items, columns, activeSort]);
+    function handleHeaderClick(col) {
+        if (!col.sortable)
+            return;
+        const cur = activeSort;
+        const next = !cur || cur.key !== col.key
+            ? { key: col.key, direction: 'asc' }
+            : cur.direction === 'asc'
+                ? { key: col.key, direction: 'desc' }
+                : null;
+        if (sortControlled)
+            onSortChange?.(next);
+        else
+            setInternalSort(next);
+    }
+    // Scroll the selected row into view when it changes externally.
+    useEffect(() => {
+        if (!selectedKey || !rootRef.current)
+            return;
+        const row = rootRef.current.querySelector(`[data-key="${cssEscape(selectedKey)}"]`);
+        if (row)
+            row.scrollIntoView({ block: 'nearest' });
+    }, [selectedKey]);
+    // ── Keyboard ───────────────────────────────────────────────────────────
+    const selectedIndex = selectedKey
+        ? sortedItems.findIndex((it) => getKey(it) === selectedKey)
+        : -1;
+    function handleKeyDown(e) {
+        if (sortedItems.length === 0)
+            return;
+        const cur = selectedIndex >= 0 ? selectedIndex : 0;
+        switch (e.key) {
+            case 'ArrowDown': {
+                e.preventDefault();
+                const next = sortedItems[Math.min(sortedItems.length - 1, cur + 1)];
+                if (next)
+                    onSelect?.(next);
+                return;
+            }
+            case 'ArrowUp': {
+                e.preventDefault();
+                const next = sortedItems[Math.max(0, cur - 1)];
+                if (next)
+                    onSelect?.(next);
+                return;
+            }
+            case 'Enter':
+            case ' ': {
+                e.preventDefault();
+                const it = sortedItems[cur];
+                if (it)
+                    onActivate?.(it);
+                return;
+            }
+        }
+    }
+    // ── Context menu ───────────────────────────────────────────────────────
+    const [menu, setMenu] = useState(null);
+    function openContextMenu(e, item) {
+        if (!contextMenuSlot)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        // onSelect?.(item);
+        setMenu({ x: e.clientX, y: e.clientY, item });
+    }
+    // One table cell. Placement is the cell's own business via `cellProps`; a
+    // wrapped cell needs none, because the strip it sits in is what the grid
+    // places.
+    function renderTableCell(col, item) {
+        const extra = col.cellProps?.(item, renderCtx);
+        // `col.style` was declared and then only ever applied in the stacked row,
+        // so a column that set one was silently ignored in table mode. The per-row
+        // props win over it, being the more specific of the two.
+        const style = col.style === undefined && extra?.style === undefined
+            ? undefined
+            : { ...col.style, ...extra?.style };
+        return (_jsx("div", { role: "cell", className: extra?.className === undefined
+                ? 'oo-listable__cell'
+                : `oo-listable__cell ${extra.className}`, "data-align": col.align ?? 'left', title: col.titleProps?.(item, renderCtx).title, 
+            // `undefined` rather than `{}` when there is nothing to say: an empty
+            // object literal is a new reference on every render, which is a prop
+            // change on every cell of every row.
+            style: style, children: renderCellContent(col, item) }, col.key));
+    }
+    // One header cell.
+    function renderHeadCell(col) {
+        const isSorted = activeSort?.key === col.key;
+        // No row to speak of: the header is one cell for the whole column.
+        const head = col.titleProps?.(undefined, renderCtx);
+        return (_jsx("div", { role: "columnheader", className: head?.className === undefined
+                ? 'oo-listable__head-cell'
+                : `oo-listable__head-cell ${head.className}`, "data-align": col.align ?? 'left', "data-sortable": col.sortable ? 'true' : undefined, "data-sorted": isSorted ? activeSort.direction : undefined, title: col.sortable && typeof col.label === 'string' ? `Sort by ${col.label}` : undefined, onClick: col.sortable ? () => handleHeaderClick(col) : undefined, style: head?.style, children: head?.hidden === true ? null : (_jsxs(_Fragment, { children: [_jsx("span", { className: "oo-listable__head-label", children: col.label }), isSorted ? (_jsx("span", { className: "oo-listable__sort-arrow", "aria-hidden": "true", children: activeSort.direction === 'asc' ? '▲' : '▼' })) : null] })) }, col.key));
+    }
+    // ── Render helpers ─────────────────────────────────────────────────────
+    function renderCellContent(col, item) {
+        if (col.visible && !col.visible(item))
+            return null;
+        return col.render(item, renderCtx);
+    }
+    function renderTableRow(item) {
+        const key = getKey(item);
+        const selected = key === selectedKey;
+        return (_jsx("div", { role: "row", "data-key": key, "data-selected": selected ? 'true' : undefined, className: "oo-listable__item oo-listable__row", draggable: onRowDragStart ? true : undefined, onDragStart: onRowDragStart ? (e) => onRowDragStart(e, item) : undefined, onClick: () => {
+                onSelect?.(item);
+            }, onDoubleClick: () => onActivate?.(item), onContextMenu: (e) => openContextMenu(e, item), style: {
+                cursor: onSelect ? 'pointer' : undefined
+            }, children: visibleColumns.map((col) => renderTableCell(col, item)) }, key));
+    }
+    function renderStackedRow(item) {
+        const key = getKey(item);
+        const selected = key === selectedKey;
+        return (_jsx("div", { role: "row", "data-key": key, "data-selected": selected ? 'true' : undefined, className: "oo-listable__item oo-listable__stack", draggable: onRowDragStart ? true : undefined, onDragStart: onRowDragStart ? (e) => onRowDragStart(e, item) : undefined, onClick: () => onSelect?.(item), onDoubleClick: () => onActivate?.(item), onContextMenu: (e) => openContextMenu(e, item), style: {
+                cursor: onSelect ? 'pointer' : undefined
+            }, children: renderListRow
+                ? renderListRow(item)
+                : visibleColumns.map((col) => {
+                    const content = renderCellContent(col, item);
+                    if (content == null)
+                        return null;
+                    // Same contract in both modes. `ctx.tableMode` is false here, so
+                    // a column that only wants to reposition in the table can say so
+                    // without this branch having to know about it.
+                    const extra = col.cellProps?.(item, renderCtx);
+                    return (_jsx("div", { className: extra?.className === undefined
+                            ? 'oo-listable__list-cell'
+                            : `oo-listable__list-cell ${extra.className}`, title: col.titleProps?.(item, renderCtx).title, style: col.style === undefined && extra?.style === undefined
+                            ? undefined
+                            : { ...col.style, ...extra?.style }, children: _jsx("span", { className: "oo-listable__list-value", children: content }) }, col.key));
+                }) }, key));
+    }
+    return (_jsxs("div", { ref: rootRef, role: "table", tabIndex: 0, className: ['oo-listable', className].filter(Boolean).join(' '), "data-mode": tableMode ? 'table' : 'list', style: style, onKeyDown: manageKeys ? handleKeyDown : undefined, children: [title || toolbar ? (_jsxs("header", { className: "oo-listable__header", children: [title ? _jsx("h2", { className: "oo-listable__title", children: title }) : null, toolbar] })) : null, sortedItems.length === 0 ? (_jsx("div", { className: "oo-listable__empty", children: emptyState ?? 'Empty' })) : (
+            // Single grid container in table mode — head-row and every data row
+            // are subgrids that inherit these column tracks, so `auto`/`minmax`
+            // sizing is shared and head cells align with their data cells.
+            _jsxs("div", { className: "oo-listable__rows", role: "rowgroup", style: tableMode
+                    ? { ['--oo-listable-template']: gridTemplate }
+                    : undefined, children: [tableMode ? (_jsx("div", { role: "row", className: "oo-listable__head-row", children: visibleColumns.map((col) => renderHeadCell(col)) })) : null, sortedItems.map((it) => (tableMode ? renderTableRow(it) : renderStackedRow(it)))] })), menu && contextMenuSlot ? (_jsx(ContextMenu, { x: menu.x, y: menu.y, onClose: () => setMenu(null), spec: { query: { slot: contextMenuSlot }, footerHints: true }, context: contextFor ? contextFor(menu.item) : undefined, dataContext: contextDataContext })) : null] }));
+}
+// Cheap CSS-selector escape so a key with `"` or `]` doesn't break the
+// querySelector used by scrollIntoView. Same shape as Tree.tsx.
+function cssEscape(s) {
+    return s.replace(/(["\\\]])/g, '\\$1');
+}

package/dist/ui/data/Pagination.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react';
+export interface PaginationProps {
+    namespace: string;
+}
+export declare function Pagination({ namespace }: PaginationProps): ReactNode;

package/dist/ui/data/Pagination.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useScena } from '../../react/ScenaProvider.js';
+import { useStore } from '../../react/hooks/useStore.js';
+import { useI18n } from '../../react/hooks/useI18n.js';
+// Generic pager bound to a resource's query/view. Writes `$/<ns>/query.page`;
+// the data provider re-resolves the view (server window or client slice).
+// Hidden when everything fits on one page.
+export function Pagination({ namespace }) {
+    const scena = useScena();
+    const { t } = useI18n('query');
+    const view = useStore(`$/${namespace}/view`);
+    const query = useStore(`$/${namespace}/query`);
+    const total = view?.total ?? 0;
+    const page = query?.page ?? 1;
+    const pageSize = query?.pageSize ?? 50;
+    const pages = Math.max(1, Math.ceil(total / pageSize));
+    if (total <= pageSize)
+        return null;
+    const setPage = (p) => scena.store.set(`$/${namespace}/query`, {
+        ...query,
+        page: Math.min(pages, Math.max(1, p)),
+    });
+    return (_jsxs("div", { style: bar, children: [_jsx("button", { style: btn, disabled: page <= 1, onClick: () => setPage(page - 1), "aria-label": "Previous", children: "\u2039" }), _jsx("span", { style: { fontSize: 12, color: 'var(--oo-color-muted, #8a8f98)' }, children: t('pageOf', { page, pages, fallback: '{page} / {pages}' }) }), _jsx("button", { style: btn, disabled: page >= pages, onClick: () => setPage(page + 1), "aria-label": "Next", children: "\u203A" })] }));
+}
+const bar = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 10,
+    padding: '6px 8px',
+    borderTop: '1px solid var(--oo-color-border, #2b2f37)',
+};
+const btn = {
+    appearance: 'none',
+    background: 'none',
+    border: '1px solid var(--oo-color-border, #2b2f37)',
+    borderRadius: 4,
+    color: 'var(--oo-color-text, #e6e8eb)',
+    cursor: 'pointer',
+    width: 24,
+    height: 24,
+    lineHeight: '20px',
+};

package/dist/ui/data/Tree.css

@@ -0,0 +1,118 @@
+.oo-tree {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  outline: none;
+  user-select: none;
+  font-size: var(--oo-font-size-sm);
+  color: var(--oo-color-fg);
+}
+.oo-tree:focus-visible {
+  outline: 1px solid var(--oo-color-accent);
+  outline-offset: -1px;
+}
+
+.oo-tree__header {
+  flex: 0 0 auto;
+  padding: var(--oo-spacing-sm);
+  border-bottom: 1px solid var(--oo-color-border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--oo-spacing-sm);
+}
+.oo-tree__title {
+  margin: 0;
+  font-size: var(--oo-font-size-xs);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--oo-color-muted);
+}
+
+.oo-tree__rows {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  padding: 2px 0;
+}
+
+.oo-tree__row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  height: 24px;
+  padding: 0 8px 0 6px;
+  cursor: pointer;
+  color: inherit;
+  position: relative;
+}
+.oo-tree__row:hover {
+  color: var(--oo-color-surface);
+  background: var(--oo-color-active);
+}
+.oo-tree__row[data-selected='true'] {
+  color: var(--oo-color-surface);
+  background: var(--oo-color-active);
+  box-shadow: inset 2px 0 0 var(--oo-color-accent);
+}
+/* Drop target under an active drag — dotted outline (no layout shift). */
+.oo-tree__row[data-drag-over='true'] {
+  outline: 2px dotted var(--oo-color-accent);
+  outline-offset: -2px;
+  background: var(--oo-color-active);
+}
+
+.oo-tree__twisty {
+  width: 16px;
+  height: 16px;
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--oo-color-muted);
+  font-size: 10px;
+  line-height: 1;
+  padding: 0;
+  transition: transform 80ms ease-out;
+  transform: rotate(0deg);
+}
+.oo-tree__twisty[data-expanded='true'] {
+  transform: rotate(90deg);
+}
+.oo-tree__twisty--leaf {
+  pointer-events: none;
+  visibility: hidden;
+}
+
+.oo-tree__icon {
+  flex: 0 0 auto;
+}
+
+.oo-tree__label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.oo-tree__trailing {
+  flex: 0 0 auto;
+  color: var(--oo-color-muted);
+  font-size: var(--oo-font-size-xs);
+}
+
+.oo-tree__empty {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--oo-color-muted);
+  font-size: var(--oo-font-size-xs);
+  padding: var(--oo-spacing-md);
+}

package/dist/ui/data/Tree.d.ts

@@ -0,0 +1,45 @@
+import { type ClipboardEvent as ReactClipboardEvent, type CSSProperties, type DragEvent as ReactDragEvent, type ReactNode } from 'react';
+import type { BindingPath } from '../../types/component-graph.js';
+import type { PickerAction } from '../../types/host.js';
+import './Tree.css';
+export interface TreeNode<T = unknown> {
+    key: string;
+    label: ReactNode;
+    icon?: string;
+    color?: string;
+    trailing?: ReactNode;
+    data?: T;
+    children?: TreeNode<T>[];
+    draggable?: boolean;
+    dropAccepting?: boolean;
+}
+export interface TreeProps<T = unknown> {
+    nodes: TreeNode<T>[];
+    title?: ReactNode;
+    toolbar?: ReactNode;
+    selectedKey?: string | null;
+    onSelect?: (node: TreeNode<T>) => void;
+    onActivate?: (node: TreeNode<T>) => void;
+    expanded?: Set<string>;
+    defaultExpanded?: Iterable<string>;
+    onExpandedChange?: (next: Set<string>) => void;
+    renderItem?: (node: TreeNode<T>, ctx: {
+        selected: boolean;
+        expanded: boolean;
+        depth: number;
+    }) => ReactNode;
+    contextMenuSlot?: string;
+    contextFor?: (node: TreeNode<T>) => Record<string, unknown>;
+    contextDataContext?: BindingPath;
+    contextExtraItems?: (node: TreeNode<T>) => PickerAction[];
+    onDragStart?: (e: ReactDragEvent<HTMLDivElement>, node: TreeNode<T>) => void;
+    onDragOver?: (e: ReactDragEvent<HTMLDivElement>, node: TreeNode<T>) => void;
+    onDragEnd?: (e: ReactDragEvent<HTMLDivElement>, node: TreeNode<T>) => void;
+    onDrop?: (e: ReactDragEvent<HTMLDivElement>, node: TreeNode<T>) => void;
+    onCopy?: (e: ReactClipboardEvent<HTMLDivElement>, node: TreeNode<T> | null) => void;
+    onPaste?: (e: ReactClipboardEvent<HTMLDivElement>, node: TreeNode<T> | null) => void;
+    emptyState?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function Tree<T = unknown>({ nodes, title, toolbar, selectedKey, onSelect, onActivate, expanded: controlledExpanded, defaultExpanded, onExpandedChange, renderItem, contextMenuSlot, contextFor, contextDataContext, contextExtraItems, onDragStart, onDragOver, onDragEnd, onDrop, onCopy, onPaste, emptyState, className, style, }: TreeProps<T>): ReactNode;

package/dist/ui/data/Tree.js

@@ -0,0 +1,170 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { ContextMenu } from '../menu/ContextMenu.js';
+import './Tree.css';
+import { resolveColorVar } from '../../types/colors.js';
+function flatten(nodes, expanded, depth = 0, parentKey = null, out = []) {
+    for (const n of nodes) {
+        const hasChildren = n.children !== undefined;
+        const isExpanded = hasChildren && expanded.has(n.key);
+        out.push({ node: n, depth, hasChildren, expanded: isExpanded, parentKey });
+        if (isExpanded && n.children)
+            flatten(n.children, expanded, depth + 1, n.key, out);
+    }
+    return out;
+}
+export function Tree({ nodes, title, toolbar, selectedKey, onSelect, onActivate, expanded: controlledExpanded, defaultExpanded, onExpandedChange, renderItem, contextMenuSlot, contextFor, contextDataContext, contextExtraItems, onDragStart, onDragOver, onDragEnd, onDrop, onCopy, onPaste, emptyState, className, style, }) {
+    // Expansion state — controlled vs uncontrolled.
+    const [internalExpanded, setInternalExpanded] = useState(() => new Set(defaultExpanded ?? []));
+    const expanded = controlledExpanded ?? internalExpanded;
+    const setExpanded = useCallback((next) => {
+        if (onExpandedChange)
+            onExpandedChange(next);
+        if (controlledExpanded === undefined)
+            setInternalExpanded(next);
+    }, [controlledExpanded, onExpandedChange]);
+    const flat = useMemo(() => flatten(nodes, expanded), [nodes, expanded]);
+    // Context-menu state per click.
+    const [menu, setMenu] = useState(null);
+    // Which drop-accepting row is currently under the drag (for the drop outline).
+    const [dragOverKey, setDragOverKey] = useState(null);
+    function handleRowDragOver(e, node) {
+        onDragOver?.(e, node);
+        if (node.dropAccepting)
+            setDragOverKey(node.key);
+    }
+    function handleRowDragLeave(e, node) {
+        // Drag events bubble through child elements; ignore leaves that stay inside the row.
+        if (e.currentTarget.contains(e.relatedTarget))
+            return;
+        setDragOverKey((k) => (k === node.key ? null : k));
+    }
+    function handleRowDrop(e, node) {
+        setDragOverKey(null);
+        onDrop?.(e, node);
+    }
+    // Scroll the selected row into view when it changes externally.
+    const rootRef = useRef(null);
+    useEffect(() => {
+        if (!selectedKey || !rootRef.current)
+            return;
+        const row = rootRef.current.querySelector(`[data-key="${cssEscape(selectedKey)}"]`);
+        if (row)
+            row.scrollIntoView({ block: 'nearest' });
+    }, [selectedKey]);
+    function toggleExpand(key) {
+        const next = new Set(expanded);
+        if (next.has(key))
+            next.delete(key);
+        else
+            next.add(key);
+        setExpanded(next);
+    }
+    // ----- Keyboard -----
+    const selectedIndex = selectedKey
+        ? flat.findIndex((r) => r.node.key === selectedKey)
+        : -1;
+    function handleKeyDown(e) {
+        if (flat.length === 0)
+            return;
+        const cur = selectedIndex >= 0 ? selectedIndex : 0;
+        const row = flat[cur];
+        switch (e.key) {
+            case 'ArrowDown': {
+                e.preventDefault();
+                const next = flat[Math.min(flat.length - 1, cur + 1)];
+                if (next)
+                    onSelect?.(next.node);
+                return;
+            }
+            case 'ArrowUp': {
+                e.preventDefault();
+                const next = flat[Math.max(0, cur - 1)];
+                if (next)
+                    onSelect?.(next.node);
+                return;
+            }
+            case 'ArrowRight': {
+                e.preventDefault();
+                if (!row)
+                    return;
+                if (row.hasChildren && !row.expanded) {
+                    toggleExpand(row.node.key);
+                }
+                else if (row.hasChildren && row.expanded) {
+                    const child = flat[cur + 1];
+                    if (child)
+                        onSelect?.(child.node);
+                }
+                return;
+            }
+            case 'ArrowLeft': {
+                e.preventDefault();
+                if (!row)
+                    return;
+                if (row.hasChildren && row.expanded) {
+                    toggleExpand(row.node.key);
+                }
+                else if (row.parentKey) {
+                    const parent = flat.find((r) => r.node.key === row.parentKey);
+                    if (parent)
+                        onSelect?.(parent.node);
+                }
+                return;
+            }
+            case 'Enter':
+            case ' ': {
+                e.preventDefault();
+                if (!row)
+                    return;
+                if (row.hasChildren)
+                    toggleExpand(row.node.key);
+                else
+                    onActivate?.(row.node);
+                return;
+            }
+        }
+    }
+    // Right-click → ContextMenu (when contextMenuSlot is set).
+    function openContextMenu(e, node) {
+        if (!contextMenuSlot)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        onSelect?.(node);
+        setMenu({ x: e.clientX, y: e.clientY, node });
+    }
+    // Clipboard surface — focus owner gets these.
+    function onTreeCopy(e) {
+        const node = selectedKey ? flat.find((r) => r.node.key === selectedKey)?.node ?? null : null;
+        onCopy?.(e, node);
+    }
+    function onTreePaste(e) {
+        const node = selectedKey ? flat.find((r) => r.node.key === selectedKey)?.node ?? null : null;
+        onPaste?.(e, node);
+    }
+    return (_jsxs("div", { ref: rootRef, role: "tree", tabIndex: 0, className: ['oo-tree', className].filter(Boolean).join(' '), style: style, onKeyDown: handleKeyDown, onCopy: onCopy ? onTreeCopy : undefined, onPaste: onPaste ? onTreePaste : undefined, onDragEnd: () => setDragOverKey(null), children: [title || toolbar ? (_jsxs("header", { className: "oo-tree__header", children: [title ? _jsx("h2", { className: "oo-tree__title", children: title }) : null, toolbar] })) : null, flat.length === 0 ? (_jsx("div", { className: "oo-tree__empty", children: emptyState ?? 'Empty' })) : (_jsx("div", { className: "oo-tree__rows", role: "presentation", children: flat.map((row) => {
+                    const { node, depth, hasChildren, expanded: rowExpanded } = row;
+                    const selected = node.key === selectedKey;
+                    return (_jsxs("div", { role: "treeitem", "aria-level": depth + 1, "aria-expanded": hasChildren ? rowExpanded : undefined, "aria-selected": selected, "data-key": node.key, "data-selected": selected ? 'true' : undefined, "data-drag-over": node.key === dragOverKey ? 'true' : undefined, tabIndex: -1, draggable: node.draggable ?? false, className: `oo-tree__row ${node.draggable ? 'oo-draggable' : ''}`, style: { paddingLeft: depth * 14 + 6 }, onClick: () => onSelect?.(node), onDoubleClick: () => {
+                            if (hasChildren)
+                                toggleExpand(node.key);
+                            else
+                                onActivate?.(node);
+                        }, onContextMenu: (e) => openContextMenu(e, node), onDragStart: onDragStart ? (e) => onDragStart(e, node) : undefined, onDragOver: onDragOver ? (e) => handleRowDragOver(e, node) : undefined, onDragLeave: onDragOver ? (e) => handleRowDragLeave(e, node) : undefined, onDragEnd: onDragEnd ? (e) => onDragEnd(e, node) : undefined, onDrop: onDrop ? (e) => handleRowDrop(e, node) : undefined, children: [hasChildren ? (_jsx("button", { type: "button", "aria-label": rowExpanded ? 'Collapse' : 'Expand', className: "oo-tree__twisty", "data-expanded": rowExpanded ? 'true' : undefined, onClick: (e) => {
+                                    e.stopPropagation();
+                                    toggleExpand(node.key);
+                                }, children: "\u25B8" })) : (_jsx("span", { className: "oo-tree__twisty oo-tree__twisty--leaf" })), renderItem ? (renderItem(node, { selected, expanded: rowExpanded, depth })) : (_jsx(DefaultRowBody, { node: node }))] }, node.key));
+                }) })), menu && contextMenuSlot ? (_jsx(ContextMenu, { x: menu.x, y: menu.y, onClose: () => setMenu(null), spec: { query: { slot: contextMenuSlot }, extraItems: contextExtraItems ? contextExtraItems(menu.node) : undefined, footerHints: true }, context: contextFor ? contextFor(menu.node) : undefined, dataContext: contextDataContext })) : null] }));
+}
+function DefaultRowBody({ node }) {
+    const iconStyle = node.color
+        ? { ['--oo-color']: resolveColorVar(node.color) }
+        : undefined;
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: "oo-icon oo-tree__icon", style: iconStyle, children: node.icon ?? '·' }), _jsx("span", { className: "oo-tree__label", children: node.label }), node.trailing ? _jsx("span", { className: "oo-tree__trailing", children: node.trailing }) : null] }));
+}
+// Cheap CSS-selector escape so a node key with `"` or `]` doesn't break the
+// querySelector used by scrollIntoView. Avoids a full polyfill.
+function cssEscape(s) {
+    return s.replace(/(["\\\]])/g, '\\$1');
+}

package/dist/ui/data/catalog.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentDefinition } from '../../types/component-registry.js';
+export declare const CATALOG_DATA_MAP: ComponentDefinition[];

package/dist/ui/data/catalog.js

@@ -0,0 +1,7 @@
+// Catalog registration for data components (dynamic import — no eager load).
+export const CATALOG_DATA_MAP = [
+    { component: 'List', category: 'inline', renderer: { kind: 'react', load: () => import('./List.js').then((m) => ({ default: m.List })) } },
+    { component: 'DataTable', category: 'inline', renderer: { kind: 'react', load: () => import('./DataTable.js').then((m) => ({ default: m.DataTable })) } },
+    { component: 'Pagination', category: 'inline', renderer: { kind: 'react', load: () => import('./Pagination.js').then((m) => ({ default: m.Pagination })) } },
+    { component: 'Filter', category: 'inline', renderer: { kind: 'react', load: () => import('./Filter.js').then((m) => ({ default: m.Filter })) } },
+];