docxodus 9.1.0 → 9.2.0

package/dist/embed.bundle.js

@@ -3045,6 +3045,28 @@ function diffUnits(oldUnids, newUnits) {
   }
   while (i < n) removed.push(i++);
   while (j < m) added.push(j++);
+  const bareUnid = (token) => {
+    const bar = token.indexOf("|");
+    return bar < 0 ? token : token.slice(0, bar);
+  };
+  const substituted = [];
+  const usedRemoved = /* @__PURE__ */ new Set();
+  const removedByUnid = /* @__PURE__ */ new Map();
+  for (const oi of removed) {
+    const u = bareUnid(oldUnids[oi]);
+    (removedByUnid.get(u) ?? removedByUnid.set(u, []).get(u)).push(oi);
+  }
+  const unmatchedAdded = [];
+  for (const nj of added) {
+    const candidates = removedByUnid.get(bareUnid(newUnids[nj]));
+    const oi = candidates?.find((i2) => !usedRemoved.has(i2));
+    if (oi !== void 0) {
+      substituted.push({ oldIndex: oi, newIndex: nj });
+      usedRemoved.add(oi);
+    } else {
+      unmatchedAdded.push(nj);
+    }
+  }
   const keptBeforeOld = (oi) => {
     let c = 0;
     for (const v of keep.values()) if (v < oi) c++;
@@ -3055,9 +3077,7 @@ function diffUnits(oldUnids, newUnits) {
     for (const k of keep.keys()) if (k < nj) c++;
     return c;
   };
-  const substituted = [];
-  const usedRemoved = /* @__PURE__ */ new Set();
-  for (const nj of added) {
+  for (const nj of unmatchedAdded) {
     const target = keptBeforeNew(nj);
     for (const oi of removed) {
       if (usedRemoved.has(oi)) continue;
@@ -3261,6 +3281,33 @@ function contentPositionIn(el, offset) {
   if (lastText) return { node: lastText, offset: (lastText.textContent ?? "").length };
   return { node: el, offset: el.childNodes.length };
 }
+function caretPointFromClient(doc, clientX, clientY) {
+  const caretDoc = doc;
+  const position = caretDoc.caretPositionFromPoint?.(clientX, clientY);
+  if (position) return { node: position.offsetNode, offset: position.offset };
+  const range = caretDoc.caretRangeFromPoint?.(clientX, clientY);
+  return range ? { node: range.startContainer, offset: range.startOffset } : null;
+}
+function setSelectionBetween(anchor, focus) {
+  const sel = typeof window !== "undefined" ? window.getSelection() : null;
+  if (!sel || !anchor.node.isConnected || !focus.node.isConnected) return false;
+  try {
+    const probe = document.createRange();
+    probe.setStart(anchor.node, anchor.offset);
+    probe.collapse(true);
+    const focusIsBefore = probe.comparePoint(focus.node, focus.offset) < 0;
+    const range = document.createRange();
+    const start = focusIsBefore ? focus : anchor;
+    const end = focusIsBefore ? anchor : focus;
+    range.setStart(start.node, start.offset);
+    range.setEnd(end.node, end.offset);
+    sel.removeAllRanges();
+    sel.addRange(range);
+    return true;
+  } catch {
+    return false;
+  }
+}
 function placeCaretAtOffset(el, offset) {
   const sel = typeof window !== "undefined" ? window.getSelection() : null;
   if (!sel) return;
@@ -3426,6 +3473,15 @@ var DocxEditor = class _DocxEditor {
      * block, and cleared when a caret is collapsed inside a block (so it never goes stale).
      */
     this.lastSelection = null;
+    /**
+     * Stable bookmark for a selection spanning independent editable blocks. Native controls such as
+     * a font-size combobox can take focus and collapse the live DOM selection; block ids + content
+     * offsets let the command restore that same range before applying. This is the multi-block
+     * counterpart to lastSelection above.
+     */
+    this.lastCrossBlockSelection = null;
+    /** State for the mouse-selection bridge between independent contenteditable block hosts. */
+    this.dragSelection = null;
     /** The docked header/footer bands, when `options.headerFooter` is on. */
     this.region = null;
     /** Why the last reconcile() fell back to a full remount (null = it patched). For
@@ -3437,24 +3493,128 @@ var DocxEditor = class _DocxEditor {
       const sel = typeof window !== "undefined" ? window.getSelection() : null;
       if (!sel || sel.rangeCount === 0) return;
       const range = sel.getRangeAt(0);
-      const block = this.editableBlockOf(range.commonAncestorContainer);
+      const startBlock = this.editableBlockOf(range.startContainer);
+      const endBlock = this.editableBlockOf(range.endContainer);
+      const block = startBlock ?? endBlock;
       if (!block) return;
-      const unid = block.getAttribute("data-anchor");
-      if (!unid) return;
       if (range.collapsed) {
         this.lastSelection = null;
+        this.lastCrossBlockSelection = null;
         return;
       }
+      if (startBlock && endBlock && startBlock !== endBlock && this.ownerRoot(startBlock) === this.ownerRoot(endBlock)) {
+        const startUnid = startBlock.getAttribute("data-anchor");
+        const endUnid = endBlock.getAttribute("data-anchor");
+        if (startUnid && endUnid) {
+          this.lastSelection = null;
+          this.lastCrossBlockSelection = {
+            startUnid,
+            startOffset: contentOffsetOf(startBlock, range.startContainer, range.startOffset),
+            endUnid,
+            endOffset: contentOffsetOf(endBlock, range.endContainer, range.endOffset)
+          };
+        }
+        return;
+      }
+      const unid = block.getAttribute("data-anchor");
+      if (!unid) return;
+      this.lastCrossBlockSelection = null;
       const span = selectionSpanIn(block);
       if (span) this.lastSelection = { unid, span };
     };
+    /** Start tracking a normal primary-button text drag inside one editable block. */
+    this.onMouseDown = (event) => {
+      if (this.closed || !this.options.editable || event.button !== 0) return;
+      const target = event.target instanceof Node ? event.target : null;
+      const origin = this.editableBlockOf(target);
+      if (!origin || isInMarker(target)) return;
+      const anchor = caretPointFromClient(document, event.clientX, event.clientY);
+      if (!anchor || this.editableBlockOf(anchor.node) !== origin) return;
+      this.clearDragSelection();
+      this.dragSelection = {
+        anchor,
+        origin,
+        crossedBlockBoundary: false,
+        focus: null,
+        frame: null
+      };
+    };
+    /**
+     * Browsers fence native mouse selection at a contenteditable host boundary. Once a drag reaches
+     * another block in the same OOXML story, take over just that gesture and create the cross-block
+     * Selection the editor's existing multi-block command path consumes. Intra-block selection stays
+     * entirely native, and separate hosts remain intact for safe per-anchor commits.
+     */
+    this.onMouseMove = (event) => {
+      const drag = this.dragSelection;
+      if (!drag) return;
+      if ((event.buttons & 1) === 0) {
+        this.clearDragSelection();
+        return;
+      }
+      const focus = caretPointFromClient(document, event.clientX, event.clientY);
+      if (!focus || isInMarker(focus.node)) return;
+      const focusBlock = this.editableBlockOf(focus.node);
+      if (!focusBlock || this.ownerRoot(focusBlock) !== this.ownerRoot(drag.origin)) return;
+      if (focusBlock !== drag.origin) drag.crossedBlockBoundary = true;
+      if (!drag.crossedBlockBoundary) return;
+      event.preventDefault();
+      this.queueDragSelection(drag, focus);
+    };
+    /** Commit the final cross-block endpoint before releasing the gesture state. */
+    this.onMouseUp = (event) => {
+      const drag = this.dragSelection;
+      if (!drag) return;
+      if (drag.crossedBlockBoundary) {
+        const focus = caretPointFromClient(document, event.clientX, event.clientY);
+        const focusBlock = focus ? this.editableBlockOf(focus.node) : null;
+        if (focus && focusBlock && this.ownerRoot(focusBlock) === this.ownerRoot(drag.origin)) {
+          event.preventDefault();
+          setSelectionBetween(drag.anchor, focus);
+        }
+      }
+      this.clearDragSelection();
+    };
     this.container = container;
     this.exports = exports;
     this.handle = handle;
     this.options = options;
     this.editRoot = container;
-    if (typeof document !== "undefined")
+    if (typeof document !== "undefined") {
       document.addEventListener("selectionchange", this.onSelectionChange);
+      document.addEventListener("mousedown", this.onMouseDown, true);
+      document.addEventListener("mousemove", this.onMouseMove, true);
+      document.addEventListener("mouseup", this.onMouseUp, true);
+    }
+  }
+  /**
+   * Apply the latest cross-block endpoint after the browser finishes its native mousemove
+   * selection update. Firefox rewrites Selection back into the originating contenteditable after
+   * event dispatch even when mousemove is cancelled; writing in requestAnimationFrame wins that
+   * race and happens before paint. Coalescing also avoids rebuilding a Range for every raw pointer
+   * event when the mouse is moving faster than the display can refresh.
+   */
+  queueDragSelection(drag, focus) {
+    drag.focus = focus;
+    if (drag.frame !== null) return;
+    const view = this.container.ownerDocument.defaultView;
+    if (!view) {
+      setSelectionBetween(drag.anchor, focus);
+      return;
+    }
+    drag.frame = view.requestAnimationFrame(() => {
+      drag.frame = null;
+      if (this.dragSelection !== drag || !drag.focus) return;
+      setSelectionBetween(drag.anchor, drag.focus);
+    });
+  }
+  /** Cancel a queued repaint and discard the current gesture. */
+  clearDragSelection() {
+    const drag = this.dragSelection;
+    if (drag && drag.frame !== null) {
+      this.container.ownerDocument.defaultView?.cancelAnimationFrame(drag.frame);
+    }
+    this.dragSelection = null;
   }
   /** The editable block (contenteditable [data-anchor]) containing `node`, if any, within this editor.
    *  Fenced by `container`, not `editRoot`, so header/footer band blocks — which live outside the
@@ -3534,8 +3694,13 @@ var DocxEditor = class _DocxEditor {
   close() {
     if (this.closed) return;
     this.closed = true;
-    if (typeof document !== "undefined")
+    if (typeof document !== "undefined") {
       document.removeEventListener("selectionchange", this.onSelectionChange);
+      document.removeEventListener("mousedown", this.onMouseDown, true);
+      document.removeEventListener("mousemove", this.onMouseMove, true);
+      document.removeEventListener("mouseup", this.onMouseUp, true);
+    }
+    this.clearDragSelection();
     this.exports.DocxSessionBridge.CloseSession(this.handle);
   }
   /**
@@ -3553,6 +3718,16 @@ var DocxEditor = class _DocxEditor {
   get root() {
     return this.container;
   }
+  /**
+   * The live `DocxSession` handle backing this editor — the model of record.
+   *
+   * Surfaced because chrome around the editor (the anchor rail) reports it as engine
+   * state, and reaching into the private field from a host page only worked because
+   * the bundle erases TypeScript's visibility.
+   */
+  get sessionHandle() {
+    return this.handle;
+  }
   // ─── internals ───────────────────────────────────────────────────────
   assertOpen() {
     if (this.closed) throw new Error("DocxEditor is closed");
@@ -3843,8 +4018,7 @@ var DocxEditor = class _DocxEditor {
       this.options.onEdit?.({ anchorId: second.id, unid: second.unid });
       return;
     }
-    const firstEl = this.renderInto(first.id);
-    const secondEl = this.renderInto(second.id);
+    const [firstEl, secondEl] = this.renderTwo(first.id, second.id);
     if (!firstEl || !secondEl) return;
     const inBand = this.isBandBlock(el);
     if (!this.replaceNode(el, firstEl, secondEl)) return;
@@ -3957,6 +4131,34 @@ var DocxEditor = class _DocxEditor {
     if (html.charCodeAt(0) === 123) return null;
     return new DOMParser().parseFromString(html, "text/html").body.firstElementChild;
   }
+  /** Render two blocks in ONE batched bridge call when the bundle carries RenderBlocksHtml —
+   *  the per-render shell/converter setup is paid once instead of twice, which matters on the
+   *  Enter path (split renders both halves synchronously under the keystroke). Falls back to
+   *  two per-block renders on older bundles. Output is renderInto-identical per block (both
+   *  routes share the same extraction). */
+  renderTwo(a, b) {
+    const bridge = this.exports.DocxSessionBridge;
+    if (typeof bridge.RenderBlocksHtml === "function") {
+      try {
+        const map = JSON.parse(
+          bridge.RenderBlocksHtml(
+            this.handle,
+            JSON.stringify([a, b]),
+            this.options.cssPrefix,
+            this.options.fabricateClasses
+          )
+        );
+        if (!map.error) {
+          const parse = (h) => h ? new DOMParser().parseFromString(h, "text/html").body.firstElementChild : null;
+          const fa = parse(map[a]);
+          const fb = parse(map[b]);
+          if (fa && fb) return [fa, fb];
+        }
+      } catch {
+      }
+    }
+    return [this.renderInto(a), this.renderInto(b)];
+  }
   /** The editable block immediately before `el` within its own root, or null. */
   previousEditable(el) {
     const all = Array.from(
@@ -3974,12 +4176,34 @@ var DocxEditor = class _DocxEditor {
   }
   // ─── M5: formatting commands (ribbon) ────────────────────────────────
   // ─── Multi-block selection helpers (format a whole stack of paragraphs at once) ──────
+  /**
+   * Restore a cross-block selection after a native toolbar control took focus. The bookmark uses
+   * stable anchor ids and content offsets, so it also survives incremental block swaps.
+   */
+  restoreCrossBlockSelection() {
+    const bookmark = this.lastCrossBlockSelection;
+    const active = this.activeBlock;
+    if (!bookmark || !active) return false;
+    const all = Array.from(
+      this.ownerRoot(active).querySelectorAll('[data-anchor][contenteditable="true"]')
+    );
+    const first = all.find((block) => block.getAttribute("data-anchor") === bookmark.startUnid);
+    const last = all.find((block) => block.getAttribute("data-anchor") === bookmark.endUnid);
+    if (!first || !last || first === last || all.indexOf(first) > all.indexOf(last)) return false;
+    const start = contentPositionIn(first, bookmark.startOffset);
+    const end = contentPositionIn(last, bookmark.endOffset);
+    return setSelectionBetween(start, end);
+  }
   /** Editable blocks the current selection covers, in document order. Uses Range.comparePoint
    *  (robust to a selection boundary that normalized onto a wrapper element rather than a block
    *  or text node — Range.intersectsNode misses the end block at a `(block, childCount)` boundary).
    *  A collapsed or single-block selection yields just the active block. */
   selectedBlocks() {
-    const sel = typeof window !== "undefined" ? window.getSelection() : null;
+    let sel = typeof window !== "undefined" ? window.getSelection() : null;
+    if ((!sel || sel.rangeCount === 0 || sel.isCollapsed) && this.lastCrossBlockSelection) {
+      this.restoreCrossBlockSelection();
+      sel = typeof window !== "undefined" ? window.getSelection() : null;
+    }
     const root = this.activeBlock ? this.ownerRoot(this.activeBlock) : this.editRoot;
     const all = Array.from(
       root.querySelectorAll('[data-anchor][contenteditable="true"]')
@@ -4758,7 +4982,8 @@ var DocxEditor = class _DocxEditor {
       );
       if (oldMarker !== newMarker) return this.bail("substituted li marker drift");
     }
-    if (!this.applyBodyDiff(oldNodes, plan.body, bodyDiff, freshBody)) return this.bail("applyBodyDiff bail");
+    const bodyApply = this.applyBodyDiff(oldNodes, plan.body, bodyDiff, freshBody);
+    if (bodyApply !== true) return this.bail(`applyBodyDiff bail: ${bodyApply}`);
     this.applyNotesDiff("footnotes", plan.footnotes, fnState, rendered);
     this.applyNotesDiff("endnotes", plan.endnotes, enState, rendered);
     const freshHasMarker = [...freshBody.values()].some(
@@ -4790,15 +5015,15 @@ var DocxEditor = class _DocxEditor {
   static anchorElOf(root) {
     return root.hasAttribute("data-anchor") ? root : root.querySelector("[data-anchor]");
   }
-  /** Insert/remove/swap body unit nodes per the diff. Returns false to bail (parent
-   *  ambiguity, order violation, wrapper semantics) — the session is already correct,
-   *  so bailing just means a full repaint. */
+  /** Insert/remove/swap body unit nodes per the diff. Returns `true` on success or a
+   *  bail-reason string (parent ambiguity, order violation, wrapper semantics) — the
+   *  session is already correct, so bailing just means a full repaint. */
   applyBodyDiff(oldNodes, units, diff, fresh) {
     let lastOld = -1;
     for (let j = 0; j < units.length; j++) {
       const oi = diff.keep.get(j);
       if (oi === void 0) continue;
-      if (oi < lastOld) return false;
+      if (oi < lastOld) return "kept order violation";
       lastOld = oi;
     }
     const subOldByNew = new Map(diff.substituted.map((s) => [s.newIndex, s.oldIndex]));
@@ -4809,8 +5034,10 @@ var DocxEditor = class _DocxEditor {
         oldWrapper.replaceWith(freshRoot);
       } else if (oldWrapper === oldNodes[oi]) {
         oldNodes[oi].replaceWith(freshRoot);
+      } else if (!oldNodes[oi].hasAttribute("data-render-sig") && unidOf(units[nj].id) === oldNodes[oi].getAttribute("data-anchor")) {
+        oldNodes[oi].replaceWith(freshRoot);
       } else {
-        return false;
+        return `leaf render into wrapped slot (unit ${units[nj].id.slice(0, 24)})`;
       }
       this.wireUnit(freshRoot, units[nj]);
     }
@@ -4837,10 +5064,11 @@ var DocxEditor = class _DocxEditor {
       }
       const prevW = prev ? this.unitWrapperOf(prev) : null;
       const nextW = next ? this.unitWrapperOf(next) : null;
-      if (prevW && nextW && prevW.parentElement !== nextW.parentElement) return false;
+      if (prevW && nextW && prevW.parentElement !== nextW.parentElement)
+        return "insert neighbors in different parents";
       if (prevW) prevW.after(el);
       else if (nextW) nextW.before(el);
-      else return false;
+      else return "insert with no anchored neighbor";
       this.wireUnit(el, units[j]);
     }
     for (const i of pureRemoved) {
@@ -5015,6 +5243,1666 @@ var DocxEditor = class _DocxEditor {
   }
 };
 
+// src/ribbon-chrome.ts
+var RIBBON_STYLE_VERSION = "5";
+var RIBBON_STYLE_ATTR = "data-docxodus-ribbon-styles";
+var RIBBON_CSS = `
+.dxr {
+  --dxr-ink: #101418;
+  --dxr-sheet: #ffffff;
+  --dxr-chrome: #eef1f6;
+  --dxr-chrome-sunk: #e3e8f0;
+  --dxr-rule: #d3dae4;
+  --dxr-accent: #1f5fd0;
+  --dxr-wash: #dde8fb;
+  --dxr-muted: #5d6975;
+  --dxr-data: #0b6f6a;
+  --dxr-danger: #a3341f;
+  --dxr-desk: #dfe3ea;
+  --dxr-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --dxr-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
+  --dxr-tap: 30px;
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  isolation: isolate;
+  font-family: var(--dxr-ui);
+  color: var(--dxr-ink);
+  background: var(--dxr-desk);
+  -webkit-text-size-adjust: 100%;
+}
+.dxr *, .dxr *::before, .dxr *::after { box-sizing: border-box; }
+
+/* Touch devices get bigger hit targets everywhere the token is used. */
+@media (pointer: coarse) { .dxr { --dxr-tap: 40px; } }
+
+/* \u2500\u2500 Chrome shell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.dxr-chrome {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  flex: 0 0 auto;
+  background: var(--dxr-chrome);
+  border-bottom: 1px solid var(--dxr-rule);
+}
+
+.dxr-titlebar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 10px 0;
+}
+.dxr-brand {
+  display: flex;
+  align-items: baseline;
+  gap: 7px;
+  min-width: 0;
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: -.01em;
+}
+.dxr-brand .dxr-mark {
+  flex: 0 0 auto;
+  width: 9px;
+  height: 9px;
+  background: var(--dxr-accent);
+  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
+}
+.dxr-brand .dxr-docname {
+  overflow: hidden;
+  max-width: 22ch;
+  color: var(--dxr-muted);
+  font-size: 12px;
+  font-weight: 400;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dxr-quick { flex: 0 0 auto; display: flex; align-items: center; gap: 3px; }
+.dxr-titlebar .dxr-spacer { flex: 1; }
+.dxr-status {
+  overflow: hidden;
+  max-width: 42ch;
+  color: var(--dxr-muted);
+  font-family: var(--dxr-mono);
+  font-size: 11.5px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* \u2500\u2500 Tab strip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.dxr-tabs {
+  display: flex;
+  gap: 1px;
+  padding: 6px 10px 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.dxr-tabs::-webkit-scrollbar { display: none; }
+.dxr-tab {
+  flex: 0 0 auto;
+  padding: 6px 15px 7px;
+  border: 1px solid transparent;
+  border-bottom: none;
+  border-radius: 5px 5px 0 0;
+  background: none;
+  color: var(--dxr-muted);
+  font: inherit;
+  font-size: 12.5px;
+  cursor: pointer;
+}
+.dxr-tab:hover { color: var(--dxr-ink); background: #e6ebf3; }
+.dxr-tab[aria-selected="true"] {
+  color: var(--dxr-ink);
+  font-weight: 600;
+  background: var(--dxr-chrome-sunk);
+  border-color: var(--dxr-rule);
+  box-shadow: inset 0 2px 0 var(--dxr-accent);
+}
+/* Contextual tab \u2014 present only while the caret is inside a table. */
+.dxr-tab[data-contextual] { color: var(--dxr-accent); }
+.dxr-tab[hidden] { display: none; }
+
+/* \u2500\u2500 Ribbon panels \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.dxr-ribbon { background: var(--dxr-chrome-sunk); border-top: 1px solid var(--dxr-rule); }
+.dxr-ribbon[aria-disabled="true"] { opacity: .45; pointer-events: none; }
+.dxr-panel {
+  display: none;
+  align-items: stretch;
+  padding: 7px 10px 8px;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+}
+.dxr-panel[data-active] { display: flex; }
+/* Group label sits ABOVE its controls (a spec-sheet reading), with hairline
+   dividers rather than boxes \u2014 lighter than the boxed, label-under convention. */
+.dxr-group {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  padding: 0 13px;
+  border-right: 1px solid var(--dxr-rule);
+}
+.dxr-group:last-child { border-right: none; }
+.dxr-group:first-child { padding-left: 0; }
+.dxr-glabel {
+  color: var(--dxr-muted);
+  font-size: 9.5px;
+  font-weight: 600;
+  letter-spacing: .11em;
+  text-transform: uppercase;
+}
+.dxr-row { display: flex; gap: 3px; align-items: center; }
+
+/* \u2500\u2500 Controls \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.dxr button, .dxr label.dxr-btn {
+  min-height: var(--dxr-tap);
+  padding: 5px 9px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: none;
+  color: var(--dxr-ink);
+  font: inherit;
+  font-size: 13px;
+  line-height: 1.15;
+  cursor: pointer;
+}
+.dxr label.dxr-btn { display: inline-flex; align-items: center; }
+.dxr button:hover, .dxr label.dxr-btn:hover { background: #d6deea; }
+.dxr button:active { background: #c8d3e3; }
+.dxr button:disabled { opacity: .38; cursor: default; background: none; }
+.dxr button.dxr-on { color: var(--dxr-accent); background: var(--dxr-wash); border-color: #b3ccf2; }
+.dxr-quick button, .dxr-quick label.dxr-btn {
+  padding: 4px 10px;
+  border-color: var(--dxr-rule);
+  background: #f7f9fc;
+  font-size: 12.5px;
+}
+.dxr-quick button:hover, .dxr-quick label.dxr-btn:hover { background: #fff; border-color: #b9c4d4; }
+.dxr-quick button:disabled:hover { background: #f7f9fc; border-color: var(--dxr-rule); }
+.dxr button.dxr-icon { min-width: var(--dxr-tap); text-align: center; }
+/* Icons are inline SVG drawn from the same shapes the control acts on (text lines,
+   rules), so alignment and indent read at a glance instead of relying on arrow
+   glyphs that collide with undo/redo. currentColor keeps them in step with state. */
+.dxr button svg { display: block; margin: 0 auto; fill: currentColor; }
+.dxr button.dxr-wide { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
+.dxr button.dxr-danger:hover { color: var(--dxr-danger); background: #f6dcd6; }
+.dxr select, .dxr input[type="number"], .dxr input[type="text"] {
+  min-height: var(--dxr-tap);
+  padding: 4px 6px;
+  border: 1px solid var(--dxr-rule);
+  border-radius: 4px;
+  background: #f7f9fc;
+  color: var(--dxr-ink);
+  font: inherit;
+  font-size: 12.5px;
+}
+.dxr select:focus-visible, .dxr input:focus-visible, .dxr button:focus-visible,
+.dxr .dxr-tab:focus-visible, .dxr label.dxr-btn:focus-within {
+  outline: 2px solid var(--dxr-accent);
+  outline-offset: 1px;
+}
+.dxr [data-dxr="fontsize"] { width: 62px; }
+.dxr [data-dxr="fontfamily"] { max-width: 132px; }
+.dxr [data-dxr="pgstart"] { width: 64px; }
+.dxr-toggle {
+  display: inline-flex;
+  gap: 5px;
+  align-items: center;
+  color: var(--dxr-ink);
+  font-size: 12.5px;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.dxr-note { color: var(--dxr-muted); font-size: 11.5px; }
+
+/* \u2500\u2500 Anchor rail \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+   The addressing spine made permanent chrome. Every block in this editor is
+   addressable as kind:scope:unid, and the model of record is a live WASM session \u2014
+   so the surface states both, live, instead of hiding them behind devtools. It also
+   reports each command's real cost, which is what a smoke test needs to see. */
+.dxr-rail {
+  display: flex;
+  align-items: center;
+  height: 25px;
+  padding: 0 10px;
+  overflow-x: auto;
+  background: #f7f9fc;
+  border-top: 1px solid var(--dxr-rule);
+  color: var(--dxr-muted);
+  font-family: var(--dxr-mono);
+  font-size: 11.5px;
+  scrollbar-width: none;
+}
+.dxr-rail::-webkit-scrollbar { display: none; }
+.dxr-rail .dxr-cell {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  padding: 0 13px;
+  border-right: 1px solid var(--dxr-rule);
+  white-space: nowrap;
+}
+.dxr-rail .dxr-cell:first-child { padding-left: 0; }
+.dxr-rail .dxr-cell:last-child { border-right: none; }
+.dxr-rail .dxr-k {
+  color: #8b96a3;
+  font-family: var(--dxr-ui);
+  font-size: 9.5px;
+  letter-spacing: .1em;
+  text-transform: uppercase;
+}
+.dxr-rail .dxr-v { color: var(--dxr-data); }
+.dxr-rail .dxr-v.dxr-flash { animation: dxr-railflash .45s ease-out; }
+@keyframes dxr-railflash { from { background: #b9ecdf; } to { background: transparent; } }
+
+/* \u2500\u2500 Hint \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.dxr-hint {
+  flex: 0 0 auto;
+  max-width: 920px;
+  margin: 0 auto;
+  padding: 9px 16px 0;
+  color: var(--dxr-muted);
+  font-size: 12px;
+  line-height: 1.5;
+}
+.dxr-hint kbd {
+  padding: 0 4px;
+  border: 1px solid var(--dxr-rule);
+  border-radius: 3px;
+  background: #e8ecf3;
+  font-family: var(--dxr-mono);
+  font-size: 11px;
+}
+
+/* \u2500\u2500 Document surface \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+   The surface is also the element the converter's own stylesheet treats as the
+   document body: in an embed, its "body { margin: 20px }" is rewritten to
+   [data-docxodus-embed-root="dN"] [data-dxr-surface] \u2014 (0,2,0), and inserted AFTER
+   this sheet, so it wins a tie. Rules that own the SHEET BOX (centering, page
+   padding, the paper itself) therefore qualify with the root's data-chrome to reach
+   (0,3,0). Rules that only style CONTENT stay unqualified \u2014 there the converter
+   SHOULD win.
+   (No backticks in this file's comments: the stylesheet is a template literal.) */
+.dxr-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; }
+.dxr[data-chrome] .dxr-surface { max-width: 920px; margin: 26px auto; padding: 0 16px 96px; }
+.dxr-surface[data-view="continuous"] > * { background: var(--dxr-sheet); }
+.dxr[data-chrome] .dxr-surface[data-view="continuous"] {
+  padding: 56px 72px;
+  border-radius: 3px;
+  background: var(--dxr-sheet);
+  box-shadow: 0 1px 3px rgba(16, 20, 24, .14), 0 8px 24px rgba(16, 20, 24, .05);
+}
+.dxr-surface [contenteditable="true"]:focus {
+  outline: 2px solid var(--dxr-accent);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+@media (hover: hover) { .dxr-surface [contenteditable="true"]:hover { background: #f2f7ff; } }
+
+/* Header/footer bands: stories live in their own OOXML parts outside the body,
+   so they dock as their own regions. Styled from the same tokens as the ribbon
+   so the surface reads as one instrument rather than two apps. */
+.dxr-surface .docx-hf-band {
+  margin: 0 0 14px;
+  padding: 9px 72px 13px;
+  border: 1px solid var(--dxr-rule);
+  border-left: 2px solid #c2ccd9;
+  border-radius: 3px;
+  background: var(--dxr-sheet);
+}
+.dxr-surface .docx-hf-band + .docx-body-flow { margin-top: 0; }
+.dxr-surface .docx-hf-band[data-hf-band="footer"] { margin: 14px 0 0; }
+.dxr-surface .docx-hf-chrome {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+  margin: 0 0 7px -60px;
+  color: var(--dxr-muted);
+  font-size: 9.5px;
+  font-weight: 600;
+  letter-spacing: .11em;
+  text-transform: uppercase;
+}
+.dxr-surface .docx-hf-chrome select, .dxr-surface .docx-hf-chrome input {
+  padding: 3px 5px;
+  border: 1px solid var(--dxr-rule);
+  border-radius: 4px;
+  background: #f7f9fc;
+  color: var(--dxr-ink);
+  font: inherit;
+  font-family: var(--dxr-ui);
+  font-size: 12.5px;
+  font-weight: 400;
+  letter-spacing: normal;
+  text-transform: none;
+}
+.dxr-surface .docx-hf-chrome input[data-hf-pagestart] { width: 64px; }
+.dxr-surface .docx-hf-label { font-weight: 600; }
+.dxr-surface .docx-hf-warning {
+  margin: 0 0 8px -60px;
+  padding: 7px 9px;
+  border: 1px solid #e8d9a8;
+  border-left: 2px solid #c9a227;
+  border-radius: 3px;
+  background: #fdf6e3;
+  color: #6b5310;
+  font-size: 12px;
+  line-height: 1.45;
+}
+.dxr-surface .docx-hf-warning button {
+  margin-left: 6px;
+  padding: 2px 8px;
+  border-color: #e8d9a8;
+  background: #fff;
+  font-size: 12px;
+}
+.dxr-surface .docx-hf-placeholder { color: #9aa4b1; font-style: italic; }
+.dxr-surface .docx-hf-inherited {
+  color: var(--dxr-muted);
+  font-style: italic;
+  font-weight: 400;
+  letter-spacing: normal;
+  text-transform: none;
+}
+.dxr-surface .docx-hf-band[data-hf-inherited] { border-style: dashed; }
+.dxr[data-chrome] .dxr-surface[data-view="continuous"]:has(.docx-body-flow) {
+  padding: 0;
+  background: transparent;
+  box-shadow: none;
+}
+.dxr[data-chrome] .dxr-surface[data-view="continuous"] .docx-body-flow {
+  padding: 56px 72px;
+  border-radius: 3px;
+  background: var(--dxr-sheet);
+  box-shadow: 0 1px 3px rgba(16, 20, 24, .14), 0 8px 24px rgba(16, 20, 24, .05);
+}
+
+/* \u2500\u2500 Table size picker \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.dxr-pop {
+  display: none;
+  position: absolute;
+  z-index: 30;
+  padding: 9px;
+  border: 1px solid var(--dxr-rule);
+  border-radius: 6px;
+  background: #fff;
+  box-shadow: 0 4px 16px rgba(16, 20, 24, .18);
+}
+.dxr-pop[data-open] { display: block; }
+.dxr-gridcells { display: grid; grid-template-columns: repeat(10, 16px); gap: 2px; }
+.dxr-gridcells div {
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--dxr-rule);
+  border-radius: 2px;
+  background: #f2f5f9;
+  cursor: pointer;
+}
+.dxr-gridcells div[data-on] { background: var(--dxr-wash); border-color: var(--dxr-accent); }
+.dxr-popfoot {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 8px;
+  font-size: 12px;
+}
+
+/* \u2500\u2500 Compact chrome (the mobile-first base) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+   One scrolling strip per tab instead of a multi-row ribbon: group labels turn
+   into inline dividers, the rail and hint step aside, and the picker becomes a
+   bottom sheet because there is no room to hang a popover off a button. */
+/* A 320px phone cannot hold the product name AND the file actions, and the file
+   actions are what a user came for. The strip also scrolls, so nothing is stranded. */
+.dxr[data-chrome="compact"] .dxr-titlebar {
+  gap: 6px;
+  padding: 5px 8px 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.dxr[data-chrome="compact"] .dxr-titlebar::-webkit-scrollbar { display: none; }
+.dxr[data-chrome="compact"] .dxr-brandname { display: none; }
+.dxr[data-chrome="compact"] .dxr-brand { flex: 0 1 auto; }
+/* A filename clipped to "do..." tells you less than no filename at all, so it keeps a
+   readable floor and the strip scrolls instead. The tighter file-action padding is what
+   buys that floor back on a 390px screen. */
+.dxr[data-chrome="compact"] .dxr-brand .dxr-docname { min-width: 6ch; max-width: 14ch; }
+.dxr[data-chrome="compact"] .dxr-quick button,
+.dxr[data-chrome="compact"] .dxr-quick label.dxr-btn { padding: 4px 8px; }
+.dxr[data-chrome="compact"] .dxr-status { display: none; }
+.dxr[data-chrome="compact"] .dxr-tabs { padding: 5px 8px 0; }
+.dxr[data-chrome="compact"] .dxr-tab { padding: 6px 12px 7px; font-size: 12px; }
+.dxr[data-chrome="compact"] .dxr-panel {
+  align-items: center;
+  gap: 4px;
+  padding: 5px 8px;
+  scroll-snap-type: x proximity;
+}
+.dxr[data-chrome="compact"] .dxr-group {
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+  padding: 0 8px;
+  scroll-snap-align: start;
+}
+.dxr[data-chrome="compact"] .dxr-glabel { display: none; }
+.dxr[data-chrome="compact"] .dxr-note { display: none; }
+.dxr[data-chrome="compact"] .dxr-rail { display: none; }
+.dxr[data-chrome="compact"] .dxr-hint { display: none; }
+.dxr[data-chrome="compact"] .dxr-surface { margin: 12px auto; padding: 0 10px 64px; }
+.dxr[data-chrome="compact"] .dxr-surface[data-view="continuous"] { padding: 22px 18px; }
+.dxr[data-chrome="compact"] .dxr-surface[data-view="continuous"] .docx-body-flow { padding: 22px 18px; }
+.dxr[data-chrome="compact"] .dxr-surface .docx-hf-band { padding: 9px 18px 13px; }
+.dxr[data-chrome="compact"] .dxr-surface .docx-hf-chrome,
+.dxr[data-chrome="compact"] .dxr-surface .docx-hf-warning { margin-left: 0; }
+/* A popover anchored to a button has nowhere to go on a narrow surface, so the
+   picker docks to the bottom edge where a thumb already is. */
+.dxr[data-chrome="compact"] .dxr-pop[data-open] {
+  position: fixed;
+  left: 50%;
+  right: auto;
+  bottom: 12px;
+  top: auto !important;
+  transform: translateX(-50%);
+  max-width: calc(100vw - 20px);
+}
+
+/* \u2500\u2500 Loading overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+   Kept from the shipped demo: the wait is real (a .NET runtime is streaming), so
+   the surface spends it explaining what is being built rather than showing a
+   spinner. It covers the whole instrument so half-built chrome never flashes. */
+.dxr-loader {
+  position: absolute;
+  inset: 0;
+  z-index: 40;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  color: #f4f9ff;
+  background:
+    radial-gradient(circle at 20% 20%, rgba(63, 128, 255, .24), transparent 22rem),
+    radial-gradient(circle at 82% 80%, rgba(176, 91, 255, .22), transparent 24rem),
+    linear-gradient(145deg, #071221 0%, #0b1930 52%, #101426 100%);
+  transition: opacity .55s ease, visibility .55s ease;
+}
+.dxr-loader[hidden] { display: none; }
+/* pointer-events drops the instant the fade starts: the surface underneath is already
+   live, so a click during the half-second fade should reach it rather than be eaten. */
+.dxr-loader[data-done] { opacity: 0; visibility: hidden; pointer-events: none; }
+.dxr-loader-grid {
+  width: min(850px, 100%);
+  display: grid;
+  grid-template-columns: 1fr;
+  align-items: center;
+  gap: 22px;
+  text-align: center;
+}
+.dxr-visual { position: relative; width: min(170px, 52vw); aspect-ratio: 1; margin: 0 auto; }
+.dxr-orbit {
+  position: absolute;
+  inset: 7%;
+  border: 1px solid rgba(115, 204, 255, .22);
+  border-radius: 50%;
+  animation: dxr-spin 9s linear infinite;
+}
+.dxr-orbit.dxr-two {
+  inset: 20%;
+  border-style: dashed;
+  border-color: rgba(196, 128, 255, .32);
+  animation-duration: 6s;
+  animation-direction: reverse;
+}
+.dxr-orbit::before, .dxr-orbit::after {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  content: "";
+  background: #52e5ff;
+  box-shadow: 0 0 18px #52e5ff;
+}
+.dxr-orbit::before { top: -5px; left: 50%; }
+.dxr-orbit::after { right: 7%; bottom: 12%; background: #b26cff; box-shadow: 0 0 18px #b26cff; }
+.dxr-card {
+  position: absolute;
+  inset: 24% 28%;
+  padding: 20px 15px;
+  border: 1px solid rgba(255, 255, 255, .33);
+  border-radius: 14px;
+  background: linear-gradient(150deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .06));
+  box-shadow: 0 22px 50px rgba(0, 0, 0, .35), 0 0 45px rgba(71, 150, 255, .13);
+  backdrop-filter: blur(10px);
+  animation: dxr-float 3.6s ease-in-out infinite;
+}
+.dxr-card::before {
+  position: absolute;
+  top: -9px;
+  right: -9px;
+  padding: 4px 7px;
+  border-radius: 6px;
+  background: #52e5ff;
+  color: #06111d;
+  content: "DOCX";
+  font-size: 8px;
+  font-weight: 900;
+  letter-spacing: .12em;
+}
+.dxr-card i {
+  display: block;
+  height: 4px;
+  margin-bottom: 10px;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, .56);
+  transform-origin: left;
+  animation: dxr-pulse 2.2s ease-in-out infinite;
+}
+.dxr-card i:nth-child(2) { width: 76%; animation-delay: -.45s; }
+.dxr-card i:nth-child(3) { width: 88%; animation-delay: -.85s; }
+.dxr-card i:nth-child(4) { width: 58%; background: rgba(255, 111, 139, .75); animation-delay: -1.2s; }
+.dxr-chip {
+  position: absolute;
+  display: grid;
+  width: 34px;
+  height: 34px;
+  place-items: center;
+  border: 1px solid rgba(255, 255, 255, .17);
+  border-radius: 11px;
+  background: rgba(12, 28, 49, .88);
+  box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
+  font-size: 11px;
+  font-weight: 850;
+}
+.dxr-chip.dxr-b { left: 2%; top: 30%; color: #52e5ff; animation: dxr-chip 3s ease-in-out infinite; }
+.dxr-chip.dxr-r { right: -2%; bottom: 24%; color: #ff8da0; animation: dxr-chip 3s -1.4s ease-in-out infinite; }
+.dxr-chip.dxr-s { left: 20%; bottom: 0; color: #52e0a2; animation: dxr-chip 3s -.7s ease-in-out infinite; }
+.dxr-eyebrow { color: #52e5ff; font-size: 10px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
+.dxr-loader h2 {
+  margin: 10px auto 10px;
+  max-width: 520px;
+  font-size: clamp(23px, 5vw, 40px);
+  line-height: 1.05;
+  letter-spacing: -.045em;
+}
+.dxr-loader-copy > p { margin: 0 auto; max-width: 46ch; color: #9eb2c9; font-size: 13.5px; line-height: 1.6; }
+.dxr-ad {
+  display: flex;
+  gap: 12px;
+  margin: 20px auto 0;
+  max-width: 420px;
+  padding: 13px;
+  border: 1px solid rgba(126, 160, 200, .16);
+  border-radius: 13px;
+  background: rgba(255, 255, 255, .04);
+  text-align: left;
+}
+.dxr-ad .dxr-num { color: #b26cff; font: 800 10px/1.4 var(--dxr-mono); }
+.dxr-ad strong { display: block; font-size: 12.5px; }
+.dxr-ad .dxr-adcopy { display: block; margin-top: 4px; color: #849bb5; font-size: 11.5px; line-height: 1.45; }
+.dxr-ad[data-swap] { animation: dxr-swap .4s ease; }
+.dxr-track {
+  height: 3px;
+  margin: 22px auto 0;
+  max-width: 420px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, .09);
+}
+.dxr-bar {
+  width: 12%;
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, #52e5ff, #5c7cff, #b26cff);
+  box-shadow: 0 0 16px rgba(82, 229, 255, .55);
+  transition: width .65s cubic-bezier(.22, .8, .28, 1);
+}
+.dxr-meta {
+  display: flex;
+  justify-content: space-between;
+  gap: 14px;
+  margin: 9px auto 0;
+  max-width: 420px;
+  color: #647e9c;
+  font: 700 9px/1 var(--dxr-mono);
+  letter-spacing: .09em;
+  text-transform: uppercase;
+}
+.dxr-retry {
+  display: none;
+  margin-top: 18px;
+  padding: 9px 14px;
+  border: 1px solid rgba(255, 127, 145, .4);
+  border-radius: 9px;
+  background: rgba(255, 127, 145, .12);
+  color: #fff;
+  cursor: pointer;
+}
+.dxr-loader[data-error] .dxr-retry { display: inline-flex; }
+.dxr-loader[data-error] .dxr-visual { opacity: .35; }
+
+/* Two columns once there is room \u2014 the visual earns its space beside the copy. */
+@media (min-width: 760px) {
+  .dxr-loader-grid {
+    grid-template-columns: minmax(220px, .8fr) minmax(300px, 1.2fr);
+    gap: clamp(28px, 6vw, 72px);
+    text-align: left;
+  }
+  .dxr-visual { width: min(280px, 30vw); }
+  .dxr-loader h2 { margin-left: 0; }
+  .dxr-loader-copy > p { margin-left: 0; min-height: 44px; }
+  .dxr-ad, .dxr-track, .dxr-meta { margin-left: 0; }
+}
+
+@keyframes dxr-spin { to { transform: rotate(360deg); } }
+@keyframes dxr-float { 0%, 100% { transform: translateY(-5px) rotate(-2deg); } 50% { transform: translateY(7px) rotate(1deg); } }
+@keyframes dxr-chip { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(5px); } }
+@keyframes dxr-pulse { 0%, 100% { transform: scaleX(.65); opacity: .45; } 50% { transform: scaleX(1); opacity: .95; } }
+@keyframes dxr-swap { from { opacity: .1; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
+
+@media (prefers-reduced-motion: reduce) {
+  .dxr *, .dxr *::before, .dxr *::after {
+    animation-duration: .01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: .01ms !important;
+  }
+}
+`;
+var ICON_ALIGN = (bars) => `<svg width="15" height="13" viewBox="0 0 15 13" aria-hidden="true">${bars}</svg>`;
+var RIBBON_HTML = `
+<div class="dxr-chrome">
+  <div class="dxr-titlebar">
+    <span class="dxr-brand"><span class="dxr-mark"></span><span class="dxr-brandname">Docxodus</span>
+      <span class="dxr-docname" data-dxr="docname">no document</span></span>
+    <div class="dxr-quick" data-dxr-files>
+      <button type="button" data-dxr="new" title="Start a new blank document">New</button>
+      <label class="dxr-btn" tabindex="0">Open<input data-dxr="file" type="file" accept=".docx" hidden /></label>
+      <button type="button" data-dxr="save" disabled>Save</button>
+    </div>
+    <div class="dxr-quick">
+      <button type="button" class="dxr-icon" data-dxr="undo" title="Undo (Ctrl+Z)" aria-label="Undo">&#8630;</button>
+      <button type="button" class="dxr-icon" data-dxr="redo" title="Redo (Ctrl+Shift+Z)" aria-label="Redo">&#8631;</button>
+    </div>
+    <span class="dxr-spacer"></span>
+    <span class="dxr-status" data-dxr="status" role="status" aria-live="polite">Booting WASM&#8230;</span>
+  </div>
+
+  <div class="dxr-tabs" role="tablist">
+    <button type="button" class="dxr-tab" role="tab" data-tab="home" aria-selected="true">Home</button>
+    <button type="button" class="dxr-tab" role="tab" data-tab="insert" aria-selected="false">Insert</button>
+    <button type="button" class="dxr-tab" role="tab" data-tab="layout" aria-selected="false">Layout</button>
+    <button type="button" class="dxr-tab" role="tab" data-tab="table" data-contextual aria-selected="false" hidden>Table</button>
+  </div>
+
+  <div class="dxr-ribbon" data-dxr="ribbon" aria-disabled="true">
+    <!-- HOME \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->
+    <div class="dxr-panel" data-panel="home" data-active>
+      <div class="dxr-group">
+        <span class="dxr-glabel">Text</span>
+        <div class="dxr-row">
+          <button type="button" class="dxr-icon" data-cmd="bold" title="Bold (Ctrl+B)"><b>B</b></button>
+          <button type="button" class="dxr-icon" data-cmd="italic" title="Italic (Ctrl+I)"><i>I</i></button>
+          <button type="button" class="dxr-icon" data-cmd="underline" title="Underline (Ctrl+U)"><u>U</u></button>
+          <button type="button" class="dxr-icon" data-cmd="strike" title="Strikethrough"><s>S</s></button>
+          <button type="button" class="dxr-icon" data-cmd="code" title="Inline code">&lt;/&gt;</button>
+          <button type="button" class="dxr-icon" data-cmd="superscript" title="Superscript">x&#178;</button>
+          <button type="button" class="dxr-icon" data-cmd="subscript" title="Subscript">x&#8322;</button>
+        </div>
+        <div class="dxr-row">
+          <input data-dxr="fontsize" data-dxr-list="fontsizes" type="number" min="1" max="1638" step="0.5"
+                 placeholder="pt" title="Font size in points \u2014 type any value or pick a preset" />
+          <datalist data-dxr="fontsizes">
+            <option>8</option><option>9</option><option>10</option><option>11</option>
+            <option>12</option><option>14</option><option>16</option><option>18</option>
+            <option>20</option><option>24</option><option>28</option><option>36</option>
+            <option>48</option><option>72</option><option>96</option>
+          </datalist>
+          <select data-dxr="fontfamily" title="Font family \u2014 applies to the selection">
+            <option value="">Font&#8230;</option>
+            <option>Calibri</option><option>Times New Roman</option><option>Arial</option>
+            <option>Georgia</option><option>Cambria</option><option>Courier New</option>
+            <option>Verdana</option><option>Garamond</option>
+          </select>
+        </div>
+      </div>
+
+      <div class="dxr-group">
+        <span class="dxr-glabel">Paragraph</span>
+        <div class="dxr-row">
+          <button type="button" class="dxr-icon" data-align="left" title="Align left">${ICON_ALIGN(
+  '<rect x="0" y="0" width="15" height="1.6"/><rect x="0" y="3.8" width="9" height="1.6"/><rect x="0" y="7.6" width="15" height="1.6"/><rect x="0" y="11.4" width="9" height="1.6"/>'
+)}</button>
+          <button type="button" class="dxr-icon" data-align="center" title="Align center">${ICON_ALIGN(
+  '<rect x="0" y="0" width="15" height="1.6"/><rect x="3" y="3.8" width="9" height="1.6"/><rect x="0" y="7.6" width="15" height="1.6"/><rect x="3" y="11.4" width="9" height="1.6"/>'
+)}</button>
+          <button type="button" class="dxr-icon" data-align="right" title="Align right">${ICON_ALIGN(
+  '<rect x="0" y="0" width="15" height="1.6"/><rect x="6" y="3.8" width="9" height="1.6"/><rect x="0" y="7.6" width="15" height="1.6"/><rect x="6" y="11.4" width="9" height="1.6"/>'
+)}</button>
+          <button type="button" class="dxr-icon" data-align="justify" title="Justify">${ICON_ALIGN(
+  '<rect x="0" y="0" width="15" height="1.6"/><rect x="0" y="3.8" width="15" height="1.6"/><rect x="0" y="7.6" width="15" height="1.6"/><rect x="0" y="11.4" width="15" height="1.6"/>'
+)}</button>
+          <button type="button" class="dxr-icon" data-indent="-720" title="Decrease indent">${ICON_ALIGN(
+  '<rect x="0" y="0" width="15" height="1.6"/><rect x="6" y="3.8" width="9" height="1.6"/><rect x="6" y="7.6" width="9" height="1.6"/><rect x="0" y="11.4" width="15" height="1.6"/><path d="M4.6 4.2v4.6L0.6 6.5z"/>'
+)}</button>
+          <button type="button" class="dxr-icon" data-indent="720" title="Increase indent">${ICON_ALIGN(
+  '<rect x="0" y="0" width="15" height="1.6"/><rect x="6" y="3.8" width="9" height="1.6"/><rect x="6" y="7.6" width="9" height="1.6"/><rect x="0" y="11.4" width="15" height="1.6"/><path d="M0.6 4.2v4.6l4-2.3z"/>'
+)}</button>
+        </div>
+        <div class="dxr-row">
+          <button type="button" data-list="bullet" title="Bullet list">&#8226; List</button>
+          <button type="button" data-list="decimal" title="Numbered list">1. List</button>
+          <button type="button" data-pagebreak title="Start this block on a new page">Page break</button>
+        </div>
+      </div>
+
+      <div class="dxr-group">
+        <span class="dxr-glabel">Block</span>
+        <div class="dxr-row">
+          <select data-dxr="style" title="Paragraph style">
+            <option value="">Style&#8230;</option>
+            <option value="Normal">Normal</option>
+            <option value="Heading1">Heading 1</option>
+            <option value="Heading2">Heading 2</option>
+            <option value="Heading3">Heading 3</option>
+            <option value="Title">Title</option>
+          </select>
+        </div>
+        <div class="dxr-row">
+          <button type="button" data-dxr="delblock" class="dxr-danger" title="Delete the block the caret is in">Delete block</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- INSERT \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->
+    <div class="dxr-panel" data-panel="insert">
+      <div class="dxr-group">
+        <span class="dxr-glabel">Table</span>
+        <div class="dxr-row">
+          <button type="button" data-dxr="table" title="Insert a table \u2014 pick its size on the grid">&#9638; Table</button>
+        </div>
+      </div>
+
+      <div class="dxr-group">
+        <span class="dxr-glabel">Rules</span>
+        <div class="dxr-row">
+          <button type="button" data-dxr="hr" class="dxr-wide" title="Insert a single rule"><svg width="22" height="8" viewBox="0 0 22 8" aria-hidden="true"><rect x="0" y="3.2" width="22" height="1.4"/></svg>Single</button>
+          <button type="button" data-dxr="hrThick" class="dxr-wide" title="Insert a thick rule"><svg width="22" height="8" viewBox="0 0 22 8" aria-hidden="true"><rect x="0" y="2.4" width="22" height="3.2"/></svg>Thick</button>
+          <button type="button" data-dxr="hrDouble" class="dxr-wide" title="Insert a double rule"><svg width="22" height="8" viewBox="0 0 22 8" aria-hidden="true"><rect x="0" y="1.6" width="22" height="1.3"/><rect x="0" y="5" width="22" height="1.3"/></svg>Double</button>
+        </div>
+        <div class="dxr-row">
+          <select data-dxr="rulepos" title="Where the rule lands relative to the current block">
+            <option value="below">Below block</option>
+            <option value="above">Above block</option>
+          </select>
+          <button type="button" data-dxr="hrClear" title="Remove the rule or paragraph border">Clear</button>
+        </div>
+      </div>
+
+      <div class="dxr-group">
+        <span class="dxr-glabel">References</span>
+        <div class="dxr-row">
+          <button type="button" data-dxr="footnote" title="Cite a new footnote at the caret">Footnote</button>
+          <button type="button" data-dxr="endnote" title="Cite a new endnote at the caret">Endnote</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- LAYOUT \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->
+    <div class="dxr-panel" data-panel="layout">
+      <div class="dxr-group">
+        <span class="dxr-glabel">View</span>
+        <div class="dxr-row">
+          <label class="dxr-toggle"><input data-dxr="paginated" type="checkbox" /> Page view</label>
+        </div>
+        <div class="dxr-row">
+          <label class="dxr-toggle"><input data-dxr="headerfooter" type="checkbox" /> Header &amp; footer bands</label>
+        </div>
+      </div>
+
+      <div class="dxr-group">
+        <span class="dxr-glabel">Page numbers</span>
+        <div class="dxr-row">
+          <select data-dxr="pgfmt" title="Number format for this section">
+            <option value="">Format&#8230;</option>
+            <option value="decimal">1, 2, 3</option>
+            <option value="lowerLetter">a, b, c</option>
+            <option value="upperLetter">A, B, C</option>
+            <option value="lowerRoman">i, ii, iii</option>
+            <option value="upperRoman">I, II, III</option>
+          </select>
+          <label class="dxr-toggle">Start at
+            <input data-dxr="pgstart" type="number" min="1" step="1"
+                   title="Restart this section's numbering at this value" />
+          </label>
+          <button type="button" data-dxr="pgclear" title="Continue the previous section's numbering">Clear</button>
+        </div>
+        <div class="dxr-row">
+          <span class="dxr-note">Applies to the section holding the caret.</span>
+        </div>
+      </div>
+
+      <!-- The field lands in the running footer (Word's convention, and where the band
+           puts it), so it belongs with the section's numbering rather than under Insert,
+           whose controls all act at the caret. -->
+      <div class="dxr-group">
+        <span class="dxr-glabel">Footer fields</span>
+        <div class="dxr-row">
+          <button type="button" data-dxr="pagenum" title="Add a page-number field to the footer">Page number</button>
+          <button type="button" data-dxr="totalpages" title="Add a total-pages field to the footer">Total pages</button>
+        </div>
+        <div class="dxr-row">
+          <span class="dxr-note">Added to the footer story.</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- TABLE (contextual) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+         Row/column editing lives here rather than in a floating toolbar: a docked
+         contextual tab cannot overlap the cell you are editing. -->
+    <div class="dxr-panel" data-panel="table">
+      <div class="dxr-group">
+        <span class="dxr-glabel">Rows</span>
+        <div class="dxr-row">
+          <button type="button" data-tt="rowAbove" title="Insert a row above this one">Insert above</button>
+          <button type="button" data-tt="rowBelow" title="Insert a row below this one">Insert below</button>
+          <button type="button" data-tt="delRow" class="dxr-danger" title="Delete this row">Delete row</button>
+        </div>
+      </div>
+      <div class="dxr-group">
+        <span class="dxr-glabel">Columns</span>
+        <div class="dxr-row">
+          <button type="button" data-tt="colLeft" title="Insert a column to the left">Insert left</button>
+          <button type="button" data-tt="colRight" title="Insert a column to the right">Insert right</button>
+          <button type="button" data-tt="delCol" class="dxr-danger" title="Delete this column">Delete column</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Anchor rail \u2014 live engine state, not decoration. -->
+  <div class="dxr-rail" data-dxr-rail>
+    <span class="dxr-cell"><span class="dxr-k">anchor</span><span class="dxr-v" data-dxr="railAnchor">&#8212;</span></span>
+    <span class="dxr-cell"><span class="dxr-k">blocks</span><span class="dxr-v" data-dxr="railBlocks">&#8212;</span></span>
+    <span class="dxr-cell"><span class="dxr-k">session</span><span class="dxr-v" data-dxr="railSession">&#8212;</span></span>
+    <span class="dxr-cell"><span class="dxr-k">last op</span><span class="dxr-v" data-dxr="railOp">&#8212;</span></span>
+  </div>
+</div>
+
+<div class="dxr-scroll" data-dxr-scroll>
+  <p class="dxr-hint" data-dxr-hint></p>
+  <div class="dxr-surface" data-dxr="editor" data-dxr-surface data-view="continuous"></div>
+</div>
+
+<!-- Table size picker, anchored to the Insert tab's Table button. -->
+<div class="dxr-pop" data-dxr="gridpicker">
+  <div class="dxr-gridcells" data-dxr="gridcells"></div>
+  <div class="dxr-popfoot">
+    <span data-dxr="gridlabel">0 &#215; 0</span>
+    <span style="display:inline-flex; align-items:center; gap:10px;">
+      <label class="dxr-toggle">Align
+        <select data-dxr="gridalign">
+          <option value="left">Left</option>
+          <option value="center">Center</option>
+          <option value="right">Right</option>
+        </select>
+      </label>
+      <label class="dxr-toggle"><input data-dxr="gridborderless" type="checkbox" checked /> Borderless</label>
+    </span>
+  </div>
+</div>
+
+<div class="dxr-loader" data-dxr="loader" aria-live="polite" hidden>
+  <div class="dxr-loader-grid">
+    <div class="dxr-visual" aria-hidden="true">
+      <div class="dxr-orbit"></div><div class="dxr-orbit dxr-two"></div>
+      <div class="dxr-card"><i></i><i></i><i></i><i></i></div>
+      <span class="dxr-chip dxr-b">B</span><span class="dxr-chip dxr-r">&#177;</span><span class="dxr-chip dxr-s">&#8595;</span>
+    </div>
+    <div class="dxr-loader-copy">
+      <div class="dxr-eyebrow" data-dxr="loaderEyebrow">Running locally in this tab</div>
+      <h2 data-dxr="loaderTitle">Booting .NET inside your browser</h2>
+      <p data-dxr="loaderCopy">Streaming the trimmed WebAssembly runtime.</p>
+      <div class="dxr-ad" data-dxr="loaderAd">
+        <span class="dxr-num" data-dxr="loaderNumber">01</span>
+        <div><strong data-dxr="loaderAdTitle"></strong><span class="dxr-adcopy" data-dxr="loaderAdCopy"></span></div>
+      </div>
+      <div class="dxr-track" aria-hidden="true"><div class="dxr-bar" data-dxr="loaderBar"></div></div>
+      <div class="dxr-meta"><span data-dxr="loaderLabel">Loading engine</span><span data-dxr="loaderMeta">DOCX &#8594; WASM &#8594; DOCX</span></div>
+      <button type="button" class="dxr-retry" data-dxr="loaderRetry">Retry loading</button>
+    </div>
+  </div>
+</div>
+`;
+var RIBBON_HINT_HTML = "Click any paragraph, heading, table cell, footnote or header/footer line to edit it. <kbd>Enter</kbd> splits a block, <kbd>Backspace</kbd> at the start merges it into the previous one, <kbd>Ctrl</kbd>+<kbd>Z</kbd> undoes. Only the block you changed re-renders \u2014 everything else keeps full fidelity, and <b>Save</b> writes a lossless .docx.";
+
+// src/ribbon.ts
+var 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"
+  }
+];
+var 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." }
+];
+var 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"
+];
+var GRID_ROWS = 8;
+var GRID_COLS = 10;
+var nextIdPrefixSeed = 0;
+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);
+}
+function resolveIdPrefix(explicit, doc) {
+  if (explicit !== void 0) 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;
+}
+function mountRibbon(container, options = {}) {
+  return new RibbonSurface(resolveContainer(container), options);
+}
+var RibbonSurface = class {
+  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;
+    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();
+    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 && width < breakpoint ? "compact" : "full" : this.chromeMode;
+    if (next === this.density && this.element.dataset.chrome) return;
+    this.density = next;
+    this.element.dataset.chrome = next;
+    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 {
+      }
+      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), 1e3);
+    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 {
+    }
+    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 >= 1e3 ? `${(ms / 1e3).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));
+    }
+    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}\u2026`);
+      this.open(new Uint8Array(await chosen.arrayBuffer()), chosen.name);
+      file.value = "";
+    });
+    this.control("new")?.addEventListener("click", () => {
+      if (this.exports) this.openBlank("untitled.docx");
+    });
+    this.control("save")?.addEventListener("click", () => this.download());
+  }
+  wireLayout() {
+    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));
+    });
+    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} \xD7 ${cols}`;
+    };
+    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}\xD7${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", "");
+      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;
+    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]);
+    }
+    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);
+    }
+    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;
+    blocks.textContent = this.live ? String(this.surface.querySelectorAll("[data-anchor]").length) : "\u2014";
+    const session = this.control("railSession");
+    if (session) session.textContent = this.live ? `#${this.live.sessionHandle}` : "\u2014";
+  }
+  /** 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" : "\u2014";
+      this.lastAnchorText = "";
+      return;
+    }
+    const unid = block.getAttribute("data-anchor") ?? "";
+    const text = `${this.kindOf(block)}:${this.scopeOf(block)}:${unid.slice(0, 10)}\u2026`;
+    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");
+        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;
+  }
+};
+
 // src/index.ts
 function openDocxSession2(bytes, settings) {
   const wasm = ensureInitialized();
@@ -6264,7 +8152,7 @@ async function ensureWasm(wasmBasePath2) {
     await initialize(dir);
   }
 }
-function resolveContainer(container) {
+function resolveContainer2(container) {
   if (typeof container !== "string") return container;
   const el = document.querySelector(container);
   if (!el) throw new Error(`Docxodus embed: no element matches "${container}"`);
@@ -6417,7 +8305,7 @@ async function toDocumentBytes(source) {
   throw new Error("Docxodus embed: unsupported document source");
 }
 async function createViewer(container, source, options = {}) {
-  const el = resolveContainer(container);
+  const el = resolveContainer2(container);
   const { wasmBasePath: wasmBasePath2, ...conversion } = options;
   await ensureWasm(wasmBasePath2);
   const mount = createScopedMount(el);
@@ -6454,7 +8342,7 @@ async function createViewer(container, source, options = {}) {
   };
 }
 async function createEditor(container, source, options = {}) {
-  const el = resolveContainer(container);
+  const el = resolveContainer2(container);
   const { wasmBasePath: wasmBasePath2, ...editorOptions } = options;
   await ensureWasm(wasmBasePath2);
   const mount = createScopedMount(el);
@@ -6469,6 +8357,49 @@ async function createEditor(container, source, options = {}) {
     throw error;
   }
 }
+function nameFromSource(source) {
+  if (typeof source !== "string") return void 0;
+  try {
+    const path = new URL(source, typeof location === "undefined" ? void 0 : location.href).pathname;
+    return decodeURIComponent(path.split("/").pop() ?? "") || void 0;
+  } catch {
+    return source.split("/").pop() || void 0;
+  }
+}
+async function createRibbonEditor(container, source, options = {}) {
+  const el = resolveContainer2(container);
+  const { wasmBasePath: wasmBasePath2, ...ribbonOptions } = options;
+  const mount = createScopedMount(el);
+  mount.root.style.height = "100%";
+  mount.root.style.minHeight = "0";
+  const ribbon = mountRibbon(mount.root, {
+    documentName: ribbonOptions.documentName ?? nameFromSource(source),
+    ...ribbonOptions,
+    // Exports arrive after the runtime boots; the loader covers that gap.
+    exports: void 0
+  });
+  try {
+    ribbon.loader.stage(0);
+    await ensureWasm(wasmBasePath2);
+    ribbon.setExports(
+      createScopedEditorExports(
+        getWasmExports(),
+        `${mount.selector} [data-dxr-surface]`
+      )
+    );
+    ribbon.loader.stage(1);
+    const bytes = source == null ? null : await toDocumentBytes(source);
+    ribbon.loader.stage(2);
+    if (bytes == null) ribbon.openBlank(ribbonOptions.documentName);
+    else ribbon.open(bytes, ribbonOptions.documentName ?? nameFromSource(source));
+    ribbon.loader.stage(3);
+    ribbon.loader.done();
+    return ribbon;
+  } catch (error) {
+    ribbon.loader.fail(error);
+    throw error;
+  }
+}
 export {
   AnchorIdRendering,
   AnchorRenderMode,
@@ -6510,6 +8441,7 @@ export {
   createBlankDocx,
   createEditor,
   createExternalAnnotationSet,
+  createRibbonEditor,
   createViewer,
   docxDiffAcceptRevisions,
   docxDiffCompare,
@@ -6545,6 +8477,7 @@ export {
   isMove,
   isMoveDestination,
   isMoveSource,
+  mountRibbon,
   openDocxSession2 as openDocxSession,
   paginateHtml,
   projectAnnotationsOntoHtml,