edytor 1.0.0-rc.3 → 2.0.0

package/dist/plugins/blockHandles/BlockHandleController.svelte.js

@@ -1,19 +1,20 @@
+import { untrack } from 'svelte';
 import { autoScrollFor } from '../../dnd/autoScroll.js';
-import { noSelection, project } from '../../session/selection.js';
-import { attachInstruction, draggable, dropTargetForElements, extractInstruction, setCustomNativeDragPreview } from '../../dnd/pragmatic.js';
-import { HIDDEN, hidden } from '../../selection/visibility.js';
+import { blockSelection, noSelection, project } from '../../session/selection.js';
+import { draggable, dropTargetForElements, setCustomNativeDragPreview } from '../../dnd/pragmatic.js';
 import { getSelectionBlocks, holdsBlocks, movable, outermost, selectMoved, shownText } from '../../selection/replaceSelection.js';
 import { takeKeys } from '../../events/onFocus.js';
 import { EDYTOR_BLOCK_DRAG_MIME } from '../../events/onDrop.js';
 import { kindLabel } from '../../kinds.js';
-import { englishLabels } from '../../labels.js';
+import { siblingSlot } from '../../session/handles.js';
 import { dragPreview } from './dragPreview.js';
-import { DropIndicator } from './dropIndicator.js';
-import { dropReach, getOwnRowBottom, isBeside, marginAt, nestIndent, overEmptyBody, ownRow, ownTextRow } from './geometry.js';
-import { stacks } from '../columns/stacking.js';
+import { DropIndicator } from '../../dnd/dropIndicator.js';
+import { DropResolver, SLOP_X, SLOP_Y } from '../../dnd/placement.js';
+import { getOwnRowBottom, ownRow } from '../../dnd/geometry.js';
+import { all, listen } from '../../utils/listen.js';
 /**
- * The DOM event a handle click dispatches on the editor when no `onActivate`
- * is set. A menu that takes the keyboard answers it with `preventDefault()`
+ * The DOM event a grip click dispatches on the editor (the one way to
+ * answer it: the block menu's, or your own). A menu that takes the keyboard answers it with `preventDefault()`
  * (the block menu does); unanswered, the editor takes the focus, so the keys
  * act on the selected block (Backspace deletes it, Shift+arrows extend it).
  */
@@ -31,18 +32,11 @@ const keyMoves = {
     ArrowRight: 'in',
     ArrowLeft: 'out'
 };
-/** The drop target data key of the row the hitbox measured (`rowAt`). */
+/** The drop target data keys of the row at the pointer (`rowAt`) and of its half (the top one). */
 const ROW = 'edytorRow';
+const BEFORE = 'edytorBefore';
 /** The drop target data key of a beside band beyond the editor's edges (`margin`). */
 const MARGIN = 'edytorMargin';
