edytor 1.0.0-rc.2 → 1.0.0

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

@@ -1,19 +1,21 @@
-import { autoScrollFor } from './autoScroll.js';
-import { noSelection, project } from '../../session/selection.js';
-import { attachInstruction, draggable, dropTargetForElements, extractInstruction, setCustomNativeDragPreview } from '../../dnd/pragmatic.js';
+import { untrack } from 'svelte';
+import { autoScrollFor } from '../../dnd/autoScroll.js';
+import { blockSelection, noSelection, project } from '../../session/selection.js';
+import { draggable, dropTargetForElements, setCustomNativeDragPreview } from '../../dnd/pragmatic.js';
 import { HIDDEN, hidden } from '../../selection/visibility.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 { getOwnRowBottom, isBeside, nestIndent, ownRow, ownTextRow } from './geometry.js';
+import { dropReach, getOwnRowBottom, isBeside, marginAt, nestIndent, overEmptyBody, ownRow, ownTextRow } from './geometry.js';
 import { stacks } from '../columns/stacking.js';
-const blockDragMimeType = 'application/x-edytor-block-id';
+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,8 +33,9 @@ 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. */
@@ -41,11 +44,6 @@ 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;
-/**
- * How far the beside bands reach into the page margins, within a row's
- * height: left, beyond the handle column; right, beyond the editor's edge.
- */
-const MARGIN_X = 120;
 /** The handle column's width when the drag's handle cannot be measured (`+`, grip and gap). */
 const HANDLE_COLUMN = 50;
 /**
@@ -105,10 +103,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).
@@ -120,36 +114,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;
@@ -157,10 +169,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,
@@ -192,15 +202,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).
@@ -209,20 +218,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);
@@ -235,7 +241,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]));
@@ -266,7 +272,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;
@@ -293,7 +299,7 @@ export class BlockHandleController {
             element,
             canDrag: () => !this.edytor.readonly && block.movable,
             getInitialData: () => ({ owner: this.owner, blockId: block.id }),
-            getInitialDataForExternal: () => ({ [blockDragMimeType]: block.id }),
+            getInitialDataForExternal: () => ({ [EDYTOR_BLOCK_DRAG_MIME]: block.id }),
             // The moved blocks are known, and drop targets exist, from the start of
             // our drag (before any target is looked up).
             onGenerateDragPreview: ({ nativeSetDragImage, location }) => {
@@ -313,8 +319,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);
@@ -354,7 +360,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);
@@ -364,9 +370,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.
@@ -375,25 +392,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.margin(dragSource, input));
+                if (this.#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.rowAt(dragSource, target, node, input);
+                const { before, after } = this.zones(dragSource, row, input);
+                return ([...before, ...after].some(this.fits(dragSource)) ||
+                    Boolean(this.beside(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.rowAt(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),
@@ -401,20 +421,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.#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 }) => {
@@ -423,131 +442,85 @@ 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): during our drag, the page (`body`) is a
-     * drop target only where `margin` gives a placement — the handle column
-     * left of the blocks (a reorder of the row there), the page margin beyond
-     * it and the one right of the editor (beside bands), within a row's
-     * height — so a row is reached from outside it too, row after row;
-     * anywhere else the block targets (and their stickiness) stand.
-     */
-    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 left gutter: where its blocks' text starts (the root's
-     * content box), and the width of the handle column left of it (the drag's
-     * handle, measured: `+`, grip and the gap to the block).
+     * 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 start = root.getBoundingClientRect().left +
-            root.clientLeft +
-            (parseFloat(style?.paddingLeft ?? '') || 0);
+        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, handles: width > 0 ? width : HANDLE_COLUMN };
+        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) {
+    #inHandleColumn(x) {
         const root = this.edytor.node;
-        if (!root)
-            return false;
-        const { start, handles } = this.gutter(root);
-        return x < start && x >= start - handles;
+        return !!root && marginAt(x, this.gutter(root))?.zone === 'handles';
     }
     /**
-     * A placement in the editor's margins at the pointer, for the row the
-     * editor's near edge shows at the pointer's height (`rowAt`: a column's
-     * block, a nested block's own row):
-     * - in 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);
-     * - beyond it (up to `MARGIN_X`), the band left of that row;
-     * - right of the editor (up to `MARGIN_X`), the band right of it;
-     * the bands are `beside`'s, as if the pointer were at that edge, only
-     * when the document has a layout kind. `undefined` elsewhere.
+     * 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 (its halves as just inside the content, so nothing
+     *   jumps as the pointer leaves it).
+     * `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)
+        if (!root)
             return undefined;
         const box = root.getBoundingClientRect();
         if (y < box.top || y > box.bottom)
             return undefined;
-        const { start, handles } = this.gutter(root);
-        const handle = this.inHandleColumn(x);
-        const left = x < start - handles && x >= start - handles - MARGIN_X;
-        const right = x > box.right && x <= box.right + MARGIN_X;
-        if (!handle && (!this.layouts || (!left && !right)))
+        const gutter = this.gutter(root);
+        const zone = marginAt(x, gutter);
+        if (!zone)
             return undefined;
-        const edge = right ? box.right - 1 : Math.max(box.left, start) + 1;
+        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"]');
@@ -555,16 +528,15 @@ export class BlockHandleController {
         });
         const node = hit?.closest('[data-edytor-block="true"]');
         const target = node && this.targets.get(node);
-        // Between two rows of the handle column (a margin, a layout's edge), the
-        // reorder shown stays, as a block's sticky slop keeps it.
-        const shown = handle && this.indicator.target === root.ownerDocument.body;
+        // 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 });
+        let row = this.rowAt(source, 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));
@@ -572,74 +544,92 @@ export class BlockHandleController {
             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 });
+            row = this.rowAt(source, target, node, { clientX: inner, clientY: y });
         }
         if (facade.isLayout(row.id) || !row.node)
             return stay;
-        if (handle)
-            return this.reorder(source, row, { clientX: x, clientY: y }) ?? undefined;
-        const band = this.beside(source, row, { clientX: left ? -Infinity : Infinity, clientY: y }, left ? 'left' : 'right');
-        return band ?? undefined;
+        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 rect = ownRow(row.node);
+        if (right) {
+            const at = { clientX: Math.min(x, rect.right - 1), clientY: y };
+            return this.pick(source, this.halves(source, row, at, rect)) ?? undefined;
+        }
+        return this.reorder(source, row, { clientX: x, clientY: y }) ?? undefined;
     }
     /**
-     * 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.
+     * The halves of `row` (`zones`) at the pointer, the one it is in first:
+     * the top half of `rect` (its own row by default) before, the bottom one
+     * after; with `plain`, only before or after a block — never inside one.
      */
