edytor 1.0.0-rc.2 → 1.0.0

package/dist/plugins/table/chrome.svelte.js

@@ -1,5 +1,35 @@
-import { isLonePress, takeKeys } from '../../events/onFocus.js';
+import { untrack } from 'svelte';
+import { autoScrollFor } from '../../dnd/autoScroll.js';
+import { draggable, dropTargetForElements, setCustomNativeDragPreview } from '../../dnd/pragmatic.js';
+import { EDYTOR_BLOCK_DRAG_MIME } from '../../events/onDrop.js';
+import { takeKeys } from '../../events/onFocus.js';
+import { pin } from '../../surface/overlay.js';
+import { attribute } from '../chrome.js';
+import { ChromeList, holdKeys, menuKey, optionAttachment } from '../list.svelte.js';
+import { BandDrag, bandKey } from '../bands.svelte.js';
+import { all, listen } from '../../utils/listen.js';
+import { dragPreview } from '../blockHandles/dragPreview.js';
 import { caretCell, deleteColumn, deleteRows, gridOf, insertColumn, insertRow, moveColumn, moveRows, widthOf } from './table.js';
+/** The drag data key naming the chrome a row's or a column's drag is from. */
+const MOVE = Symbol('edytor table move');
+/** How far past the table's box a drag still aims at it (the grips stand outside it). */
+const GUTTER = 32;
+const styleOf = (node) => node.ownerDocument.defaultView?.getComputedStyle(node);
+/** A computed length in pixels, `0` when none. */
+const px = (value) => Number.parseFloat(value ?? '') || 0;
+/** The resolved widths of `grid`'s columns, as laid out (none where nothing is). */
+const trackWidths = (grid) => (styleOf(grid)?.gridTemplateColumns ?? '')
+    .split(/\s+/)
+    .map(Number.parseFloat)
+    .filter(Number.isFinite);
+/** The grid element of a table block. */
+const gridNode = (table) => table?.node?.querySelector('[data-edytor-table-grid]');
+/** A table's stored column entries (`data.columns`), each found by its column id. */
+const entriesOf = (table) => {
+    const stored = table.edytor.facade.blockDataOf(table.id)?.columns;
+    return Array.isArray(stored) ? stored : [];
+};
+const entryIndex = (entries, id) => entries.findIndex((c) => c?.id === id);
 /**
  * The table's chrome (`table.*`), in the overlay: while the pointer is over
  * a table of an editable view, a `+` under it (a row at its end) and one
@@ -11,410 +41,734 @@ import { caretCell, deleteColumn, deleteRows, gridOf, insertColumn, insertRow, m
  * column's `data.columns[i].width` (one command, one undo step), Escape
  * drops the preview. Every action is a table command (`table.ts`): refused
  * when the view is readonly.
+ *
+ * What a `menu` snippet receives: the open menu (`menu`), its rows
+ * (`items`, each a `MenuItemPayload`), the keyboard's row (`index`), the
+ * attachments that give it the keys and the ARIA (`popup` and `keys` on
+ * the menu's element, `option(index)` on each row) and `close()`.
+ * A grip's own attachment is its payload's `grip`.
  */
