docxodus 9.7.0 → 9.9.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) {
@@ -1397,6 +1426,9 @@ function applyZoom(el, scale, naturalPt) {
 }
 
 // src/pagination.ts
+function samePageBox(a, b) {
+  return a.pageWidth === b.pageWidth && a.pageHeight === b.pageHeight && a.marginTop === b.marginTop && a.marginRight === b.marginRight && a.marginBottom === b.marginBottom && a.marginLeft === b.marginLeft;
+}
 var MAX_FOOTNOTE_AREA_RATIO = 0.6;
 var MIN_BODY_CONTENT_HEIGHT = 72;
 var PaginationEngine = class {
@@ -1442,16 +1474,43 @@ var PaginationEngine = class {
     );
     this.pageNumbering = this.parsePageNumbering(sections);
     const sectionsToProcess = sections.length > 0 ? Array.from(sections) : [this.stagingElement];
+    const runs = [];
     for (const section of sectionsToProcess) {
-      const sectionIndex = parseInt(section.dataset.sectionIndex || "0", 10);
       const dims = parseSectionDimensions(section);
+      const previous = runs[runs.length - 1];
+      if (previous && section.dataset.sectionType === "continuous" && samePageBox(previous.dims, dims)) {
+        previous.sections.push(section);
+      } else {
+        runs.push({
+          sections: [section],
+          sectionIndex: parseInt(section.dataset.sectionIndex || "0", 10),
+          dims
+        });
+      }
+    }
+    for (const run of runs) {
       this.stagingElement.style.visibility = "hidden";
       this.stagingElement.style.position = "absolute";
       this.stagingElement.style.left = "-9999px";
       this.stagingElement.style.display = "block";
-      section.style.width = `${dims.contentWidth}pt`;
-      const blocks = this.measureBlocks(section, dims);
-      const sectionPages = this.flowToPages(blocks, dims, pageNumber, sectionIndex);
+      const blocks = [];
+      for (const section of run.sections) {
+        section.style.width = `${run.dims.contentWidth}pt`;
+        const columnCount = parseInt(section.dataset.cols || "1", 10);
+        if (columnCount > 1) {
+          const gap = parseFloat(section.dataset.colGap || "");
+          blocks.push(...this.buildColumnBlocks(
+            section,
+            run.dims,
+            run.sectionIndex,
+            columnCount,
+            Number.isFinite(gap) ? gap : 36
+          ));
+        } else {
+          blocks.push(...this.measureBlocks(section, run.dims));
+        }
+      }
+      const sectionPages = this.flowToPages(blocks, run.dims, pageNumber, run.sectionIndex);
       pages.push(...sectionPages);
       pageNumber += sectionPages.length;
     }
@@ -1540,11 +1599,70 @@ var PaginationEngine = class {
         keepWithNext: child.dataset.keepWithNext === "true",
         keepLines: child.dataset.keepLines === "true",
         pageBreakBefore: child.dataset.pageBreakBefore === "true",
-        isPageBreak
+        isPageBreak,
+        isWordParagraph: this.isWordParagraphElement(child)
       });
     }
     return blocks;
   }
