@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.1

package/data-grid/behaviour.js

@@ -0,0 +1,725 @@
+// Rivet-authored (not a port): event handlers of `@rivetjs/cdk/data-grid`. Feature set inspired by HeroUI Pro's public
+// DataGrid docs; independent implementation. Keyboard / selection semantics follow React Aria's table (useGrid /
+// useTableColumnHeader / useSelectableCollection / useSelectableItem, Apache-2.0, © Adobe) over flat data rows:
+// - rows are focusable (row focus), ArrowLeft / ArrowRight move into cells and back to the row (wrapping like RA's
+//   GridKeyboardDelegate), focusable children of a cell (buttons, inputs, the resizer) are walked before leaving it;
+// - ArrowUp from the first row's cell → column header; Home / End (cell: first / last cell, row or Ctrl: first / last row);
+//   PageUp / PageDown by a viewport of rows; typeahead on the row-header column;
+// - selection: Space toggles, Shift+Arrow / Shift+click extend from the anchor (multiple), Ctrl/Cmd+A selects all,
+//   Escape clears (unless `disallowEmptySelection`); "replace" behaviour moves the selection with the focus (no Ctrl);
+// - Enter: header → sort, row → `onRowAction` (else selects in "replace" mode); treegrid ArrowRight / ArrowLeft expand /
+//   collapse (collapsed child row: ArrowLeft → parent).
+// Handlers are DELEGATED on the `<table>` (one listener per event type, no per-row closures): rows / cells are found with
+// `closest()`; the context `ctx` is plain data (signals + controlled states + arrows) built by `./index.tsx`.
+// Closures created here (window listeners during a drag / resize) are browser-only and never serialized.
+import { batch, untrack } from "@rivetjs/reactivity";
+import { controlledValue, setControlledValue } from "../interactions/controllable.js";
+import { announce } from "../announcer/live-announcer.js";
+import { clampColumnWidth, isKeySelected, nextSortDescriptor, rangeSelection, reorderItems, replaceSelection, scrollTopFor, selectAllState, toggleExpandedKey, toggleKeySelection, virtualWindow, } from "./state.js";
+/** Column ids of the utility columns the grid prepends. */
+export const SELECT_COLUMN = "__rv_select";
+export const DRAG_COLUMN = "__rv_drag";
+// ---------------------------------------------------------------------------------------------------------------
+// DOM helpers
+// ---------------------------------------------------------------------------------------------------------------
+const EDITABLE = "input, textarea, select, [contenteditable=''], [contenteditable='true']";
+const INTERACTIVE = "a[href], button, input, textarea, select, label, [contenteditable=''], [contenteditable='true'], [data-grid-ignore]";
+const FOCUSABLE = "a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]";
+const escapeKey = (key) => (typeof CSS !== "undefined" && CSS.escape ? CSS.escape(String(key)) : String(key).replace(/"/g, '\\"'));
+const tableOf = (el) => el.closest("table");
+const scrollerOf = (table) => table.parentElement;
+export const rowElement = (table, key) => table.querySelector(`tbody > tr[data-key="${escapeKey(key)}"]`);
+const cellIn = (row, col) => row.querySelector(`:scope > [data-column="${escapeKey(col)}"]`);
+const headerCell = (table, col) => table.querySelector(`thead [data-column="${escapeKey(col)}"]`);
+/** The row key of a `<tr data-key>` (numeric keys round-trip through `data-key-type`). */
+export function keyOf(row) {
+    const raw = row.getAttribute("data-key");
+    return row.getAttribute("data-key-type") === "number" ? Number(raw) : raw;
+}
+const rowIndex = (ctx, key) => (key == null ? -1 : ctx.rows().findIndex((r) => r.key === key));
+const isDisabledKey = (ctx, key) => ctx.disabled().has(key);
+const colIds = (ctx) => ctx.columns().map((c) => c.id);
+function focusables(cell) {
+    return [...cell.querySelectorAll(FOCUSABLE)].filter((el) => el.tabIndex >= -1 && !el.hasAttribute("disabled") && el.getAttribute("aria-hidden") !== "true");
+}
+function focusElement(el, scroll) {
+    if (!el)
+        return;
+    el.focus({ preventScroll: true });
+    if (scroll && typeof el.scrollIntoView === "function")
+        el.scrollIntoView({ block: "nearest", inline: "nearest" });
+}
+/** Keep the virtual window around row `index` and scroll it into view. */
+function revealRow(ctx, table, index) {
+    if (!ctx.virtual())
+        return;
+    const scroller = scrollerOf(table);
+    const top = scrollTopFor(index, ctx.rowHeight(), ctx.headerHeight(), scroller.scrollTop, scroller.clientHeight);
+    if (top !== scroller.scrollTop)
+        scroller.scrollTop = top;
+    updateWindow(ctx, scroller);
+}
+/** Recompute the virtual window from the scroller (scroll handler, keyboard reveal). */
+export function updateWindow(ctx, scroller) {
+    if (!ctx.virtual())
+        return;
+    const next = virtualWindow(scroller.scrollTop - 0, scroller.clientHeight - ctx.headerHeight(), ctx.rowHeight(), untrack(ctx.rows).length, ctx.overscan());
+    const prev = untrack(ctx.win);
+    if (prev.start !== next.start || prev.end !== next.end)
+        ctx.win.set(next);
+}
+/** Focus row `key` (column `col`: a cell, `null`: the row) once its element exists (after the current flush). */
+function focusRow(ctx, table, key, col, tries = 2) {
+    ctx.focus.set({ key, col });
+    const apply = () => {
+        const row = rowElement(table, key);
+        if (!row) {
+            if (tries-- > 0)
+                requestAnimationFrame(apply);
+            return;
+        }
+        focusElement(col ? (cellIn(row, col) ?? row) : row, !ctx.virtual());
+    };
+    const row = rowElement(table, key);
+    if (row)
+        focusElement(col ? (cellIn(row, col) ?? row) : row, !ctx.virtual());
+    else
+        queueMicrotask(apply);
+}
+// ---------------------------------------------------------------------------------------------------------------
+// Selection
+// ---------------------------------------------------------------------------------------------------------------
+function setSelection(ctx, next) {
+    setControlledValue(ctx.selection, next);
+}
+/** Toggle `key` (Space, checkbox, toggle-mode press). */
+export function toggleRow(ctx, key) {
+    const mode = ctx.mode();
+    if (mode === "none" || isDisabledKey(ctx, key))
+        return;
+    const current = controlledValue(ctx.selection);
+    if (ctx.disallowEmpty() && isKeySelected(current, key) && (current === "all" ? false : current.size === 1))
+        return;
+    setSelection(ctx, toggleKeySelection(current, key, mode, () => ctx.rows().map((r) => r.key), ctx.disabled()));
+    ctx.anchor.set(key);
+}
+/** Select-all checkbox / Ctrl+A: "all" ↔ empty (react-stately `toggleSelectAll`). */
+export function toggleAll(ctx) {
+    if (ctx.mode() !== "multiple")
+        return;
+    const state = selectAllState(controlledValue(ctx.selection), ctx.rows().map((r) => r.key), ctx.disabled());
+    setSelection(ctx, state === "all" ? new Set() : "all");
+}
+function extendTo(ctx, key) {
+    if (ctx.mode() !== "multiple")
+        return toggleOrReplace(ctx, key, false);
+    const anchor = untrack(ctx.anchor) ?? key;
+    setSelection(ctx, rangeSelection(ctx.rows().map((r) => r.key), anchor, key, ctx.disabled()));
+}
+function toggleOrReplace(ctx, key, toggle) {
+    if (toggle || ctx.behavior() === "toggle")
+        return toggleRow(ctx, key);
+    if (ctx.mode() === "none" || isDisabledKey(ctx, key))
+        return;
+    setSelection(ctx, replaceSelection(ctx.mode(), key, ctx.disabled()));
+    ctx.anchor.set(key);
+}
+// ---------------------------------------------------------------------------------------------------------------
+// Sorting / expanding
+// ---------------------------------------------------------------------------------------------------------------
+export function sortBy(ctx, column) {
+    const def = ctx.columns().find((c) => c.id === column);
+    if (!def?.allowsSorting)
+        return;
+    setControlledValue(ctx.sort, nextSortDescriptor(controlledValue(ctx.sort), column));
+}
+export function toggleExpanded(ctx, key) {
+    setControlledValue(ctx.expanded, toggleExpandedKey(controlledValue(ctx.expanded), key));
+}
+const isExpandedKey = (ctx, key) => controlledValue(ctx.expanded).has(key);
+// ---------------------------------------------------------------------------------------------------------------
+// Click / double click
+// ---------------------------------------------------------------------------------------------------------------
+/** Delegated `click` on the `<table>`. */
+export function gridClick(event, ctx) {
+    const target = event.target;
+    const table = event.currentTarget;
+    if (target.closest("[data-rv-resizer]") || untrack(ctx.resizing))
+        return;
+    if (target.closest("[data-rv-select-all]"))
+        return toggleAll(ctx);
+    const header = target.closest("thead [data-column]");
+    if (header)
+        return sortBy(ctx, header.getAttribute("data-column"));
+    const row = target.closest("tbody > tr[data-key]");
+    if (!row || tableOf(row) !== table)
+        return;
+    const key = keyOf(row);
+    if (target.closest("[data-rv-expand]"))
+        return toggleExpanded(ctx, key);
+    if (target.closest("[data-rv-drag-handle]"))
+        return;
+    if (target.closest("[data-rv-select]"))
+        return toggleRow(ctx, key);
+    // Clicks on interactive content inside a cell (editable cells, links, buttons) belong to that content.
+    const interactive = target.closest(INTERACTIVE);
+    if (interactive && row.contains(interactive))
+        return;
+    if (isDisabledKey(ctx, key))
+        return;
+    const mod = event.metaKey || event.ctrlKey;
+    const mode = ctx.mode();
+    if (event.shiftKey && mode === "multiple" && untrack(ctx.anchor) != null)
+        return extendTo(ctx, key);
+    if (ctx.hasAction() && (mode === "none" || (ctx.behavior() === "toggle" && selectionEmpty(ctx)))) {
+        return ctx.onRowAction(key);
+    }
+    if (mode === "none")
+        return;
+    toggleOrReplace(ctx, key, mod);
+}
+const selectionEmpty = (ctx) => {
+    const s = controlledValue(ctx.selection);
+    return s !== "all" && s.size === 0;
+};
+/** Delegated `dblclick`: "replace" selection behaviour runs the row action on double click (RA). */
+export function gridDoubleClick(event, ctx) {
+    const row = event.target.closest("tbody > tr[data-key]");
+    if (!row || !ctx.hasAction() || ctx.behavior() !== "replace" || ctx.mode() === "none")
+        return;
+    const interactive = event.target.closest(INTERACTIVE);
+    if (interactive && row.contains(interactive))
+        return;
+    const key = keyOf(row);
+    if (!isDisabledKey(ctx, key))
+        ctx.onRowAction(key);
+}
+// ---------------------------------------------------------------------------------------------------------------
+// Focus
+// ---------------------------------------------------------------------------------------------------------------
+/** Delegated `focusin`: track the focused row / cell; the table leaves the tab order while focus is inside. */
+export function gridFocusIn(event, ctx) {
+    const table = event.currentTarget;
+    const target = event.target;
+    if (target === table) {
+        // Tab into the grid: forward focus to the last focused row (or the first row / header).
+        const { key, col } = untrack(ctx.focus);
+        const rows = untrack(ctx.rows);
+        const index = rowIndex(ctx, key);
+        if (index >= 0)
+            return (revealRow(ctx, table, index), focusRow(ctx, table, key, col));
+        if (rows.length)
+            return focusRow(ctx, table, rows[Math.min(untrack(ctx.win).start, rows.length - 1)].key, null);
+        const first = table.querySelector("thead [data-column]");
+        return focusElement(first, false);
+    }
+    table.tabIndex = -1;
+    const row = target.closest("tbody > tr[data-key]");
+    if (row) {
+        const cell = target.closest("[data-column]");
+        ctx.focus.set({ key: keyOf(row), col: cell && cell !== row && row.contains(cell) ? cell.getAttribute("data-column") : null });
+    }
+}
+/** Delegated `focusout`: focus leaving the grid puts the table back in the tab order. */
+export function gridFocusOut(event) {
+    const table = event.currentTarget;
+    const next = event.relatedTarget;
+    if (!next || !table.contains(next))
+        table.tabIndex = 0;
+}
+// ---------------------------------------------------------------------------------------------------------------
+// Keyboard
+// ---------------------------------------------------------------------------------------------------------------
+const typeahead = new WeakMap();
+/** Delegated `keydown` on the `<table>`. */
+export function gridKeyDown(event, ctx) {
+    const table = event.currentTarget;
+    const target = event.target;
+    if (event.defaultPrevented || event.isComposing)
+        return;
+    // Keyboard drag and drop.
+    const drag = untrack(ctx.drag);
+    if (drag?.keyboard)
+        return dragKey(event, ctx, table, drag);
+    // Column resizer.
+    const resizer = target.closest("[data-rv-resizer]");
+    if (resizer)
+        return resizerKey(event, ctx, table, resizer);
+    // Drag handle: Enter / Space start a keyboard drag.
+    if ((event.key === "Enter" || event.key === " ") && target.closest("[data-rv-drag-handle]") && ctx.canReorder()) {
+        const row = target.closest("tbody > tr[data-key]");
+        if (row) {
+            event.preventDefault();
+            return startKeyboardDrag(ctx, table, keyOf(row));
+        }
+    }
+    // Editable content inside a cell keeps its keys; Escape returns to the cell.
+    if (target.matches(EDITABLE) && target !== table) {
+        if (event.key === "Escape") {
+            const cell = target.closest("[data-column]");
+            if (cell)
+                (event.preventDefault(), event.stopPropagation(), cell.focus());
+        }
+        return;
+    }
+    const header = target.closest("thead [data-column]");
+    if (header)
+        return headerKey(event, ctx, table, header, target);
+    const row = target.closest("tbody > tr[data-key]");
+    if (!row)
+        return;
+    const key = keyOf(row);
+    const cell = target === row ? null : target.closest("[data-column]");
+    const col = cell?.getAttribute("data-column") ?? null;
+    const rows = ctx.rows();
+    const index = rowIndex(ctx, key);
+    const cols = colIds(ctx);
+    const ltr = !ctx.rtl();
+    const forward = ltr ? "ArrowRight" : "ArrowLeft", backward = ltr ? "ArrowLeft" : "ArrowRight";
+    const mod = event.ctrlKey || event.metaKey;
+    const multiple = ctx.mode() === "multiple";
+    const go = (nextIndex, nextCol) => {
+        const r = rows[Math.max(0, Math.min(rows.length - 1, nextIndex))];
+        if (!r)
+            return;
+        event.preventDefault();
+        revealRow(ctx, table, rows.indexOf(r));
+        focusRow(ctx, table, r.key, nextCol);
+        if (event.shiftKey &&
+            multiple &&
+            (event.key === "ArrowDown" ||
+                event.key === "ArrowUp" ||
+                event.key === "PageDown" ||
+                event.key === "PageUp" ||
+                event.key === "Home" ||
+                event.key === "End")) {
+            if (untrack(ctx.anchor) == null)
+                ctx.anchor.set(key);
+            extendTo(ctx, r.key);
+        }
+        else if (!mod && ctx.behavior() === "replace" && ctx.mode() !== "none" && !isDisabledKey(ctx, r.key) && r.key !== key) {
+            setSelection(ctx, replaceSelection(ctx.mode(), r.key, ctx.disabled()));
+            ctx.anchor.set(r.key);
+        }
+    };
+    // Walk focusable children inside the focused cell before leaving it (RA useGridCell).
+    if (cell && (event.key === forward || event.key === backward) && !mod) {
+        const kids = focusables(cell);
+        const at = kids.indexOf(target);
+        const step = event.key === forward ? 1 : -1;
+        if (target === cell && step === 1 && kids.length)
+            return (event.preventDefault(), kids[0].focus());
+        if (at >= 0) {
+            const next = kids[at + step];
+            event.preventDefault();
+            return next ? next.focus() : step === 1 ? moveCell(1) : cell.focus();
+        }
+    }
+    function moveCell(step) {
+        const i = col == null ? -1 : cols.indexOf(col);
+        const next = i + step;
+        event.preventDefault();
+        if (col == null)
+            return focusRow(ctx, table, key, step > 0 ? cols[0] : cols[cols.length - 1]);
+        if (next < 0 || next >= cols.length)
+            return focusRow(ctx, table, key, null);
+        focusRow(ctx, table, key, cols[next]);
+    }
+    const page = Math.max(1, Math.floor((scrollerOf(table).clientHeight - ctx.headerHeight()) / ctx.rowHeight()) - 1);
+    switch (event.key) {
+        case "ArrowDown":
+            return go(index + 1, col);
+        case "ArrowUp":
+            if (index === 0 && col) {
+                event.preventDefault();
+                return focusElement(headerCell(table, col), false);
+            }
+            return go(index - 1, col);
+        case "PageDown":
+            return go(index + page, col);
+        case "PageUp":
+            return go(index - page, col);
+        case "Home":
+            if (col && !mod)
+                return (event.preventDefault(), focusRow(ctx, table, key, cols[0]));
+            return go(0, col);
+        case "End":
+            if (col && !mod)
+                return (event.preventDefault(), focusRow(ctx, table, key, cols[cols.length - 1]));
+            return go(rows.length - 1, col);
+    }
+    if (event.key === forward || event.key === backward) {
+        const r = rows[index];
+        if (col == null && r) {
+            // Treegrid: expand / collapse / parent before moving into cells.
+            if (event.key === forward && r.hasChildren && !isExpandedKey(ctx, key))
+                return (event.preventDefault(), toggleExpanded(ctx, key));
+            if (event.key === backward && r.hasChildren && isExpandedKey(ctx, key))
+                return (event.preventDefault(), toggleExpanded(ctx, key));
+            if (event.key === backward && r.parentKey != null)
+                return go(rowIndex(ctx, r.parentKey), null);
+        }
+        return moveCell(event.key === forward ? 1 : -1);
+    }
+    if (event.key === " " && !mod) {
+        if (target !== row && target !== cell)
+            return; // a focused button / checkbox child handles its own Space
+        if (ctx.mode() === "none")
+            return;
+        event.preventDefault();
+        if (event.shiftKey && multiple)
+            return extendTo(ctx, key);
+        return toggleRow(ctx, key);
+    }
+    if (event.key === "Enter") {
+        if (target !== row && target !== cell)
+            return;
+        event.preventDefault();
+        if (ctx.hasAction() && !isDisabledKey(ctx, key))
+            return ctx.onRowAction(key);
+        if (ctx.mode() !== "none")
+            return toggleOrReplace(ctx, key, false);
+        return;
+    }
+    if (mod && (event.key === "a" || event.key === "A") && multiple) {
+        event.preventDefault();
+        return setSelection(ctx, "all");
+    }
+    if (event.key === "Escape" && multiple && !ctx.disallowEmpty() && !selectionEmpty(ctx)) {
+        event.preventDefault();
+        return setSelection(ctx, new Set());
+    }
+    if (event.key.length === 1 && !mod && !event.altKey && /\S/.test(event.key))
+        typeahead1(event, ctx, table, index);
+}
+function typeahead1(event, ctx, table, index) {
+    const state = typeahead.get(table) ?? { text: "", timer: undefined };
+    typeahead.set(table, state);
+    state.text += event.key.toLowerCase();
+    clearTimeout(state.timer);
+    state.timer = setTimeout(() => (state.text = ""), 1000);
+    const header = ctx.columns().find((c) => c.isRowHeader) ?? ctx.columns().find((c) => c.accessorKey);
+    const field = header?.accessorKey;
+    if (!field)
+        return;
+    const rows = ctx.rows();
+    const n = rows.length;
+    for (let step = state.text.length === 1 ? 1 : 0; step < n + 1; step++) {
+        const r = rows[(index + step) % n];
+        if (String(r.item[field] ?? "")
+            .toLowerCase()
+            .startsWith(state.text)) {
+            event.preventDefault();
+            revealRow(ctx, table, (index + step) % n);
+            return focusRow(ctx, table, r.key, null);
+        }
+    }
+}
+function headerKey(event, ctx, table, header, target) {
+    const col = header.getAttribute("data-column");
+    const cols = colIds(ctx);
+    const ltr = !ctx.rtl();
+    const i = cols.indexOf(col);
+    const forward = ltr ? "ArrowRight" : "ArrowLeft", backward = ltr ? "ArrowLeft" : "ArrowRight";
+    if (event.key === forward || event.key === backward) {
+        const kids = focusables(header);
+        const at = kids.indexOf(target);
+        const step = event.key === forward ? 1 : -1;
+        event.preventDefault();
+        if (target === header && step === 1 && kids.length)
+            return kids[0].focus();
+        if (at >= 0 && kids[at + step])
+            return kids[at + step].focus();
+        if (at >= 0 && step === -1)
+            return header.focus();
+        const next = cols[i + step];
+        if (next)
+            focusElement(headerCell(table, next), false);
+        return;
+    }
+    if (event.key === "ArrowDown") {
+        event.preventDefault();
+        const rows = ctx.rows();
+        const first = rows[ctx.virtual() ? Math.min(untrack(ctx.win).start, rows.length - 1) : 0];
+        if (first)
+            focusRow(ctx, table, first.key, col);
+        return;
+    }
+    if (event.key === "Home" || event.key === "End") {
+        event.preventDefault();
+        return focusElement(headerCell(table, event.key === "Home" ? cols[0] : cols[cols.length - 1]), false);
+    }
+    if ((event.key === "Enter" || event.key === " ") && target === header) {
+        event.preventDefault();
+        if (col === SELECT_COLUMN)
+            return toggleAll(ctx);
+        return sortBy(ctx, col);
+    }
+    if (event.key === " " && target.matches("[data-rv-select-all]")) {
+        event.preventDefault();
+        return toggleAll(ctx);
+    }
+}
+// ---------------------------------------------------------------------------------------------------------------
+// Column resizing
+// ---------------------------------------------------------------------------------------------------------------
+/** Current px widths of every rendered column (measured once when a resize starts). */
+function measuredWidths(ctx, table) {
+    const current = untrack(ctx.widths);
+    const out = new Map();
+    for (const id of colIds(ctx)) {
+        const w = current?.get(id) ?? headerCell(table, id)?.getBoundingClientRect().width ?? 0;
+        out.set(id, Math.round(w));
+    }
+    return out;
+}
+function resizeTo(ctx, table, col, width) {
+    const def = ctx.columns().find((c) => c.id === col);
+    if (!def)
+        return;
+    const widths = new Map(measuredWidths(ctx, table));
+    const next = clampColumnWidth(def, width);
+    if (widths.get(col) === next && untrack(ctx.widths))
+        return;
+    widths.set(col, next);
+    ctx.widths.set(widths);
+    ctx.onColumnResize(widths);
+}
+/** Delegated `pointerdown`: column resizer drag, row drag handle. */
+export function gridPointerDown(event, ctx) {
+    if (event.button !== 0)
+        return;
+    const target = event.target;
+    const table = event.currentTarget;
+    const resizer = target.closest("[data-rv-resizer]");
+    if (resizer)
+        return startPointerResize(event, ctx, table, resizer);
+    const handle = target.closest("[data-rv-drag-handle]");
+    if (handle && ctx.canReorder())
+        return startPointerDrag(event, ctx, table, handle);
+}
+function startPointerResize(event, ctx, table, resizer) {
+    event.preventDefault();
+    event.stopPropagation();
+    const col = resizer.getAttribute("data-rv-resizer");
+    const startX = event.clientX;
+    const startWidths = measuredWidths(ctx, table);
+    const start = startWidths.get(col) ?? 0;
+    const sign = ctx.rtl() ? -1 : 1;
+    batch(() => {
+        ctx.widths.set(startWidths);
+        ctx.resizing.set(col);
+    });
+    const doc = table.ownerDocument;
+    const move = (e) => resizeTo(ctx, table, col, start + sign * (e.clientX - startX));
+    const up = () => {
+        doc.removeEventListener("pointermove", move);
+        doc.removeEventListener("pointerup", up);
+        doc.removeEventListener("pointercancel", up);
+        // The click that follows the pointerup must not sort the column.
+        setTimeout(() => ctx.resizing.set(null));
+        ctx.onColumnResizeEnd(untrack(ctx.widths) ?? startWidths);
+    };
+    doc.addEventListener("pointermove", move);
+    doc.addEventListener("pointerup", up);
+    doc.addEventListener("pointercancel", up);
+}
+function resizerKey(event, ctx, table, resizer) {
+    const col = resizer.getAttribute("data-rv-resizer");
+    const ltr = !ctx.rtl();
+    const delta = event.key === "ArrowRight" ? 10 : event.key === "ArrowLeft" ? -10 : 0;
+    if (delta) {
+        event.preventDefault();
+        event.stopPropagation();
+        const widths = measuredWidths(ctx, table);
+        resizeTo(ctx, table, col, (widths.get(col) ?? 0) + (ltr ? delta : -delta));
+        ctx.onColumnResizeEnd(untrack(ctx.widths) ?? widths);
+        return;
+    }
+    if (event.key === "Escape" || event.key === "Enter" || event.key === "Tab") {
+        if (event.key !== "Tab")
+            event.preventDefault();
+        event.stopPropagation();
+        resizer.closest("[data-column]")?.focus();
+    }
+}
+// ---------------------------------------------------------------------------------------------------------------
+// Row reordering (drag and drop)
+// ---------------------------------------------------------------------------------------------------------------
+function dragKeys(ctx, key) {
+    const s = controlledValue(ctx.selection);
+    if (isKeySelected(s, key, ctx.disabled()))
+        return ctx
+            .rows()
+            .filter((r) => isKeySelected(s, r.key, ctx.disabled()))
+            .map((r) => r.key);
+    return [key];
+}
+/** Offset of the drop line for `key` / `position` inside the scroll container's content. */
+function indicatorTop(table, key, position) {
+    if (key == null)
+        return null;
+    const row = rowElement(table, key);
+    if (!row)
+        return null;
+    const scroller = scrollerOf(table);
+    const rect = row.getBoundingClientRect();
+    return Math.round((position === "after" ? rect.bottom : rect.top) - scroller.getBoundingClientRect().top + scroller.scrollTop);
+}
+function markDragging(table, keys, on) {
+    for (const key of keys) {
+        const row = rowElement(table, key);
+        if (row)
+            on ? row.setAttribute("data-dragging", "true") : row.removeAttribute("data-dragging");
+    }
+}
+function drop(ctx, state) {
+    ctx.drag.set(null);
+    if (state.target == null)
+        return;
+    const keys = new Set(state.keys);
+    if (keys.has(state.target))
+        return;
+    const rows = ctx.rows();
+    const targetRow = rows.find((r) => r.key === state.target);
+    if (!targetRow)
+        return;
+    // Reorder among the target's siblings (top level: the data itself).
+    let items;
+    const data = ctx.data();
+    if (targetRow.parentKey == null)
+        items = reorderItems(data, ctx.getRowId, keys, state.target, state.position);
+    else
+        items = data.slice();
+    ctx.onReorder({ keys, target: { key: state.target, dropPosition: state.position }, items });
+}
+function startPointerDrag(event, ctx, table, handle) {
+    const row = handle.closest("tbody > tr[data-key]");
+    if (!row)
+        return;
+    event.preventDefault();
+    const key = keyOf(row);
+    const scroller = scrollerOf(table);
+    const state = { keys: dragKeys(ctx, key), target: null, position: "after", keyboard: false, indicator: null };
+    ctx.drag.set({ ...state });
+    markDragging(table, state.keys, true);
+    const doc = table.ownerDocument;
+    let raf = 0, lastY = event.clientY, lastX = event.clientX;
+    const locate = () => {
+        const el = doc.elementFromPoint(lastX, lastY)?.closest("tbody > tr[data-key]");
+        if (!el || !table.contains(el))
+            return;
+        const rect = el.getBoundingClientRect();
+        const position = lastY < rect.top + rect.height / 2 ? "before" : "after";
+        const target = keyOf(el);
+        if (target !== state.target || position !== state.position) {
+            state.target = target;
+            state.position = position;
+            state.indicator = indicatorTop(table, target, position);
+            ctx.drag.set({ ...state });
+        }
+    };
+    const autoScroll = () => {
+        const box = scroller.getBoundingClientRect();
+        const edge = 32;
+        const dy = lastY < box.top + edge + ctx.headerHeight() ? -12 : lastY > box.bottom - edge ? 12 : 0;
+        if (dy) {
+            scroller.scrollTop += dy;
+            updateWindow(ctx, scroller);
+            locate();
+        }
+        raf = dy ? requestAnimationFrame(autoScroll) : 0;
+    };
+    const move = (e) => {
+        lastY = e.clientY;
+        lastX = e.clientX;
+        locate();
+        if (!raf)
+            raf = requestAnimationFrame(autoScroll);
+    };
+    const end = (commit) => {
+        doc.removeEventListener("pointermove", move);
+        doc.removeEventListener("pointerup", up);
+        doc.removeEventListener("pointercancel", cancel);
+        if (raf)
+            cancelAnimationFrame(raf);
+        markDragging(table, state.keys, false);
+        if (commit)
+            drop(ctx, state);
+        else
+            ctx.drag.set(null);
+    };
+    const up = () => end(true);
+    const cancel = () => end(false);
+    doc.addEventListener("pointermove", move);
+    doc.addEventListener("pointerup", up);
+    doc.addEventListener("pointercancel", cancel);
+}
+/** Enter on a drag handle starts a keyboard drag (RA useDrag keyboard: Enter grab, arrows move, Enter drop, Escape cancel). */
+export function startKeyboardDrag(ctx, table, key) {
+    const keys = dragKeys(ctx, key);
+    ctx.drag.set({ keys, target: key, position: "after", keyboard: true, indicator: indicatorTop(table, key, "after") });
+    markDragging(table, keys, true);
+    announce(ctx.strings.dragStart, "assertive");
+}
+function dragKey(event, ctx, table, drag) {
+    const rows = ctx.rows();
+    // Drop slots: before row 0, after every row → slot i = after rows[i-1].
+    const slots = rows
+        .map((r) => ({ key: r.key, position: "before" }))
+        .concat(rows.length ? [{ key: rows[rows.length - 1].key, position: "after" }] : []);
+    let i = slots.findIndex((s) => s.key === drag.target && s.position === drag.position);
+    if (i < 0)
+        i = Math.max(0, rows.findIndex((r) => r.key === drag.target) + (drag.position === "after" ? 1 : 0));
+    const set = (n) => {
+        const slot = slots[Math.max(0, Math.min(slots.length - 1, n))];
+        revealRow(ctx, table, rowIndex(ctx, slot.key));
+        ctx.drag.set({ ...drag, target: slot.key, position: slot.position, indicator: indicatorTop(table, slot.key, slot.position) });
+    };
+    switch (event.key) {
+        case "ArrowDown":
+        case "ArrowRight":
+            event.preventDefault();
+            return set(i + 1);
+        case "ArrowUp":
+        case "ArrowLeft":
+            event.preventDefault();
+            return set(i - 1);
+        case "Enter":
+        case " ":
+            event.preventDefault();
+            markDragging(table, drag.keys, false);
+            drop(ctx, drag);
+            announce(ctx.strings.dragDrop, "assertive");
+            return;
+        case "Escape":
+        case "Tab":
+            if (event.key === "Escape")
+                event.preventDefault();
+            markDragging(table, drag.keys, false);
+            ctx.drag.set(null);
+            announce(ctx.strings.dragCancel, "assertive");
+            return;
+    }
+}
+// ---------------------------------------------------------------------------------------------------------------
+// Scroll
+// ---------------------------------------------------------------------------------------------------------------
+/** `scroll` on the scroll container: virtual window + pinned-column separators (`data-scrolled-start` / `-end`). */
+export function gridScroll(event, ctx) {
+    const scroller = event.currentTarget;
+    updateWindow(ctx, scroller);
+    const root = scroller.parentElement;
+    const left = Math.abs(scroller.scrollLeft);
+    const max = scroller.scrollWidth - scroller.clientWidth;
+    toggleAttr(root, "data-scrolled-start", left > 0);
+    toggleAttr(root, "data-scrolled-end", max > 0 && left < max - 1);
+}
+function toggleAttr(el, name, on) {
+    if (on) {
+        if (!el.hasAttribute(name))
+            el.setAttribute(name, "true");
+    }
+    else if (el.hasAttribute(name))
+        el.removeAttribute(name);
+}