-export class TableChrome {
-    edytor;
-    labels;
+export class TableChrome extends ChromeList {
     columnWidth;
     minColumnWidth;
-    /** The table, row and column under the pointer. */
+    /**
+     * The table, row and column (their ids) under the pointer.
+     * @internal
+     */
     hovered = $state(null);
-    /** The grip menu open. */
+    /** What the open grip menu acts on (`null`: none is open). */
     menu = $state(null);
-    /** The measured table the chrome is for. */
+    /**
+     * The measured table the chrome is for.
+     * @internal
+     */
     layout = $state.raw(null);
-    /** A block drag is in progress: no chrome takes the pointer. */
+    /**
+     * A block drag is in progress: no chrome takes the pointer.
+     * @internal
+     */
     dragging = $state(false);
-    /** The column resize in progress. */
-    drag = $state(null);
+    /**
+     * The column resize (its drag in progress, `band.drag`).
+     * @internal
+     */
+    band;
+    /**
+     * The row's or column's drag in progress (`table.drag`).
+     * @internal
+     */
+    moving = $state(null);
     /**
      * The cell the caret was last in: the row and column the block menu's
      * actions on its table act on. A block selection (the grip that opens
      * the menu) keeps it; a caret outside every table clears it.
+     * @internal
      */
     cell = null;
-    constructor(edytor, labels, 
-    /** A column's width when it sets none, and the narrowest a resize leaves. */
-    columnWidth, minColumnWidth) {
-        this.edytor = edytor;
-        this.labels = labels;
+    constructor(edytor, 
+    /**
+     * A column's width when it sets none, and the narrowest a resize leaves.
+     * @internal
+     */
+    columnWidth, 
+    /** @internal */
+    minColumnWidth) {
+        super(edytor, 'table-menu', 'menu', (node) => {
+            const kind = this.menu?.kind;
+            if (!kind)
+                return null;
+            node.setAttribute('data-edytor-table-menu', kind);
+            return {};
+        });
         this.columnWidth = columnWidth;
         this.minColumnWidth = minColumnWidth;
+        this.band = new BandDrag(edytor);
+    }
+    get count() {
+        return this.#rows.length;
     }
-    /** The view is readonly (reactive). */
+    /** The view is readonly (reactive): the chrome shows nothing. */
     get readonly() {
         return this.edytor.readonly;
     }
-    /** A text selection is in progress: the chrome takes no pointer. */
-    get selecting() {
-        return this.drag === null && this.edytor.selection.dragging;
+    /**
+     * The column resize in progress.
+     * @internal
+     */
+    get drag() {
+        return this.band.drag;
     }
-    /** The table the chrome is for: the one a band drags, a menu is open on, or under the pointer. */
+    /**
+     * The table the chrome is for: the one a band drags or a grip moves, a
+     * menu is open on, or under the pointer.
+     * @internal
+     */
     get table() {
-        return this.drag?.table ?? this.menu?.table ?? this.hovered?.table ?? null;
+        return (this.drag?.table ?? this.moving?.table ?? this.menu?.table ?? this.hovered?.table ?? null);
+    }
+    /**
+     * What the `kind` grip stands for now (the open menu's row or column,
+     * else the hovered one): its table, id and position; `null` when none.
+     */
+    #source(kind) {
+        const table = this.block(this.table);
+        const grid = gridOf(table);
+        const id = this.menu?.kind === kind ? this.menu.id : this.hovered?.[kind];
+        const ids = kind === 'row' ? grid?.rows.map((row) => row.id) : grid?.columns;
+        const index = id ? (ids?.indexOf(id) ?? -1) : -1;
+        return table && grid && index >= 0 ? { table, grid, id: id, index } : null;
     }
-    /** The selection changed: a caret in a cell is the one the block menu acts on. */
+    /**
+     * The selection changed: a caret in a cell is the one the block menu acts on.
+     * @internal
+     */
     track = () => {
-        if (this.edytor.selection.value.kind !== 'text')
-            return;
-        this.cell = caretCell(this.edytor)?.id ?? null;
+        if (this.edytor.selection.value.kind === 'text')
+            this.cell = caretCell(this.edytor)?.id ?? null;
     };
-    /** Whether the chrome shows. */
+    /**
+     * Whether the chrome shows (on its table all through a band's or a grip's drag).
+     * @internal
+     */
     get shown() {
-        return this.drag !== null || (!this.readonly && !this.dragging && this.table !== null);
+        return (this.drag !== null ||
+            this.moving !== null ||
+            (!this.readonly && !this.dragging && this.table !== null));
     }
-    /** The block of table `id`, if it is still a shown table. */
+    /**
+     * The block of table `id`, if it is still a shown table.
+     * @internal
+     */
     block = (id) => {
         const block = id ? this.edytor.idToBlock.get(id) : undefined;
         return block?.isInTree && this.edytor.facade.isTable(block.id) ? block : null;
     };
+    /**
+     * Whether layer-relative `x` is in the part of the grid its box shows
+     * (`table.overflow`): a band or a grip outside it is not shown.
+     * @internal
+     */
+    inView = (x) => {
+        const view = this.layout?.view;
+        return !!view && x >= view.left - 1 && x <= view.right + 1;
+    };
+    /**
+     * The grid's visible span, horizontally, layer-relative.
+     * @internal
+     */
+    get span() {
+        const layout = this.layout;
+        if (!layout)
+            return { left: 0, width: 0 };
+        const left = Math.max(layout.left, layout.view.left);
+        const right = Math.min(layout.left + layout.width, layout.view.right);
+        return { left, width: Math.max(0, right - left) };
+    }
+    /**
+     * The open menu's or the hovered row's and column's lines in the
+     * measured table, with their positions.
+     */
+    #lines(kind) {
+        const layout = this.layout;
+        const id = this.menu?.kind === kind ? this.menu.id : this.hovered?.[kind];
+        const lines = (kind === 'row' ? layout?.rows : layout?.columns) ?? [];
+        const index = lines.findIndex((line) => line.id === id);
+        return index < 0 ? null : { layout: layout, index, id: id };
+    }
+    /**
+     * Where the grips stand, layer-relative, the point each centers on: the
+     * row grip on the grid's left edge, at the middle of the row it stands
+     * for; the column grip on its top edge, at the middle of the column it
+     * stands for, while that middle shows (the grip a drag started from
+     * stays, its source, even scrolled out of view).
+     * @internal
+     */
+    get grips() {
+        const row = this.#lines('row');
+        const column = this.#lines('column');
+        const r = row && row.layout.rows[row.index];
+        const c = column && column.layout.columns[column.index];
+        const x = c ? c.left + c.width / 2 : 0;
+        return [
+            ...(row && r
+                ? [{ ...row, kind: 'row', x: row.layout.left, y: r.top + r.height / 2 }]
+                : []),
+            ...(column && (this.moving?.kind === 'column' || this.inView(x))
+                ? [{ ...column, kind: 'column', x, y: column.layout.top }]
+                : [])
+        ];
+    }
+    /**
+     * Where the `+` under the table stands (as wide as the grid shows) and
+     * the one beside it (as tall as the grid, while its right edge shows).
+     * @internal
+     */
+    get bars() {
+        const layout = this.layout;
+        if (!layout)
+            return [];
+        const { left, width } = this.span;
+        const right = layout.left + layout.width;
+        return [
+            { kind: 'row', left, top: layout.top + layout.height + 2, width },
+            ...(this.inView(right)
+                ? [{ kind: 'column', left: right + 2, top: layout.top, height: layout.height }]
+                : [])
+        ];
+    }
+    /**
+     * Where the open menu stands: under its grip.
+     * @internal
+     */
+    get menuPlace() {
+        const kind = this.menu?.kind;
+        const at = kind && this.#lines(kind);
+        if (!at)
+            return null;
+        const { layout, index } = at;
+        if (kind === 'row') {
+            const row = layout.rows[index];
+            return { left: layout.left - 9, top: row.top + Math.min(row.height, 28) };
+        }
+        const column = layout.columns[index];
+        return { left: column.left + column.width / 2 - 12, top: layout.top + 10 };
+    }
+    /**
+     * The drop line of a grip's drag, layer-relative: between two rows
+     * (columns), where the drop would land.
+     * @internal
+     */
+    get line() {
+        const move = this.moving;
+        const gap = move?.gap ?? null;
+        const layout = this.layout;
+        if (!move || gap === null || !layout)
+            return null;
+        const row = move.kind === 'row';
+        const lines = row ? layout.rows : layout.columns.map((c) => ({ top: c.left, height: c.width }));
+        const last = lines.at(-1);
+        const at = lines[gap]?.top ?? (last && last.top + last.height);
+        if (at === undefined)
+            return null;
+        if (row)
+            return { kind: move.kind, gap, left: this.span.left, top: at - 2, width: this.span.width };
+        return this.inView(at)
+            ? { kind: move.kind, gap, left: at - 2, top: layout.top, height: layout.height }
+            : null;
+    }
     /**
      * The width column `index` of `table` shows (its `data.columns` entry, the
      * resize preview while a band drags it): what the grid's template reads.
+     * @internal
      */
     width = (table, index, column) => {
         const drag = this.drag;
-        if (drag && drag.table === table && drag.column === index)
-            return this.dragWidth(drag);
-        return widthOf(column, this.columnWidth);
+        const at = drag?.table === table ? index - drag.column : -1;
+        const preview = at === 0 ? this.#dragWidth(drag) : at === 1 ? this.#nextWidth(drag) : undefined;
+        return preview ?? widthOf(column, this.columnWidth);
     };
-    dragWidth = (drag) => Math.max(this.minColumnWidth, Math.round(drag.width + drag.at - drag.from));
-    /** The pointer is over `target`: the table, row and column holding it (the innermost table). */
+    /** The resize's width: the pointer's, between the minimum and the room's (`table.width.fit`). */
+    #dragWidth = (drag) => Math.max(this.minColumnWidth, Math.min(drag.max, Math.round(drag.width + drag.at - drag.from)));
+    /**
+     * The right neighbour's width while column `drag.column` is `#dragWidth`
+     * (`table.width.neighbour`): the column grows into the free room first,
+     * then what it gains past it comes off its neighbour, down to the
+     * minimum; a narrowing gives nothing back.
+     */
+    #nextWidth(drag) {
+        if (drag.next === undefined)
+            return undefined;
+        const take = Math.max(0, this.#dragWidth(drag) - drag.width - drag.slack);
+        return Math.max(Math.min(drag.next, this.minColumnWidth), drag.next - take);
+    }
+    /**
+     * The widths `table`'s grid shows, by position (its columns' stored
+     * widths, else the default one): what its template reads, the model's.
+     */
+    #widthsOf(table) {
+        const entries = entriesOf(table);
+        return (gridOf(table)?.columns ?? []).map((id) => widthOf(entries[entryIndex(entries, id)], this.columnWidth));
+    }
+    /**
+     * A resize of column `column` of the measured table, pressed at `from`
+     * (`table.width.fit`, `table.width.neighbour`): the column may grow by the
+     * room the table leaves free and by what its right neighbour can give
+     * (down to the minimum), so the table never gets wider; it may always narrow.
+     */
+    #resize(column, from, at) {
+        const layout = this.layout;
+        const table = this.block(layout?.table);
+        const widths = table ? this.#widthsOf(table) : [];
+        const width = widths[column];
+        if (!layout || !table || width === undefined)
+            return null;
+        const next = widths[column + 1];
+        const slack = Math.max(0, layout.room - widths.reduce((sum, w) => sum + w, 0));
+        const gives = next === undefined ? 0 : next - Math.min(next, this.minColumnWidth);
+        const max = Math.floor(width + slack + gives);
+        return { table: table.id, column, from, at, width, max, slack, next };
+    }
+    /**
+     * The pointer is over `target`: the table, row and column holding it (the innermost table).
+     * @internal
+     */
     hover = (target) => {
+        // A grip's drag keeps its row or column.
+        if (this.moving)
+            return;
         const element = target instanceof Element ? target : null;
         const cell = element?.closest('[data-edytor-table-cell], [data-edytor-table-pad]');
-        const tableNode = element?.closest('[data-edytor-table]');
-        const table = tableNode?.dataset.edytorId ?? null;
-        let next = null;
-        if (table && this.block(table)) {
-            const rowNode = cell?.closest('[data-edytor-table-row]');
-            const row = rowNode?.dataset.edytorId ?? null;
-            const column = cell ? Number(cell.dataset.edytorColumn) : NaN;
-            next = { table, row, column: Number.isInteger(column) ? column : null };
-        }
-        const was = this.hovered;
-        if (was?.table === next?.table && was?.row === next?.row && was?.column === next?.column)
-            return;
+        const table = element?.closest('[data-edytor-table]')?.dataset.edytorId;
+        const grid = gridOf(this.block(table));
+        const next = table && grid
+            ? {
+                table,
+                row: cell?.closest('[data-edytor-table-row]')?.dataset.edytorId ?? null,
+                column: grid.columns[Number(cell?.dataset.edytorColumn)] ?? null
+            }
+            : null;
         // Over the chrome (a grip, the `+`), the row and column it is for stay.
-        if (next === null && this.menu)
+        if (JSON.stringify(next) === JSON.stringify(this.hovered) || (!next && this.menu))
             return;
         this.hovered = next;
         this.edytor.overlay.invalidate();
     };