+  /**
+   * Flows a multi-column (`w:cols`) section's children into CSS-multicol container
+   * blocks. Word lays such a section out as N columns inside the same body extent;
+   * a balanced `column-count` container reproduces that geometry, and the paginator
+   * then places each container as one ordinary measured block. A container grows
+   * greedily until its balanced height would exceed the smallest page body available
+   * to the section, so a long columned section still splits across pages at block
+   * boundaries. Each child lands in exactly one container, so anchors never
+   * duplicate. An explicit page break child passes through as its own block, which
+   * ends the current container and lets the normal flow logic turn the page.
+   */
+  buildColumnBlocks(section, dims, sectionIndex, columnCount, columnGapPt) {
+    const children = Array.from(section.children);
+    const blocks = [];
+    const maxFragmentHeight = this.smallestEffectiveContentHeight(dims, sectionIndex);
+    const isBreak = (child) => child.dataset.pageBreak === "true" || child.classList.contains(`${this.cssPrefix}break`);
+    const makeContainer = (slice) => {
+      const container = document.createElement("div");
+      container.style.columnCount = String(columnCount);
+      container.style.columnGap = `${columnGapPt}pt`;
+      for (const child of slice) {
+        container.appendChild(child.cloneNode(true));
+      }
+      return container;
+    };
+    let start2 = 0;
+    while (start2 < children.length) {
+      if (isBreak(children[start2])) {
+        blocks.push(this.measureElement(children[start2], dims));
+        start2++;
+        continue;
+      }
+      let end = start2 + 1;
+      let container = makeContainer(children.slice(start2, end));
+      let measured = this.measureElement(container, dims);
+      while (end < children.length && !isBreak(children[end])) {
+        const candidate = makeContainer(children.slice(start2, end + 1));
+        const candidateMeasured = this.measureElement(candidate, dims);
+        if (candidateMeasured.heightPt > maxFragmentHeight) break;
+        container = candidate;
+        measured = candidateMeasured;
+        end++;
+      }
+      blocks.push({
+        element: container,
+        heightPt: measured.heightPt,
+        marginTopPt: measured.marginTopPt,
+        marginBottomPt: measured.marginBottomPt,
+        keepWithNext: false,
+        keepLines: false,
+        pageBreakBefore: false,
+        isPageBreak: false,
+        isWordParagraph: false
+      });
+      start2 = end;
+    }
+    return blocks;
+  }
   /**
    * Measures one element in the same hidden staging context used for the source blocks.
    * This is intentionally DOM-based: table row heights cannot be inferred from individual
@@ -1569,7 +1687,8 @@ var PaginationEngine = class {
       keepWithNext: element.dataset.keepWithNext === "true",
       keepLines: element.dataset.keepLines === "true",
       pageBreakBefore: element.dataset.pageBreakBefore === "true",
-      isPageBreak: element.dataset.pageBreak === "true" || element.classList.contains(`${this.cssPrefix}break`)
+      isPageBreak: element.dataset.pageBreak === "true" || element.classList.contains(`${this.cssPrefix}break`),
+      isWordParagraph: this.isWordParagraphElement(element)
     };
     this.stagingElement.removeChild(measurementHost);
     return measured;
@@ -1601,10 +1720,15 @@ var PaginationEngine = class {
    * collapsed-margin rules as normal block placement. The trailing margin is
    * intentionally excluded, matching the individual block fit check.
    */
