@quillmark/svelte 0.19.0 → 0.20.0

package/dist/core/codec/table-view.js

@@ -3,8 +3,8 @@
 // it renders is PM's own: a leaf node's substitute DOM, holding one nested
 // `EditorView` per cell.
 //
-// A cell is a second content unit inside the first, so it gets the codec's inline mode
-// (one paragraph, no containers, no islands, marks and input rules intact);
+// A cell is a second content unit inside the first, so it gets its own schema (one
+// paragraph with hard breaks, no containers, no islands, marks and input rules intact);
 // `table.ts` owns that translation. A cell edit does not touch the field's text:
 // the projection goes back onto the node's `props` attribute with `setNodeMarkup`,
 // and the field's own `dispatchTransaction` lowers that to an `islandOps` `set`
@@ -14,9 +14,10 @@
 // field's, so one undo stack covers the leaf), no anchor plugin (an anchor in a cell
 // is preserved, never minted), and no placeholder.
 //
-// The chrome is a band and a selection (CODEC §"The table island"), and it raises
-// nothing. Every control is absolutely positioned out of the grid, so the band is in no
-// row and no column of it; `codec/prose.css` draws the band and the selection wash both.
+// The chrome is a band and a selection (CODEC §"The table island"), and the band raises
+// nothing: what floats over the grid is the held column's alignment cluster alone. Every
+// control is absolutely positioned out of the grid, so none is in a row or a column of
+// it; `codec/prose.css` draws the band, the cluster and the selection wash.
 import { baseKeymap, chainCommands, toggleMark } from 'prosemirror-commands';
 import { redo, undo } from 'prosemirror-history';
 import { keymap } from 'prosemirror-keymap';
@@ -25,8 +26,9 @@ import { EditorView } from 'prosemirror-view';
 import { decode } from './decode.js';
 import { inputRulesPlugin } from './inputrules.js';
 import { tablePropsOfNode } from './islands.js';
-import { inlineSchema } from './schema.js';
-import { cellAt, cellContent, cellEqual, cellFromDoc, clearCells, columnCount, deleteColumn, deleteRow, insertColumn, insertRow, moveColumn, moveRow, normalizeTable, rowCells, rowCount, rowEmpty, shapeEqual, withCell } from './table.js';
+import { breakKeymap } from './breaks.js';
+import { cellSchema } from './schema.js';
+import { ALIGNS, cellAt, cellContent, cellEqual, cellFromDoc, clearCells, columnCount, deleteColumn, deleteRow, insertColumn, insertRow, moveColumn, moveRow, normalizeTable, rowCells, rowCount, rowEmpty, setAlign, setHeadless, setCellLayout, columnShares, setWidths, shapeEqual, withCell } from './table.js';
 /**
  * The package's English for the island chrome. It lives here, beside the surface
  * that draws it, rather than in the visual tier's table: the codec mounts this
@@ -44,26 +46,85 @@ export const DEFAULT_TABLE_STRINGS = {
     tableSelectRow: (index) => `Select row ${index}`,
     tableSelectColumn: (index) => `Select column ${index}`,
     tableAddRow: 'Add row',
-    tableAddColumn: 'Add column'
+    tableAddColumn: 'Add column',
+    tableAlignLeft: 'Align left',
+    tableAlignCenter: 'Align center',
+    tableAlignRight: 'Align right',
+    tableHeaderToggle: 'Header row',
+    tableAlignTop: 'Align top',
+    tableAlignMiddle: 'Align middle',
+    tableAlignBottom: 'Align bottom',
+    tableCellAlignment: 'Cell alignment'
 };
-/** The one glyph this chrome draws, as the path data a DOM node can carry — its own set
- *  rather than `visual/icons/nodes.ts`, this being the one place chrome is built without
- *  Svelte, and `/core` reaching no surface module. Same 24×24 frame and the same origin,
- *  off an earlier release than the thirteen there; `NOTICE` carries the notices for
- *  both. The dots are zero-length strokes under a round cap, which is how that set draws
- *  a dot everywhere it has one. */
+/** The grip's glyph, as the path data a DOM node can carry — this chrome's own set rather
+ *  than `visual/icons/nodes.ts`, this being the one place chrome is built without Svelte,
+ *  and `/core` reaching no surface module. Same 24×24 frame and the same origin, off an
+ *  earlier release than the set there; `NOTICE` carries the notices for both. The dots
+ *  are zero-length strokes under a round cap, which is how that set draws a dot
+ *  everywhere it has one. */
 const GRIP = {
     column: ['M5 9h.01', 'M12 9h.01', 'M19 9h.01', 'M5 15h.01', 'M12 15h.01', 'M19 15h.01'],
     row: ['M9 5h.01', 'M9 12h.01', 'M9 19h.01', 'M15 5h.01', 'M15 12h.01', 'M15 19h.01']
 };
