edytor 1.0.0-rc.3 → 2.0.0

package/dist/edytor.svelte.js

@@ -3,11 +3,11 @@ import { DEV } from 'esm-env';
 import { onBeforeInput } from './events/onBeforeInput.js';
 import { onCopy } from './events/onCopy.js';
 import { onCut } from './events/onCut.js';
-import { isNativeInteractiveEvent, isNestedForeignEditableTarget } from './events/nativeInteractiveControl.js';
+import { isControlEvent, isKindControl } from './events/nativeInteractiveControl.js';
 import { onInput } from './events/onInput.js';
 import { onPaste } from './events/onPaste.js';
-import { onTextDragEnd, onTextDragStart, preventUnsupportedDrop } from './events/onDrop.js';
-import { attachFocus, selectionIsInside } from './events/onFocus.js';
+import { onDragLeave, onTextDragEnd, onTextDragStart, preventUnsupportedDrop } from './events/onDrop.js';
+import { attachFocus, selectionIsInside, takeKeys } from './events/onFocus.js';
 import { insertLineBreak, runIntent } from './events/beforeInputCommands.js';
 import { textPointAt } from './selection/selection.utils.js';
 import { Attempts } from './session/attempt.js';
@@ -19,73 +19,46 @@ import { EdytorSelection } from './selection/selection.svelte.js';
 import { Projector } from './surface/projector.svelte.js';
 import { SurfaceObserver } from './surface/observer.svelte.js';
 import { virtualLens } from './session/virtual.js';
-import { createCells, placeholderOf, segmentDeltas } from './surface/cells.js';
+import { createCells, placeholderOf } from './surface/cells.js';
 import { Pin } from './surface/pin.svelte.js';
 import { Overlay } from './surface/overlay.js';
 import { Popups } from './surface/popups.svelte.js';
 import { onOneLine } from './surface/lines.js';
-import { withRulesAndTriggers } from './plugins/triggers/triggers.js';
 import { Announcer as AnnouncerState } from './session/announcer.svelte.js';
-import { englishLabels, labelsWith } from './labels.js';
 import Announcer from './components/Announcer.svelte';
 import RemoteSelections from './collaboration/RemoteSelections.svelte';
-import SuggestionRanges from './components/SuggestionRanges.svelte';
+import Ranges from './components/Ranges.svelte';
 import { Handles } from './session/handles.js';
 import { id } from './utils.js';
 import { Y } from './crdt/engine.js';
 import { markName } from './crdt/text/marks.js';
 import { callEach } from './crdt/protocols/observable.js';
-import { attachDocument, bindCrdt, SemanticConflictError } from './crdt/index.js';
+import { attachDocument, SemanticConflictError } from './crdt/index.js';
 import { whenDocumentReady } from './collaboration/documentSync.js';
 import { mintPresenceKey, PresenceWriter } from './collaboration/awarenessSelection.js';
-import { batch } from './block/block.utils.js';
-import { canMoveBlocks as canMoveBlocksRelative, moveBlocks as moveBlocksRelative } from './session/moves.js';
+import { canMove, move } from './session/moves.js';
+import { DOCUMENT_WRITES } from './crdt/operations.js';
 import { on } from 'svelte/events';
 import { Keymap } from './session/keymap.js';
 import { TRANSACTION } from './constants.js';
-import { caretOf, deleteBlocks, deleteContentWithinSelection, insertFlow, rangeCaret, prepareDeleteBlocks, prepareDeleteContent, prepareFlow } from './edytor.utils.js';
 import { Dispatcher } from './session/commands.js';
 import { History } from './session/history.js';
+import { DataWrites } from './session/props.js';
 import { kindCatalogue, kindCommand, UNKNOWN_KIND } from './kinds.js';
 import { clearDomSelection, getActiveElement, getDomSelection, getDomSelectionSnapshot } from './selection/domSelection.js';
 /** A consumer that is set (a prop or a plugin hook left out is `undefined`). */
 const isListener = (listener) => listener !== undefined;