-    /** The pointer left for `to`: the chrome stays while it is over the editor or the overlay. */
+    /**
+     * The pointer left for `to`: the chrome stays while it is over the editor or the overlay.
+     * @internal
+     */
     leave = (to) => {
         const node = to instanceof Node ? to : null;
         const { edytor } = this;
         if (node && (edytor.overlay.layer?.contains(node) || edytor.node?.contains(node)))
             return;
-        if (!this.menu && !this.drag)
+        if (!this.menu && !this.drag && !this.moving)
             this.hovered = null;
         edytor.overlay.invalidate();
     };
-    /** The overlay measure: the shown table's grid, rows and columns. */
+    /**
+     * The overlay measure: the shown table's grid, rows and columns.
+     * @internal
+     */
     measure = (host, origin) => {
-        const layout = this.shown ? this.read(origin) : null;
+        const layout = this.shown ? this.#read(origin) : null;
         return () => {
-            Object.assign(host.style, { position: 'absolute', left: '0px', top: '0px' });
-            if (!sameLayout(layout, this.layout))
+            pin(host);
+            if (JSON.stringify(layout) !== JSON.stringify(this.layout))
                 this.layout = layout;
         };
     };
-    read(origin) {
+    #read(origin) {
         const table = this.block(this.table);
-        const grid = table?.node?.querySelector('[data-edytor-table-grid]');
+        const grid = gridNode(table);
         const columns = gridOf(table)?.columns;
         if (!table || !grid?.isConnected || !columns)
             return null;
         const box = grid.getBoundingClientRect();
-        const widths = (grid.ownerDocument.defaultView?.getComputedStyle(grid).gridTemplateColumns ?? '')
-            .split(/\s+/)
-            .map((w) => Number.parseFloat(w))
-            .filter((w) => Number.isFinite(w));
-        let x = box.left - origin.left;
+        const widths = trackWidths(grid);
+        const left = box.left - origin.left;
+        let x = left;
         const cols = columns.map((id, i) => {
             const width = widths[i] ?? this.columnWidth;
-            const col = { id, left: x, width };
             x += width;
-            return col;
+            return { id, left: x - width, width };
         });
         const rows = table.children.flatMap((row) => {
             const rect = row.node?.getBoundingClientRect();
             return rect ? [{ id: row.id, top: rect.top - origin.top, height: rect.height }] : [];
         });
+        // The box the grid scrolls in: its client box is what shows, and the room.
+        const scroller = grid.closest('[data-edytor-table-scroll]') ?? grid.parentElement;
+        const inner = scroller?.clientWidth ?? 0;
+        const clip = inner > 0 ? scroller.getBoundingClientRect() : undefined;
+        const style = styleOf(grid);
+        const at = clip ? clip.left + scroller.clientLeft - origin.left : 0;
         return {
             table: table.id,
-            left: box.left - origin.left,
+            left,
             top: box.top - origin.top,
-            width: Math.min(box.width, x - (box.left - origin.left)) || box.width,
+            width: Math.min(box.width, x - left) || box.width,
             height: box.height,
             rows,
-            columns: cols
+            columns: cols,
+            view: clip ? { left: at, right: at + inner } : { left: -Infinity, right: Infinity },
+            room: clip ? inner - px(style?.borderLeftWidth) - px(style?.borderRightWidth) : Infinity
         };
     }
