docxodus 9.7.0 → 9.8.0

package/dist/embed.iife.js

@@ -1450,7 +1450,7 @@ var Docxodus = (() => {
   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;
   }
@@ -1466,8 +1466,8 @@ var Docxodus = (() => {
     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,
@@ -1477,8 +1477,37 @@ var Docxodus = (() => {
       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) {
@@ -1755,9 +1784,9 @@ var Docxodus = (() => {
      */
     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
       );
     }
     /**
@@ -2281,7 +2310,7 @@ var Docxodus = (() => {
     /**
      * 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;
@@ -2292,12 +2321,12 @@ var Docxodus = (() => {
       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";
@@ -2371,50 +2400,51 @@ var Docxodus = (() => {
       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");
@@ -2422,7 +2452,6 @@ var Docxodus = (() => {
       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));
       }
@@ -2442,7 +2471,7 @@ var Docxodus = (() => {
       let currentContent = [];
       let pageNumber = startPageNumber;
       let pageInSection = 1;
-      let { contentHeight: effectiveContentHeight } = this.getEffectiveHeights(
+      let { bodyHeight: effectiveContentHeight } = this.getPageBands(
         dims,
         sectionIndex,
         pageInSection,
@@ -2477,8 +2506,8 @@ var Docxodus = (() => {
         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 = [];
@@ -2540,7 +2569,7 @@ var Docxodus = (() => {
             ) + additionalChainFootnoteHeight;
             const currentAvailableHeight = remainingHeight - currentFootnoteHeight;
             if (currentChainHeight > currentAvailableHeight) {
-              const nextPageHeights = this.getEffectiveHeights(
+              const nextPageBands = this.getPageBands(
                 dims,
                 sectionIndex,
                 pageInSection + 1,
@@ -2556,7 +2585,7 @@ var Docxodus = (() => {
                 dims.contentWidth,
                 nextPageContinuation
               );
-              if (freshChainBodyHeight + freshChainFootnoteHeight <= nextPageHeights.contentHeight) {
+              if (freshChainBodyHeight + freshChainFootnoteHeight <= nextPageBands.bodyHeight) {
                 finishPage();
               }
             }
@@ -2725,6 +2754,161 @@ var Docxodus = (() => {
         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.
      */
@@ -2751,22 +2935,22 @@ var Docxodus = (() => {
       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);
@@ -2774,8 +2958,8 @@ var Docxodus = (() => {
         }
         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";
@@ -2790,23 +2974,23 @@ var Docxodus = (() => {
       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);
@@ -2821,6 +3005,7 @@ var Docxodus = (() => {
         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);
@@ -6195,6 +6380,19 @@ var Docxodus = (() => {
   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);
@@ -7485,6 +7683,7 @@ var Docxodus = (() => {
       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", () => {
@@ -8347,8 +8546,8 @@ var Docxodus = (() => {
      * 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);
@@ -8740,7 +8939,7 @@ var Docxodus = (() => {
      *  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;
@@ -8776,6 +8975,7 @@ var Docxodus = (() => {
       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];
@@ -8783,7 +8983,7 @@ var Docxodus = (() => {
         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);
@@ -8798,6 +8998,7 @@ var Docxodus = (() => {
         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) {
@@ -8836,13 +9037,13 @@ var Docxodus = (() => {
       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");
@@ -8859,7 +9060,20 @@ var Docxodus = (() => {
         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++) {

package/dist/page-geometry.d.ts

@@ -32,16 +32,22 @@ export interface PageDimensions {
     marginBottom: number;
     /** Left margin in points */
     marginLeft: number;
-    /** Header distance from top of page in points */
+    /** `w:pgMar/@w:header` — page top edge to the TOP of the header story, in points. */
+    headerDistance: number;
+    /** `w:pgMar/@w:footer` — page bottom edge to the BOTTOM of the footer story, in points. */
+    footerDistance: number;
+    /** @deprecated Misnamed alias of {@link headerDistance} — it never held a height. */
     headerHeight: number;
-    /** Footer distance from bottom of page in points */
+    /** @deprecated Misnamed alias of {@link footerDistance} — it never held a height. */
     footerHeight: number;
 }
 /** US Letter portrait — Word's default, and this module's fallback for an unstamped section. */
 export declare const DEFAULT_PAGE_WIDTH = 612;
 export declare const DEFAULT_PAGE_HEIGHT = 792;
 export declare const DEFAULT_MARGIN = 72;
-/** Default header/footer distance (0.5 inch). */
+/** Default header/footer distance from the paper edge (0.5 inch). */
+export declare const DEFAULT_HEADER_FOOTER_DISTANCE = 36;
+/** @deprecated Misnamed alias of {@link DEFAULT_HEADER_FOOTER_DISTANCE}. */
 export declare const DEFAULT_HEADER_FOOTER_HEIGHT = 36;
 /** Converts pixels to points (assuming 96 DPI screen). */
 export declare function pxToPt(px: number): number;
@@ -49,6 +55,47 @@ export declare function pxToPt(px: number): number;
 export declare function ptToPx(pt: number): number;
 /** Parses page dimensions from a section wrapper's data attributes. */
 export declare function parseSectionDimensions(section: HTMLElement): PageDimensions;
+/**
+ * Where a page's three bands sit, in points measured from the page's TOP edge.
+ *
+ * Resolved by {@link resolvePageBands} from the section's page setup plus the measured
+ * height of the running content actually selected for that page.
+ */
+export interface PageBands {
+    /** Top of the header band; it grows downward from here. */
+    headerTop: number;
+    /** Height of the header band (the measured header story, clipped to the body's top). */
+    headerHeight: number;
+    /** Top of the body text band. */
+    bodyTop: number;
+    /** Height of the body text band. */
+    bodyHeight: number;
+    /** Top of the footer band; it grows upward, so its BOTTOM is the fixed edge. */
+    footerTop: number;
+    /** Height of the footer band (the measured footer story, clipped to the body's bottom). */
+    footerHeight: number;
+}
+/**
+ * A body band this short cannot hold a single line, and a page that can hold nothing sends
+ * every block down the oversized-block path. Running content may push the body — Word does
+ * that — but it may not delete it, so a pathological header/footer gives this much back.
+ */
+export declare const MIN_BODY_BAND_PT = 12;
+/**
+ * Word's page band model.
+ *
+ * `w:header`/`w:footer` are DISTANCES from the paper edge to the running content, and
+ * `w:top`/`w:bottom` are distances from the paper edge to the body text — four independent
+ * numbers, not two nested boxes. The header is laid out from `headerDistance` downward and
+ * the footer from `footerDistance` upward; the body then starts at the top margin unless the
+ * header has already run past it, and ends at the bottom margin unless the footer has
+ * already climbed above it.
+ *
+ * Anchoring the bands to the margins instead — header bottom-aligned to `marginTop`, footer
+ * top-aligned to `pageHeight - marginBottom` — collapses both toward the body by exactly
+ * `margin - distance`, which is what this function replaced.
+ */
+export declare function resolvePageBands(dims: PageDimensions, headerContentHeight: number, footerContentHeight: number): PageBands;
 /** Every section wrapper under `root`, or `root` itself when the render stamped none. */
 export declare function sectionWrappers(root: HTMLElement): HTMLElement[];
 /**

package/dist/page-geometry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page-geometry.d.ts","sourceRoot":"","sources":["../src/page-geometry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,sFAAsF;AACtF,MAAM,WAAW,cAAc;IAC7B,2BAA2B;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,4BAA4B;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,YAAY,EAAE,MAAM,CAAC;IACrB,yDAAyD;IACzD,aAAa,EAAE,MAAM,CAAC;IACtB,2BAA2B;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,6BAA6B;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,8BAA8B;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,4BAA4B;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,YAAY,EAAE,MAAM,CAAC;IACrB,oDAAoD;IACpD,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,gGAAgG;AAChG,eAAO,MAAM,kBAAkB,MAAM,CAAC;AACtC,eAAO,MAAM,mBAAmB,MAAM,CAAC;AACvC,eAAO,MAAM,cAAc,KAAK,CAAC;AACjC,iDAAiD;AACjD,eAAO,MAAM,4BAA4B,KAAK,CAAC;AAE/C,0DAA0D;AAC1D,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAEzC;AAED,0DAA0D;AAC1D,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAEzC;AAED,uEAAuE;AACvE,wBAAgB,sBAAsB,CAAC,OAAO,EAAE,WAAW,GAAG,cAAc,CAwB3E;AAED,yFAAyF;AACzF,wBAAgB,eAAe,CAAC,IAAI,EAAE,WAAW,GAAG,WAAW,EAAE,CAGhE;AAED;;;;GAIG;AACH,eAAO,MAAM,aAAa,OAAO,CAAC;AAElC,wBAAgB,QAAQ,CAAC,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,SAAI,GAAG,MAAM,CAKhF;AAED;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CACvB,EAAE,EAAE,WAAW,EACf,KAAK,EAAE,MAAM,EACb,SAAS,CAAC,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAC5C,IAAI,CAqBN"}
+{"version":3,"file":"page-geometry.d.ts","sourceRoot":"","sources":["../src/page-geometry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,sFAAsF;AACtF,MAAM,WAAW,cAAc;IAC7B,2BAA2B;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,4BAA4B;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,YAAY,EAAE,MAAM,CAAC;IACrB,yDAAyD;IACzD,aAAa,EAAE,MAAM,CAAC;IACtB,2BAA2B;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,6BAA6B;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,8BAA8B;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,4BAA4B;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,qFAAqF;IACrF,cAAc,EAAE,MAAM,CAAC;IACvB,2FAA2F;IAC3F,cAAc,EAAE,MAAM,CAAC;IACvB,qFAAqF;IACrF,YAAY,EAAE,MAAM,CAAC;IACrB,qFAAqF;IACrF,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,gGAAgG;AAChG,eAAO,MAAM,kBAAkB,MAAM,CAAC;AACtC,eAAO,MAAM,mBAAmB,MAAM,CAAC;AACvC,eAAO,MAAM,cAAc,KAAK,CAAC;AACjC,qEAAqE;AACrE,eAAO,MAAM,8BAA8B,KAAK,CAAC;AACjD,4EAA4E;AAC5E,eAAO,MAAM,4BAA4B,KAAiC,CAAC;AAE3E,0DAA0D;AAC1D,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAEzC;AAED,0DAA0D;AAC1D,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAEzC;AAED,uEAAuE;AACvE,wBAAgB,sBAAsB,CAAC,OAAO,EAAE,WAAW,GAAG,cAAc,CA8B3E;AAED;;;;;GAKG;AACH,MAAM,WAAW,SAAS;IACxB,2DAA2D;IAC3D,SAAS,EAAE,MAAM,CAAC;IAClB,wFAAwF;IACxF,YAAY,EAAE,MAAM,CAAC;IACrB,iCAAiC;IACjC,OAAO,EAAE,MAAM,CAAC;IAChB,oCAAoC;IACpC,UAAU,EAAE,MAAM,CAAC;IACnB,gFAAgF;IAChF,SAAS,EAAE,MAAM,CAAC;IAClB,2FAA2F;IAC3F,YAAY,EAAE,MAAM,CAAC;CACtB;AAED;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAEnC;;;;;;;;;;;;;GAaG;AACH,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,cAAc,EACpB,mBAAmB,EAAE,MAAM,EAC3B,mBAAmB,EAAE,MAAM,GAC1B,SAAS,CAkCX;AAED,yFAAyF;AACzF,wBAAgB,eAAe,CAAC,IAAI,EAAE,WAAW,GAAG,WAAW,EAAE,CAGhE;AAED;;;;GAIG;AACH,eAAO,MAAM,aAAa,OAAO,CAAC;AAElC,wBAAgB,QAAQ,CAAC,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,SAAI,GAAG,MAAM,CAKhF;AAED;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CACvB,EAAE,EAAE,WAAW,EACf,KAAK,EAAE,MAAM,EACb,SAAS,CAAC,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAC5C,IAAI,CAqBN"}