docxodus 9.1.1 → 9.2.0

package/dist/editor.bundle.js

@@ -18,11 +18,11 @@ var DocxodusEditor = (() => {
   };
   var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-  // src/editor.ts
-  var editor_exports = {};
-  __export(editor_exports, {
+  // src/ribbon.ts
+  var ribbon_exports = {};
+  __export(ribbon_exports, {
     DocxEditor: () => DocxEditor,
-    serializeInlineMarkdown: () => serializeInlineMarkdown
+    mountRibbon: () => mountRibbon
   });
 
   // src/page-number-format.ts
@@ -2406,7 +2406,14 @@ var DocxodusEditor = (() => {
         if (!origin || isInMarker(target)) return;
         const anchor = caretPointFromClient(document, event.clientX, event.clientY);
         if (!anchor || this.editableBlockOf(anchor.node) !== origin) return;
-        this.dragSelection = { anchor, origin, crossedBlockBoundary: false };
+        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
@@ -2418,7 +2425,7 @@ var DocxodusEditor = (() => {
         const drag = this.dragSelection;
         if (!drag) return;
         if ((event.buttons & 1) === 0) {
-          this.dragSelection = null;
+          this.clearDragSelection();
           return;
         }
         const focus = caretPointFromClient(document, event.clientX, event.clientY);
@@ -2428,7 +2435,7 @@ var DocxodusEditor = (() => {
         if (focusBlock !== drag.origin) drag.crossedBlockBoundary = true;
         if (!drag.crossedBlockBoundary) return;
         event.preventDefault();
-        setSelectionBetween(drag.anchor, focus);
+        this.queueDragSelection(drag, focus);
       };
       /** Commit the final cross-block endpoint before releasing the gesture state. */
       this.onMouseUp = (event) => {
@@ -2442,7 +2449,7 @@ var DocxodusEditor = (() => {
             setSelectionBetween(drag.anchor, focus);
           }
         }
-        this.dragSelection = null;
+        this.clearDragSelection();
       };
       this.container = container;
       this.exports = exports;
@@ -2456,6 +2463,35 @@ var DocxodusEditor = (() => {
         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
      *  body edit root by design — also register. The fence still rejects other editors on the page. */
@@ -2540,7 +2576,7 @@ var DocxodusEditor = (() => {
         document.removeEventListener("mousemove", this.onMouseMove, true);
         document.removeEventListener("mouseup", this.onMouseUp, true);
       }
-      this.dragSelection = null;
+      this.clearDragSelection();
       this.exports.DocxSessionBridge.CloseSession(this.handle);
     }
     /**
@@ -2558,6 +2594,16 @@ var DocxodusEditor = (() => {
     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");
@@ -4072,5 +4118,1665 @@ var DocxodusEditor = (() => {
       this.syncRegionToBody(this.activeBlock ?? void 0);
     }
   };
-  return __toCommonJS(editor_exports);
+
+  // 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;
+    }
+  };
+  return __toCommonJS(ribbon_exports);
 })();