docxodus 7.1.0 → 9.0.0

package/dist/pagination.bundle.js

@@ -24,6 +24,42 @@ var DocxodusPagination = (() => {
     PaginationEngine: () => PaginationEngine,
     paginateHtml: () => paginateHtml
   });
+
+  // src/page-number-format.ts
+  var ROMAN_ONES = ["", "i", "ii", "iii", "iv", "v", "vi", "vii", "viii", "ix"];
+  var ROMAN_TENS = ["", "x", "xx", "xxx", "xl", "l", "lx", "lxx", "lxxx", "xc"];
+  var ROMAN_HUNDREDS = ["", "c", "cc", "ccc", "cd", "d", "dc", "dcc", "dccc", "cm"];
+  var ROMAN_THOUSANDS = ["", "m", "mm", "mmm"];
+  function toRoman(value) {
+    if (value <= 0 || value >= 4e3) return String(value);
+    return ROMAN_THOUSANDS[Math.floor(value / 1e3)] + ROMAN_HUNDREDS[Math.floor(value % 1e3 / 100)] + ROMAN_TENS[Math.floor(value % 100 / 10)] + ROMAN_ONES[value % 10];
+  }
+  function toLetter(value) {
+    if (value <= 0) return String(value);
+    const wrapped = value % 780 === 0 ? 780 : value % 780;
+    const repeats = Math.floor((wrapped - 1) / 26) + 1;
+    return "abcdefghijklmnopqrstuvwxyz".charAt((wrapped - 1) % 26).repeat(repeats);
+  }
+  var RENDERERS = {
+    // ST_NumberFormat tokens (w:pgNumType/@w:fmt, w:numFmt).
+    decimal: (v) => String(v),
+    lowerRoman: toRoman,
+    upperRoman: (v) => toRoman(v).toUpperCase(),
+    lowerLetter: toLetter,
+    upperLetter: (v) => toLetter(v).toUpperCase(),
+    // Field `\*` general-formatting switch arguments.
+    Arabic: (v) => String(v),
+    roman: toRoman,
+    ROMAN: (v) => toRoman(v).toUpperCase(),
+    alphabetic: toLetter,
+    ALPHABETIC: (v) => toLetter(v).toUpperCase()
+  };
+  function formatPageNumber(value, format) {
+    const renderer = format ? RENDERERS[format] : void 0;
+    return (renderer ?? RENDERERS.decimal)(value);
+  }
+
+  // src/pagination.ts
   var DEFAULT_PAGE_WIDTH = 612;
   var DEFAULT_PAGE_HEIGHT = 792;
   var DEFAULT_MARGIN = 72;