-    /** Open the menu of a row's or a column's grip (a second press on it closes it). */
-    open = (menu) => {
-        const same = this.menu?.kind === menu.kind &&
-            this.menu.table === menu.table &&
-            (menu.kind === 'row'
-                ? this.menu.row === menu.row
-                : this.menu.column === menu.column);
-        this.menu = same ? null : menu;
+    /**
+     * Open the `kind` grip's menu on the row or column it stands for, its
+     * first row that can run the keyboard's, or close it when it is open
+     * there (a grip's click).
+     */
+    toggle = (kind) => {
+        const source = this.#source(kind);
+        const open = this.menu?.kind === kind;
+        this.menu = open || !source ? null : { kind, table: source.table.id, id: source.id };
+        if (this.menu)
+            this.index = Math.max(0, this.#rows.findIndex((row) => !row.disabled));
         this.edytor.overlay.invalidate();
     };
+    /** Whether a menu is open (reactive). */
+    get isOpen() {
+        return this.menu !== null;
+    }
     /** Close the menu; the editor takes the keys back. */
     close = () => {
         this.menu = null;
         this.edytor.overlay.invalidate();
         takeKeys(this.edytor);
     };
-    /** The rows of the open menu. */
-    get rows() {
-        const menu = this.menu;
-        const table = this.block(menu?.table);
-        const grid = gridOf(table);
-        if (!menu || !table || !grid)
-            return [];
-        const { labels } = this;
-        if (menu.kind === 'row') {
-            const index = grid.rows.findIndex((r) => r.id === menu.row);
-            const row = this.edytor.idToBlock.get(menu.row);
-            if (index < 0 || !row)
-                return [];
-            const last = grid.rows.length - 1;
-            return [
-                {
-                    id: 'insert-above',
-                    label: labels.insertAbove,
-                    icon: 'action.up',
-                    isEnabled: () => true,
-                    run: () => insertRow(table, index, true)
-                },
-                {
-                    id: 'insert-below',
-                    label: labels.insertBelow,
-                    icon: 'action.down',
-                    isEnabled: () => true,
-                    run: () => insertRow(table, index + 1, true)
-                },
-                {
-                    id: 'move-up',
-                    label: labels.moveUp,
-                    icon: 'action.up',
-                    isEnabled: () => index > 0,
-                    run: () => moveRows(table, [row], index - 1)
-                },
-                {
-                    id: 'move-down',
-                    label: labels.moveDown,
-                    icon: 'action.down',
-                    isEnabled: () => index < last,
-                    run: () => moveRows(table, [row], index + 1)
-                },
-                {
-                    id: 'delete-row',
-                    label: labels.deleteRow,
-                    icon: 'action.delete',
-                    danger: true,
-                    isEnabled: () => true,
-                    run: () => deleteRows(table, [row])
-                }
-            ];
-        }
-        const index = menu.column;
-        const column = grid.columns[index];
-        if (column === undefined)
+    /**
+     * The open menu's rows: insert before and after, move back and forth,
+     * delete (whether each can run now; the last deletes).
+     */
+    get #rows() {
+        const kind = this.menu?.kind;
+        const at = kind && this.#source(kind);
+        if (!at)
             return [];
-        const last = grid.columns.length - 1;
+        const { table, grid, id, index } = at;
+        const row = kind === 'row';
+        const block = this.edytor.idToBlock.get(id);
+        const last = (row ? grid.rows : grid.columns).length - 1;
+        const insert = (to) => (row ? insertRow(table, to, true) : insertColumn(table, to));
+        const move = (to) => (row ? moveRows(table, [block], to) : moveColumn(table, id, to));
+        const [before, after, back, forth] = row
+            ? ['above', 'below', 'up', 'down']
+            : ['left', 'right', 'left', 'right'];
         return [
+            { id: `insert-${before}`, disabled: false, run: () => insert(index) },
+            { id: `insert-${after}`, disabled: false, run: () => insert(index + 1) },
+            { id: `move-${back}`, disabled: index === 0, run: () => move(index - 1) },
+            { id: `move-${forth}`, disabled: index === last, run: () => move(index + 1) },
             {
-                id: 'insert-left',
-                label: labels.insertLeft,
-                icon: 'table.left',
-                isEnabled: () => true,
-                run: () => insertColumn(table, index)
-            },
-            {
-                id: 'insert-right',
-                label: labels.insertRight,
-                icon: 'table.right',
-                isEnabled: () => true,
-                run: () => insertColumn(table, index + 1)
-            },
-            {
-                id: 'move-left',
-                label: labels.moveLeft,
-                icon: 'table.left',
-                isEnabled: () => index > 0,
-                run: () => moveColumn(table, index, index - 1)
-            },
-            {
-                id: 'move-right',
-                label: labels.moveRight,
-                icon: 'table.right',
-                isEnabled: () => index < last,
-                run: () => moveColumn(table, index, index + 1)
-            },
-            {
-                id: 'delete-column',
-                label: labels.deleteColumn,
-                icon: 'action.delete',
-                danger: true,
-                isEnabled: () => true,
-                run: () => deleteColumn(table, index)
+                id: `delete-${kind}`,
+                disabled: false,
+                run: () => (row ? deleteRows(table, [block]) : deleteColumn(table, id))
             }
         ];
     }
-    /** Run a menu row, then close the menu. */
-    runRow = (row) => {
-        if (!row.isEnabled())
+    /**
+     * The open menu's rows for your `menu`: each the row shape every menu
+     * shares (`run` runs it and closes the menu, `select` makes it the
+     * keyboard's, `option` its attributes), whether it can run now
+     * (`disabled`) and whether it deletes (`danger`).
+     */
+    get items() {
+        return this.#rows.map(({ id, disabled, run }, index) => ({
+            item: { id },
+            id: this.rowId(index),
+            selected: index === this.index,
+            disabled,
+            danger: id.startsWith('delete'),
+            run: () => {
+                if (disabled)
+                    return;
+                this.menu = this.hovered = null;
+                takeKeys(this.edytor);
+                run();
+                this.edytor.overlay.invalidate();
+            },
+            select: () => {
+                if (!disabled)
+                    this.index = index;
+            },
+            option: this.option(index)
+        }));
+    }
+    /**
+     * The attachment of the open menu's row at `index`
+     * (`{@attach chrome.option(index)}`). Its id, `menuitem` role,
+     * `aria-disabled` when it cannot run now; the keyboard's row scrolls into
+     * view. The menu's element takes
+     * `data-edytor-table-menu` (the kind it is open on) from `popup`.
+     */
+    option(index) {
+        const extra = this.#rows[index]?.disabled ? { 'aria-disabled': true } : {};
+        return optionAttachment(this.rowId(index), 'menuitem', index === this.index, extra);
+    }
+    /**
+     * The element that holds the menu's keyboard (`{@attach chrome.keys}`,
+     * the menu's own): it takes the focus when it mounts and names the
+     * keyboard's row (`aria-activedescendant`); ArrowDown and ArrowUp walk
+     * the rows that can run (around the ends), Home and End reach the first
+     * and last, Enter or Space runs the row, Escape and Tab close the menu
+     * and give the keys back to the editor. No key reaches the page behind.
+     */
+    keys = (node) => untrack(() => {
+        if (!node.hasAttribute('tabindex'))
+            node.tabIndex = -1;
+        return holdKeys(node, this.#keydown, () => this.rowId(this.index));
+    });
+    /** The menu's keys (`keys`). */
+    #keydown = (event) => {
+        if (event.defaultPrevented || event.isComposing)
             return;
-        this.menu = null;
-        this.hovered = null;
-        takeKeys(this.edytor);
-        row.run();
-        this.edytor.overlay.invalidate();
+        const items = this.items;
+        const menu = {
+            at: this.index,
+            count: items.length,
+            to: (index) => (this.index = index),
+            pick: () => items[this.index]?.run(),
+            close: this.close
+        };
+        if (menuKey(event, menu, { usable: (index) => !items[index].disabled }))
+            event.stopPropagation();
     };