-    reorder(source, row, input) {
+    halves(source, row, input, rect, plain = false) {
+        const zones = this.zones(source, row, input);
+        const [before, after] = [zones.before, zones.after].map((half) => plain ? half.filter((placement) => placement.position !== 'inside') : half);
+        return input.clientY < rect.top + rect.height / 2 ? [before, after] : [after, before];
+    }
+    /**
+     * The first placement of `halves` the document takes (a refused one gives
+     * way to the next, then to the other half's), `blocked` when the first
+     * half took none; `null` when none fits.
+     */
+    pick(source, halves) {
         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;
     }
+    /**
+     * The handle column's reorder over `row` at the pointer: its plain halves
+     * (`halves`, the pointer's x picking the level); `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);
+        let halves = this.halves(source, row, input, ownRow(row.node), true);
+        for (let at = row.parent; !halves[0].some(fits) && at?.node && !at.isRoot && at.isContainer; at = at.parent)
+            halves = this.halves(source, at, input, at.node.getBoundingClientRect(), true);
+        return this.pick(source, halves);
+    }
     /**
      * 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.
@@ -650,23 +640,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
@@ -683,23 +669,11 @@ export class BlockHandleController {
      */
     select(source) {
         const { selection } = this.edytor;
-        selection.selectBlocks(...(selection.selectedBlocks.size ? [source] : this.covered(source)));
+        const blocks = selection.selectedBlocks.size ? [source] : this.covered(source);
+        selection.select(blockSelection(blocks.map((block) => block.id)));
     }
     /** 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) };
-    }
+    fits = (source) => ({ target, position }) => this.edytor.canMove({ blocks: this.moving(source), target, position });
     /**
      * 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
@@ -708,9 +682,8 @@ export class BlockHandleController {
      * 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);
+    rowAt(source, target, node, { clientX, clientY }) {
+        const lift = (row) => this.emptied(source, row);
         if (clientY < getOwnRowBottom(node))
             return lift(target);
         const { facade } = this.edytor;
@@ -766,7 +739,7 @@ export class BlockHandleController {
      * 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) {
+    #overOtherColumn(block, x) {
         const { facade } = this.edytor;
         for (let at = block; at && !at.isRoot; at = at.parent) {
             if (!facade.isLayoutItem(at.id))
@@ -799,10 +772,9 @@ export class BlockHandleController {
      * nothing.
      */
     beside(source, row, { clientX: x, clientY: y }, band) {
-        if (!row.node || this.edytor.readonly || !this.layouts)
+        if (!row.node || !this.layouts)
             return undefined;
-        const group = this.moving(source);
-        if (group.some((moved) => moved === row || row.isChildOf(moved)))
+        if (this.carrier(source, row))
             return undefined;
         const { facade } = this.edytor;
         let placement;
@@ -866,7 +838,7 @@ export class BlockHandleController {
      */
     emptied(source, row) {
         const group = this.moving(source);
-        const parent = group.find((moved) => moved === row || row.isChildOf(moved))?.parent;
+        const parent = this.carrier(source, row)?.parent;
         if (!parent?.node || parent.isRoot || !this.targets.has(parent.node))
             return row;
         const shown = this.shown(parent);
@@ -887,12 +859,14 @@ export class BlockHandleController {
      *   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.
+     * 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 }) {
-        const group = this.moving(source);
-        if (group.some((moved) => moved === row || row.isChildOf(moved)))
+    zones(source, row, { clientX, clientY }) {
+        if (this.carrier(source, row))
             return { before: [], after: [] };
+        const group = this.moving(source);
         const at = (target, position) => target?.node ? [{ target, node: target.node, position }] : [];
         const before = at(row, 'before');
         const shown = this.shown(row);
@@ -915,41 +889,46 @@ export class BlockHandleController {
             .flatMap((level) => at(level, 'after'));
         const stays = shown.length > 0 && group.every((moved) => moved.parent === row);
         const inside = stays ? [] : at(row, 'inside');
+        if (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) {
         if (record.data[MARGIN])
-            return (source && this.margin(source, input)) ?? false;
-        const instruction = extractInstruction(record.data);
+            return this.margin(source, 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.pick(source, record.data[BEFORE] ? [before, after] : [after, before]);
+    }
+    /** The dragged block that is `row` or holds it: its row offers nothing (it moves with the drag). */
+    carrier(source, row) {
+        return this.moving(source).find((moved) => moved === row || row.isChildOf(moved));
     }
-    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();