@@ -70,6 +106,8 @@ var DocxodusPagination = (() => {
      */
     constructor(staging, container, options = {}) {
       this.pendingFootnoteContinuation = null;
+      /** Per-section `w:pgNumType` (start / format), read off the section wrappers. */
+      this.pageNumbering = /* @__PURE__ */ new Map();
       this.stagingElement = typeof staging === "string" ? document.getElementById(staging) : staging;
       this.containerElement = typeof container === "string" ? document.getElementById(container) : container;
       if (!this.stagingElement) {
@@ -82,6 +120,7 @@ var DocxodusPagination = (() => {
       this.cssPrefix = options.cssPrefix ?? "page-";
       this.showPageNumbers = options.showPageNumbers ?? true;
       this.pageGap = options.pageGap ?? 20;
+      this.fragmentParagraphs = options.fragmentParagraphs ?? false;
       this.hfRegistry = /* @__PURE__ */ new Map();
       this.footnoteRegistry = /* @__PURE__ */ new Map();
     }
@@ -98,6 +137,7 @@ var DocxodusPagination = (() => {
       const sections = this.stagingElement.querySelectorAll(
         "[data-section-index]"
       );
+      this.pageNumbering = this.parsePageNumbering(sections);
       const sectionsToProcess = sections.length > 0 ? Array.from(sections) : [this.stagingElement];
       for (const section of sectionsToProcess) {
         const sectionIndex = parseInt(section.dataset.sectionIndex || "0", 10);
@@ -113,8 +153,62 @@ var DocxodusPagination = (() => {
         pageNumber += sectionPages.length;
       }
       this.stagingElement.style.display = "none";
+      this.substitutePageNumberFields(pages.length);
       return { totalPages: pages.length, pages };
     }
+    /** Read each section's `w:pgNumType` off its wrapper (see {@link SectionPageNumbering}). */
+    parsePageNumbering(sections) {
+      const map = /* @__PURE__ */ new Map();
+      for (const section of Array.from(sections)) {
+        const index = parseInt(section.dataset.sectionIndex || "0", 10);
+        const rawStart = section.dataset.pageNumStart;
+        const start = rawStart === void 0 ? void 0 : parseInt(rawStart, 10);
+        map.set(index, {
+          start: start !== void 0 && Number.isFinite(start) ? start : void 0,
+          format: section.dataset.pageNumFmt
+        });
+      }
+      return map;
+    }
+    /**
+     * Fill in the page-number fields inside every page's cloned header/footer.
+     *
+     * A header/footer is authored once and cloned onto each page, so a PAGE field's single cached
+     * result would otherwise show the same number on every page — the whole reason the converter
+     * marks these. `data-field-format` (the field's own `\*` switch) wins over the section's format
+     * when present, which is exactly how Word resolves the two.
+     *
+     * Runs after layout because NUMPAGES cannot be known before the last page exists. The
+     * substituted text can therefore be marginally wider than the cached result the header was
+     * measured with; the header band clips, so the failure mode is a hair of overflow rather than
+     * a layout that disagrees with itself.
+     *
+     * Scoped to the CLONED header/footer regions on purpose. A page-number field in body text is
+     * ordinary run content that the editor may make editable, and committing an edited block writes
+     * back whatever text the DOM holds — rewriting it here would mean a body field commits a number
+     * the document never contained. Body content is also not cloned, so it does not have the problem
+     * this method exists to solve.
+     */
+    substitutePageNumberFields(totalPages) {
+      const boxes = this.containerElement.querySelectorAll(`.${this.cssPrefix}box`);
+      for (const box of Array.from(boxes)) {
+        const markers = box.querySelectorAll(
+          `.${this.cssPrefix}header [data-field], .${this.cssPrefix}footer [data-field]`
+        );
+        if (markers.length === 0) continue;
+        const sectionIndex = parseInt(box.dataset.sectionIndex || "0", 10);
+        const pageNumber = parseInt(box.dataset.pageNumber || "1", 10);
+        const pageInSection = parseInt(box.dataset.pageInSection || "1", 10);
+        const numbering = this.pageNumbering.get(sectionIndex) ?? {};
+        const displayed = numbering.start !== void 0 ? numbering.start + pageInSection - 1 : pageNumber;
+        for (const marker of Array.from(markers)) {
+          const kind = marker.dataset.field;
+          if (kind !== "PAGE" && kind !== "NUMPAGES") continue;
+          const format = marker.dataset.fieldFormat ?? numbering.format;
+          marker.textContent = formatPageNumber(kind === "PAGE" ? displayed : totalPages, format);
+        }
+      }
+    }
     /**
      * Measures all content blocks in a section.
      */
@@ -148,6 +242,393 @@ var DocxodusPagination = (() => {
       }
       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
+     * rows because wrapping and collapsed borders change the height of a fragment.
+     */
+    measureElement(element, dims) {
+      const measurementHost = document.createElement("div");
+      measurementHost.style.position = "absolute";
+      measurementHost.style.visibility = "hidden";
+      measurementHost.style.left = "-9999px";
+      measurementHost.style.width = `${dims.contentWidth}pt`;
+      const measuredElement = element.cloneNode(true);
+      measurementHost.appendChild(measuredElement);
+      this.stagingElement.appendChild(measurementHost);
+      const rect = measuredElement.getBoundingClientRect();
+      const style = window.getComputedStyle(measuredElement);
+      const measured = {
+        element,
+        heightPt: pxToPt(rect.height),
+        marginTopPt: pxToPt(parseFloat(style.marginTop) || 0),
+        marginBottomPt: pxToPt(parseFloat(style.marginBottom) || 0),
+        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`)
+      };
+      this.stagingElement.removeChild(measurementHost);
+      return measured;
+    }
+    /**
+     * Returns the contiguous keep-with-next chain beginning at a block.
+     *
+     * A hard page break or a page-break-before directive is stronger than a
+     * keep-with-next directive, so it terminates the chain. The caller only
+     * keeps a chain together when the whole chain can fit on a fresh page.
+     */
+    getKeepWithNextChain(blocks, startIndex) {
+      const firstBlock = blocks[startIndex];
+      if (!firstBlock) return [];
+      const chain = [firstBlock];
+      let lastIndex = startIndex;
+      while (blocks[lastIndex].keepWithNext) {
+        const nextBlock = blocks[lastIndex + 1];
+        if (!nextBlock || nextBlock.isPageBreak || nextBlock.pageBreakBefore) {
+          break;
+        }
+        chain.push(nextBlock);
+        lastIndex++;
+      }
+      return chain;
+    }
+    /**
+     * Measures the visible body height of a keep-with-next chain using the same
+     * collapsed-margin rules as normal block placement. The trailing margin is
+     * intentionally excluded, matching the individual block fit check.
+     */
+    measureKeepWithNextChainBodyHeight(chain, previousMarginBottomPt, isFirstOnPage) {
+      const firstBlock = chain[0];
+      if (!firstBlock) return 0;
+      const firstMarginTop = isFirstOnPage ? firstBlock.marginTopPt : Math.max(firstBlock.marginTopPt, previousMarginBottomPt) - previousMarginBottomPt;
+      let bodyHeight = firstMarginTop + firstBlock.heightPt;
+      for (let index = 1; index < chain.length; index++) {
+        const previousBlock = chain[index - 1];
+        const block = chain[index];
+        bodyHeight += Math.max(previousBlock.marginBottomPt, block.marginTopPt) + block.heightPt;
+      }
+      return bodyHeight;
+    }
+    /**
+     * Finds footnote references introduced by a sequence of blocks, preserving
+     * document order and excluding references already assigned to the page.
+     */
+    collectNewFootnoteIds(blocks, existingFootnoteIds) {
+      const knownIds = new Set(existingFootnoteIds);
+      const newIds = [];
+      for (const block of blocks) {
+        for (const id of this.extractFootnoteRefs(block.element)) {
+          if (!knownIds.has(id)) {
+            knownIds.add(id);
+            newIds.push(id);
+          }
+        }
+      }
+      return newIds;
+    }
+    /**
+     * The shortest body available to a section's first, default, or even page.
+     * A row fragment must fit every variant, otherwise a later header/footer could
+     * send it through the oversized-block fallback again.
+     */
+    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
+      );
+    }
+    /**
+     * Builds a clone of a simple table wrapper containing a contiguous run of rows.
+     * Complex table features are deliberately rejected by the caller: a split across
+     * merged cells, nested tables, or footnotes cannot be made correct by cloning rows.
+     */
+    createSimpleTableFragment(wrapper, table, body, rows, retainAnchor) {
+      const wrapperClone = wrapper.cloneNode(false);
+      const tableClone = table.cloneNode(false);
+      for (const child of Array.from(table.children)) {
+        if (child !== body) {
+          tableClone.appendChild(child.cloneNode(true));
+        }
+      }
+      const bodyClone = body.cloneNode(false);
+      for (const row of rows) {
+        bodyClone.appendChild(row.cloneNode(true));
+      }
+      tableClone.appendChild(bodyClone);
+      if (!retainAnchor) {
+        wrapperClone.removeAttribute("data-anchor");
+        tableClone.removeAttribute("data-anchor");
+      }
+      wrapperClone.appendChild(tableClone);
+      return wrapperClone;
+    }
+    /**
+     * Splits an oversized, ordinary table at row boundaries. This only participates
+     * in the existing oversized-block fallback; unsupported tables keep the previous
+     * overflow behavior rather than risking broken table semantics.
+     */
+    trySplitSimpleOversizedTable(block, dims, sectionIndex) {
+      const wrapper = block.element;
+      if (wrapper.tagName !== "DIV" || wrapper.children.length !== 1 || block.keepWithNext || block.keepLines || block.pageBreakBefore || block.isPageBreak) {
+        return null;
+      }
+      const table = wrapper.firstElementChild;
+      if (!(table instanceof HTMLTableElement)) {
+        return null;
+      }
+      const body = table.tBodies.length === 1 ? table.tBodies[0] : null;
+      if (!body || table.tHead || table.tFoot || body.rows.length < 2 || Array.from(table.children).some((child) => child !== body && child.tagName !== "COLGROUP") || table.querySelector("table, [rowspan], [colspan], [data-footnote-id]") || wrapper.querySelector("[data-footnote-id]")) {
+        return null;
+      }
+      const rows = Array.from(body.rows);
+      const minimumContentHeight = this.smallestEffectiveContentHeight(dims, sectionIndex);
+      const maximumFragmentHeight = minimumContentHeight - block.marginTopPt - block.marginBottomPt;
+      if (maximumFragmentHeight <= 0) {
+        return null;
+      }
+      const groups = [];
+      let start = 0;
+      while (start < rows.length) {
+        let end = start;
+        while (end < rows.length) {
+          const candidate = this.createSimpleTableFragment(
+            wrapper,
+            table,
+            body,
+            rows.slice(start, end + 1),
+            start === 0
+          );
+          const measured = this.measureElement(candidate, dims);
+          if (measured.heightPt > maximumFragmentHeight) {
+            break;
+          }
+          end++;
+        }
+        if (end === start) {
+          return null;
+        }
+        groups.push(rows.slice(start, end));
+        start = end;
+      }
+      if (groups.length < 2) {
+        return null;
+      }
+      const fragments = [];
+      for (let index = 0; index < groups.length; index++) {
+        const isFirst = index === 0;
+        const isLast = index === groups.length - 1;
+        const fragment = this.createSimpleTableFragment(
+          wrapper,
+          table,
+          body,
+          groups[index],
+          isFirst
+        );
+        if (!isFirst) {
+          fragment.style.setProperty("margin-top", "0", "important");
+        }
+        if (!isLast) {
+          fragment.style.setProperty("margin-bottom", "0", "important");
+        }
+        const measured = this.measureElement(fragment, dims);
+        if (measured.heightPt + measured.marginTopPt + measured.marginBottomPt > minimumContentHeight) {
+          return null;
+        }
+        fragments.push({
+          ...measured,
+          keepWithNext: false,
+          keepLines: false,
+          pageBreakBefore: false,
+          isPageBreak: false
+        });
+      }
+      return fragments;
+    }
+    /**
+     * A DOM endpoint that can finish a paragraph fragment. Endpoints are chosen
+     * after whitespace or at a run boundary so the paginator never deliberately
+     * cuts through an ordinary word merely to fill a little more of a page.
+     */
+    paragraphFragmentEndpoints(paragraph) {
+      const endpoints = [];
+      const walker = document.createTreeWalker(paragraph, NodeFilter.SHOW_TEXT);
+      let textNode;
+      while (textNode = walker.nextNode()) {
+        const text = textNode.data;
+        if (text.length === 0) continue;
+        const whitespace = /\s+/g;
+        let match;
+        while ((match = whitespace.exec(text)) !== null) {
+          endpoints.push({ node: textNode, offset: match.index + match[0].length });
+        }
+        if (endpoints.length === 0 || endpoints[endpoints.length - 1].node !== textNode || endpoints[endpoints.length - 1].offset !== text.length) {
+          endpoints.push({ node: textNode, offset: text.length });
+        }
+      }
+      return endpoints;
+    }
+    /**
+     * Whether a range contains visible text after ignoring bidi/zero-width marks.
+     * Paragraph fragmentation deliberately excludes non-textual descendants, so
+     * this is enough to reject empty head or tail fragments.
+     */
+    hasVisibleFragmentText(fragment) {
+      return (fragment.textContent || "").replace(/[\u200B-\u200F\uFEFF]/g, "").trim().length > 0;
+    }
+    /**
+     * Phase one only handles text-like paragraph descendants. Objects, explicit
+     * line breaks, list markers, notes, and out-of-flow/inline-block content all
+     * require their own line-layout rules and retain the established whole-block
+     * fallback instead of risking broken content or duplicate anchors.
+     */
+    canFragmentParagraph(block) {
+      if (!this.fragmentParagraphs || block.element.tagName !== "P") {
+        return false;
+      }
+      const paragraph = block.element;
+      if (block.keepWithNext || block.keepLines || block.pageBreakBefore || block.isPageBreak || paragraph.dataset.widowControl === "true" || paragraph.hasAttribute("contenteditable")) {
+        return false;
+      }
+      const unsupportedDescendants = [
+        "br",
+        "img",
+        "picture",
+        "svg",
+        "math",
+        "canvas",
+        "video",
+        "audio",
+        "iframe",
+        "object",
+        "embed",
+        "input",
+        "button",
+        "select",
+        "textarea",
+        "table",
+        "ol",
+        "ul",
+        "li",
+        "dl",
+        "div",
+        "p",
+        "section",
+        "article",
+        "aside",
+        "figure",
+        "fieldset",
+        "details",
+        "[data-footnote-id]",
+        "[data-list-marker]",
+        "[data-anchor]",
+        "[id]",
+        "[contenteditable]"
+      ].join(", ");
+      if (paragraph.querySelector(unsupportedDescendants)) {
+        return false;
+      }
+      const paragraphStyle = window.getComputedStyle(paragraph);
+      if (paragraphStyle.display !== "block" || paragraphStyle.position !== "static" || paragraphStyle.float !== "none" || paragraphStyle.whiteSpace !== "normal" || paragraphStyle.breakBefore !== "auto" || paragraphStyle.breakAfter !== "auto" || paragraphStyle.breakInside === "avoid" || paragraphStyle.pageBreakBefore !== "auto" || paragraphStyle.pageBreakAfter !== "auto" || paragraphStyle.pageBreakInside === "avoid") {
+        return false;
+      }
+      for (const descendant of Array.from(paragraph.querySelectorAll("*"))) {
+        const style = window.getComputedStyle(descendant);
+        if (style.display !== "inline" || style.position !== "static" || style.float !== "none" || style.whiteSpace !== "normal") {
+          return false;
+        }
+      }
+      return true;
+    }
+    /**
+     * Builds one range-cloned paragraph fragment. Only the leading fragment keeps
+     * the source paragraph's addressability; continuations must not duplicate an
+     * id/data-anchor in the rendered document.
+     */
+    createParagraphFragment(paragraph, range, retainSourceIdentity, isFinalFragment) {
+      const fragment = paragraph.cloneNode(false);
+      const contents = range.cloneContents();
+      fragment.appendChild(contents);
+      if (!retainSourceIdentity) {
+        fragment.removeAttribute("id");
+        fragment.removeAttribute("data-anchor");
+        fragment.style.setProperty("margin-top", "0", "important");
+        fragment.style.setProperty("text-indent", "0", "important");
+      }
+      if (!isFinalFragment) {
+        fragment.style.setProperty("margin-bottom", "0", "important");
+      }
+      return fragment;
+    }
+    /**
+     * Splits a simple paragraph at the largest DOM Range endpoint that fits the
+     * currently available body space. The caller then processes the tail normally,
+     * allowing it to fragment again on later pages when necessary.
+     */
+    tryFragmentParagraph(block, dims, availableHeightPt, effectiveMarginTopPt) {
+      if (!this.canFragmentParagraph(block) || availableHeightPt <= effectiveMarginTopPt) {
+        return null;
+      }
+      const paragraph = block.element;
+      const endpoints = this.paragraphFragmentEndpoints(paragraph);
+      if (endpoints.length < 2) {
+        return null;
+      }
+      let low = 0;
+      let high = endpoints.length - 2;
+      let best = null;
+      while (low <= high) {
+        const middle = Math.floor((low + high) / 2);
+        const endpoint = endpoints[middle];
+        const headRange = document.createRange();
+        headRange.setStart(paragraph, 0);
+        headRange.setEnd(endpoint.node, endpoint.offset);
+        const headContents = headRange.cloneContents();
+        if (!this.hasVisibleFragmentText(headContents)) {
+          low = middle + 1;
+          continue;
+        }
+        const head = this.createParagraphFragment(paragraph, headRange, true, false);
+        const measured = this.measureElement(head, dims);
+        if (effectiveMarginTopPt + measured.heightPt <= availableHeightPt) {
+          best = { endpoint, element: head, measured };
+          low = middle + 1;
+        } else {
+          high = middle - 1;
+        }
+      }
+      if (!best) {
+        return null;
+      }
+      const tailRange = document.createRange();
+      tailRange.setStart(best.endpoint.node, best.endpoint.offset);
+      tailRange.setEnd(paragraph, paragraph.childNodes.length);
+      const tailContents = tailRange.cloneContents();
+      if (!this.hasVisibleFragmentText(tailContents)) {
+        return null;
+      }
+      const tail = this.createParagraphFragment(paragraph, tailRange, false, true);
+      const tailMeasured = this.measureElement(tail, dims);
+      return [
+        {
+          ...best.measured,
+          element: best.element,
+          keepWithNext: false,
+          keepLines: false,
+          pageBreakBefore: false,
+          isPageBreak: false
+        },
+        {
+          ...tailMeasured,
+          element: tail,
+          keepWithNext: false,
+          keepLines: false,
+          pageBreakBefore: false,
+          isPageBreak: false
+        }
+      ];
+    }
     /**
      * Parses the header/footer registry from the staging element.
      * Also measures heights during parsing for lazy-loading compatibility.
@@ -251,6 +732,7 @@ var DocxodusPagination = (() => {
       measureContainer.style.visibility = "hidden";
       measureContainer.style.width = `${contentWidth}pt`;
       measureContainer.style.left = "-9999px";
+      measureContainer.className = this.cssPrefix + "footnotes";
       const hr = document.createElement("hr");
       measureContainer.appendChild(hr);
       if (hasContinuation) {
@@ -285,6 +767,7 @@ var DocxodusPagination = (() => {
       measureContainer.style.visibility = "hidden";
       measureContainer.style.width = `${contentWidth}pt`;
       measureContainer.style.left = "-9999px";
+      measureContainer.className = this.cssPrefix + "footnotes";
       const hr = document.createElement("hr");
       measureContainer.appendChild(hr);
       for (const el of continuation.remainingElements) {
@@ -303,11 +786,17 @@ var DocxodusPagination = (() => {
     splitFootnoteToFit(footnoteElement, availableHeightPt, contentWidth) {
       const footnoteContent = footnoteElement.querySelector(".footnote-content");
       if (!footnoteContent) {
-        return { fits: [footnoteElement.cloneNode(true)], overflow: [] };
+        return {
+          fits: Array.from(footnoteElement.children).map((el) => el.cloneNode(true)),
+          overflow: []
+        };
       }
       const children = Array.from(footnoteContent.children);
       if (children.length <= 1) {
-        return { fits: [footnoteElement.cloneNode(true)], overflow: [] };
+        return {
+          fits: children.map((el) => el.cloneNode(true)),
+          overflow: []
+        };
       }
       const fits = [];
       const overflow = [];
@@ -317,6 +806,7 @@ var DocxodusPagination = (() => {
       hrMeasure.style.visibility = "hidden";
       hrMeasure.style.width = `${contentWidth}pt`;
       hrMeasure.style.left = "-9999px";
+      hrMeasure.className = this.cssPrefix + "footnotes";
       const hr = document.createElement("hr");
       hrMeasure.appendChild(hr);
       this.stagingElement.appendChild(hrMeasure);
@@ -331,6 +821,7 @@ var DocxodusPagination = (() => {
         measureContainer.style.visibility = "hidden";
         measureContainer.style.width = `${contentWidth}pt`;
         measureContainer.style.left = "-9999px";
+        measureContainer.className = this.cssPrefix + "footnotes";
         measureContainer.appendChild(child.cloneNode(true));
         this.stagingElement.appendChild(measureContainer);
         const childHeight = pxToPt(measureContainer.getBoundingClientRect().height);
@@ -358,6 +849,7 @@ var DocxodusPagination = (() => {
       measureContainer.style.visibility = "hidden";
       measureContainer.style.width = `${contentWidth}pt`;
       measureContainer.style.left = "-9999px";
+      measureContainer.className = this.cssPrefix + "footnotes";
       measureContainer.appendChild(footnote.cloneNode(true));
       this.stagingElement.appendChild(measureContainer);
       const rect = measureContainer.getBoundingClientRect();
@@ -541,12 +1033,14 @@ var DocxodusPagination = (() => {
       let currentFootnoteHeight = 0;
       let currentContinuation = this.pendingFootnoteContinuation;
       let nextPageContinuation = null;
+      let deferredFootnoteIds = [];
       let currentPartialFootnotes = [];
       if (currentContinuation && currentContinuation.remainingElements.length > 0) {
         currentFootnoteHeight = this.measureContinuationHeight(currentContinuation, dims.contentWidth);
       }
       const finishPage = () => {
-        if (currentContent.length === 0 && !currentContinuation) return;
+        const hasCurrentContinuation = (currentContinuation?.remainingElements.length ?? 0) > 0;
+        if (currentContent.length === 0 && !hasCurrentContinuation) return;
         const page = this.createPage(
           dims,
           pageNumber,
@@ -570,15 +1064,25 @@ var DocxodusPagination = (() => {
         currentPartialFootnotes = [];
         currentContinuation = nextPageContinuation;
         nextPageContinuation = null;
+        if (deferredFootnoteIds.length > 0) {
+          currentFootnoteIds = [...deferredFootnoteIds];
+          deferredFootnoteIds = [];
+        }
         if (currentContinuation && currentContinuation.remainingElements.length > 0) {
           currentFootnoteHeight = this.measureContinuationHeight(currentContinuation, dims.contentWidth);
         } else {
           currentFootnoteHeight = 0;
         }
+        if (currentFootnoteIds.length > 0) {
+          currentFootnoteHeight += this.measureFootnotesHeight(
+            currentFootnoteIds,
+            dims.contentWidth,
+            null
+          );
+        }
       };
       for (let i = 0; i < blocks.length; i++) {
         const block = blocks[i];
-        const nextBlock = blocks[i + 1];
         if (block.isPageBreak) {
           finishPage();
           continue;
@@ -586,8 +1090,59 @@ var DocxodusPagination = (() => {
         if (block.pageBreakBefore && currentContent.length > 0) {
           finishPage();
         }
-        const blockFootnoteIds = this.extractFootnoteRefs(block.element);
-        const newFootnoteIds = blockFootnoteIds.filter((id) => !currentFootnoteIds.includes(id));
+        const previousBlock = blocks[i - 1];
+        const startsKeepChain = !previousBlock || !previousBlock.keepWithNext || previousBlock.isPageBreak || block.pageBreakBefore;
+        const pageHasOccupiedSpace = currentContent.length > 0 || currentFootnoteHeight > 0;
+        if (pageHasOccupiedSpace && block.keepWithNext && startsKeepChain) {
+          const keepChain = this.getKeepWithNextChain(blocks, i);
+          if (keepChain.length > 1) {
+            const newChainFootnoteIds = this.collectNewFootnoteIds(
+              keepChain,
+              currentFootnoteIds
+            );
+            let additionalChainFootnoteHeight = 0;
+            if (newChainFootnoteIds.length > 0 && this.footnoteRegistry.size > 0) {
+              const totalChainFootnoteHeight = this.measureFootnotesHeight(
+                [...currentFootnoteIds, ...newChainFootnoteIds],
+                dims.contentWidth,
+                currentContinuation
+              );
+              additionalChainFootnoteHeight = Math.max(
+                0,
+                totalChainFootnoteHeight - currentFootnoteHeight
+              );
+            }
+            const currentChainHeight = this.measureKeepWithNextChainBodyHeight(
+              keepChain,
+              prevMarginBottomPt,
+              currentContent.length === 0
+            ) + additionalChainFootnoteHeight;
+            const currentAvailableHeight = remainingHeight - currentFootnoteHeight;
+            if (currentChainHeight > currentAvailableHeight) {
+              const nextPageHeights = this.getEffectiveHeights(
+                dims,
+                sectionIndex,
+                pageInSection + 1,
+                pageNumber + 1
+              );
+              const freshChainBodyHeight = this.measureKeepWithNextChainBodyHeight(
+                keepChain,
+                0,
+                true
+              );
+              const freshChainFootnoteHeight = this.measureFootnotesHeight(
+                newChainFootnoteIds,
+                dims.contentWidth,
+                nextPageContinuation
+              );
+              if (freshChainBodyHeight + freshChainFootnoteHeight <= nextPageHeights.contentHeight) {
+                finishPage();
+              }
+            }
+          }
+        }
+        const allBlockFootnoteIds = this.extractFootnoteRefs(block.element);
+        const newFootnoteIds = this.collectNewFootnoteIds([block], currentFootnoteIds);
         let additionalFootnoteHeight = 0;
         if (newFootnoteIds.length > 0 && this.footnoteRegistry.size > 0) {
           const combinedFootnoteIds = [...currentFootnoteIds, ...newFootnoteIds];
@@ -604,15 +1159,23 @@ var DocxodusPagination = (() => {
           effectiveMarginTop = Math.max(block.marginTopPt, prevMarginBottomPt) - prevMarginBottomPt;
         }
         const blockSpace = effectiveMarginTop + block.heightPt + additionalFootnoteHeight;
-        let neededHeight = blockSpace;
-        if (block.keepWithNext && nextBlock && !nextBlock.isPageBreak) {
-          const collapsedMargin = Math.max(block.marginBottomPt, nextBlock.marginTopPt);
-          neededHeight = effectiveMarginTop + block.heightPt + collapsedMargin + nextBlock.heightPt + additionalFootnoteHeight;
-        }
         const effectiveRemainingHeight = remainingHeight - currentFootnoteHeight;
         const bodyContentUsed = effectiveContentHeight - remainingHeight;
         const maxFootnoteArea = effectiveContentHeight * MAX_FOOTNOTE_AREA_RATIO;
         const maxFootnoteExpansion = Math.max(0, maxFootnoteArea - currentFootnoteHeight);
+        if (blockSpace > effectiveRemainingHeight) {
+          const paragraphFragments = this.tryFragmentParagraph(
+            block,
+            dims,
+            effectiveRemainingHeight,
+            effectiveMarginTop
+          );
+          if (paragraphFragments) {
+            blocks.splice(i, 1, ...paragraphFragments);
+            i--;
+            continue;
+          }
+        }
         if (blockSpace <= effectiveRemainingHeight) {
           currentContent.push(block.element.cloneNode(true));
           remainingHeight -= effectiveMarginTop + block.heightPt + block.marginBottomPt;
@@ -654,28 +1217,18 @@ var DocxodusPagination = (() => {
                       footnoteId,
                       fittingElements: fits
                     });
-                    nextPageContinuation = {
-                      footnoteId,
-                      remainingElements: overflow
-                    };
+                    if (overflow.length > 0) {
+                      nextPageContinuation = {
+                        footnoteId,
+                        remainingElements: overflow
+                      };
+                    }
                     currentFootnoteHeight = availableForFootnotes;
                   } else {
-                    nextPageContinuation = {
-                      footnoteId,
-                      remainingElements: Array.from(footnote.querySelectorAll(".footnote-content > *")).map((el) => el.cloneNode(true))
-                    };
-                    if (nextPageContinuation.remainingElements.length === 0) {
-                      nextPageContinuation.remainingElements = [footnote.cloneNode(true)];
-                    }
+                    deferredFootnoteIds.push(footnoteId);
                   }
                 } else {
-                  nextPageContinuation = {
-                    footnoteId,
-                    remainingElements: Array.from(footnote.querySelectorAll(".footnote-content > *")).map((el) => el.cloneNode(true))
-                  };
-                  if (nextPageContinuation.remainingElements.length === 0) {
-                    nextPageContinuation.remainingElements = [footnote.cloneNode(true)];
-                  }
+                  deferredFootnoteIds.push(footnoteId);
                 }
               }
             }
@@ -690,30 +1243,39 @@ var DocxodusPagination = (() => {
               currentFootnoteHeight = expandedFootnoteSpace;
             } else {
               finishPage();
-              const newPageFootnoteHeight = blockFootnoteIds.length > 0 ? this.measureFootnotesHeight(blockFootnoteIds, dims.contentWidth, currentContinuation) : currentContinuation ? this.measureContinuationHeight(currentContinuation, dims.contentWidth) : 0;
+              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));
               remainingHeight = effectiveContentHeight - newPageSpace;
               prevMarginBottomPt = block.marginBottomPt;
-              currentFootnoteIds = [...blockFootnoteIds];
+              currentFootnoteIds = [...currentFootnoteIds, ...allBlockFootnoteIds];
               currentFootnoteHeight = newPageFootnoteHeight;
             }
           } else {
             finishPage();
-            const newPageFootnoteHeight = blockFootnoteIds.length > 0 ? this.measureFootnotesHeight(blockFootnoteIds, dims.contentWidth, currentContinuation) : currentContinuation ? this.measureContinuationHeight(currentContinuation, dims.contentWidth) : 0;
+            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));
             remainingHeight = effectiveContentHeight - newPageSpace;
             prevMarginBottomPt = block.marginBottomPt;
-            currentFootnoteIds = [...blockFootnoteIds];
+            currentFootnoteIds = [...currentFootnoteIds, ...allBlockFootnoteIds];
             currentFootnoteHeight = newPageFootnoteHeight;
           }
         } else {
+          const tableFragments = this.trySplitSimpleOversizedTable(block, dims, sectionIndex);
+          if (tableFragments) {
+            if (currentContent.length > 0 || currentContinuation) {
+              finishPage();
+            }
+            blocks.splice(i, 1, ...tableFragments);
+            i--;
+            continue;
+          }
           if (currentContent.length > 0) {
             finishPage();
           }
           currentContent.push(block.element.cloneNode(true));
-          currentFootnoteIds = [...blockFootnoteIds];
+          currentFootnoteIds = [...currentFootnoteIds, ...allBlockFootnoteIds];
           finishPage();
         }
       }
@@ -721,6 +1283,27 @@ var DocxodusPagination = (() => {
       this.pendingFootnoteContinuation = nextPageContinuation;
       return pages;
     }
+    /**
+     * Strip block addressing from a header/footer node cloned into a page box.
+     *
+     * A running story is authored ONCE and cloned onto every page, so the clones all carry the same
+     * `data-anchor` — on this document, 42 page boxes claiming one footer paragraph. Left editable,
+     * committing any one of them writes back through that single shared anchor, and the per-page
+     * page-number substitution makes it worse: each clone shows a DIFFERENT number, so a commit
+     * writes that page's number into the story as literal text and destroys the PAGE field.
+     *
+     * Page-box header/footer content is presentation. The docked editing bands
+     * (`editor-headerfooter.ts`) are the addressable affordance, and they exist precisely because a
+     * cloned node cannot be uniquely addressed.
+     */
+    makeClonedStoryInert(root) {
+      const nodes = [root, ...Array.from(root.querySelectorAll("*"))];
+      for (const el of nodes) {
+        el.removeAttribute("data-anchor");
+        el.removeAttribute("data-committed-text");
+        if (el.getAttribute("contenteditable") !== null) el.setAttribute("contenteditable", "false");
+      }
+    }
     /**
      * Creates a page container element.
      */
@@ -746,6 +1329,7 @@ var DocxodusPagination = (() => {
       pageBox.style.contain = "layout paint";
       pageBox.dataset.pageNumber = String(pageNumber);
       pageBox.dataset.sectionIndex = String(sectionIndex);
+      pageBox.dataset.pageInSection = String(pageInSection);
       const effectiveHeights = this.getEffectiveHeights(dims, sectionIndex, pageInSection, pageNumber);
       const headerSource = this.selectHeader(sectionIndex, pageInSection, pageNumber);
       if (headerSource) {
@@ -763,7 +1347,9 @@ var DocxodusPagination = (() => {
         headerDiv.style.justifyContent = "flex-end";
         headerDiv.style.paddingBottom = "4pt";
         for (const child of Array.from(headerSource.childNodes)) {
-          headerDiv.appendChild(child.cloneNode(true));
+          const clonedheaderDiv = child.cloneNode(true);
+          if (clonedheaderDiv.nodeType === 1) this.makeClonedStoryInert(clonedheaderDiv);
+          headerDiv.appendChild(clonedheaderDiv);
         }
         pageBox.appendChild(headerDiv);
       }
@@ -801,7 +1387,9 @@ var DocxodusPagination = (() => {
         footerDiv.style.justifyContent = "flex-start";
         footerDiv.style.paddingTop = "4pt";
         for (const child of Array.from(footerSource.childNodes)) {
-          footerDiv.appendChild(child.cloneNode(true));
+          const clonedfooterDiv = child.cloneNode(true);
+          if (clonedfooterDiv.nodeType === 1) this.makeClonedStoryInert(clonedfooterDiv);
+          footerDiv.appendChild(clonedfooterDiv);
         }
         pageBox.appendChild(footerDiv);
       }
@@ -812,6 +1400,13 @@ var DocxodusPagination = (() => {
         pageBox.appendChild(pageNum);
       }
       this.containerElement.appendChild(pageBox);
+      const notesEl = pageBox.querySelector(`.${this.cssPrefix}footnotes`);
+      if (notesEl) {
+        const notesHeightPt = pxToPt(notesEl.getBoundingClientRect().height);
+        if (notesHeightPt > 0) {
+          contentArea.style.height = `${Math.max(0, contentAreaHeight - notesHeightPt)}pt`;
+        }
+      }
       return {
         pageNumber,
         sectionIndex,
@@ -837,7 +1432,10 @@ var DocxodusPagination = (() => {
     if (!pageContainer) {
       throw new Error("Pagination container element not found");
     }
-    const engine = new PaginationEngine(staging, pageContainer, options);
+    const engine = new PaginationEngine(staging, pageContainer, {
+      ...options,
+      fragmentParagraphs: options.fragmentParagraphs ?? true
+    });
     return engine.paginate();
   }
   return __toCommonJS(pagination_exports);