-    /** The `+` under the table: a row at its end, the caret in its first cell. */
-    addRow = () => {
-        const table = this.block(this.table);
-        const grid = gridOf(table);
-        if (!table || !grid)
-            return;
-        takeKeys(this.edytor);
-        insertRow(table, grid.rows.length, true);
+    /**
+     * The `kind` grip's attachment (`{@attach}` it on a grip's element; a
+     * `grip` snippet's payload carries it): in an editable view, dragging it
+     * moves its row or column within its table (`table.drag`); a click with
+     * no drag opens or closes its menu; ArrowDown opens the menu, Escape
+     * closes it and gives the keys back to the editor. It carries
+     * `aria-haspopup`, `aria-expanded`, `aria-controls` while its menu is
+     * open, and `data-dragging` during its drag. A press on it is never
+     * prevented: that would stop the native drag.
+     */
+    gripOf = (kind) => (this.#grips[kind] ??= (node) => untrack(() => this.#grip(node, kind)));
+    #grips = {};
+    #grip = (node, kind) => {
+        node.setAttribute('aria-haspopup', 'menu');
+        $effect(() => {
+            const open = this.menu?.kind === kind;
+            attribute(node, 'aria-expanded', String(open));
+            attribute(node, 'aria-controls', open ? this.listId : undefined);
+            attribute(node, 'data-dragging', this.moving?.kind === kind ? 'true' : undefined);
+        });
+        const off = all(listen(node, 'click', () => this.toggle(kind)), listen(node, 'keydown', (event) => {
+            // Escape gives the keys back to the editor (closing the menu if open).
+            if (event.key === 'Escape')
+                this.close();
+            else if (event.key === 'ArrowDown' && this.menu?.kind !== kind)
+                this.toggle(kind);
+            else
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+        }), draggable({
+            element: node,
+            canDrag: () => !this.edytor.readonly && this.edytor.dispatcher.permits() && this.#source(kind) !== null,
+            getInitialData: () => ({ [MOVE]: this }),
+            // The editor's own drag: no view takes it as a foreign drop.
+            getInitialDataForExternal: () => {
+                const source = this.#source(kind);
+                return {
+                    [EDYTOR_BLOCK_DRAG_MIME]: (kind === 'row' ? source?.id : source?.table.id) ?? ''
+                };
+            },
+            onGenerateDragPreview: ({ nativeSetDragImage, location }) => this.#begin(kind, node, location.current.input, nativeSetDragImage),
+            // The drag library tells the source before the drop target: the drop runs first.
+            onDrop: () => queueMicrotask(() => {
+                for (const release of this.#releases.splice(0))
+                    release();
+                this.moving = null;
+                this.edytor.overlay.invalidate();
+            })
+        }));
+        return off;
     };
-    /** The `+` beside the table: a column at its end. */
-    addColumn = () => {
+    /**
+     * The `+` under the table (`row`: a row at its end, the caret in its
+     * first cell) or beside it (a column at its end).
+     * @internal
+     */
+    add = (kind) => {
         const table = this.block(this.table);
         const grid = gridOf(table);
         if (!table || !grid)
             return;
         takeKeys(this.edytor);
-        insertColumn(table, grid.columns.length);
-    };
-    /** A `mousedown` on a band: no native selection; the press itself when no `pointerdown` came. */
-    mousedown = (event, column) => {
-        event.preventDefault();
-        if (isLonePress(this.edytor, event))
-            this.start(event, column);
+        if (kind === 'row')
+            insertRow(table, grid.rows.length, true);
+        else
+            insertColumn(table, grid.columns.length);
     };
     /**
-     * Press on column `column`'s band: the drag starts; the preview follows
-     * the pointer and the release writes the width (`release`); Escape, a
-     * cancel or the view turning readonly drop the preview, nothing written.
+     * Press on column `column`'s band (its `pointerdown`, or its lone
+     * `mousedown`): the drag starts; the preview follows the pointer and the
+     * release writes the width (`#release`); Escape, a cancel or the view
+     * turning readonly drop the preview, nothing written.
+     * @internal
      */
     start = (event, column) => {
-        const { edytor } = this;
-        const layout = this.layout;
-        if (event.button !== 0 || edytor.readonly || this.drag || !layout)
-            return;
-        const col = layout.columns[column];
-        if (!col)
+        const drag = this.band.drag ? null : this.#resize(column, event.clientX, event.clientX);
+        const shown = this.layout?.columns[column]?.width;
+        if (!drag || shown === undefined)
             return;
-        event.preventDefault();
-        event.stopPropagation();
-        const target = event.currentTarget;
-        const pointer = event.type === 'pointerdown';
-        if (pointer)
-            target?.setPointerCapture?.(event.pointerId);
-        this.drag = {
-            table: layout.table,
-            column,
-            from: event.clientX,
-            at: event.clientX,
-            width: col.width
-        };
-        const document = target?.ownerDocument ?? edytor.node?.ownerDocument;
-        const tracked = pointer ? document : document?.defaultView;
-        const [moves, ups] = pointer ? ['pointermove', 'pointerup'] : ['mousemove', 'mouseup'];
-        const move = (moved) => {
-            if (!this.drag)
-                return;
-            if (!edytor.dispatcher.permits())
-                return end(moved);
-            this.drag.at = moved.clientX;
-            edytor.overlay.invalidate();
-        };
-        const end = (ended) => {
-            tracked?.removeEventListener(moves, move);
-            tracked?.removeEventListener(ups, end);
-            tracked?.removeEventListener('pointercancel', end);
-            document?.removeEventListener('keydown', escape, true);
-            const drag = this.drag;
-            if (drag && ended.type === ups) {
-                drag.at = ended.clientX;
-                this.release(drag);
-                takeKeys(edytor);
-            }
-            this.drag = null;
-            edytor.overlay.invalidate();
-        };
-        const escape = (key) => {
-            if (key.key !== 'Escape')
-                return;
-            key.preventDefault();
-            key.stopPropagation();
-            end(key);
-        };
-        this.#cancel = () => end(new Event('cancel'));
-        tracked?.addEventListener(moves, move);
-        tracked?.addEventListener(ups, end);
-        if (pointer)
-            tracked?.addEventListener('pointercancel', end);
-        document?.addEventListener('keydown', escape, true);
-        edytor.overlay.invalidate();
-    };
-    #cancel = null;
-    /** The view turned readonly mid-drag: the preview goes, nothing written. */
-    lock = () => {
-        if (this.drag && !this.edytor.dispatcher.permits())
-            this.#cancel?.();
+        // The press starts from the width the grid shows.
+        this.band.start(event, { ...drag, width: shown, max: Math.max(drag.max, shown) }, (drag) => drag && this.#release(drag));
     };
     /**
      * A key on a focused band: ArrowRight/ArrowLeft widen or narrow the
-     * column by 8px (Shift: 32px); each press is one width write.
+     * column by 8px (Shift: 32px) from its stored width, as far as the room
+     * leaves it (`table.width.fit`); each press is one width write.
+     * @internal
      */
     key = (event, column) => {
-        event.stopPropagation();
-        if (event.key === 'Escape') {
-            event.preventDefault();
-            return takeKeys(this.edytor);
-        }
-        const step = { ArrowLeft: -1, ArrowRight: 1 }[event.key];
-        if (step === undefined)
-            return;
-        event.preventDefault();
-        const layout = this.layout;
-        const col = layout?.columns[column];
-        if (!layout || !col || this.drag)
-            return;
-        const by = step * (event.shiftKey ? 32 : 8);
-        this.release({ table: layout.table, column, from: 0, at: by, width: col.width });
+        const step = bandKey(this.edytor, this.band, event, { ArrowLeft: -1, ArrowRight: 1 });
+        const drag = step && this.#resize(column, 0, step * (event.shiftKey ? 32 : 8));
+        if (drag)
+            this.#release(drag);
     };
     /**
-     * The release: column `drag.column`'s width, one command; nothing when it
-     * did not change, or when the table does not list the column. The width
-     * is written on the column's entry by its item id (the first entry
-     * naming it), never by position: the stored array may hold an entry the
-     * grid does not show.
+     * The release: column `drag.column`'s width, and its right neighbour's
+     * when the column took from it (`table.width.neighbour`), one command;
+     * nothing when neither changed, or when the table does not list the
+     * column. A width is written on its column's entry by its item id (the
+     * first entry naming it), never by position: the stored array may hold
+     * an entry the grid does not show.
      */
-    release(drag) {
+    #release(drag) {
         const table = this.block(drag.table);
-        const id = gridOf(table)?.columns[drag.column];
-        if (!table || id === undefined)
+        const columns = gridOf(table)?.columns;
+        if (!table || !columns || columns[drag.column] === undefined)
             return;
-        const { facade } = table.edytor;
-        const stored = facade.blockDataOf(table.id)?.columns;
-        const entries = Array.isArray(stored) ? stored : [];
-        const at = entries.findIndex((c) => c?.id === id);
-        const item = at < 0 ? undefined : facade.dataItemIds(table.id, ['columns'])[at];
-        if (item === undefined)
+        const entries = entriesOf(table);
+        const items = table.edytor.facade.dataItemIds(table.id, ['columns']);
+        const ops = [this.#dragWidth(drag), this.#nextWidth(drag)].flatMap((width, i) => {
+            const at = entryIndex(entries, columns[drag.column + i]);
+            const item = items[at];
+            return at < 0 || item === undefined || width === undefined
+                ? []
+                : width === widthOf(entries[at], this.columnWidth)
+                    ? []
+                    : [{ path: ['columns', item, 'width'], value: width }];
+        });
+        if (ops.length)
+            this.edytor.patchData(table.id, ops);
+    }
+    /** The drop target and auto-scroll of the drag in progress, released when it ends. */
+    #releases = [];
+    /**
+     * The drag starts: what it moves; its ghost, the row's cells side by side
+     * or the column's one under the other, at their columns' widths (the
+     * blocks' ghost, `dragPreview`); the page as its drop target; auto-scroll.
+     */
+    #begin(kind, node, pointer, nativeSetDragImage) {
+        const source = this.#source(kind);
+        const root = this.edytor.node;
+        if (!source || !root)
             return;
-        const width = this.dragWidth(drag);
-        if (width === widthOf(entries[at], this.columnWidth))
+        const { table, grid, id, index } = source;
+        this.menu = null;
+        this.moving = { kind, table: table.id, id, gap: null };
+        const widths = this.#widthsOf(table);
+        const cells = (kind === 'row' ? grid.rows[index].cells : grid.rows.map((r) => r.cells[index])).flatMap((cell) => (cell && this.edytor.idToBlock.get(cell)?.node) || []);
+        if (nativeSetDragImage && cells.length) {
+            const preview = dragPreview(root, cells, pointer, kind === 'row' ? widths : [widths[index]]);
+            setCustomNativeDragPreview({
+                nativeSetDragImage,
+                getOffset: preview.offset,
+                render: ({ container }) => container.append(preview.element)
+            });
+        }
+        const ours = (data) => data[MOVE] === this;
+        // The page is the target: the line follows the pointer from the grips, outside the grid.
+        this.#releases.push(dropTargetForElements({
+            element: node.ownerDocument.body,
+            canDrop: ({ source }) => ours(source.data),
+            onDragEnter: ({ location }) => this.#aim(location.current.input),
+            onDrag: ({ location }) => this.#aim(location.current.input),
+            onDragLeave: () => this.#aim(null),
+            onDrop: ({ location }) => this.#drop(location.current.input)
+        }));
+        const scroller = table.node?.querySelector('[data-edytor-table-scroll]');
+        if (scroller)
+            this.#releases.push(autoScrollFor(scroller, ours));
+        this.edytor.overlay.invalidate();
+    }
+    /**
+     * Where the moving row or column would land at `input` (`table.drag`):
+     * its gap, by the rows' (columns') middles, and its position once moved;
+     * `null` outside the table (past its box and the gutter) and at its own
+     * place (the gap before or after it).
+     */
+    #landing(input) {
+        const move = this.moving;
+        const table = this.block(move?.table);
+        const grid = gridOf(table);
+        const node = gridNode(table);
+        const box = table?.node?.getBoundingClientRect();
+        if (!move || !input || !box || !grid || !node)
+            return null;
+        const { clientX: x, clientY: y } = input;
+        if (x < box.left - GUTTER ||
+            x > box.right + GUTTER ||
+            y < box.top - GUTTER ||
+            y > box.bottom + GUTTER)
+            return null;
+        // The gap: the rows' (columns', from the grid's left border) middles before the pointer.
+        let gap = 0;
+        let from;
+        if (move.kind === 'row') {
+            from = grid.rows.findIndex((r) => r.id === move.id);
+            for (const row of grid.rows) {
+                const rect = this.edytor.idToBlock.get(row.id)?.node?.getBoundingClientRect();
+                if (rect && y > rect.top + rect.height / 2)
+                    gap++;
+            }
+        }
+        else {
+            from = grid.columns.indexOf(move.id);
+            let left = node.getBoundingClientRect().left + px(styleOf(node)?.borderLeftWidth);
+            for (const width of trackWidths(node))
+                if (x > (left += width) - width / 2)
+                    gap++;
+        }
+        if (from < 0 || gap === from || gap === from + 1)
+            return null;
+        return { gap, to: gap > from ? gap - 1 : gap };
+    }
+    /** The pointer moved during the drag: the drop line follows it. */
+    #aim(input) {
+        const move = this.moving;
+        const gap = this.#landing(input)?.gap ?? null;
+        if (!move || gap === move.gap)
+            return;
+        move.gap = gap;
+        this.edytor.overlay.invalidate();
+    }
+    /**
+     * The drop: the row or column moves to the gap at the pointer (`moveRows`,
+     * `moveColumn`: one command, one undo step), the keys go to the editor;
+     * nothing where no line shows.
+     */
+    #drop(input) {
+        const move = this.moving;
+        const landing = this.#landing(input);
+        const table = this.block(move?.table);
+        if (!move)
+            return;
+        move.gap = null;
+        if (!landing || !table)
             return;
-        table.patchData({ ops: [{ path: ['columns', item, 'width'], value: width }] });
+        if (move.kind === 'row') {
+            const row = this.edytor.idToBlock.get(move.id);
+            if (row)
+                moveRows(table, [row], landing.to);
+        }
+        else
+            moveColumn(table, move.id, landing.to);
+        takeKeys(this.edytor);
     }
 }
-const sameLayout = (a, b) => a === b || (a !== null && b !== null && JSON.stringify(a) === JSON.stringify(b));