-/** The grip's marks. The stroke is heavy for a chrome glyph because they are dots, and a
- *  dot drawn at the line weight of a stroke disappears at the size the bar renders. */
-function svg(paths) {
+/** The alignments the cluster draws and Shift+arrow steps through, in that order. */
+const SETTABLE = ALIGNS.filter((a) => a !== 'none');
+/** The cluster's glyphs, off the same release as the grip's. */
+const ALIGN_GLYPH = {
+    left: ['M21 6H3', 'M15 12H3', 'M17 18H3'],
+    center: ['M21 6H3', 'M17 12H7', 'M19 18H5'],
+    right: ['M21 6H3', 'M21 12H9', 'M21 18H7']
+};
+/** The header toggle's glyph, off the same release: a frame with its top band ruled off. */
+const HEADER_GLYPH = [
+    'M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z',
+    'M3 9h18'
+];
+/** The held cells' vertical toggles' glyphs, off the same release. */
+const VALIGN_GLYPH = {
+    top: [
+        'M6 6h2a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z',
+        'M16 6h2a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z',
+        'M22 2H2'
+    ],
+    middle: [
+        'M2 12h20',
+        'M10 16v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-4',
+        'M10 8V4a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v4',
+        'M20 16v1a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2v-1',
+        'M14 8V7c0-1.1.9-2 2-2h2a2 2 0 0 1 2 2v1'
+    ],
+    bottom: [
+        'M6 2h2a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z',
+        'M16 9h2a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2z',
+        'M22 22H2'
+    ]
+};
+/** The vertical alignments a cell takes, in the cluster's order. */
+const VALIGNS = ['top', 'middle', 'bottom'];
+/** Draw a cell's alignment on its box: its own where it holds one, its column's
+ *  otherwise, and the vertical one where it holds one. */
+function layCell(box, props, r, c) {
+    const cell = cellAt(props, r, c);
+    const column = props.aligns[c] ?? 'none';
+    box.style.textAlign = cell.align ?? (column === 'none' ? '' : column);
+    box.style.verticalAlign = cell.valign ?? '';
+}
+/** The cells of an inclusive rectangle, in reading order. */
+function allCells(props, held) {
+    const out = [];
+    for (let r = held.r0; r <= held.r1; r++)
+        for (let c = held.c0; c <= held.c1; c++)
+            out.push(cellAt(props, r, c));
+    return out;
+}
+/** A glyph's marks at `weight`: the set's own is 2, and the grip takes 3, its marks being
+ *  dots, which at the line weight of a stroke disappear at the size the bar renders. */
+function svg(paths, weight) {
     const el = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
     el.setAttribute('viewBox', '0 0 24 24');
     el.setAttribute('fill', 'none');
     el.setAttribute('stroke', 'currentColor');
-    el.setAttribute('stroke-width', '3');
+    el.setAttribute('stroke-width', String(weight));
     el.setAttribute('stroke-linecap', 'round');
     el.setAttribute('stroke-linejoin', 'round');
     el.setAttribute('aria-hidden', 'true');
@@ -100,13 +161,13 @@ function chromeButton(className, label, run) {
 /** A cell's plugin stack: marks and the markdown shorthands, and nothing that
  *  belongs to the field (history, anchors, the ghost). */
 function cellPlugins(keys) {
-    return [inputRulesPlugin(inlineSchema), keymap(keys), keymap(baseKeymap)];
+    return [inputRulesPlugin(cellSchema), keymap(keys), keymap(baseKeymap)];
 }
-/** The band's controls, each of which answers for its own press. Spelled apart from
+/** The controls, each of which answers for its own press. Spelled apart from
  *  {@link owned} because the pointer router needs them before it needs the cells: a grip
- *  is inside the cell it names, so the two selectors overlap on exactly the press whose
- *  reading they disagree about. */
-const CONTROLS = '.qm-table-grip, .qm-table-add';
+ *  and a cluster are inside the cell they name, so the two selectors overlap on exactly
+ *  the press whose reading they disagree about. */
+const CONTROLS = '.qm-table-grip, .qm-table-add, .qm-table-align, .qm-table-resize';
 /** What the nested views and the band answer for themselves, which is what `stopEvent`
  *  keeps from PM. */
 const OWNED = `.qm-table-cell-host, ${CONTROLS}`;
@@ -145,12 +206,23 @@ class TableIslandView {
      *  without a query. The typed twin of `cells`, `Line` included — a key parsed back
      *  into one is the `data-` attribute `MountedCell.box` refuses. */
     grips = new Map();
+    /** The alignment clusters, by column. */
+    clusters = [];
+    /** The first row's header toggle, up while that row is held. */
+    headerCluster;
+    /** The held cells' cluster, up over the first cell of a held rectangle that is no
+     *  column, and built for each paint since what it presses is the cells'. */
+    cellCluster;
     /** The grid's own box, and the containing block every out-of-flow control is placed
      *  against. Not the scroller: an absolute inside a scroll container is placed
      *  against a padding box the scroll then slides out from under, so a control at the
      *  grid's far end would drift into the middle of it. */
     frame;
     dropMark;
+    /** The grid's `<col>`s, which a border drag sizes live and a render sizes from the
+     *  stored weights. */
+    cols = [];
+    resize;
     /** A drag's trailing `click`, which would otherwise re-select the moved line. */
     suppressClick = false;
     constructor(node, outer, getPos, deps) {
@@ -190,7 +262,7 @@ class TableIslandView {
                 continue;
             const head = mounted.view.state.selection.head;
             const fresh = EditorState.create({
-                doc: decode(cellContent(stored), inlineSchema),
+                doc: decode(cellContent(stored), cellSchema),
                 plugins: cellPlugins(this.cellKeys(mounted.r, mounted.c))
             });
             mounted.view.updateState(fresh);
@@ -202,6 +274,11 @@ class TableIslandView {
             const at = Math.min(head, fresh.doc.content.size);
             mounted.view.dispatch(fresh.tr.setSelection(Selection.near(fresh.doc.resolve(at))));
         }
+        // A cell's alignment is no part of its text, so it is restated on every box: the
+        // reseed above compares text and marks alone.
+        for (const mounted of this.cells)
+            layCell(mounted.box, props, mounted.r, mounted.c);
+        this.paintSelection();
         return true;
     }
     /** The nested views own every event inside a cell or a control; everything else
@@ -221,6 +298,7 @@ class TableIslandView {
         this.dom.removeEventListener('mousedown', this.onPointerDown);
         this.endDrag();
         this.endSweep();
+        this.endResize();
         this.teardownCells();
     }
     // ── The pointer ───────────────────────────────────────────────────────────
@@ -494,14 +572,23 @@ class TableIslandView {
         this.selected = undefined;
         this.paintSelection();
     }
-    /** Wash the selected cells and mark the grip of any line the selection exactly
-     *  covers. Imperative rather than a re-render: a rebuild destroys the nested views,
-     *  and a selection is exactly the state that must not cost the carets in them. */
+    /** Wash the selected cells, mark the grip of any line the selection exactly covers, and
+     *  put up the cluster of a column it covers. Imperative rather than a re-render: a
+     *  rebuild destroys the nested views, and a selection is exactly the state that must
+     *  not cost the carets in them. */
     paintSelection() {
         const held = this.selected;
         const props = this.props();
-        for (const { line, grip } of this.grips.values())
-            grip.setAttribute('aria-pressed', String(!!held && sameCells(held, this.lineCells(line, props))));
+        for (const { line, grip } of this.grips.values()) {
+            const named = !!held && sameCells(held, this.lineCells(line, props));
+            grip.setAttribute('aria-pressed', String(named));
+            const cluster = line.axis === 'column' ? this.clusters[line.index] : undefined;
+            if (cluster)
+                cluster.hidden = !named;
+            if (line.axis === 'row' && line.index === 0 && this.headerCluster)
+                this.headerCluster.hidden = !named;
+        }
+        this.paintCellCluster(props);
         for (const cell of this.cells)
             cell.box.toggleAttribute('data-selected', !!held && cell.r >= held.r0 && cell.r <= held.r1 && cell.c >= held.c0 && cell.c <= held.c1);
     }
@@ -576,6 +663,73 @@ class TableIslandView {
         this.write(line.axis === 'row' ? moveRow(props, line.index, by) : moveColumn(props, line.index, by));
         this.selectLine({ axis: line.axis, index: to });
     }
+    /** Set column `c`'s alignment and keep the column held: a changed alignment rebuilds
+     *  the views, which retires the selection as a move's rebuild does. The alignment the
+     *  column already holds writes nothing. */
+    align(c, to) {
+        const props = this.props();
+        if (props.aligns[c] !== to)
+            this.write(setAlign(props, c, to));
+        this.selectLine({ axis: 'column', index: c });
+    }
+    /** The held cells' cluster: up over the first cell of a held rectangle, where no
+     *  column's own cluster is, each toggle pressed where every cell in the rectangle
+     *  holds it. It floats over the cell under that one, as the column's floats over the
+     *  first row, and is out of the tab order for the reason a grip is, its keyboard twin
+     *  being `Mod-Shift-l`, `-e` and `-r` (§{@link TableIslandView.cellKeys}). */
+    paintCellCluster(props) {
+        this.cellCluster?.remove();
+        this.cellCluster = undefined;
+        const held = this.selected;
+        if (!held || this.lineOn('column') !== undefined)
+            return;
+        const first = this.cells.find((m) => m.r === held.r0 && m.c === held.c0);
+        if (!first)
+            return;
+        const s = this.deps.strings();
+        const covered = allCells(props, held);
+        const holds = (key, value) => covered.every((cell) => cell[key] === value);
+        const cluster = el('div', 'qm-table-align');
+        cluster.setAttribute('role', 'group');
+        cluster.setAttribute('aria-label', s.tableCellAlignment);
+        cluster.setAttribute('data-cells', '');
+        cluster.addEventListener('mousedown', (e) => e.preventDefault());
+        const toggle = (label, glyph, pressed, run) => {
+            const btn = chromeButton('qm-table-align-option', label, run);
+            btn.tabIndex = -1;
+            btn.setAttribute('aria-pressed', String(pressed));
+            btn.appendChild(svg(glyph, 2));
+            cluster.appendChild(btn);
+            return btn;
+        };
+        const names = {
+            left: s.tableAlignLeft,
+            center: s.tableAlignCenter,
+            right: s.tableAlignRight
+        };
+        for (const align of SETTABLE)
+            toggle(names[align], ALIGN_GLYPH[align], holds('align', align), () => this.layCells('align', align)).setAttribute('data-align', align);
+        const vnames = {
+            top: s.tableAlignTop,
+            middle: s.tableAlignMiddle,
+            bottom: s.tableAlignBottom
+        };
+        for (const valign of VALIGNS)
+            toggle(vnames[valign], VALIGN_GLYPH[valign], holds('valign', valign), () => this.layCells('valign', valign)).setAttribute('data-valign', valign);
+        first.box.appendChild(cluster);
+        this.cellCluster = cluster;
+    }
+    /** Lay every held cell, or the caret's where none is held, at `value`, and clear the
+     *  key from them where every one already holds it: the press that set an alignment
+     *  takes it back to the column's. One `set`, and the rectangle stays held. */
+    layCells(key, value, at) {
+        const held = this.selected ?? (at && { r0: at.r, c0: at.c, r1: at.r, c1: at.c });
+        if (!held)
+            return;
+        const props = this.props();
+        const every = allCells(props, held).every((cell) => cell[key] === value);
+        this.write(setCellLayout(props, held.r0, held.c0, held.r1, held.c1, key, every ? undefined : value));
+    }
     // ── Drag to reorder ───────────────────────────────────────────────────────
     /**
      * Press-and-drag a grip moves its line. The press still selects: the dead zone is
@@ -741,6 +895,109 @@ class TableIslandView {
             mark.style.height = `${line.span}px`;
         }
     }
+    // ── Column widths ─────────────────────────────────────────────────────────
+    /** Size the grid's columns, or return it to auto-fit. A weighted grid spans the leaf
+     *  laid out fixed, as the page's fractional columns span the text block, so the
+     *  proportions it draws are the ones the page prints. */
+    weigh(widths) {
+        this.frame?.toggleAttribute('data-weighted', widths !== undefined);
+        this.cols.forEach((col, c) => (col.style.width = widths?.[c] ?? ''));
+    }
+    /**
+     * The border after column `c`, in the band: a press and a drag move it, trading width
+     * between the two columns it divides, and the release writes every column's measured
+     * width as its weight, one `set` and one undo step. A double-click returns the table
+     * to auto-fit.
+     *
+     * Pointer chrome for the reason a grip is, and named to nothing: it is no button, and
+     * a column's width has no keyboard route.
+     */
+    resizer(c) {
+        const handle = el('span', 'qm-table-resize');
+        handle.setAttribute('aria-hidden', 'true');
+        handle.addEventListener('mousedown', (e) => e.preventDefault());
+        handle.addEventListener('pointerdown', (e) => this.onResizeDown(c, handle, e));
+        handle.addEventListener('dblclick', () => {
+            if (this.props().widths)
+                this.write(setWidths(this.props(), undefined));
+        });
+        return handle;
+    }
+    onResizeDown = (c, handle, event) => {
+        if (event.button !== 0)
+            return;
+        this.endResize();
+        const heads = this.cells.filter((m) => m.r === 0).sort((a, b) => a.c - b.c);
+        const widths = heads.map((m) => m.box.getBoundingClientRect().width);
+        // A cell's floor is its host's measure plus the box's own padding and border, read
+        // off the header cell the border hangs from.
+        const head = heads[c];
+        const floor = head
+            ? Number.parseFloat(getComputedStyle(head.host).minWidth) +
+                head.box.getBoundingClientRect().width -
+                head.host.getBoundingClientRect().width
+            : 0;
+        this.resize = {
+            c,
+            handle,
+            pointerId: event.pointerId,
+            from: event.clientX,
+            widths,
+            floor: Number.isFinite(floor) ? floor : 0,
+            engaged: false
+        };
+        handle.setPointerCapture?.(event.pointerId);
+        handle.addEventListener('pointermove', this.onResizeMove);
+        handle.addEventListener('pointerup', this.onResizeUp);
+        handle.addEventListener('pointercancel', this.onResizeUp);
+    };
+    /** The widths a border at `x` leaves: the two columns it divides trade the travel,
+     *  each clamped at the floor, and every other column keeps the width it was pressed at. */
+    resized(resize, x) {
+        const { c, widths, floor } = resize;
+        const left = widths[c] ?? 0;
+        const right = widths[c + 1] ?? 0;
+        const travel = Math.max(floor - left, Math.min(right - floor, x - resize.from));
+        return widths.map((w, i) => (i === c ? left + travel : i === c + 1 ? right - travel : w));
+    }
+    onResizeMove = (event) => {
+        const resize = this.resize;
+        if (!resize)
+            return;
+        if (!resize.engaged && Math.abs(event.clientX - resize.from) < DEAD_ZONE)
+            return;
+        resize.engaged = true;
+        resize.handle.setAttribute('data-active', '');
+        const widths = this.resized(resize, event.clientX);
+        const total = widths.reduce((a, b) => a + b, 0);
+        this.weigh(widths.map((w) => `${(w / total) * 100}%`));
+    };
+    onResizeUp = (event) => {
+        const resize = this.resize;
+        if (!resize)
+            return;
+        this.endResize();
+        if (!resize.engaged)
+            return;
+        if (event.type !== 'pointerup') {
+            this.weigh(columnShares(this.props())?.map((share) => `${share * 100}%`));
+            return;
+        }
+        const widths = this.resized(resize, event.clientX).map((w) => Math.max(1, Math.round(w)));
+        this.write(setWidths(this.props(), widths));
+    };
+    endResize() {
+        const resize = this.resize;
+        if (!resize)
+            return;
+        this.resize = undefined;
+        resize.handle.removeAttribute('data-active');
+        resize.handle.removeEventListener('pointermove', this.onResizeMove);
+        resize.handle.removeEventListener('pointerup', this.onResizeUp);
+        resize.handle.removeEventListener('pointercancel', this.onResizeUp);
+        if (resize.handle.hasPointerCapture?.(resize.pointerId))
+            resize.handle.releasePointerCapture(resize.pointerId);
+    }
     // ── Render ────────────────────────────────────────────────────────────────
     teardownCells() {
         for (const mounted of this.cells) {
@@ -753,8 +1010,11 @@ class TableIslandView {
         const seat = this.focusedSeat();
         this.endDrag();
         this.endSweep();
+        this.endResize();
         this.teardownCells();
         this.grips.clear();
+        this.clusters = [];
+        this.headerCluster = undefined;
         this.dom.textContent = '';
         const props = tablePropsOfNode(this.node);
         this.rendered = props;
@@ -768,23 +1028,35 @@ class TableIslandView {
         this.dom.setAttribute('aria-label', s.tableLabel);
         // `thead`/`tbody` rather than one `tbody`: the header is a separate field in the
         // model, and this is the markup that says so to something that cannot see the
-        // weight the header row draws.
+        // weight the header row draws. A headless table's first row is a body row on the
+        // page, so it is one here too, still holding row 0's chrome.
         const table = el('table', 'qm-table');
-        const head = el('thead');
-        head.appendChild(this.row(props, 0, s));
+        const colgroup = el('colgroup');
+        this.cols = Array.from({ length: columnCount(props) }, () => el('col'));
+        colgroup.append(...this.cols);
+        const first = this.row(props, 0, s);
         const body = el('tbody');
+        if (props.headless) {
+            body.appendChild(first);
+            table.append(colgroup, body);
+        }
+        else {
+            const head = el('thead');
+            head.appendChild(first);
+            table.append(colgroup, head, body);
+        }
         for (let r = 1; r < rowCount(props); r++)
             body.appendChild(this.row(props, r, s));
-        table.append(head, body);
         // The frame is the grid's own box, and the two controls about an axis rather than
         // about a line hang off its edges: an add bar along each trailing edge. A cell
         // would have served for neither — a table with no body rows has no last row to
         // hang the row bar in, and a bar spans the whole edge rather than one line of it.
         const frame = el('div', 'qm-table-frame');
         frame.append(table, this.addBar('column', s.tableAddColumn), this.addBar('row', s.tableAddRow));
+        this.frame = frame;
+        this.weigh(columnShares(props)?.map((share) => `${share * 100}%`));
         const scroller = el('div', 'qm-table-scroller');
         scroller.appendChild(frame);
-        this.frame = frame;
         this.dom.appendChild(scroller);
         this.paintSelection();
         this.reseat(seat);
@@ -814,16 +1086,16 @@ class TableIslandView {
     }
     /** One table row: its cells, each carrying whatever chrome hangs off it. */
     row(props, r, s) {
-        const tr = el('tr', r === 0 ? 'qm-table-header-row' : undefined);
+        const heads = r === 0 && !props.headless;
+        const tr = el('tr', heads ? 'qm-table-header-row' : undefined);
         rowCells(props, r).forEach((cell, c) => {
-            const box = el(r === 0 ? 'th' : 'td', 'qm-table-cell');
-            if (r === 0)
+            const box = el(heads ? 'th' : 'td', 'qm-table-cell');
+            if (heads)
                 box.setAttribute('scope', 'col');
             box.setAttribute('data-r', String(r));
             box.setAttribute('data-c', String(c));
             const align = props.aligns[c] ?? 'none';
-            if (align !== 'none')
-                box.style.textAlign = align;
+            layCell(box, props, r, c);
             const host = el('div', 'qm-table-cell-host');
             box.appendChild(host);
             // The column band hangs off the header row; the row band off every row's first
@@ -834,9 +1106,13 @@ class TableIslandView {
             // row and the header is one: it selects, it deletes, and it drags, all by the
             // rules every other row is under.
             if (r === 0)
-                box.appendChild(this.grip({ axis: 'column', index: c }, s.tableSelectColumn(c + 1)));
+                box.append(this.grip({ axis: 'column', index: c }, s.tableSelectColumn(c + 1)), this.alignCluster(c, align, s));
+            if (r === 0 && c < columnCount(props) - 1)
+                box.appendChild(this.resizer(c));
             if (c === 0)
-                box.appendChild(this.grip({ axis: 'row', index: r }, r === 0 ? s.tableSelectHeaderRow : s.tableSelectRow(r)));
+                box.appendChild(this.grip({ axis: 'row', index: r }, heads ? s.tableSelectHeaderRow : s.tableSelectRow(props.headless ? r + 1 : r)));
+            if (r === 0 && c === columnCount(props) - 1)
+                box.appendChild(this.headerToggle(!props.headless, s));
             tr.appendChild(box);
             this.mountCell(box, host, r, c, s);
         });
@@ -863,12 +1139,62 @@ class TableIslandView {
         btn.setAttribute('aria-pressed', 'false');
         btn.setAttribute('data-axis', line.axis);
         const bar = el('span', 'qm-table-grip-bar');
-        bar.appendChild(svg(GRIP[line.axis]));
+        bar.appendChild(svg(GRIP[line.axis], 3));
         btn.appendChild(bar);
         btn.addEventListener('pointerdown', (e) => this.onGripDown(line, btn, e));
         this.grips.set(lineKey(line), { line, grip: btn });
         return btn;
     }
+    /** A column's alignment cluster: a toggle per alignment, pressed on the one the column
+     *  holds. Up only while the held rectangle is this column
+     *  ({@link TableIslandView.paintSelection}), and absent rather than transparent the
+     *  rest of the time: it floats over the first row, and a box hit-tested there at rest
+     *  would take that cell's presses. Out of the tab order for the reason a grip is, its
+     *  keyboard twin being Shift+Left and Shift+Right (§{@link TableIslandView.cellKeys}). */
+    alignCluster(c, held, s) {
+        const cluster = el('div', 'qm-table-align');
+        cluster.setAttribute('role', 'group');
+        cluster.setAttribute('aria-label', s.tableColumn(c + 1));
+        cluster.hidden = true;
+        // The cluster's own edge is no button, and a press on it would otherwise take the
+        // focus off the caret the write lands back on.
+        cluster.addEventListener('mousedown', (e) => e.preventDefault());
+        const names = {
+            left: s.tableAlignLeft,
+            center: s.tableAlignCenter,
+            right: s.tableAlignRight
+        };
+        for (const align of SETTABLE) {
+            const btn = chromeButton('qm-table-align-option', names[align], () => this.align(c, align));
+            btn.tabIndex = -1;
+            btn.setAttribute('aria-pressed', String(held === align));
+            btn.setAttribute('data-align', align);
+            btn.appendChild(svg(ALIGN_GLYPH[align], 2));
+            cluster.appendChild(btn);
+        }
+        this.clusters[c] = cluster;
+        return cluster;
+    }
+    /** The first row's header toggle: one press draws the row as the header or as a body
+     *  row, writing the table's `headless` as one `set`, and the row stays held. Up only
+     *  while the first row is held, hanging under its last cell, and out of the tab order
+     *  for the reason a grip is. */
+    headerToggle(header, s) {
+        const cluster = el('div', 'qm-table-align');
+        cluster.setAttribute('data-header', '');
+        cluster.hidden = true;
+        cluster.addEventListener('mousedown', (e) => e.preventDefault());
+        const btn = chromeButton('qm-table-align-option', s.tableHeaderToggle, () => {
+            this.write(setHeadless(this.props(), header));
+            this.selectLine({ axis: 'row', index: 0 });
+        });
+        btn.tabIndex = -1;
+        btn.setAttribute('aria-pressed', String(header));
+        btn.appendChild(svg(HEADER_GLYPH, 2));
+        cluster.appendChild(btn);
+        this.headerCluster = cluster;
+        return cluster;
+    }
     /** A trailing bar: the whole edge past the last line of its axis, and the one way a
      *  pointer grows the table. It spans the edge rather than capping it, because what it
      *  appends to is the axis and not a line. It draws no glyph — the bar arriving under
@@ -895,11 +1221,12 @@ class TableIslandView {
     }
     mountCell(box, host, r, c, s) {
         const props = this.props();
-        const name = s.tableCell(r === 0 ? s.tableHeaderRow : s.tableRow(r), s.tableColumn(c + 1));
+        const row = props.headless ? s.tableRow(r + 1) : r === 0 ? s.tableHeaderRow : s.tableRow(r);
+        const name = s.tableCell(row, s.tableColumn(c + 1));
         const seed = cellAt(props, r, c);
         const view = new EditorView(host, {
             state: EditorState.create({
-                doc: decode(cellContent(seed), inlineSchema),
+                doc: decode(cellContent(seed), cellSchema),
                 plugins: cellPlugins(this.cellKeys(r, c))
             }),
             attributes: { 'aria-label': name, class: 'qm-table-cell-editor' },
@@ -992,18 +1319,17 @@ class TableIslandView {
      * (VISUAL_EDITOR §Chrome), except that it binds on the nested view: the outer
      * keymap never sees a keystroke a cell handled (`stopEvent`).
      *
-     * Enter is the next row, forced: a `TableCell` has one `text` and no line
-     * concept, and `continues` is a line flag with no cell analogue, so a newline in
-     * a cell has no representation to be a preference about.
+     * Enter is the next row. Shift-Enter is a line break, the body's own command
+     * (`breaks.ts`): one `\n` in the cell's `text`.
      */
     cellKeys(r, c) {
         const marks = {};
-        if (inlineSchema.marks.strong)
-            marks['Mod-b'] = toggleMark(inlineSchema.marks.strong);
-        if (inlineSchema.marks.em)
-            marks['Mod-i'] = toggleMark(inlineSchema.marks.em);
-        if (inlineSchema.marks.underline)
-            marks['Mod-u'] = toggleMark(inlineSchema.marks.underline);
+        if (cellSchema.marks.strong)
+            marks['Mod-b'] = toggleMark(cellSchema.marks.strong);
+        if (cellSchema.marks.em)
+            marks['Mod-i'] = toggleMark(cellSchema.marks.em);
+        if (cellSchema.marks.underline)
+            marks['Mod-u'] = toggleMark(cellSchema.marks.underline);
         // Up and down are the grid's own walk: nothing else moves the caret vertically,
         // and `focusCell` clamps, so neither can grow the table. Left and right do not
         // traverse at all: at a text edge they would call what Tab and Shift-Tab already
@@ -1057,8 +1383,25 @@ class TableIslandView {
                 return true;
             };
         };
+        // Shift steps a held column's alignment a place along the cluster's order, stopping
+        // at either end, and a column with none steps from the first. Over any other
+        // rectangle it keeps the key, every arrow being the rectangle's while one is held.
+        const slide = (by) => {
+            return () => {
+                if (!this.selected)
+                    return false;
+                const on = this.lineOn('column');
+                if (on === undefined)
+                    return true;
+                const held = this.props().aligns[on];
+                const at = Math.max(0, SETTABLE.findIndex((a) => a === held));
+                this.align(on, SETTABLE[Math.max(0, Math.min(at + by, SETTABLE.length - 1))]);
+                return true;
+            };
+        };
         return {
             ...marks,
+            ...breakKeymap(cellSchema),
             // One undo stack per leaf: a cell carries no history of its own, so Mod-z
             // unwinds a cell keystroke and a row op in the order they happened.
             'Mod-z': () => undo(this.outer.state, this.outer.dispatch),
@@ -1074,12 +1417,13 @@ class TableIslandView {
             'Alt-ArrowDown': line('row', 1, true),
             'Alt-ArrowLeft': line('column', -1, true),
             'Alt-ArrowRight': line('column', 1, true),
+            'Shift-ArrowLeft': slide(-1),
+            'Shift-ArrowRight': slide(1),
+            'Shift-Mod-l': () => (this.layCells('align', 'left', { r, c }), true),
+            'Shift-Mod-e': () => (this.layCells('align', 'center', { r, c }), true),
+            'Shift-Mod-r': () => (this.layCells('align', 'right', { r, c }), true),
             Tab: () => this.step(r, c, 1),
             'Shift-Tab': () => this.step(r, c, -1),
-            // A cell is one line (`normalize` rewrites a cell newline to a space), so the
-            // key the body answers with a break is claimed here and does nothing: Enter
-            // already means the next row, and an unclaimed key is the browser's `<br>`.
-            'Shift-Enter': () => true,
             Enter: () => {
                 // Over a rectangle it hands the caret back, which is the line verbs' own
                 // exit: the caret never left the cell, so there is nowhere else to put it.