docxodus 9.6.0 → 9.8.0

package/dist/embed.bundle.js

@@ -1332,7 +1332,7 @@ function formatPageNumber(value, format) {
 var DEFAULT_PAGE_WIDTH = 612;
 var DEFAULT_PAGE_HEIGHT = 792;
 var DEFAULT_MARGIN = 72;
-var DEFAULT_HEADER_FOOTER_HEIGHT = 36;
+var DEFAULT_HEADER_FOOTER_DISTANCE = 36;
 function pxToPt(px) {
   return px * 0.75;
 }
@@ -1348,8 +1348,8 @@ function parseSectionDimensions(section) {
   const marginRight = parseFloat(section.dataset.marginRight || "") || DEFAULT_MARGIN;
   const marginBottom = parseFloat(section.dataset.marginBottom || "") || DEFAULT_MARGIN;
   const marginLeft = parseFloat(section.dataset.marginLeft || "") || DEFAULT_MARGIN;
-  const headerHeight = parseFloat(section.dataset.headerHeight || "") || DEFAULT_HEADER_FOOTER_HEIGHT;
-  const footerHeight = parseFloat(section.dataset.footerHeight || "") || DEFAULT_HEADER_FOOTER_HEIGHT;
+  const headerDistance = parseFloat(section.dataset.headerHeight || "") || DEFAULT_HEADER_FOOTER_DISTANCE;
+  const footerDistance = parseFloat(section.dataset.footerHeight || "") || DEFAULT_HEADER_FOOTER_DISTANCE;
   return {
     pageWidth,
     pageHeight,
@@ -1359,8 +1359,37 @@ function parseSectionDimensions(section) {
     marginRight,
     marginBottom,
     marginLeft,
-    headerHeight,
-    footerHeight
+    headerDistance,
+    footerDistance,
+    headerHeight: headerDistance,
+    footerHeight: footerDistance
+  };
+}
+var MIN_BODY_BAND_PT = 12;
+function resolvePageBands(dims, headerContentHeight, footerContentHeight) {
+  const headerTop = dims.headerDistance;
+  const footerBottom = dims.pageHeight - dims.footerDistance;
+  const headerReach = headerContentHeight > 0 ? headerTop + headerContentHeight : 0;
+  const footerReach = footerContentHeight > 0 ? footerBottom - footerContentHeight : dims.pageHeight;
+  let bodyTop = Math.max(dims.marginTop, headerReach);
+  let bodyBottom = Math.min(dims.pageHeight - dims.marginBottom, footerReach);
+  const shortfall = MIN_BODY_BAND_PT - (bodyBottom - bodyTop);
+  if (shortfall > 0) {
+    const headerGrowth = bodyTop - dims.marginTop;
+    const footerGrowth = dims.pageHeight - dims.marginBottom - bodyBottom;
+    const growth = headerGrowth + footerGrowth;
+    if (growth > 0) {
+      bodyTop -= shortfall * headerGrowth / growth;
+      bodyBottom += shortfall * footerGrowth / growth;
+    }
+  }
+  return {
+    headerTop,
+    headerHeight: Math.max(0, Math.min(headerContentHeight, bodyTop - headerTop)),
+    bodyTop,
+    bodyHeight: Math.max(0, bodyBottom - bodyTop),
+    footerTop: footerBottom - Math.max(0, Math.min(footerContentHeight, footerBottom - bodyBottom)),
+    footerHeight: Math.max(0, Math.min(footerContentHeight, footerBottom - bodyBottom))
   };
 }
 function sectionWrappers(root) {
@@ -1637,9 +1666,9 @@ var PaginationEngine = class {
    */
   smallestEffectiveContentHeight(dims, sectionIndex) {
     return Math.min(
-      this.getEffectiveHeights(dims, sectionIndex, 1, 1).contentHeight,
-      this.getEffectiveHeights(dims, sectionIndex, 2, 1).contentHeight,
-      this.getEffectiveHeights(dims, sectionIndex, 2, 2).contentHeight
+      this.getPageBands(dims, sectionIndex, 1, 1).bodyHeight,
+      this.getPageBands(dims, sectionIndex, 2, 1).bodyHeight,
+      this.getPageBands(dims, sectionIndex, 2, 2).bodyHeight
     );
   }
   /**
@@ -2163,7 +2192,7 @@ var PaginationEngine = class {
   /**
    * Adds footnotes to a page container, including continuation content.
    */
-  addPageFootnotes(pageBox, footnoteIds, dims, footnoteHeight, continuation, partialFootnotes) {
+  addPageFootnotes(pageBox, footnoteIds, dims, bands, footnoteHeight, continuation, partialFootnotes) {
     const hasContinuation = continuation && continuation.remainingElements.length > 0;
     if (footnoteIds.length === 0 && !hasContinuation) {
       return;
@@ -2174,12 +2203,12 @@ var PaginationEngine = class {
     const partialFootnoteIds = new Set(partialFootnotes?.map((p) => p.footnoteId) || []);
     const maxFootnoteHeight = Math.min(
       footnoteHeight,
-      dims.contentHeight * MAX_FOOTNOTE_AREA_RATIO
+      bands.bodyHeight * MAX_FOOTNOTE_AREA_RATIO
     );
     const footnotesDiv = document.createElement("div");
     footnotesDiv.className = `${this.cssPrefix}footnotes`;
     footnotesDiv.style.position = "absolute";
-    footnotesDiv.style.bottom = `${dims.marginBottom}pt`;
+    footnotesDiv.style.bottom = `${dims.pageHeight - (bands.bodyTop + bands.bodyHeight)}pt`;
     footnotesDiv.style.left = `${dims.marginLeft}pt`;
     footnotesDiv.style.width = `${dims.contentWidth}pt`;
     footnotesDiv.style.boxSizing = "border-box";
@@ -2253,50 +2282,51 @@ var PaginationEngine = class {
     return sectionHf.footerDefault;
   }
   /**
-   * Computes effective header, footer, and content heights for a specific page position.
-   * Uses pre-measured header/footer heights from the registry.
-   * This method is deterministic - same inputs always produce same outputs.
-   * This enables lazy loading compatibility since available height can be computed
-   * for any page position without knowing the page's content.
+   * The header, body, and footer bands for one page position.
+   *
+   * The single owner of "where does anything sit vertically on this page" — placement in
+   * {@link createPage}, the body budget the flow loop spends, and the note area's anchor all
+   * read it, so those three cannot disagree about where the body ends.
+   *
+   * Deterministic: it depends only on the section's page setup and the registry's pre-measured
+   * story heights, never on the page's content, which is what keeps it lazy-loading compatible.
    */
-  getEffectiveHeights(dims, sectionIndex, pageInSection, globalPageNumber) {
+  getPageBands(dims, sectionIndex, pageInSection, globalPageNumber) {
     const sectionHf = this.hfRegistry.get(sectionIndex);
-    let headerHeight = dims.marginTop;
-    if (sectionHf) {
-      let measuredHeaderHeight;
-      if (pageInSection === 1 && sectionHf.headerFirstHeight != null) {
-        measuredHeaderHeight = sectionHf.headerFirstHeight;
-      } else if (globalPageNumber % 2 === 0 && sectionHf.headerEvenHeight != null) {
-        measuredHeaderHeight = sectionHf.headerEvenHeight;
-      } else if (sectionHf.headerDefaultHeight != null) {
-        measuredHeaderHeight = sectionHf.headerDefaultHeight;
-      }
-      if (measuredHeaderHeight != null) {
-        headerHeight = Math.max(dims.marginTop, measuredHeaderHeight);
-      }
-    }
-    let footerHeight = dims.marginBottom;
-    if (sectionHf) {
-      let measuredFooterHeight;
-      if (pageInSection === 1 && sectionHf.footerFirstHeight != null) {
-        measuredFooterHeight = sectionHf.footerFirstHeight;
-      } else if (globalPageNumber % 2 === 0 && sectionHf.footerEvenHeight != null) {
-        measuredFooterHeight = sectionHf.footerEvenHeight;
-      } else if (sectionHf.footerDefaultHeight != null) {
-        measuredFooterHeight = sectionHf.footerDefaultHeight;
-      }
-      if (measuredFooterHeight != null) {
-        footerHeight = Math.max(dims.marginBottom, measuredFooterHeight);
-      }
-    }
-    const headerExpansion = headerHeight - dims.marginTop;
-    const footerExpansion = footerHeight - dims.marginBottom;
-    const contentHeight = dims.contentHeight - headerExpansion - footerExpansion;
-    return { headerHeight, footerHeight, contentHeight };
+    return resolvePageBands(
+      dims,
+      this.selectStoryHeight(
+        sectionHf?.headerFirstHeight,
+        sectionHf?.headerEvenHeight,
+        sectionHf?.headerDefaultHeight,
+        pageInSection,
+        globalPageNumber
+      ),
+      this.selectStoryHeight(
+        sectionHf?.footerFirstHeight,
+        sectionHf?.footerEvenHeight,
+        sectionHf?.footerDefaultHeight,
+        pageInSection,
+        globalPageNumber
+      )
+    );
+  }
+  /**
+   * The measured height of the running story this page position selects, mirroring
+   * {@link selectHeader}/{@link selectFooter}. Zero when the page has no such story.
+   */
+  selectStoryHeight(first, even, fallback, pageInSection, globalPageNumber) {
+    if (pageInSection === 1 && first != null) return first;
+    if (globalPageNumber % 2 === 0 && even != null) return even;
+    return fallback ?? 0;
   }
   /**
    * Measures the content height of a header or footer element.
-   * This is needed because headers/footers can contain more content than fits in the margin area.
+   *
+   * This is what tells {@link resolvePageBands} whether the story stays inside its margin or
+   * pushes the body, so it must measure the story ALONE — any padding added here would have to
+   * be added to the rendered band too, and the two drifting apart is exactly how a header
+   * silently starts overlapping body text.
    */
   measureHeaderFooterHeight(source, contentWidth) {
     const measureContainer = document.createElement("div");
@@ -2304,7 +2334,6 @@ var PaginationEngine = class {
     measureContainer.style.visibility = "hidden";
     measureContainer.style.width = `${contentWidth}pt`;
     measureContainer.style.left = "-9999px";
-    measureContainer.style.paddingBottom = "4pt";
     for (const child of Array.from(source.childNodes)) {
       measureContainer.appendChild(child.cloneNode(true));
     }
@@ -2324,7 +2353,7 @@ var PaginationEngine = class {
     let currentContent = [];
     let pageNumber = startPageNumber;
     let pageInSection = 1;
-    let { contentHeight: effectiveContentHeight } = this.getEffectiveHeights(
+    let { bodyHeight: effectiveContentHeight } = this.getPageBands(
       dims,
       sectionIndex,
       pageInSection,
@@ -2359,8 +2388,8 @@ var PaginationEngine = class {
       pageNumber++;
       pageInSection++;
       currentContent = [];
-      const newHeights = this.getEffectiveHeights(dims, sectionIndex, pageInSection, pageNumber);
-      effectiveContentHeight = newHeights.contentHeight;
+      const newBands = this.getPageBands(dims, sectionIndex, pageInSection, pageNumber);
+      effectiveContentHeight = newBands.bodyHeight;
       remainingHeight = effectiveContentHeight;
       prevMarginBottomPt = 0;
       currentFootnoteIds = [];
@@ -2422,7 +2451,7 @@ var PaginationEngine = class {
           ) + additionalChainFootnoteHeight;
           const currentAvailableHeight = remainingHeight - currentFootnoteHeight;
           if (currentChainHeight > currentAvailableHeight) {
-            const nextPageHeights = this.getEffectiveHeights(
+            const nextPageBands = this.getPageBands(
               dims,
               sectionIndex,
               pageInSection + 1,
@@ -2438,7 +2467,7 @@ var PaginationEngine = class {
               dims.contentWidth,
               nextPageContinuation
             );
-            if (freshChainBodyHeight + freshChainFootnoteHeight <= nextPageHeights.contentHeight) {
+            if (freshChainBodyHeight + freshChainFootnoteHeight <= nextPageBands.bodyHeight) {
               finishPage();
             }
           }
@@ -2607,6 +2636,161 @@ var PaginationEngine = class {
       if (el.getAttribute("contenteditable") !== null) el.setAttribute("contenteditable", "false");
     }
   }
+  /**
+   * Resolves floating DrawingML objects after their anchor paragraphs have landed on a page.
+   *
+   * The converter deliberately carries the OOXML bases and offsets as data instead of flattening
+   * them into CSS: page/margin/column bases belong to the page, while paragraph/line/character
+   * bases belong to the laid-out anchor. Once both coordinate systems exist, promote the object
+   * from the clipped text column into the page box and position it in one shared point space.
+   */
+  positionDrawingAnchors(pageBox, contentArea, dims, pageNumber) {
+    const anchors = Array.from(
+      contentArea.querySelectorAll('[data-docx-drawing-anchor="true"]')
+    );
+    if (anchors.length === 0) return;
+    const pageRect = pageBox.getBoundingClientRect();
+    const pixelsPerPoint = pageRect.width / dims.pageWidth;
+    if (!(pixelsPerPoint > 0)) return;
+    for (const anchor of anchors) {
+      const staticRect = anchor.getBoundingClientRect();
+      const paragraph = anchor.closest("p, h1, h2, h3, h4, h5, h6");
+      const paragraphRect = paragraph?.getBoundingClientRect() ?? staticRect;
+      const toPageX = (x) => (x - pageRect.left) / pixelsPerPoint;
+      const toPageY = (y) => (y - pageRect.top) / pixelsPerPoint;
+      const context = {
+        staticLeft: toPageX(staticRect.left),
+        staticTop: toPageY(staticRect.top),
+        lineHeight: paragraph ? (parseFloat(getComputedStyle(paragraph).lineHeight) || staticRect.height) / pixelsPerPoint : staticRect.height / pixelsPerPoint,
+        paragraphLeft: toPageX(paragraphRect.left),
+        paragraphTop: toPageY(paragraphRect.top),
+        paragraphWidth: paragraphRect.width / pixelsPerPoint,
+        paragraphHeight: paragraphRect.height / pixelsPerPoint
+      };
+      const widthReference = this.horizontalAnchorReference(
+        anchor.getAttribute("data-docx-anchor-width-relative") ?? "margin",
+        dims,
+        pageNumber,
+        context
+      );
+      const widthPercent = this.anchorNumber(anchor, "width-percent");
+      if (widthPercent !== void 0) {
+        anchor.style.width = `${widthReference.size * widthPercent / 100}pt`;
+      }
+      const heightReference = this.verticalAnchorReference(
+        anchor.getAttribute("data-docx-anchor-height-relative") ?? "margin",
+        dims,
+        pageNumber,
+        context
+      );
+      const heightPercent = this.anchorNumber(anchor, "height-percent");
+      if (heightPercent !== void 0 && anchor.dataset.docxAnchorAutofit !== "true") {
+        anchor.style.height = `${heightReference.size * heightPercent / 100}pt`;
+      }
+      const sizedRect = anchor.getBoundingClientRect();
+      const width = sizedRect.width / pixelsPerPoint;
+      const height = sizedRect.height / pixelsPerPoint;
+      const horizontal2 = this.horizontalAnchorReference(
+        anchor.getAttribute("data-docx-anchor-h-relative") ?? "column",
+        dims,
+        pageNumber,
+        context
+      );
+      const vertical2 = this.verticalAnchorReference(
+        anchor.getAttribute("data-docx-anchor-v-relative") ?? "paragraph",
+        dims,
+        pageNumber,
+        context
+      );
+      const left2 = this.resolveAnchorAxis(
+        horizontal2,
+        width,
+        anchor.getAttribute("data-docx-anchor-h-align"),
+        this.anchorNumber(anchor, "h-offset"),
+        pageNumber
+      );
+      const top2 = this.resolveAnchorAxis(
+        vertical2,
+        height,
+        anchor.getAttribute("data-docx-anchor-v-align"),
+        this.anchorNumber(anchor, "v-offset"),
+        pageNumber
+      );
+      pageBox.appendChild(anchor);
+      anchor.style.position = "absolute";
+      anchor.style.left = `${left2}pt`;
+      anchor.style.top = `${top2}pt`;
+      anchor.style.margin = "0";
+    }
+  }
+  anchorNumber(anchor, suffix) {
+    const raw = anchor.getAttribute(`data-docx-anchor-${suffix}`);
+    if (raw === null) return void 0;
+    const value = Number(raw);
+    return Number.isFinite(value) ? value : void 0;
+  }
+  horizontalAnchorReference(relativeFrom, dims, pageNumber, context) {
+    const leftMargin = { start: 0, size: dims.marginLeft };
+    const rightMargin = {
+      start: dims.marginLeft + dims.contentWidth,
+      size: dims.marginRight
+    };
+    switch (relativeFrom) {
+      case "page":
+        return { start: 0, size: dims.pageWidth };
+      case "character":
+        return { start: context.staticLeft, size: 0 };
+      case "leftMargin":
+        return leftMargin;
+      case "rightMargin":
+        return rightMargin;
+      case "insideMargin":
+        return pageNumber % 2 === 1 ? leftMargin : rightMargin;
+      case "outsideMargin":
+        return pageNumber % 2 === 1 ? rightMargin : leftMargin;
+      case "paragraph":
+        return { start: context.paragraphLeft, size: context.paragraphWidth };
+      case "column":
+      case "margin":
+      default:
+        return { start: dims.marginLeft, size: dims.contentWidth };
+    }
+  }
+  verticalAnchorReference(relativeFrom, dims, pageNumber, context) {
+    const topMargin = { start: 0, size: dims.marginTop };
+    const bottomMargin = {
+      start: dims.marginTop + dims.contentHeight,
+      size: dims.marginBottom
+    };
+    switch (relativeFrom) {
+      case "page":
+        return { start: 0, size: dims.pageHeight };
+      case "paragraph":
+        return { start: context.paragraphTop, size: context.paragraphHeight };
+      case "line":
+        return { start: context.staticTop, size: context.lineHeight };
+      case "topMargin":
+        return topMargin;
+      case "bottomMargin":
+        return bottomMargin;
+      case "insideMargin":
+        return pageNumber % 2 === 1 ? topMargin : bottomMargin;
+      case "outsideMargin":
+        return pageNumber % 2 === 1 ? bottomMargin : topMargin;
+      case "margin":
+      default:
+        return { start: dims.marginTop, size: dims.contentHeight };
+    }
+  }
+  resolveAnchorAxis(reference, objectSize, alignment, offset, pageNumber) {
+    if (offset !== void 0) return reference.start + offset;
+    let fraction = 0;
+    if (alignment === "center") fraction = 0.5;
+    else if (alignment === "right" || alignment === "bottom") fraction = 1;
+    else if (alignment === "inside") fraction = pageNumber % 2 === 1 ? 0 : 1;
+    else if (alignment === "outside") fraction = pageNumber % 2 === 1 ? 1 : 0;
+    return reference.start + (reference.size - objectSize) * fraction;
+  }
   /**
    * Creates a page container element.
    */
@@ -2633,22 +2817,22 @@ var PaginationEngine = class {
     pageBox.dataset.pageNumber = String(pageNumber);
     pageBox.dataset.sectionIndex = String(sectionIndex);
     pageBox.dataset.pageInSection = String(pageInSection);
-    const effectiveHeights = this.getEffectiveHeights(dims, sectionIndex, pageInSection, pageNumber);
+    const bands = this.getPageBands(dims, sectionIndex, pageInSection, pageNumber);
     const headerSource = this.selectHeader(sectionIndex, pageInSection, pageNumber);
     if (headerSource) {
       const headerDiv = document.createElement("div");
       headerDiv.className = `${this.cssPrefix}header`;
       headerDiv.style.position = "absolute";
-      headerDiv.style.top = "0";
+      headerDiv.style.top = `${bands.headerTop}pt`;
+      headerDiv.style.bottom = "auto";
       headerDiv.style.left = `${dims.marginLeft}pt`;
       headerDiv.style.width = `${dims.contentWidth}pt`;
-      headerDiv.style.height = `${effectiveHeights.headerHeight}pt`;
+      headerDiv.style.height = `${bands.headerHeight}pt`;
       headerDiv.style.overflow = "hidden";
       headerDiv.style.boxSizing = "border-box";
       headerDiv.style.display = "flex";
       headerDiv.style.flexDirection = "column";
-      headerDiv.style.justifyContent = "flex-end";
-      headerDiv.style.paddingBottom = "4pt";
+      headerDiv.style.justifyContent = "flex-start";
       for (const child of Array.from(headerSource.childNodes)) {
         const clonedheaderDiv = child.cloneNode(true);
         if (clonedheaderDiv.nodeType === 1) this.makeClonedStoryInert(clonedheaderDiv);
@@ -2656,8 +2840,8 @@ var PaginationEngine = class {
       }
       pageBox.appendChild(headerDiv);
     }
-    const contentAreaTop = effectiveHeights.headerHeight;
-    const contentAreaHeight = effectiveHeights.contentHeight;
+    const contentAreaTop = bands.bodyTop;
+    const contentAreaHeight = bands.bodyHeight;
     const contentArea = document.createElement("div");
     contentArea.className = `${this.cssPrefix}content`;
     contentArea.style.position = "absolute";
@@ -2672,23 +2856,23 @@ var PaginationEngine = class {
     pageBox.appendChild(contentArea);
     const hasContinuation = continuation && continuation.remainingElements.length > 0;
     if (footnoteIds.length > 0 || hasContinuation) {
-      this.addPageFootnotes(pageBox, footnoteIds, dims, footnoteHeight, continuation, partialFootnotes);
+      this.addPageFootnotes(pageBox, footnoteIds, dims, bands, footnoteHeight, continuation, partialFootnotes);
     }
     const footerSource = this.selectFooter(sectionIndex, pageInSection, pageNumber);
     if (footerSource) {
       const footerDiv = document.createElement("div");
       footerDiv.className = `${this.cssPrefix}footer`;
       footerDiv.style.position = "absolute";
-      footerDiv.style.bottom = "0";
+      footerDiv.style.top = "auto";
+      footerDiv.style.bottom = `${dims.footerDistance}pt`;
       footerDiv.style.left = `${dims.marginLeft}pt`;
       footerDiv.style.width = `${dims.contentWidth}pt`;
-      footerDiv.style.height = `${effectiveHeights.footerHeight}pt`;
+      footerDiv.style.height = `${bands.footerHeight}pt`;
       footerDiv.style.overflow = "hidden";
       footerDiv.style.boxSizing = "border-box";
       footerDiv.style.display = "flex";
       footerDiv.style.flexDirection = "column";
-      footerDiv.style.justifyContent = "flex-start";
-      footerDiv.style.paddingTop = "4pt";
+      footerDiv.style.justifyContent = "flex-end";
       for (const child of Array.from(footerSource.childNodes)) {
         const clonedfooterDiv = child.cloneNode(true);
         if (clonedfooterDiv.nodeType === 1) this.makeClonedStoryInert(clonedfooterDiv);
@@ -2703,6 +2887,7 @@ var PaginationEngine = class {
       pageBox.appendChild(pageNum);
     }
     this.containerElement.appendChild(pageBox);
+    this.positionDrawingAnchors(pageBox, contentArea, dims, pageNumber);
     const notesEl = pageBox.querySelector(`.${this.cssPrefix}footnotes`);
     if (notesEl) {
       const notesHeightPt = pxToPt(notesEl.getBoundingClientRect().height);
@@ -6077,6 +6262,19 @@ function serializeInlineMarkdown(block) {
 function isListBlock(block) {
   return !!block.querySelector(":scope > [data-list-marker]");
 }
+function ensureListMarkerSeparator(block) {
+  const marker = block.querySelector(":scope > [data-list-marker]");
+  if (!marker) return;
+  const next = marker.nextElementSibling;
+  if (next?.hasAttribute("data-editor-list-separator")) return;
+  const separator = block.ownerDocument.createElement("span");
+  separator.setAttribute("data-editor-list-separator", "");
+  separator.setAttribute("data-list-marker", "true");
+  separator.setAttribute("aria-hidden", "true");
+  separator.style.display = "none";
+  separator.textContent = " ";
+  marker.after(separator);
+}
 var GENERATED_CHROME_SELECTOR = '[data-list-marker], a.footnote-ref, a.endnote-ref, a[class$="-backref"]';
 function isGeneratedChrome(node) {
   return node?.nodeType === 1 && !!node.matches?.(GENERATED_CHROME_SELECTOR);
@@ -7367,6 +7565,7 @@ var DocxEditor = class _DocxEditor {
     const unid = el.getAttribute("data-anchor");
     if (!unid || !this.anchorIdOf(el)) return;
     el.setAttribute("contenteditable", "true");
+    ensureListMarkerSeparator(el);
     el.querySelectorAll(GENERATED_CHROME_SELECTOR).forEach((m) => m.setAttribute("contenteditable", "false"));
     el.dataset.committedText = blockContentText(el);
     el.addEventListener("focus", () => {
@@ -8229,8 +8428,8 @@ var DocxEditor = class _DocxEditor {
    * editable `data-anchor` blocks in the notes section, so editing it afterwards needs no new op.
    *
    * Body blocks only: Word disallows a note reference inside a header/footer story or inside
-   * another note, and the session rejects those with `AnchorWrongKind`. Remounts, because a new
-   * note renumbers the citations after it and can add a whole part.
+   * another note, and the session rejects those with `AnchorWrongKind`. Reconciliation creates
+   * the first notes section when needed and renumbers every affected citation in place.
    */
   insertFootnote(markdown = "New footnote.") {
     this.insertNote("footnote", markdown);
@@ -8622,7 +8821,7 @@ var DocxEditor = class _DocxEditor {
    *  the current node — never a section div (multi-child) or the edit root. */
   unitWrapperOf(el) {
     let n = el;
-    while (n.parentElement && n.parentElement !== this.editRoot && n.parentElement.tagName === "DIV" && !n.parentElement.hasAttribute("data-anchor") && n.parentElement.childElementCount === 1) {
+    while (n.parentElement && n.parentElement !== this.editRoot && n.parentElement.tagName === "DIV" && !n.parentElement.hasAttribute("data-section-index") && !n.parentElement.hasAttribute("data-anchor") && n.parentElement.childElementCount === 1) {
       n = n.parentElement;
     }
     return n;
@@ -8658,6 +8857,7 @@ var DocxEditor = class _DocxEditor {
     const pureRemoved = diff.removed.filter(
       (i) => !diff.substituted.some((s) => s.oldIndex === i) && !movedOld.has(i)
     );
+    const appliedFresh = /* @__PURE__ */ new Set();
     const nodeAt = (j) => {
       const oi = diff.keep.get(j);
       if (oi !== void 0) return oldNodes[oi];
@@ -8665,7 +8865,7 @@ var DocxEditor = class _DocxEditor {
       if (movedOi !== void 0) return oldNodes[movedOi];
       if (subOldByNew.has(j)) return fresh.get(j);
       const f = fresh.get(j);
-      return f && f.isConnected ? f : null;
+      return f && appliedFresh.has(j) ? f : null;
     };
     for (const j of pureAdded) {
       const el = fresh.get(j);
@@ -8680,6 +8880,7 @@ var DocxEditor = class _DocxEditor {
       if (prevW) prevW.after(el);
       else if (nextW) nextW.before(el);
       else return "insert with no anchored neighbor";
+      appliedFresh.add(j);
       this.wireUnit(el, units[j]);
     }
     for (const i of pureRemoved) {
@@ -8718,13 +8919,13 @@ var DocxEditor = class _DocxEditor {
     if (anchorEl) this.wireBlock(anchorEl);
     root.querySelectorAll("[data-anchor]").forEach((b) => this.wireBlock(b));
   }
-  /** Old-sequence diff state for one notes section. `null` requests remount (DOM not
-   *  stampable/consistent). */
+  /** Old-sequence diff state for one notes section. `null` requests remount when an
+   *  existing list is not stampable; an absent list is the valid first-note case. */
   notesDiff(sectionClass, units) {
     const ol = this.editRoot.querySelector(`section.${sectionClass} > ol`);
     const lis = ol ? Array.from(ol.children).filter((c) => c.tagName === "LI") : [];
     if (units.length === 0 && lis.length === 0) return { lis, diff: diffUnits([], []) };
-    if (!ol) return null;
+    if (!ol) return { lis, diff: diffUnits([], units) };
     const tokens = [];
     for (const li of lis) {
       const unid = li.getAttribute("data-note-anchor");
@@ -8741,7 +8942,20 @@ var DocxEditor = class _DocxEditor {
       this.editRoot.querySelector(`section.${sectionClass}`)?.remove();
       return;
     }
-    const ol = this.editRoot.querySelector(`section.${sectionClass} > ol`);
+    let section = this.editRoot.querySelector(`:scope > section.${sectionClass}`);
+    let ol = section?.querySelector(`:scope > ol`) ?? null;
+    if (!ol) {
+      if (!section) {
+        section = document.createElement("section");
+        section.className = sectionClass;
+        const following = sectionClass === "footnotes" ? this.editRoot.querySelector(`:scope > section.endnotes`) : null;
+        if (following) following.before(section);
+        else this.editRoot.append(section);
+      }
+      if (!section.querySelector(":scope > hr")) section.prepend(document.createElement("hr"));
+      ol = document.createElement("ol");
+      section.append(ol);
+    }
     const prefix = sectionClass === "footnotes" ? "fn" : "en";
     const nodes = [];
     for (let j = 0; j < units.length; j++) {
@@ -8878,23 +9092,38 @@ var DocxEditor = class _DocxEditor {
 };
 
 // src/ribbon-chrome.ts
-var RIBBON_STYLE_VERSION = "5";
+var RIBBON_STYLE_VERSION = "8";
 var RIBBON_STYLE_ATTR = "data-docxodus-ribbon-styles";
 var RIBBON_CSS = `
 .dxr {
-  --dxr-ink: #101418;
+  /* OS-Legal design tokens (github.com/Open-Source-Legal/OS-Legal-Style):
+     deep-teal accent, slate foreground scale, warm neutral surfaces, and
+     "light touch" shadows at 0.03-0.06 opacity \u2014 structure over decoration. */
+  --dxr-ink: #1e293b;
   --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-chrome: #ffffff;
+  --dxr-chrome-sunk: #f8fafc;
+  --dxr-rule: #e2e8f0;
+  --dxr-rule-strong: #cbd5e1;
+  --dxr-accent: #0f766e;
+  --dxr-accent-hover: #0d9488;
+  --dxr-accent-active: #115e59;
+  --dxr-wash: #f0fdfa;
+  --dxr-wash-on: #ccfbf1;
+  --dxr-muted: #475569;
+  --dxr-faint: #94a3b8;
+  --dxr-data: #0f766e;
+  --dxr-danger: #dc2626;
+  --dxr-danger-wash: #fef2f2;
+  --dxr-desk: #f1f5f9;
+  --dxr-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --dxr-serif: Georgia, "Times New Roman", serif;
   --dxr-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
+  --dxr-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
+  --dxr-shadow-md: 0 1px 3px rgba(15, 23, 42, .06), 0 4px 6px rgba(15, 23, 42, .03);
+  --dxr-shadow-lg: 0 4px 6px rgba(15, 23, 42, .05), 0 10px 15px rgba(15, 23, 42, .04);
+  --dxr-shadow-xl: 0 8px 16px rgba(15, 23, 42, .06), 0 20px 25px rgba(15, 23, 42, .05);
+  --dxr-ease: cubic-bezier(.4, 0, .2, 1);
   --dxr-tap: 30px;
 
   position: relative;
@@ -8910,6 +9139,18 @@ var RIBBON_CSS = `
 }
 .dxr *, .dxr *::before, .dxr *::after { box-sizing: border-box; }
 
+/* \u2500\u2500 Card frame \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+   A drop-in embed carries its OWN boundary instead of hoping the host clips it:
+   rounded corners, a hairline, and the house elevation. overflow: clip keeps
+   the sticky chrome, scrollbars, and the loading overlay inside the curve.
+   Full-bleed hosts mount with data-frame="flush" and stay edge-to-edge. */
+.dxr[data-frame="card"] {
+  border: 1px solid var(--dxr-rule);
+  border-radius: 14px;
+  box-shadow: var(--dxr-shadow-xl);
+  overflow: clip;
+}
+
 /* Touch devices get bigger hit targets everywhere the token is used. */
 @media (pointer: coarse) { .dxr { --dxr-tap: 40px; } }
 
@@ -8938,12 +9179,13 @@ var RIBBON_CSS = `
   font-weight: 600;
   letter-spacing: -.01em;
 }
+/* A filled circle, echoing the OS-Legal "Node" motif rather than a diamond. */
 .dxr-brand .dxr-mark {
   flex: 0 0 auto;
   width: 9px;
   height: 9px;
+  border-radius: 50%;
   background: var(--dxr-accent);
-  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
 }
 .dxr-brand .dxr-docname {
   overflow: hidden;
@@ -8975,25 +9217,25 @@ var RIBBON_CSS = `
   scrollbar-width: none;
 }
 .dxr-tabs::-webkit-scrollbar { display: none; }
+/* Line-variant tabs (the house Tabs default): no boxes, no fills \u2014 the selected
+   tab is a 2px accent underline sitting on the panel's own hairline. */
 .dxr-tab {
   flex: 0 0 auto;
-  padding: 6px 15px 7px;
-  border: 1px solid transparent;
-  border-bottom: none;
-  border-radius: 5px 5px 0 0;
+  padding: 7px 14px 8px;
+  border: none;
   background: none;
   color: var(--dxr-muted);
   font: inherit;
   font-size: 12.5px;
+  font-weight: 500;
   cursor: pointer;
+  transition: color .15s var(--dxr-ease), box-shadow .15s var(--dxr-ease);
 }
-.dxr-tab:hover { color: var(--dxr-ink); background: #e6ebf3; }
+.dxr-tab:hover { color: var(--dxr-ink); }
 .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);
+  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); }
@@ -9023,7 +9265,7 @@ var RIBBON_CSS = `
 .dxr-group:last-child { border-right: none; }
 .dxr-group:first-child { padding-left: 0; }
 .dxr-glabel {
-  color: var(--dxr-muted);
+  color: var(--dxr-faint);
   font-size: 9.5px;
   font-weight: 600;
   letter-spacing: .11em;
@@ -9032,48 +9274,69 @@ var RIBBON_CSS = `
 .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 */
+/* One button family, house-style: every control is a ghost \u2014 no borders, no
+   fills, no per-button boxes. Hover paints a quiet slate wash; the active
+   (toggled) state paints a teal one. Save alone is the flat primary, so the
+   surface has exactly one accent-colored action. */
 .dxr button, .dxr label.dxr-btn {
   min-height: var(--dxr-tap);
   padding: 5px 9px;
-  border: 1px solid transparent;
-  border-radius: 4px;
+  border: none;
+  border-radius: 6px;
   background: none;
   color: var(--dxr-ink);
   font: inherit;
   font-size: 13px;
+  font-weight: 500;
   line-height: 1.15;
   cursor: pointer;
+  transition: background-color .15s var(--dxr-ease), color .15s var(--dxr-ease),
+    box-shadow .15s var(--dxr-ease), transform .15s var(--dxr-ease);
 }
 .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:hover, .dxr label.dxr-btn:hover { background: #f1f5f9; }
+.dxr button:active { background: #e2e8f0; }
 .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; }
+.dxr button.dxr-on { color: var(--dxr-accent); background: var(--dxr-wash-on); }
+.dxr-quick button, .dxr-quick label.dxr-btn { padding: 4px 10px; font-size: 12.5px; }
+/* Save \u2014 the house primary: flat accent, sm shadow, the 1px lift on hover. */
+.dxr-quick button[data-dxr="save"]:not(:disabled) {
+  background: var(--dxr-accent);
+  color: #fff;
+  font-weight: 600;
+  box-shadow: var(--dxr-shadow-sm);
+}
+.dxr-quick button[data-dxr="save"]:not(:disabled):hover {
+  background: var(--dxr-accent-hover);
+  box-shadow: var(--dxr-shadow-md);
+  transform: translateY(-1px);
+}
+.dxr-quick button[data-dxr="save"]:not(:disabled):active {
+  background: var(--dxr-accent-active);
+  box-shadow: var(--dxr-shadow-sm);
+  transform: translateY(0);
+}
+/* Icon controls sit quieter than text ones until touched (house IconButton). */
+.dxr button.dxr-icon { min-width: var(--dxr-tap); text-align: center; color: var(--dxr-muted); }
+.dxr button.dxr-icon:hover:not(:disabled) { color: var(--dxr-ink); }
+.dxr button.dxr-icon.dxr-on { color: var(--dxr-accent); }
 /* 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 button.dxr-danger:hover { color: var(--dxr-danger); background: var(--dxr-danger-wash); }
 .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;
+  border-radius: 6px;
+  background: var(--dxr-sheet);
   color: var(--dxr-ink);
   font: inherit;
   font-size: 12.5px;
 }
+.dxr select:hover, .dxr input:hover { border-color: var(--dxr-rule-strong); }
 .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);
@@ -9104,7 +9367,7 @@ var RIBBON_CSS = `
   height: 25px;
   padding: 0 10px;
   overflow-x: auto;
-  background: #f7f9fc;
+  background: #fafafa;
   border-top: 1px solid var(--dxr-rule);
   color: var(--dxr-muted);
   font-family: var(--dxr-mono);
@@ -9123,7 +9386,7 @@ var RIBBON_CSS = `
 .dxr-rail .dxr-cell:first-child { padding-left: 0; }
 .dxr-rail .dxr-cell:last-child { border-right: none; }
 .dxr-rail .dxr-k {
-  color: #8b96a3;
+  color: var(--dxr-faint);
   font-family: var(--dxr-ui);
   font-size: 9.5px;
   letter-spacing: .1em;
@@ -9131,7 +9394,7 @@ var RIBBON_CSS = `
 }
 .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; } }
+@keyframes dxr-railflash { from { background: #ccfbf1; } 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 {
@@ -9146,8 +9409,8 @@ var RIBBON_CSS = `
 .dxr-hint kbd {
   padding: 0 4px;
   border: 1px solid var(--dxr-rule);
-  border-radius: 3px;
-  background: #e8ecf3;
+  border-radius: 4px;
+  background: #f1f5f9;
   font-family: var(--dxr-mono);
   font-size: 11px;
 }
@@ -9162,13 +9425,34 @@ var RIBBON_CSS = `
    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; }
+/* Soft scroll boundaries: content dissolves at the chrome and at the bottom edge
+   instead of hard-clipping. Sticky gradient veils cost one paint layer each and
+   never intercept input. */
+.dxr-scroll::before, .dxr-scroll::after {
+  content: "";
+  position: sticky;
+  z-index: 3;
+  display: block;
+  height: 26px;
+  pointer-events: none;
+}
+.dxr-scroll::before {
+  top: 0;
+  margin-bottom: -26px;
+  background: linear-gradient(to bottom, var(--dxr-desk), transparent);
+}
+.dxr-scroll::after {
+  bottom: 0;
+  margin-top: -26px;
+  background: linear-gradient(to top, var(--dxr-desk), transparent);
+}
 .dxr[data-chrome] .dxr-surface { margin: 26px auto; padding: 0 16px 96px; }
 .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; } }
+@media (hover: hover) { .dxr-surface [contenteditable="true"]:hover { background: var(--dxr-wash); } }
 
 /* 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
@@ -9180,9 +9464,10 @@ var RIBBON_CSS = `
   margin: 0 auto 14px;
   padding: 9px 72px 13px;
   border: 1px solid var(--dxr-rule);
-  border-left: 2px solid #c2ccd9;
-  border-radius: 3px;
+  border-left: 2px solid #5eead4;
+  border-radius: 6px;
   background: var(--dxr-sheet);
+  box-shadow: var(--dxr-shadow-sm);
 }
 .dxr-surface .docx-hf-band + .docx-body-flow { margin-top: 0; }
 .dxr-surface .docx-hf-band[data-hf-band="footer"] { margin: 14px auto 0; }
@@ -9201,8 +9486,8 @@ var RIBBON_CSS = `
 .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;
+  border-radius: 6px;
+  background: var(--dxr-sheet);
   color: var(--dxr-ink);
   font: inherit;
   font-family: var(--dxr-ui);
@@ -9216,22 +9501,22 @@ var RIBBON_CSS = `
 .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;
+  border: 1px solid #fde68a;
+  border-left: 2px solid #d97706;
+  border-radius: 6px;
+  background: #fffbeb;
+  color: #92400e;
   font-size: 12px;
   line-height: 1.45;
 }
 .dxr-surface .docx-hf-warning button {
   margin-left: 6px;
   padding: 2px 8px;
-  border-color: #e8d9a8;
+  border-color: #fde68a;
   background: #fff;
   font-size: 12px;
 }
-.dxr-surface .docx-hf-placeholder { color: #9aa4b1; font-style: italic; }
+.dxr-surface .docx-hf-placeholder { color: var(--dxr-faint); font-style: italic; }
 .dxr-surface .docx-hf-inherited {
   color: var(--dxr-muted);
   font-style: italic;
@@ -9251,7 +9536,7 @@ var RIBBON_CSS = `
   padding: 56px 0;
   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);
+  box-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 12px 24px rgba(15, 23, 42, .06);
 }
 
 /* \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 */
@@ -9261,9 +9546,9 @@ var RIBBON_CSS = `
   z-index: 30;
   padding: 9px;
   border: 1px solid var(--dxr-rule);
-  border-radius: 6px;
+  border-radius: 12px;
   background: #fff;
-  box-shadow: 0 4px 16px rgba(16, 20, 24, .18);
+  box-shadow: var(--dxr-shadow-xl);
 }
 .dxr-pop[data-open] { display: block; }
 .dxr-gridcells { display: grid; grid-template-columns: repeat(10, 16px); gap: 2px; }
@@ -9271,11 +9556,11 @@ var RIBBON_CSS = `
   width: 16px;
   height: 16px;
   border: 1px solid var(--dxr-rule);
-  border-radius: 2px;
-  background: #f2f5f9;
+  border-radius: 3px;
+  background: var(--dxr-chrome-sunk);
   cursor: pointer;
 }
-.dxr-gridcells div[data-on] { background: var(--dxr-wash); border-color: var(--dxr-accent); }
+.dxr-gridcells div[data-on] { background: #ccfbf1; border-color: var(--dxr-accent); }
 .dxr-popfoot {
   display: flex;
   justify-content: space-between;
@@ -9358,11 +9643,11 @@ var RIBBON_CSS = `
   display: grid;
   place-items: center;
   padding: 24px;
-  color: #f4f9ff;
+  color: #f8fafc;
   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%);
+    radial-gradient(circle at 20% 20%, rgba(13, 148, 136, .2), transparent 22rem),
+    radial-gradient(circle at 82% 80%, rgba(45, 212, 191, .1), transparent 24rem),
+    linear-gradient(150deg, #0b1220 0%, #0f172a 55%, #0f2723 100%);
   transition: opacity .55s ease, visibility .55s ease;
 }
 .dxr-loader[hidden] { display: none; }
@@ -9381,14 +9666,14 @@ var RIBBON_CSS = `
 .dxr-orbit {
   position: absolute;
   inset: 7%;
-  border: 1px solid rgba(115, 204, 255, .22);
+  border: 1px solid rgba(45, 212, 191, .24);
   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);
+  border-color: rgba(94, 234, 212, .3);
   animation-duration: 6s;
   animation-direction: reverse;
 }
@@ -9398,19 +9683,19 @@ var RIBBON_CSS = `
   height: 10px;
   border-radius: 50%;
   content: "";
-  background: #52e5ff;
-  box-shadow: 0 0 18px #52e5ff;
+  background: #2dd4bf;
+  box-shadow: 0 0 18px rgba(45, 212, 191, .8);
 }
 .dxr-orbit::before { top: -5px; left: 50%; }
-.dxr-orbit::after { right: 7%; bottom: 12%; background: #b26cff; box-shadow: 0 0 18px #b26cff; }
+.dxr-orbit::after { right: 7%; bottom: 12%; background: #5eead4; box-shadow: 0 0 18px rgba(94, 234, 212, .7); }
 .dxr-card {
   position: absolute;
   inset: 24% 28%;
   padding: 20px 15px;
-  border: 1px solid rgba(255, 255, 255, .33);
+  border: 1px solid rgba(255, 255, 255, .3);
   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);
+  background: linear-gradient(150deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05));
+  box-shadow: 0 22px 50px rgba(0, 0, 0, .35), 0 0 45px rgba(13, 148, 136, .15);
   backdrop-filter: blur(10px);
   animation: dxr-float 3.6s ease-in-out infinite;
 }
@@ -9420,8 +9705,8 @@ var RIBBON_CSS = `
   right: -9px;
   padding: 4px 7px;
   border-radius: 6px;
-  background: #52e5ff;
-  color: #06111d;
+  background: #2dd4bf;
+  color: #042f2e;
   content: "DOCX";
   font-size: 8px;
   font-weight: 900;
@@ -9438,46 +9723,49 @@ var RIBBON_CSS = `
 }
 .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-card i:nth-child(4) { width: 58%; background: rgba(248, 113, 113, .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: 1px solid rgba(255, 255, 255, .16);
   border-radius: 11px;
-  background: rgba(12, 28, 49, .88);
+  background: rgba(15, 30, 46, .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-chip.dxr-b { left: 2%; top: 30%; color: #5eead4; animation: dxr-chip 3s ease-in-out infinite; }
+.dxr-chip.dxr-r { right: -2%; bottom: 24%; color: #fca5a5; animation: dxr-chip 3s -1.4s ease-in-out infinite; }
+.dxr-chip.dxr-s { left: 20%; bottom: 0; color: #6ee7b7; animation: dxr-chip 3s -.7s ease-in-out infinite; }
+.dxr-eyebrow { color: #5eead4; font-size: 10px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
+/* Georgia headline \u2014 the house pairing of a serif headline over Inter UI copy. */
 .dxr-loader h2 {
   margin: 10px auto 10px;
   max-width: 520px;
-  font-size: clamp(23px, 5vw, 40px);
-  line-height: 1.05;
-  letter-spacing: -.045em;
+  font-family: var(--dxr-serif);
+  font-size: clamp(23px, 5vw, 38px);
+  font-weight: 500;
+  line-height: 1.08;
+  letter-spacing: -.02em;
 }
-.dxr-loader-copy > p { margin: 0 auto; max-width: 46ch; color: #9eb2c9; font-size: 13.5px; line-height: 1.6; }
+.dxr-loader-copy > p { margin: 0 auto; max-width: 46ch; color: #94a3b8; 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;
+  border: 1px solid rgba(148, 163, 184, .16);
+  border-radius: 12px;
   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 .dxr-num { color: #2dd4bf; 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 .dxr-adcopy { display: block; margin-top: 4px; color: #8ba0b9; font-size: 11.5px; line-height: 1.45; }
 .dxr-ad[data-swap] { animation: dxr-swap .4s ease; }
 .dxr-track {
   height: 3px;
@@ -9491,8 +9779,8 @@ var RIBBON_CSS = `
   width: 12%;
   height: 100%;
   border-radius: inherit;
-  background: linear-gradient(90deg, #52e5ff, #5c7cff, #b26cff);
-  box-shadow: 0 0 16px rgba(82, 229, 255, .55);
+  background: linear-gradient(90deg, #14b8a6, #2dd4bf, #5eead4);
+  box-shadow: 0 0 16px rgba(45, 212, 191, .5);
   transition: width .65s cubic-bezier(.22, .8, .28, 1);
 }
 .dxr-meta {
@@ -9501,7 +9789,7 @@ var RIBBON_CSS = `
   gap: 14px;
   margin: 9px auto 0;
   max-width: 420px;
-  color: #647e9c;
+  color: #64748b;
   font: 700 9px/1 var(--dxr-mono);
   letter-spacing: .09em;
   text-transform: uppercase;
@@ -9510,9 +9798,9 @@ var RIBBON_CSS = `
   display: none;
   margin-top: 18px;
   padding: 9px 14px;
-  border: 1px solid rgba(255, 127, 145, .4);
+  border: 1px solid rgba(248, 113, 113, .4);
   border-radius: 9px;
-  background: rgba(255, 127, 145, .12);
+  background: rgba(248, 113, 113, .12);
   color: #fff;
   cursor: pointer;
 }
@@ -9627,8 +9915,8 @@ var RIBBON_HTML = `
 )}</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-list="bullet" title="Bullet list">Bullets</button>
+          <button type="button" data-list="decimal" title="Numbered list">Numbered</button>
           <button type="button" data-pagebreak title="Start this block on a new page">Page break</button>
         </div>
       </div>
@@ -9951,6 +10239,7 @@ var RibbonSurface = class {
     const root = doc.createElement("div");
     root.className = "dxr";
     root.dataset.state = "idle";
+    root.dataset.frame = this.options.frame ?? "flush";
     root.innerHTML = RIBBON_HTML;
     for (const el of Array.from(root.querySelectorAll("[data-dxr]"))) {
       el.id = this.idPrefix + el.dataset.dxr;
@@ -12018,6 +12307,9 @@ async function createRibbonEditor(container, source, options = {}) {
   mount2.root.style.minHeight = "0";
   const ribbon = mountRibbon(mount2.root, {
     documentName: ribbonOptions.documentName ?? nameFromSource(source),
+    // A drop-in embed sits in the middle of someone's page, so it carries its own
+    // boundary (rounded card + shadow). Full-bleed hosts pass frame: "flush".
+    frame: "card",
     ...ribbonOptions,
     // Exports arrive after the runtime boots; the loader covers that gap.
     exports: void 0