-  measureKeepWithNextChainBodyHeight(chain, previousMarginBottomPt, isFirstOnPage) {
+  measureKeepWithNextChainBodyHeight(chain, previousMarginBottomPt, isFirstOnPage, pageInSection) {
     const firstBlock = chain[0];
     if (!firstBlock) return 0;
-    const firstMarginTop = isFirstOnPage ? firstBlock.marginTopPt : Math.max(firstBlock.marginTopPt, previousMarginBottomPt) - previousMarginBottomPt;
+    const firstMarginTop = this.effectiveBlockMarginTop(
+      firstBlock,
+      previousMarginBottomPt,
+      isFirstOnPage,
+      pageInSection
+    );
     let bodyHeight = firstMarginTop + firstBlock.heightPt;
     for (let index = 1; index < chain.length; index++) {
       const previousBlock = chain[index - 1];
@@ -1613,6 +1737,35 @@ var PaginationEngine = class {
     }
     return bodyHeight;
   }
+  /** Word paragraphs render as `p`, or as `h1`–`h6` when their style has an outline level. */
+  isWordParagraphElement(element) {
+    return element.tagName === "P" || /^H[1-6]$/.test(element.tagName);
+  }
+  shouldSuppressPageTopSpacing(block, isFirstOnPage, pageInSection) {
+    return isFirstOnPage && pageInSection > 1 && block.isWordParagraph === true;
+  }
+  /**
+   * Resolves the part of a block's top margin that consumes the current page.
+   *
+   * In Word's native DOCX layout, paragraph space-before is suppressed when a paragraph is the
+   * first body block on a later page of the SAME section. The first page of a document/section is
+   * the exception and keeps its spacing. Tables and other block margins are not paragraph spacing,
+   * so they continue to use the ordinary CSS collapsing rule.
+   */
+  effectiveBlockMarginTop(block, previousMarginBottomPt, isFirstOnPage, pageInSection) {
+    if (this.shouldSuppressPageTopSpacing(block, isFirstOnPage, pageInSection)) {
+      return 0;
+    }
+    return isFirstOnPage ? block.marginTopPt : Math.max(block.marginTopPt, previousMarginBottomPt) - previousMarginBottomPt;
+  }
+  /** Clone a source block with the same page-top spacing decision used by the height budget. */
+  cloneBlockForPage(block, isFirstOnPage, pageInSection) {
+    const clone = block.element.cloneNode(true);
+    if (this.shouldSuppressPageTopSpacing(block, isFirstOnPage, pageInSection)) {
+      clone.style.setProperty("margin-top", "0", "important");
+    }
+    return clone;
+  }
   /**
    * Finds footnote references introduced by a sequence of blocks, preserving
    * document order and excluding references already assigned to the page.
@@ -1637,9 +1790,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 +2316,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 +2327,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 +2406,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 +2458,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 +2477,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 +2512,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 = [];
@@ -2418,11 +2571,12 @@ var PaginationEngine = class {
           const currentChainHeight = this.measureKeepWithNextChainBodyHeight(
             keepChain,
             prevMarginBottomPt,
-            currentContent.length === 0
+            currentContent.length === 0,
+            pageInSection
           ) + additionalChainFootnoteHeight;
           const currentAvailableHeight = remainingHeight - currentFootnoteHeight;
           if (currentChainHeight > currentAvailableHeight) {
-            const nextPageHeights = this.getEffectiveHeights(
+            const nextPageBands = this.getPageBands(
               dims,
               sectionIndex,
               pageInSection + 1,
@@ -2431,14 +2585,15 @@ var PaginationEngine = class {
             const freshChainBodyHeight = this.measureKeepWithNextChainBodyHeight(
               keepChain,
               0,
-              true
+              true,
+              pageInSection + 1
             );
             const freshChainFootnoteHeight = this.measureFootnotesHeight(
               newChainFootnoteIds,
               dims.contentWidth,
               nextPageContinuation
             );
-            if (freshChainBodyHeight + freshChainFootnoteHeight <= nextPageHeights.contentHeight) {
+            if (freshChainBodyHeight + freshChainFootnoteHeight <= nextPageBands.bodyHeight) {
               finishPage();
             }
           }
@@ -2457,10 +2612,12 @@ var PaginationEngine = class {
         additionalFootnoteHeight = totalFootnoteHeight - currentFootnoteHeight;
       }
       const isFirstOnPage = currentContent.length === 0;
-      let effectiveMarginTop = block.marginTopPt;
-      if (!isFirstOnPage) {
-        effectiveMarginTop = Math.max(block.marginTopPt, prevMarginBottomPt) - prevMarginBottomPt;
-      }
+      const effectiveMarginTop = this.effectiveBlockMarginTop(
+        block,
+        prevMarginBottomPt,
+        isFirstOnPage,
+        pageInSection
+      );
       const blockSpace = effectiveMarginTop + block.heightPt + additionalFootnoteHeight;
       const effectiveRemainingHeight = remainingHeight - currentFootnoteHeight;
       const bodyContentUsed = effectiveContentHeight - remainingHeight;
@@ -2480,19 +2637,19 @@ var PaginationEngine = class {
         }
       }
       if (blockSpace <= effectiveRemainingHeight) {
-        currentContent.push(block.element.cloneNode(true));
+        currentContent.push(this.cloneBlockForPage(block, isFirstOnPage, pageInSection));
         remainingHeight -= effectiveMarginTop + block.heightPt + block.marginBottomPt;
         prevMarginBottomPt = block.marginBottomPt;
         if (newFootnoteIds.length > 0) {
           currentFootnoteIds.push(...newFootnoteIds);
           currentFootnoteHeight += additionalFootnoteHeight;
         }
-      } else if (block.heightPt + block.marginTopPt <= effectiveContentHeight) {
+      } else if (block.heightPt + this.effectiveBlockMarginTop(block, 0, true, pageInSection + 1) <= effectiveContentHeight) {
         const blockSpaceWithoutFootnotes = effectiveMarginTop + block.heightPt;
         const minBodySpaceNeeded = bodyContentUsed + blockSpaceWithoutFootnotes + MIN_BODY_CONTENT_HEIGHT;
         const canExpandFootnotes = minBodySpaceNeeded <= effectiveContentHeight;
         if (newFootnoteIds.length > 0 && blockSpaceWithoutFootnotes <= effectiveRemainingHeight) {
-          currentContent.push(block.element.cloneNode(true));
+          currentContent.push(this.cloneBlockForPage(block, isFirstOnPage, pageInSection));
           remainingHeight -= effectiveMarginTop + block.heightPt + block.marginBottomPt;
           prevMarginBottomPt = block.marginBottomPt;
           const availableForFootnotes = Math.min(
@@ -2539,7 +2696,7 @@ var PaginationEngine = class {
           const expandedFootnoteSpace = Math.min(maxFootnoteArea, additionalFootnoteHeight + currentFootnoteHeight);
           const bodySpaceAfterExpansion = effectiveContentHeight - expandedFootnoteSpace;
           if (blockSpaceWithoutFootnotes <= bodySpaceAfterExpansion - bodyContentUsed) {
-            currentContent.push(block.element.cloneNode(true));
+            currentContent.push(this.cloneBlockForPage(block, isFirstOnPage, pageInSection));
             remainingHeight = bodySpaceAfterExpansion - bodyContentUsed - blockSpaceWithoutFootnotes;
             prevMarginBottomPt = block.marginBottomPt;
             currentFootnoteIds.push(...newFootnoteIds);
@@ -2547,8 +2704,14 @@ var PaginationEngine = class {
           } else {
             finishPage();
             const newPageFootnoteHeight = allBlockFootnoteIds.length > 0 ? this.measureFootnotesHeight(allBlockFootnoteIds, dims.contentWidth, currentContinuation) : currentContinuation ? this.measureContinuationHeight(currentContinuation, dims.contentWidth) : 0;
-            const newPageSpace = block.marginTopPt + block.heightPt + block.marginBottomPt;
-            currentContent.push(block.element.cloneNode(true));
+            const newPageMarginTop = this.effectiveBlockMarginTop(
+              block,
+              0,
+              true,
+              pageInSection
+            );
+            const newPageSpace = newPageMarginTop + block.heightPt + block.marginBottomPt;
+            currentContent.push(this.cloneBlockForPage(block, true, pageInSection));
             remainingHeight = effectiveContentHeight - newPageSpace;
             prevMarginBottomPt = block.marginBottomPt;
             currentFootnoteIds = [...currentFootnoteIds, ...allBlockFootnoteIds];
@@ -2557,8 +2720,14 @@ var PaginationEngine = class {
         } else {
           finishPage();
           const newPageFootnoteHeight = allBlockFootnoteIds.length > 0 ? this.measureFootnotesHeight(allBlockFootnoteIds, dims.contentWidth, currentContinuation) : currentContinuation ? this.measureContinuationHeight(currentContinuation, dims.contentWidth) : 0;
-          const newPageSpace = block.marginTopPt + block.heightPt + block.marginBottomPt;
-          currentContent.push(block.element.cloneNode(true));
+          const newPageMarginTop = this.effectiveBlockMarginTop(
+            block,
+            0,
+            true,
+            pageInSection
+          );
+          const newPageSpace = newPageMarginTop + block.heightPt + block.marginBottomPt;
+          currentContent.push(this.cloneBlockForPage(block, true, pageInSection));
           remainingHeight = effectiveContentHeight - newPageSpace;
           prevMarginBottomPt = block.marginBottomPt;
           currentFootnoteIds = [...currentFootnoteIds, ...allBlockFootnoteIds];
@@ -2577,7 +2746,7 @@ var PaginationEngine = class {
         if (currentContent.length > 0) {
           finishPage();
         }
-        currentContent.push(block.element.cloneNode(true));
+        currentContent.push(this.cloneBlockForPage(block, true, pageInSection));
         currentFootnoteIds = [...currentFootnoteIds, ...allBlockFootnoteIds];
         finishPage();
       }
@@ -2607,6 +2776,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 +2957,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 +2980,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 +2996,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 +3027,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 +6402,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 +7705,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 +8568,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 +8961,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 +8997,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 +9005,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 +9020,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 +9059,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 +9082,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++) {
@@ -8922,6 +9276,7 @@ var RIBBON_CSS = `
   color: var(--dxr-ink);
   background: var(--dxr-desk);
   -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
 }
 .dxr *, .dxr *::before, .dxr *::after { box-sizing: border-box; }