@quillmark/svelte 0.5.1 → 0.7.0

package/dist/core/codec/prose.css

@@ -432,11 +432,11 @@ li.ProseMirror-selectednode::after {
    which is drawn through a drag the pointer has travelled off — answering which line.
 
    Opacity rather than absence, so every control keeps its box and is hit-tested wherever
-   it sits. A grip's reach is the pointer's — no Tab arrives at one, the cell traversal
-   claiming the key first (`table-view.ts` §`step`) — so it is out of the tab order, and
-   the focus rung there draws the focus the view takes itself. The two bars are in it, the
-   Tab that declines off the last cell landing on them, and the same rung is what draws
-   one a keyboard has reached. */
+   it sits. A grip's reach is the pointer's alone and it holds no focus, so it carries no
+   focus rung: what a keyboard draws a line with is the cell the selection runs through
+   (`table-view.ts` §`cellKeys`), and the wash and the selected grip's tint are what say
+   so. The two bars are in the tab order, the Tab that declines off the last cell landing
+   on them, so the rung there draws one a keyboard has reached. */
 :is(.qm-table-grip, .qm-table-add) {
 	opacity: 0;
 	transition: opacity var(--_qm-duration-fast) var(--_qm-ease-reverse);
@@ -447,32 +447,21 @@ li.ProseMirror-selectednode::after {
 :where(.qm-table-island:hover) :is(.qm-table-grip, .qm-table-add) {
 	opacity: var(--_qm-opacity-muted);
 }
-:is(.qm-table-grip, .qm-table-add):is(:hover, :focus-visible),
-.qm-table-grip:is([aria-pressed='true'], .qm-table-lifted) {
+.qm-table-add:is(:hover, :focus-visible),
+.qm-table-grip:is(:hover, [aria-pressed='true'], .qm-table-lifted) {
 	opacity: 1;
 }
 
-/* The ring, on the chrome and nowhere else in this file. A prose leaf's focus indicator
-   is its caret and a cell's is too, so the outline is dropped there; a control that comes
-   up out of nothing has the reveal, and a ring under a keyboard is what says the focus is
-   there rather than on the paper behind it. Declared here rather than reached for as
-   `.qm-focus-ring`: that recipe is the visual tier's stylesheet, and the island is inside
-   the leaf, which is the codec's.
-
-   A selected grip takes none. Focus and selection arrive together there — the grip takes
-   the focus because the selection's keys bind on it — and the tint plus the wash already
-   say where the next command lands. A ring on top is a second box around the loudest
-   thing on the island, drawn on the press that made the selection: a pointer gesture
-   answering with a keyboard's indicator. Stated as `none` rather than left unset, because
-   what fills the gap is the browser's own ring, which is the same box in a colour the
-   surface does not own. */
-:is(.qm-table-grip, .qm-table-add):focus-visible {
+/* The ring, on the two add bars and nowhere else in this file. A prose leaf's focus
+   indicator is its caret and a cell's is too, so the outline is dropped there; a control
+   that comes up out of nothing has the reveal, and a ring under a keyboard is what says
+   the focus is there rather than on the paper behind it. Declared here rather than
+   reached for as `.qm-focus-ring`: that recipe is the visual tier's stylesheet, and the
+   island is inside the leaf, which is the codec's. */
+.qm-table-add:focus-visible {
 	outline: var(--_qm-ring);
 	outline-offset: var(--_qm-ring-offset);
 }
-.qm-table-grip[aria-pressed='true']:focus-visible {
-	outline: none;
-}
 
 /* A drag in flight. The lifted line reads as picked up by tone, never a shadow:
    elevation is a surface rung here, which says the same thing at both poles. The drop

package/dist/core/codec/schema.d.ts

@@ -1,4 +1,12 @@
 import { Schema } from 'prosemirror-model';
+/**
+ * Whether a link carrying `href` renders as one. A value with no scheme is relative
+ * to the embedding page and has none to refuse.
+ *
+ * A refused href is unchanged: it stays on the mark and round-trips, so a document
+ * survives an editor that declines to make it clickable.
+ */
+export declare function rendersHref(href: string): boolean;
 /** The full field schema: every block kind, container, mark, and island. */
 export declare const blockSchema: Schema<string, string>;
 /** The constrained inline schema: one paragraph, no block splitting, no

package/dist/core/codec/schema.js

@@ -10,6 +10,33 @@
 // not marks here (decorations).
 import { Schema } from 'prosemirror-model';
 import { islandBlockSpec, islandInlineSpec } from './islands.js';
+// ── The href gate ───────────────────────────────────────────────────────────
+// An `href` is an attribute value and not markup, so the markdown → typed node → DOM
+// path that keeps a document's text from becoming tags never reaches it: what the
+// mark carries is what `toDOM` emits, and `renderContent` paints marks outside a
+// `contenteditable` (the tips card), where a click is a plain one.
+//
+// An allowlist, because the set a document can spell is open: naming the dangerous
+// schemes instead loses to the first one this has not heard of. It holds what the
+// surface has a caller for; a scheme reaching it later is a line.
+const RENDERED_SCHEMES = new Set(['http', 'https', 'mailto', 'tel', 'ftp']);
+/** A scheme and its colon: a letter, then letters, digits, `+`, `-` or `.` (RFC 3986). */
+const SCHEME = /^([a-z][a-z0-9+.-]*):/i;
+/** Dropped before the scheme is read, so a tab spliced into `javascript:` is tested
+ *  as what it navigates to. Wider than the URL parser's own tab/newline rule: no
+ *  scheme carries a control character, and the strip decides without rewriting. */
+const IGNORED = /[\u0000-\u0020]/g;
+/**
+ * Whether a link carrying `href` renders as one. A value with no scheme is relative
+ * to the embedding page and has none to refuse.
+ *
+ * A refused href is unchanged: it stays on the mark and round-trips, so a document
+ * survives an editor that declines to make it clickable.
+ */
+export function rendersHref(href) {
+    const scheme = SCHEME.exec(href.replace(IGNORED, ''));
+    return scheme === null || RENDERED_SCHEMES.has(scheme[1].toLowerCase());
+}
 // ── Marks (the block and inline schemas share them; plaintext declares none) ─
 const marks = {
     // Order matters: it fixes mark-set sort order and parse precedence. `link`
@@ -26,7 +53,12 @@ const marks = {
         parseDOM: [
             { tag: 'a[href]', getAttrs: (el) => ({ href: el.getAttribute('href') }) }
         ],
-        toDOM: (mark) => ['a', { href: mark.attrs.href }, 0]
+        // A refused href draws as a bare span: the text stands, unstyled and
+        // unclickable, and the mark keeps its value for encode.
+        toDOM: (mark) => {
+            const href = mark.attrs.href;
+            return rendersHref(href) ? ['a', { href }, 0] : ['span', 0];
+        }
     },
     // The open-set escape hatch: an inert mark that renders as a bare span and
     // re-emits its stored `type`/`attrs` on encode. `excludes: ''` lets marks of

package/dist/core/codec/slash.d.ts

@@ -1,4 +1,4 @@
-import { Plugin, type Command } from 'prosemirror-state';
+import { EditorState, Plugin, type Command } from 'prosemirror-state';
 import type { EditorView } from 'prosemirror-view';
 import { type RangeAnchor } from './anchor.js';
 /** The menu as the chrome sees it: the command names the query matched, the keyboard's
@@ -25,18 +25,21 @@ export interface SlashStrings {
  *  chrome's wording follows, and the visual `strings` set extends both. */
 export declare const DEFAULT_SLASH_STRINGS: SlashStrings;
 /**
- * The vocabulary, in menu order: the names `SLASH_COMMANDS` is keyed by, read off the
- * table itself so an offer and its pick cannot disagree.
+ * The vocabulary a caret can run, in menu order: the names `SLASH_COMMANDS` is keyed
+ * by, each asked whether it would fire here. A row that declines when picked is worse
+ * than an absent one, and asking the command rather than restating its guards is what
+ * keeps the menu from drifting off what the shorthand does. So the offers narrow as the
+ * caret moves: the island alone mid-paragraph, no list at an item's head.
  *
- * The set is what no shorthand reaches. A list is `- ` / `1. `, a heading `# `, a quote
- * `> `, a rule `---`, a code block a fence: a shorthand fires where the caret already
- * is, and a second door onto the same construct is a second thing to keep true. A table
- * has no prefix a rule can fire on (a pipe row is not one), so it is the menu's alone.
+ * `state` is the state a pick leaves behind — the run already consumed — since that is
+ * the caret every command answers for (`blocks.ts`).
  */
-export declare function slashItems(): string[];
-/** The query filter: a case-insensitive prefix of the name, which is how a command line
- *  completes. An empty query offers everything, and the vocabulary's order survives, so
- *  the menu never reorders under a keystroke. */
+export declare function slashItems(state: EditorState): string[];
+/** The query filter: a case-insensitive prefix of the name or of any of its words, which
+ *  is how a command line completes and how a two-word name stays reachable by the noun a
+ *  writer has — `/list` offers both lists. A prefix and not a substring: `note` is inside
+ *  `footnote` and completes nothing. An empty query offers everything, and the
+ *  vocabulary's order survives, so the menu never reorders under a keystroke. */
 export declare function filterItems(items: string[], query: string): string[];
 /** The live trigger: where the `/` sits, what has been typed after it, and which
  *  offer the keyboard is on. */
@@ -67,11 +70,10 @@ export declare function slashKeymap(): Record<string, Command>;
  *  highlight has one lane rather than a hover painting a second one. */
 export declare function focusSlashItem(view: EditorView, name: string): void;
 /**
- * Run a command: one transaction that deletes the trigger run and applies the
- * command's own edit. One rather than two because two would be two commits, two undo
- * steps and two recompiles for one gesture; the command is built against the
- * post-delete state and its steps are replayed onto the same transaction, which is
- * exactly what they were computed for.
+ * Run a command: one transaction that deletes the trigger run and applies the command's
+ * own edit (`blocks.ts` §`consuming`). A command that declines consumes nothing. The
+ * menu never picks one, offering only what would run; `slashPick` is a public seam and
+ * can.
  */
 export declare function runSlashItem(view: EditorView, name: string): void;
 export {};

package/dist/core/codec/table-view.d.ts

@@ -40,6 +40,10 @@ export interface TableViewDeps {
     /** A cell took focus: the leaf's own `focus` handler never fires for one (a focus
      *  event does not bubble), so the active address would not follow the caret. */
     onCellFocus: () => void;
+    /** The clearance a revealed caret keeps, in the leaf's own line box (`field.ts`), which
+     *  is a cell's line box too. `undefined` where the derivation is out of reach (jsdom),
+     *  which is PM's 5px default. */
+    clearance: number | undefined;
 }
 /** The `island_block` node view: a table island's editing surface, and the literal
  *  placeholder for every other island type. */

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

@@ -17,17 +17,16 @@
 // 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.
-import { baseKeymap, toggleMark } from 'prosemirror-commands';
+import { baseKeymap, chainCommands, toggleMark } from 'prosemirror-commands';
 import { redo, undo } from 'prosemirror-history';
 import { keymap } from 'prosemirror-keymap';
 import { EditorState, NodeSelection, Selection, TextSelection } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
-import { tableFromClipboard, writeRectangle } from './clipboard.js';
 import { decode } from './decode.js';
 import { inputRulesPlugin } from './inputrules.js';
 import { tablePropsOfNode } from './islands.js';
 import { inlineSchema } from './schema.js';
-import { allRows, cellAt, cellContent, cellEqual, cellFromDoc, clearCells, columnCount, deleteColumn, deleteRow, insertColumn, insertRow, moveColumn, moveRow, normalizeTable, pasteCells, rowCells, rowCount, rowEmpty, shapeEqual, withCell } from './table.js';
+import { cellAt, cellContent, cellEqual, cellFromDoc, clearCells, columnCount, deleteColumn, deleteRow, insertColumn, insertRow, moveColumn, moveRow, normalizeTable, rowCells, rowCount, rowEmpty, 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
@@ -83,8 +82,9 @@ function el(tag, className) {
 }
 /** A band button. It swallows its own `mousedown` (prosemirror-menu's trick, and
  *  the format popover's): without it the browser focuses the button, blurring the
- *  cell whose caret the op is about to be measured against. A grip wants that focus
- *  and takes it explicitly, which is why this does not hand it out. */
+ *  cell whose caret the op is about to be measured against. No control on the band ever
+ *  holds the focus: a cell is the island's one host, and what a press acts on is where
+ *  it lands the caret. */
 function chromeButton(className, label, run) {
     const btn = el('button', className);
     btn.type = 'button';
@@ -161,13 +161,6 @@ class TableIslandView {
         this.dom.setAttribute('data-island', node.attrs.islandType);
         this.dom.setAttribute('data-island-id', node.attrs.id);
         this.dom.addEventListener('mousedown', this.onPointerDown);
-        // On the document rather than on the island: a `copy` is delivered to the DOM
-        // selection's own node, and a held rectangle has cleared that selection (a sweep
-        // removes the ranges itself, a grip press moves the focus to a button), so the
-        // event never crosses this subtree at all. What makes one this island's is
-        // {@link TableIslandView.onCopy}'s guard.
-        this.dom.ownerDocument.addEventListener('copy', this.onCopy);
-        this.dom.ownerDocument.addEventListener('cut', this.onCopy);
         this.render();
     }
     // ── PM's NodeView contract ────────────────────────────────────────────────
@@ -220,8 +213,6 @@ class TableIslandView {
     }
     destroy() {
         this.dom.removeEventListener('mousedown', this.onPointerDown);
-        this.dom.ownerDocument.removeEventListener('copy', this.onCopy);
-        this.dom.ownerDocument.removeEventListener('cut', this.onCopy);
         this.endDrag();
         this.endSweep();
         this.teardownCells();
@@ -317,10 +308,10 @@ class TableIslandView {
         this.outer.focus();
         this.outer.dispatch(this.outer.state.tr.setSelection(selection));
     }
-    /** The island as the selection: Escape out of a cell or a line, which is the whole of
-     *  what selects it. Backspace there deletes the table, as it does over every other
-     *  island; the cell selection covering every rank reaches the same delete without
-     *  leaving the grid (CODEC §"The table island"). */
+    /** The island as the selection: the Escape that climbs out of a cell or a held
+     *  rectangle, which is the whole of what selects it. Backspace there deletes the
+     *  table, as it does over every other island; the cell selection covering every rank
+     *  reaches the same delete without leaving the grid (CODEC §"The table island"). */
     selectIsland() {
         const pos = this.getPos();
         if (pos == null)
@@ -396,10 +387,6 @@ class TableIslandView {
         return best;
     }
     // ── The selection ─────────────────────────────────────────────────────────
-    /** Take the line's grip: the focus a selection's keys land on. */
-    gripFor(line) {
-        return this.grips.get(lineKey(line));
-    }
     /** The rectangle a line covers, which is what selecting one means: a grip draws no
      *  second kind of selection, it draws this one. */
     lineCells(line) {
@@ -416,11 +403,43 @@ class TableIslandView {
             ? { floor: 0, limit: rowCount(props) - 1 }
             : { floor: 0, limit: columnCount(props) - 1 };
     }
-    /** Select a line. The grip takes the focus, because the selection's keys bind
-     *  there and need somewhere to land. */
+    /** Select a line, and land the caret on it. The line verbs bind in the cell
+     *  (CODEC §"The table island"), so the rectangle has to run through the caret for the
+     *  next key to read a line off it. The focus moves first and the paint follows: a cell
+     *  taking the focus retires whatever was held. */
     selectLine(line) {
+        this.carryCaret(line);
         this.select(this.lineCells(line));
-        this.gripFor(line)?.focus();
+    }
+    /** Put the caret on the line, keeping its other coordinate, and leave it exactly
+     *  where it is on a line it is already in: a walk down the rows stays in its column,
+     *  and a grip press on the caret's own row does not shunt it to a cell's end. */
+    carryCaret(line) {
+        const held = this.cells.find((m) => m.view.hasFocus());
+        if (line.axis === 'row') {
+            if (held?.r !== line.index)
+                this.focusCell(line.index, held?.c ?? 0);
+        }
+        else if (held?.c !== line.index)
+            this.focusCell(held?.r ?? 0, line.index);
+    }
+    /** Which line the held rectangle is, on one axis: a row spanning every column, a
+     *  column spanning every row, and nothing at all for a block that spans neither. The
+     *  extent rule reaching the line verbs ({@link TableIslandView.deleteSelection}) — a
+     *  rectangle answers by what it covers, never by the gesture that drew it, so a row
+     *  swept cell by cell moves exactly as the row a grip named does. */
+    lineOn(axis) {
+        const held = this.selected;
+        if (!held)
+            return undefined;
+        const props = this.props();
+        if (axis === 'row')
+            return held.r0 === held.r1 && held.c0 === 0 && held.c1 === columnCount(props) - 1
+                ? held.r0
+                : undefined;
+        return held.c0 === held.c1 && held.r0 === 0 && held.r1 === rowCount(props) - 1
+            ? held.c0
+            : undefined;
     }
     select(cells) {
         // One subject at a time: a cell selection retires an island one, or the surface
@@ -457,94 +476,6 @@ class TableIslandView {
         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);
     }
-    /**
-     * A selected line's keys, bound to the line its own grip names rather than read off
-     * the selection: focus and selection are separate, and a Tab between grips would
-     * otherwise aim the next key at whichever line was last pressed.
-     *
-     * Undo is forwarded for the reason a cell forwards it: one undo stack per leaf, and
-     * a `button` has no history of its own.
-     */
-    lineKeys(line) {
-        return (event) => {
-            const key = event.key;
-            const mod = event.ctrlKey || event.metaKey;
-            if (mod && (key === 'z' || key === 'Z' || key === 'y')) {
-                event.preventDefault();
-                const redoing = key === 'y' || (key === 'Z' && event.shiftKey);
-                (redoing ? redo : undo)(this.outer.state, this.outer.dispatch);
-                return;
-            }
-            const along = line.axis === 'row' ? ['ArrowUp', 'ArrowDown'] : ['ArrowLeft', 'ArrowRight'];
-            const acts = along.includes(key) || ['Backspace', 'Delete', 'Enter', 'Escape'].includes(key);
-            if (!acts)
-                return;
-            event.preventDefault();
-            event.stopPropagation();
-            if (key === 'Escape')
-                return this.selectIsland();
-            if (key === 'Enter') {
-                this.clearSelection();
-                return line.axis === 'row' ? this.focusCell(line.index, 0) : this.focusCell(0, line.index);
-            }
-            if (key === 'Backspace' || key === 'Delete')
-                return this.deleteSelection();
-            const by = key === 'ArrowUp' || key === 'ArrowLeft' ? -1 : 1;
-            if (event.altKey)
-                return this.moveLine(line, by);
-            const { floor, limit } = this.bounds(line.axis, this.props());
-            this.selectLine({
-                axis: line.axis,
-                index: Math.max(floor, Math.min(line.index + by, limit))
-            });
-        };
-    }
-    // ── The clipboard ─────────────────────────────────────────────────────────
-    /** The held rectangle's cells, read off the stored props: the unit that crosses the
-     *  clipboard (`clipboard.ts`), so the unit the verbs here read. */
-    heldBlock(held) {
-        const props = this.props();
-        return Array.from({ length: held.r1 - held.r0 + 1 }, (_, i) => Array.from({ length: held.c1 - held.c0 + 1 }, (_, j) => cellAt(props, held.r0 + i, held.c0 + j)));
-    }
-    /**
-     * Copy or cut the held rectangle (`clipboard.ts` writes both wire formats). A cut is
-     * a copy plus the delete Backspace already means over that rectangle, so what it
-     * takes out is read by the same extent rule: a covered rank goes, a sub-rectangle
-     * clears.
-     *
-     * The guard is the whole of what makes a document-level listener this island's. With
-     * no rectangle the event belongs to whatever holds the caret. With the focus outside,
-     * it is another surface's copy over a rectangle this island still happens to hold.
-     */
-    onCopy = (event) => {
-        const held = this.selected;
-        const data = event.clipboardData;
-        const owner = this.dom.ownerDocument;
-        if (!held || !data || !this.dom.contains(owner.activeElement))
-            return;
-        writeRectangle(data, this.heldBlock(held), this.props().aligns.slice(held.c0, held.c1 + 1), owner);
-        event.preventDefault();
-        if (event.type === 'cut')
-            this.deleteSelection();
-    };
-    /**
-     * A table pasted into a cell is written in at that cell, growing the table to hold
-     * it (`table.ts` §{@link pasteCells}); anything else is the cell's own paste and
-     * this declines. It lands at the caret's cell, which over a swept block is the cell
-     * the press started in — the block's anchor rather than its first corner, a sweep
-     * running up or left putting those at opposite ends.
-     *
-     * Without this arm the cell's inline schema reads the same clipboard as text and
-     * flattens the table into one cell, which is the destructive case one level down.
-     */
-    pasteIntoCell(r, c, event) {
-        const props = tableFromClipboard(event.clipboardData);
-        if (!props)
-            return false;
-        this.clearSelection();
-        this.write(pasteCells(this.props(), r, c, allRows(props)));
-        return true;
-    }
     /**
      * What Backspace means over the selection, decided by its extent rather than by the
      * gesture that drew it (CODEC §"The table island").
@@ -826,8 +757,9 @@ class TableIslandView {
         this.reseat(seat);
     }
     /**
-     * Where the focus sits, in terms a rebuild can restore it by: a cell's position or a
-     * grip's line, neither of which is an element that survives one.
+     * Where the focus sits, in terms a rebuild can restore it by: the caret's cell by
+     * position, that being the one seat the island has and not an element that survives
+     * one.
      *
      * A rebuild is what a changed rectangle costs, and the op that changed it usually
      * says where the caret lands ({@link TableIslandView.write}'s `focus`). An undo says
@@ -837,28 +769,15 @@ class TableIslandView {
      */
     focusedSeat() {
         const held = this.cells.find((m) => m.view.hasFocus());
-        if (held)
-            return { cell: { r: held.r, c: held.c } };
-        const active = this.dom.ownerDocument.activeElement;
-        for (const [key, grip] of this.grips) {
-            if (grip !== active)
-                continue;
-            const [axis, index] = key.split(':');
-            return { line: { axis: axis, index: Number(index) } };
-        }
-        return undefined;
+        return held && { r: held.r, c: held.c };
     }
-    /** Put the focus back where {@link TableIslandView.focusedSeat} found it, clamped into
-     *  the rectangle that is there now: the seat's line may be the one the rebuild
-     *  removed. A caller that has a landing of its own overrides this by running after. */
+    /** Put the caret back where {@link TableIslandView.focusedSeat} found it, clamped by
+     *  `focusCell` into the rectangle that is there now: the seat may be the cell the
+     *  rebuild removed. A caller that has a landing of its own overrides this by running
+     *  after. */
     reseat(seat) {
-        if (seat?.cell)
-            return this.focusCell(seat.cell.r, seat.cell.c);
-        if (!seat?.line)
-            return;
-        const { floor, limit } = this.bounds(seat.line.axis, this.props());
-        const index = Math.max(floor, Math.min(seat.line.index, limit));
-        this.gripFor({ axis: seat.line.axis, index })?.focus();
+        if (seat)
+            this.focusCell(seat.r, seat.c);
     }
     /** One table row: its cells, each carrying whatever chrome hangs off it. */
     row(props, r, s) {
@@ -894,12 +813,12 @@ class TableIslandView {
      *  press that travels drags it. Both are "this line", asked once with the pointer,
      *  and the dead zone is what tells them apart.
      *
-     *  Out of the tab order, at no cost in reach: a grip follows the cell it hangs in, so
-     *  a forward Tab is the cell traversal's before the browser gets there and a backward
-     *  one leaves the grid off cell (0,0) without passing a grip
-     *  (§{@link TableIslandView.step}). A line's chrome answers to the pointer. Focus is
-     *  still taken here, by the routes this view owns: a selection, a drag, a rebuild's
-     *  reseat. */
+     *  Pointer chrome and nothing else: no key binds here and no route focuses it, the
+     *  line verbs binding in the cell the selection runs through
+     *  (§{@link TableIslandView.cellKeys}). Out of the tab order at no cost in reach,
+     *  since a grip follows the cell it hangs in: a forward Tab is the cell traversal's
+     *  before the browser gets there, and a backward one leaves the grid off cell (0,0)
+     *  without passing a grip (§{@link TableIslandView.step}). */
     grip(line, label) {
         const btn = chromeButton('qm-table-grip', label, () => {
             if (this.suppressClick)
@@ -914,7 +833,6 @@ class TableIslandView {
         bar.appendChild(svg(GRIP[line.axis]));
         btn.appendChild(bar);
         btn.addEventListener('pointerdown', (e) => this.onGripDown(line, btn, e));
-        btn.addEventListener('keydown', this.lineKeys(line));
         this.grips.set(lineKey(line), btn);
         return btn;
     }
@@ -924,11 +842,12 @@ class TableIslandView {
      *  the pointer out past the last line is the claim — so its name carries the verb for
      *  everything that does not read position.
      *
-     *  In the tab order, where a grip is not: the column bar is the keyboard's only route
-     *  to a column at all, and the row bar is that control on the other axis, where Enter
-     *  at the last row and Tab past the last cell reach the verb from inside a cell. They
-     *  sit after the grid, so the Tab that declines off the last cell lands on them, and
-     *  the focus rung draws the one it lands on (`codec/prose.css`). */
+     *  In the tab order, where a grip is not: growth is what the line verbs do not carry,
+     *  so the column bar is the keyboard's only route to a new column, and the row bar is
+     *  that control on the other axis, where Enter at the last row and Tab past the last
+     *  cell reach the verb from inside a cell. They sit after the grid, so the Tab that
+     *  declines off the last cell lands on them, and the focus rung draws the one it lands
+     *  on (`codec/prose.css`). */
     addBar(axis, label) {
         const btn = chromeButton('qm-table-add', label, () => {
             const props = this.props();
@@ -950,15 +869,24 @@ class TableIslandView {
                 plugins: cellPlugins(this.cellKeys(r, c))
             }),
             attributes: { 'aria-label': name, class: 'qm-table-cell-editor' },
+            // A cell is one of the leaf's lines, so a reveal here keeps the leaf's
+            // clearance: PM's 5px default is the caret visible and unusable that rung
+            // exists to refuse (`field.ts`).
+            scrollThreshold: this.deps.clearance,
+            scrollMargin: this.deps.clearance,
             dispatchTransaction: (tr) => {
                 const next = view.state.apply(tr);
                 view.updateState(next);
                 if (!tr.docChanged)
                     return;
+                // A cell edit is the caret's, so it retires the rectangle: a wash left up
+                // over text being typed says the next Backspace takes a rank, and it does
+                // not. The clear op is not this path — it writes through the leaf, and the
+                // reseed it comes back as changes no cell's own doc.
+                this.clearSelection();
                 const now = this.props();
                 this.write(withCell(now, r, c, cellFromDoc(next.doc, cellAt(now, r, c))));
             },
-            handlePaste: (_view, event) => this.pasteIntoCell(r, c, event),
             handleDOMEvents: {
                 focus: () => {
                     this.clearSelection();
@@ -1005,8 +933,12 @@ class TableIslandView {
         if (!mounted)
             return;
         const { view } = mounted;
+        // Flagged, for the reason the leaf's own landing is (`field.ts`, `setCaret`): PM
+        // focuses with `preventScroll`, so an unflagged dispatch lands the caret where no
+        // scroller has moved to — a Tab past the right edge of the horizontal scroller a
+        // wide table lives in, or the row an Enter on the last one appends below the fold.
         view.focus();
-        view.dispatch(view.state.tr.setSelection(Selection.atEnd(view.state.doc)));
+        view.dispatch(view.state.tr.setSelection(Selection.atEnd(view.state.doc)).scrollIntoView());
     }
     /**
      * A cell's keys. Traversal is the island's link in the leaf's chain
@@ -1026,10 +958,10 @@ class TableIslandView {
         if (inlineSchema.marks.underline)
             marks['Mod-u'] = toggleMark(inlineSchema.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 are
-        // deliberately absent: at a text edge they would call what Tab and Shift-Tab
-        // already call, and inherit the append-past-the-last-cell that makes Tab a
-        // growth affordance and would make a caret key one.
+        // 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
+        // call, and inherit the append-past-the-last-cell that makes Tab a growth
+        // affordance and would make a caret key one.
         const walk = (dir) => {
             return (_state, _dispatch, view) => {
                 const { selection } = view?.state ?? {};
@@ -1050,6 +982,34 @@ class TableIslandView {
             this.deleteSelection();
             return true;
         };
+        // The line verbs, over the held rectangle and nothing else: with none held every
+        // one of these declines and the key is the caret's, which is what lets them sit on
+        // keys a cell is already typing under. An arrow names the line on its own axis
+        // through the caret — the one already held steps to its neighbour and carries the
+        // caret, and any other rectangle turns into it, which is how a row becomes the
+        // column the caret is in. Alt moves the line instead, and over a rectangle that is
+        // not one it does nothing but keep the key: while a rectangle is held every arrow
+        // is its own, and an Alt+arrow handed back is the browser's Back on two platforms,
+        // mid-gesture.
+        const line = (axis, by, move) => {
+            return () => {
+                if (!this.selected)
+                    return false;
+                const on = this.lineOn(axis);
+                if (move) {
+                    if (on !== undefined)
+                        this.moveLine({ axis, index: on }, by);
+                    return true;
+                }
+                if (on === undefined) {
+                    this.selectLine({ axis, index: axis === 'row' ? r : c });
+                    return true;
+                }
+                const { floor, limit } = this.bounds(axis, this.props());
+                this.selectLine({ axis, index: Math.max(floor, Math.min(on + by, limit)) });
+                return true;
+            };
+        };
         return {
             ...marks,
             // One undo stack per leaf: a cell carries no history of its own, so Mod-z
@@ -1059,11 +1019,23 @@ class TableIslandView {
             'Shift-Mod-z': () => redo(this.outer.state, this.outer.dispatch),
             Backspace: erase,
             Delete: erase,
-            ArrowUp: walk('up'),
-            ArrowDown: walk('down'),
+            ArrowUp: chainCommands(line('row', -1, false), walk('up')),
+            ArrowDown: chainCommands(line('row', 1, false), walk('down')),
+            ArrowLeft: line('column', -1, false),
+            ArrowRight: line('column', 1, false),
+            'Alt-ArrowUp': line('row', -1, true),
+            'Alt-ArrowDown': line('row', 1, true),
+            'Alt-ArrowLeft': line('column', -1, true),
+            'Alt-ArrowRight': line('column', 1, true),
             Tab: () => this.step(r, c, 1),
             'Shift-Tab': () => this.step(r, c, -1),
             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.
+                if (this.selected) {
+                    this.clearSelection();
+                    return true;
+                }
                 const props = this.props();
                 if (r === rowCount(props) - 1)
                     this.write(insertRow(props, r), { r: r + 1, c });
@@ -1071,10 +1043,17 @@ class TableIslandView {
                     this.focusCell(r + 1, c);
                 return true;
             },
-            // The innermost Escape: out of the cell, onto the island. What the next one
-            // means is the shell's (VISUAL_EDITOR §"Settled and open").
+            // Escape climbs a rung a press: the caret's own row, then the island. The row
+            // is the entry the band has no other route to — every line verb reads a held
+            // rectangle, and this is the gesture that draws one from the keyboard — and it
+            // is the row rather than the column because the column is one arrow further
+            // on. What the press past the island means is the shell's
+            // (VISUAL_EDITOR §"Settled and open").
             Escape: () => {
-                this.selectIsland();
+                if (this.selected)
+                    this.selectIsland();
+                else
+                    this.selectLine({ axis: 'row', index: r });
                 return true;
             }
         };