-/** How far beside a target's box it stays the drop target (`getIsSticky`), across and along. */
-const SLOP_X = 20;
-const SLOP_Y = 24;
-/** The right beside band: the row's last 15% (Notion), at least this many px. */
-const RIGHT_BAND = 0.15;
-const RIGHT_BAND_MIN = 32;
-/** The handle column's width when the drag's handle cannot be measured (`+`, grip and gap). */
-const HANDLE_COLUMN = 50;
 /**
  * Whether the pointer is over the own row of a block other than `node` and
  * its descendants. A container (a list) has no row of its own: its padding
@@ -62,8 +56,6 @@ const endsDocument = (block) => {
             return false;
     return true;
 };
-/** Where a block's own text starts: its level's column. */
-const column = (block) => ownTextRow(block.node).left;
 export class BlockHandleController {
     edytor;
     options;
@@ -79,6 +71,8 @@ export class BlockHandleController {
     group = [];
     /** The drop bar and the nest backdrop in the overlay, while our drag runs. */
     indicator;
+    /** Where a drop lands (the one resolution a file drag reads too). */
+    drop;
     /** The selection the drag in progress replaced when it started: its undo step restores it. */
     held = null;
     /** The handle the drag in progress started from: its width is the handle column's. */
@@ -88,10 +82,14 @@ export class BlockHandleController {
     constructor(edytor, options = { draggable: true }) {
         this.edytor = edytor;
         this.options = options;
-        this.indicator = new DropIndicator(edytor, {
-            group: () => this.group,
-            besideOf: (block) => this.besideOf(block),
-            layoutOf: (outer) => this.layoutOf(outer)
+        this.drop = new DropResolver(edytor, {
+            targetOf: (node) => this.targets.get(node),
+            handle: () => this.handle,
+            indicator: (this.indicator = new DropIndicator(edytor, {
+                group: () => this.group,
+                besideOf: (block) => this.drop.besideOf(block),
+                layoutOf: (outer) => this.drop.layoutOf(outer)
+            }))
         });
     }
     get readonly() {
@@ -100,10 +98,6 @@ export class BlockHandleController {
     get draggable() {
         return this.options.draggable;
     }
-    /** The words the handles say (the plugin's `labels`): read them in a custom `handle`. */
-    get labels() {
-        return this.options.labels ?? englishLabels.blockHandles;
-    }
     /**
      * The block's kind as people read it (`kindLabel`: "Heading 1"), its
      * handle's name; reactive through the block's cell (a Turn into renames it).
@@ -115,36 +109,54 @@ export class BlockHandleController {
     /** The popup the `+` or the grip of `block` opened, while it is open (`edytor.popups`). */
     opened = (block, control) => this.edytor.popups.openedBy(block.id, control);
     /**
-     * Make `node` the block's grip: dragging (when draggable), a click that
-     * selects the block and opens its menu, and the Alt+arrow moves.
+     * The block's grip (`{@attach handle.grip}`): dragging (when draggable),
+     * a click that selects the block and opens its menu, the Alt+arrow moves
+     * (`aria-keyshortcuts`), and the ARIA of the menu it opened.
      */
     grip = (block) => (node) => {
-        const click = (event) => {
+        node.setAttribute('aria-keyshortcuts', 'Alt+ArrowUp Alt+ArrowDown Alt+ArrowRight Alt+ArrowLeft');
+        this.#opener(node, block, 'grip');
+        return untrack(() => all(listen(node, 'click', (event) => {
             event.preventDefault();
             event.stopPropagation();
-            this.activateBlock(block, node);
-        };
-        const pointerdown = (event) => event.stopPropagation();
-        const keydown = (event) => this.handleKeyDown(event, block);
-        node.addEventListener('click', click);
-        node.addEventListener('pointerdown', pointerdown);
-        node.addEventListener('keydown', keydown);
-        const unregister = this.registerHandle(node, block);
-        return {
-            destroy: () => {
-                node.removeEventListener('click', click);
-                node.removeEventListener('pointerdown', pointerdown);
-                node.removeEventListener('keydown', keydown);
-                unregister();
-            }
-        };
+            this.#activateBlock(block, node);
+        }), listen(node, 'pointerdown', (event) => event.stopPropagation()), listen(node, 'keydown', (event) => this.#handleKeyDown(event, block)), this.registerHandle(node, block)));
     };
+    /**
+     * The block's `+` (`{@attach handle.plus}`): a click offers what to add
+     * below (Alt+click above, or a column beside: `addBlock`) under it; a
+     * press keeps the editor's focus; the ARIA of the menu it opened.
+     */
+    plus = (block) => (node) => {
+        this.#opener(node, block, 'add');
+        return all(listen(node, 'mousedown', (event) => event.preventDefault()), listen(node, 'pointerdown', (event) => event.stopPropagation()), listen(node, 'click', (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.addBlock(block, event.altKey, node);
+        }));
+    };
+    /**
+     * Keep `node`'s `aria-expanded`, `aria-controls` and `aria-haspopup` in
+     * step with the menu its `control` of `block` opened, while it is open.
+     */
+    #opener(node, block, control) {
+        $effect(() => {
+            const popup = this.opened(block, control);
+            const values = { expanded: popup && 'true', controls: popup?.id, haspopup: popup?.haspopup };
+            for (const [name, value] of Object.entries(values)) {
+                if (value === undefined)
+                    node.removeAttribute(`aria-${name}`);
+                else
+                    node.setAttribute(`aria-${name}`, String(value));
+            }
+        });
+    }
     /**
      * Select the block — a block selection holding it stays; over a text
      * range across blocks, the blocks it covers (`select`) — and open its
      * menu.
      */
-    activateBlock(block, anchor) {
+    #activateBlock(block, anchor) {
         if (this.edytor.readonly || !block.movable)
             return;
         const { selection } = this.edytor;
@@ -152,10 +164,8 @@ export class BlockHandleController {
         if (!selection.selectedBlocks.has(block))
             this.select(block);
         this.gripped = { before, after: selection.value };
-        if (this.options.onActivate)
-            return this.options.onActivate({ block, anchor });
-        // Without a callback, a block menu plugin may answer the activation; with
-        // none answering, the keys go to the editor, over the block selection
+        // A block menu plugin (or the app) may answer the activation; with none
+        // answering, the keys go to the editor, over the block selection
         // (Notion), not to the grip (its own focus: not a user gesture).
         const event = new CustomEvent(BLOCK_ACTIVATE_EVENT, {
             cancelable: true,
@@ -187,15 +197,14 @@ export class BlockHandleController {
         const { edytor } = this;
         if (edytor.readonly || !block.parent)
             return;
-        this.ungrip();
+        this.#ungrip();
         const column = alt && this.addsColumn(block);
         const above = alt && !column;
         const insert = (then) => {
             const { dispatcher, facade, selection, undoManager: um } = edytor;
             const held = selection.value;
             let refused;
-            edytor.expectInternalFocus();
-            edytor.node?.focus({ preventScroll: true });
+            takeKeys(edytor);
             // The addition and `then` are one transaction: one update, one undo
             // step. Refused with nothing applied, the addition is taken back inside
             // it, and the history captures nothing (its undo and redo steps stay).
@@ -204,20 +213,17 @@ export class BlockHandleController {
                 um.captureTransaction = (tr) => !refused && capture(tr);
             let out;
             try {
-                out = dispatcher.run('insertBlock', () => edytor.transact(() => {
+                out = dispatcher.run('insertBlocks', () => edytor.transact(() => {
                     const type = block.parent && edytor.defaultChild(block.parent);
                     if (!type)
                         return;
-                    const spec = { block: { type } };
                     const reused = !column && block.type === type && block.isEmpty;
                     const target = reused
                         ? block
-                        : above
-                            ? block.insertBlockBefore(spec)
-                            : block.insertBlockAfter(spec);
+                        : edytor.idToBlock.get(edytor.insertBlocks(siblingSlot(block, !above), [{ type }]).ids[0] ?? '');
                     // A new column right of the block's: the one move path places it.
                     if (target && column)
-                        edytor.moveBlocks({ blocks: [target], target: block, position: 'right' });
+                        edytor.move({ blocks: [target], target: block, position: 'right' });
                     // The caret is the model's: the projector shows it once the block mounts.
                     if (target?.firstText)
                         dispatcher.caret(target.firstText, 0);
@@ -230,7 +236,7 @@ export class BlockHandleController {
                     if (facade.version !== added || (result !== false && last?.status !== 'refused'))
                         return result;
                     refused =
-                        last?.status === 'refused' ? last : { operation: 'insertBlock', status: 'refused' };
+                        last?.status === 'refused' ? last : { operation: 'insertBlocks', status: 'refused' };
                     // The take-back of this command's own uncommitted write, not a user command.
                     if (!reused)
                         facade.apply(facade.prepare.deleteBlocks([target.id]));
@@ -261,7 +267,7 @@ export class BlockHandleController {
      * block's first line — and the `+` holds that one (its menu's Escape
      * gives it back).
      */
-    ungrip() {
+    #ungrip() {
         const { gripped } = this;
         this.gripped = null;
         const { selection, facade } = this.edytor;
@@ -308,8 +314,8 @@ export class BlockHandleController {
                     });
                 }
                 for (const [node, target] of this.targets)
-                    this.registerDropTarget(node, target);
-                this.registerMarginTarget(element.ownerDocument.body);
+                    this.#registerDropTarget(node, target);
+                this.#registerDropTarget(element.ownerDocument.body, null);
                 this.scrolling?.();
                 this.scrolling = root ? autoScrollFor(root, (data) => data.owner === this.owner) : null;
                 this.indicator.begin(element.ownerDocument);
@@ -349,7 +355,7 @@ export class BlockHandleController {
             return () => { };
         this.targets.set(node, target);
         if (this.dragging)
-            this.registerDropTarget(node, target);
+            this.#registerDropTarget(node, target);
         return () => {
             if (this.targets.get(node) === target)
                 this.targets.delete(node);
@@ -359,9 +365,20 @@ export class BlockHandleController {
                 this.indicator.clear();
         };
     }
-    registerDropTarget(node, target) {
+    /**
+     * A block's drop target (`target`), or the page's (`body`, `null`): the
+     * editor's margins (Notion, `dnd.reach`), a drop target only where
+     * `margin` gives a placement — the handle column left of the blocks, the
+     * page margin past it and the one right of the content, up to the drop
+     * reach, within the editor's height — so a row is reached from outside it
+     * too, row after row; anywhere else the block targets (and their
+     * stickiness) stand, and a block target holding the pointer (its sticky
+     * slop) answers before the page.
+     */
+    #registerDropTarget(node, target) {
         if (this.registered.has(node))
             return;
+        const show = ({ location, source }) => this.#showIndicator(node, location, source.data);
         const cleanup = dropTargetForElements({
             element: node,
             // A beside band counts: a row whose halves are both refused still takes it.
@@ -370,25 +387,28 @@ export class BlockHandleController {
             // row at the pointer's height (`margin`): never a placement held from
             // a row passed on the way.
             canDrop: ({ source, input }) => {
-                if (this.inHandleColumn(input.clientX))
+                const dragSource = this.#getDragSource(source.data);
+                if (!dragSource)
+                    return false;
+                if (!target)
+                    return Boolean(this.drop.margin(this.#drag(dragSource), input));
+                if (this.drop.inHandleColumn(input.clientX))
                     return false;
-                const row = this.rowAt(source.data, target, node, input);
-                if (Object.values(this.operations(source.data, row, input)).includes('available'))
-                    return true;
-                const dragSource = this.getDragSource(source.data);
-                return Boolean(dragSource && this.beside(dragSource, row, input));
+                const row = this.drop.rowAt(this.#drag(dragSource), target, node, input);
+                const { before, after } = this.drop.zones(this.#drag(dragSource), row, input);
+                return ([...before, ...after].some(this.#drag(dragSource).fits) ||
+                    Boolean(this.drop.beside(this.#drag(dragSource), row, input)));
             },
-            // Atlassian's list-item hitbox splits the row the pointer is on into its
-            // halves (`operations`); nesting is no band of it (combine is
-            // not-available): the pointer's x decides it (`zones`).
+            // The row at the pointer and the half of its own row (not its subtree's)
+            // the pointer is in: held while the target is sticky (the drag library
+            // keeps a sticky record's data).
             getData: ({ source, input }) => {
-                const row = this.rowAt(source.data, target, node, input);
-                return attachInstruction({ [ROW]: row.id }, {
-                    input,
-                    // The hitbox reads only this box: the row's own, not its subtree's.
-                    element: { getBoundingClientRect: () => ownRow(row.node) },
-                    operations: this.operations(source.data, row, input)
-                });
+                const dragSource = this.#getDragSource(source.data);
+                if (!target || !dragSource)
+                    return { [MARGIN]: true };
+                const row = this.drop.rowAt(this.#drag(dragSource), target, node, input);
+                const rect = ownRow(row.node);
+                return { [ROW]: row.id, [BEFORE]: input.clientY < rect.top + rect.height / 2 };
             },
             // Held while it or a target inside it holds the placement (the drag library
             // keeps an inner target only while every outer one of its chain sticks),
@@ -396,20 +416,19 @@ export class BlockHandleController {
             // the way down (Notion) — never over another block's own row (its parent's,
             // which the drag library would otherwise let it keep), nor over another column.
             getIsSticky: ({ source, input }) => {
-                const dragSource = this.getDragSource(source.data);
                 const active = this.indicator.target;
-                if (!dragSource || this.edytor.readonly || !active || !node.contains(active))
+                if (!target || !this.#getDragSource(source.data) || !active || !node.contains(active))
                     return false;
                 const rect = node.getBoundingClientRect();
                 return (input.clientX >= rect.left - SLOP_X &&
                     input.clientX <= rect.right + SLOP_X &&
                     input.clientY >= rect.top - SLOP_Y &&
                     (input.clientY <= rect.bottom + SLOP_Y || endsDocument(target)) &&
-                    !this.overOtherColumn(target, input.clientX) &&
+                    !this.drop.overOtherColumn(target, input.clientX) &&
                     !overOtherRow(node, input, (over) => !this.edytor.idToBlock.get(over.dataset.edytorId ?? '')?.isContainer));
             },
-            onDragEnter: ({ location, source }) => this.showIndicator(node, location, source.data),
-            onDrag: ({ location, source }) => this.showIndicator(node, location, source.data),
+            onDragEnter: show,
+            onDrag: show,
             // The target left hands the placement to the innermost one still current (an
             // outer target of its chain that sticks), before the next move asks it to stick.
             onDragLeave: ({ location, source }) => {
@@ -418,260 +437,62 @@ export class BlockHandleController {
                 this.indicator.clear();
                 const [current] = location.current.dropTargets;
                 if (current)
-                    this.showIndicator(current.element, location, source.data);
+                    this.#showIndicator(current.element, location, source.data);
             },
             onDrop: ({ location, source }) => {
                 const [current] = location.current.dropTargets;
                 if (current?.element !== node)
                     return;
-                const dragSource = this.getDragSource(source.data);
+                const dragSource = this.#getDragSource(source.data);
                 const placement = this.indicator.target === node && this.indicator.placement
                     ? this.indicator.placement
-                    : this.placement(current, source.data, location.current.input) || null;
+                    : dragSource && this.placement(current, dragSource, location.current.input);
                 this.indicator.clear();
-                if (dragSource &&
-                    placement &&
-                    this.canDrop(dragSource, placement.target, placement.position)) {
-                    const moved = this.moveAndSelect({
-                        blocks: this.moving(dragSource),
-                        target: placement.target,
-                        position: placement.position
-                    });
-                    if (moved.length && this.held)
-                        this.edytor.history.began(this.held);
-                }
-            }
-        });
-        this.registered.set(node, cleanup);
-    }
-    /**
-     * The editor's margins (Notion, `dnd.reach`): during our drag, the page
-     * (`body`) is a drop target only where `margin` gives a placement — the
-     * handle column left of the blocks, the page margin past it and the one
-     * right of the content, up to the drop reach, within the editor's height
-     * (a beside band nearest the content, else the row's reorder) — so a row
-     * is reached from outside it too, row after row; anywhere else the block
-     * targets (and their stickiness) stand, and a block target holding the
-     * pointer (its sticky slop) answers before the page.
-     */
-    registerMarginTarget(node) {
-        if (this.registered.has(node))
-            return;
-        const cleanup = dropTargetForElements({
-            element: node,
-            canDrop: ({ source, input }) => {
-                const dragSource = this.getDragSource(source.data);
-                return Boolean(dragSource && this.margin(dragSource, input));
-            },
-            getData: () => ({ [MARGIN]: true }),
-            onDragEnter: ({ location, source }) => this.showIndicator(node, location, source.data),
-            onDrag: ({ location, source }) => this.showIndicator(node, location, source.data),
-            onDragLeave: ({ location, source }) => {
-                if (this.indicator.target !== node)
+                if (!dragSource || !placement)
                     return;
-                this.indicator.clear();
-                const [current] = location.current.dropTargets;
-                if (current)
-                    this.showIndicator(current.element, location, source.data);
-            },
-            onDrop: ({ location, source }) => {
-                const [current] = location.current.dropTargets;
-                if (current?.element !== node)
+                const { target, position } = placement;
+                const request = { blocks: this.moving(dragSource), target, position };
+                if (!this.edytor.canMove(request))
                     return;
-                const dragSource = this.getDragSource(source.data);
-                const placement = this.indicator.target === node && this.indicator.placement
-                    ? this.indicator.placement
-                    : dragSource && this.margin(dragSource, location.current.input);
-                this.indicator.clear();
-                if (dragSource &&
-                    placement &&
-                    this.canDrop(dragSource, placement.target, placement.position)) {
-                    const moved = this.moveAndSelect({
-                        blocks: this.moving(dragSource),
-                        target: placement.target,
-                        position: placement.position
-                    });
-                    if (moved.length && this.held)
-                        this.edytor.history.began(this.held);
-                }
+                const moved = this.#moveAndSelect(request);
+                if (moved.length && this.held)
+                    this.edytor.history.began(this.held);
             }
         });
         this.registered.set(node, cleanup);
     }
-    /**
-     * The editor's content column (`start`…`end`, the root's content box:
-     * where its blocks' boxes start and end), the width of the handle column
-     * left of it (the drag's handle, measured: `+`, grip and the gap to the
-     * block) and how far the drag reaches past them (`dropReach`, the
-     * `--edytor-drop-reach` the root inherits).
-     */
-    gutter(root) {
-        const style = root.ownerDocument.defaultView?.getComputedStyle(root);
-        const rect = root.getBoundingClientRect();
-        const px = (value) => parseFloat(value ?? '') || 0;
-        const start = rect.left + root.clientLeft + px(style?.paddingLeft);
-        const end = rect.right - px(style?.borderRightWidth) - px(style?.paddingRight);
-        const width = this.handle?.isConnected ? this.handle.getBoundingClientRect().width : 0;
-        return { start, end, handles: width > 0 ? width : HANDLE_COLUMN, reach: dropReach(style) };
-    }
-    /** Whether `x` is in the handle column left of the editor's blocks (`gutter`): the page target's. */
-    inHandleColumn(x) {
-        const root = this.edytor.node;
-        if (!root)
-            return false;
-        const { start, handles } = this.gutter(root);
-        return x < start && x >= start - handles;
-    }
-    /**
-     * A placement in the editor's margins at the pointer (`dnd.reach`), within
-     * the editor's height, for the row the content's near edge shows at the
-     * pointer's height (`rowAt`: a nested block's own row; over a layout, the
-     * row of its first column on the left, of its last on the right, never
-     * another), by the zone the pointer is in (`marginAt`):
-     * - the handle column left of the blocks (`gutter`): that row's reorder
-     *   (`reorder`): a drag straight down the handles reorders, row after
-     *   row, gaps included (never a beside band);
-     * - the first `BESIDE_MARGIN` px past it on the left, and past the
-     *   content's right edge: the beside band of that side (`beside`, as if
-     *   the pointer were at that edge) when the document has a layout kind
-     *   and the row offers one (a refused band shows nothing);
-     * - elsewhere within the reach (and there without a band): the reorder,
-     *   on the left the handle column's, on the right the one the row's
-     *   right edge offers (`atRightEdge`).
-     * `undefined` past the reach, above or below the editor, and inside the
-     * content (the blocks' own targets answer there).
-     */
-    margin(source, { clientX: x, clientY: y }) {
-        const root = this.edytor.node;
-        if (!root || this.edytor.readonly)
-            return undefined;
-        const box = root.getBoundingClientRect();
-        if (y < box.top || y > box.bottom)
-            return undefined;
-        const gutter = this.gutter(root);
-        const zone = marginAt(x, gutter);
-        if (!zone)
-            return undefined;
-        const right = zone.side === 'right';
-        const band = zone.zone === 'beside' && this.layouts;
-        const edge = right ? gutter.end - 1 : gutter.start + 1;
-        const hits = root.ownerDocument.elementsFromPoint?.(edge, y) ?? [];
-        const hit = hits.find((at) => {
-            const block = at.closest('[data-edytor-block="true"]');
-            return block && root.contains(block) && this.targets.has(block);
-        });
-        const node = hit?.closest('[data-edytor-block="true"]');
-        const target = node && this.targets.get(node);
-        // Between two rows where the margin reorders (a margin, a layout's
-        // edge), the reorder shown stays, as a block's sticky slop keeps it.
-        const shown = !band && this.indicator.target === root.ownerDocument.body;
-        const held = shown ? this.indicator.placement : null;
-        const stay = held && !isBeside(held.position) ? held : undefined;
-        if (!node || !target)
-            return stay;
-        const data = { owner: this.owner, blockId: source.id };
-        const { facade } = this.edytor;
-        let row = this.rowAt(data, target, node, { clientX: edge, clientY: y });
-        // Over a layout's edge, its first or last column's row at that height.
-        if (facade.isLayout(row.id)) {
-            const items = row.children.filter((item) => item.node && this.targets.has(item.node));
-            const rect = (right ? items.at(-1) : items[0])?.node?.getBoundingClientRect();
-            if (!rect || rect.width === 0)
-                return undefined;
-            const inner = right ? rect.right - 1 : rect.left + 1;
-            row = this.rowAt(data, target, node, { clientX: inner, clientY: y });
-        }
-        if (facade.isLayout(row.id) || !row.node)
-            return stay;
-        if (band) {
-            const aside = this.beside(source, row, { clientX: right ? Infinity : -Infinity, clientY: y }, zone.side);
-            // A band the document refuses shows nothing; a row offering none (a
-            // nested row on the left, a layout that would stack) reorders.
-            if (aside !== undefined)
-                return aside ?? undefined;
-        }
-        const input = { clientX: x, clientY: y };
-        const placement = right
-            ? this.atRightEdge(source, row, input)
-            : this.reorder(source, row, input);
-        return placement ?? undefined;
-    }
-    /**
-     * Right of the content, the placement the row offers at its own right
-     * edge (`zones` there, by its own row's halves, as its drop target's
-     * hitbox splits it): the same before, after or inside as just inside the
-     * content, so nothing jumps as the pointer leaves it; `null` when no
-     * placement fits.
-     */
-    atRightEdge(source, row, { clientX, clientY }) {
-        const rect = ownRow(row.node);
-        const { before, after } = this.zones(source, row, {
-            clientX: Math.min(clientX, rect.right - 1)
-        });
-        const halves = clientY < rect.top + rect.height / 2 ? [before, after] : [after, before];
-        const fits = this.fits(source);
-        const placement = halves.flat().find(fits);
-        return placement ? { ...placement, blocked: !halves[0].some(fits) } : null;
-    }
-    /**
-     * The handle column's reorder over `row` at the pointer: the hitbox's
-     * halves as its own drop target gives them (`zones`, the pointer's x
-     * picking the level), its own row's top half before, the bottom half
-     * after, only before or after a block — never inside one; `null` when
-     * neither half fits. Over an item of a container the dragged blocks do not
-     * fit in (a paragraph over a list's item: the document refuses every
-     * placement at the item's level), the container is the row: its whole box,
-     * the upper half before it, the lower half after it (round 4), so a drag
-     * down the handles meets the list as one row it can pass.
-     */
-    reorder(source, row, input) {
-        const fits = this.fits(source);
-        const halvesOf = (row, rect) => {
-            const zones = this.zones(source, row, input);
-            const [before, after] = [zones.before, zones.after].map((half) => half.filter((placement) => placement.position !== 'inside'));
-            return input.clientY < rect.top + rect.height / 2 ? [before, after] : [after, before];
-        };
-        let halves = halvesOf(row, ownRow(row.node));
-        for (let at = row.parent; !halves[0].some(fits) && at?.node && !at.isRoot && at.isContainer; at = at.parent)
-            halves = halvesOf(at, at.node.getBoundingClientRect());
-        const placement = halves.flat().find(fits);
-        return placement ? { ...placement, blocked: !halves[0].some(fits) } : null;
-    }
     /**
      * Alt+arrow: one step for the blocks a drag of this handle moves. A text
      * range over them stays, as Mod+Shift+arrow keeps it; else they end
-     * selected as after a drop (`moveAndSelect`).
+     * selected as after a drop (`#moveAndSelect`).
      */
-    handleKeyDown(event, block) {
+    #handleKeyDown(event, block) {
         const direction = event.altKey ? keyMoves[event.key] : undefined;
         if (this.edytor.readonly || !direction)
             return;
         event.preventDefault();
         event.stopPropagation();
         const request = { blocks: this.dragBlocks(block), direction };
-        if (this.inRange(block))
-            this.edytor.moveBlocks(request);
+        if (this.#covered(block)?.range)
+            this.edytor.move(request);
         else
-            this.moveAndSelect(request);
+            this.#moveAndSelect(request);
     }
     /**
      * Move, then select what moved — the drag's rule (`onDragStart`): a group
      * the block selection holds keeps it (a moved block's selected children
      * too); any other group ends selected alone.
      */
-    moveAndSelect(request) {
+    #moveAndSelect(request) {
         const { selectedBlocks } = this.edytor.selection;
         // A layout the selection covers whole counts as held: its blocks stay selected.
         const holds = holdsBlocks(selectedBlocks, request.blocks);
         const before = holds ? [...selectedBlocks] : [];
-        const moved = this.edytor.moveBlocks(request);
+        const moved = this.edytor.move(request);
         if (moved.length)
             selectMoved(this.edytor, moved, before);
         return moved;
     }
-    canDrop(source, target, position) {
-        return this.edytor.canMoveBlocks({ blocks: this.moving(source), target, position });
-    }
     /** The blocks a drop of `source` moves: the drag's own group, fixed when it started. */
     moving(source) {
         // A member a collaborator deleted meanwhile is left out; the others still move.
@@ -682,23 +503,19 @@ export class BlockHandleController {
      * The blocks the selection covers — a block selection's blocks as
      * clicked (a selected list is one block: its item's handle drags the
      * item), or the blocks a text range spans (`getSelectionBlocks`, the
-     * resolver Tab and Turn into read), a code line as its code block
-     * (`movable`) — when `source` is one of them; else `source` alone.
+     * resolver Tab and Turn into read; `range`), a code line as its code
+     * block (`movable`) — when `source` is one of them; else none.
      */
-    covered(source) {
-        const { selectedBlocks, state } = this.edytor.selection;
-        if (!selectedBlocks.size && state.isCollapsed)
-            return [source];
-        const covered = movable(selectedBlocks.size ? selectedBlocks : getSelectionBlocks(this.edytor));
-        return covered.includes(source) ? covered : [source];
-    }
-    /** Whether a text range (no block selection) covers `source` (`covered`). */
-    inRange(source) {
-        const { selectedBlocks, state } = this.edytor.selection;
-        return (!selectedBlocks.size &&
-            !state.isCollapsed &&
-            movable(getSelectionBlocks(this.edytor)).includes(source));
+    #covered(source) {
+        const { selectedBlocks, projection } = this.edytor.selection;
+        const range = !selectedBlocks.size;
+        if (range && projection.isCollapsed)
+            return null;
+        const covered = movable(range ? getSelectionBlocks(this.edytor) : selectedBlocks);
+        return covered.includes(source) ? { covered, range } : null;
     }
+    /** The blocks the selection covers when `source` is one of them, else `source` alone. */
+    covered = (source) => this.#covered(source)?.covered ?? [source];
     /**
      * The blocks a drag (or an Alt+arrow) from `source`'s handle moves
      * (Notion): the outermost of those the selection covers (`covered`), in
@@ -715,277 +532,45 @@ export class BlockHandleController {
      */
     select(source) {
         const { selection } = this.edytor;
-        selection.selectBlocks(...(selection.selectedBlocks.size ? [source] : this.covered(source)));
-    }
-    /** Whether the drag of `source` may land at a placement. */
-    fits = (source) => (placement) => this.canDrop(source, placement.target, placement.position);
-    /**
-     * The hitbox's operations over `row` for our drag: reorder-before and
-     * reorder-after, each `blocked` when the document refuses every
-     * placement of that half (`zones`), none outside our drag.
-     */
-    operations(data, row, input) {
-        const source = this.getDragSource(data);
-        if (!source || this.edytor.readonly)
-            return {};
-        const { before, after } = this.zones(source, row, input);
-        const offer = (half) => half.some(this.fits(source)) ? 'available' : 'blocked';
-        return { 'reorder-before': offer(before), 'reorder-after': offer(after) };
-    }
-    /**
-     * The block whose row the pointer is on over `node`: the last shown drop
-     * target in it whose row starts at or above the pointer (beside a nested
-     * block, over its ancestors' indent, the pointer is on that block's
-     * row), else `target`, over its own row (`emptied`). A layout's columns
-     * sit side by side: only the one under the pointer is measured (between
-     * two of them, the layout is the row: its gap).
-     */
-    rowAt(data, target, node, { clientX, clientY }) {
-        const source = this.getDragSource(data);
-        const lift = (row) => (source ? this.emptied(source, row) : row);
-        if (clientY < getOwnRowBottom(node))
-            return lift(target);
-        const { facade } = this.edytor;
-        let row = target;
-        let aside = null;
-        // In document order, rows start lower and lower (within a column): measure
-        // none below the pointer, none a closed toggle hides (each read would force
-        // a layout), and nothing in a column the pointer is not over.
-        for (const inner of node.querySelectorAll('[data-edytor-block="true"]')) {
-            if (aside?.contains(inner))
-                continue;
-            const block = this.targets.get(inner);
-            if (!block || inner.closest(HIDDEN))
-                continue;
-            const rect = inner.getBoundingClientRect();
-            if (facade.isLayoutItem(block.id) && (clientX < rect.left || clientX > rect.right)) {
-                aside = inner;
-                continue;
-            }
-            if (rect.top > clientY)
-                break;
-            if (rect.height > 0)
-                row = block;
-        }
-        return lift(row);
+        const blocks = selection.selectedBlocks.size ? [source] : this.covered(source);
+        selection.select(blockSelection(blocks.map((block) => block.id)));
     }
-    /** Whether the document has a layout kind: only then are there beside placements. */
-    get layouts() {
-        for (const definition of this.edytor.blocks.values())
-            if (definition.layout)
-                return true;
-        return false;
-    }
-    /**
-     * The block a beside placement over `block` stands beside: the document's
-     * own resolution (`facade.besideAt`, `placeBeside`'s): a list item's list,
-     * a code line's code block, a toggle's child itself, an item itself.
-     */
-    besideOf(block) {
-        return this.edytor.idToBlock.get(this.edytor.facade.besideAt(block.id)) ?? block;
-    }
-    /** The item (and its layout) a beside placement at `outer` (`besideOf`) adds a column beside. */
-    layoutOf(outer) {
-        const { facade } = this.edytor;
-        const item = facade.isLayoutItem(outer.id)
-            ? outer
-            : outer.parent && !outer.parent.isRoot && facade.isLayoutItem(outer.parent.id)
-                ? outer.parent
-                : null;
-        return item ? { item, layout: item.parent ?? null } : null;
-    }
-    /**
-     * Whether `x` is over a column other than one holding `block`: a sticky
-     * target never holds the pointer across a column boundary.
-     */
-    overOtherColumn(block, x) {
-        const { facade } = this.edytor;
-        for (let at = block; at && !at.isRoot; at = at.parent) {
-            if (!facade.isLayoutItem(at.id))
-                continue;
-            const item = at;
-            const over = item.parent?.children.some((other) => {
-                const rect = other !== item ? other.node?.getBoundingClientRect() : undefined;
-                return rect !== undefined && rect.width > 0 && x >= rect.left && x <= rect.right;
-            });
-            if (over)
-                return true;
-        }
-        return false;
-    }
-    /**
-     * Notion's beside bands over `row` (`docs/columns-plan.md`, "View layer"), only while the
-     * pointer is within its own row's height, the document has a layout kind
-     * and the layout the drop makes or grows does not stack (`stacks`):
-     * - right: the row's last 15% (at least 32px), and the slop past it;
-     * - left: the slop left of the row (its sticky margin, left of its text
-     *   column), only for a row whose parent is the root or a column (a
-     *   list's item: its list's) — a nested row keeps the pointer's x for its
-     *   levels (`zones`) — and only
-     *   inside the editor (a column's gap): left of the editor's blocks is the
-     *   handle column, which reorders (`margin`);
-     * - over a layout's gap (the row is the layout): right of the column
-     *   before it, a new column between.
-     * `undefined` outside the bands (the hitbox's halves stand), else the
-     * placement, or `null` when the document refuses it: a refused band shows
-     * nothing.
-     */
-    beside(source, row, { clientX: x, clientY: y }, band) {
-        if (!row.node || this.edytor.readonly || !this.layouts)
-            return undefined;
+    /** The drag of `source`: the blocks it moves, and the placements the document takes for them. */
+    #drag(source) {
         const group = this.moving(source);
-        if (group.some((moved) => moved === row || row.isChildOf(moved)))
-            return undefined;
-        const { facade } = this.edytor;
-        let placement;
-        if (facade.isLayout(row.id)) {
-            const rect = row.node.getBoundingClientRect();
-            if (y < rect.top || y > rect.bottom || stacks(rect.width))
-                return undefined;
-            const items = row.children.filter((item) => item.node && this.targets.has(item.node));
-            for (const [index, item] of items.entries()) {
-                const next = items[index + 1]?.node?.getBoundingClientRect();
-                const own = item.node.getBoundingClientRect();
-                if (next && x >= own.right && x <= next.left)
-                    placement = { target: item, node: item.node, position: 'right' };
-            }
-        }
-        else {
-            const rect = ownRow(row.node);
-            if (y < rect.top || y > rect.bottom)
-                return undefined;
-            const outer = this.besideOf(row);
-            const width = (this.layoutOf(outer)?.layout ?? outer).node?.getBoundingClientRect().width;
-            if (width === undefined || stacks(width))
-                return undefined;
-            // A container's item (a list's) stands at its container's level, as the
-            // document resolves it (`besideAt`): left of a root list's item is left of the list.
-            let at = row;
-            while (at.parent &&
-                !at.parent.isRoot &&
-                at.parent.isContainer &&
-                !facade.isLayoutItem(at.parent.id))
-                at = at.parent;
-            const parent = at.parent;
-            const level = !parent || parent.isRoot || facade.isLayoutItem(parent.id);
-            if (band === 'right' ||
-                (!band && x >= rect.right - Math.max(RIGHT_BAND_MIN, rect.width * RIGHT_BAND)))
-                placement = { target: row, node: row.node, position: 'right' };
-            else if (level &&
-                (band === 'left' ||
-                    (!band && x < rect.left && x >= rect.left - SLOP_X && x >= this.inside(rect.left))))
-                placement = { target: row, node: row.node, position: 'left' };
-        }
-        if (!placement)
-            return undefined;
-        return this.fits(source)(placement) ? placement : null;
-    }
-    /** Where the editor's blocks start (`gutter`), or `fallback` without a host. */
-    inside(fallback) {
-        const root = this.edytor.node;
-        return root ? this.gutter(root).start : fallback;
-    }
-    /** The children a block shows: none for a closed toggle's, or a container's items. */
-    shown(block) {
-        return block.isContainer
-            ? []
-            : block.children.filter((child) => child.node && this.targets.has(child.node) && !hidden(child));
-    }
-    /**
-     * Over a dragged block, the parent it leaves when that parent shows no
-     * other child: the gap under the parent's own row, which reparents as
-     * the parent's lower half does (`zones`). Else `row`.
-     */
-    emptied(source, row) {
-        const group = this.moving(source);
-        const parent = group.find((moved) => moved === row || row.isChildOf(moved))?.parent;
-        if (!parent?.node || parent.isRoot || !this.targets.has(parent.node))
-            return row;
-        const shown = this.shown(parent);
-        return shown.length && shown.every((child) => group.includes(child)) ? parent : row;
-    }
-    /**
-     * The placements over `row`, each half's in preference order (a refused
-     * one gives way to the next, then to the other half's):
-     * - the top half: before it;
-     * - the bottom half of a block whose children show (not a closed toggle):
-     *   its first child's slot. Pragmatic drag and drop's tree rule: an
-     *   expanded item offers no "after" on its own row;
-     * - else, after it at the level whose text column is nearest the pointer:
-     *   the last block of a nested group reparents to any ancestor it ends,
-     *   down to the root. Past one nesting step right of its text start,
-     *   inside it (its last child) first. A block every shown child of which
-     *   is dragged is not expanded: its levels, never inside it when the drag
-     *   moves only its children (they would stay where they are).
-     * None over a dragged block's own row or its subtree: released there, the
-     * drag changes nothing (its levels would outdent it) — unless it empties
-     * its parent's shown children (`emptied`): that parent's row. Over the
-     * hint of the row's empty body (`body.hint`: an open toggle's, a
-     * callout's), inside it first, either half.
-     */
-    zones(source, row, { clientX, clientY }) {
-        const group = this.moving(source);
-        if (group.some((moved) => moved === row || row.isChildOf(moved)))
-            return { before: [], after: [] };
-        const at = (target, position) => target?.node ? [{ target, node: target.node, position }] : [];
-        const before = at(row, 'before');
-        const shown = this.shown(row);
-        const first = shown.find((child) => !group.includes(child));
-        if (first)
-            return { before, after: at(first, 'before') };
-        // A group moved out from under its parent leaves the block before it last.
-        const next = (block) => {
-            let next = block.nextBlock;
-            while (next && group.includes(next))
-                next = next.nextBlock;
-            return next;
+        return {
+            group,
+            fits: ({ target, position }) => this.edytor.canMove({ blocks: group, target, position })
         };
-        const levels = [row];
-        for (let level = row; !next(level) && level.parent?.node && !level.parent.isRoot;)
-            levels.push((level = level.parent));
-        const distance = (level) => Math.abs(column(level) - clientX);
-        const after = levels
-            .sort((a, b) => distance(a) - distance(b))
-            .flatMap((level) => at(level, 'after'));
-        const stays = shown.length > 0 && group.every((moved) => moved.parent === row);
-        const inside = stays ? [] : at(row, 'inside');
-        if (clientY !== undefined && overEmptyBody(row.node, clientY))
-            return { before: [...inside, ...before], after: [...inside, ...after] };
-        const nests = clientX > column(row) + nestIndent(row.node);
-        return { before, after: nests ? [...inside, ...after] : [...after, ...inside] };
     }
     /**
-     * The placement a drop target record offers: a beside band of the row
-     * first (`beside`; `false` when the document refuses it: nothing shows),
-     * else the row and the half the hitbox attached (kept while the target is
-     * sticky), the pointer live.
+     * The placement a drop target record offers: the page's margins
+     * (`margin`), else a beside band of the row first (`beside`; `false` when
+     * the document refuses it: nothing shows), else the row's halves, the one
+     * the record took first (held while the target is sticky), the pointer
+     * live.
      */
-    placement(record, data, input) {
-        const source = this.getDragSource(data);
+    placement(record, source, input) {
+        const drag = this.#drag(source);
         if (record.data[MARGIN])
-            return (source && this.margin(source, input)) ?? false;
-        const instruction = extractInstruction(record.data);
+            return this.drop.margin(drag, input) ?? false;
         const row = this.edytor.idToBlock.get(record.data[ROW]);
-        if (!source || !instruction || !row?.node)
+        if (!row?.node)
             return null;
-        const aside = this.beside(source, row, input);
-        if (aside !== undefined)
-            return aside ?? false;
-        const { before, after } = this.zones(source, row, input);
-        const halves = instruction.operation === 'reorder-before' ? [before, after] : [after, before];
-        const placement = halves.flat().find(this.fits(source));
-        return placement ? { ...placement, blocked: instruction.blocked } : null;
+        return this.drop.at(drag, row, input, Boolean(record.data[BEFORE]));
     }
-    getDragSource(data) {
-        if (data.owner !== this.owner || typeof data.blockId !== 'string')
+    /** The block our drag moves from (none in a read-only view). */
+    #getDragSource(data) {
+        if (data.owner !== this.owner || typeof data.blockId !== 'string' || this.edytor.readonly)
             return null;
         return this.edytor.idToBlock.get(data.blockId) ?? null;
     }
-    showIndicator(node, location, data) {
+    #showIndicator(node, location, data) {
         const [current] = location.current.dropTargets;
         if (current?.element !== node)
             return;
-        const placement = this.placement(current, data, location.current.input);
+        const source = this.#getDragSource(data);
+        const placement = source && this.placement(current, source, location.current.input);
         // A refused beside band shows nothing.
         if (placement === false)
             return this.indicator.clear();