@canvist/web 0.0.0-stage → 0.2.0

package/dist/editor.js

@@ -0,0 +1,776 @@
+import { core, starterKit } from "@canvist/headless/extensions";
+import { WebEditor } from "../wasm/canvist_web.js";
+import { FontWatcher } from "./font-watcher.js";
+import { Input } from "./input.js";
+import { load } from "./load.js";
+import { CanvasMeasurer } from "./measure.js";
+import { AccessibilityMirror } from "./mirror.js";
+import { Placeholder } from "./placeholder.js";
+import { detectPlatform } from "./platform.js";
+/** How the caret blinks: on and off for this long each. */
+const CARET_BLINK_MS = 530;
+/** How many recent input-to-paint times {@link Editor.inputLatency} summarizes. */
+const LATENCY_SAMPLES = 1024;
+/** How close, in CSS px, a measured border width must be to a snapped one to count as snapped. */
+const BORDER_SNAP_TOLERANCE = 1 / 128;
+/**
+ * Create an editor that renders into `element`.
+ *
+ * The element becomes the editor: give it a width (the document wraps to
+ * its content box) and, for a scrolling editor, a height and
+ * `overflow: auto`. Without a height it grows with the document and the
+ * page scrolls. Don't put padding on it; pad a wrapper instead, as with
+ * server-rendered `.cv-doc`.
+ *
+ * ```ts
+ * const editor = await createEditor(element, {
+ * 	content: { format: "markdown", input: "# Hello" },
+ * });
+ * editor.commands.toggleBold();
+ * ```
+ */
+export async function createEditor(element, options = {}) {
+    await load(options.wasm);
+    return new Editor(element, options);
+}
+/** A canvas editor. Create one with {@link createEditor}. */
+export class Editor {
+    /** Run a registered command; returns whether it applied. */
+    commands;
+    /** Whether a registered command would apply. Nothing changes. */
+    can;
+    /** Answer a registered query. */
+    query;
+    /** Each registered plugin's API, by name. */
+    plugins;
+    #element;
+    #canvas;
+    #spacer;
+    #wasm;
+    #measurer;
+    #fonts;
+    #extensions;
+    #abort = new AbortController();
+    #waits = new Set();
+    #resize;
+    #input;
+    #mirror;
+    #placeholder;
+    /** A ring of recent input-to-paint times. */
+    #latency = new Float64Array(LATENCY_SAMPLES);
+    #subscribers = new Set();
+    /** Server-rendered HTML shown in the editor's place until the canvas has painted with settled fonts. */
+    #server;
+    #latencySamples = 0;
+    #frame = 0;
+    #blink = 0;
+    #height = 0;
+    #width = 0;
+    #lastFrame;
+    #focused = false;
+    #editable = true;
+    /** @internal Use {@link createEditor}, which loads the WebAssembly module first. */
+    constructor(element, options, create = (...args) => new WebEditor(...args)) {
+        const extensions = (options.extensions ?? starterKit);
+        this.#extensions = [...core, ...extensions];
+        this.#element = element;
+        this.#canvas = document.createElement("canvas");
+        this.#spacer = document.createElement("div");
+        this.#measurer = new CanvasMeasurer(element.ownerDocument);
+        this.#server = element.querySelector(":scope > .cv-doc");
+        this.#prepareDom();
+        this.#width = contentWidth(element);
+        this.#wasm = create(this.#canvas, this.#measurer, extensions.map((extension) => extension.name), wasmOptions(options));
+        this.#snapToDevice();
+        this.#fonts = new FontWatcher(element.ownerDocument.fonts, (families) => this.#fontsLoaded(families));
+        this.#measurer.listen((used) => this.#fonts.request(used));
+        if (options.content !== undefined) {
+            this.#load(options.content);
+        }
+        else if (this.#server !== null) {
+            this.#wasm.load("html", this.#server.outerHTML);
+        }
+        const commands = registeredNames(this.#extensions, "commands");
+        const queries = registeredNames(this.#extensions, "queries");
+        this.commands = calls(commands, (name, args) => this.#runEncoded(name, args));
+        this.can = calls(commands, (name, args) => this.#wasm.can(name, encode(args)));
+        this.query = calls(queries, (name, args) => JSON.parse(this.#wasm.query(name, encode(args))));
+        this.plugins = this.#setupPlugins(options.plugins ?? []);
+        const label = options.label ?? "Editor";
+        this.#mirror = new AccessibilityMirror(element, label, () => this.#wasm.html()[0] ?? "");
+        this.#input = new Input({
+            element,
+            canvas: this.#canvas,
+            wasm: this.#wasm,
+            signal: this.#abort.signal,
+            label,
+            viewportTop: () => this.#viewportTop(),
+            changed: (since) => this.#inputChanged(since),
+            focusChanged: (focused) => this.setFocused(focused),
+        }, options.input ?? "auto");
+        const [font = "", color = ""] = this.#wasm.bodyStyle();
+        this.#placeholder = new Placeholder(element, font, color);
+        this.setPlaceholder(options.placeholder ?? "");
+        this.setEditable(options.editable ?? true);
+        this.#resize = new ResizeObserver((entries) => this.#observe(entries));
+        this.#resize.observe(element, { box: "content-box" });
+        this.#listenForViewportChanges();
+        this.#watchScale();
+        this.#syncSize();
+        this.#render();
+        if (this.#server !== null) {
+            void this.ready();
+        }
+    }
+    /** The registered extensions, including the ones every editor has. */
+    get extensions() {
+        return this.#extensions;
+    }
+    /** The canvas the editor paints. */
+    get canvas() {
+        return this.#canvas;
+    }
+    /** What the last frame did. */
+    get lastFrame() {
+        return this.#lastFrame;
+    }
+    /** How text input arrives in this browser: through `EditContext` or a hidden textarea. */
+    get inputMode() {
+        return this.#input.mode;
+    }
+    /** Focus the editor without scrolling. */
+    focus() {
+        this.#input.focus();
+    }
+    /** Whether the editor has focus. */
+    get focused() {
+        return this.#focused;
+    }
+    /** Whether people can change the document; see {@link EditorOptions.editable}. */
+    get editable() {
+        return this.#editable;
+    }
+    /**
+     * Let people change the document, or make it read-only. A read-only
+     * editor shows no caret, and subscribers hear of the change.
+     */
+    setEditable(editable) {
+        if (editable === this.#editable) {
+            return;
+        }
+        this.#editable = editable;
+        this.#input.setEditable(editable);
+        this.#showCaret();
+        this.#notify();
+    }
+    /** Show `text` while the document is empty; an empty string shows none. */
+    setPlaceholder(text) {
+        this.#placeholder.text = text;
+        this.#input.setPlaceholder(text);
+        this.#invalidate();
+    }
+    /** Whether the document is a single empty text block, as a new one is. */
+    get isEmpty() {
+        return this.#wasm.isEmpty();
+    }
+    /**
+     * The text of the text block holding the selection's head, or `null`
+     * when the head is not in a text block. A floating menu shows on an
+     * empty one.
+     */
+    blockText() {
+        return this.#wasm.editContextState()[0] ?? null;
+    }
+    /**
+     * Input-to-paint times over the most recent input events: from each
+     * keystroke, composition, paste, drop, or pointer event's timestamp
+     * until the editor painted the change.
+     */
+    inputLatency() {
+        const count = Math.min(this.#latencySamples, LATENCY_SAMPLES);
+        const sorted = this.#latency.slice(0, count).sort();
+        const at = (share) => sorted[Math.min(count - 1, Math.floor(share * count))] ?? 0;
+        return { samples: count, p50: at(0.5), p95: at(0.95), max: at(1) };
+    }
+    /**
+     * Resolve once fonts the document uses have loaded (or failed), plugins
+     * have finished their setup work, and the result is painted.
+     */
+    async ready() {
+        for (;;) {
+            await this.#fonts.settled();
+            await Promise.allSettled([...this.#waits]);
+            if (!this.#fonts.loading && this.#waits.size === 0) {
+                break;
+            }
+        }
+        // Paint in an animation frame, before the browser measures layout for
+        // ResizeObserver. Fonts can finish loading while observers are being
+        // notified, and resizing the canvas then is a ResizeObserver loop.
+        await nextFrame();
+        this.#hydrate();
+        this.#render();
+    }
+    /**
+     * Call `listener` after every change to the document, the selection,
+     * focus, or {@link Editor.editable}, from input, commands, or the API.
+     * Returns a function that unsubscribes. Its shape suits React's
+     * `useSyncExternalStore`.
+     */
+    subscribe(listener) {
+        this.#subscribers.add(listener);
+        return () => this.#subscribers.delete(listener);
+    }
+    /** Whether server-rendered HTML still stands in for the canvas. */
+    get hydrating() {
+        return this.#server !== null;
+    }
+    /** Run the command named `name`, for callers that pick commands at runtime. */
+    run(name, ...args) {
+        return this.#runEncoded(name, args[0]);
+    }
+    /** Answer the query named `name`, for callers that pick queries at runtime. */
+    ask(name, ...args) {
+        return JSON.parse(this.#wasm.query(name, encode(args[0])));
+    }
+    /** Replace the document. */
+    setContent(content) {
+        this.#load(content);
+        this.#edited();
+    }
+    /** The document as `format`. */
+    export(format) {
+        return this.#wasm.export(format);
+    }
+    /** The document as ProseMirror JSON. */
+    toJson() {
+        return JSON.parse(this.#wasm.export("json"));
+    }
+    /** Server-rendered HTML for the document at the editor's width, and its stylesheet. */
+    toHtml() {
+        const [html = "", css = ""] = this.#wasm.html();
+        return { html, css };
+    }
+    /** The whole document as SVG, painted from the same display list as the canvas. */
+    toSvg() {
+        return this.#wasm.svg();
+    }
+    /**
+     * Where layout put every block, line, caret stop, and text run, in
+     * document coordinates: what the parity tests compare with the DOM.
+     */
+    geometry() {
+        return JSON.parse(this.#wasm.geometry());
+    }
+    /** The text selection, or `null` for a block selection. */
+    get selection() {
+        return JSON.parse(this.#wasm.selection());
+    }
+    /** Select from `anchor` to `head`, or place a caret at `anchor`. Offsets count UTF-16 code units. */
+    select(anchor, head = anchor) {
+        this.#wasm.select(Uint32Array.from(anchor.path), anchor.offset, Uint32Array.from(head.path), head.offset);
+        this.#edited();
+    }
+    /** Replace the selection with `text`, as typing does (input rules apply). */
+    insertText(text) {
+        const changed = this.#wasm.insertText(text);
+        this.#edited();
+        return changed;
+    }
+    /** Undo the last change. */
+    undo() {
+        const changed = this.#wasm.undo();
+        this.#edited();
+        return changed;
+    }
+    /** Redo the last undone change. */
+    redo() {
+        const changed = this.#wasm.redo();
+        this.#edited();
+        return changed;
+    }
+    /**
+     * Show the caret and blink it, as when the editor has focus. Subscribers
+     * hear of the change.
+     */
+    setFocused(focused) {
+        if (focused === this.#focused) {
+            return;
+        }
+        this.#focused = focused;
+        this.#showCaret();
+        this.#notify();
+    }
+    /** The caret's rectangle in document coordinates, or `null` when the selection is a range. */
+    caretRect() {
+        this.#settle();
+        return domRect(this.#wasm.caretRect());
+    }
+    /**
+     * The rectangle of a caret at `position` in document coordinates, or
+     * `null` when the document has no such position or it is scrolled too far
+     * away to be laid out. Collaborators' carets are drawn with it: positions
+     * from another peer may not exist here yet.
+     */
+    caretRectAt(position) {
+        this.#settle();
+        return domRect(this.#wasm.caretRectAt(Uint32Array.from(position.path), position.offset));
+    }
+    /**
+     * The smallest rectangle around the selection in document coordinates:
+     * the caret's for a caret, or `null` while the selection is scrolled too
+     * far away to be laid out. Pass it to {@link Editor.toClientRect} to
+     * anchor a menu, or use `@canvist/web/menus`.
+     */
+    selectionRect() {
+        this.#settle();
+        return domRect(this.#wasm.selectionBounds());
+    }
+    /** `rect`, in document coordinates, in the viewport's coordinates, as `getBoundingClientRect` reports them. */
+    toClientRect(rect) {
+        const canvas = this.#canvas.getBoundingClientRect();
+        return new DOMRect(canvas.left + rect.x, canvas.top + rect.y - this.#viewportTop(), rect.width, rect.height);
+    }
+    /** Measurement cache statistics. */
+    stats() {
+        const stats = JSON.parse(this.#wasm.stats());
+        const lookups = stats.hits + stats.misses;
+        return { ...stats, hitRate: lookups === 0 ? 1 : stats.hits / lookups };
+    }
+    /** The CSS `font` of every font the layout has used. */
+    fonts() {
+        return this.#wasm.fonts();
+    }
+    /**
+     * The document changed outside this editor's own calls, as a
+     * collaborator's change does: repaint, and tell subscribers.
+     *
+     * @internal Called by `@canvist/web/collab`.
+     */
+    documentChanged() {
+        this.#edited();
+    }
+    /** Lay out and paint now instead of on the next animation frame. */
+    render() {
+        this.#render();
+        return this.#lastFrame;
+    }
+    /** Remove the editor's elements and listeners and release its memory. */
+    destroy() {
+        this.#abort.abort();
+        cancelAnimationFrame(this.#frame);
+        clearTimeout(this.#blink);
+        this.#resize.disconnect();
+        this.#fonts.dispose();
+        this.#mirror.dispose();
+        this.#placeholder.dispose();
+        this.#input.dispose();
+        this.#canvas.remove();
+        this.#spacer.remove();
+        this.#wasm.free();
+    }
+    [Symbol.dispose]() {
+        this.destroy();
+    }
+    #load(content) {
+        if ("format" in content) {
+            this.#wasm.load(content.format, content.input);
+        }
+        else {
+            this.#wasm.load("json", JSON.stringify(content));
+        }
+    }
+    #prepareDom() {
+        const element = this.#element;
+        if (getComputedStyle(element).position === "static") {
+            element.style.position = "relative";
+        }
+        element.classList.add("cv-editor");
+        const canvas = this.#canvas;
+        canvas.className = "cv-canvas";
+        Object.assign(canvas.style, {
+            display: "block",
+            position: "sticky",
+            top: "0",
+            width: "100%",
+            height: "0px",
+        });
+        this.#spacer.className = "cv-spacer";
+        this.#spacer.setAttribute("aria-hidden", "true");
+        element.append(canvas, this.#spacer);
+        // Until fonts settle, the server's HTML holds the space the canvas
+        // will take; both laid out at once would double the height.
+        if (this.#server !== null) {
+            canvas.style.display = "none";
+            this.#spacer.style.display = "none";
+        }
+    }
+    #setupPlugins(plugins) {
+        const context = {
+            element: this.#element,
+            measurer: this.#measurer,
+            signal: this.#abort.signal,
+            fontsLoaded: (families) => this.#fontsLoaded(families),
+            hideFamilies: (families) => {
+                this.#wasm.hideFamilies([...families]);
+                this.#invalidate();
+            },
+            invalidate: () => this.#invalidate(),
+            waitFor: (work) => {
+                const tracked = work.finally(() => this.#waits.delete(tracked));
+                this.#waits.add(tracked);
+            },
+        };
+        const apis = {};
+        for (const plugin of plugins) {
+            apis[plugin.name] = plugin.setup(context);
+        }
+        return apis;
+    }
+    /**
+     * A family's faces load one subset, weight, or style at a time, so the
+     * same family can arrive more than once; each arrival can change
+     * advances, so each forgets that family's measurements again.
+     */
+    #fontsLoaded(families) {
+        this.#measurer.forget();
+        if (families.length > 0 && this.#wasm.fontsLoaded([...families]) > 0) {
+            this.#invalidate();
+        }
+    }
+    /** Run the command named `name` with `args` and repaint on the next frame. */
+    #runEncoded(name, args) {
+        const applied = this.#wasm.run(name, encode(args));
+        this.#edited();
+        return applied;
+    }
+    /** Repaint on the next frame whenever the document scrolls or the window resizes. */
+    #listenForViewportChanges() {
+        const signal = this.#abort.signal;
+        this.#scroller().addEventListener("scroll", () => {
+            this.#invalidate();
+            if (this.#focused) {
+                this.#input.syncBounds();
+            }
+        }, { passive: true, signal });
+        window.addEventListener("resize", () => this.#invalidate(), { signal });
+    }
+    /** The document or selection changed outside input events. */
+    #edited() {
+        this.#invalidate();
+        this.#input.sync();
+        this.#mirror.schedule();
+        this.#notify();
+    }
+    #notify() {
+        for (const listener of this.#subscribers) {
+            listener();
+        }
+    }
+    /**
+     * Swap server-rendered HTML for the canvas in one task, so no frame
+     * shows both or neither. The canvas was laid out with the same fonts and
+     * the same measurements as the HTML, so nothing moves.
+     */
+    #hydrate() {
+        const server = this.#server;
+        // A destroyed editor leaves the HTML to whichever editor replaces it.
+        if (server === null || this.#abort.signal.aborted) {
+            return;
+        }
+        this.#server = null;
+        server.remove();
+        this.#canvas.style.display = "block";
+        this.#spacer.style.display = "";
+    }
+    /**
+     * An input event changed the document or selection: paint in the same
+     * task, so the change reaches the screen in the next frame, and record
+     * how long that took.
+     */
+    #inputChanged(since) {
+        this.#wasm.setCaretOn(true);
+        this.#restartBlink();
+        this.#render();
+        this.#revealCaret();
+        this.#mirror.schedule();
+        this.#latency[this.#latencySamples % LATENCY_SAMPLES] = performance.now() -
+            since;
+        this.#latencySamples += 1;
+        this.#notify();
+    }
+    /** Scroll the caret into view. */
+    #revealCaret() {
+        const caret = this.caretRect();
+        if (caret === null) {
+            return;
+        }
+        const scroller = this.#scroller();
+        if (scroller instanceof HTMLElement) {
+            const top = scroller.scrollTop;
+            const bottom = top + scroller.clientHeight;
+            const delta = caret.top < top
+                ? caret.top - top
+                : Math.max(0, caret.bottom - bottom);
+            scroller.scrollTop += delta;
+            return;
+        }
+        const element = this.#element.getBoundingClientRect();
+        const top = element.top + this.#element.clientTop + caret.top;
+        const bottom = top + caret.height;
+        const delta = top < 0 ? top : Math.max(0, bottom - window.innerHeight);
+        if (delta !== 0) {
+            window.scrollBy(0, delta);
+        }
+    }
+    /**
+     * Lay out now if a change is waiting for the next frame, so geometry read
+     * right after an edit describes the edited document.
+     */
+    #settle() {
+        if (this.#frame !== 0) {
+            this.#render();
+        }
+    }
+    #invalidate() {
+        if (this.#frame !== 0) {
+            return;
+        }
+        this.#frame = requestAnimationFrame(() => this.#render());
+    }
+    #render() {
+        cancelAnimationFrame(this.#frame);
+        this.#frame = 0;
+        // The canvas is as tall as the visible part of the document, which
+        // depends on the document's height, which the frame measures. A
+        // second pass settles a height change in the same frame.
+        for (let pass = 0; pass < 2; pass += 1) {
+            const changed = this.#syncSize();
+            this.#wasm.setTop(this.#viewportTop());
+            const [height = 0, shift = 0, laidOut = 0, measured = 0, drawn = 0, full = 0, painted = 0,] = this.#wasm.frame();
+            this.#lastFrame = {
+                height,
+                laidOut,
+                measured,
+                drawn,
+                full: full === 1,
+                painted: painted === 1,
+            };
+            const heightChanged = height !== this.#height;
+            this.#height = height;
+            if (shift !== 0) {
+                this.#scroller().scrollBy(0, shift);
+            }
+            if (!heightChanged && !changed) {
+                break;
+            }
+        }
+        this.#placeholder.show(this.#server === null && this.#wasm.isEmpty()
+            ? this.selectionRect()
+            : null);
+    }
+    /** Size the canvas to the visible part of the document. Returns whether it changed. */
+    #syncSize() {
+        const visible = this.#visibleHeight();
+        const height = Math.max(0, Math.min(this.#height, visible));
+        const changed = Number.parseFloat(this.#canvas.style.height) !== height;
+        const scale = window.devicePixelRatio;
+        this.#spacer.style.height = `${Math.max(0, this.#height - height)}px`;
+        if (changed) {
+            this.#canvas.style.height = `${height}px`;
+        }
+        // Resizing to the same size is free: the editor compares first.
+        const box = this.#canvas.getBoundingClientRect();
+        this.#wasm.resize(this.#width, height, scale, devicePixels(box.left, box.width, scale), devicePixels(box.top, box.height, scale));
+        return changed;
+    }
+    /**
+     * Record new sizes and paint on the next frame. Resizing the canvas here
+     * would change an observed box inside the observer's own callback,
+     * which browsers report as a ResizeObserver loop.
+     */
+    #observe(entries) {
+        for (const entry of entries) {
+            if (entry.target === this.#element) {
+                this.#elementResized(entry);
+            }
+        }
+        this.#invalidate();
+    }
+    /** Wrap to the element's new content width. */
+    #elementResized(entry) {
+        this.#width = entry.contentBoxSize[0]?.inlineSize ??
+            entry.contentRect.width;
+    }
+    /** Snap to the pixel grid and border widths this browser uses at the current ratio. */
+    #snapToDevice() {
+        const document = this.#element.ownerDocument;
+        this.#wasm.setPixelGrid(pixelGrid(document, navigator.userAgent));
+        this.#wasm.setBorderScale(borderScale(document) ?? 0);
+    }
+    /**
+     * Measure again when the device pixel ratio changes (browser zoom, or a
+     * window moving to another screen): browsers round line metrics to
+     * device pixels, so line positions move with it.
+     */
+    #watchScale() {
+        const query = matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+        query.addEventListener("change", () => {
+            this.#measurer.forget();
+            this.#wasm.forgetMeasurements();
+            this.#snapToDevice();
+            this.#invalidate();
+            this.#watchScale();
+        }, { once: true, signal: this.#abort.signal });
+    }
+    /** The element whose scrolling moves the document: the editor itself, or the page. */
+    #scroller() {
+        const overflow = getComputedStyle(this.#element).overflowY;
+        return overflow === "auto" || overflow === "scroll"
+            ? this.#element
+            : window;
+    }
+    #visibleHeight() {
+        const scroller = this.#scroller();
+        return scroller === window
+            ? window.innerHeight
+            : this.#element.clientHeight;
+    }
+    /** The document coordinate at the canvas's top edge. */
+    #viewportTop() {
+        const canvas = this.#canvas.getBoundingClientRect();
+        const element = this.#element.getBoundingClientRect();
+        const scrolled = this.#scroller() === window ? 0 : this.#element.scrollTop;
+        return Math.max(0, canvas.top - element.top - this.#element.clientTop + scrolled);
+    }
+    /** Draw the caret while the editor has focus and accepts typing. */
+    #showCaret() {
+        this.#wasm.setFocused(this.#focused && this.#editable);
+        this.#restartBlink();
+        this.#invalidate();
+    }
+    #restartBlink() {
+        clearTimeout(this.#blink);
+        if (!this.#focused || !this.#editable) {
+            return;
+        }
+        let on = true;
+        const tick = () => {
+            on = !on;
+            this.#wasm.setCaretOn(on);
+            this.#invalidate();
+            this.#blink = window.setTimeout(tick, CARET_BLINK_MS);
+        };
+        this.#blink = window.setTimeout(tick, CARET_BLINK_MS);
+    }
+}
+/**
+ * The grid this browser snaps DOM text baselines and backgrounds to.
+ *
+ * Firefox and WebKit snap to device pixels. Chromium does too when it lays
+ * out in device units, as it does on real high-density screens; when it
+ * lays out in CSS units (as under device emulation), it snaps to whole CSS
+ * pixels and scales. Layout in device units can represent a box 1/64 of a
+ * device pixel wide, which CSS-unit layout rounds to zero.
+ */
+export function pixelGrid(document, userAgent) {
+    const scale = window.devicePixelRatio;
+    if (scale === 1 || detectBreaks(userAgent) !== "chromium") {
+        return "device";
+    }
+    const probe = document.createElement("div");
+    probe.style.cssText = `position:absolute;left:0;top:0;height:1px;width:${1 / (64 * scale)}px;visibility:hidden`;
+    document.body.append(probe);
+    const width = probe.getBoundingClientRect().width;
+    probe.remove();
+    return width > 0 ? "device" : "css";
+}
+/**
+ * How many units per CSS pixel this browser snaps border widths down to: the
+ * device pixel ratio, 1 when it lays out in CSS pixels, or `null` when it
+ * keeps exact widths. A 1.7 px border tells them apart.
+ */
+export function borderScale(document) {
+    const width = 1.7;
+    const outer = document.createElement("div");
+    outer.style.cssText =
+        `position:absolute;left:0;top:0;visibility:hidden;border-left:${width}px solid;width:10px;height:1px`;
+    const inner = document.createElement("div");
+    inner.style.cssText = "width:1px;height:1px";
+    outer.append(inner);
+    document.body.append(outer);
+    const used = inner.getBoundingClientRect().left -
+        outer.getBoundingClientRect().left;
+    outer.remove();
+    for (const scale of [window.devicePixelRatio, 1]) {
+        if (Math.abs(used - Math.max(1, Math.floor(width * scale)) / scale) <
+            BORDER_SNAP_TOLERANCE) {
+            return scale;
+        }
+    }
+    return null;
+}
+/**
+ * How many device pixels a box spanning `size` CSS px from `start` covers.
+ * Browsers snap a box's edges to device pixels, not its size, so at
+ * fractional ratios this can differ from `round(size * scale)` by one.
+ * Computed here rather than observed with `device-pixel-content-box`,
+ * which Firefox and Safari don't support, so the size is exact in every
+ * engine and only the element needs observing.
+ */
+function devicePixels(start, size, scale) {
+    return Math.max(0, Math.round((start + size) * scale) - Math.round(start * scale));
+}
+/** `[x, y, width, height]` as a rectangle, or `null` when empty. */
+function domRect(rect) {
+    const [x, y, width, height] = rect;
+    return x === undefined || y === undefined || width === undefined ||
+        height === undefined
+        ? null
+        : new DOMRect(x, y, width, height);
+}
+/** Resolve in the next animation frame. */
+function nextFrame() {
+    return new Promise((resolve) => requestAnimationFrame(() => resolve()));
+}
+/** The names of everything `extensions` register as `kind`: their commands or their queries. */
+function registeredNames(extensions, kind) {
+    return extensions.flatMap((extension) => extension[kind].map((spec) => spec.name));
+}
+/** The JSON options `WebEditor` reads, with each default filled in. */
+function wasmOptions(options) {
+    return JSON.stringify({
+        client: options.client ?? 1,
+        breaks: options.breaks ?? detectBreaks(navigator.userAgent),
+        overscan: options.overscan ?? window.innerHeight,
+        platform: options.platform ?? detectPlatform(navigator),
+        theme: options.theme ?? {},
+    });
+}
+/** The width of `element`'s content box, with its fraction. */
+function contentWidth(element) {
+    const style = getComputedStyle(element);
+    const insets = [
+        "borderLeftWidth",
+        "borderRightWidth",
+        "paddingLeft",
+        "paddingRight",
+    ];
+    return insets.reduce((width, inset) => width - Number.parseFloat(style[inset]), element.getBoundingClientRect().width);
+}
+/**
+ * The line-breaking tailoring of the browser running this code. CSS leaves
+ * the details to each engine and there is no feature test for them, so this
+ * reads the user agent.
+ */
+export function detectBreaks(userAgent) {
+    return /(Chrome|Chromium|Edg)\//.test(userAgent) ? "chromium" : "icu";
+}
+/** An object with one method per name, each calling `invoke`; see `@canvist/headless`. */
+function calls(names, invoke) {
+    const methods = Object.fromEntries(names.map((name) => [name, (args) => invoke(name, args)]));
+    return methods;
+}
+function encode(args) {
+    return args === undefined ? "null" : JSON.stringify(args);
+}