docxodus 9.1.0 → 9.2.0

package/dist/ribbon.js

@@ -0,0 +1,830 @@
+/**
+ * The ribbon surface — the full editor UI as a mountable module.
+ *
+ * `DocxEditor` (editor.ts) is the document engine: it owns the live `DocxSession`,
+ * the block wiring and every command. It has deliberately no chrome. This module is
+ * the chrome — the tabbed ribbon, the anchor rail, the table picker and the loading
+ * overlay — wired onto exactly that command surface and nothing else.
+ *
+ * It exists because the same UI was hand-written three times (the standalone demo,
+ * the GitHub Pages landing page, the compact iframe player) and drifted. Now the
+ * surface has one owner, and the three hosts differ only in how they obtain the
+ * WASM exports and how much of the chrome they turn on:
+ *
+ * ```ts
+ * // Host that already booted the .NET runtime itself:
+ * const ribbon = mountRibbon(document.querySelector("#app")!, { exports });
+ * ribbon.open(bytes, "contract.docx");
+ *
+ * // Host that wants one call and a CDN (see embed.ts):
+ * await createRibbonEditor("#app", "./contract.docx", { chrome: "auto" });
+ * ```
+ *
+ * Chrome density is measured from the ROOT ELEMENT, not the viewport: a narrow
+ * embed on a wide desktop page is narrow. See ribbon-chrome.ts for the layout.
+ */
+import { DocxEditor } from "./editor.js";
+import { RIBBON_CSS, RIBBON_HINT_HTML, RIBBON_HTML, RIBBON_STYLE_ATTR, RIBBON_STYLE_VERSION, } from "./ribbon-chrome.js";
+// Re-exported so the IIFE bundle built from this module (window.DocxodusEditor)
+// carries both the shell and the engine it wraps.
+export { DocxEditor } from "./editor.js";
+const DEFAULT_STAGES = [
+    {
+        title: "Booting .NET inside your browser",
+        copy: "Streaming the trimmed WebAssembly runtime. No document bytes are sent to a server.",
+        progress: 16,
+        label: "Loading engine",
+    },
+    {
+        title: "Opening the document",
+        copy: "Parsing OOXML parts, styles, numbering, tables, notes, and tracked revisions locally.",
+        progress: 54,
+        label: "Reading document",
+    },
+    {
+        title: "Wiring lossless editing",
+        copy: "Connecting every editable block to its native WordprocessingML anchor.",
+        progress: 84,
+        label: "Mounting editor",
+    },
+    {
+        title: "Your local editor is ready",
+        copy: "Select text, use the ribbon, switch page view, and save a real DOCX.",
+        progress: 100,
+        label: "Ready",
+    },
+];
+const DEFAULT_FEATURES = [
+    { number: "01", title: "Zero-upload architecture", copy: "Your source file and edits never leave this browser session." },
+    { number: "02", title: "Word-grade OOXML fidelity", copy: "Tables, numbering, footnotes, redlines, comments, and styles stay native." },
+    { number: "03", title: "Surgical editing", copy: "Formatting and text edits target real document anchors instead of flattening the file." },
+    { number: "04", title: "Lossless DOCX out", copy: "Undo, redo, edit, and save a Word document that remains a Word document." },
+];
+/** Every `data-dxr` name the template defines — the id-collision probe set. */
+const CONTROL_NAMES = [
+    "docname", "new", "file", "save", "undo", "redo", "status", "ribbon",
+    "fontsize", "fontsizes", "fontfamily", "style", "delblock",
+    "table", "hr", "hrThick", "hrDouble", "rulepos", "hrClear", "footnote", "endnote",
+    "paginated", "headerfooter", "pgfmt", "pgstart", "pgclear", "pagenum", "totalpages",
+    "railAnchor", "railBlocks", "railSession", "railOp",
+    "gridpicker", "gridcells", "gridlabel", "gridalign", "gridborderless",
+    "editor",
+    "loader", "loaderEyebrow", "loaderTitle", "loaderCopy", "loaderAd", "loaderNumber",
+    "loaderAdTitle", "loaderAdCopy", "loaderBar", "loaderLabel", "loaderMeta", "loaderRetry",
+];
+const GRID_ROWS = 8;
+const GRID_COLS = 10;
+let nextIdPrefixSeed = 0;
+/** Inject the ribbon stylesheet once per document (replacing an older version). */
+function ensureStyles(doc) {
+    const existing = doc.querySelector(`style[${RIBBON_STYLE_ATTR}]`);
+    if (existing?.getAttribute(RIBBON_STYLE_ATTR) === RIBBON_STYLE_VERSION)
+        return;
+    existing?.remove();
+    const style = doc.createElement("style");
+    style.setAttribute(RIBBON_STYLE_ATTR, RIBBON_STYLE_VERSION);
+    style.textContent = RIBBON_CSS;
+    (doc.head ?? doc.documentElement).appendChild(style);
+}
+/**
+ * Pick an id prefix. An explicit one always wins. Otherwise bare ids are used when
+ * every name is free on the page — which keeps the historical ids of the standalone
+ * demo intact — and a generated prefix is used the moment any of them is taken.
+ */
+function resolveIdPrefix(explicit, doc) {
+    if (explicit !== undefined)
+        return explicit;
+    if (!CONTROL_NAMES.some((name) => doc.getElementById(name)))
+        return "";
+    for (;;) {
+        const candidate = `dxr${++nextIdPrefixSeed}-`;
+        if (!CONTROL_NAMES.some((name) => doc.getElementById(candidate + name)))
+            return candidate;
+    }
+}
+function resolveContainer(container) {
+    if (typeof container !== "string")
+        return container;
+    const el = document.querySelector(container);
+    if (!el)
+        throw new Error(`Docxodus ribbon: no element matches "${container}"`);
+    return el;
+}
+/**
+ * Mount the ribbon surface into `container`.
+ *
+ * The chrome paints synchronously — including the loading overlay — so a host can
+ * mount before its WASM runtime exists, narrate the boot through `loader`, then call
+ * `setExports` and `open`.
+ */
+export function mountRibbon(container, options = {}) {
+    return new RibbonSurface(resolveContainer(container), options);
+}
+class RibbonSurface {
+    constructor(container, options) {
+        this.live = null;
+        this.density = "full";
+        this.destroyed = false;
+        this.featureTimer = null;
+        this.featureIndex = 0;
+        this.resizeObserver = null;
+        this.lastAnchorText = "";
+        this.selectionFrame = null;
+        this.options = options;
+        this.exports = options.exports ?? null;
+        this.documentName = options.documentName ?? "untitled.docx";
+        this.chromeMode = options.chrome ?? "auto";
+        this.headerFooter = options.headerFooter ?? false;
+        // false suppresses the overlay; true/omitted takes the defaults; an object rewords it.
+        this.loaderOptions =
+            options.loader === false
+                ? null
+                : typeof options.loader === "object"
+                    ? options.loader
+                    : {};
+        this.stages = this.loaderOptions?.stages ?? DEFAULT_STAGES;
+        this.features = this.loaderOptions?.features ?? DEFAULT_FEATURES;
+        const doc = container.ownerDocument ?? document;
+        ensureStyles(doc);
+        this.idPrefix = resolveIdPrefix(options.idPrefix, doc);
+        const root = doc.createElement("div");
+        root.className = "dxr";
+        root.dataset.state = "idle";
+        root.innerHTML = RIBBON_HTML;
+        for (const el of Array.from(root.querySelectorAll("[data-dxr]"))) {
+            el.id = this.idPrefix + el.dataset.dxr;
+        }
+        for (const el of Array.from(root.querySelectorAll("[data-dxr-list]"))) {
+            el.setAttribute("list", this.idPrefix + el.dataset.dxrList);
+        }
+        container.replaceChildren(root);
+        this.element = root;
+        this.surface = this.require("editor");
+        this.applyStaticOptions();
+        this.buildGrid();
+        this.wire();
+        this.applyChrome();
+        this.loader = this.createLoaderController();
+        if (this.loaderOptions)
+            this.loader.show();
+        // Coalesced to one frame: selectionchange fires per keystroke and continuously
+        // during a drag, and the sync reads computed styles.
+        this.onSelectionChange = () => {
+            if (this.selectionFrame != null)
+                cancelAnimationFrame(this.selectionFrame);
+            this.selectionFrame = requestAnimationFrame(() => {
+                this.selectionFrame = null;
+                this.syncSelection();
+            });
+        };
+        doc.addEventListener("selectionchange", this.onSelectionChange);
+        this.onDocumentMouseDown = (event) => this.maybeClosePicker(event);
+        doc.addEventListener("mousedown", this.onDocumentMouseDown);
+        if (this.chromeMode === "auto" && typeof ResizeObserver !== "undefined") {
+            this.resizeObserver = new ResizeObserver(() => this.applyChrome());
+            this.resizeObserver.observe(root);
+        }
+    }
+    // ── element lookup ──────────────────────────────────────────────────────────
+    control(name) {
+        return this.element.querySelector(`[data-dxr="${name}"]`);
+    }
+    require(name) {
+        const el = this.control(name);
+        if (!el)
+            throw new Error(`Docxodus ribbon: template is missing "${name}"`);
+        return el;
+    }
+    // ── mount-time configuration ────────────────────────────────────────────────
+    applyStaticOptions() {
+        const hintEl = this.element.querySelector("[data-dxr-hint]");
+        if (hintEl) {
+            if (this.options.hint === false)
+                hintEl.remove();
+            else
+                hintEl.innerHTML = typeof this.options.hint === "string" ? this.options.hint : RIBBON_HINT_HTML;
+        }
+        if (this.options.rail === false) {
+            this.element.querySelector("[data-dxr-rail]")?.remove();
+        }
+        if (this.options.fileActions === false) {
+            this.element.querySelector("[data-dxr-files]")?.remove();
+        }
+        if (!this.loaderOptions)
+            this.control("loader")?.remove();
+        this.require("docname").textContent = this.documentName;
+        (this.require("paginated")).checked = this.options.paginated ?? false;
+        (this.require("headerfooter")).checked = this.headerFooter;
+        this.surface.dataset.view = this.options.paginated ? "paginated" : "continuous";
+    }
+    buildGrid() {
+        const cells = this.require("gridcells");
+        const fragment = document.createDocumentFragment();
+        for (let r = 0; r < GRID_ROWS; r++) {
+            for (let c = 0; c < GRID_COLS; c++) {
+                const cell = document.createElement("div");
+                cell.dataset.r = String(r);
+                cell.dataset.c = String(c);
+                fragment.appendChild(cell);
+            }
+        }
+        cells.replaceChildren(fragment);
+    }
+    // ── chrome density ──────────────────────────────────────────────────────────
+    get chrome() {
+        return this.density;
+    }
+    setChrome(mode) {
+        this.chromeMode = mode;
+        if (mode === "auto" && !this.resizeObserver && typeof ResizeObserver !== "undefined") {
+            this.resizeObserver = new ResizeObserver(() => this.applyChrome());
+            this.resizeObserver.observe(this.element);
+        }
+        this.applyChrome();
+    }
+    applyChrome() {
+        const breakpoint = this.options.compactBreakpoint ?? 720;
+        const width = this.element.clientWidth || this.element.getBoundingClientRect().width;
+        const next = this.chromeMode === "auto"
+            // Width 0 means the root is not laid out yet (display:none, or measured before
+            // first paint). Assume the roomier layout and let the observer correct it.
+            ? (width > 0 && width < breakpoint ? "compact" : "full")
+            : this.chromeMode;
+        if (next === this.density && this.element.dataset.chrome)
+            return;
+        this.density = next;
+        this.element.dataset.chrome = next;
+        // The picker's absolute position is meaningless after a density flip.
+        this.closePicker();
+    }
+    // ── status ──────────────────────────────────────────────────────────────────
+    /** Publish the lifecycle on the root, where CSS and host pages can key off it. */
+    setState(state) {
+        this.element.dataset.state = state;
+    }
+    setStatus(text) {
+        const el = this.control("status");
+        if (el)
+            el.textContent = text;
+        this.options.onStatus?.(text);
+    }
+    // ── document lifecycle ──────────────────────────────────────────────────────
+    get editor() {
+        return this.live;
+    }
+    setExports(exports) {
+        this.exports = exports;
+    }
+    open(bytes, name) {
+        if (!this.exports)
+            throw new Error("Docxodus ribbon: WASM exports are not set yet");
+        if (this.live) {
+            try {
+                this.live.close();
+            }
+            catch {
+                /* already closed */
+            }
+            this.live = null;
+        }
+        if (name)
+            this.documentName = name;
+        this.require("docname").textContent = this.documentName;
+        const paginated = this.require("paginated").checked;
+        this.surface.dataset.view = paginated ? "paginated" : "continuous";
+        this.surface.replaceChildren();
+        const started = performance.now();
+        this.live = DocxEditor.open(this.surface, bytes, this.exports, {
+            cssPrefix: this.options.cssPrefix,
+            fabricateClasses: this.options.fabricateClasses,
+            editable: this.options.editable,
+            scale: this.options.scale,
+            onEdit: this.options.onEdit,
+            paginated,
+            headerFooter: this.headerFooter,
+        });
+        this.require("save").disabled = false;
+        this.require("ribbon").setAttribute("aria-disabled", "false");
+        this.setState("ready");
+        this.setStatus(`Rendered in ${Math.round(performance.now() - started)} ms`);
+        this.syncPageNumbering();
+        this.refreshRailCounts();
+        this.refreshRailAnchor();
+        this.options.onOpen?.(this.live);
+        return this.live;
+    }
+    openBlank(name = "untitled.docx") {
+        if (!this.exports)
+            throw new Error("Docxodus ribbon: WASM exports are not set yet");
+        return this.open(this.exports.DocxSessionBridge.CreateBlankDocx(), name);
+    }
+    save() {
+        return this.live ? this.live.save() : null;
+    }
+    download(name) {
+        const bytes = this.save();
+        if (!bytes)
+            return;
+        const filename = name ?? this.documentName ?? "edited.docx";
+        if (this.options.onSave) {
+            this.options.onSave(bytes, filename);
+            return;
+        }
+        const url = URL.createObjectURL(new Blob([bytes], {
+            type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+        }));
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = filename;
+        link.click();
+        setTimeout(() => URL.revokeObjectURL(url), 1000);
+        this.setStatus(`Saved ${filename}`);
+    }
+    destroy() {
+        if (this.destroyed)
+            return;
+        this.destroyed = true;
+        const doc = this.element.ownerDocument ?? document;
+        doc.removeEventListener("selectionchange", this.onSelectionChange);
+        doc.removeEventListener("mousedown", this.onDocumentMouseDown);
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = null;
+        if (this.selectionFrame != null)
+            cancelAnimationFrame(this.selectionFrame);
+        this.selectionFrame = null;
+        this.stopRotation();
+        try {
+            this.live?.close();
+        }
+        catch {
+            /* already closed */
+        }
+        this.live = null;
+        this.element.remove();
+    }
+    // ── command plumbing ────────────────────────────────────────────────────────
+    /**
+     * Run one ribbon command and report its real cost on the rail.
+     *
+     * Every control routes through here, which is what makes the rail's "last op"
+     * an honest measurement rather than a label the surface makes up.
+     */
+    run(label, fn) {
+        if (!this.live)
+            return;
+        const started = performance.now();
+        try {
+            fn();
+        }
+        finally {
+            const ms = performance.now() - started;
+            const el = this.control("railOp");
+            if (el)
+                el.textContent = `${label} ${ms >= 1000 ? `${(ms / 1000).toFixed(2)} s` : `${Math.round(ms)} ms`}`;
+            this.options.onCommand?.(label, ms);
+            this.refreshRailCounts();
+            this.refreshRailAnchor();
+        }
+    }
+    /** Format controls must not steal the document selection they are about to act on. */
+    keepSelection(el) {
+        el.addEventListener("mousedown", (event) => event.preventDefault());
+    }
+    wire() {
+        const ribbon = this.require("ribbon");
+        for (const tab of Array.from(this.element.querySelectorAll(".dxr-tab"))) {
+            this.keepSelection(tab);
+            tab.addEventListener("click", () => this.selectTab(tab.dataset.tab ?? "home"));
+        }
+        const delegate = (selector, label, fn) => {
+            for (const el of Array.from(ribbon.querySelectorAll(selector))) {
+                this.keepSelection(el);
+                el.addEventListener("click", () => this.run(label(el), () => fn(el)));
+            }
+        };
+        delegate("button[data-cmd]", (b) => b.dataset.cmd, (b) => this.live.format(b.dataset.cmd));
+        delegate("button[data-align]", (b) => `align ${b.dataset.align}`, (b) => this.live.setAlignment(b.dataset.align));
+        delegate("button[data-indent]", () => "indent", (b) => this.live.indent(parseInt(b.dataset.indent ?? "720", 10)));
+        delegate("button[data-list]", (b) => `list ${b.dataset.list}`, (b) => this.live.toggleList(b.dataset.list));
+        delegate("button[data-pagebreak]", () => "page break", () => this.live.pageBreakBefore(true));
+        delegate('.dxr-panel[data-panel="table"] button[data-tt]', (b) => b.dataset.tt, (b) => {
+            const ops = {
+                rowAbove: () => this.live.insertTableRow("above"),
+                rowBelow: () => this.live.insertTableRow("below"),
+                colLeft: () => this.live.insertTableColumn("left"),
+                colRight: () => this.live.insertTableColumn("right"),
+                delRow: () => this.live.deleteTableRow(),
+                delCol: () => this.live.deleteTableColumn(),
+            };
+            ops[b.dataset.tt ?? ""]?.();
+        });
+        const rulepos = () => (this.require("rulepos").value === "above" ? "above" : "below");
+        const simple = [
+            ["undo", "undo", () => this.live.undo()],
+            ["redo", "redo", () => this.live.redo()],
+            ["hr", "rule", () => this.live.insertHorizontalRule(12, "single", rulepos())],
+            ["hrThick", "thick rule", () => this.live.insertHorizontalRule(24, "single", rulepos())],
+            ["hrDouble", "double rule", () => this.live.insertHorizontalRule(12, "double", rulepos())],
+            ["hrClear", "clear border", () => this.live.clearParagraphBorders()],
+            ["delblock", "delete block", () => this.live.deleteBlock()],
+            ["footnote", "footnote", () => this.live.insertFootnote()],
+            ["endnote", "endnote", () => this.live.insertEndnote()],
+            ["pagenum", "page number", () => this.live.insertPageNumber("currentPage")],
+            ["totalpages", "total pages", () => this.live.insertPageNumber("totalPages")],
+        ];
+        for (const [name, label, fn] of simple) {
+            const el = this.control(name);
+            if (!el)
+                continue;
+            this.keepSelection(el);
+            el.addEventListener("click", () => this.run(label, fn));
+        }
+        // Font size: `change` only (it fires on Enter and on blur). Binding keydown as
+        // well fired twice and stacked two undo snapshots for one size change.
+        const fontsize = this.require("fontsize");
+        fontsize.addEventListener("change", () => {
+            const pts = parseFloat(fontsize.value);
+            if (this.live && pts > 0)
+                this.run("font size", () => this.live.setFontSize(pts));
+        });
+        fontsize.addEventListener("keydown", (event) => {
+            if (event.key === "Enter") {
+                event.preventDefault();
+                fontsize.blur();
+            }
+        });
+        const fontfamily = this.require("fontfamily");
+        fontfamily.addEventListener("change", () => {
+            if (this.live && fontfamily.value)
+                this.run("font family", () => this.live.setFontFamily(fontfamily.value));
+            fontfamily.value = "";
+        });
+        const style = this.require("style");
+        style.addEventListener("change", () => {
+            if (this.live && style.value)
+                this.run("style", () => this.live.setParagraphStyle(style.value));
+            style.value = "";
+        });
+        this.wireFileActions();
+        this.wireLayout();
+        this.wirePicker();
+    }
+    wireFileActions() {
+        const file = this.control("file");
+        file?.addEventListener("change", async () => {
+            const chosen = file.files?.[0];
+            if (!chosen)
+                return;
+            this.setStatus(`Loading ${chosen.name}…`);
+            this.open(new Uint8Array(await chosen.arrayBuffer()), chosen.name);
+            // Reset so re-picking the same file fires `change` again.
+            file.value = "";
+        });
+        this.control("new")?.addEventListener("click", () => {
+            if (this.exports)
+                this.openBlank("untitled.docx");
+        });
+        this.control("save")?.addEventListener("click", () => this.download());
+    }
+    wireLayout() {
+        // Pagination toggles re-render the LIVE session, so edits survive the switch.
+        const paginated = this.require("paginated");
+        paginated.addEventListener("change", () => {
+            this.surface.dataset.view = paginated.checked ? "paginated" : "continuous";
+            if (!this.live)
+                return;
+            this.run(paginated.checked ? "page view" : "continuous view", () => this.live.setPaginated(paginated.checked));
+        });
+        // The band region is chosen at open time, so toggling it re-opens the LIVE
+        // session's bytes rather than the originally loaded file — edits so far survive.
+        const headerFooter = this.require("headerfooter");
+        headerFooter.addEventListener("change", () => {
+            this.headerFooter = headerFooter.checked;
+            if (!this.live)
+                return;
+            this.open(this.live.save(), this.documentName);
+        });
+        const pgfmt = this.require("pgfmt");
+        pgfmt.addEventListener("change", () => {
+            if (!this.live || !pgfmt.value)
+                return;
+            this.run("page format", () => this.live.setPageNumbering({ format: pgfmt.value }));
+            this.syncPageNumbering();
+        });
+        const pgstart = this.require("pgstart");
+        pgstart.addEventListener("change", () => {
+            const value = parseInt(pgstart.value, 10);
+            if (!this.live || !(value > 0))
+                return;
+            this.run("page start", () => this.live.setPageNumbering({ start: value }));
+            this.syncPageNumbering();
+        });
+        this.control("pgclear")?.addEventListener("click", () => {
+            this.run("clear numbering", () => this.live.clearPageNumbering());
+            this.syncPageNumbering();
+        });
+    }
+    /** The bands own the same setting and read the live session, so both stay in step. */
+    syncPageNumbering() {
+        if (!this.live)
+            return;
+        const numbering = this.live.pageNumbering() ?? {};
+        this.require("pgfmt").value = numbering.format ?? "";
+        this.require("pgstart").value = numbering.start != null ? String(numbering.start) : "";
+    }
+    // ── table size picker ───────────────────────────────────────────────────────
+    wirePicker() {
+        const button = this.require("table");
+        const picker = this.require("gridpicker");
+        const cells = this.require("gridcells");
+        const highlight = (rows, cols) => {
+            for (const cell of Array.from(cells.children)) {
+                const on = Number(cell.dataset.r) < rows && Number(cell.dataset.c) < cols;
+                if (on)
+                    cell.setAttribute("data-on", "");
+                else
+                    cell.removeAttribute("data-on");
+            }
+            this.require("gridlabel").textContent = `${rows} × ${cols}`;
+        };
+        // `pointerover` covers mouse hover; touch users get the same feedback from the
+        // press itself, since a tap fires pointerover immediately before pointerdown.
+        cells.addEventListener("pointerover", (event) => {
+            const cell = event.target.closest("[data-r]");
+            if (cell)
+                highlight(Number(cell.dataset.r) + 1, Number(cell.dataset.c) + 1);
+        });
+        cells.addEventListener("mousedown", (event) => {
+            const cell = event.target.closest("[data-r]");
+            if (!cell || !this.live)
+                return;
+            event.preventDefault();
+            const rows = Number(cell.dataset.r) + 1;
+            const cols = Number(cell.dataset.c) + 1;
+            this.closePicker();
+            this.run(`table ${rows}×${cols}`, () => this.live.insertTable(rows, cols, {
+                borderless: this.require("gridborderless").checked,
+                cellAlignment: this.require("gridalign").value,
+            }));
+        });
+        this.keepSelection(button);
+        button.addEventListener("click", () => {
+            if (!this.live)
+                return;
+            if (picker.hasAttribute("data-open")) {
+                this.closePicker();
+                return;
+            }
+            highlight(0, 0);
+            picker.setAttribute("data-open", "");
+            // Compact chrome docks the picker to the viewport bottom (see the stylesheet),
+            // so only the roomy layout needs it positioned under its button.
+            if (this.density === "full") {
+                const rect = button.getBoundingClientRect();
+                const host = this.element.getBoundingClientRect();
+                picker.style.left = `${rect.left - host.left}px`;
+                picker.style.top = `${rect.bottom - host.top + 5}px`;
+            }
+        });
+    }
+    closePicker() {
+        this.control("gridpicker")?.removeAttribute("data-open");
+    }
+    maybeClosePicker(event) {
+        const picker = this.control("gridpicker");
+        if (!picker?.hasAttribute("data-open"))
+            return;
+        const target = event.target;
+        if (picker.contains(target) || this.control("table")?.contains(target))
+            return;
+        this.closePicker();
+    }
+    // ── tabs ────────────────────────────────────────────────────────────────────
+    selectTab(name) {
+        for (const tab of Array.from(this.element.querySelectorAll(".dxr-tab"))) {
+            tab.setAttribute("aria-selected", String(tab.dataset.tab === name));
+        }
+        for (const panel of Array.from(this.element.querySelectorAll(".dxr-panel"))) {
+            if (panel.dataset.panel === name)
+                panel.setAttribute("data-active", "");
+            else
+                panel.removeAttribute("data-active");
+        }
+        if (name === "layout")
+            this.syncPageNumbering();
+    }
+    // ── selection-driven state ──────────────────────────────────────────────────
+    selectionElement() {
+        const selection = (this.element.ownerDocument ?? document).getSelection();
+        const node = selection?.anchorNode ?? null;
+        if (!node)
+            return null;
+        const el = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
+        // Ignore selections belonging to another editor (or another ribbon) on the page.
+        return el && this.surface.contains(el) ? el : null;
+    }
+    syncSelection() {
+        if (!this.live || this.destroyed)
+            return;
+        const el = this.selectionElement();
+        const state = this.live.queryFormatState();
+        for (const button of Array.from(this.element.querySelectorAll("button[data-cmd]"))) {
+            button.classList.toggle("dxr-on", !!state[button.dataset.cmd]);
+        }
+        // Reflect the caret's font size, unless the field itself is being edited.
+        const fontsize = this.control("fontsize");
+        if (el && fontsize && (this.element.ownerDocument ?? document).activeElement !== fontsize) {
+            const px = parseFloat(getComputedStyle(el).fontSize);
+            if (px)
+                fontsize.value = String(Math.round(px * 0.75 * 2) / 2);
+        }
+        // Reveal the contextual Table tab only while the caret is inside a table.
+        const inTable = !!el?.closest("table");
+        const tableTab = this.element.querySelector('.dxr-tab[data-tab="table"]');
+        if (tableTab) {
+            tableTab.hidden = !inTable;
+            if (!inTable && tableTab.getAttribute("aria-selected") === "true")
+                this.selectTab("home");
+        }
+        this.refreshRailAnchor();
+    }
+    /** Scope is read from where the block lives, which is exactly what the anchor encodes. */
+    scopeOf(el) {
+        const band = el.closest(".docx-hf-band");
+        if (band)
+            return band.getAttribute("data-hf-band") === "header" ? "hdr" : "ftr";
+        if (el.closest(".footnotes"))
+            return "fn";
+        if (el.closest(".endnotes"))
+            return "en";
+        return "body";
+    }
+    kindOf(el) {
+        if (/^H[1-6]$/.test(el.tagName))
+            return "h";
+        if (el.tagName === "LI" || el.hasAttribute("data-list-marker") || el.querySelector("[data-list-marker]")) {
+            return "li";
+        }
+        return "p";
+    }
+    /**
+     * Block count and session handle — an O(blocks) query, so it runs only when
+     * something could have changed them (a command, or a document opening), never on
+     * the selectionchange path that fires per keystroke.
+     */
+    refreshRailCounts() {
+        const blocks = this.control("railBlocks");
+        if (!blocks)
+            return; // rail disabled
+        blocks.textContent = this.live ? String(this.surface.querySelectorAll("[data-anchor]").length) : "—";
+        const session = this.control("railSession");
+        if (session)
+            session.textContent = this.live ? `#${this.live.sessionHandle}` : "—";
+    }
+    /** The focused anchor — cheap, and the only part the caret can change. */
+    refreshRailAnchor() {
+        const anchorEl = this.control("railAnchor");
+        if (!anchorEl)
+            return;
+        const block = this.selectionElement()?.closest("[data-anchor]") ?? null;
+        if (!block) {
+            anchorEl.textContent = this.live ? "none" : "—";
+            this.lastAnchorText = "";
+            return;
+        }
+        const unid = block.getAttribute("data-anchor") ?? "";
+        const text = `${this.kindOf(block)}:${this.scopeOf(block)}:${unid.slice(0, 10)}…`;
+        if (text === this.lastAnchorText)
+            return;
+        anchorEl.textContent = text;
+        this.lastAnchorText = text;
+        anchorEl.classList.remove("dxr-flash");
+        void anchorEl.offsetWidth;
+        anchorEl.classList.add("dxr-flash");
+    }
+    // ── loading overlay ─────────────────────────────────────────────────────────
+    createLoaderController() {
+        const overlay = this.control("loader");
+        if (!overlay) {
+            const noop = () => { };
+            return { show: noop, stage: noop, progress: noop, done: noop, fail: noop };
+        }
+        const options = this.loaderOptions ?? {};
+        const eyebrow = this.control("loaderEyebrow");
+        if (eyebrow && options.eyebrow)
+            eyebrow.textContent = options.eyebrow;
+        const meta = this.control("loaderMeta");
+        if (meta && options.meta)
+            meta.textContent = options.meta;
+        this.control("loaderRetry")?.addEventListener("click", () => {
+            if (options.onRetry)
+                options.onRetry();
+            else
+                location.reload();
+        });
+        if (this.features.length === 0)
+            this.control("loaderAd")?.remove();
+        const setProgress = (percent, label) => {
+            const bar = this.control("loaderBar");
+            if (bar)
+                bar.style.width = `${Math.max(0, Math.min(100, percent))}%`;
+            if (label) {
+                const el = this.control("loaderLabel");
+                if (el)
+                    el.textContent = label;
+            }
+        };
+        return {
+            show: () => {
+                overlay.hidden = false;
+                overlay.removeAttribute("data-done");
+                overlay.removeAttribute("data-error");
+                this.setState("loading");
+                this.showFeature(0);
+                this.startRotation();
+                this.loaderStage(0);
+            },
+            stage: (step) => this.loaderStage(step),
+            progress: setProgress,
+            done: () => {
+                this.stopRotation();
+                this.setState("ready");
+                // Two-step so the fade actually plays before the overlay leaves the layout.
+                setTimeout(() => overlay.setAttribute("data-done", ""), 420);
+                setTimeout(() => {
+                    overlay.hidden = true;
+                }, 1050);
+            },
+            fail: (error) => {
+                this.stopRotation();
+                this.setState("error");
+                overlay.hidden = false;
+                overlay.setAttribute("data-error", "");
+                overlay.removeAttribute("data-done");
+                const message = error instanceof Error ? error.message : String(error);
+                const title = this.control("loaderTitle");
+                if (title)
+                    title.textContent = "The local engine did not start";
+                const copy = this.control("loaderCopy");
+                if (copy)
+                    copy.textContent = message.slice(0, 220);
+                setProgress(100, "Load failed");
+                this.setStatus(message.slice(0, 180));
+            },
+        };
+    }
+    loaderStage(step) {
+        const stage = typeof step === "number" ? this.stages[Math.max(0, Math.min(this.stages.length - 1, step))] : step;
+        if (!stage)
+            return;
+        const title = this.control("loaderTitle");
+        if (title && stage.title)
+            title.textContent = stage.title;
+        const copy = this.control("loaderCopy");
+        if (copy && stage.copy)
+            copy.textContent = stage.copy;
+        const bar = this.control("loaderBar");
+        if (bar && stage.progress != null)
+            bar.style.width = `${stage.progress}%`;
+        const label = this.control("loaderLabel");
+        if (label && stage.label)
+            label.textContent = stage.label;
+    }
+    showFeature(index) {
+        const feature = this.features[index];
+        if (!feature)
+            return;
+        const card = this.control("loaderAd");
+        const number = this.control("loaderNumber");
+        const title = this.control("loaderAdTitle");
+        const copy = this.control("loaderAdCopy");
+        if (number)
+            number.textContent = feature.number;
+        if (title)
+            title.textContent = feature.title;
+        if (copy)
+            copy.textContent = feature.copy;
+        if (card) {
+            card.removeAttribute("data-swap");
+            void card.offsetWidth;
+            card.setAttribute("data-swap", "");
+        }
+    }
+    startRotation() {
+        this.stopRotation();
+        if (this.features.length < 2)
+            return;
+        const every = this.loaderOptions?.rotateMs ?? 1750;
+        this.featureTimer = setInterval(() => {
+            this.featureIndex = (this.featureIndex + 1) % this.features.length;
+            this.showFeature(this.featureIndex);
+        }, every);
+    }
+    stopRotation() {
+        if (this.featureTimer == null)
+            return;
+        clearInterval(this.featureTimer);
+        this.featureTimer = null;
+    }
+}
+//# sourceMappingURL=ribbon.js.map