-/** What a snippet override's suffix names (the DEV warning for one that names nothing). */
-const OVERRIDDEN = { Mark: 'mark', InlineBlock: 'inline kind', Block: 'kind' };
 /**
- * Names an earlier release took and what replaced them. An untyped caller
- * still passing one (an option, or an `<Edytor>` prop, which reaches the view
- * among the snippets whatever its value) gets nothing from it and a
- * development warning naming the replacement.
+ * Register definitions, the first extension's fields winning: a field it
+ * leaves out is the next one's (an app's `{ snippet }` listed first restyles
+ * a bundled kind and keeps its roles and presets). A bare snippet is `{ snippet }`.
  */
-const RETIRED = {
-    hotKeys: '`hotkeys`',
-    blockDnd: '`blockHandles` (`blockHandles={false}` hides the handles)'
-};
-const warnRetired = (source) => {
-    if (!DEV || !source)
-        return;
-    for (const [name, use] of Object.entries(RETIRED))
-        if (Object.hasOwn(source, name))
-            console.warn(`[edytor] \`${name}\` was removed and is ignored: use ${use}.`);
-};
-/**
- * One `bindCrdt` binding shared by every `Edytor` — the binding exists for
- * legacy consumers only (peer-facade helpers in tests, migration, provider
- * plumbing), so paying a second binding per view buys nothing.
- *
- * CONTRACT: `crdt.doc.create` on a raw doc already wrapped by an
- * `EdytorDocument` would fork a SECOND maintained run view for that doc —
- * the document's `facade` is the only structural surface and the fork is
- * forbidden. `create` on an UNWRAPPED doc (a remote peer's replica in
- * tests) stays legitimate.
- */
-const sharedCrdt = bindCrdt(Y);
-/** Register definitions a first extension has not: a bare snippet is `{ snippet }`. */
 const define = (into, definitions = {}) => {
     for (const [key, value] of Object.entries(definitions))
-        if (!into.has(key))
-            into.set(key, typeof value === 'object' ? value : { snippet: value });
+        into.set(key, {
+            ...(typeof value === 'object' ? value : { snippet: value }),
+            ...into.get(key)
+        });
 };
 /**
  * The mark records: a key `name:<id>` — a comment's, one mark per
@@ -99,6 +72,7 @@ class MarkRecords extends Map {
         return super.has(key) || (key.includes(':') && super.has(markName(key)));
     }
 }
+// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging, no-redeclare
 export class Edytor {
     node;
     marks = new MarkRecords();
@@ -125,8 +99,6 @@ export class Edytor {
     get synced() {
         return this.root !== undefined;
     }
-    /** `batch` binds operations onto blocks and the view alike: both answer `.edytor`. */
-    edytor = this;
     selection;
     /** @internal The only writer of the DOM selection (`surface/projector`). */
     projector = new Projector(this);
