edytor 0.0.11 → 0.1.0-next.16

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

@@ -0,0 +1,823 @@
+import { autoScrollFor } from './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 { getSelectionBlocks, movable, outermost, selectMoved, shownText } from '../../selection/replaceSelection.js';
+import { dragPreview } from './dragPreview.js';
+const blockDragMimeType = 'application/x-edytor-block-id';
+/** The DOM event a handle click dispatches on the editor when no `onActivate` is set. */
+export const BLOCK_ACTIVATE_EVENT = 'edytor-block-activate';
+/**
+ * The DOM event the `+` dispatches on the editor. A menu answers it with
+ * `preventDefault()` (the slash menu does), adds nothing until a row is
+ * picked, then calls `insert(then)`; unanswered, the `+` inserts at once.
+ */
+export const BLOCK_ADD_EVENT = 'edytor-block-add';
+/** Alt+arrow on a handle: one relative step. */
+const keyMoves = {
+    ArrowUp: 'up',
+    ArrowDown: 'down',
+    ArrowRight: 'in',
+    ArrowLeft: 'out'
+};
+/** The drop target data key of the row the hitbox measured (`rowAt`). */
+const ROW = 'edytorRow';
+const getOwnRowBottom = (node) => {
+    const rect = node.getBoundingClientRect();
+    // Block nodes wrap their children in the DOM; the parent's placement
+    // bands belong to its own row, ending where the first child begins.
+    const firstChild = node.querySelector('[data-edytor-block="true"]');
+    const childRect = firstChild?.getBoundingClientRect();
+    return childRect &&
+        childRect.height > 0 &&
+        childRect.top >= rect.top &&
+        childRect.top < rect.bottom
+        ? childRect.top
+        : rect.bottom;
+};
+/**
+ * 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
+ * above its first item is none (`hasOwnRow`).
+ */
+const overOtherRow = (node, input, hasOwnRow) => {
+    const hit = node.ownerDocument.elementFromPoint?.(input.clientX, input.clientY);
+    const over = hit?.closest('[data-edytor-block="true"]');
+    if (!over || node.contains(over) || !hasOwnRow(over))
+        return false;
+    return input.clientY < getOwnRowBottom(over);
+};
+/** Whether no block follows `block` at any level: below it, the document ends. */
+const endsDocument = (block) => {
+    for (let level = block; level && !level.isRoot; level = level.parent)
+        if (level.nextBlock)
+            return false;
+    return true;
+};
+/** A block's own row: its box down to where its first child begins. */
+const ownRow = (node) => {
+    const rect = node.getBoundingClientRect();
+    return new DOMRect(rect.left, rect.top, rect.width, Math.max(0, getOwnRowBottom(node) - rect.top));
+};
+/** The first line of a block's own text (not a child's), or the block's box. */
+const ownTextRow = (node) => {
+    const text = Array.from(node.querySelectorAll('[data-edytor-text="true"]')).find((element) => element.closest('[data-edytor-block="true"]') === node);
+    const row = text?.getClientRects()[0];
+    return row && row.height > 0 ? row : node.getBoundingClientRect();
+};
+/** Where a block's own text starts: its level's column. */
+const column = (block) => ownTextRow(block.node).left;
+/**
+ * One nesting step, a nested child's indent when the target has no visible
+ * child to measure: the `--edytor-nest-indent` the children container is
+ * indented by (in px), else its default.
+ */
+const NEST_INDENT = 24;
+const nestIndent = (node) => {
+    const value = node.ownerDocument.defaultView
+        ?.getComputedStyle(node)
+        .getPropertyValue('--edytor-nest-indent')
+        .trim();
+    return value?.endsWith('px') ? parseFloat(value) : NEST_INDENT;
+};
+/** Notion's drop bar: 4px of translucent blue. */
+const DROP_INDICATOR_COLOR = 'rgba(35, 131, 226, 0.43)';
+/** The nest backdrop's theming variable (its defaults are in `BlockHandle.svelte`). */
+const BACKDROP_COLOR = '--edytor-drop-backdrop-color';
+const BAR = 4;
+/**
+ * Notion's nest backdrop: a soft rounded tint over the future parent's own
+ * row, drawn by the overlay layer under the drop line — never a style on the
+ * block, so rounded block styles and nesting cannot bend it. One per drag,
+ * made at its start so it fades in (`data-shown`) and out.
+ */
+const backdrop = (document) => {
+    const node = document.createElement('div');
+    node.dataset.edytorDropBackdrop = 'true';
+    node.setAttribute('aria-hidden', 'true');
+    return node;
+};
+/** How many blocks move: the badge on the drag preview and the drop indicator. */
+const countBadge = (document, count) => {
+    const badge = document.createElement('span');
+    badge.dataset.edytorDragCount = 'true';
+    badge.textContent = String(count);
+    Object.assign(badge.style, {
+        position: 'absolute',
+        top: '-8px',
+        right: '-8px',
+        minWidth: '18px',
+        height: '18px',
+        padding: '0 5px',
+        boxSizing: 'border-box',
+        borderRadius: '9px',
+        background: 'rgb(35, 131, 226)',
+        color: 'white',
+        font: '600 11px/18px system-ui, sans-serif',
+        textAlign: 'center'
+    });
+    return badge;
+};
+export class BlockHandleController {
+    edytor;
+    options;
+    owner = {};
+    indicatorNode = null;
+    indicatorOverlay = null;
+    activeDropTarget = null;
+    activePlacement = null;
+    /** The indicator's measure in the overlay, while one is shown. */
+    offIndicator = null;
+    /**
+     * The nest backdrop: one per drag, in the overlay; `data-shown` while the
+     * placement nests (it fades out in place, then goes with the drag).
+     */
+    backdrop = null;
+    /** Candidate drop targets; registered with the drag library only during our drag. */
+    targets = new Map();
+    registered = new Map();
+    /** The block whose handle is the source of the drag in progress (its handle stays mounted). */
+    dragging = $state(null);
+    /** Releases this drag's auto-scroll registrations (window and scrolling ancestors). */
+    scrolling = null;
+    /** The blocks the drag in progress moves (`dragBlocks` when it started). */
+    group = [];
+    /** The selection the drag in progress replaced when it started: its undo step restores it. */
+    held = null;
+    /** The selection a grip click replaced (`before`), while the one it made (`after`) stands. */
+    gripped = null;
+    constructor(edytor, options = { draggable: true }) {
+        this.edytor = edytor;
+        this.options = options;
+    }
+    get readonly() {
+        return this.edytor.readonly;
+    }
+    get draggable() {
+        return this.options.draggable;
+    }
+    /**
+     * Make `node` the block's grip: dragging (when draggable), a click that
+     * selects the block and opens its menu, and the Alt+arrow moves.
+     */
+    grip = (block) => (node) => {
+        const 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();
+            }
+        };
+    };
+    /**
+     * 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) {
+        if (this.edytor.readonly || !block.movable)
+            return;
+        const { selection } = this.edytor;
+        const before = selection.value;
+        if (!selection.selectedBlocks.has(block))
+            this.select(block);
+        this.gripped = { before, after: selection.value };
+        if (this.options.onActivate)
+            this.options.onActivate({ block, anchor });
+        // Without a callback, a block menu plugin may answer the activation.
+        else
+            this.edytor.node?.dispatchEvent(new CustomEvent(BLOCK_ACTIVATE_EVENT, { detail: { block, anchor } }));
+    }
+    /**
+     * The `+`: offers the new block to a menu (`BLOCK_ADD_EVENT`), which adds
+     * it once the user picks what to insert; with none answering, adds it now
+     * (`BlockAddition.insert`). A user command: its own undo step, however
+     * soon it follows typing.
+     */
+    addBlock(block, above = false, anchor = block.node ?? null) {
+        const { edytor } = this;
+        if (edytor.readonly || !block.parent)
+            return;
+        this.ungrip();
+        const insert = (then) => {
+            const { dispatcher, facade, selection, undoManager: um } = edytor;
+            const held = selection.value;
+            let refused;
+            edytor.expectInternalFocus();
+            edytor.node?.focus({ preventScroll: true });
+            // 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).
+            const capture = um?.captureTransaction;
+            if (um && capture)
+                um.captureTransaction = (tr) => !refused && capture(tr);
+            let out;
+            try {
+                out = dispatcher.run('insertBlock', () => edytor.transact(() => {
+                    const type = block.parent && edytor.defaultChild(block.parent);
+                    if (!type)
+                        return;
+                    const spec = { block: { type } };
+                    const reused = block.type === type && block.isEmpty;
+                    const target = reused
+                        ? block
+                        : above
+                            ? block.insertBlockBefore(spec)
+                            : block.insertBlockAfter(spec);
+                    // The caret is the model's: the projector shows it once the block mounts.
+                    if (target?.firstText)
+                        dispatcher.caret(target.firstText, 0);
+                    if (!target || !then)
+                        return;
+                    const [added, before] = [facade.version, dispatcher.last];
+                    const result = then();
+                    // `then`'s own refusal (not one left from before), with nothing applied.
+                    const last = dispatcher.last !== before ? dispatcher.last : null;
+                    if (facade.version !== added || (result !== false && last?.status !== 'refused'))
+                        return result;
+                    refused =
+                        last?.status === 'refused' ? last : { operation: 'insertBlock', 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]));
+                    // Still answered: the command scope settles a vetoed async command's rejection.
+                    return result;
+                }));
+            }
+            finally {
+                if (um && capture)
+                    um.captureTransaction = capture;
+            }
+            if (!refused)
+                return out;
+            selection.select(held);
+            dispatcher.last = refused;
+            return false;
+        };
+        const detail = { block, anchor, insert };
+        const event = new CustomEvent(BLOCK_ADD_EVENT, { cancelable: true, detail });
+        if (edytor.node?.dispatchEvent(event) !== false)
+            insert();
+    }
+    /**
+     * A `+` while the block selection a grip click made still stands (its
+     * menu open, or closed leaving it, a divider's): that selection was the
+     * menu's, so the selection held before the grip comes back — for none,
+     * or a caret whose place is gone, a caret at the start of the grip
+     * block's first line — and the `+` holds that one (its menu's Escape
+     * gives it back).
+     */
+    ungrip() {
+        const { gripped } = this;
+        this.gripped = null;
+        const { selection, facade } = this.edytor;
+        // Only while the grip's own selection value stands (any other selection write replaced it).
+        if (!gripped || selection.value !== gripped.after || gripped.after.kind !== 'blocks')
+            return;
+        const { before, after } = gripped;
+        if (before === after)
+            return;
+        if (before.kind !== 'none' && project(before, facade).start)
+            return selection.select(before);
+        const grip = this.edytor.idToBlock.get(after.ids[0]);
+        const text = grip && shownText(grip, 'first');
+        // A block with no text (a divider): no selection, as before the grip.
+        if (text)
+            this.edytor.dispatcher.caret(text, 0);
+        else
+            selection.select(noSelection);
+    }
+    registerHandle(element, block) {
+        if (!this.options.draggable)
+            return () => { };
+        return draggable({
+            element,
+            canDrag: () => !this.edytor.readonly && block.movable,
+            getInitialData: () => ({ owner: this.owner, blockId: block.id }),
+            getInitialDataForExternal: () => ({ [blockDragMimeType]: 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 }) => {
+                this.dragging = block.id;
+                const group = (this.group = this.dragBlocks(block));
+                // A ghost of the moved blocks as they look (Notion), cloned now and
+                // removed with the drag library's container once the drag starts.
+                const root = this.edytor.node;
+                const nodes = group.flatMap((moved) => (moved.node ? [moved.node] : []));
+                if (nativeSetDragImage && root && nodes.length) {
+                    const count = group.length;
+                    const badge = count > 1 ? countBadge(element.ownerDocument, count) : undefined;
+                    const preview = dragPreview(root, nodes, location.current.input, badge);
+                    setCustomNativeDragPreview({
+                        nativeSetDragImage,
+                        getOffset: preview.offset,
+                        render: ({ container }) => container.append(preview.element)
+                    });
+                }
+                for (const [node, target] of this.targets)
+                    this.registerDropTarget(node, target);
+                this.scrolling?.();
+                this.scrolling = root ? autoScrollFor(root, (data) => data.owner === this.owner) : null;
+                this.backdrop?.remove();
+                this.backdrop = backdrop(element.ownerDocument);
+                this.edytor.overlay.layer?.prepend(this.backdrop);
+            },
+            // The moved blocks show selected while they move (a text range becomes their
+            // block selection); the drop's undo step restores the selection held before.
+            onDragStart: () => {
+                const { selectedBlocks, value } = this.edytor.selection;
+                if (this.group.every((moved) => selectedBlocks.has(moved)))
+                    return;
+                this.held = value;
+                this.select(block);
+            },
+            // PDD notifies the source before drop targets. Keep the shown
+            // placement and the targets until the target has committed its move.
+            onDrop: () => queueMicrotask(() => {
+                this.clearIndicator();
+                this.backdrop?.remove();
+                this.backdrop = null;
+                this.scrolling?.();
+                this.scrolling = null;
+                for (const off of this.registered.values())
+                    off();
+                this.registered.clear();
+                this.dragging = null;
+                this.group = [];
+                this.held = null;
+            })
+        });
+    }
+    /** A candidate drop target; registered at once when our drag is in progress. */
+    addDropTarget(node, target) {
+        if (!this.options.draggable)
+            return () => { };
+        this.targets.set(node, target);
+        if (this.dragging)
+            this.registerDropTarget(node, target);
+        return () => {
+            if (this.targets.get(node) === target)
+                this.targets.delete(node);
+            this.registered.get(node)?.();
+            this.registered.delete(node);
+            if (this.activeDropTarget === node)
+                this.clearIndicator();
+        };
+    }
+    registerDropTarget(node, target) {
+        if (this.registered.has(node))
+            return;
+        const cleanup = dropTargetForElements({
+            element: node,
+            canDrop: ({ source, input }) => {
+                const row = this.rowAt(source.data, target, node, input);
+                return Object.values(this.operations(source.data, row, input)).includes('available');
+            },
+            // 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`).
+            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)
+                });
+            },
+            // 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),
+            // across a small gap beside the block — below the document's last block, all
+            // the way down (Notion) — never over another block's own row (its parent's,
+            // which the drag library would otherwise let it keep).
+            getIsSticky: ({ source, input }) => {
+                const dragSource = this.getDragSource(source.data);
+                const active = this.activeDropTarget;
+                if (!dragSource || this.edytor.readonly || !active || !node.contains(active))
+                    return false;
+                const rect = node.getBoundingClientRect();
+                return (input.clientX >= rect.left - 20 &&
+                    input.clientX <= rect.right + 20 &&
+                    input.clientY >= rect.top - 24 &&
+                    (input.clientY <= rect.bottom + 24 || endsDocument(target)) &&
+                    !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),
+            // 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 }) => {
+                if (this.activeDropTarget !== node)
+                    return;
+                this.clearIndicator();
+                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)
+                    return;
+                const dragSource = this.getDragSource(source.data);
+                const placement = this.activeDropTarget === node && this.activePlacement
+                    ? this.activePlacement
+                    : this.placement(current, source.data, location.current.input);
+                this.clearIndicator();
+                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);
+    }
+    /**
+     * 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`).
+     */
+    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);
+        else
+            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) {
+        const { selectedBlocks } = this.edytor.selection;
+        const holds = request.blocks.every((block) => selectedBlocks.has(block));
+        const before = holds ? [...selectedBlocks] : [];
+        const moved = this.edytor.moveBlocks(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.
+        const group = this.dragging === source.id ? this.group.filter((block) => block.isInTree) : [];
+        return group.length ? group : this.dragBlocks(source);
+    }
+    /**
+     * 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.
+     */
+    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));
+    }
+    /**
+     * The blocks a drag (or an Alt+arrow) from `source`'s handle moves
+     * (Notion): the outermost of those the selection covers (`covered`), in
+     * document order — a block's children and a closed toggle's hidden body
+     * travel with it; else `source` alone.
+     */
+    dragBlocks(source) {
+        return outermost(this.covered(source)).sort(this.edytor.compareBlocks);
+    }
+    /**
+     * Select for a gesture on `source`'s handle: over a text range across
+     * blocks, every block it covers (children too, as Turn into reads them);
+     * else `source`.
+     */
+    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`).
+     */
+    rowAt(data, target, node, { clientY }) {
+        const source = this.getDragSource(data);
+        const lift = (row) => (source ? this.emptied(source, row) : row);
+        if (clientY < getOwnRowBottom(node))
+            return lift(target);
+        let row = target;
+        // In document order, rows start lower and lower: measure none below the
+        // pointer, and none a closed toggle hides (each read would force a layout).
+        for (const inner of node.querySelectorAll('[data-edytor-block="true"]')) {
+            const block = this.targets.get(inner);
+            if (!block || inner.closest(HIDDEN))
+                continue;
+            const rect = inner.getBoundingClientRect();
+            if (rect.top > clientY)
+                break;
+            if (rect.height > 0)
+                row = block;
+        }
+        return lift(row);
+    }
+    /** 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.
+     */
+    zones(source, row, { clientX }) {
+        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;
+        };
+        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');
+        const nests = clientX > column(row) + nestIndent(row.node);
+        return { before, after: nests ? [...inside, ...after] : [...after, ...inside] };
+    }
+    /**
+     * The placement a drop target record offers: the row and the half the
+     * hitbox attached (kept while the target is sticky), the pointer's x live.
+     */
+    placement(record, data, input) {
+        const source = this.getDragSource(data);
+        const instruction = extractInstruction(record.data);
+        const row = this.edytor.idToBlock.get(record.data[ROW]);
+        if (!source || !instruction || !row?.node)
+            return null;
+        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;
+    }
+    getDragSource(data) {
+        if (data.owner !== this.owner || typeof data.blockId !== 'string')
+            return null;
+        return this.edytor.idToBlock.get(data.blockId) ?? null;
+    }
+    showIndicator(node, location, data) {
+        const [current] = location.current.dropTargets;
+        if (current?.element !== node)
+            return;
+        const placement = this.placement(current, data, location.current.input);
+        if (!placement)
+            return;
+        const shown = this.activePlacement;
+        if (this.activeDropTarget === node &&
+            shown?.target === placement.target &&
+            shown.position === placement.position &&
+            shown.blocked === placement.blocked) {
+            this.edytor.overlay.invalidate();
+            return;
+        }
+        this.clearIndicator();
+        this.activeDropTarget = node;
+        this.activePlacement = placement;
+        this.indicatorNode = placement.node;
+        placement.node.dataset.edytorBlockDropPosition = placement.position;
+        this.showOverlay(placement);
+    }
+    showOverlay(placement) {
+        const document = placement.node.ownerDocument;
+        const overlay = document.createElement('div');
+        overlay.dataset.edytorDropIndicator = 'true';
+        overlay.dataset.position = placement.position;
+        if (placement.blocked)
+            overlay.dataset.blocked = 'true';
+        overlay.setAttribute('aria-hidden', 'true');
+        const count = this.group.length;
+        if (count > 1) {
+            // The count sits in the gutter at the bar's start, where the handles are.
+            overlay.dataset.count = String(count);
+            const badge = countBadge(document, count);
+            Object.assign(badge.style, { top: `${BAR / 2 - 9}px`, right: 'auto', left: '-26px' });
+            overlay.append(badge);
+        }
+        const color = document.defaultView
+            ?.getComputedStyle(placement.node)
+            .getPropertyValue('--edytor-drop-indicator-color')
+            .trim();
+        overlay.style.setProperty('--edytor-drop-indicator-color', color || DROP_INDICATOR_COLOR);
+        const layer = this.edytor.overlay.layer;
+        layer?.append(overlay);
+        this.indicatorOverlay = overlay;
+        const measure = (origin) => {
+            const writes = [this.positionIndicator(origin), this.positionBackdrop(placement, origin)];
+            return () => writes.forEach((write) => write?.());
+        };
+        // Placed at once (it must not show at the layer's origin for a frame), then per frame.
+        if (layer)
+            measure(layer.getBoundingClientRect())();
+        this.offIndicator = this.edytor.overlay.add(measure);
+    }
+    /**
+     * The block a placement makes the dragged blocks' parent when the drop
+     * nests them: for `inside`, the target, or the item a container nests
+     * them under (`nestParent`, as the move does); for before/after, the
+     * target's parent unless it already holds them all (a plain reorder) or
+     * is the root. A container shows no row of its own (a list): none.
+     */
+    nestParent({ target, position }) {
+        const { edytor, group } = this;
+        const ids = group.map((block) => block.id);
+        const parent = position === 'inside'
+            ? (edytor.idToBlock.get(edytor.facade.nestParent(ids, target.id)) ?? target)
+            : target.parent;
+        if (!parent?.node || parent.isRoot || parent.isContainer)
+            return null;
+        if (position !== 'inside' && group.every((block) => block.parent === parent))
+            return null;
+        return parent;
+    }
+    /**
+     * Layer-relative geometry of the nest backdrop (`backdrop`): the future
+     * parent's box (`nestParent`, read per frame: a peer's change may change
+     * it), down to where its first child begins; hidden when the placement
+     * does not nest.
+     */
+    positionBackdrop(placement, origin) {
+        const { backdrop } = this;
+        if (!backdrop)
+            return;
+        const parent = this.nestParent(placement);
+        const node = parent?.node;
+        if (!parent || !node?.isConnected)
+            return () => delete backdrop.dataset.shown;
+        const rect = ownRow(node);
+        const color = node.ownerDocument.defaultView
+            ?.getComputedStyle(node)
+            .getPropertyValue(BACKDROP_COLOR)
+            .trim();
+        return () => {
+            backdrop.dataset.blockId = parent.id;
+            if (color)
+                backdrop.style.setProperty(BACKDROP_COLOR, color);
+            else
+                backdrop.style.removeProperty(BACKDROP_COLOR);
+            Object.assign(backdrop.style, {
+                left: `${rect.left - origin.left}px`,
+                top: `${rect.top - origin.top}px`,
+                width: `${rect.width}px`,
+                height: `${rect.height}px`
+            });
+            backdrop.dataset.shown = 'true';
+        };
+    }
+    /**
+     * Layer-relative geometry (R11) of Notion's plain bar: centered between the
+     * two siblings of the slot, or — inside the target — where the child lands,
+     * indented to the child's column.
+     */
+    positionIndicator(origin) {
+        const placement = this.activePlacement;
+        const overlay = this.indicatorOverlay;
+        if (!placement || !overlay)
+            return;
+        const rect = placement.node.getBoundingClientRect();
+        const place = (left, width, center) => () => {
+            overlay.style.left = `${left - origin.left}px`;
+            overlay.style.width = `${width}px`;
+            overlay.style.top = `${center - BAR / 2 - origin.top}px`;
+        };
+        if (placement.position === 'inside') {
+            // Where the child lands (the gap after the last visible child, else after
+            // the target's own row), from the child's indent to the target's right edge.
+            const row = ownTextRow(placement.node);
+            const { target } = placement;
+            const lastNode = target.children.at(-1)?.node;
+            const last = lastNode?.getBoundingClientRect();
+            const shown = last && last.height > 0 ? last : null;
+            const next = target.parent?.children[target.index + 1]?.node?.getBoundingClientRect();
+            const end = shown ? shown.bottom : getOwnRowBottom(placement.node);
+            const land = next && next.top >= end ? (end + next.top) / 2 : end + 4;
+            const left = shown && lastNode ? ownTextRow(lastNode).left : row.left + nestIndent(placement.node);
+            return place(left, Math.max(16, rect.right - left), land);
+        }
+        const siblings = placement.target.parent?.children;
+        const index = placement.target.index + (placement.position === 'after' ? 1 : 0);
+        const previous = siblings?.[index - 1]?.node?.getBoundingClientRect();
+        const next = siblings?.[index]?.node?.getBoundingClientRect();
+        if (previous && next && previous.bottom <= next.top) {
+            const left = Math.min(previous.left, next.left);
+            const width = Math.max(previous.right, next.right) - left;
+            return place(left, width, (previous.bottom + next.top) / 2);
+        }
+        const edge = placement.position === 'before' ? rect.top : rect.bottom;
+        return place(rect.left, rect.width, edge);
+    }
+    clearIndicator() {
+        if (this.indicatorNode) {
+            delete this.indicatorNode.dataset.edytorBlockDropPosition;
+            this.indicatorNode = null;
+        }
+        this.offIndicator?.();
+        this.offIndicator = null;
+        // Fades out where it was; the next nesting placement shows it again.
+        if (this.backdrop)
+            delete this.backdrop.dataset.shown;
+        this.indicatorOverlay?.remove();
+        this.indicatorOverlay = null;
+        this.activeDropTarget = null;
+        this.activePlacement = null;
+    }
+}