@@ -144,7 +116,7 @@ export class Edytor {
             parked: () => this.projector.parked(),
             clear: () => clearDomSelection(this.node),
             pointAt: (node, offset) => textPointAt.call(this.selection, node, offset),
-            sameLine: (a, b) => onOneLine(a, b)
+            sameLine: (a, b) => onOneLine(this.selection.textAt(a), this.selection.textAt(b))
         },
         input: {
             runIntent: (inputType) => runIntent(this, inputType),
@@ -154,20 +126,24 @@ export class Edytor {
     /** What the components render: one cell per visible block, patched from change reports. */
     cells = $state.raw();
     /** Bumped by each commit that changed the document's data: what `docData()` readers track. */
-    dataRevision = $state(0);
+    #dataRevision = $state(0);
     /** @internal The document's data, read-your-writes and reactive (`{}` when none). */
     docData = () => {
-        void this.dataRevision;
+        void this.#dataRevision;
         return this.facade.docData();
     };
+    /** @internal The view's property writes (`session/props`): the data proxies' one queue. */
+    dataWrites = new DataWrites(this);
+    #dataProxy;
     /**
-     * The document's properties as a live proxy (`session/props.ts`): read
-     * and write them like a plain object (`edytor.data.title = 'Notes'`,
-     * `bind:value={edytor.data.title}`); each write is a `patchData` command
-     * on the root. Type it by augmenting {@link EdytorDocData}.
+     * The document's properties, as plain state: reactive at any depth, and
+     * writable (`edytor.data.title = 'Notes'`, `edytor.data.tags.push('x')`,
+     * `delete edytor.data.draft`). Each write is the `patchData` operation,
+     * dispatched; the writes of one task are one undo step. Type them by
+     * augmenting {@link EdytorDocData}.
      */
     get data() {
-        return this.idToBlock.root.data;
+        return (this.#dataProxy ??= this.dataWrites.proxy(null, this.docData));
     }
     /** @internal The IME host pin (`surface/pin`): the composing cell's segment list and render, frozen. */
     pin = new Pin();
@@ -177,8 +153,10 @@ export class Edytor {
     popups = new Popups();
     /** What this view announces to assistive technology (`session/announcer`): its block moves and deletes. */
     announcer = new AnnouncerState(this);
-    /** The words this view says itself (`<Edytor labels>`): its announcements, a suggestion's name. */
-    labels = englishLabels.editor;
+    /** The words the view was given (`<Edytor labels>`); its plugins read their section through `labelsOf`. */
+    labels = {};
+    /** Whether users may nest blocks (`allowNesting`, read once; the rule is `session/moves.ts` `nestsInto`). */
+    allowNesting = false;
     off = [];
     onChange;
     onDocChange;
@@ -197,7 +175,9 @@ export class Edytor {
      * API-driven selection changes must never move the page).
      * @internal
      */
-    isHandlingUserInput = false;
+    get isHandlingUserInput() {
+        return this.#userInputHandlingDepth > 0;
+    }
     /**
      * Depth counter suppressing caret scroll during programmatic DOM
      * writes — remote mirror flushes and mutation-observer repairs can
@@ -225,7 +205,7 @@ export class Edytor {
     lens;
     /**
      * The document as this view reads and writes it (the virtual paragraph's
-     * lens). The public raw path is the document's own operations (`edytor.document.insertBlock(…)`): its writes skip
+     * lens). The public raw path is the document's own operations (`edytor.document.insertBlocks(…)`): its writes skip
      * the dispatcher (no hooks, no readonly admission, no undo policy).
      * @internal
      */
@@ -243,17 +223,6 @@ export class Edytor {
     get awareness() {
         return this.document.awareness;
     }
-    /**
-     * Legacy accessor — the view no longer binds the engine (the document
-     * shares the production binding). Returns the module-level singleton:
-     * one binding per runtime, not one per view. Do NOT `crdt.doc.create`
-     * on this view's `doc` — the document's facade is the only maintained
-     * surface for it (see `sharedCrdt`'s contract note).
-     * @internal
-     */
-    get crdt() {
-        return sharedCrdt;
-    }
     /**
      * The document's shared undo manager — assigned at the end of `sync()`,
      * never in the constructor, so history capture still starts only after
@@ -267,7 +236,7 @@ export class Edytor {
     /** The view's command dispatcher: every mutation this view makes goes through it. */
     dispatcher = new Dispatcher(this);
     /** An outermost `transact` of this view is running. */
-    transacting = false;
+    #transacting = false;
     /**
      * One transaction of this view. The outermost call runs the normalization
      * its operations requested at its end, inside the same transaction (one transaction, normalization once per touched parent): normalizers read
@@ -278,9 +247,9 @@ export class Edytor {
      * logged.
      */
     transact = (cb) => {
-        if (this.transacting)
+        if (this.#transacting)
             return this.doc.transact(cb, this.transaction);
-        this.transacting = true;
+        this.#transacting = true;
         try {
             return this.doc.transact(() => {
                 let out;
@@ -301,13 +270,17 @@ export class Edytor {
             }, this.transaction);
         }
         finally {
-            this.transacting = false;
+            this.#transacting = false;
         }
     };
     /** Whether a block move (relative step or beside/inside a target) is structurally allowed. */
-    canMoveBlocks = (request) => canMoveBlocksRelative(this, request);
-    /** Move blocks one relative step, or before, after or inside a live target block. */
-    moveBlocks = (request) => moveBlocksRelative(this, request);
+    canMove = (request) => canMove(this, request);
+    /**
+     * Move blocks one relative step, or before, after, inside or beside a live
+     * target block: resolved to the document's move (`moveBlocks`, an outdent's
+     * `unNestBlocks`, `placeBeside`) and announced. Answers the moved blocks.
+     */
+    move = (request) => move(this, request);
     /** @internal This view's history (the named exception to commands through the dispatcher): bare engine undo/redo, one restorer. */
     history = new History(this);
     /**
@@ -324,15 +297,20 @@ export class Edytor {
         this.dispatcher.record({ operation: command, status: this.history.replay(command) });
     };
     constructor(options) {
-        const { snippets, readonly, hotkeys, plugins, document, doc, awareness, actor, requireHydration, presence, sync, value, onSelectionChange, placeholder, labels, onChange, onDocChange } = options;
-        warnRetired(options);
-        warnRetired(snippets);
-        this.labels = labelsWith('editor', labels);
+        const { readonly, hotkeys, plugins, document, doc, awareness, actor, requireHydration, presence, sync, value, onSelectionChange, labels, onChange, onDocChange, allowNesting } = options;
+        for (const name of DOCUMENT_WRITES)
+            Object.defineProperty(this, name, {
+                value: (...args) => this.dispatcher.operate(name, args)
+            });
+        if (labels)
+            this.labels = labels;
+        this.allowNesting = allowNesting === true;
         if (document !== undefined) {
-            if (doc !== undefined ||
-                awareness !== undefined ||
-                actor !== undefined ||
-                requireHydration !== undefined) {
+            if (DEV &&
+                (doc !== undefined ||
+                    awareness !== undefined ||
+                    actor !== undefined ||
+                    requireHydration !== undefined)) {
                 throw new Error('EdytorOptions: `document` cannot be combined with `doc`/`awareness`/`actor`/`requireHydration` — ' +
                     'the document owns them (compose them via attachDocument first).');
             }
@@ -358,9 +336,8 @@ export class Edytor {
             // before definition precedence applies: two extensions declaring
             // different default children for one parent type is an error.
             const defaultChild = {};
-            this.plugins = (plugins || []).map((plugin, at) => {
-                // Its input rules and triggers run through its own hooks, at its place in the list.
-                const initializedPlugin = withRulesAndTriggers(this, plugin(this), at);
+            this.plugins = (plugins || []).map((plugin) => {
+                const initializedPlugin = plugin(this);
                 for (const [type, definition] of Object.entries(initializedPlugin.blocks ?? {})) {
                     const child = typeof definition === 'object' ? definition.defaultChild : undefined;
                     if (child !== undefined && (defaultChild[type] ??= child) !== child) {
@@ -376,40 +353,12 @@ export class Edytor {
                         this.commands.set(command.id, command);
                 return initializedPlugin;
             });
-            // The app's snippets override the plugins' after they register: keys are
-            // `{type}{suffix}` over maps keyed by the bare type, suffixes tried in
-            // this order (`mentionInlineBlock` also ends in `Block`). Only the
-            // snippet is replaced: the definition's roles, `transformText` and hooks
-            // survive. An override names a registered kind, mark or atom kind: one
-            // that names none (a typo) registers nothing and warns in development.
-            const overrides = [
-                ['Mark', this.marks],
-                ['InlineBlock', this.inlineBlocks],
-                ['Block', this.blocks]
-            ];
-            for (const [key, snippet] of Object.entries(snippets || {})) {
-                if (Object.hasOwn(RETIRED, key))
-                    continue;
-                const override = overrides.find(([suffix]) => key.endsWith(suffix));
-                const name = override && key.slice(0, -override[0].length);
-                if (override && name && override[1].has(name)) {
-                    const into = override[1];
-                    into.set(name, { ...into.get(name), snippet });
-                }
-                else if (DEV && key !== 'children' && typeof snippet === 'function') {
-                    const reason = override
-                        ? `no ${OVERRIDDEN[override[0]]} "${name}" is registered`
-                        : 'its name ends in neither Block, Mark nor InlineBlock';
-                    console.warn(`[edytor] the snippet "${key}" overrides nothing: ${reason}. A new kind is a plugin's.`);
-                }
-            }
             // Kind records generate their commands; an extension's own command id wins.
             this.kinds = kindCatalogue(this.blocks);
             for (const row of this.kinds)
                 if (!this.commands.has(row.id))
                     this.commands.set(row.id, kindCommand(this, row));
-            this.placeholder =
-                placeholder || this.plugins.find((plugin) => plugin.placeholder)?.placeholder;
+            this.placeholder = this.plugins.find((plugin) => plugin.placeholder)?.placeholder;
             // Contribute this view's capability to the document — roles,
             // `rendersContent` and default children outlive any single view.
             // The first declaration for a type is adopted; a conflicting one is
@@ -443,7 +392,7 @@ export class Edytor {
                 this.sync(value || { children: [] });
             }
             else {
-                this._readinessRelease = whenDocumentReady(this.document, () => {
+                this.#readinessRelease = whenDocumentReady(this.document, () => {
                     if (!this.destroyed)
                         this.sync(value || { children: [] });
                 });
@@ -467,7 +416,7 @@ export class Edytor {
         }
     }
     /** Kinds already reported missing (DEV, once each). */
-    unknownKinds = new Set();
+    #unknownKinds = new Set();
     /**
      * The definition of block kind `type` — the one lookup (render, surface,
      * handles). A kind no plugin of this view registers (a rolling deploy, a
@@ -478,8 +427,8 @@ export class Edytor {
         const definition = this.blocks.get(type);
         if (definition)
             return definition;
-        if (DEV && type && type !== 'root' && !this.unknownKinds.has(type)) {
-            this.unknownKinds.add(type);
+        if (DEV && type && type !== 'root' && !this.#unknownKinds.has(type)) {
+            this.#unknownKinds.add(type);
             console.warn(`[edytor] block kind "${type}" is not registered by any plugin: it renders as a plain block.`);
         }
         return UNKNOWN_KIND;
@@ -532,7 +481,7 @@ export class Edytor {
     /** The adopted default type for a new child of `parent` — its actual parent. */
     defaultChild = (parent) => this.document.defaultChild(parent.isRoot ? null : parent.type);
     /** Releases the readiness wait of a view bound before its document decided. */
-    _readinessRelease;
+    #readinessRelease;
     /** @internal */
     sync = ({ children = [], data } = { children: [] }) => {
         if (this.synced)
@@ -546,20 +495,20 @@ export class Edytor {
         this.history.bind();
         this.cells = createCells(this.facade, this.surface.patched);
         this.root = this.idToBlock.root;
-        this.offCommit = this.facade.onChange(this.onCommit);
+        this.#offCommit = this.facade.onChange(this.#onCommit);
         // A document that is already empty shows its virtual paragraph with the caret in it.
         this.selection?.restoreDeadSelectionEndpoints();
     };
     /** The commit subscription: editor-lifetime (a remount's `off` drain never releases it). */
-    offCommit;
+    #offCommit;
     /**
      * One commit (local, remote, undo/redo): prune the handles of the removed
      * blocks, then the selection's seam and the value consumers.
      */
-    onCommit = (change) => {
+    #onCommit = (change) => {
         this.valueRevision++;
         if (change.data)
-            this.dataRevision++;
+            this.#dataRevision++;
         this.overlay.invalidate();
         // A commit this view did not issue re-renders under the caret: the
         // projector displays the current value after that flush.
@@ -591,6 +540,17 @@ export class Edytor {
         if (values.length > 0)
             callEach('[edytor] onChange', values, this.value);
     };
+    /** The text each range `replace` suggestion removes when accepted (`Ranges`). */
+    #replaced = () => {
+        void this.suggestions.revision;
+        return this.suggestions.list.flatMap(({ at }) => {
+            if (!('replace' in at) || Array.isArray(at.replace))
+                return [];
+            const { anchor, focus } = at.replace;
+            const [start, end] = [anchor, focus].map(this.selection.resolveTextAnchor);
+            return start && end ? [{ start, end }] : [];
+        });
+    };
     /**
      * The placeholder block `id` shows: its cell has one empty
      * text and no live composition in it; a function answers per block.
@@ -608,7 +568,7 @@ export class Edytor {
             return placeholder;
         const { type, data = {} } = cell;
         const focused = this.idToBlock.block(id).focused;
-        return placeholder({ type, data, focused, empty: true }) || null;
+        return placeholder({ type, data, focused, empty: true }, this) || null;
     };
     /** @internal */
     onBeforeInput = onBeforeInput.bind(this);
@@ -626,28 +586,23 @@ export class Edytor {
      * runs with the flag cleared so async restores can't trigger typing
      * affordances long after the gesture ended.
      */
-    userInputHandlingDepth = 0;
-    withUserInput = (handler, opts = {}) => {
-        return (event) => {
-            // Depth-counted, not boolean: a synchronous wrapped listener
-            // landing inside an awaited handler's hold window must not
-            // clear the flag the outer handler still needs.
-            this.userInputHandlingDepth++;
-            this.isHandlingUserInput = true;
+    #userInputHandlingDepth = 0;
+    #withUserInput = (handler, opts = {}) => {
+        return (...args) => {
+            // Depth-counted: a synchronous wrapped listener landing inside an
+            // awaited handler's hold window must not end the window the outer
+            // handler still needs.
+            this.#userInputHandlingDepth++;
             if (opts.bumpSerial !== false) {
                 this.markUserGesture();
             }
             const clear = () => {
-                this.userInputHandlingDepth--;
-                if (this.userInputHandlingDepth <= 0) {
-                    this.userInputHandlingDepth = 0;
-                    this.isHandlingUserInput = false;
-                    // A display the window held back gets its pass now.
+                // A display the window held back gets its pass now.
+                if (--this.#userInputHandlingDepth === 0)
                     this.projector.inputHandled();
-                }
             };
             try {
-                const result = handler(event);
+                const result = handler(...args);
                 // Async handlers keep the flag until they settle — the
                 // awaited model ops + selection writes are still "the
                 // user's input". Timer/rAF-deferred restores run after
@@ -690,18 +645,18 @@ export class Edytor {
      * consumed there; the microtask reset covers a focus that never
      * fires (element already focused).
      */
-    expectInternalFocusArmed = false;
+    #expectInternalFocusArmed = false;
     /** @internal */
     expectInternalFocus = () => {
-        this.expectInternalFocusArmed = true;
+        this.#expectInternalFocusArmed = true;
         queueMicrotask(() => {
-            this.expectInternalFocusArmed = false;
+            this.#expectInternalFocusArmed = false;
         });
     };
     /** @internal A `focusin` consumes the armed flag: `true` when the editor focused itself. */
     consumeInternalFocus = () => {
-        const armed = this.expectInternalFocusArmed;
-        this.expectInternalFocusArmed = false;
+        const armed = this.#expectInternalFocusArmed;
+        this.#expectInternalFocusArmed = false;
         return armed;
     };
     /**
@@ -724,7 +679,7 @@ export class Edytor {
      */
     lastUserGestureOutsideEditor = false;
     /** @internal Run `body` as part of the user's input (deferred work of an occurrence). */
-    userInput = (body) => this.withUserInput(body, { bumpSerial: false })(new Event('input'));
+    userInput = (body) => this.#withUserInput(body, { bumpSerial: false })();
     /**
      * A commit's caret: select it (the projector displays it once the pin's
      * render lands) and arm the IME post-commit jump rule — a move right after
@@ -742,24 +697,23 @@ export class Edytor {
         if ((active &&
             !ours(active) &&
             !ours(selection?.anchorNode) &&
-            !ours(this.selection.state.startText?.node)) ||
-            (active && isNestedForeignEditableTarget(this.node, active)))
+            !ours(this.selection.textRange().startText?.node)) ||
+            isKindControl(this.node, active))
             return;
         this.projector.committed();
-        this.selection.setAtTextOffset(text, Math.min(offset, text.length));
+        this.selection.selectText(text, Math.min(offset, text.length));
     };
     /** An event of this view's own composition (not a native control's, not a nested island's). */
-    ownComposition = (event) => !event ||
-        (!isNativeInteractiveEvent(event) && !isNestedForeignEditableTarget(this.node, event.target));
+    #ownComposition = (event) => !event || !isControlEvent(this.node, event);
     /** @internal */
     onCompositionStart = (event) => {
-        if (!this.ownComposition(event))
+        if (!this.#ownComposition(event))
             return;
         this.composition.start(() => getDomSelectionSnapshot(this.node));
     };
     /** @internal `compositionend`: the live session's commit, or its explicit cancel; the tail swallows a late one. */
     onCompositionEnd = (event) => {
-        if (!this.ownComposition(event) || this.readonly)
+        if (!this.#ownComposition(event) || this.readonly)
             return;
         const value = event?.data ?? this.composition.preview;
         if (value)
@@ -767,10 +721,6 @@ export class Edytor {
         else
             this.composition.cancel();
     };
-    deleteContentWithinSelection = batch('deleteContentWithinSelection', deleteContentWithinSelection, prepareDeleteContent, rangeCaret);
-    /** @internal */
-    insertFlow = batch('insertFlow', insertFlow, prepareFlow, caretOf);
-    deleteBlocks = batch('deleteBlocks', deleteBlocks, prepareDeleteBlocks);
     /** @internal The handle of the `ordinal`-th text segment of block `id` (the element a cell segment renders). */
     textAt = (id, ordinal) => this.idToBlock.text(id, ordinal);
     /** @internal The cell segment the element of `text` renders (the frozen list while pinned). */
@@ -785,9 +735,7 @@ export class Edytor {
         if (!at)
             return [];
         const { cell, segment } = at;
-        const pinned = this.pin.render(cell.id, segment.key);
-        const transform = this.definitionOf(cell.type).transformText;
-        return pinned?.deltas ?? segmentDeltas(cell, segment, transform);
+        return this.pin.shown(cell, segment, this.definitionOf(cell.type).transformText).deltas;
     };
     /** @internal The handle of inline atom `atom`, shown in block `id`. */
     atomAt = (id, atom) => this.idToBlock.atom(id, atom);
@@ -800,10 +748,9 @@ export class Edytor {
         if (this.selection.value.kind === 'none') {
             const text = this.root?.firstText;
             if (text)
-                this.selection.setAtTextOffset(text, 0);
+                this.selection.selectText(text, 0);
         }
-        this.expectInternalFocus();
-        this.node?.focus({ preventScroll: true });
+        takeKeys(this);
     };
     /**
      * Replace the whole document with one empty block and put the caret in it,
@@ -812,18 +759,17 @@ export class Edytor {
      */
     clear = () => {
         const newBlock = this.dispatcher.run('clear', () => this.transact(() => {
-            const root = this.root;
-            root.deleteChildren(0, root.children.length);
-            const block = { id: id('b'), type: this.defaultChild(root) };
-            root.insertChildren(0, [block]);
+            for (const child of this.facade.childrenIds(null).reverse())
+                this.deleteBlock(child, { keepChildren: false });
+            const block = { id: id('b'), type: this.defaultChild(this.root) };
+            this.insertBlocks({ parent: null, index: 0 }, [block]);
             return this.idToBlock.block(block.id);
         }));
         if (!newBlock)
             return false;
         this.dispatcher.record({ operation: 'clear', status: 'applied' });
-        this.selection.setAtTextOffset(newBlock.firstText ?? this.root?.children[0]?.firstText, 0);
-        this.expectInternalFocus();
-        this.node?.focus({ preventScroll: true });
+        this.selection.selectText(newBlock.firstText ?? this.root?.children[0]?.firstText, 0);
+        this.focus();
         return true;
     };
     /** @internal */
@@ -834,12 +780,12 @@ export class Edytor {
         this.node = node;
         this.selection.init();
         this.doc.on('beforeAllTransactions', this.projector.opening);
-        this.doc.on('beforeTransaction', this.surface.before);
+        this.doc.on('beforeTransaction', this.surface.pending);
         this.doc.on('beforeTransaction', this.projector.before);
         this.doc.on('afterTransaction', this.projector.after);
         this.off.push(() => {
             this.doc.off('beforeAllTransactions', this.projector.opening);
-            this.doc.off('beforeTransaction', this.surface.before);
+            this.doc.off('beforeTransaction', this.surface.pending);
             this.doc.off('beforeTransaction', this.projector.before);
             this.doc.off('afterTransaction', this.projector.after);
         });
@@ -847,9 +793,8 @@ export class Edytor {
         // composition-phantom swallow — a swallowed trailing Enter/Backspace
         // is a browser artifact, not a gesture, and must not disarm pending
         // composition caret restores.
-        const keydown = this.withUserInput(onKeyDown.bind(this), { bumpSerial: false });
+        const keydown = this.#withUserInput(onKeyDown.bind(this), { bumpSerial: false });
         const detachSurface = this.surface.attach(node);
-        this.projector.recordsPending = this.surface.pending;
         this.off.push(
         // One handler per keyboard occurrence: keys inside the editor at
         // capture; the document sees only keys whose path misses it (a
@@ -864,10 +809,10 @@ export class Edytor {
         // spellcheck suggestions are computed against the DOM at this
         // moment (PM flushes its DOM observer on contextmenu for the
         // same reason).
-        on(node, 'contextmenu', () => void this.surface.flush()), on(node, 'beforeinput', this.withUserInput(this.onBeforeInput)), 
+        on(node, 'contextmenu', () => void this.surface.flush()), on(node, 'beforeinput', this.#withUserInput(this.onBeforeInput)), 
         // An `input` records what the browser did; it says nothing new about
         // where the user wants the selection (a display still to land wins).
-        on(node, 'input', this.withUserInput(this.onInput, { bumpSerial: false })), on(node, 'copy', this.onCopy), on(node, 'cut', this.withUserInput(this.onCut)), on(node, 'paste', this.withUserInput(this.onPaste)), on(node, 'dragstart', (event) => onTextDragStart(this, event)), on(node, 'dragend', () => onTextDragEnd(this)), on(node, 'dragover', (event) => preventUnsupportedDrop(event, this)), on(node, 'drop', this.withUserInput((event) => preventUnsupportedDrop(event, this))), on(node, 'compositionstart', this.onCompositionStart), on(node, 'compositionend', this.onCompositionEnd), detachSurface);
+        on(node, 'input', this.#withUserInput(this.onInput, { bumpSerial: false })), on(node, 'copy', this.onCopy), on(node, 'cut', this.#withUserInput(this.onCut)), on(node, 'paste', this.#withUserInput(this.onPaste)), on(node, 'dragstart', (event) => onTextDragStart(this, event)), on(node, 'dragend', () => onTextDragEnd(this)), on(node, 'dragover', (event) => preventUnsupportedDrop(event, this)), on(node, 'dragleave', (event) => onDragLeave(this, event)), on(node, 'drop', this.#withUserInput((event) => preventUnsupportedDrop(event, this))), on(node, 'compositionstart', this.onCompositionStart), on(node, 'compositionend', this.onCompositionEnd), detachSurface);
         // Chrome lives in the overlay, outside the host: remote carets, then the plugins'.
         const detachOverlay = this.overlay.attach(node);
         const presence = mount(RemoteSelections, {
@@ -875,9 +820,9 @@ export class Edytor {
             props: { edytor: this }
         });
         // The text a `replace` suggestion removes, marked beside the host.
-        const ranges = mount(SuggestionRanges, {
+        const ranges = mount(Ranges, {
             target: this.overlay.layer,
-            props: { edytor: this }
+            props: { edytor: this, name: 'suggestion-range', z: 19, ranges: this.#replaced }
         });
         // The polite live region: what this view's block moves and deletes did.
         const live = mount(Announcer, {
@@ -933,12 +878,12 @@ export class Edytor {
         // This view's presence entry — its own key, cleared by its own teardown.
         this.presence.clear();
         // A pending readiness binding must not resurrect a dead view.
-        this._readinessRelease?.();
-        this._readinessRelease = undefined;
+        this.#readinessRelease?.();
+        this.#readinessRelease = undefined;
         // Runs the whole attach-lifetime batch — DOM listeners, the mutation
         // observer, plugin actions — and empties the array.
         this.off.splice(0).forEach((off) => off());
-        this.offCommit?.();
+        this.#offCommit?.();
         this.history.unbind();
         // `selectionchange` listener + the published remote caret.
         this.selection.destroy();